html,
    body,
    header,
    .view {
      height: 100%;
    }

    

    .border-gradient {
  border: 5px solid !important;
  border-image-slice: 1 !important;
  border-width: 2px !important;
  border-radius: 10px !important;

}

.border-gradient-purple {
  border-image-source: linear-gradient(45deg,rgba(91, 148, 205, 1) 30%, rgba(244, 67, 54, 1) 60%, rgba(171, 81, 246, 1) 80%, rgba(255, 193, 7, 1) 100%)!important;
}

/* --- Styles pour l'icône afficher/masquer mdp --- */
        .input-group-password-container {
            position: relative;
        }

        /* Ajuster le padding droit des champs password pour laisser la place à l'icône */
        .input-group-password-container input[type="password"],
        .input-group-password-container input[type="text"] {
            /* Augmentez cette valeur si l'icône est large ou si vous voulez plus d'espace */
            padding-right: 40px !important;
        }

        .input-group-password-container .toggle-password-vis {
            position: absolute;
            top: 50%;
            /* Alignement vertical initial */
            right: 1.5rem;
            /* Distance du bord droit */
            transform: translateY(-50%);
            /* Centrage vertical parfait */
            cursor: pointer;
            color: #aaa;
            /* Couleur discrète pour l'icône */
            z-index: 2;
            /* Pour être sûr qu'elle est au-dessus de l'input */
            background: none !important;
            /* Annuler le fond de input-group-text si MDB l'ajoute */
            border: none !important;
            /* Annuler la bordure si MDB l'ajoute */
            padding: 0 !important;
            /* Annuler le padding si MDB l'ajoute */
            /* Ajuster la taille si nécessaire */
            font-size: 1rem;
            line-height: 1;
            /* Pour éviter des décalages verticaux */
            
        }

        /* Optionnel: changer la couleur au survol */
        .input-group-password-container .toggle-password-vis:hover {
            color: hsl(210, 53%, 58%);
        }


	/* --- Styles pour l'icône afficher/masquer mdp --- */
.input-group-password-container {
    position: relative;
}

/* Ajuster le padding droit des champs password pour laisser la place à l'icône */
.input-group-password-container input[type="password"],
.input-group-password-container input[type="text"] {
    /* Augmentez cette valeur si l'icône est large ou si vous voulez plus d'espace */
    padding-right: 40px !important;
}

.input-group-password-container .toggle-password-vis {
    position: absolute;
    top: 50%; /* Alignement vertical initial */
    right: 1.5rem; /* Distance du bord droit */
    transform: translateY(-50%); /* Centrage vertical parfait */
    cursor: pointer;
    color: #aaa; /* Couleur discrète pour l'icône */
    z-index: 2; /* Pour être sûr qu'elle est au-dessus de l'input */
    background: none !important; /* Annuler le fond de input-group-text si MDB l'ajoute */
    border: none !important; /* Annuler la bordure si MDB l'ajoute */
    padding: 0 !important; /* Annuler le padding si MDB l'ajoute */
    /* Ajuster la taille si nécessaire */
    font-size: 1rem;
    line-height: 1; /* Pour éviter des décalages verticaux */
}

/* Optionnel: changer la couleur au survol */
.input-group-password-container .toggle-password-vis:hover {
    color: #333;
}

/* --- Styles existants pour la force (légère adaptation marge feedback) --- */
#password-strength-feedback {
    /* Si besoin, ajuster la marge supérieure pour tenir compte de la position de l'icône */
    /* margin-top: 10px; */ /* Déjà défini */
    font-size: 0.9em;
    max-width: 300px; /* Ou w-100 de Bootstrap */
    display: none; /* Caché par défaut */
    position: absolute; /* Pour le sortir du flux et éviter qu'il pousse l'icône */
    top: 100%; /* Se positionne juste en dessous de l'input */
    left: 0;
    background-color: white; /* Fond pour cacher le contenu derrière si nécessaire */
    padding: 5px;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 3; /* Au-dessus de l'icône */
}

/* Le reste du CSS pour la barre, le texte, les exigences reste identique */
#password-strength-bar {
    height: 5px;
    width: 0;
    background-color: #ddd;
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
    margin-bottom: 8px;
    border-radius: 3px;
}
.strength-0 { width: 0%; background-color: #ddd; }
.strength-1 { width: 25%; background-color: #dc3545; } /* Rouge */
.strength-2 { width: 50%; background-color: #ffc107; } /* Jaune */
.strength-3 { width: 75%; background-color: #17a2b8; } /* Cyan */
.strength-4 { width: 100%; background-color: #28a745; } /* Vert */

#password-strength-text { margin-bottom: 8px; font-weight: bold; }
.text-weak { color: #dc3545; }
.text-medium { color: #ffc107; }
.text-ok { color: #17a2b8; }
.text-strong { color: #28a745; }

#password-requirements { color: #6c757d; list-style: none; padding: 0; margin: 0; } /* list-unstyled déjà dans HTML */
#password-requirements li { margin-bottom: 3px; transition: color 0.3s ease; }
#password-requirements li.valid { color: #28a745; }
#password-requirements li.valid i {
    color: #28a745;
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
#password-requirements li:not(.valid) i {
    color: #dc3545;
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}


.mdb-select input[type="text"]:not(.browser-default) {
    padding-left: 2.2rem !important;
    padding-top: .5rem;
    font-weight: 300;
}

.my-select .my-select-icon.active,
.my-select .my-select-icon.has-value {
    color: #5b94cd; /* Ou votre couleur primaire */
}