#video-container {  width: 250px;  top: 150px; overflow: hidden; overflow-y: auto; z-index: 996; position: fixed; right: 0px; margin: auto; /* max-height: calc(100vh - 380px); */max-height: 400px; -ms-overflow-style: none;scrollbar-width: none;right: 30px;
}
#video-container li { display: block; cursor: pointer; position: relative; width: 100%; height: auto; overflow: hidden;  z-index: 1; max-width: 170px;max-height: 100px;}
#video-container li .box { background: #222; overflow: hidden; position: relative; height: 98px;  }
#video-container li video { width: 100%; height: 100%; 
	-webkit-transform: scaleX(1);
	-ms-transform: scaleX(1);
	transform: scaleX(1);
}
#video-container li.screen { cursor: pointer; }
#video-container li.screen video { 
	-webkit-transform: scaleX(1) !important;
	-ms-transform: scaleX(1) !important;
	transform: scaleX(1) !important;
}
#video-container li.hide { display: none !important; }

#video-container li .icon { display: none; }

#video-container li.detach { border-radius: 0; position: fixed; z-index: 0; margin: auto; left: 0; right: 0; top: 140px; width: 88%; height: 80%; }
#video-container li.detach .box { height: 100%; max-height: inherit; border-radius: 0; }
#video-container li.detach .icon { z-index: 1; width: 25px; height: 25px; position: absolute; bottom: 10px; cursor: pointer; }
#video-container li.detach .icon.min { right: 35px; background: url(../images/common/icn_minimize.svg) no-repeat center center; background-size: cover; }
#video-container li.detach .icon.max { right: 5px; background: url(../images/common/icn_maximize.svg) no-repeat center center; background-size: cover; }

#video-container li.med { width: 88%; max-width: 580px; height: 326px; max-height: 326px;}
#video-container li.big { width: 88%; max-width: 1190px; max-height: 670px; height: 50vw;margin-left: 70px; }

#video-container li .name { z-index: 1; width: 100%; height: 45px; padding: 20px 10px 10px; color: #fff; overflow: hidden; position: absolute; bottom: 0;  box-sizing: border-box; text-align: left;  
	background: url(../images/common/overlay.png) repeat-x center center;
	background-size: auto 100%;
}

#videos { width: 100%;max-width: 423px;display: grid;grid-template-columns: repeat(2, 1fr); direction: rtl;}

/* Makes the first two rows taller (optional) */
#videos > li.big-row {
  height: 200px;          /* or whatever height you want */
}


#video-sizes { text-align: center; display: none; color: #fff; z-index: 999; width: 270px; height: 70px; padding: 10px 30px; box-sizing: border-box; border-radius: 50px; background: #000; position: fixed; top: 40px; left: 0; right: 0; margin: auto; }
#video-sizes.show { display: flex; }
#video-sizes label { width: 21%; position: relative; overflow: hidden; }
#video-sizes label p { height: 100%; opacity: 0.5; font-size: 16px; display: flex; align-items: flex-end; align-content: flex-end; flex-wrap: wrap; justify-content: center; }
#video-sizes label input[type="radio"] { position: absolute; opacity: 0; left: -20px; }
#video-sizes label input[type="radio"]:checked+p { opacity: 1; }
#video-sizes label span { display: block; width: 100% ; height: 15px; font-size: 14px; }
#video-sizes label .icon { box-sizing: border-box; margin: 0 0 5px; }

#video-sizes .small .icon { width: 15px; border-bottom: 2px solid #fff; }
#video-sizes .med .icon { width: 17px; height: 17px; border: 2px solid #fff; }
#video-sizes .big .icon { width: 25px; height: 25px; border: 2px solid #fff; }

#video-sizes .full { width: 37%; }
#video-sizes .full .icon { width: 25px; height: 25px; border: 2px solid #fff; position: relative; }
#video-sizes .full .icon:before,
#video-sizes .full .icon:after { position: absolute; content: ''; display: block; background: #000; left: 0; top: 0; bottom: 0; right: 0; margin: auto; }
#video-sizes .full .icon:before { width: calc(100% + 4px); height: 10px; left: -2px; }
#video-sizes .full .icon:after { height: calc(100% + 4px); width: 10px; left: -2px; }


.full_overlay { display: none; background: #171717; position: fixed; z-index: 991; width: 100%; height: 100%; left: 0; top: 0; }

body.full .full_overlay { display: block; }
body.full #video-sizes { top: 10px; }
body.full #video-container { width: 250px; right: 0; }
body.full #video-container li .box { height: 113px; }
body.full #video-container li.detach.full { width: calc(100% - 425px); height: calc(100% - 200px); right: auto; left: 15px; top: 90px; max-width:calc(100% - 252px); max-height: calc(100% - 200px);  }


body.full #video-container li.detach.full .box { height: 100%; }









#videos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;  /* 2 columns: col 1 = left, col 2 = right */
	grid-auto-rows: minmax(100px, auto);
	direction: ltr;
	                 /* space between tiles */
}



@media (max-width: 900px) {
	#video-container { overflow-x: auto; display: flex; width: 100%; height: auto; padding: 0; background: #171717; left: 0; right: 0; top: 0; }

	#videos {
		display: grid;
		/* 2 rows, columns expand horizontally */
		grid-auto-flow: column;
		grid-template-rows: repeat(2, auto);
		grid-auto-columns: 150px;    /* each column width */
		grid-template-columns: unset;/* let auto-columns create new columns */
		max-width: 100%;
		direction: ltr;              /* important for consistent col numbers */
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
/* 		-webkit-overflow-scrolling: auto; */
	}
}



@media only screen and (min-device-width: 375px) and (max-device-width: 1000px) and (orientation: landscape) {
	#video-container li .box { position: relative;}
	#video-container { width: 304px; top: 130px; max-height: 100%; left: auto; right: 0px; margin: 0; /* transform: translateY(-40%); */ /* height: 280px; */ overflow-y: scroll;}
	#video-container li .box { height: 85px;}
	
	#video-container li.med{width: 80% !important;} 
	#video-container li.med {left: -210px;}
	#video-container li.big{width: 72%;max-width: 875px; max-height: 670px;height: 41vw;margin-left: 0;top: 130px;}
	body.full #video-container li.detach.full {max-height: calc(100vh - 200px);}
	#videos {grid-auto-rows: minmax(80px, auto);}
}
/* ------------------------------------------------------------ responsive */

#video-sizes .full-list .icon span{border: 2px solid #fff; width: 8px !important;height: 5px !important;}
#video-sizes .full-list p span.icon{display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, auto);gap: 4px; margin-bottom: 13px;width: 35px;}

@media only screen and (max-width:900px) {
	#video-sizes { display: none !important; } 

	#video-container { overflow-x: auto; display: flex; width: 100%; height: auto; padding: 0; background: #171717; left: 0; right: 0; top: 0; }
	
	#video-container li .icon { display: block; }
	#videos {
		display: grid;
		grid-auto-flow: column;                  
		grid-template-rows: repeat(2, auto);    
		  
		grid-auto-columns: 150px;  
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
/* 		-webkit-overflow-scrolling: touch; */
		grid-template-columns: unset;
		max-width: 100%;
		direction: ltr;
	}
	
	body.full #video-container li.detach.full {max-width: 100% !important;max-height: 100% !important;}
	

/*
	/* Make media fit the cell even if width/height attributes exist */
	#videos .box,
	#videos video{
		width: 100% !important;
		height: auto;
		display: block;
		
	}
*/
	
	#video-container li {  width: 150px;  }
	#video-container li .box { height: 85px; }

	#video-container li.med,
	#video-container li.big { top: 170px;  width: 100%; }

	body.full .full_overlay { z-index: 996; }
	body.full #video-container li { display: none; } 
	body.full #video-container li.detach.full { width: 100%; height: 56vw; top: 0; bottom: 0; left: 0; display: block; }

	body.full #video-container li .icon.min { right: 5px; }
	body.full #video-container li .icon.max { display: none; }
	#video-container li.big{margin-left: 0px;}
}






/* Desktop/Tablet layout (exclude small/mobile) */
@media (min-width: 901px) {
	#video-container { 
		z-index: 994;
	}
	/* 2 columns grid */
	#videos {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: row;              /* fill rows left->right */
		grid-auto-rows:auto;
		direction: ltr;                    /* ensure predictable column order */
		
	}

	/* Override restrictive rules coming from #video-container li */
	/* Target only li that do NOT have .med, .detach, .big, or .full */
	#video-container #videos > li:not(.med):not(.detach):not(.big):not(.full) {
		max-width: none;   /* let grid decide */
		height: auto;
		max-height: none;
		height: fit-content;
	}


	/* Only apply when parent <li> does NOT have .med, .detach, .big, or .full */
	#video-container #videos > li:not(.med):not(.detach):not(.big):not(.full) .box {
		height: auto;
		max-height: 100%;
		aspect-ratio: 16 / 9; /* keep correct ratio */
	}


	/* First two items = full width (each on its own row) for first 2 it value 2 */
	#videos > li:nth-child(-n+4) {
		grid-column: 1 / -1;           /* span both columns */
	}

	/* From the 3rd item on, default two columns (no extra rule needed).
	   If you want to be explicit: org val 4 */
	#videos > li:nth-child(n+5) {
		grid-column: auto;
	}
	
	body.full #video-container li.detach.full { width: 100%; height: 100vh; left: 0; top: 0; max-width:calc(100% - 250px); max-height: calc(100vh - 90px);  }
	
	
	
	/* 	for new ui full width list */
	/* Full-width list mode */
	#videos.full-width-list {
		position: fixed;
		inset: 0;                  /* occupy full screen */
		z-index: 1000;
		background: rgba(0,0,0,.4);
/* 		padding: 10px; */
		box-sizing: border-box;
		display: flex;
		flex-flow: wrap;
		align-items: center;
		justify-content: center;
		grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
		grid-auto-rows: auto;                  /* rows expand naturally */
		width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        overflow: hidden;
	}

	/* Normalize each tile */
	#videos.full-width-list > li {
		width: 50% !important;
		height: 50% !important;
		max-width: none !important;
		max-height: 100% !important;
		position: relative;
		min-height: 400px !important;
		
		
	}

	/* Video inside fills its tile */
	#videos.full-width-list > li .box {
		width: 100%; /*border left is not visible so put widht 99*/
		height: auto;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background: #222;
		border: 2px solid #000;
	}
	#videos.full-width-list > li:only-child .box {
		border: 0px;
	}
	#videos.full-width-list > li video {
		width: 100%;
		height: 100%;
	}

	#videos.full-width-list > li:nth-child(-n+5) {
    grid-column: auto !important;
  	}
  		
  	/*  Only display 4 item make the systme light 	 */
  	/* Full-width mode: hide everything by default */
	#videos.full-width-list > li { 
	  display: none !important;
	}
	
	/* …but show the selected set */
	#videos.full-width-list > li.full-view-item,
	#videos.full-width-list > li.detach {
	  display: flex !important;
	  align-items: baseline;
	}
	#videos.full-width-list li:only-child,
	#videos.full-width-list li:first-child:nth-last-child(2),
	#videos.full-width-list li:first-child:nth-last-child(2) ~ li {
		align-items: center !important;
	}
	#videos.full-width-list li:first-child:nth-last-child(n+3),
	#videos.full-width-list li:first-child:nth-last-child(n+3) ~ li:nth-child(-n+2) {
		align-items: flex-end !important;
	}
	
	#videos.full-width-list > li:only-child,
	#videos.full-width-list > li:last-child:nth-child(odd) {
	  grid-column: 1 / -1;       /* span both columns */
	  justify-self: center;      /* center inside that span */
	  width: 50% !important;     /* override earlier 100% !important so centering is visible */
	}
	  		
  	/*   	overriding the detach class style for ull-width */
  	#video-container #videos.full-width-list li.detach {
	  	top: 0 !important;
	  	margin: 0;
  	}

  
	
}