@charset "UTF-8";
/*
 * -----------------------------------------------------------------------------
 * Login Screen
 * -----------------------------------------------------------------------------
 *
 * Every color/size below reads from a `--login-*` custom property with a
 * fallback, so this file works standalone even if Toolkit\Core\Login never
 * enqueues the :root block. To customize a project's login screen, filter
 * `toolkit_login_colors` in PHP instead of editing this file - see
 * inc/Core/Login/Login.php for the filter and the full variable list.
 */

body,
html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body.login {
    display: flex;
    vertical-align: middle;
    width: 100%;
    min-width: 0;
    padding: 0;
    background-color: var(--login-bg, #EEEEEE);
    color: var(--login-text, #000000);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

body.login * {
    margin: 0;
    padding: 0;
}

body.login a {
    color: var(--login-link, #000000);
    text-decoration: underline;
    transition-property: border, background, color;
    transition-duration: .05s;
    transition-timing-function: ease-in-out;
    outline: 0;
}

body.login a:active,
body.login a:hover {
    color: var(--login-link-hover, #4285F4);
}

body.login a:focus {
    color: var(--login-link-hover, #4285F4);
    box-shadow: none;
}

p {
    line-height: 1.5;
}

body.login .language-switcher {
    display: none;
}

body.login #login {
    width: auto;
    max-width: var(--login-max-width, 320px);
    min-width: var(--login-max-width, 320px);
    margin: auto;
    padding: 40px 40px 24px 40px;
    background-color: var(--login-card-bg, #FFFFFF);
    border: 0;
    border-radius: var(--login-radius, 0.25rem);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .125);
}

body.login #login form {
    margin: 32px 0 0 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    font-weight: 400;
    box-shadow: none;
    overflow: hidden;
}

/*
 * Logo. Relative url() resolves against this stylesheet's own folder, so
 * keep logo-login.png next to this file (assets/login/logo-login.png).
 * Swap the file per-project - no code change needed.
 */
body.login #login h1 a {
    background-image: url(logo-login.png);
    margin-bottom: 16px;
    padding-bottom: 0;
    background-size: contain;
    height: var(--login-logo-height, 64px);
    background-position: center;
}

body.login .message,
body.login .success,
body.login #login_error {
    border-left: 4px solid var(--login-message-border, #4285F4);
    padding: 12px 12px 12px 20px;
    margin-left: 0;
    margin-bottom: 0;
    background-color: var(--login-card-bg, #FFFFFF);
    box-shadow: none;
}

body.login .success {
    border-left-color: var(--login-success, #34A853);
}

body.login #login_error {
    border-left-color: var(--login-error, #EA4335);
    color: var(--login-error, #EA4335);
}

body #loginform p.submit,
body.login-action-lostpassword p.submit {
    border: none;
    margin: -10px 0 20px;
}

body.login .input::-ms-clear {
    display: none;
}

body.login .pw-weak {
    margin-bottom: 16px;
}

body.login .button.wp-hide-pw {
    background: 0 0;
    border: 1px solid transparent;
    box-shadow: none;
    font-size: 14px;
    line-height: 2;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 46px;
    min-height: 46px;
    margin: 0;
    padding: 5px 9px;
    position: absolute;
    right: 0;
    top: 0;
}

body.login .button.wp-hide-pw:hover {
    background: 0 0;
}

body.login .button.wp-hide-pw:focus {
    background: 0 0;
    border-color: 0;
    box-shadow: none;
    outline: none;
}

body.login .button.wp-hide-pw:active {
    background: 0 0;
    box-shadow: none;
    transform: none;
}

body.login .button.wp-hide-pw .dashicons {
    width: 1.25rem;
    height: 1.25rem;
    top: .25rem;
}

body.login .wp-pwd {
    position: relative;
}

body.no-js .hide-if-no-js {
    display: none;
}

body.login-action-confirm_admin_email #login {
    width: 60vw;
    margin-top: -2vh;
}

@media screen and (max-width:782px) {
    body.login-action-confirm_admin_email #login {
        width: 100vw;
    }
}

body.login #login form p.forgetmenot {
    font-weight: 400;
    float: none;
    margin-bottom: 16px;
}

body.login .button-primary {
    float: right;
}

body.login .admin-email-confirm-form .submit {
    text-align: center;
}

.admin-email__later {
    text-align: left;
}

body.login form p.admin-email__details {
    margin: 1.1em 0;
}

body.login h1.admin-email__heading {
    border-bottom: 1px #e8e9ea solid;
    color: #5f5f5f;
    font-weight: 400;
    padding-bottom: .5em;
    text-align: left;
}

.admin-email__actions div {
    padding-top: 1.5em;
}

body.login .admin-email__actions .button-primary {
    float: none;
    margin-left: .25em;
    margin-right: .25em;
}

body #login form p {
    margin-bottom: 0;
}

body #login form p.submit {
    margin: 0;
    padding: 0;
}

body.login label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    display: inline-block;
    margin-bottom: 6px;
    color: var(--login-text, #000000);
}

body.login .forgetmenot label,
body.login .pw-weak label {
    line-height: 1.5;
    vertical-align: baseline;
}

body.login h1 {
    text-align: center;
}

body.login #backtoblog,
body.login #nav {
    padding: 0 24px;
    font-size: 13px;
    text-align: center;
}

body.login #nav {
    margin: 24px 0 0 0;
}

body #backtoblog {
    margin: 16px 0;
}

body.login #backtoblog a,
body.login #nav a {
    text-decoration: none;
    color: var(--login-link, #000000);
}

body.login #backtoblog a:hover,
body.login #nav a:hover,
body.login h1 a:hover {
    color: var(--login-link-hover, #4285F4);
}

body.login #backtoblog a:focus,
body.login #nav a:focus,
body.login h1 a:focus {
    color: var(--login-link-hover, #4285F4);
}

body.login form .input,
body.login input[type=password],
body.login input[type=text] {
    font-size: 16px;
    line-height: 28px;
    width: 100%;
    border: 1px solid var(--login-input-border, #CCCCCC);
    border-radius: var(--login-radius, 0.25rem);
    padding: 8px 12px;
    color: var(--login-text, #000000);
    margin: 0 0 16px 0;
    min-height: 40px;
    max-height: none;
}

body.js.login input.password-input,
body.js.login-action-rp form .input,
body.js.login-action-rp input[type=text] {
    padding-right: 2.5rem;
}

body.login form .input,
body.login form input[type=checkbox],
body.login input[type=text] {
    border: 1px solid var(--login-input-border, #CCCCCC);
    background-color: var(--login-input-bg, #EEEEEE);
    box-shadow: none;
}

body.login form input[type=checkbox]:checked::before {
    content: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%20000004%27%2F%3E%3C%2Fsvg%3E);
}

body.login form .input:focus,
body.login input[type=password]:focus,
body.login input[type=text]:focus {
    background-color: var(--login-card-bg, #FFFFFF);
    border-color: var(--login-input-focus-border, #4285F4);
}

body.login form .input:focus,
body.login input[type=password]:focus,
body.login input[type=text]:focus,
body.login input[type=checkbox]:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

body.login form .button-secondary {
    color: var(--login-text, #000000);
    border: none !important;
    background-color: transparent;
    vertical-align: top;
}

body.login form .button-secondary:hover {
    color: var(--login-text, #000000);
}

body.login form .button.button-large.button-primary {
    display: block;
    float: none;
    width: 100%;
    height: 52px;
    line-height: 52px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--login-radius, 0.25rem);
    background-color: var(--login-button-bg, #000000);
    font-size: 18px;
    font-weight: 700;
    color: var(--login-button-text, #FFFFFF);
    transition: background 0.3s;
}

body.login form .button.button-large.button-primary:hover {
    background-color: var(--login-button-hover-bg, #4285F4);
}

body.login form .button.button-large.button-primary:focus,
body.login form .button.button-large.button-primary:active {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0;
}

body.js.login-action-rp input[type=password],
body.js.login-action-rp input[type=text] {
    margin-bottom: 0;
}

body.login #pass-strength-result {
    font-weight: 600;
    margin: -1px 5px 16px 0;
    padding: 6px 5px;
    text-align: center;
    width: 100%;
}

body.login .privacy-policy-page-link {
    text-align: center;
    width: 100%;
    margin: 2rem 0 0 0;
}

#wp-auth-check-wrap #wp-auth-check {
    background-color: var(--login-card-bg, #FFFFFF);
}

body.interim-login {
    height: auto;
    background-color: transparent;
}

body.interim-login #login {
    padding: 0;
    margin: 16px auto;
    background-color: transparent;
    box-shadow: none;
}

body.interim-login.login h1 a {
    width: auto;
}

body.interim-login #login_error,
body.interim-login.login .message {
    margin: 0 0 16px;
}

body.interim-login.login form {
    margin: 0;
}

body.interim-login form .input,
body.interim-login form input[type=checkbox],
body.interim-login input[type=text] {
    background-color: var(--login-card-bg, #FFFFFF);
}

.screen-reader-text,
.screen-reader-text span {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

input::-ms-reveal {
    display: none;
}

@-ms-viewport {
    width: device-width;
}

@media screen and (max-height:550px) {
    body #login {
        padding: 20px 0;
    }
}

@media screen and (max-width:782px) {
    body.interim-login input[type=checkbox] {
        width: 1rem;
        height: 1rem;
    }

    body.interim-login input[type=checkbox]:checked:before {
        width: 1.3125rem;
        height: 1.3125rem;
        margin: -.1875rem 0 0 -.25rem;
    }
}