:root {
	/* Variable Header */
	--heightHeader: 100px;
	--heightLogoHeader: calc(var(--heightHeader)*0.9);

	/* Variable Login */
	--widthInputLogin : 200px;
}

body {
	width: 100vw;
	margin: 0px;
	padding: 0px;
	padding-bottom: 10px;
	font-family: Verdana;
	color: black;
}

p {
	margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}

h3 {
	margin-top: 25px;
	margin-bottom: 5px;
}

/* Header */
header {
	height: var(--heightHeader);
	background: url("images/keyboard.png") repeat-x;
	background-size: auto var(--heightHeader);
	border-bottom: 3px black groove;
}

.styleBouton, button {
	padding: 4px;
	border-style: ridge;
	border-color: whitesmoke;
	border-width: 3px;
	color: black;
	text-decoration: none;
	background: white;
}

.styleBouton:hover, button:hover {
	background-color: black;
	color: white;
}

.buttonPlanning {
	padding: 0px;
}

.navbarPlanning{
	margin-bottom: 10px;
}

.redirectHeader {
	margin-right: calc(var(--heightHeader)/4);
	margin-top: calc(var(--heightHeader)/8);
	float: right;
	text-align: right;
}

.redirectHeader a {
	margin-top: 5px;
	display: block;
}

/* Contenu page */
#divTitrePage {
	margin-top: 10px;
	margin-bottom: 20px;
	display: flex;
  	align-items: center;
	overflow:auto;
}

#logoADP {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 10px;
	position: absolute;
  	top: calc( (var(--heightHeader) - var(--heightLogoHeader))/2 ); /* Top et Left centre pour que l'image soit au milieu du header */
  	left: calc( (var(--heightHeader) - var(--heightLogoHeader))/2 );
  	max-height: var(--heightLogoHeader);
}

.content {
	margin-left: 10%;
	margin-right: 10%;
}

	/* Page login.html */
input, select, textarea {
	padding: 5px;
	margin-top: 5px;
	border-radius: 2px;
	border-style: inset;
	border-color: rgb(118, 118, 118);
}

input[type="date"], .inputDate {
	width: 100px;
}

#loginInput input {
	display: block;
	width: var(--widthInputLogin);
}

.inputLongText {
	width: 60%;
}

.inputNumber {
	width: 50px;
}

#accordInput textarea {
	margin-left: 20px;
}

#resetMdp {
	margin-left: calc(var(--widthInputLogin)/10);
	padding-left: 2px;
	padding-right: 2px;
	text-decoration: none;
	color: black;
	font-size: 12px;
}

#resetMdp:hover {
	border-bottom: 1px black solid;
	border-radius: 5px;
}

.decalageButton{
	margin-top: 20px;
	margin-left: calc(var(--widthInputLogin)/2 - var(--widthInputLogin)/4);
	width: calc(var(--widthInputLogin)/2);
	display: inline;
}

.buttonActionTableau {
	margin-bottom: 10px;
	margin-left: calc(var(--widthInputLogin)/2 - var(--widthInputLogin)/4);
}

.erreurInput {
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 30px;
	padding: 5px;
	border-radius: 2px;
	border: 2px darkred solid;
	text-align: center;
}

.validInput {
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 30px;
	padding: 5px;
	border-radius: 2px;
	border: 2px darkgreen solid;
	text-align: center;
}

/* Page Comptes */
fieldset {
	margin-bottom: 10px;
	padding: 10px;
	border: 2px solid black;
}

#infoCompte {
	margin-bottom: 10px;
	overflow:auto;
}

#flecheRetour {
	float: left;
}

.retourPage {
	text-decoration: none;
	width: fit-content;
}

.boxAlignCenter {
	overflow: auto;
  display: flex;
  align-items: center
}

.espaceLeft {
	margin-left: 1em;
}

.retourPageText {
	margin-left: -10px;
	float: left;
	color: black;
	background: white;
	text-decoration: none;
}

.retourPageText:hover {
	border-bottom: 2px solid black;
	border-radius: 5px;
}

.left {
	float: left;
	padding-right: 30px;
}

.apresFloat {
	clear: both;
}

/* Calendar */
.editOnly .toastui-calendar-delete-button, .editOnly .toastui-calendar-vertical-line {
	display: none;
}

.editOnly .toastui-calendar-edit-button {
	width: 100%;
}

.toastui-calendar-event-time-content {
	word-break: break-word;
}

/* w3 Modal */
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4);border: 2px solid black;}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:2;width:600px;}
.w3-container,.w3-panel{padding:20px;border: 4px solid black;}

/* Responsive */
h1 {
  font-size: 22px;
}

#AjoutAccordagePersonnel input[type="text"]{
	display: block;
}

#spanSupplementaire {
	display: block;
}

@media (min-width:576px) {
  h1 {
    font-size: 22px;
  }

 #logoADP {
  	float: left;
  	position: static;
  }

  #AjoutAccordagePersonnel input[type="text"] {
	display: inline;
	}

}

@media (min-width:768px) {
  h1 {
    font-size: 24px;
  }

  #spanSupplementaire {
  	display: inline;
  }
}


@media (min-width:992px) {
  h1 {
    font-size: 34px;
  }

  
}