/*======================================================================================================= 
									SECTION: VIDEO PLAYER
=========================================================================================================*/
*{
	margin:0; padding:0;
	box-sizing:border-box; /* property allows us to include the padding and border in an element's total width and height.*/
}

.vgheading { /*????????????---*/
	color: #444; font-size:1.75rem; 
	text-align:left; padding: 0px 5%; height:30px; font-weight:bold; 
}


/*-------------------------------------------------------------------------
OVERALL VIDEO CONTAINER
--------------------------------------------------------------------------*/
.vgcontainer {
	display: grid;
 	/*grid-template-columns: 2.1fr 0.9fr; 2 coulmns space ratio*/
 	grid-template-columns: 1fr; /*2 coulmns space ratio*/
	grid-gap:15px; /*space in-between*/
	align-items: flex-start; /* specifies the default alignment for items inside the flexible container*/
	padding: 0px 5%; clear:both; 
	
	border:2px solid blue; 
	transition-property: display;
  	transition-duration: 10s;
}


.vgcontainer.active { /*JS will control this classname*/
  	grid-template-columns: 2.1fr 0.9fr; /*2 coulmns space ratio*/
 }




/*-------------------------------------------------------------------------
LEFT SIDE CONTAINER: Video Player
--------------------------------------------------------------------------*/

/*Overall Frame------------------------------------------*/
.vgcontainer .main-video {  
	background:#fff; 
	border-radius: 5px; 
	padding:0 5px; align-items:center; text-align: center;
	border:3px solid red; 
	border-bottom:1px solid #E1E1E1; 
	position:relative; 
}


/*Video Frame------------------------------------------*/
.vgcontainer .main-video .video { /*Important! the actual player frame*/
	width:100%; /*the height is auto*/  
	border-radius: 5px;  
	border:0px solid orange; 
	position:relative; 
}

.vgcontainer .main-video .video-ad { /*Important! the ad player frame*/
	width:70%; /*the height is auto*/  
	border-radius: 5px;  
	border:1px solid orange; position: absolute;  float:left; top:0;
	z-index:3000;
	display: block; visibility: hidden; /*this will be set by JS to display*/  
}
 
.vgcontainer .main-video .curtain { /*Important! the ad player frame*/
	width:100%; /*the height is auto*/  
	border-radius: 5px; background-color:lightyellow; opacity:0.7; 
	border:1px solid purple; position: absolute;  float:left; top:0;
	z-index:2900; /*the index will be adjust by JS*/
	display: none;  
	height:100px; /*the height will be adjust by JS*/
	/*visibility: hidden; this will be set by JS to display*/  
}
 

/*Video Sub-Title------------------------------------------*/
.vgcontainer .main-video .title {
	border-radius: 5px; color: #666; font-size:1.75rem; 
	padding-top:15px;  
	padding-bottom:5px; text-align:left; 
}




/*-------------------------------------------------------------------------
RIGHT SIDE CONTAINER: VIDEO lIST
--------------------------------------------------------------------------*/

/*Header (Title)--------------------------------------------*/
.vgcontainer .video-list .header { /*overal list container*/
	background-color: #EBEBEB; display:none; 
	width:100%; height:40px; padding:5px; font-size:2rem; font-weight:800;
	transition-property: width;
  	transition-duration: 10s;
}

.vgcontainer .video-list .header.active { /*JS will control this classname*/
	display:block; 
}


/*Content (video icons preview)-------------------------------------*/
.vgcontainer .video-list .content { /*overal list container*/
	background:#fff; border-radius: 5px; 
	height:100%; 
	overflow-y: scroll; 
	display:none;  
}

.vgcontainer .video-list .content.active {  /*JS will control this classname*/
	display:block; 
	transition-duration: 10s;
	transition-property: width;
}

.vgcontainer .video-list .content::-webkit-scrollbar { /*vertical scrollbar size*/
	width:7px; 
}

.vgcontainer .video-list .content::-webkit-scrollbar-track { /*the vertical track line*/
	background:#ccc; border-radius: 50px;
}

.vgcontainer .video-list .content::-webkit-scrollbar-thumb { /*the moving part*/
  	background:#666; border-radius: 50px;
}


/*the sub-container for each list elem*/
.vgcontainer .video-list .content .vid {  
	display:flex; 
	align-items:center; 
	gap: 15px; background:#f7f7f7; 
	margin-bottom:10px; 
	padding:5px 10px; 
	/*border:1px solid rgba(0,0,.1);*/
	border:0px solid #E1E1E1; 
	cursor:pointer;
	align-items: flex-start; /*aligns the flex items at the top of the container*/
}

.vgcontainer .video-list .content .vid:hover {
 	background:#eee; 
}

.vgcontainer .video-list .content .vid.active {
 	background: #9CC; 
}

.vgcontainer .video-list .content .vid.active .title {
  	color:#fff;
}


.vgcontainer .video-list .content .vid video {  /*the icon poster image list*/
 	border-radius: 5px; width:150px; background-color:#666; /*the height is auto*/
}

.vgcontainer .video-list .content .vid .vidtitle { /*the video title*/
  	color: #333; font-size:1.5rem; margin-top:0; border: 0px solid yellow;
}



/*-------------------------------------------------------------------------
VIDEO CHAPTER
--------------------------------------------------------------------------*/
/*Overall Container ----------*/
.chapcontainer {
	/*display: grid;
	grid-template-columns: 0.75fr 2.25fr; 2 coulmns space ratio
	grid-gap:15px;*/
	align-items: flex-start; /* specifies the default alignment for items inside the flexible container*/
	padding: 5px; width:100%;
	max-height:250px;  /*fixed*/
	margin-bottom:10px;
	border:0px solid red; 
}

.chapcontainer:after 
{ /*to avoid the parent div's height is 0*/
	content: " "; display:block; clear:both;
}

/*Header Container ----------*/
.chapcontainer .chapter-header {  
  	height:40px; font-size:2rem; background-color: #E0E0E0; color: #333; padding:5px;
}

.chapcontainer .chapter-list { /*overall list container*/
	border-radius: 5px; 
	min-height:200px; overflow-y: scroll;
}


/*vertical scrollbar---------*/
.chapcontainer .chapter-list::-webkit-scrollbar { /*vertical scrollbar size*/
  	width:0px; 
}
 
.chapcontainer .chapter-list::-webkit-scrollbar-track { /*the vertical track line*/
  	background:#ccc; border-radius: 50px;
}

.chapcontainer .chapter-list::-webkit-scrollbar-thumb { /*the moving part*/
  	background:#666; border-radius: 50px;
}


/*the sub-container for each elem*/
.chapcontainer .chapter-list .chapter {  
	display:flex; 
	align-items:center; 
	gap: 15px; background:#f7f7f7; 
	margin-top:10px; padding:5px; 
	border:0px solid rgba(0,0,.1); 
	cursor:pointer;
}

.chapcontainer .chapter-list .chapter .chap-img { /*the poster image list*/
 border-radius: 10px; width:100px; 
}


.chapcontainer .chapter-list .chapter:hover {
 background:#eee; 
}

.chapcontainer .chapter-list .chapter.active {
 background: #9CC;  color:#fff;
}

.chapcontainer .chapter-list .chapter.active .title {
  color:#fff;
}

.chapcontainer .chapter-list .chapter video { /*the poster image list*/
 border-radius: 10px; width:100px; 
}

.chapcontainer .chapter-list .chapter .chaptitle { /*the chapter title*/
  color:#333; font-size:1.5rem; margin-top:0;
}

 



@media(max-width:991px) {
	.vgcontainer {
 	 grid-template-columns: 1.5fr  1fr;  /*2 coulmns space ratio*/
 	 padding: 10px; 
	}
}


@media(max-width:768px) {
	
	.vgcontainer {
 	 grid-template-columns: 1fr;  /*single coulmn space only*/
 	 padding: 2px; 
	}
	
	.vgcontainer .main-video { /*main frame*/
		padding:2px; 
		border-bottom:1px solid #ccc; 
	}

	
	/*Apply for Landscape type of video only: to keep the video player position on top*/
	.vgcontainer .main-video.active { 
 		position:fixed;
		top:0; left:0; right:0;
 		z-index: 400;  /*sit on top*/
 	}

 	.vgcontainer .main-video .title {
	 font-size:2rem; 
	 padding-top:5px;  
	}
	
	
 	.vgcontainer .video-list.active {
		float:none; left:0; right:0; 
		/*height:auto; */ 
		height:200px;  
		z-index: 10;  /*sit on top the video player*/
	}
}

 


/*----------------------------------------------------------
Watermark Layer
-----------------------------------------------------------*/
.watermarkx {
	position: absolute; display:none;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 3rem;
	/*background: rgb(232 240 254 / 0.4);
	padding: 10px;*/
	box-sizing: border-box;
}

.watermark0 {
	position: absolute; display:none; 
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 3rem;
	background: rgb(232 240 254 / 0.4);
	padding: 10px;
	box-sizing: border-box;
}

.watermark1 {
	position: absolute; 
 	display:block; /*us JS to display*/
	/*left: 10px;top: 50px;*/ 
	z-index:5000; color:#03F; width:160px; height:35px;
	left:7px; top:50px; text-align:left; 
	
 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 2.25rem;
	/*background: rgb(232 240 254 / 0.4);*/
	padding: 5px;
	box-sizing: border-box;
}

.watermark1 .ext {
 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1.5rem;
}

.watermark2 {
	position: absolute; 
	display:none; /*us JS to display*/
	right: 25px;
	bottom: 100px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 2.75rem;
	background: rgb(232 240 254 / 0.4);
	padding: 7px;
	box-sizing: border-box;
}



.watermark1:hover {
 	background:#eee; 
}



.watermark3  {
	position: absolute; 
	display:none; /*us JS to display*/
	left: 5%;
	top: 5%;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 2.5rem;
	background: rgb(232 240 254 / 0.4);
	padding: 7px;
	box-sizing: border-box;
}

.watermark4 {
	position: absolute; 
	display:none; /*us JS to display*/
	left: 0;
	bottom: 10px; /*follow main frame*/
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: rgb(232 240 254 / 0.4);
	box-sizing: border-box;
	border-radius: 0px 20px 0px 0px; /*top-left corner, top-right corner, bottom-right corner, bottom-left corner*/
	border: 0px solid #ccc; background-color:#FFF;  
	min-height:200px; 
	min-width:300px; 
}



.watermark4.active {
	height:80px; 
}



.watermark4 {
	position: absolute; 
	display:none; /*us JS to display*/
	left: 0;
	bottom: 10px; /*follow main frame*/
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: rgb(232 240 254 / 0.4);
	box-sizing: border-box;
	border-radius: 0px 20px 0px 0px; /*top-left corner, top-right corner, bottom-right corner, bottom-left corner*/
	border: 0px solid #ccc; background-color:#FFF;  
	min-height:200px; 
	min-width:300px; 
}



.watermark4.active {
	height:80px; 
}



.watermark4 .header {
	position: relative; float:none; 
	display:block; 
	width:100%; height:40px; 
	padding:5px; 
	font-size: 1.75rem;
  	box-sizing: border-box;
	border-radius: 0px 20px 0px 0px; /*top-left corner, top-right corner, bottom-right corner, bottom-left corner*/
	border: 0px solid #ccc; background-color: #333; color:#fff;  
}

.watermark4 .content {
	position: relative; float:none; 
	display:block; 
	width:100%; 
	/*height:auto; */
	height:100%;
 	box-sizing: border-box; background-color:#FFF;
	border: 1px solid #ccc;  
	overflow-y: scroll;
}

.watermark4 .content.active {
	height:100%; 
	border: 1px solid yellow;  
 }


/*vertical scrollbar size*/
.watermark4 .content::-webkit-scrollbar {
  width:7px; 
}

/*the vertical track line*/
.watermark4 .content::-webkit-scrollbar-track { 
  background:#ccc; border-radius: 50px;
}

/*the moving part*/
.watermark4 .content::-webkit-scrollbar-thumb { 
  background:#666; border-radius: 50px;
}





/*
.watermark4 {
	position: absolute; 
	display:none; 
	left: 0;
	bottom: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 2.5rem;
	background: rgb(232 240 254 / 0.4);
	padding: 7px;
	box-sizing: border-box;
	border-radius: 5px; border: 1px solid #00F; background-color:#FFF;  
	min-height:200px; 
	min-width:300px;
	max-width:100%;
	overflow-y: scroll;
}

*/
 


/*vertical scrollbar size
.watermark4::-webkit-scrollbar {
  width:7px; 
}


/*the vertical track line
.watermark4::-webkit-scrollbar-track { 
  background:#ccc; border-radius: 50px;
}
*/
/*the moving part
.watermark4::-webkit-scrollbar-thumb { 
  background:#666; border-radius: 50px;
}
 */


/*--Static Popup Ad Image (on video playing--------------------------*/
.watermark5 {
	position: absolute; 
	display:none;
	left: 50%;
	transform: translate(-50%, -50%);
	
 	bottom: 5%; 
	height:20%;
	width:60%; /*the height is auto*/
	border:1px solid orange;

	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 3rem;
	background: rgb(232 240 254 / 0.4);
	padding: 2px;
	box-sizing: border-box;
}


.watermark5 img{
 	height:100%;
	width:100%;  
 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 3rem;
	box-sizing: border-box;
}


.watermark9 {
	position: absolute; 
	display:none; /*us JS to display*/
	right: 10px; top: 5px;
	height:90%; width:100px; justify-items: center;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 2.75rem;
	background: rgb(232 240 254 / 0.4);
	padding: 7px;
	box-sizing: border-box;
}

.watermark9 a{
 	font-size: 1.5rem; display:block; width: 80px; height:30px; background-color:#0F3; 
 }



 

/*----------------------------------------------------------
OVERLAYER 
-----------------------------------------------------------*/
.overlayer0  { /*only display on mobile mode by JS*/
	position: absolute;  
	display:none; /*us JS to display*/
	left: 10px;
	top: 0px; width:80%;
	/*bottom: -50px; follow main frame*/
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 2.5rem;
	background: rgb(232 240 254 / 0.4);
	box-sizing: border-box; z-index:100;
}

.overlayer0.active {
	display:block;  
}

.overlayer0 .box0,
.overlayer0 .box1,
.overlayer0 .box2  
{  
	display:block; position:relative; min-height:50px; border:1px solid lightblue; padding:5px; float:left;
}

.overlayer0:after,
.overlayer0 .box0:after,
.overlayer0 .box1:after,
.overlayer0 .box2:after  
{ /*to avoid the parent div's height is 0*/
	content: " ";
	display:block;
	clear:both;
}


.overlayer0 .box0 {width:100%; text-align:left; background-color:#C93;} /*video title*/
.overlayer0 .box1 {width:20%; text-align:center; background-color: #09C;} /*user image*/
.overlayer0 .box2 {width:80%; text-align:left; vertical-align:middle; background-color: #9CF;} /*user name*/







/*----------------------------------------------------------
OVERLAYER  
-----------------------------------------------------------*/
.bottom-panel {
	position: absolute;
	display: block; bottom:0; 
  	align-items: left; 
	width:80%; max-height:120px;
	/*height: auto !important;*/
	z-index:100; color: #fff; font-size:1.5rem; 
 	border:0px solid lightblue; padding:3px;  
}

.bottom-panel .subdiv0,
.bottom-panel .subdiv1,
.bottom-panel .subdiv2 {
	display: block; position:relative; float:none; 
	width: 100%;  
 	text-align: left;
	border:0px solid red; 
}

.bottom-panel .subdiv0 {max-height:40px; height:50px;} 
.bottom-panel .subdiv1 {height:45px;} 
.bottom-panel .subdiv2 {height:35px;} 

.bottom-panel .subdiv0 .title {
	display:block; 
	width: 100%;  
	border: 0px solid pink; text-align:left; padding:3px;text-align: justify;
  text-justify: inter-character; font-stretch: condensed;
}

.bottom-panel .subdiv1 .image-id,
.bottom-panel .subdiv1 .user-id {
	display: block; position:relative; float:left;
	height:100%; 
	border:0px solid yellow; padding:3px;
}
 
.bottom-panel .subdiv1 .image-id {
 	width: 50px; text-align:center; position:relative;   
}

.bottom-panel .subdiv1 .user-id {
 	width: calc(100% - 50px);  text-align:left;  
}

.bottom-panel .subdiv1 .image-id img {
 	width: 80%; height:auto; border-radius:10%; object-fit: cover; 
}
 

.bottom-panel .subdiv2 .homelink,
.bottom-panel .subdiv2 .subscribe {
	display: block; position:relative; float:left;
	height:100%; 
	border: 0px solid yellow; padding:3px;
}

.bottom-panel .subdiv2 .homelink {
 	width: 50px;  text-align:center;  
 }

.bottom-panel .subdiv2 .subscribe {
 	width: calc(100% - 50px);  text-align:left;  
}


.bottom-panel:after,
.bottom-panel .subdiv0:after,
.bottom-panel .subdiv1:after,
.bottom-panel .subdiv2:after, 
.bottom-panel .subdiv0 .title:after,  
.bottom-panel .subdiv1 .image-id:after,  
.bottom-panel .subdiv1 .user-id:after,  
.bottom-panel .subdiv2 .homex:after,  
.bottom-panel .subdiv2 .subscribe:after  
{ /*to avoid the parent div's height is 0*/
	content: " ";
	display:block;
}
  
 

/*----------------------------------------------------------
VIDEO PLAYER MODE: video settings (i.e.mode  menu)
-----------------------------------------------------------*/
.video-settings {
	position: absolute; 
	/*display:none; us JS to display*/
	display:none; /*us JS to display*/
	right:0;
	bottom: 50px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1.5rem;
	/*background: rgb(232 240 254 / 0.4);*/
	padding: 5px;
	box-sizing: border-box;
	border-radius: 10px; border: 1px solid #ccc; background-color: #000; opacity: 0.75; 
	max-height:300px; 
	width:200px;
 }
 
.mode-show {
	display: block;
}

 
/*----------------------------------------------------------
SHORT VIDEO PLAYER MODE: video settings (i.e.mode  menu)
-----------------------------------------------------------*/
.video-short-settings {
	position: absolute; 
 	display:none; /*JS is to display*/
	/*right:50px;*/
	right:0px;
	bottom:40px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1.5rem;
	/*background: rgb(232 240 254 / 0.4);*/
	padding: 5px;
	box-sizing: border-box;
	border-radius: 10px; border: 1px solid #ccc; background-color: #000; opacity: 0.75; 
	max-height:300px; 
	width:200px;
 }

.active-left {
	display: block;
	right:0px;
}

.active-right {
	display: block;
	left:0px;
}



/*----------------------------------------------------------
VIDEO like 
-----------------------------------------------------------*/
.video-like-settings, 
.video-dislike-settings {
	position: absolute; 
 	display:none; /*JS is to display*/
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1.5rem;
	bottom:-50px;
	/*background: rgb(232 240 254 / 0.4);*/
	padding: 5px;
	box-sizing: border-box;
	border-radius: 10px; border: 1px solid #ccc; background-color: #000; opacity: 0.75; 
	max-height:300px; 
	width:200px;
 }

 
.active-like-left,
.active-dislike-left {
	display: block;
	right:0px;
}

.active-like-right,
.active-dislike-right {
	display: block;
	left:0px;
}