/* Theme palettes */
:root {
  /* defaults (dark as current baseline) */
  --bs-main: #3a9821;
  --bs-main-50: #eaf5e6;
  --bs-main-100: var(--bs-main-50);
  --bs-main-200: #cbf2c0;
  --bs-main-300: #b6eca7;
  --bs-main-400: #71d256;
  --bs-main-500: var(--bs-main);
  --bs-main-600: var(--bs-main);
  --bs-main-700: #2f7d1b;
  --bs-main-800: #295f1c;
  --bs-main-900: #234e19;
  --bs-main-950: #0e2b08;
  --bs-main-hover: var(--bs-main-700);
  --bs-accent: #e0791c;
  --bs-accent-hover: #c96310;
  --bs-accent-subtle: #fff3e6;
  --bs-primary: var(--bs-main);
  --bs-primary-rgb: 58, 152, 33;
  --bs-body-bg: #f7f8f6;
  --bs-text: #263238;
  --bs-border-color: #e6ece8;

  /* Colors */
  --bs-purple: #a855f7;
  --bs-pink: #d63384;
  --bs-red: #ef4444;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #22c55e;
  --bs-cyan: #0dcaf0;
  --tix-wait: #ffaf00;
  --tix-done: #fd7c71;
  --tix-confirm: #22c55e;
  --tix-checkin: #ffaf00;
  --tix-walkin: #9789d4;
  --tix-appt: #00bed6;
  --tix-inservice: #4ab72e;
  --tix-closed: var(--bs-gray-500);
  --tix-noshow: var(--bs-red);
  --tix-cancelled: var(--bs-gray-500);
  --tix-wait-r: 255, 175, 0;
  --tix-done-r: 249, 95, 83;
  --tix-confirm-r: 34, 197, 94;
  --tix-checkin-r: 255, 175, 0;
  --tix-inservice-r: var(--bs-primary-rgb);
  --tix-closed-r: 173, 181, 189;
  --tix-noshow-r: 173, 181, 189;
  --tix-cancelled-r: 108, 117, 125;
  --sc-tab-bg-group: var(--bs-body-bg);
  --sc-tab-text: #4b5563;
  --sc-tab-text-muted: #6b7280;
  --sc-tab-active-bg: var(--bs-main-50);
  --sc-tab-active-text: var(--bs-main-800);
  --sc-tab-badge-bg: var(--bs-border-color);
  /* font size and pixel */
  --vh: 1;
  --scale: 1;
  --px-2: calc(2px * var(--scale));
  --px-4: calc(4px * var(--scale));
  --px-5: calc(5px * var(--scale));
  --px-6: calc(6px * var(--scale));
  --px-8: calc(8px * var(--scale));
  --px-10: calc(10px * var(--scale));
  --px-12: calc(12px * var(--scale));
  --px-14: calc(14px * var(--scale));
  --px-16: calc(16px * var(--scale));
  --px-18: calc(16px * var(--scale));
  --px-20: calc(20px * var(--scale));
  --px-22: calc(22px * var(--scale));
  --px-24: calc(24px * var(--scale));
  --px-25: calc(25px * var(--scale));
  --px-26: calc(26px * var(--scale));
  --px-28: calc(28px * var(--scale));
  --px-30: calc(30px * var(--scale));
  --px-32: calc(32px * var(--scale));
  --px-36: calc(36px * var(--scale));
  --px-40: calc(40px * var(--scale));
  --px-44: calc(44px * var(--scale));
  --px-48: calc(48px * var(--scale));
  --px-50: calc(50px * var(--scale));
  --px-52: calc(52px * var(--scale));
  --px-56: calc(56px * var(--scale));
  --px-60: calc(60px * var(--scale));
  --px-64: calc(64px * var(--scale));
  --px-68: calc(68px * var(--scale));
  --px-72: calc(72px * var(--scale));
  --px-76: calc(76px * var(--scale));
  --px-80: calc(80px * var(--scale));
  --px-84: calc(84px * var(--scale));
  --px-88: calc(88px * var(--scale));
  --px-90: calc(90px * var(--scale));
  --px-92: calc(92px * var(--scale));
  --px-96: calc(96px * var(--scale));
  --px-100: calc(100px * var(--scale));
  --px-104: calc(104px * var(--scale));
  --px-108: calc(108px * var(--scale));
  --px-110: calc(110px * var(--scale));
  --px-112: calc(112px * var(--scale));
  --px-116: calc(116px * var(--scale));
  --px-120: calc(120px * var(--scale));
  --px-122: calc(122px * var(--scale));
  --px-124: calc(124px * var(--scale));
  --px-128: calc(128px * var(--scale));
  --px-130: calc(130px * var(--scale));
  --px-132: calc(132px * var(--scale));
  --px-136: calc(136px * var(--scale));
  --px-140: calc(140px * var(--scale));
  --px-144: calc(144px * var(--scale));
  --px-148: calc(148px * var(--scale));
  --px-152: calc(152px * var(--scale));
  --px-156: calc(156px * var(--scale));
  --px-160: calc(160px * var(--scale));
  --px-164: calc(164px * var(--scale));
  --px-168: calc(168px * var(--scale));
  --px-172: calc(172px * var(--scale));
  --px-176: calc(176px * var(--scale));
  --px-180: calc(180px * var(--scale));
  --px-184: calc(184px * var(--scale));
  --px-188: calc(188px * var(--scale));
  --px-192: calc(192px * var(--scale));
  --px-196: calc(196px * var(--scale));
  --px-200: calc(200px * var(--scale));
  --px-204: calc(204px * var(--scale));
  --px-208: calc(208px * var(--scale));
  --px-212: calc(212px * var(--scale));
  --px-216: calc(216px * var(--scale));
  --px-220: calc(220px * var(--scale));
  --px-224: calc(224px * var(--scale));
  --px-228: calc(228px * var(--scale));
  --px-232: calc(232px * var(--scale));
  --px-236: calc(236px * var(--scale));
  --px-240: calc(240px * var(--scale));
  --px-244: calc(244px * var(--scale));
  --px-248: calc(248px * var(--scale));
  --px-252: calc(252px * var(--scale));
  --px-256: calc(256px * var(--scale));
  --px-260: calc(260px * var(--scale));
  --px-264: calc(264px * var(--scale));
  --px-268: calc(268px * var(--scale));
  --px-272: calc(272px * var(--scale));
  --px-276: calc(276px * var(--scale));
  --px-280: calc(280px * var(--scale));
  --px-284: calc(284px * var(--scale));
  --px-288: calc(288px * var(--scale));
  --px-292: calc(292px * var(--scale));
  --px-296: calc(296px * var(--scale));
  --px-300: calc(300px * var(--scale));
  --px-304: calc(304px * var(--scale));
  --px-308: calc(308px * var(--scale));
  --px-312: calc(312px * var(--scale));
  --px-316: calc(316px * var(--scale));
  --px-320: calc(320px * var(--scale));
  --px-324: calc(324px * var(--scale));
  --px-328: calc(328px * var(--scale));
  --px-332: calc(332px * var(--scale));
  --px-336: calc(336px * var(--scale));
  --px-340: calc(340px * var(--scale));
  --px-344: calc(344px * var(--scale));
  --px-348: calc(348px * var(--scale));
  --px-350: calc(350px * var(--scale));
  --px-352: calc(352px * var(--scale));
  --px-356: calc(356px * var(--scale));
  --px-360: calc(360px * var(--scale));
  --px-364: calc(364px * var(--scale));
  --px-368: calc(368px * var(--scale));
  --px-372: calc(372px * var(--scale));
  --px-376: calc(376px * var(--scale));
  --px-380: calc(380px * var(--scale));
  --px-384: calc(384px * var(--scale));
  --px-388: calc(388px * var(--scale));
  --px-392: calc(392px * var(--scale));
  --px-396: calc(396px * var(--scale));
  --px-400: calc(400px * var(--scale));
  --px-420: calc(420px * var(--scale));
  --px-430: calc(430px * var(--scale));
  --px-440: calc(440px * var(--scale));
  --px-450: calc(450px * var(--scale));
  --px-460: calc(460px * var(--scale));
  --px-480: calc(480px * var(--scale));
  --px-500: calc(500px * var(--scale));
  --px-550: calc(550px * var(--scale));
  --px-570: calc(570px * var(--scale));
  --px-600: calc(600px * var(--scale));
  --px-620: calc(620px * var(--scale));
  --px-640: calc(640px * var(--scale));
  --px-650: calc(650px * var(--scale));
  --px-690: calc(690px * var(--scale));
  --px-700: calc(700px * var(--scale));
  --px-710: calc(710px * var(--scale));
  --px-800: calc(800px * var(--scale));
  --px-820: calc(820px * var(--scale));
  --px-860: calc(860px * var(--scale));
  --px-880: calc(880px * var(--scale));
  --px-900: calc(900px * var(--scale));
  --px-950: calc(950px * var(--scale));
  --px-970: calc(970px * var(--scale));
  --px-988: calc(988px * var(--scale));
  --px-998: calc(998px * var(--scale));
  --px-1100: calc(1100px * var(--scale));
  --px-1200: calc(1200px * var(--scale));
  /**/
  --s-8: calc(8px * var(--scale)) / calc(11px * var(--scale)) Sora, sans-serif;
  --s-10: calc(10px * var(--scale)) / calc(13px * var(--scale)) Sora, sans-serif;
  --s-11: calc(11px * var(--scale)) / calc(14px * var(--scale)) Sora, sans-serif;
  --s-12: calc(12px * var(--scale)) / calc(15px * var(--scale)) Sora, sans-serif;
  --s-13: calc(13px * var(--scale)) / calc(16px * var(--scale)) Sora, sans-serif;
  --s-14: calc(14px * var(--scale)) / calc(15px * var(--scale)) Sora, sans-serif;
  --s-15: calc(15px * var(--scale)) / calc(19px * var(--scale)) Sora, sans-serif;
  --s-16: calc(16px * var(--scale)) / calc(19px * var(--scale)) Sora, sans-serif;
  --s-17: calc(17px * var(--scale)) / calc(20px * var(--scale)) Sora, sans-serif;
  --s-18: calc(18px * var(--scale)) / calc(22px * var(--scale)) Sora, sans-serif;
  --s-19: calc(19px * var(--scale)) / calc(23px * var(--scale)) Sora, sans-serif;
  --s-20: calc(20px * var(--scale)) / calc(24px * var(--scale)) Sora, sans-serif;
  --s-22: calc(22px * var(--scale)) / calc(27px * var(--scale)) Sora, sans-serif;
  --s-24: calc(24px * var(--scale)) / calc(37px * var(--scale)) Sora, sans-serif;
  --s-25: calc(25px * var(--scale)) / calc(30px * var(--scale)) Sora, sans-serif;
  --s-26: calc(26px * var(--scale)) / calc(32px * var(--scale)) Sora, sans-serif;
  --s-28: calc(28px * var(--scale)) / calc(34px * var(--scale)) Sora, sans-serif;
  --s-30: calc(30px * var(--scale)) / calc(37px * var(--scale)) Sora, sans-serif;
  --s-32: calc(32px * var(--scale)) / calc(39px * var(--scale)) Sora, sans-serif;
  --s-38: calc(38px * var(--scale)) / calc(42px * var(--scale)) Sora, sans-serif;
  --s-45: calc(45px * var(--scale)) / calc(55px * var(--scale)) Sora, sans-serif;
  --s-50: calc(50px * var(--scale)) / calc(61px * var(--scale)) Sora, sans-serif;
  --s-54: calc(54px * var(--scale)) / calc(66px * var(--scale)) Sora, sans-serif;
  --s-80: calc(80px * var(--scale)) / calc(98px * var(--scale)) Sora, sans-serif;
  --shadow: 0px 1px 3px 0px rgba(60, 64, 67, 0.3), 0px 4px 8px 3px rgba(60, 64, 67, 0.15);
  --qs-drawer-collapsed: 72vw;
  --qs-drawer-expanded: 95vw;
  --custom-width: var(--qs-drawer-collapsed, 72vw);
  --perf-dash-primary: #0ea5e9;
  --perf-dash-primary-light: #e0f2fe;
  --perf-dash-success: #10b981;
  --perf-dash-success-light: #d1fae5;
  --perf-dash-warning: #f59e0b;
  --perf-dash-warning-light: #fef3c7;
  --perf-dash-danger: #ef4444;
  --perf-dash-danger-light: #fee2e2;
  --perf-dash-purple: #8b5cf6;
  --perf-dash-purple-light: #ede9fe;
  --perf-dash-pink: #ec4899;
  --perf-dash-pink-light: #fce7f3;
  --perf-dash-indigo: #6366f1;
  --perf-dash-indigo-light: #e0e7ff;
  --perf-dash-emerald: #059669;
  --perf-dash-emerald-light: #d1fae5;
  --perf-dash-amber: #d97706;
  --perf-dash-amber-light: #fef3c7;
  --perf-dash-gray-50: var(--bs-body-bg);
  --perf-dash-gray-100: var(--bs-body-bg);
  --perf-dash-gray-200: var(--bs-border-color);
  --perf-dash-gray-300: #d1d5db;
  --perf-dash-gray-400: #9ca3af;
  --perf-dash-gray-500: #6b7280;
  --perf-dash-gray-600: #4b5563;
  --perf-dash-gray-700: var(--bs-text);
  --perf-dash-gray-800: var(--bs-text);
  --perf-dash-gray-900: var(--bs-text);
  --perf-dash-white: #ffffff;
  --perf-dash-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --perf-dash-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --perf-dash-radius-lg: 12px;
  --perf-dash-radius-xl: 16px;
  --w-popup: calc(var(--px-998) + var(--px-60));
  --custom-height: var(--px-56);
  --top-popup: var(--px-56);
}

/* Dark mode */
body[data-theme="dark"] {
  /* Surfaces */
  --bs-body-bg: #0f1216;
  --bs-surface-bg: #151a20;
  /* cards, panels */
  --bs-surface-bg-o: #ffffff3d;
  /* cards, panels */
  --bs-surface-2-bg: #1b222b;
  /* modals, popovers */
  --bs-muted-bg: #0b0e12;
  --bg-body-main: #f8fafd;
  /* Text */
  --bs-body-color: #e6e9ee;
  --bs-heading-color: #f2f4f7;
  --bs-text: #dedede;
  --bs-text-muted: #898989;
  --bs-placeholder-color: #7e8a96;
  --color-item-menu: rgb(239 217 180);
  /* Borders / dividers */
  --bs-border-color: #2a313a;
  --bs-border-strong: #3a4450;
  --bs-divider-color: rgba(255, 255, 255, 0.08);
  --bs-border-calendar: #e5e7eb;
  /* Forms */
  --bs-input-bg: #12181f;
  --bs-input-color: #e6e9ee;
  --bs-input-border-color: #2f3944;
  --bs-input-placeholder-color: var(--bs-placeholder-color);
  --bs-input-focus-border-color: var(--bs-main-400);
  /* #f28745 */
  --bs-input-focus-ring-color: rgba(238, 97, 25, 0.35);
  /* from --bs-main */
  /* Links */
  --bs-link-color: var(--bs-main-400);
  /* #f28745 */
  --bs-link-hover-color: var(--bs-main-300);
  /* #f7b17a */
  /* Shadows (subtle on dark) */
  --bs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --bs-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
  --bs-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.02);
  --bs-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.03);
}

/* Light mode */
body,
body[data-theme="light"] {
  /* Surfaces */
  --bg-body-main: var(--bs-body-bg);
  --bs-surface-bg: #ffffff;
  /* cards, panels */
  --bs-surface-bg-o: var(--bs-body-bg);
  /* cards, panels */
  --bs-surface-2-bg: var(--bs-body-bg);
  /* modals, popovers */
  --bs-muted-bg: var(--bs-body-bg);
  /* Text */
  --bs-body-color: var(--bs-text);
  --bs-heading-color: var(--bs-text);
  --text-white: #ffffff;
  --bs-text-muted: #6b7280;
  --bs-placeholder-color: #9ca3af;
  --color-item-menu: var(--bs-text);
  --bs-gray-light: #aab2bd;
  /* Borders / dividers */
  --bs-border-strong: var(--bs-border-color);
  --bs-divider-color: var(--bs-border-color);
  --bs-border-calendar: #e4e4e4;
  /* Forms */
  --bs-input-bg: var(--bs-body-bg);
  --bs-input-color: var(--bs-text);
  --bs-input-border-color: var(--bs-border-color);
  --bs-input-placeholder-color: var(--bs-placeholder-color);
  --bs-input-focus-border-color: var(--bs-main-500);
  /* #7fad49 */
  --bs-input-focus-ring-color: rgba(58, 152, 33, 0.35);
  /* from --bs-main */
  /* Links */
  --bs-link-color: var(--bs-main-600);
  /* #5a7e32 */
  --bs-link-hover-color: var(--bs-main-700);
  /* #45612a */
  /* Shadows */
  --bs-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-1: 0px 0px 2px 0px rgb(196 196 196 / 30%), 0px 1px 3px 1px rgba(60, 64, 67, 0.15);
  --bs-shadow-sm: 3px 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
  --bs-shadow-md: 0 4px 8px rgba(16, 24, 40, 0.12), 0 2px 4px rgba(16, 24, 40, 0.06);
  --bs-shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.14), 0 2px 12px rgba(16, 24, 40, 0.08);
  /* checkout modal */
  --bs-main-light: var(--bs-main-100);
  --bs-main-border: var(--bs-main-300);
  --qs-cash-bg: #f0fdf4;
  --qs-cash-border: #bbf7d0;
  --qs-cash-label: #15803d;
  --qs-cash-amount: #166534;
  --qs-cash-detail: #16a34a;
  --qs-cash-btn-border: #e5e7eb;
  --qs-cash-btn-hover-border: #d1d5db;
  --qs-cash-btn-selected-border: #10b981;
  --qs-cash-btn-selected-bg: #f0fdf4;
  --qs-cash-input-outline: rgba(16, 185, 129, 0.1);
  --qs-gray-900: var(--bs-text);
  --qs-gray-700: var(--bs-text);
  --qs-gray-600: #6b7280;
  --bs-btn-check: #f3f4f6;
  --bs-text-reassign: #1d4ed8;
  --border-checkout-gift: #f3e8ff;
  --bs-text-discount: var(--bs-accent);
  --bs-text-remove: #7e22ce;
  --theme-mode-text: var(--bs-text);
  --theme-mode-border: var(--bs-border-color);
  --theme-mode-bs-100: var(--bs-body-bg);
  --theme-mode-btn-text: #1a468e;
  --bs-header-cart: #f9fafb;
  --perf-dash-info: #4c5563;
  --staff-fee-bg: #fffbeb;
  --staff-fee-border: #fde68a;
  --staff-fee-text: #92400e;
  --bs-keyboard-bg: var(--bs-body-bg);
}

/* Recommended usage */
body {
  background-color: var(--bg-body-main);
  color: var(--bs-text);
  width: 100vw;
  display: flex;
  overflow: hidden;
  height: 100dvh !important;
  flex-direction: column;
  position: relative;
  font-family:
    "Sora",
    "Segoe UI",
    system-ui,
    -apple-system,
    Roboto,
    Arial,
    sans-serif;
  margin: 0;
}

.dis-none {
  display: none !important;
}

.popup-container {
  display: flex;
  z-index: 1060;
  overflow: auto;
  max-height: 90svh;
  border-radius: var(--px-8);
  box-shadow: var(--bs-shadow-lg);
  transform: translate(2px, -2px);
  background: white;
}

.popup-container.infostore {
  top: var(--px-68) !important;
}

.popup-container.infostore .store-name {
  font: normal normal 600 var(--s-18);
}

.popup-container.infostore .store-email {
  font: normal normal 400 var(--s-13);
}

.popup-container.overflow-none {
  overflow: unset;
}

.popup-container.top-fit {
  top: var(--px-68) !important;
  left: unset !important;
  right: var(--px-12) !important;
  height: calc(100svh - var(--px-112));
}

.popup-container.has-close-btn {
  overflow: unset !important;
}

.popup-container.top-fit-o {
  top: var(--px-52) !important;
}

.popup-container.fit-content {
  height: fit-content;
}

.popup-container.box-shadow {
  box-shadow:
    0 12px 28px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.popup-container.scale-form {
  height: unset;
}

.popup-container.visible {
  overflow: visible;
}

.popup-container.adjust-calendar {
  transform: translateX(-32px);
}

.popup-container.option-book-or-block {
  transform: translate(0, calc(-50% + var(--height-row) / 2));
}

.popup-content {
  display: flex;
  flex-direction: column;
}

.popup-sidebar-append-id {
  height: 100%;
  display: flex;
  width: var(--px-690);
  gap: var(--px-8);
  flex-direction: column;
  padding: var(--px-16);
  border-radius: var(--px-12);
  background: white;
  box-shadow:
    0 12px 28px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.popup-sidebar-append-id p.title {
  color: black;
  font: normal normal 600 var(--s-16);
  padding: var(--px-12) 0;
}

.popup-sidebar-append-id p.title.menu {
  font: normal normal 600 var(--s-22);
  color: black;
  padding: 2px 6px;
}

.btn-close-popover {
  display: flex;
  position: absolute;
  left: calc(var(--px-60) * -1);
  top: var(--px-4);
  background: white;
  box-shadow: var(--shadow) !important;
  height: var(--px-48);
  width: var(--px-48);
  border-radius: var(--px-48);
  color: black;
  font-size: var(--px-20);
  border: 1px solid var(--bs-gray-300);
}

.btn-close-popover.no-position {
  position: unset;
  border: 1px solid var(--bs-gray-300);
}

.btn-menu-item img {
  height: var(--px-36);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 100%;
  /* background: var(--bs-gray-200); */
  position: absolute;
  right: 0;
  border: 1px solid var(--bs-gray-300);
}

input[type="checkbox"] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label.checkbox {
  margin: 0;
  display: block;
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
  width: var(--px-48);
  height: var(--px-24);
  background: var(--bs-border-color);
  position: relative;
  border-radius: var(--px-60);
}

label.checkbox:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--px-2);
  width: var(--px-20);
  height: var(--px-20);
  background: #fff;
  border-radius: var(--px-8);
  transition: 0.5s;
}

input:checked + label.checkbox {
  background: var(--main-color);
  border: 1px solid var(--bs-border-color);
}

input:checked + label.checkbox:after {
  left: calc(100% - var(--px-2));
  transform: translate(-100%, -50%);
}

label.checkbox:active:after {
  width: 130px;
}

.toggle-option {
  display: flex;
  gap: var(--px-10);
  align-items: center;
  height: var(--px-36);
}

div.toggle-btn {
  display: flex;
}

div.toggle-btn label {
  cursor: pointer;
  width: var(--px-32);
  height: var(--px-16);
  background: var(--bs-body-bg);
  display: block;
  border-radius: var(--px-20);
  position: relative;
  border: 1px solid var(--bs-border-color);
}

div.toggle-btn label:after {
  content: "";
  top: 1px;
  left: 1px;
  transition: 0.3s;
  position: absolute;
  width: var(--px-12);
  height: var(--px-12);
  background: var(--bs-white);
  border-radius: var(--px-16);
}

input[type="checkbox"]:checked + label {
  background: var(--bs-main-500);
}

input[type="checkbox"]:checked + label:after {
  left: calc(100% - 1px);
  transform: translateX(-100%);
}

div.toggle-btn label:active:after {
  width: var(--px-44);
}

button:not(.pswp__button) {
  z-index: 0;
  outline: unset;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button {
  border: 0;
  display: flex;
  flex-shrink: 0;
  gap: var(--px-8);
  align-items: center;
  height: var(--px-40);
  color: white;
  justify-content: center;
  background: var(--bs-main);
  border-radius: 6px;
  font: normal normal 500 var(--s-13);
  padding: var(--px-8);
}

button::before {
  content: "";
  display: block;
  opacity: 1;
  position: absolute;
  transition-duration: 0.05s;
  transition-timing-function: cubic-bezier(0.6, 0, 0.2, 1);
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: unset;
  border-radius: 4px;
  transform: scale(0);
  transition-property: transform, opacity;
}

button:active::before {
  opacity: 1;
  transform: scale(1.2);
}

button:active > * {
  animation: scale-click 0.2s;
}

button:active {
  background: var(--bs-surface-bg);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
div,
span,
label,
input,
text,
b {
  margin: 0;
  font-family: Sora, sans-serif;
}

/* Đặt nền và kích thước chung cho header */
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--px-16);
  background-color: var(--bs-surface-bg);
  border-bottom: 2px solid var(--bs-border-color);
  position: relative;
  max-height: var(--px-56);
  flex: 1;
  width: 100%;
  box-shadow: var(--bs-shadow-sm);
}

.custom-left-header {
  display: flex;
  align-items: center;
  gap: var(--px-12);
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  flex-shrink: 0;
}

/* Logo */
.custom-logo-container .custom-logo-link {
  display: block;
}

.custom-logo {
  height: 52px;
  /* Điều chỉnh kích thước logo */
}

/* Thanh tìm kiếm */
.custom-search-container {
  display: flex;
  align-items: center;
  background-color: var(--bs-body-bg);
  border-radius: var(--px-24);
  padding: 4px var(--px-12);
  gap: 8px;
  height: var(--px-40);
  font: normal normal 500 var(--s-14);
}

.custom-search-input {
  border: none;
  background: transparent;
  flex: 1;
  font: normal normal 400 var(--s-14);
  height: 100%;
}

.custom-search-input:focus {
  border: none;
  outline: none;
}

.custom-search-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.custom-search-btn i {
  font-size: var(--px-16);
  color: var(--bs-text-muted);
  font-weight: 400;
}

/* Navigation Menu */
.custom-nav {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  width: auto;
  height: 100%;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.custom-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  align-items: center;
  pointer-events: auto;
}

.custom-nav-item {
  margin: 0 10px;
  min-width: var(--px-108);
  color: var(--bs-text-muted);
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
}

.custom-nav-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  /* width: 100%; */
  height: var(--px-48);
  font: normal normal 400 var(--s-22);
}

.bg-blue-main-100 {
  background: var(--bs-main-100) !important;
}

.bg-blue-main-200 {
  background: var(--bs-main-200) !important;
}

.bg-blue-main-300 {
  background: var(--bs-main-300) !important;
}

.bg-blue-main-400 {
  background: var(--bs-main-400) !important;
}

.bg-blue-main-500 {
  background: var(--bs-main-500) !important;
}

.bg-blue-main-600 {
  background: var(--bs-main-600) !important;
}

.bg-blue-main-700 {
  background: var(--bs-main-700) !important;
}

.bg-blue-main-800 {
  background: var(--bs-main-800) !important;
}

.bg-blue-main-900 {
  background: var(--bs-main-900) !important;
}

.bg-blue-main {
  background: var(--bs-main) !important;
}

/* Hover variants for blue main palette */
.bg-blue-main-100-hover:hover {
  background: var(--bs-main-100) !important;
  color: white !important;
}

.bg-blue-main-200-hover:hover {
  background: var(--bs-main-200) !important;
  color: white !important;
}

.bg-blue-main-300-hover:hover {
  background: var(--bs-main-300) !important;
  color: white !important;
}

.bg-blue-main-400-hover:hover {
  background: var(--bs-main-400) !important;
  color: white !important;
}

.bg-blue-main-500-hover:hover {
  background: var(--bs-main-hover) !important;
  color: white !important;
}

.bg-blue-main-600-hover:hover {
  background: var(--bs-main-hover) !important;
  color: white !important;
}

.bg-blue-main-700-hover:hover {
  background: var(--bs-main-700) !important;
  color: white !important;
}

.bg-blue-main-800-hover:hover {
  background: var(--bs-main-800) !important;
  color: white !important;
}

.bg-blue-main-900-hover:hover {
  background: var(--bs-main-900) !important;
  color: white !important;
}

.bg-blue-main-hover:hover {
  background: var(--bs-main-hover) !important;
  color: white !important;
}

/* Ensure icons inside fullscreen button change color on hover */
.bg-blue-main-hover:hover .lucide {
  color: white !important;
}

.bg-white-hover:hover {
  background: #ecebf4 !important;
}

.bg-transparent {
  background: transparent !important;
}

.btn-main-hover:hover {
  background: var(--bs-main-hover) !important;
  color: white;
}

.btn-main-hover:hover i,
.btn-main-hover:hover svg {
  color: white !important;
}

.custom-nav-btn i {
  font-weight: 400;
  color: var(--bs-text-muted);
}

.custom-nav-item.active {
  position: relative;
}

.custom-nav-item.active .custom-nav-btn i {
  color: var(--bs-main);
  font-weight: 600;
}

.custom-nav-item.active::after {
  position: absolute;
  content: "";
  bottom: -3px;
  left: 50%;
  width: 75%;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background-color: var(--bs-main);
  transform: translateX(-50%);
}

/* Profile */
.custom-right-header {
  display: flex;
  align-items: center;
  gap: var(--px-8);
  z-index: 1;
  margin-left: auto;
  flex-shrink: 0;
}

.custom-profile-container {
  display: flex;
  align-items: center;
  position: relative;
}

.custom-profile-btn {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.custom-profile-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #71d256, #3a9821);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: box-shadow 150ms ease;
}

.custom-profile-btn:hover .custom-profile-avatar {
  box-shadow: 0 0 0 3px rgb(99 169 241 / 25%);
}

.container-body-layout {
  flex: 1;
  overflow: hidden;
}

footer {
  flex: 1;
  display: flex;
  align-items: center;
  max-height: var(--px-32);
  padding: 0 var(--px-24);
  justify-content: space-between;
  font: normal normal 400 var(--s-12);
  flex-direction: row;
  overflow: auto hidden;
  flex-wrap: nowrap;
  align-items: center;
  flex: 1;
  gap: var(--px-16);
  box-shadow: 0 -2px 4px #d1d1d180;
  background: var(--bs-surface-bg);
  border-top: 1px solid var(--bs-border-color);
}

#footer-timline-id {
  min-height: 24px;
  max-height: 24px;
  padding: 0 20px;
  justify-content: space-between;
  color: var(--bs-text-muted);
  background: var(--bs-surface-bg);
  box-shadow: 0 -1px 6px rgb(29 51 39 / 10%);
}

#footer-timline-id .footer-status-group {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  height: 100%;
}

#footer-timline-id .col-info {
  gap: 7px;
  min-height: 22px;
  padding: 0 18px;
  border-right: 1px solid var(--bs-border-color);
  font-size: 11px;
  line-height: 1;
}

#footer-timline-id .footer-status-group .col-info:first-child {
  padding-left: 0;
}

#footer-timline-id .footer-status-group .col-info:last-child {
  border-right: 0;
}

#footer-timline-id .col-info > i {
  font-size: 12px;
}

#footer-timline-id .col-info > i {
  color: var(--bs-gray);
  font-weight: 400;
}

#footer-timline-id .col-info strong {
  color: var(--bs-text);
  font-weight: 600;
}

#footer-timline-id .footer-system-time {
  color: var(--bs-text);
}

#footer-timline-id .footer-system-time strong {
  min-width: 82px;
  font-variant-numeric: tabular-nums;
}

#footer-timline-id .footer-powered-by {
  gap: 5px;
  font-size: 10px;
}

@media (max-width: 640px) {
  #footer-timline-id {
    min-height: 24px;
    max-height: 24px;
    padding: 0 8px;
    overflow: hidden;
  }

  #footer-timline-id .footer-status-group {
    width: 100%;
    justify-content: space-between;
  }

  #footer-timline-id .col-info {
    flex: 1 1 0;
    justify-content: flex-start;
    gap: 5px;
    min-width: 0;
    padding: 0 7px;
    border-right: 0;
    flex-direction: row;
    font-size: 10px;
    text-align: left;
  }

  #footer-timline-id .col-info > i {
    flex: 0 0 auto;
    font-size: 10px;
  }

  #footer-timline-id .col-info span {
    display: none;
  }

  #footer-timline-id .col-info strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
  }

  #footer-timline-id .footer-system-time {
    order: 2;
  }

  #footer-timline-id .footer-store-date {
    order: 1;
  }

  #footer-timline-id .footer-timezone {
    order: 3;
  }

  #footer-timline-id .footer-meta {
    display: none;
  }
}

@media (max-width: 420px) {
  #footer-timline-id .col-info {
    padding-inline: 4px;
    gap: 4px;
  }

  #footer-timline-id .col-info span {
    display: none;
  }

  #footer-timline-id .col-info strong {
    min-width: 0;
    font-size: 9px;
  }

  #footer-timline-id .footer-system-time strong {
    min-width: 0;
  }
}

footer .col-info {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

footer .col-info.flex-1 {
  flex: 1;
  justify-content: end;
}

footer .col-info img {
  width: var(--px-20);
  height: var(--px-20);
}

footer .footer-meta {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

footer .footer-powered-by {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  color: #6b7280;
  font: normal normal 400 var(--s-12);
  line-height: 1;
  white-space: nowrap;
}

footer .footer-powered-by img {
  width: var(--px-24);
  height: var(--px-24);
  object-fit: contain;
}

/* Tooltip */
.tooltip {
  font: normal normal 400 var(--s-14);
}

.tooltip-arrow {
  display: none !important;
}

/* Operation */
.container-swift-operation {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.container-swift-operation section.swift-general {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.flat-calendar-navigator {
  width: 100%;
  position: relative;
  user-select: none;
  padding: var(--px-8);
  border-bottom: 1px solid var(--bs-border-color);
  padding-top: 0;
}

.flat-calendar-navigator table {
  width: 100%;
  color: var(--bs-text);
  font: normal normal 400 var(--s-12);
}

.flat-calendar-navigator table tr {
  height: var(--px-32);
}

.flat-calendar-navigator table tr .date-pick,
.flat-calendar-navigator table tr th:not(.cur-month) {
  text-align: center;
}

.flat-calendar-navigator table th.cur-month {
  padding: var(--px-8);
  text-transform: uppercase;
}

.flat-calendar-navigator table td,
.flat-calendar-navigator table th.nav-btn {
  border-radius: 4px;
}

.flat-calendar-navigator table td.passed-date:not(.today) {
  opacity: 0.6;
  cursor: not-allowed;
  text-decoration: line-through;
}

.flat-calendar-navigator table .prev-btn,
.flat-calendar-navigator table .next-btn {
  cursor: pointer;
  border-radius: 50%;
  color: var(--bs-blue);
  font-size: var(--px-20);
}

.flat-calendar-navigator table .prev-btn:hover,
.flat-calendar-navigator table .next-btn:hover {
  background-color: var(--bs-main-100);
}

.flat-calendar-navigator table .today-btn {
  cursor: pointer;
  background: var(--bs-surface-bg);
}

.flat-calendar-navigator table tr .date-pick:not(.current-month) {
  color: rgb(112, 117, 122);
  opacity: 0.5;
}

.flat-calendar-navigator table tr .date-pick.today {
  color: var(--bs-main);
  font-weight: 600;
  background-color: var(--bs-dudu-o);
}

.flat-calendar-navigator table tr .date-pick.selected {
  color: white;
  background-color: var(--bs-main);
  border-radius: 100%;
}

.flat-calendar-navigator table tr td:hover {
  cursor: pointer;
  background-color: var(--bs-main-100);
  color: var(--bs-main);
}

.container--checkbox {
  display: flex;
  margin: 0px;
  position: relative;
  cursor: pointer;
  height: var(--px-24);
  width: var(--px-24);
  align-items: center;
  justify-content: center;
}

.container--checkbox::before {
  display: table;
  content: " ";
}

container--checkbox::after {
  left: 0px;
  height: var(--px-4);
  width: 100%;
  content: "";
  bottom: -1px;
  background: rgb(255, 255, 255);
  position: absolute;
}

.container--checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0px;
  width: 0px;
}

.container--checkbox .checkmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: var(--px-16);
  width: var(--px-16);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 6px;
  border: 1px solid var(--bs-border-color);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.recap-container .container--checkbox .checkmark {
  height: var(--px-12);
  width: var(--px-12);
  position: relative;
  top: 0;
  left: 0;
}

.container--checkbox .checkmark.radio {
  border-radius: 100%;
}

.container--checkbox input:checked ~ .checkmark {
  background-color: var(--bs-main);
  border: 2px solid var(--bs-main);
}

.container--checkbox input:checked ~ .checkmark.radio {
  outline: 2px solid var(--bs-blue);
  border: 4px solid var(--theme-mode-bs-400);
}

.container--checkbox .checkmark::after {
  content: "";
  position: absolute;
  display: none;
}

.container--checkbox input:checked ~ .checkmark::after {
  display: block;
}

.container--checkbox .checkmark::after {
  top: 0px;
  width: 4px;
  height: 10px;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-image: initial;
  border-width: 0px 2px 2px 0px;
  transform: rotate(45deg);
}

.recap-container .container--checkbox .checkmark::after {
  width: 4px;
  height: 7px;
  left: 2px;
  top: 0px;
}

.container--checkbox .checkmark.radio::after {
  border: none;
}

.container--checkbox .checkmark.uncheckall::after {
  background: rgb(255, 255, 255);
  border: 0px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 2px;
  border-radius: 2px;
}

.fade:not(.show) {
  opacity: 0;
  display: none;
}

/* width, height */
.w-full {
  width: 100%;
}

/* Static right side modal */

.static-right-side {
  right: 0;
  top: unset;
  bottom: 0;
  left: unset;
  height: 100vh;
  max-width: min(var(--w-popup), 100vw);
  overflow: unset;
  width: min(var(--w-popup), 100vw);
  box-shadow: -16px 0px 20px 4px rgb(0 0 0 / 12%), 0 1px 10px 0 rgb(0 0 0 / 10%), 0px 0px 16px 0px rgb(0 0 0 / 13%);
}

.static-right-side .modal-dialog {
  display: flex;
  max-width: min(var(--w-popup), 100vw);
  border-radius: 8px;
  flex-direction: column;
  margin: var(--px-40) auto 0;
  background: var(--bs-surface-bg);
}

.static-right-side .modal-content {
  border: 0;
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  background: inherit;
  padding-bottom: 0;
  flex-direction: column;
  overflow: hidden;
}

.sparkles-icon {
  width: var(--px-32);
  height: var(--px-32);
  color: var(--bs-border-strong);
}

.empty-title {
  font-size: calc(12px * var(--scale));
  color: var(--bs-text-muted);
  font-weight: 500;
  margin: 0;
}

.empty-subtitle {
  font-size: calc(12px * var(--scale));
  color: var(--bs-placeholder-color);
  margin: 0;
}

.no-service-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--px-4);
  padding: var(--px-20);
}

.wrap-l-1,
.wrap-l-2,
.wrap-l-3,
.wrap-l-4,
.wrap-l-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  word-break: break-word;
  text-overflow: ellipsis;
  text-transform: capitalize;
  -webkit-box-orient: vertical;
}

.wrap-l-2 {
  -webkit-line-clamp: 2;
}

.wrap-l-3 {
  -webkit-line-clamp: 3;
}

.wrap-l-4 {
  -webkit-line-clamp: 4;
}

.wrap-l-5 {
  -webkit-line-clamp: 5;
}

.noClick {
  pointer-events: none !important;
}

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
  color: #fff;
  background-color: var(--bs-main);
  border-color: var(--bs-main);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:focus + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--bs-main-hover);
  border-color: var(--bs-main-hover);
}

.btn-outline-primary {
  color: var(--bs-main);
  border-color: var(--bs-main);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary.dropdown-toggle.show {
  color: #fff;
  background-color: var(--bs-main-hover);
  border-color: var(--bs-main-hover);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: var(--bs-main);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus,
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.5);
}

.form-control,
.form-select {
  color: var(--bs-input-color);
  border-color: var(--bs-input-border-color);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--bs-main);
  box-shadow: 0 0 0 0.25rem var(--bs-input-focus-ring-color);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link {
  background-color: var(--bs-main);
  border-color: var(--bs-main);
}

.nav-link,
.page-link,
.btn-link {
  color: var(--bs-main);
}

.nav-link:hover,
.nav-link:focus,
.page-link:hover,
.page-link:focus,
.btn-link:hover {
  color: var(--bs-main-hover);
}

.page-link {
  background-color: var(--bs-surface-bg);
  border-color: var(--bs-border-color);
}

.page-link:hover,
.page-link:focus {
  background-color: var(--bs-main-50);
  border-color: var(--bs-border-color);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link {
  color: #fff;
}

.bg-blue-main:active,
.bg-blue-main-500:active,
.bg-blue-main-600:active {
  background: var(--bs-main-hover) !important;
  color: #fff !important;
}

.daterangepicker td.in-range:hover,
.daterangepicker td.start-date:hover,
.daterangepicker td.end-date:hover,
.daterangepicker td.active:hover {
  background-color: var(--bs-main-hover);
}

body
  .select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--bs-main);
  color: #fff;
}