body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    font-size:18px;
    overflow-x:hidden;
}

.account-login-content {
    background: #fff;
    background-size: cover;
    height: 100vh;
    justify-content: center;
    width: 100vw;
    min-width: 320px;
    align-items: center;
}

.account-login-content h2 span{
    display:block;
    width:100%;
}

    .account-login-content h2 span.sub {
        font-size:1.1rem!important;
    }

.account-login-content div{
    box-sizing:border-box;
}

    .account-login-content .login-content {
        margin: auto 0;
    }

.account-login-content:before {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    display: block;
    opacity: .3;
}

    .account-login-content.morning {
        background: url(/content/admin/img/bg.jpg) no-repeat center center;
        background-size: cover;
    }

        .account-login-content.morning:before {
            background: #FFC000;
        }

    .account-login-content.day {
        background: url(/content/admin/img/bg-day.jpg) no-repeat center center;
        background-size: cover;
    }

        .account-login-content.day:before {
            background: #77C0FF;
        }

    .account-login-content.night {
        background: url(/content/admin/img/bg-night2.jpg) no-repeat center center;
        background-size: cover;
    }

        .account-login-content.night:before {
            background: #77C043;
        }

    .account-login-content .inner {
        max-width: 515px;
        justify-self: center;
        margin-left: auto;
        margin-right: auto;
    }

    .account-login-content .account-login {
        padding: 4em;
        min-width: 320px;
        width: 98%;
        min-width: 300px;
        max-width: 40vw;
        justify-content: center;
        position: relative;
        z-index: 10;
        display:flex;
        justify-self: flex-end;
        align-self: flex-start;
        margin-left: auto;
        height: 100vh;
        align-items: center;
        min-width: 300px;
        background: #fff;
        flex-direction:column;
    }

        .account-login-content .account-login img {
            margin-bottom: 2em;
            margin-right: auto;
            max-height: 10px;
        }

        .account-login-content .account-login div, .account-login-content .account-login .k-textbox {
            width: 100%;
        }

        .account-login-content .account-login span, .account-login-content .account-login .k-textbox {
            font-size: 1rem;
        }

       .account-login-content .account-login .k-button {
            font-size: 1.3rem;
        }

      
        .account-login-content .account-login .k-textbox {
            margin-bottom: .6em;
            margin-top: .2em;
            min-height: 45px;
            background: #EBEBEB;
        }


        .account-login-content .account-login .k-button {
            width: 100%;
            margin-top: .3em;
            padding: 1em 0;
            background: rgba(0,0,0,0.8);
            color: #fff;
        }

            .account-login-content .account-login .k-button:hover {
                background: rgba(0,0,0,1.0);
            }

        .account-login-content .account-login h1 {
            text-align: center;
            margin-bottom: 2em;
            width: 100%;
            font-weight: 600;
            font-size:2rem;
        }

    .account-login-content h2, .account-login-content h2 span {
        font-size: 2.5rem !important;
    }

    .account-login-content span#Note.ie {
        color: #ff3500 !important;
        display: block;
        font-size: 1rem !important;
        font-weight: bold;
        margin-bottom: 1em !important;
    }

    .account-login-content span#Note a {
        text-decoration: underline;
    }

    .account-login-content h2 {
        margin-bottom: 1em;
        font-weight: normal;
    }

    .account-login-content .copy-info {
        align-self: flex-end;
        font-family: 'Open Sans', sans-serif;
        margin-top:auto;
    }

        .account-login-content .copy-info p, .account-login-content .copy-info p a {
            margin-bottom: .5em;
            font-family: 'Open Sans', sans-serif;
            font-size: .8rem;
        }

            .account-login-content .copy-info p a {
                color: #77C0FF;
            }

                .account-login-content .copy-info p a:hover {
                    opacity: .8;
                }

            .account-login-content .copy-info p:last-of-type {
                margin-bottom: 0;
            }

/*Bank-ID ------------------*/

.bank-id {
    -webkit-box-shadow: 0 0 6px 3px rgba(0,0,0,.2);
    box-shadow: 0 0 6px 3px rgba(0,0,0,.2);
    max-width: 400px;
    width: 100%;
    margin: 2em 0;
    box-sizing: border-box;
    padding: 1em 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.bank-id-logo {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 2em
}

.bank-id img {
    max-width: 100px;
    max-height:100% !important;
    margin:0 auto;
}

.bank-id .bank-id-options {
    border-top: 1px solid #ccc;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.bank-id .bank-id-option {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    padding: 1em 2em;
    border-bottom: 1px solid #ccc;
    align-items: center;
    align-content: center;
    color: #333;
    transition: .5s;
    text-decoration: none;
}


    .bank-id .bank-id-option .icon {
        margin-left: auto;
        justify-self: flex-end;
        font-size: 1.2rem;
        transition: .5s
    }

    .bank-id .bank-id-option .fal-icon.right-icon {
        margin-left: auto;
        margin-right: .25rem;
    }

        .bank-id .bank-id-option .fal-icon.right-icon:before {
            content: "\f105";
        }

        .bank-id .bank-id-option .fal-icon:before {
            display: flex;
            font-family: 'Font Awesome 6 Pro';
            font-weight: 500;
        }



.bank-id .bank-id-option:hover {
    background: #fafafa;
}

        .bank-id .bank-id-option:hover .icon {
            transform: rotate(360deg);
        }

.bank-id .bank-id-ssn {
    width: 100%;
    padding: 0 2em;
    margin-bottom: .5em;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}

    .bank-id .bank-id-ssn input {
        width: 100%;
        padding: .5em;
        font-size: 1.5rem;
    }

.bank-id .bank-id-btn {
    padding: 0 2em;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}

.bank-id button#submit {
    width: 100%;
    background: rgba(12, 77, 132, 0.9);
    color: #fff;
    border-radius: 25px;
    box-sizing: border-box;
    box-shadow: none;
    border: 0;
    font-size: 1.1rem;
    padding: .8em;
    transition: .5s;
    outline: none;
}

    .bank-id button#submit:hover {
        background: rgba(12, 77, 132, 1);
    }


.bank-id button#Cancel {
    margin: 1em 0 0 0;
    border: 0;
    box-shadow: none;
    background: none;
    color: rgb(30, 169, 225);
    text-decoration: underline;
    transition: .5s;
    font-size: 1.1rem;
    outline: none;
}

    .bank-id button#Cancel:hover {
        text-decoration: none;
    }

.bankid-message {
    font-size: 1.5rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    width: 100%;
    background: rgb(255, 243, 205);
    padding:1em;
}

.qr-code-box {
    text-align: center;
    display:flex;
}

.qr-code-box .qr-wrapper {
    width:70% !important;
}

    .qr-code-box .bank-id-logo {
        width: 30% !important;
        padding: 0;
        
    }

        .qr-code-box .bank-id-logo img {
            width: 5.6rem;
            height: fit-content;
            max-height: unset !important;
            max-width: unset !important;
            padding:1em 0.25em;
            box-sizing:border-box;
        }

.qr-code {
    margin-bottom:0 !important; 
    max-width:200px !important;
}


    @media only screen and (min-width : 0px) and (max-width : 65rem) {
        .account-login-content .account-login {
            max-width: 80vw;
        }
    }

    @media only screen and (min-width : 0px) and (max-width : 45rem) {
        .account-login-content {
            align-items: center;
            align-content: center;
            justify-content: center;
            display: flex;
        }

            .account-login-content .account-login {
                padding: 4em 2em;
                width: 92%;
                min-width: 300px;
                justify-content: center;
                justify-self: center;
                align-self: center;
                margin: auto;
                height: auto;
            }

            .account-login-content .copy-info {
                margin-top: 2em;
            }
    }

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .account-login-content .account-login {
            margin-right: auto;
        }
    }