html,
body.login {
    height: 100%;
}

body.login {
    font-family: var(--ama-font-family-body);
    font-size: var(--ama-font-size-body);
    line-height: var(--ama-line-height-body);
    font-weight: var(--ama-font-weight-body);
    background-color: var(--ama-color-body-bg);
}

body.interim-login {
    background-color: var(--ama-color-transparent);
}

.l-layout {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.l-login {
    box-sizing: border-box;
    border-radius: calc(var(--ama-radius) - 2px);
    background-color: hsl(var(--ama-background));
    --ama-tw-ring-offset-color: hsl(var(--ama-background));
    --ama-tw-border-opacity: 1;
    border: 1px solid var(--ama-color-primary);
    padding: var(--ama-spacer-s40) 2rem;
    width: 46.875rem !important;
    max-width: calc(100% - var(--ama-gutter));
    margin: 0 auto var(--ama-spacer-s50);
}

.login form {
    border: none;
    background: var(--ama-color-transparent);
    padding: 0;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ama-spacer-s20);
}

body.interim-login form {
    margin-bottom: 0;
}

.login form [for="user_login"],
.login form [for="user_pass"] {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.wp-login-logo,
#backtoblog {
    display: none;
}

.l-hero {
    background-color: var(--ama-color-primary);
}

.l-footer {
    margin-top: auto;
}

.login .button.wp-hide-pw {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    font-size: 14px;
    line-height: 2;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 5px 9px;
    position: absolute;
    right: 0;
    top: 0;
}

.login .button.wp-hide-pw:hover {
    background: transparent;
}

.login .button.wp-hide-pw:focus {
    background: transparent;
    border-color: #3582c4;
    box-shadow: 0 0 0 1px #3582c4;
    /* Only visible in Windows High Contrast mode */
    outline: 2px solid transparent;
}

.login .button.wp-hide-pw:active {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.login .button.wp-hide-pw .dashicons {
    width: 1.25rem;
    height: 1.25rem;
    top: 0.25rem;
}

.login .wp-pwd {
    position: relative;
}

.no-js .hide-if-no-js {
    display: none;
}

.screen-reader-text {
    display: none;
}

.login .message,
.login .notice,
.login .success {
    border-left: 4px solid var(--ama-color-info);
    padding: 12px;
    margin-left: 0;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    word-wrap: break-word;
}

.login .message > :last-child,
.login .notice > :last-child,
.login .success > :last-child {
    margin-bottom: 0;
}

.login .success {
    border-left-color: var(--ama-color-success);
}

.login .notice-error {
    border-left-color: var(--ama-color-error);
}

.login .login-error-list {
    list-style: none;
}

.login .login-error-list li + li {
    margin-top: 4px;
}

.login p {
    margin-bottom: 0;
}

.forgetmenot input {
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.forgetmenot label {
    position: relative;
    display: block;
    padding-left: 2.8125rem;
    line-height: 1.875rem;
    cursor: pointer;
}

.forgetmenot label:before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 22l-10-10.598 2.798-2.859 7.149 7.473 13.144-14.016 2.909 2.806z' fill='%23fff'/%3E%3C/svg%3E") center / 0 no-repeat, var(--ama-color-white);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1.875rem;
    height: 1.875rem;
    border: 1px solid var(--ama-color-border);
    transition: background .2s;
}

.forgetmenot label:hover:before {
    border-color: var(--ama-color-primary);
}

.forgetmenot :checked + label:before {
    background-size: 65%;
    background-color: var(--ama-color-primary);
    border-color: var(--ama-color-primary);
}

#language-switcher {
    flex-direction: row;
    margin: var(--ama-spacer-s80) auto 0;
    max-width: 20rem;
}

#language-switcher label {
    display: none;
}

#caps-warning {
    display: none !important;
}

#nav {
    margin-top: 0.9375rem;
}