:root {
    --vw: calc(100vw / 1920);
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Thin.ttf');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-ThinItalic.ttf');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-ExtraLight.ttf');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-ExtraLightItalic.ttf');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Light.ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Italic.ttf');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-MediumItalic.ttf');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-SemiBoldItalic.ttf');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-ExtraBoldItalic.ttf');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-Black.ttf');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter_28pt-BlackItalic.ttf');
    font-weight: 900;
    font-style: italic;
}

body, html {
    height: 100% !important;
    width: 100%;
    display: block;
    overflow: hidden;
    background-image: url(../img/pattern.svg?v=2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    display: flex;
    align-items: center;
}

html {
    background: #F3F6FF;
}

.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));
    }
}