<!-- Link to Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<!-- Link to Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<style>
@import"https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap";
@import"https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;600;700&display=swap";
@import"https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap";

/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
@layer theme {

    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --color-gray-100: oklch(.967 .003 264.542);
        --color-gray-200: oklch(.928 .006 264.531);
        --color-gray-400: oklch(.707 .022 261.325);
        --color-gray-600: oklch(.446 .03 256.802);
        --color-white: #fff;
        --spacing: .25rem;
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75/1.25);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5/2.25);
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --radius-lg: .5rem;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-font-feature-settings: var(--font-sans--font-feature-settings);
        --default-font-variation-settings: var(--font-sans--font-variation-settings);
        --default-mono-font-family: var(--font-mono);
        --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
        --default-mono-font-variation-settings: var(--font-mono--font-variation-settings)
    }
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        -moz-tab-size: 4;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    body {
        line-height: inherit;
        background: aliceblue;
        font-family: 'Cairo', Tajawal, sans-serif
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

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

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

    img,
    video {
        max-width: 100%;
        height: auto
    }

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1;
        color: color-mix(in oklab, currentColor 50%, transparent)
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button
    }

    ::file-selector-button {
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .pointer-events-none {
        pointer-events: none
    }

    .absolute {
        position: absolute
    }

    .relative {
        position: relative
    }

    .inset-0 {
        inset: calc(var(--spacing)*0)
    }

    .top-1\/2 {
        top: 50%
    }

    .right-0 {
        right: calc(var(--spacing)*0)
    }

    .-bottom-\[80px\] {
        bottom: -80px
    }

    .bottom-\[-2px\] {
        bottom: -2px
    }

    .left-0 {
        left: calc(var(--spacing)*0)
    }

    .left-3 {
        left: calc(var(--spacing)*3)
    }

    .z-10 {
        z-index: 10
    }

    .z-20 {
        z-index: 20
    }

    .col-span-2 {
        grid-column: span 2/span 2
    }

    .col-span-6 {
        grid-column: span 6/span 6
    }

    .mx-1 {
        margin-inline: calc(var(--spacing)*1)
    }

    .mx-auto {
        margin-inline: auto
    }

    .mt-1 {
        margin-top: calc(var(--spacing)*1)
    }

    .mt-2 {
        margin-top: calc(var(--spacing)*2)
    }

    .mt-3 {
        margin-top: calc(var(--spacing)*3)
    }

    .mt-\[11px\] {
        margin-top: 11px
    }

    .mt-\[90px\] {
        margin-top: 90px
    }

    .mr-2 {
        margin-right: calc(var(--spacing)*2)
    }

    .mb-2 {
        margin-bottom: calc(var(--spacing)*2)
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing)*4)
    }

    .mb-5 {
        margin-bottom: calc(var(--spacing)*5)
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing)*8)
    }

    .block {
        display: block
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .h-5 {
        height: calc(var(--spacing)*5)
    }

    .h-8 {
        height: calc(var(--spacing)*8)
    }

    .h-10 {
        height: calc(var(--spacing)*10)
    }

    .h-24 {
        height: calc(var(--spacing)*24)
    }

    .h-32 {
        height: calc(var(--spacing)*32)
    }

    .h-\[15px\] {
        height: 15px
    }

    .h-\[22px\] {
        height: 22px
    }

    .h-\[32px\] {
        height: 32px
    }

    .h-\[45px\] {
        height: 45px
    }

    .h-\[67px\] {
        height: 67px
    }

    .h-\[121px\] {
        height: 121px
    }

    .h-\[200px\] {
        height: 200px
    }

    .h-full {
        height: 100%
    }

    .min-h-screen {
        min-height: 100vh
    }

    .w-1\/2 {
        width: 50%
    }

    .w-5 {
        width: calc(var(--spacing)*5)
    }

    .w-8 {
        width: calc(var(--spacing)*8)
    }

    .w-\[1px\] {
        width: 1px
    }

    .w-\[15px\] {
        width: 15px
    }

    .w-\[32px\] {
        width: 32px
    }

    .w-\[50\%\] {
        width: 50%
    }

    .w-\[80\%\] {
        width: 80%
    }

    .w-fit {
        width: fit-content
    }

    .w-full {
        width: 100%
    }

    .-translate-y-1\/2 {
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .-translate-y-\[10px\] {
        --tw-translate-y: -10px;
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .-translate-y-\[12px\] {
        --tw-translate-y: -12px;
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .-translate-y-\[18px\] {
        --tw-translate-y: -18px;
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .resize-none {
        resize: none
    }

    .appearance-none {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .flex-col {
        flex-direction: column
    }

    .items-center {
        align-items: center
    }

    .justify-between {
        justify-content: space-between
    }

    .justify-center {
        justify-content: center
    }

    .justify-start {
        justify-content: flex-start
    }

    .gap-1 {
        gap: calc(var(--spacing)*1)
    }

    .gap-2 {
        gap: calc(var(--spacing)*2)
    }

    .gap-3 {
        gap: calc(var(--spacing)*3)
    }

    .gap-4 {
        gap: calc(var(--spacing)*4)
    }

    .gap-6 {
        gap: calc(var(--spacing)*6)
    }

    :where(.space-y-1>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))
    }

    .rounded {
        border-radius: .25rem
    }

    .rounded-full {
        border-radius: 3.40282e38px
    }

    .rounded-lg {
        border-radius: var(--radius-lg)
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-b {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }

    .border-\[\#68A7F0\] {
        border-color: var(--blue-color, #7e6445)
    }
    .border-\[\var(--red-500)\] {
        border-color: var(--red-500)
    }

    .border-\[\#E7E7E7\] {
        border-color: #e7e7e7
    }

    .border-gray-200 {
        border-color: var(--color-gray-200)
    }

    .bg-\[\#68A7F0\] {
        background-color: var(--blue-color, #7e6445)
    }
    .bg-\[\#36C323\] {
        background-color: #36C323
    }
    .bg-\[\var(--neutral-50)\] {
        background-color: #ebecf1bd
    }

    .bg-\[\#D9D9D9\] {
        background-color: #d9d9d9
    }

    .bg-\[\var(--neutral-50)\] {
        background-color: #ebecf1bd
    }

    .bg-\[\#F5F5F5\] {
        background-color: #f5f5f5
    }

    .bg-\[\#F7F7F7\] {
        background-color: #f7f7f7
    }

    .bg-\[\#fafafa\] {
        background-color: #fafafa
    }

    .bg-gray-100 {
        background-color: var(--color-gray-100)
    }

    .bg-white {
        background-color: var(--color-white)
    }

    .bg-cover {
        background-size: cover
    }

    .bg-center {
        background-position: 50%
    }

    .p-2 {
        padding: calc(var(--spacing)*2)
    }

    .p-3 {
        padding: calc(var(--spacing)*3)
    }

    .p-8 {
        padding: calc(var(--spacing)*8)
    }

    .p-\[7px_47px\] {
        padding: 7px 47px
    }

    .px-3 {
        padding-inline: calc(var(--spacing)*3)
    }

    .px-4 {
        padding-inline: calc(var(--spacing)*4)
    }

    .px-6 {
        padding-inline: calc(var(--spacing)*6)
    }

    .py-2 {
        padding-block: calc(var(--spacing)*2)
    }

    .pt-4 {
        padding-top: calc(var(--spacing)*4)
    }

    .text-right {
        text-align: right
    }

    .font-sans {
        font-family: var(--font-sans)
    }

    .text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading, var(--text-4xl--line-height))
    }

    .text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading, var(--text-lg--line-height))
    }

    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height))
    }

    .text-xl {
        font-size: var(--text-xl);
        line-height: var(--tw-leading, var(--text-xl--line-height))
    }

    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .text-\[\#1B1B1B\] {
        color: #1b1b1b
    }

    .text-\[\#68A7F0\] {
        color: var(--blue-color, #7e6445)
    }

    .text-\[\#0066FF\] {
        color: #06f
    }

    .text-\[\var(--neutral-700)\] {
        color: var(--neutral-700)
    }

    .text-gray-400 {
        color: var(--color-gray-400)
    }

    .text-gray-600 {
        color: var(--color-gray-600)
    }

    .text-white {
        color: var(--color-white)
    }

    .italic {
        font-style: italic
    }

    .underline {
        text-decoration-line: underline
    }

    .opacity-70 {
        opacity: .7
    }

    .opacity-100 {
        opacity: 1
    }

    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .ring {
        --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color, currentColor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .transition-colors {
        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    @media (hover:hover) {
        .hover\:bg-\[\#4A8FE0\]:hover {
            background-color: #4A8FE0
        }

        .hover\:bg-\[\#68A7F0\]:hover {
            background-color: var(--blue-color, #7e6445)
        }

        .hover\:bg-gray-100:hover {
            background-color: var(--color-gray-100)
        }

        .hover\:bg-gray-200:hover {
            background-color: var(--color-gray-200)
        }

        .hover\:bg-white\/50:hover {
            background-color: color-mix(in oklab, var(--color-white)50%, transparent)
        }

        .hover\:text-\[\#1B1B1B\]:hover {
            color: #1b1b1b
        }

        .hover\:text-\[\#4A8FE0\]:hover {
            color: #4A8FE0
        }

        .hover\:text-white:hover {
            color: var(--color-white)
        }

        .hover\:underline:hover {
            text-decoration-line: underline
        }
    }
}

:root {
    --primary-500: var(--brown-500, #8b6e4c);
    --primary-600: var(--brown-600, #7e6445);
    --primary-700: var(--brown-700, #634e36)
}

.text-primary-600 {
    color: var(--primary-600)
}

.text-primary-700 {
    color: var(--primary-700)
}

.bg-primary-600 {
    background-color: var(--primary-600)
}

.bg-primary-700,
.hover\:bg-primary-700:hover {
    background-color: var(--primary-700)
}

.hover\:text-primary-600:hover {
    color: var(--primary-600)
}

.hover\:text-primary-700:hover {
    color: var(--primary-700)
}

.border-primary-600 {
    border-color: var(--primary-600)
}

.focus\:ring-primary-500:focus {
    --tw-ring-color: var(--primary-500)
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

:root {
    /* Primary Colors - Updated to use Brown palette */
    --primary-500: var(--brown-500, #8b6e4c);
    --primary-600: var(--brown-600, #7e6445);
    --primary-700: var(--brown-700, #634e36);
    
    /* Neutral Colors */
    --neutral-50: #f7f7f7;
    --neutral-200: var(--neutral-200);
    --neutral-300: var(--neutral-300);
    --neutral-400: #B19E87;
    --neutral-500: #A28870;
    --neutral-600: #989898;
    --neutral-700: var(--neutral-700);
    --neutral-800: var(--neutral-800);
    --neutral-900: var(--neutral-900);
    
    /* Red Colors - Updated to use Orange palette */
    --red-50: var(--orange-50, #FFDAC6);
    --red-200: var(--orange-200, #FBC096);
    --red-300: var(--orange-300, #E79247);
    --red-400: var(--orange-400, #E7842D);
    --red-500: var(--orange-500, #F27A10);
    --red-600: var(--orange-600, #D76E13);
    --red-700: var(--orange-700, #AA5A21);
    --red-800: var(--orange-800, #8B4B13);
    --red-900: var(--orange-900, #623208);
    
    /* Brown Colors - Complete Scale */
    --brown-50: #f3f1ed;
    --brown-100: #dbd2c8;
    --brown-200: #cabcad;
    --brown-300: #b19e87;
    --brown-400: #a28b70;
    --brown-500: #8b6e4c;
    --brown-600: #7e6445;
    --brown-700: #634e36;
    --brown-800: #4c3d2a;
    --brown-900: #3a2e20;
    
    /* Yellow Colors - Complete Scale */
    --yellow-50: #ECEAA9;
    --yellow-200: #DACE73;
    --yellow-300: #E7D447;
    --yellow-400: #E5D029;
    --yellow-500: #D4CF22;
    --yellow-600: #C3A323;
    --yellow-700: #9CA013;
    --yellow-800: #887A0E;
    --yellow-900: #636006;
    
    /* Orange Colors - Complete Scale */
    --orange-50: #FFDAC6;
    --orange-200: #FBC096;
    --orange-300: #E79247;
    --orange-400: #E7842D;
    --orange-500: #F27A10;
    --orange-600: #D76E13;
    --orange-700: #AA5A21;
    --orange-800: #8B4B13;
    --orange-900: #623208;
    
    /* Legacy Variables (for compatibility) */
    --primary-text: var(--neutral-900);
    --secondary-text: var(--neutral-700);
    --accent-blue: var(--primary-600); /* Now uses brown-600 */
    --accent-primary: var(--primary-600); /* Now uses brown-600 */
    --border-color: var(--neutral-200);
    --bg-hover: var(--neutral-50)
}
main {
    background: #f7f7f7

}

body {
    font-family: Tajawal, sans-serif
}

[dir=rtl] {
    text-align: right
}

.nav-link {
    position: relative;
    transition: color .2s
}
*{
    direction: 'rtl';
}

.nav-link:after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    height: 2px;
    background-color: #0d6efdd6;
    transition: width .2s
}

.nav-link:hover:after {
    width: 100%
}

.btn-hover {
    transition: background-color .2s
}

.btn-hover:hover {
    background-color: var(--bg-hover)
}

@import"https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap";/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
@layer theme {
    :root,:host {
        --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
        --color-gray-100: oklch(.967 .003 264.542);
        --color-gray-200: oklch(.928 .006 264.531);
        --color-gray-400: oklch(.707 .022 261.325);
        --color-gray-600: oklch(.446 .03 256.802);
        --color-white: #fff;
        --spacing: .25rem;
        --container-6xl: 72rem;
        --text-xs: .75rem;
        --text-xs--line-height: calc(1/.75);
        --text-sm: .875rem;
        --text-sm--line-height: calc(1.25/.875);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75/1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75/1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2/1.5);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5/2.25);
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;
        --radius-md: .375rem;
        --radius-lg: .5rem;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
        --default-font-family: var(--font-sans);
        --default-font-feature-settings: var(--font-sans--font-feature-settings);
        --default-font-variation-settings: var(--font-sans--font-variation-settings);
        --default-mono-font-family: var(--font-mono);
        --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
        --default-mono-font-variation-settings: var(--font-mono--font-variation-settings)
    }
}

@layer base {
    *,:after,:before,::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,: host {
        -webkit-text-size-adjust:100%;
        -moz-tab-size: 4;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings,normal);
        font-variation-settings: var(--default-font-variation-settings,normal);
        -webkit-tap-highlight-color: transparent
    }

    body {
        line-height: inherit
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr: where([title]) {
        -webkit-text-decoration:underline dotted;
        text-decoration: underline dotted
    }

    h1,h2,h3,h4,h5,h6 {
        font-size: inherit;
        font-weight: inherit
    }

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

    b,strong {
        font-weight: bolder
    }

    code,kbd,samp,pre {
        font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
        font-feature-settings: var(--default-mono-font-feature-settings,normal);
        font-variation-settings: var(--default-mono-font-variation-settings,normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,ul,menu {
        list-style: none
    }

    img,svg,video,canvas,audio,iframe,embed,object {
        vertical-align: middle;
        display: block
    }

    img,video {
        max-width: 100%;
        height: auto
    }

    button,input,select,optgroup,textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select: is([multiple],[size])) optgroup {
        font-weight:bolder
    }

    :where(select: is([multiple],[size])) optgroup option {
        padding-inline-start:20px
    }

    ::file-selector-button {
        margin-inline-end:4px}

    ::placeholder {
        opacity: 1;
        color: color-mix(in oklab,currentColor 50%,transparent)
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block:0}

    ::-webkit-datetime-edit-year-field {
        padding-block:0}

    ::-webkit-datetime-edit-month-field {
        padding-block:0}

    ::-webkit-datetime-edit-day-field {
        padding-block:0}

    ::-webkit-datetime-edit-hour-field {
        padding-block:0}

    ::-webkit-datetime-edit-minute-field {
        padding-block:0}

    ::-webkit-datetime-edit-second-field {
        padding-block:0}

    ::-webkit-datetime-edit-millisecond-field {
        padding-block:0}

    ::-webkit-datetime-edit-meridiem-field {
        padding-block:0}

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,input: where([type=button],[type=reset],[type=submit]) {
        -webkit-appearance:button;
        -moz-appearance: button;
        appearance: button
    }

    ::file-selector-button {
        -webkit-appearance: button;
        -moz-appearance: button;
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]: where(:not([hidden=until-found])) {
        display:none!important
    }
}

@layer components;@layer utilities {
    .pointer-events-none {
        pointer-events: none
    }

    .absolute {
        position: absolute
    }

    .relative {
        position: relative;
    }

    .inset-0 {
        inset: calc(var(--spacing)*0)
    }

    .top-0 {
        top: calc(var(--spacing)*0)
    }

    .top-1\/2 {
        top: 50%
    }

    .top-3 {
        top: calc(var(--spacing)*3)
    }

    .right-0 {
        right: calc(var(--spacing)*0)
    }

    .right-3 {
        right: calc(var(--spacing)*3)
    }

    .-bottom-\[80px\] {
        bottom: -80px
    }

    .bottom-\[-2px\] {
        bottom: -2px
    }

    .left-0 {
        left: calc(var(--spacing)*0)
    }

    .left-2 {
        left: calc(var(--spacing)*2)
    }

    .left-3 {
        left: calc(var(--spacing)*3)
    }

    .left-4 {
        left: calc(var(--spacing)*4)
    }

    .z-10 {
        z-index: 10
    }

    .z-20 {
        z-index: 20
    }

    .col-span-1 {
        grid-column: span 1/span 1
    }

    .col-span-2 {
        grid-column: span 2/span 2
    }
    .col-span-3 {
        grid-column: span 3/span 3
    }
    .col-span-4 {
        grid-column: span 4/span 4
    }
    .col-span-5 {
        grid-column: span 5/span 5
    }

    .col-span-6 {
        grid-column: span 6/span 6
    }

    .mx-1 {
        margin-inline:calc(var(--spacing)*1)}

    .mx-4 {
        margin-inline: calc(var(--spacing)*4)
    }

    .mx-auto {
        margin-inline:auto}

    .my-6 {
        margin-block:calc(var(--spacing)*6)}

    .mt-1 {
        margin-top: calc(var(--spacing)*1)
    }

    .mt-2 {
        margin-top: calc(var(--spacing)*2)
    }

    .mt-3 {
        margin-top: calc(var(--spacing)*3)
    }

    .mt-4 {
        margin-top: calc(var(--spacing)*4)
    }

    .mt-6 {
        margin-top: calc(var(--spacing)*6)
    }

    .mt-8 {
        margin-top: calc(var(--spacing)*8)
    }

    .mt-\[11px\] {
        margin-top: 11px
    }

    .mt-\[90px\] {
        margin-top: 90px
    }

    .mr-2 {
        margin-right: calc(var(--spacing)*2)
    }

    .mr-auto {
        margin-right: auto
    }

    .mb-2 {
        margin-bottom: calc(var(--spacing)*2)
    }

    .mb-4 {
        margin-bottom: calc(var(--spacing)*4)
    }

    .mb-5 {
        margin-bottom: calc(var(--spacing)*5)
    }

    .mb-6 {
        margin-bottom: calc(var(--spacing)*6)
    }

    .mb-8 {
        margin-bottom: calc(var(--spacing)*8)
    }

    .ml-2 {
        margin-left: calc(var(--spacing)*2)
    }

    .block {
        display: block
    }

    .flex {
        display: flex
    }

    .grid {
        display: grid
    }

    .inline-block {
        display: inline-block
    }

    .table {
        display: table
    }

    .h-4 {
        height: calc(var(--spacing)*4)
    }

    .h-5 {
        height: calc(var(--spacing)*5)
    }

    .h-6 {
        height: calc(var(--spacing)*6)
    }

    .h-8 {
        height: calc(var(--spacing)*8)
    }

    .h-10 {
        height: calc(var(--spacing)*10)
    }

    .h-12 {
        height: calc(var(--spacing)*12)
    }

    .h-24 {
        height: calc(var(--spacing)*24)
    }

    .h-32 {
        height: calc(var(--spacing)*32)
    }

    .h-\[15px\] {
        height: 15px
    }

    .h-\[22px\] {
        height: 22px
    }

    .h-\[27px\] {
        height: 27px
    }

    .h-\[30px\] {
        height: 30px
    }

    .h-\[32px\] {
        height: 32px
    }

    .h-\[45px\] {
        height: 45px
    }

    .h-\[67px\] {
        height: 67px
    }

    .h-\[121px\] {
        height: 121px
    }

    .h-\[200px\] {
        height: 200px
    }

    .h-full {
        height: 100%
    }

    .min-h-\[100px\] {
        min-height: 100px
    }

    .min-h-\[132px\] {
        min-height: 132px
    }

    .min-h-screen {
        min-height: 300px
    }

    .w-1\/2 {
        width: 50%
    }

    .w-4 {
        width: calc(var(--spacing)*4)
    }

    .w-5 {
        width: calc(var(--spacing)*5)
    }

    .w-6 {
        width: calc(var(--spacing)*6)
    }

    .w-8 {
        width: calc(var(--spacing)*8)
    }

    .w-10 {
        width: calc(var(--spacing)*10)
    }

    .w-\[1px\] {
        width: 1px
    }

    .w-\[15px\] {
        width: 15px
    }

    .w-\[30px\] {
        width: 30px
    }

    .w-\[32px\] {
        width: 32px
    }

    .w-\[50\%\] {
        width: 50%
    }

    .w-\[55\%\] {
        width: 55%
    }

    .w-\[80\%\] {
        width: 80%
    }

    .w-\[120px\] {
        width: 120px
    }

    .w-\[148px\] {
        width: 148px
    }

    .w-\[150px\] {
        width: 150px
    }

    .w-\[153px\] {
        width: 153px
    }

    .w-\[160px\] {
        width: 160px
    }

    .w-\[175px\] {
        width: 175px
    }

    .w-\[207px\] {
        width: 207px
    }

    .w-\[230px\] {
        width: 230px
    }

    .w-\[311px\] {
        width: 311px
    }

    .w-fit {
        width: fit-content
    }

    .w-full {
        width: 100%
    }

    .max-w-6xl {
        max-width: var(--container-6xl)
    }

    .border-collapse {
        border-collapse: collapse
    }

    .-translate-y-1\/2 {
        --tw-translate-y: -50% ;
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .-translate-y-\[10px\] {
        --tw-translate-y: -10px ;
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .-translate-y-\[12px\] {
        --tw-translate-y: -12px ;
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .-translate-y-\[18px\] {
        --tw-translate-y: -18px ;
        translate: var(--tw-translate-x)var(--tw-translate-y)
    }

    .rotate-0 {
        rotate: none
    }

    .transform {
        transform: var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)
    }

    .cursor-pointer {
        cursor: pointer
    }

    .resize-none {
        resize: none
    }

    .appearance-none {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1,minmax(0,1fr))
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .grid-cols-6 {
        grid-template-columns: repeat(6,minmax(0,1fr))
    }

    .grid-cols-12 {
        grid-template-columns: repeat(12,minmax(0,1fr))
    }

    .flex-col {
        flex-direction: column
    }

    .items-center {
        align-items: center
    }

    .justify-between {
        justify-content: space-between
    }

    .justify-center {
        justify-content: center
    }

    .justify-end {
        justify-content: flex-end
    }

    .justify-start {
        justify-content: flex-start
    }

    .gap-1 {
        gap: calc(var(--spacing)*1)
    }

    .gap-2 {
        gap: calc(var(--spacing)*2)
    }

    .gap-3 {
        gap: calc(var(--spacing)*3)
    }

    .gap-4 {
        gap: calc(var(--spacing)*4)
    }

    .gap-6 {
        gap: calc(var(--spacing)*6)
    }

    .gap-8 {
        gap: calc(var(--spacing)*8)
    }

    :where(.space-y-1>:not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end: calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))
    }

    .overflow-x-auto {
        overflow-x: auto
    }

    .rounded {
        border-radius: .25rem
    }

    .rounded-full {
        border-radius: 3.40282e38px
    }

    .rounded-lg {
        border-radius: var(--radius-lg)
    }

    .rounded-md {
        border-radius: var(--radius-md)
    }

    .rounded-b-lg {
        border-bottom-right-radius: var(--radius-lg);
        border-bottom-left-radius: var(--radius-lg)
    }

    .border {
        border-style: var(--tw-border-style);
        border-width: 1px
    }

    .border-2 {
        border-style: var(--tw-border-style);
        border-width: 2px
    }

    .border-t {
        border-top-style: var(--tw-border-style);
        border-top-width: 1px
    }

    .border-r {
        border-right-style: var(--tw-border-style);
        border-right-width: 1px
    }

    .border-b {
        border-bottom-style: var(--tw-border-style);
        border-bottom-width: 1px
    }

    .border-\[\#7BB3F5\] {
        border-color: #7BB3F5
    }

    .border-\[\#68A7F0\] {
        border-color: var(--blue-color, #7e6445)
    }

    .border-\[\#13A01C\] {
        border-color: #13a01c
    }

    .border-\[\var(--neutral-800)\] {
        border-color: var(--neutral-800)
    }

    .border-\[\#BC6518\] {
        border-color: #bc6518
    }

    .border-\[\#C3A323\] {
        border-color: #c3a323
    }

    .border-\[\#D5D5D5\] {
        border-color: #d5d5d5
    }

    .border-\[\var(--neutral-200)\] {
        border-color: var(--neutral-200)
    }

    .border-\[\#E4E4E4\] {
        border-color: #e4e4e4
    }

    .border-\[\var(--red-500)\] {
        border-color: var(--red-500)
    }

    .border-\[\#E7E7E7\] {
        border-color: #e7e7e7
    }

    .border-\[\#EBEBEB\] {
        border-color: #ebebeb
    }

    .border-\[\#ECECEC\] {
        border-color: #ececec
    }

    .border-gray-200 {
        border-color: var(--color-gray-200)
    }

    .bg-\[\#7BB3F5\] {
        background-color: #7BB3F5
    }

    .bg-\[\#68A7F0\] {
        background-color: var(--blue-color, #7e6445)
    }

    .bg-\[\#ACECA9\] {
        background-color: #aceca9
    }

    .bg-\[\var(--neutral-300)\] {
        background-color: var(--neutral-300)
    }

    .bg-\[\#D9D9D9\] {
        background-color: #d9d9d9
    }

    .bg-\[\var(--neutral-200)\] {
        background-color: #e5e7f1cf
    }

    .bg-\[\#ECEAA9\] {
        background-color: #eceaa9
    }

    .bg-\[\#F1F1F1\] {
        background-color: #f1f1f1
    }

    .bg-\[\#F2F2F2\] {
        background-color: #f2f2f2
    }

    .bg-\[\#F3F1E9\] {
        background-color: #003be1cf;
    }

    .bg-\[\var(--neutral-50)\] {
         background-color: #ebecf1bd
    }

    .bg-\[\#F5F5F5\] {
        background-color: #f5f5f5
    }

    .bg-\[\#F7F7F7\] {
        background-color: #f7f7f7
    }

    .bg-\[\#FAFAFA\] {
        background-color: #fafafa
    }

    .bg-\[\#FFDAC6\] {
        background-color: #ffdac6
    }

    .bg-\[\#FFFFFF\] {
        background-color: #fff
    }

    .bg-\[\#fafafa\] {
        background-color: #fafafa
    }

    .bg-gray-100 {
        background-color: var(--color-gray-100)
    }

    .bg-transparent {
        background-color: #0000
    }

    .bg-white {
        background-color: var(--color-white)
    }

    .bg-cover {
        background-size: cover
    }

    .bg-center {
        background-position: 50%
    }

    .object-cover {
        object-fit: cover
    }

    .p-2 {
        padding: calc(var(--spacing)*2)
    }

    .p-3 {
        padding: calc(var(--spacing)*3)
    }

    .p-4 {
        padding: calc(var(--spacing)*4)
    }

    .p-6 {
        padding: calc(var(--spacing)*6)
    }

    .p-8 {
        padding: calc(var(--spacing)*8)
    }

    .p-\[7px_47px\] {
        padding: 7px 47px
    }

    .px-2 {
        padding-inline:calc(var(--spacing)*2)}

    .px-3 {
        padding-inline: calc(var(--spacing)*3)
    }

    .px-4 {
        padding-inline:calc(var(--spacing)*4)}

    .px-6 {
        padding-inline: calc(var(--spacing)*6)
    }

    .px-10 {
        padding-inline:calc(var(--spacing)*10)}

    .py-1 {
        padding-block: calc(var(--spacing)*1)
    }

    .py-2 {
        padding-block:calc(var(--spacing)*2)}

    .py-3 {
        padding-block: calc(var(--spacing)*3)
    }

    .py-\[1px\] {
        padding-block: 1px
    }

    .pt-4 {
        padding-top: calc(var(--spacing)*4)
    }

    .pr-4 {
        padding-right: calc(var(--spacing)*4)
    }

    .pr-10 {
        padding-right: calc(var(--spacing)*10)
    }

    .pl-10 {
        padding-left: calc(var(--spacing)*10)
    }

    .text-center {
        text-align: center
    }

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

    .font-sans {
        font-family: var(--font-sans)
    }

    .text-2xl {
        font-size: var(--text-2xl);
        line-height: var(--tw-leading,var(--text-2xl--line-height))
    }

    .text-4xl {
        font-size: var(--text-4xl);
        line-height: var(--tw-leading,var(--text-4xl--line-height))
    }

    .text-lg {
        font-size: var(--text-lg);
        line-height: var(--tw-leading,var(--text-lg--line-height))
    }

    .text-sm {
        font-size: var(--text-sm);
        line-height: var(--tw-leading,var(--text-sm--line-height))
    }

    .text-xl {
        font-size: var(--text-xl);
        line-height: var(--tw-leading,var(--text-xl--line-height))
    }

    .text-xs {
        font-size: var(--text-xs);
        line-height: var(--tw-leading,var(--text-xs--line-height))
    }

    .font-bold {
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold)
    }

    .font-extrabold {
        --tw-font-weight: var(--font-weight-extrabold);
        font-weight: var(--font-weight-extrabold)
    }

    .font-medium {
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium)
    }

    .font-semibold {
        --tw-font-weight: var(--font-weight-semibold);
        font-weight: var(--font-weight-semibold)
    }

    .text-nowrap {
        text-wrap: nowrap
    }

    .text-\[\#1B1B1B\] {
        color: #1b1b1b
    }

    .text-\[\#2F3D4C\] {
        color: #2f3d4c
    }

    .text-\[\#3C3C3C\] {
        color: #3c3c3c
    }

    .text-\[\#7BB3F5\] {
        color: #0f4fcb
    }

    .text-\[\#68A7F0\] {
        color: var(--blue-color, #7e6445)
    }

    .text-\[\#9B9B9B\] {
        color: #9b9b9b
    }

    .text-\[\#0066FF\] {
        color: #06f
    }

    .text-\[\#26262F\] {
        color: #26262f
    }

    .text-\[\var(--neutral-700)\] {
        color: var(--neutral-700)
    }

    .text-\[\var(--neutral-900)\] {
        color: var(--neutral-900)
    }

    .text-\[\#868686\] {
        color: #868686
    }

    .text-\[\#929292\] {
        color: #929292
    }

    .text-gray-400 {
        color: var(--color-gray-400)
    }

    .text-gray-600 {
        color: var(--color-gray-600)
    }

    .text-white {
        color: var(--color-white)
    }
    .text-red {
        color: var(--red-500)
    }

    .italic {
        font-style: italic
    }

    .underline {
        text-decoration-line: underline
    }

    .opacity-70 {
        opacity: .7
    }

    .opacity-100 {
        opacity: 1
    }

    .shadow-sm {
        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .ring {
        --tw-ring-shadow: var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentColor);
        box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)
    }

    .transition-all {
        transition-property: all;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .transition-colors {
        transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;
        transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
        transition-duration: var(--tw-duration,var(--default-transition-duration))
    }

    .duration-300 {
        --tw-duration: .3s;
        transition-duration: .3s
    }

    .outline-none {
        --tw-outline-style: none;
        outline-style: none
    }

    @media (hover: hover) {
        .hover\:bg-\[\#4A8FE0\]:hover {
            background-color:#4A8FE0
        }

        .hover\:bg-\[\#68A7F0\]:hover {
            background-color: var(--blue-color, #7e6445)
        }

        .hover\:bg-gray-100:hover {
            background-color: var(--color-gray-100)
        }

        .hover\:bg-gray-200:hover {
            background-color: var(--color-gray-200)
        }

        .hover\:bg-white\/50:hover {
            background-color: color-mix(in oklab,var(--color-white)50%,transparent)
        }

        .hover\:text-\[\#1B1B1B\]:hover {
            color: #1b1b1b
        }

        .hover\:text-\[\#4A8FE0\]:hover {
            color: #4A8FE0
        }

        .hover\:text-\[\#7BB3F5\]:hover {
            color: #7BB3F5
        }

        .hover\:text-white:hover {
            color: var(--color-white)
        }

        .hover\:underline:hover {
            text-decoration-line: underline
        }
    }

    .focus\: text-\[\#7BB3F5\]:focus {
        color:#7BB3F5
    }

    .focus\: outline-none:focus {
        --tw-outline-style:none;
        outline-style: none
    }

    @media (width>=48rem) {
        .md\: w-\[208px\] {
            width:208px
        }

        .md\:w-\[312px\] {
            width: 312px
        }

        .md\:w-\[324px\] {
            width: 324px
        }

        .md\:w-\[454px\] {
            width: 454px
        }

        .md\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .md\:flex-row-reverse {
            flex-direction: row-reverse
        }
    }
}

:root {
    --primary-500: var(--brown-500, #8b6e4c);
    --primary-600: var(--brown-600, #7e6445);
    --primary-700: var(--brown-700, #634e36)
}

* {
    font-family: 'Cairo', 'Noto Kufi Arabic', Tajawal, sans-serif
}

.text-primary-600 {
    color: var(--primary-600)
}

.text-primary-700 {
    color: var(--primary-700)
}

.bg-primary-600 {
    background-color: var(--primary-600)
}

.bg-primary-700,.hover\:bg-primary-700:hover {
    background-color: var(--primary-700)
}

.hover\:text-primary-600:hover {
    color: var(--primary-600)
}

.hover\:text-primary-700:hover {
    color: var(--primary-700)
}

.border-primary-600 {
    border-color: var(--primary-600)
}

.focus\:ring-primary-500:focus {
    --tw-ring-color: var(--primary-500)
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false;
    initial-value: rotateX(0)
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false;
    initial-value: rotateY(0)
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false;
    initial-value: rotateZ(0)
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false;
    initial-value: skewX(0)
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false;
    initial-value: skewY(0)
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

/* الأساسيات */
.select2-container--default .select2-selection--single {
    background-color: #fafafa !important;
    border: 1px solid #c4c4c4; /* لون الحد */
    border-radius: 0.4rem !important; /* تقريب الزوايا لجعلها دائرية */
    height: 40px !important;  /* الارتفاع */
}

/* نص الاختيار والتباعد */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000; /* لون الخط */
    line-height: 38px !important; /* التنسيق العمودي للنص */
    padding-left: 16px; /* التباعد الأيسر */
    padding-right: 20px; /* التباعد الأيمن */
    text-align: right; /* محاذاة النص لليمين */
}

/* إخفاء السهم الأصلي وإضافة سهم مخصص */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px; /* تعديل الارتفاع */
    width: 30px; /* تعديل العرض */
    right: 10px; /* تباعد من اليمين */
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #fafafa transparent transparent transparent; /* لون السهم */
    border-style: solid; /* النمط */
    border-width: 5px 5px 0 5px; /* الحجم */
    margin-left: -5px; /* التعديل الأفقي لموقع السهم */
}

/* تغيير خلفية القائمة المنسدلة */
.select2-container--default .select2-dropdown {
    border-radius: 8px; /* تقريب زوايا القائمة المنسدلة */
    border: 1px solid #c4c4c4; /* لون وسمك الحد */
}

/* تخصيص الخيارات في القائمة المنسدلة */
.select2-container--default .select2-results__option {
    padding: 6px 20px; /* التباعد الداخلي */
    text-align: right; /* محاذاة النص لليمين */
}


        /* تنسيق الـ Accordion 1*/
        .accordion-header1 {
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .accordion-header1:hover {
            background-color: #e8e4df;
        }
        .accordion-content1 {
            display: none;
            transition: all 0.3s ease;
        }
        .accordion-content1.active {
            display: block;
        }
        .arrow1 {
            transition: transform 0.3s ease;
        }
        .arrow1.active {
            transform: rotate(180deg);
        }
                /* تنسيق الـ Accordion */
        .accordion-header2 {
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .accordion-header2:hover {
            background-color: #e8e4df;
        }
        .accordion-content2 {
            display: none;
            transition: all 0.3s ease;
        }
        .accordion-content2.active {
            display: block;
        }
        .arrow2 {
            transition: transform 0.3s ease;
        }
        .arrow2.active {
            transform: rotate(180deg);
        }
         /* تنسيق الـ Accordion 4 */
         .accordion-header4 {
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .accordion-header4:hover {
            background-color: #e8e4df;
        }
        .accordion-content4 {
            display: none;
            transition: all 0.3s ease;
        }
        .accordion-content4.active {
            display: block;
        }
        .arrow4 {
            transition: transform 0.3s ease;
        }
        .arrow4.active {
            transform: rotate(180deg);
        }
         /* تنسيق الـ Accordion 5 */
         .accordion-header5 {
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .accordion-header5:hover {
            background-color: #e8e4df;
        }
        .accordion-content5 {
            display: none;
            transition: all 0.3s ease;
        }
        .accordion-content5.active {
            display: block;
        }
        .arrow5 {
            transition: transform 0.3s ease;
        }
        .arrow5.active {
            transform: rotate(180deg);
        }

    .approvals-table {
            width: 100%;
            max-width: 1800px;
            margin:8px 0px 57px;
            border-collapse: collapse;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }
        .approvals-table th, .approvals-table td {
            padding: 12px;
            text-align: right;
            border-bottom: 1px solid #ddd;
        }
        .approvals-table th {
            background-color: var(--neutral-50);
            color: #868686;
            font-weight: bold;
        }
        .approvals-table tr:hover {
            background-color: #f1f1f1;
        }
        .action-btn {
            background-color: var(--neutral-50);
            color: black;
            padding: 8px 16px;
            border-radius: 4px;
            text-decoration: none;
            font-size: 14px;
            display: inline-block;
        }
        .action-btn:hover {
            background-color: #2ea01d;
        }


        @media (max-width: 600px) {
            .approvals-table th, .approvals-table td {
                font-size: 14px;
                padding: 8px;
            }
            .action-btn {
                padding: 6px 12px;
                font-size: 12px;
            }
        }

.accordion-container {
  transition: all 0.3s ease;
}

.accordion-container .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-container.active .accordion-content {
  max-height: 2000px; /* قيمة كبيرة بما يكفي لاحتواء المحتوى */
}

.accordion-container .accordion-header {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.accordion-container .accordion-header:hover {
  background-color: #F5F5F5;
}

.accordion-container .accordion-icon {
  transition: transform 0.3s ease;
}

.accordion-container.active .accordion-icon {
  transform: rotate(180deg);
}

/* Material Request Styles */
.accordion-container {
  transition: all 0.3s ease;
}

.accordion-container .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-container.active .accordion-content {
  max-height: 2000px;
}

.accordion-container .accordion-header {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.accordion-container .accordion-header:hover {
  background-color: #F5F5F5;
}

.accordion-container .accordion-icon {
  transition: transform 0.3s ease;
}

.accordion-container.active .accordion-icon {
  transform: rotate(180deg);
}

/* Select2 Customization */
.select2-container--default .select2-selection--single {
  background-color: #fafafa !important;
  border: 1px solid #c4c4c4;
  border-radius: 0.4rem !important;
  height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #000;
  line-height: 38px !important;
  padding-left: 16px;
  padding-right: 20px;
  text-align: right;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  width: 30px;
  right: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #fafafa transparent transparent transparent;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  margin-left: -5px;
}

.select2-container--default .select2-dropdown {
  border-radius: 8px;
  border: 1px solid #c4c4c4;
}

.select2-container--default .select2-results__option {
  padding: 6px 20px;
  text-align: right;
}

/* Table Styles */
.material-request-table {
  width: auto;
  padding: 0 20px;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
}

.material-request-table th,
.material-request-table td {
  padding: 12px;
  text-align: right;
  border-bottom: 1px solid #ddd;
}

.material-request-table th {
  background-color: var(--neutral-300);
  color: #868686;
  font-weight: bold;
}

.material-request-table tr:hover {
  background-color: #f1f1f1;
}

/* Button Styles */
.action-btn {
  background-color: var(--neutral-50);
  color: black;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.action-btn:hover {
  background-color: #2ea01d;
  color: white;
}

/* Responsive Styles */
@media (max-width: 600px) {
  .material-request-table th,
  .material-request-table td {
    font-size: 14px;
    padding: 8px;
  }

  .action-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ============================================
   Material Request Title Icon
   ============================================ */

.material-request-title-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-background, #f3f1ed);
}

.material-request-title-icon i {
  font-size: 16px;
  color: var(--blue-color, #7e6445);
}

/* ============================================
   Material Request Accordion Icon
   ============================================ */

.material-request-accordion-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-background, #f3f1ed);
}

.material-request-accordion-icon i {
  font-size: 14px;
  color: var(--blue-color, #7e6445);
}

/* ============================================
   Material Request List Table Styles
   ============================================ */

/* Material Request List Card Styles */
.material-request-list .card {
  transition: transform 0.2s;
}

.material-request-list .card:hover {
  transform: translateY(-5px);
}

.material-request-list .card-header {
  border-bottom: 2px solid var(--neutral-50);
}

.material-request-list .card-footer {
  border-top: 1px solid var(--neutral-50);
}

.material-request-list .badge {
  font-size: 0.9em;
  padding: 0.5em 1em;
}

/* Material Request Table Base Styles */
.material-request-table .table {
  border-radius: 8px;
  overflow: hidden;
}

.material-request-table .table thead th {
  background-color: var(--neutral-50);
  border-bottom: 2px solid var(--neutral-200);
}

.material-request-table .table tbody tr:hover {
  background-color: var(--neutral-50);
}

.material-request-table .badge {
  font-size: 0.9em;
  padding: 0.5em 1em;
}

/* Table Header Colors - Material Requests List */
.material-request-table #requestsTable1 thead tr,
.material-request-table #requestsTableApproval thead tr,
.material-request-table #requestsTableAllRequests thead tr {
  background-color: var(--accent-header, #a28b70) !important;
}

.material-request-table #requestsTable1 thead th,
.material-request-table #requestsTableApproval thead th,
.material-request-table #requestsTableAllRequests thead th {
  background-color: var(--accent-header, #a28b70) !important;
  color: #FFFFFF !important;
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Table Row Colors - Alternating Pattern */
.material-request-table #requestsTable1 tbody tr:nth-child(odd),
.material-request-table #requestsTableApproval tbody tr:nth-child(odd),
.material-request-table #requestsTableAllRequests tbody tr:nth-child(odd) {
  background-color: #FAFAFA !important;
}

.material-request-table #requestsTable1 tbody tr:nth-child(even),
.material-request-table #requestsTableApproval tbody tr:nth-child(even),
.material-request-table #requestsTableAllRequests tbody tr:nth-child(even) {
  background-color: var(--accent-background, #f3f1ed) !important;
}

/* Table Row Hover Effect */
.material-request-table #requestsTable1 tbody tr:hover,
.material-request-table #requestsTableApproval tbody tr:hover,
.material-request-table #requestsTableAllRequests tbody tr:hover {
  background-color: var(--neutral-200) !important;
  transition: background-color 0.3s ease;
}

/* Table Cell Borders */
.material-request-table #requestsTable1 td,
.material-request-table #requestsTableApproval td,
.material-request-table #requestsTableAllRequests td {
  border-right: 1px solid var(--neutral-200) !important;
}

/* ============================================
   Material Request Filters Section
   ============================================ */

/* Filters Container */
.material-request-filters-container {
  background: var(--accent-background, #f3f1ed);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e9ecef;
}

/* Filters Wrapper */
.material-request-filters-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Add Button */
.material-request-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #F3F1ED;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease;
}

.material-request-add-btn:hover {
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-600) 100%);
  transform: translateY(-2px);
  color: #ffffff;
}

.material-request-add-btn:active {
  transform: translateY(0);
}

/* Search Input Wrapper */
.material-request-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 250px;
  max-width: 400px;
}

.material-request-search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
}

.material-request-search-input {
  width: 100%;
  height: 44px;
  padding: 12px 45px 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Noto Kufi Arabic', 'Cairo', sans-serif;
  background-color: #ffffff;
  color: #212529;
  transition: all 0.3s ease;
  outline: none;
}

.material-request-search-input:focus {
  border-color: var(--primary-600);
  background-color: #ffffff;
}

.material-request-search-input::placeholder {
  color: #adb5bd;
  font-size: 14px;
}

/* Filter Select */
.material-request-filter-select {
  min-width: 140px;
  height: 44px;
  padding: 10px 16px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Noto Kufi Arabic', 'Cairo', sans-serif;
  background-color: #ffffff;
  color: #212529;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 16px center;
  padding-right: 16px;
  padding-left: 40px;
}

.material-request-filter-select:focus {
  border-color: var(--primary-600);
}

.material-request-filter-select:hover {
  border-color: #ced4da;
}

/* Date Input Wrapper */
.material-request-date-wrapper {
  position: relative;
  min-width: 160px;
}

.material-request-date-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
}

.material-request-date-input {
  width: 100%;
  height: 44px;
  padding: 12px 45px 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Noto Kufi Arabic', 'Cairo', sans-serif;
  background-color: #ffffff;
  color: #212529;
  transition: all 0.3s ease;
  outline: none;
  cursor: pointer;
}

.material-request-date-input:focus {
  border-color: var(--primary-600);
}

.material-request-date-input:hover {
  border-color: #ced4da;
}

/* Responsive Design */
@media (max-width: 768px) {
  .material-request-filters-container {
    padding: 16px;
  }

  .material-request-filters-wrapper {
    flex-direction: column;
    gap: 10px;
  }

  .material-request-search-wrapper,
  .material-request-filter-select,
  .material-request-date-wrapper {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .material-request-add-btn {
    width: 100%;
    height: 44px;
  }
}

/* Filter Section Background (Legacy Support) */
.material-request-table .mb-3 {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--neutral-50) 100%) !important;
  border: 1px solid var(--neutral-200);
}

/* Action Button Color */
.material-request-table #requestsTable1 tbody button,
.material-request-table #requestsTableApproval tbody button,
.material-request-table #requestsTableAllRequests tbody button {
  color: var(--primary-600) !important;
}

.material-request-table #requestsTable1 tbody button:hover,
.material-request-table #requestsTableApproval tbody button:hover,
.material-request-table #requestsTableAllRequests tbody button:hover {
  color: var(--primary-700) !important;
}

/* Dark Theme Variables */
:root {
    --dark-bg: #1a1a1a;
    --dark-surface: #2d2d2d;
    --dark-surface-hover: #3d3d3d;
    --dark-text: #ffffff;
    --dark-text-secondary: #b3b3b3;
    --dark-border: #404040;
    --dark-accent: #7BB3F5;
    --dark-accent-hover: #4A8FE0;
}

/* Base Dark Theme Styles */
body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

/* Table Styles */
.material-request-table {
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.material-request-table .table {
    background-color: var(--dark-surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.material-request-table .table thead th {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-bottom: 1px solid var(--dark-border);
}

.material-request-table .table tbody td {
    color: var(--dark-text);
    border-bottom: 1px solid var(--dark-border);
}

.material-request-table .table tbody tr {
    background-color: var(--dark-surface);
}

.material-request-table .table tbody tr:hover {
    background-color: var(--dark-surface-hover);
}

/* Search Bar Styles */
.s_searchbar {
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
}

.s_searchbar .search-query {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

.s_searchbar .btn {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

/* Badge Styles */
.badge {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

.badge.o_tag_color_11 {
    background-color: var(--dark-surface);
    color: var(--dark-text);
}

/* Priority Badge Colors */
.priority-normal {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

.priority-urgent {
    background-color: #4a3c2a;
    color: #ffd700;
    border: 1px solid #4A8FE0;
}

.priority-very-urgent {
    background-color: #3c2a2a;
    color: #ff6b6b;
    border: 1px solid #5a4444;
}

/* Card View Styles */
.material-request-list .card {
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
}

.material-request-list .card-header {
    background-color: var(--dark-surface);
    border-bottom: 1px solid var(--dark-border);
}

.material-request-list .card-body {
    background-color: var(--dark-surface);
}

.material-request-list .card-footer {
    background-color: var(--dark-surface);
    border-top: 1px solid var(--dark-border);
}

/* Pagination Styles */
.pagination .page-link {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

.pagination .page-item.active .page-link {
    background-color: var(--dark-accent);
    border-color: var(--dark-accent);
    color: var(--dark-text);
}

/* Select2 Dark Theme */


.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dark-text) !important;
}

.select2-container--default .select2-dropdown {
    background-color: #fafafa !important;
    border: 1px solid var(--dark-border);
}

.select2-container--default .select2-results__option {
    color: var(--dark-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dark-accent);
    color: var(--dark-text);
}

/* Accordion Dark Theme */
.accordion-header1:hover,
.accordion-header2:hover,
.accordion-header4:hover,
.accordion-header5:hover {
    background-color: var(--dark-surface-hover);
}

.accordion-content1,
.accordion-content2,
.accordion-content4,
.accordion-content5 {
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
}

/* Approvals Table Dark Theme */
.approvals-table {
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
}

.approvals-table th {
    background-color: var(--dark-surface);
    color: var(--dark-text-secondary);
}

.approvals-table td {
    color: var(--dark-text);
    border-bottom: 1px solid var(--dark-border);
}

.approvals-table tr:hover {
    background-color: var(--dark-surface-hover);
}

.action-btn {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

.action-btn:hover {
    background-color: var(--dark-accent);
    color: var(--dark-text);
}

/* Accordion Styles */
.accordion-container {
    border: 1px solid #E4E4E4;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.accordion-header {
    background: var(--accent-header, #a28b70);
    padding: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: #EBEBEB;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-content {
    background-color: #FFFFFF;
    padding: 16px;
}

/* Select2 Customization */
.select2-container--default .select2-selection--single {
    background-color: #F5F5F5 !important;
    border: 1px solid #D5D5D5 !important;
    border-radius: 4px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--neutral-900) !important;
    font-weight: 600 !important;
    text-align: right !important;
    padding-right: 12px !important;
    line-height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}

.select2-dropdown {
    border: 1px solid #D5D5D5 !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #7BB3F5 !important;
}

/* Table Styles */
.table-container {
    border: 1px solid #ECECEC;
    border-radius: 8px;
    overflow: hidden;
}

.table-header {
    background-color: #F5F5F5;
    padding: 12px;
    font-weight: 600;
    color: var(--neutral-900);
}

.table-row {
    border-top: 1px solid #ECECEC;
    padding: 12px;
}

.table-row:nth-child(even) {
    background-color: #FAFAFA;
}

/* Button Styles */
.btn-primary {
    background-color: #136df1f2;
    color: white;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #1761cda8;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    .w-[324px] {
        width: 100%;
    }
}

/* Dark Theme Variables */
:root {
    --dark-bg: #1a1a1a;
    --dark-surface: #2d2d2d;
    --dark-surface-hover: #3d3d3d;
    --dark-text: #ffffff;
    --dark-text-secondary: #b3b3b3;
    --dark-border: #404040;
    --dark-accent: #7BB3F5;
    --dark-accent-hover: #4A8FE0;
}

/* Base Dark Theme Styles */
body {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

/* Table Styles */
.material-request-table {
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.material-request-table .table {
    background-color: var(--dark-surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.material-request-table .table thead th {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border-bottom: 1px solid var(--dark-border);
}

.material-request-table .table tbody td {
    color: var(--dark-text);
    border-bottom: 1px solid var(--dark-border);
}

.material-request-table .table tbody tr {
    background-color: var(--dark-surface);
}

.material-request-table .table tbody tr:hover {
    background-color: var(--dark-surface-hover);
}

/* Search Bar Styles */
.s_searchbar {
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
}

.s_searchbar .search-query {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

.s_searchbar .btn {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

/* Badge Styles */
.badge {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

.badge.o_tag_color_11 {
    background-color: var(--dark-surface);
    color: var(--dark-text);
}

/* Priority Badge Colors */
.priority-normal {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

.priority-urgent {
    background-color: #4a3c2a;
    color: #ffd700;
    border: 1px solid #4A8FE0;
}

.priority-very-urgent {
    background-color: #3c2a2a;
    color: #ff6b6b;
    border: 1px solid #5a4444;
}

/* Card View Styles */
.material-request-list .card {
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
}

.material-request-list .card-header {
    background-color: var(--dark-surface);
    border-bottom: 1px solid var(--dark-border);
}

.material-request-list .card-body {
    background-color: var(--dark-surface);
}

.material-request-list .card-footer {
    background-color: var(--dark-surface);
    border-top: 1px solid var(--dark-border);
}

/* Pagination Styles */
.pagination .page-link {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

.pagination .page-item.active .page-link {
    background-color: var(--dark-accent);
    border-color: var(--dark-accent);
    color: var(--dark-text);
}

/* Select2 Dark Theme */




.select2-container--default .select2-dropdown {
    background-color: #fafafa;
    border: 1px solid var(--dark-border);
}

.select2-container--default .select2-results__option {
    color: var(--dark-text);
    background-color: #f7f7f7;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dark-accent);
    color: var(--dark-text);
}

/* Accordion Dark Theme */
.accordion-header1:hover,
.accordion-header2:hover,
.accordion-header4:hover,
.accordion-header5:hover {
    background-color: var(--dark-surface-hover);
}

.accordion-content1,
.accordion-content2,
.accordion-content4,
.accordion-content5 {
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
}

/* Approvals Table Dark Theme */
.approvals-table {
    background-color: var(--dark-surface);
    border: 1px solid var(--dark-border);
}

.approvals-table th {
    background-color: var(--dark-surface);
    color: var(--dark-text-secondary);
}

.approvals-table td {
    color: var(--dark-text);
    border-bottom: 1px solid var(--dark-border);
}

.approvals-table tr:hover {
    background-color: var(--dark-surface-hover);
}

.action-btn {
    background-color: var(--dark-surface);
    color: var(--dark-text);
    border: 1px solid var(--dark-border);
}

.action-btn:hover {
    background-color: var(--dark-accent);
    color: var(--dark-text);
}