/* =========================================================
   Global
   ========================================================= */

:root {
    --brand-red: #dc3545;
    --indicator-red: #d71920;
    --promo-divider-gap: 4rem;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background: #ffffff;
    color: black !important;
    height: 18px;
    font-family: Montserrat-Regular !important;
    color: black;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}


/* =========================================================
   Main page layout
   ========================================================= */

.auth-container {
    width: 100%;
    min-height: 100vh;
    padding: 0;
    background: #ffffff;
}

.auth-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
}

.div-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.login-column,
.promo-column {
    position: relative;
    min-width: 0;
}

/*
   Keep the desktop layout fixed at two equal columns.
   Contents scale inside the columns without shifting them.
*/
@media (min-width: 992px) {
    .login-column,
    .promo-column {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }
}

.login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.logo-container {
    margin-top: 2%;
}

.login-heading {
    text-align: center !important;
    line-height: 1.2;
    font-family: 'Montserrat-Bold';
}


.login-content {
    width: min(68%, 650px);
    margin: 0 auto;
}


/* =========================================================
   Banner
   ========================================================= */

.brand-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 80%;
    margin: 1rem auto;
    overflow: auto;
    background: #e6e6e6;
    border-radius: 2rem;
}

.resizable {
    position: relative;
}


/* =========================================================
   Login/Register tabs
   ========================================================= */

.auth-tabs {
    display: flex;
    justify-content: flex-start;
    /*   margin-left: 4rem;*/
    /*border-bottom: 1px solid #fff;*/
}

    .auth-tabs .nav-link {
        padding: 0.5rem 1rem;
        /*  color: #212529;*/


        border: 0;
        border-bottom: 3px solid transparent;
        background: transparent;
        border-top-color: none;
        font-family: Montserrat-Bold !important;
    }

        .auth-tabs .nav-link:hover,
        .auth-tabs .nav-link:focus {
            /*color: var(--brand-red);*/
            color: #df2b2a;
        }

        .auth-tabs .nav-link.active {
            /*  color: var(--brand-red);
            border-bottom-color: var(--brand-red);*/
            color: #df2b2a;
            border-bottom-color: #df2b2a;
            background: transparent;
            border-top-color: none;
        }


/* =========================================================
   Login form
   ========================================================= */

.login-form {
    width: 100%;
}

.login-field {
    /* width: 75%;*/
    /*  margin: 0 auto 1rem;*/
    /*  margin-left: 15%;*/
    margin-bottom: 5% !important;
}

.login-label {
    display: block;
    margin-bottom: 0.25rem;
    color: #99a2ab;
}

.form-control {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    border: 1px solid #d3d3d3;
    border-radius: 1.5rem;
}

    .form-control:focus {
        border-color: #d3d3d3;
        box-shadow: 0 0 0 0.2rem rgba(41, 25, 29, 0.1);
    }

.login-input {
    width: 100%;
    /*  background-color: whitesmoke;*/
}




/* =========================================================
   Remember me radio button
   ========================================================= */

.remember-device {
    display: flex;
    align-items: center;
    width: 75%;
    /*  margin: 0.25rem auto 1rem;*/
    /*   margin-left: 15%;*/
}

.remember-device-radio {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 20px;
    accent-color: #2196f3;
    cursor: pointer;
    transform: translateY(-1px);
}

.remember-device-text {
    margin: 0;
    /* color: var(--brand-red);*/
    color: #df2b2a;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    gap: .65rem;
}


/* =========================================================
   Login button
   ========================================================= */

.login-actions {
    text-align: center;
}

.LoginBtn:hover,
.LoginBtn:focus,
.LoginBtn:active {
    color: #ffffff !important;
    background-color: #c82333;
    border-color: #bd2130;
}

.actions a {
    color: #212529;
    text-decoration: underline;
}

    .actions a:hover {
        /* color: var(--brand-red);*/
        color: #df2b2a;
    }


/* =========================================================
   Footer
   ========================================================= */

.footer-panel {
    width: 86%;
    margin-top: 2rem;
    margin-left: 5rem;
}

.footer-card {
    /*width: min(70%, 650px);*/
    /*  margin: 0 auto;*/
    /* padding: 1rem 1.25rem;*/
    text-align: center;
    color: #000000;
    background: #f8f9fa;
    padding: 1%;
}

.footer-card-register {
    background: #f8f9fa;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4%;
    padding: 1%;
}

    .footer-links a {
        margin: 0;
        color: #222222;
        text-decoration: none;
        font-family: Montserrat-Regular !important;
    }

        .footer-links a:hover {
            /*color: var(--brand-red);*/
            color: #df2b2a;
            text-decoration: underline;
            font-family: Montserrat-Regular !important;
        }

.footer-social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 1.25rem;*/
    gap: 5%;
    padding: 1%;
}

    .footer-social-links a {
        color: #222222;
        text-decoration: none;
    }

        .footer-social-links a:hover {
            /* color: var(--brand-red);*/
            color: #df2b2a;
        }


/* =========================================================
   Right promotional section
   ========================================================= */

.promo-panel {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100%;
}

    /* Vertical divider remains fixed */
    .promo-panel::before {
        content: "";
        position: absolute;
        top: 2%;
        bottom: 10%;
        left: 0;
        width: 1.5px;
        background: #df2b2a;
    }


.promo-content {
    padding: 10%;
    margin-top: -5%;
}

.promo-section {
    width: 100%;
}

.promo-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #ffffff;
    border-radius: 0.5rem;
}

.promo-image {
    display: block;
    object-fit: contain;
    object-position: left center;
    border-radius: 3%;
}




/* =========================================================
   Promo information card
   ========================================================= */

.promo-card {
    color: #212529;
    background: #f8f9fa;
    border-radius: 0.75rem;
    margin-bottom: 2%;
    padding: 3%;
    margin-top: 5%;
}

.promo-feature {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.promo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex: 0 0 32px;
}

.promo-icon-image {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}


/* =========================================================
   Maintenance message
   ========================================================= */

.maintenance-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}


/* =========================================================
   Registration page
   ========================================================= */

.register-page {
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-height: 100vh;*/
    /* padding: 2rem 1rem;*/
}

.register-container {
    width: 100%;
    max-width: 720px;
}

.register-copy {
    color: #9a9a9a;
    line-height: 1.45;
}

.terms-copy {
    margin-top: 2rem;
    color: #9a9a9a;
    line-height: 1.45;
}

    .terms-copy a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 0.2rem;
    }

.action-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.btn-decline,
.btn-accept {
    min-width: 140px;
    min-height: 48px;
    border-radius: 999px;
    font-family: Montserrat-Regular !important;
}

.btn-decline {
    color: #111111;
    background: #ffffff;
    border: 2px solid #ef2b2d;
}

    .btn-decline:hover,
    .btn-decline:focus {
        color: #111111;
        background: #fff4f4;
        border-color: #ef2b2d;
    }

.btn-accept {
    color: #ffffff;
    background: #ef2b2d;
    border: 2px solid #ef2b2d;
}

    .btn-accept:hover,
    .btn-accept:focus {
        color: #ffffff;
        background: #d92325;
        border-color: #d92325;
    }


/* =========================================================
   Smaller desktop, keep two-column alignment unchanged
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {
    .login-content {
        width: 78%;
    }

    /*
       Do not change promo max-width or left margin here.
       Only the available width will decrease.
    */
    .promo-panel {
    }
}


/* =========================================================
   Tablet/mobile stacked layout
   ========================================================= */

@media (max-width: 991.98px) {
    .auth-row {
        min-height: auto;
    }

    .login-column,
    .promo-column {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .login-panel {
        /* padding: 1.5rem;*/
        /* margin-left: 5%;*/
    }

    .login-content {
        width: min(90%, 650px);
    }

    .promo-panel {
        min-height: auto;
        /* padding: 2rem 1.5rem;
        border-top: 3px solid var(--brand-red);*/
    }

        .promo-panel::before {
            display: none;
        }

    .promo-content {
        width: 100%;
        /* max-width: 650px;
        margin: 0 auto;*/
        padding: 10%;
        margin-top: -5%;
    }

    .promo-image {
        object-position: center;
    }

    .footer-card {
        /* width: min(90%, 650px);*/
        width: 100%;
    }
}


/* =========================================================
   Small tablets
   ========================================================= */

@media (max-width: 767.98px) {
    .login-heading {
    }

    .login-content {
        width: 100%;
    }

    .login-field,
    .remember-device {
        width: 90%;
    }

    .auth-tabs {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
    }

    .promo-panel {
        /* padding: 1.5rem 1rem;*/
    }

    .promo-image-wrapper {
        aspect-ratio: 4 / 3;
    }

    .promo-card {
        /*padding: 1.25rem;*/
        padding: 10%;
        margin-bottom: 2%;
    }

    .footer-card {
        /* width: 95%;*/
        width: 100%;
    }
}


/* =========================================================
   Phones
   ========================================================= */

@media (max-width: 575.98px) {
    .brand-bar {
        width: 80%;
        max-width: 80%;
        /* padding: 0.75rem 1rem;*/
    }

    .login-panel {
    }

    .login-heading {
    }

    .login-field,
    .remember-device,
    .auth-tabs {
        width: 100%;
    }

        .auth-tabs .nav-link {
        }

    .LoginBtn {
        /* min-width: 45%;*/
        /*padding-right: 2rem;
        padding-left: 2rem;*/
    }

    .promo-image-wrapper {
        aspect-ratio: 4 / 3;
    }

    .promo-feature {
        align-items: flex-start;
    }

    .footer-links {
        /*   gap: 0.5rem 0.75rem;*/
        padding: 1%;
    }

    .action-row {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}

/* Media query - Banner alignment with Login & Carousel Section. */
@media (min-width: 2500px) and (max-width: 7000px) {

    .div-wrapper {
        height: 20%;
    }
}

.text-align-left {
    text-align: left;
}

.text-align-Center {
    text-align: center;
}

.mg-lt-10 {
    margin-left: 10%;
}

.mg-lt-25 {
    margin-left: 25%;
}

.mg-lt-20 {
    margin-left: 20%;
}

.mg-tp-7 {
    margin-top: -7%;
}

.mg-tp-4 {
    margin-top: 4%;
}

.mg-tp-5 {
    margin-top: 5%;
}

.font-xLarge {
}


.color-weight-black {
    color: black;
}

.color-weight-red {
    /*color: red !important;*/
    color: #df2b2a !important;
}

.color-weight-black {
    color: black !important;
}

.ft-size-md {
}

.mg-lt-20 {
    margin-left: 20%;
}

.mg-lt-15 {
    margin-left: 15%;
}

.img-calor {
    width: 169px;
    height: 40px;
}



.fs-15 {
}

.promocard-bd {
    /* border: 1px solid red;*/
    border: 1px solid #df2b2a;
    border-radius: 50%;
}

.mg-lt-7 {
    margin-left: 7%;
}


@media (min-width: 2500px) and (max-width: 7000px) {
    .mg-lt-7 {
        margin-left: 18%;
    }

    /*.carousel-inner,.promo-card {*/
    /* width: 50% !important;*/
    /*}*/
}




.fs-20 {
}

.d-none {
    display: none !important;
}

.cao-ft-size {
    color: black !important;
    font-family: Montserrat-Regular !important;
}

.NoPadding {
    padding: 0px !important;
}

.cao-btn-sz-bg-rd {
    width: 25%;
    /* color: white !important;*/
    color: #fffff !important;
    background-color: #df2b2a !important;
    border-color: #df2b2a !important;
    border-radius: 10px;
}

.cao-btn-sz-bg-wt {
    width: 25%;
    /*color: red !important;*/
    color: #df2b2a !important;
    /*    background-color: var(--brand-white) !important;*/
    /* background-color: #fffff !important;*/
    background-color: white !important;
    /* border-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;*/

    border-color: #df2b2a !important;
    border-radius: 24px !important;
    /*    font-family: "Source Serif 4",Georgia,"Times New Roman",Times,serif;*/
    font-family: Montserrat-Regular !important;
}

.wd-50 {
    width: 50% !important;
}

.wd-80 {
    width: 80% !important;
}

.wd-70 {
    width: 70% !important;
}


.wd-60 {
    width: 60% !important;
}

.mg-5 {
    margin: 5% !important;
}

.mg-10 {
    margin: 10% !important;
}

.forgetPassword-wd-90 {
    width: 90%;
}

.wd-5-mg-lt {
    width: 50%;
    float: left;
    gap: 20px;
    padding-right: 15px;
}

.carousal-bd-rd {
    border-radius: 2%;
}


.tab-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.tab-item {
    background: #eee;
    padding: 10px 20px;
    margin-right: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
}

    .tab-item.active {
        background: #fff;
        border-bottom: 1px solid #fff;
        margin-bottom: -1px;
        z-index: 2;
    }

.tab-container {
    border: 1px solid #ccc;
    padding: 20px;
    background: #fff;
    width: 400px;
}

button, input[type="submit"]:focus {
    outline: none !important;
}

button, input[type="submit"]:hover {
    /*background-color: #df2b2acc;*/
    opacity: 0.8;
}

@media (min-width: 300px) and (max-width: 912px) {
    #dvLoginForm {
        padding: 5%;
    }
}

.pd-2 {
    padding: 2%;
}


.wd-95 {
    width: 95%;
}


/*New Changes for mobile resolution*/

@media (min-width: 300px) and (max-width: 912px) {
    .col-12 col-lg-6 {
        margin-top: 5%;
    }



    .mg-lt-25 {
        margin-left: 5%;
    }

    .wd-50 {
        width: 80% !important;
    }

     

    input[id*='btnNewReg'] {
        width: 55% !important;
    }
}

.NoWrap {
    white-space: nowrap;
}


/* NEW : 11th Sept26*/

.submit-query-button {
    min-width: 137px !important;
    height: 42px !important;
    padding: 0 22px !important;
    background: #ed1c24 !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    color: #fff !important;
    cursor: pointer !important;
    font-family: Montserrat-Bold !important;
}

.cao-ft-fmly {
    font-family: Montserrat-Regular !important;
    color: black !important;
}


/*Feedback Changes*/

.errorMessage {
    padding-left: 0 !important;
}



/*Feedback Changes*/

/*Font Changes*/

.BodyText, .Captions, .CAPS, .Disclaimer {
    font-family: 'Montserrat-Regular' !important;
}



h1, .btn-txt, .Sh2, .CAPSBold {
    font-family: 'Montserrat-Bold' !important;
    color: black;
}

.btn-txt {
    font-family: 'Montserrat-Bold' !important;
}

h2, .intro, .Sh1 {
    font-family: SourceSerif4-Regular !important;
    color: black;
}

.h2Override {
    font-family: 'Montserrat-Bold' !important;
}

.Register-Step2-override {
}

.errorMessage {
    margin-top: 0.35rem;
    color: #df2b2a;
    font-family: Montserrat-Regular !important;
}

@font-face {
    font-family: 'Montserrat-Regular';
    src: url('../Fonts/Montserrat Font/Montserrat-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'SourceSerif4-Regular';
    src: url('../Fonts/Source_Serif_4/SourceSerif4-Regular.ttf') format('truetype');
}

@font-face {
    src: url('../Fonts/Montserrat Font/Montserrat-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: url('../Fonts/Montserrat Font/Montserrat-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'SourceSerif4_18pt-Black';
    src: url('../Fonts/Source_Serif_4/SourceSerif4_18pt-Black.ttf') format('truetype');
}


@font-face {
    font-family: 'Montserrat-Bold';
    src: url('../Fonts/Montserrat Font/Montserrat-Bold.ttf') format('truetype');
}

.forgetPassword {
    cursor: pointer;
    border: none;
    background: none;
    text-decoration: none;
    font-family: 'Montserrat-Regular';
}

    .forgetPassword:hover {
        text-decoration: underline;
    }

.required::after {
    content: " *";
    color: #dc3545;
}


h3 {
    font-family: SourceSerif4-Regular !important;
}

.bd-24 {
    border-radius: 24px !important;
}