/* font-weight css*/
.w300{font-weight: 300;}.w400 {font-weight: 400;}.w500 {font-weight: 500;}.w600 {font-weight: 600;}.w700{font-weight: 700;}.w800 {font-weight: 800;}

/* font size css start*/
@media (min-width:0px) {
.xs8 {font-size: 8px;}.xs9 {font-size: 9px;}.xs10 {font-size: 10px;}.xs11 {font-size: 11px;}.xs12 {font-size: 12px;}.xs13 {font-size: 13px;}.xs14 {font-size: 14px;}.xs15 {font-size: 15px;}.xs16 {font-size: 16px;}.xs17 {font-size: 17px;}.xs18 {font-size: 18px;}.xs19 {font-size: 19px;}.xs20 {font-size: 20px;}.xs21 {font-size: 21px;}.xs23 {font-size: 23px;}.xs24 {font-size: 24px;}.xs25 {font-size: 25px;}.xs27 {font-size: 27px;}.xs29 {font-size: 29px;}.xs30 {font-size: 30px;}.xs31 {font-size: 31px;}.xs33 {font-size: 33px;}.xs35 {font-size: 35px;}.xs37 {font-size: 37px;}.xs39 {font-size: 39px;}.xs41 {font-size: 41px;}.xs43 {font-size: 43px;}.xs45 {font-size: 45px;}.xs47 {font-size: 47px;}.xs49 {font-size: 49px;}.xs51 {font-size: 51px;}
}

@media (min-width:768px) {
.sm8 {font-size: 8px;}.sm9 {font-size: 9px;}.sm10 {font-size: 10px;}.sm11 {font-size: 11px;}.sm12 {font-size: 12px;}.sm13 {font-size: 13px;}.sm14 {font-size: 14px;}.sm15 {font-size: 15px;}.sm16 {font-size: 16px;}.sm17 {font-size: 17px;}.sm18 {font-size: 18px;}.sm19 {font-size: 19px;}.sm20 {font-size: 20px;}.sm21 {font-size: 21px;}.sm23 {font-size: 23px;}.sm24 {font-size: 24px;}.sm25 {font-size: 25px;}.sm27 {font-size: 27px;}.sm29 {font-size: 29px;}.sm30 {font-size: 30px;}.sm31 {font-size: 31px;}.sm33 {font-size: 33px;}.sm35 {font-size: 35px;}.sm37 {font-size: 37px;}.sm39 {font-size: 39px;}.sm41 {font-size: 41px;}.sm43 {font-size: 43px;}.sm45 {font-size: 45px;}.sm47 {font-size: 47px;}.sm49 {font-size: 49px;}.sm51 {font-size: 51px;}
}

@media (min-width:992px) {
.md8 {font-size: 8px;}.md9 {font-size: 9px;}.md10 {font-size: 10px;}.md11 {font-size: 11px;}.md12 {font-size: 12px;}.md13 {font-size: 13px;}.md14 {font-size: 14px;}.md15 {font-size: 15px;}.md16 {font-size: 16px;}.md17 {font-size: 17px;}.md18 {font-size: 18px;}.md19 {font-size: 19px;}.md20 {font-size: 20px;}.md21 {font-size: 21px;}.md23 {font-size: 23px;}.md24 {font-size: 24px;}.md25 {font-size: 25px;}.md26 {font-size: 26px;}.md27 {font-size: 27px;}.md29 {font-size: 29px;}.md30 {font-size: 30px;}.md31 {font-size: 31px;}.md33 {font-size: 33px;}.md35 {font-size: 35px;}.md37 {font-size: 37px;}.md39 {font-size: 39px;}.md40 {font-size: 40px;}.md41 {font-size: 41px;}.md43 {font-size: 43px;}.md45 {font-size: 45px;}.md47 {font-size: 47px;}.md49 {font-size: 49px;}.md50 {font-size: 50px;}.md51 {font-size: 51px;}.md53 {font-size: 53px;}.md55 {font-size: 55px;}.md66 {font-size: 66px;}.md63 {font-size: 63px;}
 }
 
 @media (min-width:1200px) {
.lg8 {font-size: 8px;}.lg9 {font-size: 9px;}.lg10 {font-size: 10px;}.lg11 {font-size: 11px;}.lg12 {font-size: 12px;}.lg13 {font-size: 13px;}.lg14 {font-size: 14px;}.lg15 {font-size: 15px;}.lg16 {font-size: 16px;}.lg17 {font-size: 17px;}.lg18 {font-size: 18px;}.lg19 {font-size: 19px;}.lg20 {font-size: 20px;}.lg21 {font-size: 21px;}.lg23 {font-size: 23px;}.lg25 {font-size: 25px;}.lg27 {font-size: 27px;}.lg29 {font-size: 29px;}.lg31 {font-size: 31px;}.lg33 {font-size: 33px;}.lg35 {font-size: 35px;}.lg36 {font-size: 36px;}.lg37 {font-size: 37px;}.lg39 {font-size: 39px;}.lg41 {font-size: 41px;}.lg43 {font-size: 43px;}.lg45 {font-size: 45px;}.lg47 {font-size: 47px;}.lg49 {font-size: 49px;}.lg51 {font-size: 51px;}
 }
 
 .padding0{padding:0 !important}
 .mt0{margin-top:0px}.mt1{margin-top:1px}.mt2{margin-top:2px}.mtt2{margin-top:2.7px}.mt3{margin-top:3px}.mt4{margin-top:4px}.mt5{margin-top:5px}.mt6{margin-top:6px}.mt7{margin-top:7px}.mt8{margin-top:8px}.mt9{margin-top:9px}.mt10{margin-top:10px}.mt11{margin-top:11px}.mt12{margin-top:12px}.mt13{margin-top:13px}.mt14{margin-top:14px}.mt15{margin-top:15px}.mt16{margin-top:16px}.mt17{margin-top:17px}.mt18{margin-top:18px}
.mb0{margin-bottom:0 !important}.mb1{margin-bottom:1px}.mb2{margin-bottom:2px}.mb3{margin-bottom:3px}.mb4{margin-bottom:4px}.mb5{margin-bottom:5px}.mb6{margin-bottom:6px}.mb7{margin-bottom:7px}.mb8{margin-bottom:8px}.mt_15{margin-top:1.5px}

.d-block{
	display: block !important;
} .h-100{
	height: 100% !important;
}
/* font size css end*/

body {
font-family: roboto;
background-color: #000;
color: #FFF;
height: 100%;
width: 100%;
position: absolute;
margin: 0px;
padding: 0px;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-ms-user-select:none;
user-select: none;
}
.player-layout{
	width: 100%;
	height: 100%;
	position: absolute;
}
.poster{
	position: absolute;
    top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	max-width:100%;
	max-height:100%;
	width:100%;
	height:100%;
	margin: auto;
	background-position: 50% 50%;
    background-position-x: 50%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: cover;

}
.poster video{
	position:absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	max-height:100%;
	margin: auto;
	max-width:100%;
	width:100%;
}
/*--------------------------------- top bar controls -----------------------------*/
@media (min-width:0px){.top-bar-layout{position:absolute; top:10px;	width:100%;	padding:0px 10px;  transition: all 0.4s ease-in-out;}}
@media (min-width:768px){.top-bar-layout{ top:20px; padding:0px 15px;}}
@media (min-width:992px){.top-bar-layout{ top:20px; padding:0px 20px;}}
.vidoe-title
{
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
	
}

a.fullscreen-btn,a.fullscreen-btn:hover{color: #ffffff; text-decoration: none; border-radius: 5px; background-color: rgb(0, 0, 0,0.5); padding: 8px; display: inline-block;}



/*--------------------------------- center play button -----------------------------*/
@media (min-width:0px){
	.ceneter-play-btn {
	display: inline-block;
	width: 60px;
	max-height: 40px;
	background:rgba(0,0,0,0.3);
	border-radius:2px;
	text-align: center;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
	margin:auto;
}}
@media (min-width:768px){
	.ceneter-play-btn {
	display: inline-block;
	width: 100px;
	max-height: 60px;
	background:rgba(0,0,0,0.3);
	border-radius:2px;
	text-align: center;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
	margin:auto;
}}

@media (min-width:992px){
	.ceneter-play-btn {
	display: inline-block;
	width: 120px;
	max-height: 80px;
	background:rgba(0,0,0,0.3);
	border-radius:2px;
	text-align: center;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
	margin:auto;
}}
.ceneter-play-btn:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.ceneter-play-btn a {  
color: #ffffff;
vertical-align: middle;
text-decoration:none;
}

/*--------------------------------- title div css start -----------------------------*/
@media (min-width:0px){.title-div{width:100%;padding:15px 15px; position:absolute; bottom:20px;}}
@media (min-width:768px){.title-div{  bottom:40px;}}
@media (min-width:992px){.title-div{  bottom:60px;}}

/*--------------------------------- Bottom bar controls -----------------------------*/
.bottom-bar-layout{position:fixed;bottom:0px;width:100%; transition: all 0.4s ease-in-out; z-index:9;}


#video-control-right{
	margin:0;
	padding:0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media (min-width:0px){
#video-control-right li { display:inline-table; text-align:center;   vertical-align:middle; margin-right:10px;}}

@media (min-width:768px){
#video-control-right li { display:inline-table; text-align:center;   vertical-align:middle; margin-right:15px;}}

@media (min-width:992px){
#video-control-right li { display:inline-table;  text-align:center;   vertical-align:middle; margin-right:20px;}}

#video-control-right li:last-child {margin-right:0px;}
#video-control-right li a{ color:white; text-decoration:none;}
#video-control-right li a.active-hd{ color:#2962a9;}
#video-control-right li a.active-hd:hover{ color:#2962a9;}
#video-control-right li a:hover{ color:white; text-decoration:none;}


@media (min-width:0px){
.play-pause-btn {line-height:normal;border:none; background:transparent;border-radius:3px;	text-align: center; padding:0px;}
.play-pause-btn:after { content: attr(data-active-icon); font-family: 'icomoon'; font-size:14px;}
.play-pause-btn.min:after {  content: attr(data-inactive-icon);  font-family: 'icomoon';}
}

@media (min-width:768px){

.play-pause-btn:after { content: attr(data-active-icon); font-family: 'icomoon'; font-size:18px;}
.play-pause-btn.min:after {  content: attr(data-inactive-icon);  font-family: 'icomoon';}
}

@media (min-width:992px){

.play-pause-btn:after { content: attr(data-active-icon); font-family: 'icomoon'; font-size:19px;}
.play-pause-btn.min:after {  content: attr(data-inactive-icon);  font-family: 'icomoon';}
}


/* bootstrap modal popup vertcial center css*/
.modal {text-align: center; padding: 0!important;}
.modal:before { content: '';display: inline-block;height: 100%;vertical-align: middle;margin-right: -4px;}
.modal-dialog { display: inline-block;text-align: left;vertical-align: middle;}



/*------------------- volume and seek slide controls starts-------------------------*/
@media (max-width:619px){.control-hidden{display:none !important;}}

#volumediv{display:none;position: absolute;bottom:100%; background: rgba(0, 0, 0, 0.8);
    padding:12px;
    margin-left: 0px;
    width:170px;
    right: 11px;
	height:40px;
	
}


/*-------------------- horizontal Range slider css start  -------------------*/
#ex1Slider div #Btime-bar{background:rgba(124,124,124,0.5) !important}

@media(min-width:0px){.slider.slider-horizontal { width: 100% !important;   margin-top:0px;}}
@media(min-width:768px){.slider.slider-horizontal { width: 100% !important;   margin-top:0px;}}
.slider.slider-horizontal .slider-track {
  height:100% !important;
  width: 100%;
  margin-top: 0px;
  top: 0%;
  left: 0;
}
@media(min-width:0px){
.slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle {
	position: absolute;
	top:10px;
	width: 21px !important;
	height: 21px !important;
	z-index:1;
	box-shadow:none;
	border: solid 1px #4d94a9;
}}
@media(min-width:768px){
.slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle {
	position: absolute;
	top:17px;
	width: 21px !important;
	height: 21px !important;
	z-index:1;
	box-shadow:none;
	margin-left: -12px;
}}

.slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle:before {
content:"";position:absolute;top:29%;left:32%;width:8px;height:8px; background:#4d94a9; border-radius:100%;box-shadow:inset 0 1px rgba(0, 0, 0, 0.02);
}

#ex1Slider .slider-rangeHighlight {
background: #87877f;
height: 1px;
top: 50%;
z-index:0;
}



/*--------- horizontal Range slider css end  -------------*/


/*------------- Volume range slider css start  ------------*/

#volumediv .slider-track{height:13px !important; background:rgba(124,124,124,0.8) !important}
#volumediv .slider-handle{top:-4px !important;}
#volumediv .slider-handle:before {
content:"";position:absolute;top:35.5%;left:36.2%;width:6px;height:6px; background:#4d94a9; border-radius:100%;box-shadow:inset 0 1px rgba(0, 0, 0, 0.02)
}

/*------------- Volume range slider css end  ------------------*/

/*--- advertiesment icon show css---*/

@media (min-width:0px){
.advertiesment-icon{position: absolute; z-index: 0; left: 10%; bottom:17px; margin-left: -2px;}}
@media (min-width:768px){
.advertiesment-icon{position: absolute; z-index: 0; left: 10%; bottom:24px; margin-left: -2px;}}
.round-circle{background:rgba(255,255,255,0.3); width:5px; height: 5px; border-radius:50%;}

/*----------------- volume and seekslide controls starts --------------------*/



@media (min-width:0px){
.player-time-left{ position: relative; line-height:40px; padding-right:10px;}
.player-time-right{position: relative;padding-left:10px;}}
@media (min-width:768px){
.player-time-left{ line-height:50px; padding-right:15px;}
.player-time-right{padding-left:15px;}
}
@media (min-width:992px){
.player-time-left{ line-height:50px; padding-right:20px;}
.player-time-right{padding-left:20px;}
}


/*--------------------------------- volume controls end -----------------------------*/


/*--------------------------------- embed popup css starts -----------------------------*/
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    background-color:rgba(0,0,0,0.4) !important;
}
@media(min-width:0px){.modal-size{width:90%;}.email-modal-size{width:90%;}
.close-btn{ position:fixed; top:10px; right:10px; z-index:9; background-color:transparent; border:none; color:#ffffff; padding:0px 6px;}
.white-color,.white-color:hover{ color:#ffffff;}
.embed-code textarea{ background-color:#ffffff; border-radius:3px; padding: 2%; width:100%; border:none; max-width:100%;  resize: none; min-height:100px; max-height:120px; color:#3f2e52}
}
@media(min-width:768px){.modal-size{width:70%;}.email-modal-size{width:60%;}
.close-btn{ position:fixed; top:20px; right:20px; z-index:9; background-color:transparent; border:none; color:#ffffff; padding:0px 6px;}
.white-color{ color:#ffffff;}
.embed-code textarea{ background-color:#ffffff; border-radius:3px; padding: 2%; width:100%; border:none; max-width:100%;  resize: none; min-height:210px; max-height:250px; color:#3f2e52}
}
@media(min-width:992px){.modal-size{width:50%;}
.email-modal-size{width:40%;}
}


.embed-btn{
background: rgba(0,0,0,0.5);
border: none;
padding: 2.5% 9%;
margin-top:5%;
font-family: roboto;
color:#ffffff;
}


/*CSS - Placeholder Color*/
::-webkit-input-placeholder { color: #dfdbe4 !important;}
::-moz-placeholder {color: #dfdbe4 !important;}
:-ms-input-placeholder { color: #dfdbe4 !important;}
:-moz-placeholder {color: #dfdbe4 !important;}

.email-form input[type="text"],.email-form input[type="email"]{border-radius:3px; border:solid 1px #d6d5d3; box-shadow:none; padding:0px 10px; height:45px; font-weight:500; background:#ffffff; color:#4a4949}
.email-form textarea,.email-form textarea:focus{border-radius:3px; border:solid 1px #d6d5d3; box-shadow:none; padding:10px; max-height:120px; max-width:100%; resize:none; font-weight:500;color:#4a4949}
/*--------------------------------- embed popup css end -----------------------------*/




/*--------------------------------- video control hide on mouse event css start -----------------------------*/
@media (min-width:0px){.top-control-show{ top:0px; background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); padding: 15px 15px 40px 15px;} }
@media (min-width:992px){.top-control-show{ top:0px;background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); padding: 15px 15px 40px 15px;}}
.top-control-hidden{ top:-250px;}
@media (min-width:0px){.bottom-control-show{ bottom:0px}}
@media (min-width:992px){.bottom-control-show{ bottom:0px}}
.bottom-control-hidden{ bottom:-100px;}

.top-bar-layout span{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}
/*--------------------------------- video control hide on mouse event css end -----------------------------*/

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

/* ============================================================
  preloader css
============================================================ */

div#preloader {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
	width: 100%;
	height: 100%;
	overflow: visible;
	background: rgba(0,0,0,0.7) url(../images/loader.gif) no-repeat center center;
}


@media (max-width:578px){
.hidden-mobile{display:none !important;}}

.saglus-logo img{max-height: 30px; max-width: 65px; margin: auto;}
@media (min-width:0px){
.saglus-logo{
position:absolute;
bottom:50px;
right:10px;
z-index:0;
background: rgba(255,255,255,0.4);
padding: 5px;
border-radius: 5px;
min-width: 40px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;	
}}
@media (min-width:768px){
.saglus-logo img{max-width: 120px;}
.saglus-logo{position:absolute; bottom:60px; right:20px;}}


.bottom-bar-layout #player-control {
	width: 100%;
	height:40px;
	position: absolute;
	background:rgba(0,0,0,0.6);
	right: 0;
	bottom: 0;
	display:-webkit-flex;
	display:-webkit-box;
	display:-moz-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	webkit-justify-content: space-between;
	align-items: center;
	justify-content: space-between;
	z-index: 9999;
	padding:0px 10px;
	color:#ffffff;
}



@media (min-width:768px){
.bottom-bar-layout #player-control {
	width: 100%;
	height:54px;
	position: absolute;
	right: 0;
	bottom: 0;
	display:-webkit-flex;
	display:-webkit-box;
	display:-moz-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	webkit-justify-content: space-between;
	align-items: center;
	justify-content: space-between;
	z-index: 9999;
	padding:0px 15px;
}
}

@media (min-width:992px){
.bottom-bar-layout #player-control {
	padding:0x 20px;
}
}

.bottom-bar-layout #player-control .left-control {
	height: 100%;
	display:-webkit-flex;
	display:-webkit-box;
	display:-moz-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	cursor: pointer;
	transition: all 0.4s;
}

@media (min-width:0px){
.bottom-bar-layout #player-control .center-control {
	/*width: calc(100% - 100px);*/
	height: 100%;
	display:-webkit-flex;
	display:-webkit-box;
	display:-moz-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	align-items: center;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
	position: relative;
	width:100%;
	padding:0px 15px;
}}
@media (min-width:768px){
.bottom-bar-layout #player-control .center-control {
	/*width: calc(100% - 100px);*/
	height: 100%;
	display:-webkit-flex;
	display:-webkit-box;
	display:-moz-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	align-items: center;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
	position: relative;
	width:100%;
	padding:0px 20px;
}}

.bottom-bar-layout #player-control .center-control .seek_slide {
	width: 100%;
	height:100%;
	position: relative;
}

.bottom-bar-layout #player-control .right-control {
	height: 100%;
	display:-webkit-flex;
	display:-webkit-box;
	display:-moz-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	cursor: pointer;
	transition: all 0.4s;
}

/* share dropdwon */

@media(min-width:0px){
.share-drop{
	bottom:40px;
	background:rgba(0,0,0,0.7);
	border-radius:2px 2px 0px 0px;
	box-shadow:none;
	width: 145px !important;
	left: auto !important;
	right:0;
	min-width: auto;
	padding:0;
	margin:0;
	z-index: 1899;
	position: fixed ;
	top: auto;
	overflow-y: auto;
	max-height: calc(100% - 40px);
}}

@media(min-width:768px){
.share-drop{
	bottom:54px;
	max-height: calc(100% - 54px);
}}

.share-drop > li{border-bottom:solid 1px #000; margin:0 !important; display: block !important; text-align:left !important; padding:6px 0px;}
.share-drop > li.borderhide{border-bottom:hidden }
.share-drop > li > a i{padding-right:15px;}
.share-drop > li > a,.share-drop > li > a:focus{
	color:#ffffff !important;
	background:transparent;
	font-weight:400;
}
.share-drop > li > a:hover{
	color:#8e8e8e !important;
	background:transparent;
}
/*----------- Setting drodown-----*/
@media(min-width:0px){
.setting-drop{
	bottom:40px;
	background:rgba(0,0,0,0.7);
	border-radius:2px 2px 0px 0px;
	box-shadow:none;
	width: 220px !important;
	left: auto !important;
	right:0;
	min-width: auto;
	padding:0;
	margin:0;
	z-index: 1899;
	position: fixed ;
	top: auto;
	overflow-y: auto;
	max-height: calc(100% - 40px);
}}

@media(min-width:768px){
.setting-drop{
	bottom:54px;
	overflow-y: auto;
	max-height: calc(100% - 54px);
}}

.setting-drop > li{border-bottom:solid 1px #000; margin:0 !important; display: block !important; text-align:left !important; padding:10px 15px; color:#ffffff;}
.setting-drop > li.borderhide{border-bottom:hidden }
.setting-drop > li > a,.setting-drop > li > a:focus{
	color:#ffffff !important;
	background:transparent;
	font-weight:400;
	padding:0 !important;
}
.setting-drop > li > a:hover{
	color:#8e8e8e !important;
	background:transparent;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left:25px;
    cursor: pointer;
    display: inline-block;
    color: #3f2e52;
	font-weight:300;
	margin-right:0px;
	margin-top: 0;
	
	
}
[type="radio"]:checked + label{color:#ffffff;}
[type="radio"]:not(:checked) + label
{
	color:#8e8e8e;
   
}

[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
   margin-bottom: 10px;
}


[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0px;
    top: 2px;
    width: 15px;
    height: 15px;
    border: 1px solid #8e8e8e;
    border-radius: 100%;
    background: transparent;
	
}
[type="radio"]:checked + label:before{
    content: '';
    position: absolute;
    left: 0px;
    top: 2px;
    width: 15px;
    height: 15px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    background: transparent;
	
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 5px;
    height: 5px;
    background: #ffffff;
    position: absolute;
    top: 7px;
    left: 5px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

 span.mrgn{position: relative;  top: 1px;}
.grey-color{color:#8e8e8e;}
 
.quality-option,.speed-option{display:none; padding:15px 0px;}

/* swithcer btn*/
 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width:40px;
  height: 22px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #8a8a8a;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch-slider:before {
position: absolute;
content: "";
height:18px;
width:18px;
left:0px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;

}

input:checked + .switch-slider {
  background-color: #5c6ac4;
}

input:focus + .switch-slider {
  box-shadow: 0 0 1px #672a87;
}

input:checked + .switch-slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.switch-slider.round {
  border-radius: 34px;
}

.switch-slider.round:before {
  border-radius: 50%;
} 

/* ----  annotation bar-----*/
.close-btn-anotation{position: relative;
    top: 0;
    float: right;
    z-index: 8;
    background-color: #ffffff;
    border: none;
    color: #000000;
    padding: 0px 6px;
}
.annotation-bar { position: absolute; bottom: 60px; width: 90%; left: 0px;
right: 0px; margin:0 auto; max-width:90%; z-index: 8;}
.annotation-content{display:inline-block;}
.content-bg{background: rgba(112, 112, 112, 0.8) none repeat scroll 0% 0%; padding:10px;}
.annotation-bar h3{margin:5px 30px 5px 10px;}
.annotation-bar p{margin:5px 10px;}
.annotation-img{max-height:100px;}

/*---- gate bar ---*/
.gate-bar{position: fixed;width: 100%;height: 100%;}
.gate-close-btn{ position:fixed; top:0; right:0; z-index:9; background-color:#ffffff; border:none; color:#000000; padding:0px 7px; font-size:17px;}

/*---- Personalization Div Strat ---*/
.top-left{position:absolute; top:0; left:0; padding:10px; width:33.3%; text-align:left;}
.top-center{position:absolute; top:0; left:0; right:0; padding:10px; margin:0 auto; text-align:center; width:33.3%;}
.top-right{position:absolute; top:0; right:0; padding:10px; width:33.3%; text-align:right;}

.center-left{position:absolute; top:0; left:0; bottom:0;  margin:auto;  width:33.3%; overflow: hidden;text-align:left;}
.center-left:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-4px}
  
.center-center{position:absolute; top:0; left:0; right:0; bottom:0;  margin:auto; width:33.3%; overflow: hidden; text-align:center;}
.center-center:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-4px}

.center-right{position:absolute; top:0; right:0; bottom:0;  margin:auto; ; width:33.3%; overflow: hidden;text-align:right;}
.center-right:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-4px}

.center-dialog{display:inline-block;vertical-align:middle; position:relative; padding:10px; width:100%; }


@media (min-width:0px){
.bottom-left{position:absolute; bottom:40px; left:0; padding:10px; width:33.3%; text-align:left;}
.bottom-center{position:absolute; bottom:40px; left:0; right:0; padding:10px; margin:0 auto; text-align:center; width:33.3%;}
.bottom-right{position:absolute; bottom:40px; right:0; padding:10px; width:33.3%; text-align:right;}}
@media (min-width:768px){
.bottom-left{position:absolute; bottom:55px; left:0; padding:10px; width:33.3%;}
.bottom-center{position:absolute; bottom:55px; left:0; right:0; padding:10px; margin:0 auto; text-align:center; width:33.3%;}
.bottom-right{position:absolute; bottom:55px; right:0; padding:10px; width:33.3%;}}


/* Subtitle Css */
.subtitle-top{ position: absolute; top: 10px; width: 90%; left: 0px;
right: 0px; margin:0 auto; max-width:90%; text-align: center;}
.subtitle-bottom{ position: absolute; bottom: 60px; width: 90%; left: 0px;
right: 0px; margin:0 auto; max-width:90%; text-align: center;}
.subtitle-top span.text-format,
.subtitle-bottom span.text-format{
	background: rgba(0,0,0,0.6);
	font-size: 16px;
	padding: 5px;
	white-space: normal;
	word-break: break-all;
	display: inline-block;
}


/* AB Loop Slider Css */
.bottom-bar-layout #abloop-slider {
	width: 100%;
	height:40px;
	position: absolute;
	background:rgba(0,0,0,0.8);
	right: 0;
	bottom: 40px;
	display:-webkit-flex;
	display:-webkit-box;
	display:-moz-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	webkit-justify-content: space-between;
	align-items: center;
	justify-content: space-between;
	z-index: 9999;
	padding:0px 10px;
	color:#ffffff;
}



@media (min-width:768px){
.bottom-bar-layout #abloop-slider {
	width: 100%;
	height:45px;
	position: absolute;
	right: 0;
	bottom: 54px;
	display:-webkit-flex;
	display:-webkit-box;
	display:-moz-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	webkit-justify-content: space-between;
	align-items: center;
	justify-content: space-between;
	z-index: 9999;
	padding:0px 15px;
}
}

@media (min-width:992px){
.bottom-bar-layout #abloop-slider {
	padding:0x 20px;
}
}

.bottom-bar-layout #abloop-slider .center-control {
	/*width: calc(100% - 100px);*/
	height: 100%;
	display:-webkit-flex;
	display:-webkit-box;
	display:-moz-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	align-items: center;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
	position: relative;
	width:100%;
	padding:0px 15px;
}
@media (min-width:768px){
.bottom-bar-layout #abloop-slider .center-control {
	/*width: calc(100% - 100px);*/
	height: 100%;
	display:-webkit-flex;
	display:-webkit-box;
	display:-moz-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display:flex;
	align-items: center;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
	position: relative;
	width:100%;
	padding:0px 20px;
}}

.bottom-bar-layout #abloop-slider .center-control .seek_slide {
	width: 100%;
	height:auto;
	position: relative;
}
@media(max-width:767px){
.abloop-iconmargin{
	margin-top: 4px;
}
}	
.abloop-active{
	color: #36d1fe;
}
/*--------------------Ab Loop Range Slider horizontal Range slider css start  -------------------*/
#ex5Slider div #Btime-bar{background:rgba(124,124,124,0.5) !important}
#abloop-slider .slider-track{background-color: #574f51;}
@media(min-width:0px){#abloop-slider .slider.slider-horizontal { width: 100% !important;   margin-top:0px;}}
@media(min-width:768px){#abloop-slider .slider.slider-horizontal { width: 100% !important;   margin-top:0px;}}
#abloop-slider .slider.slider-horizontal .slider-track {
  height:3px !important;
  width: 100%;
  margin-top: 0px;
  top: 0%;
  left: 0;
}

#abloop-slider .slider.slider-horizontal .slider-tick,
#abloop-slider .slider.slider-horizontal .slider-handle {
	position: absolute;
	top:-15px;
	width: 15px !important;
	height: 16px !important;
	z-index:1;
	box-shadow:none;
	border:hidden;
	background: url(../images/ab-slider-handle.png) no-repeat;
	margin-left: -8px;
	border-radius: 0px;
}

#abloop-slider .slider.slider-horizontal .slider-tick,
#abloop-slider .slider.slider-horizontal .slider-handle:before {
display: none;
}
/* video control Icon hidden CSS */
@media(max-width: 479px){
#video-control-right li.hidden-xs-video-control{
	display: none;
}
}
/* Click For Audio Css */
.click-for-audio{
	position: fixed;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
	right: 15px;
	text-align: center;
	top: 40px;
	z-index: 99999;
	cursor: pointer;
	background:rgba(0, 0, 0, 0.4);
	padding: 5px 15px;
	border-radius: 5px;
}
.audio-control-circle{
	background: rgba(0, 0, 0, 0.4);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 40px;
	width:40px;
	line-height: 40px;
	outline: none;
	pointer-events: auto;
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
}
.audio-control-circle img.mx-height{
	max-height: 15px;
}
.click-for-audio .text-format{
	font-size: 16px;
	margin-right: 15px;
	text-shadow: 2px 1px rgba(0,0,0,0.4);
	font-weight: 500;
}
@media(min-width: 768px){
.click-for-audio{
	right: 15px;
	top: 60px;
}
.audio-control-circle{
	height: 50px;
	width:50px;
	line-height: 50px;
}
.audio-control-circle img.mx-height{
	max-height: 20px;
}
.click-for-audio .text-format{
	font-size: 20px;
	margin-right: 15px;
}	
}

/* Background Video Poster Full Width Css*/
video.background-video-cover{
	background-position: center;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    height: calc(100% + 100px);
    transition: -webkit-filter .35s ease-in-out;
    transition: filter .35s ease-in-out;
    transition: filter .35s ease-in-out,-webkit-filter .35s ease-in-out;
    width: 100%;
}


@media(min-width:0px){
	.chapter-drop{
		bottom:40px;
		background:rgba(0,0,0,0.7);
		border-radius:2px 2px 0px 0px;
		box-shadow:none;
		width: 220px !important;
		left: auto !important;
		right:0;
		min-width: auto;
		padding:0;
		margin:0;
		z-index: 1899;
		position: fixed ;
		top: auto;
		overflow-y: auto;
		max-height: calc(100% - 40px);
	}}
	
	@media(min-width:768px){
	.chapter-drop{
		bottom:54px;
		overflow-y: auto;
		max-height: calc(100% - 54px);
	}}
	
	
	
	.chapter-drop > li{border-bottom:solid 1px #000; margin:0 !important; display: block !important; text-align:left !important; padding:10px 15px; color:#ffffff;}
	.chapter-drop > li.borderhide{border-bottom:hidden }
	.chapter-drop > li > a,.chapter-drop > li > a:focus{
		color:#ffffff !important;
		background:transparent;
		font-weight:400;
		padding:0 !important;
	}
	.chapter-drop > li > a:hover{
		color:#8e8e8e !important;
		background:transparent;
	}
	

.slider-selection{
	background-color: #4C5DC9 !important; 
	opacity: 0.6 !important;
}

.slider-selection-buf{
	 background: #4C5DC9!important; 
	opacity: 0.3!important;
}

/*  to display image add*/

.close-btn-anotation-image{position: relative;
    top: 10px;
    float: right;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0.4);
    border: none;
    color: #fff;
    padding: 0px;
	font-size: 18px;
    min-width: 30px;
    height: 30px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.annotation-image{max-height:100%;}
.annotation-bar-image { position: absolute; bottom: 10px; top:5px; left: 0px;
right: 0px; margin:0 auto; max-width:100%; z-index: 10000;}
.annotation-content-image {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
}