/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@layer properties;
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.\!sticky {
  position: sticky !important;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-y-0 {
  inset-block: calc(var(--spacing) * 0);
}
.start-0 {
  inset-inline-start: calc(var(--spacing) * 0);
}
.top-0 {
  top: calc(var(--spacing) * 0);
}
.top-\[7px\] {
  top: 7px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[calc\(100\%\+5px\)\] {
  top: calc(100% + 5px);
}
.right-0 {
  right: calc(var(--spacing) * 0);
}
.right-\[7px\] {
  right: 7px;
}
.left-0 {
  left: calc(var(--spacing) * 0);
}
.left-\[50\%\] {
  left: 50%;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[200\] {
  z-index: 200;
}
.mt-0 {
  margin-top: calc(var(--spacing) * 0);
}
.mt-0\.5 {
  margin-top: calc(var(--spacing) * 0.5);
}
.mt-auto {
  margin-top: auto;
}
.mb-0 {
  margin-bottom: calc(var(--spacing) * 0);
}
.mb-0\.5 {
  margin-bottom: calc(var(--spacing) * 0.5);
}
.mb-1 {
  margin-bottom: calc(var(--spacing) * 1);
}
.mb-2 {
  margin-bottom: calc(var(--spacing) * 2);
}
.mb-2\.5 {
  margin-bottom: calc(var(--spacing) * 2.5);
}
.mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}
.mb-3\.5 {
  margin-bottom: calc(var(--spacing) * 3.5);
}
.mb-4 {
  margin-bottom: calc(var(--spacing) * 4);
}
.mb-6 {
  margin-bottom: calc(var(--spacing) * 6);
}
.ml-auto {
  margin-left: auto;
}
.box-border {
  box-sizing: border-box;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline-flex {
  display: inline-flex;
}
.table-row {
  display: table-row;
}
.h-1 {
  height: calc(var(--spacing) * 1);
}
.h-1\.5 {
  height: calc(var(--spacing) * 1.5);
}
.h-2 {
  height: calc(var(--spacing) * 2);
}
.h-3 {
  height: calc(var(--spacing) * 3);
}
.h-3\.5 {
  height: calc(var(--spacing) * 3.5);
}
.h-4 {
  height: calc(var(--spacing) * 4);
}
.h-4\.5 {
  height: calc(var(--spacing) * 4.5);
}
.h-7 {
  height: calc(var(--spacing) * 7);
}
.h-8 {
  height: calc(var(--spacing) * 8);
}
.h-9 {
  height: calc(var(--spacing) * 9);
}
.h-14 {
  height: calc(var(--spacing) * 14);
}
.h-\[3px\] {
  height: 3px;
}
.h-\[7px\] {
  height: 7px;
}
.h-\[15px\] {
  height: 15px;
}
.h-\[19px\] {
  height: 19px;
}
.h-\[26px\] {
  height: 26px;
}
.h-\[34px\] {
  height: 34px;
}
.h-\[58px\] {
  height: 58px;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.min-h-\[40px\] {
  min-height: 40px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[54px\] {
  min-height: 54px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1 {
  width: calc(var(--spacing) * 1);
}
.w-1\.5 {
  width: calc(var(--spacing) * 1.5);
}
.w-2 {
  width: calc(var(--spacing) * 2);
}
.w-3 {
  width: calc(var(--spacing) * 3);
}
.w-3\.5 {
  width: calc(var(--spacing) * 3.5);
}
.w-4 {
  width: calc(var(--spacing) * 4);
}
.w-4\.5 {
  width: calc(var(--spacing) * 4.5);
}
.w-7 {
  width: calc(var(--spacing) * 7);
}
.w-8 {
  width: calc(var(--spacing) * 8);
}
.w-12 {
  width: calc(var(--spacing) * 12);
}
.w-36 {
  width: calc(var(--spacing) * 36);
}
.w-48 {
  width: calc(var(--spacing) * 48);
}
.w-\[7px\] {
  width: 7px;
}
.w-\[11px\] {
  width: 11px;
}
.w-\[15px\] {
  width: 15px;
}
.w-\[19px\] {
  width: 19px;
}
.w-\[26px\] {
  width: 26px;
}
.w-\[34px\] {
  width: 34px;
}
.w-\[60px\] {
  width: 60px;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: calc(var(--spacing) * 0);
}
.min-w-\[20px\] {
  min-width: 20px;
}
.min-w-\[80px\] {
  min-width: 80px;
}
.min-w-\[160px\] {
  min-width: 160px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.flex-1 {
  flex: 1;
}
.flex-shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.-translate-\[50\%\] {
  --tw-translate-x: calc(50% * -1);
  --tw-translate-y: calc(50% * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.transform {
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-\[1fr_340px\] {
  grid-template-columns: 1fr 340px;
}
.flex-col {
  flex-direction: column;
}
.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;
}
.gap-0 {
  gap: calc(var(--spacing) * 0);
}
.gap-0\.5 {
  gap: calc(var(--spacing) * 0.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-2\.5 {
  gap: calc(var(--spacing) * 2.5);
}
.gap-3 {
  gap: calc(var(--spacing) * 3);
}
.gap-3\.5 {
  gap: calc(var(--spacing) * 3.5);
}
.gap-4 {
  gap: calc(var(--spacing) * 4);
}
.gap-5 {
  gap: calc(var(--spacing) * 5);
}
.gap-\[3px\] {
  gap: 3px;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-\[6px\] {
  border-radius: 6px;
}
.rounded-\[7px\] {
  border-radius: 7px;
}
.rounded-\[9px\] {
  border-radius: 9px;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.rounded-t-\[10px\] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-\[1\.5px\] {
  border-style: var(--tw-border-style);
  border-width: 1.5px;
}
.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.border-l {
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
}
.border-none {
  --tw-border-style: none;
  border-style: none;
}
.border-\[\#BFDBFE\] {
  border-color: #BFDBFE;
}
.border-accent-border {
  border-color: var(--color-accent-border);
}
.border-amber-border {
  border-color: var(--color-amber-border);
}
.border-border {
  border-color: var(--color-border);
}
.border-border-strong {
  border-color: var(--color-border-strong);
}
.border-green-border {
  border-color: var(--color-green-border);
}
.border-grey-200 {
  border-color: var(--color-grey-200);
}
.border-red-border {
  border-color: var(--color-red-border);
}
.border-transparent {
  border-color: transparent;
}
.bg-\[\#ECFDF5\] {
  background-color: #ECFDF5;
}
.bg-\[\#EEF4FF\] {
  background-color: #EEF4FF;
}
.bg-\[\#EFF6FF\] {
  background-color: #EFF6FF;
}
.bg-\[\#F3F4F6\] {
  background-color: #F3F4F6;
}
.bg-\[\#FAFAFA\] {
  background-color: #FAFAFA;
}
.bg-\[\#FEF3C7\] {
  background-color: #FEF3C7;
}
.bg-accent {
  background-color: var(--color-accent);
}
.bg-accent-bg {
  background-color: var(--color-accent-bg);
}
.bg-amber-bg {
  background-color: var(--color-amber-bg);
}
.bg-amber-main {
  background-color: var(--color-amber-main);
}
.bg-bg {
  background-color: var(--color-bg);
}
.bg-border {
  background-color: var(--color-border);
}
.bg-danger {
  background-color: var(--color-danger);
}
.bg-green-bg {
  background-color: var(--color-green-bg);
}
.bg-green-main {
  background-color: var(--color-green-main);
}
.bg-grey-100 {
  background-color: var(--color-grey-100);
}
.bg-ink {
  background-color: var(--color-ink);
}
.bg-primary {
  background-color: var(--color-primary);
}
.bg-purple-light {
  background-color: var(--color-purple-light);
}
.bg-red-bg {
  background-color: var(--color-red-bg);
}
.bg-red-main {
  background-color: var(--color-red-main);
}
.bg-text3 {
  background-color: var(--color-text3);
}
.bg-transparent {
  background-color: transparent;
}
.p-1 {
  padding: calc(var(--spacing) * 1);
}
.p-2 {
  padding: calc(var(--spacing) * 2);
}
.p-3 {
  padding: calc(var(--spacing) * 3);
}
.p-3\.5 {
  padding: calc(var(--spacing) * 3.5);
}
.p-4 {
  padding: calc(var(--spacing) * 4);
}
.p-5 {
  padding: calc(var(--spacing) * 5);
}
.p-7 {
  padding: calc(var(--spacing) * 7);
}
.p-10 {
  padding: calc(var(--spacing) * 10);
}
.p-\[3px\] {
  padding: 3px;
}
.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-3\.5 {
  padding-inline: calc(var(--spacing) * 3.5);
}
.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}
.px-7 {
  padding-inline: calc(var(--spacing) * 7);
}
.px-\[18px\] {
  padding-inline: 18px;
}
.py-0 {
  padding-block: calc(var(--spacing) * 0);
}
.py-0\.5 {
  padding-block: calc(var(--spacing) * 0.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-3\.5 {
  padding-block: calc(var(--spacing) * 3.5);
}
.py-10 {
  padding-block: calc(var(--spacing) * 10);
}
.py-\[3px\] {
  padding-block: 3px;
}
.py-\[5px\] {
  padding-block: 5px;
}
.py-\[7px\] {
  padding-block: 7px;
}
.py-\[11px\] {
  padding-block: 11px;
}
.py-\[18px\] {
  padding-block: 18px;
}
.py-px {
  padding-block: 1px;
}
.ps-3 {
  padding-inline-start: calc(var(--spacing) * 3);
}
.ps-9 {
  padding-inline-start: calc(var(--spacing) * 9);
}
.pe-3 {
  padding-inline-end: calc(var(--spacing) * 3);
}
.pt-4 {
  padding-top: calc(var(--spacing) * 4);
}
.pb-1 {
  padding-bottom: calc(var(--spacing) * 1);
}
.pb-1\.5 {
  padding-bottom: calc(var(--spacing) * 1.5);
}
.pb-3 {
  padding-bottom: calc(var(--spacing) * 3);
}
.pb-3\.5 {
  padding-bottom: calc(var(--spacing) * 3.5);
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-\[10\.5px\] {
  font-size: 10.5px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[13\.5px\] {
  font-size: 13.5px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-\[32px\] {
  font-size: 32px;
}
.leading-5 {
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
}
.leading-\[1\.6\] {
  --tw-leading: 1.6;
  line-height: 1.6;
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.tracking-\[0\.1em\] {
  --tw-tracking: 0.1em;
  letter-spacing: 0.1em;
}
.tracking-\[0\.02em\] {
  --tw-tracking: 0.02em;
  letter-spacing: 0.02em;
}
.tracking-\[0\.06em\] {
  --tw-tracking: 0.06em;
  letter-spacing: 0.06em;
}
.tracking-\[0\.07em\] {
  --tw-tracking: 0.07em;
  letter-spacing: 0.07em;
}
.tracking-\[0\.08em\] {
  --tw-tracking: 0.08em;
  letter-spacing: 0.08em;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-\[\#1D4ED8\] {
  color: #1D4ED8;
}
.text-\[\#4B5563\] {
  color: #4B5563;
}
.text-\[\#065F46\] {
  color: #065F46;
}
.text-\[\#92400E\] {
  color: #92400E;
}
.text-accent {
  color: var(--color-accent);
}
.text-amber-main {
  color: var(--color-amber-main);
}
.text-green-main {
  color: var(--color-green-main);
}
.text-muted {
  color: var(--color-muted);
}
.text-purple-1500 {
  color: var(--color-purple-1500);
}
.text-purple-light {
  color: var(--color-purple-light);
}
.text-red-main {
  color: var(--color-red-main);
}
.text-text1 {
  color: var(--color-text1);
}
.text-text2 {
  color: var(--color-text2);
}
.text-text3 {
  color: var(--color-text3);
}
.text-text4 {
  color: var(--color-text4);
}
.uppercase {
  text-transform: uppercase;
}
.not-italic {
  font-style: normal;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.placeholder-text3 {
  &::placeholder {
    color: var(--color-text3);
  }
}
.opacity-0 {
  opacity: 0%;
}
.opacity-30 {
  opacity: 30%;
}
.opacity-60 {
  opacity: 60%;
}
.opacity-75 {
  opacity: 75%;
}
.shadow-5 {
  --tw-shadow: var(--shadow-5);
  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_2px_6px_rgba\(0\,0\,0\,0\.12\)\] {
  --tw-shadow: 0 2px 6px var(--tw-shadow-color, rgba(0,0,0,0.12));
  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: var(--shadow-lg);
  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: var(--shadow-sm);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}
.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, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.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, ease);
  transition-duration: var(--tw-duration, 0s);
}
.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}
.before\:h-\[5px\] {
  &::before {
    content: var(--tw-content);
    height: 5px;
  }
}
.before\:w-\[5px\] {
  &::before {
    content: var(--tw-content);
    width: 5px;
  }
}
.before\:rounded-full {
  &::before {
    content: var(--tw-content);
    border-radius: calc(infinity * 1px);
  }
}
.before\:bg-current {
  &::before {
    content: var(--tw-content);
    background-color: currentcolor;
  }
}
.before\:content-\[\'\'\] {
  &::before {
    --tw-content: '';
    content: var(--tw-content);
  }
}
.hover\:-translate-y-px {
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: -1px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
}
.hover\:border-accent-border {
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-accent-border);
    }
  }
}
.hover\:border-border {
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-border);
    }
  }
}
.hover\:border-border-strong {
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-border-strong);
    }
  }
}
.hover\:bg-\[\#2D2D2A\] {
  &:hover {
    @media (hover: hover) {
      background-color: #2D2D2A;
    }
  }
}
.hover\:bg-\[\#D1FAE5\] {
  &:hover {
    @media (hover: hover) {
      background-color: #D1FAE5;
    }
  }
}
.hover\:bg-\[\#FAFAF8\] {
  &:hover {
    @media (hover: hover) {
      background-color: #FAFAF8;
    }
  }
}
.hover\:bg-\[\#FEE2E2\] {
  &:hover {
    @media (hover: hover) {
      background-color: #FEE2E2;
    }
  }
}
.hover\:bg-bg {
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-bg);
    }
  }
}
.hover\:text-accent {
  &:hover {
    @media (hover: hover) {
      color: var(--color-accent);
    }
  }
}
.hover\:text-red-main {
  &:hover {
    @media (hover: hover) {
      color: var(--color-red-main);
    }
  }
}
.hover\:text-text1 {
  &:hover {
    @media (hover: hover) {
      color: var(--color-text1);
    }
  }
}
.hover\:text-text2 {
  &:hover {
    @media (hover: hover) {
      color: var(--color-text2);
    }
  }
}
.hover\:underline {
  &:hover {
    @media (hover: hover) {
      text-decoration-line: underline;
    }
  }
}
.hover\:opacity-100 {
  &:hover {
    @media (hover: hover) {
      opacity: 100%;
    }
  }
}
.hover\:shadow-\[0_4px_10px_rgba\(0\,0\,0\,0\.14\)\] {
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 4px 10px var(--tw-shadow-color, rgba(0,0,0,0.14));
      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-md {
  &:hover {
    @media (hover: hover) {
      --tw-shadow: var(--shadow-md);
      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-4 {
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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\:outline-none {
  &:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
}
:root, :host {
  --spacing: 4px;
  --color-primary: var(--primary);
  --color-danger: var(--danger);
  --color-bg: var(--bg);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-text1: var(--text1);
  --color-text2: var(--text2);
  --color-text3: var(--text3);
  --color-text4: var(--text4);
  --color-ink: var(--ink);
  --color-accent: var(--accent);
  --color-accent-bg: var(--accent-bg);
  --color-accent-border: var(--accent-border);
  --color-green-main: var(--green-main);
  --color-green-bg: var(--green-bg);
  --color-green-border: var(--green-border);
  --color-amber-main: var(--amber-main);
  --color-amber-bg: var(--amber-bg);
  --color-amber-border: var(--amber-border);
  --color-red-main: var(--red-main);
  --color-red-bg: var(--red-bg);
  --color-red-border: var(--red-border);
  --color-grey-100: var(--grey-100);
  --color-grey-200: var(--grey-200);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-5: var(--shadow-5);
  --color-muted: var(--muted);
  --color-purple-light: var(--purple-light);
  --color-purple-1500: var(--purple-100);
}
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
:root {
  --primary: yellow;
  --color-primary: var(--primary);
  --danger: #000;
  --font-serif: "Plus Jakarta Sans", sans-serif;
  --font-sans: "Plus Jakarta Sans", sans-serif;
  --font-mono: "Plus Jakarta Sans", sans-serif;
  --bg: #f7f7f5;
  --border: #e8e8e4;
  --border-strong: #d4d4ce;
  --text1: #101010;
  --text2: #61748f;
  --text3: #8d9eb5;
  --text4: #c8c8c2;
  --ink: #1a1a18;
  --accent: #0a5fff;
  --accent-bg: #eef4ff;
  --accent-border: #c0d5ff;
  --green-main: #0d7a4e;
  --green-bg: #edfaf3;
  --green-border: #bae6cf;
  --amber-main: #b45309;
  --amber-bg: #fffbeb;
  --amber-border: #fcd34d;
  --red-main: #c0392b;
  --red-bg: #fef2f2;
  --red-border: #fecaca;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --grey-100: #f2f4f9;
  --grey-200: #f3f3f3;
  --sidebar-open-w: 240px;
  --sidebar-closed-w: 69px;
  --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --muted: #8d9eb5;
  --purple-light: #3b497e;
  --purple-100: #abb8e6 !important;
  --shadow-5: 0 0px 0px 1px rgba(255, 255, 255, 0.05);
}
body, h1, h2, h3, h4, h5, h6, p {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}
#sidebar {
  width: var(--sidebar-open-w);
  min-width: var(--sidebar-open-w);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: width var(--transition), min-width var(--transition);
  position: relative;
  z-index: 40;
  flex-shrink: 0;
}
#sidebar.collapsed {
  width: var(--sidebar-closed-w);
  min-width: var(--sidebar-closed-w);
}
#sidebar.collapsed .head-logo-right {
  display: none;
}
#sidebar.collapsed .sidebar-link-text {
  display: none;
  transition: 0.5s all linear;
}
#sidebar.collapsed .sidebar-links-wrapper, #sidebar.collapsed .sideba-header {
  padding-left: 14px !important;
  padding-right: 14px !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#sidebar.collapsed .sidebar-links-wrapper::-webkit-scrollbar, #sidebar.collapsed .sideba-header::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
#sidebar.collapsed #toggleBtn .hamburger {
  opacity: 0 !important;
  transition: 0.3s all linear;
}
#sidebar.collapsed #toggleBtn .cancel-icon {
  opacity: 1 !important;
  transition: 0.3s all linear;
}
@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-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-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  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: 0px;
}
@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-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@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-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-tracking: 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-content: "";
    }
  }
}