/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

html, body, .full-wrapper { height: 100%; }
body { background-image: url(/images/background.png); background-position: center; background-size: cover; color: #3a3a3a ;}

section,
section > .content-wrapper { height: 100%; }

.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.fullMessage { 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-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #ffffff; border: 0; cursor:pointer; }
a.list-group-item, button.list-group-item { color: #555555; }
.list-group-item:first-child { border-top-right-radius: 4px; border-top-left-radius: 4px; }
.list-group-item:last-child { margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;}


.select2-dropdown { z-index: 10000; }

#contactsFilter { min-width: 100%; }

#channelMessagesDiv { /*background-color: white;*/ display: block; position: relative; overflow-y: auto; }

#sendChannelMessageDiv .input-group-addon, .input-group-btn { vertical-align: bottom; }

#channelConversationDiv { width: 100%; }

.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; }

.leftBubble, .rightBubble { border-radius: 15px; padding: 5px 12px; margin: 3px; color: white; max-width: 75%; white-space: pre-line; clear:both; display:block; }

.leftBubble { background-color: #BBB; float: left; text-align: left; margin-left: 0; border-bottom-left-radius: 0; border-top-left-radius: 0; }

.timestamp { clear: both; font-size: small; color: #1e1e1e }
.leftTimestamp {float: left;}
.rightTimestamp {float: right;}

.rightBubble { background-color: #5D9CEC; float: right; text-align: left; margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }

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

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

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

.broadcastList .rightBubble { float: left; text-align: left; max-width: calc(100% - 20px); border-radius: 15px; margin: 10px; background-color: #656565; border-bottom: 1px solid #fff; width: 100%; }

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

.chatline { width: 100%; min-width: 100%; clear: both; }

.fullMessagePane, .termsPane { display: none; overflow-y:scroll; max-height:100%; background-color:#fff;}

.termsPane { 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; }

#newMesssageBox, #newComposeBox { overflow: hidden; resize: none; height: 34px; }

.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.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus { color: inherit; }

#contactTabsContent, #chatContentWrapper, #sendChannelMessageDiv { font-size: 1.1em; }
#chatContentWrapper, .unengaged { background-color: rgba(255,255,255,.6); }

.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 .close-button { cursor: pointer; top: 50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); right: 10px; position: absolute; }
.header .welcome .close-button .icon-log-out { font-size:7vw; }
.header .welcome .highlight { color: #FF8300; }
.header .welcome .username { font-size: 4.2vw; }

.messagePane { height: 100%; }
.messagePane #chatTabs { border-top-left-radius: 3px; border-top-right-radius: 3px; }
.messagePane[data-type='convo'] #chatTabs { background-color: #a25eb5; }
.messagePane[data-type='broadcast'] #chatTabs { background-color: #00a0df; }
.messagePane[data-type='convo'].convoPaneClick #chatTabs { background-color: #ff8300; }
.messagePane #chatTabs a {border:0; color:#fff;}
.messagePane .nav-tabs { border-bottom: 0; }
.messagePane .nav-tabs > li > a { background: transparent; }

.chat-wrapper { margin: 0 auto; background: rgb(0,0,0);  }
.chat-wrapper .chat-bg { background:#fff; }
.chat-wrapper.show-terms .contactPane { display:none !important; }
.chat-wrapper.show-terms .unengaged { display:none !important; }
#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; }
.contactPane .tab-content { border: 0; }
.messagePane #chatTabs .who { margin-left: auto; margin-right: 1em;}
#chatTabs 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 .welcome { font-size: 14px }
    .header .welcome .username { font-size: 14px; }
    .header .welcome .close-button .icon-log-out { font-size: 30px; color:#999; }
    .contactPane .nav > li { font-size: .8rem; }
}

@media only screen and (min-width: 768px) {
    .chat-wrapper { background:transparent;}
    .chat-wrapper .chat-bg { 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: -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: 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 .messagePane { display: block !important; }
    .unengaged { display:block !important; font-weight:bold;}
    .engaged .unengaged { display:none !important; }
    .contactPane { display: block !important; height: 100%; background: rgb(255,255,255); background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(3%, rgba(255,255,255,1)), to(rgba(255,255,255,1))); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 3%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 3%, rgba(255,255,255,1) 100%); }
    .contactPane div[data-example-id="togglable-tabs"]{height:100%;}
    .contactPane .container{ height: calc(100% - 57px); overflow-y: auto; margin-top:10px}
    #chatTabs li[data-tab="back"] { display:none !important; }
    .messagePane #chatTabs .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) {
    body {padding-bottom:4em;}
}
@media only screen and (min-width: 1200px) {
    .contactPane .nav > li { font-size: 1rem; }
}