.boutonValid{
  border: none;
  border-radius: 6px;
  padding: 6px 15px 8px 15px;
  font-family: policePolytech;
  color: white;
  background-color: rgb(0, 106, 211);
  margin-left: 3px;
  text-decoration: none;
  transition: all 0.25s ease-out;
  border-radius: 6px;
  font-family: policePolytech;

  background-position: center;
  transition: background 0.65s;
  cursor: pointer;
  height: 100%;
}

.boutonValid:hover{
  background-color: rgb(0, 89, 179);
  cursor: pointer;
  background-image: radial-gradient(circle, transparent 1%, rgb(0, 89, 179) 1%);
  background-position: center;
  background-size: 15000%;
}

.boutonValid.darkmode:hover{
  background-color: rgb(0, 128, 255);
  background-image: radial-gradient(circle, transparent 1%, rgb(0, 128, 255) 1%);
}

.boutonValid:active, .boutonValid.darkmode:active{
  background-color: rgb(0, 106, 196);
  background-size: 100%;
  transition: background 0s;
}

.boutonValid:disabled, .boutonValid.darkmode:disabled{
  background-image: none;
  background-color: rgb(108, 117, 125);
  cursor: not-allowed;
}

.boutonValid.vert{
  background-color: rgb(40, 167, 69);
}

.boutonValid.vert:hover{
  background-color: rgb(35, 144, 60);
  background-image: radial-gradient(circle, transparent 1%, rgb(35, 144, 60) 1%);
}

.boutonValid.vert.darkmode:hover{
  background-color: rgb(50, 205, 86);
  background-image: radial-gradient(circle, transparent 1%, rgb(50, 205, 86) 1%);
}

.boutonValid.vert:active, .boutonValid.vert.darkmode:active{
  background-color: rgb(40, 167, 69);
}

.boutonValid.vert:disabled, .boutonValid.vert.darkmode:disabled{
  background-image: none;
  background-color: rgb(108, 117, 125);
  cursor: not-allowed;
}

.boutonValid.rouge{
  background-color: rgb(230, 57, 0);
}

.boutonValid.rouge:hover{
  background-color: rgb(204, 51, 0);
  background-image: radial-gradient(circle, transparent 1%, rgb(204, 51, 0) 1%);
}

.boutonValid.rouge.darkmode:hover{
  background-color: rgb(255, 83, 26);
  background-image: radial-gradient(circle, transparent 1%, rgb(255, 83, 26) 1%);
}

.boutonValid.rouge:active, .boutonValid.rouge.darkmode:active{
  background-color: rgb(230, 57, 0);
}

.boutonValid.rouge:disabled, .boutonValid.rouge.darkmode:disabled{
  background-image: none;
  background-color: rgb(108, 117, 125);
  cursor: not-allowed;
}

.boutonValid.gris{
  background-color: rgb(180, 191, 203);
}

.boutonValid.gris:hover{
  background-color: rgb(150, 165, 182);
  background-image: radial-gradient(circle, transparent 1%, rgb(150, 165, 182) 1%);
}

.boutonValid.gris.darkmode:hover{
  background-color: rgb(210, 217, 224);
  background-image: radial-gradient(circle, transparent 1%, rgb(210, 217, 224) 1%);
}

.boutonValid.gris:active, .boutonValid.gris.darkmode:active{
  background-color: rgb(180, 191, 203);
}

.boutonValid.gris:disabled, .boutonValid.gris.darkmode:disabled{
  background-image: none;
  background-color: rgb(108, 117, 125);
  cursor: not-allowed;
}

.boutonValid.jaune{
  background-color: #E1C000;
}

.boutonValid.jaune:hover{
  background-color: #CCAD00;
  background-image: radial-gradient(circle, transparent 1%, #CCAD00 1%);
}

.boutonValid.jaune.darkmode:hover{
  background-color: #ffd900;
  background-image: radial-gradient(circle, transparent 1%, #ffd900 1%);
}

.boutonValid.jaune:active, .boutonValid.jaune.darkmode:active{
  background-color: #E1C000;
}

.boutonValid.jaune:disabled, .boutonValid.jaune.darkmode:disabled{
  background-image: none;
  background-color: rgb(108, 117, 125);
  cursor: not-allowed;
}

.boutonValid.marron{
  background-color: rgb(153, 102, 51);
}

.boutonValid.marron:hover{
  background-color: rgb(134, 89, 45);
  background-image: radial-gradient(circle, transparent 1%, rgb(134, 89, 45) 1%);
}

.boutonValid.marron.darkmode:hover{
  background-color: rgb(172, 115, 57);
  background-image: radial-gradient(circle, transparent 1%, rgb(172, 115, 57) 1%);
}

.boutonValid.marron:active, .boutonValid.marron.darkmode:active{
  background-color: rgb(153, 102, 51);
}

.boutonValid.marron:disabled, .boutonValid.marron.darkmode:disabled{
  background-image: none;
  background-color: rgb(108, 117, 125);
  cursor: not-allowed;
}








/* Bouton DarkMode */
.switch {
  position: relative;
  display: inline-block;
  width: 47px;
  height: 25.5px;
  margin-left: 4px;
  margin-right: 12px;
}

.switch input {
  display:none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dddddd;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 19.5px;
  width: 19.5px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: rgb(40, 167, 69);
}

input:focus + .slider {
  box-shadow: 0 0 0.75px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(21px);
  -ms-transform: translateX(21px);
  transform: translateX(21px);
}

/*------ ADDED CSS ---------*/
.on{
  display: none;
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 25%;
  font-size: 7.5px;
  font-family: policePolytech, sans-serif;
}

.off{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 75%;
  font-size: 7.5px;
  font-family: policePolytech, sans-serif;
}

input:checked+ .slider .on{
  display: block;
}

input:checked + .slider .off{
  display: none;
}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
  border-radius: 25.5px;
}

.slider.round:before {
  border-radius: 50%;
}