.sm-login {
    --sm-login-primary: #0076be;
    max-width: none;
    margin: 0 auto 36px;
    padding: 72px max(20px,calc((100% - 1120px)/2));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #20354b;
    font-family: inherit
}

    .sm-login, .sm-login * {
        box-sizing: border-box
    }

        .sm-login > div {
            display: grid !important;
            grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
            overflow: hidden;
            align-items: stretch;
            border: 1px solid rgba(22,57,92,.1);
            border-radius: 24px;
            background: rgba(255,255,255,.97);
            box-shadow: 0 24px 85px rgba(20,43,68,.22)
        }

            .sm-login > div > .loginBoxHolder:first-child {
                width: auto !important;
                max-width: none !important;
                float: none !important;
                margin: 0 !important;
                padding: 56px 52px !important;
                background: rgba(255,255,255,.97) !important
            }

        .sm-login .sm-login-side {
            min-width: 0;
            padding: 52px 44px;
            background: color-mix(in srgb,var(--sm-login-primary) 6%,white);
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 16px
        }

            .sm-login .sm-login-side:empty {
                display: none
            }

        .sm-login > div:not(:has(.sm-login-side .PnlAddCustomer,.sm-login-side .loginBox)) {
            grid-template-columns: minmax(0,580px);
            justify-content: center
        }

        .sm-login .loginBox, .sm-login .pnlLogin, .sm-login .PnlAddCustomer {
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
            float: none !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            box-shadow: none !important;
            background: transparent !important
        }

        .sm-login .loginBoxHolder {
            height: auto !important
        }

        .sm-login .sm-login-side .loginBoxHolder {
            width: 100% !important;
            max-width: none !important;
            float: none !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            border-radius: 0;
            background: transparent !important;
            box-shadow: none !important
        }

        .sm-login .sm-login-side .loginBox {
            color: #273c51 !important
        }

        .sm-login .header, .sm-login .header span {
            display: block;
            font-size: 41px !important;
            line-height: 1.22;
            font-weight: 750 !important;
            color: #152f49 !important;
            margin: 0 0 29px !important
        }

        .sm-login .sm-login-side .header, .sm-login .sm-login-side .header span {
            font-size: 21px !important;
            margin-bottom: 14px !important
        }

        .sm-login .literalAddCustomer {
            width: 100% !important;
            float: none !important;
            margin: 0 !important
        }

        .sm-login .labelForm {
            display: block !important;
            width: auto !important;
            float: none !important;
            margin: 0 0 8px !important;
            color: #34465b !important;
            font-weight: 600
        }

        .sm-login input.textboxForm {
            display: block !important;
            width: 100% !important;
            max-width: none !important;
            height: 57px !important;
            margin: 0 0 20px !important;
            padding: 12px 16px !important;
            border: 1px solid #cbd9e7 !important;
            border-radius: 13px !important;
            background: color-mix(in srgb,var(--sm-login-primary) 3%,white) !important;
            color: #18334d !important;
            font-size: 15px !important;
            outline: none
        }

            .sm-login input.textboxForm:focus {
                border-color: var(--sm-login-primary) !important;
                box-shadow: 0 0 0 3px color-mix(in srgb,var(--sm-login-primary) 14%,transparent) !important
            }

        .sm-login .failureText, .sm-login .failureLogin {
            color: #b42318 !important;
            font-weight: 500
        }

        .sm-login .pnlLogin > .fullWidth {
            display: flex !important;
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
            margin: 8px 0 0 !important;
            padding: 0 !important;
            float: none !important;
            width: 100% !important
        }

            .sm-login .pnlLogin > .fullWidth > div {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                width: 100%
            }

        .sm-login .SMLoginButton {
            display: inline-flex;
            float: none !important;
            align-items: center !important;
            justify-content: center !important;
            min-height: 49px !important;
            width: auto !important;
            max-width: 100%;
            padding: 12px 20px !important;
            border-radius: 13px !important;
            border: 1px solid transparent !important;
            text-decoration: none !important;
            box-shadow: none !important;
            background: var(--sm-login-primary) !important;
            color: #fff !important;
            cursor: pointer
        }

            .sm-login .SMLoginButton span, .sm-login .SMLoginButton a, .sm-login .SMLoginButton i {
                color: inherit !important;
                text-decoration: none !important
            }

            .sm-login .SMLoginButton:hover {
                filter: brightness(.95)
            }

        .sm-login .pnlLogin .SMLoginButton[id*="LoginButton"] {
            width: 100% !important;
            min-height: 60px !important;
            font-size: 16px !important;
            font-weight: 700 !important
        }

        .sm-login .pnlLogin .SMLoginButton[id*="ForgotPassword"] {
            align-self: flex-start;
            min-height: 32px !important;
            padding: 4px 0 !important;
            background: transparent !important;
            color: var(--sm-login-primary) !important;
            border: 0 !important;
            border-radius: 0 !important;
            text-decoration: underline !important;
            box-shadow: none !important
        }

            .sm-login .pnlLogin .SMLoginButton[id*="ForgotPassword"] span {
                text-decoration: underline !important
            }

        .sm-login .SMLoginAzureButton, .sm-login .SMLoginGoogleButton {
            background: color-mix(in srgb,var(--sm-login-primary) 8%,white) !important;
            color: var(--sm-login-primary) !important;
            border: 1px solid color-mix(in srgb,var(--sm-login-primary) 19%,white) !important;
            flex: 1 1 180px
        }

        .sm-login .sm-login-side p {
            line-height: 1.7;
            margin: 0 0 13px
        }

        .sm-login .sm-login-side a:not(.SMLoginButton) {
            color: var(--sm-login-primary) !important
        }

        .sm-login .sm-login-side ul {
            padding-left: 20px;
            line-height: 1.7
        }

@media(max-width:800px) {
    .sm-login {
        margin: 24px auto 44px;
        padding: 0 12px
    }

        .sm-login > div {
            grid-template-columns: minmax(0,1fr) !important
        }

            .sm-login > div > .loginBoxHolder:first-child {
                padding: 32px 27px !important
            }

        .sm-login .sm-login-side {
            padding: 22px 27px
        }

        .sm-login .header, .sm-login .header span {
            font-size: 29px !important
        }
}

@media(max-width:440px) {
    .sm-login > div > .loginBoxHolder:first-child {
        padding: 26px 19px !important
    }

    .sm-login .sm-login-side {
        padding: 18px
    }

    .sm-login .pnlLogin > .fullWidth .SMLoginButton {
        flex: 1 1 100%
    }
}

.sm-login .pnlLogin {
    position: relative
}

    .sm-login .pnlLogin::before {
        content: "\f023";
        display: grid;
        place-items: center;
        width: 64px;
        height: 64px;
        margin: 0 0 20px;
        border-radius: 18px;
        background: color-mix(in srgb,var(--sm-login-primary) 9%,white);
        color: var(--sm-login-primary);
        font-family: FontAwesome,"Font Awesome 6 Free","Font Awesome 5 Free";
        font-weight: 900;
        font-size: 28px;
        line-height: 1;
        box-shadow: 0 8px 22px rgba(17,40,66,.06)
    }

    .sm-login .pnlLogin .SMLoginButton[id*="LoginButton"] {
        position: relative;
        border-radius: 15px !important;
        box-shadow: 0 12px 22px color-mix(in srgb,var(--sm-login-primary) 16%,transparent) !important
    }

        .sm-login .pnlLogin .SMLoginButton[id*="LoginButton"]:after {
            content: "\2192";
            font-size: 21px;
            margin-left: 15px;
            font-weight: 400
        }

    .sm-login .pnlLogin .SMLoginButton[id*="ForgotPassword"] {
        font-weight: 600 !important
    }

.sm-login .sm-login-side .loginBoxHolder + .loginBoxHolder {
    margin-top: 18px !important
}

.sm-login .sm-login-side .loginBoxHolder > .loginBox {
    font-size: 15px !important;
    line-height: 1.6
}

.sm-login .sm-login-side .loginBox p {
    padding: 0 0 18px 70px;
    margin: 0 0 18px !important;
    border-bottom: 1px solid color-mix(in srgb,var(--sm-login-primary) 12%,white);
    position: relative;
    min-height: 52px
}

    .sm-login .sm-login-side .loginBox p:last-child {
        border-bottom: 0;
        margin-bottom: 0 !important;
        padding-bottom: 0
    }

    .sm-login .sm-login-side .loginBox p:before {
        content: "?";
        position: absolute;
        left: 0;
        top: 0;
        width: 49px;
        height: 49px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #fff;
        color: var(--sm-login-primary);
        font-size: 23px;
        font-weight: 700;
        box-shadow: 0 7px 18px rgba(17,40,66,.06)
    }

    .sm-login .sm-login-side .loginBox p:first-child:before {
        content: "\1F6D2"
    }

    .sm-login .sm-login-side .loginBox p:nth-child(2):before {
        content: "\1F4C4"
    }

    .sm-login .sm-login-side .loginBox p:nth-child(3):before {
        content: "\260E"
    }

.sm-login .SMLoginAzureButton, .sm-login .SMLoginGoogleButton {
    min-height: 52px !important;
    border-radius: 12px !important
}

@media(max-width:800px) {
    .sm-login {
        padding: 28px 14px !important;
        margin: 0 auto 24px !important
    }

        .sm-login .sm-login-side {
            padding: 32px !important
        }

        .sm-login .header, .sm-login .header span {
            font-size: 34px !important
        }
}

@media(max-width:440px) {
    .sm-login {
        padding: 14px 8px !important
    }

        .sm-login .sm-login-side {
            padding: 22px !important
        }

            .sm-login .sm-login-side .loginBox p {
                padding-left: 58px
            }
}

@media(min-width:801px) {
    .sm-login {
        padding-left: max(20px,calc((100% - 1320px)/2));
        padding-right: max(20px,calc((100% - 1320px)/2))
    }

        .sm-login > div {
            grid-template-columns: minmax(0,43fr) minmax(0,57fr)
        }

        .sm-login .sm-login-side {
            padding: 38px 42px
        }
}

.sm-login .sm-login-side [id$="PnlLoginInfo"] > p,
.sm-login .sm-login-side [id$="PnlLoginInfo"] > div {
    position: relative !important;
    min-height: 46px !important;
    padding: 0 0 16px 64px !important;
    margin: 0 0 16px !important;
    border-bottom: 1px solid rgba(90,110,130,.12) !important;
    line-height: 1.65 !important;
    text-align: left
}

.sm-login .sm-login-side [id$="PnlLoginInfo"] > :last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important
}

.sm-login .sm-login-side [id$="PnlLoginInfo"] > p::before,
.sm-login .sm-login-side [id$="PnlLoginInfo"] > div::before {
    content: "\f07a" !important;
    display: grid !important;
    place-items: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    color: var(--sm-login-primary);
    font-family: FontAwesome,"Font Awesome 6 Free","Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 19px !important;
    font-style: normal !important;
    line-height: 1 !important;
    box-shadow: 0 7px 18px rgba(17,40,66,.06)
}

.sm-login .sm-login-side [id$="PnlLoginInfo"] > :nth-child(2)::before {
    content: "\f007" !important
}

.sm-login .sm-login-side [id$="PnlLoginInfo"] > :nth-child(3)::before {
    content: "\f0e0" !important
}

.sm-login .sm-login-side [id$="PnlLoginInfo"] > :nth-child(4)::before {
    content: "\f071" !important
}

.sm-login .sm-login-side [id$="PnlLoginInfo"] > div > div {
    margin: 0 !important;
    padding: 0 !important
}

@media(max-width:440px) {
    .sm-login .sm-login-side [id$="PnlLoginInfo"] > p, .sm-login .sm-login-side [id$="PnlLoginInfo"] > div {
        padding-left: 56px !important
    }
}

.sm-login .pnlLogin > .fullWidth > div {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    min-width: 0
}

    .sm-login .pnlLogin > .fullWidth > div > .SMLoginAzureButton,
    .sm-login .pnlLogin > .fullWidth > div > .SMLoginGoogleButton {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        float: none !important;
        white-space: normal;
        text-align: center
    }

@media(max-width:440px) {
    .sm-login .pnlLogin > .fullWidth > div {
        flex-wrap: wrap
    }

        .sm-login .pnlLogin > .fullWidth > div > .SMLoginAzureButton,
        .sm-login .pnlLogin > .fullWidth > div > .SMLoginGoogleButton {
            flex: 1 1 100% !important
        }
}

@media (min-width:801px) {
    .sm-login {
        width: min(1120px,calc(100vw - 32px));
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        padding: 42px 0 !important
    }

        .sm-login > div {
            grid-template-columns: minmax(0,46fr) minmax(0,54fr) !important
        }

            .sm-login > div > .loginBoxHolder:first-child {
                padding: 44px 46px !important
            }

        .sm-login .sm-login-side {
            justify-content: flex-start;
            padding: 44px 46px
        }
}

.sm-login .pnlLogin > .fullWidth > div > .SMLoginAzureButton,
.sm-login .pnlLogin > .fullWidth > div > .SMLoginGoogleButton {
    min-height: 52px !important;
    height: auto !important;
    padding: 10px 12px !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.35 !important;
    white-space: nowrap !important
}

.sm-login .SMLoginAzureButton i, .sm-login .SMLoginGoogleButton i {
    display: inline !important;
    vertical-align: baseline !important;
    margin-left: 5px
}

@media(max-width:800px) {
    .sm-login .pnlLogin > .fullWidth > div {
        flex-wrap: wrap
    }

        .sm-login .pnlLogin > .fullWidth > div > .SMLoginAzureButton, .sm-login .pnlLogin > .fullWidth > div > .SMLoginGoogleButton {
            flex: 1 1 100% !important
        }
}

.sm-login .sm-login-side .PnlAddCustomer .header {
    display: flex !important;
    align-items: center;
    gap: 16px
}

    .sm-login .sm-login-side .PnlAddCustomer .header::before {
        content: "\f2c2";
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #fff;
        color: var(--sm-login-primary);
        font-family: FontAwesome,"Font Awesome 6 Free","Font Awesome 5 Free";
        font-weight: 900;
        font-size: 19px;
        line-height: 1;
        box-shadow: 0 7px 18px rgba(17,40,66,.06)
    }

.sm-login > #ContentPlaceHolder1_loginHolder,
.sm-login > div.loginBoxHolder {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width:801px) {
    body:has(.sm-login) {
        width: auto !important;
        max-width: none !important;
    }

        body:has(.sm-login) .masterContainer {
            width: 100% !important;
            max-width: none !important;
            box-sizing: border-box;
        }
}

@media (min-width:801px) {
    .sm-login {
        width: min(1000px,calc(100vw - 32px));
        padding: 28px 0 !important;
    }

        .sm-login > div > .loginBoxHolder:first-child {
            padding: 32px 36px !important;
        }

        .sm-login .sm-login-side {
            padding: 32px 36px;
            gap: 12px;
        }

        .sm-login .header, .sm-login .header span {
            font-size: 32px !important;
            margin-bottom: 20px !important;
        }

        .sm-login .sm-login-side .header, .sm-login .sm-login-side .header span {
            font-size: 19px !important;
        }

        .sm-login input.textboxForm {
            height: 48px !important;
            margin-bottom: 14px !important;
        }

        .sm-login .pnlLogin .SMLoginButton[id*="LoginButton"] {
            min-height: 50px !important;
        }

        .sm-login .sm-login-side .loginBox,
        .sm-login .sm-login-side .loginBox p,
        .sm-login .sm-login-side [id$="PnlLoginInfo"] {
            font-size: 14px !important;
        }

            .sm-login .sm-login-side [id$="PnlLoginInfo"] > p,
            .sm-login .sm-login-side [id$="PnlLoginInfo"] > div {
                padding-bottom: 12px !important;
                margin-bottom: 12px !important;
            }
}

@media (min-width:801px) {
    .sm-login {
        width: min(900px,calc(100vw - 32px));
        padding: 22px 0 !important;
    }

        .sm-login > div {
            border-radius: 18px;
            box-shadow: 0 16px 45px rgba(20,43,68,.14);
        }

            .sm-login > div > .loginBoxHolder:first-child {
                padding: 26px 30px !important;
            }

        .sm-login .sm-login-side {
            padding: 26px 30px;
            gap: 10px;
        }

        .sm-login .header, .sm-login .header span {
            font-size: 28px !important;
            margin-bottom: 16px !important;
        }

        .sm-login .pnlLogin::before {
            width: 48px;
            height: 48px;
            margin-bottom: 14px;
            border-radius: 13px;
            font-size: 22px;
        }

        .sm-login input.textboxForm {
            height: 44px !important;
            margin-bottom: 11px !important;
        }

        .sm-login .pnlLogin .SMLoginButton[id*="LoginButton"] {
            min-height: 46px !important;
        }

        .sm-login .sm-login-side .loginBox,
        .sm-login .sm-login-side .loginBox p,
        .sm-login .sm-login-side [id$="PnlLoginInfo"] {
            font-size: 13px !important;
        }

            .sm-login .sm-login-side [id$="PnlLoginInfo"] > p,
            .sm-login .sm-login-side [id$="PnlLoginInfo"] > div {
                min-height: 38px !important;
                padding-left: 52px !important;
                padding-bottom: 10px !important;
                margin-bottom: 10px !important;
            }

                .sm-login .sm-login-side [id$="PnlLoginInfo"] > p::before,
                .sm-login .sm-login-side [id$="PnlLoginInfo"] > div::before {
                    width: 38px;
                    height: 38px;
                    font-size: 16px !important;
                }

        .sm-login .sm-login-side .PnlAddCustomer .header::before {
            flex-basis: 38px;
            width: 38px;
            height: 38px;
            font-size: 16px;
        }
}