/* =============================================
   ADMIN DASHBOARD - IIM Dashboard THEME by Ramani Kishan
   Custom CSS + Bootstrap 5.3.8 Enhancement
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* ============== CSS Variables ============== */
:root {

    --iimaBlue: #1B2F6E;
    --iimaRed: #C1272D; /*iim brick red color */
    --iimaAccent: #F4F4F4;

    --primary: #1A6CF6;
    --primary-100: #0F4FC8;
    --primary-200: #2275FF;
    --primary-300: #5595FF;
    --primary-400: #E8F0FE;
    --primary-500: #F2F7FF;
    --primary-hover: #074ACA;

    --secondary: #0A1B49;
    --accent: #00C2FF;
    --accent2: #7C3AED;

    --success: #00834A;
    --success-100: #10B981;
    --success-200: #66E2AC;
    --success-300: #B0F3D6;
    --success-400: #D6FFEF;
    --success-500: #EFFFF9;
    --success-hover: #157347;

    --warning: #FFA807;
    --warning-100: #FFB225;
    --warning-200: #FFC760;
    --warning-300: #FFDB98;
    --warning-400: #FFF0D5;
    --warning-500: #FFF9EF;
    --warning-hover: #F19C00;

    --danger: #C1272D; /*iim brick red color */
    --danger-100: #FF484F;
    --danger-200: #FF8287;
    --danger-300: #FFC7C9;
    --danger-400: #FFE7E7;
    --danger-500: #FFF7F7;
    --danger-hover: #E30D0D;

    --info: #06B6D4;
    --info-100: #19CCEA;
    --info-200: #8AE2F2;
    --info-300: #A7F2FF;
    --info-400: #DCFAFF;
    --info-500: #F3FDFF;
    --info-hover: #00ADCD;

    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;

    --black: #000000;
    --grey-100: #3E3E3E;
    --grey-200: #8A8A8A;
    --grey-300: #C6C6C6;
    --grey-400: #E8E8E8;
    --grey-500: #F3F3F3;
    --white: #FFFFFF;

    --disabled: #A1A1A1;

    --bg-dashboard: #F0F4FF;  /*For Design system only*/

    --sidebar-bg: var(--secondary);

    --border: #dddddd;

    --sidebar-width: 260px;
    --topbar-h: 4rem;

    --shadow-sm: 0 1px 0.250rem rgba(26, 108, 246, .08), 0 1px 0.125rem rgba(0, 0, 0, .04);
    --shadow-md: 0 0.250rem 1.25rem rgba(26, 108, 246, .12), 0 2px 0.5rem rgba(0, 0, 0, .06);
    --shadow-lg: 0 0.5rem 2.5rem rgba(26, 108, 246, .18), 0 4px 16px rgba(0, 0, 0, .08);
    --shadow-glow: 0 0 24px rgba(26, 108, 246, .35);

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-rounded: 99rem;

    --transition: all 0.22s cubic-bezier(.4, 0, .2, 1);
    --font: poppins;


    /* Headings */
    --iima-h1: 2rem;/* 32px */
    --iima-h2: 1.75rem;/* 28px */
    --iima-h3: 1.5rem;/* 24px */
    --iima-h4: 1.25rem;/* 20px */
    --iima-h5: 1.125rem;/* 18px */
    --iima-h6: 1rem;/* 16px */

    /* Body Text */
    --iima-text-lg: 1.125rem; /* 18px */
    --iima-text-md: 1rem; /* 16px */
    --iima-text-sm: 0.875rem; /* 14px */
    --iima-text-xs: 0.75rem; /* 12px */
}


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

@font-face {
    font-family: 'Font Awesome 6 Pro';
    src: url('font/fa-brands-400.woff2') format('woff2');
    src: url('font/fa-duotone-900.woff2') format('woff2');
    src: url('font/fa-duotone-light-300.woff2') format('woff2');
    src: url('font/fa-duotone-regular-400.woff2') format('woff2');
    src: url('font/fa-duotone-thin-100.woff2') format('woff2');
    src: url('font/fa-light-300.woff2') format('woff2');
    src: url('font/fa-regular-400.woff2') format('woff2');
    src: url('font/fa-sharp-duotone-light-300.woff2') format('woff2');
    src: url('font/fa-sharp-duotone-regular-400.woff2') format('woff2');
    src: url('font/fa-sharp-duotone-solid-900.woff2') format('woff2');
    src: url('font/fa-sharp-duotone-thin-100.woff2') format('woff2');
    src: url('font/fa-sharp-light-300.woff2') format('woff2');
    src: url('font/fa-sharp-regular-400.woff2') format('woff2');
    src: url('font/fa-sharp-solid-900.woff2') format('woff2');
    src: url('font/fa-sharp-thin-100.woff2') format('woff2');
    src: url('font/fa-solid-900.woff2') format('woff2');
    src: url('font/fa-thin-100.woff2') format('woff2');
    src: url('font/fa-v4compatibility.woff2') format('woff2');
}

@font-face {
    /*font-family: poppins;*/
    /*src: url('font/Poppins-Thin.ttf') format('truetype');*/
    /*src: url('font/Poppins-ThinItalic.ttf') format('truetype');*/
    /*src: url('font/Poppins-SemiBold.ttf') format('truetype');*/
    /*src: url('font/Poppins-SemiBoldItalic.ttf') format('truetype');*/
    /*src: url('font/Poppins-Regular.ttf') format('truetype');*/
    /*src: url('font/Poppins-Medium.ttf') format('truetype');*/
    /*src: url('font/Poppins-MediumItalic.ttf') format('truetype');*/
    /*src: url('font/Poppins-Light.ttf') format('truetype');*/
    /*src: url('font/Poppins-LightItalic.ttf') format('truetype');*/
    /*src: url('font/Poppins-Italic.ttf') format('truetype');*/
    /*src: url('font/Poppins-ExtraLightItalic.ttf') format('truetype');*/
    /*src: url('font/Poppins-ExtraLight.ttf') format('truetype');*/
    /*src: url('font/Poppins-ExtraBoldItalic.ttf') format('truetype');*/
    /*src: url('font/Poppins-ExtraBold.ttf') format('truetype');*/
    /*src: url('font/Poppins-BoldItalic.ttf') format('truetype');*/
    /*src: url('font/Poppins-Bold.ttf') format('truetype');*/
    /*src: url('font/Poppins-BlackItalic.ttf') format('truetype');*/
    /*src: url('font/Poppins-Black.ttf') format('truetype');*/
}

body{
    font-family: Poppins, sans-serif;
}
/*------ Font Color ------*/
.color-iimaBlue {
    color: var(--iimaBlue)!important;
}
.color-iimaRed {
    color: var(--iimaRed)!important;
}
.color-iimaAccent {
    color: var(--iimaAccent)!important;
}

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


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

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

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

.color-danger {
    color: var(--danger)!important;
}
.color-danger-100 {
    color: var(--danger-100)!important;
}
.color-danger-200 {
    color: var(--danger-200)!important;
}
.color-danger-300 {
    color: var(--danger-300)!important;
}
.color-danger-400 {
    color: var(--danger-400)!important;
}
.color-danger-hover {
    color: var(--danger-hover)!important;
}

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


.color-text-primary {
    color: var(--text-primary)!important;
}
.color-text-secondary {
    color: var(--text-secondary)!important;
}
.color-text-muted {
    color: var(--text-muted)!important;
}


.color-black {
    color: var(--black) !important;
}
.color-grey-100 {
    color: var(--grey-100)!important;
}
.color-grey-200 {
    color: var(--grey-200)!important;
}
.color-grey-300 {
    color: var(--grey-300)!important;
}
.color-grey-400 {
    color: var(--grey-400)!important;
}
.color-grey-500 {
    color: var(--grey-500)!important;
}
.color-white {
    color: var(--white)!important;
}

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

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

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

.bg-color-iimaBlue {
    background-color: var(--iimaBlue)!important;
}
.bg-color-iimaRed {
    background-color: var(--iimaRed)!important;
}
.bg-color-iimaAccent {
    background-color: var(--iimaAccent)!important;
}

.bg-color-primary {
    background-color: var(--primary)!important;
}
.bg-color-primary-100 {
    background-color: var(--primary-100)!important;
}
.bg-color-primary-200 {
    background-color: var(--primary-200)!important;
}
.bg-color-primary-300 {
    background-color: var(--primary-300)!important;
}
.bg-color-primary-400 {
    background-color: var(--primary-400)!important;
}
.bg-color-primary-500 {
    background-color: var(--primary-500)!important;
}
.bg-color-primary-hover {
    background-color: var(--primary-hover)!important;
}

.bg-color-secondary {
    background-color: var(--secondary)!important;
}
.bg-color-accent {
    background-color: var(--accent)!important;
}
.bg-color-accent2 {
    background-color: var(--accent2)!important;
}

.bg-color-success {
    background-color: var(--success)!important;
}
.bg-color-success-100 {
    background-color: var(--success-100)!important;
}
.bg-color-success-200 {
    background-color: var(--success-200)!important;
}
.bg-color-success-300 {
    background-color: var(--success-300)!important;
}
.bg-color-success-400 {
    background-color: var(--success-400)!important;
}
.bg-color-success-500 {
    background-color: var(--success-500)!important;
}
.bg-color-success-hover {
    background-color: var(--success-hover)!important;
}

.bg-color-warning {
    background-color: var(--warning)!important;
}
.bg-color-warning-100 {
    background-color: var(--warning-100)!important;
}
.bg-color-warning-200 {
    background-color: var(--warning-200)!important;
}
.bg-color-warning-300 {
    background-color: var(--warning-300)!important;
}
.bg-color-warning-400 {
    background-color: var(--warning-400)!important;
}
.bg-color-warning-500 {
    background-color: var(--warning-500)!important;
}
.bg-color-warning-hover {
    background-color: var(--warning-hover)!important;
}

.bg-color-danger {
    background-color: var(--danger)!important;
}
.bg-color-danger-100 {
    background-color: var(--danger-100)!important;
}
.bg-color-danger-200 {
    background-color: var(--danger-200)!important;
}
.bg-color-danger-300 {
    background-color: var(--danger-300)!important;
}
.bg-color-danger-400 {
    background-color: var(--danger-400)!important;
}
.bg-color-danger-500 {
    background-color: var(--danger-500)!important;
}
.bg-color-danger-hover {
    background-color: var(--danger-hover)!important;
}

.bg-color-info {
    background-color: var(--info)!important;
}
.bg-color-info-100 {
    background-color: var(--info-100)!important;
}
.bg-color-info-200 {
    background-color: var(--info-200)!important;
}
.bg-color-info-300 {
    background-color: var(--info-300)!important;
}
.bg-color-info-400 {
    background-color: var(--info-400)!important;
}
.bg-color-info-500 {
    background-color: var(--info-500)!important;
}
.bg-color-info-hover {
    background-color: var(--info-hover)!important;
}

.bg-color-text-primary {
    background-color: var(--text-primary)!important;
}
.bg-color-text-secondary {
    background-color: var(--text-secondary)!important;
}
.bg-color-text-muted {
    background-color: var(--text-muted)!important;
}

.bg-color-black {
    background-color: var(--black)!important;
}
.bg-color-grey-100 {
    background-color: var(--grey-100)!important;
}
.bg-color-grey-200 {
    background-color: var(--grey-200)!important;
}
.bg-color-grey-300 {
    background-color: var(--grey-300)!important;
}
.bg-color-grey-400 {
    background-color: var(--grey-400)!important;
}
.bg-color-grey-500 {
    background-color: var(--grey-500)!important;
}
.bg-color-white {
    background-color: var(--white)!important;
}

.bg-color-disabled {
    background-color: var(--disabled)!important;
}

.bg-color-border {
    background-color: var(--border)!important;
}

/* ============== Text ============== */


h1, h2, h3, h4, h5, h6, p {
    margin: 0 ;
    padding: 0;
}

h1 {
    font-size: 2rem; /* 32px */
    font-weight: 600;
}
h2 {
    font-size: 1.75rem; /* 28px */
    font-weight: 600;
}
h3 {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
}
h4 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
}
h5 {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
}
h6 {
    font-size: 1rem; /* 16px */
    font-weight: 600;
    letter-spacing: 0.5px;
}


.cd-h1{
    font-family: CanelaDeck, serif;
    font-size: 4rem;
}

.cd-h2{
    font-family: CanelaDeck, serif;
    font-size: 3rem;
}

.cd-h3{
    font-family: CanelaDeck, serif;
    font-size: 2.5rem;
}

.cd-h4{
    font-family: CanelaDeck, serif;
    font-size: 2rem;
}

.cd-h5{
    font-family: CanelaDeck, serif;
    font-size: 1.5rem;
}

.cd-h6{
    font-family: CanelaDeck, serif;
    font-size: 1.125rem;
}


p {
    /*font-size: 1rem;*/
    /*line-height: 1.6;*/
    /*font-weight: 500;*/
}

/* Tablet View */
@media (max-width: 1199px) {

    .cd-h1{
        font-size: 3.5rem;
    }
    .cd-h2{
        font-size: 3rem;
    }
    .cd-h3{
        font-size: 2.5rem;
    }
    .cd-h4{
        font-size: 2rem;
    }
    .cd-h5{
        font-size: 1.5rem;
    }
    .cd-h6{
        font-size: 1.125rem;
    }

}

/* Mobile View */
@media (max-width: 767px) {
    .cd-h1{
        font-size: 3rem;
    }
    .cd-h2{
        font-size: 2.5rem;
    }
    .cd-h3{
        font-size: 2rem;
    }
    .cd-h4{
        font-size: 1.5rem;
    }
    .cd-h5{
        font-size: 1.25rem;
    }
    .cd-h6{
        font-size: 1rem;
    }

}

.iima-text-lg {
    font-size: var(--iima-text-lg) !important;/* 1.25rem 18px*/
}
.iima-text-md {
    font-size: var(--iima-text-md) !important; /* 1rem*/
}
.iima-text-sm {
    font-size: var(--iima-text-sm) !important;/* 0.875rem 14px  */
}
.iima-text-xs {
    font-size: var(--iima-text-xs) !important;/* 0.75 12px*/
}


.font-weight-100, .font-thin{
    font-weight: 100; /* Thin    */
}
.font-weight-200, .font-extralight{
    font-weight: 200; /* Extralight   */
}
.font-weight-300, .font-light{
    font-weight: 300; /* Light   */
}
.font-weight-400, .font-regular{
    font-weight: 400; /* Regular   */
}
.font-weight-500, .font-medium{
    font-weight: 500; /* Medium   */
}
.font-weight-600, .font-semibold{
    font-weight: 600; /* Semi Bold   */
}
.font-weight-700, .font-bold{
    font-weight: 700; /* Bold   */
}
.font-weight-800, .font-extrabold{
    font-weight: 800; /* Extra Bold   */
}
.font-weight-900, .font-black{
    font-weight: 900;/* Black   */
}

/* ============== Reset & Base ============== */

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

body {
    /*font-family: var(--font), serif;*/
    background: var(--white);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
}

/* Page footer */

.iima-footer-copyright-info{
    font-size: var(--iima-text-xs);
    color: var(--text-secondary);
}

.iima-footer-ict-team{
    font-family: 'CanelaDeck', serif;
    font-weight: lighter;
    transition: color 0.3s ease;
}

.iima-footer-ict-team:hover{
    color: var(--white);
}

/* ============== Scrollbar ============== */

::-webkit-scrollbar {
    width: 0.25rem;
    height: 0.25rem;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-300);
}

/* ============== Sidebar ============== */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--secondary);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: var(--transition);
    overflow: hidden;
}

.sidebar::before {
    content: '';
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 108, 246, .25) 0%, transparent 70%);
    pointer-events: none;
}

.sidebar-brand {
    /*display: flex;*/
    /*align-items: center;*/
    /*gap: 12px;*/
    padding: 1.25rem 1.375rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    /*min-height: var(--topbar-h);*/
}


.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
}

.nav-section-label {
    font-size: .75rem;
    /*font-weight: 700;*/
    /*letter-spacing: 1.2px;*/
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 1rem 1.5rem 0;
}

.nav-item {
    margin: 0.250rem 0.75rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .875rem;
    /*font-weight: 500;*/
    transition: var(--transition);
    cursor: pointer;
    position: relative;
}

.nav-link i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
}

.nav-link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, .08);
}

.nav-link.active {
    color: var(--white) ;
    background: var(--primary-200);
    box-shadow: var(--shadow-md) ;
}

.nav-link.active .nav-badge {
    background: rgba(255, 255, 255, .2);
    color: var(--white);
}

/*.sidebar-footer{*/
/*    padding: 1rem ;*/
/*    border-top: 1px solid var(--grey-100);*/
/*}*/

/* ─── Top Bar ────────────────────────────────── */
.topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--topbar-h);
    background: var(--white);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    z-index: 1030;
    transition: left .22s cubic-bezier(.4, 0, .2, 1);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-sidebar-toggle {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: var(--iimaBlue);
    color: var(--iimaAccent) !important;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /*color: var(--text-secondary);*/
    transition: var(--transition);
    font-size: 1rem;
}

.btn-sidebar-toggle:hover {
    background: var(--primary-100);
    color: var(--white) !important;
}

.topbar-search {
    position: relative;
    display: flex;
    align-items: center;
}

.topbar-search i {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    font-size: .875rem;
}

.topbar-search input {
    /*padding: 8px 14px 8px 36px;*/
    /*border: 1.5px solid var(--border);*/
    /*border-radius: var(--radius-sm);*/
    /*background: var(--bg);*/
    /*font-family: var(--font);*/
    /*font-size: .85rem;*/
    /*color: var(--text-primary);*/
    /*width: 240px;*/
    /*transition: var(--transition);*/
}

.topbar-search input::placeholder {
    /*color: var(--text-muted);*/
}

.topbar-search input:focus {
    /*outline: none;*/
    /*border-color: var(--primary-200);*/
    /*background: var(--white);*/
    /*box-shadow: 0 0 0 3px rgba(26, 108, 246, .12);*/
    /*width: 290px;*/
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.topbar-icon-btn {
    /*width: 38px;*/
    /*height: 38px;*/
    /*border: none;*/
    /*background: var(--bg);*/
    /*border-radius: var(--radius-sm);*/
    /*cursor: pointer;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*color: var(--text-secondary);*/
    /*transition: var(--transition);*/
    /*font-size: 1rem;*/
    /*position: relative;*/
}

.topbar-icon-btn:hover {
    /*background: var(--primary-400);*/
    /*color: var(--primary-200);*/
}

.notif-dot {
    /*position: absolute;*/
    /*top: 7px;*/
    /*right: 7px;*/
    /*width: 8px;*/
    /*height: 8px;*/
    /*background: var(--danger);*/
    /*border-radius: 50%;*/
    /*border: 2px solid var(--bg-card);*/
}

.topbar-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--iimaBlue));
    display: flex;
    align-items: center;
    justify-content: center;
    /*font-size: .78rem;*/
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    /*border: 2px solid transparent;*/
    transition: var(--transition);
}

.topbar-avatar:hover {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-glow);
}

/* ─── Main Content ───────────────────────────── */
.main-content {
    margin-left: var(--sidebar-width);
    padding-top: var(--topbar-h);
    min-height: 100vh;
    transition: margin-left .22s cubic-bezier(.4, 0, .2, 1);
}

.page-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


/* ─── Page Header ────────────────────────────── */
.page-header {
    /*margin-bottom: 24px;*/
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    /*letter-spacing: -.4px;*/
    /*line-height: 1.2;*/
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    /*margin-top: 4px;*/
}

.breadcrumb {
    /* font-size: .75rem; */
    margin-bottom: 0.5rem;
    background-color: #f5f5f500;
}
.breadcrumb>li {
    line-height: 45px;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

.breadcrumb-item.active {
    color: var(--text-secondary);
    font-weight: 500;
}

.breadcrumb-item a {
    color: var(--primary-200);
    font-weight: 500;
}

/* ─── Cards ──────────────────────────────────── */

/*This card class is for design system area*/
.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-body {
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /*height: 3rem;*/
}

.card-title {
    /*font-size: .95rem;*/
    /*font-weight: 700;*/
    color: var(--text-primary);
    margin: 0;
}

.card-title i {
   color: var(--primary);
}

.card-footer {
    /*background: transparent;*/
    /*border-top: 1px solid var(--border);*/
    /*padding: 14px 22px;*/
}

.content-area-ds{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 0 1.5rem 0;
}

/* ─── Buttons ────────────────────────────────── */




/* ─── Tables ─────────────────────────────────── */


/* ─── Badges ─────────────────────────────────── */


/* ─── Forms ──────────────────────────────────── */


form{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-label {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.form-control, .form-select {
    /* font-size: .875rem; */
    border: 1.5px solid var(--grey-300);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    background-color: var(--white);
    transition: var(--transition);
    width: 100%;
    height: 50px;
    outline: none;
}

.form-input {
    width: 100%;
    /*height: 50px;*/
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--grey-300);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-primary);
    transition: border-color .24s, box-shadow .24s;
    outline: none;
}

.form-input:focus {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-md);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-control::placeholder {
    color: var(--text-muted);
}





.form-control-sm, .form-select-sm, .form-input-sm {
    font-size: 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.250rem 1rem;
    color: var(--text-primary);
    background-color: var(--white) ;
    transition: var(--transition);
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-md);
    outline: none;
}

.form-control-sm:focus, .form-select-sm:focus {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-md);
    outline: none;
}


.input-group-text {
    /*background: var(--bg);*/
    /*border: 1.5px solid var(--border);*/
    /*color: var(--text-muted);*/
    /*font-size: .9rem;*/
}




.iima-login-form-forgot-password{
    display: flex;
    justify-content: flex-end;
    text-decoration:none;
    color:var(--text-secondary);
    font-size:var(--iima-text-sm);
    transition:.3s ease;
}

.iima-login-form-forgot-password:hover{
    color:var(--iimaRed);
}

textarea.form-input {
    /*height: auto;*/
}

/* ─── Alerts ─────────────────────────────────── */


/* ─── Progress ───────────────────────────────── */
.progress {
    /*height: 7px;*/
    /*border-radius: 99px;*/
    /*background: var(--border);*/
    /*overflow: hidden;*/
}

.progress-bar {
    /*border-radius: 99px;*/
    /*background: linear-gradient(90deg, var(--primary-200), var(--accent));*/
}

/* ─── Tabs ───────────────────────────────────── */
.nav-tabs {
    /*border-bottom: 1.5px solid var(--border);*/
    /*gap: 4px;*/
}

.nav-tabs .nav-link {
    /*border: none;*/
    /*border-bottom: 2px solid transparent;*/
    /*color: var(--text-secondary);*/
    /*font-weight: 600;*/
    /*font-size: .85rem;*/
    /*padding: 9px 16px;*/
    /*border-radius: 0;*/
    /*margin-bottom: -1.5px;*/
    /*background: none;*/
}

.nav-tabs .nav-link:hover {
    /*color: var(--primary-200);*/
}

.nav-tabs .nav-link.active {
    /*color: var(--primary-200);*/
    /*border-bottom-color: var(--primary-200);*/
    /*background: none;*/
}

/* ─── Dropdowns ──────────────────────────────── */
/*.dropdown-menu {*/
/*    border: 1.5px solid var(--border);*/
/*    border-radius: var(--radius-md);*/
/*    box-shadow: var(--shadow-md);*/
/*    padding: 6px;*/
/*    font-size: .875rem;*/
/*}*/

/*.dropdown-item {*/
/*    border-radius: var(--radius-sm);*/
/*    padding: 8px 12px;*/
/*    font-weight: 500;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 8px;*/
/*    transition: var(--transition);*/
/*}*/

/*.dropdown-item:hover {*/
/*    background: var(--primary-400);*/
/*    color: var(--primary-200);*/
/*}*/

/*.dropdown-divider {*/
/*    border-color: var(--border);*/
/*    margin: 4px 0;*/
/*}*/

/*.dropdown-header {*/
/*    font-size: .7rem;*/
/*    font-weight: 700;*/
/*    letter-spacing: .8px;*/
/*    text-transform: uppercase;*/
/*    color: var(--text-muted);*/
/*    padding: 8px 12px 4px;*/
/*}*/

/* ─── Modal ──────────────────────────────────── */
/*.modal-content {*/
/*    border: 1px solid var(--border);*/
/*    border-radius: var(--radius-lg);*/
/*    box-shadow: var(--shadow-lg);*/
/*}*/

/*.modal-header {*/
/*    border-bottom: 1px solid var(--border);*/
/*    padding: 18px 22px;*/
/*}*/

/*.modal-title {*/
/*    font-weight: 700;*/
/*    font-size: 1rem;*/
/*}*/

/*.modal-body {*/
/*    padding: 22px;*/
/*}*/

/*.modal-footer {*/
/*    border-top: 1px solid var(--border);*/
/*    padding: 14px 22px;*/
/*}*/

/* ─── Toast ──────────────────────────────────── */
/*.toast-container {*/
/*    z-index: 1100;*/
/*}*/

/*.toast {*/
/*    border: 1px solid var(--border);*/
/*    border-radius: var(--radius-md);*/
/*    box-shadow: var(--shadow-md);*/
/*    font-size: .875rem;*/
/*}*/

/*.toast-header {*/
/*    border-bottom: 1px solid var(--border);*/
/*    font-weight: 600;*/
/*}*/

/* ─── Timeline ───────────────────────────────── */
/*.timeline {*/
/*    position: relative;*/
/*    padding-left: 28px;*/
/*}*/

/*.timeline::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    left: 10px;*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    width: 2px;*/
/*    background: linear-gradient(to bottom, var(--primary-200), transparent);*/
/*}*/

/*.timeline-item {*/
/*    position: relative;*/
/*    padding-bottom: 24px;*/
/*}*/

/*.timeline-dot {*/
/*    position: absolute;*/
/*    left: -24px;*/
/*    top: 4px;*/
/*    width: 12px;*/
/*    height: 12px;*/
/*    border-radius: 50%;*/
/*    background: var(--primary-200);*/
/*    border: 2px solid #fff;*/
/*    box-shadow: 0 0 0 3px var(--primary-400);*/
/*}*/

/*.timeline-time {*/
/*    font-size: .72rem;*/
/*    font-weight: 600;*/
/*    color: var(--text-muted);*/
/*    margin-bottom: 4px;*/
/*}*/

/*.timeline-content {*/
/*    font-size: .875rem;*/
/*    color: var(--text-primary);*/
/*    font-weight: 500;*/
/*}*/

/*.timeline-sub {*/
/*    font-size: .8rem;*/
/*    color: var(--text-secondary);*/
/*    margin-top: 2px;*/
/*}*/

/* ─── Code Blocks ────────────────────────────── */
.code-block-wrapper {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    /*border: 1px solid var(--iimaBlue);*/
    /*margin: 8px 0;*/
    padding: 0 1.5rem;
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--iimaBlue);
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--primary-100);
    border-radius: 0.5rem 0.5rem 0 0;
}

.code-lang {
    /*font-family: var(--font-mono);*/
    font-size: .75rem;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: .5px;
    text-transform: uppercase;
}

.code-dots {
    display: flex;
    gap: 0.5rem;
}

.code-dots span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.code-dots .red {
    background: var(--iimaRed);
}

.code-dots .yellow {
    background: var(--warning);
}

.code-dots .green {
    background: var(--success);
}

pre.code-block {
    background: var(--secondary);
    color: var(--iimaAccent);
    /*font-family: var(--font-mono);*/
    font-size: .875rem;
    margin: 0;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    line-height: 1.7;
    border-radius:0 0 0.5rem 0.5rem;
}

pre.code-block .kw {
    color: #c084fc;
}

pre.code-block .str {
    color: #86efac;
}

pre.code-block .num {
    color: #fbbf24;
}

pre.code-block .cmt {
    color: #475569;
    font-style: italic;
}

pre.code-block .fn {
    color: #60a5fa;
}

pre.code-block .tag {
    color: #f472b6;
}

pre.code-block .attr {
    color: #a5f3fc;
}

.btn-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: .75rem;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    transition: var(--transition);
}

.btn-copy:hover {
    background: var(--primary-hover);
    color: var(--white);
    /*border-color: var(--primary-200);*/
}

.btn-copy.copied {
    background: var(--success);
    color: #fff;
    /*border-color: var(--success);*/
}

/* ─── Avatar ─────────────────────────────────── */
/*.avatar {*/
/*    border-radius: 50%;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    font-weight: 700;*/
/*    color: #fff;*/
/*    background: linear-gradient(135deg, var(--primary-200), var(--accent));*/
/*    flex-shrink: 0;*/
/*}*/

/*.avatar-xs {*/
/*    width: 26px;*/
/*    height: 26px;*/
/*    font-size: .65rem;*/
/*}*/

/*.avatar-sm {*/
/*    width: 32px;*/
/*    height: 32px;*/
/*    font-size: .75rem;*/
/*}*/

/*.avatar-md {*/
/*    width: 42px;*/
/*    height: 42px;*/
/*    font-size: .9rem;*/
/*}*/

/*.avatar-lg {*/
/*    width: 56px;*/
/*    height: 56px;*/
/*    font-size: 1.1rem;*/
/*}*/

/*.avatar-xl {*/
/*    width: 72px;*/
/*    height: 72px;*/
/*    font-size: 1.4rem;*/
/*}*/

/*.avatar-stack {*/
/*    display: flex;*/
/*}*/

/*.avatar-stack .avatar {*/
/*    border: 2px solid #fff;*/
/*    margin-left: -8px;*/
/*}*/

/*.avatar-stack .avatar:first-child {*/
/*    margin-left: 0;*/
/*}*/

/* ─── List Group ─────────────────────────────── */

/*.list-group-item {*/
/*    border-color: var(--border);*/
/*    padding: 13px 18px;*/
/*    font-size: .875rem;*/
/*    transition: var(--transition);*/
/*}*/

/*.list-group-item:hover {*/
/*    background: var(--primary-400);*/
/*}*/

/*.list-group-item.active {*/
/*    background: var(--primary-200);*/
/*    border-color: var(--primary-200);*/
/*}*/

/*.list-group-item-action:first-child {*/
/*    border-radius: var(--radius-md) var(--radius-md) 0 0;*/
/*}*/

/*.list-group-item-action:last-child {*/
/*    border-radius: 0 0 var(--radius-md) var(--radius-md);*/
/*}*/

/* ─── Pagination ─────────────────────────────── */


/* ─── Charts Placeholder ─────────────────────── */
/*.chart-placeholder {*/
/*    height: 220px;*/
/*    display: flex;*/
/*    align-items: flex-end;*/
/*    gap: 8px;*/
/*    padding: 16px 8px 0;*/
/*}*/

/*.chart-bar {*/
/*    flex: 1;*/
/*    border-radius: 6px 6px 0 0;*/
/*    background: linear-gradient(to top, var(--primary-200), var(--accent));*/
/*    opacity: .85;*/
/*    transition: opacity .2s;*/
/*}*/

/*.chart-bar:hover {*/
/*    opacity: 1;*/
/*}*/

/*.chart-donut {*/
/*    width: 160px;*/
/*    height: 160px;*/
/*    border-radius: 50%;*/
/*    background: conic-gradient(*/
/*            var(--primary-200) 0deg 145deg,*/
/*            var(--accent) 145deg 230deg,*/
/*            #7c3aed 230deg 290deg,*/
/*            var(--success) 290deg 360deg*/
/*    );*/
/*    position: relative;*/
/*    margin: 0 auto;*/
/*    box-shadow: 0 8px 24px rgba(26, 108, 246, .25);*/
/*}*/

/*.chart-donut::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    inset: 30px;*/
/*    border-radius: 50%;*/
/*    background: var(--bg-card);*/
/*}*/

/* ─── Sidebar Submenu ────────────────────────── */
.nav-item-has-sub {
    position: relative;
}

.nav-link-parent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, .6);
    font-size: .875rem;
    /*font-weight: 500;*/
    transition: var(--transition);
    cursor: pointer;
    user-select: none;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
}

.nav-link-parent i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.nav-link-parent:hover {
    color: var(--white);
    background: rgba(255, 255, 255, .08);
}

.nav-link-parent.open {
    color: var(--white);
    background: rgba(255, 255, 255, .08);
}

.nav-link-parent.has-active {
    color: var(--white);
}

.nav-chevron {
    margin-left: auto;
    font-size: .75rem;
    line-height: 1;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .2s;
    opacity: .45;
    flex-shrink: 0;
    pointer-events: none;
}

.nav-link-parent.open .nav-chevron {
    transform: rotate(90deg);
    opacity: 1;
}

/* submenu slide container */
.nav-submenu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .32s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}

.nav-submenu.open {
    max-height: 500px;
    opacity: 1;
}

.nav-sub-item {
    margin: 2px 10px 2px 22px;
}

.nav-sub-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, .5);
    font-size: .825rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    position: relative;
}

/*.nav-sub-link::before {*/
/*    content: '';*/
/*    width: 5px;*/
/*    height: 5px;*/
/*    border-radius: 50%;*/
/*    background: rgba(255, 255, 255, .3);*/
/*    flex-shrink: 0;*/
/*    transition: var(--transition);*/
/*}*/

.nav-sub-link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, .07);
}

.nav-sub-link:hover::before {
    background: var(--accent);
}

.nav-sub-link.active {
    color: var(--accent);
    background: rgba(0, 194, 255, .1);
    font-weight: 600;
}

.nav-sub-link.active::before {
    background: var(--accent);
    /*box-shadow: 0 0 6px var(--accent);*/
}

.nav-sub-link .sub-badge {
    margin-left: auto;
    font-size: .62rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .7);
    padding: 1px 6px;
    border-radius: 99px;
}

.nav-sub-link.active .sub-badge {
    /*background: rgba(0, 194, 255, .25);*/
    /*color: var(--accent);*/
}

/* ─── Toggle / Sidebar Collapsed (desktop) ───── */
body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}

body.sidebar-collapsed .topbar {
    left: 0;
}

body.sidebar-collapsed .main-content {
    margin-left: 0;
}

/* ─── Sidebar Overlay (mobile) ──────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(13, 31, 78, .45);
    z-index: 1039;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: opacity .22s;
}

.sidebar-overlay.active {
    display: block;
}

/* ─── Responsive — Tablet & Mobile ───────────── */
@media (max-width: 991.98px) {
    /* Sidebar slides off-screen by default */
    .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
        z-index: 1050;
    }

    .sidebar.show {
        transform: translateX(0);
        box-shadow: 0.5rem 0 2.5rem rgba(13, 31, 78, .35);
    }

    /* Topbar always starts at left:0 on mobile */
    .topbar {
        left: 0 !important;
        padding: 0 16px;
        /*gap: 10px;*/
    }

    /* Main content always full width */
    .main-content {
        margin-left: 0;
    }

    .page-content {
        padding: 1.5rem 1rem;
    }

    /* Search input narrower */
    .topbar-search input {
        /*width: 180px;*/
    }

    .topbar-search input:focus {
        /*width: 220px;*/
    }

    /* Toggle button — more prominent on mobile */
    .btn-sidebar-toggle {
        width: 2.5rem;
        height: 2.5rem;
        background: var(--iimaBlue);
        color: var(--iimaAccent);
        /*border: 1.5px solid var(--border-active);*/
        border-radius: var(--radius-sm);
        font-size: 1.15rem;
        flex-shrink: 0;
        display: flex !important;
    }

    .btn-sidebar-toggle:hover {
        background: var(--primary-200);
        color: var(--white);
        border-color: var(--primary-200);
    }
}

/* ─── Responsive — Small Mobile (<576px) ────── */
@media (max-width: 575.98px) {
    .topbar {
        padding: 0 1rem;
        gap: 0.5rem;
    }

    /* Hide search bar on tiny screens */
    .topbar-search {
        display: none;
    }

    /* Hide less critical topbar icons on very small screens */
    .topbar-icon-btn.d-sm-hide {
        display: none;
    }

    .page-content {
        padding: 1rem;
    }

    /* Stat cards — 2 column grid */
    .stat-card .stat-value {
        /*font-size: 1.6rem;*/
    }

    /* Brand name compact */
    .brand-name {
        /*font-size: 1rem;*/
    }

    /* Page title smaller */
    .page-title {
        /*font-size: 1.25rem;*/
    }

}

/* ─── Responsive — Extra Small (<400px) ─────── */
@media (max-width: 399.98px) {
    .topbar-icon-btn:not(:last-of-type) {
        display: none;
    }

    .topbar-right {
        gap: 4px;
    }

    .btn-sidebar-toggle {
        width: 2.5rem;
        height: 2.5rem;
    }
}


/* sarthak added class */
html {
    font-size: inherit !important;
}
.p-4 {
    padding: 1.5rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

/* Equivalent to mx-1 (0.25rem or 4px) */
.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

/* Equivalent to mx-2 (0.5rem or 8px) */
.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

/* Equivalent to my-1 (0.25rem or 4px) */
.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

/* Equivalent to my-2 (0.5rem or 8px) */
.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* --- Level 3 (1rem / 16px) --- */
.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}
.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

/* --- Level 4 (1.5rem / 24px) --- */
.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}
.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* --- Level 5 (3rem / 48px) --- */
.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}
.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.color-project-red {
   color: #ff0000 !important;
}

.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label
 {
    color: #ff0000 !important;
}

select.form-control.input-sm {
    height: 45px;
}
/*
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    height: 50px;
    margin: auto;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
}
  */
  
  
.select2-container--default .select2-selection--single .select2-selection__arrow
{
    height: 50px !important;
}

.select2-container--default .select2-selection--single {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
}

.input-sm+.form-control-feedback
 {
    line-height: 46px;
}

.form-control-feedback{
    line-height: 54px;
}

.has-feedback label~.form-control-feedback
 {
    top: 30px;
}


.btn-lg {
    padding: 10px 16px !important;
    font-size: 16px !important;
    line-height: 1.3333333 !important;
    border-radius: 4px !important;
    width: auto !important;
}

.first.row {
    border: 1px solid var(--grey-300);
    border-radius: 8px;
    padding: 1rem;
}