:root {
    /* Yellow */
    /* --yellow-50: #FFF4EB;
    --yellow-100: #fef3c7;
    --yellow-200: #fde68a;
    --yellow-300: #fcd34d;
    --yellow-400: #FF6A00;
    --yellow-500: #ffcc00;
    --yellow-600: #d9ae00;
    --yellow-700: #b38f00;
    --yellow-800: #8c7100;
    --yellow-900: #665200; */

    --yellow-50:  #FFF4EB;
    --yellow-100: #FFE7D1;
    --yellow-200: #FFD0A3;
    --yellow-300: #FFB570;
    --yellow-400: #FF9133;
    --yellow-500: #FF6A00; /* Primary */
    --yellow-600: #E65F00;
    --yellow-700: #CC5500;
    --yellow-800: #A34400;
    --yellow-900: #7A3300;

    /* Gray / Dark */
    --gray-50: #f1f3f5;
    --gray-100: #e2e6ea;
    --gray-200: #c5cdd5;
    --gray-300: #3f3f3feb;
    /* --gray-300: #8d9bad; */
    --gray-400: #4a5568;
    --gray-500: #0f1b2d;
    --gray-600: #0d1828;
    --gray-700: #0a121e;
    --gray-800: #070d15;
    --gray-900: #04070b;

    /* Green */
    --green-50: #ecfdf5;
    --green-100: #d1fae5;
    --green-200: #a7f3d0;
    --green-300: #6ee7b7;
    --green-400: #34d399;
    --green-500: #10b981;
    --green-600: #059669;
    --green-700: #047857;
    --green-800: #065f46;
    --green-900: #064e3b;

    /* Blue */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;

    /* Red */
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;

}

html,
body {
    scroll-behavior: smooth;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    background-color: #FBFBFE;
}

.scrollbar-none {
    scrollbar-width: none;
}

.scrollbar-thin {
    scrollbar-width: thin;
}

button {
    cursor: pointer;
}

.hidden {
    display: none !important;
}


.custom-textarea,
.custom-input {
    border: 1px solid #e2e8f0;
    border-radius: 25px;
    padding: 8px 16px;
    height: 48px;
    outline: none;
    transition: .2s linear;
    font-size: 15px;
    padding-left: 44px;
}

.custom-textarea {
    border-radius: 8px;
    padding-left: 16px;
}

.custom-textarea:focus,
.custom-input:focus {
    border: 1px solid var(--yellow-400);
    background: var(--yellow-50);
}

.custom-textarea:focus::placeholder,
.custom-input:focus::placeholder {
    color: transparent;
}

.custom-textarea::placeholder,
.custom-input::placeholder {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: -0.02em;
    color: var(--gray-300);
}

input:focus::placeholder {
    color: transparent;
}

/* custom dropdown */
.dropdown-menu {
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}


.dropdown-menu.active {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
}

/* custom__active */
.custom__active {
    border: 1px solid var(--yellow-400) !important;
    background: var(--yellow-50) !important;
    color: var(--yellow-400) !important;
}


/* Scroll bar */
::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--gray-50);
}

::-webkit-scrollbar-thumb {
    background: var(--yellow-400);
    border-radius: 50px;
    border-radius: 50px;
    transition: .2s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--yellow-400);
}


/* backdrop */
.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='rotate(45 16 16)'><circle cx='16' cy='16' r='1.5' fill='white' stroke='black' stroke-width='0.5'/><line x1='16' y1='0' x2='16' y2='32' stroke='white' stroke-width='2' stroke-linecap='round'/><line x1='0' y1='16' x2='32' y2='16' stroke='white' stroke-width='2' stroke-linecap='round'/><line x1='16' y1='0' x2='16' y2='32' stroke='white' stroke-width='0.5' stroke-linecap='round'/><line x1='0' y1='16' x2='32' y2='16' stroke='white' stroke-width='0.5' stroke-linecap='round'/></g></svg>") 16 16, crosshair;
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 10;
}

.backdrop.active {
    opacity: 1;
    visibility: visible;
}



.tab-btn a,
.tab-btn button {
    font-weight: 500;
    font-size: 16px;
    color: var(--gray-300);
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: 100px;
    transition: .2s linear;
    white-space: nowrap;
}

.tab-btn a:hover,
.tab-btn button:hover {
    background: var(--gray-50);
}



/*=========== dashbord table ==========*/
.dashbord-table table thead tr th {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--gray-300);
    padding: 16px;
    text-align: start;
}

.dashbord-table table tbody tr td {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: var(--gray-300);
    padding: 21px 16px;
}

.dashbord-table table tbody tr td.id-no {
    color: var(--gray-500);
}




/* ========modal========= */
.modal_container {
    display: none;
    position: fixed;
    inset: 0;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 0 8px;
}

.modal_container.active {
    display: flex;
}

.modal_backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g transform='rotate(45 16 16)'><circle cx='16' cy='16' r='1.5' fill='white' stroke='black' stroke-width='0.5'/><line x1='16' y1='0' x2='16' y2='32' stroke='white' stroke-width='2' stroke-linecap='round'/><line x1='0' y1='16' x2='32' y2='16' stroke='white' stroke-width='2' stroke-linecap='round'/><line x1='16' y1='0' x2='16' y2='32' stroke='white' stroke-width='0.5' stroke-linecap='round'/><line x1='0' y1='16' x2='32' y2='16' stroke='white' stroke-width='0.5' stroke-linecap='round'/></g></svg>") 16 16, crosshair;
    backdrop-filter: blur(2px);
}

.modal_content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    width: max-content;
    height: max-content;
    z-index: 10;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.3s ease;
}


.modal_container.active .modal_content {
    opacity: 1;
    transform: scale(1);
}

/* .modal_content form {
    height: max-content;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-shade-2-200) transparent;
} */