/******************************************** INPUTS ********************************************/

/* GROUPES */
.form-group-input{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
    height: 100%; width: 100%;
}
.form-group-pwd-forgot{ /* incluant input et lien forgot en column */
    display: flex; flex-direction: colum; justify-content: flex-start; align-items: center;
    height: 100%; width: 100%;
}
.form-group-pwd-visibility{ /* incluant input et icon visibility en row */
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
    height: 100%; width: 100%;
}


/* ELEMENTS */
.form-input-label{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
    height: 22px; margin-left: 24px; 
}
.form-input{
    display: flex; flex-direction: row; justify-content: center; align-items: center; 
    height: 46px; width: 100%; padding: 0 10px;
    border-radius: 50px; border-width: 4px; border-color: var(--grey-400); font-size: 18px;
    transition: border-color 0.5s;
}
.form-email-input{  }
.form-pwd-input{  }


/* ICONS */
.form-pwd-icon-visibility{ 
    margin: 0 20px 0 10px; font-size: 36px; 
    transition: color 0.5s, fill 0.5s;
}


/* BUTTONS */
.form-pwd-link-forgot{  

}
.form-submit{
    display: flex; flex-direction: row; justify-content: center; align-items: center;
    height: 46px; width: 100%; min-width: fit-content; padding: 0 20px; border-radius: 50px;
    cursor: pointer; transition: background-color 0.5s;
}
.form-submit-1{
    max-width: 250px; min-width: 200px;
    background-color: var(--primary-color); box-shadow: 0 0 6px 0;
    font-size: 18px; color: var(--white-color);
    
}
.form-submit.disabled{
    background-color: var(--grey-300);
    cursor: not-allowed;
}
.form-icon-text-link{
    display: flex; flex-direction: row; justify-content: center; align-items: center;
    height: fit-content; width: fit-content;
    cursor: pointer; transition: background-color 0.5s;
}
.form-icon-text-link span{
    margin: 0 10px; font-size: 28px; transition: color 0.5s, fill 0.5s;
}
.form-icon-text-link div{
    font-size: 28px; transition: color 0.5s, fill 0.5s;
}
/* ETATS & EVENTS */
.input-empty{
    border: 3px solid var(--grey-400);
}
.input-success{
    border: 3px solid var(--success-color);
}
.input-error{
    border: 3px solid var(--error-color); box-shadow: 0 0 10px var(--error-color);
}


/* MESSAGES */
.form-error-msg{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
    height: 22px; margin-left: 24px; font-size: 16px; color: var(--error-color);
}