.vjs-playlist{padding:0;background-color:#2C282B;color:#fff;list-style-type:none;font-size:14px}
.vjs-playlist img{position: relative;	float: left; display: block; height:auto;width:auto}
.vjs-playlist .vjs-playlist-item-list{position:relative;margin:0;padding:0;list-style:none}
.vjs-playlist .vjs-playlist-item{position:relative;cursor:pointer;overflow:hidden}
.vjs-playlist .vjs-playlist-thumbnail-placeholder{background:#303030}
.vjs-playlist .vjs-playlist-now-playing-text{display:none;position:absolute;top:0;left:0;padding-left:2px;margin:.8rem; text-align:center;}
.vjs-playlist .vjs-playlist-duration{position:absolute;bottom:0;right:193px;padding:2px 5px 3px;margin-left:2px;background-color:rgba(26,26,26,0.8); font-size:12px;}
.vjs-playlist .vjs-playlist-title-container{position:relative;bottom:0;box-sizing:border-box;width:50%;padding:.5rem .8rem; display:block; float:left;}
.vjs-playlist .vjs-playlist-name{display:block;max-height:2.5em;padding:0 0 4px 2px;font-style:normal;line-height:20px; font-size:15px;}
.vjs-playlist .vjs-playlist-description{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block;font-size:14px;padding:0 0 0 2px}
.vjs-playlist .vjs-up-next-text{display:none;padding:.1rem 2px;font-size:.8em;text-transform:uppercase}
.vjs-playlist .vjs-up-next .vjs-up-next-text{display:block}
.vjs-playlist .vjs-selected{background-color:#141a21}
.vjs-playlist .vjs-selected img{opacity:.2; }
.vjs-playlist .vjs-selected .vjs-playlist-duration{display:none}
.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text{display:block; }
.vjs-playlist .vjs-playlist-now-playing-text {width:40%;}
.vjs-playlist .vjs-selected .vjs-playlist-title-container{text-shadow:none}
.vjs-playlist-vertical{overflow-x:hidden;overflow-y:auto; scrollbar-width:thin; scrollbar-color:#514949 grey}
.vjs-playlist-vertical::-webkit-scrollbar {width:7px; background-color:grey;border-radius:5px;} /*chrome and firefox */
.vjs-playlist-vertical::-webkit-scrollbar-track {background: grey; border-radius: 5px;} /*firefox */
.vjs-playlist-vertical::-webkit-scrollbar-thumb {background: #514949; border-radius:5px;}/*chrome and firefox */
.vjs-playlist-vertical img{width:45%;min-height:54px}
.vjs-playlist-vertical .vjs-playlist-item{margin-bottom:5px}
.vjs-playlist-vertical .vjs-playlist-thumbnail{display:block;width:100%;position:relative;}
.vjs-playlist-vertical .vjs-playlist-thumbnail-placeholder{height:100px}
.vjs-playlist-horizontal{overflow-x:auto;overflow-y:hidden}
.vjs-playlist-horizontal img{min-width:100px;height:100%}
.vjs-playlist-horizontal .vjs-playlist-item-list{height:100%;white-space:nowrap}
.vjs-playlist-horizontal .vjs-playlist-item{display:inline-block;height:100%;margin-right:5px}
.vjs-playlist-horizontal .vjs-playlist-thumbnail{display:block;height:100%}
.vjs-playlist-horizontal .vjs-playlist-thumbnail-placeholder{height:100%;width:180px}
.container.player .title {margin-top:15px; display: block; float:left; width:100%;}
.vjs-playlist.vjs-ad-playing{overflow:hidden}
.vjs-playlist.vjs-ad-playing.vjs-csspointerevents{pointer-events:none;overflow:auto}
.vjs-playlist.vjs-ad-playing.vjs-csspointerevents .vjs-playlist-ad-overlay{pointer-events:auto}
.vjs-playlist.vjs-ad-playing .vjs-playlist-ad-overlay{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1a1a1a;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";background-color:rgba(0,0,0,0.5)}
.preview-player-dimensions.vjs-fluid {padding-top: 0;}
.tag-articles-list .video-js {min-width:auto;min-height:100%}
.tag-articles-list .clogo {display: block;float: left;width: 20px;margin-right: 5px;}
.tag-articles-list .card-header h2{color:#ffffff; display:block; float:left;}
.tag-articles-list .card-header .cInfo h2{min-height:20px; height:21px; margin-bottom:5px;}
.tag-articles-list .card-header .published{color:#ffffff;}
.vjs-playlist { flex: 1 1 30%;margin: 0; position: absolute; top: 60px; bottom: 0; left: 0; right: 0;width: 30%;float: left;}
.vjs-playlist .vjs-playlist-description{height:28px;line-height:21px}
.vjs-mouse.vjs-playlist{font-size:15px}
.vjs-mouse.vjs-playlist .vjs-playlist-description{height:30px;line-height:23px}
.mobile-shown {display:none}
.collapsible {background-color: transparent; color: #ffffff; cursor: pointer; padding: 9px 0 0 0; width: 70%; border: none; text-align: left; outline: none; font-size: 15px;}
.list.collapsible {display:none;}
.collapsible .clogo {display: block;float: left;width: 20px;margin-right: 10px;}
.collapsible .pdate {display: block;float: left;}
.video-js {position: relative; min-width: 350px; min-height: 425px; height: 0;}
.vjs-playlist {position: relative; width:100%; min-height: 370px; height: 0;}
.vjs-playlist .vjs-playlist-name{line-height:18px; overflow:hidden; text-overflow:ellipsis;-webkit-box-orient:vertical; -webkit-line-clamp:2; display:-webkit-box}
.collapse .description {color:#ffffff}
.playlist-container {flex: 1 1 30%;position: relative; margin-top: 0; height: auto;z-index: 9;}
.playlist-container .series_name {position: relative; display: flex; flex-direction: column;align-items: start; top: auto!important; bottom: auto!important; width: 100%; height: auto;
	color:#ffffff; font-size:16px; font-weight:bold; padding: 10px 0 10px 5px;}
.playlist-container .series_name a {color:#ffffff}
.playlist-container .series_name .description a{color:#1D91FF}
.playlist-container .series_name .mobile_content{font-weight:normal; font-size:15px}
#videoBox .collapse { margin-top: 20px;  display: none;  overflow: hidden;  background-color: transparent;}
#videoBox .collapse .table{width: 100%;max-width: 100%;	margin-bottom: 20px;display: block;	float: left;}
#countdown{display:block; position:absolute; color:white; z-index:9999; text-align:center; background-color:rgba(4,4,4,0.87); font-size:17px; padding:10px; min-width:350px; min-height:425px; height:0px; width: 70%; top:45%;}
#countdown.iOS-device{z-index:99999991;}
#countdown .row1 {margin-bottom:25px;}
#countdown .row2 button{color:#ffffff; font-size:15px;width:134px; height:37px;border:none; border-radius:3px;}
#countdown .row2 #cNext{background-color:#2c2c2c; margin-right:15px;}
#countdown .row2 #qNext{background-color:#6A6A6A; }
.bottom_section {border-top:1px solid #949494}
.section.video {margin-bottom:60px}
.bottom_section .section-header h2{font-size:30px; line-height:30px;}

#content_video {width: 100%;}
.video-js {z-index: 0;}
.preview-player-dimensions.vjs-fluid {padding-top: 0; display: flex; flex-direction: column; z-index: 9;}
.vjs-modal-dialog .vjs-modal-dialog-content {padding: 0;}
.vjs-playlist.vjs-playlist-vertical.vjs-csspointerevents {padding: 0;margin: 0;top: auto!important;overflow-y: auto;}
.mobile-shown {width: 100%;}


@media (min-width: 600px){
	.vjs-mouse.vjs-playlist{font-size:17px}
	.vjs-mouse.vjs-playlist .vjs-playlist-description{height:34px;line-height:26px}		
}

@media (min-width: 1030px) {
	.playlist-container {overflow-y: auto;height: 425px;}
}

/* common setting for non-desktop */
@media (max-width: 1020px){ 
	.mobile-shown {display:block; font-size:20px;padding-bottom: 10px; border-bottom: 1px solid #949494;}
	.desktop-show {display:none;}	
	.nav-down{transition: top 1s;}
	.sticky {position: fixed!important;}
	.vjs-mouse.vjs-playlist {overflow-y: scroll; min-height: 220px; width: 95%; background-color:#292929; margin-left:18px; }
	.tag-articles-list .mobile-list .video-js{min-height:100%; min-width:auto;}
	.playlist-container .series_name {padding:10px 5px 18px 5px}
	.playlist-container .series_name .name{font-size:17px; margin:10px 0;}
	.list.collapsible {width: 20%; display:block;}
	.name {width: 100%; display: flex;justify-content: space-between; -webkit-transition: top 0.3s cubic-bezier(.42,0,.36,.97); 
           -moz-transition: top 0.3s cubic-bezier(.42,0,.36,.97); -o-transition: top 0.3s cubic-bezier(.42,0,.36,.97);
           transition: top 0.3s cubic-bezier(.42,0,.36,.97);}	
	.series_name .name.fixed {transition: all 0.15s ease-out; background: rgb(43 39 42 / 90%); position: fixed!important; top: 275px!important;
		z-index: 999; width: 100%; margin: 0; left: 0; padding: 10px; }
	.main-preview-player {flex-direction: column;}
	#countdown{min-height:300px; width:100%;}
	.section.video .discription{font-size:15px;}
}

/* common setting for all size below 767px */
@media (max-width:767px){
	.section.video .tag-articles-list .card.mobile-list > a{width:100%}
	.section.video .card.mobile-list > .card-header {width:100%; border-top:none;}	
	.section.video .tag-articles-list .card.mobile-list .card-header h2	{overflow:hidden; text-overflow:ellipsis;-webkit-box-orient:vertical; -webkit-line-clamp:2; display:-webkit-box}
	
}

@media (max-width: 380px){
	.vjs-playlist-vertical img{width:130px;}
	.vjs-playlist .vjs-playlist-title-container{width:calc(100% - 130px);}
	.vjs-playlist .vjs-playlist-now-playing-text {width:130px;}
	.vjs-playlist .vjs-playlist-duration{left:96px; right:unset;}	
}

@media (min-width: 1021px) and (max-width: 1029px) {
	.mobile-shown {display:block; font-size:20px;padding-bottom: 10px; border-bottom: 1px solid #949494;}
	.desktop-show {display:none;}	
	.series_name .name.fixed {transition: all 0.15s ease-out; background: rgb(43 39 42 / 90%); position: fixed!important; top: 275px!important;
		z-index: 999; width: 100%; margin: 0; left: 0; padding: 10px; }
	.section.video .container.player {padding: 0;}
    .vjs-playlist.vjs-playlist-vertical.vjs-csspointerevents.vjs-mouse {width: auto;}
    .preview-player-dimensions.vjs-fluid {width: 100%;}
    .main-preview-player {flex-direction: column;}
    .vjs-playlist-item-list.scroll {overflow-y: scroll; height: 425px;}
	.series_name {padding: 10px 15px 0 15px!important !important;}    
    .vjs-playlist-item {margin: 10px;}      
    .series_name > .collapsible {width: 20%;}
    .series_name .slideDown {top: 0;}    
    #videoBox {margin-bottom: 0;}
    .video-js.sticky {min-height: 30%!important; max-height: 350px!important; transition: all 0.15s ease-out;}
    .video-js.sticky.large {min-height: 350px!important;}   
    .video-js.sticky.small.start + .playlist-container {padding-top: 213px;}
	.video-js.sticky.small + .playlist-container {padding-top: 263px;}
    .video-js.sticky.small + .playlist-container .fixed {top: -1px!important;}
    .video-js.sticky.large + .playlist-container .fixed {top: 422px!important;}
}

@media (min-width: 899px) and (max-width: 1020px){		
	.preview-player-dimensions.vjs-fluid{padding-top:0px}	
	.vjs-playlist{top:-210px;float:left;width: 95%;padding-left:18px;}	
	.vjs-playlist-vertical img{width:280px;}
	.vjs-playlist .vjs-playlist-name{-webkit-line-clamp:3;}
	.vjs-playlist .vjs-playlist-duration{left:246px; right:unset;}
	.section.video {margin-bottom:10px}
	.collapsible{width:100%}
	.sticky {z-index:999;}
	#videoBox .collapse .table {margin-left:18px;}
	#videoBox .collapse .discription {margin-left:18px; margin-right:18px;}	
	.vjs-playlist .vjs-playlist-title-container{width:calc(100% - 280px);}
	.vjs-playlist .vjs-playlist-now-playing-text {width:280px;}
	.bottom_section .section > div:first-child {margin-top:30px;}
	.bottom_section .section-header h2{font-size:20px;}
	.series_name .name.fixed {top: 130px!important;}
}
@media (min-width: 768px) and (max-width: 900px){	
	.preview-player-dimensions.vjs-fluid{padding-top:260px}	
	.playlist-container {position:sticky; margin-top:0;}
	#content_video {position: fixed; top: 74px; width: 100%; z-index:9999999999999;left:0}
	.vjs-playlist {min-width:500px;}
	.vjs-playlist .vjs-playlist-duration {right:280px;}
}

@media (min-width: 521px) and (max-width: 767px){	
	.playlist-container {position:sticky; margin-top:0;}
	.preview-player-dimensions.vjs-fluid{padding-top:360px}		
	.video-js {min-height:360px}	
	.collapsible{width:100%;}
	.tag-articles-list .video-js{min-width:280px;}		
	.vjs-playlist-vertical {width:100%; padding: 10px 20px 10px 20px}
	.vjs-playlist-vertical img{width:230px;}
	.vjs-playlist{top:-185px; min-height:270px;margin-top:10px; }
	.section.video .content .card {margin:0}		
	.vjs-playlist .vjs-playlist-title-container{width:calc(100% - 230px);}
	.vjs-playlist .vjs-playlist-now-playing-text {width:230px;}
	.vjs-playlist .vjs-playlist-duration{left:196px; right:unset;}
}

@media (max-width: 520px){	
	.vjs-playlist .vjs-playlist-name{-webkit-line-clamp:2; }
	.video-js, #countdown {min-height:350px;}	
	.video-js.start + .playlist-container{padding-top:360px;width:100%}
	.collapsible{width:100%;}
	.vjs-mouse.vjs-playlist {width: 90%; }
	.vjs-playlist-vertical img{width:180px;}
	.vjs-playlist .vjs-playlist-title-container{width:calc(100% - 180px);}
	.vjs-playlist .vjs-playlist-now-playing-text {width:180px;}
	.vjs-playlist .vjs-playlist-duration{left:146px; right:unset;}
	
}

@media (max-width: 359px){
	.video-js.start + .playlist-container{padding-top:5px;}
}

@media (max-width: 340px){	
	.video-js {min-width: 300px;}	
}

@media (max-width: 320px){	
	.video-js {min-width: 250px;}	
}

@media (max-width: 300px){	
	.video-js {min-width: 220px;}	
}

@media (min-width: 360px) and (max-width:767px){	
	#countdown {display:block; position:fixed; top:74px; left:0}
	#content_video {position: fixed; top: 74px; width: 100%; z-index:9999999;left:0}
}