/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//+		© Copyright iDIWAY 2009
//+		Tout droits de reproduction interdits
//+		http://www.idiway.fr
//+		$Revision: 9653 $
//+		$Date: 2026-01-30 19:27:28 +0100 (ven. 30 janv. 2026) $
//+		$HeadURL: svn://svn.id.lan/pko/sat/2x/241_tgo/trunk/tpl/tpl0/css/umod/mlv/live.shoot.css $
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.mlv-mqtt{display: flex; margin: 5px auto; width: max-content; align-items: center;}
.mlv-mqtt .mlv-mqtt__marker{padding: 6px 0 0 15px; float: left;}
.mlv-mqtt .mlv-mqtt__marker span{position: relative;}
.mlv-mqtt .mlv-mqtt__marker .mlv-mqtt__marker--offline::before{content: ''; position: absolute; width: 8px; height: 8px; top: -7px; left: -15px; background: #ff0000; border-color: #ff0000; border-radius: 50%;}
.mlv-mqtt .mlv-mqtt__marker .mlv-mqtt__marker--loading::before{content: ''; position: absolute; width: 8px; height: 8px; top: -7px; left: -15px; background: orange; border-color: orange; border-radius: 50%;}
.mlv-mqtt .mlv-mqtt__marker .mlv-mqtt__marker--online::before{content: ''; position: absolute; width: 8px; height: 8px; top: -7px; left: -15px; background: #00bb00; border-color: #00bb00; border-radius: 50%;}
.mlv-mqtt .mlv-mqtt__marker .mlv-mqtt__marker--online::after{content: ''; position: absolute; width: 32px; height: 32px; top: -19px; left: -27px; border-color: #00bb00; border-radius: 50%; box-shadow: 0 0 4px #00bb00, inset 0 0 4px rgb(56, 111, 169); -webkit-transform: scale(0); animation: online 2.5s ease-in-out infinite;}
@keyframes online {
	0%{
		transform:scale(.1);
		opacity:1;
	}
	70%{
		transform:scale(2.5);
		opacity:0;
	}
	100%{
		opacity:0;
	}
}


.mlv-shoot { display: block;}
.mlv-shoot--squadvw { padding: 10px 0;  overflow: auto;}

.squadVw__all { min-width: 300px; padding-left: 10px; }

.mlv-header + .mlv-header .mlv-header__center{ justify-content:space-between; align-items: center; padding: 0 20px; }

.mlv-header--fav .btnPopOver { color: #666; fill:#666; display: flex; align-items: center; background: none; border: none; }

.waitingInput{ position:fixed; z-index:10; right: 5%; bottom:130px; /*background:rgba(0,0,0, 0.2); top:0; left: 0; right:0; bottom: 0;*/ display: flex; align-items: center; justify-content: center; font-size: 1.2rem;}
.waitingInput > div{ text-align: center; background: white; border: none; border-radius: 10px; box-shadow: 3px 3px 8px 5px rgba(0, 0, 0, 0.4); padding:20px; }

/* --- SHOOTING LIVE --- */
.i-grid.i-grid--stage {margin: 0 auto; width: max-content;}
.i-grid.i-grid--stage .i-grid__grp__sep {font-family: var(--font-reg); padding: 20px 0 0 0;}

.i-grid.i-grid--stage .stage__itm {display: contents;}
.i-grid.i-grid--stage .stage__itm .stage__itm__head{display: flex; align-items: center; /*font-size: 14px;*/ width: 100%; font-size: 12px; color:#808080;}
.i-grid.i-grid--stage .stage__itm .name__squad.btnPopOver{ padding: 0px; background:transparent; border:none; display:flex; align-items:center; justify-content:center; color:currentColor; font-family:inherit; }
.i-grid.i-grid--stage .stage__itm .name__squad.btnPopOver:hover{ text-decoration: underline;}
.i-grid.i-grid--stage .stage__itm .stage__itm__body{padding-left: 10px;}


input[name='fav_shooter'] { display: none;}
input[name="fav_shooter"]:checked + span .fav__ico--off,
input[name="fav_shooter"]:not(:checked) + span .fav__ico--on { display: none; }
.label_fav {  opacity:0.5; padding-left: 20px; padding-right: 20px;}
.label_fav:hover { cursor: pointer; opacity:1 }


.spacerCtr{display: flex; }
.spacerCtr > *{ margin: 1px 4px 1px 0; width: 2px; height: 2px; background: #C8C8C8; }

.i-grid.i-grid--stage .stage__itm .i-grid__li .DW_pays{font-size: 12px;}
.i-grid.i-grid--stage .stage__itm .i-grid__li .data_time{ color:#999;}
.i-grid.i-grid--stage .stage__itm .i-grid__li .data_point{ color:#999;}
.i-grid.i-grid--stage .stage__itm .i-grid__li .data_shot{ color:#999;}
.i-grid.i-grid--stage .stage__itm .i-grid__li .data_timeStage{ color:#999;}
.i-grid.i-grid--stage .stage__itm  a.i-grid__li:hover > div { background: rgba(241, 242, 253, 0.45); color:currentColor; opacity: 1}

.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--isNext > div{ opacity: 0.8}
.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--hasNow > div{padding-top: 0; padding-bottom: 0;}
.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--hasNow > div.border_left{ border-left: 1px solid #C8C8C8; }
/*.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--hasNow.i-grid__li--isWait > div.border_left{ border-left-color: orange; }
.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--hasNow.i-grid__li--isLive > div.border_left{ border-left-color: green; }*/
/*.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--hasNow.i-grid__li--isLive:not(.i-grid__li--isAllTgt) > div.border_left{ animation: ico_live 1s infinite; }*/



.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--isLive .data_point{ font-style: italic; margin-right: 1px;}
.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--isLive .data_shot{ font-style: italic;}
.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--isLive .data_miss{ font-style: italic;}
.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--isWait .data_live svg{ fill:orange; }
.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--isLive .data_live svg{ fill:green; }
.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--isLive:not(.i-grid__li--isAllTgt) .data_live svg{ animation: ico_live 1s infinite; }
.mlv-shoot--squadvw .isWait .data_live svg{ fill:orange; }
.mlv-shoot--squadvw .isLive .data_live svg{ fill:green; }

.mlv-shoot.mlv-shoot__mqtt--off .i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--isLive:not(.i-grid__li--isAllTgt) .data_live svg{ animation: none; }

@keyframes ico_live {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.i-grid.i-grid--stage .stage__itm .li__ctrTgt { display: flex; align-items: center; min-width: 150px; }
.i-grid.i-grid--stage .stage__itm .li__ctrTgt .tgt{ width: 7px; height: 7px; border-radius: 50%; border: 1px solid #808080; background-color: #fff; margin-right: 2px;}
.i-grid.i-grid--stage .stage__itm .li__ctrTgt .tgt.tgt--is_miss{  border-color: #9F3539; background-color: #9F3539;}
.i-grid.i-grid--stage .stage__itm .li__ctrTgt .tgt.tgt--is_hit{  border-color: #5DA01B; background-color: #5DA01B;}


.i-grid.i-grid--stage .stage__itm .data_remaind, .i-grid.i-grid--stage .stage__itm .data_timeStage{ font-size: 11px}
.i-grid.i-grid--stage .stage__itm .data_remaind{ padding-left: 5px;}
.i-grid.i-grid--stage .stage__itm .data_timeStage{ padding-right: 5px;}
.i-grid.i-grid--stage .stage__itm .timeProgress{ /*position:absolute; bottom:-5px; left:0; right: 0;*/ position: relative; width: 100%; height:4px; }
.i-grid.i-grid--stage .stage__itm .timeProgress >div{ position:absolute; top:0; left:0; right:0; bottom:0; background: #f1f1f1;  border-radius: 2px; overflow: hidden;}
.i-grid.i-grid--stage .stage__itm .timeProgress >div >span{ position:absolute; top:0; right:0; bottom:0; left:0%; background: #999; border-radius: 2px;}
/*
.i-grid.i-grid--stage .stage__itm .timeProgress--start .timeProgress >div >span{ animation: progressToAnim var(--time_stage, 10s) linear forwards; animation-delay: var(--time_delay, 0s); animation-play-state: running; }
.i-grid.i-grid--stage .stage__itm .i-grid__li.i-grid__li--isAllTgt.timeProgress--start .timeProgress >div >span{ animation-play-state: paused; }
@keyframes progressToAnim {
	0% { left:0% }
	100% {left:100%}
}
*/

.i-grid.i-grid--stage .stage__itm .timeProgress >div >span.fix{  display:none;}
.i-grid.i-grid--stage .stage__itm .timeProgress--start .timeProgress >div >span.anim{
	-webkit-transition: left linear 1s;
	-moz-transition: left linear 1s;
	-ms-transition: left linear 1s;
	-o-transition: left linear 1s;
	transition: left linear 1s
}


@media screen and (max-width: 800px) {
	.i-grid.i-grid--stage { padding-left: 10px}
}

.mlv-shoot__empty{display: flex; justify-content: center;}

.mlv-shoot__rank{display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 16px;}