html {
  border: 5px solid grey;
}

body {
  border: 3px solid black;
  margin: 0;
  padding: 0;
}




@media (max-width: 800px) {
  .headerlogo {
    position: relative;
    margin: 0;
    padding: 0;
    background-color: black;
    color: azure;
    width: 100%;
    text-align: center;
    height: 50px;

  }
}


.headerlogo {
  position: relative;
  margin: 0;
  padding: 0;
  background-color: black;
  color: azure;
  width: 100%;
  text-align: center;
  display: flex;


}


.pagecontent {

  position: relative;
  min-height: 90vh;

}

.textlogo {

  position: relative;
  width: 100%;
  font-size: 50px;
  float: center;
}

.logout {
  position: relative;
  width: 50px;
  font-size: 30px;
  float: left;
  color: azure;
  padding: 10px;
}

.textferie{
  font-size: 20px;
  color: azure;
  padding: 5px;
  background-color: red;
  text-align: center;
  border-color: gold;
  border-style: double;

}



.container {

  padding: 10px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;


}

.inputtext {

  border-color: black;
  border-width: 3px;
  border-style: solid;
  width: 100%;



}


.btnnoir {
  background: black;
  color: aliceblue;
  font-size: 18px;
  padding: 10px 10px 10px 10px;
  width: 100%;
  margin: 8px 0;
  border-radius: 20px;
  border: 0;
}

.btnrouge {
  background: red;
  color: aliceblue;
  font-size: 18px;
  padding: 10px 10px 10px 10px;
  width: 100%;
  margin: 8px 0;
  border-radius: 20px;
  border: 0;
}

.btnvert {
  background: green;
  color: aliceblue;
  font-size: 18px;
  padding: 10px 10px 10px 10px;
  width: 100%;
  margin: 8px 0;
  border-radius: 20px;
  border: 0;
}

.btnheure {

  background: black;
  color: aliceblue;
  font-size: 18px;
  padding: 5px 5px 5px 5px;
  width: 100px;
  margin: 8px 0;
  border-radius: 20px;
  border: 0;

}

.btnwaiting {

  background: rgb(240, 161, 59);
  color: rgb(0, 0, 0);
  font-size: 20px;
  padding: 5px 5px 5px 5px;
  width: 120px;
  margin: 8px 0;
  border-radius: 20px;
  border: 0;

  outline-width: 3px;
  outline-offset: 0;
  outline-color: rgba(251, 255, 0, 0.75);
  outline-style: solid;
  animation: animateOutline 1s ease infinite;



}

@keyframes animateOutline {
  0% {
    outline-width: 2px;
    outline-offset: 0;
    outline-color: rgba(0, 130, 206, 0);
  }

  10% {
    outline-color: rgba(255, 0, 0, 0.75);
  }

  /* The animation finishes at 50% */
  50% {
    outline-width: 7px;
    outline-offset: 4px;
    outline-color: rgba(0, 130, 206, 0);
  }

  100% {
    outline-width: 7px;
    outline-offset: 4px;
    outline-color: rgba(102, 102, 102, 0);
  }
}


.textjour {
  font-size: 30px;
}


.tableheure {
  background: black;
  color: aliceblue;
  font-size: 20px;
  padding: 4px 4px 4px 4px;

}

.btnplanning {

  height: 40px;
  width: 160px;
}

.tableplanning {

  border: 5px solid grey;
  border-radius: 10px;
  border-style: solid;
}


#menu {

  background-color: black;
  padding: 0px;
  width: 100%;

}

#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;

}

#menu li {
  float: left;

}

#menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-size: 20px;

}

/* Change the link color to #111 (black) on hover */
#menu li a:hover {
  background-color: black;
}