/* Password visibility toggle */

.password-visibility-toggle {
    cursor: pointer;
    position: absolute !important;
    bottom: .1rem;
    right: .1rem;
    height: 1.4rem;
    width: 1.6rem;
    font-size: 0.7rem;
}

.password-visibility-toggle.input-lg {
    height: 1.8rem;
    width: 1.8rem;
    font-size: 0.8rem;
}

.password-visibility-toggle.input-sm {
    height: 1.2rem;
    width: 1.4rem;
    font-size: 0.6rem;
}

.password-visibility-toggle:not(:hover) {
    color: #8a8a8a;
}


/* Password strength tester */

:root {
    --custom-password-strength-tester-hints-bg-color: #eeeeef;
}

[data-theme="dark"] {
    --custom-password-strength-tester-hints-bg-color: #494949;
}

.password-score-bar {
    height: 0.2rem;
    background-color: #eeeeef;
}

.password-score-bar>div {
    height: 0.2rem;
    background-color: var(--rrc-primary-color);
    width: 0;
    transition: width .4s;
}

.password-score-bar[data-score="0"]>div {
    width: calc(100% / 5);
    background-color: var(--rrc-error-color);
}

.password-score-bar[data-score="1"]>div {
    width: calc(calc(100% / 5) * 2);
    background-color: var(--rrc-error-color);
}

.password-score-bar[data-score="2"]>div {
    width: calc(calc(100% / 5) * 3);
    background-color: var(--rrc-error-color);
}

.password-score-bar[data-score="3"]>div {
    width: calc(calc(100% / 5) * 4);
    background-color: var(--rrc-warning-color);
}

.password-score-bar[data-score="4"]>div {
    width: 100%;
    background-color: var(--rrc-success-color);
}

.password-hints {
    background-color: var(--custom-password-strength-tester-hints-bg-color);
}