#public-content{
    width:100%;

}

#public-content {

    .login-form {
        width: calc(505 * var(--vw));
        min-height: calc(654 * var(--vw));
        margin: 0 auto;
        border-radius: calc(3 * var(--vw)) !important;
        border: calc(0 * var(--vw)) solid #EAEAEA;
        background: #FFF;
        box-shadow: calc(0 * var(--vw)) calc(4 * var(--vw)) calc(4 * var(--vw)) calc(0 * var(--vw)) rgba(26, 26, 26, 0.05);
        padding: calc(24 * var(--vw));
        max-width: 94%;
    }

        .login-form .center img {
            width: calc(173 * var(--vw));
            display: block;
            margin: 0 auto;
        }

    h2.section-title {
        color: #1A1A1A;
        font-size: calc(24 * var(--vw));
        margin-top: calc(40 * var(--vw));
        font-weight: 700;
        margin-bottom: calc(8 * var(--vw));
    }

    h3.section-title {
        color: #1A1A1A;
        font-family: Inter;
        font-size: calc(17 * var(--vw));
        font-style: normal;
        font-weight: 400;
        line-height: 140%; /* calc(23.8 * var(--vw)) */
        margin-bottom: calc(16 * var(--vw));
    }

    input#Input_Email {
    }

    .form-control {
        height: calc(44 * var(--vw));
        padding: calc(12 * var(--vw));
        border-radius: calc(3 * var(--vw));
    }

    label.form-label.email {
        padding-left: 0;
        margin-left: 0 !important;
    }

    .form-group:first-child {
        margin-top: calc(0 * var(--vw)) !important;
    }

    a.btn.btn-lg.btn-border {
        line-height: calc(40 * var(--vw)) !important;
        height: calc(40 * var(--vw)) !important;
        border-radius: calc(12 * var(--vw)) !important;
        border: calc(1 * var(--vw)) solid var(--secondary-color) !important;
        background: #F2F4FC !important;
        margin-bottom: calc(10 * var(--vw));
    }

        a.btn.btn-lg.btn-border:last-child {
            margin-bottom: 0;
        }

        a.btn.btn-lg.btn-border.multi {
            line-height: calc(38 * var(--vw)) !important;
            height: calc(38 * var(--vw)) !important;
        }

    h3.sub-section {
        color: #1A1A1A;
        font-family: Inter;
        font-size: calc(17 * var(--vw));
        font-style: normal;
        font-weight: 400;
        line-height: 140%; /* calc(23.8 * var(--vw)) */
    }

    .small .form-group.mb-3 {
        margin-bottom: calc(20 * var(--vw)) !important;
    }

    .login-form button.w-100.btn.btn-lg.btn-primary, button#login-submit {
        background-color: #FBBA20 !important;
        text-align: center;
        font-family: Inter;
        font-size: calc(14 * var(--vw)) !important;
        font-style: normal;
        font-weight: 600;
        line-height: 140%; /* calc(19.6 * var(--vw)) */
        height: calc(40 * var(--vw));
        border-radius: calc(3 * var(--vw)) !important;
        border: none;
        color: #000 !important;
    }

        .login-form button.w-100.btn.btn-lg.btn-primary.main-btn-btn, button#login-submit {
            margin-top: calc(32 * var(--vw));
        }

    .login-form.small {
        min-height: calc(340 * var(--vw));
    }

    .small h2.section-title {
        margin-top: calc(20 * var(--vw));
    }

    .btn-bottom {
        margin-top: calc(150 * var(--vw));
    }

    .login-form.register-form {
        height: calc(741 * var(--vw));
        overflow-y: auto;
        overflow-x: hidden;
    }

    :root {
        --main-color: @(Model.CompanySetting is null ? "#FBBA21" : Model.CompanySetting.PrimaryColor ?? "#FBBA21");
        --secondary-color: @(Model.CompanySetting is null ? "#2F3068" : Model.CompanySetting.SecondaryColor ?? "#2F3068");
    }

    #no-sso.login-form {
        min-height: calc(507 * var(--vw));
    }
    /* ≥ 576px — small / tablet-portrait */
    @media (min-width: 576px) {
        .login-form {
            width: 90%;
        }
    }
    /* ≥ 768px — tablet-landscape */
    @media (min-width: 768px) {
        .login-form {
            width: 90%;
        }
    }
    /* ≥ 992px — desktop */
    @media (min-width: 992px) {
    }
    /* ≥ 1280px — wide / large desktop */
    @media (min-width: 1280px) {
        .login-form {
            width: calc(505 * var(--vw));
        }
    }
}