/* @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+Thai:wght@100..900&display=swap"); */

@font-face {
    font-family: 'Arial-Number';
    src: local("Arial");
    font-stretch: 100%;
    /* ascent-override: 89.79%; */
    /* descent-override: 22.36%; */
    /* line-gap-override: 0.00%; */
    /* size-adjust: 107.89%; */
    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-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;
    font-family: "Inter", "Prompt";
    /* font-size: var(--text-sm); */
}

* {
  touch-action: manipulation; /* prevents double-tap zoom */
  -ms-touch-action: manipulation;
}

html {
    scrollbar-gutter: unset;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
}
body.noScroll {
    position: fixed;
    width: 100%;
}
.label {
    color: var(--color-secondary);
    white-space: nowrap;
}
table,
.information {
    font-family: 'Arial-Number', "Inter", "Prompt" !important;
}

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

.font-arial {
    font-family: "Arial-Number", "Inter", "Prompt" !important;
}

thead th,
thead td {
    vertical-align: bottom;
    line-height: normal;
}

thead tr:hover {
    background-color: white !important;
}

tbody tr:hover {

    td,
    th {
        background-color: rgb(238, 238, 238) !important;
        /* border-bottom: 1px solid #d1d5dc!important; */
    }
}

tbody td,
tbody th {
    vertical-align: top;
}


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

a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
}
.currency {
    font-family: Arial!important;
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 8px;
    /* overflow: hidden; */
    overflow: auto;
    display: flex;
    gap: 8px;
    flex-direction: column;
}

#content {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 56px;
    padding-bottom: 50px;
    height: calc(var(--vh, 1vh) * 100);
    /* height: 100vh; */
}





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

.underline {
    text-decoration: underline;
}

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

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

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

.flex-row {
    flex-direction: row;
}

.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-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-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: 16px!important
}

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

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

.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;
    padding-bottom: 4px}

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

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

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


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

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

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

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

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

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

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

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

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

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

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


/*==== [ 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);
}




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

.m-1 {
    margin: 4px
}

.m-2 {
    margin: 8px
}

.m-3 {
    margin: 12px
}

.m-4 {
    margin: 16px
}

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

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

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

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

.mb-2 {
    margin-bottom: 8px
}

.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;
    min-height: 32px;
    font-size: var(--text-sm);
}

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

: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-md);
    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;
}





/*==== [ 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-900);
    margin-bottom: 6px;
}
.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;
}

.badge-dark {
    background-color: var(--neutral-200);
    color: var(--black);
    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: var(--warning-100);
    color: var(--warning-500);
    white-space: nowrap;
}

.badge-warn {
    background-color: var(--warn-100);
    color: var(--warn-900);
    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 {
    color: var(--warning-50);
    background-color: var(--warning-500);
    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: 18px;
    padding: 0 8px;
}
.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: 12px 16px;
    border-radius: var(--rounded-md);
    width: 100%;
    font-size: var(--text-sm);
}

.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-350);
    color: var(--success-900);
    border: 1px solid var(--success-450);
}

.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: var(--warning-100);
    color: var(--warning-900);
    border: 1px solid var(--warning-300);
}

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











/*==== [ NAVBAR ] ====*/
.topbar {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--neutral-300);
    position: fixed;
    width: 100%;
    background-color: var(--white);
    z-index: 1000;
}

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

.avatar {
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}

.avatar:hover {
    opacity: 0.8;
}

.topbar-right-item-user-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--rounded-full);
}
.sidebar-brand {
    height: 56px;
    display: flex;
    align-items: center;
    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);
    min-width: 0;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    height: 100%;
}
.logo-normal {
    color: var(--black);
    font-weight: 500;
    font-size: 22px;
}
.logo-primary {
    color: var(--primary-500);
    font-weight: 500;
    font-size: 22px;
}






/*==== [ 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);
}





/*==== [ CONTENT ] ====*/
.content {
    padding: 16px;
    padding-top: 72px;
    padding-bottom: 62px;
}

.content-title {
    font-size: var(--text-2xl);
    line-height: 1.3;
    font-weight: 700;
    margin-right: 16px;
}






/*==== [ CARD ] ====*/
.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);
}
.card:hover {
    background-color: var(--primary-50);
}
.card-body {
    display: flex;
    flex-direction: column;
}









.box-card, .box-card-md {
    gap: 8px;
    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);
}









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




.indicators {
    display: inline-block;
    width: 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;
    }
}

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

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







/*==== [ 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);
}












/* ==== [ 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);
}

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

.modal__full {
    width: 95% !important;
    max-width: 95%!important;
}















/* ==== [ PROGRESS BAR ] ====*/
.progress {
    appearance: none;
    border-radius: var(--rounded-md);
    width: 100%;
    height: .5rem;
    position: relative;
    overflow: hidden;
}

progress::-moz-progress-bar {
    border-radius: var(--rounded-md);
    background-color: currentColor
}

progress::-webkit-progress-bar {
    border-radius: var(--rounded-md);
    background-color: #0000
}

progress::-webkit-progress-value {
    border-radius: var(--rounded-md);
    background-color: currentColor
}


.progress-primary {
    color: var(--color-primary);
    background-color: var(--primary-100);
}
.progress-success {
    color: var(--color-success);
    background-color: var(--success-100);
}
.progress-error, 
.progress-danger {
    color: var(--color-danger);
    background-color: var(--danger-100);
}











/* ==== [ LOADING ] ====*/
.loading {
    height: 0;
    width: 0;
    padding: 8px;
    margin-left: 4px;
    border: 4px 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: 8px;
}

.loading-xs {
    padding: 4px;
    border-width: 3px;
}












/* ==== [ RESPONSIVE ] ====*/
.menubar {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(1, 1fr);
    /* default: 1 column */
}


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

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

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










/* ---------|  Layout Responsive  |--------- */
.col-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.col-6 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

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

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

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















/*==== [ Indicator ] ====*/
.indicator {
    width: max-content;
    display: inline-flex;
    position: relative;
}

.indicator-item {
    z-index: 1;
    white-space: nowrap;
    top: 0;
    bottom: auto;
    left: auto;
    right: 0;
    translate: 50% -50%;
    position: absolute;
    background-color: var(--danger-500);
    border-radius: 50%;
    color: white;
    width: 15px;
    padding: 8px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: normal;
}




/*==== [ Overall Progress in Modal ] ====*/
.item-report {
    border: 1px solid var(--neutral-300);
    background-color: var(--neutral-100);
    border-radius: var(--rounded-md);
}
.reportHeader {
    font-size: var(--text-lg);
    font-weight: var(--semibold)
}
.reportContent {
    font-size: var(--text-sm)
}
#reportInfo ul {
    padding-left: 21px;
}



/*==== [ 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;
}




/*==== [ 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: 4px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    /* justify-content: space-between; */
}

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



/*==== [ Select Menu ] ====*/
.selectMenu {
    border-bottom: 1px solid var(--neutral-300);
}






/*==== [ 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 * {
    font-weight: var(--semibold);
    background-color: var(--primary-50)!important;
    border-bottom: 1px solid var(--primary-200)!important;
}
.table-col-marge:hover * {
    font-weight: var(--semibold);
    background-color: var(--primary-50)!important;
}

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


/* =================| Footer |================= */
.nav-footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    display: flex;
    overflow-x: hidden;
    z-index: 1000;
    overflow-y: hidden;
    /* box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); */
}
.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
    color: var(--neutral-600);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
    border-top: 1px solid var(--neutral-300);
    /* border-top: 2px solid #a7a7a7ff; */
}
.nav__text {
    line-height: normal;
    font-weight: normal;
}
.nav__link:hover {
    color: var(--primary-600);
    background-color: var(--primary-50);
}
.nav__link--active {
    color: var(--primary-700);
    background-color: var(--primary-50);
    border-top: 2px solid var(--primary-600);
}
.nav__link--active .nav__text{
    font-weight: var(--semibold)!important
}
.nav__icon {
    font-size: 18px;
    line-height: 1;
    padding-top: 4px;
}




















.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-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-200px {
    width: 200px!important
}
.w-250px {
    width: 250px!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
}


.bg-white {
    background-color: var(--white);
}
.bg-secondary {
    background-color: var(--neutral-50);
}
.bg-amber-50 {
    background-color: var(--warning-50);
}

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

#toggleEdit:hover > * {
    color: var(--neutral-800)!important;
}

#refuelTableText tbody tr td {
    padding: 4px 4px
}
.pl-20px {
    padding-left: 20px;
}
.bg-yellow-50 {
    background-color: var(--warning-50)!important;
}

.header-btn {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.tagStatus {
    position: absolute;
    left: -6px;
    top: -8px;
    font-size: 10px;
    padding: 1px 6px;
    background-color: black;
    color: white;
    border-radius: 25px;
    font-weight: var(--semibold);
    
}

.Finish {
    background-color: var(--success-100);
    color: var(--success-700);
    border: 1px solid var(--success-700);
}
.OK {
    background-color: var(--success-700);
    color: white;
    border: 1px solid var(--success-700);
}
.Risk {
    background-color: #ff6100;
    color: white;
    border: 1px solid #ff6100;
}
.Warn {
    background-color: var(--warn-400);
    color: black;
    border: 1px solid var(--warn-400);
}
.Urgent {
    background-color: var(--danger-50);
    color: red;
    border: 1px solid red;
}
.Delay {
    background-color: red;
    color: white;
    border: 1px solid red;
}
.TakeAction {
    background-color: var(--danger-50);
    color: red;
    border: 1px solid red;
}

.cardFinish:hover {
    border: 1px solid var(--success-700);
    background-color: var(--success-50);
}
.cardOK:hover  {
    border: 1px solid var(--success-700);
    background-color: var(--success-50);
}
.cardRisk:hover  {
    border: 1px solid #ff6100;
    background-color: #fff5ee;
}
.cardWarn:hover  {
    border: 1px solid var(--warn-400);
    background-color: var(--warn-50);
}
.cardUrgent:hover  {
    border: 1px solid red;
    background-color: var(--danger-50);
}
.cardDelay:hover  {
    border: 1px solid red;
    background-color: var(--danger-50);
}
.cardTakeAction:hover  {
    border: 1px solid red;
    background-color: var(--danger-50);
}
.cardSuspend:hover  {
    background-color: var(--danger-50);
}
.cardFinished:hover  {
    background-color: var(--success-50);
}
.cardUnknown:hover  {
    background-color: var(--neutral-50);
}
.cardProjectID {
    padding: 0px 6px;
    background-color: var(--primary-100);
    border-radius: 6px;
    color: var(--primary-500);
    font-size: 14px;
    margin-bottom: 2px ;
}

.tagOnGoing {
    background-color: var(--primary-100);
    color: var(--color-primary);
}
.tagSuspend {
    background-color: var(--danger-100);
    color: var(--danger-600);
}
.tagUnknown {
    background-color: var(--neutral-200);
    color: var(--neutral-900);
}
.tagFinished {
    background-color: var(--success-100);
    color: var(--success-700);
}

.fs-16px {
    font-size: 16px;
}


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


/* =================| Table (Additional) |================= */
.item-area {
    font-size: var(--text-sm);
    width: 100%;
}
/* Information Table */
.info {
    display: grid;
    grid-template-columns: 180px auto;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
    align-items: center;
}
.info:hover {
    background-color: var(--neutral-50);
}
.info:last-child {
    border-bottom: none;
}
.info-header {
    line-height: 1;
    font-weight: 600;
}
@media (max-width: 375px) {
    .info {
        grid-template-columns: 1fr;
    }
}
.info-content {
    line-height: 1;
}

.no-underline {
    text-decoration: none;
}
.split {
    color: #eee;
    /* font-weight: 300; */
}

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

#captureButton {
    line-height: 0;
    flex: 1;
    text-align: right;
}



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

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

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

.toggle-icon i {
    font-weight: normal;
    color: var(--color-secondary);
    padding: 0 4px
}