@font-face {
    font-family: studiofeixen;
    src: url(../fonts/mMQ2RxkBMFHV.eot) format("embedded-opentype"), url(../fonts/OGX0UbW9ARoI.woff2) format("woff2"), url(..//fonts/2zWAOPxZtZ5m.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: studiofeixen;
    src: url(../fonts/cFvVGTL8Flmc.eot) format("embedded-opentype"), url(../fonts/0xarXVQNpiC4.woff2) format("woff2"), url(../fonts/oaGyFcsD3gBp.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: studiofeixen;
    src: url(../fonts/5qqIvUCCmRCh.eot) format("embedded-opentype"), url(../fonts/v6t2yNFBOHJg.woff2) format("woff2"), url(../fonts/NQEaSMFmpA8r.ttf) format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: studiofeixen;
    src: url(../fonts/JhfFQZtPUTLi.eot) format("embedded-opentype"), url(../fonts/AOaBPDT2Au8I.woff2) format("woff2"), url(../fonts/fxuc5qcjiUsW.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

body.login {
    font-size: 1.25rem;
    font-family: 'studiofeixen', sans-serif;
    background: #fff;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.content-container {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 600px) 1fr;
    width: 100%;
    padding: 0;
    margin: 0;
}

#login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

body.login h1 {
    margin-bottom: 2rem;
    font-size: 2rem;
    text-align: center;
}

body.login form {
    border: none;
    box-shadow: none;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
    padding: 26px 0 34px;
}

body.login form .input:focus {
    border-color: #000;
    box-shadow: none;
}

body.login form .input,
body.login input[type=password],
body.login input[type=text] {
    border: 1px solid #000;
    border-radius: 0.4rem;
    margin: 0 0 16px;
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
}

.dashicons-visibility:before,
.dashicons-hidden:before {
    color: #000;
}

body.login input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Style the custom checkbox */
body.login input[type=checkbox] + label {
    display: inline-flex;
    align-items: center;
    padding-left: 30px;
    line-height: 20px;
    margin: 0 0 1.5rem;
    position: relative;
    font-family: 'studiofeixen', sans-serif;
}

/* Custom checkbox styling */
body.login input[type=checkbox] + label:before,
body.login input[type=checkbox] + label:after {
    content: '';
    position: absolute;
    pointer-events: none;
}

body.login input[type=checkbox] + label:before {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    border-radius: .4rem;
    top: 0;
    left: 0;
}

body.login input[type=checkbox] + label:after {
    width: 12px;
    height: 4px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
    top: 50%;
    left: 4px;
    margin-top: -2px;
    opacity: 0;
    transition: opacity .2s;
}

/* Show the checkmark when checked */
body.login input[type=checkbox]:checked + label:before {
    background: #000;
}

body.login input[type=checkbox]:checked + label:after {
    opacity: 1;
}

/* Ensuring the label text is properly aligned */
body.login label[for="rememberme"] {
    padding-left: 30px;
    line-height: 20px;
    font-family: 'studiofeixen', sans-serif;
}

body.login.wp-core-ui .button.wp-hide-pw {
    padding: 0;
    border: none;
    background: none;
    margin: 0;
}

body.login.wp-core-ui .button {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    margin: 0 0 1em;
    color: #000;
    background: #fff;
    border: 1px solid #000;
}

body.login.wp-core-ui .button-primary {
    background: #000;
    border-color: #000;
    width: 100%;
    float: none;
    color: #fff;
}

body.login #login_error,
body.login .message,
body.login .success {
    padding: 0;
}

body.login .message a,
body.login .success a {
    color: inherit;
    display: inline-block;
}

body.login a:focus {
    box-shadow: none;
    outline: none !important;
    text-decoration: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

body.login h1.admin-email__heading {
    font-size: inherit;
    color: #000;
    border: none;
}

body.login a {
    color: #000;
}

/* Ensure that the container doesn't exceed the viewport width on small screens */
@media (max-width: 1200px) {
    .content-container {
        grid-template-columns: 1fr minmax(auto, 90%) 1fr;
    }
}

@media (max-width: 768px) {
    .content-container {
        grid-template-columns: 1fr minmax(auto, 90%) 1fr;
        padding: 0;
    }
}

@media (max-width: 600px) {
    .content-container {
        grid-template-columns: 1fr minmax(auto, 90%) 1fr;
    }

    #login {
        margin: 0 1rem;
    }
}

@media (max-width: 400px) {
    .content-container {
        grid-template-columns: 1fr minmax(auto, 100%) 1fr;
        padding: 0 0.5rem;
    }

    #login {
        margin: 0 0.5rem;
    }
}

#login h1 {
    margin-bottom: 2rem;
    font-size: 3rem;
    text-align: center;
}

#loginform {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    padding-top: 1rem;
}

#loginform .form-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 768px) {
    #loginform .form-content {
        grid-template-columns: 1.5fr 2fr;
    }
}

#loginform .form-row {
    display: contents;
}

#loginform label {
    align-self: center;
}

#loginform .input,
#loginform .password-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 0.4rem;
}

#loginform .wp-pwd {
    position: relative;
}

#loginform .wp-pwd .button {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.5rem;
}

#loginform .remember-me-row {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    width: 100%;
    justify-content: center;
    grid-column: span 2;
}

#loginform .form-actions {
    margin-top: 1rem;
}

#loginform .form-actions .submit {
    width: 100%;
}

#loginform .form-actions .button {
    width: 100%;
    border-radius: 0.6rem;
    border: 1px solid #000;
    background-color: #000;
    color: #fff;
    transition: all 0.3s ease;
}

#loginform .form-actions .button:hover {
    background-color: transparent;
    color: #000;
    border: 1px solid #000;
}

.footer-links a {
    text-decoration: none;
    color: #000;
    transition: text-decoration 0.2s ease-in-out, text-underline-offset 0.2s ease-in-out;
}

.footer-links a:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.footer-links .separator {
    display: inline-block;
    width: 1px;
    height: 1rem;
    background-color: #000;
    margin: 0 1rem;
}

.hr-container {
    grid-column: 1/-1;
}

.custom-hr {
    border: none;
    border-top: 1px solid #000;
    width: 100%;
}

.center-label {
    padding-bottom: 1rem;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1rem;
}

.forgot-password {
    display: flex;
    align-items: center;
    position: relative;
}

.forgot-password-text {
    margin-right: 0.4em;
}

.tooltip-container {
    display: flex;
    align-items: center;
    position: relative;
}

.tooltip {
    position: absolute;
    background: #000;
    padding: 1rem;
    margin-left: -1rem;
    border-radius: .625rem;
    color: #fff;
    bottom: calc(100% + 1rem);
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s, visibility 0s .3s;
    width: auto;
}

.tooltip:after {
    content: "";
    top: 100%;
    left: 1rem;
    border-top: .75rem solid #000;
    border-left: .75rem solid transparent;
    border-right: .75rem solid transparent;
    position: absolute;
}

.tooltip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #000;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 0.9em;
    line-height: 1.2em;
}

.tooltip-btn:before {
    content: "?";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.tooltip-open .tooltip-btn {
    background-color: #000;
    color: #fff;
}

.tooltip-open .tooltip {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s, visibility 0s;
}

.wp-pwd {
    position: relative;
    display: flex;
    align-items: center;
}

.wp-hide-pw {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: black;
    margin-left: -30px;
    padding: 0;
    z-index: 1;
}

.wp-hide-pw span {
    display: inline-block;
    padding-bottom: 1rem;
}