@keyframes bgSlide {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 100% 50%;
	}
}

body.login .wpml-login-ls {
    display: none;
}

body.login {
    background-color: #000;
}

body.login #pk-login-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

body.login iframe {
    flex-basis: 60%;
    height: 100%;
    border: none !important;
}

body.login #PK-logo {
    position: absolute;
    left: calc(5vw * 0.7);
    top: 50px;
}

body.login #pk-login-form {
    background-image: url("../img/pk-branding-width.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 50%;
	animation-name: bgSlide; 
	animation-timing-function: linear;
	animation-duration: 70s;
	animation-iteration-count: infinite;
}

body.login #pk-login-branding {
    height: 100%;
}

body.login #pk-login-form {
    height: 100%;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

body.login header,
body.login .language-switcher,
body.login .privacy-policy-page-link,
form label:nth-child(1) {
    display: none;
}

/* body.login #nav, */


/* body.login #backtoblog, */


body.login,
body.login .fl-page-content {
    height: 100vh;
    position: relative;
}

body.login > *,
#user_pass {
    font-family: "PKFont", sans-serif;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    font-style: normal;
}

body.login h1 {
    color: #000000 !important;
    font-size: 36px;
    font-family: "PKFont", sans-serif;
    text-align: left;
    line-height: 1em;
    margin-bottom: 20px;
}

body.login #pk-login-form #login > h1:has(a) {
    display: none;
}

body.login form {
    background: #fde2dd;
    border-radius: 10px;
    color: #000;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 40px 50px;
}

body.login #pk-login-form #login {
    width: 400px;
    margin-inline: auto;
}

body.login #pk-login-form #login form#loginform .button:not(.wp-hide-pw),
body.login #pk-login-form #login #wp-submit {
    background-color: #38f7b2;
    font-size: 20px;
    line-height: 1.4em;
    font-weight: 700;
    background-color: #000;
    font-family: "PKFont", sans-serif;
    line-height: 1;
    text-transform: none;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    border-radius: 5px;
    width: 100%;
    height: 52px;
    margin-block: 14px;
    transition: all 0.2s ease-in-out;     
    -moz-transition: all 0.2s ease-in-out;     
    -webkit-transition: all 0.2s ease-in-out;
}

body.login #pk-login-form #login #lostpasswordform #wp-submit {
    font-size: 18px;
}

body.login #pk-login-form #login form#loginform .button:not(.wp-hide-pw):hover,
body.login #pk-login-form #login #wp-submit:hover {
    color: #000;
    border-color: #39f7b2;
    background-color: #39f7b2;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
}

body.login #pk-login-form #login .wp-login-lost-password,
.forgetmenot label, body.login #login:has(form[name="sgs2fa_form"]) > a, body.login #login form.admin-email-confirm-form .admin-email__actions-secondary a, body.login #login form.admin-email-confirm-form .admin-email__details a {
    transition: all 0.2s ease-in-out;     
    -moz-transition: all 0.2s ease-in-out;     
    -webkit-transition: all 0.2s ease-in-out;
    font-size: inherit;
    font-weight: 600;
    text-decoration-line: underline;
    text-underline-offset: 3px;
    color: #000;
}

body.login #login:has(form[name="sgs2fa_form"]) > a {
    text-decoration: none !important;
    color: white !important;
}

p.forgetmenot {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-block: 3px;
}

.forgetmenot label {
    font-weight: 400;
    text-decoration: none;
}

body.login #pk-login-form #login .wp-login-lost-password:hover, body.login #login form.admin-email-confirm-form .admin-email__actions-secondary a:hover, body.login #login form.admin-email-confirm-form .admin-email__details a:hover {
    color: #5e66ea !important;
    text-underline-offset: 5px !important;
}

input[type="checkbox"],
input[type="radio"] {
    border-radius: 0px;
    margin-right: 5px;
    height: 20px;
    width: 20px;
}

input:focus-visible {
    outline: none;
    border-bottom: #5e66ea 2px solid !important;
}

input[type="checkbox"]:checked::before {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.71258 1.21248C8.88866 1.04484 9.12298 0.952167 9.3661 0.954006C9.60921 0.955846 9.84211 1.05206 10.0156 1.22234C10.1892 1.39263 10.2898 1.62366 10.2962 1.8667C10.3026 2.10974 10.2144 2.34577 10.0501 2.52498L5.06258 8.76248C4.97681 8.85486 4.87331 8.92899 4.75824 8.98044C4.64317 9.0319 4.51891 9.05962 4.39289 9.06195C4.26686 9.06429 4.14166 9.04118 4.02477 8.99402C3.90788 8.94686 3.8017 8.87662 3.71257 8.78748L0.405075 5.47998C0.312966 5.39416 0.239089 5.29066 0.187849 5.17566C0.136609 5.06066 0.109056 4.93652 0.106835 4.81064C0.104614 4.68476 0.12777 4.55972 0.174922 4.44299C0.222073 4.32625 0.292254 4.22021 0.381277 4.13119C0.470301 4.04216 0.576343 3.97198 0.693078 3.92483C0.809813 3.87768 0.93485 3.85452 1.06073 3.85674C1.18661 3.85896 1.31075 3.88652 1.42575 3.93776C1.54075 3.989 1.64425 4.06287 1.73007 4.15498L4.34758 6.77123L8.68883 1.23998L8.71258 1.21248Z' fill='%235E66EA'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
    background-color: black;
    height: 20px;
    aspect-ratio: 1 / 1;
    margin: -2px 0px 0px -1px;
}

body.login #pk-login-form #login form#loginform .input:-webkit-autofill,
body.login #pk-login-form #login form#loginform .input:-webkit-autofill:hover,
body.login #pk-login-form #login form#loginform .input:-webkit-autofill:focus,
body.login #pk-login-form #login form#loginform .input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

body.login #pk-login-form #login .input {
    background: transparent;
    border-style: solid;
    border-width: 0;
    background-clip: border-box;
    border-color: #000;
    border-bottom-width: 1px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 10px 5px 8px 5px;
    font-size: 18px;
    color: #000;
}

body.login #pk-login-form #login form#loginform > p:first-of-type input {
    margin-bottom: 30px;
}

body.login #pk-login-form #login form#loginform input:focus {
    box-shadow: none;
}

body.login #pk-login-form #login form#loginform .input::placeholder {
    color: #000;
}

body.login #pk-login-branding .pk-login-logo {
    position: absolute;
    top: 80px;
    left: 60px;
    width: 150px;
    height: auto;
}

.button.wp-hide-pw {
    color: #5e66ea;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.button.wp-hide-pw:focus {
    box-shadow: none !important;
    outline: none !important;
}

.login .message,
.login .notice,
.login .success {
    border-left: 4px solid #38f7b2;
}

body.login #backtoblog, body.login #nav {
    padding-left: 0;
}

body.login #backtoblog a, body.login #nav a {
    transition: all 0.3s ease-in-out;     
    -moz-transition: all 0.3s ease-in-out;     
    -webkit-transition: all 0.3s ease-in-out;
}

body.login #nav a {
    font-weight: bold;
    text-decoration: underline !important;
    text-decoration-color: white !important;
    text-underline-offset: 3px;
}

body.login #nav a:hover {
    text-underline-offset: 5px;
}

body.login #backtoblog a, body.login #backtoblog a:hover, body.login #nav a, body.login #nav a:hover {
    color: white !important;
    font-weight: 700;
}


/* EMAIL BEVESTIGING */
body.login-action-confirm_admin_email #login {
    margin-top: auto !important;
}

body.login #login form.admin-email-confirm-form h1 {
    margin-bottom: 0px !important;
    border: none;
}

body.login #login form.admin-email-confirm-form .admin-email__actions-primary a, body.login #login form.admin-email-confirm-form .admin-email__actions-primary input {
    background-color: #38f7b2;
    font-weight: 700;
    background-color: #000;
    font-family: "PKFont", sans-serif;
    line-height: 3em;
    vertical-align: middle;
    text-transform: none;
    border: none;
    height: 40px;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

body.login #login form.admin-email-confirm-form .admin-email__actions-primary a {
	color: white;
}

body.login #login form.admin-email-confirm-form .admin-email__actions-primary a:hover {
	color: white;
	background-color: #525252;
}

body.login #login form.admin-email-confirm-form .admin-email__actions-primary input {
	background: #5e66ea;
}

body.login #login form.admin-email-confirm-form .admin-email__actions-primary input:hover {
	background: #38f7b2;
	color: #000;
}


/* 2FA */

.twofactor-checkbox {
    display: flex;
    justify-content: start;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.twofactor-checkbox label {
    font-size: 13px;
}

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

    body.login form {
        padding: 40px 20px;
    }

    .twofactor-checkbox label {
        font-size: 12px;
    }
}


@media screen and (min-width: 768px) and (max-width: 1300px) {
    body.login #pk-login-form #login {
        width: 80%;
    }

    body.login #pk-login-form {
        animation-duration: 80s;
    }
}

@media screen and (min-width: 768px) {
    body.login #pk-login-form {
        flex-basis: 40%;
        min-width: 400px;
    }
}

@media screen and (max-width: 768px) {
    body.login #pk-login-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    body.login #pk-login-frame {
        display: none;
    }

    body.login #pk-login-form {
        background-image: none;
    }

    body.login #pk-login-form #login {
        margin: 80px 20px;
        width: calc(100% - 40px);
    }

    body.login form {
        padding: 30px 20px;
    }

    body.login #PK-logo {
        position: absolute;
        left: 20px;
        top: 30px;
    }

    body.login iframe {
        flex-basis: 100%;
        width: 100%;
        max-height: 300px;
    }

    body.login #pk-login-form {
        flex-basis: 100%;
        width: 100%;
    }
    body.login #pk-login-form #login form .input {
        font-size: 16px;
    }
}

@media screen and (max-width: 500px) {
    body.login #PK-logo {
        position: absolute;
        left: 20px;
        top: 45px;
    }

    body.login #pk-login-form #login {
        width: calc(100% - 40px);
    }
}