.player-wrap{
background-color:#000;
container-type:inline-size;
margin:0 auto;
aspect-ratio:16/9;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
overflow:hidden;
position:absolute;
left:0;
right:0;
top:50%;
transform:translateY(-50%);
align-items:center;
justify-content:center
}
.theatre-mode-wrap{
max-width:calc(100% - 60px);
aspect-ratio:16/9;
max-height:calc(100vh - 120px);
min-height:calc(100vh - 120px)
}
.small_player #jsplayer_wrapper{
aspect-ratio:var(--video_aspect_ratio)
}
@media (max-width:600px){
.theatre-mode-wrap{
max-width:100%;
max-height:100%;
min-height:auto
}
.small_player,
.theatre-mode-wrap{
aspect-ratio:'auto'!important
}
.theatre-mode{
display:none!important
}
}
@media (max-width:768px){
.controls-comments-avatar{
width:25px!important;
height:25px!important
}
}
.js-player{
height:100%;
width:100%;
max-width:100%;
max-height:100%;
background:#000;
position:relative!important
}
.js-player::-webkit-media-controls{
display:none!important
}
.js-player::-webkit-media-controls-enclosure,
.js-player::-webkit-media-controls-overlay-play-button,
.js-player::-webkit-media-controls-panel{
display:none!important
}
.controls{
position:absolute;
left:0;
right:0;
z-index:11;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
height:50px;
bottom:-50px;
-webkit-transition:.2s;
-o-transition:.2s;
transition:.2s
}
.controls::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:100px;
background:url('../images/player-controls-bg.png');
z-index:-1;
background-repeat:repeat-x;
background-position:bottom;
pointer-events:none
}
.controls.active{
bottom:0
}
.controls-btn{
cursor:pointer;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
min-width:20px;
height:16px;
margin:0;
padding:0;
background:0 0;
border:none
}
.controls button[disabled]{
opacity:.6;
cursor:default
}
button.theatre-mode{
width:23px
}
button.captions{
width:25px
}
.controls-bottom{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-flex:1;
-ms-flex-positive:1;
flex-grow:1;
padding:0 16px
}
.controls-bottom-left,
.controls-bottom-right{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
gap:15px;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center
}
.controls-time-rail{
cursor:pointer;
position:relative;
-ms-flex-negative:0;
flex-shrink:0;
height:6px;
width:100%;
z-index:2;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
.chapter-slider-items{
width:100%;
height:100%;
display:flex
}
.chapter-slider-items:empty{
background-color:rgba(255,255,255,.3)
}
.chapter-slider-items>span{
position:relative;
height:100%;
transition:.2s;
text-align:left
}
.chapter-slider-items>span:first-of-type .chapter-slider-title{
margin-left:6px
}
.chapter-slider-items>span:last-of-type .chapter-slider-bg{
width:100%
}
.chapter-slider-items>span:last-of-type .chapter-slider-progress{
max-width:100%
}
.chapter-slider-bg{
position:absolute;
left:0;
top:0;
height:100%;
width:calc(100% - 3px);
background-color:rgba(255,255,255,.5);
transition:.2s
}
.chapter-slider-items>span:hover{
height:10px;
margin-top:-2px
}
.controls-active-chapter-title{
position:relative;
display:flex;
justify-content:center;
align-items:center;
margin:0 0 0 10px;
flex-grow:1;
flex-shrink:1
}
.controls-active-chapter-title span{
font-size:13px;
color:#fff;
height:17px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
max-width:250px
}
.controls-active-chapter-title span:not(:empty)::before{
content:"";
height:4px;
width:4px;
border-radius:4px;
left:-12px;
display:block;
position:absolute;
background-color:#fff;
top:8px
}
@container (max-width:600px){
.controls-active-chapter-title{
display:none
}
}
.chapter-slider-loading{
position:absolute;
height:100%;
max-width:calc(100% - 3px);
z-index:1;
background-color:rgba(255,255,255,.4)
}
.chapter-slider-item:last-child .chapter-slider-loading{
max-width:100%
}
.chapter-slider-title{
position:absolute;
opacity:0;
background:0;
color:#fff;
top:-5px;
font-size:13px;
transition:opacity .3s,top .2s;
white-space:nowrap;
pointer-events:none;
z-index:1
}
.chapter-slider-title::before{
content:"";
display:block;
width:calc(100% + 6px);
height:100%;
position:absolute;
left:-3px;
top:0;
z-index:-1;
border-radius:2px
}
.chapter-slider-items>span:hover .chapter-slider-title{
opacity:1;
top:-20px
}
.chapter-slider-progress{
position:absolute;
left:0;
top:0;
width:0;
height:100%;
max-width:calc(100% - 3px);
background-color:#2f76ff;
z-index:2;
margin-right:3px
}
.js-slider-thumb{
position:absolute;
top:50%;
transform:translateY(-50%) scale(0);
left:0;
cursor:pointer;
width:19px;
height:19px;
margin-left:-3px;
background-color:#2f76ff;
border-radius:50%;
z-index:2;
pointer-events:none;
opacity:0;
transition:opacity .2s,transform .2s
}
.controls-time-rail:hover .js-slider-thumb{
opacity:1;
transform:translateY(-50%) scale(1)
}
button.playback-rate{
color:#fff;
font-size:16px;
line-height:20px;
min-width:20px;
width:auto
}
.playback-rate-count{
font-family:var(--sans-medium-font)
}
.playback-rate span:last-child{
margin-left:2px;
font-size:22px;
margin-top:2px
}
.controls-time{
font-size:13px;
color:#fff;
flex-shrink:0
}
.play-circle{
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%) scale(1.2);
-ms-transform:translate(-50%,-50%) scale(1.2);
transform:translate(-50%,-50%) scale(1.2);
z-index:1;
pointer-events:none;
-webkit-transition:.2s;
-o-transition:.2s;
transition:.2s
}
.play-circle svg{
transform-origin:center;
transform:scale(1);
opacity:0
}
@keyframes playAnim{
from{
transform:scale(1);
opacity:1
}
to{
transform:scale(1.3);
opacity:0
}
}
.player-overlay{
position:absolute;
z-index:10;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
cursor:pointer;
-webkit-transition:.2s;
-o-transition:.2s;
transition:.2s
}
.show-player-timer{
position:absolute;
-webkit-transform:translateY(80px);
-ms-transform:translateY(80px);
transform:translateY(80px);
display:none;
background-color:rgba(0,0,0,.8);
color:#fff;
border-radius:5px;
padding:6px 12px;
opacity:0;
pointer-events:none;
font-size:14.5px;
font-weight:400;
-webkit-transition:.2s ease-in-out;
-o-transition:.2s ease-in-out;
transition:.2s ease-in-out;
z-index:1
}
.player-overlay-start:hover{
background-color:rgba(0,0,0,.1)
}
.player-overlay-start{
background-color:rgba(0,0,0,.01)
}
.player-overlay-start:hover .show-player-timer{
opacity:1
}
.player-overlay-button{
display:block;
height:80px;
width:80px;
border-radius:50%;
-webkit-transition:.2s;
-o-transition:.2s;
transition:.2s;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
-webkit-transform-origin:center center;
-ms-transform-origin:center center;
transform-origin:center center;
position:relative;
z-index:1
}
.player-overlay-button svg{
width:100%;
height:100%;
-webkit-filter:drop-shadow(0 0 0.4rem rgba(0,0,0,0.3));
filter:drop-shadow(0 0 .4rem rgba(0, 0, 0, .3));
overflow:hidden
}
.player-overlay-button:before{
content:"";
display:inline-block;
width:100%;
height:100%;
left:0;
color:#fff;
background-color:transparent;
border-radius:100px;
-webkit-animation:1.8s infinite shadow-pulse;
animation:1.8s infinite shadow-pulse;
position:absolute
}
.player-overlay-start:hover .player-overlay-button:before{
-webkit-animation:none;
animation:none;
display:none
}
.player-overlay-start:hover .player-overlay-button{
-webkit-transform:scale(1.06);
-ms-transform:scale(1.06);
transform:scale(1.06)
}
.player-overlay-end{
flex-direction:column;
gap:10px;
display:none;
cursor:default;
background-color:rgba(0,0,0,.75)
}
.player-overlay-button-end{
background:0 0;
border:none;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
gap:10px;
font-size:18.5px;
color:#fff;
cursor:pointer;
order:2
}
.player-overlay-button-end svg{
width:18px
}
@-webkit-keyframes shadow-pulse{
0%{
-webkit-box-shadow:0 0 0 0 var(--pulse-color);
box-shadow:0 0 0 0 var(--pulse-color)
}
100%{
-webkit-box-shadow:0 0 0 24px transparent;
box-shadow:0 0 0 24px transparent
}
}
@keyframes shadow-pulse{
0%{
-webkit-box-shadow:0 0 0 0 var(--pulse-color);
box-shadow:0 0 0 0 var(--pulse-color)
}
100%{
-webkit-box-shadow:0 0 0 24px transparent;
box-shadow:0 0 0 24px transparent
}
}
.loading-bg-img{
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%) rotate(0);
-ms-transform:translate(-50%,-50%) rotate(0);
transform:translate(-50%,-50%) rotate(0);
height:80px;
width:80px;
background:rgba(0,0,0,.2);
border-radius:50%;
display:block;
border:3px solid rgba(0,0,0,.4);
border-top-color:#fff;
-webkit-animation:1s linear infinite spinnerRotate2;
animation:1s linear infinite spinnerRotate2;
-webkit-box-sizing:border-box;
box-sizing:border-box;
z-index:50
}
@-webkit-keyframes spinnerRotate2{
to{
-webkit-transform:translate(-50%,-50%) rotate(360deg);
transform:translate(-50%,-50%) rotate(360deg)
}
}
@keyframes spinnerRotate2{
to{
-webkit-transform:translate(-50%,-50%) rotate(360deg);
transform:translate(-50%,-50%) rotate(360deg)
}
}
.mute-block{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-transition:.3s;
-o-transition:.3s;
transition:.3s;
margin-left:0
}
.mute-block .volume-slider{
cursor:pointer;
margin:0;
max-width:0;
-webkit-transition:.3s;
-o-transition:.3s;
transition:.3s
}
.volume-slider{
position:relative;
height:4px;
width:50px;
background:rgba(255,255,255,.3);
border-radius:2px
}
.volume-slider::after{
content:"";
cursor:pointer;
z-index:1;
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
left:0;
height:30px;
width:100%;
background-color:transparent
}
.volume-slider-progress{
position:absolute;
left:0;
top:0;
height:100%;
width:50%;
background-color:#fff;
border-radius:2px;
-webkit-transition:.3s;
-o-transition:.3s;
transition:.3s
}
.mute-block:hover .volume-slider{
max-width:50px;
margin-left:10px
}
.mute-block:hover{
padding-right:3px
}
.pointer-events-none{
pointer-events:none;
z-index:1!important
}
.test-url-container{
display:flex;
gap:10px;
align-items:center;
margin-bottom:20px
}
.test-url-container input{
flex-grow:1;
height:30px;
margin:0;
padding:0 10px;
border:1px solid #ccc;
border-radius:3px;
box-sizing:border-box
}
.test-url-container button{
flex-shrink:0;
height:30px
}
.media-viewer.video .video-player-wrapper{
display:flex;
text-align:center;
container-type:inline-size;
position:relative;
height:100%;
width:100%;
margin:0 auto;
justify-content:center;
align-items:center
}
.hasNotPlayed .loading-bg-img{
display:none!important
}
.btn-compact.open .dropdown-menu{
height:auto!important
}
.btn-compact .btn .caret{
position:absolute;
top:50%;
transform:translateY(-50%);
left:auto!important;
right:12px;
margin:0
}
.caret{
display:inline-block;
width:0;
height:0;
vertical-align:middle;
margin-top:-2px;
margin-left:7px;
margin-right:0;
border-top:6px solid rgba(18,35,69,.8);
border-right:4px solid transparent;
border-left:4px solid transparent
}
.btn-group,
.btn-group-vertical{
position:relative;
display:inline-block;
vertical-align:middle
}
.drop_zone span{
display:auto!important
}
.main_points{
padding:0;
list-style-type:none;
max-width:400px;
margin:30px auto 0;
display:grid;
grid-template-columns:auto auto;
column-gap:20px
}
.main_points li{
display:flex;
gap:10px;
align-items:center;
margin-bottom:6px;
font-size:16px
}
.main_points li span:before{
content:'';
display:block;
margin:0 auto;
width:7px;
height:14px;
border:solid #04a25a;
border-width:0 3px 3px 0;
transform:rotate(45deg)
}
.bottom_banner_sec{
display:flex;
align-items:center
}
.bottom_banner_sec .share_ideas{
max-width:30%;
width:30%;
background-color:#eef5f9;
padding:20px;
height:375px;
border-top-left-radius:7px;
border-bottom-left-radius:7px
}
.bottom_banner_sec .share_ideas img{
max-width:300px;
width:100%;
margin:0 auto;
display:block
}
.bottom_banner_sec .share_ideas h3{
font-size:22px;
margin-top:35px;
font-weight:400
}
.bottom_banner_sec .record_screen{
display:flex;
max-width:70%;
width:70%;
align-items:center;
justify-content:space-around;
background-color:#cbbaf9;
padding:0 40px;
height:375px;
border-top-right-radius:7px;
border-bottom-right-radius:7px
}
.bottom_banner_sec .record_screen ul{
padding:0;
margin:0 0 20px;
list-style-type:none
}
.bottom_banner_sec .record_screen ul li{
font-size:18px;
text-align:left
}
.no-bullets{
list-style:none
}
@media (max-width:1000px){
.bottom_banner_sec{
flex-direction:column
}
.bottom_banner_sec .share_ideas{
width:100%;
max-width:100%;
height:auto
}
.bottom_banner_sec .record_screen{
width:100%;
max-width:100%;
padding:0 20px 40px;
flex-direction:column;
height:auto
}
.bottom_banner_sec .record_screen ul{
margin-top:40px
}
.main_points{
grid-template-columns:1fr
}
}
.radial-progress{
height:74px;
width:74px;
border:2px solid #15a13a;
border-radius:100%;
top:50%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 20px;
left:0;
right:0
}
.radial-progress img{
height:25px
}
.wbcam_test_contianer_main{
width:60%;
display:block;
margin:0 auto 20px
}
@media (max-width:600px){
.wbcam_test_contianer_main{
width:100%!important
}
}
.wbcam_main_wrapper{
width:100%;
padding-top:56.25%;
height:0;
margin-top:20px;
position:relative
}
.progressbar{
margin:0!important
}
.drop_zone_second .progressbar{
max-width:600px;
width:100%;
position:relative;
border-radius:10px;
height:7px;
margin:30px auto 15px;
overflow:hidden;
display:block
}
.drop_zone_second .progressbar span.progress_active{
background-color:#2f76ff;
z-index:100
}
.drop_zone_second .progressbar span{
width:100%;
height:7px;
left:0;
top:0;
display:block;
position:absolute
}
.drop_zone_second .progressbar span.progress_bg{
background-color:#dbeaf6
}
.progres_bar_time{
font-size:14px!important;
margin:0!important
}
#loading-spinner{
margin:20px;
border:4px solid rgba(0,0,0,.1);
border-top:4px solid #3498db;
border-radius:50%;
width:40px;
height:40px;
animation:1s linear infinite spin
}
#loading-spinner-parent{
display:flex;
align-items:center;
justify-content:center
}
.video_mejs_player{
max-width:600px;
height:337.5px;
margin:0 auto 20px;
padding:0!important;
position:relative
}
.video_mejs_player .mejs__container{
width:100%!important;
max-width:100%;
height:100%!important;
max-height:100%;
position:relative;
overflow:hidden;
text-align:center;
margin:0 auto;
min-width:calc(100% - 100px)!important
}
.video_mejs_player .mejs__overlay-play{
height:100%!important;
width:100%!important
}
.video_mejs_player .mejs__container video{
height:100%!important;
width:100%!important;
position:absolute;
left:0;
top:0
}
.btn_wrpper{
display:flex;
flex-wrap:wrap;
justify-content:center;
max-width:540px;
width:100%;
margin-left:auto;
margin-right:auto;
align-items:center;
gap:15px
}
@media (max-width:600px){
.btn_wrpper{
flex-direction:column
}
.btn_wrpper .btn{
min-width:100%!important
}
.mejs__time{
left:50px!important
}
.wbcam_test_contianer_main{
width:100%!important
}
#video_wrapper video{
width:100%!important;
min-height:300px!important
}
}
.btn_wrpper .btn{
padding:10px 32px;
min-width:165px
}
.modal-open{
overflow:hidden;
position:fixed;
width:100%
}
.viewer-open{
overflow:hidden!important
}
.modal{
z-index:105000!important
}
.modal-backdrop{
z-index:104000!important
}
.cam_scale{
transform:scaleX(-1)
}
#webcam{
border-radius:12px;
overflow:hidden
}