body{
    background-color: #2a2a2a;
    color: #a5a5a5;
	margin: 25px 0 0 0;
    font-family: -apple-system-body,system-ui,Roboto,sans-serif;
	font-size: 17px;
	line-height: 24px;
}

ul{
	list-style:none;
	margin:0;
	padding:0;
}
/*======== Mise en forme du header =============*/
#header {
	background-color:#2a2a2a;
	width:100%;
	position: fixed;
	height:40px;
	top: 0; left:0;
	z-index:2;
	border-bottom: 1px solid #1f1f1f;
	font-size: 18px;
}
/*style du titre de page*/
h1{
	font-size: 18px;
	line-height: 21px;
	font-weight: bold;
	margin: 0;
	color: #e5e5e5;
}

div #gauche {
	text-align: left;
	float: left;
	width: 100px;
	padding-top: 8px;
	padding-left: 9px;
	color: rgb(21, 125, 251);
}

div #droite {
	text-align: right;
	float: right;
	width: 100px;
	padding-top: 8px;
	padding-right: 9px;
	color: rgb(21, 125, 251);
}

div #centre {
	text-align: center;
	margin-left: 109px;
	margin-right: 109px;
	padding-top: 8px;
}
div #flechedroite {
	float: right;
	margin-left:6px;
}
div #flechegauche {
	float: left;
	margin-right:6px;
}
div #flechedroite img,
div #flechegauche img {
	width: 12px;
	height: auto;
}
/*=========== Contenu principal =====================*/
.content{
	position: absolute;
	top:47px;
	margin-left:5%;
	margin-right:5%;
	width:90%;
	text-align: left;
	line-height: 27px;
/*	-webkit-overflow-scrolling:touch; non standard, non reconnu dans Chrome ?? gestion auto par le systeme*/
	z-index:1;
}

.tab{
	float: left;
	background-color:#4a4a4a;
    width: 77px;
    position: relative;				/* pour appliquer les marges négatives, on le positionne*/
    left: -5.556%;					/* colle au bord gauche de body car la marge est calculée en fonction de content qui fait 90% de body avec 5% de marge. Ici 5/90 */
    top: -7px;
    padding: 7px 0 7px 5.556%;
    border-right: 1px solid #1f1f1f;
	border-bottom: 1px solid #1f1f1f;
	border-radius: 0 0 4px 0;
}

.tablinks{
    position: relative;
    right: -1px;
	padding-left: 7px;
    border-radius: 4px 0 0 4px;
}

div.tablinks > input[type="radio"]+label {				/* supprime la marge à droite des éiquettes de bouton radio de fonction*/
    margin-right: 0px;
}

.tablinks.active{
	background-color: #2a2a2a;
    border-right: 1px solid #2a2a2a;
	border-top: 1px solid #1f1f1f;
	border-bottom: 1px solid #1f1f1f;
	border-left: 1px solid #1f1f1f;
}

.gauche{
	float: right;
	height: 20px;
}

.centre{
	width: calc(100% - 2px);	/* on soustrait les 2 pixels de bordure sur tous les inputs qui prennent la largeur entière ==> évite le scrolling horizontal*/
	padding: 0;
}
hr{
	visibility:hidden;
	clear: both;
	margin:0;
}
form fieldset {
	border: none;
	margin: 0px 0px 8px 0px;
	padding: 0px;
}
input[type="text"],input[type="tel"],input[type="date"],textarea{
	-webkit-appearance: none;
	background-color:#4a4a4a;
	border: 1px solid #252525;
	border-radius: 4px;
	color:#f8f8f8;
	font-size: 13px;
	margin-bottom: 4px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left:4px;
	padding-right:0px;
}
input[type="button"],input[type="submit"]{
	-webkit-appearance: none;
	border-top: 1px solid #1f1f1f;
	border-bottom: 1px solid #1f1f1f;
	border-left: 0px;
	border-right: 0px;
	border-radius : 0px;
	font-size: 18px;
	background-color:#4a4a4a;
	color: #f8f8f8;
	width: 100%;
	height: 42px;
	margin: 6px 0 25px 0;
}
input[type="button"]:active,input[type="submit"]:active{
	background-color:#252525;
}

input.error {
  border-color: red;
}

/*------ Modification des checkbox et boutons radio --------*/
input[type="checkbox"]:checked,				/*masquage des checkbox par defaut*/
input[type="checkbox"]:not(:checked),
input[type="radio"]:checked,
input[type="radio"]:not(:checked) {
	position: absolute;
	clip: rect(0 0 0 0);
}

input[type="checkbox"]+label,					/*Dégage la place à gauche des labels pour la nvelle checkbox*/
input[type="radio"]+label {
/*	float: left;*/
	padding-left: 22px;
	margin-right: 15px;
	height: 25px;
	position: relative;
}

input[type="checkbox"]+label:before,			/*Création des nouvelles boites et boutons rond*/
input[type="radio"]+label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -8px;
	width: 16px;
	height: 16px;
	background-color: #4a4a4a;
	border: 1px solid #252525;
	border-radius:		3px;
}
input[type="radio"]+label:before {
	border-radius:		8px;
}

input[type="checkbox"]+label:after {			/*Coches verte pour la validation des checkbox*/	
	content: '';
	position: absolute;
	left: 7px;
	top: 50%;
	margin-top: -1px;
	width: 14px;
	height: 6px;
	border-style: solid;
	border-color: #08b612;
	border-width: 0 0 2px 3px;
	box-shadow:		-1px 1px 1px 0 rgba(0,0,0,.4);
	-webkit-transform-origin:	0 100%;
	transform-origin:	0 100%;
	-webkit-transform:	rotateZ(-55deg) skewX(-30deg);
	transform:	rotateZ(-55deg) skewX(-30deg);
	clip: rect(0px 0px 10px 0px);	/*permet de masquer la coche pour l'instant*/
}

input[type="checkbox"]:checked+label:after {	/*checkbox à l'état coché : on affiche la coche*/
	clip: rect(0px 18px 10px 0px);
}
input+label:after {							/*transition pour l'animation de la coche*/
	-webkit-transition:	clip 60ms ease-in;
}

input[type="radio"]+label:after {				/*Préparation des coches de boutons radio*/	
	content: '';
	position: absolute;
	left: 4px;
	top: 12px;
	margin-top: -5px;
	width: 10px;
	height: 10px;
	background-color: #08b612;
	box-shadow:		inset 0 1px 2px rgba(255,255,255,.6), inset 0 -1px 1px 0 rgba(0,0,0,.5), 0 0 3px #000;
	-webkit-border-radius:	50%;
	border-radius:		50%;
	-webkit-transform:	scale(0);
	transform:		scale(0);
}
input[type="radio"]:checked+label:after {
	-webkit-transform:	scale(1);
	transform:		scale(1);
}

/*Mise en forme liste des vols*/
#liste{
	margin-bottom: 20px;
	margin-top: 10px;
	float: right;
}
div #stats {
	display: table;
	width: 100%;
	border-bottom: 1px solid #1f1f1f;
}
div #statsgauche {
	width: 25%;
	display: table-cell;
}

div #statsdroite {
	width: 25%;
	display: table-cell;
}

div #statscentre1 {
	width: 25%;
	display: table-cell;
}

div #statscentre2 {
	display: table-cell;
}

 #stats h2 {
	color: #e5e5e5;
	font: -apple-system-body;
	font-size: 17px;
	line-height: 21px;
	margin: 0px;
}
#stats p{
	margin-top: 4px;
	margin-bottom: 9px;
}

.txtliste{
	display: inline-block;
	border-bottom: 1px solid #252525;
	width: 270px;
	height: 32px;
	margin-top: 10px;
}
#boutonSupprimer{
	color: #DD0000;
	border-top: 1px solid #DD0000;
	border-bottom: 1px solid #DD0000;
	background-color:#a5a5a5;
}
.desactive{
	-webkit-appearance: none;
}

input:disabled {
	-webkit-appearance: none;
	-webkit-text-fill-color: #f8f8f8;
	border: none;
	font-size: 15px;
	background-color: #2a2a2a;
	opacity: 1;
}


/* ========== Menu dépliant index ===================*/
 /* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 3; /* Stay on top */
  top: 41px;
  left: 0;
  background-color: #303030;
  border-right: 1px solid #1f1f1f;
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 14px 8px 14px 32px;
  text-decoration: none;
  font-size: 18px;
  color: #F8F8F8;
  border-bottom: 1px solid #1f1f1f;
  display: block;
  background-color: #4a4a4a;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  padding-left: 210px;
  right: 18px;
  font-size: 36px;
  background-color: #303030;
  color: rgb(21, 125, 251);
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size)
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
} */