@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap');
.password-strength__meter
{
    margin-top: .5em;

    background-color: #e9ecef;
}

.password-strength__indicator
{
    transition: width .5s ease-out;

    background-color: #28a745;
}

.password-strength__indicator.is-weak
{
    background-color: #dc3545;
}

.password-strength__indicator.is-fair
{
    background-color: #ffc107;
}

.password-strength__indicator.is-good
{
    background-color: #17a2b8;
}

.password-strength__indicator.is-strong
{
    background-color: #28a745;
}

.password-confirm,
.password-field,
.password-strength,
.password-confirm-match
{
    width: 55%;
}

.password-suggestions
{
    max-width: 34.7em;
    margin: .7em 0;
    padding: .2em .5em;

    border: 1px solid #dee2e6;
}

.password-suggestions ul
{
    margin-bottom: 0;
}

.confirm-parent,
.password-parent
{
    clear: left;
    overflow: hidden;

    max-width: 33em;
    /* LTR */
    margin: 0;
}

[dir='rtl'] .confirm-parent,
[dir='rtl'] .password-parent
{
    clear: right;
}

.password-confirm .ok
{
    font-weight: bold;

    color: #28a745;
}

.password-confirm .error
{
    font-weight: bold;

    color: #dc3545;
}

.page-user-login main .region-content,
.page-user-password main .region-content
{
    max-width: calc(3.625rem + 28.5vw);
    margin: 0 auto;
    padding: 1rem 1rem;

    border-radius: .3rem;
    background: white;
}

@media (min-width: 1200px)
{
    .page-user-login main .region-content,
    .page-user-password main .region-content
    {
        max-width: 25rem;
    }
}