:root{
    --kh-blue: #0850A8;
    --kh-black:#252525;
    --KHbackground:url('images/khpcontent-bg-small.jpg') no-repeat fixed;
}

body:has(.kh-login-page) {
    background: #e4e4e4;
    overflow-x: hidden;
    font-family: var(--font-family-poppins);
    color: var(--kh-black);
    line-height: 100%;
    overflow-x: hidden;
}

div#login-page.kh-login-page {
    background: var(--KHbackground);
    font-family: var(--font-family-poppins);
    padding: 0;
}

div#login-page.kh-login-page .login_wrapper {
    display: grid;
    grid-template-columns: 1fr;
}

.kh-login-page div#login-page-header {
    background: transparent;
    padding: 0;
    display: none;
    margin: 0;
}

div#login-page.kh-login-page .login-welcome {
    font-family: var(--font-family-poppins);
    font-size: 1.1em;
    color: white;
    text-shadow: none;
    line-height: 120%;
    font-weight: 500;
    margin: 0;
    display: none;
}

div#login-page.kh-login-page .login-welcome span {
    font-weight: 800;
    color: initial;
    font-size: 1.15em;
    color: #4993ed;
}

.kh-login-page #user_login_block,
.kh-login-page #first_time_access_code_block,
.kh-login-page #access_code_purchase_block{
    width: 100%;
}

div#login-page.kh-login-page p {
    font-family: var(--font-family-poppins);
    font-size: 1.15em;
    text-shadow: none;
    color: #2a2a2a;
    font-weight: 500;
    text-align: left;
    text-transform: none;
    line-height: 100%;
    letter-spacing: .5px;
}

.kh-login-page #login-page-content input:not([type="submit"]) {
    font-family: var(--font-family-poppins);
    background: white !important;
    background-color: white !important;
    font-size: 1em;
    font-weight: 400;
    box-shadow: 6px 5px 8px -3px rgb(79 79 79 / 21%);
    border: 1px solid #c7c7c7;
    padding: 7px;
    height: fit-content;
    opacity: 1;
    float: none;
    width: 98%;
    border-radius: 6px;
    margin-inline: 1%;
}

div#login-page.kh-login-page a {
    color: #2b75cf;
    text-shadow: none;
    font-family: var(--font-family-poppins);
    float: none;
    font-size: min(14px, .9em);
    margin: 0 4px 10px;
    transition: all 180ms linear;
    padding: 3px;
}

.kh-login-page input:not([type="submit"]):-internal-autofill-selected {
    background: white !important;
    background-color: white !important;
}

div#login-page.kh-login-page input[type=submit],div#login-page.kh-login-page a .purchase-button {
    font-family: var(--font-family-poppins);
    font-weight: 700;
    text-transform: none;
    line-height: 100%;
    font-size: max(17px, 1.5rem);
    background: linear-gradient(to bottom, var(--kh-blue), #044491);
    padding: 8px;
    width: fit-content;
    display: block;
    width: 100%;
    border-radius: 30px;
    box-shadow: 6px 5px 8px -3px #ccc;
    border: 1px solid white;
    text-shadow: 1px 1px 1px #081d47;
    color: white;
    opacity: 1;
    transition: all 180ms linear;
}

div#login-page.kh-login-page #login-page-footer p {
    text-align: right;
    font-size: 1rem;
    color: var(--kh-black);
}

div#login-page.kh-login-page .login-form-col {
    background: url('images/kh_logo.png') no-repeat top center;
    background-size: min(290px, 90%);
    padding-block-start: 130px;
}

.kh-login-page span.line-break {
    display: inline;
}

.kh-login-page #block-user-login .form-item {
    margin-block: 3px;
    display: block;
    overflow: initial;
}

div#login-page.kh-login-page div#login-page-footer {
    border: none;
    line-height: 100%;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: #fefefe;
    padding: 10px;
    padding-inline: var(--padding);
}

div#login-page.kh-login-page #login-page-footer .links {
    margin-block: 0;
    text-align: left;
    padding: 0;
}

div#login-page.kh-login-page #login-page-footer p:empty {
    display: none;
}

div#login-page.kh-login-page .footer-links a {
    margin: 5px;
    font-weight: 800;
}

.kh-login-page #first_time_access_code_block input[type=submit] {
    opacity: 1;
    font-family: var(--font-family-poppins);
    font-weight: 700;
}

.kh-login-page #block-userlogin .form-item{
    margin-block: 3px;
    display: block;
    overflow: initial;
}
div#login-page.kh-login-page input[type=submit][value="Next"] {
    width: fit-content;
    min-width: 110px;
    margin-block: -5px 10px;
    margin-inline-end: 5px;
}

div#login-page.kh-login-page a .purchase-button {
    max-width: 150px;
    background: white;
    color: var(--kh-blue);
    text-shadow: none;
    border: 1px solid #c7c7c7;
}

div#login-page.kh-login-page .description,
div#login-page.kh-login-page a span {
    text-align: left;
    display: block;
    margin-block-start: 8px;
    width: fit-content;
    padding: 3px;
    transition: all 180ms linear;
}

.kh-login-page #first_time_access_code_block {
    border-top: 1px solid #e7e7e7;
    padding-block: var(--padding) 0;
    margin-top: min(50px, 8%);
}

div#login-page.kh-login-page #login-page-content {
    background: linear-gradient(to right, #ffffff, rgb(255 255 255 / 50%));
    backdrop-filter: blur(30px);
    width: 100%;
    box-shadow: 20px 0 20px -18px rgb(204 204 204 / 35%);
    margin: 0;
}

div#login-page.kh-login-page a.CHTP:focus {
    outline: none;border: none;
}

div#login-page.kh-login-page #login-page-content input:focus,
div#login-page.kh-login-page a.CHTP:focus span,
div#login-page.kh-login-page #main_content a:focus span,
div#login-page.kh-login-page #first_time_access_code_block a:focus {
    outline: 2px solid var(--kh-blue);
}

div#login-page.kh-login-page input[type=submit]:focus,
div#login-page.kh-login-page input[type=submit]:hover,
div#login-page.kh-login-page a.CHTP:hover span {
    background: linear-gradient(to bottom, #2a2a2a, black);
    color: white;
    border-color: white;
}

div#login-page.kh-login-page a:hover, div#login-page.kh-login-page a:hover span {
    color: black;
}

.kh-login-page .messages {
    border: none;
    padding-block: 14px;
    border-radius: 10px;
    box-shadow: var(--box-light);
    border: 1px solid #ddd;
}

.kh-login-page .messages.status,
.kh-login-page .messages.error {
    padding-inline-start: 40px;
    max-width: 500px;
    margin-inline: auto;
}



@media screen and (min-width: 625px) {
    :root{
    --KHbackground:url('images/khpcontent-bg-laptop.jpg') no-repeat fixed;
    }
    div#login-page.kh-login-page {
        background-size: cover;
        background-position: center;
    }
}

@media screen and (max-width: 767px) {
    div#login-page.kh-login-page #login-page-content .login-welcome {
            margin: .5em auto;
            font-size: 40px;
            line-height: normal;
            width: auto;
            text-align: initial;
    }
    .kh-login-page #first_time_access_code_block {
        overflow:hidden;
    }
    div#login-page.kh-login-page .login-form-col{
        padding-inline: calc(var(--padding) * 3);
    }
    div#login-page.kh-login-page #user-login-form input[type=submit],
    div#login-page.kh-login-page #access-code-enroll input[type=submit] {
        width: 100%;
        margin-inline: 0;
    }
    div#login-page.kh-login-page div#login-page-footer{
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
}

@media screen and (min-width: 992px) {
    div#login-page.kh-login-page #login-page-content{
        display: grid;
        grid-template-columns: 1fr;
        padding-block: calc(var(--padding) / 2) 0;
        padding-inline: calc(var(--padding) * 2);
        height: 100vh;
        margin: 0;
        background: linear-gradient(to right, #ffffff, rgb(255 255 255 / 50%));
        backdrop-filter: blur(30px);
        width: 100%;
        grid-column: 1;
        box-shadow: 20px 0 20px -18px rgb(204 204 204 / 35%);
    }
    div#login-page.kh-login-page .login_wrapper{
        grid-template-columns: max(420px, 33%) 1fr;
        align-items: end;
        overflow-x: hidden;
    }
    div#login-page.kh-login-page #login-page-content:before {
        display:none;
    }
    div#login-page.kh-login-page .col-lg-6 {
        width: 100%;
    }
    .kh-login-page .login-form-col {
        width:100%;
    }
    .kh-login-page #login-page-footer {
        margin: 0;
        width: 100%;
        float: none;
        padding: 0 var(--padding);
        border: none;
        display: flex;
        justify-content: flex-end;
        text-align: right;
        flex-wrap: wrap;
    }
    div#login-page.kh-login-page .login-form-col {
        margin: 0;
        background-size: min(230px, 90%);
        padding-block-start: 105px;
        background-position: top 10px center;
    }
}

@media screen and (min-width: 1200px) {
    :root{
        --padding: 1.5vw;
    }
    html:has(.kh-login-page)  {
        overflow: hidden;
    }
    div#login-page.kh-login-page {
        border-radius:20px;
        margin: calc(var(--padding)/2);
        margin-block-end: calc(var(--padding)*1.5);
        width: calc(100vw - ((var(--padding) * 1) + 20px));
        box-shadow: 10px 10px 20px rgb(135 135 135 / 34%);
        overflow: hidden;
        min-height: 0;
        height: calc(100vh - (var(--padding) * 2.5));
    }

    @supports selector(:has(*)) {
        div#login-page.kh-login-page{
            width: calc(100vw - (var(--padding) * 1));
        }
    }

    div#login-page.kh-login-page div#login-page-footer{
        position: absolute;
        bottom: 8px;
        background:transparent;
        width: calc(100% - 20px);
        padding-bottom: 0;
    }

    @supports selector(:has(*)) {
        div#login-page.kh-login-page div#login-page-footer{
            bottom: 2px;
        }
    }
}


@media screen and (min-width: 1600px) {
    :root{
        --KHbackground:url('images/khpcontent-bg.jpg') no-repeat fixed;
        --padding: 2vw;
    }
    div#login-page.kh-login-page{
        background-position: center right;
    }

    div#login-page.kh-login-page div#login-page-footer {
        bottom: 26px;
        max-width: 60vw;
    }
    div#login-page.kh-login-page .login-welcome{
        position: fixed;
        display: block;
        left: calc(100vw - 190px);
        top: -20px;
        background: var(--kh-black);
        padding: 30px 20px;
        border-radius: 100%;
        width: 170px;
        height: 170px;
        text-align: center;
        padding-block: 67px 0;
        backdrop-filter: blur(10px);
        filter: drop-shadow(2px 4px 6px rgba(255, 255, 255, .6));
    }
    .kh-login-page #login-page-content input:not([type="submit"]),
    div#login-page.kh-login-page input[type=submit],
    div#login-page.kh-login-page a .purchase-button{
        padding-block: 14px;
    }
}
 .kh-login-page .login-form-col #first_time_access_code_block input[type=submit] {
         color: #ffffff;

 }