/* video background */
#video_background:after {
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    background: #fff;
    left: 0;
    top: 0;
    opacity: 0.5;
    z-index: 1;
}
#video_background video {
    position: fixed;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%,-50%);
}

/* loading style */
#loading {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    z-index: 1055;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    color: chocolate;
}
.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 110;
    /* transition: all 0.5s ease-in-out;
    background: rgba(0, 0, 0, 0.5); */
    top: 0;
    left: 0;
}

/* join_videoconference style */
#join_videoconference {
    position: relative;
    z-index: 100;
    text-align: center;
    color: #000;
    width: 100%;
    padding: 1em;
}
#request_roomid > *{
	display: none;
}
#key_box, #input_roomid_box {
    border: 5px solid #fff;
    background-color: rgb(255,255,255,0.5);
    padding: 1rem 0rem;
    position: relative;
    max-width: 100%;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    width: 480px;
    margin: 1em auto;
}
#key_box img ~ *{
	display: none;
}
#key_input, #roomid_input {
    border: none;
    background: transparent;
    text-align: center;
    color: transparent;
    text-shadow: 0 0 0 #000;
    outline: none;
    font-size: 72px;
    max-width: 100%;
}
#key_box #btn_copy_key{
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0;
    text-align: center;
    background: #fff;
    border-radius: 15px;
    border: none;
}

/* videoconference style */
#videoconference{
    height: 100%;
    width: 100%;
    position: absolute;
    background: #6c757d;
    z-index: 11;
}

/* videoconference_list */
#videoconference_list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 90;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 60px 0 65px;
	flex-wrap: wrap;
    align-content: flex-end;
}
#videoconference_list .videoconference {
    position: relative;
    height: 20%;
    z-index: 11;
    padding-bottom: 10px;
    padding-right: 10px;
	overflow: hidden;
}
.video_container {
    display: flex;
    height: 100%;
    width: 100%;
    flex-grow: 1;
    position: relative;
    border: 5px solid rgba(66,66,66,0.5);
	background: #6c757d;
	overflow: hidden;
}
.bg_background_video {
    position: relative;
    height: 100%;
}
#videoconference_list .videoconference video {
    position: absolute;
    height: 100%;
    width: 100%;
	object-fit: cover;
	padding-bottom: 0;
}
#videoconference_list .name {
    font-size: 12px;
    position: absolute;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
    width: 100%;
    bottom: 0;
    text-align: center;
    padding: 0 5px;
    margin: 0;
    background: rgba(66,66,66,0.5);
    line-height: 20px;
}

/* video status */
.videoActive_false .video_container:before, .audioActive_false .video_container:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    z-index: 1000;
    /*--adjust as necessary--*/
    position: absolute;
    color: red;
}
.videoActive_false .video_container:before {
    content: "\f4e2";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.audioActive_false .video_container:after {
    content: "\f131";
    left: 5px;
    top: 5px;
}

.videoActive_false video{
    opacity: 0.001;
    z-index: 1001;
}
/* videoconference selected */
#videoconference_list .videoconference.selected {
    padding-bottom: 0px;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    margin: 0;
    background: #6c757d;
    border: none;
	padding: 0;
}
#videoconference_list .videoconference.selected .video_container{
	border: 0;
	padding:0;
	width: 100%;
}
#videoconference_list .videoconference.selected video{
	object-fit: contain;
	padding-bottom: 0;
}
#videoconference_list .videoconference.selected .name {
    bottom: 65px;
    margin: 10px;
    background: url(/images/name_bg.png) left top repeat-x;
    padding: 3px 10px;
    border-radius: 0.25rem;
    width: auto;
}

#videoconference_list .videoconference.selected .name:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: inline-block;
    content: "\f007";
    padding-right: 5px;
}
#videoconference_list .videoconference.selected.videoActive_false .video_container:before {
    font-size: 40px;
}
#videoconference_list .videoconference.selected.audioActive_false .video_container:after {
    bottom: 75px;
    font-size: 20px;
    top: auto;
    left: 50%;
    transform: translateX(-12px);
}

/* navbar top and bottom */
#nav_top {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(255,255,255,0.001));
}
.navbar {
    z-index: 100;
    padding: .5rem 0;
}
.navbar .container {
    max-width: none;
    padding-left: 10px;
    padding-right: 10px;
}
.navbar-brand {
    font-size: 1.05rem;
    margin-bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.navbar a {
    color: #fff;
    margin-right: 10px;
    text-decoration: none;
}
.navbar button span,
.navbar a span{
    display: inline-block;
}
.navbar a i {
    display: inline-block;
    width: 30px;
    line-height: 30px;
    background: #444444;
    text-align: center;
    border-radius: 15px;
    margin-right: 5px;
}
#nav_bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: url(/images/nav_bar_bottom_bg.png) left top;
}
#nav_bottom .navbar-nav{
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: row !important;
}
#nav_bottom .navbar-nav button {
    width: 100px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    margin: 0 10px;
    outline: none;
    position: relative;
}
#nav_bottom .navbar-nav button:disabled {
    color: #aaa !important;
}
#nav_bottom .navbar-nav button i {
    font-size: 18px;
}
i.fas.fa-slash {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-55%, 0);
}
#btn_comment.exclamation:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    width: 18px;
    margin-left: 12px;
    color: #fff;
    font-size: 10px;
    background: #f00;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    content: "\f12a";
}
/* clock */
#clock {
    color: #fff;
    padding: 4px 10px;
    border: 1px solid #696969;
    border-radius: 0.25rem;
    background: url(/images/clock_bg.png) left top;
    display: inline-block;
}
#clock span {
    padding: 0 3px;
}


/* memo box */
#bussiness_memo {
    position: absolute;
    z-index: 100;
    left: 10px;
    top: 0;
    height: 100%;
    padding: 60px 0 70px;
    width: 300px;
    max-width: 100%;
    display: none;
}
#memo_box {
    height: 100%;
    position: relative;
    overflow: hidden;
    max-height: 300px;
}
.card {
    background: #424242;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.card .card-body {
    padding: 40px 0 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #535353;
}
.card .card-header {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding: 0.5rem;
    position: absolute;
    width: 100%;
}
.card .card-header i.fas {
    padding-right: 5px;
}
#memo_form {
    height: 100%;
    padding: 7px 7px 5px;
    display: flex;
    flex-direction: column;
}
#memo_content {
    resize: none;
    padding: 0.25rem;
    flex-grow: 1;
}
#memo_box .card .card-header span {
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 0px;
    cursor: pointer;
}
label.note_label {
    color: #fff;
    margin: 5px 0 0;
    display: flex;
    font-size: 11px;
}
#memo_flash_message{
    display: none;
    color: orange;
    margin-left: auto;
}
/* chatbox style */
#chatbox,
#stamp {
    width: 300px;
	height: 100%;
    position: fixed;
    top: 0;
    right: -305px;
    z-index: 130;
    color: #fff;
    transition: all 0.3s;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    padding: 60px 0 75px;
}
#chatbox .card,
#stamp .card{
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    position: relative;
    z-index: 120;
}
#chatbox.active,
#stamp.active {
    right: 0;
}
#chatbox .flex-list,
#stamp .flex-list {
    height: 100%;
    overflow: auto;
    padding: 0 0 0.5rem;
    margin: 0;
    position: relative;
}
#stamp .flex-list{
	padding: 0.5rem;
}
#chat-form {
    margin: 0 0.5rem;
    border-top: 2px solid #808080;
    padding: 0.5rem 0 1rem;
    position: relative;
}
/* message item */
#messages .message {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #eee;
    white-space: pre-line;
    color: #555;
    display: inline-block;
    max-width: 100%;
    text-align: left;
    border: 1px solid #a9aaaa;
    word-break: break-word;
}
#messages .message_container {
    text-align: left;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
}
#messages .message_container.self {
    text-align: right;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#messages .message_container.self .message {
    background-color: #2d83ac;
    color: #fff;
}

#messages .date_separate::before {
    content: attr(data-before);
    color: #e9e9e9;
    display: block;
    text-align: center;
    padding: 5px 0;
    border-top: 2px solid #808080;
    border-bottom: 2px solid #808080;
    background: #424242;
    margin: 10px 0;
	width: 100%;
    font-size: 12px;
}
#messages .message_container.date_separate:first-child::before {
    margin-top: 0;
}
#messages .message_user {
    font-size: 11px;
    margin-bottom: 5px;
    background: none;
    color: #e9e9e9;
    width: 100%;
    padding: 0 10px;
}
#messages .message_body {
    margin-bottom: .5rem;
    max-width: 222px;
    position: relative;
    padding: 0 10px;
}
#messages .message_body i.fa.fa-times {
    position: absolute;
    left: -5px;
    font-size: 10px;
    top: 50%;
    margin-top: -5px;
    cursor: pointer;
    display: none;
    color: #e9e9e9;
    opacity: 0.5;
}
#messages .message_container:hover i.fa.fa-times{
    display: block;
}
/* chatbox form */
#chat-form textarea{
    resize: none;
    overflow: hidden;
    padding: 5px;
    line-height: 16px;
    font-size: 13px;
    width: 100%;
    border-radius: .25rem;
    outline: none;
}

#attachment_upload {
    margin: 0;
    padding: 0;
    display: flex;
}
#attachment_upload li {
    list-style: none;
    position: relative;
    overflow: hidden;
    padding: 5px 5px 0;
    color: #fff;
}
#attachment_upload input[type=file] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.0001;
    width: 100%;
}
#sendMessage .input-group-append {
    margin-left: auto;
}
#sendMessage .input-group-append button{
    border-radius: 0.25rem;
    background: #999999;
    outline: none;
    border: none;
    margin-top: 5px;
}
#attachment_preview .attachment:last-child {
    margin-bottom: 5px;
}
#attachment_preview .attachment {
    margin-right: 0;
    margin-bottom: 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select,
    textarea,
    input {
        font-size: 16px;
    }
}
/* chatbox attachments style */
.attachments {
    max-width: 100%;
    background-color: rgba(0,0,0,0.1);
    margin: 0px 1px;
    display: flex;
    flex-wrap: wrap;
	flex-direction: row;
}
.attachments .attachment {
    position: relative;
    border: 1px solid #aaa;
    border-radius: 3px;
    margin: 5px;
    font-family: 'Font Awesome 5 Free';
    overflow: hidden;
}
.attachment button.close {
    position: absolute;
    right: 1px;
    top: 1px;
    font-size: 1em;
    width: 16px;
    height: 16px;
    border: 1px solid #eee;
    border-radius: 16px;
    background: rgba(0,0,0,0.75);
    color: #fff;
}
.attachment.image {
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fff;
}
.attachment.image img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.001;
}
.attachment.file {
    max-width: 100%;
    padding: 10px 5px;
    background: #fff;
    color: #333;
    width: 105px;
    height: 50px;
}
.attachment.file:before {
    content: "\f15c";
    font-size: 24px;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
}
.attachment.file p {
    margin: 0;
    padding-left: 30px;
    padding-right: 10px;
    line-height: 15px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}
.attachment_extension {
    font-weight: bold;
    text-transform: uppercase;
}
.attachment_originalName {
    font-size: 0.9em;
}
.message + .attachments {
    margin-top: 0.5rem;
}

#messages .attachments .attachment.image {
    width: 90px;
    height: 90px;
	background-color: #eee;
}
#messages .attachments .attachment{

}
#messages .attachment.file {
    width: 100%;
}
#messages .attachment_container {
    margin-top: 5px;
}
#messages .message + .attachment_container {
    margin-top: 10px;
}

/* recording status */
#record_status {
    position: absolute;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -10px;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    text-shadow: 0px 0px 3px #fff;
    display: none;

}
/* end_videoconference */
#end_videoconference, #expired_videoconference, #room_inuse{
    position: relative;
    z-index: 100;
    text-align: center;
    padding: 1rem;
}
#end_videoconference > *{
    font-weight: bold;
}

/* config modal */
/* MO-199 */
/*
.modal-dialog-centered {
    margin: 0.5rem;
}
*/
/* MO-199 */
#sample_video {
    width: 100%;
    max-height: 280px;
}
#setting_modal input, #setting_modal select {
    width: 100%;
}
#sample_video_container {
    margin-bottom: 1rem;
}
#setting_modal .form-group {
    margin: 0 15px 1px;
}
#setting_modal .form-group.row {
    margin-bottom: 1px;
}
#setting_modal .form-group-container.row {
    background: #878787;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
}
/* invite modal */
input#invite_url {
    width: 100%;
    background: none;
    border: 0;
    outline: none;
    color: #fff;
    text-align: center;
}
#invite_modal .modal-footer{
    justify-content: center;
}
/* modal style */
.modal-backdrop{
    opacity: 0 !important;
}
.modal-content {
    background-color: #535353;
    border: none;
    border-radius: .25rem;
    color: #fff;
    box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
}
.modal-header {
    background: url(/images/moda_title_bg.png) left top repeat-x;
    color: #fff;
    width: 100%;
    padding: 13px 0 14px;
    border-bottom: 1px solid #424242;
    border-radius: 0.25rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.modal-title {
    width: 100%;
    text-align: center;
    display: block;
}
.modal-title i {
    padding-right: 10px;
}
.modal-header .close {
    position: absolute;
    right: 0.8em;
    top: 0.8em;
    color: #424242;
    text-shadow: none;
    padding: 0;
    margin: 0;
    background: #fff;
    display: block;
    width: 20px;
    border-radius: 3px;
    text-align: center;
    line-height: 20px;
    opacity: 1;
}
.modal-header .close span {
    display: block;
}
.modal-footer {
    border: none;
    padding-top: 0;
}
/* MO-199 */
/*
@media (min-width: 576px){
    .modal-dialog {
        margin: 2.75rem auto;
    }
}
*/
/* MO-199 */
/* common */
.hidden {
    display: none;
}
.blink {
    animation: blinker 1s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}
@keyframes blinker {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* scroll style */

.custom_scrollbar::-webkit-scrollbar {
    width: 5px;
}

.custom_scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.custom_scrollbar::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
.top-left{
    width: 35%;
    flex-wrap: nowrap;
    display: flex;
    align-items: center;
	
}

/* MO-267*/
button.close_connection {
	position: absolute;
	z-index: 1002;
	right: 16px;
	bottom: 38px;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	cursor: pointer;
	opacity: 0.5;
	font-size: 16px;
	display: block;
	width: 18px;
	height: 16px;
	outline: none;
	line-height: 16px;
}
button.close_connection:hover{
	background: #fff;
}
#videoconference_list .videoconference.selected button.close_connection{
	bottom: 80px;
}
#videoconference_list.layout_grid .videoconference button.close_connection{
	bottom: 38px;
}
@media (max-width: 768px){
    #nav_top .container{
        flex-wrap: wrap;
    }
    .top-left {
        width: 100%;
    }
}
/* media device style */
@media (max-width: 960px){
	
	#videoconference_list {
		padding: 50px 0 40px;
	}
    .navbar button span, .navbar a span{
        display: none;
    }
    #videoconference_list .videoconference.selected.audioActive_false .video_container:after{
        bottom: 50px;
    }
    .top-left {
        width: 40%;
    }
    .navbar a{
        margin-right: 5px;
    }
    #chatbox,
	#stamp{
        padding: 45px 0;
    }
    #videoconference_list .videoconference.selected .name{
        bottom: 41px;
    }
	
	#videoconference_list .videoconference.selected button.close_connection{
		bottom: 55px;
	}
    #video_background:after, #video_background video {
        display: none;
    }
    #video_background {
        background-image: url(/images/bg_connect_page.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
}
@media (max-width: 480px){
    .top-left {
        width: auto;
    }
    .navbar-brand{
        display: none;
    }
    .navbar-nav {
        margin-left: auto;
    }
	#key_input, #roomid_input {
		font-size: 62px;
	}
}
@media only screen and (max-width: 640px) and (orientation: landscape) {
	/* css rules */
	#chatbox,
	#stamp{
		padding: 5px 0;
	}
}

@media (min-width: 640px){
	#spec_info_modal .modal-dialog {
		max-width: 600px;
	}
}
#specinfobox {
    background-color: #fff;
    text-align: left;
    margin: auto;
    padding: 20px;
    font-size: 14px;
    height: auto;
    color: #333;
}
#specinfobox h2{
    font-size: 28px;
    padding: 10px;
    background-color: black;
    color: white;
}
 #specinfobox h3{
    font-size: 18px;
    padding: 10px 0;
    font-weight: bold;
}
 #specinfobox h4{
    font-size: 14px;
    padding: 10px;
    background-color: gray;
    color: white;
}
 .importantnotes{
    color: red;
     padding: 5px;
}
 .infobox{
    margin: 10px 0;
}
 .spectabletitle{
    overflow-wrap: break-word;
     width: 100px;
     padding: 10px;
     font-weight: normal;
     max-width: 100px;
     height: 43px;
}
 .spectablecontent{
    overflow-wrap: break-word;
     width: 213px;
     padding: 10px;
     font-weight: normal;
     max-width: 213px;
     height: 43px;
}
 .simple_square_btn7 {
    display: block;
    position: relative;
    width: 160px;
    padding: 0.8em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background:black;
    margin: auto;
}
 .simple_square_btn7:hover {
    cursor: pointer;
    text-decoration: none;
    color:white;
    background:gray;
}
button.pictureinpicture{
    display: none;
}
@media (min-width: 1025px){
    button.pictureinpicture {
        position: absolute;
        right: 17px;
        top: 4px;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        z-index: 100;
        color: #fff;
        display: block;
		font-size: 12px;
		outline: none;
    }
    #videoconference_list .videoconference.selected button.pictureinpicture{
        display: none;
    }
    #videoconference_list .videoconference video{
        text-indent: -1000px;
    }
}
/* MO#116 */
@media (min-width: 992px){
	#pre_setting_modal .modal-dialog,
    .modal-size-big .modal-dialog{
		max-width: 888px;
	}
}
#pre_setting_modal .modal-content{
	background-image: linear-gradient(to bottom, #ff9999, #ff4d4d);
	padding: 0 1rem 1rem;
    border-radius: 10px;
    border: 1px solid #fff;
}
#pre_setting_modal .modal-header{
	background: none;
    border: none;
}
#pre_setting_modal .modal-body{
	background: #fff;
	border-radius: 10px;
	color: #333;
	padding: 1rem;
}
#preview_video_container {
    background: #0f1216;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1rem;
	position: relative;
	padding-bottom: 75%;
}
#preview_video {
    width: 100%;
    display: block;
    margin: 0 auto;
    position: absolute;
    height: 100%;
}
.title-bold{
	font-size: 24px;
    font-weight: bold;
    font-style: italic;
}
.red {
    color: #ff0000;
    font-weight: bold;
}
.internet_test_note {
    margin: 10px 0;
    padding: 10px 0;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 14px;
	margin-bottom: 1rem;
}
.label_center_bg label{
	text-align: center !important;
    background: #eeeeee;
	display: block;
}
#pre_setting_cameras {
    background: url(/images/cam_icon.jpg) 5px center no-repeat;
    border: navajowhite;
    padding-left: 25px;
}
#pre_setting_microphones {
    background: url(/images/mic_icon.jpg) 5px center no-repeat;
    border: navajowhite;
    padding-left: 25px;
}
#internet_speed {
    background: none;
    border: none;
}

#preview_video_control {
    position: absolute;
    width: 100%;
    bottom: 1rem;
    left: 0;
    display: flex;
    justify-content: center;
}
#preview_video_control button {
    margin: 0 0.5rem;
    width: 50px;
    height: 50px;
    display: block;
    border: none;
    background: none;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
	outline: none;
	transition: all 1s;
}
#preview_video_control button.off{
	background-color: #299c86;
}
.bg_gradient_1,
.btn-primary.bg_gradient_1{
	background: #ff4d4d;
    border: 1px solid #ff4d4d;
}
.bg_gradient_1:hover,
.btn-primary.bg_gradient_1:hover{
	background-color: #ff9899;
    border-color: #ff9899;
}


/* MO-133 */
#hide_stream_btn{
    border: none;
    background: rgba(0,0,0,0.1);
    width: 30px;
    height: 30px;
    color: #fff;
    margin-left: 5px;
    margin-right: 0;
    text-align: center;
}
#hide_stream_btn i {
    border-radius: 0;
}
#videoconference.hide_nav .videoconference:not(.selected),
#videoconference.hide_nav #nav_top .top-left,
#videoconference.hide_nav #nav_top .top-right > *:not(#hide_stream_btn),
#videoconference.hide_nav #nav_bottom,
#videoconference.hide_nav .videoconference.selected .name,
#videoconference.hide_nav #subscriber_btn
{
	visibility: hidden;
}
#videoconference.hide_nav #nav_top{
	background: none !important;
}

@media (max-width: 360px){
    .navbar a {
        margin-right: 0;
    }
}
.top-right{
    display: flex;
    align-items: center;
}
a#reload_btn i {
    border-radius: 0;
    background-color: orange;
    margin: 0;
}
#subscriber_btn {
    color: #fff;
    padding: 4px 10px;
    border: 1px solid #696969;
    background: #696969;
    display: block;
    margin: 0 10px;
    width: 140px;
    text-align: left;
    z-index: 12;
	cursor: pointer;
}
#subscriber_btn i.fas.fa-caret-down {
    float: right;
    padding-top: 5px;
}
#subscriber_list {
    z-index: 12;
    margin: 0px 10px;
    width: 140px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
	position: relative;
}
#subscriber_list ul {
    overflow: auto;
    margin: 0;
    padding: 0;
    background: #696969;
    color: #fff;
    display: none;
    width: 100%;
    max-height: 100%;
    border: 0;
	position: absolute;
}
#subscriber_list ul li {
    padding: 4px 10px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	text-align: center;
}
@media (max-width: 960px){
		
	#subscriber_list {
		padding-bottom: 65px;
	}
}
@media (max-width: 480px){
	.top-right{
		margin-left: auto;
	}
}
/* MO-189 */
#videoconference_list.layout_grid {
	flex-direction: row;
    flex-wrap: wrap;
    padding: 48px 0 62px;
}
#videoconference_list.layout_grid #subscriber_btn {
    position: absolute;
    right: 0;
    top: 3rem;
}
#videoconference_list.layout_grid #subscriber_list {
    position: absolute;
    right: 0;
    top: 5rem;
}
#videoconference_list.layout_grid #subscriber_list ul{
    position: relative;
}
#videoconference_list.layout_grid .videoconference {
    position: relative !important;
    margin: 0;
    padding: 0;
    flex-grow: 1;
    height: 100%;
	width: 100%;
    border: 1px solid transparent;
	overflow: hidden;
}
#videoconference_list.layout_grid .video_container{
	border: none;
}
#videoconference_list.layout_grid .videoconference video{
	object-fit: cover;
	padding-bottom: 0px;
}
#videoconference_list.layout_grid .videoconference .name {
    width: 100% !important;
    position: absolute !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: rgba(66,66,66,0.5) !important;
}
#videoconference_list.layout_grid .videoconference .name:before{
	font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: inline-block;
    content: "\f007";
    padding-right: 5px;
}
#videoconference_list.layout_grid .videoconference.videoActive_false .video_container:before{
	font-size: 40px;
}
#videoconference_list.layout_grid .audioActive_false .video_container:after {
    content: "\f131";
    left: 5px !important;
    top: 5px!important;
    font-size: inherit !important;
    transform: translateX(0px) !important;
    bottom: auto !important;
}
#videoconference_list.layout_grid button.pictureinpicture{
	display: none;
}

#videoconference_list.layout_grid.layout_1 .videoconference{
	width: 100% !important;
	height: 100% !important;
}
#videoconference_list.layout_grid.layout_2 .videoconference{
	width: 50% !important;
	height: 100% !important;
}
#videoconference_list.layout_grid.layout_3 .videoconference{
	width: 33.33% !important;
	height: 100% !important;
}
#videoconference_list.layout_grid.layout_4 .videoconference{
	width: 50% !important;
	height: 50% !important;
}
#videoconference_list.layout_grid.layout_5 .videoconference,
#videoconference_list.layout_grid.layout_6 .videoconference{
	width: 33.33% !important;
	height: 50% !important;
}
#videoconference_list.layout_grid.layout_7 .videoconference,
#videoconference_list.layout_grid.layout_8 .videoconference{
	width: 25% !important;
	height: 50% !important;
}
#videoconference_list.layout_grid.layout_9 .videoconference,
#videoconference_list.layout_grid.layout_10 .videoconference{
	width: 20% !important;
	height: 50% !important;
}
@media only screen and (max-width: 960px) and (orientation: portrait) {
	#videoconference_list.layout_grid{
		flex-direction: column;
		flex-wrap: wrap;
	}
	
	#videoconference_list.layout_grid.layout_1 .videoconference{
		width: 100%;
		height: 100%;
	}
	#videoconference_list.layout_grid.layout_2 .videoconference{
		width: 100%;
		height: 50%;
	}
	#videoconference_list.layout_grid.layout_3 .videoconference{
		width: 100%;
		height: 33.33%;
	}
	#videoconference_list.layout_grid.layout_4{
		flex-direction: row;
	}
	#videoconference_list.layout_grid.layout_4 .videoconference{
		width: 50%;
		height: 50%;
	}
	#videoconference_list.layout_grid.layout_5 .videoconference,
	#videoconference_list.layout_grid.layout_6 .videoconference{
		width: 50%;
		height: 33.33%;
	}
	#videoconference_list.layout_grid.layout_7 .videoconference,
	#videoconference_list.layout_grid.layout_8 .videoconference{
		width: 50% !important;
		height: 25% !important;
	}
	#videoconference_list.layout_grid.layout_9 .videoconference,
	#videoconference_list.layout_grid.layout_10 .videoconference{
		width: 50%;
		height: 20%;
	}
	
}
/* has screenshare */
.hide_nav #videoconference_list.has_screenshare {
    margin: 0;
}
#videoconference_list.has_screenshare {
    flex-direction: row;
    justify-content: center;
    padding: 0;
    margin: 48px 0 63px;
    height: auto;
    bottom: 0;
	flex-wrap: nowrap;
}

#videoconference_list.has_screenshare .videoconference {
	position: relative;
	height: 100px;
	background: #6c757d;
	z-index: 11;
	margin: 0 10px 10px;
	border-bottom: 20px solid #424242;
}
#videoconference_list.has_screenshare .videoconference.selected .name {
    top: 5px;
    bottom: auto;
    right: 10px;
    left: auto;
    margin: 0;
}
#videoconference_list.has_screenshare .videoconference.selected.audioActive_false:after {
    left: 10px;
    top: 10px;
    bottom: auto;
    transform: translateX(0px);
}
#videoconference_list.has_screenshare .videoconference {
    height: 12%;
    margin: 0;
    box-sizing: border-box;
	border:0;
	padding: 0;
}
#videoconference_list.has_screenshare .video_container{
	border: 0;
}
#videoconference_list.has_screenshare .videoconference.selected {
    width: 100%;
    height: 88%;
    margin: 0;
    position: absolute;
    border: 0;
}
#videoconference_list.has_screenshare .name {
    bottom: 0;
	background: rgba(66,66,66,0.5);
}
.hide_nav #videoconference_list.has_screenshare .videoconference.selected {
    height: 100%;
}
#videoconference_list.has_screenshare .videoconference video {
    padding: 0;
}
.hide_nav #videoconference_list.layout_grid{
	padding: 0;
}
.hide_nav #videoconference_list.layout_grid .videoconference,
.hide_nav #videoconference_list.layout_grid .videoconference .name{
    visibility: visible !important;
}

@media only screen and (max-width: 960px) and (orientation: landscape) {
	#videoconference_list.has_screenshare .videoconference.selected{
		height: 80%;
	}
	#videoconference_list.has_screenshare .videoconference{
		height: 20%;
	}
	#stamp {
		width: 600px;
		right: -605px;
	}
	#stamp-container {
		flex-wrap: wrap-reverse;
	}
	#stamp_list, #stamp-form-container{
		width: 50%;
	}
	#stamp-form-container{
		margin-top: auto;
	}
}
@media only screen and (max-width: 960px) and (orientation: portrait) {
	#videoconference_list.has_screenshare {
		margin: 48px 0 40px;
		flex-wrap: wrap;
		align-content: flex-end;
		flex-direction: row;
		justify-content: flex-start;
	}
	#videoconference_list.has_screenshare .videoconference{
		width: 20%;
		height: 12%;
		margin: 0;
	}
	
	#videoconference_list.has_screenshare .videoconference.selected {
		height: 88%;
		position: absolute;
		z-index: 1;
	}
}


@media (max-width: 960px){	
	#videoconference_list.layout_grid {
		padding: 48px 0 40px;
	}
	#videoconference_list.has_screenshare {
		margin: 48px 0 40px;
	}
	.hide_nav #videoconference_list.layout_grid{
		padding: 0;
	}
}
.webinar #videoconference_list .videoconference:not(.selected) {
    width: 150px;
    height: 110px;
}


/* MO-196 */
.stamp_category {
    display: flex;
    flex-direction: row;
    display: none;
    flex-wrap: wrap;
}
.stamp_category.active {
    display: flex;
}
.stamp_item {
    width: 33.3%;
    padding: 5px;
	text-align: center;
}
.stamp_item img{
	width: 100%;
	height: auto;
	cursor: pointer;
}
.stamp_item .image{
	width: 100%;
    padding-bottom: 75%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 5px;
	cursor: pointer;
}
#stamp_category_btn, #stamp_control, #stamp_position {
    margin: 0;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#stamp_category_btn {
    padding: 0;
    margin: 10px;
    border-bottom: 1px solid rgba(208,208,208,0.5);
}
#stamp_category_btn li {
    list-style: none;
	width: 33%;
    text-align: center;
	padding: 5px 0;
    margin: 0 1px;
	cursor: pointer;
    color: #fff;
	cursor: pointer;
}
#stamp_category_btn li img {
    padding-right: 5px;
    height: 25px;
}
#stamp_category_btn li.active, #stamp_category_btn li:hover {
    background: #878787;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
#stamp_control label, #stamp_position label {
    margin: 0;
    padding: 0;
}
#stamp-form {
    background: #505050;
}
.btn-style {
    border-radius: 5px;
    background-color: #2a7fa6;
    border: 0;
    color: #fff;
    line-height: 35px;
    cursor: pointer;
	padding: 0 10px !important;
}
#stamp_control .btn-style {
    width: 48%;
    text-align: center;
}
#stamp_position input {
    vertical-align: middle;
    margin-right: 5px;
}
.stamp_upload{
	visibility: hidden;
}
.videoconference .stamp_image {
    position: absolute;
    left: 50%;
    top: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	padding-bottom: 20px;
	z-index: 1005;
	cursor: pointer;
}
.videoconference.selected .stamp_image,
.layout_grid .stamp_image{
	max-width: 50%;
	max-height: 50%;
}
.videoconference.selected .stamp_image.top_left,
.layout_grid .stamp_image.top_left{
    left: 25%;
    top: 25%;
	padding-bottom: 0;
}
.videoconference.selected .stamp_image.top_right,
.layout_grid .stamp_image.top_right{
    left: 75%;
    top: 25%;
	padding-bottom: 0;
}
.videoconference.selected .stamp_image.bottom_left,
.layout_grid .stamp_image.bottom_left{
    left: 25%;
    top: 75%;
	padding-bottom: 0;
}
.videoconference.selected .stamp_image.bottom_right,
.layout_grid .stamp_image.bottom_right{
    left: 75%;
    top: 75%;
	padding-bottom: 0;
}
/* MO-199 */

#join_videoconference.showTab {
	flex-grow: 1;
    margin: 4em 0;
    padding: 0 1em;
    flex-direction: column;
    max-width: 100%;
    width: 640px;
}
#connect_type {
    border: 3px solid #fff;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    padding: 3rem 1em;
	flex: 1;
	display: flex;
	background: rgb(255,255,255,0.5);
}
.join_videoconference_tab {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#request_roomid{
	align-self: center;
}
#request_roomid.loadded{
	align-self: auto;
}
#join_videoconference_button {
    list-style: none;
    display: flex;
    width: 100%;
    padding: 0 1em;
	margin: 0;
}
#join_videoconference_button li {
    display: block;
	width: 50%;
    border: 1px solid #ccc;
    margin: 0 0.5rem;
    border-bottom: 0;
    background: #eee;
    box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5);
	cursor: pointer;
    line-height: 1.5em;
	padding: 0.5em 0;
	color:#333;
	display: flex;
    align-items: center;
}
#join_videoconference_button li span{
	flex: 1;
}
#join_videoconference_button li.active {
    background: #4a86e8;
    color: #fff;
}
#btn_input_roomid {
    display: block;
    border-radius: 2em;
    margin: 1em auto;
    padding: 0.5em 2em;
    border: 0;
	background: #4a86e8;
    color: #fff;
	cursor: pointer;
}
#btn_input_roomid:disabled,
#btn_input_roomid[disabled]{
	background: #ccc;
    color: #333;
}

#response_request_video_meeting_modal .modal-content{
	margin: auto auto 65px;
}
@media (max-width: 960px){
	#response_request_video_meeting_modal .modal-content{
		margin-bottom: 42px;
	}
	#join_videoconference {
		margin: 2em 0;
	}
	#connect_type{
		padding: 2em 1em;
	}
}

/* RM#214 */
.col-3.video-background-item {
    padding: 5px;
    text-align: center;
}
.background_video_image_contain {
    width: 100%;
    position: relative;
    padding-bottom: 75%;
    cursor: pointer;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #fff;
}
.background_video_image_contain + .delete_bg_btn{
    margin-top: 5px;
}
.background_video_image_contain.selected{
	border-color: #38c172;
}
.col-3.video-background-item img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    visibility: hidden;
}
.add_new_bg_input {
    margin: 10px 0 0;
    float: right;
}
.align-items-center{
	align-items: center;
}
#background_video_list{
	align-items: flex-start !important;
	padding: 5px;
    min-height: 44px;
}
#pre_background_video_list {
    padding: 0;
    margin: 0;
    border: 1px solid #d9d9d9;
}
#radio_video_effect_setting_group label {
    margin: 0;
}
#radio_video_effect_setting_group input{
	width: auto;
	margin-right: 5px;
}
#radio_video_effect_setting_group {
    display: flex;
    padding: 0;
}
#pre_background_video_section {
    clear: both;
    overflow: hidden;
    margin-bottom: 1rem;
}
@media (max-width: 640px){	
	.blur_setting_section{
		display: none !important;
	}
}
#video_setting_tab {
    display: none;
}
#device_setting_tab {
    max-width: 100%;
    flex: 1;
}
#setting_modal .show_video_setting_tab.modal-dialog{
	max-width: 768px;
}
#setting_modal .show_video_setting_tab #sample_video_container {
    margin-bottom: 0rem;
}
.show_video_setting_tab #video_setting_tab {
	display: block;
}
.button_translate_message {
    cursor: pointer;
    font-size: 11px;
	display: none;
}
#chatbox.can_translate .button_translate_message{
	display: block;
}
.icon_translate {
    padding: 2px;
    width: 30px;
}
/* MO-229 */
#record_message {
    z-index: 100;
    position: absolute;
    width: 640px;
    color: #fff;
    padding: 10px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 65px;
    font-size: 11px;
    max-width: 100%;
	display: none;
}
#record_message_content {
    background: rgb(0 0 0 / 50%);
    padding: 10px;
}
/* media device style */
@media (max-width: 960px){
	#record_message {
		bottom: 41px;
	}
}

/* ami voice */
#stream-transcribe {
    position: absolute;
    z-index: 101;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
#stream-transcribe-control {
    position: absolute;
    z-index: 100;
    right: 10px;
}
#stream-transcribe-result {
    color: #fff;
    background: rgba(0,0,0,0.25);
    word-break: break-all;
	padding: 0 10px;
}
#stream-transcribe,
#stream-transcribe-control {
	bottom: 75px;
}
#stream-transcribe-message{
	position: absolute;
    z-index: 100;
    color: #fff;
    max-width: 180px;
    overflow: hidden;
    height: 100%;
    left: 0;
    top: 0;
    padding-top: 50px;
	
}
#stream-transcribe, 
#stream-transcribe-message{
	display: none;
}
.stream-transcribe-message-item {
    padding: 5px 10px;
    background: rgba(0,0,0,0.25);
    margin-top: 5px;
	float: left;
	clear: both;
}
.recognitionResultText,
.stream-transcribe-message-item:nth-child(10) ~ .stream-transcribe-message-item{
	display: none;
}
#stream-transcribe-error,
.recognitionResultInfo{
	display: none;
}
#stream-transcribe-lastest{
	background: rgba(0,0,0,0.5);
    color: #fff;
}
@media (max-width: 960px){
	#stream-transcribe,
	#stream-transcribe-control {
		bottom: 51px;
	}
}
@media (min-width: 960px){
	#stream-transcribe-lastest{
		font-size: 24px;
	}
}
/* MO-239 hide ami_voice_display_option */
/* show again subtitle option
#ami_voice_display_option{
	display:none !important;
}
*/

/* MEC count down timer */
#count_down_timer {
    position: absolute;
    z-index: 100;
    left: 10px;
    bottom: 110px;
    width: 300px;
    max-width: 100%;
	display: none;
}
@media (max-width: 960px){
	#count_down_timer {
		bottom: 80px;
	}
}
#count_down_timer .card .card-header span {
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 0px;
    cursor: pointer;
}

#count_down_timer_container {
    position: relative;
    overflow: hidden;
    max-height: 100%;
}
#count_down_timer_container .card-body{
}
#count_down_timer_control {
    color: #fff;
    display: flex;
    justify-content: space-around;
    padding-top: 1rem;
}
#count_down_timer_control button {
    border: none;
    width: 32px;
    border-radius: 5px;
    color: #363636;
    cursor: pointer;
}
#count_down_timer_display {
    font-size: 55px;
    text-align: center;
    line-height: 55px;
    color: #fff;
    padding: 1rem 0;
}
#count_down_timer_input{
	text-align: right;
}

.flash-me {
  color:#D85D5D !important;
  -webkit-animation: flash linear 1s infinite;
  animation: flash linear 1s infinite;
}

@-webkit-keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}
@keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}

#pre_setting_connect_btn:disabled{
	background-image: url(/images/loading.gif);
    background-position: center center;
    background-size: 30px 30px;
    background-repeat: no-repeat;
}
input#panelist_invite_url {
    width: 100%;
    background: none;
    border: 0;
    outline: none;
    color: #fff;
    text-align: center;
}
#player {
    width: 100%;
    height: 100%;
	padding-bottom: 65px;
}
/* media device style */
@media (max-width: 960px){
	#player {
		width: 100%;
		height: 100%;
		padding-bottom: 41px;
	}
}
#videoconference_list.has_screenshare .videoconference #player {
    padding: 0;
}
.hide_nav iframe#player {
    padding: 0;
}

#panelist_wait_response {
	display: none;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,25%);
    z-index: 1000;
}
#panelist_wait_response_modal{
    background: #fff;
    border: 2px solid #d9d9d9;
    padding: 3rem 1rem;
    text-align: center;
	width: 90%;
}
#panelist_close_btn{
	display: none;
	padding: 0.5rem 2rem;
    background: gray;
    color: #fff;
}



/* panelist */
@media (min-width: 768px){
	#panelist_invite_setting_modal .modal-dialog {
		max-width: 640px;
	}
}
#panelist_invite_setting_modal .modal-header {
    background: no-repeat;
}
#panelist_invite_setting_modal .modal-title {
    text-align: left;
    padding: 0 1rem;
}
.panelist_item_label {
    text-align: left;
}
button.btn.btn-blue {
    width: 100%;
    display: block;
    background: #58AAFF;
    border-radius: 5px !important;
    color: #fff;
    margin: 0;
}
#panelist_invite_modal{
	z-index: 1051;
}