.checklist-container {
    margin-top: .3rem;
    display: flex;
    flex-direction: column;
}

@supports not (gap: 0.2rem) {
    .checklist-container > * {
        margin-bottom: 0.2rem;
    }
    .checklist-container > *:last-child {
        margin-bottom: 0;
    }
}

@supports (gap: 0.2rem) {
    .checklist-container {
        gap: 0.2rem;
    }
}

.checklist-title {
    font-size: .85rem;
    padding-bottom: .3rem;
    margin: unset;
}

.checklist {
    list-style: none;
    margin: unset;
    display: flex;
    flex-direction: column;
}

@supports not (gap: 0.5rem) {
    .checklist > * {
        margin-bottom: 0.5rem;
    }
    .checklist > *:last-child {
        margin-bottom: 0;
    }
}

@supports (gap: 0.5rem) {
    .checklist {
        gap: 0.5rem;
    }
}

.checklist-list-item {
    color: var(--error-text-color);
    font-size: .85rem;
}

.checklist-list-item::before {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--error-text-color);
    content: '';
    margin-right: .4rem;
    font-size: 1rem;
    background: url("../img/_notOk.svg") no-repeat;
    width: 0.7rem;
    height: 0.7rem;
}

.checklist-list-item.checked {
    color: var(--pwd-strength-very-strong);
}

.checklist-list-item.checked::before {
    color: var(--pwd-strength-very-strong);
    background: url("../img/_ok.svg") no-repeat;
}


.password-input:focus ~ .password-checklist {
    opacity: 1;
    transform: translateY(0);
}


/* pwd strength check css */

.pwd-strength-check-container {
    display: flex;
    flex-direction: column;
}

@supports not (gap: 0.2rem) {
    .pwd-strength-check-container > * {
        margin-bottom: 0.2rem;
    }
    .pwd-strength-check-container > *:last-child {
        margin-bottom: 0;
    }
}

@supports (gap: 0.2rem) {
    .pwd-strength-check-container {
        gap: 0.2rem;
    }
}


.strength-meter-balken {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
    border-radius: 2px;
    background: var(--white-color);
}

.strength-meter-balken::before {
    border-radius: 2px;
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    transition: 0.5s;
}

.very-weak .strength-meter-balken::before {
    width: 20%;
    background: var(--pwd-strength-very-weak);
}

.weak .strength-meter-balken::before {
    width: 40%;
    background: var(--pwd-strength-weak);
}

.moderate .strength-meter-balken::before {
    width: 60%;
    background: var(--pwd-strength-modirate);

}

.strong .strength-meter-balken::before {
    width: 80%;
    background: var(--pwd-strength-strong);
}

.very-strong .strength-meter-balken::before {
    width: 100%;
    background: var(--pwd-strength-very-strong);
}


.hide-match-error {
    opacity: 0;
}