/* This is temporary transition stuff*/
#contactTabs { position: fixed; right: 0; bottom: 0; }

html, body, .full-wrapper { height: 100%; }
body { background-image: url(/images/background.png); background-position: center; background-size: cover; color: #3a3a3a; overflow-y: hidden; font-family: Roboto; height:100%; }
#list-root { height: calc(100vh - 151px); }
section,
section > .content-wrapper { height: 100%; }

template { display: none; }

#emoji-button { font-size: 22px; line-height: 34px; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.hidden { display: none !important; }

.nav-tabs { border-bottom: 1px solid #dddddd; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 4px; }
.contactPane .nav > li { font-size: 4vw; }
.tab-content.full-message { background: white; }
.tab-content.full-message { background: white; }
.nav-tabs > li { float: left; }
.nav-tabs > li > a { text-align: center; font-weight: bold; color: #515253; background-color: #edf1f2; margin: 0; border: 1px solid #dde6e9; border-radius: 0; margin-right: 2px; line-height: 1.52857143; border: 1px solid transparent; border-radius: 4px 4px 0 0; }
.nav-tabs > li:last-child > a { margin-right: 0; }
.nav-tabs > li > a.active, .nav-tabs > li > a.active:hover, .nav-tabs > li > a.active:focus { color: #dde6e9; background-color: #ffffff; border: 1px solid #dddddd; border-bottom-color: transparent; cursor: default; }
.nav-tabs > li > a.active, .nav-tabs > li > a.active:hover, .nav-tabs > li > a.active:focus { color: inherit; border-bottom-color: #fff; }
.empty-chat-message { text-align: center; font-weight: bold; }
.tab-content { padding: 10px 4px; border-style: solid; border-width: 0 1px 1px 1px; border-color: #dde6e9; }

.list-group { width: 100%; border-radius: 0; }
.list-group-item { position: relative; display: block; padding: 10px 15px; border: 0; cursor: pointer; }
.list-group-item:last-child { margin-bottom: 0; }

.select2-search > input { width: 100% !important; }
.select2-dropdown { z-index: 10000; }
.filter { min-width: 100%; }

#menu-options { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 5000; }
#menu-options .menu { position: absolute; top: 40px; left: 0px; width: 100%; background-color: #e1e9f3; border: 1px solid #b9b9b9; border-radius: 4px; }
#menu-options .entypo { float:right; }
#menu-options:not(.show) { display: none; }
#menu-options ul { margin:10px 20px; padding:0;  }
#menu-options li { list-style: none; cursor:pointer;  }


.chat-wrapper { height: calc(100%); overflow-y: auto; }
.chat-wrapper.broadcast #channelConversationDiv { display: none; }
#channelMessagesDiv { /*background-color: white;*/ display: block; position: relative; overflow-y: auto; overflow-x: hidden; height:100%; }
#channelMessagesDiv ul { padding: 0; list-style: none; }
#channelMessagesDiv .message-count { display: inline-block; color: #fff; background-color: #FF8300; border-radius: 10px; padding: 6px 10px; line-height: 10px; -webkit-transition: opacity ease-out .3s; -o-transition: opacity ease-out .3s; transition: opacity ease-out .3s; -webkit-transition-delay: .1s; -o-transition-delay: .1s; transition-delay: .1s; }
#channelMessagesDiv .contact-list-convo .message-count { position: absolute; right: 20px; top: 10px; /*top: 50%; transform: translateY(-50%);*/ }
#channelMessagesDiv .contact-list-convo .message-count[data-count="0"] { opacity: 0; }
#channelMessagesDiv .sorts .message-count { margin-left: 4px; }
#channelMessagesDiv .sorts .message-count[data-count="0"] { display: none; }
#channelMessagesDiv .rep-id { color: #888888;  }
#channelMessagesDiv .contact-info { font-family: Roboto Condensed; }
#channelMessagesDiv .name { color: #333; font-weight: bold; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
#channelMessagesDiv small { font-size: 90%; }
#channelMessagesDiv .contact-list-convo { }
#channelMessagesDiv li > div.selected a { background: -webkit-gradient(linear, left top, right top, from(rgb(93 156 236 / 61%)), to(rgba(243,243,243,1))); background: -o-linear-gradient(left, rgb(93 156 236 / 61%) 0%, rgba(243,243,243,1) 100%); background: linear-gradient(90deg, rgb(93 156 236 / 61%) 0%, rgba(243,243,243,1) 100%); }
#channelMessagesDiv .chat-entry:not(.group) .group { display: none; }
#channelMessagesDiv .chat-entry.group .individual { display: none; }



.chatline { width: 100%; min-width: 100%; position: relative; }
.chatline::after { clear: both; content: ""; display: block; }
.chatline.has-reactions { }
.chatline .bubble { position: relative; border-radius: 10px; margin: 3px; padding: 5px 8px; color: white; max-width: 75%; white-space: pre-line; clear: both; display: block; word-break: break-all; }
.chatline .leftBubble { background-color: #687f91; float: left; text-align: left; margin-left: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; }
.chatline .rightBubble { background-color: #5D9CEC; float: right; text-align: left; margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.chatline.has-reactions .bubble { padding: 5px 8px 2px;}
.chatline .reactions { position: relative; top: 100%; }
.chatline .reactions.right { right: 0; }
.chatline .reactions.left { left: 0; }
.chatline .reactions > span { font-size: 13px; background-color: #497fc5; border-radius: 5px; padding: 2px 4px; margin: 1px; cursor: pointer; white-space: nowrap; border: 1px solid #102848; }
.chatline .reactions > span.mine { background-color:#1b4e91 }
.chatline .reactions > span .count { font-size: 12px; margin-left: 2px; }

.chatContent { min-height: 100%; max-height: 100%; overflow-y: auto; }
.badge { background-color: #5D9CEC; }

.messageBubble { color: white; display: block; border-radius: 25px; max-width: 80%; padding: 5px 10px 5px 10px; margin-bottom: 10px; }
.timestamp { font-size: small; color: #1e1e1e }
.timestamp::after { content: " "; display: block; clear: both; }
.leftTimestamp { float: left; }
.rightTimestamp { float: right; }
.message-options { position: absolute; bottom: calc(100% - 12px); right: 4px; border-radius: 5px; background-color: #1b4e91; border: 1px solid #000; font-size: 18px; color: #cee4ff ;}
.message-options.left { right: auto; left: 4px; }
.message-options ul { list-style: none; padding: 0 8px; margin: 0; }
.message-options li { padding: 2px; margin: 0; display: inline-block; }
.message-options li > div { cursor: pointer; }


#compose-message, #cancel-message { margin-right: -8px; }

#composeScreen { overflow: hidden; }
#composeMessageDiv { -webkit-transition: max-height .2s linear; -o-transition: max-height .2s linear; transition: max-height .2s linear; }
#composeMessageDiv.closed { max-height: 0; }
#composeMessageDiv button:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; }
.list-group-item.collapsed { border-bottom: 2px solid #006adb; }

.rightBubble.error { background-color: rgb(190, 9, 9); }

.chat-wrapper:not(.broadcast) #broadcast { display: none; }
#broadcast a.selected { background: -webkit-gradient(linear, left top, right top, from(rgb(255 255 255 / 100%)), to(rgba(255,255,255,0))); background: -o-linear-gradient(left, rgb(255 255 255 / 100%) 0%, rgba(255,255,255,0) 100%); background: linear-gradient(90deg, rgb(255 255 255 / 100%) 0%, rgba(255,255,255,0) 100%); }
.broadcastList .rightBubble { float: left; text-align: left; max-width: calc(100% - 20px); border-radius: 7px; margin: 10px; background-color: #607895; border-bottom: 1px solid #fff; width: 100%; }
.broadcastList .rightBubble.error { background-color: rgb(190, 9, 9); }



.full-message-pane, .terms-pane { display: none; overflow-y: scroll; max-height: 100%; background-color: #fff; }

.terms-pane { padding-bottom: 1em; }

.termsButton { margin-top: 1em; margin-right: 1em; }

.termsMessage { padding-bottom: 1em; }

.dateString { clear: both; width: 100%; text-align: center; color: #1e1e1e; font-size: .9em; padding: 15px; }


.unreadBubble { font-size: .9em; background: #5d9cec; padding: 2px 6px; border-radius: 12px; font-weight: bold; color: white; }

.loading-pane { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; z-index: 999; display: -webkit-box; display: -ms-flexbox; display: flex; color: white; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0.65; font-size: 40px; }

.disabled { pointer-events: none; cursor: not-allowed; }

.list-group-item,
.list-group-item.disabled,
.list-group-item:disabled { background-color: transparent; }
.list-group-item.disabled,
.list-group-item:disabled { color: #888888; }
.list-group-item.disabled:hover, .list-group-item:disabled:hover { font-weight: bold; }

#chatContentWrapper, #sendChannelMessageDiv { font-size: 1.1em; }
#chatContentWrapper { background-color: rgba(255,255,255,.75); -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; overflow-y: auto; }
.unengaged { background-color: rgba(255,255,255,.45); }

#sendChannelMessageDiv { background-color: rgba(255,255,255,.75); }
#sendChannelMessageDiv .input-group-addon, .input-group-btn { vertical-align: bottom; }
#sendChannelMessageDiv .input-area { width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0; flex: 0 0; background: #fff; border-radius: 6px; }
#sendChannelMessageDiv .input-area:not(.content) #sendButton { background-color: transparent !important; pointer-events: none; color: #c3c3c3 !important; }
#channelConversationDiv { width: 100%; height:100%; }
#newMessageBox, #newComposeBox { overflow: hidden; resize: none; height: 34px; border: 0; }
#sendChannelMessageDiv textarea { }
#sendChannelMessageDiv button { }

.header { background-image: url(/images/header-background.png); background-position: center; background-repeat: repeat-y; text-align: center; }
.header img { padding: 20px; width: 100%; max-width: 529px; }
.header .welcome { background: white; text-align: center; text-transform: uppercase; font-weight: 500; font-size: 3.6vw; font-family: Roboto, 'Myriad Pro', Arial, Helvetica, sans-serif; color: #003C5B; position: relative; }
.header .welcome .highlight { color: #FF8300; }
.header .welcome .username { font-size: 4.2vw; }

.contactPane { background-color: #fff; }
.chat-wrapper.broadcast .contactPane { background-color: #bbd3ed; }
.contactPane .controls { width: 100%; text-align: center; position: relative; border-bottom: 1px solid transparent; background-color: #fff; }
.contactPane .controls img { width: 100%; max-width: 152px; }
.contactPane .controls .entypo { }
.contactPane .controls .icon-dots-three-vertical { float: left; cursor: pointer; padding: 9px 6px 0; }
/*.contactPane .controls .icon-dots-three-vertical:hover { background-color: #dde6e9; }*/
/*.contactPane .controls .icon-dots-three-vertical::before { border-radius: 50%; background-color: #ebebeb; }*/
.contactPane .controls .icon-new-message,
.contactPane .controls .icon-megaphone { float: right; cursor: pointer; padding: 10px 6px 9px; }
.contactPane .controls .entypo::before { font-size: 22px; margin: 0 6px; }


.contactPane .sorts a { color: #939393; text-decoration: underline; }
.contactPane .sorts a:hover { color: #000; }

.message-pane { height: 100%; }
.message-pane #chat-header { min-height: 44px }
.message-pane #chat-header a { border: 0; color: #fff; }
.message-pane .nav-tabs { border-bottom: 0; }
.message-pane .nav-tabs > li > a { background: transparent; }

.chat-wrapper { margin: 0 auto; }
.chat-wrapper.show-terms .contactPane,
.chat-wrapper.show-terms .unengaged,
.chat-wrapper.show-terms .message-pane,
.chat-wrapper.show-terms .loading-pane { display: none !important; }
.chat-wrapper.show-terms .terms-pane { display: block !important; }
.chat-wrapper #chat-header { background-color: #fff; }

.chat-wrapper:not(.compose) .message-pane [data-role="compose"] { display: none; }

.chat-wrapper.compose .message-pane { display: block !important; }
.chat-wrapper.compose .message-pane [data-role="compose"] .to { width: calc(100% - 40px); max-width: calc(100% - 40px); display: inline-block; }
.chat-wrapper.compose .message-pane .info { display: none; }
.chat-wrapper.compose .chatContent { display: none; }
.chat-wrapper.compose .cancel { color: rgb(190, 9, 9); }
.chat-wrapper .compose-content { font-size: 20px; }
.chat-wrapper:not(.compose) .compose-content { display: none; }
.chat-wrapper:not(.compose) .message-pane[data-type='convo'] #chat-header { background-color: #ff8300; }
.chat-wrapper:not(.compose) .message-pane[data-type='broadcast'] #chat-header { background-color: #007bff; }
.chat-wrapper.compose .select2-selection { border: 0; }
.chat-wrapper.compose .select2-container--default.select2-container--focus .select2-selection--multiple { border: 0; }
.chat-wrapper.compose .select2-selection ul { vertical-align: bottom; }
.chat-wrapper.compose .select2-container .select2-search--inline .select2-search__field { margin-top: 7px; }
.chat-wrapper.compose .contactPane .controls .icon-new-message { background-color: #e3e2e5; position: relative; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.chat-wrapper.broadcast .contactPane .controls .icon-megaphone { background-color: #bbd3ed; border-top-left-radius: 8px; border-top-right-radius: 8px; }


/*
.chat-wrapper.compose .contactPane .controls .icon-new-message { position: relative; height: 0px; width: 100px; border-top: 50px solid #0066CC; border-right: 50px solid #0066CC; border-bottom: 50px solid #0066CC; border-left: 50px solid transparent; }
.chat-wrapper.compose .contactPane .controls .icon-new-message::before { content: ""; display: block; border-right: 0px; border-left: 50px solid #0066CC; position: relative; bottom: 50px; left: -60px; }
.chat-wrapper.compose .contactPane .controls .icon-new-message::after { content: ""; display: inline-block; border-top: 50px solid transparent; border-right: 0px; border-bottom: 50px solid transparent; border-left: 50px solid #0066CC; position: absolute; top: -50px; left: 150px; }
.chat-wrapper.compose .contactPane .controls .icon-new-message::after { content: " "; display: block; position: absolute; top: 0; bottom: 0; right: 100%; width: 8px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; background-color: #e3e2e5; }
    */

.chat-wrapper.compose #chat-header { background-color: #e3e2e5; }

.full-wrapper.unauthorized .chat-wrapper { display: none !important; }
.full-wrapper.unauthorized .full-message-pane { display: block !important; position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center; background: rgba(255,255,255,.75); overflow: hidden; }

/*
#contactTabs.nav-tabs a { color: rgba(255,255,255,.66); }
#contactTabs.nav-tabs li[data-tab="conversations"] { width: 40%; }
#contactTabs.nav-tabs li[data-tab="conversations"] a { background-color: #ff8300; border-color: #e07300; }
#contactTabs.nav-tabs li[data-tab="conversations"] a.active { -webkit-box-shadow: 0px 10px 0px -5px #f8ab59, 0px 20px 0px -10px #ffd7ad, 0px 15px 0px -10px rgba(0,0,0,0); box-shadow: 0px 10px 0px -5px #f8ab59, 0px 20px 0px -10px #ffd7ad, 0px 15px 0px -10px rgba(0,0,0,0); }
#contactTabs.nav-tabs li[data-tab="broadcasts"] { width: 30%; }
#contactTabs.nav-tabs li[data-tab="broadcasts"] a { background-color: #00a0df; border-color: #006d98; }
#contactTabs.nav-tabs li[data-tab="broadcasts"] a.active { -webkit-box-shadow: 0px 10px 0px -5px #A1D8FF, 0px 20px 0px -10px #E1EEFF, 0px 15px 0px -10px rgba(0,0,0,0); box-shadow: 0px 10px 0px -5px #A1D8FF, 0px 20px 0px -10px #E1EEFF, 0px 15px 0px -10px rgba(0,0,0,0); }
#contactTabs.nav-tabs li[data-tab="contacts"] { width: 30%; }
#contactTabs.nav-tabs li[data-tab="contacts"] a { background-color: #a25eb5; border-color: #7a009c;}
#contactTabs.nav-tabs li[data-tab="contacts"] a.active { -webkit-box-shadow: 0px 10px 0px -5px #c193ce, 0px 20px 0px -10px #e6cded, 0px 15px 0px -10px rgba(0,0,0,0); box-shadow: 0px 10px 0px -5px #c193ce, 0px 20px 0px -10px #e6cded, 0px 15px 0px -10px rgba(0,0,0,0); }
#contactTabs.nav-tabs li a.active { color:#fff !important; }
.message-pane #chat-header .who { margin-left: auto; margin-right: 1em;}
#chat-header li[data-tab="back"] {text-transform: uppercase;}
    */
.col.contact-delete-button-wrapper { width: 40px; padding-right: 0px; overflow: hidden; vertical-align: middle; }


@media only screen and (max-width: 575px ) {
    #myTabs.nav-tabs a { padding: 10px 0; text-align: center; }
}

@media only screen and (min-width: 576px ) {
    .header { text-align: left; background: rgba(255,255,255,.77); position: relative; min-height: 44px; }
    .header img { padding: 8px; max-width: 156px; }
    .header .welcome { font-size: 14px; background-color: transparent; display: inline; position: unset; }
    .header .welcome > span { vertical-align: sub; }
    .header .welcome .username { font-size: 14px; }
    #menu-options .menu { width:auto; min-width:200px; left:10px;  }
    .contactPane .nav > li { font-size: .8rem; }
    .contactPane .controls { }
}

@media only screen and (min-width: 768px) {
    .contactPane .controls { height: 44px; }
    .chat-wrapper { background: transparent; }
    .chat-wrapper .chat-bg { background: -o-linear-gradient(top, rgba(0,0,0,0.804359243697479) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.804359243697479)), color-stop(30%, rgba(0,0,0,0)), color-stop(80%, rgba(0,0,0,0)), to(rgba(0,0,0,0))); background: linear-gradient(180deg, rgba(0,0,0,0.804359243697479) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%); }
    #contactTabsContent, #chatContentWrapper, #sendChannelMessageDiv { font-size: 1em; }
    .engaged .message-pane { display: block !important; }
    .chat-wrapper:not(.compose) .unengaged { display: block !important; font-weight: bold; }
    .chat-wrapper.engaged .unengaged { display: none !important; }
    .contactPane { display: block !important; height: 100%; background: rgb(255,255,255); max-width: 400px; }
    .contactPane div[data-example-id="togglable-tabs"] { height: 100%; }
    .contactPane .container { height: calc(100% - 57px); overflow-y: auto; }
    #chat-header li[data-tab="back"] { display: none !important; }
    .message-pane #chat-header .who { margin-left: 0; display: inline-block; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
}

@media only screen and (min-width: 992px) {
    .message-pane { max-width: calc(100% - 400px ); }
}

@media only screen and (min-width: 1200px) {
    .contactPane .nav > li { font-size: 1rem; }
}