@charset "utf-8";
/* CSS Document */
.bg_color{
	background-color: #333;
}

input{
	background: transparent;
}

.flexColonne{
	display: flex;
	flex-direction: column;
}

.flexLigne{
	display: flex;
}

.ecran{
	width:1920px;
	height:1080px;
	position: relative;
}

.placeTextEquipe{
	position: absolute;
	z-index: 100;
}

.placeTextLocaux{
	top: 22px;
	left: 78px;
}

.placeTextVisiteur{
	top: 72px;
	left: 78px;	
}

#bgCouleurLocal{
	position: absolute;
	z-index: 200;
	top: 38px;
	left: 46px;
	width:20px;
	height:20px;
}

#bgCouleurLocalTab{
	position: absolute;
	z-index: 200;
	top: 25px;
	left: 46px;
	width: 26px;
	height: 26px;
}

#bgCouleurVisiteur{
	position: absolute;
	z-index: 200;
	top: 89px;
	left: 46px;
	width:20px;
	height:20px;
}

#bgCouleurVisiteurTab{
	position: absolute;
	z-index: 200;
	top: 25px;
	left: 46px;
	width: 26px;
	height: 26px;
}

#bgCouleurVisiteur2{
	position: absolute;
	z-index: 200;
	top: 130px;
	left: 78px;
	width:20px;
	height:20px;
}

.ligneTableauAffichage{
	font-size: 30px;
	color: white;
	font-weight: 700;
	margin-bottom: 10px;
}

.affTabJoueurLocaux{
	font-size: 25px;
	color: white;
	font-weight: 550;
}

.bordCentrAffTab{
	border-right: 3px solid white;
	margin-bottom:20px;
}

.nomJoueurLocaux{
	margin-bottom:5px;
}

/*.bg_scoreBoard{
	width:430px;
	height: 40px;
	border-radius: 5px;
}*/

.score, .DSHscore, .dshScore6{
	background-color:white;
	border:#FFFFFF none 0px;
	text-align:center;
	font-size:40px;
	font-family: 'Cute Font', cursive;
	height: 50px;
	background:rgba(255,0,0,0);
	color: white;
}

.score{
	width: 40px;
	line-height: 50px;
}

.score6{
	width: 25px
}

.bg_console .DSHscore{
	font-size: 50px;
    line-height: 50px;
}

.chiffreSpecHaut{
	border-bottom:1px solid white;
	border-right:2px solid white;	
}

.chiffreSpecBas{
	border-top:1px solid white;
	border-right:2px solid white;	
}


.specHaut{
	border-bottom:1px solid white;
}
.specBas{
	border-top:1px solid white;
}

.inputName{
	border: 0px;
	color:white;
	background-color: #F00;
}


.equipeName{
	font-size: 20px;
	line-height: 50px
}

.equipeNameTableauAffichage{
	font-size: 20px;
	line-height: 50px
}

.locaux, .visiteur, .inputNameLocaux, .inputNameVisiteur{
	width: 130px;
	border: 0px;
	font-weight: bold;
	color: white;
	padding-left: 10px;
	height: 50px;
}

.locauxTableauAffichage{
	width: 330px;
	border: 0px;
	font-weight: bold;
	color: white;
	padding-left: 10px;
	height: 50px;
}

.tableauPresentation, .tableauPresentationVisiteur{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 1000px;
	background: linear-gradient(45deg, rgba(48, 45, 126, 0.9), rgba(48, 45, 126, 0.8));
	border-radius: 15px;
}

.encadrement{
	position: relative;
	top:50%;
	transform: translate(0%, -50%);
}

fieldset{
	display: flex;
	flex-direction: row;
}

/*
.locaux, .inputNameLocaux{
	background-color:#F00;
}

.visiteur, .inputNameVisiteur{
	background-color: #2000FF;
}
*/

/*.blocScore{
	margin-left:5px;
	padding-left: 10px;
	padding-right: 10px;
}*/

.contourScorboardHaut{
	padding-top: 10px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.contourScorboardBas{
	padding-bottom: 10px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}


/*.scoreMargin{
	margin: 0 0 20px 20px;
}*/

.bouton {
	width: 150px;
	height: 45px;
	margin-left: 90px;
	background: linear-gradient(#5E5E5E, #e1e1e1, #5E5E5E);
	font-weight: 700;
}

.NameControlBoard{
	width: 200px;
	text-align: center;
	height: 45px;
	border-radius: 5px;
	border: 2px solid linear-gradient(#262626, #eaeaea, #262626);
	background: black;
	color: #00ffe7;
	text-shadow: 0 0 15px #00a1ff, 0 0 30px #00a1ff;
	font-size: 20px;
	font-weight: 500
}

.DashBoardSet{
	width:80px;
	padding-left: 0px;
	color:white;
	font-size: 20px;
	height: 50px;
	line-height: 50px;
	Text-align:center;
}

.blocAfficheNom{
	display: flex;
	flex-direction: column;
	justify-content:center;
}

.blocSet{
	display: flex;
	flex-direction: column;
	margin-right: 8px;;
	width: 57px;

}

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

.marginTop{
	margin-top:40px;
}

.hidden{
	display: none;
}

/*.logo{
	margin:10px;
	position: absolute;
	top:15px;
	right: 15px;
	width: 90px;
}*/

.ombre_console{
	background : -moz-linear-gradient(50% 0% -90deg,rgba(255, 255, 255, 0.2) 0%,rgba(255, 255, 255, 0) 85.57%);
	background : -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 85.57%);
	background : -webkit-gradient(linear,50% 0% ,50% 100% ,color-stop(0,rgba(255, 255, 255, 0.2) ),color-stop(0.8557,rgba(255, 255, 255, 0) ));
	background : -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 85.57%);
	background : -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 85.57%);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF' ,GradientType=0)";
	background : linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 85.57%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#FFFFFF' , GradientType=0);
	background: linear-gradient(to top, #333, #333 20%, #eee 75%, #333 5555%);
}

.console{
	background : #3E3D3D;
	background : rgba(60, 60, 59, 1);
	border-radius: 15px;
	padding: 20px 3% 35px;
	width: 100vw;
}

.consoleOverlay{
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	background-color: rgba(15, 27, 56, .8);
	z-index:5000
}

.consoleOverlay .blockAlert{
	height: 100vh;
	padding: 0 15px;
}

.consoleOverlay .blockAlert .titre{
	font-size: 50px;
}

.consoleOverlay .blockAlert p{
	font-size: 25px;
}

#vis_1{
	position:absolute;
	width: 25px;
	height: auto;
	top:5px;
	left:5px;
	transform: rotate(41deg)
}

#vis_2{
	position:absolute;
	width: 25px;
	height: auto;
	top:5px;
	right:5px;
	transform: rotate(26deg)
}

#vis_3{
	position:absolute;
	width: 25px;
	height: auto;
	bottom:5px;
	right:5px;
	transform: rotate(17deg)
}

#vis_4{
	position:absolute;
	width: 25px;
	height: auto;
	bottom:5px;
	left:5px;
	transform: rotate(5deg)
}

.consoleLocale{
	display:flex;
	flex-direction: column;
	border: 1px solid gray;
	box-shadow: -1px -1px 0 rgba(0,0,0,0.4), 1px 1px 0 rgb(255, 255, 255);
	border-radius: 16px;
	padding: 0 6px;
	margin-bottom: 10px;
}


.choixCouleurEquipe{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top:20px;
}

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

.replaceControlBoard{
	width: 250px;
	text-align: center;
	height: 45px;
	border-radius: 5px;
	background: black;
	color: #00ffe7;
	text-shadow: 0 0 15px #00a1ff, 0 0 30px #00a1ff;
	font-weight: 500;
}

.replaceControlBoard Option{
	height: 94%;
	font-size: 18px;
	padding-top: 5px;
	text-align: left;
	padding-left: 12px;
}

.changementLocale{
	display: flex;
	flex-direction: column;
	justify-content: space-around
}

.flashy{
	color: #00ffe7;
	text-shadow: 0 0 15px #00a1ff,
		0 0 30px #00a1ff;
}

.flashy.set{
	font-size: 12px;
    text-align: center;
    width: 60px;
    margin: 0 5%;
}

.colonne{
	display: flex;
	flex-direction: column;
}

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

.entrant_sortant{
	font-size:20px;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 10px;
}

/* ------- Couleur Options de Select ------*/

.rouge1{
	background-color: #ff0000;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.rouge2{
	background-color: #b72525;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.rouge3{
	background-color: #f7545d;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.bleu1{
	background-color: #040447;
	color:#ffffff;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.bleu2{
	background-color: #160ba8;
	color:#ffffff;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.bleu3{
	background-color: #3267f9;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.bleu4{
	background-color: #7ea1ed;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.bleu5{
	background-color: #13e2d7;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.vert1{
	background-color: #0cea56;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.vert2{
	background-color: #128c0c;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.vert3{
	background-color: #055107;
	color:#ffffff;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.jaune1{
	background-color: #dbdc1c;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.orange1{
	background-color: #e29c10;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.noir{
	background-color: #000000;
	color:#ffffff;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.gris1{
	background-color: #706f6f;
	color:#ffffff;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.gris2{
	background-color: #9d9d9c;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.gris3{
	background-color: #c6c6c6;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

.blanc{
	background-color: #ffffff;
	color:#000000;
	text-shadow: 0 0 0px white;
	text-align: center;
}

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

.question h3{
	margin: 10px 0 0;
	line-height: 25px;
	font-size: 30px;
}

.bg{
	background-color: #0F1B38;
}

.bg h2{
	font-weight: Bold;
	color: white;
	margin-top: 25px;
}

.bg.mobile{
	margin: 0 50px;
}

.entete{
	width: 90px;
	display: flex;
	justify-content: center;
}

.enteteLigne{
	color: white;
	min-width: 180px;
}

.plaque{
	padding: 5px;
	width: 40px;
	height: 40px;
	margin-bottom: 10px;
	border-radius: 5px;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
	color: #0F1B38;
	font-size: 20px;
}

.plaque.white{
	background-color: white;
}

.plaque.blue{
	background-color: #0F1B38;
}

.separate{
	width: 4px;
	border-radius: 2px;
	background: linear-gradient(#FF0000, #0B42C7);
	left: 50%;
	transform: translate(-50%);
}

.desktop .separate{
	height: 100%;
	top: 0px;
}

.mobile .separate{
	height: calc(100% - 10px);
	top: 0;
}

.faq{
	width: 100%;
	border-bottom: 3px solid transparent;
    border-image: linear-gradient(0.25turn, rgba(15,27,56), rgba(255,0,0), rgba(15,27,56,0));
	border-image-slice: 1;
}

.bg .question{
	color: white;
}

.bg .question img{
	right: 0;
	margin-right: 20px;
}

.bg .question img.active{
    transform: rotate(-990deg);
}

.bg .mobile img{
    width: 30px;
	height: 30px;
    transition: .8s ease;
}

#session{
	color: white;
}

.heading{
	height: 60px;
	background-color:#0F1B38;
}

.heading p{
	color: white;
	margin: 0;
	text-align: center;
	font-weight: bold;
}

.heading img{
	width: 42px;
	height: 42px;
	margin: 9px 18px 0 0;
	right: 0;
}

.back img{
	width: 30px;
	height: 30px;
}

.absolute.back{
	left: -60px;
}

.tableau .commentZone .comments .label{
	color: darkgrey;
	padding-right: unset;
	margin: 0 !important;
}

.tableau .commentZone .comments .name p{
	margin: 0 5px 5px 0;
}

.tableau .commentZone .comments .comText{
	padding-left: 5px;
}

.tableau .commentZone .comments .comText p{
	margin: 0;
}

.tableau .commentZone .comments{
	width: 100%;
	border-bottom: 2px solid transparent;
	border-image: linear-gradient(0.25turn, rgba(15,27,56), rgba(255,0,0), rgba(15,27,56));
	border-image-slice: 1;
	padding: 5px 0 20px;
}

.tableau .commentZone .comments:last-child{
	border-bottom: none;
	margin-bottom: 0;
}

.tableau .commentSpace{
	width: 280px;
	background-color: white;
	color: #0F1B38;
	border-radius: 10px;
}

.tableau .commentSpace p, .tableau .commentSpace .comText p{
	padding-left: 5px;
	padding-right: 5px;
}

.tableau .comments .signaler{
	color: darkgray !important;
	bottom: 0px;
	width: 100%;
	padding: 0 10px;
}

.tableau .addComZone{
	border: 2px solid red;
	border-bottom-left-radius: 50px;
	background-color: #0F1B38;
	z-index: 100;
	padding: 10px 20px 20px;
	top: 65vh;
	position: fixed;
	transform: translate(100%, 0);
	transition: transform .5s;
}

.tableau .addComZone .clicZone{
	background-color: red;
	width: 50px;
	height: 28px;
	border-radius: 14px 0 0 14px;
	right: 100%;
	top: -2px;
    border: 2px solid red;
	cursor: pointer;
}

.tableau .addComZone .clicZone img{
	width: 15px;
	height: auto;
}

.tableau .addComZone .clickClose img{
	width: 15px;
	height: 15px;
}

.tableau .addComZone textarea{
	width: 100%;
}

.tableau .addComZone.active{
	transform: translate(0, 0);
}

/*--------------- Desktop -------------------*/

@media only screen and (min-device-width : 821px){

	.tableau .commentSpace{
		width: 700px;
	}

	.tableau .addComZone{
		width: 550px;
		right: 0;
	}

}

/*--------------- Mobile --------------------*/

@media only screen and (max-device-width : 820px){

	.tableau .commentSpace{
		width: 280px;
	}

	.tableau .addComZone{
		width: 100%;
	}

}