/* Copyright (c) 2016-2017 Carecode Oy. All rights reserved. */
/* vim: set si ai et sw=4 ft=css ff=unix: */
html, body {
    font-family: "Roboto";
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #ffffff;
}

#cc-logo {
    display: inline-block;
    width: 100px;
    margin-top: -3px;
    filter: grayscale(100%);
}

#cc-logo:hover {
    filter: grayscale(0%);
}

#display-name {
    position: absolute;
    top: 10px;
    left: 15px;
    width: 260px;
    z-index: 10;
    overflow: hidden;
    max-height: 50px;
    text-overflow: ellipsis;
    color: white;
}

#display-name:hover, #display-name:focus {
    text-decoration: none;
}

@media (max-width: 991px) {
    #display-name {
        width: 170px;
        left: 50px;
    }
}

@media (max-width: 767px) {
    #display-name {
        width: 230px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        text-align: center;
    }
}

#display-name span {
    font-size: 24px;
    font-weight: 500;
    white-space: nowrap;
}

.cc-alert {
    background: #2196f3;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    z-index: 99999;
    text-align: center;
    min-height: 64px;
}

.cc-alert .glyphicon {
    font-size: 26px;
    float: left;
}

.cc-alert a {
    color: #ffffff;
}

#login-parent {
    position: relative;
    max-width: 500px;
    margin: 0 auto 0 auto;
    padding: 50px 50px 10px 50px;
}

#login-tabs {
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
}

#login-tabs button {
    display: inline-block;
    width: 50%;
    text-align: center;
    border: 0;
    height: 50px;
    font-size: 20px;
    font-weight: 500;
    color: #777777;
    text-transform: uppercase;
    background-color: #C0C0C0;
    transition: background-color 0.2s;
}

#login-tabs button.active {
    background-color: #f5f5f5;
    color: #444444;
}

#signup-warning .alert {
    margin: 1em;
}

#signup-field {
    margin: 0 2em 0 2em;
}


#patientlogin {
    float: left;
}

#prologin {
    float: right;
}

#app-conditions {
    font-size: 12px;
    line-height: 1;
}

#welcome-text {
    margin: 0 2em 0 2em;
}

#welcome-text .img-container {
    text-align: center;
    padding-top: 25px;
}

#welcome-text img {
    display: inline-block;
    max-width: 200px;
    max-height: 150px;
}

#content {
    height: auto;
    min-height: 100%;
    padding-bottom: 3em;
}

#made-by {
    text-align: center;
    margin-top: -3em;
}

#navigation #made-by {
    margin-top: -2em;
}

@media (min-width: 768px) {
    .login-column, .signup-column {
        height: 60em;
    } #login-parent, .login-column #welcome-text, #signup-parent, .signup-column #welcome-text {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    } #login-parent, #signup-parent {
        right: 2em;
    } .login-column #welcome-text, .signup-column #welcome-text {
        left: 2em;
        max-width: 40em;
    }
}

@media (min-width: 1000px) {
    #signup-parent {
        min-width: 33em;
    }
}

@media (min-width: 1200px) {
    #signup-parent {
        min-width: 40em;
    }
}

#disconnected {
    position: fixed;
    top: 68px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: white;
    border-radius: 3px;
    background-color: rgb(255, 152, 0);
    display: none;
    padding: 0 1em 0 1em;
    z-index: 9999;
}

#disconnected a {
    color: white;
    transition: color 0.2s;
}

#disconnected a:hover {
    color: #2196f3;
    text-decoration: none;
}

#disconnected .glyphicon {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

.cc-msg {
    position: absolute;
    z-index: 9999;
    top: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: white;
    border-radius: 3px;
    background-color: #2196f3;
    padding: 0 1em 0 1em;
    opacity: 1;
    transition: all 4s ease-in-out;
    -webkit-transition: all 4s ease-in-out;
}

.cc-msg.success-msg {
    background-color: #4caf50;
}

.cc-msg.error-msg {
    background-color: #ff9800;
}

#main-view > .cc-msg {
    top: 74px;
}

@media (min-width: 992px) {
    #disconnected, .cc-msg, .cc-confirm {
        margin-left: 150px;
    }
}

.cc-confirm {
    position: fixed;
    z-index: 9999;
    top: 80px;
    left: 50%;
    max-width: 95%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 3px;
    background-color: rgb(249, 249, 249);
    padding: 1em;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
}

.cc-confirm .cc-confirm-cancel {
    float: left;
    margin-right: 4px;
    width: 48%
}

.cc-confirm .cc-confirm-submit {
    float: right;
    margin-left: 4px;
    width: 48%
}

.cc-confirm-doubleconfirm {
    display: inline-block;
    margin: 0 0 1em 1em !important;
    transform: translateY(100%);
}
.cc-confirm-doubleconfirmtext {
    display: inline-block;
    margin: 0 0 1em 0;
    max-width: 84%;
}

.cc-modal {
    position: fixed;
    z-index: 7;
    top: 80px;
    left: 50%;
    max-width: 95%;
    bottom: 10px;
    overflow-y: scroll;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 3px;
    background-color: rgb(249, 249, 249);
    padding: 1em;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
}

#main-view {
    height: 100%;
    width: 100%;
    overflow: hidden;
    padding-top: 64px;
    position: relative;
    margin-right: -18px;
}

div[id^="ongoing-"] {
    position: fixed;
    display: none;
    top: 64px;
    left: 0;
    right: 0;
    background-color: #2196f3;
    height: 30px;
    font-size: 16px;
    color: white;
    z-index: 2;
    cursor: pointer;
    transition: background 0.2s;
}

div[id^="ongoing-"]:hover {
    background-color: #1468e5;
}

div[id^="ongoing-"] > span {
    padding-left: 1em;
}

#upper {
    background: #CADEFC;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    height: 0;
}


#offline, #nortcpeer {
    font-size: 24px;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateX(50%) translateY(-50%);
}

#counterElement {
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    color: white;
}

@media (min-width: 992px) {
    #offline, #nortcpeer {
        margin-right: -150px;
    }
    #counterElement {
        margin-left: 150px;
    }
}

#lower {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.loader {
    position: absolute;
    z-index: 2;
    right: 50%;
    top: 50%;
    margin-right: -25px;
    margin-top: -25px;
    background-color: rgba(0,0,0,0);
    border: 5px solid #1468e5;
    border-top: 5px solid rgba(0,0,0,0);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(1,0,1,0);
    -ms-transition: opacity 0.2s cubic-bezier(1,0,1,0);
    -ms-animation: spinoff .5s infinite linear;
    -webkit-animation: spinoff .5s infinite linear;
    -moz-animation: spinoff .5s infinite linear;
}

#lower > .loader {
    position: fixed;
}

.progress {
    display: inline-block;
    position: absolute;
    z-index: 3;
    right: 50%;
    top: 50%;
    margin-right: -25px;
    margin-top: -25px;
    background-color: rgba(0,0,0,0);
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

@-moz-keyframes spinoff {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(-360deg);
    }
}

@-webkit-keyframes spinoff {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-360deg);
    }
}

@-ms-keyframes spinoff {
    0% {
        -ms-transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(-360deg);
    }
}

@media (min-width: 992px) {
    .loader, .progress {
        margin-right: -175px;
    }
}

/* center */

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 32em;
}

/* vertical-align */

.valign-p {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.valign {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#fixed-bottom {
    position: absolute;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}


@media (max-height: 600px) {
    #fixed-bottom {
        display: none;
}}

/* footer styles */

#footer {
    text-align: center;
}

#footer a {
    color:#5ac9a6;
    text-decoration: none;
}

/* round buttons, wohoo */

.btn-round {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 3px;
    overflow: hidden;
}

.btn-round .glyphicon {
    font-size: 18px;
    line-height: 50px;
    width: 18px;
    vertical-align: middle;
    margin-top: -8px;
}

.btn-round .glyphicon-send {
    margin-left: -4px;
}

.btn-round .glyphicon-ban-circle {
    top: -40px;
    left: -10px;
    font-size: 38px;
    color: #F0F0F0;
}

#answer.btn-round {
    position: absolute;
    top: 50%;
    right: 50%;
    width: 100px;
    height: 100px;
    margin-right: -50px;
    margin-top: -50px;
    z-index: 6;
}

#answer.btn-round .glyphicon {
    line-height: 100px;
    font-size: 36px;
    width: 36px;
    vertical-align: middle;
}

.btn.btn-round:after {
    position: relative !important;
    width: 50px;
    height: 50px;
    transform: translateX(-31%) translateY(-13%);
}

@media (min-width: 992px) {
    #answer.btn-round {
        margin-right: -200px;
    }
}

#hangup .glyphicon, #decline .glyphicon {
    margin-left: -1px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

/* table modifications */
.td-first-cell {
    width: 70px;
}

.td-choose {
    text-align: right;
}

.td-choose h4 {
    color: #929292;
}

#contacts-container {
    margin: 0 1em 0 1em;
    padding: 0;
}

#contacts-container [class^=col-xs] {
    padding: 0px 0px 0px 5px;
}

.contact {
    background-color: rgb(249, 249, 249);
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.contact:hover {
    background: #2196f3;
}

.contact.added {
    background: #2196f3;
}

.contact-ico {
    text-align: center;
}
.contact-name {
    color: black;
}

.contact-speciality {
}

.contact-status {
    text-align: right;
    padding-right: 5px !important;
}

.new-call {
    margin-right: -6px;
    margin-top: -3px;
}

#groups-container {
    margin: 0 1em 0 1em;
    padding: 0;
}

#groups-container [class^=col-xs] {
    padding: 0px 0px 0px 5px;
}

.group {
    background-color: rgb(249, 249, 249);
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.group:hover {
    background: #2196f3;
}

.group-ico {
    text-align: center;
}
.group-name {
    color: black;
}

#discussions-container {
    margin: 0 1em 0 1em;
    padding: 0;
}

#discussions-container [class^=col-xs] {
    padding: 0px;
}

#discussions-headers p, #group-users-headers p, #users-headers p {
    font-size: 16px;
    font-weight: 800;
    margin: 10px 0 0 0;
    color: black;
}
@media (max-width: 767px) {
    #discussions-headers {
        display: none;
    }
    #discussions-container {
        margin-top: 10px;
    }
}

.discussions-row {
    background-color: rgb(249, 249, 249);
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
    max-height: 100px;
}

.discussions-row:hover {
    background: #2196f3;
}

.discussions-row:hover .glyphicon {
    color: white;
}

.discussions-row .pick-case {
    display: none;
    margin: 15px;
    float: right;
}

.discussions-row.active {
    max-height: 999px;
    transition: 0.5s;
}

.discussions-row.active:hover {
    background-color: rgb(249, 249, 249);
}

.discussions-row.active:hover .glyphicon{
    color: rgb(102, 102, 102);
}

.discussions-row.active .pick-case {
    display: inline-block;
}

.discussions-row.active .discussion-subject {
    overflow: initial;
    white-space: initial;
    text-overflow: initial;
}

.discussions-row.active .discussion-user {
    overflow: initial;
    white-space: initial;
    text-overflow: initial;
}

.discussion-ico {
    text-align: center;
}

.discussion-ico .glyphicon {
    margin-top: 7px;
    transition: color 0.2s;
}

.discussion-ico .unread {
    color: #2196f3;
}

.discussion-subject {
    color: black;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.discussion-user {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 20px;
}

.discussions-row .discussion-user {
    padding-right: 0px;
}

@media (min-width: 768px) {
    .discussions-row .discussion-user.col-sm-4 {
        width: 30.5%;
    }
    .discussions-row .discussion-user.col-sm-6 {
        width: 47.5%;
    }
}

@media (max-width: 767px) {
    .discussions-row .discussion-user {
        width: 97%;
    }
}

.user-name {
    position: relative;
    margin-right: 0.5em;
}

.user-name:after {
    right: 0px;
    content: ', ';
}

.user-name:last-of-type:after {
    content: '';
}

.discussions-row .user-name {
    font-weight: 500;
}

.discussions-row.active .user-name {
    display: inline-block;
}

.discussions-row.active .user-name:after {
    content: '\a';
}

.discussions-row .user-title {
    font-weight: 200;
}

.pending {
    display: none;
}
.pending:first-child {
    display: inline;
}

.ismuted {
    font-weight: 400;
}

#has-seen {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 500;
}

#has-seen > #seen-by:only-child {
    display: none;
}

#new-msg .control-label, #search-recipient .control-label, #manage-group .control-label, #add-group .control-label,form[id^="discussions-search"] .control-label, #queue-select-label, #edit-subject .control-label {
    font-weight: 700;
    font-size: 16px;
    Padding-top: 3px;
}

#maxtwenty-container {
    text-align: center;
}

#maxtwenty {
    font-size: 14px;
    font-weight: 500;
    margin: 1em;
}

#maxtwenty-container:first-child {
    display: none;
}

/* ul text decoration substitute using glyphicons */
.list-identifier {
    display: inline-block;
    vertical-align: middle;
    font-size: 24px;
    width: 30px;
    top: 1px;
    text-align: center;
    margin-right: 10px;
}

.list-sign {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin-right: 10px;
    color: #1468e5;
    font-size: 30px;
    transform: translateY(-2px);
}

.sign-bg {
    width: 24px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    background: white;
    border-radius: 50%;
    position: absolute;
    margin-left: 3px;
}
/* Navigation Menu - Background */
.hide-scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    margin-right: -18px;
}

/* sidebar */
#navigation {
    /* critical sizing and position styles */
    width: 300px;
    display: block;
    position: absolute;
    float: left;
    top: 64px;
    bottom: 0;
    left: -300px;
    z-index: 8;
    overflow: hidden;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
    padding-bottom: 2em;


    /* non-critical appearance styles */
    list-style: none;
    background: #2b2b2b;
}

#navigation ul {
    padding: 0;
}

/* Navigation Menu - List items */
.nav-item {
    list-style: none;
    padding: 0;
    position: relative;
}
.nav-item a {
    cursor: pointer;
}

.nav-header {
    width: 300px;
    list-style: none;
    font-weight: 700;
}

.nav-item h4 {
    color: #ffffff;
    padding: 0.5em 1em 0.5em 20px;
    font-size: 16px;
}

.nav-item a {
    display:inline-block;
    padding: 0.4em 1em 0.4em 30px;
    color: white;
    font-size: 14px;
    transition: color 0.2s, background 0.5s;
    vertical-align: middle;
    width:300px;
}

.nav-item a:hover {
    color: #2196f3;
    background: #484848;
    text-decoration: none;
    width:300px;
}

.nav-item a:active {
    text-decoration: none;
}

#incoming-header:only-child {
    display: none;
}

/* Nav Trigger */
#nav-trigger {
    /* critical styles - hide the checkbox input */
    display: none;
}

label[for="nav-trigger"] {
    /* critical positioning styles */
    position: absolute;
    left: 19px; top: 19px;
    z-index: 10;
    height: 22px;
    width: 22px;
    cursor: pointer;
    transition: 0.2s 0s;
}

#nav-trigger:checked, #navigation {
    transition: left 0.2s 0s, z-index 0s 0.2s;
}
#nav-trigger:checked + label {
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    transition: 0.2s 0s;
}

#nav-trigger:checked ~ #navigation {
    z-index: 8;
    left: 0;
    transition: left 0.2s 0s,z-index 0s 0s;
}


/* bootstrap modifications */
.navbar {
    margin: 0;
}

.navbar-inverse {
    background-color: #5ac9a6;
    border-radius: 0;
    z-index: 9;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #ffffff;
}

.navbar-inverse .navbar-nav > li > a {
    color: #ffffff;
    font-size: 16px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.navbar-inverse .navbar-nav > li > a:hover {
    color: #2196f3;
    font-size: 16px;
}

.navbar-brand {
    color: white;
    background-color: #62dab4;
}
.navbar-brand:hover,
.navbar-brand:focus {
    color: #ffffff;
    background-color: transparent;
}
.navbar-text {
    color: white;
}
.navbar-inverse > li > a {
    color: white;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: transparent;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-inverse  .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active >a,
.navbar-inverse .navbar-nav > .active >a:hover,
.navbar-inverse .navbar-nav > .active>a:focus {
    color: #ffffff;
    background-color: #55bd9c;
}
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
    color: #444444;
    background-color: transparent;
}
.navbar-toggle {
    border-color: transparent;
    position: fixed;
    right: 12px;
    top: 18px;
    margin: 0;
    z-index: 10;
    transition: 0.2s 0s;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
    background-color: transparent;
}
.navbar-toggle .icon-bar {
    background-color: rgba(0, 0, 0, 0.5);
}

.navbar-toggle.collapsed {
    right: 15px;
    top: 15px;
    transition: 0.2s 0s;
}

.navbar-toggle > .bar1 {
    -webkit-transform: rotate(45deg) translateY(4px);
    transform: rotate(45deg) translateY(4px);
    transition: 0.2s 0s;
    width: 26px;
}

.navbar-toggle > .bar2 {
    display: none;
    transition: 0.2s 0s;
}

.navbar-toggle > .bar3 {
    -webkit-transform: rotate(-45deg) translateY(-4px);
    transform: rotate(-45deg) translateY(-4px);
    transition: 0.2s 0s;
    width: 26px;
}

.navbar-toggle.collapsed > .bar1 {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: 0.2s 0s;
    width: 22px;
}

.navbar-toggle.collapsed > .bar2 {
    display: block;
    transition: 0.2s 0s;
}

.navbar-toggle.collapsed > .bar3 {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transition: 0.2s 0s;
    width: 22px;
}

.,
.navbar-form {
    color: white;
}

.navbar-inverse > .open > a,
.navbar-inverse > .open > a:hover,
.navbar-inverse > .open > a:focus {
    background-color: #55bd9c;
    color: #ffffff;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: #55bd9c;
    color: #ffffff;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc;
    background-color: #55bd9c;
}

.navbar-inverse .navbar-nav .dropdown a {
    cursor: pointer;
}

@media (min-width: 992px) {
    .navbar-collapse {
        margin-left: 300px;
}}

@media (min-width: 768px) and (max-width: 991px) {
    .navbar-collapse {
        margin-left: 200px;
    }
}

.navbar-collapse {
    border-top: 0;
}

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: transparent;
    }
    .navbar-nav .open .dropdown-menu .divider {
        background-color: transparent;
    }
    .navbar-nav .open .dropdown-menu > li > a {
        color: #b2dbfb;
    }
    .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
        background-color: transparent;
    }
    .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #0c7cd5;
    }
    .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #444444;
        background-color: transparent;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
        color: #2196f3;
    }
}

@media (min-width: 768px) and (max-width: 816px) {
    #reminder-container {
        width: 31px;
    }
    #reminder .glyphicon {
        margin-left: -8px;
    }
    #settings-dropdown-toggle {
        width: 150px;
    }
}

@media (min-width: 768px) {
    #reminder-title {
        display: none;
    }
}

#reminder + #reminder-links {
        display: none;
    }

#reminder .glyphicon {
    background-color: white;
    border-radius: 50%;
    border: 1px solid white;
    font-size: 1.03em;
}

#reminder .glyphicon-exclamation-sign {
    color: #ff9800;
}

#reminder .glyphicon-ok-sign {
    color: #4caf50;
}

#reminder-links ul {
    margin: 0;
}

.menu-badge {
    position: absolute;
    right: 7px;
    top: 7px;
    font-size: 10px;
    background: red;
}

.discussions-badge {
    position: absolute;
    font-size: 10px;
    background: red;
    margin: -5px 0 0 0;
    top: 10px;
}

.discussions-badge.right {
    right: 3px;
}

.discussions-badge.left {
    left: 3px;
}

@media (min-width: 376px) and (max-width: 470px) {
    .discussions-badge {
        top: 0;
        transform: scale(0.8);
    }
}

form#discussions-search {
    display: none;
}

.navbar-link {
    color: #b2dbfb;
}
.navbar-link:hover {
    color: #ffffff;
}
.btn-link {
    color: #b2dbfb;
}
.btn-link:hover,
.btn-link:focus {
    color: #ffffff;
}
.btn-link[disabled]:hover,
fieldset[disabled]   .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled]  .btn-link:focus {
    color: #444444;
}

.navbar-header {
    width: 100%;
}

.navbar-right {
    float: right !important;
    position: relative;
}
/* responsivness fixes */
@media (max-width: 768px) {
    .navbar-right {
    float: left !important;}
}

@media (min-width: 992px) {
    .container.main-view > .row, #remote, #panel-container, div[id^="ongoing-"], #user-management, #group-management, #pasteAndCrop, .headphones {
        padding-left: 300px;
        padding-right: 0;
    }
}

.container.main-view, #videocontainer .container.main-view.active {
    padding-left: 0;
    padding-right: 0;
}

.container.main-view > .row {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* main view big buttons */
.row-button {
    text-align: center;
}

.row-button > a {
    color: black;
    line-height: 1;
}

.row-button > a:hover {
    color: darkgrey;
    text-decoration: none;
}
/* Call alert */
.alert-buttons {
    margin-left: 30px;
}

.alert-buttons button {
    width: 18em;
}

/* Discuss tabs */
#cc-tabs {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    list-style: none;
    padding: 0;
    white-space: nowrap;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    min-height: 3em;
    margin-top: 0.5em;
}

#cc-tabs > li {
    display: inline-block;
    position: relative;
    width: 50%;
    text-align: center;
    border-bottom: 1px solid #dddddd;
    margin: 0 !important;
    cursor: pointer;
}

#cc-tabs > li.active {
    border-bottom: 2px solid #2196f3;
}

#cc-tabs > li > h4 {
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 18px;
    white-space: normal;
    color: #929292;
    text-transform: uppercase;
}

#discuss-tabs > li.active > h4 {
    color: #2196f3;
}

#no-discussions, #no-groupusers, #no-groups {
    text-align: center;
    display: block;
    width: 60%;
    margin: 5em auto 0em auto;
    padding: 1em;
    background-color: rgb(249, 249, 249);
    border-radius: 10px;
}

@media (max-width: 600px) {
    #no-discussions, #no-groupusers, #no-groups {
        width: 80%;
    }
}

#no-discussions h5, #no-groupusers h5, #no-groups h5 {
    color: black;
    font-weight: 600;
}

#onepatient, #noresults, #only-waitingroom {
    text-align: center;
    display: block;
    margin: 5em 0em 0em 0em;
    width: 100%;
}

#noresults {
    display: none;
}

#noresults:nth-child(2) {
    display: block;
}

#onepatient + #noresults {
    display: none;
}

#only-waitingroom {
    font-size: 20px;
    display: none;
}

#no-participants {
    display: none;
    margin: 7px 0px 0px 0px;
}

#no-participants:only-child {
    display: block;
}

.close-label {
    cursor: pointer;
}

.close-label:hover {
    color: black;
}

/* Hotlist */
#hotlist {
    position: relative;
}

#hotlist ul {
    display: inline-block;
    margin: 0;
    list-style: none;
    vertical-align: top;
}

#hotlist ul li {
    width: 15em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#hotlist .dusers {
    color: rgb(102, 102, 102);
}
#hotlist .list-identifier {
    vertical-align: 90%;
}

#msg-ntfy {
    display: none;
    position: fixed;
    z-index: 1;
    left: 34px;
    top: 11px;
    color: red;
    width: 15px;
    height: 15px;
    font-size: 16px;
    background-color: white;
    border-radius: 50%;
}

@media (max-width: 767px) {
    #msg-ntfy {
        z-index: 12;
    }
}

/* Video styles */
#video {
    height: 100%;
    padding: 0;
    text-align: center;
}

#video video {
    max-width: 100%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

#local  {
    width: auto !important;
    height: 20%   !important;
    position: absolute;
    z-index: 1;
    left: 5px;
    top: 6px;
}

#remote {
    transition: -webkit-filter 0.2s;
}

#local-full {
    display: none;
    position: absolute;
    z-index: 1;
    left: 10px;
    top: 11px;
    color: white;
}

#remote-full span {
    margin-top: -7px;
    margin-left: -1px;
}

#remote:-webkit-full-screen {
    height: auto;
    width: 100%;
    padding: 0;
}

#remote:-moz-full-screen {
    height: auto;
    width: 100%;
    padding: 0;
}

#local:-webkit-full-screen {
    height: auto;
    width: 100%;
}

#local:-moz-full-screen {
    height: auto;
    width: 100%;
}

#call-buttons {
    position: absolute;
    top: 5px;
    right: 5px;
}

#call-buttons button {
    float: right;
}

#audioonly > .glyphicon, #audioandvideo > .glyphicon {
    margin-left: -2px;
}

.headphones {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 20em;
}

#upper, #lower {
    transition: height 0.2s 0s;
}

#scp {
    display: none;
}

@media (min-width: 992px) {
    #local, #local-full {
        -webkit-transform: translateX(300px);
        transform: translateX(300px);
    }
}

/* messaging */
#message {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#message .row {
    margin: 0;
}

#message > #discussion-close-content, #message > #add-user-content, #message > #scp {
    display: none;
}

#discussion-header-small {
    height: 25px;
    top: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

#discussion-header-small #dsubject-small {
    display: inline-block;
    margin-right: 8px;
    max-width: 85%;
    font-weight: 600;
    color: black;
}

#discussion-header-small a {
    display: inline-block;
    margin: 0!important;
}

#discussion-header-small #go-to-top {
    position: absolute;
    top: 5px;
    font-weight: 500;
    font-size: 14px;
}

#edit-subject {
    padding: 2em 0 2em 0;
}

#message-thread {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 60px;
    z-index: 1;
    overflow: hidden;
}

#message-thread.closed {
    bottom: 0px !important;
}

#message-thread .col-sm-10 {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-y: scroll;
    height: 100%;
    transition: height 0.2s 0s;
    -webkit-overflow-scrolling: touch;
}

#message-thread ul {
    list-style-type: none;
    padding: 0;
}

#message-thread h4 {
    margin: 0;
    font-size: 20px;
}

#message-thread h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

#message-thread h5 .user-name {
    font-weight: 500;
}

#message-thread h5 .user-title {
    font-weight: 200;
}

#message-thread h5 .user-ssn {
    font-weight: 400;
    cursor: pointer;
}

#message-thread .speech-bubble {
    border-radius: 4px;
    padding: 8px;
    background-color: #F0F0F0;
    margin-bottom: 1em;
}

#message-thread .speech-bubble.me {
    background-color: #ffffff;
}

#message-thread .speech-bubble li {
    overflow: hidden;
}

#message-thread .message-details {
}

#message-thread .author {
    font-weight: 600;
    display: inline-block;
}

#message-thread .timestamp {
    float: right;
    display: inline-block;
    margin-right: 20px;
}

#message-thread #queue-description:empty {
    display: none;
}

.thread-img {
    display: inline-block;
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
}

.thread-video {
    width: auto;
    max-height: 400px !important;
}

#message-thread .discussion-event {
    text-align: center;
    font-size: 12px;
    background-color: #ffffff;
    position: relative;
}

.event-contents {
    border: 1px solid #666666;
    border-radius: 3px;
    padding: 0px 3px 0px 3px;
    display: inline-block;
    margin-bottom: 5px;
}

.discussion-event.closed .event-contents {
    border-color: #2196f3;
}

.discussion-event.important .event-contents {
    border-color: #e51c23;
}

.discussion-event.call-incoming .event-contents {
    border-color: #4caf50;
}

.discussion-event.call-decline .event-contents {
    border-color: #e51c23;
}

.discussion-event.call-answer .event-contents {
    border-color: #4caf50;
}

.discussion-event.call-end .event-contents {
    border-color: #ff9800;
}

@media all and (orientation:landscape) {
    .fullscreen-wide:-webkit-full-screen {
        height: auto;
        width: 100vw;
        max-width: none;
        max-height: none;
    }

    .fullscreen-wide:-moz-full-screen {
        height: auto;
        width: 100vw;
        max-width: none;
        max-height: none;
        object-fit: contain;
    }

    .fullscreen-wide:-ms-fullscreen {
        height: auto;
        width: 100vw;
        max-width: none;
        max-height: none;
    }

    .fullscreen-wide:fullscreen {
        height: auto;
        width: 100vw;
        max-width: none;
        max-height: none;
    }

    .fullscreen-tall:-webkit-full-screen {
        height: 100vh;
        width: auto;
        max-width: none;
        max-height: none;
    }

    .fullscreen-tall:-moz-full-screen {
        height: 100vh;
        width: auto;
        max-width: none;
        max-height: none;
        object-fit: contain;
    }

    .fullscreen-tall:-ms-fullscreen {
        height: 100vh;
        width: auto;
        max-width: none;
        max-height: none;
    }

    .fullscreen-tall:fullscreen {
        height: 100vh;
        width: auto;
        max-width: none;
        max-height: none;
    }
}

@media all and (orientation:portrait) {
    .fullscreen-wide:-webkit-full-screen {
        height: auto;
        width: 100vw;
        max-width: none;
        max-height: none;
    }

    .fullscreen-wide:-moz-full-screen {
        height: auto;
        width: 100vw;
        max-width: none;
        max-height: none;
    }

    .fullscreen-wide:-ms-fullscreen {
        height: auto;
        width: 100vw;
        max-width: none;
        max-height: none;
    }

    .fullscreen-wide:fullscreen {
        height: auto;
        width: 100vw;
        max-width: none;
        max-height: none;
    }

    .fullscreen-tall:-webkit-full-screen {
        height: auto;
        width: 100vw;
        max-width: none;
        max-height: none;
    }

    .fullscreen-tall:-moz-full-screen {
        height: auto;
        width: 100vw;
        max-width: none;
        max-height: none;
    }

    .fullscreen-tall:-ms-fullscreen {
        height: auto;
        width: 100%;
        max-width: none;
        max-height: none;
    }

    .fullscreen-tall:fullscreen {
        height: auto;
        width: 100%;
        max-width: none;
        max-height: none;
    }
}

#participants-container .label {
    display: inline-block;
    margin-right: 0.5em;
    margin-top: 8px;
    font-size: 12px;
}

#answer-field {
    background-color: white;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3);
    margin: 0 !important;
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
    z-index: 2;
    transition: height 0.2s 0s;
}

#answer-field form{
    height: 100%;
    width: 100%;
}

#answer-field .container, #answer-field .row, #answer-field .col-sm-11 {
    height: 100%;
}

#answer-field textarea {
    height: 100%;
    width: 80%;
    border: 0;
    vertical-align: top;
    resize: none;
    box-shadow: none;
    border: none;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#upload {
    position: absolute;
    overflow: hidden;
    top: 2px;
    right: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

#upload > input {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

#upload:after, #send:after {
    transform: translateX(-31%) translateY(-95%);
}

#send {
    display: none;
    position: absolute;
    top: 2px;
    right: 5px;
    width: 50px;
    height: 50px;
}

#msg-textarea:disabled {
    background-color: rgba(0,0,0,0);
}

#message-tools {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
    transition: top 0.2s 0s;
}

#message-tools button,#message-tools span, #message-tools label {
    float: right;
}

#more-tools td{
    position: relative;
}

#more-tools span, #more-tools button, #more-tools label, #more-tools .tool-container {
    display: none;
}

#more-tools.hover span, #more-tools.hover button, #more-tools.hover label, #more-tools.hover .tool-container {
    display: inline-block;
}

#more-tools td:first-child {
    width: 0px;
}

#more-tools.hover td:first-child  {
    display: table-cell;
    width: 230px;
}

#more-tools.hover #expand-tools {
    transform: rotate(45deg);
}

.tool-container {
    display: inline-block;
    width: 55px;
    height: 55px;
    float: right;
}

button#expand-tools {
    transition: all 0.2s;
    display: inline-block;
    position: absolute;
    top: 0;
}

#adduser form {
    width: 100%;
}

input.select-msg {
    position: absolute;
    right: 0px;
    top: 8px;
}

.download {
    position: absolute;
    left: 12px;
    bottom: 4px;
    font-size: 18px;
}

@media screen and (max-width: 767px), screen and (max-height: 500px) {
    .select-msg, #more-tools.hover #export-body > button {
        display: none;
    }
    #message-thread .timestamp {
        margin-right: 0;
    }
    #message-tools {
        opacity: 0.7;
    }
}

/* Styling for discussion.close  */

.popover {
    width: inherit;
}

.popover.slim {
    max-width:400px;
}


.popover-content .btn {
    width: 121px;
}

#user-search {
    width: 23em;
}

#user-search + .input-group button, #queue-select + .input-group-btn button {
    width: 4em;
}
#user-search + .input-group {
    display: none;
}

#pasteAndCrop {
    height: 100%;
    width: 100%;
}

#pasteAndCrop > div {
    height: 100%;
    width: 100%;
    padding: 1em;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#settings-dropdown-toggle {
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.edit {
    font-size: 16px;
    vertical-align: super;
    margin-left: 10px;
    text-decoration: none;
}

.edit:hover {
    text-decoration: none;
    cursor: pointer;
}

#edit-save {
}

#remove-group {
    display: none;
    margin-top: 1em;
    height: 29px;
    min-width: 5em;
}

#manage-group-users .row.contact .checkbox {
    margin: 0 0 0 -9px;
    float: left;
}

#manage-group-users #group-users-headers.row .checkbox {
    margin: 10px 0 0 -9px;
    float: left;
}

#manage-group-users .row.contact .checkbox:checked:before, #manage-group-users #group-users-headers.row .checkbox:checked:before {
    margin-top: 6px;
}

#admin-content .row.contact .checkbox {
    margin: 7px 0 0 -9px;
    float: left;
}

#admin-content #users-headers .checkbox {
    margin: 17px 0 0 -9px;
    float: left;
}

#user-management #admin-content .checkbox, #user-management #add-to-group-button {
    display: none;
}

#remove-selected-users {
    float: right;
}

#group-management #group-add-users #new-user-button, #group-management #group-add-users #cc-tabs {
    display: none !important;
}

#group-management .row.contact {
    cursor: default;
}

#group-management .row.contact:hover {
    background-color: rgb(249, 249, 249);
}

#profile-groups {
    list-style: none;
    text-indent: 0;
    padding: 0 0 0 16px;
    transform: translateY(4px);
}

.profile-group {
    background-color: #ffffff;
    position: relative;
    font-size: 12px;
    text-align: center;
    border: 1px solid #666666;
    border-radius: 3px;
    padding: 0px 3px 0px 3px;
    display: inline-block;
    margin: 4px 4px 0 0 ;
}

#emailnotverified, #phonenotverified {
    color: #ff9800;
}

#notifications-container:not(:empty) {
    margin: 3em 0 1em 0;
}

#notifications-container[style]:not(:empty) {
    padding: 1em 1em 0 1em;
}

#groups-multiselect {
    padding: 10px 0px 0px 0px !important;
    list-style: none !important;
    display: none;
}

#groups-multiselect.visible {
    display: block;
}

#groups-multiselect label {
    text-align: right;
}

#groups-multiselect input[type="checkbox"]{
    padding: 0;
    display: inline-block;
    min-height: 10px;
    margin-bottom: -5px;
}

#toggle-search {
    display: block;
    width: 100%;
    text-align: right;
    font-size: 18px;
    margin: 5px 5px -15px 0px;
}

#group-dummy {
    padding: 6px 16px 6px 0px;
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 0;
    padding-right: 0\9;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEVmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmaP/QSjAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
    -webkit-background-size: 13px 13px;
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: right center;
    -webkit-box-shadow: inset 0 -1px 0 #dddddd;
    box-shadow: inset 0 -1px 0 #dddddd;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#group-dummy:focus {
    outline: none;
    -webkit-box-shadow: inset 0 -2px 0 #2196f3;
    box-shadow: inset 0 -2px 0 #2196f3;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEUhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISF8S9ewAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
}

select {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.user-card.tooltip.in {
    opacity: 1;
}

.user-card .groups {
    list-style: none;
    text-indent: 0;
    text-align: center;
    padding: 0;
    margin-top: 1em;
}

.user-card .group {
    background-color: #666666;
    position: relative;
    font-size: 12px;
    text-align: center;
    border: 1px solid #ffffff;
    border-radius: 3px;
    padding: 0px 3px 0px 3px;
    display: inline-block;
    margin-bottom: 3px;
}


.tooltip-inner {
    white-space: nowrap;
    max-width: none;
}

.tooltip-inner li {
    text-align: left;
}

.filter {
    display: none;
}

input[type="text"]:required:focus:valid, #login-parent input[type="email"]:focus:valid, #login-parent input[type="password"]:focus:valid {
    box-shadow: inset 0 -2px 0 #4caf50;
}

@media screen and (min-width: 1200px) {
    .mc-column-desc {
        min-height: 8em;
    }
}

#masscreate legend .badge {
    font-size: 18px;
    font-weight: 500;
    margin-top: 0px;
    margin-right: 0.5em;
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

a.disabledLink {
    color: grey;
    text-decoration: none;
}

a.disabledLink:hover {
    color: grey;
    text-decoration: none;
    cursor: default;
}

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}

#help {
    max-width: 60em;
    padding: 1em;
    margin: auto;
}

#help .btn {
    cursor: default;
}

#help :target {
    padding: 0 1em 1em 1em;
    margin-left: -1em;
    border: dashed 2px lightgrey;
    border-radius: 5px;
}

a.toggleCollapse {
    font-size: 18px;
    vertical-align: middle;
}

a[aria-expanded="true"].toggleCollapse span.glyphicon-chevron-down {
    display: none;
}

a[aria-expanded="false"].toggleCollapse span.glyphicon-chevron-up {
    display: none;
}

.checkbox {
}