@import url("https://fonts.googleapis.com/css2?family=Prompt: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&family=Noto+Sans+Thai:wght@100..900&display=swap");

/* cyrillic-ext */
    @font-face {
        font-family: 'Inter';
        font-style: italic;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Italic1.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
        font-family: 'Inter';
        font-style: italic;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Italic2.woff2) format('woff2');
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
        font-family: 'Inter';
        font-style: italic;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Italic3.woff2) format('woff2');
        unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
        font-family: 'Inter';
        font-style: italic;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Italic4.woff2) format('woff2');
        unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
    }
    /* vietnamese */
    @font-face {
        font-family: 'Inter';
        font-style: italic;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Italic5.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Inter';
        font-style: italic;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Italic6.woff2) format('woff2');
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Inter';
        font-style: italic;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Italic7.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* cyrillic-ext */
    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Normal1.woff2) format('woff2');
        unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* cyrillic */
    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Normal2.woff2) format('woff2');
        unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* greek-ext */
    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Normal3.woff2) format('woff2');
        unicode-range: U+1F00-1FFF;
    }
    /* greek */
    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Normal4.woff2) format('woff2');
        unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
    }
    /* vietnamese */
    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Normal5.woff2) format('woff2');
        unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
    }
    /* latin-ext */
    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Normal6.woff2) format('woff2');
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 100 900;
        src: url(/assets/css/font/Inter/Inter-Normal7.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
        font-family: 'Arial-Number';
        src: local("Arial");
        font-stretch: 100%;
        unicode-range: U+0030-0039;
    }


/* start: Globals */
:root {
    /* This color palletes from Tailwind CSS */
    --color-primary: #0d6efd;
    --color-primary-content: #eef2ff;
    --color-danger: #dc3545;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-warning: #ffc107;

    --color-error-content: #ffcfd4;
    --white: #fff;
    --black: #000;
    --text-muted: #737373;
    --neutral-50:  #F9FAFB;
    --neutral-100: #F3F4F6;
    --neutral-150: #f0f1f5;
    --neutral-200: #E5E7EB;
    --neutral-300: #D1D5DB;
    --neutral-400: #9CA3AF;
    --neutral-500: #6B7280;
    --neutral-600: #4B5563;
    --neutral-700: #374151;
    --neutral-800: #1F2937;
    --neutral-900: #111827;
    --neutral-950: #030712;
    --danger-50:  #FEF2F2;
    --danger-100: #FEE2E2;
    --danger-200: #FECACA;
    --danger-300: #FCA5A5;
    --danger-400: #F87171;
    --danger-500: #EF4444;
    --danger-600: #DC2626;
    --danger-700: #B71C1C;
    --danger-800: #991B1B;
    --danger-900: #7F1D1D;
    --warn-50: #FEFCE8;
    --warn-100: #FEF9C3;
    --warn-200: #FEF08A;
    --warn-300: #FDE047;
    --warn-400: #FACC15;
    --warn-500: #EAB308;
    --warn-600: #CA8A04;
    --warn-700: #A16207;
    --warn-800: #854D0E;
    --warn-900: #713F12;
    --warn-950: #422006;
    --warning-50: #FFFBEB;
    --warning-100: #FEF3C7;
    --warning-200: #FDE68A;
    --warning-300: #FCD34D;
    --warning-400: #FBBF24;
    --warning-500: #F59E0B;
    --warning-600: #D97706;
    --warning-700: #B45309;
    --warning-800: #92400E;
    --warning-900: #78350F;
    --warning-950: #451A03;
    --success-50: #edfaf0;
    --success-100: #cef0d6;
    --success-200: #b7e7c2;
    --success-300: #7ccc8f;
    --success-350: #69ca80;
    --success-400: #51a864;
    --success-450: #42a158;
    --success-500: #28a745;
    --success-600: #2d9645;
    --success-700: #208f3a;
    --success-800: #107728;
    --success-900: #0c521c;
    --success-950: #01350d;
    --info-50: #eff6ff;
    --info-100: #dbeafe;
    --info-200: #bfdbfe;
    --info-300: #93c5fd;
    --info-400: #60a5fa;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-700: #1d4ed8;
    --info-800: #1e40af;
    --info-900: #1e3a8a;
    --info-950: #172554;
    --primary-50:  #EFF6FF;
    --primary-100: #DBEAFE;
    --primary-200: #BFDBFE;
    --primary-300: #93C5FD;
    --primary-400: #60A5FA;
    --primary-500: #3B82F6;
    --primary-600: #2563EB;
    --primary-700: #1D4ED8;
    --primary-800: #1E40AF;
    --primary-900: #1E3A8A;
    --primary-950: #172554;
    --purple-50: #eef2ff;
    --purple-100: #e0e7ff;
    --purple-200: #c7d2fe;
    --purple-300: #a5b4fc;
    --purple-400: #818cf8;
    --purple-500: #6366f1;
    --purple-600: #4f46e5;
    --purple-700: #4338ca;
    --purple-800: #3730a3;
    --purple-900: #312e81;
    --purple-950: #1e1b4b;
    --text-xxs: 10px;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;
    --text-5xl: 48px;
    --rounded-sm: 2px;
    --rounded: 4px;
    --rounded-md: 6px;
    --rounded-lg: 8px;
    --rounded-xl: 12px;
    --rounded-full: 999px;
    --duration-150: 150ms;

    --bold: bold;
    --semibold: 600;
    --normal: normal;
    --light: 300;

}


*,
::before,
::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}
html {
    scrollbar-gutter: unset;
}
body {
    margin: 0;
    padding: 0;
    font-family:  "Inter", "Prompt" !important;
    background-color: #f4f6fa;
    font-size: 14px;
}
body.noScroll {
    position: fixed;
    width: 100%;
}
.label {
    color: var(--color-secondary);
    white-space: nowrap;
}
a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
}


table {
    font-family:  'Arial-Number', "Inter", "Prompt" !important;
}


hr {
    margin: 8px 0;
    outline: 0;
    border: 0;
    background: var(--neutral-200);
    height: 1px;
}






/*==== [ Operator ] ====*/
.cursor-pointer {
    cursor: pointer;
}

.underline {
    text-decoration: underline;
}

.highlight {
    text-decoration: underline;
    font-weight: bold;
}

.italic {
    font-style: italic;
}
.font-bold {
    font-weight: bold!important
}

.font-normal {
    font-weight: normal!important
}
.font-thin {
    font-weight: 100;
}

.font-light {
    font-weight: 300;
}

.font-semibold {
    font-weight: var(--semibold);
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left!important;
}
.text-nowrap {
    white-space: nowrap;
}
.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}
.flex-end {
    justify-content: flex-end!important;
}
.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline
}

.justify-center {
    justify-content: center;
}

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

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

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

.w-full {
    width: 100%;
}
.w-fit {
    width: min-content;
}
.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.overflow-y-auto {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;

    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;

}
.flex-1 {
    flex: 1
}
.lh-0 {
    line-height: 0;
}
.lh-1 {
    line-height: 1;
}
.lh-normal {
    line-height: normal;
}
.hidden {
    display: none!important;
}
.flex-grow-1 {
    flex-grow: 1;
}
.pointer-events-none {
    pointer-events: none
}
.nowrap {
    white-space: nowrap;
}
.w-0 {
    width: 0;
}

/*==== [ PADDING ] ====*/
.p-0 {
    padding: 0px!important
}

.p-1 {
    padding: 4px!important
}

.p-2 {
    padding: 8px!important
}

.p-3 {
    padding: 12px!important
}

.p-4 {
    padding: 16px!important
}

.pr-0 {
    padding-right: 0!important
}
.pr-1 {
    padding-right: 4px!important
}

.pr-2 {
    padding-right: 8px!important
}

.pr-3 {
    padding-right: 12px!important
}

.pr-4 {
    padding-right: 16px!important
}

.pl-0 {
    padding-left: 0!important
}
.pl-1 {
    padding-left: 4px!important
}

.pl-2 {
    padding-left: 8px!important
}

.pl-3 {
    padding-left: 12px!important
}

.pl-4 {
    padding-left: 16px!important
}
.pl-5 {
    padding-left: 18px!important
}
.pt-0 {
    padding-top: 0!important
}
.pt-1 {
    padding-top: 4px!important
}

.pt-2 {
    padding-top: 8px!important
}

.pt-3 {
    padding-top: 12px!important
}

.pt-4 {
    padding-top: 16px!important
}

.pb-0 {
    padding-bottom: 0px!important
}

.pb-1 {
    padding-bottom: 4px!important
}

.pb-2 {
    padding-bottom: 8px!important
}

.pb-3 {
    padding-bottom: 12px!important
}

.pb-4 {
    padding-bottom: 16px!important
}

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

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

.px-3 {
    padding-left: 12px;
    padding-right: 12px}

.px-4 {
    padding-left: 16px;
    padding-right: 16px
}

.py-0 {
    padding-top: 0px!important;
    padding-bottom: 0px!important;
}
.py-1 {
    padding-top: 4px!important;
    padding-bottom: 4px!important;
}

.py-6px {
    padding-top: 6px!important;
    padding-bottom: 6px!important;
}

.py-2 {
    padding-top: 8px!important;
    padding-bottom: 8px!important;
}

.py-3 {
    padding-top: 12px!important;
    padding-bottom: 12px!important;
}

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


/*==== [ TEXT SIZE ] ====*/
.text-xxs {
    font-size: var(--text-xxs)!important;
}

.text-xs {
    font-size: var(--text-xs)!important;
}

.text-sm {
    font-size: var(--text-sm)!important;
}

.text-md {
    font-size: var(--text-md)!important;
}

.text-base {
    font-size: var(--text-md)!important;
}

.text-lg {
    font-size: var(--text-lg)!important;
}

.text-xl {
    font-size: var(--text-xl)!important;
}

.text-2xl {
    font-size: var(--text-2xl)!important;
}

.text-3xl {
    font-size: var(--text-3xl)!important;
}

.text-4xl {
    font-size: var(--text-4xl)!important;
}

.text-5xl {
    font-size: var(--text-5xl)!important;
}


/*==== [ TEXT STYLE ] ====*/
.text-highlight {
    font-weight: var(--semibold);
    text-decoration: underline;
}
.text-underline {
    text-decoration: underline;
}
.text-italic {
    font-style: italic;
}




/*==== [ TEXT COLOR ] ====*/
.text-black {
    color: var(--black);
}
.text-primary {
    color: var(--color-primary);
}
.text-danger {
    color: var(--color-danger);
}
.text-secondary {
    color: var(--color-secondary);
}
.text-success {
    color: var(--color-success);
}
.text-warn {
    color: var(--color-warning);
}
.text-warning {
    color: var(--color-warning);
}
.text-muted {
    color: var(--neutral-800);
}

/*==== [ BG COLOR ] ====*/
.bg-primary {
    background-color: var(--primary-50)!important;
}
.bg-danger {
    background-color: var(--danger-100)!important;
}
.bg-secondary {
    background-color: var(--neutral-50)!important;
}
.bg-success {
    background-color: var(--success-50)!important;
}
.bg-warn {
    background-color: var(--warning-50)!important;
}
.bg-warning {
    background-color: var(--warning-50)!important;
}

/*==== [ BG COLOR ] ====*/
.bg-blue {
    background-color: var(--primary-50)!important;
    padding: 8px 12px;
    border-radius: var(--rounded-md);
}
.bg-yellow {
    background-color: var(--warn-50)!important;
    padding: 8px 12px;
    border-radius: var(--rounded-md);
}
.bg-gray {
    background-color: var(--neutral-100)!important;
    padding: 8px 12px;
    border-radius: var(--rounded-md);
}






/*==== [ MARGIN ] ====*/
.m-0 {
    margin: 0px!important
}

.m-1 {
    margin: 4px!important
}

.m-2 {
    margin: 8px!important
}

.m-3 {
    margin: 12px!important
}

.m-4 {
    margin: 16px!important
}

.mr-1 {
    margin-right: 4px
}

.mr-2 {
    margin-right: 8px
}

.mr-3 {
    margin-right: 12px
}

.mr-4 {
    margin-right: 16px
}

.ml-1 {
    margin-left: 4px
}

.ml-2 {
    margin-left: 8px
}

.ml-3 {
    margin-left: 12px
}

.ml-4 {
    margin-left: 16px
}

.mt-1 {
    margin-top: 4px
}

.mt-2 {
    margin-top: 8px!important;
}

.mt-3 {
    margin-top: 12px
}

.mt-4 {
    margin-top: 16px
}

.mb-1 {
    margin-bottom: 4px!important;
}

.mb-6px {
    margin-bottom: 6px!important;
}

.mb-2 {
    margin-bottom: 8px!important;
}

.mb-3 {
    margin-bottom: 12px
}

.mb-4 {
    margin-bottom: 16px
}


/*==== [ GAP ] ====*/
.gap-0 {
    gap: 0px!important
}

.gap-1 {
    gap: 4px!important
}

.gap-2 {
    gap: 8px!important
}

.gap-3 {
    gap: 12px!important
}

.gap-4 {
    gap: 16px!important
}







input,
textarea,
select,
button {
    font-family: inherit;
}
select {
    -webkit-appearance: none;
}
select option {
    -webkit-appearance: none;
}
textarea {
    resize: vertical;
    height: 75px;
    font-size: var(--text-sm);
}
input[readonly] {
    cursor: not-allowed !important;
    border-color: var(--neutral-100) !important;
    background-color: var(--neutral-100) !important;
    color: var(--neutral-400) !important;
    box-shadow: none !important;
    font-weight: normal !important;
}

hr {
    margin: 8px 0;
    outline: 0;
    border: 0;
    background: var(--neutral-200);
    height: 1px;
}


/*==== [ BUTTON ] ====*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    outline: none;
    padding: 0px 18px;
    font-size: var(--text-sm);
    border-radius: var(--rounded-md);
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
    /* padding: 16px; */
    height: 36px;
    font-weight: var(--semibold);
    gap: 6px;
    border: 1px solid;
    color: black;
}

/*====  Dark  ====*/
.btn-dark {
    color: var(--white);
    background-color: var(--neutral-800);
    border-color: var(--neutral-900);
}
.btn-dark:hover {
    color: var(--white);
    background-color: var(--black);
    border-color: var(--black);
}
.btn-dark-light {
    color: var(--neutral-800);
    border-color: transparent;
    background-color: var(--neutral-100);
}
.btn-dark-light:hover {
    background-color: var(--neutral-300);
    border-color: transparent;
}
.btn-dark-outline {
    color: var(--neutral-900);
    border-color: currentColor;
    background-color: transparent;
}
.btn-dark-outline:hover {
    color: var(--white);
    background-color: var(--black);
    border-color: var(--black);
}
.btn-dark-ghost {
    color: var(--neutral-900);
    border-color: transparent;
    background-color: transparent;
}
.btn-dark-ghost:hover {
    color: var(--neutral-900);
    border-color: transparent;
    background-color: var(--neutral-300);
}

/*====  Secondary  ====*/
.btn-secondary {
    background-color: var(--neutral-100);
    border-color: var(--neutral-300);
}
.btn-secondary:hover {
    color: black;
    background-color: var(--neutral-200);
    border-color: var(--neutral-200);
}
.btn-secondary-light {
    color: var(--neutral-600);
    border-color: transparent;
    background-color: var(--neutral-50);
}
.btn-secondary-light:hover {
    background-color: var(--neutral-200);
    border-color: transparent;
}
.btn-secondary-outline {
    color: var(--neutral-600);
    border-color: currentColor;
    background-color: transparent;
}
.btn-secondary-outline:hover {
    color: var(--white);
    background-color: var(--neutral-500);
    border-color: var(--neutral-600);
}
.btn-secondary-ghost {
    color: var(--neutral-500);
    border-color: transparent;
    background-color: transparent;
}
.btn-secondary-ghost:hover {
    color: var(--neutral-900);
    border-color: transparent;
    background-color: var(--neutral-200);
}


/*====  Primary  ====*/
.btn-primary {
    color: var(--white);
    background-color: var(--primary-500);
    border-color: var(--primary-600);
}
.btn-primary:hover {
    background-color: var(--primary-700);
    border-color: var(--primary-700);
}
.btn-primary-outline {
    color: var(--primary-600);
    border-color: currentColor;
    background-color: transparent;
}
.btn-primary-outline:hover {
    color: var(--white);
    background-color: var(--primary-500);
    border-color: var(--primary-600);
}
.btn-primary-light {
    color: var(--primary-600);
    border-color: transparent;
    background-color: var(--primary-50);
}
.btn-primary-light:hover {
    background-color: var(--primary-200);
    border-color: transparent;
}
.btn-primary-ghost {
    color: var(--primary-500);
    border-color: transparent;
    background-color: transparent;
}
.btn-primary-ghost:hover {
    color: var(--primary-700);
    border-color: transparent;
    background-color: var(--primary-100);
}

/*====  Success  ====*/
.btn-success {
    color: var(--white);
    background-color: var(--success-500);
    border-color: var(--success-600);
}
.btn-success:hover {
    background-color: var(--success-700);
    border-color: var(--success-700);
}
.btn-success-light {
    color: var(--success-700);
    border-color: transparent;
    background-color: var(--success-50);
}
.btn-success-light:hover {
    background-color: var(--success-200);
    border-color: transparent;
}
.btn-success-outline {
    color: var(--success-600);
    border-color: var(--success-500);
    background-color: transparent;
}
.btn-success-outline:hover {
    color: var(--white);
    background-color: var(--success-500);
    border-color: var(--success-500);
}
.btn-success-ghost {
    color: var(--success-400);
    border-color: transparent;
    background-color: transparent;
}
.btn-success-ghost:hover {
    color: var(--success-700);
    border-color: transparent;
    background-color: var(--success-100);
}

/*====  Danger / Error  ====*/
.btn-danger,
.btn-error {
    color: var(--white);
    background-color: var(--danger-500);
    border-color: var(--danger-600);
}
.btn-danger:hover,
.btn-error:hover {
    background-color: var(--danger-700);
    border-color: var(--danger-700);
}
.btn-danger-light,
.btn-error-light {
    color: var(--danger-600);
    border-color: transparent;
    background-color: var(--danger-50);
}
.btn-danger-light:hover,
.btn-error-light:hover {
    background-color: var(--danger-200);
    border-color: transparent;
}
.btn-danger-outline,
.btn-error-outline {
    color: var(--danger-600);
    border-color: var(--danger-500);
    background-color: transparent;
}
.btn-danger-outline:hover,
.btn-error-outline:hover {
    color: var(--white);
    background-color: var(--danger-500);
    border-color: var(--danger-500);
}
.btn-danger-ghost,
.btn-error-ghost {
    color: var(--danger-400);
    border-color: transparent;
    background-color: transparent;
}
.btn-danger-ghost:hover,
.btn-error-ghost:hover {
    color: var(--danger-600);
    border-color: transparent;
    background-color: var(--danger-100);
}

/*====  Warn  ====*/
.btn-warn {
    color: var(--warn-900);
    background-color: var(--warn-400);
    border-color: var(--warn-500);
}
.btn-warn:hover {
    color: var(--warn-950);
    background-color: var(--warn-500);
    border-color: var(--warn-500);
}
.btn-warn-light {
    color: var(--warn-600);
    border-color: transparent;
    background-color: var(--warn-50);
}
.btn-warn-light:hover {
    background-color: var(--warn-200);
    border-color: transparent;
}
.btn-warn-outline {
    color: var(--warn-500);
    border-color: var(--warn-500);
    background-color: transparent;
}
.btn-warn-outline:hover {
    color: var(--white);
    background-color: var(--warn-500);
    border-color: var(--warn-500);
}
.btn-warn-ghost {
    color: var(--warn-400);
    border-color: transparent;
    background-color: transparent;
}
.btn-warn-ghost:hover {
    color: var(--warn-600);
    border-color: transparent;
    background-color: var(--warn-100);
}


/*====  Warning  ====*/
.btn-warning {
    color: var(--warning-900);
    background-color: var(--warning-400);
    border-color: var(--warning-500);
}
.btn-warning:hover {
    color: var(--warning-950);
    background-color: var(--warning-500);
    border-color: var(--warning-500);
}
.btn-warning-light {
    color: var(--warning-700);
    border-color: transparent;
    background-color: var(--warning-50);
}
.btn-warning-light:hover {
    background-color: var(--warning-200);
    border-color: transparent;
}
.btn-warning-outline {
    color: var(--warning-500);
    border-color: var(--warning-500);
    background-color: transparent;
}
.btn-warning-outline:hover {
    color: var(--white);
    background-color: var(--warning-500);
    border-color: var(--warning-500);
}
.btn-warning-ghost {
    color: var(--warning-400);
    border-color: transparent;
    background-color: transparent;
}
.btn-warning-ghost:hover {
    color: var(--warning-600);
    border-color: transparent;
    background-color: var(--warning-100);
}





/*==== [ BUTTON SIZE ] ====*/
.btn-full {
    width: 100%;
}
.btn-wide {
    width: 80%;
    max-width: 200px;
    height: max-content;
    padding: 8px;
}

.btn-xxs {
    font-size: 10px;
    padding: 0 6px;
    height: 18px;
}
.btn-xs {
    font-size: 12px;
    padding: 0 8px;
    height: 24px;
}
.btn-sm {
    font-size: 14px;
    padding: 0 12px;
    height: 30px;
}
.btn-md {
    font-size: 16px;
    padding: 0 16px;
    height: 36px;
}
.btn-lg {
    font-size: 18px;
    padding: 0 20px;
    height: 40px;
}
.btn-xl {
    font-size: 20px;
    padding: 0 24px;
    height: 44px;
}




/*==== [ INPUT ] ====*/
input {
    background-color: transparent;
    border: 1px solid var(--neutral-300);
    border-radius: var(--rounded);
    display: inline-flex;
    width: 100%;
}
.input:focus {
    /* box-shadow: 0 0 0 1px var(--primary-500); */
    border-color: var(--primary-500);
}

.input-icon {
    border-radius: var(--rounded-md);
    border: 1px solid var(--neutral-300);
    background-color: var(--white);
    cursor: pointer;
    padding: 0 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    height: 36px;
    transition-property: box-shadow, border-color;
    transition-duration: var(--duration-150);
    color: var(--neutral-600);
}
.input-icon:hover {
    /* box-shadow: 0 0 0 1px var(--primary-500); */
    border-color: var(--primary-500);
}


.input-xs {
    font-size: var(--text-xxs);
    height: 24px;
    padding: 0 8px;
}
.input-sm {
    font-size: var(--text-xs);
    height: 28px;
    padding: 0 10px;
}
.input-md {
    font-size: var(--text-sm);
    height: 32px;
    padding: 0 10px;
}
.input-lg {
    font-size: var(--text-md);
    height: 36px;
    padding: 0 12px;
}
.input-xl {
    font-size: var(--text-lg);
    height: 40px;
    padding: 0 12px;
}
.input-2xl {
    font-size: var(--text-xl);
    height: 44px;
    padding: 0 12px;
}












.input-icon i {
    border: 0;
}

.input-icon input {
    border: 0;
    font-size: var(--text-sm);
    cursor: pointer;
    outline: none;
}

:disabled {
    cursor: not-allowed!important;
    border-color: var(--neutral-100)!important;
    background-color: var(--neutral-100)!important;
    color: var(--neutral-400)!important;
    box-shadow: none!important;
    font-weight: normal!important;
}
:disabled:hover {
    color: var(--neutral-400);
    border-color: var(--neutral-100);
    background-color: var(--neutral-100);
    font-weight: normal;
}

.input-invalid {
    background-color: var(--danger-50)!important;
    border-color: var(--danger-500)!important;
}
.input-valid {
    background-color: var(--success-50)!important;
    border-color: var(--success-500)!important;
}
.input-disabled {
    cursor: not-allowed !important;
    border-color: var(--neutral-100) !important;
    background-color: var(--neutral-100) !important;
    color: var(--neutral-400) !important;
    box-shadow: none !important;
    font-weight: normal !important;
}





/*==== [ TEXTAREA ] ====*/
.textarea {
    background-color: transparent;
    border: 1px solid var(--neutral-300);
    border-radius: var(--rounded);
    display: inline-flex;
    transition-property: box-shadow, border-color;
    transition-duration: var(--duration-150);
    white-space: pre-line;
}
.textarea:focus {
    /* box-shadow: 0 0 0 1px var(--primary-500); */
    border-color: var(--primary-500);
}

.textarea-md {
    font-size: var(--text-sm);
    height: 32px;
    min-height: 32px;
}





/*==== [ FORM ] ====*/
.form {
    font-size: var(--text-sm);
    margin-bottom: 16px;
}
.textHeader {
    font-size: 24px;
    margin-bottom: 16px;
}
.form p {
    font-weight: 600;
    color: var(--neutral-800);
    margin-bottom: 2px;
}
.form-control {
    border-radius: var(--rounded-md);
    border: 1px solid var(--neutral-300);
    outline: none;
    transition-property: box-shadow, border-color;
    transition-duration: var(--duration-150);
    /* padding: 12px 16px; */
    width: 100%;
    background-color: var(--neutral-50);
    color: var(--neutral-800);
    font-size: var(--text-sm);
}
.form-control:focus {
    /* box-shadow: 0 0 0 1px var(--primary-500); */
    border-color: var(--primary-500);
}
.form-select {
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 10px;
    padding-right: 36px;
}
.form-sm {
    font-size: var(--text-sm);
}
.disabled {
    color: var(--neutral-500);
    pointer-events: none;
    opacity: 0.5;
}
.form-container {
    display: flex;
    grid-gap: 8px;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
.form-column {
    flex-direction: column;
    align-content: flex-start
}
.form-radio {
    display: inline-flex;
    align-content: center;
    align-items: center;
    /* flex: 1; */
    /* width: 60px; */
    white-space: nowrap;
    /* margin-right: auto; */
}
.form-radio input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.form-radio label {
    cursor: pointer;
    padding-left: 6px;
}
.form-checkbox {
    display: inline-flex;
    align-content: center;
    align-items: center;
    flex: 1;
}
.form-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    border: 1px solid var(--neutral-200);
}
.form-checkbox label {
    cursor: pointer;
    padding-left: 6px;
}





.checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    border: 1px solid var(--neutral-300);
}








/*==== [ DROPDOWN ] ====*/
.dropdown {
    display: inline-block;
    position: relative;
    flex: 1
}
.dropdown-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
    background-color: var(--white);
    border-radius: var(--rounded-lg);
    border: 1px solid var(--neutral-300);
}
.dropdown.active .dropdown-menu-wrapper {
    display: block;
}
.dropdown-menu {
    padding: 8px 0;
    list-style-type: none;
    width: 180px;
}
.dropdown-menu-item-link {
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    text-decoration: none;
    color: var(--neutral-700);
}
.dropdown-menu-item-link:hover {
    background-color: var(--neutral-100);
    color: var(--black);
}
.dropdown-menu-item-link-text {
    font-size: var(--text-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
    width: 100%;
}
.dropdown-menu-item-link-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
    margin-right: 8px;
}
.dropdown-content {
    width: 300px;
}
.dropdown-text {
    display: flex;
    align-items: flex-start;
    padding: 0 12px;
    text-decoration: none;
    color: var(--neutral-700);
    flex-direction: column;
}
.dropdown-name {
    font-size: var(--text-sm);
    font-weight: var(--semibold);
}



/*==== [ SELECT ] ====*/
.select {
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none;
    padding: 0 2.25rem 0 .75rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border-radius: var(--rounded);
    border: 1px solid var(--neutral-300);
    display: inline-flex;
    background-color: var(--white);
    color: var(--black);
    height: 28px;
    width: 200px;
    text-overflow: ellipsis;
    cursor: pointer;
}

.select:focus {
    /* box-shadow: 0 0 0 1px var(--primary-500); */
    border-color: var(--primary-500);
}

/*==== [ BADGE ] ====*/
.badge {
    height: 20px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: var(--rounded-full);
    font-size: var(--text-xs);
    font-weight: 600;
    width: fit-content;
    gap: 4px;
    line-height: 1;
}

.badge-dark {
    background-color: var(--neutral-200);
    color: var(--neutral-700);
    white-space: nowrap;
}

.badge-primary {
    background-color: var(--primary-100);
    color: var(--primary-500);
    white-space: nowrap;
}

.badge-success {
    background-color: var(--success-100);
    color: var(--success-700);
    white-space: nowrap;
}

.badge-danger {
    background-color: var(--danger-100);
    color: var(--danger-500);
    white-space: nowrap;
}

.badge-purple {
    background-color: var(--purple-100);
    color: var(--purple-500);
    white-space: nowrap;
}

.badge-neutral {
    background-color: var(--neutral-100);
    color: var(--neutral-500);
    white-space: nowrap;
}

.badge-warning {
    background-color: #ffc107;
    color: var(--black);
    white-space: nowrap;
}

.badge-warn {
    background-color: var(--warning-100);
    color: var(--warning-500);
    white-space: nowrap;
}

.badge-dark-outline {
    color: var(--white);
    background-color: var(--black);
    white-space: nowrap;
}

.badge-primary-outline {
    color: var(--primary-50);
    background-color: var(--primary-500);
    white-space: nowrap;
}

.badge-success-outline {
    color: var(--success-50);
    background-color: var(--success-500);
    white-space: nowrap;
}

.badge-danger-outline,
.badge-error {
    color: var(--danger-50);
    background-color: var(--danger-500);
    white-space: nowrap;
}

.badge-purple-outline {
    color: var(--purple-50);
    background-color: var(--purple-500);
    white-space: nowrap;
}

.badge-neutral-outline {
    color: var(--neutral-50);
    background-color: var(--neutral-500);
    white-space: nowrap;
}

.badge-warning-outline {
    background-color: #ffc107;
    color: var(--black);
    white-space: nowrap;
}

.badge-warn-outline {
    color: var(--black);
    background-color: var(--warn-900);
    white-space: nowrap;
}


.badge-xxs {
    font-size: var(--text-xxs);
    height: 16px;
    padding: 0 6px;
}
.badge-xs {
    font-size: var(--text-xs);
    height: 22px;
    padding: 0 10px;
}
.badge-sm {
    font-size: var(--text-sm);
    height: 26px;
    padding: 0 12px;
}
.badge-md {
    font-size: var(--text-md);
    height: 30px;
    padding: 0 14px;
}
.badge-lg {
    font-size: var(--text-lg);
    height: 34px;
    padding: 0 16px;
}
.badge-xl {
    font-size: var(--text-xl);
    height: 38px;
    padding: 0 18px;
}



/*==== [ ALERT ] ====*/
.alert {
    padding: 8px 12px;
    border-radius: var(--rounded-md);
    width: 100%;
    font-size: var(--text-sm);
}

.alert-header {
    font-size: var(--text-xl);
}

.alert-primary {
    background-color: var(--primary-100);
    color: var(--primary-700);
    border: 1px solid var(--primary-300);
}
.alert-dark {
    background-color: var(--neutral-100);
    color: var(--neutral-800);
    border: 1px solid var(--neutral-300);
}

.alert-success {
    background-color: var(--success-100);
    color: var(--success-800);
    border: 1px solid var(--success-300);
}

.alert-danger {
    background-color: var(--danger-100);
    color: var(--danger-600);
    border: 1px solid var(--danger-300);
}

.alert-purple {
    background-color: var(--purple-100);
    color: var(--purple-900);
    border: 1px solid var(--purple-300);
}

.alert-neutral {
    background-color: var(--neutral-100);
    color: var(--neutral-600);
    border: 1px solid var(--neutral-300);
}

.alert-warning {
    background-color: #fff3cd;
    color: #997404;
    border: 1px solid #ffe69c;
}

.alert-warn {
    background-color: var(--warn-100);
    color: var(--warn-950);
    border: 1px solid var(--warn-800);
}

.alert-light {
    background-color: var(--neutral-50);
    color: var(--neutral-400);
    border: 1px solid var(--neutral-200);
}


.alert-link {
    font-weight: bold;
}

.alert-primary a {
    color: var(--primary-900);
}

.alert-success a {
    color: var(--success-900);
}

.alert-danger a {
    color: var(--danger-900);
}

.alert-purple a {
    color: var(--purple-900);
}

.alert-neutral a {
    color: var(--neutral-900);
}

.alert-warning a {
    color: var(--warning-900);
}

.alert-warn a {
    color: var(--warn-950);
}







/* =================| Dropdown |================= */
.dropdown {
    position: relative;
}
.dropdown-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
    background-color: var(--white);
    border-radius: var(--rounded-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--neutral-100);
}
.dropdown.active .dropdown-menu-wrapper {
    display: block;
}
.dropdown-menu {
    padding: 8px 0;
    list-style-type: none;
    width: 180px;
}
.dropdown-menu-item-link {
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    text-decoration: none;
    color: var(--neutral-700);
}
.dropdown-menu-item-link:hover {
    background-color: var(--neutral-100);
    color: var(--black);
}
.dropdown-menu-item-link-image {
    height: 20px;
    flex-shrink: 0;
    margin-right: 8px;
}
.dropdown-menu-item-link-text {
    font-size: var(--text-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
    width: 100%;
}
.dropdown-menu-item-link-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
    margin-right: 8px;
}
.dropdown-content {
    width: 300px;
}
.dropdown-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    border-bottom: 1px solid var(--neutral-200);
    padding: 0 12px;
}
.dropdown-content-title {
    font-weight: 600;
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    margin-right: 8px;
}
.dropdown-content-header > .badge {
    flex-shrink: 0;
}
.dropdown-content-bottom {
    padding: 12px;
}
.avatar {
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}

.avatar:hover {
    opacity: 0.8;
}






/* =================| Sidebar |================= */
.sidebar {
    position: fixed;
    left: 0;
    top: 64px;
    width: 200px;
    height: 100%;
    background-color: var(--white);
    border-right: 1px solid var(--neutral-200);
    display: flex;
    flex-direction: column;
    z-index: 40;
    /* transition-property: width; */
    /* transition-duration: var(--duration-150); */
}
body.sidebar-collapsed .sidebar {
    display: none;
}
.d-none {
    display: none;
}
.sidebar-brand {
    height: 64px;
    display: flex;
    align-items: center;
    /* padding: 0 16px; */
    text-decoration: none;
    color: var(--black);
    flex-shrink: 0;
}
.sidebar-brand-image {
    width: 30px;
    height: 30px;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 6px;
}
.sidebar-brand-text {
    font-weight: 700;
    font-size: var(--text-2xl);
    /* letter-spacing: 1px; */
    min-width: 0;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /* margin-right: 32px; */
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    height: 100%;
}
.sidebar-menu-wrapper {
    padding: 16px 0;
    overflow-y: auto;
    height: 100%;
    min-height: 0;
}
.sidebar-menu {
    list-style-type: none;
    margin-bottom: 16px;
}
.sidebar-menu:last-child {
    margin-bottom: 0;
}
.sidebar-menu-title {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    letter-spacing: 1px;
    font-weight: 500;
    margin: 16px 16px 8px;
}
body.sidebar-collapsed .sidebar-menu-title-expanded,
.sidebar-menu-title-collapsed {
    display: none;
}
body.sidebar-collapsed .sidebar-menu-title-collapsed {
    display: block;
    text-align: center;
}
.sidebar-menu-item-link {
    text-decoration: none;
    color: var(--black);
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 16px;
}
body.sidebar-collapsed .sidebar-menu-item.active > .sidebar-menu-item-link {
    color: var(--black);
}
.sidebar-submenu-item.active > .sidebar-submenu-item-link,
.sidebar-menu-item.active > .sidebar-menu-item-link,
body.sidebar-collapsed .sidebar-menu-item > .sidebar-menu-item-link:hover,
.sidebar-menu-item:hover > .sidebar-menu-item-link,
body.sidebar-collapsed .sidebar-menu-item:hover > .sidebar-menu-item-link,
.sidebar-menu-item-link:hover {
    color: var(--primary-500);
    /* background-color: var(--primary-500); */
}
.sidebar-menu-item-link-icon {
    flex-shrink: 0;
    margin-right: 8px;
    font-size: var(--text-lg);
    transition-property: margin;
    transition-duration: var(--duration-150);
}
body.sidebar-collapsed .sidebar-menu-item-link-icon {
    margin: 0 auto;
}
.sidebar-menu-item-link-text {
    font-size: var(--text-sm);
    font-weight: 500;
    min-width: 0;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
body.sidebar-collapsed .sidebar-menu-item-link-text {
    display: none;
}
.sidebar-menu-item-link-arrow {
    flex-shrink: 0;
}
body.sidebar-collapsed .sidebar-menu-item-link-arrow {
    display: none;
}
.sidebar-menu-item.active > .sidebar-menu-item-link > .sidebar-menu-item-link-arrow {
    transform: rotateZ(90deg);
}
.sidebar-submenu {
    display: none;
    border-left: 1px solid var(--neutral-200);
    margin-left: 16px;
    list-style-type: none;
}
.sidebar-menu-item > .sidebar-submenu {
    margin-left: 24px;
    background-color: var(--white);
}
body.sidebar-collapsed .sidebar-menu-item > .sidebar-submenu {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    margin-left: 0;
    border: 1px solid var(--neutral-200);
    padding: 16px 0;
    width: 200px;
}
body.sidebar-collapsed .sidebar-menu-item:hover > .sidebar-submenu {
    display: block;
}
.sidebar-submenu-item.active > .sidebar-submenu,
.sidebar-menu-item.active > .sidebar-submenu {
    display: block;
}
.sidebar-submenu-item-link {
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: var(--neutral-700);
    text-decoration: none;
}
.sidebar-submenu-item-link:hover {
    color: var(--primary-500);
}
.sidebar-submenu-item-link-text {
    font-size: var(--text-sm);
    min-width: 0;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.sidebar-submenu-item-link-arrow {
    flex-shrink: 0;
}
.sidebar-submenu-item.active > .sidebar-submenu-item-link > .sidebar-submenu-item-link-arrow {
    transform: rotateZ(90deg);
}
.sidebar-overlay {
    display: none;
}
.sidebar-num {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sidebar-num-text {
    font-size: 12px;
    font-weight: normal;
    color: var(--neutral-400);
    padding-right: 8px;
}


/*==== [ HEADER ] ====*/
.header-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 8px;
    gap: 8px
}

.header-title-txt {
    font-size: 20px;
    font-weight: var(--semibold);
}







.input-group {
    width: 100%;
    min-width: 0;
    position: relative;

}

.input-group>.form-control {
    padding-left: 36px;
    cursor: pointer;
}

.input-group-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--neutral-500);
    font-size: var(--text-lg);
    pointer-events: none;
    line-height: 0;
}




/*==== [ Login Page ] ====*/
.login-page {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    height: 85vh;
    padding: 1.5rem;
    gap: 16px
}

.login-container {
    max-width: 30rem;
    padding: 2rem;

}

.login-title {
    font-size: 24px;
}

.size-2x {
    transform: scale(1.5);
}



/* start: Main */
.main {
    /* margin-left: 250px; */
    transition-property: margin-left;
    /* transition-duration: var(--duration-150); */
    height: 100vh;
}


/* end: Main */














.card, .card-md {
    gap: 12px;
    display: grid;
}
@media (min-width: 320px) {
    .card {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .card-md {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
@media (min-width: 425px) {
    .card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .card-md {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
@media (min-width: 480px) {
    .card-md {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .card {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .card {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .card-md {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.card-item {
    border: 1px solid var(--neutral-200);
    padding: 12px 16px 16px;
    border-radius: var(--rounded-md);
    width: 100%;
    background-color: var(--white);
}


.row {
    grid-gap: 16px;
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
}

.row-item {
    border: 1px solid var(--neutral-200);
    /* padding: 16px; */
    border-radius: var(--rounded-md);
    width: 100%;
    background-color: var(--white);
}
.row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-200);
    /* margin-bottom: 8px; */
    /* background-color: var(--neutral-100); */
    border-radius: 5px 5px 0 0;
    flex-wrap: wrap;
}
.row-header i {
    font-weight: 500;
}
.row-body {
    padding: 12px 16px;
}
.row-title {
    font-size: 16px;
    font-weight: bold!important;
}



.txt-black {
    color: #000;
}
.txt-gray {
    color: #6e6e6e;
}
.txt-temp {
    color: var(--primary-700);
}
.txt-primary {
    color: var(--primary-500);
}
.txt-success {
    color: #198754
}
.txt-danger {
    color: #dc3545;
}
.bold {
    font-weight: bold!important;
}

.txt-with-i {
    display: inline-flex;
    align-content: center;
    align-items: center;
    line-height: 1;
    gap: 2px;
}






.header_project {
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;

    overflow: hidden;
    /* text-overflow: ellipsis; */
}

.h1_project {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 16px;
}





.action_btn {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}


.logo {
    padding: 0 8px;
    background: black;
    color: white;
    border-radius: 8px;
    font-weight: 500;
    
}








.a-href {
    color: var(--black);
    text-decoration: none;
}
.a-href {
    color: var(--color-primary);
    cursor: pointer;
}
.a-href:hover {
    color: var(--primary-600);
    text-decoration: underline;
}

.a-href-link {
    color: var(--primary-500);
    text-decoration: none;
}
.a-href-link:hover {
    color: var(--primary-600);
    text-decoration: underline;
}


table {
    min-width: 100%;
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}
.projectTable {
    width: max-content;
    white-space: nowrap;
    table-layout: auto;
}
table td, 
table th {
    padding: 4px 8px;
    text-align: left;
    line-height: 1;
}
table thead tr {
    background-color: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
    font-size: 12px;
}
table thead th {
    color: var(--neutral-500);
    font-weight: 500;
}
table tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--neutral-200);
    background: white;
}
table tbody {
    font-size: 14px;
}
table tbody td {
    padding: 4px 8px;
}

td {
    line-height: 1;
}






.logo-ot {
    color: var(--primary-500);
    font-weight: 500;
}
.logo-ri {
    left: -10.1px;
    top: -16px;
    position: relative;
}
.logo-ri i {
    font-size: 14px;
}




  .authen-page {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
    height: 85vh;
    padding: 1.5rem;
  }

  .authen-container {
    max-width: 30rem;
    padding: 2rem;

  }

  .size-2x {
    transform: scale(1.5);
  }
  .authen-title {
    font-size: 24px;
  }





.no-underline {
    text-decoration: none!important;
}
.split {
    color: var(--neutral-200);
    font-weight: 500;
}




.card-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card-item-i {
    font-size: 36px;
    line-height: 1;
    /* font-weight: bold; */
}
.card-item-number {
    font-size: 32px;
    font-weight: bold;
}
.card-item-subTxt {
    font-size: 14px;
    color: var(--text-muted);
    /* font-weight: bold; */
    text-align: center;
}





/* ==== [ MODAL ] ====*/
.modal {
    /* opacity: 0; */
    /* visibility: hidden; */
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: left;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity .25s ease;
    z-index: auto;
    scrollbar-gutter: stable;
    z-index: 99990;
}

.modal__bg {
    cursor: pointer;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: left;
    transition: opacity .25s ease;
    z-index: auto;
    scrollbar-gutter: stable;
}

.modal-state {
    display: none;
}

.modal-state:checked+.modal {
    opacity: 1;
    visibility: visible;
}

.modal-state:checked+.modal .modal__inner {
    top: 0;
}

.modal__inner {
    transition: top .25s ease;
    /* position: absolute; */
    /* top: -20%; */
    right: 0;
    left: 0;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    overflow: auto;
    background: #fff;
    border-radius: var(--rounded-md);
    width: 80%;
    max-width: 640px;
    position: relative;
}

.modal__close {
    font-size: 18px;
    cursor: pointer;
    margin-left: auto;
    padding-left: 6px;
    padding-right: 6px;
    color: var(--neutral-400);
}

.modal__close:hover {
    color: var(--black);
}

.modal__header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-200);
    font-size: 14px;
}

.modal__body {
    padding: 16px;
    border-bottom: 1px solid var(--neutral-200);
    overflow: auto;
}

.modal__action {
    display: flex;
    padding: 12px 16px;
    float: right;
    grid-gap: 8px;
}

.modal__full {
    width: 95% !important;
    max-width: 95%!important;
}
.modal__title {
    display: flex;
    gap: 6px;
    align-items: center;
}










.btn-icon-primary {
    padding: 0;
    cursor: pointer;
    color: var(--primary-500);
    font-size: 16px
}
.btn-icon-primary:hover {
    color: var(--primary-700);
}

.btn-icon-danger {
    padding: 0;
    cursor: pointer;
    color: var(--danger-500);
    font-size: 16px
}
.btn-icon-danger:hover {
    color: var(--danger-700);
}

.btn-squared-xs {
    font-size: 12px;
    height: 24px;
    width: 24px;
    padding: 0;
}

.btn-squared-sm {
    font-size: 14px;
    height: 28px;
    width: 28px;
    padding: 0;
}








.table-wrapper {
    /* height: 120px; */
    /* border: 1px solid gray; */
    overflow: auto;
}
.resize {
    resize: horizontal;
    overflow: hidden;
}
.resize::-webkit-resizer {
    display: none;
}

tr.sticky, tr.stickyLast {
    position: sticky;
    top: 0;
    z-index: 1;
    /* box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); */
    background-color: var(--neutral-100);
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
}
thead tr.sticky {
    white-space: nowrap;
}

th.sticky,
td.sticky {
    position: sticky;
    left: 0;
    background: var(--white);
    z-index: 2;
}
th.stickyLast,
td.stickyLast {
    position: sticky;
    right: 0;
    white-space: nowrap;
    width: 100px;
    max-width: 100px;
    text-align: center;
    background: var(--neutral-50);
    z-index: 2;
}


tbody tr:hover,
td.sticky:hover,
td.stickyLast:hover {
    background: #fff3a1!important
}
tbody tr:hover {
    .sticky,
    .stickyLast, 
    th {
        background: #fff3a1!important
    }
}

tbody tr:hover,
tbody tr:hover th,
tbody tr:hover td,
tbody tr:hover td.sticky,
tbody tr:hover td.stickyLast {
    background-color: #fff3a1 !important;
}



/* =================| Table Pagination |================= */
.row-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px
}
.pagination {
    display: flex;
    justify-content: flex-end;
    grid-gap: 2px;
    height: 26px
}
.pagination>li::marker {
    content: "";
}
.pagination>li {
    display: flex;
    text-align: center;
    margin-left: -1px;
    color: var(--black);
    text-decoration: none;
    background-color: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: 50%;
    cursor: pointer;
    width: 26px;
    align-content: center;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xxs);
}
.pagination>li:hover {
    color: var(--black);
    background-color: var(--neutral-200);
}
.pagination>li.active {
    color: var(--white);
    background-color: var(--black);
}







.td-ellipsis {
    max-width: 0!important;
    min-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.bt-line {
    border-top: 0.5px solid var(--neutral-200);
}
.bb-line {
    border-bottom: 0.5px solid var(--neutral-200);
}

.disabled-link {
    pointer-events: none;
    opacity: .4;
}



.progress-bg-0 {
    background-color: #dc3545;
}
.progress-bg-20 {
    background-color: #fd7e14;
}
.progress-bg-40 {
    background-color: #ffc107;
}
.progress-bg-60 {
    background-color: #0dcaf0;
}
.progress-bg-80 {
    background-color: #0d6efd;
}
.progress-bg-100 {
    background-color: #198754;
}

.progress {
    background-color: rgb(255, 255, 255);
    border: 1px solid black;
    display: flex;
}
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--primary-500);
    text-align: center;
    white-space: nowrap;
    transition: var(--neutral-200);
    /* border-radius: var(--rounded-sm); */
}
.progress-details {
    /* border-radius: var(--rounded-sm); */
    background-color: white;
    border: 1px solid var(--neutral-300);
    height: 16px;
}

.progress-custom {
    display: grid;
    /* width: 100%; */
    grid-template-columns: 75px 0.5fr;
    align-items: center;
}
.progress-custom-table {
    display:table;
    width: 100%;
}
.progress-custom .progress-value {
    vertical-align: middle;
    padding-left: 4px;
    font-size: 0.75rem;
}

.progress-details-text {
    display: contents
}

a.disabled {
    color: var(--neutral-500)!important;
    pointer-events: none!important;
}

.text-red {
    color: red;
}
.text-gray {
    color: #6e6e6e;
}






.loading {
    height: 0;
    width: 0;
    padding: 6px;
    margin-left: 2px;
    border: 2px solid #ccc;
    border-right-color: #888;
    border-radius: 22px;
    -webkit-animation: rotate 1s infinite linear;

}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

.loadText {
    display: flex;
    align-items: center;
    color: #888;
    grid-gap: 4px;
    justify-content: center;
}


.padding-header {
    padding: 0px 0 12px 0;
}






.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}





/*==== [ Swal2 ] ====*/
div:where(.swal2-container) {
    z-index: 99999999!important;
}
div:where(.swal2-icon) {
    margin-top: 32px!important;
}
div:where(.swal2-container) h2:where(.swal2-title) {
    padding-top: 0!important;
}
div:where(.swal2-container) div:where(.swal2-html-container) {
    padding-top: 6px!important;
}
div:where(.swal2-container) .swal2-select {
    border-radius: 4px;
}
.swal2-select {
    cursor: pointer !important;
}
.swal2-html-container {
    display: flex !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    font-size: 16px !important;
}
.swal2-html-container input,
.swal2-html-container textarea {
    margin: 6px !important;
    font-size: 16px !important;
}
.swal-html-item {
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.swal-html-item span {
    width: 120px;
    text-align: left;
    color: var(--gray);
}
.swal2-html-container input[type="date"] {
    cursor: pointer;
}
.swal2-html-container input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}










/* ---------|  Layout Responsive  |--------- */
.col-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.col-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.col-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
}
.col-6 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 976px) {
    .col-1 {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 1215px) {
    .col-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .col-6 {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 468px) {
    .col-2 {
        grid-template-columns: 1fr;
    }
    .col-3 {
        grid-template-columns: 1fr;
    }
    .col-4 {
        grid-template-columns: 1fr;
    }

}
@media (max-width: 768px) {
    .col-3 {
        grid-template-columns: 1fr;
    }
}





.item-header {
    color: #6e6e6e;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 6px;
    font-size: 16px;
    justify-content: space-between;
}
.item-content {
    font-size: 26px;
    font-weight: 600;
    text-align: center;
}






canvas {
    width: 100%!important
}



.canvas-wrapper div:last-child,
.card-item div:last-child {
  margin-bottom: 0;
}

.btn-at-last {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}





/*==== [ Box ] ====*/
.box {
    border: 1px solid var(--neutral-300);
    border-radius: var(--rounded-lg);
    background-color: white;
    overflow-x: auto;
    overflow-y: auto;
}
.boxHeader {
    border-bottom: 1px solid var(--neutral-300);
    background-color: var(--neutral-200);
    font-size: var(--text-md);
    font-weight: var(--semibold);
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-warn {
    border: 1px solid var(--warning-300);
    background-color: var(--warning-50);
}
.boxHeader-warn {
    border-bottom: 1px solid var(--warning-300);
    background-color: var(--warning-200);
    color: var(--warning-900);
}

.box-primary {
    border: 1px solid var(--primary-300);
    /* background-color: var(--primary-50); */
}
.boxHeader-primary {
    border-bottom: 1px solid var(--primary-300);
    background-color: var(--primary-200);
    color: var(--primary-900);
}




/* Tabs container */
.tabs {
    display: flex;
    gap: 4px;
    /* border-bottom: 2px solid #ddd; */
    font-size: 14px;
    flex-wrap: wrap;
    /* color: var(--color-primary); */
}

/* Each tab */
.tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    cursor: pointer;
    transition: color 0.2s ease;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Hide the radio */
.tab input[type="radio"] {
    display: none;
}

.tab input[type="radio"]:checked ~ ::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--primary-600);
    transition: width 0.25s ease;
    width: 100%;
}

.tab input[type="radio"]:checked ~ * {
    color: var(--primary-600);
    font-weight: 600;
}


/*==== [ Table ] ====*/
table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: separate;
    border-spacing: 0;
}
td, th {
    padding: 2px 4px;
    border-bottom: 1px solid var(--neutral-200) !important;
}


table thead tr {
    color: var(--neutral-500);
    font-weight: var(--semibold);
    background-color: var(--white);
    border-bottom: 1px solid var(--neutral-300)!important;
    font-weight: var(--semibold);
}



tbody tr:last-child td {
    border-bottom: 1px solid var(--neutral-200) !important;
}
#progressTable tbody tr:last-child td,
#progressTable tbody tr:last-child th {
    border-bottom: 0!important;
}

#ot_list_history tbody tr:last-child td,
#ot_list_history tbody tr:last-child th {
    border-bottom: 0!important;
}

#ot_assessment tbody tr:last-child td,
#ot_assessment tbody tr:last-child th {
    border-bottom: 0!important;
}


.table {
    border-radius: var(--rounded-lg);
    text-align: left;
    width: 100%;
    font-size: 14px;
    position: relative;
}
.table-pin-cols tr,
.table-pin-cols th {
    background-color: var(--white);
    position: sticky;
    left: 0;
    right: 0;
}

.table-col-marge * {
    background-color: var(--primary-100) !important;
    border-top: 1px solid var(--primary-400) !important;
    color: var(--primary-700);
    font-weight: bold;
}
.table-col-marge:hover * {
    background-color: var(--primary-100) !important;
    border-top: 1px solid var(--primary-400) !important;
    color: var(--primary-700);
    font-weight: bold;
}

.table-scroll {
    overflow-x: auto;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
}

.table-shadow-wrap {
    position: relative;
    --shadow-left: 0px;   /* default, will be overridden by JS */
    --shadow-right: 0px;
}

.table-shadow-wrap::before,
.table-shadow-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
}

.table-shadow-wrap::before {
    left: var(--shadow-left);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
}

.table-shadow-wrap::after {
    right: var(--shadow-right);
    background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
}

.table-shadow-wrap.has-left::before {
    opacity: 1;
    
}
.table-shadow-wrap.has-right::after {
    opacity: 1;
}

tbody tr:last-child th,
tbody tr:last-child td {
    border-bottom: 0!important;
}










/* =================| Global (Additional) |================= */

section {
    margin-bottom: 12px;
}







/* =================| Table (Additional) |================= */
/* Information Table */
.info {
    display: grid;
    grid-template-columns: 180px auto;
    padding: 3px 0;
    border-bottom: 1px solid #eee;
}
.info:hover {
    background-color: var(--neutral-50);
}
.info:last-child {
    border-bottom: none;
}
.info-header {
    font-weight: 600;
}
@media (max-width: 375px) {
    .info {
        grid-template-columns: 1fr;
    }
}


/* ===================== */
/* Region Table */
/* ===================== */
.location td {
    background-color: var(--primary-100) !important;
    border-top: 1px solid var(--primary-400) !important;
    color: var(--primary-700);
    font-weight: bold;
}

/* hover ทั้งแถว location (รวม sticky) */
tbody tr.location:hover td,
tbody tr.location:hover td.sticky,
tbody tr.location:hover td.stickyLast {
    background-color: var(--primary-100) !important;
    border-top: 1px solid var(--primary-400) !important;
}


/* ===================== */
/* Username Table */
/* ===================== */
.username td {
    background-color: var(--neutral-150) !important;
    border-top: 1px solid var(--neutral-400) !important;
    color: var(--neutral-800);
    font-weight: bold;
}

/* hover ทั้งแถว username (รวม sticky) */
tbody tr.username:hover td,
tbody tr.username:hover td.sticky,
tbody tr.username:hover td.stickyLast {
    background-color: var(--neutral-150) !important;
    border-top: 1px solid var(--neutral-400) !important;
}









/* =================| Blink (Additional) |================= */
.box-status {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border-radius: 50%;
    position: relative;
}
.blink {
    display: block;
    width: 12px;
    height: 12px;
    opacity: 0.6;
    border-radius: 50%;
    animation: blink 1.5s linear infinite;
}

@keyframes blink {
100% { transform: scale(1.75, 1.75); 
        opacity: 0;
    }
}

.offline {
    background-color:rgb(255, 36, 36);
}

.online {
    background-color:  #0fcc45;
}
.in-process {
    background-color:rgb(255, 187, 0);
}

.txt-offline {
    color:rgb(224, 0, 0);
}

.txt-online {
    color:rgb(0, 165, 47);
}
.txt-in-process {
    color:rgb(255, 166, 0)
}




/* =================| Badge Header (Additional) |================= */
.badge-header {
    background: #888;
    padding: 4px 8px;
    border-radius: var(--rounded-md);
    color: white;
    font-size: 16px;
    font-weight: 500;
}



/* =================| Content (Additional) |================= */
.content {
    padding: 16px;
    margin-left: 200px;
    padding-top: 80px;
    /* height: 100vh; */
    /* max-height: 100%; */
}
.content-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}




/* =================| Breakpoints (Additional) |================= */
@media screen and (max-width: 1024px) {
    .sidebar-overlay {
        display: block;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.5);
        transition-property: opacity, visibility;
        transition-duration: var(--duration-150);
        position: fixed;
        top: 64px;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 30;
    }
    body.sidebar-collapsed .sidebar-overlay {
        /* opacity: 0; */
        display: none;
    }
    .content {
        margin-left: 0;
    }
    .topbar-sidebar-toggle {
        display: flex;
    }
}

@media screen and (max-width: 575px) {
    .topbar-right > * {
        margin-right: 8px;
    }
    .topbar-search-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--white);
        max-width: unset;
        z-index: 20;
        margin: 0;
        padding: 0 16px;
        display: none;
    }
    .topbar-search-wrapper.active {
        display: flex;
    }
    .topbar-search-back,
    .topbar-right-item-search {
        display: flex;
    }
}





/* =================| Menubar (Additional) |================= */
.menubar {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(1, 1fr); /* default: 1 column */
}
/* ≥ 500px: 2 columns */
@media (min-width: 320px) {
    .menubar {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ≥ 768px: 3 columns */
@media (min-width: 425px) {
    .menubar {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ≥ 1200px: 6 columns */
@media (min-width: 768px) {
    .menubar {
        grid-template-columns: repeat(6, 1fr);
    }
}
.dropdown {
    display: inline-block;
    position: relative;
    flex: 1
}

.dd-button {
    display: flex;
    border: 1px solid gray;
    border-radius: var(--rounded-lg);
    padding: 8px 26px 8px 18px;
    background-color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    /* min-width: 140px; */
    text-align: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* color: var(--neutral-800); */
}
.dd-button i {
    font-size: 22px;
}

.dd-button:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--neutral-800);
    border-bottom: 0px;
    right: 8px;
    position: absolute;
    top: 26px;
}

.dd-button:hover {
    background-color: #eeeeee;
}

.dd-menu {
    position: absolute;
    top: 100%;
    left: 0;
    border: 1px solid #ccc;
    border-radius: var(--rounded-lg);
    padding: 0;
    margin-top: 2px;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
    background-color: #ffffff;
    list-style-type: none;
    display: none;
    z-index: 1000;
    min-width: 100%;
    padding: 5px 0;
}

.dd-menu.show {
    display: block;
}

.dd-menu li {
    /* padding: 8px 20px; */
    cursor: pointer;
    white-space: nowrap;
}

.dd-menu li:hover {
    background-color: #f6f6f6;
}

.dd-menu li a {
    padding: 8px 20px;
    display: block;
    text-decoration: none;
    color: inherit;
}

.dd-menu li.divider {
    padding: 0;
    border-bottom: 1px solid #cccccc;
}
.dd-menu.align-right {
    left: auto;
    right: 0;
}


/* =================| Navbar (Additional) |================= */
/* .btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0 16px;
    font-size: var(--text-base);
    border-radius: var(--rounded-lg);
} */

.topbar {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--neutral-200);
    position: fixed;
    width: 100%;
    background-color: var(--white);
    z-index: 1000;
    top: 0!important;
}
.topbar-sidebar-toggle {
    background-color: transparent;
    color: var(--primary-500);
    flex-shrink: 0;
    margin-right: 8px;
    padding: 0;
    width: 36px;
    border-radius: var(--rounded-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    outline: none;
    padding: 0px 18px;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0, 0, .2, 1);
    height: 36px;
    gap: 6px;
}
.topbar-sidebar-toggle:hover {
    background-color: var(--primary-100);
}
.topbar-right {
    display: flex;
    align-items: center;
    margin-left: auto;
}
.topbar-right > * {
    margin-right: 12px;
}
.topbar-right > :last-child {
    margin-right: 0;
    display: flex;
}
.topbar-right-item-image {
    height: 18px;
}
.topbar-right-item {
    position: relative;
}
.topbar-right-item-total {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background-color: var(--danger-500);
    color: var(--white);
    font-size: var(--text-xxs);
    font-weight: 600;
    border-radius: var(--rounded-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
.topbar-right-item-user-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--rounded-full);
}
.topbar-right-item-search {
    display: none;
}

.currency, .arial {
    font-family: Arial!important;
    /* line-height: normal; */
}



.dailyProgressTable {
    width: max-content;
    white-space: nowrap;
    table-layout: auto;
}
.boq td {
    background-color: var(--primary-100) !important;
    border-top: 1px solid var(--primary-400) !important;
    color: var(--primary-700);
    font-weight: bold;
}

.bg-sub {
    background-color: #fff6b04f!important;
}




.inputQty {
    min-width: 80px;
    max-width: 80px;
    width: 80px;
    background-color: var(--warn-50);
}
.widthTask {
    min-width: 200px;
}
.widthDate {
    min-width: 80px;
}

.w-date {
    width: 148px
}
.w-dates {
    width: 200px
}
.w-dated {
    width: 170px
}
.boq_code {
    height: 32px;
}
.boq_item_code {
    height: 32px;
}
.total_staff {
    min-width: 50px;
    max-width: 50px;
    width: 50px;
    height: 32px;
    background-color: white;
}
.ot_quantity {
    min-width: 80px;
    max-width: 80px;
    width: 50px;
    height: 32px;
    background-color: white;
}
.input-date {
    width: 140px;
    height: 32px;
    border-radius: var(--rounded);
    padding: 0 10px;
}



.preview-item {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: move;
    border-radius: 6px
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px
}

.preview-item img:hover {
    opacity: 0.7;
}

.delete-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(255, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
}

.delete-btn:hover {
    background: rgba(255, 0, 0, 1);
    color: #fff;
}

.deleteItem {
    cursor: pointer;
    color: var(--danger-400);
}
.deleteItem:hover {
    color: var(--danger-600);
}



/* .editItem {
    cursor: pointer;
    color: var(--primary-400);
}
.editItem:hover {
    color: var(--primary-600);
} */













.img-gallery {
    width: 50px;
    height: 50px;
    border-radius: var(--rounded);
    border: 1px solid var(--neutral-300);
    object-fit: cover;
}

.img-gallery:hover {
    opacity: 0.7;
}

.img-gallery-receipt {
    width: 30px;
    height: 30px;
    border-radius: var(--rounded);
    border: 1px solid var(--neutral-300);
    object-fit: cover;
}

.img-gallery-receipt:hover {
    opacity: 0.7;
}

#ot_list tbody > tr > td {
    vertical-align: middle;
    line-height: 0;
}

.disabledPart {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

.border-t-100 {
    border-top: 1px solid var(--neutral-100);
}
.border-b-0 {
    border-bottom: 0px solid var(--neutral-100)!important;
}
.border-b-100 {
    border-bottom: 1px solid var(--neutral-100);
}
.border-b-200 {
    border-bottom: 1px solid var(--neutral-200);
}
.border-b-300 {
    border-bottom: 1px solid var(--neutral-300);
}

.border-b-warn-100 {
    border-bottom: 1px solid var(--warning-100);
}
.border-b-warn-200 {
    border-bottom: 1px solid var(--warning-200);
}
.border-b-warn-300 {
    border-bottom: 1px solid var(--warning-300);
}

.border-t-warn-100 {
    border-top: 1px solid var(--warning-100);
}
.border-t-warn-200 {
    border-top: 1px solid var(--warning-200);
}
.border-t-warn-300 {
    border-top: 1px solid var(--warning-300);
}
.border-rounded {
    border-radius: var(--rounded);
}
.cancelled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;

}

.w-10px {
    width: 10px!important
}
.w-20px {
    width: 20px!important
}
.w-100px {
    width: 100px!important
}
.w-150px {
    width: 150px!important
}
.w-200px {
    width: 200px!important
}
.w-250px {
    width: 250px!important
}
.min-w-40px {
    min-width: 40px!important
}
.min-w-50px {
    min-width: 50px!important
}
.min-w-100px {
    min-width: 100px!important
}
.min-w-150px {
    min-width: 150px!important
}
.min-w-200px {
    min-width: 200px!important
}
.min-w-250px {
    min-width: 250px!important
}
.min-w-300px {
    min-width: 300px!important
}
.max-w-250px {
    max-width: 250px!important
}
.max-w-150px {
    max-width: 200px!important
}
.max-w-200px {
    max-width: 200px!important
}
.max-w-40px {
    max-width: 40px!important
}
.max-w-50px {
    max-width: 50px!important
}
.max-w-100px {
    max-width: 100px!important
}


.bg-white {
    background-color: var(--white);
}
.bg-secondary {
    background-color: var(--neutral-50)!important;
}
.bg-amber-50 {
    background-color: var(--warning-50)!important;
}
.bg-yellow-50 {
    background-color: var(--warning-50)!important;
}
.h-18px {
    height: 18px;
}


.box-card, .box-card-md {
    gap: 12px;
    display: grid;
}
@media (min-width: 320px) {
    .box-card {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .box-card-md {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
@media (min-width: 425px) {
    .box-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .box-card-md {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
@media (min-width: 480px) {
    .box-card-md {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .box-card {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .box-card {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .box-card-md {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.box-card-item {
    border: 1px solid var(--neutral-300);
    padding: 8px 12px 12px;
    border-radius: var(--rounded-lg);
    width: 100%;
    background-color: var(--white);
    min-height: 86px;
}
.box-card-item-h {
    border: 1px solid var(--neutral-300);
    padding: 8px 12px 12px;
    border-radius: var(--rounded-lg);
    width: 100%;
    background-color: var(--white);
}




   .multiple-selection {
        width:140px;
        position:relative;
        z-index: 10;
        border-radius: var(--rounded-md);
        border: 1px solid var(--neutral-200);
        background-color: var(--neutral-50);
    }
    .multiple-selection label {
        font-size: 14px;
        border-radius: var(--rounded-lg);
        padding: 8px 16px;
        display: block;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select: none;
        cursor:pointer;
        color: var(--neutral-800);
    }
    .multiple-selection label:after {
        content: '';
        width: 0; 
        height: 0; 
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid var(--neutral-400);
        border-bottom: 0px;
        right: 10px;
        position: absolute;
        top: 14px;
    }
    .multiple-selection.show label:after {
        width: 0; 
        height: 0; 
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 0px;
        border-bottom: 6px solid var(--neutral-400);;
    }
    .checkbox-dropdown {
        background-color: var(--white);
        border-radius: var(--rounded-md);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--neutral-200);
        overflow: hidden;
        margin-top: 1px;
        position: absolute;
        left: 0;
        right: 0;
        display: none;
    }
    .multiple-selection .checkbox-dropdown {
        max-height: 0px;
        transition: max-height 0.3s;
    }
    .multiple-selection.show .checkbox-dropdown {
        max-height: 300px;
        transition: max-height 0.3s;
    }
    .checkbox-dropdown input[type=checkbox]{
        -webkit-appearance: none;
        display: block;
        padding: 10px 16px;
        width: 100%;
        margin: 0;
        border: 0;
        position: relative;
        outline: none !important;
        transition: background 0.1s;
        cursor: pointer;
        border-radius: 0;
    }
    .checkbox-dropdown input[type=checkbox]:hover {
        background-color: var(--neutral-100);
        color: var(--black);
    }
    .checkbox-dropdown input[type=checkbox]:checked {
        background: var(--primary-100);
    }
    .checkbox-dropdown input[type=checkbox]:checked:before {
        content: '×' ;
        position: absolute;
        font-weight: bold;
        right: 10px;
        top: 50%;
        font-size: 18px;
        line-height: 0;
    }
    .checkbox-dropdown input[type=checkbox]:after {
        content: attr(value);
        font-weight: 400;
    }




    .sweet_loader {
        width: 140px;
        height: 140px;
        margin: 0 auto;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-name: ro;
        transform-origin: 50% 50%;
        transform: rotate(0) translate(0,0);
    }
    @keyframes ro {
        100% {
            transform: rotate(-360deg) translate(0,0);
        }
    }




.form-control[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer;
}


.hover:hover {
    background: #fff3a1!important;
    cursor: pointer;
}

.card-list {
    border: 1px solid var(--neutral-300);
    padding: 8px 12px 12px;
    border-radius: var(--rounded-lg);
    width: 100%;
    background-color: var(--white);
}

.va-top {
    vertical-align: top;
}
.va-bottom {
    vertical-align: bottom;
}

tfoot td {
    /* border-top: 1px solid var(--neutral-200) !important; */
    border-bottom: 0 !important;
    font-weight: var(--semibold) !important;
    padding: 4px 8px !important;
    background-color: var(--warn-50) !important;
    border-top: 1px solid var(--neutral-300) !important;
}

.okay {
    color: var(--color-success);
    font-weight: var(--normal);
}
.broken {
    color: var(--color-danger);
    font-weight: var(--semibold);
}
.notSet {
    color: rgb(170, 170, 170);
}

.small {
    color: var(--color-secondary);
    font-size: var(--text-xs) !important;
    font-weight: normal !important;
}

.actionBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}


.capture-table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse;
}
.capture-table td,
.capture-table th {
    word-wrap: break-word;
}

.table tbody tr:has(td[rowspan]):not(:has(~ tr td[rowspan])) td {
    border-bottom: 1px solid var(--neutral-200)!important
}
.table tbody tr:has(td[rowspan]):not(:has(~ tr td[rowspan])) td[rowspan] {
    border-bottom: 0px solid var(--neutral-200)!important
}



.group-expand, .group-expand * {
    border: 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.number-group {
    font-weight: var(--light);
    color: var(--color-secondary);
    padding-left: 6px;
}



.item-card {
    border-radius: 6px;
    outline-offset: 2px;
    outline: 0 solid #0000;
    flex-direction: column;
    transition: outline .2s ease-in-out;
    display: flex;
    position: relative;
    border: 1px solid var(--neutral-300);
    background-color: var(--white);
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}
.blinking-text {
    animation: blink 1s linear infinite;
}

.v-hidden {
    visibility: hidden!important
}
.opacity-20 {
    opacity: 0.2!important;
}