/* validation.css */


/*............................PASSWORD METER.............................*/

.password-meter-wrap {
    margin-top: 0.25rem;
    height: 1rem;
    background-color: transparent; 
}

.password-meter-bar {
    width: 0;
    height: 100%;
    transition: width 400ms ease-in;
}

.password-meter-bar.level0 {
    width: 20%;
    background-color: #FF4136;
}

.password-meter-bar.level1 {
    width: 40%;
    background-color: #FF851B;
}

.password-meter-bar.level2 {
    width: 60%;
    background-color: #FFDC00;
}

.password-meter-bar.level3 {
    width: 80%;
    background-color: #2ECC40;
}

.password-meter-bar.level4 {
    width: 100%;
    background-color: #0074D9;
}


/*............................INPUT VALIDATION.............................*/

/* INPUT FEEDBACK: INVALID */
.is-invalid {
	border-color: var(--redcolor) !important; /* Red border for invalid inputs */
}

/* INPUT FEEDBACK: VALID */
.is-valid {
	border-color: var(--greencolor) !important; /* Green border for valid inputs */
}

/* INVALID FEEDBACK MESSAGE */
/* Hide the error message by default */
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}

/* Automatically display invalid feedback when the input has is-invalid class */
.is-invalid ~ .invalid-feedback {
  display: block;
}