*{
    box-sizing: border-box;
    margin:0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.2px;
}

html {
    font-size: 1em;
}

body { 
    display:flex;
    justify-content: center;
    align-items: center;
    background:url(images/aserti/login-fond.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;  
    background-position: c;
    height: 100vh;
}

.container{   
    background-color: white;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;    
    filter: drop-shadow(0 0 0.75rem black);
}

.form-container {     
    margin-top:2rem;
    padding-left: 2rem;
    padding-right:2rem;
}

form input {	
    display:block;
    width: 100%;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin:2rem 0;
    padding:14.5px;
    border:none;
    filter: drop-shadow(2px 2px 0.25rem #D3D3D3);   
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    font-family: 'Montserrat', sans-serif;
}

.logo{
    display: flex;
    justify-content: center;
}

.logo img{
    margin: 2em 2em 2em 2em;
    width: 250px;
}


/*-------------------------------------
--------------DESIGN BOUTON------------
-------------------------------------*/

.bouton {
    width:100%;
    height: 45px;
    position: relative;
    overflow: hidden;
    background:linear-gradient(to right, #2e4989 50%, #1C2E52 50%);
    background-size: 200% 100%;
    background-position:right;
    font-size: 0.8em;
    cursor: pointer;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid #1C2E52;
    color: white;
    border-radius: 2px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.bouton:hover{
    background-position:left;
}
/*-------------LOGIN ET MDP---------------*/

.group 			  { 
    position:relative; 
    margin-bottom:45px; 
    text-align: center;
}


input:focus{ 
    outline:none; 
}

/* LABEL ======================================= */
.group > label {
    text-transform: uppercase;
    font-weight: lighter;
    letter-spacing: -1px;
    color:#999; 
    font-size:1em;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
    font-size:0.8em;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    .group > label {
        top:-20px;
    }
    .group > input:focus ~ label, .group > input:valid ~ label 		{
        font-size:1em;
    }
}

/* BOTTOM BARS ================================= */
.bar 	{ 
    position:relative; 
    display:block; 
}
.bar:before, .bar:after 	{
    content:'';
    height:2px; 
    width:0;
    bottom:0px; 
    position:absolute;
    background:#06397a; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
.bar:before {
    left:50%;
}
.bar:after {
    right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#06397a; }
    to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#06397a; }
    to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#06397a; }
    to 	{ width:0; background:transparent; }
}

/*------------------CHECKBOX------------------------*/

.remember-me {
    display: flex;
    margin: 2rem;
    justify-content: center;
    letter-spacing: -1px;
    text-transform: uppercase;
}
/*Checkboxes styles*/
input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 2em;   
    letter-spacing: 0.2px;
    /*font: 14px/20px 'Open Sans', Arial, sans-serif;*/
    color: #1C2E52;;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #1C2E52;;
    position: absolute;
    left: 0;
    top: -3px;
    opacity: .6;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
    width: 10px;
    top: -5px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*---------LIEN MDP PERDU-------------*/

.password-lost { 
    padding: 1.5rem;
    background-color: #1C2E52;
    text-align: center;
    border-radius: 0px 0px 18px 18px;
    -webkit-border-radius: 0px 0px 18px 18px;
    -moz-border-radius: 0px 0px 18px 18px;
    -ms-border-radius: 0px 0px 18px 18px;
    -o-border-radius: 0px 0px 18px 18px;
}

a{
    color: white;
    letter-spacing: 0.5px;
    margin-top: 15px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.8em;
}

a:visited, a:focus, a:hover, a:active {
    color: white;
    text-decoration: none;
}

/*--- POUR INTERNET EXPLORER -----*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    a {
        display: inline-block;
    }
}

/*----------GESTION DU MOT DE PASSE PERDU------------*/
.gestion-mdp {
    margin-top: 1rem 0 0 0;
}


.gestion-mdp p {
    font-size: 0.8em;
    font-weight: 400;
}

/*.gestion-mdp form p {
    color: white;
    text-align: center;
    margin-top: 22px;
}*/

.gestion-mdp h3 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.8em;
    margin-bottom: 1rem;
    color: #999;
}

.gestion-mdp .group {
    margin-bottom: 15px;
}

.gestion-mdp .btn {
    margin-bottom: 10px;
}

.gestion-mdp .msg {
    color: black;
    text-align: center;
    margin-top: 58px;
    font-size: 1em;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    .gestion-mdp .msg {
        margin-top: 25px;
    }
}

.group-boutons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin:2rem;
    text-align: center;
}

.group-boutons .bouton {
    margin: 0;
}

 .passwordField{
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 100%;
} 

.hideTextImg{
    position: absolute;
    border: 0;
    padding: 3px;
    cursor:pointer;
    right: 5px;
    top: 50%;
    transform: translate(0, -50%)
}

#change-password-btn {
  background-color: #007bff; /* Couleur active (bleu) */
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, cursor 0.3s ease;
}

#change-password-btn:disabled {
  background-color: #ccc; /* Gris quand désactivé */
  color: #666;
  cursor: not-allowed;
}