﻿.loginboxnew {
    background: #052E2B;
}

html,
body,
.loginboxnew {
    background: #FFF;
    /*background-image: url('../images/omniimages/loginback.svg');*/
    background-size: cover;
    background-position: right top;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    margin: 0px;
}

.signout,
.logged-out-page-N iframe {
    border: 0;
}

.firstsection {
    background-size: cover;
    background-image: url('../images/login/northStarSovTint_LCroped-image.png');
    width: 58.50%;
    height: 100%;
    background-repeat: no-repeat;
    /*border-right: 1px solid #CDD6DB;*/
    float: left;
}

.clearfix {
    height: 100%;
}

/*.firstsection div.borderbottom {
    border-bottom: 1px solid #CDD6DB;
    padding: 40px 0px 65px 40px;
    position: relative;
    height: auto !important;
}*/

    /*.firstsection div.borderbottom img:first-child {
        display: none !important;
    }*/

/*.firstsection div:after {
    content: "";
    position: absolute;
    right: -13px;
    bottom: -14px;
    width: 25px;
    height: 25px;
    z-index: 999;
    border-radius: 50%;
    background: #052E2B;
}*/

.loginboxnew .clearfix {
    position: relative;
}

.clearfix::after {
    display: block;
    clear: both;
    /*content: "";*/
}

/*.firstsection:after {
    border-right: 1px solid #CDD6DB;
    height: 100%;
    content: "";
    position: absolute;
    right:0;
}
*/
.secondsection {
    height: 100%;
    float: right;
    width:41.50%;
    background-color:#FFF;
}

    .secondsection .alert-danger {
        background-color: #68DA6A;
        border-color: #68DA6A;
        padding: 5px 15px 10px;
        border-radius: 0px;
    }

        .secondsection .alert-danger ul {
            margin-bottom: 0px;
            padding-left: 20px;
        }

    .secondsection form {
        padding-top: 10%;
        padding-left: 100px;
        padding-right: 100px;
        /*width: 545px;*/
    }

.secondsection form img.logosvg {
    width:275.36px;
    margin-bottom: 8px;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
}

    .secondsection .form-control {
        background-color: transparent !important;
        background: transparent !important;
        border: 0;
        border-bottom: 1px solid #000;
        margin-bottom: 35px;
        padding: 0px;
        padding-bottom: 0;
        border-radius: 0px;
        line-height: 0px;
        height: 34px;
        color: #000 !important;
        font-family: 'Arial';
        font-style: normal;
        font-weight: 300;
        font-size: 16px;
    }

        .secondsection .form-control::placeholder {
            color: #A9A9A9;
            font-family: 'Arial';
            font-style: normal;
            font-weight: 300;
            font-size: 16px;
            text-transform: uppercase;
        }

        .secondsection .form-control:-webkit-autofill {
            color: #A9A9A9;
            font-family: 'Arial';
            font-style: normal;
            font-weight: 300;
            font-size: 16px;
            background-color: #000000 !important;
            color: transparent !important;
            appearance: inherit;
        }


        .secondsection .form-control:focus {
            box-shadow: none;
            font-size: 16px;
            outline:0;
        }

    .secondsection div .form-control {
        margin-bottom: 0;
        padding-right: 40px;
    }

.secondsection div {
    position: relative;
    width: 100%;
}

.forgetpassword,
.forgetpassword:hover,
.forgetpassword:active,
.forgetpassword:focus,
.forgetpassword:active:focus {
    color: #003E7D;
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20.02px;
    text-decoration-line: underline;
    text-transform: capitalize;
    margin-top: 12px;
    display: block;

    letter-spacing: 0.17000000178813934px;
    text-align: left;
}

.forgetpassword {
    transition: all 0.3s ease;
}

/*.forgetpassword:hover {
    color: #68DA6A;
}*/

.processing {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.04em;
    color: #FF451A;
    margin-top: 3%;
    /*width: 55% !important;*/
    display: inline-block;
    /*position: relative;*/
    /*left: 90px;*/
}

.secondsection .btn-login {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-decoration-line: underline;
    text-transform: capitalize;
    color: #68DA6A;
    padding: 0px;
    border: 0;
    margin-top: 20px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.secondsection form .btn-login {
    background: #003E7D;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #FFFFFF !important;
    padding: 7px 22px;
    text-decoration: none;
    border: 1px solid #003E7D;
}

.NorthStardesign .k-widget.k-window {
    border: 0;
}

.NorthStardesign .k-window .k-header {
    background-color: #003E7D !important;
}

.NorthStardesign .k-window-titlebar .k-link {
    opacity: 1;
    padding: 0;
    margin-top: 3px;
}

.NorthStardesign .k-window-title {
    color: #F5F5F5;
}

.NorthStardesign span.k-icon.k-i-close {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.NorthStardesign .k-window-titlebar .k-link.k-state-hover {
    background: transparent;
    border: 0;
}

.secondsection form .btn-login:hover,
.secondsection form .btn-login:focus {
    color: #003D7C !important;
    background: transparent;
    border: 1px solid #003D7C;
    outline: 0;
}

.secondsection .btn-login:hover,
.secondsection .btn-login:focus {
    color: #F5F5F5;
}

    .secondsection .btn-login:hover svg path,
    .secondsection .btn-login:focus svg path {
        fill: #F5F5F5;
        stroke: #F5F5F5;
    }

.secondsection .btn-login svg {
    transition: all 0.5s ease;
}

.secondsection .btn-login:hover svg {
    /* position: relative;
        right: -5px;*/
    transition: all 0.5s ease;
}

.secondsection .btn-login svg {
    padding-left: 0;
    width: 18px;
    height: 12px;
    margin-left: 10px;
    display: none;
}

.secondsection .remember-me {
    position: relative !important;
    bottom: 0;
    margin-top: 30px;
    color: #CDD6DB;
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
}

.secondsection .remembercheckbox .checkmark {
    border: 1px solid #68DA6A;
    background-color: transparent;
}

.secondsection .remembercheckbox input:checked ~ .checkmark {
    background-color: #68DA6A;
    border: 1px solid #68DA6A;
    border-radius: 2px;
}




.secondsection .checkboxeye input.passworddesign::after {
    color: #CDD6DB;
}

.secondsection .checkboxeye input.passworddesign:checked::after {
    background-image: url(../images/omniimages/eyeN.svg);
}

.donthaveacc {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    padding: 20px 30px;
    /*background: #052E2B;*/
    position: absolute !important;
    /*width: 81.8%;*/
    bottom: -1px;
}

    .donthaveacc:after {
        /*content: "";*/
        /*background: #CDD6DB;*/
        position: absolute;
        top: 0;
        width: 98.6%;
        height: 1px;
        left: 10px;
    }

    .donthaveacc .btn-login {
        margin-top: 0px;
        margin-left: 15px;
    }

.secondsection input:-webkit-autofill,
.secondsection input:-webkit-autofill:hover,
.secondsection input:-webkit-autofill:focus,
.secondsection input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #000 !important;
    color: #CDD6DB;
    font-family: 'Arial';
    font-style: normal;
    font-weight: 300;
    font-size: 1rem;
}



.logged-out-page-N div {
    color: #F5F5F5;
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    text-decoration: none;
    margin-bottom: 40px;
}

.logged-out-page-N a {
    color: #68DA6A;
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    text-decoration: underline;
    margin-bottom: 40px;
}

    .logged-out-page-N a:hover {
        color: #F5F5F5;
    }

.logged-out-page-N .btn {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #68DA6A;
    border: 1px solid #68DA6A;
    border-radius: 200px;
    color: #052E2B;
    text-decoration: none;
    padding: 7px 28px;
    margin-bottom: 0px;
    transition: all 0.2s ease;
}

    .logged-out-page-N .btn:hover,
    .logged-out-page-N .btn:focus {
        color: #68DA6A;
        background: transparent;
        border: 1px solid #68DA6A;
    }

.logoutdesign div {
    height: 100%;
}


.accessdeniednew h1 {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 300;
    font-size: 64px;
    line-height: 80px;
    color: #FFA18B;
    width: 150%;
}

.base-timer {
    position: relative;
    width: 100PX;
    height: 100PX;
}

.base-timer__svg {
    /* transform: scaleX(-1);*/
}

.base-timer__circle {
    fill: none;
    stroke: none;
}

.base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: #697E85;
}

.base-timer__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
}

    .base-timer__path-remaining.green {
        color: #68DA6A;
    }

    .base-timer__path-remaining.orange {
        color: #68DA6A;
    }

    .base-timer__path-remaining.red {
        color: #68DA6A;
    }

.base-timer__label {
    position: absolute;
    width: 100PX;
    height: 100PX;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 27px;
    color: #68DA6A;
}

#app div,
#app {
    height: auto;
    margin-bottom: 0;
}

video {
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    video::-webkit-media-controls {
        display: none;
    }

    video::-webkit-media-controls-start-playback-button {
        display: none;
    }

    video::-webkit-media-controls {
        opacity: 0;
    }

.signwith_button {
    margin-top: 65px;
}

    .signwith_button a {
        font-family: 'Arial';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #68DA6A;
        position: relative;
    }

        .signwith_button a:hover {
            text-decoration: none;
            color: #F5F5F5;
        }

            .signwith_button a:hover:after {
                background: #F5F5F5;
            }

        .signwith_button a:after {
            content: "";
            position: absolute;
            bottom: -3px;
            height: 1px;
            background: #68DA6A;
            width: 100%;
            left: 0;
        }
@media only screen and (max-height: 640px) {
    .lbl-login-hdr {
        display: none;
    }
}

@media only screen and (max-width:1440px) {
    .secondsection form {
        padding-top: 10%;
    }
}


@media only screen and (max-width:1180px) {
    html, body, .loginboxnew {
        background-size: cover;
    }

    video {
        object-fit: fill;
    }
    .secondsection {
        width: 41.50%;
    }
    .firstsection {
        width:58.5%;
    }
    .processing {
        width: 77% !important;
        left: 30px;
    }
}


@media only screen and (max-width:800px) {
    .secondsection form {
        padding-left: 40px;
        width: 480PX;
    }

    .accessdeniednew h1 {
        font-size: 52px;
        line-height: 57px;
        width: auto;
    }
}



@media only screen and (max-width:767px) {
    .secondsection .remember-me {
        margin-top: 20px;
    }

    .signwith_button {
        margin-top: 40px;
    }

    .secondsection form img.logosvg {
        display: block;
        margin: 0 auto;
    }

    video {
        display: none;
    }

    .firstsection {
        width: 60%;
        border-right: 0;
        float: none !important;
        height: auto;
        text-align: center;
    }

        .firstsection div.borderbottom {
            border: 0;
            padding: 0;
        }

    .secondsection {
        height: auto;
        float: none !important;
        padding: 0px;
        width: 100%;
    }

        .secondsection form {
            padding-left: 0;
            width: auto;
            padding-top: 0;
            padding-right: 0;
        }

    .processing {
        width: 100% !important;
        left: 0;
    }

    .loginboxnew .clearfix {
        padding: 70px 30px 0px 30px;
    }

    .firstsection div:after {
        display: none;
    }

    html, body, .loginboxnew {
        background-image: url(../images/omniimages/loginbackmobile.png);
        background-size: contain;
        background-position: bottom right;
    }

    .donthaveacc {
        width: 100% !important;
        left: 0;
    }

        .donthaveacc .btn-login {
            margin-top: 0px;
            margin-left: 0;
            float: right;
        }

    .forgetpassword {
        float: left !important;
    }

    .secondsection .form-control {
        margin-bottom: 35px;
    }

    .logoutdesign div.firstsection,
    .logoutdesign div.secondsection {
        height: auto;
    }

    .logged-out-page-N {
        position: absolute !important;
        left: 0% !important;
        top: 0;
        text-align: center;
        width: 100%;
    }

        .logged-out-page-N div {
            font-size: 16px;
        }

        .logged-out-page-N div {
            margin-bottom: 15px;
        }

        .logged-out-page-N a {
            font-size: 16px;
        }

        .logged-out-page-N .btn {
            margin-top: 40px;
        }

        .logged-out-page-N form {
            width: 93% !important;
            margin-top: 0;
        }

    .accessdeniednew h1 {
        font-size: 36px;
        line-height: 49px;
        width: auto;
    }

    .accessdeniednew form {
        margin-top: 0;
    }

    #app div {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .accessdeniednew .col-md-3 {
        margin-bottom: 0px;
    }

    .donthaveacc:after {
        width: 96%;
        left: 8px;
    }
}


@media only screen and (max-width:767px) {
    .firstsection img {
        width: 100%;
        max-width: 270px;
    }
}


@media (min-width: 768px){
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding:0px;
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    margin-right: -15px;
    margin-left: -15px;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.text-right{
    text-align:right;
}

.lbl-login-hdr {
    margin-bottom:16px;
}


.NorthStardesign #loginPopUpModal .modal-header {
    background-color: #003366 !important;
}

    .NorthStardesign #loginPopUpModal .modal-header .close {
        color: white;
    }

/* the Close button */
.NorthStardesign #loginPopUpModal .modal-footer .btn-default {
    border: none;
    background-color: #020A08;
    color: #F5F5F5;
    text-transform: uppercase;
    padding: 5px 18px;
    border-radius: 4px;
}

    .NorthStardesign #loginPopUpModal .modal-footer .btn-default:hover {
        color: #0064ca;
        border: none;
        background-color: #020A08;
    }