.titre_page{	color:#036;	font-weight: bold; padding-bottom:10px;	text-align:center;}
.clair {background-color:#009688 ;}
.fonce {background-color:#004a43;}
 input[type=submit] {   background: #009688; color:white; border-radius: 10px;}
button {  border-radius: 10px;}
a.bulle b {display:none;}
a.bulle:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.bulle:hover b {border-radius:6px; display:block; position:absolute; top:30px; left:-25px; padding:5px; font-weight:normal; color:#000; border:1px solid #888; background:#C0C0C0; min-width:250px;text-align:center;-moz-box-shadow: 5px 5px 3px #ccc; -webkit-box-shadow: 5px 5px 3px #ccc;}
a.bulle:hover b em {position:absolute; left:20px; top:-6px; width:11px; height:6px;  display:block; font-size:1px;}

a.bulle_haut b {display:none;}
a.bulle_haut:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.bulle_haut:hover b {border-radius:6px; display:block; position:absolute; top:-100px; left:-25px; padding:5px; font-weight:normal; color:#000; border:1px solid #888; background:#C0C0C0; min-width:250px;text-align:center;-moz-box-shadow: 5px 5px 3px #ccc; -webkit-box-shadow: 5px 5px 3px #ccc;}
a.bulle_haut:hover b em {position:absolute; left:20px; top:-6px; width:11px; height:6px;  display:block; font-size:1px;}


a.bulle_aide b {display:none;}
a.bulle_aide:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.bulle_aide:hover b {border-radius:6px; display:block; width:100%;transform: translateX(-5%);position:absolute; top:30px;  padding:5px; font-weight:normal; color:#000; border:1px solid #c0c0c0; background:#c0c0c0; text-align:center;-moz-box-shadow: 5px 5px 3px #ccc; -webkit-box-shadow: 5px 5px 3px #ccc;}
/*a.bulle_gauche:hover b em {position:absolute; left:-155px; top:-6px; width:11px; height:6px;  display:block; font-size:1px;}*/
[baria-label]:hover:before,
[baria-label]:focus:before {  content: "▴";  position: absolute;  top: -0.35em;	left: 50%;	transform: translateX(-50%);  font-size: 40px;  color: #c0c0c0;}
[baria-label]:focus {  outline: none;}

.picto-item {
  position: relative;  /*les .picto-item deviennent référents*/
  cursor: help;
  border-radius: 50%;
}
.field-container {
    display: inline-block;
}
/* on génère un élément :after lors du survol et du focus :*/

.picto-item:hover:after,
.picto-item:focus:after {
  content: attr(aria-label);  /* on affiche aria-label */
  position: absolute;
  top: -2.4em;
  left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
 	white-space: nowrap;  /* on interdit le retour à la ligne*/
  padding: 5px 14px;
  background: #F0EAD6;
  color: #000;
  border-radius: 4px;
  font-size: 1.2rem;
}

/* on génère un second élément en :before pour la flèche */

[aria-label]:hover:before,
[aria-label]:focus:before {
  content: "▼";
  position: absolute;
  top: -1em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
  font-size: 20px;
  color: #F0EAD6;
}

/* pas de contour durant le :focus */
[aria-label]:focus {
  outline: none;
}


.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
 /*background-color: #555;
  color: #fff; */
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -150px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #F0EAD6 transparent transparent transparent;
}

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

a.bulle_a_gauche b {display:none;}
a.bulle_a_gauche:hover { border:0; position:relative; z-index:500; text-decoration:none;font-size:1em;}
a.bulle_a_gauche:hover b {border-radius:6px;display:block; position:absolute; top:-10px; left:-350px; padding:5px; font-size:0.5em;font-weight:normal; color:#000; border:1px solid #888; background:#c0c0c0; min-width:150px;text-align:center;-moz-box-shadow: 5px 5px 3px #ccc; -webkit-box-shadow: 5px 5px 3px #ccc;}
a.bulle_a_gauche:hover b em {position:absolute; left:-300px; top:-6px; width:11px; height:6px;  display:block; font-size:1px;}



a.bulle_gauche b {display:none;}
a.bulle_gauche:hover { border:0; position:relative; z-index:500; text-decoration:none;}
a.bulle_gauche:hover b {border-radius:6px;display:block; position:absolute; top:30px; left:-225px; padding:5px; font-weight:normal; color:#000; border:1px solid #888; background:#c0c0c0; min-width:150px;text-align:center;-moz-box-shadow: 5px 5px 3px #ccc; -webkit-box-shadow: 5px 5px 3px #ccc;}
a.bulle_gauche:hover b em {position:absolute; left:-155px; top:-6px; width:11px; height:6px;  display:block; font-size:1px;}


a.bulle_droite b {display:none;}
a.bulle_droite:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.bulle_droite:hover b {border-radius:6px; display:block; position:absolute; top:-30px; left:100px; padding:5px; font-weight:normal; color:#000; border:1px solid #888; background:#c0c0c0; min-width:200px;text-align:center;-moz-box-shadow: 5px 5px 3px #ccc; -webkit-box-shadow: 5px 5px 3px #ccc;}
a.bulle_droite:hover b em {position:absolute; left:155px; top:6px; width:11px; height:6px;  display:block; font-size:1px;}
.milieu {text-align:center;}
.vide {background-color:red;border-radius: 8px;}
.vide:before {	color:black;	font-weight:normal;    content:"disponible";}
.vide:hover:before {	font-weight:bold;    content:"réserver";}
.triangle_gauche{	width:1px;	height:1px;	border:1px solid #009688;	border-color:transparent #009688 transparent  transparent;	border-width:20px;	cursor:pointer;}
.triangle_gauche:hover{width:1px;height:1px;border:1px solid #004a43;	border-color:transparent #004a43 transparent  transparent;	border-width:20px;cursor:pointer;}
.triangle_droit{width:1px;height:1px;border:1px solid #009688;	border-color:transparent transparent  transparent  #009688;border-width:20px;cursor:pointer;}
.triangle_droit:hover{width:1px;height:1px;border:1px solid #004a43;	border-color:transparent  transparent  transparent #004a43;border-width:20px;cursor:pointer;}
/*.dataTables_length select {background:#8dd;color:#000001;}*/
table.dataTable {line-height:1;}
options[selected] { background: #e7bc8e; color:#ecc8ba;}
tr.odd {background-color: #eff3ed;  /* #eff3ed  pair non tri */}
tr.odd td.sorting_1 {background-color: #dbe0e1;   /*  #cde1c4  pair tri */}
tr.odd td.sorting_2 {background-color: #b9a199;}
tr.even td.sorting_1 {background-color: #dbf0f5;	/* #d8e5d1 impair tri */}
tr.even td.sorting_2 {background-color: #CCC;	/* #cedec6 */}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size:1vw;color:grey;}
::-moz-placeholder { /* Firefox 19+ */
  font-size:1vw;color:grey;}
:-ms-input-placeholder { /* IE 10+ */
  font-size:1vw;color:grey;}
:-moz-placeholder { /* Firefox 18- */
  font-size:1vw;color:grey;}
input:focus{ outline:none; }
:required {border:2px dashed grey; 	border-radius:3px; }
input[readonly] {   border: 0px solid red;   background-color:white;}
select {	border-radius:3px;   background-color:white;}
.w3-text-blue-le-preau,.w3-text-hover-blue-le-preau:hover{color:#0033f2!important}
.w3-text-red-le-preau,.w3-text-hover-red-le-preau:hover{color:#ec0006!important}
.w3-text-green-le-preau,.w3-text-hover-green-le-preau:hover{color:#00a732!important}
.w3-closebtn {font-size:25px;top:0;}
.pkcontainer {max-width: 820px;margin: 0px auto; margin-top: 10px;}
.pkcomment {float: left;width: 100%;height: auto;}
.pktextinput { float: left;width: 100%;min-height: 75px; outline: none;resize: none;border: 1px solid grey;}

.planning {margin:auto;;border:1px solid grey;border-collapse:collapse;width:80%;text-align:center; font-size:1.7vw;}
.planning td { text-align:center;}
.planning td.cellule {border:1px solid grey;border-collapse:collapse;width:12.5%;text-align:center;height:3vh;font-size:0.5em;
    overflow: hidden;
    }
.planning td.semaine {font-size:1.5vw;text-align:center;}
.j1,.h12,.h13 {background-color:#f1f1f1;}
.navig-droite {position:relative;float:right;top:0vh;text-align:right;display:inline;font-size:1.7vw;cursor:pointer;right:1em;}
.navig-gauche {position:relative;float:left;top:0vh;text-align:left;display:inline;font-size:1.7vw;cursor:pointer;left:1em;}
.occupe {background-color:red;color:white;}
.reservable {background-color:green;}
.attente {background-color:pink;}
@font-face {
    font-family: 'timeburnernormal';
    src: url('../fonts/timeburnernormal.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'consola';
    src: url('../fonts/consola.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
 /* The switch - the box around the slider */
.switch {  position: relative;  display: inline-block;  width: 2.5em;  height: 1.6em;}
/* Hide default HTML checkbox */
.switch input {  opacity: 0;  width: 0;  height: 0;}
/* The slider */
.slider {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: green;  -webkit-transition: .4s;  transition: .4s;}
.slider:before {  position: absolute;  content: "";  height: 1.0em;  width: 1.0em;  left: 4px;  bottom: 4px;  background-color: white;  -webkit-transition: .4s;  transition: .4s;}
input:checked + .slider {  background-color: red;}
input:focus + .slider {  box-shadow: 0 0 1px red;}
input:checked + .slider:before {  -webkit-transform: translateX(1.0em);  -ms-transform: translateX(1.0em);  transform: translateX(1.0em);}
/* Rounded sliders */
.slider.round {  border-radius: 1.0em;}
.slider.round:before {  border-radius: 50%;} 

 option:disabled {    font-size:0.9vw;color:grey;   }
    .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
	.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
	.autocomplete-selected { background: #F0F0F0; }
	.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
	.autocomplete-group { padding: 2px 5px; }
	.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
	
    .ui-autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
	.ui-autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
	.ui-autocomplete-selected { background: #F0F0F0; }
	.ui-autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
	.ui-autocomplete-group { padding: 2px 5px; }
	.ui-autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

  *, *:before, *:after {transition: .25s ease-in-out;}
.pktoogle-label {display: block;background: #f3f3f3;height: 20px;width: 32px;border-radius: 20px;margin: 20px auto;margin-top:0;position: relative;box-shadow: 0 0 0 2px #dddddd;}
.pktoogle-label .on {display: block;position: absolute;z-index: 0;left: 0;opacity: 1;min-width: 14%;line-height: 20px;opacity: 0;color: #ff0000;}
.pktoogle-label .off {display: block;position: absolute;z-index: 0;right: 40px;text-align: right;opacity: 1;min-width: 14%;line-height: 20px;opacity: 1;color: #bbbbbb;top:0;}
.pktoogle-label:before {content: '';display: block;position: absolute;z-index: 1;top: 0;left: 0;border-radius: 20px;height:20px;width: 20px;background: white;  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2), 0 0 0 2px #dddddd;}
.pktoogle {  position: absolute;  left: -5000px;}
.pktoogle:checked + .pktoogle-label {  background: #ff0000;  box-shadow: 0 0 0 2px #ff0000;}
.pktoogle:checked + .pktoogle-label .on {  left: 40px;  opacity: 1;}
.pktoogle:checked + .pktoogle-label .off {  right: 0px;  opacity: 0;}
.pktoogle:checked + .pktoogle-label:before {  left: 12px;  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2), 0 0 0 2px #ff0000;}
@media (max-width:1000px){
	.planning {font-size:2.5vw;width:100%;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size:2vw;color:grey;}
::-moz-placeholder { /* Firefox 19+ */
  font-size:2vw;color:grey;}
:-ms-input-placeholder { /* IE 10+ */
  font-size:2vw;color:grey;}
:-moz-placeholder { /* Firefox 18- */
  font-size:2vw;color:grey;}
	}
table.datepicker_table td { cursor:pointer;}
table.datepicker_table td.active { color : navy;background-color:#CCC;text-align:center;}
table.datepicker_table td.today { color:#6FF;background-color:#888;text-align:center;}
#map{ /* la carte openstreetmap DOIT avoir une hauteur sinon elle n'apparaît pas */
                height:400px;
            }