/*
Styles des formulaires --------------------------------------------------------------------
*/

label {
    display: block;
    font-weight: normal;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-left: 5px;
}

input {
    background-color: #f5f6fa;
    border-radius: 8px;
    border: none;
    min-height: 30px;
    font-size: 1rem;
    font-weight: 300;
    padding: 10px 20px;
    width: 100%;
}

input:focus-visible {
    outline: solid #877cf3 0.15rem !important;
}

input.invalid {
    outline: solid red 0.15rem;
}

.invalid-feedback {
    display: none;
    color: red;
}

input.invalid~.invalid-feedback {
    display: block;
}

/* Sous-bloc valide dans un élément invalide */
input.invalid~.invalid-feedback .valid {
    color: green;
}

/*
Groupe d'input "mot de passe"
Affichage d'une icône affichant ou cachant le mot de passe
*/

.password-group {
    position: relative;
}

/* Ajout padding sur l'input pour afficher l'icône d'oeil */
.password-group input {
    padding-right: 45px;
}

/* Placement de l'oeil pour afficher/cacher le mot de passe */
.password-group img.icon-eye {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    width: 30px;
    height: 25px;
}