/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
/**
 * Dashboard Helpers Index
 * Re-exports all utility functions, mixins, and variables
 * These files contain only mixins/functions/variables (no CSS output)
 */
/* This function creates the literal classes which at this point are being saved in the html tag as global css variables
   This allows me to use .fs-1 to set the first font-size in the scale, 0 will give the base font size
   The parameter is how many steps above required */
/* Generate the class for each full step */
.fs--2 {
  font-size: var(--fs--2);
}

/* If not the last index, generate the class for each half step */
/* Convert 1.5 to 15 */
.fs--15 {
  font-size: var(--fs--15);
}

/* Generate the class for each full step */
.fs--1 {
  font-size: var(--fs--1);
}

/* If not the last index, generate the class for each half step */
/* Convert 1.5 to 15 */
.fs--5 {
  font-size: var(--fs--5);
}

/* Generate the class for each full step */
.fs-0 {
  font-size: var(--fs-0);
}

/* If not the last index, generate the class for each half step */
/* Convert 1.5 to 15 */
.fs-5 {
  font-size: var(--fs-5);
}

/* Generate the class for each full step */
.fs-1 {
  font-size: var(--fs-1);
}

/* If not the last index, generate the class for each half step */
/* Convert 1.5 to 15 */
.fs-15 {
  font-size: var(--fs-15);
}

/* Generate the class for each full step */
.fs-2 {
  font-size: var(--fs-2);
}

/* If not the last index, generate the class for each half step */
/* Convert 1.5 to 15 */
.fs-25 {
  font-size: var(--fs-25);
}

/* Generate the class for each full step */
.fs-3 {
  font-size: var(--fs-3);
}

/* If not the last index, generate the class for each half step */
/* Convert 1.5 to 15 */
.fs-35 {
  font-size: var(--fs-35);
}

/* Generate the class for each full step */
.fs-4 {
  font-size: var(--fs-4);
}

/* If not the last index, generate the class for each half step */
/* Convert 1.5 to 15 */
.fs-45 {
  font-size: var(--fs-45);
}

/* Generate the class for each full step */
.fs-5 {
  font-size: var(--fs-5);
}

/* If not the last index, generate the class for each half step */
/* Convert 1.5 to 15 */
.fs-55 {
  font-size: var(--fs-55);
}

/* Generate the class for each full step */
.fs-6 {
  font-size: var(--fs-6);
}

/* If not the last index, generate the class for each half step */
/* Convert 1.5 to 15 */
.fs-65 {
  font-size: var(--fs-65);
}

/* Generate the class for each full step */
.fs-7 {
  font-size: var(--fs-7);
}

/* If not the last index, generate the class for each half step */
/* Convert 1.5 to 15 */
.fs-75 {
  font-size: var(--fs-75);
}

/* Generate the class for each full step */
.fs-8 {
  font-size: var(--fs-8);
}

/* If not the last index, generate the class for each half step */
/* Convert 1.5 to 15 */
.fs-85 {
  font-size: var(--fs-85);
}

/* Generate the class for each full step */
.fs-9 {
  font-size: var(--fs-9);
}

/* If not the last index, generate the class for each half step */
/* Convert 1.5 to 15 */
.fs-95 {
  font-size: var(--fs-95);
}

/* Generate the class for each full step */
.fs-10 {
  font-size: var(--fs-10);
}

/* If not the last index, generate the class for each half step */
/* This function is used to call the css variable in the html tag by a given step; */
/* Grid Multiples; */
/* Export the functions */
/* @forward 'scale.scss' show fs, gr; */
/* Containers */
/* Bounced down scale font sizes */
:root {
  --pm-primary: #132273;
  --pm-yellow: #ffda52;
  --pm-sky-blue: #44CEFF;
  --pm-brand-blue: #44CEFF;
  --pm-sky-blue-light: #b3f2ff;
  --pm-primary-blue: #132273;
  --pm-primary-brighter: #263BAB;
  --pm-primary-bright: #004FFA;
  --pm-canvas-yellow: #F1F6F7;
  --pm-dark-blue: #0f172a;
  /* Fonts */
  --roboto: "Roboto", sans-serif;
  --open-sans: "Open Sans", sans-serif;
  --figtree: "Figtree", serif;
  --font-primary: var(--figtree);
  --font-heading: var(--figtree);
  --primary-font-color: var(--shade-5);
  --base-font-weight: 400;
  --cardBorderRadius: 8px;
  --cardShadowLarge: 0 30px 60px -12px rgba(50,50,93,0.2), 0 18px 36px -18px rgba(0,0,0,0.25);
  --cardShadowLargeInset: inset 0 30px 60px -12px rgba(50,50,93,0.2), inset 0 18px 36px -18px rgba(0,0,0,0.25);
  --cardShadowLargeMargin: 32px;
  --cardShadowMedium: 0 13px 27px -5px rgba(50,50,93,0.2), 0 8px 16px -8px rgba(0,0,0,0.25);
  --cardShadowMediumMargin: 16px;
  --cardShadowSmall: 0 6px 12px -2px rgba(50,50,93,0.2), 0 3px 7px -3px rgba(0,0,0,0.25);
  --cardShadowSmallMargin: 8px;
  --cardShadowXLarge: 0 50px 100px -20px rgba(50,50,93,0.2), 0 30px 60px -30px rgba(0,0,0,0.25);
  --cardShadowXLargeMargin: 48px;
  --cardShadowXSMallMargin: 2px;
  --cardShadowXSmall: 0 2px 5px -1px rgba(50,50,93,0.2), 0 1px 3px -1px rgba(0,0,0,0.25);
  --btn-light-blue-bg: var(--pm-sky-blue);
  --btn-light-blue-text: white;
  --btn-light-blue-border: var(--pm-sky-blue);
  --btn-light-blue-bg_h: #6cd8ff;
  --btn-light-blue-text_h: white;
  --btn-light-blue-border_h: #6cd8ff;
  --btn-light-blue-bg_h_a: var(--pm-yellow);
  --btn-light-blue-text_h_a: white;
  --btn-light-blue-border_h_a: var(--pm-yellow);
}

.yellow {
  color: var(--pm-yellow);
}

.brand-blue {
  color: var(--pm-brand-blue);
}

:root {
  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;
  --rose-200: #fecdd3;
  --rose-300: #fda4af;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;
  --rose-700: #be123c;
  --rose-800: #9f1239;
  --rose-900: #881337;
  --rose-950: #4c0519;
  --pink-50: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;
  --pink-950: #500724;
  --fuchsia-50: #fdf4ff;
  --fuchsia-100: #fae8ff;
  --fuchsia-200: #f5d0fe;
  --fuchsia-300: #f0abfc;
  --fuchsia-400: #e879f9;
  --fuchsia-500: #d946ef;
  --fuchsia-600: #c026d3;
  --fuchsia-700: #a21caf;
  --fuchsia-800: #86198f;
  --fuchsia-900: #701a75;
  --fuchsia-950: #4a044e;
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --purple-800: #6b21a8;
  --purple-900: #581c87;
  --purple-950: #3b0764;
  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;
  --violet-950: #2e1065;
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  --indigo-950: #1e1b4b;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;
  --sky-950: #082f49;
  --cyan-50: #ecfeff;
  --cyan-100: #cffafe;
  --cyan-200: #a5f3fc;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-700: #0e7490;
  --cyan-800: #155e75;
  --cyan-900: #164e63;
  --cyan-950: #083344;
  --teal-50: #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #134e4a;
  --teal-950: #042f2e;
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;
  --emerald-950: #022c22;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --green-950: #052e16;
  --lime-50: #f7fee7;
  --lime-100: #ecfccb;
  --lime-200: #d9f99d;
  --lime-300: #bef264;
  --lime-400: #a3e635;
  --lime-500: #84cc16;
  --lime-600: #65a30d;
  --lime-700: #4d7c0f;
  --lime-800: #3f6212;
  --lime-900: #365314;
  --lime-950: #1a2e05;
  --yellow-50: #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;
  --yellow-900: #713f12;
  --yellow-950: #422006;
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;
  --amber-950: #451a03;
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
  --orange-950: #431407;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;
  --red-950: #450a0a;
  --stone-50: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524;
  --stone-900: #1c1917;
  --stone-950: #0c0a09;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;
}

/* ============================================================================
   2. BASE/FOUNDATION - Core styles that depend on helpers
   ============================================================================ */
/*  @use '../env/dashboard/base' as base; */
/* =============================================================================
   Base Typography
   ============================================================================= */
html {
  font-size: var(--fs-0);
  /* font-family: $font-primary; */
  line-height: var(--lh);
  /* * { */
  color: var(--primary-font-color);
  font-weight: var(--base-font-weight);
  line-height: var(--gr-1);
  box-sizing: content-box;
  font-size: var(--fs-0);
  line-height: var(--gr-0);
  /* } */
}

/* =============================================================================
   Typography
   ============================================================================= */
h1 {
  font-size: var(--fs-5);
  line-height: var(--gr-5);
  margin: 0;
}

h2 {
  font-size: var(--fs-4);
  line-height: var(--gr-4);
  margin: 0;
}

h3 {
  font-size: var(--fs-3);
  line-height: var(--gr-3);
  margin: 0;
}

h4 {
  font-size: var(--fs-2);
  line-height: var(--gr-2);
  margin: 0;
}

h5 {
  font-size: var(--fs-1);
  line-height: var(--gr-1);
  margin: 0;
}

h6 {
  font-size: var(--fs-0);
  line-height: var(--gr-1);
  margin: 0;
}

p {
  font-size: var(--fs-0);
  line-height: var(--gr-0);
  margin: 0;
}

/* =============================================================================
   Typography
   ============================================================================= */
/* ============================================================================
   3. THEME VARIABLES - Light theme first, dark overrides after
   ============================================================================ */
html.env-dashboard.light {
  --base-50: #fff;
  /* Knockout Color, Grid Subcard Background, Card Background */
  --base-100: #f6f9fc;
  /* Background, Input Background, Subcard Background */
  --base-150: #e7ecf1;
  /* Checkbox Input Background */
  --base-200: #dce6ee;
  /* Inline Code Background */
  --base-250: #e3e7ec;
  /* Stripe Accent Light */
  --base-300: #cfd7df;
  /* Button Disabled Color, Bullet Color */
  --base-350: #cbd6e0;
  /* Card Border Color */
  --base-400: #c4ccd8;
  /* Social Logo Color */
  --base-450: #a6b2c1;
  --base-500: #8898aa;
  /* Knockout Disabled Color */
  --base-550: #707f98;
  /* Disclaimer Text Color */
  --base-600: #727f96;
  /* Input Placeholder Color */
  --base-650: #425466;
  /* Text Color (Primary Text) */
  --base-700: #3f4b66;
  /* Form Field Description Text Color */
  --base-800: #8c9eb1;
  /* Annotation Color, Table Icon Color */
  --base-850: #4d5b78;
  /* Footnote Text Color */
  --base-900: #2c3a57;
  /* Inline Code Text Color */
  --base-1000: #0a2540;
  /* Title Color, Link Hover Color, Button Hover, Nav Color, Footer Color */
  --accent-50: rgba(66, 71, 112, 0.06);
  /* Guide Solid Color */
  --accent-100: rgba(66, 71, 112, 0.09);
  /* Guide Dashed Color */
  --accent-200: rgba(0, 0, 0, 0.4);
  /* Mask Fade Color */
  --accent-300: #ff5996;
  /* Input Error Accent Color */
  --primary-500: #0a2540;
  /* Primary Color used in Titles, Links, Buttons, Nav */
  --nav-hover-opacity: 0.6;
  /* Navigation Hover Opacity */
  --button-disabled-opacity: 0.7;
  /* Button Disabled Opacity */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;
  --tippy-text: white;
  --tippy-bg: #2962ff;
  --pm-primary-blue: #132273;
  --pm-primary-brighter: #263BAB;
  --pm-primary-bright: #004FFA;
  --pm-light-blue: #72FFFF;
  --pm-sky-blue: #00C6FE;
  --pm-yellow: #ffda52;
  --pm-danger: #ff333d;
  --pm-success: #00ff99;
  --cube-btn-bg: white;
  --cube-btn-border: var(--base-300);
  --cube-btn-border-width: 1px;
  --cube-btn-text: var(--base-600);
  --cube-btn-icon: var(--base-600);
  --cube-btn-bg_h: var(--pm-sky-blue);
  --cube-btn-border_h: var(--pm-sky-blue);
  --cube-btn-text_h: white;
  --cube-btn-icon_h: white;
  --cube-btn-bg_h_a: var(--base-100);
  --cube-btn-border_h_a: var(--base-300);
  --cube-btn-text_h_a: white;
  --cube-btn-icon_h_a: white;
  --pm-primary-blue: #132273;
  --pm-primary-brighter: #263BAB;
  --pm-primary-bright: #004FFA;
  --pm-light-blue: #72FFFF;
  --pm-sky-blue: #00C6FE;
  --pm-yellow: #ffda52;
  --hoverTransition: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
  --cardBorderRadius: 8px;
  --cardShadowLarge: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
  --cardShadowLargeInset: inset 0 30px 60px -12px rgba(50, 50, 93, 0.25), inset 0 18px 36px -18px rgba(0, 0, 0, 0.3);
  --cardShadowLargeMargin: 32px;
  --cardShadowMedium: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
  --cardShadowMediumMargin: 16px;
  --cardShadowSmall: 0 6px 12px -2px rgba(50, 50, 93, 0.25), 0 3px 7px -3px rgba(0, 0, 0, 0.3);
  --cardShadowSmallMargin: 8px;
  --cardShadowXLarge: 0 50px 100px -20px rgba(50, 50, 93, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.3);
  --cardShadowXLargeMargin: 48px;
  --cardShadowXSMallMargin: 2px;
  --cardShadowXSmall: 0 2px 5px -1px rgba(50, 50, 93, 0.25), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
  --filterShadowMedium: 0px 3px 11.5px -3.5px rgba(50, 50, 93, 0.25), 0px 3.8px 7.5px -3.7px rgba(0, 0, 0, 0.1);
  --listIconColor: var(--base-500);
  --listIconColor_h: var(--pm-sky-blue);
  --listTextColor: var(--base-650);
  --listTextColor_h: var(--pm-sky-blue);
  --button_primary_bg: var(--pm-primary-blue);
  --button_primary_border: var(--pm-primary-blue);
  --button_primary_text: var(--base-50);
  --button_primary_bg_h: var(--pm-primary-brighter);
  --button_primary_border_h: var(--pm-primary-brighter);
  --button_primary_text_h: var(--base-50);
  --button_primary_bg_h_a: var(--pm-primary-brighter);
  --button_primary_border_h_a: var(--pm-primary-brighter);
  --button_primary_text_h_a: var(--base-50);
  --btn-primary-bg: var(--pm-primary-blue);
  --btn-primary-border: var(--pm-primary-blue);
  --btn-primary-text: var(--base-50);
  --btn-primary-icon: var(--base-50);
  --btn-primary-bg_h: var(--pm-primary-brighter);
  --btn-primary-border_h: var(--pm-primary-brighter);
  --btn-primary-text_h: var(--base-50);
  --btn-primary-bg_h_a: var(--pm-primary-brighter);
  --btn-primary-border_h_a: var(--pm-primary-brighter);
  --btn-primary-text_h_a: var(--base-50);
  --MpdCardBG: var(--base-50);
  --MpdCardBorder: transparent;
  --CardHeaderBG: var(--base-700);
  --CardHeaderBorder: var(--base-500);
  --CardHeaderTitle: var(--base-900);
  --CardHeaderSubtitle: var(--base-600);
  --CardHeaderText: var(--base-500);
  --CardText: var(--base-500);
  --cardTitleDivider: var(--base-100);
  --MenuListBG: white;
  --MenuDropdownBG: transparent;
  --MenuDropdownItemBG: white;
  --MenuDropdownItemText: var(--base-650);
  --MenuDropdownItemIcon: var(--base-600);
  --MenuDropdownItemBG_h: var(--slate-gray-50);
  --MenuDropdownItemText_h: var(--blue-500);
  --MenuDropdownItemIcon_h: var(--blue-500);
  --sec-primary__content__bg: #ECEEF0;
  --cardBG: var(--base-50);
  --cardShadowPrimary: var(--filterShadowMedium);
  --cardShadowTwo: 0 12.6px 25.2px -11.5733px rgba(50, 50, 93, .25), 0 7.56px 15.12px -7.56px rgba(0, 0, 0, .1);
  --cardBorder: var(--base-50);
  --sidebarBG: var(--base-50);
  /* Sidebar background */
  --sidebarBorder: var(--base-50);
  /* Sidebar border */
  --sidebarTextColor: var(--base-650);
  /* Sidebar text color */
  --sidebarCloseIcon: var(--base-650);
  /* Sidebar close icon color */
  --dashNavMenuBtnIconColor: var(--base-300);
  /* Menu button icon color */
  --sec-dash-navigation__bg: var(--base-50);
  /* Sidebar navigation background */
  --sec-dash-navigation-divider__bg: var(--base-200);
  /* Divider background */
  --AdditionalLinksText: var(--base-800);
  /* Links text color */
  --AdditionalLinksText_h: var(--pm-primary-blue);
  /* Links hover color */
  --CopyrightText: var(--base-500);
  /* Copyright text color */
  --CopyrightSmallText: var(--base-550);
  /* Copyright small text color */
  --CopyrightLink: var(--pm-primary-blue);
  /* Copyright link color */
  --CopyrightLink_h: var(--pm-sky-blue);
  /* Copyright link hover color */
  --mnu-btn__bg: transparent;
  /* Menu button background */
  --mnu-btn__icon: var(--base-600);
  /* Menu button icon color */
  --mnu-btn__label: var(--base-650);
  /* Menu button label color */
  --mnu-btn_A__bg: var(--base-50);
  /* Active button background */
  --mnu-btn_A__border: var(--pm-sky-blue);
  /* Active button border */
  --mnu-btn_A__icon: var(--pm-sky-blue);
  /* Active button icon color */
  --mnu-btn_A__label: var(--pm-primary-brighter);
  /* Active button label color */
  --mnu-btn_A_H__bg: var(--base-50);
  /* Active button background */
  --mnu-btn_A_H__border: var(--pm-sky-blue);
  /* Active button border */
  --mnu-btn_A_H__icon: var(--pm-sky-blue);
  /* Active button icon color */
  --mnu-btn_A_H__label: var(--pm-primary-blue);
  /* Active button label color */
  --mnu-btn_H__bg: var(--base-100);
  --mnu-btn_H__border: var(--base-500);
  /* Hover border color */
  --mnu-btn_H__color: var(--pm-primary-brighter);
  /* Hover color */
  --mnu-btn_H__icon: var(--pm-sky-blue);
  /* Hover icon color */
  --mnu-btn_H__label: var(--pm-primary-blue);
  /* Hover label color */
  --mnu-btn_H_A__bg: transparent;
  --mnu-btn_H_A__border: var(--pm-primary-blue);
  /* Hover border color */
  --mnu-btn_H_A__color: var(--base-400);
  /* Hover color */
  --mnu-btn_H_A__icon: var(--pm-primary-blue);
  /* Hover icon color */
  --mnu-btn_H_A__label: var(--pm-primary-blue);
  /* Hover label color */
  --mnu-toggle-label: var(--base-500);
  --mnu-toggle-btn__icon: var(--base-600);
  --mnu-toggle-btn__icon_h: var(--pm-sky-blue);
  --mnu-toggle-btn__icon_h_a: var(--pm-primary-brighter);
  --mnu-toggle-btn__icon_bg: transparent;
  --mnu-toggle-btn__icon_bg_h: var(--base-100);
  --mnu-toggle-btn__icon_bg_h_a: var(--base-50);
  --divider__bg: var(--base-400);
  /* Divider background */
  --divider__bg_dark: var(--base-1000);
  /* Dark divider background */
  --sec-mobile-bg-container: var(--base-100);
  /* Mobile background color */
  --sec-header__bg: var(--base-50);
  /* Header background */
  --sec-header__bottom_border: var(--base-400);
  /* Header bottom border */
  --sec-header-mobile-bg: var(--base-50);
  /* Mobile header background */
  --sec-header-mobile-border-bottom: var(--base-400);
  /* Mobile header border */
  --sec-header-mobile-page-title: var(--base-400);
  /* Mobile header title */
  --sec-mobile-hamburger-icon: var(--base-500);
  /* Mobile hamburger icon color */
  --sec-mobile-account-button-bg: var(--base-50);
  --sec-mobile-account-button-bg_h: var(--base-100);
  --sec-mobile-account-button-text: var(--base-600);
  --sec-mobile-account-button-text_h: var(--pm-primary-blue);
  --sec-mobile-flyout-menu-bg: var(--base-50);
  /* Dark background for contrast */
  --sec-mobile-flyout-menu-border: var(--base-100);
  /* Darker border for clear separation */
  --sec-mobile-flyout-menu-text: var(--base-50);
  /* Light text for readability */
  --sec-mobile-flyout-menu-icon: var(--base-50);
  /* Light icon for visibility */
  --sec-mobile-flyout-menu-icon_h: var(--pm-primary-blue);
  /* Highlighted icon for hover state */
  --sec-mobile-flyout-menu-divider: var(--base-200);
  --sec-mobile-flyout-menu-link-text: var(--base-600);
  --sec-mobile-flyout-menu-link-text_h: var(--pm-primary-blue);
  --sec-mobile-flyout-menu-close-button-line-color: var(--base-500);
  --sec-mobile-flyout-menu-item-bg: var(--base-50);
  --sec-mobile-flyout-menu-item-text: var(--base-600);
  --sec-mobile-flyout-menu-item-icon: var(--pm-primary-blue);
  --sec-mobile-flyout-menu-item-text_h: var(--pm-primary-blue);
  --sec-mobile-flyout-menu-item-bg_h: var(--base-100);
  --sec-mobile-flyout-menu-item-icon_h: var(--pm-primary-blue);
  --sec-mobile-flyout-menu-item-bg_a: var(--base-100);
  --sec-mobile-flyout-menu-item-text_a: var(--pm-primary-blue);
  --sec-mobile-flyout-menu-item-icon_a: var(--pm-primary-blue);
  --secThemeSwitcher_bg: transparent;
  --secThemeSwitcher_bg_h: transparent;
  /* Theme switcher hover background */
  --secThemeSwitcherBtn_icon: var(--base-600);
  /* Theme switcher icon */
  --secThemeSwitcherBtn_icon_h: var(--pm-primary-blue);
  /* Theme switcher hover icon */
  --sec-page-title-title: var(--pm-primary-brighter);
  /* Primary page title */
  --sec-page-title-subtitle: var(--base-500);
  /* Primary page subtitle */
  --sec-page-title-back-btn-icon: var(--pm-primary-bright);
  /* Back button icon */
  --sec-page-title-back-btn-icon_h: var(--pm-sky-blue);
  /* Back button hover icon */
  --section-card__title: var(--pm-primary);
  /* Card title */
  --section-card__bg: var(--base-50);
  /* Card background */
  --section-card__text: var(--base-600);
  /* Card text */
  --section-card__icon: var(--pm-sky-blue);
  --section-card__input__bg: initial;
  /* Input background */
  --section-card__input__border: var(--base-350);
  /* Input border */
  --section-card__input__text: var(--base-500);
  /* Input text */
  --section-card__input__placeholder: var(--base-600);
  /* Input placeholder */
  --section-card__input__bg_a: initial;
  --section-card__input__border_a: var(--pm-primary-blue);
  /* Active input border */
  --section-card__input__placeholder_a: var(--base-600);
  /* Active input placeholder */
  --section-card-meta-link-btn_BG: transparent;
  --section-card-meta-link-btn_text: var(--base-400);
  /* Meta link button text */
  --section-card-meta-link-btn_text_h: var(--pm-primary-blue);
  /* Meta link button hover */
  --ProfileContainerBG: var(--base-50);
  /* Profile container background */
  --ProfileNavContainerBG: transparent;
  --ProfilePanelFormLabel: var(--base-500);
  /* Profile form label */
  --ProfilePanelFormInput: var(--base-500);
  /* Profile form input */
  --ProfilePanelFormInputBG: var(--base-700);
  /* Form input background */
  --ProfilePanelFormInputBorder: var(--base-350);
  /* Form input border */
  --ProfilePanelFormInputBorder_h: var(--pm-primary-blue);
  /* Form input hover border */
  --ProfilePanelFormInputBorder_a: var(--pm-primary-blue);
  /* Active form input border */
  --SessionMetaItemsBG: var(--base-50);
  /* Session meta items background */
  --SessionMetaItemColor: var(--base-650);
  /* Session meta item text */
  --SessionMetaItemStrongLabel: var(--base-400);
  /* Strong label text */
  --SessionMetaItemIcon: var(--base-400);
  /* Session meta item icon */
  --SessionHeaderStatsBG: var(--base-50);
  /* Session header background */
  --SessionHeaderStatsBorder: var(--base-400);
  /* Session header border */
  --SessionPercDoughnutTrackBG: var(--base-400);
  /* Doughnut chart background */
  --SessionPercDoughnutTrackCorrectBG: var(--pm-primary-blue);
  /* Correct track background */
  --SessionPercDoughnutTrackIncorrectBG: var(--pm-yellow);
  /* Incorrect track background */
  --SessionFloatingProgressBarBG: var(--base-50);
  /* Floating progress bar background */
  --ActiveQuestionQuestionBG: var(--base-100);
  /* Active question background */
  --ActiveQuestionQuestionText: #001794;
  --ActiveQuestionQuestionBorder: var(--base-200);
  /* Active question border */
  --ActiveQuestionExplanationLabel: var(--base-500);
  /* Explanation label */
  --ActiveQuestionExplanationBG: var(--blue-100);
  /* Explanation background */
  --ActiveQuestionExplanationText: #001794;
  --ActiveQuestionExplanationBorder: var(--base-200);
  /* Explanation border */
  --ActiveQuestionLearnModeLabel: var(--base-400);
  --ActiveQuestionLearnModeIcon: var(--pm-sky-blue);
  /* Learn mode label */
  --ActiveQuestionLearnModeInfoIcon: var(--pm-primary-bright);
  /* Learn mode info icon */
  --SessionStat_bg: var(--base-50);
  /* Metric box background */
  --SessionStat_icon: var(--pm-primary-bright);
  /* Metric box icon */
  --SessionStat_text_pri: var(--blue-900);
  /* Metric primary text */
  --SessionStat_text_sec: var(--base-600);
  /* Metric secondary text */
  --SessionSummaryCardBG: var(--base-50);
  --SessionSummaryCardBorder: var(--base-350);
  --SessionSummaryCardTitle: var(--base-700);
  --SessionSummaryCardSubtitle: var(--base-500);
  --SessionSummaryCardIcon: var(--base-500);
  --SessionCardTitle: var(--pm-primary-brighter);
  --SessionCardMetricBG: var(--base-50);
  /* Card metric background */
  --SessionCardMetricBorder: var(--base-300);
  /* Card metric border */
  --SessionCardMetricIcon: var(--pm-sky-blue);
  /* Card metric icon */
  --SessionCardMetricValue: var(--base-650);
  /* Card metric value */
  --SessionCardMetricLabel: var(--base-500);
  /* Card metric label */
  --SessionCardMetricCategoryLabels: var(--base-500);
  /* Metric category labels */
  --SessionCardMetricRevealText: var(--pm-primary);
  /* Metric reveal text */
  --SessionCategoriesCardBG: var(--base-50);
  --QuestionOptionBg: transparent;
  --QuestionOptionBlockBg: transparent;
  --QuestionOptionText: var(--base-850);
  /* Option text */
  --QuestionOptionIconBG: var(--base-100);
  /* Option icon background */
  --QuestionOptionIconColor: var(--base-650);
  /* Option icon color */
  --QuestionOptionQuestionText: var(--base-400);
  /* Question text */
  --QuestionOptionQuestionBG: var(--base-50);
  /* Question background */
  --QuestionOptionSecQuestionBorder: var(--base-200);
  /* Question border */
  --QuestionOptionQuestionStatsProgressBarColor: var(--pm-sky-blue);
  /* Progress bar color */
  --QuestionOptionQuestionStatsTextColor: var(--base-850);
  /* Progress bar text color */
  --QuestionOption_h_Bg: transparent;
  --QuestionOption_h_BlockBg: transparent;
  --QuestionOption_h_QuestionBG: var(--blue-500);
  /* Hover question background */
  --QuestionOption_h_QuestionBorder: var(--blue-500);
  /* Hover question border */
  --QuestionOption_h_Text: var(--base-50);
  /* Hover text */
  --QuestionOption_h_IconBG: var(--blue-400);
  /* Hover icon background */
  --QuestionOption_h_IconColor: var(--pm-yellow);
  /* Hover icon color */
  --QuestionOption_h_QuestionText: var(--base-50);
  /* Hover question text */
  --QuestionOptionQuestionStatsProgressBarColor_h: var(--blue-200);
  /* Progress bar color */
  --QuestionOptionQuestionStatsTextColor_h: var(--base-50);
  /* Progress bar text color */
  --QuestionOption_h_a_Bg: transparent;
  --QuestionOption_h_a_BlockBg: transparent;
  --QuestionOption_h_a_QuestionBG: var(--blue-400);
  /* Hover question background */
  --QuestionOption_h_a_QuestionBorder: var(--blue-500);
  /* Hover question border */
  --QuestionOption_h_a_Text: var(--base-50);
  /* Hover text */
  --QuestionOption_h_a_IconBG: var(--blue-400);
  /* Hover icon background */
  --QuestionOption_h_a_IconColor: var(--pm-yellow);
  /* Hover icon color */
  --QuestionOption_h_a_QuestionText: var(--base-50);
  /* Hover question text */
  --QuestionOptionQuestionStatsProgressBarColor_h_a: var(--blue-200);
  /* Progress bar color */
  --QuestionOptionQuestionStatsTextColor_h_a: var(--base-50);
  /* Progress bar text color */
  --sec-meta-menu-btn_bg: transparent;
  --sec-meta-menu-btn_icon: var(--indigo-300);
  --sec-meta-menu-btn_border: transparent;
  --sec-meta-menu-btn_H__bg: #ededed;
  --sec-meta-menu-avatar-btn-icon: white;
  --sec-meta-menu-avatar-btn-text: var(--base-650);
  --sec-meta-menu-avatar-btn_H__bg: var(--base-100);
  --sec-meta-menu-avatar-btn-icon_h: white;
  --sec-meta-menu-avatar-btn-text_h: var(--pm-primary);
  --QuestionOptionCorrectBg: transparent;
  --QuestionOptionCorrectBlockBg: transparent;
  --QuestionOptionCorrectText: var(--base-50);
  /* Correct option text */
  --QuestionOptionCorrectIconBG: var(--green-400);
  /* Correct icon background */
  --QuestionOptionCorrectIconColor: var(--base-50);
  /* Correct icon color */
  --QuestionOptionCorrectQuestionText: var(--base-50);
  /* Correct question text */
  --QuestionOptionCorrectQuestionBG: var(--green-500);
  /* Correct question background */
  --QuestionOptionCorrectQuestionStatsProgressBarColor: var(--green-100);
  --QuestionOptionCorrectQuestionStatsTextColor: white;
  --QuestionOptionIncorrectBg: transparent;
  --QuestionOptionIncorrectBlockBg: transparent;
  --QuestionOptionIncorrectText: var(--base-50);
  /* Incorrect option text */
  --QuestionOptionIncorrectIconBG: var(--rose-400);
  /* Incorrect icon background */
  --QuestionOptionIncorrectIconColor: var(--base-50);
  /* Incorrect icon color */
  --QuestionOptionIncorrectQuestionText: var(--base-50);
  /* Incorrect question text */
  --QuestionOptionIncorrectQuestionBG: var(--rose-500);
  /* Incorrect question background */
  --QuestionOptionIncorrectQuestionStatsProgressBarColor: var(--rose-100);
  --QuestionOptionIncorrectQuestionStatsTextColor: white;
  --SessionsChartText_pri: var(--pm-primary);
  /* Sessions chart primary text */
  --SessionsChartText_sec: var(--base-850);
  /* Sessions chart secondary text */
  --ProfileContainerBG: var(--base-50);
  /* Profile container background */
  --ProfileNavContainerBG: transparent;
  --ProfilePanelFormLabel: var(--base-400);
  /* Profile form label */
  --ProfilePanelFormInput: var(--base-400);
  /* Profile form input */
  --ProfilePanelFormInputBG: var(--base-700);
  /* Profile input background */
  --ProfilePanelFormInputBorder: var(--base-350);
  /* Profile input border */
  --ProfilePanelFormInputBorder_h: var(--pm-primary-blue);
  /* Hover input border */
  --ProfilePanelFormInputBorder_a: var(--pm-primary-blue);
  /* Active input border */
  --mnu-btn_A_h__bg: var(--pm-primary-blue);
  /* Active hover button background */
  --mnu-btn_A_h__border: var(--pm-primary-blue);
  /* Active hover button border */
  --mnu-btn_A_h__icon: var(--base-50);
  /* Active hover button icon */
  --mnu-btn_A_h__label: var(--base-50);
  /* Active hover button label */
  --panelHeaderBorderColor: var(--base-350);
  /* Panel header border color */
  --panelHeaderBg: var(--base-150);
  /* Panel header background */
  --panelHeaderTextColor: var(--base-650);
  /* Panel header text color */
  --panelHeaderFontWeight: 700;
  /* Panel header font weight */
  --panelHeaderPadding: 1.25rem;
  /* Panel header padding */
  --panelToggleableHeaderPaddingVertical: 0.75rem;
  /* Toggle header vertical padding */
  --panelToggleableHeaderPaddingHorizontal: 0.75rem;
  /* Toggle header horizontal padding */
  --panelHeaderHoverBg: var(--base-200);
  /* Panel header hover background */
  --panelHeaderHoverBorderColor: var(--base-350);
  /* Panel header hover border */
  --panelHeaderTextHoverColor: var(--base-650);
  /* Panel header hover text color */
  --panelContentBorderColor: var(--base-350);
  /* Panel content border */
  --panelContentBg: var(--base-50);
  /* Panel content background */
  --panelContentEvenRowBg: scale-color(var(--base-50), var(--lightness): -1%);
  /* Even row background */
  --panelContentTextColor: var(--base-650);
  /* Panel content text color */
  --panelContentPadding: 1.25rem;
  /* Panel content padding */
  --panelFooterBorder: 1px solid var(--base-350);
  /* Panel footer border */
  --panelFooterBg: var(--base-50);
  /* Panel footer background */
  --panelFooterTextColor: var(--base-650);
  /* Panel footer text color */
  --panelFooterPadding: 0.75rem 1.25rem;
  /* Panel footer padding */
  --cardBodyPadding: 1.25rem;
  /* Card body padding */
  --cardTitleFontSize: 1.5rem;
  /* Card title font size */
  --cardTitleFontWeight: 700;
  /* Card title font weight */
  --cardSubTitleFontWeight: 400;
  /* Card subtitle font weight */
  --cardSubTitleColor: var(--base-650);
  /* Card subtitle color */
  --cardContentPadding: 1.25rem 0;
  /* Card content padding */
  --cardFooterPadding: 1.25rem 0 0 0;
  /* Card footer padding */
  --cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  /* Card shadow */
  --SelectButtonBtnBg: transparent;
  --SelectButtonBtnBorder: var(--blue-100);
  /* Select button border */
  --SelectButtonBtnText: var(--base-850);
  /* Select button text */
  --SelectButtonBtnBg_h: var(--base-50);
  /* Hover select button background */
  --SelectButtonBtnBorder_h: var(--pm-primary-brighter);
  /* Hover select button border */
  --SelectButtonBtnText_h: var(--pm-primary-bright);
  /* Hover select button text */
  --SelectButtonBtnBg_a: var(--pm-primary-brighter);
  /* Active select button background */
  --SelectButtonBtnText_a: white;
  /* Active select button text */
  --SelectButtonBtnBorder_a: var(--pm-primary-brighter);
  /* Active select button border */
  --SelectButtonBtnBg_a_h: var(--pm-primary-brighter);
  /* Active select button background */
  --SelectButtonBtnText_a_h: white;
  /* Active select button text */
  --SelectButtonBtnBorder_a_h: var(--pm-primary-brighter);
  /* Active select button border */
  --QuestionOptionCorrect_h_a_Bg: transparent;
  --QuestionOptionCorrect_h_a_IconBG: var(--base-400);
  /* Correct hover icon background */
  --QuestionOptionCorrect_h_a_IconColor: var(--base-50);
  /* Correct hover icon color */
  --QuestionOptionCorrect_h_a_QuestionBG: var(--base-500);
  /* Correct hover question background */
  --QuestionOptionIncorrect_h_a_Bg: transparent;
  --QuestionOptionIncorrect_h_a_IconBG: var(--base-400);
  /* Incorrect hover icon background */
  --QuestionOptionIncorrect_h_a_IconColor: var(--base-50);
  /* Incorrect hover icon color */
  --QuestionOptionIncorrect_h_a_QuestionBG: var(--base-500);
  /* Incorrect hover question background */
  --SecLabelLabelColor: var(--base-600);
  --SessionEmptyStateBG: var(--base-50);
  --SessionEmptyStateBorder: var(--base-350);
  --SessionEmptyStateTitleColor: var(--base-1000);
  --SessionEmptyStateDescColor: var(--base-650);
  --PasswordModalBG: var(--base-50);
  --PasswordModalBorder: var(--base-350);
  --PasswordModalTitleColor: var(--base-1000);
  --PasswordModalTextColor: var(--base-650);
  --PasswordModalInputBG: var(--base-50);
  --PasswordModalInputBorder: var(--base-350);
  --PasswordModalInputText: var(--base-650);
  --PasswordModalInputFocusBorder: var(--pm-sky-blue);
  --PasswordModalRequirementText: var(--base-600);
  --PasswordModalRequirementMetColor: var(--green-600);
  --SkeletonBase: var(--base-100);
  --SkeletonChartPrimary: var(--base-200);
  --SkeletonText: var(--base-300);
  --SkeletonElement: var(--base-250);
  --CreateInfoIconColor: var(--base-400);
  --CreateInfoIconColorHover: var(--pm-sky-blue);
  --CreateSlashColor: var(--base-400);
  --CreateSelectAllButtonText: var(--base-650);
  --CreateSelectAllButtonTextHover: var(--pm-sky-blue);
  --CreateSelectAllButtonBorder: transparent;
  --CreateSelectAllButtonBorderHover: var(--pm-sky-blue);
  --ScrollbarTrackBG: var(--base-150);
  --ScrollbarThumbBG: var(--base-300);
  --ScrollbarThumbBGHover: var(--base-400);
  --ScrollbarThumbBGActive: var(--base-500);
  --ScrollbarWidth: 6px;
  --ScrollbarBorderRadius: 3px;
  /* Create page label color */
  --SecLabelIconColor: var(--pm-primary-blue);
  /* Create page icon color */
  --QuestionCountBoxColor: var(--base-650);
  --QuestionCountBoxAvailableBorder: var(--pm-sky-blue);
  /* Available question box border */
  --QuestionCountBoxAvailableBG: transparent;
  --QuestionCountBoxAvailableColor: var(--pm-sky-blue);
  /* Available question text */
  --QuestionCountBoxUnavailableBorder: var(--red-400);
  /* Unavailable question box border */
  --QuestionCountBoxUnavailableBG: transparent;
  --QuestionCountBoxUnavailableColor: var(--red-500);
  /* Unavailable question text */
  --CategoriesWidgetBG: var(--base-100);
  /* Categories widget background */
  --CatOptionBG: var(--base-50);
  /* Category option background */
  --CatOptionLabelColor: var(--base-650);
  /* Category option label color */
  --CatOptionDividerColor: var(--base-200);
  /* Category option divider color */
  --CatOptionBorderBottom: var(--base-200);
  /* Category option bottom border */
  --CatOptionDropToggleIcon: var(--base-500);
  /* Dropdown toggle icon */
  --CatOptionDropToggleBG: var(--base-50);
  /* Dropdown toggle background */
  --CatOptionMetaColor: var(--base-500);
  /* Category meta text color */
  --CatOptionMetaAttemptedColor: var(--base-600);
  /* Attempted meta color */
  --CatOptionMetaDividerColor: var(--base-400);
  /* Meta divider color */
  --CatOptionMetaTotalColor: var(--base-700);
  /* Meta total color */
  --CatOptionLabelColor_h: var(--blue-900);
  /* Category hover label color */
  --CatOptionDropToggleBG_h: var(--base-50);
  /* Dropdown toggle hover background */
  --CatOptionDropToggleIcon_h: var(--base-650);
  /* Hover toggle icon */
  --CatOptionBG_h: var(--base-50);
  /* Category hover background */
  --CatOptionDropToggleVerticalDivider: var(--base-350);
  /* Vertical divider */
  --InputBg: var(--base-650);
  --InputTextColor: var(--base-50);
  --InputTextPlaceholderColor: var(--base-100);
  --InputTextBorder: var(--base-500);
  --InputTextBorder_h: var(--pm-primary);
  --SessionLoadingText: var(--base-650);
  /* Session loading text */
  --SessionsDirectoryLoadingBG: var(--base-50);
  /* Sessions directory background */
  --SessionsDirectoryLoadingText: var(--base-600);
  /* Sessions directory loading text */
  --SessionDirecoryEntryTitleLink: var(--pm-primary-brighter);
  --SessionDirecoryEntryTitleLink_h: var(--pm-sky-blue);
  --SessionTitleDialogBG: var(--base-50);
  --SessionTitleDialogBorder: var(--base-100);
  --SessionTitleDialogText: var(--base-650);
  --SessionTitleDialogTextLabel: var(--base-650);
  --SessionTitleDialogExamTitle: var(--pm-primary-bright);
  --SessionTitleDialogTextValue: var(--base-600);
  --SessionTitleDialogSessionTypeLabel: var(--base-500);
  --SessionStat_correct_bg: var(--green-500);
  /* Correct stat background */
  --SessionStat_correct_icon: var(--green-500);
  /* Correct session icon */
  --SessionStat_correct_text_pri: var(--base-400);
  /* Correct session primary text */
  --SessionStat_correct_text_sec: var(--base-650);
  /* Correct session secondary text */
  --SessionStat_incorrect_icon: var(--red-500);
  /* Incorrect session icon */
  --SessionStat_incorrect_text_pri: var(--base-400);
  /* Incorrect session primary text */
  --SessionStat_incorrect_text_sec: var(--base-650);
  /* Incorrect session secondary text */
  --SessionStat_incorrect_bg: var(--base-50);
  /* Incorrect stat background */
  --SSQuestionsTitleText: var(--base-600);
  /* Questions title text */
  --ActiveQuestionLearnModeLabel: var(--base-600);
  /* Learn mode label */
  --ActiveQuestionExplanationBG: var(--base-100);
  /* Explanation background */
  --ActiveQuestionExplanationText: var(--pm-primary-blue);
  /* Explanation text */
  --QuestionOptionCorrect_h_a_Bg: transparent;
  --QuestionOptionCorrect_h_a_IconBG: var(--base-400);
  /* Correct hover icon background */
  --QuestionOptionCorrect_h_a_IconColor: var(--base-50);
  /* Correct hover icon color */
  --QuestionOptionCorrect_h_a_QuestionBG: var(--base-500);
  /* Correct hover question background */
  --QuestionOptionIncorrect_h_a_Bg: transparent;
  --QuestionOptionIncorrect_h_a_IconBG: var(--base-400);
  /* Incorrect hover icon background */
  --QuestionOptionIncorrect_h_a_IconColor: var(--base-50);
  /* Incorrect hover icon color */
  --QuestionOptionIncorrect_h_a_QuestionBG: var(--base-500);
  /* Incorrect hover question background */
  --SessionFloatingProgressBarBG: var(--base-50);
  /* Floating progress bar background */
  --ProfileContainerBG: var(--base-50);
  /* Profile container background */
  --ProfilePanelFormInputBG: var(--base-700);
  /* Form input background */
  --ProfilePanelFormInputBorder_h: var(--pm-primary-blue);
  /* Form input hover border */
  --SessionPercDoughnutTrackCorrectBG: var(--pm-primary-blue);
  /* Doughnut chart correct track */
  --SessionPercDoughnutTrackIncorrectBG: var(--pm-yellow);
  /* Doughnut chart incorrect track */
  --ActionCardBg: var(--base-50);
  --ActionCardBorder: var(--base-350);
  --ActionCardTitle: var(--base-700);
  --ActionCardSubtitle: var(--base-500);
  --ActionCardIcon: var(--base-500);
  --ModalBg: var(--base-50);
  --ModalTitleColor: var(--base-900);
  --ModalSubtitleColor: var(--base-500);
  --ModalTextColor: var(--base-650);
  --ChartExamProgValuesLabel: var(--base-600);
  --ChartExamProgValuesValue: var(--base-900);
  --ChartAttemptedLabel: var(--base-600);
  --ChartAttemptedPercValue: var(--base-900);
  --SkeletonBG: var(--base-100);
  --SkeletonAfterBG: linear-gradient(90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0));
  --LoadingSpinnerColor: var(--base-800);
  --LoadingSpinnerLabelColor: var(--base-650);
  --SessionTimingLabelColor: var(--base-800);
  --SessionTimingValueColor: var(--base-650);
  --SessionTimingTotalTimeValueColor: var(--base-900);
  --SessionTimingSliderTrackBG: var(--base-300);
  --SessionTimingSliderRangeBG: var(--pm-sky-blue);
  --SessionTimingSliderHandleBorder: var(--pm-sky-blue);
  --SessionTimingSliderHandleBG: var(--base-50);
  --SessionTimingHintsText: var(--base-800);
  --SessionTimingHintsIcon: var(--pm-primary-blue);
  --tableRowButtonBG: white;
  --tableRowButtonText: var(--pm-sky-blue);
  --tableRowButtonBorder: var(--pm-sky-blue);
  --tableRowButton_h_BG: var(--pm-sky-blue);
  --tableRowButton_h_Text: var(--pm-sky-blue);
  --tableRowButton_h_Border: var(--pm-sky-blue);
  --tableRowButton_h_a_BG: var(--pm-sky-blue);
  --tableRowButton_h_a_Text: var(--pm-yellow);
  --tableRowButton_h_a_Border: var(--pm-sky-blue);
  --SessionHeaderTitle: var(--pm-primary);
  --SessionHeaderMetaLabel: var(--base-650);
  --SessionHeaderMetaLabelStrong: var(--pm-primary-brighter);
  --SessionHeaderMetaIcon: var(--pm-primary-brighter);
  --btn-a-bg: var(--blue-600);
  --btn-a-border: var(--blue-600);
  --btn-a-border-width: 1px;
  --btn-a-text: var(--base-50);
  --btn-a-icon: var(--base-50);
  --btn-a-bg_h: var(--pm-sky-blue);
  --btn-a-border_h: var(--pm-sky-blue);
  --btn-a-border-width_h: 1px;
  --btn-a-text_h: var(--pm-sky-blue);
  --btn-a-icon_h: var(--base-50);
  --btn-a-bg_h_a: var(--pm-sky-blue);
  --btn-a-border_h_a: var(--pm-sky-blue);
  --btn-a-border-width_h_a: 1px;
  --btn-a-text_h_a: var(--base-50);
  --btn-a-icon_h_a: var(--base-50);
  --btn-a-bg_a: var(--pm-sky-blue);
  --btn-a-border_a: var(--pm-sky-blue);
  --btn-a-text_a: var(--base-50);
  --btn-a-icon_a: var(--base-50);
  --btn-link-bg: transparent;
  --btn-link-border: transparent;
  --btn-link-text: var(--pm-primary-brighter);
  --btn-link-bg_h: transparent;
  --btn-link-border_h: transparent;
  --btn-link-text_h: var(--pm-primary-bright);
  --btn-link-bg_a: transparent;
  --btn-link-border_a: transparent;
  --btn-link-text_a: var(--pm-primary-bright);
  --btn-primary-outline-bg: transparent;
  --btn-primary-outline-border: var(--pm-primary);
  --btn-primary-outline-text: var(--pm-primary);
  --btn-primary-outline-bg_h: var(--pm-primary-brighter);
  --btn-primary-outline-border_h: var(--pm-primary-brighter);
  --btn-primary-outline-text_h: var(--base-50);
  --btn-primary-outline-bg_a: var(--pm-primary-brighter);
  --btn-primary-outline-border_a: var(--pm-primary-brighter);
  --btn-primary-outline-text_a: var(--base-50);
  --SessionsNoQuestionsTitle: var(--base-650);
  --SessionsNoQuestionsSubtitle: var(--base-500);
  --btn-session-continue-bg: var(--pm-sky-blue);
  --btn-session-continue-border: var(--pm-sky-blue);
  --btn-session-continue-text: white;
  --btn-session-continue-icon: white;
  --btn-session-continue-bg_h: var(--blue-500);
  --btn-session-continue-border_h: var(--blue-500);
  --btn-session-continue-text_h: white;
  --btn-session-continue-icon_h: white;
  --btn-session-continue-bg_h_a: var(--pm-sky-blue);
  --btn-session-continue-border_h_a: var(--pm-sky-blue);
  --btn-session-continue-text_h_a: white;
  --btn-session-continue-icon_h_a: white;
  --NotificationEntryIconColor: var(--base-500);
  --NotificationEntryBorder: var(--base-300);
  --NotificationTitle: var(--pm-dark-blue);
  --NotificationMessage: var(--base-500);
  --NotificationMessageDate: var(--base-500);
  --NotificationEntryBtnBG: var(--base-50);
  --NotificationEntryBtnBorder: var(--base-300);
  --NotificationEntryBtnText: var(--base-650);
  --NotificationEntryBtnIcon: var(--base-650);
  --NotificationEntryBtnBG_h: var(--pm-sky-blue);
  --NotificationEntryBtnBorder_h: var(--pm-sky-blue);
  --NotificationEntryBtnText_h: var(--base-50);
  --NotificationEntryBtnIcon_h: var(--base-50);
  --NotificationEntryBtnBG_h_a: var(--pm-sky-blue);
  --NotificationEntryBtnBorder_h_a: var(--pm-sky-blue);
  --NotificationEntryBtnText_h_a: var(--base-50);
  --NotificationEntryBtnIcon_h_a: var(--base-50);
  --modalDialogBG: var(--base-50);
  --modalDialogBorder: var(--base-200);
  --modalDialogText: var(--base-650);
  --modalDialogSearchBtnBG: var(--pm-primary-brighter);
  --modalDialogSearchBtnBorder: var(--pm-primary-brighter);
  --modalDialogSearchBtnText: var(--base-50);
  --modalDialogSearchBtnIcon: var(--base-50);
  --modalDialogSearchBtnBG_h: var(--pm-primary-bright);
  --modalDialogSearchBtnBorder_h: var(--pm-primary-bright);
  --modalDialogSearchBtnText_h: var(--base-50);
  --modalDialogSearchBtnIcon_h: var(--base-50);
  --modalDialogSearchBtnBG_a: var(--pm-sky-blue);
  --modalDialogSearchBtnBorder_a: var(--pm-sky-blue);
  --modalDialogSearchBtnText_a: var(--base-50);
  --modalDialogSearchBtnIcon_a: var(--base-50);
  --SessionsFiltersPanelBG: var(--base-50);
  --SessionsFiltersPanelBorder: var(--base-200);
  --SessionsFiltersPanelText: var(--base-650);
  --SessionsFiltersFieldLabel: var(--base-600);
  --SessionsFiltersSelectButtonBG: transparent;
  --SessionsFiltersSelectButtonBorder: var(--base-300);
  --SessionsFiltersSelectButtonText: var(--base-650);
  --SessionsFiltersSelectButtonBG_h: var(--base-100);
  --SessionsFiltersSelectButtonBorder_h: var(--pm-primary-bright);
  --SessionsFiltersSelectButtonText_h: var(--pm-primary-bright);
  --SessionsFiltersSelectButtonBG_a: var(--pm-primary-brighter);
  --SessionsFiltersSelectButtonBorder_a: var(--pm-primary-brighter);
  --SessionsFiltersSelectButtonText_a: var(--base-50);
  --SessionsFiltersDatePickerBG: var(--base-50);
  --SessionsFiltersDatePickerBorder: var(--base-300);
  --SessionsFiltersDatePickerText: var(--base-650);
  --SessionsFiltersDatePickerPlaceholder: var(--base-500);
  --SessionsFiltersDatePickerBG_h: var(--base-50);
  --SessionsFiltersDatePickerBorder_h: var(--pm-primary-bright);
  --SessionsFiltersDatePickerText_h: var(--base-650);
  --SessionsFiltersPanelBtnBG: var(--pm-primary-brighter);
  --SessionsFiltersPanelBtnBorder: var(--pm-primary-brighter);
  --SessionsFiltersPanelBtnText: var(--base-50);
  --SessionsFiltersPanelBtnBG_h: var(--pm-primary-bright);
  --SessionsFiltersPanelBtnBorder_h: var(--pm-primary-bright);
  --SessionsFiltersPanelBtnText_h: var(--base-50);
  --SessionsFiltersClearBtnBG: transparent;
  --SessionsFiltersClearBtnBorder: var(--base-400);
  --SessionsFiltersClearBtnText: var(--base-650);
  --SessionsFiltersClearBtnBG_h: var(--base-100);
  --SessionsFiltersClearBtnBorder_h: var(--base-500);
  --SessionsFiltersClearBtnText_h: var(--base-700);
  --BtnDirectoryActionBG: var(--base-50);
  --BtnDirectoryActionBorder: var(--base-400);
  --BtnDirectoryActionText: var(--base-650);
  --BtnDirectoryActionIcon: var(--base-600);
  --BtnDirectoryActionIcon_a: var(--base-500);
  --BtnDirectoryActionBG_h: var(--base-50);
  --BtnDirectoryActionBorder_h: var(--pm-primary-bright);
  --BtnDirectoryActionText_h: var(--pm-primary-bright);
  --BtnDirectoryActionIcon_h: var(--pm-primary-bright);
  --BtnDirectoryActionBG_h_a: var(--pm-sky-blue);
  --BtnDirectoryActionBorder_h_a: var(--pm-sky-blue);
  --BtnDirectoryActionText_h_a: var(--base-50);
  --BtnDirectoryActionIcon_h_a: var(--base-50);
  --OnboardingModalBG: var(--base-50);
  --OnboardingModalBorder: var(--base-200);
  --OnboardingModalTitle: var(--base-500);
  --OnboardingModalSubtitle: var(--base-650);
  --OnboardingModalText: var(--base-900);
  --OnboardingModalTextStrong: var(--pm-primary-brighter);
  --OnboardingModalEmphasis: var(--pm-primary);
  --OnboardingModalColSideContentBG: var(--base-50);
  --OnboardingModalColSideContentBorder: var(--base-200);
  --OnboardingModalColSideContentText: var(--base-600);
  --OnboardingModalSelectButtonBG: transparent;
  --OnboardingModalSelectButtonBorder: var(--base-300);
  --OnboardingModalSelectButtonText: var(--base-650);
  --OnboardingModalSelectButtonBG_h: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_h: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_h: var(--base-50);
  --OnboardingModalSelectButtonBG_h_a: var(--pm-primary-blue);
  --OnboardingModalSelectButtonBorder_h_a: var(--pm-primary-blue);
  --OnboardingModalSelectButtonText_h_a: var(--base-50);
  --OnboardingModalSelectButtonBG_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_a: var(--base-50);
  --OnboardingModalSelectButtonBG_a_h: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_a_h: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_a_h: var(--base-50);
  --OnboardingModalSelectButtonBG_a_h_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_a_h_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_a_h_a: var(--base-50);
  --SkipLinkColour: var(--base-500);
  --SkipLinkColour_h: var(--base-700);
  --days-remaining-label: var(--base-600);
  --days-remaining-count: var(--pm-primary-brighter);
  --InputSwitchSliderBg: var(--base-300);
  --InputSwitchSliderBg_h: var(--pm-primary);
  --InputSwitchSliderBg_a: #10b981;
  --InputSwitchSliderHandle: var(--base-50);
  --placeholder-overlay-bg: rgba(255, 255, 255, 0.8);
  --placeholder-overlay-text: var(--base-650);
  --OverviewBarWelcomeTitle: var(--pm-dark-blue);
  --OverviewBarWelcomeTitleSpan: var(--pm-sky-blue);
  --OverviewBarWelcomeSubtitle: var(--base-500);
  --OverviewBarExamIcon: var(--base-650);
  --OverviewBarExamIconBorder: var(--base-300);
  --OverviewBarExamTitle: var(--base-500);
  --OverviewBarExamDate: var(--pm-dark-blue);
  --OverviewBarExamDays: var(--pm-dark-blue);
  --OverviewBarSetExamLink: var(--pm-primary-blue);
  --OverviewBarSetExamLink_h: var(--pm-sky-blue);
  --OverviewBarSetExamLinkIcon: var(--base-500);
  --OverviewBarSetExamLinkIcon_h: var(--pm-sky-blue);
  --peerGroupWidgetLabelColour: var(--base-650);
  --peerGroupWidgetValueColour: var(--base-600);
  --peerGroupWidgetLoadingText: var(--base-400);
  --RecentSessionsEmptyTitle: var(--base-600);
  --RecentSessionsEmptySubtitle: var(--base-500);
  --RecentSessionsEmptyBG: var(--base-100);
  --RecentSessionsBorderColor: var(--base-200);
  --SkeletonLoaderText: var(--base-50);
  --SkeletonLoaderBG: var(--base-100);
  --ChartsEmptyStateText: var(--base-600);
  --ChartsEmptyStateSkeleton: var(--base-200);
  --ChartsEmptyStateBorder: var(--base-200);
  --ContactDetailsContainerBackground: var(--base-50);
  --ContactDetailIcon: var(--base-600);
  --ContactDetailIcon_h: var(--pm-primary-brighter);
  --ContactDetailIconBG: var(--base-100);
  --ContactDetailIconBG_h: var(--base-100);
  --ContactDetailIconBorder: var(--base-300);
  --ContactDetailIconBorder_h: var(--base-300);
  --ContactDetailTitle: var(--base-600);
  --ContactDetailTitle_h: var(--pm-primary-brighter);
  --ContactDetailValue: var(--base-500);
  --ContactDetailValue_h: var(--pm-primary-brighter);
  --ContactDetailValueLink: var(--pm-primary);
  --ContactDetailValueLink_h: var(--pm-primary-brighter);
  --ContactWhatsappLink: var(--emerald-500);
  --ContactWhatsappLink_h: var(--emerald-400);
  --ContactSocialsTitle: var(--base-500);
  --ContactSocialsIcon: var(--base-600);
  --ContactSocialsIcon_h: var(--pm-primary-brighter);
  --ContactSocialsIconBG: var(--base-100);
  --ContactSocialsIconBG_h: var(--base-100);
  --ContactFormContainerBackground: var(--base-50);
  --ContactFormInputBorder: var(--base-300);
  --ContactFormInputText: var(--base-600);
  --ContactFormInputPlaceholder: var(--base-400);
  --ContactFormInputBorder_h: var(--pm-primary-blue);
  --ContactFormInputText_h: var(--pm-primary-blue);
  --ContactFormInputPlaceholder_h: var(--pm-primary-blue);
  --ContactFormInputLabel: var(--base-600);
  --ContactFormInputLabel_h: var(--pm-primary-blue);
  --ProfileSectionBG: var(--primary__bg);
  --ProfilePanelFormLabel: var(--base-600);
  --ProfilePanelFormInputBG: var(--base-700);
  --ProfilePanelFormInputBorder: var(--base-500);
  --ProfilePanelFormInputBorder_h: var(--pm-primary) // Skeleton Loader Colors
    --skeleton-base: var(--base-100);
  --skeleton-highlight: var(--base-50);
  --skeleton-circle-border: var(--base-200);
  --skeleton-text: var(--base-200);
  --skeleton-chart-primary: var(--base-200);
  --skeleton-chart-secondary: var(--base-100);
  --error-message: var(--red-400);
  --error-text: var(--red-600);
  --error-border: var(--red-500);
  --MenuBtnAvatarBG: var(--pm-sky-blue);
  --MenuBtnText: white;
  --MenuBtnAvatarBG_h: #39d3ff;
  --MenuBtnText_h: white;
  --MenuBtnAvatarBG_h_a: var(--pm-yellow);
  --MenuBtnText_h_a: white;
  --MenuDropdownBG: white;
  --MenuDropdownItemBG: white;
  --MenuDropdownItemText: var(--base-650);
  --MenuDropdownItemIcon: var(--base-650);
  --MenuDropdownItemBG_h: white;
  --MenuDropdownItemText_h: var(--pm-sky-blue);
  --MenuDropdownItemIcon_h: var(--pm-sky-blue);
  --MenuDropdownItemBG_h_a: white;
  --MenuDropdownItemText_h_a: var(--pm-sky-blue);
  --MenuDropdownItemIcon_h_a: var(--pm-sky-blue);
  --MenuDropdownItemBG_a: var(--pm-primary-bright);
  --MenuDropdownItemText_a: white;
  --MenuDropdownItemIcon_a: var(--pm-sky-blue);
  --MenuDropdownItemBG_a_h: white;
  --MenuDropdownItemText_a_h: var(--pm-sky-blue);
  --MenuDropdownItemIcon_a_h: var(--pm-sky-blue);
  --MenuDropdownItemBG_a_h_a: white;
  --MenuDropdownItemText_a_h_a: var(--pm-sky-blue);
  --MenuDropdownItemIcon_a_h_a: var(--pm-sky-blue);
  --FormDividerColor: var(--base-200);
  --FieldLabelColor: var(--base-600);
  --InputBg: var(--base-50);
  --InputTextColor: var(--base-650);
  --InputTextPlaceholderColor: var(--base-500);
  --InputTextBorder: var(--base-400);
  --InputTextBorder_h: var(--pm-primary);
  --DatePickerBG: var(--base-50);
  --DatePickerInputTextColor: var(--base-650);
  --DatePickerInputIconColor: var(--base-400);
  --DatePickerPlaceholderColor: var(--base-600);
  --DatePickerBorder: var(--base-400);
  --DatePickerBorder_a: var(--pm-sky-blue);
  --DatePickerBG_h: var(--base-50);
  --DatePickerInputTextColor_h: var(--base-650);
  --DatePickerInputIconColor_h: var(--base-400);
  --DatePickerBorder_h: var(--base-400);
  --DatePickerPlaceholderColor_h: var(--base-600);
  --DatePickerMenuBG: var(--base-50);
  --DatePickerArrowBG: var(--base-50);
  --DatePickerCalendarTextColor: var(--base-50);
  --DatePickerArrowColor: var(--base-100);
  --DatePickerArrowColor_h: var(--pm-sky-blue);
  --DatePickerNavButtonColor: var(--base-650);
  --DatePickerNavButtonColor_h: var(--pm-sky-blue);
  --DatePickerButtonColor: var(--base-650);
  --DatePickerButtonBG: var(--base-50);
  --DatePickerButtonColor_h: var(--pm-sky-blue);
  --DatePickerButtonBG_h: var(--base-100);
  --DatePickerCalendarItemColor: var(--base-650);
  --DatePickerCalendarItemBG: var(--base-50);
  --DatePickerCalendarItemBG_h: var(--base-100);
  --DatePickerCalendarHeaderBG: var(--base-50);
  --DatePickerCalendarHeaderColor: var(--base-600);
  --DatePickerMonthOverlayTextColor: var(--base-650);
  --IconFieldIcon: var(--base-500);
  --DropdownBg: var(--base-50);
  --DropdownBorder: var(--base-400);
  --DropdownPanelBg: var(--base-50);
  --DropdownPanelBorder: var(--base-50);
  --DropdownPanelBg_h: var(--base-100);
  --DropdownItemText: var(--base-650);
  --DropdownItemCheckIcon: var(--base-500);
  --DropdownItemBg_a: var(--base-100);
  --DropdownPanelFocusBorder: var(--pm-sky-blue);
  --DropdownTriggerIconColor: var(--base-500);
  --checkboxBorder: var(--base-500);
  --checkboxInputBG: var(--base-50);
  --checkboxInputColor: var(--base-50);
  --checkboxIconColor: var(--base-50);
  --checkboxIconFontSize: 14px;
  --checkboxBorder_h: var(--blue-400);
  --checkboxInActiveBorderColor_h: var(--blue-400);
  --checkboxActiveBorderColor: var(--pm-sky-blue);
  --checkboxActiveBg: var(--pm-sky-blue);
  --checkboxActiveIconColor: var(--base-50);
  --checkboxActiveBg_h: var(--blue-500);
  --checkboxActiveBorderColor_h: var(--blue-500);
  --MultiSelectHeaderBg: var(--base-50);
  --MultiSelectHeaderBorder: var(--base-350);
  --MultiSelectHeaderPlaceholderText: var(--base-650);
  --MultiSelectHeaderDropArrowIcon: var(--base-500);
  --MultiSelectHeaderBorder_h: var(--pm-sky-blue);
  --MultiSelectHeaderBorder_a: var(--pm-sky-blue);
  --MultiSelectHeaderBorder_f: var(--pm-sky-blue);
  --MultiSelectHeaderCloseIcon: var(--base-600);
  --MultiSelectHeaderCloseIcon_h: var(--pm-sky-blue);
  --MultiSelectHeaderFilterIcon: var(--base-400);
  --MultiSelectItemText: var(--base-650);
  --MultiSelectItemBG: var(--base-50);
  --MultiSelectItemBG_f: var(--base-100);
  --MultiSelectScrollHeight: 200px;
  --MultiSelectPanelBg: var(--base-50);
  --MultiSelectPanelBorder: var(--base-350);
  --QuestionsTrackBG: transparent;
  --QTrackBlockBG: transparent;
  --QTrackBlockBorder: var(--base-300);
  --QTrackBlockText: var(--base-600);
  --QTrackBlockAnsweredBG: transparent;
  --QTrackBlockAnsweredBorder: var(--base-300);
  --QTrackBlockAnsweredText: var(--base-600);
  --QTrackBlockIncompleteBG: transparent;
  --QTrackBlockIncompleteBorder: var(--base-300);
  --QTrackBlockIncompleteText: var(--base-500);
  --QTrackBlockIncompleteBG_h: transparent;
  --QTrackBlockIncompleteBorder_h: var(--cyan-500);
  --QTrackBlockIncompleteText_h: var(--cyan-500);
  --QTrackBlockIncompleteBG_a: var(--pm-sky-blue);
  --QTrackBlockIncompleteBorder_a: var(--pm-sky-blue);
  --QTrackBlockIncompleteText_a: white;
  --QTrackBlockIncompleteBG_a_h: var(--cyan-500);
  --QTrackBlockIncompleteBorder_a_h: var(--cyan-500);
  --QTrackBlockIncompleteText_a_h: white;
  --QTrackBlockCorrectBG: rgba(34, 197, 94, 0.0);
  --QTrackBlockCorrectBorder: rgb(34, 197, 94);
  --QTrackBlockCorrectText: rgb(34, 197, 94);
  --QTrackBlockCorrectBG_a: rgb(34, 197, 94);
  --QTrackBlockCorrectBorder_a: rgb(34, 197, 94);
  --QTrackBlockCorrectText_a: white;
  --QTrackBlockCorrectIcon_a: white;
  --QTrackBlockIncorrectBG: rgba(239, 68, 68, 0.0);
  --QTrackBlockIncorrectBorder: rgb(239, 68, 68);
  --QTrackBlockIncorrectText: rgb(239, 68, 68);
  --QTrackBlockIncorrectBG_a: rgb(239, 68, 68);
  --QTrackBlockIncorrectBorder_a: rgb(239, 68, 68);
  --QTrackBlockIncorrectText_a: white;
  --QTrackBlockIncorrectIcon_a: white;
  --QTrackBlockActiveBG: var(--cyan-500);
  --QTrackBlockActiveBorder: var(--cyan-500);
  --QTrackBlockActiveText: var(--cyan-500);
  --QTrackExamModeAnsweredBG: transparent;
  --QTrackExamModeAnsweredBorder: var(--blue-500);
  --QTrackExamModeAnsweredText: var(--blue-500);
  --QTrackExamModeAnsweredIcon: var(--blue-500);
  --QTrackExamModeAnsweredBG_h: var(--blue-500);
  --QTrackExamModeAnsweredBorder_h: var(--blue-500);
  --QTrackExamModeAnsweredText_h: var(--base-50);
  --QTrackExamModeAnsweredIcon_h: var(--blue-50);
  --QTrackExamModeAnsweredBG_a: var(--blue-500);
  --QTrackExamModeAnsweredBorder_a: var(--blue-500);
  --QTrackExamModeAnsweredText_a: var(--base-50);
  --QTrackExamModeAnsweredIcon_a: var(--blue-50);
  --QTrackExamModeAnsweredBG_a_h: var(--blue-500);
  --QTrackExamModeAnsweredBorder_a_h: var(--blue-500);
  --QTrackExamModeAnsweredText_a_h: var(--base-50);
  --QTrackExamModeAnsweredIcon_a_h: var(--blue-50);
  --QTrackBtnBG: transparent;
  --QTrackBtnIcon: var(--base-650);
  --QTrackBtnBorder: var(--base-400);
  --QTrackBtnBG_h: var(--pm-sky-blue);
  --QTrackBtnIcon_h: white;
  --QTrackBtnBorder_h: var(--pm-sky-blue);
  --DataTableCardBG: var(--base-50);
  --DataTableCardBorder: var(--base-200);
  --DataTableText: var(--base-650);
  --DataTableHeaderBG: transparent;
  --DataTableHeaderText: var(--base-500);
  --DataTableHeaderBorder: #e4e6ec;
  --DataTableHeaderTHeadRowBG: transparent;
  --DataTableHeaderTHeadRowText: var(--base-900);
  --DataTableHeaderMetaTitle: var(--base-600);
  --DataTableHeaderBG_loading: var(--base-50);
  --DataTableHeaderText_loading: var(--base-400);
  --DataTableHeaderBG_empty: var(--base-50);
  --DataTableHeaderText_empty: var(--base-400);
  --DataTableBodyRowBG: transparent;
  --DataTableBodyRowText: var(--base-650);
  --DataTableBodyRowBorder: #e4e6ec;
  --DataTableBodyRowBG_h: var(--base-100);
  --DataTableFooterBG: transparent;
  --DataTableFooterText: var(--base-650);
  --DataTableFooterTHeadRowBG: transparent;
  --DataTableFooterTHeadRowText: var(--base-650);
  --DataTableFooterPaginationBG: transparent;
  --DataTableFooterPaginationHighlightBG: var(--base-100);
  --DataTableFooterPaginationText: var(--base-900);
  --DataTableFooterPaginationHighlightText: var(--base-900);
  --DataTableFooterPaginationIconColor: var(--base-600);
  --DataTableFooterPaginationArrowColor: var(--base-100);
  --DataTableFooterPaginationDropdownSelectionText: var(--base-500);
  --DataTableFooterPaginationBorder: var(--base-300);
  --DataTableFooterPaginationBG_h: var(--base-100);
  --DataTableFooterPaginationText_h: var(--base-900);
  --DataTableFooterPaginationBorder_h: var(--base-400);
  --DataTableFooterPaginationIcon: var(--base-600);
  --DataTableFooterPaginationIcon_h: var(--base-700);
  --DataTableFooterPaginationDropdownBG: var(--base-50);
  --DataTableFooterPaginationDropdownBG_h: var(--base-100);
  --DataTableFooterPaginationDropdownBorder: var(--base-300);
  --DataTableFooterPaginationDropdownBorder_h: var(--base-400);
  --DataTableFooterPaginationDropdownText: var(--base-700);
  --DataTableFooterPaginationDropdownText_h: var(--base-900);
  --DataTableFooterPaginationDropdownIcon: var(--base-600);
  --DataTableFooterPaginationDropdownIcon_h: var(--base-700);
  --DataTableActionBtnBg: var(--base-50);
  --DataTableActionBtnText: var(--base-900);
  --DataTableActionBtnIcon: var(--base-500);
  --DataTableActionBtnBorder: var(--base-200);
  --DataTableActionBtnText_h: var(--base-900);
  --DataTableActionBtnIcon_h: var(--base-650);
  --DataTableActionBtnBg_h: white;
  --DataTableActionBtnBorder_h: var(--pm-sky-blue);
  --DataTableActionBtnText_h_a: white;
  --DataTableActionBtnIcon_h_a: white;
  --DataTableActionBtnBg_h_a: var(--pm-sky-blue);
  --DataTableActionBtnBorder_h_a: var(--pm-sky-blue);
  --PaymentOptionBG: var(--base-50);
  --PaymentOptionTitleText: var(--base-650);
  --PaymentOptionDescriptionText: var(--base-500);
  --PaymentOptionPriceText: var(--base-650);
  --PaymentOptionBorder: var(--base-300);
  --PaymentCheckboxBG: var(--base-100);
  --PaymentCheckboxBorder: var(--base-400);
  --PaymentCheckboxIcon: var(--base-50);
  --PaymentOptionBG_h: var(--base-50);
  --PaymentOptionTitleText_h: var(--blue-800);
  --PaymentOptionDescriptionText_h: var(--base-500);
  --PaymentOptionPriceText_h: var(--base-900);
  --PaymentOptionBorder_h: var(--pm-sky-blue);
  --PaymentCheckboxBG_h: var(--base-200);
  --PaymentCheckboxBorder_h: var(--base-400);
  --PaymentCheckboxIcon_h: var(--base-50);
  --PaymentOptionBG_h_a: var(--base-200);
  --PaymentOptionTitleText_h_a: var(--base-500);
  --PaymentOptionDescriptionText_h_a: var(--base-500);
  --PaymentOptionPriceText_h_a: var(--base-500);
  --PaymentOptionBorder_h_a: var(--base-400);
  --PaymentCheckboxBG_h_a: var(--base-500);
  --PaymentCheckboxBorder_h_a: var(--base-300);
  --PaymentCheckboxIcon_h_a: var(--base-50);
  --PaymentOptionBG_a: var(--blue-700);
  --PaymentOptionTitleText_a: var(--pm-yellow);
  --PaymentOptionDescriptionText_a: var(--base-100);
  --PaymentOptionPriceText_a: var(--base-50);
  --PaymentOptionBorder_a: var(--blue-700);
  --PaymentCheckboxBG_a: white;
  --PaymentCheckboxBorder_a: white;
  --PaymentCheckboxIcon_a: var(--blue-600);
  --PaymentOptionBG_a_h: var(--blue-700);
  --PaymentOptionTitleText_a_h: var(--pm-yellow);
  --PaymentOptionDescriptionText_a_h: var(--base-100);
  --PaymentOptionPriceText_a_h: var(--base-50);
  --PaymentOptionBorder_a_h: var(--blue-700);
  --PaymentCheckboxBG_a_h: white;
  --PaymentCheckboxBorder_a_h: white;
  --PaymentCheckboxIcon_a_h: var(--blue-600);
  --PaymentOptionBG_a_h_a: var(--blue-500);
  --PaymentOptionTitleText_a_h_a: var(--blue-50);
  --PaymentOptionDescriptionText_a_h_a: var(--blue-100);
  --PaymentOptionPriceText_a_h_a: var(--blue-50);
  --PaymentOptionBorder_a_h_a: var(--blue-500);
  --PaymentCheckboxBG_a_h_a: white;
  --PaymentCheckboxBorder_a_h_a: white;
  --PaymentCheckboxIcon_a_h_a: var(--blue-600);
  --PaymentFormConnectingBG: var(--base-50);
  --PaymentFormConnectingBorder: var(--base-200);
  --PaymentFormConnectingLabel: var(--base-500);
  --PaymentOptionBG: var(--base-50);
  --PaymentOptionTitleText: var(--base-650);
  --PaymentOptionDescriptionText: var(--base-500);
  --PaymentOptionPriceText: var(--base-650);
  --PaymentOptionBorder: var(--base-300);
  --PaymentCheckboxBG: var(--base-100);
  --PaymentCheckboxBorder: var(--base-400);
  --PaymentCheckboxIcon: var(--base-50);
  --PaymentOptionBG_h: var(--base-50);
  --PaymentOptionTitleText_h: var(--blue-800);
  --PaymentOptionDescriptionText_h: var(--base-500);
  --PaymentOptionPriceText_h: var(--base-900);
  --PaymentOptionBorder_h: var(--pm-sky-blue);
  --PaymentCheckboxBG_h: var(--base-200);
  --PaymentCheckboxBorder_h: var(--base-400);
  --PaymentCheckboxIcon_h: var(--base-50);
  --PaymentOptionBG_h_a: var(--base-200);
  --PaymentOptionTitleText_h_a: var(--base-500);
  --PaymentOptionDescriptionText_h_a: var(--base-500);
  --PaymentOptionPriceText_h_a: var(--base-500);
  --PaymentOptionBorder_h_a: var(--base-400);
  --PaymentCheckboxBG_h_a: var(--base-500);
  --PaymentCheckboxBorder_h_a: var(--base-300);
  --PaymentCheckboxIcon_h_a: var(--base-50);
  --PaymentOptionBG_a: var(--blue-700);
  --PaymentOptionTitleText_a: var(--pm-yellow);
  --PaymentOptionDescriptionText_a: var(--base-100);
  --PaymentOptionPriceText_a: var(--base-50);
  --PaymentOptionBorder_a: var(--blue-700);
  --PaymentCheckboxBG_a: white;
  --PaymentCheckboxBorder_a: white;
  --PaymentCheckboxIcon_a: var(--blue-600);
  --PaymentOptionBG_a_h: var(--blue-700);
  --PaymentOptionTitleText_a_h: var(--pm-yellow);
  --PaymentOptionDescriptionText_a_h: var(--base-100);
  --PaymentOptionPriceText_a_h: var(--base-50);
  --PaymentOptionBorder_a_h: var(--blue-700);
  --PaymentCheckboxBG_a_h: white;
  --PaymentCheckboxBorder_a_h: white;
  --PaymentCheckboxIcon_a_h: var(--blue-600);
  --PaymentOptionBG_a_h_a: var(--blue-500);
  --PaymentOptionTitleText_a_h_a: var(--blue-50);
  --PaymentOptionDescriptionText_a_h_a: var(--blue-100);
  --PaymentOptionPriceText_a_h_a: var(--blue-50);
  --PaymentOptionBorder_a_h_a: var(--blue-500);
  --PaymentCheckboxBG_a_h_a: white;
  --PaymentCheckboxBorder_a_h_a: white;
  --PaymentCheckboxIcon_a_h_a: var(--blue-600);
  --PaymentFormConnectingBG: var(--base-50);
  --PaymentFormConnectingBorder: var(--base-200);
  --PaymentFormConnectingLabel: var(--base-500);
  --SubscriptionCardBG: var(--base-50);
  /* Subscription card background */
  --SubscriptionCardBorder: var(--base-300);
  /* Subscription card border */
  --SubscriptionCardText: var(--base-900);
  /* Subscription card text */
  --SubscriptionCardIcon: var(--base-400);
  /* Subscription card icon */
  --SubscriptionCardProgressBarBG: var(--base-150);
  /* Progress bar background */
  --SubscriptionCardProgressBarProgressBG: var(--blue-700);
  /* Progress bar progress background */
  --SubscriptionCardProgressBarProgressText: var(--base-50);
  /* Progress bar text */
  --SubscriptionCardLabelColor: var(--base-500);
  --SubscriptionCardValue: var(--base-600);
  --ModalSubscribeBG: var(--base-50);
  --ModalSubscribeTitleColor: var(--base-900);
  --ModalSubscribeTextColor: var(--base-650);
  --ModalSubscribeSubtitleColor: var(--base-500);
  --ChkListText: var(--base-650);
  --ChkModalContentText: var(--base-600);
  --ChkModalTitle: var(--pm-primary);
  --ChkModalSubtitle: var(--base-500);
  --ChkListIcon: var(--base-500);
  --ChkModalLink: var(--pm-primary-brighter);
  --ChkModalLink_h: var(--pm-primary-bright);
  --ChkModalContentText: var(--base-650);
  --ChkModalDivider: var(--base-200);
  --ChkModalAccordionBorder: var(--base-200);
  --ChkModalAccordionHeaderColor: var(--base-600);
  --ChkModalAccordionHeaderColor_h: var(--pm-primary);
  --ChkModalAccordionHeaderColor_a: var(--pm-primary);
  --ChkModalAccordionContentColor: var(--base-650);
  --ChkModalBtnBg: var(--pm-primary-brighter);
  --ChkModalBtnText: var(--base-50);
  --ChkModalBtnIcon: var(--base-50);
  --ChkModalBtnBorder: var(--pm-primary);
  --ChkModalBtnBg_h: var(--pm-brand-blue);
  --ChkModalBtnBorder_h: var(--pm-brand-blue);
  --ChkModalBtnText_h: var(--base-50);
  --ChkModalBtnIcon_h: var(--base-50);
  --ChkModalBtnBg_h_a: var(--pm-primary-bright);
  --ChkModalBtnBorder_h_a: var(--pm-primary-bright);
  --ChkModalBtnText_h_a: var(--base-50);
  --ChkModalBtnIcon_h_a: var(--base-50);
  --CheckConfirmedSmallText: var(--base-500);
  --CheckConfirmedText: var(--pm-primary);
  --CheckFormLabel: var(--base-600);
  --CheckModalOverviewBG: var(--base-100);
  --CheckModalOverviewIconBG: var(--base-50);
  --CheckModalOverviewIconColor: var(--pm-primary);
  --CheckModalOverviewSummaryTitle: var(--base-400);
  --CheckModalOverviewTitle: var(--base-900);
  --CheckModalOverviewContent: var(--base-650);
  --CheckModalOverviewDescription: var(--base-500);
  --CheckModalErrorColour: var(--red-500);
  --CheckModalSuccessColour: var(--green-500);
  --CheckoutSummaryItemsBG: var(--base-100);
  --CheckoutSummaryItemsBorder: var(--base-200);
  --CheckoutSummaryItemTitle: var(--base-900);
  --CheckoutSummaryItemContent: var(--base-650);
  --CheckoutSummaryItemPrice: var(--base-900);
  --CheckoutSummaryItemPriceLabel: var(--base-500);
  --CheckoutSummaryItemPriceDiscount: var(--emerald-500);
  --CheckoutSummaryItemsText: var(--base-650);
  --CheckoutSummaryNotificationSuccessBG: var(--emerald-50);
  --CheckoutSummaryNotificationSuccessIcon: var(--emerald-500);
  --CheckoutSummaryNotificationSuccessText: var(--emerald-800);
  --CheckoutSummaryNotificationErrorBG: var(--red-50);
  --CheckoutSummaryNotificationErrorIcon: var(--red-700);
  --CheckoutSummaryNotificationErrorText: var(--red-700);
  --CheckoutSuccessBG: var(--base-100);
  --CheckoutSuccessTitleColor: var(--base-1000);
  --CheckoutSuccessTextColor: var(--base-650);
  --CheckoutSuccessIconBG: var(--pm-success);
  --CheckoutSuccessIconColor: var(--base-1000);
  --CheckoutSuccessButtonBG: var(--pm-primary-blue);
  --CheckoutSuccessButtonBGHover: var(--pm-primary-brighter);
  --CheckoutSuccessButtonText: var(--base-50);
  --CheckoutPaymentPanelSummaryBG: var(--base-100);
  --CheckoutPaymentPanelSummaryTitle: var(--base-900);
  --CheckoutPaymentPanelSummaryText: var(--base-900);
  --CheckoutPaymentPanelSummaryDiscountedText: var(--base-500);
  --CheckoutPaymentPanelSummaryValue: var(--base-900);
  --CheckoutPaymentPanelSummaryDiscountedValue: var(--base-600);
  --PaymentFormModalConfirmationTitle: var(--base-900);
  --PaymentFormModalConfirmationHairline: var(--base-500);
  --PaymentFormModalConfirmationContent: var(--base-600);
  --CheckoutProgressStepActiveBG: var(--blue-600);
  --CheckoutProgressStepActiveBorder: var(--blue-600);
  --CheckoutProgressStepActiveText: white;
  --CheckoutProgressStepInactiveBG: var(--base-100);
  --CheckoutProgressStepInactiveBorder: var(--base-300);
  --CheckoutProgressStepInactiveText: var(--base-500);
  --CheckoutProgressLineActive: var(--blue-600);
  --CheckoutProgressLineInactive: var(--base-300);
  --CheckoutProgressStepText: var(--base-600);
  --CheckoutProgressBorderColor: var(--base-200);
  --PaymentOptionText: var(--base-650);
  --PaymentOptionIconBG: var(--base-100);
  --PaymentOptionIconBorder: var(--base-300);
  --PaymentOptionIconHoverFill: white;
  --PaymentOptionCheckmarkStroke: white;
  --PaymentOptionActiveLight: rgba(0, 171, 233, 0.1);
  --CheckoutErrorRecoveryBG: var(--red-50);
  --CheckoutErrorRecoveryBorder: var(--red-200);
  --CheckoutErrorRecoveryIconColor: var(--red-500);
  --CheckoutErrorRecoveryTitle: var(--base-900);
  --CheckoutErrorRecoveryMessage: var(--base-700);
  --CheckoutErrorRecoveryText: var(--base-600);
  --CheckoutErrorRecoveryDetailsSummary: var(--base-500);
  --CheckoutErrorRecoveryDetailsSummaryHover: var(--base-700);
  --CheckoutErrorRecoveryDetailsBG: var(--base-100);
  --CheckoutErrorRecoveryDetailsText: var(--base-800);
  --TagPrimaryBG: var(--pm-sky-blue);
  --TagPrimaryText: white;
  --TagSuccessBG: var(--emerald-500);
  --TagSuccessText: white;
  --TagWarningBG: var(--amber-500);
  --TagWarningText: white;
  --TagDangerBG: var(--red-500);
  --TagDangerText: white;
  --TagInfoBG: var(--blue-500);
  --TagInfoText: white;
  --ListBoxButtonBg: var(--base-50);
  --ListBoxButtonBorder: var(--base-400);
  --ListBoxButtonDropIcon: var(--base-650);
  --ListBoxSelectedOptionText: var(--base-650);
  --ListBoxButtonBg_h: var(--base-50);
  --ListBoxButtonBorder_h: var(--pm-sky-blue);
  --ListBoxButtonDropIcon_h: var(--base-900);
  --ListBoxOptionsBg: var(--base-50);
  --ListBoxOptionBg: var(--base-50);
  --ListBoxOptionBorder: var(--base-400);
  --ListBoxOptionText: var(--base-900);
  --ListBoxOptionIcon: var(--base-400);
  --ListBoxOptionCheckIcon: var(--base-500);
  --ListBoxOptionBg_h: var(--base-100);
  --ListBoxOptionBorder_h: var(--pm-sky-blue);
  --ListBoxOptionText_h: var(--blue-900);
  --ListBoxOptionIcon_h: var(--pm-sky-blue);
  --ListBoxOptionCheckIcon_h: var(--pm-sky-blue);
  --ListBoxOptionBg_a: var(--base-100);
  --ListBoxOptionBorder_a: var(--pm-sky-blue);
  --ListBoxOptionText_a: var(--blue-900);
  --ListBoxOptionIcon_a: var(--pm-sky-blue);
  --ListBoxOptionCheckIcon_a: var(--pm-sky-blue);
  --ListBoxOptionBg_a_h: var(--base-50);
  --ListBoxOptionBorder_a_h: var(--pm-sky-blue);
  --ListBoxOptionText_a_h: var(--pm-sky-blue);
  --ListBoxOptionIcon_a_h: var(--pm-sky-blue);
  --ListBoxOptionCheckIcon_a_h: var(--pm-sky-blue);
  --peerGroupWidgetEmptyLabel: var(--base-600);
  --peerGroupWidgetEmptySublabel: var(--base-500);
  --section-card__title: var(--base-900);
  --section-card__subtitle: var(--base-600);
  --SecLabelLabelColor: var(--base-600);
  --SecLabelValueColor: var(--base-900);
  --mobile-flyout-menu-bg: var(--base-50);
  --mobile-flyout-menu-divider: var(--base-200);
  --mobile-flyout-border: var(--base-100);
  --mobile-flyout-menu-btn-bg: var(--base-50);
  --mobile-flyout-menu-btn-text: var(--base-650);
  --mobile-flyout-menu-btn-icon: var(--base-600);
  --mobile-flyout-menu-btn-icon-bg: var(--base-50);
  --mobile-flyout-menu-btn-bg_h: var(--base-100);
  --mobile-flyout-menu-btn-text_h: var(--pm-sky-blue);
  --mobile-flyout-menu-btn-icon_h: var(--base-600);
  --mobile-flyout-menu-btn-icon-bg_h: var(--base-50);
  --mobile-flyout-menu-btn-bg_a: var(--base-100);
  --mobile-flyout-menu-btn-text_a: var(--pm-primary-brighter);
  --mobile-flyout-menu-btn-icon_a: var(--pm-sky-blue);
  --mobile-flyout-menu-btn-icon-bg_a: var(--base-100);
  --mobile-flyout-menu-btn-bg_a_h: var(--base-100);
  --mobile-flyout-menu-btn-text_a_h: var(--pm-primary-brighter);
  --mobile-flyout-menu-btn-icon_a_h: var(--pm-sky-blue);
  --mobile-flyout-menu-btn-icon-bg_a_h: var(--base-100);
  --DashboardAvatarMenuBG: var(--base-50);
  --DashboardAvatarMenuBorder: var(--base-200);
  --DashboardAvatarMenuItemBG: var(--base-50);
  --DashboardAvatarMenuItemText: var(--base-900);
  --DashboardAvatarMenuItemIcon: var(--base-500);
  --DashboardAvatarMenuItemBG_h: var(--base-100);
  --DashboardAvatarMenuItemText_h: var(--pm-primary-brighter);
  --DashboardAvatarMenuItemIcon_h: var(--pm-sky-blue);
  --DashboardAvatarMenuItemBG_h_a: var(--base-100);
  --DashboardAvatarMenuItemText_h_a: var(--pm-primary-brighter);
  --DashboardAvatarMenuItemIcon_h_a: var(--pm-sky-blue);
  --DashboardAvatarMenuItemBG_a: var(--base-100);
  --DashboardAvatarMenuItemText_a: var(--pm-primary-brighter);
  --DashboardAvatarMenuItemIcon_a: var(--pm-sky-blue);
  --DashboardAvatarMenuItemBG_a_h: var(--base-100);
  --DashboardAvatarMenuItemText_a_h: var(--pm-primary-brighter);
  --DashboardAvatarMenuItemIcon_a_h: var(--pm-sky-blue);
  --DashboardAvatarMenuItemBG_a_h_a: var(--base-100);
  --DashboardAvatarMenuItemText_a_h_a: var(--pm-primary-brighter);
  --DashboardAvatarMenuItemIcon_a_h_a: var(--pm-sky-blue);
  /* ============================================================================
     Checkout Modal Variables
     ============================================================================ */
  /* Modal Base */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.5);
  --modal-bg: var(--base-50);
  --modal-title: var(--base-650);
  --modal-subtitle: var(--base-550);
  /* Modal Sidebar */
  --modal-sidebar-bg: var(--base-100);
  --modal-sidebar-border: var(--base-200);
  --modal-sidebar-title: var(--base-650);
  --modal-sidebar-text: var(--base-550);
  --modal-sidebar-checkmark-color: var(--pm-sky-blue);
  /* Modal Header */
  --modal-header-bg: var(--base-50);
  --modal-header-border: var(--base-200);
  /* Modal Interactive Elements */
  --modal-close-button-text: var(--base-500);
  --modal-close-button-text-hover: var(--base-700);
  --modal-focus-ring: var(--pm-sky-blue);
  --modal-back-button-text: var(--base-500);
  --modal-back-button-bg-hover: var(--base-100);
  /* Checkout Specific */
  --chkSideBarBG: var(--base-100);
  --chkSideBarText: var(--base-650);
  --chkSideBarBorder: var(--base-200);
  --chkSideBarListText: var(--base-550);
  --chkSideBarListIcon: var(--pm-sky-blue);
  --chkPrimaryPanelBG: var(--base-50);
  /* Onboarding Modal Variables */
  --OnboardingModalBG: var(--base-50);
  --OnboardingModalBorder: var(--base-200);
  --OnboardingModalTitle: var(--base-500);
  --OnboardingModalSubtitle: var(--base-650);
  --OnboardingModalText: var(--base-900);
  --OnboardingModalTextStrong: var(--pm-primary-brighter);
  --OnboardingModalEmphasis: var(--pm-primary);
  --OnboardingModalColSideContentBG: var(--base-50);
  --OnboardingModalColSideContentBorder: var(--base-200);
  --OnboardingModalColSideContentText: var(--base-600);
  --OnboardingModalSelectButtonBG: transparent;
  --OnboardingModalSelectButtonBorder: var(--base-300);
  --OnboardingModalSelectButtonText: var(--base-650);
  --OnboardingModalSelectButtonBG_h: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_h: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_h: var(--base-50);
  --OnboardingModalSelectButtonBG_h_a: var(--pm-primary-blue);
  --OnboardingModalSelectButtonBorder_h_a: var(--pm-primary-blue);
  --OnboardingModalSelectButtonText_h_a: var(--base-50);
  --OnboardingModalSelectButtonBG_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_a: var(--base-50);
  --OnboardingModalSelectButtonBG_a_h: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_a_h: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_a_h: var(--base-50);
  --OnboardingModalSelectButtonBG_a_h_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_a_h_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_a_h_a: var(--base-50);
  --SkipLinkColour: var(--base-500);
  --SkipLinkColour_h: var(--base-700);
  /* Session Summary Header Variables */
  --SessionSummaryHeaderBG: var(--base-50);
  --SessionSummaryHeaderText: var(--pm-primary);
  --SessionSummaryHeaderTextSecondary: var(--base-500);
  --SessionSummaryIncompleteTagBG: var(--pm-sky-blue);
  --SessionSummaryIncompleteTagText: var(--base-50);
  --HelpPageTextareaBG: var(--base-50);
  --HelpPageTextareaBorder: var(--base-300);
  --HelpPageTextareaText: var(--base-900);
  --HelpPageTextareaPlaceholder: var(--base-500);
  --HelpPageTextareaFocusBorder: var(--pm-sky-blue);
  --HelpPageTextareaFocusShadow: var(--pm-sky-blue);
  --HelpPageTextareaFocusOutline: var(--pm-primary);
  --HelpPageTextareaFocusOutlineColor: var(--pm-primary);
  --message-component-info-bg: #F1F6FE;
  --message-component-info-text: #2563eb;
  --message-component-info-border: #dbeafe;
  --message-component-info-icon: #2563eb;
  --message-component-info-icon-bg: #eff6ff;
  --message-component-info-icon-border: #bfdbfe;
  --message-component-info-icon-text: #2563eb;
}

html.env-dashboard.dark {
  /* Stripe dark colors */
  --backgroundColor: #0a2540;
  --linkColor: var(--accentColor);
  --linkHoverColor: #fff;
  --linkHoverOpacity: 1;
  --buttonColor: var(--accentColor);
  --buttonHoverColor: #fff;
  --buttonDisabledColor: #6b7c93;
  --buttonHoverOpacity: 1;
  --buttonDisabledOpacity: 0.7;
  --knockoutColor: #0a2540;
  --knockoutDisabledColor: #e6ebf1;
  --guideSolidColor: rgba(66, 71, 112, 0.3);
  --guideDashedColor: rgba(66, 71, 112, 0.3);
  --titleColor: #fff;
  --textColor: #adbdcc;
  --formFieldDescriptionTextColor: #adbdcc;
  --inputBackground: #0c2e4e;
  --checkboxInputBackground: #0c2e4e;
  --inputBackgroundAlt: #274869;
  --inputPlaceholderColor: #b6c2cd;
  --inputTextColor: #fff;
  --inputErrorAccentColor: #ff5996;
  --annotationColor: #8c9eb1;
  --maskFadeColor: rgba(0, 0, 0, 0.4);
  --navColor: #fff;
  --navHoverColor: #fff;
  --navHoverOpacity: 0.6;
  --footerColor: #fff;
  --cardBorderColor: #0f395e;
  --cardBackground: #0c2e4e;
  --subcardBackground: #1f4468;
  --gridSubcardBackground: #1f4468;
  --tableIconColor: #8c9eb1;
  --stripeAccentWhite: #fff;
  --stripeAccentLight: #fff;
  --stripeAccentDark: #0c2e4e;
  --bulletColor: #6b7c93;
  --footnoteTextColor: #adbdcc;
  --disclaimerTextColor: #707f98;
  --inlineCodeTextColor: #fff;
  --inlineCodeBackground: #1c4161;
  --socialLogoColor: #707f98;
  --socialLogoHoverColor: #fff;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;
  /* Branding colurs */
  --pm-primary-blue: #132273;
  --pm-primary-brighter: #263BAB;
  --pm-primary-bright: #004FFA;
  --pm-light-blue: #72FFFF;
  --pm-sky-blue: #00C6FE;
  --pm-yellow: #ffda52;
  --pm-danger: #ff333d;
  --pm-success: #00ff99;
  --tippy-text: white;
  --tippy-bg: #2962ff;
  --base-920: #0d1348;
  --base-910: #111857;
  --base-900: #040A36;
  --base-800: #0A114D;
  --base-700: #111857;
  --base-650: #131b65;
  --base-600: #1A1A70;
  --base-500: #292983;
  --base-400: #3C3CA5;
  --base-300: #6464D9;
  --base-200: #8C8CF4;
  --base-100: #9999FF;
  --base-90: #B3B3FF;
  --base-80: #CCCCFF;
  --base-70: #B3B3FF;
  --base-60: #e0e0eb;
  --base-50: #FFFFFF;
  /* Shadow and other CSS properties (kept intact but referencing base) */
  --cardBorderRadius: 8px;
  --cardShadowLarge: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
  --cardShadowLargeInset: inset 0 30px 60px -12px rgba(50, 50, 93, 0.25), inset 0 18px 36px -18px rgba(0, 0, 0, 0.3);
  --cardShadowLargeMargin: 32px;
  --cardShadowMedium: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
  --cardShadowMediumMargin: 16px;
  --cardShadowSmall: 0 6px 12px -2px rgba(50, 50, 93, 0.25), 0 3px 7px -3px rgba(0, 0, 0, 0.3);
  --cardShadowSmallMargin: 8px;
  --cardShadowXLarge: 0 50px 100px -20px rgba(50, 50, 93, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.3);
  --cardShadowXLargeMargin: 48px;
  --cardShadowXSMallMargin: 2px;
  --cardShadowXSmall: 0 2px 5px -1px rgba(50, 50, 93, 0.25), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
  --filterShadowMedium: 0px 3px 11.5px -3.5px rgba(50, 50, 93, 0.25), 0px 3.8px 7.5px -3.7px rgba(0, 0, 0, 0.1);
  /* List general styles */
  --listIconColor: var(--base-60);
  --listIconColor_h: var(--pm-sky-blue);
  --listTextColor: var(--base-100);
  --listTextColor_h: var(--pm-sky-blue);
  /* Buttons */
  --button_primary_bg: var(--pm-primary-bright);
  --button_primary_border: var(--pm-primary-bright);
  --button_primary_text: var(--base-50);
  --button_primary_bg_h: var(--pm-primary-brighter);
  --button_primary_border_h: var(--pm-primary-brighter);
  --button_primary_text_h: var(--base-50);
  --button_primary_bg_h_a: var(--pm-primary-brighter);
  --button_primary_border_h_a: var(--pm-primary-brighter);
  --button_primary_text_h_a: var(--base-50);
  /* btn-primary */
  --btn-primary-bg: var(--base-500);
  --btn-primary-border: var(--base-500);
  --btn-primary-text: var(--base-50);
  --btn-primary-icon: var(--base-50);
  --btn-primary-bg_h: var(--pm-primary-brighter);
  --btn-primary-border_h: var(--pm-primary-brighter);
  --btn-primary-text_h: var(--base-50);
  --btn-primary-bg_h_a: var(--pm-primary-brighter);
  --btn-primary-border_h_a: var(--pm-primary-brighter);
  --btn-primary-text_h_a: var(--base-50);
  /* Layout and background colors */
  --primary__bg: var(--base-910);
  --secondary__bg: var(--base-800);
  --cardBG: var(--base-650);
  --cardBorder: var(--base-650);
  --cardShadowPrimary: var(--filterShadowMedium);
  --cardShadowTwo: 0 12.6px 25.2px -11.5733px rgba(50, 50, 93, .25), 0 7.56px 15.12px -7.56px rgba(0, 0, 0, .1);
  /* --sec-primary__content__bg: var(--base-1000); */
  --sec-header__bg: var(--base-910);
  --sec-primary__sidebar__bg: var(--base-910);
  --sec-primary__content__bg: var(--base-800);
  --text_primary: var(--base-50);
  --text-secondary: var(--base-300); /* #adbdcc */
  /* Primary page container */
  --sec-page-title-title: var(--base-50);
  /* Primary page title */
  --sec-page-title-subtitle: var(--base-100);
  /* Primary page subtitle */
  --sec-page-title-back-btn-icon: var(--base-100);
  /* Back button icon */
  --sec-page-title-back-btn-icon_h: var(--pm-yellow);
  /* Back button hover icon */
  /* Sidebar Navigation */
  --sidebarBG: var(--base-100);
  --sidebarBorder: var(--primary__bg);
  --sidebarTextColor: var(--text_primary);
  --sidebarCloseIcon: var(--text_primary);
  /* Sidebar Menu Buttons */
  --mnu-btn__bg: var(--primary__bg);
  --mnu-btn__icon: var(--base-50);
  --mnu-btn__label: var(--base-50);
  /* Active State Menu Buttons */
  --mnu-btn_A__bg: var(--base-600);
  --mnu-btn_A__border: var(--primary__bg);
  --mnu-btn_A__icon: var(--pm-yellow);
  --mnu-btn_A__label: var(--pm-sky-blue);
  --mnu-btn_A_H__bg: var(--primary__bg);
  /* Active button background */
  --mnu-btn_A_H__border: var(--primary__bg);
  /* Active button border */
  --mnu-btn_A_H__icon: var(--pm-yellow);
  /* Active button icon color */
  --mnu-btn_A_H__label: var(--pm-sky-blue);
  /* Active button label color */
  --mnu-btn_H__bg: var(--base-600);
  --mnu-btn_H__border: var(--pm-sky-blue);
  /* Hover border color */
  --mnu-btn_H__color: var(--pm-sky-blue);
  /* Hover color */
  --mnu-btn_H__icon: var(--pm-yellow);
  /* Hover icon color */
  --mnu-btn_H__label: var(--base-50);
  /* Hover label color */
  --mnu-btn_H_A__bg: transparent;
  --mnu-btn_H_A__border: var(--pm-primary-blue);
  /* Hover border color */
  --mnu-btn_H_A__color: var(--base-400);
  /* Hover color */
  --mnu-btn_H_A__icon: var(--pm-yellow);
  /* Hover icon color */
  --mnu-btn_H_A__label: var(--base-50);
  /* Hover label color */
  --mnu-toggle-btn__icon: var(--base-50);
  --mnu-toggle-btn__icon_h: var(--pm-sky-blue);
  --mnu-toggle-btn__icon_h_a: var(--pm-yellow);
  --mnu-toggle-btn__icon_bg: transparent;
  --mnu-toggle-btn__icon_bg_h: var(--base-600);
  --mnu-toggle-btn__icon_bg_h_a: var(--base-600);
  /* Cards */
  --cardBodyPadding: 1.25rem;
  --cardTitleFontSize: 1.5rem;
  --cardTitleFontWeight: 700;
  --cardSubTitleFontWeight: 400;
  --cardSubTitleColor: var(--base-300);
  --cardContentPadding: 1.25rem 0;
  --cardFooterPadding: 1.25rem 0 0 0;
  --cardShadow: var(--cardShadowSmall);
  /* Tag and Button Styles */
  /* --PButton_bg: var(--pm-primary); */
  /* --PButton_border: var(--pm-primary); */
  /* --PButton_text: var(--text_primary); */
  --TagDangerBG: var(--red-500);
  --TagDangerText: var(--base-50);
  --TagWarningBG: var(--orange-500);
  --TagWarningText: var(--base-50);
  --TagSuccessBG: var(--green-400);
  --TagSuccessText: var(--base-50);
  --TagPrimaryBG: var(--pm-primary);
  --TagPrimaryText: var(--base-50);
  /* Miscellaneous Component Colors */
  --SessionMetaItemsBG: var(--base-650);
  --SessionMetaItemColor: var(--base-100);
  --SessionMetaItemStrongLabel: var(--base-100);
  --SessionMetaItemIcon: var(--base-100);
  /* Session HeaderStats */
  --SessionHeaderStatsBG: var(--base-650);
  --SessionHeaderStatsBorder: var(--base-300);
  /* Session Performance Doughnut Chart */
  --SessionPercDoughnutTrackBG: var(--base-500);
  --SessionPercDoughnutTrackCorrectBG: blue;
  --SessionPercDoughnutTrackIncorrectBG: orange;
  /* Sessions Directory */
  --SessionsDirectoryBG: var(--base-900);
  /* Button States */
  --PButton_h_bg: var(--pm-primary-bright);
  --PButton_h_border: var(--pm-primary-bright);
  --PButtonOutline_bg: transparent;
  --PButtonOutline_border: var(--base-500);
  --PButtonOutline_text: var(--base-400);
  --PButtonOutline_text_opposite: var(--base-300);
  --PButtonOutline_bg_h: transparent;
  --PButtonOutline_border_h: var(--base-600);
  --PButtonOutline_text_h: var(--base-400);
  --PButtonOutline_text_opposite_h: var(--base-500);
  /* Tags */
  --TagDangerBG: var(--red-500);
  --TagDangerText: var(--base-50);
  --TagWarningBG: var(--orange-500);
  --TagWarningText: var(--base-50);
  --TagSuccessBG: var(--green-400);
  --TagSuccessText: var(--base-50);
  --TagInfoBG: var(--pm-sky-blue);
  --TagInfoText: var(--base-50);
  --TagPrimaryBG: var(--pm-primary-blue);
  --TagPrimaryText: var(--base-50);
  /* Sidebar Navigation Links and Text */
  --AdditionalLinksText: var(--base-400);
  --AdditionalLinksText_h: var(--pm-yellow);
  /* Copyright Section */
  --CopyrightText: var(--base-200);
  --CopyrightSmallText: var(--base-300);
  --CopyrightLink: var(--pm-sky-blue);
  --CopyrightLink_h: var(--pm-yellow);
  /* Mobile Header */
  --sec-mobile-bg-container: var(--base-900);
  --sec-header-mobile_bg: var(--primary__bg);
  --sec-header-mobile-border-bottom: var(--divider__bg_dark);
  --sec-header-mobile-vertical-separator: var(--divider__bg_dark);
  --sec-header-mobile-page-title: var(--base-50);
  --sec-mobile-hamburger-icon: var(--base-50);
  --sec-mobile-account-button-bg: var(--base-600);
  --sec-mobile-account-button-bg_h: var(--base-500);
  --sec-mobile-account-button-text: var(--base-50);
  --sec-mobile-account-button-text_h: var(--pm-primary-blue);
  /* Mobile Flyout Menu */
  --sec-mobile-flyout-menu-bg: var(--base-900);
  --sec-mobile-flyout-menu-border: var(--divider__bg_dark);
  --sec-mobile-flyout-menu-text: var(--base-50);
  --sec-mobile-flyout-menu-icon: var(--base-50);
  --sec-mobile-flyout-menu-icon_h: var(--pm-sky-blue);
  --sec-mobile-flyout-menu-divider: var(--base-200);
  --sec-mobile-flyout-menu-item-text: var(--base-100);
  --sec-mobile-flyout-menu-item-bg: var(--base-900);
  --sec-mobile-flyout-menu-item-icon: var(--base-100);
  --sec-mobile-flyout-menu-item-text: var(--base-100);
  --sec-mobile-flyout-menu-item-text_h: var(--pm-sky-blue);
  --sec-mobile-flyout-menu-item-bg_h: var(--base-600);
  --sec-mobile-flyout-menu-item-icon_h: var(--pm-sky-blue);
  --sec-mobile-flyout-menu-item-bg_a: var(--base-100);
  --sec-mobile-flyout-menu-item-text_a: var(--pm-primary-blue);
  --sec-mobile-flyout-menu-item-icon_a: var(--pm-primary-blue);
  /* .sec-meta */
  --sec-meta-menu-btn_bg: transparent;
  --sec-meta-menu-btn_icon: var(--text_primary);
  --sec-meta-menu-btn_border: transparent;
  --sec-meta-menu-btn_H__bg: #1f1f81;
  --sec-meta-menu-avatar-btn_H__bg: #1f1f81;
  --sec-meta-menu-btn_H__bg: var(--base-500);
  --sec-meta-menu-avatar-btn-icon: #ededed;
  --sec-meta-menu-avatar-btn-text: @ededed;
  --sec-meta-menu-avatar-btn_H__bg: var(--base-500);
  --sec-meta-menu-avatar-btn-icon_h: #ededed;
  /* Theme switcher styles */
  --secThemeSwitcher_bg: transparent;
  --secThemeSwitcher_bg_h: transparent;
  /* Theme switcher hover background */
  --secThemeSwitcherBtn_icon: var(--base-60);
  /* Theme switcher icon */
  --secThemeSwitcherBtn_icon_h: var(--pm-sky-blue);
  /* Theme switcher hover icon */
  /* Section Card Styling */
  --section-card__bg: var(--cardBG);
  --section-card__text: var(--base-60);
  --section-card__label: var(--base-50);
  --section-card__icon: var(--pm-sky-blue);
  /* Section Card Meta */
  --section-card-meta-link-btn_BG: transparent;
  --section-card-meta-link-btn_text: var(--base-50);
  --section-card-meta-link-btn_text_h: var(--pm-primary);
  --section-card-q-total_text: var(--base-50);
  /* Section Card Exam Option */
  --dash-exam-option__bg: var(--base-700);
  --dash-exam-option__title: var(--base-50);
  --dash-exam-option__text: var(--base-50);
  --dash-exam-option__icon: var(--base-50);
  --dash-exam-option__border: var(--base-600);
  --dash-exam-option__bg_h: var(--base-600);
  --dash-exam-option__icon_h: var(--base-50);
  --dash-exam-option__border_h: var(--base-400);
  --dash-exam-option__bg_a: var(--base-600);
  --dash-exam-option__title_a: var(--base-50);
  --dash-exam-option__icon_a: var(--base-50);
  --dash-exam-option__border_a: var(--pm-primary-bright);
  /* Section Button Start */
  --section-card-start-button__bg: var(--pm-primary);
  --section-card-start-button_H__bg: var(--pm-primary-brighter);
  --section-card-start-button_H__border: var(--pm-primary-brighter);
  --SessionStat_correct_bg: var(--primary__bg);
  --SessionStat_correct_icon: var(--green-500);
  --SessionStat_correct_text_pri: var(--base-50);
  --SessionStat_correct_text_sec: var(--base-400);
  --SessionStat_incorrect_bg: var(--primary__bg);
  --SessionStat_incorrect_icon: var(--red-500);
  --SessionStat_incorrect_text_pri: var(--base-50);
  --SessionStat_incorrect_text_sec: var(--base-400);
  /* Session Performance Doughnut Chart */
  --SessionPercDoughnutTrackCorrectBG: var(--green-500);
  --SessionPercDoughnutTrackIncorrectBG: var(--red-500);
  /* Floating Progress Bar for Sessions */
  --SessionFloatingProgressBarBG: var(--base-700);
  /* Active Question Styling */
  --ActiveQuestionQuestionBG: var(--base-600);
  --ActiveQuestionQuestionText: var(--base-50);
  --ActiveQuestionQuestionBorder: var(--base-300);
  --ActiveQuestionExplanationBG: var(--base-700);
  --ActiveQuestionExplanationText: var(--base-50);
  --ActiveQuestionExplanationBorder: var(--base-800);
  --ActiveQuestionExplanationLabel: var(--base-100);
  /* Profile Section */
  --ProfileSectionBG: var(--primary__bg);
  --ProfilePanelFormLabel: var(--base-300);
  --ProfilePanelFormInputBG: var(--base-700);
  --ProfilePanelFormInputBorder: var(--base-500);
  --ProfilePanelFormInputBorder_h: var(--pm-primary);
  /* Select Button */
  --SelectButtonBtnBg: var(--base-500);
  --SelectButtonBtnBorder: var(--base-500);
  --SelectButtonBtnText: var(--base-50);
  --SelectButtonBtnBg_h: var(--base-300);
  --SelectButtonBtnBorder_h: var(--base-400);
  --SelectButtonBtnText_h: var(--base-50);
  --SelectButtonBtnBg_a: var(--base-300);
  --SelectButtonBtnText_a: var(--base-50);
  --SelectButtonBtnBorder_a: var(--base-300);
  --SelectButtonBtnBg_a_h: var(--base-300);
  --SelectButtonBtnText_a_h: var(--base-50);
  --SelectButtonBtnBorder_a_h: var(--base-300);
  /* Question Options */
  --QuestionOptionBg: transparent;
  --QuestionOptionBlockBg: transparent;
  --QuestionOptionText: var(--base-50);
  --QuestionOptionIconBG: var(--base-400);
  --QuestionOptionIconColor: var(--base-50);
  --QuestionOptionQuestionText: var(--base-50);
  --QuestionOptionQuestionBG: var(--base-500);
  --QuestionOptionSecQuestionBorder: var(--base-500);
  --QuestionOptionQuestionStatsProgressBarColor: var(--base-100);
  --QuestionOptionQuestionStatsTextColor: var(--base-50);
  --QuestionOption_h_Bg: transparent;
  --QuestionOption_h_BlockBg: transparent;
  --QuestionOption_h_QuestionBG: var(--base-400);
  --QuestionOption_h_Text: var(--base-50);
  --QuestionOption_h_IconBG: var(--base-300);
  --QuestionOption_h_IconColor: var(--pm-yellow);
  --QuestionOption_h_QuestionText: var(--base-50);
  --QuestionOptionQuestionStatsProgressBarColor_h: var(--base-100);
  /* Progress bar color */
  --QuestionOptionQuestionStatsTextColor_h: var(--base-50);
  /* Progress bar text color */
  --QuestionOption_h_a_Bg: transparent;
  --QuestionOption_h_a_BlockBg: transparent;
  --QuestionOption_h_a_QuestionBG: var(--base-300);
  --QuestionOption_h_a_Text: var(--base-50);
  --QuestionOption_h_a_IconBG: var(--base-300);
  --QuestionOption_h_a_IconColor: var(--pm-yellow);
  --QuestionOption_h_a_QuestionText: var(--base-50);
  --QuestionOptionQuestionStatsProgressBarColor_h_a: var(--base-100);
  /* Progress bar color */
  --QuestionOptionQuestionStatsTextColor_h_a: var(--base-50);
  /* Progress bar text color */
  /* Correct Question Options */
  --QuestionOptionCorrectBg: transparent;
  --QuestionOptionCorrectBlockBg: transparent;
  --QuestionOptionCorrectText: var(--base-50);
  --QuestionOptionCorrectIconBG: var(--green-400);
  --QuestionOptionCorrectIconColor: var(--base-50);
  --QuestionOptionCorrectQuestionText: var(--base-50);
  --QuestionOptionCorrectQuestionBG: var(--green-500);
  --QuestionOptionCorrectQuestionStatsProgressBarColor: var(--green-100);
  --QuestionOptionCorrectQuestionStatsTextColor: var(--base-50);
  --QuestionOptionCorrect_h_Bg: transparent;
  --QuestionOptionCorrect_h_BlockBg: transparent;
  --QuestionOptionCorrect_h_Text: var(--base-50);
  --QuestionOptionCorrect_h_IconBG: var(--base-400);
  --QuestionOptionCorrect_h_IconColor: var(--base-50);
  --QuestionOptionCorrect_h_QuestionBG: var(--base-500);
  --QuestionOptionCorrect_h_a_Bg: transparent;
  --QuestionOptionCorrect_h_a_BlockBg: transparent;
  --QuestionOptionCorrect_h_a_Text: var(--base-50);
  --QuestionOptionCorrect_h_a_IconBG: var(--base-400);
  --QuestionOptionCorrect_h_a_IconColor: var(--base-50);
  --QuestionOptionCorrect_h_a_QuestionBG: var(--base-500);
  /* Incorrect Question Options */
  --QuestionOptionIncorrectBg: transparent;
  --QuestionOptionIncorrectBlockBg: transparent;
  --QuestionOptionIncorrectText: var(--base-50);
  --QuestionOptionIncorrectIconBG: var(--pink-400);
  --QuestionOptionIncorrectIconColor: var(--base-50);
  --QuestionOptionIncorrectQuestionText: var(--base-50);
  --QuestionOptionIncorrectQuestionBG: var(--pink-500);
  --QuestionOptionIncorrectQuestionStatsProgressBarColor: var(--pink-100);
  --QuestionOptionIncorrectQuestionStatsTextColor: var(--base-50);
  --QuestionOptionIncorrect_h_Bg: transparent;
  --QuestionOptionIncorrect_h_BlockBg: transparent;
  --QuestionOptionIncorrect_h_Text: var(--base-50);
  --QuestionOptionIncorrect_h_IconBG: var(--base-400);
  --QuestionOptionIncorrect_h_IconColor: var(--base-50);
  --QuestionOptionIncorrect_h_QuestionBG: var(--base-500);
  --QuestionOptionIncorrect_h_a_Bg: transparent;
  --QuestionOptionIncorrect_h_a_BlockBg: transparent;
  --QuestionOptionIncorrect_h_a_Text: var(--base-50);
  --QuestionOptionIncorrect_h_a_IconBG: var(--base-400);
  --QuestionOptionIncorrect_h_a_IconColor: var(--base-50);
  --QuestionOptionIncorrect_h_a_QuestionBG: var(--base-500);
  /* Floating Progress Bar for Sessions */
  --SessionFloatingProgressBarBG: var(--base-700);
  /* Panels */
  --panelHeaderBorderColor: var(--base-500);
  --panelHeaderBorder: 1px solid var(--base-500);
  --panelHeaderBg: var(--base-700);
  --panelHeaderTextColor: var(--base-50);
  --panelContentBg: var(--base-600);
  --panelContentEvenRowBg: scale-color(var(--base-600), var(--lightness): -5%);
  --panelContentTextColor: var(--base-50);
  --panelFooterBg: var(--base-600);
  --panelFooterTextColor: var(--base-50);
  /* Cards */
  --cardBodyPadding: 1.25rem;
  --cardTitleFontSize: 1.5rem;
  --cardTitleFontWeight: 700;
  --cardSubTitleFontWeight: 400;
  --cardSubTitleColor: var(--base-50);
  --cardContentPadding: 1.25rem 0;
  --cardFooterPadding: 1.25rem 0 0 0;
  --cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  --CardHeaderBG: var(--base-700);
  --CardHeaderBorder: var(--base-500);
  --CardHeaderTitle: var(--base-100);
  --CardHeaderSubtitle: var(--base-100);
  --CardText: var(--base-50);
  --cardTitleDivider: var(--base-100);
  /* Menu's */
  --MenuListBG: var(--base-600);
  --MenuDropdownBG: transparent;
  --MenuDropdownItemBG: var(--base-700);
  --MenuDropdownItemText: var(--base-50);
  --MenuDropdownItemIcon: var(--base-100);
  --MenuDropdownItemBG_h: var(--base-600);
  --MenuDropdownItemText_h: var(--base-50);
  --MenuDropdownItemIcon_h: var(--base-50);
  /* Fields THESE ARE THE ONLY FIELD DEFINITIONS */
  --FormDividerColor: var(--base-500);
  --FieldLabelColor: var(--base-100);
  /* InputText */
  --InputBg: var(--base-800);
  --InputTextColor: var(--base-60);
  --InputTextPlaceholderColor: var(--base-100);
  --InputTextBorder: var(--base-500);
  --InputTextBorder_h: var(--pm-primary);
  /* DatePicker */
  --DatePickerBG: var(--base-800);
  --DatePickerInputTextColor: var(--base-50);
  --DatePickerInputIconColor: var(--base-100);
  --DatePickerBorder: var(--base-500);
  --DatePickerPlaceholderColor: var(--base-100);
  --DatePickerBG_h: var(--base-800);
  --DatePickerInputTextColor_h: var(--base-50);
  --DatePickerInputIconColor_h: var(--base-100);
  --DatePickerBorder_h: var(--base-500);
  --DatePickerPlaceholderColor_h: var(--base-50);
  --DatePickerBorder_a: var(--pm-sky-blue);
  --DatePickerMenuBG: var(--base-600);
  --DatePickerBorder: var(--base-500);
  --DatePickerArrowBG: var(--base-600);
  --DatePickerCalendarTextColor: var(--base-50);
  --DatePickerArrowColor: var(--base-100);
  --DatePickerArrowColor_h: var(--pm-sky-blue);
  --DatePickerButtonColor: var(--base-60);
  --DatePickerButtonBG: var(--base-600);
  --DatePickerButtonColor_h: var(--pm-sky-blue);
  --DatePickerButtonBG_h: var(--base-500);
  --DatePickerButtonBorder_h: var(--pm-sky-blue);
  --DatePickerCalendarItemColor: var(--base-50);
  --DatePickerCalendarItemBG: var(--base-600);
  --DatePickerCalendarItemBG_h: var(--base-300);
  /* IconField */
  --IconFieldIcon: var(--base-100);
  --DropdownBg: var(--base-800);
  --DropdownBorder: var(--base-500);
  --DropdownPanelBg: var(--base-700);
  --DropdownPanelBorder: var(--base-700);
  --DropdownPanelBg_h: var(--base-500);
  --DropdownItemText: var(--base-50);
  --DropdownItemCheckIcon: var(--base-100);
  --DropdownItemBg_a: var(--base-500);
  --DropdownPanelFocusBorder: var(--pm-sky-blue);
  --DropdownTriggerIconColor: var(--base-100);
  /* Checkbox */
  --checkboxBorder: var(--base-500);
  --checkboxInputBG: var(--base-700);
  --checkboxInputColor: var(--base-50);
  /* --borderRadius: 6px; */
  --checkboxIconColor: var(--base-50);
  --checkboxIconFontSize: 14px;
  --checkboxActiveBorderColor: var(--pm-sky-blue);
  --checkboxActiveBg: var(--pm-sky-blue);
  --checkboxActiveIconColor: var(--base-50);
  /* Multi Select */
  --MultiSelectHeaderBg: var(--base-800);
  --MultiSelectHeaderBorder: var(--base-500);
  --MultiSelectHeaderPlaceholderText: var(--base-200);
  --MultiSelectHeaderDropArrowIcon: var(--base-300);
  --MultiSelectHeaderBorder_h: var(--pm-sky-blue);
  --MultiSelectHeaderBorder_a: var(--pm-sky-blue);
  --MultiSelectHeaderBorder_f: var(--pm-sky-blue);
  --MultiSelectHeaderCloseIcon: var(--base-300);
  --MultiSelectHeaderCloseIcon_h: var(--pm-sky-blue);
  --MultiSelectHeaderFilterIcon: var(--base-200);
  --MultiSelectItemText: var(--base-50);
  --MultiSelectItemBG: var(--base-700);
  --MultiSelectItemBG_f: var(--base-600);
  --MultiSelectScrollHeight: 200px;
  --MultiSelectPanelBg: var(--base-700);
  --MultiSelectPanelBorder: var(--base-500);
  /* Session Summary */
  --SessionsChartText_pri: var(--base-50);
  --SessionsChartText_sec: var(--base-60);
  --SessionStat_correct_bg: var(--primary__bg);
  --SessionStat_correct_icon: var(--green-500);
  --SessionStat_correct_text_pri: var(--base-50);
  --SessionStat_correct_text_sec: var(--base-400);
  --SessionStat_incorrect_bg: var(--primary__bg);
  --SessionStat_incorrect_icon: var(--pink-500);
  --SessionStat_incorrect_text_pri: var(--base-50);
  --SessionStat_incorrect_text_sec: var(--base-400);
  --SessionSummaryCardBG: var(--base-600);
  --SessionSummaryCardBorder: var(--base-350);
  --SessionSummaryCardTitle: var(--base-700);
  --SessionSummaryCardSubtitle: var(--base-500);
  --SessionSummaryCardIcon: var(--base-500);
  --SessionCardTitle: var(--base-50);
  --SessionCardMetricBG: var(--base-500);
  --SessionCardMetricBorder: var(--base-400);
  --SessionCardMetricIcon: var(--pm-sky-blue);
  --SessionCardMetricValue: var(--base-50);
  --SessionCardMetricLabel: var(--base-100);
  --SessionCardMetricCategoryLabels: var(--base-50);
  --SessionCardMetricRevealText: var(--base-50);
  --SessionCategoriesCardBG: var(--base-600);
  /* Floating Progress Bar */
  --SessionFloatingProgressBarBG: var(--base-700);
  --ActiveQuestionLearnModeLabel: var(--base-100);
  --ActiveQuestionLearnModeIcon: var(--pm-sky-blue);
  /* Profile Section */
  --ProfileSectionBG: var(--primary__bg);
  --ProfileNavContainerBG: transparent;
  --ProfilePanelHeaderTitle: var(--base-50);
  --ProfilePanelHeaderText: var(--base-400);
  --ProfilePanelFormLabel: var(--base-300);
  --ProfilePanelFormInput: var(--base-300);
  --ProfilePanelFormInputBG: var(--base-700);
  --ProfilePanelFormInputBorder: var(--base-500);
  --ProfilePanelFormInputBorder_h: var(--pm-primary);
  /* Subscription Cards */
  --SubscriptionCardBG: var(--primary__bg);
  --SubscriptionCardBorder: var(--base-400);
  --SubscriptionCardText: var(--base-50);
  --SubscriptionCardIcon: var(--base-50);
  --SubscriptionCardProgressBarBG: var(--base-500);
  --SubscriptionCardProgressBarProgressBG: var(--pm-sky-blue);
  --SubscriptionCardProgressBarProgressText: var(--base-50);
  --SubscriptionCardLabelColor: var(--base-60);
  --SubscriptionCardValue: var(--base-100);
  /* Cards */
  --CardHeaderBG: var(--base-700);
  --CardHeaderBorder: var(--base-500);
  --CardHeaderTitle: var(--base-50);
  --CardHeaderText: var(--base-200);
  --CardText: var(--base-50);
  --CardMetaBtnBg: var(--base-700);
  --CardMetaBtnText: var(--base-50);
  --CardMetaBtnIcon: var(--base-50);
  --CardMetaBtnBorder: var(--base-500);
  --CardMetaBtnBg_h: var(--pm-primary);
  --CardMetaBtnText_h: var(--base-50);
  --CardMetaBtnIcon_h: var(--base-50);
  --CardMetaBtnBorder_h: var(--pm-primary);
  /* Panels */
  --panelHeaderBorderColor: var(--base-500);
  --panelHeaderBorder: 1px solid var(--base-500);
  --panelHeaderBg: var(--base-700);
  --panelHeaderTextColor: var(--base-50);
  --panelContentBg: var(--base-600);
  --panelContentEvenRowBg: scale-color(var(--base-600), var(--lightness): -5%);
  --panelContentTextColor: var(--base-50);
  --panelFooterBg: var(--base-600);
  --panelFooterTextColor: var(--base-50);
  /* Card Shadows */
  --cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  /* Floating Progress Bar */
  --SessionFloatingProgressBarBG: var(--base-700);
  --QuestionCountBoxColor: var(--base-60);
  /* Session Categories Section */
  --QuestionCountBoxAvailableBorder: var(--pm-sky-blue);
  /* Available question box border */
  --QuestionCountBoxAvailableBG: transparent;
  --QuestionCountBoxAvailableColor: var(--pm-sky-blue);
  /* Available question text */
  --QuestionCountBoxUnavailableBorder: var(--red-300);
  /* Unavailable question box border */
  --QuestionCountBoxUnavailableBG: transparent;
  --QuestionCountBoxUnavailableColor: var(--red-300);
  /* Unavailable question text */
  /* Session Categories Section */
  --CategoriesWidgetBG: var(--base-700);
  --CatOptionBG: var(--base-600);
  --CatOptionLabelColor: var(--base-50);
  --CatOptionDividerColor: var(--base-500);
  --CatOptionBorderBottom: var(--base-500);
  --CatOptionDropToggleIcon: var(--base-100);
  --CatOptionDropToggleBG: var(--base-500);
  --CatOptionDropToggleIcon_h: var(--pm-yellow);
  --CatOptionMetaColor: var(--base-100);
  --CatOptionMetaAttemptedColor: var(--base-60);
  --CatOptionMetaDividerColor: var(--base-50);
  --CatOptionMetaTotalColor: var(--green-50);
  --CatOptionLabelColor_h: var(--pm-sky-blue);
  /* Category hover label color */
  --CatOptionBG_h: var(--base-500);
  /* Category hover background */
  --CatOptionDropToggleVerticalDivider: var(--base-350);
  /* Vertical divider */
  --CatOptionDropToggleIcon_h: var(--base-50);
  /* Hover toggle icon */
  --section-card-start-button__bg: var(--pm-primary);
  --section-card-start-button_H__bg: var(--pm-primary);
  --section-card-start-button__border: var(--pm-primary);
  /* Exam Options */
  --dash-exam-option__bg: var(--base-500);
  --dash-exam-option__title: var(--base-50);
  --dash-exam-option__text: var(--base-50);
  --dash-exam-option__border: var(--base-500);
  --dash-exam-option__icon: var(--base-50);
  --dash-exam-option__icon_bg: transparent;
  --dash-exam-option__bg_h: var(--base-400);
  --dash-exam-option__title_h: var(--base-50);
  --dash-exam-option__text_h: var(--base-50);
  --dash-exam-option__icon_h: var(--pm-primary);
  --dash-exam-option__icon_border_h: var(--pm-primary);
  --dash-exam-option__bg_a: var(--pm-primary);
  --dash-exam-option__title_a: var(--base-50);
  --dash-exam-option__text_a: var(--base-50);
  --dash-exam-option__icon_a: var(--base-50);
  --dash-exam-option__icon_bg_a: var(--pm-primary);
  --dash-exam-option__icon_border_a: var(--pm-primary);
  /* Session Directory */
  --SessionLoadingText: var(--base-100);
  --SessionsDirectoryLoadingBG: var(--base-600);
  --SessionsDirectoryLoadingText: var(--base-50);
  --SessionDirecoryEntryTitleLink: var(--pm-sky-blue);
  --SessionDirecoryEntryTitleLink_h: var(--pm-yellow);
  --SessionTitleDialogBG: var(--base-700);
  --SessionTitleDialogBorder: var(--base-500);
  --SessionTitleDialogText: var(--base-50);
  --SessionTitleDialogTextLabel: var(--base-50);
  --SessionTitleDialogExamTitle: var(--pm-sky-blue);
  --SessionTitleDialogTextValue: var(--base-50);
  --SessionTitleDialogSessionTypeLabel: var(--base-100);
  --SessionTitleDialogSessionTypeLabel_h: var(--pm-sky-blue);
  /* Metrics and Session Stats */
  --SessionStat_bg: var(--base-600);
  --SessionStat_icon: var(--blue-500);
  --SessionStat_text_pri: var(--base-50);
  --SessionStat_text_sec: var(--base-200);
  --SessionStat_correct_bg: var(--primary__bg);
  --SessionStat_correct_icon: var(--green-500);
  --SessionStat_correct_text_pri: var(--base-50);
  --SessionStat_correct_text_sec: var(--base-400);
  --SessionStat_incorrect_bg: var(--primary__bg);
  --SessionStat_incorrect_icon: var(--pink-500);
  --SessionStat_incorrect_text_pri: var(--base-50);
  --SessionStat_incorrect_text_sec: var(--base-400);
  /* Panels */
  --panelHeaderBorderColor: var(--base-500);
  --panelHeaderBg: var(--base-700);
  --panelHeaderTextColor: var(--base-50);
  --panelContentBg: var(--base-600);
  --panelContentTextColor: var(--base-50);
  --panelFooterBg: var(--base-600);
  --panelFooterTextColor: var(--base-50);
  /* Card Shadows */
  --cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  --CardHeaderBG: var(--base-700);
  --CardHeaderBorder: var(--base-500);
  --CardHeaderTitle: var(--base-50);
  --CardMetaBtnText: var(--base-50);
  --CardMetaBtnIcon: var(--base-50);
  --CardMetaBtnBorder: var(--base-500);
  --CardMetaBtnBg_h: var(--pm-primary);
  --CardMetaBtnText_h: var(--base-50);
  --CardMetaBtnIcon_h: var(--base-50);
  --CardMetaBtnBorder_h: var(--pm-primary);
  /* Session Empty State */
  --SessionEmptyStateBG: var(--base-700);
  --SessionEmptyStateBorder: var(--base-500);
  --SessionEmptyStateTitleColor: var(--base-50);
  --SessionEmptyStateDescColor: var(--base-200);
  /* Password Modal */
  --PasswordModalBG: var(--base-700);
  --PasswordModalBorder: var(--base-500);
  --PasswordModalTitleColor: var(--base-50);
  --PasswordModalTextColor: var(--base-200);
  --PasswordModalInputBG: var(--base-600);
  --PasswordModalInputBorder: var(--base-500);
  --PasswordModalInputText: var(--base-200);
  --PasswordModalInputFocusBorder: var(--pm-sky-blue);
  --PasswordModalRequirementText: var(--base-300);
  --PasswordModalRequirementMetColor: var(--green-400);
  /* Skeleton Loading */
  --SkeletonBase: var(--base-600);
  --SkeletonChartPrimary: var(--base-500);
  --SkeletonText: var(--base-400);
  --SkeletonElement: var(--base-500);
  /* Create Page UI Elements */
  --CreateInfoIconColor: var(--base-200);
  --CreateInfoIconColorHover: var(--pm-sky-blue);
  --CreateSlashColor: var(--base-200);
  --CreateSelectAllButtonText: var(--base-100);
  --CreateSelectAllButtonTextHover: var(--pm-sky-blue);
  --CreateSelectAllButtonBorder: transparent;
  --CreateSelectAllButtonBorderHover: var(--pm-sky-blue);
  /* Global Scrollbar */
  --ScrollbarTrackBG: var(--base-700);
  --ScrollbarThumbBG: var(--base-500);
  --ScrollbarThumbBGHover: var(--base-400);
  --ScrollbarThumbBGActive: var(--base-300);
  --ScrollbarWidth: 6px;
  --ScrollbarBorderRadius: 3px;
  /* UI Action Cards */
  --ActionCardBg: var(--base-700);
  --ActionCardBorder: var(--base-700);
  --ActionCardTitle: var(--base-50);
  --ActionCardSubtitle: var(--base-200);
  --ActionCardIcon: var(--base-100);
  --ModalBg: var(--base-700);
  --ModalTitleColor: var(--base-50);
  --ModalSubtitleColor: var(--base-200);
  --ModalTextColor: var(--base-100);
  /* Message component info variant */
  --message-component-info-bg: var(--base-700);
  --message-component-info-text: var(--blue-300);
  --message-component-info-border: var(--base-600);
  --message-component-info-icon: var(--blue-400);
  --message-component-info-icon-bg: var(--base-600);
  --message-component-info-icon-border: var(--base-500);
  --message-component-info-icon-text: var(--blue-300);
  /* Charts */
  --ChartExamProgValuesLabel: var(--base-100);
  --ChartExamProgValuesValue: var(--base-60);
  --ChartAttemptedLabel: var(--base-100);
  --ChartAttemptedPercValue: var(--base-50);
  --SkeletonBG: var(--base-700);
  --SkeletonAfterBG: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(38, 21, 148, 0.4), rgba(255, 255, 255, 0));
  --LoadingSpinnerColor: var(--base-50);
  --LoadingSpinnerLabelColor: var(--base-60);
  --SessionTimingLabelColor: var(--base-60);
  --SessionTimingValueColor: var(--base-100);
  --SessionTimingTotalTimeValueColor: var(--base-60);
  --SessionTimingSliderTrackBG: var(--base-400);
  --SessionTimingSliderRangeBG: var(--pm-sky-blue);
  --SessionTimingSliderHandleBorder: var(--base-60);
  --SessionTimingSliderHandleBG: var(--base-60);
  --SessionTimingHintsText: var(--base-100);
  --SessionTimingHintsIcon: var(--base-50);
  /* Sessions Directory */
  /* Sessions Directory */
  --tableRowButtonBG: var(--base-600);
  --tableRowButtonText: var(--base-50);
  --tableRowButtonBorder: var(--pm-sky-blue);
  --tableRowButton_h_BG: var(--pm-sky-blue);
  --tableRowButton_h_Text: var(--base-50);
  --tableRowButton_h_Border: var(--pm-sky-blue);
  --tableRowButton_h_a_BG: var(--pm-sky-blue);
  --tableRowButton_h_a_Text: var(--base-50);
  --tableRowButton_h_a_Border: var(--pm-sky-blue);
  --SessionHeaderTitle: var(--base-60);
  --SessionHeaderMetaLabel: var(--base-50);
  --SessionHeaderMetaLabelStrong: var(--pm-sky-blue);
  --SessionHeaderMetaIcon: var(--base-50);
  --SessionsNoQuestionsTitle: var(--base-50);
  --SessionsNoQuestionsSubtitle: var(--base-100);
  --btn-session-continue-bg: var(--pm-sky-blue);
  --btn-session-continue-border: var(--pm-sky-blue);
  --btn-session-continue-text: white;
  --btn-session-continue-icon: white;
  --btn-session-continue-bg_h: var(--pm-sky-blue);
  --btn-session-continue-border_h: var(--pm-sky-blue);
  --btn-session-continue-text_h: white;
  --btn-session-continue-icon_h: white;
  --btn-session-continue-bg_h_a: var(--pm-sky-blue);
  --btn-session-continue-border_h_a: var(--pm-sky-blue);
  --btn-session-continue-text_h_a: white;
  --btn-session-continue-icon_h_a: white;
  /* Style 1 */
  --btn-a-bg: var(--blue-600);
  --btn-a-border: var(--blue-600);
  --btn-a-border-width: 1px;
  --btn-a-text: var(--base-50);
  --btn-a-icon: var(--base-50);
  --btn-a-bg_h: var(--pm-sky-blue);
  --btn-a-border_h: var(--pm-sky-blue);
  --btn-a-border-width_h: 1px;
  --btn-a-text_h: var(--pm-sky-blue);
  --btn-a-icon_h: var(--base-50);
  --btn-a-bg_h_a: var(--pm-sky-blue);
  --btn-a-border_h_a: var(--pm-sky-blue);
  --btn-a-border-width_h_a: 1px;
  --btn-a-text_h_a: var(--base-50);
  --btn-a-icon_h_a: var(--base-50);
  --btn-a-bg_a: var(--pm-sky-blue);
  --btn-a-border_a: var(--pm-sky-blue);
  --btn-a-text_a: var(--base-50);
  --btn-a-icon_a: var(--base-50);
  --btn-link-bg: transparent;
  --btn-link-border: transparent;
  --btn-link-text: var(--base-50);
  --btn-link-bg_h: transparent;
  --btn-link-border_h: transparent;
  --btn-link-text_h: var(--pm-sky-blue);
  --btn-link-bg_a: transparent;
  --btn-link-border_a: transparent;
  --btn-link-text_a: var(--pm-sky-blue);
  --btn-primary-outline-bg: transparent;
  --btn-primary-outline-border: var(--pm-primary);
  --btn-primary-outline-text: var(--pm-primary);
  --btn-primary-outline-bg_h: var(--pm-primary-brighter);
  --btn-primary-outline-border_h: var(--pm-primary-brighter);
  --btn-primary-outline-text_h: var(--base-50);
  --btn-primary-outline-bg_a: var(--pm-primary-brighter);
  --btn-primary-outline-border_a: var(--pm-primary-brighter);
  --btn-primary-outline-text_a: var(--base-50);
  --NotificationEntryIconColor: var(--base-50);
  --NotificationEntryBorder: var(--base-400);
  --NotificationTitle: var(--base-50);
  --NotificationMessage: var(--base-100);
  --NotificationMessageDate: var(--pm-sky-blue);
  --NotificationEntryBtnBG: var(--base-500);
  --NotificationEntryBtnBorder: var(--base-400);
  --NotificationEntryBtnText: var(--base-50);
  --NotificationEntryBtnIcon: var(--base-50);
  --NotificationEntryBtnBG_h: var(--pm-sky-blue);
  --NotificationEntryBtnBorder_h: var(--pm-sky-blue);
  --NotificationEntryBtnText_h: var(--base-50);
  --NotificationEntryBtnIcon_h: var(--base-50);
  --NotificationEntryBtnBG_h_a: var(--base-50);
  --NotificationEntryBtnBorder_h_a: var(--base-300);
  --NotificationEntryBtnText_h_a: var(--base-650);
  --NotificationEntryBtnIcon_h_a: var(--base-50);
  /* Modal */
  --NotificationModalBG: var(--base-600);
  --NotificationModalBorder: var(--base-500);
  --NotificationModalTitle: var(--base-50);
  --NotificationModalText: var(--base-50);
  /* This styles refer to the simple confirm popoverpanels which the goto question dialog is using on the session summary page */
  --modalDialogBG: var(--base-600);
  --modalDialogBorder: var(--base-500);
  --modalDialogText: var(--base-50);
  --modalDialogSearchBtnBG: var(--pm-primary-bright);
  --modalDialogSearchBtnBorder: var(--pm-primary-bright);
  --modalDialogSearchBtnText: var(--base-50);
  --modalDialogSearchBtnIcon: var(--base-50);
  --modalDialogSearchBtnBG_h: var(--pm-sky-blue);
  --modalDialogSearchBtnBorder_h: var(--pm-sky-blue);
  --modalDialogSearchBtnText_h: var(--base-50);
  --modalDialogSearchBtnIcon_h: var(--base-50);
  --modalDialogSearchBtnBG_a: var(--pm-sky-blue);
  --modalDialogSearchBtnBorder_a: var(--pm-sky-blue);
  --modalDialogSearchBtnText_a: var(--base-50);
  --modalDialogSearchBtnIcon_a: var(--base-50);
  --SessionsFiltersPanelBG: var(--base-600);
  --SessionsFiltersPanelBorder: var(--base-500);
  --SessionsFiltersPanelText: var(--base-50);
  --SessionsFiltersFieldLabel: var(--base-100);
  /* Filter Panel Form Elements */
  --SessionsFiltersSelectButtonBG: transparent;
  --SessionsFiltersSelectButtonBorder: var(--base-400);
  --SessionsFiltersSelectButtonText: var(--base-100);
  --SessionsFiltersSelectButtonBG_h: var(--base-500);
  --SessionsFiltersSelectButtonBorder_h: var(--pm-primary-bright);
  --SessionsFiltersSelectButtonText_h: var(--pm-sky-blue);
  --SessionsFiltersSelectButtonBG_a: var(--pm-primary-brighter);
  --SessionsFiltersSelectButtonBorder_a: var(--pm-primary-brighter);
  --SessionsFiltersSelectButtonText_a: var(--base-50);
  --SessionsFiltersDatePickerBG: var(--base-700);
  --SessionsFiltersDatePickerBorder: var(--base-500);
  --SessionsFiltersDatePickerText: var(--base-100);
  --SessionsFiltersDatePickerPlaceholder: var(--base-200);
  --SessionsFiltersDatePickerBG_h: var(--base-700);
  --SessionsFiltersDatePickerBorder_h: var(--pm-primary-bright);
  --SessionsFiltersDatePickerText_h: var(--base-100);
  --SessionsFiltersPanelBtnBG: var(--pm-primary-brighter);
  --SessionsFiltersPanelBtnBorder: var(--pm-primary-brighter);
  --SessionsFiltersPanelBtnText: var(--base-50);
  --SessionsFiltersPanelBtnBG_h: var(--pm-primary-bright);
  --SessionsFiltersPanelBtnBorder_h: var(--pm-primary-bright);
  --SessionsFiltersPanelBtnText_h: var(--base-50);
  --SessionsFiltersClearBtnBG: transparent;
  --SessionsFiltersClearBtnBorder: var(--base-400);
  --SessionsFiltersClearBtnText: var(--base-100);
  --SessionsFiltersClearBtnBG_h: var(--base-500);
  --SessionsFiltersClearBtnBorder_h: var(--base-300);
  --SessionsFiltersClearBtnText_h: var(--base-50);
  --BtnDirectoryActionBG: var(--base-400);
  --BtnDirectoryActionBorder: var(--base-400);
  --BtnDirectoryActionText: var(--base-50);
  --BtnDirectoryActionIcon: var(--base-50);
  --BtnDirectoryActionIcon_a: var(--base-50);
  --BtnDirectoryActionBG_h: var(--pm-sky-blue);
  --BtnDirectoryActionBorder_h: var(--pm-sky-blue);
  --BtnDirectoryActionText_h: var(--base-50);
  --BtnDirectoryActionIcon_h: var(--base-50);
  --BtnDirectoryActionBG_h_a: var(--pm-sky-blue);
  --BtnDirectoryActionBorder_h_a: var(--pm-sky-blue);
  --BtnDirectoryActionText_h_a: var(--base-50);
  --BtnDirectoryActionIcon_h_a: var(--base-50);
  --OnboardingModalBG: var(--base-700);
  --OnboardingModalBorder: var(--base-700);
  --OnboardingModalTitle: var(--base-60);
  --OnboardingModalSubtitle: var(--base-650);
  --OnboardingModalText: var(--base-50);
  --OnboardingModalTextStrong: var(--pm-sky-blue);
  --OnboardingModalEmphasis: var(--pm-primary);
  --OnboardingModalColSideContentBG: var(--base-700);
  --OnboardingModalColSideContentBorder: var(--base-50);
  --OnboardingModalColSideContentText: var(--base-50);
  --OnboardingModalSelectButtonBG: transparent;
  --OnboardingModalSelectButtonBorder: var(--base-400);
  --OnboardingModalSelectButtonText: var(--base-50);
  --OnboardingModalSelectButtonBG_h: var(--base-300);
  --OnboardingModalSelectButtonBorder_h: var(--base-300);
  --OnboardingModalSelectButtonText_h: var(--base-50);
  --OnboardingModalSelectButtonBG_h_a: var(--base-300);
  --OnboardingModalSelectButtonBorder_h_a: var(--base-300);
  --OnboardingModalSelectButtonText_h_a: var(--base-50);
  --OnboardingModalSelectButtonBG_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_a: var(--base-50);
  --OnboardingModalSelectButtonBG_a_h: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_a_h: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_a_h: var(--base-50);
  --OnboardingModalSelectButtonBG_a_h_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_a_h_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_a_h_a: var(--base-50);
  --SkipLinkColour: var(--base-100);
  --SkipLinkColour_h: var(--base-50);
  --days-remaining-label: var(--base-50);
  --days-remaining-count: var(--pm-sky-blue);
  --InputSwitchSliderBg: var(--base-300);
  --InputSwitchSliderBg_h: var(--pm-primary);
  --InputSwitchSliderBg_a: #10b981;
  --InputSwitchSliderHandle: var(--base-50);
  --placeholder-overlay-bg: rgba(54, 19, 156, 0.629); /* rgb(19 27 101 / 46%) */
  --placeholder-overlay-text: var(--base-50);
  /* Dashboard Index */
  /* Overview Bar */
  --OverviewBarWelcomeTitle: var(--base-50);
  --OverviewBarWelcomeTitleSpan: var(--pm-sky-blue);
  --OverviewBarWelcomeSubtitle: var(--base-50);
  --OverviewBarExamIcon: var(--base-100);
  --OverviewBarExamIconBorder: var(--base-500);
  --OverviewBarExamTitle: var(--base-60);
  --OverviewBarExamDate: var(--base-60);
  --OverviewBarExamDays: var(--base-100);
  --OverviewBarSetExamLink: var(--pm-sky-blue);
  --OverviewBarSetExamLink_h: var(--pm-sky-blue);
  --OverviewBarSetExamLinkIcon: var(--base-200);
  --OverviewBarSetExamLinkIcon_h: var(--base-200);
  --peerGroupWidgetLabelColour: var(--base-100);
  --peerGroupWidgetValueColour: var(--base-50);
  --peerGroupWidgetLoadingText: var(--base-200);
  --RecentSessionsEmptyTitle: var(--base-50);
  --RecentSessionsEmptySubtitle: var(--base-100);
  --RecentSessionsEmptyBG: var(--base-700);
  --RecentSessionsBorderColor: var(--base-500);
  --SkeletonLoaderText: var(--base-50);
  --SkeletonLoaderBG: var(--base-600);
  /* Categories charts */
  --ChartsEmptyStateText: var(--base-50);
  --ChartsEmptyStateSkeleton: var(--base-100);
  --ChartsEmptyStateBorder: var(--base-500);
  /* Help page */
  --ContactDetailsContainerBackground: var(--base-600);
  --ContactDetailIcon: var(--base-50);
  --ContactDetailIcon_h: var(--pm-sky-blue);
  --ContactDetailIconBG: var(--base-600);
  --ContactDetailIconBG_h: var(--base-700);
  --ContactDetailIconBorder: var(--base-50);
  --ContactDetailIconBorder_h: var(--pm-sky-blue);
  --ContactDetailTitle: var(--base-50);
  --ContactDetailTitle_h: var(--pm-sky-blue);
  --ContactDetailValue: var(--base-50);
  --ContactDetailValue_h: var(--base-100);
  --ContactDetailValueLink: var(--pm-sky-blue);
  --ContactDetailValueLink_h: var(--pm-cyan);
  --ContactWhatsappLink: var(--emerald-400);
  --ContactWhatsappLink_h: var(--emerald-300);
  --ContactSocialsTitle: var(--base-100);
  --ContactSocialsIcon: var(--base-50);
  --ContactSocialsIcon_h: var(--pm-sky-blue);
  --ContactSocialsIconBG: var(--base-600);
  --ContactSocialsIconBG_h: var(--base-700);
  --ContactFormContainerBackground: var(--base-600);
  --ContactFormInputBorder: var(--base-50);
  --ContactFormInputText: var(--base-50);
  --ContactFormInputPlaceholder: var(--base-100);
  --ContactFormInputBorder_h: var(--pm-sky-blue);
  --ContactFormInputText_h: var(--pm-sky-blue);
  --ContactFormInputPlaceholder_h: var(--pm-sky-blue);
  --ContactFormInputLabel: var(--base-50);
  --ContactFormInputLabel_h: var(--pm-sky-blue);
  /* Skeleton Loader Colors */
  --skeleton-base: var(--base-900);
  --skeleton-highlight: var(--base-800);
  --skeleton-circle-border: var(--base-700);
  --skeleton-text: var(--base-700);
  --skeleton-chart-primary: var(--base-600);
  --skeleton-chart-secondary: var(--base-700);
  --error-message: var(--red-400);
  --error-text: var(--red-400);
  --error-border: var(--red-500);
  --QuestionsTrackBG: transparent;
  --QTrackBlockBG: transparent;
  --QTrackBlockBorder: var(--indigo-900);
  --QTrackBlockText: #c7c7ff;
  --QTrackBlockAnsweredBG: transparent;
  --QTrackBlockAnsweredBorder: var(--indigo-900);
  --QTrackBlockAnsweredText: #c7c7ff;
  --QTrackBlockIncompleteBG: transparent;
  --QTrackBlockIncompleteBorder: var(--base-400);
  --QTrackBlockIncompleteText: var(--base-70);
  --QTrackBlockIncompleteBG_h: transparent;
  --QTrackBlockIncompleteBorder_h: var(--cyan-500);
  --QTrackBlockIncompleteText_h: white;
  --QTrackBlockIncompleteBG_a: transparent;
  --QTrackBlockIncompleteBorder_a: var(--cyan-500);
  --QTrackBlockIncompleteText_a: white;
  --QTrackBlockIncompleteBG_a_h: transparent;
  --QTrackBlockIncompleteBorder_a_h: var(--cyan-500);
  --QTrackBlockIncompleteText_a_h: white;
  --QTrackBlockCorrectBG: rgba(34, 197, 94, 0.1);
  --QTrackBlockCorrectBorder: rgb(34, 197, 94); /* green-A400 */
  --QTrackBlockCorrectText: rgb(34, 197, 94); /* green-A400 */
  --QTrackBlockCorrectBG_a: rgb(34, 197, 94); /* green-A400 */
  --QTrackBlockCorrectBorder_a: rgb(34, 197, 94); /* green-A400 */
  --QTrackBlockCorrectText_a: white;
  --QTrackBlockCorrectIcon_a: white;
  --QTrackBlockIncorrectBG: rgba(216, 27, 96, 0.1);
  --QTrackBlockIncorrectBorder: var(--pink-600);
  --QTrackBlockIncorrectText: var(--pink-600);
  --QTrackBlockIncorrectBG_a: var(--pink-600);
  --QTrackBlockIncorrectBorder_a: var(--pink-600);
  --QTrackBlockIncorrectText_a: white;
  --QTrackBlockIncorrectIcon_a: white;
  --QTrackBlockActiveBG: #06b6d4;
  --QTrackBlockActiveBorder: #06b6d4;
  --QTrackBlockActiveText: #06b6d4;
  --QTrackExamModeAnsweredBG: transparent;
  --QTrackExamModeAnsweredBorder: var(--blue-600);
  --QTrackExamModeAnsweredText: var(--blue-200);
  --QTrackExamModeAnsweredIcon: var(--blue-200);
  --QTrackExamModeAnsweredBG_h: var(--blue-600);
  --QTrackExamModeAnsweredBorder_h: var(--blue-600);
  --QTrackExamModeAnsweredText_h: var(--base-50);
  --QTrackExamModeAnsweredIcon_h: var(--blue-50);
  --QTrackExamModeAnsweredBG_a: var(--blue-600);
  --QTrackExamModeAnsweredBorder_a: var(--blue-600);
  --QTrackExamModeAnsweredText_a: var(--base-50);
  --QTrackExamModeAnsweredIcon_a: var(--blue-50);
  --QTrackExamModeAnsweredBG_a_h: var(--blue-600);
  --QTrackExamModeAnsweredBorder_a_h: var(--blue-600);
  --QTrackExamModeAnsweredText_a_h: var(--base-50);
  --QTrackExamModeAnsweredIcon_a_h: var(--blue-50);
  --QTrackBtnBG: var(--base-400);
  --QTrackBtnIcon: var(--base-50);
  --QTrackBtnBorder: var(--base-400);
  --QTrackBtnBG_h: var(--pm-sky-blue);
  --QTrackBtnIcon_h: white;
  --QTrackBtnBorder_h: var(--pm-sky-blue);
  /* Tables */
  --DataTableCardBG: var(--base-600);
  --DataTableCardBorder: var(--base-500);
  --DataTableText: #dedeff;
  --DataTableHeaderBG: transparent;
  --DataTableHeaderText: #dedeff;
  --DataTableHeaderBorder: var(--base-500);
  --DataTableHeaderTHeadRowBG: transparent;
  --DataTableHeaderTHeadRowText: #edf2ff;
  --DataTableHeaderMetaTitle: #edf2ff;
  --DataTableHeaderBG_loading: var(--base-600);
  --DataTableHeaderText_loading: var(--base-50);
  --DataTableHeaderBG_empty: var(--base-600);
  --DataTableHeaderText_empty: var(--base-50);
  --DataTableBodyRowBG: transparent;
  --DataTableBodyRowText: var(--base-50);
  --DataTableBodyRowBorder: var(--base-400);
  --DataTableBodyRowBG_h: var(--base-400);
  --DataTableFooterBG: transparent;
  --DataTableFooterText: var(--base-500);
  --DataTableFooterTHeadRowBG: transparent;
  --DataTableFooterTHeadRowText: #687eb8;
  --DataTableFooterPaginationBG: transparent;
  --DataTableFooterPaginationHighlightBG: var(--base-500);
  --DataTableFooterPaginationText: var(--base-50);
  --DataTableFooterPaginationHighlightText: var(--base-50);
  --DataTableFooterPaginationIconColor: var(--base-50);
  --DataTableFooterPaginationArrowColor: var(--base-50);
  --DataTableFooterPaginationDropdownSelectionText: var(--base-50);
  /* Pagination Button States */
  --DataTableFooterPaginationBorder: var(--base-500);
  --DataTableFooterPaginationBG_h: var(--base-500);
  --DataTableFooterPaginationText_h: var(--base-50);
  --DataTableFooterPaginationBorder_h: var(--base-400);
  --DataTableFooterPaginationIcon: var(--base-200);
  --DataTableFooterPaginationIcon_h: var(--base-50);
  /* Pagination Dropdown */
  --DataTableFooterPaginationDropdownBG: var(--base-700);
  --DataTableFooterPaginationDropdownBG_h: var(--base-600);
  --DataTableFooterPaginationDropdownBorder: var(--base-500);
  --DataTableFooterPaginationDropdownBorder_h: var(--base-400);
  --DataTableFooterPaginationDropdownText: var(--base-200);
  --DataTableFooterPaginationDropdownText_h: var(--base-50);
  --DataTableFooterPaginationDropdownIcon: var(--base-200);
  --DataTableFooterPaginationDropdownIcon_h: var(--base-50);
  --DataTableActionBtnBg: var(--base-600);
  --DataTableActionBtnText: var(--base-50);
  --DataTableActionBtnIcon: var(--base-50);
  --DataTableActionBtnBorder: var(--base-400);
  --DataTableActionBtnText_h: var(--base-50);
  --DataTableActionBtnIcon_h: var(--base-50);
  --DataTableActionBtnBg_h: var(--base-600);
  --DataTableActionBtnBorder_h: var(--pm-sky-blue);
  --DataTableActionBtnText_h_a: white;
  --DataTableActionBtnIcon_h_a: white;
  --DataTableActionBtnBg_h_a: var(--pm-sky-blue);
  --DataTableActionBtnBorder_h_a: var(--pm-sky-blue);
  --PaymentOptionBG: var(--base-400);
  --PaymentOptionTitleText: var(--base-50);
  --PaymentOptionDescriptionText: var(--base-100);
  --PaymentOptionPriceText: var(--base-100);
  --PaymentOptionBorder: var(--base-400);
  --PaymentCheckboxBG: var(--base-400);
  --PaymentCheckboxBorder: var(--base-300);
  --PaymentCheckboxIcon: var(--base-50);
  --PaymentOptionBG_h: var(--pm-sky-blue);
  --PaymentOptionTitleText_h: var(--pm-yellow);
  --PaymentOptionDescriptionText_h: var(--base-50);
  --PaymentOptionPriceText_h: var(--base-50);
  --PaymentOptionBorder_h: var(--base-300);
  --PaymentCheckboxBG_h: var(--base-100);
  --PaymentCheckboxBorder_h: var(--pm-sky-blue);
  --PaymentCheckboxIcon_h: var(--base-50);
  --PaymentOptionBG_h_a: var(--base-600);
  --PaymentOptionTitleText_h_a: var(--base-50);
  --PaymentOptionDescriptionText_h_a: var(--base-50);
  --PaymentOptionPriceText_h_a: var(--base-50);
  --PaymentOptionBorder_h_a: var(--base-400);
  --PaymentCheckboxBG_h_a: var(--base-600);
  --PaymentCheckboxBorder_h_a: var(--base-400);
  --PaymentCheckboxIcon_h_a: var(--base-50);
  --PaymentOptionBG_a: var(--pm-sky-blue); /* #263BAB */
  --PaymentOptionTitleText_a: var(--pm-yellow);
  --PaymentOptionDescriptionText_a: var(--base-50);
  --PaymentOptionPriceText_a: var(--base-50);
  --PaymentOptionBorder_a: var(--blue-600); /* #263BAB */
  --PaymentCheckboxBG_a: var(--base-200);
  --PaymentCheckboxBorder_a: var(--pm-sky-blue);
  --PaymentCheckboxIcon_a: var(--base-50); /* #6b7acf */
  --PaymentOptionBG_a_h: var(--pm-sky-blue);
  --PaymentOptionTitleText_a_h: var(--pm-yellow);
  --PaymentOptionDescriptionText_a_h: var(--base-50);
  --PaymentOptionPriceText_a_h: var(--base-50);
  --PaymentOptionBorder_a_h: var(--blue-600);
  --PaymentCheckboxBG_a_h: var(--base-200);
  --PaymentCheckboxBorder_a_h: var(--pm-sky-blue);
  --PaymentCheckboxIcon_a_h: var(--base-50);
  --PaymentOptionBG_a_h_a: var(--blue-500);
  --PaymentOptionTitleText_a_h_a: var(--base-50);
  --PaymentOptionDescriptionText_a_h_a: var(--base-100);
  --PaymentOptionPriceText_a_h_a: var(--base-50);
  --PaymentOptionBorder_a_h_a: var(--blue-500);
  --PaymentCheckboxBG_a_h_a: var(--base-200);
  --PaymentCheckboxBorder_a_h_a: var(--base-200);
  --PaymentCheckboxIcon_a_h_a: var(--base-50);
  --PaymentFormConnectingBG: var(--base-50);
  --PaymentFormConnectingBorder: var(--base-100);
  --PaymentFormConnectingLabel: var(--base-500);
  --SubscriptionCardBG: var(--primary__bg);
  --SubscriptionCardBorder: var(--base-500);
  --SubscriptionCardText: var(--base-50);
  --SubscriptionCardIcon: var(--base-50);
  --SubscriptionCardProgressBarBG: var(--base-500);
  --SubscriptionCardProgressBarProgressBG: var(--pm-primary);
  --SubscriptionCardProgressBarProgressText: var(--base-50);
  --ModalSubscribeBG: var(--base-700);
  --ModalSubscribeTitleColor: var(--base-50);
  --ModalSubscribeTextColor: var(--base-100);
  --ModalSubscribeSubtitleColor: var(--base-200);
  --ChkListText: var(--base-100);
  --ChkModalContentText: var(--base-600);
  --ChkModalTitle: var(--base-50);
  --ChkModalSubtitle: var(--base-500);
  --ChkListIcon: var(--base-500);
  --ChkModalLink: var(--pm-sky-blue);
  --ChkModalLink_h: var(--pm-yellow);
  --ChkModalContentText: var(--base-650);
  --ChkModalDivider: var(--base-200);
  --ChkModalAccordionBorder: var(--base-200);
  --ChkModalAccordionHeaderColor: var(--base-650);
  --ChkModalAccordionHeaderColor_h: var(--pm-primary);
  --ChkModalAccordionHeaderColor_a: var(--base-500);
  --ChkModalAccordionContentColor: var(--base-650);
  --ChkModalBtnBg: var(--pm-primary);
  --ChkModalBtnText: var(--base-50);
  --ChkModalBtnIcon: var(--base-50);
  --ChkModalBtnBorder: var(--pm-primary);
  --ChkModalBtnBg_h: var(--pm-primary-brighter);
  --ChkModalBtnBorder_h: var(--pm-primary-brighter);
  --ChkModalBtnText_h: var(--base-50);
  --ChkModalBtnIcon_h: var(--base-50);
  --ChkModalBtnBg_h_a: var(--pm-primary-bright);
  --ChkModalBtnBorder_h_a: var(--pm-primary-bright);
  --ChkModalBtnText_h_a: var(--base-50);
  --ChkModalBtnIcon_h_a: var(--base-50);
  --ListBoxButtonBg: var(--base-800);
  --ListBoxButtonBorder: var(--base-500);
  --ListBoxButtonDropIcon: var(--base-100);
  --ListBoxSelectedOptionText: var(--base-50);
  --ListBoxButtonBg_h: var(--base-800);
  --ListBoxButtonBorder_h: var(--pm-sky-blue);
  --ListBoxButtonDropIcon_h: var(--base-50);
  --ListBoxOptionsBg: var(--base-500);
  --ListBoxOptionBg: var(--base-500);
  --ListBoxOptionBorder: var(--base-500);
  --ListBoxOptionText: var(--base-60);
  --ListBoxOptionIcon: var(--base-100);
  --ListBoxOptionCheckIcon: var(--base-200);
  --ListBoxOptionBg_h: var(--base-500);
  --ListBoxOptionBorder_h: var(--pm-sky-blue);
  --ListBoxOptionText_h: var(--pm-sky-blue);
  --ListBoxOptionIcon_h: var(--pm-sky-blue);
  --ListBoxOptionCheckIcon_h: var(--pm-sky-blue);
  --ListBoxOptionBg_a: var(--base-500);
  --ListBoxOptionBorder_a: var(--pm-sky-blue);
  --ListBoxOptionText_a: var(--base-50);
  --ListBoxOptionIcon_a: var(--pm-sky-blue);
  --ListBoxOptionCheckIcon_a: var(--pm-sky-blue);
  --ListBoxOptionBg_a_h: var(--base-400);
  --ListBoxOptionBorder_a_h: var(--pm-sky-blue);
  --ListBoxOptionText_a_h: var(--pm-sky-blue);
  --ListBoxOptionIcon_a_h: var(--pm-sky-blue);
  --ListBoxOptionCheckIcon_a_h: var(--pm-sky-blue);
  --DataTableText: #dedeff;
  --DataTableHeaderBG: transparent;
  --DataTableHeaderText: #dedeff;
  --DataTableHeaderBorder: var(--base-500);
  --DataTableHeaderTHeadRowBG: transparent;
  --DataTableHeaderTHeadRowText: #edf2ff;
  --DataTableHeaderMetaTitle: #edf2ff;
  --DataTableHeaderBG_loading: var(--base-600);
  --DataTableHeaderText_loading: var(--base-50);
  --DataTableHeaderBG_empty: var(--base-600);
  --DataTableHeaderText_empty: var(--base-50);
  --DataTableBodyRowBG: transparent;
  --DataTableBodyRowText: var(--base-60);
  --DataTableBodyRowBorder: var(--base-400);
  --DataTableBodyRowBG_h: var(--base-400);
  --DataTableFooterBG: transparent;
  --DataTableFooterText: var(--base-500);
  --DataTableFooterTHeadRowBG: transparent;
  --DataTableFooterTHeadRowText: #687eb8;
  --DataTableFooterPaginationBG: transparent;
  --DataTableFooterPaginationHighlightBG: var(--base-500);
  --DataTableFooterPaginationText: var(--base-50);
  --DataTableFooterPaginationHighlightText: var(--base-50);
  --DataTableFooterPaginationIconColor: var(--base-50);
  --DataTableFooterPaginationArrowColor: var(--base-50);
  --DataTableFooterPaginationDropdownSelectionText: var(--base-50);
  --DataTableFooterPaginationBorder: var(--base-500);
  --DataTableFooterPaginationBG_h: var(--base-500);
  --DataTableFooterPaginationText_h: var(--base-50);
  --DataTableFooterPaginationBorder_h: var(--base-400);
  --DataTableFooterPaginationIcon: var(--base-200);
  --DataTableFooterPaginationIcon_h: var(--base-50);
  --DataTableFooterPaginationDropdownBG: var(--base-700);
  --DataTableFooterPaginationDropdownBG_h: var(--base-600);
  --DataTableFooterPaginationDropdownBorder: var(--base-500);
  --DataTableFooterPaginationDropdownBorder_h: var(--base-400);
  --DataTableFooterPaginationDropdownText: var(--base-200);
  --DataTableFooterPaginationDropdownText_h: var(--base-50);
  --DataTableFooterPaginationDropdownIcon: var(--base-200);
  --DataTableFooterPaginationDropdownIcon_h: var(--base-50);
  --DataTableActionBtnBg: var(--base-600);
  --DataTableActionBtnText: var(--base-50);
  --DataTableActionBtnIcon: var(--base-50);
  --DataTableActionBtnBorder: var(--base-400);
  --DataTableActionBtnText_h: var(--base-50);
  --DataTableActionBtnIcon_h: var(--base-50);
  --DataTableActionBtnBg_h: var(--base-600);
  --DataTableActionBtnBorder_h: var(--pm-sky-blue);
  --DataTableActionBtnText_h_a: white;
  --DataTableActionBtnIcon_h_a: white;
  --DataTableActionBtnBg_h_a: var(--pm-sky-blue);
  --DataTableActionBtnBorder_h_a: var(--pm-sky-blue);
  --MenuBtnAvatarBG: var(--pm-sky-blue);
  --MenuBtnText: white;
  --MenuBtnAvatarBG_h: #39d3ff;
  --MenuBtnText_h: white;
  --MenuBtnAvatarBG_h_a: var(--pm-yellow);
  --MenuBtnText_h_a: white;
  --MenuDropdownBG: var(--base-500);
  --MenuDropdownItemBG: var(--base-500);
  --MenuDropdownItemText: var(--base-50);
  --MenuDropdownItemIcon: var(--base-100);
  --MenuDropdownItemBG_h: var(--base-400);
  --MenuDropdownItemText_h: var(--pm-sky-blue);
  --MenuDropdownItemIcon_h: var(--pm-sky-blue);
  --MenuDropdownItemBG_h_a: var(--base-500);
  --MenuDropdownItemText_h_a: var(--pm-sky-blue);
  --MenuDropdownItemIcon_h_a: var(--pm-sky-blue);
  --MenuDropdownItemBG_a: var(--pm-primary-bright);
  --MenuDropdownItemText_a: var(--base-500);
  --MenuDropdownItemIcon_a: var(--pm-sky-blue);
  --MenuDropdownItemBG_a_h: var(--base-500);
  --MenuDropdownItemText_a_h: var(--pm-sky-blue);
  --MenuDropdownItemIcon_a_h: var(--pm-sky-blue);
  --MenuDropdownItemBG_a_h_a: var(--base-500);
  --MenuDropdownItemText_a_h_a: var(--pm-sky-blue);
  --MenuDropdownItemIcon_a_h_a: var(--pm-sky-blue);
  --peerGroupWidgetEmptyLabel: var(--base-100);
  --peerGroupWidgetEmptySublabel: var(--base-200);
  --section-card__title: var(--base-60);
  --section-card__subtitle: var(--base-200);
  --SecLabelLabelColor: var(--base-60);
  --SecLabelValueColor: var(--base-50);
  --mobile-flyout-menu-bg: var(--base-600);
  --mobile-flyout-menu-divider: var(--base-500);
  --mobile-flyout-border: var(--base-400);
  --mobile-flyout-menu-btn-bg: var(--base-600);
  --mobile-flyout-menu-btn-text: var(--base-50);
  --mobile-flyout-menu-btn-icon: var(--base-100);
  --mobile-flyout-menu-btn-icon-bg: var(--base-600);
  --mobile-flyout-menu-btn-bg_h: var(--base-500);
  --mobile-flyout-menu-btn-text_h: var(--base-50);
  --mobile-flyout-menu-btn-icon_h: var(--pm-sky-blue);
  --mobile-flyout-menu-btn-icon-bg_h: var(--base-600);
  --mobile-flyout-menu-btn-bg_a: var(--base-400);
  --mobile-flyout-menu-btn-text_a: var(--pm-sky-blue);
  --mobile-flyout-menu-btn-icon_a: var(--pm-yellow);
  --mobile-flyout-menu-btn-icon-bg_a: var(--base-500);
  --mobile-flyout-menu-btn-bg_a_h: var(--base-400);
  --mobile-flyout-menu-btn-text_a_h: var(--pm-sky-blue);
  --mobile-flyout-menu-btn-icon_a_h: var(--pm-sky-blue);
  --mobile-flyout-menu-btn-icon-bg_a_h: var(--base-500);
  --DashboardAvatarMenuBG: var(--base-500);
  --DashboardAvatarMenuBorder: var(--base-400);
  --DashboardAvatarMenuItemBG: var(--base-500);
  --DashboardAvatarMenuItemText: var(--base-60);
  --DashboardAvatarMenuItemIcon: var(--base-100);
  --DashboardAvatarMenuItemBG_h: var(--base-400);
  --DashboardAvatarMenuItemText_h: var(--base-50);
  --DashboardAvatarMenuItemIcon_h: var(--pm-sky-blue);
  --DashboardAvatarMenuItemBG_h_a: var(--base-400);
  --DashboardAvatarMenuItemText_h_a: var(--pm-sky-blue);
  --DashboardAvatarMenuItemIcon_h_a: var(--pm-sky-blue);
  --DashboardAvatarMenuItemBG_a: var(--base-400);
  --DashboardAvatarMenuItemText_a: var(--base-50);
  --DashboardAvatarMenuItemIcon_a: var(--pm-sky-blue);
  --DashboardAvatarMenuItemBG_a_h: var(--base-400);
  --DashboardAvatarMenuItemText_a_h: var(--pm-sky-blue);
  --DashboardAvatarMenuItemIcon_a_h: var(--pm-sky-blue);
  --DashboardAvatarMenuItemBG_a_h_a: var(--base-400);
  --DashboardAvatarMenuItemText_a_h_a: var(--pm-sky-blue);
  --DashboardAvatarMenuItemIcon_a_h_a: var(--pm-sky-blue);
  /* ============================================================================
     Checkout Modal Variables
     ============================================================================ */
  /* Modal Base */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.8);
  --modal-bg: var(--base-600);
  --modal-title: var(--base-50);
  --modal-subtitle: var(--base-150);
  /* Modal Sidebar */
  --modal-sidebar-bg: var(--base-700);
  --modal-sidebar-border: var(--base-500);
  --modal-sidebar-title: var(--base-50);
  --modal-sidebar-text: var(--base-150);
  --modal-sidebar-checkmark-color: var(--pm-sky-blue);
  /* Modal Header */
  --modal-header-bg: var(--base-600);
  --modal-header-border: var(--base-500);
  /* Modal Interactive Elements */
  --modal-close-button-text: var(--base-200);
  --modal-close-button-text-hover: var(--base-50);
  --modal-focus-ring: var(--pm-sky-blue);
  --modal-back-button-text: var(--base-200);
  --modal-back-button-bg-hover: var(--base-700);
  /* Checkout Specific */
  --chkSideBarBG: var(--base-700);
  --chkSideBarText: var(--base-50);
  --chkSideBarBorder: var(--base-500);
  --chkSideBarListText: var(--base-150);
  --chkSideBarListIcon: var(--pm-sky-blue);
  --chkPrimaryPanelBG: var(--base-600);
  /* Checkout Progress Indicator */
  --CheckoutProgressStepActiveBG: var(--pm-sky-blue);
  --CheckoutProgressStepActiveBorder: var(--pm-sky-blue);
  --CheckoutProgressStepActiveText: var(--base-800);
  --CheckoutProgressStepInactiveBG: var(--base-500);
  --CheckoutProgressStepInactiveBorder: var(--base-400);
  --CheckoutProgressStepInactiveText: var(--base-200);
  --CheckoutProgressLineActive: var(--pm-sky-blue);
  --CheckoutProgressLineInactive: var(--base-400);
  --CheckoutProgressStepText: var(--base-200);
  --CheckoutProgressBorderColor: var(--base-500);
  /* Payment Option Icon */
  --PaymentOptionText: var(--base-150);
  --PaymentOptionIconBG: var(--base-500);
  --PaymentOptionIconBorder: var(--base-400);
  --PaymentOptionIconHoverFill: var(--base-800);
  --PaymentOptionCheckmarkStroke: var(--base-800);
  --PaymentOptionActiveLight: rgba(0, 171, 233, 0.2);
  /* Checkout Error Recovery */
  --CheckoutErrorRecoveryBG: var(--red-950);
  --CheckoutErrorRecoveryBorder: var(--red-800);
  --CheckoutErrorRecoveryIconColor: var(--red-400);
  --CheckoutErrorRecoveryTitle: var(--base-100);
  --CheckoutErrorRecoveryMessage: var(--base-300);
  --CheckoutErrorRecoveryText: var(--base-400);
  --CheckoutErrorRecoveryDetailsSummary: var(--base-500);
  --CheckoutErrorRecoveryDetailsSummaryHover: var(--base-300);
  --CheckoutErrorRecoveryDetailsBG: var(--base-800);
  --CheckoutErrorRecoveryDetailsText: var(--base-200);
  /* Onboarding Modal Variables */
  --OnboardingModalBG: var(--base-700);
  --OnboardingModalBorder: var(--base-700);
  --OnboardingModalTitle: var(--base-60);
  --OnboardingModalSubtitle: var(--base-650);
  --OnboardingModalText: var(--base-50);
  --OnboardingModalLink: var(--pm-sky-blue);
  --OnboardingModalLink_h: var(--pm-yellow);
  --OnboardingModalTextStrong: var(--pm-sky-blue);
  --OnboardingModalEmphasis: var(--pm-primary);
  --OnboardingModalColSideContentBG: var(--base-700);
  --OnboardingModalColSideContentBorder: var(--base-50);
  --OnboardingModalColSideContentText: var(--base-50);
  --OnboardingModalSelectButtonBG: transparent;
  --OnboardingModalSelectButtonBorder: var(--base-400);
  --OnboardingModalSelectButtonText: var(--base-50);
  --OnboardingModalSelectButtonBG_h: var(--base-300);
  --OnboardingModalSelectButtonBorder_h: var(--base-300);
  --OnboardingModalSelectButtonText_h: var(--base-50);
  --OnboardingModalSelectButtonBG_h_a: var(--base-300);
  --OnboardingModalSelectButtonBorder_h_a: var(--base-300);
  --OnboardingModalSelectButtonText_h_a: var(--base-50);
  --OnboardingModalSelectButtonBG_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_a: var(--base-50);
  --OnboardingModalSelectButtonBG_a_h: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_a_h: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_a_h: var(--base-50);
  --OnboardingModalSelectButtonBG_a_h_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonBorder_a_h_a: var(--pm-brand-blue);
  --OnboardingModalSelectButtonText_a_h_a: var(--base-50);
  --SkipLinkColour: var(--base-100);
  --SkipLinkColour_h: var(--base-50);
  /* Session Summary Header Variables */
  --SessionSummaryHeaderBG: transparent;
  --SessionSummaryHeaderText: var(--base-50);
  --SessionSummaryHeaderTextSecondary: var(--base-100);
  --SessionSummaryIncompleteTagBG: var(--pm-primary-bright);
  --SessionSummaryIncompleteTagText: var(--base-50);
  --CheckoutSummaryItemsBG: var(--base-500);
  --CheckoutSummaryItemsBorder: var(--base-500);
  --CheckoutSummaryItemTitle: var(--base-50);
  --CheckoutSummaryItemContent: var(--base-100);
  --CheckoutSummaryItemPrice: var(--base-50);
  --CheckoutSummaryItemPriceLabel: var(--base-50);
  --CheckoutSummaryItemPriceDiscount: var(--emerald-400);
  --CheckoutSummaryItemsText: var(--base-400);
  --CheckoutListboxBodyBorder: var(--base-500);
  --CheckoutListboxBodyText: var(--base-100);
  --CheckoutPaymentPanelSummaryBG: var(--base-500);
  --CheckoutPaymentPanelSummaryTitle: var(--base-50);
  --CheckoutPaymentPanelSummaryValue: var(--base-50);
  --CheckoutSummaryNotificationSuccessBG: var(--emerald-900);
  --CheckoutSummaryNotificationSuccessIcon: var(--emerald-400);
  --CheckoutSummaryNotificationSuccessText: var(--emerald-100);
  --CheckoutSummaryNotificationErrorBG: var(--red-900);
  --CheckoutSummaryNotificationErrorIcon: var(--red-400);
  --CheckoutSummaryNotificationErrorText: var(--red-100);
  --CouponNotificationSuccessBG: var(--emerald-900);
  --CouponNotificationSuccessIcon: var(--emerald-400);
  --CouponNotificationSuccessText: var(--emerald-100);
  --CouponNotificationSuccessBorder: var(--emerald-700);
  --CouponNotificationErrorBG: var(--red-900);
  --CouponNotificationErrorIcon: var(--red-400);
  --CouponNotificationErrorText: var(--red-100);
  --CouponNotificationErrorBorder: var(--red-700);
  --CheckoutSuccessBG: var(--base-700);
  --CheckoutSuccessTitleColor: var(--base-50);
  --CheckoutSuccessTextColor: var(--base-60);
  --CheckoutSuccessIconBG: var(--pm-success);
  --CheckoutSuccessIconColor: var(--base-900);
  --CheckoutSuccessButtonBG: var(--pm-primary-brighter);
  --CheckoutSuccessButtonBGHover: var(--pm-primary-bright);
  --CheckoutSuccessButtonText: var(--base-50);
  --HelpPageTextareaBG: var(--base-800);
  --HelpPageTextareaBorder: var(--base-700);
  --HelpPageTextareaText: var(--base-50);
  --HelpPageTextareaPlaceholder: var(--base-400);
  --HelpPageTextareaFocusBorder: var(--pm-sky-blue);
  --HelpPageTextareaFocusShadow: var(--pm-sky-blue);
  --HelpPageTextareaFocusOutline: var(--pm-primary-bright);
  --HelpPageTextareaFocusOutlineColor: var(--pm-primary-bright);
  --toast-bg: var(--base-600);
  --toast-border: var(--base-500);
  --toast-text: var(--base-50);
  --toast-shadow: var(--base-500);
  --toast-progress-bg: var(--base-500);
  --message-component-bg: var(--base-600);
}

/* ============================================================================
   4. LAYOUT - Main dashboard layout styles
   ============================================================================ */
.layout-dashboard .sec-primary__content-inner {
  height: 100%;
  overflow: auto;
}
.layout-dashboard .sec-primary__content-inner .page-dashboard {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.layout-dashboard .sec-primary__content-inner .sub-page {
  flex: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.layout-dashboard .p-dropdown-panel {
  background: var(--DropdownPanelBg);
  border-color: var(--DropdownPanelBorder) !important;
}
.layout-dashboard .p-dropdown-panel > .p-dropdown-items-wrapper > ul.p-dropdown-items {
  margin: 0;
  padding: gr(0.25) 0 gr(0.25) 0;
}
.layout-dashboard .p-dropdown-panel > .p-dropdown-items-wrapper > ul.p-dropdown-items > li.p-dropdown-item {
  display: flex;
  gap: gr(0.25);
  padding: gr(0.5) gr(0.75);
  cursor: pointer;
}
.layout-dashboard .p-dropdown-panel > .p-dropdown-items-wrapper > ul.p-dropdown-items > li.p-dropdown-item .p-icon.p-dropdown-check-icon {
  color: var(--DropdownItemCheckIcon);
}
.layout-dashboard .p-dropdown-panel > .p-dropdown-items-wrapper > ul.p-dropdown-items > li.p-dropdown-item .p-dropdown-item-label {
  color: var(--DropdownItemText);
  font-size: fs(-0.5) !important;
}
.layout-dashboard .p-dropdown-panel > .p-dropdown-items-wrapper > ul.p-dropdown-items > li.p-dropdown-item.p-focus {
  background: var(--DropdownItemBg_a);
}
.layout-dashboard .p-dropdown-panel > .p-dropdown-items-wrapper > ul.p-dropdown-items > li.p-dropdown-item:hover {
  background: var(--DropdownPanelBg_h);
}
.layout-dashboard .p-dropdown-panel:focus {
  border-color: var(--DropdownPanelFocusBorder);
}
.layout-dashboard .p-dropdown-panel:hover {
  border-color: var(--DropdownPanelFocusBorder);
}
.layout-dashboard .p-dropdown-panel:active {
  border-color: var(--DropdownPanelFocusBorder);
}
.layout-dashboard .p-dropdown-panel.p-focus {
  border-color: var(--DropdownPanelFocusBorder);
}

.layout-dashboard {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  background: var(--primary-bg);
}
.layout-dashboard .sec-debug {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  color: red;
}
.layout-dashboard:global(.sec-primary__content-inner) {
  overflow: auto;
}
.layout-dashboard .btn-cube {
  background: var(--cube-btn-bg);
  border: var(--cube-btn-border-width) solid var(--cube-btn-border) !important;
  color: var(--cube-btn-text);
  box-shadow: none !important;
}
.layout-dashboard .btn-cube .p-button-icon {
  color: var(--cube-btn-icon);
}
.layout-dashboard .btn-cube {
  transition: all 0.1s ease-in-out;
}
.layout-dashboard .btn-cube:hover {
  background: var(--cube-btn-bg_h);
  border: 1px solid var(--cube-btn-border_h) !important;
  box-shadow: none !important;
  color: var(--cube-btn-text_h);
}
.layout-dashboard .btn-cube:hover .p-button-icon {
  color: var(--cube-btn-icon_h) !important;
}
.layout-dashboard .btn-cube:hover {
  box-shadow: 0 12.6px 25.2px -11.5733px rgba(50, 50, 93, 0.25), 0 7.56px 15.12px -7.56px rgba(0, 0, 0, 0.1) !important;
}
.layout-dashboard .btn-cube:hover:active {
  background: var(--cube-btn-bg_h_a);
  border: 1px solid var(--cube-btn-border_h_a) !important;
  color: var(--cube-btn-text_h_a);
}
.layout-dashboard .btn-cube:hover:active .p-button-icon {
  color: var(--cube-btn-icon_h_a) !important;
}
.layout-dashboard .btn-a {
  background: var(--btn-a-bg) !important;
  border: var(--btn-a-border-width) solid var(--btn-a-border) !important;
  color: var(--btn-a-text) !important;
  box-shadow: none !important;
  border-radius: gr(2) !important;
  cursor: pointer;
}
.layout-dashboard .btn-a i,
.layout-dashboard .btn-a .p-button-icon {
  transition: none !important;
  color: var(--btn-a-icon) !important;
}
.layout-dashboard .btn-a:hover {
  background: var(--btn-a-bg_h) !important;
  border: var(--btn-a-border-width_h) solid var(--btn-a-border_h) !important;
  color: var(--btn-a-text_h);
}
.layout-dashboard .btn-a:hover i,
.layout-dashboard .btn-a:hover .p-button-icon {
  color: var(--btn-a-icon_h) !important;
}
.layout-dashboard .btn-a:hover:active {
  background: var(--btn-a-bg_h_a);
  border: var(--btn-a-border-width_h_a) solid var(--btn-a-border_h_a) !important;
  color: var(--btn-a-text_h_a);
}
.layout-dashboard .btn-a:hover:active i,
.layout-dashboard .btn-a:hover:active .p-button-icon {
  color: var(--btn-a-icon_h_a) !important;
}
.layout-dashboard .btn-a.active {
  background: var(--btn-a-bg_a);
  border-color: var(--btn-a-border_a) !important;
  color: var(--btn-a-text_a);
}
.layout-dashboard .btn-a.active i,
.layout-dashboard .btn-a.active .p-button-icon {
  color: var(--btn-a-icon_a) !important;
}

.sec-mobile-sidebar.p-sidebar {
  background: var(--sec-mobile-flyout-menu-bg) !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
  z-index: 1000 !important;
  height: 100% !important;
  min-width: 340px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.sec-mobile-sidebar.p-sidebar.p-sidebar-active .p-sidebar-content {
  background: linear-gradient(145deg, var(--sec-mobile-flyout-menu-bg) 0%, var(--sec-mobile-flyout-menu-bg) 100%);
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-header {
  padding: gr(1) gr(1.5) !important;
  border-bottom: 1px solid var(--sec-mobile-flyout-menu-border) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  /* width: 40px; */
  /* height: 40px; */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(0px - gr(1));
  width: 42px;
  height: 42px;
  padding: gr(0.33);
  border: 0;
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button .circle {
  background: var(--sec-mobile-flyout-menu-bg);
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button .hamburger .circle {
  border-radius: 0% !important;
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button .hamburger {
  width: 100%;
  height: 100%;
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button .hamburger .circle {
  width: 100%;
  height: 100%;
  border-radius: 0% !important;
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button .hamburger .circle .line {
  background: var(--sec-mobile-flyout-menu-close-button-line-color) !important;
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button .hamburger .circle .line.top {
  left: 0;
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button .hamburger .circle .line.middle {
  left: 0;
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button .hamburger .circle .line.bottom {
  left: 0;
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button :deep(.hamburger) .line {
  background: var(--sec-mobile-hamburger-icon);
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button :deep(.hamburger) .icon.close .top,
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button :deep(.hamburger) .icon.close .middle,
.sec-mobile-sidebar.p-sidebar .p-sidebar-header .close-button :deep(.hamburger) .icon.close .bottom {
  background: var(--sec-mobile-hamburger-icon);
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-content {
  padding: 0 !important;
  height: calc(100% - gr(2));
}
.sec-mobile-sidebar.p-sidebar .p-sidebar-content > * {
  animation: fadeIn 0.4s ease-out;
}
.sec-mobile-sidebar.p-sidebar .p-menu {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.sec-mobile-sidebar.p-sidebar .p-menu .p-menuitem {
  margin: 0 !important;
}
.sec-mobile-sidebar.p-sidebar .p-menu .p-menuitem-content {
  background: transparent !important;
}
.sec-mobile-sidebar.p-sidebar .p-menu .p-menuitem-content:hover {
  background: transparent !important;
}
.sec-mobile-sidebar .sec-logo {
  height: auto;
  width: 100%;
  height: gr(1);
  width: gr(7);
  cursor: pointer;
  outline: 0;
  position: relative;
  display: flex;
}
.sec-mobile-sidebar .sec-logo > .logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
}
.sec-mobile-sidebar .sec-logo > .logo > img {
  /* opacity: 0; */
  object-fit: contain;
  width: 100%;
  height: 24px;
  /* height:16px; */
}
.sec-mobile-sidebar .sec-logo {
  transition: opacity 0.5s ease-in-out;
  /* transition-delay: 0.1s; */
}
.sec-mobile-sidebar .sec-logo:hover {
  transform: translateY(-1px);
}
.sec-mobile-sidebar .sec-logo:hover:active {
  transform: translateY(0px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.sec-list .list-item .list-icon i {
  color: var(--listIconColor);
}
.sec-list .list-item .list-icon svg {
  fill: var(--listIconColor);
}
.sec-list .list-item .list-icon svg path {
  fill: var(--listIconColor);
}
.sec-list .list-item .list-text {
  color: var(--listTextColor);
}
.sec-list .list-item:hover .list-icon svg {
  fill: var(--listIconColor_h);
}
.sec-list .list-item:hover .list-icon svg path {
  fill: var(--listIconColor_h);
}
.sec-list .list-item:hover .list-text {
  color: var(--listTextColor_h);
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.error-message {
  color: var(--error-message) !important;
  font-size: 12px !important;
}

/* ============================================================================
   5. DASHBOARD-SPECIFIC STYLES
   ============================================================================ */
/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
/* -------------------
   Input fields
   ------------------- */
.mpd-field-base, .mpd-input, .mpd-input-number > input, .mpd-textarea {
  min-height: 60px;
  /* Standard sizing */
  border-radius: calc(var(--lh) * 2rem);
  padding: 0 calc(var(--lh) * 1rem);
  font-size: var(--fs--05);
  color: var(--InputTextColor); /* var(--InputTextColor); */
  /* border-color: var(--InputTextBorder); */
  background: var(--InputBg);
  box-shadow: inset 0 0 0 1px var(--InputTextBorder);
  width: 100%;
}
.mpd-field-base:focus, .mpd-input:focus, .mpd-input-number > input:focus, .mpd-textarea:focus {
  box-shadow: inset 0 0 0 1px var(--pm-sky-blue);
  outline: 0;
  border: 0;
}
.mpd-field-base:hover, .mpd-input:hover, .mpd-input-number > input:hover, .mpd-textarea:hover {
  box-shadow: inset 0 0 0 1px var(--pm-sky-blue);
  border: 0;
}
.mpd-field-base:active, .mpd-input:active, .mpd-input-number > input:active, .mpd-textarea:active {
  box-shadow: inset 0 0 0 1px var(--pm-sky-blue);
  outline: 0;
  border: 0;
}
.mpd-field-base::placeholder, .mpd-input::placeholder, .mpd-input-number > input::placeholder, .mpd-textarea::placeholder {
  color: var(--InputTextPlaceholderColor);
}
.mpd-field-base.icon-field, .icon-field.mpd-input, .mpd-input-number > input.icon-field, .icon-field.mpd-textarea {
  color: var(--InputTextColor);
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
}
.mpd-field-base.icon-field:focus, .icon-field.mpd-input:focus, .mpd-input-number > input.icon-field:focus, .icon-field.mpd-textarea:focus {
  border-color: var(--pm-sky-blue);
}
.mpd-field-base.icon-field:active, .icon-field.mpd-input:active, .mpd-input-number > input.icon-field:active, .icon-field.mpd-textarea:active {
  border-color: var(--pm-sky-blue);
}
.mpd-field-base.icon-field > .p-input-icon, .icon-field.mpd-input > .p-input-icon, .mpd-input-number > input.icon-field > .p-input-icon, .icon-field.mpd-textarea > .p-input-icon {
  position: absolute;
  left: calc(var(--lh) * 0.6rem); /* 0.6 */
  width: 18px;
  top: 50%;
  transform: translateY(calc(-50% + 0px));
  color: var(--IconFieldIcon);
}
.mpd-field-base.icon-field > .p-inputtext, .icon-field.mpd-input > .p-inputtext, .mpd-input-number > input.icon-field > .p-inputtext, .icon-field.mpd-textarea > .p-inputtext {
  /* border-color: transparent; */
  padding-left: calc(var(--lh) * 1.75rem);
}
@media (min-width: 47.9375em) {
  .mpd-field-base, .mpd-input, .mpd-input-number > input, .mpd-textarea {
    min-height: 50px;
  }
}

/* Number input */
/* Listbox Dropdown */
.mpd-listbox-button {
  border: none;
  box-shadow: none;
  background: none;
  padding: 0;
  margin: 0;
  height: auto;
  min-height: auto;
  padding: 0;
  min-height: 60px;
  padding: 0 calc(var(--lh) * 1rem);
  color: var(--ListBoxSelectedOptionText);
}
@media (min-width: 47.9375em) {
  .mpd-listbox-button {
    min-height: 50px;
  }
}

:deep(.mpd-listbox-options) {
  min-width: 140px;
}

/* This is a wrapper around the other fields to add the icon */
.mpd-icon-field {
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
}
.mpd-icon-field .field-icon {
  position: absolute;
  left: calc(var(--lh) * 0.75rem);
  width: 18px;
  top: 50%;
  transform: translateY(calc(-50% + 0px));
  color: var(--pm-sky-blue); /* var(--IconFieldIcon) */
}
.mpd-icon-field .mpd-input, .mpd-icon-field .mpd-input-number > input {
  padding-left: calc(var(--lh) * 2rem);
}
.mpd-icon-field .mpd-textarea {
  padding-left: calc(var(--lh) * 2rem);
}

/* Select button */
.mpd-selectbutton {
  display: flex;
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton] {
  background: var(--SelectButtonBtnBg);
  color: var(--SelectButtonBtnIcon);
  border: 0;
  box-shadow: none;
  padding: 0 calc(var(--lh) * 2rem);
  /* This is the border */
  /* box-shadow: inset 0 0 0 1px var(--SelectButtonBtnBorder); */
  border: 1px solid var(--SelectButtonBtnBorder);
  min-height: 60px;
  border-radius: 0;
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton] > span {
  color: var(--SelectButtonBtnText);
  font-size: var(--fs--05);
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton]:hover {
  background: var(--SelectButtonBtnBg_h);
  color: var(--SelectButtonBtnIcon_h);
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton]:hover > span {
  color: var(--SelectButtonBtnIcon_h);
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton] {
  /* This is selected */
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton][data-p-checked=true] {
  background: var(--SelectButtonBtnBg_a);
  border-color: var(--SelectButtonBtnBorder_a);
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton][data-p-checked=true] > span {
  color: var(--SelectButtonBtnText_a);
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton][data-p-checked=true]:hover {
  background: var(--SelectButtonBtnBg_a_h);
  border-color: var(--SelectButtonBtnBorder_a_h);
  color: var(--SelectButtonBtnText_a_h);
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton][data-p-checked=true]:hover > span {
  color: var(--SelectButtonBtnText_a_h);
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton][data-p-checked=true]:hover:active {
  background: var(--SelectButtonBtnBg_a_h);
  border-color: var(--SelectButtonBtnBorder_a_h);
  color: var(--SelectButtonBtnText_a_h);
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton][data-p-checked=true]:hover:active > span {
  color: var(--SelectButtonBtnText_a_h);
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton]:first-child {
  border-radius: calc(var(--lh) * 0.25rem) 0 0 calc(var(--lh) * 0.25rem);
  border-left: 1px solid var(--SelectButtonBtnBorder);
}
.mpd-selectbutton > button[data-pc-name=pctogglebutton]:last-child {
  border-radius: 0 calc(var(--lh) * 0.25rem) calc(var(--lh) * 0.25rem) 0;
  /* border-right: 1px; */
}
@media (min-width: 47.9375em) {
  .mpd-selectbutton > button[data-pc-name=pctogglebutton] {
    min-height: 50px;
  }
}
.mpd-selectbutton.widget > button[data-pc-name=pctogglebutton] {
  padding: 0 calc(var(--lh) * 1rem);
  min-height: 40px;
}
.mpd-selectbutton.widget > button[data-pc-name=pctogglebutton] > span {
  font-size: var(--fs--1);
}

/* Slider range */
.mpd-slider-range {
  background: #e2e8f0;
  border: 0 none;
  border-radius: 6px;
  position: relative;
  box-sizing: border-box;
  height: 3px;
  background: var(--SessionTimingSliderTrackBG);
}
.mpd-slider-range > span[data-pc-section=range] {
  background: var(--SessionTimingSliderTrackBG);
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  background: #10b981;
  border-radius: 6px;
  background: var(--SessionTimingSliderRangeBG);
}
.mpd-slider-range > span[data-pc-section=handle] {
  cursor: grab;
  touch-action: none;
  display: block;
  top: 50%;
  height: 20px;
  width: 20px;
  background: #e2e8f0;
  border: 0 none;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s, transform 0.2s;
  outline-color: transparent;
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin-top: -10px;
  margin-left: -10px;
  background: var(--SessionTimingSliderHandleBorder);
  height: 24px;
  width: 24px;
  margin-top: -12px;
  margin-left: -12px;
}
.mpd-slider-range > span[data-pc-section=handle]:before {
  background: var(--SessionTimingSliderHandleBG);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  content: "";
  display: block;
  box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14);
}
.mpd-slider-range > span[data-pc-section=handle]:hover {
  transform: scale(1.1);
}

/* Input Switch */
.mpd-checkbox {
  width: calc(var(--lh) * 0.85rem);
  height: calc(var(--lh) * 0.85rem);
  position: relative;
  cursor: pointer;
  position: relative;
  border-radius: calc(var(--lh) * 0.25rem);
}
.mpd-checkbox > input[data-pc-section=input] {
  /* appearance: none; */
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  /* width: 100%; */
  /* height: 100%; */
  /* padding: 0; */
  /* margin: 0; */
  /* opacity: 0; */
  /* z-index: 1; */
  /* outline: 0 none; */
  /* border: 1px solid #cbd5e1; */
  /* border-radius: 6px; */
  /* font-feature-settings: inherit; */
  /* color: inherit; */
  /* font-family: inherit; */
  /* font-size: 100%; */
  /* font-variation-settings: inherit; */
  /* font-weight: inherit; */
  /* letter-spacing: inherit; */
  /* line-height: inherit; */
  /* cursor: pointer; */
  /* appearance: none; */
  /* position: absolute; */
  /* inset-block-start: 0; */
  /* inset-inline-start: 0; */
  /* width: 100%; */
  /* height: 100%; */
  /* padding: 0; */
  /* margin: 0; */
  /* opacity: 0; */
  /* z-index: 1; */
  /* outline: 0 none; */
  /* border: 1px solid transparent; */
  /* border-radius: var(--p-checkbox-border-radius); */
  position: absolute;
  opacity: 0;
}
.mpd-checkbox > div[data-pc-section=box] {
  display: flex;
  justify-content: center;
  align-items: center;
  outline-color: transparent;
  border: 1px solid var(--checkboxBorder); /* var(--checkboxBorder) */
  background: transparent; /* var(--checkboxInputBG) */
  width: calc(var(--lh) * 0.85rem);
  height: calc(var(--lh) * 0.85rem);
  color: red; /* var(--checkboxInputColor) */
  border-radius: calc(var(--lh) * 0.25rem); /* var(--borderRadius) */
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
  box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 1px 2px 0 rgba(18, 18, 23, 0.05);
  background: var(--checkboxInputBG);
  /* display:none; */
}
.mpd-checkbox > div[data-pc-section=box] .p-checkbox-icon {
  transition-duration: 0.2s;
  color: var(--checkboxIconColor);
  font-size: 16px; /* 16px */
}
.mpd-checkbox > div[data-pc-section=box] .p-checkbox-icon.p-icon {
  width: 16px; /* 16px */
  height: 16px; /* 16px */
}
.mpd-checkbox > div[data-pc-section=box][data-p=checked] {
  /* background: red; */
  /* border-color: var(--p-checkbox-checked-border-color); */
  /* background: var(--p-checkbox-checked-background); */
}
.mpd-checkbox:hover > input[data-pc-section=input] {
  border-color: var(--checkboxBorder_h);
}
.mpd-checkbox:hover > div[data-pc-section=box] {
  background: var(--checkboxInputBG_h);
  border: 1px solid var(--pm-sky-blue); /* var(--checkboxBorder) */
}
.mpd-checkbox:hover > div[data-pc-section=box] svg[data-pc-section=icon] {
  fill: var(--base-300);
  stroke: var(--base-300);
}
.mpd-checkbox:hover > div[data-pc-section=box] svg[data-pc-section=icon] * {
  fill: var(--base-300);
}
.mpd-checkbox[data-p=checked] {
  /* background: var(--checkboxInputBG_a); */
}
.mpd-checkbox[data-p=checked] > div[data-pc-section=box] {
  /* background: var(--checkboxInputBG_a); */
  border: 1px solid var(--pm-sky-blue); /* var(--checkboxBorder) */
  background: var(--pm-sky-blue);
}
.mpd-checkbox[data-p=checked] > div[data-pc-section=box] svg[data-pc-section=icon] {
  fill: white;
  stroke: white;
}
.mpd-checkbox[data-p=checked] > div[data-pc-section=box] svg[data-pc-section=icon] * {
  fill: white;
  /* stroke: white; */
}
.mpd-checkbox[data-p=checked]:hover > div[data-pc-section=box] {
  background: var(--checkboxActiveBg_h);
  border: 1px solid var(--checkboxActiveBorderColor_h); /* var(--checkboxBorder) */
}
.mpd-checkbox[data-p=checked]:hover > div[data-pc-section=box] svg[data-pc-section=icon] {
  fill: white;
  stroke: white;
}
.mpd-checkbox[data-p=checked]:hover > div[data-pc-section=box] svg[data-pc-section=icon] * {
  fill: white;
  /* stroke: white; */
}

html.env-dashboard .btn-dash-all {
  color: var(--btn-dash-all-text) !important;
}
html.env-dashboard .btn-dash-all i {
  color: var(--btn-dash-all-icon);
}
html.env-dashboard .btn-dash-all .label {
  color: var(--btn-dash-all-text) !important;
}
html.env-dashboard .btn-dash-all:hover {
  color: var(--btn-dash-all-text_h) !important;
}
html.env-dashboard .btn-dash-all:hover i {
  color: var(--btn-dash-all-icon_h);
}
html.env-dashboard .btn-dash-all:hover .label {
  color: var(--btn-dash-all-text_h) !important;
}
html.env-dashboard .btn-dash-all:hover:active {
  color: var(--btn-dash-all-text_h_a) !important;
}
html.env-dashboard .btn-dash-all:hover:active i {
  color: var(--btn-dash-all-icon_h_a);
}
html.env-dashboard .btn-dash-all:hover:active .label {
  color: var(--btn-dash-all-text_h_a) !important;
}
html.env-dashboard {
  /* Change password buttons */
}
html.env-dashboard .btn-password-clear {
  background-color: transparent !important;
  color: var(--btn-password-clear-text) !important;
}
html.env-dashboard .btn-password-clear:hover {
  color: var(--btn-password-clear-text_h) !important;
}
html.env-dashboard {
  /*   .btn-password-change {  

    } */
}
html.env-dashboard .btn-pagi-cube {
  background-color: var(--btn-pagi-cube-bg) !important;
  color: var(--btn-pagi-cube-text) !important;
  box-shadow: inset 0 0 0 1px var(--btn-pagi-cube-border);
  transition: all 0.05s ease-in-out !important;
}
html.env-dashboard .btn-pagi-cube i {
  color: var(--btn-pagi-cube-icon) !important;
}
html.env-dashboard .btn-pagi-cube:hover {
  background-color: var(--btn-pagi-cube-bg_h) !important;
  color: var(--btn-pagi-cube-text_h) !important;
  box-shadow: inset 0 0 0 1px var(--btn-pagi-cube-border_h);
}
html.env-dashboard .btn-pagi-cube:hover i {
  color: var(--btn-pagi-cube-icon_h) !important;
}
html.env-dashboard .btn-pagi-cube:active {
  background-color: var(--btn-pagi-cube-bg_h_a) !important;
  color: var(--btn-pagi-cube-text_h_a) !important;
  box-shadow: inset 0 0 0 1px var(--btn-pagi-cube-border_h_a);
}
html.env-dashboard .btn-pagi-cube:active i {
  color: var(--btn-pagi-cube-icon_h_a) !important;
}

html.env-dashboard.light {
  --btn-dash-all-text: var(--base-900);
  --btn-dash-all-icon: var(--base-900);
  --btn-dash-all-text_h: var(--pm-primary-brighter);
  --btn-dash-all-icon_h: var(--pm-primary-brighter);
  --btn-dash-all-text_h_a: var(--pm-primary-brighter);
  --btn-dash-all-icon_h_a: var(--pm-primary-brighter);
  /* Change password buttons */
  --btn-password-clear-text: var(--base-600);
  --btn-password-clear-text_h: var(--pm-primary-brighter);
  --btn-password-change-text: var(--base-900);
  --btn-password-change-text_h: var(--pm-primary-brighter);
  --btn-password-change-text_h: var(--base-900);
  /* Pagination cube buttons */
  --btn-pagi-cube-bg: white;
  --btn-pagi-cube-text: var(--base-600);
  --btn-pagi-cube-icon: var(--base-600);
  --btn-pagi-cube-border: var(--base-200);
  --btn-pagi-cube-bg_h: var(--pm-sky-blue);
  --btn-pagi-cube-text_h: var(--pm-primary-brighter);
  --btn-pagi-cube-border_h: var(--pm-sky-blue);
  --btn-pagi-cube-icon_h: white;
  --btn-pagi-cube-bg_h_a: var(--pm-sky-blue);
  --btn-pagi-cube-text_h_a: var(--pm-primary-brighter);
  --btn-pagi-cube-border_h_a: var(--pm-sky-blue);
  --btn-pagi-cube-icon_h_a: white;
}

html.env-dashboard.dark {
  --btn-dash-all-text: var(--base-50);
  --btn-dash-all-icon: var(--base-50);
  --btn-dash-all-text_h: var(--pm-sky-blue);
  --btn-dash-all-icon_h: var(--pm-sky-blue);
  --btn-dash-all-text_h_a: var(--pm-sky-blue);
  --btn-dash-all-icon_h_a: var(--pm-sky-blue);
  --btn-password-clear-text: var(--base-400);
  --btn-password-clear-text_h: var(--pm-primary-brighter);
  --btn-password-change-text: var(--base-50);
  --btn-password-change-text_h: var(--pm-sky-blue);
  --btn-password-change-text_h: var(--base-50);
  /* Pagination cube buttons */
  --btn-pagi-cube-bg: var(--base-400);
  --btn-pagi-cube-text: var(--base-400);
  --btn-pagi-cube-icon: var(--base-50);
  --btn-pagi-cube-border: var(--base-800);
  --btn-pagi-cube-bg_h: var(--pm-sky-blue);
  --btn-pagi-cube-text_h: var(--base-50);
  --btn-pagi-cube-border_h: var(--pm-sky-blue);
  --btn-pagi-cube-icon_h: var(--base-50);
  --btn-pagi-cube-bg_h_a: var(--pm-sky-blue);
  --btn-pagi-cube-text_h_a: var(--base-50);
  --btn-pagi-cube-border_h_a: var(--pm-sky-blue);
  --btn-pagi-cube-icon_h_a: var(--base-50);
}

/* ============================================================================
   6. FORM COMPONENTS
   ============================================================================ */
/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.mpd-form * {
  box-sizing: border-box;
}
.mpd-form > .m-wrap {
  /* Switchable form panel */
}
.mpd-form > .m-wrap > .m-section.form-panel > .m-wrap {
  display: grid;
  gap: calc(var(--lh) * 1rem);
}
.mpd-form > .m-wrap > .m-section.form-panel > .m-wrap > .m-section > .m-wrap > .m-row > .m-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: calc(var(--lh) * 1rem);
}
.mpd-form > .m-wrap > .m-section.form-panel > .m-wrap > .m-section > .m-wrap > .m-row > .m-wrap > .m-col.full-width {
  grid-column: 1/-1;
  /* Spans from the first to the last column on all screen sizes */
}
.mpd-form > .m-wrap .field input,
.mpd-form > .m-wrap .field textarea {
  width: 100%;
}
.mpd-form > .m-wrap .field label {
  display: flex;
  flex-direction: column;
}
.mpd-form > .m-wrap .field label > span {
  font-size: var(--fs--05);
  color: var(--base-600);
  font-weight: 400;
  display: inline-block;
  margin-bottom: calc(var(--lh) * 0.25rem);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap {
  gap: calc(var(--lh) * 1rem);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-fields > .m-wrap {
  gap: calc(var(--lh) * 0.7rem);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-fields .field input,
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-fields .field textarea {
  padding: calc(var(--lh) * 0.5rem);
  padding-left: calc(var(--lh) * 1rem);
  color: var(--pm-primary);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-fields .field input::placeholder,
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-fields .field textarea::placeholder {
  font-size: var(--fs--1);
  color: #a2a8c3;
  @apply tracking-wide;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-fields .field label > span {
  font-size: var(--fs--05);
  color: var(--base-600);
  font-weight: 400;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-fields .field textarea {
  font-family: var(--font-family);
  font-feature-settings: var(--font-feature-settings, normal);
  font-size: 1rem;
  color: #334155;
  background: #ffffff;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 6px;
  outline-color: transparent;
  box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 1px 2px 0 rgba(18, 18, 23, 0.05);
  min-height: calc(var(--lh) * 5rem);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-fields .field textarea::placeholder {
  color: #a2a8c3;
  @apply tracking-wide;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-actions > .m-wrap {
  gap: calc(var(--lh) * 0.5rem);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-actions > .m-wrap .btn-submit {
  display: flex;
  gap: calc(var(--lh) * 0.5rem);
  padding: calc(var(--lh) * 0.5rem) calc(var(--lh) * 1rem);
  background: var(--pm-primary);
  border-radius: 60px;
  position: relative;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-actions > .m-wrap .btn-submit .sec-icon {
  display: flex;
  align-items: center;
  gap: calc(var(--lh) * 0.5rem);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-actions > .m-wrap .btn-submit .sec-icon i {
  color: white;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-actions > .m-wrap .btn-submit .sec-icon .spinner-container {
  position: relative;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-actions > .m-wrap .btn-submit .sec-icon .spinner-container .spinner {
  position: relative;
  width: 32px;
  height: 32px;
  transform: none;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-actions > .m-wrap .btn-submit .sec-icon .spinner-container .spinner i {
  font-size: 32px;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-actions > .m-wrap .btn-submit .sec-icon .spinner-container .spinner i svg {
  fill: white;
  height: 100%;
  width: 100%;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-actions > .m-wrap .btn-submit .sec-label {
  color: white;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-actions > .m-wrap .btn-submit:hover {
  background: var(--pm-primary-brighter);
  transform: translateY(-1px);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-actions > .m-wrap .btn-submit:hover:active {
  transform: translateY(0px);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-additional .field > .m-wrap {
  display: flex;
  align-items: center;
  gap: calc(var(--lh) * 0.5rem);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-additional .field > .m-wrap > span {
  color: var(--base-500);
  font-size: var(--fs--1);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel > .m-wrap > .m-section.sec-additional .field > .m-wrap i {
  color: var(--blue-300);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel.success .success-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel.success .success-wrapper > .icon .lottie-wrap {
  width: 300px;
  height: 300px;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel.success .success-wrapper .sending {
  color: var(--base-500);
}
.mpd-form.standard > .m-wrap > .m-section.form-panel.success .success-wrapper .content {
  display: flex;
  flex-direction: column;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel.success .success-wrapper .content * {
  text-align: center;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel.success .success-wrapper .content h3 {
  padding: calc(var(--lh) * 1rem) 0 0 0;
  font-size: var(--fs-2);
  color: var(--pm-primary);
  margin: 0;
  font-weight: 300;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel.success .success-wrapper .content > p {
  font-size: var(--fs-0);
  color: var(--base-600);
  margin-bottom: calc(var(--lh) * 1rem);
  line-height: 1.5;
}
.mpd-form.standard > .m-wrap > .m-section.form-panel.success .success-wrapper .content button {
  margin: 0 auto;
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.p-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.p-inputtext.mpd {
  border-radius: calc(var(--lh) * 2rem);
  padding: calc(var(--lh) * 0.5rem) calc(var(--lh) * 0.8rem);
  font-size: var(--fs--05);
  color: var(--InputTextColor) !important;
  border-color: var(--InputTextBorder);
  background: var(--InputBg);
  box-shadow: inset 0 0 0 1px var(--InputTextBorder);
}
.p-inputtext.mpd:focus {
  box-shadow: inset 0 0 0 1px var(--InputTextBorder_a) !important;
}
.p-inputtext.mpd:active {
  box-shadow: inset 0 0 0 1px var(--InputTextBorder_a) !important;
}
.p-inputtext.mpd::placeholder {
  color: var(--InputTextPlaceholderColor);
}

.p-icon-field {
  color: var(--InputTextColor);
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
}
.p-icon-field:focus {
  border-color: var(--pm-sky-blue);
}
.p-icon-field:active {
  border-color: var(--pm-sky-blue);
}
.p-icon-field > .p-input-icon {
  position: absolute;
  left: calc(var(--lh) * 0.6rem);
  width: 18px;
  top: 50%;
  transform: translateY(calc(-50% + 0px));
  color: var(--IconFieldIcon);
}
.p-icon-field > .p-inputtext {
  padding-left: calc(var(--lh) * 1.75rem);
}
.p-dropdown {
  border-radius: calc(var(--lh) * 2rem);
  font-size: var(--fs--05);
  display: flex;
  cursor: pointer;
  background: var(--DropdownBg);
  border-color: var(--DropdownBorder);
}
.p-dropdown .p-icon.p-dropdown-check-icon {
  color: var(--DropdownItemCheckIcon);
}
.p-dropdown .p-dropdown-label {
  flex: 1;
  color: var(--DropdownItemText);
}
.p-dropdown .p-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-dropdown .p-dropdown-trigger .p-icon {
  width: 14px;
}
.p-dropdown .p-dropdown-trigger svg {
  fill: var(--DropdownTriggerIconColor);
}
.p-dropdown .p-dropdown-trigger svg * {
  fill: var(--DropdownTriggerIconColor);
}
.p-dropdown:focus {
  border-color: var(--pm-sky-blue);
}
.p-dropdown:hover {
  border-color: var(--pm-sky-blue);
}
.p-dropdown:active {
  border-color: var(--pm-sky-blue);
}
.p-dropdown.p-focus {
  border-color: var(--pm-sky-blue);
}

.p-password {
  position: relative;
  display: flex;
}
.p-password .p-password-input {
  flex: 1;
  padding-right: calc(var(--lh) * 2rem);
}
.p-password > svg {
  align-self: center;
  position: absolute;
  right: calc(var(--lh) * 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.p-multiselect {
  border: 1px solid var(--MultiSelectPanelBorder);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
  border-radius: 6px;
  outline-color: transparent;
  border-color: var(--MultiSelectHeaderBorder);
  padding: calc(var(--lh) * 0.5rem) calc(var(--lh) * 0.8rem);
  border-radius: calc(var(--lh) * 2rem);
  background: var(--MultiSelectHeaderBg);
  color: var(--MultiSelectHeaderText);
  display: flex;
  cursor: pointer;
}
.p-multiselect > .p-multiselect-label-container {
  flex: 1;
}
.p-multiselect > .p-multiselect-label-container > .p-multiselect-label {
  color: var(--MultiSelectHeaderText);
  font-size: var(--fs--05);
}
.p-multiselect > .p-multiselect-label-container > .p-multiselect-label.p-placeholder {
  color: var(--MultiSelectHeaderPlaceholderText);
  font-size: var(--fs--05);
}
.p-multiselect > .p-multiselect-trigger > svg {
  width: 14px;
}
.p-multiselect > .p-multiselect-trigger > svg * {
  fill: var(--MultiSelectHeaderDropArrowIcon);
}
.p-multiselect:hover {
  border-color: var(--MultiSelectHeaderBorder_h);
}
.p-multiselect:active {
  border-color: var(--MultiSelectHeaderBorder_a);
}
.p-multiselect:focus {
  border-color: var(--MultiSelectHeaderBorder_f);
}

.p-multiselect-panel {
  background: var(--MultiSelectPanelBg);
  color: #334155;
  border: 1px solid var(--MultiSelectPanelBorder);
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-multiselect-panel > .p-multiselect-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--lh) * 0.25rem) calc(var(--lh) * 0.25rem) calc(var(--lh) * 0.25rem) calc(var(--lh) * 0.25rem);
  border-bottom: 0 none;
  color: #334155;
  background: var(--MultiSelectHeaderBg);
  margin: 0 0 0 0;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  gap: calc(var(--lh) * 1.5rem);
}
.p-multiselect-panel > .p-multiselect-header > .p-checkbox {
  padding: 0 calc(var(--lh) * 0.25rem);
}
.p-multiselect-panel > .p-multiselect-header > .p-checkbox .p-checkbox-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-multiselect-panel > .p-multiselect-header > .p-multiselect-filter-container {
  flex: 1;
  position: relative;
  display: flex;
}
.p-multiselect-panel > .p-multiselect-header > .p-multiselect-filter-container > .p-inputtext.p-multiselect-filter {
  padding: calc(var(--lh) * 0.3rem) calc(var(--lh) * 0.8rem);
  width: 100%;
}
.p-multiselect-panel > .p-multiselect-header > .p-multiselect-filter-container > svg {
  position: absolute;
  right: calc(var(--lh) * 0.5rem);
  top: 50%;
  transform: translateY(-50%);
}
.p-multiselect-panel > .p-multiselect-header > .p-multiselect-filter-container > svg * {
  fill: var(--MultiSelectHeaderFilterIcon);
}
.p-multiselect-panel > .p-multiselect-header > .p-multiselect-close.p-link > svg * {
  fill: var(--MultiSelectHeaderCloseIcon);
}
.p-multiselect-panel > .p-multiselect-header > .p-multiselect-close.p-link:hover > svg * {
  fill: var(--MultiSelectHeaderCloseIcon_h);
}
.p-multiselect-panel > .p-multiselect-items-wrapper {
  overflow: auto;
}
.p-multiselect-panel > .p-multiselect-items-wrapper > .p-multiselect-items {
  margin: 0;
  padding: 0;
  padding: 0.25rem 0.25rem;
}
.p-multiselect-panel > .p-multiselect-items-wrapper > .p-multiselect-items > li {
  list-style: none;
}
.p-multiselect-panel > .p-multiselect-items-wrapper > .p-multiselect-items > li.p-multiselect-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: normal;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  margin: 2px 0;
  padding: 0.5rem 0.75rem;
  border: 0 none;
  color: #334155;
  background: transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
  border-radius: 4px;
  background: var(--MultiSelectItemBG);
  display: flex;
  gap: calc(var(--lh) * 0.5rem);
}
.p-multiselect-panel > .p-multiselect-items-wrapper > .p-multiselect-items > li.p-multiselect-item > .p-checkbox > .p-checkbox-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-multiselect-panel > .p-multiselect-items-wrapper > .p-multiselect-items > li.p-multiselect-item > span {
  color: var(--MultiSelectItemText);
  font-size: var(--fs--05);
}
.p-multiselect-panel > .p-multiselect-items-wrapper > .p-multiselect-items > li.p-multiselect-item.p-focus {
  background: var(--MultiSelectItemBG_f);
}

.p-inputswitch {
  display: inline-block;
  width: 2.5rem;
  height: 1.5rem;
}
.p-inputswitch .p-inputswitch-input {
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  z-index: 1;
  outline: 0 none;
  border-radius: 30px;
}
.p-inputswitch .p-inputswitch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid transparent;
  background: var(--InputSwitchSliderBg);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
  border-radius: 30px;
  outline-color: transparent;
  border: 0 none;
}
.p-inputswitch .p-inputswitch-slider:before {
  position: absolute;
  content: "";
  top: 50%;
  background: var(--InputSwitchSliderHandle);
  width: 1rem;
  height: 1rem;
  left: 0.25rem;
  margin-top: -0.5rem;
  border-radius: 50%;
  transition-duration: 0.2s;
}
.p-inputswitch.p-highlight .p-inputswitch-slider {
  background: var(--InputSwitchSliderBg_h);
}
.p-inputswitch.p-highlight .p-inputswitch-slider {
  background: var(--InputSwitchSliderBg_a);
}
.p-inputswitch.p-highlight .p-inputswitch-slider:before {
  background: #ffffff;
  transform: translateX(1rem);
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.p-selectbutton.mpd {
  display: flex;
}
.p-selectbutton.mpd .p-togglebutton {
  background: var(--SelectButtonBtnBg);
  border-color: var(--SelectButtonBtnBorder);
  box-shadow: none;
  padding: 0 calc(var(--lh) * 0.75rem);
  min-height: calc(var(--lh) * 1.5rem);
  border-radius: 0;
  display: flex;
  align-items: center;
  position: relative;
  border: 1px solid var(--SelectButtonBtnBorder);
}
.p-selectbutton.mpd .p-togglebutton:first-child {
  border-radius: calc(var(--lh) * 0.25rem) 0 0 calc(var(--lh) * 0.25rem);
  border-left: 1px solid var(--SelectButtonBtnBorder);
}
.p-selectbutton.mpd .p-togglebutton:last-child {
  border-radius: 0 calc(var(--lh) * 0.25rem) calc(var(--lh) * 0.25rem) 0;
}
.p-selectbutton.mpd .p-togglebutton .p-togglebutton-label {
  color: var(--SelectButtonBtnText);
  font-size: var(--fs--05);
  transition: none;
}
.p-selectbutton.mpd .p-togglebutton:hover {
  background: var(--SelectButtonBtnBg_h);
  border-color: var(--SelectButtonBtnBorder_h);
}
.p-selectbutton.mpd .p-togglebutton:hover .p-button-label {
  color: var(--SelectButtonBtnText_h);
}
.p-selectbutton.mpd .p-togglebutton:hover:active {
  background: var(--SelectButtonBtnBg_a_h);
  border-color: var(--SelectButtonBtnBorder_a_h);
}
.p-selectbutton.mpd .p-togglebutton:hover:active .p-togglebutton-label {
  color: var(--SelectButtonBtnText_a_h);
}
.p-selectbutton.mpd .p-togglebutton.p-togglebutton-checked {
  background: var(--SelectButtonBtnBg_a);
  border-color: var(--SelectButtonBtnBorder_a);
}
.p-selectbutton.mpd .p-togglebutton.p-togglebutton-checked .p-togglebutton-label {
  color: var(--SelectButtonBtnText_a);
}
.p-selectbutton.mpd .p-togglebutton.p-togglebutton-checked:hover {
  background: var(--SelectButtonBtnBg_a_h);
  border-color: var(--SelectButtonBtnBorder_a_h);
}
.p-selectbutton.mpd .p-togglebutton.p-togglebutton-checked:hover .p-togglebutton-label {
  color: var(--SelectButtonBtnText_a_h);
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.dp--menu-wrapper .dp__menu {
  background: var(--DatePickerMenuBG);
  border: 1px solid var(--DatePickerBorder) !important;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.dp--menu-wrapper .dp__menu .dp__arrow_top {
  background: var(--DatePickerArrowBG);
  border-color: var(--DatePickerBorder);
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar .dp--arrow-btn-nav > .dp__inner_nav .dp__icon {
  background: none;
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar .dp--arrow-btn-nav > .dp__inner_nav button {
  color: var(--DatePickerNavButtonColor);
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar .dp--arrow-btn-nav > .dp__inner_nav button svg * {
  fill: var(--DatePickerArrowColor);
  stroke: var(--DatePickerArrowColor);
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar .dp--arrow-btn-nav:hover > .dp__inner_nav .dp__icon {
  background: none;
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar .dp--arrow-btn-nav:hover > .dp__inner_nav button {
  color: var(--DatePickerNavButtonColor_h);
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar .dp--arrow-btn-nav:hover > .dp__inner_nav button svg * {
  fill: var(--DatePickerArrowColor_h);
  stroke: var(--DatePickerArrowColor_h);
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar .dp__calendar_header_item {
  background: var(--DatePickerCalendarHeaderBG);
  color: var(--DatePickerCalendarHeaderColor);
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar .dp__calendar_header_separator {
  background: var(--DatePickerBorder);
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar * {
  color: var(--DatePickerCalendarTextColor);
  font-size: var(--fs--1);
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar button {
  color: var(--DatePickerButtonColor);
  background: var(--DatePickerButtonBG);
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar button:hover {
  background: var(--DatePickerButtonBG_h);
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar .dp__calendar_item > .dp__cell_inner {
  background: var(--DatePickerCalendarItemBG);
  color: var(--DatePickerCalendarItemColor);
}
.dp--menu-wrapper .dp__menu .dp__instance_calendar .dp__calendar_item:hover > .dp__cell_inner {
  background: var(--DatePickerCalendarItemBG_h);
}
.dp--menu-wrapper .dp__menu .dp__month_year_wrap * {
  color: var(--DatePickerMonthOverlayTextColor);
}
.dp--menu-wrapper .dp__menu .dp__month_year_wrap .dp__overlay_col > .dp__overlay_cell_active {
  background: var(--DatePickerButtonBG_h);
}

.mpd-date-picker .dp__input_wrap input {
  padding: calc(var(--lh) * 0.4rem) calc(var(--lh) * 0.8rem) calc(var(--lh) * 0.4rem) calc(var(--lh) * 1.8rem);
  border-radius: calc(var(--lh) * 2rem);
  color: var(--DatePickerInputTextColor);
  font-size: var(--fs--1);
  background: var(--DatePickerBG);
  border-color: var(--DatePickerBorder);
  min-height: 60px;
}
@media (min-width: 47.9375em) {
  .mpd-date-picker .dp__input_wrap input {
    min-height: 50px;
  }
}
.mpd-date-picker .dp__input_wrap input.dp__input_focus {
  border-color: var(--DatePickerBorder_a);
}
.mpd-date-picker .dp__input_wrap input:hover {
  border-color: var(--DatePickerBorder_a);
  background: var(--DatePickerBG_h);
}
.mpd-date-picker .dp__input_wrap svg.dp__input_icon {
  fill: var(--DatePickerInputIconColor);
  padding-left: calc(var(--lh) * 0.6rem);
}

/* ============================================================================
   7. UI COMPONENTS - Sorted alphabetically
   ============================================================================ */
/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.p-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-avatar.p-avatar-circle {
  border-radius: 100%;
}
.p-avatar.p-avatar-md {
  width: calc(var(--lh) * 1rem);
  height: calc(var(--lh) * 1rem);
}
.p-avatar.p-avatar-lg {
  width: calc(var(--lh) * 1.3rem);
  height: calc(var(--lh) * 1.3rem);
}
.p-avatar {
  width: calc(var(--lh) * 1.3rem);
  height: calc(var(--lh) * 1.3rem);
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.p-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.p-button.btn {
  border-radius: calc(var(--lh) * 2rem);
  background: var(--btn-primary-bg);
  border-width: 1px;
  border-style: solid;
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
  cursor: pointer;
  padding: 0 calc(var(--lh) * 1rem);
  height: calc(var(--lh) * 2rem);
  transition: all 0.05s ease-in-out;
  position: relative;
  overflow: hidden;
}
.p-button.btn .p-button-label {
  font-weight: 500;
  color: var(--btn-primary-text);
  font-size: var(--fs--05);
  position: relative;
  display: inline-block;
  transform: translateY(-1px);
}
.p-button.btn .p-button-icon {
  color: var(--btn-primary-icon);
}
.p-button.btn:hover {
  transform: translateY(-1px);
  background: var(--btn-primary-bg_h);
  border-color: var(--btn-primary-border_h);
  color: var(--btn-primary-text_h);
}
.p-button.btn:hover:active {
  transform: translateY(0);
  background: var(--btn-primary-bg_h_a);
  border-color: var(--btn-primary-border_h_a);
  color: var(--btn-primary-text_h_a);
}
.p-button.btn.btn-icon {
  display: flex;
  align-items: center;
  padding: 0 calc(var(--lh) * 1rem);
  gap: calc(var(--lh) * 0.5rem);
}
.p-button.btn.btn-icon span.sec-icon {
  font-size: var(--fs-1);
}
.p-button.btn.btn-icon span.sec-label {
  font-size: var(--fs-0);
  flex: 1;
  transform: translateY(-1px);
}
.p-button.btn.btn-has-loading {
  min-width: calc(var(--lh) * 8rem);
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-button.btn.btn-has-loading span {
  transition: opacity 0.2s ease-in-out;
  /* &.default {

  } */
}
.p-button.btn.btn-has-loading span.working {
  position: relative;
  display: block;
}
.p-button.btn.no-transform {
  transform: none;
}
.p-button.btn.no-transform:hover {
  transform: none;
}
.p-button.btn.style-outline {
  background: var(--btn-primary-outline-bg);
  border-color: var(--btn-primary-outline-border);
  color: var(--btn-primary-outline-text);
}
.p-button.btn.style-outline .p-button-label {
  color: var(--btn-primary-outline-text);
}
.p-button.btn.style-outline .p-button-icon {
  color: var(--btn-primary-outline-icon);
}
.p-button.btn.style-outline:hover {
  background: var(--btn-primary-outline-bg_h);
  border-color: var(--btn-primary-outline-border_h);
  color: var(--btn-primary-outline-text_h);
}
.p-button.btn.style-outline:hover .p-button-icon {
  color: var(--btn-primary-outline-icon_h);
}
.p-button.btn.style-outline:hover .p-button-label {
  color: var(--btn-primary-outline-text_h) !important;
}
.p-button.btn.style-outline:hover:active {
  background: var(--btn-primary-outline-bg_h_a);
  border-color: var(--btn-primary-outline-border_h_a);
  color: var(--btn-primary-outline-text_h_a);
}
.p-button.btn.style-outline:hover:active .p-button-icon {
  color: var(--btn-primary-outline-icon_h_a);
}
.p-button.btn.style-outline:hover:active .p-button-label {
  color: var(--btn-primary-outline-text_h_a);
}
.p-button.btn.style-outline.btn-icon {
  gap: calc(var(--lh) * 0.5rem);
}
.p-button.btn.style-outline.btn-icon .sec-icon svg * {
  stroke: var(--btn-primary-outline-icon);
}
.p-button.btn.style-outline.btn-icon .sec-label {
  color: var(--btn-primary-outline-text);
}
.p-button.btn.style-outline.btn-icon:hover .sec-label {
  color: var(--btn-primary-outline-text_h) !important;
}
.p-button.btn.style-outline.btn-icon:hover .sec-icon svg * {
  stroke: var(--btn-primary-outline-icon_h);
}
.p-button.btn.style-outline.btn-icon:hover:active .sec-label {
  color: var(--btn-primary-outline-text_h_a) !important;
}
.p-button.btn.style-outline.btn-icon:hover:active .sec-icon svg * {
  stroke: var(--btn-primary-outline-icon_h_a);
}
.p-button.btn.btn-link {
  font-size: var(--fs--05);
  background: var(--btn-link-bg);
  border-color: var(--btn-link-border);
  color: var(--btn-link-text);
}
.p-button.btn.btn-link:hover {
  background: var(--btn-link-bg_h);
  border-color: var(--btn-link-border_h);
  color: var(--btn-link-text_h);
  outline: 0;
  box-shadow: none;
}
.p-button.btn.btn-link:hover:active {
  background: var(--btn-link-bg_a);
  border-color: var(--btn-link-border_a);
  color: var(--btn-link-text_a);
  outline: 0;
  box-shadow: none;
}
.p-button.btn.btn-link:active, .p-button.btn.btn-link:visited, .p-button.btn.btn-link:focus {
  outline: 0;
  box-shadow: none;
}
.p-button.btn.btn-primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
  font-size: var(--fs--05);
}
.p-button.btn.btn-primary i, .p-button.btn.btn-primary .p-button-icon {
  color: var(--btn-primary-icon);
}
.p-button.btn.btn-primary .p-button-label {
  font-size: var(--fs--05);
  color: var(--btn-primary-text);
}
.p-button.btn.btn-primary:hover {
  background: var(--btn-primary-bg_h);
  border-color: var(--btn-primary-border_h);
  color: var(--btn-primary-text_h);
}
.p-button.btn.btn-primary:hover i, .p-button.btn.btn-primary:hover .p-button-icon {
  color: var(--btn-primary-icon_h);
}
.p-button.btn.btn-primary:hover:active {
  background: var(--btn-primary-bg_h_a);
  border-color: var(--btn-primary-border_h_a);
  color: var(--btn-primary-text_h_a);
}
.p-button.btn.btn-primary:hover:active i, .p-button.btn.btn-primary:hover:active .p-button-icon {
  color: var(--btn-primary-icon_h_a);
}
.p-button.btn.btn-primary.btn-outline {
  background: var(--btn-primary-outline-bg);
  border-color: var(--btn-primary-outline-border);
  color: var(--btn-primary-outline-text);
}
.p-button.btn.btn-primary.btn-outline:hover {
  background: var(--btn-primary-outline-bg_h);
  border-color: var(--btn-primary-outline-border_h);
  color: var(--btn-primary-outline-text_h);
}
.p-button.btn.btn-primary.btn-outline:hover:active {
  background: var(--btn-primary-outline-bg_h_a);
  border-color: var(--btn-primary-outline-border_h_a);
  color: var(--btn-primary-outline-text_h_a);
}
.p-button.btn.btn-primary-brighter {
  background: var(--pm-primary-brighter);
  border-color: var(--pm-primary-brighter);
  color: var(--base-50);
}
.p-button.btn.btn-primary-brighter:hover {
  background: var(--pm-primary-bright);
  border-color: var(--pm-primary-bright);
  color: var(--base-50);
}
.p-button.btn.btn-primary-brighter:hover:active {
  background: var(--pm-primary-bright);
  border-color: var(--pm-primary-bright);
  color: var(--base-50);
}
.p-button.btn.btn-primary-brighter.btn-outline {
  background: transparent;
  border-color: var(--pm-primary-bright);
  color: var(--base-50);
}
.p-button.btn.btn-primary-bright {
  background: var(--pm-primary-bright);
  border-color: var(--pm-primary-bright);
  color: var(--base-50);
}
.p-button.btn.btn-primary-bright:hover {
  background: var(--pm-primary-bright);
  border-color: var(--pm-primary-bright);
  color: var(--base-50);
}
.p-button.btn.btn-primary-bright:hover:active {
  background: var(--pm-primary-bright);
  border-color: var(--pm-primary-bright);
  color: var(--base-50);
}
.p-button.btn.btn-primary-bright.btn-outline {
  background: transparent;
  border-color: var(--pm-primary-bright);
  color: var(--base-50);
}
.p-button.btn.sky-blue {
  background: var(--pm-sky-blue);
  border-color: var(--pm-sky-blue);
  color: var(--base-50);
}
.p-button.btn.sky-blue:hover {
  background: var(--pm-sky-blue);
  border-color: var(--pm-sky-blue);
  color: var(--base-50);
  box-shadow: none;
}
.p-button.btn.brand-blue {
  background: var(--pm-brand-blue);
  border-color: var(--pm-brand-blue);
  color: var(--base-50);
}
.p-button.btn.brand-blue:hover {
  background: var(--pm-yellow);
  border-color: var(--pm-yellow);
  color: var(--base-50);
  box-shadow: none;
}
.p-button.btn.btn-danger {
  background: var(--pm-danger);
  border-color: var(--pm-danger);
  color: var(--base-50);
}
.p-button.btn.btn-danger:hover {
  background: var(--pm-danger);
  border-color: var(--pm-danger);
  color: var(--base-50);
  box-shadow: none;
}
.p-button.btn.btn-warning {
  background: var(--pm-warning);
  border-color: var(--pm-yellow);
  color: var(--base-50);
}
.p-button.btn.btn-warning.btn-outline {
  background: transparent;
  border-color: var(--pm-yellow);
  color: var(--pm-yellow);
}
.p-button.btn.btn-payment-solid {
  background: var(--btn-payment-bg);
  border-color: var(--btn-payment-border);
  color: var(--btn-payment-text);
}
.p-button.btn.btn-payment-solid .sec-label {
  color: var(--btn-payment-text);
}
.p-button.btn.btn-payment-solid .sec-icon svg * {
  stroke: var(--btn-payment-icon);
}
.p-button.btn.btn-payment-solid:hover {
  background: var(--btn-payment-bg_h);
  border-color: var(--btn-payment-border_h);
  color: var(--btn-payment-text_h);
}
.p-button.btn.btn-payment-solid:hover .sec-label {
  color: var(--btn-payment-text_h);
}
.p-button.btn.btn-payment-solid:hover .sec-icon svg * {
  stroke: var(--btn-payment-icon_h);
}
.p-button.btn.btn-payment-solid:hover:active {
  background: var(--btn-payment-bg_h_a);
  border-color: var(--btn-payment-border_h_a);
  color: var(--btn-payment-text_h_a);
}
.p-button.btn.btn-payment-solid:hover:active .sec-label {
  color: var(--btn-payment-text_h_a);
}
.p-button.btn.btn-payment-solid:hover:active .sec-icon svg * {
  stroke: var(--btn-payment-icon_h_a);
}
.p-button.btn.style-outline.btn-payment-outlined {
  background: var(--btn-payment-outlined-bg);
  border-color: var(--btn-payment-outlined-border);
  color: var(--btn-payment-outlined-text);
}
.p-button.btn.style-outline.btn-payment-outlined .sec-label {
  color: var(--btn-payment-outlined-text);
}
.p-button.btn.style-outline.btn-payment-outlined .sec-icon svg * {
  stroke: var(--btn-payment-outlined-icon);
}
.p-button.btn.style-outline.btn-payment-outlined:hover {
  background: var(--btn-payment-outlined-bg_h);
  border-color: var(--btn-payment-outlined-border_h);
  color: var(--btn-payment-outlined-text_h);
}
.p-button.btn.style-outline.btn-payment-outlined:hover .sec-label {
  color: var(--btn-payment-outlined-text_h);
}
.p-button.btn.style-outline.btn-payment-outlined:hover .sec-icon svg * {
  stroke: var(--btn-payment-outlined-icon_h);
}
.p-button.btn.style-outline.btn-payment-outlined:hover:active {
  background: var(--btn-payment-outlined-bg_h_a);
  border-color: var(--btn-payment-outlined-border_h_a);
  color: var(--btn-payment-outlined-text_h_a);
}
.p-button.btn.style-outline.btn-payment-outlined:hover:active .sec-label {
  color: var(--btn-payment-outlined-text_h_a);
}
.p-button.btn.style-outline.btn-payment-outlined:hover:active .sec-icon svg * {
  stroke: var(--btn-payment-outlined-icon_h_a);
}
.p-button.btn.session-splash-button {
  background: var(--pm-sky-blue);
  border-color: var(--pm-sky-blue);
  color: var(--base-50);
  font-size: var(--fs-05);
  padding: 0 calc(var(--lh) * 1rem);
  height: calc(var(--lh) * 2rem);
}
.p-button.btn.btn-directory-action {
  background: var(--BtnDirectoryActionBG) !important;
  border-color: var(--BtnDirectoryActionBorder);
  color: var(--BtnDirectoryActionText);
  padding: 0 calc(var(--lh) * 1rem);
  min-width: 100px;
  height: 36px;
}
.p-button.btn.btn-directory-action .sec-icon i {
  color: var(--BtnDirectoryActionIcon) !important;
}
.p-button.btn.btn-directory-action:hover {
  background: var(--BtnDirectoryActionBG_h) !important;
  border-color: var(--BtnDirectoryActionBorder_h) !important;
  color: var(--BtnDirectoryActionText_h) !important;
}
.p-button.btn.btn-directory-action:hover .sec-icon i {
  color: var(--BtnDirectoryActionIcon_h) !important;
}
.p-button.btn.btn-directory-action:hover:active {
  background: var(--BtnDirectoryActionBG_h_a) !important;
  border-color: var(--BtnDirectoryActionBorder_h_a) !important;
  color: var(--BtnDirectoryActionText_h_a) !important;
}
.p-button.btn.btn-directory-action:hover:active .sec-icon i {
  color: var(--BtnDirectoryActionIcon_h_a) !important;
}
.p-button.btn.btn-directory-action {
  /*     &.new-session {
        i {

        }
      } */
}
.p-button.btn.btn-directory-action.refresh i {
  color: var(--BtnDirectoryActionIcon_a) !important;
}
.p-button.btn.btn-auth {
  background: var(--pm-primary) !important;
  border-color: var(--pm-primary) !important;
  color: var(--base-50) !important;
}
.p-button.btn.btn-auth:hover {
  background: var(--pm-primary-brighter) !important;
  border-color: var(--pm-primary-brighter) !important;
  color: var(--base-50) !important;
}
.p-button.btn.btn-auth:hover:active {
  background: var(--pm-primary-bright) !important;
  border-color: var(--pm-primary-bright) !important;
  color: var(--base-50) !important;
}
.p-button.btn.xxs {
  height: calc(var(--lh) * 1.25rem);
  font-size: var(--fs--1);
}
.p-button.btn.xxs .p-button-label {
  font-size: var(--fs--1);
}
.p-button.btn.xs {
  height: calc(var(--lh) * 1.5rem);
  font-size: var(--fs--1);
}
.p-button.btn.xs .p-button-label {
  font-size: var(--fs--1);
}
.p-button.btn.sm {
  height: calc(var(--lh) * 1.75rem);
  font-size: var(--fs--05);
}
.p-button.btn.sm .p-button-label {
  font-size: var(--fs--05);
}
.p-button.btn.lg {
  height: calc(var(--lh) * 2.25rem);
  font-size: var(--fs-0);
}
.p-button.btn.lg .p-button-label {
  font-size: var(--fs-0);
}
.p-button.btn.xl {
  height: calc(var(--lh) * 2.5rem);
  font-size: var(--fs-0);
}
.p-button.btn.xl .p-button-label {
  font-size: var(--fs-0);
}
.p-button.btn {
  /*  &.btn-card-all {

   } */
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.p-checkbox {
  width: calc(var(--lh) * 1rem);
  height: calc(var(--lh) * 1rem);
  position: relative;
  cursor: pointer;
  position: relative;
}
.p-checkbox .p-checkbox-input {
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  z-index: 1;
  outline: 0 none;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
.p-checkbox .p-checkbox-box {
  border: 2px solid var(--checkboxBorder);
  background: var(--checkboxInputBG);
  width: calc(var(--lh) * 1rem);
  height: calc(var(--lh) * 1rem);
  color: var(--checkboxInputColor);
  border-radius: var(--borderRadius);
  transition: background-color var(--transitionDuration), color var(--transitionDuration), border-color var(--transitionDuration), box-shadow var(--transitionDuration);
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
  transition-duration: var(--transitionDuration);
  color: var(--checkboxIconColor);
  font-size: var(--checkboxIconFontSize);
}
.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
  width: var(--checkboxIconFontSize);
  height: var(--checkboxIconFontSize);
}
.p-checkbox .p-checkbox-box {
  /* 
          &.p-focus {

          } */
}
.p-checkbox .p-checkbox-box:hover {
  border-color: var(--checkboxBorder_h) !important;
  /*  .p-checkbox-icon {

   } */
}
.p-checkbox .p-checkbox-box.p-highlight:hover {
  border-color: var(--checkboxActiveBorderColor_h) !important;
  background: var(--checkboxActiveBg_h) !important;
  color: var(--checkboxActiveIconColor);
}
.p-checkbox .p-checkbox-box.p-highlight:hover .p-checkbox-icon {
  color: var(--checkboxActiveIconColor) !important;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-input {
  cursor: pointer;
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
  border-color: var(--inputHoverBorderColor);
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
  border-color: var(--checkboxActiveHoverBorderColor);
  background: var(--checkboxActiveHoverBg);
  color: var(--checkboxIconActiveHoverColor);
}
.p-checkbox {
  /*     &.p-invalid > .p-checkbox-box {
          // Add styles for invalid input
      } */
}
.p-checkbox:hover .p-checkbox-box {
  cursor: pointer;
  border-color: var(--checkboxActiveBorderColor);
}
.p-checkbox.p-highlight .p-checkbox-box {
  border-color: var(--checkboxActiveBorderColor);
  background: var(--checkboxActiveBg);
  color: var(--checkboxActiveIconColor);
}
.p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon {
  color: var(--checkboxActiveIconColor) !important;
}
.p-checkbox.p-highlight:hover .p-checkbox-box {
  border-color: var(--checkboxActiveBorderColor_h);
  background: var(--checkboxActiveBg_h);
  color: var(--checkboxActiveIconColor);
  cursor: pointer;
}
.p-checkbox.p-highlight:hover .p-checkbox-box .p-checkbox-icon {
  color: var(--checkboxActiveIconColor) !important;
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.p-datatable .p-datatable-header {
  background: var(--DataTableHeaderBG);
  color: var(--DataTableHeaderText);
  border-color: var(--DataTableHeaderBorder);
  font-weight: 400;
  padding: calc(var(--lh) * 0.5rem) calc(var(--lh) * 0.5rem);
}
.p-datatable .p-datatable-header .p-datatable-thead {
  background: var(--DataTableHeaderTHeadBG);
}
.p-datatable .p-datatable-header .sec-table-header-meta .title {
  color: var(--DataTableHeaderMetaTitle);
}
.p-datatable .sec-loading-header {
  background: var(--DataTableHeaderBG_loading);
  color: var(--DataTableHeaderText_loading);
}
.p-datatable .sec-empty-container {
  background: var(--DataTableHeaderBG_empty);
  color: var(--DataTableHeaderText_empty);
}
.p-datatable .p-datatable-wrapper table.p-datatable-table {
  width: 100%;
}
.p-datatable .p-datatable-wrapper table.p-datatable-table .p-datatable-thead > tr > th {
  background: var(--DataTableHeaderTHeadRowBG);
  color: var(--DataTableHeaderTHeadRowText);
  font-size: var(--fs--1);
  padding: calc(var(--lh) * 0.66rem);
}
.p-datatable .p-datatable-wrapper table.p-datatable-table .p-datatable-tbody > tr > td {
  background: var(--DataTableBodyRowBG);
  color: var(--DataTableBodyRowText);
  padding: calc(var(--lh) * 0.5rem) calc(var(--lh) * 0.5rem);
  font-size: var(--fs--1);
}
.p-datatable .p-datatable-wrapper table.p-datatable-table .p-datatable-tbody > tr.p-row-even {
  background: var(--DataTableBodyRowEvenBG);
}
.p-datatable .p-datatable-footer {
  background: var(--DataTableFooterBG);
  color: var(--DataTableFooterText);
  font-weight: 400;
}
.p-datatable .p-paginator-bottom {
  padding-top: calc(var(--lh) * 1rem);
}
.p-datatable .p-paginator-bottom .p-paginator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--lh) * 0.25rem) calc(var(--lh) * 1rem) calc(var(--lh) * 0.25rem) calc(var(--lh) * 1rem);
}
.p-datatable .p-paginator-bottom .p-dropdown {
  height: auto;
}
.p-datatable .p-paginator-bottom .p-dropdown .p-dropdown-label {
  padding: calc(var(--lh) * 0.1rem) calc(var(--lh) * 0rem) calc(var(--lh) * 0.1rem) calc(var(--lh) * 0.55rem) !important;
  font-size: var(--fs--1) !important;
}
.p-datatable .p-paginator-bottom .p-dropdown .p-dropdown-trigger {
  width: calc(var(--lh) * 1.25rem) !important;
}
.p-datatable .p-paginator-bottom .p-dropdown .p-dropdown-trigger svg {
  width: gr(0.4) !important;
  transform: translateX(-1px) !important;
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.p-divider.p-divider-horizontal {
  display: flex;
  width: 100%;
  position: relative;
  align-items: center;
  margin: calc(var(--lh) * 1rem) 0;
  padding: 0 calc(var(--lh) * 1rem);
}
.p-divider.p-divider-horizontal:before {
  border-top-style: solid;
  border-top: 1px solid var(--DividerColor);
  content: "";
  width: 100%;
  max-width: 100%;
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.p-drawer-enter-active,
.p-drawer-leave-active {
  transition: transform 0.3s ease-out;
}

.p-drawer-enter-from,
.p-drawer-leave-to {
  transform: translateX(-100%); /* for left-side Drawer */
}

.p-drawer-enter-to,
.p-drawer-leave-from {
  transform: translateX(0);
}

@keyframes p-overlay-mask-enter-animation {
  0% {
    background: transparent;
  }
  100% {
    background: rgba(0, 0, 0, 0.4);
  }
}
div[data-pc-section=mask] {
  background: rgba(0, 0, 0, 0.4);
  color: #e2e8f0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
div[data-pc-section=mask][data-p*=open] {
  animation: p-overlay-mask-enter-animation 0.15s forwards;
}

.mpd-drawer {
  display: flex;
  flex-direction: column;
  transform: translate3d(0px, 0px, 0px);
  position: relative;
  transition: transform 5s;
  background: #fff;
  color: #000;
  border: 1px solid transparent;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  height: 100%;
  border-inline-end-width: 1px;
  left: 0;
  top: 0;
  bottom: 0;
  width: 300px;
  border-right: 1px solid #e2e8f0;
  transform: translate3d(-100%, 0px, 0px);
}
.mpd-drawer[data-p*=modal] {
  position: fixed;
}
.mpd-drawer[data-p*=open] {
  transform: translate3d(0px, 0px, 0px);
}
.mpd-drawer.p-drawer-enter-active, .mpd-drawer.p-drawer-leave-active {
  transition: transform 0.3s ease-out;
}
.mpd-drawer[data-p*=left] {
  transform: translate3d(0px, 0px, 0px);
}
.mpd-drawer[data-p*=left].p-drawer-enter-from, .mpd-drawer[data-p*=left].p-drawer-leave-to {
  transform: translateX(-100%); /* for left-side Drawer */
}
.mpd-drawer[data-p*=left].p-drawer-enter-to, .mpd-drawer[data-p*=left].p-drawer-leave-from {
  transform: translateX(0);
}
.mpd-drawer[data-p*=right] {
  transform: translate3d(0px, 0px, 0px);
}
.mpd-drawer[data-p*=right].p-drawer-enter-from, .mpd-drawer[data-p*=right].p-drawer-leave-to {
  transform: translateX(100%); /* for right-side Drawer */
}
.mpd-drawer[data-p*=right].p-drawer-enter-to, .mpd-drawer[data-p*=right].p-drawer-leave-from {
  transform: translateX(0);
}
.mpd-drawer > div[data-pc-section=header] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 1.25rem;
}
.mpd-drawer > div[data-pc-section=header] > div[data-pc-section=title] {
  font-weight: 500;
  font-size: var(--fs-1);
}
.mpd-drawer > div[data-pc-section=header] > button[data-pc-name=pcclosebutton] {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding: 0.5rem 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  font-feature-settings: inherit;
  transition: background 0.2s, color 0.2s, border-color 0.2s, outline-color 0.2s, box-shadow 0.2s;
  outline-color: transparent;
  width: 2.5rem;
  padding-inline-start: 0;
  padding-inline-end: 0;
  gap: 0;
  border: 1px solid #f1f5f9;
  border-radius: 50%;
  height: 2.5rem;
  width: 2.5rem;
  background: transparent;
  border-color: transparent;
  color: #64748b;
}
.mpd-drawer > div[data-pc-section=header] > button[data-pc-name=pcclosebutton]:hover {
  background: #f1f5f9;
  color: #475569;
}
.mpd-drawer > div[data-pc-section=header] > button[data-pc-name=pcclosebutton] > svg {
  display: inline-block;
  vertical-align: baseline;
  width: 1rem;
  height: 1rem;
}

.sec-mpd-popover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.sec-mpd-popover > .sec-grid-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: #e2e8f0;
}
.sec-mpd-popover {
  /*   &.orient-left {
      // transform: translateX(-100%);
    }

    &.orient-right {
      // transform: translateX(100%);
    } */
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.mpd-btn-avatar {
  position: relative;
}
.mpd-btn-avatar .p-avatar {
  width: 38px;
  height: 38px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--MenuBtnAvatarBG);
  color: white;
  position: relative;
}
.mpd-btn-avatar .p-avatar :deep(.p-avatar-text) {
  font-size: 17px;
  font-weight: 500;
}
.mpd-btn-avatar:hover .p-avatar {
  background: var(--MenuBtnAvatarBG_h);
  transition: translateY(-1px);
}
.mpd-btn-avatar:hover:active .p-avatar {
  background: var(--MenuBtnAvatarBG_h_a);
  transition: translateY(0);
}

/* Dropdown panel */
.mpd-dropdown {
  background: var(--MenuDropdownBG);
  z-index: 5;
  padding: calc(var(--lh) * 0.2rem) 0;
  margin-top: calc(var(--lh) * 0.2rem);
  transition: all 0.1s ease-in-out;
}
.mpd-dropdown .mpd-dropdown-item {
  height: auto !important;
  min-height: 0;
  padding: calc(var(--lh) * 0.3rem) calc(var(--lh) * 1rem) !important;
  display: flex;
  justify-content: flex-start !important;
  text-align: left !important;
  background: var(--MenuDropdownItemBG);
  color: var(--MenuDropdownItemText);
  font-size: var(--fs--1);
}
.mpd-dropdown .mpd-dropdown-item i {
  color: var(--MenuDropdownItemIcon);
}
.mpd-dropdown .mpd-dropdown-item:hover {
  background: var(--MenuDropdownItemBG_h) !important;
  color: var(--MenuDropdownItemText_h) !important;
}
.mpd-dropdown .mpd-dropdown-item:hover i {
  color: var(--MenuDropdownItemIcon_h) !important;
}
.mpd-dropdown .mpd-dropdown-item:hover:active {
  background: var(--MenuDropdownItemBG_h_a) !important;
  color: var(--MenuDropdownItemText_h_a) !important;
}
.mpd-dropdown .mpd-dropdown-item:hover:active i {
  color: var(--MenuDropdownItemIcon_h_a) !important;
}
.mpd-dropdown .mpd-dropdown-item.active {
  background: var(--MenuDropdownItemBG_a) !important;
  color: var(--MenuDropdownItemText_a) !important;
}
.mpd-dropdown .mpd-dropdown-item.active i {
  color: var(--MenuDropdownItemIcon_a) !important;
}
.mpd-dropdown .mpd-dropdown-item.active:hover {
  background: var(--MenuDropdownItemBG_a_h) !important;
  color: var(--MenuDropdownItemText_a_h) !important;
}
.mpd-dropdown .mpd-dropdown-item.active:hover i {
  color: var(--MenuDropdownItemIcon_a_h) !important;
}
.mpd-dropdown .mpd-dropdown-item.active:hover:active {
  background: var(--MenuDropdownItemBG_a_h_a) !important;
  color: var(--MenuDropdownItemText_a_h_a) !important;
}
.mpd-dropdown .mpd-dropdown-item.active:hover:active i {
  color: var(--MenuDropdownItemIcon_a_h_a) !important;
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.p-menu {
  border-radius: 0.25rem;
  overflow: hidden;
}
.p-menu .p-menu-list {
  padding: calc(var(--lh) * 0.25rem) 0;
  margin: 0;
  background: var(--MenuListBG);
  outline: 0;
}
.p-menu .p-menu-list .p-menuitem {
  cursor: pointer !important;
}
.p-menu .p-menu-list .p-menuitem .p-menuitem-content {
  display: flex;
  padding: calc(var(--lh) * 0.2rem) 0;
  background: var(--MenuDropdownItemBG);
}
.p-menu .p-menu-list .p-menuitem .p-menuitem-content > .p-menuitem-link {
  background: var(--MenuDropdownItemBG);
  padding: 0;
  width: 100%;
  text-decoration: none;
  padding: calc(var(--lh) * 0.25rem) calc(var(--lh) * 1rem);
  font-size: var(--fs-0);
  cursor: pointer;
}
.p-menu .p-menu-list .p-menuitem .p-menuitem-content > .p-menuitem-link span {
  font-size: var(--fs--1);
}
.p-menu .p-menu-list .p-menuitem .p-menuitem-content > .p-menuitem-link .p-menuitem-icon {
  color: var(--MenuDropdownItemIcon);
}
.p-menu .p-menu-list .p-menuitem .p-menuitem-content > .p-menuitem-link .p-menuitem-text {
  color: var(--MenuDropdownItemText);
}
.p-menu .p-menu-list .p-menuitem .p-menuitem-content > .p-menuitem-link > span {
  color: var(--MenuDropdownItemText);
}
.p-menu .p-menu-list .p-menuitem .p-menuitem-content > .p-menuitem-link {
  cursor: pointer;
}
.p-menu .p-menu-list .p-menuitem:hover .p-menuitem-content > .p-menuitem-link {
  background: var(--MenuDropdownItemBG_h);
}
.p-menu .p-menu-list .p-menuitem:hover .p-menuitem-content > .p-menuitem-link .p-menuitem-icon {
  color: var(--MenuDropdownItemIcon_h);
}
.p-menu .p-menu-list .p-menuitem:hover .p-menuitem-content > .p-menuitem-link .p-menuitem-text {
  color: var(--MenuDropdownItemText_h);
}
.p-menu .p-menu-list .p-menuitem:hover .p-menuitem-content > .p-menuitem-link > span {
  color: var(--MenuDropdownItemText_h);
}
.p-menu {
  /* 	&:hover {}




    &.dashboard {

    } */
}

.p-menu.public .p-menu-list {
  padding: calc(var(--lh) * 0.1125rem) 0;
}

.p-menu.public .p-menu-list .p-menuitem .p-menuitem-content {
  padding: 0;
  background: white;
}
.p-menu.public .p-menu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
  padding: calc(var(--lh) * 0.33rem) calc(var(--lh) * 0.66rem);
}

.p-menu.dashboard .p-menu-list .p-menuitem .p-menuitem-content {
  padding: 0;
  background: white;
}
.p-menu.dashboard .p-menu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
  padding: calc(var(--lh) * 0.45rem) calc(var(--lh) * 1rem);
}

.mpd-menu {
  /* 	>ul[data-pc-section="list"] {

  		>li[data-pc-section="item"] {

  			> div[data-pc-section="itemcontent"]{

  			}
  		}
  	} */
}
.mpd-menu.flyout-menu > ul[data-pc-section=list] > li[data-pc-section=item] > div[data-pc-section=itemcontent] {
  width: 100%;
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.mpd-card {
  width: 100%;
  background: var(--cardBG) !important;
  box-shadow: none !important;
  border-radius: 30px !important;
}
.mpd-card div[data-pc-section=caption] {
  display: grid;
  gap: calc(var(--lh) * 0.25rem);
  margin-bottom: calc(var(--lh) * 1rem);
}
.mpd-card div[data-pc-section=caption] div[data-pc-section=title] {
  font-size: var(--fs-1);
  color: var(--CardHeaderTitle);
  font-weight: 500;
}
.mpd-card div[data-pc-section=caption] div[data-pc-section=subtitle] {
  font-size: var(--fs--05);
  color: var(--CardHeaderSubtitle);
  font-weight: 400;
}
.mpd-card {
  /*     .p-card-content {

      } */
}
.mpd-card .sec-card-header {
  padding: calc(var(--lh) * 1rem);
  display: flex;
  justify-content: space-between;
}
.mpd-card .sec-card-header .sec-title {
  display: flex;
  flex-direction: column;
}
.mpd-card .sec-card-header .sec-title * {
  color: var(--CardHeaderText);
  line-height: calc(var(--lh) * 1rem);
}
.mpd-card .sec-card-header .sec-title .title {
  font-size: 17px;
  color: var(--CardHeaderTitle);
  font-weight: 600;
}
.mpd-card .sec-card-header .sec-title .subtitle {
  font-size: var(--fs--05);
  font-weight: 400;
  color: var(--CardHeaderSubtitle);
}
.mpd-card .sec-card-header .sec-actions {
  display: flex;
  gap: calc(var(--lh) * 1rem);
}
.mpd-card .sec-card-header .sec-actions .action .btn-meta {
  background: var(--CardMetaBtnBg);
  color: var(--CardMetaBtnText);
  border: 1px solid var(--CardMetaBtnBorder);
  box-shadow: none;
  padding: 0 calc(var(--lh) * 0.33rem);
  min-height: calc(var(--lh) * 1.5rem);
}
.mpd-card .sec-card-header .sec-actions .action .btn-meta i {
  color: var(--CardMetaBtnIcon);
}
.mpd-card .sec-card-header .sec-actions .action .btn-meta {
  position: relative;
}
.mpd-card .sec-card-header .sec-actions .action .btn-meta:hover {
  background: var(--CardMetaBtnBg_h);
  border-color: var(--CardMetaBtnBorder_h);
  color: var(--CardMetaBtnText_h);
}
.mpd-card .sec-card-header .sec-actions .action .btn-meta:hover i {
  color: var(--CardMetaBtnIcon_h);
}
.mpd-card .sec-card-header .sec-actions .action .btn-meta:hover {
  transform: translateY(-1px);
}
.mpd-card .sec-card-header .sec-actions .action .btn-meta:hover:active {
  transform: translateY(0);
}

.sec-page-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background: var(--primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.p-paginator-bottom .p-paginator {
  font-size: var(--fs-0);
  background: var(--DataTableFooterPaginationBG);
}
.p-paginator-bottom .p-paginator button.p-paginator-element {
  font-size: var(--fs--05);
  width: gr(1.5);
  height: gr(1.5);
  min-height: gr(1.5);
  min-width: gr(1.5);
  color: var(--DataTableFooterPaginationText);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.p-paginator-bottom .p-paginator button.p-paginator-element .p-paginator-icon * {
  fill: var(--DataTableFooterPaginationIconColor) !important;
}
.p-paginator-bottom .p-paginator button.p-paginator-element.p-highlight {
  background: var(--DataTableFooterPaginationHighlightBG);
  color: var(--DataTableFooterPaginationHighlightText);
}
.p-paginator-bottom .p-paginator button.p-paginator-element.p-link svg * {
  fill: var(--DataTableFooterPaginationArrowColor);
}
.p-paginator-bottom .p-paginator button.p-paginator-element.p-link {
  /*  &.p-disabled {

   } */
}
.p-paginator-bottom .p-paginator button.p-paginator-element:not(.p-highlight):hover {
  background: var(--DataTableFooterPaginationHighlightBG);
  color: var(--DataTableFooterPaginationHighlightText);
}
.p-paginator-bottom .p-paginator button.p-paginator-element:hover {
  transform: translateY(-1px);
}
.p-paginator-bottom .p-paginator button.p-paginator-element:hover:active {
  transform: translateY(0);
}
.p-paginator-bottom .p-paginator .p-paginator-first, .p-paginator-bottom .p-paginator .p-paginator-prev, .p-paginator-bottom .p-paginator .p-paginator-next, .p-paginator-bottom .p-paginator .p-paginator-last {
  color: var(--DataTableFooterPaginationArrowColor);
}
.p-paginator-bottom .p-paginator .p-paginator-first:not(.p-disabled), .p-paginator-bottom .p-paginator .p-paginator-prev:not(.p-disabled), .p-paginator-bottom .p-paginator .p-paginator-next:not(.p-disabled), .p-paginator-bottom .p-paginator .p-paginator-last:not(.p-disabled) {
  cursor: pointer;
}
.p-paginator-bottom .p-dropdown {
  cursor: pointer;
}
.p-paginator-bottom .p-dropdown .p-dropdown-label {
  color: var(--DataTableFooterPaginationDropdownSelectionText);
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
*::-webkit-scrollbar {
  width: var(--ScrollbarWidth);
  height: var(--ScrollbarWidth);
}
*::-webkit-scrollbar-track {
  background: var(--ScrollbarTrackBG);
  border-radius: var(--ScrollbarBorderRadius);
}
*::-webkit-scrollbar-thumb {
  background: var(--ScrollbarThumbBG);
  border-radius: var(--ScrollbarBorderRadius);
  transition: background-color 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--ScrollbarThumbBGHover);
}
*::-webkit-scrollbar-thumb:active {
  background: var(--ScrollbarThumbBGActive);
}
*::-webkit-scrollbar-corner {
  background: var(--ScrollbarTrackBG);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--ScrollbarThumbBG) var(--ScrollbarTrackBG);
}

.mpd-scroll-panel::-webkit-scrollbar,
.scroll-container::-webkit-scrollbar,
.scroll-inner::-webkit-scrollbar {
  width: var(--ScrollbarWidth);
  height: var(--ScrollbarWidth);
}
.mpd-scroll-panel::-webkit-scrollbar-track,
.scroll-container::-webkit-scrollbar-track,
.scroll-inner::-webkit-scrollbar-track {
  background: var(--ScrollbarTrackBG);
  border-radius: var(--ScrollbarBorderRadius);
}
.mpd-scroll-panel::-webkit-scrollbar-thumb,
.scroll-container::-webkit-scrollbar-thumb,
.scroll-inner::-webkit-scrollbar-thumb {
  background: var(--ScrollbarThumbBG);
  border-radius: var(--ScrollbarBorderRadius);
  transition: background-color 0.2s ease;
}
.mpd-scroll-panel::-webkit-scrollbar-thumb:hover,
.scroll-container::-webkit-scrollbar-thumb:hover,
.scroll-inner::-webkit-scrollbar-thumb:hover {
  background: var(--ScrollbarThumbBGHover);
}
.mpd-scroll-panel::-webkit-scrollbar-thumb:active,
.scroll-container::-webkit-scrollbar-thumb:active,
.scroll-inner::-webkit-scrollbar-thumb:active {
  background: var(--ScrollbarThumbBGActive);
}

body {
  overflow-y: auto;
}

@media (max-width: 47.9275em) {
  *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  *::-webkit-scrollbar-thumb {
    border-radius: 2px;
  }
}
.p-skeleton {
  background: var(--SkeletonBG);
  border-radius: 6px;
  overflow: hidden;
}
.p-skeleton.p-skeleton-circle {
  border-radius: 50%;
}
.p-skeleton:after {
  background: var(--SkeletonAfterBG);
  content: "";
  animation: p-skeleton-animation 1.2s infinite;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(-100%);
  z-index: 1;
}

@keyframes p-skeleton-animation {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
.p-slider {
  background: #e2e8f0;
  border: 0 none;
  border-radius: 6px;
  position: relative;
  box-sizing: border-box;
}
.p-slider.p-slider-horizontal {
  height: 3px;
}
.p-slider .p-slider-range {
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  background: #10b981;
  border-radius: 6px;
}
.p-slider .p-slider-handle {
  cursor: grab;
  touch-action: none;
  display: block;
  top: 50%;
  height: 20px;
  width: 20px;
  background: #e2e8f0;
  border: 0 none;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
  outline-color: transparent;
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin-top: -10px;
  margin-left: -10px;
}
.p-slider .p-slider-handle:before {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14);
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
/* ============================================================================
   TAG COMPONENT STYLES - PrimeVue Tag & Custom MPD Tag
   ============================================================================ */
/* Base tag styling for consistent appearance across dashboard */
.p-tag, .mpd-tag {
  /* Display and layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Typography - matches the green Learn tag style from image */
  font-size: var(--fs--2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  /* Spacing */
  padding: calc(var(--lh) * 0.25rem) calc(var(--lh) * 0.5rem);
  margin: 0;
  /* Visual - rounded corners like in the image */
  border-radius: 4px;
  border: none;
  background: var(--TagPrimaryBG, var(--pm-sky-blue));
  color: var(--TagPrimaryText, white);
  /* Smooth transitions for color changes */
  transition: all 0.2s ease;
  /* Ensure text is readable and inherits properly */
}
.p-tag span, .p-tag .p-tag-value, .mpd-tag span, .mpd-tag .p-tag-value {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.p-tag, .mpd-tag {
  /* Size variants */
}
.p-tag.sm, .p-tag.p-tag-sm, .mpd-tag.sm, .mpd-tag.p-tag-sm {
  font-size: var(--fs--25);
  padding: calc(var(--lh) * 0.15rem) calc(var(--lh) * 0.4rem);
}
.p-tag.lg, .p-tag.p-tag-lg, .mpd-tag.lg, .mpd-tag.p-tag-lg {
  font-size: var(--fs--1);
  padding: calc(var(--lh) * 0.35rem) calc(var(--lh) * 0.75rem);
}
.p-tag, .mpd-tag {
  /* Color variants with CSS variables */
}
.p-tag.p-tag-danger, .mpd-tag.p-tag-danger {
  background: var(--TagDangerBG);
  color: var(--TagDangerText, white);
}
.p-tag.p-tag-danger .p-tag-value, .p-tag.p-tag-danger span, .mpd-tag.p-tag-danger .p-tag-value, .mpd-tag.p-tag-danger span {
  color: var(--TagDangerText, white);
}
.p-tag.p-tag-warning, .mpd-tag.p-tag-warning {
  background: var(--TagWarningBG);
  color: var(--TagWarningText, white);
}
.p-tag.p-tag-warning .p-tag-value, .p-tag.p-tag-warning span, .mpd-tag.p-tag-warning .p-tag-value, .mpd-tag.p-tag-warning span {
  color: var(--TagWarningText, white);
}
.p-tag.p-tag-info, .mpd-tag.p-tag-info {
  background: var(--TagInfoBG);
  color: var(--TagInfoText, white);
}
.p-tag.p-tag-info .p-tag-value, .p-tag.p-tag-info span, .mpd-tag.p-tag-info .p-tag-value, .mpd-tag.p-tag-info span {
  color: var(--TagInfoText, white);
}
.p-tag.p-tag-success, .mpd-tag.p-tag-success {
  background: var(--TagSuccessBG);
  color: var(--TagSuccessText, white);
}
.p-tag.p-tag-success .p-tag-value, .p-tag.p-tag-success span, .mpd-tag.p-tag-success .p-tag-value, .mpd-tag.p-tag-success span {
  color: var(--TagSuccessText, white);
}
.p-tag.p-tag-primary, .mpd-tag.p-tag-primary {
  background: var(--TagPrimaryBG);
  color: var(--TagPrimaryText, white);
}
.p-tag.p-tag-primary .p-tag-value, .p-tag.p-tag-primary span, .mpd-tag.p-tag-primary .p-tag-value, .mpd-tag.p-tag-primary span {
  color: var(--TagPrimaryText, white);
}
.p-tag, .mpd-tag {
  /* Session mode-specific styling */
}
.p-tag.learn, .mpd-tag.learn {
  background: var(--pm-sky-blue);
  color: white;
}
.p-tag.exam, .mpd-tag.exam {
  background: var(--blue-600);
  color: white;
}
.p-tag, .mpd-tag {
  /* Session status-specific styling */
}
.p-tag.complete, .mpd-tag.complete {
  background: var(--emerald-500);
  color: white;
}
.p-tag.warning, .mpd-tag.warning {
  background: var(--amber-500);
  color: white;
}
.p-tag.info, .mpd-tag.info {
  background: var(--blue-500);
  color: white;
}
.p-tag.untouched, .p-tag.pending, .mpd-tag.untouched, .mpd-tag.pending {
  background: var(--base-400);
  color: white;
}
.p-tag, .mpd-tag {
  /* Custom MPD tag variants */
}
.p-tag.trial-tag, .mpd-tag.trial-tag {
  background: var(--amber-500);
  color: white;
}

/* Remove any default PrimeVue styling conflicts */
.p-tag {
  min-width: auto;
  white-space: nowrap;
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.sidebar-slide-enter-active,
.sidebar-slide-leave-active {
  transition: transform 0.3s ease-in-out;
}

.sidebar-slide-enter-from,
.sidebar-slide-leave-to {
  transform: translateX(-100%);
}

.sidebar-slide-leave-from {
  transform: translateX(100%);
}

.sec-checkout-modal {
  @apply w-full transform overflow-hidden bg-[var(--modal-bg)] text-left align-middle shadow-xl transition-all max-w-100% t:max-w-800px ds:max-w-92% ds:max-h-[96vh] d:max-w-1100px t:my-8 ds:rounded-lg h-screen ds:h-auto flex flex-col;
  transition: all 0.2s ease-in-out !important;
}
.sec-checkout-modal > .modal-wrapper {
  @apply flex flex-grow overflow-hidden;
}
.sec-checkout-modal > .modal-wrapper > .sec-sidebar {
  transition: all 0.2s ease-in-out !important;
  @apply hidden ds:flex ds:w-1/3 bg-[var(--modal-sidebar-bg)] flex-col border-r border-[var(--modal-sidebar-border)] ds:rounded-l-lg ds:gp-1.5 grid g-0.25;
  width: 0px !important;
  transition: all 0.2s ease-in-out !important;
  padding: 0 !important;
  background-color: var(--chkSideBarBG);
  color: var(--chkSideBarText);
  border: 1px solid var(--chkSideBarBorder);
}
.sec-checkout-modal > .modal-wrapper > .sec-sidebar .chk-sidebar-list-item {
  color: var(--chkSideBarListText);
}
.sec-checkout-modal > .modal-wrapper > .sec-sidebar .chk-sidebar-list-item svg {
  color: var(--chkSideBarListIcon);
}
.sec-checkout-modal > .modal-wrapper > .sec-sidebar.active {
  width: 400px !important;
}
.sec-checkout-modal > .modal-wrapper > .sec-panel-container {
  @apply w-full ds:w-2/3 flex flex-col gpy-1.5 relative lt-ds:h-full;
  transition: all 0.2s ease-in-out !important;
  background: var(--chkPrimaryPanelBG) !important;
}
.sec-checkout-modal > .modal-wrapper > .sec-panel-container .sec-panel-content {
  @apply flex-grow overflow-y-auto p-4 sm:p-6 space-y-6 h-full;
}
.sec-checkout-modal > .modal-wrapper > .sec-panel-container .sec-panel-content :deep(.sec-account-links) {
  text-align: left;
}
.sec-checkout-modal > .modal-wrapper > .sec-panel-container .sec-panel-content :deep(.field-label) {
  @apply flex flex-col;
}
.sec-checkout-modal > .modal-wrapper > .sec-panel-container .sec-panel-content :deep(.field-label) span {
  font-size: var(--fs--05) !important;
  font-weight: 500 !important;
}
.sec-checkout-modal > .modal-wrapper > .sec-panel-container .sec-panel-content :deep(.btn-action) {
  max-width: 250px !important;
  padding: calc(var(--lh) * 0.5rem) calc(var(--lh) * 1.25rem) !important;
  font-size: var(--fs--05) !important;
  font-weight: 500 !important;
  min-height: 60px !important;
}
.sec-checkout-modal > .modal-wrapper > .sec-panel-container .sec-panel-content :deep(.btn-action).btn-icon {
  display: grid;
  gap: calc(var(--lh) * 0.25rem);
}
@media (min-width: 47.9375em) {
  .sec-checkout-modal > .modal-wrapper > .sec-panel-container .sec-panel-content :deep(.btn-action) {
    min-height: 60px !important;
  }
}
@media (min-width: 64em) {
  .sec-checkout-modal.sidebar-closed {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }
}
@media (min-width: 64em) and (min-width: 64em) {
  .sec-checkout-modal.sidebar-closed > .sec-panel-container {
    width: 100% !important;
  }
}
@media (min-width: 64em) {
  .sec-checkout-modal.sidebar-closed > .modal-wrapper > .sec-panel-container {
    width: 100% !important;
  }
}

/* CSS variables defined in public light/dark scss files */
/* ============================================================================
   8. MODAL & DIALOG COMPONENTS
   ============================================================================ */
/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.sec-primary-dialog {
  background: var(--ModalBg) !important;
  border-radius: 12px;
  border: 1px solid var(--PasswordModalBorder);
}

.sec-modal-title .modal-title {
  color: var(--ModalTitleColor);
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: calc(var(--lh) * 1.4rem);
}
.sec-modal-title .modal-subtitle {
  color: var(--ModalSubtitleColor);
  font-size: var(--fs-0);
  font-weight: 400;
  line-height: calc(var(--lh) * 1.4rem);
}

.sec-modal-content {
  color: var(--ModalTextColor);
  display: grid;
  gap: calc(var(--lh) * 1rem);
}
.sec-modal-content p {
  color: var(--ModalTextColor);
}

.password-requirements .requirements-list .requirement {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--PasswordModalRequirementText);
  font-size: var(--fs--2);
}
.password-requirements .requirements-list .requirement i {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.password-requirements .requirements-list .requirement:not(.met) i {
  color: var(--red-500);
}
.password-requirements .requirements-list .requirement.met {
  color: var(--PasswordModalRequirementMetColor);
}
.password-requirements .requirements-list .requirement.met i {
  color: var(--PasswordModalRequirementMetColor);
}

.sec-primary-dialog .field label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sec-primary-dialog .field label span {
  font-size: var(--fs--05);
  color: var(--PasswordModalTextColor);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.sec-primary-dialog .field label .error {
  color: var(--red-500);
  font-size: 11px;
  margin-top: 4px;
}
.sec-primary-dialog .field label input.error {
  border-color: var(--red-500);
}
.sec-primary-dialog .mpd-input {
  background: var(--PasswordModalInputBG);
  border: 1px solid var(--PasswordModalInputBorder);
  color: var(--PasswordModalInputText);
}
.sec-primary-dialog .mpd-input:focus {
  border-color: var(--PasswordModalInputFocusBorder);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 198, 254, 0.1);
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.p-overlaypanel {
  background: var(--modalDialogBG);
  color: var(--modalDialogText);
  border: 0;
  @apply rounded-md shadow-lg ring-black/5 focus:outline-none;
  border: 1px solid var(--modalDialogBorder);
}
.p-overlaypanel .p-overlaypanel-content {
  border-radius: 0.25rem;
  background: var(--modalDialogBG);
  border: 0;
  color: var(--modalDialogText);
}
.p-overlaypanel .p-overlaypanel-content .btn-dialog.btn-dialog-search {
  background: var(--modalDialogSearchBtnBG);
  border: 1px solid var(--modalDialogSearchBtnBorder);
  color: var(--modalDialogSearchBtnText);
  padding: calc(var(--lh) * 0.2rem) calc(var(--lh) * 0.7rem);
  font-size: var(--fs--05);
  height: calc(var(--lh) * 1.5rem);
}
.p-overlaypanel .p-overlaypanel-content .btn-dialog.btn-dialog-search:hover {
  background: var(--modalDialogSearchBtnBG_h);
  border: 1px solid var(--modalDialogSearchBtnBorder_h);
  color: var(--modalDialogSearchBtnText_h);
}
.p-overlaypanel .p-overlaypanel-content .btn-dialog.btn-dialog-search:hover:active {
  background: var(--modalDialogSearchBtnBG_a);
  border: 1px solid var(--modalDialogSearchBtnBorder_a);
  color: var(--modalDialogSearchBtnText_a);
}

/**
 * Optimized Dashboard SCSS - Eliminates compilation timeouts
 * 
 * Import Order:
 * 1. Helpers (variables, mixins, functions) - no CSS output
 * 2. Base/Foundation styles
 * 3. Theme variables (light before dark for proper override)
 * 4. Layout styles
 * 5. Component styles (organized by type)
 */
/* ============================================================================
   1. HELPERS - Variables, mixins, functions (no CSS output)
   ============================================================================ */
.sec-goto-dialog {
  display: flex;
  flex-direction: column;
  gap: calc(var(--lh) * 0.25rem) 0;
}
.sec-goto-dialog > .sec-field {
  display: flex;
}
.sec-goto-dialog > .sec-field > .field input {
  padding: 0 calc(var(--lh) * 0.5rem);
  min-height: 40px;
  max-width: calc(var(--lh) * 7rem);
}
.sec-goto-dialog > .sec-field > .field input::placeholder {
  color: #dbe4f0;
}
.sec-goto-dialog > .sec-field > .sec-action button {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 2px;
  height: 40px;
  width: 40px;
  border: 0;
}

/* ============================================================================
   9. CHECKOUT STYLES
   ============================================================================ */
html.light {
  --checkout-gray200: hsla(0, 0%, 10%, 0.3);
  --checkout-gray300: hsla(0, 0%, 10%, 0.4);
  --checkout-gray400: hsla(0, 0%, 10%, 0.5);
  --checkout-gray500: hsla(0, 0%, 10%, 0.6);
  --checkout-gray600: hsla(0, 0%, 10%, 0.7);
  --checkout-gray700: hsla(0, 0%, 10%, 0.8);
  --checkout-gray800: hsla(0, 0%, 10%, 0.9);
  --chkModalBG: var(--base-50);
  --chkModalText: var(--base-600);
  --chkModalBorder: var(--base-100);
  --chkModalShadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  --chkModalCloseButton: var(--base-600);
  --chkModalCloseButtonHover: var(--base-700);
  --chkModalCloseButtonIcon: var(--base-600);
  --chkModalCloseButtonIconHover: var(--base-700);
  --chkSideBarBG: var(--base-50);
  --chkSideBarText: var(--base-600);
  --chkSideBarBorder: var(--base-100);
  --chkSideBarShadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  --chkSideBarListText: var(--base-600);
  --chkSideBarListIcon: var(--base-600);
  --chkSideBarCloseButton: var(--base-600);
  --chkSideBarCloseButtonHover: var(--base-700);
  --chkSideBarCloseButtonIcon: var(--base-600);
  --chkSideBarCloseButtonIconHover: var(--base-700);
  --chkPrimaryPanelBG: var(--base-50);
  /* General */
  --chkLink: var(--pm-primary-bright);
  --chkDescriptionColor: var(--base-600);
  /* Account panel */
  /* Summary panel */
  /* Coupon panel */
  --chkCouponBG: var(--base-50);
  --chkCouponBorder: var(--base-100);
  --chkCouponText: var(--base-600);
  --chkCouponIcon: var(--base-600);
  --couponNotificationBG: var(--base-50);
  --couponNotificationBorder: var(--base-100);
  --couponNotificationText: var(--base-600);
  --couponNotificationIcon: var(--base-600);
  --couponNotificationErrorBG: var(--red-300);
  --couponNotificationErrorBorder: var(--red-100);
  --couponNotificationErrorText: var(--red-600);
  --couponNotificationErrorIcon: var(--red-600);
  --couponNotificationSuccessBG: var(--green-100);
  --couponNotificationSuccessBorder: var(--green-200);
  --couponNotificationSuccessText: var(--green-600);
  --couponNotificationSuccessIcon: var(--green-600);
  --ChkListText: var(--base-650);
  --ChkModalContentText: var(--base-600);
  --ChkModalTitle: var(--pm-primary);
  --ChkModalSubtitle: var(--base-500);
  --ChkListIcon: var(--base-500);
  --ChkModalLink: var(--pm-primary-brighter);
  --ChkModalLink_h: var(--pm-primary-bright);
  --ChkModalContentText: var(--base-650);
  --ChkModalDivider: var(--base-200);
  --ChkModalAccordionBorder: var(--base-200);
  --ChkModalAccordionHeaderColor: var(--base-600);
  --ChkModalAccordionHeaderColor_h: var(--pm-primary);
  --ChkModalAccordionHeaderColor_a: var(--pm-primary);
  --ChkModalAccordionContentColor: var(--base-650);
  --ChkModalBtnBg: var(--pm-primary-brighter);
  --ChkModalBtnText: var(--base-50);
  --ChkModalBtnIcon: var(--base-50);
  --ChkModalBtnBorder: var(--pm-primary);
  --ChkModalBtnBg_h: var(--pm-brand-blue);
  --ChkModalBtnBorder_h: var(--pm-brand-blue);
  --ChkModalBtnText_h: var(--base-50);
  --ChkModalBtnIcon_h: var(--base-50);
  --ChkModalBtnBg_h_a: var(--pm-primary-bright);
  --ChkModalBtnBorder_h_a: var(--pm-primary-bright);
  --ChkModalBtnText_h_a: var(--base-50);
  --ChkModalBtnIcon_h_a: var(--base-50);
  --CheckConfirmedSmallText: var(--base-500);
  --CheckConfirmedText: var(--pm-primary);
  --CheckFormLabel: var(--base-600);
  --CheckModalOverviewBG: var(--base-100);
  --CheckModalOverviewIconBG: var(--base-50);
  --CheckModalOverviewIconColor: var(--pm-primary);
  --CheckModalOverviewSummaryTitle: var(--base-400);
  --CheckModalOverviewTitle: var(--base-900);
  --CheckModalOverviewContent: var(--base-650);
  --CheckModalOverviewDescription: var(--base-500);
  --CheckModalErrorColour: var(--red-500);
  --CheckModalSuccessColour: var(--green-500);
  --CheckoutSummaryItemsBG: var(--base-100);
  --CheckoutSummaryItemsBorder: var(--base-200);
  --CheckoutSummaryItemTitle: var(--base-900);
  --CheckoutSummaryItemContent: var(--base-600);
  --CheckoutSummaryItemPrice: var(--base-900);
  --CheckoutSummaryItemPriceLabel: var(--base-500);
  --CheckoutSummaryItemPriceDiscount: var(--emerald-500);
  --CheckoutSummaryNotificationSuccessBG: var(--emerald-50);
  --CheckoutSummaryNotificationSuccessIcon: var(--emerald-500);
  --CheckoutSummaryNotificationSuccessText: var(--emerald-800);
  --CheckoutSummaryNotificationErrorBG: var(--red-50);
  --CheckoutSummaryNotificationErrorIcon: var(--red-700);
  --CheckoutSummaryNotificationErrorText: var(--red-700);
  --CheckoutPaymentPanelSummaryBG: var(--base-100);
  --CheckoutPaymentPanelSummaryTitle: var(--base-900);
  --CheckoutPaymentPanelSummaryText: var(--base-900);
  --CheckoutPaymentPanelSummaryDiscountedText: var(--base-500);
  --CheckoutPaymentPanelSummaryValue: var(--base-900);
  --CheckoutPaymentPanelSummaryDiscountedValue: var(--base-600);
  --PaymentFormModalConfirmationTitle: var(--base-900);
  --PaymentFormModalConfirmationHairline: var(--base-500);
  --PaymentFormModalConfirmationContent: var(--base-600);
  --CheckoutPaymentSummaryBG: var(--base-100);
  --CheckoutPaymentSummaryTitle: var(--base-900);
  --CheckoutPaymentSummaryText: var(--base-900);
  --CheckoutPaymentSummaryDiscountedText: var(--base-500);
  --CheckoutPaymentSummaryValue: var(--base-900);
  --CheckoutPaymentSummaryDiscountedValue: var(--base-600);
  --CheckoutPaymentFormConnectingText: var(--base-600);
  --modal-sidebar-bg: linear-gradient(135deg, var(--pm-primary) 0%, var(--pm-primary-bright) 100%);
  --modal-sidebar-title: #ffffff;
  --modal-sidebar-text: rgba(255, 255, 255, 0.9);
  --modal-sidebar-checkmark-color: rgba(255, 255, 255, 0.8);
  --modal-sidebar-border: var(--base-200);
}

/* ============================================================================
   10. DASHBOARD-SPECIFIC OVERRIDES & CUSTOMIZATIONS
   ============================================================================ */
/* Base box-sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* PrimeVue card component customizations */
.p-card .p-card-content {
  padding: 1.25rem 0;
}

.p-card .p-card-body {
  padding: 1.25rem;
}

/* Dashboard mobile menu drawer */
.mpd-drawer-mobile-menu {
  background: var(--mobile-flyout-menu-bg);
  border: 1px solid transparent;
  border-right: 1px solid var(--mobile-flyout-border);
}
.mpd-drawer-mobile-menu div[data-pc-section=header] {
  /* Header styles */
}
.mpd-drawer-mobile-menu div[data-pc-section=content] {
  height: 100%;
}
.mpd-drawer-mobile-menu div[data-pc-section=footer] {
  padding-bottom: calc(var(--lh) * 1.5rem);
}

/* To be placed later */
.mpd-tag {
  display: inline-block;
  background: var(--pm-sky-blue);
  color: White;
  font-size: var(--fs--25);
  padding: 0 calc(var(--lh) * 0.5rem);
  border-radius: calc(var(--lh) * 0.5rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: white;
  background: var(--pm-sky-blue);
  line-height: calc(var(--lh) * 0.9rem);
}
.mpd-tag.trial-tag {
  background: var(--amber-500) !important;
}
.mpd-tag.success {
  background: var(--emerald-400) !important;
}
.mpd-tag.warning {
  background: var(--amber-500) !important;
}
.mpd-tag.sm {
  font-size: var(--fs--2);
}

.mpd-avatar {
  width: 38px;
  height: 38px;
  background: var(--MenuBtnAvatarBG);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs--05);
  font-weight: 500;
  color: var(--MenuBtnText);
}
.mpd-avatar * {
  color: var(--MenuBtnText);
}
.mpd-avatar:hover {
  background: var(--MenuBtnAvatarBG_h);
}
.mpd-avatar:hover * {
  color: var(--MenuBtnText_h);
}
.mpd-avatar:hover:active {
  background: var(--MenuBtnAvatarBG_h_a);
}
.mpd-avatar:hover:active * {
  color: var(--MenuBtnText_h_a);
}

.btn-modal-close {
  background: var(--ModalCloseBtnBG);
}
.btn-modal-close i {
  color: var(--ModalCloseBtnIcon);
}
.btn-modal-close:hover i {
  color: var(--ModalCloseBtnIcon_h);
}

.mpd-overlaypanel {
  background: var(--modalDialogBG);
  @apply shadow-md;
  border-radius: calc(var(--lh) * 0.25rem);
  color: var(--modalDialogText);
  border: 1px solid var(--modalDialogBorder);
}