/**********************NAV_START*******************************/

#menuToggle
{
  display: block;
  position: relative;
  top: 40px;
  left: 30px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0;
  z-index: 2;
  
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 250px;
  margin: -170px 0 0 -55px;
  padding: 125px 15px 50px 110px;
  box-shadow: 3px 3px 3px black;
  border-radius: 10px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  text-align: center;
  font-size: 15px;
}

#menu a
{
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}

#menu a:hover
{
  color: rgb(48,96,255);
}

#menuToggle input:checked ~ ul
{
  transform: none;
}
/**********************NAV_END*******************************/

* {
	box-sizing: border-box;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,table,th,td{ margin:0; padding:0;}
body{
	height: 100vh;
    background-color: rgb(51,153,255);
}

#content{margin: 0px auto; width: 80%;}

.wrapper{margin: 0px auto; width: 800px;}
.header{border: none; margin: 0px;text-align: center;}
#header{
    font-size:80px;                                 
    font-weight: bold;
    font-family: Alpha Geometrique;
    text-shadow: -1px -1px #0c0, 1px 1px #060, -3px 0 4px #000;
}
#header2{
    margin-top: -30px;
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold;
    color:  white;
}
#action a{
    text-decoration: none;
    font-size: 1.2em;                                 
    font-weight: bold;
    color:rgb(102,204,0);
    margin-left: 10px;
    font-family: Alpha Geometrique;
    text-shadow: rgb(80,80,80) 1px 1px, rgb(80,80,80) -1px 1px, rgb(80,80,80) -1px -1px, rgb(80,80,80) 1px -1px;
    transition: color 0.3s ease;
}

.result{
    margin: 0px auto;
    background-color: white;
    border: 1px solid black;
    width: 800px;
    margin-bottom: 20px;
    box-shadow: 6px 6px 6px black;
}
.result td{
    padding: 5px 10px 5px 10px;
    text-align: center;
}

form {
    /* Pour le centrer dans la page */
    margin: 0 auto;
    text-align: center;
    width: 550px;
    /* Pour voir les limites du formulaire */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}
form div + div {
    margin-top: 1em;
}
label {
    /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
    display: inline-block;
    width: 100px;
    text-align: right;
    font-weight: bold;
}
input, textarea {
    /* Afin de s'assurer que tous les champs textuels utilisent la même police
       Par défaut, textarea utilise une police à espacement constant */
    font: 1em sans-serif;

    /* Pour donner la même dimension à tous les champs textuels */
    width: 400px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* Pour harmoniser l'apparence des bordures des champs textuels */
    border: 1px solid #999;
}
input:focus, textarea:focus {
    /* Afin de rehausser les éléments actifs */
    border-color: #000;
}
textarea {
    /* Pour aligner correctement les champs multilignes et leurs étiquettes */
    vertical-align: top;

    /* Pour donner assez d'espace pour entrer du texte */
    height: 5em;

    /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement
       Cela ne marche pas avec tous les navigateurs  */
    resize: vertical;
}

/**********************CALENDAR*******************************/
.calendar {
    width: 100%;
}

.calendar td {
    border: 1px solid #ccc;
    max-width: 15px;
    vertical-align: middle;
    text-align: center;
    font-size: .9em;
}

.nom_agent {
    width: 20%;
    font-weight: bold;
    background-color: rgb(162,162,162);
}

.weekend {
    font-weight: bold;
    background-color: rgb(162,162,162);
}

.ferie {
  font-weight: bold;
  background-color: rgb(244, 162, 95);
}

.weekday {
    background-color: rgb(194,194,194);
}

#myNav li a {
    border-color: rgb(216,216,216);
    background-color: transparent;
    color: rgb(216,216,216);
    margin: 1px 1px 0px 1px;
    border-bottom: 0;
}

#myNav li a.active {
    border-color: white;
    background-color: rgb(0,102,204);
    color: white; 
}

.choix {
    font-weight: bold;
    color: green;
    vertical-align: middle;
    text-align: center;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
}

.postform{
    padding: 0;
    margin: 0;
    width: 100%;
    border: 0;
}

.retour {
    margin-top: 15px;
    margin-left: 20px;
    margin-right: 20px;
}

#retour {
    color: white;
    font-size: 1em;
    border: 1px solid white;
    padding: 2px 10px 5px 10px;
    background-color: #7b38d8;
    border-radius: 10px;
    border: 3px double #cccccc;
    font-weight: bold;
    text-decoration: none;
}

#save {
    color: white;
    font-size: 1em;
    border: 1px solid white;
    padding: 2px 10px 5px 10px;
    background-color: green;
    border-radius: 10px;
    border: 3px double #cccccc;
    font-weight: bold;
    text-decoration: none;
}