/* VAR */
/*-----------------------------------*/
:root{

	--colYellow: #fed758;
	--colYellowLight: #faecaf;
	--colOrange : #FEB600;
	--colRed: #BC3B20;
	--colBlueLight : #3b8de1;
	--colBlueDark : #1e5d9e;
	--colBlueDark2 : #1b306a; /*Battles*/
	--colGreen: #08C31E;
	--colGreenAlt: #96c92e;
	--colGreenLight: #93F79F;
	--colGreenLightAlt2: #A7FF85;
	--colGreenDark: #1E7028;

	--colDark: #0b1234; /*#292a2d;*/
	--colBgTranspDark: #00225577;

	--colBlueLightTransp : #3b8de133;


	--colBloc: #5b7691;
	--colBlocBg: #eef2f7;

	--colPremiumBg: #fed758;
/*	--colPremiumBg: var(--bgGradYellow);*/
	
	--colPremiumDark: #500;
	--colPremium: #BC3B20;


	--colList01 : #ADD413;
	--colList02 : #76BFA6;
	--colList03 : #FF4D34;
	--colList04 : #F2D355;
	--colList05 : #E48830;
	--colList06 : #00876c;
	--colList07 : #DA64C1;
	--colList08 : #FEB600;
	--colList09 : #6C2627;
	--colList10 : #55A917;
	--colList11 : #F02D99;
	--colList12 : #804637;
	--colList13 : #7937A6;
	--colList14 : #FBC1CF;
	--colList15 : #9FF88C;
	--colList16 : #77E4BD;
	--colList17 : #D22C2F;
	--colList18 : #6B7F57;

	--bgGradYellow : radial-gradient(
						   	at top left,
						   	#FFFF4088,
						   	#FFC04000 70%, 
						   	#ffaf1e
						   ), var(--colYellow);

	--bgTranspDark : rgba(11, 10, 38, .6);
	--bgTranspDarkPlus : rgba(11, 10, 38, .8);


	--shadow3D: #2d234266 0 2px 4px,#2d23424d 0 7px 13px -3px,#3a416f80 0 -3px 0 inset;
	--shadow3DPremium: #6D234266 0 2px 4px,#6D23424d 0 7px 13px -3px,#6D416f80 0 -3px 0 inset;
	
	
	--shadowBlueSmall : 0px 5px 10px rgba(24, 55, 94, 0.4);
	--shadowBlueMed : 0px 0px 20px rgb(24 55 94);
	--shadowBlueBig : 0px 0px 41px rgb(24 55 94);
	--shadowBlueVeryBig : 0px 0px 100px rgb(24 55 94);
	--shadowBlueVeryBig3D : 0px 60px 100px rgb(10 20 54 / 100%);

	--shadowBlackMed : 0px 0px 20px rgb(0 0 0);
	--shadowBlackBig : 0px 0px 40px rgb(0 0 0);
	--shadowBlackVeryBig : 0px 40px 100px rgba(0, 0, 0, .4);

	--shadowBlackVeryBig3D : 0px 60px 100px rgb(0 0 0 / 90%);

	--shadowImgTextSmall: 0px 5px 10px rgba(24, 55, 94, 0.4);

	--shadowLightForDarkBloc: 0px 0px 30px #3361b533;

	--colBgDark : var(--colBlueLight);


/*	--fontCartoon : 'Boogaloo', cursive;*/
/*	--fontCartoon : 'Luckiest Guy', Helvetica;*/
	--fontCartoon : 'Comics Deluxe', Helvetica;
}


/* ----------------------------------------- 
FONT
*/
html{ -webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}

body{line-height:initial; font-size: 15px; color:var(--colBlueDark);}

/*@font-face {
	font-family: Blogger_Sans;
	src: url('fonts/Blogger Sans.otf');
	text-rendering: optimizeLegibility;
}*/

@font-face {
	font-family: Blogger_Sans_Light;
	src: url('fonts/Blogger_Sans-Light.otf');
	text-rendering: optimizeLegibility;
}

@font-face {
	font-family: Comics Deluxe;
	src: url('fonts/Comics-Deluxe.ttf');
	text-rendering: optimizeLegibility;
}

/*@font-face {
	font-family: font_extra_light;
	src: url('fonts/Oswald-ExtraLight.ttf');
	text-rendering: optimizeLegibility;
}*/


@font-face {
	font-family: font_light;
	src: url('fonts/Oswald-Light.ttf');
	text-rendering: optimizeLegibility;
}

@font-face {
	font-family: font_bold;
	src: url('fonts/Oswald-Bold.ttf');
	text-rendering: optimizeLegibility;
}


/*
@font-face {
	font-family: Roboto_Light;
	src: url('fonts/Roboto-Light.woff');
	text-rendering: optimizeLegibility;
}
*/
/*@font-face {
	font-family: Roboto Condensed;
	src: url('fonts/RobotoCondensed-Regular.woff');
	text-rendering: optimizeLegibility;
}*/
/*
@font-face {
	font-family: Roboto_Thin;
	src: url('fonts/Roboto-Thin.woff');
	text-rendering: optimizeLegibility;
}*/

small, h2 small{
	font-size: 0.5em;
	color: inherit;
}

.separator{clear:both;}

.long_text{font-size:0.8em;}

.text_light, .textLight{
	font-weight: 200;
}
.text_light{
	font-family: font_light;
}
.text_col_light{
	color: var(--colBlueLight);
}

ul{list-style: none; padding:0px;}
ul.norm{
    padding-inline-start: 40px;
    list-style-type: disc;
}

.big_line_height{line-height:1.6em;}


p.baseline{
	font-size: 1.3em;
	letter-spacing: 0.03em;
}

p.baseline.page_baseline {
	margin-top: -40px !important;
	margin-bottom: 50px !important;
}


p.baseline_alt{
	font-size: 3em;
	font-family: 'Brush Script MT';
	color: #fdd657 !important;
}

p.baseline_alt.page_baseline_alt {
	margin-top: -40px !important;
	margin-bottom: 70px !important;
}


ul.factory{
	list-style: disc;
	padding-left: 20px;
	margin:0px;
}



.text_big{
	
	font-family: font_bold;
	font-weight: 700;
	color: #FFF;
	letter-spacing: -0.02em;
	text-align: center;
	font-size: 3em;
	margin-bottom: 40px;
	margin-top: 40px;
	text-shadow: 3px 2px 0px rgba(255,255,255, .2);
}
.text_big.small{
	font-size: 2em;
	line-height: 1.2em;
}
.text_big.big{
	font-size: 4em;
}

.text_upper{
	text-transform: uppercase;
}

.text_premium_cursive{
	font-family: 'Brush Script MT';
	color: #fdd657 !important;
	text-transform: capitalize;
}
.text_premium_cursive.big{
	font-size:3em;
}


/* To vertical align text we need a dom in display table and, in it, another dom in display: table-cell. The second one should be the text/html container */
.v_align_outer{display: table; width: 100%; height: 100%;}
.v_align_inner{vertical-align: middle; display: table-cell; text-align: center;}

/* table vert align */
.table tbody>tr>td.vert-align{
    vertical-align: middle;
}


em{
	font-style: normal;
	font-weight: 800;
	font-size:2em;
}

/* <pre> don't wrap by default */
/*-----------------------------------*/
pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* hide the little arrows in the input type'number' */
/*-----------------------------------*/
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
    -moz-appearance:textfield;
}


/* input */
/*-----------------------------------*/
input.vp_input{
	background: #FFF;
	border-radius: 10px;
	font-size : 1em;
	color:#999;
	border:none;
	padding:2px 8px;
	max-width: 100%;
}

input.vp_input::placeholder{
	color:#CCC;
}
input.text_light::placeholder{
	font-family: font_light;
}

/* To crush the repute header font */
/*-----------------------------------*/
h1, h2, h3, h4, h5, h6{font-family: Helvetica, sans-serif;color:var(--colBlueDark);}
h1{font-weight: bold; letter-spacing: -0.04em;}
h2{
	font-weight: bold; 
	color:var(--colBlueLight);
	letter-spacing: -0.05em;
}
h3{color:#237edd;}
h3.baseline{font-weight: lighter;font-size:1em !important;  margin-top:-14px !important;letter-spacing: -0.05em;}

/* To crush the repute lead font */
/*-----------------------------------*/
.lead{font-size: 18px;
color: #333;}


/*#########################################
# >>	flex
#########################################*/
.flex{
	display:flex;
	justify-content: center;
	align-items: center;
}
.flex_col{
	flex-direction: column;
}
.flex_sb{
	justify-content: space-between;
}
.flex_sa{
	justify-content: space-around;
}
.flex_break{
	flex-basis: 100%;
	height: 0;
}

.flex_start{
	display:flex;
	justify-content: flex-start;
}
.flex_end{
	display:flex;
	justify-content: flex-end;
}
.flex_center{
	display:flex;
	justify-content: center;
	align-items: center;
}


/* FROM JGFR V4 */


/* ----------------------------------------- 
BLOCS
*/
.bloc{ 
	background: var(--colBlocBg); 
	border:none; 
	color: var(--colBloc);
	padding:20px; 
	margin:0px 0px 20px 0px;
	border-radius: 2px;
}
.bloc h2{
	color: var(--colBloc);
	text-align:center; 
	border-bottom:none; 
	margin-bottom:20px;
	background:none;
	padding-left:0px;
}
.bloc h3{
	color: var(--colBloc);
	font-weight: 600;
	font-size:1.3em; 
	margin:0px; 
	margin-top:10px;
}

.bloc_md{
	width: 500px;
}
.bloc_center{
	margin-left:auto;
	margin-right:auto;
}

.bloc_gold, .gold{ background:#fed758 !important; color:#BC3B20 !important;}
.bloc_gold h2, .bloc_gold i.fa, .bloc_gold h3{color:#BC3B20}
a.gold:hover{background:#FEE89B !important;}

.gold_inverted{
	background: #BC3B20 !important;
	color: #fed758 !important;
}
.gold_title{
	border-radius: 5px;
	padding: 5px 10px;
}

.bloc_green{ background: #6DB83E; color:#336D0D;}
.bloc_green h2{color:#3A7D0F;}

.bloc_white{border: #e2e9f3 solid 3px; background:#ffffff;}
.bloc .bloc_white{margin-bottom:0px;}

.bloc_grey{background: #F2F2F2; color: #666;}
.bloc_purple{background: #dccde8; color: #511E77;}
.bloc_purple h2, .bloc_purple h3{color: #511E77;}


/* dark_bloc */
/*-----------------------------------*/
.dark_bloc{
	background: var(--colBgDark);
	color:#FFF;
}
.dark_bloc_wo_bg{
	background: none;
}
.dark_bloc h1, .dark_bloc h2, .dark_bloc h3, .dark_bloc h4, .dark_bloc p{
	color:#FFF;
}

.dark_bloc_important{
	background: var(--colBgDark) !important;
	color:#FFF !important;
}

.dark_bloc_border{
	border:solid 2px #FFF;
}

.dark_bloc .bloc_bg_ico{
	color: rgba(255, 255, 255, 0.07);
	font-size: 12em;
	transform: rotate(35deg);
	left: -10px;
	top: -120px;
	z-index: 1;
	mix-blend-mode: plus-lighter;
}

.dark_bloc_gradient{
	background: rgb(5,90,215);
	background: linear-gradient(336deg, rgba(5,90,215,1) 0%, rgba(58,140,225,1) 100%);
}

.dark_bloc a{
	/*color:var(--colYellow);*/
}
.dark_bloc a:hover{
	/*color:var(--colBlueLight);*/
}

.dark_bloc .table_scores{
	color: var(--colBlueDark);
}


/* IMG */
img.img_in_text{
	box-shadow: var(--shadowImgTextSmall);
}

/*#########################################
# >>	BG ICON
#########################################*/
/* Usage :
<div id='' class='bloc_bg_outer'>
	<i class='fa fa-lock bloc_bg_ico'></i>
	<div class='bloc_bg_inner'>
		blah blah
	</div>
</div>
*/
i.bloc_bg_ico{position: absolute;
	top: -70px;
	left: -70px;
	font-size: 16em;}
i.bloc_bg_ico.md{	position: absolute;
	top: -70px;
	left: -70px;
	font-size: 10em;}
i.bloc_bg_ico.xs{
	top: -70px;
	left: -70px;
	font-size: 5em;}
.bloc_bg_outer{position: relative; overflow: hidden; }

.bloc_bg_inner{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
}

.bloc_dark{background: var(--colBlueLight); color: #FFF !important;}
.bloc_dark .ico_btn{color:#FFF;}


.bloc_gold .bloc_bg_ico{color: #FFB710 !important; font-size: 60em; top: -50px;}


/* Swal */
.swal2-container{z-index: 1300 !important;}
.swal2-popup{font-size: inherit !important;}



/* vpCountdown */
/*-----------------------------------*/
.countdown_row{
	display: flex;
	justify-content: space-between;
}

.countdown_row .countdown_section{
	margin:0px 20px;
}

.countdown_num{
	font-size: 2em;
}
.countdown_leg sup{
	font-size: 1em;
}

#countdown_bloc {
	color: #FFF;
}

#countdownInImgQuestion .countdown_row{
	font-size: 2em;
}



/* DEBUG */
/*-----------------------------------*/
#debug{position: fixed; background: #000; color:#FFF; width:auto; max-height: 500px; overflow-y:auto; z-index: 1000; font-size: 1em; opacity: 0.5; top:30px;}




/*#########################################
# >>	popup
#########################################*/
.vpPopup {
	background: #FFF;
	position: fixed;
	left: 50%;
	transform: translate(-50%);
	box-shadow: var(--shadowBlueSmall);
	top: 30px;
	z-index: 2000;
	width: auto;
	height: auto;

}
.vpPopup .ico_close_popup{
	color: #CCC;
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 1em;
	z-index:10;
}

.vpPopup .popupContent {
	overflow-y: auto;
	padding: 5px;
	margin-top: 15px;
	min-width: 160px; /* to be equal to the bootstrap's .dropdown-menu width. */
}



/*#########################################
# >>	dark_page
#########################################*/
body.dark_page #content  {
	/*font-family: 'Roboto', sans-serif;*/
	width: 100%;
	
	background: linear-gradient(#000 0%,#111139),url(../images/stories/home2022/image_sat.jpg);
	background-position: bottom, 130% -2%;
	background-repeat: no-repeat;
	background-attachment: fixed, scroll;
	background-size: 100%,90%;
	background-blend-mode: screen;
	padding-bottom: 60px;
	margin-bottom: 40px;

	color : var(--colBlueLight);
}

/*body.dark_page.gradient_only #content{*/
body.dark_page #content{
	background: rgb(19,33,81);
	background: linear-gradient(90deg, rgba(19,33,81,1) 0%, rgba(39,131,187,1) 100%);
	
}


body.dark_page .wrapper{
	background: #0b0b28;
}

body.dark_page .page-header{
	background:none;
}

body.dark_page .note{
	color: var(--colBlueLight);
}

body.dark_page p.baseline.page_baseline{
	color: #FFF;
}

body.dark_page .dark_page_content {
	
	background: var(--bgTranspDark);
	border-radius: 50px;
	padding: 20px;
	padding-bottom: 40px
}



body.dark_page .table_scores{
	background: #FFF;
}

body.dark_page h2.page_title,
body.dark_page h1,
body.dark_page h2 {
	/*text-transform: capitalize;*/
	font-family: font_bold;
	font-weight: 700;
	color: #FFF;
	letter-spacing: -0.02em;
	text-align: center;
	font-size: 4em;
	margin-bottom: 40px;
	margin-top: 40px;
	text-shadow: 3px 2px 0px rgba(255,255,255, .2);
}
body.dark_page h1 {
	margin-top:70px;
	text-transform: uppercase;
}

body.dark_page h2 {
	font-size: 3em;
}

/* ico_btn */
/*-----------------------------------*/
body.dark_page a .fa.fa_btn{
	color:var(--colBlueLight);
}
body.dark_page a .fa.fa_btn.alt_btn, body.dark_page .ico_btn{
	color:#fff;
}
body.dark_page a .fa.fa_btn.alt_btn:hover, body.dark_page  .ico_btn:hover{
	color:var(--colBlueLight);
}

/* comments */
/*-----------------------------------*/
body.dark_page #comments_container {
	/*background: rgba(165, 215, 255, .6);*/
	border-radius: 10px;
	margin-top:60px;
}
body.dark_page #comments_container .login_link{
	color: #FFF;
}

body.dark_page #comments_container .comment_unit .timeago{
	color:#FFF;
}


/* Game outer */
/*-----------------------------------*/

body.dark_page .dark_page_content #game_outer{
	border-radius:20px;
}



/* titres ------------ bla bla ------------ */
.title2_cont{
	width: 80%;
    display: flex;
    justify-content: center;
    position: relative;
    margin: 20px 0px;
    max-width: 900px;
    color: #d2d9fc;
}


body.dark_page .title2_cont, body.dark_page .title2_text {
	color:#FFF;
}




.title2_text{
	margin: 20px 0px;  
    font-size: 2em;
    font-style: italic;
    text-align: center;
    font-weight: 700;
}

.bar_around_title{
	height: 30%;
	min-height: 20px;
    border-bottom: solid 1px #d2d9fc;
    margin: 20px;
    flex-grow: 1;
}

body.dark_page .bar_around_title{
	border-bottom-color: #FFF;
}


/*-------------------------------------*:
/* PREMIUM */

#bloc_premium_push li{list-style: disc; font-weight: bold; margin-left:10px;}
#premium_duration_ok{ -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px; text-align:center; font-size:1.2em;
 }
#premium_duration_bad{-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
background:#FCE7D1; border:solid 2px #F3B18B;color:#C30; font-size:1.2em; width: 59%;
margin: auto;
padding: 10px;}

.ban_premium_bloc{margin:10px auto; text-align:center;}

.premium_ico_link{color:#FEE145;}

.premium_history_list{margin:5px; padding:10px; 
			background:#fff; 
			-webkit-border-radius: 6px;-moz-border-radius: 6px; border-radius: 6px; 
			text-align:left;
			max-height: 300px; overflow:auto;
		}

#game_premium_only_msg_for_premium_users_bloc, #game_premium_only_placeholder{text-align: center;}

#game_premium_only_countdown{width: 480px; margin: auto; height: 40px; margin-top: 30px;}
#game_premium_only_countdown .countdown_amount{font-size:6em !important;}




/* old jquery ui */
/*-----------------------------------*/
.ui-dialog{background:#fff; padding:20px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); z-index: 900;}

.ui-dialog .ui-button[title="Close"] .ui-button-text {
    display:none;
}
/* 161010 : For the moment I don't load the .css of jqueryUI. I add only this rule. */
.ui-dialog-buttonset{text-align: right;}


/* display */
/*-----------------------------------*/
.display_none{display:none !important;}

/* OPACITY */
/*-----------------------------------*/
.opacity-0{ opacity:0.0; filter:alpha(opacity=0);}
.opacity-1{ opacity:0.1; filter:alpha(opacity=10);}
.opacity-2{ opacity:0.2; filter:alpha(opacity=20);}
.opacity-3{ opacity:0.3; filter:alpha(opacity=30);}
.opacity-4{ opacity:0.4; filter:alpha(opacity=40);}
.opacity-5{ opacity:0.5; filter:alpha(opacity=50);}
.opacity-6{ opacity:0.6; filter:alpha(opacity=60);}
.opacity-7{ opacity:0.7; filter:alpha(opacity=70);}
.opacity-8{ opacity:0.8; filter:alpha(opacity=80);}
.opacity-9{ opacity:0.9; filter:alpha(opacity=90);}
.opacity-10{ opacity:1; filter:alpha(opacity=100);}

/* For transition (don't work) */
/*-----------------------------------*/
.trans_n{ transform:translate(0px -30px);}
.trans_s{ transform:translate(0px 30px);}
.trans_e{ transform:translate(30px 0px);}
.trans_w{ transform:translate(-30px 0px);}

.margin_n{ margin-top:-30px;}
.margin_s{ margin-top:30px;}
.margin_e{ margin-left:30px;}
.margin_w{ margin-left:-30px;}

.move_top_n{ top:-30px;}
.move_top_s{ top:30px;}
.move_bottom_n{ bottom:-30px;}
.move_bottom_s{ bottom:30px;}
.move_e{ left:30px;}
.move_w{ left:-30px;}

/* big, small */
/*-----------------------------------*/
.small{font-size: 0.8em;}
.small1{font-size: 0.8em;}
.small2{font-size: 0.6em;}
.small3{font-size: 0.4em;}
.small4{font-size: 0.2em;}
.small5{font-size: 0.1em;}
.small6{font-size: 0.05em;}

.small_important{font-size: 0.8em !important;}


.big{font-size: 1.2em;}
.big1{font-size: 1.2em;}
.big2{font-size: 1.4em;}
.big3{font-size: 1.8em;}
.big4{font-size: 2em;}
.big5{font-size: 3em;}
.big6{font-size: 5em;}
.big7{font-size: 7em;}
.big8{font-size: 8em;}
.big9{font-size: 9em;}
.big10{font-size: 10em;}

.bold{font-weight: bold;}

/* Margin */
/*-----------------------------------*/
.margin-top-00 { margin-top: 0em; }
.margin-top-02 { margin-top: 0.2em; }
.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }
.margin-top-50 { margin-top: 5.0em; }

.margin-top-m05 { margin-top: -0.5em; }
.margin-top-m10 { margin-top: -1.0em; }
.margin-top-m15 { margin-top: -1.5em; }
.margin-top-m20 { margin-top: -2.0em; }
.margin-top-m25 { margin-top: -2.5em; }
.margin-top-m30 { margin-top: -3.0em; }
.margin-top-m50 { margin-top: -5.0em; }

.margin-bottom-00 { margin-bottom: 0em; }
.margin-bottom-02 { margin-bottom: 0.2em; }
.margin-bottom-05 { margin-bottom: 0.5em; }
.margin-bottom-10 { margin-bottom: 1.0em; }
.margin-bottom-15 { margin-bottom: 1.5em; }
.margin-bottom-20 { margin-bottom: 2.0em; }
.margin-bottom-25 { margin-bottom: 2.5em; }
.margin-bottom-30 { margin-bottom: 3.0em; }
.margin-bottom-50 { margin-bottom: 5.0em; }


.big_margin_vert{margin-top:40px; margin-bottom:40px;}

/* padding */
/*-----------------------------------*/
.padding-02 { padding: 0.2em; }
.padding-05 { padding: 0.5em; }
.padding-10 { padding: 1.0em; }
.padding-15 { padding: 1.5em; }
.padding-20 { padding: 2.0em; }
.padding-25 { padding: 2.5em; }
.padding-30 { padding: 3.0em; }
.padding-50 { padding: 5.0em; }

/* Text in <i class='fa */
/*-----------------------------------*/
i.fa .text{font-family: Blogger_Sans_Light;}


/* combo */
/*-----------------------------------*/
option.default_option{color:#999;}
option {font-size: 1.2em; padding: 2px; color:#666;}
option:nth-child(even) {background: #EEE}
option:hover{}
select.small, input.small{height: 25px;}
select.vertical-center{margin-top: -4px;}

/* Button */
/*-----------------------------------*/
.vpbtn{cursor: pointer; }
.vpbtn.sm{font-size: 0.9em;}
.vpbtn:hover{text-decoration: underline;}
.btn-xs{padding: 0px 8px; padding-top: 2px;}
.pointer{cursor: pointer;}
.icoBtn, .ico_btn{cursor: pointer; color:#CCC;}
.icoBtn:hover, .ico_btn:hover{color:var(--colBlueLight);}
.icoBtnLight, .ico_btn_light{cursor: pointer; color:#00000044;}
.icoBtnLight:hover, .ico_btn_light:hover{cursor: pointer; color:#00000066;}
.btn{-webkit-border-radius: 20px; border-radius: 20px; white-space: normal;}
.btn-primary{background: var(--colBlueLight); border:none;}
.vpbtn.md{
	padding: 5px 20px;
	border-radius: 20px;
	font-weight: bold;
	text-decoration: none;
	transition: .3s;
	font-size: 1.6rem;
}
.vpbtn2{cursor: pointer; border-radius: 20px;}
.vpbtn2:hover{text-decoration: none;}
.vpbtn_primary{
	background-color: var(--colBlueLight);
	color: #FFF;
}

.vpbtn_primary:hover{
	background-color: #FFF;
	color: var(--colBlueLight);
}

.input-group.input_group_rounded .form-control:first-child{-webkit-border-radius:20px 0 0 20px; border-radius: 20px 0 0 20px ;}
.input-group.input_group_rounded .input-group-btn .btn{-webkit-border-radius:0 20px 20px 0 !important; border-radius: 0 20px 20px 0 !important;}

.btn_line{cursor: pointer; padding:2px;}
.btn_line:hover{background: #A4DCC6;}


/* bootstrap.css derogation */
/*-----------------------------------*/
.page-content{margin: 0px;}
.text-success{color:#4ED22C;}
.text-danger{color:#CE181A;}
.alert.alert_xs{
	padding: 5px 10px;
}
.alert.alert-warning{
	/*background: #FFF1AF; */
	background-color: #FBAB7E;
	background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
	color: #614427; /*#FFF; /*#E47C19; */
	border:none; /*#FFE275;*/
	/*border-left: solid 7px #E47C19;*/
}
.alert.alert-success {

    border: none; /*#C6ED7F;*/
    /*border-left: solid 7px #308D00;*/
/*    text-shadow: 1px 2px 5px rgb(20 150 20 / 40%);*/
}
.alert.alert-danger {
    /*color: #FFF; /*#e0302c;*/
/*    background-color: #ffddcc;*/
    
   /* background-color: #ffcb0b;
    /*background-image: linear-gradient(62deg, #ff8e9e 0%, #ffbd9e 100%);*/
/*    background-image: linear-gradient(221deg, #fa812d 0%, #ff340f 74%);*/

    border: none;
    font-weight: 700;
    /*border-radius: 20px;*/
    /*border-left: solid 7px #e0302c;*/

}
.alert{
	/* Big problem with static z-index...*/
/*	position: relative;*/
}
/*.alert::after {
	content: '';
	position: absolute;
	top: 5px;
	right: 5px;
	width: 10px;
	height: 10px;
	background-color: white;
	border-radius: 50%;
}*/
.alert.alert-danger-alt{
	background: #da290c;
	color:var(--colYellow);
}

.btn-warning-alt{
	color: #da290c;
	background: #fed758;
}

.alert.big{
	padding: 30px;
	font-size: 2em;
	border-radius: 10px;
}

.label-success{background: #87E140;}
.label-as-badge{-webkit-border-radius: 10px; border-radius: 10px; }

.label-default{background-color: #CCC;}

abbr[title]{border-bottom: none;}

.badge.badge_red{background: #FF8933; color:#FFF;}

a { color: var(--colBlueLight);} /*#0368e4;*/
a:hover { color: #FFCA29;}

em.info, div.info{background: #4CC9EE; color:#fff; padding:3px; font-weight: bold;}

.full-width-section{background: none;}

input[type=date], input[type=time], input[type=datetime-local], input[type=month] {
	line-height: 14px;
}

/* Tooltips */
/*-----------------------------------*/

.tooltip-inner {
    max-width: 250px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 4px;
    font-weight: bold;
}


/* table */
/*-----------------------------------*/
table.thead_sticky thead{
	position: sticky;
	top: 0;
	background: #FFF;
}

.vp_table_array h3{
	margin: 0px;
	font-size: 1.4em;
	color: #333;
	font-weight: bold;
}

/* jquery iu derogation */
/*-----------------------------------*/
.ui-autocomplete.ui-front.ui-menu{max-height: 300px; overflow-y: auto;}

/* Because tinyMCE translate <i by <em (copy of themes/repute/css/main.css line 4384) */
.testimonial-fancy em.fa {
  position: absolute;
  top: -12px;
  font-size: 3em;
  color: #406da4;
  z-index: 1;
}
.testimonial-body p{font-size: 1.1em; color:#333;}
.testimonial-fancy i, .testimonial-fancy em.fa{font-size: 2em; top:0px}
.testimonial-bubble{padding: 30px; background:#EBEBFF;}
.testimonial-bubble:after{border-color:#EBEBFF transparent;}


/* for_fancy-style : For element to be close to the fancy styling */
/*-----------------------------------*/
label.for_fancy-style{font-size: 13px;font-family: "Open Sans",sans-serif;}


/* countdown */
/*-----------------------------------*/
.countdown_amount{font-size: 2.5em !important;}

/* main (the part after the header) */
/*-----------------------------------*/
#main{}/*margin-top: 75px;*/


/* page-content */
/*-----------------------------------*/
.page-content{position: relative;padding-top: 40px;}
.page-content p:first-child{ margin: 0px;}

/* GAME PAGE SPECIAL */
/*-----------------------------------*/
.game_page #main_navbar{ }
.game_page #main_navbar .topbar {}
.game_page img#imgLogo{top:5px !important;}
.game_page .page-content{margin-top: 0px;}


/* top page button */
/*-----------------------------------*/
#top_page_bloc{display:none; font-family:"Arial Black", Gadget, sans-serif;}
a#top_page_button{display:block; 
	position:fixed;
	z-index:500;
	right: 1%;
	bottom:auto;
	top:0px;
	padding: 2px 13px;
	border-radius: 0 0 6px 6px ;
 	-webkit-border-radius: 0 0 6px 6px ;
 	-moz-border-radius: 0 0 6px 6px ;
 }


/* Waiter */
/*-----------------------------------*/
.waiter_container{text-align: center;}
.waiter{color: #CCC;}

/* The button_for_display_navbar is controled by vpSite.js */
#button_for_display_navbar{font-size: 1.5em;background: #FFF;color:var(--colBlueLight);
	border: none;
	float: right;
	margin-top: 6px;
	display:none;
	line-height: 0.7em;
	border-radius: 20px;
	width: 35px;
	padding: 0px;
	height: 35px;
}



.text-white-color,
 .text-white-color h1,
 .text-white-color h2,
 .text-white-color h3,
 .text-white-color .boxed-content > i
   {color: #fff;}

.page-header{
	background: url(../images/main/carte_bg_bandeauHP_tiny.png) no-repeat 100% 28% var(--colBlueLight); 
	padding: 0px; 
	border-bottom: none; 
	background-size: 307px 411px;
	border-bottom: solid 1px #00000022;
} /*#E3F7F7; <= for dev; #406DA4 <= for prod*/
h1{ color:#FFFFFF; margin-top:10px;margin-bottom: 5px;padding-top: 5px;}
h1.onWhite{background:var(--colBlueLight); padding:3px 20px;}
h2{}
.panel-heading h3{margin-top: 0px; margin-bottom: 0px;}
.game_page h1{margin: 2px 0px;}
.navbar-default{border-bottom: none;}
.navbar-collapse{margin-top: 15px;}

.vp_navbar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* for the desired line to be under the header */
a.anchor{margin-bottom:70px;display:block;}

/* ----------------------------------- -----------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
*/

/* BG */
/*-----------------------------------*/
.bg_purple{background:#cd7cc1;}
.bg_green{background:#a5c524;}
.bg_blue{background:var(--colBlueLight);}
.bg_orange{background:#ec8e33;}
.bg_white{background:#fff;}

.color_purple{color:#cd7cc1}
.color_green{color:#a5c524}
.color_blue{color:var(--colBlueLight)}
.color_orange{color:#ec8e33}
.color_red{color:#C52D22}
.color_yellow{color: #FEE145;}


a .fa.fa_btn{color:var(--colBlueLight);}
a .fa.fa_btn.alt_btn, .ico_btn{color:#7A7E7A;}
a .fa.fa_btn.alt_btn:hover,  .ico_btn:hover{color:var(--colBlueLight);}




#content{margin-top:0px;}

/* NAV BAR */
/*-----------------------------------*/
#main-nav{ }
.topbar{padding-top: 5px;margin-bottom: 0px;}
#main_navbar{font-size: 1em;-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 4px rgba(0,0,0,0.3);}
#main-nav .fa-angle-down{display: none;}



.navbar-header{margin-top: 3px; padding-bottom: 3px; float: none;}
.navbar-brand{margin:0px; height: auto;}

.navbar-brand.navbar-logo-bigger {padding: 0px;}
.navbar-brand.navbar-logo-bigger img{width: 180px; top:0px;}/* top:-30px;*/
@media (max-width: 800px) {
	.navbar-brand.navbar-logo-bigger img{width: 120px;}
	}
#main_navbar.shrink-active{top:-34px;}
#main_navbar.shrink-active .navbar-brand img {width:118px; }
#main_navbar .navbar-nav{float: right;}/* margin-right: 0px; Rule needed if navbar-fixed-top */
#main_navbar.shrink-active .navbar-nav{margin-left: 20px;}

#login_form_bloc {
}

#simple_notification_bloc{
	padding-left: 20px;
	flex-grow: 1;
}
#simple_notification_bloc_inner {
	float: left;
	margin: 0px;
}

#game_search_in_navbar_header{
	margin-right: 5px;
}
#game_search_in_navbar_header #form_game_search_bloc{
	max-width: 200px;
}
#game_search_in_navbar_header input{
	border-radius: 20px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
#game_search_in_navbar_header .input-group-addon{
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}
		


#main-nav #form_game_search_bloc{
	display:none;
}

/* MENU */
/*-----------------------------------*/
/*.navbar-nav{float:none;}
.navbar-nav > li{display: inline-block; float: none;}*/
.navbar-default .navbar-nav{
	margin-right: 0px;
}
#main-nav.navbar-collapse{
	padding-right: 0px;
}

#main-nav.navbar-collapse.collapse{
	margin-top: 0px;
}
#main-nav.navbar-collapse.collapse.in{
	margin-top: 15px;
	margin-bottom: 15px;
}

.navbar-default .navbar-nav > li > a{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.05em; font-size:1.1em; background: none; padding:3px 12px; font-weight: normal; border-radius: 5px 5px 0 0;}
.navbar-default .navbar-nav > li:first-child > a{padding-left: 0px;}
.navbar-default .navbar-nav > li:last-child > a{}

/* ico_new in the menu */
/*-----------------------------------*/
.navbar-default #ico_new{width: 97px;
height: 27px;
position: absolute;
top: -20px;
left: 0px;
background: url(../css/../images/ico/ico_new_menu.png) no-repeat 50%;
display: block;
z-index: 200;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.bg_purple i{background: #cd7cc1 !important;}
.bg_green i{background: #a5c524 !important;}
.bg_orange i{background: #ec8e33 !important;}
/*.navbar-default .navbar-nav .dropdown-toggle i{display:none;}*/
.navbar-default .navbar-toggle{margin:0px 0px 0px 10px; background: var(--colBlueLight);}
.navbar-default .navbar-toggle i { font-size: 20px; line-height: 20px; }
/*.navbar-default .navbar-nav .dropdown-toggle i{color:#fff; -webkit-border-radius: 20px; border-radius: 20px; background: var(--colBlueLight);padding: 0 2px;}*/

.navbar-default .game_thumb_160{ max-width:160px;}
.game_thumb_160 img {
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

/* The navbar for small screens */
/*-----------------------------------*/
@media screen and (max-width: 992px) {
	.topbar .navbar-nav li {
		text-align: left !important;
		border: solid 1px #DDD;
		margin-bottom: 2px;
		font-size:1.3em;
		padding:10px;
		border-radius: 20px;
	}
	.topbar .navbar-nav li:hover{
		/*background: #EEE;*/
	}
	.navbar-default .navbar-nav > li:first-child > a{padding-left: 18px;}
	.topbar .navbar-nav li .dropdown-menu{
		margin:5px;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > li > a{
		color: #fff;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > li > a {
		padding: 5px 15px 5px 25px;
		
		background-color: #999;
	}
	.navbar-nav .dropdown-menu > li > a:hover, .navbar-nav .dropdown-menu > li > a:focus {
		background-color: #666;
		
	}

	.navbar-default #ico_new{top: -1px; left: 150px;}

}

/* mega-menu */
/*-----------------------------------*/
.mega-menu-content {
    padding: 15px 20px;
}
.mega-menu-content .column {
    border-left: dashed 1px #DDD;
    padding-left: 20px;
    padding-right: 20px;
}
.mega-menu-content .row .column:first-child{border:none;}
.mega-menu-container{
	background: #33434C;
	max-height: 50vh;
	overflow-y: scroll;
	overflow-x:hidden;
}

.mega-menu-container h5{color:#CCC;}


/* HOME */
/*-----------------------------------*/

/*
.carousel-control {
	bottom: -47px;
	top: auto;
	background: none;
}
.carousel-control:hover {
	background: none;
}
.carousel-indicators{
	display:none;
}
*/


#home_first_section{  background: url(../images/main/carte_bg_bandeauHP_tiny.png) no-repeat 100% 50% var(--colBlueLight); margin-bottom:0px; background-attachment: fixed;
		background-position: 100% 5%;padding: 20px 0px;
		min-height: 259px;}
#home_first_section .row{padding: 30px 0px;}
#home_first_section h1{font-size: 2.3em;}
#home_first_section h2{ font-size:1.5em; margin-top:20px;font-weight: lighter; max-width: 560px;}
#bandeau_beta{height: 44px; background: #79cb3e; color:#FFF; text-align: center; padding-top:12px; font-weight: bold; font-size:1.4em;}
#video_container_in_home_big_bandeau{ margin:auto;}/* height: 312px; */


/* home sections */

#new_game_bloc, #blog_bloc{padding-top:30px;}

section#section_home_bandeau_beta{margin:0px;}

#section_home_news_new_games{background:url(../images/main/home_two_colors_band.png) 50% 50%;}/*#EAF2F9*/
.section_home #blog_bloc{}
.section_home #blog_bloc #news h2{display:none;}

.section_home #blog_bloc .unit{border-bottom:none;}
.section_home #news .content{padding:0px;}
.section_home #news .content .date{color:var(--colBlueDark);}
.section_home #news h3{font-size:1.2em; font-size:bold; letter-spacing: -0.04em;}
.section_home #new_game_bloc{background:#b8e3fc; padding-left:20px; color:var(--colBlueDark);}/*#D8E8F7*/
.section_home #new_game_bloc .ico_new{position: absolute; top: 0px; left: 0px;}


#section_home_4{background:#cdedff;color:var(--colBlueDark);margin-bottom:0px;}/*#EAF2F9*/
#section_home_4 .col-md-4{padding-top:30px;}
.section_home #sociable_bloc {margin-bottom:0px;background:#b8e3fc;}

#ul_home_most_layed_games li{float:left; margin: 3px;}

#section_home_news_new_games .bloc_bg_ico{
	color: #b8e3fc;
	font-size: 20em;
	bottom: -30px;
	left: 24px;
	top: auto;
}

#section_home_4 #sociable_bloc #sociable{width:200px; text-align: center; margin:auto;margin-top:20px; }
#section_home_4 #sociable_content_result{height: 30px; margin-top:20px;}


#section_home_premium{padding-top:30px; padding-bottom:30px;}
#section_home_premium .bloc_bg_ico{color: #FFB710; font-size: 60em; top: -50px;}
#section_home_premium .premium_cost{font-weight: bold;letter-spacing: -0.05em;}

#section_home_presentation{background: #ff5c5c; padding:30px 0px; margin-bottom:0px;}

#home_col_newsletter #newsletter_bloc h2, #home_col_newsletter #newsletter_bloc #newsletter_bloc_notice{display:none;} 

.full-width-section{ padding:0px;}

.blocs_3_section{padding:30px 0;}

.popover{max-width: 300px;}
#login_win_outer{width:250px;}

.boxed-content.left-aligned i{font-size: 3em;}

#cb_keep_login{max-width:100px;}


/* game search bloc */
/*-----------------------------------*/
#form_game_search_bloc{

}

/* FOOTER */
/*-----------------------------------*/
footer {position: relative; background:url(../images/main/carte_bg_bandeauHP_tiny.png) no-repeat 100% 0% #202149; background-size: 307px 411px;}
footer h2{color:#ffffff;}
#perso_footer{width:402px; height: 164px;  position: absolute; bottom:224px; right:0;}


/* thumb_in_h1 */
/*-----------------------------------*/
/*span.thumg_in_h1 {
    float: right;
    margin-top: -8px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	border: solid 3px #FFF;
	font-size: 0.5em;
}*/

/* .game_thumb_XXX */
/*-----------------------------------*/

.game_thumb_200 {width: 200px;}

.game_thumb_160{-ms-transform: scale(0.9,0.9);
    -webkit-transform: scale(0.9,0.9);
    transform: scale(0.9,0.9);}

/*-ms-transform: scale(0.8,0.8);
    -webkit-transform: scale(0.8,0.8);
    transform: scale(0.8,0.8);*/


/* game thumbs stars */
/*-----------------------------------*/
.game_thumb{position: relative; display:inline-block; border-radius: 5px; min-width: 150px;
min-height: 45px;}
.game_thumb.img{height: 46px;}
.game_thumb.img.game_thumb_160{height: auto;}

.game_stars{color:#FEE145;}

.game_thumb .game_stars{position:absolute; bottom:-9px; left:3px; font-size:1.4em; z-index: 500;}
.game_thumb.text {min-height: auto;}
.game_thumb.text .game_stars {
    display: inline-block;
    position: relative;
    bottom: 0px;
    font-size: 1em;
}
.game_thumb img{border-radius: inherit;}
.game_thumb.text .game_stars i{text-shadow: none;}
.mega-menu-content .game_thumb .game_stars{bottom:-3px;}
.game_thumb .game_stars i.grey, .game_stars i.grey{color:#CCC;}
.game_thumb .game_stars i{}/*text-shadow: 1px 1px 2px rgba(0,0,0,0.2);*/

.mega-menu .game_thumb .game_stars{background: rgba(0, 80, 185, 0.5) none repeat scroll 0% 0%;
border-radius: 10px;
padding: 0px 5px;}

.game_thumb.stars_only{min-height: 0px;}

.game_thumb .nb_played{color:#CCC; font-size: 0.9em; font-weight:bold; position: absolute; right: 0px;
bottom: -9px;}

.game_thumb .is_new{width:150px; height:30px; position:absolute;z-index: 20;top: 0px; background: url(../images/ico/game_thumb_is_new_tiny.png) no-repeat; background-size: 150px 30px;}


.game_thumb .is_new_version{width:150px; height:30px; position:absolute;z-index: 20;top: 0px; background: url(../images/ico/game_thumb_is_new_version_tiny.png) no-repeat; background-size: 150px 30px;}


a.game_thumb:active {
   opacity: 0.5;
}



/*#########################################
# >>	game premium only
#########################################*/
.game_thumb.premium_only{
	/*opacity: .5;*/
	/*background: #FFB710;*/
}

.game_thumb.premium_only .game_thumb_img{
	/*filter: sepia(100%) contrast(130%);*/
	filter: none;
}

.game_thumb .premium_ico {
	position: absolute;
	top: 3px;
	left: 20px;
	z-index: 20;
	font-size: 2em;
	color: #FFB710;
	text-shadow: 0px 0px 5px black;

	/*#########################################
	# >>	NO MORE GAME BLOCKED for non premium
	#########################################*/
	display:none;


}

body.user_is_premium .game_thumb.premium_only .game_thumb_img{
	filter:none;
}

body.user_is_premium .game_thumb .premium_ico{
	display:none;
}

#premium_only_blocker {
	position: absolute;
	z-index: 1200;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	background: rgba(255, 255, 255, .5);
	display: flex;
	justify-content: center;
	align-items: center;
}

#premium_only_blocker .content{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding:40px; 
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); 
}

#premium_only_blocker .content h3{
	color: #BC3B20 !important;
}

body.user_is_premium #premium_only_blocker{
	display:none;
}


/*#########################################
# >>	gameThumbFlash 
# (used in btl for example, not in the OT process.)
#########################################*/
.gameThumbFlash {
	background-size: cover;
	position: relative;
	height: 100px;
	background-position: center;
	max-width: 240px;
	border-radius: 15px;
}
.gameThumbFlashName {
	background: #FFF;
	padding: 2px 15px;
	color: var(--colBlueDark);
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	border-radius: 10px;
	text-align: center;
	width: 90%;
	bottom: -10px;
	font-weight: 600;
	z-index: 10;
}


/* carousel home */
/*-----------------------------------*/
#carousel_testimonials{padding:40px;height: 450px;}
#carousel_testimonials .carousel-inner{}



/* Login menu */
/*-----------------------------------*/
.btn_open_user_menu_container{
	display: inline-block;
}
#user_menu.dropdown-menu {
	right: 10px;
	max-width: 210px;
	left: auto;
}
#user_menu.dropdown-menu .dropdown-header {text-align: center;}
#user_menu.dropdown-menu .dropdown-header .avatar{margin: auto;}
#login_form_bloc .dropdown-menu li a{font-size: 1.5em;}
.user_menu_item { padding-left: 10px !important;}

#days_remaining_in_user_name{
	font-weight: 900;
}

/* subscribe form */
/*-----------------------------------*/
#user_form{float: none; margin: auto;}
#bloc_unsuscribe{float: none; margin: auto; margin-top:30px;}
#captcha_img{border: solid 1px #333;}
#form_user .bloc_button{text-align: center;}
#bloc_unsuscribe .bloc_button{text-align: center;}
#bloc_unsuscribe{padding: 20px 0;}


#user_form{
	/*background: rgba(255, 255, 255, 0.6);*/
	/*background: rgba(11, 10, 38, .6);
	border-radius: 5px;*/
	padding: 30px;
}
#user_form input{
	background: #FFF;
	border: #FFF;
	border-radius: 10px;
	/*border-radius: 20;*/
}

#user_form .btnSeePass {
	position: absolute;
	top: 9px;
	right: 25px;
	color: #999;
}

#user_form hr{
	border-color: rgba(255, 255, 255, 0.3);
}


/* DEV */
#alert_all_pages_bloc{ 
	position: relative;
}
#alert_all_pages_bloc .btn_close{ 
	right: 30px;
}
#alert_all_pages_bloc .alert-warning a:hover{
	color: #000000;
}


.mandatory{
	color:var(--colYellow);
}

#recaptchaBloc{
	display: flex;
}


/* FORM CSS (subscribe form)*/
/*-----------------------------------*/
.tfAlert{background: #FFDBEB; border: solid 1px #FF9EA9; color:#C1201E;}
.tfGood{background: #C9FFC5; border: solid 1px #38B332;  color:#2B862C;}
.tfInfo{background: #B9E0FF; color:#375699;} 
.vpAlert{color:#C1201E;}
.vpGood{color:#339933;}
.note{font-style: italic;
color: #6AA5D3;
font-size: 0.9em;}

.input-group[class*="col-"].float_left{ float: left;}

/* user name */
/*-----------------------------------*/
.user_name.xs div.avatar, .user_name.xs span{display:inline-block; vertical-align:middle;}
/* exception in login_form_bloc */
#login_form_bloc .user_name.xs span{vertical-align:inherit;}

.user_name.reputation_inline .reputation{display: inline-block; margin-left:5px;}

.user_name.battle_style {
	width: 200px;
	background: #FFF;
	border-radius: 20px;
	padding: 2px 9px 2px 25px;
	display: inline-block;
}
.user_name.battle_style .avatar {
	transform: scale(1.3) translate(-6px, 0px);
	outline:3px solid #FFF;
	background: #FFF;
	box-shadow: var(--shadowBlueSmall);
}

.user_name.battle_style .name {
	margin-left: 30px;
	display: inline-block;
	overflow: hidden;
	height: 18px;
	width: 130px;
/*	background: #F00;*/
}
.user_name.battle_style.small {
	width: 140px;
	padding: 1px 5px 1px 6px;
	height: 23px;
}
.user_name.battle_style.small .avatar {
	transform: scale(0.7);
	transform-origin: left;
	margin-top: -2px;
	margin-left: -2px;
}
.user_name.battle_style.small .name {
	font-size: 1em;
	width: 100px;
	margin-top: 3px;
	margin-left: 0px !important;
}
.user_name.avatar_only .name{
	display: none !important;
}

.user_name.text_only .avatar{
	display: none !important;
}

.user_name .name{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.btn .user_name .name, .user_name.xl .name{
	overflow: initial;
}

/* Home content */
/*-----------------------------------*/

/* Section 3 */
/*-----------------------------------*/
#section_3{background:var(--colBlueLight); color:#FFF;} /* #fbf4fa;} */
#section_3 h2{color:#FFF;}
#section_3 #news, #section_3 #news h2{color:#333;}


/* news in home page*/
/*-----------------------------------*/
#news { margin:20px 0; }
#news .content{max-height: 500px; overflow-y:auto;padding: 5px; }
#news .unit{margin-bottom:15px;padding-bottom: 15px; border-bottom: solid 1px #CCC;}
#news h3{ font-size: 1.8em;}
#news .date{font-size: 0.8em; color:#999;}
#news .author {
	font-size: 1.1em;
	font-weight: bold;
	margin-top: 40px;
	display: block;
	color: #656565;
}
#news_page_content{margin-top: 30px;}

#news_page_content li{list-style: disc; margin-left: 20px;}


/* class='video_iframe' */
/*-----------------------------------*/
.video_iframe_container iframe{box-shadow: 0px 2px 2px rgba(0,0,0,0.3); border:solid 1px #666;}



/*Sociable*/
/*-----------------------------------*/
#sociable_bloc {margin-bottom:20px;}
#sociable_bloc .sociable_bloc_inner{-webkit-border-radius: 20px; border-radius: 20px; padding: 25px 0 10px 0; background:#D6ECFA; color:#3F9BD5;}

/* welcome bloc */
/*-----------------------------------*/
#welcome_bloc {margin-bottom:20px;}
#welcome_bloc_inner{-webkit-border-radius: 20px; border-radius: 20px; padding: 25px 20px 10px 20px; background:#D6ECFA; color:#3F9BD5;}






/* Modal */
/*-----------------------------------*/
.modal-header{background: #A8D8FF; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; }

/*.modal {
 
  top: 50%;
  transform: translateY(-50%);
}*/

/* Popover */
/*-----------------------------------*/
.popover-title{font-weight: bold; text-align: center;}


/* FORM GLOBAL */
/*-----------------------------------*/
.parsley-error{background: #FFD3C3;}
.parsley-success{background: #CCFFC9;}
.form-group label .note{margin-top:10px;}


/* back_button_in_h1 */
/*-----------------------------------*/
.back_button_in_h1{color:#FFF;}

/* COMMENTS */
/*-----------------------------------*/
#comments_container{
	margin-top: 50px;
}
#comments_container h2{
	text-align: center;
}
.comment_frame{-webkit-border-radius: 2px; border-radius: 2px; margin-bottom:20px;}/*background:var(--colBlueLight);*/
.comments_intro.alert{color: #666; background: none; border:none;}

.comment_unit{position:relative;-webkit-border-radius: 2px; border-radius: 2px;border:none; margin-bottom: 20px;margin-left:0px;margin-right:0px;}

/*.comment_unit:last-child{margin-bottom: 0px;}*/
.comment_unit .timeago{font-size: 0.7em; color:#666;}
.comment_unit.reply{padding-left:120px;}

.comment_unit .admins_comment{background-color: #FEE;}
.comment_unit .admins_comment::after{ border-color:#FEE transparent; }

.comment_unit .deleted_comment{background-color: #EEE; color:#999;}
.comment_unit .deleted_comment::after{ border-color:#EEE transparent; }

.comment_title{padding-left: 0px;text-align: center;}
.comment_title .avatar{margin:auto;}

.comment_content_col{padding-right:0px;}
.comment_content{ background:#EAF2F9; padding:15px;-webkit-border-radius: 10px; border-radius: 10px;
	
	}/*#D7F4FA*/
.comment_content::after{
	content: "";
	position: absolute;
	top:10px;
	left: -5px;
	border-width: 20px 0 0 20px;
	border-style: solid;
	border-color: #EAF2F9 transparent;
}

.comment_content.current_user{background: #D8FF91 !important;}
.comment_content.current_user::after{
	border-color: #D8FF91 transparent !important;
}

.comment_content p{overflow-x: hidden; margin:0px; color:#666;}
.comment_content {color:#666;}

.comment_content p .quote{font-style: italic;}
.comment_content blockquote {
    padding: 10px 20px;
    font-style: italic;
    font-size: 1em;
    border-left:solid 1px #7b7b7b;
}
  
.comment_unit .btn_vote_bloc{float: right; margin-top:30px;}
.comment_unit .btn_vote_down{ margin-right: 5px;color:#FAA489;}
.comment_unit .btn_vote_up{ margin-right: 5px;color:#77F680;}
.comment_unit .btn_reply{ margin-right: 10px;}
.reply_form_bloc .btn_close{display: inline-block; float:right;}

.comments_nav{text-align: center; font-size: 1.5em;}


/*.replies_not_displayed_content_result .fa-reply{display: none;}*/
.btn_replies_not_displayed{text-align: right;}
#commments_archives_link{text-align: center;}



/* HELP */
/*-----------------------------------*/
.textual_help{text-align: left; margin:30px 0;}


/* To crush the repute custom-tabs-left rules */
/*-----------------------------------*/
.custom-tabs-left > .nav-tabs > li {margin-top: 1px;}
.custom-tabs-left > .nav-tabs > li a:hover{background: #eee; border-color: #EEE #DDD #EEE #FFF;}

/* To crush some repute rules */
/*-----------------------------------*/
.boxed-content > i {
    color: var(--colBlueLight);
}
.copyright {
    background: none;
}

/* STARS */
/*-----------------------------------*/
.stars_container {color:#FCE51F; white-space: nowrap;letter-spacing: -0.1em;}



/* report_bug_link */
/*-----------------------------------*/
#report_bug_form_container{max-height: 600px; overflow-y:auto;overflow-x:hidden; margin-top:20px;border: solid 1px #CCC; padding-top: 20px;}
#report_bug_bloc{margin-top: 50px; margin-bottom: 50px;}
#report_bug_form_bloc{margin-top: 30px; margin-bottom: 30px;}
#report_bug_link{display: none;}
.must_appear #report_bug_link{display: block;}



/* modalPush */
/*-----------------------------------*/
.modal_fancy .modal-header{background: #FFF; border-radius: 0; border:none;}
.modal_fancy .modal-content{border-radius:10px; border:solid 10px #A8D8FF;
background: url(../images/main/perso_footer_01.png) #FFF no-repeat 100% 107%;
background-size: 201px 82px;
}
.modal_fancy .b_close{background:#fee145; color: #994d04; font-weight: bold; padding: 7px 10px;
border-radius: 20px;
cursor: pointer;
float: right;
margin-top: -30px;
margin-right: -30px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.3);}
.modal_fancy .b_close:hover{background: #FEF0A7;}

.fb_share_button{background: #43609C; color:#FFF; padding:5px 5px 2px 5px; border-radius: 2px;}
.fb_share_button:hover{background: #4F73BC; color:#FFF;}

/* cookie directive */
/*-----------------------------------*/
#cookiesdirective #impliedsubmit{color:#000;}


/* hiscore list  table scores*/
/*-----------------------------------*/
.table > tbody > tr > td{vertical-align: middle;}
.table td.score{padding-right:5px; text-align: right; font-weight: bold;}
.table td.score a{color:#7b7b7b;}
.table td.rank{width:15px; text-align: center;}
.table td.name{text-align: left;}

.table_scores.table > tbody > tr > th{background: var(--colBlueLight); color:#FFF; border-top: none;vertical-align: bottom;line-height: 1.1;}
.table_scores.table > tbody > tr:nth-child(2) > td{border-top: none;}
.table_scores tr.current_user td{background: #D8FF91;}
.table_scores tr.favuser td{background: #d8edfb;}
.table_scores .step_bar{background: var(--colBlueLight) !important;}

/*.table_scores th{text-align: right;}*/


#hiscores_month, #hiscores_week, #hiscores_day{margin-bottom: 30px;}
#hiscores_note{text-align:center;}

#hiscores_list { margin:auto; margin-top:20px; margin-bottom:20px;color:#486079; }
#hiscores_list_content{ margin:auto; margin-top:20px; text-align:center; font-size:1em;
}


/*.table_scores{width:100%;-webkit-border-radius: 15px 15px 0px 0px;-moz-border-radius: 15px 15px 0px 0px; border-radius: 15px 15px 0px 0px;
 border:none; background:#FFF}

.table_scores th{color:#FFFFFF;font-weight:bold;font-style:italic; padding:3px;padding-left:5px; font-size:1.5em; text-align:center;
 -webkit-border-radius: 4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px;
 background: var(--colBlueLight);
 border-top: none !important;
}*/

.hiscore_unit{width:200px; margin:5px; margin-right:20px; margin-top: 10px; display: inline-block; text-align:center;}/*border:solid 1px #666;padding:3px; */
.hiscore_unit img.game_thumb{width:200px;}
.hiscore_unit_score{width:170px;border:solid 1px #ccc; border-top:none;border-bottom:none; background:#F3F3F3; padding:3px; margin:auto;}
.hiscore_unit_score .date{font-size:.4em;}
.hiscore_unit_score .rank{font-size:.6em;}
.hiscore_unit_score_bottom{width:170px; height:1px;border-top:solid 1px #ccc; margin:auto; padding:3px;}

.hiscore_unit_score_friend{font-size:1em;width:250px;border:solid 1px #ccc; border-top:none;border-bottom:none; background:#F3F3F3; padding:3px; margin:auto; height:150px; overflow:auto;}
.hiscore_unit_score_friend_bottom{width:250px; height:1px;border-top:solid 1px #ccc; margin:auto; padding:3px;}

.hiscore_unit_score_friend .your_best_score{font-size:1.3em; font-weight:bold;}
.hiscore_unit_score_friend td{border-top:solid 1px #ddd; }



/*---------------------------------------- 
HISCORES_LIST GAME ORDERED */
.hiscores_list_part_item{padding-bottom:20px;text-align: center;}

.hiscores_list_part h3{font-weight: bold; font-size: 2em; border-radius: 0px; line-height: 1em;}


/* Hiscorelist userprofile */
/*-----------------------------------*/
#userprofile_row_scores{
	margin-top: 30px;
}
#user_scores_table{width: 100%; color:#333; }
#user_scores_table th{background-color: #33434C;
color: #8AAEC5;
text-shadow: 0px -1px 0 rgba(0,0,0,0.6);
}

#user_scores_table tr:nth-child(even) {background: #F2F9FE;}
#user_scores_table tr.hoverable:hover{background: #FEFFB8;}

/*#user_scores_table tr:first-child:hover{background: #33434C;}*/
#user_scores_table th { padding: 5px 5px;   text-align: center;}
#user_scores_table td{padding: 6px 6px; text-align: center;}
#user_scores_table td.index{font-size:0.9em; color:#999; }
#user_scores_table td.game_name{max-width:250px; text-align: left;}
#user_scores_table td.date{font-size:0.9em; color:#999; text-align: center;}
#user_scores_table td.score{font-weight: bold; padding-right: 20px; text-align: right;}
#user_scores_table td.theme{font-size: 0.9em; color:#999;}
#user_scores_table td.rank{font-size:0.9em;}

table.dataTable thead th, table.dataTable thead td {border-bottom: none !important;}
table.dataTable.no-footer { border-bottom: none !important;}

.dataTables_wrapper .dataTables_filter input {
	margin-left: 0.5em !important;
	border: solid 1px #00000022 !important;
	border-radius: 3px !important;
}
table.dataTable{
	border-collapse: collapse;
}

/*.rank_ratio_*/
.rank_ratio{text-shadow: 0px 1px 0 rgba(255,255,255, 0.4); font-weight: bold;}
.rank_ratio_0_1 {background: #FF4736; color:#9B1106;}
.rank_ratio_0_5 {background: #FF9143; color:#9B5207;}
.rank_ratio_1 {background: #FFE55F; color:#9B8C04;}
.rank_ratio_5 {background: #A7FF85; color:#319B02;}
.rank_ratio_10 {background: #89FFB6; color:#029B61;}
.rank_ratio_20 {background: #75E3FF; color:#02729B;}
.rank_ratio_30 {background: #B4E3FF; color:#02729B;}
.rank_ratio_40 {background: #CBE6FF; color:#02729B;}
.rank_ratio_50 { color:#02729B;}
.rank_ratio_60 { color:#02729B;}
.rank_ratio_70 { color:#02729B;}
.rank_ratio_80 { color:#02729B;}
.rank_ratio_90 { color:#02729B;}
.rank_ratio_100 { color:#02729B;}

#ul_rank_ratio_count {padding-top: 20px; margin-bottom: 20px;}
#ul_rank_ratio_count li{display: inline-block; width:80px; text-align: center;}
#ul_rank_ratio_count li div{display: inline-block; }
#ul_rank_ratio_count li div.rank_ratio{padding:5px; width:60px; text-align: center;}


/*---------------------------------------- 
HISCORES_LIST CONTEST */
.contest_unit{ width:726px; margin:40px auto;}
.contest_unit .hiscores_list table {
    width: 100%;
}
.hiscores_list{float:left;margin:auto; margin-top:20px; margin-bottom:20px;color:#486079;}

.hiscores_list table {width:285px;-webkit-border-radius: 15px 15px 0px 0px;-moz-border-radius: 15px 15px 0px 0px; border-radius: 15px 15px 0px 0px;
 border:none; background:#e3e8f1}
.hiscores_list th, .hiscores_list tr{-webkit-border-radius: 10px;-moz-border-radius: 10px;}
.hiscores_list th{background:var(--colBlueLight);color:#FFFFFF;font-weight:bold;font-style:italic; padding:3px;padding-left:15px; font-size:1.5em; text-align:center;
 -webkit-border-radius: 4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px;}

.hiscores_list table tr td {padding: 1px 2px; font-size:1em;}
.hiscores_list td.td_rank{width:10px; text-align:right; padding-right:15px; color:#486079;}
.hiscores_list tr.alt td {background:#f4f7fa;} 

.hiscores_list .r{ text-align:center;}
.hiscores_list .s{ text-align:right; padding-right:10px; width:50px;}
.hiscores_list .s_big{font-size:2em; font-weight:bold;}



#hiscores_list_in_my_score #hiscores_list table{width:100% !important;}
#hiscores_list_in_my_score #hiscores_list table td.thumb_container{width:200px}
#hiscores_list_in_my_score #hiscores_list table td.stars_container{width:200px}
#hiscores_list_in_my_score .hiscores_list_part_item{padding:0px !important;}
#hiscores_list_in_my_score .hiscore_unit_score{text-align:center;}
#hiscores_list_in_my_score .rank{text-align:center;}

#hof_userrank_300_view_button, #hof_userrank_favusers_view_button{text-align:center;}

/*---------------------------------------- */
#report_bug_link{text-align:center; width:300px; margin:5px auto; margin-top:20px; padding:4px; }

/*---------------------------------------- */
#donate_banner{background:#FC6; border:dashed 2px #C33; width:468px; cursor:pointer; margin:10px auto;}
#donate_banner_inner{padding:10px 15px; text-align:center;}
.donate_button{color:#CC3333; font-size:1.2em; font-weight:bold;}

/* ----------------------------------------- */
/* USERPROFILE */
/*-----------------------------------*/
a.login_link{ text-decoration:none;}
a.login_link {
	text-decoration: none;
	max-width: 130px;
	overflow: hidden;
	display: inline-flex;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#up_no_public_caution{margin:50px;}
#up_presentation_outer.ifAvatarEnabled{}
#up_data_bloc .avatar{margin: auto;}
#userprofile_form textarea {width:90%; float:left;height: 200px;}

#userprofile_search_users_and_links_row{margin-top:20px;}

#up_stats_bloc{margin-top:20px; }
#up_stats_bloc_inner{margin-top:30px; }
#up_stats_bloc_inner li{margin-bottom:5px;}
#up_stats_bloc_inner li .stat{font-weight: bold; }
#up_stats_bloc_inner li i.fa.stat_title{ margin-right:5px;}
#up_stats_bloc_inner li.pad{padding-left:22px;}

#up_modify_display_button_bloc{ text-align:right;}

#up_data_bloc .edit_btn{float:right;margin-top: -14px;
margin-right: -20px;}

#up_form_texts_bloc{ }
#up_form_options_bloc{}
#userprofile_form label{font-weight:bold; font-size:1.2em;}
#up_form_options_bloc{margin-bottom:20px;}

#userprofile_form .charsRemaining{float:right;}

#up_bloc_premium{text-align: center;}
#up_bloc_premium h2{margin:0px;}
#up_data_bloc .content{color:#000;}

.up_ico_in_stats{float:left; margin-right:10px;}

#form_up_search_bloc{border:none; padding:10px;}
#form_up_search_bloc_title, #form_up_search_bloc_text{float:left;}
#form_up_search{}

#up_user_main .avatar{margin: auto;}
#up_user_main #reputation_bloc .num{font-size:3em;}
#up_user_main #reputation_bloc .rank{margin:auto; margin-top:10px; width:150px;}

#up_see_scores_button{float:right; margin-left:10px;}
#up_modify_display_button{float:right;}


/*GAME STATS*/
#game_stats_button_bloc{}
#game_stats_main{margin-top: 40px;}
#game_stats_main h3{text-align:center; margin-top:0px; margin-bottom:10px;}
#game_stats_main hr{height:1px; border-top:none; margin:5px 0;}
#game_stats_main nobr{ letter-spacing:-0.05em; font-weight:700}

#bloc_game_stats_top_left{min-height:220px;}
#bloc_game_stats_top_center{ height:220px; margin:0px 20px; text-align:center;}
#bloc_game_stats_top_right{min-width:300px; height:250px;}

#bloc_game_stats_top_left #favusers_hof_in_game_pages_bloc{padding:0px;}

#bloc_game_stats_top_center_inner{margin-top:30px;}
#user_best_score_bloc .part_left{width:50%;}
#user_best_score_bloc .part_right.big{ font-size:2.2em;}
#score_rank_bloc .part_right.big{ font-size:1.8em;}

#bloc_game_stats_bottom_chart{}
#bloc_game_stats_bottom_chart .bloc{display:inline-block; margin-right:20px;}
#bloc_game_stats_chart{ position:relative; margin-top:20px;}
#bloc_game_stats_chart .jqplot-point-label{color:#6499ce;}
#bloc_game_stats_chart .jqplot-xaxis-label {
    margin-left: 50px;
    
}

#chartdiv_pie .jqplot-data-label{color:#ffffff; font-family:"Arial Black", Gadget, sans-serif; font-size:1.1em; font-weight:bold;
}/* text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; */
#chartdiv_pie .jqplot-title{color:#cccccc;}

#bloc_game_stats_player_nb{float:right; width:43%;}
#bloc_game_stats_player_nb nobr{font-size:2em;}

#bloc_game_stats__bottom_avg{ margin-top:30px; margin-left:20px; text-align:center; width:350px; float:left;}
#bloc_game_stats__bottom_avg nobr{font-size:2em;}

#bloc_game_stats__new_best_scores{ margin-top:60px; text-align:center; width:150px; float:left; color:#cccccc;}

#bloc_game_stats__bottom_avg_100, 
	#bloc_game_stats__bottom_avg_1000{float:left; text-align:center;margin-top:20px; margin-left:20px; width:240px;color:#6499ce;}
	
#bloc_game_stats__bottom_avg_1000{}

a.button_play_again{
padding:3px 55px 6px 55px;
color:#FFF;
text-decoration:none;
font-size:1.5em;
background:url(../images/main/bg_b_play_again.jpg) 0% 0% repeat-x #000; border:solid 2px #FFF; 
-moz-box-shadow: 1px 2px 4px #cdcdcd; -webkit-box-shadow: 1px 2px 4px #cdcdcd; box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;
}
a.button_play_again:hover{background-image:url(../images/main/bg_b_play_again_hi.jpg);}

#bloc_game_stats_best_score_ever table{width:400px;}

#game_stat_pub_sky{float:right; background:url(../images/main/pub_sky_bg_game_stats.jpg) no-repeat; width:292px; height:744px; margin:0px 0px 0px 0px; padding-top:62px;}

/* Favusers */
/*-----------------------------------*/
#favusers_hof_in_game_pages_bloc{}
#buttonsUnderHofContainer{margin-bottom: 40px;}
.onWhite .favusers_button{color:#FFF;}

/* thumb code ---------------------------*/
/*-----------------------------------*/
#bloc_thumb_code .thumb_code_unit{text-align:center;margin:5px auto; margin-bottom:10px;}
#bloc_thumb_code a{margin-right:10px;float:left;}
#bloc_thumb_code .bloc_code{float:left; width:300px; margin:auto; padding:7px; background:#F3F6F9; color:#666; border:solid 3px #DCE4ED; font-size:.7em;-webkit-border-radius: 15px;-moz-border-radius: 15px; border-radius: 15px;}
.game_thumb_200{width:200px; margin-bottom:5px;}
.game_thumb_150{}


/* REPUTATION */
/*-----------------------------------*/
.reputation{font-weight: bold;}
.reputation i{color:#DDD;}
.reputation nobr{color:#888;}
ol li .reputation{display: inline-block; margin-left:10px;}
#reputation_history_bloc{margin-top:40px;}
#reputation_history_bloc {max-height: 300px; overflow-y:hidden;}
#reputation_history_bloc.displayed { overflow-y:auto;}
#reputation_history li{ padding:2px;}
#reputation_history li:nth-child(even){background: #F1F1F1;}
#reputation_history .num{display:inline-block; width:55px; font-weight: bold; font-size:1.3em; text-align: right; padding-right:10px; }
#reputation_history .timeago{display:inline-block; width:100px; color:#666; font-size:0.8em;}
#reputation_history .explain{display:inline-block; color:#333; font-size:0.9em;}
#btn_history_bloc_display_all{float: right;}

/*------------------------------------------ */
/* CLUBS */
/*-----------------------------------*/
a.club_pil{
	display:inline-block;
	padding: 5px 10px;
    /*border: solid 1px #DDD;*/
    /*border-radius: 6px;*/
    background: #9fa6ad;
    font-weight: bold;
    color:#FFF !important; /*  !important for #user_menu .club_pil */
    margin: 3px;
    white-space: pre-line !important; /*  !important for #user_menu .club_pil */
    word-wrap: break-word !important; /*  !important for #user_menu .club_pil */
}
.club_pil:hover{background: #61686E !important;}
/*.club_pil .badge{background-color: #FF7521;}*/
#clubs_list{max-height: 524px; overflow-y:auto;}
#clubs_list .item{float: left;  margin:5px 5px;}
#clubs_list li.item {}
#clubs_list  li.item a {}
#login_form_bloc .dropdown-menu li a.club_pil {
    font-size: 1.3em;
	padding: 6px 10px;
	line-height: 1.2em;
}

#clubs_tab_buttons{border-bottom:solid 1px #CCC; margin-bottom:20px;text-align: right;}

.club_tab{display:none;}
#clubs_tab_buttons .tab_button{display: inline-block;margin: 0px 5px;
border: none;
border-radius: 6px 6px 0 0;
padding-bottom: 0px;
font-size: 1.2em;}
#club_main_tab{display:block;}
#club_main_left{width:57%; float:left;}
#club_main_right{width:40%; float:right;}
#club_create_bloc{margin-top:15px;}
#club_nb_members_bloc{}
#current_club_title{}
#club_date_creation_bloc{ float:right; text-align:right; color:#999; margin-bottom:10px;}
#club_comments_rights_bloc{margin:5px 0; }

#club_nb_members_bloc_inner{float:left; line-height:1.5em;}
#club_is_member_content_result{float:right; line-height:1.5em;}

#club_description_bloc{}
#club_menu_content_result, #club_mrequests_list_content_result{text-align:center;}
#b_club_h1_modify{font-size:.5em; margin-left:30px; letter-spacing:normal;}

#club_description, #club_news{color:#333;}


#clubs_admin_mrequests_bloc{ margin-top:15px;}
.club_mrequest_list_item.ignored{background:#CCCCCC; border-color: #999;}
.club_mrequest_list_item.accepted{background:#DAEFC0; border-color:#A3DC74;}
#clubs_del_this_club_bloc{ margin-top:20px; font-size:1.3em;}
#ta_club_description, #ta_club_news{width:300px; height:100px;}
.clubs_admin_button_container{text-align:center;}
.bloc_admin, .admin_bg{background:#FEE !important ; }
.admin_bg::after{ border-color:#FEE transparent; }
.club_admin, .club_admin a, h2.club_admin, .admin_text{}
.clubs_game_list_item .cb_game{position: absolute;}
.clubs_game_list_item label{margin-bottom:0px;}
.club_mrequest_list_item{ padding:1px 5px; float: left;
    margin-bottom: 5px;
    margin-right: 10px;
    padding: 1px 5px;
    width: 42%;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; background:#fff; border:solid 2px #EEE;}

.clubs_users_list_item{float:none;}
#club_admin_users_list input{width: 100px; text-align: right;float: right;}

.club_mrequest_list_item{width:80%;}
#clubs_mrequests_list .club_mrequest_list_item{float:none; width:100%; text-align:left;}
.clubs_users_list_item.club_admin, .clubs_game_list_item.club_admin{background:#FEE;border-color: #FCC;}
.clubs_game_list_item{float:left; width:200px; margin-right:10px; position: relative;}

#clubs_comments_rights_question{font-weight:bold; margin:5px 0px;}
#clubs_admin_main_bloc li{margin-left:20px;}
#clubs_admin_games_bloc{margin-top:15px;}

#club_list_bloc_in_userprofile{ width:200px; text-align:center;}

#club_game_score_content_result .hiscore_unit{width:auto;}

#club_tournament_game_scores_bloc h3{margin-bottom:20px;}
#club_tournament_game_scores_bloc_table_container{padding:10px;background: #FFF;overflow-y: auto;
max-height: 600px;}
#club_tournament_game_scores_bloc table{margin-top:20px; width:100%; }
#club_tournament_game_scores_bloc table tr{border-bottom: solid 1px #DDD;}


/* row_top_game */
/*-----------------------------------*/
#row_top_game{margin-top:20px;margin-bottom:20px;}

#nb_plays_and_stars_details_in_game{width: 810px;
position: absolute;
z-index: 200;
left: 30px;
top: 60px;
color: #FFF;}

#nb_plays_and_stars_details_in_game #nb_plays_text{color:#FFF;}

#row_top_game_page_info .game_thumb .game_stars{bottom:-6px;}
#thumb_in_top_game_page_info, #nb_play_in_top_game_page_info, #game_stars_detail{display:inline-block;}

/* nb_plays_bloc */
/*-----------------------------------*/
#nb_plays_bloc{}

/* game_stars_detail */
/*-----------------------------------*/
#game_stars_detail{font-size:1.5em; }

/* best_score_bloc_in_stars_detail */
/*-----------------------------------*/
#best_score_bloc_in_stars_detail{font-size:1em;}

/* Needed because of the contest page and the dark_bloc ... complicated... */
#best_score_bloc_content_result{color: var(--colBlueDark);}

/*PODIUM*/
/*-----------------------------------*/
#podium_section{ max-width: 970px; margin:auto; margin-bottom: 20px;}
#podium_section .row{min-width: 800px;}
#pub_square_top_bloc{text-align:right;}
#podium_bloc{margin-top: 20px; }
#podium_title{ font-size:2em; font-family: arial; font-weight: bold; color:#a4a4a4; margin-top: 0px;}


.podium_xl_list{}
.podium_xs_list{display: inline-block; margin-top: 30px;margin-left: 20px;}
.podium_avatar_xl{width: 120px; text-align: center; display: inline-block;margin-right:10px; vertical-align: top;}
.podium_avatar_xs{margin-top:7px;}
#podium_bloc .num{ color:#d6d6d6; font-weight: bold; font-family: arial; font-style: italic;}
.podium_avatar_xl .avatar{margin: auto;}
.podium_avatar_xl .num{font-size: 3em;}
.podium_avatar_xs .num{display:inline-block; font-size: 1.5em; margin-right: 10px;}
.podium_avatar_xs .podium_user_name{display:inline-block;}

.podium_user_name .reputation {display:none;}


/* GAME */
/* #game_container top margin will be modified in plugins/vp_game_page_menu/game_page_menu_index.php by JS if game_page_menu.
/*-----------------------------------*/
section#game_container{
	margin-top:20px; margin-bottom:20px;
}


/*#########################################
# >>	.is_game_page
#########################################*/
body.is_game_page section#game_container {
	/*margin-top: 20px;
	margin-bottom: 20px;
	margin-left: -15px;
	margin-right: -15px;
	padding: 30px 0px;
	box-shadow: 5px 0px 40px rgb(61 141 230 / 40%);
	
	background: #FFF;*/
}


body.is_game_page .page-content {
	background-image: url(../images/main/round_01.svg); /*url(../images/main/globe_01.svg), */
	background-repeat: no-repeat;
	background-position: 500px 210px;
	background-size: 1070px;
}

body.is_game_page #game_outer_container_2 {
	padding: 30px 0px 30px 20px;
	box-shadow: 5px 0px 40px rgb(61 141 230 / 40%);
	background: #FFF;
	width: 990px;
	margin: auto;
	border-radius: 50px;
}


/*body.is_game_page .page-header{
	background: none;
}

body.is_game_page .page-header h1{
	color:var(--colBlueLight);
}*/

body.is_game_page #thumb_in_top_game_page_info {
	display:none;
}



#similar_games_bloc{
	width: 100%; 
	max-width: 900px;
	margin: auto; 
	margin-top: 30px;
	text-align: center;
	padding:12px 15px;
	border-radius: 20px;
	box-shadow: 5px 0px 40px rgb(61 141 230 / 40%);
}

#similar_games_bloc h3{
	color:var(--colBlueLight);
	font-weight: 700;
}

/* hof_in_game_pages */
/*-----------------------------------*/
#hof_in_game_pages{
	margin-top: 90px;
}


/* alert_credit_count_reached_game_blocker */
/*-----------------------------------*/
#alert_credit_count_reached_game_blocker {
	width: 100%;
	margin: auto;
	height: 100%;
	border-radius: 20px;
	border: solid 6px #FFF;
	box-shadow: 0 0 40px rgb(255 90 126 / 20%);
	background-color: #ffa15f;
}

#alert_credit_count_reached_game_blocker .bloc_bg_inner {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
	text-align: center;
	/*padding: 80px 100px;*/

	font-size:1.8em;
}

#alert_credit_count_reached_game_blocker h2 {
	color: #a73900;
}
#alert_credit_count_reached_game_blocker .bloc_bg_ico {
	color: rgba(255, 255, 255, 0.07);
	font-size: 42em;
	transform: rotate(35deg);
	left: -10px;
	top: -120px;
	z-index: 1;
	mix-blend-mode: plus-lighter;
}

#alert_credit_count_reached_game_blocker .bloc_bg_ico.clock {
	font-size: 50em;
	left: auto;
	top: auto;
	right: -190px;
	bottom: -330px;
}

#alert_credit_count_reached_game_blocker .countdown_row {
	background: rgba(255, 255, 255, .2);
	margin-top: 10px;
	margin-bottom: 10px;
}

#alert_credit_count_reached_game_blocker div.countdown_section{
	display: inline-block;
}

.linkBtnInPopupCredit{
	font-size: 1em;
	font-family: Tahoma, sans-serif;
	color:#FFF;
}
.linkBtnInPopupCredit:hover{
	color:var(--colYellow);
}


/*Banner */
/*-----------------------------------*/
.banner{text-align: center;} /*background:#66CCFF;*/
.megabanner{height: 90px; margin:auto;}/*width:728px; */
.premium_push_under_pub{text-align: center; font-size: 0.7em;}/*display: none;*/

body.user_is_premium .megabanner{
	display: none;
}


#banner_square_top{text-align: right;}
#banner_mega_under_comments_bloc{width:728px; margin:auto;}
#banner_right_game{
	position: absolute;
	width: 160px;
	height: 600px;
}
#banner_mega_top_game, #banner_mega_under_game{margin: auto;}


/* on_mobile */
/*-----------------------------------*/
body.on_mobile #banner_mega_top_game_bloc{float: none !important; margin-bottom:30px !important;}
body.on_mobile #banner_mega_under_game_bloc{ margin-bottom:50px !important;}
body.on_mobile #banner_right_game{display: none !important;}
body.on_mobile #report_bug_bloc{float: none !important;}


/* game page menu */
/*-------------------------------------*/
#game_page_menu{
	background:#333; 
	position:fixed; 
	z-index:1000; 
	bottom:-1px; 
	width:100%; 
	margin:0px; 
	left:0px; 
	vertical-align: middle; 
	height: 35px; 
	text-align: center;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* For the podium tab */
/*#game_page_menu.bigger{line-height: 4em; height: 62px;}*/

/*#game_page_menu.bigger {
	height: 62px;
}*/


#game_page_menu #btn_display_only_game{
/*	font-size: 2em;*/
/*	border: solid 2px #CCC;*/
	/*padding: 2px 15px;
	margin: 2px;
	margin-right: 20px;
	border-radius: 10px;
	line-height: 1.4em;
	background: #ffe036;
	color: #8c4700;
	font-weight: bold;
	padding-bottom: 20px;*/
}

#btn_display_only_game_in_big_thumb {
	font-size: 2em;
	padding: 2px 40px;
	border-radius: 10px;
	line-height: 1.4em;
	background: #ffe036;
	color: #8c4700;
	font-weight: bold;
	text-align: center;
	margin: auto;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	bottom: -20px;
	box-shadow: var(--shadowImgTextSmall);
/*	border: solid 5px #8c470044;*/

	background: var(--bgGradYellow);
	box-shadow: var(--shadow3D);
}

#og_image_in_game_page {
/*	background-size: 130%;*/
	background-size: calc(130% + 70px);
	background-repeat: no-repeat;
	height: 177px;
	background-position: center -49px;
	position: relative;
	box-shadow: inset 0px 5px 10px rgba(24, 55, 94, 0.4);
}

#game_page_menu:before {/* inline-blocks vertical middle */
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

/* for non mobile devices : no menu 
@media (max-width: 992px) {
  #game_page_menu { display: none; }
}*/

/* game menu elements */
#game_page_menu li{display: inline-block; padding:2px 20px; font-size: 1.5em; color:#FFF; font-weight: bold;} /* width:24%; */
#game_page_menu li i{font-size: 1.2em;}
#game_page_menu li:last-child{}

#game_page_menu li a{color:#FFF;}


/* For mobile devices in portrait mode */
@media only screen and (min-width : 768px) and (orientation : portrait) {
  #game_page_menu li{letter-spacing: -0.09em; width:20%; }
}
/* We need this in game_page_menu pages for all the tabs but the first one */
#main.without_margin_top, .page-content.without_margin_top { margin-top: 0px;} 
/* In top page we may have empty <p> (VPCMS page content code). Those sould be without margin. */
.page-content.without_margin_top > p{display:none;}

/* back_from_game_menu_button */
/*-----------------------------------*/
#back_from_game_menu_button{
	position: fixed;
	bottom: 0px;
	
	right:10px;
	z-index: 2200;
	border-radius: 6px 6px 0 0;
	padding: 2px 13px;
	background: #333;
	color:#FFF;
}

/* NOTIFICATION */
/*-----------------------------------*/
#notification_bloc{display: inline-block; position: relative; margin-left: 10px}
#notification_bloc li{display: inline-block; }
.notification_list_container{display: inline-block;}
.message_notification{display: inline-block;}
#comment_notification_list_container, 
	#comment_club_notification_list_container{display: inline-block;}
#comment_notification_list,
	#comment_club_notification_list{position: absolute; top:30px; max-height: 500px; overflow-y: auto;}
#comment_notification_list li,
	 #comment_club_notification_list li{display: block;}

#btn_notification_delete_all_container{margin-left:6px;}




/* simple_notification */
/*-----------------------------------*/
#simple_notification_bloc {
	margin: 0px;
}
#simple_notification_bloc li{display:inline-block;}
#simple_notification_bloc li a{color: var(--colBlueLight) !important;  font-size: 1.2em;}

/* notifications popup */
/*-----------------------------------*/
#popupNotificationsList{
	display: flex;
	flex-direction: column;
}

#popupSimpleNotificationsList li{
	display: block;
}


/* fa new icon when stacked */
/*-----------------------------------*/
.fa-stack .fa-new_icon{color: #FC3; margin-left: 20px;}

/* Drag bar */
/*-----------------------------------*/
.drag_bar{width: 82%; height: 3px; border-bottom:solid 1px #999; margin-left: 20px;}

/* nb_plays */
/*-----------------------------------*/
#nb_plays_text {color: #CCC;}
#nb_plays_text .num{font-size: 1.6em; font-weight: bold; }

/* table_big */
/*-----------------------------------*/
#table_big th, #table_big td{padding:10px 30px; }
#table_big td.td_title{padding:10px 10px; }
#table_big td.num{font-size: 2em;text-align: center;}
#table_big td.line{background: #EEE;color: #333;}

/**
 * other_games_list
 */
.other_games_list{text-align: center;}
.other_games_list .game_thumb{margin:10px 10px;}

/* publish_game_stats */
/*-----------------------------------*/
.game_stats_bloc{margin-bottom:0px;}

.game_stats_bloc.bloc_bg_outer i.bloc_bg_ico{top: -5px;left:auto;right: 3px;font-size: 7em;color:#8cbf8d;}

/* rotate */
/*-----------------------------------*/
.rotate90 {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}


/* BREVET */
/*-----------------------------------*/
#brevet_main .description_bloc, #bac_main .description_bloc {
    background: #fff9d1;
   /* border: solid 2px #dfcead;*/
    padding: 30px;
    
}
#brevet_main .description_bloc .description, #bac_main .description_bloc .description {
    margin-top: 30px;
    width: 250px;
    color: #807b5a;
    font-size: 1.2em;
    float: left;
}
#brevet_main .description_bloc .description_thumb, #bac_main .description_bloc .description_thumb {
    float: right;
}
#brevet_scores_list, #bac_scores_list{float:left;}
#brevet_pub_sky, #bac_pub_sky{float:right;}

#brevet_main .bloc_pub_megabanner div, #bac_main .bloc_pub_megabanner div{margin:auto;}
#brevet_main table, #bac_main table{margin: 40px 0px;}

#brevet_scores_list #hiscores_list table tr, #bac_scores_list #hiscores_list table tr {
    height: 69px;
}
#brevet_scores_list #hiscores_list table td, #bac_scores_list #hiscores_list table td {
    padding: 5px 10px;
}

#brevet_scores_list #hiscores_list table .thumb_container, #bac_scores_list #hiscores_list table .thumb_container {
    width: 200px;
    position: relative;
}
#brevet_scores_list #hiscores_list table .thumb_container .arrow_big, #bac_scores_list #hiscores_list table .thumb_container .arrow_big {
    position: absolute;
    z-index: 200;
    top: 49px;
    left: 65px;
}

/* _DEBUG (php cache/no cache debug console) plugins/vp_debug/00_debug_top.php */
/*-----------------------------------*/
#_DEBUG{color:#FFF;
		text-align:left;
		
		background:#000000;
		border:solid 1px #ccc;
		padding:1px 10px;
		font-family:lucida, Times New Roman, Times, serif;
		letter-spacing:1px;
		z-index:2000; 
		position:fixed;
		bottom:0px;
		right:3px;
		clear:both;
		float:right;
		opacity : 0.6;
		filter : alpha(opacity=60);
		-webkit-border-radius: 6px; -moz-border-radius: 6px;}

/* vp_chat */
/*-----------------------------------*/
#chat_bloc{
	position: fixed; 
	bottom:0px; 
	right:5%; 
	z-index:2000; 
	width:200px; 
	text-align: right;
}
#chat_bloc.aboveAll{
	z-index:2002; 
}
#chat_display_button{border-radius: 6px 6px 0 0;padding: 2px 13px;}
#chat_canal_title{position:relative; text-align: center; font-weight: bold; padding: 4px;}
#chat_btn_resize {
    position: absolute;
    left: 6px;
    top: 5px;
    font-size: 0.8em;
}

#chat_main{
	height: 300px; 
	position:relative;
	background:#FFC;
	box-shadow: 0px 0px 13px rgba(0,0,0,0.2);
}

#chat_content_result{
	overflow-y: auto; 
	height: 225px; 
	padding:5px; 
/*	border:solid 1px #DDD; */
	border-left:none;
	margin-top: 10px;
}
#it_chat_content{
	display:block; 
	position: absolute;
	bottom: 7px;
	border: none;
	background: #FD8;
	line-height: 20px;
	padding: 2px 10px;
	width: 180px;
	left: 10px;
	border-radius: 10px;
}
body:not(.user_is_member) #it_chat_content{
	display: none;
}
.chat_unit{
	border-bottom:solid 1px #DDD; 
	padding:3px 3px; 
	text-align: left;
	background-color: inherit;
}
.chat_author{color:#C60;}
.chat_author .ico_btn{font-size: 0.7em;}
.chat_content{}

#chat_main #cb_canal{
	display: none;
}

body.dark_page #chat_main{
	background: #1e5d9eEE; /*var(--colBlueDark);*/
	border-radius: 6px 0 0 0 ;
	backdrop-filter: blur(4px);
}
body.dark_page #chat_content_result{
	scrollbar-color: var(--colBlueLight) var(--colBlueDark);
	scrollbar-width: thin;
}
body.dark_page .chat_author{
	color: #FFFFFF88;
}
body.dark_page .chat_author .btn_reply{
	opacity: .7;
}
body.dark_page .chat_author .btn_reply:hover{
	opacity: 1;
}
body.dark_page .chat_unit{
	border-bottom: solid 1px #ffffff33;
}
body.dark_page #it_chat_content{
	background: #FFFFFF77;
	color : #FFF;
}
body.dark_page #it_chat_content::placeholder{
	color: #FFFFFF99;
}


/* resize */
#chat_bloc.large{width: 500px;max-width: 80%;}
#chat_bloc.large #chat_main{height: 510px;}
#chat_bloc.large #chat_content_result{height: 435px;}
#chat_bloc.large #it_chat_content{width: 95%;}

/*new msg*/
.chat_unit.new{background-color: #FD8;}

/*section_alert_all_pags*/
#section_alert_all_pages{margin-bottom: 0px; background:#FFF1AF;}
#section_alert_all_pages .alert.alert-warning{border:none;margin-bottom: 0px;}
#section_alert_all_pages .alert.alert-danger{margin-top:20px;}

/* sdjc links */
#sdjc_links{
	margin-top: 50px;
}
#sdjc_links .btn img {
    width: 250px;
}

/* table_user_ranking_table_container */
/*-----------------------------------*/
#table_user_ranking_table_container{}
#user_ranking_table_menu li{display:inline-block; margin:5px;}


/* Pages lists of all games (AJOUTS OLIVIER) */
/*-----------------------------------*/


#ListOfAllGames h3{text-align: center; font-size: 20px;margin-bottom: 2px;}
.listOfGames{
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
}

.blocListOfGames{
	background-color:#EEF2F7;
	border-bottom-left-radius:10px;
  	border-bottom-right-radius:10px;
  	border-top-left-radius:10px;
  	border-top-right-radius:10px;
  	padding:10px 0px 0px 0px;
  	margin-bottom: 20px;

}
.thb2list{
	margin:3px 10px 15px 10px;
	line-height: 0.0em;
	text-align: right;
	font-size: 12px;
	font-weight: bold;
	color:#c1c1c1;
}
/*-----------------------------------*/


/*#########################################
# >>	IMG_QUESTION
#########################################*/

#img_question_container{
	/*margin:0px 0px 50px 0px;
	background: var(--bgTranspDark);
	border-radius: 5px;
	padding:20px;*/
}
#img_question_img_bloc{
	position: relative;
}
#img_question_img_satellite{
	position: absolute;
	top:-50px;
	left:130px;
	z-index: 2;
	width:280px;
}
#img_question_img_current{
	width: 650px;
	border-radius: 10px;
	border:solid 2px var(--colYellow);
}
#form_img_question{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;

	margin-top:30px;
	margin-bottom:30px;
}

.btn_img_question{
	margin:5px 20px;
	width:300px;
	font-size: 1.2em;
	background: var(--colYellow);
	border-color: var(--colYellow);
}

#img_question_img_last{
	width: 400px;
	border-radius: 10px;
	border:solid 2px var(--colBlueLight);
}

.row_col_blue hr{
	border-color: var(--colBlueLight);
}



/*#########################################
# >>	PREMIUM SUB
#########################################*/
/* The div hosting the buttons to manage the premium (00_premium_page_content) */
/*
#premium_sub_container{
	text-align: left;

	background: none !important;

}
#premium_sub_container.bloc_gold{
	border:none;
}
.btn_mng_premium{
	font-size: 2em;
	font-weight: 600;
}

#btn_premium_subscribe{
	box-shadow:var(--shadow3D);
	border: none;
}

#btn_pay_with_paypal_no_recurrent{
	margin-bottom: 20px;

}
.btn_premium{

	padding: 10px 15px;
	max-width: 220px;
	border: solid;
	border-radius: 10px;
	border-width: 3px;
	text-align: center;
	font-weight: 800;
	box-shadow:var(--shadow3D);
	border: none;

}
.btn_premium_orange{
	color: #FFF;
	background-color: #ff904d;
	border-color: #ff904d;
	box-shadow: var(--shadow3D);
	width: 245px;
	margin-left: 85px;
}
.btn_premium_orange:hover{
	color: #000;
}

.btn_premium_transparent{
	color: #FFF;
	background-color: var(--colBlueLight);
	border-color: #FFF;
}
*/
/* bloc_premium_advantages_text */
/*-----------------------------------*/
/*#bloc_premium_advantages_text {
	border-radius: 10px;
	margin-top: 30px;
}
#bloc_premium_advantages_text .bloc_bg_ico {
	top: auto;
	left: auto;
	bottom: -550px;
	right: -350px;
}

#btn_premium_unsubscribe, #btn_pp_premium_unsubscribe{

}

.paypal_btn_container {
	background: rgba(255, 255, 255, 0);
	border-radius: 20px;
	margin: auto;
}
*/

/* >> STRIPE v2 */
/*-----------------------------------*/
.stripeColor{
	color: #96f;
	font-size: 1.2em;
}
.stripeBtn, .btn_stripe{
	background: #96f;
	color: #FFF;
	font-size: 1.2em;
}
.btn_stripe:hover{
	color: #FFF;
	opacity: .8;
}
.st2_checkout_bloc{
	text-align: center;
	padding: 20px;
	background: var(--colYellow);
	max-width: 500px;
	border-radius: 5px;
}
.st2_checkout_bloc .price_bloc{
	margin-bottom: 20px;
	font-size: 1.5em;
}
.st2_checkout_bloc .price_bloc b{

	font-size: 1.5em;
}
#premium_promo_code_bloc #it_promo{
	width: 120px;
	border-radius: 3px;
}



/* AJOUTS OLIVIER POUR PAGE PREMIUM */
/*-----------------------------------*/
/*#page_premium{*/
/*	margin-top: -40px;*/
/**/
/*	padding-right: 0px;*/
/*	padding-left: 0px;*/
/*}*/
#page_premium {
	margin-top: 10px;
	padding-right: 0px;
	padding-left: 0px;
	background: #eee;
	max-width: 460px;
}

#premium_page_container{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.blue_block_wide {
	background-color: var(--colBlueLight);
	width: 100%;
	color: #FFF;
	padding: 20px 50px;
	padding-bottom: 28px;
	margin-top: -1px;
}

.blue_block_wide h2{
	color:#FFF;
}

.grey_bloc{
	background: #EEE;
	color:#444;
}

.grey_bloc h2, .grey_bloc h3{
	color:#444;
}

.title_premium{

}

.block_payment_securized{
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
	margin-top: 15px;
	margin-bottom: 35px;
	/*max-width: 400px;*/
}

.block_payment_securized_title {
	margin: 5px 0px;
	font-size: 1em;
	font-weight: 700;
}

#page_premium h2{
	font-size: 3em;

}
#page_premium h3{
	font-size: 2.5em;

	font-weight: bold;
}
.page_premium_title{
	margin-top:0px;
	margin-bottom: 45px;
}
#page_premium baseline{
	font-size: 1.3em;
}
.bnt_premium_container{
	margin-top: 30px;
}

.ppPlanButton {
	margin-top: 10px;
	/* font-size: 0.7em !important;*/ /* commented 221021 parcours v2*/
}
.block_premium_2{
	text-align: center;
	padding: 30px 0px;
	color: #000;
	
}
.text_block_2{
	margin: auto;
	font-size: 1.6em;
}
#section_table_premium_adv .text_block_2 
.block_3_avantages{
	margin: auto;
	width: 100%;
	text-align: center;
}
.block_avantages{
	margin: 20px 0px;
}
.symb_avantages{
	width: 180px;
	height: 180px;
	background-color: #fed758;
	border-radius: 100px;
	display: flex;
	align-items: center;
	border: solid;
	border-width: 5px;
	border-color:#fed758 ;
	margin: auto;
	margin-bottom: 15px;

}
.symb_avantages img{
	width: 90%;
	margin: auto;
}

.block_premium_3{
	text-align: center;
	color: #000;
}

.list_avantages{
	position: relative;
	margin: auto;
	margin-top: 50px;
	margin-bottom: 30px;
	padding: 20px;
	padding-left: 30px;
	border-radius: 20px;
	background-color: #FFF;
	text-align: left;
	color: #000;
}
.list_avantages_titre{
	color: #ff904d ;
	font-size: 3em;
	font-weight: bold;
	margin-bottom: 10px;
}
.list_avantages_baseline{

}
.separator_black{
	width: 40%;
	background-color: #000;
	height: 5px;
	border-radius: 3px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.list_avantages_text_1{
	color: #ff904d ;
	font-size: 1.5em;
	font-weight: bold;
	margin-left: 15px;
}
.list_avantages_text_2{
	margin-left: 15px;
}
.list_avantages .td1{
	width: 30px;
}
.list_avantages img{
	width: 120%;
}
.list_avantages td{
	height: 80px;
}
.list_avantage_bnt_premium_container{
	text-align: center;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 40px;
}
.btn_premium_orange_big{
	background: none;
	background: var(--bgGradYellow);
	box-shadow: var(--shadow3DPremium);
	border-radius: 10px;
	border: none;
	color: var(--colPremium);
	font-weight: 700;
	line-height: inherit;
	font-size: 1.3em;
	font-family: font_light;
	line-height: 1.4em;
}
.btn_premium_orange_big:hover{
	color:var(--colPremium);
}
.btn_premium_orange_big b{
	font-size: 1.5em;
	font-weight: 800;
	font-family: arial;
}
.btn_premium_orange_big:hover{
	background: var(--colYellowLight);
}
.table_premium_adv .st2PayBtn{
	width: 180px;
}

.table_premium_adv .tdImportant{
	background: #FFCC9944;
}
.table_premium_adv .thPrices b{
	font-size: 1.5em;
}

/* The table_premium_adv in 00_premium_page_content.php */
/*-----------------------------------*/
.table_premium_adv{

	width: 100%;

}

.table_premium_adv tr{
	border-bottom: solid 1px #00000011;
}

.table_premium_adv th{
	text-align: center;
}




/* misc */
/*-----------------------------------*/

.link_CGV{
	text-align: center;
	color: #FFF;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}
.link_CGV a{
	color: #FFF;
	font-weight: 700;
}


#top_page_button_in_content{
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 50px;
	height: 50px;

	border-radius: 50px;
	display: flex;
    justify-content: center;
    align-items: center;
}
.top_page_button_in_content .fa{
	font-size: 1.5em;
}

#top_bloc_with_payment_button{
	
	z-index: 200;
	padding:50px 20px 30px 20px;
}

#btn_I_discover_the_premium_offers{
	display: none;
}
.user_is_member #btn_I_discover_the_premium_offers{
	display: inline-block;
}


#bloc_facebook{
	display: none;
}
#layout_1_right{
	display: none;
}


#pp_plans_buttons_list{

	display:flex;
	justify-content: center;
	align-items: center;


}
#pp_plans_buttons_list li{
	font-size:2em;
	text-align: center;
	padding:20px;
	border:solid 2px #FFF;
	border-radius : 20px;
	width:300px;
	position: relative;
}

#paypal-button-container_bloc{
	text-align: center;
	position: relative;
}

#page_premium_promo_bloc{
	font-size: 1.5em;
}

/*#########################################
# >>	Paypal pro page
#########################################*/
.premium_bloc{
/*	background: #00000011;*/
	position: relative;
	padding: 20px;
	text-align: center;
	border-radius: 2px;

	background: var(--colPremiumBg) !important; 
	color: var(--colPremium) !important;
}
/*.premium_bloc::after {
	content: '';
	position: absolute;
	top: 5px;
	right: 5px;
	width: 10px;
	height: 10px;
	background-color: white;
	border-radius: 50%;
}*/
.premium_bloc b{
	font-size: 1.3em;
}
.premium_bloc h2, .premium_bloc i.fa, .premium_bloc h3{
	color: var(--colPremium);
}




/* banner_top_promo_premium */
/*-----------------------------------*/
#banner_top_promo_premium{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px;
}
#a_banner_top_promo_premium{
	color:inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}



/*#########################################
# >>	Diagonal warning
#########################################*/
.diagonal_warning {
	position: absolute;
	z-index: 2;
	background: #4ED22C;
	color: #FFF;
	transform: rotate(-35deg);
	padding: 2px 5px;
	box-shadow: 0px 4px 5px rgb(0 0 0 / 30%);
	top: 10px;
	left: -30px;
	border-radius: 5px;
	border: solid 2px #FFF;
}

#dw_on_yearly_pp_button{
	font-size: 0.7em;
}
#dw_on_yearly_th {
	top: auto;
	left: auto;
	position: relative;
	transform: rotate(0deg);
}



/*#########################################
# >>	btn_close
#########################################*/
/* <i id='btn_close_XXXX' class='fa fa-times-circle ico_btn btn_close'></i>*/
.btn_close{
	position:absolute;
	right:10px;
	top:10px;
	z-index: 10;
	font-size: 1.5em;
	color:#FFF;
	text-shadow: var(--shadowBlueLight);
	cursor: pointer;
}

#btn_close_pp_sub_base:hover{
	color:inherit;
	opacity: .7;
}
#btn_close_pp_sub_base {
	right: 0px;
	top: -33px;
}



/*#########################################
# >>	CHALLENGES
#########################################*/
#challenges_bloc .chl_list{
	display: flex;
	justify-content: center; /*flex_start; /*space-around;*/
	flex-wrap: wrap;

}

#row_chl_bloc{
	margin-top:30px;
}



.chl_thumb {
	position: relative;
	width: 230px;
	height: 100px;
	box-shadow: 0px 4px 5px rgb(0 0 0 / 30%);
	margin: 10px;
	display: flex;
	justify-content: left;
	/*border-radius: 5px;*/
	overflow: hidden;
}

.chl_thumb.grey_thumb{
	filter: grayscale(1);
	background: #CCC;
	opacity: .6;

}

#challenges_current_bloc .chl_thumb{
	/*width:260px;*/
}

.chl_thumb.grey_thumb .chl_thumb_header{
	background: #777;
}

.chl_thumb_header .chl_date div {
	display: inline-block;
}

.chl_thumb_header {
	background: #000;
	color: #FFF;
	width: 20px;
	height: 80%;
	position: relative;
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	display: flex;
	justify-content: space-between;
}

.chl_thumb_header .chl_date {
	display: flex;
	justify-content: space-between;
	padding: 1px;
	height: 100%;
	padding: 8px 2px;
}

.chl_thumb_header .mName {
	font-weight: 800;
}

.chl_thumb_header .yName {
	font-weight: 200;
}
/*
.chl_thumb_header .chl_step {
	background: #fff;
	color: #000;
	width: 100%;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: monospace;
	font-weight: 300;
	letter-spacing: -0.15em;
	transform: rotate(90deg);
}*/

.chl_thumb_main {
	width: 100%;
	padding: 10px;
	height: 80%;
}

.chl_thumb_main .bloc_bg_inner{
	text-align: center;
	/*font-family: monospace; */
	display: flex; 
	align-items: center;
	justify-content: space-evenly;
	color: #000;
	font-weight: 600;

}


.chl_thumb .chl_thumb_main .bloc_bg_ico {
	color: rgba(0,0,0,0.4);
	mix-blend-mode: soft-light;
	font-size: 14em;
	bottom: -80px;
	top: auto;
	left: -100px;
}


.chl_thumb.chl_group_plays i.bloc_bg_ico:before{
	content: "\f140";
}
.chl_thumb.chl_group_plays i.bloc_bg_ico{
	font-size: 14em;
}
.chl_thumb.chl_group_games i.bloc_bg_ico:before{
	content: "\f292";
}
.chl_thumb.chl_group_games i.bloc_bg_ico {
	font-size: 9em;
	bottom: -25px;
	left: -50px;
}

.chl_thumb.chl_group_hof i.bloc_bg_ico:before{
	content: "\f022";
}
.chl_thumb.chl_group_hof i.bloc_bg_ico {
	font-size: 8em;
	bottom: -20px;
	left: -31px;
	transform: rotate(-45deg);
}

.chl_thumb.chl_group_parent0 i.bloc_bg_ico:before{
	content: "";
}
.chl_thumb.chl_group_parent0 i.bloc_bg_ico {
	width: 50%;
	height: 100%;
	background: url(../images/trav/maps_svg_bg.svg);
	background-position: 99% 12%;
	background-size: 231px;
	top: 0px;
	left: 0px;
	opacity: .4;
}
.chl_thumb.chl_group_parent1 i.bloc_bg_ico:before{
	content: "";
}
.chl_thumb.chl_group_parent1 i.bloc_bg_ico {
	width: 50%;
	height: 100%;
	background: url(../images/trav/maps_svg_bg.svg);
	background-position: 1% 12%;
	background-size: 231px;
	top: 0px;
	left: 0px;
	opacity: .4;
}

.chl_thumb.chl_group_parent5 i.bloc_bg_ico:before{
	content: "";
}
.chl_thumb.chl_group_parent5 i.bloc_bg_ico {
	width: 50%;
	height: 100%;
	background: url(../images/trav/maps_svg_bg.svg);
	background-position: 2% 90%;
	background-size: 231px;
	top: 0px;
	left: 0px;
	opacity: .4;
}

.chl_thumb .chl_title {
	letter-spacing: 0.05em;
	width: 60%;
	color: #FFF;
	text-shadow: 1px 1px 2px black;
	font-size: 1.1em;
	font-family: font_light;
	line-height: 1.2em;
}

.chl_thumb .chl_title b{
	font-size:1.3em;
	display: block;
	font-family: font_bold;
}

.chl_thumb .chl_nb{
	font-size: 3em;
	width:40%;
	color: #FFF;
	text-shadow: 1px 1px 2px black;
}


.month_bg_1{
	background-color: #ADD413;
}
.month_bg_2{
	background-color: #76BFA6;
}
.month_bg_3{
	background-color: #FF4D34;
}
.month_bg_4{
	background-color: #F2D355;
}
.month_bg_5{
	background-color: #E48830;
}
.month_bg_6{
	background-color: #00876c;
}
.month_bg_7{
	background-color: #DA64C1;
}
.month_bg_8{
	background-color: #FEB600;
}
.month_bg_9{
	background-color: #6C2627;
}
.month_bg_10{
	background-color: #55A917;
}
.month_bg_11{
	background-color: #F02D99;
}
.month_bg_12{
	background-color: #4683DE;
}


.chl_thumb_and_range .progress_container{
	width: 80%;
	margin: auto;
}
.chl_thumb_and_range .progress_container .progress-bar {
	background: #add414;
}

.chl_thumb_and_range .indicators .nb_goal{
	text-align: right;
}


.chl_thumb_footer {
	position: absolute;
	bottom: 0px;
	left: 20px;
	background: #FFF;
	height: 20%;
	width: calc(100% - 20px);
	text-align: right;
	padding-right: 10px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}



.chl_thumb_footer .chl_nb{
	display: inline-block;
	width: 25%;
}

.chl_thumb_footer .chl_steps{
	margin-right: 30px;
}
.chl_thumb_footer .chl_thumb_step {
	font-size: 0.9em;
	color: #CCC;
}

.chl_thumb_footer .chl_stars{
	font-size: 1.2em;
}

.chl_stars{
	color: #FEE145;
}

.chl_stars i.grey {
	color: #CCC;
}




/*#########################################
# >>	PROGRESS
#########################################*/
.progress_container .progress{
	height: 10px;
	margin-bottom: 0px;
}
.progress_container .indicators{
	display: flex;
	justify-content: space-between;
	color:#AAA;
	font-family: monospace;
}


/*#########################################
# >>	Onboard_tunnel

<div class='popup_overlay popupOTunnel_overlay flex'>
	<div class='popup popupOTunnel'>
		<i class='fa fa-times-circle btn_close'></i>
		<div class='popupOTunnel_avatar'></div>
		<div class='content flex flex_col'>
			<h2>${pTitle}</h2>
			<p>${pMainText}</p>
		</div>

	</div>
</div>

#########################################*/
.popupOTunnel_overlay{
	position: fixed;
	top:0px;
	left:0px;
	height: 100vh;
	width: 100vw;
	background: rgba(0,0,0,.3);
	z-index: 1300;
}

.popupOTunnel {
	position: relative;
	padding: 30px 60px;
	background: linear-gradient(0deg, rgba(76,54,189,1) 10%, rgba(5,98,213,1) 60%,  rgba(5,98,213,1) 100%);
	border-radius: 10px;
	box-shadow: var(--shadowBlueVeryBig3D);
	max-width: 90%;
}
.popupOTunnel_avatar {
	background: url(../images/main/popup_avatar_01.png) no-repeat;
	width: 102px;
	height: 102px;
	position: absolute;
	top: -50px;
	right: 40px;
	border-radius: 50%;
	border: solid 12px #202336;
	outline: 5px solid rgba(5,98,213,1);
	background-size: 79px;
}
.popupOTunnel .btn_close {
	opacity: 0.4;
	right: 5px;
	top: 5px;
	font-size: 2em;
}

.popupOTunnel h3{
	font-size: 1.9em;
	font-weight: bold;
	margin-bottom: 20px;
}	

.popupOTunnel p {
	font-size: 1.3em;
	line-height: 1.4em;
}

.popupOTunnel .gameThumbsBloc{
	flex-wrap: wrap;
	justify-content: center;
}

.popupOTunnel .game_big_thumb_bloc{
	text-align: center;
	margin:10px;
}

.popupOTunnel .game_big_thumb {
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	margin-bottom: 15px;
	border-radius: 70px 15px 8px 8px;
	width: 180px;
	height: 96px;
	transition: background-size .4s;
	box-shadow: var(--shadowBlueSmall);
}

.popupOTunnel .game_big_thumb:hover{
	background-size: 110%;
}

.popupOTunnel .game_big_thumb_bloc{
	position: relative;
}

.popupOTunnel .game_big_thumb_bloc .game_done {
	position: absolute;
	top: -30px;
	color: var(--colGreen);
	font-size: 7em;
	text-shadow: 2px 0px 10px rgb(0 0 0 / 40%);
	left: 50%;
	-webkit-text-stroke: 3px white;
	text-stroke: 3px white;

	/*background-image: linear-gradient( 73.1deg,  rgba(34,126,34,1) 8%, rgba(99,162,17,1) 86.9% );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-background-clip: text;
	-moz-text-fill-color: transparent;*/
}

.popupOTunnel .game_title{
	width:150px;
	margin-top:-15px;
}


/*#########################################
# >>	latmenu
#########################################*/
#latmenu {
	background: var(--bgTranspDarkPlus);
	width: 400px;
	position: fixed;
	z-index: 500;
	top: 0px;
	right: -360px;
	height: 100%;
	transition: right .5s, transform .5s; 
}

#latmenu.is_opened{
	right:-40px;
	transform: skewX(-4deg);
}

#latmenu_inner{
	display: flex;
	flex-direction: column;
	height: 100%;

}
#latmenu_header{
	height: 40px;

}
#btn_latmenu_open{
	font-size: 1.9em;
}

#btn_latmenu_open{
	padding:5px;
}

#latmenu_body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-basis: auto;
	flex-grow: 1;
	height: 100%;
	padding: 20px;
	padding-bottom: 10px;
	padding-right: 60px;
}

#latmenu_body h2{
	margin-top: 10px;
	margin-bottom: 15px;
}

/* latmenu img_question */
/*-----------------------------------*/
#latmenu_img_question_bloc img{
	width:100px;
}
#latmenu_img_question_bloc p{
	display: none;
}

/* latmenu news */
/*-----------------------------------*/
#latmenu_news_bloc h2{
	margin-top:40px;
}
#latmenu_news_bloc .other_news{
	display: flex;
	align-items: center;
}
#latmenu_list_other_news .other_news:nth-child(3){
	display: none;
}

#latmenu_news_bloc .other_news img{
	width:100px;
	height: 70px;
	border:solid 3px #FFF;
}
#latmenu_last_news .text_last_news, #latmenu_last_news .button_read_last_news{
	display: none;
}

#latmenu_list_other_news .other_news .readmore{
	color:#FFF;
}

#latmenu_news_bloc .date_news{
	display: none;
}

#latmenu_body h3{
	margin-bottom: 5px;
}

/*#latmenu_news_bloc .block_contNews{
	display: none;
}*/

/* #latmenu bloc_bottom */
/*-----------------------------------*/
#latmenu .bloc_bottom{
	padding-left: 20px;
}

#latmenu_network_bloc ul{
	display: flex;
	justify-content: center;
	align-items: center;
	margin:0px;
}
#latmenu_network_bloc li{
	display: inline-block;
	margin:10px;
}

#latmenu_network_bloc .ico_white{
	color:#FFF !important;
	font-size: 2em;
}


/* vp_survey */
#modalSurvey .modal-body .row{margin-top:25px;}
#modalSurvey .answer_button{margin-bottom : 10px; font-weight: bold; white-space: normal;}



/*#########################################
# >>	users_online
#########################################*/
#users_online_bloc{
	position: relative;
}

#users_online_main{
	top: 40px;
	height: 300px;
	width: 270px;
	position: absolute;
	z-index: 20;
	background: #1e5d9eEE;
	border-radius: 6px;
	backdrop-filter: blur(4px);
	overflow: hidden;
}
#users_online_main .title{
	color: #FFF;
	font-family: font_light;
}
#users_online_content{

	height: 100%;
	overflow-y: scroll;
	padding: 10px;
	padding-top:0px;
	text-align: left;
	scrollbar-color: var(--colBlueLight) var(--colBlueDark);
}
#ul_users_online {
	
}
#ul_users_online li{
	margin-bottom: 5px;
}
#ul_users_online li .name a{
	color: #fff;
}
/*#users_online_bloc{
	position: fixed;
	bottom: 0px;
	right: calc(5% + 42px);
	z-index: 2001;
	width: 200px;
	text-align: right;
}
#btn_users_online{
	border-radius: 6px 6px 0 0;
	padding: 2px 13px;
}
#users_online_main{
	height: 300px;
	position: relative;
	background: #1e5d9eEE;
	border-radius: 6px 0 0 0;
	backdrop-filter: blur(4px);
	padding-top: 5px;
}
#users_online_main .title{
	color: #FFF;
	font-family: font_light;
}
#ul_users_online {
	height: 100%;
	overflow: auto;
	padding: 10px;
	padding-top:0px;
	text-align: left;
	scrollbar-color: var(--colBlueLight) var(--colBlueDark2);
}
#ul_users_online li{
	margin-bottom: 5px;
}
#ul_users_online li .name a{
	color: #fff;
}*/



 /*#########################################
 # >>   checkbox-wrapper-2
 # USAGE : 
 #   <div class="checkbox-wrapper-2">
 #     <input type="checkbox" class="sc-gJwTLC cbw2">
 #   </div>
 #########################################*/
.checkbox-wrapper-2 .cbw2 {
  appearance: none;
  background-color: #c9cbcd;
  border-radius: 72px;
  border-style: none;
  flex-shrink: 0;
  height: 20px;
  margin: 0;
  position: relative;
  width: 30px;
}

.checkbox-wrapper-2 .cbw2::before {
  bottom: -6px;
  content: "";
  left: -6px;
  position: absolute;
  right: -6px;
  top: -6px;
}

.checkbox-wrapper-2 .cbw2,
.checkbox-wrapper-2 .cbw2::after {
  transition: all 100ms ease-out;
}

.checkbox-wrapper-2 .cbw2::after {
  background-color: #fff;
  border-radius: 50%;
  content: "";
  height: 14px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 14px;
}

.checkbox-wrapper-2 input[type=checkbox] {
  cursor: default;
}

.checkbox-wrapper-2 .cbw2:hover {
  background-color: #b1b3b5;
  transition-duration: 0s;
}

.checkbox-wrapper-2 .cbw2:checked {
  background-color: var(--colGreenAlt);
}

.checkbox-wrapper-2 .cbw2:checked::after {
  background-color: #fff;
  left: 13px;
}

.checkbox-wrapper-2 :focus:not(.focus-visible) {
  outline: 0;
}

.checkbox-wrapper-2 .cbw2:checked:hover {
  background-color: var(--colGreenDark);
}



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

			FOR MOBILES, see css/vpMain_mobile_005.css

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




@media (min-width: 768px) and (max-width: 992px) {
	/*sm*/
	body.is_game_page.dev #game_outer_container_2 {
		padding: 0px;
		/*box-shadow: none;
		background: none;*/
		width: auto;
		margin: auto;
		border-radius: 14px;
	}

	.popupOTunnel {
		max-width: 550px;
	}

	#game_search_in_navbar_header{
		display:none;
	}

	.bloc_md{
		width: 300px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	/*md*/
	.popupOTunnel {
		max-width: 740px;
	}

	.vp_navbar-header, #main-nav{
		padding-right: 25px !important;
	}


}

@media (min-width: 1200px) {
	/*lg*/
	.popupOTunnel {
		max-width: 740px;
	}

	.vp_navbar-header, #main-nav{
		padding-right: 25px !important;
	}

}


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


}



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



}