.password-strength-indicator {
    width: 100%;
    height: 70px;
    font-size: 12px;
}

.password-strength-indicator .bars {
    display: flex;
    height: 12px;
    margin: 6px 0;
}

.password-strength-indicator .bar {
    width: 100%;
    background-color: var(--app-super-light-grey);
}

.password-strength-indicator .bar.left {
    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;
    margin-right: 4px;
}

.password-strength-indicator .bar.left.weak {
    background-color: var(--app-red);
}

.password-strength-indicator .bar.left.medium {
    background-color: var(--app-yellow);
}

.password-strength-indicator .bar.middle.medium {
    background-color: var(--app-yellow);
}

.password-strength-indicator .bar.right {
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
    margin-left: 4px;
}

.password-strength-indicator .bar.strong {
    background-color: var(--app-green);
}

.password-strength-indicator .explanation-text .headline {
    font-family: var(--app-font-bold)
}

.password-strength-indicator .explanation-text .headline.not-allowed {
    color: var(--app-red);
}

.password-strength-indicator .explanation-text p {
    font-family: var(--app-font-regular);
    color: var(--app-mid-grey);
    margin: 0;
    line-height: 1.5;
}

.password-strength-indicator .explanation-text p b {
    font-family: var(--app-font-bold);
    font-weight: 400;
}