@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";

/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
    }
  }
}
.pointer-events-auto {
  pointer-events: auto;
}
.pointer-events-none {
  pointer-events: none;
}
.collapse {
  visibility: collapse;
}
.invisible {
  visibility: hidden;
}
.visible {
  visibility: visible;
}
.sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.static {
  position: static;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: calc(var(--spacing) * 0);
}
.inset-x-0 {
  inset-inline: calc(var(--spacing) * 0);
}
.inset-y-0 {
  inset-block: calc(var(--spacing) * 0);
}
.-top-1 {
  top: calc(var(--spacing) * -1);
}
.-top-2 {
  top: calc(var(--spacing) * -2);
}
.top-0 {
  top: calc(var(--spacing) * 0);
}
.top-1\.5 {
  top: calc(var(--spacing) * 1.5);
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: calc(var(--spacing) * 2);
}
.top-3 {
  top: calc(var(--spacing) * 3);
}
.top-3\.5 {
  top: calc(var(--spacing) * 3.5);
}
.top-4 {
  top: calc(var(--spacing) * 4);
}
.top-\[50\%\] {
  top: 50%;
}
.-right-1 {
  right: calc(var(--spacing) * -1);
}
.right-0 {
  right: calc(var(--spacing) * 0);
}
.right-1 {
  right: calc(var(--spacing) * 1);
}
.right-2 {
  right: calc(var(--spacing) * 2);
}
.right-3 {
  right: calc(var(--spacing) * 3);
}
.right-4 {
  right: calc(var(--spacing) * 4);
}
.-bottom-1 {
  bottom: calc(var(--spacing) * -1);
}
.-bottom-6 {
  bottom: calc(var(--spacing) * -6);
}
.bottom-0 {
  bottom: calc(var(--spacing) * 0);
}
.bottom-2 {
  bottom: calc(var(--spacing) * 2);
}
.bottom-4 {
  bottom: calc(var(--spacing) * 4);
}
.bottom-full {
  bottom: 100%;
}
.-left-1 {
  left: calc(var(--spacing) * -1);
}
.left-0 {
  left: calc(var(--spacing) * 0);
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: calc(var(--spacing) * 2);
}
.left-3 {
  left: calc(var(--spacing) * 3);
}
.left-4\! {
  left: calc(var(--spacing) * 4) !important;
}
.left-\[50\%\] {
  left: 50%;
}
.z-3 {
  z-index: 3;
}
.z-4 {
  z-index: 4;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-99 {
  z-index: 99;
}
.z-\[10\] {
  z-index: 10;
}
.z-\[99\] {
  z-index: 99;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[101\] {
  z-index: 101;
}
.z-\[250\] {
  z-index: 250;
}
.z-\[9999\] {
  z-index: 9999;
}
.col-start-2 {
  grid-column-start: 2;
}
.container {
  width: 100%;
}
@media (min-width: 40rem) {
  .container {
    max-width: 40rem;
  }
}
@media (min-width: 48rem) {
  .container {
    max-width: 48rem;
  }
}
@media (min-width: 64rem) {
  .container {
    max-width: 64rem;
  }
}
@media (min-width: 80rem) {
  .container {
    max-width: 80rem;
  }
}
@media (min-width: 96rem) {
  .container {
    max-width: 96rem;
  }
}
.m-0\! {
  margin: calc(var(--spacing) * 0) !important;
}
.m-4 {
  margin: calc(var(--spacing) * 4);
}
.-mx-1 {
  margin-inline: calc(var(--spacing) * -1);
}
.mx-1 {
  margin-inline: calc(var(--spacing) * 1);
}
.mx-2 {
  margin-inline: calc(var(--spacing) * 2);
}
.mx-3\.5 {
  margin-inline: calc(var(--spacing) * 3.5);
}
.mx-4 {
  margin-inline: calc(var(--spacing) * 4);
}
.mx-auto {
  margin-inline: auto;
}
.my-0 {
  margin-block: calc(var(--spacing) * 0);
}
.my-1 {
  margin-block: calc(var(--spacing) * 1);
}
.my-2 {
  margin-block: calc(var(--spacing) * 2);
}
.my-3 {
  margin-block: calc(var(--spacing) * 3);
}
.my-4 {
  margin-block: calc(var(--spacing) * 4);
}
.-mt-5\! {
  margin-top: calc(var(--spacing) * -5) !important;
}
.mt-0\.5 {
  margin-top: calc(var(--spacing) * .5);
}
.mt-1 {
  margin-top: calc(var(--spacing) * 1);
}
.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}
.mt-3 {
  margin-top: calc(var(--spacing) * 3);
}
.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.mt-5 {
  margin-top: calc(var(--spacing) * 5);
}
.mt-6 {
  margin-top: calc(var(--spacing) * 6);
}
.mt-auto {
  margin-top: auto;
}
.-mr-\[10px\]\! {
  margin-right: -10px !important;
}
.mr-1 {
  margin-right: calc(var(--spacing) * 1);
}
.mr-1\.5 {
  margin-right: calc(var(--spacing) * 1.5);
}
.mr-2 {
  margin-right: calc(var(--spacing) * 2);
}
.mr-3 {
  margin-right: calc(var(--spacing) * 3);
}
.mr-4 {
  margin-right: calc(var(--spacing) * 4);
}
.mr-6 {
  margin-right: calc(var(--spacing) * 6);
}
.mr-\[6px\] {
  margin-right: 6px;
}
.mb-0 {
  margin-bottom: calc(var(--spacing) * 0);
}
.mb-0\.5 {
  margin-bottom: calc(var(--spacing) * .5);
}
.mb-1 {
  margin-bottom: calc(var(--spacing) * 1);
}
.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}
.mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}
.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}
.ml-0\.5 {
  margin-left: calc(var(--spacing) * .5);
}
.ml-1 {
  margin-left: calc(var(--spacing) * 1);
}
.ml-2 {
  margin-left: calc(var(--spacing) * 2);
}
.ml-3 {
  margin-left: calc(var(--spacing) * 3);
}
.ml-4 {
  margin-left: calc(var(--spacing) * 4);
}
.ml-5 {
  margin-left: calc(var(--spacing) * 5);
}
.ml-6 {
  margin-left: calc(var(--spacing) * 6);
}
.ml-auto {
  margin-left: auto;
}
.line-clamp-1 {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.line-clamp-2 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.block {
  display: block;
}
.contents {
  display: contents;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.field-sizing-content {
  field-sizing: content;
}
.aspect-square {
  aspect-ratio: 1;
}
.size-\(--cell-size\) {
  width: var(--cell-size);
  height: var(--cell-size);
}
.size-2 {
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
}
.size-2\.5 {
  width: calc(var(--spacing) * 2.5);
  height: calc(var(--spacing) * 2.5);
}
.size-3\.5 {
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
}
.size-4 {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}
.size-6 {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}
.size-7 {
  width: calc(var(--spacing) * 7);
  height: calc(var(--spacing) * 7);
}
.size-8 {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
}
.size-9 {
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
}
.size-10 {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
}
.size-auto {
  width: auto;
  height: auto;
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-\(--cell-size\) {
  height: var(--cell-size);
}
.h-0 {
  height: calc(var(--spacing) * 0);
}
.h-1 {
  height: calc(var(--spacing) * 1);
}
.h-1\.5 {
  height: calc(var(--spacing) * 1.5);
}
.h-2 {
  height: calc(var(--spacing) * 2);
}
.h-2\.5 {
  height: calc(var(--spacing) * 2.5);
}
.h-3 {
  height: calc(var(--spacing) * 3);
}
.h-3\! {
  height: calc(var(--spacing) * 3) !important;
}
.h-3\.5 {
  height: calc(var(--spacing) * 3.5);
}
.h-4 {
  height: calc(var(--spacing) * 4);
}
.h-5 {
  height: calc(var(--spacing) * 5);
}
.h-6 {
  height: calc(var(--spacing) * 6);
}
.h-7 {
  height: calc(var(--spacing) * 7);
}
.h-8 {
  height: calc(var(--spacing) * 8);
}
.h-9 {
  height: calc(var(--spacing) * 9);
}
.h-10 {
  height: calc(var(--spacing) * 10);
}
.h-12 {
  height: calc(var(--spacing) * 12);
}
.h-14 {
  height: calc(var(--spacing) * 14);
}
.h-16 {
  height: calc(var(--spacing) * 16);
}
.h-24 {
  height: calc(var(--spacing) * 24);
}
.h-32 {
  height: calc(var(--spacing) * 32);
}
.h-72 {
  height: calc(var(--spacing) * 72);
}
.h-82 {
  height: calc(var(--spacing) * 82);
}
.h-96 {
  height: calc(var(--spacing) * 96);
}
.h-\[1\.15rem\] {
  height: 1.15rem;
}
.h-\[50px\] {
  height: 50px;
}
.h-\[300px\] {
  height: 300px;
}
.h-\[350px\] {
  height: 350px;
}
.h-\[600\], .h-\[600px\] {
  height: 600px;
}
.h-\[calc\(100\%-1px\)\] {
  height: calc(100% - 1px);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-svh {
  height: 100svh;
}
.max-h-\(--radix-context-menu-content-available-height\) {
  max-height: var(--radix-context-menu-content-available-height);
}
.max-h-\(--radix-dropdown-menu-content-available-height\) {
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.max-h-\(--radix-select-content-available-height\) {
  max-height: var(--radix-select-content-available-height);
}
.max-h-0 {
  max-height: calc(var(--spacing) * 0);
}
.max-h-40 {
  max-height: calc(var(--spacing) * 40);
}
.max-h-48 {
  max-height: calc(var(--spacing) * 48);
}
.max-h-60 {
  max-height: calc(var(--spacing) * 60);
}
.max-h-64 {
  max-height: calc(var(--spacing) * 64);
}
.max-h-80 {
  max-height: calc(var(--spacing) * 80);
}
.max-h-90 {
  max-height: calc(var(--spacing) * 90);
}
.max-h-96 {
  max-height: calc(var(--spacing) * 96);
}
.max-h-\[60\%\] {
  max-height: 60%;
}
.max-h-\[70px\] {
  max-height: 70px;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[200px\] {
  max-height: 200px;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[360px\] {
  max-height: 360px;
}
.max-h-\[400px\] {
  max-height: 400px;
}
.max-h-\[600\], .max-h-\[600px\] {
  max-height: 600px;
}
.max-h-full {
  max-height: 100%;
}
.max-h-screen {
  max-height: 100vh;
}
.min-h-0 {
  min-height: calc(var(--spacing) * 0);
}
.min-h-4 {
  min-height: calc(var(--spacing) * 4);
}
.min-h-10 {
  min-height: calc(var(--spacing) * 10);
}
.min-h-12 {
  min-height: calc(var(--spacing) * 12);
}
.min-h-14 {
  min-height: calc(var(--spacing) * 14);
}
.min-h-16 {
  min-height: calc(var(--spacing) * 16);
}
.min-h-32 {
  min-height: calc(var(--spacing) * 32);
}
.min-h-\[34px\] {
  min-height: 34px;
}
.min-h-\[48px\] {
  min-height: 48px;
}
.min-h-\[80px\] {
  min-height: 80px;
}
.min-h-svh {
  min-height: 100svh;
}
.w-\(--cell-size\) {
  width: var(--cell-size);
}
.w-\(--sidebar-width\) {
  width: var(--sidebar-width);
}
.w-1 {
  width: calc(var(--spacing) * 1);
}
.w-1\.5 {
  width: calc(var(--spacing) * 1.5);
}
.w-1\/4 {
  width: 25%;
}
.w-1\/6 {
  width: 16.6667%;
}
.w-2 {
  width: calc(var(--spacing) * 2);
}
.w-2\.5 {
  width: calc(var(--spacing) * 2.5);
}
.w-3 {
  width: calc(var(--spacing) * 3);
}
.w-3\! {
  width: calc(var(--spacing) * 3) !important;
}
.w-3\.5 {
  width: calc(var(--spacing) * 3.5);
}
.w-3\/4 {
  width: 75%;
}
.w-4 {
  width: calc(var(--spacing) * 4);
}
.w-5 {
  width: calc(var(--spacing) * 5);
}
.w-6 {
  width: calc(var(--spacing) * 6);
}
.w-7 {
  width: calc(var(--spacing) * 7);
}
.w-8 {
  width: calc(var(--spacing) * 8);
}
.w-9 {
  width: calc(var(--spacing) * 9);
}
.w-10 {
  width: calc(var(--spacing) * 10);
}
.w-12 {
  width: calc(var(--spacing) * 12);
}
.w-14 {
  width: calc(var(--spacing) * 14);
}
.w-16 {
  width: calc(var(--spacing) * 16);
}
.w-20 {
  width: calc(var(--spacing) * 20);
}
.w-24 {
  width: calc(var(--spacing) * 24);
}
.w-28 {
  width: calc(var(--spacing) * 28);
}
.w-30 {
  width: calc(var(--spacing) * 30);
}
.w-32 {
  width: calc(var(--spacing) * 32);
}
.w-40 {
  width: calc(var(--spacing) * 40);
}
.w-48 {
  width: calc(var(--spacing) * 48);
}
.w-52 {
  width: calc(var(--spacing) * 52);
}
.w-56 {
  width: calc(var(--spacing) * 56);
}
.w-64 {
  width: calc(var(--spacing) * 64);
}
.w-72 {
  width: calc(var(--spacing) * 72);
}
.w-80 {
  width: calc(var(--spacing) * 80);
}
.w-\[--radix-dropdown-menu-trigger-width\] {
  width: --radix-dropdown-menu-trigger-width;
}
.w-\[25vw\] {
  width: 25vw;
}
.w-\[30\%\] {
  width: 30%;
}
.w-\[50px\] {
  width: 50px;
}
.w-\[50vw\] {
  width: 50vw;
}
.w-\[60\%\] {
  width: 60%;
}
.w-\[70\%\] {
  width: 70%;
}
.w-\[70px\] {
  width: 70px;
}
.w-\[75vw\] {
  width: 75vw;
}
.w-\[100vw\] {
  width: 100vw;
}
.w-\[110px\] {
  width: 110px;
}
.w-\[150px\] {
  width: 150px;
}
.w-\[250px\] {
  width: 250px;
}
.w-\[400px\] {
  width: 400px;
}
.w-\[500px\] {
  width: 500px;
}
.w-\[inherit\] {
  width: inherit;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.\!max-w-none {
  max-width: none !important;
}
.max-w-\(--skeleton-width\) {
  max-width: var(--skeleton-width);
}
.max-w-2xl {
  max-width: var(--container-2xl);
}
.max-w-6xl {
  max-width: var(--container-6xl);
}
.max-w-7xl {
  max-width: var(--container-7xl);
}
.max-w-20 {
  max-width: calc(var(--spacing) * 20);
}
.max-w-52 {
  max-width: calc(var(--spacing) * 52);
}
.max-w-\[80\%\] {
  max-width: 80%;
}
.max-w-\[150px\] {
  max-width: 150px;
}
.max-w-\[230px\] {
  max-width: 230px;
}
.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}
.max-w-full {
  max-width: 100%;
}
.max-w-md {
  max-width: var(--container-md);
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: var(--container-sm);
}
.max-w-xs {
  max-width: var(--container-xs);
}
.min-w-\(--cell-size\) {
  min-width: var(--cell-size);
}
.min-w-0 {
  min-width: calc(var(--spacing) * 0);
}
.min-w-5 {
  min-width: calc(var(--spacing) * 5);
}
.min-w-10 {
  min-width: calc(var(--spacing) * 10);
}
.min-w-12 {
  min-width: calc(var(--spacing) * 12);
}
.min-w-56 {
  min-width: calc(var(--spacing) * 56);
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[10rem\] {
  min-width: 10rem;
}
.min-w-\[70px\] {
  min-width: 70px;
}
.min-w-\[80px\] {
  min-width: 80px;
}
.min-w-\[100px\] {
  min-width: 100px;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[320px\] {
  min-width: 320px;
}
.min-w-\[400px\] {
  min-width: 400px;
}
.min-w-\[600px\] {
  min-width: 600px;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.flex-1 {
  flex: 1;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow, .grow {
  flex-grow: 1;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-\(--radix-context-menu-content-transform-origin\) {
  transform-origin: var(--radix-context-menu-content-transform-origin);
}
.origin-\(--radix-dropdown-menu-content-transform-origin\) {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
.origin-\(--radix-popover-content-transform-origin\) {
  transform-origin: var(--radix-popover-content-transform-origin);
}
.origin-\(--radix-select-content-transform-origin\) {
  transform-origin: var(--radix-select-content-transform-origin);
}
.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-px {
  --tw-translate-x: -1px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-px {
  --tw-translate-x: 1px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-0\.5 {
  --tw-translate-y: calc(var(--spacing) * .5);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.scale-0 {
  --tw-scale-x: 0%;
  --tw-scale-y: 0%;
  --tw-scale-z: 0%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-75 {
  --tw-scale-x: 75%;
  --tw-scale-y: 75%;
  --tw-scale-z: 75%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-90 {
  --tw-scale-x: 90%;
  --tw-scale-y: 90%;
  --tw-scale-z: 90%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-95 {
  --tw-scale-x: 95%;
  --tw-scale-y: 95%;
  --tw-scale-z: 95%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-100 {
  --tw-scale-x: 100%;
  --tw-scale-y: 100%;
  --tw-scale-z: 100%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-105 {
  --tw-scale-x: 105%;
  --tw-scale-y: 105%;
  --tw-scale-z: 105%;
  scale: var(--tw-scale-x) var(--tw-scale-y);
}
.-rotate-180 {
  rotate: -180deg;
}
.rotate-0 {
  rotate: none;
}
.rotate-2 {
  rotate: 2deg;
}
.rotate-90 {
  rotate: 90deg;
}
.rotate-180 {
  rotate: 180deg;
}
.transform {
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}
.transform-gpu {
  transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}
.animate-bounce {
  animation: var(--animate-bounce);
}
.animate-ping {
  animation: var(--animate-ping);
}
.animate-pulse {
  animation: var(--animate-pulse);
}
.animate-spin {
  animation: var(--animate-spin);
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-grabbing {
  cursor: grabbing;
}
.cursor-move {
  cursor: move;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-text {
  cursor: text;
}
.cursor-wait {
  cursor: wait;
}
.touch-none {
  touch-action: none;
}
.resize {
  resize: both;
}
.resize-none {
  resize: none;
}
.scroll-my-1 {
  scroll-margin-block: calc(var(--spacing) * 1);
}
.scroll-py-1 {
  scroll-padding-block: calc(var(--spacing) * 1);
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-\[0_1fr\] {
  grid-template-columns: 0 1fr;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-row {
  flex-direction: row;
}
.flex-row\! {
  flex-direction: row !important;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-start {
  align-items: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-center\! {
  justify-content: center !important;
}
.justify-end {
  justify-content: flex-end;
}
.justify-start {
  justify-content: flex-start;
}
.justify-items-start {
  justify-items: start;
}
.gap-0\.5 {
  gap: calc(var(--spacing) * .5);
}
.gap-1 {
  gap: calc(var(--spacing) * 1);
}
.gap-1\.5 {
  gap: calc(var(--spacing) * 1.5);
}
.gap-2 {
  gap: calc(var(--spacing) * 2);
}
.gap-3 {
  gap: calc(var(--spacing) * 3);
}
.gap-4 {
  gap: calc(var(--spacing) * 4);
}
.gap-5 {
  gap: calc(var(--spacing) * 5);
}
.gap-6 {
  gap: calc(var(--spacing) * 6);
}
:where(.space-y-0 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-0\.5 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-1 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-1\.5 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-2 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-3 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-4 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-6 > :not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}
.gap-x-1\.5 {
  -moz-column-gap: calc(var(--spacing) * 1.5);
       column-gap: calc(var(--spacing) * 1.5);
}
:where(.space-x-1 > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
}
:where(.space-x-2 > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
}
:where(.space-x-3 > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
}
:where(.space-x-4 > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
}
.gap-y-0\.5 {
  row-gap: calc(var(--spacing) * .5);
}
:where(.divide-y > :not(:last-child)) {
  --tw-divide-y-reverse: 0;
  border-bottom-style: var(--tw-border-style);
  border-top-style: var(--tw-border-style);
  border-top-width: calc(1px * var(--tw-divide-y-reverse));
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
}
:where(.divide-gray-200 > :not(:last-child)) {
  border-color: var(--color-gray-200);
}
.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.rounded {
  border-radius: .25rem;
}
.rounded-2xl {
  border-radius: var(--radius-2xl);
}
.rounded-3xl {
  border-radius: var(--radius-3xl);
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 3.40282e38px;
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-md {
  border-radius: var(--radius-md);
}
.rounded-none {
  border-radius: 0;
}
.rounded-sm {
  border-radius: var(--radius-sm);
}
.rounded-xl {
  border-radius: var(--radius-xl);
}
.rounded-xs {
  border-radius: var(--radius-xs);
}
.rounded-t-md {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.rounded-l {
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
}
.rounded-l-md {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.rounded-l-none {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rounded-r-md {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.rounded-r-none {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rounded-b-2xl {
  border-bottom-right-radius: var(--radius-2xl);
  border-bottom-left-radius: var(--radius-2xl);
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-0 {
  border-style: var(--tw-border-style);
  border-width: 0;
}
.border-1 {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-2 {
  border-style: var(--tw-border-style);
  border-width: 2px;
}
.border-3 {
  border-style: var(--tw-border-style);
  border-width: 3px;
}
.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.border-t-2 {
  border-top-style: var(--tw-border-style);
  border-top-width: 2px;
}
.border-r {
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
}
.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 2px;
}
.border-l {
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
}
.border-l-2 {
  border-left-style: var(--tw-border-style);
  border-left-width: 2px;
}
.border-l-4 {
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
}
.border-dashed {
  --tw-border-style: dashed;
  border-style: dashed;
}
.border-none {
  --tw-border-style: none;
  border-style: none;
}
.border-\[\#1BC5BD\] {
  border-color: #1bc5bd;
}
.border-\[\#919EAB3D\] {
  border-color: #919eab3d;
}
.border-\[\#1677FF\] {
  border-color: #1677ff;
}
.border-\[\#D9D9D9\] {
  border-color: #d9d9d9;
}
.border-\[\#ddd\] {
  border-color: #ddd;
}
.border-\[\#e5e5e5\] {
  border-color: #e5e5e5;
}
.border-amber-200 {
  border-color: var(--color-amber-200);
}
.border-black {
  border-color: var(--color-black);
}
.border-blue-200 {
  border-color: var(--color-blue-200);
}
.border-blue-300 {
  border-color: var(--color-blue-300);
}
.border-blue-400 {
  border-color: var(--color-blue-400);
}
.border-blue-500 {
  border-color: var(--color-blue-500);
}
.border-current {
  border-color: currentColor;
}
.border-cyan-200 {
  border-color: var(--color-cyan-200);
}
.border-emerald-200 {
  border-color: var(--color-emerald-200);
}
.border-fuchsia-200 {
  border-color: var(--color-fuchsia-200);
}
.border-gray-100 {
  border-color: var(--color-gray-100);
}
.border-gray-200 {
  border-color: var(--color-gray-200);
}
.border-gray-300 {
  border-color: var(--color-gray-300);
}
.border-gray-400 {
  border-color: var(--color-gray-400);
}
.border-gray-500 {
  border-color: var(--color-gray-500);
}
.border-gray-800 {
  border-color: var(--color-gray-800);
}
.border-green-200 {
  border-color: var(--color-green-200);
}
.border-green-500 {
  border-color: var(--color-green-500);
}
.border-indigo-200 {
  border-color: var(--color-indigo-200);
}
.border-lime-200 {
  border-color: var(--color-lime-200);
}
.border-neutral-200 {
  border-color: var(--color-neutral-200);
}
.border-orange-200 {
  border-color: var(--color-orange-200);
}
.border-pink-200 {
  border-color: var(--color-pink-200);
}
.border-purple-200 {
  border-color: var(--color-purple-200);
}
.border-red-200 {
  border-color: var(--color-red-200);
}
.border-red-300 {
  border-color: var(--color-red-300);
}
.border-red-500 {
  border-color: var(--color-red-500);
}
.border-rose-200 {
  border-color: var(--color-rose-200);
}
.border-sky-200 {
  border-color: var(--color-sky-200);
}
.border-slate-200 {
  border-color: var(--color-slate-200);
}
.border-teal-200 {
  border-color: var(--color-teal-200);
}
.border-violet-200 {
  border-color: var(--color-violet-200);
}
.border-white {
  border-color: var(--color-white);
}
.border-yellow-200 {
  border-color: var(--color-yellow-200);
}
.border-t-blue-500 {
  border-top-color: var(--color-blue-500);
}
.border-t-transparent {
  border-top-color: #0000;
}
.border-l-blue-400 {
  border-left-color: var(--color-blue-400);
}
.border-l-blue-500 {
  border-left-color: var(--color-blue-500);
}
.border-l-teal-500 {
  border-left-color: var(--color-teal-500);
}
.border-l-transparent {
  border-left-color: #0000;
}
.bg-\(--background\) {
  background-color: var(--background);
}
.bg-\[\#00AB55\] {
  background-color: #00ab55;
}
.bg-\[\#1BC5BD\] {
  background-color: #1bc5bd;
}
.bg-\[\#919EAB3D\] {
  background-color: #919eab3d;
}
.bg-\[\#3366FF\] {
  background-color: #36f;
}
.bg-\[\#666666\] {
  background-color: #666;
}
.bg-\[\#FAFAFA\] {
  background-color: #fafafa;
}
.bg-\[\#facc15\]\! {
  background-color: #facc15 !important;
}
.bg-amber-50 {
  background-color: var(--color-amber-50);
}
.bg-amber-100 {
  background-color: var(--color-amber-100);
}
.bg-amber-500 {
  background-color: var(--color-amber-500);
}
.bg-black {
  background-color: var(--color-black);
}
.bg-black\/20 {
  background-color: #0003;
}
@supports (color: color-mix(in lab, red, red)) {
  .bg-black\/20 {
    background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
  }
}
.bg-black\/30 {
  background-color: #0000004d;
}
@supports (color: color-mix(in lab, red, red)) {
  .bg-black\/30 {
    background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
  }
}
.bg-black\/40 {
  background-color: #0006;
}
@supports (color: color-mix(in lab, red, red)) {
  .bg-black\/40 {
    background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
  }
}
.bg-black\/50 {
  background-color: #00000080;
}
@supports (color: color-mix(in lab, red, red)) {
  .bg-black\/50 {
    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
  }
}
.bg-blue-50 {
  background-color: var(--color-blue-50);
}
.bg-blue-50\/80 {
  background-color: #eff6ffcc;
}
@supports (color: color-mix(in lab, red, red)) {
  .bg-blue-50\/80 {
    background-color: color-mix(in oklab, var(--color-blue-50) 80%, transparent);
  }
}
.bg-blue-100 {
  background-color: var(--color-blue-100);
}
.bg-blue-100\/50 {
  background-color: #dbeafe80;
}
@supports (color: color-mix(in lab, red, red)) {
  .bg-blue-100\/50 {
    background-color: color-mix(in oklab, var(--color-blue-100) 50%, transparent);
  }
}
.bg-blue-500 {
  background-color: var(--color-blue-500);
}
.bg-blue-500\/10 {
  background-color: #3080ff1a;
}
@supports (color: color-mix(in lab, red, red)) {
  .bg-blue-500\/10 {
    background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
  }
}
.bg-blue-600 {
  background-color: var(--color-blue-600);
}
.bg-cyan-100 {
  background-color: var(--color-cyan-100);
}
.bg-emerald-100 {
  background-color: var(--color-emerald-100);
}
.bg-fuchsia-100 {
  background-color: var(--color-fuchsia-100);
}
.bg-gray-50 {
  background-color: var(--color-gray-50);
}
.bg-gray-50\/50 {
  background-color: #f9fafb80;
}
@supports (color: color-mix(in lab, red, red)) {
  .bg-gray-50\/50 {
    background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
  }
}
.bg-gray-100 {
  background-color: var(--color-gray-100);
}
.bg-gray-200 {
  background-color: var(--color-gray-200);
}
.bg-gray-300 {
  background-color: var(--color-gray-300);
}
.bg-gray-400 {
  background-color: var(--color-gray-400);
}
.bg-gray-500 {
  background-color: var(--color-gray-500);
}
.bg-gray-600 {
  background-color: var(--color-gray-600);
}
.bg-green-50 {
  background-color: var(--color-green-50);
}
.bg-green-100 {
  background-color: var(--color-green-100);
}
.bg-green-500 {
  background-color: var(--color-green-500);
}
.bg-green-600\! {
  background-color: var(--color-green-600) !important;
}
.bg-indigo-100 {
  background-color: var(--color-indigo-100);
}
.bg-lime-100 {
  background-color: var(--color-lime-100);
}
.bg-neutral-100 {
  background-color: var(--color-neutral-100);
}
.bg-neutral-200 {
  background-color: var(--color-neutral-200);
}
.bg-orange-100 {
  background-color: var(--color-orange-100);
}
.bg-pink-100 {
  background-color: var(--color-pink-100);
}
.bg-purple-50 {
  background-color: var(--color-purple-50);
}
.bg-purple-100 {
  background-color: var(--color-purple-100);
}
.bg-red-50 {
  background-color: var(--color-red-50);
}
.bg-red-100 {
  background-color: var(--color-red-100);
}
.bg-red-500 {
  background-color: var(--color-red-500);
}
.bg-red-500\! {
  background-color: var(--color-red-500) !important;
}
.bg-rose-100 {
  background-color: var(--color-rose-100);
}
.bg-sky-100 {
  background-color: var(--color-sky-100);
}
.bg-slate-50\/50 {
  background-color: #f8fafc80;
}
@supports (color: color-mix(in lab, red, red)) {
  .bg-slate-50\/50 {
    background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);
  }
}
.bg-slate-100 {
  background-color: var(--color-slate-100);
}
.bg-teal-100 {
  background-color: var(--color-teal-100);
}
.bg-teal-400 {
  background-color: var(--color-teal-400);
}
.bg-transparent {
  background-color: #0000;
}
.bg-violet-100 {
  background-color: var(--color-violet-100);
}
.bg-white {
  background-color: var(--color-white);
}
.bg-white\/80 {
  background-color: #fffc;
}
@supports (color: color-mix(in lab, red, red)) {
  .bg-white\/80 {
    background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }
}
.bg-white\/90 {
  background-color: #ffffffe6;
}
@supports (color: color-mix(in lab, red, red)) {
  .bg-white\/90 {
    background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
  }
}
.bg-yellow-50 {
  background-color: var(--color-yellow-50);
}
.bg-yellow-100 {
  background-color: var(--color-yellow-100);
}
.bg-zinc-50 {
  background-color: var(--color-zinc-50);
}
.bg-zinc-100 {
  background-color: var(--color-zinc-100);
}
.bg-gradient-to-br {
  --tw-gradient-position: to bottom right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-none {
  background-image: none;
}
.to-transparent {
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.fill-current {
  fill: currentColor;
}
.fill-none {
  fill: none;
}
.stroke-blue-600 {
  stroke: var(--color-blue-600);
}
.stroke-gray-500 {
  stroke: var(--color-gray-500);
}
.stroke-1 {
  stroke-width: 1px;
}
.stroke-\[3\] {
  stroke-width: 3px;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: calc(var(--spacing) * 0);
}
.p-0\.5 {
  padding: calc(var(--spacing) * .5);
}
.p-1 {
  padding: calc(var(--spacing) * 1);
}
.p-2 {
  padding: calc(var(--spacing) * 2);
}
.p-3 {
  padding: calc(var(--spacing) * 3);
}
.p-4 {
  padding: calc(var(--spacing) * 4);
}
.p-5 {
  padding: calc(var(--spacing) * 5);
}
.p-6 {
  padding: calc(var(--spacing) * 6);
}
.p-\[3px\] {
  padding: 3px;
}
.p-\[10px\] {
  padding: 10px;
}
.p-px {
  padding: 1px;
}
.px-\(--cell-size\) {
  padding-inline: var(--cell-size);
}
.px-0 {
  padding-inline: calc(var(--spacing) * 0);
}
.px-1 {
  padding-inline: calc(var(--spacing) * 1);
}
.px-1\.5 {
  padding-inline: calc(var(--spacing) * 1.5);
}
.px-2 {
  padding-inline: calc(var(--spacing) * 2);
}
.px-2\.5 {
  padding-inline: calc(var(--spacing) * 2.5);
}
.px-3 {
  padding-inline: calc(var(--spacing) * 3);
}
.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}
.px-6 {
  padding-inline: calc(var(--spacing) * 6);
}
.px-8 {
  padding-inline: calc(var(--spacing) * 8);
}
.py-0 {
  padding-block: calc(var(--spacing) * 0);
}
.py-0\.5 {
  padding-block: calc(var(--spacing) * .5);
}
.py-1 {
  padding-block: calc(var(--spacing) * 1);
}
.py-1\.5 {
  padding-block: calc(var(--spacing) * 1.5);
}
.py-2 {
  padding-block: calc(var(--spacing) * 2);
}
.py-2\.5 {
  padding-block: calc(var(--spacing) * 2.5);
}
.py-3 {
  padding-block: calc(var(--spacing) * 3);
}
.py-4 {
  padding-block: calc(var(--spacing) * 4);
}
.py-6 {
  padding-block: calc(var(--spacing) * 6);
}
.py-8 {
  padding-block: calc(var(--spacing) * 8);
}
.py-12 {
  padding-block: calc(var(--spacing) * 12);
}
.pt-1\.5 {
  padding-top: calc(var(--spacing) * 1.5);
}
.pt-2 {
  padding-top: calc(var(--spacing) * 2);
}
.pt-3 {
  padding-top: calc(var(--spacing) * 3);
}
.pt-4 {
  padding-top: calc(var(--spacing) * 4);
}
.pt-7 {
  padding-top: calc(var(--spacing) * 7);
}
.pr-1 {
  padding-right: calc(var(--spacing) * 1);
}
.pr-2 {
  padding-right: calc(var(--spacing) * 2);
}
.pr-3 {
  padding-right: calc(var(--spacing) * 3);
}
.pr-4 {
  padding-right: calc(var(--spacing) * 4);
}
.pr-8 {
  padding-right: calc(var(--spacing) * 8);
}
.pr-10 {
  padding-right: calc(var(--spacing) * 10);
}
.pb-1 {
  padding-bottom: calc(var(--spacing) * 1);
}
.pb-2 {
  padding-bottom: calc(var(--spacing) * 2);
}
.pb-3 {
  padding-bottom: calc(var(--spacing) * 3);
}
.pb-4 {
  padding-bottom: calc(var(--spacing) * 4);
}
.pb-8 {
  padding-bottom: calc(var(--spacing) * 8);
}
.pb-\[50px\] {
  padding-bottom: 50px;
}
.pl-1 {
  padding-left: calc(var(--spacing) * 1);
}
.pl-2 {
  padding-left: calc(var(--spacing) * 2);
}
.pl-6 {
  padding-left: calc(var(--spacing) * 6);
}
.pl-8 {
  padding-left: calc(var(--spacing) * 8);
}
.pl-10 {
  padding-left: calc(var(--spacing) * 10);
}
.pl-12 {
  padding-left: calc(var(--spacing) * 12);
}
.text-justify {
  text-align: justify;
}
.align-middle {
  vertical-align: middle;
}
.font-mono {
  font-family: var(--font-mono);
}
.font-sans {
  font-family: var(--font-sans);
}
.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-5xl {
  font-size: var(--text-5xl);
  line-height: var(--tw-leading, var(--text-5xl--line-height));
}
.text-6xl {
  font-size: var(--text-6xl);
  line-height: var(--tw-leading, var(--text-6xl--line-height));
}
.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[0\.8rem\] {
  font-size: .8rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[13px\] {
  font-size: 13px;
}
.leading-5 {
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.leading-relaxed {
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}
.leading-tight {
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
}
.\!font-bold {
  --tw-font-weight: var(--font-weight-bold) !important;
  font-weight: var(--font-weight-bold) !important;
}
.font-black {
  --tw-font-weight: var(--font-weight-black);
  font-weight: var(--font-weight-black);
}
.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.font-extrabold {
  --tw-font-weight: var(--font-weight-extrabold);
  font-weight: var(--font-weight-extrabold);
}
.font-light {
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
}
.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.font-normal {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}
.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.tracking-tight {
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
}
.tracking-wide {
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
}
.tracking-wider {
  --tw-tracking: var(--tracking-wider);
  letter-spacing: var(--tracking-wider);
}
.tracking-widest {
  --tw-tracking: var(--tracking-widest);
  letter-spacing: var(--tracking-widest);
}
.text-wrap {
  text-wrap: wrap;
}
.break-words, .wrap-break-word {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.\!text-red-500 {
  color: var(--color-red-500) !important;
}
.text-\[\#6b7280\] {
  color: #6b7280;
}
.text-amber-600 {
  color: var(--color-amber-600);
}
.text-amber-800 {
  color: var(--color-amber-800);
}
.text-black {
  color: var(--color-black);
}
.text-blue-500 {
  color: var(--color-blue-500);
}
.text-blue-600 {
  color: var(--color-blue-600);
}
.text-blue-700 {
  color: var(--color-blue-700);
}
.text-blue-800 {
  color: var(--color-blue-800);
}
.text-blue-900 {
  color: var(--color-blue-900);
}
.text-current {
  color: currentColor;
}
.text-cyan-800 {
  color: var(--color-cyan-800);
}
.text-emerald-800 {
  color: var(--color-emerald-800);
}
.text-fuchsia-800 {
  color: var(--color-fuchsia-800);
}
.text-gray-300 {
  color: var(--color-gray-300);
}
.text-gray-400 {
  color: var(--color-gray-400);
}
.text-gray-500 {
  color: var(--color-gray-500);
}
.text-gray-600 {
  color: var(--color-gray-600);
}
.text-gray-700 {
  color: var(--color-gray-700);
}
.text-gray-800 {
  color: var(--color-gray-800);
}
.text-gray-900 {
  color: var(--color-gray-900);
}
.text-green-600 {
  color: var(--color-green-600);
}
.text-green-700 {
  color: var(--color-green-700);
}
.text-green-800 {
  color: var(--color-green-800);
}
.text-indigo-800 {
  color: var(--color-indigo-800);
}
.text-lime-800 {
  color: var(--color-lime-800);
}
.text-neutral-500 {
  color: var(--color-neutral-500);
}
.text-neutral-900 {
  color: var(--color-neutral-900);
}
.text-neutral-950 {
  color: var(--color-neutral-950);
}
.text-orange-500 {
  color: var(--color-orange-500);
}
.text-orange-800 {
  color: var(--color-orange-800);
}
.text-pink-800 {
  color: var(--color-pink-800);
}
.text-purple-600 {
  color: var(--color-purple-600);
}
.text-purple-800 {
  color: var(--color-purple-800);
}
.text-red-500 {
  color: var(--color-red-500);
}
.text-red-600 {
  color: var(--color-red-600);
}
.text-red-700 {
  color: var(--color-red-700);
}
.text-red-800 {
  color: var(--color-red-800);
}
.text-rose-800 {
  color: var(--color-rose-800);
}
.text-sky-800 {
  color: var(--color-sky-800);
}
.text-slate-500 {
  color: var(--color-slate-500);
}
.text-slate-600 {
  color: var(--color-slate-600);
}
.text-slate-800 {
  color: var(--color-slate-800);
}
.text-teal-600 {
  color: var(--color-teal-600);
}
.text-teal-800 {
  color: var(--color-teal-800);
}
.text-violet-800 {
  color: var(--color-violet-800);
}
.text-white {
  color: var(--color-white);
}
.text-yellow-500 {
  color: var(--color-yellow-500);
}
.text-yellow-600 {
  color: var(--color-yellow-600);
}
.text-yellow-700 {
  color: var(--color-yellow-700);
}
.text-yellow-800 {
  color: var(--color-yellow-800);
}
.text-zinc-500 {
  color: var(--color-zinc-500);
}
.capitalize {
  text-transform: capitalize;
}
.lowercase {
  text-transform: lowercase;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
}
.overline {
  text-decoration-line: overline;
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.opacity-0 {
  opacity: 0;
}
.opacity-25 {
  opacity: .25;
}
.opacity-30 {
  opacity: .3;
}
.opacity-50 {
  opacity: .5;
}
.opacity-60 {
  opacity: .6;
}
.opacity-70 {
  opacity: .7;
}
.opacity-75 {
  opacity: .75;
}
.opacity-80 {
  opacity: .8;
}
.opacity-90 {
  opacity: .9;
}
.opacity-100 {
  opacity: 1;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\] {
  --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-xs {
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-0 {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-2 {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-blue-200 {
  --tw-ring-color: var(--color-blue-200);
}
.ring-gray-300 {
  --tw-ring-color: var(--color-gray-300);
}
.outline-hidden {
  --tw-outline-style: none;
  outline-style: none;
}
@media (forced-colors: active) {
  .outline-hidden {
    outline-offset: 2px;
    outline: 2px solid #0000;
  }
}
.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.filter {
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(var(--blur-sm));
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}
.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[color\,box-shadow\] {
  transition-property: color, box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[left\,right\,width\] {
  transition-property: left, right, width;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[margin\,opacity\] {
  transition-property: margin, opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[width\,height\,padding\] {
  transition-property: width, height, padding;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-none {
  transition-property: none;
}
.duration-150 {
  --tw-duration: .15s;
  transition-duration: .15s;
}
.duration-200 {
  --tw-duration: .2s;
  transition-duration: .2s;
}
.duration-300 {
  --tw-duration: .3s;
  transition-duration: .3s;
}
.ease-in-out {
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}
.ease-linear {
  --tw-ease: linear;
  transition-timing-function: linear;
}
.ease-out {
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
}
.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}
.select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.\[--cell-size\:--spacing\(8\)\] {
  --cell-size: calc(var(--spacing) * 8);
}
.duration-150 {
  animation-duration: .15s;
}
.duration-200 {
  animation-duration: .2s;
}
.duration-300 {
  animation-duration: .3s;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.ease-linear {
  animation-timing-function: linear;
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, .2, 1);
}
.paused {
  animation-play-state: paused;
}
.running {
  animation-play-state: running;
}
.zoom-in {
  --tw-enter-scale: 0;
}
.zoom-out {
  --tw-exit-scale: 0;
}
.group-focus-within\/menu-item\:opacity-100:is(:where(.group\/menu-item):focus-within *) {
  opacity: 1;
}
@media (hover: hover) {
  .group-hover\:block:is(:where(.group):hover *) {
    display: block;
  }

  .group-hover\:scale-100:is(:where(.group):hover *) {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .group-hover\:scale-110:is(:where(.group):hover *) {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .group-hover\:scale-120:is(:where(.group):hover *) {
    --tw-scale-x: 120%;
    --tw-scale-y: 120%;
    --tw-scale-z: 120%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .group-hover\:opacity-100:is(:where(.group):hover *), .group-hover\/menu-item\:opacity-100:is(:where(.group\/menu-item):hover *) {
    opacity: 1;
  }
}
.group-has-data-\[sidebar\=menu-action\]\/menu-item\:pr-8:is(:where(.group\/menu-item):has([data-sidebar="menu-action"]) *) {
  padding-right: calc(var(--spacing) * 8);
}
.group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.group)[data-collapsible="icon"] *) {
  margin-top: calc(var(--spacing) * -8);
}
.group-data-\[collapsible\=icon\]\:flex:is(:where(.group)[data-collapsible="icon"] *) {
  display: flex;
}
.group-data-\[collapsible\=icon\]\:hidden:is(:where(.group)[data-collapsible="icon"] *) {
  display: none;
}
.group-data-\[collapsible\=icon\]\:size-8\!:is(:where(.group)[data-collapsible="icon"] *) {
  width: calc(var(--spacing) * 8) !important;
  height: calc(var(--spacing) * 8) !important;
}
.group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.group)[data-collapsible="icon"] *) {
  width: var(--sidebar-width-icon);
}
.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\)\)\]:is(:where(.group)[data-collapsible="icon"] *) {
  width: calc(var(--sidebar-width-icon));
}
.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\]:is(:where(.group)[data-collapsible="icon"] *) {
  width: calc(var(--sidebar-width-icon)  + (calc(var(--spacing) * 4))  + 2px);
}
.group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible="icon"] *) {
  overflow: hidden;
}
.group-data-\[collapsible\=icon\]\:p-0\!:is(:where(.group)[data-collapsible="icon"] *) {
  padding: calc(var(--spacing) * 0) !important;
}
.group-data-\[collapsible\=icon\]\:p-2\!:is(:where(.group)[data-collapsible="icon"] *) {
  padding: calc(var(--spacing) * 2) !important;
}
.group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.group)[data-collapsible="icon"] *) {
  opacity: 0;
}
.group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
  right: calc(var(--sidebar-width) * -1);
}
.group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible="offcanvas"] *) {
  left: calc(var(--sidebar-width) * -1);
}
.group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.group)[data-collapsible="offcanvas"] *) {
  width: calc(var(--spacing) * 0);
}
.group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.group)[data-collapsible="offcanvas"] *) {
  --tw-translate-x: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
  pointer-events: none;
}
.group-data-\[disabled\=true\]\:opacity-50:is(:where(.group)[data-disabled="true"] *) {
  opacity: .5;
}
.group-data-\[focused\=true\]\/day\:relative:is(:where(.group\/day)[data-focused="true"] *) {
  position: relative;
}
.group-data-\[focused\=true\]\/day\:z-10:is(:where(.group\/day)[data-focused="true"] *) {
  z-index: 10;
}
.group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.group\/day)[data-focused="true"] *) {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.group-data-\[side\=left\]\:-right-4:is(:where(.group)[data-side="left"] *) {
  right: calc(var(--spacing) * -4);
}
.group-data-\[side\=left\]\:border-r:is(:where(.group)[data-side="left"] *) {
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
}
.group-data-\[side\=right\]\:left-0:is(:where(.group)[data-side="right"] *) {
  left: calc(var(--spacing) * 0);
}
.group-data-\[side\=right\]\:rotate-180:is(:where(.group)[data-side="right"] *) {
  rotate: 180deg;
}
.group-data-\[side\=right\]\:border-l:is(:where(.group)[data-side="right"] *) {
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
}
.group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant="floating"] *) {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.group-data-\[variant\=floating\]\:shadow-sm:is(:where(.group)[data-variant="floating"] *) {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.group-\[\.destructive\]\:text-red-300:is(:where(.group).destructive *) {
  color: var(--color-red-300);
}
.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
  cursor: not-allowed;
}
.peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) {
  opacity: .5;
}
.peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.peer\/menu-button)[data-size="default"] ~ *) {
  top: calc(var(--spacing) * 1.5);
}
.peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.peer\/menu-button)[data-size="lg"] ~ *) {
  top: calc(var(--spacing) * 2.5);
}
.peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.peer\/menu-button)[data-size="sm"] ~ *) {
  top: calc(var(--spacing) * 1);
}
.peer-\[\.header-fixed\]\/header\:mt-14:is(:where(.peer\/header).header-fixed ~ *) {
  margin-top: calc(var(--spacing) * 14);
}
.first-letter\:uppercase:first-letter {
  text-transform: uppercase;
}
.file\:inline-flex::file-selector-button {
  display: inline-flex;
}
.file\:h-7::file-selector-button {
  height: calc(var(--spacing) * 7);
}
.file\:border-0::file-selector-button {
  border-style: var(--tw-border-style);
  border-width: 0;
}
.file\:bg-transparent::file-selector-button {
  background-color: #0000;
}
.file\:text-sm::file-selector-button {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.file\:text-xs::file-selector-button {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.file\:font-medium::file-selector-button {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.placeholder\:\!text-\[rgba\(68\,68\,68\,0\.5\)\]::-moz-placeholder {
  color: #44444480 !important;
}
.placeholder\:\!text-\[rgba\(68\,68\,68\,0\.5\)\]::placeholder {
  color: #44444480 !important;
}
.placeholder\:text-gray-400::-moz-placeholder {
  color: var(--color-gray-400);
}
.placeholder\:text-gray-400::placeholder {
  color: var(--color-gray-400);
}
.before\:right-1:before {
  content: var(--tw-content);
  right: calc(var(--spacing) * 1);
}
.after\:absolute:after {
  content: var(--tw-content);
  position: absolute;
}
.after\:-inset-2:after {
  content: var(--tw-content);
  inset: calc(var(--spacing) * -2);
}
.after\:inset-y-0:after {
  content: var(--tw-content);
  inset-block: calc(var(--spacing) * 0);
}
.after\:left-1\/2:after {
  content: var(--tw-content);
  left: 50%;
}
.after\:w-1:after {
  content: var(--tw-content);
  width: calc(var(--spacing) * 1);
}
.after\:w-\[2px\]:after {
  content: var(--tw-content);
  width: 2px;
}
.after\:-translate-x-1\/2:after {
  content: var(--tw-content);
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.group)[data-collapsible="offcanvas"] *):after {
  content: var(--tw-content);
  left: 100%;
}
.last\:border-b-0:last-child {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0;
}
.focus-within\:relative:focus-within {
  position: relative;
}
.focus-within\:z-20:focus-within {
  z-index: 20;
}
.focus-within\:border-blue-500:focus-within {
  border-color: var(--color-blue-500);
}
.focus-within\:ring-2:focus-within {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-within\:ring-blue-500\/20:focus-within {
  --tw-ring-color: #3080ff33;
}
@supports (color: color-mix(in lab, red, red)) {
  .focus-within\:ring-blue-500\/20:focus-within {
    --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
  }
}
.focus-within\:ring-offset-2:focus-within {
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
@media (hover: hover) {
  .hover\:translate-x-1:hover {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .hover\:scale-105:hover {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .hover\:border-blue-300:hover {
    border-color: var(--color-blue-300);
  }

  .hover\:border-blue-400:hover {
    border-color: var(--color-blue-400);
  }

  .hover\:border-blue-500:hover {
    border-color: var(--color-blue-500);
  }

  .hover\:border-gray-200:hover {
    border-color: var(--color-gray-200);
  }

  .hover\:border-gray-300:hover {
    border-color: var(--color-gray-300);
  }

  .hover\:border-gray-400:hover {
    border-color: var(--color-gray-400);
  }

  .hover\:bg-\[\#00AB55\]\/90:hover {
    background-color: oklab(64.884% -.151671 .0823314 / .9);
  }

  .hover\:bg-\[\#3366FF\]\/90:hover {
    background-color: oklab(57.2594% -.0192201 -.232961 / .9);
  }

  .hover\:bg-amber-600:hover {
    background-color: var(--color-amber-600);
  }

  .hover\:bg-black:hover {
    background-color: var(--color-black);
  }

  .hover\:bg-blue-50:hover {
    background-color: var(--color-blue-50);
  }

  .hover\:bg-blue-50\/50:hover {
    background-color: #eff6ff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-blue-50\/50:hover {
      background-color: color-mix(in oklab, var(--color-blue-50) 50%, transparent);
    }
  }

  .hover\:bg-blue-100\/60:hover {
    background-color: #dbeafe99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-blue-100\/60:hover {
      background-color: color-mix(in oklab, var(--color-blue-100) 60%, transparent);
    }
  }

  .hover\:bg-blue-200:hover {
    background-color: var(--color-blue-200);
  }

  .hover\:bg-gray-50:hover {
    background-color: var(--color-gray-50);
  }

  .hover\:bg-gray-100:hover {
    background-color: var(--color-gray-100);
  }

  .hover\:bg-gray-200:hover {
    background-color: var(--color-gray-200);
  }

  .hover\:bg-gray-300:hover {
    background-color: var(--color-gray-300);
  }

  .hover\:bg-gray-600:hover {
    background-color: var(--color-gray-600);
  }

  .hover\:bg-gray-700:hover {
    background-color: var(--color-gray-700);
  }

  .hover\:bg-gray-800:hover {
    background-color: var(--color-gray-800);
  }

  .hover\:bg-green-200:hover {
    background-color: var(--color-green-200);
  }

  .hover\:bg-green-600:hover {
    background-color: var(--color-green-600);
  }

  .hover\:bg-indigo-200:hover {
    background-color: var(--color-indigo-200);
  }

  .hover\:bg-neutral-200:hover {
    background-color: var(--color-neutral-200);
  }

  .hover\:bg-orange-200:hover {
    background-color: var(--color-orange-200);
  }

  .hover\:bg-pink-200:hover {
    background-color: var(--color-pink-200);
  }

  .hover\:bg-purple-200:hover {
    background-color: var(--color-purple-200);
  }

  .hover\:bg-red-50:hover {
    background-color: var(--color-red-50);
  }

  .hover\:bg-red-100:hover {
    background-color: var(--color-red-100);
  }

  .hover\:bg-red-500:hover {
    background-color: var(--color-red-500);
  }

  .hover\:bg-red-600:hover {
    background-color: var(--color-red-600);
  }

  .hover\:bg-slate-50:hover {
    background-color: var(--color-slate-50);
  }

  .hover\:bg-slate-100:hover {
    background-color: var(--color-slate-100);
  }

  .hover\:bg-teal-200:hover {
    background-color: var(--color-teal-200);
  }

  .hover\:bg-transparent:hover {
    background-color: #0000;
  }

  .hover\:bg-yellow-200:hover {
    background-color: var(--color-yellow-200);
  }

  .hover\:text-blue-50:hover {
    color: var(--color-blue-50);
  }

  .hover\:text-blue-600:hover {
    color: var(--color-blue-600);
  }

  .hover\:text-blue-800:hover {
    color: var(--color-blue-800);
  }

  .hover\:text-blue-900:hover {
    color: var(--color-blue-900);
  }

  .hover\:text-gray-900:hover {
    color: var(--color-gray-900);
  }

  .hover\:text-red-500:hover {
    color: var(--color-red-500);
  }

  .hover\:text-red-600:hover {
    color: var(--color-red-600);
  }

  .hover\:text-red-700:hover {
    color: var(--color-red-700);
  }

  .hover\:text-slate-600:hover {
    color: var(--color-slate-600);
  }

  .hover\:text-white:hover {
    color: var(--color-white);
  }

  .hover\:underline:hover {
    text-decoration-line: underline;
  }

  .hover\:opacity-80:hover {
    opacity: .8;
  }

  .hover\:opacity-85:hover {
    opacity: .85;
  }

  .hover\:opacity-100:hover {
    opacity: 1;
  }

  .hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-accent)));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .hover\:shadow-lg:hover {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .hover\:shadow-sm:hover {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .group-\[\.destructive\]\:hover\:text-red-50:is(:where(.group).destructive *):hover {
    color: var(--color-red-50);
  }
}
.focus\:border-blue-500:focus {
  border-color: var(--color-blue-500);
}
.focus\:border-red-500:focus {
  border-color: var(--color-red-500);
}
.focus\:bg-gray-300:focus {
  background-color: var(--color-gray-300);
}
.focus\:bg-neutral-100:focus {
  background-color: var(--color-neutral-100);
}
.focus\:bg-transparent:focus {
  background-color: #0000;
}
.focus\:text-blue-900:focus {
  color: var(--color-blue-900);
}
.focus\:text-neutral-900:focus {
  color: var(--color-neutral-900);
}
.focus\:opacity-100:focus {
  opacity: 1;
}
.focus\:ring-0:focus {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus\:ring-2:focus {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus\:ring-blue-500:focus {
  --tw-ring-color: var(--color-blue-500);
}
.focus\:ring-teal-500:focus {
  --tw-ring-color: var(--color-teal-500);
}
.focus\:ring-offset-0:focus {
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus\:outline-hidden:focus {
  --tw-outline-style: none;
  outline-style: none;
}
@media (forced-colors: active) {
  .focus\:outline-hidden:focus {
    outline-offset: 2px;
    outline: 2px solid #0000;
  }
}
.focus\:outline-none:focus {
  --tw-outline-style: none;
  outline-style: none;
}
.group-\[\.destructive\]\:focus\:ring-red-400:is(:where(.group).destructive *):focus {
  --tw-ring-color: var(--color-red-400);
}
.group-\[\.destructive\]\:focus\:ring-offset-red-600:is(:where(.group).destructive *):focus {
  --tw-ring-offset-color: var(--color-red-600);
}
.focus-visible\:border-neutral-950:focus-visible {
  border-color: var(--color-neutral-950);
}
.focus-visible\:ring-0:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-visible\:ring-\[3px\]:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-visible\:ring-\[\#00AB55\]\/20:focus-visible {
  --tw-ring-color: oklab(64.884% -.151671 .0823314 / .2);
}
.focus-visible\:ring-\[\#3366FF\]\/20:focus-visible {
  --tw-ring-color: oklab(57.2594% -.0192201 -.232961 / .2);
}
.focus-visible\:ring-amber-500\/20:focus-visible {
  --tw-ring-color: #f99c0033;
}
@supports (color: color-mix(in lab, red, red)) {
  .focus-visible\:ring-amber-500\/20:focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
  }
}
.focus-visible\:ring-gray-500\/20:focus-visible {
  --tw-ring-color: #6a728233;
}
@supports (color: color-mix(in lab, red, red)) {
  .focus-visible\:ring-gray-500\/20:focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
  }
}
.focus-visible\:ring-green-500\/20:focus-visible {
  --tw-ring-color: #00c75833;
}
@supports (color: color-mix(in lab, red, red)) {
  .focus-visible\:ring-green-500\/20:focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
  }
}
.focus-visible\:ring-neutral-950:focus-visible {
  --tw-ring-color: var(--color-neutral-950);
}
.focus-visible\:ring-neutral-950\/50:focus-visible {
  --tw-ring-color: #0a0a0a80;
}
@supports (color: color-mix(in lab, red, red)) {
  .focus-visible\:ring-neutral-950\/50:focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--color-neutral-950) 50%, transparent);
  }
}
.focus-visible\:ring-red-500\/20:focus-visible {
  --tw-ring-color: #fb2c3633;
}
@supports (color: color-mix(in lab, red, red)) {
  .focus-visible\:ring-red-500\/20:focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
  }
}
.focus-visible\:ring-offset-0:focus-visible {
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus-visible\:outline-hidden:focus-visible {
  --tw-outline-style: none;
  outline-style: none;
}
@media (forced-colors: active) {
  .focus-visible\:outline-hidden:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #0000;
  }
}
.focus-visible\:outline-1:focus-visible {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
.focus-visible\:outline-none:focus-visible {
  --tw-outline-style: none;
  outline-style: none;
}
.active\:cursor-grabbing:active {
  cursor: grabbing;
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
  opacity: .5;
}
.disabled\:opacity-100:disabled {
  opacity: 1;
}
:where([data-side="left"]) .in-data-\[side\=left\]\:cursor-w-resize {
  cursor: w-resize;
}
:where([data-side="right"]) .in-data-\[side\=right\]\:cursor-e-resize {
  cursor: e-resize;
}
.has-focus\:ring-\[3px\]:has(:focus) {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.has-\[\>svg\]\:size-8:has( > svg) {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
}
.has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has( > svg) {
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
}
.has-\[\>svg\]\:gap-x-3:has( > svg) {
  -moz-column-gap: calc(var(--spacing) * 3);
       column-gap: calc(var(--spacing) * 3);
}
.has-\[\>svg\]\:px-2\.5:has( > svg) {
  padding-inline: calc(var(--spacing) * 2.5);
}
.has-\[\>svg\]\:px-3:has( > svg) {
  padding-inline: calc(var(--spacing) * 3);
}
.aria-disabled\:pointer-events-none[aria-disabled="true"] {
  pointer-events: none;
}
.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: .5;
}
.aria-invalid\:border-red-500[aria-invalid="true"] {
  border-color: var(--color-red-500);
}
.aria-invalid\:ring-red-500\/20[aria-invalid="true"] {
  --tw-ring-color: #fb2c3633;
}
@supports (color: color-mix(in lab, red, red)) {
  .aria-invalid\:ring-red-500\/20[aria-invalid="true"] {
    --tw-ring-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
  }
}
.data-\[active\=true\]\:font-medium[data-active="true"] {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: .5;
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: .5;
}
.data-\[inset\]\:pl-8[data-inset] {
  padding-left: calc(var(--spacing) * 8);
}
.data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
  height: 1px;
}
.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}
.data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
  width: 1px;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]:after {
  content: var(--tw-content);
  left: calc(var(--spacing) * 0);
}
.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]:after {
  content: var(--tw-content);
  height: calc(var(--spacing) * 1);
}
.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]:after {
  content: var(--tw-content);
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]:after {
  content: var(--tw-content);
  --tw-translate-x: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]:after {
  content: var(--tw-content);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: var(--radius-md);
}
.data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0;
}
.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: var(--radius-md);
}
.data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: calc(var(--spacing) * 1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -.5rem;
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: calc(var(--spacing) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: .5rem;
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: calc(var(--spacing) * 1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -.5rem;
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: calc(var(--spacing) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: .5rem;
}
.data-\[size\=default\]\:h-9[data-size="default"] {
  height: calc(var(--spacing) * 9);
}
.data-\[size\=sm\]\:h-8[data-size="sm"] {
  height: calc(var(--spacing) * 8);
}
:is(.\*\*\:data-\[slot\=command-input-wrapper\]\:h-12 *)[data-slot="command-input-wrapper"] {
  height: calc(var(--spacing) * 12);
}
:is(.\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
:is(.\*\:data-\[slot\=select-value\]\:flex > *)[data-slot="select-value"] {
  display: flex;
}
:is(.\*\:data-\[slot\=select-value\]\:items-center > *)[data-slot="select-value"] {
  align-items: center;
}
:is(.\*\:data-\[slot\=select-value\]\:gap-2 > *)[data-slot="select-value"] {
  gap: calc(var(--spacing) * 2);
}
.data-\[state\=active\]\:bg-white[data-state="active"] {
  background-color: var(--color-white);
}
.data-\[state\=active\]\:text-gray-900[data-state="active"] {
  color: var(--color-gray-900);
}
.data-\[state\=active\]\:shadow-sm[data-state="active"] {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"] {
  --tw-translate-x: calc(100% - 2px);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.data-\[state\=checked\]\:border-\(--interactive-active\)[data-state="checked"] {
  border-color: var(--interactive-active);
}
.data-\[state\=checked\]\:bg-\(--interactive-active\)[data-state="checked"] {
  background-color: var(--interactive-active);
}
.data-\[state\=checked\]\:text-white[data-state="checked"] {
  color: var(--color-white);
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  --tw-duration: .3s;
  transition-duration: .3s;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
  animation-name: exit;
  animation-duration: .15s;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: .3s;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
  --tw-exit-opacity: .8;
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"], .data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=inactive\]\:text-gray-600[data-state="inactive"] {
  color: var(--color-gray-600);
}
.data-\[state\=open\]\:opacity-100[data-state="open"] {
  opacity: 1;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  --tw-duration: .5s;
  transition-duration: .5s;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
  animation-name: enter;
  animation-duration: .15s;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: .5s;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"], .data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"], .data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
  --tw-translate-x: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
  animation-name: exit;
  animation-duration: .15s;
}
.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
  transition-property: none;
}
@media (min-width: 40rem) {
  .sm\:top-auto {
    top: auto;
  }

  .sm\:right-0 {
    right: calc(var(--spacing) * 0);
  }

  .sm\:bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:max-w-lg {
    max-width: var(--container-lg);
  }

  .sm\:max-w-sm {
    max-width: var(--container-sm);
  }

  .sm\:flex-col {
    flex-direction: column;
  }

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

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .sm\:gap-x-2\.5 {
    -moz-column-gap: calc(var(--spacing) * 2.5);
         column-gap: calc(var(--spacing) * 2.5);
  }

  .sm\:pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }

  .sm\:pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .sm\:text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .sm\:text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .sm\:text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .sm\:text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .sm\:text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}
@media (min-width: 48rem) {
  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

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

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

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

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

  .md\:gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .md\:px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .md\:text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .md\:text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .md\:text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .md\:text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .md\:text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .md\:text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .md\:text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .md\:text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .md\:opacity-0 {
    opacity: 0;
  }

  .md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.peer)[data-variant="inset"] ~ *) {
    margin: calc(var(--spacing) * 2);
  }

  .md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.peer)[data-variant="inset"] ~ *) {
    margin-left: calc(var(--spacing) * 0);
  }

  .md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.peer)[data-variant="inset"] ~ *) {
    border-radius: var(--radius-xl);
  }

  .md\:peer-data-\[variant\=inset\]\:shadow-sm:is(:where(.peer)[data-variant="inset"] ~ *) {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2:is(:where(.peer)[data-variant="inset"] ~ *):is(:where(.peer)[data-state="collapsed"] ~ *) {
    margin-left: calc(var(--spacing) * 2);
  }

  .md\:after\:hidden:after {
    content: var(--tw-content);
    display: none;
  }
}
@media (min-width: 64rem) {
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }
}
@media (min-width: 80rem) {
  .xl\:grid-cols-\[40\%_auto\] {
    grid-template-columns: 40% auto;
  }
}
@media (min-width: 96rem) {
  .\32 xl\:text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
}
.dark\:border-gray-600:is(.dark *) {
  border-color: var(--color-gray-600);
}
.dark\:border-gray-700:is(.dark *) {
  border-color: var(--color-gray-700);
}
.dark\:border-gray-800:is(.dark *) {
  border-color: var(--color-gray-800);
}
.dark\:border-green-800:is(.dark *) {
  border-color: var(--color-green-800);
}
.dark\:border-neutral-800:is(.dark *) {
  border-color: var(--color-neutral-800);
}
.dark\:border-slate-600:is(.dark *) {
  border-color: var(--color-slate-600);
}
.dark\:bg-black:is(.dark *) {
  background-color: var(--color-black);
}
.dark\:bg-blue-800:is(.dark *) {
  background-color: var(--color-blue-800);
}
.dark\:bg-blue-900:is(.dark *) {
  background-color: var(--color-blue-900);
}
.dark\:bg-blue-950\/50:is(.dark *) {
  background-color: #16245680;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:bg-blue-950\/50:is(.dark *) {
    background-color: color-mix(in oklab, var(--color-blue-950) 50%, transparent);
  }
}
.dark\:bg-gray-600:is(.dark *) {
  background-color: var(--color-gray-600);
}
.dark\:bg-gray-700:is(.dark *) {
  background-color: var(--color-gray-700);
}
.dark\:bg-gray-800:is(.dark *) {
  background-color: var(--color-gray-800);
}
.dark\:bg-gray-800\/50:is(.dark *) {
  background-color: #1e293980;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:bg-gray-800\/50:is(.dark *) {
    background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
  }
}
.dark\:bg-gray-900:is(.dark *) {
  background-color: var(--color-gray-900);
}
.dark\:bg-gray-900\/80:is(.dark *) {
  background-color: #101828cc;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:bg-gray-900\/80:is(.dark *) {
    background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
  }
}
.dark\:bg-green-600:is(.dark *) {
  background-color: var(--color-green-600);
}
.dark\:bg-green-900\/10:is(.dark *) {
  background-color: #0d542b1a;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:bg-green-900\/10:is(.dark *) {
    background-color: color-mix(in oklab, var(--color-green-900) 10%, transparent);
  }
}
.dark\:bg-neutral-200\/30:is(.dark *) {
  background-color: #e5e5e54d;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:bg-neutral-200\/30:is(.dark *) {
    background-color: color-mix(in oklab, var(--color-neutral-200) 30%, transparent);
  }
}
.dark\:bg-neutral-800:is(.dark *) {
  background-color: var(--color-neutral-800);
}
.dark\:bg-neutral-950:is(.dark *) {
  background-color: var(--color-neutral-950);
}
.dark\:bg-slate-700:is(.dark *) {
  background-color: var(--color-slate-700);
}
.dark\:bg-slate-800:is(.dark *) {
  background-color: var(--color-slate-800);
}
.dark\:bg-slate-800\/50:is(.dark *) {
  background-color: #1d293d80;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:bg-slate-800\/50:is(.dark *) {
    background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);
  }
}
.dark\:dark\:bg-neutral-500:is(.dark *):is(.dark *) {
  background-color: var(--color-neutral-500);
}
.dark\:dark\:bg-neutral-800\/30:is(.dark *):is(.dark *) {
  background-color: #2626264d;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:dark\:bg-neutral-800\/30:is(.dark *):is(.dark *) {
    background-color: color-mix(in oklab, var(--color-neutral-800) 30%, transparent);
  }
}
.dark\:dark\:text-neutral-400:is(.dark *):is(.dark *) {
  color: var(--color-neutral-400);
}
.dark\:text-blue-400:is(.dark *) {
  color: var(--color-blue-400);
}
.dark\:text-gray-200:is(.dark *) {
  color: var(--color-gray-200);
}
.dark\:text-gray-400:is(.dark *) {
  color: var(--color-gray-400);
}
.dark\:text-gray-500:is(.dark *) {
  color: var(--color-gray-500);
}
.dark\:text-neutral-50:is(.dark *) {
  color: var(--color-neutral-50);
}
.dark\:text-neutral-400:is(.dark *) {
  color: var(--color-neutral-400);
}
.dark\:text-neutral-500:is(.dark *) {
  color: var(--color-neutral-500);
}
.dark\:text-red-400:is(.dark *) {
  color: var(--color-red-400);
}
.dark\:text-slate-200:is(.dark *) {
  color: var(--color-slate-200);
}
.dark\:text-slate-400:is(.dark *) {
  color: var(--color-slate-400);
}
.dark\:text-slate-500:is(.dark *) {
  color: var(--color-slate-500);
}
.dark\:text-teal-400:is(.dark *) {
  color: var(--color-teal-400);
}
.dark\:text-white:is(.dark *) {
  color: var(--color-white);
}
@media (hover: hover) {
  .dark\:hover\:border-blue-500:is(.dark *):hover {
    border-color: var(--color-blue-500);
  }

  .dark\:hover\:border-gray-500:is(.dark *):hover {
    border-color: var(--color-gray-500);
  }

  .dark\:dark\:hover\:bg-neutral-800\/50:is(.dark *):is(.dark *):hover {
    background-color: #26262680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:dark\:hover\:bg-neutral-800\/50:is(.dark *):is(.dark *):hover {
      background-color: color-mix(in oklab, var(--color-neutral-800) 50%, transparent);
    }
  }

  .dark\:hover\:bg-gray-700:is(.dark *):hover {
    background-color: var(--color-gray-700);
  }

  .dark\:hover\:bg-gray-800:is(.dark *):hover {
    background-color: var(--color-gray-800);
  }

  .dark\:hover\:bg-gray-800\/50:is(.dark *):hover {
    background-color: #1e293980;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:hover\:bg-gray-800\/50:is(.dark *):hover {
      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
    }
  }

  .dark\:hover\:bg-neutral-200\/50:is(.dark *):hover {
    background-color: #e5e5e580;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:hover\:bg-neutral-200\/50:is(.dark *):hover {
      background-color: color-mix(in oklab, var(--color-neutral-200) 50%, transparent);
    }
  }

  .dark\:hover\:bg-neutral-700:is(.dark *):hover {
    background-color: var(--color-neutral-700);
  }

  .dark\:hover\:bg-slate-700:is(.dark *):hover {
    background-color: var(--color-slate-700);
  }

  .dark\:hover\:text-slate-300:is(.dark *):hover {
    color: var(--color-slate-300);
  }
}
.dark\:focus\:bg-neutral-800:is(.dark *):focus {
  background-color: var(--color-neutral-800);
}
.dark\:focus\:text-neutral-50:is(.dark *):focus {
  color: var(--color-neutral-50);
}
.dark\:focus\:ring-offset-gray-800:is(.dark *):focus {
  --tw-ring-offset-color: var(--color-gray-800);
}
.dark\:focus-visible\:border-neutral-300:is(.dark *):focus-visible {
  border-color: var(--color-neutral-300);
}
.dark\:focus-visible\:ring-\[\#00AB55\]\/40:is(.dark *):focus-visible {
  --tw-ring-color: oklab(64.884% -.151671 .0823314 / .4);
}
.dark\:focus-visible\:ring-\[\#3366FF\]\/40:is(.dark *):focus-visible {
  --tw-ring-color: oklab(57.2594% -.0192201 -.232961 / .4);
}
.dark\:focus-visible\:ring-amber-500\/40:is(.dark *):focus-visible {
  --tw-ring-color: #f99c0066;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:focus-visible\:ring-amber-500\/40:is(.dark *):focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent);
  }
}
.dark\:focus-visible\:ring-gray-500\/40:is(.dark *):focus-visible {
  --tw-ring-color: #6a728266;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:focus-visible\:ring-gray-500\/40:is(.dark *):focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--color-gray-500) 40%, transparent);
  }
}
.dark\:focus-visible\:ring-green-400\/40:is(.dark *):focus-visible {
  --tw-ring-color: #05df7266;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:focus-visible\:ring-green-400\/40:is(.dark *):focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--color-green-400) 40%, transparent);
  }
}
.dark\:focus-visible\:ring-neutral-300:is(.dark *):focus-visible {
  --tw-ring-color: var(--color-neutral-300);
}
.dark\:focus-visible\:ring-neutral-300\/50:is(.dark *):focus-visible {
  --tw-ring-color: #d4d4d480;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:focus-visible\:ring-neutral-300\/50:is(.dark *):focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--color-neutral-300) 50%, transparent);
  }
}
.dark\:focus-visible\:ring-red-500\/40:is(.dark *):focus-visible {
  --tw-ring-color: #fb2c3666;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:focus-visible\:ring-red-500\/40:is(.dark *):focus-visible {
    --tw-ring-color: color-mix(in oklab, var(--color-red-500) 40%, transparent);
  }
}
.dark\:aria-invalid\:border-red-900:is(.dark *)[aria-invalid="true"] {
  border-color: var(--color-red-900);
}
.dark\:aria-invalid\:ring-red-500\/40:is(.dark *)[aria-invalid="true"] {
  --tw-ring-color: #fb2c3666;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:aria-invalid\:ring-red-500\/40:is(.dark *)[aria-invalid="true"] {
    --tw-ring-color: color-mix(in oklab, var(--color-red-500) 40%, transparent);
  }
}
.dark\:aria-invalid\:ring-red-900\/20:is(.dark *)[aria-invalid="true"] {
  --tw-ring-color: #82181a33;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:aria-invalid\:ring-red-900\/20:is(.dark *)[aria-invalid="true"] {
    --tw-ring-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
  }
}
.dark\:dark\:aria-invalid\:ring-red-900\/40:is(.dark *):is(.dark *)[aria-invalid="true"] {
  --tw-ring-color: #82181a66;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:dark\:aria-invalid\:ring-red-900\/40:is(.dark *):is(.dark *)[aria-invalid="true"] {
    --tw-ring-color: color-mix(in oklab, var(--color-red-900) 40%, transparent);
  }
}
.dark\:dark\:data-\[state\=active\]\:border-neutral-800:is(.dark *):is(.dark *)[data-state="active"] {
  border-color: var(--color-neutral-800);
}
.dark\:data-\[state\=active\]\:border-neutral-200:is(.dark *)[data-state="active"] {
  border-color: var(--color-neutral-200);
}
.dark\:dark\:data-\[state\=active\]\:bg-neutral-500:is(.dark *):is(.dark *)[data-state="active"] {
  background-color: var(--color-neutral-500);
}
.dark\:data-\[state\=active\]\:bg-neutral-200\/30:is(.dark *)[data-state="active"] {
  background-color: #e5e5e54d;
}
@supports (color: color-mix(in lab, red, red)) {
  .dark\:data-\[state\=active\]\:bg-neutral-200\/30:is(.dark *)[data-state="active"] {
    background-color: color-mix(in oklab, var(--color-neutral-200) 30%, transparent);
  }
}
.dark\:data-\[state\=active\]\:bg-neutral-950:is(.dark *)[data-state="active"] {
  background-color: var(--color-neutral-950);
}
.dark\:dark\:data-\[state\=active\]\:text-neutral-50:is(.dark *):is(.dark *)[data-state="active"] {
  color: var(--color-neutral-50);
}
.dark\:data-\[state\=active\]\:text-neutral-950:is(.dark *)[data-state="active"] {
  color: var(--color-neutral-950);
}
.dark\:data-\[state\=checked\]\:bg-\(--interactive-active\):is(.dark *)[data-state="checked"] {
  background-color: var(--interactive-active);
}
.dark\:data-\[state\=checked\]\:bg-white:is(.dark *)[data-state="checked"], .dark\:data-\[state\=unchecked\]\:bg-white:is(.dark *)[data-state="unchecked"] {
  background-color: var(--color-white);
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-inline: calc(var(--spacing) * 2);
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-block: calc(var(--spacing) * 1.5);
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-inline: calc(var(--spacing) * 2);
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~ [cmdk-group] {
  padding-top: calc(var(--spacing) * 0);
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: calc(var(--spacing) * 5);
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: calc(var(--spacing) * 5);
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: calc(var(--spacing) * 12);
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-inline: calc(var(--spacing) * 2);
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-block: calc(var(--spacing) * 3);
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: calc(var(--spacing) * 5);
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: calc(var(--spacing) * 5);
}
.\[\&_a\]\:text-blue-600 a {
  color: var(--color-blue-600);
}
.\[\&_a\]\:underline a {
  text-decoration-line: underline;
}
.\[\&_h1\]\:my-2 h1 {
  margin-block: calc(var(--spacing) * 2);
}
.\[\&_h1\]\:mb-1 h1 {
  margin-bottom: calc(var(--spacing) * 1);
}
.\[\&_h1\]\:text-2xl h1 {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.\[\&_h1\]\:font-bold h1 {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.\[\&_h2\]\:my-2 h2 {
  margin-block: calc(var(--spacing) * 2);
}
.\[\&_h2\]\:mb-1 h2 {
  margin-bottom: calc(var(--spacing) * 1);
}
.\[\&_h2\]\:text-xl h2 {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}
.\[\&_h2\]\:font-semibold h2 {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.\[\&_h3\]\:mb-1 h3, .\[\&_h4\]\:mb-1 h4, .\[\&_h5\]\:mb-1 h5, .\[\&_h6\]\:mb-1 h6 {
  margin-bottom: calc(var(--spacing) * 1);
}
.\[\&_li\]\:mb-0 li {
  margin-bottom: calc(var(--spacing) * 0);
}
.\[\&_ol\]\:mb-1 ol {
  margin-bottom: calc(var(--spacing) * 1);
}
.\[\&_p\]\:my-1 p {
  margin-block: calc(var(--spacing) * 1);
}
.\[\&_p\]\:mb-1 p {
  margin-bottom: calc(var(--spacing) * 1);
}
.\[\&_p\]\:text-base p {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.\[\&_p\]\:leading-relaxed p {
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}
.\[\&_p\]\:font-normal p {
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
}
.\[\&_p\:last-child\]\:mb-0 p:last-child {
  margin-bottom: calc(var(--spacing) * 0);
}
.\[\&_strong\]\:font-semibold strong {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:size-5 svg {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6 svg:not([class*="size-"]) {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-full svg:not([class*="size-"]) {
  width: 100%;
  height: 100%;
}
.\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-neutral-500 svg:not([class*="text-"]) {
  color: var(--color-neutral-500);
}
.dark\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-neutral-400:is(.dark *) svg:not([class*="text-"]) {
  color: var(--color-neutral-400);
}
.\[\&_tr\]\:border-b tr {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-style: var(--tw-border-style);
  border-width: 0;
}
.\[\&_ul\]\:mb-1 ul {
  margin-bottom: calc(var(--spacing) * 1);
}
.\[\&\:\:-webkit-calendar-picker-indicator\]\:absolute::-webkit-calendar-picker-indicator {
  position: absolute;
}
.\[\&\:\:-webkit-calendar-picker-indicator\]\:top-1\/2::-webkit-calendar-picker-indicator {
  top: 50%;
}
.\[\&\:\:-webkit-calendar-picker-indicator\]\:right-2::-webkit-calendar-picker-indicator {
  right: calc(var(--spacing) * 2);
}
.\[\&\:\:-webkit-calendar-picker-indicator\]\:-translate-y-1\/2::-webkit-calendar-picker-indicator {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.\[\&\:\:-webkit-calendar-picker-indicator\]\:cursor-pointer::-webkit-calendar-picker-indicator {
  cursor: pointer;
}
.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected="true"] button {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) {
  padding-right: calc(var(--spacing) * 0);
}
:is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_next > svg), :is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_previous > svg) {
  rotate: 180deg;
}
:is(.\*\:\[span\]\:last\:flex > *):is(span):last-child {
  display: flex;
}
:is(.\*\:\[span\]\:last\:items-center > *):is(span):last-child {
  align-items: center;
}
:is(.\*\:\[span\]\:last\:gap-2 > *):is(span):last-child {
  gap: calc(var(--spacing) * 2);
}
.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected="true"] button {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] > [role="checkbox"] {
  --tw-translate-y: 2px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.\[\&\>button\]\:hidden > button {
  display: none;
}
.\[\&\>button\:first-of-type\]\:hidden\! > button:first-of-type {
  display: none !important;
}
.\[\&\>span\]\:line-clamp-1 > span {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}
.\[\&\>span\]\:text-xs > span {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.\[\&\>span\]\:opacity-70 > span {
  opacity: .7;
}
.\[\&\>span\:last-child\]\:truncate > span:last-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.\[\&\>span\[data-placeholder\]\]\:\!text-\[rgba\(68\,68\,68\,0\.5\)\] > span[data-placeholder] {
  color: #44444480 !important;
}
.\[\&\>svg\]\:pointer-events-none > svg {
  pointer-events: none;
}
.\[\&\>svg\]\:hidden > svg {
  display: none;
}
.\[\&\>svg\]\:size-3 > svg {
  width: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 3);
}
.\[\&\>svg\]\:size-3\.5 > svg {
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
}
.\[\&\>svg\]\:size-4 > svg {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}
.\[\&\>svg\]\:shrink-0 > svg {
  flex-shrink: 0;
}
.\[\&\>svg\]\:translate-y-0\.5 > svg {
  --tw-translate-y: calc(var(--spacing) * .5);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.\[\&\>svg\]\:text-current > svg {
  color: currentColor;
}
.\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 0;
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction="vertical"] > div, .\[\&\[data-state\=open\]_button_div_svg\]\:rotate-90[data-state="open"] button div svg {
  rotate: 90deg;
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg {
  rotate: 180deg;
}
[data-side="left"][data-collapsible="offcanvas"] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
  right: calc(var(--spacing) * -2);
}
[data-side="left"][data-state="collapsed"] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
  cursor: e-resize;
}
[data-side="right"][data-collapsible="offcanvas"] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
  left: calc(var(--spacing) * -2);
}
[data-side="right"][data-state="collapsed"] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
  cursor: w-resize;
}
[data-slot="card-content"] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent, [data-slot="popover-content"] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: #0000;
}
@media (hover: hover) {
  a.\[a\&\]\:hover\:bg-green-400:hover {
    background-color: var(--color-green-400);
  }
}
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-800: oklch(44.4% .177 26.899);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-orange-100: oklch(95.4% .038 75.164);
    --color-orange-200: oklch(90.1% .076 70.697);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-800: oklch(47% .157 37.304);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-amber-800: oklch(47.3% .137 46.201);
    --color-yellow-50: oklch(98.7% .026 102.212);
    --color-yellow-100: oklch(97.3% .071 103.193);
    --color-yellow-200: oklch(94.5% .129 101.54);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-yellow-600: oklch(68.1% .162 75.834);
    --color-yellow-700: oklch(55.4% .135 66.442);
    --color-yellow-800: oklch(47.6% .114 61.907);
    --color-lime-100: oklch(96.7% .067 122.328);
    --color-lime-200: oklch(93.8% .127 124.321);
    --color-lime-800: oklch(45.3% .124 130.933);
    --color-green-50: oklch(98.2% .018 155.826);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-200: oklch(92.5% .084 155.995);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-700: oklch(52.7% .154 150.069);
    --color-green-800: oklch(44.8% .119 151.328);
    --color-green-900: oklch(39.3% .095 152.535);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-800: oklch(43.2% .095 166.913);
    --color-teal-100: oklch(95.3% .051 180.801);
    --color-teal-200: oklch(91% .096 180.426);
    --color-teal-400: oklch(77.7% .152 181.912);
    --color-teal-500: oklch(70.4% .14 182.503);
    --color-teal-600: oklch(60% .118 184.704);
    --color-teal-800: oklch(43.7% .078 188.216);
    --color-cyan-100: oklch(95.6% .045 203.388);
    --color-cyan-200: oklch(91.7% .08 205.041);
    --color-cyan-800: oklch(45% .085 224.283);
    --color-sky-100: oklch(95.1% .026 236.824);
    --color-sky-200: oklch(90.1% .058 230.902);
    --color-sky-800: oklch(44.3% .11 240.79);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-200: oklch(88.2% .059 254.128);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-blue-800: oklch(42.4% .199 265.638);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-blue-950: oklch(28.2% .091 267.935);
    --color-indigo-100: oklch(93% .034 272.788);
    --color-indigo-200: oklch(87% .065 274.039);
    --color-indigo-800: oklch(39.8% .195 277.366);
    --color-violet-100: oklch(94.3% .029 294.588);
    --color-violet-200: oklch(89.4% .057 293.283);
    --color-violet-800: oklch(43.2% .232 292.759);
    --color-purple-50: oklch(97.7% .014 308.299);
    --color-purple-100: oklch(94.6% .033 307.174);
    --color-purple-200: oklch(90.2% .063 306.703);
    --color-purple-600: oklch(55.8% .288 302.321);
    --color-purple-800: oklch(43.8% .218 303.724);
    --color-fuchsia-100: oklch(95.2% .037 318.852);
    --color-fuchsia-200: oklch(90.3% .076 319.62);
    --color-fuchsia-800: oklch(45.2% .211 324.591);
    --color-pink-100: oklch(94.8% .028 342.258);
    --color-pink-200: oklch(89.9% .061 343.231);
    --color-pink-800: oklch(45.9% .187 3.815);
    --color-rose-100: oklch(94.1% .03 12.58);
    --color-rose-200: oklch(89.2% .058 10.001);
    --color-rose-800: oklch(45.5% .188 13.697);
    --color-slate-50: oklch(98.4% .003 247.858);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-gray-900: oklch(21% .034 264.665);
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% .001 286.375);
    --color-zinc-500: oklch(55.2% .016 285.938);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-sm: 8px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::-moz-placeholder {
    opacity: 1;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
    ::-moz-placeholder {
      color: currentColor;
    }
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::-moz-placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }

  ::file-selector-button {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer components, utilities;
.filter-button-no-border {
  box-shadow: none !important;
  border: none !important;
}
.filter-button-no-border:hover {
  border: none !important;
}
.filter-button-no-border:focus {
  box-shadow: none !important;
  border: none !important;
}
.button {
  border-radius: 5px;
  padding: 10px 20px;
}
:root {
  --background: oklch(100% 0 0);
  --foreground: oklch(14.5% 0 0);
  --card: oklch(100% 0 0);
  --card-foreground: oklch(14.5% 0 0);
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(14.5% 0 0);
  --primary: oklch(20.5% 0 0);
  --primary-foreground: oklch(98.5% 0 0);
  --secondary: oklch(97% 0 0);
  --secondary-foreground: oklch(20.5% 0 0);
  --muted: oklch(92% 0 0);
  --muted-foreground: oklch(55.6% 0 0);
  --light-muted: #fafafa;
  --accent: oklch(97% 0 0);
  --accent-foreground: oklch(20.5% 0 0);
  --destructive: oklch(57.7% .245 27.325);
  --destructive-foreground: oklch(57.7% .245 27.325);
  --border: oklch(92.2% 0 0);
  --input: oklch(92.2% 0 0);
  --ring: oklch(70.8% 0 0);
  --chart-1: oklch(64.6% .222 41.116);
  --chart-2: oklch(60% .118 184.704);
  --chart-3: oklch(39.8% .07 227.392);
  --chart-4: oklch(82.8% .189 84.429);
  --chart-5: oklch(76.9% .188 70.08);
  --sidebar: oklch(100% 0 0);
  --sidebar-foreground: oklch(14.5% 0 0);
  --sidebar-primary: oklch(20.5% 0 0);
  --sidebar-primary-foreground: oklch(98.5% 0 0);
  --sidebar-accent: oklch(95% 0 0);
  --sidebar-accent-foreground: oklch(20.5% 0 0);
  --sidebar-border: oklch(92% 0 0);
  --sidebar-ring: oklch(70.8% 0 0);
  --sidebar-icon: oklch(0% 0 0);
  --priority-low: #83868c;
  --priority-bg-low: #f6f7f7;
  --priority-medium: #f5a304;
  --priority-bg-medium: #ffefcf;
  --priority-high: #f97316;
  --priority-urgent: #ff2d2d;
  --priority-bg-urgent: #feeeee;
  --new-status: #1bc5bd;
  --unassigned-status: #6b7280;
  --assigned-status: #000;
  --in-progress-status: #2563eb;
  --pending-info-status: #fbbf24;
  --on-hold-status: #f97316;
  --pending-approval-status: #374151;
  --resolved-status: #10b981;
  --closed-status: #111827;
  --reopen-status: #ea580c;
  --cancelled-status: #9ca3af;
  --secondary-text: #83868c;
  --text-placeholder: #838383;
  --text-xxs: 10px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 15px;
  --text-xl: 16px;
  --text-2xl: 18px;
  --text-3xl: 20px;
  --text-4xl: 24px;
  --text-5xl: 28px;
  --text-6xl: 32px;
  --font-thin: 100;
  --font-extraLight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 100px;
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}
.dark {
  --background: oklch(14.5% 0 0);
  --foreground: oklch(98.5% 0 0);
  --card: oklch(14.5% 0 0);
  --card-foreground: oklch(98.5% 0 0);
  --popover: oklch(14.5% 0 0);
  --popover-foreground: oklch(98.5% 0 0);
  --primary: oklch(98.5% 0 0);
  --primary-foreground: oklch(20.5% 0 0);
  --secondary: oklch(26.9% 0 0);
  --secondary-foreground: oklch(98.5% 0 0);
  --muted: oklch(26.9% 0 0);
  --muted-foreground: oklch(98.5% 0 0);
  --light-muted: oklch(26.9% 0 0);
  --accent: oklch(27.9% .041 260.031);
  --accent-foreground: oklch(98.5% 0 0);
  --destructive: oklch(62.578% .2334 25.445);
  --destructive-foreground: oklch(63.7% .237 25.331);
  --border: oklch(26.9% 0 0);
  --input: oklch(26.9% 0 0);
  --ring: oklch(43.9% 0 0);
  --chart-1: oklch(48.8% .243 264.376);
  --chart-2: oklch(69.6% .17 162.48);
  --chart-3: oklch(76.9% .188 70.08);
  --chart-4: oklch(62.7% .265 303.9);
  --chart-5: oklch(64.5% .246 16.439);
  --sidebar: oklch(20.5% 0 0);
  --sidebar-foreground: oklch(98.5% 0 0);
  --sidebar-primary: oklch(48.8% .243 264.376);
  --sidebar-primary-foreground: oklch(98.5% 0 0);
  --sidebar-accent: oklch(27.9% .041 260.031);
  --sidebar-accent-foreground: oklch(98.5% 0 0);
  --sidebar-border: oklch(27.9% .041 260.031);
  --sidebar-ring: oklch(43.9% 0 0);
  --sidebar-icon: oklch(100% 0 0);
  --text-xxs: .625rem;
  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-base: .875rem;
  --text-lg: .9375rem;
  --text-xl: 1rem;
  --text-2xl: 1.125rem;
  --text-3xl: 1.25rem;
  --text-4xl: 1.5rem;
  --text-5xl: 1.75rem;
  --text-6xl: 2rem;
  --new-status: #1bc5bd;
  --unassigned-status: #6b7280;
  --assigned-status: #000;
  --in-progress-status: #2563eb;
  --pending-info-status: #fbbf24;
  --on-hold-status: #f97316;
  --pending-approval-status: #374151;
  --resolved-status: #10b981;
  --closed-status: #111827;
  --reopen-status: #ea580c;
  --cancelled-status: #9ca3af;
  --secondary-text: #83868c;
}
.border, .border-t, .border-r, .border-b, .border-l, .border-x, .border-y, .border-s, .border-e, .divide-x > * + *, .divide-y > * + * {
  border-color: var(--border);
}
.ring, .ring-1, .ring-2, .ring-4, .ring-8, .ring-inset {
  --tw-ring-color: var(--ring);
}
.outline, .outline-1, .outline-2, .outline-4, .outline-8 {
  outline-color: var(--border);
}
.lucide, .tabler-icon {
  stroke-width: 1.5px;
}
.sidebar-container.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\]:is(:where(.group)[data-collapsible="icon"] *) {
  width: var(--sidebar-width-icon);
}
.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\]:is(:where(.group)[data-collapsible="icon"] *) {
  width: calc(var(--sidebar-width-icon));
}
.bg-sidebar.group-data-\[variant\=floating\]\:border:is(:where(.group)[data-variant="floating"] *) {
  border-style: var(--tw-border-style);
  border-width: 1px 1px 1px 0;
  border-left-style: none;
  border-left-color: currentColor;
}
th[draggable="true"] .grip-icon {
  opacity: .5;
  transition: opacity .2s;
}
th[draggable="true"]:hover .grip-icon {
  opacity: 1;
}
.resizer {
  cursor: col-resize;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  touch-action: none;
  background: #0000001a;
  width: 5px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
.resizer.isResizing {
  background: #0000004d;
}
@media (hover: hover) {
  .resizer {
    opacity: 0;
  }

  :hover > .resizer {
    opacity: 1;
  }
}
body {
  overflow: hidden;
}
body, html {
  font-family: Inter, sans-serif !important;
}
.border-transparent {
  border-color: #0000;
}
.bg-color-default {
  background-color: var(--background-default);
}
.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
  min-height: 14px;
}
.head-icon {
  transition: transform .2s;
}
.expand-icon.rotate-90 {
  transform: rotate(90deg);
}
.expand-icon.spin {
  animation: .7s linear infinite spin;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.leading-tight .app-title {
  margin-left: 10px;
  font-size: 25px;
}
.main-layout .main-header {
  border-bottom: 1px solid var(--border);
  width: 100%;
}
.g-search-bar > input {
  color: #71717a;
  background-color: var(--searchbar-bg-input);
  border-width: 0;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.g-search-bar > input:focus, .g-search-bar > input:focus-visible {
  outline: none;
}
.main-notification .noti-item {
  display: block !important;
}
.main-notification .noti-title {
  background-color: #000;
}
.main-notification .noti-title > span {
  color: #fff;
  font-weight: 500;
}
.main-notification .noti-title button {
  background-color: #fff;
  height: 24px;
  font-size: 12px;
  font-weight: 400;
}
.bg-sidebar {
  background: hsl(var(--sidebar-background));
}
.main-notification [role="separator"] {
  display: none;
}
div:has(.main-notification) {
  margin-top: 4px;
}
.main-notification .noti-inner .noti-item {
  border-style: none none dashed;
  border-top-width: 0;
  border-top-color: currentColor;
  border-left-width: 0;
  border-left-color: currentColor;
  border-right-width: 0;
  border-right-color: currentColor;
  border-radius: 0;
}
.main-notification .noti-inner .noti-time {
  margin-top: 3px;
  font-size: 11px;
}
.main-notification .noti-all {
  border-radius: 0;
  font-size: 12px;
  font-weight: 400;
}
.main-notification .noti-all button {
  height: 20px;
  color: var(--vz-header-item-sub-color);
  padding-top: 0;
  padding-bottom: 0;
  font-weight: 400;
}
.langues > button:first-child {
  box-shadow: none;
  border: 0;
}
.langues > button svg {
  display: none;
}
.langue-inner {
  min-width: 180px;
  margin-top: 11px;
}
.langue-inner .items-center {
  padding-left: 5px;
  padding-right: 5px;
}
.main .app-title {
  border-bottom: 1px dashed var(--border);
}
.main .app-title > span {
  font-size: 14px;
  font-weight: 500;
}
.main .app-title > button {
  color: #299cdb;
  background-color: #dff0fa;
  border-radius: 4px;
  height: 26px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 400;
}
.main .app-inner {
  padding: 10px;
}
.main .app-item {
  text-align: center;
  padding: 0;
  display: block;
}
.main .app-item svg {
  margin: 10px auto;
  width: 20px !important;
  height: 20px !important;
}
.main .app-item img {
  margin: 10px auto 3px;
}
.main .app-item span {
  font-size: 12px;
}
.main-wrap {
  background-color: #f3f3f9;
  min-height: calc(100% - 50px);
}
.btn-prof {
  border-radius: 8px;
  padding-left: 7px;
  padding-right: 10px;
}
.prof-desc {
  color: var(--vz-header-item-sub-color);
}
[data-radix-popper-content-wrapper] {
  color: var(--color-text-base);
  background-color: #0000 !important;
  border-radius: 6px !important;
}
.main-header [data-slot="button"], .main-header [data-slot="dropdown-menu-trigger"] {
  color: var(--color-text-base);
}
.profile-info {
  color: var(--color-text-base);
  padding: 10px;
}
.profile-info * {
  color: var(--color-text-base);
  font-size: 12px;
}
.profile-info [data-slot="dropdown-menu-group"] {
  border-bottom: 1px dashed var(--border);
}
.profile-info [data-slot="dropdown-menu-group"]:last-child {
  border-bottom: none;
}
.shadow-md {
  border-radius: 4px;
  box-shadow: var(--shadow-md) !important;
}
.btn-nav-support247 .icon {
  border-radius: 50%;
}
this .container {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 10px #0000001a;
}
this .header {
  color: #28a745;
  margin-bottom: 20px;
  font-size: 24px;
}
this .content {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  display: grid;
}
this .card {
  border: 1px solid #e9ecef;
  border-radius: 5px;
  padding: 15px;
  transition: transform .3s;
}
this .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px #0000001a;
}
this .button {
  color: #fff;
  cursor: pointer;
  background-color: #28a745;
  border: none;
  border-radius: 4px;
  padding: 10px;
}
this .button:hover {
  background-color: #218838;
}
.resizer {
  cursor: col-resize;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  touch-action: none;
  opacity: 0;
  background: #0000001a;
  width: 5px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
.resizer:hover, .resizer.isResizing {
  opacity: 1;
  background: #0003;
}
.resizer.rtl {
  left: 0;
  right: auto;
}
.container {
  min-height: calc(100vh - 2rem);
}
.transition-all {
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.sticky {
  max-height: calc(100vh - 2rem);
  position: sticky;
  top: 1rem;
  overflow-y: auto;
}
th[draggable="true"] {
  cursor: grab;
}
th[draggable="true"]:active {
  cursor: grabbing;
}
th.drag-over {
  background-color: #0000000d;
  box-shadow: inset 0 0 0 2px #3b82f6;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-black-500 {
  color: #000;
  font-weight: 500;
}
.text-size-12 {
  font-size: 12px;
}
.text-size-13 {
  font-size: 13px;
}
.text-size-14 {
  font-size: 14px;
}
.text-size-15 {
  font-size: 15px;
}
.pt-0 {
  padding-top: 0;
}
.zoom-corner:before {
  content: "";
  border-top: 16px solid var(--border);
  border-right: 16px solid #0000;
  position: absolute;
  top: 0;
  left: 0;
}
.zoom-corner:hover:before {
  border-top-color: var(--primary);
}
.dark .zoom-corner:before {
  border-top: 16px solid var(--border);
}
.dark .zoom-corner:hover:before {
  border-top-color: var(--primary);
}
* {
  scrollbar-width: thin;
  scrollbar-color: #9ca3af transparent;
}
::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
::-webkit-scrollbar-track {
  background: none;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
}
::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}
::-webkit-scrollbar-thumb:active {
  background: #6b7280;
}
::-webkit-scrollbar-corner {
  background: none;
}
.card-hover {
  cursor: pointer;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.card-hover:hover {
  border-color: #3b82f64d;
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
}
.card-hover:hover .card-content {
  background-color: #fffffff2;
}
.card-hover.card-hover-active {
  border-color: #3b82f64d;
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
}
.card-hover.card-hover-active .card-content {
  background-color: #fffffff2;
}
.card-content {
  transition: background-color .3s;
}
.upload-loader {
  box-sizing: border-box;
  border: 10px solid #ffffff4d;
  border-color: #ffffff4d #ffffff80 #ffffffb3 #ffffffe6;
  border-radius: 50%;
  width: 58px;
  height: 58px;
  animation: 1s linear infinite rotation;
  display: inline-block;
  position: relative;
}
@keyframes rotation {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading-bar {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}
.animate-loading-bar {
  animation: 1.5s ease-in-out infinite loading-bar;
}
@keyframes accordion-down {
  from {
    opacity: 0;
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
    opacity: 1;
  }
}
@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
    opacity: 1;
  }

  to {
    opacity: 0;
    height: 0;
  }
}
.expand-icon {
  width: 10px;
  height: 10px;
  transition: transform .2s;
  transform: rotate(0);
}
.expand-icon svg {
  width: 10px;
  height: 10px;
}
.expand-icon.expanded {
  transform: rotate(90deg);
}
.tree-chevron {
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
  display: inline-block;
  transform: rotate(0);
}
.tree-chevron-open, button[data-state="open"] .tree-chevron {
  transform: rotate(90deg);
}
button[data-state="closed"] .tree-chevron {
  transform: rotate(0);
}
.tree-view-scrollable::-webkit-scrollbar {
  width: 8px;
}
.tree-view-scrollable::-webkit-scrollbar-track {
  background: none;
}
.tree-view-scrollable::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 4px;
}
.tree-view-scrollable::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / .5);
}
.tree-view-scrollable {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}
.button-wrapper-class {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  z-index: 1;
  backdrop-filter: blur(6px);
  color: #5b596c;
  cursor: pointer;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  transition: all .15s ease-in-out;
  display: inline-flex;
  position: relative;
}
.button-wrapper-class * {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}
.button__container {
  z-index: 2;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 6px;
  transition: all .15s ease-in-out;
  display: flex;
  position: relative;
  overflow: hidden;
}
.button__label {
  z-index: 3;
  position: relative;
}
.button--icon-only, .button--icon-only .button__container {
  width: 56px;
  padding: 0;
}
.button--glass .button__container {
  background: linear-gradient(#e0e6efcc 0%, #bfc8d8cc 57.59%, #cdd3e1cc 100%);
}
.button--glass .button__container:before {
  content: "";
  filter: blur(8px);
  z-index: 2;
  background: linear-gradient(90deg, #ebe8f5 0%, #eec3ff 30.34%, #ffdfcd 51.92%, #d1ffd1 75.48%, #7fcffb 100%);
  width: 100%;
  height: 33.33%;
  transition: all .15s ease-in-out;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotate(-15deg);
}
.sidebar-glass .button--glass .button__container:before {
  content: "";
  filter: blur(8px);
  z-index: 2;
  background: linear-gradient(90deg, #ebe8f5 0%, #eec3ff 30.34%, #ffdfcd 51.92%, #d1ffd1 75.48%, #7fcffb 100%);
  width: 100%;
  height: 100%;
  transition: all .15s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-15deg);
}
.button--glass:after {
  content: "";
  transform-origin: top;
  opacity: .7;
  filter: blur(8px);
  z-index: -1;
  background: linear-gradient(90deg, #ebe8f5 0%, #eec3ff 30.34%, #ffdfcd 51.92%, #d1ffd1 75.48%, #7fcffb 100%);
  width: 100%;
  height: 33.33%;
  transition: all .15s ease-in-out;
  position: absolute;
  bottom: -8px;
  left: -8px;
  transform: rotate(-15deg)scaleX(.8)scaleY(1.2);
}
.button--glass:hover {
  box-shadow: 0 2px 12px 2px #a5a3a34d;
}
.bg-menu-glass .button__container {
  background: linear-gradient(#bec6d2cc 0%, #969aa0cc 57.59%, #808288cc 110%);
}
.dark .button--glass .button__container {
  background: linear-gradient(#3c3c41e6 0%, #2d2d32e6 57.59%, #232328e6 100%);
}
.dark .bg-menu-glass .button__container {
  background: linear-gradient(#37373ce6 0%, #28282de6 57.59%, #1e1e23e6 110%);
}
.dark .button--glass .button__container:before {
  filter: blur(6px);
  background: linear-gradient(90deg, #50505a80 0%, #5a506e80 30.34%, #645a6480 51.92%, #465a5080 75.48%, #46556480 100%);
}
.dark .button--glass:after {
  opacity: .5;
  filter: blur(6px);
  background: linear-gradient(90deg, #50505a66 0%, #5a506e66 30.34%, #645a6466 51.92%, #465a5066 75.48%, #46556466 100%);
}
.custom-p-0 {
  padding: 0 !important;
}
.dark .button--glass:hover {
  box-shadow: 0 2px 12px 2px #00000080;
}
.dark .button--glass:hover .button__container {
  background: linear-gradient(#46464be6 0%, #37373ce6 57.59%, #2d2d32e6 100%);
}
.dark .button--glass:active .button__container {
  background: linear-gradient(#323237e6 0%, #28282de6 57.59%, #1e1e23e6 100%);
}
.react-flow__controls-button {
  border-bottom: none !important;
  width: 35px !important;
  height: 35px !important;
  padding: 0 !important;
}
.dark .custom-btn-hover:hover {
  background: #364153;
}
.dark .noti-bg-dark {
  background-color: #3e4148 !important;
  border: none !important;
}
.dark .custom-bg-badge-gray {
  background-color: #08763f1a !important;
  border: none !important;
}
.button--glass:hover .button__container {
  background-color: #ffffff1a;
}
.button--glass:active .button__container {
  background-color: #bfc8d8cc;
}
.button--glass:hover:after {
  opacity: .9;
  transform: rotate(-12deg)scaleX(.8)scaleY(1.8);
}
.button--glass:hover .button__container:before {
  transform: scale(1.2);
}
.button--glass:active:after {
  opacity: 1;
  filter: blur(10px);
  transform: rotate(-12deg)scaleX(1.1)scaleY(1.8)translateX(-8px);
}
.button--glass:active .button__container:before {
  transform: scale(1.8);
}
[role="tablist"] button p {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}
[data-slot="label"] {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  margin-bottom: var(--spacing-1);
}
input[data-slot="input"] {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
  border-radius: var(--radius-md);
  margin-bottom: 0;
}
input[data-slot="input"]::-moz-placeholder {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
}
input[data-slot="input"]::placeholder {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
}
input[data-slot="input"]:disabled, input[data-slot="input"][disabled] {
  cursor: not-allowed !important;
  pointer-events: auto !important;
}
[data-slot="select-value"] {
  font-weight: var(--font-normal);
  font-size: var(--text-xs) !important;
}
[data-slot="popover-trigger"] {
  margin-bottom: 0;
}
[data-slot="popover-trigger"] p {
  font-weight: var(--font-normal);
  margin-bottom: 0;
}
button {
  margin-bottom: 0;
}
button span {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
}
[data-slot="button"] {
  font-size: var(--text-xs) !important;
}
button[data-slot="popover-trigger"][type="button"][data-empty="true"] span {
  font-size: var(--text-xs);
  color: var(--text-placeholder);
}
[data-slot="popover-trigger"][data-state="closed"]:disabled, [data-slot="popover-trigger"][data-state="closed"][disabled] {
  cursor: not-allowed !important;
  pointer-events: auto !important;
}
.rich-text-editor div.absolute {
  font-size: var(--text-xs);
  color: var(--text-placeholder);
}
.form-container {
  padding: var(--spacing-3);
}
.form-wrap {
  gap: var(--spacing-3);
  flex-direction: column;
  max-height: 100%;
  display: flex;
  overflow-y: scroll;
}
.form-gap {
  -moz-column-gap: var(--spacing-4);
       column-gap: var(--spacing-4);
  row-gap: var(--spacing-3);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}
.form-gap-3 {
  -moz-column-gap: var(--spacing-4);
       column-gap: var(--spacing-4);
  row-gap: var(--spacing-3);
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}
.hrm {
  height: 100%;
}
@media (max-width: 1280px) {
  .form-gap-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .form-container {
    padding: var(--spacing-2);
  }

  .form-wrap {
    gap: var(--spacing-2);
  }

  .form-gap, .form-gap-3 {
    gap: var(--spacing-2);
    grid-template-columns: 1fr;
  }
}
@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false
}
@property --tw-tracking {
  syntax: "*";
  inherits: false
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false
}
@property --tw-brightness {
  syntax: "*";
  inherits: false
}
@property --tw-contrast {
  syntax: "*";
  inherits: false
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}
@property --tw-invert {
  syntax: "*";
  inherits: false
}
@property --tw-opacity {
  syntax: "*";
  inherits: false
}
@property --tw-saturate {
  syntax: "*";
  inherits: false
}
@property --tw-sepia {
  syntax: "*";
  inherits: false
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}
@property --tw-duration {
  syntax: "*";
  inherits: false
}
@property --tw-ease {
  syntax: "*";
  inherits: false
}
@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}
@keyframes ping {
  75%, 100% {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
@keyframes bounce {
  0%, 100% {
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
    transform: translateY(-25%);
  }

  50% {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
    transform: none;
  }
}
/* Chatbot Positioning and Responsive Styles */

/* Base positioning for all chatbot components */
.chatbot-button,
.full-chat,
.minimized-chat {
  position: fixed !important;
  bottom: 1rem !important;
  right: 1rem !important;
  z-index: 50 !important; /* Increased z-index to ensure it's on top */
}

/* Ensure chatbot button is always on top */
.chatbot-button {
  z-index: 50 !important;
}

/* Chat windows should be slightly below the button but still on top */
.full-chat,
.minimized-chat {
  z-index: 50 !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .chatbot-button,
  .full-chat,
  .minimized-chat {
    bottom: 0.75rem !important;
    right: 0.75rem !important;
  }
  
  /* Full chat takes more space on mobile but still fixed position */
  .full-chat {
    width: calc(100vw - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    height: calc(100vh - 6rem) !important;
    max-height: calc(100vh - 6rem) !important;
    /* Ensure it doesn't go off-screen */
    right: 0.75rem !important;
    left: auto !important;
  }
  
  /* Minimized chat adjusts on mobile */
  .minimized-chat {
    width: calc(100vw - 1.5rem) !important;
    max-width: 280px !important;
  }
}

@media (max-width: 480px) {
  .chatbot-button,
  .full-chat,
  .minimized-chat {
    bottom: 0.5rem !important;
    right: 0.5rem !important;
  }
  
  /* Even smaller screens */
  .full-chat {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    height: calc(100vh - 4rem) !important;
    max-height: calc(100vh - 4rem) !important;
    right: 0.5rem !important;
    left: auto !important;
  }
  
  .minimized-chat {
    width: calc(100vw - 1rem) !important;
    max-width: 260px !important;
  }
}

/* Ensure chatbot doesn't overlap with other fixed elements and is always visible */
.chatbot-container {
  padding-bottom: 5rem; /* Add space for chatbot */
}

/* Chatbot Container */
.chatbot-container-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important; /* Allow clicks to pass through */
  z-index: 50 !important;
  border-radius: 100px !important; /* Full border radius for rounded corners */
}

/* Re-enable pointer events for actual chatbot elements */
.chatbot-container-fixed .chatbot-button,
.chatbot-container-fixed .full-chat,
.chatbot-container-fixed .minimized-chat {
  pointer-events: auto !important;
}

/* Smooth animations */
.chatbot-button,
.full-chat,
.minimized-chat {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Enhanced shadows for depth */
.full-chat,
.minimized-chat {
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* .chatbot-button {
  box-shadow: 
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
} */

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .full-chat,
  .minimized-chat {
    box-shadow: 
      0 25px 50px -12px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  }
}

/* High DPI displays */
@media (min-resolution: 192dpi) {
  .chatbot-button,
  .full-chat,
  .minimized-chat {
    transform: translateZ(0) !important; /* Enable hardware acceleration */
  }
}
.chatbot-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.chatbot-scrollbar:hover {
  scrollbar-color: rgb(203 213 225) rgb(248 250 252);
}

.chatbot-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.chatbot-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

.chatbot-scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}

.chatbot-scrollbar:hover::-webkit-scrollbar-track {
  background: rgb(248 250 252);
}

.chatbot-scrollbar:hover::-webkit-scrollbar-thumb {
  background: rgb(203 213 225);
}

.chatbot-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgb(148 163 184);
}

.dark .chatbot-scrollbar {
  scrollbar-color: transparent transparent;
}

.dark .chatbot-scrollbar:hover {
  scrollbar-color: rgb(51 65 85) rgb(15 23 42);
}

.dark .chatbot-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.dark .chatbot-scrollbar:hover::-webkit-scrollbar-track {
  background: rgb(15 23 42);
}

.dark .chatbot-scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
}

.dark .chatbot-scrollbar:hover::-webkit-scrollbar-thumb {
  background: rgb(51 65 85);
}

.dark .chatbot-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgb(71 85 105);
}

.message-content a {
  color: #FFC170 !important;
}

.pd-input {
  padding-left: 20px;
  padding-right: 20px;
}

/* Message animations */
@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-bubble {
  animation: messageSlideIn 0.3s ease-out;
}

/* Typing indicator animation */
@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

.animate-bounce {
  animation: bounce 1.4s ease-in-out infinite both;
}

/* Button hover effects */
.chatbot-button {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.chatbot-button:hover {
  transform: scale(1.02);
}

.chatbot-button:active {
  transform: scale(0.98);
}

.bg-wrapper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 12px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: #bfbebe99;
  border: 1px solid #D4D4D426;
  box-shadow: 0 0 3px 0.5px #8357EE40 !important;
}

.bg-wrapper::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-image: url('/assets/chatbot-bg-gradient-BWIo2T92.svg');
  background-position: center;
  filter: blur(20px) saturate(120%) brightness(1.15);
  -webkit-filter: blur(20px) saturate(120%) brightness(1.15);
  z-index: -1;
}

/* Floating button animations */
@keyframes floatingButtonEntrance {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-180deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.1) rotate(-90deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes floatingButtonBounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transform: translate3d(0, -4px, 0);
  }
  70% {
    transform: translate3d(0, -2px, 0);
  }
  90% {
    transform: translate3d(0, -1px, 0);
  }
}

.floating-button-entrance {
  animation: floatingButtonEntrance 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.floating-button-bounce {
  animation: floatingButtonBounce 0.8s ease-in-out;
}

/* Smooth position transitions for floating button */
.floating-button-smooth-move {
  transition:
    left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Login modal backdrop */
.login-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.title-suggestion {
  color: #8357ee;
}

/* Badge suggestion styles */
.badge-suggestion {
  height: 38px;
  border-radius: 50px;
  background: #ffffff80;
  border: 1px solid #ffffff;
  padding-left: 0.875rem;
  font-size: 14px;
  padding-right: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #160211;
  transition: opacity 0.2s;
  cursor: pointer;
}

.badge-suggestion:hover {
  background: #ffffff60;
}

.ic-suggestion-chatbot:hover {
  opacity: 0.9;
}

.wrapper-content {
  padding-left: 20px;
  padding-right: 20px;
}

.wrapper-header {
  padding-left: 12px;
  padding-right: 20px;
}

.size-btn-action {
  width: 18px;
  height: 18px;
}
.badge-suggestion[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Message bubble styles */
.message-bubble-user {
  background: #FFFFFF80;
  color: #160211;
  border: 1px solid #FFFFFF;
  border-bottom-right-radius: 2px !important;
}

.message-bubble-bot {
  background: #18142280;
  color: white;
  border: 1px solid #BDA2FF;
  border-bottom-left-radius: 2px !important;
}

.color-action {
  background: #323230;
}

.padding-section {
  padding-bottom: 12px;
}

/* Chat input container styles */
.chat-input-container {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 0;
  border-radius: 50px;
  background: #000000;
}

.chat-input-container:focus-within {
  background: #1a1a1a;
}
/* Enhanced Floating Button Animations */
@keyframes floating-button-entrance {
  0% {
    transform: translate(20px, 20px) scale(0.3) rotate(180deg);
    opacity: 0;
  }
  60% {
    transform: translate(-10px, -10px) scale(1.1) rotate(-10deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes floating-button-bounce {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1) rotate(-2deg);
  }
  50% {
    transform: scale(0.9) rotate(2deg);
  }
  75% {
    transform: scale(1.05) rotate(-1deg);
  }
}

@keyframes pulse-subtle {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.95;
  }
}

@keyframes smooth-glow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 0 8px 30px rgba(27, 197, 189, 0.3);
  }
}

@keyframes wiggle {
  0%, 7%, 14%, 21%, 28%, 35%, 42%, 49%, 56%, 63%, 70%, 77%, 84%, 91%, 98%, 100% {
    transform: rotate(0deg);
  }
  3.5%, 10.5%, 17.5%, 24.5%, 31.5%, 38.5%, 45.5%, 52.5%, 59.5%, 66.5%, 73.5%, 80.5%, 87.5%, 94.5% {
    transform: rotate(-1deg);
  }
}

/* Main floating button classes */
.floating-button-entrance {
  animation: floating-button-entrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.floating-button-bounce {
  animation: floating-button-bounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.animate-pulse-subtle {
  animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-wiggle {
  animation: wiggle 1s ease-in-out infinite;
}

/* Enhanced dragging state */
.chatbot-button {
  transition-property: transform, box-shadow, opacity, filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.chatbot-button:not(.dragging) {
  transition-duration: 0.2s;
}

.chatbot-button.dragging {
  transition: none !important;
  box-shadow: none !important;
  z-index: 1000;
  filter: brightness(1.1);
}

/* Smooth edge snapping animation */
.floating-button-smooth-move {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced hover effects */
.chatbot-button:hover:not(.dragging) {
  transform: scale(1.05) !important;
}

.chatbot-button:active:not(.dragging) {
  transform: scale(0.98) !important;
}

/* .floating-button-shadow:hover {
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(27, 197, 189, 0.15);
}

.floating-button-shadow.dragging {
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.2),
    0 15px 30px rgba(27, 197, 189, 0.25),
    0 5px 15px rgba(27, 197, 189, 0.3);
} */

/* Mobile optimizations */
@media (max-width: 768px) {
  .chatbot-button {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  .floating-button-entrance {
    animation-duration: 0.6s;
  }
  
  /* .floating-button-shadow {
    box-shadow: 
      0 8px 20px rgba(0, 0, 0, 0.12),
      0 3px 8px rgba(0, 0, 0, 0.08);
  }
  
  .floating-button-shadow.dragging {
    box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.18),
      0 12px 24px rgba(27, 197, 189, 0.2);
  } */
}

/* Prevent text selection during drag */
.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Smooth GPU acceleration */
.chatbot-button {
  transform: translateZ(0);
}

/* Enhanced focus states for accessibility */
.chatbot-button:focus-visible {
  outline: 2px solid #1BC5BD;
  outline-offset: 4px;
}

/* Improved performance for animations */
@media (prefers-reduced-motion: reduce) {
  .floating-button-entrance,
  .floating-button-bounce,
  .animate-pulse-subtle,
  .animate-wiggle {
    animation: none;
  }
  
  .chatbot-button {
    transition: none;
  }
}
/* Custom scrollbar styles for TimePicker */
.time-picker-scrollable {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f3f4f6;
}

/* WebKit browsers (Chrome, Safari, Edge) */
.time-picker-scrollable::-webkit-scrollbar {
  width: 6px;
}

.time-picker-scrollable::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}

.time-picker-scrollable::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.time-picker-scrollable::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Dark mode */
.dark .time-picker-scrollable {
  scrollbar-color: #4b5563 #1f2937;
}

.dark .time-picker-scrollable::-webkit-scrollbar-track {
  background: #1f2937;
}

.dark .time-picker-scrollable::-webkit-scrollbar-thumb {
  background: #4b5563;
}

.dark .time-picker-scrollable::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Time picker item styles */
.time-picker-item {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  margin-top: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  border-radius: 9999px;
}

.time-picker-item-selected {
  background-color: black;
  color: white;
  font-weight: 500;
  border-radius: 9999px;
  cursor: pointer;
}

.dark .time-picker-item-selected {
  background-color: white;
  color: black;
  font-weight: 500;
  border-radius: 9999px;
  cursor: pointer;
}

.time-picker-item-disabled {
  cursor: not-allowed;
  background-color: #5a5b5c;
  opacity: 0.5;
  border-radius: 0.3rgb(89, 90, 92)
}

.dark .time-picker-item-disabled {
  color: #fff;
}
/* Dark mode placeholder styling */
.dark .dark-placeholder-input::-moz-placeholder {
  color: #9ca3af !important; /* gray-400 - màu xám vừa phải không quá tối */
  opacity: 1 !important;
}
.dark .dark-placeholder-input::placeholder {
  color: #9ca3af !important; /* gray-400 - màu xám vừa phải không quá tối */
  opacity: 1 !important;
}

.dark .dark-placeholder-input::-webkit-input-placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

.dark .dark-placeholder-input::-moz-placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

.dark .dark-placeholder-input:-ms-input-placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}
/* MonthPicker CSS Styles */

/* Main container */
.month-picker-container {
  display: flex;
  align-items: center;
  position: relative;
}

/* Global popover override to prevent truncation */
[data-radix-popper-content-wrapper] {
  z-index: 102 !important;
}

/* Ensure popover content is not constrained by parent overflow */
[data-radix-select-content],
[data-radix-popover-content] {
  max-width: none !important;
  overflow: visible !important;
}

/* Trigger button */
.month-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  font-weight: normal;
  font-size: 0.75rem;
  height: 2rem;
  border: 1px solid var(--border);
  background-color: var(--background);
  color: var(--foreground);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.month-picker-trigger:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.month-picker-trigger.placeholder {
  color: var(--muted-foreground);
}

.month-picker-trigger-content {
  display: flex;
  align-items: center;
}

.month-picker-icon {
  margin-right: 0.25rem;
  height: 0.75rem;
  width: 0.75rem;
}

/* Navigation buttons */
.month-picker-nav-container {
  display: flex;
  align-items: center;
}

.month-picker-nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  padding: 0;
  border: none;
  box-shadow: none;
  /* background-color: var(--background); */
  color: var(--foreground);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  margin-left: 0.1875rem;
  margin-right: 0.1875rem;
  transition: all 0.2s ease;
}

.month-picker-nav-button:hover:not(:disabled) {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.month-picker-nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.month-picker-nav-button:first-child {
  margin-left: 0.1875rem;
}

.month-picker-nav-button:last-child {
  margin-right: 0;
}

.month-picker-nav-icon {
  height: 1rem;
  width: 1rem;
}

/* Popover content */
.month-picker-popover {
  width: auto !important;
  min-width: 20rem !important;
  max-width: 24rem !important;
  padding: 0 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--popover);
  overflow: visible !important;
  z-index: 50;
}

.month-picker-content {
  padding: 1rem;
  width: 100%;
  min-width: 18rem;
  box-sizing: border-box;
}

/* Header */
.month-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  min-width: 100%;
  width: 100%;
}

.month-picker-header-nav {
  height: 2rem;
  width: 2rem;
  border: 1px solid var(--border);
  background-color: var(--background);
  color: var(--foreground);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.month-picker-header-nav:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.month-picker-header-nav-icon {
  height: 1rem;
  width: 1rem;
}

.month-picker-header-title {
  font-weight: 500;
  font-size: 1rem;
  background-color: transparent;
  color: var(--foreground);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  text-align: center;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
}

.month-picker-header-title:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

/* Grid layout */
.month-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 100%;
}

/* Month/Year buttons */
.month-picker-item {
  height: 2.5rem;
  width: 100%;
  min-width: 5rem;
  max-width: none;
  font-size: 0.875rem;
  font-weight: normal;
  border: none;
  background-color: transparent;
  color: var(--foreground);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  box-sizing: border-box;
}

.month-picker-item:hover:not(:disabled) {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.month-picker-item.selected {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.month-picker-item.current:not(.selected) {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.month-picker-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.month-picker-item:disabled:hover {
  background-color: transparent;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Dark mode adjustments */
.dark .month-picker-popover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .month-picker-popover {
    min-width: 16rem !important;
    max-width: 18rem !important;
  }
  
  .month-picker-content {
    min-width: 14rem;
    padding: 0.75rem;
  }
  
  .month-picker-item {
    min-width: 4rem;
    font-size: 0.8125rem;
    height: 2.25rem;
  }
  
  .month-picker-grid {
    gap: 0.375rem;
  }
}
.custom-bg-arrow {
  fill: #151515;
}
.dark .custom-bg-arrow {
  fill: #fff;
}

/* Select placeholder styling */
[data-slot='select-trigger'][data-placeholder] {
  color: #6b7280 !important; /* neutral-500 */
}

.dark [data-slot='select-trigger'][data-placeholder] {
  color: #9ca3af !important; /* neutral-400 - màu xám cho dark mode */
}

/* Command input placeholder styling for multi-select */
.dark [data-slot='command-input']::-moz-placeholder {
  color: #9ca3af !important; /* gray-400 */
  opacity: 1 !important;
}
.dark [data-slot='command-input']::placeholder {
  color: #9ca3af !important; /* gray-400 */
  opacity: 1 !important;
}

.dark [data-slot='command-input']::-webkit-input-placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

.dark [data-slot='command-input']::-moz-placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Tooltip Content Styles */
.tooltip-content {
  z-index: 50;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  text-wrap: balance;
  background-color: #000;
  color: #fff;
  
  /* Animations */
  animation: tooltip-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tooltip-content[data-state='closed'] {
  animation: tooltip-out 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Slide animations based on side */
.tooltip-content[data-side='bottom'] {
  animation: tooltip-in-from-top 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tooltip-content[data-side='top'] {
  animation: tooltip-in-from-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tooltip-content[data-side='left'] {
  animation: tooltip-in-from-right 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tooltip-content[data-side='right'] {
  animation: tooltip-in-from-left 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark mode */
.dark .tooltip-content {
  background-color: rgb(75 85 99);
  color: white;
}

/* Keyframe animations */
@keyframes tooltip-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes tooltip-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes tooltip-in-from-top {
  from {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tooltip-in-from-bottom {
  from {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tooltip-in-from-left {
  from {
    opacity: 0;
    transform: translateX(-0.5rem) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes tooltip-in-from-right {
  from {
    opacity: 0;
    transform: translateX(0.5rem) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Arrow Styles */
.arrow-custom {
  fill: black;
}

.dark .arrow-custom {
  fill: #4a5565;
}

.fill-white-black {
  fill: white;
}/* Add to your component styles or global CSS */
.rich-text-editor [contenteditable] ul,
.rich-text-editor [contenteditable] ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.rich-text-editor [contenteditable] ul {
  list-style-type: disc;
}

.rich-text-editor [contenteditable] ol {
  list-style-type: decimal;
}

.rich-text-editor [contenteditable] ul ul {
  list-style-type: circle;
  margin: 0.2em 0;
}

.rich-text-editor [contenteditable] ul ul ul {
  list-style-type: square;
}

.rich-text-editor [contenteditable] ol ol {
  list-style-type: lower-alpha;
  margin: 0.2em 0;
}

.rich-text-editor [contenteditable] ol ol ol {
  list-style-type: lower-roman;
}

.rich-text-editor [contenteditable] li {
  margin: 0.2em 0;
  line-height: 1.4;
}

.rich-text-editor [contenteditable] li p {
  margin: 0;
  display: inline;
}

/* Nested list indentation */
.rich-text-editor [contenteditable] li > ul,
.rich-text-editor [contenteditable] li > ol {
  margin: 0.2em 0;
}/* SidebarToggleButton CSS */
.sidebar-toggle-button {
    position: absolute;
    right: -14px;
    top: 2rem;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #3b82f6;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(28, 117, 253, 0.3);
    transition: all 0.2s ease-in-out;
    z-index: 9999;
    pointer-events: auto;
}

.sidebar-toggle-button:hover {
    background-color: #2563eb;
    box-shadow: 0 6px 16px rgba(28, 117, 253, 0.4);
    transform: translateY(-50%) scale(1.05);
}

.sidebar-toggle-button:active {
    transform: translateY(-50%) scale(0.95);
}

.sidebar-toggle-button svg {
    transition: transform 0.2s ease-in-out;
}

.sidebar-toggle-button:hover svg {
    transform: translateX(1px);
}

.sidebar-toggle-button.collapsed svg {
    transform: rotate(180deg);
}

.sidebar-toggle-button.collapsed:hover svg {
    transform: rotate(180deg) translateX(1px);
}

/* Hide on mobile */
@media (max-width: 768px) {
    .sidebar-toggle-button {
        display: none;
    }
}
/* Drawer Overlay */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.4);
}

/* Drawer Content */
.drawer-content {
  --drawer-level: 0;
  --drawer-offset: 0px;
  --drawer-offset-unit: 28px;

  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
  outline: none;
  background-color: var(--background);
  display: flex;
  flex-direction: column;
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
  height: 100%;
  border-left: 1px solid var(--accent);
  max-width: 1500px;
}

.drawer-custom-width {
  max-width: none !important;
}

/* Drawer Sizes - Small */
.drawer-size-sm {
  width: 95%;
  max-width: 600px;
}

@media (min-width: 640px) {
  .drawer-size-sm {
    width: 90%;
  }
}

@media (min-width: 768px) {
  .drawer-size-sm {
    width: 80%;
    max-width: 750px;
  }
}

@media (min-width: 1024px) {
  .drawer-size-sm {
    width: 60%;
    max-width: 900px;
  }
}

@media (min-width: 1280px) {
  .drawer-size-sm {
    width: 60%;
  }
}

@media (min-width: 1536px) {
  .drawer-size-sm {
    width: 60%;
  }
}

@media (min-width: 1920px) {
  .drawer-size-sm {
    width: 1500px;
  }
}

/* Drawer Sizes - Large */
.drawer-size-lg {
  width: 98%;
}

@media (min-width: 640px) {
  .drawer-size-lg {
    width: 95%;
  }
}

@media (min-width: 768px) {
  .drawer-size-lg {
    width: 95%;
  }
}

@media (min-width: 1024px) {
  .drawer-size-lg {
    width: 90%;
  }
}

@media (min-width: 1280px) {
  .drawer-size-lg {
    width: 70%;
  }
}

@media (min-width: 1536px) {
  .drawer-size-lg {
    width: 60%;
  }
}

/* Drawer Sizes - Medium (10% smaller than Large) */
.drawer-size-md {
  width: 100%;
}

@media (min-width: 640px) {
  .drawer-size-md {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .drawer-size-md {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .drawer-size-md {
    width: 90%;
  }
}

@media (min-width: 1280px) {
  .drawer-size-md {
    width: 65%;
  }
}

@media (min-width: 1536px) {
  .drawer-size-md {
    width: 50%;
  }
}

/* Drawer Sizes - Full (minus sidebar) */
.drawer-size-full {
  width: 100%;
}

.drawer-size-full.has-sidebar-expanded {
  width: calc(100% - 208px);
}

.drawer-size-full.has-sidebar-collapsed {
  width: calc(100% - 64px);
}

@media (min-width: 1920px) {
  .drawer-size-full {
    width: 1500px;
  }

  .drawer-size-full.has-sidebar-expanded {
    width: 1500px;
  }

  .drawer-size-full.has-sidebar-collapsed {
    width: 1500px;
  }
}

/* ========================================
   NESTED DRAWER - Dynamic offset using CSS variables
   Each nested level automatically gets offset by --drawer-offset
   ======================================== */

/* Nested Drawer Sizes - Small */
.drawer-nested-content.drawer-size-sm {
  width: calc(95% - var(--drawer-offset, 0px));
  max-width: calc(600px - var(--drawer-offset, 0px));
}

@media (min-width: 640px) {
  .drawer-nested-content.drawer-size-sm {
    width: calc(90% - var(--drawer-offset, 0px));
  }
}

@media (min-width: 768px) {
  .drawer-nested-content.drawer-size-sm {
    width: calc(80% - var(--drawer-offset, 0px));
    max-width: calc(750px - var(--drawer-offset, 0px));
  }
}

@media (min-width: 1024px) {
  .drawer-nested-content.drawer-size-sm {
    width: calc(60% - var(--drawer-offset, 0px));
    max-width: calc(900px - var(--drawer-offset, 0px));
  }
}

@media (min-width: 1280px) {
  .drawer-nested-content.drawer-size-sm {
    width: calc(60% - var(--drawer-offset, 0px));
  }
}

@media (min-width: 1536px) {
  .drawer-nested-content.drawer-size-sm {
    width: calc(60% - var(--drawer-offset, 0px));
  }
}

@media (min-width: 1920px) {
  .drawer-nested-content.drawer-size-sm {
    width: calc(1500px - var(--drawer-offset, 0px));
  }
}

/* Nested Drawer Sizes - Large */
.drawer-nested-content.drawer-size-lg {
  width: calc(98% - var(--drawer-offset, 0px));
}

@media (min-width: 640px) {
  .drawer-nested-content.drawer-size-lg {
    width: calc(95% - var(--drawer-offset, 0px));
  }
}

@media (min-width: 768px) {
  .drawer-nested-content.drawer-size-lg {
    width: calc(95% - var(--drawer-offset, 0px));
  }
}

@media (min-width: 1024px) {
  .drawer-nested-content.drawer-size-lg {
    width: calc(90% - var(--drawer-offset, 0px));
  }
}

@media (min-width: 1280px) {
  .drawer-nested-content.drawer-size-lg {
    width: calc(70% - var(--drawer-offset, 0px));
  }
}

@media (min-width: 1536px) {
  .drawer-nested-content.drawer-size-lg {
    width: calc(60% - var(--drawer-offset, 0px));
  }
}

/* Nested Drawer Sizes - Medium (10% smaller than Large) */
.drawer-nested-content.drawer-size-md {
  width: calc(100% - var(--drawer-offset, 0px));
}

@media (min-width: 640px) {
  .drawer-nested-content.drawer-size-md {
    width: calc(100% - var(--drawer-offset, 0px));
  }
}

@media (min-width: 768px) {
  .drawer-nested-content.drawer-size-md {
    width: calc(100% - var(--drawer-offset, 0px));
  }
}

@media (min-width: 1024px) {
  .drawer-nested-content.drawer-size-md {
    width: calc(90% - var(--drawer-offset, 0px));
  }
}

@media (min-width: 1280px) {
  .drawer-nested-content.drawer-size-md {
    width: calc(65% - var(--drawer-offset, 0px));
  }
}

@media (min-width: 1536px) {
  .drawer-nested-content.drawer-size-md {
    width: calc(50% - var(--drawer-offset, 0px));
  }
}

/* Nested Drawer Sizes - Full */
.drawer-nested-content.drawer-size-full {
  width: calc(100% - var(--drawer-offset, 0px));
}

.drawer-nested-content.drawer-size-full.has-sidebar-expanded {
  width: calc(100% - 208px - var(--drawer-offset, 0px));
}

.drawer-nested-content.drawer-size-full.has-sidebar-collapsed {
  width: calc(100% - 64px - var(--drawer-offset, 0px));
}

@media (min-width: 1920px) {
  .drawer-nested-content.drawer-size-full {
    width: calc(1500px - var(--drawer-offset, 0px));
  }

  .drawer-nested-content.drawer-size-full.has-sidebar-expanded {
    width: calc(1500px - var(--drawer-offset, 0px));
  }

  .drawer-nested-content.drawer-size-full.has-sidebar-collapsed {
    width: calc(1500px - var(--drawer-offset, 0px));
  }
}

/* Drawer Content - Responsive widths (deprecated - kept for backward compatibility) */
.drawer-content:not(.drawer-size-sm):not(.drawer-size-md):not(.drawer-size-lg):not(.drawer-size-full) {
  width: 98%;
}

@media (min-width: 768px) {
  .drawer-content:not(.drawer-size-sm):not(.drawer-size-md):not(.drawer-size-lg):not(.drawer-size-full) {
    width: 70%;
  }
}

@media (min-width: 1024px) {
  .drawer-content:not(.drawer-size-sm):not(.drawer-size-md):not(.drawer-size-lg):not(.drawer-size-full) {
    width: 42%;
  }
}

@media (min-width: 1536px) {
  .drawer-content:not(.drawer-size-sm):not(.drawer-size-md):not(.drawer-size-lg):not(.drawer-size-full) {
    width: 34%;
  }
}

/* Drawer Body */
.drawer-body {
  padding: 1rem;
  height: 100%;
  overflow: hidden;
  /* padding-bottom: 0; */
  background-color: var(--background);
  border-top-left-radius: 10px;
  flex: 1;

  /* height: calc(100vh - 120px); */
  /* Fix for nested scrollable elements */
  contain: layout style;
}

.drawer-body-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Drawer Footer */
.drawer-footer {
  padding: 1rem;
  padding-top: 0px;
  background-color: var(--background);
  margin-top: auto;
}
.custom-bg-warning {
  background-color: #fff3cd;
}

.dark .custom-bg-warning {
  background-color: #151515;
}.custom-bg {
  background-color: #fff;
}
.dark .custom-bg {
  background-color: #151515;
}/* Rainbow animated loading bar */
.rainbow-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* Override the loading bar color with rainbow gradient */
.rainbow-loading-bar > div > div {
  background: linear-gradient(
    90deg,
    #ff0000 0%,
    #ff7f00 14%,
    #ffff00 28%,
    #00ff00 42%,
    #0000ff 57%,
    #4b0082 71%,
    #9400d3 85%,
    #ff0000 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: rainbow-slide 2s linear infinite !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 
              0 0 20px rgba(255, 100, 255, 0.3) !important;
}

@keyframes rainbow-slide {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}
/* AdvancePopup CSS Styles */

/* Main backdrop */
.advance-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.2);
}

.advance-popup-backdrop.animating {
  animation: fadeIn 200ms ease-in-out;
}

/* Main modal container */
.advance-popup-modal {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  background-color: white;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.dark .advance-popup-modal {
  background-color: var(--background);
}

.advance-popup-modal.animating {
  animation: slideInFromRight 300ms ease-out;
}

/* Modal content wrapper */
.advance-popup-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
}

/* Resize handle */
.advance-popup-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  z-index: 30;
  width: 2px;
  height: 100%;
  cursor: e-resize;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: linear;
  background-color: transparent;
}

.advance-popup-resize-handle:hover {
  background-color: rgb(219, 234, 254);
}

.dark .advance-popup-resize-handle:hover {
  background-color: rgba(30, 58, 138, 0.3);
}

.advance-popup-resize-handle:hover::after {
  background-color: rgb(37, 99, 235);
}

.advance-popup-resize-handle.resizing {
  background-color: rgb(219, 234, 254);
}

.dark .advance-popup-resize-handle.resizing {
  background-color: rgba(30, 58, 138, 0.3);
}

.advance-popup-resize-handle.resizing::after {
  background-color: rgb(37, 99, 235);
}

.advance-popup-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  background-color: rgb(209, 213, 219);
}

.dark .advance-popup-resize-handle::after {
  background-color: rgb(75, 85, 99);
}

/* Header */
.advance-popup-header {
  border-bottom: 1px solid var(--border);
}

.advance-popup-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.advance-popup-header-text {
  flex: 1 1 0%;
}

.advance-popup-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: hsl(var(--primary));
}

.dark .advance-popup-title {
  color: white;
}

.advance-popup-subtitle {
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgb(156, 163, 175);
}

.dark .advance-popup-subtitle {
  color: rgb(156, 163, 175);
}

.advance-popup-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Header buttons */
.advance-popup-btn {
  height: 2rem;
  width: 2rem;
  padding: 0;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.advance-popup-btn-create,
.advance-popup-btn-copy {
  background-color: var(--accent);
  border: 1px solid var(--border);
}

.advance-popup-btn-create:hover,
.advance-popup-btn-copy:hover {
  background-color: rgb(219, 234, 254);
  color: rgb(29, 78, 216);
}

.dark .advance-popup-btn-create:hover,
.dark .advance-popup-btn-copy:hover {
  background-color: rgba(30, 58, 138, 0.3);
  color: rgb(147, 197, 253);
}

.advance-popup-btn-edit {
  color: rgb(194, 65, 12);
}

.advance-popup-btn-edit:hover {
  background-color: rgb(254, 215, 170);
  color: rgb(194, 65, 12);
}

.dark .advance-popup-btn-edit:hover {
  background-color: rgba(154, 52, 18, 0.3);
  color: rgb(251, 146, 60);
}

.advance-popup-btn-close:hover {
  background-color: rgb(254, 242, 242);
  color: rgb(220, 38, 38);
}

.dark .advance-popup-btn-close:hover {
  background-color: rgba(127, 29, 29, 0.2);
  color: rgb(248, 113, 113);
}

.advance-popup-btn-default:hover {
  background-color: rgb(243, 244, 246);
}

.dark .advance-popup-btn-default:hover {
  background-color: rgb(31, 41, 55);
}

/* Body */
.advance-popup-body {
  flex: 1 1 0%;
  overflow-y: auto;
  overflow-x: hidden;
}

.advance-popup-body-content {
  padding: 0.75rem;
}

/* Bottom actions */
.advance-popup-bottom {
  background-color: var(--background);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px -2px rgba(0, 0, 0, 0.1);
}

/* Rating Popup Styles */
.rating-popup-content {
  max-width: 28rem;
}

.rating-popup-title {
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
}

.rating-popup-description {
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(75, 85, 99);
}

.rating-popup-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.rating-stars {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.rating-star-btn {
  width: 2.5rem;
  height: 2.5rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 200ms;
  color: rgb(209, 213, 219);
}

.rating-star-btn.active {
  color: rgb(251, 191, 36);
}

.rating-star-btn:hover {
  color: rgb(251, 191, 36);
}

.rating-star-icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

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

.rating-score {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
}

.rating-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(75, 85, 99);
  margin-top: 0.25rem;
}

.rating-feedback {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rating-feedback-label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: rgb(55, 65, 81);
}

.rating-textarea {
  min-height: 5rem;
  resize: none;
  width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.rating-char-count {
  text-align: right;
  font-size: 0.75rem;
  line-height: 1rem;
  color: rgb(107, 114, 128);
}

.rating-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rating-submit-btn {
  width: 100%;
  background-color: rgb(37, 99, 235);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: white;
}

.rating-submit-btn:hover {
  background-color: rgb(29, 78, 216);
}

.rating-later-btn {
  width: 100%;
  color: rgb(75, 85, 99);
}

.rating-later-btn:hover {
  color: rgb(31, 41, 55);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Responsive utilities */
@media (max-width: 640px) {
  .rating-popup-content {
    max-width: 100%;
  }
}
/* Advanced Import Component Styles */

/* Main container */
.advanced-import-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

/* Upload Step Styles */
.upload-step-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.upload-step-preview {
  margin: 1rem 0;
}

.upload-step-preview-card {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.upload-step-preview-header {
  background-color: var(--background);
  padding: 0.5rem;
}

.upload-step-preview-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.upload-step-preview-content {
  padding: 0.75rem;
}

.upload-step-preview-data {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  font-size: 0.75rem;
}

.upload-area-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
  width: 100%;
  max-width: 72rem;
}

.upload-area {
  padding: 1.5rem;
  border: 2px dashed var(--border);
  transition: all 0.3s ease;
  cursor: pointer;
  border-radius: 0.5rem;
  background-color: var(--background);
}

.upload-area:hover {
  background-color: var(--accent);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.upload-area.dragging {
  border-color: #14b8a6;
  background-color: #ccfbf1;
  box-shadow: 0 10px 15px -3px rgb(20 184 166 / 0.1);
}

.upload-area-content {
  padding: 2rem;
  text-align: center;
}

.upload-area-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.upload-area-icon {
  width: 3rem;
  height: 3rem;
  transition: color 0.3s ease;
  color: #94a3b8;
}

.upload-area-icon.dragging {
  color: #14b8a6;
}

.upload-area-text {
  font-size: 0.75rem;
  margin-bottom: 0.4rem;
  transition: color 0.3s ease;
}

.upload-area-text.dragging {
  color: #0d9488;
  font-weight: 500;
}

.upload-area-buttons {
  display: flex;
  gap: 0.5rem;
}

.upload-button {
  background-color: #14b8a6;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.upload-button:hover {
  background-color: #0d9488;
}

.upload-button:disabled {
  background-color: #94a3b8;
  cursor: not-allowed;
}

.template-button {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  border: 1px solid #0d9488;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  box-shadow: 0 2px 4px rgba(20, 184, 166, 0.2);
}

.template-button:hover {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  box-shadow: 0 4px 8px rgba(20, 184, 166, 0.3);
  transform: translateY(-1px);
}

.upload-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.upload-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid white;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Help Text */
.upload-help-text {
  text-align: center;
  font-size: 0.675rem;
  margin-top: 0.5rem;
}

.upload-help-text p {
  margin: 0;
}

.upload-help-text p+p {
  margin-top: 0.25rem;
}

/* Bottom Actions */
.bottom-actions {
  display: flex;
  justify-content: space-between;
}

.bottom-actions-right {
  display: flex;
  gap: 0.75rem;
}

.action-button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.action-button-primary {
  background-color: #14b8a6;
  color: white;
}

.action-button-primary:hover:not(:disabled) {
  background-color: #0d9488;
}

.action-button-outline {
  background-color: transparent;
  color: #374151;
  border: 1px solid #d1d5db;
}

.action-button-outline:hover {
  background-color: #f9fafb;
}

.action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Wizard Styles */
.wizard-container {
  width: 100%;
}

/* Header Step Styles */
.header-step-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.header-mode-selection h3 {
  margin-bottom: 0.75rem;
}

.header-mode-selection .flex {
  display: flex;
}

.header-mode-selection label {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.header-mode-selection label:hover {
  opacity: 0.8;
}

.header-mode-selection input[type="radio"] {
  margin-right: 0.5rem;
}

.header-step-card-content {
  padding: 0 !important;
}

.header-step-table-wrapper {
  overflow-x: auto;
}

.header-step-row {
  transition: background-color 0.2s ease;
  border-left: 4px solid transparent;
}

.header-step-row:hover:not(.header-step-row-selected) {
  background-color: var(--accent);
}

.header-step-row.header-step-row-selected,
.header-step-row-selected {
  background: linear-gradient(to right, rgb(130, 244, 222), #dbfff8c6) !important;
  border-left: 4px solid #14b8a6 !important;
  color: #000;
}

.header-step-row-default {
  border-left: 4px solid transparent !important;
}

.header-step-radio-cell {
  padding: 0.5rem 0.75rem;
  width: 3rem;
  background-color: var(--backgracound);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-step-radio {
  width: 1rem;
  height: 1rem;
  color: #14b8a6;
  background-color: #f3f4f6;
  border: 1px solid white;
  margin: 0;
}

.header-step-data-cell {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  min-width: 120px;
  max-width: 200px;
}

.header-step-cell-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-icon {
  height: 2rem;
}

/* Match Step Styles */
.match-step-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.match-step-header {
  display: flex;
  flex-direction: column;
}

.match-step-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.match-step-description {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0.25rem 0 0 0;
}

.match-step-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.match-step-section-title {
  font-size: 0.8125rem;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
  font-weight: 500;
}

.match-step-columns-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  container-type: inline-size;
}

.match-step-column-card {
  width: calc(25% - 0.4rem);
  flex-shrink: 0;
}

@container (min-width: 800px) {
  .match-step-column-card {
    width: calc(25% - 0.4rem);
  }
}

@container (min-width: 1200px) {
  .match-step-column-card {
    width: calc(12.5% - 0.45rem);
  }
}

.match-step-column-ignored {
  opacity: 0.5;
}

.match-step-card-content {
  padding: 0.5rem;
}

.match-step-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.match-step-column-header {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.match-step-header-ignored {
  color: var(--text-secondary);
}

.match-step-action-button {
  height: 1rem;
  width: 1rem;
  padding: 0;
  flex-shrink: 0;
}

.match-step-button-icon {
  width: 0.625rem;
  height: 0.625rem;
}

.match-step-preview-data {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-bottom: 0.5rem;
}

.match-step-preview-cell {
  font-size: 0.75rem;
  padding: 0.375rem 0.375rem;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-step-preview-cell.last {
  font-size: 0.75rem;
  padding: 0.375rem 0.375rem;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-step-preview-ignored {
  color: var(--text-secondary);
}

.match-step-arrow {
  text-align: center;
  margin-bottom: 0.25rem;
}

.match-step-arrow-symbol {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.match-step-ignored-label {
  text-align: center;
  padding: 0.25rem 0;
}

.match-step-ignored-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.match-step-selector-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.match-step-selector-wrapper {
  flex: 1;
  min-width: 0;
}

.match-step-select {
  font-size: 0.75rem;
}

.match-step-icon-wrapper {
  flex-shrink: 0;
}

.match-step-icon-matched {
  width: 1rem;
  height: 1rem;
  background-color: #14b8a6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.match-step-check-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: #ffffff;
}

.match-step-icon-empty {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #f3f4f6;
  border-radius: 50%;
}

/* Enhanced Match Step Styles for Employee Validation */
/* .match-step-column-card.border-l-4.border-l-red-500 {
  border-left: 2px solid #ef4444;
} */

.match-step-column-card.border-l-4.border-l-teal-500 {
  border-left: 2px solid #14b8a6;
}

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

.match-step-select.border-red-300:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.match-step-icon-matched.bg-green-100.border-green-500 {
  background-color: #dcfce7;
  border-color: #22c55e;
}

.match-step-icon-matched.bg-blue-100.border-blue-500 {
  background-color: #dbeafe;
  border-color: #3b82f6;
}

.match-step-check-icon.text-green-600 {
  color: #16a34a;
}

.match-step-check-icon.text-blue-600 {
  color: #2563eb;
}

/* Validation Summary Styles */
.validation-summary {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: #fffbeb;
  border: 1px solid #fed7aa;
  border-radius: 0.5rem;
}

.validation-summary-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #92400e;
  font-weight: 500;
}

.validation-summary-content {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: #b45309;
}

/* Enhanced Validation Step Styles */
.validation-step-info {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
}

.validation-step-info h4 {
  font-weight: 500;
  color: #1e40af;
  margin-bottom: 0.5rem;
}

.validation-step-info ul {
  font-size: 0.8125rem;
  color: #1e40af;
  line-height: 1.5;
}

/* Required field indicators */
.field-option-required {
  font-weight: 600;
  color: #dc2626;
}

.field-description {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
  line-height: 1.2;
}

/* Optional field indicators */
.optional-field-placeholder {
  color: #9ca3af;
  font-style: italic;
}

.required-field-header {
  font-weight: 600;
  color: #dc2626;
}

.optional-field-header {
  color: #6b7280;
}

/* Error cell styling */
.error-cell {
  background-color: rgba(254, 226, 226, 0.6) !important;
  padding: 2px 4px;
  border-radius: 3px;
  display: inline-block;
  width: 100%;
}

/* Toast notification overrides for validation */
.toast-validation-success {
  background-color: #dcfce7;
  border-color: #16a34a;
}

.toast-validation-error {
  background-color: #fef2f2;
  border-color: #ef4444;
}

/* Responsive styles for import warning */
@media (max-width: 768px) {
  .import-warning-notice {
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
  }

  .import-warning-title {
    font-size: 0.875rem;
  }

  .import-warning-list li {
    font-size: 0.75rem;
  }

  .import-warning-content {
    margin-left: 1.5rem;
  }
}

@media (max-width: 480px) {
  .import-warning-notice {
    padding: 0.75rem;
  }

  .import-warning-header {
    margin-bottom: 0.5rem;
  }

  .import-warning-content {
    margin-left: 1.25rem;
  }

  .import-warning-list li {
    font-size: 0.6875rem;
    margin-bottom: 0.375rem;
  }
}

/* Upload Warning Styles */
.upload-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  color: #14b8a6;
}

.upload-warning .w-5 {
  width: 1.25rem;
  height: 1.25rem;
  color: #14b8a6;
  flex-shrink: 0;
}

.upload-warning .mr-2 {
  margin-right: 0.5rem;
}

.upload-warning p {
  margin: 0;
  line-height: 1.4;
  font-weight: 500;
}

/* Responsive styles for upload warning */
@media (max-width: 768px) {
  .upload-warning {
    padding: 0.625rem;
    margin-top: 0.5rem;
  }

  .upload-warning p {
    font-size: 0.8125rem;
  }

  .upload-warning .w-5 {
    width: 1.125rem;
    height: 1.125rem;
  }
}

@media (max-width: 480px) {
  .upload-warning {
    padding: 0.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }

  .upload-warning .mr-2 {
    margin-right: 0;
  }

  .upload-warning p {
    font-size: 0.75rem;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .upload-area-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }

  .upload-button,
  .template-button {
    width: 100%;
    justify-content: center;
  }

  .bottom-actions {
    flex-direction: column;
    gap: 1rem;
  }

  .bottom-actions-right {
    justify-content: center;
  }

  .header-step-data-cell {
    min-width: 100px;
    max-width: 150px;
    font-size: 0.6875rem;
  }

  .header-step-radio-cell,
  .header-step-number-cell {
    padding: 0.375rem 0.5rem;
  }

  .match-step-columns-grid {
    flex-direction: column;
    gap: 0.75rem;
  }

  .match-step-column-card {
    width: 100%;
  }

  .match-step-title {
    font-size: 1rem;
  }

  .match-step-description {
    font-size: 0.8125rem;
  }

  .match-step-preview-cell {
    font-size: 0.6875rem;
    padding: 0.25rem 0.375rem;
  }

  /* Sheet Step responsive styles */
  .sheet-step-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .sheet-step-button-wrapper {
    align-self: flex-end;
  }

  .sheet-step-option {
    padding: 0.625rem;
  }
}

@media (max-width: 480px) {
  .match-step-card-content {
    padding: 0.375rem;
  }

  .match-step-column-header {
    font-size: 0.6875rem;
  }

  .match-step-action-button {
    height: 0.8125rem;
    width: 0.8125rem;
  }

  .match-step-button-icon {
    width: 0.5rem;
    height: 0.5rem;
  }

  /* Sheet Step small mobile styles */
  .sheet-step-title {
    font-size: 0.9375rem;
  }

  .sheet-step-description {
    font-size: 0.6875rem;
  }

  .sheet-step-option {
    padding: 0.5rem;
  }

  .sheet-step-label {
    font-size: 0.6875rem;
  }
}

/* Hidden input */
.hidden-input {
  display: none;
}

/* Sheet Step Styles */
.sheet-step-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
}

.sheet-step-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.sheet-step-title-section {
  flex: 1;
}

.sheet-step-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.5rem 0;
}

.sheet-step-description {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

.sheet-step-button-wrapper {
  flex-shrink: 0;
}

.sheet-step-change-button {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  transition: all 0.2s ease;
}

.sheet-step-change-button:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
}

.sheet-step-selection-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sheet-step-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--background);
}

.sheet-step-option:hover {
  border-color: var(--accent);
  background-color: var(--background);
}

.sheet-step-option-default {
  border-color: var(--border);
  background-color: var(--background);
}

.sheet-step-option-selected {
  border-color: #14b8a6;
  background-color: #f0fdfa;
  box-shadow: 0 0 0 1px #14b8a6;
}

.sheet-step-radio {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.sheet-step-label {
  font-size: 0.75rem;
  color: #111827;
  font-weight: 500;
  cursor: pointer;
  flex: 1;
}

.sheet-step-option-selected .sheet-step-label {
  color: #0d9488;
}

/* Responsive Design for Sheet Step */
@media (max-width: 768px) {
  .sheet-step-container {
    padding: 0.75rem;
    gap: 1rem;
  }

  .sheet-step-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .sheet-step-button-wrapper {
    align-self: flex-end;
  }

  .sheet-step-option {
    padding: 0.625rem 0.75rem;
  }

  .sheet-step-title {
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .sheet-step-container {
    padding: 0.5rem;
  }

  .sheet-step-title {
    font-size: 1rem;
  }

  .sheet-step-description {
    font-size: 0.8125rem;
  }

  .sheet-step-option {
    padding: 0.5rem;
  }

  .sheet-step-label {
    font-size: 0.8125rem;
  }
}/* CSS Variables for themes */
:root {
    --app-menu-bg-primary: rgb(94 94 94 / 70%);
    --app-menu-bg-secondary: rgba(255, 255, 255, 0.05);
    --app-menu-text-primary: #3d3d3d;
    --app-menu-text-secondary: rgba(255, 255, 255, 1);
    --app-menu-text-muted: rgba(255, 255, 255, 1);
    --app-menu-border: rgba(255, 255, 255, 1);
    --app-menu-border-focus: #8A6B9D;
    --app-menu-overlay: rgba(0, 0, 0, 0.8);
    --app-menu-icon-bg: rgba(255, 255, 255, 0.2);
    --app-menu-icon-border: rgba(255, 255, 255, 0.3);
    --app-menu-icon-hover-bg: rgba(138, 107, 157, 0.3);
    --app-menu-search-bg: rgba(255, 255, 255, 0.1);
    --app-menu-search-border: rgba(255, 255, 255, 0.3);
    --app-menu-search-focus-bg: rgba(255, 255, 255, 0.25);
    --app-menu-scrollbar-track: rgba(255, 255, 255, 0.085);
    --app-menu-scrollbar-thumb: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"],
.dark {
    /* Dark theme colors */
    --app-menu-bg-primary: #161623;
    --app-menu-bg-secondary: rgba(255, 255, 255, 0.05);
    --app-menu-text-primary: rgba(255, 255, 255, 0.9);
    --app-menu-text-secondary: rgba(255, 255, 255, 0.7);
    --app-menu-text-muted: rgba(255, 255, 255, 0.6);
    --app-menu-border: rgba(255, 255, 255, 1);
    --app-menu-border-focus: #2d2562;
    --app-menu-overlay: rgba(0, 0, 0, 0.8);
    --app-menu-icon-bg: rgba(255, 255, 255, 0.1);
    --app-menu-icon-border: rgba(255, 255, 255, 0.2);
    --app-menu-icon-hover-bg: rgba(138, 107, 157, 0.3);
    --app-menu-icon-hover-bg: rgba(38, 26, 114, 0.3);
    --app-menu-search-border: rgba(255, 255, 255, 0.2);
    --app-menu-search-focus-bg: rgba(255, 255, 255, 0.15);
    --app-menu-scrollbar-track: rgba(255, 255, 255, 0.1);
    --app-menu-scrollbar-thumb: rgba(255, 255, 255, 0.3);
}

.app-menu-sheet {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    height: 100vh;
    width: 85vw;
    max-width: 400px;
    border: none;
    background: transparent !important;
    padding: 0;
    display: flex;
    justify-content: center;
}

.sheet-no-close-button {
    & button[aria-label="Close"] {
        display: none !important;
    }

    /* Hoặc target theo vị trí */
    &>button:first-child {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .app-menu-sheet {
        width: 380px;
    }
}

.app-menu-container {
    margin: 0.15rem;
    position: relative;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: linear-gradient(-90deg, #000000 0%, #1a1a1a 25%, #2d2d2d 50%, #404040 75%, #595959 100%);
    backdrop-filter: blur(10px);
}

@property --a {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false
}

.app-menu-backdrop {
    margin-left: 0.25rem;
    background: none !important;
    border: none;
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
}

@keyframes a {
    to {
        --a: 1turn
    }
}

@keyframes neonPulse {
    0% {
        opacity: 0.3;
        transform: scale(1) rotate(0deg);
        filter: brightness(1) blur(0px);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.02) rotate(180deg);
        filter: brightness(1.2) blur(1px);
    }

    100% {
        opacity: 0.4;
        transform: scale(1.01) rotate(360deg);
        filter: brightness(1.1) blur(0.5px);
    }
}

@keyframes neonShimmer {
    0% {
        transform: translateX(-120%) translateY(-120%) rotate(0deg);
        opacity: 0;
        filter: brightness(1) blur(2px);
    }

    50% {
        opacity: 0.4;
        filter: brightness(1.5) blur(0px);
    }

    100% {
        transform: translateX(120%) translateY(120%) rotate(180deg);
        opacity: 0;
        filter: brightness(1) blur(2px);
    }
}

.app-menu-container {
    position: relative;
    background:
        color-mix(in oklab, #ffffff 0%, transparent);
    overflow: hidden;
    display: flex;
    backdrop-filter: blur(11px);
    flex-direction: column;
    -webkit-backdrop-filter: blur(11px);
    border-radius: 12px !important;
    box-shadow: -1px 11px 13px 7px rgb(99 99 99 / 21%), 0 0 20px rgb(137 137 137 / 10%);
    filter: url(#lensFilter) saturate(120%) brightness(1.15);
}

.app-menu-container::before,
.app-menu-container::after {
    pointer-events: none;
}

@keyframes move-up6 {
    to {
        transform: translateY(-30px);
    }
}

@keyframes sparkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-20px) rotate(120deg);
    }

    66% {
        transform: translateY(-10px) rotate(240deg);
    }
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.app-menu-header {
    position: relative;
    z-index: 10;
    padding: 0.75rem;
    border-bottom: none;
    background: var(--app-menu-bg-secondary);
    backdrop-filter: blur(3px);
}

.app-menu-search {
    width: 100%;
    padding: 0.45rem 0.75rem;
    background: var(--app-menu-search-bg);
    border: 1px solid rgb(52 52 52 / 30%);
    border-radius: 25px;
    color: var(--app-menu-text-primary);
    font-size: 0.8rem;
    outline: none;
    transition: all 0.3s ease;
}

.app-menu-search::-moz-placeholder {
    color: var(--app-menu-text-muted);
}

.app-menu-search::placeholder {
    color: var(--app-menu-text-muted);
}

.app-menu-search:focus {
    background: var(--app-menu-search-focus-bg);
    box-shadow: 0 0 0 2px rgba(216, 180, 230, 0.3);
}

.app-menu-content {
    position: relative;
    z-index: 10;
    height: calc(100vh - 70px);
    overflow-y: auto;
    padding: 0.75rem;
    backdrop-filter: blur(2px);
}

.app-menu-content::-webkit-scrollbar {
    width: 6px;
}

.app-menu-content::-webkit-scrollbar-track {
    background: var(--app-menu-scrollbar-track);
    border-radius: 3px;
}

.app-menu-content::-webkit-scrollbar-thumb {
    background: var(--app-menu-scrollbar-thumb);
    border-radius: 3px;
}

.app-menu-content::-webkit-scrollbar-thumb:hover {
    background: var(--app-menu-scrollbar-thumb);
    opacity: 0.8;
}

.app-menu-category {
    margin-bottom: 1rem;
}

.app-menu-category-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--app-menu-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.app-menu-category-icon {
    width: 2rem;
    height: 2rem;
    color: var(--app-menu-text-primary);
    opacity: 0.8;
}

.app-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.app-menu-item-wrapper {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    background: var(--app-menu-item-bg);
    border-radius: 8px;
    border: 1px solid var(--app-menu-item-border);
}
.app-menu-item-glass-wrapper {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 80px;
}

.menu-btn-glass {
    padding: 8px;
}

.app-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    width: 100%;
    padding: 0.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
}

.app-menu-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--app-menu-item-hover-bg), transparent);
    transition: left 0.5s ease;
}

.app-menu-item:hover::before {
    left: 100%;
}

.app-menu-item:hover {
    transform: translateY(-2px);
}

.app-menu-item:active {
    transform: translateY(0);
}

.app-menu-icon-container {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}


.app-menu-icon {
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 100;
    border-radius: 4px;
    backdrop-filter: blur(10px);
    box-shadow: 0px 4px 4px 0px #0000000D;
    background-color: #6b6b6b;
}

.app-menu-icon-header {
    width: 1.7rem;
    height: 1.7rem;
    position: relative;
    z-index: 100;
    border-radius: 4px;
}

.app-menu-item-name {
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
    font-weight: 400;
    color: var(--app-menu-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    white-space: nowrap;
    z-index: 2;
}


.app-menu-empty {
    text-align: center;
    padding: 2rem 0;
}

.app-menu-empty-text {
    font-size: 0.875rem;
    color: var(--app-menu-text-muted);
}

/* Close button */
.app-menu-close {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.app-menu-close-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Theme toggle button */
.app-menu-theme-toggle {
    position: absolute;
    top: 1rem;
    right: 4rem;
    z-index: 20;
    background: var(--app-menu-icon-bg);
    border: 1px solid var(--app-menu-icon-border);
    border-radius: 8px;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.app-menu-theme-toggle:hover {
    background: var(--app-menu-icon-hover-bg);
    border-color: var(--app-menu-border-focus);
    transform: rotate(180deg);
}

.app-menu-theme-icon {
    width: 1rem;
    height: 1rem;
    color: var(--app-menu-text-secondary);
    transition: all 0.3s ease;
    background: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .app-menu-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .app-menu-item {
        padding: 0.5rem;
    }

    .app-menu-icon-container {
        width: 2rem;
        height: 2rem;
    }

    .app-menu-icon {
        width: 2rem;
        height: 2rem;
    }

    .app-menu-item-name {
        font-size: 0.5rem;
        max-width: 50px;
    }
}

@property --a {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false
}

/* Scope svg rule to only app-menu */
.app-menu-sheet svg[aria-hidden='true'] {
    position: fixed
}

.app-menu-icon-wrapper {
    transition: transform 0.3s ease;
    will-change: transform;
}

.app-menu-icon-wrapper:hover {
    transform: scale(1.1);
    transform-origin: center;
    z-index: 10;
    position: relative;
}

.app-menu-icon-wrapper:hover .app-menu-icon {
    box-sizing: border-box;
    border: solid var(--b) #0000;
    border-radius: 4px;
    background:
        repeating-conic-gradient(from var(--a, 0deg),
            var(--l, #0000 0% 70%, #ffffff)) border-box;
    filter: var(--f, url(#glow-0));
    animation: borderRotate 1s linear infinite;
    padding: 1.5px;
}

@keyframes borderRotate {
    to {
        --a: 1turn
    }
}/* styles/calendar.css */

/* CALENDAR WRAPPER */
.calendar-wrapper {
  background-color: var(--background);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

/* CALENDAR BODY - Contains calendar view and event sheet */
.calendar.calendar-event-content {
  display: flex;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  min-height: 20px;
}

.calendar-event-stripe {
  width: 5px;
  flex-shrink: 0;
  border-radius: 4px 0 0 4px;
}

.MtAE4 {
  width: 5px;
  min-height: 100%;
  max-height: 100%;
  border-radius: 2px 0 0 2px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.calendar-event-body {
  flex: 1;
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0 4px 4px 0;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  height: 100%;
}

.calendar-event-display {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.2;
  flex: 1;
  color: var(--foreground);
  font-size: 0.75rem;
}

/* CALENDAR BODY - Contains calendar view and event sheet */
.calendar-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
}

/* CALENDAR HEADER */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background-color: var(--background);
  border: none;
  border-bottom: 1px solid var(--border);
}

.calendar-navigation {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.calendar-nav-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calendar-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
}

.calendar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* CALENDAR GRID */
.calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  flex-shrink: 0;
  background-color: var(--background);
  position: sticky;
  top: 0;
  z-index: 10;
}

.calendar-weekday {
  padding: 0.5rem;
  text-align: center;
  font-weight: 500;
  color: var(--foreground);
  border-right: 1px solid var(--border);
}

.calendar-weekday:last-child {
  border-right: none;
}

.calendar-weekday-text {
  font-size: 0.875rem;
}

.calendar-grid-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.calendar-grid-body-scrollable {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scroll-behavior: smooth;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-direction: column;
}

/* SCROLLBAR STYLING */
.calendar-grid-body-scrollable::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}

.calendar-grid-body-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.calendar-grid-body-scrollable::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4);
  border-radius: 3px;
  border: 1px solid transparent;
  background-clip: content-box;
}

.calendar-grid-body-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.6);
  background-clip: content-box;
}

/* Firefox scrollbar */
.calendar-grid-body-scrollable {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

.calendar-week-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  flex: 1;
  min-height: 0;
}

.calendar-week-row:last-child {
  border-bottom: none;
}

/* CALENDAR DAY CELL */
.calendar-day-cell {
  border-right: 1px solid var(--border);
  padding: 0.25rem;
  padding-left: 0;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
  min-height: 100px;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.calendar-day-cell:last-child {
  border-right: none;
}

.calendar-day-cell:hover {
  background-color: var(--accent);
}

.calendar-day-cell.today {
  background-color: var(--background);
}

.calendar-day-cell.selected {
  border: 1px solid rgb(59, 130, 246);
  background-color: var(--background);
}

.calendar-day-cell.other-month {
  background-color: var(--secondary);
  color: var(--foreground);
}

/* DRAG & DROP STYLES */
.calendar-day-cell.drag-over {
  background-color: var(--accent) !important;
  border: 2px dashed rgb(59, 130, 246);
  animation: dragOverPulse 1s ease-in-out infinite alternate;
}

@keyframes dragOverPulse {
  0% {
    background-color: rgb(219, 234, 254);
  }

  100% {
    background-color: rgb(191, 219, 254);
  }
}

.calendar-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
  padding-left: 0.25rem;
}

.calendar-day-number {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}

.calendar-day-number.today {
  background-color: rgb(37, 99, 235);
  color: white;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.calendar-day-number.other-month {
  color: rgb(156, 163, 175);
}

.calendar-day-more-button {
  height: 1.5rem;
  width: 1.5rem;
  padding: 0;
}

/* CALENDAR EVENTS */
.calendar-events-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.calendar-event {
  font-size: 0.75rem;
  padding: 0;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 20px;
  max-height: 24px;
  line-height: 1.2;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  flex-shrink: 0;
}

.calendar-event:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.calendar-event.selected {
  border: 1px solid;
  z-index: 11;
}

/* DRAG & DROP EVENT STYLES */
.calendar-event.dragging {
  opacity: 0.5;
  z-index: 1000;
}

.calendar-event[draggable="true"] {
  cursor: grab;
}

.calendar-event[draggable="true"]:active {
  cursor: grabbing;
}

.calendar-event-content {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.calendar-event-display {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.2;
  flex: 1;
  color: var(--foreground);
  font-size: 0.7rem;
  min-width: 0;
  box-sizing: border-box;
}

/* Legacy styles for backward compatibility */
.calendar-event-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  line-height: 1.3;
  flex: 1;
}

.calendar-event-time {
  font-size: 0.75rem;
  opacity: 0.9;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.calendar-more-events {
  font-size: 0.4rem;
  color: rgb(107, 114, 128);
}

/* Microsoft Calendar style +X button */
.calendar-more-events-button {
  background-color: rgba(0, 0, 0, 0.05);
  border: none;
  color: #333;
  font-size: 0.75rem;
  /* size-xs, matching event font size */
  font-weight: 400;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 2px;
  width: 100%;
  text-align: center;
  /* center text */
  line-height: 1.2;
  transition: background-color 0.15s ease;
  min-height: 20px;
  /* match event item height */
  max-height: 24px;
  /* match event item height */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* EVENT COLORS - Not needed anymore with new design */

/* CALENDAR FILTER STYLING */
.calendar-filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-in-out;
}

.calendar-filter-item:hover {
  background-color: rgb(243, 244, 246);
}

.calendar-color-indicator {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.125rem;
  flex-shrink: 0;
}

.calendar-filter-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: 0.125rem;
  border: 1px solid var(--border);
  accent-color: rgb(59, 130, 246);
}

.calendar-footer {
  height: 0;
}

/* EVENT SIDEBAR STYLES */
.event-sidebar {
  width: 350px;
  background-color: var(--background);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-left: 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.event-sidebar-content {
  padding: 0.75rem;
  flex: 1;
  overflow-y: auto;
}

.event-sidebar-item {
  border: 1px solid rgb(229, 231, 235);
  border-radius: 0.5rem;
  cursor: pointer;
}

.event-sidebar-item:hover {
  background-color: var(--border);
  border-color: rgb(209, 213, 219);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* EVENT SIDEBAR COLLAPSED STATE */
.event-sidebar-collapsed {
  width: 40px;
  background-color: var(--background);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-shrink: 0;
  border: 1px solid var(--border);
  margin-left: 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  align-items: center;
  padding: 0.5rem 0;
}

.event-sidebar-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.event-sidebar-toggle-button:hover {
  background-color: rgb(243, 244, 246);
}

/* EVENT SHEET TOGGLE BUTTON (when closed) */
.event-sheet-toggle-container {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

.event-sheet-toggle-button {
  background: #2563eb;
  color: var(--foreground);
  border: none;
  border-radius: 20px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transition: all 0.2s ease;
}

.event-sheet-toggle-button:hover {
  background: #1d4ed8;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.calendar-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* DAY VIEW STYLES */
.day-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--background);
}

.day-view-header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  background-color: var(--background);
  flex-shrink: 0;
  border-radius: 8px 8px 0 0;
}

.day-view-grid {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  border-radius: 0 0 8px 8px;
}

.day-view-time-column {
  display: flex;
  flex-direction: column;
  min-height: calc(24 * 60px);
  /* 24 hours * 60px each */
}

.day-view-time-slot {
  display: flex;
  /* Remove fixed min-height to allow dynamic sizing */
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease-in-out;
  cursor: pointer;
}

.day-view-time-slot:hover {
  background-color: var(--background);
}

.day-view-time-slot:hover .day-view-time-label {
  background-color: var(--background);
}

.day-view-time-slot:last-child {
  border-bottom: none;
}

.day-view-time-label {
  font-size: 0.75rem;
  color: var(--foreground);
  background-color: var(--background);
  border-right: 1px solid var(--border);
  padding: 0.5rem;
  text-align: center;
  width: 4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.day-view-events-area {
  flex: 1;
  padding: 0.25rem 0.5rem;
  position: relative;
  overflow: visible;
  /* Allow content to be visible */
}

/* Current time indicator for day view */
.day-view-current-time {
  position: absolute;
  left: 4rem;
  right: 0;
  height: 2px;
  background-color: rgb(239, 68, 68);
  z-index: 100;
  pointer-events: none;
}

.day-view-current-time::before {
  content: '';
  position: absolute;
  left: -6px;
  top: -3px;
  width: 8px;
  height: 8px;
  background-color: rgb(239, 68, 68);
  border-radius: 50%;
}

/* Add subtle animation for current time */
.day-view-current-time {
  animation: currentTimePulse 2s ease-in-out infinite;
}

@keyframes currentTimePulse {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

/* Day view drag & drop visual effects */
.day-view-time-slot.drag-over {
  background-color: rgb(219, 234, 254) !important;
  border: 2px dashed rgb(59, 130, 246) !important;
  animation: dragOverPulse 1s ease-in-out infinite alternate;
  position: relative;
  z-index: 10;
}

.day-view-time-slot.drag-over::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(59, 130, 246, 0.1);
  pointer-events: none;
}

.day-view-time-slot.drag-over .day-view-drop-zone {
  background-color: rgba(59, 130, 246, 0.15);
  border: 2px dashed rgb(59, 130, 246);
  border-radius: 4px;
  animation: dragOverPulse 1s ease-in-out infinite alternate;
}

.day-view-drop-zone {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  transition: all 0.15s ease-in-out;
}

.day-view-time-slot[data-drag-over="true"] .day-view-drop-zone {
  background-color: rgba(59, 130, 246, 0.1);
  border: 2px dashed rgb(59, 130, 246);
  border-radius: 4px;
}

.day-view-event {
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  width: 100%;
  margin-bottom: 2px;
  position: relative;
  z-index: 1;
}

.day-view-event:hover {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  z-index: 10;
}

.day-view-event.dragging {
  opacity: 0.5;
  transform: rotate(2deg) scale(0.95);
  box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.25);
  z-index: 1000;
}

/* WEEK VIEW STYLES */
.week-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--background);
}

.week-view-header {
  display: grid;
  grid-template-columns: 4rem repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  background-color: var(--background);
  flex-shrink: 0;
  border-radius: 8px 8px 0 0;
  margin-right: 11px;
}

.week-time-header {
  padding: 0.375rem;
  border-right: 1px solid var(--border);
  background-color: var(--background);
}

.week-day-header {
  padding: 0.375rem;
  text-align: center;
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: background-color 0.15s ease-in-out;
}

.week-day-header:hover {
  background-color: var(--accent);
}

.week-day-header.selected {
  background-color: var(--accent);
}

.week-view-grid {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  border-radius: 0 0 8px 8px;
}

.week-time-row {
  display: grid;
  grid-template-columns: 4rem repeat(7, 1fr);
  min-height: 60px;
  border-bottom: 1px solid var(--border);
}

.week-time-label {
  font-size: 0.75rem;
  color: rgb(107, 114, 128);
  background-color: var(--background);
  border-right: 1px solid var(--border);
  padding: 0.5rem;
  text-align: center;
}

.week-day-cell {
  border-right: 1px solid var(--border);
  padding: 0.25rem;
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.week-day-cell:hover {
  background-color: var(--accent);
}

/* Week view drag & drop */
.week-day-cell.drag-over {
  background-color: rgb(219, 234, 254) !important;
  border: 2px dashed rgb(59, 130, 246) !important;
  animation: dragOverPulse 1s ease-in-out infinite alternate;
  position: relative;
  z-index: 10;
}

.week-day-cell.drag-over::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(59, 130, 246, 0.1);
  pointer-events: none;
}

.week-event {
  font-size: 0.75rem;
  cursor: pointer;
  transition: box-shadow 0.15s ease-in-out;
}

.week-event:hover {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
  z-index: 10;
}

/* VIEW MODE TABS */
.view-mode-tabs {
  display: flex;
  align-items: center;
}

.view-mode-tabs [role="tablist"] {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  padding: 0.125rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  height: 36px;
}

.view-mode-tabs [role="tab"] {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.25rem;
  transition: all 0.15s ease-in-out;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.view-mode-tabs [role="tab"][data-state="active"] {
  background-color: var(--background);
  color: rgb(17 24 39);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.1);
  border: 1px solid var(--border);
}

.view-mode-tabs [role="tab"][data-state="inactive"] {
  color: var(--muted-foreground);
  border: 1px solid transparent;
}

.view-mode-tabs [role="tab"]:hover:not([data-state="active"]) {
  color: var(--foreground);
  background-color: var(--accent);
}

/* Responsive adjustments for view mode tabs */
@media (max-width: 640px) {
  .view-mode-tabs [role="tab"] {
    padding: 0.375rem 0.5rem;
    gap: 0.25rem;
  }

  .view-mode-tabs [role="tablist"] {
    height: 32px;
  }

  .view-mode-tabs [role="tab"] {
    height: 24px;
  }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .calendar-header {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Mobile header with selected date info */
  .calendar-header .flex.items-center.gap-2.flex-1 {
    width: 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
  }

  .calendar-header .flex.items-center.gap-2.flex-1 h3 {
    font-size: 0.875rem;
    text-align: center;
  }

  .calendar-navigation {
    width: 100%;
    justify-content: space-between;
  }

  .calendar-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .calendar-weekday {
    padding: 0.25rem;
    font-size: 0.75rem;
  }

  .calendar-day-cell {
    padding: 0.25rem;
    min-height: 80px;
  }

  .calendar-day-number {
    font-size: 0.7rem;
  }

  .calendar-day-number.today {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
  }

  .calendar-events-container {
    gap: 0.0625rem;
    overflow: hidden;
    min-height: 0;
  }

  .calendar-event {
    min-height: 18px;
    max-height: 20px;
    flex-shrink: 0;
  }

  .calendar-event.selected {
    border-width: 1px;
    margin: -0.5px;
  }

  .calendar-event-stripe {
    width: 3px;
    border-radius: 1.5px 0 0 1.5px;
  }

  .MtAE4 {
    width: 3px;
  }

  .calendar-event-body {
    padding: 0.125rem 0.25rem;
    min-width: 0;
    overflow: hidden;
  }

  .calendar-event-display {
    font-size: 0.625rem;
    line-height: 1.1;
    min-width: 0;
  }

  .calendar-event-title {
    font-size: 0.625rem;
  }

  .calendar-event-time {
    font-size: 0.5rem;
  }

  .calendar-footer {
    height: 0;
  }

  .day-view-time-label {
    width: 3rem;
    font-size: 0.625rem;
    padding: 0.25rem;
  }

  .day-view-events-area {
    padding: 0.125rem 0.25rem;
  }

  .day-view-event {
    margin-bottom: 1px;
  }

  .day-view-header {
    padding: 0.375rem 0.75rem;
  }

  .week-view-header {
    grid-template-columns: 3rem repeat(7, 1fr);
  }

  .week-time-row {
    grid-template-columns: 3rem repeat(7, 1fr);
  }

  .week-time-label {
    font-size: 0.625rem;
  }

  /* Mobile sidebar adjustments */
  .calendar-body {
    flex-direction: column;
  }

  .event-sidebar {
    width: 100%;
    height: 300px;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  }

  .calendar-main-content {
    height: calc(100vh - 300px);
  }
}

/* ENSURE PROPER HEIGHT */
.calendar-wrapper.flex-1 {
  height: 100%;
  min-height: 500px;
}.wrapper-stats {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;
}
.dark .react-grid-item > .react-resizable-handle::after {
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
}

@media (min-width: 640px) {
  .wrapper-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .wrapper-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.wrapper-leave-requests {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 640px) {
  .wrapper-leave-requests {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .wrapper-leave-requests {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.wrapper-dashboard-personal {
  display: grid;
  grid-template-columns: 22rem 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .wrapper-dashboard-personal {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .wrapper-dashboard-personal {
    grid-template-columns: 22rem 1fr;
  }
}

/* Warning Type */
.dialog-confirm-warning {
  background-color: #fff3cd;
  border-left-color: #ffc107;
}

.dialog-confirm-warning .notification-text {
  color: #856404;
}

.dialog-confirm-warning .description-text {
  color: #856404;
}

.btn-confirm-warning {
  background-color: #ffc107 !important;
  color: #856404 !important;
}

.btn-confirm-warning:hover {
  opacity: 0.8;
}

/* Success Type */
.dialog-confirm-success {
  background-color: #d4edda;
  border-left-color: #28a745;
}

.dialog-confirm-success .notification-text {
  color: #155724;
}

.dialog-confirm-success .description-text {
  color: #28a745;
}

.btn-confirm-success {
  background-color: #155724 !important;
  color: #ffffff !important;
}

.btn-confirm-success:hover {
  opacity: 0.8;
}

/* Error Type */
.dialog-confirm-error {
  background-color: #f8d7da;
  border-left-color: #dc3545;
}

.dialog-confirm-error .notification-text {
  color: #721c24;
}

.dialog-confirm-error .description-text {
  color: #dc3545;
}

.btn-confirm-error {
  background-color: #dc3545 !important;
  color: #ffffff !important;
}

.btn-confirm-error:hover {
  opacity: 0.8;
}

/* Dark Mode - Màu tối hơn để không bị chói */
.dark .dialog-confirm-warning {
  background-color: #2f270d;
  border-left-color: #997a00;
}

.dark .dialog-confirm-warning .notification-text {
  color: #d4af37;
}

.dark .dialog-confirm-warning .description-text {
  color: #d4af37;
}

.dark .btn-confirm-warning {
  background-color: #5f4c01 !important;
  color: #1a1a1a !important;
}

.dark .dialog-confirm-success {
  background-color: #0e2011;
  border-left-color: #1e6b30;
}

.dark .dialog-confirm-success .notification-text {
  color: #4caf50;
}

.dark .dialog-confirm-success .description-text {
  color: #66bb6a;
}

.dark .btn-confirm-success {
  background-color: #1e6b30 !important;
  color: #e8f5e9 !important;
}

.dark .dialog-confirm-error {
  background-color: #1c0d10;
  border-left-color: #a02030;
}

.dark .dialog-confirm-error .notification-text {
  color: #ef5350;
}

.dark .dialog-confirm-error .description-text {
  color: #ef5350;
}

.dark .btn-confirm-error {
  background-color: #a02030 !important;
  color: #ffebee !important;
}
/* Delete Type - Màu cam/đỏ cho delete action */
.dialog-confirm-delete {
  background-color: #ffe9d9;
  border-left-color: #fa7040;
}

.dialog-confirm-delete .notification-text {
  color: #771604;
}

.dialog-confirm-delete .description-text {
  color: #bc4c2f;
}

.btn-confirm-delete {
  background-color: #771604 !important;
  color: #ffffff !important;
}

.btn-confirm-delete:hover {
  opacity: 0.8;
}

/* Dark Mode - Màu tối hơn để không bị chói */
.dark .dialog-confirm-delete {
  background-color: #2d1810;
  border-left-color: #b8482f;
}

.dark .dialog-confirm-delete .notification-text {
  color: #ff9770;
}

.dark .dialog-confirm-delete .description-text {
  color: #ff9770;
}

.dark .btn-confirm-delete {
  background-color: #8b2810 !important;
  color: #ffe9d9 !important;
}.icons-dialog-content .ring-offset-background {
    transition: transform 0.3s ease;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.icons-dialog-content .ring-offset-background:hover {
    transform: rotate(180deg);
}

.icons-dialog-content .ring-offset-background svg {
   width: 24px !important;
   height: 24px !important;
}


.icon-hover {
    width: 50px;
    height: 50px;
    transition: all 0.3s ease;
}

.icon-hover:hover:not(.bg-gray-200) {
    background-color: #e5e7eb;
}

.icon-hover:hover svg,
.icon-hover:hover span,
.icon-hover:hover img,
.icon-hover:hover div > * {
    transform: scale(1.15);
}

.icon-hover svg,
.icon-hover span,
.icon-hover img,
.icon-hover div > * {
    transition: transform 0.3s ease;
}.icons-dialog-content .ring-offset-background {
    transition: transform 0.3s ease;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.icons-dialog-content .ring-offset-background:hover {
    transform: rotate(180deg);
}

.icons-dialog-content .ring-offset-background svg {
   width: 24px !important;
   height: 24px !important;
}


.icon-hover {
    width: 50px;
    height: 50px;
    transition: all 0.3s ease;
}

.icon-hover:hover:not(.bg-gray-200) {
    background-color: #e5e7eb;
}

.icon-hover:hover svg,
.icon-hover:hover span,
.icon-hover:hover img,
.icon-hover:hover div > * {
    transform: scale(1.15);
}

.icon-hover svg,
.icon-hover span,
.icon-hover img,
.icon-hover div > * {
    transition: transform 0.3s ease;
}
/* Rule Types Card Hover Effects */
.rule-type-card {
    transition: all 0.25s ease-in-out;
}

.rule-type-card:hover,
.rule-type-card.active {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
    background: linear-gradient(to bottom, #ffffff, #f9fafb);
}

.rule-type-card:hover .rule-type-card-header,
.rule-type-card.active .rule-type-card-header {
    background: linear-gradient(to right, #dbeafe, #bfdbfe) !important;
}

.rule-type-card-header {
    transition: background 0.25s ease-in-out;
}

.rule-type-card-icon {
    transition: all 0.25s ease-in-out;
}

.rule-type-card-title {
    transition: color 0.25s ease-in-out;
}
/* ImageViewer CSS */

/* Modal Content - Override Dialog default styles */
.image-viewer-modal {
  max-width: 95vw !important;
  max-height: 95vh !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Main content area with navigation */
.image-viewer-main-content {
  display: flex;
  align-items: center;
  flex: 1;
  height: 400px;
  width: 400px;
  padding: 1.5rem;
}

.image-viewer-image {
  max-width: 100%;
  max-height: 80vh;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0.5rem;
}

/* Thumbnail Navigation */
.image-viewer-thumbnails {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  background-color: hsl(var(--card));
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
}

.image-viewer-thumbnail {
  width: 3rem;
  height: 3rem;
  border-radius: 0.25rem;
  border: 2px solid;
  overflow: hidden;
  transition: all 0.2s;
  background: none;
  cursor: pointer;
  padding: 0;
}

.image-viewer-thumbnail-active {
  border-color: hsl(var(--primary));
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.image-viewer-thumbnail-inactive {
  border-color: hsl(var(--border));
  opacity: 0.7;
}

.image-viewer-thumbnail-inactive:hover {
  opacity: 1;
  border-color: hsl(var(--muted-foreground));
}

.image-viewer-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Trigger Styles */
.image-viewer-trigger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.image-viewer-trigger-multiple {
  position: relative;
}

.image-viewer-stack-layer {
  position: absolute;
  border: 1px solid hsl(var(--border));
  border-radius: 0.25rem;
}

.image-viewer-stack-layer-1 {
  top: 0.25rem;
  left: 0.25rem;
  background-color: hsl(var(--border));
}

.image-viewer-stack-layer-2 {
  top: 0.125rem;
  left: 0.125rem;
  background-color: hsl(var(--muted));
}

.image-viewer-main-image {
  position: relative;
  z-index: 10;
}

.image-viewer-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.625rem;
  border-radius: 9999px;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  z-index: 20;
}
.fib,.fi{background-size:contain;background-position:50%;background-repeat:no-repeat}.fi{position:relative;display:inline-block;width:1.333333em;line-height:1em}.fi:before{content:" "}.fi.fis{width:1em}.fi-xx{background-image:url(/assets/xx-zm_JmrXl.svg)}.fi-xx.fis{background-image:url(/assets/xx-DHLZWhOc.svg)}.fi-ad{background-image:url(/assets/ad-B18i8NGa.svg)}.fi-ad.fis{background-image:url(/assets/ad-Blhdm5jl.svg)}.fi-ae{background-image:url(/assets/ae-CZRtWSox.svg)}.fi-ae.fis{background-image:url(/assets/ae-CnWpkG7H.svg)}.fi-af{background-image:url(/assets/af-C77Rf6cE.svg)}.fi-af.fis{background-image:url(/assets/af-Bc2fqp73.svg)}.fi-ag{background-image:url(/assets/ag-C8MykuG2.svg)}.fi-ag.fis{background-image:url(/assets/ag-B50eCdjH.svg)}.fi-ai{background-image:url(/assets/ai-Dmedkf4v.svg)}.fi-ai.fis{background-image:url(/assets/ai-BhrGqTjA.svg)}.fi-al{background-image:url(/assets/al-10QRkakw.svg)}.fi-al.fis{background-image:url(/assets/al-CxA7yomf.svg)}.fi-am{background-image:url(/assets/am-DMt4_dd4.svg)}.fi-am.fis{background-image:url(/assets/am-Brwuaa2u.svg)}.fi-ao{background-image:url(/assets/ao-tXuRa6vm.svg)}.fi-ao.fis{background-image:url(/assets/ao-CAGuVnyg.svg)}.fi-aq{background-image:url(/assets/aq-CF5jO-0h.svg)}.fi-aq.fis{background-image:url(/assets/aq-UDjN-zV6.svg)}.fi-ar{background-image:url(/assets/ar-Be8Ju1cG.svg)}.fi-ar.fis{background-image:url(/assets/ar-NyCpd6W6.svg)}.fi-as{background-image:url(/assets/as-Dekqy8Of.svg)}.fi-as.fis{background-image:url(/assets/as-BTEVCXG-.svg)}.fi-at{background-image:url(/assets/at-DGA_6m5E.svg)}.fi-at.fis{background-image:url(/assets/at-D-LsLSdx.svg)}.fi-au{background-image:url(/assets/au-DAHDIuPI.svg)}.fi-au.fis{background-image:url(/assets/au-kL8f0uMB.svg)}.fi-aw{background-image:url(/assets/aw-W0PWLK5p.svg)}.fi-aw.fis{background-image:url(/assets/aw-CLCX8uk5.svg)}.fi-ax{background-image:url(/assets/ax-DvLIy84U.svg)}.fi-ax.fis{background-image:url(/assets/ax-wECm_RRW.svg)}.fi-az{background-image:url(/assets/az-Bk-bYNxy.svg)}.fi-az.fis{background-image:url(/assets/az-z2IthT8Q.svg)}.fi-ba{background-image:url(/assets/ba-WdDiSMvP.svg)}.fi-ba.fis{background-image:url(/assets/ba-CiiOt6u0.svg)}.fi-bb{background-image:url(/assets/bb-DJxbaxmT.svg)}.fi-bb.fis{background-image:url(/assets/bb-DC5IaaX4.svg)}.fi-bd{background-image:url(/assets/bd-BF9t1-60.svg)}.fi-bd.fis{background-image:url(/assets/bd-DvPoLH3C.svg)}.fi-be{background-image:url(/assets/be-CLLkK3PN.svg)}.fi-be.fis{background-image:url(/assets/be-Dtq4MkQz.svg)}.fi-bf{background-image:url(/assets/bf-YclsoDuF.svg)}.fi-bf.fis{background-image:url(/assets/bf-DCbfaYlw.svg)}.fi-bg{background-image:url(/assets/bg-GUQenraa.svg)}.fi-bg.fis{background-image:url(/assets/bg-cWragUdK.svg)}.fi-bh{background-image:url(/assets/bh-BQqEGq6F.svg)}.fi-bh.fis{background-image:url(/assets/bh-DgfmyT2n.svg)}.fi-bi{background-image:url(/assets/bi-CRmKY6RQ.svg)}.fi-bi.fis{background-image:url(/assets/bi-C8Dazs_i.svg)}.fi-bj{background-image:url(/assets/bj-14PhO9bM.svg)}.fi-bj.fis{background-image:url(/assets/bj-BOF1aYv0.svg)}.fi-bl{background-image:url(/assets/bl-4CI2YcwX.svg)}.fi-bl.fis{background-image:url(/assets/bl-Ci30-2xD.svg)}.fi-bm{background-image:url(/assets/bm-BeYgB2z9.svg)}.fi-bm.fis{background-image:url(/assets/bm-DvNWWcPM.svg)}.fi-bn{background-image:url(/assets/bn-B6T3O78g.svg)}.fi-bn.fis{background-image:url(/assets/bn-CPQcA8Ol.svg)}.fi-bo{background-image:url(/assets/bo-CcUiMqkJ.svg)}.fi-bo.fis{background-image:url(/assets/bo-Dry0C6UA.svg)}.fi-bq{background-image:url(/assets/bq-BYpdxEeT.svg)}.fi-bq.fis{background-image:url(/assets/bq-SWpsjb2t.svg)}.fi-br{background-image:url(/assets/br-Cu5YU29T.svg)}.fi-br.fis{background-image:url(/assets/br-Dr5rMAMb.svg)}.fi-bs{background-image:url(/assets/bs-7Gd_oriM.svg)}.fi-bs.fis{background-image:url(/assets/bs-CcXnDJaD.svg)}.fi-bt{background-image:url(/assets/bt-BTo4qm10.svg)}.fi-bt.fis{background-image:url(/assets/bt-SxWnbWW0.svg)}.fi-bv{background-image:url(/assets/bv-wM9JLv4R.svg)}.fi-bv.fis{background-image:url(/assets/bv-Jqog7euh.svg)}.fi-bw{background-image:url(/assets/bw-n5ZaAnGL.svg)}.fi-bw.fis{background-image:url(/assets/bw-DOFTOZyN.svg)}.fi-by{background-image:url(/assets/by-C621sBpd.svg)}.fi-by.fis{background-image:url(/assets/by-u4o0VQKP.svg)}.fi-bz{background-image:url(/assets/bz-BCKHR4_q.svg)}.fi-bz.fis{background-image:url(/assets/bz-CoBdB-p8.svg)}.fi-ca{background-image:url(/assets/ca-PYUrLVUV.svg)}.fi-ca.fis{background-image:url(/assets/ca-B8J8Wc6a.svg)}.fi-cc{background-image:url(/assets/cc-BNT6Xjzk.svg)}.fi-cc.fis{background-image:url(/assets/cc-Bl3UDHUt.svg)}.fi-cd{background-image:url(/assets/cd-BGclsrP6.svg)}.fi-cd.fis{background-image:url(/assets/cd-CwCQH0-t.svg)}.fi-cf{background-image:url(/assets/cf-DRetLmp-.svg)}.fi-cf.fis{background-image:url(/assets/cf-CvgcTRoz.svg)}.fi-cg{background-image:url(/assets/cg-CwIyG6SE.svg)}.fi-cg.fis{background-image:url(/assets/cg-DxMYgdKd.svg)}.fi-ch{background-image:url(/assets/ch-sfriZoF1.svg)}.fi-ch.fis{background-image:url(/assets/ch-Do8WoVrp.svg)}.fi-ci{background-image:url(/assets/ci-C8Q8IYTn.svg)}.fi-ci.fis{background-image:url(/assets/ci-Cn5asHD7.svg)}.fi-ck{background-image:url(/assets/ck-DfXMUOTo.svg)}.fi-ck.fis{background-image:url(/assets/ck-VjQ-vT4C.svg)}.fi-cl{background-image:url(/assets/cl-BgYYb4qP.svg)}.fi-cl.fis{background-image:url(/assets/cl-B2rf9gTF.svg)}.fi-cm{background-image:url(/assets/cm-D4yjdmKT.svg)}.fi-cm.fis{background-image:url(/assets/cm-B0XEK3Gu.svg)}.fi-cn{background-image:url(/assets/cn-DifnnI3t.svg)}.fi-cn.fis{background-image:url(/assets/cn-sZmOitVP.svg)}.fi-co{background-image:url(/assets/co-DV591zMm.svg)}.fi-co.fis{background-image:url(/assets/co-BRjxMuCM.svg)}.fi-cr{background-image:url(/assets/cr-BlYVN-_Q.svg)}.fi-cr.fis{background-image:url(/assets/cr-CcuKkUIo.svg)}.fi-cu{background-image:url(/assets/cu-L6XVZNgo.svg)}.fi-cu.fis{background-image:url(/assets/cu-Bd4PmZCn.svg)}.fi-cv{background-image:url(/assets/cv-CPsfcOfk.svg)}.fi-cv.fis{background-image:url(/assets/cv-BYvkBxIi.svg)}.fi-cw{background-image:url(/assets/cw-BbrnximR.svg)}.fi-cw.fis{background-image:url(/assets/cw-DDrVSims.svg)}.fi-cx{background-image:url(/assets/cx-DpYD6n6U.svg)}.fi-cx.fis{background-image:url(/assets/cx-zaaWd3zl.svg)}.fi-cy{background-image:url(/assets/cy-bZuP8hmf.svg)}.fi-cy.fis{background-image:url(/assets/cy-DJKnEFYW.svg)}.fi-cz{background-image:url(/assets/cz-WWBC5Aeb.svg)}.fi-cz.fis{background-image:url(/assets/cz-CgTuLLXv.svg)}.fi-de{background-image:url(/assets/de-B-2o-4Z9.svg)}.fi-de.fis{background-image:url(/assets/de-D365bacb.svg)}.fi-dj{background-image:url(/assets/dj-hp_BwbmO.svg)}.fi-dj.fis{background-image:url(/assets/dj-C7tvpAUy.svg)}.fi-dk{background-image:url(/assets/dk-DmS9BCZB.svg)}.fi-dk.fis{background-image:url(/assets/dk-2cglAULc.svg)}.fi-dm{background-image:url(/assets/dm-Cbhezfe1.svg)}.fi-dm.fis{background-image:url(/assets/dm-DPPHwW2M.svg)}.fi-do{background-image:url(/assets/do-B86d445t.svg)}.fi-do.fis{background-image:url(/assets/do-DeRnbj4d.svg)}.fi-dz{background-image:url(/assets/dz-Dytc1TFu.svg)}.fi-dz.fis{background-image:url(/assets/dz-EwXBYPv9.svg)}.fi-ec{background-image:url(/assets/ec-CaVOFQ3t.svg)}.fi-ec.fis{background-image:url(/assets/ec-cwfBJlvF.svg)}.fi-ee{background-image:url(/assets/ee-DufrxGIR.svg)}.fi-ee.fis{background-image:url(/assets/ee-B0tgUOEC.svg)}.fi-eg{background-image:url(/assets/eg-YC70hswZ.svg)}.fi-eg.fis{background-image:url(/assets/eg-DwOkwyQ0.svg)}.fi-eh{background-image:url(/assets/eh-0awM4TVj.svg)}.fi-eh.fis{background-image:url(/assets/eh-CsiwG8bE.svg)}.fi-er{background-image:url(/assets/er-X83uml6t.svg)}.fi-er.fis{background-image:url(/assets/er-Cn365Y3V.svg)}.fi-es{background-image:url(/assets/es-d5m8M5h8.svg)}.fi-es.fis{background-image:url(/assets/es-BuSGTZm_.svg)}.fi-et{background-image:url(/assets/et-DwdlzOIx.svg)}.fi-et.fis{background-image:url(/assets/et-cfPInayI.svg)}.fi-fi{background-image:url(/assets/fi-DWUIkfjL.svg)}.fi-fi.fis{background-image:url(/assets/fi-Brjq_KK6.svg)}.fi-fj{background-image:url(/assets/fj-DEAVMg38.svg)}.fi-fj.fis{background-image:url(/assets/fj-u3dAPoew.svg)}.fi-fk{background-image:url(/assets/fk-nuUF_Ak3.svg)}.fi-fk.fis{background-image:url(/assets/fk-B-RvQ4Hz.svg)}.fi-fm{background-image:url(/assets/fm-B4Z83GL0.svg)}.fi-fm.fis{background-image:url(/assets/fm-DwHuWFwM.svg)}.fi-fo{background-image:url(/assets/fo-DFjwyWur.svg)}.fi-fo.fis{background-image:url(/assets/fo-ClIne8bc.svg)}.fi-fr{background-image:url(/assets/fr-DVvUyOqI.svg)}.fi-fr.fis{background-image:url(/assets/fr-C1eGzDWr.svg)}.fi-ga{background-image:url(/assets/ga-BklUhLH_.svg)}.fi-ga.fis{background-image:url(/assets/ga-CgNkrnfv.svg)}.fi-gb{background-image:url(/assets/gb-DTXiLQoe.svg)}.fi-gb.fis{background-image:url(/assets/gb-DSer7Jgn.svg)}.fi-gd{background-image:url(/assets/gd-CO-whzUe.svg)}.fi-gd.fis{background-image:url(/assets/gd-m2vU81NR.svg)}.fi-ge{background-image:url(/assets/ge-B2RiL-Ih.svg)}.fi-ge.fis{background-image:url(/assets/ge-DFOl98HB.svg)}.fi-gf{background-image:url(/assets/gf-DWl5zcw0.svg)}.fi-gf.fis{background-image:url(/assets/gf-DFQqfs-j.svg)}.fi-gg{background-image:url(/assets/gg-jdOQS2nU.svg)}.fi-gg.fis{background-image:url(/assets/gg-vhR8-Yxm.svg)}.fi-gh{background-image:url(/assets/gh-r3LP_X7q.svg)}.fi-gh.fis{background-image:url(/assets/gh-6yUjim7M.svg)}.fi-gi{background-image:url(/assets/gi-BJKE9SzW.svg)}.fi-gi.fis{background-image:url(/assets/gi-ZBwZ45zU.svg)}.fi-gl{background-image:url(/assets/gl-CHaBnMib.svg)}.fi-gl.fis{background-image:url(/assets/gl-D6qP-fnE.svg)}.fi-gm{background-image:url(/assets/gm-Bu99atwn.svg)}.fi-gm.fis{background-image:url(/assets/gm-DI7EpeCC.svg)}.fi-gn{background-image:url(/assets/gn-1dJNy9oQ.svg)}.fi-gn.fis{background-image:url(/assets/gn-kt7YA1XT.svg)}.fi-gp{background-image:url(/assets/gp-DNyt_wTA.svg)}.fi-gp.fis{background-image:url(/assets/gp-BqGRs8a4.svg)}.fi-gq{background-image:url(/assets/gq-Cag8QTk2.svg)}.fi-gq.fis{background-image:url(/assets/gq-CPnMO1hT.svg)}.fi-gr{background-image:url(/assets/gr-C5PU0p9p.svg)}.fi-gr.fis{background-image:url(/assets/gr-COThnT__.svg)}.fi-gs{background-image:url(/assets/gs-DiiNa0F5.svg)}.fi-gs.fis{background-image:url(/assets/gs-DOgYbHsY.svg)}.fi-gt{background-image:url(/assets/gt-CJo5DI-7.svg)}.fi-gt.fis{background-image:url(/assets/gt-BLpn5qMn.svg)}.fi-gu{background-image:url(/assets/gu-Di1JYREk.svg)}.fi-gu.fis{background-image:url(/assets/gu-SbvrH0uZ.svg)}.fi-gw{background-image:url(/assets/gw-D249VY33.svg)}.fi-gw.fis{background-image:url(/assets/gw-BTWe96TV.svg)}.fi-gy{background-image:url(/assets/gy-CcVYUM2E.svg)}.fi-gy.fis{background-image:url(/assets/gy-Dl6DrQIH.svg)}.fi-hk{background-image:url(/assets/hk-CUNIaSX0.svg)}.fi-hk.fis{background-image:url(/assets/hk-omO_-Nil.svg)}.fi-hm{background-image:url(/assets/hm-Dh6t_Tj3.svg)}.fi-hm.fis{background-image:url(/assets/hm-fgV6xItx.svg)}.fi-hn{background-image:url(/assets/hn-CRjyS_bm.svg)}.fi-hn.fis{background-image:url(/assets/hn-GhlpqqjC.svg)}.fi-hr{background-image:url(/assets/hr-fzLfaANM.svg)}.fi-hr.fis{background-image:url(/assets/hr-BpiVVBoV.svg)}.fi-ht{background-image:url(/assets/ht-DIMg4gti.svg)}.fi-ht.fis{background-image:url(/assets/ht-pweRl6ZP.svg)}.fi-hu{background-image:url(/assets/hu-7Q5wwIIi.svg)}.fi-hu.fis{background-image:url(/assets/hu-Bm8S5mAU.svg)}.fi-id{background-image:url(/assets/id-DiSP6Fmm.svg)}.fi-id.fis{background-image:url(/assets/id-CJiY5UnY.svg)}.fi-ie{background-image:url(/assets/ie-ChAXClx3.svg)}.fi-ie.fis{background-image:url(/assets/ie-DhxI4aJv.svg)}.fi-il{background-image:url(/assets/il-_56OEGLa.svg)}.fi-il.fis{background-image:url(/assets/il-CeFQotKl.svg)}.fi-im{background-image:url(/assets/im--VPIqfkF.svg)}.fi-im.fis{background-image:url(/assets/im-Dd9p-0-T.svg)}.fi-in{background-image:url(/assets/in-Cdwu6Bq7.svg)}.fi-in.fis{background-image:url(/assets/in-BrINBvML.svg)}.fi-io{background-image:url(/assets/io-13HOfeJD.svg)}.fi-io.fis{background-image:url(/assets/io-BImhNBcd.svg)}.fi-iq{background-image:url(/assets/iq-Dp8HDzo2.svg)}.fi-iq.fis{background-image:url(/assets/iq-CZIXYTmc.svg)}.fi-ir{background-image:url(/assets/ir-cCIgaNf6.svg)}.fi-ir.fis{background-image:url(/assets/ir-Q03Mij62.svg)}.fi-is{background-image:url(/assets/is-CZjefTNV.svg)}.fi-is.fis{background-image:url(/assets/is-Cdq2ElPF.svg)}.fi-it{background-image:url(/assets/it-Br7q0Zh6.svg)}.fi-it.fis{background-image:url(/assets/it-lvp2tGC_.svg)}.fi-je{background-image:url(/assets/je-DyWbhIiC.svg)}.fi-je.fis{background-image:url(/assets/je-vXe0Dr49.svg)}.fi-jm{background-image:url(/assets/jm-CItSr3iX.svg)}.fi-jm.fis{background-image:url(/assets/jm-CLL-w5oS.svg)}.fi-jo{background-image:url(/assets/jo-BAF1FGbm.svg)}.fi-jo.fis{background-image:url(/assets/jo-CiGTAWEd.svg)}.fi-jp{background-image:url(/assets/jp-BIMmfxpO.svg)}.fi-jp.fis{background-image:url(/assets/jp-B5RfAVGb.svg)}.fi-ke{background-image:url(/assets/ke-C8foqndp.svg)}.fi-ke.fis{background-image:url(/assets/ke-b02kYgZN.svg)}.fi-kg{background-image:url(/assets/kg-B0FsxZiL.svg)}.fi-kg.fis{background-image:url(/assets/kg-CjfitMyT.svg)}.fi-kh{background-image:url(/assets/kh-BeWfuE30.svg)}.fi-kh.fis{background-image:url(/assets/kh-BBvObpUS.svg)}.fi-ki{background-image:url(/assets/ki-p_fAQGbS.svg)}.fi-ki.fis{background-image:url(/assets/ki-fuIMkEYQ.svg)}.fi-km{background-image:url(/assets/km-B5tqtGG7.svg)}.fi-km.fis{background-image:url(/assets/km-D0jmlyBf.svg)}.fi-kn{background-image:url(/assets/kn-DVPxDkNY.svg)}.fi-kn.fis{background-image:url(/assets/kn-CHJJOZkG.svg)}.fi-kp{background-image:url(/assets/kp-CrDKzoxe.svg)}.fi-kp.fis{background-image:url(/assets/kp-BsOq20Ii.svg)}.fi-kr{background-image:url(/assets/kr-BCXH1Hao.svg)}.fi-kr.fis{background-image:url(/assets/kr-KUIaWHQD.svg)}.fi-kw{background-image:url(/assets/kw-fSBzmd30.svg)}.fi-kw.fis{background-image:url(/assets/kw-CIaYkhdM.svg)}.fi-ky{background-image:url(/assets/ky-Dpsu1myA.svg)}.fi-ky.fis{background-image:url(/assets/ky-BqaZHuhf.svg)}.fi-kz{background-image:url(/assets/kz-CwKXYZ8s.svg)}.fi-kz.fis{background-image:url(/assets/kz-Dkyx6q-p.svg)}.fi-la{background-image:url(/assets/la-CuJflhIW.svg)}.fi-la.fis{background-image:url(/assets/la-cXlqIhGg.svg)}.fi-lb{background-image:url(/assets/lb-BSjpYEoo.svg)}.fi-lb.fis{background-image:url(/assets/lb-DqFaKN7K.svg)}.fi-lc{background-image:url(/assets/lc-CNvab8Ae.svg)}.fi-lc.fis{background-image:url(/assets/lc-DoQpaup4.svg)}.fi-li{background-image:url(/assets/li-CHdhvNcr.svg)}.fi-li.fis{background-image:url(/assets/li-CMlf0YU8.svg)}.fi-lk{background-image:url(/assets/lk-DUkgV9Tq.svg)}.fi-lk.fis{background-image:url(/assets/lk-DSQoDxn_.svg)}.fi-lr{background-image:url(/assets/lr-B84vu3Ds.svg)}.fi-lr.fis{background-image:url(/assets/lr-Zj2ZOITC.svg)}.fi-ls{background-image:url(/assets/ls-5Xk3Mxq5.svg)}.fi-ls.fis{background-image:url(/assets/ls-B-MSA_Nj.svg)}.fi-lt{background-image:url(/assets/lt-DoukV-Sm.svg)}.fi-lt.fis{background-image:url(/assets/lt-CU4QmtZ-.svg)}.fi-lu{background-image:url(/assets/lu-DOI02Msy.svg)}.fi-lu.fis{background-image:url(/assets/lu-CCDqjGZj.svg)}.fi-lv{background-image:url(/assets/lv-C-KfY8Yc.svg)}.fi-lv.fis{background-image:url(/assets/lv-DjyqV19Q.svg)}.fi-ly{background-image:url(/assets/ly-BWpTK3ux.svg)}.fi-ly.fis{background-image:url(/assets/ly-B0G7qBy-.svg)}.fi-ma{background-image:url(/assets/ma-BTRNTRUj.svg)}.fi-ma.fis{background-image:url(/assets/ma-BNn_BSaU.svg)}.fi-mc{background-image:url(/assets/mc-PK078JHl.svg)}.fi-mc.fis{background-image:url(/assets/mc-JhJMKfOk.svg)}.fi-md{background-image:url(/assets/md-DRlxvNwm.svg)}.fi-md.fis{background-image:url(/assets/md-DTi94M3M.svg)}.fi-me{background-image:url(/assets/me-Cv4Gwqah.svg)}.fi-me.fis{background-image:url(/assets/me-CfGorN3b.svg)}.fi-mf{background-image:url(/assets/mf-BaAGWwAq.svg)}.fi-mf.fis{background-image:url(/assets/mf-DC-GBYih.svg)}.fi-mg{background-image:url(/assets/mg-C168LHXW.svg)}.fi-mg.fis{background-image:url(/assets/mg-DDrNyYWg.svg)}.fi-mh{background-image:url(/assets/mh-gxuIp6Wk.svg)}.fi-mh.fis{background-image:url(/assets/mh--hJdVdXy.svg)}.fi-mk{background-image:url(/assets/mk-D9SIMr-a.svg)}.fi-mk.fis{background-image:url(/assets/mk-Cx9Yf_ZD.svg)}.fi-ml{background-image:url(/assets/ml-DVf6ujpi.svg)}.fi-ml.fis{background-image:url(/assets/ml-BBMGMlrT.svg)}.fi-mm{background-image:url(/assets/mm-lwT09MQ0.svg)}.fi-mm.fis{background-image:url(/assets/mm-DB0gzm_2.svg)}.fi-mn{background-image:url(/assets/mn-CgXyw0O9.svg)}.fi-mn.fis{background-image:url(/assets/mn-CNIDYiAG.svg)}.fi-mo{background-image:url(/assets/mo-BAtCjuYA.svg)}.fi-mo.fis{background-image:url(/assets/mo-CZPe8QjC.svg)}.fi-mp{background-image:url(/assets/mp-CrOApEqW.svg)}.fi-mp.fis{background-image:url(/assets/mp-CuaQmCLf.svg)}.fi-mq{background-image:url(/assets/mq-BFnJ22KI.svg)}.fi-mq.fis{background-image:url(/assets/mq-Dt7FKNYb.svg)}.fi-mr{background-image:url(/assets/mr-D6G1wpeZ.svg)}.fi-mr.fis{background-image:url(/assets/mr-Cqt475iO.svg)}.fi-ms{background-image:url(/assets/ms-DxciGbUu.svg)}.fi-ms.fis{background-image:url(/assets/ms-B-w7hFKu.svg)}.fi-mt{background-image:url(/assets/mt-YqzKx9xl.svg)}.fi-mt.fis{background-image:url(/assets/mt-YDa8zgzO.svg)}.fi-mu{background-image:url(/assets/mu-mcq7cUFl.svg)}.fi-mu.fis{background-image:url(/assets/mu-B2mIIRce.svg)}.fi-mv{background-image:url(/assets/mv-BynAllfM.svg)}.fi-mv.fis{background-image:url(/assets/mv-BXI4x8em.svg)}.fi-mw{background-image:url(/assets/mw-C15nc1xZ.svg)}.fi-mw.fis{background-image:url(/assets/mw-DkelfrL9.svg)}.fi-mx{background-image:url(/assets/mx-Cc8Ccfe8.svg)}.fi-mx.fis{background-image:url(/assets/mx-CvCwYHGF.svg)}.fi-my{background-image:url(/assets/my-Co4JeeyE.svg)}.fi-my.fis{background-image:url(/assets/my-BR3vHt6_.svg)}.fi-mz{background-image:url(/assets/mz-Drlr_USV.svg)}.fi-mz.fis{background-image:url(/assets/mz-Bo6u1S_s.svg)}.fi-na{background-image:url(/assets/na-D79ffb4Z.svg)}.fi-na.fis{background-image:url(/assets/na-0wFvily3.svg)}.fi-nc{background-image:url(/assets/nc-5j7wEmDR.svg)}.fi-nc.fis{background-image:url(/assets/nc-Bw50_tBz.svg)}.fi-ne{background-image:url(/assets/ne-B1jPOYkl.svg)}.fi-ne.fis{background-image:url(/assets/ne-Cium2f5G.svg)}.fi-nf{background-image:url(/assets/nf-Dl00mlk2.svg)}.fi-nf.fis{background-image:url(/assets/nf-DGrQb42O.svg)}.fi-ng{background-image:url(/assets/ng-su4NM9If.svg)}.fi-ng.fis{background-image:url(/assets/ng-CLL1nzMk.svg)}.fi-ni{background-image:url(/assets/ni-CcFCSQxm.svg)}.fi-ni.fis{background-image:url(/assets/ni-BX2WCaNt.svg)}.fi-nl{background-image:url(/assets/nl-BnOa6UiA.svg)}.fi-nl.fis{background-image:url(/assets/nl-DKN85plC.svg)}.fi-no{background-image:url(/assets/no-qf2JPO73.svg)}.fi-no.fis{background-image:url(/assets/no-67wnnm5y.svg)}.fi-np{background-image:url(/assets/np-CIuq5GKd.svg)}.fi-np.fis{background-image:url(/assets/np-B4k6qJKf.svg)}.fi-nr{background-image:url(/assets/nr-DERIdzkN.svg)}.fi-nr.fis{background-image:url(/assets/nr-SnI60Bgd.svg)}.fi-nu{background-image:url(/assets/nu-BfgWvGcd.svg)}.fi-nu.fis{background-image:url(/assets/nu-Dm-LLXct.svg)}.fi-nz{background-image:url(/assets/nz-5vODdBjz.svg)}.fi-nz.fis{background-image:url(/assets/nz-CaLnugvK.svg)}.fi-om{background-image:url(/assets/om-DcqxRdQL.svg)}.fi-om.fis{background-image:url(/assets/om-nN8zP2Bu.svg)}.fi-pa{background-image:url(/assets/pa-BLNN9G2-.svg)}.fi-pa.fis{background-image:url(/assets/pa-BzRYvRsl.svg)}.fi-pe{background-image:url(/assets/pe-BLqhuu1C.svg)}.fi-pe.fis{background-image:url(/assets/pe--eye3JWr.svg)}.fi-pf{background-image:url(/assets/pf-C8ahG68q.svg)}.fi-pf.fis{background-image:url(/assets/pf-e6q_5ubr.svg)}.fi-pg{background-image:url(/assets/pg-BAYpbp9Z.svg)}.fi-pg.fis{background-image:url(/assets/pg-nBvUkq7v.svg)}.fi-ph{background-image:url(/assets/ph-BEzTn62K.svg)}.fi-ph.fis{background-image:url(/assets/ph-B10ogxgQ.svg)}.fi-pk{background-image:url(/assets/pk-CWMEc3ad.svg)}.fi-pk.fis{background-image:url(/assets/pk-BnahYzav.svg)}.fi-pl{background-image:url(/assets/pl-o38JROoc.svg)}.fi-pl.fis{background-image:url(/assets/pl-jl6riBSr.svg)}.fi-pm{background-image:url(/assets/pm-CHiP5UmZ.svg)}.fi-pm.fis{background-image:url(/assets/pm-CatGySkp.svg)}.fi-pn{background-image:url(/assets/pn-DgxdtieE.svg)}.fi-pn.fis{background-image:url(/assets/pn-BPAlH32D.svg)}.fi-pr{background-image:url(/assets/pr-B4tMV0xm.svg)}.fi-pr.fis{background-image:url(/assets/pr-DjaQzs0K.svg)}.fi-ps{background-image:url(/assets/ps-DO8YKYeS.svg)}.fi-ps.fis{background-image:url(/assets/ps-CEUcLi5W.svg)}.fi-pt{background-image:url(/assets/pt-DZ2ADgIR.svg)}.fi-pt.fis{background-image:url(/assets/pt-BTevY6N2.svg)}.fi-pw{background-image:url(/assets/pw-CQP52WMX.svg)}.fi-pw.fis{background-image:url(/assets/pw-DOQyn2PV.svg)}.fi-py{background-image:url(/assets/py-mNzh0mZC.svg)}.fi-py.fis{background-image:url(/assets/py-BKi5dxWt.svg)}.fi-qa{background-image:url(/assets/qa-Dkmpc78M.svg)}.fi-qa.fis{background-image:url(/assets/qa-CekFoc-3.svg)}.fi-re{background-image:url(/assets/re-Bk4ipYK1.svg)}.fi-re.fis{background-image:url(/assets/re-Bg1MZWMt.svg)}.fi-ro{background-image:url(/assets/ro-CoSeqKY1.svg)}.fi-ro.fis{background-image:url(/assets/ro-C2av9jVe.svg)}.fi-rs{background-image:url(/assets/rs-BfwKwXtn.svg)}.fi-rs.fis{background-image:url(/assets/rs-CnTO3ehk.svg)}.fi-ru{background-image:url(/assets/ru-D-4tNwXt.svg)}.fi-ru.fis{background-image:url(/assets/ru-DbUtf_DX.svg)}.fi-rw{background-image:url(/assets/rw-D7nbSYKI.svg)}.fi-rw.fis{background-image:url(/assets/rw-CcIfVufE.svg)}.fi-sa{background-image:url(/assets/sa-Dh79zbT9.svg)}.fi-sa.fis{background-image:url(/assets/sa-DnlyVVKx.svg)}.fi-sb{background-image:url(/assets/sb-BDTYjcbk.svg)}.fi-sb.fis{background-image:url(/assets/sb-Dv-Gc94i.svg)}.fi-sc{background-image:url(/assets/sc-CRNsSLg9.svg)}.fi-sc.fis{background-image:url(/assets/sc-DFTNEfqs.svg)}.fi-sd{background-image:url(/assets/sd-ClziNjGr.svg)}.fi-sd.fis{background-image:url(/assets/sd-BwHx54f9.svg)}.fi-se{background-image:url(/assets/se-8C923vhy.svg)}.fi-se.fis{background-image:url(/assets/se-DHad7SFX.svg)}.fi-sg{background-image:url(/assets/sg-DGYIMG0G.svg)}.fi-sg.fis{background-image:url(/assets/sg-DisnRdSe.svg)}.fi-sh{background-image:url(/assets/sh-DNImvbrE.svg)}.fi-sh.fis{background-image:url(/assets/sh-DBww0RCW.svg)}.fi-si{background-image:url(/assets/si-BMKT-Tec.svg)}.fi-si.fis{background-image:url(/assets/si-BDW--7ta.svg)}.fi-sj{background-image:url(/assets/sj-BFFEGknm.svg)}.fi-sj.fis{background-image:url(/assets/sj-AM0BJ0qg.svg)}.fi-sk{background-image:url(/assets/sk-K9BNIYAO.svg)}.fi-sk.fis{background-image:url(/assets/sk-8lQCLAqV.svg)}.fi-sl{background-image:url(/assets/sl-DxLJY5vJ.svg)}.fi-sl.fis{background-image:url(/assets/sl-C0dI8IsG.svg)}.fi-sm{background-image:url(/assets/sm-DGBIRFB_.svg)}.fi-sm.fis{background-image:url(/assets/sm-BKrUHzrq.svg)}.fi-sn{background-image:url(/assets/sn-S8ipNF1U.svg)}.fi-sn.fis{background-image:url(/assets/sn-C4abx9Xn.svg)}.fi-so{background-image:url(/assets/so-DlzA2Fco.svg)}.fi-so.fis{background-image:url(/assets/so-BpxKZJzu.svg)}.fi-sr{background-image:url(/assets/sr-Co7OKBh3.svg)}.fi-sr.fis{background-image:url(/assets/sr-CfMKAfua.svg)}.fi-ss{background-image:url(/assets/ss-CxVEpdPD.svg)}.fi-ss.fis{background-image:url(/assets/ss-C_PPJ8V2.svg)}.fi-st{background-image:url(/assets/st-C1Nd1c3V.svg)}.fi-st.fis{background-image:url(/assets/st-AMcb9FhJ.svg)}.fi-sv{background-image:url(/assets/sv-CJIHhYwF.svg)}.fi-sv.fis{background-image:url(/assets/sv-RZ39q5hO.svg)}.fi-sx{background-image:url(/assets/sx-nDhIaDNb.svg)}.fi-sx.fis{background-image:url(/assets/sx-RKKs0ph6.svg)}.fi-sy{background-image:url(/assets/sy-DwSud114.svg)}.fi-sy.fis{background-image:url(/assets/sy-Dpn5i9ke.svg)}.fi-sz{background-image:url(/assets/sz-qxMwa2gs.svg)}.fi-sz.fis{background-image:url(/assets/sz-D39eIL5d.svg)}.fi-tc{background-image:url(/assets/tc-dtelpZmc.svg)}.fi-tc.fis{background-image:url(/assets/tc-CJHJmJj1.svg)}.fi-td{background-image:url(/assets/td-BsuVhZpT.svg)}.fi-td.fis{background-image:url(/assets/td-Ddv_29rE.svg)}.fi-tf{background-image:url(/assets/tf-Co33RhQH.svg)}.fi-tf.fis{background-image:url(/assets/tf-DSn8VxE3.svg)}.fi-tg{background-image:url(/assets/tg-CP1-sc35.svg)}.fi-tg.fis{background-image:url(/assets/tg-BpRxi4F-.svg)}.fi-th{background-image:url(/assets/th-tzq84hgd.svg)}.fi-th.fis{background-image:url(/assets/th-DK2zZyMY.svg)}.fi-tj{background-image:url(/assets/tj-b-aWfOTb.svg)}.fi-tj.fis{background-image:url(/assets/tj-BWWBVTk9.svg)}.fi-tk{background-image:url(/assets/tk-CDucsEss.svg)}.fi-tk.fis{background-image:url(/assets/tk-CZEI6mqd.svg)}.fi-tl{background-image:url(/assets/tl-wpo93AGk.svg)}.fi-tl.fis{background-image:url(/assets/tl-zghdr7_K.svg)}.fi-tm{background-image:url(/assets/tm-C_WSgUcv.svg)}.fi-tm.fis{background-image:url(/assets/tm-DGBJvQay.svg)}.fi-tn{background-image:url(/assets/tn-BcKCZULf.svg)}.fi-tn.fis{background-image:url(/assets/tn-DcO8DL80.svg)}.fi-to{background-image:url(/assets/to-D8uVsoxb.svg)}.fi-to.fis{background-image:url(/assets/to-6m55WaQo.svg)}.fi-tr{background-image:url(/assets/tr-Cd6FO9Bg.svg)}.fi-tr.fis{background-image:url(/assets/tr-Dgwi_nfe.svg)}.fi-tt{background-image:url(/assets/tt-CTnr7aY5.svg)}.fi-tt.fis{background-image:url(/assets/tt-f6m2xq_2.svg)}.fi-tv{background-image:url(/assets/tv-DDqkVT-n.svg)}.fi-tv.fis{background-image:url(/assets/tv-MqebyrVm.svg)}.fi-tw{background-image:url(/assets/tw-d-Mf-0VT.svg)}.fi-tw.fis{background-image:url(/assets/tw-BGxVDCOL.svg)}.fi-tz{background-image:url(/assets/tz-BjLtHeil.svg)}.fi-tz.fis{background-image:url(/assets/tz-BUVjlfC1.svg)}.fi-ua{background-image:url(/assets/ua-Bq0XgQqK.svg)}.fi-ua.fis{background-image:url(/assets/ua-BquxXKta.svg)}.fi-ug{background-image:url(/assets/ug-ByL2ejGl.svg)}.fi-ug.fis{background-image:url(/assets/ug-CQ8d5RQC.svg)}.fi-um{background-image:url(/assets/um-Bhke9Eic.svg)}.fi-um.fis{background-image:url(/assets/um-DreQrsBl.svg)}.fi-us{background-image:url(/assets/us-C73uVeEr.svg)}.fi-us.fis{background-image:url(/assets/us-DAM9Utrf.svg)}.fi-uy{background-image:url(/assets/uy-DD6peej-.svg)}.fi-uy.fis{background-image:url(/assets/uy-B2Qs7aGx.svg)}.fi-uz{background-image:url(/assets/uz-C2f-Cubn.svg)}.fi-uz.fis{background-image:url(/assets/uz-rmSB_IKB.svg)}.fi-va{background-image:url(/assets/va-B9-hqIE-.svg)}.fi-va.fis{background-image:url(/assets/va-s7kyhqIM.svg)}.fi-vc{background-image:url(/assets/vc-COpmFovN.svg)}.fi-vc.fis{background-image:url(/assets/vc-DaYqUZD4.svg)}.fi-ve{background-image:url(/assets/ve-BSqnIB9l.svg)}.fi-ve.fis{background-image:url(/assets/ve-L4X6NQ3q.svg)}.fi-vg{background-image:url(/assets/vg-C7xY6pic.svg)}.fi-vg.fis{background-image:url(/assets/vg-ClZ-0KpG.svg)}.fi-vi{background-image:url(/assets/vi-BC_zcciE.svg)}.fi-vi.fis{background-image:url(/assets/vi-BSdsyIxY.svg)}.fi-vn{background-image:url(/assets/vn-BEAEijd0.svg)}.fi-vn.fis{background-image:url(/assets/vn-CsUBJx2L.svg)}.fi-vu{background-image:url(/assets/vu-D6k0NQlg.svg)}.fi-vu.fis{background-image:url(/assets/vu-BIFa5Beu.svg)}.fi-wf{background-image:url(/assets/wf-DrxpOO_G.svg)}.fi-wf.fis{background-image:url(/assets/wf-BC64oop4.svg)}.fi-ws{background-image:url(/assets/ws-vzJNwdVm.svg)}.fi-ws.fis{background-image:url(/assets/ws-IVFNwTc1.svg)}.fi-ye{background-image:url(/assets/ye-BwST9gXC.svg)}.fi-ye.fis{background-image:url(/assets/ye-Ir8OtngQ.svg)}.fi-yt{background-image:url(/assets/yt-DIfEG0ex.svg)}.fi-yt.fis{background-image:url(/assets/yt-BGlbbiEn.svg)}.fi-za{background-image:url(/assets/za-Jz40JTrv.svg)}.fi-za.fis{background-image:url(/assets/za-BUKoH9qm.svg)}.fi-zm{background-image:url(/assets/zm-BmsW91ne.svg)}.fi-zm.fis{background-image:url(/assets/zm-D8B-0kdx.svg)}.fi-zw{background-image:url(/assets/zw-U0m7oJ5e.svg)}.fi-zw.fis{background-image:url(/assets/zw-CSuuaw9K.svg)}.fi-arab{background-image:url(/assets/arab-C4CYPgyC.svg)}.fi-arab.fis{background-image:url(/assets/arab-C-KgnQEz.svg)}.fi-asean{background-image:url(/assets/asean-WMtZ-US_.svg)}.fi-asean.fis{background-image:url(/assets/asean-CmuWHvfA.svg)}.fi-cefta{background-image:url(/assets/cefta-2dDBYygd.svg)}.fi-cefta.fis{background-image:url(/assets/cefta-CdOByeeI.svg)}.fi-cp{background-image:url(/assets/cp-K_ay05Q_.svg)}.fi-cp.fis{background-image:url(/assets/cp-k6oDAflT.svg)}.fi-dg{background-image:url(/assets/dg-CJPJrjiZ.svg)}.fi-dg.fis{background-image:url(/assets/dg-DqkWLbnk.svg)}.fi-eac{background-image:url(/assets/eac-CwGQsyAM.svg)}.fi-eac.fis{background-image:url(/assets/eac-h4QKADRE.svg)}.fi-es-ct{background-image:url(/assets/es-ct-CVyhLp7O.svg)}.fi-es-ct.fis{background-image:url(/assets/es-ct-DdzobtBd.svg)}.fi-es-ga{background-image:url(/assets/es-ga-D9xG2hYr.svg)}.fi-es-ga.fis{background-image:url(/assets/es-ga-DXhVZ333.svg)}.fi-es-pv{background-image:url(/assets/es-pv-CO3NM2SE.svg)}.fi-es-pv.fis{background-image:url(/assets/es-pv-DMotQiZd.svg)}.fi-eu{background-image:url(/assets/eu-Brdgz8ab.svg)}.fi-eu.fis{background-image:url(/assets/eu-BE2G-Ars.svg)}.fi-gb-eng{background-image:url(/assets/gb-eng-C8iDhGHN.svg)}.fi-gb-eng.fis{background-image:url(/assets/gb-eng-DTHmDHq3.svg)}.fi-gb-nir{background-image:url(/assets/gb-nir-D4gikpNq.svg)}.fi-gb-nir.fis{background-image:url(/assets/gb-nir-vEp1ZXy6.svg)}.fi-gb-sct{background-image:url(/assets/gb-sct-fW5q01ek.svg)}.fi-gb-sct.fis{background-image:url(/assets/gb-sct-D5L2FKKv.svg)}.fi-gb-wls{background-image:url(/assets/gb-wls-Bxz9hxvX.svg)}.fi-gb-wls.fis{background-image:url(/assets/gb-wls-CK0XlKT-.svg)}.fi-ic{background-image:url(/assets/ic-CSo4d8tH.svg)}.fi-ic.fis{background-image:url(/assets/ic-tiZZSA7Y.svg)}.fi-pc{background-image:url(/assets/pc-BJpYiA9b.svg)}.fi-pc.fis{background-image:url(/assets/pc-D9OuqgOn.svg)}.fi-sh-ac{background-image:url(/assets/sh-ac-FjwY7RYr.svg)}.fi-sh-ac.fis{background-image:url(/assets/sh-ac-D-aE2xRW.svg)}.fi-sh-hl{background-image:url(/assets/sh-hl-CqtQPzWZ.svg)}.fi-sh-hl.fis{background-image:url(/assets/sh-hl-CgxUDvtv.svg)}.fi-sh-ta{background-image:url(/assets/sh-ta-CPJublpi.svg)}.fi-sh-ta.fis{background-image:url(/assets/sh-ta-BFo5zkKU.svg)}.fi-un{background-image:url(/assets/un-Bqg4Cbbh.svg)}.fi-un.fis{background-image:url(/assets/un-DabL4p35.svg)}.fi-xk{background-image:url(/assets/xk-Bj15g7cp.svg)}.fi-xk.fis{background-image:url(/assets/xk-Cdz2uTvR.svg)}
/* components/sticky-table/styles/frozen-drag.css */

.frozen-drag-handle {
  position: absolute;
  top: 0;
  width: 6px; /* Reduced width for less intrusive drag handle */
  background: transparent;
  cursor: col-resize;
  z-index: 49;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transform: translateX(-8px); /* Center the wider handle */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%; /* Ensure full height */
}

/* Enhanced hover area for better UX like Lark Suite */
.frozen-drag-handle::before {
  content: '';
  position: absolute;
  top: 0;
  left: -4px;
  right: -4px;
  bottom: 0;
  background: transparent;
  z-index: -1;
}

/* Hover line indicator - line màu xanh khi hover */
.frozen-drag-handle::after {
  content: '';
  position: absolute;
  top: 0;
  right: -2px;
  width: 2px;
  height: 100%;
  background: #3b82f6;
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease-in-out;
  z-index: 41;
  pointer-events: none;
  border-radius: 1px;
  transform-origin: center;
  will-change: transform, opacity, left;
}

.frozen-drag-handle:hover .frozen-drag-handle-grip,
.frozen-drag-handle.dragging .frozen-drag-handle-grip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%); /* Remove scale effect */
}

/* Show hover line when hovering over handle */
.frozen-drag-handle:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Enhanced dragging state - hide the original line when dragging */
.frozen-drag-handle.dragging::after {
  opacity: 0 !important;
  visibility: hidden !important;
}

.frozen-drag-handle-grip {
  position: absolute;
  z-index: 45;
  top: 50%;
  left: calc(50% + 3px);
  transform: translate(-50%, -50%); /* Remove default scale */
  width: 24px;
  height: 80px;
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  backdrop-filter: blur(8px);
  cursor: grab;
  will-change: transform, opacity;
}

/* Tooltip like Lark Suite */
.frozen-drag-handle-grip::after {
  content: 'Drag to adjust frozen area';
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 17, 27, 0.95);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 52;
  pointer-events: none;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tooltip arrow */
.frozen-drag-handle-grip::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(17, 17, 27, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 51;
}

/* Show tooltip on hover with delay */
.frozen-drag-handle:hover .frozen-drag-handle-grip::after,
.frozen-drag-handle:hover .frozen-drag-handle-grip::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.5s; /* Show after 500ms hover */
}

.frozen-drag-handle-line {
  width: 3px;
  height: 24px;
  background: white;
  border-radius: 2px;
  opacity: 0.9;
  transition: all 0.2s ease;
}

.frozen-drag-handle-icon {
  color: white;
  opacity: 0.95;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Enhanced dragging state - grip và handle gắn chặt, không có lag */
.frozen-drag-handle.dragging .frozen-drag-handle-grip {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
  cursor: ew-resize;
  opacity: 1 !important;
  visibility: visible !important;
  /* Inline styles sẽ override cho transform và transition */
}

/* Enhanced dragging state for handle - không có transition */
.frozen-drag-handle.dragging {
  z-index: 60;
  cursor: ew-resize;
  transition: none !important; /* Loại bỏ transition khi drag */
}

/* Smooth scroll animation for table reset */
.sticky-table.scroll-reset {
  scroll-behavior: smooth;
}

/* Auto scroll animation when drag starts */
.sticky-table-scroll-area.auto-scroll-reset {
  scroll-behavior: auto !important;
}

.sticky-table-header-wrapper.auto-scroll-reset {
  scroll-behavior: auto !important;
}

/* Remove dragging line animation to prevent conflicts with moving line */

@keyframes dragLineGlow {
  from {
    box-shadow:
      0 0 8px rgba(59, 130, 246, 0.6),
      0 0 4px rgba(59, 130, 246, 0.4);
  }
  to {
    box-shadow:
      0 0 12px rgba(59, 130, 246, 0.8),
      0 0 6px rgba(59, 130, 246, 0.6);
  }
}

/* Hide tooltip when dragging */
.frozen-drag-handle.dragging .frozen-drag-handle-grip::after,
.frozen-drag-handle.dragging .frozen-drag-handle-grip::before {
  opacity: 0 !important;
  visibility: hidden !important;
  transition-delay: 0s;
}

.frozen-drag-indicator {
  position: absolute;
  top: 0;
  width: 2px;
  background: #3b82f6; /* Solid blue color */
  z-index: 45;
  pointer-events: none;
  border-radius: 1px;
}

/* Remove unused keyframes */

/* Smooth drag line movement animation - no shadow, width như bình thường */
.frozen-drag-line-moving {
  position: absolute;
  top: 0;
  width: 2px; /* Giữ nguyên width như lúc bình thường */
  height: 100vh;
  background: #3b82f6;
  z-index: 55;
  pointer-events: none;
  border-radius: 1px;
  will-change: left;
  transition: none; /* No transition for immediate response */
}

/* Remove unused keyframes */

/* Enhanced cursor states for better UX - like resize column */
.frozen-drag-handle {
  cursor: col-resize;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.frozen-drag-handle:hover {
  cursor: col-resize;
}

.frozen-drag-handle.dragging {
  cursor: ew-resize;
}

.frozen-drag-handle-grip {
  cursor: grab;
}

.frozen-drag-handle.dragging .frozen-drag-handle-grip {
  cursor: ew-resize;
}

/* Global body cursor when dragging - like resize column */
body.dragging-frozen-column {
  cursor: ew-resize !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

body.dragging-frozen-column * {
  cursor: ew-resize !important;
}

/* Focus states for accessibility */
.frozen-drag-handle:focus-visible {
  outline: none;
  outline-offset: 0;
}

.frozen-drag-handle:focus-visible .frozen-drag-handle-grip {
  opacity: 1;
  visibility: visible;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .frozen-drag-handle-grip {
    background: #1d4ed8;
    border: none;
  }

  .frozen-drag-handle-grip::after {
    background: #000000;
    color: #ffffff;
    border: 1px solid #ffffff;
  }
}

/* Global line indicator for frozen columns */
.frozen-column-line {
  position: fixed;
  top: 0;
  width: 2px;
  height: 100vh;
  background: #3b82f6;
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease-in-out;
  z-index: 48;
  pointer-events: none;
}

.frozen-column-line.visible {
  opacity: 1;
  visibility: visible;
}

.frozen-column-line.dragging {
  background: #3b82f6;
}
/* Column Manager Styles */
.column-manager-item {
  transition: all 0.2s ease;
}

.column-manager-item.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.column-manager-item.drag-over {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--primary) / 0.05);
}

.column-manager-item:hover {
  background-color: hsl(var(--muted) / 0.5);
}

.column-manager-item.pinned {
  background-color: hsl(var(--muted) / 0.3);
}

/* Drag handle styles */
.column-drag-handle {
  cursor: move;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.column-drag-handle:hover {
  opacity: 1;
}

/* Sheet overlay styles */
.column-manager-sheet .sheet-overlay {
  background-color: rgba(0, 0, 0, 0.3);
}
:root {
  --scrollbar-width: 0px;
  --table-bg-color: var(--background);
  --table-header-bg-color: #f3f6f9;
  --table-border-color: var(--border);
}

.dark {
  --scrollbar-width: 0px;
  --table-bg-color: var(--background);
  --table-header-bg-color: var(--background);
  --table-border-color: var(--border);
}
.sticky-table-wrapper {
  position: relative;
  width: 100%;
  background-color: transparent;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* When wrapper has h-full class, it should take 100% height from parent */
.sticky-table-wrapper.h-full {
  height: 100%;
}

.text-header-title {
  font-size: 12px;
}

.sticky-table-container {
  position: relative;
  border: 1px solid var(--table-border-color);
  border-radius: 8px;
  background: transparent;
  overflow: visible;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.sticky-table-header-wrapper {
  position: relative;
  background-color: var(--table-bg-color);
  border-bottom: 1px solid var(--table-border-color);
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 30 !important;
  border-radius: 8px 8px 0 0;
  flex-shrink: 0;
}

.expand-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  color: white;
}

.expand-btn:hover {
  background-color: #2563eb;
  box-shadow: 0 6px 16px rgba(28, 117, 253, 0.4);
  /* transform: translateY(-50%) scale(1.05); */
}

.sticky-table-header-wrapper::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
}

.sticky-table-header-wrapper::-webkit-scrollbar-track,
.sticky-table-header-wrapper::-webkit-scrollbar-thumb,
.sticky-table-header-wrapper::-webkit-scrollbar-corner {
  display: none !important;
}

.sticky-table-header-wrapper {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.sticky-table-scroll-area {
  position: relative;
  width: 100%;
  overflow: auto;
  background-color: var(--table-bg-color);
  flex: 1;
  min-height: 0;
}

.sticky-table-scroll-area::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
}

.sticky-table-scroll-area::-webkit-scrollbar-track,
.sticky-table-scroll-area::-webkit-scrollbar-thumb,
.sticky-table-scroll-area::-webkit-scrollbar-corner {
  display: none !important;
}

.sticky-table-scroll-area::-webkit-scrollbar:vertical,
.sticky-table-scroll-area::-webkit-scrollbar:horizontal {
  display: none !important;
}

.sticky-table-scroll-area {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.sticky-table-wrapper *::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
}

.sticky-table-wrapper * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.sticky-table-bottom *::-webkit-scrollbar {
  display: block !important;
  width: auto !important;
  height: auto !important;
}

.sticky-table-bottom * {
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}

.sticky-table-header-only {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  margin-bottom: 0;
  position: relative;
  background-color: var(--table-header-bg-color);
  z-index: 16;
}

.sticky-table-body-only {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  margin-top: 0;
  background-color: var(--table-bg-color);
}

.sticky-table thead,
.sticky-header-row {
  position: sticky !important;
  top: 0 !important;
  background-color: var(--table-header-bg-color) !important;
  z-index: 20 !important;
}

.group-header-row {
  background-color: var(--table-header-bg-color) !important;
  border-bottom: 1px solid var(--table-border-color) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

.sub-header-row {
  background-color: var(--table-bg-color) !important;
  position: sticky !important;
  top: 40px !important;
  z-index: 20 !important;
}

.sticky-column {
  position: sticky !important;
  left: var(--sticky-left, 0) !important;
  background-color: var(--table-bg-color) !important;
  background-clip: border-box !important;
  border-right: 1px solid var(--table-border-color) !important;
  z-index: 25 !important;
  position: relative;
  overflow: visible !important;
  opacity: 1 !important;
}

.sticky-column.last-sticky {
  box-shadow: 2px 0 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.sticky-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: inherit;
  z-index: -1 !important;
}

.sticky-table thead .sticky-column,
.group-header-row .sticky-column,
.sub-header-row .sticky-column {
  background-color: var(--table-header-bg-color) !important;
  background-clip: border-box !important;
  z-index: 35 !important;
  opacity: 1 !important;
}

.sticky-table-header-only .sticky-column {
  background-color: var(--table-header-bg-color) !important;
  background-clip: border-box !important;
  z-index: 35 !important;
  opacity: 1 !important;
}

/* Đảm bảo sticky columns luôn hiện trên scrollable columns */
.sticky-table-body-only .sticky-column {
  background-color: var(--table-bg-color) !important;
  background-clip: border-box !important;
  opacity: 1 !important;
  z-index: 25 !important;
}

.sticky-table thead .sticky-column::before,
.group-header-row .sticky-column::before,
.sub-header-row .sticky-column::before,
.sticky-table-header-only .sticky-column::before {
  z-index: -1 !important;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: -2px;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
  transition: background-color 0.2s ease;
  z-index: 15;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 2px;
}

.resize-handle:hover {
  background-color: rgba(59, 130, 246, 0.4);
}

.resize-handle.resizing {
  background-color: rgba(59, 130, 246, 0.8);
}

.sticky-column .resize-handle,
.sticky-column > div[title='Drag to resize column'] {
  z-index: 45 !important;
}

.group-header-row .resize-handle,
.group-header-row > th .resize-handle,
.group-header-row > td .resize-handle {
  z-index: 45 !important;
}

.group-header-row .sticky-column .resize-handle,
.group-header-row .sticky-column > div[title='Drag to resize column'] {
  z-index: 50 !important;
}

.sticky-table-body-only td:not(.sticky-column) .resize-handle,
.sticky-table-body-only th:not(.sticky-column) .resize-handle,
.sticky-table-body-only td:not(.sticky-column) > div[title='Drag to resize column'],
.sticky-table-body-only th:not(.sticky-column) > div[title='Drag to resize column'] {
  z-index: 5 !important;
}

.sticky-table-wrapper:has(.sticky-column) td:not(.sticky-column) .resize-handle,
.sticky-table-wrapper:has(.sticky-column) th:not(.sticky-column) .resize-handle {
  z-index: 5 !important;
}

.resize-line {
  position: fixed !important;
  pointer-events: none;
  background-color: #3b82f6 !important;
  box-shadow: 0 0 4px rgba(59, 130, 246, 0.5) !important;
  border-radius: 1px !important;
}

.sticky-column .resize-line,
.sticky-resize-line {
  z-index: 12 !important;
}

.scrollable-resize-line {
  z-index: 8 !important;
}

.resizing-active * {
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
  cursor: col-resize !important;
}

/* TABLE CELLS */
.sticky-table th {
  position: relative;
  min-width: 50px;
  background-color: var(--table-header-bg-color) !important;
  border-bottom: 1px solid var(--table-border-color);
  border-right: 1px solid var(--table-border-color) !important;
  padding: 8px 12px;
  text-align: center;
  vertical-align: middle;
  font-size: 0.875rem;
  font-weight: 400;
  color: rgb(55, 65, 81);
  white-space: nowrap;
  transition: background-color 0.15s ease;
  z-index: 18;
}

.sticky-table th[data-resizable='true'] {
  min-width: 80px;
}

.sticky-table th[data-resizable='true']:hover {
  border-right-color: #3b82f6 !important;
}

.sticky-table td {
  padding: 8px 12px;
  text-align: center;
  vertical-align: middle;
  font-size: 0.875rem;
  background-color: var(--table-bg-color) !important;
  border-right: 1px solid var(--table-border-color);
  border-bottom: 1px solid var(--table-border-color);
  transition: background-color 0.15s ease;
}

/* ROW STYLING */
.sticky-table-row {
  transition: background-color 0.15s ease;
  background-color: var(--table-bg-color) !important;
}

.sticky-table-row:hover {
  background-color: var(--accent) !important;
}

.sticky-table-row:hover .sticky-column {
  background-color: var(--accent) !important;
  background-clip: border-box !important;
  opacity: 1 !important;
}

/* CONTEXT MENU ROW HIGHLIGHT - Removed highlight to avoid blur effect */
/* Row với context menu mở sẽ không có highlight để tránh hiệu ứng mờ */

/* COLUMN HOVER HIGHLIGHT */
.column-hover-highlight {
  /* keep column hover for body rows, but do NOT change header background */
  background-color: var(--accent) !important;
  position: relative;
  z-index: 1;
}

.column-hover-highlight.sticky-column {
  background-color: var(--accent) !important;
  background-clip: border-box !important;
  opacity: 1 !important;
}

.sticky-table th.column-hover-highlight {
  /* header cells should keep header bg on hover */
  background-color: var(--table-header-bg-color) !important;
}

.sticky-table thead .column-hover-highlight {
  /* ensure thead hover does not switch to accent */
  background-color: var(--table-header-bg-color) !important;
}

.header-column-hover-highlight {
  /* keep header background stable when hovering/focusing header */
  background-color: var(--table-header-bg-color) !important;
}

/* WEEKEND STYLING */
.weekend-header {
  background-color: rgb(254, 226, 226, 0.5) !important;
}

.weekend-cell {
  background-color: rgb(254, 226, 226, 0.4) !important;
}

.dark .weekend-cell {
  background-color: rgb(127, 29, 29, 0.4) !important;
}

.weekend-cell.column-hover-highlight {
  background-color: var(--accent) !important;
}

/* ERROR ROW STYLING - Chỉ màu background, không hover */
.error-row {
  background-color: rgb(254, 226, 226, 0.3) !important;
}

.error-row .sticky-column {
  background-color: rgb(254, 226, 226, 0.3) !important;
  background-clip: border-box !important;
  opacity: 1 !important;
}

/* ERROR CELL STYLING - Highlight từng cell có lỗi */
.error-cell {
  background-color: rgb(254, 226, 226, 0.6) !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  display: inline-block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* BULK ACTIONS HIGHLIGHT */
.bulk-actions-highlight {
  background: linear-gradient(135deg, var(--accent) 0%, rgb(219, 234, 254) 100%);
  border: 1px solid rgb(147, 197, 253);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ICON BUTTONS */
.icon-button-round {
  border-radius: 50% !important;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.icon-button-round:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* PERFORMANCE OPTIMIZATIONS */
.sticky-column,
.sticky-header {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* EMPTY STATE STYLES */
.sticky-table-empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 3rem 2rem;
  background: var(--table-bg-color);
  text-align: center;
}

.empty-state-illustration {
  width: 120px;
  height: 120px;
  opacity: 0.6;
  color: var(--muted-foreground);
}

.empty-state-content {
  max-width: 400px;
  margin: 0 auto;
}

.empty-state-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.empty-state-description {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  margin-bottom: 2rem;
  line-height: 1.5;
}

.empty-state-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.empty-state-actions .primary-action {
  background-color: rgb(59, 130, 246);
  color: var(--table-bg-color);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.empty-state-actions .primary-action:hover {
  background-color: rgb(37, 99, 235);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.empty-state-actions .secondary-action {
  background: transparent;
  color: rgb(107, 114, 128);
  border: 1px solid var(--border);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.empty-state-actions .secondary-action:hover {
  border-color: rgb(156, 163, 175);
  color: rgb(75, 85, 99);
}

/* ANIMATION */
.empty-state-fade-in {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ENSURE BACKGROUND TRẮNG */
/* .sticky-table-wrapper table,
.sticky-table-wrapper tbody,
.sticky-table-wrapper tr {
  background-color: var(--table-bg-color) !important;
} */

.sticky-table-wrapper [data-table],
.sticky-table-wrapper [role='table'],
.sticky-table-wrapper .table {
  background-color: var(--table-bg-color) !important;
}

.sticky-table th:not(.sticky-column) {
  background-color: var(--table-header-bg-color) !important;
}

.sticky-table td:not(.sticky-column) {
  background-color: var(--table-bg-color) !important;
}

/* ROW HEIGHT VARIATIONS */
.sticky-table-wrapper[data-row-height='short'] .sticky-table-row {
  height: 36px;
  min-height: 36px;
}

.sticky-table-wrapper[data-row-height='short'] .sticky-table-row td {
  padding: 6px 12px;
  vertical-align: middle;
}

.sticky-table-wrapper[data-row-height='medium'] .sticky-table-row {
  height: 48px;
  min-height: 48px;
}

.sticky-table-wrapper[data-row-height='medium'] .sticky-table-row td {
  padding: 12px;
  vertical-align: middle;
}

.sticky-table-wrapper[data-row-height='tall'] .sticky-table-row {
  height: 64px;
  min-height: 64px;
}

.sticky-table-wrapper[data-row-height='tall'] .sticky-table-row td {
  padding: 16px 12px;
  vertical-align: middle;
}

.sticky-table-wrapper[data-row-height='extra-tall'] .sticky-table-row {
  height: 80px;
  min-height: 80px;
}

.sticky-table-wrapper[data-row-height='extra-tall'] .sticky-table-row td {
  padding: 20px 12px;
  vertical-align: middle;
}

/* HEADER HEIGHTS MATCHING ROW HEIGHTS */
.sticky-table-wrapper[data-row-height='short'] .sticky-table-header-only th {
  height: 40px;
}

.sticky-table-wrapper[data-row-height='medium'] .sticky-table-header-only th {
  height: 48px;
}

.sticky-table-wrapper[data-row-height='tall'] .sticky-table-header-only th {
  height: 56px;
}

.sticky-table-wrapper[data-row-height='extra-tall'] .sticky-table-header-only th {
  height: 64px;
}

/* BORDER RADIUS FIX */
.sticky-table-header-only tbody tr:first-child th:first-child,
.sticky-table-header-only thead tr:first-child th:first-child {
  border-top-left-radius: 7px;
}

.sticky-table-header-only tbody tr:first-child th:last-child,
.sticky-table-header-only thead tr:first-child th:last-child {
  border-top-right-radius: 7px;
}

.sticky-table-body-only tbody tr:last-child td:first-child {
  border-bottom-left-radius: 7px;
}

.sticky-table-body-only tbody tr:last-child td:last-child {
  border-bottom-right-radius: 7px;
}

.sticky-table-header-only .sticky-column:first-child {
  border-top-left-radius: 7px;
}

.sticky-table-body-only tr:last-child .sticky-column:first-child {
  border-bottom-left-radius: 7px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1200px) {
  .sticky-table-wrapper {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .icon-button-round {
    width: 36px;
    height: 36px;
  }

  .sticky-table-empty-container {
    min-height: 300px;
    padding: 2rem 1rem;
  }

  .empty-state-illustration {
    width: 80px;
    height: 80px;
  }

  .empty-state-title {
    font-size: 1.125rem;
  }

  .empty-state-actions {
    flex-direction: column;
    width: 100%;
  }

  .empty-state-actions .primary-action,
  .empty-state-actions .secondary-action {
    width: 100%;
    justify-content: center;
  }
}

/* ENSURE SCROLLABLE CONTENT ALWAYS BELOW STICKY COLUMNS */
/* Đảm bảo tất cả scrollable content có z-index thấp hơn sticky columns */
.sticky-table-scroll-area * {
  position: relative;
}

/* Đảm bảo resize handles trong scrollable area không hiện trên sticky columns */
.sticky-table-scroll-area .resize-handle,
.sticky-table-scroll-area [title='Drag to resize column'] {
  z-index: 4 !important;
}

/* ENSURE STICKY COLUMN CONTENT IS VISIBLE */
/* Đảm bảo nội dung của sticky columns luôn hiện thị */
.sticky-column > * {
  position: relative;
  z-index: 1 !important; /* Z-index để nội dung hiện trên background */
}

.sticky-column .resize-handle {
  z-index: 45 !important; /* Resize handle vẫn cao nhất trong sticky column */
}

/* Đảm bảo text và các elements con hiện đúng */
.sticky-column span,
.sticky-column div,
.sticky-column button,
.sticky-column input,
.sticky-column select {
  position: relative;
  z-index: 1 !important;
}

/* STICKY TABLE BOTTOM */
.sticky-table-bottom {
  position: relative;
  width: 100%;
  background: var(--table-bg-color);
  border-top: 1px solid var(--border);
  z-index: 10;
  border-radius: 0 0 8px 8px;
  flex-shrink: 0; /* Prevent bottom from shrinking */
}

.sticky-table-bottom-scroll {
  height: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--table-bg-color);
  border-radius: 0 0 8px 8px;
  position: relative;
}

.sticky-table-bottom-scroll-content {
  height: 14px;
  background: transparent;
  pointer-events: none;
}

/* Custom scrollbar for bottom scroll - Make sure it's visible */
.sticky-table-bottom-scroll::-webkit-scrollbar {
  height: 14px !important;
  display: block !important;
  -webkit-appearance: none !important;
}

.sticky-table-bottom-scroll::-webkit-scrollbar-track {
  background: #e2e4e7 !important;
  border-radius: 0 0 8px 8px;
  -webkit-appearance: none !important;
}

.sticky-table-bottom-scroll::-webkit-scrollbar-thumb {
  background: #a1a1aa !important; /* Màu xám đậm hơn */
  border-radius: 6px !important;
  border: 2px solid #e2e4e7 !important;
  min-width: 20px !important;
  -webkit-appearance: none !important;
}

.sticky-table-bottom-scroll::-webkit-scrollbar-thumb:hover {
  background: #71717a !important; /* Màu đậm khi hover */
  border: 2px solid #e2e4e7 !important;
}

.sticky-table-bottom-scroll::-webkit-scrollbar-thumb:active {
  background: #52525b !important; /* Màu rất đậm khi active */
  border: 2px solid #e2e4e7 !important;
}

.sticky-table-bottom-scroll::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Firefox scrollbar - Force visible */
.sticky-table-bottom-scroll {
  scrollbar-width: thin !important;
}

@media (max-width: 768px) {
  .sticky-table-bottom-info {
    padding: 4px 8px;
  }

  .sticky-table-bottom-info .flex {
    flex-wrap: wrap;
    gap: 4px;
  }

  .sticky-table-bottom-info span {
    font-size: 0.75rem;
  }
}

.responsive-card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  width: 100%;
  padding-inline: 2px;
  box-sizing: border-box;
  grid-auto-rows: 1fr;
}

.responsive-card-grid > * {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.responsive-card-grid > * > * {
  flex: 1 1 auto;
}

@media (max-width: 420px) {
  .responsive-card-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 1rem;
  }

  .responsive-card-grid > * {
    width: 100%;
  }

  .responsive-skeleton-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 1rem;
  }

  .responsive-skeleton-grid > * {
    width: 100%;
  }
}

@media (min-width: 421px) and (max-width: 767px) {
  .responsive-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
  }

  .responsive-skeleton-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
  }
}

@media (min-width: 768px) {
  .responsive-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
  }
}

.responsive-skeleton-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  width: 100%;
  padding: 1.5rem;
}

.responsive-skeleton-grid > * {
  width: 100%;
}

.employee-card-responsive {
  width: 100%;
  transition: all 0.2s ease-in-out;
}

@media (max-width: 420px) {
  .employee-card-responsive {
    min-width: unset;
    max-width: 100%;
  }
}

/* CONTEXT MENU DESTRUCTIVE ACTION */
.context-menu-destructive {
  color: #dc2626 !important; /* text-red-600 */
}

.context-menu-destructive:focus {
  color: #dc2626 !important; /* focus:text-red-600 */
  background-color: #fef2f2 !important; /* focus:bg-red-50 */
}

.context-menu-destructive:hover {
  color: #dc2626 !important;
  background-color: #fef2f2 !important;
}

/* Dark mode for destructive action */
.dark .context-menu-destructive {
  color: #f87171 !important; /* dark:text-red-400 */
}

.dark .context-menu-destructive:focus {
  color: #f87171 !important; /* dark:focus:text-red-400 */
  background-color: #241111 !important; /* dark:focus:bg-red-900 - màu tối hơn để không chói */
}

.dark .context-menu-destructive:hover {
  color: #f87171 !important;
  background-color: #220d0d !important;
}
/* Team Switcher CSS Styles */

.team-switcher-container {
    display: flex;
    flex-direction: column;
    align-items: start;
    cursor: pointer;
    position: relative;
    width: 100%;
    transition: all 0.2s ease;
}

/* Collapsed state styles */
.team-switcher-container.collapsed {
    align-items: center;
}

.team-switcher-container.collapsed .team-logo-container {
    justify-content: center;
    margin-top: 0;
}

.team-switcher-container.collapsed .mac-buttons {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    justify-content: center;
}

.team-switcher-button {
    cursor: pointer;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-switcher-button[data-state="open"] {
    background-color: var(--accent);
    color: var(--accent-foreground);
}

.team-logo-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    margin-top: 9px;
    width: 100%;
    gap: 8px;
}

.app-menu-icon {
    width: 40px;
    height: 40px;
    box-sizing: border-box;
}

.dark .team-logo {
    background: rgb(94 94 94 / 70%);
}

.mac-buttons {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    top: 0;
    left: 1px;
    z-index: 10;
}

.mac-button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
}

.mac-button:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.mac-button-red {
    background-color: #ff5f57;
    background: linear-gradient(135deg, #ff5f57 0%, #ff4444 100%);
    box-shadow: 0 2px 6px rgba(255, 73, 64, 0.3)
}

.mac-button-yellow {
    background-color: #ffbd2e;
    background: linear-gradient(135deg, #ffbd2e 0%, #ffaa00 100%);
    box-shadow: 0 2px 6px rgba(255, 181, 31, 0.3)
}

.mac-button-green {
    background-color: #28ca42;
    background: linear-gradient(135deg, #28ca42 0%, #22aa33 100%);
    box-shadow: 0 2px 6px rgba(77, 235, 50, 0.3)
}

.logo-icon {
    width: 16px;
    height: 16px;
}

.team-info {
    display: grid;
    flex: 1;
    text-align: left;
    gap: 2px;
}

.team-title-default {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.team-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 19px;
    font-weight: bold;
    line-height: 1.2;

    /* Rainbow gradient text - expanded for smooth transitions */
    background: linear-gradient(90deg,
            #ff0000 0%,
            /* Red */
            #ff7f00 10%,
            /* Orange */
            #0080ff 70%,
            /* Sky Blue */
            #0000ff 80%,
            /* Blue */
            #7f00ff 90%,
            /* Violet */
            #ff0000 100%
            /* Red (loop back) */
        );
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-flow 8s linear infinite;
}

@keyframes rainbow-flow {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 300% center;
    }
}

/* Global styles for collapsed sidebar state */
[data-state="collapsed"] .team-switcher-container {
    align-items: center;
}

[data-state="collapsed"] .team-logo-container {
    justify-content: center;
    margin-top: 0;
}

[data-state="collapsed"] .mac-buttons {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    justify-content: center;
    margin-bottom: 4px;
}

[data-state="collapsed"] .team-switcher-button {
    justify-content: center;
    overflow: visible !important;
    min-height: 60px;
    padding: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure proper height and visibility for collapsed state */
[data-state="collapsed"] .team-switcher-container {
    width: 100%;
    height: auto;
    min-height: 50px;
}

/* Additional styles for sidebar menu items when collapsed */
[data-state="collapsed"] [data-sidebar="menu"] {
    align-items: center;
}

[data-state="collapsed"] [data-sidebar="menu-item"] {
    display: flex;
    justify-content: center;
}

[data-state="collapsed"] [data-sidebar="menu-button"] {
    justify-content: center;
}/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  cursor: grab;
}
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow .react-flow__edges {
  pointer-events: none;
  overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
  stroke: #b1b1b7;
  stroke-width: 1;
  fill: none;
}
.react-flow__edge {
  pointer-events: visibleStroke;
  cursor: pointer;
}
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge:focus .react-flow__edge-path,
  .react-flow__edge:focus-visible .react-flow__edge-path {
    stroke: #555;
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge-textbg {
    fill: white;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__connectionline {
  z-index: 1001;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: grab;
}
.react-flow__node.dragging {
    cursor: grabbing;
  }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background: #1a192b;
  border: 1px solid white;
  border-radius: 100%;
}
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-top {
    left: 50%;
    top: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-left {
    top: 50%;
    left: -4px;
    transform: translate(0, -50%);
  }
.react-flow__handle-right {
    right: -4px;
    top: 50%;
    transform: translate(0, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.center {
    left: 50%;
    transform: translateX(-50%);
  }
.react-flow__attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.5);
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: 3px;
  width: 150px;
  font-size: 12px;
  color: #222;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #1a192b;
  background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
    }
.react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: 0 0 0 0.5px #1a192b;
    }
.react-flow__node-group {
  background-color: rgba(240, 240, 240, 0.25);
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: rgba(0, 89, 220, 0.08);
  border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__controls-button {
    border: none;
    background: #fefefe;
    border-bottom: 1px solid #eee;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    padding: 5px;
  }
.react-flow__controls-button:hover {
      background: #f4f4f4;
    }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__minimap {
  background-color: #fff;
}
.react-flow__minimap svg {
  display: block;
}
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: #3367d9;
  transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: #3367d9;
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.edgebutton {
  width: 20px;
  height: 20px;
  background: #f1f5f9;
  border: 1px solid #94a3b8;
  cursor: pointer;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: #475569;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.edgebutton:hover {
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
  background: #e2e8f0;
  border-color: #64748b;
}

/* 🔄 THÊM: Custom styles cho arrow markers */
.react-flow__edge-path {
  stroke: #1890ff;
  stroke-width: 2;
}

.react-flow__arrowhead {
  fill: #1890ff;
}

/* Edges connected to executed nodes - bold and solid green */
.react-flow__edge.edge-executed .react-flow__edge-path {
  stroke-width: 3 !important;
  stroke: #1890ff !important;
  stroke-dasharray: none !important;
}

.react-flow__edge.edge-executed .react-flow__arrowhead {
  fill: #1890ff !important;
}

/* 🔄 THÊM: Custom arrow marker styles */
.react-flow__edge.selected .react-flow__edge-path {
  stroke: #ff6b6b;
  stroke-width: 3;
}

.react-flow__edge.selected .react-flow__arrowhead {
  fill: #ff6b6b;
}
.start-node-container {
  border: 1px solid #52c41a;
  box-shadow: 0 1px 2px rgba(82, 196, 26, 0.15);
  animation: borderPulseStartNode 2s ease-in-out infinite;
  /* background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); */
}

.start-node-active {
  box-shadow:
    0 0 0 0 rgba(82, 196, 26, 0.7),
    0 4px 16px rgba(82, 196, 26, 0.4);
  border: 1px solid #52c41a;
  animation: pulse-green 1.5s ease-in-out infinite;
  background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
}

.btn-dark-mode {
  color: black
}
.dark .dark-node-bg {
  background-color: oklch(0.269 0 0) !important;
}
.dark .btn-dark-mode {
  color: white
}

@keyframes borderPulseStartNode {
  0%,
  100% {
    border-color: rgba(250, 204, 45, 0.5);
    box-shadow: 0 0 0 0 rgba(250, 204, 45, 0.9);
    background-color: rgba(250, 204, 45, 0.2);
  }
  50% {
    border-color: rgba(250, 204, 45, 1);
    box-shadow: 0 0 30px 12px rgba(250, 204, 45, 0.7);
    background-color: rgba(250, 204, 45, 0.5);
  }
}

@keyframes pulse-green {
  0% {
    box-shadow:
      0 0 0 0 rgba(82, 196, 26, 0.7),
      0 4px 16px rgba(82, 196, 26, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(82, 196, 26, 0),
      0 4px 20px rgba(82, 196, 26, 0.6);
    transform: scale(1.05);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(82, 196, 26, 0),
      0 4px 16px rgba(82, 196, 26, 0.4);
    transform: scale(1);
  }
}

.start-node-active::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: radial-gradient(circle, rgba(82, 196, 26, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: rotate-glow 3s linear infinite;
  z-index: -1;
}

@keyframes rotate-glow {
  0% {
    transform: rotate(0deg);
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.8;
  }
}

.end-node-container {
  border: 1px solid #ef4d37;
  box-shadow: 0 1px 2px rgba(239, 77, 55, 0.15);
  animation: borderPulseEndNode 2s ease-in-out infinite;
}

.end-node-active {
  box-shadow:
    0 0 0 0 rgba(239, 77, 55, 0.7),
    0 4px 16px rgba(239, 77, 55, 0.4);
  border: 1px solid #ef4d37;
  animation: pulse-red 1.5s ease-in-out infinite;
  background: linear-gradient(135deg, #fff1f0 0%, #ffccc7 100%);
}

@keyframes borderPulseEndNode {
  0%,
  100% {
    border-color: rgba(239, 77, 55, 0.5);
    box-shadow: 0 0 0 0 rgba(239, 77, 55, 0.9);
    background-color: rgba(239, 77, 55, 0.2);
  }
  50% {
    border-color: rgba(239, 77, 55, 1);
    box-shadow: 0 0 30px 12px rgba(239, 77, 55, 0.7);
    background-color: rgba(239, 77, 55, 0.5);
  }
}

@keyframes pulse-red {
  0% {
    box-shadow:
      0 0 0 0 rgba(239, 77, 55, 0.7),
      0 4px 16px rgba(239, 77, 55, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(239, 77, 55, 0),
      0 4px 20px rgba(239, 77, 55, 0.6);
    transform: scale(1.05);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(239, 77, 55, 0),
      0 4px 16px rgba(239, 77, 55, 0.4);
    transform: scale(1);
  }
}

.end-node-active::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: radial-gradient(circle, rgba(239, 77, 55, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: rotate-glow 3s linear infinite;
  z-index: -1;
}

/* Auto Approve Node Styles */
.auto-approve-container {
  position: relative;
}

.auto-approve-main {
  position: relative;
  min-width: 130px;
  min-height: 80px;
  max-width: 160px;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
}

.auto-approve-main::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: -1;
}

.auto-approve-main:hover::before {
  opacity: 1;
  animation: pulse-glow 1.5s ease-in-out infinite;
}

.auto-approve-main:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: scale(1.02);
}

.auto-approve-main.selected {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.auto-approve-handle {
  width: 10px;
  height: 10px;
  border: 2px solid white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  top: 50% !important;
  transform: translateY(-50%);
}

.auto-approve-handle:hover {
  transform: translateY(-50%) scale(1.15);
}

.auto-approve-highlight {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0;
}

.auto-approve-container:hover .auto-approve-highlight {
  opacity: 1;
}

.auto-approve-label {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  width: 100%;
  word-wrap: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.auto-approve-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background-color: rgb(17, 24, 39);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 50;
}

.auto-approve-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgb(17, 24, 39);
}

.auto-approve-container:hover .auto-approve-tooltip {
  opacity: 1;
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    box-shadow: 0 0 20px 4px currentColor;
  }
}

/* Approve Request Node Styles */
.approve-request-container {
  position: relative;
}

.approve-request-main {
  position: relative;
  min-width: 130px;
  min-height: 80px;
  max-width: 160px;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
}

.approve-request-main::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: -1;
}

.approve-request-main:hover::before {
  opacity: 1;
  animation: pulse-glow 1.5s ease-in-out infinite;
}

.approve-request-main:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: scale(1.02);
}

.approve-request-main.selected {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.approve-request-handle {
  width: 10px;
  height: 10px;
  border: 2px solid white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  top: 50% !important;
  transform: translateY(-50%);
}

.approve-request-handle:hover {
  transform: translateY(-50%) scale(1.15);
}

.approve-request-highlight {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0;
}

.approve-request-container:hover .approve-request-highlight {
  opacity: 1;
}

.approve-request-label {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  width: 100%;
  word-wrap: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.approve-request-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background-color: rgb(17, 24, 39);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 50;
}

.approve-request-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgb(17, 24, 39);
}

.approve-request-container:hover .approve-request-tooltip {
  opacity: 1;
}

/* Auto Approve Check Node Styles */
.auto-approve-check-container {
  position: relative;
}

.auto-approve-check-main {
  position: relative;
  min-width: 130px;
  min-height: 80px;
  max-width: 160px;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
}

.auto-approve-check-main::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: -1;
}

.auto-approve-check-main:hover::before {
  opacity: 1;
  animation: pulse-glow 1.5s ease-in-out infinite;
}

.auto-approve-check-main:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: scale(1.02);
}

.auto-approve-check-main.selected {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.auto-approve-check-handle {
  width: 10px;
  height: 10px;
  border: 2px solid white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  top: 50% !important;
  transform: translateY(-50%);
}

.auto-approve-check-handle:hover {
  transform: translateY(-50%) scale(1.15);
}

.auto-approve-check-highlight {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0;
}

.auto-approve-check-container:hover .auto-approve-check-highlight {
  opacity: 1;
}

.auto-approve-check-label {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  max-width: 120px;
  word-wrap: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.auto-approve-check-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background-color: rgb(17, 24, 39);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 50;
}

.auto-approve-check-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgb(17, 24, 39);
}

.auto-approve-check-container:hover .auto-approve-check-tooltip {
  opacity: 1;
}

/* Branch Node Styles */
.branch-node-container {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Add glow effect on hover */
.branch-node-container::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(250, 204, 21, 0.4) 0%,
    rgba(250, 204, 21, 0.2) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
  animation: rotate-glow-branch 3s linear infinite;
}

.branch-node-container:hover::before {
  opacity: 1;
}

.branch-node-container.selected::before {
  opacity: 1;
  background: radial-gradient(
    circle,
    rgba(234, 179, 8, 0.5) 0%,
    rgba(234, 179, 8, 0.3) 40%,
    transparent 70%
  );
}

.branch-node-container.running::before {
  opacity: 1;
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.5) 0%,
    rgba(37, 99, 235, 0.3) 40%,
    transparent 70%
  );
}

/* Tooltip styles */
.branch-tooltip {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background-color: rgb(17, 24, 39);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 50;
}

.branch-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgb(17, 24, 39);
}

.branch-node-container:hover .branch-tooltip {
  opacity: 1;
}

/* Diamond SVG styles */
.branch-node-container .branch-diamond {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transition: all 0.3s ease;
}

.branch-node-container .branch-diamond polygon {
  fill: #fefce8;
  stroke: #facc15;
  stroke-width: 2;
  transition: all 0.3s ease;
}

/* Hover effect with continuous pulse animation - giống các node khác */
.branch-node-container:hover .branch-diamond polygon {
  stroke: #eab308;
  stroke-width: 2.5;
  animation: pulse-branch-border 2s ease-in-out infinite;
}

/* Hover ring shadow effect - giống các node khác */
.branch-node-container:hover .branch-diamond {
  filter: drop-shadow(0 0 0 2px rgba(250, 204, 21, 0.3)) drop-shadow(0 0 0 3px white);
}

/* Selected state */
.branch-node-container.selected .branch-diamond polygon {
  stroke: #eab308;
  stroke-width: 3;
  filter: drop-shadow(0 4px 8px rgba(250, 204, 21, 0.5))
    drop-shadow(0 0 12px rgba(250, 204, 21, 0.4));
  animation: pulse-branch-selected 2s ease-in-out infinite;
}

/* Selected ring shadow effect - giống các node khác */
.branch-node-container.selected .branch-diamond {
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))
    drop-shadow(0 0 0 2px rgba(234, 179, 8, 0.6)) drop-shadow(0 0 0 4px white);
}

/* Running state */
.branch-node-container.running .branch-diamond polygon {
  fill: #fff7e6;
  stroke: #2563eb;
  stroke-width: 3;
  filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.5)) drop-shadow(0 0 12px rgba(37, 99, 235, 0.4));
  animation: pulse-branch-running 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Content styles */
.branch-node-container .branch-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 0 8px;
}

/* Label styles */
.branch-node-container .branch-label {
  word-break: break-word;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
  font-size: 12px;
  line-height: 1.2;
}

.branch-node-container:hover .branch-label {
  color: #eab308;
}

.branch-node-container.selected .branch-label {
  color: #eab308;
  font-weight: 600;
}

/* Handle styles */
.branch-node-container .branch-handle {
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  width: 12px;
  height: 12px;
  z-index: 2;
  transition: all 0.2s ease;
  position: relative;
}

.branch-node-container .branch-handle::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.branch-node-container .branch-handle:hover {
  transform: scale(1.3);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.branch-node-container .branch-handle:hover::before {
  opacity: 1;
  animation: pulse-handle 1s ease-in-out infinite;
}

.branch-node-container .branch-handle-input {
  background: #facc15;
}

.branch-node-container .branch-handle-input::before {
  background: radial-gradient(circle, rgba(250, 204, 21, 0.6) 0%, transparent 70%);
}

.branch-node-container .branch-handle-true {
  background: #16a34a;
}

.branch-node-container .branch-handle-true::before {
  background: radial-gradient(circle, rgba(22, 163, 74, 0.6) 0%, transparent 70%);
}

.branch-node-container .branch-handle-false {
  background: #dc2626;
}

.branch-node-container .branch-handle-false::before {
  background: radial-gradient(circle, rgba(220, 38, 38, 0.6) 0%, transparent 70%);
}

/* True handle container - moved outside diamond */
.branch-true-container {
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  z-index: 10;
}

.branch-node-container:hover .branch-true-container {
  right: -10px;
}

.branch-true-label {
  margin-right: 2px;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.branch-node-container:hover .branch-true-label {
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* False handle container - moved outside diamond */
.branch-false-container {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.2s ease;
  z-index: 10;
}

.branch-node-container:hover .branch-false-container {
  bottom: -10px;
}

.branch-false-label {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.branch-node-container:hover .branch-false-label {
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Animation - Continuous pulsing border effect on hover */
@keyframes pulse-branch-border {
  0%,
  100% {
    stroke: #eab308;
    filter: drop-shadow(0 0 0 0 rgba(250, 204, 21, 0.9))
      drop-shadow(0 3px 6px rgba(250, 204, 21, 0.3));
  }
  50% {
    stroke: #facc15;
    filter: drop-shadow(0 0 20px 8px rgba(250, 204, 21, 0.7))
      drop-shadow(0 4px 8px rgba(250, 204, 21, 0.5));
  }
}

@keyframes pulse-branch-selected {
  0%,
  100% {
    stroke-opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(250, 204, 21, 0.5))
      drop-shadow(0 0 12px rgba(250, 204, 21, 0.4));
  }
  50% {
    stroke-opacity: 0.9;
    filter: drop-shadow(0 5px 10px rgba(250, 204, 21, 0.6))
      drop-shadow(0 0 16px rgba(250, 204, 21, 0.5));
  }
}

@keyframes pulse-branch-running {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.5))
      drop-shadow(0 0 12px rgba(37, 99, 235, 0.4));
  }
  50% {
    opacity: 0.9;
    filter: drop-shadow(0 5px 10px rgba(37, 99, 235, 0.6))
      drop-shadow(0 0 16px rgba(37, 99, 235, 0.5));
  }
}

@keyframes rotate-glow-branch {
  0% {
    transform: rotate(0deg);
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.8;
  }
}

@keyframes pulse-handle {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}

/* HTTP Endpoint Node Styles */
.http-endpoint-container {
  position: relative;
}

.http-endpoint-main {
  position: relative;
  min-width: 130px;
  min-height: 80px;
  max-width: 160px;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
}

.http-endpoint-main::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: -1;
}

.http-endpoint-main:hover::before {
  opacity: 1;
  animation: pulse-glow 1.5s ease-in-out infinite;
}

.http-endpoint-main:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: scale(1.02);
}

.http-endpoint-main.selected {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.http-endpoint-handle {
  width: 10px;
  height: 10px;
  border: 2px solid white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  top: 50% !important;
  transform: translateY(-50%);
}

.http-endpoint-handle:hover {
  transform: translateY(-50%) scale(1.15);
}

.http-endpoint-highlight {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0;
}

.http-endpoint-container:hover .http-endpoint-highlight {
  opacity: 1;
}

.http-endpoint-label {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  width: 100%;
  word-wrap: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.http-endpoint-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background-color: rgb(17, 24, 39);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
}

.http-endpoint-container:hover .http-endpoint-tooltip {
  opacity: 1;
}

/* Run HTTP Request Node Styles */
.run-http-container {
  position: relative;
}

.run-http-main {
  position: relative;
  min-width: 130px;
  min-height: 80px;
  max-width: 160px;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
}

.run-http-main::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: -1;
}

.run-http-main:hover::before {
  opacity: 1;
  animation: pulse-glow 1.5s ease-in-out infinite;
}

.run-http-main:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: scale(1.02);
}

.run-http-main.selected {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.run-http-handle {
  width: 10px;
  height: 10px;
  border: 2px solid white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  top: 50% !important;
  transform: translateY(-50%);
}

.run-http-handle:hover {
  transform: translateY(-50%) scale(1.15);
}

.run-http-highlight {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0;
}

.run-http-container:hover .run-http-highlight {
  opacity: 1;
}

.run-http-label {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  width: 100%;
  word-wrap: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.run-http-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background-color: rgb(17, 24, 39);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
}

.run-http-container:hover .run-http-tooltip {
  opacity: 1;
}

/* Notification Node Styles - Circular Purple (Smaller Size) */
.notification-container {
  position: relative;
}

.notification-circle {
  position: relative;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
}

.notification-circle::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: -1;
}

.notification-circle:hover::before {
  opacity: 1;
  animation: pulse-glow-circular 2s ease-in-out infinite;
}

.notification-circle:hover {
  transform: scale(1.05);
}

.notification-circle.selected {
  transform: scale(1.08);
}

.notification-circle.running {
  box-shadow:
    0 0 0 0 rgba(168, 85, 247, 0.7),
    0 4px 16px rgba(168, 85, 247, 0.4);
}

.notification-handle {
  width: 6px;
  height: 6px;
  border: 2px solid white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
  top: 50% !important;
  transform: translateY(-50%);
}

.notification-handle:hover {
  transform: translateY(-50%) scale(1.3);
}

.notification-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background-color: rgba(168, 85, 247, 0.1);
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0;
  z-index: -1;
}

.notification-container:hover .notification-glow {
  opacity: 1;
}

.notification-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.notification-circle:hover .notification-icon-wrapper {
  transform: scale(1.15);
}

.notification-label {
  text-align: center;
  font-size: 7px;
  font-weight: 500;
  line-height: 1.1;
  width: 100%;
  color: #6b7280;
  word-wrap: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.notification-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background-color: rgb(17, 24, 39);
  color: white;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 50;
}

.notification-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgb(17, 24, 39);
}

.notification-container:hover .notification-tooltip {
  opacity: 1;
}

/* Animation for circular notification glow */
@keyframes pulse-glow-circular {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7);
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(168, 85, 247, 0.4);
  }
}

/* Animation for running state */
@keyframes pulse-notification {
  0% {
    box-shadow:
      0 0 0 0 rgba(168, 85, 247, 0.7),
      0 4px 16px rgba(168, 85, 247, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(168, 85, 247, 0),
      0 4px 20px rgba(168, 85, 247, 0.6);
    transform: scale(1.05);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(168, 85, 247, 0),
      0 4px 16px rgba(168, 85, 247, 0.4);
    transform: scale(1);
  }
}

/* View Mode: Node Execution States */

/* Node is currently running (blue highlight) */
.node-running {
  border: 2px solid #1890ff !important;
  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%) !important;
  box-shadow:
    0 0 0 0 rgba(24, 144, 255, 0.7),
    0 4px 16px rgba(24, 144, 255, 0.4) !important;
  animation: pulse-blue 1.5s ease-in-out infinite;
}

@keyframes pulse-blue {
  0% {
    box-shadow:
      0 0 0 0 rgba(24, 144, 255, 0.7),
      0 4px 16px rgba(24, 144, 255, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(24, 144, 255, 0),
      0 4px 20px rgba(24, 144, 255, 0.6);
    transform: scale(1.02);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(24, 144, 255, 0),
      0 4px 16px rgba(24, 144, 255, 0.4);
    transform: scale(1);
  }
}

/* Node has been executed - use individual node's runningStyle instead of border */
.node-executed {
  /* Styling handled by each node component */

}

/* Node is paused or pending (yellow highlight) */
.node-paused {
  border: 2px solid rgb(229, 219, 28) !important;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  box-shadow:
    0 0 0 0 rgba(240, 196, 18, 0.7),
    0 4px 16px rgba(240, 196, 18, 0.4) !important;
  animation: pulse-yellow 1.5s ease-in-out infinite;
}

@keyframes pulse-yellow {
  0% {
    box-shadow:
      0 0 0 0 rgba(240, 196, 18, 0.7),
      0 4px 16px rgba(240, 196, 18, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(240, 196, 18, 0),
      0 4px 20px rgba(240, 196, 18, 0.6);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(240, 196, 18, 0),
      0 4px 16px rgba(240, 196, 18, 0.4);
  }

}

/* Currently running node gets additional emphasis */
.node-running::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: radial-gradient(circle, rgba(24, 144, 255, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  animation: rotate-glow-blue 3s linear infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes rotate-glow-blue {
  0% {
    transform: rotate(0deg);
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.8;
  }
}

/* ===== React Flow Controls Dark Mode ===== */
/* Light mode styles (default) */
.react-flow__controls {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

.react-flow__controls-button {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  color: #374151;
}

.react-flow__controls-button:hover {
  background-color: #f9fafb;
}

.react-flow__controls-button svg {
  fill: #374151;
}
.react-flow__panel.bottom {
  bottom: 94px !important;
}
/* Dark mode styles */
.dark .react-flow__controls {
  background-color: oklch(0.269 0 0);
  border: 1px solid oklch(0.35 0 0);
}

.dark .react-flow__controls-button {
  background-color: oklch(0.269 0 0);
  border-bottom: 1px solid oklch(0.35 0 0);
  color: oklch(0.85 0 0);
}

.dark .react-flow__controls-button:hover {
  background-color: oklch(0.35 0 0);
}

.dark .react-flow__controls-button svg {
  fill: oklch(0.85 0 0);
}

.dark .react-flow__controls-button:disabled svg {
  fill: oklch(0.5 0 0);
}
/* Modern Node Card Styles */

/* Hover effect for node cards - Scoped to orgchart */
.orgchart-node.group:hover,
.node-card.group:hover {
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Subtle pulse animation on hover */
@keyframes subtle-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
}

.dark .dark-bg-black {
  background-color: #000000 !important;
}

.border-card {
  border: 1px solid #3b82f6 !important;
}

.border-card-default {
  border: 1px solid #e5e7eb !important;
}
.dark .border-card-default {
  border: 1px solid #38393b !important;
}

.orgchart-node.group:hover,
.node-card.group:hover {
  animation: subtle-pulse 2s ease-in-out infinite;
}

/* Selected state with blue accent */
.group.selected {
  box-shadow:
    0 0 0 2px #3b82f6,
    0 10px 25px -5px rgba(59, 130, 246, 0.3);
}

/* Dragging state */
.group.dragging {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25);
  cursor: grabbing;
}

.custom-radius-7 {
  border-radius: 7px;
}

/* Action buttons fade in/out */
.action-buttons {
  transition: opacity 0.2s ease-in-out;
}

/* Stats icons with subtle color */
.stats-icon {
  color: #9ca3af;
  transition: color 0.2s ease;
}

.orgchart-node.group:hover .stats-icon,
.node-card.group:hover .stats-icon {
  color: #6b7280;
}