body {
	font-family: "Lato", sans-serif;
	margin: 0;
	background: #f5f5f5;
	padding-top: 10px;
	padding-bottom: 20px;
	text-align: center;
	user-select: none;
}
.title {
	padding: 10px 15px;
}

.title h1 { margin-top: 5px; }
.title h1 a { color: inherit; text-decoration: none; }
.title .lead.equipe-bleu { color: #0068AB; }
.title .lead.equipe-rouge { color: #DF0A21; }

.col5 {
    width: 19%;
    float: left;
    position: relative;
    min-height: 1px;
    padding: 10px;
	margin: 0.5%;
}

.btn { outline: none !important; }

#reglages,
.btn-hidden { display: none; }

.btn-new {
	font-size: 1.4em;
}

#grille-mots {
	margin-top: 10px;
	margin-bottom: 10px;
}

#grille-mots .col5 {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 180%;
    border: solid 5px #eee;
	box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.6);
    border-radius: 5px;
    /*padding: 10px 10px 10px 10px;*/
    padding: 30px 10px 30px 10px;
    cursor: pointer;
}

#grille-mots.reponse .assassin 		{ border-color: #211E1C; background-color: rgba(33, 30, 28, 0.2); }
#grille-mots.reponse .temoin 		{ border-color: #F3D9BB; background-color: rgba(243, 217, 187, 0.4); }
#grille-mots.reponse .agent-bleu 	{ border-color: #0068AB; background-color: rgba(0, 104, 171, 0.2); }
#grille-mots.reponse .agent-rouge 	{ border-color: #DF0A21; background-color: rgba(223, 10, 33, 0.2); }

#grille-mots .tuile-devoilee {
	color: rgba(255,255,255,0);
	position: relative;
}
#grille-mots .tuile-devoilee::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: 120%;
	background-position: center top;
	background-repeat: no-repeat;
	opacity: 0.4;
}
#grille-mots .tuile-devoilee.assassin 		{ border-color: #211E1C; background-color: #211E1C; }
#grille-mots .tuile-devoilee.temoin 		{ border-color: #F3D9BB; background-color: #F3D9BB; }
#grille-mots .tuile-devoilee.agent-bleu 	{ border-color: #0068AB; background-color: #0068AB; }
#grille-mots .tuile-devoilee.agent-rouge 	{ border-color: #DF0A21; background-color: #DF0A21; }
#grille-mots .tuile-devoilee.assassin::before 		{ background-image: url("../img/assassin.png"); }
#grille-mots .tuile-devoilee.temoin::before 		{ background-image: url("../img/temoin.png"); }
#grille-mots .tuile-devoilee.agent-bleu::before 	{ background-image: url("../img/agent-bleu.png"); }
#grille-mots .tuile-devoilee.agent-rouge::before 	{ background-image: url("../img/agent-rouge.png"); }

.instruction { display: none; }


#cartes-restantes ul {
	margin: 0;
	padding: 0;
	width: 100%;
}
#cartes-restantes li {
	list-style-type: none;
	width: 30px;
	height: 20px;
	margin: 0 2px;
	border: solid 2px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

ul#cartes-restantes-bleues { padding-left: 5px; }
ul#cartes-restantes-rouges { padding-right: 5px; }

ul#cartes-restantes-bleues li {
	border-color: #0068AB;
	background-color: rgba(0, 104, 171, 0.2);
	float: left;
}
ul#cartes-restantes-rouges li {
	border-color: #DF0A21;
	background-color: rgba(223, 10, 33, 0.2);
	float: right;
}





#reglages {
	padding: 15px;
	margin-top: 20px;
	background-color: #eaeaea;
}

#reglages input { display: none; }

#reglages .col-sm-6 {
	display: flex;
	flex-direction: column;
	align-items: space-around;
	justify-content: center;
    
}

#reglages label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50%;
	margin: 2px auto;
	height: 50px;
	background-color: #555;
	color: #fff;
	border: 3px solid transparent;
	border-radius: 5px;
	cursor: pointer;
	opacity: 0.5;
}

#reglages .choix-couleur div:nth-of-type(1) label {
	background-color: #0068AB;
}
#reglages .choix-couleur div:nth-of-type(2) label {
	background-color: #DF0A21;
}

#reglages input:disabled ~ label {
	background-color: #999;
	opacity: 0.3;
}
#reglages input:checked ~ label {
	background-color: #222;
	border-color: #000;
	opacity: 1;
}



/* ***** SLACK ***** */

#chat {
	display: none;
	position: relative;
	width: 100%;
	padding: 20px;
	background-color: #e0e0e0;
	margin-top: 50px;
}

#chat .col-sm-9 {
	float: left;
    width: 75%;
    margin: 0;
    padding: 0 5px;
}
#chat .col-sm-3 {
	float: left;
    width: 25%;
    position: relative;
    margin: 0;
    padding: 0 5px;
}

#chat input.form-control {
	display: inline-block;
	float: left;
	width: 60%;
	height: 30px;
}
#chat button {
	height: 30px;
	float: left;
	margin-left: 5px;
}

.slackchat { text-align: left; }

.message-box {
	position: fixed;
	bottom: 30px;
	right: 30px;
	font-size: 28px;
	color: #fff;
	background: #e22b2f;
	border-radius: 50%;
	padding: 5px;
	z-index: 80000;
	height: 50px;
  	width: 50px;
  	text-align: center;
  	display: none;
}

.message-box:hover {
	background: #BD3235;
}

.message-box > a,
.message-box > a:active,
.message-box > a:focus,
.message-box > a:hover {
	color: #fff;
}

.message-box > a .slack-message-count {
	position: absolute;
  	top: 0;
  	right: -5px;
	display: none;
}

@media screen and (max-width: 768px) {
	.message-box {
		position: absolute;
		float: right;
		bottom: -35px;
		right: 10px;
		font-size: 20px;
		height: 40px;
		width: 40px;
	}
}


/* ***** FIN SLACK ***** */



/*
    .carte-container {
		width: 100%;
		height: 100%;
		position: relative;
		margin: 0 auto 40px;
		-webkit-perspective: 800px;
		 -moz-perspective: 800px;
		   -o-perspective: 800px;
		      perspective: 800px;
    }

    .carte {
		width: 100%;
		height: 100%;
		position: absolute;
		-webkit-transition: -webkit-transform 1.5s;
		 -moz-transition: -moz-transform 1.5s;
		   -o-transition: -o-transform 1.5s;
		      transition: transform 1.5s;
		-webkit-transform-style: preserve-3d;
		 -moz-transform-style: preserve-3d;
		   -o-transform-style: preserve-3d;
		      transform-style: preserve-3d;
		-webkit-transform-origin: right center;
		 -moz-transform-origin: right center;
		   -o-transform-origin: right center;
		      transform-origin: right center;
    }

    .carte.flipped {
		-webkit-transform: translateX( -100% ) rotateY( -180deg );
		 -moz-transform: translateX( -100% ) rotateY( -180deg );
		   -o-transform: translateX( -100% ) rotateY( -180deg );
		      transform: translateX( -100% ) rotateY( -180deg );
    }

    .carte div {
		display: block;
		height: 100%;
		width: 100%;
		text-align: center;
		font-weight: bold;
		position: absolute;
		-webkit-backface-visibility: hidden;
		 -moz-backface-visibility: hidden;
		   -o-backface-visibility: hidden;
		      backface-visibility: hidden;
    }

    .carte .avant {
		background: red;
    }

    .carte .arriere {
		background: blue;
		-webkit-transform: rotateY( 180deg );
		 -moz-transform: rotateY( 180deg );
		   -o-transform: rotateY( 180deg );
		      transform: rotateY( 180deg );
    }
*/



@media (max-width: 900px) {
	#grille-mots .col5 {
		font-weight: normal;
		font-size: 10px;
		line-height: 140%;
		padding: 15px 1px 15px 1px;
		border-width: 4px;
	}
	#cartes-restantes li {
		margin: 0 1px;
	}
	.lead { margin-bottom: 0; }
}
@media (max-width: 600px) {
	body { padding-top: 0; }
	.btn-default { font-size: 8px; padding: 5px; }
	#grille-mots .col5 {
		font-size: 9px;
		padding: 10px 1px 10px 1px;
		border-width: 3px;
	}
	#grille-mots .col5 span { display: none; }
	#cartes-restantes li {
		width: 15px;
		height: 10px;
		border: solid 1px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
}