/* This CSS file is for IIMA Design SystemK project by KAR */
/* 29072025 */

:root {

    /*============== Color ==============*/

    --primaryBlue: #1B2F6E;
    --primaryBlue-100: #556EBD;
    --primaryBlue-200: #8CA5F4;
    --primaryBlue-300: #C2D0FF;
    --primaryBlue-400: #F3F6FF;
    --primaryBlue-500: #F8F9FF;

    --brickRed:#C1272D;
    --brickRed-100:#EB585E;
    --brickRed-200:#FF999D;
    --brickRed-300:#FFCDCF;
    --brickRed-400:#FFF0F1;
    --brickRed-500:#FFF8F8;

    --accent:#F4F4F4;

    --white: rgb(255, 255, 255);
    --offWhite:#FAFAFA;
    --grey-400: #D5D5D5;
    --grey-300: #AFAFAF;
    --grey-200: #6C6C6C;
    --grey-100: #3A3A3A;
    --black: #000000;

    --natureGreen:#1AA849;
    --natureGreen-100:#33D068;
    --natureGreen-200:#59E688;
    --natureGreen-300:#A3F0BD;
    --natureGreen-400:#D2F6DE;
    --natureGreen-500:#F3FFF7;

    --saffron:#F4A024;
}

h1, h2, h3, h4, h5, h6, p, blockquote, body{
    margin: 0!important;
    padding: 0 !important;
}


@font-face {
    font-family: 'CanelaDeck Bold';
    src: url('font/CanelaDeck-Bold-Web.woff2') format('woff2');
}

@font-face {
    font-family: 'CanelaDeck Regular';
    src: url('font/CanelaDeck-Regular-Web.woff2') format('woff2');
}

@font-face {
    font-family: 'CanelaDeck Light';
    src: url('font/CanelaDeck-Light-Web.woff2') format('woff2');
}


/* @font-face {*/
/*   font-family: 'CanelaDeck Bold';*/
/*   src:url('https://www.iima.ac.in/themes/iima/fonts/CanelaDeck-Bold-Web.woff2') format('woff2'),*/
/*    url('https://www.iima.ac.in/themes/iima/fonts/CanelaDeck-Bold-Web.woff') format('woff'),*/
/*    url('https://www.iima.ac.in/themes/iima/fonts/CanelaDeck-Light-Web.woff') format('woff'),*/
/*    url('https://www.iima.ac.in/themes/iima/fonts/CanelaDeck-Light-Web.woff2') format('woff2'),*/
/*    url('https://www.iima.ac.in/themes/iima/fonts/CanelaDeck-Regular-Web.woff') format('woff'),*/
/*    url('https://www.iima.ac.in/themes/iima/fonts/CanelaDeck-Regular-Web.woff2') format('woff2');*/
/*}*/


/* ======================  Color class ======================*/

.colorPrimaryBlue{ color: var(--primaryBlue)!important;}
.colorPrimaryBlue-100{ color: var(--primaryBlue-100)!important;}
.colorPrimaryBlue-200{ color: var(--primaryBlue-200)!important;}
.colorPrimaryBlue-300{ color: var(--primaryBlue-300)!important;}
.colorPrimaryBlue-400{ color: var(--primaryBlue-400)!important;}
.colorPrimaryBlue-500{ color: var(--primaryBlue-500)!important;}

.colorBrickRed{ color: var(--brickRed)!important;}
.colorBrickRed-100{ color: var(--brickRed-100)!important;}
.colorBrickRed-200{ color: var(--brickRed-200)!important;}
.colorBrickRed-300{ color: var(--brickRed-300)!important;}
.colorBrickRed-400{ color: var(--brickRed-400)!important;}
.colorBrickRed-500{ color: var(--brickRed-500)!important;}

.colorAccent{ color: var(--accent)!important;}

.colorWhite{ color: var(--white)!important; }
.colorOffWhite{ color: var(--offWhite)!important; }
.colorGrey-400{ color: var(--grey-400)!important; }
.colorGrey-300{ color: var(--grey-300)!important; }
.colorGrey-200{ color: var(--grey-200)!important; }
.colorGrey-100{ color: var(--grey-100)!important; }
.colorBlack{ color: var(--black)!important; }

.colorNatureGreen{ color: var(--natureGreen)!important; }
.colorNatureGreen-100{ color: var(--natureGreen-100)!important; }
.colorNatureGreen-200{ color: var(--natureGreen-200)!important; }
.colorNatureGreen-300{ color: var(--natureGreen-300)!important; }
.colorNatureGreen-400{ color: var(--natureGreen-400)!important; }
.colorNatureGreen-500{ color: var(--natureGreen-500)!important; }

.colorSaffron{ color: var(--saffron)!important; }

/* ====================== Background Color ====================== */

.bgColorPrimaryBlue{ background-color: var(--primaryBlue); }
.bgColorPrimaryBlue-100{ background-color: var(--primaryBlue-100)!important; }
.bgColorPrimaryBlue-200{ background-color: var(--primaryBlue-200)!important; }
.bgColorPrimaryBlue-300{ background-color: var(--primaryBlue-300)!important; }
.bgColorPrimaryBlue-400{ background-color: var(--primaryBlue-400)!important; }
.bgColorPrimaryBlue-500{ background-color: var(--primaryBlue-500)!important; }

.bgColorBrickRed{ background-color: var(--brickRed)!important; }
.bgColorBrickRed-100{ background-color: var(--brickRed-100)!important; }
.bgColorBrickRed-200{ background-color: var(--brickRed-200)!important; }
.bgColorBrickRed-300{ background-color: var(--brickRed-300)!important; }
.bgColorBrickRed-400{ background-color: var(--brickRed-400)!important; }
.bgColorBrickRed-500{ background-color: var(--brickRed-500)!important; }

.bgColorAccent{ background-color: var(--accent)!important; }

.bgColorWhite{ background-color: var(--white)!important; }
.bgColorOffWhite{ background-color: var(--offWhite)!important; }
.bgColorGrey-400{ background-color: var(--grey-400)!important; }
.bgColorGrey-300{ background-color: var(--grey-300)!important; }
.bgColorGrey-200{ background-color: var(--grey-200)!important; }
.bgColorGrey-100{ background-color: var(--grey-100)!important; }
.bgColorBlack{ background-color: var(--black)!important; }


.bgColorNatureGreen{ background-color: var(--natureGreen)!important; }
.bgColorNatureGreen-100{ background-color: var(--natureGreen-100)!important; }
.bgColorNatureGreen-200{ background-color: var(--natureGreen-200)!important; }
.bgColorNatureGreen-300{ background-color: var(--natureGreen-300)!important; }
.bgColorNatureGreen-400{ background-color: var(--natureGreen-400)!important; }
.bgColorNatureGreen-500{ background-color: var(--natureGreen-500)!important; }

.bgColorSaffron{ background-color: var(--saffron)!important; }

/* ====================== button hover ====================== */
.hvrClrBrickRed-100{}
.hvrClrBrickRed-100:hover{ background-color: var(--brickRed-100)!important;}


/* ====================== Fonts ====================== */

h1{
    font-size: 4.5rem; /*72 px*/
    font-family: 'CanelaDeck Bold', serif !important;
    font-weight: bold;
}

h2{
    font-size: 3.5rem; /*56 px*/
    font-family: 'CanelaDeck Bold', serif;
    font-weight: bold;
}

h3{
    font-size: 2.75rem; /*44 px*/
    font-family: 'CanelaDeck Bold', serif;
    font-weight: bold;
}

h4{
    font-size: 2rem; /* 32px;*/
    font-family: 'CanelaDeck Bold', serif;
    font-weight: bold;
}

h5{
    font-size: 1.625rem;   /*26px*/
    font-family: 'CanelaDeck Bold', serif !important;
    /*font-weight: bold !important;*/
    /*letter-spacing: 1px;*/
}

h6{
    font-size: 1rem;
    font-family: 'CanelaDeck Bold', serif !important;
    /*font-family: "CanelaDeck Regular", serif;*/
    /*font-weight: bold !important;*/
    letter-spacing: 1px;
}

.pText22R{
    font-family: Poppins, sans-serif;
    font-size: 1.375rem;   /*22px medium*/
}
.pText22M{
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 1.375rem;   /*22px medium*/
}
.pText22B{
    font-family: Poppins, sans-serif;
    font-weight: bold;
    font-size: 1.375rem;   /*22px medium*/
}


.pText20R{
    font-family: Poppins, sans-serif;
    font-size: 1.25rem;   /*20px medium*/
}
.pText20M{
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 1.25rem;   /*20px medium*/
}
.pText20B{
    font-family: Poppins, sans-serif;
    font-weight: bold;
    font-size: 1.25rem;   /*20px medium*/
}

.pText20R{
    font-family: Poppins, sans-serif;
    font-size: 1.25rem;   /*20px medium*/
}
.pText20M{
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 1.25rem;   /*20px medium*/
}
.pText20B{
    font-family: Poppins, sans-serif;
    font-weight: bold;
    font-size: 1.25rem;   /*20px medium*/
}

.pText18R{
    font-family: Poppins, sans-serif;
    font-size: 1.125rem;   /*18px medium*/
}
.pText18M{
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 1.125rem;   /*18px medium*/
}
.pText18B{
    font-family: Poppins, sans-serif;
    font-weight: bold;
    font-size: 1.125rem;   /*18px medium*/
}

.pText16R, p{
    font-family: Poppins, sans-serif;
    font-size: 1rem; /*16px*/
}
.pText16M{
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 1rem; /*16px*/
}
.pText16B{
    font-family: Poppins, sans-serif;
    font-weight: bold;
    font-size: 1rem; /*16px*/
}

.pText14R{
    font-family: Poppins, sans-serif;
    font-size: 0.875rem;  /*14px*/
}
.pText14M{
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;  /*14px medium*/
}
.pText14B{
    font-family: Poppins, sans-serif;
    font-weight: bold;
    font-size: 0.875rem;  /*14px medium*/
}

.pText12R{
    font-family: Poppins, sans-serif;
    font-size: 0.75rem;    /*12px*/
}
.pText12M{
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 0.75rem; /*12px medium*/
}
.pText12B{
    font-family: Poppins, sans-serif;
    font-weight: bold;
    font-size: 0.75rem; /*12px medium*/
}


/* ====================== font weight ====================== */

.fontWeight100{ font-weight: 100 !important;}
.fontWeight200{ font-weight: 200 !important;}
.fontWeight300{ font-weight: 300 !important;}
.fontWeight400{ font-weight: 400 !important;}
.fontWeight500{ font-weight: 500 !important;}
.fontWeight600{ font-weight: 600 !important;}
.fontWeight700{ font-weight: 700 !important;}
.fontWeight800{ font-weight: 800 !important;}
.fontWeight900{ font-weight: 900 !important;}

.fhLight{ font-family: 'CanelaDeck Light', serif !important;}
.fhRegular{ font-family: 'CanelaDeck Regular', serif !important;}
.fhBold{ font-family: 'CanelaDeck Bold', serif !important;}

/* ====================== Header ====================== */

/*--------- Simple header ------------*/

.headerSimple{
    padding: 16px 0;
    border-bottom: 1px solid var(--grey-400);
}

.headerSimple img{ height: 80px; }

.headerSimple-Resp{
    display: none;
}

.headerSimple-Resp img{
    height: 60px;
}

header{

}

.logo{
    height: 80px;
    width: auto;
}

/*================ Button =======================*/

.btnSmFilled{
    padding: 4px 12px;
    font-size: 0.875rem; /*14px*/
    font-family: Poppins, serif;
    color: var(--white);
    background-color: var(--primaryBlue);
    border: none;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 300;
    transition: 0.2s;
}
.btnSmOutline{
    padding: 4px 12px;
    font-size: 0.875rem; /*14px*/
    font-family: Poppins, serif;
    color: var(--primaryBlue);
    /*background-color: var(--primaryBlue);*/
    border: 1px solid var(--primaryBlue);
    border-radius: 2px;
    text-decoration: none;
    font-weight: 300;
    transition: 0.2s;
}
.btnSmIcoAfter, .btnSmIcoBefore{
    padding: 4px 12px;
    font-size: 0.875rem; /*14px*/
    font-family: Poppins, serif;
    color: var(--white);
    background-color: var(--primaryBlue);
    border: none;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 300;
    transition: 0.2s;
}
.btnSmIcoAfter svg, .btnSmIcoBefore svg{
    height: 10px;
    width: auto;
}
.btnSmIcoBefore svg{
    margin-right: 4px;
}
.btnSmIcoAfter svg{
    margin-left: 4px;
}

.buttonMid, .btnMdFilled, .btnMdIcoAfter, .btnMdIcoBefore{
    padding: 8px 32px;
    font-size: 1rem;
    font-family: Poppins, serif;
    color: var(--white);
    background-color: var(--primaryBlue);
    border: none;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 300;
    transition: 0.2s;
}
.btnMdOutline{
    padding: 8px 32px;
    font-size: 1rem;
    font-family: Poppins, serif;
    color: var(--primaryBlue);
    border: 1px solid var(--primaryBlue);
    border-radius: 3px;
    text-decoration: none;
    font-weight: 300;
    transition: 0.2s;
}
.btnMdIcoAfter svg, .btnMdIcoBefore svg{
    height: 12px;
    width: auto;
}
.btnMdIcoBefore svg{
    margin-right: 4px;
}
.btnMdIcoAfter svg{
    margin-left: 4px;
}

.btnLgFilled, .btnLgIcoAfter, .btnLgIcoBefore{
    padding: 12px 48px;
    font-size: 1.125rem; /*14px*/
    font-family: Poppins, serif;
    color: var(--white);
    background-color: var(--primaryBlue);
    border: none;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 300;
    transition: 0.2s;
}
.btnLgIcoAfter svg, .btnLgIcoBefore svg{
    height: 16px;
    width: 16px;
}
.btnLgIcoBefore svg{
    margin-right: 8px;
}
.btnLgIcoAfter svg{
    margin-left: 8px;
}

.btnTags{
    font-size: 0.75rem; /*12px = 0.75 rem*/
    background-color: var(--primaryBlue);
    color: var(--white);
    border-radius: 2px;
    padding: 2px 12px;
    transition: 0.2s;
    border: none;
    text-decoration: none;
}
.btnTagOutline{
    font-size: 0.75rem; /*12px = 0.75 rem*/
    background-color: rgba(255, 255, 255, 0);
    color: var(--primaryBlue);
    border-radius: 2px;
    padding: 2px 12px;
    border: 1px solid var(--primaryBlue);
    transition: 0.2s;

}

.btnLink{
    color: var(--primaryBlue);
    border: none;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0);
    font-size: 1rem;
    font-weight: 500;
    transition: 0.2s;
}

.btnDisabled{
    pointer-events: none!important;
    color: var(--white);
    background-color: var(--grey-200);
}

.btnRedBorder{
    border: 1px solid var(--brickRed);
    color: var(--brickRed);
    background-color: transparent;
    transition: 0.2s;
}

/*========Button hover========*/

.btnLgFilled:hover, .btnLgIcoAfter:hover, .btnLgIcoBefore:hover,
.btnMdFilled:hover, .btnMdIcoAfter:hover, .btnMdIcoBefore:hover,
.btnSmIcoAfter:hover, .btnSmIcoBefore:hover, .btnSmFilled:hover{
    background-color: var(--primaryBlue-100);
}

.btnLgOutline:hover, .btnMdOutline:hover, .btnSmOutline:hover{
    background-color: var(--primaryBlue-400);
}


.btnLgOutline{
    padding: 12px 48px;
    font-size: 1.125rem; /*14px*/
    font-family: Poppins, serif;
    color: var(--primaryBlue);
    border: 1px solid var(--primaryBlue);
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s;
}

.btnRedBorder:hover{
    background-color: var(--brickRed-500);
}


.buttonLink:hover{
    /*text-decoration: none;*/
    color: red;
}

.buttonGoogle{
    border-radius: 8px;
    border: 1px solid var(--grey-400);
    padding: 16px;
    text-decoration: none;
    color: var(--black);
    font-family: Poppins, serif;
    width: fit-content;
    margin: auto;
    transition: 0.3s;
}

.buttonGoogle:hover{
    background-color: var(--primaryBlue-400);
}

.buttonGoogle img{
    margin-right: 16px;
}

input[type="file"]::file-selector-button{
    padding: 4px 16px;
    border: none;
    color: var(--white);
    background-color: var(--primaryBlue-100);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 200ms;
}

input[type="file"]::file-selector-button:hover{
    background-color: var(--primaryBlue-200);
}


.docUploadBtn{
    border: 2px dotted var(--grey-300);
    padding: 8px 16px;
    border-radius: 8px;
}

.btnHvrBrickRed:hover{
    background-color: #bc080e !important;
}

.btnHvrBrickRedBorder:hover{
    background-color: transparent !important;
    color: var(--brickRed);
    border: 1px solid var(--brickRed);
    border-radius: 2px;
}



.mleft10{
    margin-left: 10px;
}


.forgotPassword{
    color: var(--brickRed);
}


/* ========== Alerts =============*/

.alertSuccessSimple{
    padding:  8px 24px !important ;
    border-radius: 4px!important;
    color: var(--natureGreen);
    background-color: var(--natureGreen-400);
    /*width: fit-content;*/
}
.alertDangerSimple{
    padding:  8px 24px !important ;
    border-radius: 4px!important;
    color: var(--brickRed);
    background-color: var(--brickRed-400);
    /*width: fit-content;*/
}


/*=============Border radius=========*/

.br2px{ border-radius: 2px;}
.br4px{ border-radius: 4px;}
.br6px{ border-radius: 6px;}
.br8px{ border-radius: 8px;}
.br12px{ border-radius: 12px;}

/*============= Padding ============*/

.padding32px{ padding: 32px!important;}
.padding16px{ padding: 16px;}
.padding40px{ padding: 40px;}
.padding64px{ padding: 64px;}



/*============== Margin =============*/
.mrAuto{ margin-right: auto; }
.mlAuto{ margin-left: auto; }

.marginTop32px{ margin-top: 32px; }

.marginRight4px{ margin-right: 4px; }
.marginRight8px{ margin-right: 8px; }


.marginLeft4px{ margin-left: 4px; }

.marginBottom32px{ margin-bottom: 32px; }

.marginTopNegative16px{ margin-top: -16px!important;}

/*============== gap  =================*/
/* gap-3 = 16px*/


/*============= Width ============*/
.widthFitContent{ width: fit-content; }

.maxWidthFitContent{ max-width: fit-content; }


.widthAuto{ width: auto; }

li{ font-family: Poppins, sans-serif; }

/*============= Height ============*/
.heightFitContent{ height: fit-content; }

/*===================== form field ==========================*/
label, input{ font-family: Poppins, sans-serif; }
label{
    font-size: 14px;
    color: var(--grey-100);
    /*font-weight: 500;*/

}

.form-control::placeholder {
    color: var(--grey-300)!important;
    font-weight: 300;
    font-size: 14px;
}

.form-check-label{
    color: var(--grey-200);
}

input[type="radio"]:checked+label{
    /*font-weight: bold;*/
    color: var(--natureGreen);
}

.passwordIcon{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    height: auto;
    background-color: var(--white);
    border-radius: 0 4px 4px 0;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

input[type="password"]{
    border-right: none;
}

.form-check-input:checked {
    background-color: var(--primaryBlue);
    border-color:var(--primaryBlue);
}

.option{
    /*color: var(--primaryBlue);*/
}


hr{
    margin: 0;
}

/*==================== Accordion ====================*/

/* accordian filled */
.accordionFilled .accordion {
    background-color: var(--primaryBlue);
    color: var(--white);
    cursor: pointer;
    padding: 16PX;
    width: 100%;
    border-radius: 4px;
    text-align: left;
    outline: none;
    /* font-size: 15px; */
    transition: 0.4s;
}

.accordionFilled .active, .accordionFilled .accordion:hover {
    background-color: var(--primaryBlue);

}

.accordionFilled .accordion:after {
    content: '\002B';
    color: var(--white);
    font-weight: bold;
    float: right;
    margin-left: 6px;
}

.accordionFilled .active:after {
    content: "\2212";
}

.accordionFilled .panel {
    padding: 0 16PX;
    background-color: var(--white);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


/* accordian with  border */

.accordionBorder .accordion {
    background-color: var(--white);
    color: var(--black);
    cursor: pointer;
    padding: 16PX;
    width: 100%;
    /* border-radius: 4px; */
    text-align: left;
    outline: none;
    /* font-size: 15px; */
    transition: 0.4s;
    border: none;
    border-bottom: 1px solid var(--black);
}

.accordionBorder .active, .accordionBorder .accordion:hover {
    /* background-color: var(--primaryBlue); */

}

.accordionBorder .accordion:after {
    content: '\002B';
    color: var(--black);
    font-weight: bold;
    float: right;
    margin-left: 6px;
}

.accordionBorder .active:after {
    content: "\2212";
}

.accordionBorder .panel {
    padding: 0 16PX;
    background-color: var(--white);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    color: var(--grey-200);
}


/*====================Logo ====================*/

.logoUnderline{
    padding: 0 0 16px 0;
    border-bottom: 1px solid var(--grey-400);
}

/*================ Border ===============*/

.borderDotted{
    border: 1px dotted var(--grey-200);
}




/*========================= Login page */

.logIn{

}


/*================ Form Field ===============*/



/*======== UI card ========*/
.uiCard{
    border-radius: 4px;
    background-color: var(--accent);
    border: 1px solid var(--grey-400)

}
.cardBody{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
}

.uiCard2{
    border-radius: 4px;
    /* background-color: var(--accent); */
    /* border: 1px solid var(--grey-400) */
    background-color: var(--brickRed-400);
    background-image: url(/image/card2bg.jpg);
    background-position: bottom;
    /* border-radius: 4px 4px 0 0; */
}

.cardBody2{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 32px;
    background-color: var(--brickRed-400);
    border-radius: 4px 4px 0 0;
}

.cardImage2 img{
    width: 50%;
    min-height: 220px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 2px 2px 16px 2px #c2272c36;

}

/*============ Form footer================*/
.formFooter{
    background-color: var(--primaryBlue);
    color: var(--white);
    padding: 1rem;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
    text-align: center;
    border-radius: 4px 4px 0 0;
}
.termLinks{
    display: flex;
    gap: 32px;
    justify-content: center;
}

.formFooter a{
    text-decoration: none;
    font-size: 0.875rem;
    color: var(--white);

}
.formFooter p{
    font-size: 0.875rem;

}

/* ========= Tabs ============= */

.defaultTab .nav-link a{
    color: var(--primaryBlue)!important;

}

.defaultTab .nav-link{
    color: var(--primaryBlue)!important;

}

.defaultTab .nav-link.active{
    color: var(--black)!important;
}





/* ========= Loader ============= */


.loaderWrapperIIMA {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: var(--white);*/
    z-index: 9999;
}

.loaderWrapperIIMA .logoLoader {
    font-size: 28px;
    z-index: 2;
    position: absolute;
    top: 14px;
    left: 26px;
}

.loaderWrapperIIMA .spinner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(
            from 0deg,
            var(--primaryBlue) 0deg,
            var(--primaryBlue-100) 90deg,
            var(--primaryBlue-200) 140deg,
            var(--white) 360deg
    );
    animation: spin 1100ms linear infinite;
    position: absolute;
}

.loaderWrapperIIMA .spinner::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 64px;
    height: 64px;
    background: #ffffff;
    border-radius: 50%;
    z-index: 1;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.tableIIMA thead {
    background-color: var(--primaryBlue-400);
    border-bottom: 2px solid var(--primaryBlue); /* Darker bottom border for header */
}
.tableIIMA tr{
    background-color: transparent;
}

.tableIIMA .tr1{
    background-color: var(--offWhite);
}

.tableIIMA th, .tableIIMA tr, .tableIIMA td{
    background-color: transparent;

}


.tableIIMA .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--offWhite);
}


/* ============== Responsive media query ==============*/

@media (max-width: 1400px) {

}

@media (max-width: 992px) {

}

@media (max-width: 768px) {


}

@media only screen and (min-width: 577px) and (max-width: 767px) {
    .headerSimple img{
        height: 70px;
    }
}



@media (max-width: 576px) {

    h4{
        font-size: 1.5rem;
    }
    h5{
        font-size: 1.25rem;
    }

    /* ============ header* =========/*/
    .headerSimple {
        display: none;
    }

    .headerSimple-Resp{
        display: block;
        padding: 8px 20px!important;
        border-bottom: 1px solid var(--grey-400);
    }

    .logoLgLGN{
        display: none;
    }
}

@media (min-width: 1400px) {

}


/* Sidebar collapsed state */
body.sidebar-collapsed .offcanvas {
    width: 0 !important;
    overflow: hidden;
}

/* Move main content to full width when sidebar hidden */
body.sidebar-collapsed main {
    margin-left: 0 !important;
    transition: margin 0.3s ease;
}

/* Optional: smooth transition */
.offcanvas {
    transition: width 0.3s ease;
}