/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');


/* General */

:root {
    --m3orange: #e35425;
    --m3grey: #414042;
    --TW: 'Titillium Web', sans-serif;
}
*,
*:focus,
*:active { outline: none !important }
html { height: 100vh !important }
body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
}
.language-switcher { display: none !important }
#nav {
    text-align: center !important;
    margin-top: 1rem !important;
}


/* Links */

a { font-size: 0.85rem !important }
a:hover {
    color: var(--m3orange) !important;
    outline: none !important;
}
a:focus { box-shadow: none !important }
a, #wp-submit {
    outline: none !important;
    font-family: var(--TW) !important;
    -moz-transition: all 0.25s ease-in-out !important;
    -o-transition: all 0.25s ease-in-out !important;
    -webkit-transition: all 0.25s ease-in-out !important;
    transition: all 0.25s ease-in-out !important;
}


/* Background */

#background {
    height: 100vh !important;
    left: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    width: 100vw !important;
    z-index: -1 !important;
}
#background svg {
    height: auto !important;
    min-height: 100% !important;
    position: fixed !important;
    width: 100% !important;
}


/* Login Form */

#login {
    padding: 3rem !important;
    background-color: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.05),0 10px 20px rgba(0,0,0,.05) !important;
    width: 320px !important;
    margin: auto !important;
}
#loginform {
    padding: 0 !important;
    overflow: visible !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
#login h1 a,
.login h1 a {
    opacity: 0 !important;
    background-image: unset!important;
    height: unset!important;
    width: unset!important;
    padding: 0 2rem!important;
    margin-bottom: 3rem !important;
    text-indent: 0 !important;
}
#login h1 a.loaded,
.login h1 a.loaded { opacity: 1 !important }
#login h1 a img {
    width: 100% !important;
    height: auto !important;
}
.login #login_error,
.login .message {
    border-left: 4px solid var(--m3orange) !important;
    line-height: 1.25 !important;
    font-size: 0.75rem !important;
    color: var(--m3grey) !important;
    font-weight: 300 !important;
    font-family: var(--TW) !important;
    box-shadow: none !important;
}
#login_error a {
    text-transform: none !important;
    text-decoration: none !important;
    color: var(--m3orange) !important;
    letter-spacing: 0.5px !important;
    font-family: var(--TW) !important;
    font-size: 12px !important;
}
.login .button.wp-hide-pw { height: 100% !important }


/* 2FA */

body.otp form {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: unset !important;
    overflow: unset !important;
}
body.otp h1 a { margin-bottom: 1.5rem !important }
body.otp form p {
    text-align: center !important;
    line-height: 1.25 !important;
    padding: 0 0 1rem !important;
    font-family: var(--TW) !important;
    font-size: 1rem !important;
}
body.otp input[name="otp"] {
    text-align: center !important;
    font-size: 1.75rem !important;
    height: 60px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 5px !important;
}
body.otp #nav strong.notification {
    display: block !important;
    font-family: var(--TW) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin: 0.25rem 0 0 !important;
    font-size: .85rem !important;
}
body.otp #wrap-nav {
    color: var(--m3grey) !important;
    font-family: var(--TW) !important;
    line-height: 1 !important;
}
body.otp #wrap-nav > p {
    padding: 0 !important;
    text-align: center !important;
}
body.otp #wrap-nav #nav {
    padding: 0 !important;
    margin: 0.5rem 0 0 !important;
}
body.otp #wrap-nav #nav li { margin: 0 !important }
body.otp .wpdef-2fa-text { color: var(--m3grey) !important }
body.otp p.wpdef-2fa-label { display: none !important }


/* Interim Login Modal */

body.login.interim-login {
    background-color: #ffffff !important;
    margin-top: 30px !important;
}
body.login.interim-login form .input,
body.login.interim-login form input[type=checkbox],
body.login.interim-login input[type=text] { background: #ffffff !important }
body.login.interim-login .message { margin: 0 0 2.15rem !important }
body.login.interim-login #login h1 a,
body.login.interim-login .login h1 a { margin-bottom: 2.15rem !important }
body.login.interim-login p.submit { margin: 1.75rem 0 0 0 !important }


/* Password Form */

#lostpasswordform {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    border: none !important;
}
#resetpassform {
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    border: none !important;
}
#pass-strength-result {
    border-radius: 5px!important;
    margin-top: 0.75rem !important;
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 !important;
    font-family: var(--TW) !important;
}
p.description.indicator-hint {
    padding: 12px !important;
    background-color: #fff !important;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) !important;
    border-left: 4px solid var(--m3orange) !important;
    line-height: 1.25 !important;
    font-size: 0.75rem !important;
    color: var(--m3grey) !important;
    font-weight: 300 !important;
    font-family: var(--TW) !important;
}
.password-input-wrapper.show-password { width: 100% !important; }
span.button.button-secondary.wp-hide-pw {
    border-radius: 5px !important;
    text-align: center !important;
    background-color: var(--m3orange) !important;
    color: #fff !important;
    border: 0px solid var(--m3orange) !important;
    padding: 0 0.25rem !important;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2) !important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2) !important;
}
span.button.button-secondary.wp-hide-pw span {
    height: 50px !important;
    line-height: 50px !important;
}
input#pass1-text { width: calc(100% - 0.75rem) !important; }
.user-pass1-wrap > p { display: none !important; }


/* Form */

label {
    color: #585759 !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    font-family: var(--TW) !important;
}
input:not([type="submit"]) {
    font-family: var(--TW) !important;
    width: 100% !important;
    position: relative !important;
    display: block !important;
    padding: 0 0.75rem !important;
    margin: 0 0 1.25rem !important;
    color: #585759 !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    font-weight: 300 !important;
    outline: 0 !important;
    background-color: #f6f6f6 !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    box-shadow: transparent 0 0 0 0, transparent 0 0 0 0, transparent 0 0 0 0, rgba(60,66,87,.16) 0 0 0 1px, transparent 0 0 0 0, transparent 0 0 0 0, transparent 0 0 0 0 !important;
    border: 0!important;
    height: 50px !important;
}
input:not([type="submit"]):focus { border: 1px solid var(--m3orange) !important }


/* Toggle Password */

.wp-pwd button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    height: 100% !important;
    padding: 0 !important;
}
span.dashicons {
    color: #bababa !important;
    top: unset !important;
    font-size: 1rem !important;
    width: unset !important;
    height: unset !important;
}


/* Buttons */

#wp-submit,
#correct-admin-email,
.jetpack-sso-or + a,
.login form button[type="submit"],
form#loginform p.galogin a {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: 50px !important;
    line-height: 50px !important;
    font-family: var(--TW) !important;
    font-weight: 400 !important;
    font-size: 1.05rem !important;
    text-decoration: none !important;
    text-transform: none !important;
    background-color: var(--m3orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 5px !important;
    text-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -webkit-transition: -webkit-box-shadow .5s !important;
    transition: box-shadow .5s!important;
    transition: box-shadow .5s,-webkit-box-shadow .5s !important;
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
}
#wp-submit:hover,
#correct-admin-email:hover,
.jetpack-sso-or + a:hover,
form#loginform p.galogin a:hover,
.login form button[type="submit"]:hover,
span.button.button-secondary.wp-hide-pw {
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.05) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.05) !important;
}


/* JetPack */

label br,
#backtoblog,
p.forgetmenot,
#jetpack-sso-wrap__action,
.jetpack-sso-or { display: none !important }


/* Google Login */

form#loginform p.galogin {
    height: unset !important;
    background: unset !important;
    box-shadow: unset !important;
    border: unset !important;
    padding: 0 !important;
}
form#loginform p.galogin a {
    text-decoration: none !important;
    font-size: 12px !important;
}
h3.galogin-or {
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    font-family: var(--TW) !important;
    line-height: 1 !important;
}


/* Google Captcha */

.g-recaptcha {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.g-recaptcha > div { margin: 0 auto !important }
.grecaptcha-badge { right: -1000000px !important }
.ere-google-recaptcha > div { margin: 0 auto 1rem !important }


/* Privacy Policy */

.privacy-policy-page-link { margin: 0.25rem 0 0 0 !important }
a.privacy-policy-link {
    text-decoration: none !important;
    color: #555d66 !important;
}


/* Verify Admin Email */

form.admin-email-confirm-form {
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    background-color: unset !important;
    box-shadow: unset !important;
    font-weight: unset !important;
}
.admin-email-confirm-form h1.admin-email__heading {
    text-transform: capitalize !important;
    font-size: 1.25rem!important;
    line-height: 1.15!important;
    text-align: center!important;
    font-weight: 700!important;
    border: 0!important;
    padding: 0!important;
    color: var(--m3grey) !important;
    font-family: var(--TW) !important;
}
.admin-email-confirm-form p.admin-email__details {
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-family: var(--TW) !important;
}
.admin-email-confirm-form p.admin-email__details strong { font-weight: 400 !important }
.admin-email-confirm-form p.admin-email__details a {
    color: inherit!important;
    text-decoration: none!important;
    font-size: inherit!important;
    font-weight: 600 !important;
    margin-left: 3px;
}
.login form p.admin-email__details:nth-of-type(3) { display: none !important }
.login form p.admin-email__details:nth-of-type(2) strong { font-weight: 600 !important }
.admin-email-confirm-form .admin-email__actions-primary a {
    text-align: center!important;
    margin-bottom: 1rem!important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: 50px !important;
    line-height: 50px !important;
    font-family: var(--TW) !important;
    font-weight: 400 !important;
    font-size: 1.05rem !important;
    text-decoration: none !important;
    text-transform: none !important;
    background-color: var(--m3orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 5px !important;
    text-shadow: none !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    -webkit-transition: -webkit-box-shadow .5s !important;
    transition: box-shadow .5s!important;
    transition: box-shadow .5s,-webkit-box-shadow .5s !important;
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
}
.admin-email__actions-primary a.button.button-large:after { content: " Email" }
.admin-email-confirm-form .admin-email__actions-primary a.button.button-large:hover {
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.05) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.05) !important;
}
.admin-email__actions-secondary {
    padding: 1.5em 24px 0!important;
    text-align: center !important;
    color: var(--m3grey) !important;
    font-size: 13px !important;
    font-family: var(--TW) !important;
    line-height: 1 !important;
}
.admin-email__actions-secondary a {
    text-decoration: none!important;
    color: var(--m3grey) !important;
    font-size: 13px !important;
    font-family: var(--TW) !important;
    line-height: 1 !important;
}
.admin-email__actions-secondary a:after { content: "." }


/* Mobile */

@media screen and (max-width: 768px) {

    body {
        background-color: #ffffff !important;
        background-image: unset !important;
    }
    #background { display: none !important }
    #login {
        box-shadow: unset !important;
        padding: 0 !important;
    }
    #wp-auth-check {
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: unset !important;
    }

}