<style type="text/css">
				#calendar {padding:0; margin:0; border-top:1px solid black; border-left:1px solid black; border-right:1px solid black; table-layout: auto;}
				#calendar th {border:1px solid black; border-bottom:2px solid black}
				#calendar td {height: 15px;}
				#calendar td.dayOfWeek {border-left:1px solid black; border-right:0.1px solid black; border-bottom:1px solid black; padding-left:3px; padding-right:3px; font-size:10px;}
				#calendar td.day {text-align: right; border-right:1px solid black; border-bottom:1px solid black; padding-left:0px; padding-right:3px; font-size:10px;}
				#calendar td.week {border-right:1px solid black; border-bottom:1px solid black;}
				#calendar td.JN {border-right:1px solid black; border-bottom:1px solid black;}
				#calendar td.endOfMonth {border-bottom:2px solid black; padding-left:0px; padding-right:0px;}
				#calendar .weekend{background-color : #CCC; padding-left:3px; padding-right:3px;}
				#calendar .CouleurBase{background-color : #008080;}
				
				
				#Statistiques {padding:0; margin:0; border-top:1px solid black; border-left:1px solid black; border-right:1px solid black;}
				#Statistiques th {border:1px solid black; border-bottom:2px solid black; padding-left:30px; padding-right:30px; text-align: center;}
				#Statistiques td {padding-left:30px; padding-right:30px; text-align: center; border-bottom:1px solid grey; order-left:1px solid grey; border-right:1px solid grey;}
				#Statistiques td.dayOfWeek {border-left:1px solid black;}
				#Statistiques td.day {text-align: center;}
				#Statistiques td.week {border-right:1px solid black;}
				#Statistiques td.endOfTab {border-bottom:2px solid black;}
				#Statistiques .weekend{background-color : #CCC;}
				#Statistiques .CouleurBase{background-color : #008080;}
				
				#JN {width: 100%; padding:0; margin:0; border-top:0px solid black; border-left:0px solid black; border-right:0px solid black; table-layout: auto;}
				#JN td {height: 14px; padding-left:3px; padding-right:3px; font-size: 13px;}
				
				#calendar td.dispo {border-bottom:1px solid black; border-right:1px solid black; vertical-align: bottom; padding-bottom:3px; padding-left:3px; padding-right:3px;}
				#calendar td.remplacements {width: 200px; border-bottom:1px solid black; border-right:1px solid black; vertical-align: bottom; padding-bottom:3px; padding-left:3px; padding-right:3px; }
				#calendar td.notes {width: 200px; border-bottom:1px solid black; border-left:0px solid black; vertical-align: bottom; padding-bottom:3px; padding-left:3px; padding-right:3px; border-right:1px solid black;}
	
			
	
		
		
		
		
			

html, body {
	font-family: Helvetica, Sans-Serif;
}		

.select-style select {
	padding: 0px 0px;
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: white;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
	width:min-content;
    height:15px;
    overflow: hidden;
}

.select-style option {
background-color: darkgrey;
}

#monomeSelect *
{color:black;}



.select-styleInvisible select {
	padding: 0px 0px;
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: white;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
    width:100%; 
    height:100%;
}

.select-style {
	background-color: <?php echo $couleurBase?>;
	color: white;
	}

.select-styleInvisible {
	background-color: transparent;
	color: white;
	height:100%;
}


.formulaire form {
	margin : 0px;
	display:inline;
}



.survol:hover {
  background-color: grey;
}

.form-slash select{
    width:5px;
}

.formulaire {
display: inline;
margin : 0px;
}

hr {
  height: 5px;
  margin: 0 0;
  padding: 0;
  border: 0;
}

.sucess{
	text-align: center;
	color: black;
}
.sucess a {
	text-decoration: none;
	color: #0084ff;

}

.lien {

}

.police1 {
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
  font-stretch: ultra-expanded;
   font-weight: bolder;
   letter-spacing: 1px;
}

.police2 {
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
  font-stretch: ultra-expanded;
   letter-spacing: 1px;
}

.police2Left {
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
  font-stretch: ultra-expanded;
   letter-spacing: 1px;
   float: left;
}

.font22 {
font-size: 22px;
}

.alignCenter {
text-align: center;
}

.alignLeft {
text-align: left;
}

.alignRight {
text-align: right;
}

.red {
color:red;
}

.menuReglages {
border: 1px double #1c87c9;
width:500px;
}



@page {
    size: auto;
    margin: 0mm;
}

@media print
{    body {
-webkit-print-color-adjust: exact; 
  }
    .no-print, .no-print *
    {
        display: none !important;
    }
    
     .Printbutton{display: none !important;}
     @page {
     margin:5mm 0 0 0;
     size: A3;
     }
     
    select{
    display: none !important;
    	}
    	
	.printBlack
	{
	color: #000 !important;
	}
}

#printBox{
  text-align:right;
width: 100%;
  margin:auto;
}

.Printbutton{
  display:inline-block;
  color:#fff;
  cursor:pointer;
  background-color:#3e87ec;
  padding:10px;
  margin:5px;
}

.remplacements
	{
	
	}

.note {
  width: 100%;
  margin: 0px 0px;
	border: none;
	height:40px;
	background-color : #F1F1F1; 
}




#menu {border-spacing: 10px; padding:0; margin:0; border-top:0px solid black; border-left:0px solid black; border-right:0px solid black; table-layout: auto;}
#menu th {border:0px solid black; border-bottom:0px solid black}
#menu td {text-align:center;}

.retour {
		text-align:left;
		}


.box {
  border: 1px solid #c4c4c4;
  padding: 27px 26px 10px 26px;
  background: white;
  margin: 30px auto;
  width: 360px;
}
h1.box-logo a {
  text-decoration:none;
}
h1.box-title {
  color: #AEAEAE;
  background: #f8f8f8;
  font-weight: 300;
  padding: 15px 25px;
  line-height: 30px;
  font-size: 25px;
  text-align:center;
  margin: -27px -26px 26px;
}
.box-button {
  border-radius: 5px;
  background: #d2483c;
  text-align: center;
  cursor: pointer;
  font-size: 19px;
  width: 100%;
  height: 51px;
  padding: 0;
  color: #fff;
  border: 0;
  outline:0;
}
.box-register
{
  text-align:center;
  margin-bottom:0px;
}
.box-register a
{
  text-decoration:none;
  font-size:12px;
  color:#666;
}
.box-input {
  font-size: 14px;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 25px;
  padding-left:10px;
  border-radius: 5px;
  width: 347px;
  height: 50px;
}

.box-input-MDP {
  font-size: 14px;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 25px;
  padding-left:10px;
  padding-right:5px;
  border-radius: 5px;
  width: 305px;
  height: 50px;
  float: left;
} 

.box-input-MDP-Bouton {
width: 30px;
height: 50px;
border: 0px;
background-color: Transparent;
background-image:url(images/oeil.png);
background-repeat: no-repeat;
background-position: center;
float: right;
vertical-align: middle;
} 

.box-input:focus {
    outline: none;
    border-color:#5c7186;
}

p.errorMessage {
    background-color: #e66262;
    border: #AA4502 1px solid;
    padding: 5px 10px;
    color: #FFFFFF;
    border-radius: 3px;
}




.gauche{
   float: left;
   width:10%
}
.milieu{
   display: inline-block;
   width:50%
}
.droite{
   float: right;
   width:10%
}

/* styles.css */
#menu {
    border: 1px double #1c87c9;
    width: 900px;
}


#menuAdmin {
text-align: right;
}


#loading1 {
    display: none;
}

#loading2 {
    display: none;
}



.flotteDroite {
		float:right;
		}
.flotteGauche {
		float:left;
		}

/* Info-bulle */
.infobulle {
  text-decoration:none;
  position:relative;
}
.infobulle span {
  display:none;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  color:black;
  background-color: #eff1f3;
  font-size:10px;
  font-style:italic;
}
.infobulle span img {
  float:left;
  margin:0px 8px 8px 0;
}
.infobulle:hover span
{
  display:block;
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  width:250px;
  /* max-width:200px; */
  min-height:20px;
  border:1px solid black;
  margin-top:12px;
  margin-left:32px;
  overflow:hidden;
  padding:8px;
}


/* le mode sombre */
	@media (prefers-color-scheme: dark) {
		body {
  background: #1c242d;
}

.box {
}

h1.box-logo a {
}

h1.box-title {
  color: #AEAEAE;
  background: #f8f8f8;
  font-weight: 300;
  padding: 15px 25px;
  line-height: 30px;
  font-size: 25px;
  text-align:center;
  margin: -27px -26px 26px;
}

.box-button {
}

.box-register{
}

.box-register a{
}

.box-input {
}

.box-input-MDP {
} 

.box-input-MDP-Bouton {
} 

.box-input:focus {
    border-color:#5c7186;
}
.sucess{
	color: white;
}
.sucess a {
	color: #58aef7;
}
p.errorMessage {
    background-color: #e66262;
    border: #AA4502 1px solid;
    color: #FFFFFF;
}

a.icon {
        filter: invert(1);
    }
		

		
		
#calendar {padding:0; margin:0; border-top:1px solid #ADADAD; border-left:1px solid #ADADAD; border-right:1px solid #ADADAD; table-layout: auto;}
				#calendar th {border:1px solid #ADADAD; border-bottom:2px solid #ADADAD}
				#calendar td {height: 15px;}
				#calendar td.dayOfWeek {border-left:1px solid #ADADAD; border-right:0.1px solid #ADADAD; border-bottom:1px solid #ADADAD; padding-left:3px; padding-right:3px; font-size:10px;}
				#calendar td.day {text-align: right; border-right:1px solid white; border-bottom:1px solid #ADADAD; padding-left:0px; padding-right:3px; font-size:10px;}
				#calendar td.week {border-right:1px solid #ADADAD; border-bottom:1px solid #ADADAD;}
				#calendar td.JN {border-right:1px solid #ADADAD; border-bottom:1px solid #ADADAD;}
				#calendar td.endOfMonth {border-bottom:2px solid #ADADAD; padding-left:0px; padding-right:0px;}
				#calendar .weekend{background-color : #525252; padding-left:3px; padding-right:3px;}
				#calendar .CouleurBase{background-color : #008080;}
				
				
				#Statistiques {padding:0; margin:0; border-top:1px solid #ADADAD; border-left:1px solid #ADADAD; border-right:1px solid #ADADAD;}
				#Statistiques th {border:1px solid #ADADAD; border-bottom:2px solid #ADADAD; padding-left:30px; padding-right:30px; text-align: center;}
				#Statistiques td {padding-left:30px; padding-right:30px; text-align: center; border-bottom:1px solid grey; order-left:1px solid grey; border-right:1px solid grey;}
				#Statistiques td.dayOfWeek {border-left:1px solid #ADADAD;}
				#Statistiques td.day {text-align: center;}
				#Statistiques td.week {border-right:1px solid #ADADAD;}
				#Statistiques td.endOfTab {border-bottom:2px solid #ADADAD;}
				#Statistiques .weekend{background-color : #525252;}
				#Statistiques .CouleurBase{background-color : #008080;}
				
				#JN {width: 100%; padding:0; margin:0; border-top:0px solid #ADADAD; border-left:0px solid #ADADAD; border-right:0px solid #ADADAD; table-layout: auto;}
				#JN td {height: 14px; padding-left:3px; padding-right:3px; font-size: 13px;}
				
				#calendar td.dispo {border-bottom:1px solid #ADADAD; border-right:1px solid #ADADAD; vertical-align: bottom; padding-bottom:3px; padding-left:3px; padding-right:3px;}
				#calendar td.remplacements {width: 200px; border-bottom:1px solid #ADADAD; border-right:1px solid #ADADAD; vertical-align: bottom; padding-bottom:3px; padding-left:3px; padding-right:3px; }
				#calendar td.notes {width: 200px; border-bottom:1px solid #ADADAD; border-left:0px solid #ADADAD; vertical-align: bottom; padding-bottom:3px; padding-left:3px; padding-right:3px; border-right:1px solid #ADADAD;}
			
	
		
 html, body {
	color:white;	
}	



.note {
	background-color : #686868; 
}

.dispo {
color:black;
}

.select-styleInvisible select {
    color: #1c242d;
}

.Couleurtexte {
color:white;
}

}
