body, html {
	margin:0;
	width:100vw;
	height:100vh;
	/*background-image: url('../img/counterstrokesans.png');*/
	/*background-image: url('../img/counterstrokedesat.png');*/
	background-image: url('../img/counterstrokesansemph.png');
	background-position: center top;
	background-size: cover;
	font-weight: 400;
	font-family: 'Arvo';
	font-size: 10pt;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-end;
	padding: 0px;
	box-sizing: border-box;
	overflow:hidden;
}

input{
	font-family: 'Arvo';
	font-size:11pt;
	border-radius: 0px;
	border:0;
	outline: none;
}

table{
	table-layout: fixed;
}

.titreniveau{
	font-size:24pt;
	padding:8px;
}

.nomniveau{
	font-size:20pt;
	padding:8px;
}

.descriptionniveau{
	font-size:12pt;
	padding:8px;
	text-align: justify;
}

.encart{
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	background-color:rgba(20,20,20,0.67);
	width:20vw;
	padding:18px;
}

#niveauxpe{
	position: fixed;
	z-index: 100;
}

.niveaupe{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color:white;
	padding:40px;
	display:block;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	pointer-events: none;
}

#playlegendary{
	background-color:rgba(200,80,160,0.8);
	color:white;
	padding:6px 8px;
	border-radius:4px;
	margin:10px 0px 0px 0px;
}

#playlegendary:hover{
	background-color: rgba(160,160,160,0.8);
}

#moreiogames{
	background-color:rgba(20,80,160,0.8);
	color:white;
	padding:6px 8px;
	border-radius:4px;
	margin:10px 0px 0px 0px;
}

#moreiogames:hover{
	background-color: rgba(160,160,160,0.8);
}

#reseauxsociaux{
	position:fixed;
	top:16px;
	right:16px;
	display:flex;
	flex-direction:row;
	align-items: flex-start;
	padding:10px;
	justify-content: center;
	right:calc(100% + 16px);
}

.imgreseauxsociaux{
	width:30px;
	height:30px;
	margin:0px 12px;
}

.pubgoogledroite{
	margin:0px 0px 100px 0px;
	/*min-width: 250px;*/
	box-sizing: border-box;
	width:20vw;
	overflow:hidden;
	z-index:1;
}

.pubgooglebas{
	margin:12px;
	overflow:hidden;
	z-index:1;
}

.chargementpetit{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	/*background-color: rgba(255,255,255,95);*/
	background-image: radial-gradient(closest-side,rgba(255,255,255,0.7),rgba(236,236,236,0.7));
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tournicotipetit{
	position:relative;
	width:20px;
	height:20px;
}

.imagetitre{
	max-height:140px;
	margin:0px 0px 0px 0px;
	z-index: 62;
	animation:coeurtitre 5s ease-in-out infinite;
}

.infobulle{
	z-index: 100;
	padding:8px;
	font-size: 10pt;
	display: none;
	position: absolute;
	background-color: rgba(30,30,30,0.85);
	color:white;
	border-radius: 4px;
}

@keyframes coeurtitre{
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(1);
	}
	52%{
		transform: scale(1.015);
	}
	65%{
		transform: scale(1);
	}
	67%{
		transform: scale(1.015);
	}
	85%{
		transform: scale(1);
	}
}

@keyframes coeurtitre3s{
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(1);
	}
	55%{
		transform: scale(1.02);
	}
	80%{
		transform: scale(1);
	}
	85%{
		transform: scale(1.02);
	}
	100%{
		transform: scale(1);
	}
}

#menujouer{
	width:40vw;
	box-sizing:border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding:12px 24px;
}

#typesparties{
	/*width:calc(60vw - 336px);*/
	width:400px;
	position:relative;
	display: flex;
	border-radius: 4px;
	border:4px solid rgba(255,255,255,0.64);
	/*box-shadow: 0px 0px 38px 0px rgba(20,20,20,0.4);*/
	opacity:1;
	/*box-sizing: border-box;*/
	z-index:104;
	/* margin-bottom: 6vh; */
	flex-direction: column;
	align-items: stretch;
	justify-content: end;
	user-select: none;
}

#boutonsparties{
	width:100%;
	position:relative;
	background-color: rgba(120,120,120,0.4);
	display: flex;
	border-radius: 0px;
	/*box-shadow: 0px 0px 38px 0px rgba(20,20,20,0.4);*/
	opacity:1;
	box-sizing: border-box;
	z-index:8;
	overflow-x:hidden;
	overflow-y:auto;
}

.atransitionner{
	max-height: 0px;
	box-sizing: border-box;
	overflow-y: hidden;
	transition: all 0.6s ease-in-out;
}

.boutonjoueracte{
	color:white;
	cursor:pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing:border-box;
	padding:8px;
	width:100%;
	margin:0px;
	font-size:12pt;
	background-color: rgba(82,82,82,0.72) !important;
	border: solid rgba(255,255,255,0.7);
	border-width:2px 0px 0px 0px;
}

.boutonjoueracte:hover{
	opacity: 0.8;
}

.boutonspartieslignes{
	flex-direction: column;
	align-items: stretch;
	justify-content: end;
}

.boutonspartiescarres{
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: start;
}

.boutonspartiescarres > div:not(.boutonjoueracte) {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing:border-box;
	padding:8px;
	width:25%;
	min-height:60px;
	margin:0px;
	font-size:10pt;
}

#pseudo{
	background-color: rgba(255,255,255,0.94);
	border-radius: 0px;
	border:0;
	outline: none;
	text-align: center;
	font-family: 'Arvo';
	padding:10px 0px;
	margin:0px;
	position:relative;
	z-index:4;
}

#choixmode{
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	align-items: stretch;
	background-color: rgba(220,220,220,0.8);
	min-height:30px;
}

#choixserver{
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	align-items: stretch;
	background-color: rgba(220,220,220,0.8);
	min-height:30px;
}

.unmode{
	color:rgba(160,160,160,0.9);
	padding:8px;
	text-align: center;
	width: 50%;
	min-height:16px;
}

.unmode:hover{
	cursor: pointer;
	background-color: rgba(240,240,240,0.9);
}

.unmodeactif{
	background-color: rgba(120,120,120,0.86);
	color:white;
}

.unmodeactif:hover{
	background-color: rgba(132,132,132,0.86);
}

.bouton{
	/*background-color: rgba(100,180,100,1);*/
	background-color: rgba(255,160,60,0.94);
	border-radius: 0px;
	padding:8px 8px;
	font-size:12pt;
	margin:0px;
	color:white;
	transition: all 0.4s ease-in-out;
	cursor:pointer;
	position: relative;
	text-align: center;
	z-index:4;
}

.bouton:hover{
	opacity: 0.8;
}

.niveaupossible{
	/*background-color: rgba(100,180,100,1);*/
	background-color: rgba(100,210,100,0.94);
	border-radius: 0px;
	border: 0px solid rgba(255,255,255,0.24);
	padding:8px 8px;
	font-size:12pt;
	margin:0px;
	color:white;
	transition: all 0.1s ease-in-out;
	cursor:pointer;
	position: relative;
	text-align: center;
	z-index:4;
}

.niveaupossible:hover{
	opacity: 0.8;
}

.niveauactuel{
	/*background-color: rgba(100,180,100,1);*/
	background-color: rgba(255,200,60,0.94);
	border-radius: 0px;
	border: 0px solid rgba(255,255,255,0.24);
	padding:8px 8px;
	font-size:12pt;
	margin:0px;
	color:white;
	transition: all 0.1s ease-in-out;
	cursor:pointer;
	position: relative;
	text-align: center;
	z-index:4;
}

.niveauactuel:hover{
	opacity: 0.8;
}

.niveaugrise{
	color:white;
	cursor:pointer;
	background-color: rgba(120,120,120,0.4) !important;
}

.niveaugrise:hover{
	opacity: 0.8;
}

#infoshautgauche{
	display: flex;
	flex-direction: column;
	align-items:flex-start;
	box-sizing: border-box;
	width: 40vw;
	height: 200px;
	padding:16px;
	top:0px;
	left:0px;
	position: fixed;
	color: rgba(30,30,30,0.8);
	user-select: none;
	z-index:84;
}

#boutonshautcontainer{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
}

#contenuhautgauche{
	display:none;
	background-color: rgba(255,255,255,0.98);
	box-shadow: 0px 0px 16px rgba(30,30,30,0.8);
	padding:16px;
	position:fixed;
	top:100px;
	left:0px;
	bottom:0px;
	right:0px;
	z-index:160;
	overflow-y: auto;
	border-radius: 2px;
	box-sizing:border-box;
}

.boutonhaut{
	color: rgba(30,30,30,0.8);
	padding:4px 20px;
	background-color: rgba(255,255,255,0.98);
	border-radius:2px;
	user-select: none;
	margin:5px; 
}

.boutonhaut:hover{
	cursor:pointer;
	background-color: rgba(255,255,255,0.65);
}

.boutonhautactif{
	transform: scale(1.16);
}

.newsdate{
	font-size: 10pt;
	font-weight: 600;
	padding: 8px 12px;
}

.newscontenu{
	margin-bottom: 4px;
	font-size: 10pt;
	padding:4px;
	margin-left: 20px;
}

.aujourdhui{
	background-color: rgba(255,160,0,0.38) !important;
	padding-bottom: 6px;
}

#parties{
	position: relative;
	z-index:4;
}

a{
	text-decoration: none;
}

#svggradients{
	width:0px;
	height:0px;
}


#info{
	font-size:14pt;
	padding:6px 14px;
	border-radius:4px;
	background-color: transparent;
	height: 36px;
	margin:12px 12px;
	min-width:300px;
	display:none;
	align-items: center;
	justify-content: center;
	z-index: 6;
	pointer-events: none;
}

#pub{
	position: fixed;
	left:2vw;
	bottom:2vw;
	margin:20px;
	background-color: rgba(255,255,255,0.55);
	border-radius: 4px;
	height:250px;
	width:300px;
	display:flex;
	align-items: center;
	justify-content: center;
	font-size:16pt;
	color:#444;
	display: none;
}

.infoclignote{
	animation: clignote 1s ease-in-out infinite;
}

@keyframes clignote{
	0%{
		background-color: rgba(60,60,60,0.23);
		color: white;
	}
	50%{
		background-color: rgba(60,60,60,0.46);
		color:white;
	}
	100%{
		background-color: rgba(60,60,60,0.23);
		color: white;
	}
}

#monpays{
	padding:5px;
	position: relative;
	display: flex;
	display: none;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#monpays:hover{
	background-color: rgba(255,255,255,0.2);
	cursor: pointer;
}

#monpaystexte{
	padding:0px 8px;
}

#monpaysdrapeau{
	width: 30px;
	height:24px;	
}

#monpaysdrapeau > .payscontainer{
	border: none;
}

#lesdrapeaux{
	background-color: rgba(225,225,225,0.8);
	position: absolute;
	right:110%;
	top:0;
	display: flex;
	flex-direction: column;
	padding:6px 10px 10px 6px;
	border-radius: 4px;
	box-shadow: 0px 0px 8px 0px rgba(30,30,30,0.9);
}

.payscontainer{
	border: 1px solid rgba(225,225,225,0.8);
	overflow: hidden;
	object-fit: fill;
	box-sizing:border-box;
	width: 100%;
	height: 100%;
	background-color:rgba(255,255,255,0.6);
}

.nouveaupays{
	width: 26px;
	height:20px;
	margin:0px 5px;
}

.unelignepays{
	margin:5px 0px;
	display: flex;
	flex-direction: row;
}

#langues{
/*	position:fixed;
	top:16px;
	right:25px;*/
	margin:30px 8px;
	width:40px;
	height:40px;
	z-index:4;
}

.nouvellelangue{
	width: 28px;
	height:28px;
	margin:6px;
}

.languecontainer{
	border: 3px solid rgba(255,255,255,0.95);
	overflow: hidden;
	object-fit: fill;
	border-radius: 50%;
	width: 40px;
	height: 100%;
	box-sizing:border-box;
	background-color:rgba(255,255,255,0.6);
}

.languecontainerpetit{
	border: 3px solid rgba(255,255,255,0.95);
	overflow: hidden;
	object-fit: fill;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	box-sizing:border-box;
	background-color:rgba(255,255,255,0.6);
}

.imglangue{
	width: 100%;
	height: 100%;
	box-sizing:border-box;
}

.imglangue:hover{
	cursor: pointer;
	filter:invert(0.1);
}

#privacycontainer{
	display:flex;
	flex-direction: row;
	justify-content: flex-end;
	position: relative;
}

#partenaires{
	display:none;
	position: absolute;
	left:0px;
	bottom:100%;
	margin:8px;
	background-color: rgba(20,20,20,0.92);
	color:white;
	padding:8px;
	border-radius:4px;
}

.partner{
	color:white;
}

.partner:hover{
	color:rgba(160,160,225,0.9);
}

.boutonprivacy{
	margin:0px 4px 0px 0px;
	padding: 4px;
	border-radius: 2px;
	position: relative;
}

.boutonprivacy:hover{
	cursor: pointer;
	background-color: rgba(30,30,30,0.16);
}

#privacycookies{
	position: relative;
}

#cookiepopup{
	position: absolute;
	bottom:105%;
	right:0px;
	display: none;
	z-index:68;
	flex-direction: column;
	background: rgba(30,30,30,0.96);
	color:white;
	padding:6px;
	width:440px;
	font-size: 11pt;
}

#cookietitre{
	background-color: black;
	font-weight: 600;
	font-size: 14pt;
	padding:8px;
}

#cookietexte{
	padding:8px;
}

#cookieboutons{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.cookiebouton{
	padding:12px;
	margin:4px 8px;
}

.cookiebouton:hover{
	transform: scale(1.1);
	cursor: pointer;
}

#cookieaccept{
	background-color: rgba(60,250,60,0.9);
}

#cookiedecline{
	background-color: rgba(250,60,60,0.9);
}

#infobasdroite{
	padding:12px;
	position:fixed;
	right:0;
	bottom:0;
	display: flex;
	flex-direction: column;
	align-items:flex-end;
	justify-content: flex-center;
	font-size:9pt;
	color:#444;
	z-index:12;
}

#infobasdroite > div{
	padding:2px;
}

.navigateuricone{
	width:20px;
	height:20px;
	margin:6px;
}

.aligneimage{
	color:#666666;
	display: flex;
	flex-direction: row;
	align-items:center;
	justify-content: center;
}

@keyframes cligneunpeu{
	0%{   opacity: 1; }
	50%{ opacity: 0.8; }
	100%{ opacity: 1; }
}

.uneindication{
	color:rgba(30,30,30,0.65);
	margin: 2px 0px;
	font-size:10pt;
	text-align:center;
}

.uneindicationtitre{
	font-weight:700;
	font-size:11pt;
	color:rgba(30,30,30,0.65);
	margin: 12px 0px;
	text-align:center;
}

#rejoindreequipecode{
	position: relative;
}

.rejoindreequipeplein{
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	padding:0px;
}

#rejoindreequipecode{
	outline:none;
	font-size: 12pt;
}

.boutonvalider{
	background-color: rgba(255,200,60,0.94);
	border-radius: 0px;
	padding:10px;
	margin:0px;
	color:white;
	transition: all 0.1s ease-in-out;
	cursor:pointer;
	position: relative;
	text-align: center;
	z-index:4;
	width:40px;
	/*box-shadow: 0px 0px 38px 0px rgba(20,20,20,0.2);*/
}

.boutonvalider:hover{
	opacity: 0.8;
}

.boutonvaliderinactif{
	background-color: rgba(200,200,200,1) !important;
}

.boutonvaliderinactif:hover{
	cursor: default;
}

#contenumeilleursscores{
	padding:0px 0px 0px 0px;
	border-radius:4px;
	margin: 56px 12px 140px 12px;
	min-width:180px;
	background-color: rgba(250,250,250,0.64);
	overflow:hidden;
}

#contenantmeilleursscores{
	overflow-y: auto;
	max-height:100%;
	overflow-x: hidden;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding:18px;
}

#meilleursscoresliste{
	display:flex;
	max-height:100%;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	padding-bottom:10px;
	font-size: 8pt;
}

#scorestitre{
	font-size:12pt;
	padding:10px;
	margin:0px 0px 0px 0px;
	text-align:center;
	background-color:rgba(230,230,255,0.98);
}

.tdclassement{
	color:rgba(120,120,120,0.9);
	line-height: 22px;
	font-size: 12pt;
}
.tdpseudo{
	font-weight:500;
	font-size: 12pt;
}
.tdchiffre{
	font-weight:600;
	font-size: 11pt;
	color:rgba(190,60,60,0.9);
	text-align:right;
}

#colonnedegauche{
	padding: 12px 24px;
	box-sizing: border-box;
	display:flex;
	align-items:center;
	justify-content: space-between;
	flex-direction: column;
	width:40vw;
	background-color: rgba(255,255,255,0.82);
}

#indications{
	padding:10px 16px;
	border-radius:4px;
	/*margin:56px 12px 12px 12px;*/
	margin: 0px;
	display:flex;
	box-sizing: border-box;
	max-height:70vh;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgba(250,250,250,0.);
	overflow-y: auto;
}

#gestionequipe{
	border:0px solid rgba(255,255,255,0.44);
	background-color: transparent;
	border-radius: 0px;
	width:400px;
	box-sizing: border-box;
	/*padding: 0px 12px 12px 12px;*/
	margin-top: 0px;
	padding: 0px;
	display: flex;
	max-height: 0px;
	flex-direction: column;
	align-items:stretch;
	justify-content: center;
	overflow:hidden;
}

#listeparties{
/*	position:absolute;
	top:100%;
	left:0%;
	right:0%;*/
	z-index:8;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border: 0px solid rgba(255,255,255,0.44);
}

#latabletitre{
	/*background-color: rgba(220,220,220,0.7);*/
	border-collapse: collapse; 
	border-spacing: 0;
	width:100%;
}

#latable{
	/*background-color: rgba(220,220,220,0.7);*/
	border-collapse: collapse; 
	border-spacing: 0;
	width:100%;
}

#latablecontainer{
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

#latabletitre tr > td{
	text-align: center;
}

#latable tr > td{
	padding:3px 3px;
	text-align: center;
}

.lignetitre{
	background-color: rgba(120,120,120,0.7);
	color:white;
}

.lignetitre > td{
	padding:5px 5px !important;
	border-bottom:0px solid rgba(30,30,30,0.44) !important;
}

.lignetitre:hover{
	cursor: default;
}

.lignepartie{
	border-bottom:1px solid rgba(255,255,255,0.9) !important;
	background-color: rgba(255,255,255,0.96);
	width:100%;
}

.lignepartie:hover{
	background-color: rgba(200,200,230,0.6);
	cursor: pointer;
}

.iconeflexcontainer{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: start;
}

.iconerepartition{
	width: 20px;
	height:20px;
	border-radius: 50%;
	background-color: rgba(200,200,200,0.9);
	box-sizing: border-box;
	border: 1px solid rgba(255,255,255,0.95);
}

.iconerepartitionbleu{
	width: 10px;
	height:20px;
	border-radius: 40px 0px 0px 40px;
	background-color: rgba(70,70,255,0.95);
	box-sizing: border-box;
	border-top: 1px solid rgba(255,255,255,0.95);
	border-right: 1px solid rgba(140,140,250,0.3);
	border-left: 1px solid rgba(255,255,255,0.95);
	border-bottom: 1px solid rgba(255,255,255,0.95);
}

.iconerepartitionrouge{
	width: 10px;
	height:20px;
	border-radius: 0px 40px 40px 0px;
	background-color: rgba(255,70,70,0.95);
	box-sizing: border-box;
	border-top: 1px solid rgba(255,255,255,0.95);
	border-left: 1px solid rgba(250,140,140,0.3);
	border-right: 1px solid rgba(255,255,255,0.95);
	border-bottom: 1px solid rgba(255,255,255,0.95);
}

.tdicone{

}

#lesboutonsmatch{
	border-bottom:0px solid rgba(255,255,255,0.44);
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.unboutonmatch{
	padding:6px 6px;
	text-align: center;
	display:flex;
	align-items:center;
	justify-content: center;
	width:50%;
	min-height:16px;
	color:white;
	background-color: rgba(255,200,60,0.94);
}

.unboutonmatch:hover{
	cursor: pointer;
	background-color: rgba(255,210,60,0.94);
}

.unboutonmatchenfonce{
	background-color: rgba(250,180,60,0.95);
}

.unboutonmatchenfonce:hover{
	background-color: rgba(255,190,60,0.95);
}

#larejoindrematch{
	/*background-color: rgba(186, 200, 244,0.9);*/
	background-color: rgba(240, 240, 240,0.9);
	display:flex;
	flex-direction: column;
	padding-top: 0px;
}

#lacreationmatch{
	/*background-color: rgba(186, 200, 244,0.9);*/
	background-color: rgba(240, 240, 240,0.9);
	display:flex;
	flex-direction: column;
	justify-content:center;
	padding-top: 0px;
}

#boutoncreermatch{
	margin-top: 5px;
	text-align: center;
	position: relative;
}

#boutonrejoindrematch{
	margin-top: 0px;
	text-align: center;
	position: relative;
}

#uninputmatchcontainermotdepasse{
	display:none;
}

.uninputmatchcontainer{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding:6px;
}

.uninputmatchcontainer > div{
	text-align: right;
	padding-right: 30px;
	width:50%;
}

.uninputmatchcontainer > input{
	padding:5px;
	width:50%;
}

.uneoptionouinon{
	padding-right: 0px !important;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#boutonoptionssupplementaires{
	text-align:center;
	padding:6px;
	margin-top:4px;
	background-color: rgba(220,220,220,0.94);
	color:white;
	cursor:pointer;
}

#boutonoptionssupplementaires:hover{
	opacity:0.7;
}

.optionsupplementaire{
	overflow-y: hidden;
	box-sizing: border-box;
	transition: all 0.6s ease-in-out;
}

.optionsupplementaireactive{
	max-height: 40px;
	padding:6px;
}

.optionsupplementaireinactive{
	padding:0px !important;
	max-height: 0px;
}

.unouiounon{
	width:50px;
	padding:5px 8px;
	text-align:center;
	background-color: rgba(200,200,200,0.9);
	color:rgba(160,160,160,0.9);
}

.unouiounon:hover{
	cursor: pointer;
	background-color: rgba(240,240,240,0.9);
}

.unchoixcontainer{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding:5px 8px;
}

.unchoix{
	width:120px;
	padding:5px 8px;
	text-align:center;
	background-color: rgba(200,200,200,0.9);
	color:rgba(160,160,160,0.9);
}

.unchoix:hover{
	cursor: pointer;
	background-color: rgba(240,240,240,0.9);
}

.unchoixactif{
	background-color: rgba(120,120,120,0.86);
	color:white;
}

.unchoixactif:hover{
	background-color: rgba(132,132,132,0.86);
}

.resumeequipe{
	text-align: center;
	background-color: rgba(30,30,30,0.8);
	color:white;
	font-weight: 600;
	padding:12px;
	/*margin-bottom: 5px;*/
}

.unmembre{
	position: relative;
	background-color: rgba(250,250,250,0.94);
	padding:8px;
	text-align:center;
	border-radius: 0px;
	margin:0px 0px;
	border: 0px solid rgba(250,250,250,0.8);
	min-width: 75px;
	min-height: 16px;
}

.unmembre:hover{
	cursor: pointer;
	background-color: rgba(220,220,220,0.8);
}

.checkimg{
	position: absolute;
	width:20px;
	height:20px;
	right:8px;
	top:4px;
}

#declencherpartie{
	margin: 0px 0px;
	position: relative;
}

.inputcode{
	border: 0px;
	padding: 4px 10px;
	width: 200px;
	background-color: rgba(255,255,255,1);
}

#chat{
	position: fixed;
	bottom:2vw;
	left:2vw;
	height:20px;
	padding:20px;
	color: rgba(30,30,30,0.8);
	background-color: rgba(255,255,255,0.75);
	border-radius:2px;
	user-select: none;
	z-index:60;
	display: none;
}

#regarder{
	
}

#infohautdroite{
	position: fixed;
	right:200px;
	top:2vw;
	display: flex;
	flex-direction: column;
	align-items:flex-end;
	color: rgba(30,30,30,0.8);
	user-select: none;
	z-index:64;
}

#boutonshautdroitecontainer{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.boutonhautdroit{
	color: rgba(30,30,30,0.8);
	padding:4px 20px;
	background-color: rgba(255,255,255,0.98);
	border-radius:2px;
	user-select: none;
	margin:0px 5px; 
}

.boutonhautdroit:hover{
	cursor:pointer;
	background-color: rgba(255,255,255,0.65);
}

.boutonhautdroitactif{
	transform: scale(1.16);
}

#contenuhautdroit{
	display:none;
	margin-top:20px;
	background-color: rgba(255,255,255,0.98);
	padding:2vw;
	max-height: 88vh;
	overflow-y: auto;
	border-radius: 2px;
	box-sizing:border-box;
}

.tablescore{
	margin:0px 20px;
	width:240px;
}

.scoretitre{
	text-align: center;
	font-size: 14pt;
	font-weight: 600;
	padding:6px 0px;
	margin-bottom:6px;
	color:white;
	background-color:rgba(60,60,60,0.7);
	width:280px;
}

.unmeilleurscore{
	margin:6px 48px 6px 6px;
}

.lignescore{
	display: flex;
	flex-direction: row;
}

.lignescore td{
}

#connexion{
/*	position:fixed;
	right:70px;
	top:16px;*/
	background-color: rgba(255,255,255,0.94);
	border-radius: 2px;
	margin:26px 6px;
	z-index:38;
	position: relative;
}

#connexiontitre{
	text-align:center;
	padding: 8px;
	border-radius:2px;
	margin:8px;
	cursor:pointer;
}

.connecte{
	background-color:rgba(120,204,180,0.8);
	color:white;
}

#connexiontitre:hover{
	background-color:rgba(255,255,255,0.4);
	color:#222;
}

#connexioncache{
	padding:10px 10px;
	display:none;
}

.pseudoclignote{
	animation: clignotepseudo 2s ease-in-out infinite;
}

@keyframes clignotepseudo{
	0%{
		background-color: rgba(255,255,255,0.9);
	}
	50%{
		background-color: rgba(180,190,255,0.4);
	}
	100%{
		background-color: rgba(255,255,255,0.9);
	}
}

.inputconnexion{
	width:200px;
	border:0px;
	margin:8px auto;
	padding:6px;
	background-color:rgba(255,255,255,0.9);
	display:block;
}

#statistiquesdejeu{
	display:flex;
	flex-direction:column;
	align-items: center;
	justify-content: center;
	padding:8px 0px;
}

.unestatistiquedejeu{
	text-align:center;
	margin:4px;
}

.boutonjouer{
	position: relative;
}

#boutonsconnexion{
	padding:0px;
	width:100%;
	box-sizing:border-box;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
}

#boutonsconnexion > div{
	display:flex;
	align-items:center;
	justify-content:center;	
	border-radius:2px;
	padding:8px;
	margin: 8px;
	cursor:pointer;
}

#boutonconnexionconnexion{
	background-color: rgba(120,160,255,0.8);
	color: white;
}

#boutonconnexionconnexion:hover{
	background-color: rgba(120,160,255,0.4);
}

#boutonconnexioninscription{
	background-color: rgba(220,220,220,0.8);
}

#boutonconnexioninscription:hover{
	background-color: rgba(220,220,220,0.4);
}

#boutonconnexiondeconnexion{
	background-color: rgba(220,220,240,0.8);
}

#boutonconnexiondeconnexion:hover{
	background-color: rgba(220,220,220,0.4);
}

#messageconnexion{
	text-align:center;
	/*padding:8px;*/
	font-size:10pt;
}

#proprietesdujoueur{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: stretch;
	height:100px;
}

.contenantdepeau{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 12pt;
	cursor: pointer;
	border-radius: 4px;
	position: relative;
	/*height:100px;*/
}

.contenantdepeausecondaire:hover{
	background-color: rgba(240,240,240,0.6);
}

.contenantdepeauprincipale:hover{
	background-color: rgba(255,255,255,0.6);
}

.contenantdepeausecondaire:hover .descriptiondecondition{
	display: block;
}

.descriptiondepeau{
	padding:0px 10px;
	width:100px;
}

.descriptiondecondition{
	position: absolute;
	right:0;
	display: none;
	font-size: 10pt;
	padding:0px 30px;
	width:100px;
	color:rgba(120,120,120,0.8);
}

.peauindisponible{
	color:rgba(160,160,160,0.6);
}

#peau{
	position:relative;
}

#peaux{
	display: none;
/*	flex-wrap:no-wrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;*/
	position: fixed;
	right:20vw;
	left:40vw;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	top:0;
	padding:0px;
	background-color: rgba(255,255,255,1);
	/*background-image: radial-gradient(closest-side,rgba(230,240,255,1),rgba(220,220,255,1));*/
	border: 0px solid rgba(255,255,255,0.6);
	border-radius: 0px;
	z-index:142;
}

#peaux > .imgferme{
	position: fixed;
	top:1vw;
	right:22vw;
	z-index:800;
	margin:0px;
	width:26px;
	padding:4px;
	cursor:pointer;
	border-radius: 0%;
	background-color: rgba(220,220,220,0.24);
}

#peaux > .imgferme:hover{
	background-color: rgba(220,220,220,0.64);
}

#petitsuivis{
	position:relative;
	margin:8px;
	/*min-height: 240px;*/
	z-index:6;
}

.unpetitsuivi{
}

.souspseudo{
	padding:8px 0px;
	text-align:center;
	background-color:rgba(255,255,255,0.66);
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	z-index:4800;
}

#accueillisteitems{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	width:92vw;
}

.accueilcategoriearme{
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height:100%;
	margin:0px 15px;
	width:11vw;
}

.accueilcategoriearmetitre{
	height:50px;
	background-color: rgba(255,255,255,0.1);
	margin-bottom: 20px;
	font-size: 14pt;
	font-weight: 600;
	text-align: center;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.accueilcategoriearmecontainer{
	cursor:pointer;
	font-size: 9pt;
	padding:10px;
	width:11vw;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border:1px solid transparent;
}

.accueildetailarme{
	background-color: rgba(245,245,245,1) !important;
	border: 1px solid rgba(120,120,120,0.1) !important;
	padding:8px 10px;
	display: none;
	position: absolute;
	top:102%;
	z-index: 1000;
	flex-direction: column;
	pointer-events: none;
}

.accueildetailarmeligne{
	margin:2px 0px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.accueildetailarmepropriete{
	text-align: left;
}

.accueildetailarmevaleur{
	text-align: right;
	color:rgba(110,60,160,0.9);
}

.accueilarmepossedee{
	border: 1px solid rgba(255,208,66,0.8) !important;
	background-color: rgba(255,208,66,0.08) !important;
}

.accueilcategoriearmecontainer:hover{
}

.accueilcategoriearmeimgarme{
	height:80px;
}

.accueilcategoriearmenomarme{
	position: absolute;
	top:0px;
	left:3px;
}

.accueilcategoriearmecoutarme{
	position: absolute;
	bottom:0px;
	right:3px;
}

#accueillistewiki{
	display: flex;
	flex-direction: row;
	width:92vw;
}

#accueillistewikigauche{
	padding:20px;
	display: flex;
	flex-direction: column;
	width:50%;
}

#accueillistewikidroit{
	padding:20px;
	display: flex;
	flex-direction: column;
	width:50%;
}

.unwiki{
	margin-bottom: 10px;
	padding:4px 10px;
	display: flex;
	flex-direction: row;
}

.unwikicontenu{
	text-align:justify;
}

.unwikigauche{
	padding:8px;
}

.unwikidroit{
	background-color: rgba(255,255,255,1);
}

.unwikidroit:hover{
	transform: scale(1.4);
}

.unwikititre{
	font-weight: 700;
	padding:6px 0px;
}

.unwikiimage{
	padding:6px 20px;
	width:16vw;
}

.unwikiimagetitre{
    font-style: italic;
    font-size:10pt;
	padding:4px 20px;

}

#sortirdeliframe{
	position: fixed;
	z-index: 124;
	color:#444;
	text-align:center;
	padding:8px;
	font-size:10pt;
	bottom:0px;
	left:40vw;
	right:20vw;
	background-color: rgba(255,255,140,0.92);
	/*animation: clignoteblanc 2s ease-in-out infinite;*/
}

#sortirdeliframe:hover{
	background-color: rgba(255,255,255,0.98);
}

@keyframes clignoteblanc{
	0%{
		background-color: rgba(255,255,200,0.92);
	}
	50%{
		background-color: rgba(255,255,160,0.92);
	}
	100%{
		background-color: rgba(255,255,200,0.92);
	}
}

.peau{
	width:80%;
	padding:10px;
}

#couleurskin{
	position: relative;
	margin:30px 30px;
	border-radius: 50%;
	height:30px;
	width:30px;
}

#inputcouleurpeau{
	visibility: hidden;
	height:30px;
	width:30px;
}

#couleurskin{
	display: none;
}

#inputcouleurpeau:hover{
	cursor: pointer;
}

#inputcouleurpeaudessin{
	position: absolute;
	top:0;
	left:0;
	height:30px;
	width:30px;
	background-color: red;
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,0.9);
}

#inputcouleurpeaudessin:hover{
	cursor: pointer;
}


#offscreen{
	z-index: 100;
}