.disabled{
    opacity: .6;
    pointer-events: none;
}
.disabled-media{
    opacity: .4;
    pointer-events: none !important;
}
.transcript-txt{

}

/*
phone number input
*/
:root {
	--PhoneInput-color--focus: #03b2cb;
	--PhoneInputInternationalIconPhone-opacity: 0.8;
	--PhoneInputInternationalIconGlobe-opacity: 0.65;
	--PhoneInputCountrySelect-marginRight: 0.35em;
	--PhoneInputCountrySelectArrow-width: 0.3em;
	--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
	--PhoneInputCountrySelectArrow-borderWidth: 1px;
	--PhoneInputCountrySelectArrow-opacity: 0.45;
	--PhoneInputCountrySelectArrow-color: inherit;
	--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountrySelectArrow-transform: rotate(45deg);
	--PhoneInputCountryFlag-aspectRatio: 1.5;
	--PhoneInputCountryFlag-height: 1em;
	--PhoneInputCountryFlag-borderWidth: 1px;
	--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
	--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
}
.custom-popup{
    width: 100%;
    top: 0px;
    left: 0px;
    height: 100%;
    z-index: 99999;
    background: rgb(0 0 0 / 43%);
    text-align: center;
    position: fixed;
    display: none;
}
.shaded{
    background: #efefef;
}
.custom-popup ul{
    margin-top: 15px;
    margin-bottom: 15px;
}
.custom-popup ul li{
    line-height: 18px !important;
    /* margin-bottom: 8px; */
    
    padding: 7px;
}
.imp{
    color: #ff7267 !important;
}
.custom-popup iframe{
    width: 100%;
    height: 300px;
    border: none;
}
.custom-popup .btn{
    padding: 3px 9px 4px 7px;
    border: none;
    background: #3e55a1;
    color: #fff;
    font-size: 14px;
}
.helpimg{
    width: 100%;
    height: 150px;
    object-fit: contain;
    margin-top: 10px;
}
.custom-popup .redbg{
    background: #ff7267 !important;
}
.custon-popup-msg{
    min-height: 76px;
}
.popup-body{
    width: 500px;
    margin: 0 auto;
    min-height: 150px;
    background: #fff;
    border-radius: 3px;
    margin-top: 50px;
    padding: 20px;
    text-align: left;
}
.icon .fa-phone.voice, .icon .fa-phone.rotate-img{
    display: none;
}
.settings-parent{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgb(43 43 43);
    z-index: 999999999;
    top: 0px;
}
.noborder{
    border: none !important;
}
.margin-right-5{
    margin-right: 5px;
}
.add-opt-delete{
    padding: 4px;
    font-size: 9px;
}
.settings-content{
    width: 538px;
    background: #272727;
    /* padding: 10px; */
    margin: 0 auto;
    margin-top: 50px;
    padding: 25px 25px 3px;
    box-shadow: 0px 6px 6px #00000012;
    border-radius: 10px;
    background-color: #1e1f20;
    color: #fff;
}
.urlshareparent{
    width: 100%;
    height: 36px;
    margin-bottom: 27px;
}
#youtube-share{
    width: 100% !important;
    height: 100% !important;
}
.youtubeshare{
    float: left;
    width: calc(100% - 130px);
    height: 100%;
    border: 1px solid #dbdbdb;
    color: #606060;
}
.errorinp{
    border: 1px solid #ff2a2a !important;
}
.youtubesharebtn{
    float: left;
    width: 130px;
    height: 100%;
    background: #606060;
    /* border-left: none; */
    border: none;
    color: #fff;
    margin-left: -3px;
    cursor: pointer;
}
.lesson-card{
    width: 150px;
    height: 170px;
    background: #fff;
    margin: 10px;
    float: left;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 5px 6px #e7e7e7;
    -moz-box-shadow: 0 0 5px 6px #e7e7e7;
    box-shadow: 0 0 5px 6px #e7e7e7;

}
.lesson-card:hover{
    opacity: .6;
}
.card-info{
    padding: 0px 0px 0px 11px;
    color: #a5a5a5;
    font-size: 11px;
    font-weight: 500;
}
.interactive-video{
    width: 100%;
    height: 100%;
    background: #202020;
    position: relative;
}
.quest-slider{
    position: absolute;
    left: 100px;
    width: 2px;
    height: calc(100% - 60px);
    background: #ccc;
    top: 15px;
}
.qseekbuble{
    background-color: #4a4444 !important;
    border: 5px solid #c5c5c5 !important;
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
    font-weight: normal;
    color: #454545;
    z-index: 2;
    width: 6px;
    height: 6px;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
    float: left;
    margin-top: 5px;
    margin-right: 10px;
}
.add-q-option-par{
    width: 200px;
    position: absolute;
    left: -50px;
}
.time-inp-adq{
    float: left;
    width: 40px;
    padding: 3px;
    height: 25px;
    font-size: 12px;
    border: #bbb 1px solid;
    color: #626262;
    border-radius: 5px;
    margin-right: 5px;
}
.intract-bg{
    background: #fff;
    height: 510px;
    margin: 13px;
    padding: 5px;
}
.add-opbtn{
    float: left;
    background: transparent;
    border: 1px solid #3273dc;
    border-radius: 3px;
    padding: 4px;
    font-size: 11px;
    color: #3273dc;
    font-weight: 600;
    cursor: pointer;
}
.int-save-btn{
    background:#3273dc;
    border-radius: 3px;
    padding: 4px;
    font-size: 11px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #3273dc;
}
.int-cancel-btn{
    background: transparent;
    border: 1px solid #3273dc;
    border-radius: 3px;
    padding: 4px;
    font-size: 11px;
    color: #3273dc;
    font-weight: 600;
    cursor: pointer;
    margin-right: 5px;
}
.quest-slider-wrap{
    width: 260px;
    float: left;
    background: #fff;
    height: 436px;
    margin-top: 7px;
    /* margin-bottom: 15px; */
    margin-left: 10px;
    /* border: 1px dashed #efecec; */
    position: relative;
}
.int-savebtnwrap{
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    height: 35px;
    border-top: 1px solid #e5e4e4;
    padding-top: 10px;
}
.player-head{
    margin-left: 20px;
    margin-top: 10px;
    font-size: 13px;
    color: #747272;
    font-weight: 600;
}
.int-pop-head{
    padding: 10px;
    color: #323232;
    font-size: 13px;
    border: 1px solid #e3e3e3;
}
.int-nav{
    margin: 10px;
}
.loader-intvid{
    position: absolute;
    width: 100%;
    height: calc(100% + 45px);
    background: rgb(0 0 0 / 15%);
    z-index: 9999;
    top: 0px;
    text-align: center;
}
.loader-intvid img{
    width: 80px !important;
    height: 80px !important;
    margin-top: 145px;
    opacity: .6;
}
.individual-question-par div{
    padding: 2px;
    float: left;
    padding-left: 10px;
    font-size: 12px;
    color: #747474;
    padding-right: 10px;
    border: 1px solid #e5e3e3;
    border-radius: 3px;
    margin-left: 10px;
}
.individual-question-par{
    width: 100%;
    margin-left: 40px;
    float: left;
    margin-top: 13px;
}
.individual-question-par input{
    width: 12px;
    height: 22px;
    float: left;
}
.quiz-indicator{
    width: 5px;
    height: 100%;
    background: yellow;
    position: absolute;
    left: 100px;
}
#sharedVideo{
    width: 100%;
    height: 100%;
}
.bgwt{
    background: #fff !important;
}
.index9{
    z-index: 9;
}
.qright-btn{
    margin-right: 2px;
    cursor: default !important;
    border: none;
}
.quiz-indicator-right{
    width: 12px;
    height: 6px;
    background: rgb(244 67 54 / 82%);
    /* position: absolute; */
    margin-right: 10px;
    border-radius: 3px;
    float: left;
    margin-top: 8px;
}
.nocursr{
    pointer-events: none;
}
.int-nav button{
    background: transparent;
    border: none;
    color: #a5a5a5;
    margin-left: 35px;
    padding-left: 0px;
    padding-right: 0px;
    cursor: pointer;
}
.int-nav .active{
    border-bottom: 2px solid #3273dc;
    color: #3273dc !important;
}
.int-pop-wrap{
    width: 50%;
    height: 300px;
    background: #fff;
    border-radius: 3px;
    left: 25%;
    top: 150px;
    position: absolute;
}
.int-pop-overlay{
    position: fixed;
    top: 0px;
    width: 100%;
    left: 0px;
    height: 100%;
    background: rgb(6 6 6 / 50%);
    z-index: 999999;
}
.seek-bar{
    width: 100%;
    height: 8px;
    background-color: #808080;
    position: relative;
    cursor: pointer;
}
.seak-bubble{
    background-color: #bbc6c7 !important;
    border: 3px solid #ffffff !important;
    border-radius: 50%;
    padding: 5px;
    top: -4px;
    cursor: pointer;
    font-weight: normal;
    color: #454545;
    position: absolute;
    z-index: 2;
    width: 6px;
    height: 6px;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none;
    left: 0%;
}
.video-control img{
    width: 16px;
    margin-left: 18px;
    margin-top: 9px;
    cursor: pointer;
}
.vol-btn{
    width: 21px !important;
}
.fullscrn-btn{
    float: right;
    margin-right: 9px;
}
.video-view{
    width: 100%;
    height: 400px;
    background: rgb(110 110 110 / 30%);
    position: relative;
}
.intrvideo-wrap{
    width: calc(100% - 300px);
    margin-top: 8px;
    margin-left: 20px;
    position: relative;
    float: left;
}
.play-overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgb(0 0 0 / 36%);
    top: 0px;
    z-index: 99;
    text-align: center;
}
.play-overlay img{
    width: 90px !important;
    top: calc(50% - 70px);
    cursor: pointer;
    position: absolute;
    left: calc(50% - 50px);
}
.seak-thumb{
    background: #f44336;
    height: 100%;
    position: absolute;
    left: 0px;
    width: 0%;
}
.video-control{
    width: 100%;
    height: 46px;
    background: #000;
    position: relative;
}
.marg-left-10{
    margin-left: 10px;
}
.lesson-card img{
    width: 100%;
    height: 88px;
    object-fit: cover;
}
.card-title{
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    /* background: red; */
    color: #4a4a4a;
    display:  block !important;
    /* margin-bottom: 14px;*/
}
.settings-parent select{
    width: 100%;
    padding: 3px;
    border-radius: 3px;
    border: 1px solid #fff;
    background: #2a2a2a !important;
    color: #fff;
    margin-bottom: 4px;
}
.log-settings{
    position: fixed;
    left: 10px;
    top: 10px;
    height: 30px;
    opacity: .6;
}
.cont-btn{
    padding: 9px;
    border: 1px solid #7098fd;
    background: transparent;
    color: #fff;
    width: 123px;
    border-radius: 5px;
    display: inherit;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 18px;
    cursor: pointer;
}
#preview{
    width: 100%;
    height: 130px;
    object-fit: contain;
    margin-top: 10px;
    background: rgb(30 31 32);
    margin-bottom: 10px;
}
#waveform{
    margin-bottom: 10px;
    background: #292929;
    width: 100%;
}
.pop-parent .fa-phone{
    display: none !important;
}
.audividlab{
    font-size: 16px;
    margin-bottom: 5px;
}
.PhoneInput {
	/* This is done to stretch the contents of this component. */
	display: flex;
	align-items: center;
}
.load-more{
    background: none;
    border: 1px solid #3f55a1;
    padding: 5px;
    color: #565d78;
    border-radius: 5px;
    margin: 0 auto;
    width: 100px;
    position: absolute;
    bottom: 81px;
    width: 100px;
    left: calc(50% - 50px);
    font-size: 12px;
    cursor: pointer;
}
.chathd{
    width: 100%;
}
.loaderapp{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
}
.chathd span{
    float: right;
    font-size: 11px;
    line-height: 13px;
    margin-right: 5px;
    margin-top: 3px;
}
.setting-cam-mic-btn-wrap{
    left: calc(50% - 33px);
    width: 68px;
    /* text-align: center; */
    position: absolute;
    margin-top: -55px;
}
.setting-cam-mic-btn-wrap img{
    height: 14px !important;
}
.camwarn{
    font-size: 12px !important;
    line-height: 14px !important;
    padding-bottom: 8px !important;
    color: #ff9191 !important;
}
.setting-cam-mic-btn-wrap a{
    padding: 7px 7px 4px 7px !important;
    border-radius: 50%;
}
.chathd input{
    float: right;
    margin-top: 3px;
}
.parti-menu input{
    width: 15px;
    height: 15px;
    margin-left: 5px;
}
.PhoneInputInput {
	/* The phone number input stretches to fill all empty space */
	flex: 1;
	/* The phone number input should shrink
	   to make room for the extension input */
	min-width: 0;
    padding: 5px;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    font-size: 16px;
}

.PhoneInputCountryIcon {
	width: calc(1em * 1.5);
	width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
	height: 1em;
	height: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--square {
	width: 1em;
	width: var(--PhoneInputCountryFlag-height);
}
.red-stat{
    background: #f34040;
    color: #fff;
    padding: 0px 6px 0px 6px;
    border-radius: 5px;
    text-align: center;
    font-size: 10px;
    width: 60px;
}
.green-stat{
    background: #259c42;
    color: #fff;
    padding: 0px 6px 0px 6px;
    border-radius: 5px;
    text-align: center;
    font-size: 10px;
    width: 60px;
}
.PhoneInputCountryIcon--border {
	/* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
	background-color: rgba(0,0,0,0.1);
	background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
	/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
	box-shadow: 0 0 0 1px rgba(0,0,0,0.5),
		inset 0 0 0 1px rgba(0,0,0,0.5);
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
	/* Fixes weird vertical space above the flag icon. */
	/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
	display: block;
	/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
	width: 100%;
	height: 100%;
}

.PhoneInputInternationalIconPhone {
	opacity: 0.8;
	opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
	opacity: 0.65;
	opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */

.PhoneInputCountry {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	margin-right: 0.35em;
	margin-right: var(--PhoneInputCountrySelect-marginRight);
}

.PhoneInputCountrySelect {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.PhoneInputCountrySelect[disabled] {
	cursor: default;
}

.PhoneInputCountrySelectArrow {
	display: block;
	content: '';
	width: 0.3em;
	width: var(--PhoneInputCountrySelectArrow-width);
	height: 0.3em;
	height: var(--PhoneInputCountrySelectArrow-width);
	margin-left: 0.35em;
	margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
	border-style: solid;
	border-color: inherit;
	border-color: var(--PhoneInputCountrySelectArrow-color);
	border-top-width: 0;
	border-bottom-width: 1px;
	border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	border-left-width: 0;
	border-right-width: 1px;
	border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	-webkit-transform: rotate(45deg);
	-webkit-transform: var(--PhoneInputCountrySelectArrow-transform);
	        transform: rotate(45deg);
	        transform: var(--PhoneInputCountrySelectArrow-transform);
	opacity: 0.45;
	opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
	opacity: 1;
	color: #03b2cb;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
	box-shadow: 0 0 0 1px #03b2cb,
		inset 0 0 0 1px #03b2cb;
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
	opacity: 1;
	color: #03b2cb;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}
/**
* phone number input end
*/

#caption{
    width: 80%;
    margin: 0 auto;
    font-size: 26px;
    color: #fff;
    margin-top: 20px;
}
#captionbot{
    width: 100%;
    font-size: 14px;
    color: #fff;
}
.option_btn{
    background: #000;
}
#bot{
    width: 100%;
    font-size: 14px;
    color: #000;
    /* width: 100%;
    margin: 0 auto;
    font-size: 15px;
    color: #fff;
    margin-top: 20px;
    position: absolute;
    bottom: 80px;
    height: 40px;
    text-align: center; */
}
.inp-color{
    border: none;
    background: #ebebeb;
    cursor: pointer;
}
.header-rec{
    background: #131415 !important;
    color: #fff;
    font-family: -webkit-pictograph;
    padding: 14px;
    /* box-shadow: 5px -6px 8px 16px #2a2a2a; */
}
.header-rec .logotxt{
    font-size: 23px;
    line-height: 40px;
    margin-left: 10px;
    color: #fff !important;
}
.msg-container .chat-area{
    margin-bottom: 55px;
    margin-top: 10px;
}
.margin-left-5{
    margin-left: -5px !important;
}
.bg-white{
    background: #fff;
}
.rec-inp{
    background: #fff;
    position: fixed;
    bottom: 17px;
    z-index: 9999;
    height: 40px;
    width: calc(100% - 20px);
    padding: 10px;
    border: 1px solid #dedede;
    margin: 10px;
    border-radius: 20px;
    color: #484646
}
.marg-left-15{
    margin-left: 15px !important;
}
.rec-wrap{
    margin: 0px;
    background: #232323;
    width: 100%;
    height: 100vh;
    /* position: absolute; */
    overflow: hidden;
}
.content-rec{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.79) 100%);
    width: 100%;
    height: 100%;
}
.logo-wrap{
    float: left;
}
.rec-btn{
    width: 100px;
    margin: 0 auto;
    margin-top: 70px;
    cursor: pointer;
}
.rec-btn img{
    width: 100px;
}
/*
 *  STYLE 3
 */

 #transcript-txt::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     background-color: #F5F5F5;
 }
 
 #transcript-txt::-webkit-scrollbar
 {
     width: 6px;
     background-color: #3857b2;
 }
 
 #transcript-txt::-webkit-scrollbar-thumb
 {
     background-color: #3857b2;
 }
.transcript-parent{
    width: 100%;
    height: 60px;
    /*
    background: #131415;
    opacity: .5;
    */
    margin-top: -66px;
    
    padding-bottom: 10px;
    /* bottom: 44px; */
    color: #fff;
}
.opacity0{
    opacity: 0;
}
.rectext{
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #d62e2e !important;
}
.sp-icn{
    font-size: 20px !important;
}
.recnot{
    position: fixed !important;
    /* top: 32px; */
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    right: 20px;
    width: auto !important;
    z-index: 9999999999;
    display: inline !important;
    opacity: .7;
    bottom: -2px;
    height: auto !important;
}
.recnot i{
    margin-right: 1px;
    color: #d62e2e !important;
    line-height: 34px;
    font-size: 15px !important;
}
.transcript-parent p{
    text-align: center;
    color: #fff;
    font-size: 15px;
    /* padding: 10px; */
    /* margin-bottom: 10px; */
    overflow-y: auto;
    height: 55px;
    line-height: 18px;
}
.call-cont .call-detail .nav li a {
    padding: 18px 19px !important;
}
.user-list .place-top {
    height: 46px !important;
}
.pro-start-test-wrap{
    width: 60%;
    margin: 0 auto;
    margin-top: 50px;
}
.pro-video-aria{
    width: 160px;
    height: 240px;
    float: left;
    border-radius: 10px;
}
.pro-start-btn-wrap{
    width: 100%;
    text-align: center;
    padding: 50px;
}
.pro-start-btn-wrap button{
    padding: 10px;
    background: #fff;
    border: 1px solid #d6d6d6;
    width: 106px;
    color: #3f3f3f;
    font-weight: 600;
    cursor: pointer;
}
.pro-start-test-wrap ul li{
    padding: 8px;
    margin: 0px;
    line-height: 18px;
}
.pro-start-test-wrap h6{
    padding: 10px;
}
.pro-cam-video{
    width: 100%;
    height: 120px;
    border-radius: 10px;
    background: transparent !important;
    object-fit: cover !important;
}
.pro-name{
    width: 200px !important;
}
.proc-middle-area{
    width: calc(100% - 336px);
    position: absolute;
    height: 100%;
    right: 0px;
}
.pro-screen-video{
    width: 100%;
    height: 120px;
    border-radius: 10px;
    background: transparent !important;
    object-fit: cover !important;
}
.pro-screen-video-examinor{
    width: 100%;
    height: calc(100% - 55px);
    background: transparent !important;
    object-fit: contain !important;
    position: absolute;
    z-index: 99;
}
.pro-cam-video-examinor{
    width: 320px;
    height: 240px;
    border-radius: 10px;
    background: transparent !important;
    object-fit: cover !important;
    position: absolute;
    right: 10px;
    bottom: 70px;
    z-index: 999;
}
.pro-cam-video-examinor-offline{
    border-radius: 0px !important;
    width: 100% !important;
    height: 100% !important;
    position: initial !important;
}
.pro-userlisthead{
    padding: 1px 0px 12px 13px !important;
}
.test-timer-wrap{
    width: 220px;
    padding: 5px;
    margin: 0 auto;
}
.message-pop{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 44%);
    z-index: 99999999999;
}
.message-pop textarea{
   width: 100%;
   height: 100%;
   border: none;
   border-radius: 10px;
}
.msg-inp{
    width: 350px;
    height: 100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    margin-top: 150px;
    padding: 10px;
}
.view-exxm-cls{
    float: right !important;
    position: relative !important;
    margin-right: -24px !important;
}
.exm-cls{
    position: absolute;
    margin-top: -34px;
    width: 25px;
    height: 25px;
    border: none;
    background: #fff;
    border-radius: 20px;
    z-index: 99999999999;
    cursor: pointer;
}
.pro-starttest{
    padding: 5px;
    margin-top: 7px;
    background: #cfd5e7;
    color: #3f55a1;
    text-align: center;
    width: 100px;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 600;
    font-size: 14px;
    float: left;
}
.pro-timer{
    padding: 0px;
    margin-top: 7px;
    color: #cfd5e7;
    text-align: center;
    width: 100px;
    font-weight: 600;
    font-size: 21px;
    float: left;
}
.pro-test-instruction{
    float: left;
    width: calc(100% - 160px);
    height: 100%;
    color: #3f3f3f !important;
}
.toolwidth-plist .pullright{
    margin-right: -180px;
}
.option_btn img{
    height: 19px;
    margin-top: 7px;
}
.msg .text{
    text-align: left !important;
}
.inpeditname{
    padding-left: 12px !important;
}
.edit-name{
    background: transparent;
    border: 1px solid #e8e8e8;
    padding: 5px;
    font-size: 10px;
    cursor: pointer;
    font-weight: 600;
    color: #545454;
}
.__react_component_tooltip{
z-index: 99999999 !important; 
}
.host{
    background: #ef8484 !important;
    color: #fff !important;
}
.audio-meter{
    height: 3px;
}

.linkinput{
    width: 100%;
    padding: 6px;
    border: 1px solid #f9f9f9;
    background: #fdfdfd;
}
#contenvideo{
    position: fixed;
    right: 0px;
    bottom: 56px;
    height: 50px;
    width: 50px;
    z-index: 999;
    opacity: 0;
}
.host-pres{
    padding: 5px !important;
    background: #f6f7ff;
    border-bottom: 1px solid #ccc;
}
.call-cont .call-detail .tab-content .user li p span {
    width: 36px !important;
    min-width: 36px !important;
}
.viewers{
    padding: 5px !important;
    background: #f6f7ff;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.presenter{
    background: #687bb5 !important;
    color: #fff !important;
}
.tool-left{
    position: absolute;
    left: 5px;
    margin-top: 10px;
}
.screen-layout .video-wraper{
     width: 100% !important;
     height: 150px !important;
     position: relative !important;
}
.tool-right{
    position: absolute;
    left: 37px;
    margin-top: 10px;
}
.particon i{
    padding: 5px !important;
}
.audio-indicator{
    width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    top: 0px;
}
.window-height{
    height: 100vh !important;
}
.height20{
    height: 5px !important;
}
a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}
.type-dark{
    background: #353738 !important;
    color: #fff !important;
    height: 37px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 17px !important;
    opacity: 1 !important;
}
.place-top::after {
    border-top-color: #353738 !important;
    border-left: 11px solid transparent !important;
    border-right: 11px solid transparent !important;
    bottom: -11px !important;
    left: 50%;
    margin-left: -8px !important;
    border-top-style: solid;
    border-top-width: 12px !important;
    opacity: 1 !important;
}
.leftopn .screen-video{
    left: 337px !important;
    width: calc(100% - 490px) !important;
}
.convbtn{
    color: #000 !important;
    margin-left: 5px;
}
.modalshow{
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    padding: 50px !important;
    background: #00000047 !important;
}
.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-50px);transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{-webkit-transform:none;transform:none}.modal-dialog-scrollable{display:-ms-flexbox;display:flex;max-height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 1rem);overflow:hidden}.modal-dialog-scrollable .modal-footer,.modal-dialog-scrollable .modal-header{-ms-flex-negative:0;flex-shrink:0}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:calc(100% - 1rem)}.modal-dialog-centered::before{display:block;height:calc(100vh - 1rem);content:""}.modal-dialog-centered.modal-dialog-scrollable{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;height:100%}.modal-dialog-centered.modal-dialog-scrollable .modal-content{max-height:none}.modal-dialog-centered.modal-dialog-scrollable::before{content:none}.modal-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;padding:1rem 1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:.3rem;border-top-right-radius:.3rem}.modal-header .close{padding:1rem 1rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}.modal-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding:1rem;border-top:1px solid #dee2e6;border-bottom-right-radius:.3rem;border-bottom-left-radius:.3rem}.modal-footer>:not(:first-child){margin-left:.25rem}.modal-footer>:not(:last-child){margin-right:.25rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-scrollable{max-height:calc(100% - 3.5rem)}.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-dialog-centered::before{height:calc(100vh - 3.5rem)}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{max-width:800px}}@media (min-width:1200px){.modal-xl{max-width:1140px}}
button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}
.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.dialog{
    position: absolute;
    top: 0px;
    width:100%;
    height:100%;
    background: rgb(0 0 0 / 40%);
    z-index: 9999;
}
.width100{
    width:100%;
}
.height100{
    height: 100%;
}
.padding-20{
    padding: 20px !important;
}
.tool-pa{
    margin-left: 11px !important;
}
.progress-bar{
    height: 13px;
    background: #54c754;
    text-align: right;
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    padding-right: 4px;
    margin-top: 10px;
    border-radius: 5px;
}
video{
    background: #1d1d1d;
    object-fit: contain;
}
#remote-video-screen{
    display: none;
}
.scren-enabled{
    object-fit: cover !important;
}
.margin0{
    margin: 0px;
}
.not-started{
    min-height: 100% !important;
    background: #000 !important;
}
#local-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#remote-video-local-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mob-content .hide-desk {
    display: none;
}
.lang-drop{
    margin-right: 20px;
    height: 35px;
    border: none;
    border-radius: 7px;
    background: #ff7267;
    color: #fff;
    cursor: pointer;
}
#local-video-wrap{
    width: 150px;
    height: 100px;
    position: absolute;
    z-index: 99;
    right: 0px;
    bottom: 0px;
    /*box-shadow: 0 0 5px 2px #1f1f1f;*/
}
.no-scroll{
    overflow: hidden !important;
}

#local-video-wrap video{
   object-fit: cover;
}
#local-video-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    opacity: .8;
}
.audio_rec_view{
    z-index: 999;
}
.blackbg{
    background: rgb(33 33 35);
}
.remote-video{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    z-index: 9;
    object-fit: cover !important;
}
.video-inner{
    width:100%;
    height: 100%;
}
.video-parent{
    position: absolute;
    width: 100% !important;
    bottom: 83px;
    top: 0px;
    height: unset !important;
}
.cust-aud-view{
    z-index: 999;
    background: transparent !important;
    height: 50px !important;
}
.cust-aud-view{
    display: block !important;
}
.parent-callvid:hover .cust-aud-view{
    display: block !important;
}
.red{
    color: #db736b !important;
}
.green{
    color: #78cc74 !important;
}
.off .fa{
    color: #fff !important;
    font-size: 16px !important;
}
.crosebutn{
    position: absolute;
    right: 10px;
}
.on .fa{
    color: #fff !important;
    font-size: 16px !important;
}
.on{
    background: #78cc74 !important;
}
.off{
    background: none !important;
    border: 1px solid #fff !important;
    
}
.screen-not{
    width: 226px;
    text-align: center;
    opacity: 6;
    color: #fff;
    z-index: 9999;
    position: absolute;
    top: 30px;
    font-size: 12px;
    background: rgb(0 0 0 / 8%);
}
.rec-btn i{
    font-size: 65px !important;
    color: #fff;
}
.video-1{
    width: 100%;
    height: 100%;
    float: left;
}

.video-2{
    width: 50%;
    height: 100%;
    float: left;
}


.video-3{
    width:50%;
    height:50%;
    margin-top: 0px;
    float: left;

}
.contain{
    object-fit: contain !important;
}
#remote-video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.video-wraper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    opacity: .8;
}
.local-screen-video{
    width: 100%;
    background: transparent !important;
}
.nodrop::after{
    display: none !important;
}
.video-4{
    width:50%;
    height:50%;
    float: left;
}
.width-hight-50{
    width:50% !important;
    height:50% !important;
    object-fit: cover !important;
}
.pop-parent{
    position: fixed;
    z-index: 999999999999;
    background: rgb(0 0 0 / 28%);
    width: 100%;
}
.pop{
    width: 50%;
    margin: 0 auto;
    margin-top: 100px;
}
.halffull{
    width: 100% !important;
    margin: 0px !important;
}
.offlinecall{
    color: #ccc !important;
}
input:focus, textarea:focus, select:focus{
    outline: none !important;
}
.secure-wrap{
    display: block !important;
    top: 0px;
    position: fixed;
    width: 100%;
}
.encrypt-txt{
    background: rgb(255 255 182);
    color: #292626;
    font-size: 10px;
    font-weight: 500;
    padding: 2px;
    width: 378px;
    margin: 0 auto;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.encrypt-txt .fa{
    font-size: 13px !important;
    line-height: 18px;
    margin-right: 4px;
}
.audio_content .empty-head-icon i{
    font-size: 35px !important;
}
.black{
    background: rgb(33 33 35) !important;
}
.call-icon-wrp{
    display: none;
}
.chat-user-wrap{
    z-index: 10 !important;
}
.mobile{
    display: none;
}
.video-name{
    position: absolute;
    color: #ffffff;
    font-size: 16px;
    width: 100%;
    text-align: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 35%) 100%);
}


.screen-video{
    width: calc(100% - 150px) !important;
    z-index: 99 !important;
    position: fixed !important;
    left: 0px;
    /* height: 100% !important; */
    top: 0px;
    bottom: 82px;
}
.screen-video video{
    object-fit: contain !important;
}
.screen-layout{
    position: absolute !important;
    right: 0px !important;
    width: 150px !important;
    height: auto !important;
    top: 0px;
    bottom: 0px;
    border-left: 3px solid #212123;
    z-index: 999;
    background: #212123;
    overflow-y: auto;
}

.screen-layout .video-wraper{
    width: 100%;
    height: 100px;
}
.botton35{
    margin-bottom: 20px !important;
    border: none !important;
}
.newchat-backdrop{
    background: rgb(0 0 0 / 28%);
}
.newmeeting{
    margin-right: 11px !important;
    width: 200px !important;
}
.conference_icon{
    position: fixed;
    bottom: 17px;
    width: 100%;
}
.ulrec{
    height: 300px;
    overflow-y: auto;
}
.not-started{
    width: 100% !important;
    height: 80px !important;
    position: absolute !important;
    background: #ccc;
    text-align: center;
    z-index: 9999999;
}
.media-loader{
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    background: rgb(0 0 0 / 18%) !important;
    text-align: center;
    z-index: 9999999;
}
.media-loader h1{
    margin-top: 100px;
    color: #828282;
    font-weight: 500;
    font-size: 24px;
}
.not-started h1{
    margin-top: 41px;
    color: #a7a7a7;
    font-size: 23px;
}
.participat-list-on{
    width: calc(100% - 300px) !important;
}
.screen-video video{
    width: 100% !important;
    height: 100% !important;

}

.left-pannel{
    width: 320px;
    float: left;
    margin-right: 18px;
    height: 100%;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    height: 56px !important;
}
.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}
.nav-link {
    display: block;
    padding: .5rem 1rem;
}
.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}
#call-open{
    height: calc(100vh - 57px);
}

.plist-height{
    height: calc(100vh - 50px) !important;
}
.toolwidth-plist{
    width: calc(100% - 320px) !important;
}
.encrypttxt-width-plist{
    width: 378px !important;
}
.option_btn{
    min-width: 48px !important;
    min-height: 48px !important;
    padding-top: 6px !important;
    border: 1px solid #d0d0d0;
}
.option_btn .fa{
    font-size: 20px;
}
.left-tools{
    text-align: left;
    width: 190px !important;
    z-index: 999;
}
.left-tools a{
    text-align: center;
}
.h32{
    height: 32px !important;
}
.btn-part{
    padding: 3px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #3d55a1;
}
.width50{
    width: 45%;
    font-size: 12px !important;
    /* padding: 5px !important; */
    margin-right: 12px !important;
    float: left;
}
.btn-part .fa{
    font-size: 14px !important;
    line-height: 24px;
    margin-right: 5px;
}
.pointer{
    cursor: pointer;
}
.left-count{
    position: absolute;
    background: RoyalBlue;
    margin-top: -18px;
    /* z-index: -1; */
    padding: 8px;
    /* margin-left: -15px; */
    height: 20px;
    border-radius: 20px;
    padding-top: 2px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    font-size: 11px !important;
}

.whiteboard{
    background: #fff;
    position: absolute;
    left: 0px;
    right: 150px;
    z-index: 9;
    height: 100%;
}
.upload-wraper{
    text-align: center;
}
.upload-wraper button{
    padding: 30px;
    color: #fff;
    background: #3d55a1;
    border: none;
    border-radius: 100%;
    cursor: pointer;
}
.doc-list{
    width: calc(100% - 40px);
    padding: 0px;
    margin: 0px;
    overflow-y: auto;
    height: 120px;
}
.doc-list li{
    display: block;
    padding-top: 9px;
    margin: 4px;
    line-height: 16px;
    border-bottom: 1px solid #ccc;
    height: 40px;
    width: 100%;
    cursor: pointer;
}
.doc-page-wrap{
        text-align: center;
        height: 100%;
        margin: 0 auto;
}
.current-page{
    width: 34px;
    height: 32px;
    background: #484848;
    color: #fff;
    text-align: center;
    font-size: 18px;
    position: absolute;
    right: 46px;
    top: 0px;
    font-weight: bold;
}
.doc-tool{
    position: absolute;
    bottom: 86px;
    width: 150px;
    text-align: center;
    z-index: 999;
    right: 150px;
}
.doc-tool button{
    padding: 7px;
    color: #e49690;
    background: #fff;
    cursor: pointer;
    border-radius: 5px;
    width: 45px;
    border: 1px solid #eaeaea;
    margin: 5px;
}
.doc-tool button:hover{
    background: #eaeaea;
}
.close-doc{
    width: 37px;
    height: 32px;
    color: #fff;
    /* padding: 5px; */
    background: #e49690;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    right: 150px;
    top: 0px;
    font-weight: bold;
    font-family: system-ui;
    z-index: 9999;
}
.doc-page-wrap img{
    height: 100% !important;
    width: auto !important;
}
.literally{
    background: transparent !important;
}
.transp{
    background: transparent !important;
}
.file-upload-input{
    position: absolute;
    width: 100px;
    height: 100px;
    margin-left: -31px;
    margin-top: -32px;
    z-index: 99999999;
    cursor: pointer;
    opacity: .01;
    display: block !important;
}
.doc-name{
    width: 80%;
    float: left;
    color: #585858;
    font-weight: 500;
    font-size: 15px;
}
.doc-tools{
    float: left;
    width: 20%;
}
.upload-wraper button .fa{
    font-size: 30px !important;
}
.wbinactive{
    pointer-events: none !important;
}
.wbinactive .tools{
    opacity: .4;
}
.whiteboard .tools {
    height: calc(100% - 36px);
    background: #F4F4F4;
    position: absolute;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.whiteboard .tools a {
    opacity: .5;
    cursor: pointer;
}
.whiteboard .tools a, .whiteboard .tools .palette {
    margin: 20px 0;
}
.whiteboard .tools i {
    color: var(--pri-color);
}
.literally{
    position: absolute;
    z-index: 9;
    background: #ccc;
    width: 100%;
    height: 100%;
}
.mar-r-20 {
    margin-right: 20px;
}
.literally canvas {
    position: absolute;
    top: 0px;
    left: 0px;
  }
.tools{
    width: 67px;
    left: 0px;
    background: #fff !important;
    /* border-right: 1px solid #f1f1f1; */
    height: 100%;
    padding-top: 60px;
}
.tools i{
    color: #000 !important;
    font-size: 12px !important;
}
.showboard{
    opacity: 1;
}
.hideboard{
    opacity: 0;
}
.margin-bottom-5{
    margin-bottom: 10px !important;
}
.tools .active{
    background: #db736b !important;
    color: #fff !important;
}
.colorinactive{
    opacity: .6;
}
.coloractive{
    opacity: 1;
    border: 2px solid #ccc !important;
}
.tools .active .fa{
    color: #fff !important;
}
.tools button .fa{
    color: #000;
}
.tools button{
    width: 25px !important;
    height:25px !important;
    background: transparent;
    border: 1px solid #db736b;
    border-radius: 30px;
    margin: 2px;
    border:none;
    cursor: pointer;
    padding-top: 3px !important;
    text-align: center;
}
.wb-wrap{
    position: absolute;
    z-index: 99999999;
    width: 100%;
    height: 100%;
}
.show{
    display: block !important;
}
.parti-menu {
    box-shadow: 0px 6px 9px 7px #0a10251a;
    display: block;
    z-index: 999999;
}
.justify-content-between {
    -ms-flex-pack: justify!important;
    justify-content: space-between!important;
}
.invite-ic .fa{
    font-size: 22px !important;
}
.video-wraper{
    border: 0px solid #272727;
    box-shadow: 0 0 4px 1px #171717;
}
.user-list{
    height: calc(100% - 133px);
    overflow-y: auto;
}
.call-cont .call-detail{
    z-index: 999 !important;
    position: fixed !important;
}
.audio_view{
    bottom: 0px;
    position: absolute;
    height: 82px !important;
    opacity: 1 !important;
    display: block !important;
    width: 100%;
    background: #131415 !important;
    border-bottom: 5px solid #212123
}
.video-poster{
    opacity: 1 !important;
    background: rgb(30 31 32) !important;
    width: 100%;
    height: 100%;
}
.vdo-user-avatar-blk{
    position: absolute;
    top: 0px !important;
    color: white;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-end;
    height: 100%;
    transition: transform .2s ease;
    background: rgba(0, 0, 0, 0);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.7) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(25%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.7)));
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.79) 100%);
    background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.79) 100%);
    background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.79) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.79) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
}
#local-video-wrap .vdo-user-avatar{
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 12px !important;
}
.screen-layout .vdo-user-avatar{
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    font-size: 12px !important;
}

#local-video-wrap .video-name{
    display: none;
}
.vdo-user-avatar{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    width: 100px !important;
    max-width: 100px;
    height: 100px !important;
    min-height: 100px;
    max-height: 100px;
    border-radius: 50%;
    background-color: #3857b2 !important;
    color: #fff !important;
    font-size: 42px !important;
}
.sml-logo{
    position: absolute;
    margin-left: 10px;
    top: 22px;
    z-index: 9999999;
    opacity: .6;
}
.sml-logo img{
    height:30px;
}
.sml-logo div{
    color: #629a59;
    font-size: 16px;
    line-height: 28px;
    float: right;
    margin-left: 5px;
    font-weight: 600;
}

.slow-down-toast-blk {
    position: absolute;
    right: 15px;
    top: 15px;
    padding: 8px 15px 8px 15px;
    border-radius: 8px;
    background-color: #3857b2;
    z-index: 999;
}
.slow-down-txt {
    width: 200px;
    line-height: 18px;
    margin-right: 15px;
    color: #d8d8d8;
    font-size: 14px;
}
.toast-close-btn {
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
}
.portraitmsg{
    display: none !important;
}
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
    background-color: #3857b2;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    height: 30px;
    font-size: 14px !important;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  .no-host{
    position: fixed;
    width: 100%;
    padding: 10px;
    background: #171717;
    color: #fff;
    text-align: center;
    top: 0px;
    z-index: 99;
  }
 
  .option_btn .medic{
      display: none;
  }
  .disabled-media .medic{
      display: block !important;
  }
  .disabled-media img{
      display: none !important;
  }
.first-dot{
    height: 6px !important;
}
.second-dot{
    height: 12px !important;
}
.third-dot{
    height: 6px !important;
}
.wbusr{
    position: absolute;
    right: 5px;
    top: 2px;
    font-size: 12px;
    color: #9e9e9e;
}
.name{
    width: 100px !important;
}
.avsett{
    width: 271px;
    margin: 0 auto;
    padding: 14px;
    /* background: #f9f9f9; */
    border: 1px solid #f1f1f1;
}
  .audio-chker-blk{
    margin-left:6px;
    height: 1.625em;
    width: 1.625em;
    -webkit-box-align: center;
    box-align: center;
    align-items: center;
    box-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #817fff;
    display: flex;
    font-size: 16px;
  }
  .audio-chker-blk .first-dot,.audio-chker-blk .second-dot,.audio-chker-blk .third-dot{
    background-color: currentColor;
    border-radius: 0.125em/0.125em;
    height: 0.25em;
    width: 0.25em;
    will-change: height,transform;
    z-index: 1;
    margin-left:3px;
    opacity: 0;
  }
  .audio-chker-blk .first-dot{animation: jiggle1 .6s 0s infinite;}
  .audio-chker-blk .second-dot{animation: jiggle2 .6s 0s infinite;}
  .audio-chker-blk .third-dot{animation: jiggle3.6s 0s infinite;}
/* Responsive */

@media screen and (max-width: 900px){
    .call-cont .call-detail {
       
    }
    .pop-parent{
        background: none !important;
    }
    .hidemobile{
        visibility: hidden !important;
    }
    .conference_icon .option_btn{
        min-width: 25px !important;
        min-height: 25px !important;
        text-align: center !important;
        margin-left: 6px !important;
    } 
    .dialog .flex-grid{
        height: 100%;
        margin-top: 0px;
    }
    #closecall .fa{
        margin-top: 2px;
    }
    .option_btn .fa{
        font-size: 14px;
        padding-top: 3px !important;
    }
    .option_btn img {
        height: 16px;
        margin-top: 2px;
    }
    .conference_icon{
        text-align: right;
        padding-right: 10px !important;
    }
    .mobile-hide{
        display: none !important;
    }
    .new-chat .userList .field {
        height: calc(100vh - 331px) !important;
    }
    .logotxt{
        padding: 5px 0px 0px 7px !important;
        height: 43px !important;
    }
    .newchat-backdrop{
        z-index: 9;
        background: rgb(0 0 0 / 28%);
    }
    .pop-parent{
        height: 100%;
    }
    .margin-8{
        margin-top: 8px !important;
    }
    
    .flex-grid {
        position: absolute;
        width: 100%;
    }
    
    .mobparent{
        height: calc(100% - 40px) !important;
    }
    .audio_view{
        height: 100%;
    }
    .cust-aud-view{
        display: block;
    }
    
    .screen-video video{
        background: #19264e !important;
    }
    
    .width-hight-50 {
        width: 50% !important;
        right: 0px !important;
        bottom: 0px !important;
        height: calc(50% - 47px) !important;
        object-fit: cover !important;
    }
    .audio_view {
        /* height: calc(100vh - 113px); */
        height: 54px !important;
        background: #2e3246;
        opacity: 0.75;
        height: 100px;
        bottom: 0px;
        position: absolute;
    }
  /* .audio_view .transcript-parent {
      margin-top: 0px;
  } */
  .dialog{
    background: none !important;
  }
  .tools {
    width: 102px;
    padding-top: 5px;
    height: 30px !important;
  }
  .tools .tool-left{
      background: #fff;
  }
  .whiteboard {
    width: 100%;
    background: #fff !important;
    z-index: 999 !important;
    height: 100% !important;
}
.encrypt-txt {
    background: #ffffb6;
    color: #292626;
    font-size: 9px;
    font-weight: 500;
    padding: 3px;
    width: 100%;
    margin: 0 auto;
    border-radius: 0px !important;
}
.secure-wrap {
    width: 100%;
    position: fixed;
    top: 0px !important;
    left: 0px;
    right:0px;
    line-height: 17px;
}
.mobile{
    display: block !important;
}
.signin-container{
    padding: 0px !important;
}
.mobile-loginwrap{
    height: 100vh !important;
}


#local-video-wrap{
    width: 70px;
    height: 50px;
    position: fixed;
    z-index: 999;
    right: 3px;
    bottom: 65px;
    object-fit: cover !important;
}
#local-video-wrap .video-name{
    display: none;
}
.width-hight-50 .video-name{
    display: block !important;
}
.conference_icon{
    position: fixed;
    bottom: 12px;
    width: 100%;
}
.call-icon-wrp{
    display: none;
}
.main-cht-area{
    height: 100% !important;
    position: absolute;
}
#call-open{
    height: 100%;
}
.flex-grid .se-p.chat-list {
  left: 0px !important;
  /* z-index: 1 !important; */
  z-index: 10000000 !important;
}

.pop-parent .pop{
    width: 100%;
    margin-top: 20px !important;
}
.list-wrapper li .is-one-quarter {
    width: 78px !important;
}
.nav-item img{
    height: 30px !important;
}
.navbar-start strong{
    font-size: 13px !important;
    line-height: 12px;
}
.header-wrapper{
    height: 40px;
}
.header-wrapper .navbar{
    min-height: 40px !important;
}
.list-wrapper.list-overflow {
    height: calc(100vh - 99px) !important;
}
.navbar-end .empty-head-icon{
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
}
.navbar-link .is-small{
    top: 20px !important;
    right: 37px !important;
}
.navbar-start .menu-bar{
    display: none;
}

}

.mob-content .hide-mob {
    display: block;
}

.mob-content header .fa-chevron-right {
    display: none;
}
#portrait-rotate{
    display: none;
}
@media (max-device-width: 900px) and (orientation: portrait){
    #portrait-rotate{
        display: block;
        z-index: 9999999999999999999999;
        background: #3857b2;
        background: -moz-linear-gradient(-45deg, #3857b2 0%, #7693e8 100%);
        background: -webkit-linear-gradient(
    -45deg, #3857b2 0%,#7693e8 100%);
        background: linear-gradient(
    135deg, #3857b2 0%,#7693e8 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19024c', endColorstr='#846cba',GradientType=1 );
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .portrait-rotate-message {
        width: 80%;
        text-align: center;
        margin: 0 auto;
        padding: 0;
        border-radius: 5px;
        -webkit-transition: opacity .15s linear;
        -o-transition: opacity .15s linear;
        transition: opacity .15s linear;
        display: table;
        height: 100vh;
    }
    .portrait-rotate-message figure {
        display: table-cell;
        vertical-align: middle;
    }
}

@media screen and (max-width: 900px){
    .video-parent{
        bottom: 55px;
    }
    .screen-video {
        height: 100% !important;
    }
    .set-cam-par{
        width: 50%;
        float: left;
        padding: 5px;
        margin-top: 40px;
    }
    .sett-selection{
        width: 50%;
        float: left;
        padding: 5px;
        margin-top: 40px;
    }
    .user-list{
        height: 100% !important;
    }
    .left-pannel{
            width: 100% !important;
            z-index: 9999999999999999;
            position: fixed;
            
    }
    /*
    .call-cont .call-detail .tab-content .tab-pane .footer {
        width: 231px !important;
        padding: 0px;
        background: transparent;
        position: fixed !important;
        right: -31px;
        top: -10px;
    }
    .call-cont .call-detail .tab-content .tab-pane .footer a{
        border:  none !important;
    }
    */
    .settings-content{
        width: 100%;
        height: 100%;
        margin-top: 0px;
        padding-top: 0px;
    }
    .setting-cam-mic-btn-wrap{
        left: calc(25% - 9px) !important;
    }
    #preview{
        height: 100%;
        width: auto !important;
    }
    .camwarn{
        float: left;
    }
    .settings-content p{ 
        margin: 3px !important;
    }
    .call-cont .call-detail{
        width: 100% !important;
    }
    .encrypt-txt {
        background: rgb(0 0 0 / 65%) !important;
        color: #ffffff !important;
    }
}
@media screen and (max-width: 600px){
    
    .mobile-hide{
        display: none;
    }
    .left-tools{
        bottom: 73px !important;
    }
    .video-2{
        width: 100%;
        height: 50%;
    }
    .option_btn{
        min-width: 30px !important;
        min-height: 30px !important;
        padding-top: 1px !important;
        border: 1px solid #d0d0d0;
    }
    .option_btn .fa{
        font-size: 16px;
    }
    .screen-layout .video-wraper{
        width: 100px;
        height: 100px;
    }
    .screen-layout{
        position: absolute !important;
        right: 0px !important;
        width: 100% !important;
        height:100px !important;
    }
    .screen-video{
        width: 100% !important;
        top: 150px;
        bottom: 0px;
        height: auto !important;
        
    }
    .video-parent {
        position: absolute;
        width: 100% !important;
        height: 100%;
    }
    .margin-8{
        margin-top: 8px !important;
    }
    #closecall .fa{
        margin-top: 10px !important;
    }
    .audio_view .audio_content .conference_icon{
        /*bottom: 13px;*/
    }
    .left-tools{
        bottom: 57px !important;
        margin-left: -39px;
    }
    #closecall .fa{
        margin-top: 5px !important;
    }
    .option_btn .fa{
        font-size: 11px;
        padding-top: 5px !important;
    }
    .option_btn img {
        height: 16px;
        margin-top: 2px;
    }

    .mob-content .button {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .mob-content .hide-mob {
        display: none;
    }
    .mob-content .hide-desk {
        display: block;
    }
    .mob-content .hide-desk .is-small {
        padding-left: 2em;
        padding-right: 2em;    
    }
    .mob-content .contents .sessions tbody tr td {
        padding-left: 10px;
    }
    .mob-content .contents .sessions thead tr th.has-text-centered {
        text-align: left !important;
    }

    .mob-content .contents .table tbody tr:last-child td {
        border-bottom-width: 1px;
    }
    .mob-content header .fa-chevron-right {
        display: block;
    }

    .mob-content .contents .sessions thead {
        display: none;
    }
    
}

@media screen and (max-width: 480px){
    
    
}