.password-visibility-field,
.password-visibility-host {
    position: relative;
}

.password-visibility-field > input.form-control,
.password-visibility-host > input.form-control {
    padding-right: 3.75rem !important;
}

.password-visibility-field > input.form-control.is-valid,
.password-visibility-field > input.form-control.is-invalid,
.password-visibility-host > input.form-control.is-valid,
.password-visibility-host > input.form-control.is-invalid {
    padding-right: 5.5rem !important;
}

.password-visibility-toggle {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #718096;
    cursor: pointer;
}

.password-visibility-field > input.is-valid + .password-visibility-toggle,
.password-visibility-field > input.is-invalid + .password-visibility-toggle,
.password-visibility-host > input.is-valid ~ .password-visibility-toggle,
.password-visibility-host > input.is-invalid ~ .password-visibility-toggle {
    right: 2.55rem;
}

.password-visibility-toggle:hover {
    background: rgba(102, 126, 234, 0.08);
    color: #4c51bf;
}

.password-visibility-toggle:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.password-visibility-toggle svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
    pointer-events: none;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}