.fa-green {
    color: var(--inputCorrect);
}

.fa-red {
    color: var(--inputIncorrect);
}

.inputCorrect {
    box-shadow: 2px 2px 3px var(--inputCorrect);
}

.inputIncorrect {
    box-shadow: 2px 2px 3px var(--inputIncorrect);
}

.inputVide {
}


input, select {
    box-shadow: 2px 2px 3px black;
    padding: 0.5em;
}

label {
    align-self: center;
}

fieldset {
    grid-column: 1 / span 2;
    padding: 0.5em;
}

form {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-gap: 0.5em;
    grid-auto-rows: minmax(1em, auto);
    width: 75%;
}
.colSpan2{
    grid-column: 1 / span 2;
}

.oeil {
    position: absolute;
    right: 0.5em;
    margin-top:0.5em;
}

.infoBulle {
    position: absolute;
    background-color: whitesmoke;
    margin-top: 3vh;
    right: 0;
    z-index: 10;
    white-space: nowrap;
} 

.col-span-form {
    grid-column: 1/3 ;
}

.gridAideMDP {
    display: grid;
    grid-template-columns: 0.1fr 2fr;
    grid-gap: 0.2em;
    grid-auto-rows: minmax(1em, auto);
    width: 75%;
}


/***** Checkbox *****/

.toggle-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
  }
  
  .toggle-label {
    width: 7rem;
    height: 2rem;
    background: #a5a5a5;
    position: relative;
    display: inline-block;
    border-radius: 3rem;
    transition: 0.4s;
    box-sizing: border-box;
  }
  .toggle-label:after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
  }
  
  .toggle-input:checked + .toggle-label {
    background-color: #4bd865;
  }
  .toggle-input:checked + .toggle-label:after {
    left: 5rem;
  }
  
  .toggle-switch {
    position: relative;
    width: 7rem;
    /* height: 3rem; */
    margin: auto;
  }