#sidebar {
  --shcl-sidebar-bg: #fafaf9;
  --shcl-sidebar-text: #171918;
  --shcl-sidebar-muted: #6b706d;
  --shcl-sidebar-border: #e5e7e5;
  --shcl-sidebar-hover: #f1f2f1;
  --shcl-sidebar-active: #eceeed;
  --shcl-sidebar-accent: #5a11fd;
  --shcl-sidebar-accent-rgb: 90, 17, 253;
  --shcl-sidebar-accent-strong: #3a0ca3;
  --shcl-sidebar-on-accent: #ffffff;
  --shcl-sidebar-plan-muted: rgba(255, 255, 255, 0.74);
  --shcl-sidebar-plan-cta-bg: rgba(255, 255, 255, 0.14);
  --shcl-sidebar-plan-cta-hover: rgba(255, 255, 255, 0.22);
  --shcl-sidebar-plan-cta-border: rgba(255, 255, 255, 0.16);
  --shcl-sidebar-plan-border: rgba(58, 12, 163, 0.24);

  border-color: var(--shcl-sidebar-border) !important;
  background-color: var(--shcl-sidebar-bg) !important;
  color: var(--shcl-sidebar-text) !important;
}

#sidebar .border-indigo-400,
#sidebar .border-indigo-400\/30,
#sidebar .border-indigo-600 {
  border-color: var(--shcl-sidebar-border) !important;
}

#sidebar a[data-nav],
#sidebar a.sidebar-signup,
#sidebar #logoutLink,
#sidebar #billingPortalLink,
#sidebar .text-white,
#sidebar .text-slate-50 {
  color: var(--shcl-sidebar-text) !important;
}

#sidebar .text-indigo-100,
#sidebar .text-indigo-200 {
  color: var(--shcl-sidebar-muted) !important;
}

#sidebar a[data-nav]:hover,
#sidebar a.sidebar-signup:hover,
#sidebar #logoutLink:hover,
#sidebar #billingPortalLink:hover {
  background-color: var(--shcl-sidebar-hover) !important;
}

#sidebar a[data-nav].bg-indigo-600\/60 {
  background-color: var(--shcl-sidebar-active) !important;
  box-shadow: none;
}

#sidebar a[data-nav] > .bg-indigo-600,
#sidebar a.sidebar-signup > .bg-indigo-600,
#sidebar #logoutLink > .bg-indigo-600,
#sidebar #billingPortalLink > .bg-indigo-600 {
  border: 1px solid transparent;
  background-color: transparent !important;
  color: var(--shcl-sidebar-muted) !important;
  box-shadow: none;
  filter: grayscale(1) saturate(0);
  opacity: 0.78;
}

#sidebar a[data-nav]:hover > .bg-indigo-600,
#sidebar a.sidebar-signup:hover > .bg-indigo-600,
#sidebar #logoutLink:hover > .bg-indigo-600,
#sidebar #billingPortalLink:hover > .bg-indigo-600 {
  background-color: #e7e9e7 !important;
  filter: grayscale(0.35) saturate(0.65);
  opacity: 1;
}

#sidebar a[data-nav].bg-indigo-600\/60 > .bg-indigo-600 {
  border-color: transparent;
  background-color: var(--shcl-sidebar-accent) !important;
  color: var(--shcl-sidebar-on-accent) !important;
  box-shadow: 0 6px 16px rgba(var(--shcl-sidebar-accent-rgb), 0.24);
  filter: none;
  opacity: 1;
}

#sidebar #closeSidebarBtn {
  border-color: var(--shcl-sidebar-border) !important;
  background-color: #ffffff !important;
  color: var(--shcl-sidebar-text) !important;
}

#sidebar #closeSidebarBtn:hover {
  background-color: var(--shcl-sidebar-hover) !important;
}

#sidebar #widget_subscription .shcl-sidebar-plan-card {
  border: 1px solid var(--shcl-sidebar-plan-border);
  background: linear-gradient(135deg, var(--shcl-sidebar-accent), var(--shcl-sidebar-accent-strong)) !important;
  color: var(--shcl-sidebar-on-accent) !important;
  box-shadow: 0 12px 26px rgba(17, 19, 24, 0.14) !important;
}

#sidebar #widget_subscription .shcl-sidebar-plan-card .text-white {
  color: var(--shcl-sidebar-on-accent) !important;
}

#sidebar #widget_subscription .shcl-sidebar-plan-card .text-indigo-200 {
  color: var(--shcl-sidebar-plan-muted) !important;
}

#sidebar #widget_subscription .shcl-sidebar-plan-card .bg-white\/10.blur-2xl {
  background-color: rgba(255, 255, 255, 0.18) !important;
}

#sidebar #widget_subscription .shcl-sidebar-plan-card a {
  border: 1px solid var(--shcl-sidebar-plan-cta-border) !important;
  background-color: var(--shcl-sidebar-plan-cta-bg) !important;
  color: var(--shcl-sidebar-on-accent) !important;
}

#sidebar #widget_subscription .shcl-sidebar-plan-card a:hover {
  background-color: var(--shcl-sidebar-plan-cta-hover) !important;
}