/*#########################################
# >>	Keyframe
#########################################*/
@keyframes chrono_spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 

/*#########################################
# >>	BATTLES
#########################################*/
body.battle_page  {
	padding-top: 0px;
	background: #0f0f32 url('../../plugins/vp_battles/images/battle_bg_3.jpg') no-repeat 0% 0%;
	background-size: 100%;
	margin-bottom: 0px;
	background-repeat: no-repeat;
}
body.battle_page #content,
body.battle_page.dark_page .wrapper,
body.battle_page footer{
	background: none;
}
body.battle_page .page-header,
body.battle_page #sdjc_links_bloc{
	display: none;
}
body.battle_page #content{
	color: #FFF;
}
body.battle_page .page-content .fa_btn{
	color: #FFF;
	font-size: 2em;
}
body.battle_page .fa_btn:hover{
	color: var(--colBlueLight);
}

/*#########################################
# >>	btlBtnEnterBattlePageBloc
#########################################*/
#btlBtnEnterBattlePageBloc{
	position: absolute;
	top:0px;
	left: 0px;
	z-index: 120;
	width: 98vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

#btlBtnEnterBattlePage {
	position: relative;
	font-family: var(--fontCartoon);
	text-transform: uppercase;
	font-size: 2.5em;
	text-align: center;
	padding: 4px 23px;
}

#btlBtnEnterBattlePage .splash {
	position: absolute;
	top: -78px;
	left: 50%;
	width: 220px;
	z-index: -1;
	transform: translate(-50%);
}

/*#########################################
# >>	main page
#########################################*/


#btlGamePageContainer{
	transition: opacity .8s ease-in;
	min-height: 700px;
}

#btl_main_header {
	height: 120px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
#btlLogoInHeaderBloc img{
	width: 100%;
	max-width: 500px;
}

#btl_main_bloc{
	gap: 20px;
	align-items: baseline;
	margin-bottom: 200px;
}
#btl_main_bloc h2 {
	font-family: var(--fontCartoon);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 2.5em;
}
#btl_main_bloc #btlListIntro h2{
	font-size: 2em;
}

#btl_main_bloc h2, #btl_main_bloc h3, #btl_main_bloc h4{
	color: #FFF;
	text-shadow: none;
}


#createBtlBloc{
	position: relative;
	background: var(--colBlueDark2);
	border-radius: 15px;
	max-width: 400px;
	margin:auto;
	margin-top:20px;
	box-shadow: var(--shadowLightForDarkBloc);
}

#createBtlBloc h2{
	background: var(--colBlueLight);
	padding: 20px;
	padding-bottom: 10px;
	margin: 0px;
	border-radius: 15px 15px 0 0;
}
#createBtlBloc .splash {
	position: absolute;
	top: -50px;
	left: -59px;
	width: 130px;
}
#createBtlBloc .icoAdded {
	position: absolute;
	top: -9px;
	left: -11px;
	color: #FFF;
	font-size: 3.4em;
}

#createBtlBloc .content{
	padding: 20px;
}

.btlList{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	justify-content: center;
}
 

.btlThumb {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: var(--colBlueDark2);
	border-radius: 10px;
	cursor: pointer;
	width: 220px;
	box-shadow: var(--shadowBlueVeryBig3D);
}

.btlThumb .gameThumbFlash{
	border-radius: 10px 10px 0 0;
}

.btlThumb.currentUserIsIn{
	background: var(--colBlueLight);
	width: 350px;
}
.btlThumb.currentUserIsIn .gameThumbFlash{
	width: 350px;
	max-width: 350px;
	border-radius: 0px;
}
.btlThumb.currentUserIsIn .interface .vpbtn{
	color: #FFF;
}
.btlThumb.currentUserIsIn .btlThumbContent li{
	justify-content: center;
	margin-top: 3px;
}
.engagedNote {
	color: #FFF;
	background: var(--colBlueLight);
	border-radius: 10px 10px 0 0;
	text-align: center;
	font-weight: bold;
	font-size: 1em;
	padding-top: 6px;
	padding-bottom: 4px;
}

.btlThumb.notAllowed .noAccessFlag{
	display: block !important;
	mix-blend-mode: overlay;
}
.btlThumb.notAllowed .game_thumb{
	opacity: .7;
}
.btlThumbContent{
	font-weight: 600;
	padding: 10px;
	padding-top: 20px;
	/*padding-bottom: 0px;
	margin-bottom: 0px;*/
}
.btlThumbContent li {
	margin-top: 8px;
	height: 24px;
	display: flex;
	align-items: center;
}
.btlThumbContent .text_col_light{
	font-size: 0.9em;
}
.btlThumb.currentUserIsIn .btlThumbContent .text_col_light{
	color: #FFF;
}


.btlThumb .interface{
	display: flex;
	justify-content: center;
	gap: 10px;
	padding: 10px;
	padding-top: 0px;
	margin-bottom: -22px;
}

.btlThumb .interface .vpbtn{
	color: var(--colBlueLight);
	font-weight: bold;
}

#btlList .btnWatchContainer{
	position: absolute;
	bottom: -16px;
	width: 100%;
}

/*.btlThumb .btnDelBtl{
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 2;
	font-size: 1.3em;
	color: #000;
}
*/

.btlThumb .btlThumbPopup {
	color: var(--colBlueDark2);
	display: none;
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(100% - 20px);
	min-height: calc(100% - 20px);
	max-height: calc(100% - 20px);
	background: #FFFFFFDD;
	backdrop-filter: blur(4px);
	overflow: auto;
	overflow-x: hidden;
	padding: 10px;
	border-radius: 10px;
	z-index: 12;
}
.btlThumb .playerListBloc li{
	margin-top:3px;
}

.btlThumb .vpCountdownItem {
	font-size: 0.7em;
	display: inline-block;
}
.btlThumb .vpCountdownItem .countdown_num, 
.btlThumb .vpCountdownItem .countdown_leg{
	display: inline-block;
}
.btlThumb .vpCountdownItem .countdown_num{
	font-size: 1.7em;
}
.btlThumb .vpCountdownItem .countdown_row{
	justify-content: flex-start;
}
.btlThumb .vpCountdownItem .countdown_row .countdown_section{
	margin:3px;
}

.btlThumbDestroyedOverlay{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 13;
	width: 100%;
	height: 100%;
	background: #00000033;
	backdrop-filter: blur(4px);
}

.btlThumb .onairFlag {
	position: absolute;
	top: -50px;
	left: -50px;
	z-index: 2;
	background: #FF000000 url('../../plugins/vp_battles/images/eclab_SVG/eclab_enCours-02.svg') no-repeat 50% 50%;
	width: 170px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFF;
	text-transform: uppercase;
	font-size: 1.3em;
	font-weight: bold;
	transform: rotate(-17deg);
	background-size: contain;
	height: 157px;
	padding-left: 20px;
	font-family: var(--fontCartoon);
}

.btlThumb .gameThumbFlash{
	opacity: .7;
}

.btlThumb.waiting_users .onairFlag{
	display: none;
}
.btlThumb.waiting_users .gameThumbFlash{
	opacity: 1;
}

/*#########################################
# >>	btlList buttons
#########################################*/
.btnBtlThumb{
	font-size: 1.1em;
	font-family: Tahoma, sans-serif;
	display: inline-block;
	padding: 5px 25px 5px 25px;
	letter-spacing: -0.04em;
	background: var(--colBlueDark);
	color: #FFF;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
/*	border: solid 2px #FFF;*/
	border-radius: 20px;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
}
.btnBtlThumb:hover{
	background: #FFF;
	color: var(--colBlueDark);
}
.btnLikeInGame{
	background: #ffe036;
	color: #8c4700;
	border: none;
}
.btnLikeInGame:hover{
	background: #8c4700;
	color: #ffe036;
}

.btnDelBtl{
	background: var(--colBlueDark2);
}


/*#########################################
# >>	btlGamePageContainer
#########################################*/

#btlGamePageContainer h2 {
	font-family: var(--fontCartoon);
	text-transform: uppercase;
	color: #FFF;
	font-weight: 100;
	text-align: center;
	margin-bottom: 10px;
	font-size: 2.3em;
	margin-top: 30px;
	letter-spacing: 0em;
	text-shadow: none;
	margin-top: 90px;
	margin-bottom: -130px;
}

h2#btlContentTitle.normal { /* normal : non spectator */
	margin-top: 100px;
	margin-bottom: -140px;
}

body.btl_spectator h2#btlContentTitle {
	text-align: right;
	margin-right: 50px;
	font-size: 2em;
	margin-top: 102px;
}

#btlGamePageContainer h3{
	text-align: center;
	margin-bottom: 30px;
	font-weight: 800;
}


/*#########################################
# >>	GameMain
#########################################*/
/*.btlThumb.waiting_users .starts_in{
	display: block;
}*/

#btlGameMain {
	height: 642px;
	position: relative;
	margin-top: 50px;
}


#btlGameBg {
	height: 642px;
	width: 970px;
	margin: auto;
	border-radius: 30px;
	background: var(--colDark);
	box-shadow: var(--shadowLightForDarkBloc);
}
#btlFakeGameOuter {
	position: absolute;
	z-index: 0;
	top: 66px;
	left: 173px;
	width: 825px;
	height: 522px;
	background: var(--colBlueLight);
	border-radius: 20px;
}

#btlGameOuter {
	height: 642px;
	width: 970px;
	margin: auto;
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 115px;
}
#btlGameOuter #btn_fullscreen{
	left: 750px;
}
#btlGameOuter #map_frame{
	background-image: url(../../_jeux/_common/images/map_frame_dark.png) ;
}
#btlGameOuter .score_comparator,
#btlGameOuter #winEndGameWaiter{
	display: none !important;
}

#btl_opponents_list_bloc{
	display: flex;
	align-items: center;
	height: 350px;
	margin-top: 100px;
}

#btl_opponents_list h3{
	margin-bottom: 10px;
}


.btlContainerOnGame {
	position: absolute;
	z-index: 100;
	top: calc(50% + 8px);
	left: calc(50% - 0px);
	transform: translate(-50%, -50%);
	width: 700px;
	height: 437px;
	background: var(--colBlueDark2);
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(4px);
	box-shadow: var(--shadowBlueSmall);
	gap: 30px;
	padding-bottom: 20px;
	transition: opacity .5s ease-out;
}

body.btl_interRound #btlGameInterRound{
	padding-bottom: 80px;
}

#btlGameMain.inFullscreenMode #btlGameInterRound{
	top: 50% !important;
}

/*body.btl_interRound #btlGameInterRound h2 {*/
#btlGamePageContainer h2#interRoundH2{

	position: absolute;
	top: -10px;
	left: 341px;
	font-size: 1.9em;
}

#btlGameInterRound .button_interface {
	min-width: 170px;
	position: absolute;
	z-index: 3;
	bottom: -20px;
	left: calc(50%);
	transform: translate(-50%);
	cursor: pointer;
}

#btlGameInterRound .ban_mark_bg{
	font-size: 26em;
	position: absolute;
	z-index: -1;
	color: #FF000066;
	mix-blend-mode: overlay;
}

#btl_players_list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	align-items: center;
	max-height: 227px;
	overflow-y: auto;
	padding: 10px;

	scrollbar-color: var(--colBlueLight) var(--colBlueDark2);
	scrollbar-width: thin;
}


#buttonStartInBattle{
	/*transition: all 0.3s ease-out;*/
}





/* btlGameInterRound */
/*-----------------------------------*/

#btlGameInterRound .vpProgress {
	height: 10px;
	background: var(--colBlueDark2);
	width: 46%;
	position: absolute;
	bottom: 40px;
	z-index: 2;
	border: solid 1px var(--colBlueLight);
	border-radius: 20px;
}

#btlGameInterRound .vpProgressBar{
	background: var(--colBlueLight);
	height: 8px;
}




#btlGameInterRound .vpProgress#progressPressStartButtonAllowed {
	position: absolute;
	bottom: -70px;
	width: 50%;
}

body.battle_page .table_scores tr th{
	background: var(--colBlueLight);
}
body.battle_page .table_scores tr td{
	color: var(--colBlueDark);
}

body.battle_page .table_scores tr td.score{
	padding-right: 10px;
	width: 100px;
	transition: font-size .3s ease-out;
}
body.battle_page .table_scores tr{
	transition: background-color .8s 
}
body.battle_page .table_scores tr.scoreHasChanged td.score{
	font-size: 1.2em;
} 
body.battle_page .table_scores tr.scoreHasChanged{
	background-color: var(--colYellowLight);
	
}

body.battle_page .table_scores.table > tbody > tr:nth-child(2) > td{
	border-top: 1px solid #ddd;
}

body.battle_page .table > tbody > tr:first-child > td{
	border-top: none;
}

.linkToBattleGameBloc {
	display: flex;
	justify-content: center;
	margin-bottom: -29px;
	margin-top: 15px !important;
}

#splash_top_left {
	position: absolute;
	top: -37px;
	left: -54px;
	width: 140px;
}
#splash_bottom_right {
	position: absolute;
	bottom: -50px;
	right: -40px;
	width: 140px;
	z-index: -1;
}

/* btlPlayersBloc */
/*-----------------------------------*/

#btlPlayersBloc {
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	width: 100%;
	top: -2px;
}


#btlPlayersBloc.showScoresTable{
/*	bottom: -132px; /*70px;*/
	width: auto;
}
#btlPlayersBloc.moved{	
	left: 505px; /*72%;*/
}



#btlPlayersBloc .splash {
	position: absolute;
	top: -27px;
	left: -32px;
	z-index: -1;
	width: 80px;
}

#btlIntroHeaderBloc{
	display: flex;
	justify-content: center;
	position: absolute;
	top: -130px;
	width: 100%;
}

#btlIntroHeaderBloc .gameThumbFlash{
	box-shadow: var(--shadowBlueSmall);
}

#btlIntroTopBloc {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 20px;
	width: 100%;
	padding: 0px 20px;
}


#btlIntroTopBloc_leftPart b, #btlIntroTopBloc_rightPart b{
	color: var(--colBlueLight);
	font-weight: 400;
	font-size: 1.3em;
}


#btlIntroTopBloc .btlBattleDetailsGameThumb {
	transform: scale(0.8);
	width: 240px;
	position: absolute;
	top: -67px;
	right: -30px;
}

#btlIntroTopBloc_leftPart {
	overflow: hidden;
	width: 270px;
	position: absolute;
	top: 0px;
	left: 77px;
}
#btlIntroTopBloc_leftPart .admin_bloc{
	width: 500px;
}

#btlIntroTopBloc_separator {
	position: absolute;
	left: 320px;
	height: 53px;
	width: 4px;
	background: var(--colBlueLight);
	border-radius: 20px;
}

#btlIntroTopBloc_rightPart {
	position: absolute;
	left: 347px;
}
.btlBattleDetailsGameThumb .gameThumbFlash{
	background-color: var(--colBlueDark2);
	outline: solid 4px var(--colBlueDark2);

}


/*#tableScoresBloc{
	position: absolute;
	left: 335px;
	bottom: 68px;
	padding: 2px;
	padding-top:30px;
	border-radius: 12px;
	background: var(--colBlueLight);
	width: 330px;
	max-height: 320px;
	overflow: hidden;
	overflow-y: auto;
	scrollbar-color: var(--colBlueLight) var(--colBlueDark2);
	scrollbar-width: thin;
	min-height: 200px;
	box-shadow: 0px 0px 10px var(--colBlueDark2)
}*/

#tableScoresBloc {
	position: absolute;
	left: 330px;
	bottom: 68px;
	width: 325px;
	max-height: 280px;
	border-radius: 12px;
	padding-right: 2px;
	background: var(--colBlueLight);
	overflow: hidden;
	overflow-y: auto;
	scrollbar-color: var(--colBlueDark2) var(--colBlueLight);
	scrollbar-width: thin;
	box-shadow: 0px 0px 10px var(--colBlueDark2);
	border: solid 3px var(--colBlueLight);
}

body.battle_page h3#table_scores_title {
	font-size: 1.3em;
	color: #FFF;
	text-align: center;
	margin: 2px;
}

#tableScoresBloc .table_scores {
	min-height: 186px;
	margin-bottom: 0px;
	border-radius: 5px 5px 10px 10px;
	overflow: hidden;
}
#tableScoresBloc .table_scores .rank{ 
	padding-left: 10px;
}

#tableScoresBloc .table_scores > tbody > tr > td {
	padding: 3px;
}

#tableScoresBloc .table_scores .score{ 
	padding-right: 10px;
	width: 84px;
}
#tableScoresBloc .table_scores tr.qualified td{
	background: #fed75888;
}
#tableScoresBloc .table_scores tr.notQualified td{
	opacity: .3;
}
#tableScoresBloc .table_scores tr.notQualified td.score{
	opacity: .3;
}
/* in spectatorMain we need the scores even if the player is not qualified */
#spectatorMain .table_scores tr.notQualified td.score{
	opacity: .7;
}

/* btlBattleDetails */
/*-----------------------------------*/
#btlBattleDetails{
	padding: 20px;
	text-align: center;
	margin-top: -20px;

}


.btlBattleDetailsGameThumb{
	width: 240px;
	margin: auto;
	margin-top:30px;
}
#btl_user_has_already_started_the_round_bloc{
	padding: 30px 50px;
	text-align: center;
}


/* resultAndTableScore */
/*-----------------------------------*/
#resultAndTableScore{
	display: flex;
	align-items: flex-end;
	gap: 20px;
	padding-bottom: 20px;
}

/* currentUserScoreBloc */
/*-----------------------------------*/
#currentUserScoreBlocOuter{
	position: absolute;
	left: 24px;
	bottom: 70px;
}
#currentUserScoreBloc{
	display: flex;
	justify-content: space-around;
	align-items: end;
	padding-top: 20px;
}
#currentUserScoreBloc .rank b{
	font-weight: 200;
}
#currentUserScoreBloc .rank {
	font-size: 5.6em;
	margin-top: 32px;
	font-family: var(--fontCartoon);
/*	mix-blend-mode: overlay;*/
}
#currentUserScoreBloc .rank sup {
	font-size: 0.4em;
	top: -31px;
	left: 6px;
}
#currentUserScoreBloc h3{
	margin-bottom: -3px;
}
#currentUserScore {
	font-size: 2.7em;
	text-align: center;
	font-weight: 800;
	margin-bottom: 18px;
}



/* playerScoreBloc */
/*-----------------------------------*/
#playerScoreBloc{
	margin-top: -30px;
}
#playerScoreBloc h3 {
	font-size: 1.5em;
	margin-bottom: 0px;
	margin-top: 0px;
	text-transform: uppercase;
}

#playerScoreBloc #playerScore{
	text-align: center;
	font-size: 2.5em;
	font-weight: 800;
}




/* btlResultBloc */
/*-----------------------------------*/

#btlResultBloc {
	padding: 20px;
	text-align: center;
	width: 278px;
	height: 224px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#btlResultBloc .bg{
	border-radius: 12px;
	border-radius: 102% 89% / 112% 87%;

	
	width: 278px;
	height: 224px;

}
#btlResultBloc .content {
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	width: 100%;
	/* height: 100%; */
	z-index: 1;
	padding: 12px;
	padding-top: 23px;
}

#btlResultBloc h2{
	font-size: 2.6em;
	position: relative !important;
	text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);
	margin-bottom : 18px;
	margin-top: auto;
}
#btlResultBloc h3{
	font-size: 1.3em;
	color: #FFF;
	margin-bottom: 20px;
	text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);
}
#btlResultBloc h4{
	font-size: 1.1em;
	color: #FFF;
	text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2);
}

#btlResultBloc sup {
	font-size: 0.4em;
	text-transform: lowercase;
	top: -1em;
}

/*#btlResultBloc.waiting h2{
	font-size: 2.6em;
	margin-bottom: 20px;
	top: 0px !important;
}
*/

#btlResultBloc.waiting .bg , #btlResultBloc.spectator .bg {
	background: #316db6;
	border: solid 4px #3065ac;
}

#btlResultBloc.waiting h2{
	font-size: 2.2em;
}

#btlResultBloc.success .bg  {
	background: #38bd4a url(../../plugins/vp_battles/images/silhouettes_win.jpg) 50% 50%;
	border: solid 4px #3a9362;
	background-size: cover;
}
#btlResultBloc.failure .bg {
	background: #f2533f url(../../plugins/vp_battles/images/silhouettes_loose.jpg) 50% 50%;
	border: solid 4px #da4a35;
	background-size: cover;
}

#roundIndexBloc {
	position: absolute;
	top: -24px;
	left: 61%;
	color: #FFF;
	font-family: var(--fontCartoon);
	font-size: 40px;
	background-color: var(--colBlueDark2);
	line-height: 1em;
	padding: 6px 12px;
	border-radius: 70px;
	z-index: -1;
	overflow: hidden;
	display: none;
}
#roundIndexBloc sup{
	font-size: 0.5em;
}

/*#########################################
# >>	The game, dark
#########################################*/
body.battle_page #mainScoreLabel {
	color: var(--colVeryLight);
}
body.battle_page #questionTextLabel:not(.wrapper_QUIZZ #questionTextLabel) {
	color: var(--colVeryLight);
}
body.battle_page #questionIndexLabel, #questionTextSupLabel{
	color: var(--colVeryLight2);
}
body.battle_page #timerBloc {
	border: solid 3px #4a4c53;
}
body.battle_page #timerBar {
	background: linear-gradient(0deg, rgba(132,173,59,1) 0%, rgba(35,174,38,1) 100%)!important;
}


/*#########################################
# >>	Fullscreen
#########################################*/
#btlGameMain.inFullscreenMode{
	background: var(--colDark);
}
.inFullscreenMode #btlGameBg{
	display: none;
}

.inFullscreenMode #btlGameOuter{
	position: relative;
	left: auto;
}
#btlGameOuter.inFullscreenModeHide {
	display: none !important; /* !important is mandatory */
}


/*#########################################
# >>	user Stats
#########################################*/
#userStatsBloc {
	color: #FFF;
	position: relative;
	flex: 0 0 20%;
}
#btnPopupBtlUserStats{
	padding: inherit;
}
#btnPopupBtlUserStats:hover{
	color: var(--colBlueLight);
}
#btnPopupBtlUserStats i{
	font-size: 2em;
}
#btnPopupBtlUserStats b{
	font-family: var(--fontCartoon);
	font-size: 1.7em;
	text-transform: uppercase;
}
#popupBtlUserStats{
	background: #1e5d9e77;
	border-radius: 15px;
	padding: 20px;
	padding-bottom: 10px;
	position: absolute;
	top:60px;
	left: 0px;
	z-index: 10;
	width: 350px;
}
#popupBtlUserStats .btn_close {
	position: absolute;
	right: 10px;
	top: 10px;
}
#popupBtlUserStats li{
	margin-bottom: 3px;
}
#popupBtlUserStats li:last-child{
	margin-bottom: 0px;
}

#listGamesLevels {
	max-height: 200px;
	overflow: auto;
	scrollbar-color: var(--colBlueDark2) #FFFFFF00;
	scrollbar-width: thin;
	padding: 10px;
	background: #FFFFFF11;
	margin-top: 10px;
}

#popupBtlUserStats .num{
	color: #ffe036;
	font-weight: 800;
}

#ulBattleThisDay li{
	margin-left: 20px;
	max-width: 200px;
	overflow: hidden;
}

/*#########################################
# >>	logo
#########################################*/
#btlLogoInHeaderBloc{
	flex-grow: 2;
	text-align: center;
}

/*#########################################
# >>	popupBtlExplanations
#########################################*/
#btlExplanationBloc {
	position: relative;
	flex: 0 0 20%;
	text-align: end;
}
#popupBtlExplanations {
	position: absolute;
	top: 0px;
	right: 0;
	width: 590px;
	z-index: 11;
	background: #d1ddeb;
	color: var(--colBlueDark2);
	border-radius: 15px;
	padding: 20px;
	padding-top: 50px;
}
#popupBtlExplanations .btn_close{
	color:var(--colBlueDark2);
}
#popupBtlExplanations .content{
	scrollbar-color: var(--colBlueDark2) #d1ddeb ;
	scrollbar-width: thin;
	max-height: 500px;
	overflow: auto;
	padding-right: 10px;
	text-align: start;
}
#popupBtlExplanations h3 {
	color: var(--colBlueDark2);
	font-family: var(--fontCartoon);
	margin-bottom: 0px;
	margin-top: 40px;
}



/*#########################################
# >>	RoundMarks
#########################################*/


#graph_manches_container {
	position: absolute;
	left: 50%;
	z-index: 10;
	transform: translate(-50%);
	width: 460px;
	background-image: url(../../plugins/vp_battles/images/barre_bleue.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	top: 154px;
}
#graph_manches{
	width: 100%;
	display:flex;
	align-items: center;
	justify-content: space-between;
}

.icManche {
	width: 110px;
	height: 112px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 42px;
	font-family: var(--fontCartoon);
	color: #4f8ddb;
}

#icManche1{
	background-image: url(../../plugins/vp_battles/images/eclab_SVG/2_grap_manches_eclab1-02.svg);
	background-repeat: no-repeat;
	background-size: 0;
}
#icManche2{
	background-image: url(../../plugins/vp_battles/images/eclab_SVG/2_grap_manches_eclab2-02.svg);
	background-repeat: no-repeat;
	background-size: 0;
}
#icManche3{
	background-image: url(../../plugins/vp_battles/images/eclab_SVG/2_grap_manches_eclab3-02.svg);
	background-repeat: no-repeat;
	background-size: 0;
}

body.btlRound1 #icManche1, 
body.btlRound2 #icManche2,
body.btlRound3 #icManche3{
	background-size: cover;
}



/* style rond bleu foncé avec chiffre en bleu clair */
.rdManche {
	width: 54px;
	height: 54px;
	background-color: #1e3265;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	transition: background-color .7s ease-out;
	border: solid 3px var(--colBlueLight);
}
.nbManche {
	margin-top: -2px;
	margin-left: 2px;
}

body.btlRound1 #rdManche1.rdManche, 
body.btlRound2 #rdManche2.rdManche,
body.btlRound3 #rdManche3.rdManche{
	background-color: var(--colBlueLight);
		color:#FFF;
}


/* 
styles en fonction de la manche active :
1 : Manche passée
2 : Manche active
*/
/*#icManche1 .rdManche{
	background-color: var(--colBlueLight);
	color:#FFF;
}*/

/*body.btlRound2 #icManche2 .rdManche, 
body.btlRound3 #icManche2 .rdManche{
	background-color: var(--colBlueLight) !important;
	color:#FFF;
}

body.btlRound3 #icManche3 .rdManche{
	background-color: var(--colBlueLight);
	color:#FFF;
}*/




/*#########################################
# >>	vpProgress
#########################################*/
.vpProgress{
	width: 100%;
	background: #EEE;
	height: 5px;
}
.vpProgressContainer{
	border-radius: 20px;
	overflow: hidden;
}
.vpProgress .vpProgressBar{
	width: 0%;
	background: var(--colBlueLight);
	height: 100%;
}
.vpProgress .vpProgressNote {
	position: absolute;
	bottom: -17px;
	opacity: .7;
	color: var(--colBlueLight);
	text-align: center;
	width: 100%;
	font-size: 1.4rem;
	line-height: 1em;
}
#btlGameInterRound .vpProgress.xs {
	height: 3px;
	border: none;
	background: #EEE;
	left: 50%;
	transform: translate(-50%);
}
#btlGameInterRound .vpProgress.xs .vpProgressBar{
	height: 3px;
}
#progressWaitForScores .vpProgressNote{
	bottom: -35px;
}
#progressWaitForAllPlayersIn .vpProgressNote{
	bottom: -35px;
}



/*#########################################
# >>	PODIUM
#########################################*/

#podium_container{
	margin: auto;
}
#btlPodium{
	position: relative;
	width: 600px;
	height: 433px;
	margin:auto;
	margin-top:50px;
}

#btlPodium .eclab{
	display:none;
}

#img_podium{
	width:100%;
	position:absolute;
	top:116px;
	z-index:10;
}
#podium_vector{
	width:600px;
	height:289px;
	position:absolute;
	top:116px;
	z-index:10;
	background-color: #3b8de1;
	background-image: url(../../plugins/vp_battles/images/silhouettes_podium2.jpg);
	background-blend-mode:color-burn;
	background-opacity:.12;
	background-size: 65%;
	background-repeat: no-repeat;
	background-position: center 30px;

	-webkit-mask-image:url(../../plugins/vp_battles/images/podium.svg);
	-webkit-mask-size:cover;

}

/* Avatars and names */
.avatar_podium {
	width: 100px;
	position: absolute;
	z-index: 11;
	transform: scale(0.9);
	display:none;
}

.avatar_podium .avatar{
	outline: solid 5px var(--colBlueLight);
}
#avatar_winner_1 {
	top: 11px;
	left: 240px;
}
#avatar_winner_2 {
	top: 81px;
	left: 58px;
}
#avatar_winner_3 {
	top: 99px;
	left: 445px;
}
.winner_name {
	color: #FFF;
	position: absolute;
	text-align: center;
	z-index: 12;
	width: 167px;
	text-align: center;
	display:none;
}
.winner_name .user_name .name{
	color: #FFF;
	margin: 0px !important;
	font-weight: 800;
	max-width: 100%;
	overflow: hidden;
}
#name_winner_1 {
	top: 130px;
	left: 213px;
}
#name_winner_2{
	top:198px;
	left:23px;
}
#name_winner_3 {
    top: 216px;
    left: 409px;
}

.num_winner {
	background-color: #1a3169;
	border-radius: 50%;
	color: #FFF;
	font-family: var(--fontCartoon);
	font-size: 35px;
	width: 45px;
	height: 45px;
	text-align: center;
	position: absolute;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
}
.num_winner div{
	margin-top:-2px;
}
#num_winner_1 {
    top: 159px;
    left: 271px;
}
#num_winner_2 {
	top: 226px;
	left: 85px;
}
#num_winner_3 {
	top: 240px;
	left: 470px;
}

/* Eclab */
.eclab{
	width:200px;
	height:200px;
	position:absolute;
	z-index:8;
}
#eclab1 {
    top: -39px;
    left: 189px;
}
#eclab2 {
    top: 31px;
    left: 9px;
}
#eclab3 {
    top: 50px;
    left: 394px;
}
#eclab4 {
    top: 39px;
    left: 396px;
}
/* Battle infos */


#battle_infos{
	z-index: 12;
	position:absolute;
	top:293px;
	left:20px;
}
#btlPodium #battle_infos #thumb_battle {
	position: absolute;
	top: -6px;
	left: 20px;
	z-index: 14;
}


#btlPodium #battle_infos #thumb_battle .btlBattleDetailsGameThumb{
	margin-top: 0px;
}
#infos_text {
	position: absolute;
	top: 13px;
	left: 272px;
	color: #4f8ddb;
	font-size: 20px;
	z-index: 20;
	width: 300px;
}
#txt_niveau .content{
	font-weight: 800;
}
#txt_initie{
	font-size:16px;
	margin-top:10px;
}
#txt_date {
    position: absolute;
    top: 6px;
    left: 233px;
    z-index: 20;
    font-size: 14px;
}
.txtBlanc{
	color:#FFF;
}

#block_under_battle_infos{
	position:absolute;
	top:0px;
	left:0px;
	background-color: #1a3169;
	border-radius:20px;
	width:560px;
	height:90px;
	z-index:13;

}
#btlFinalHofBloc{
	display:none;
}
#btlFinalHof {
	position: relative;
	background: var(--colBlueLight);
	padding: 3px 5px 5px;
	border-radius: 20px;
	width: 600px;
	margin:auto;
	margin-top: 30px;
}
#btlFinalHof .flash {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: #FFF;
	border-radius: 20px;
}
#btlFinalHof .splash {
	position: absolute;
	top: -31px;
	left: -29px;
	width: 80px;
	z-index: -1;

}

#btlFinalHof .rank{
	color: var(--colBlueDark2);
	padding-left: 12px;
}
#btlFinalHof table {
	border-radius: 15px;
	overflow: hidden;
	margin-bottom: 0px;
}

#btnBackToBtlListInPodium{
	position: absolute;
	bottom: -18px;
	left: 50%;
	transform: translate(-50%);
	z-index: 100;
	display: none;
}



/*#########################################
# >>	QUIZ
#########################################*/
#map_frame_for_quiz_dark_mode{
	display:inline-block !important;
	border: none !important;
}


/*#########################################
# >>	SPECTATOR
#########################################*/

body.btl_spectator #tableScoresBlocOuter{
/*	height: 97%;*/
}

body.btl_spectator #btlIntroTopBloc h2{
	margin-top: 10px;
}


#btlGameInterRound #progressSpec {
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: 29px;
	z-index: 2;
	width: 60%;
}

#btlGameInterRound #progressSpec.vpProgress.xs{
	background: #3b8de133;
}
#btlGameInterRound #progressSpec.vpProgress .vpProgressBar{
	background: #3b8de133;
}
#btlGameInterRound #progressSpec.vpProgress .vpProgressNote{
	bottom: -17px;
}


#btlGameInterRound #progressForRest.vpProgress .vpProgressNote{
	bottom: -33px;
}

/*#########################################
# >>	BATTLE MISC
#########################################*/

#btlLogoInHeaderBloc, #btl_main_header{
	position: relative;
}
#betaIcon {
	position: absolute;
	top: 50px;
	left: 50%;
	transform: rotate(-12deg);
	padding: 2px 15px;
	background: #F00;
	color: #FFF;
	font-size: 2em;
	border: solid 4px #FFF;
	border-radius: 20px;
	transform: rotate(-12deg) translate(-57px, 10px);
}


body.battle_page .swal2-popup{
	background: var(--bgTranspDark);
	backdrop-filter: blur(12px);
	border-radius: 20px;
}
body.battle_page .swal2-popup .swal2-title{
	color: #FFF;
}
body.battle_page .swal2-content h2 {
	color: #FFF;
	font-size: 2em;
	font-family: var(--fontCartoon);
	letter-spacing: 0.05em;
	margin: 10px;
}

body.battle_page .swal2-content{
	font-family: var(--fontCartoon);
	color: #FFF;
}
body.battle_page .swal2-content .note{
	opacity: .2;
	color: #FFF;
	font-family: arial;
	font-size: 1em;
}

#buttonWatchBattle {
	transition: opacity .5s ease-in;
	position: absolute;
	bottom: -7px;
}

#buttonWatchBattle.failurePage {
	left: auto;
	right: 56px;
}

#buttonQuitBattle {
	transition: opacity .5s ease-in;
	position: absolute;
	bottom: -7px;
	left: 60px;
}

#btnBackToBtlList {
	position: absolute;
	bottom: -81px;
}

body.battle_page #comments_container{
	background: #00113366;
	margin-top: 180px;
}
body.battle_page #comments_container h2{
	font-family: var(--fontCartoon);
	text-shadow: none;
	font-size: 2em;
}
body.battle_page #comments_form_note{
	opacity: .7;
}
body.battle_page #form_comment textarea{
	background: #FFFFFF77;
	color: #FFF;
}



/*#########################################
# >>	ELEMENTS FROM OLIVIER
#########################################*/

#buttonStartInBattleCountDown {
	position: absolute;
	top: -8px;
	right: -5px;
	background-color: #8c4700;
	color: #ffe036;
	width: 27px;
	height: 27px;
	font-weight: bolder;
	border-radius: 30px;
	font-size: 15px;
	border: solid #ffe036 2px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 1px;
	padding-top: 1px;
	display: none;
}

#buttonStartInBattleCountDown::before {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    top: -22%;
    left: -20%;
    background-image: conic-gradient(rgba(255, 224, 54, 0), rgba(255, 224, 54, .3));
    animation: chrono_spin 1s linear infinite;
}
#buttonStartInBattleCountDown.without_before::before{
    content:"";
}
#buttonStartInBattleCountDown.disabled{
	color: rgb(209, 221, 235);
	background-color: rgb(179, 191, 204); 
	border-color: rgb(209, 221, 235); 
}



#chrono {
    position: absolute;
    top: -17px;
    left: 28px;
    width: 66px;
    height: 155px;
    z-index: 15;
    transform: rotate(-45deg);
}
#chrono img{
    width:100%;
}
#aiguille {
    position: absolute;
    /* pour width 70px :
    top: 22px;
    left: 34px;
  
    /* pour width 66px :*/
    top: 21px;
    left: 33px;
  
    transform-origin: bottom;
    transform: rotate(0);
    width: 1px;
    height: 12px;
    border-radius: 30px 30px 10px 10px;
    background-color: #3b8de1;
    opacity: .8;
    -webkit-animation: chrono_spin 1s linear infinite;
    -moz-animation: chrono_spin 1s linear infinite;
    animation: chrono_spin 1s linear infinite;
}
#aiguille_2 {
    position: absolute;
    /* pour width 70px
    top: 18px;
    left: 34px;

    /* pour width 66px*/
    top: 16px;
    left: 32px;

    transform-origin: bottom;
    transform: rotate(0);
    width: 2px;
    height: 17px;
    border-radius: 30px 30px 10px 10px;
    background-color: #3b8de1;

   /* -webkit-animation:chrono_spin 10s linear infinite;
    -moz-animation:chrono_spin 10s linear infinite;*/
    animation:chrono_spin 30s steps(30,end)  infinite;

}
 @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes chrono_spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 

/*#########################################
# >>	TRANSITIONS
#########################################*/

#trans_to_game {
	pointer-events: none;
	position: absolute;
	top: 66px;
	left: 173px;
	border-radius: 20px;
	z-index: 110;
	width: 825px;
	height: 521px;
/*	background: aliceblue;*/
}

#trans_to_game_gif{
	pointer-events: none;
	width:100%;
	height: 100%;
	border-radius: 20px;
	display: none;
}


#smoke_under_podium {
	pointer-events: none;
	position: absolute;
	top: 262px;
	left: -86px;
	/*border:solid #FF0;*/
	z-index: 30;
	width: 748px;
	height: 202px;
}
#smoke_under_podium_gif{
	pointer-events: none;
	width:100%;
	height:100%;
	display:none;
}

#smoke_on_avatars_gif{
	pointer-events: none;
	position: absolute;
	top: -61px;
	left: 158px;
	width: 270px;
	height: 270px;
	z-index: 40;
	opacity: 1;
}

#smoke_ring_gif{

	position: absolute;
	top: -30px;
	left: -40px;
	width: 670px;
	height: 390px;
	z-index: 40;
	opacity: 1;
	display: none;
}


#smoke_explos_1 {
	pointer-events: none;
	position: absolute;
	top: 32px;
	left: -52px;
	width: 450px;
	height: 450px;
	z-index: 102;
	display: none; 
}

#smoke_explos_1 img{
	pointer-events: none;
	width:100%;
	height:100%;
}

/*#########################################
# >>	Particles
#########################################*/
#particle-container{
	position: absolute;
	width: 90vw;
	height: 100vh;
	overflow: hidden;
	pointer-events: none;
	top: 0px;
	left: 0px;
	z-index: 1;
}
.particle{
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: #427ecf;
	border-radius: 50%;
	pointer-events: none;
}

/*#########################################
# >>	soundCtrl
#########################################*/
#soundCtrlContainer {
	position: absolute;
	bottom: 29px;
	left: 183px;
	user-select: none;
	z-index: 20;
}
#soundCtrlContainer .icoBtn{
	margin-left: 10px;
}
#soundCtrlContainer .icoBtn::first-child{
	margin-left: 0px;
}
#soundCtrlContainer .mute{
	opacity: .5
}

/* Btl List page */
body.battle_list #soundCtrlContainer{ 
	position: absolute;
	bottom: auto; 
	left: auto; 
	right: 5px;
	top: 34px;
	user-select: none;
	z-index: 20;
}







/*#########################################
# >>	DEV
#########################################*/
#btnDevTest{
	transition: none;
	font-size: 30px;
}


/*#########################################
# >>		MEDIA QUERIES

			FOR MOBILES, see css/vpMain_mobile_005.css

#########################################*/




@media (max-width: 992px) {
	/*sm*/

	#btlGameBg {
		margin-left: -27px;
	}

	#btlGameOuter {
		left: -16px;
	}
	#btlFakeGameOuter {
		left: 42px;
	}
	#trans_to_game{
		left: 43px;
	}

	.btlGameInterRound {
		left: calc(50% + 79px);
	}
	#btnPopupBtlUserStats b {
		font-size: 1.5em;
		line-height: 0.9em;
	}
	#popupBtlUserStats{
		background: #1e5d9e;
		top: 70%;
		width: 96%;
		margin-left: 2%;
	}

	#popupBtlExplanations {
		z-index: 100;
		top: 70%;
		width: 96%;
		right: 2%;
	}
	
}

@media (min-width: 992px) and (max-width: 1199px) {
	/*md*/
	

	#btlGameBg {
		margin-left: -17px;
	}

	#btlGameOuter {
		left: 14px;
	}
	#btlFakeGameOuter {
		left: 72px;
	}
	#trans_to_game{
		left: 73px;
	}


	#popupBtlUserStats{
		background: #1e5d9e;
	}

	

}

@media (min-width: 1200px) {
	/*lg*/
	

	#btlGameOuter {
		left: 115px;
	}
	#btlFakeGameOuter {
		left: 173px;
	}
	#trans_to_game{
		left: 173px;
	}

}


@media (min-width: 1500px) {
	/*xxl*/


}



@media (min-width: 768px) {
	/* Bigger than iphone */



}