.password-wrapper {
    position: relative;
}

.password-wrapper input.form-control {
    padding-right: 40px;  /* Space for the eye icon */
}

.eye-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%); /* Vertically center the icon */
    cursor: pointer;
}

.eye-icon i {
    font-size: 18px;
    color: black;  /* Set the default color to black */
    transition: color 0.3s ease; /* Smooth color transition */
}

.eye-icon:hover i {
    color: black; /* Keep the color black on hover */
}

/* Optional: Styling the password input field on focus */
input[type="password"]:focus {
    border-color: #007bff; /* Highlight the border on focus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Subtle shadow effect */
}

input[type="text"]:focus {
    border-color: #007bff; /* Same focus effect for text fields */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}