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

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

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

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

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

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

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

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

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

    .opacity-0 {
        opacity: 0
    }

    .opacity-5 {
        opacity: .05
    }

    .opacity-10 {
        opacity: .1
    }
    
    /* Custom size utilities */
    .size-\[35px\] {
        width: 35px;
        height: 35px;
    }

    .opacity-20 {
        opacity: .2
    }

    .opacity-25 {
        opacity: .25
    }

    .opacity-35 {
        opacity: .35
    }

    .opacity-50 {
        opacity: .5
    }

    .opacity-60 {
        opacity: .6
    }

    .opacity-75 {
        opacity: .75
    }

    .opacity-100 {
        opacity: 1
    }


    .order-1 {
        order: 1
    }

    .order-2 {
        order: 2
    }

    .order-3 {
        order: 3
    }


    .order-first {
        order: -9999
    }

    .order-last {
        order: 9999
    }

    .order-none {
        order: 0
    }


    .col-auto {
        grid-column: auto
    }

    .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
    }


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

    .col-start-1 {
        grid-column-start: 1
    }

    .col-start-2 {
        grid-column-start: 2
    }

    .col-start-3 {
        grid-column-start: 3
    }

    .col-start-4 {
        grid-column-start: 4
    }

    .col-start-5 {
        grid-column-start: 5
    }

    .col-start-6 {
        grid-column-start: 6
    }

    .col-start-7 {
        grid-column-start: 7
    }

    .col-start-8 {
        grid-column-start: 8
    }

    .col-start-\[73\] {
        grid-column-start: 73
    }


    .col-start-auto {
        grid-column-start: auto
    }

    .col-end-1 {
        grid-column-end: 1
    }

    .col-end-3 {
        grid-column-end: 3
    }

    .col-end-7 {
        grid-column-end: 7
    }


    .col-end-auto {
        grid-column-end: auto
    }

    /* Spacing Utilities */
    .space-y-0 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse));
    }

    .space-y-1 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
    }

    .space-y-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
    }

    .space-y-3 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
    }

    .space-y-4 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1rem * var(--tw-space-y-reverse));
    }

    .space-y-5 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
    }

    .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
    }

    .space-y-8 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(2rem * var(--tw-space-y-reverse));
    }

    /* Space X utilities */
    .space-x-0 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0px * var(--tw-space-x-reverse));
        margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
    }

    .space-x-1 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.25rem * var(--tw-space-x-reverse));
        margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .space-x-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .space-x-3 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.75rem * var(--tw-space-x-reverse));
        margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .space-x-4 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1rem * var(--tw-space-x-reverse));
        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .space-x-5 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1.25rem * var(--tw-space-x-reverse));
        margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
    }

    .space-x-6 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1.5rem * var(--tw-space-x-reverse));
        margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
    }

    /* Gap utilities */
    .gap-0 {
        gap: 0px;
    }

    .gap-1 {
        gap: 0.25rem;
    }

    .gap-2 {
        gap: 0.5rem;
    }

    .gap-3 {
        gap: 0.75rem;
    }

    .gap-4 {
        gap: 1rem;
    }

    .gap-5 {
        gap: 1.25rem;
    }

    .gap-6 {
        gap: 1.5rem;
    }

    .gap-7\.5 {
        gap: 1.875rem;
    }

    .gap-8 {
        gap: 2rem;
    }

    .gap-y-5 {
        row-gap: 1.25rem;
    }

    /* Additional margin utilities */
    .mb-5 {
        margin-bottom: 1.25rem;
    }

    .mb-6 {
        margin-bottom: 1.5rem;
    }

    .mt-4 {
        margin-top: 1rem;
    }

    .mt-6 {
        margin-top: 1.5rem;
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .my-5 {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
    }

/* Padding Y utilities */
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Padding X utilities */
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

    /* Background gradient utilities */
    .bg-gradient-to-t {
        background-image: linear-gradient(to top, var(--tw-gradient-stops));
    }

    .from-black\/50 {
        --tw-gradient-from: rgba(0, 0, 0, 0.5);
        --tw-gradient-to: rgba(0, 0, 0, 0);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    }

    .via-transparent {
        --tw-gradient-to: rgba(0, 0, 0, 0);
        --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to);
    }

    .to-transparent {
        --tw-gradient-to: transparent;
    }

    /* Position utilities */
    .relative {
        position: relative;
    }

    .absolute {
        position: absolute;
    }

    .inset-0 {
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
    }

    .bottom-4 {
        bottom: 1rem;
    }

    .left-4 {
        left: 1rem;
    }

    /* Height utilities */
    .h-16 {
        height: 4rem;
    }

    .h-20 {
        height: 5rem;
    }

    .h-24 {
        height: 6rem;
    }

    .h-32 {
        height: 8rem;
    }

    .h-40 {
        height: 10rem;
    }

    .h-48 {
        height: 12rem;
    }

    .h-56 {
        height: 14rem;
    }

    .h-64 {
        height: 16rem;
    }

    .h-72 {
        height: 18rem;
    }

    .h-80 {
        height: 20rem;
    }

    .h-96 {
        height: 24rem;
    }

    .h-full {
        height: 100%;
    }

/* Min-height utilities */
.min-h-\[80px\] {
    min-height: 80px;
}

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

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

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

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

    /* Width utilities */
    .w-full {
        width: 100%;
    }

/* Max-width utilities */
.max-w-\[400px\] {
    max-width: 400px;
}

.max-w-\[500px\] {
    max-width: 500px;
}

.max-w-\[600px\] {
    max-width: 600px;
}

.max-w-\[700px\] {
    max-width: 700px;
}

.max-w-\[800px\] {
    max-width: 800px;
}

.max-w-\[900px\] {
    max-width: 900px;
}

.max-w-\[1000px\] {
    max-width: 1000px;
}

    /* Object utilities */
    .object-cover {
        object-fit: cover;
    }


    /* Overflow utilities */
    .overflow-hidden {
        overflow: hidden;
    }

    /* Text utilities */
    .text-white {
        color: rgb(255 255 255);
    }

    .text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .font-bold {
        font-weight: 700;
    }

    /* Custom width utilities */
    .w-\[20px\] {
        width: 20px;
    }

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

    .w-\[40px\] {
        width: 40px;
    }

    .w-\[45px\] {
        width: 45px;
    }

    .w-\[50px\] {
        width: 50px;
    }

    .w-\[60px\] {
        width: 60px;
    }

    .w-\[80px\] {
        width: 80px;
    }

    .w-\[100px\] {
        width: 100px;
    }

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

    .w-\[350px\] {
        width: 350px;
    }

    /* Custom height utilities */
    .h-\[20px\] {
        height: 20px;
    }

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

    .h-\[40px\] {
        height: 40px;
    }

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

    .h-\[50px\] {
        height: 50px;
    }

    /* Custom size utilities */
    .size-\[20px\] {
        width: 20px;
        height: 20px;
    }

    .size-\[30px\] {
        width: 30px;
        height: 30px;
    }

    .size-\[40px\] {
        width: 40px;
        height: 40px;
    }

    .size-\[50px\] {
        width: 50px;
        height: 50px;
    }

    /* Responsive utilities */

    /* Small screens (sm) - 640px and up */
    @media (min-width: 640px) {
        .sm\:grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        .sm\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .sm\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .sm\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .sm\:gap-4 {
            gap: 1rem;
        }
        .sm\:gap-5 {
            gap: 1.25rem;
        }
        .sm\:gap-6 {
            gap: 1.5rem;
        }
    }

    /* Medium screens (md) - 768px and up */
    @media (min-width: 768px) {
        .md\:grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        .md\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .md\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .md\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .md\:grid-cols-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
        .md\:grid-cols-6 {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
        .md\:grid-cols-7 {
            grid-template-columns: repeat(7, minmax(0, 1fr));
        }
        .md\:grid-cols-8 {
            grid-template-columns: repeat(8, minmax(0, 1fr));
        }
        .md\:grid-cols-9 {
            grid-template-columns: repeat(9, minmax(0, 1fr));
        }
        .md\:grid-cols-10 {
            grid-template-columns: repeat(10, minmax(0, 1fr));
        }
        .md\:grid-cols-11 {
            grid-template-columns: repeat(11, minmax(0, 1fr));
        }
        .md\:grid-cols-12 {
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }
        .md\:gap-4 {
            gap: 1rem;
        }
        .md\:gap-5 {
            gap: 1.25rem;
        }
        .md\:gap-6 {
            gap: 1.5rem;
        }
        .md\:gap-8 {
            gap: 2rem;
        }
        .md\:col-span-1 {
            grid-column: span 1/span 1;
        }
        .md\:col-span-2 {
            grid-column: span 2/span 2;
        }
        .md\:col-span-3 {
            grid-column: span 3/span 3;
        }
        .md\:col-span-4 {
            grid-column: span 4/span 4;
        }
        .md\:col-span-5 {
            grid-column: span 5/span 5;
        }
        .md\:col-span-6 {
            grid-column: span 6/span 6;
        }
        .md\:col-span-7 {
            grid-column: span 7/span 7;
        }
        .md\:col-span-8 {
            grid-column: span 8/span 8;
        }
        .md\:col-span-9 {
            grid-column: span 9/span 9;
        }
        .md\:col-span-10 {
            grid-column: span 10/span 10;
        }
        .md\:col-span-11 {
            grid-column: span 11/span 11;
        }
        .md\:col-span-12 {
            grid-column: span 12/span 12;
        }
    }

    /* Large screens (lg) - 1024px and up */
    @media (min-width: 1024px) {
        .lg\:grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        .lg\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .lg\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .lg\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .lg\:grid-cols-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
        .lg\:grid-cols-6 {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
        .lg\:grid-cols-7 {
            grid-template-columns: repeat(7, minmax(0, 1fr));
        }
        .lg\:grid-cols-8 {
            grid-template-columns: repeat(8, minmax(0, 1fr));
        }
        .lg\:grid-cols-9 {
            grid-template-columns: repeat(9, minmax(0, 1fr));
        }
        .lg\:grid-cols-10 {
            grid-template-columns: repeat(10, minmax(0, 1fr));
        }
        .lg\:grid-cols-11 {
            grid-template-columns: repeat(11, minmax(0, 1fr));
        }
        .lg\:grid-cols-12 {
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }
        .lg\:gap-4 {
            gap: 1rem;
        }
        .lg\:gap-5 {
            gap: 1.25rem;
        }
        .lg\:gap-6 {
            gap: 1.5rem;
        }
        .lg\:gap-7 {
            gap: 1.75rem;
        }
        .lg\:gap-7\.5 {
            gap: 1.875rem;
        }
        .lg\:gap-8 {
            gap: 2rem;
        }
        .lg\:gap-y-5 {
            row-gap: 1.25rem;
        }
        .lg\:col-span-1 {
            grid-column: span 1/span 1;
        }
        .lg\:col-span-2 {
            grid-column: span 2/span 2;
        }
        .lg\:col-span-3 {
            grid-column: span 3/span 3;
        }
        .lg\:col-span-4 {
            grid-column: span 4/span 4;
        }
        .lg\:col-span-5 {
            grid-column: span 5/span 5;
        }
        .lg\:col-span-6 {
            grid-column: span 6/span 6;
        }
        .lg\:col-span-7 {
            grid-column: span 7/span 7;
        }
        .lg\:col-span-8 {
            grid-column: span 8/span 8;
        }
        .lg\:col-span-9 {
            grid-column: span 9/span 9;
        }
        .lg\:col-span-10 {
            grid-column: span 10/span 10;
        }
        .lg\:col-span-11 {
            grid-column: span 11/span 11;
        }
        .lg\:col-span-12 {
            grid-column: span 12/span 12;
        }
        .lg\:h-64 {
            height: 16rem;
        }
        .lg\:text-3xl {
            font-size: 1.875rem;
            line-height: 2.25rem;
        }
        .lg\:p-6 {
            padding: 1.5rem;
        }
        .lg\:p-7\.5 {
            padding: 1.875rem;
        }
        .lg\:pt-4 {
            padding-top: 1rem;
        }
    }

    /* Extra large screens (xl) - 1280px and up */
    @media (min-width: 1280px) {
        .xl\:grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        .xl\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .xl\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .xl\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .xl\:grid-cols-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
        .xl\:grid-cols-6 {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
        .xl\:col-span-1 {
            grid-column: span 1/span 1;
        }
        .xl\:col-span-2 {
            grid-column: span 2/span 2;
        }
        .xl\:col-span-3 {
            grid-column: span 3/span 3;
        }
        .xl\:col-span-4 {
            grid-column: span 4/span 4;
        }
        .xl\:col-span-5 {
            grid-column: span 5/span 5;
        }
        .xl\:col-span-6 {
            grid-column: span 6/span 6;
        }
    }

    /* 2XL screens - 1536px and up */
    @media (min-width: 1536px) {
        .\32xl\:grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        .\32xl\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .\32xl\:grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .\32xl\:grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .\32xl\:grid-cols-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
        .\32xl\:grid-cols-6 {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
    }

.channel-stats-bg {
    background-image: url('/assets/media/images/2600x1600/bg-3.png');
}


.select-sm {
    padding-inline-end: 1.625rem;
}
/* Fix for space-y utilities with flex/inline-flex elements */
.space-y-1 > .btn:not(:first-child),
.space-y-2 > .btn:not(:first-child),
.space-y-3 > .btn:not(:first-child),
.space-y-4 > .btn:not(:first-child),
.space-y-5 > .btn:not(:first-child),
.space-y-6 > .btn:not(:first-child) {
    margin-top: var(--space-y-margin);
}

.space-y-1 > .btn { --space-y-margin: 0.25rem; }
.space-y-2 > .btn { --space-y-margin: 0.5rem; }
.space-y-3 > .btn { --space-y-margin: 0.75rem; }
.space-y-4 > .btn { --space-y-margin: 1rem; }
.space-y-5 > .btn { --space-y-margin: 1.25rem; }
.space-y-6 > .btn { --space-y-margin: 1.5rem; }

/* Ensure buttons are full width when needed */
.btn.w-full {
    width: 100%;
}

/* Justify content utilities for flex items */
.justify-start {
    justify-content: flex-start;
}

/* Border Left Utilities */
.border-l-\[5px\] {
    border-left-width: 5px;
}

.border-l-success {
    border-left-color: var(--tw-success, #10B981);
}

.border-l-primary {
    border-left-color: var(--tw-primary, #3B82F6);
}

.border-l-warning {
    border-left-color: var(--tw-warning, #F59E0B);
}

.border-l-danger {
    border-left-color: var(--tw-danger, #EF4444);
}

.border-l-info {
    border-left-color: var(--tw-info, #6366F1);
}


/* Background Gray Utilities */
.bg-gray-50 {
    background-color: #f9fafb;
}

.bg-gray-100 {
    background-color: #f3f4f6;
}

.bg-gray-200 {
    background-color: #e5e7eb;
}

.bg-gray-300 {
    background-color: #d1d5db;
}

.bg-gray-400 {
    background-color: #9ca3af;
}

.bg-gray-500 {
    background-color: #6b7280;
}

.bg-gray-600 {
    background-color: #4b5563;
}

.bg-gray-700 {
    background-color: #374151;
}

.bg-gray-800 {
    background-color: #1f2937;
}

.bg-gray-900 {
    background-color: #111827;
}

/* Hover Background Gray Utilities */
.hover\:bg-gray-50:hover {
    background-color: #f9fafb;
}

.hover\:bg-gray-100:hover {
    background-color: #f3f4f6;
}

.hover\:bg-gray-200:hover {
    background-color: #e5e7eb;
}

.hover\:bg-gray-300:hover {
    background-color: #d1d5db;
}

/* Border Gray Utilities */
.border-gray-50 {
    border-color: #f9fafb;
}

.border-gray-100 {
    border-color: #f3f4f6;
}

.border-gray-200 {
    border-color: #e5e7eb;
}

.border-gray-300 {
    border-color: #d1d5db;
}

.border-gray-400 {
    border-color: #9ca3af;
}

.border-gray-500 {
    border-color: #6b7280;
}

/* Text Gray Utilities */
.text-gray-50 {
    color: #f9fafb;
}

.text-gray-100 {
    color: #f3f4f6;
}

.text-gray-200 {
    color: #e5e7eb;
}

.text-gray-300 {
    color: #d1d5db;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-gray-500 {
    color: #6b7280;
}

.text-gray-600 {
    color: #4b5563;
}

.text-gray-700 {
    color: #374151;
}

.text-gray-800 {
    color: #1f2937;
}

.text-gray-900 {
    color: #111827;
}
/* Additional margin utilities */
.mb-5 {
    margin-bottom: 1.25rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

    /* Border styles for active modules */
    .module-active {
        border-left: 5px solid var(--tw-success, #10B981);
    }

    /* Padding utilities */
    .p-0 {
        padding: 0px;
    }

    .p-1 {
        padding: 0.25rem;
    }

    .p-2 {
        padding: 0.5rem;
    }

    .p-3 {
        padding: 0.75rem;
    }

    .p-4 {
        padding: 1rem;
    }

    .p-5 {
        padding: 1.25rem;
    }

    .p-6 {
        padding: 1.5rem;
    }

    .p-8 {
        padding: 2rem;
    }

    .p-10 {
        padding: 2.5rem;
    }

    .p-12 {
        padding: 3rem;
    }

    /* Padding X (left and right) */
    .px-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .px-1 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .px-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Padding Y (top and bottom) */
    .py-0 {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .py-1 {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .py-3 {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Individual padding utilities */
    .pt-0 {
        padding-top: 0px;
    }

    .pt-1 {
        padding-top: 0.25rem;
    }

    .pt-2 {
        padding-top: 0.5rem;
    }

    .pt-3 {
        padding-top: 0.75rem;
    }

    .pt-4 {
        padding-top: 1rem;
    }

    .pt-5 {
        padding-top: 1.25rem;
    }

    .pt-6 {
        padding-top: 1.5rem;
    }

    .pt-8 {
        padding-top: 2rem;
    }

    .pb-0 {
        padding-bottom: 0px;
    }

    .pb-1 {
        padding-bottom: 0.25rem;
    }

    .pb-2 {
        padding-bottom: 0.5rem;
    }

    .pb-3 {
        padding-bottom: 0.75rem;
    }

    .pb-4 {
        padding-bottom: 1rem;
    }

    .pb-5 {
        padding-bottom: 1.25rem;
    }

    .pb-6 {
        padding-bottom: 1.5rem;
    }

    .pb-8 {
        padding-bottom: 2rem;
    }

    .pl-0 {
        padding-left: 0px;
    }

    .pl-1 {
        padding-left: 0.25rem;
    }

    .pl-2 {
        padding-left: 0.5rem;
    }

    .pl-3 {
        padding-left: 0.75rem;
    }

    .pl-4 {
        padding-left: 1rem;
    }

    .pl-5 {
        padding-left: 1.25rem;
    }

    .pl-6 {
        padding-left: 1.5rem;
    }

    .pl-8 {
        padding-left: 2rem;
    }

    .pl-10 {
        padding-left: 2.5rem;
    }

    .pl-12 {
        padding-left: 3rem;
    }

    .pl-16 {
        padding-left: 4rem;
    }

    .pl-20 {
        padding-left: 5rem;
    }

    .pl-24 {
        padding-left: 6rem;
    }

    .pr-0 {
        padding-right: 0px;
    }

    .pr-1 {
        padding-right: 0.25rem;
    }

    .pr-2 {
        padding-right: 0.5rem;
    }

    .pr-3 {
        padding-right: 0.75rem;
    }

    .pr-4 {
        padding-right: 1rem;
    }

    .pr-5 {
        padding-right: 1.25rem;
    }

    .pr-6 {
        padding-right: 1.5rem;
    }

    .pr-8 {
        padding-right: 2rem;
    }

    .pr-10 {
        padding-right: 2.5rem;
    }

    .pr-12 {
        padding-right: 3rem;
    }

    .pr-16 {
        padding-right: 4rem;
    }

    .pr-20 {
        padding-right: 5rem;
    }

    .pr-24 {
        padding-right: 6rem;
    }

/* Background Red Utilities */
.bg-red-50 {
    background-color: #fef2f2;
}

.bg-red-100 {
    background-color: #fee2e2;
}

.bg-red-200 {
    background-color: #fecaca;
}

/* Border Red Utilities */
.border-red-50 {
    border-color: #fef2f2;
}

.border-red-100 {
    border-color: #fee2e2;
}

.border-red-200 {
    border-color: #fecaca;
}

.border-red-300 {
    border-color: #fca5a5;
}

.border-red-400 {
    border-color: #f87171;
}

.border-red-500 {
    border-color: #ef4444;
}

/* Text Red Utilities */
.text-red-50 {
    color: #fef2f2;
}

.text-red-100 {
    color: #fee2e2;
}

.text-red-200 {
    color: #fecaca;
}

.text-red-300 {
    color: #fca5a5;
}

.text-red-400 {
    color: #f87171;
}

.text-red-500 {
    color: #ef4444;
}

.text-red-600 {
    color: #dc2626;
}

.text-red-700 {
    color: #b91c1c;
}

.text-red-800 {
    color: #991b1b;
}

.text-red-900 {
    color: #7f1d1d;
}

/* Alert Utilities for Success Messages */
.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    border-width: 1px;
}

.alert-success {
    background-color: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}

.alert-success .alert-title {
    font-weight: 600;
    color: #047857;
    margin-bottom: 0.25rem;
}

.alert-success .alert-icon {
    color: #10b981;
}

.alert-danger {
    background-color: #fee2e2;
    border-color: #ef4444;
    color: #7f1d1d;
}

.alert-danger .alert-title {
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 0.25rem;
}

.alert-danger .alert-icon {
    color: #ef4444;
}

/* Background Yellow Utilities */
.bg-yellow-50 {
    background-color: #fefce8;
}

.bg-yellow-100 {
    background-color: #fef9c3;
}

.bg-yellow-200 {
    background-color: #fef08a;
}

/* Background Blue Utilities */
.bg-blue-50 {
    background-color: #eff6ff;
}

.bg-blue-100 {
    background-color: #dbeafe;
}

.bg-blue-200 {
    background-color: #bfdbfe;
}

.bg-blue-600 {
    background-color: #2563eb;
}

.bg-blue-900 {
    background-color: #1e3a8a;
}

/* Background Green Utilities */
.bg-green-50 {
    background-color: #f0fdf4;
}

.bg-green-100 {
    background-color: #dcfce7;
}

.bg-green-200 {
    background-color: #bbf7d0;
}

.bg-green-800 {
    background-color: #166534;
}

.bg-green-900 {
    background-color: #14532d;
}

/* Border Yellow Utilities */
.border-yellow-50 {
    border-color: #fefce8;
}

.border-yellow-100 {
    border-color: #fef9c3;
}

.border-yellow-200 {
    border-color: #fef08a;
}

.border-yellow-300 {
    border-color: #fde047;
}

.border-yellow-600 {
    border-color: #ca8a04;
}

.border-yellow-800 {
    border-color: #854d0e;
}

/* Border Blue Utilities */
.border-blue-50 {
    border-color: #eff6ff;
}

.border-blue-100 {
    border-color: #dbeafe;
}

.border-blue-200 {
    border-color: #bfdbfe;
}

.border-blue-300 {
    border-color: #93c5fd;
}

.border-blue-600 {
    border-color: #2563eb;
}

.border-blue-800 {
    border-color: #1e40af;
}

/* Border Green Utilities */
.border-green-50 {
    border-color: #f0fdf4;
}

.border-green-100 {
    border-color: #dcfce7;
}

.border-green-200 {
    border-color: #bbf7d0;
}

.border-green-300 {
    border-color: #86efac;
}

.border-green-800 {
    border-color: #166534;
}

/* Text Yellow Utilities */
.text-yellow-50 {
    color: #fefce8;
}

.text-yellow-100 {
    color: #fef9c3;
}

.text-yellow-200 {
    color: #fef08a;
}

.text-yellow-300 {
    color: #fde047;
}

.text-yellow-500 {
    color: #eab308;
}

.text-yellow-600 {
    color: #ca8a04;
}

.text-yellow-700 {
    color: #a16207;
}

.text-yellow-800 {
    color: #854d0e;
}

/* Text Blue Utilities */
.text-blue-50 {
    color: #eff6ff;
}

.text-blue-100 {
    color: #dbeafe;
}

.text-blue-200 {
    color: #bfdbfe;
}

.text-blue-300 {
    color: #93c5fd;
}

.text-blue-400 {
    color: #60a5fa;
}

.text-blue-500 {
    color: #3b82f6;
}

.text-blue-600 {
    color: #2563eb;
}

.text-blue-700 {
    color: #1d4ed8;
}

.text-blue-800 {
    color: #1e40af;
}

.text-blue-900 {
    color: #1e3a8a;
}

/* Text Green Utilities */
.text-green-50 {
    color: #f0fdf4;
}

.text-green-100 {
    color: #dcfce7;
}

.text-green-200 {
    color: #bbf7d0;
}

.text-green-300 {
    color: #86efac;
}

.text-green-500 {
    color: #22c55e;
}

.text-green-600 {
    color: #16a34a;
}

.text-green-700 {
    color: #15803d;
}

.text-green-800 {
    color: #166534;
}

.text-green-900 {
    color: #14532d;
}

/* Rounded utilities */
.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-sm {
    border-radius: 0.125rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

/* Text size utilities */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

/* Text align utilities */
.text-left {
    text-align: left;
}

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

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

/* Dark mode background utilities */
.dark .dark\:bg-yellow-900\/20 {
    background-color: rgba(113, 63, 18, 0.2);
}

.dark .dark\:bg-blue-900\/20 {
    background-color: rgba(30, 58, 138, 0.2);
}

.dark .dark\:bg-green-900\/20 {
    background-color: rgba(20, 83, 45, 0.2);
}

.dark .dark\:bg-gray-800 {
    background-color: #1f2937;
}

/* Dark mode text utilities */
.dark .dark\:text-white {
    color: #ffffff;
}

.dark .dark\:text-gray-200 {
    color: #e5e7eb;
}

.dark .dark\:text-gray-300 {
    color: #d1d5db;
}

.dark .dark\:text-gray-400 {
    color: #9ca3af;
}

.dark .dark\:text-blue-200 {
    color: #bfdbfe;
}

.dark .dark\:text-blue-400 {
    color: #60a5fa;
}

.dark .dark\:text-green-200 {
    color: #bbf7d0;
}

/* Dark mode border utilities */
.dark .dark\:border-yellow-800 {
    border-color: #854d0e;
}

.dark .dark\:border-blue-800 {
    border-color: #1e40af;
}

.dark .dark\:border-green-800 {
    border-color: #166534;
}

.dark .dark\:border-gray-700 {
    border-color: #374151;
}

/* Background Purple Utilities */
.bg-purple-50 {
    background-color: #faf5ff;
}

.bg-purple-100 {
    background-color: #f3e8ff;
}

.bg-purple-200 {
    background-color: #e9d5ff;
}

.bg-purple-600 {
    background-color: #9333ea;
}

.bg-purple-900 {
    background-color: #581c87;
}

/* Background Orange Utilities */
.bg-orange-50 {
    background-color: #fff7ed;
}

.bg-orange-100 {
    background-color: #ffedd5;
}

.bg-orange-200 {
    background-color: #fed7aa;
}

.bg-orange-600 {
    background-color: #ea580c;
}

.bg-orange-900 {
    background-color: #7c2d12;
}

/* Border Purple Utilities */
.border-purple-50 {
    border-color: #faf5ff;
}

.border-purple-100 {
    border-color: #f3e8ff;
}

.border-purple-200 {
    border-color: #e9d5ff;
}

.border-purple-300 {
    border-color: #d8b4fe;
}

.border-purple-600 {
    border-color: #9333ea;
}

.border-purple-800 {
    border-color: #6b21a8;
}

/* Border Orange Utilities */
.border-orange-50 {
    border-color: #fff7ed;
}

.border-orange-100 {
    border-color: #ffedd5;
}

.border-orange-200 {
    border-color: #fed7aa;
}

.border-orange-300 {
    border-color: #fdba74;
}

.border-orange-600 {
    border-color: #ea580c;
}

.border-orange-800 {
    border-color: #9a3412;
}

/* Text Purple Utilities */
.text-purple-50 {
    color: #faf5ff;
}

.text-purple-100 {
    color: #f3e8ff;
}

.text-purple-200 {
    color: #e9d5ff;
}

.text-purple-300 {
    color: #d8b4fe;
}

.text-purple-500 {
    color: #a855f7;
}

.text-purple-600 {
    color: #9333ea;
}

.text-purple-700 {
    color: #7e22ce;
}

.text-purple-800 {
    color: #6b21a8;
}

.text-purple-900 {
    color: #581c87;
}

/* Text Orange Utilities */
.text-orange-50 {
    color: #fff7ed;
}

.text-orange-100 {
    color: #ffedd5;
}

.text-orange-200 {
    color: #fed7aa;
}

.text-orange-300 {
    color: #fdba74;
}

.text-orange-500 {
    color: #f97316;
}

.text-orange-600 {
    color: #ea580c;
}

.text-orange-700 {
    color: #c2410c;
}

.text-orange-800 {
    color: #9a3412;
}

.text-orange-900 {
    color: #7c2d12;
}

/* Dark mode purple utilities */
.dark .dark\:bg-purple-900\/20 {
    background-color: rgba(88, 28, 135, 0.2);
}

.dark .dark\:text-purple-200 {
    color: #e9d5ff;
}

.dark .dark\:text-purple-400 {
    color: #c084fc;
}

.dark .dark\:border-purple-800 {
    border-color: #6b21a8;
}

/* Dark mode orange utilities */
.dark .dark\:bg-orange-900\/20 {
    background-color: rgba(124, 45, 18, 0.2);
}

.dark .dark\:text-orange-200 {
    color: #fed7aa;
}

.dark .dark\:text-orange-400 {
    color: #fb923c;
}

.dark .dark\:border-orange-800 {
    border-color: #9a3412;
}