/*
TODO:JFI This is important fix!
*/

.animate_mv_vid{
	position: absolute;
}
.jev_popover{
	position: absolute;
}


.dev_filmstrip{
	z-index: 1;
	width: 100%;
	height: 100%;
	position: absolute;
}



.fs_cx {
	top: 0;
bottom: 0;
left: 0;
right: 0;
	position: absolute;

}



.fs_cx2 {

position: absolute;
width: 100%;
height: 100%;
display: grid;
 /*background-color: #0ff2; */
grid-template-columns: 0px 1fr 0px;
/*grid-template-rows:0px 1fr 0px 100px ;*/
grid-template-rows:0px 1fr 0px 130px ;

}






.dev_filmstrip > .fs_cx .fs_container {

	grid-template-rows:   1fr;
	--v_gtc:5;
    --v_gtc_m:calc(var(--v_gtc)  );
	--v_gtc_m:1;
	/* --v_gtc:1; */
	/* grid-template-columns: repeat(var(--v_gtc), auto); */
	grid-template-columns: 20% 50%;
	grid-template-columns: 20% auto;

	 /*--rc_template:20% 40%; */
	grid-template-columns: 20% 10%;
	grid-template-columns: var(--rc_template,50% 50%);
	/* grid-template-columns: 20% 80% auto; */
    /* --v_gtc_m:calc(var(--v_gtc) - 2 ); */


	/* grid-template-columns: 50% 50%; */
	/* grid-template-rows:   1fr 1fr; */
}


 .dev_filmstrip > .fs_cx .fs_container { 
/*.dev_filmstrip > .fs_cx .fs_container.col_layout {*/

	/*grid-template-rows:   1fr 1fr 1fr;*/
	grid-template-columns:   5fr 1fr 1fr;
	--v_gtc: 5;
	--v_gtc_m: calc(var(--v_gtc) - 2 );
	grid-template-columns: repeat(var(--v_gtc), auto); 

	/*grid-template-columns:   5fr 1fr 1fr;*/

	/*grid-template-columns:   3fr 1fr 1fr;*/
	/*grid-template-columns: var(--rc_template,50% 50%);*/
}

/* color */
.fs_container {
	display: grid;
}
.fs_container {
	grid-column: 1 / span 1;
	grid-column: 1 / span 2;
	grid-column: 2 / span 1;
	grid-row: 1 / span 1;
	grid-row: 2 / span 1;
	/* background-color: red; */
	/*grid-template-rows:   1fr 1fr !important;*/
}

.vcon_base {
	/* outline: 1px solid blue; */
	outline: 1px solid #0ff;
	outline: 1px solid #999;
	/* outline-offset: -5px; */
	/* outline-offset: -1px; */
	/* outline-offset: -1px; */
	outline-offset:-2px;
	position: relative;
	/*background-image: 	 linear-gradient(to top left, #0088 calc(50% - 1px), #0000 calc(50% + 1px));*/
	background-image: 	 linear-gradient(to top left, #0000 calc(50% - 1px), #ffffff18 calc(50% + 1px));
	background-image: 	 linear-gradient(to top left, #0000 calc(50% - 1px), #aaaaff18 calc(50% + 1px));
		/*background-image: 	 linear-gradient(to top left, #0004 calc(50% - 1px), #0000 calc(50% + 1px));*/

}


.vcon_base > .vid_container{
	background-color: ;
	/*outline: 1px solid blue;*/
	top: 0; bottom: 0; left: 0; right: 0;
	top: 2; bottom: 2; left: 2; right: 2;
	top: 30px;
	
	/*top: 300px;*/
	top: var(--vcon_bar_height);
	/*top: 50px;*/
	background-color: #8881;
	position: absolute;
	/*position: absolute;*/
	/*z-index: 1;*/
}



#localDisplayName:after{
	margin-left: 5px;
	content: ":";
}
#localDisplayName:before{
	margin-right: 5px;
	content: ":";

}


#localVideoContainer .avatar-container{
	border-radius: 500px;
	border: 5px solid #fff;
	/*border: 3px solid #fff;*/
	/*border: 3px solid #000;*/

}

.watermark{
	display: none ;
}
.active-speaker-indicator{
	display: none ;
}

.local_corner_vcc {
	grid-column-end: span var(--v_gtc_m);
}
.local_corner_vcc_idk {
	/*grid-column: 3 / span var(--v_gtc_m);*/
	/*grid-column-end: span 3;*/
	/*grid-row: span var(--v_gtc_m);*/
	/*grid-row: 1 / 3;*/
	/*grid-column-end: span 2;*/
	/*grid-column-start: 2;*/
	/*grid-row: 1 / span 2;*/
	/*grid-row: 1 / span 2;*/
	/*grid-row-end: span 2;*/
	/*grid-row: 1 / 3;*/
	/*grid-column: 2 / 4;*/
	/*grid-column: 1 / 4;*/
	/*grid-row-start: 1;*/
	/*grid-row-start: 0;*/
	/*grid-column: span var(--v_gtc_m);*/
}


.vcon_base:nth-child(1){
	/*grid-column-start: 1;*/

}

.vcon_base:nth-child(4){
	/*grid-column-start: 1;*/

}