﻿@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    /* ===== Off Green ===== */
    --green-off-900: #02130d;
    --green-off-800: #03251a;
    --green-off-700: #053827;
    --green-off-600: #064a34;
    --green-off-500: #085d41;
    --green-off-400: #0a6f4d;
    --green-off-300: #0b825a;
    --green-off-200: #0d9467;
    --green-off-100: #0ea774;
    /* Light / Accent Off Greens */
    --green-off-50: #28c08e;
    --green-off-40: #40c79a;
    --green-off-30: #58cea7;
    --green-off-20: #70d5b3;
    --green-off-10: #88dcc0;
    --green-off-5: #9fe3cd;
    --green-off-4: #b7ead9;
    --green-off-3: #cff1e6;
    --green-off-2: #e7f8f2;
}

/* ********************************************** ADD THE COMMON STYLES HERE *********************************************/
* {
    font-family: "Fira Sans", sans-serif !important;
    scrollbar-color: #6b7280 #e5e7eb; /* Firefox */
}

/****DISPLAY****/

.d-none-native {
    display: none;
}

.d-flex-native {
    display: flex;
}

@media (min-width: 576px) {
    .d-sm-none-native {
        display: none;
    }

    .d-sm-flex-native {
        display: flex;
    }
}

@media (min-width: 768px) {
    .d-md-none-native {
        display: none;
    }

    .d-md-flex-native {
        display: flex;
    }
}

@media (min-width: 992px) {
    .d-lg-none-native {
        display: none;
    }

    .d-lg-flex-native {
        display: flex;
    }
}

@media (min-width: 1200px) {
    .d-xl-none-native {
        display: none;
    }

    .d-xl-flex-native {
        display: flex;
    }
}


/* Common Max-Width Classes */
.max-w-10{
    max-width:10rem;
}

.max-w-xs {
    max-width: 320px;
}

.max-w-sm {
    max-width: 384px;
}

.max-w-md {
    max-width: 448px;
}

.max-w-lg {
    max-width: 512px;
}

.max-w-xl {
    max-width: 576px;
}

.max-w-2xl {
    max-width: 672px;
}

.max-w-3xl {
    max-width: 768px;
}

.max-w-4xl {
    max-width: 896px;
}

.max-w-5xl {
    max-width: 1024px;
}

.max-w-6xl {
    max-width: 1152px;
}

.max-w-7xl {
    max-width: 1280px;
}

.max-w-full {
    max-width: 100%;
}

.max-w-screen-sm {
    max-width: 640px;
}

.max-w-screen-md {
    max-width: 768px;
}

.max-w-screen-lg {
    max-width: 1024px;
}

.max-w-screen-xl {
    max-width: 1280px;
}

.max-w-screen-2xl {
    max-width: 1536px;
}

.min-w-2 {
    min-width: 2rem;
}

.min-w-xs {
    min-width: 320px;
}

.min-w-sm {
    min-width: 384px;
}

.min-w-md {
    min-width: 448px;
}

.min-w-lg {
    min-width: 512px;
}

.min-w-xl {
    min-width: 576px;
}

.min-w-2xl {
    min-width: 672px;
}

.min-w-3xl {
    min-width: 768px;
}

.min-w-4xl {
    min-width: 896px;
}

.min-w-5xl {
    min-width: 1024px;
}

.min-w-6xl {
    min-width: 1152px;
}

.min-w-7xl {
    min-width: 1280px;
}

.min-w-full {
    min-width: 100%;
}

.min-w-screen-sm {
    min-width: 640px;
}

.min-w-screen-md {
    min-width: 768px;
}

.min-w-screen-lg {
    min-width: 1024px;
}

.min-w-screen-xl {
    min-width: 1280px;
}

.min-w-screen-2xl {
    min-width: 1536px;
}


.max-h-xs {
    max-height: 320px;
}

.max-h-sm {
    max-height: 384px;
}

.max-h-md {
    max-height: 448px;
}

.max-h-lg {
    max-height: 512px;
}

.max-h-xl {
    max-height: 576px;
}

.max-h-2xl {
    max-height: 672px;
}

.max-h-3xl {
    max-height: 768px;
}

.max-h-4xl {
    max-height: 896px;
}

.max-h-5xl {
    max-height: 1024px;
}

.max-h-6xl {
    max-height: 1152px;
}

.max-h-7xl {
    max-height: 1280px;
}

.max-h-full {
    max-height: 100%;
}

.max-h-screen-sm {
    max-height: 640px;
}

.max-h-screen-md {
    max-height: 768px;
}

.max-h-screen-lg {
    max-height: 1024px;
}

.max-h-screen-xl {
    max-height: 1280px;
}

.max-h-screen-2xl {
    max-height: 1536px;
}

.h-fit-content {
    height: fit-content
}

.w-fit-content {
    width: fit-content
}

/* Common Background Gray Classes */
.bg-gray-50 {
    background-color: #f9fafb;
}
/* Lightest Gray */
.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;
}
/* Neutral Gray */
.bg-gray-600 {
    background-color: #4b5563;
}

.bg-gray-700 {
    background-color: #374151;
}

.bg-gray-800 {
    background-color: #1f2937;
}

.bg-gray-900 {
    background-color: #111827;
}

/* Common Sky Background Classes */
.bg-sky-50 {
    background-color: #f0f9ff; /* Very light sky */
}

.bg-sky-100 {
    background-color: #e0f2fe; /* Light sky */
}

.bg-sky-200 {
    background-color: #bae6fd; /* Pale sky */
}

.bg-sky-300 {
    background-color: #7dd3fc; /* Soft sky */
}

.bg-sky-400 {
    background-color: #38bdf8; /* Medium sky */
}

.bg-sky-500 {
    background-color: #0ea5e9; /* Default sky blue */
}

.bg-sky-600 {
    background-color: #0284c7; /* Darker sky */
}

.bg-sky-700 {
    background-color: #0369a1; /* Deep sky */
}

.bg-sky-800 {
    background-color: #075985; /* Navy-sky */
}

.bg-sky-900 {
    background-color: #0c4a6e; /* Very dark sky */
}


/* Common Amber Background Classes */
.bg-amber-50 {
    background-color: #fffbeb; /* Very light amber */
}

.bg-amber-100 {
    background-color: #fef3c7; /* Light amber */
}

.bg-amber-200 {
    background-color: #fde68a; /* Pale amber */
}

.bg-amber-300 {
    background-color: #fcd34d; /* Soft amber */
}

.bg-amber-400 {
    background-color: #fbbf24; /* Medium amber */
}

.bg-amber-500 {
    background-color: #f59e0b; /* Default amber */
}

.bg-amber-600 {
    background-color: #d97706; /* Darker amber */
}

.bg-amber-700 {
    background-color: #b45309; /* Deep amber */
}

.bg-amber-800 {
    background-color: #92400e; /* Dark amber */
}

.bg-amber-900 {
    background-color: #78350f; /* Very dark amber */
}

/* Common Orange Background Classes */
.bg-orange-50 {
    background-color: #fff7ed; /* Very light orange */
}

.bg-orange-100 {
    background-color: #ffedd5; /* Light orange */
}

.bg-orange-200 {
    background-color: #fed7aa; /* Pale orange */
}

.bg-orange-300 {
    background-color: #fdba74; /* Soft orange */
}

.bg-orange-400 {
    background-color: #fb923c; /* Medium orange */
}

.bg-orange-500 {
    background-color: #f97316; /* Default orange */
}

.bg-orange-600 {
    background-color: #ea580c; /* Darker orange */
}

.bg-orange-700 {
    background-color: #c2410c; /* Deep orange */
}

.bg-orange-800 {
    background-color: #9a3412; /* Dark orange */
}

.bg-orange-900 {
    background-color: #7c2d12; /* Very dark orange */
}



/* Common Background Green Classes */
/* Off Green */
.bg-green-off-900 {
    background-color: var(--green-off-900);
}

.bg-green-off-800 {
    background-color: var(--green-off-800);
}

.bg-green-off-700 {
    background-color: var(--green-off-700);
}

.bg-green-off-600 {
    background-color: var(--green-off-600);
}

.bg-green-off-500 {
    background-color: var(--green-off-500);
}

.bg-green-off-400 {
    background-color: var(--green-off-400);
}

.bg-green-off-300 {
    background-color: var(--green-off-300);
}

.bg-green-off-200 {
    background-color: var(--green-off-200);
}

.bg-green-off-100 {
    background-color: var(--green-off-100);
}

/* Light Off Greens */
.bg-green-off-50 {
    background-color: var(--green-off-50);
}

.bg-green-off-40 {
    background-color: var(--green-off-40);
}

.bg-green-off-30 {
    background-color: var(--green-off-30);
}

.bg-green-off-20 {
    background-color: var(--green-off-20);
}

.bg-green-off-10 {
    background-color: var(--green-off-10);
}

.bg-green-off-5 {
    background-color: var(--green-off-5);
}

.bg-green-off-4 {
    background-color: var(--green-off-4);
}

.bg-green-off-3 {
    background-color: var(--green-off-3);
}

.bg-green-off-2 {
    background-color: var(--green-off-2);
}




.bg-indigo-50 {
    background-color: #EEF2FF;
}

.bg-indigo-100 {
    background-color: #E0E7FF;
}

.bg-indigo-200 {
    background-color: #C7D2FE;
}

.bg-indigo-300 {
    background-color: #A5B4FC;
}

.bg-indigo-400 {
    background-color: #818CF8;
}

.bg-indigo-500 {
    background-color: #6366F1;
}

.bg-indigo-600 {
    background-color: #4F46E5;
}

.bg-indigo-700 {
    background-color: #4338CA;
}

.bg-indigo-800 {
    background-color: #3730A3;
}

.bg-indigo-900 {
    background-color: #312E81;
}

.bg-indigo-950 {
    background-color: #1E1B4B;
}


.bg-yellow-50 {
    background-color: #fffbeb;
}

.bg-yellow-100 {
    background-color: #fef3c7;
}

.bg-yellow-200 {
    background-color: #fde68a;
}

.bg-yellow-300 {
    background-color: #fcd34d;
}

.bg-yellow-400 {
    background-color: #fbbf24;
}

.bg-yellow-500 {
    background-color: #f59e0b;
}

.bg-yellow-600 {
    background-color: #d97706;
}

.bg-yellow-700 {
    background-color: #b45309;
}

.bg-yellow-800 {
    background-color: #92400e;
}

.bg-yellow-900 {
    background-color: #78350f;
}


.text-xs {
    font-size: 12px;
    line-height: calc(1/ 0.75);
}


#spinner {
    position: absolute;
    height: 100dvh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1056;
    background: #00000052;
    top: 0px;
    left: 0px;
}


.windowHeight{
    height: 100dvh;
}
/* Width Utilities (0-96) in Pixels */
.w-0 { width: 0px; }
.w-px { width: 1px; }
.w-1 { width: 4px; }
.w-2 { width: 8px; }
.w-3 { width: 12px; }
.w-4 { width: 16px; }
.w-5 { width: 20px; }
.w-6 { width: 24px; }
.w-7 { width: 28px; }
.w-8 { width: 32px; }
.w-9 { width: 36px; }
.w-10 { width: 40px; }
.w-11 { width: 44px; }
.w-12 { width: 48px; }
.w-14 { width: 56px; }
.w-16 { width: 64px; }
.w-20 { width: 80px; }
.w-24 { width: 96px; }
.w-28 { width: 112px; }
.w-32 { width: 128px; }
.w-36 { width: 144px; }
.w-40 { width: 160px; }
.w-44 { width: 176px; }
.w-48 { width: 192px; }
.w-52 { width: 208px; }
.w-56 { width: 224px; }
.w-60 { width: 240px; }
.w-64 { width: 256px; }
.w-72 { width: 288px; }
.w-80 { width: 320px; }
.w-96 { width: 384px; }
.h-0 {
    height: 0px;
}

.h-px {
    height: 1px;
}

.h-1 {
    height: 4px;
}

.h-2 {
    height: 8px;
}


.h-3 {
    height: 12px;
}


.h-4 {
    height: 16px;
}

.h-5 {
    height: 20px;
}

.h-6 {
    height: 24px;
}

.h-7 {
    height: 28px;
}

.h-8 {
    height: 32px;
}

.h-9 {
    height: 36px;
}

.h-10 {
    height: 40px;
}

.h-11 {
    height: 44px;
}

.h-12 {
    height: 48px;
}

.h-14 {
    height: 56px;
}

.h-16 {
    height: 64px;
}

.h-20 {
    height: 80px;
}

.h-24 {
    height: 96px;
}

.h-28 {
    height: 112px;
}

.h-32 {
    height: 128px;
}

.h-36 {
    height: 144px;
}

.h-40 {
    height: 160px;
}

.h-44 {
    height: 176px;
}

.h-48 {
    height: 192px;
}

.h-52 {
    height: 208px;
}

.h-56 {
    height: 224px;
}

.h-60 {
    height: 240px;
}

.h-64 {
    height: 256px;
}

.h-72 {
    height: 288px;
}

.h-80 {
    height: 320px;
}

.h-96 {
    height: 384px;
}

.min-h-xs {
    min-height: 320px;
}

.min-h-sm {
    min-height: 384px;
}

.min-h-md {
    min-height: 448px;
}

.min-h-lg {
    min-height: 512px;
}

.min-h-xl {
    min-height: 576px;
}

.min-h-2xl {
    min-height: 672px;
}

.min-h-3xl {
    min-height: 768px;
}

.min-h-4xl {
    min-height: 896px;
}

.min-h-5xl {
    min-height: 1024px;
}

.min-h-6xl {
    min-height: 1152px;
}

.min-h-7xl {
    min-height: 1280px;
}

.min-h-full {
    min-height: 100%;
}

.min-h-screen-sm {
    min-height: 640px;
}

.min-h-screen-md {
    min-height: 768px;
}

.min-h-screen-lg {
    min-height: 1024px;
}

.min-h-screen-xl {
    min-height: 1280px;
}

.min-h-screen-2xl {
    min-height: 1536px;
}


.amrit-toast{
    padding:8px;
}

.is-invalid-wrapper {
    border-width: 3px !important;
    border-color: var(--bs-form-invalid-border-color) !important;
    padding-right: calc(1.5em + .75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(.375em + .1875rem) center !important;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important
}

.border-dashed{
    border-style:dashed!important;
}

.cursor-pointer{
    cursor:pointer;
}

.hover:hover {
    background-color: var(--bs-primary-bg-subtle);
}

.shadow-xxl {
    box-shadow: 1px 1rem 3rem 1px rgb(0 0 0 / 50%);
}
.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1044;
}


.w-max-content{
    width: max-content;
}

.p-2px{
    padding:2px;
}

.p-1px {
    padding: 1px;
}

.fs-8px{
    font-size:8px;
}

.fs-14px {
    font-size: 14px;
}

.z-1045{
    z-index:1045
}

.max-w-50{
    max-width:50%;
}

.pointer-event-none{
    pointer-events:none;
}

/*****************
    HOVER
*****************/
@media (hover: hover) {
    .vis-hover-target {
        visibility: var(--hov-show, hidden);
    }

    .vis-hover-parent:hover {
        --hov-show: visible;
    }

    .vis-hover-parent .vis-hover-parent {
        --hov-show: hidden;
    }

        .vis-hover-parent .vis-hover-parent:hover {
            --hov-show: visible;
        }

    .hover-target {
        display: none;
        z-index: 2000;
    }

        .hover-target.show {
            display: block;
        }

    .hover-parent:hover .hover-show{
        display:flex !important;
    }

    .hover-show:hover {
        display: flex !important;
    }

    .hover-text-white:hover{
        color:#fff!important;
    }
    .hover-text-red:hover {
        color: red !important;
    }
}

/*********************
    EDITTABLE ROW
**********************/
.edittable-rows tr label, .edittable-rows tr.is-editing [data-item-handle] {
    display: none;
}

.edittable-rows .edit-show {
    display: none;
}

.edittable-rows tr.is-editing label {
    display: unset;
}

div.position-relative:has(tr.is-editing) {
    position: unset !important
}

.edittable-rows tr.is-editing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem;
    width: 100%;
    position: absolute;
    z-index: 1;
    background-color: white;
    box-shadow: 0 0 6px 1px #aaa;
    padding: 1rem;
    border: 0 !important;
}

    .edittable-rows tr.is-editing td {
        padding: 0.25rem;
        border: 0 !important;
    }

        .edittable-rows tr.is-editing td input,
        .edittable-rows tr.is-editing td select,
        .edittable-rows tr.is-editing td textarea,
        .edittable-rows tr.is-editing td div.a-select-wrapper {
            border: 1px solid #ddd !important;
            border-radius: .25rem !important
        }

        .edittable-rows tr.is-editing td.cell-action {
            grid-column: 1 / -1;
            align-self: end;
            justify-self: end;
        }

            .edittable-rows tr.is-editing td.cell-action button.edit-hide {
                display: none;
            }

            .edittable-rows tr.is-editing td.cell-action button.edit-show {
                display: unset;
            }

/*******************
    CUSTOM TABS
********************/
.custom-tabs {
    border-bottom: none;
}

    .custom-tabs .nav-link {
        border: 1px solid transparent;
        border-bottom: none;
        border-radius: 0;
    }

        .custom-tabs .nav-link.active {
            border-color: #dee2e6;
            background-color: #fff;
            position: relative;
            z-index: 2;
        }

.custom-tab-body {
    border: 1px solid #dee2e6;
    border-radius: 0;
    margin-top: -1px;
    position: relative;
    z-index: 1;
}