/* *************************** BASE *****************************  */


@font-face {
    font-family: OpenSans;
    src: url(/images/OpenSans-Regular.ttf);
}

html{
	font-family: OpenSans;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body{
	margin:0;
	padding: 0;
	width: 100%;
	height: 100%;
	background:#222733;
}

/* *************************** LOGIN *****************************  */

#login-containeur{

	background: linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.9)), url(/images/fond.jpg);
	background-size: cover;
	text-align: center;
	width: 100%;
	height: 100%;
}
#login{
	display:inline-block;
	width:380px;
}

#login img{
	margin-top:200px;
	margin-bottom:60px;
}




#login .champs{
	margin-top:15px;
	margin-bottom:15px;
	color:white;
	background:#222733;
	border:0;
	border-radius:20px;
	width:250px;
	height:50px;
	font-size:16px;
	text-align: left;
	padding-left:30px;
}


#login .bouton{
	margin-top:60px;
	margin-bottom:10px;
	color:white;
	background:#1274E5;
	border:0;
	border-radius:20px;
	width:300px;
	height:50px;
	cursor: pointer;
	font-size:16px;
	text-align: center;
}


#login::placeholder {  
  color: #EEE;
  opacity: 1;  
}



#login .champs:hover, #login .bouton:hover{
box-shadow: 0px 0px 15px #1274E5;
}

/* pour bug couleur auto blanche/jaune du navigateur sur les champs */
#login .champs { 
  filter: none;  /* pour firefox , pas trouvé pour webkit... */
}


/* *************************** MENU / PAGE *****************************  */


	#page-conteneur{
		background: rgb(34,39,51);
		background: linear-gradient(90deg, rgba(34,39,51,1) 0%, rgba(34,39,51,1) 40%, rgba(21,23,28,1) 60%, rgba(21,23,28,1) 100%);
		min-height:100%;
	}

	#page{	
		margin: 0 auto 0 auto;
		width:1300px;
		background-color: #15171C;	
		color:white;
		min-height:100%;
		padding:0;
	}

	nav{
		display:block;
		padding:0;
		margin:0;
		position:fixed;
		width:380px;
		background:#222733; 
		color: white;
		height:100%;
		text-align:center;
	}

	
section{
	background:#15171C; 
 	padding-top:26px;
	margin:0;
	margin-left:380px;
	width:920px;
	min-height:1100px;
	text-align:center;
}




#nav-logo{
	margin-top:50px;
	margin-bottom:30px;
}

.nav-titre{
	display:block;
	color:#666;
	font-size:22px;
	padding-top:10px;
	padding-bottom:20px;
	text-align:center;
}
.nav-titre::before, .nav-titre::after{
	content:" ";
 	display:inline-block;
	border-top: 3px SOLID #666;
	width:35px;
	height:1px;
	margin:5px;

}
.jetons-menu, .jetons-haut, .jetons-compte{
	display:block;
	color:#666;
	font-size:30px;
	padding:0;
	text-align:center;
	margin-bottom:20px;
	color:white;
}
.jetons-haut{
	visibility:hidden;
	display:none;
}

.jeton-img{
	width:24px;
	height:24px;
	vertical-align:middle;
	margin-bottom:4px;
	margin-left:7px;
}
.achat{
	display:inline-block;
	margin:10px;
	color:white;
	background:#1274E5;
	border:0;
	border-radius:20px;
	width:190px;
	height:60px;
	cursor: pointer;
	font-size:16px;
	text-align: center;
	padding-top:15px;
}
.achat:hover{
	box-shadow: 0px 0px 15px #1274E5;
}
.nav-lien{
	margin:0;
	padding:0;
	display:block;
	color:white;
	font-size:20px;
	font-weight:bold;
	height:20px;
}
.nav-lien:hover{
	color:#1274E5;
}

.nav-deco{
	display:inline-block;
	margin-top:10px;
	margin-bottom:10px;
	color:white;
	background:#1274E5;
	border:0;
	border-radius:20px;
	width:250px;
	height:40px;
	cursor: pointer;
	font-size:16px;
	text-align: center;
	padding-top:15px;
}

.nav-deco:hover{
box-shadow: 0px 0px 15px #1274E5;
}
.nav-deco::before{
content:"<";
padding-right:30px;
}

footer{
	padding: 0px 0px 15px 380px;
	font-size:12px;
	color : #323743;
	text-align:center;
	background:#15171C;
	width:920px;
}

/* MESSAGE */

.message, .message-ok, .message-ne, .message-ko{
	position:fixed;
	top:0px;
	height:30px;
	width:1300px;
	text-align:center;
	font-size:16px;
	padding-top:10px;
	display:block;
	margin: 0 0 0 0;
	z-index:9999;
}
.message-ok{background-color:#595;}
.message-ne{background-color:#559;}
.message-ko{background-color:#955;}


/* SITE EN MODE REDUIT */

@media screen and (max-width: 1300px) {
	
	#page-conteneur{
		background:#222733;
	}
	
	#page{
		width:920px;
		background:#222733; 
	}
	
	#menu{
		display:none;
		padding:0;
		margin:0;
	}
	#nav-logo{
		display:block;
		cursor:pointer;
		margin: 0;
		padding: 15px;
	
	}
	nav{
		padding:0;
		margin:0;
		position:relative;
		width:920px;
		text-align:center;
	}
	nav:hover #menu{
		display:block;
		height:700px;
		width:920px;
		text-align:center;
		font-size:20px;
	}

	section{
		margin-left:0;
		padding-top:0;
		width:920px;		
	}
	
	.message, .message-ok, .message-ne, .message-ko{
		width:920px;
		padding-top:15px;
		height:40px;
		visibility:hidden;
		display:none;
	}
	
	footer{
		padding-left:0;
		width:920px;
	}
	
	.jetons-menu{
		visibility:hidden;
		display:none;
	}
	.jetons-haut{
		visibility:visible;
		display:inline-block;
		float:right;
		margin-right:10px;
		margin-top:5px;
		text-align:right;
		width:100px;
	}
}

/* SITE EN MODE TELEPHONE MOBILE */


@media screen and (max-width: 950px) {
	#nav-logo {
		padding:40px;		 
	}
	.jetons-haut{
		margin-right:50px;
		margin-top:30px;
	}		
	.message, .message-ok, .message-ne, .message-ko{
		padding-top:40px;
		height:70px;
	}
}


/* *************************** PAGES ***************************** */


.lien-rapide{
	display:inline-block;
	width:250px;
	margin:20px;
	border-radius: 10px;
	padding:5px;
}
.lien-rapide:hover{
	background:#1274E5;
}


h1{
	text-align:left;
	font-size:26px;
	margin: 0;
	padding-top:15px;
	padding-left:30px;
	color:white;
}
h2{
text-align:left;
font-size:20px;
padding-top:20px;
padding-left :30px;
margin:0 ;
color : #1274E5;
}
h3{
font-size:24px;
margin: 5px 0 5px 0;
padding: 0 0 0 0;
text-align:center;
}








/* case à cocher personnalisé */

.case_a_cocher {
	position: relative;
	display: inline-block;
	padding-bottom:5px;
}

.case_a_cocher input[type="checkbox"] {
	visibility: hidden; 
	position: absolute; top: -999px; left: -999px;
}

.case_a_cocher label {
	padding-left :23px;
}

.case_a_cocher input[type="checkbox"] + label:before {
	cursor: pointer;
	content: " ";
	text-align:center;
	width: 18px;height: 18px;
	position: absolute; 
	top: 1px ; 
	left: -3px;
	border: solid #333 2px;
	background: #EEE;

}
.case_a_cocher  input[type="checkbox"]:hover + label:before {
	border: solid #1274E5 2px;
}
.case_a_cocher  input[type="checkbox"]:checked + label:before {
	background: #FFF url("/images/case.png"); 
	background-size:100%;
}


/* radio bouton personnalisé */

.radio {
	position: relative;
	display: inline-block;
	padding-bottom:5px;
}

.radio input[type="radio"] {
	visibility: hidden; 
	position: absolute; top: -999px; left: -999px;
}

.radio label {
	padding-left :23px;
}

.radio input[type="radio"] + label:before {
	cursor: pointer;
	content: " ";
	text-align:center;
	width: 18px;height: 18px;
	position: absolute; top: 1px; left: -3px;
	border: solid #333 2px;
	background: #EEE;
	border-radius: 10px;
}
.radio  input[type="radio"]:hover + label:before {
	border: solid #1274E5 2px;
}
.radio  input[type="radio"]:checked + label:before {
	background: #FFF url("/images/radio.png"); 
	background-size:100%;
}



/* DIVERS */

a{
 text-decoration:none;
 color:white;
}

.centrer{
text-align:center;
}
.droite{
text-align:right;
}
.gauche{
text-align:left;
}
.rouge{
color:red;
}
.bleu{
color:blue;
}
.vert{
color:green;
}
.gras{
	font-weight:bold;
}
.italique{
	font-style:italic;
}

/* OPTIONS */

.options{
	font-size:18px;
	cursor:pointer;
}

.cacher{
visibility: hidden;
}

.flotterdroite{
	display:block;
	float:right;
}

/* Tableaux */

table{
	border-collapse: collapse;
	margin-left:10px;
	margin-right:10px;
	width:900px;
	font-size:16px;
	text-align:left;
}


tr.entete {
	border-bottom:0;
	height:50px;
border-radius:20px;
}

tr.entete td{
	background-color: #222733;
	font-weight:bold;
	text-align:left;
	padding-left:15px;
}

tr.entete td:first-child{
	border-top-left-radius:20px;
	border-bottom-left-radius:20px;
}
tr.entete td:last-child{
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
}



tr.normal {
	border-bottom:1px SOLID #333;
	height:60px;
}

tr.mini {
	border-bottom:1px SOLID #333;
	height:30px;
	font-size:14px;
}

tr.inactif {
	color: #933;
	border-bottom:1px SOLID #333;
	height:60px;
}


tr.autre {
	color: #555;
	border-bottom:1px SOLID #333;
	height:60px;
}


tr.normal:hover,tr.mini:hover,tr.autre:hover,tr.inactif:hover{
	background-color: #111;
}



td{
	padding-left:15px;
}

 .logs{
	font-size:12px;
	text-align:left;
}





/********   CHOIX DES SEMAINES   *************/

.semaine{
	display:inline-block;
	font-size:20px;
	font-weight:bold;	
	margin:8px;
}

.semaine span{
	font-size:24px;
	display:inline-block;
	width:440px;
}
.semaine-lien{
	display:inline-block;
	margin:10px 8px 10px 8px;
	color:white;
	background:#1274E5;
	border:0;
	border-radius:20px;
	width:70px;
	height:30px;
	cursor: pointer;
	font-size:20px;
	text-align: center;
}


.semaine-lien:hover{
box-shadow: 0px 0px 15px #1274E5;
}

.textebouton{
	padding-left: 10px;
	padding-right: 10px;
	display:inline-block;
	color:white;
	background:#1274E5;
	border:0;
	border-radius:20px;
	min-width:28px;
	min-height:28px;
	cursor: pointer;
	font-size:18px;
	text-align: center;
}
.textebouton:hover{
box-shadow: 0px 0px 15px #1274E5;
}


/***************** ENTETES ET CASES RESERVATIONS **************************/

.cEnteteJour{
	vertical-align:top;
	display:inline-block;
	width:115px;
	height:45px;
	font-weight:bold;
	font-size:14px;
	border-bottom:1px SOLID #333;
}
.cEnteteJourOk{
	vertical-align:top;
	display:inline-block;
	width:115px;
	height:39px;
	font-weight:bold;
	font-size:14px;
	Border-bottom: 6px SOLID #373;
}


.cEnteteHeure{
	vertical-align:top;
	display:inline-block;
	width:115px;
	height:20px;
	font-weight:bold;
	font-size:14px;
	border-bottom:1px SOLID #333;
}
.cEnteteHeureSup{
	color:#666;
}

.cEnteteHeureOk{
	vertical-align:top;
	display:inline-block;
	width:109px;
	height:20px;
	font-weight:bold;
	font-size:14px;
	Border-right: 6px SOLID #373;
	border-bottom:1px SOLID #333;
}

.cCase{
	vertical-align:top;
	display:inline-block;
	width:115px;
	height:20px;
	font-size:14px;
	border-bottom:1px SOLID #333;
}

/* LIBRE , PASSE , ERREUR */

.libre, .proche{
	vertical-align:top;
	display:inline-block;
	width:115px;
	height:20px;
	font-size:12px;
	border-bottom:1px SOLID #333;
}


.libre a{
	color:#336;
}
.proche a{
	color:#444;
}

.libre:hover, .proche:hover{
	background-color: #383;
}

.passe{
	vertical-align:top;
	display:inline-block;
	width:115px;
	height:20px;
	font-size:12px;
	color:#633;
	border-bottom:1px SOLID #333;
}
.passe:hover{
	background-color: #833;
}

.err{
	vertical-align:top;
	display:inline-block;
	width:115px;
	height:20px;
	font-size:16px;	
	background-color: #F44;
	border-radius:15px;
}
.err:hover{
	background-color: #F00;
}

 .initiales{
	float:left;
	text-align:center;
	display:block;
	width:70px;
	margin: 0;
	padding: 0;
	font-size:16px;
}
 .miniheure{
	float:right;
	text-align:center;
	font-size:12px;
	display:block;
	width:28px;
	margin: 0;
	padding: 0;
	padding-top:2px;
	padding-right:12px;
}

/* VOS RESERVATIONS */


.okdebutfin{
	vertical-align:top;
	display:inline-block;
	width:113px;
	height:21px;
	font-size:14px;
	background-color: #1274E5;
	border-radius:20px;
	border: 1px SOLID #222;
}

.okdebut{
	vertical-align:top;
	display:inline-block;
	width:113px;
	height:22px;
	font-size:14px;
	background-color: #1274E5;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	border-top: 1px SOLID #222;
	border-left: 1px SOLID #222;
	border-right: 1px SOLID #222;
}

.okmilieu{
	vertical-align:top;
	display:inline-block;
	width:113px;
	height:23px;
	font-size:14px;
	background-color: #1274E5;
	border-radius:0px;
	border-left: 1px SOLID #222;
	border-right: 1px SOLID #222;
}


.okfin{
	vertical-align:top;
	display:inline-block;
	width:113px;
	height:22px;
	font-size:14px;
	background-color: #1274E5;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
	border-bottom: 1px SOLID #222;
	border-left: 1px SOLID #222;
	border-right: 1px SOLID #222;
}

.okdebut:hover ,.okmilieu:hover, .okfin:hover,.okdebutfin:hover {
	background-color: #2284E5;
}






/* LES AUTRES RESERVATIONS */


.kodebutfin{
	vertical-align:top;
	display:inline-block;
	width:113px;
	height:21px;
	font-size:14px;
	background-color: #F33;
	border-radius:20px;
	border: 1px SOLID #222;
}

.kodebut{
	vertical-align:top;
	display:inline-block;
	width:113px;
	height:22px;
	font-size:14px;
	background-color: #F33;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	border-top: 1px SOLID #222;
	border-left: 1px SOLID #222;
	border-right: 1px SOLID #222;
}

.komilieu{
	vertical-align:top;
	display:inline-block;
	width:113px;
	height:23px;
	font-size:14px;
	background-color: #F33;
	border-radius:0px;
	border-left: 1px SOLID #222;
	border-right: 1px SOLID #222;
}


.kofin{
	vertical-align:top;
	display:inline-block;
	width:113px;
	height:22px;
	font-size:14px;
	background-color: #F33;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
	border-bottom: 1px SOLID #222;
	border-left: 1px SOLID #222;
	border-right: 1px SOLID #222;
}

.kodebut:hover ,.komilieu:hover, .kofin:hover,.kodebutfin:hover {
	background-color: #F44;
}



/* ****************  TOOL TIP TEXT ***************** */

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
overflow:hidden;
  visibility: hidden;
  padding: 5px;
  background-color: #FFA;
  text-align: center;
  border-radius: 6px;
  border: 1px SOLID #000;
  width:230px;
  position: absolute;
  z-index: 1;
  bottom: 200%;
  left:-170px;
  opacity: 0;
  transition: opacity 0.5s;
  font-size:12px;
  box-shadow: 0px 0px 10px #000;
  color:black;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/* ********************  INPUT/BOUTON FORMULAIRES **************************** */

input, select {
	overflow: hidden;
	margin:15px;
	color:white;
	background:#222733;
	border:0;
	border-radius:20px;
	padding-left:20px;
	padding-right:20px;
	height:40px;
	font-size:18px;
	text-align: left;
	cursor:pointer;
	filter: none;
}
input:hover, select:hover{
	box-shadow: 0px 0px 15px #1274E5;
}

input[type="submit"]{
  background-color: #1274E5;
}
input[type="submit"].boutonrouge{
	background:#F00;
}