html {
    width: 100%;
}

body {
    padding-bottom: 0;
    font-size: 120%;
    overflow: hidden;
}

body.show-spinner>main {
    overflow: hidden !important;
}


/* Hide everything under body tag */

body.show-spinner>* {
    opacity: 0;
}


/* Spinner */

body.show-spinner::after {
    content: ' ';
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 4px solid rgba(23, 162, 184, 0.6);
    border-radius: 50%;
    border-top-color: rgba(23, 162, 184, 0.8);
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
    left: calc(50% - 15px);
    top: calc(50% - 15px);
    position: fixed;
    z-index: 1;
}

.text-normal {
    font-size: 16px;
}

#chat-header-wrapper h3 {
    margin-bottom: 0 !important;
}

#chat-wrapper>.card-body {
    padding-left: 0;
    padding-right: 0;
}

#app-container.menu-main-hidden main {
    margin-left: 20px;
}

.video-js.side-bar-video {
    height: auto;
    min-height: 160px;
}

.modal .modal-simple-icon-close {
    right: 15px;
    top: 10px;
    z-index: 10;
}

.navbar.fixed-top {
    height: auto;
    padding: 0.5rem 0 0.5rem 0;
}

.navbar #iconMenuDropdown {
    width: 260px;
    padding: 1.5rem;
    height: 180px;
}

.navbar .icon-menu-item {
    width: 100px;
}

.menu .main-menu {
    padding-top: 0;
}

.app-menu {
    top: 60px;
    width: 320px
}

.app-row {
    padding-right: 265px;
}

.logo {
    height: 40px;
}

#session-header {
    margin-bottom: 20px;
}

#session-header form {
    display: inline;
}

#session-title {
    display: inline-block;
}

#chat-wrapper .scroll-content .list-thumbnail-letters.small {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

#chat-wrapper .scroll-content .card .card-body {
    padding-top: 10px;
    padding-bottom: 10px;
}

#scroll-users-list .user-list-item:hover {
    color: #dc3545;
    cursor: pointer;
}

#scroll-users-list .user-list-item a.member_status:hover,
#scroll-users-list .user-list-item a.member_favorite:hover,
#scroll-users-list .user-list-item span.btn-distance:hover {
    cursor: default;
}

#scroll-users-list .user-list-item .online-icon {
    display: none;
    left: 5px;
    bottom: 5px;
    width: 10px;
    height: 10px;
}

#scroll-users-list .user-list-item.offline {
    display: none;
}

#scroll-users-list .user-list-item .video-cam-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    font-weight: 300;
}

#scroll-users-list .user-list-item .video-stream-icon,
#scroll-users-list .user-list-item .video-stop-icon {
    display: none;
}

#scroll-users-list .user-list-item.online .online-icon,
#scroll-users-list .user-list-item.active .video-stream-icon {
    display: block;
}

#scroll-users-list .user-list-item.active .video-stream-icon.show,
#scroll-users-list .user-list-item.active .video-stop-icon.show {
    display: block;
}

#scroll-users-list .user-list-item.active .video-stream-icon.hide,
#scroll-users-list .user-list-item.active .video-stop-icon.hide {
    display: none;
}

#scroll-users-list .user-list-item.blocked,
#scroll-users-list .user-list-item.blocker {
    display: none !important;
}

#scroll-users-list .user-list-item.private .video-stream-icon {
    display: block;
}

#scroll-users-list .user-list-item.private .simple-icon-camrecorder {
    color: #ffc107 !important;
}

#modalRooms #accordion .scroll .ps__thumb-y.bg-primary {
    width: 10px !important;
}

.header-icon.large-icon {
    font-size: 22px;
}

.chat-message-profile-wrapper .text-normal {
    font-size: 18px;
    line-height: 20px;
}

#app-container.menu-main-hidden.menu-hidden main {
    margin-left: 5px;
}

.chat-container #session {
    display: none;
}

#userProfileModal .modal-right .modal-header {
    flex: 0 0 40px !important;
}

.app-menu .scroll .ps__thumb-y,
.chat-app .scroll .ps__thumb-y {
    width: 12px;
    /*background-color: #922c88 !important;*/
    min-height: 100px;
}

.chat-app .scroll-content .whisper {
    text-align: right;
    margin-right: 60px;
}

.chat-app .scroll-content .whisper .chat-message {
    color: #922c88 !important;
}

.ps__rail-y {
    opacity: 0.8 !important;
}

.modal-prof-image {
    width: 85px;
}

.modal-card-image {
    max-height: 300px;
    overflow: hidden;
}

.private-chat-submit-wrapper {
    right: 10px;
}

#private-chat-input-message,
#chat-input-message {
    height: 60px;
    padding-right: 100px !important;
}

#userProfileModal .modal-title {
    line-height: 16px;
}

#custom-toast-wrapper {
    position: fixed;
    z-index: 99999;
    opacity: 0;
    bottom: 90px;
    width: 260px;
    right: 15px;
    margin: auto;
    text-align: center;
}

#custom-toast-wrapper .toast-body {
    min-height: 30px;
    text-align: center;
}

#custom-toast-wrapper .toast-header {
    text-align: center;
    display: none;
}

#custom-toast-wrapper .custom-toast {
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 800px;
    margin: auto;
}

.chat-container.open #session {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    right: 0;
    bottom: 0px;
}

video {
    width: 100%;
    height: auto;
}

.chat-input-container {
    height: 60px;
}

.chat-input-container input {
    height: 50px;
}

.private-card-body .card {
    width: 290px;
}

.private-card-body.minimized .card-header,
.private-card-body.minimized .card-body,
.private-card-body.minimized .card-footer {
    display: none;
}

.private-card-body.minimized .pm-profile-pic {
    cursor: pointer;
}

.private-card-body.minimized .card {
    width: auto;
    min-width: 30px;
    margin-bottom: 40px;
}

.private-card-body.minimized .card .pm-profile-pic:hover {
    background: white !important;
}

#main-video {
    bottom: 0px;
    right: 0px;
    width: 320px;
    height: auto;
    padding: 5px;
    position: fixed;
    background: #f5f5f5;
    border: 1px solid #ccc;
    display: none;
}

#main-video p {
    position: absolute;
    display: inline-block;
    background: #f8f8f8;
    font-size: 18px;
    color: #777777;
    border-bottom-right-radius: 4px;
    width: 100%;
}

#main-video .preview-title {
    padding: 7px 5px;
}

#main-video .close {
    position: absolute;
    top: 3px;
    right: 3px;
}

#video-container p {
    display: inline-block;
    background: #f5f5f5;
    color: #777777;
    padding: 0 4px;
    z-index: 9999;
    margin: 0;
}

#video-container p.userName {
    font-weight: lighter;
    font-size: 12px;
    background: #f8f8f8;
    color: #000;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    padding: 5px;
}

#video-container span.subCount {
    position: absolute;
    right: 5px;
    display: inline-block;
}

#video-container .video-controls {
    width: 100%;
    position: absolute;
    top: 0;
    background: transparent;
    display: none;
    z-index: 99999;
    color: #fff;
}

.video-controls .control-icons {
    font-weight: bold;
    font-size: 18px;
    padding: 5px 10px;
    cursor: pointer;
    text-align: center;
    z-index: 99999;
    position: relative;
    color: #dc3545;
}

.video-controls .control-icons.camera {
    color: #dc3545;
}

.video-controls .control-icons.settings {
    color: #666;
}

.video-controls .control-icons.camera.active,
.video-controls.videoActive .control-icons.camera {
    color: #28a745 !important;
}

.video-chat-slide.audioActive .video-controls .control-icons.microphone,
.video-chat-slide.videoActive .video-controls .control-icons.camera,
.video-controls .control-icons.microphone.active {
    color: #28a745;
}

.video-controls .control-icons.camera {
    color: red;
}

.video-chat-slide .speaking-icon {
    display: none;
}

.video-chat-slide.isTalking .speaking-icon {
    display: inline;
}

.video-chat-slide .video-glide-wrapper .badge {
    font-size: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding: 4px;
    z-index: 10;
    cursor: pointer;
}

.video-chat-slide .video-glide-wrapper .badge.badge-top-left {
    bottom: -20px;
    background-color: transparent !important;
    width: 100%;
    text-align: center;
    top: 100%;
}

#chat-glide-wrapper .card-body {
    min-height: 40px;
    position: relative;
    padding: 0 !important;
}

#chat-glide-wrapper .video-controls {
    position: absolute;
    bottom: 5px;
    width: 100%;
    left: 0;
}

.video-chat-slide .video-glide-wrapper video {
    max-height: 200px;
}

.position-absolute.top-right {
    top: 0px;
    right: 1em;
}

#chat-wrapper .list-thumbnail.xsmall {
    max-width: 30px;
    width: 30px;
    height: 30px;
}

.chat-app .profile-name {
    cursor: pointer;
}

#scroll-users-list .profile-name,
#scroll-users-list .list-icon-user {
    line-height: 12px;
}

#scroll-users-list .list-icon-user {
    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 5px;
    padding-bottom: 10px;
}

#chat-wrapper .scroll-content {
    margin-bottom: 65px;
}

.scroll-content>div:last-child .separator {
    display: none;
}

#chat-wrapper .separator {
    opacity: 0.2;
}

#cam-floating-wrapper {
    position: fixed;
    width: 80%;
    height: 50%;
    top: 15px;
    right: 10%;
    left: 10%;
    z-index: 99999;
}

#cam-floating-wrapper.hide {
    display: none;
}

.app-menu {
    height: calc(100% - 60px);
}

.room-frame-wrapper {
    height: calc(100% - 90px);
}

.app-menu .app-menu-button {
    padding: 12px;
    left: -35px;
}

#cameraStreamMenu.disabled {
    color: #333 !important;
}

.app-menu.shown #app-menu-button-badge-streaming-count {
    display: none;
}

#app-menu-button-badge-streaming-count {
    position: absolute;
    left: -10px;
    top: -10px;
    padding: 7px 10px;
}

.custom-switch-small {
    height: 28px;
}

.app-menu .scroll {
    margin-right: 5px;
}

#main-wrapper {
    margin-top: 55px;
}

#chat-glide-wrapper .slider-nav {
    position: absolute;
    top: 40%;
    width: 100%;
}

#chat-glide-wrapper .slider-nav .left-arrow {
    position: absolute;
    left: -25px;
}

#chat-glide-wrapper .slider-nav .right-arrow {
    position: absolute;
    right: -25px;
}

.help-wrapper {
    top: 15px;
    left: 20px;
    width: 20%;
}

.close-whisper-session {
    left: -35px;
    bottom: 10px;
    cursor: pointer;
}

#whisper-user-element {
    left: -30px;
    top: 0px;
}

.chat-message-profile-wrapper {
    margin-top: 5px;
}

.chat-message-profile-wrapper .text-normal {
    font-size: 16px;
    line-height: 16px;
}

#userProfileModal .private-chat-content {
    height: 460px;
    padding-top: 15px;
    padding-bottom: 20px;
}

.chat-button-wrapper .pickr {
    position: absolute;
    top: 10px;
    right: -10px;
}

.chat-button-wrapper .pickr .pcr-button {
    height: 1.3em;
    width: 1.3em;
}

#chat-emoji-icons {
    top: 10px;
    right: 10px;
}

.dropdown-item .simple-icon-check {
    display: none;
}

.dropdown-item.active .simple-icon-check {
    display: block;
}

#chat-announcement-wrapper:hover {
    cursor: pointer;
    color: #f5f5f5 !important;
}

#nav-user-profile-image {
    width: 30px !important;
}

.popover,
.tooltip {
    top: -65px !important;
}

.tooltip-inner {
    max-width: 300px;
}

.dashboard-filled-line-chart {
    height: 395px;
}
#chatVisitWrapper .datetimepicker {
	/*border: none !important;*/

}
#chatVisitWrapper #cancelChatVisitRange, #chatVisitWrapper #loadChatVisitRange {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
@media (max-width: 767px) {
    #private-chat-input-message,
    #chat-input-message {
        height: 60px;
        padding-right: 90px !important;
    }
    main {
        margin-top: 100px !important;
    }
    .navbar {
        height: 70px;
    }
    .scroll-content>div {
        padding-bottom: 0 !important;
    }
    body {
        padding-bottom: 0;
        font-size: 90%;
        overflow: auto;
    }
    #openRoomListButton {
        font-size: 12px;
    }
    .logo-mobile {
        width: 60px;
    }
    .close-whisper-session {
        left: -10px;
        top: 0px;
        cursor: pointer;
    }
    #whisper-user-element {
        left: 10px;
        top: 0px;
    }
    .private-chat-wrapper-main {
        right: 15px !important;
    }
}

@media (min-width: 992px) {
    .modal-xl {
        max-width: 90%;
    }
}

@media (max-width: 1199px) {
    main {
        margin-top: 55px !important;
    }
    .app-row {
        padding-right: 0px;
    }
    .app-menu {
        width: 280px;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

.navbar-left{flex-basis:30% !important;}
.navbar-right{flex-basis:50% !important;}
.ui-dialog.ui-widget{ background: #f5f5f5; padding: 5px; border-radius: 10px; border: 1px solid #ddd;}
.ui-dialog.ui-widget .ui-dialog-buttonset button { font-size: 16px; margin-right: 4px; }

/* main chat area - chat message */
body.t-small .chat-message  {font-size: 14px; line-height: 14px;}
body.t-normal .chat-message {font-size: 16px; line-height: 16px;}
body.t-medium .chat-message {font-size: 18px; line-height: 18px;}
body.t-large .chat-message {font-size: 20px; line-height: 20px;}

/* main chat area - chat message profile name */
body.t-small .chat-message-profile-wrapper .profile-name {font-size: 14px; line-height: 14px;}
body.t-normal .chat-message-profile-wrapper .profile-name {font-size: 16px; line-height: 16px;}
body.t-medium .chat-message-profile-wrapper .profile-name {font-size: 18px; line-height: 18px;}
body.t-large .chat-message-profile-wrapper .profile-name {font-size: 20px; line-height: 20px;}

/* main chat area - chat message date */
body.t-small .timeago {font-size: .66rem; line-height: .8rem;}
body.t-normal .timeago {font-size: .76rem; line-height: .9rem;}
body.t-medium .timeago {font-size: .86rem; line-height: 1.0rem;}
body.t-large .timeago {font-size: .96rem; line-height: 1.1rem;}

/* main chat area - new chat message input */
body.t-small #chat-input-message.form-control {font-size: .8rem; line-height: 1rem;}
body.t-normal #chat-input-message.form-control {font-size: .9rem; line-height: 1.1rem;}
body.t-medium #chat-input-message.form-control {font-size: 1rem; line-height: 1.2rem;}
body.t-large #chat-input-message.form-control {font-size: 1.1rem; line-height: 1.3rem;}