/* UX4G 3.0.18 — the shipped stylesheet, flattened from cdn.ux4g.gov.in/UX4G@3.0.18/index.css (154 imported files → one), rules unchanged, cascade layers preserved, asset references absolute to the CDN. Served from this origin so a phone on a slow link loads one stylesheet instead of a 154-deep import chain (Lighthouse mobile, 4 Sep 2026). */
/* Declare CSS Cascade Layer order for non-destructive framework interoperability */
@layer ux4g-tokens, ux4g-reset, ux4g-foundations, ux4g-layout, ux4g-components, ux4g-patterns, ux4g-utilities;

/* 1. Primitive Tokens */
@layer ux4g-tokens {
:root {
  /* ==========================================================================
     PRIMARY PALETTE
     The core brand colors for UX4G.
     ========================================================================== */
  --ux4g-color-primary-50: #f2efff;
  --ux4g-color-primary-100: #dcd4ff;
  --ux4g-color-primary-200: #c0b3ff;
  --ux4g-color-primary-300: #a391ff;
  --ux4g-color-primary-400: #8670ff;
  --ux4g-color-primary-500: #6a4eff;
  --ux4g-color-primary-600: #4a2bc2;
  --ux4g-color-primary-700: #3d239f;
  --ux4g-color-primary-800: #301c7d;
  --ux4g-color-primary-900: #24145c;
  --ux4g-color-primary-950: #1a0e3d;

  /* ==========================================================================
     SECONDARY PALETTE
     Supporting colors for accents and secondary actions.
     ========================================================================== */
  --ux4g-color-secondary-50: #fff5ea;
  --ux4g-color-secondary-100: #ffebd6;
  --ux4g-color-secondary-200: #ffd9af;
  --ux4g-color-secondary-300: #ffbe6f;
  --ux4g-color-secondary-400: #e89c30;
  --ux4g-color-secondary-500: #c47d00;
  --ux4g-color-secondary-600: #a46800;
  --ux4g-color-secondary-700: #764a00;
  --ux4g-color-secondary-800: #4b2d00;
  --ux4g-color-secondary-900: #281600;
  --ux4g-color-secondary-950: #110700;

  /* ==========================================================================
     TERTIARY PALETTE
     Supplementary colors for varied visual expressions.
     ========================================================================== */
  --ux4g-color-tertiary-50: #f6effb;
  --ux4g-color-tertiary-100: #e9daf3;
  --ux4g-color-tertiary-200: #d9bfea;
  --ux4g-color-tertiary-300: #c8a3e0;
  --ux4g-color-tertiary-400: #b686d6;
  --ux4g-color-tertiary-500: #a66acc;
  --ux4g-color-tertiary-600: #8e55b3;
  --ux4g-color-tertiary-700: #75419a;
  --ux4g-color-tertiary-800: #5d2f80;
  --ux4g-color-tertiary-900: #462166;
  --ux4g-color-tertiary-950: #32174a;

  /* ==========================================================================
     NEUTRAL PALETTE
     Grays used for layouts, spacing, and text hierarchy.
     ========================================================================== */
  --ux4g-color-neutral-0: #ffffff;
  --ux4g-color-neutral-50: #fafafa;
  --ux4g-color-neutral-100: #f5f5f5;
  --ux4g-color-neutral-200: #e5e5e5;
  --ux4g-color-neutral-300: #d9d9d9;
  --ux4g-color-neutral-400: #a1a1a1;
  --ux4g-color-neutral-500: #737373;
  --ux4g-color-neutral-600: #525252;
  --ux4g-color-neutral-700: #404040;
  --ux4g-color-neutral-800: #262626;
  --ux4g-color-neutral-900: #171717;
  --ux4g-color-neutral-950: #0a0a0a;
  --ux4g-color-neutral-1000: #000000;

  /* ==========================================================================
     SEMANTIC & ACCENT COLORS
     Red, Blue, Green, etc.
     ========================================================================== */
  
  /* RED */
  --ux4g-color-red-50: #fff8f8;
  --ux4g-color-red-100: #ffecee;
  --ux4g-color-red-200: #ffdadc;
  --ux4g-color-red-300: #ffb3ae;
  --ux4g-color-red-400: #ff8983;
  --ux4g-color-red-500: #f55e57;
  --ux4g-color-red-600: #db372d;
  --ux4g-color-red-700: #b3251e;
  --ux4g-color-red-800: #8a1a16;
  --ux4g-color-red-900: #60150f;
  --ux4g-color-red-950: #3a0907;

  /* BLUE */
  --ux4g-color-blue-50: #f5faff;
  --ux4g-color-blue-100: #e7f2ff;
  --ux4g-color-blue-200: #d0e4ff;
  --ux4g-color-blue-300: #a1c9ff;
  --ux4g-color-blue-400: #76acff;
  --ux4g-color-blue-500: #4e8ff8;
  --ux4g-color-blue-600: #3271ea;
  --ux4g-color-blue-700: #1157ce;
  --ux4g-color-blue-800: #04409f;
  --ux4g-color-blue-900: #012c6f;
  --ux4g-color-blue-950: #001944;

  /* SKYBLUE */
  --ux4g-color-skyblue-50: #f4faff;
  --ux4g-color-skyblue-100: #e0f4ff;
  --ux4g-color-skyblue-200: #bde9ff;
  --ux4g-color-skyblue-300: #67d4ff;
  --ux4g-color-skyblue-400: #0bbbea;
  --ux4g-color-skyblue-500: #009dc9;
  --ux4g-color-skyblue-600: #0081a8;
  --ux4g-color-skyblue-700: #006788;
  --ux4g-color-skyblue-800: #004d68;
  --ux4g-color-skyblue-900: #003549;
  --ux4g-color-skyblue-950: #001f2d;

  /* CYAN */
  --ux4g-color-cyan-50: #e6fffb;
  --ux4g-color-cyan-100: #c9f7f2;
  --ux4g-color-cyan-200: #adf0e9;
  --ux4g-color-cyan-300: #91e8e0;
  --ux4g-color-cyan-400: #75e0d7;
  --ux4g-color-cyan-500: #59d8ce;
  --ux4g-color-cyan-600: #13c2c2;
  --ux4g-color-cyan-700: #08979c;
  --ux4g-color-cyan-800: #006d75;
  --ux4g-color-cyan-900: #00474f;
  --ux4g-color-cyan-950: #002329;

  /* GREEN */
  --ux4g-color-green-50: #f2fcef;
  --ux4g-color-green-100: #ddf8d8;
  --ux4g-color-green-200: #beefb8;
  --ux4g-color-green-300: #80da88;
  --ux4g-color-green-400: #44c265;
  --ux4g-color-green-500: #1aa64a;
  --ux4g-color-green-600: #128937;
  --ux4g-color-green-700: #006c35;
  --ux4g-color-green-800: #00522c;
  --ux4g-color-green-900: #00381f;
  --ux4g-color-green-950: #002110;

  /* LIME */
  --ux4g-color-lime-50: #fcffe6;
  --ux4g-color-lime-100: #f2ffbf;
  --ux4g-color-lime-200: #e8ff99;
  --ux4g-color-lime-300: #deff73;
  --ux4g-color-lime-400: #d4f24d;
  --ux4g-color-lime-500: #cae827;
  --ux4g-color-lime-600: #a0d911;
  --ux4g-color-lime-700: #7cb305;
  --ux4g-color-lime-800: #5b8c00;
  --ux4g-color-lime-900: #3f6600;
  --ux4g-color-lime-950: #254000;

  /* YELLOW */
  --ux4g-color-yellow-50: #fffee6;
  --ux4g-color-yellow-100: #fffbc2;
  --ux4g-color-yellow-200: #fff29c;
  --ux4g-color-yellow-300: #ffe976;
  --ux4g-color-yellow-400: #ffe050;
  --ux4g-color-yellow-500: #ffd72a;
  --ux4g-color-yellow-600: #fadb14;
  --ux4g-color-yellow-700: #d4b106;
  --ux4g-color-yellow-800: #ad8b00;
  --ux4g-color-yellow-900: #876800;
  --ux4g-color-yellow-950: #614700;

  /* GOLD */
  --ux4g-color-gold-50: #fffbe6;
  --ux4g-color-gold-100: #fff2bf;
  --ux4g-color-gold-200: #ffe799;
  --ux4g-color-gold-300: #ffdb73;
  --ux4g-color-gold-400: #ffcf4d;
  --ux4g-color-gold-500: #ffc327;
  --ux4g-color-gold-600: #f2a90f;
  --ux4g-color-gold-700: #d98a00;
  --ux4g-color-gold-800: #b36b00;
  --ux4g-color-gold-900: #8c4d00;
  --ux4g-color-gold-950: #613400;

  /* ORANGE */
  --ux4g-color-orange-50: #fff7e6;
  --ux4g-color-orange-100: #ffe7bf;
  --ux4g-color-orange-200: #ffd899;
  --ux4g-color-orange-300: #ffc973;
  --ux4g-color-orange-400: #ffba4d;
  --ux4g-color-orange-500: #ffab27;
  --ux4g-color-orange-600: #fa8c16;
  --ux4g-color-orange-700: #d46b08;
  --ux4g-color-orange-800: #ad4e00;
  --ux4g-color-orange-900: #873800;
  --ux4g-color-orange-950: #612500;

  /* PURPLE */
  --ux4g-color-purple-50: #fdf8ff;
  --ux4g-color-purple-100: #f7ecfe;
  --ux4g-color-purple-200: #eedcfe;
  --ux4g-color-purple-300: #d9bafd;
  --ux4g-color-purple-400: #c597ff;
  --ux4g-color-purple-500: #ad72ff;
  --ux4g-color-purple-600: #9254ea;
  --ux4g-color-purple-700: #7438d2;
  --ux4g-color-purple-800: #5629a4;
  --ux4g-color-purple-900: #400b84;
  --ux4g-color-purple-950: #280255;

  /* PINK */
  --ux4g-color-pink-50: #fff7fc;
  --ux4g-color-pink-100: #fecff6;
  --ux4g-color-pink-200: #ffd8ef;
  --ux4g-color-pink-300: #ffafe4;
  --ux4g-color-pink-400: #ff7dd2;
  --ux4g-color-pink-500: #f94aab;
  --ux4g-color-pink-600: #dc258d;
  --ux4g-color-pink-700: #b60d6e;
  --ux4g-color-pink-800: #8d0053;
  --ux4g-color-pink-900: #620438;
  --ux4g-color-pink-950: #3d0023;
}
/* FONT FACE */

:root {
  /* FONT FAMILY */
  --ux4g-font-family-base: "Noto Sans", system-ui, sans-serif;
  --ux4g-font-family-display: "Noto Sans Display", "Noto Sans", sans-serif;

  /* SIZE */
  --ux4g-size-8: 0.5rem;
  --ux4g-size-10: 0.625rem;
  --ux4g-size-11: 0.6875rem;
  --ux4g-size-12: 0.75rem;
  --ux4g-size-14: 0.875rem;
  --ux4g-size-16: 1rem;
  --ux4g-size-18: 1.125rem;
  --ux4g-size-20: 1.25rem;
  --ux4g-size-24: 1.5rem;
  --ux4g-size-28: 1.75rem;
  --ux4g-size-32: 2rem;
  --ux4g-size-36: 2.25rem;
  --ux4g-size-40: 2.5rem;
  --ux4g-size-48: 3rem;
  --ux4g-size-52: 3.25rem;
  --ux4g-size-56: 3.5rem;
  --ux4g-size-60: 3.75rem;
  --ux4g-size-64: 4rem;
  --ux4g-size-80: 5rem;
  --ux4g-size-120: 7.5rem;

  /* LINE HEIGHT */
  --ux4g-line-height-64: 4rem;
  /* 64px */
  /* NEW */
  --ux4g-line-height-56: 3.5rem;
  /* 56px */
  /* NEW */
  --ux4g-line-height-52: 3.25rem;
  /* 52px */
  --ux4g-line-height-48: 3rem;
  /* 48px */
  /* NEW */
  --ux4g-line-height-44: 2.75rem;
  /* 44px */
  --ux4g-line-height-40: 2.5rem;
  /* 40px */
  /* NEW */
  --ux4g-line-height-36: 2.25rem;
  /* 36px */
  --ux4g-line-height-32: 2rem;
  /* 32px */
  --ux4g-line-height-28: 1.75rem;
  /* 28px */
  --ux4g-line-height-26: 1.625rem;
  /* 26px */
  /* NEW */
  --ux4g-line-height-24: 1.5rem;
  /* 24px */
  --ux4g-line-height-22: 1.375rem;
  /* 22px */
  /* NEW */
  --ux4g-line-height-20: 1.25rem;
  /* 20px */
  --ux4g-line-height-18: 1.125rem;
  /* 18px */
  --ux4g-line-height-16: 1rem;
  /* 16px */
  --ux4g-line-height-14: 0.875rem;
  /* 14px */

  /* FONT WEIGHT */
  --ux4g-font-weight-regular: 400;
  --ux4g-font-weight-medium: 500;
  --ux4g-font-weight-semibold: 600;
  --ux4g-font-weight-bold: 700;
  /* Display variants (if using Noto Sans Display) */
  --ux4g-font-weight-display-semibold: 600;
  --ux4g-font-weight-display-bold: 700;

  /* Text Align */
  --ux4g-text-align-start: left;
  --ux4g-text-align-center: center;
  --ux4g-text-align-end: right;

  /* Text Transform */
  --ux4g-text-transform-lowercase: lowercase;
  --ux4g-text-transform-uppercase: uppercase;
  --ux4g-text-transform-capitalize: capitalize;

  /* Text Wrap */
  --ux4g-text-wrap: wrap;
  --ux4g-text-nowrap: nowrap;

  /* Word Break */
  --ux4g-word-break: break-word;

}
:root {
  --ux4g-space-none: 0rem;
  --ux4g-space-1: 0.125rem;   /* 2px */
  --ux4g-space-2: 0.25rem;    /* 4px */
  --ux4g-space-3: 0.375rem;   /* 6px */
  --ux4g-space-4: 0.5rem;     /* 8px */
  --ux4g-space-5: 0.75rem;    /* 12px */
  --ux4g-space-6: 1rem;       /* 16px */
  --ux4g-space-7: 1.25rem;    /* 20px */
  --ux4g-space-8: 1.5rem;     /* 24px */
  --ux4g-space-9: 2rem;       /* 32px */
  --ux4g-space-10: 2.5rem;    /* 40px */
  --ux4g-space-11: 3rem;      /* 48px */
  --ux4g-space-12: 3.5rem;    /* 56px */
  --ux4g-space-13: 4rem;      /* 64px */
  --ux4g-space-14: 5rem;      /* 80px */
  --ux4g-space-15: 7.5rem;    /* 120px */
  --ux4g-space-16: 22.5rem;   /* 360px */
}
:root {
 --ux4g-radius-0: 0px;
  --ux4g-radius-1: 2px;
  --ux4g-radius-2: 4px;
  --ux4g-radius-3: 8px;
  --ux4g-radius-4: 12px;
  --ux4g-radius-5: 16px;
  --ux4g-radius-6: 24px;
  --ux4g-radius-circular: 999px;
}

:root {
  --ux4g-border-none: 0px;
  --ux4g-border-thin: 1px;
  --ux4g-border-thick: 2px;
  --ux4g-border-thicker: 3px;
  --ux4g-border-thickest: 4px;
}

:root {
  --ux4g-blur-none: 0px;
  --ux4g-blur-1: 2px;
  --ux4g-blur-2: 4px;
  --ux4g-blur-3: 8px;
  --ux4g-blur-4: 16px;
}

:root {
  --ux4g-opacity-0: 0;
  --ux4g-opacity-5: 0.05;
  --ux4g-opacity-10: 0.1;
  --ux4g-opacity-20: 0.2;
  --ux4g-opacity-25: 0.25;
  --ux4g-opacity-30: 0.3;
  --ux4g-opacity-40: 0.4;
  --ux4g-opacity-50: 0.5;
  --ux4g-opacity-60: 0.6;
  --ux4g-opacity-70: 0.7;
  --ux4g-opacity-75: 0.75;
  --ux4g-opacity-80: 0.8;
  --ux4g-opacity-90: 0.9;
  --ux4g-opacity-95: 0.95;
  --ux4g-opacity-100: 1;
}

:root {
  --ux4g-elevation-color-0: rgba(0, 0, 0, 0);
  --ux4g-elevation-color-1: rgba(0, 0, 0, 0.04);
  --ux4g-elevation-color-2: rgba(0, 0, 0, 0.08);
  --ux4g-elevation-color-4: rgba(0, 0, 0, 0.16);
  --ux4g-elevation-color-6: rgba(0, 0, 0, 0.24);
}

:root {
  --ux4g-z-n1: -1;
  --ux4g-z-0: 0;
  --ux4g-z-1: 1;
  --ux4g-z-2: 2;
  --ux4g-z-3: 3;

  /* Extended Z-Index Scale */
  --ux4g-z-index-10: 10;
  --ux4g-z-index-20: 20;
  --ux4g-z-index-30: 30;
  --ux4g-z-index-40: 40;
  --ux4g-z-index-50: 50;

  --ux4g-z-index-dropdown: 1000;
  --ux4g-z-index-sticky: 1020;
  --ux4g-z-index-fixed: 1030;
  --ux4g-z-index-offcanvas: 1040;
  --ux4g-z-index-modal-backdrop: 1050;
  --ux4g-z-index-modal: 1060;
  --ux4g-z-index-popover: 1070;
  --ux4g-z-index-tooltip: 1080;
  --ux4g-z-index-toast: 1090;
}

:root {
  --ux4g-visibility-visible: visible;
  --ux4g-visibility-hidden: hidden;
}

:root {
  --ux4g-text-transform-none: none;
  --ux4g-text-transform-lowercase: lowercase;
  --ux4g-text-transform-uppercase: uppercase;
  --ux4g-text-transform-capitalize: capitalize;
}


:root {
  /* Vertical Align */
  --ux4g-vertical-align-baseline: baseline;
  --ux4g-vertical-align-top: top;
  --ux4g-vertical-align-middle: middle;
  --ux4g-vertical-align-bottom: bottom;
  --ux4g-vertical-align-text-top: text-top;
  --ux4g-vertical-align-text-bottom: text-bottom;
}

:root {
  /* ===== Position Type (Primitive) ===== */
  --ux4g-position-static: static;
  --ux4g-position-relative: relative;
  --ux4g-position-absolute: absolute;
  --ux4g-position-fixed: fixed;
  --ux4g-position-sticky: sticky;

  /* ===== Inset Value Scale (Primitive) ===== */
  --ux4g-pos-value-0: 0;
  --ux4g-pos-value-25: 25%;
  --ux4g-pos-value-50: 50%;
  --ux4g-pos-value-75: 75%;
  --ux4g-pos-value-100: 100%;
  --ux4g-pos-value-auto: auto;

  /* ===== Transform (Primitive) ===== */
  --ux4g-translate-middle: translate(-50%, -50%);
  --ux4g-translate-middle-x: translateX(-50%);
  --ux4g-translate-middle-y: translateY(-50%);

  /* ===== Position Offset Scale ===== */
  --ux4g-pos-offset-0: 0;
  --ux4g-pos-offset-1: 1px;
  --ux4g-pos-offset-2: 2px;
  --ux4g-pos-offset-3: 3px;
  --ux4g-pos-offset-4: 4px;
  --ux4g-pos-offset-5: 5px;
  --ux4g-pos-offset-8: 8px;
  --ux4g-pos-offset-12: 12px;
  --ux4g-pos-offset-16: 16px;
  --ux4g-pos-offset-24: 24px;
  --ux4g-pos-offset-32: 32px;
  --ux4g-pos-offset-48: 48px;

  /* Negative offsets (for badges overflow) */
  --ux4g-pos-offset-n1: -1px;
  --ux4g-pos-offset-n2: -2px;
  --ux4g-pos-offset-n3: -3px;
  --ux4g-pos-offset-n4: -4px;
  --ux4g-pos-offset-n5: -5px;
  --ux4g-pos-offset-n8: -8px;
  --ux4g-pos-offset-n12: -12px;
}
:root {
  --ux4g-object-fit-contain: contain;
  --ux4g-object-fit-cover: cover;
  --ux4g-object-fit-fill: fill;
  --ux4g-object-fit-none: none;
  --ux4g-object-fit-scale-down: scale-down;


  /* Object Position Primitive Tokens */
   --ux4g-object-position-center: center;
  --ux4g-object-position-top: top;
  --ux4g-object-position-bottom: bottom;
  --ux4g-object-position-left: left;
  --ux4g-object-position-right: right;
  --ux4g-object-position-top-left: top left;
  --ux4g-object-position-top-right: top right;
  --ux4g-object-position-bottom-left: bottom left;
  --ux4g-object-position-bottom-right: bottom right;
}

:root {
  --ux4g-overflow-auto: auto;
  --ux4g-overflow-hidden: hidden;
  --ux4g-overflow-visible: visible;
  --ux4g-overflow-scroll: scroll;


  --ux4g-scrollbar-thumb: var(--ux4g-color-neutral-500);
  --ux4g-scrollbar-track: transparent;
  --ux4g-scrollbar-size: 8px;
  --ux4g-scrollbar-radius: 999px;}

:root {
  /* =========================================
     UX4G LAYOUT TOKENS
     
     Breakpoint System (Range-based):
       Mobile (sm): 320px – 767px → @media (min-width: 320px) and (max-width: 767px)
       Tablet (md): 768px – 1023px → @media (min-width: 768px) and (max-width: 1023px)
       Desktop (base): 1024px – 1439px → @media (min-width: 1024px) and (max-width: 1439px)
       (Desktop LARGE) (lg): 1440px – 1920px → @media (min-width: 1440px)
  ========================================= */

  /* ─── Container Max-Widths ─── */
  --ux4g-container-md: 720px;
  --ux4g-container-lg-base: 1140px;
  --ux4g-container-lg-large: 1320px;

  /* ─── Container Padding ─── */
  --ux4g-container-padding-x: 12px;

  /* ─── Flex Grid Gutter ─── */
  --ux4g-gutter-x: var(--ux4g-space-6, 16px);
  --ux4g-gutter-y: 0px;
}

:root {
  /* Transition Durations */
  --ux4g-transition-duration-fast: 150ms;
  --ux4g-transition-duration-base: 250ms;
  --ux4g-transition-duration-slow: 400ms;

  /* Animation Durations */
  --ux4g-duration-fast: 0.2s;
  --ux4g-duration-normal: 0.28s;
  --ux4g-duration-slow: 0.4s;

  /* Timing Functions */
  --ux4g-transition-timing-ease: ease;
  --ux4g-transition-timing-linear: linear;
  --ux4g-transition-timing-in: ease-in;
  --ux4g-transition-timing-out: ease-out;
  --ux4g-transition-timing-in-out: ease-in-out;
}










}


/* 2. Semantic Tokens */
@layer ux4g-tokens {
:root {

  /* font-weight */
  --ux4g-fw-regular: var(--ux4g-font-weight-regular);
  --ux4g-fw-medium: var(--ux4g-font-weight-medium);
  --ux4g-fw-semibold: var(--ux4g-font-weight-semibold);
  --ux4g-fw-bold: var(--ux4g-font-weight-bold);
  --ux4g-fw-display-semibold: var(--ux4g-font-weight-display-semibold);
  --ux4g-fw-display-bold: var(--ux4g-font-weight-display-bold);

  /* font family */
  --ux4g-ff: var(--ux4g-font-family-base);
  --ux4g-ff-display: var(--ux4g-font-family-display);

  /* font-size */
  --ux4g-fs-60: var(--ux4g-size-60);
  --ux4g-fs-52: var(--ux4g-size-52);
  --ux4g-fs-48: var(--ux4g-size-48);
  --ux4g-fs-40: var(--ux4g-size-40);
  --ux4g-fs-36: var(--ux4g-size-36);
  --ux4g-fs-32: var(--ux4g-size-32);
  --ux4g-fs-28: var(--ux4g-size-28);
  --ux4g-fs-24: var(--ux4g-size-24);
  --ux4g-fs-20: var(--ux4g-size-20);
  --ux4g-fs-18: var(--ux4g-size-18);
  --ux4g-fs-16: var(--ux4g-size-16);
  --ux4g-fs-14: var(--ux4g-size-14);
  --ux4g-fs-12: var(--ux4g-size-12);
  --ux4g-fs-11: var(--ux4g-size-11);
  --ux4g-fs-8: var(--ux4g-size-8);


  /* line height =========== */
  --ux4g-lh-64: var(--ux4g-line-height-64);
  --ux4g-lh-56: var(--ux4g-line-height-56);
  --ux4g-lh-52: var(--ux4g-line-height-52);
  --ux4g-lh-48: var(--ux4g-line-height-48);
  --ux4g-lh-44: var(--ux4g-line-height-44);
  --ux4g-lh-40: var(--ux4g-line-height-40);
  --ux4g-lh-36: var(--ux4g-line-height-36);
  --ux4g-lh-32: var(--ux4g-line-height-32);
  --ux4g-lh-28: var(--ux4g-line-height-28);
  --ux4g-lh-26: var(--ux4g-line-height-26);
  --ux4g-lh-24: var(--ux4g-line-height-24);
  --ux4g-lh-22: var(--ux4g-line-height-22);
  --ux4g-lh-20: var(--ux4g-line-height-20);
  --ux4g-lh-18: var(--ux4g-line-height-18);
  --ux4g-lh-16: var(--ux4g-line-height-16);
  --ux4g-lh-14: var(--ux4g-line-height-14);


}
:root {
  /* General Spacing */
  --ux4g-spacing-none: var(--ux4g-space-none); /* 0 px */
  --ux4g-spacing-3: var(--ux4g-space-3); /* 6px */

  /* Section Spacing */
  --ux4g-section-none: var(--ux4g-space-none); /* 0 px */
  --ux4g-section-2xs: var(--ux4g-space-2); /* 4px */
  --ux4g-section-3xs: var(--ux4g-space-3); /* 6px */
  --ux4g-section-4xs: var(--ux4g-space-4); /* 8px */
  --ux4g-section-5xs: var(--ux4g-space-5); /* 12px */
  --ux4g-section-6xs: var(--ux4g-space-6); /* 16px */
  --ux4g-section-7xs: var(--ux4g-space-7); /* 20px */
  --ux4g-section-xs: var(--ux4g-space-8); /* 24px */
  --ux4g-section-s: var(--ux4g-space-9); /* 28px */
  --ux4g-section-m: var(--ux4g-space-11); /* 36px */
  --ux4g-section-l: var(--ux4g-space-12); /* 40px */
  --ux4g-section-xl: var(--ux4g-space-13); /* 48px */
  --ux4g-section-2xl: var(--ux4g-space-14); /* 56px */

  /* Inline Spacing */
  --ux4g-inline-none: var(--ux4g-space-none); /* 0px */
  --ux4g-inline-2xs: var(--ux4g-space-1); /* 2px */
  --ux4g-inline-xs: var(--ux4g-space-2); /* 4px */
  --ux4g-inline-s: var(--ux4g-space-4); /* 8px */
  --ux4g-inline-m: var(--ux4g-space-5); /* 12px */
  --ux4g-inline-l: var(--ux4g-space-6); /* 16px */
  --ux4g-inline-xl: var(--ux4g-space-9); /* 24px */

  /* Stack Spacing */
  --ux4g-stack-none: var(--ux4g-space-none); /* 0px */
  --ux4g-stack-2xs: var(--ux4g-space-2); /* 4px */
  --ux4g-stack-xs: var(--ux4g-space-4); /* 8px */
  --ux4g-stack-s: var(--ux4g-space-5); /* 12px */
  --ux4g-stack-m: var(--ux4g-space-6); /* 16px */
  --ux4g-stack-l: var(--ux4g-space-8); /* 24px */
  --ux4g-stack-xl: var(--ux4g-space-9); /* 28px */
}

:root {
  /* Padding Scale */
  --ux4g-padding-none: var(--ux4g-space-none); /* 0 */
  --ux4g-padding-3xs: var(--ux4g-space-1); /* 2px */
  --ux4g-padding-2xs: var(--ux4g-space-2); /* 4px */
  --ux4g-padding-xs: var(--ux4g-space-4); /* 8px */
  --ux4g-padding-s: var(--ux4g-space-5); /* 12px */
  --ux4g-padding-m: var(--ux4g-space-6); /* 16px */
  --ux4g-padding-l: var(--ux4g-space-7); /* 20px */
  --ux4g-padding-xl: var(--ux4g-space-8); /* 24px */
  --ux4g-padding-2xl: var(--ux4g-space-9); /* 32px */
  --ux4g-padding-3xl: var(--ux4g-space-15);  /* 40px */
  --ux4g-padding-4xl: var(--ux4g-space-16);   /* 48px */
}

:root {
  /* Margin Scale */
  --ux4g-margin-none: var(--ux4g-space-none);
  --ux4g-margin-3xs: var(--ux4g-space-1);
  --ux4g-margin-2xs: var(--ux4g-space-2);
  --ux4g-margin-xs: var(--ux4g-space-4);
  --ux4g-margin-s: var(--ux4g-space-5);
  --ux4g-margin-m: var(--ux4g-space-6);
  --ux4g-margin-l: var(--ux4g-space-7);
  --ux4g-margin-xl: var(--ux4g-space-8);
  --ux4g-margin-2xl: var(--ux4g-space-9);
}

:root {
  /* --ux4g-blur-none is defined in blur.tokens.css as 0px */
  --ux4g-blur-subtle: var(--ux4g-blur-1);
  --ux4g-blur-soft: var(--ux4g-blur-2);
  --ux4g-blur-medium: var(--ux4g-blur-3);
  --ux4g-blur-strong: var(--ux4g-blur-4);
}


:root {
  --ux4g-radius-none: var(--ux4g-radius-0);
  --ux4g-radius-xs: var(--ux4g-radius-1); /* 2px */
  --ux4g-radius-sm: var(--ux4g-radius-2); /* 4px */
  --ux4g-radius-md: var(--ux4g-radius-3); /* 8px */
  --ux4g-radius-lg: var(--ux4g-radius-4); /* 12px */
  --ux4g-radius-xl: var(--ux4g-radius-5); /* 16px */
  --ux4g-radius-2xl: var(--ux4g-radius-6); /* 24px */
  --ux4g-radius-full: var(--ux4g-radius-circular);
}
:root {
  /* Border Width */
  --ux4g-border-width-none: var(--ux4g-border-none);
  --ux4g-border-width-sm: var(--ux4g-border-thin);
  --ux4g-border-width-md: var(--ux4g-border-thick);
  --ux4g-border-width-lg: var(--ux4g-border-thicker);
  --ux4g-border-width-xl: var(--ux4g-border-thickest);

  /* Border Color - Neutral */
  --ux4g-border-color-neutral-default: var(--ux4g-color-neutral-300);
  --ux4g-border-color-neutral-subtle: var(--ux4g-color-neutral-200);
  --ux4g-border-color-neutral-strong: var(--ux4g-color-neutral-500);
  --ux4g-border-color-neutral-focus: var(--ux4g-color-neutral-600);
  --ux4g-border-color-neutral-hover: var(--ux4g-color-neutral-300);
  --ux4g-border-color-neutral-active: var(--ux4g-color-neutral-400);
  --ux4g-border-color-neutral-elevated: var(--ux4g-color-neutral-0);


  /* Status Borders */
  --ux4g-border-color-success-default: var(--ux4g-color-green-300);
  --ux4g-border-color-success-strong: var(--ux4g-color-green-600);

  --ux4g-border-color-info-default: var(--ux4g-color-cyan-300);
  --ux4g-border-color-info-strong: var(--ux4g-color-cyan-600);

  --ux4g-border-color-error-default: var(--ux4g-color-red-300);
  --ux4g-border-color-error-strong: var(--ux4g-color-red-600);

  --ux4g-border-color-warning-default: var(--ux4g-color-orange-300);
  --ux4g-border-color-warning-strong: var(--ux4g-color-orange-600);

  /* Brand Borders */
  --ux4g-border-color-primary-default: var(--ux4g-color-primary-300);
  --ux4g-border-color-primary-strong: var(--ux4g-color-primary-600);
  --ux4g-border-color-primary-hover: var(--ux4g-color-primary-700);
  --ux4g-border-color-primary-active: var(--ux4g-color-primary-800);
  --ux4g-border-color-secondary-default: var(--ux4g-color-secondary-300);
  --ux4g-border-color-tertiary-default: var(--ux4g-color-tertiary-300);

  /* Brand Borders */
  --ux4g-control-border-default: var(--ux4g-color-neutral-200);

  /* Disabled border for icon buttons */
  --ux4g-icon-border-disabled: rgba(229, 229, 229, 1);
  /* Legacy typo alias (kept for backward compatibility) */
  --ux4x-icon-border-desabled: var(--ux4g-icon-border-disabled);


}

/* background-color */
:root {
  --ux4g-bg-neutral-elevated: var(--ux4g-color-neutral-0);
  --ux4g-bg-neutral: var(--ux4g-color-neutral-50);
  --ux4g-bg-neutral-soft: var(--ux4g-color-neutral-100);
  --ux4g-bg-neutral-subtle: var(--ux4g-color-neutral-200);
  --ux4g-bg-neutral-emphasis: var(--ux4g-color-neutral-300);
  --ux4g-bg-neutral-strong: var(--ux4g-color-neutral-600);
  --ux4g-bg-neutral-stronger: var(--ux4g-color-neutral-900);
  --ux4g-bg-neutral-disabled:  var(--ux4g-color-neutral-200);

  --ux4g-bg-primary: var(--ux4g-color-primary-50);
  --ux4g-bg-primary-soft: var(--ux4g-color-primary-100);
  --ux4g-bg-primary-subtle: var(--ux4g-color-primary-200);
  --ux4g-bg-primary-emphasis: var(--ux4g-color-primary-300);
  --ux4g-bg-primary-strong: var(--ux4g-color-primary-600);
  --ux4g-bg-primary-strong-hover: var(--ux4g-color-primary-700);
  --ux4g-bg-primary-stronger: var(--ux4g-color-primary-800);
  --ux4g-bg-primary-stronger-hover: var(--ux4g-color-primary-900);

  --ux4g-bg-secondary: var(--ux4g-color-secondary-50);
  --ux4g-bg-secondary-soft: var(--ux4g-color-secondary-100);
  --ux4g-bg-secondary-subtle: var(--ux4g-color-secondary-200);
  --ux4g-bg-secondary-emphasis: var(--ux4g-color-secondary-300);
  --ux4g-bg-secondary-strong: var(--ux4g-color-secondary-600);

    --ux4g-bg-tertiary: var(--ux4g-color-tertiary-50);
  --ux4g-bg-tertiary-soft: var(--ux4g-color-tertiary-100);
  --ux4g-bg-tertiary-subtle: var(--ux4g-color-tertiary-200);
  --ux4g-bg-tertiary-emphasis: var(--ux4g-color-tertiary-300);
  --ux4g-bg-tertiary-strong: var(--ux4g-color-tertiary-600);

  --ux4g-bg-success: var(--ux4g-color-green-50);
  --ux4g-bg-success-soft: var(--ux4g-color-green-100);
  --ux4g-bg-success-subtle: var(--ux4g-color-green-200);
  --ux4g-bg-success-emphasis: var(--ux4g-color-green-300);
  --ux4g-bg-success-strong: var(--ux4g-color-green-600);

  --ux4g-bg-error: var(--ux4g-color-red-50);
  --ux4g-bg-error-soft: var(--ux4g-color-red-100);
  --ux4g-bg-error-subtle: var(--ux4g-color-red-200);
  --ux4g-bg-error-emphasis: var(--ux4g-color-red-300);
  --ux4g-bg-error-strong: var(--ux4g-color-red-600);
  --ux4g-bg-error-strong-hover : var(--ux4g-color-red-700);
  --ux4g-bg-error-stronger : var(--ux4g-color-red-800);



  --ux4g-bg-warning: var(--ux4g-color-orange-50);
  --ux4g-bg-warning-soft: var(--ux4g-color-orange-100);
  --ux4g-bg-warning-subtle: var(--ux4g-color-orange-200);
  --ux4g-bg-warning-emphasis: var(--ux4g-color-orange-300);
  --ux4g-bg-warning-strong: var(--ux4g-color-orange-600);

  --ux4g-bg-info: var(--ux4g-color-cyan-50);
  --ux4g-bg-info-soft: var(--ux4g-color-cyan-100);
  --ux4g-bg-info-subtle: var(--ux4g-color-cyan-200);
  --ux4g-bg-info-emphasis: var(--ux4g-color-cyan-300);
  --ux4g-bg-info-strong: var(--ux4g-color-cyan-600);


  --ux4g-bg-yellow-strong: var(--ux4g-color-yellow-600);


  --ux4g-control-bg-default: var(--ux4g-color-neutral-50);
  --ux4g-bg-overlay: rgba(23, 23, 23, 0.70);

  
}

/* text color */
:root {
  --ux4g-text-neutral-primary: var(--ux4g-color-neutral-900);
  --ux4g-text-neutral-secondary: var(--ux4g-color-neutral-700);
  --ux4g-text-neutral-tertiary: var(--ux4g-color-neutral-500);
  
  
  --ux4g-text-neutral-inverse: var(--ux4g-color-neutral-50);
  --ux4g-text-brand-primary-default: var(--ux4g-color-primary-600);
  --ux4g-text-brand-secondary-default: var(--ux4g-color-secondary-600);
  --ux4g-text-brand-tertiary-default: var(--ux4g-color-tertiary-600);


  --ux4g-text-status-success: var(--ux4g-color-green-800);
  --ux4g-text-status-error: var(--ux4g-color-red-800);
  --ux4g-text-status-warning: var(--ux4g-color-orange-800);
  --ux4g-text-status-info: var(--ux4g-color-cyan-800);
  
  --ux4g-icon-status-error: var(--ux4g-color-red-600);
  --ux4g-icon-status-success: var(--ux4g-color-green-600);
  --ux4g-icon-status-warning: var(--ux4g-color-orange-600);
  --ux4g-icon-status-info: var(--ux4g-color-cyan-600);
  --ux4g-icon-neutral-inverse: var(--ux4g-color-neutral-50);

  --ux4g-text-link-default-default: var(--ux4g-color-primary-600);
  --ux4g-text-link-default-hover: var(--ux4g-color-primary-700);
  --ux4g-text-link-default-active: var(--ux4g-color-primary-800);
  --ux4g-text-link-default-visited: var(--ux4g-color-primary-800);
  --ux4g-text-link-default-inverse: var(--ux4g-color-primary-200);
  --ux4g-text-link-default-disabled: var(--ux4g-color-primary-400);


  --ux4g-text-link-neutral-default: var(--ux4g-color-neutral-600);
  --ux4g-text-link-neutral-hover: var(--ux4g-color-neutral-700);
  --ux4g-text-link-neutral-active: var(--ux4g-color-neutral-800);
  --ux4g-text-link-neutral-visited: var(--ux4g-color-neutral-800);
  --ux4g-text-link-neutral-inverse: var(--ux4g-color-neutral-200);
  --ux4g-text-link-neutral-disabled: var(--ux4g-color-neutral-400);
  --ux4g-text-link-disabled: var(--ux4g-color-neutral-400);
  --ux4g-text-neutral-emphasis: var(--ux4g-color-neutral-300);

  
  --ux4g-text-link-visited-default: var(--ux4g-color-primary-600);
  --ux4g-text-link-visited-hover: var(--ux4g-color-primary-700);
  --ux4g-text-link-visited-active: var(--ux4g-color-primary-800);
  --ux4g-text-link-visited-inverse: var(--ux4g-color-neutral-200);

  --ux4g-text-info-default: var(--ux4g-color-cyan-600);
  --ux4g-text-error-default: var(--ux4g-color-red-600);
  --ux4g-text-success-default: var(--ux4g-color-green-600);
  --ux4g-text-warning-default: var(--ux4g-color-orange-600);

  --ux4g-text-white: var(--ux4g-color-neutral-0);
   --ux4g-text-black: var(--ux4g-color-neutral-1000);
   --ux4g-text-neutral-disabled: rgba(23, 23, 23, 0.25);

  /* RGB triplets for rgba() usage */
  --ux4g-rgb-white: 255, 255, 255;
  --ux4g-rgb-black: 0, 0, 0;

}





/* box shadow */
:root {
  --ux4g-shadow-l0: none;
  --ux4g-shadow-l1: 0px 1px 2px 0px var(--ux4g-elevation-color-1), 0px 1px 2px 0px var(--ux4g-elevation-color-1);

  --ux4g-shadow-l2: 0px 4px 8px 0px var(--ux4g-elevation-color-2), 0px 1px 2px 0px var(--ux4g-elevation-color-1);

  --ux4g-shadow-l3: 0px 8px 16px 0px var(--ux4g-elevation-color-4), 0px 4px 8px 0px var(--ux4g-elevation-color-2);

  --ux4g-shadow-l4: 0px 16px 32px 0px var(--ux4g-elevation-color-6), 0px 8px 16px 0px var(--ux4g-elevation-color-4);

  /* Focus rings */
  --ux4g-shadow-focus-inset: inset 0 0 0 var(--ux4g-border-width-md) var(--ux4g-border-color-primary-strong);
  --ux4g-shadow-focus-ring: 0 0 0 0.125rem var(--ux4g-bg-neutral), 0 0 0 0.25rem var(--ux4g-bg-primary-strong);
  --ux4g-shadow-focus-border: 0 0 0 0.125rem var(--ux4g-border-color-primary-default);
}






:root {
  --ux4g-z-layout-base: var(--ux4g-z-0);
  --ux4g-z-layout-raised: var(--ux4g-z-1);
  --ux4g-z-layout-overlay: var(--ux4g-z-2);
  --ux4g-z-layout-top: var(--ux4g-z-3);

  /* Extended Scale */
  --ux4g-z-10: var(--ux4g-z-index-10);
  --ux4g-z-20: var(--ux4g-z-index-20);
  --ux4g-z-30: var(--ux4g-z-index-30);
  --ux4g-z-40: var(--ux4g-z-index-40);
  --ux4g-z-50: var(--ux4g-z-index-50);

  /* Components */
  --ux4g-z-dropdown: var(--ux4g-z-index-dropdown);
  --ux4g-z-sticky: var(--ux4g-z-index-sticky);
  --ux4g-z-fixed: var(--ux4g-z-index-fixed);
  --ux4g-z-offcanvas: var(--ux4g-z-index-offcanvas);
  --ux4g-z-modal-backdrop: var(--ux4g-z-index-modal-backdrop);
  --ux4g-z-modal: var(--ux4g-z-index-modal);
  --ux4g-z-popover: var(--ux4g-z-index-popover);
  --ux4g-z-tooltip: var(--ux4g-z-index-tooltip);
  --ux4g-z-toast: var(--ux4g-z-index-toast);
}

:root {
  --ux4g-visibility-show: var(--ux4g-visibility-visible);
  --ux4g-visibility-hide: var(--ux4g-visibility-hidden);
}

:root {
  --ux4g-text-case-default: var(--ux4g-text-transform-none);
  --ux4g-text-case-lower: var(--ux4g-text-transform-lowercase);
  --ux4g-text-case-upper: var(--ux4g-text-transform-uppercase);
  --ux4g-text-case-capitalize: var(--ux4g-text-transform-capitalize);


  /* Semantic Text Align */
  --ux4g-ta-start: var(--ux4g-text-align-start);
  --ux4g-ta-center: var(--ux4g-text-align-center);
  --ux4g-ta-end: var(--ux4g-text-align-end);


  /* Semantic Wrap */
  --ux4g-tw-wrap: var(--ux4g-text-wrap);
  --ux4g-tw-nowrap: var(--ux4g-text-nowrap);

  /* Semantic Word Break */
  --ux4g-wb-break: var(--ux4g-word-break);
}
:root {
  --ux4g-va-baseline: var(--ux4g-vertical-align-baseline);
  --ux4g-va-top: var(--ux4g-vertical-align-top);
  --ux4g-va-middle: var(--ux4g-vertical-align-middle);
  --ux4g-va-bottom: var(--ux4g-vertical-align-bottom);
  --ux4g-va-text-top: var(--ux4g-vertical-align-text-top);
  --ux4g-va-text-bottom: var(--ux4g-vertical-align-text-bottom);
}

:root {
  /* ===== Position ===== */
  --ux4g-pos-static: var(--ux4g-position-static);
  --ux4g-pos-relative: var(--ux4g-position-relative);
  --ux4g-pos-absolute: var(--ux4g-position-absolute);
  --ux4g-pos-fixed: var(--ux4g-position-fixed);
  --ux4g-pos-sticky: var(--ux4g-position-sticky);

  /* ===== Top ===== */
  --ux4g-pos-top-0: var(--ux4g-pos-value-0);
  --ux4g-pos-top-25: var(--ux4g-pos-value-25);
  --ux4g-pos-top-50: var(--ux4g-pos-value-50);
  --ux4g-pos-top-75: var(--ux4g-pos-value-75);
  --ux4g-pos-top-100: var(--ux4g-pos-value-100);
  --ux4g-pos-top-auto: var(--ux4g-pos-value-auto);

  /* ===== Bottom ===== */
  --ux4g-pos-bottom-0: var(--ux4g-pos-value-0);
  --ux4g-pos-bottom-25: var(--ux4g-pos-value-25);
  --ux4g-pos-bottom-50: var(--ux4g-pos-value-50);
  --ux4g-pos-bottom-75: var(--ux4g-pos-value-75);
  --ux4g-pos-bottom-100: var(--ux4g-pos-value-100);
  --ux4g-pos-bottom-auto: var(--ux4g-pos-value-auto);

  /* ===== Start (Left) ===== */
  --ux4g-pos-start-0: var(--ux4g-pos-value-0);
  --ux4g-pos-start-25: var(--ux4g-pos-value-25);
  --ux4g-pos-start-50: var(--ux4g-pos-value-50);
  --ux4g-pos-start-75: var(--ux4g-pos-value-75);
  --ux4g-pos-start-100: var(--ux4g-pos-value-100);
  --ux4g-pos-start-auto: var(--ux4g-pos-value-auto);

  /* ===== End (Right) ===== */
  --ux4g-pos-end-0: var(--ux4g-pos-value-0);
  --ux4g-pos-end-25: var(--ux4g-pos-value-25);
  --ux4g-pos-end-50: var(--ux4g-pos-value-50);
  --ux4g-pos-end-75: var(--ux4g-pos-value-75);
  --ux4g-pos-end-100: var(--ux4g-pos-value-100);
  --ux4g-pos-end-auto: var(--ux4g-pos-value-auto);

  /* ===== Transform ===== */
  --ux4g-pos-translate-middle: var(--ux4g-translate-middle);
  --ux4g-pos-translate-middle-x: var(--ux4g-translate-middle-x);
  --ux4g-pos-translate-middle-y: var(--ux4g-translate-middle-y);

  /* ===== Offset (Small px values) ===== */
  --ux4g-pos-bottom-xs: var(--ux4g-pos-offset-1);
  --ux4g-pos-bottom-sm: var(--ux4g-pos-offset-5);

  --ux4g-pos-end-overflow-xs: var(--ux4g-pos-offset-n1);
  --ux4g-pos-end-overflow-sm: var(--ux4g-pos-offset-n3);
  --ux4g-pos-end-overflow-md: var(--ux4g-pos-offset-n5);

  /* ===== Negative Inset ===== */
  --ux4g-pos-top-n-4: var(--ux4g-pos-offset-n4);
  --ux4g-pos-top-n-8: var(--ux4g-pos-offset-n8);
  --ux4g-pos-top-n-12: var(--ux4g-pos-offset-n12);
  --ux4g-pos-end-n-4: var(--ux4g-pos-offset-n4);
  --ux4g-pos-end-n-8: var(--ux4g-pos-offset-n8);
  --ux4g-pos-end-n-12: var(--ux4g-pos-offset-n12);
  --ux4g-pos-bottom-n-4: var(--ux4g-pos-offset-n4);
  --ux4g-pos-bottom-n-8: var(--ux4g-pos-offset-n8);
  --ux4g-pos-bottom-n-12: var(--ux4g-pos-offset-n12);
  --ux4g-pos-start-n-4: var(--ux4g-pos-offset-n4);
  --ux4g-pos-start-n-8: var(--ux4g-pos-offset-n8);
  --ux4g-pos-start-n-12: var(--ux4g-pos-offset-n12);

  /* ===== Fixed Pixel Inset ===== */
  --ux4g-pos-px-4: var(--ux4g-pos-offset-4);
  --ux4g-pos-px-8: var(--ux4g-pos-offset-8);
  --ux4g-pos-px-12: var(--ux4g-pos-offset-12);
  --ux4g-pos-px-16: var(--ux4g-pos-offset-16);
  --ux4g-pos-px-24: var(--ux4g-pos-offset-24);
  --ux4g-pos-px-32: var(--ux4g-pos-offset-32);
  --ux4g-pos-px-48: var(--ux4g-pos-offset-48);
}

:root {
  /* Media Semantics */
  --ux4g-of-image: var(--ux4g-object-fit-cover);
  --ux4g-of-video: var(--ux4g-object-fit-contain);

  /* Component Semantics */
  --ux4g-of-avatar: var(--ux4g-object-fit-cover);
  --ux4g-of-thumbnail: var(--ux4g-object-fit-cover);
  --ux4g-of-card-media: var(--ux4g-object-fit-cover);
  --ux4g-of-logo: var(--ux4g-object-fit-contain);

  /* Utility Bridge*/
  --ux4g-of-contain: var(--ux4g-object-fit-contain);
  --ux4g-of-cover: var(--ux4g-object-fit-cover);
  --ux4g-of-fill: var(--ux4g-object-fit-fill);
  --ux4g-of-none: var(--ux4g-object-fit-none);
  --ux4g-of-scale-down: var(--ux4g-object-fit-scale-down);



    /* ===== Object Position Semantic ===== */
  --ux4g-op-image: var(--ux4g-object-position-center);
  --ux4g-op-avatar: var(--ux4g-object-position-center);
  --ux4g-op-thumbnail: var(--ux4g-object-position-center);
  --ux4g-op-card-media: var(--ux4g-object-position-center);
  --ux4g-op-logo: var(--ux4g-object-position-center);

  /* Generic Bridge (like object-fit) */
  --ux4g-op-center: var(--ux4g-object-position-center);
  --ux4g-op-top: var(--ux4g-object-position-top);
  --ux4g-op-bottom: var(--ux4g-object-position-bottom);
  --ux4g-op-left: var(--ux4g-object-position-left);
  --ux4g-op-right: var(--ux4g-object-position-right);
  --ux4g-op-top-left: var(--ux4g-object-position-top-left);
  --ux4g-op-top-right: var(--ux4g-object-position-top-right);
  --ux4g-op-bottom-left: var(--ux4g-object-position-bottom-left);
  --ux4g-op-bottom-right: var(--ux4g-object-position-bottom-right);
}

:root {
  --ux4g-of-auto: var(--ux4g-overflow-auto);
  --ux4g-of-hidden: var(--ux4g-overflow-hidden);
  --ux4g-of-visible: var(--ux4g-overflow-visible);
  --ux4g-of-scroll: var(--ux4g-overflow-scroll);

  /* Axis semantic */
  --ux4g-ofx-auto: var(--ux4g-overflow-auto);
  --ux4g-ofx-hidden: var(--ux4g-overflow-hidden);
  --ux4g-ofx-visible: var(--ux4g-overflow-visible);
  --ux4g-ofx-scroll: var(--ux4g-overflow-scroll);

  --ux4g-ofy-auto: var(--ux4g-overflow-auto);
  --ux4g-ofy-hidden: var(--ux4g-overflow-hidden);
  --ux4g-ofy-visible: var(--ux4g-overflow-visible);
  --ux4g-ofy-scroll: var(--ux4g-overflow-scroll);


    /* Semantic Scroll (used by overflow utilities) */
  --ux4g-scroll-thumb: var(--ux4g-scrollbar-thumb);
  --ux4g-scroll-track: var(--ux4g-scrollbar-track);
  --ux4g-scroll-size: var(--ux4g-scrollbar-size);
  --ux4g-scroll-radius: var(--ux4g-scrollbar-radius);
}

:root {
  /* Primary */
  --Spinner-primary-Color-1: var(--ux4g-bg-primary-strong);
  --Spinner-primary-Color-2: var(--ux4g-bg-primary-soft);

  /* Secondary */
  --Spinner-secondary-Color-1: var(--ux4g-bg-secondary-strong);
  --Spinner-secondary-Color-2: var(--ux4g-bg-secondary-soft);

  /* Tertiary */
  --Spinner-tertiary-Color-1: var(--ux4g-bg-tertiary-strong);
  --Spinner-tertiary-Color-2: var(--ux4g-bg-tertiary-soft);

  /* Light */
  --Spinner-Light-Color-1: var(--ux4g-color-neutral-0);
  --Spinner-Light-Color-2: rgba(255, 255, 255, 0.25);

  /* Danger */
  --Spinner-danger-Color-1: var(--ux4g-bg-error-strong);
  --Spinner-danger-Color-2: var(--ux4g-bg-error-soft);

  /* Success */
  --Spinner-success-Color-1: var(--ux4g-bg-success-strong);
  --Spinner-success-Color-2: var(--ux4g-bg-success-soft);

  /* Info */
  --Spinner-info-Color-1: var(--ux4g-bg-info-strong);
  --Spinner-info-Color-2: var(--ux4g-bg-info-soft);

  /* Warning */
  --Spinner-warning-Color-1: var(--ux4g-bg-warning-strong);
  --Spinner-warning-Color-2: var(--ux4g-bg-warning-soft);
}

:root {
  /* Opacity variables */
  --ux4g-opacity-disabled: var(--ux4g-opacity-40);
  --ux4g-opacity-hover: var(--ux4g-opacity-80);
}


:root {
  /* ===== Sizing Semantic ===== */
  --ux4g-sz-8: var(--ux4g-size-8);
  --ux4g-sz-10: var(--ux4g-size-10);
  --ux4g-sz-11: var(--ux4g-size-11);
  --ux4g-sz-12: var(--ux4g-size-12);
  --ux4g-sz-14: var(--ux4g-size-14);
  --ux4g-sz-16: var(--ux4g-size-16);
  --ux4g-sz-18: var(--ux4g-size-18);
  --ux4g-sz-20: var(--ux4g-size-20);
  --ux4g-sz-24: var(--ux4g-size-24);
  --ux4g-sz-28: var(--ux4g-size-28);
  --ux4g-sz-32: var(--ux4g-size-32);
  --ux4g-sz-36: var(--ux4g-size-36);
  --ux4g-sz-40: var(--ux4g-size-40);
  --ux4g-sz-48: var(--ux4g-size-48);
  --ux4g-sz-52: var(--ux4g-size-52);
  --ux4g-sz-56: var(--ux4g-size-56);
  --ux4g-sz-60: var(--ux4g-size-60);
  --ux4g-sz-64: var(--ux4g-size-64);
  --ux4g-sz-80: var(--ux4g-size-80);
  --ux4g-sz-120: var(--ux4g-size-120);

  --ux4g-sz-none: 0;
  --ux4g-sz-full: 100%;
  --ux4g-sz-half: 50%;
  --ux4g-sz-auto: auto;
  --ux4g-sz-screen-w: 100vw;
  --ux4g-sz-screen-h: 100vh;

  /* Component Specific Aliases (Optional but good for clarity) */
  --ux4g-sz-xs: var(--ux4g-size-24);
  --ux4g-sz-s: var(--ux4g-size-32);
  --ux4g-sz-base: var(--ux4g-size-36);
  --ux4g-sz-m: var(--ux4g-size-40);
  --ux4g-sz-l: var(--ux4g-size-48);
  --ux4g-sz-xl: var(--ux4g-size-64);
  --ux4g-sz-2xl: var(--ux4g-size-80);
  --ux4g-sz-3xl: var(--ux4g-size-120);
}

:root {
  --ux4g-interaction-hover-opacity: 0.9;
  --ux4g-interaction-active-opacity: 0.8;
  --ux4g-interaction-disabled-opacity: 0.5;

  --ux4g-motion-easing-in: var(--ux4g-transition-timing-in);
  --ux4g-motion-easing-out: var(--ux4g-transition-timing-out);

  --ux4g-outline-width-default: 2px;
  --ux4g-outline-color-focus: var(--ux4g-bg-primary-strong);
  --ux4g-outline-offset-default: 2px;
}




}

@layer ux4g-tokens {
/* =========================================
   UX4G DARK THEME
   Consolidated dark mode tokens and overrides
   ========================================= */

:root[data-theme="dark"] {
  /* --- Colors (Text) --- */
  --ux4g-text-neutral-primary: var(--ux4g-color-neutral-50);
  --ux4g-text-neutral-secondary: var(--ux4g-color-neutral-200);
  --ux4g-text-neutral-tertiary: var(--ux4g-color-neutral-300);
  --ux4g-text-neutral-inverse: var(--ux4g-color-neutral-900);
  --ux4g-text-link-disabled: var(--ux4g-color-neutral-300);
  --ux4g-text-brand-primary-default: var(--ux4g-color-primary-300);
  --ux4g-text-brand-secondary-default: var(--ux4g-color-secondary-300);
  --ux4g-text-brand-tertiary-default: var(--ux4g-color-tertiary-300);
  --ux4g-text-status-success: var(--ux4g-color-green-300);
  --ux4g-text-status-error: var(--ux4g-color-red-300);
  --ux4g-text-status-warning: var(--ux4g-color-orange-300);
  --ux4g-text-status-info: var(--ux4g-color-cyan-300);
  --ux4g-text-link-default-default: var(--ux4g-color-primary-300);
  --ux4g-text-link-default-hover: var(--ux4g-color-primary-200);
  --ux4g-text-link-default-active: var(--ux4g-color-primary-100);
  --ux4g-text-link-default-inverse: var(--ux4g-color-primary-800);
  --ux4g-text-link-neutral-default: var(--ux4g-color-neutral-300);
  --ux4g-text-link-neutral-hover: var(--ux4g-color-neutral-200);
  --ux4g-text-link-neutral-active: var(--ux4g-color-neutral-100);
  --ux4g-text-link-neutral-inverse: var(--ux4g-color-neutral-800);
  --ux4g-text-link-visited-default: var(--ux4g-color-primary-300);
  --ux4g-text-link-visited-hover: var(--ux4g-color-primary-200);
  --ux4g-text-link-visited-active: var(--ux4g-color-primary-100);
  --ux4g-text-link-visited-inverse: var(--ux4g-color-neutral-800);
  --ux4g-icon-neutral-inverse: var(--ux4g-color-neutral-950);
  --ux4g-text-neutral-disabled: rgba(250, 250, 250, 0.25);
  --ux4g-text-neutral-emphasis: var(--ux4g-color-neutral-700);
  --ux4g-text-black :var(--ux4g-color-neutral-0);
  --ux4g-text-white :var(--ux4g-color-neutral-1000);

  /* RGB triplets for rgba() usage */
  --ux4g-rgb-white: 255, 255, 255;
  --ux4g-rgb-black: 0, 0, 0;


  /* --- Backgrounds --- */
  --ux4g-bg-neutral-elevated: var(--ux4g-color-neutral-950);
  --ux4g-bg-neutral: var(--ux4g-color-neutral-900);
  --ux4g-bg-neutral-soft: var(--ux4g-color-neutral-800);
  --ux4g-bg-neutral-subtle: var(--ux4g-color-neutral-800);
  --ux4g-bg-neutral-emphasis: var(--ux4g-color-neutral-700);
  --ux4g-bg-neutral-strong: var(--ux4g-color-neutral-950);
  --ux4g-bg-neutral-stronger: var(--ux4g-color-neutral-50);
  --ux4g-bg-neutral-inverse: var(--ux4g-color-neutral-50);
  --ux4g-bg-neutral-disabled: rgba(250, 250, 250, 0.25);
  --ux4g-bg-neutral-none: transparent;
  --ux4g-bg-primary: var(--ux4g-color-primary-900);
  --ux4g-bg-primary-soft: var(--ux4g-color-primary-800);
  --ux4g-bg-primary-subtle: var(--ux4g-color-primary-700);
  --ux4g-bg-primary-emphasis: var(--ux4g-color-primary-600);
  --ux4g-bg-primary-strong: var(--ux4g-color-primary-300);
  --ux4g-bg-primary-strong-hover: var(--ux4g-color-primary-400);
  --ux4g-bg-primary-stronger: var(--ux4g-color-primary-200);
  --ux4g-bg-primary-stronger-hover: var(--ux4g-color-primary-100);
  --ux4g-bg-secondary: var(--ux4g-color-secondary-900);
  --ux4g-bg-secondary-soft: var(--ux4g-color-secondary-800);
  --ux4g-bg-secondary-subtle: var(--ux4g-color-secondary-700);
  --ux4g-bg-secondary-emphasis: var(--ux4g-color-secondary-600);
  --ux4g-bg-secondary-strong: var(--ux4g-color-secondary-300);
  --ux4g-bg-tertiary: var(--ux4g-color-tertiary-900);
  --ux4g-bg-tertiary-soft: var(--ux4g-color-tertiary-800);
  --ux4g-bg-tertiary-subtle: var(--ux4g-color-tertiary-700);
  --ux4g-bg-tertiary-emphasis: var(--ux4g-color-tertiary-600);
  --ux4g-bg-tertiary-strong: var(--ux4g-color-tertiary-300);
  --ux4g-bg-success: var(--ux4g-color-green-900);
  --ux4g-bg-success-soft: var(--ux4g-color-green-800);
  --ux4g-bg-success-subtle: var(--ux4g-color-green-700);
  --ux4g-bg-success-emphasis: var(--ux4g-color-green-600);
  --ux4g-bg-success-strong: var(--ux4g-color-green-300);
  --ux4g-bg-error: var(--ux4g-color-red-900);
  --ux4g-bg-error-soft: var(--ux4g-color-red-800);
  --ux4g-bg-error-subtle: var(--ux4g-color-red-700);
  --ux4g-bg-error-emphasis: var(--ux4g-color-red-600);
  --ux4g-bg-error-strong: var(--ux4g-color-red-300);
  --ux4g-bg-error-stronger: var(--ux4g-color-red-200);
  --ux4g-bg-warning: var(--ux4g-color-orange-900);
  --ux4g-bg-warning-soft: var(--ux4g-color-orange-800);
  --ux4g-bg-warning-subtle: var(--ux4g-color-orange-700);
  --ux4g-bg-warning-emphasis: var(--ux4g-color-orange-600);
  --ux4g-bg-warning-strong: var(--ux4g-color-orange-300);
  --ux4g-bg-info: var(--ux4g-color-cyan-900);
  --ux4g-bg-info-soft: var(--ux4g-color-cyan-800);
  --ux4g-bg-info-subtle: var(--ux4g-color-cyan-700);
  --ux4g-bg-info-emphasis: var(--ux4g-color-cyan-600);
  --ux4g-bg-info-strong: var(--ux4g-color-cyan-300);
  --ux4g-bg-overlay: rgba(250, 250, 250, 0.6);
  --ux4g-bg-yellow-strong: var(--ux4g-color-yellow-300);





  /* --- Borders --- */
  --ux4g-border-color-neutral-default: var(--ux4g-color-neutral-600);
  --ux4g-border-color-neutral-subtle: var(--ux4g-color-neutral-700);
  --ux4g-border-color-neutral-strong: var(--ux4g-color-neutral-400);
  --ux4g-border-color-neutral-focus: var(--ux4g-color-neutral-300);
  --ux4g-border-color-neutral-hover: var(--ux4g-color-neutral-700);
  --ux4g-border-color-neutral-active: var(--ux4g-color-neutral-600);
  --ux4g-border-color-neutral-elevated: var(--ux4g-color-neutral-950);
  --ux4g-border-color-success-default: var(--ux4g-color-green-700);
  --ux4g-border-color-success-strong: var(--ux4g-color-green-300);
  --ux4g-border-color-info-default: var(--ux4g-color-cyan-700);
  --ux4g-border-color-info-strong: var(--ux4g-color-cyan-300);
  --ux4g-border-color-error-default: var(--ux4g-color-red-700);
  --ux4g-border-color-error-strong: var(--ux4g-color-red-300);
  --ux4g-border-color-warning-default: var(--ux4g-color-orange-700);
  --ux4g-border-color-warning-strong: var(--ux4g-color-orange-300);
  --ux4g-border-color-primary-default: var(--ux4g-color-primary-600);
  --ux4g-border-color-primary-strong: var(--ux4g-color-primary-300);
  --ux4g-border-color-primary-hover: var(--ux4g-color-primary-200);
  --ux4g-border-color-primary-active: var(--ux4g-color-primary-100);
  --ux4g-border-color-secondary-default: var(--ux4g-color-secondary-600);
  --ux4g-border-color-tertiary-default: var(--ux4g-color-tertiary-600);
  --ux4g-icon-border-disabled: rgba(64, 64, 64, 1);
  --ux4x-icon-border-desabled: var(--ux4g-icon-border-disabled);

  /* --- Elevation & Shadows --- */
  --ux4g-elevation-color-0: rgba(0, 0, 0, 0);
  --ux4g-elevation-color-1: rgba(0, 0, 0, 0.2);
  --ux4g-elevation-color-2: rgba(0, 0, 0, 0.3);
  --ux4g-elevation-color-4: rgba(0, 0, 0, 0.5);
  --ux4g-elevation-color-6: rgba(0, 0, 0, 0.7);

  /* --- Opacity --- */
  --ux4g-opacity-disabled: var(--ux4g-opacity-40);
  --ux4g-opacity-hover: var(--ux4g-opacity-80);

  /* --- Interaction --- */
  --ux4g-interaction-hover-opacity: 0.85;
  --ux4g-outline-color-focus: var(--ux4g-bg-primary-strong);

  /* --- Spinner Overrides --- */
  --Spinner-Light-Color-1: var(--ux4g-color-neutral-600);
  --Spinner-Light-Color-2: var(--ux4g-color-neutral-50);
}

/* --- Table Component Overrides --- */
:root[data-theme="dark"] .ux4g-table-select {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%207.5L10%2012.5L15%207.5%22%20stroke%3D%22%23E5E5E5%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
}

/* --- Navbar Logo Override for Dark Mode --- */
:root[data-theme="dark"] .ux4g-navbar-logo {
  filter: brightness(0) invert(1);
}

}


/* Reset & Foundations */
@layer ux4g-reset {
:where(html) {
  box-sizing: border-box;
}

:where(*, *::before, *::after) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

:where(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

:where(body) {
  background-color: var(--ux4g-bg-neutral-elevated);
  color: var(--ux4g-text-neutral-primary);
  font-family: var(--ux4g-font-family-base, "Noto Sans", system-ui, sans-serif);
  max-width: 100%;
  overflow-x: clip;
}

:where(button) {
  background: none;
  cursor: pointer;
}

:where(a) {
  text-decoration: none;
}

:where(ul) {
  list-style: none;
}
}

@layer ux4g-foundations {
/* Base UI Font */
@font-face {
  font-family: "Noto Sans";
  src: url("https://cdn.ux4g.gov.in/UX4G@3.0.18/assets/fonts/NotoSans.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Global Typography Baseline */
html,
body {
  font-family: var(--ux4g-font-family-base, "Noto Sans", system-ui, sans-serif);
}

/* Ensure form controls follow global font-family and text color */
:where(button, input, optgroup, select, textarea) {
  font: inherit;
  font-family: inherit;
  color: inherit;
}

/* Display Font (Headings) */
@font-face {
  font-family: "Noto Sans Display";
  src: url("https://cdn.ux4g.gov.in/UX4G@3.0.18/assets/fonts/NotoSansDisplay.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}




/* ==========================================
   UX4G Material Icons – Local Font Setup
   ========================================== */

/* ----- Filled ----- */
@font-face {
  font-family: "UX4G Material Icons";
  src: url("https://cdn.ux4g.gov.in/UX4G@3.0.18/assets/fonts/MaterialIcons-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----- Outlined ----- */
@font-face {
  font-family: "UX4G Material Icons Outlined";
  src: url("https://cdn.ux4g.gov.in/UX4G@3.0.18/assets/fonts/MaterialIconsOutlined-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----- Round ----- */
@font-face {
  font-family: "UX4G Material Icons Round";
  src: url("https://cdn.ux4g.gov.in/UX4G@3.0.18/assets/fonts/MaterialIconsRound-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----- Sharp ----- */
@font-face {
  font-family: "UX4G Material Icons Sharp";
  src: url("https://cdn.ux4g.gov.in/UX4G@3.0.18/assets/fonts/MaterialIconsSharp-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----- Two Tone ----- */
@font-face {
  font-family: "UX4G Material Icons TwoTone";
  src: url("https://cdn.ux4g.gov.in/UX4G@3.0.18/assets/fonts/MaterialIconsTwoTone-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ==========================================
   Base Icon Engine
   ========================================== */

.ux4g-icon,
.ux4g-icon-filled,
.ux4g-icon-outlined,
.ux4g-icon-round,
.ux4g-icon-sharp,
.ux4g-icon-twotone {
  font-weight: normal;
  font-style: normal;
  font-size: var(--ux4g-icon-size, 16px);
  width:  var(--ux4g-icon-width, 16px);
  height:  var(--ux4g-icon-height, 16px);
  color: var(--ux4g-icon-color, inherit);
  fill: currentColor;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
}

/* Variant Mapping */
.ux4g-icon,
.ux4g-icon-filled {
  font-family: "UX4G Material Icons";
}

.ux4g-icon-outlined {
  font-family: "UX4G Material Icons Outlined";
}

.ux4g-icon-round {
  font-family: "UX4G Material Icons Round";
}

.ux4g-icon-sharp {
  font-family: "UX4G Material Icons Sharp";
}

.ux4g-icon-twotone {
  font-family: "UX4G Material Icons TwoTone";
}

 :focus-visible {
    position: var(--ux4g-pos-relative);
     outline: var(--ux4g-border-width-md) solid var(--ux4g-border-color-primary-strong);
     outline-offset: 2px;
}
 /* :focus {
    position: var(--ux4g-pos-relative);
     outline: var(--ux4g-border-width-md) solid var(--ux4g-border-color-primary-strong);
     outline-offset: 2px;
} */
}


/* Layout */
@layer ux4g-layout {
/* =========================================
   UX4G CONTAINER SYSTEM
   Approach: Desktop-first (Bootstrap-style progressive)

   Breakpoints:
     Desktop (base):        1024px – 1439px
     Desktop Large (lg):    ≥ 1440px
     Tablet (md):           768px – 1023px
     Mobile (sm):           ≤ 767px

   Container Widths:
     Mobile:                100%
     Tablet:                720px
     Desktop:               1140px
     Desktop Large:         1320px
   ========================================= */
/* 
   | Class                   | Mobile (≤ 767px) | Tablet (768px – 1023px) | Desktop (1024px – 1439px) | Desktop LG (≥ 1440px) |
| ----------------------- | ---------------: | ----------------------: | ------------------------: | --------------------: |
| `.ux4g-container`       |             100% |                   720px |                    1140px |                1320px |
| `.ux4g-container-sm`    |             100% |                   720px |                    1140px |                1320px |
| `.ux4g-container-md`    |             100% |                   720px |                    1140px |                1320px |
| `.ux4g-container-lg`    |             100% |                    100% |                    1140px |                1320px |
| `.ux4g-container-fluid` |             100% |                    100% |                      100% |                  100% | */



/* ─── Shared Base (All Containers) ─── */

.ux4g-container,
.ux4g-container-fluid,
.ux4g-container-sm,
.ux4g-container-md,
.ux4g-container-lg {
  width: 100%;
  padding-right: var(--ux4g-container-padding-x, 12px);
  padding-left: var(--ux4g-container-padding-x, 12px);
  margin-right: auto;
  margin-left: auto;
}


/* ─── Fluid Container ───
   Always occupies the full available width.
*/

.ux4g-container-fluid {
  max-width: 100%;
}


/* ─── Desktop Base: 1024px – 1439px ───
   Default constrained container width.
*/

.ux4g-container,
.ux4g-container-sm,
.ux4g-container-md,
.ux4g-container-lg {
  max-width: var(--ux4g-container-lg-base, 1140px);
}


/* ─── Desktop Large: ≥ 1440px ───
   Expands container to 1320px.
*/

@media (min-width: 1440px) {
  .ux4g-container,
  .ux4g-container-sm,
  .ux4g-container-md,
  .ux4g-container-lg {
    max-width: var(--ux4g-container-lg-large, 1320px);
  }
}


/* ─── Tablet: 768px – 1023px ───
   Standard containers are constrained to 720px.
   Large container remains fluid.
*/

@media (min-width: 768px) and (max-width: 1023px) {
  .ux4g-container,
  .ux4g-container-sm,
  .ux4g-container-md {
    max-width: var(--ux4g-container-md, 720px);
  }

  .ux4g-container-lg {
    max-width: 100%;
  }
}


/* ─── Mobile: ≤ 767px ───
   All containers become fluid.
*/

@media (max-width: 767px) {
  .ux4g-container,
  .ux4g-container-sm,
  .ux4g-container-md,
  .ux4g-container-lg {
    max-width: 100%;
  }
}
/* =========================================
   UX4G GRID SYSTEM
   1. Grid Base
   2. Grid Columns
   3. Grid Rows
   4. Auto Rows
   5. Span Utilities
   6. Alignment
   7. Auto Fit (Responsive Layout)
========================================= */


/* =========================================
   1. GRID BASE
========================================= */
.ux4g-grid,
.ux4g-d-grid { 
   display: grid;
}
 
.ux4g-inline-grid { display: inline-grid; }



/* =========================================
   2. GRID COLUMNS (STRUCTURE)
========================================= */
.ux4g-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
.ux4g-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
.ux4g-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
.ux4g-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
.ux4g-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
.ux4g-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
.ux4g-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
.ux4g-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
.ux4g-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
.ux4g-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
.ux4g-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
.ux4g-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

.ux4g-grid-cols-none     { grid-template-columns: none; }
.ux4g-grid-cols-subgrid  { grid-template-columns: subgrid; }


/* =========================================
   3. GRID ROWS (STRUCTURE)
========================================= */
.ux4g-grid-rows-1  { grid-template-rows: repeat(1, 1fr); }
.ux4g-grid-rows-2  { grid-template-rows: repeat(2, 1fr); }
.ux4g-grid-rows-3  { grid-template-rows: repeat(3, 1fr); }
.ux4g-grid-rows-4  { grid-template-rows: repeat(4, 1fr); }
.ux4g-grid-rows-5  { grid-template-rows: repeat(5, 1fr); }
.ux4g-grid-rows-6  { grid-template-rows: repeat(6, 1fr); }
.ux4g-grid-rows-7  { grid-template-rows: repeat(7, 1fr); }
.ux4g-grid-rows-8  { grid-template-rows: repeat(8, 1fr); }
.ux4g-grid-rows-9  { grid-template-rows: repeat(9, 1fr); }
.ux4g-grid-rows-10 { grid-template-rows: repeat(10, 1fr); }
.ux4g-grid-rows-11 { grid-template-rows: repeat(11, 1fr); }
.ux4g-grid-rows-12 { grid-template-rows: repeat(12, 1fr); }

.ux4g-grid-rows-none     { grid-template-rows: none; }
.ux4g-grid-rows-subgrid  { grid-template-rows: subgrid; }


/* =========================================
   4. AUTO ROWS (DYNAMIC BEHAVIOR)
========================================= */
.ux4g-auto-rows-auto { grid-auto-rows: auto; }
.ux4g-auto-rows-min  { grid-auto-rows: min-content; }
.ux4g-auto-rows-max  { grid-auto-rows: max-content; }
.ux4g-auto-rows-fr   { grid-auto-rows: 1fr; }


/* =========================================
   5. SPAN UTILITIES (PLACEMENT)
========================================= */

/* Column Span */
.ux4g-span-1  { grid-column: span 1; }
.ux4g-span-2  { grid-column: span 2; }
.ux4g-span-3  { grid-column: span 3; }
.ux4g-span-4  { grid-column: span 4; }
.ux4g-span-5  { grid-column: span 5; }
.ux4g-span-6  { grid-column: span 6; }
.ux4g-span-12 { grid-column: span 12; }

/* Row Span */
.ux4g-row-span-1 { grid-row: span 1; }
.ux4g-row-span-2 { grid-row: span 2; }
.ux4g-row-span-3 { grid-row: span 3; }


/* =========================================
   6. ALIGNMENT (LAYOUT CONTROL)
========================================= */
.ux4g-place-items-center { place-items: center; }
.ux4g-place-items-start  { place-items: start; }
.ux4g-place-items-end    { place-items: end; }

.ux4g-justify-items-center { justify-items: center; }
.ux4g-align-items-center   { align-items: center; }


/* =========================================
   7. AUTO FIT (RESPONSIVE GRID)
========================================= */
.ux4g-grid-auto-fit-200 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.ux4g-grid-auto-fit-250 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.ux4g-grid-auto-fit-300 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.ux4g-grid-auto-fit-400 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}
/* =========================================
   UX4G RESPONSIVE GRID SYSTEM
   Breakpoints:
     Mobile (sm): 320px – 767px
     Tablet (md): 768px – 1023px
     Desktop (base): 1024px – 1439px
     (Desktop LARGE) (lg): 1440px – 1920px
========================================= */


/* =========================================
   LG 1440px – 1920px (Desktop LG)
========================================= */
@media (min-width: 1440px) {

  /* Grid Columns */
  .ux4g-lg-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
  .ux4g-lg-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
  .ux4g-lg-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
  .ux4g-lg-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
  .ux4g-lg-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
  .ux4g-lg-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
  .ux4g-lg-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
  .ux4g-lg-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
  .ux4g-lg-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
  .ux4g-lg-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
  .ux4g-lg-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
  .ux4g-lg-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

  /* Grid Rows */
  .ux4g-lg-grid-rows-1 { grid-template-rows: repeat(1, 1fr); }
  .ux4g-lg-grid-rows-2 { grid-template-rows: repeat(2, 1fr); }
  .ux4g-lg-grid-rows-3 { grid-template-rows: repeat(3, 1fr); }
  .ux4g-lg-grid-rows-4 { grid-template-rows: repeat(4, 1fr); }

  /* Column Span */
  .ux4g-lg-span-1  { grid-column: span 1; }
  .ux4g-lg-span-2  { grid-column: span 2; }
  .ux4g-lg-span-3  { grid-column: span 3; }
  .ux4g-lg-span-4  { grid-column: span 4; }
  .ux4g-lg-span-5  { grid-column: span 5; }
  .ux4g-lg-span-6  { grid-column: span 6; }
  .ux4g-lg-span-7  { grid-column: span 7; }
  .ux4g-lg-span-8  { grid-column: span 8; }
  .ux4g-lg-span-9  { grid-column: span 9; }
  .ux4g-lg-span-10 { grid-column: span 10; }
  .ux4g-lg-span-11 { grid-column: span 11; }
  .ux4g-lg-span-12 { grid-column: span 12; }

  /* Row Span */
  .ux4g-lg-row-span-1 { grid-row: span 1; }
  .ux4g-lg-row-span-2 { grid-row: span 2; }
  .ux4g-lg-row-span-3 { grid-row: span 3; }

  /* Alignment */
  .ux4g-lg-place-items-center { place-items: center; }
  .ux4g-lg-place-items-start { place-items: start; }
  .ux4g-lg-place-items-end { place-items: end; }
}


/* =========================================
   MD 768px – 1023px (Tablet)
========================================= */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Grid Columns */
  .ux4g-md-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
  .ux4g-md-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
  .ux4g-md-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
  .ux4g-md-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
  .ux4g-md-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
  .ux4g-md-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
  .ux4g-md-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
  .ux4g-md-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
  .ux4g-md-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
  .ux4g-md-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
  .ux4g-md-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
  .ux4g-md-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

  /* Grid Rows */
  .ux4g-md-grid-rows-1 { grid-template-rows: repeat(1, 1fr); }
  .ux4g-md-grid-rows-2 { grid-template-rows: repeat(2, 1fr); }
  .ux4g-md-grid-rows-3 { grid-template-rows: repeat(3, 1fr); }
  .ux4g-md-grid-rows-4 { grid-template-rows: repeat(4, 1fr); }

  /* Column Span */
  .ux4g-md-span-1  { grid-column: span 1; }
  .ux4g-md-span-2  { grid-column: span 2; }
  .ux4g-md-span-3  { grid-column: span 3; }
  .ux4g-md-span-4  { grid-column: span 4; }
  .ux4g-md-span-5  { grid-column: span 5; }
  .ux4g-md-span-6  { grid-column: span 6; }
  .ux4g-md-span-7  { grid-column: span 7; }
  .ux4g-md-span-8  { grid-column: span 8; }
  .ux4g-md-span-9  { grid-column: span 9; }
  .ux4g-md-span-10 { grid-column: span 10; }
  .ux4g-md-span-11 { grid-column: span 11; }
  .ux4g-md-span-12 { grid-column: span 12; }

  /* Row Span */
  .ux4g-md-row-span-1 { grid-row: span 1; }
  .ux4g-md-row-span-2 { grid-row: span 2; }
  .ux4g-md-row-span-3 { grid-row: span 3; }

  /* Alignment */
  .ux4g-md-place-items-center { place-items: center; }
  .ux4g-md-place-items-start { place-items: start; }
  .ux4g-md-place-items-end { place-items: end; }
}


/* =========================================
   SM 320px – 767px (Mobile)
========================================= */
@media (min-width: 320px) and (max-width: 767px) {

  /* Grid Columns */
  .ux4g-sm-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
  .ux4g-sm-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
  .ux4g-sm-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
  .ux4g-sm-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
  .ux4g-sm-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
  .ux4g-sm-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
  .ux4g-sm-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
  .ux4g-sm-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
  .ux4g-sm-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
  .ux4g-sm-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
  .ux4g-sm-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
  .ux4g-sm-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

  /* Grid Rows */
  .ux4g-sm-grid-rows-1 { grid-template-rows: repeat(1, 1fr); }
  .ux4g-sm-grid-rows-2 { grid-template-rows: repeat(2, 1fr); }
  .ux4g-sm-grid-rows-3 { grid-template-rows: repeat(3, 1fr); }
  .ux4g-sm-grid-rows-4 { grid-template-rows: repeat(4, 1fr); }

  /* Column Span */
  .ux4g-sm-span-1  { grid-column: span 1; }
  .ux4g-sm-span-2  { grid-column: span 2; }
  .ux4g-sm-span-3  { grid-column: span 3; }
  .ux4g-sm-span-4  { grid-column: span 4; }
  .ux4g-sm-span-5  { grid-column: span 5; }
  .ux4g-sm-span-6  { grid-column: span 6; }
  .ux4g-sm-span-7  { grid-column: span 7; }
  .ux4g-sm-span-8  { grid-column: span 8; }
  .ux4g-sm-span-9  { grid-column: span 9; }
  .ux4g-sm-span-10 { grid-column: span 10; }
  .ux4g-sm-span-11 { grid-column: span 11; }
  .ux4g-sm-span-12 { grid-column: span 12; }

  /* Row Span */
  .ux4g-sm-row-span-1 { grid-row: span 1; }
  .ux4g-sm-row-span-2 { grid-row: span 2; }
  .ux4g-sm-row-span-3 { grid-row: span 3; }

  /* Alignment */
  .ux4g-sm-place-items-center { place-items: center; }
  .ux4g-sm-place-items-start { place-items: start; }
  .ux4g-sm-place-items-end { place-items: end; }
}

/* =========================================
   UX4G FLEX GRID SYSTEM (12-Column)
   Approach: Desktop-first
   Breakpoints:
     Desktop (base): 1024px – 1439px (no query)
     Desktop LG (lg): ≥ 1440px
     Tablet (md): ≤ 1023px
     Mobile (sm): ≤ 767px
========================================= */

.ux4g-row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--ux4g-gutter-x, var(--ux4g-space-6)) * -0.5);
  margin-block: calc(var(--ux4g-gutter-y, 0) * -1);
}

.ux4g-row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-inline: calc(var(--ux4g-gutter-x, var(--ux4g-space-6)) * 0.5);
  padding-block: var(--ux4g-gutter-y, 0);
}

/* Base Columns (Desktop default) */
.ux4g-col { flex: 1 0 0%; min-width: 0; }
.ux4g-col-auto { flex: 0 0 auto; width: auto; }
.ux4g-col-1  { flex: 0 0 auto; width: 8.33333333%; }
.ux4g-col-2  { flex: 0 0 auto; width: 16.66666667%; }
.ux4g-col-3  { flex: 0 0 auto; width: 25%; }
.ux4g-col-4  { flex: 0 0 auto; width: 33.33333333%; }
.ux4g-col-5  { flex: 0 0 auto; width: 41.66666667%; }
.ux4g-col-6  { flex: 0 0 auto; width: 50%; }
.ux4g-col-7  { flex: 0 0 auto; width: 58.33333333%; }
.ux4g-col-8  { flex: 0 0 auto; width: 66.66666667%; }
.ux4g-col-9  { flex: 0 0 auto; width: 75%; }
.ux4g-col-10 { flex: 0 0 auto; width: 83.33333333%; }
.ux4g-col-11 { flex: 0 0 auto; width: 91.66666667%; }
.ux4g-col-12 { flex: 0 0 auto; width: 100%; }

/* Offsets */
.ux4g-offset-0  { margin-inline-start: 0; }
.ux4g-offset-1  { margin-inline-start: 8.33333333%; }
.ux4g-offset-2  { margin-inline-start: 16.66666667%; }
.ux4g-offset-3  { margin-inline-start: 25%; }
.ux4g-offset-4  { margin-inline-start: 33.33333333%; }
.ux4g-offset-5  { margin-inline-start: 41.66666667%; }
.ux4g-offset-6  { margin-inline-start: 50%; }
.ux4g-offset-7  { margin-inline-start: 58.33333333%; }
.ux4g-offset-8  { margin-inline-start: 66.66666667%; }
.ux4g-offset-9  { margin-inline-start: 75%; }
.ux4g-offset-10 { margin-inline-start: 83.33333333%; }
.ux4g-offset-11 { margin-inline-start: 91.66666667%; }

/* Row Columns */
.ux4g-row-cols-1 > * { flex: 0 0 auto; width: 100%; }
.ux4g-row-cols-2 > * { flex: 0 0 auto; width: 50%; }
.ux4g-row-cols-3 > * { flex: 0 0 auto; width: 33.33333333%; }
.ux4g-row-cols-4 > * { flex: 0 0 auto; width: 25%; }
.ux4g-row-cols-5 > * { flex: 0 0 auto; width: 20%; }
.ux4g-row-cols-6 > * { flex: 0 0 auto; width: 16.66666667%; }

/* =========================================
   UX4G GUTTER SYSTEM
========================================= */

.ux4g-gutter-none {
  --ux4g-gutter-x: 0px;
  --ux4g-gutter-y: 0px;
}

.ux4g-gutter-xs {
  --ux4g-gutter-x: var(--ux4g-space-4, 8px);
  --ux4g-gutter-y: var(--ux4g-space-4, 8px);
}

.ux4g-gutter-s {
  --ux4g-gutter-x: var(--ux4g-space-5, 12px);
  --ux4g-gutter-y: var(--ux4g-space-5, 12px);
}

.ux4g-gutter-m {
  --ux4g-gutter-x: var(--ux4g-space-6, 16px);
  --ux4g-gutter-y: var(--ux4g-space-6, 16px);
}

.ux4g-gutter-l {
  --ux4g-gutter-x: var(--ux4g-space-8, 24px);
  --ux4g-gutter-y: var(--ux4g-space-8, 24px);
}

.ux4g-gutter-xl {
  --ux4g-gutter-x: var(--ux4g-space-10, 40px);
  --ux4g-gutter-y: var(--ux4g-space-10, 40px);
}

/* =========================================
   LG 1440px – 1920px (Desktop LG)
========================================= */
@media (min-width: 1440px) {
  .ux4g-lg-col { flex: 1 0 0%; }
  .ux4g-lg-col-auto { flex: 0 0 auto; width: auto; }
  .ux4g-lg-col-1  { flex: 0 0 auto; width: 8.33333333%; }
  .ux4g-lg-col-2  { flex: 0 0 auto; width: 16.66666667%; }
  .ux4g-lg-col-3  { flex: 0 0 auto; width: 25%; }
  .ux4g-lg-col-4  { flex: 0 0 auto; width: 33.33333333%; }
  .ux4g-lg-col-5  { flex: 0 0 auto; width: 41.66666667%; }
  .ux4g-lg-col-6  { flex: 0 0 auto; width: 50%; }
  .ux4g-lg-col-7  { flex: 0 0 auto; width: 58.33333333%; }
  .ux4g-lg-col-8  { flex: 0 0 auto; width: 66.66666667%; }
  .ux4g-lg-col-9  { flex: 0 0 auto; width: 75%; }
  .ux4g-lg-col-10 { flex: 0 0 auto; width: 83.33333333%; }
  .ux4g-lg-col-11 { flex: 0 0 auto; width: 91.66666667%; }
  .ux4g-lg-col-12 { flex: 0 0 auto; width: 100%; }

  .ux4g-lg-offset-0  { margin-inline-start: 0; }
  .ux4g-lg-offset-1  { margin-inline-start: 8.33333333%; }
  .ux4g-lg-offset-2  { margin-inline-start: 16.66666667%; }
  .ux4g-lg-offset-3  { margin-inline-start: 25%; }
  .ux4g-lg-offset-4  { margin-inline-start: 33.33333333%; }
  .ux4g-lg-offset-5  { margin-inline-start: 41.66666667%; }
  .ux4g-lg-offset-6  { margin-inline-start: 50%; }
  .ux4g-lg-offset-7  { margin-inline-start: 58.33333333%; }
  .ux4g-lg-offset-8  { margin-inline-start: 66.66666667%; }
  .ux4g-lg-offset-9  { margin-inline-start: 75%; }
  .ux4g-lg-offset-10 { margin-inline-start: 83.33333333%; }
  .ux4g-lg-offset-11 { margin-inline-start: 91.66666667%; }

  .ux4g-lg-row-cols-1 > * { flex: 0 0 auto; width: 100%; }
  .ux4g-lg-row-cols-2 > * { flex: 0 0 auto; width: 50%; }
  .ux4g-lg-row-cols-3 > * { flex: 0 0 auto; width: 33.33333333%; }
  .ux4g-lg-row-cols-4 > * { flex: 0 0 auto; width: 25%; }
  .ux4g-lg-row-cols-5 > * { flex: 0 0 auto; width: 20%; }
  .ux4g-lg-row-cols-6 > * { flex: 0 0 auto; width: 16.66666667%; }
}

/* =========================================
   MD 768px – 1023px (Tablet)
========================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .ux4g-md-col { flex: 1 0 0%; }
  .ux4g-md-col-auto { flex: 0 0 auto; width: auto; }
  .ux4g-md-col-1  { flex: 0 0 auto; width: 8.33333333%; }
  .ux4g-md-col-2  { flex: 0 0 auto; width: 16.66666667%; }
  .ux4g-md-col-3  { flex: 0 0 auto; width: 25%; }
  .ux4g-md-col-4  { flex: 0 0 auto; width: 33.33333333%; }
  .ux4g-md-col-5  { flex: 0 0 auto; width: 41.66666667%; }
  .ux4g-md-col-6  { flex: 0 0 auto; width: 50%; }
  .ux4g-md-col-7  { flex: 0 0 auto; width: 58.33333333%; }
  .ux4g-md-col-8  { flex: 0 0 auto; width: 66.66666667%; }
  .ux4g-md-col-9  { flex: 0 0 auto; width: 75%; }
  .ux4g-md-col-10 { flex: 0 0 auto; width: 83.33333333%; }
  .ux4g-md-col-11 { flex: 0 0 auto; width: 91.66666667%; }
  .ux4g-md-col-12 { flex: 0 0 auto; width: 100%; }

  .ux4g-md-offset-0  { margin-inline-start: 0; }
  .ux4g-md-offset-1  { margin-inline-start: 8.33333333%; }
  .ux4g-md-offset-2  { margin-inline-start: 16.66666667%; }
  .ux4g-md-offset-3  { margin-inline-start: 25%; }
  .ux4g-md-offset-4  { margin-inline-start: 33.33333333%; }
  .ux4g-md-offset-5  { margin-inline-start: 41.66666667%; }
  .ux4g-md-offset-6  { margin-inline-start: 50%; }
  .ux4g-md-offset-7  { margin-inline-start: 58.33333333%; }
  .ux4g-md-offset-8  { margin-inline-start: 66.66666667%; }
  .ux4g-md-offset-9  { margin-inline-start: 75%; }
  .ux4g-md-offset-10 { margin-inline-start: 83.33333333%; }
  .ux4g-md-offset-11 { margin-inline-start: 91.66666667%; }

  .ux4g-md-row-cols-1 > * { flex: 0 0 auto; width: 100%; }
  .ux4g-md-row-cols-2 > * { flex: 0 0 auto; width: 50%; }
  .ux4g-md-row-cols-3 > * { flex: 0 0 auto; width: 33.33333333%; }
  .ux4g-md-row-cols-4 > * { flex: 0 0 auto; width: 25%; }
  .ux4g-md-row-cols-5 > * { flex: 0 0 auto; width: 20%; }
  .ux4g-md-row-cols-6 > * { flex: 0 0 auto; width: 16.66666667%; }
}

/* =========================================
   SM 320px – 767px (Mobile)
========================================= */
@media (min-width: 320px) and (max-width: 767px) {
  .ux4g-sm-col { flex: 1 0 0%; }
  .ux4g-sm-col-auto { flex: 0 0 auto; width: auto; }
  .ux4g-sm-col-1  { flex: 0 0 auto; width: 8.33333333%; }
  .ux4g-sm-col-2  { flex: 0 0 auto; width: 16.66666667%; }
  .ux4g-sm-col-3  { flex: 0 0 auto; width: 25%; }
  .ux4g-sm-col-4  { flex: 0 0 auto; width: 33.33333333%; }
  .ux4g-sm-col-5  { flex: 0 0 auto; width: 41.66666667%; }
  .ux4g-sm-col-6  { flex: 0 0 auto; width: 50%; }
  .ux4g-sm-col-7  { flex: 0 0 auto; width: 58.33333333%; }
  .ux4g-sm-col-8  { flex: 0 0 auto; width: 66.66666667%; }
  .ux4g-sm-col-9  { flex: 0 0 auto; width: 75%; }
  .ux4g-sm-col-10 { flex: 0 0 auto; width: 83.33333333%; }
  .ux4g-sm-col-11 { flex: 0 0 auto; width: 91.66666667%; }
  .ux4g-sm-col-12 { flex: 0 0 auto; width: 100%; }

  .ux4g-sm-offset-0  { margin-inline-start: 0; }
  .ux4g-sm-offset-1  { margin-inline-start: 8.33333333%; }
  .ux4g-sm-offset-2  { margin-inline-start: 16.66666667%; }
  .ux4g-sm-offset-3  { margin-inline-start: 25%; }
  .ux4g-sm-offset-4  { margin-inline-start: 33.33333333%; }
  .ux4g-sm-offset-5  { margin-inline-start: 41.66666667%; }
  .ux4g-sm-offset-6  { margin-inline-start: 50%; }
  .ux4g-sm-offset-7  { margin-inline-start: 58.33333333%; }
  .ux4g-sm-offset-8  { margin-inline-start: 66.66666667%; }
  .ux4g-sm-offset-9  { margin-inline-start: 75%; }
  .ux4g-sm-offset-10 { margin-inline-start: 83.33333333%; }
  .ux4g-sm-offset-11 { margin-inline-start: 91.66666667%; }

  .ux4g-sm-row-cols-1 > * { flex: 0 0 auto; width: 100%; }
  .ux4g-sm-row-cols-2 > * { flex: 0 0 auto; width: 50%; }
  .ux4g-sm-row-cols-3 > * { flex: 0 0 auto; width: 33.33333333%; }
  .ux4g-sm-row-cols-4 > * { flex: 0 0 auto; width: 25%; }
  .ux4g-sm-row-cols-5 > * { flex: 0 0 auto; width: 20%; }
  .ux4g-sm-row-cols-6 > * { flex: 0 0 auto; width: 16.66666667%; }
}

}


/* 3. Components */
@layer ux4g-components {
/* ================= Base Alert ================= */
.ux4g-alert {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-l);
  width: 100%;
  min-height: 48px;
  padding: var(--ux4g-padding-s) var(--ux4g-padding-2xl);
  box-sizing: border-box;
}

/* ================= Status Variables ================= */
.ux4g-alert-info {
  --ux4g-alert-bg: var(--ux4g-bg-info-soft);
  --ux4g-alert-text: var(--ux4g-text-info-default);
}

.ux4g-alert-success {
  --ux4g-alert-bg: var(--ux4g-bg-success-soft);
  --ux4g-alert-text: var(--ux4g-text-success-default);
}

.ux4g-alert-warning {
  --ux4g-alert-bg: var(--ux4g-bg-warning-soft);
  --ux4g-alert-text: var(--ux4g-text-warning-default);
}

.ux4g-alert-error {
  --ux4g-alert-bg: var(--ux4g-bg-error-soft);
  --ux4g-alert-text: var(--ux4g-text-error-default);
}

.ux4g-alert-info,
.ux4g-alert-success,
.ux4g-alert-warning,
.ux4g-alert-error {
  background-color: var(--ux4g-alert-bg);
  color: var(--ux4g-alert-text);
}

/* ================= Icon ================= */
.ux4g-alert-icon {
  --ux4g-icon-size: var(--ux4g-fs-20);
  --ux4g-icon-width: var(--ux4g-fs-20);
  --ux4g-icon-height: var(--ux4g-fs-20);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

/* ================= Content ================= */
.ux4g-alert-content {
  display: flex;
  align-items: baseline;
  gap: var(--ux4g-inline-xs);
  flex: 1;
  min-width: 0;
}

/* ================= Typography ================= */
.ux4g-alert-title,
.ux4g-alert-message,
.ux4g-alert-link,
.ux4g-alert-progress-text {
  font-size: var(--ux4g-fs-current);
  line-height: var(--ux4g-lh-current);
  font-weight: var(--ux4g-fw-current);
  font-family: var(--ux4g-ff-current, var(--ux4g-ff));
}

.ux4g-alert-title {
  color: var(--ux4g-text-neutral-primary);
  --ux4g-fs-current: var(--ux4g-fs-16);
  --ux4g-lh-current: var(--ux4g-lh-20);
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

.ux4g-alert-message {
  color: var(--ux4g-text-neutral-secondary);
  --ux4g-fs-current: var(--ux4g-fs-14);
  --ux4g-lh-current: var(--ux4g-lh-22, 22px);
  --ux4g-fw-current: var(--ux4g-fw-regular);
}

.ux4g-alert-link {
  color: var(--ux4g-text-brand-primary-default);
  text-decoration: none;
  --ux4g-fs-current: var(--ux4g-fs-16, 16px);
  --ux4g-lh-current: var(--ux4g-lh-20, 20px);
  --ux4g-fw-current: var(--ux4g-fw-medium);
  white-space: nowrap;
}

.ux4g-alert-link:hover {
  text-decoration: none;
}

/* ================= Actions ================= */
.ux4g-alert-actions {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-l);
  flex-shrink: 0;
  margin-left: auto;
}

/* ================= Close Button ================= */
.ux4g-alert-close {
  background: none;
  border: var(--ux4g-border-width-none);
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.ux4g-alert-close .ux4g-icon {
  --ux4g-icon-size: var(--ux4g-fs-24, 24px);
  --ux4g-icon-color: var(--ux4g-text-neutral-primary, #171717);
  color: var(--ux4g-text-neutral-primary);
  --ux4g-icon-width: var(--ux4g-fs-24, 24px);
  --ux4g-icon-height: var(--ux4g-fs-24, 24px);
}

/* ================= Center Layout ================= */
.ux4g-alert-center {
  position: var(--ux4g-pos-relative) !important;
}

.ux4g-alert-center .ux4g-alert-content {
  justify-content: center;
  text-align: var(--ux4g-ta-center);
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-inline-m);
}

.ux4g-alert-center .ux4g-alert-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-inline-xs);
  margin-left: 0;
}

.ux4g-alert-center .ux4g-alert-close {
  position: var(--ux4g-pos-absolute);
  right: var(--ux4g-padding-2xl);
  top: var(--ux4g-pos-top-50);
  transform: var(--ux4g-pos-translate-middle-y);
}

.ux4g-alert-center .ux4g-alert-icon {
  margin-right: calc(var(--ux4g-inline-xs) * -1);
}

/* ================= Wide & Narrow ================= */
.ux4g-alert-wide {
  position: var(--ux4g-pos-relative);
  justify-content: space-between;
  align-items: center;
  gap: var(--ux4g-inline-l);
  padding-block: var(--ux4g-padding-s);
}

.ux4g-alert-wide .ux4g-alert-content {
  justify-content: flex-start;
  text-align: var(--ux4g-ta-start);
}

.ux4g-alert-wide {
  padding-left: 8.333333%;
}

.ux4g-alert-wide .ux4g-alert-link {
  padding-right: 0;
}

.ux4g-alert-wide .ux4g-alert-close,
.ux4g-alert-narrow .ux4g-alert-close {
  position: var(--ux4g-pos-absolute);
  right: var(--ux4g-padding-2xl, 32px);
  top: var(--ux4g-pos-top-50);
  transform: var(--ux4g-pos-translate-middle-y);
}

.ux4g-alert-wide .ux4g-alert-actions,
.ux4g-alert-narrow .ux4g-alert-actions {
  padding-right: 0;
}

.ux4g-alert-narrow {
  position: var(--ux4g-pos-relative);
  padding-inline: 25%;
}



/* ================= Mobile Responsive ================= */
@media (max-width: 767px) {

  .ux4g-alert:not(.ux4g-alert-center) {
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: var(--ux4g-inline-s, 8px);
    row-gap: 0;
    padding: var(--ux4g-padding-s) var(--ux4g-padding-m);
    position: var(--ux4g-pos-relative);
  }

  .ux4g-alert:not(.ux4g-alert-center) .ux4g-alert-content {
    flex: 1 1 calc(100% - var(--ux4g-padding-2xl));
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ux4g-inline-s, 8px);
  }

  .ux4g-alert:not(.ux4g-alert-center) .ux4g-alert-actions {
    flex: 1 1 100%;
    padding-left: calc(var(--ux4g-fs-20, 20px) + var(--ux4g-inline-s, 8px));
    justify-content: flex-start;
    margin-top: var(--ux4g-stack-xs);
  }

  .ux4g-alert:not(.ux4g-alert-center) .ux4g-alert-close {
    position: var(--ux4g-pos-absolute);
    top: var(--ux4g-padding-s);
    right: var(--ux4g-padding-m, 16px);
  }

  .ux4g-alert-center {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: var(--ux4g-ta-center);
    padding: var(--ux4g-padding-s) var(--ux4g-padding-m);
  }

  .ux4g-alert-center .ux4g-alert-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--ux4g-inline-s, 8px);
    width: 100%;
  }

  .ux4g-alert-center .ux4g-alert-icon {
    order: 1;
    margin-right: 0;
  }

  .ux4g-alert-center .ux4g-alert-title {
    order: 2;
  }

  .ux4g-alert-center .ux4g-alert-message {
    order: 3;
    flex: 1 1 100%;
    text-align: var(--ux4g-ta-center);
    margin-top: 0;
  }

  .ux4g-alert-center .ux4g-alert-link {
    order: 4;
    flex: 1 1 100%;
    text-align: var(--ux4g-ta-center);
    margin-top: 0;
    white-space: normal;
  }

  .ux4g-alert-center .ux4g-alert-close {
    position: var(--ux4g-pos-absolute);
    top: var(--ux4g-padding-s);
    right: var(--ux4g-padding-m);
    transform: none;
  }
}

/* ================= Context Alert (Grid Layout) ================= */
.ux4g-context-alert {
  position: var(--ux4g-pos-relative);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon title actions"
    ". message message";
  column-gap: var(--ux4g-inline-s, 8px);
  row-gap: var(--ux4g-stack-xs);
  padding: var(--ux4g-padding-xl, 24px) var(--ux4g-padding-m, 16px);
  width: min(560px, 100%);
  min-width: min(280px, 100%);
  max-width: 800px;
  border-radius: var(--ux4g-radius-md);
  background: var(--ux4g-bg-neutral-elevated, #FFF);
  box-shadow: var(--ux4g-shadow-l3);
  box-sizing: border-box;
  align-items: flex-start;
}

/* Context Alert Dynamic Color states handled by .ux4g-alert-* variables */
.ux4g-context-alert.ux4g-alert-info,
.ux4g-context-alert.ux4g-alert-success,
.ux4g-context-alert.ux4g-alert-warning,
.ux4g-context-alert.ux4g-alert-error {
  background-color: var(--ux4g-bg-neutral-elevated, #FFF);
  /* Keep white background for toasts */
  color: var(--ux4g-alert-text);
}

.ux4g-context-alert .ux4g-alert-icon {
  grid-area: icon;
  --ux4g-icon-size: var(--ux4g-fs-24, 24px);
  --ux4g-icon-width: var(--ux4g-fs-24, 24px);
  --ux4g-icon-height: var(--ux4g-fs-24, 24px);
  margin-top: 0;
}

.ux4g-context-alert .ux4g-alert-title {
  grid-area: title;
  --ux4g-lh-current: var(--ux4g-lh-20, 20px);
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

.ux4g-context-alert .ux4g-alert-message {
  grid-area: message;
  --ux4g-fs-current: var(--ux4g-fs-16, 16px);
  --ux4g-lh-current: var(--ux4g-lh-24, 24px);
}

.ux4g-context-alert .ux4g-alert-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-l);
  margin-left: 0;
}

.ux4g-context-alert .ux4g-alert-close .ux4g-icon {
  --ux4g-icon-size: var(--ux4g-fs-24, 24px);
  --ux4g-icon-width: var(--ux4g-fs-24, 24px);
  --ux4g-icon-height: var(--ux4g-fs-24, 24px);
  --ux4g-icon-color: var(--ux4g-text-neutral-primary, #171717);
  color: var(--ux4g-text-neutral-primary, #171717);
}

.ux4g-context-alert .ux4g-alert-link {
  --ux4g-fs-current: var(--ux4g-fs-16, 16px);
  --ux4g-lh-current: var(--ux4g-lh-20, 20px);
}

/* Specificity fix for absolute positioning if desired, but grid-area is more stable */
.ux4g-context-alert .ux4g-alert-actions:not([style*="position: absolute"]) {
  position: var(--ux4g-pos-static);
}

/* Handle grid with progress and footer */
.ux4g-context-alert:has(.ux4g-alert-progress-wrapper),
.ux4g-context-alert:has(.ux4g-alert-footer) {
  grid-template-areas:
    "icon title actions"
    ". message message"
    ". progress progress"
    ". footer footer";
}

@media (max-width: 767px) {
  .ux4g-alert-container {
    left: var(--ux4g-padding-s) !important;
    right: var(--ux4g-padding-s) !important;
    width: auto;
    max-width: none;
  }

  .ux4g-alert-wide,
  .ux4g-alert-narrow {
    padding-inline: var(--ux4g-padding-m, 16px);
  }

  .ux4g-alert-container > .ux4g-context-alert {
    width: 100%;
  }

  .ux4g-context-alert {
    position: relative;
    width: 100%;
    min-width: 0;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      ". actions"
      ". message";
    column-gap: var(--ux4g-inline-s, 8px);
    row-gap: var(--ux4g-stack-xs, 8px);
    padding: var(--ux4g-padding-m, 16px);
  }

  .ux4g-context-alert:has(.ux4g-alert-progress-wrapper),
  .ux4g-context-alert:has(.ux4g-alert-footer) {
    grid-template-areas:
      "icon title"
      ". actions"
      ". message"
      ". progress"
      ". footer";
  }

  .ux4g-context-alert .ux4g-alert-title {
    padding-right: calc(var(--ux4g-fs-24, 24px) + var(--ux4g-inline-s, 8px));
  }

  .ux4g-context-alert .ux4g-alert-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m, 12px);
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0;
  }

  .ux4g-context-alert .ux4g-alert-actions:not(:has(p, a)) {
    display: contents;
  }

  .ux4g-context-alert .ux4g-alert-close {
    position: absolute;
    top: var(--ux4g-padding-m, 16px);
    right: var(--ux4g-padding-m, 16px);
    margin: 0;
  }

  .ux4g-context-alert .ux4g-alert-footer {
    flex-wrap: wrap;
    gap: var(--ux4g-inline-m, 16px);
  }
}

/* ================= Alert Progress & Footer ================= */
.ux4g-alert-progress-wrapper {
  grid-area: progress;
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-m);
  width: 100%;
}

.ux4g-context-alert .ux4g-alert-progress-wrapper {
  flex-direction: column;
  align-items: stretch;
  gap: var(--ux4g-inline-xs, 4px);
}

.ux4g-context-alert .ux4g-alert-progress {
  flex: 0 0 var(--ux4g-sz-8, 8px);
  width: 100%;
}

.ux4g-alert-progress {
  height: var(--ux4g-sz-8);
  flex: 1;
  background-color: var(--ux4g-bg-neutral-subtle);
  border-radius: var(--ux4g-radius-md);
  position: var(--ux4g-pos-relative);
  overflow: hidden;
}

.ux4g-alert-progress-inner {
  height: 100%;
  background-color: var(--ux4g-bg-primary-strong);
  border-radius: var(--ux4g-radius-md);
  min-width: var(--ux4g-sz-8);
  transition: width 0.3s ease;
}

.ux4g-alert-progress-text {
  --ux4g-fs-current: var(--ux4g-fs-14);
  --ux4g-lh-current: var(--ux4g-lh-20);
  color: var(--ux4g-text-neutral-secondary);
  min-width: var(--ux4g-sz-32);
  text-align: right;
}

.ux4g-context-alert .ux4g-alert-progress-text {
  --ux4g-fs-current: var(--ux4g-fs-11, 11px);
  --ux4g-lh-current: var(--ux4g-lh-14, 14px);
  align-self: flex-end;
  min-width: 0;
}

.ux4g-alert-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-l);
  margin-block-start: var(--ux4g-stack-xs);
}

.ux4g-context-alert .ux4g-alert-footer {
  gap: var(--ux4g-space-8, 24px);
  margin-block-start: 0;
  padding-block: var(--ux4g-stack-xs, 8px);
}

/* ================= Alert Position Containers ================= */
.ux4g-alert-container {
  position: var(--ux4g-pos-fixed);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-padding-m);
  pointer-events: none;
  width: auto;
}

.ux4g-alert-container>* {
  pointer-events: auto;
}

.ux4g-alert-top-left {
  top: var(--ux4g-padding-xl);
  left: var(--ux4g-padding-xl);
}

.ux4g-alert-top-right {
  top: var(--ux4g-padding-xl);
  right: var(--ux4g-padding-xl);
}

.ux4g-alert-bottom-left {
  bottom: var(--ux4g-padding-xl);
  left: var(--ux4g-padding-xl);
}

.ux4g-alert-bottom-right {
  bottom: var(--ux4g-padding-xl);
  right: var(--ux4g-padding-xl);
}

/* ================= Animations ================= */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.ux4g-animate-left {
  animation: slideInLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ux4g-animate-right {
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* iPad / Tablet Only */
@media (min-width: 768px) and (max-width: 1024px) {
  .ux4g-context-alert {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}
:root {
  --ux4g-badge-border: var(--ux4g-bg-neutral);
  --ux4g-badge-dot: var(--ux4g-sz-8);
  --ux4g-badge-sz: var(--ux4g-sz-18);
  --ux4g-badge-fs: calc(var(--ux4g-badge-sz) / 2);
  --ux4g-badge-ico: calc(var(--ux4g-badge-sz) * 0.65); 
}



[class*="ux4g-badge-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  border-radius: var(--ux4g-radius-full);
  font-family: var(--ux4g-ff);
  font-weight: var(--ux4g-fw-bold);
  text-align: center;
  white-space: nowrap;
  vertical-align: var(--ux4g-va-middle);
  color: var(--ux4g-text-neutral-inverse);
  line-height: 0; 
}

[class*="ux4g-badge-dot-"] {
  width: var(--ux4g-badge-dot);
  height: var(--ux4g-badge-dot);
  min-width: var(--ux4g-badge-dot);
  min-height: var(--ux4g-badge-dot);
  aspect-ratio: 1 / 1;
  box-shadow: 0 0 0 var(--ux4g-border-width-md) var(--ux4g-bg-neutral-elevated) !important;
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
}

[class*="ux4g-badge-icon-"],
[class*="ux4g-badge-digit-"] {
  height: var(--ux4g-badge-sz);
  min-width: var(--ux4g-badge-sz);
  width: auto;
  aspect-ratio: 1 / 1; 
  padding: 0;   
  font-size: var(--ux4g-badge-fs);
  box-shadow: 0 0 0 var(--ux4g-border-width-md) var(--ux4g-bg-neutral-elevated) !important;

}

[class*="ux4g-badge-digit-"] {
  padding: 0 4px; 
  aspect-ratio: auto;
}

[class*="ux4g-badge-icon-"] {
  padding: 0;
  aspect-ratio: 1 / 1;
}

[class*="ux4g-badge-icon-"] > .ux4g-icon,
[class*="ux4g-badge-icon-"] > .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-11) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}

/* Color Variants */
.ux4g-badge-dot-primary, .ux4g-badge-icon-primary, .ux4g-badge-digit-primary { background: var(--ux4g-bg-primary-strong); }
.ux4g-badge-dot-success, .ux4g-badge-icon-success, .ux4g-badge-digit-success { background: var(--ux4g-bg-success-strong); }
.ux4g-badge-dot-warning, .ux4g-badge-icon-warning, .ux4g-badge-digit-warning { background: var(--ux4g-bg-warning-strong); }
.ux4g-badge-dot-danger, .ux4g-badge-icon-danger, .ux4g-badge-digit-danger { background: var(--ux4g-bg-error-strong); }
.ux4g-badge-dot-info, .ux4g-badge-icon-info, .ux4g-badge-digit-info { background: var(--ux4g-bg-info-strong); }
.ux4g-badge-dot-secondary, .ux4g-badge-icon-secondary, .ux4g-badge-digit-secondary { background: var(--ux4g-bg-secondary-strong); }
.ux4g-badge-dot-tertiary, .ux4g-badge-icon-tertiary, .ux4g-badge-digit-tertiary { background: var(--ux4g-bg-tertiary-strong); }
.ux4g-badge-dot-neutral, .ux4g-badge-icon-neutral, .ux4g-badge-digit-neutral { 
  background: var(--ux4g-bg-neutral-subtle); 
  color: var(--ux4g-text-neutral-primary); 
}

/* Badge Size Overrides for Status & Profile Matrix */
.ux4g-badge-s { 
  --ux4g-badge-dot: 10px; 
  --ux4g-badge-sz: 10px; 
  --ux4g-badge-ico: 5px; 
  --ux4g-badge-fs: 5px; 
}
.ux4g-badge-m { 
  --ux4g-badge-dot: 12px; 
  --ux4g-badge-sz: 12px; 
  --ux4g-badge-ico: 6px; 
  --ux4g-badge-fs: 6px; 
}
.ux4g-badge-l { 
  --ux4g-badge-dot: 12px; 
  --ux4g-badge-sz: 12px; 
  --ux4g-badge-ico: 6px; 
  --ux4g-badge-fs: 6px; 
}

.ux4g-badge-profile-l { 
   --ux4g-badge-dot: 14px; 
  --ux4g-badge-sz: 14px; 
  --ux4g-badge-ico: 6px; 
  --ux4g-badge-fs: 6px; 
}
.ux4g-badge-profile-xl { 
  --ux4g-badge-dot: 20px; 
  --ux4g-badge-sz: 20px; 
  --ux4g-badge-ico: 10px; 
  --ux4g-badge-fs: 10px; 
}
.ux4g-badge-profile-2xl { 
  --ux4g-badge-dot: 24px; 
  --ux4g-badge-sz: 24px; 
  --ux4g-badge-ico: 12px; 
  --ux4g-badge-fs: 12px; 
}
.ux4g-badge-profile-3xl { 
  --ux4g-badge-dot: 32px; 
  --ux4g-badge-sz: 32px; 
  --ux4g-badge-ico: 16px; 
  --ux4g-badge-fs: 16px; 
}
/* BASE SPINNER (Token Driven – Default 32px) */
.ux4g-spinner,
[class^="ux4g-spinner-"] {
  --ux4g-spinner-size: var(--ux4g-fs-24);
  --ux4g-spinner-stroke: var(--ux4g-border-thickest, 4px);
  --ux4g-spinner-color-1: var(--Spinner-primary-Color-1);
  --ux4g-spinner-color-2: var(--Spinner-primary-Color-2);

  width: var(--ux4g-spinner-size);
  height: var(--ux4g-spinner-size);
  border-radius: var(--ux4g-radius-full);
  border: var(--ux4g-spinner-stroke) solid transparent;
  display: inline-block;
  box-sizing: border-box;
  animation: ux4g-spinner-rotate .9s linear infinite;
  vertical-align: var(--ux4g-va-middle);
  position: relative;
}



/* COLOR SEMANTICS (Robust Matching) */
[class*="spinner-primary"] {
  --ux4g-spinner-color-1: var(--Spinner-primary-Color-1);
  --ux4g-spinner-color-2: var(--Spinner-primary-Color-2);
}

[class*="spinner-inverse"] {
  --ux4g-spinner-color-1: var(--Spinner-Light-Color-2);
  --ux4g-spinner-color-2: var(--Spinner-Light-Color-1);
}

[class*="spinner-danger"] {
  --ux4g-spinner-color-1: var(--Spinner-danger-Color-1);
  --ux4g-spinner-color-2: var(--Spinner-danger-Color-2);
}

/* [class*="spinner-secondary"] {
  --ux4g-spinner-color-1: var(--Spinner-secondary-Color-1);
  --ux4g-spinner-color-2: var(--Spinner-secondary-Color-2);
}

[class*="spinner-tertiary"] {
  --ux4g-spinner-color-1: var(--Spinner-tertiary-Color-1);
  --ux4g-spinner-color-2: var(--Spinner-tertiary-Color-2);
}

[class*="spinner-success"] {
  --ux4g-spinner-color-1: var(--Spinner-success-Color-1);
  --ux4g-spinner-color-2: var(--Spinner-success-Color-2);
}

[class*="spinner-info"] {
  --ux4g-spinner-color-1: var(--Spinner-info-Color-1);
  --ux4g-spinner-color-2: var(--Spinner-info-Color-2);
}

[class*="spinner-warning"] {
  --ux4g-spinner-color-1: var(--Spinner-warning-Color-1);
  --ux4g-spinner-color-2: var(--Spinner-warning-Color-2);
} */

/* SIZES */
.ux4g-spinner-xl {
  --ux4g-spinner-size: var(--ux4g-fs-40);
}

.ux4g-spinner-lg {
  --ux4g-spinner-size: var(--ux4g-fs-32);
}

.ux4g-spinner-md {
  --ux4g-spinner-size: var(--ux4g-fs-24);
}

.ux4g-spinner-sm {
  --ux4g-spinner-size: var(--ux4g-fs-20);
  --ux4g-spinner-stroke: var(--ux4g-border-thicker, 3px);
}

.ux4g-spinner-xs {
  --ux4g-spinner-size: var(--ux4g-fs-16);
  --ux4g-spinner-stroke: var(--ux4g-border-thicker, 3px);
}

/* FULL (Gradient Ring Spinner) */
[class*="spinner-"][class*="-full"] {
  background: conic-gradient(from 180deg at 50% 50%, var(--ux4g-spinner-color-1) 0deg, var(--ux4g-spinner-color-2) 360deg) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

/* SPLIT (Long Gradient Arc) */
[class*="spinner-"][class*="-split"] {
  background: conic-gradient(from 180deg at 50% 50%,
      var(--ux4g-spinner-color-1) 0deg,
      var(--ux4g-spinner-color-2) 270deg,
      transparent 270deg,
      transparent 360deg) border-box;

  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

/* PARTIAL (Short Gradient Arc) */
[class*="spinner-"][class*="-partial"] {
  background: conic-gradient(from 180deg at 50% 50%,
      var(--ux4g-spinner-color-1) 0deg,
      var(--ux4g-spinner-color-2) 90deg,
      transparent 90deg,
      transparent 360deg) border-box;

  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

@keyframes ux4g-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }

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

@media (prefers-reduced-motion: reduce) {

  .ux4g-spinner,
  [class^="ux4g-spinner-"] {
    animation: none;
  }
}
.ux4g-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ux4g-sz-m, 40px); /* Default Medium (40px) */
    height: var(--ux4g-sz-m, 40px);
    font-size: var(--ux4g-fs-12);
    border-radius: var(--ux4g-radius-full);
    background-color: var(--ux4g-bg-primary);
    color: var(--ux4g-text-brand-primary-default);
    font-family: var(--ux4g-ff);
    font-weight: var(--ux4g-fw-semibold);
    user-select: none;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative !important;
    flex-shrink: 0;
    --ux4g-icon-size: 18px; /* Default Icon Size for MD */
    transition: all .3s ease;
    cursor: pointer;
}

.ux4g-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Scaling Icons inside Avatar */
.ux4g-avatar i,
.ux4g-avatar .ux4g-icon,
.ux4g-avatar ux4g-icon,
.ux4g-avatar svg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ux4g-icon-size);
    width: var(--ux4g-icon-size);
    height: var(--ux4g-icon-size);
}

/* =========================================== UX4G AVATAR — Standalone Sizes =========================================== */
/* XS - 24px */
.ux4g-avatar-xs {
    width: var(--ux4g-sz-xs, 24px);
    height: var(--ux4g-sz-xs, 24px);
    font-size: var(--ux4g-fs-11);
    --ux4g-icon-size: 12px;
}

/* S - 32px */
.ux4g-avatar-s {
    width: var(--ux4g-sz-s, 32px);
    height: var(--ux4g-sz-s, 32px);
    font-size: var(--ux4g-fs-11);
    --ux4g-icon-size: 14px;
}

/* M - 40px */
.ux4g-avatar-m {
    width: var(--ux4g-sz-m, 40px);
    height: var(--ux4g-sz-m, 40px);
    font-size: var(--ux4g-fs-12);
    --ux4g-icon-size: 18px;
}

/* L - 48px */
.ux4g-avatar-l {
    width: var(--ux4g-sz-l, 48px);
    height: var(--ux4g-sz-l, 48px);
    font-size: var(--ux4g-fs-14);
    --ux4g-icon-size: 20px;
}

/* XL - 64px */
.ux4g-avatar-xl {
    width: var(--ux4g-sz-xl, 64px);
    height: var(--ux4g-sz-xl, 64px);
    font-size: var(--ux4g-fs-16);
    --ux4g-icon-size: 24px;
}

/* 2XL - 80px */
.ux4g-avatar-2xl {
    width: var(--ux4g-sz-2xl, 80px);
    height: var(--ux4g-sz-2xl, 80px);
    font-size: var(--ux4g-fs-18);
    --ux4g-icon-size: 32px;
}

/* 3XL - 120px */
.ux4g-avatar-3xl {
    width: var(--ux4g-sz-3xl, 120px);
    height: var(--ux4g-sz-3xl, 120px);
    font-size: var(--ux4g-fs-24);
    --ux4g-icon-size: 48px;
}

/* =========================================== SIZES MATRIX =========================================== */

/* 1. Status Avatar Matrix (S, M, L) */
/**
 * Strict Size Validation:
 * Only S, M, and L sizes are valid for status avatars.
 * Any other base size class (XS, XL, 2XL, 3XL) applied to a status avatar 
 * will be automatically reset to the default Medium (40px) size.
 */
.ux4g-avatar-status {
    width: var(--ux4g-sz-m, 40px);
    height: var(--ux4g-sz-m, 40px);
    font-size: var(--ux4g-fs-12);
}

/* Supported Variants */
.ux4g-avatar-status.ux4g-avatar-s {
    width: var(--ux4g-sz-s, 32px);
    height: var(--ux4g-sz-s, 32px);
}

.ux4g-avatar-status.ux4g-avatar-l {
    width: var(--ux4g-sz-l, 48px);
    height: var(--ux4g-sz-l, 48px);
}

/* Invalid Size Reset (Validation) */
.ux4g-avatar-status.ux4g-avatar-xs,
.ux4g-avatar-status.ux4g-avatar-xl,
.ux4g-avatar-status.ux4g-avatar-2xl,
.ux4g-avatar-status.ux4g-avatar-3xl {
    width: var(--ux4g-sz-m, 40px) !important;
    height: var(--ux4g-sz-m, 40px) !important;
    --ux4g-icon-size: 18px !important;
}

/* 2. Profile Avatar Matrix (L, XL, 2XL, 3XL) */
.ux4g-avatar-profile {
    width: var(--ux4g-sz-l, 48px);
    height: var(--ux4g-sz-l, 48px);
    font-size: var(--ux4g-fs-14);
}

.ux4g-avatar-profile.ux4g-avatar-xl {
    width: var(--ux4g-sz-xl, 64px);
    height: var(--ux4g-sz-xl, 64px);
}

.ux4g-avatar-profile.ux4g-avatar-2xl {
    width: var(--ux4g-sz-2xl, 80px);
    height: var(--ux4g-sz-2xl, 80px);
}

.ux4g-avatar-profile.ux4g-avatar-3xl {
    width: var(--ux4g-sz-3xl, 120px);
    height: var(--ux4g-sz-3xl, 120px);
}

/* Invalid Size Reset for Profile (Status sizes S, XS are invalid here) */
.ux4g-avatar-profile.ux4g-avatar-s,
.ux4g-avatar-profile.ux4g-avatar-xs {
    width: var(--ux4g-sz-l, 48px) !important;
    height: var(--ux4g-sz-l, 48px) !important;
}

/* ===== OVERLAYS (BADGES & ACTIONS) ===== */
.ux4g-avatar .avatar-badge {
    position: absolute !important;
    bottom: 0;
    right: 0;
    z-index: 2;
    box-shadow: 0 0 0 var(--ux4g-border-width-md) var(--ux4g-bg-neutral-elevated) !important;
    border-radius: var(--ux4g-radius-full);
}

/* Specific offsets for supported status sizes to ensure pixel-perfect alignment */
.ux4g-avatar-s .avatar-badge { bottom: -1px; right: -1px; }
.ux4g-avatar:not([class*="ux4g-avatar-"]) .avatar-badge { bottom: 0; right: 0; }
.ux4g-avatar-l .avatar-badge { bottom: 1px; right: 1px; }

/* Star dot (custom SVG) resets background and shadow */
.ux4g-avatar .avatar-badge:has(svg) {
  background: transparent !important;
  box-shadow: none !important;
}



/* ===== AVATAR GROUP ===== */
.ux4g-avatar-group {
    display: inline-flex;
    align-items: center;
}

/**
 * Group Size Matrix (XS, S, M)
 * Only XS, S, and M are valid for avatar groups.
 * Larger sizes are reset to M to maintain layout integrity.
 */
.ux4g-avatar-group.ux4g-avatar-xs .ux4g-avatar { width: var(--ux4g-sz-xs, 24px); height: var(--ux4g-sz-xs, 24px); font-size: var(--ux4g-fs-11); }
.ux4g-avatar-group.ux4g-avatar-s .ux4g-avatar { width: var(--ux4g-sz-s, 32px); height: var(--ux4g-sz-s, 32px); font-size: var(--ux4g-fs-11); }
.ux4g-avatar-group.ux4g-avatar-m .ux4g-avatar { width: var(--ux4g-sz-m, 40px); height: var(--ux4g-sz-m, 40px); font-size: var(--ux4g-fs-12); }

/* Group Size Validation Reset */
.ux4g-avatar-group.ux4g-avatar-l .ux4g-avatar,
.ux4g-avatar-group.ux4g-avatar-xl .ux4g-avatar,
.ux4g-avatar-group.ux4g-avatar-2xl .ux4g-avatar,
.ux4g-avatar-group.ux4g-avatar-3xl .ux4g-avatar {
    width: var(--ux4g-sz-m, 40px) !important;
    height: var(--ux4g-sz-m, 40px) !important;
}

/* Avatar stacking */
.ux4g-avatar-group > .ux4g-avatar {
    margin-left: calc(var(--ux4g-inline-s, 8px) * -1);
    border: var(--ux4g-border-width-md) solid var(--ux4g-bg-neutral-elevated);
    position: relative;
    flex-shrink: 0;
    z-index: var(--ux4g-z-layout-base, 1);
    transition: transform .2s ease, z-index .2s ease;
}

.ux4g-avatar-group > .ux4g-avatar:first-child {
    margin-left: 0;
}

.ux4g-avatar-group > .ux4g-avatar:hover {
    z-index: var(--ux4g-z-layout-top, 10);
    transform: scale(1.06);
}

.ux4g-avatar-group[data-max] > .ux4g-avatar {
    display: none;
}

.ux4g-avatar-group[data-max="2"] > .ux4g-avatar:not(.ux4g-avatar-number):nth-child(-n+1),
.ux4g-avatar-group[data-max="3"] > .ux4g-avatar:not(.ux4g-avatar-number):nth-child(-n+2),
.ux4g-avatar-group[data-max="4"] > .ux4g-avatar:not(.ux4g-avatar-number):nth-child(-n+3),
.ux4g-avatar-group[data-max="5"] > .ux4g-avatar:not(.ux4g-avatar-number):nth-child(-n+4) {
    display: inline-flex;
}

.ux4g-avatar-group[data-max] > .ux4g-avatar-number {
    display: inline-flex;
}

.ux4g-avatar-number {
    background-color: var(--ux4g-bg-neutral-subtle);
    color: var(--ux4g-text-neutral-secondary);
    font-weight: var(--ux4g-fw-semibold);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* =========================================== UX4G BUTTON — Primary (Size XL) + States Default / Hover / Active / Focused =========================================== */
 .ux4g-btn, .ux4g-btn-primary, .ux4g-btn-outline-primary, .ux4g-btn-text-primary, .ux4g-btn-tonal-primary, .ux4g-btn-danger, .ux4g-btn-outline-danger, .ux4g-btn-text-danger, .ux4g-btn-outline-neutral, .ux4g-btn-text-neutral{
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: var(--ux4g-padding-none) var(--ux4g-padding-m);
     border-radius: var(--ux4g-radius-md);

     /* Default typography (Medium size (MD)) — Label/XL/Default scale */
     --ux4g-fs-current: var(--ux4g-fs-16);
     --ux4g-lh-current: var(--ux4g-lh-20);
     --ux4g-fw-current: var(--ux4g-font-weight-medium);

     font-size: var(--ux4g-fs-current);
     line-height: var(--ux4g-lh-current);
     font-weight: var(--ux4g-fw-current);
     text-decoration: none;

     cursor: pointer;
     border: var(--ux4g-border-width-sm) solid transparent;
     transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, outline-color .15s ease, outline-offset .15s ease, transform .08s ease;
     column-gap: var(--ux4g-inline-xs);

     /* Default height is Medium (MD) */
     min-height: 40px;
}

/* Button in icon color white */
.ux4g-btn-primary .ux4g-icon-outlined,
.ux4g-btn-danger .ux4g-icon-outlined{
    color: var(--ux4g-text-neutral-inverse);
}

/* =========================================== PRIMARY (Default) =========================================== */
 .ux4g-btn-primary{
     background-color: var(--ux4g-bg-primary-strong);
     color: var(--ux4g-text-neutral-inverse);
}
 .ux4g-btn-primary:hover{
     background-color: var(--ux4g-bg-primary-strong-hover);
}
 .ux4g-btn-primary:active{
     background-color: var(--ux4g-bg-primary-stronger);
}

/* Disabled */
 .ux4g-btn-primary:disabled, .ux4g-btn-primary[aria-disabled="true"]{
     background-color: var(--ux4g-bg-neutral-disabled);
     color: var(--ux4g-text-neutral-disabled);
     border-color: var(--ux4g-border-color-neutral-default);
     pointer-events: none;
}
/* =========================================== SECONDARY (Default) =========================================== */
/* Default */
 .ux4g-btn-outline-primary{
     background-color: var(--ux4g-bg-neutral-elevated);
     color: var(--ux4g-text-brand-primary-default);
     border-color: var(--ux4g-border-color-primary-default);
}
 .ux4g-btn-outline-primary:hover{
     background-color: var(--ux4g-bg-primary-subtle);
     border-color: var(--ux4g-border-color-primary-default);
}
 .ux4g-btn-outline-primary:active{
     background-color: var(--ux4g-bg-primary-emphasis);
     border-color: var(--ux4g-border-color-primary-default);
}
/* Disabled */
 .ux4g-btn-outline-primary:disabled, .ux4g-btn-outline-primary[aria-disabled="true"]{
     background-color: var(--ux4g-bg-neutral-elevated);
     color: var(--ux4g-text-neutral-disabled);
     border-color: var(--ux4g-border-color-neutral-default);
     pointer-events: none;
}
/* =========================================== TERTIARY (Default) =========================================== */
 .ux4g-btn-text-primary{
     background-color: transparent;
     color: var(--ux4g-text-brand-primary-default);
     border-color: transparent;
}
 .ux4g-btn-text-primary:hover{
     background-color: var(--ux4g-bg-primary-subtle);
}
 .ux4g-btn-text-primary:active{
     background-color: var(--ux4g-bg-primary-emphasis);
}
/* Disabled */
 .ux4g-btn-text-primary:disabled, .ux4g-btn-text-primary[aria-disabled="true"]{
     background-color: transparent;
     color: var(--ux4g-text-neutral-disabled);
     border-color: transparent;
     pointer-events: none;
}
/* =========================================== TONAL (Default) =========================================== */
 .ux4g-btn-tonal-primary{
     background-color: var(--ux4g-bg-primary-soft);
     color: var(--ux4g-text-brand-primary-default);
}
 .ux4g-btn-tonal-primary:hover{
     background-color: var(--ux4g-bg-primary-subtle);
}
 .ux4g-btn-tonal-primary:active{
     background-color: var(--ux4g-bg-primary-emphasis);
}
/* Disabled */
 .ux4g-btn-tonal-primary:disabled, .ux4g-btn-tonal-primary[aria-disabled="true"]{
     background-color: var(--ux4g-bg-neutral-disabled);
    color: var(--ux4g-text-neutral-disabled);
     border-color: var(--ux4g-border-color-neutral-subtle);
     pointer-events: none;
}
/* =========================================== Neutral Outline =========================================== */
/* Default */
 .ux4g-btn-outline-neutral{
     background-color: var(--ux4g-bg-neutral-elevated);
     color: var(--ux4g-text-neutral-primary);
     border-color: var(--ux4g-border-color-neutral-default);
}
 .ux4g-btn-outline-neutral:hover{
     background-color: var(--ux4g-bg-neutral-subtle);
}
 .ux4g-btn-outline-neutral:active{
     background-color: var(--ux4g-bg-neutral-subtle);
     border-color: var(--ux4g-border-color-neutral-default);
}
/* Disabled */
 .ux4g-btn-outline-neutral:disabled, .ux4g-btn-outline-neutral[aria-disabled="true"]{
     background-color: var(--ux4g-bg-neutral-elevated);
     color: var(--ux4g-text-neutral-disabled);
     border-color: var(--ux4g-border-color-neutral-subtle);
     pointer-events: none;
}
/* =========================================== Neutral Text =========================================== */
/* Default */
 .ux4g-btn-text-neutral{
     background-color: transparent;
     color: var(--ux4g-text-neutral-primary);
}
 .ux4g-btn-text-neutral:hover{
     background-color: var(--ux4g-bg-neutral-subtle);
}
 .ux4g-btn-text-neutral:active{
     background-color: var(--ux4g-bg-neutral-subtle);
}
/* Disabled */
 .ux4g-btn-text-neutral:disabled, .ux4g-btn-text-neutral[aria-disabled="true"]{
     background-color: transparent;
     color: var(--ux4g-text-neutral-disabled);
     pointer-events: none;
}
/* =========================================== Danger =========================================== */
 .ux4g-btn-danger{
     background-color: var(--ux4g-bg-error-strong);
     color: var(--ux4g-text-neutral-inverse);
}
 .ux4g-btn-danger:hover{
     background-color: var(--ux4g-bg-error-strong-hover);
}
 .ux4g-btn-danger:active{
     background-color: var(--ux4g-bg-error-stronger);
}
/* Disabled */
 .ux4g-btn-danger:disabled, .ux4g-btn-danger[aria-disabled="true"]{
     background-color: var(--ux4g-bg-neutral-disabled);
     color: var(--ux4g-text-neutral-disabled);
     border-color: var(--ux4g-border-color-neutral-default);
     pointer-events: none;
}
/* =========================================== Danger Outline =========================================== */
/* Default */
 .ux4g-btn-outline-danger{
     background-color: var(--ux4g-bg-neutral-elevated);
     color: var(--ux4g-text-status-error);
     border-color: var(--ux4g-border-color-error-strong);
}
 .ux4g-btn-outline-danger:hover{
     background-color: var(--ux4g-bg-error-soft);
}
 .ux4g-btn-outline-danger:active{
     background-color: var(--ux4g-bg-error-subtle);
}
/* Disabled */
 .ux4g-btn-outline-danger:disabled, .ux4g-btn-outline-danger[aria-disabled="true"]{
     background-color: var(--ux4g-bg-neutral-elevated);
     color: var(--ux4g-text-neutral-disabled);
     border-color: var(--ux4g-border-color-neutral-default);
     pointer-events: none;
}
/* =========================================== Danger Tonal =========================================== */
/* Default */
 .ux4g-btn-text-danger{
     background-color: transparent;
     color: var(--ux4g-text-status-error);
}
 .ux4g-btn-text-danger:hover{
     background-color: var(--ux4g-bg-error-soft);
}
 .ux4g-btn-text-danger:active{
     background-color: var(--ux4g-bg-error-subtle);
}
/* Disabled */
 .ux4g-btn-text-danger:disabled, .ux4g-btn-text-danger[aria-disabled="true"]{
     background-color: transparent;
    color: var(--ux4g-text-neutral-disabled);
     pointer-events: none;
}

/* =========================================== UX4G BUTTON — SIZES (Override everything above) =========================================== */

/* Size X Large (XL) */
.ux4g-btn-xl{
    min-height: 56px;
    padding: var(--ux4g-padding-none) var(--ux4g-padding-l);
    /* Label/XL/Default */
    --ux4g-fs-current: var(--ux4g-fs-16);
    --ux4g-lh-current: var(--ux4g-lh-20);
    font-size: var(--ux4g-fs-current);
    line-height: var(--ux4g-lh-current);
}

/* Size Large (LG) */
.ux4g-btn-lg{
    min-height: 48px;
    padding: var(--ux4g-padding-none) var(--ux4g-padding-l);
    /* Label/XL/Default */
    --ux4g-fs-current: var(--ux4g-fs-16);
    --ux4g-lh-current: var(--ux4g-lh-20);
    font-size: var(--ux4g-fs-current);
    line-height: var(--ux4g-lh-current);
}

/* Size Medium (MD) - Default */
.ux4g-btn-md{
    min-height: 40px;
    padding: var(--ux4g-padding-none) var(--ux4g-padding-m);
    /* Label/XL/Default */
    --ux4g-fs-current: var(--ux4g-fs-16);
    --ux4g-lh-current: var(--ux4g-lh-20);
    font-size: var(--ux4g-fs-current);
    line-height: var(--ux4g-lh-current);
}

/* Size Small (SM) */
.ux4g-btn-sm{
    min-height: 32px;
    padding: var(--ux4g-padding-none) var(--ux4g-padding-s);
    border-radius: var(--ux4g-radius-md);
    /* Label/L/Default */
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-18);
    font-weight: var(--ux4g-font-weight-medium);
}

/* Size Extra Small (XS) */
.ux4g-btn-xs{
    min-height: 24px;
    padding: var(--ux4g-padding-none) var(--ux4g-padding-s);
    border-radius: var(--ux4g-radius-sm);
    /* Label/M/Default */
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
    line-height: var(--ux4g-lh-current);
}

.ux4g-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-inline-xs);
}


/* ========================================================= HORIZONTAL DIVIDER ========================================================= */
.ux4g-divider-horizontal {
    display: block;
    width: 100%;
    height: 1px;
    border: 0;
    background-color: var(--ux4g-border-color-neutral-subtle);
}

/* ========================================================= VERTICAL DIVIDER ========================================================= */
.ux4g-divider-vertical {
    display: block;
    width: 1px;
    background-color: var(--ux4g-border-color-neutral-subtle);
}

.ux4g-as-stretch,
.ux4g-divider-vertical {
    align-self: stretch !important;
}
/* ================================
   LINK - SMALL
================================ */
.ux4g-text-link-sm,
.ux4g-text-link-neutral-sm {
  font-size: var(--ux4g-fs-14);
  line-height: var(--ux4g-lh-20);
  font-weight: var(--ux4g-font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-2, 4px);
}

/* ================================
   LINK - MEDIUM
================================ */
.ux4g-text-link-md,
.ux4g-text-link-neutral-md {
  font-size: var(--ux4g-fs-16);
  line-height: var(--ux4g-lh-24);
  font-weight: var(--ux4g-font-weight-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-2, 4px);
}

/* ================================
   ICON FIX
================================ */
.ux4g-text-link-sm .ux4g-icon-outlined,
.ux4g-text-link-md .ux4g-icon-outlined,
.ux4g-text-link-neutral-sm .ux4g-icon-outlined,
.ux4g-text-link-neutral-md .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-16);
}

/* ================================
   COLOR
================================ */
.ux4g-text-link-sm,
.ux4g-text-link-md {
  --ux4g-text-current: var(--ux4g-text-link-default-default);
}

.ux4g-text-link-neutral-sm,
.ux4g-text-link-neutral-md {
  --ux4g-text-current: var(--ux4g-text-link-neutral-default);
}

/* ================================
   INTERACTION
================================ */
.ux4g-text-link-sm,
.ux4g-text-link-md,
.ux4g-text-link-neutral-sm,
.ux4g-text-link-neutral-md {
  text-decoration: none;
}

.ux4g-text-link-sm:hover,
.ux4g-text-link-md:hover,
.ux4g-text-link-neutral-sm:hover,
.ux4g-text-link-neutral-md:hover {
  text-decoration: underline;
}

.ux4g-text-link-sm .ux4g-icon-outlined:hover,
.ux4g-text-link-md .ux4g-icon-outlined:hover,
.ux4g-text-link-neutral-sm .ux4g-icon-outlined:hover,
.ux4g-text-link-neutral-md .ux4g-icon-outlined:hover {
  text-decoration: none !important;
}

:is(.ux4g-text-link, .ux4g-text-link-neutral)[disabled] {
 color: rgba(23, 23, 23, 0.25) !important;
  cursor: not-allowed;
  text-decoration: none;
  pointer-events: none;
}
/* =========================================================
UX4G TAG – TONAL (Base Shared Styles)
Applies to all tonal tag variants
========================================================= */
:is(.ux4g-tag-tonal-neutral,
  .ux4g-tag-tonal-primary,
  .ux4g-tag-tonal-success,
  .ux4g-tag-tonal-warning,
  .ux4g-tag-tonal-error,
  .ux4g-tag-tonal-info,
 
  .ux4g-tag-filled-neutral,
  .ux4g-tag-filled-primary,
  .ux4g-tag-filled-success,
  .ux4g-tag-filled-warning,
  .ux4g-tag-filled-error,
  .ux4g-tag-filled-info,
 
  .ux4g-tag-outline-neutral,
  .ux4g-tag-outline-primary,
  .ux4g-tag-outline-success,
  .ux4g-tag-outline-warning,
  .ux4g-tag-outline-error,
  .ux4g-tag-outline-info,
 
  .ux4g-tag-text-neutral,
  .ux4g-tag-text-primary,
  .ux4g-tag-text-success,
  .ux4g-tag-text-warning,
  .ux4g-tag-text-error,
  .ux4g-tag-text-info
) {
  border-radius: var(--ux4g-radius-sm);
  padding: var(--ux4g-padding-2xs) var(--ux4g-padding-xs);
  border: solid transparent var(--ux4g-border-width-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-inline-xs);
  font-size: var(--ux4g-fs-12);
  line-height: var(--ux4g-lh-16);
  font-weight: var(--ux4g-font-weight-medium);
  width: fit-content;
}
/* =========================================================
   UX4G TAG – TONAL VARIANTS
   ========================================================= */
 
 
.ux4g-tag-tonal-neutral {
  background-color: var(--ux4g-bg-neutral-subtle);
  color: var(--ux4g-text-neutral-primary);
}
.ux4g-tag-tonal-primary {
  background-color: var(--ux4g-bg-primary-soft);
  color: var(--ux4g-bg-primary-strong);
}
.ux4g-tag-tonal-success {
  background-color: var(--ux4g-bg-success-soft);
  color: var(--ux4g-text-status-success);
}
.ux4g-tag-tonal-warning {
  background-color: var(--ux4g-bg-warning-soft);
  color: var(--ux4g-text-status-warning);
}
.ux4g-tag-tonal-error {
  background-color: var(--ux4g-bg-error-soft);
  color: var(--ux4g-text-status-error);
}
.ux4g-tag-tonal-info {
  background-color: var(--ux4g-bg-info-soft);
  color: var(--ux4g-text-status-info);
}
 
 
/* =========================================================
   UX4G TAG – TONAL FILLED VARIANTS
   ========================================================= */
 
 
/* .ux4g-tag-tonal-neutral {
  background-color: var(--ux4g-bg-neutral-subtle);
  color: var(--ux4g-text-neutral-primary);
} */
/* .ux4g-tag-tonal-primary {
  background-color: var(--ux4g-bg-primary-soft);
  color: var(--ux4g-text-brand-primary-default);
} */
 
/* .ux4g-tag-tonal-success {
  background-color: var(--ux4g-bg-success-soft);
  color: var(--ux4g-bg-success-strong);
}
.ux4g-tag-tonal-warning {
  background-color: var(--ux4g-bg-warning-soft);
  color: var(--ux4g-bg-warning-strong);
}
.ux4g-tag-tonal-error {
  background-color: var(--ux4g-bg-error-soft);
  color: var(--ux4g-bg-error-strong);
}
.ux4g-tag-tonal-info {
  background-color: var(--ux4g-bg-info-soft);
  color: var(--ux4g-bg-info-strong);
}
  */
/* =========================================================
   UX4G TAG – FILLED VARIANTS
   ========================================================= */
 
/* Neutral */
.ux4g-tag-filled-neutral {
  background-color: var(--ux4g-bg-neutral-stronger);
  color: var(--ux4g-text-neutral-inverse);
}
:is(
.ux4g-tag-filled-neutral, 
.ux4g-tag-filled-primary, 
.ux4g-tag-filled-success, 
.ux4g-tag-filled-warning, 
.ux4g-tag-filled-error, 
.ux4g-tag-filled-info
) i{
 --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}

 
/* Brand */
.ux4g-tag-filled-primary {
  background-color: var(--ux4g-bg-primary-strong);
  color: var(--ux4g-text-neutral-inverse);
}
 
/* Success */
.ux4g-tag-filled-success {
  background-color: var(--ux4g-bg-success-strong);
  color: var(--ux4g-text-neutral-inverse);
}
 
/* Warning */
.ux4g-tag-filled-warning {
  background-color: var(--ux4g-bg-warning-strong);
  color: var(--ux4g-text-neutral-inverse);
}
 
/* Error */
.ux4g-tag-filled-error {
  background-color: var(--ux4g-bg-error-strong);
  color: var(--ux4g-text-neutral-inverse);
}
 
/* Info */
.ux4g-tag-filled-info {
  background-color: var(--ux4g-bg-info-strong);
  color: var(--ux4g-text-neutral-inverse);
}
 
/*=========================================================
   UX4G TAG – OUTLINE VARIANTS
   ========================================================= */
 
/* Neutral */
.ux4g-tag-outline-neutral {
  border-color: var(--ux4g-border-color-neutral-default);
  color: var(--ux4g-text-neutral-primary);
}
 
/* Brand */
.ux4g-tag-outline-primary {
  border-color: var(--ux4g-border-color-primary-default);
  color: var(--ux4g-text-brand-primary-default);
}
 
/* Success */
.ux4g-tag-outline-success {
  border-color: var(--ux4g-border-color-success-strong);
  color: var(--ux4g-text-status-success);
}
 
/* Warning */
.ux4g-tag-outline-warning {
  border-color: var(--ux4g-border-color-secondary-default);
  color: var(--ux4g-color-secondary-800);
}
 
/* Error */
.ux4g-tag-outline-error {
  border-color: var(--ux4g-border-color-error-default);
  color: var(--ux4g-text-status-error);
}
 
/* Info */
.ux4g-tag-outline-info {
  border-color: var(--ux4g-border-color-info-default);
  color: var(--ux4g-text-status-info);
}
 
/*=========================================================
   UX4G TAG – TEXT VARIANTS
   ========================================================= */
 
/* Neutral */
.ux4g-tag-text-neutral {
  color: var(--ux4g-text-neutral-primary);
}
 
/* Brand */
.ux4g-tag-text-primary {
  color: var(--ux4g-text-brand-primary-default);
}
 
/* Success */
.ux4g-tag-text-success {
  color: var(--ux4g-text-status-success);
}
 
/* Warning */
.ux4g-tag-text-warning {
  color: var(--ux4g-color-secondary-800);
}
 
/* Error */
.ux4g-tag-text-error {
  color: var(--ux4g-text-status-error);
}
 
/* Info */
.ux4g-tag-text-info {
  color: var(--ux4g-text-status-info);
}


/* small size */

.ux4g-tag-s {
  padding: var(--ux4g-padding-3xs) var(--ux4g-padding-xs);
}
/* =========================================================
   CHIP BASE (all chip variants)
   ========================================================= */

:is(.ux4g-filter-chip-md, .ux4g-filter-chip-sm,
    .ux4g-choice-chip-md, .ux4g-choice-chip-sm,
    .ux4g-input-chip-md, .ux4g-input-chip-sm,
    .ux4g-input-chip-xs) {
  width: fit-content;
  color: var(--ux4g-text-neutral-primary);
  font-size: var(--ux4g-fs-14);
  border-radius: var(--ux4g-radius-sm);
  padding: var(--ux4g-space-none) var(--ux4g-padding-xs);
  border: var(--ux4g-border-thin) solid transparent;
  transition:
    background-color 220ms cubic-bezier(.25, .8, .25, 1),
    border-color 220ms cubic-bezier(.25, .8, .25, 1);
}
.ux4g-input-chip{
  cursor: pointer;
}

/* Sizes */
:is(.ux4g-filter-chip-sm, .ux4g-choice-chip-sm, .ux4g-input-chip-sm) { min-height: 28px; }
:is(.ux4g-filter-chip-md, .ux4g-choice-chip-md, .ux4g-input-chip-md) { min-height: 32px;}

.ux4g-input-chip-xs {
  min-height: 20px;
  padding: var(--ux4g-space-none) var(--ux4g-padding-2xs) !important;
  font-size: var(--ux4g-fs-12) !important;
}

/* Figma uses a 20px trailing close icon for M/S and 16px for XS. */
:is(.ux4g-input-chip-md, .ux4g-input-chip-sm) > .ux4g-icon-outlined:last-child {
  --ux4g-icon-size: var(--ux4g-fs-20);
  --ux4g-icon-width: var(--ux4g-fs-20);
  --ux4g-icon-height: var(--ux4g-fs-20);
}

.ux4g-input-chip-xs > .ux4g-icon-outlined:last-child {
  --ux4g-icon-size: var(--ux4g-fs-16);
  --ux4g-icon-width: var(--ux4g-fs-16);
  --ux4g-icon-height: var(--ux4g-fs-16);
}

/* =========================================================
   FILTER CHIP (ux4g-chip) states
   ========================================================= */

:is(.ux4g-filter-chip-md, .ux4g-filter-chip-sm) {
  background-color: var(--ux4g-bg-neutral);
  border-color: var(--ux4g-border-color-neutral-default);
}
:is(.ux4g-filter-chip-md, .ux4g-filter-chip-sm):hover {
  background-color: var(--ux4g-bg-neutral-subtle);
  border-color: var(--ux4g-border-color-neutral-subtle);
}
:is(.ux4g-filter-chip-md, .ux4g-filter-chip-sm).active {
  background-color: var(--ux4g-bg-primary-soft);
  color: var(--ux4g-bg-primary-strong);
  border-color: var(--ux4g-bg-primary-emphasis);
}

:is(.ux4g-filter-chip-md, .ux4g-filter-chip-sm).active:hover {
  background-color: var(--ux4g-bg-primary-soft);
  border-color: var(--ux4g-bg-primary-soft);
}
.ux4g-filter-chip-md.active .ux4g-icon-outlined, 
.ux4g-filter-chip-sm.active .ux4g-icon-outlined{
  color: var(--ux4g-bg-primary-strong);
}

/* =========================================================
   CHOICE CHIP (ux4g-choice-chip) states
   ========================================================= */
:is(.ux4g-choice-chip-md, .ux4g-choice-chip-sm) {
  background-color: var(--ux4g-bg-neutral);
  border-color: var(--ux4g-border-color-neutral-default);
}

:is(.ux4g-choice-chip-md, .ux4g-choice-chip-sm).active {
  background-color: var(--ux4g-bg-primary-strong);
  color: var(--ux4g-bg-neutral);
}
:is(.ux4g-choice-chip-md, .ux4g-choice-chip-sm).active .ux4g-icon-outlined {
  color: var(--ux4g-bg-neutral);
}

:is(.ux4g-choice-chip-md, .ux4g-choice-chip-sm):hover {
 box-shadow: var(--ux4g-shadow-l1);
}

:is(.ux4g-choice-chip-md, .ux4g-choice-chip-sm).active:hover {
  border-color: var(--ux4g-bg-neutral);
}

/* =========================================================
   INPUT CHIP (ux4g-input-chip) states
   ========================================================= */

:is(.ux4g-input-chip-md, .ux4g-input-chip-sm, .ux4g-input-chip-xs) {
  background-color: var(--ux4g-bg-neutral);
  border-color: var(--ux4g-border-color-neutral-subtle);
}

/* =========================================================
   DISABLED (shared)
   ========================================================= */


:is(
.ux4g-filter-chip-md, 
.ux4g-filter-chip-sm,
.ux4g-choice-chip-md,
.ux4g-choice-chip-sm,
.ux4g-input-chip-md,
.ux4g-input-chip-sm,
.ux4g-input-chip-xs
)[disabled] {
   --ux4g-text-current: var(--ux4g-text-link-disabled);
     color: var(--ux4g-text-current);
     cursor: not-allowed;
     text-decoration: none;
     pointer-events: none;
     border-color: var(--ux4g-border-color-neutral-subtle);
}
:is(
.ux4g-choice-chip-md, 
.ux4g-choice-chip-sm,
.ux4g-input-chip-md, 
.ux4g-input-chip-sm,
.ux4g-filter-chip-md,
.ux4g-filter-chip-sm,
.ux4g-input-chip-xs
)[disabled] {
  background-color:  var(--ux4g-bg-neutral-subtle);
  --ux4g-text-current: var(--ux4g-text-neutral-disabled);
  cursor: not-allowed;
  text-decoration: none;
  pointer-events: none;
}

/* If you want chip (not choice/input) to keep your special disabled color token: */
/* :is(
.ux4g-filter-chip-md,
.ux4g-choice-chip-md,
.ux4g-choice-chip-sm,
.ux4g-filter-chip-sm)[disabled] {
  --ux4g-text-current: var(--ux4g-text-link-disabled);
  
} */

.ux4g-topbar {
  background: var(--ux4g-bg-primary-strong);
  color: var(--ux4g-color-neutral-0);
  min-height: 46px;
}

.ux4g-top-bar-icon {
  font-size: var(--ux4g-fs-20);
}

.india-flag {
  width: 33px;
  height: 22px;
  margin-right: var(--ux4g-margin-s);
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='33' height='22' viewBox='0 0 33 22' fill='none' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M0 2C0 0.89543 0.895431 0 2 0H31C32.1046 0 33 0.895431 33 2V20C33 21.1046 32.1046 22 31 22H2C0.895431 22 0 21.1046 0 20V2Z' fill='url(%23pattern0_10118_2333)'/%3E%3Cdefs%3E%3Cpattern id='pattern0_10118_2333' patternContentUnits='objectBoundingBox' width='1' height='1'%3E%3Cuse xlink:href='%23image0_10118_2333' transform='matrix(0.00208333 0 0 0.003125 -0.05625 0)'/%3E%3C/pattern%3E%3Cimage id='image0_10118_2333' width='534' height='320' preserveAspectRatio='none' xlink:href='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/4QBCRXhpZgAASUkqAAgAAAACAA4BAgALAAAAJgAAAJiCAgAJAAAAMQAAAAAAAABpbmRpYW4gZmxhZ2Zsb3dncmFwaP/hBUBodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+Cjx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iPgoJPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KCQk8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOklwdGM0eG1wQ29yZT0iaHR0cDovL2lwdGMub3JnL3N0ZC9JcHRjNHhtcENvcmUvMS4wL3htbG5zLyIgICB4bWxuczpHZXR0eUltYWdlc0dJRlQ9Imh0dHA6Ly94bXAuZ2V0dHlpbWFnZXMuY29tL2dpZnQvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwbHVzPSJodHRwOi8vbnMudXNlcGx1cy5vcmcvbGRmL3htcC8xLjAvIiAgeG1sbnM6aXB0Y0V4dD0iaHR0cDovL2lwdGMub3JnL3N0ZC9JcHRjNHhtcEV4dC8yMDA4LTAyLTI5LyIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgZGM6UmlnaHRzPSJmbG93Z3JhcGgiIHBob3Rvc2hvcDpDcmVkaXQ9IkdldHR5IEltYWdlcy9pU3RvY2twaG90byIgR2V0dHlJbWFnZXNHSUZUOkFzc2V0SUQ9IjQ2MDg0NDk4OSIgeG1wUmlnaHRzOldlYlN0YXRlbWVudD0iaHR0cHM6Ly93d3cuaXN0b2NrcGhvdG8uY29tL2xlZ2FsL2xpY2Vuc2UtYWdyZWVtZW50P3V0bV9tZWRpdW09b3JnYW5pYyZhbXA7dXRtX3NvdXJjZT1nb29nbGUmYW1wO3V0bV9jYW1wYWlnbj1pcHRjdXJsIiA+CjxkYzpjcmVhdG9yPjxyZGY6U2VxPjxyZGY6bGk+Zmxvd2dyYXBoPC9yZGY6bGk+PC9yZGY6U2VxPjwvZGM6Y3JlYXRvcj48ZGM6ZGVzY3JpcHRpb24+PHJkZjpBbHQ+PHJkZjpsaSB4bWw6bGFuZz0ieC1kZWZhdWx0Ij5pbmRpYW4gZmxhZzwvcmRmOmxpPjwvcmRmOkFsdD48L2RjOmRlc2NyaXB0aW9uPgo8cGx1czpMaWNlbnNvcj48cmRmOlNlcT48cmRmOmxpIHJkZjpwYXJzZVR5cGU9J1Jlc291cmNlJz48cGx1czpMaWNlbnNvclVSTD5odHRwczovL3d3dy5pc3RvY2twaG90by5jb20vcGhvdG8vbGljZW5zZS1nbTQ2MDg0NDk4OS0/dXRtX21lZGl1bT1vcmdhbmljJmFtcDt1dG1fc291cmNlPWdvb2dsZSZhbXA7dXRtX2NhbXBhaWduPWlwdGN1cmw8L3BsdXM6TGljZW5zb3JVUkw+PC9yZGY6bGk+PC9yZGY6U2VxPjwvcGx1czpMaWNlbnNvcj4KCQk8L3JkZjpEZXNjcmlwdGlvbj4KCTwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InciPz4K/+IMWElDQ19QUk9GSUxFLgEBAAAMSExpbm8CEAAAbW50clJHQiBYWVogB84AAgAJAAYAMQAAYWNzcE1TRlQAAAAASUVDIHNSR0IAAAAAAAAAAAAAAAAAAPbWAAEAAAAA0y1IUCAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARY3BydAAAAVAAAAAzZGVzYwAAAYQAAABsd3RwdAAAAfAAAAAUYmtwdAAAAgQAAAAUclhZWgAAAhgAAAAUZ1hZWgAAAiwAAAAUYlhZWgAAAkAAAAAUZG1uZAAAAlQAAABwZG1kZAAAAsQAAACIdnVlZAAAA0wAAACGdmlldwAAA9QAAAAkbHVtaQAAA/gAAAAUbWVhcwAABAwAAAAkdGVjaAAABDAAAAAMclRSQwAABDwAAAgMZ1RSQwAABDwAAAgMYlRSQwAABDwAAAgMdGV4dAAAAABDb3B5cmlnaHQgKGMpIDE5OTggSGV3bGV0dC1QYWNrYXJkIENvbXBhbnkAAGRlc2MAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAASc1JHQiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAADzUQABAAAAARbMWFlaIAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9kZXNjAAAAAAAAABZJRUMgaHR0cDovL3d3dy5pZWMuY2gAAAAAAAAAAAAAABZJRUMgaHR0cDovL3d3dy5pZWMuY2gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZGVzYwAAAAAAAAAuSUVDIDYxOTY2LTIuMSBEZWZhdWx0IFJHQiBjb2xvdXIgc3BhY2UgLSBzUkdCAAAAAAAAAAAAAAAuSUVDIDYxOTY2LTIuMSBEZWZhdWx0IFJHQiBjb2xvdXIgc3BhY2UgLSBzUkdCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRlc2MAAAAAAAAALFJlZmVyZW5jZSBWaWV3aW5nIENvbmRpdGlvbiBpbiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAACxSZWZlcmVuY2UgVmlld2luZyBDb25kaXRpb24gaW4gSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB2aWV3AAAAAAATpP4AFF8uABDPFAAD7cwABBMLAANcngAAAAFYWVogAAAAAABMCVYAUAAAAFcf521lYXMAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAKPAAAAAnNpZyAAAAAAQ1JUIGN1cnYAAAAAAAAEAAAAAAUACgAPABQAGQAeACMAKAAtADIANwA7AEAARQBKAE8AVABZAF4AYwBoAG0AcgB3AHwAgQCGAIsAkACVAJoAnwCkAKkArgCyALcAvADBAMYAywDQANUA2wDgAOUA6wDwAPYA+wEBAQcBDQETARkBHwElASsBMgE4AT4BRQFMAVIBWQFgAWcBbgF1AXwBgwGLAZIBmgGhAakBsQG5AcEByQHRAdkB4QHpAfIB+gIDAgwCFAIdAiYCLwI4AkECSwJUAl0CZwJxAnoChAKOApgCogKsArYCwQLLAtUC4ALrAvUDAAMLAxYDIQMtAzgDQwNPA1oDZgNyA34DigOWA6IDrgO6A8cD0wPgA+wD+QQGBBMEIAQtBDsESARVBGMEcQR+BIwEmgSoBLYExATTBOEE8AT+BQ0FHAUrBToFSQVYBWcFdwWGBZYFpgW1BcUF1QXlBfYGBgYWBicGNwZIBlkGagZ7BowGnQavBsAG0QbjBvUHBwcZBysHPQdPB2EHdAeGB5kHrAe/B9IH5Qf4CAsIHwgyCEYIWghuCIIIlgiqCL4I0gjnCPsJEAklCToJTwlkCXkJjwmkCboJzwnlCfsKEQonCj0KVApqCoEKmAquCsUK3ArzCwsLIgs5C1ELaQuAC5gLsAvIC+EL+QwSDCoMQwxcDHUMjgynDMAM2QzzDQ0NJg1ADVoNdA2ODakNww3eDfgOEw4uDkkOZA5/DpsOtg7SDu4PCQ8lD0EPXg96D5YPsw/PD+wQCRAmEEMQYRB+EJsQuRDXEPURExExEU8RbRGMEaoRyRHoEgcSJhJFEmQShBKjEsMS4xMDEyMTQxNjE4MTpBPFE+UUBhQnFEkUahSLFK0UzhTwFRIVNBVWFXgVmxW9FeAWAxYmFkkWbBaPFrIW1hb6Fx0XQRdlF4kXrhfSF/cYGxhAGGUYihivGNUY+hkgGUUZaxmRGbcZ3RoEGioaURp3Gp4axRrsGxQbOxtjG4obshvaHAIcKhxSHHscoxzMHPUdHh1HHXAdmR3DHeweFh5AHmoelB6+HukfEx8+H2kflB+/H+ogFSBBIGwgmCDEIPAhHCFIIXUhoSHOIfsiJyJVIoIiryLdIwojOCNmI5QjwiPwJB8kTSR8JKsk2iUJJTglaCWXJccl9yYnJlcmhya3JugnGCdJJ3onqyfcKA0oPyhxKKIo1CkGKTgpaymdKdAqAio1KmgqmyrPKwIrNitpK50r0SwFLDksbiyiLNctDC1BLXYtqy3hLhYuTC6CLrcu7i8kL1ovkS/HL/4wNTBsMKQw2zESMUoxgjG6MfIyKjJjMpsy1DMNM0YzfzO4M/E0KzRlNJ402DUTNU01hzXCNf02NzZyNq426TckN2A3nDfXOBQ4UDiMOMg5BTlCOX85vDn5OjY6dDqyOu87LTtrO6o76DwnPGU8pDzjPSI9YT2hPeA+ID5gPqA+4D8hP2E/oj/iQCNAZECmQOdBKUFqQaxB7kIwQnJCtUL3QzpDfUPARANER0SKRM5FEkVVRZpF3kYiRmdGq0bwRzVHe0fASAVIS0iRSNdJHUljSalJ8Eo3Sn1KxEsMS1NLmkviTCpMcky6TQJNSk2TTdxOJU5uTrdPAE9JT5NP3VAnUHFQu1EGUVBRm1HmUjFSfFLHUxNTX1OqU/ZUQlSPVNtVKFV1VcJWD1ZcVqlW91dEV5JX4FgvWH1Yy1kaWWlZuFoHWlZaplr1W0VblVvlXDVchlzWXSddeF3JXhpebF69Xw9fYV+zYAVgV2CqYPxhT2GiYfViSWKcYvBjQ2OXY+tkQGSUZOllPWWSZedmPWaSZuhnPWeTZ+loP2iWaOxpQ2maafFqSGqfavdrT2una/9sV2yvbQhtYG25bhJua27Ebx5veG/RcCtwhnDgcTpxlXHwcktypnMBc11zuHQUdHB0zHUodYV14XY+dpt2+HdWd7N4EXhueMx5KnmJeed6RnqlewR7Y3vCfCF8gXzhfUF9oX4BfmJ+wn8jf4R/5YBHgKiBCoFrgc2CMIKSgvSDV4O6hB2EgITjhUeFq4YOhnKG14c7h5+IBIhpiM6JM4mZif6KZIrKizCLlov8jGOMyo0xjZiN/45mjs6PNo+ekAaQbpDWkT+RqJIRknqS45NNk7aUIJSKlPSVX5XJljSWn5cKl3WX4JhMmLiZJJmQmfyaaJrVm0Kbr5wcnImc951kndKeQJ6unx2fi5/6oGmg2KFHobaiJqKWowajdqPmpFakx6U4pammGqaLpv2nbqfgqFKoxKk3qamqHKqPqwKrdavprFys0K1ErbiuLa6hrxavi7AAsHWw6rFgsdayS7LCszizrrQltJy1E7WKtgG2ebbwt2i34LhZuNG5SrnCuju6tbsuu6e8IbybvRW9j74KvoS+/796v/XAcMDswWfB48JfwtvDWMPUxFHEzsVLxcjGRsbDx0HHv8g9yLzJOsm5yjjKt8s2y7bMNcy1zTXNtc42zrbPN8+40DnQutE80b7SP9LB00TTxtRJ1MvVTtXR1lXW2Ndc1+DYZNjo2WzZ8dp22vvbgNwF3IrdEN2W3hzeot8p36/gNuC94UThzOJT4tvjY+Pr5HPk/OWE5g3mlucf56noMui86Ubp0Opb6uXrcOv77IbtEe2c7ijutO9A78zwWPDl8XLx//KM8xnzp/Q09ML1UPXe9m32+/eK+Bn4qPk4+cf6V/rn+3f8B/yY/Sn9uv5L/tz/bf///+0AZlBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAABJHAJQAAlmbG93Z3JhcGgcAngAC2luZGlhbiBmbGFnHAJ0AAlmbG93Z3JhcGgcAm4AGEdldHR5IEltYWdlcy9pU3RvY2twaG90bwD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAFAAhYDAREAAhEBAxEB/8QAHgABAAICAwEBAQAAAAAAAAAAAAgJBQcDBgoEAgH/xABGEAABAwMCAggEBAQEAwYHAAAAAQIDBAUGBwgREgkTGSFRUlPTMZGVlgoUIkEjMmFxFTNCgRYXoRg0Q2KColRjhJKztNH/xAAdAQEAAwADAQEBAAAAAAAAAAAABQYHAwQIAgEJ/8QARxEAAgECAggBCAYIBQMFAQAAAAECAxEEBQYSFyExUZLhQRMWImFjcYHiBxRCkaGxMlJicoLB0fAIFSOywjNT8TQ1c5Oig//aAAwDAQACEQMRAD8A7IfzLP6GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFnnZK7TvDJvrLfbPaOwvQTlV6+x5M2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmOq6rbCejk0Jsn/EmterTsSoFReSryPNKaiY/h+zVla3mX+icVO5g/8PWieY1PJ4WhXqPlGTf5ROCv9OGlWGjrVp0or1xt+ciMWoG4v8Pxp9VPt8u5rI7xURrwdHj9JXVbP9pW0nVO/wBnqW3Df4QsNio6ywlWK/aqxX4cfwIWt/iPzai7OtSfupyf5Ox0+m3xdATPU9RLnOqcLeP+dJaJlb/7Y1X/AKHef+DXCJX8lJ//ANl/Q66/xL5t+vD/AOqX9TaGlmo/QE6vVEdDjm7yW31Eio3qsnuM9oRqr+yvraaKP/dHKhEYz/CZg8Cm6mDrNfs1FP8ACN3+B3qH+IrOMQ7Rr0V74OP5tEmMZ6L/AGT5rZIMlw3I7vdrdUt5qa4WzJYp4JU8WvYxWuT+ylTq/QLoVQqOFWFWMlxTnZ/c4kxD6atL6kdaLpNeqHzH39krtO8Mm+st9s49hegnKr19j72z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmHZK7TvDJvrLfbGwvQTlV6+w2z6Zez6PmJOGxmTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGutz27DQHZzpjUaubh9RaPH7RCqsp0mVX1FbNw4pBTwt4vmkXytReCcVXg1FVJTKMmzLPcYsNgqbnJ/clzb4Je/8AM6mMx2Fy+g6teWqvz9SXiylXfN+JW3N643KqwPZtZX6c43LIsMN4kiZU32uaq8EXm/VHS8fLGjnovwl/Y3zR76J8py+CrZpLy0+Nt6gvycvjZfsmc5npnjMTJ08GtSPPjJ/yX4v1kQdqW2Hcp0pu5Cs08sepcdzy6ay1N2rb1nF5qZnzwwuYjmrLySvc9Vlbyo7gnx4uQvGc5vlOh2VKvOnq09ZRUYJKzd/Dcrbt/wCRXsBgsbn2MdNTvKzd5Nvh9/M3Pr50Cm8rAW6fXnb1Yq3VixZ9j9LXxXmxWn8qy2TzJzpBUNkld1TEjdG5J3q1i8zkVGqzvgMt+knIsT5eONaoTpSatJ31kt11ZK7vdaqu+HMksXopmNF03h15SM0ndK1m+e/8STur/wCGs05suFZzj+jGo2Y3vUTGdObRfLRaKqtovytwuNRNcGTUv/d2LyKlDwiVXtXmf+pVT4VHA/Svi6mIoTxVOEaE6k4tpSuopQaf6T3+lv3PdwJvEaGYeNKoqMpOpGKaV1Zt33cPVuI06H9ATvA1I0YueqOq0btNLgmUWqx4xjmW2mRs93lrKplM6V3K7rKeKN0sblcsb+ZqSORERn6rZmP0lZHhMfHD4b/WjqylKUHuiopu3Czbs/FWdl47obCaJY+vh3Urf6bukk1xu7X47vu5mkbvke8rosNz+RaRYDrdccayvF7o2mur8Su0r6Gtk5GPbzRyNayoYrXN/TLGqf0LBClkOmOT08TWoqdOautdLWW9rit6fuZGSnmWRY6VGnUalF77Pc/g+PxRZV0fH4nS3X2uodMekCxintskrmww6iY7SOSn5vhzVlI3isf9ZIeKcV/ympxcZRpN9Ec6UZYjJpay/wC3J7/4ZePul1MuWU6aQqNU8crftLh8V4e9fci3LEsuxXPcZoc0wfI6G72i50zai3XS21TJ6epicnFr45GKrXNVP3RTFK1Gth6sqVWLjKLs01Zp8mmX2E4VIKcHdPg0ZE4j6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANDdId0gejnR16D1Gr2p03525VavpsVxinmRtReKxG8Ujbx48kbeKOklVFRjVTuc5zGusejGjWO0ozJYbD7orfKXhFc/e/BeL9V2ozNs1w+U4V1qvHwXi3/fFnnk1YzbpAumB1myXVxuE5FnddYLc+sls+N0MktJj9vV/wCmCnhRV5UVU7mpzSyqxzl51Rynp3BYfRnQbAU8M5xpKbteTSc5c2/57orhu3GS4irm2kWInVUXPVV7LhFcl/d2WO9BbsKy7TDaldt1eWbXai16q2PM5K7EJr9SSw196tMNMxk1E2CdUSBJeeqjik5WcZeqe7mbEnHK/pE0koYzOY5fSxWth5QSnqtOMZtu0rrja0W1d7rpWbLjovldTD4B4idG1VS3X4uNuFnwvvtw32fgWJbVttmyrBHVO5Haro5jNmm1CoY62pvtmoOqfVwS8JeREX/IaruCuiajE52/qbzN7swzjNc/xNsDmFaUlSdlGTvZrd8fU3fdwdi24PB5fSvXw0EtffdLj/fI/WzzJ4oqLPdD6iThWacah3G2JA7uVlBVKy529Gp5G0ldDC1f36h37op+Z3RetQxS4VqcZfxRvCfxcotv3n7gZq1Sl4wk18H6S/BpfA4dNspjue/jVrGEk4utmnGFry8fh1lVkLv/AOH1iqLho5han61St+EaJ+UqmtmVWPKMPxcz+au5LFmO8fSvQ2ker0stuu2dXpifBscESWykY/x55rjLK1PNRcf9IwVJ0MjxWLf2nCkvi9eVvcoJP1SFeevjqVJeCcn8PRX4yv8AAwO5Pbps3091DTfFke3Cw3zVWGopaHFq1Y1bVXS7SctPQwonHq1lVyxtSdzFdFGxX8yNj4p2MqzTPcThf8phiJRw7u5LwjFb5Pnbi9VO0nu4s4sVhMvp1vrcqSdTck/Fvgv/AD4Iqs6fLo2KrSKfTHOdCtvNfc7xkMNw/wCZGU4laKiSnuF4kmilan5WLmZSo58tR1aIicWcrOLuqNj+jbSuOMWJo4zEKMYavk4zauoJNfpPfLclf13fiUfSvJ5UnSqUKV276zinvfuXDxt93gai6PjpH91/Q4a6SaDbh8JyGPCpqqN+UYBeoXR1NtSVEclbRJJwRknKqOVqKkcydy8Hcr2zmk2iuS6d5d9cwM4+Vt6NSPCVvsytxXhfjH3bnHZTnGP0dxX1fExep4xfFX8V/dmehfSbVfTzXPTezau6UZVS3vHb/Qsq7Vc6N3Fk0Tv6L3tciorXNVEc1zVaqIqKh5kxuDxWX4qeGxEXGcHZp+D/AL4PxW81ihXpYmlGrSd4vemdhOqcoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABhtRdQcP0mwG86n6g3yG2WPH7ZPcLtXzrwZBTxMV73r48Govcneq9yd6nPhcNXxuJhQox1pzaSXNvcjjq1adClKpN2ildv1I8wW/bd3rp0pe7C86nWzFb5caKlhmjxHFLZRyVTrTaIVV3FY4kd+pU/izSfDmcvejWtRPXWjeSZdodksKEpxi3bXm2lrTfrfh4RXL13MWzXH4rPcfKpGLaX6KW+0V7vvZa30LG1TUpnR049qhhOmdLpbqvZL/c3WG9V1vmhbl1A58buqu8Tv1y00rkdC1U4Oh/LxzQ8O9H4xp9nGEelNShVquvh5RjrJNPyct++m+CkuPKV3GXqvujmCrLJ4TjDydRN2dn6S/a8bP8LJonVtn3SYruJt11sdRZqjGs4xSqbRZ1gd1latbZKpU4pxVO6enkT9cNSz+HKxUVOCo5rc8zXKK2WSjNPXpVFeE1wkv5SXCUXvi/g3ZcJjIYpNWtOO6UXxT/mn4PxNS4ZqXDs13zTbV8yqEpsD1nmqsi0rrJV5YbffebnutmRfg1JnvStiTuTnqJmJxVWokzXwjzzR5ZhS31sPaFVeLhwp1P4V6EvUovmdGFb6hmP1ef6FS7h6pfaj8f0l72YSt1Lj2/dNe3Tu51KQWbXvSSnmpOd3BH36zzVKcE493fQvVFX4qrGJ4HYjhHmWgPl4r0sLVaf/AMdRR/5r8WcTrfVdIfJvhWhu/eg3/wAX+Bw7eNSIrj02e4rTxKji6m0zxJer4/DqWSSL/wDvp/8AcfWZ4Vx0By+tzqVfxsv+B+YWqnpFiYfsQ/n/AFHR+akxbnN+O5zcdS1CVNnx682rTrFJ0Xi1sFsZUS1nK74K2SqqFkRU7uCt+PxGkuEeUaO5bgWrSnGVaXvnZR+6MbDK6yxuZYquuEWqa/hu3+LM7t81Ih35bwL/AK6WSf8AM6W6L11RjuBTNXjDe8kfHyXK6sX4PZBA/wDKQvTii/mKhyL+pOHXzPCPRzJKeEnuxGJSnU5xpp3hD3ya15L1RRy4Wt/mWOlWX/TpNxj65fal8F6K97Nv6ybgZ8ezSi0D0foaW+ajXmk/NQW6ZzlpbHQ83K653BWKixwNXi1kaKklRInVs4IkkkcHgctVWg8ZiW40Iu1/GUv1Ic3zfCK3vwT79fE6tRUae+b+5Lm/Vy8W9y8WqufxKO2zJrJp7pVUYTovccuulZd7jLl2qDLa+ouNRVuZA2KllWFOWOKTi5Y4lbyMSnZHCjGtcjtf+ijNaM8VilWrKnFKOpSvaKW+8lfi14u93duV3YpOmWDqeRo+TpuTu7ytd33bt3g/uVrI1P8Ah+OkWyzaTuKl2KbgZ6y3Ytl16dR2+lvLHQyY7kHN1aRuY/g6Jsz0SF7FT9MvVu/T/EVZr6TNF6Gd5Ws4wVnUpxu2t+vT433cXFb0/FXXIj9E83qYDF/UcRujJ7r/AGZcvjw9/wAS+484GogAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFVX4ojePWadaGYxs5xC6uirs8qFumTpE/g5trppE6qJ3/AJZalOb/AOkci9ymx/RDkUcVmNTM6q3UvRj+9Jb38I/7ij6bZi6GEjhIPfPe/cv6v8iO/wCGYtOnWVaj6hY1h+T33GtYILI24WXI46WKrtjrNHLDHPRz071TrEfUSwOeiOZIrWN6uWJWuV1n+lqeLo4bD1KkYzwzdnG7UtdptST8LRTS3NXvrRe60VoUqM6lWMW41bXT4rV3bmvfx4Pk0WyXDekzQe802I72sWiwNKudtPbNQKWV8+LXKRy8GtdVqiOtsrvj1NWjG8f0xzTcOYxeGQvMYOplUvK23um91WP8P20ucLvxcYl8lj1hnq4tan7X2X8fB+p/Bs6xvs2lZvrJTWjd3sqzSmsGtWH29X4ve6eVjqPJ7cv8R1oruC8k9NL8Y3OXhG9UcitRVcnc0dzrD4Fzy3NIOeFqP0o/ahLhrx8VJePNbnc4MywNXEJYnCS1a0eD8JL9WXNPw5Mixqpubwbpn9k+UaLWuzVWA7nNKan/AIgtuEVEjobhS3u2q5XuoXO4Pe16JLFy9z4ZHs50/Sx7rhg8pxGgef0sVJqrgK61HNb4uE/1vBW3Pk0nbxShK2MpaRZdOilqYmn6Sj4qUeXv4eojDux6QbMt1+0jQLpEbFSpDqft61IbadQaanbyI6WoZFPT1bmon6aepWgcxUVOCSSSx8OHDjbsl0ZoZLnePySbvh8XT1qbfqunH96Otf3JMhMdm1THZfh8wiv9SjO0vj4+52+92NjVG5LK9Felv3ibn8bZMsdPttW9WOWVv6FfJRWH/Dnr+38740/tz+BFrKqOYaE5RgJ8XiNWXwlV1/wT/A7n1urhc/xuIjwVK6+6Gqay0k3Nan7S+iPwfahoVBVyax7ostuNfSrC9Uq6O21NQy2tqEX4pLU/lkjif+zVkkRUVrVWWxuU4PO9Nq+Y4tr6rgYRT5OUU5290b3kudl4s6WHxlfAZBTw1H/rYht+uzdr+923feTYve6Gw9H3ppp30RvR9WK357rmlqit8kcf6rdYah7Vlq7pcXN+C875Z+p+LWrxfwTkbJQKeUVdJsXiNJM5k6WEu3+1NcIwh8LRvz4eLVkljIZVRpZXgVr1rW9UecpfnYlDt70V0u2EaJ3XMNYNXKarvl0lS7an6pZdXR08l4r1bwWWSSRUbFAxP4cMCKjY2IjWpxVyuqGZ4/GaR5hGlhqTUI+jSpQTerHkkuLfGUuLe9k1hcPRy3DuVWd298pvdd8/UuS8EYzGt0uq+7JqJs2wtbdh8q8HavZxbJYqOpZ8Fdare5Y56/8ApPKsFP8Au106IrF5q2T4PJv/AHOd6v8A2oNNr/5J74w/dWtLmo8T5hjK2N/9NG0f15Ld/CuL97suVyjDp2rTorhHSAXWwaRZRk91ym1UNN/zHyS+vja643xUSX8xF1LWMjVIXwsVscccbXR/ob8XL6I+jmeYYjRmM8TGMacm/JxjfdDhZ3u3vTau27PezMNKlhqebNUm3NJazfjLmreq3Cy5F4/RPbv5N7mxXCtZ7zXNmyGGkdaMt7/1f4lS8I5ZHcPgsrern4fsk6IeetM8jWj+kVbCxXoX1ofuy3pfDfH4Gl5HmH+Z5ZTrP9Lg/euP38fiSOKsS4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPNX02mptw3P9LZmOLQXumhpLPeaHDrTPXVCRwUiQIyKZZHu7mMSqkqHuVeCIjl4/A9W/R/hI5RoTSqOLbkpVHbi73asueqkkY7pLVeO0glTvuTUF/P8Wy6La/ojoNsJx9140t2L1Frjulsp2XTNNN5mZG2vga1FY5VRWV8qO/nVsNKrFVeKce4wTN8wzLSOpq4jG62q3aFS9OzfHnBW4b53NIweGwuWQvSoWuldx9K//J/BGwqbe/sJ1jSu0myTXHDXVFdA6nuWG5y5ttq5o3pwdFLQXJsUqoqcUVro/wC6Ea9H9I8DbEQoTst6nD0kvWpwuvjc7SzDLa7dJzV39mW5/c7P8CMWs+wbd5s2ZUa69DXrNIthc51ZctCcirPz9jrEVVc9basr/wCArl71ja+NV+DZURGxrbcBpJkee2wmk9H0+CrxWrNfv2W/3tP1xfEhcTlmYZenWyme7i6b3xf7vL3XXvIK6m6nY/0kG5e15nhdln217xsdrYo2W+6TSUlsyushREjibLI1JKKv4JyNZO1zJW8sTnu4oqaJhMJV0VymVKq/rmVzT3qzlTT4uy3Sh4txd096SKzWrRzjGqcF5DGR8HuUmvX4P38Vu3kqNCtleEam3vLsv1U06lwybWXH3YTuO0ymgaxmN5ZJI2a3ZBSNRVb+XqKliuicxXsSWsYrXKiSoym5jn+IwlOjSw9Tyiw8vK4er+vSStOlL9qMf0r2dou64XnsNltKtKc6sdXyq1asOU/CS9TfD1tes2Rke0fGNWcNvuM3K2No7/qRoxpzgt8dT8OtpnwXK4suytVU73xU9I5VRf8A4JEIqlndbBV6dSLvCjWxFWN+DvCHk/g5S/8A0dyeAp14STW+cKcH8HLW+5fkai17205fZ9Xqvc5tV0+fe9T8gslNiO2LDqGNiUuE4tSU7aN+TVD5V6uFr29a+mdIqNb+biXg96ubHN5bm1CpgVgMxqauHhJ1MTN8atWT1lRVt7tuU7cdV8FZuPxeCqRrvE4aN6rSjSXhCK3a78OdvevEj5tX3I2vo+Mwuu33Yfpsm4fc7mlQ+DMtRESaptVDLz80lJRKitlq4mScXzVT3xRve1Huc5jWo20ZxlU9JqEcbm9T6pgKavCnuU2vCUvCLa3RilJpbkk3vh8DjI5TUlh8FDy+Jl+lL7K9S8Wk+L3L1k+NvnRl5zmF2ot1HTAa3x6l5dROSsteG19UyPFcVcvenLTIjYJ5mp3K9WpHx/aRUSQzbM9LMNQg8v0aoeRpvc5pf6tT+LfJL1Xv7uBacJk1WpJYnNKnlJreo/Yj8ODfr/8AJIyr38bO6S+uwfE9bLVlN5gajXWDT+nmyCsiT4IjoLZHO+NO7/UiIn78EKutHM8dPytSi4Rf2qlqa++bin8CX/zLA62pGak14R9J/dG5ETpaNkuhG6Db7qbucqtobMWzigw6Srp9Q8vyCO1TS/lGtkia2mp5pkmmkbElOiVUcT+V6N5k4IiXbQvSDMsnzPDYBYvXouaTpwi5L0tz9JpWSvreg5LdexA57lmFx2Eq13RtNR3Sbs93Dcm/dvSNBfhP9cKpty1Z2211XzQPgosltcHN/I5rlpap3D+qOo0/9JZvpny9auFxyW/0oP8A3R/5ERoJiXath36pL8n/ACLmzBzQwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeVHItL75vF6R3KtOKPNLNYa7NtTr29b3klWsNFSq+qqJ3PleiKrU4IqfDvVUT9z2PSxlPItFKVdwc1TpQ9GKu3uityMOnh55jnc6Skk5TlvfDi2ehbYs7bxsh2h4TtpyXeHhV+qMUt0sNTeqrKKSFJXyVEs6tY10yq2Niy9WxFXijGN+HwPMekP+Z6QZ3Wx0MJOCqO+qoyfBJcuLtd+tmtZbHDZbgKeHlWT1Vxuvfz+71HNuH166JXWXG3YtuY1x0HyOha1UZS5HlVpqHw8f3i5pVfG7/wAzOC+Cn5leW6aYGr5TAUa8HzjGa+/dZ/E/cXicjrw1cTOm163Erd3H6AdC/g1bUZRsq6WW66LXd0iyMosUvdyvFu5vj+lKZfzDFVf9XXPRO7g3u4GqZVmenuIiqea5UsTHnOMYS/8A16L6V7yoYzC6O07yweMdJ/sybX3Lf+JlNptfXa13VuNbgN7u1XctYKViMt9Nqjdau0ZRStRf56S4VNAlWxyfHvWXv+DmceY4M6jHL4a+CwWKwU3xdJKdJ/vQU9V/h7mc2AbxMtWviKVdLhrbpr3Nq/5+8nBVXG2JboIYLrVXJILc+3Uq3O+091rH0T/8yidX0c0jquk+CtfWdTURu4zJNI9OrXPVGes20ld3douKv4S1JJKMuahrRa9HVS3llurcb+G93duV09699muNzgfc7jeZueppZKynqonslc9nItVK+SqfK9XN5UTrvz9ZGqIrUayqXg9rmtefWpCmtzs1+CtG33akX43ceFm0fms5P+/X+d395k8rwW9ah4nd7JkuOZRVWy/MRmSW2zXCKwzXhEarWwXC41UkE8VKjF5Up7ezlibzN62dHuR3FQxEMLWhOEoqUf0W05qPrhCKlFyvv1qju9z1Y2R9zpupBqSdnxS9G/vbs7eqPDmyvfXak1l0XzGq0u0o3j7Xtp2GTuRlXZdM8skrMgljT+V1ZV09J+cnlTv4cXws/pxTiabl0sBj6CxGJweJx9VcJVIJU/4YuWol8JMqWKjicNVdKlXo4aHKLvL4u1396Nh7bdsXQk3GrpMx3a9JzQa6ZJG5JFl1F1BfQ29knmbTTTI9378Ullkav7tI3Nc3+kCMXSy7LXhYezp3lb95K33RR2cHg9HHaWKxarS/anu+5v8ANssO0h3D9HTgOLwYdoTrrovZ7PCifl7ZiuU2mCnb3fFI4JEbx/rw4mYY3LNJ8TWdXF0K0pPxlGbf3tFsoYrK6cFGjOCXqcbfgaC6YjbxhHSVbabVpXo/vCwGxXWzZLHdY4rrlUX+H3BqQyRLHMsLnuares52O5H8FRU4fq5m2XQbNMRonm0sTicJOcZRcd0XrLendXsvCzV0RekGChnGCVKlWjFp33vc/fYrS/DT3Ouw7pQanFlqGuWuwW8W+pdC7ix/Vy083FF/dOaBFRTWPpYjGvogqnKcGvimv5lM0N1qWdyh+zJfc1/Q9Cp5kNXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB5T8p1UzLZp0jGWal4tj9ouF6wfU29tgt+RUTqijlkZVVELmyxtexXN4Kvcjk7+B7Io4Khn2itLD1JNQq0ob4uz4Re52f5GHVcRVy3OqlWCTlGcuPDi0einYtfcC3lbPME3E6l7Y8YsN1yqzrU11mnx6F0bHNlki62NJGK7qpUYk0fFVXklb3r8V8u6Q0sRkWeV8FQxMpxpuylrPknZ2fFXs/Wma7ltSGYYCnXqU1FyV7W/vc+K9Rw7lMN6KTQuwuv26bTbQ6xUz41fG3JsYtfXVCf/KidEsky/HuY1yn1lVfTLMKupl9SvJ/synZe93sviz8xkMlw0NbExgl61H+2Vu7g91PRY6oVs2M7A+hpXWG59Yscd5tGC1NstqO49zmR0cSzyp4tcyH+5qmWZPpjhIqpnOcfV48nUUpffJ6q+DkVDF47JKz1cDgfKvmo2X4K/wCCM3tOzDU7btkTKvcxpjte2w0VxViW/G6PT112za5o9USNkFCyrmqk5lXlRZkVeZU5YncTr51QweaUrYCrica48ZOpqUY243k4xj93hxkjmwFSvhJ3xMKWHT4RUb1H7ldv7/uJv3ee91lKjLxVZDSzJQNrW09//Lw3OKic5WtnqKK2xw09MyR6ckMErZ6qpc5YkZA5kj489gqcZeiotXt6N3G/JSm3KTS3yktWEF6V5JpOzNya33+Nr29aVkvUndvhu32wdzsT6SpSjucrKelpKSSapWonRWUb2VVRBIiSI1yN5Pys8yyo1UbDA+VGOVvVu7Eausrx3tuyt47otbvXrJW/WajdcVxOFnv/APG9r+T+Cv6jkzNmHYFh10yXMYKCzWuzSugvN1u+BU+QW+x1HKjnNu9GqLXwN4Oa5J4qp9M6NUl6yKN7OP5QdfEV406V5SlvSU3TlJezl+g34argpp+jZtM/ampTpuUtyXFuKkl+8v0l772tvukQE3CY5qJlWXVGpOK9FTto3A4VHKjnZXt6irmvnRe/hPBb618sEvD+ZJIXoi8UR7+CqaVldXC0aKoVM0xOEq/qYjV3e5zgk1ytJe5FUxkK06nlYYOlXh+tTv8Aik2/wZsfbJu66DexVdJie5zo0KLRPIHqjFbqDgDrrRdZ4NqZoXSp3/F0kLET91+PCLzfJPpCqRdTAZk8TD2dTVl0ppfdJnaweP0ag1HEYXyMv2oXX3tfmkWP6F4JsE1IxmPLNt+CaSXi08E5K3D7PbJYmL+zVWnZwav9F4KnD4GWZjidJMLWdPHTqxlym5p/iy34aGW1Ya1BQa/ZS/kaR6Y/eFlvRubWrfqzoBoPjVzud0yWG0vrblaFdRWpj4ZZOukZCrFcrljRjUVzW8zu9V7musGguR0NKs4lhsZXlGMYuVk/SlZpWTd+d3uf81GaQ5jVyfAqrQpptu29blx37vuKvPw1dDdM46USry+oYjpKPB7zcqxzG8GosstPEv8AZOadDX/pXlDD6IRpLxnCK+Cb/kUnQ3Wq53Kb/Vk/va/qehM8yGrgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA82HTV6d3fal0u2WZvbbRTvhuV8t+aWWOtg54apZeSaXnZ/qYtXHUMVP3Rq+J6s0BxUM60IpUZN3jGVKVuKtdK3r1WmY9pJSlgNIZVEuLU1/fvTLjdsWr+iXSLWutp8R6Qm/ZM+2UcD79iGnzP+FYqJsje7/LYtwRqLxZzMrHMRU4ceJhWb4HMNF5xdXARhrN6s6n+q3b3/wCn67OCZomDxGFzaL1MQ5W4qPo2v7vS/wD0bNtWxjo+9Aqev1VuOgmDUUlDC6qumY5hAyuqoWNTi6WWvuDpJURETvc6T9u9SJnpDpLmTjh1Xm77lCF4r3KELL4JHcjl2WYZuq6cU/GT3v4t3f4kXtbt++8ffEtToN0N+k01PjbXOortr1kFKtBaKZqKrXttvWs/iq34LKxj3p8WRp+mUt+X6N5Fo9bGaT1bz4qhF603+/Z7vc2lzfFELiczzDMr0cph6PB1Huiv3efvs/d4kJMo0ri6Onc3bNEdt97fr1vHyuqRK7MLnSrVUOGz1DeZXQRTOf19crHLI+pqVVsMX61Y3mciX+jjHpTlEsXjo/VcrprdBO0qiXNq1oX3KMd8nuTdkVudBZRjVRw78ti5fae9Qv6t++3i+C+4ktpNv30w0ox3UaafNJcxsO32yNvOomoNwqHSyajajVSrT0cTHO730cMsUzYU+Depp3tRrKZrn1LG6N4zG1cPaHk54uWrTprd5HDx3yb/AGpJpy53kndyaU1QzWhQhVvLWjRV5Sf26j3Je5eHwtuRt/UXc/prt8pc3rb9fWXF+g1q00kyqNWdY+Wjr1qKOtlcz/xHLSXGeThw73Obx/mRSEwuUYvM3RUI2+tPE6vvhaUVfw9KCXuuSNbG0MIpuTv5JU9b3O6b+5tmmdctzOqMWrmQbadruZJQ63ac0MdfpXVyclXbtV8Fmp0rYrPM1/FlXUQU8zkic7i9/USrG9r5ZVJ7Lsowf1Knj8whfCVm1VW9Sw9dPVc14xjJr0vBXV00okbisdX+sSw2Gdq0FeHiqlNq+q+bS4eO7c97I87O9uFh3wZfdNwHRp6uybdtwuKvdPlmlVTPKy01C8/B89C7g6SKldJ+mSkljmZG5yRuRrFYrrRnma1dHqEcFntL65gp7oVVbXXJS8HJLepJxbW9Xd7Q+AwcMzqSxGXT8hXj+lD7Pw9XqaaXCxYDoX0lOfYXXUe23pfdA26Z5LWSJR27N6mmZPiOSv8AgnCqRXw00rk71je7k8VjVUjM0zHRTC4iLx2jVfy0FvcL2qw/h3OS9aV/fxLXhc3rU2sPmlPycnuUuMJfHgn6n2N/Xro+dkuUXlucWvb7j1ju8jOaPI8HR9ir3Ivejkq7a+CVePcvHnK3T0lz+jT8lLESlH9Wfpx6ZqS/AlJZZl85a6ppPnH0X98bMiD0qe8rQjaBodqRtxtO+O83fOqvD5aOk00ym3Mvjmfm40jYq1iU7ZoZWxypO1ampeqI1rkY7iiOu2h2Q5lnmYYfHSwSjRU03Ui9T9F3fo61mrrVerBcrogc8zLC5fhqtBV7z1d0X6XH12v433v4GjPwn+h9Wtw1Z3JV9GrYGw0WNWqo5f53Kq1VU3j/AERtGv8A6ix/TPmEdXC4FPf6U3/tj/yInQTDO1bEP1RX5v8AkXNGEGhgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAqr/FD7N6zUfQnGN4uH2pZa/AqhbZk6xM4udaqqROqld/SKoVE/tVOVe5DY/ohz2OEzKpllV+jV9KP70VvXxj/ALUUfTbLnXwkcVBb4bn7n/R/mR6/DQ5JprheXahXzBsIv2Wa01ttZQWbH46qOktsVjdJFJNVz1L04RNbUshbIvCSRGrGkUUiueiWb6WaWLr0cPCrONPCp3crNy196SUVx9Fu3BcdaSsiK0LlQpyqygnKs9yXBau7ff38eL4WRatW7IJNfr3S5nvpzCLPfylQ2otendBE+nxS2SNXi1zqVyq+5St+HXVauavxZDDx5TG46Qf5bTdLKYeSvudR76sv4uEF6oWfOUi9Sy/61JSxb17cI/YXw+0/W/gkYne9uezzSmjtW0LZLhtHeNZMstysxu1wxNZQYnbUXq3Xiu4JyQU8X8sbFT+JIiNa1/BWrz6P5RhsZKWZZrNxwtN+k/tVJcdSPi5Pxfgt7a4nHmOMrUUsNhI3qy4Lwiv1nyS8Ob4EStwe27COhz2JZFesAulbnO5TW6uTGIM5njdLdLjc7g5VqPyiLzPiY1qyPThxc+ZYle5VViNumWZriNOdI6cayVLA4Za+pwjGMOGt4NvcuSjey43gsVhKej+WSlTeviKr1dbxcpcuVuPv4ka93PR5ZBtt0G2wdGBYKlKjNdYtQZcg1IqaR3M1lY1lNSxMRU/mgpoamo7/AIKsUknBOfglryTSenmuZZnn81alh6ahTT5elJ/GTivvS8CGx+UyweEwmWR/Sqy1p+/cvuSb+653Wt2/ZvuO6TzfZtltLZHuv2kMzrVTOcvLJW00tnntbF/p+lGov7IqnQjmeHyrRHI8fL7FZXf7MlUVQ7P1Wri87zDDr7UPxWrqnQNNtuWqu7nordPN7u36sqm60bYr5V2aRKdirVXC1UM7a6niRvxWWkjqGLGz/VGkjODnKxCSxeaYLJNMcRlWMS+q42Kl6lKa1W/dNp3fg7Phc6lHCV8wyOljKH/Ww7a9bUXdL3pPd8UTQum1LEekU0wwHpauj4yOh0410db2XCSpp+633itjRYqu23FjfivO2WFZuHF7F/Wj2q1WUOGc19F8XX0czqLrYS9rfainvjOD91nbwfCzvexvBU82o080wL1K1r+pvxjL8rkpdr+4nCd72lV5081q0mgs2Y2JW2vVPSzJ6SOoW31Lm8U4xyIraikmRFfDMnMyRnwXi1yJT83yzEZBjIVsLV1qUvSpVYu1171vUo8JLimTeDxVPMKDhVhaS3Si/B/zT8HwZ+8Z2r5hto/Xs7zFKXHWuVz9K8srZp7M1PirbfU8H1FqVV/0NSanT4Np2qvMn5Wzihmv/ucLz/7sUlP+Nbo1Pe9WXOb4H7DBzwn/AKZ2j+q+HwfGP4r1FFXT41OkeUdIRc7jptiuR2zM7jQUn/Mew3SogqGUl3SNkUcNO6nc9r+anZA9eD3IqyonBjkexvon6NljqOjEVXlGVKLfk5K6vC7bbvb7V1wXDxVmZfpX9Xnmz8kmptLWW57+CSt6rff7y7zoodoD9kWxbCtFrxRNhyCWkW7ZbwROP+J1XCSWNVT4rE3kgRf3SBFPPumWeecGkVbFRfoX1Yfux3L798viaVkeX/5bllOi/wBLi/e97+7h8CRpVyWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABhtQ9P8Q1WwO86ZagWOG52PILZPb7tb6hOLKinlYrHsXw4tcvenenxTvOfDYmvg8RCvRlqzg00+TW9HHVpU69KVOaumrNepnmE39bQ9dOiz3XXvS+1ZXfLdbq6nmfiWU22skpnXezzKreVz4lbxcifw5o/hzNXuVrmqvrnRrO8u0xyWFecIuSa14tJ6s16n98Xy9dzFs2y/FZFj5U4yaT/AEWt14v+7Mtx6FDclqVcujgxfAsW1Sp9TdTLrd7ky1W643CWdmJUTZWsat0kX+JHBF/mtZx5pevjih7kV7MS0/yrCQ0qq1Z0vI0IqN2kl5SVr+guDb4N8I2cpb9z0DRvF1pZPCKn5So2+Lvqq/2vGy/Hgib23rbfiugdvul0S51F/wAvyerbW5rmt0Y387e6tG8qOdw7ooY2/ohp2cI4WIjWpx5nOz/M80rZjKMbatOCtCC/Riv5t8ZSe+T3ssmGwsMMm+Mpb23xb/pyXBGj9L9Nod5++iu3l5lT/msG0jfV4vo7SSpzQ1t0R/Jdr2ifBUbKz8nC5OKL+WfInBUY4sGLxbyLR5ZZS3VcRadZ+Kjxp0/uevL95LmRtKj9fzJ4qf6FO8Yet/al/wAV7mzD02mrNfOnAuGqdygSW06D6RUVuokc3ikd8u8lTKr0Vf3Sic5FT4pzsX90Ow8X/lv0fxw8X6WKqtv9ymor/f8Akzj8j9a0jdV8KUEl+9Jv/j+Zj9s+nEVm6cncpnLIOVa7TrFH8yJ6sDY1+a0P/Q5M2xTqfR7l1HlUq/g7/wDI+MHRUNJMTPnGH81/I+vo/dNY9rO//cttppKZKax5PX2vUfD6dqcGrDcOvhrka34I2OqhSNET/Sjfh8D40lxbzjRvLsc3ecFKjP3ws4/fF3959ZXR+pZpisOv0ZNVF/FdP8UZfQ7TeLo+d6N30jsUH5XSPXW4zXjDoGpywY9ljIlfWW5qfBkVXBGs8KdyI6mkjaid3HgzDFvSXIYYme/E4VKM+c6Tdoy9bhJ6svVJNnJhqKyzHypx/wClVd1+zPxXukt69aZurXPbjFn+T23WvTC8Q4zqXjlO6Gy5KkCuiraVzuZ9tr42qi1NFIqcVbx54n8JInNenFYHL80eGpSwtda9Ce9x8U/CcH9ma58Gt0rokcRhVUmqsHaa4PmuT5r8uK3lXn4kvcReMu0U0zx2HUyowrKrTkdazMNKfz0iVU0iwxLDcGSRojJ6SNWSJFOvKkn5ruRskcsceu/RTldOjmGJm6XlKcorUq2Vlvd42e9Se7WXFavJpulaZYubwtJKepJN3hfe93HdxS8H435qxqX8Ph0ceT7qtwK75teqOrrsTw67LU2ma7OdK7IL81edsiufxWRkDlSV71Xvl6tv6uEiJN/SbpTRyfLP8owbSqVFZ23akOW7g5cEuV3yI7RPKKmOxX16vvjF7r/alz+H5/EvuPOBqIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANEdIV0f+jfSJaD1Oj+qEP5O4UyuqcWyenhR1TZqzl4JI3iqc8buCNkiVUR7f3a5rHNsWjOkuP0XzJYrD7090o+Ely9/J+D9V04zNcrw2bYV0avHwfin/AHxR539a9Ot/fRIaq5TodWZnkWEyZNb1pKi6Y3cJYaLI7e2RHMmgmbw5k493FOWSPnex3LzPavp/L8Vo1ptg6WLUI1dR3tJJuErcGv8AynZNXsmZLiaWbaPV50dZx1lxXCS9T/tosp6FLfZkOr+yl20W8boKq6auX7M6q3WZ14rZH1+PWCSmjfLWMmn49esLIqx0KIr+WaWnjcjWL3ZPp/o7TwOkH+ZQwyjhowTdktWdRNpRaXC7cdbheKk1vLpo1mcsTlv1aVW9VtpX4qPPfxtvt67IsK2m7kNlWo9rl0I2javYteoNP6GGgkslgr0kWhp4uETFT1GcW8vWtVzVcve5VXvzLOcqz/CTWLzKjKLqtvWkrXb3v3P1bvcWrBYvL6ydHDTT1N1k+BwbJ8Yimseda7VEXGs1N1Gud5bOveslvgc2225UXyOoqGnlRPgnXL4qfWfVmqlDCLhRpxj/ABP05/HXk18BgILVnW8Zyb+C9GP4JMxulWMMt/SSazZH1fB1dpfgyo7h8eFXkLF//E35HLjK2torg4cqtf8A20f6nHRp2zetLnCn+cz7dccZjw3d5pFuBo4+RK5t0wW/zN+C0tbCldSuf/RtZbo4m/vzVq+KnHl9Z18lxeDfhq1Y++L1ZW98Ztv1RPvEQ1MdSrL1wfue9fjG3xMZuf112Zaj5l/2EtQNxNjsWpF4/LVeNULapEr7Xc2PbPQVMTlTq2VLJWxSxxPcjpE4Jyua/gvNlGXZ7haH+b0cPKVCN1J29GUXukn4uLV02lZc00fGLxOX1an1OdRKo96V96fFP3+K5lV3T09JBddVMb0x0q0y19qbRl+K1lzZqniuJVs8dNBdYZIoYp21Uao2aPmiqHxNRyubHMxzka5eCbF9G+isMJVxOIxGHUqU1HyUppXcXdtar3p70pbrXTSuij6VZxKpClSpVbTi3rqLfHgndfG3qZp7o8+je3Y9MXrUzXLcZneSy4LQvhp8gz2/VT5qq5MgRGJQ0TpePWP4Jyuk72RcVc7meqMfO6T6VZLoLl/1PAwj5Z3cacVZRv8AalbguS4vgrLeo3KMnx+kWJ8viZPUXGT4u3gv6+HvPQrpTpXp9ofpzZtJNKcWpbJjtgoWUlptlGzgyCJv9+9zlXi5zlVXOcquVVVVU8yYzGYnMMVPE4iTlObu2/F/3wXgtyNYo0aWHpRpU1aK3JHYDrHKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa83N7VNA94emFTpFuG06oshs86q+FJ0Vs9HNw4JPTzN4PhkTj/M1U4pxReKKqLJ5TnGZZHi1icFUcJr7muTXBr1M6uMwWFx9B0q8daL/AL3PwKV98n4ajcxofdKnP9l9+k1Dx2KRZoLNNMymvtC1F4oid7Y6rh5o1Y9V7ki/c3vR76WMpzCCo5rHyU+Gtxg/zcfjdeszjM9DMZhpOpgnrx5cJL+T/B+oiRtH3Wbm+ii3C3nM7Ppe215TV41U2K52XNrRVU8sEE0sUivSNXRvZI2SCNWq5HN7lRWrxLtneTZRpplcKUqutTUlNSg002k1a+9Ws3e1n6yAy/HY3IMZKepaTTTUk1/Tkbi1v6fPeJlVRp/a9tt0qdKcbwHHKG3Q43bLgytiuM1P+nrqh8kLFkjdG2JnUuRWpyuXiquVSCy/6NciorESx68vOrKT1mtVxT8Ek3Z3u78fuJLFaWZhUdNYf/TjBJW43tz3cLeBJrVr8SHo9WO1I1D0MwHNrLnOW6W2Kw49XXC00L6a23WjqbvJLUPT80/mjRLjGsa8rlV0a87ERP1VLBfRVj4/V6OLqQlSp1Zzkk5XlGSppJeit/oO+9bnuZNV9MsK1UnRjJTlBJXSsmnLfx4b9xGzRjp/N22D6H37SbWmF2ptwqcitl6xTJcjuysnslVR1cdWjXIyNXVMSzQwqjFezlRHtRVR6I215h9GmS4jMIYjC/6MVGUZxit0lJOPi/Rdm99nfc+K3w2F0tx9LDSp1l5R3TTbtazvy3q6XI0nkVi3n9K/umyLWfT/AEIrr/lOT3CKa5x4fapmW+ie2KOJnNLK9zKdvLG39UsqJx/fvLBSqZBoXk9PC1q6jTgmlrtazu2+CSb4+CIycMzz7HSr06bcpPfqrcrK3F8PiyyXo+fwxdox2uodTukAyinus0TmzQ6eY7VO/LI5O9G1lWnBZP6xw8G8U/zXoqtMp0m+lypWjLD5NFxX/ckt/wDDHw973+pMuOU6FQptVMc7v9VcPi/H3L72W4YpieL4JjdDhuFY7Q2i0WymZT262W2lZBT00TU4NjjjYiNY1E+CInAxStWq4irKrVk5Sk7tt3bfNsvsIQpwUYKyXBIyBxn0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQ07dfY35cz+32e8ZxtT0V5z6e5T/PjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunudW1T6WnotdcrH/wANa0aS1+WW/gvLR5HgtLWxt4/FWpK93Kv9U4KdvB/THkmX1PKYWtVpy5xTX5SOGtpho3iYatWLkvXFP8yMeoFn/DiahVT7hUbXMttFQ9VVZMfdW0bU/tEyt6pP9mFtw3+JvEYWOqsVUkv2qcX+L3/iQtbMNBqzu6Ul7k1+TsdQptEPw6UFT18unOrkzeP+TJcZkb/7Z0X/AKnef+Kis1byr/8Aqj/U66xGg1/0Z/j/AFNoaWZd+HY0gqI63GdntfXTxqjklyayTXfi5P35K2rlYn+zUQiMZ/iRq45NVMZVS/Zgof7bM71DNtCMP+jRfxjrfm2SWxzpsej3w6zQY5iOOZLarfSt5aagtuKQwQxN8GsZKjWp/ZCp1fpZ0ar1HOpOpKT4txu/vbJiOmuQQjqx1kv3e593br7G/Lmf2+z3j42p6K859Pc+vPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuO3X2N+XM/t9nvDanorzn09x58ZHzl09x26+xvy5n9vs94bU9Fec+nuPPjI+cunuUzHmoxsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH66uT03fI/bM/bMdXJ6bvkLMWY6uT03fIWYsx1cnpu+QsxZjq5PTd8hZizHVyem75CzFmOrk9N3yFmLMdXJ6bvkLMWY6uT03fIWYsx1cnpu+QsxZjq5PTd8hZizHVyem75CzFmOrk9N3yFmLMdXJ6bvkLMWY6uT03fIWYsx1cnpu+QsxZjq5PTd8hZizHVyem75CzFmOrk9N3yFmLMdXJ6bvkLMWY6uT03fIWYsx1cnpu+QsxZjq5PTd8hZizHVyem75CzFmOrk9N3yFmLMdXJ6bvkLMWY6uT03fIWYsx1cnpu+QsxZjq5PTd8hZizHVyem75CzFmOrk9N3yFmLMdXJ6bvkLMWY6uT03fIWYsx1cnpu+QsxZjq5PTd8hZizHVyem75CzFmOrk9N3yFmLMdXJ6bvkLMWY6uT03fIWYsx1cnpu+QsxZjq5PTd8hZizHVyem75CzFmOrk9N3yFmLMdXJ6bvkLMWY6uT03fIWYsx1cnpu+QsxZjq5PTd8hZizHVyem75CzFmOrk9N3yFmLMdXJ6bvkLMWY6uT03fIWYsx1cnpu+QsxZjq5PTd8hZizHVyem75CzFmOrk9N3yFmLMdXJ6bvkLMWY6uT03fIWYsx1cnpu+QsxZjq5PTd8hZizHVyem75CzFmOrk9N3yFmLMdXJ6bvkLMWY6uT03fIWYsx1cnpu+QsxZjq5PTd8hZizHVyem75CzFmOrk9N3yFmLM//9k='/%3E%3C/defs%3E%3C/svg%3E%0A");
}



.ux4g-label-m-default {
  padding-right: var(--ux4g-padding-3xs);
}

.ux4g-topbar__wrap {
  min-height: 46px;
  gap: var(--ux4g-inline-l);
}



.ux4g-topbar__skip {
  color: inherit;
  text-decoration: none;
  padding-right: var(--ux4g-padding-xs);
}

.acc-top-divider {
  height: 20px;
  border-color: var(--ux4g-border-color-primary-default) !important;
}

.ux4g-topbar__group {
  gap: var(--ux4g-inline-xs);
}

/* Icon buttons (A-, A, A+, icons) */
.ux4g-topbar__iconbtn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  height: 36px;
  width: 36px;
  padding-inline: var(--ux4g-padding-s);
  border-radius: var(--ux4g-radius-sm);
  font-size: var(--ux4g-fs-14);
  font-weight: var(--ux4g-fw-medium, 600);
  cursor: pointer;
  transition: background-color 160ms ease, transform 80ms ease;
  margin-inline: var(--ux4g-margin-2xs);
}

.ux4g-topbar__iconbtn:hover {
  background: color-mix(in srgb, var(--ux4g-bg-neutral-subtle) 12%, transparent);
}

/* Language select (button style;
 plug your dropdown) */
 .ux4g-topbar__select .ux4g-topbar__selectbtn{
  gap: var(--ux4g-inline-s);
 }
.ux4g-topbar__selectbtn {
  appearance: none;
  border: var(--ux4g-border-width-none);
  background: transparent;
  color: inherit;
  height: 36px;
  padding-inline: var(--ux4g-padding-xs);
  border-radius: var(--ux4g-radius-sm);
  font-size: var(--ux4g-fs-14);
  cursor: pointer;
  margin-inline: var(--ux4g-margin-2xs);
}

.icon-language {
  padding-inline: var(--ux4g-padding-xs);

}
.ux4g-topbar__selectbtn .ux4g-icon-outlined,
.ux4g-topbar__group .ux4g-topbar__iconbtn .ux4g-icon-outlined,
.ux4g-topbar__iconbtn .ux4g-icon-outlined,
 .ux4g-icon-outlined{
  color: var(--ux4g-text-neutral-inverse);
}

.ux4g-topbar__selectbtn:hover {
  background: rgba(var(--ux4g-rgb-white, 255, 255, 255), 0.12);
}



.ux4g-topbar__wrap a {
  text-decoration: none;
}

.ux4g-topbar__wrap .ux4g-label-m-default {
  color: var(--ux4g-text-neutral-inverse, #fafafa);
}

.ux4g-topbar__wrap a .ux4g-label-m-default {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
}


/* Icon Styles */
.ux4g-topbar__wrap .ux4g-icon-outlined,
.ux4g-topbar__wrap svg {
  font-size: var(--ux4g-fs-16, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ux4g-icon-neutral-inverse, #fafafa) !important;
  fill: var(--ux4g-icon-neutral-inverse, #fafafa) !important;
}


.ux4g-checkbox {
     display: flex;
     align-items: baseline;
     gap: var(--ux4g-inline-s);
     position: var(--ux4g-pos-relative);
     user-select: none;
     box-sizing: border-box;
     width: 100%;
     pointer-events: none;
 }

 .ux4g-checkbox.ux4g-combobox-option {
     pointer-events: auto;
 }

.ux4g-checkbox-reverse {
     flex-direction: row-reverse;
}

.ux4g-checkbox-input {
     position: var(--ux4g-pos-absolute);
     width: var(--ux4g-size-20);
     height: var(--ux4g-size-20);
     opacity: 0;
     pointer-events: none;
}

.ux4g-checkbox-control {
     display: flex;
     align-items: center;
     justify-content: center;
     height: var(--ux4g-size-20);
     width: var(--ux4g-size-20);
     flex-shrink: 0;
     position: var(--ux4g-pos-relative);
     padding: var(--ux4g-padding-none);
     aspect-ratio: 1/1;
     pointer-events: auto;
     cursor: pointer;
 }

.ux4g-checkmark {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
     border-radius: var(--ux4g-radius-sm);
     background-color: var(--ux4g-bg-neutral);
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     flex-shrink: 0;
     position: var(--ux4g-pos-relative);
     width: var(--ux4g-size-16);
     height: var(--ux4g-size-16);
}

.ux4g-checkmark::after {
     content: "";
     display: block;
     width: 60%;
     height: 60%;
     background-color: currentColor;
     -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>');
     mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>');
     -webkit-mask-size: contain;
     mask-size: contain;
     -webkit-mask-position: center;
     mask-position: center;
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     opacity: 0;
     transform: scale(0.5);
     transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}

.ux4g-checkbox-input:indeterminate~.ux4g-checkbox-control .ux4g-checkmark::after {
     -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>');
     mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>');
     opacity: 1;
     transform: scale(1);
}

.ux4g-checkbox-content {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     gap: var(--ux4g-stack-2xs);
     flex: 1;
 }

.ux4g-checkbox-header {
     display: flex;
     align-items: center;
     gap: var(--ux4g-inline-xs);
     /* width: 100%; */
}

.ux4g-checkbox-label {
     font-size: var(--ux4g-fs-14);
     line-height: var(--ux4g-lh-18);
     font-weight: var(--ux4g-fw-medium);
     white-space: normal;
     color: var(--ux4g-text-neutral-primary);
     flex: 1;
}

.ux4g-checkbox-icon {
     width: var(--ux4g-size-20);
     height: var(--ux4g-size-20);
     color: var(--ux4g-text-neutral-secondary);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}

.ux4g-checkbox-description {
     display: flex;
     align-items: flex-start;
     gap: var(--ux4g-inline-xs);
     font-size: var(--ux4g-fs-12);
     line-height: var(--ux4g-lh-16);
     font-weight: var(--ux4g-fw-regular);
     white-space: normal;
     color: var(--ux4g-text-neutral-secondary);
}

.ux4g-checkbox-desc-icon {
     width: var(--ux4g-size-16);
     height: var(--ux4g-size-16);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     color: var(--ux4g-text-neutral-secondary);
}

.ux4g-checkbox:hover .ux4g-checkbox-input:not(:disabled):not(:checked):not(:indeterminate)~.ux4g-checkbox-control .ux4g-checkmark {
     border-color: var(--ux4g-border-color-neutral-hover);
     background-color: var(--ux4g-bg-neutral-subtle);
}

.ux4g-checkbox:hover .ux4g-checkbox-input:not(:disabled):checked~.ux4g-checkbox-control .ux4g-checkmark,
.ux4g-checkbox:hover .ux4g-checkbox-input:not(:disabled):indeterminate~.ux4g-checkbox-control .ux4g-checkmark {
     background-color: var(--ux4g-bg-primary-strong-hover);
     border-color: var(--ux4g-border-color-primary-hover);
}

.ux4g-checkbox:active .ux4g-checkbox-input:not(:disabled):not(:checked):not(:indeterminate)~.ux4g-checkbox-control .ux4g-checkmark {
     background-color: var(--ux4g-bg-neutral-emphasis);
     border-color: var(--ux4g-border-color-neutral-active);
     box-shadow: 0 0 0 2px var(--ux4g-bg-neutral), 0 0 0 4px var(--ux4g-bg-primary-strong);
}

.ux4g-checkbox:active .ux4g-checkbox-input:not(:disabled):checked~.ux4g-checkbox-control .ux4g-checkmark,
.ux4g-checkbox:active .ux4g-checkbox-input:not(:disabled):indeterminate~.ux4g-checkbox-control .ux4g-checkmark {
     background-color: var(--ux4g-bg-primary-stronger);
     border-color: var(--ux4g-bg-primary-stronger);
     box-shadow: 0 0 0 2px var(--ux4g-bg-neutral), 0 0 0 4px var(--ux4g-bg-primary-strong);
}

.ux4g-checkbox-input:checked~.ux4g-checkbox-control .ux4g-checkmark {
     background-color: var(--ux4g-bg-primary-strong);
     border-color: var(--ux4g-border-color-primary-strong);
     color: var(--ux4g-text-neutral-inverse);
}

.ux4g-checkbox-input:checked~.ux4g-checkbox-control .ux4g-checkmark::after {
     opacity: 1;
     transform: scale(1);
}

.ux4g-checkbox-input:focus-visible~.ux4g-checkbox-control .ux4g-checkmark {
     box-shadow: 0 0 0 2px var(--ux4g-bg-neutral), 0 0 0 4px var(--ux4g-bg-primary-strong);
}

.ux4g-checkbox-input:indeterminate~.ux4g-checkbox-control .ux4g-checkmark {
     background-color: var(--ux4g-bg-primary-strong);
     border-color: var(--ux4g-border-color-primary-strong);
     color: var(--ux4g-text-neutral-inverse);
}

.ux4g-checkbox-input:disabled~.ux4g-checkbox-control .ux4g-checkmark {
     background-color: var(--ux4g-bg-neutral-disabled);
     border-color: var(--ux4g-border-color-neutral-default);
     color: var(--ux4g-text-neutral-disabled);
     pointer-events: none;
}

.ux4g-checkbox-input:disabled~.ux4g-checkbox-content {
     opacity: 0.6;
     pointer-events: none;
}

.ux4g-checkbox-input:disabled~.ux4g-checkbox-content * {
     color: var(--ux4g-text-neutral-disabled);
}

.ux4g-checkbox:has(.ux4g-checkbox-input:disabled) {
     pointer-events: none;
}

.ux4g-checkbox-input:disabled:checked~.ux4g-checkbox-control .ux4g-checkmark,
.ux4g-checkbox-input:disabled:indeterminate~.ux4g-checkbox-control .ux4g-checkmark {
     background-color: var(--ux4g-bg-neutral-disabled);
     border-color: var(--ux4g-border-color-neutral-default);
     color: var(--ux4g-text-neutral-disabled);
}

.ux4g-checkbox-sm {
     gap: var(--ux4g-inline-xs);
}

.ux4g-checkbox-sm .ux4g-checkbox-control {
     height: var(--ux4g-size-16);
     width: var(--ux4g-size-16);
}

.ux4g-checkbox-sm .ux4g-checkmark {
     width: var(--ux4g-size-16);
     height: var(--ux4g-size-16);
}

.ux4g-checkbox-sm .ux4g-checkbox-label {
     font-size: var(--ux4g-fs-12);
     line-height: var(--ux4g-lh-16);
}

.ux4g-checkbox-sm .ux4g-checkbox-description {
     font-size: var(--ux4g-fs-12);
     line-height: var(--ux4g-lh-16);
}

.ux4g-checkbox-sm .ux4g-checkbox-desc-icon {
     width: var(--ux4g-size-14);
     height: var(--ux4g-size-14);
}

.ux4g-checkbox-sm .ux4g-checkbox-icon {
     width: var(--ux4g-size-16);
     height: var(--ux4g-size-16);
}

.ux4g-checkbox-md .ux4g-checkmark {
     width: var(--ux4g-size-20);
     height: var(--ux4g-size-20);
}

.ux4g-checkbox-md .ux4g-checkbox-control {
     height: var(--ux4g-size-20);
     width: var(--ux4g-size-20);
}

.ux4g-checkbox-md .ux4g-checkbox-label {
     font-size: var(--ux4g-fs-14);
     line-height: var(--ux4g-lh-18);
}

.ux4g-checkbox-md .ux4g-checkbox-description {
     font-size: var(--ux4g-fs-12);
     line-height: var(--ux4g-lh-16);
}

.ux4g-checkbox-md .ux4g-checkbox-desc-icon {
     width: var(--ux4g-size-16);
     height: var(--ux4g-size-16);
}

.ux4g-checkbox-md .ux4g-checkbox-icon {
     width: var(--ux4g-size-20);
     height: var(--ux4g-size-20);
}

.ux4g-checkbox-lg {
     gap: var(--ux4g-inline-m);
}

.ux4g-checkbox-lg .ux4g-checkbox-control {
     height: var(--ux4g-size-24);
     width: var(--ux4g-size-24);
}

.ux4g-checkbox-lg .ux4g-checkmark {
     width: var(--ux4g-size-24);
     height: var(--ux4g-size-24);
}

.ux4g-checkbox-lg .ux4g-checkbox-label {
     font-size: var(--ux4g-fs-16);
     line-height: var(--ux4g-lh-20);
}

.ux4g-checkbox-lg .ux4g-checkbox-description {
     font-size: var(--ux4g-fs-14);
     line-height: var(--ux4g-lh-18);
}

.ux4g-checkbox-lg .ux4g-checkbox-desc-icon {
     width: var(--ux4g-size-18);
     height: var(--ux4g-size-18);
}

.ux4g-checkbox-lg .ux4g-checkbox-icon {
     width: var(--ux4g-size-24);
     height: var(--ux4g-size-24);
}

.ux4g-checkbox.ux4g-checkbox-error .ux4g-checkbox-input:not(:checked):not(:indeterminate)~.ux4g-checkbox-control .ux4g-checkmark {
     border-color: var(--ux4g-border-color-error-strong) !important;
}

.ux4g-checkbox.ux4g-checkbox-error:hover .ux4g-checkbox-input:not(:disabled):not(:checked):not(:indeterminate)~.ux4g-checkbox-control .ux4g-checkmark {
     background-color: var(--ux4g-bg-error-subtle) !important;
}

.ux4g-checkbox.ux4g-checkbox-error .ux4g-checkbox-input:not(:checked):not(:indeterminate):focus-visible~.ux4g-checkbox-control .ux4g-checkmark,
.ux4g-checkbox.ux4g-checkbox-error:active .ux4g-checkbox-input:not(:checked):not(:indeterminate)~.ux4g-checkbox-control .ux4g-checkmark {
     box-shadow: 0 0 0 2px var(--ux4g-bg-neutral), 0 0 0 4px var(--ux4g-bg-error-strong) !important;
}


/* Description Variants (Standalone) - Semantic status mapping */
.ux4g-checkbox-desc-helper {
     color: var(--ux4g-text-neutral-secondary);
}

.ux4g-checkbox-desc-error {
     color: var(--ux4g-text-status-error);
}

.ux4g-checkbox-desc-warning {
     color: var(--ux4g-text-status-warning);
}

.ux4g-checkbox-desc-success {
     color: var(--ux4g-text-status-success);
}

.ux4g-checkbox-desc-info {
     color: var(--ux4g-text-status-info);
}

/* Description Variant Icons - Standalone Overrides */
.ux4g-checkbox-desc-icon-helper,
.ux4g-checkbox-desc-icon-helper .ux4g-checkbox-icon {
     color: var(--ux4g-text-neutral-secondary);
}

.ux4g-checkbox-desc-icon-error,
.ux4g-checkbox-desc-icon-error .ux4g-checkbox-icon {
     color: var(--ux4g-icon-status-error);
}

.ux4g-checkbox-desc-icon-warning,
.ux4g-checkbox-desc-icon-warning .ux4g-checkbox-icon {
     color: var(--ux4g-icon-status-warning);
}

.ux4g-checkbox-desc-icon-success,
.ux4g-checkbox-desc-icon-success .ux4g-checkbox-icon {
     color: var(--ux4g-icon-status-success);
}

.ux4g-checkbox-required{
     color: var(--ux4g-text-status-error);
}

.ux4g-checkbox-desc-icon-info,
.ux4g-checkbox-desc-icon-info .ux4g-checkbox-icon {
     color: var(--ux4g-icon-status-info);
}


/* Mobile only: apply mobile variant */
@media (max-width: 768px) {
     .ux4g-checkbox-md {
          gap: var(--ux4g-inline-m);
     }

     .ux4g-checkbox-md .ux4g-checkbox-control {
          height: var(--ux4g-size-24);
          width: var(--ux4g-size-24);
     }

     .ux4g-checkbox-md .ux4g-checkmark {
          width: var(--ux4g-size-24);
          height: var(--ux4g-size-24);
     }

     .ux4g-checkbox-md .ux4g-checkbox-label {
          font-size: var(--ux4g-fs-16);
          line-height: var(--ux4g-lh-20);
     }

     .ux4g-checkbox-md .ux4g-checkbox-description {
          font-size: var(--ux4g-fs-12);
          line-height: var(--ux4g-lh-18);
     }

     .ux4g-checkbox-md .ux4g-checkbox-desc-icon {
          width: var(--ux4g-size-18);
          height: var(--ux4g-size-18);
     }

     .ux4g-checkbox-md .ux4g-checkbox-icon {
          width: var(--ux4g-size-24);
          height: var(--ux4g-size-24);
     }
}

.ux4g-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--ux4g-inline-s);
    cursor: default;
    position: var(--ux4g-pos-relative);
    user-select: none;
    box-sizing: border-box;
}

.ux4g-radio-reverse {
    flex-direction: row-reverse;
}

.ux4g-radio-input {
    position: var(--ux4g-pos-absolute);
    width: 0;
    height: 0;
    opacity: 0;
    margin: var(--ux4g-margin-none);
    padding: var(--ux4g-padding-none);
    pointer-events: none;
}

.ux4g-radio-control {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--ux4g-size-20, 1.25rem);
    width: var(--ux4g-size-20, 1.25rem);
    flex-shrink: 0;
    position: var(--ux4g-pos-relative);
    padding: var(--ux4g-padding-none);
    aspect-ratio: 1/1;
    cursor: pointer;
}

.ux4g-radiomark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-full);
    background-color: var(--ux4g-bg-neutral);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: var(--ux4g-pos-relative);
    width: var(--ux4g-size-20);
    height: var(--ux4g-size-20);
    box-shadow: var(--ux4g-shadow-l1);
}

.ux4g-radiomark::after {
    content: "";
    position: var(--ux4g-pos-absolute);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    display: block;
    width: 50%;
    height: 50%;
    border-radius: var(--ux4g-radius-full);
    background-color: var(--ux4g-text-neutral-inverse);
    opacity: 0;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}

.ux4g-radio-content {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--ux4g-stack-2xs);
    flex-shrink: 0;
}

.ux4g-radio-header {
    display: inline-flex;
    align-items: center;
    gap: var(--ux4g-inline-xs);
    flex-shrink: 0;
}

.ux4g-radio-label {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-18);
    font-weight: var(--ux4g-fw-medium);
    white-space: var(--ux4g-tw-nowrap);
    color: var(--ux4g-text-neutral-primary);
}

.ux4g-radio-description {
    display: inline-flex;
    align-items: center;
    gap: var(--ux4g-inline-xs);
    flex-shrink: 0;
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
    font-weight: var(--ux4g-fw-regular);
    white-space: var(--ux4g-tw-nowrap);
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-radio-desc-icon {
    width: var(--ux4g-size-16);
    height: var(--ux4g-size-16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-radio-desc-icon .ux4g-icon,
.ux4g-radio-desc-icon [class*="ux4g-icon"] {
    color: inherit;
}

.ux4g-radio-icon {
    width: var(--ux4g-size-20);
    height: var(--ux4g-size-20);
    color: var(--ux4g-text-neutral-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ux4g-radio-icon .ux4g-icon,
.ux4g-radio-icon [class*="ux4g-icon"] {
    color: inherit;
}

/* Base Interactions */
.ux4g-radio-input:not(:disabled):not(:checked)~.ux4g-radio-control:hover .ux4g-radiomark,
.ux4g-radio.is-hovered .ux4g-radio-input:not(:disabled):not(:checked)~.ux4g-radio-control .ux4g-radiomark {
    border-color: var(--ux4g-border-color-neutral-hover);
    background-color: var(--ux4g-bg-neutral-subtle);
}

.ux4g-radio-input:not(:disabled):checked~.ux4g-radio-control:hover .ux4g-radiomark,
.ux4g-radio.is-hovered .ux4g-radio-input:not(:disabled):checked~.ux4g-radio-control .ux4g-radiomark {
    background-color: var(--ux4g-bg-primary-strong-hover);
    border-color: var(--ux4g-border-color-primary-hover);
}

.ux4g-radio-input:not(:disabled):checked~.ux4g-radio-control:hover .ux4g-radiomark::after,
.ux4g-radio.is-hovered .ux4g-radio-input:not(:disabled):checked~.ux4g-radio-control .ux4g-radiomark::after {
    background-color: var(--ux4g-bg-neutral);
}

.ux4g-radio-input:not(:disabled):not(:checked)~.ux4g-radio-control:active .ux4g-radiomark,
.ux4g-radio.is-active .ux4g-radio-input:not(:disabled):not(:checked)~.ux4g-radio-control .ux4g-radiomark {
    background-color: var(--ux4g-bg-neutral-emphasis);
    border-color: var(--ux4g-border-color-neutral-active);
}

.ux4g-radio-input:not(:disabled):checked~.ux4g-radio-control:active .ux4g-radiomark,
.ux4g-radio.is-active .ux4g-radio-input:not(:disabled):checked~.ux4g-radio-control .ux4g-radiomark {
    background-color: var(--ux4g-bg-primary-stronger);
    border-color: var(--ux4g-bg-primary-stronger);
}

.ux4g-radio-input:not(:disabled):checked~.ux4g-radio-control:active .ux4g-radiomark::after,
.ux4g-radio.is-active .ux4g-radio-input:not(:disabled):checked~.ux4g-radio-control .ux4g-radiomark::after {
    background-color: var(--ux4g-bg-neutral);
}

/* Checked State */
.ux4g-radio-input:checked~.ux4g-radio-control .ux4g-radiomark {
    background-color: var(--ux4g-bg-primary-strong);
    border-color: var(--ux4g-bg-primary-strong);
}

.ux4g-radio-input:checked~.ux4g-radio-control .ux4g-radiomark::after {
    background-color: var(--ux4g-text-neutral-inverse);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Focus State */
.ux4g-radio-input:focus-visible~.ux4g-radio-control .ux4g-radiomark,
.ux4g-radio.is-focused .ux4g-radio-control .ux4g-radiomark {
    box-shadow: 0 0 0 2px var(--ux4g-bg-neutral), 0 0 0 4px var(--ux4g-bg-primary-strong);
    outline: none;
}

/* Disabled State */
.ux4g-radio-input:disabled~.ux4g-radio-control .ux4g-radiomark {
    background-color: var(--ux4g-bg-neutral-disabled);
    border-color: var(--ux4g-border-color-neutral-default);
    cursor: not-allowed;
}

.ux4g-radio-input:disabled~.ux4g-radio-content {
    opacity: 0.6;
    cursor: not-allowed;
}

.ux4g-radio-input:disabled~.ux4g-radio-content * {
    color: var(--ux4g-text-neutral-disabled);
}

.ux4g-radio:has(.ux4g-radio-input:disabled) {
    cursor: not-allowed;
}

.ux4g-radio-input:disabled:checked~.ux4g-radio-control .ux4g-radiomark {
    background-color: var(--ux4g-bg-neutral-disabled);
    border-color: var(--ux4g-border-color-neutral-default);
}

.ux4g-radio-input:disabled:checked~.ux4g-radio-control .ux4g-radiomark::after {
    background-color: var(--ux4g-text-neutral-disabled);
}

/* Sizes */
.ux4g-radio-sm {
    gap: var(--ux4g-inline-xs);
}

.ux4g-radio-sm .ux4g-radio-control,
.ux4g-radio-sm .ux4g-radiomark {
    height: var(--ux4g-size-16);
    width: var(--ux4g-size-16);
}

.ux4g-radio-sm .ux4g-radio-label {
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
}

.ux4g-radio-sm .ux4g-radio-description {
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
}

.ux4g-radio-sm .ux4g-radio-desc-icon {
    width: var(--ux4g-size-14);
    height: var(--ux4g-size-14);
}

.ux4g-radio-sm .ux4g-radio-icon {
    width: var(--ux4g-size-16);
    height: var(--ux4g-size-16);
}

.ux4g-radio-md .ux4g-radiomark,
.ux4g-radio-md .ux4g-radio-control {
    width: var(--ux4g-size-20);
    height: var(--ux4g-size-20);
}

.ux4g-radio-md .ux4g-radio-label {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-18);
}

.ux4g-radio-md .ux4g-radio-description {
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
}

.ux4g-radio-md .ux4g-radio-desc-icon {
    width: var(--ux4g-size-16);
    height: var(--ux4g-size-16);
}

.ux4g-radio-md .ux4g-radio-icon {
    width: var(--ux4g-size-20);
    height: var(--ux4g-size-20);
}

.ux4g-radio-lg {
    gap: var(--ux4g-inline-m);
}

.ux4g-radio-lg .ux4g-radio-control,
.ux4g-radio-lg .ux4g-radiomark {
    height: var(--ux4g-size-24);
    width: var(--ux4g-size-24);
}

.ux4g-radio-lg .ux4g-radio-label {
    font-size: var(--ux4g-fs-16);
    line-height: var(--ux4g-lh-20);
}

.ux4g-radio-lg .ux4g-radio-description {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-18);
}

.ux4g-radio-lg .ux4g-radio-desc-icon {
    width: var(--ux4g-size-18);
    height: var(--ux4g-size-18);
}

.ux4g-radio-lg .ux4g-radio-icon {
    width: var(--ux4g-size-24);
    height: var(--ux4g-size-24);
}

/* Error State */

.ux4g-radio.ux4g-radio-error .ux4g-radio-input:not(:disabled):not(:checked)~.ux4g-radio-control:hover .ux4g-radiomark {
    background-color: var(--ux4g-bg-error-subtle) !important;
    border-color: var(--ux4g-border-color-error-strong) !important;
}

.ux4g-radio.ux4g-radio-error .ux4g-radio-input:not(:checked)~.ux4g-radio-control .ux4g-radiomark {
    border-color: var(--ux4g-border-color-error-strong) !important;
}

.ux4g-radio.ux4g-radio-error .ux4g-radio-input:not(:checked):focus-visible~.ux4g-radio-control .ux4g-radiomark {
    box-shadow: 0 0 0 2px var(--ux4g-bg-neutral), 0 0 0 4px var(--ux4g-bg-error-strong) !important;
}

/* Semantic Variants */


















/* Description Variants (Standalone) - Semantic status mapping */
.ux4g-radio-desc-helper {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-radio-desc-error {
    color: var(--ux4g-text-status-error);
}

.ux4g-radio-desc-warning {
    color: var(--ux4g-text-status-warning);
}

.ux4g-radio-desc-success {
    color: var(--ux4g-text-status-success);
}

.ux4g-radio-desc-info {
    color: var(--ux4g-text-status-info);
}

/* Description Variant Icons - Standalone Overrides */
.ux4g-radio-desc-icon-helper,
.ux4g-radio-desc-icon-helper .ux4g-radio-icon,
.ux4g-radio-desc-icon-helper [class*="ux4g-icon"] {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-radio-desc-icon-error,
.ux4g-radio-desc-icon-error .ux4g-radio-icon,
.ux4g-radio-desc-icon-error [class*="ux4g-icon"] {
    color: var(--ux4g-icon-status-error);
}

.ux4g-radio-desc-icon-warning,
.ux4g-radio-desc-icon-warning .ux4g-radio-icon,
.ux4g-radio-desc-icon-warning [class*="ux4g-icon"] {
    color: var(--ux4g-icon-status-warning);
}

.ux4g-radio-desc-icon-success,
.ux4g-radio-desc-icon-success .ux4g-radio-icon,
.ux4g-radio-desc-icon-success [class*="ux4g-icon"] {
    color: var(--ux4g-icon-status-success);
}

.ux4g-radio-desc-icon-info,
.ux4g-radio-desc-icon-info .ux4g-radio-icon,
.ux4g-radio-desc-icon-info [class*="ux4g-icon"] {
    color: var(--ux4g-icon-status-info);
}

/* Mobile only: apply mobile variant */
@media (max-width: 768px) {
    .ux4g-radio-md {
        gap: var(--ux4g-inline-m);
    }

    .ux4g-radio-md .ux4g-radio-control,
    .ux4g-radio-md .ux4g-radiomark {
        height: var(--ux4g-size-24);
        width: var(--ux4g-size-24);
    }

    .ux4g-radio-md .ux4g-radio-label {
        font-size: var(--ux4g-fs-16);
        line-height: var(--ux4g-lh-20);
    }

    .ux4g-radio-md .ux4g-radio-description {
        font-size: var(--ux4g-fs-14);
        line-height: var(--ux4g-lh-18);
    }

    .ux4g-radio-md .ux4g-radio-desc-icon {
        width: var(--ux4g-size-18);
        height: var(--ux4g-size-18);
    }

    .ux4g-radio-md .ux4g-radio-icon {
        width: var(--ux4g-size-24);
        height: var(--ux4g-size-24);
    }
}

/* ========================================= UX4G Breadcrumb (Base) ========================================= */
.ux4g-breadcrumb .ux4g-breadcrumb-list {
    flex-wrap: wrap;
    gap: var(--ux4g-space-3);
    --ux4g-fs-current: var(--ux4g-fs-14);
    --ux4g-lh-current: var(--ux4g-lh-18);
    --ux4g-fw-current: var(--ux4g-font-weight-medium);
}

.ux4g-breadcrumb .ux4g-breadcrumb-item {
    list-style: none;
    display: inline-flex;
    align-items: center;
}

.ux4g-breadcrumb .ux4g-breadcrumb-link {
    color: var(--ux4g-text-link-neutral-default);
    text-decoration: none;
    display: flex;
    align-items: center;
}

.ux4g-breadcrumb .ux4g-breadcrumb-link span {
    display: flex;
    align-items: center;
}

.ux4g-breadcrumb .ux4g-breadcrumb-link:hover {
    color: var(--ux4g-text-link-default-hover);
}

/* Current item */
.ux4g-breadcrumb .ux4g-breadcrumb-item.active {
    color: var(--ux4g-text-link-default-active);
}

/* ========================================= Variant 1: Divider (›) ========================================= */
.ux4g-breadcrumb-divider .ux4g-breadcrumb-item+.ux4g-breadcrumb-item::before,
.ux4g-breadcrumb-menu li+li::before {
    content: "›";
    font-size: var(--ux4g-fs-20);
    margin-left: var(--ux4g-space-4);
    margin-right: var(--ux4g-space-4);
    color: var(--ux4g-text-link-neutral-default);
    display: inline-flex;
    align-items: center;
    vertical-align: var(--ux4g-va-middle);
    line-height: normal;
    position: var(--ux4g-pos-relative);
    top: -2px;
}

/* ========================================= Variant 2: Icon Divider (chevron_right) Uses your "Material Icons Outlined" ========================================= */
.ux4g-breadcrumb-icon .ux4g-breadcrumb-item+.ux4g-breadcrumb-item::before {
    content: "/";
    font-size: var(--ux4g-fs-20);
    margin: var(--ux4g-margin-none) var(--ux4g-space-4);
    color: var(--ux4g-text-link-neutral-default);
    display: inline-flex;
    align-items: center;
    vertical-align: var(--ux4g-va-middle);
}

/* dropdown menu */
/* ===== Dropdown ===== */
/* Wrapper */
.ux4g-breadcrumb-dropdown {
    position: var(--ux4g-pos-relative);
}

/* Toggle button */
.ux4g-breadcrumb-toggle {
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.ux4g-breadcrumb-toggle:hover,
.ux4g-breadcrumb-toggle:focus-visible {
    color: var(--ux4g-text-link-default-hover);
}

.ux4g-breadcrumb-toggle .ux4g-icon-outlined{
    font-size: var(--ux4g-fs-20);
    color: var(--ux4g-text-link-neutral-active);
    display: flex;
    align-items: center;
    width: 20px;
    height: 20px;
}

.ux4g-breadcrumb-toggle .ux4g-icon {
    font-size: var(--ux4g-fs-20);
    color: var(--ux4g-text-link-neutral-active);
    transition: transform 0.2s ease;
    transform: rotate(0deg);
    display: flex;
    align-items: center;
}

.ux4g-breadcrumb-toggle[aria-expanded="true"] .ux4g-icon {
    transform: rotate(180deg);
}

/* Menu base */
.ux4g-breadcrumb-menu {
    visibility: var(--ux4g-visibility-hidden);
    position: var(--ux4g-pos-absolute) ;
    top: var(--ux4g-space-8) ;
    left: var(--ux4g-pos-start-0) ;
    min-width: 220px;
    background: var(--ux4g-bg-neutral-elevated);
    border-radius: var(--ux4g-radius-sm);
    box-shadow: var(--ux4g-shadow-l2);
    padding: var(--ux4g-space-5);
    white-space: nowrap;
    display: flex;
    align-items: center;
    list-style: none;
    gap: var(--ux4g-space-3);
}

.ux4g-breadcrumb-menu li {
    display: flex;
    align-items: center;
}

/* Responsive Dropdown Menu for Mobile */
@media (max-width: 767px) {
    .ux4g-breadcrumb-menu {
        flex-direction: column;
        align-items: flex-start;
        min-width: fit-content;
    }

    .ux4g-breadcrumb-menu li+li::before {
        display: none;
    }
}

.ux4g-breadcrumb-menu.show {
    visibility: var(--ux4g-visibility-visible);
}

.ux4g-breadcrumb-menuitem {
    color: var(--ux4g-text-link-neutral-default);
    text-decoration: none;
    display: flex;
    align-items: center;
    --ux4g-fs-current: var(--ux4g-fs-14);
    --ux4g-lh-current: var(--ux4g-lh-18);
    --ux4g-fw-current: var(--ux4g-font-weight-medium);
}

.ux4g-breadcrumb-menuitem:hover {
    color: var(--ux4g-text-link-default-hover);
}


.ux4g-list {
  border-radius: var(--ux4g-radius-md);
  box-shadow: var(--ux4g-shadow-l2);
  background-color: var(--ux4g-bg-neutral-elevated);
  padding: var(--ux4g-padding-s) var(--ux4g-padding-none);
}

/* Disabled text */

.ux4g-list-item-row:disabled:hover,
.ux4g-list-item-row[disabled]:hover {
  background: none !important;
}

.ux4g-list-item-row:disabled,
.ux4g-list-item-row[disabled] {
  pointer-events: none  !important;
}

.ux4g-list-item-row:disabled :is(.ux4g-list-item-start, .ux4g-list-item-end, .ux4g-icon-outlined),
.ux4g-list-item-row[disabled] :is(.ux4g-list-item-start, .ux4g-list-item-end, .ux4g-icon-outlined) {
  color: var(--ux4g-text-neutral-disabled) !important;
  background: none ;
}

.ux4g-list-item {
  color: var(--ux4g-text-neutral-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ux4g-list-item-row {
  cursor: pointer;
  background-color: transparent;
  border: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  gap: var(--ux4g-inline-m);
}

.ux4g-list-item-row.ux4g-toggles,
.ux4g-list-item-row.ux4g-list-item-row-fixed,
span.ux4g-list-item-row {
  cursor: default;
}

.ux4g-list-item-start {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-m);
}

.ux4g-list-item-start > :is(.ux4g-checkbox, .ux4g-radio) {
  width: auto;
  flex: 0 0 auto;
}

.ux4g-list-default .ux4g-list-item-end{
  color: var(--ux4g-text-neutral-tertiary);
}
.ux4g-list-default .ux4g-list-item-start{
  color: var(--ux4g-text-neutral-primary);
}
.ux4g-list-item-end {
  gap: var(--ux4g-inline-m);
  display: flex;
  align-items: center;
}

.ux4g-list-default .ux4g-list-item-row:hover {
  background-color: var(--ux4g-bg-neutral-subtle);
}

.ux4g-list-default .ux4g-list-item-row:active {
  background-color: var(--ux4g-bg-neutral-emphasis);
}

.ux4g-list-default .ux4g-list-item-row.ux4g-toggles:hover,
.ux4g-list-default .ux4g-list-item-row.ux4g-toggles:active,
.ux4g-list-default .ux4g-list-item-row.ux4g-list-item-row-fixed:hover,
.ux4g-list-default .ux4g-list-item-row.ux4g-list-item-row-fixed:active,
.ux4g-list-default span.ux4g-list-item-row:hover,
.ux4g-list-default span.ux4g-list-item-row:active {
  background-color: transparent;
}

.ux4g-list-default .ux4g-list-item-row.active {
  background-color: var(--ux4g-bg-primary);
  color: var(--ux4g-text-brand-primary-default)
}

.ux4g-list-default .ux4g-list-item-row.ux4g-toggles.active,
.ux4g-list-default .ux4g-list-item-row.ux4g-list-item-row-fixed.active,
.ux4g-list-default span.ux4g-list-item-row.active {
  background-color: var(--ux4g-bg-primary);
}

.ux4g-list-default .ux4g-list-item-row.active:hover {
  background-color: var(--ux4g-bg-primary-soft);
}

.ux4g-list-default .ux4g-list-item-row.active:active {
  background-color: var(--ux4g-bg-primary-subtle);
}

.ux4g-list-default .ux4g-list-item-row.ux4g-toggles.active:hover,
.ux4g-list-default .ux4g-list-item-row.ux4g-toggles.active:active,
.ux4g-list-default .ux4g-list-item-row.ux4g-list-item-row-fixed.active:hover,
.ux4g-list-default .ux4g-list-item-row.ux4g-list-item-row-fixed.active:active,
.ux4g-list-default span.ux4g-list-item-row.active:hover,
.ux4g-list-default span.ux4g-list-item-row.active:active {
  background-color: var(--ux4g-bg-primary);
}

.ux4g-list-default .ux4g-list-item-row.active .ux4g-list-item-end,
.ux4g-list-default .ux4g-list-item-row.active .ux4g-list-item-start,
.ux4g-list-default .ux4g-list-item-row.active .ux4g-icon-outlined {
  color: var(--ux4g-text-brand-primary-default)
}



/* .ux4g-list-default .ux4g-list-item-row.active .ux4g-list-item-start *,
.ux4g-list-default .ux4g-list-item-row.active .ux4g-list-item-end *,
.ux4g-list-default .ux4g-list-item-row:has(input:not(:disabled):checked) .ux4g-list-item-start *,
.ux4g-list-default .ux4g-list-item-row:has(input:not(:disabled):checked) .ux4g-list-item-end * {
  color: var(--ux4g-text-brand-primary-default) !important;
} */

.ux4g-list-default .ux4g-list-item-row .ux4g-list-item-start .ux4g-d-flex > span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}

/* list error */
/* ======================================================
   UX4G LIST — ERROR VARIANT
   ====================================================== */

.ux4g-list-error .ux4g-list-item-row .ux4g-list-item-end,
.ux4g-list-error .ux4g-list-item-row .ux4g-list-item-start{
    color: var(--ux4g-text-status-error);
  }
.ux4g-list-error .ux4g-list-item-row .ux4g-icon-outlined {
  color: var(--ux4g-icon-status-error);
}



/* Start + End text */
.ux4g-list-error .ux4g-list-item:is(.ux4g-list-item-start, .ux4g-list-item-end) {
  color: var(--ux4g-text-status-error);
}

/* Hover */
.ux4g-list-error .ux4g-list-item-row:hover {
  background-color: var(--ux4g-bg-error-soft);
}

/* Active */
.ux4g-list-error .ux4g-list-item-row:active {
  background-color: var(--ux4g-bg-error-subtle);
}

.ux4g-list-error .ux4g-list-item-row:active:is(.ux4g-list-item-start, .ux4g-list-item-end) {
  color: var(--ux4g-text-status-error) ;
}

/* If item also has .active */
.ux4g-list-error .ux4g-list-item-row.active {
  background-color: var(--ux4g-bg-error-emphasis);
  color: var(--ux4g-text-status-error);
}

/* Prevent default primary active from interfering */
.ux4g-list-error .ux4g-list-item-row.active:is(.ux4g-list-item-start, .ux4g-list-item-end) {
  color: var(--ux4g-text-status-error);
}

/* ======================================================
   UX4G LIST — SUCCESS VARIANT
   ====================================================== */
.ux4g-list-success .ux4g-list-item-row .ux4g-list-item-end,
.ux4g-list-success .ux4g-list-item-row .ux4g-list-item-start{
    color: var(--ux4g-text-status-success);
  }
.ux4g-list-success .ux4g-list-item-row .ux4g-icon-outlined {
  color: var(--ux4g-icon-status-success);
}




/* Start + End text */
.ux4g-list-success .ux4g-list-item-row:is(.ux4g-list-item-start, .ux4g-list-item-end) {
  color: var(--ux4g-text-status-success);
}

/* Hover */
.ux4g-list-success .ux4g-list-item-row:hover {
  background-color: var(--ux4g-bg-success-soft);
}

/* Active */
.ux4g-list-success .ux4g-list-item-row:active {
  background-color: var(--ux4g-bg-success-subtle);
}

.ux4g-list-success .ux4g-list-item-row:active:is(.ux4g-list-item-start, .ux4g-list-item-end) {
  color: var(--ux4g-text-status-success);
}

/* If item also has .active */
.ux4g-list-success .ux4g-list-item-row.active {
  background-color: var(--ux4g-bg-success-emphasis);
  color: var(--ux4g-text-status-success);
}

/* Prevent default primary active from interfering */
.ux4g-list-success .ux4g-list-item-row.active:is(.ux4g-list-item-start, .ux4g-list-item-end) {
  color: var(--ux4g-text-status-success);
}


/* ======================================================
   UX4G LIST — WARNING VARIANT
   ====================================================== */
.ux4g-list-warning .ux4g-list-item-row .ux4g-list-item-end,
.ux4g-list-warning .ux4g-list-item-row .ux4g-list-item-start{
    color: var(--ux4g-text-status-warning);
  }
.ux4g-list-warning .ux4g-list-item-row .ux4g-icon-outlined {
  color: var(--ux4g-icon-status-warning);
}

/* Start + End text */
.ux4g-list-warning .ux4g-list-item-row:is(.ux4g-list-item-start, .ux4g-list-item-end) {
  color: var(--ux4g-text-status-warning);
}

/* Hover */
.ux4g-list-warning .ux4g-list-item-row:hover {
  background-color: var(--ux4g-bg-warning-soft);
}

/* Active */
.ux4g-list-warning .ux4g-list-item-rowm:active {
  background-color: var(--ux4g-bg-warning-subtle);
}

.ux4g-list-warning .ux4g-list-item-row:active:is(.ux4g-list-item-start, .ux4g-list-item-end) {
  color: var(--ux4g-text-status-warning);
}

/* If item also has .active */
.ux4g-list-warning .ux4g-list-item-row.active {
  background-color: var(--ux4g-bg-warning-emphasis);
  color: var(--ux4g-text-status-warning);
}

/* Prevent default primary active from interfering */
.ux4g-list-warning .ux4g-list-item-row.active:is(.ux4g-list-item-start, .ux4g-list-item-end) {
  color: var(--ux4g-text-status-warning);
}




/* sizes for all variants */

/* small */
.ux4g-list-s .ux4g-list-item-start{
  font-size: var(--ux4g-fs-14);
  line-height: var(--ux4g-lh-20);
  font-weight: var(--ux4g-fw-regular);
}
.ux4g-list-s .ux4g-list-item-end{
  font-size: var(--ux4g-fs-11);
  line-height: var(--ux4g-lh-14);
  font-weight: var(--ux4g-fw-medium);
}
.ux4g-list-s .ux4g-list-item .ux4g-list-item-row {
  padding: var(--ux4g-padding-s) var(--ux4g-padding-l);
  min-height: 32px;
}
.ux4g-list-s .ux4g-list-item-start .ux4g-list-item-label {
    font-size: var(--ux4g-fs-14) ;

}
.ux4g-list-s .ux4g-list-item-end .ux4g-list-item-label-support {
      font-size: var(--ux4g-fs-11) ;
}

/* Medium */
.ux4g-list-m .ux4g-list-item-start{
  font-size: var(--ux4g-fs-14);
  line-height: var(--ux4g-lh-20);
  font-weight: var(--ux4g-fw-regular);
}
.ux4g-list-m .ux4g-list-item-end{
  font-size: var(--ux4g-fs-11);
  line-height: var(--ux4g-lh-14);
  font-weight: var(--ux4g-fw-medium);
}

.ux4g-list-m .ux4g-list-item .ux4g-list-item-row {
  padding: var(--ux4g-padding-m);
  min-height: 40px;
}
.ux4g-list-m .ux4g-list-item-start .ux4g-list-item-label {
    font-size: var(--ux4g-fs-14) ;

}
.ux4g-list-m .ux4g-list-item-end .ux4g-list-item-label-support {
      font-size: var(--ux4g-fs-11) ;
}

/* Large */
.ux4g-list-l .ux4g-list-item-start{
  font-size: var(--ux4g-fs-16);
  line-height: var(--ux4g-lh-24);
  font-weight: var(--ux4g-fw-regular);
}
.ux4g-list-l .ux4g-list-item-end{
  font-size: var(--ux4g-fs-12);
  line-height: var(--ux4g-lh-16);
  font-weight: var(--ux4g-fw-medium);
}

.ux4g-list-l .ux4g-list-item .ux4g-list-item-row {
  padding: var(--ux4g-padding-xl);
  min-height: 56px;
}

.ux4g-list-l .ux4g-list-item-start .ux4g-list-item-label {
    font-size: var(--ux4g-fs-16) ;

}
.ux4g-list-l .ux4g-list-item-end .ux4g-list-item-label-support {
      font-size: var(--ux4g-fs-12) ;
}

/* Xl Large */
.ux4g-list-xl .ux4g-list-item-start{
  font-size: var(--ux4g-fs-16);
  line-height: var(--ux4g-lh-24);
  font-weight: var(--ux4g-fw-regular);
}
.ux4g-list-xl .ux4g-list-item-end{
  font-size: var(--ux4g-fs-12);
  line-height: var(--ux4g-lh-16);
  font-weight: var(--ux4g-fw-medium);
}
.ux4g-list-xl .ux4g-list-item .ux4g-list-item-row {
  padding: var(--ux4g-padding-xl);
  min-height: 72px;
}

.ux4g-list-xl .ux4g-list-item-start .ux4g-list-item-label {
    font-size: var(--ux4g-fs-16) ;

}
.ux4g-list-xl .ux4g-list-item-end .ux4g-list-item-label-support {
      font-size: var(--ux4g-fs-12) ;
}


/* Drag and drop styles */
.ux4g-list-draggable .ux4g-list-item-start .ux4g-icon-outlined {
  cursor: grab;
}
.ux4g-list-draggable .ux4g-list-item-row,
.ux4g-list-action .ux4g-list-item-row,
.ux4g-list-switch .ux4g-list-item-row{
  cursor: auto;
}

/* multiselect with check mark */
.ux4g-check-icon{
  opacity: var(--ux4g-opacity-0);
  transform:scale(.6);
  transition:all .18s ease;
}
.ux4g-list-item-row.active .ux4g-check-icon{
  opacity:var(--ux4g-opacity-100);
  transform:scale(1);
}

/* list selct switch */


.ux4g-card-solid {
    background-color: var(--ux4g-bg-neutral-elevated);
    box-shadow: var(--ux4g-shadow-l1);
    border: var(--ux4g-border-thin) solid var(--ux4g-border-color-neutral-default);
}

.ux4g-card-outline {
    border: var(--ux4g-border-thin) solid var(--ux4g-border-color-neutral-default);
}

.ux4g-card {
    border-radius: var(--ux4g-radius-lg);
    transition: all 0.3s ease;
}

.ux4g-card:hover {
    box-shadow: var(--ux4g-shadow-l2);
}


.ux4g-card-body {
    padding: var(--ux4g-padding-m);
}

.ux4g-card-vertical .ux4g-card-body .ux4g-avatar {
    margin-top: var(--ux4g-space-10);
}

.ux4g-card-body p {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-font-weight-regular);
    color: var(--ux4g-text-neutral-primary);
}

.card-group {
    display: flex;
    gap: var(--ux4g-inline-s);
}


.ux4g-card-footer {
    padding: var(--ux4g-padding-m);
}

.ux4g-card-title {
    color: var(--ux4g-text-neutral-primary);
    font-size: var(--ux4g-fs-16);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-font-weight-display-semibold);
}

.ux4g-card-sub-title {
    color: var(--ux4g-text-neutral-secondary);
    font-size: var(--ux4g-fs-16);
    line-height: var(--ux4g-lh-24);
    font-weight: var(--ux4g-font-weight-regular);
}

/* .ux4g-card-header-img {
     width: 100%;
     height: 200px;
     background: linear-gradient(135deg, #4338ca 0%, #6d28d9 35%, #a21caf 70%, #d946ef 100%);
     display: block;
     overflow: var(--ux4g-of-hidden) 
}
 */
.ux4g-card-header-img {
    position: var(--ux4g-pos-relative);
}

.ux4g-card-header-image {
    transition: all 0.3s ease;
    width: 100%;
    object-fit: cover;
    display: block;
}

.ux4g-card-vertical .ux4g-card-header-image {    
    height: 192px;
}

.ux4g-card-header-image:hover {
    transform: scale(1.01);
}

.ux4g-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-2xs);
    padding: var(--ux4g-padding-m);
}

.ux4g-card-header-tag {
    position: var(--ux4g-position-absolute) !important;
    top: var(--ux4g-pos-offset-0) !important;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}



/* .ux4g-card-header-img:hover {
}
 */
.ux4g-card-token {
    width: 24px;
    height: 24px;
    background-color: rgba(23, 23, 23, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ux4g-color-neutral-0);
}

.ux4g-card-token .ux4g-icon-outlined {
    color: var(--ux4g-color-neutral-0);
}

.ux4g-card-header-tag {
    padding: var(--ux4g-space-5);
}

.ux4g-card[disabled] {
    opacity: var(--ux4g-opacity-30);
    pointer-events: none;
}

/* Horizontal card */
.ux4g-card-horizontal {
    display: flex;
    width: 100%;
}

.ux4g-card-horizontal .ux4g-card-header-img {
    height: 100%;
}

.ux4g-card-horizontal .ux4g-card-header-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.ux4g-card-horizontal .ux4g-card-header {
    flex: 2;
}

.ux4g-card-horizontal .ux4g-card-body {
    flex: 3;
}

@media (max-width: 768px) {
    .ux4g-card-horizontal {
        flex-direction: column;
    }

    .ux4g-card-horizontal .ux4g-card-header,
    .ux4g-card-horizontal .ux4g-card-body {
        flex: none;
        width: 100%;
    }

    .ux4g-card-horizontal .ux4g-card-header-img {
        margin-bottom: 0;
    }
    /* Wrap tag lists inside the card body on mobile */
    .ux4g-card-body .ux4g-d-flex:has(> [class*="ux4g-tag-"]),
    .ux4g-card-body .ux4g-d-flex:has(> [class*="ux4g-choice-chip"]) {
        flex-wrap: wrap;
    }
    
}
/* ipad */
@media (min-width: 320px) and (max-width: 1024px) {
    .ux4g-card-horizontal .ux4g-card-header-image {    
        height: 20vh;
    }
    .ux4g-card-vertical .ux4g-card-header-image {
        height: 20vh;
    }
}

/* ========================================================= UX4G MODAL : Overlay ========================================================= */
.ux4g-modal-backdrop-25 {
    background-color: rgba(0, 0, 0, 0.25);
}

.ux4g-modal-backdrop-50 {
    background-color: rgba(0, 0, 0, 0.50);
}

.ux4g-modal-backdrop-75 {
    background-color: rgba(0, 0, 0, 0.75);
}

.ux4g-modal-backdrop-blur {
    backdrop-filter: blur(8px);
}

/* ========================================================= UX4G MODAL : Overlay Container & Backdrop - Covers full viewport - Centers modal box - Handles the transparent backdrop and fade transition ========================================================= */

.ux4g-modal-backdrop {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}

/* ========================================================= UX4G MODAL : Overlay Container - Covers full viewport - Centers modal box ========================================================= */
.ux4g-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ========================================================= UX4G MODAL : Modal Panel - Main modal surface - Handles background, radius and elevation ========================================================= */
.ux4g-modal-box {
    background: var(--ux4g-bg-neutral-elevated);
    border-radius: var(--ux4g-radius-lg);
    box-shadow: var(--ux4g-shadow-l3);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    transition: transform .3s ease-out;
    box-sizing: border-box;
    min-width: 0;
    margin: var(--ux4g-margin-l) auto var(--ux4g-margin-none) auto;
}

/* ========================================================= UX4G MODAL : Size Variants - Controls modal width - All sizes maintain responsive max width ========================================================= */
.ux4g-modal-s {
    width: 360px;
    max-width: 90%;
}

.ux4g-modal-m {
    width: 500px;
    max-width: 90%;
}

.ux4g-modal-l {
    width: 800px;
    max-width: 90%;
}

/* ========================================================= UX4G MODAL : Header - Contains title and close button ========================================================= */
.ux4g-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ux4g-padding-m);
    border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    gap: var(--ux4g-space-2);
}

/* ========================================================= UX4G MODAL : Header Title - Modal heading typography ========================================================= */
.ux4g-modal-header-title-content {
    display: flex;
    align-items: flex-start;
}

.ux4g-modal-header-title-content i.ux4g-icon-outlined {
    height: var(--ux4g-lh-24);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ux4g-modal-header-title {
    color: var(--ux4g-text-neutral-primary);
    font-size: var(--ux4g-fs-20);
    font-weight: var(--ux4g-fw-semibold);
    line-height: var(--ux4g-lh-24);
}

.ux4g-modal-header-sub-heading {
    color: var(--ux4g-text-neutral-secondary);
    font-size: var(--ux4g-fs-14);
    font-weight: var(--ux4g-fw-regular);
    line-height: var(--ux4g-lh-20);
}

.ux4g-modal-sub-heading {
    color: var(--ux4g-text-neutral-secondary);
    font-size: var(--ux4g-fs-12);
    font-weight: var(--ux4g-fw-regular);
    line-height: var(--ux4g-lh-16);
}

/* ========================================================= UX4G MODAL : Body - Main content area ========================================================= */
.ux4g-modal-body {
    padding: var(--ux4g-padding-s) var(--ux4g-padding-l);
}

.ux4g-modal-body-title {
    color: var(--ux4g-text-neutral-secondary);
    font-size: var(--ux4g-fs-16);
    font-weight: var(--ux4g-fw-semibold);
    line-height: var(--ux4g-lh-20);
    padding-block-end: var(--ux4g-padding-xs);

}

.ux4g-modal-body p {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-fw-regular);
    color: var(--ux4g-text-neutral-secondary);

}

/* ========================================================= UX4G MODAL : Footer Actions - Button group ========================================================= */
.ux4g-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ux4g-space-4);
    padding: var(--ux4g-padding-l);
    border-top: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
}

/* ========================================================= UX4G MODAL : Close Button - Icon button for dismissing modal ========================================================= */

.ux4g-modal-close-two {
    position: absolute;
    right: var(--ux4g-space-5);
    top: var(--ux4g-space-5);
}

.ux4g-modal-close {
    border: var(--ux4g-border-width-none);
    background: none;
    font-size: var(--ux4g-fs-20);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ux4g-radius-xs);
    opacity: var(--ux4g-opacity-50);
    transition: all 0.3s ease;
    width: 24px;
    height: 24px;
}

.ux4g-modal-close:hover {
    background-color: var(--ux4g-bg-neutral-subtle);
    opacity: 1;
}

.ux4g-modal-close-icon {
    font-size: var(--ux4g-fs-20);
}

.is-open {
    display: block;
}

.ux4g-modal-header-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

/* ========================================================= UX4G MODAL Center Content ========================================================= */

.ux4g-modal-center-content .ux4g-modal-body,
.ux4g-modal-center-content .ux4g-modal-actions {
    align-items: center;
    justify-content: center;
    text-align: var(--ux4g-ta-center);
}

.ux4g-modal-center-content .ux4g-modal-header-title-content {
    text-align: var(--ux4g-ta-center);
    width: 100%;
    align-items: center;
    flex-direction: column;
    row-gap: var(--ux4g-stack-xs);
}

.ux4g-modal-center-content .ux4g-modal-header {
    align-items: flex-start;
}
/* ==========================================
   UX4G Search Component
   ========================================== */

/* Container */
.ux4g-search-container {
    display: flex;
    flex-direction: column;
    row-gap: var(--ux4g-space-2);
    width: 100%;
}

.ux4g-search-container .ux4g-label-m-default {
    color: var(--ux4g-text-neutral-secondary);
}

/* Search Wrapper (Medium by default) */
.ux4g-search {
    display: flex;
    align-items: center;
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    overflow: hidden;
    padding-left: var(--ux4g-padding-s);
    gap: var(--ux4g-space-2);
    height: var(--ux4g-sz-m);
}

.ux4g-search:hover {
    border-color: var(--ux4g-border-color-neutral-default);
}

/* Icons & Buttons (Medium by default) */
.ux4g-search-leading-icon,
.ux4g-search-action-btn,
.ux4g-search-btn .ux4g-icon-outlined,
.ux4g-search-actions .ux4g-icon-outlined {
    width: var(--ux4g-sz-18);
    height: var(--ux4g-sz-18);
    font-size: var(--ux4g-fs-18);
    color: var(--ux4g-text-neutral-secondary);
}

/* Input */
.ux4g-search-input {
    flex: 1;
    background: transparent;
    font-size: var(--ux4g-fs-14);
    border: none;
    outline: none;
}

/* Actions */
.ux4g-search-actions {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-xs);
    padding-right: var(--ux4g-padding-s);
}

.ux4g-search-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ux4g-text-neutral-secondary);
    padding: var(--ux4g-space-2);
    border-radius: var(--ux4g-radius-full);
    transition: background-color 0.2s ease;
}

.ux4g-search-action-btn:hover {
    background-color: var(--ux4g-bg-neutral-soft);
}

/* Primary Search Button */
.ux4g-search-btn {
    background-color: var(--ux4g-bg-primary-strong);
    color: var(--ux4g-text-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ux4g-padding-xs);
    height: 100%;
    width: 40px;
    transition: background-color 0.2s ease;
}

.ux4g-search-btn .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-18);
    color: var(--ux4g-text-white);
}

.ux4g-search-btn:hover {
    background-color: var(--ux4g-bg-primary-strong-hover);
}

/* Focus State */
.ux4g-search:focus-within {
    outline: var(--ux4g-outline-width-default) solid var(--ux4g-outline-color-focus);
    border-color: var(--ux4g-border-color-neutral-elevated);
}

/* Conditional Elements */
.ux4g-search-clear,
.ux4g-search-list {
    display: none;
}

.ux4g-search-container.ux4g-has-value .ux4g-search-clear {
    display: inline-flex;
}

.ux4g-search-container.ux4g-has-value .ux4g-search-list {
    display: block;
}

/* ==========================================
   SIZE VARIANTS
   ========================================== */

/* Small (ux4g-search-s) */
.ux4g-search-s .ux4g-search {
    height: var(--ux4g-sz-s);
}

.ux4g-search-s .ux4g-search-action-btn,
.ux4g-search-s .ux4g-search-leading-icon,
.ux4g-search-s .ux4g-search-actions .ux4g-icon-outlined {
    width: var(--ux4g-sz-16);
    height: var(--ux4g-sz-16);
    font-size: var(--ux4g-fs-16);
}



.ux4g-search-s .ux4g-search-btn .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-16);
}

/* Medium (Explicit class, matches default) */
.ux4g-search-m .ux4g-search {
    height: var(--ux4g-sz-m);
}

.ux4g-search-m .ux4g-search-action-btn,
.ux4g-search-m .ux4g-search-leading-icon {
    width: var(--ux4g-sz-18);
    height: var(--ux4g-sz-18);
    font-size: var(--ux4g-fs-18);
}

.ux4g-search-m .ux4g-search-btn {
    padding: var(--ux4g-padding-xs);
}

.ux4g-search-m .ux4g-search-leading-icon,
.ux4g-search-m .ux4g-search-btn .ux4g-icon-outlined,
.ux4g-search-m .ux4g-search-actions .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-20);
}

/* Large */
.ux4g-search-lg .ux4g-search {
    height: var(--ux4g-sz-l);
}

.ux4g-search-l .ux4g-search-action-btn,
.ux4g-search-l .ux4g-search-leading-icon,
.ux4g-search-l .ux4g-search-actions .ux4g-icon-outlined,
.ux4g-search-lg .ux4g-search-action-btn,
.ux4g-search-lg .ux4g-search-leading-icon,
.ux4g-search-lg .ux4g-search-actions .ux4g-icon-outlined {
    width: var(--ux4g-sz-20);
    height: var(--ux4g-sz-20);
    font-size: var(--ux4g-fs-20);
}

.ux4g-search-l .ux4g-search-btn,
.ux4g-search-lg .ux4g-search-btn {
    padding: var(--ux4g-padding-s);
}

.ux4g-search-l .ux4g-search-btn .ux4g-icon-outlined,
.ux4g-search-lg .ux4g-search-btn .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-24);
    width: var(--ux4g-sz-24);
    height: var(--ux4g-sz-24);
}

.ux4g-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--ux4g-bg-neutral-elevated);
    /* border: solid 1px var(--ux4g-border-color-neutral-default); */
    border-radius: var(--ux4g-radius-md);
    border-collapse: separate;
    border-spacing: 0;
}

/* top-left border-radius */


/* top-left border-radius */
.ux4g-table tr:first-child th:first-child {
    border-top-left-radius: var(--ux4g-radius-md);
}

/* top-right border-radius */
.ux4g-table tr:first-child th:last-child {
    border-top-right-radius: var(--ux4g-radius-md);
}

/* bottom-left border-radius */
.ux4g-table tr:last-child td:first-child {
    border-bottom-left-radius: var(--ux4g-radius-md);
}

/* bottom-right border-radius */
.ux4g-table tr:last-child td:last-child {
    border-bottom-right-radius: var(--ux4g-radius-md);
}

.ux4g-table-rounded {
    border-radius: var(--ux4g-radius-md);
    overflow: hidden;
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
}

/* table bordered end radius*/




.ux4g-table-m td,
.ux4g-table td {
    padding: var(--ux4g-padding-s) var(--ux4g-padding-m);
    min-height: 44px;
    vertical-align: var(--ux4g-va-middle, middle);
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-fw-regular);
    color: var(--ux4g-text-neutral-primary);
}

.ux4g-table-m th,
.ux4g-table th {
    padding: var(--ux4g-padding-s) var(--ux4g-padding-m);
    min-height: 44px;
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
    font-weight: var(--ux4g-font-weight-bold);
    color: var(--ux4g-text-neutral-secondary);
    text-align: left;
}
.ux4g-table-column-dividers th{
    vertical-align: var(--ux4g-va-middle, middle);

}

.ux4g-table-s td {
    padding: var(--ux4g-padding-xs) var(--ux4g-padding-m);
    min-height: 36px;
}

.ux4g-table-s th {
    padding: var(--ux4g-padding-xs) var(--ux4g-padding-m);
    min-height: 36px;
}

.ux4g-table-lg td {
    padding: var(--ux4g-padding-m) var(--ux4g-padding-l);
    min-height: 52px;
    font-size: var(--ux4g-fs-16);
    line-height: var(--ux4g-lh-24);
}

.ux4g-table-lg th {
    padding: var(--ux4g-padding-m) var(--ux4g-padding-l);
    min-height: 48px;
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-18);
}

.ux4g-table th,
.ux4g-table td {
    border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
}

.ux4g-table tr:last-child td {
    border-bottom: none;
}

.ux4g-table-no-row-dividers th,
.ux4g-table-no-row-dividers td {
    border-bottom: none;
}

.ux4g-table-column-dividers th,
.ux4g-table-column-dividers td {
    border-right: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
}

.ux4g-table-column-dividers>thead> tr:nth-child(1) th:last-child,
.ux4g-table-column-dividers>tbody>tr>td:last-child {
    border-right: none !important;
}

.ux4g-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ux4g-table th {
    position: var(--ux4g-pos-relative);
    background-color: var(--ux4g-bg-neutral-elevated);
    white-space: var(--ux4g-tw-nowrap, nowrap);
    overflow: hidden;
    text-overflow: ellipsis;
}

.ux4g-table-resizable th {
    background-clip: padding-box;
}

.ux4g-table-resize-handle {
    position: var(--ux4g-pos-absolute);
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--ux4g-inline-s);
    cursor: col-resize;
    z-index: var(--ux4g-z-layout-raised);
    background-color: transparent;
    transform: translateX(50%);
    transition: background-color 0.2s ease;
}

.ux4g-table-resize-handle:hover {
    background-color: var(--ux4g-bg-primary-soft);
}

.ux4g-table-resize-handle.ux4g-is-resizing {
    background-color: var(--ux4g-bg-primary-strong);
}


.ux4g-table-header-brand th {
    background-color: var(--ux4g-bg-primary);
}

.ux4g-table-th-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ux4g-inline-s);
}

.ux4g-table-sortable th {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ux4g-table-sortable th:hover {
    background-color: var(--ux4g-bg-neutral-subtle);
}

.ux4g-table-sortable th:active {
    background-color: var(--ux4g-bg-primary-soft);
}

.ux4g-table-sortable th[data-sort] .ux4g-table-sort-icon {
    color: var(--ux4g-text-neutral-secondary);
    transition: transform 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ux4g-fs-20);
    pointer-events: none;
}

.ux4g-table-s .ux4g-table-sort-icon {
    font-size: var(--ux4g-fs-16);
}

.ux4g-table-lg .ux4g-table-sort-icon {
    font-size: var(--ux4g-fs-24);
}

.ux4g-table-sortable th[data-sort="none"] .ux4g-table-sort-icon {
    color: var(--ux4g-text-neutral-disabled);
    opacity: 1;
    transform: rotate(0deg);
}

.ux4g-table-sortable th[data-sort="none"]:hover .ux4g-table-sort-icon {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-table-sortable th[data-sort="desc"] .ux4g-table-sort-icon {
    color: var(--ux4g-text-brand-primary-default);
    transform: rotate(0deg);
}

.ux4g-table-sortable th[data-sort="asc"] .ux4g-table-sort-icon {
    color: var(--ux4g-text-brand-primary-default);
    transform: rotate(180deg);
}


.ux4g-table-zebra-rows tbody tr:nth-child(even),
.ux4g-table-zebra-rows tbody tr:nth-child(even) th,
.ux4g-table-zebra-rows tbody tr:nth-child(even) td {
    background-color: var(--ux4g-bg-neutral-soft);
}

.ux4g-table-zebra-rows tbody tr:nth-child(odd),
.ux4g-table-zebra-rows tbody tr:nth-child(odd) th,
.ux4g-table-zebra-rows tbody tr:nth-child(odd) td {
    background-color: var(--ux4g-bg-neutral);
}

.ux4g-table-zebra-cols td:nth-child(even),
.ux4g-table-zebra-cols th:nth-child(even) {
    background-color: var(--ux4g-bg-neutral-soft);
}

.ux4g-table-zebra-cols td:nth-child(odd),
.ux4g-table-zebra-cols th:nth-child(odd) {
    background-color: var(--ux4g-bg-neutral);
}

.ux4g-table th[colspan],
.ux4g-table td[colspan] {
    text-align: center;
}

.ux4g-table-interactive tbody tr {
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
    cursor: pointer;
}


.ux4g-table-interactive tbody tr:hover,
.ux4g-table-interactive tbody tr.ux4g-is-hovered {
    background-color: var(--ux4g-bg-neutral-subtle);
}

.ux4g-table-interactive tbody tr:active,
.ux4g-table-interactive tbody tr.ux4g-is-active {
    background-color: var(--ux4g-bg-neutral-emphasis);
}

.ux4g-table-interactive tbody tr.ux4g-is-selected {
    background-color: var(--ux4g-bg-primary);
}

.ux4g-table-interactive tbody tr.ux4g-is-selected:hover,
.ux4g-table-interactive tbody tr.ux4g-is-selected.ux4g-is-hovered {
    background-color: var(--ux4g-bg-primary-soft);
}

.ux4g-table-interactive tbody tr.ux4g-is-selected:active,
.ux4g-table-interactive tbody tr.ux4g-is-selected.ux4g-is-active {
    background-color: var(--ux4g-bg-primary-subtle);
}

.ux4g-table-interactive tbody tr.ux4g-is-disabled,
.ux4g-table tbody tr.is-disabled {
    pointer-events: none;
    background-color: var(--ux4g-bg-neutral-elevated);
    opacity: var(--ux4g-interaction-disabled-opacity, 0.4);
}


.ux4g-table-cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: var(--ux4g-tw-nowrap, nowrap);
}

.ux4g-table-cell-avatar,
.ux4g-table-cell-image {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m);
}

.ux4g-table-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ux4g-table-cell-avatar-text {
    display: flex;
    flex-direction: column;
}

.ux4g-table-cell-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ux4g-inline-s);
}

.ux4g-table-tag {
    height: 1.25rem;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ux4g-radius-sm);
}

.ux4g-table-cell-checkbox,
.ux4g-table-cell-radio {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ux4g-table-selection-col {
    position: var(--ux4g-pos-relative);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
}

.ux4g-sno-text {
    transition: opacity 0.2s ease, visibility 0.2s;
}

.ux4g-table-selection-col .ux4g-checkbox {
    position: var(--ux4g-pos-absolute);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    margin: 0;
}

/* Selection columns with serial numbers show the number at rest and reveal
   the overlaid checkbox only when the row is actionable. */
.ux4g-table-selection-col:has(.ux4g-sno-text) .ux4g-checkbox {
    opacity: 0;
    visibility: visible;
}

.ux4g-table-interactive tbody tr:hover .ux4g-sno-text,
.ux4g-table-interactive tbody tr:focus-within .ux4g-sno-text {
    display: none;
}

.ux4g-table-interactive tbody tr:hover .ux4g-table-selection-col .ux4g-checkbox,
.ux4g-table-interactive tbody tr:focus-within .ux4g-table-selection-col .ux4g-checkbox {
    opacity: 1;
    visibility: visible;
}

.ux4g-table-interactive tbody tr.ux4g-is-selected .ux4g-sno-text {
    display: none;
}

.ux4g-table-interactive tbody tr.ux4g-is-selected .ux4g-table-selection-col .ux4g-checkbox {
    position: var(--ux4g-pos-static);
    opacity: 1;
    visibility: visible;
}

.ux4g-table-selection-col:has(.ux4g-checkbox-input:checked) .ux4g-sno-text {
    display: none;
}

.ux4g-table-selection-col:has(.ux4g-checkbox-input:checked) .ux4g-checkbox {
    position: var(--ux4g-pos-static);
    opacity: 1;
    visibility: visible;
}


.ux4g-table-cell-icon-btn {
    background-color: transparent;
    color: var(--ux4g-text-neutral-secondary);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ux4g-radius-sm);
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    height: var(--ux4g-sz-32);
    width: var(--ux4g-sz-32);
}

.ux4g-table-s .ux4g-table-cell-icon-btn {
    height: 28px;
    width: 28px;
}

.ux4g-table-lg .ux4g-table-cell-icon-btn {
    height: var(--ux4g-sz-40);
    width: var(--ux4g-sz-40);
}

.ux4g-table-cell-icon-btn:hover {
    background-color: var(--ux4g-bg-neutral-subtle);
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-table-cell-icon-btn:active {
    background-color: var(--ux4g-bg-neutral-emphasis);
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-table-cell-icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--ux4g-shadow-focus-ring);
}

.ux4g-table-cell-icon-btn:disabled {
    color: var(--ux4g-text-neutral-disabled);
    cursor: not-allowed;
    background-color: transparent;
}


.ux4g-table-cell-fluid-input {
    flex: 1;
    min-width: 0;
}

.ux4g-table-cell-fixed-input {
    width: 8.75rem;
}

.ux4g-table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ux4g-table-loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ux4g-section-m) 0;
    min-height: 12.5rem;
    width: 100%;
    background-color: transparent;
}


.ux4g-table-input,
.ux4g-table-select {
    width: 100%;
    padding: var(--ux4g-padding-2xs) var(--ux4g-padding-s);
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s;
    height: 40px;
    appearance: none;
    color: var(--ux4g-text-neutral-primary);
}

.ux4g-table-s .ux4g-table-input,
.ux4g-table-s .ux4g-table-select {
    height: 28px;
}

.ux4g-table-lg .ux4g-table-input,
.ux4g-table-lg .ux4g-table-select {
    height: var(--ux4g-sz-48);
}

.ux4g-table-select {
    padding-right: 2rem;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%207.5L10%2012.5L15%207.5%22%20stroke%3D%22%23404040%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
}



.ux4g-table-input:hover,
.ux4g-table-select:hover {
    border-color: var(--ux4g-border-color-neutral-focus, #4b5563);
}

.ux4g-table-input:focus,
.ux4g-table-select:focus {
    outline: none;
    border-color: var(--ux4g-border-color-primary-strong);
    box-shadow: var(--ux4g-shadow-focus-border);
}

.ux4g-table-input:disabled,
.ux4g-table-select:disabled {
    background-color: var(--ux4g-bg-neutral-soft);
    color: var(--ux4g-text-neutral-disabled);
    border-color: var(--ux4g-border-color-neutral-subtle);
    cursor: not-allowed;
}

.ux4g-table-input.ux4g-status-success,
.ux4g-table-select.ux4g-status-success {
    border-color: var(--ux4g-border-color-success-strong, #16a34a);
}

.ux4g-table-input.ux4g-status-error,
.ux4g-table-select.ux4g-status-error {
    border-color: var(--ux4g-border-color-error-strong, #dc2626);
}

.ux4g-table-input.ux4g-status-warning,
.ux4g-table-select.ux4g-status-warning {
    border-color: var(--ux4g-text-warning-default);
}

.ux4g-table-cell-fixed-input {
    width: 8.75rem;
}

.ux4g-table-cell-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ux4g-inline-s);
}

/* Table Filter Additions */
.ux4g-table-th-header-row {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-xs);
}

.ux4g-table-filter-icon {
    color: var(--ux4g-text-neutral-secondary);
    transition: transform 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ux4g-fs-20);
    cursor: pointer;
    z-index: 10;
}

.ux4g-table-s .ux4g-table-filter-icon {
    font-size: var(--ux4g-fs-16);
}

.ux4g-table-lg .ux4g-table-filter-icon {
    font-size: var(--ux4g-fs-24);
}

.ux4g-table-filter-icon:hover {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-table-inline-filter {
    display: none;
    width: 100%;
    margin-top: var(--ux4g-stack-xs);
}

th.ux4g-is-filtering .ux4g-table-inline-filter {
    display: block;
}

.ux4g-table-inline-filter .ux4g-search-clear {
    display: inline-flex !important;
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-table-inline-filter .ux4g-search-clear:hover {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-table-inline-filter .ux4g-search-container::before {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-table-inline-filter .ux4g-search-input {
    min-width: 0;
    width: 100%;
}

.ux4g-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: var(--ux4g-of-image, cover);
    object-position: var(--ux4g-op-image, center);
    background-color: var(--ux4g-bg-neutral-subtle);
}

.ux4g-img-rounded {
    border-radius: var(--ux4g-radius-lg);
}


[class*="ux4g-ratio-"]{width:100%;}
.ux4g-ratio-1-1{aspect-ratio:1/1;}
.ux4g-ratio-4-3{aspect-ratio:4/3;}
.ux4g-ratio-3-2{aspect-ratio:3/2;}
.ux4g-ratio-16-10{aspect-ratio:16/10;}
.ux4g-ratio-16-9{aspect-ratio:16/9;}
.ux4g-ratio-2-1{aspect-ratio:2/1;}
.ux4g-ratio-5-2{aspect-ratio:5/2;}
.ux4g-ratio-3-1{aspect-ratio:3/1;}
.ux4g-ratio-1-16{aspect-ratio:480/776;}
.ux4g-ratio-2-3{aspect-ratio:2/3;}
.ux4g-ratio-3-4{aspect-ratio:3/4;}

[class*="ux4g-ratio-"] .ux4g-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Browser Fallback */
@supports not (aspect-ratio: 1 / 1) {
    .ux4g-ratio-1-1 {height: 100%;}

    .ux4g-ratio-16-9 { height: 270px;}
}

/* Browser Fallback */
@supports not (aspect-ratio: 1 / 1) {
    .ux4g-ratio-1-1 {
        height: 100%;
    }

    .ux4g-ratio-16-9 {
        height: 270px;
    }
}

/* Image Overlay Container */
.ux4g-img-overlay {
    position: var(--ux4g-pos-relative) !important;
    display: block;
    overflow: var(--ux4g-of-hidden);
}

/* Apply radius on container */
.ux4g-img-overlay.ux4g-img-rounded {
    border-radius: var(--ux4g-radius-lg);
}

/* Overlay Bottom */
.ux4g-img-overlay-bottom,
.ux4g-img-overlay-top {
    position: var(--ux4g-pos-absolute) !important;
    left: var(--ux4g-pos-start-0) !important;
    width: 100% !important;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--ux4g-padding-m);
    background: var(--ux4g-bg-overlay)

}

.ux4g-img-overlay-bottom .ux4g-body-s-default,
.ux4g-img-overlay-top .ux4g-body-s-default,
.ux4g-img-overlay-bottom .ux4g-body-xs-default,
.ux4g-img-overlay-top .ux4g-body-xs-default,
.ux4g-img-overlay-bottom .ux4g-heading-xs-default,
.ux4g-img-overlay-top .ux4g-heading-xs-default {
    color: var(--ux4g-text-neutral-inverse, #fafafa) !important;
}

.ux4g-img-overlay-bottom {
    bottom: var(--ux4g-pos-bottom-0) !important;

}

.ux4g-img-overlay-top {
    top: var(--ux4g-pos-top-0) !important
}

/* Rounded: inherit container radius on matching edge */
.ux4g-img-overlay.ux4g-img-rounded .ux4g-img-overlay-bottom {
    border-bottom-left-radius: var(--ux4g-radius-lg);
    border-bottom-right-radius: var(--ux4g-radius-lg);
}

.ux4g-img-overlay.ux4g-img-rounded .ux4g-img-overlay-top {
    border-top-left-radius: var(--ux4g-radius-lg);
    border-top-right-radius: var(--ux4g-radius-lg);
}

.ux4g-img-overlay-content {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs);
}

/* Icon Styles */
.ux4g-img-overlay-top .ux4g-icon-outlined,
.ux4g-img-overlay-top svg,
.ux4g-img-overlay-bottom .ux4g-icon-outlined,
.ux4g-img-overlay-bottom svg {
  color: var(--ux4g-icon-neutral-inverse, #fafafa) !important;
  fill: var(--ux4g-icon-neutral-inverse, #fafafa) !important;
}

:root {
    --ux4g-accordion-bg: var(--ux4g-bg-neutral-subtle);
    --ux4g-accordion-border-color: var(--ux4g-border-color-neutral-default);
    --ux4g-accordion-header-bg-hover: var(--ux4g-bg-neutral-subtle);
    --ux4g-accordion-header-bg-expanded: var(--ux4g-bg-neutral);
    --ux4g-accordion-body-bg: var(--ux4g-bg-neutral);

    --ux4g-accordion-title-color: var(--ux4g-text-neutral-primary);
    --ux4g-accordion-body-color: var(--ux4g-text-neutral-secondary);
    --ux4g-accordion-icon-color: var(--ux4g-text-neutral-primary);
    --ux4g-accordion-icon-color-hover: var(--ux4g-text-brand-primary-default);
    --ux4g-accordion-focus-color: var(--ux4g-border-color-primary-strong);

    --ux4g-accordion-title-size: var(--ux4g-fs-16);
    --ux4g-accordion-title-line-height: var(--ux4g-lh-20);
    --ux4g-accordion-title-weight: var(--ux4g-fw-semibold);

    --ux4g-accordion-body-size: var(--ux4g-fs-16);
    --ux4g-accordion-body-line-height: var(--ux4g-lh-24);
    --ux4g-accordion-body-weight: var(--ux4g-fw-regular);

    --ux4g-accordion-button-min-height: var(--ux4g-section-l);
    --ux4g-accordion-button-padding-x: var(--ux4g-padding-s);
    --ux4g-accordion-button-padding-y: var(--ux4g-padding-s);
    --ux4g-accordion-body-padding-x: var(--ux4g-padding-s);
    --ux4g-accordion-body-padding-y: var(--ux4g-padding-s);

    --ux4g-accordion-title-padding-x: var(--ux4g-padding-xs);


    --ux4g-accordion-arrow-size: var(--ux4g-fs-8, 8px);
    --ux4g-accordion-arrow-stroke: var(--ux4g-border-width-md, 2px);
    --ux4g-accordion-arrow-open-offset: var(--ux4g-padding-2xs, 4px);

    /* Type 1 defaults: title left, arrow right */
    --ux4g-accordion-arrow-order: 1;
    --ux4g-accordion-arrow-margin-left: auto;
    --ux4g-accordion-arrow-margin-right: var(--ux4g-spacing-none, 0);
}

/* Accordion */
.ux4g-accordion {
    width: 100%;
    border-bottom: var(--ux4g-border-width-sm, 1px) solid var(--ux4g-accordion-border-color);
    background: var(--ux4g-accordion-body-bg);
}

.ux4g-accordion__item {
    border-bottom: var(--ux4g-border-width-sm, 1px) solid var(--ux4g-accordion-border-color);
}

.ux4g-accordion__item:last-child {
    border-bottom: var(--ux4g-border-width-none, 0);
}

.ux4g-accordion__header { margin: var(--ux4g-margin-none, 0); }

.ux4g-accordion__button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--ux4g-accordion-button-min-height);
    padding: var(--ux4g-accordion-button-padding-y) var(--ux4g-accordion-button-padding-x);
    background: var(--ux4g-accordion-body-bg);
    border: var(--ux4g-border-width-none, 0);
    color: var(--ux4g-accordion-title-color);
    font-size: var(--ux4g-accordion-title-size);
    line-height: var(--ux4g-accordion-title-line-height);
    font-weight: var(--ux4g-accordion-title-weight);
    font-family: var(--ux4g-ff);
    text-align: var(--ux4g-ta-start, left);
    overflow-anchor: none;
    cursor: pointer;
    transition: background-color var(--ux4g-duration-fast, 0.2s) ease;
}

.ux4g-accordion__button-content {
    flex: 1 1 auto;
    min-width: 0;
}

.ux4g-accordion__title {
    display: block;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    word-break: var(--ux4g-wb-break, break-word);
}

.ux4g-accordion__button::after {
    content: "";
    order: var(--ux4g-accordion-arrow-order);
    width: var(--ux4g-accordion-arrow-size);
    height: var(--ux4g-accordion-arrow-size);
    margin-left: var(--ux4g-accordion-arrow-margin-left);
    margin-right: var(--ux4g-accordion-arrow-margin-right);
    border-right: var(--ux4g-accordion-arrow-stroke) solid var(--ux4g-accordion-icon-color);
    border-bottom: var(--ux4g-accordion-arrow-stroke) solid var(--ux4g-accordion-icon-color);
    transform: rotate(45deg);
    transition: transform var(--ux4g-duration-fast, 0.2s) ease, margin-top var(--ux4g-duration-fast, 0.2s) ease, border-color var(--ux4g-duration-fast, 0.2s) ease;
    flex-shrink: 0;
}

.ux4g-accordion__button:hover {
    background: var(--ux4g-accordion-header-bg-hover);
}

.ux4g-accordion__button:hover::after {
    border-right-color: var(--ux4g-accordion-icon-color-hover);
    border-bottom-color: var(--ux4g-accordion-icon-color-hover);
}

.ux4g-accordion__button:focus-visible {
    outline: var(--ux4g-border-width-md, 2px) solid var(--ux4g-accordion-focus-color);
    outline-offset: calc(var(--ux4g-padding-3xs, 2px) * -1);
}

.ux4g-accordion__button:not(.collapsed) {
    background: var(--ux4g-accordion-header-bg-expanded);
    outline: none;
}

.ux4g-accordion__button:not(.collapsed)::after {
    transform: rotate(-135deg);
    margin-top: var(--ux4g-accordion-arrow-open-offset);
}


.ux4g-accordion__collapse {
    height: 0;
    overflow: var(--ux4g-of-hidden);
    transition: height var(--ux4g-duration-normal, 0.28s) cubic-bezier(.4, 0, .2, 1);
}

.ux4g-accordion__collapse.show {
    height: auto;
}

.ux4g-accordion__collapse.collapsing {
    height: 0;
    overflow: var(--ux4g-of-hidden);
    transition: height var(--ux4g-duration-normal, 0.28s) cubic-bezier(.4, 0, .2, 1);
}

.ux4g-accordion__body {
    padding: 0 var(--ux4g-accordion-body-padding-x) var(--ux4g-accordion-body-padding-y);
    background: var(--ux4g-accordion-body-bg);
    color: var(--ux4g-accordion-body-color);
    font-size: var(--ux4g-accordion-body-size);
    line-height: var(--ux4g-accordion-body-line-height);
    font-weight: var(--ux4g-accordion-body-weight);
    font-family: var(--ux4g-ff);
}

.ux4g-accordion__body > :first-child {
    margin-top: var(--ux4g-margin-none, 0);
}

.ux4g-accordion__body > :last-child {
    margin-bottom: var(--ux4g-margin-none, 0);
}

/* Type 1: title left, arrow right */
.ux4g-accordion-arrow-right {
    --ux4g-accordion-arrow-order: 1;
    --ux4g-accordion-arrow-margin-left: auto;
    --ux4g-accordion-arrow-margin-right: var(--ux4g-spacing-none, 0);
}

/* Type 2: arrow left, gap, title */
.ux4g-accordion-arrow-left {
    --ux4g-accordion-arrow-order: -1;
    --ux4g-accordion-arrow-margin-left: var(--ux4g-spacing-none, 0);
    --ux4g-accordion-arrow-margin-right: var(--ux4g-padding-m, 16px);
}

/* Type 4: with container */
.ux4g-accordion-bordered {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-padding-xl, 24px);
    border-bottom: var(--ux4g-border-width-none);
}

.ux4g-accordion-bordered .ux4g-accordion__item {
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
    border-radius: var(--ux4g-radius-md);
    overflow: var(--ux4g-of-hidden);
}

.ux4g-accordion-bordered .ux4g-accordion__item:focus-within {
    overflow: visible;
}

.ux4g-accordion-bordered .ux4g-accordion__item:last-child {
    border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
}

.ux4g-accordion-bordered .ux4g-accordion__button {
     background-color: var(--ux4g-accordion-body-bg);
     color: var(--ux4g-accordion-title-color);
     font-size: var(--ux4g-accordion-title-size);
     border-radius: var(--ux4g-radius-md);
}
.ux4g-accordion-bordered .ux4g-accordion__body{
margin: 0 var(--ux4g-accordion-body-padding-x) var(--ux4g-accordion-body-padding-y);
padding: 0;
}

.ux4g-accordion-bordered .ux4g-accordion__body {
     background-color: var(--ux4g-accordion-body-bg);
     color: var(--ux4g-accordion-body-color);
     font-size: var(--ux4g-accordion-body-size);
}


/* 48rem = 768px */
@media (max-width: 48rem) {
    .ux4g-accordion {
        --ux4g-accordion-button-min-height: var(--ux4g-fs-48, 48px);
        --ux4g-accordion-button-padding-x: var(--ux4g-padding-s);
        --ux4g-accordion-button-padding-y: var(--ux4g-padding-s);
        --ux4g-accordion-body-padding-x: var(--ux4g-padding-s);
        --ux4g-accordion-body-padding-y: var(--ux4g-padding-s);
        --ux4g-accordion-body-size: var(--ux4g-fs-14);
        --ux4g-accordion-body-line-height: var(--ux4g-lh-20);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ux4g-accordion__button,
    .ux4g-accordion__button::after,
    .ux4g-accordion__collapse.collapsing {
        transition: none;
    }
}

.ux4g-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--ux4g-inline-s);
    cursor: pointer;
    vertical-align: var(--ux4g-va-middle);
    position: var(--ux4g-pos-relative);
    user-select: none;
    box-sizing: border-box;
    font-family: inherit;
}

.ux4g-switch-reverse {
    flex-direction: row-reverse;
}

.ux4g-switch-input {
    position: var(--ux4g-pos-absolute);
    width: 0;
    height: 0;
    opacity: 0;
    margin: var(--ux4g-margin-none);
    padding: var(--ux4g-padding-none);
    pointer-events: none;
}

.ux4g-switch-control {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: var(--ux4g-pos-relative);
    padding: var(--ux4g-padding-none);
}

.ux4g-switch-track {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    border-radius: var(--ux4g-radius-full, 9999px);
    background-color: var(--ux4g-bg-neutral-subtle);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: var(--ux4g-pos-relative);
    width: var(--ux4g-size-40);
    height: 1.375rem;
    cursor: pointer;
}

.ux4g-switch-thumb {
    position: var(--ux4g-pos-absolute);
    left: 0.125rem;
    width: var(--ux4g-size-18);
    height: var(--ux4g-size-18);
    background-color: var(--ux4g-bg-neutral);
    border-radius: var(--ux4g-radius-full);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s;
    box-shadow: var(--ux4g-shadow-l1);
}

/* Checked State */
.ux4g-switch-input:checked~.ux4g-switch-control .ux4g-switch-track {
    background-color: var(--ux4g-bg-primary-strong);
}

.ux4g-switch-input:checked~.ux4g-switch-control .ux4g-switch-thumb {
    transform: translateX(var(--ux4g-size-18));
}

/* Hover States */
.ux4g-switch-input:not(:disabled):not(:checked)~.ux4g-switch-control:hover .ux4g-switch-track,
.ux4g-switch.is-hovered .ux4g-switch-input:not(:disabled):not(:checked)~.ux4g-switch-control .ux4g-switch-track {
    background-color: var(--ux4g-bg-neutral-subtle);
    /* Fallback to neutral hover if token missing */
}

.ux4g-switch-input:not(:disabled):checked~.ux4g-switch-control:hover .ux4g-switch-track,
.ux4g-switch.is-hovered .ux4g-switch-input:not(:disabled):checked~.ux4g-switch-control .ux4g-switch-track {
    background-color: var(--ux4g-bg-primary-strong-hover);
}

/* Active States */
.ux4g-switch-input:not(:disabled):not(:checked)~.ux4g-switch-control:active .ux4g-switch-thumb,
.ux4g-switch.is-active .ux4g-switch-input:not(:disabled):not(:checked)~.ux4g-switch-control .ux4g-switch-thumb {
    background-color: var(--ux4g-bg-neutral-emphasis);
}

.ux4g-switch-input:not(:disabled):checked~.ux4g-switch-control:active .ux4g-switch-thumb,
.ux4g-switch.is-active .ux4g-switch-input:not(:disabled):checked~.ux4g-switch-control .ux4g-switch-thumb {
    background-color: var(--ux4g-bg-neutral-emphasis);
}

/* Focus State (Default/LG is 2px outline) */
.ux4g-switch-input:focus-visible~.ux4g-switch-control .ux4g-switch-track,
.ux4g-switch.is-focused .ux4g-switch-control .ux4g-switch-track {
    box-shadow: 0 0 0 0.125rem var(--ux4g-bg-neutral), 0 0 0 0.25rem var(--ux4g-bg-primary-strong);
    outline: none;
}

/* S/M sizes have 1px outline */
.ux4g-switch-sm .ux4g-switch-input:focus-visible~.ux4g-switch-control .ux4g-switch-track,
.ux4g-switch-md .ux4g-switch-input:focus-visible~.ux4g-switch-control .ux4g-switch-track,
.ux4g-switch-sm.is-focused .ux4g-switch-control .ux4g-switch-track,
.ux4g-switch-md.is-focused .ux4g-switch-control .ux4g-switch-track {
    box-shadow: 0 0 0 0.0625rem var(--ux4g-bg-neutral), 0 0 0 0.125rem var(--ux4g-bg-primary-strong);
}

/* Disabled State */
.ux4g-switch-input:disabled~.ux4g-switch-control .ux4g-switch-track {
    background-color: var(--ux4g-bg-neutral-disabled);
    cursor: not-allowed;
}

.ux4g-switch-input:disabled~.ux4g-switch-control .ux4g-switch-thumb {
    background-color: var(--ux4g-text-neutral-disabled);
}

.ux4g-switch-input:disabled~.ux4g-switch-content {
    opacity: 0.6;
    cursor: not-allowed;
}

.ux4g-switch:has(.ux4g-switch-input:disabled) {
    cursor: not-allowed;
}

/* Content & Typography */
.ux4g-switch-content {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--ux4g-inline-xs);
    flex-shrink: 0;
    cursor: default;
}

.ux4g-switch-label {
    white-space: var(--ux4g-tw-nowrap);
}

.ux4g-switch-description {
    display: inline-flex;
    align-items: center;
    gap: var(--ux4g-inline-xs);
    flex-shrink: 0;
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
    font-weight: var(--ux4g-fw-regular);
    white-space: var(--ux4g-tw-nowrap);
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-switch-desc-icon {
    width: var(--ux4g-size-16);
    height: var(--ux4g-size-16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-switch-icon {
    width: var(--ux4g-size-20);
    height: var(--ux4g-size-20);
    color: var(--ux4g-text-neutral-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Sizes */
/* SM */
.ux4g-switch-sm {
    gap: var(--ux4g-inline-xs);
}

.ux4g-switch-sm .ux4g-switch-track {
    width: var(--ux4g-size-32);
    height: var(--ux4g-size-18);
}

.ux4g-switch-sm .ux4g-switch-thumb {
    width: var(--ux4g-size-14);
    height: var(--ux4g-size-14);
    left: 0.125rem;
}

.ux4g-switch-sm .ux4g-switch-input:checked~.ux4g-switch-control .ux4g-switch-thumb {
    transform: translateX(var(--ux4g-size-14));
}

.ux4g-switch-sm .ux4g-switch-label {
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
}

.ux4g-switch-sm .ux4g-switch-description {
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
}

.ux4g-switch-sm .ux4g-switch-desc-icon {
    width: var(--ux4g-size-14);
    height: var(--ux4g-size-14);
}

.ux4g-switch-sm .ux4g-switch-icon {
    width: var(--ux4g-size-16);
    height: var(--ux4g-size-16);
}

/* MD (Default) */
.ux4g-switch-md .ux4g-switch-track {
    width: var(--ux4g-size-40);
    height: 1.375rem;
}

.ux4g-switch-md .ux4g-switch-thumb {
    width: var(--ux4g-size-18);
    height: var(--ux4g-size-18);
    left: 0.125rem;
}

.ux4g-switch-md .ux4g-switch-input:checked~.ux4g-switch-control .ux4g-switch-thumb {
    transform: translateX(var(--ux4g-size-18));
}

.ux4g-switch-md .ux4g-switch-label {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-18);
}

.ux4g-switch-md .ux4g-switch-description {
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
}

.ux4g-switch-md .ux4g-switch-desc-icon {
    width: var(--ux4g-size-16);
    height: var(--ux4g-size-16);
}

.ux4g-switch-md .ux4g-switch-icon {
    width: var(--ux4g-size-20);
    height: var(--ux4g-size-20);
}

/* LG */
.ux4g-switch-lg {
    gap: var(--ux4g-inline-m);
}

.ux4g-switch-lg .ux4g-switch-track {
    width: var(--ux4g-size-48);
    height: var(--ux4g-size-28);
}

.ux4g-switch-lg .ux4g-switch-thumb {
    width: 1.375rem;
    height: 1.375rem;
    left: 0.1875rem;
}

.ux4g-switch-lg .ux4g-switch-input:checked~.ux4g-switch-control .ux4g-switch-thumb {
    transform: translateX(var(--ux4g-size-20));
}

.ux4g-switch-lg .ux4g-switch-label {
    font-size: var(--ux4g-fs-16);
    line-height: var(--ux4g-lh-20);
}

.ux4g-switch-lg .ux4g-switch-description {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-18);
}

.ux4g-switch-lg .ux4g-switch-desc-icon {
    width: var(--ux4g-size-18);
    height: var(--ux4g-size-18);
}

.ux4g-switch-lg .ux4g-switch-icon {
    width: var(--ux4g-size-24);
    height: var(--ux4g-size-24);
}

/* Description Variants (Standalone) */
.ux4g-switch-desc-helper {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-switch-desc-error {
    color: var(--ux4g-text-status-error);
}

.ux4g-switch-desc-warning {
    color: var(--ux4g-text-status-warning);
}

.ux4g-switch-desc-success {
    color: var(--ux4g-text-status-success);
}

.ux4g-switch-desc-info {
    color: var(--ux4g-text-status-info);
}

/* Description Variant Icons - Standalone Overrides */
.ux4g-switch-desc-icon-helper,
.ux4g-switch-desc-icon-helper .ux4g-switch-icon {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-switch-desc-icon-error,
.ux4g-switch-desc-icon-error .ux4g-switch-icon {
    color: var(--ux4g-icon-status-error);
}

.ux4g-switch-desc-icon-warning,
.ux4g-switch-desc-icon-warning .ux4g-switch-icon {
    color: var(--ux4g-icon-status-warning);
}

.ux4g-switch-desc-icon-success,
.ux4g-switch-desc-icon-success .ux4g-switch-icon {
    color: var(--ux4g-icon-status-success);
}

.ux4g-switch-desc-icon-info,
.ux4g-switch-desc-icon-info .ux4g-switch-icon {
    color: var(--ux4g-icon-status-info);
}

/* Mobile only: apply mobile variant */
@media (max-width: 768px) {
    .ux4g-switch-md {
        gap: var(--ux4g-inline-m);
    }

    .ux4g-switch-md .ux4g-switch-track {
        width: var(--ux4g-size-48);
        height: var(--ux4g-size-28);
    }

    .ux4g-switch-md .ux4g-switch-thumb {
        width: 1.375rem;
        height: 1.375rem;
        left: 0.1875rem;
    }

    .ux4g-switch-md .ux4g-switch-input:checked~.ux4g-switch-control .ux4g-switch-thumb {
        transform: translateX(var(--ux4g-size-20));
    }

    .ux4g-switch-md .ux4g-switch-label {
        font-size: var(--ux4g-fs-16);
        line-height: var(--ux4g-lh-20);
    }

    .ux4g-switch-md .ux4g-switch-description {
        font-size: var(--ux4g-fs-14);
        line-height: var(--ux4g-lh-18);
    }

    .ux4g-switch-md .ux4g-switch-desc-icon {
        width: var(--ux4g-size-18);
        height: var(--ux4g-size-18);
    }

    .ux4g-switch-md .ux4g-switch-icon {
        width: var(--ux4g-size-24);
        height: var(--ux4g-size-24);
    }
}

/* stepper */
.ux4g-steps,
.ux4g-timeline,
.ux4g-stepper {
    --ux4g-steps-transition: height 0.2s ease-in-out;
    position: var(--ux4g-pos-relative);
    width: 100%;
    overflow: hidden;
    transition: var(--ux4g-steps-transition)
}

.ux4g-steps-step,
.ux4g-timeline-step,
.ux4g-stepper-vertical .ux4g-stepper-step {
    width: 100%;
    height: fit-content;
    position: var(--ux4g-pos-relative)
}

.ux4g-stepper-vertical .ux4g-stepper-step:not(:last-child):after {
    top: 3.25rem;
    height: calc(100% - 2.45rem);
}

.ux4g-steps-step-after,
.ux4g-timeline-step:after,
.ux4g-stepper-vertical .ux4g-stepper-step:not(:last-child):after {
    position: var(--ux4g-pos-absolute);
    left: var(--ux4g-space-10);
    width: 1px;
    content: "";
}

.ux4g-stepper-vertical .ux4g-stepper-done:after {
    background-color: var(--ux4g-bg-primary-strong) !important;
}

.ux4g-steps-content,
.ux4g-timeline-content,
.ux4g-stepper-vertical .ux4g-stepper-content {
    padding-block: var(--ux4g-padding-xl);
    overflow: hidden;
    padding-top: var(--ux4g-padding-none);
    padding-bottom: var(--ux4g-padding-xl);
    padding-right: var(--ux4g-padding-xl)
}

.ux4g-steps-head-vertical,
.ux4g-timeline-head,
.ux4g-stepper-vertical .ux4g-stepper-head {
    padding: var(--ux4g-padding-xl) var(--ux4g-padding-xl) var(--ux4g-padding-xl) var(--ux4g-padding-none);
}

.ux4g-steps-head-icon-vertical,
.ux4g-timeline-head-icon,
.ux4g-stepper-vertical .ux4g-stepper-head-icon {
    margin-right: var(--ux4g-margin-s)
}

.ux4g-steps-head-text-after-vertical,
.ux4g-stepper-vertical .ux4g-stepper-description:after {
    position: var(--ux4g-pos-absolute)
}

.ux4g-steps-head,
.ux4g-timeline-head,
.ux4g-stepper-head {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-inline-s);
}


.ux4g-steps-head-focus,
.ux4g-stepper-head:focus {
    outline: none
}

.ux4g-steps-head-text,
.ux4g-timeline-head-text,
.ux4g-stepper-description {
    color: var(--ux4g-text-neutral-tertiary);
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
    font-weight: var(--ux4g-font-weight-medium);
}

.ux4g-steps-head-text-after,
.ux4g-timeline-head-text:after,
.ux4g-stepper-description:after {
    display: flex;
}

.ux4g-steps-head-icon,
.ux4g-timeline-head-icon,
.ux4g-stepper-head-icon {
    font-size: var(--ux4g-fs-14);
    width: 1.938rem;
    height: 1.938rem;
    font-weight: var(--ux4g-fw-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}


.ux4g-stepper-step.ux4g-stepper-horizontal .ux4g-stepper-label,
.ux4g-stepper-step.ux4g-stepper-horizontal .ux4g-stepper-label-success,
.ux4g-stepper-step.ux4g-stepper-horizontal .ux4g-stepper-label-inprogress,
.ux4g-stepper-step.ux4g-stepper-horizontal .ux4g-label-l-default {
    margin-left: var(--ux4g-space-10);
}

.ux4g-stepper-step .ux4g-stepper-label {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-stepper-step .ux4g-stepper-label-success {
    color: var(--ux4g-text-status-success);
}

.ux4g-stepper-step .ux4g-stepper-label-inprogress {
    color: var(--ux4g-text-brand-primary-default);
}

.ux4g-stepper-step .ux4g-stepper-label-success,
.ux4g-stepper-step .ux4g-stepper-label-inprogress {
    display: none;
}

.ux4g-stepper-completed .ux4g-stepper-label-success,
.ux4g-stepper-completed .ux4g-stepper-label-inprogress,
.ux4g-stepper-vertical .ux4g-stepper-label-success,
.ux4g-stepper-vertical .ux4g-stepper-label-inprogress {
    display: block !important;
}



/* .ux4g-stepper-horizontal .ux4g-stepper-status,
.ux4g-stepper-horizontal .ux4g-stepper-label {
    margin-left: var(--ux4g-space-10);

} */

.ux4g-stepper:not(.ux4g-stepper-vertical) {
    display: flex;
    justify-content: space-between
}

.ux4g-stepper:not(.ux4g-stepper-vertical) .ux4g-stepper-content {
    position: var(--ux4g-pos-absolute);
    width: 100%;
    /* padding-right: var(--ux4g-stepper-padding-x);
    padding-left: var(--ux4g-stepper-padding-x) */
}

.ux4g-stepper:not(.ux4g-stepper-vertical) .ux4g-stepper-step {
    flex: 1;
    /* height: var(--ux4g-stepper-step-height) */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ux4g-inline-s);
    position: var(--ux4g-pos-relative);
}

.ux4g-stepper:not(.ux4g-stepper-vertical):not(.ux4g-stepper-center):not(.ux4g-stepper-left) .ux4g-stepper-step:last-child {
    flex: none;
}

/* .ux4g-stepper:not(.ux4g-stepper-vertical) .ux4g-stepper-step:first-child .ux4g-stepper-head {
    padding-left: var(--ux4g-stepper-step-head-padding-left)
} */

/* .ux4g-stepper:not(.ux4g-stepper-vertical) .ux4g-stepper-step:last-child .ux4g-stepper-head {
    padding-right: var(--ux4g-stepper-step-head-padding-right)
} */

.ux4g-stepper:not(.ux4g-stepper-vertical):not(.ux4g-stepper-center):not(.ux4g-stepper-left):not(.ux4g-stepper-bottom-line) .ux4g-stepper-step:not(:last-child):after {
    position: var(--ux4g-pos-absolute);
    top: 13.5px;
    left: 39px;
    right: calc(var(--ux4g-inline-s, 16px) * -1 + 8px);
    width: auto;
    height: 4px;
    content: "";
    background-color: var(--ux4g-bg-neutral-subtle);
}

.ux4g-stepper:not(.ux4g-stepper-vertical):not(.ux4g-stepper-center):not(.ux4g-stepper-left):not(.ux4g-stepper-bottom-line) .ux4g-stepper-step.ux4g-stepper-done:not(:last-child):after {
    background-color: var(--ux4g-bg-primary-strong) !important;
}

/* .ux4g-stepper:not(.ux4g-stepper-vertical) .ux4g-stepper-head-icon {
    margin-right: var(--ux4g-margin-xs);
    margin-left: 0
} */

.ux4g-stepper-vertical .ux4g-stepper-step:not(:last-child):after {
    height: calc(100% - 2rem)
}

.ux4g-stepper-vertical .ux4g-stepper-content {
    padding-left: var(--ux4g-space-13);
}

.ux4g-stepper-vertical .ux4g-stepper-content-hide {
    margin-top: var(--ux4g-margin-none) !important;
    margin-bottom: var(--ux4g-margin-none) !important;
    padding-top: var(--ux4g-padding-none) !important;
    padding-bottom: var(--ux4g-padding-none) !important;
    height: 0 !important
}

.ux4g-stepper-vertical .ux4g-stepper-head {
    padding-bottom: var(--ux4g-padding-xl)
}

.ux4g-stepper.ux4g-stepper-mobile {
    justify-content: center;
    align-items: flex-end
}

.ux4g-stepper.ux4g-stepper-mobile.ux4g-stepper-progress-bar .ux4g-stepper-head-icon {
    display: none
}

.ux4g-stepper.ux4g-stepper-mobile .ux4g-stepper-step {
    flex: unset;
    height: fit-content;
    margin-top: var(--ux4g-margin-m);
    margin-bottom: var(--ux4g-margin-m)
}

.ux4g-stepper.ux4g-stepper-mobile .ux4g-stepper-step:not(:last-child):after {
    margin-left: var(--ux4g-margin-none)
}

.ux4g-stepper.ux4g-stepper-mobile .ux4g-stepper-step:not(:last-child):not(:first-child) .ux4g-stepper-head {
    padding-left: var(--ux4g-padding-2xs);
    padding-right: var(--ux4g-padding-2xs)
}

.ux4g-stepper.ux4g-stepper-mobile .ux4g-stepper-head-icon {
    font-size: 0;
    margin: var(--ux4g-margin-none);
    height: 8px;
    width: 8px;
    z-index: var(--ux4g-z-layout-raised)
}

.ux4g-stepper.ux4g-stepper-mobile .ux4g-stepper-description {
    display: none
}

.ux4g-stepper.ux4g-stepper-mobile .ux4g-stepper-content {
    top: var(--ux4g-space-10)
}

.ux4g-stepper-form {
    display: inherit;
    justify-content: inherit;
    width: inherit;
    position: inherit
}

.ux4g-stepper-content {
    left: 0
}

.ux4g-stepper-completed .ux4g-stepper-head-icon {
    color: var(--ux4g-color-neutral-300);
    border: solid 2px var(--ux4g-bg-neutral-subtle);
}

.ux4g-stepper-completed .ux4g-stepper-warning {
    border-color: var(--ux4g-border-color-error-strong) !important;
    color: var(--ux4g-text-status-error);
}

.ux4g-stepper-completed .ux4g-stepper-warning-icon {
    border-color: var(--ux4g-border-color-error-strong) !important;
    color: var(--ux4g-icon-status-error);
}

.ux4g-stepper-completed .ux4g-stepper-warning .ux4g-stepper-warning-icon,
.ux4g-stepper-completed .ux4g-stepper-warning .ux4g-stepper-warning-icon {
    color: var(--ux4g-icon-status-error) !important;
}

.ux4g-stepper-done .ux4g-stepper-warning {
    border-color: var(--ux4g-bg-primary-strong) !important;
}

.ux4g-stepper-done .ux4g-stepper-warning .ux4g-stepper-warning-icon {
    display: none;
}

.ux4g-stepper-completed .ux4g-stepper-head-icon .ux4g-stepper-head-check {
    width: 16px;
    height: 16px;
    border-radius: var(--ux4g-radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ux4g-stepper-completed span.ux4g-stepper-head-icon-active {
    border-color: var(--ux4g-border-color-primary-strong);
}

.ux4g-stepper-completed span.ux4g-stepper-head-check-active {
    background-color: var(--ux4g-bg-primary-strong) !important;
    font-size: 0;
}

.ux4g-stepper-done .ux4g-stepper-content {
    display: block
}

.ux4g-stepper-done span.ux4g-stepper-head-icon {
    background-color: var(--ux4g-bg-primary-strong);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cmask id='mask0_2138_6182' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='21' height='20'%3E%3Crect x='0.5' width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2138_6182)'%3E%3Cpath d='M8.45825 15L3.70825 10.25L4.89575 9.06252L8.45825 12.625L16.1041 4.97919L17.2916 6.16669L8.45825 15Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 0;
    border-color: var(--ux4g-bg-primary-strong);
}

/* The horizontal done line is now placed on .ux4g-stepper-step.ux4g-stepper-done:not(:last-child):after */

.ux4g-stepper-done .ux4g-stepper-head-icon .ux4g-stepper-head-check {
    display: none;
}

.ux4g-stepper-disabled .ux4g-stepper-head {
    cursor: default
}

.ux4g-stepper-mobile-head {
    position: var(--ux4g-pos-absolute);
    align-self: normal;
    height: fit-content;
    /* background-color: var(--ux4g-stepper-mobile-head-bg);
     */
    width: 100%;
    padding-top: var(--ux4g-padding-xs);
    padding-right: var(--ux4g-padding-m);
    padding-bottom: var(--ux4g-padding-xs);
    padding-left: var(--ux4g-padding-xs)
}

.ux4g-stepper-mobile-footer {
    position: var(--ux4g-pos-absolute);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: var(--ux4g-stepper-mobile-footer-bg);
     */
    width: 100%;
    height: 40px
}

.ux4g-stepper-back-btn {
    display: block;
    left: var(--ux4g-pos-start-0)
}

.ux4g-stepper-back-btn .btn-link {
    color: unset
}

.ux4g-stepper-back-btn i {
    margin-right: var(--ux4g-margin-xs)
}

.ux4g-stepper-next-btn {
    display: block;
    right: var(--ux4g-pos-end-0)
}

.ux4g-stepper-next-btn .btn-link {
    color: unset
}

.ux4g-stepper-next-btn i {
    margin-left: var(--ux4g-margin-xs)
}

.ux4g-stepper-mobile-progress-bar {
    height: 4px;
    /* background-color: var(--ux4g-stepper-mobile-active-progress-bar-color);
     */
    width: 0
}

.ux4g-stepper-mobile-progress {
    height: 4px;
    flex-grow: 100;
    /* background-color: var(--ux4g-stepper-mobile-progress-background-color) */
}

/* ========================================================== Common Styles: Center & Left Aligned Steppers ========================================================== */
.ux4g-stepper:is(.ux4g-stepper-center, .ux4g-stepper-left, .ux4g-stepper-horizontal) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: var(--ux4g-padding-s);
    gap: var(--ux4g-inline-s);
}

:is(.ux4g-stepper-center, .ux4g-stepper-left) .ux4g-stepper-step {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: var(--ux4g-pos-relative);
}

:is(.ux4g-stepper-center, .ux4g-stepper-left) .ux4g-stepper-step:not(:last-child):after {
    content: "";
    position: var(--ux4g-pos-absolute);
    top: 18px;
    height: 4px;
    background-color: var(--ux4g-bg-neutral-subtle);
}

:is(.ux4g-stepper-center, .ux4g-stepper-left) .ux4g-stepper-step.ux4g-stepper-done:not(:last-child):after {
    background-color: var(--ux4g-bg-primary-strong) !important;
}

:is(.ux4g-stepper-center, .ux4g-stepper-left) .ux4g-stepper-head:after {
    display: none !important;
}

:is(.ux4g-stepper-center, .ux4g-stepper-left) .ux4g-stepper-head {
    display: flex;
    flex-direction: column;
    padding: var(--ux4g-padding-none);
}

:is(.ux4g-stepper-center, .ux4g-stepper-left) .ux4g-stepper-head-icon {
    width: 40px;
    height: 40px;
    margin: var(--ux4g-margin-none) var(--ux4g-margin-none) var(--ux4g-margin-xs) var(--ux4g-margin-none);
    z-index: var(--ux4g-z-layout-overlay);
    display: flex;
    justify-content: center;
    align-items: center;
}

:is(.ux4g-stepper-s, .ux4g-stepper-small) .ux4g-stepper-head-icon {
    width: 20px !important;
    height: 20px !important;
}

:is(.ux4g-stepper-s, .ux4g-stepper-small) .ux4g-stepper-head-check {
    width: 9px !important;
    height: 9px !important;
}

:is(.ux4g-stepper-s, .ux4g-stepper-small) .ux4g-stepper-done span.ux4g-stepper-head-icon {
    background-size: 12px;
}

:is(.ux4g-stepper-s, .ux4g-stepper-small) .ux4g-stepper-head-icon {
    font-size: var(--ux4g-fs-11);
}

/* Progress line adjustment for small variants (20px icons) */
:is(.ux4g-stepper-s, .ux4g-stepper-small):not(.ux4g-stepper-vertical):not(.ux4g-stepper-center):not(.ux4g-stepper-bottom-line) .ux4g-stepper-step:not(:last-child):after,
:is(.ux4g-stepper-s, .ux4g-stepper-small).ux4g-stepper-left .ux4g-stepper-step:not(:last-child):after {
    left: 28px !important;
    right: calc(var(--ux4g-inline-s, 16px) * -1 + 8px) !important;
    width: auto !important;
    top: 8px !important;
}

:is(.ux4g-stepper-s, .ux4g-stepper-small).ux4g-stepper-center:not(.ux4g-stepper-bottom-line) .ux4g-stepper-step:not(:last-child):after {
    left: calc(50% + 18px) !important;
    right: calc(-50% - var(--ux4g-inline-s, 16px) + 18px) !important;
    width: auto !important;
    top: 8px !important;
}

:is(.ux4g-stepper-center, .ux4g-stepper-left) .ux4g-stepper-label-success,
:is(.ux4g-stepper-center, .ux4g-stepper-left) .ux4g-stepper-label-inprogress {
    display: block !important;
}

:is(.ux4g-stepper-center, .ux4g-stepper-left) .ux4g-label-l-default {
    margin: var(--ux4g-margin-none) !important;
}

/* ========================================================== Center Aligned Specific Adjustments ========================================================== */
.ux4g-stepper.ux4g-stepper-horizontal.ux4g-stepper-center .ux4g-stepper-step {
    align-items: center;
    text-align: center;
}

.ux4g-stepper-center .ux4g-stepper-head {
    align-items: center;
}

.ux4g-stepper-center:not(.ux4g-stepper-bottom-line) .ux4g-stepper-step:not(:last-child):after {
    left: calc(50% + 28px);
    right: calc(-50% - var(--ux4g-inline-s, 16px) + 28px);
    width: auto;
}

/* ========================================================== Left Aligned Specific Adjustments ========================================================== */
.ux4g-stepper.ux4g-stepper-horizontal.ux4g-stepper-left .ux4g-stepper-step {
    align-items: flex-start;
    text-align: left;
}

.ux4g-stepper-left .ux4g-stepper-head {
    align-items: flex-start;
}

.ux4g-stepper-left .ux4g-stepper-step:not(:last-child):after {
    left: 48px;
    right: calc(var(--ux4g-inline-s, 16px) * -1 + 8px);
    width: auto;
}

.ux4g-stepper-left .ux4g-stepper-step:last-child {
    flex: none;
}

/* ========================================================== Bottom Line Variant (.ux4g-stepper-bottom-line) Combine with .ux4g-stepper-center ========================================================== */
.ux4g-stepper-bottom-line {
    gap: var(--ux4g-space-6);
}

.ux4g-stepper-bottom-line li {
    padding-block-start: var(--ux4g-padding-xs);
}

.ux4g-stepper-bottom-line-fill .ux4g-stepper-done {
    background-color: var(--ux4g-bg-neutral);
}

.ux4g-stepper-bottom-line-fill .ux4g-stepper-inprogress {
    background-color: var(--ux4g-bg-primary);
}

.ux4g-stepper.ux4g-stepper-bottom-line .ux4g-stepper-step::after,
.ux4g-stepper.ux4g-stepper-bottom-line .ux4g-stepper-step:last-child::after {
    content: "";
    position: static;
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--ux4g-bg-neutral-subtle);
    margin: var(--ux4g-margin-xs, 12px) 0 0 0;
}

.ux4g-stepper.ux4g-stepper-bottom-line .ux4g-stepper-step.ux4g-stepper-done::after {
    background-color: var(--ux4g-bg-primary-strong) !important;
}

/* ========================================================== VERTICAL STEPPER (with CSS Grid) ========================================================== */
.ux4g-stepper-vertical-o-lebel li {
    min-height: 100px;
}

.ux4g-stepper-vertical-ld li {
    min-height: 110px;
}

.ux4g-vertical-content-group {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs)
}

.ux4g-stepper-vertical {
    display: flex;
    flex-direction: column;
    padding: var(--ux4g-padding-none);
    margin: var(--ux4g-margin-none);
}

.ux4g-stepper-vertical .ux4g-stepper-step {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--ux4g-margin-m, 16px);
    position: var(--ux4g-pos-relative);
    align-items: center;
}

.ux4g-stepper-vertical .ux4g-stepper-head {
    grid-column: 1;
    /* grid-row: 1 / 4; */
    display: flex;
    align-items: flex-start;
    margin: var(--ux4g-margin-none) !important;
    padding: var(--ux4g-padding-none) !important;
}

.ux4g-stepper-vertical .ux4g-stepper-head-icon {
    width: 40px;
    height: 40px;
    margin: var(--ux4g-margin-none) !important;
    z-index: 2;
    background-color: var(--ux4g-bg-neutral);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ux4g-stepper-vertical .ux4g-stepper-step>span {
    grid-column: 2;
    margin-left: var(--ux4g-margin-none) !important;
}

/* .ux4g-stepper-vertical .ux4g-stepper-label {
    padding-top: 4px;
} */

.ux4g-stepper-vertical .ux4g-stepper-description {
    grid-row: 2;
}

.ux4g-stepper-vertical .ux4g-stepper-step>span:last-child {
    grid-row: 3;
}

.ux4g-stepper-vertical .ux4g-stepper-step:not(:last-child):after {
    content: "";
    position: var(--ux4g-pos-absolute);
    left: 18px;
    top: calc(50% + -20px);
    height: calc(100% - 0px);
    width: 4px;
    background-color: var(--ux4g-bg-neutral-subtle, #e0e0e0);
}

/* Color line when step is completed */
.ux4g-stepper-vertical .ux4g-stepper-step.ux4g-stepper-done:not(:last-child):after {
    background-color: var(--ux4g-bg-primary-strong) !important;
}

/* ========================================================== VERTICAL STEPPER (Small Variant : 24px) ========================================================== */
.ux4g-stepper-vertical:is(.ux4g-stepper-s, .ux4g-stepper-small) .ux4g-stepper-step {
    grid-template-columns: 24px 1fr;
    column-gap: var(--ux4g-margin-m, 16px);
}

.ux4g-stepper-vertical:is(.ux4g-stepper-s, .ux4g-stepper-small) .ux4g-stepper-head-icon {
    width: 24px !important;
    height: 24px !important;
}

/* Connecting Line (Small: 24px Icon) */
.ux4g-stepper-vertical:is(.ux4g-stepper-s, .ux4g-stepper-small) .ux4g-stepper-step:not(:last-child):after {
    left: 10px;
    top: calc(50% + -14px);
    height: calc(100% - 0px);
}

/* ========================================================== PROGRESS STEPPER - CORE & UTILITIES ========================================================== */
.ux4g-stepper-progress {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-space-4);
    width: 100%;
}

.ux4g-stepper-progress-header {
    display: flex;
    align-items: center;
    gap: var(--ux4g-space-12);
    width: 100%;
}

/* Track and Segments */
.ux4g-stepper-progress-track {
    display: flex;
    flex: 1;
    gap: var(--ux4g-space-6);
    align-items: center;
    /* FIX 1: MUST be nowrap so segments never break to a second line! */
    flex-wrap: nowrap;
    min-width: 0;
    /* Ensures the track can shrink safely on small phones */
}

.ux4g-stepper-progress-segment {
    height: 12px;
    flex: 1;
    background-color: var(--ux4g-bg-neutral-subtle);
    border-radius: var(--ux4g-radius-full);
    transition: background-color 0.3s ease;
}

.ux4g-stepper-progress-segment-active {
    background-color: var(--ux4g-bg-primary-strong);
}

/* Action Buttons */
.ux4g-stepper-progress-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ux4g-radius-full);
    border: 1px solid var(--ux4g-bg-primary-strong);
    background-color: transparent;
    cursor: pointer;
    flex-shrink: 0;
    padding: var(--ux4g-padding-xs);
    transition: all 0.2s ease;
}

.ux4g-stepper-progress-btn,
.ux4g-stepper-progress-btn .ux4g-icon-outlined {
    color: var(--ux4g-text-brand-primary-default);
    font-size: var(--ux4g-fs-20) !important;
}

.ux4g-stepper-progress-btn:disabled,
.ux4g-stepper-progress-btn.ux4g-disabled {
    border-color: var(--ux4g-bg-neutral-subtle);
    color: var(--ux4g-text-neutral-disabled);
    cursor: default;
}

.ux4g-stepper-progress-btn:disabled .ux4g-icon-outlined,
.ux4g-stepper-progress-btn.ux4g-disabled .ux4g-icon-outlined {
    color: var(--ux4g-text-neutral-disabled) !important;
}

/* Typography Strings */
.ux4g-stepper-progress-count {
    font-size: var(--ux4g-fs-16);
    font-weight: var(--ux4g-fw-bold);
    color: var(--ux4g-text-neutral-primary);
    display: block;
    margin-bottom: var(--ux4g-margin-s);
}

.ux4g-stepper-progress-label {
    font-size: var(--ux4g-fs-16);
    font-weight: var(--ux4g-fw-semibold);
    color: var(--ux4g-text-brand-primary-default);
    display: block;
}

.ux4g-stepper-progress-desc {
    font-size: var(--ux4g-fs-16);
    font-weight: var(--ux4g-fw-regular);
    color: var(--ux4g-text-neutral-tertiary);
    display: block;
    margin-top: var(--ux4g-margin-2xs);
}

/* Helper Utilities for Alignment Variants */
.ux4g-stepper-progress-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ux4g-stepper-progress-split.ux4g-align-end {
    align-items: flex-end;
}

.ux4g-stepper-progress-text-right {
    text-align: var(--ux4g-ta-end);
}

.ux4g-stepper-progress-text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ux4g-stepper-progress-actions-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ux4g-margin-xs);
}

.ux4g-stepper-progress-actions-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--ux4g-space-7);
    margin-bottom: var(--ux4g-margin-xs);
}

.ux4g-stepper-progress-controls-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ux4g-stepper-progress-btn-group {
    display: flex;
    gap: var(--ux4g-space-8);
}

/* Overrides */
.ux4g-stepper-progress .ux4g-mb-none {
    margin-bottom: var(--ux4g-margin-none) !important;
}

/* stepper status */
.ux4g-stepper-step-pending .ux4g-stepper-label,
.ux4g-stepper-step-pending .ux4g-stepper-description,
.ux4g-stepper-step-pending .ux4g-stepper-status {
    color: var(--ux4g-text-neutral-disabled);
}

/* ========================================================== FIX 2: RESPONSIVE MEDIA QUERY FOR MOBILE ========================================================== */
@media (max-width: 768px) {
    .ux4g-stepper-progress-segment {
        height: 6px;
    }

    .ux4g-stepper-progress-track {
        gap: var(--ux4g-space-4);
    }

    .ux4g-stepper-progress-split {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--ux4g-space-8);
    }

    .ux4g-stepper-progress-text-right {
        text-align: left;
    }

    .ux4g-stepper-progress-controls-end {
        align-items: flex-start;
    }

    .ux4g-stepper-progress-actions-between {
        flex-wrap: wrap;
        gap: var(--ux4g-space-8);
    }

    .ux4g-stepper-progress-header {
        gap: var(--ux4g-space-8) !important;
    }

    .ux4g-stepper-horizontal .ux4g-stepper-head {
        flex: 1;
    }

    /* Responsive sizing for stepper on mobile */
    .ux4g-stepper .ux4g-stepper-head-icon {
        width: 20px !important;
        height: 20px !important;
        font-size: var(--ux4g-fs-11);
        box-sizing: border-box !important;
    }

    .ux4g-stepper .ux4g-stepper-head-check {
        width: 10px !important;
        height: 10px !important;
    }

    .ux4g-stepper-step,
    .ux4g-stepper-content {
        min-width: 0;
        word-break: break-word;
    }

    .ux4g-stepper .ux4g-stepper-done span.ux4g-stepper-head-icon,
    .ux4g-stepper-completed span.ux4g-stepper-head-check-active {
        font-size: 0 !important;
    }

    .ux4g-stepper .ux4g-stepper-done span.ux4g-stepper-head-icon {
        background-size: 12px !important;
    }

    /* Horizontal center/left/default aligned lines adjustments when icons are 20px */
    .ux4g-stepper-center:not(.ux4g-stepper-bottom-line) .ux4g-stepper-step:not(:last-child):after {
        left: calc(50% + 18px) !important;
        right: calc(-50% - var(--ux4g-inline-s, 16px) + 18px) !important;
        width: auto !important;
        top: 8px !important;
    }

    .ux4g-stepper-left .ux4g-stepper-step:not(:last-child):after,
    .ux4g-stepper:not(.ux4g-stepper-vertical):not(.ux4g-stepper-center):not(.ux4g-stepper-bottom-line) .ux4g-stepper-step:not(:last-child):after {
        left: 28px !important;
        right: calc(var(--ux4g-inline-s, 16px) * -1 + 8px) !important;
        width: auto !important;
        top: 8px !important;
    }

    /* Vertical stepper adjustment on mobile */
    .ux4g-stepper-vertical .ux4g-stepper-step {
        grid-template-columns: 20px 1fr !important;
    }

    .ux4g-stepper-vertical .ux4g-stepper-step:not(:last-child):after {
        left: 9px !important;
        top: calc(50% + -19px) !important;
    }
}

/* stepper end */
/* Container for label and input box */
.ux4g-input-container {
    display: flex;
    flex-direction: column;
    row-gap: var(--ux4g-stack-2xs);
    width: 100%;
}

.ux4g-input-container .ux4g-label-m-default {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-input {
    display: flex;
    align-items: center;
    background-color: var(--ux4g-bg-neutral-elevated);
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    overflow: hidden;
    padding: var(--ux4g-padding-s);
}

.ux4g-input:hover,
.ux4g-textarea:hover {
    border-color: var(--ux4g-border-color-neutral-default);
}

.ux4g-input-leading-icon {
    margin-right: var(--ux4g-padding-xs);
    display: inline-block;
}

.ux4g-input-leading-icon,
.ux4g-input .ux4g-icon-outlined,
.ux4g-input-actions .ux4g-icon-outlined {
    color: var(--ux4g-text-neutral-secondary);
    font-size: var(--ux4g-fs-16);
}

.ux4g-input-input {
    flex: 1;
    background: transparent;
    font-size: var(--ux4g-fs-14);
    margin-inline-end: var(--ux4g-margin-xs);
}

.ux4g-input-actions {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-xs);
}

.ux4g-input-action-btn {
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ux4g-text-neutral-secondary, #555555);
    padding: var(--ux4g-space-1) var(--ux4g-space-2);
    transition: background-color 0.2s ease;
    border-radius: var(--ux4g-radius-full);
}

.ux4g-input-action-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.ux4g-input:focus-within {
    outline: var(--ux4g-border-width-md) solid var(--ux4g-bg-primary-strong);
}

.ux4g-input:focus-within {
    border-color: var(--ux4g-border-color-neutral-elevated) !important;
}

.ux4g-input-input:focus-within,
.ux4g-input-btn:focus-within {
    border: none !important;
    outline: none !important;
}

.ux4g-input-clear,
.ux4g-input-list,
.ux4g-input-action-btn[aria-label="Clear input"] {
    display: none;
}

.ux4g-input-container.ux4g-has-value .ux4g-input-clear,
.ux4g-input-container.ux4g-has-value .ux4g-input-action-btn[aria-label="Clear input"] {
    display: inline-flex;
}

.ux4g-input-container.ux4g-has-value .ux4g-input-list {
    display: block;
}

/* input size small*/
.ux4g-input-sm .ux4g-input-helper-text {
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
    font-weight: var(--ux4g-font-weight-regular);
}

.ux4g-input-sm .ux4g-input-helper .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-14);
}

.ux4g-input-sm .ux4g-input-input {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-font-weight-regular);
}

.ux4g-input-sm .ux4g-input {
    height: 32px;
}

.ux4g-input-sm .ux4g-input-action-btn,
.ux4g-input-sm .ux4g-input-leading-icon {
    width: 16px;
    height: 16px;
}

/* input size medium */
.ux4g-input-md .ux4g-input-helper-text {
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
    font-weight: var(--ux4g-font-weight-regular);
}

.ux4g-input-md .ux4g-input-helper .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-14);
}

.ux4g-input-md .ux4g-input-input {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-font-weight-regular);
}

.ux4g-input-md .ux4g-input {
    height: 40px;
}

.ux4g-input-md .ux4g-input-action-btn,
.ux4g-input-md .ux4g-input-leading-icon {
    width: 18px;
    height: 18px;
}

.ux4g-input-md .ux4g-input-leading-icon,
.ux4g-input-md .ux4g-input-actions .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-18);
}

/* input size large*/
.ux4g-input-lg .ux4g-input-helper-text {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-font-weight-regular);
}

.ux4g-input-lg .ux4g-input-helper .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-16);
}

.ux4g-input-lg .ux4g-input-input {
    font-size: var(--ux4g-fs-16);
    line-height: var(--ux4g-lh-24);
    font-weight: var(--ux4g-font-weight-regular);
}

.ux4g-input-lg .ux4g-input-action-btn,
.ux4g-input-lg .ux4g-input-leading-icon {
    width: 20px;
    height: 20px;
}

.ux4g-input-lg .ux4g-label-m-default {
    font-size: var(--ux4g-fs-14);
}

.ux4g-input-lg .ux4g-input {
    height: 48px;
}

.ux4g-input-lg .ux4g-input-leading-icon,
.ux4g-input-lg .ux4g-input-actions .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-20);
}

/* input size xlarge*/
.ux4g-input-xl .ux4g-input-helper-text {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-font-weight-regular);
}

.ux4g-input-xl .ux4g-input-helper .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-16);
}

.ux4g-input-xl .ux4g-input-input {
    font-size: var(--ux4g-fs-16);
    line-height: var(--ux4g-lh-24);
    font-weight: var(--ux4g-font-weight-regular);
}

.ux4g-input-xl .ux4g-input-action-btn,
.ux4g-input-xl .ux4g-input-leading-icon {
    width: 20px;
    height: 20px;
}

.ux4g-input-xl .ux4g-label-m-default {
    font-size: var(--ux4g-fs-14);
}

.ux4g-input-xl .ux4g-input {
    height: 56px;
}

.ux4g-input-xl .ux4g-input-leading-icon,
.ux4g-input-xl .ux4g-input-actions .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-20);
}

/* Helper Text */
.ux4g-input-helper {
    display: flex;
    align-items: center;
    gap: var(--ux4g-space-2);
}

.ux4g-input-helper .ux4g-input-helper-icon,
.ux4g-input-helper {
    color: var(--ux4g-text-neutral-tertiary);
}

.ux4g-input-helper-icon {
    font-size: var(--ux4g-fs-14);
}

.ux4g-textarea-helper,
.ux4g-input-helper {
    display: none !important;
}

.ux4g-input-error .ux4g-input-helper,
.ux4g-input-success .ux4g-input-helper,
.ux4g-input-warning .ux4g-input-helper,
.ux4g-input-default .ux4g-input-helper,
.ux4g-input-is-disabled .ux4g-input-helper,
.ux4g-textarea-error .ux4g-textarea-helper,
.ux4g-textarea-success .ux4g-textarea-helper,
.ux4g-textarea-warning .ux4g-textarea-helper,
.ux4g-textarea-disabled .ux4g-textarea-helper,
.ux4g-textarea-default .ux4g-textarea-helper {
    display: flex !important;
}

/* Input States */
/* error */
.ux4g-input-error .ux4g-input,
.ux4g-textarea-error .ux4g-textarea {
    border-color: var(--ux4g-border-color-error-strong);
}

.ux4g-input-error .ux4g-input-helper,
.ux4g-textarea-error .ux4g-textarea-helper {
    color: var(--ux4g-text-status-error);
}

.ux4g-input-error .ux4g-input-helper-icon,
.ux4g-textarea-error .ux4g-textarea-helper .ux4g-textarea-helper-icon {
    color: var(--ux4g-text-error-default);
}

/* success */
.ux4g-input-success .ux4g-input,
.ux4g-textarea-success .ux4g-textarea {
    border-color: var(--ux4g-border-color-success-strong);
}

.ux4g-input-success .ux4g-input-helper,
.ux4g-textarea-success .ux4g-textarea-helper {
    color: var(--ux4g-text-status-success);
}

.ux4g-input-success .ux4g-input-helper .ux4g-input-helper-icon,
.ux4g-textarea-success .ux4g-textarea-helper .ux4g-textarea-helper-icon {
    color: var(--ux4g-text-success-default);
}

/* warning */
.ux4g-input-warning .ux4g-input,
.ux4g-textarea-warning .ux4g-textarea {
    border-color: var(--ux4g-border-color-warning-strong);
}

.ux4g-input-warning .ux4g-input-helper,
.ux4g-textarea-warning .ux4g-textarea-helper {
    color: var(--ux4g-text-status-warning);
}

.ux4g-input-warning .ux4g-input-helper .ux4g-input-helper-icon,
.ux4g-textarea-warning .ux4g-textarea-helper .ux4g-textarea-helper-icon {
    color: var(--ux4g-text-warning-default);
}

.ux4g-input.ux4g-input-is-disabled,
.ux4g-textarea-is-disabled .ux4g-textarea-input {
    background-color: var(--ux4g-bg-neutral-disabled);
    pointer-events: none;
    color: var(--ux4g-text-neutral-disabled);
    user-select: none;
}

.ux4g-input.ux4g-input-is-disabled .ux4g-icon-outlined,
.ux4g-textarea-is-disabled .ux4g-textarea-input .ux4g-icon-outlined {
    color: var(--ux4g-text-neutral-disabled);
    user-select: none;
}

/* Text Area */
/* container */
.ux4g-textarea-container {
    display: flex;
    flex-direction: column;
    row-gap: var(--ux4g-stack-2xs);
    width: 100%;

}

/* wrapper */
.ux4g-textarea {
    display: flex;
    align-items: flex-start;
    background-color: var(--ux4g-bg-neutral-elevated);
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    overflow: hidden;
    position: var(--ux4g-pos-relative) !important;
}

/* focus */
.ux4g-textarea:focus-within {
    outline: var(--ux4g-border-width-md) solid var(--ux4g-bg-primary-strong);
    border-color: var(--ux4g-border-color-neutral-elevated) !important;
}

/* leading icon */
.ux4g-textarea-leading-icon {
    margin-left: var(--ux4g-padding-s);
    margin-right: var(--ux4g-padding-xs);
    margin-top: var(--ux4g-padding-s);
    color: var(--ux4g-text-neutral-secondary);
}

/* textarea */
.ux4g-textarea-input {
    flex: 1;
    height: 145px;
    background: transparent;
    padding: var(--ux4g-padding-xs) var(--ux4g-padding-s);
    font-size: var(--ux4g-fs-14);
    line-height: 1.5;
    resize: both;
    color: var(--ux4g-text-neutral-primary);
}

.ux4g-textarea-input:focus {
    outline: none;
    border: none;
}

.ux4g-textarea-action-btn {
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ux4g-space-1);
    border-radius: var(--ux4g-radius-full);
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-textarea-action-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* helper */
.ux4g-textarea-helper .ux4g-textarea-helper-text {
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
    font-weight: var(--ux4g-font-weight-regular);
}

.ux4g-textarea-helper {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-xs);
    color: var(--ux4g-text-neutral-tertiary);
}

.ux4g-textarea-helper .ux4g-textarea-helper-icon {
    color: var(--ux4g-text-neutral-tertiary);
    font-size: var(--ux4g-fs-14);
}

.ux4g-textarea-counter {
    position: var(--ux4g-pos-absolute) !important;
    right: var(--ux4g-space-5) !important;
    bottom: var(--ux4g-space-none) !important;
    color: var(--ux4g-text-neutral-tertiary);
    font-size: var(--ux4g-fs-12);
    background-color: var(--ux4g-bg-neutral-elevated);
}

/* Textarea Sizes */
.ux4g-textarea-sm .ux4g-textarea-input {
    height: 100px;
}

.ux4g-textarea-md .ux4g-textarea-input {
    height: 145px;
}

.ux4g-textarea-lg .ux4g-textarea-input {
    height: 180px;
    font-size: var(--ux4g-fs-16);
}

/* Helper Text Layout */
.ux4g-textarea-helper-left {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-xs);
}

.ux4g-textarea-helper-icon {
    font-size: var(--ux4g-fs-14) !important;
}

/* Mobile only: apply mobile variant */
@media (max-width: 768px) {
  .ux4g-input-md .ux4g-input-helper-text {
      font-size: var(--ux4g-fs-14);
      line-height: var(--ux4g-lh-20);
      font-weight: var(--ux4g-font-weight-regular);
  }

  .ux4g-input-md .ux4g-input-helper .ux4g-icon-outlined {
      font-size: var(--ux4g-fs-16);
  }

  .ux4g-input-md .ux4g-input-input {
      font-size: var(--ux4g-fs-16);
      line-height: var(--ux4g-lh-24);
      font-weight: var(--ux4g-font-weight-regular);
  }

  .ux4g-input-md .ux4g-input-action-btn,
  .ux4g-input-md .ux4g-input-leading-icon {
      width: 20px;
      height: 20px;
  }

  .ux4g-input-md .ux4g-label-m-default {
      font-size: var(--ux4g-fs-14) !important;
      line-height: var(--ux4g-lh-18) !important;
  }

  .ux4g-input-md .ux4g-input {
      height: 48px;
  }

  .ux4g-input-md .ux4g-input-leading-icon,
  .ux4g-input-md .ux4g-input-actions .ux4g-icon-outlined {
      font-size: var(--ux4g-fs-20);
  }
  
  .ux4g-textarea-md .ux4g-textarea-input {
    height: 145px;
    font-size: var(--ux4g-fs-16);
    line-height: var(--ux4g-lh-24);
  }

  .ux4g-textarea-md > .ux4g-label-m-default {
    font-size: var(--ux4g-fs-14) !important;
    line-height: var(--ux4g-lh-18) !important;
  }

  .ux4g-textarea-md .ux4g-textarea-helper .ux4g-textarea-helper-text {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-22);
  }

  .ux4g-textarea-md .ux4g-textarea-helper .ux4g-textarea-helper-icon {
    font-size: var(--ux4g-fs-16) !important;
  }

}

.ux4g-dropdown {
  --ux4g-dropdown-height: var(--ux4g-sz-m, 40px);
  --ux4g-dropdown-padding-x: var(--ux4g-padding-s, 12px);
  --ux4g-dropdown-menu-offset-y: var(--ux4g-spacing-3, 6px);
  --ux4g-dropdown-focus-ring-width: var(--ux4g-border-width-sm, 1px);
  --ux4g-dropdown-transition-fast: 0.15s ease;
  --ux4g-dropdown-menu-shadow: var(--ux4g-shadow-l2);
  --ux4g-dropdown-overflow-icon-sm: var(--ux4g-fs-20, 20px);
  --ux4g-dropdown-overflow-icon-md: var(--ux4g-fs-24, 24px);
  --ux4g-dropdown-overflow-icon-lg: var(--ux4g-fs-32, 32px);
  --ux4g-dropdown-overflow-icon-xl: var(--ux4g-fs-40, 40px);
  --ux4g-dropdown-menu-chevron-sm: var(--ux4g-fs-16, 16px);
  --ux4g-dropdown-menu-chevron-md: var(--ux4g-fs-18, 18px);
  --ux4g-dropdown-menu-chevron-lg: var(--ux4g-fs-20, 20px);
  --ux4g-dropdown-menu-chevron-size: var(--ux4g-dropdown-menu-chevron-md);
  --ux4g-dropdown-radius: var(--ux4g-radius-md, 8px);
  --ux4g-dropdown-gap: var(--ux4g-inline-xs, 4px);
  --ux4g-dropdown-border: var(--ux4g-border-color-neutral-subtle, #e5e5e5);
  --ux4g-dropdown-border-hover: var(--ux4g-border-color-neutral-default, #d9d9d9);
  --ux4g-dropdown-border-focus: var(--ux4g-border-color-primary-strong, #4a2bc2);
  --ux4g-dropdown-bg: var(--ux4g-bg-neutral-elevated, #ffffff);
  --ux4g-dropdown-menu-width: 100%;
  --ux4g-dropdown-focus-shadow: 0 0 0 var(--ux4g-dropdown-focus-ring-width) var(--ux4g-dropdown-border-focus);

  position: var(--ux4g-pos-relative, relative);
  display: inline-flex;
  flex-direction: column;
  gap: var(--ux4g-padding-2xs, 4px);
}

/* Selection-type dropdown modifier (visual only) */
.ux4g-dropdown-selection { /* no additional styles needed */ }

/* Single-select dropdown modifier (visual only) */
.ux4g-dropdown-single { /* no additional styles needed */ }

.ux4g-dropdown.is-open {
  z-index: var(--ux4g-z-dropdown, 1000);
}

.ux4g-dropdown.is-open .ux4g-dropdown-help {
  display: none !important;
}



.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow) .ux4g-dropdown-control {
  min-height: var(--ux4g-dropdown-height);
  width: 100%;
  border-radius: var(--ux4g-dropdown-radius);
  border: var(--ux4g-border-width-sm, 1px) solid var(--ux4g-dropdown-border);
  background: var(--ux4g-dropdown-bg);
  color: var(--ux4g-text-neutral-secondary, #525252);
  padding: 0 var(--ux4g-dropdown-padding-x);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-dropdown-gap);
  cursor: pointer;
  transition:
    border-color var(--ux4g-dropdown-transition-fast),
    box-shadow var(--ux4g-dropdown-transition-fast),
    background-color var(--ux4g-dropdown-transition-fast);
}

.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow) .ux4g-dropdown-control:hover {
  border-color: var(--ux4g-dropdown-border-hover);
}

.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow) .ux4g-dropdown-control:focus {
  outline: var(--ux4g-border-width-none, none);
}

.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow):is(.is-open, :focus-within) .ux4g-dropdown-control,
.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow) .ux4g-dropdown-control:focus-visible {
  border-color: var(--ux4g-dropdown-border-focus);
  box-shadow: var(--ux4g-dropdown-focus-shadow);
}

.ux4g-dropdown-value {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-dropdown-gap);
  min-width: 0;
  flex: 1;
  overflow: var(--ux4g-of-hidden);
}

.ux4g-dropdown-caret {
  color: var(--ux4g-text-neutral-secondary);
  font-size: var(--ux4g-dropdown-menu-chevron-size);
  flex-shrink: var(--ux4g-spacing-none, 0);
  transition: transform var(--ux4g-dropdown-transition-fast);
}

.ux4g-dropdown.is-open .ux4g-dropdown-caret {
  transform: rotate(180deg);
}

.ux4g-dropdown-text {
  overflow: var(--ux4g-of-hidden, hidden);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ux4g-text-neutral-primary, #171717);
}

.ux4g-dropdown-text.is-placeholder {
  color: var(--ux4g-text-neutral-tertiary, #737373);
}

.ux4g-dropdown-menu {
  position: var(--ux4g-pos-absolute, absolute);
  top: calc(100% + var(--ux4g-dropdown-menu-offset-y));
  left: var(--ux4g-spacing-none, 0);
  display: none;
  width: var(--ux4g-dropdown-menu-width);
  padding: var(--ux4g-padding-2xs, 4px) var(--ux4g-padding-none, 0);
  border-radius: var(--ux4g-radius-md, 8px);
  background: var(--ux4g-dropdown-bg);
  box-shadow: var(--ux4g-dropdown-menu-shadow);
}

.ux4g-dropdown.is-open>.ux4g-dropdown-menu {
  display: block;
}

.ux4g-dropdown-menu .ux4g-list {
  padding: var(--ux4g-padding-none, 0);
  box-shadow: var(--ux4g-shadow-l0, none);
  border-radius: var(--ux4g-radius-none, 0);
  background: transparent;
}

.ux4g-dropdown-menu .ux4g-list-item .ux4g-list-item-row {
  width: 100%;
  border-radius: var(--ux4g-radius-sm, 6px);
  display: flex;
  justify-content: space-between;
}

.ux4g-dropdown-option {
  width: 100%;
  padding: var(--ux4g-padding-2xs, 4px) var(--ux4g-padding-s, 12px);
}

.ux4g-dropdown-option:hover {
  background: var(--ux4g-bg-neutral-subtle, #e5e5e5);
}

.ux4g-dropdown-option.is-selected,
.ux4g-dropdown-option:has(.ux4g-dropdown-option-input:checked) {
  background: var(--ux4g-bg-primary, #ede9fe);
}

.ux4g-dropdown-option.is-selected:is(:hover, :active, :focus-within),
.ux4g-dropdown-option:has(.ux4g-dropdown-option-input:checked):is(:hover, :active, :focus-within) {
  background: var(--ux4g-bg-primary, #ede9fe);
}

.ux4g-dropdown-option .ux4g-checkbox-content {
  min-width: 0;
}

.ux4g-dropdown-option .ux4g-checkbox-label {
  font-weight: var(--ux4g-fw-regular, 400);
  color: var(--ux4g-text-neutral-primary, #171717);
}

.ux4g-dropdown-option.is-selected .ux4g-checkbox-label,
.ux4g-dropdown-option:has(.ux4g-dropdown-option-input:checked) .ux4g-checkbox-label {
  color: var(--ux4g-text-brand-primary-default, #4a2bc2);
}

.ux4g-dropdown-chip:focus {
  outline: none !important;

}


.ux4g-dropdown-single-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-dropdown-gap, 8px);
  background: transparent;
  border: none;
  color: var(--ux4g-text-neutral-primary, #171717);
  padding: var(--ux4g-padding-2xs, 8px) var(--ux4g-padding-s, 12px);
  cursor: pointer;
  text-align: left;
  border-radius: var(--ux4g-radius-sm, 6px);
  font-family: inherit;
  font-size: var(--ux4g-fs-14, 14px);
  transition: background-color var(--ux4g-dropdown-transition-fast);
}

.ux4g-dropdown-single-option:hover {
  background: var(--ux4g-bg-neutral-subtle, #e5e5e5);
}

.ux4g-dropdown-single-option:focus {
  outline: none;
}

.ux4g-dropdown-single-option:focus-visible {
  background: var(--ux4g-bg-neutral-subtle, #e5e5e5);
}

.ux4g-dropdown-single-check {
  opacity: 0;
  color: var(--ux4g-text-brand-primary-default, #4a2bc2);
}

.ux4g-dropdown-single-option.is-selected,
.ux4g-dropdown-single-option.active {
  background: var(--ux4g-bg-primary-soft, #ede9fe);
  color: var(--ux4g-text-brand-primary-default, #4a2bc2);
}

.ux4g-dropdown-single-option.is-selected .ux4g-dropdown-single-check,
.ux4g-dropdown-single-option.active .ux4g-dropdown-single-check {
  opacity: 1;
}

.ux4g-dropdown-selected-chips {
  display: none;
  align-items: center;
  gap: var(--ux4g-padding-2xs, 4px);
  min-width: 0;
  max-width: 100%;
}

.ux4g-dropdown.has-selection .ux4g-dropdown-selected-chips {
  display: inline-flex;
}

.ux4g-dropdown.has-selection .ux4g-dropdown-text {
  display: none;
}

.ux4g-dropdown.has-selection .ux4g-dropdown-control>.ux4g-dropdown-value>.ux4g-icon-outlined:not(.ux4g-dropdown-caret) {
  display: none;
}

.ux4g-dropdown-multi .ux4g-dropdown-selected-chips {
  flex-wrap: wrap;
  align-items: center;
  overflow: var(--ux4g-of-hidden, hidden);
  white-space: var(--ux4g-tw-wrap, normal);
  padding: var(--ux4g-padding-none, 0);
  gap: var(--ux4g-spacing-3, 6px);
}

.ux4g-dropdown-multi .ux4g-dropdown-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding-right: var(--ux4g-padding-xl, 24px);
}

.ux4g-dropdown-multi .ux4g-dropdown-control {
  height: auto;
  min-height: var(--ux4g-dropdown-height);
  padding-top: var(--ux4g-padding-3xs, 4px);
  padding-bottom: var(--ux4g-padding-3xs, 4px);
}

.ux4g-dropdown-multi .ux4g-dropdown-option {
  border-radius: var(--ux4g-radius-sm, 6px);
}

.ux4g-dropdown-multi .ux4g-dropdown-option+.ux4g-dropdown-option {
  margin-top: var(--ux4g-padding-2xs, 6px);
}

.ux4g-dropdown-multi .ux4g-dropdown-value>.ux4g-icon-outlined {
  display: inline-flex;
  align-items: center;
  line-height: var(--ux4g-lh-16, 1);
  flex-shrink: var(--ux4g-spacing-none, 0);
}

.ux4g-dropdown-sm .ux4g-dropdown-value>.ux4g-icon-outlined {
  font-size: var(--ux4g-fs-14, 14px);
  width: var(--ux4g-fs-14, 14px);
  height: var(--ux4g-fs-14, 14px);
}

.ux4g-dropdown-md .ux4g-dropdown-value>.ux4g-icon-outlined {
  font-size: var(--ux4g-fs-16, 16px);
  width: var(--ux4g-fs-16, 16px);
  height: var(--ux4g-fs-16, 16px);
}

.ux4g-dropdown-lg .ux4g-dropdown-value>.ux4g-icon-outlined {
  font-size: var(--ux4g-fs-20, 20px);
  width: var(--ux4g-fs-20, 20px);
  height: var(--ux4g-fs-20, 20px);
}

.ux4g-dropdown-multi.ux4g-dropdown-sm .ux4g-dropdown-selected-chips {
  gap: var(--ux4g-padding-xs, 8px);
  padding: var(--ux4g-padding-2xs, 4px);
}

.ux4g-dropdown-multi.ux4g-dropdown-md .ux4g-dropdown-selected-chips {
  gap: var(--ux4g-padding-xs, 8px);
  padding: var(--ux4g-padding-2xs, 4px);

}

.ux4g-dropdown-multi.ux4g-dropdown-lg .ux4g-dropdown-selected-chips {
  gap: var(--ux4g-padding-s, 12px);
  padding: var(--ux4g-padding-2xs, 4px);
}

.ux4g-dropdown-multi.ux4g-dropdown-lg .ux4g-dropdown-control {
  padding-top: var(--ux4g-padding-2xs, 6px);
  padding-bottom: var(--ux4g-padding-2xs, 6px);
}

.ux4g-dropdown-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-padding-3xs, 4px);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 100%;
  min-height: 28px;
  background-color: var(--ux4g-bg-neutral);
  color: var(--ux4g-text-neutral-primary);
  font-size: var(--ux4g-fs-14);
  border-radius: var(--ux4g-radius-sm);
  padding: var(--ux4g-space-none) var(--ux4g-padding-xs);
  border: var(--ux4g-border-thin) solid var(--ux4g-border-color-neutral-subtle);
  line-height: 1;
}

.ux4g-dropdown-multi.ux4g-dropdown-md .ux4g-dropdown-chip .ux4g-icon-outlined,
.ux4g-dropdown-multi.ux4g-dropdown-lg .ux4g-dropdown-chip .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-16, 16px);
  margin-top: 0;
  width: var(--ux4g-fs-16, 16px);
  height: var(--ux4g-fs-16, 16px);
}

.ux4g-dropdown-chip[role="button"] {
  cursor: default;
}

.ux4g-dropdown-chip .ux4g-icon-outlined:last-child {
  cursor: pointer;
}

.ux4g-dropdown-chip .ux4g-icon-outlined:last-child:hover {
  background-color: var(--ux4g-bg-neutral-disabled, #e5e5e5);
  border-radius: var(--ux4g-radius-xs, 4px);
}

.ux4g-dropdown-chip[role="button"]:focus-visible {
  outline: var(--ux4g-border-width-sm, 1px) solid var(--ux4g-dropdown-border-focus);
  outline-offset: var(--ux4g-border-width-sm, 1px);
}

.ux4g-dropdown-chip .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-14, 14px);
  margin-top: 1px;
  width: var(--ux4g-fs-14, 14px);
  height: var(--ux4g-fs-14, 14px);
}

.ux4g-dropdown-chip>span:not(.ux4g-icon-outlined) {
  overflow: var(--ux4g-of-hidden, hidden);
  text-overflow: ellipsis;
  white-space: var(--ux4g-tw-nowrap, nowrap);
  max-width: 100%;
}

.ux4g-dropdown-help {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-padding-3xs, 2px);
  font-size: var(--ux4g-fs-12, 12px);
  line-height: var(--ux4g-lh-16, 16px);
  font-weight: var(--ux4g-fw-regular, 400);
  color: var(--ux4g-text-neutral-tertiary, #737373);
  display: none;
}

.ux4g-dropdown-default .ux4g-dropdown-help,
:is(.ux4g-dropdown-error, .ux4g-dropdown-success, .ux4g-dropdown-warning) .ux4g-dropdown-help {
  display: inline-flex !important;
}


.ux4g-dropdown-help :is(.ux4g-icon, .ux4g-icon-outlined) {
  font-size: inherit;
  line-height: 1;
}

/* Help text typescale by dropdown size:
   S/M -> body-xs-default, L -> body-s-default */
.ux4g-dropdown.ux4g-dropdown-sm+.ux4g-dropdown-help,
.ux4g-dropdown.ux4g-dropdown-md+.ux4g-dropdown-help {
  font-size: var(--ux4g-fs-12, 12px);
  line-height: var(--ux4g-lh-16, 16px);
  font-weight: var(--ux4g-fw-regular, 400);
}

.ux4g-dropdown.ux4g-dropdown-lg+.ux4g-dropdown-help {
  font-size: var(--ux4g-fs-14, 14px);
  line-height: var(--ux4g-lh-20, 20px);
  font-weight: var(--ux4g-fw-regular, 400);
}


.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow) .ux4g-dropdown-control:disabled {
  border-color: var(--ux4g-border-color-neutral-subtle, #e5e5e5);
  background: var(--ux4g-bg-neutral-disabled, #e5e5e5);
  color: var(--ux4g-text-neutral-disabled, #a1a1a1);
  box-shadow: var(--ux4g-shadow-l0, none);
  cursor: not-allowed;
}

.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow) .ux4g-dropdown-control:disabled .ux4g-dropdown-text,
.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow) .ux4g-dropdown-control:disabled .ux4g-dropdown-caret,
.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow) .ux4g-dropdown-control:disabled .ux4g-icon-outlined {
  color: var(--ux4g-text-neutral-disabled, #a1a1a1);
}

.ux4g-dropdown.ux4g-dropdown-error {
  --ux4g-dropdown-border: var(--ux4g-border-color-error-strong, #db372d);
  --ux4g-dropdown-border-hover: var(--ux4g-border-color-error-strong, #db372d);
  --ux4g-dropdown-border-focus: var(--ux4g-border-color-error-strong, #db372d);
  --ux4g-dropdown-state-text: var(--ux4g-text-status-error, #db372d);
  --ux4g-dropdown-state-icon: var(--ux4g-icon-status-error, #db372d);
}

.ux4g-dropdown.ux4g-dropdown-success {
  --ux4g-dropdown-border: var(--ux4g-border-color-success-strong, #1aa64a);
  --ux4g-dropdown-border-hover: var(--ux4g-border-color-success-strong, #1aa64a);
  --ux4g-dropdown-border-focus: var(--ux4g-border-color-success-strong, #1aa64a);
  --ux4g-dropdown-state-text: var(--ux4g-text-status-success, #1aa64a);
  --ux4g-dropdown-state-icon: var(--ux4g-icon-status-success, #1aa64a);
}

.ux4g-dropdown.ux4g-dropdown-warning {
  --ux4g-dropdown-border: var(--ux4g-border-color-warning-strong, #fa8c16);
  --ux4g-dropdown-border-hover: var(--ux4g-border-color-warning-strong, #fa8c16);
  --ux4g-dropdown-border-focus: var(--ux4g-border-color-warning-strong, #fa8c16);
  --ux4g-dropdown-state-text: var(--ux4g-text-status-warning, #fa8c16);
  --ux4g-dropdown-state-icon: var(--ux4g-icon-status-warning, #fa8c16);
}

.ux4g-dropdown.ux4g-dropdown-default {
  --ux4g-dropdown-state-text: var(--ux4g-text-neutral-tertiary, #737373);
  --ux4g-dropdown-state-icon: var(--ux4g-text-neutral-tertiary, #737373);
}

/* Ensure these states use the overridden variables for help text colors */
:is(.ux4g-dropdown-error, .ux4g-dropdown-success, .ux4g-dropdown-warning, .ux4g-dropdown-default) .ux4g-dropdown-help {
  color: var(--ux4g-dropdown-state-text);
}

:is(.ux4g-dropdown-error, .ux4g-dropdown-success, .ux4g-dropdown-warning, .ux4g-dropdown-default) .ux4g-dropdown-help :is(.ux4g-icon, .ux4g-icon-outlined) {
  color: var(--ux4g-dropdown-state-icon);
}

/* The base rules for .ux4g-dropdown-control will now automatically inherit the overridden --ux4g-dropdown-border, etc. */

.ux4g-dropdown:is(.ux4g-dropdown-button, .ux4g-dropdown-overflow) .ux4g-dropdown-menu .ux4g-list-item-end.ux4g-icon-outlined {
  font-size: var(--ux4g-dropdown-menu-chevron-size);
  line-height: var(--ux4g-lh-16, 1);
}

/* Sizes */
.ux4g-dropdown-sm {
  --ux4g-dropdown-height: var(--ux4g-sz-s, 32px);
  --ux4g-dropdown-menu-chevron-size: var(--ux4g-dropdown-menu-chevron-sm);
}

.ux4g-dropdown-md {
  --ux4g-dropdown-height: var(--ux4g-sz-m, 40px);
  --ux4g-dropdown-menu-chevron-size: var(--ux4g-dropdown-menu-chevron-md);
}

.ux4g-dropdown-lg {
  --ux4g-dropdown-height: var(--ux4g-sz-l, 48px);
  --ux4g-dropdown-menu-chevron-size: var(--ux4g-dropdown-menu-chevron-lg);
}

.ux4g-dropdown-xl {
  --ux4g-dropdown-height: var(--ux4g-sz-56, 56px);
  --ux4g-dropdown-menu-chevron-size: var(--ux4g-dropdown-menu-chevron-lg);
}

.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow).ux4g-dropdown-sm .ux4g-dropdown-control {
  font-size: var(--ux4g-fs-14, 14px);
}

.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow).ux4g-dropdown-md .ux4g-dropdown-control {
  font-size: var(--ux4g-fs-14, 14px);
}

.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow).ux4g-dropdown-lg .ux4g-dropdown-control {
  font-size: var(--ux4g-fs-16, 16px);
}

/* Button variant uses existing button.css classes */
.ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow).ux4g-dropdown-xl .ux4g-dropdown-control {
  font-size: var(--ux4g-fs-16, 16px);
}

/* Mobile form-field variant */
@media (max-width: 768px) {
  .ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow).ux4g-dropdown-md {
    --ux4g-dropdown-height: var(--ux4g-sz-l, 48px);
    --ux4g-dropdown-menu-chevron-size: var(--ux4g-fs-16, 16px);
  }

  .ux4g-dropdown:not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow).ux4g-dropdown-md .ux4g-dropdown-control {
    font-size: var(--ux4g-fs-16, 16px);
    line-height: var(--ux4g-lh-24, 24px);
  }

  .ux4g-input-container:has(> .ux4g-dropdown-md) > .ux4g-label-m-default {
    font-size: var(--ux4g-fs-14, 14px) !important;
    line-height: var(--ux4g-lh-18, 18px) !important;
  }
}

.ux4g-dropdown-button {
  --ux4g-dropdown-menu-width: 200px;
}

.ux4g-dropdown-button .ux4g-dropdown-control {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-dropdown-gap);
}

.ux4g-dropdown-button .ux4g-dropdown-caret,
.ux4g-dropdown-button .ux4g-dropdown-button-content .ux4g-icon-outlined {
  color: inherit;
}

.ux4g-dropdown-button-content {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-dropdown-gap);
}

.ux4g-dropdown-sm.ux4g-dropdown-button .ux4g-dropdown-button-content .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-16, 16px);
  width: var(--ux4g-fs-16, 16px);
  height: var(--ux4g-fs-16, 16px);
}

.ux4g-dropdown-md.ux4g-dropdown-button .ux4g-dropdown-button-content .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-18, 18px);
  width: var(--ux4g-fs-18, 18px);
  height: var(--ux4g-fs-18, 18px);
}

.ux4g-dropdown-lg.ux4g-dropdown-button .ux4g-dropdown-button-content .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-20, 20px);
  width: var(--ux4g-fs-20, 20px);
  height: var(--ux4g-fs-20, 20px);
}

.ux4g-dropdown-xl.ux4g-dropdown-button .ux4g-dropdown-button-content .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-20, 20px);
  width: var(--ux4g-fs-20, 20px);
  height: var(--ux4g-fs-20, 20px);
}

/* Overflow icon trigger */
.ux4g-dropdown.ux4g-dropdown-overflow {
  --ux4g-dropdown-menu-width: 250px;
  --ux4g-dropdown-overflow-size: var(--ux4g-sz-m, 40px);
  width: auto;
}

.ux4g-dropdown.ux4g-dropdown-overflow .ux4g-dropdown-menu {
  left: 0;
  right: auto;
}

.ux4g-dropdown.ux4g-dropdown-overflow .ux4g-dropdown-control {
  width: var(--ux4g-dropdown-overflow-size);
  height: var(--ux4g-dropdown-overflow-size);
  min-width: var(--ux4g-dropdown-overflow-size);
  min-height: var(--ux4g-dropdown-overflow-size);
  max-width: var(--ux4g-dropdown-overflow-size);
  max-height: var(--ux4g-dropdown-overflow-size);
  box-sizing: border-box;
  flex: 0 0 var(--ux4g-dropdown-overflow-size);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: var(--ux4g-lh-16, 1);
}

/* Keep overflow icon button square even when button size classes are used. */
.ux4g-dropdown.ux4g-dropdown-overflow .ux4g-dropdown-control:is(.ux4g-btn-xs,
  .ux4g-btn-sm,
  .ux4g-btn-lg,
  .ux4g-btn-xl) {
  padding: var(--ux4g-padding-none, 0) !important;
}

.ux4g-dropdown.ux4g-dropdown-overflow .ux4g-dropdown-control>.ux4g-icon-outlined {
  font-size: var(--ux4g-dropdown-overflow-icon-md);
  line-height: 1;
  color: inherit;
}

.ux4g-dropdown.ux4g-dropdown-overflow.ux4g-dropdown-sm {
  --ux4g-dropdown-overflow-size: var(--ux4g-sz-s, 32px);
}

.ux4g-dropdown.ux4g-dropdown-overflow.ux4g-dropdown-md {
  --ux4g-dropdown-overflow-size: var(--ux4g-sz-m, 40px);
}

.ux4g-dropdown.ux4g-dropdown-overflow.ux4g-dropdown-lg {
  --ux4g-dropdown-overflow-size: var(--ux4g-sz-l, 48px);
}

.ux4g-dropdown.ux4g-dropdown-overflow.ux4g-dropdown-xl {
  --ux4g-dropdown-overflow-size: var(--ux4g-sz-56, 56px);
}

/* Enforce exact final size (including border) for overflow icon trigger. */
.ux4g-dropdown.ux4g-dropdown-overflow.ux4g-dropdown-sm .ux4g-dropdown-control {
  width: var(--ux4g-sz-s, 32px);
  height: var(--ux4g-sz-s, 32px);
}

.ux4g-dropdown.ux4g-dropdown-overflow.ux4g-dropdown-md .ux4g-dropdown-control {
  width: var(--ux4g-sz-m, 40px);
  height: var(--ux4g-sz-m, 40px);
}

.ux4g-dropdown.ux4g-dropdown-overflow.ux4g-dropdown-lg .ux4g-dropdown-control {
  width: var(--ux4g-sz-l, 48px);
  height: var(--ux4g-sz-l, 48px);
}

.ux4g-dropdown.ux4g-dropdown-overflow.ux4g-dropdown-xl .ux4g-dropdown-control {
  width: var(--ux4g-sz-56, 56px);
  height: var(--ux4g-sz-56, 56px);
}

.ux4g-dropdown.ux4g-dropdown-overflow.ux4g-dropdown-sm .ux4g-dropdown-control>.ux4g-icon-outlined {
  font-size: var(--ux4g-dropdown-overflow-icon-sm);
}

.ux4g-dropdown.ux4g-dropdown-overflow.ux4g-dropdown-md .ux4g-dropdown-control>.ux4g-icon-outlined {
  font-size: var(--ux4g-dropdown-overflow-icon-md);
}

.ux4g-dropdown.ux4g-dropdown-overflow.ux4g-dropdown-lg .ux4g-dropdown-control>.ux4g-icon-outlined {
  font-size: var(--ux4g-dropdown-overflow-icon-lg);
}

.ux4g-dropdown.ux4g-dropdown-overflow.ux4g-dropdown-xl .ux4g-dropdown-control>.ux4g-icon-outlined {
  font-size: var(--ux4g-dropdown-overflow-icon-xl);
}

.ux4g-combobox {
  --ux4g-combobox-height: var(--ux4g-sz-m, 40px);
  --ux4g-combobox-padding-x: var(--ux4g-padding-s, 12px);
  --ux4g-combobox-menu-offset-y: var(--ux4g-spacing-3, 6px);
  --ux4g-combobox-focus-ring-width: var(--ux4g-border-width-sm, 1px);
  --ux4g-combobox-transition-fast: 0.15s ease;
  --ux4g-combobox-menu-shadow: var(--ux4g-shadow-l2);
  --ux4g-combobox-menu-chevron-sm: var(--ux4g-fs-16, 16px);
  --ux4g-combobox-menu-chevron-md: var(--ux4g-fs-18, 18px);
  --ux4g-combobox-menu-chevron-lg: var(--ux4g-fs-20, 20px);
  --ux4g-combobox-menu-chevron-size: var(--ux4g-combobox-menu-chevron-md);
  --ux4g-combobox-radius: var(--ux4g-radius-md, 8px);
  --ux4g-combobox-gap: var(--ux4g-inline-xs, 4px);
  --ux4g-combobox-border: var(--ux4g-border-color-neutral-subtle, #e5e5e5);
  --ux4g-combobox-border-hover: var(--ux4g-border-color-neutral-default, #d9d9d9);
  --ux4g-combobox-border-focus: var(--ux4g-border-color-primary-strong, #4a2bc2);
  --ux4g-combobox-bg: var(--ux4g-bg-neutral-elevated, #ffffff);
  --ux4g-combobox-menu-width: 100%;
  --ux4g-combobox-focus-shadow: 0 0 0 var(--ux4g-combobox-focus-ring-width) var(--ux4g-combobox-border-focus);

  position: var(--ux4g-pos-relative, relative);
  display: inline-flex;
  flex-direction: column;
  gap: var(--ux4g-padding-2xs, 4px);
}

.ux4g-combobox.is-open {
  z-index: var(--ux4g-z-dropdown, 1000);
}

.ux4g-combobox.is-open .ux4g-combobox-help {
  display: none !important;
}



.ux4g-combobox .ux4g-combobox-control {
  min-height: var(--ux4g-combobox-height);
  width: 100%;
  border-radius: var(--ux4g-combobox-radius);
  border: var(--ux4g-border-width-sm, 1px) solid var(--ux4g-combobox-border);
  background: var(--ux4g-combobox-bg);
  color: var(--ux4g-text-neutral-secondary, #525252);
  padding: var(--ux4g-padding-none, 0) var(--ux4g-combobox-padding-x);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-combobox-gap);
  cursor: pointer;
  transition:
    border-color var(--ux4g-combobox-transition-fast),
    box-shadow var(--ux4g-combobox-transition-fast),
    background-color var(--ux4g-combobox-transition-fast);
}

.ux4g-combobox .ux4g-combobox-control:hover {
  border-color: var(--ux4g-combobox-border-hover);
}

.ux4g-combobox .ux4g-combobox-control:focus {
  outline: var(--ux4g-border-width-none, none);
}

.ux4g-combobox:is(.is-open, :focus-within) .ux4g-combobox-control,
.ux4g-combobox .ux4g-combobox-control:focus-visible {
  border-color: var(--ux4g-combobox-border-focus);
  box-shadow: var(--ux4g-combobox-focus-shadow);
}

.ux4g-combobox-value {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-combobox-gap);
  min-width: 0;
  flex: 1;
  overflow: var(--ux4g-of-hidden);
}

.ux4g-combobox-caret {
  color: var(--ux4g-text-neutral-secondary);
  font-size: var(--ux4g-combobox-menu-chevron-size);
  flex-shrink: var(--ux4g-spacing-none, 0);
  transition: transform var(--ux4g-combobox-transition-fast);
}

.ux4g-combobox.is-open .ux4g-combobox-caret {
  transform: rotate(180deg);
}

.ux4g-combobox-menu {
  position: var(--ux4g-pos-absolute, absolute);
  top: calc(100% + var(--ux4g-combobox-menu-offset-y));
  left: var(--ux4g-spacing-none, 0);
  display: none;
  width: var(--ux4g-combobox-menu-width);
  padding: var(--ux4g-padding-2xs, 4px) var(--ux4g-padding-none, 0);
  border-radius: var(--ux4g-radius-md, 8px);
  background: var(--ux4g-combobox-bg);
  box-shadow: var(--ux4g-combobox-menu-shadow);
}

.ux4g-combobox.is-open>.ux4g-combobox-menu {
  display: block;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: var(--ux4g-of-hidden)
}

.ux4g-combobox-menu .ux4g-list {
  padding: var(--ux4g-padding-none, 0);
  box-shadow: var(--ux4g-shadow-l0, none);
  border-radius: var(--ux4g-radius-none, 0);
  background: transparent;
}

.ux4g-combobox-menu .ux4g-list-item .ux4g-list-item-row {
  width: 100%;
  border-radius: var(--ux4g-radius-sm, 6px);
}

.ux4g-combobox-option {
  width: 100%;
  padding: var(--ux4g-padding-2xs, 4px) var(--ux4g-padding-s, 12px);
}

.ux4g-combobox-option:hover {
  background: var(--ux4g-bg-neutral-subtle, #e5e5e5);
}

.ux4g-combobox-option.is-selected,
.ux4g-combobox-option:has(.ux4g-combobox-option-input:checked) {
  background: var(--ux4g-bg-primary, #ede9fe);
}

.ux4g-combobox-option.is-selected:is(:hover, :active, :focus-within),
.ux4g-combobox-option:has(.ux4g-combobox-option-input:checked):is(:hover, :active, :focus-within) {
  background: var(--ux4g-bg-primary, #ede9fe);
}

.ux4g-combobox-option .ux4g-checkbox-content {
  min-width: 0;
}

.ux4g-combobox-option .ux4g-checkbox-label {
  font-weight: var(--ux4g-fw-regular, 400);
  color: var(--ux4g-text-neutral-primary, #171717);
}

.ux4g-combobox-option.is-selected .ux4g-checkbox-label,
.ux4g-combobox-option:has(.ux4g-combobox-option-input:checked) .ux4g-checkbox-label {
  color: var(--ux4g-text-brand-primary-default, #4a2bc2);
}

.ux4g-combobox-chip:focus {
  outline: none !important;

}

.ux4g-combobox-single-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-combobox-gap, 8px);
  background: transparent;
  border: none;
  color: var(--ux4g-text-neutral-primary, #171717);
  padding: var(--ux4g-padding-2xs, 8px) var(--ux4g-padding-s, 12px);
  cursor: pointer;
  text-align: left;
  border-radius: var(--ux4g-radius-sm, 6px);
  font-family: inherit;
  font-size: var(--ux4g-fs-14, 14px);
  transition: background-color var(--ux4g-combobox-transition-fast);
}

.ux4g-combobox-single-option:hover {
  background: var(--ux4g-bg-neutral-subtle, #e5e5e5);
}

.ux4g-combobox-single-option:focus {
  outline: none;
}

.ux4g-combobox-single-option:focus-visible {
  background: var(--ux4g-bg-neutral-subtle, #e5e5e5);
}

.ux4g-combobox-single-check {
  opacity: 0;
  color: var(--ux4g-text-brand-primary-default, #4a2bc2);
}

.ux4g-combobox-single-option.is-selected,
.ux4g-combobox-single-option.active {
  background: var(--ux4g-bg-primary-soft, #ede9fe);
  color: var(--ux4g-text-brand-primary-default, #4a2bc2);
}

.ux4g-combobox-single-option.is-selected .ux4g-combobox-single-check,
.ux4g-combobox-single-option.active .ux4g-combobox-single-check {
  opacity: 1;
}

.ux4g-combobox-selected-chips {
  display: none;
  align-items: center;
  gap: var(--ux4g-padding-2xs, 4px);
  min-width: 0;
  max-width: 100%;
}

.ux4g-combobox.has-selection .ux4g-combobox-selected-chips {
  display: inline-flex;
}

.ux4g-combobox.has-selection.ux4g-combobox-multi:not(:focus-within) .ux4g-combobox-input-wrap>.ux4g-icon-outlined,
.ux4g-combobox.has-selection.ux4g-combobox-multi:not(:focus-within) .ux4g-combobox-value>.ux4g-icon-outlined:not(.ux4g-combobox-chip *) {
  display: none;
}

.ux4g-combobox-multi .ux4g-combobox-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ux4g-spacing-3, 6px);
  padding: var(--ux4g-padding-3xs, 4px) var(--ux4g-padding-xl, 24px) var(--ux4g-padding-3xs, 4px) var(--ux4g-padding-none, 0);
  flex: 1;
  min-width: var(--ux4g-spacing-none, 0);
}

.ux4g-combobox-multi .ux4g-combobox-control {
  height: auto;
  min-height: var(--ux4g-combobox-height);
  padding-top: var(--ux4g-padding-3xs, 4px);
  padding-bottom: var(--ux4g-padding-3xs, 4px);
}

.ux4g-combobox-multi .ux4g-combobox-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-combobox-gap, 6px);
  flex: 1;
  min-width: 140px;
}

.ux4g-combobox-multi .ux4g-combobox-selected-chips {
  display: contents;
  /* Ensures individual chips wrap correctly onto multiple lines */
}

/* Force chips to show before the typing block structurally */
.ux4g-combobox-multi .ux4g-combobox-chip {
  order: 1;
}

.ux4g-combobox-multi .ux4g-combobox-input-wrap,
.ux4g-combobox-multi .ux4g-combobox-value>.ux4g-combobox-input,
.ux4g-combobox-multi .ux4g-combobox-value>.ux4g-icon-outlined:not(.ux4g-combobox-chip *) {
  order: 2;
}

.ux4g-combobox-multi .ux4g-combobox-input-wrap>.ux4g-combobox-input {
  flex: 1;
  min-width: 0;
}

.ux4g-combobox-multi .ux4g-combobox-option {
  border-radius: var(--ux4g-radius-sm, 6px);
}

.ux4g-combobox-multi .ux4g-combobox-option+.ux4g-combobox-option {
  margin-top: var(--ux4g-padding-2xs, 6px);
}

.ux4g-combobox-multi .ux4g-combobox-value>.ux4g-icon-outlined,
.ux4g-combobox-multi .ux4g-combobox-input-wrap>.ux4g-icon-outlined,
.ux4g-combobox-multi .ux4g-combobox-value>.ux4g-icon-outlined:not(.ux4g-combobox-chip *) {
  display: inline-flex;
  align-items: center;
  line-height: var(--ux4g-lh-16, 1);
  flex-shrink: var(--ux4g-spacing-none, 0);
  color: var(--ux4g-text-neutral-primary, #171717);
}

.ux4g-combobox-sm .ux4g-combobox-value > .ux4g-icon-outlined,
.ux4g-combobox-sm .ux4g-combobox-input-wrap > .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-14, 14px);
}

.ux4g-combobox-md .ux4g-combobox-value > .ux4g-icon-outlined,
.ux4g-combobox-md .ux4g-combobox-input-wrap > .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-16, 16px);
}

.ux4g-combobox-lg .ux4g-combobox-value > .ux4g-icon-outlined,
.ux4g-combobox-lg .ux4g-combobox-input-wrap > .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-20, 20px);
}

.ux4g-combobox-multi.ux4g-combobox-sm .ux4g-combobox-value {
  gap: var(--ux4g-padding-xs, 8px);
  padding: var(--ux4g-padding-3xs, 4px);
}

.ux4g-combobox-multi.ux4g-combobox-md .ux4g-combobox-value {
  gap: var(--ux4g-padding-xs, 8px);
  padding: var(--ux4g-padding-3xs, 4px);
}

.ux4g-combobox-multi.ux4g-combobox-lg .ux4g-combobox-value {
  gap: var(--ux4g-padding-s, 12px);
  padding: var(--ux4g-padding-3xs, 4px);
}

.ux4g-combobox-multi.ux4g-combobox-lg .ux4g-combobox-control {
  padding-top: var(--ux4g-padding-2xs, 6px);
  padding-bottom: var(--ux4g-padding-2xs, 6px);
}

.ux4g-combobox-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-padding-3xs, 4px);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 100%;
  min-height: 28px;
  background-color: var(--ux4g-bg-neutral);
  color: var(--ux4g-text-neutral-primary);
  font-size: var(--ux4g-fs-14);
  border-radius: var(--ux4g-radius-sm);
  padding: var(--ux4g-space-none) var(--ux4g-padding-xs);
  border: var(--ux4g-border-thin) solid var(--ux4g-border-color-neutral-subtle);
  line-height: 1;
}

.ux4g-combobox-multi.ux4g-combobox-md .ux4g-combobox-chip .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-16, 16px);
  margin-top: 0;
}

.ux4g-combobox-multi.ux4g-combobox-lg .ux4g-combobox-chip .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-16, 16px);
  margin-top: 0;
}

.ux4g-combobox-chip[role="button"] {
  cursor: default;
}

.ux4g-combobox-chip .ux4g-icon-outlined:last-child {
  cursor: pointer;
}

.ux4g-combobox-chip .ux4g-icon-outlined:last-child:hover {
  background-color: var(--ux4g-border-color-neutral-subtle, #e5e5e5);
  border-radius: var(--ux4g-radius-xs, 4px);
}

.ux4g-combobox-chip[role="button"]:focus-visible {
  outline: var(--ux4g-border-width-sm, 1px) solid var(--ux4g-combobox-border-focus);
  outline-offset: var(--ux4g-border-width-sm, 1px);
}

.ux4g-combobox-chip .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-14, 14px);
  margin-top: 1px;
}

.ux4g-combobox-chip > span:not(.ux4g-icon-outlined) {
  overflow: var(--ux4g-of-hidden, hidden);
  text-overflow: ellipsis;
  white-space: var(--ux4g-tw-nowrap, nowrap);
  max-width: 100%;
}

.ux4g-combobox-help {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-padding-3xs, 2px);
  font-size: var(--ux4g-fs-12, 12px);
  line-height: var(--ux4g-lh-16, 16px);
  font-weight: var(--ux4g-fw-regular, 400);
  color: var(--ux4g-text-neutral-tertiary, #737373);
  display: none;
}

.ux4g-combobox-default .ux4g-combobox-help,
:is(.ux4g-combobox-error, .ux4g-combobox-success, .ux4g-combobox-warning) .ux4g-combobox-help {
  display: inline-flex !important;
}


.ux4g-combobox-help :is(.ux4g-icon, .ux4g-icon-outlined) {
  font-size: inherit;
  line-height: 1;
}

/* Help text typescale by combobox size:
   S/M -> body-xs-default, L -> body-s-default */
.ux4g-combobox.ux4g-combobox-sm+.ux4g-combobox-help,
.ux4g-combobox.ux4g-combobox-md+.ux4g-combobox-help {
  font-size: var(--ux4g-fs-12, 12px);
  line-height: var(--ux4g-lh-16, 16px);
  font-weight: var(--ux4g-fw-regular, 400);
}

.ux4g-combobox.ux4g-combobox-lg+.ux4g-combobox-help {
  font-size: var(--ux4g-fs-14, 14px);
  line-height: var(--ux4g-lh-20, 20px);
  font-weight: var(--ux4g-fw-regular, 400);
}


.ux4g-combobox .ux4g-combobox-control:disabled,
.ux4g-combobox .ux4g-combobox-control[aria-disabled="true"] {
  border-color: var(--ux4g-border-color-neutral-subtle, #e5e5e5);
  background: var(--ux4g-bg-neutral-disabled, #e5e5e5);
  color: var(--ux4g-text-neutral-disabled, #a1a1a1);
  box-shadow: var(--ux4g-shadow-l0, none);
  cursor: not-allowed;
}

.ux4g-combobox .ux4g-combobox-control:disabled .ux4g-combobox-caret,
.ux4g-combobox .ux4g-combobox-control:disabled .ux4g-icon-outlined,
.ux4g-combobox .ux4g-combobox-control[aria-disabled="true"] .ux4g-combobox-caret,
.ux4g-combobox .ux4g-combobox-control[aria-disabled="true"] .ux4g-icon-outlined {
  color: var(--ux4g-text-neutral-disabled, #a1a1a1);
}

.ux4g-combobox.ux4g-combobox-error {
  --ux4g-combobox-border: var(--ux4g-border-color-error-strong, #db372d);
  --ux4g-combobox-border-hover: var(--ux4g-border-color-error-strong, #db372d);
  --ux4g-combobox-border-focus: var(--ux4g-border-color-error-strong, #db372d);
  --ux4g-combobox-state-text: var(--ux4g-text-status-error, #db372d);
  --ux4g-combobox-state-icon: var(--ux4g-icon-status-error, #db372d);
}

.ux4g-combobox.ux4g-combobox-success {
  --ux4g-combobox-border: var(--ux4g-border-color-success-strong, #1aa64a);
  --ux4g-combobox-border-hover: var(--ux4g-border-color-success-strong, #1aa64a);
  --ux4g-combobox-border-focus: var(--ux4g-border-color-success-strong, #1aa64a);
  --ux4g-combobox-state-text: var(--ux4g-text-status-success, #1aa64a);
  --ux4g-combobox-state-icon: var(--ux4g-icon-status-success, #1aa64a);
}

.ux4g-combobox.ux4g-combobox-warning {
  --ux4g-combobox-border: var(--ux4g-border-color-warning-strong, #fa8c16);
  --ux4g-combobox-border-hover: var(--ux4g-border-color-warning-strong, #fa8c16);
  --ux4g-combobox-border-focus: var(--ux4g-border-color-warning-strong, #fa8c16);
  --ux4g-combobox-state-text: var(--ux4g-text-status-warning, #fa8c16);
  --ux4g-combobox-state-icon: var(--ux4g-icon-status-warning, #fa8c16);
}

.ux4g-combobox.ux4g-combobox-default {
  --ux4g-combobox-state-text: var(--ux4g-text-neutral-tertiary, #737373);
  --ux4g-combobox-state-icon: var(--ux4g-text-neutral-tertiary, #737373);
}

/* Ensure these states use the overridden variables for help text colors */
:is(.ux4g-combobox-error, .ux4g-combobox-success, .ux4g-combobox-warning, .ux4g-combobox-default) .ux4g-combobox-help {
  color: var(--ux4g-combobox-state-text);
}

:is(.ux4g-combobox-error, .ux4g-combobox-success, .ux4g-combobox-warning, .ux4g-combobox-default) .ux4g-combobox-help :is(.ux4g-icon, .ux4g-icon-outlined) {
  color: var(--ux4g-combobox-state-icon);
}

/* The base rules for .ux4g-combobox-control will now automatically inherit the overridden --ux4g-combobox-border, etc. */

/* Sizes */
.ux4g-combobox-sm {
  --ux4g-combobox-height: var(--ux4g-sz-s, 32px);
  --ux4g-combobox-menu-chevron-size: var(--ux4g-combobox-menu-chevron-sm);
}

.ux4g-combobox-md {
  --ux4g-combobox-height: var(--ux4g-sz-m, 40px);
  --ux4g-combobox-menu-chevron-size: var(--ux4g-combobox-menu-chevron-md);
}

.ux4g-combobox-lg {
  --ux4g-combobox-height: var(--ux4g-sz-l, 48px);
  --ux4g-combobox-menu-chevron-size: var(--ux4g-combobox-menu-chevron-lg);
}

.ux4g-combobox.ux4g-combobox-sm .ux4g-combobox-control {
  font-size: var(--ux4g-fs-14, 14px);
}

.ux4g-combobox.ux4g-combobox-md .ux4g-combobox-control {
  font-size: var(--ux4g-fs-14, 14px);
}

.ux4g-combobox.ux4g-combobox-lg .ux4g-combobox-control {
  font-size: var(--ux4g-fs-16, 16px);
}

.ux4g-combobox-input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  min-width: 0;
  color: var(--ux4g-text-neutral-primary, #171717);
  font-family: inherit;
  font-size: inherit;
  padding: var(--ux4g-padding-none, 0);
  margin: var(--ux4g-margin-none, 0);
}

.ux4g-combobox-input::placeholder {
  color: var(--ux4g-text-neutral-tertiary, #737373);
}

.ux4g-combobox-input:disabled,
.ux4g-combobox-control:disabled .ux4g-combobox-input,
.ux4g-combobox-control[aria-disabled="true"] .ux4g-combobox-input {
  color: var(--ux4g-text-neutral-disabled, #a1a1a1);
  background: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.ux4g-combobox-input:disabled::placeholder,
.ux4g-combobox-control:disabled .ux4g-combobox-input::placeholder,
.ux4g-combobox-control[aria-disabled="true"] .ux4g-combobox-input::placeholder {
  color: var(--ux4g-text-neutral-disabled, #a1a1a1);
}

/* Base states are handled above in the combined focus-within rule */
.ux4g-popover {
  --ux4g-popover-arrow-width: var(--ux4g-size-18, 1.125rem);
  --ux4g-popover-arrow-height: var(--ux4g-size-10, 0.625rem);
  --ux4g-popover-arrow-color: var(--ux4g-bg-neutral-elevated);
  position: var(--ux4g-pos-absolute);
  z-index: var(--ux4g-z-layout-top);
  min-width: min(20rem, calc(100% - 32px));
  max-width: min(50rem, calc(100% - 32px));
  border-radius: var(--ux4g-radius-md);
  box-shadow: var(--ux4g-shadow-l2);
  border: var(--ux4g-border-width-sm, 0.0625rem) solid var(--ux4g-border-color-neutral-default, #D9D9D9);
  padding: var(--ux4g-padding-xs) var(--ux4g-padding-none);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ux4g-stack-none);
  visibility: var(--ux4g-visibility-hide);
  opacity: var(--ux4g-opacity-0);
  transition: opacity 0.15s linear;
  background-color: var(--ux4g-bg-neutral-elevated);
  color: var(--ux4g-text-neutral-primary);
}

.ux4g-popover.show {
  visibility: var(--ux4g-visibility-show);
  opacity: 1;
}



.ux4g-popover-header {
  padding: var(--ux4g-padding-xs) var(--ux4g-padding-s);
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ux4g-stack-s);
  align-self: stretch;
}

.ux4g-popover-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: var(--ux4g-inline-s);
}
.ux4g-popover-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-s);
  flex: 1;
}
.ux4g-popover-subtitle {
  margin-left: var(--ux4g-margin-xl);
}


.ux4g-popover-subtitle .ux4g-popover-spacer {
  width: var(--ux4g-size-20, 1.25rem);
  flex-shrink: 0;
}
.ux4g-popover-body {
  padding: var(--ux4g-padding-xs) var(--ux4g-padding-s);
  position: var(--ux4g-pos-relative);
  z-index: var( --ux4g-z-layout-top);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ux4g-stack-none);
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}


.ux4g-popover-arrow {
  position: var(--ux4g-pos-absolute) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ux4g-popover-arrow-width);
  height: var(--ux4g-popover-arrow-height);
  z-index: 20;
  pointer-events: none;
}

.ux4g-popover-arrow::before,
.ux4g-popover-arrow::after {
  position: absolute;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
}

/* --- TOP --- */
.ux4g-popover[class*="-top"] {
  transform: translateY(calc(var(--ux4g-popover-arrow-height) * -1.1));
}
.ux4g-popover[class*="-top"] > .ux4g-popover-arrow {
  bottom: calc((var(--ux4g-popover-arrow-height) * -1.1) + var(--ux4g-border-width-sm, 0.0625rem));
  left: 50%;
  transform: translateX(-50%);
}
.ux4g-popover-top-start > .ux4g-popover-arrow {
  left: var(--ux4g-size-8, 0.5rem) !important;
  transform: none !important;
}
.ux4g-popover-top-end > .ux4g-popover-arrow {
  left: auto !important;
  right: var(--ux4g-size-8, 0.5rem) !important;
  transform: none !important;
}
.ux4g-popover[class*="-top"] .ux4g-popover-arrow::before,
.ux4g-popover[class*="-top"] .ux4g-popover-arrow::after {
  left: 0;
  border-width: var(--ux4g-popover-arrow-height) calc(var(--ux4g-popover-arrow-width) / 2) 0 calc(var(--ux4g-popover-arrow-width) / 2);
}
.ux4g-popover[class*="-top"] .ux4g-popover-arrow::before {
  bottom: 0;
  border-color: var(--ux4g-border-color-neutral-default, #D9D9D9) transparent transparent transparent;
}
.ux4g-popover[class*="-top"] .ux4g-popover-arrow::after {
  bottom: var(--ux4g-border-width-sm, 0.0625rem);
  border-color: var(--ux4g-popover-arrow-color) transparent transparent transparent;
}

/* --- BOTTOM --- */
.ux4g-popover[class*="-bottom"] {
  transform: translateY(calc(var(--ux4g-popover-arrow-height) * 1.1));
}
.ux4g-popover[class*="-bottom"] > .ux4g-popover-arrow {
  top: calc((var(--ux4g-popover-arrow-height) * -1.1) + var(--ux4g-border-width-sm, 0.0625rem));
  left: 50%;
  transform: translateX(-50%);
}
.ux4g-popover-bottom-start > .ux4g-popover-arrow {
  left: var(--ux4g-size-8, 0.5rem) !important;
  transform: none !important;
}
.ux4g-popover-bottom-end > .ux4g-popover-arrow {
  left: auto !important;
  right: var(--ux4g-size-8, 0.5rem) !important;
  transform: none !important;
}
.ux4g-popover[class*="-bottom"] .ux4g-popover-arrow::before,
.ux4g-popover[class*="-bottom"] .ux4g-popover-arrow::after {
  left: 0;
  border-width: 0 calc(var(--ux4g-popover-arrow-width) / 2) var(--ux4g-popover-arrow-height) calc(var(--ux4g-popover-arrow-width) / 2);
}
.ux4g-popover[class*="-bottom"] .ux4g-popover-arrow::before {
  top: 0;
  border-color: transparent transparent var(--ux4g-border-color-neutral-default, #D9D9D9) transparent;
}
.ux4g-popover[class*="-bottom"] .ux4g-popover-arrow::after {
  top: var(--ux4g-border-width-sm, 0.0625rem);
  border-color: transparent transparent var(--ux4g-popover-arrow-color) transparent;
}

/* --- LEFT --- */
.ux4g-popover[class*="-left"] {
  transform: translateX(calc(var(--ux4g-popover-arrow-height) * -1.1));
}
.ux4g-popover[class*="-left"] > .ux4g-popover-arrow {
  width: var(--ux4g-popover-arrow-height);
  height: var(--ux4g-popover-arrow-width);
  right: calc((var(--ux4g-popover-arrow-height) * -1.1) + var(--ux4g-border-width-sm, 0.0625rem));
  top: 50%;
  transform: translateY(-50%);
}
.ux4g-popover-left-start > .ux4g-popover-arrow {
  top: var(--ux4g-size-8, 0.5rem) !important;
  transform: none !important;
}
.ux4g-popover-left-end > .ux4g-popover-arrow {
  top: auto !important;
  bottom: var(--ux4g-size-8, 0.5rem) !important;
  transform: none !important;
}
.ux4g-popover[class*="-left"] .ux4g-popover-arrow::before,
.ux4g-popover[class*="-left"] .ux4g-popover-arrow::after {
  top: 0;
  border-width: calc(var(--ux4g-popover-arrow-width) / 2) 0 calc(var(--ux4g-popover-arrow-width) / 2) var(--ux4g-popover-arrow-height);
}
.ux4g-popover[class*="-left"] .ux4g-popover-arrow::before {
  right: 0;
  border-color: transparent transparent transparent var(--ux4g-border-color-neutral-default, #D9D9D9);
}
.ux4g-popover[class*="-left"] .ux4g-popover-arrow::after {
  right: var(--ux4g-border-width-sm, 0.0625rem);
  border-color: transparent transparent transparent var(--ux4g-popover-arrow-color);
}

/* --- RIGHT --- */
.ux4g-popover[class*="-right"] {
  transform: translateX(calc(var(--ux4g-popover-arrow-height) * 1.1));
}
.ux4g-popover[class*="-right"] > .ux4g-popover-arrow {
  width: var(--ux4g-popover-arrow-height);
  height: var(--ux4g-popover-arrow-width);
  left: calc((var(--ux4g-popover-arrow-height) * -1.1) + var(--ux4g-border-width-sm, 0.0625rem));
  top: 50%;
  transform: translateY(-50%);
}
.ux4g-popover-right-start > .ux4g-popover-arrow {
  top: var(--ux4g-size-8, 0.5rem) !important;
  transform: none !important;
}
.ux4g-popover-right-end > .ux4g-popover-arrow {
  top: auto !important;
  bottom: var(--ux4g-size-8, 0.5rem) !important;
  transform: none !important;
}
.ux4g-popover[class*="-right"] .ux4g-popover-arrow::before,
.ux4g-popover[class*="-right"] .ux4g-popover-arrow::after {
  top: 0;
  border-width: calc(var(--ux4g-popover-arrow-width) / 2) var(--ux4g-popover-arrow-height) calc(var(--ux4g-popover-arrow-width) / 2) 0;
}
.ux4g-popover[class*="-right"] .ux4g-popover-arrow::before {
  left: 0;
  border-color: transparent var(--ux4g-border-color-neutral-default, #D9D9D9) transparent transparent;
}
.ux4g-popover[class*="-right"] .ux4g-popover-arrow::after {
  left: var(--ux4g-border-width-sm, 0.0625rem);
  border-color: transparent var(--ux4g-popover-arrow-color) transparent transparent;
}

@media (max-width: 767px) {
  .ux4g-popover {
    max-width: calc(100% - 32px) !important;
  }
}
/* =========================================== UX4G Drawer Component =========================================== */
body.ux4g-drawer-lock {
    overflow: hidden;;
}
/* Overlay */
 .ux4g-drawer-overlay {
     position: var(--ux4g-pos-fixed);
     top: var(--ux4g-pos-top-0);
     bottom: var(--ux4g-pos-bottom-0);
     left: var(--ux4g-pos-start-0);
     width: 100vw;
     min-height: 100vh;
      background-color: rgba(0, 0, 0, 0.50);
     z-index: var(--ux4g-z-layout-top);
     opacity: var(--ux4g-opacity-0);
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
}
 .ux4g-drawer-overlay.ux4g-drawer-open {
     opacity: 1;
     visibility: visible;
}
 .ux4g-drawer-left.ux4g-drawer-open, .ux4g-drawer-right.ux4g-drawer-open {
     transform: translateX(0);
}
 .ux4g-drawer-top.ux4g-drawer-open, .ux4g-drawer-bottom.ux4g-drawer-open {
     transform: translateY(0);
}
/* Drawer Container */
 .ux4g-drawer {
     position: var(--ux4g-pos-fixed);
     background-color: var(--ux4g-bg-neutral-elevated, #ffffff);
     z-index: 1001;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* transition: transform 0.3s ease;
     */
     padding: var(--ux4g-padding-none) var(--ux4g-padding-xl);
     gap: var(--ux4g-stack-m);
     transform: translate3d(0,0,0);
     transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
/* Drawer Positions */
 .ux4g-drawer-right {
     top: var(--ux4g-pos-top-0);
     bottom: var(--ux4g-pos-bottom-0);
     right: 0;
     min-height: 100vh;
     width: 100%;
     max-width: 500px;
     transform: translateX(100%);
}
 .ux4g-drawer-left {
     top: var(--ux4g-pos-top-0);
     bottom: var(--ux4g-pos-bottom-0);
     left: var(--ux4g-pos-start-0);
     min-height: 100vh;
     width: 100%;
     max-width: 500px;
     transform: translateX(-100%);
}
 .ux4g-drawer-top {
     top: var(--ux4g-pos-top-0);
     left: var(--ux4g-pos-start-0);
     width: 100vw;
     height: min(50vh, 500px);
     transform: translateY(-100%);
}
 .ux4g-drawer-bottom {
     bottom: var(--ux4g-pos-bottom-0);
     left: var(--ux4g-pos-start-0);
     width: 100vw;
     height: min(50vh, 500px);
     transform: translateY(100%);
}
/* Internal Layout */
 .ux4g-drawer-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     padding: var(--ux4g-padding-s) var(--ux4g-padding-none);
     border-bottom: var(--ux4g-border-width-sm, 1px) solid var(--ux4g-border-color-neutral-default);
     gap: var(--ux4g-inline-l);
}
 .ux4g-drawer-title-group {
     display: flex;
     flex-direction: column;
     gap: var(--ux4g-stack-2xs);
}
 .ux4g-drawer-title-wrapper {
     display: flex;
     align-items: center;
     gap: var(--ux4g-inline-s);
}
 .ux4g-drawer-title-wrapper .ux4g-icon {
     font-size: var(--ux4g-fs-24);
     color: var(--ux4g-text-neutral-primary);
}
 .ux4g-drawer-title {
     font-size: var(--ux4g-fs-20);
     line-height: var(--ux4g-lh-24);
     font-weight: var(--ux4g-font-weight-semibold);
     color: var(--ux4g-text-neutral-primary);
     margin: 0;
}
 .ux4g-drawer-subtitle {
     font-size: var(--ux4g-fs-16);
     line-height: var(--ux4g-lh-24);
     color: var(--ux4g-text-neutral-secondary);
     display: block;
     margin-left: 26px;
     font-weight: var(--ux4g-font-weight-regular);
}
/* Add support for no-icon alignment */
 .ux4g-drawer-title-wrapper:first-child:not(:has(.ux4g-icon)) + .ux4g-drawer-subtitle {
     margin-left: 0;
}
 .ux4g-drawer-header-actions {
     display: flex;
     align-items: center;
     gap: var(--ux4g-space-5);
}
 .ux4g-drawer-action-text {
     font-size: var(--ux4g-fs-12);
     color: var(--ux4g-text-neutral-secondary);
}
 .ux4g-drawer-close {
     background: transparent;
     border: none;
     cursor: pointer;
     font-size: var(--ux4g-fs-20);
     padding: 0;
     color: var(--ux4g-text-neutral-secondary);
     display: flex;
     align-items: center;
     border-radius: var(--ux4g-radius-xs);
     opacity: var(--ux4g-opacity-50);
     transition: all 0.3s ease;
}
 .ux4g-drawer-close:hover{
     background-color: var(--ux4g-bg-neutral-subtle);
     opacity: 1;
}
 .ux4g-drawer-close .ux4g-icon-outlined{
     font-size: var(--ux4g-fs-24);
     width: var(--ux4g-fs-24);
     height: var(--ux4g-fs-24);
}
 .ux4g-drawer-body {
     flex: 1;
     overflow-y: auto;
     padding: var(--ux4g-padding-m) var(--ux4g-padding-none);
     font-size: var(--ux4g-fs-14);
     color: var(--ux4g-text-neutral-secondary);
     line-height: var(--ux4g-lh-20);
     font-weight: var(--ux4g-fw-regular);
}
 .ux4g-drawer-footer {
     display: flex;
     align-items: center;
     gap: var(--ux4g-space-5);
     padding: var(--ux4g-padding-l) var(--ux4g-padding-none);
     border-top: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
}

@media (max-width: 767px) {
    .ux4g-drawer-right,
    .ux4g-drawer-left {
        max-width: calc(100vw - 50px);
    }
}

.ux4g-pagination-wrapper {
    display: flex;
    align-items: center;
    gap: var(--ux4g-margin-m);
}

/* PAGINATION */
.ux4g-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ux4g-inline-s);
    user-select: none;
    padding: var(--ux4g-padding-xs);
}

.ux4g-page-number,
.ux4g-page-nav {
    background-color: transparent;
    height: 32px;
    border-radius: var(--ux4g-radius-md);
    cursor: pointer;
    color: var(--ux4g-text-neutral-tertiary);
    padding: var(--ux4g-padding-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--ux4g-border-width-sm) solid transparent;
    --ux4g-fs-current: var(--ux4g-fs-14);
    --ux4g-lh-current: var(--ux4g-lh-20);
    --ux4g-fw-current: var(--ux4g-font-weight-regular);
}

.ux4g-page-number:hover,
.ux4g-page-nav:hover {
    border-color: var(--ux4g-border-color-neutral-hover);
    color: var(--ux4g-text-neutral-primary);
}

.ux4g-page-number.active,
.ux4g-page-number:active {
    border-color: var(--ux4g-border-color-primary-strong);
    color: var(--ux4g-text-neutral-primary);
    background-color: var(--ux4g-bg-neutral);
}

.ux4g-page-number-more {
    font-size: 20px;
}

.ux4g-page-number:focus {
    background-color: var(--ux4g-bg-neutral-elevated);
}

/* PAGE SIZE */
.ux4g-page-size {
    display: flex;
    align-items: center;
    gap: var(--ux4g-space-4);
    color: var(--ux4g-text-neutral-tertiary);
    font-size: var(--ux4g-fs-12);
}

.ux4g-page-size-select-wrapper {
    position: var(--ux4g-pos-relative);
    display: flex;
    align-items: center;
}

.ux4g-page-size-select-wrapper .ux4g-icon-outlined {
    position: var(--ux4g-pos-absolute);
    pointer-events: none;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--ux4g-fs-16);
}

.ux4g-page-size-select-wrapper .ux4g-icon-outlined:first-child {
    left: 8px;
}

.ux4g-page-size-select-wrapper .ux4g-icon-outlined.ux4g-select-value-icon {
    left: 55%;
    transform: translate(-50%, -50%);
}

.ux4g-page-size-select-wrapper .ux4g-icon-outlined:last-child {
    right: 6px;
}

.ux4g-page-size-select-wrapper.has-value .ux4g-select-value-icon {
    display: none;
}


.ux4g-page-size select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-none) 24px var(--ux4g-padding-none) 32px;
    background: var(--ux4g-bg-neutral-elevated);
    height: 32px;
    color: var(--ux4g-bg-neutral-elevated);
    /* Initially matches background to hide text */
    cursor: pointer;
    text-align: var(--ux4g-ta-center);
    --ux4g-fs-current: var(--ux4g-fs-14);
    --ux4g-lh-current: var(--ux4g-lh-20);
    --ux4g-fw-current: var(--ux4g-font-weight-regular);
}

.ux4g-page-size-select-wrapper.has-value select {
    color: var(--ux4g-text-neutral-primary);
}


.ux4g-page-size select option {
    color: var(--ux4g-text-neutral-primary);
}

.ux4g-page-nav.prev,
.ux4g-page-nav.next {
    font-size: var(--ux4g-fs-20);
}

.ux4g-page-nav.prev {
    margin-right: var(--ux4g-space-4);
}

.ux4g-page-nav.disabled,
.ux4g-page-nav[disabled],
.ux4g-pagination-prev.disabled,
.ux4g-pagination-prev[disabled] {
    color: var(--ux4g-text-neutral-tertiary);
    pointer-events: none;
}

.ux4g-page-nav.next {
    color: var(--ux4g-text-brand-primary-default);
}

/******************************************dotted pagination*******************************/
.ux4g-pagination-dotted {
    min-width: 220px;
    width: fit-content;
}

.ux4g-pagination-solid {
    background-color: var(--ux4g-bg-neutral-elevated);
}

.ux4g-pagination-translucent {
    background-color: rgba(255, 255, 255, 0.70)
}

.ux4g-pagination-dotted .ux4g-pagination-dots {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--ux4g-inline-s);
}

.ux4g-page-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--ux4g-radius-full);
    background: var(--ux4g-bg-primary-soft);
    /* inactive */
    cursor: pointer;
    position: var(--ux4g-pos-relative);
    transition: width 0.2s ease, background-color 0.2s ease;
}

.ux4g-page-dot.ux4g-active,
.ux4g-page-dot:active {
    width: 32px;
    background: var(--ux4g-bg-primary-strong);
    cursor: default;
}

/* Arrows */
.ux4g-pagination-prev,
.ux4g-pagination-next {
    width: 24px;
    height: 24px;
    border-radius: var(--ux4g-radius-full);
    background: var(--ux4g-bg-primary-soft);
    font-size: var(--ux4g-fs-20);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: var(--ux4g-padding-2xs);
}

/* Compact → fewer gaps, smaller arrows */
.ux4g-pagination-compact {
    gap: var(--ux4g-space-4);
}

.ux4g-pagination-compact .ux4g-pagination-prev,
.ux4g-pagination-compact .ux4g-pagination-next {
    width: 30px;
    height: 30px;
    font-size: var(--ux4g-fs-18);
}

/* No arrows variant */
.ux4g-pagination-no-arrows .ux4g-pagination-prev,
.ux4g-pagination-no-arrows .ux4g-pagination-next {
    display: none;
}

/* .ux4g-pagination-prev-right,
.ux4g-pagination-next-right {
    position: var(--ux4g-pos-absolute);
} */

/* .ux4g-pagination-prev-right {
    right: var(--ux4g-space-10);
} */

/* .ux4g-pagination-next-right {
    right: var(--ux4g-space-none);
} */

@media screen and (max-width: 767px) {
    .ux4g-pagination-wrapper {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--ux4g-margin-xs);
    }

    .ux4g-pagination {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        margin-inline: auto;
    }

    /* Standard pagination: fixed arrows on sides, wrapped numbers in center with smaller gap */
    .ux4g-pagination:not(.ux4g-pagination-dotted) {
        position: relative;
        padding-inline: 48px;
        gap: var(--ux4g-space-4, 4px);
    }
    
    .ux4g-pagination:not(.ux4g-pagination-dotted) .ux4g-page-nav.prev,
    .ux4g-pagination:not(.ux4g-pagination-dotted) .ux4g-page-nav.next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }
    
    .ux4g-pagination:not(.ux4g-pagination-dotted) .ux4g-page-nav.prev {
        left: var(--ux4g-padding-xs, 8px);
    }
    
    .ux4g-pagination:not(.ux4g-pagination-dotted) .ux4g-page-nav.next {
        right: var(--ux4g-padding-xs, 8px);
    }

    .ux4g-pagination-dotted {
        max-width: 100%;
        width: fit-content;
        justify-content: center;
        flex-wrap: nowrap;
    }

    .ux4g-pagination-dotted .ux4g-pagination-dots {
        justify-content: space-between;
        gap: var(--ux4g-inline-s);
        flex-wrap: wrap;
    }

    .ux4g-page-size {
        justify-content: center;
        width: 100%;
    }

    .ux4g-pagination-prev-right,
    .ux4g-pagination-next-right {
        position: var(--ux4g-pos-static);
    }
}
.ux4g-tooltip-wrapper {
  position: var(--ux4g-pos-relative, relative);
  display: inline-block;
  cursor: pointer;
}

.ux4g-tooltip {
  display: none;
  align-items: flex-start;
  padding: var(--ux4g-padding-2xs, 4px) var(--ux4g-padding-xs, 8px);
  background-color: var(--ux4g-bg-neutral-stronger, #404040);
  color: var(--ux4g-text-neutral-inverse, #fafafa);
  border-radius: var(--ux4g-radius-sm, 4px);
  position: var(--ux4g-pos-absolute, absolute);
  z-index: var(--ux4g-z-tooltip, 1080) ;
  white-space: normal;
  overflow-wrap: break-word;
  pointer-events: none;
  font-size: var(--ux4g-fs-14, 14px);
  font-weight: var(--ux4g-fw-regular, 400);
  line-height: var(--ux4g-lh-20, 20px);
  text-align: left;
  max-width: min(280px, calc(100vw - 24px));
  width: max-content;
  gap: var(--ux4g-stack-2xs, 4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0;
  box-sizing: border-box;
}

/* Tooltip Sizes */
.ux4g-tooltip-s {
  font-size: var(--ux4g-fs-14, 14px);
  line-height: var(--ux4g-lh-20, 20px);
}

.ux4g-tooltip-s :is(.ux4g-icon-outlined, svg) {
  font-size: var(--ux4g-fs-14, 14px);
  margin-top: 3px;
  /* Adjusted from 2px for 14px icon in 20px line-height */
}

.ux4g-tooltip-xs {
  font-size: var(--ux4g-fs-12, 12px);
  line-height: var(--ux4g-lh-16, 16px);
  padding: var(--ux4g-padding-2xs, 4px) var(--ux4g-padding-xs, 8px);

}

/* Show states */
.ux4g-tooltip-wrapper:hover .ux4g-tooltip,
.ux4g-tooltip.show {
  display: flex;
  opacity: 1;
}

/* Tooltip Arrow Base */
.ux4g-tooltip::after {
  content: "";
  position: var(--ux4g-pos-absolute, absolute);
  border-style: solid;
}

/* Top Placements */
.ux4g-tooltip-top-center,
.ux4g-tooltip-top-left,
.ux4g-tooltip-top-right {
  bottom: var(--ux4g-pos-bottom-100, 100%);
  margin-bottom: var(--ux4g-stack-xs, 8px);
}

.ux4g-tooltip-top-center {
  left: var(--ux4g-pos-start-50, 50%);
  transform: var(--ux4g-pos-translate-middle-x, translateX(-50%)) translateY(0);
}

.ux4g-tooltip-top-left {
  left: var(--ux4g-pos-start-0, 0);
}

.ux4g-tooltip-top-right {
  right: var(--ux4g-pos-end-0, 0);
}

/* Hover/Show states for Top */
.ux4g-tooltip-wrapper:hover .ux4g-tooltip-top-center {
  transform: var(--ux4g-pos-translate-middle-x, translateX(-50%)) translateY(calc(-1 * var(--ux4g-stack-xs, 8px)));
}

.ux4g-tooltip-wrapper:hover .ux4g-tooltip-top-left,
.ux4g-tooltip-wrapper:hover .ux4g-tooltip-top-right {
  transform: translateY(calc(-1 * var(--ux4g-stack-xs, 8px)));
}

.ux4g-tooltip.show[data-placement="top"] {
  transform: translateY(calc(-1 * var(--ux4g-stack-xs, 8px)));
}

.ux4g-tooltip-top-center::after,
.ux4g-tooltip-top-left::after,
.ux4g-tooltip-top-right::after,
.ux4g-tooltip[data-placement="top"]::after {
  top: var(--ux4g-pos-top-100, 100%);
  border-width: 6px 6px 0 6px;
  border-color: var(--ux4g-bg-neutral-stronger, #404040) transparent transparent transparent;
}

.ux4g-tooltip-top-center::after,
.ux4g-tooltip[data-placement="top"]::after {
  left: var(--ux4g-pos-start-50, 50%);
  transform: var(--ux4g-pos-translate-middle-x, translateX(-50%));
}

.ux4g-tooltip-top-left::after {
  left: var(--ux4g-stack-m, 12px);
}

.ux4g-tooltip-top-right::after {
  right: var(--ux4g-stack-m, 12px);
}

/* Bottom Placements */
.ux4g-tooltip-bottom-center,
.ux4g-tooltip-bottom-left,
.ux4g-tooltip-bottom-right {
  top: var(--ux4g-pos-top-100, 100%);
  margin-top: var(--ux4g-stack-xs, 8px);
}

.ux4g-tooltip-bottom-center {
  left: var(--ux4g-pos-start-50, 50%);
  transform: var(--ux4g-pos-translate-middle-x, translateX(-50%)) translateY(0);
}

.ux4g-tooltip-bottom-left {
  left: 0;
}

.ux4g-tooltip-bottom-right {
  right: 0;
}

/* Hover/Show states for Bottom */
.ux4g-tooltip-wrapper:hover .ux4g-tooltip-bottom-center {
  transform: var(--ux4g-pos-translate-middle-x, translateX(-50%)) translateY(var(--ux4g-stack-xs, 8px));
}

.ux4g-tooltip-wrapper:hover .ux4g-tooltip-bottom-left,
.ux4g-tooltip-wrapper:hover .ux4g-tooltip-bottom-right {
  transform: translateY(var(--ux4g-stack-xs, 8px));
}

.ux4g-tooltip.show[data-placement="bottom"] {
  transform: translateY(var(--ux4g-stack-xs, 8px));
}

.ux4g-tooltip-bottom-center::after,
.ux4g-tooltip-bottom-left::after,
.ux4g-tooltip-bottom-right::after,
.ux4g-tooltip[data-placement="bottom"]::after {
  bottom: var(--ux4g-pos-bottom-100, 100%);
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent var(--ux4g-bg-neutral-stronger, #404040) transparent;
}

.ux4g-tooltip-bottom-center::after,
.ux4g-tooltip[data-placement="bottom"]::after {
  left: var(--ux4g-pos-start-50, 50%);
  transform: var(--ux4g-pos-translate-middle-x, translateX(-50%));
}

.ux4g-tooltip-bottom-left::after {
  left: var(--ux4g-stack-xs, 8px);
}

.ux4g-tooltip-bottom-right::after {
  right: var(--ux4g-stack-xs, 8px);
}

/* Side Placements */
.ux4g-tooltip-left-center,
.ux4g-tooltip-right-center {
  top: var(--ux4g-pos-top-50, 50%);
  transform: var(--ux4g-pos-translate-middle-y, translateY(-50%)) translateX(0);
}

.ux4g-tooltip-left-center {
  right: var(--ux4g-pos-end-100, 100%);
  margin-right: var(--ux4g-stack-xs, 8px);
}

.ux4g-tooltip-right-center {
  left: var(--ux4g-pos-start-100, 100%);
  margin-left: var(--ux4g-stack-xs, 8px);
}

/* Hover/Show states for Sides */
.ux4g-tooltip-wrapper:hover .ux4g-tooltip-left-center {
  transform: var(--ux4g-pos-translate-middle-y, translateY(-50%)) translateX(calc(-1 * var(--ux4g-stack-xs, 8px)));
}

.ux4g-tooltip-wrapper:hover .ux4g-tooltip-right-center {
  transform: var(--ux4g-pos-translate-middle-y, translateY(-50%)) translateX(var(--ux4g-stack-xs, 8px));
}

.ux4g-tooltip.show[data-placement="left"] {
  transform: translateX(calc(-1 * var(--ux4g-stack-xs, 8px)));
}

.ux4g-tooltip.show[data-placement="right"] {
  transform: translateX(var(--ux4g-stack-xs, 8px));
}

.ux4g-tooltip-left-center::after,
.ux4g-tooltip[data-placement="left"]::after {
  left: var(--ux4g-pos-start-100, 100%);
  top: var(--ux4g-pos-top-50, 50%);
  transform: var(--ux4g-pos-translate-middle-y, translateY(-50%));
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent var(--ux4g-bg-neutral-stronger, #404040);
}

.ux4g-tooltip-right-center::after,
.ux4g-tooltip[data-placement="right"]::after {
  right: var(--ux4g-pos-end-100, 100%);
  top: var(--ux4g-pos-top-50, 50%);
  transform: var(--ux4g-pos-translate-middle-y, translateY(-50%));
  border-width: 6px 6px 6px 0;
  border-color: transparent var(--ux4g-bg-neutral-stronger, #404040) transparent transparent;
}

/* Icon Styles */
.ux4g-tooltip .ux4g-icon-outlined,
.ux4g-tooltip svg {
  font-size: var(--ux4g-fs-16, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 1;
  color: var(--ux4g-icon-neutral-inverse, #fafafa);
  fill: var(--ux4g-icon-neutral-inverse, #fafafa);
}
 /* ============================================================ UX4G TAB COMPONENT CSS Component: Tab / Horizontal ============================================================ */
 .ux4g-tab {
     display: inline-flex;
     flex-direction: column;
     width: 100%;
     font-family: var(--ux4g-ff);
 }

 .ux4g-tab-list {
     display: flex;
     align-items: flex-end;
     position: relative;
 }

 .ux4g-tab-item {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
     cursor: pointer;
     user-select: none;
     white-space: nowrap;
     color: var(--ux4g-text-neutral-secondary);
     --ux4g-fs-current: var(--ux4g-fs-14);
     --ux4g-lh-current: var(--ux4g-lh-20);
     --ux4g-fw-current: var(--ux4g-fw-regular);
 }

 .ux4g-tab-item:hover:not(.ux4g-tab-item-disabled) {
     color: var(--ux4g-text-neutral-primary);
 }

 .ux4g-tab-item.active {
     color: var(--ux4g-text-brand-primary-default);
 }

 .ux4g-tab-item-disabled {
     color: var(--ux4g-text-neutral-disabled);
     cursor: not-allowed;
     opacity: var(--ux4g-opacity-disabled);
     pointer-events: none;
 }

 .ux4g-tab-item:focus-visible {
    outline: var(--ux4g-outline-width-default) solid var(--ux4g-outline-color-focus);
    outline-offset: var(--ux4g-outline-offset-default);
    border-radius: var(--ux4g-radius-xs);
}

 /* More button */
 .ux4g-tab-more {
     position: relative;
     gap: var(--ux4g-inline-xs);
 }

 .ux4g-tab-more-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--ux4g-text-neutral-tertiary);
     flex-shrink: 0;
     transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .ux4g-tab-more.active .ux4g-tab-more-icon,
 .ux4g-tab-more:hover .ux4g-tab-more-icon {
     color: var(--ux4g-text-brand-primary-default);
 }

 /* ------------------------------------------------------- DROPDOWN — hidden by default, NO is-open needed in HTML ------------------------------------------------------- */
 .ux4g-tab-dropdown-list {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + var(--ux4g-inline-xs));
    right: 0;
    min-width: 140px;
    z-index: var(--ux4g-z-dropdown);
    transform-origin: top right;
}

 .ux4g-tab-dropdown-list.is-open {
     display: flex;
     animation: ux4g-dropdown-open 0.2s cubic-bezier(0, 0, 0.2, 1);
 }

 @keyframes ux4g-dropdown-open {
     from {
         opacity: 0;
         transform: scaleY(0.92) translateY(-4px);
     }

     to {
         opacity: 1;
         transform: scaleY(1) translateY(0);
     }
 }

 .ux4g-tab-dropdown-item.active {
     background-color: var(--ux4g-bg-neutral-emphasis);
 }

 /* Tab panel */
 .ux4g-tab-panel {
     display: none;
     padding: var(--ux4g-padding-m) 0;
     --ux4g-fs-current: var(--ux4g-fs-14);
     --ux4g-lh-current: var(--ux4g-lh-20);
     color: var(--ux4g-text-neutral-secondary);
 }

 .ux4g-tab-panel.active {
     display: block;
 }

 /* ── VARIANT: UNDERLINE ── */
 .ux4g-tab-underline .ux4g-tab-list {
     border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
 }

 .ux4g-tab-underline .ux4g-tab-item {
     position: relative;
     bottom: -1px;
     border-bottom: var(--ux4g-border-width-md) solid transparent;
     transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-bottom-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .ux4g-tab-underline .ux4g-tab-item.active {
     border-bottom-color: var(--ux4g-border-color-primary-strong);
 }

 .ux4g-tab-underline .ux4g-tab-item:hover:not(.active):not(.ux4g-tab-item-disabled) {
     border-bottom-color: var(--ux4g-border-color-neutral-strong);
 }

 /* ── VARIANT: PILL ── */
 .ux4g-tab-pill .ux4g-tab-list {
     gap: var(--ux4g-inline-s);
 }

 .ux4g-tab-pill .ux4g-tab-item {
     border-radius: var(--ux4g-radius-md);
     background: transparent;
 }

 .ux4g-tab-pill .ux4g-tab-item.active {
     background: var(--ux4g-bg-primary-soft);
     color: var(--ux4g-text-brand-primary-default);
     font-weight: var(--ux4g-fw-bold);
 }

 .ux4g-tab-pill .ux4g-tab-item:hover:not(.active):not(.ux4g-tab-item-disabled) {
     background: var(--ux4g-bg-neutral-soft);
     color: var(--ux4g-text-neutral-primary);
 }

 /* ── SIZE: SMALL ── */
 .ux4g-tab-sm .ux4g-tab-item {
    --ux4g-fs-current: var(--ux4g-fs-14);
    --ux4g-lh-current: var(--ux4g-lh-20);
    padding: 0 var(--ux4g-padding-xs);
    height: var(--ux4g-sz-s);
    gap: var(--ux4g-inline-s);
}

 .ux4g-tab-sm .ux4g-tab-more-icon svg {
    width: var(--ux4g-sz-14);
    height: var(--ux4g-sz-14);
}

 .ux4g-tab-sm .ux4g-tab-dropdown-item {
     --ux4g-fs-current: var(--ux4g-fs-12);
     --ux4g-lh-current: var(--ux4g-lh-16);
     padding: var(--ux4g-padding-2xs) var(--ux4g-padding-s);
 }

 /* ── SIZE: MEDIUM ── */
 .ux4g-tab-md .ux4g-tab-item {
    --ux4g-fs-current: var(--ux4g-fs-16);
    --ux4g-lh-current: var(--ux4g-lh-24);
    padding: 0 var(--ux4g-padding-l);
    height: var(--ux4g-sz-m);
    gap: var(--ux4g-inline-s);
}

 .ux4g-tab-md .ux4g-tab-more-icon svg {
    width: var(--ux4g-sz-16);
    height: var(--ux4g-sz-16);
}

 /* ── SIZE: LARGE ── */
 .ux4g-tab-lg .ux4g-tab-item {
    --ux4g-fs-current: var(--ux4g-fs-18);
    --ux4g-lh-current: var(--ux4g-lh-24);
    height: var(--ux4g-sz-l);
    padding: 0 var(--ux4g-padding-l);
    gap: var(--ux4g-inline-s);
}

 .ux4g-tab-lg .ux4g-tab-more-icon svg {
    width: var(--ux4g-sz-18);
    height: var(--ux4g-sz-18);
}

 .ux4g-tab-lg .ux4g-tab-dropdown-item {
     --ux4g-fs-current: var(--ux4g-fs-16);
     --ux4g-lh-current: var(--ux4g-lh-24);
     padding: var(--ux4g-padding-s) var(--ux4g-padding-l);
 }

 /* ============================================================ UX4G TAB COMPONENT CSS Component: Tab / Vertical (addendum — append after horizontal CSS) Usage: add .ux4g-tab-vertical alongside existing classes Example: <div class="ux4g-tab ux4g-tab-vertical ux4g-tab-underline ux4g-tab-md" data-ux4g-tab> <div class="ux4g-tab ux4g-tab-vertical ux4g-tab-pill ux4g-tab-lg" data-ux4g-tab> NOTE: No existing horizontal selectors are modified. ============================================================ */
 .ux4g-tab-vertical {
     flex-direction: row;
     align-items: flex-start;
     width: auto;
 }

 .ux4g-tab-vertical .ux4g-tab-list {
     flex-direction: column;
     align-items: stretch;
     border-bottom: none;
 }

 .ux4g-tab-vertical .ux4g-tab-item {
     justify-content: flex-start;
     width: 100%;
 }

 .ux4g-tab-vertical .ux4g-tab-panel {
     flex: 1;
     padding: 0 var(--ux4g-padding-xs);
 }

 .ux4g-tab-vertical.ux4g-tab-underline .ux4g-tab-list {
     border-bottom: none;
     border-left: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
 }

 .ux4g-tab-vertical.ux4g-tab-underline .ux4g-tab-item {
     bottom: 0;
     border-bottom: none;
     border-left: var(--ux4g-border-width-md) solid transparent;
     margin-left: -1px;
     transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-left-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .ux4g-tab-vertical.ux4g-tab-underline .ux4g-tab-item.active {
     border-left-color: var(--ux4g-border-color-primary-strong);
 }

 .ux4g-tab-vertical.ux4g-tab-underline .ux4g-tab-item:hover:not(.active):not(.ux4g-tab-item-disabled) {
     border-left-color: var(--ux4g-border-color-neutral-strong);
 }

 .ux4g-tab-vertical.ux4g-tab-pill .ux4g-tab-list {
     gap: var(--ux4g-inline-s);
 }

 .ux4g-tab-vertical.ux4g-tab-sm .ux4g-tab-item {
     padding: 0 var(--ux4g-padding-xs);
 }

 .ux4g-tab-vertical.ux4g-tab-md .ux4g-tab-item {
     padding: 0 var(--ux4g-padding-m);
 }

 .ux4g-tab-vertical.ux4g-tab-lg .ux4g-tab-item {
     padding: 0 var(--ux4g-padding-l);
 }

.ux4g-slider-field {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-xs);
}

.ux4g-slider-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ux4g-slider-label {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-xs);
  color: var(--ux4g-text-neutral-secondary);
  font-size: var(--ux4g-fs-12);
  line-height: var(--ux4g-lh-16);
  font-weight: var(--ux4g-fw-medium);
}

.ux4g-slider-field.ux4g-slider-md .ux4g-slider-label,
.ux4g-slider-md .ux4g-slider-label {
  font-size: var(--ux4g-fs-14);
  line-height: var(--ux4g-lh-18);
  font-weight: var(--ux4g-fw-medium);
}

.ux4g-slider-label-required {
  color: var(--ux4g-icon-status-error);
}

.ux4g-slider-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ux4g-fs-14);
  width: var(--ux4g-fs-14);
  height: var(--ux4g-fs-14);
  color: var(--ux4g-text-neutral-secondary) !important;
  cursor: help;
}

.ux4g-slider-field.ux4g-slider-md .ux4g-slider-label-icon,
.ux4g-slider-md .ux4g-slider-label-icon {
  font-size: var(--ux4g-fs-16);
  width: var(--ux4g-fs-16);
  height: var(--ux4g-fs-16);
}

.ux4g-slider-value-badge {
  font-size: var(--ux4g-fs-12);
  line-height: var(--ux4g-lh-16);
  font-weight: var(--ux4g-fw-semibold);
  color: var(--ux4g-text-neutral-primary);
  text-align: var(--ux4g-ta-end);
}

.ux4g-slider-field.ux4g-slider-md .ux4g-slider-value-badge,
.ux4g-slider-md .ux4g-slider-value-badge {
  font-size: var(--ux4g-fs-14);
  line-height: var(--ux4g-lh-20);
  font-weight: var(--ux4g-fw-semibold);
}

.ux4g-slider-range-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ux4g-slider-range-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
  border-radius: var(--ux4g-radius-md);
  padding: var(--ux4g-padding-none) var(--ux4g-padding-s);
  font-size: var(--ux4g-fs-14);
  line-height: var(--ux4g-lh-20);
  font-weight: var(--ux4g-fw-regular);
  color: var(--ux4g-text-neutral-primary);
  background: var(--ux4g-bg-neutral-elevated);
  min-width: var(--ux4g-sz-40);
  height: var(--ux4g-sz-s);
  text-align: var(--ux4g-ta-center);
  cursor: text;
  transition: border-color var(--ux4g-transition-duration-fast) var(--ux4g-transition-timing-ease),
    box-shadow var(--ux4g-transition-duration-fast) var(--ux4g-transition-timing-ease);
}

.ux4g-slider-range-box:hover {
  border-color: var(--ux4g-border-color-neutral-strong);
}

.ux4g-slider-range-box:focus {
  outline: none;
  border-color: var(--ux4g-border-color-primary-default);
  box-shadow: 0 0 0 var(--ux4g-inline-2xs) var(--ux4g-bg-primary-soft);
}

.ux4g-slider-field.ux4g-slider-md .ux4g-slider-range-box,
.ux4g-slider-md .ux4g-slider-range-box {
  font-size: var(--ux4g-fs-16);
  line-height: var(--ux4g-lh-24);
  height: var(--ux4g-sz-base);
  min-width: var(--ux4g-sz-52);
}

.ux4g-slider-description {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-xs);
  color: var(--ux4g-text-neutral-tertiary);
  font-size: var(--ux4g-fs-12);
  line-height: var(--ux4g-lh-16);
  font-weight: var(--ux4g-fw-regular);
}

.ux4g-slider-field.ux4g-slider-md .ux4g-slider-description,
.ux4g-slider-md .ux4g-slider-description {
  font-size: var(--ux4g-fs-14);
  line-height: var(--ux4g-lh-20);
}

.ux4g-slider-description .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-14);
  color: var(--ux4g-text-neutral-tertiary);
}

.ux4g-slider-field.ux4g-slider-md .ux4g-slider-description .ux4g-icon-outlined,
.ux4g-slider-md .ux4g-slider-description .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-16);
}

.ux4g-slider {
  position: var(--ux4g-pos-relative);
  width: 100%;
  display: flex;
  align-items: center;
  user-select: none;
  margin-bottom: var(--ux4g-margin-xl);
}

.ux4g-slider-track {
  position: var(--ux4g-pos-relative);
  width: 100%;
  background-color: var(--ux4g-bg-neutral-subtle);
  border-radius: var(--ux4g-radius-full);
}

.ux4g-slider-sm .ux4g-slider-track,
.ux4g-slider:not(.ux4g-slider-md) .ux4g-slider-track {
  height: var(--ux4g-stack-2xs);
}

.ux4g-slider-md .ux4g-slider-track {
  height: var(--ux4g-spacing-3);
}

.ux4g-slider-fill {
  position: var(--ux4g-pos-absolute);
  top: var(--ux4g-pos-top-0);
  left: var(--ux4g-pos-start-0);
  height: 100%;
  background-color: var(--ux4g-bg-primary-strong);
  border-radius: var(--ux4g-radius-full);
  pointer-events: none;
}

.ux4g-slider-thumb {
  position: var(--ux4g-pos-absolute);
  top: var(--ux4g-pos-top-50);
  transform: var(--ux4g-pos-translate-middle);
  background-color: var(--ux4g-bg-neutral-elevated);
  border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
  border-radius: var(--ux4g-radius-full);
  cursor: pointer;
  z-index: var(--ux4g-z-layout-overlay);
  transition: box-shadow var(--ux4g-transition-duration-fast) var(--ux4g-transition-timing-ease),
    border-color var(--ux4g-transition-duration-fast) var(--ux4g-transition-timing-ease),
    transform var(--ux4g-transition-duration-fast) var(--ux4g-transition-timing-ease);
  pointer-events: none;
}

.ux4g-slider-sm .ux4g-slider-thumb,
.ux4g-slider:not(.ux4g-slider-md) .ux4g-slider-thumb {
  width: var(--ux4g-padding-m);
  height: var(--ux4g-padding-m);
}

.ux4g-slider-md .ux4g-slider-thumb {
  width: var(--ux4g-sz-20);
  height: var(--ux4g-sz-20);
}

.ux4g-slider-input {
  position: var(--ux4g-pos-absolute);
  top: var(--ux4g-pos-top-50);
  left: var(--ux4g-pos-start-0);
  transform: var(--ux4g-pos-translate-middle-y);
  width: 100%;
  height: 100%;
  margin: var(--ux4g-margin-none);
  opacity: 0;
  cursor: pointer;
  z-index: var(--ux4g-z-layout-top);
  appearance: none;
  -webkit-appearance: none;
}

.ux4g-slider-dual .ux4g-slider-input {
  pointer-events: none;
}

.ux4g-slider-dual .ux4g-slider-input::-webkit-slider-thumb {
  pointer-events: all;
  appearance: none;
  width: var(--ux4g-sz-24);
  height: var(--ux4g-sz-24);
}

.ux4g-slider-dual .ux4g-slider-input::-moz-range-thumb {
  pointer-events: all;
  appearance: none;
  width: var(--ux4g-sz-24);
  height: var(--ux4g-sz-24);
}

.ux4g-slider-input:focus+.ux4g-slider-track .ux4g-slider-thumb,
.ux4g-slider-input:active+.ux4g-slider-track .ux4g-slider-thumb {
  box-shadow: 0 0 0 var(--ux4g-stack-2xs) var(--ux4g-bg-primary-soft);
  border-color: var(--ux4g-bg-primary-strong);
}

.ux4g-slider-input-min:focus~.ux4g-slider-track .ux4g-slider-thumb-min,
.ux4g-slider-input-min:active~.ux4g-slider-track .ux4g-slider-thumb-min,
.ux4g-slider-input-max:focus~.ux4g-slider-track .ux4g-slider-thumb-max,
.ux4g-slider-input-max:active~.ux4g-slider-track .ux4g-slider-thumb-max {
  box-shadow: 0 0 0 var(--ux4g-stack-2xs) var(--ux4g-bg-primary-soft);
  border-color: var(--ux4g-bg-primary-strong);
}

.ux4g-slider-dual .ux4g-slider-input:active,
.ux4g-slider-dual .ux4g-slider-input:focus {
  z-index: var(--ux4g-z-layout-top);
}

.ux4g-slider-steps {
  position: var(--ux4g-pos-absolute);
  top: var(--ux4g-pos-top-100);
  left: var(--ux4g-pos-start-0);
  width: 100%;
  pointer-events: none;
}

.ux4g-slider-step {
  position: var(--ux4g-pos-absolute);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: var(--ux4g-pos-translate-middle-x);
  top: var(--ux4g-stack-2xs);
}

.ux4g-slider-step-mark {
  width: var(--ux4g-border-width-sm);
  height: var(--ux4g-stack-2xs);
  background-color: var(--ux4g-border-color-neutral-strong);
  margin-bottom: var(--ux4g-stack-2xs);
}

.ux4g-slider-step-label {
  font-size: var(--ux4g-fs-11);
  line-height: var(--ux4g-lh-14);
  font-weight: var(--ux4g-fw-medium);
  color: var(--ux4g-text-neutral-tertiary);
}

.ux4g-slider-md .ux4g-slider-step-label {
  font-size: var(--ux4g-fs-12);
  line-height: var(--ux4g-lh-16);
}

.ux4g-slider-step.is-active .ux4g-slider-step-label {
  color: var(--ux4g-text-brand-primary-default);
  font-weight: var(--ux4g-fw-semibold);
}

.ux4g-slider-step.is-active .ux4g-slider-step-mark {
  background-color: var(--ux4g-bg-primary-emphasis);
}

/* Mobile only: apply mobile variant */
@media (max-width: 768px) {

  .ux4g-slider-field.ux4g-slider-sm .ux4g-slider-label,
  .ux4g-slider-sm .ux4g-slider-label {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-18);
    font-weight: var(--ux4g-fw-medium);
  }

  .ux4g-slider-field.ux4g-slider-sm .ux4g-slider-label-icon,
  .ux4g-slider-sm .ux4g-slider-label-icon {
    font-size: var(--ux4g-fs-16);
    width: var(--ux4g-fs-16);
    height: var(--ux4g-fs-16);
  }

  .ux4g-slider-field.ux4g-slider-sm .ux4g-slider-value-badge,
  .ux4g-slider-sm .ux4g-slider-value-badge {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-fw-semibold);
  }

  .ux4g-slider-field.ux4g-slider-sm .ux4g-slider-range-box,
  .ux4g-slider-sm .ux4g-slider-range-box {
    font-size: var(--ux4g-fs-16);
    line-height: var(--ux4g-lh-24);
    height: var(--ux4g-sz-base);
    min-width: var(--ux4g-sz-52);
  }

  .ux4g-slider-field.ux4g-slider-sm .ux4g-slider-description,
  .ux4g-slider-sm .ux4g-slider-description {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
  }

  .ux4g-slider-field.ux4g-slider-sm .ux4g-slider-description .ux4g-icon-outlined,
  .ux4g-slider-sm .ux4g-slider-description .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-16);
  }

  .ux4g-slider-sm .ux4g-slider-track,
  .ux4g-slider:not(.ux4g-slider-sm) .ux4g-slider-track {
    height: var(--ux4g-stack-2xs);
  }

  .ux4g-slider-sm .ux4g-slider-track {
    height: var(--ux4g-spacing-3);
  }

  .ux4g-slider-sm .ux4g-slider-thumb {
    width: var(--ux4g-sz-20);
    height: var(--ux4g-sz-20);
  }

  .ux4g-slider-sm .ux4g-slider-step-label {
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
  }

}
/* =========================================== UX4G ICON BUTTON — Base Styles =========================================== */
.ux4g-icon-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--ux4g-padding-xs, 8px);
    border-radius: var(--ux4g-radius-md);
    cursor: pointer;
    border: var(--ux4g-border-width-sm) solid transparent;
    outline: var(--ux4g-border-width-sm) transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, outline-color .15s ease, outline-offset .15s ease, transform .08s ease;
    gap: var(--ux4g-inline-none, 0);
    background-color: transparent;
    color: var(--ux4g-text-current, currentColor);
    flex-shrink: 0;
    box-sizing: border-box;
    
    /* Default Size - Medium (MD) 40x40 */
    width: var(--ux4g-sz-40);
    height: var(--ux4g-sz-40);
}

.ux4g-icon-btn ux4g-icon,
.ux4g-icon-btn i,
.ux4g-icon-btn svg {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Default Icon Size for MD */
    font-size: var(--ux4g-fs-18);
    width: var(--ux4g-fs-18);
    height: var(--ux4g-fs-18);
}

/* =========================================== UX4G ICON BUTTON — Shapes =========================================== */
.ux4g-icon-btn-pill {
    border-radius: var(--ux4g-radius-full);
}

/* =========================================== UX4G ICON BUTTON — Sizes =========================================== */
/* Size XL - 56x56 */
.ux4g-icon-btn-xl {
    width: var(--ux4g-sz-56, 56px);
    height: var(--ux4g-sz-56, 56px);
}

.ux4g-icon-btn-xl i,
.ux4g-icon-btn-xl ux4g-icon,
.ux4g-icon-btn-xl svg {
    font-size: var(--ux4g-fs-24);
    width: var(--ux4g-fs-24);
    height: var(--ux4g-fs-24);
}

/* Size LG - 48x48 */
.ux4g-icon-btn-lg {
    width: var(--ux4g-sz-48);
    height: var(--ux4g-sz-48);
}

.ux4g-icon-btn-lg i,
.ux4g-icon-btn-lg ux4g-icon,
.ux4g-icon-btn-lg svg {
    font-size: var(--ux4g-fs-20, 20px);
    width: var(--ux4g-fs-20, 20px);
    height: var(--ux4g-fs-20, 20px);
}

/* Size M - 40x40 (Matches default) */
.ux4g-icon-btn-md {
    width: var(--ux4g-sz-40);
    height: var(--ux4g-sz-40);
}

.ux4g-icon-btn-md i,
.ux4g-icon-btn-md ux4g-icon,
.ux4g-icon-btn-md svg {
    font-size: var(--ux4g-fs-18);
    width: var(--ux4g-fs-18);
    height: var(--ux4g-fs-18);
}

/* Size S - 32x32 */
.ux4g-icon-btn-sm {
    width: var(--ux4g-sz-32);
    height: var(--ux4g-sz-32);
}

.ux4g-icon-btn-sm i,
.ux4g-icon-btn-sm ux4g-icon,
.ux4g-icon-btn-sm svg {
    font-size: var(--ux4g-fs-16);
    width: var(--ux4g-fs-16);
    height: var(--ux4g-fs-16);
}

/* Size XS - 24x24 */
.ux4g-icon-btn-xs {
    width: var(--ux4g-sz-24);
    height: var(--ux4g-sz-24);
}

.ux4g-icon-btn-xs i,
.ux4g-icon-btn-xs ux4g-icon,
.ux4g-icon-btn-xs svg {
    font-size: var(--ux4g-fs-14);
    width: var(--ux4g-fs-14);
    height: var(--ux4g-fs-14);
}


/* FILLED PRIMARY */
.ux4g-icon-btn-primary {
    background-color: var(--ux4g-bg-primary-strong);
    --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}

.ux4g-icon-btn-primary:hover {
    background-color: var(--ux4g-bg-primary-strong-hover);
}

.ux4g-icon-btn-primary:active {
    background-color: var(--ux4g-bg-primary-stronger);
}

/* OUTLINE PRIMARY */
.ux4g-icon-btn-outline-primary {
    background-color: var(--ux4g-bg-neutral-elevated);
    --ux4g-text-current: var(--ux4g-text-brand-primary-default);
    border-color: var(--ux4g-border-color-primary-default);
}

.ux4g-icon-btn-outline-primary:hover {
    background-color: var(--ux4g-bg-primary-subtle);
}

.ux4g-icon-btn-outline-primary:active {
    background-color: var(--ux4g-bg-primary-emphasis);
    border-color: var(--ux4g-bg-primary-emphasis);
}

/* TONAL PRIMARY */
.ux4g-icon-btn-tonal-primary {
    background-color: var(--ux4g-bg-primary-soft);
    --ux4g-text-current: var(--ux4g-text-brand-primary-default);
}

.ux4g-icon-btn-tonal-primary:hover {
    background-color: var(--ux4g-bg-primary-subtle);
}

.ux4g-icon-btn-tonal-primary:active {
    background-color: var(--ux4g-bg-primary-emphasis);
}

/* STANDARD (Default) PRIMARY */
.ux4g-icon-btn-text-primary {
    background-color: transparent;
    --ux4g-text-current: var(--ux4g-text-brand-primary-default);
    border-color: transparent;
}

.ux4g-icon-btn-text-primary:hover {
    background-color: var(--ux4g-bg-primary-subtle);
}

.ux4g-icon-btn-text-primary:active {
    background-color: var(--ux4g-bg-primary-emphasis);
}



/* =========================================== Universal States =========================================== */
.ux4g-icon-btn:focus {
    outline: var(--ux4g-border-width-md) solid var(--ux4g-bg-primary-strong);
    outline-offset: 2px;
}

/* Base Disabled State */
.ux4g-icon-btn:disabled,
.ux4g-icon-btn[aria-disabled="true"] {
    --ux4g-text-current: var(--ux4g-text-neutral-disabled);
    pointer-events: none;
    opacity: 1;
    background-color: transparent;
    border-color: transparent;
}

/* Filled & Tonal Disabled Background */
.ux4g-icon-btn-primary:disabled,
.ux4g-icon-btn-primary[aria-disabled="true"],
.ux4g-icon-btn-tonal-primary:disabled,
.ux4g-icon-btn-tonal-primary[aria-disabled="true"] {
    background-color: var(--ux4g-bg-neutral-subtle);
}

/* Outline Disabled Border */
.ux4g-icon-btn-outline-primary:disabled,
.ux4g-icon-btn-outline-primary[aria-disabled="true"] {
    border-color: var(--ux4g-icon-border-disabled);
}

/* Default/Text Disabled (No Background/No Border) */
.ux4g-icon-btn-text-primary:disabled,
.ux4g-icon-btn-text-primary[aria-disabled="true"] {
    background-color: transparent;
    border-color: transparent;
}
/* stepper */
.ux4g-status-pipeline-steps,
.ux4g-status-pipeline-timeline,
.ux4g-status-pipeline-stepper {
    --ux4g-status-pipeline-steps-transition: height 0.2s ease-in-out;
    position: var(--ux4g-pos-relative);
    width: 100%;
    overflow: hidden;
    transition: var(--ux4g-status-pipeline-steps-transition)
}

.ux4g-status-pipeline-steps-step,
.ux4g-status-pipeline-timeline-step,
.ux4g-status-pipeline-vertical .ux4g-status-pipeline-step {
    width: 100%;
    height: fit-content;
    position: var(--ux4g-pos-relative)
}

.ux4g-status-pipeline-vertical .ux4g-status-pipeline-step:not(:last-child):after {
    top: 3.25rem;
    height: calc(100% - 2.45rem);
}

.ux4g-status-pipeline-steps-step-after,
.ux4g-status-pipeline-timeline-step:after,
.ux4g-status-pipeline-vertical .ux4g-status-pipeline-step:not(:last-child):after {
    position: var(--ux4g-pos-absolute);
    left: var(--ux4g-space-10);
    width: 1px;
    content: "";
}

.ux4g-status-pipeline-vertical .ux4g-status-pipeline-done:after {
    background-color: var(--ux4g-bg-primary-strong) !important;
}

.ux4g-status-pipeline-steps-content,
.ux4g-status-pipeline-timeline-content,
.ux4g-status-pipeline-vertical .ux4g-status-pipeline-content {
    padding-block: var(--ux4g-padding-xl);
    overflow: hidden;
    padding-top: var(--ux4g-padding-none);
    padding-bottom: var(--ux4g-padding-xl);
    padding-right: var(--ux4g-padding-xl)
}

.ux4g-status-pipeline-steps-head-vertical,
.ux4g-status-pipeline-timeline-head,
.ux4g-status-pipeline-vertical .ux4g-status-pipeline-head {
    padding: var(--ux4g-padding-xl) var(--ux4g-padding-xl) var(--ux4g-padding-xl) var(--ux4g-padding-none);
}

.ux4g-status-pipeline-steps-head-icon-vertical,
.ux4g-status-pipeline-timeline-head-icon,
.ux4g-status-pipeline-vertical .ux4g-status-pipeline-head-icon {
    margin-right: var(--ux4g-margin-s)
}

.ux4g-status-pipeline-steps-head-text-after-vertical,
.ux4g-status-pipeline-vertical .ux4g-status-pipeline-description:after {
    position: var(--ux4g-pos-absolute)
}

.ux4g-status-pipeline-steps-head,
.ux4g-status-pipeline-timeline-head,
.ux4g-status-pipeline-head {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-inline-s);
}

.ux4g-status-pipeline-steps-head-focus,
.ux4g-status-pipeline-head:focus {
    outline: none
}

.ux4g-status-pipeline-steps-head-text,
.ux4g-status-pipeline-timeline-head-text,
.ux4g-status-pipeline-description {
    color: var(--ux4g-text-neutral-tertiary);
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
    font-weight: var(--ux4g-font-weight-medium);
}

.ux4g-status-pipeline-steps-head-text-after,
.ux4g-status-pipeline-timeline-head-text:after,
.ux4g-status-pipeline-description:after {
    display: flex;
}

.ux4g-status-pipeline-steps-head-icon,
.ux4g-status-pipeline-timeline-head-icon,
.ux4g-status-pipeline-head-icon {
    font-size: var(--ux4g-fs-14);
    width: 40px;
    height: 40px;
    font-weight: var(--ux4g-fw-medium);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}


.ux4g-status-pipeline-step.ux4g-status-pipeline-horizontal .ux4g-status-pipeline-label,
.ux4g-status-pipeline-step.ux4g-status-pipeline-horizontal .ux4g-status-pipeline-label-success,
.ux4g-status-pipeline-step.ux4g-status-pipeline-horizontal .ux4g-status-pipeline-label-inprogress,
.ux4g-status-pipeline-step.ux4g-status-pipeline-horizontal .ux4g-label-l-default {
    margin-left: var(--ux4g-space-10);
}

.ux4g-status-pipeline-step .ux4g-status-pipeline-label {
    color: var(--ux4g-text-neutral-secondary);
    font-weight: var(--ux4g-fw-bold);
}
.ux4g-status-pipeline-step .ux4g-status-pipeline-status{
    font-weight: var(--ux4g-font-weight-regular);
}

.ux4g-status-pipeline-step .ux4g-status-pipeline-label-success {
    color: var(--ux4g-text-neutral-tertiary);
}

.ux4g-status-pipeline-step .ux4g-status-pipeline-label-inprogress {
    color: var(--ux4g-text-neutral-tertiary);
}

.ux4g-status-pipeline-step .ux4g-status-pipeline-label-success,
.ux4g-status-pipeline-step .ux4g-status-pipeline-label-inprogress {
    display: none;
}

.ux4g-status-pipeline-completed .ux4g-status-pipeline-label-success,
.ux4g-status-pipeline-completed .ux4g-status-pipeline-label-inprogress,
.ux4g-status-pipeline-vertical .ux4g-status-pipeline-label-success,
.ux4g-status-pipeline-vertical .ux4g-status-pipeline-label-inprogress {
    display: block !important;
}



.ux4g-status-pipeline-stepper:not(.ux4g-status-pipeline-vertical) {
    display: flex;
    justify-content: space-between
}

.ux4g-status-pipeline-stepper:not(.ux4g-status-pipeline-vertical) .ux4g-status-pipeline-content {
    position: var(--ux4g-pos-absolute);
    width: 100%;

}

.ux4g-status-pipeline-stepper:not(.ux4g-status-pipeline-vertical) .ux4g-status-pipeline-step {
    flex: auto;
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-s);
    position: var(--ux4g-pos-relative);
}


.ux4g-status-pipeline-stepper:not(.ux4g-status-pipeline-vertical):not(.ux4g-status-pipeline-center):not(.ux4g-status-pipeline-left):not(.ux4g-status-pipeline-bottom-line) .ux4g-status-pipeline-step:not(:last-child):after {
    height: 4px;
    flex: 1;
    content: "";
    background-color: var(--ux4g-bg-neutral-subtle);
}

.ux4g-status-pipeline-stepper:not(.ux4g-status-pipeline-vertical):not(.ux4g-status-pipeline-center):not(.ux4g-status-pipeline-left):not(.ux4g-status-pipeline-bottom-line) .ux4g-status-pipeline-step.ux4g-status-pipeline-done:not(:last-child):after {
    background-color: var(--ux4g-bg-success-strong) !important;
}


.ux4g-status-pipeline-vertical .ux4g-status-pipeline-step:not(:last-child):after {
    height: calc(100% - 2rem)
}

.ux4g-status-pipeline-vertical .ux4g-status-pipeline-content {
    padding-left: var(--ux4g-space-13);
}

.ux4g-status-pipeline-vertical .ux4g-status-pipeline-content-hide {
    margin-top: var(--ux4g-margin-none) !important;
    margin-bottom: var(--ux4g-margin-none) !important;
    padding-top: var(--ux4g-padding-none) !important;
    padding-bottom: var(--ux4g-padding-none) !important;
    height: 0 !important
}

.ux4g-status-pipeline-vertical .ux4g-status-pipeline-head {
    padding-bottom: var(--ux4g-padding-xl)
}

.ux4g-status-pipeline-stepper.ux4g-status-pipeline-mobile {
    justify-content: center;
    align-items: flex-end
}

.ux4g-status-pipeline-stepper.ux4g-status-pipeline-mobile.ux4g-status-pipeline-progress-bar .ux4g-status-pipeline-head-icon {
    display: none
}

.ux4g-status-pipeline-stepper.ux4g-status-pipeline-mobile .ux4g-status-pipeline-step {
    flex: unset;
    height: fit-content;
    margin-top: var(--ux4g-margin-m);
    margin-bottom: var(--ux4g-margin-m)
}

.ux4g-status-pipeline-stepper.ux4g-status-pipeline-mobile .ux4g-status-pipeline-step:not(:last-child):after {
    margin-left: var(--ux4g-margin-none)
}

.ux4g-status-pipeline-stepper.ux4g-status-pipeline-mobile .ux4g-status-pipeline-step:not(:last-child):not(:first-child) .ux4g-status-pipeline-head {
    padding-left: var(--ux4g-padding-2xs);
    padding-right: var(--ux4g-padding-2xs)
}

.ux4g-status-pipeline-stepper.ux4g-status-pipeline-mobile .ux4g-status-pipeline-head-icon {
    font-size: 0;
    margin: var(--ux4g-margin-none);
    height: 8px;
    width: 8px;
    z-index: var(--ux4g-z-layout-raised)
}

.ux4g-status-pipeline-stepper.ux4g-status-pipeline-mobile .ux4g-status-pipeline-description {
    display: none
}

.ux4g-status-pipeline-stepper.ux4g-status-pipeline-mobile .ux4g-status-pipeline-content {
    top: var(--ux4g-space-10)
}

.ux4g-status-pipeline-form {
    display: inherit;
    justify-content: inherit;
    width: inherit;
    position: inherit
}

.ux4g-status-pipeline-content {
    left: 0
}

.ux4g-status-pipeline-completed .ux4g-status-pipeline-head-icon {
    color: var(--ux4g-color-neutral-300);
    border: solid 2px var(--ux4g-bg-neutral-subtle);
}

.ux4g-status-pipeline-completed .ux4g-status-pipeline-warning {
    border-color: var(--ux4g-border-color-error-strong) !important;
    color: var(--ux4g-text-status-error);
}

.ux4g-status-pipeline-completed .ux4g-status-pipeline-warning-icon {
    border-color: var(--ux4g-border-color-error-strong) !important;
    color: var(--ux4g-icon-status-error);
}

.ux4g-status-pipeline-completed .ux4g-status-pipeline-warning .ux4g-status-pipeline-warning-icon,
.ux4g-status-pipeline-completed .ux4g-status-pipeline-warning .ux4g-status-pipeline-warning-icon {
    color: var(--ux4g-icon-status-error) !important;
}

.ux4g-status-pipeline-done .ux4g-status-pipeline-warning {
    border-color: var(--ux4g-bg-primary-strong) !important;
}

.ux4g-status-pipeline-done .ux4g-status-pipeline-warning .ux4g-status-pipeline-warning-icon {
    display: none;
}

.ux4g-status-pipeline-completed .ux4g-status-pipeline-head-icon .ux4g-status-pipeline-head-check {
    width: 16px;
    height: 16px;
    border-radius: var(--ux4g-radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ux4g-status-pipeline-completed span.ux4g-status-pipeline-head-icon-active {
    border-color: var(--ux4g-border-color-primary-strong);
    background-color: var(--ux4g-bg-primary-strong);
}

.ux4g-status-pipeline-completed span.ux4g-status-pipeline-head-check-active {
    background-color: var(--ux4g-bg-neutral) !important;
    font-size: 0;
}

.ux4g-status-pipeline-done .ux4g-status-pipeline-content {
    display: block
}

.ux4g-status-pipeline-done span.ux4g-status-pipeline-head-icon {
    background-color: var(--ux4g-bg-success-strong);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cmask id='mask0_2138_6182' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='21' height='20'%3E%3Crect x='0.5' width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2138_6182)'%3E%3Cpath d='M8.45825 15L3.70825 10.25L4.89575 9.06252L8.45825 12.625L16.1041 4.97919L17.2916 6.16669L8.45825 15Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 0;
    border-color: var(--ux4g-border-color-success-strong);
}

/* The horizontal done line is now placed on .ux4g-status-pipeline-step.ux4g-status-pipeline-done:not(:last-child):after */

.ux4g-status-pipeline-done .ux4g-status-pipeline-head-icon .ux4g-status-pipeline-head-check {
    display: none;
}

.ux4g-status-pipeline-disabled .ux4g-status-pipeline-head {
    cursor: default
}

.ux4g-status-pipeline-mobile-head {
    position: var(--ux4g-pos-absolute);
    align-self: normal;
    height: fit-content;

    width: 100%;
    padding-top: var(--ux4g-padding-xs);
    padding-right: var(--ux4g-padding-m);
    padding-bottom: var(--ux4g-padding-xs);
    padding-left: var(--ux4g-padding-xs)
}

.ux4g-status-pipeline-mobile-footer {
    position: var(--ux4g-pos-absolute);
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    height: 40px
}

.ux4g-status-pipeline-back-btn {
    display: block;
    left: var(--ux4g-pos-start-0)
}

.ux4g-status-pipeline-back-btn .btn-link {
    color: unset
}

.ux4g-status-pipeline-back-btn i {
    margin-right: var(--ux4g-margin-xs)
}

.ux4g-status-pipeline-next-btn {
    display: block;
    right: var(--ux4g-pos-end-0)
}

.ux4g-status-pipeline-next-btn .btn-link {
    color: unset
}

.ux4g-status-pipeline-next-btn i {
    margin-left: var(--ux4g-margin-xs)
}

.ux4g-status-pipeline-mobile-progress-bar {
    height: 4px;

    width: 0
}

.ux4g-status-pipeline-mobile-progress {
    height: 4px;
    flex-grow: 100;
}

/* ========================================================== Common Styles: Center & Left Aligned Steppers ========================================================== */
.ux4g-status-pipeline-stepper:is(.ux4g-status-pipeline-center, .ux4g-status-pipeline-left, .ux4g-status-pipeline-horizontal) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: var(--ux4g-padding-s);
    gap: var(--ux4g-inline-s);
}

:is(.ux4g-status-pipeline-center, .ux4g-status-pipeline-left) .ux4g-status-pipeline-step {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: var(--ux4g-pos-relative);
}

:is(.ux4g-status-pipeline-center, .ux4g-status-pipeline-left) .ux4g-status-pipeline-step:not(:last-child):after {
    content: "";
    position: var(--ux4g-pos-absolute);
    top: var(--ux4g-space-6);
    height: 4px;
    background-color: var(--ux4g-bg-neutral-subtle);
}

/* Small variant line alignment */
:is(.ux4g-status-pipeline-s, .ux4g-status-pipeline-small).ux4g-status-pipeline-center:not(.ux4g-status-pipeline-bottom-line) .ux4g-status-pipeline-step:not(:last-child):after {
    left: calc(50% + 18px) !important;
    right: calc(-50% - var(--ux4g-inline-s, 16px) + 18px) !important;
    width: auto !important;
    top: 8px !important;
}

:is(.ux4g-status-pipeline-s, .ux4g-status-pipeline-small).ux4g-status-pipeline-left .ux4g-status-pipeline-step:not(:last-child):after {
    left: 28px !important;
    right: calc(var(--ux4g-inline-s, 16px) * -1 + 8px) !important;
    width: auto !important;
    top: 8px !important;
}

:is(.ux4g-status-pipeline-center, .ux4g-status-pipeline-left) .ux4g-status-pipeline-step.ux4g-status-pipeline-done:not(:last-child):after {
    background-color: var(--ux4g-bg-success-strong) !important;
}

:is(.ux4g-status-pipeline-center, .ux4g-status-pipeline-left) .ux4g-status-pipeline-head:after {
    display: none !important;
}

:is(.ux4g-status-pipeline-center, .ux4g-status-pipeline-left) .ux4g-status-pipeline-head {
    display: flex;
    flex-direction: column;
    padding: var(--ux4g-padding-none);
}

/* :is(.ux4g-status-pipeline-center, .ux4g-status-pipeline-left) .ux4g-status-pipeline-head-icon {
    width: 40px;
    height: 40px;
    z-index: var(--ux4g-z-layout-overlay);
    display: flex;
    justify-content: center;
    align-items: center;
} */

.ux4g-status-pipeline-s .ux4g-status-pipeline-head-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: var(--ux4g-fs-11) !important;
}

.ux4g-status-pipeline-s .ux4g-status-pipeline-head-check {
    width: 10px !important;
    height: 10px !important;
}

.ux4g-status-pipeline-s .ux4g-status-pipeline-done span.ux4g-status-pipeline-head-icon {
    background-size: 12px !important;
}

/* Small variant line geometry adjustments */
.ux4g-status-pipeline-s.ux4g-status-pipeline-center .ux4g-status-pipeline-step:not(:last-child):after {
    left: calc(50% + 14px);
    width: calc(100% - 28px);
}

.ux4g-status-pipeline-s.ux4g-status-pipeline-left .ux4g-status-pipeline-step:not(:last-child):after {
    left: 28px;
    width: calc(100% - 32px);
}

:is(.ux4g-status-pipeline-center, .ux4g-status-pipeline-left) .ux4g-status-pipeline-label-success,
:is(.ux4g-status-pipeline-center, .ux4g-status-pipeline-left) .ux4g-status-pipeline-label-inprogress {
    display: block !important;
}

:is(.ux4g-status-pipeline-center, .ux4g-status-pipeline-left) .ux4g-label-l-default {
    margin: var(--ux4g-margin-none) !important;
}

/* ========================================================== Center Aligned Specific Adjustments ========================================================== */
.ux4g-status-pipeline-stepper.ux4g-status-pipeline-horizontal.ux4g-status-pipeline-center .ux4g-status-pipeline-step {
    align-items: center;
    text-align: center;
}

.ux4g-status-pipeline-center .ux4g-status-pipeline-head {
    align-items: center;
}

.ux4g-status-pipeline-center .ux4g-status-pipeline-step:not(:last-child):after {
    left: calc(50% + 24px);
    width: calc(100% - 40px);
}

/* ========================================================== Left Aligned Specific Adjustments ========================================================== */
.ux4g-status-pipeline-stepper.ux4g-status-pipeline-horizontal.ux4g-status-pipeline-left .ux4g-status-pipeline-step {
    align-items: flex-start;
    text-align: left;
}

.ux4g-status-pipeline-left .ux4g-status-pipeline-head {
    align-items: flex-start;
}

.ux4g-status-pipeline-left .ux4g-status-pipeline-step:not(:last-child):after {
    left: calc(32px + var(--ux4g-margin-m, 16px));
    width: calc(100% - 28px - var(--ux4g-margin-l, 24px));
}

/* ========================================================== Bottom Line Variant (.ux4g-status-pipeline-bottom-line) Combine with .ux4g-status-pipeline-center ========================================================== */
.ux4g-status-pipeline-bottom-line {
    gap: var(--ux4g-space-6);
}

.ux4g-status-pipeline-bottom-line li {
    padding-block-start: var(--ux4g-padding-xs);
}

.ux4g-status-pipeline-bottom-line-fill .ux4g-status-pipeline-done {
    background-color: var(--ux4g-bg-neutral);
}

.ux4g-status-pipeline-bottom-line-fill .ux4g-status-pipeline-inprogress {
    background-color: var(--ux4g-bg-primary);
}

.ux4g-status-pipeline-stepper.ux4g-status-pipeline-bottom-line .ux4g-status-pipeline-step::after,
.ux4g-status-pipeline-stepper.ux4g-status-pipeline-bottom-line .ux4g-status-pipeline-step:last-child::after {
    content: "";
    position: static;
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--ux4g-bg-neutral-subtle);
    margin: var(--ux4g-margin-xs, 12px) 0 0 0;
}

.ux4g-status-pipeline-stepper.ux4g-status-pipeline-bottom-line .ux4g-status-pipeline-step.ux4g-status-pipeline-done::after {
    background-color: var(--ux4g-bg-primary-strong) !important;
}

/* ========================================================== VERTICAL STEPPER (with CSS Grid) ========================================================== */
.ux4g-status-pipeline-vertical-o-lebel li {
    min-height: 70px;
}

.ux4g-status-pipeline-vertical-ld li {
    min-height: 70px;
}

.ux4g-status-pipeline-vertical-content-group {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs)
}

.ux4g-status-pipeline-vertical {
    display: flex;
    flex-direction: column;
    padding: var(--ux4g-padding-none);
    margin: var(--ux4g-margin-none);
}

.ux4g-status-pipeline-vertical .ux4g-status-pipeline-step {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--ux4g-margin-m, 16px);
    position: var(--ux4g-pos-relative);
    align-items: center;
}

.ux4g-status-pipeline-vertical .ux4g-status-pipeline-head {
    grid-column: 1;
    display: flex;
    align-items: flex-start;
    margin: var(--ux4g-margin-none) !important;
    padding: var(--ux4g-padding-none) !important;
}

.ux4g-status-pipeline-vertical .ux4g-status-pipeline-head-icon {
    width: 40px;
    height: 40px;
    margin: var(--ux4g-margin-none) !important;
    z-index: 2;
    background-color: var(--ux4g-bg-neutral);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ux4g-status-pipeline-vertical .ux4g-status-pipeline-step>span {
    grid-column: 2;
    margin-left: var(--ux4g-margin-none) !important;
}



.ux4g-status-pipeline-vertical .ux4g-status-pipeline-description {
    grid-row: 2;
}

.ux4g-status-pipeline-vertical .ux4g-status-pipeline-step>span:last-child {
    grid-row: 3;
}

.ux4g-status-pipeline-vertical .ux4g-status-pipeline-step:not(:last-child):after {
    content: "";
    position: var(--ux4g-pos-absolute);
    left: 18px;
    top: calc(50% + -20px);
    height: calc(100% - 0px);
    width: 4px;
    background-color: var(--ux4g-bg-neutral-subtle, #e0e0e0);
}

/* Color line when step is completed */
.ux4g-status-pipeline-vertical .ux4g-status-pipeline-step.ux4g-status-pipeline-done:not(:last-child):after {
    background-color: var(--ux4g-bg-success-strong) !important;
}

/* ========================================================== VERTICAL STEPPER (Small Variant : 24px) ========================================================== */
.ux4g-status-pipeline-vertical.ux4g-status-pipeline-s .ux4g-status-pipeline-step {
    grid-template-columns: 24px 1fr;
    column-gap: var(--ux4g-margin-m, 16px);
}

.ux4g-status-pipeline-vertical.ux4g-status-pipeline-s .ux4g-status-pipeline-head-icon {
    width: 24px !important;
    height: 24px !important;
}

/* Connecting Line (Small: 24px Icon) */
.ux4g-status-pipeline-vertical.ux4g-status-pipeline-s .ux4g-status-pipeline-step:not(:last-child):after {
    left: 10px;
    top: calc(50% + -14px);
    height: calc(100% - 0px);
}

/* ========================================================== PROGRESS STEPPER - CORE & UTILITIES ========================================================== */
.ux4g-status-pipeline-progress {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-space-4);
    width: 100%;
}

.ux4g-status-pipeline-progress-header {
    display: flex;
    align-items: center;
    gap: var(--ux4g-space-12);
    width: 100%;
}

/* Track and Segments */
.ux4g-status-pipeline-progress-track {
    display: flex;
    flex: 1;
    gap: var(--ux4g-space-6);
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
}

.ux4g-status-pipeline-progress-segment {
    height: 12px;
    flex: 1;
    background-color: var(--ux4g-bg-neutral-subtle);
    border-radius: var(--ux4g-radius-full);
    transition: background-color 0.3s ease;
}

.ux4g-status-pipeline-progress-segment-active {
    background-color: var(--ux4g-bg-primary-strong);
}

/* Action Buttons */
.ux4g-status-pipeline-progress-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ux4g-radius-full);
    border: 1px solid var(--ux4g-bg-primary-strong);
    background-color: transparent;
    cursor: pointer;
    flex-shrink: 0;
    padding: var(--ux4g-padding-xs);
    transition: all 0.2s ease;
}

.ux4g-status-pipeline-progress-btn,
.ux4g-status-pipeline-progress-btn .ux4g-icon-outlined {
    color: var(--ux4g-text-brand-primary-default);
    font-size: var(--ux4g-fs-20) !important;
}

.ux4g-status-pipeline-progress-btn:disabled,
.ux4g-status-pipeline-progress-btn.ux4g-disabled {
    border-color: var(--ux4g-bg-neutral-subtle);
    color: var(--ux4g-text-neutral-disabled);
    cursor: default;
}

.ux4g-status-pipeline-progress-btn:disabled .ux4g-icon-outlined,
.ux4g-status-pipeline-progress-btn.ux4g-disabled .ux4g-icon-outlined {
    color: var(--ux4g-text-neutral-disabled) !important;
}

/* Typography Strings */
.ux4g-status-pipeline-progress-count {
    font-size: var(--ux4g-fs-16);
    font-weight: var(--ux4g-fw-bold);
    color: var(--ux4g-text-neutral-primary);
    display: block;
    margin-bottom: var(--ux4g-margin-s);
}

.ux4g-status-pipeline-progress-label {
    font-size: var(--ux4g-fs-16);
    font-weight: var(--ux4g-fw-semibold);
    color: var(--ux4g-text-brand-primary-default);
    display: block;
}

.ux4g-status-pipeline-progress-desc {
    font-size: var(--ux4g-fs-16);
    font-weight: var(--ux4g-fw-regular);
    color: var(--ux4g-text-neutral-tertiary);
    display: block;
    margin-top: var(--ux4g-margin-2xs);
}

/* Helper Utilities for Alignment Variants */
.ux4g-status-pipeline-progress-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ux4g-status-pipeline-progress-split.ux4g-align-end {
    align-items: flex-end;
}

.ux4g-status-pipeline-progress-text-right {
    text-align: var(--ux4g-ta-end);
}

.ux4g-status-pipeline-progress-text-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ux4g-status-pipeline-progress-actions-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--ux4g-margin-xs);
}

.ux4g-status-pipeline-progress-actions-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--ux4g-space-7);
    margin-bottom: var(--ux4g-margin-xs);
}

.ux4g-status-pipeline-progress-controls-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.ux4g-status-pipeline-progress-btn-group {
    display: flex;
    gap: var(--ux4g-space-8);
}

/* Overrides */
.ux4g-status-pipeline-progress .ux4g-mb-none {
    margin-bottom: var(--ux4g-margin-none) !important;
}

/* stepper status */
.ux4g-status-pipeline-step-pending .ux4g-status-pipeline-label,
.ux4g-status-pipeline-step-pending .ux4g-status-pipeline-description,
.ux4g-status-pipeline-step-pending .ux4g-status-pipeline-status {
    color: var(--ux4g-text-neutral-disabled);
}

/* ========================================================== FIX 2: RESPONSIVE MEDIA QUERY FOR MOBILE ========================================================== */
@media (max-width: 768px) {
    .ux4g-status-pipeline-progress-segment {
        height: 6px;
    }

    .ux4g-status-pipeline-progress-track {
        gap: var(--ux4g-space-4);
    }

    .ux4g-status-pipeline-progress-split {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--ux4g-space-8);
    }

    .ux4g-status-pipeline-progress-text-right {
        text-align: left;
    }

    .ux4g-status-pipeline-progress-controls-end {
        align-items: flex-start;
    }

    .ux4g-status-pipeline-progress-actions-between {
        flex-wrap: wrap;
        gap: var(--ux4g-space-8);
    }

    .ux4g-status-pipeline-progress-header {
        gap: var(--ux4g-space-8) !important;
    }

    .ux4g-status-pipeline-horizontal .ux4g-status-pipeline-head {
        flex: 1;
    }

    /* Responsive sizing for stepper on mobile */
    .ux4g-status-pipeline-stepper .ux4g-status-pipeline-head-icon {
        width: 20px !important;
        height: 20px !important;
        font-size: var(--ux4g-fs-11);
    }
    
    .ux4g-status-pipeline-stepper .ux4g-status-pipeline-head-check {
        width: 10px !important;
        height: 10px !important;
    }

    .ux4g-status-pipeline-step,
    .ux4g-status-pipeline-head {
        min-width: 0;
        word-break: break-word;
    }

    .ux4g-status-pipeline-stepper .ux4g-status-pipeline-done span.ux4g-status-pipeline-head-icon,
    .ux4g-status-pipeline-stepper .ux4g-status-pipeline-completed span.ux4g-status-pipeline-head-check-active {
        font-size: 0 !important;
    }

    .ux4g-status-pipeline-stepper .ux4g-status-pipeline-done span.ux4g-status-pipeline-head-icon {
        background-size: 12px !important;
    }

    /* Convert default horizontal to stacked on mobile */
    .ux4g-status-pipeline-stepper:not(.ux4g-status-pipeline-vertical):not(.ux4g-status-pipeline-center):not(.ux4g-status-pipeline-left):not(.ux4g-status-pipeline-bottom-line) .ux4g-status-pipeline-step {
        flex-direction: column;
        align-items: flex-start;
        position: var(--ux4g-pos-relative);
    }

    .ux4g-status-pipeline-stepper:not(.ux4g-status-pipeline-vertical):not(.ux4g-status-pipeline-center):not(.ux4g-status-pipeline-bottom-line) .ux4g-status-pipeline-step:not(:last-child):after {
        position: var(--ux4g-pos-absolute) !important;
        left: 28px !important;
        right: calc(var(--ux4g-inline-s, 16px) * -1 + 8px) !important;
        width: auto !important;
        top: 8px !important;
    }

    .ux4g-status-pipeline-center:not(.ux4g-status-pipeline-bottom-line) .ux4g-status-pipeline-step:not(:last-child):after {
        left: calc(50% + 18px) !important;
        right: calc(-50% - var(--ux4g-inline-s, 16px) + 18px) !important;
        width: auto !important;
        top: 8px !important;
    }

    .ux4g-status-pipeline-left .ux4g-status-pipeline-step:not(:last-child):after {
        left: 28px !important;
        right: calc(var(--ux4g-inline-s, 16px) * -1 + 8px) !important;
        width: auto !important;
        top: 8px !important;
    }

    /* Vertical stepper adjustment on mobile */
    .ux4g-status-pipeline-vertical .ux4g-status-pipeline-step {
        grid-template-columns: 20px 1fr !important;
    }

    .ux4g-status-pipeline-vertical .ux4g-status-pipeline-step:not(:last-child):after {
        left: 8px !important;
        top: calc(50% + -15px) !important;
    }
}

/* stepper end */
/* ==========================================================================
   DATE PICKER COMPONENT
   ========================================================================== */

.ux4g-date-picker-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

.ux4g-date-picker-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ux4g-date-picker-input {
    width: 100%;
    padding: var(--ux4g-padding-s) var(--ux4g-space-10) var(--ux4g-padding-s) var(--ux4g-padding-m);
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    color: var(--ux4g-bg-primary-stronger);
    background: var(--ux4g-bg-neutral-elevated);
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    height: 40px;
}



.ux4g-date-picker-icon {
    position: absolute;
    right: 12px;
    color: var(--ux4g-bg-primary-strong);
    pointer-events: none;
}

/* Dropdown / Calendar */
.ux4g-date-picker-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: var(--ux4g-bg-neutral-elevated);
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-lg);
    box-shadow: var(--ux4g-shadow-l2);
    z-index: 1000;
    display: none;
}

.ux4g-date-picker-dropdown.is-open {
    display: block;
    animation: ux4g-fade-in-up 0.2s ease-out;
}

@keyframes ux4g-fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header */
.ux4g-date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ux4g-padding-m);
    border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle);
}

.ux4g-date-picker-nav-btn {
    background: transparent;
    border: none;
    padding: var(--ux4g-padding-2xs);
    cursor: pointer;
    color: var(--ux4g-bg-primary-stronger);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ux4g-radius-2);
    transition: background-color 0.2s;
}

.ux4g-date-picker-nav-btn:hover {
    background: var(--ux4g-color-neutral-100);
}

.ux4g-date-picker-current {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: var(--ux4g-fw-semibold);
    font-size: 14px;
    color: var(--ux4g-bg-primary-strong);
    cursor: pointer;
}

/* Calendar Grid */
.ux4g-date-picker-calendar {
    padding: var(--ux4g-padding-s);
}

.ux4g-date-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: var(--ux4g-margin-xs);
}

.ux4g-date-picker-weekday {
    text-align: center;
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-18);
    color: var(--ux4g-text-neutral-secondary);
    font-weight: var(--ux4g-font-weight-bold);
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ux4g-date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 0;
}

.ux4g-date-picker-day {
    position: relative;
    height: 50px;
    /* width: 50px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-font-weight-regular);
    cursor: pointer;
    border-radius: var(--ux4g-radius-4);
    transition: background-color 0.2s, color 0.2s;
    color: var(--ux4g-text-neutral-primary);
    z-index: 1;
}

.ux4g-date-picker-day:hover:not(.is-empty) {
    background: var(--ux4g-color-neutral-100);
}

.ux4g-date-picker-day.is-muted {
    color: var(--ux4g-text-neutral-emphasis);
}

.ux4g-date-picker-day.is-today::after {
    content: '';
    position: absolute;
    bottom: 6px;
    width: 4px;
    height: 4px;
    background: var(--ux4g-bg-primary-strong);
    border-radius: var(--ux4g-radius-circular);
}

.ux4g-date-picker-day.is-selected {
    background: var(--ux4g-bg-primary-strong) !important;
    color: var(--ux4g-text-white) !important;
}

/* Range Styles */
.ux4g-date-picker-day.is-in-range {
    border-radius: var(--ux4g-radius-0);
    background: var(--ux4g-bg-primary);
    color: var(--ux4g-bg-primary-strong);
}

.ux4g-date-picker-day.is-range-start {
    border-radius: var(--ux4g-radius-4) 0 0 var(--ux4g-radius-4);
    background: var(--ux4g-bg-primary-strong) !important;
    color: var(--ux4g-text-white) !important;
}

.ux4g-date-picker-day.is-range-end {
    border-radius: 0 var(--ux4g-radius-4) var(--ux4g-radius-4) 0;
    background: var(--ux4g-bg-primary-strong) !important;
    color: var(--ux4g-text-white) !important;
}

/* Footer */
.ux4g-date-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between Cancel and Confirm */
    gap: var(--ux4g-inline-m);
    padding: var(--ux4g-padding-m);
    border-top: 1px solid var(--ux4g-border-color-neutral-subtle);
}
.ux4g-date-picker-footer .ux4g-btn-outline-neutral{
    border-radius: var(--ux4g-radius-md);
    border: solid 1px var(--ux4g-border-color-neutral-default);
    color: var(--ux4g-text-neutral-primary);
}

.ux4g-date-picker-footer button {
    width: 100%;
    font-weight: var(--ux4g-fw-semibold);
}

.ux4g-date-picker-footer .ux4g-btn-primary:not(:disabled) {
    background-color: var(--ux4g-bg-primary-strong);
    border-color: var(--ux4g-bg-primary-strong);
    color: var(--ux4g-text-white);
    opacity: 1;
}

.ux4g-date-picker-footer .ux4g-btn-primary:disabled {
    background-color: var(--ux4g-color-neutral-100);
    border-color: var(--ux4g-color-neutral-100);
    color: var(--ux4g-text-neutral-emphasis);
    cursor: not-allowed;
}

/* Range Picker Layout */
.ux4g-date-range-picker {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-s);
    position: relative;
}

.ux4g-date-range-separator {
    color: var(--ux4g-text-neutral-tertiary);
    font-weight: var(--ux4g-fw-medium);
}


.ux4g-date-picker-nav-btn .ux4g-icon-outlined{
    font-size: var(--ux4g-fs-24);
}

/* Mobile BottomSheet Styles */
@media (max-width: 576px) {
    .ux4g-date-picker-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: var(--ux4g-radius-xl) var(--ux4g-radius-xl) 0 0;
        border: none;
        animation: ux4g-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .ux4g-date-picker-dropdown.is-open {
        display: block;
    }

    /* Add a drag handle visual */
    .ux4g-date-picker-dropdown::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--ux4g-border-color-neutral-subtle);
        border-radius: var(--ux4g-radius-xs);
        margin: var(--ux4g-margin-s) auto 0;
    }

    .ux4g-date-picker-header {
        padding-top: var(--ux4g-padding-s);
    }

    .ux4g-date-picker-day {
        height: 48px; 
    }
}

/* Backdrop */
.ux4g-date-picker-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    display: none;
    backdrop-filter: blur(2px);
    animation: ux4g-fade-in 0.2s ease;
}

.ux4g-date-picker-backdrop.is-active {
    display: block;
}

@keyframes ux4g-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes ux4g-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Selection View (Years & Months) */
.ux4g-date-picker-selection-view {
    padding: var(--ux4g-padding-s);
}

.ux4g-date-picker-year-grid,
.ux4g-date-picker-month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ux4g-inline-s);
    margin-bottom: var(--ux4g-margin-m);
}

.ux4g-date-picker-month-grid {
    margin-bottom: 0;
    border-top: 1px solid var(--ux4g-border-color-neutral-subtle);
    padding-top: var(--ux4g-padding-m);
}

.ux4g-date-picker-year-item,
.ux4g-date-picker-month-item {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ux4g-fs-14);
    border-radius: var(--ux4g-radius-md);
    cursor: pointer;
    color: var(--ux4g-text-neutral-primary);
    transition: background-color 0.2s;
}

.ux4g-date-picker-year-item:hover,
.ux4g-date-picker-month-item:hover {
    background: var(--ux4g-color-neutral-100);
}

.ux4g-date-picker-year-item.is-selected,
.ux4g-date-picker-month-item.is-selected {
    background: var(--ux4g-bg-primary) !important;
    color: var(--ux4g-bg-primary-strong) !important;
    font-weight: var(--ux4g-fw-semibold);
}

/* ==========================================================================
   TIME PICKER COMPONENT
   ========================================================================== */

.ux4g-time-picker-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.ux4g-time-picker-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ux4g-time-picker-input {
    width: 100%;
    padding: var(--ux4g-padding-s) var(--ux4g-space-10) var(--ux4g-padding-s) var(--ux4g-padding-m);
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    color: var(--ux4g-bg-primary-stronger);
    background: var(--ux4g-bg-neutral-elevated);
    cursor: pointer;
    height: 40px;
}

.ux4g-time-picker-icon {
    position: absolute;
    right: 12px;
    color: var(--ux4g-bg-primary-strong);
    pointer-events: none;
}

.ux4g-time-picker-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 200px;
    background: var(--ux4g-bg-neutral-elevated);
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-lg);
    box-shadow: var(--ux4g-shadow-l2);
    z-index: 1000;
    display: none;
    flex-direction: column;
}

.ux4g-time-picker-dropdown.is-open {
    display: flex;
    animation: ux4g-fade-in-up 0.2s ease-out;
}

/* AM/PM Toggle */
.ux4g-time-picker-ampm {
    display: flex;
    padding: 8px;
    gap: 4px;
    border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle);
}

.ux4g-time-picker-ampm-btn {
    flex: 1;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ux4g-fs-12);
    font-weight: var(--ux4g-fw-semibold);
    border-radius: var(--ux4g-radius-xs);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-time-picker-ampm-btn.is-active {
    background: var(--ux4g-bg-primary);
    color: var(--ux4g-bg-primary-strong);
}

/* Columns */
.ux4g-time-picker-body {
    display: flex;
    height: 240px;
}

.ux4g-time-picker-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
    border-right: 1px solid var(--ux4g-border-color-neutral-subtle);
}

.ux4g-time-picker-column::-webkit-scrollbar {
    display: none;
}

.ux4g-time-picker-column:last-child {
    border-right: none;
}

.ux4g-time-picker-col-header {
    position: sticky;
    top: 0;
    background: var(--ux4g-bg-neutral-elevated);
    text-align: center;
    padding: var(--ux4g-padding-xs) 0;
    font-size: var(--ux4g-fs-12);
    font-weight: var(--ux4g-fw-bold);
    color: var(--ux4g-text-neutral-tertiary);
    border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle);
    z-index: 10;
}

.ux4g-time-picker-item {
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ux4g-fs-14);
    cursor: pointer;
    transition: background-color 0.2s;
    color: var(--ux4g-text-neutral-primary);
}

.ux4g-time-picker-item:hover {
    background: var(--ux4g-color-neutral-100);
}

.ux4g-time-picker-item.is-selected {
    background: var(--ux4g-bg-primary);
    color: var(--ux4g-bg-primary-strong);
    font-weight: var(--ux4g-fw-semibold);
}
.ux4g-time-picker-footer{
    flex-direction: column;
}
/* Keyboard accessibility focus outlines */
.ux4g-date-picker-day:focus,
.ux4g-date-picker-year-item:focus,
.ux4g-date-picker-month-item:focus,
.ux4g-time-picker-item:focus,
.ux4g-time-picker-ampm-btn:focus,
.ux4g-date-picker-nav-btn:focus,
.ux4g-date-picker-current:focus {
    outline: 2px solid var(--ux4g-bg-primary-strong);
    outline-offset: -2px;
}


/* Mobile responsive */
@media (max-width: 576px) {
    .ux4g-time-picker-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: var(--ux4g-radius-xl) var(--ux4g-radius-xl) 0 0;
        height: auto;
        max-height: 80vh;
    }

    .ux4g-time-picker-body {
        height: 300px;
    }

    /* Change to side AM/PM for mobile as per screenshot */
    .ux4g-time-picker-dropdown {
        display: none; /* Reset for flex */
    }
    
    .ux4g-time-picker-dropdown.is-open {
        display: grid;
        grid-template-columns: 1fr 1fr 80px;
        grid-template-rows: auto 1fr auto;
    }

    .ux4g-time-picker-ampm {
        grid-column: 3;
        grid-row: 2;
        flex-direction: column;
        border-bottom: none;
        border-left: 1px solid var(--ux4g-border-color-neutral-subtle);
        padding: var(--ux4g-padding-m) var(--ux4g-padding-xs);
    }

    .ux4g-time-picker-body {
        grid-column: 1 / span 2;
        grid-row: 2;
        height: 300px;
    }

    .ux4g-time-picker-footer {
        grid-column: 1 / span 3;
        grid-row: 3;
    }
}


.ux4g-social-link {
    width: var(--ux4g-sz-20);
    height: var(--ux4g-sz-20);
    cursor: pointer;
}


.ux4g-social-link-light li,
.ux4g-social-link-dark li,
.ux4g-social-link-default li {
    list-style: none;
}
/* Journey Timeline Component */
.journey-timeline-card {
    border-radius: var(--ux4g-radius-lg);
    border: var(--ux4g-border-thin) solid var(--ux4g-border-color-neutral-default);
    background: var(--ux4g-bg-neutral-elevated);
    padding: var(--ux4g-padding-l);
    gap: var(--ux4g-stack-xl);
    flex-direction: column;
    min-height: var(--ux4g-sz-80);
}


.journey-timeline-title .journey-timeline-description {
    color: var(--ux4g-text-neutral-secondary);
}


.ux4g-journey-header-icon {
    width: var(--ux4g-sz-24);
    height: var(--ux4g-sz-24);
    color: var(--ux4g-text-neutral-tertiary);
}

/* Timeline Base */
.ux4g-journey-timeline {
    position: var(--ux4g-pos-relative);
    display: flex;
    flex-direction: column;
}

/* Vertical Timeline */
.ux4g-journey-timeline--vertical {
    gap: var(--ux4g-space-1);
}

.ux4g-journey-step {
    position: var(--ux4g-pos-relative);
    display: flex;
    gap: var(--ux4g-inline-m);
    gap: var(--ux4g-stack-m);
    padding-bottom: var(--ux4g-padding-xl);
}

.ux4g-journey-step:last-child {
    padding-bottom: var(--ux4g-padding-none);
}

/* Indicator and Connector */
.ux4g-journey-indicator {
    width: var(--ux4g-sz-24);
    height: var(--ux4g-sz-24);
    min-width: var(--ux4g-sz-24);
    min-height: var(--ux4g-sz-24);
    border-radius: var(--ux4g-radius-full);
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-thick) solid var(--ux4g-border-color-neutral-default);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
    position: var(--ux4g-pos-relative);
    margin-top: var(--ux4g-sz-24);
    color: transparent;
    transition: all 0.3s ease;
}

.ux4g-journey-indicator::after {
    content: "";
    position: var(--ux4g-pos-absolute);
    width: var(--ux4g-sz-10);
    height: var(--ux4g-sz-10);
    border-radius: var(--ux4g-radius-full);
    background-color: var(--ux4g-text-neutral-disabled);

}
.ux4g-journey-step-completed .ux4g-journey-indicator::after {
    display: none;

}

/* .ux4g-journey-indicator svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
} */
 .ux4g-journey-indicator .ux4g-icon-outlined{
color: currentColor;
 }
 .ux4g-journey-indicator .ux4g-icon-outlined{
display: none;
 }
 .ux4g-journey-step-completed .ux4g-journey-indicator .ux4g-icon-outlined{
display:  block !important;
 }

.ux4g-journey-timeline--vertical .ux4g-journey-step:not(:last-child)::after {
    content: "";
    position: var(--ux4g-pos-absolute);
    left: var(--ux4g-sz-10, 10px); /* Center 4px line behind 24px indicator */
    top: calc(var(--ux4g-sz-24) + var(--ux4g-sz-24));
    bottom: calc(var(--ux4g-sz-24) * -1);
    width: 4px;
    background-color: var(--ux4g-border-color-neutral-default);
    z-index: 1;
}

/* Card Styles */
.ux4g-journey-card {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: var(--ux4g-padding-l);
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-thin) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-lg);
    transition: all 0.3s ease;
}


.ux4g-journey-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--ux4g-stack-s);
}

/* VARIATION: Standard (Stacked Layout) */
.ux4g-journey-card--standard .ux4g-journey-info {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
}

/* Child 1: Date */
.ux4g-journey-card--standard .ux4g-journey-info > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

/* Child 2: Title and Description container */
.ux4g-journey-card--standard .ux4g-journey-info > :nth-child(2) {
    grid-column: 1 / span 2;
    grid-row: 2;
    justify-self: start;
    text-align: var(--ux4g-ta-start, left);
    align-items: flex-start;
    margin: var(--ux4g-margin-none, 0);
}

/* Child 3: Tag */
.ux4g-journey-card--standard .ux4g-tag,
.ux4g-journey-card--standard [class*="ux4g-tag-"] {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

/* VARIATION: Condensed (2-row) */
.ux4g-journey-card--condensed {
    padding: var(--ux4g-padding-s) var(--ux4g-padding-m);
}

.ux4g-journey-card--condensed .ux4g-journey-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.ux4g-journey-card--condensed .ux4g-journey-title {
    margin: var(--ux4g-margin-none);
}

/* Common Typography */
.ux4g-journey-date {
    color: var(--ux4g-text-neutral-tertiary);
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-font-weight-semibold);
}

.ux4g-journey-title {

    color: var(--ux4g-text-neutral-primary);
    font-size: var(--ux4g-fs-16);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-font-weight-bold);
}

.ux4g-journey-description {
    font-size: var(--ux4g-fs-14);
    color: var(--ux4g-text-neutral-tertiary);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-font-weight-regular);
}

/* States */
/* Pending / Disabled State (Default) */
.ux4g-journey-step:not(.ux4g-journey-step-completed):not(.ux4g-journey-step-active) {
    pointer-events: none;
}
/* .ux4g-journey-step:not(.ux4g-journey-step-completed):not(.ux4g-journey-step-active) .ux4g-journey-title {
    color: var(--ux4g-text-neutral-tertiary);
} */

.ux4g-journey-step-completed .ux4g-journey-indicator {
    background-color: var(--ux4g-bg-primary-strong);
    border-color: var(--ux4g-border-color-primary-strong);
    color: var(--ux4g-color-neutral-0);
}

.ux4g-journey-step-completed:not(:last-child)::after {
    background-color: var(--ux4g-bg-primary-strong) !important;
}

/* Active State */
.ux4g-journey-step-active .ux4g-journey-indicator {
    background-color: var(--ux4g-bg-neutral-elevated);
    border-color: var(--ux4g-border-color-primary-strong);
    color: var(--ux4g-text-brand-primary-default);
    position: var(--ux4g-pos-relative);
}

.ux4g-journey-step-active .ux4g-journey-indicator::before {
    content: "";
    position: var(--ux4g-pos-absolute);
    width: var(--ux4g-sz-10);
    height: var(--ux4g-sz-10);
    border-radius: var(--ux4g-radius-full);
    background-color: var(--ux4g-bg-primary-strong);
}



/* Horizontal Timeline */
.ux4g-journey-timeline--horizontal {
    flex-direction: row;
    gap: var(--ux4g-spacing-none);
    align-items: center;
    padding: var(--ux4g-padding-none) var(--ux4g-padding-l);
}

.ux4g-journey-timeline--horizontal .ux4g-journey-step {
    flex: 1;
    flex-direction: column;
    padding-bottom: var(--ux4g-padding-none);
    gap: var(--ux4g-inline-s);
    align-items: flex-start;
}

.ux4g-journey-timeline--horizontal .ux4g-journey-step:last-child {
    flex: 0 0 auto;
}

.ux4g-journey-timeline--horizontal .ux4g-journey-indicator {
    margin-top: var(--ux4g-margin-none);
}

.ux4g-journey-timeline--horizontal .ux4g-journey-step:not(:last-child)::after {
    content: "";
    position: var(--ux4g-pos-absolute);
    left: calc(var(--ux4g-sz-24) + var(--ux4g-space-4));
    top: var(--ux4g-sz-10);
    width: calc(100% - var(--ux4g-sz-24) - (var(--ux4g-space-4) * 2));
    height: 4px;
    background-color: var(--ux4g-border-color-neutral-default);
    z-index: 1;
}

/* Status Group */
.ux4g-journey-status-group {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-s);
    margin-top: var(--ux4g-margin-xs);
}

.ux4g-journey-status {
    display: flex;
    padding: var(--ux4g-padding-2xs) var(--ux4g-padding-xs);
    align-items: center;
    gap: var(--ux4g-stack-xs);
    border-radius: var(--ux4g-radius-sm);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    background: var(--ux4g-bg-neutral-elevated);
}

.ux4g-journey-status-dot {
    width: var(--ux4g-sz-8);
    height: var(--ux4g-sz-8);
    min-width: var(--ux4g-sz-8);
    min-height: var(--ux4g-sz-8);
    border-radius: var(--ux4g-radius-full);
    margin-right: var(--ux4g-margin-xs);
    background-color: var(--ux4g-bg-neutral-default);
    flex-shrink: 0;
}

.ux4g-journey-status-dot--warning {
    background-color: var(--ux4g-bg-secondary-strong);
}


/* Responsive */
@media (max-width: 768px) {
    .ux4g-journey-card {
        padding: var(--ux4g-padding-m);
    }
    .ux4g-journey-card--standard .ux4g-journey-info {
        grid-template-columns: 1fr auto;
        row-gap: var(--ux4g-space-6);
        column-gap: var(--ux4g-space-4);
    }

    .ux4g-journey-card--standard .ux4g-journey-date {
        grid-column: 1;
        grid-row: 1;
    }

    .ux4g-journey-card--standard .ux4g-tag,
    .ux4g-journey-card--standard [class*="ux4g-tag-"] {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .ux4g-journey-card--standard .ux4g-journey-info> :nth-child(2),
    .ux4g-journey-card--standard .ux4g-journey-info> :nth-child(2):last-child {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
        text-align: var(--ux4g-ta-start);
        align-items: flex-start;
    }

    .ux4g-journey-timeline--horizontal {
        padding-inline: var(--ux4g-padding-none, 0); 
    }

    /* Align vertical timeline indicator with reduced card padding on mobile */
    .ux4g-journey-timeline--vertical .ux4g-journey-indicator {
        margin-top: var(--ux4g-padding-m);
    }
    .ux4g-journey-timeline--vertical .ux4g-journey-step:not(:last-child)::after {
        top: calc(var(--ux4g-padding-m) + var(--ux4g-sz-24));
        bottom: calc(var(--ux4g-padding-m) * -1);
    }
}
/* ==========================================================================
   TIME SLOT COMPONENT - WEEKLY GRID
   ========================================================================== */

.ux4g-time-slot-weekly-container {
    background: var(--ux4g-bg-neutral-elevated);
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-lg);
    padding: var(--ux4g-padding-xl);
}

.ux4g-time-slot-weekly-grid {
    display: grid;
    grid-template-columns: 80px repeat(7, minmax(120px, 1fr));
    gap: var(--ux4g-inline-s);

    padding-bottom: var(--ux4g-padding-m);
}

/* Time Column */
.ux4g-time-slot-time-col {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--ux4g-padding-s);
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-18);
    font-weight: var(--ux4g-font-weight-bold);
    color: var(--ux4g-text-neutral-secondary);
    position: sticky;
    left: 0;
    background: var(--ux4g-bg-neutral-elevated);
    z-index: 2;
}

/* Day Headers */
.ux4g-time-slot-day-header {
    background: var(--ux4g-bg-neutral-soft);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-s);
    text-align: center;
    display: flex;
    gap: var(--ux4g-inline-xs);
    flex-direction: column;
    justify-content: center;
    min-height: 60px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.ux4g-time-slot-time-col:first-child {
    z-index: 4;
    /* Top-left corner stays on top */
}

.ux4g-time-slot-day-header strong {
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-18);
    font-weight: var(--ux4g-font-weight-bold);
    ;
    color: var(--ux4g-text-neutral-primary);
}

.ux4g-time-slot-day-header span {
    font-size: var(--ux4g-fs-11);
    line-height: var(--ux4g-lh-14);
    font-weight: var(--ux4g-font-weight-medium);
    ;
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-time-slot-day-header.holiday {
    background: var(--ux4g-bg-warning);
}

.ux4g-time-slot-day-header.weekly-off {
    background: var(--ux4g-bg-neutral-soft);
}

/* Grid Cells */
.ux4g-time-slot-cell {
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-s) var(--ux4g-padding-m);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
    font-weight: var(--ux4g-font-weight-medium);
    ;
    color: var(--ux4g-text-neutral-tertiary);
    cursor: pointer;
    text-align: center;
    min-height: 60px;
}

/* Available */


/* Limited */
.ux4g-time-slot-cell.limited {
    color: var(--ux4g-color-orange-600);
}

/* Disabled / No slots */
.ux4g-time-slot-cell.disabled {
    background: var(--ux4g-bg-neutral-subtle);
    border-color: transparent;
    color: var(--ux4g-text-neutral-tertiary);
    cursor: not-allowed;
}

/* Public Holiday */
.ux4g-time-slot-cell.holiday {
    background: var(--ux4g-bg-warning);
    border-color: transparent;
    color: var(--ux4g-text-neutral-primary);
    cursor: default;
}

.ux4g-time-slot-cell.holiday strong {
    font-size: var(--ux4g-fs-12);
    font-weight: var(--ux4g-font-weight-bold);
}

/* Weekly Off */
.ux4g-time-slot-cell.weekly-off {
    background: var(--ux4g-bg-neutral-subtle);
    border-color: transparent;
    color: var(--ux4g-text-neutral-primary);
    cursor: default;
}

/* Selected */
.ux4g-time-slot-cell.selected {
    background: var(--ux4g-color-primary-50);
    border-color: var(--ux4g-bg-primary-strong);
    color: var(--ux4g-bg-primary-strong);
    font-weight: var(--ux4g-font-weight-bold);
    gap: var(--ux4g-inline-s);
    flex-direction: row;
    /* Icon and text inline */
}

.ux4g-time-slot-cell.selected .ux4g-icon-filled {
    color: var(--ux4g-bg-primary-strong);

}

.ux4g-time-slot-cell.selected .ux4g-icon-filled {
    font-size: 16px;
}

/* Footer Section */
.ux4g-time-slot-weekly-legend {
    display: flex;
    justify-content: flex-end;
    gap: var(--ux4g-stack-l);
    flex-wrap: wrap;
    margin-top: var(--ux4g-margin-xl);
    padding-bottom: var(--ux4g-padding-l);
    border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle);
}

.ux4g-time-slot-legend-item {
    display: flex;
    align-items: center;
    gap: var(--ux4g-space-8);
    font-size: var(--ux4g-fs-14);
    color: var(--ux4g-text-neutral-primary);
    font-weight: var(--ux4g-font-weight-regular);
}

/* Legend Boxes */
.ux4g-legend-box {
    width: 24px;
    height: 24px;
    border-radius: var(--ux4g-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ux4g-legend-box.bordered {
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    background: var(--ux4g-color-neutral-0);
}

.ux4g-legend-box.check-purple {
    border: 1px solid var(--ux4g-bg-primary-strong);
    background: var(--ux4g-color-primary-50);
    color: var(--ux4g-bg-primary-strong);
}

.ux4g-legend-box.check-purple .ux4g-icon-filled {
    font-size: 16px;
    color: var(--ux4g-text-brand-primary-default);
}

.ux4g-legend-box.disabled {
    background-color: var(--ux4g-color-neutral-200);
}

.ux4g-legend-box.border-yellow {
    border: 1px solid var(--ux4g-color-orange-500);
    background: var(--ux4g-color-neutral-0);
}

.ux4g-legend-box.holiday {
    background-color: var(--ux4g-color-yellow-50);
}

.ux4g-legend-box.weekly-off {
    background-color: var(--ux4g-color-neutral-200);
}

.ux4g-time-slot-weekly-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ux4g-inline-s);
    padding-block-start: var(--ux4g-padding-m);
}

.ux4g-time-slot-weekly-actions .ux4g-btn-outline-neutral {
    border-color: var(--ux4g-border-color-neutral-default);
    color: var(--ux4g-text-neutral-primary);
}

.ux4g-time-slot-weekly-actions .ux4g-btn {
    min-width: 140px;
}

/* Mobile-only styles */
.ux4g-time-slot-mobile-nav {
    display: none;
    /* Hidden on desktop */
}

.ux4g-time-slot-mobile-time {
    display: none;
    /* Hidden on desktop */
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .ux4g-time-slot-weekly-container {
        padding: var(--ux4g-padding-m);
        border: none;
        border-radius: 0;
    }

    .ux4g-time-slot-mobile-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: var(--ux4g-padding-m);
        border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle);
        margin-bottom: var(--ux4g-margin-l);
    }

    .ux4g-time-slot-mobile-date {
        text-align: center;
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .ux4g-time-slot-mobile-date strong {
        font-size: var(--ux4g-fs-18);
        color: var(--ux4g-text-neutral-primary);
    }

    .ux4g-time-slot-mobile-date span {
        font-size: var(--ux4g-fs-14);
        font-weight: var(--ux4g-font-weight-medium);
    }

    .ux4g-time-slot-weekly-grid {
        display: flex;
        flex-direction: column;
        gap: var(--ux4g-inline-l);
        height: 536px;
        overflow-y: auto;
        padding-inline: var(--ux4g-padding-xs);
    }

    /* Hide desktop headers and time column on mobile */
    .ux4g-time-slot-day-header,
    .ux4g-time-slot-time-col {
        display: none !important;
    }

    .ux4g-time-slot-cell {
        width: 100%;
        min-height: 72px;
        padding: var(--ux4g-padding-m);
        border: 1px solid var(--ux4g-border-color-neutral-subtle);
        border-radius: var(--ux4g-radius-md);
        flex-direction: column;
        justify-content: center;
        background: var(--ux4g-color-neutral-0);
    }

    .ux4g-time-slot-mobile-time {
        display: block;
        font-size: var(--ux4g-fs-14);
        font-weight: var(--ux4g-font-weight-bold);
        color: var(--ux4g-text-neutral-primary);
        margin-bottom: var(--ux4g-margin-xs);
    }

    .ux4g-time-slot-slots {
        font-size: var(--ux4g-fs-12);
        color: var(--ux4g-text-neutral-secondary);
    }

    /* Hide all cells by default on mobile, then show based on active day */
    .ux4g-time-slot-cell[data-day] {
        display: none !important;
    }

    .ux4g-time-slot-weekly-grid[data-active-day="0"] .ux4g-time-slot-cell[data-day="0"],
    .ux4g-time-slot-weekly-grid[data-active-day="1"] .ux4g-time-slot-cell[data-day="1"],
    .ux4g-time-slot-weekly-grid[data-active-day="2"] .ux4g-time-slot-cell[data-day="2"],
    .ux4g-time-slot-weekly-grid[data-active-day="3"] .ux4g-time-slot-cell[data-day="3"],
    .ux4g-time-slot-weekly-grid[data-active-day="4"] .ux4g-time-slot-cell[data-day="4"],
    .ux4g-time-slot-weekly-grid[data-active-day="5"] .ux4g-time-slot-cell[data-day="5"],
    .ux4g-time-slot-weekly-grid[data-active-day="6"] .ux4g-time-slot-cell[data-day="6"] {
        display: flex !important;
    }

    /* Cell States on Mobile */
    .ux4g-time-slot-cell.disabled {
        background: var(--ux4g-color-neutral-100);
        color: var(--ux4g-text-neutral-tertiary);
        border-color: transparent;
        font-weight: var(--ux4g-font-weight-regular);
    }

    .ux4g-time-slot-cell.selected {
        background: var(--ux4g-color-primary-50);
        border-color: var(--ux4g-bg-primary-strong);
        color: var(--ux4g-bg-primary-strong);
        flex-direction: row;
        gap: var(--ux4g-space-8);
        font-weight: var(--ux4g-font-weight-bold);
    }

    .ux4g-time-slot-cell.selected .ux4g-time-slot-mobile-time {
        display: none;
        /* Hidden when selected as per mockup */
    }

    .ux4g-time-slot-cell.selected .ux4g-time-slot-slots {
        display: none;
        /* Hidden when selected */
    }

    /* Legend on Mobile */
    .ux4g-time-slot-weekly-legend {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--ux4g-inline-l);
        padding: var(--ux4g-padding-m) 0;
        border-bottom: none;
        border-top: 1px solid var(--ux4g-border-color-neutral-subtle);
    }

    .ux4g-time-slot-legend-item {
        align-items: center;
        text-align: center;
        justify-content: center;
        font-size: var(--ux4g-fs-11);
        gap: var(--ux4g-space-4);
    }

    /* Actions on Mobile */
    .ux4g-time-slot-weekly-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--ux4g-space-12);
    }

    .ux4g-time-slot-weekly-actions .ux4g-btn {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================================
   TIME SLOT COMPONENT - COMPACT (Calendar View)
   ========================================================================== */

.ux4g-time-slot-compact-container {
    display: flex;
    flex-wrap: nowrap;
    background: var(--ux4g-bg-neutral-elevated);
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-lg);
    overflow: hidden;
    max-width: 860px;
    box-shadow: var(--ux4g-shadow-l2);
    padding: var(--ux4g-margin-xl) auto;
}

/* -----------------------
   LEFT PANE (CALENDAR)
----------------------- */
.ux4g-time-slot-compact-calendar {
    flex: 1 1 50%;
    min-width: 380px;
    border-right: 1px solid var(--ux4g-border-color-neutral-subtle);
    display: flex;
    flex-direction: column;
}

.ux4g-time-slot-compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--ux4g-padding-m);
    border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle);
}

.ux4g-time-slot-compact-month {
    font-size: var(--ux4g-fs-18);
    font-weight: var(--ux4g-font-weight-medium);
    color: var(--ux4g-text-brand-primary-default);
    flex: 1;
    text-align: center;
}

.ux4g-time-slot-compact-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--ux4g-space-4);
    text-align: center;
    margin-bottom: var(--ux4g-margin-l);
    padding: var(--ux4g-padding-m);
}

.ux4g-time-slot-day-name {
    color: var(--ux4g-text-neutral-secondary);
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-18);
    font-weight: var(--ux4g-font-weight-bold);
    ;
    padding-bottom: var(--ux4g-padding-m);
}

.ux4g-time-slot-date {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 6px;
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-font-weight-regular);
    cursor: pointer;
    color: var(--ux4g-text-neutral-primary);
    position: relative;
    transition: all 0.2s;
}

.ux4g-time-slot-date:hover:not(.muted):not(.selected):not(.disabled) {
    background-color: var(--ux4g-bg-neutral-subtle);
}

.ux4g-time-slot-date.muted {
    color: var(--ux4g-text-neutral-disabled);
    cursor: default;
}

.ux4g-time-slot-date.disabled {
    color: var(--ux4g-text-neutral-disabled) !important;
    cursor: not-allowed !important;
    background-color: transparent !important;
}

.ux4g-time-slot-date.no-slots {
    color: var(--ux4g-text-neutral-disabled);
}

.ux4g-time-slot-date.selected {
    background: var(--ux4g-bg-primary-strong) !important;
    color: var(--ux4g-color-neutral-0) !important;
    border-radius: 6px !important;
}

.ux4g-time-slot-date.holiday {
    background: var(--ux4g-color-yellow-50);
    color: var(--ux4g-color-orange-600);
    font-weight: var(--ux4g-font-weight-medium);
}

.ux4g-time-slot-date.weekly-off {
    background: var(--ux4g-bg-neutral-soft);
}

.ux4g-time-slot-date.today {
    color: var(--ux4g-text-brand-primary-default);
    font-weight: var(--ux4g-font-weight-bold);
}

.ux4g-time-slot-date.today::after {
    content: "";
    position: absolute;
    bottom: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--ux4g-bg-primary-strong);
}

.ux4g-time-slot-compact-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ux4g-inline-l);
    margin-top: auto;
    padding: var(--ux4g-padding-m);
    border-top: 1px solid var(--ux4g-border-color-neutral-subtle);
}

.ux4g-time-slot-compact-legend .ux4g-legend-box {
    width: 16px;
    height: 16px;
    border-radius: 6px;
    flex-shrink: 0;
}

.ux4g-legend-box.no-slots {
    background-color: var(--ux4g-bg-neutral-subtle);
}

/* Exact gray from design */
.ux4g-legend-box.holiday {
    background-color: var(--ux4g-bg-warning);
}

/* Exact yellow from design */
.ux4g-legend-box.weekly-off {
    background-color: var(--ux4g-bg-neutral-subtle);
}

.ux4g-time-slot-compact-legend .ux4g-time-slot-legend-item {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-xs);
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
    font-weight: var(--ux4g-font-weight-medium);
    color: var(--ux4g-text-neutral-primary);
}

/* -----------------------
   RIGHT PANE (SLOTS)
----------------------- */
.ux4g-time-slot-compact-slots {
    flex: 1 1 50%;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    background-color: var(--ux4g-bg-neutral-elevated);
}

.ux4g-time-slot-compact-desktop-header {
    font-size: var(--ux4g-fs-18);
    font-weight: var(--ux4g-font-weight-medium);
    color: var(--ux4g-text-brand-primary-default);
    text-align: center;
    padding: 16px;
}

.ux4g-time-slot-compact-list {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ux4g-inline-m);
    align-content: flex-start;
    overflow-y: auto;
    max-height: 400px;
    padding: var(--ux4g-padding-m);
}

/* Global Sliding Logic */
.ux4g-time-slot-compact-container {
    overflow: hidden;
    max-width: 380px; /* Force it to stay the width of the calendar */
}

.ux4g-time-slot-compact-calendar,
.ux4g-time-slot-compact-slots {
    flex: 0 0 100%;
    min-width: 100%;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
}

.ux4g-time-slot-compact-slots {
    order: -1;
}

/* When a date is selected, automatically slide from the left */
.ux4g-time-slot-compact-container:has(.ux4g-time-slot-date.selected) .ux4g-time-slot-compact-calendar,
.ux4g-time-slot-compact-container:has(.ux4g-time-slot-date.selected) .ux4g-time-slot-compact-slots {
    transform: translateX(0);
}

.ux4g-time-slot-compact-slot-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-font-weight-regular);
    color: var(--ux4g-text-neutral-primary);
    cursor: pointer;
    padding: var(--ux4g-padding-xs);
    border-radius: var(--ux4g-radius-sm);
    transition: background 0.2s;
}

.ux4g-time-slot-compact-slot-item:hover:not(.disabled) {
    background-color: var(--ux4g-bg-neutral-subtle);
}

.ux4g-time-slot-compact-slot-item.disabled {
    color: var(--ux4g-text-neutral-disabled);
    cursor: not-allowed;
}

.ux4g-time-slot-compact-slot-item.selected {
    background-color: var(--ux4g-bg-primary-soft) !important;
    color: var(--ux4g-text-brand-primary-default) !important;
}

.ux4g-time-slot-compact-slot-item.selected .ux4g-slot-badge {
    font-size: 0 !important;
    background-color: var(--ux4g-bg-primary-strong) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cmask id='mask0_2138_6182' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='21' height='20'%3E%3Crect x='0.5' width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_2138_6182)'%3E%3Cpath d='M8.45825 15L3.70825 10.25L4.89575 9.06252L8.45825 12.625L16.1041 4.97919L17.2916 6.16669L8.45825 15Z' fill='white'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 12px !important;
    border-color: var(--ux4g-color-neutral-0) !important;
}

.ux4g-slot-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    --ux4g-fs-current: var(--ux4g-fs-11);
    --ux4g-lh-current: var(--ux4g-lh-14);
    font-weight: var(--ux4g-font-weight-medium);
    color: var(--ux4g-color-neutral-0);
    border: solid 2px var(--ux4g-bg-neutral);
}

.ux4g-slot-badge.success {
    background-color: var(--ux4g-bg-success-strong);
}

.ux4g-slot-badge.warning {
    background-color: var(--ux4g-bg-warning-strong);
}

.ux4g-slot-badge.ux4g-slot-badge-neutral {
    background-color: var(--ux4g-bg-neutral-subtle);
    color: var(--ux4g-text-neutral-disabled);
}

.ux4g-time-slot-compact-actions {
    display: flex;
    justify-content: space-between;
    padding: var(--ux4g-padding-m);
    border-top: 1px solid var(--ux4g-border-color-neutral-subtle);
    flex-shrink: 0;
    /* Prevents actions from being squeezed out */
    width: 100%;
}

.ux4g-time-slot-compact-actions .ux4g-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.ux4g-time-slot-compact-actions .ux4g-btn-outline-neutral {
    border: 1px solid var(--ux4g-border-color-neutral-default);
    color: var(--ux4g-text-neutral-primary);
    background: transparent;
}

.ux4g-time-slot-compact-actions .ux4g-btn-primary:disabled {
    background-color: #E2E4E9 !important;
    color: #999 !important;
    border: none !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* -----------------------
   MOBILE RESPONSIVE
----------------------- */
@media (max-width: 767px) {
    .ux4g-time-slot-compact-container {
        flex-direction: row;
        max-width: 100%;
        flex-wrap: nowrap;
    }

    .ux4g-time-slot-compact-calendar,
    .ux4g-time-slot-compact-slots {
        border-right: none;
        border-bottom: none;
    }

    .ux4g-time-slot-compact-list.grid-2 {
        grid-template-columns: 1fr;
        padding: var(--ux4g-padding-m);
    }

    .ux4g-time-slot-compact-actions {
        padding: var(--ux4g-padding-m);
    }
}

@media (max-width: 767px) {


    .ux4g-time-slot-compact-header,
    .ux4g-time-slot-compact-grid,
    .ux4g-time-slot-compact-list.grid-2,
    .ux4g-time-slot-compact-actions,
    .ux4g-time-slot-compact-legend {
        padding-left: var(--ux4g-padding-s) !important;
        padding-right: var(--ux4g-padding-s) !important;
    }
}
/* ======================================================
   UX4G RESULT LIST
   ====================================================== */

.ux4g-result-list {
  padding: var(--ux4g-margin-s) var(--ux4g-padding-l);
  background-color: var(--ux4g-bg-neutral-elevated);
  border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-inline-s);
  transition: background-color 0.3s ease;
}
.ux4g-result-list:hover {
    background: none;
}

.ux4g-result-list-header {
  display: flex;
  justify-content: space-between;
}

.ux4g-result-list-info {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-m);
}

.ux4g-result-list-icon {
  width: var(--ux4g-sz-40);
  height: var(--ux4g-sz-40);
  min-width: var(--ux4g-sz-40);
  background-color: var(--ux4g-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ux4g-radius-sm);
}

.ux4g-result-list-icon .ux4g-icon-outlined {
  color: var(--ux4g-text-brand-secondary-default);
  font-size: var(--ux4g-fs-20) !important;
}

.ux4g-result-list-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-inline-s);
}

.ux4g-result-list-meta {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-l);
  margin-bottom: var(--ux4g-margin-3xs);
}

.ux4g-result-list-id {
  color: var(--ux4g-text-neutral-secondary);
}

.ux4g-result-list-dept {
  color: var(--ux4g-text-brand-primary-default) !important;
}

.ux4g-result-list-actions-container {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-l);
}

.ux4g-result-list-status-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ux4g-stack-xs);
}

.ux4g-result-list-actions {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-l);
}

.ux4g-result-list-actions .ux4g-btn-sm {
  border-color: var(--ux4g-border-color-neutral-default);
  color: var(--ux4g-text-neutral-primary);
}

.ux4g-result-list-actions .ux4g-result-list-accordion-toggle {
  font-size: var(--ux4g-fs-24);
}

.ux4g-result-list-date {
  color: var(--ux4g-text-neutral-tertiary);
}

/* Accordion Visibility Logic */
.ux4g-result-list-content {
  padding-top: var(--ux4g-margin-l);
}

.ux4g-result-list:has(.ux4g-result-list-accordion-toggle[aria-expanded="false"]) .ux4g-result-list-content {
  display: none;
}

.ux4g-result-list-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ux4g-fs-20);
}

.ux4g-result-list-detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-2);
}

.ux4g-result-list-detail-value {
  color: var(--ux4g-text-neutral-secondary);
}

.ux4g-result-list-full-width {
  grid-column: span 3;
}

/* ======================================================
   COMMON DESKTOP STYLES (V2, V3, V4, V5)
   ====================================================== */

:is(.ux4g-result-list-v2, .ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5) .ux4g-result-list-details {
  gap: var(--ux4g-space-6);
}

:is(.ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5) .ux4g-result-list-icon {
  background-color: var(--ux4g-bg-primary-soft);
}

/* ======================================================
   DESKTOP OVERRIDES / SPECIFIC STYLES
   ====================================================== */

/* V2 Specific */
.ux4g-result-list-v2 .ux4g-result-list-icon {
  background-color: var(--ux4g-bg-warning-soft);
}

.ux4g-result-list-v2 .ux4g-result-list-icon .ux4g-icon-outlined {
  color: var(--ux4g-text-status-warning);
}

.ux4g-result-list-v2 .ux4g-result-list-metadata {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ux4g-space-1);
}

.ux4g-result-list-v2 .ux4g-result-list-meta-item {
  color: var(--ux4g-text-neutral-secondary);
}

.ux4g-result-list-meta-item2,
.ux4g-result-list-meta-item2 .ux4g-result-list-meta-value {
  color: var(--ux4g-text-neutral-tertiary) !important;
}

.ux4g-result-list-v2 .ux4g-result-list-meta-value {
  color: var(--ux4g-text-neutral-primary);
}

.ux4g-result-list-v2 .ux4g-btn-xs {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-s);
}

/* V3 Specific */
.ux4g-result-list-v3 .ux4g-result-list-metadata {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-m);
}

.ux4g-result-list-v3 .ux4g-result-list-meta-item {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-1);
  color: var(--ux4g-text-neutral-secondary);
}

.ux4g-result-list-v3 .ux4g-result-list-meta-item .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-16);
  color: var(--ux4g-text-neutral-tertiary);
}

/* V4 Specific */
.ux4g-result-list-v4 .ux4g-result-list-title-group .ux4g-result-list-id {
  margin-bottom: var(--ux4g-margin-3xs);
}

.ux4g-result-list-v4 .ux4g-result-list-title-group-header {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-s);
}

.ux4g-result-list-v4 .ux4g-result-list-alert-icon {
  color: var(--ux4g-text-status-error);
  font-size: var(--ux4g-fs-20) !important;
}

/* V5 Specific */
.ux4g-result-list-v5 .ux4g-result-list-metadata {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ux4g-inline-xs);
}

.ux4g-result-list-v5 .ux4g-result-list-meta-row {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-m);
  font-size: var(--ux4g-fs-14);
  line-height: var(--ux4g-lh-20);
  font-weight: var(--ux4g-font-weight-medium);
  color: var(--ux4g-text-neutral-primary);
}

.ux4g-result-list-v5 .ux4g-tag-tonal-success {
  display: inline-flex;
  align-items: center;
}

.ux4g-result-list-v5 .ux4g-result-list-meta-date {
  font-size: var(--ux4g-fs-12);
  line-height: var(--ux4g-lh-16);
  font-weight: var(--ux4g-font-weight-medium);
  color: var(--ux4g-text-neutral-tertiary);
}

.ux4g-result-list-v5 .ux4g-btn-sm {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-s);
  padding: 0 var(--ux4g-padding-m);
  height: var(--ux4g-sz-36);
}

/* ======================================================
   MOBILE RESPONSIVE TRANSFORMS (768px)
   ====================================================== */

@media (max-width: 768px) {
  /* HIDE ICONS ON MOBILE (All variations) */
  :is(.ux4g-result-list-v1, .ux4g-result-list-v2, .ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5) .ux4g-result-list-icon {
    display: none !important;
  }

  /* BASE PADDING FOR ALL MOBILE ROWS */
  :is(.ux4g-result-list-v1, .ux4g-result-list-v2, .ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5) {
    padding: var(--ux4g-padding-m);
  }

  /* GRID ALIGNMENT (V1, V3, V4, V5) */
  :is(.ux4g-result-list-v1, .ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--ux4g-inline-m);
  }

  /* FLATTEN GRID FOR DIRECT PLACEMENT */
  :is(.ux4g-result-list-v1, .ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5) :is(.ux4g-result-list-header, .ux4g-result-list-info, .ux4g-result-list-title-group, .ux4g-result-list-actions-container, .ux4g-result-list-content) {
    display: contents !important;
  }

  .ux4g-result-list-v1 :is(.ux4g-result-list-meta, .ux4g-result-list-status-date, .ux4g-result-list-details) {
    display: contents !important;
  }

  /* ACCORDION COLLAPSE HIDING */
  :is(.ux4g-result-list-v1, .ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5):has(.ux4g-result-list-accordion-toggle[aria-expanded="false"]) .ux4g-result-list-content {
    display: none !important;
  }

  /* 2-COLUMN DETAILS GRID (V2, V3, V4, V5) */
  :is(.ux4g-result-list-v2, .ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5) .ux4g-result-list-details {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--ux4g-space-6);
  }

  :is(.ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5) .ux4g-result-list-details {
    grid-column: 1 / span 2;
  }

  /* FULL WIDTH/COLLAPSED DETAILS ITEM (V2, V3, V4, V5) */
  :is(.ux4g-result-list-v2, .ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5) .ux4g-result-list-full-width {
    grid-column: span 1;
    margin-top: var(--ux4g-margin-none);
  }

  /* COMMON ACTIONS STYLE ON MOBILE */
  :is(.ux4g-result-list-v1, .ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5) .ux4g-result-list-actions {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    gap: var(--ux4g-inline-m);
  }

  :is(.ux4g-result-list-v1, .ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5) .ux4g-result-list-accordion-toggle {
    font-size: var(--ux4g-fs-24);
    cursor: pointer;
  }

  /* COMMON TITLE STYLE ON MOBILE */
  :is(.ux4g-result-list-v1, .ux4g-result-list-v3, .ux4g-result-list-v4, .ux4g-result-list-v5) .ux4g-result-list-title {
    grid-column: 1;
    align-self: center;
  }

  /* -------------------------------------------
     V1 Specific Mobile
     ------------------------------------------- */
  .ux4g-result-list-v1:has(.ux4g-result-list-accordion-toggle[aria-expanded="false"]) :is(.ux4g-result-list-id, .ux4g-result-list-date, .ux4g-result-list-dept) {
    display: none !important;
  }

  .ux4g-result-list-v1 .ux4g-tag-tonal-warning,
  .ux4g-result-list-v1 .ux4g-sla-badge {
    grid-column: 1 / span 2;
    grid-row: 2;
    width: fit-content;
    display: flex !important;
    margin-top: calc(-1 * var(--ux4g-margin-2xs));
    margin-bottom: var(--ux4g-margin-3xs);
  }

  .ux4g-result-list-v1 .ux4g-result-list-id {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-inline-xs);
  }

  .ux4g-result-list-v1 .ux4g-result-list-date {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-inline-xs);
  }

  .ux4g-result-list-v1 .ux4g-result-list-details .ux4g-result-list-detail-item:nth-child(1) {
    grid-column: 1;
    grid-row: 4;
  }

  .ux4g-result-list-v1 .ux4g-result-list-details .ux4g-result-list-detail-item:nth-child(2) {
    grid-column: 2;
    grid-row: 4;
  }

  .ux4g-result-list-v1 .ux4g-result-list-dept {
    grid-column: 1;
    grid-row: 5;
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-inline-xs);
  }

  .ux4g-result-list-v1 .ux4g-result-list-details .ux4g-result-list-detail-item:nth-child(4) {
    grid-column: 2;
    grid-row: 5;
  }

  .ux4g-result-list-v1 .ux4g-result-list-details .ux4g-result-list-detail-item:nth-child(5) {
    grid-column: 1 / span 2;
    grid-row: 6;
  }

  .ux4g-result-list-v1 .ux4g-divider-vertical {
    display: none;
  }

  .ux4g-result-list-v1:not(:has(.ux4g-result-list-actions)) {
    grid-template-columns: auto 1fr;
  }

  .ux4g-result-list-v1:not(:has(.ux4g-result-list-actions)) [class*="ux4g-tag-"] {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin: 0;
  }

  .ux4g-result-list-v1:not(:has(.ux4g-result-list-actions)) .ux4g-result-list-id {
    grid-column: 1 / span 2;
    grid-row: 2;
  }

  /* -------------------------------------------
     V2 Specific Mobile
     ------------------------------------------- */
  .ux4g-result-list-v2 {
    display: flex !important;
    flex-direction: column;
  }

  .ux4g-result-list-v2 .ux4g-result-list-header {
    display: grid !important;
    grid-template-columns: auto auto auto 1fr auto;
    grid-template-areas:
      "icon title title title arrow"
      "icon tag download . .";
    column-gap: var(--ux4g-inline-s);
    row-gap: var(--ux4g-inline-s);
    align-items: center;
    margin-bottom: var(--ux4g-margin-m);
  }

  .ux4g-result-list-v2 .ux4g-result-list-info,
  .ux4g-result-list-v2 .ux4g-result-list-title-group,
  .ux4g-result-list-v2 .ux4g-result-list-title-group .ux4g-d-flex,
  .ux4g-result-list-v2 .ux4g-result-list-actions-container,
  .ux4g-result-list-v2 .ux4g-result-list-actions {
    display: contents !important;
  }

  .ux4g-result-list-v2 .ux4g-result-list-icon {
    grid-area: icon;
  }

  .ux4g-result-list-v2 .ux4g-result-list-title {
    grid-area: title;
  }

  .ux4g-result-list-v2 .ux4g-result-list-title-group .ux4g-d-flex > [class*="ux4g-tag-"] {
    grid-area: tag;
  }

  .ux4g-result-list-v2 .ux4g-btn-sm {
    grid-area: download;
  }

  .ux4g-result-list-v2 .ux4g-result-list-accordion-toggle {
    grid-area: arrow;
    justify-self: flex-end;
  }

  /* .ux4g-result-list-v2 .ux4g-result-list-title {
    font-size: var(--ux4g-fs-20);
  } */

  .ux4g-result-list-v2 .ux4g-result-list-tag {
    padding: 0 !important;
    width: var(--ux4g-sz-18) !important;
    height: var(--ux4g-sz-18) !important;
    min-width: var(--ux4g-sz-18) !important;
    border-radius: var(--ux4g-radius-full) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
  }

  .ux4g-result-list-v2 .ux4g-result-list-tag .ux4g-tag-text {
    display: none !important;
  }

  .ux4g-result-list-v2 .ux4g-result-list-tag .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-12) !important;
    margin: 0 !important;
  }

  .ux4g-result-list-v2 .ux4g-result-list-metadata {
    display: none !important;
  }

  .ux4g-result-list-v2 .ux4g-result-list-dept {
    display: none;
  }

  .ux4g-result-list-v2 .ux4g-result-list-content {
    margin-top: var(--ux4g-margin-none);
    padding-top: var(--ux4g-padding-none);
  }

  .ux4g-result-list-v2:has(.ux4g-result-list-accordion-toggle[aria-expanded="false"]) .ux4g-result-list-content {
    display: none !important;
  }

  .ux4g-result-list-v2 .ux4g-btn-sm {
    margin-right: var(--ux4g-margin-xs);
  }

  /* -------------------------------------------
     V3 Specific Mobile
     ------------------------------------------- */
  .ux4g-result-list-v3 .ux4g-result-list-metadata {
    grid-column: 1 / span 2;
    grid-row: 2;
    display: flex !important;
    margin-top: calc(-1 * var(--ux4g-margin-2xs));
    margin-bottom: var(--ux4g-margin-3xs);
    gap: var(--ux4g-inline-m);
    margin-right: 0;
  }

  .ux4g-result-list-v3 .ux4g-result-list-metadata .ux4g-tag-s {
    margin-right: var(--ux4g-margin-2xs);
  }

  .ux4g-result-list-v3 .ux4g-result-list-dept {
    display: none;
  }

  /* -------------------------------------------
     V4 Specific Mobile
     ------------------------------------------- */
  .ux4g-result-list-v4 .ux4g-tag-filled-primary {
    grid-column: 1 / span 2;
    grid-row: 2;
    width: fit-content;
    margin-top: calc(-1 * var(--ux4g-margin-2xs));
  }

  .ux4g-result-list-v4 .ux4g-result-list-id {
    display: none;
  }

  /* -------------------------------------------
     V5 Specific Mobile
     ------------------------------------------- */
  .ux4g-result-list-v5 .ux4g-result-list-id {
    display: none;
  }

  .ux4g-result-list-v5 .ux4g-result-list-metadata {
    display: contents !important;
  }

  .ux4g-result-list-v5 .ux4g-result-list-meta-row {
    display: contents !important;
  }

  .ux4g-result-list-v5 .ux4g-result-list-meta-date,
  .ux4g-result-list-v5 .ux4g-result-list-meta-row > span:not(.ux4g-tag-tonal-success) {
    display: none !important;
  }

  .ux4g-result-list-v5 .ux4g-tag-tonal-success {
    grid-column: 1 / span 2;
    grid-row: 2;
    width: fit-content;
    display: flex !important;
    margin-top: calc(-1 * var(--ux4g-margin-2xs));
  }
}
/* ==========================================================================
   MEGA MENU COMPONENT
   ========================================================================== */

.ux4g-mega-menu {
  width: 100%;
  background-color: var(--ux4g-bg-neutral-elevated);
  border-radius: var(--ux4g-radius-lg);
  box-shadow: var(--ux4g-shadow-l2);
  overflow: hidden;
  display: flex;
  font-family: var(--ux4g-font-family-base);
  border-top: var(--ux4g-border-width-xl) solid var(--ux4g-border-color-primary-strong);
}

.ux4g-mega-menu-container {
  display: flex;
  width: 100%;
}

.ux4g-mega-menu-sidebar {
  width: 240px;
  background-color: var(--ux4g-bg-neutral-elevated);
  padding: var(--ux4g-padding-xl) 0;
  flex-shrink: 0;
}

.ux4g-mega-menu-category-list {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-xs);
}

.ux4g-mega-menu-category-item {
  padding: var(--ux4g-padding-xs) var(--ux4g-padding-s);

  cursor: pointer;
  transition: all var(--ux4g-transition-duration-base) var(--ux4g-transition-timing-ease);
}

.ux4g-mega-menu-category-link {
  display: block;

}

.ux4g-mega-menu-category-item--active,
.ux4g-mega-menu-category-item:hover {
  background-color: var(--ux4g-bg-primary);
}

.ux4g-mega-menu-category-item:not(.ux4g-mega-menu-category-item--active) .ux4g-mega-menu-category-link {
  color: var(--ux4g-text-neutral-primary);
}

.ux4g-mega-menu-category-item--active .ux4g-mega-menu-category-link,
.ux4g-mega-menu-category-item:hover .ux4g-mega-menu-category-link {
  color: var(--ux4g-text-brand-primary-default);
}

.ux4g-mega-menu-content {
  flex: 1;
  display: none;
  padding: var(--ux4g-padding-xl);
  gap: var(--ux4g-padding-xl);
  background-color: var(--ux4g-bg-neutral-elevated);
}
.ux4g-mega-menu-list-content {
  flex: 1;
  padding: var(--ux4g-padding-xl);
  gap: var(--ux4g-padding-xl);
  background-color: var(--ux4g-bg-neutral-elevated);
}

.ux4g-mega-menu-content.ux4g-mega-menu-content--active {
  display: flex;
}
.ux4g-mega-menu-list-content {
  display: flex;
}

.ux4g-mega-menu-column {
  flex: 1;
  border-right: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
  padding-right: var(--ux4g-padding-xl);
}

.ux4g-mega-menu-column:last-child {
  border-right: none;
  padding-right: 0;
}

.ux4g-mega-menu-title {
  
  margin-bottom: var(--ux4g-margin-m);
  padding-inline: var(--ux4g-padding-s);
}

.ux4g-mega-menu-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-xs);
}

.ux4g-mega-menu-item{
  padding: var(--ux4g-padding-2xs) var(--ux4g-padding-s);
}

.ux4g-mega-menu-item a {
  display: flex;
  gap: var(--ux4g-inline-m);
  color: var(--ux4g-text-neutral-primary);
  transition: color var(--ux4g-transition-duration-base) var(--ux4g-transition-timing-ease);
}

.ux4g-mega-menu-item a .ux4g-icon-outlined,
.ux4g-mega-menu-item a .ux4g-icon {
  font-size: var(--ux4g-fs-20);
  color: var(--ux4g-text-neutral-secondary);
  transition: color var(--ux4g-transition-duration-base) var(--ux4g-transition-timing-ease);
}

.ux4g-mega-menu-item a:hover {
  color: var(--ux4g-text-link-default-hover);
}

.ux4g-mega-menu-item a:hover .ux4g-icon-outlined,
.ux4g-mega-menu-item a:hover .ux4g-icon {
  color: var(--ux4g-text-link-default-hover);
}

.ux4g-mega-menu-item .ux4g-tag-tonal-primary {
  padding: var(--ux4g-padding-3xs) var(--ux4g-padding-xs);
  font-size: var(--ux4g-fs-11);
  line-height: var(--ux4g-lh-14);
}

.ux4g-mega-menu-item-link {
  display: flex;
  align-items: flex-start;
  gap: var(--ux4g-inline-s);
  text-decoration: none;
  transition: color var(--ux4g-transition-duration-base) var(--ux4g-transition-timing-ease);
}

.ux4g-mega-menu-item-link .ux4g-icon-outlined,
.ux4g-mega-menu-item-link .ux4g-icon {
  font-size: var(--ux4g-fs-20);
  color: var(--ux4g-text-neutral-secondary);
  margin-top: 2px;
  flex-shrink: 0;
  transition: color var(--ux4g-transition-duration-base) var(--ux4g-transition-timing-ease);
}

.ux4g-mega-menu-item-text {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-1);
}

.ux4g-mega-menu-item-title {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-inline-s);  
  transition: color var(--ux4g-transition-duration-base) var(--ux4g-transition-timing-ease);
}


.ux4g-mega-menu-item-link:hover .ux4g-mega-menu-item-title {
  color: var(--ux4g-text-link-default-hover);
}

.ux4g-mega-menu-item-link:hover .ux4g-icon-outlined,
.ux4g-mega-menu-item-link:hover .ux4g-icon {
  color: var(--ux4g-text-link-default-hover);
}

.ux4g-mega-menu-list-content--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: var(--ux4g-stack-xl);
  column-gap: var(--ux4g-padding-xl);
  padding-left: var(--ux4g-padding-3xl);
  padding-right: var(--ux4g-padding-3xl);
}

.ux4g-mega-menu-list-content--grid .ux4g-mega-menu-column {
  border-right: none;
  padding-right: 0;
  text-align: left;
}

.ux4g-mega-menu-list-content--grid .ux4g-mega-menu-column .ux4g-mega-menu-title {
  text-align: left;
}

.ux4g-mega-menu-list-content--grid .ux4g-mega-menu-column .ux4g-mega-menu-item a {
  justify-content: flex-start;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ux4g-mega-menu-content.ux4g-mega-menu-content--active,
  .ux4g-mega-menu-list-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .ux4g-mega-menu-list-content--grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ux4g-mega-menu-column:nth-child(even) {
    border-right: none;
    padding-right: 0;
  }
  
  /* Reset last-child border if it's odd, though in 4 cols it's even. 
     Just to be safe, odd elements should have border-right, even none */
  .ux4g-mega-menu-column:last-child {
    border-right: none;
  }
}

/* Responsive Styles */
@media (max-width: 767px) {
  .ux4g-mega-menu {
    flex-direction: column;
  }

  .ux4g-mega-menu-container {
    flex-direction: column;
  }

  .ux4g-mega-menu-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
  }

  .ux4g-mega-menu-content {
    flex-direction: column;
    padding: var(--ux4g-padding-m);
  }
  .ux4g-mega-menu-list-content {
    flex-direction: column;
    padding: var(--ux4g-padding-m);
  }
  .ux4g-mega-menu-list-content--grid {
    grid-template-columns: 1fr;
    row-gap: var(--ux4g-stack-m);
    padding-left: var(--ux4g-padding-m);
    padding-right: var(--ux4g-padding-m);
  }

  .ux4g-mega-menu-column {
    border-right: none;
    padding-right: 0;
    border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    padding-bottom: var(--ux4g-padding-m);
  }

  .ux4g-mega-menu-column:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ==========================================================================
   DROPDOWN VARIANT
   ========================================================================== */

.ux4g-mega-menu-wrapper {
  position: relative;
  display: inline-block;
}

.ux4g-mega-menu--dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  width: 900px;
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.ux4g-mega-menu-wrapper:hover .ux4g-mega-menu--dropdown,
.ux4g-mega-menu-wrapper.ux4g-mega-menu-wrapper--active .ux4g-mega-menu--dropdown {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Align dropdown to right if it's near screen edge (basic utility) */
.ux4g-mega-menu--dropdown-right {
    left: auto;
    right: 0;
}

/* ==========================================================================
   MEGA MENU FOUR (PROMO VARIANT)
   ========================================================================== */

.ux4g-mega-menu-list-content--promo {
  display: flex;
  gap: var(--ux4g-padding-xl);
  padding: var(--ux4g-padding-xl);
  background-color: var(--ux4g-bg-neutral-elevated);
  width: 100%;
  box-sizing: border-box;
}

.ux4g-mega-menu-grid-left {
  flex: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: var(--ux4g-stack-xl);
  column-gap: var(--ux4g-padding-2xl);
}

.ux4g-mega-menu-grid-left .ux4g-mega-menu-column {
  border-right: none;
  padding-right: 0;
}

.ux4g-mega-menu-promo-sidebar {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-padding-xl);
  min-width: 260px;
}

.ux4g-mega-menu-promo-card {
  flex: 1;
  min-height: 140px;
  border-radius: var(--ux4g-radius-lg);
  position: relative;
  overflow: hidden;
  transition: transform var(--ux4g-transition-duration-base) var(--ux4g-transition-timing-ease);
}

.ux4g-mega-menu-promo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ux4g-mega-menu-promo-card:hover {
  transform: translateY(-2px);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ux4g-mega-menu-list-content--promo {
    flex-direction: column;
  }
  .ux4g-mega-menu-promo-sidebar {
    width: 100%;
  }
  .ux4g-mega-menu-five-content{
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .ux4g-mega-menu-list-content--promo {
    flex-direction: column;
    padding: var(--ux4g-padding-m);
  }
  .ux4g-mega-menu-grid-left {
    grid-template-columns: 1fr;
    row-gap: var(--ux4g-stack-m);
  }
  .ux4g-mega-menu-promo-sidebar {
    width: 100%;
    min-width: 0;
  }
  .ux4g-mega-menu-promo-card {
    min-height: 120px;
  }
}

/* ==========================================================================
   MEGA MENU FIVE & SIX (SHARED LAYOUT & COMPONENT STYLES)
   ========================================================================== */

.ux4g-mega-menu--five,
.ux4g-mega-menu--six {
  padding: var(--ux4g-padding-xl);
}

.ux4g-mega-menu--five .ux4g-mega-menu-container,
.ux4g-mega-menu--six .ux4g-mega-menu-container {
  gap: var(--ux4g-padding-xl);
}

.ux4g-mega-menu-five-main,
.ux4g-mega-menu-six-main {
  flex: 3;
  display: flex;
  flex-direction: column;
  background-color: var(--ux4g-bg-neutral-elevated);
  border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
  border-radius: var(--ux4g-radius-lg);
  padding: var(--ux4g-padding-xl);
}

.ux4g-mega-menu-five-main {
  gap: var(--ux4g-padding-xl);
}

.ux4g-mega-menu-five-grid .ux4g-mega-menu-item,
.ux4g-mega-menu-six-column .ux4g-mega-menu-item {
  padding: 0;
}

.ux4g-mega-menu-five-grid .ux4g-mega-menu-item-link,
.ux4g-mega-menu-six-column .ux4g-mega-menu-item-link {
  display: flex;
  align-items: flex-start;
  gap: var(--ux4g-inline-m);
  text-decoration: none;
  padding: var(--ux4g-padding-s);
  border-radius: var(--ux4g-radius-md);
  transition: background-color var(--ux4g-transition-duration-base) var(--ux4g-transition-timing-ease);
}


.ux4g-mega-menu-five-grid .ux4g-mega-menu-item-text,
.ux4g-mega-menu-six-column .ux4g-mega-menu-item-text {
  flex: 1;
}

.ux4g-mega-menu-five-grid .ux4g-mega-menu-item-title,
.ux4g-mega-menu-six-column .ux4g-mega-menu-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.ux4g-mega-menu-five-icon-wrapper,
.ux4g-mega-menu-six-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ux4g-radius-md);
  background-color: var(--ux4g-bg-primary-soft);
  border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-primary-default);
  color: var(--ux4g-text-brand-primary-default);
  flex-shrink: 0;
}

.ux4g-mega-menu-five-icon-wrapper .ux4g-icon-outlined,
.ux4g-mega-menu-six-icon-wrapper .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-20);
}

/* ==========================================================================
   MEGA MENU FIVE SPECIFIC STYLES
   ========================================================================== */

.ux4g-mega-menu--five .ux4g-mega-menu-sidebar {
  background-color: var(--ux4g-bg-neutral-elevated);
  border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
  border-radius: var(--ux4g-radius-lg);
  padding: var(--ux4g-padding-xl) 0;
}

.ux4g-mega-menu-five-content {
  flex: 1;
  display: none;
  gap: var(--ux4g-padding-xl);
  box-sizing: border-box;
}

.ux4g-mega-menu-five-content.ux4g-mega-menu-five-content--active {
  display: flex;
}

.ux4g-mega-menu-five-header {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-xs);
  border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
  padding-bottom: var(--ux4g-padding-xl);
}

.ux4g-mega-menu-five-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: var(--ux4g-stack-l);
  column-gap: var(--ux4g-padding-l);
}

/* Sidebar Category list for Five */
.ux4g-mega-menu-five-category-item {
  cursor: pointer;
  transition: all var(--ux4g-transition-duration-base) var(--ux4g-transition-timing-ease);
}
.ux4g-mega-menu-five-category-item .ux4g-mega-menu-category-link{
  padding: var(--ux4g-padding-xs) var(--ux4g-padding-s);
}

.ux4g-mega-menu-five-category-item--active,
.ux4g-mega-menu-five-category-item:hover {
  background-color: var(--ux4g-bg-primary);
}

.ux4g-mega-menu-five-category-item:not(.ux4g-mega-menu-five-category-item--active) .ux4g-mega-menu-category-link {
  color: var(--ux4g-text-neutral-primary);
}

.ux4g-mega-menu-five-category-item--active .ux4g-mega-menu-category-link,
.ux4g-mega-menu-five-category-item:hover .ux4g-mega-menu-category-link {
  color: var(--ux4g-text-brand-primary-default);
}

/* ==========================================================================
   MEGA MENU SIX SPECIFIC STYLES
   ========================================================================== */

.ux4g-mega-menu-six-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ux4g-padding-xl);
}

.ux4g-mega-menu-six-column {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-xs);
}

.ux4g-mega-menu-six-promo-sidebar {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-padding-xl);
  min-width: 260px;
}

.ux4g-mega-menu-six-promo-sidebar .ux4g-mega-menu-promo-card {
  flex: 1;
}

/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 767px) {
  .ux4g-mega-menu--five,
  .ux4g-mega-menu--six {
    padding: var(--ux4g-padding-m);
  }

  .ux4g-mega-menu--five .ux4g-mega-menu-container,
  .ux4g-mega-menu--six .ux4g-mega-menu-container {
    flex-direction: column;
    gap: var(--ux4g-padding-m);
  }

  .ux4g-mega-menu--five .ux4g-mega-menu-sidebar {
    width: 100%;
    padding: var(--ux4g-padding-m) 0;
  }

  .ux4g-mega-menu-five-content.ux4g-mega-menu-five-content--active {
    flex-direction: column;
  }
  
  .ux4g-mega-menu-five-main,
  .ux4g-mega-menu-six-main {
    width: 100%;
  }

  .ux4g-mega-menu-six-main {
    padding: var(--ux4g-padding-m);
  }

  .ux4g-mega-menu-five-grid,
  .ux4g-mega-menu-six-grid {
    grid-template-columns: 1fr;
    row-gap: var(--ux4g-stack-m);
  }

  .ux4g-mega-menu-six-promo-sidebar {
    width: 100%;
    min-width: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ux4g-mega-menu-five-content{
    flex-direction: column;
  }
  .ux4g-mega-menu-five-grid {
    grid-template-columns: 1fr;
  }
  
  /* Variant 6 iPad specific styles */
  .ux4g-mega-menu--six .ux4g-mega-menu-container {
    flex-direction: column;
  }
  .ux4g-mega-menu-six-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ux4g-mega-menu-six-promo-sidebar {
    width: 100%;
  }
}





/* =========================================
   UX4G NAVBAR PATTERN
========================================= */

.ux4g-navbar {
    background: var(--ux4g-bg-neutral-elevated);
    box-shadow: var(--ux4g-shadow-l2);
    width: 100%;
}

.ux4g-navbar-wrap {
    display: flex;
    padding: var(--ux4g-padding-m) 0;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    gap: var(--ux4g-inline-m);
}

.ux4g-navbar-logo {
    height: 40px;
    width: auto;
}

.ux4g-navbar-right {
    display: flex;
    justify-content: flex-end;
}

/* ===== REMOVE ALL BULLETS / DOTS ===== */

.ux4g-navbar-links {
    display: flex;
    align-items: center;
    column-gap: var(--ux4g-inline-xl);

    list-style: none !important;
    margin: 0;
    padding: 0;
}

.ux4g-navbar-links > li {
    display: flex;
    align-items: center;

    list-style: none !important;
    margin: 0;
    padding: 0;
}

.ux4g-navbar-links > li::marker {
    content: none !important;
}

.ux4g-navbar-links > li::before,
.ux4g-navbar-links > li::after {
    content: none !important;
    display: none !important;
}

/* ===================================== */

.ux4g-navbar-links .ux4g-dropdown-control:hover {
    text-decoration: none !important;
}

.ux4g-navbar-links .ux4g-dropdown-control:hover > span:first-child {
    text-decoration: underline;
}

/* ===================================== */
/* Mobile Responsiveness                 */
/* ===================================== */

.ux4g-navbar-mobile {
    display: none;
}

@media (max-width: 768px) {
    .ux4g-navbar-desktop {
        display: none !important;
    }
    .ux4g-navbar {
        position: relative;
    }
    .ux4g-navbar:has(.ux4g-navbar-mobile .ux4g-dropdown.is-open) {
        z-index: var(--ux4g-z-dropdown, 1000);
    }
    .ux4g-navbar-mobile {
        display: flex;
        align-items: center;
        margin-left: auto;
    }
    /* Set positioning context to static on mobile so the menu spans the full navbar width */
    .ux4g-navbar-mobile,
    .ux4g-navbar-mobile > .ux4g-relative,
    .ux4g-navbar-mobile > .ux4g-relative > .ux4g-dropdown {
        position: static !important;
    }
    /* Style mobile dropdown menu to be full-width block below navbar */
    .ux4g-navbar-mobile .ux4g-dropdown-menu {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        bottom: auto !important;
        width: 100% !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
        z-index: var(--ux4g-z-dropdown, 1000) !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        background: var(--ux4g-bg-neutral-elevated, #ffffff) !important;
        box-shadow: var(--ux4g-shadow-l2) !important;
    }
    .ux4g-navbar.ux4g-radius-full {
        border-radius: 0 !important;
    }
}


.ux4g-otp {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ux4g-stack-xs);
}

/* Default state (no extra styling needed) */
.ux4g-otp-label {
  color: var(--ux4g-text-neutral-secondary);
}
.ux4g-otp-group {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-s);
  width: 100%;
}
.ux4g-otp-group.ux4g-otp-shake {
  animation: ux4g-otp-shake-x 360ms ease-in-out;
}
.ux4g-otp-source {
  display: none;
}
.ux4g-otp-slot {
  flex: 1;
  width: var(--ux4g-sz-52);
  height: var(--ux4g-sz-56);
  min-width: 0;
  padding: 0;
  justify-content: center;
}
.ux4g-otp-input {
  flex: 0 1 100%;
  width: 100%;
  margin-inline-end: 0;
  padding: 0;
  text-align: center;
  color: var(--ux4g-text-neutral-primary);
  caret-color: transparent;
}
.ux4g-otp-input::placeholder {
  font-size: var(--ux4g-fs-16);
  color: var(--ux4g-text-neutral-tertiary);
  opacity: 1;
}
.ux4g-otp-input:focus {
  outline: none;
}
.ux4g-otp-slot.ux4g-otp-focus {
  outline: var(--ux4g-border-width-md) solid var(--ux4g-bg-primary-strong);
  border-color: var(--ux4g-border-color-neutral-elevated) !important;
}
.ux4g-otp-input.ux4g-otp-caret {
  background-image: linear-gradient(var(--ux4g-text-neutral-primary), var(--ux4g-text-neutral-primary));
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--ux4g-border-width-sm) var(--ux4g-sz-16);
  animation: ux4g-otp-caret-blink 1s steps(1, end) infinite;
}
.ux4g-otp-input[readonly] {
  cursor: default;
}
.ux4g-otp-separator {
  width: 9.33px;
  height: 1.33px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ux4g-text-neutral-secondary);
  font-size: var(--ux4g-fs-16);
  line-height: 1;
}
.ux4g-otp-meta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-s);
}
.ux4g-otp-meta-between {
  justify-content: space-between;
}
.ux4g-otp-resend {
  margin-inline-start: auto;
  text-align: right;
}
.ux4g-otp-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-inline-xs);
}
.ux4g-otp-status .ux4g-icon-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  font-size: var(--ux4g-fs-16);
  line-height: 1;
  flex-shrink: 0;
}
.ux4g-otp-success .ux4g-otp-status .ux4g-icon-outlined {
  border: var(--ux4g-border-width-md) solid var(--ux4g-bg-neutral);
  border-radius: 999px;
  background: #128937;
  color: #fff;
}
:root[data-theme="dark"] .ux4g-otp-success .ux4g-otp-status .ux4g-icon-outlined {
  background: #1AA64A;
}
.ux4g-otp-resend,
.ux4g-otp-helper {
  color: #737373 !important;
  font-size: 14px;
  font-weight: 400;
}
.ux4g-otp-resend-disabled {
  color: #A1A1A1 !important;
  font-size: 14px;
  font-weight: 400;
}
.ux4g-otp-success .ux4g-otp-slot {
  border-color: var(--ux4g-border-color-success-strong);
}
.ux4g-otp-success .ux4g-otp-status {
  color: var(--ux4g-text-status-success) !important;
}
.ux4g-otp-error .ux4g-otp-slot {
  border-color: var(--ux4g-border-color-error-strong);
}
.ux4g-otp-error .ux4g-otp-status {
  color: var(--ux4g-text-status-error) !important;
}
.ux4g-otp-error .ux4g-otp-status .ux4g-icon-outlined {
  color: var(--ux4g-icon-status-error) !important;
}
.ux4g-otp-locked .ux4g-otp-slot {
  border-color: var(--ux4g-border-color-neutral-subtle);
  background: var(--ux4g-bg-neutral-subtle);
}
.ux4g-otp-locked .ux4g-otp-input {
  color: var(--ux4g-text-neutral-disabled) !important;
}
.ux4g-otp-locked .ux4g-otp-input::placeholder {
  color: var(--ux4g-text-neutral-disabled) !important;
}
.ux4g-otp-locked .ux4g-otp-status {
  color: var(--ux4g-text-neutral-tertiary) !important;
}
.ux4g-otp-locked .ux4g-otp-status .ux4g-icon-outlined {
  color: #737373 !important;
}
.ux4g-otp-demo {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-l);
  width: max-content;
  padding: var(--ux4g-padding-xl);
  border: var(--ux4g-border-width-sm) dashed var(--ux4g-border-color-primary-default);
  border-radius: var(--ux4g-radius-md);
  background: var(--ux4g-bg-neutral-elevated);
}
@media (max-width: 767px) {
  .ux4g-otp {
    display: flex;
    width: 100%;
    max-width: 100%;
  }
  .ux4g-otp-group {
    width: 100%;
  }
  .ux4g-otp-slot {
    min-width: 0;
    flex: 1 1 0%;
  }
  .ux4g-otp-separator {
    display: none;
  }
}
@keyframes ux4g-otp-caret-blink {
  0%,
  49% {
    background-size: var(--ux4g-border-width-sm) var(--ux4g-sz-16);
  }
  50%,
  100% {
    background-size: var(--ux4g-border-width-sm) 0;
  }
}
@keyframes ux4g-otp-shake-x {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-6px);
  }
  80% {
    transform: translateX(6px);
  }
}
 
 /* iPad / tablet */
@media (min-width: 768px) and (max-width:1024px) {
  .ux4g-otp-demo {
    min-width: 100%;
    width: 100%;
  }
}
/* =========================================
   DRAFT STATUS BAR PATTERN
   ========================================= */

.ux4g-draft-status-bar {
    display: var(--ux4g-d-flex, flex);
    align-items: var(--ux4g-ai-center, center);
    justify-content: var(--ux4g-jc-between, space-between);
    padding-inline: var(--ux4g-padding-xl);
    padding-block: var(--ux4g-padding-m);
    border-radius: var(--ux4g-radius-md);
}

.ux4g-auto-draft-status-bar {
    display: var(--ux4g-d-flex, flex);
    align-items: var(--ux4g-ai-center, center);
    justify-content: var(--ux4g-jc-end, end);
    padding-inline: var(--ux4g-padding-xl);
    padding-block: var(--ux4g-padding-m);
    border-radius: var(--ux4g-radius-md);
}

.ux4g-success-draft-status-bar {
    display: var(--ux4g-d-flex, flex);
    align-items: var(--ux4g-ai-center, center);
    padding-inline: var(--ux4g-padding-xl);
    padding-block: var(--ux4g-padding-m);
    border-radius: var(--ux4g-radius-md);
}

/* Responsive Styles */
@media (max-width: 767px) {
    .ux4g-draft-status-bar {
        flex-direction: var(--ux4g-fd-column, column);
        align-items: var(--ux4g-ai-stretch, stretch);
        justify-content: var(--ux4g-jc-start, flex-start);
        gap: var(--ux4g-stack-m);
        padding-inline: var(--ux4g-padding-m);
    }

    .ux4g-auto-draft-status-bar {
        flex-direction: var(--ux4g-fd-row, row);
        align-items: var(--ux4g-ai-center, center);
        justify-content: var(--ux4g-jc-end, flex-end);
        padding-inline: var(--ux4g-padding-m);
    }

    .ux4g-success-draft-status-bar {
        flex-direction: var(--ux4g-fd-row, row);
        align-items: var(--ux4g-ai-center, center);
        justify-content: var(--ux4g-jc-start, flex-start);
        padding-inline: var(--ux4g-padding-m);
    }
    
    /* Hide the token icon button in mobile for first variant */
    .ux4g-draft-status-bar > .ux4g-d-flex > .ux4g-icon-btn.ux4g-bg-warning-subtle {
        display: var(--ux4g-d-none, none);
    }
    
    /* Make the title, tag, and date stack on mobile for the first variant */
    .ux4g-draft-status-bar .ux4g-flex-column > .ux4g-d-flex {
        flex-direction: var(--ux4g-fd-column, column);
        align-items: var(--ux4g-ai-start, flex-start) !important;
        gap: var(--ux4g-stack-xs);
        width: var(--ux4g-w-full, 100%);
    }
    
    .ux4g-draft-status-bar .ux4g-flex-column {
        width: var(--ux4g-w-full, 100%);
    }
    
    .ux4g-draft-status-bar > .ux4g-d-flex:first-child {
        width: var(--ux4g-w-full, 100%);
    }

    /* Discard and Resume buttons should be 50% width on mobile */
    .ux4g-draft-status-bar > .ux4g-d-flex:last-child:has(.ux4g-btn-primary) {
        display: var(--ux4g-d-flex, flex);
        flex-direction: var(--ux4g-fd-row, row);
        width: var(--ux4g-w-full, 100%);
        gap: var(--ux4g-stack-m);
        margin-top: var(--ux4g-stack-xs);
    }
    
    .ux4g-draft-status-bar > .ux4g-d-flex:last-child:has(.ux4g-btn-primary) > button {
        flex: var(--ux4g-flex-1-1-0, 1 1 0%);
        width: var(--ux4g-w-full, 100%);
        display: var(--ux4g-d-flex, flex);
        justify-content: var(--ux4g-jc-center, center);
        align-items: var(--ux4g-ai-center, center);
        text-align: var(--ux4g-ta-center, center);
    }
    
    /* 3. Urgent Expiry */
    .ux4g-draft-status-bar.ux4g-bg-warning-strong > .ux4g-d-flex > .ux4g-icon-btn {
        display: var(--ux4g-d-none, none);
    }
    
    /* 4. Expired */
    .ux4g-draft-status-bar.ux4g-bg-error-soft {
        flex-direction: var(--ux4g-fd-row, row);
        align-items: var(--ux4g-ai-center, center);
        justify-content: var(--ux4g-jc-between, space-between);
    }
    
    .ux4g-draft-status-bar.ux4g-bg-error-soft > .ux4g-d-flex {
        flex: var(--ux4g-flex-1, 1);
    }
}
/* iPad Styles */
@media (min-width: 768px) and (max-width: 1024px) {
    .ux4g-draft-status-bar .ux4g-flex-column > .ux4g-d-flex {
        flex-direction: var(--ux4g-fd-column, column);
        align-items: var(--ux4g-ai-start, flex-start) !important;
        gap: var(--ux4g-stack-xs);
    }
}

/* .ux4g-upload-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ux4g-section-xl);
} */

.ux4g-upload-showcase-item {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-xs);

}

.ux4g-upload {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-inline-l);
  inline-size: 100%;
}

.ux4g-upload-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ux4g-inline-none);
  min-block-size: 256px;
  padding: var(--ux4g-padding-l);
  border-radius: var(--ux4g-radius-md);
  background: var(--ux4g-bg-neutral-elevated);
  text-align: center;
}

.ux4g-upload-state-default .ux4g-upload-panel,
.ux4g-upload-state-default-vle .ux4g-upload-panel,
.ux4g-upload-state-uploaded .ux4g-upload-panel,
.ux4g-upload-state-uploaded-vle .ux4g-upload-panel {
  border: var(--ux4g-border-width-md) dashed var(--ux4g-border-color-primary-strong);
}

.ux4g-upload-state-selecting .ux4g-upload-panel,
.ux4g-upload-state-scanning .ux4g-upload-panel {
  border: var(--ux4g-border-width-md) solid var(--ux4g-border-color-primary-strong);
  background: var(--ux4g-bg-primary);
}

.ux4g-upload-state-selecting .ux4g-upload-content {
  justify-content: center;
  padding-block: 0;
}

.ux4g-upload-state-selecting .ux4g-upload-icon-wrap,
.ux4g-upload-state-selecting .ux4g-upload-hint,
.ux4g-upload-state-selecting .ux4g-upload-divider,
.ux4g-upload-state-selecting .ux4g-upload-actions,
.ux4g-upload-state-selecting .ux4g-upload-btn,
.ux4g-upload-state-selecting .ux4g-upload-file-list,
.ux4g-upload-state-selecting .ux4g-upload-more,
.ux4g-upload-state-selecting .ux4g-upload-error-msg {
  display: none !important;
}

.ux4g-upload-state-selecting .ux4g-upload-option,
.ux4g-upload-state-selecting .ux4g-upload-titleblock {
  gap: 0;
}

.ux4g-upload-state-error .ux4g-upload-panel {
  border: var(--ux4g-border-width-md) solid var(--ux4g-border-color-error-strong);
  background: var(--ux4g-bg-error);
}

.ux4g-upload-panel:focus-visible {
  outline: var(--ux4g-border-width-md) solid var(--ux4g-border-color-primary-strong);
  outline-offset: var(--ux4g-border-width-sm);
}

.ux4g-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  gap: var(--ux4g-stack-l);
  padding-block: var(--ux4g-padding-xl);
}

.ux4g-upload-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  gap: var(--ux4g-inline-m);
}

.ux4g-upload-state-default-vle .ux4g-upload-option,
.ux4g-upload-state-uploaded-vle .ux4g-upload-option {
  gap: var(--ux4g-stack-l);
}

.ux4g-upload-titleblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 100%;
  gap: var(--ux4g-stack-xs);
}

.ux4g-upload-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 32px;
  min-block-size: 32px;
}

.ux4g-upload-icon {
  color: var(--ux4g-text-brand-primary-default) !important;
  font-size: var(--ux4g-fs-24);
  line-height: 1;
}

.ux4g-upload-state-error .ux4g-upload-icon-wrap {
  color: var(--ux4g-border-color-error-strong);
}

.ux4g-upload-state-selecting .ux4g-upload-icon-wrap,
.ux4g-upload-state-scanning .ux4g-upload-icon-wrap {
  color: var(--ux4g-border-color-primary-strong);
}

.ux4g-upload-state-error .ux4g-upload-icon {
  color: var(--ux4g-border-color-error-strong) !important;
  /* color: var(--ux4g-text-brand-primary-default); */
}

.ux4g-upload-spinner {
  inline-size: var(--ux4g-fs-24);
  block-size: var(--ux4g-fs-24);
}

.ux4g-upload-heading,
.ux4g-upload-file-name,
.ux4g-upload-file-description,
.ux4g-upload-hint {
  margin: 0;
}

.ux4g-upload-hint {
  max-inline-size: 340px;
}

.ux4g-upload-divider {
  display: flex;
  align-items: center;
  inline-size: 100%;
  gap: var(--ux4g-stack-xs);
}

.ux4g-upload-divider-line {
  flex: 1 1 auto;
  block-size: var(--ux4g-border-width-sm);
  background: var(--ux4g-border-color-neutral-subtle);
}

.ux4g-upload-actions {
  display: flex;
  gap: var(--ux4g-inline-l);
  inline-size: 100%;
}

.ux4g-upload-actions .ux4g-upload-btn {
  flex: 1 1 0;
}

.ux4g-upload-btn {
  justify-content: center;
}

.ux4g-upload-state-default .ux4g-upload-btn,
.ux4g-upload-state-uploaded .ux4g-upload-btn {
  flex: 0 0 auto;
}

.ux4g-btn-outline-primary .ux4g-icon-outlined {
  color: var(--ux4g-text-brand-primary-default);
}


.ux4g-upload-error-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--ux4g-inline-xs);
  margin: 0;
  color: var(--ux4g-text-error-default);
}

.ux4g-upload-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-inline-m);
  margin: 0;
  padding: 0;
}

.ux4g-upload-file-item {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-m);
  padding-inline: var(--ux4g-padding-m);
  padding-block: var(--ux4g-padding-s);
  border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
  border-radius: var(--ux4g-padding-xs);
  background: var(--ux4g-bg-neutral-elevated);
}

.ux4g-upload-file-item-uploading,
.ux4g-upload-file-item-error {
  flex-direction: column;
  align-items: stretch;
}

.ux4g-upload-file-row {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-m);
  inline-size: 100%;
}

.ux4g-upload-file-leading,
.ux4g-upload-file-statusbox,
.ux4g-upload-file-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 32px;
  min-block-size: 32px;
}

.ux4g-upload-file-icon,
.ux4g-upload-file-remove .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-24);
  color: var(--ux4g-text-neutral-secondary);
  line-height: 1;
}

.ux4g-upload-file-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
}

.ux4g-upload-file-name,
.ux4g-upload-file-description {
  display: block;
  inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ux4g-upload-file-name {
  color: var(--ux4g-text-status-success);
}

.ux4g-upload-file-description {
  color: var(--ux4g-text-neutral-tertiary);
}

.ux4g-upload-file-item-uploading .ux4g-upload-file-name {
  color: var(--ux4g-text-neutral-primary);
}

.ux4g-upload-file-item-error .ux4g-upload-file-name,
.ux4g-upload-file-item-error .ux4g-upload-file-description,
.ux4g-upload-file-item-error .ux4g-upload-file-icon {
  color: var(--ux4g-text-error-default);
}

.ux4g-upload-file-status {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border: var(--ux4g-border-width-md) solid var(--ux4g-bg-neutral);
  border-radius: 999px;
  background: #128937;
  color: #fff;
  font-size: var(--ux4g-fs-16);
  line-height: 1;
}

.ux4g-upload-file-statusbox .ux4g-icon-outlined {
  color: #fff !important;
}

:root[data-theme="dark"] .ux4g-upload-file-status {
  background: #1AA64A;
}

.ux4g-upload-file-remove {
  padding: var(--ux4g-padding-none);
  border: 0;
  background: transparent;
}

.ux4g-upload-file-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
}

.ux4g-upload-file-progressbar {
  position: relative;
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 8px;
  border-radius: var(--ux4g-radius-md);
  background: var(--ux4g-bg-neutral-subtle);
}

.ux4g-upload-file-progressvalue {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 2.82%;
  border-radius: var(--ux4g-radius-xs);
  background: var(--ux4g-bg-primary-strong);
}

.ux4g-upload-file-progresslabel {
  color: var(--ux4g-text-neutral-primary);
  font-family: var(--ux4g-ff);
  font-size: 12px;
  font-weight: var(--ux4g-font-weight-regular);
  line-height: 16px;
  letter-spacing: 0.4px;
}

.ux4g-upload-file-retry {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-xs);
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ux4g-text-link-default-default);
}

.ux4g-upload-file-retry .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-16);
  line-height: 1;
}

.ux4g-upload-more {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ux4g-text-link-default-default);
}

.ux4g-upload-state-scanning .ux4g-upload-actions,
.ux4g-upload-state-scanning .ux4g-upload-divider,
.ux4g-upload-state-scanning .ux4g-upload-error-msg,
.ux4g-upload-state-scanning .ux4g-upload-file-list,
.ux4g-upload-state-scanning .ux4g-upload-more {
  display: none;
}

.ux4g-upload-state-error .ux4g-upload-hint {
  color: var(--ux4g-text-error-default);
}

@media (max-width: 767px) {
  .ux4g-upload-showcase-item {
    max-inline-size: none;
    min-inline-size: 100%;
  }

  .ux4g-upload-actions {
    flex-direction: column;
  }
}

.ux4g-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: var(--ux4g-ta-center);
    row-gap: var(--ux4g-stack-xs);
}

@media (max-width: 768px) {
    .ux4g-empty-state {
        row-gap: var(--ux4g-stack-s);
    }
    .ux4g-empty-state .ux4g-btn-md {
        min-height: var(--ux4g-size-48);
        padding: var(--ux4g-padding-none) var(--ux4g-padding-l);
    }
}

.ux4g-icon-outlined.ux4g-empty-state-icon {
    width: var(--ux4g-size-40);
    height: var(--ux4g-size-40);
    font-size: var(--ux4g-size-40);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ux4g-empty-state-content {
    display: flex;
    flex-direction: column;
    row-gap: var(--ux4g-stack-m);
    max-width: 330px;
    min-width: 330px;
}

@media (max-width: 768px) {
    .ux4g-empty-state-content {
        row-gap: var(--ux4g-stack-l);
    }
}

.ux4g-empty-state-content .ux4g-body-m-default {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-empty-state-content .ux4g-title-l-strong {
    color: var(--ux4g-text-neutral-primary);
}
.ux4g-feedback {
    display: flex;
    flex-direction: column;
    row-gap: var(--ux4g-stack-m);
    border-radius: var(--ux4g-radius-lg);
    border: 1px solid var(--ux4g-border-color-neutral-default);
    background-color: var(--ux4g-bg-neutral-elevated);
    box-shadow: var(--ux4g-shadow-l2);
    padding: var(--ux4g-padding-xl) !important;
    box-sizing: border-box;
    height: fit-content;
}

.feedback-thumb-wrapper {
    display: flex;
    align-items: center;
    column-gap: var(--ux4g-inline-m) !important;
}

.feedback-thumb-wrapper .ux4g-btn-outline-primary {
    background-color: var(--ux4g-bg-neutral-elevated);
    color: var(--ux4g-text-neutral-secondary);
    border-color: var(--ux4g-border-color-neutral-default);
}

.feedback-thumb-up,
.feedback-thumb-down {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: var(--ux4g-stack-xs) !important;
}


.ux4g-feedback-star {
    font-size: var(--ux4g-fs-28);
    cursor: pointer;
    color: var(--ux4g-text-neutral-emphasis) !important;
}

/* Default active color (for ratings 3, 4, 5) */
.ux4g-feedback-star.active {
    color: var(--ux4g-bg-yellow-strong) !important;
    font-variation-settings: 'FILL' 1;
}

/* Error color for ratings 1 and 2 */
[data-rating="1"] .ux4g-feedback-star.active,
[data-rating="2"] .ux4g-feedback-star.active {
    color: var(--ux4g-bg-error-strong) !important;
}

.ux4g-feedback-chip-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ux4g-inline-s, 8px);
}

.ux4g-feedback-chip-wrapper .ux4g-filter-chip-md:hover {
    background-color: var(--ux4g-bg-primary-soft);
    color: var(--ux4g-text-brand-primary-default);
}

.feedback-nps-button {
    width: 32px;
    height: 36px;
    border-radius: var(--ux4g-radius-sm);
    border: 1px solid var(--ux4g-border-color-neutral-default);
    cursor: pointer;
}

/* NPS Dynamic Active Colors */
/* Default active / fallback */
.feedback-nps-button.active {
    border-color: transparent;
}

/* 0 to 3: Error (Red) */
[data-nps-rating="0"] .feedback-nps-button.active,
[data-nps-rating="1"] .feedback-nps-button.active,
[data-nps-rating="2"] .feedback-nps-button.active,
[data-nps-rating="3"] .feedback-nps-button.active {
    background-color: var(--ux4g-bg-error-soft);
    color: var(--ux4g-text-status-error);
}

/* 4 to 6: Warning (Orange) */
[data-nps-rating="4"] .feedback-nps-button.active,
[data-nps-rating="5"] .feedback-nps-button.active,
[data-nps-rating="6"] .feedback-nps-button.active {
    background-color: var(--ux4g-bg-warning-soft);
    color: var(--ux4g-text-status-warning);
}

/* 7 to 10: Success (Green) */
[data-nps-rating="7"] .feedback-nps-button.active,
[data-nps-rating="8"] .feedback-nps-button.active,
[data-nps-rating="9"] .feedback-nps-button.active,
[data-nps-rating="10"] .feedback-nps-button.active {
    background-color: var(--ux4g-bg-success-soft);
    color: var(--ux4g-text-status-success);
}


.ux4g-feedback-nps-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--ux4g-inline-s, 8px);
    align-self: stretch;
    flex-wrap: wrap;
    max-width: 280px;
    margin-inline: auto;
}

.feedback-emoji-button {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ux4g-bg-neutral-soft);
    border-radius: var(--ux4g-radius-sm);
    border: none;
    padding: 10px;
    cursor: pointer;
}

.ux4g-feedback > .ux4g-d-flex:has(> .feedback-emoji-button) {
    flex-wrap: wrap;
    gap: var(--ux4g-inline-s, 8px);
}

@media (max-width: 360px) {
    .ux4g-feedback {
        padding: var(--ux4g-padding-l) !important;
    }
}

.feedback-emoji-button .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-32);
    color: var(--ux4g-text-neutral-tertiary);
}

/* Active state for each specific emoji using nth-child */
/* 1. mood_bad */
.feedback-emoji-button:nth-child(1).active {
    background-color: var(--ux4g-bg-error-soft);
}

.feedback-emoji-button:nth-child(1).active .ux4g-icon-outlined {
    color: var(--ux4g-icon-status-error, var(--ux4g-text-status-error));
    font-size: var(--ux4g-fs-36);
}

/* 2. sentiment_dissatisfied */
.feedback-emoji-button:nth-child(2).active {
    background-color: var(--ux4g-bg-error);
}

.feedback-emoji-button:nth-child(2).active .ux4g-icon-outlined {
    color: var(--ux4g-icon-status-error, var(--ux4g-text-status-error));
    font-size: var(--ux4g-fs-36);
}

/* 3. sentiment_neutral */
.feedback-emoji-button:nth-child(3).active {
    background-color: var(--ux4g-bg-warning-soft);
}

.feedback-emoji-button:nth-child(3).active .ux4g-icon-outlined {
    color: var(--ux4g-icon-status-warning, var(--ux4g-text-status-warning));
    font-size: var(--ux4g-fs-36);
}

/* 4. sentiment_satisfied */
.feedback-emoji-button:nth-child(4).active {
    background-color: var(--ux4g-bg-success, var(--ux4g-bg-success-subtle));
}

.feedback-emoji-button:nth-child(4).active .ux4g-icon-outlined {
    color: var(--ux4g-icon-status-success, var(--ux4g-text-status-success));
    font-size: var(--ux4g-fs-36);
}

/* 5. mood */
.feedback-emoji-button:nth-child(5).active {
    background-color: var(--ux4g-bg-success-soft);
}

.feedback-emoji-button:nth-child(5).active .ux4g-icon-outlined {
    color: var(--ux4g-icon-status-success, var(--ux4g-text-status-success));
    font-size: var(--ux4g-fs-36);
}

.ux4g-emoji-caption {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: var(--ux4g-inline-xl);
}

.ux4g-emoji-caption .ux4g-emoji-desc {
    color: var(--ux4g-text-neutral-tertiary);
    display: flex;
    align-items: center;
    column-gap: var(--ux4g-inline-xs);
}

.feedback-submitted-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--ux4g-bg-success-soft);
    padding-block: var(--ux4g-padding-s);
    padding-inline: var(--ux4g-padding-m);
    row-gap: 16px;
}

/* =========================================================
   CHIP BASE (all chip-group variants)
   ========================================================= */

:is(.ux4g-filter-chip-group, .ux4g-choice-chip-group) {
    color: var(--ux4g-text-neutral-primary);
  font-size: var(--ux4g-fs-14);
  border-radius: var(--ux4g-radius-sm);
  padding: var(--ux4g-space-none) var(--ux4g-padding-xs);
  border: var(--ux4g-border-thin) solid transparent;
  transition:
    background-color 220ms cubic-bezier(.25, .8, .25, 1),
    border-color 220ms cubic-bezier(.25, .8, .25, 1);
}

/* Sizes (Responsive) */
:is(.ux4g-filter-chip-group, .ux4g-choice-chip-group) {
    min-height: 32px; /* Mobile */
}

@media (min-width: 768px) {
    :is(.ux4g-filter-chip-group, .ux4g-choice-chip-group) {
        min-height: 36px; /* Desktop */
    }
}


/* =========================================================
   FILTER CHIP (ux4g-chip-group) states
   ========================================================= */

.ux4g-filter-chip-group {
    background-color: var(--ux4g-bg-neutral);
    border-color: var(--ux4g-border-color-neutral-default);
}

.ux4g-filter-chip-group:hover {
    background-color: var(--ux4g-bg-neutral-subtle);
    border-color: var(--ux4g-border-color-neutral-subtle);
}

.ux4g-filter-chip-group.active {
    background-color: var(--ux4g-bg-primary-soft);
    color: var(--ux4g-bg-primary-strong);
    border-color: var(--ux4g-bg-primary-emphasis);
}

.ux4g-filter-chip-group.active:hover {
    background-color: var(--ux4g-bg-primary-soft);
    border-color: var(--ux4g-bg-primary-soft);
}

.ux4g-filter-chip-group.active .ux4g-icon-outlined {
    color: var(--ux4g-bg-primary-strong);
}

/* =========================================================
   CHOICE CHIP (ux4g-choice-chip-group) states
   ========================================================= */
.ux4g-choice-chip-group {
    background-color: var(--ux4g-bg-neutral);
    border-color: var(--ux4g-border-color-neutral-default);
}

.ux4g-choice-chip-group.active {
    background-color: var(--ux4g-bg-primary-strong);
    color: var(--ux4g-bg-neutral);
}

.ux4g-choice-chip-group.active .ux4g-icon-outlined {
    color: var(--ux4g-bg-neutral);
}

.ux4g-choice-chip-group:hover {
    box-shadow: var(--ux4g-shadow-l1);
}

.ux4g-choice-chip-group.active:hover {
    border-color: var(--ux4g-bg-neutral);
}



/* =========================================================
   DISABLED (shared)
   ========================================================= */


:is(.ux4g-filter-chip-group, .ux4g-choice-chip-group)[disabled] {
    --ux4g-text-current: var(--ux4g-text-link-disabled);
    color: var(--ux4g-text-current);
    cursor: not-allowed;
    text-decoration: none;
    pointer-events: none;
    border-color: var(--ux4g-border-color-neutral-subtle);
}

.ux4g-choice-chip-group[disabled] {
    background-color: var(--ux4g-bg-neutral-subtle);
    --ux4g-text-current: var(--ux4g-text-neutral-disabled);
    cursor: not-allowed;
    text-decoration: none;
    pointer-events: none;
}
.ux4g-sla-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-section-2xl, 48px);
}

.ux4g-sla-group {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-l, 24px);
}

.ux4g-sla-grid {
  display: grid;
  gap: var(--ux4g-section-xl, 32px);
}

.ux4g-sla-grid-circular {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.ux4g-sla-grid-linear {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.ux4g-sla-grid-badge {
  grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
  align-items: start;
}

.ux4g-sla-variant-column {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-s, 12px);
}

.ux4g-sla-variant-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-m, 16px);
}

.ux4g-sla-circle {
  --ux4g-sla-progress: 50;
  --ux4g-sla-fill-start: var(--ux4g-bg-primary-subtle);
  --ux4g-sla-fill-end: var(--ux4g-bg-primary-strong);
  --ux4g-sla-description-color: var(--ux4g-text-neutral-tertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-stack-s);
  text-align: center;
}

.ux4g-sla-circle-indicator {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 80px;
  block-size: 80px;
}

.ux4g-sla-circle-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--ux4g-radius-full);
  background:
    conic-gradient(from -90deg,
      var(--ux4g-sla-fill-start) 0,
      var(--ux4g-sla-fill-end) calc(var(--ux4g-sla-progress) * 1%),
      var(--ux4g-border-color-neutral-subtle, #e5e5e5) calc(var(--ux4g-sla-progress) * 1%) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
}

.ux4g-sla-circle-track {
  position: absolute;
  inset: 8px;
  border-radius: var(--ux4g-radius-full);
  background: var(--ux4g-bg-neutral-elevated);
}

.ux4g-sla-circle-metric {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  max-inline-size: 52px;
}

.ux4g-sla-circle-value {
  color: var(--ux4g-text-neutral-primary);
  font-size: var(--ux4g-fs-16);
  line-height: var(--ux4g-lh-20);
  font-weight: var(--ux4g-fw-bold);
}

.ux4g-sla-circle-meta {
  color: var(--ux4g-text-neutral-tertiary);
  font-size: var(--ux4g-size-10);
  line-height: 1.2;
}

.ux4g-sla-circle-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-stack-xs);
}

.ux4g-sla-circle-description {
  margin: 0;
  color: var(--ux4g-sla-description-color);
}

.ux4g-sla-linear {
  --ux4g-sla-progress: 50;
  --ux4g-sla-linear-fill: linear-gradient(90deg, var(--ux4g-bg-primary-subtle) 0%, var(--ux4g-bg-primary-strong) 100%);
  --ux4g-sla-linear-soft-bg: var(--ux4g-bg-primary);
  --ux4g-sla-linear-icon: var(--ux4g-text-brand-primary-default);
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-s);
  inline-size: 100%;
}

.ux4g-sla-linear-leading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  flex-shrink: 0;
  border-radius: var(--ux4g-radius-full);
  background: var(--ux4g-sla-linear-soft-bg);
  color: var(--ux4g-sla-linear-icon);
}

.ux4g-sla-linear-leading .ux4g-icon-outlined {
  font-size: var(--ux4g-fs-20);
  color: var(--ux4g-sla-linear-icon);
}

.ux4g-sla-linear-body {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  flex-direction: column;
  gap: var(--ux4g-stack-2xs);
}

.ux4g-sla-linear-head,
.ux4g-sla-linear-foot {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-s);
}

.ux4g-sla-linear-head {
  justify-content: space-between;
}

.ux4g-sla-linear-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-s);
  min-inline-size: 0;
}

.ux4g-sla-linear-title,
.ux4g-sla-linear-hint,
.ux4g-sla-linear-value {
  margin: 0;
}

.ux4g-sla-linear-title {
  color: var(--ux4g-text-neutral-secondary);
}

.ux4g-sla-linear-action {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ux4g-text-link-default-default);
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--ux4g-fw-medium);
  cursor: pointer;
}

.ux4g-sla-linear .ux4g-sla-linear-hint {
  color: var(--ux4g-text-neutral-tertiary);
  font-size: var(--ux4g-fs-12);
  line-height: var(--ux4g-lh-16);
  font-weight: var(--ux4g-font-weight-regular);
  letter-spacing: 0;
  white-space: nowrap;
}

.ux4g-sla-linear-track {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  block-size: 8px;
  border-radius: 0;
  background: var(--ux4g-bg-neutral-subtle);
}

.ux4g-sla-linear-fill {
  inline-size: calc(var(--ux4g-sla-progress) * 1%);
  block-size: 100%;
  border-radius: inherit;
  background: var(--ux4g-sla-linear-fill);
}

.ux4g-sla-linear-foot {
  justify-content: flex-end;
}

.ux4g-sla-linear-value {
  color: var(--ux4g-text-neutral-secondary);
}

.ux4g-sla-linear-rounded .ux4g-sla-linear-track,
.ux4g-sla-linear-rounded .ux4g-sla-linear-fill {
  border-radius: var(--ux4g-radius-full);
}

.ux4g-sla-badge {
  --ux4g-sla-badge-status: var(--ux4g-text-brand-primary-default);
  --ux4g-sla-badge-surface: var(--ux4g-bg-neutral-elevated);
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-inline-s);
  min-block-size: 20px;
  padding: var(--ux4g-padding-2xs) var(--ux4g-padding-xs);
  border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
  background: var(--ux4g-sla-badge-surface);
  color: var(--ux4g-text-neutral-primary);
}

.ux4g-sla-badge-rect {
  border-radius: var(--ux4g-radius-sm);
}

.ux4g-sla-badge-pill {
  border-radius: var(--ux4g-radius-full);
}

.ux4g-sla-badge-label,
.ux4g-sla-badge-status {
  margin: 0;
  white-space: nowrap;
}

.ux4g-sla-badge-label {
  color: var(--ux4g-text-neutral-primary);
}

.ux4g-sla-badge-divider {
  inline-size: 1px;
  block-size: 12px;
  align-self: center;
  background: var(--ux4g-border-color-neutral-subtle);
}

.ux4g-sla-badge .ux4g-sla-badge-status {
  color: var(--ux4g-sla-badge-status);
}

.ux4g-sla-status-default {
  --ux4g-sla-fill-start: var(--ux4g-bg-primary-subtle);
  --ux4g-sla-fill-end: var(--ux4g-bg-primary-strong);
  --ux4g-sla-linear-soft-bg: var(--ux4g-bg-primary);
  --ux4g-sla-linear-icon: var(--ux4g-text-brand-primary-default);
  --ux4g-sla-linear-fill: linear-gradient(90deg, var(--ux4g-bg-primary-subtle) 0%, var(--ux4g-bg-primary-strong) 100%);
  --ux4g-sla-badge-status: var(--ux4g-text-brand-primary-default);
}

.ux4g-sla-status-warning {
  --ux4g-sla-fill-start: var(--ux4g-bg-warning-subtle);
  --ux4g-sla-fill-end: var(--ux4g-bg-warning-strong);
  --ux4g-sla-linear-soft-bg: var(--ux4g-bg-warning);
  --ux4g-sla-linear-icon: var(--ux4g-icon-status-warning);
  --ux4g-sla-linear-fill: linear-gradient(90deg, var(--ux4g-bg-warning-subtle) 0%, var(--ux4g-bg-warning-strong) 100%);
  --ux4g-sla-badge-status: var(--ux4g-text-status-warning);
}

.ux4g-sla-status-error {
  --ux4g-sla-fill-start: var(--ux4g-bg-error-subtle);
  --ux4g-sla-fill-end: var(--ux4g-bg-error-strong);
  --ux4g-sla-description-color: var(--ux4g-text-status-error);
  --ux4g-sla-linear-soft-bg: var(--ux4g-bg-error);
  --ux4g-sla-linear-icon: var(--ux4g-icon-status-error);
  --ux4g-sla-linear-fill: linear-gradient(90deg, var(--ux4g-bg-error-subtle) 0%, var(--ux4g-bg-error-strong) 100%);
  --ux4g-sla-badge-status: var(--ux4g-text-status-error);
}

.ux4g-sla-status-success {
  --ux4g-sla-fill-start: var(--ux4g-bg-success-subtle);
  --ux4g-sla-fill-end: var(--ux4g-bg-success-strong);
  --ux4g-sla-linear-soft-bg: var(--ux4g-bg-success);
  --ux4g-sla-linear-icon: var(--ux4g-icon-status-success);
  --ux4g-sla-linear-fill: linear-gradient(90deg, var(--ux4g-bg-success-subtle) 0%, var(--ux4g-bg-success-strong) 100%);
  --ux4g-sla-badge-status: var(--ux4g-text-status-success);
}

.ux4g-sla-status-default .ux4g-badge-dot-primary {
  background: var(--ux4g-bg-primary-strong);
}

.ux4g-sla-status-warning .ux4g-badge-dot-warning {
  background: var(--ux4g-bg-warning-strong);
}

.ux4g-sla-status-error .ux4g-badge-dot-danger {
  background: var(--ux4g-bg-error-strong);
}

.ux4g-sla-status-success .ux4g-badge-dot-success {
  background: var(--ux4g-bg-success-strong);
}

.ux4g-sla-status-info .ux4g-badge-dot-info {
  background: var(--ux4g-bg-info-strong);
}

.ux4g-sla-status-disabled .ux4g-badge-dot-neutral {
  background: var(--ux4g-bg-neutral-subtle);
}

.ux4g-sla-status-disabled .ux4g-sla-badge-label {
  color: var(--ux4g-text-neutral-disabled);
}

.ux4g-sla-status-info {
  --ux4g-sla-fill-start: var(--ux4g-bg-info-subtle);
  --ux4g-sla-fill-end: var(--ux4g-bg-info-strong);
  --ux4g-sla-linear-icon: var(--ux4g-icon-status-info);
  --ux4g-sla-linear-fill: var(--ux4g-bg-info-strong);
  --ux4g-sla-badge-status: var(--ux4g-text-status-info);
}

.ux4g-sla-status-disabled {
  --ux4g-sla-fill-start: var(--ux4g-bg-neutral-subtle);
  --ux4g-sla-fill-end: var(--ux4g-bg-neutral-emphasis);
  --ux4g-sla-linear-soft-bg: var(--ux4g-bg-neutral-subtle);
  --ux4g-sla-linear-icon: var(--ux4g-text-neutral-disabled);
  --ux4g-sla-linear-fill: var(--ux4g-bg-neutral-emphasis);
  --ux4g-sla-badge-status: var(--ux4g-text-neutral-disabled);
}

@media (max-width: 767px) {
  .ux4g-sla-grid-linear {
    grid-template-columns: 1fr;
  }

  .ux4g-sla-linear {
    align-items: flex-start;
  }
}

.ux4g-form-group {
    margin-bottom: var(--ux4g-margin-xs);
}



.ux4g-progress-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-section-2xl, 48px);
  min-inline-size: 0;
}

.ux4g-progress-group {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-l, 24px);
  min-inline-size: 0;
}

.ux4g-progress-grid {
  display: grid;
  gap: var(--ux4g-section-xl, 32px);
}

.ux4g-progress-grid-bar {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ux4g-progress-grid-circle {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.ux4g-progress-circle-matrix {
  display: grid;
  gap: var(--ux4g-stack-l, 24px);
  min-inline-size: 0;
}

.ux4g-progress-circle-size-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ux4g-inline-l, 24px);
  align-items: start;
}

.ux4g-progress-circle-headings {
  display: none;
}

.ux4g-progress-grid-half {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ux4g-progress-variant-column {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-s, 12px);
  min-inline-size: 0;
}

.ux4g-progress-variant-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-m, 16px);
}

.ux4g-progress-variant-stack-compact {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-stack-s, 12px);
}

.ux4g-progress-size-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-stack-s, 12px);
  min-inline-size: 0;
  inline-size: auto;
}

.ux4g-progress-size-label {
  color: var(--ux4g-text-neutral-secondary);
  text-align: center;
}

[data-ux-progress-bar],
.ux4g-progress-bar {
  --ux4g-progress-value: 50;
  --ux4g-progress-fill-start: var(--ux4g-bg-primary-subtle);
  --ux4g-progress-fill-end: var(--ux4g-bg-primary-strong);
  --ux4g-progress-track: var(--ux4g-bg-neutral-subtle);
  --ux4g-progress-label-outside: var(--ux4g-text-neutral-secondary);
  --ux4g-progress-label-inside: var(--ux4g-text-neutral-inverse);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ux4g-inline-xs, 4px);
  inline-size: 100%;
}

.ux4g-progress-bar-track {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  block-size: 8px;
  background: var(--ux4g-progress-track);
}

.ux4g-progress-bar-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-inline-size: 1px;
  inline-size: max(calc(var(--ux4g-progress-value) * 1%), 1px);
  block-size: 100%;
  padding-inline-end: 0;
  background: linear-gradient(90deg, var(--ux4g-progress-fill-start) 0%, var(--ux4g-progress-fill-end) 100%);
}

[data-ux-progress-bar][data-ux-label-placement="inside"] {
  gap: 0;
}

[data-ux-progress-bar][data-ux-label-placement="inside"] .ux4g-progress-bar-track {
  block-size: 20px;
}

[data-ux-progress-bar][data-ux-label-placement="inside"] .ux4g-progress-bar-fill {
  padding-inline-end: var(--ux4g-padding-2xs);
}

[data-ux-progress-bar][data-ux-shape="rounded"] .ux4g-progress-bar-track,
[data-ux-progress-bar][data-ux-shape="rounded"] .ux4g-progress-bar-fill {
  border-radius: var(--ux4g-radius-full);
}

[data-ux-progress-label] {
  margin: 0;
}

[data-ux-progress-bar][data-ux-label-placement="outside"] [data-ux-progress-label] {
  color: var(--ux4g-progress-label-outside);
  align-self: flex-end;
}


[data-ux-progress-circle] {
  --ux4g-progress-value: 50;
  --ux4g-progress-fill-start: var(--ux4g-bg-primary-subtle);
  --ux4g-progress-fill-end: var(--ux4g-bg-primary-strong);
  --ux4g-progress-circle-size: 80px;
  --ux4g-progress-circle-thickness: 8px;
  --ux4g-progress-circle-copy-width: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-stack-xs, 8px);
  text-align: center;
}

.ux4g-progress-circle-indicator {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--ux4g-progress-circle-size);
  block-size: auto;
  aspect-ratio: 1;
}

.ux4g-progress-circle-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--ux4g-radius-full);
  background:
    conic-gradient(from 0deg,
      var(--ux4g-progress-fill-start) 0,
      var(--ux4g-progress-fill-end) calc(var(--ux4g-progress-value) * 1%),
      var(--ux4g-border-color-neutral-subtle) calc(var(--ux4g-progress-value) * 1%) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ux4g-progress-circle-thickness)), #000 calc(100% - var(--ux4g-progress-circle-thickness)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ux4g-progress-circle-thickness)), #000 calc(100% - var(--ux4g-progress-circle-thickness)));
}

[data-ux-progress-circle][data-ux-shape="rounded"] .ux4g-progress-circle-ring {
  filter: saturate(0.98);
}

.ux4g-progress-circle-value-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-inline-2xs, 0px);
  inline-size: var(--ux4g-progress-circle-copy-width);
}

.ux4g-progress-circle-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-inline-2xs, 2px);
  word-break: normal;
}



[data-ux-progress-circle][data-ux-size="xs"] {
  --ux4g-progress-circle-size: 40px;
  --ux4g-progress-circle-thickness: 4px;
  --ux4g-progress-circle-copy-width: 32px;
}

[data-ux-progress-circle][data-ux-size="s"] {
  --ux4g-progress-circle-size: 56px;
  --ux4g-progress-circle-thickness: 5px;
  --ux4g-progress-circle-copy-width: 40px;
}

[data-ux-progress-circle][data-ux-size="m"] {
  --ux4g-progress-circle-size: 64px;
  --ux4g-progress-circle-thickness: 6px;
  --ux4g-progress-circle-copy-width: 40px;
}

[data-ux-progress-circle][data-ux-size="l"] {
  --ux4g-progress-circle-size: 80px;
  --ux4g-progress-circle-thickness: 8px;
  --ux4g-progress-circle-copy-width: 60px;
}

[data-ux-progress-circle][data-ux-size="xl"] {
  --ux4g-progress-circle-size: 160px;
  --ux4g-progress-circle-thickness: 12px;
  --ux4g-progress-circle-copy-width: 122px;
}

[data-ux-progress-circle][data-ux-size="2xl"] {
  --ux4g-progress-circle-size: 200px;
  --ux4g-progress-circle-thickness: 14px;
  --ux4g-progress-circle-copy-width: 154px;
}

[data-ux-progress-circle][data-ux-size="3xl"] {
  --ux4g-progress-circle-size: 240px;
  --ux4g-progress-circle-thickness: 16px;
  --ux4g-progress-circle-copy-width: 186px;
}

[data-ux-progress-circle][data-ux-label-placement="outside"] .ux4g-progress-circle-copy {
  min-inline-size: 76px;
}

[data-ux-progress-half] {
  --ux4g-progress-value: 50;
  --ux4g-progress-half-angle: 90deg;
  --ux4g-progress-fill-start: var(--ux4g-bg-primary-subtle);
  --ux4g-progress-fill-end: var(--ux4g-bg-primary-strong);
  --ux4g-progress-half-track: var(--ux4g-border-color-neutral-default, #d9d9d9);
  --ux4g-progress-half-label: #bcbcbc;
  --ux4g-progress-half-endpoints-left: 50%;
  --ux4g-progress-half-endpoints-transform: translateX(-50%);
  --ux4g-progress-half-width: 160px;
  --ux4g-progress-half-height: 160px;
  --ux4g-progress-half-stroke: 20px;
  --ux4g-progress-half-copy-top: 34px;
  --ux4g-progress-half-copy-width: 92px;
  --ux4g-progress-half-endpoints-top: 80px;
  --ux4g-progress-half-endpoints-width: 169px;
  --ux4g-progress-half-endpoints-left: -1px;
  --ux4g-progress-half-start-width: 17px;
  --ux4g-progress-half-end-width: 32px;
  --ux4g-progress-half-endpoint-start-x: calc(var(--ux4g-progress-half-stroke) / 2);
  --ux4g-progress-half-endpoint-end-x: calc(var(--ux4g-progress-half-width) - (var(--ux4g-progress-half-stroke) / 2));
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ux4g-stack-l, 24px);
  inline-size: var(--ux4g-progress-half-width);
  block-size: var(--ux4g-progress-half-height);
  overflow: visible;
}

.ux4g-progress-half-arc {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  overflow: visible;
  inline-size: var(--ux4g-progress-half-width);
  block-size: var(--ux4g-progress-half-height);
}

.ux4g-progress-half-ring {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background:
    conic-gradient(
      from 270deg,
      var(--ux4g-progress-fill-start) 0deg,
      var(--ux4g-progress-fill-end) var(--ux4g-progress-half-angle),
      var(--ux4g-bg-neutral-subtle) var(--ux4g-progress-half-angle) 180deg,
      transparent 180deg 360deg
    );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ux4g-progress-half-stroke)), #000 calc(100% - var(--ux4g-progress-half-stroke)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ux4g-progress-half-stroke)), #000 calc(100% - var(--ux4g-progress-half-stroke)));
}

.ux4g-progress-half-svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.ux4g-progress-half-svg-track,
.ux4g-progress-half-svg-progress {
  fill: none;
  stroke-width: var(--ux4g-progress-half-stroke);
  vector-effect: non-scaling-stroke;
}

.ux4g-progress-half-svg-track {
  stroke: var(--ux4g-progress-half-track);
  stroke-linecap: round;
}

.ux4g-progress-half-svg-progress {
  stroke: currentColor;
  stroke: url(#ux4g-progress-half-gradient-s);
  stroke-linecap: round;
}

.ux4g-progress-half-svg-track-sharp {
  stroke-linecap: butt;
}

.ux4g-progress-half-svg-progress-sharp {
  stroke: url(#ux4g-progress-half-gradient-sharp-s);
  stroke-linecap: butt;
}

[data-ux-progress-half][data-ux-size="m"] .ux4g-progress-half-svg-progress {
  stroke: url(#ux4g-progress-half-gradient-m);
}

[data-ux-progress-half][data-ux-size="m"] .ux4g-progress-half-svg-progress-sharp {
  stroke: url(#ux4g-progress-half-gradient-sharp-m);
}

[data-ux-progress-half][data-ux-size="l"] .ux4g-progress-half-svg-progress {
  stroke: url(#ux4g-progress-half-gradient-l);
}

[data-ux-progress-half][data-ux-size="l"] .ux4g-progress-half-svg-progress-sharp {
  stroke: url(#ux4g-progress-half-gradient-sharp-l);
}

[data-ux-progress-half][data-ux-size="xl"] .ux4g-progress-half-svg-progress {
  stroke: url(#ux4g-progress-half-gradient-xl);
}

[data-ux-progress-half][data-ux-size="xl"] .ux4g-progress-half-svg-progress-sharp {
  stroke: url(#ux4g-progress-half-gradient-sharp-xl);
}


.ux4g-progress-half-copy {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: var(--ux4g-progress-half-copy-top);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-inline-2xs, 2px);
  text-align: center;
  inline-size: var(--ux4g-progress-half-copy-width);
}

[data-ux-progress-desc] {
  margin: 0;
  color: var(--ux4g-text-neutral-tertiary);
}

.ux4g-progress-half-endpoints {
  position: absolute;
  inset-block-start: var(--ux4g-progress-half-endpoints-top);
  inset-inline-start: var(--ux4g-progress-half-endpoints-left);
  display: block;
  inline-size: var(--ux4g-progress-half-endpoints-width);
  transform: var(--ux4g-progress-half-endpoints-transform);
  color: var(--ux4g-progress-half-label);
  pointer-events: none;
}

.ux4g-progress-half-endpoints [data-ux-progress-start] {
  position: absolute;
  inset-inline-start: var(--ux4g-progress-half-endpoint-start-x);
  transform: translateX(-50%);
  inline-size: var(--ux4g-progress-half-start-width);
  font-size: var(--ux4g-fs-12);
  line-height: var(--ux4g-lh-16);
  text-align: center;
}

.ux4g-progress-half-endpoints [data-ux-progress-end] {
  position: absolute;
  inset-inline-start: var(--ux4g-progress-half-endpoint-end-x);
  transform: translateX(-50%);
  inline-size: var(--ux4g-progress-half-end-width);
  font-size: var(--ux4g-fs-12);
  line-height: var(--ux4g-lh-16);
  text-align: center;
}

[data-ux-progress-half][data-ux-size="s"] {
  --ux4g-progress-half-width: 80px;
  --ux4g-progress-half-height: 80px;
  --ux4g-progress-half-stroke: 10px;
  --ux4g-progress-half-copy-top: 22px;
  --ux4g-progress-half-copy-width: 76px;
}

[data-ux-progress-half][data-ux-shape="rounded"][data-ux-size="s"] {
  --ux4g-progress-half-stroke: 8px;
}

[data-ux-progress-half][data-ux-size="m"] {
  --ux4g-progress-half-width: 160px;
  --ux4g-progress-half-height: 160px;
  --ux4g-progress-half-stroke: 16px;
  --ux4g-progress-half-copy-top: 34px;
  --ux4g-progress-half-copy-width: 92px;
  --ux4g-progress-half-endpoints-top: 80px;
  --ux4g-progress-half-endpoints-width: 160px;
  --ux4g-progress-half-endpoints-left: 0px;
  --ux4g-progress-half-endpoints-transform: none;
  --ux4g-progress-half-start-width: 17px;
  --ux4g-progress-half-end-width: 28px;
}

[data-ux-progress-half][data-ux-shape="rounded"][data-ux-size="m"] {
  --ux4g-progress-half-endpoints-top: 92px;
}

[data-ux-progress-half][data-ux-size="l"] {
  --ux4g-progress-half-width: 200px;
  --ux4g-progress-half-height: 200px;
  --ux4g-progress-half-stroke: 20px;
  --ux4g-progress-half-copy-top: 54px;
  --ux4g-progress-half-copy-width: 112px;
  --ux4g-progress-half-endpoints-top: 100px;
  --ux4g-progress-half-endpoints-width: 200px;
  --ux4g-progress-half-endpoints-left: 0px;
  --ux4g-progress-half-endpoints-transform: none;
  --ux4g-progress-half-start-width: 20px;
  --ux4g-progress-half-end-width: 28px;
}

[data-ux-progress-half][data-ux-shape="rounded"][data-ux-size="l"] {
  --ux4g-progress-half-endpoints-top: 114px;
}

[data-ux-progress-half][data-ux-size="xl"] {
  --ux4g-progress-half-width: 240px;
  --ux4g-progress-half-height: 240px;
  --ux4g-progress-half-stroke: 24px;
  --ux4g-progress-half-copy-top: 62px;
  --ux4g-progress-half-copy-width: 154px;
  --ux4g-progress-half-endpoints-top: 120px;
  --ux4g-progress-half-endpoints-width: 240px;
  --ux4g-progress-half-endpoints-left: 0px;
  --ux4g-progress-half-endpoints-transform: none;
  --ux4g-progress-half-start-width: 24px;
  --ux4g-progress-half-end-width: 28px;
}

[data-ux-progress-half][data-ux-shape="rounded"][data-ux-size="xl"] {
  --ux4g-progress-half-endpoints-top: 136px;
}

@media (max-width: 767px) {
  .ux4g-progress-grid-bar,
  .ux4g-progress-grid-half {
    grid-template-columns: 1fr;
  }


  .ux4g-progress-circle-size-row {
    gap: var(--ux4g-inline-m, 16px);
  }

  [data-ux-progress-bar] {
    min-inline-size: 0;
  }

  [data-ux-progress-half] {
    margin-inline: auto;
  }

  [data-ux-progress-circle][data-ux-size="xl"] {
    --ux4g-progress-circle-size: 120px;
    --ux4g-progress-circle-copy-width: max-content;
  }

  [data-ux-progress-circle][data-ux-size="2xl"] {
    --ux4g-progress-circle-size: 144px;
    --ux4g-progress-circle-copy-width: max-content;
  }

  [data-ux-progress-circle][data-ux-size="3xl"] {
    --ux4g-progress-circle-size: 168px;
    --ux4g-progress-circle-copy-width: max-content;
  }

  [data-ux-progress-half][data-ux-size="l"] {
    --ux4g-progress-half-width: min(200px, 100%);
    --ux4g-progress-half-height: min(200px, 100vw);
  }

  [data-ux-progress-half][data-ux-size="xl"] {
    --ux4g-progress-half-width: min(240px, 100%);
    --ux4g-progress-half-height: min(240px, 100vw);
  }
}


.ux4g-carousel {
    position: var(--ux4g-pos-relative);
    width: var(--ux4g-sz-full);
    overflow: var(--ux4g-of-hidden);
}

.ux4g-carousel-viewport {
    width: var(--ux4g-sz-full);
    overflow: var(--ux4g-of-hidden);
}

.ux4g-carousel-slides {
    display: flex;
    width: var(--ux4g-sz-full);
    transition: transform var(--ux4g-transition-duration-slow, 0.5s) var(--ux4g-transition-timing-in-out, ease);
}

.ux4g-carousel-slide {
    flex: 0 0 var(--ux4g-sz-full);
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: var(--ux4g-ta-center, center);
    padding: var(--ux4g-padding-xl);
    position: var(--ux4g-pos-relative);
    overflow: var(--ux4g-of-hidden);
    color: var(--ux4g-text-neutral-primary);
}

/* Use inverse text only on a strong surface or over an image. */
.ux4g-bg-primary-strong .ux4g-carousel-slide,
.ux4g-carousel-slide:has(img) {
    color: var(--ux4g-text-white, #ffffff);
}

.ux4g-carousel-slide img {
    position: var(--ux4g-pos-absolute);
    top: var(--ux4g-pos-top-0);
    left: var(--ux4g-pos-start-0);
    width: var(--ux4g-sz-full);
    height: var(--ux4g-sz-full);
    object-fit: cover;
    z-index: var(--ux4g-z-layout-base);
}

/* Overlay for images to ensure text readability */
.ux4g-carousel-slide::after {
    content: "";
    position: var(--ux4g-pos-absolute);
    top: var(--ux4g-pos-top-0);
    left: var(--ux4g-pos-start-0);
    right: var(--ux4g-pos-end-0);
    bottom: var(--ux4g-pos-bottom-0);
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
    z-index: var(--ux4g-z-layout-raised);
    opacity: var(--ux4g-sz-none);
    transition: opacity var(--ux4g-transition-duration-base, 0.3s);
}

.ux4g-carousel-slide:has(img)::after {
    opacity: 1;
}

.ux4g-carousel-slide > *:not(img) {
    position: var(--ux4g-pos-relative);
    z-index: var(--ux4g-z-layout-overlay);
}

/* Desktop Controls */
.ux4g-carousel-controls {
    position: var(--ux4g-pos-absolute);
    top: var(--ux4g-pos-top-0);
    left: var(--ux4g-pos-start-0);
    right: var(--ux4g-pos-end-0);
    bottom: var(--ux4g-pos-bottom-0);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--ux4g-padding-2xl);
    z-index: var(--ux4g-z-layout-top);
}

.ux4g-carousel-arrow {
    pointer-events: auto;
    background-color: var(--ux4g-bg-primary-soft);
    border: var(--ux4g-border-width-none);
    width: var(--ux4g-sz-l);
    height: var(--ux4g-sz-l);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ux4g-radius-md);
    color: var(--ux4g-text-brand-primary-default);
    cursor: pointer;
    transition: background-color var(--ux4g-transition-duration-fast, 0.2s) var(--ux4g-transition-timing-linear);
}

.ux4g-carousel-arrow:hover {
    background-color: var(--ux4g-bg-primary-subtle);
}

.ux4g-carousel-arrow:active {
    background-color: var(--ux4g-bg-primary-emphasis);
}

/* Pagination */
.ux4g-carousel-pagination {
    position: var(--ux4g-pos-absolute);
    bottom: 20px;
    left: var(--ux4g-pos-start-50);
    transform: var(--ux4g-pos-translate-middle-x);
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-s, 8px);
    pointer-events: auto;
    z-index: var(--ux4g-z-layout-top);
}

/* Dot Badges Design */
.ux4g-carousel-dot {
    width: var(--ux4g-sz-8);
    height: var(--ux4g-sz-8);
    border-radius: var(--ux4g-radius-full);
    background-color: var(--ux4g-bg-primary-strong);
    opacity: var(--ux4g-opacity-20, 0.2);
    transition: all var(--ux4g-transition-duration-base, 0.3s) var(--ux4g-transition-timing-in-out);
    cursor: pointer;
}

.ux4g-carousel-dot.is-active {
    width: var(--ux4g-sz-xs);
    opacity: var(--ux4g-opacity-100, 1);
    border-radius: var(--ux4g-radius-full);
}

/* Mobile Responsive Overrides */
@media (max-width: 768px) {
    .ux4g-carousel-slide {
        min-height: 500px;
    }

    .ux4g-carousel-controls {
        position: var(--ux4g-pos-absolute);
        bottom: var(--ux4g-pos-bottom-0);
        top: var(--ux4g-sz-auto);
        left: var(--ux4g-pos-start-0);
        right: var(--ux4g-pos-end-0);
        justify-content: center;
        padding: var(--ux4g-padding-l, 24px);
        column-gap: var(--ux4g-inline-l);
        pointer-events: auto;
        z-index: var(--ux4g-z-layout-top);
    }

    .ux4g-carousel-pagination {
        position: var(--ux4g-pos-static);
        transform: var(--ux4g-sz-none);
        gap: var(--ux4g-inline-s, 8px);
    }

    .ux4g-carousel-arrow {
        border-radius: var(--ux4g-radius-full);
        width: var(--ux4g-sz-s);
        height: var(--ux4g-sz-s);
    }

    /* In mobile, the layout is [Prev] [Dots] [Next] */
    .ux4g-carousel-arrow-prev {
        order: 1;
    }

    .ux4g-carousel-pagination {
        order: 2;
    }

    .ux4g-carousel-arrow-next {
        order: 3;
    }

    /* Filled variant for floating pill look on mobile */
    .ux4g-carousel-filled {
        width: var(--ux4g-sz-auto);
        left: var(--ux4g-pos-start-50);
        right: var(--ux4g-sz-auto);
        transform: var(--ux4g-pos-translate-middle-x);
        bottom: 20px;
        background-color: var(--ux4g-bg-neutral-soft);
        border-radius: var(--ux4g-radius-full);
        padding: var(--ux4g-padding-xs, 4px) var(--ux4g-padding-m, 16px);
        column-gap: var(--ux4g-inline-s, 8px);
        display: flex;
        align-items: center;
    }
}

/* ==========================================================================
   FOOTER COMPONENT
   ========================================================================== */

/* 1. NEED SUPPORT (NS) BLOCKS ============================================== */

[class*="ux4g-ns-t"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ux4g-stack-l);
    padding: var(--ux4g-padding-xl) 0;
    transition: all var(--ux4g-transition-duration-base, 0.3s) var(--ux4g-transition-timing-ease, ease);
}

[class*="ux4g-ns-t"] .ux4g-body-m-default {
    --ux4g-text-current: var(--ux4g-text-neutral-secondary);
}

/* NS Variants */
.ux4g-ns-t1 { justify-content: space-between; }

.ux4g-ns-t2 {
    display: grid;
    justify-content: start;
    padding: var(--ux4g-padding-m) var(--ux4g-padding-l);
    row-gap: var(--ux4g-stack-l);
}
.ux4g-ns-t2 .ux4g-btn-primary { width: fit-content; }

.ux4g-ns-t3 {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    row-gap: var(--ux4g-stack-l);
}

.ux4g-ns-t4 {
    justify-content: space-between;
    padding: var(--ux4g-space-10) var(--ux4g-padding-2xl);
    background-color: var(--ux4g-bg-primary-stronger);
    border-radius: var(--ux4g-radius-md);
}
.ux4g-ns-t4 :is(.ux4g-title-m-strong, .ux4g-body-m-default) {
    --ux4g-text-current: var(--ux4g-text-white);
    color: var(--ux4g-text-white);
}
.ux4g-ns-t4 .ux4g-btn-primary {
    width: fit-content;
    background-color: var(--ux4g-bg-neutral-elevated);
    color: var(--ux4g-text-brand-primary-default);
}

/* NS Mobile Responsiveness */
@media (max-width: 768px) {
    [class*="ux4g-ns-t"] {
        display: grid;
        justify-content: start;
        text-align: left;
        padding: var(--ux4g-padding-m) var(--ux4g-padding-none);
        row-gap: var(--ux4g-stack-l);
    }
    .ux4g-ns-t3 { justify-items: center; text-align: center; grid-template-columns: repeat(1, 1fr);}
    [class*="ux4g-ns-t"] .ux4g-btn-primary { width: fit-content; }
    
}


/* 2. FOOTER BOTTOM STRIP (FBS) ============================================= */

[class*="ux4g-fbs-t"] {
    display: flex;
    padding: var(--ux4g-padding-m) 80px;
    align-items: center;
    background-color: var(--ux4g-bg-primary-stronger);
    gap: var(--ux4g-inline-l);
}

/* FBS Link Styles */
[class*="ux4g-fbs-t"] .ux4g-text-link-neutral-sm {
    --ux4g-text-current: var(--ux4g-text-white);
    font-size: var(--ux4g-fs-12);
    line-height: var(--ux4g-lh-16);
    font-weight: var(--ux4g-fw-medium);
    text-decoration: none;
}

/* FBS Variants */
.ux4g-fbs-t1 { justify-content: space-between; }
.ux4g-fbs-t2 { justify-content: center; }
.ux4g-fbs-t3 { justify-content: space-between; }
.ux4g-fbs-t4 { justify-content: space-between; }

.ux4g-fbs-logo-wrapper {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m);
}

.ux4g-fbs-social-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--ux4g-inline-l);
}

.ux4g-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ux4g-text-neutral-inverse);
    transition: opacity var(--ux4g-transition-duration-fast, 0.2s) var(--ux4g-transition-timing-ease, ease);
}
.ux4g-social-link:hover { opacity: var(--ux4g-interaction-active-opacity, 0.8); }

/* FBS Mobile Responsiveness */
@media (min-width: 992px) {
    .ux4g-fbs-t4 .ux4g-fbs-description { display: none; }
    .ux4g-fbs-t4 .ux4g-fbs-links { flex: 1; justify-content: center; }
}

@media (max-width: 991px) {
    .ux4g-fbs-t4 {
        flex-direction: column;
        padding: var(--ux4g-padding-l);
        align-items: flex-start;
        text-align: left;
    }
    .ux4g-fbs-t4 .ux4g-fbs-links { order: 4; }
    .ux4g-fbs-t4 .ux4g-fbs-social-list { order: 3; }
    .ux4g-fbs-t4 .ux4g-fbs-logo-wrapper { order: 1; }
    .ux4g-fbs-t4 .ux4g-fbs-description { order: 2; display: block; }
}

@media (max-width: 768px) {
    [class*="ux4g-fbs-t"]:not(.ux4g-fbs-t4) {
        flex-direction: column;
        padding: var(--ux4g-padding-l);
        align-items: flex-start;
        gap: var(--ux4g-inline-l);
        text-align: left;
    }
    .ux4g-fbs-t2 { align-items: center; text-align: center; }
    [class*="ux4g-fbs-t"] :is(.ux4g-d-flex, .ux4g-fbs-links) {
        flex-wrap: wrap;
        row-gap: var(--ux4g-inline-m);
    }
}


/* 3. FOOTER LAYOUT & COMPONENTS ============================================ */

.ux4g-footer-wrapper {
    padding: 64px 80px 0 80px;
}

.ux4g-footer-row {
    display: flex;
    justify-content: space-between;
}

/* Department Block */
.ux4g-dept-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-m);
}

.ux4g-dept-header {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-l);
}

.ux4g-dept-header svg {
    width: var(--ux4g-sz-56);
    height: var(--ux4g-sz-56);
}

.ux4g-dept-orgs {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-l);
}

.ux4g-dept-logo {
    min-height: var(--ux4g-sz-32);
    max-height: var(--ux4g-sz-32);
    width: auto;
    aspect-ratio: 5/2;
}

/* Footer Links */
.ux4g-f-links {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--ux4g-inline-xl);
}

.ux4g-f-links-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ux4g-f-links a { overflow-wrap: break-word; word-break: break-word; }

.ux4g-f-link-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    row-gap: var(--ux4g-stack-m);
}
.ux4g-f-link-list li a {
    display: inline-block !important;
}

.ux4g-f-link-list li a:hover {
    text-decoration: underline;
}

.ux4g-f-link-list li a i {
    display: inline-block !important;
    text-decoration: none !important;
    vertical-align: middle;
    margin-left: var(--ux4g-inline-s);
}

/* Layout Utilities & Responsive */
.ux4g-f-d-md-flex { display: block; }

.contact-wrapper {
    display: grid;
    row-gap: var(--ux4g-stack-s);
}
.contact-wrapper p {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m);
    margin: 0;
}
.contact-wrapper i {
    font-size: var(--ux4g-sz-24);
    color: var(--ux4g-text-neutral-secondary);
}

@media (min-width: 768px) {
    .ux4g-f-d-md-flex { display: flex !important; }
    .ux4g-md-text-start { text-align: start !important; }
    .ux4g-md-text-center { text-align: center !important; }
}

@media (max-width: 991px) {
    .ux4g-f-links { grid-template-columns: repeat(3, 1fr); row-gap: var(--ux4g-inline-l); }
    .ux4g-f-links-cols-1 {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        justify-content: start !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    .ux4g-footer-wrapper { padding: 48px 12px 0 12px; }
    .ux4g-dept-header { justify-content: center; }
    .ux4g-f-links { grid-template-columns: repeat(2, 1fr); row-gap: var(--ux4g-inline-l); }
    /* .ux4g-footer-row { display: block; } */

}
@media (max-width: 767px) {
    .ux4g-footer-row { display: block; }

}

/* Footer Department Responsive Centering */
.ux4g-f-dept-responsive {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ux4g-stack-m);
    order: 1;
}
.ux4g-f-dept-responsive :is(.ux4g-dept-orgs, .ux4g-fbs-social-list) { justify-content: center; }

@media (min-width: 768px) {
    .ux4g-f-dept-responsive { align-items: flex-start; text-align: start; }
    .ux4g-f-dept-responsive :is(.ux4g-dept-orgs, .ux4g-fbs-social-list) { justify-content: flex-start; }
}


/* 4. FOOTER THEME VARIANTS (PRIMARY & DARK) ================================ */

.ux4g-footer-primary {
    background-color: var(--ux4g-bg-primary-strong);
    color: var(--ux4g-text-neutral-inverse);
}

.ux4g-footer-dark {
    background-color: var(--ux4g-text-neutral-primary);
    color: var(--ux4g-text-neutral-inverse);
}

/* Theme Color Inheritance */
:is(.ux4g-footer-primary, .ux4g-footer-dark) :is(.ux4g-icon-outlined, .ux4g-social-link, svg) {
    color: var(--ux4g-text-neutral-inverse) !important;
}

:is(.ux4g-footer-primary, .ux4g-footer-dark) svg path {
    fill: currentColor !important;
}

:is(.ux4g-footer-primary, .ux4g-footer-dark) :is(
    .ux4g-heading-xs-strong, 
    .ux4g-body-xs-default, 
    .ux4g-body-m-default,
    .ux4g-dept-header h4, 
    .ux4g-text-neutral-secondary,
    .ux4g-text-neutral-tertiary,
    .ux4g-title-s-strong,
    .ux4g-title-m-strong,
    .ux4g-label-l-strong,
    a
) {
    --ux4g-text-current: var(--ux4g-text-neutral-inverse) !important;
    color: var(--ux4g-text-neutral-inverse) !important;
}

/* Button overrides in variants */
:is(.ux4g-footer-primary, .ux4g-footer-dark) .ux4g-btn-primary {
    background-color: var(--ux4g-bg-neutral-elevated) !important;
    color: var(--ux4g-text-brand-primary-default) !important;
}
:is(.ux4g-footer-primary, .ux4g-footer-dark) .ux4g-btn-primary:hover {
    background-color: var(--ux4g-bg-neutral) !important;
}
:is(.ux4g-footer-primary, .ux4g-footer-dark) .ux4g-btn-primary i {
    color: var(--ux4g-text-brand-primary-default) !important;
}

/* Tag & UI overrides in variants */
:is(.ux4g-footer-primary, .ux4g-footer-dark) .ux4g-tag-outline-primary {
    border-color: var(--ux4g-text-neutral-inverse) !important;
    color: var(--ux4g-text-neutral-inverse) !important;
}

:is(.ux4g-footer-primary, .ux4g-footer-dark) .ux4g-tag-tonal-primary {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--ux4g-text-neutral-inverse) !important;
}

:is(.ux4g-footer-primary, .ux4g-footer-dark) [class*="ux4g-ns-t"] {
    background-color: transparent !important;
}

:is(.ux4g-footer-primary, .ux4g-footer-dark) hr {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Variant-specific FBS Overrides */
.ux4g-footer-dark [class*="ux4g-fbs-t"] {
    background-color: var(--ux4g-text-neutral-secondary) !important;
}
.ux4g-footer-dark [class*="ux4g-fbs-t"] :is(.ux4g-text-link-neutral-sm, .ux4g-text-white, .ux4g-body-xs-default, .ux4g-social-link) {
    --ux4g-text-current: var(--ux4g-text-neutral-inverse) !important;
    color: var(--ux4g-text-neutral-inverse) !important;
}

/* iPad Adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .ux4g-footer .ux4g-dept-wrapper {
        padding-bottom: 32px !important;
    }
    
    /* Footer Type-5 Overrides for iPad */
    .ux4g-footer .ux4g-f-links-cols-1 {
        grid-template-columns: repeat(2, 1fr) !important;
        justify-items: start !important;
        text-align: left !important;
    }
    .ux4g-footer .ux4g-ns-t2 {
        justify-items: start !important;
        text-align: left !important;
        align-items: flex-start !important;
        padding-left: 0;
    }
}
/* ==========================================================================
   UX4G Select Option Component
   Styles for Single Select and Multi Select with Small, Medium, Large sizes
   Namespace: .ux4g-select*
   ========================================================================== */

.ux4g-select {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: var(--ux4g-padding-2xs, 4px);
  width: 100%;
  box-sizing: border-box;
}

.ux4g-select * {
  box-sizing: border-box;
}

/* ==========================================================================
   Control Container (The Trigger Box) - Default Medium (M)
   ========================================================================== */

.ux4g-select .ux4g-select-control {
  min-height: var(--ux4g-sz-m, 40px);
  width: 100%;
  border-radius: var(--ux4g-radius-md, 8px);
  border: var(--ux4g-border-width-sm, 1px) solid var(--ux4g-border-color-neutral-subtle, #e5e5e5);
  background: var(--ux4g-bg-neutral-elevated, #ffffff);
  color: var(--ux4g-text-neutral-primary, #171717);
  padding: var(--ux4g-padding-none, 0) var(--ux4g-padding-s, 12px);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-inline-xs, 8px);
  cursor: pointer;
  outline: none;
  font-family: inherit;
  font-size: var(--ux4g-fs-14, 14px);
  text-align: left;
  user-select: none;
  transition:
    border-color var(--ux4g-transition-fast, 0.15s ease),
    box-shadow var(--ux4g-transition-fast, 0.15s ease),
    background-color var(--ux4g-transition-fast, 0.15s ease);
}

.ux4g-select .ux4g-select-control:hover {
  border-color: var(--ux4g-border-color-neutral-default, #c4c4c4);
}

.ux4g-select .ux4g-select-control:focus {
  outline: none;
}

/* Focus and Open State Highlight */
.ux4g-select:is(.is-open, :focus-within) .ux4g-select-control,
.ux4g-select .ux4g-select-control:focus-visible {
  border-color: var(--ux4g-border-color-primary-strong, #4a2bc2);
  box-shadow: 0 0 0 var(--ux4g-border-width-sm, 1px) var(--ux4g-border-color-primary-strong, #4a2bc2);
  outline: none;
}

.ux4g-select.is-open {
  z-index: var(--ux4g-z-dropdown, 1000);
}

/* Value & Content */
.ux4g-select .ux4g-select-value {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-inline-xs, 8px);
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.ux4g-select .ux4g-select-icon {
  font-size: var(--ux4g-sz-20, 20px);
  color: var(--ux4g-text-neutral-secondary, #525252);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ux4g-select .ux4g-select-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--ux4g-fs-14, 14px);
  color: var(--ux4g-text-neutral-primary, #171717);
}

.ux4g-select .ux4g-select-text.is-placeholder {
  color: var(--ux4g-text-neutral-tertiary, #737373);
}

/* Native Select Tag for Form Interoperability & Accessibility */
.ux4g-select .ux4g-select-native {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  border: none;
  padding: 0;
  margin: 0;
  z-index: -1;
  clip: rect(0, 0, 0, 0);
}

.ux4g-select-input {
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: var(--ux4g-fs-14, 14px);
  color: var(--ux4g-text-neutral-primary, #171717);
  width: 100%;
  padding: 0;
  margin: 0;
}

.ux4g-select-input::placeholder {
  color: var(--ux4g-text-neutral-tertiary, #737373);
}

/* Caret / Chevron */
.ux4g-select .ux4g-select-caret {
  color: var(--ux4g-text-neutral-secondary, #525252);
  font-size: var(--ux4g-sz-20, 20px);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--ux4g-transition-fast, 0.15s ease);
}

.ux4g-select.is-open .ux4g-select-caret {
  transform: rotate(180deg);
}

/* ==========================================================================
   Size Variations: Small (S), Medium (M), Large (L)
   ========================================================================== */

/* Small (S) */
.ux4g-select:is(.ux4g-select-sm, .ux4g-select--sm) .ux4g-select-control {
  height: var(--ux4g-sz-36, 36px);
  min-height: var(--ux4g-sz-36, 36px);
  padding: var(--ux4g-padding-none, 0) var(--ux4g-padding-xs, 10px);
  border-radius: var(--ux4g-radius-md, 8px);
}

.ux4g-select:is(.ux4g-select-sm, .ux4g-select--sm) :is(.ux4g-select-icon, .ux4g-select-caret) {
  font-size: var(--ux4g-sz-18, 18px);
}

.ux4g-select:is(.ux4g-select-sm, .ux4g-select--sm) :is(.ux4g-select-text, .ux4g-select-input, .ux4g-select-option, .ux4g-select-checkbox-label) {
  font-size: var(--ux4g-fs-13, 13px);
}

/* Medium (M) - Default */
.ux4g-select:is(.ux4g-select-md, .ux4g-select--md) .ux4g-select-control {
  height: var(--ux4g-sz-m, 40px);
  min-height: var(--ux4g-sz-m, 40px);
  padding: var(--ux4g-padding-none, 0) var(--ux4g-padding-s, 12px);
  border-radius: var(--ux4g-radius-md, 8px);
}

.ux4g-select:is(.ux4g-select-md, .ux4g-select--md) :is(.ux4g-select-icon, .ux4g-select-caret) {
  font-size: var(--ux4g-sz-20, 20px);
}

.ux4g-select:is(.ux4g-select-md, .ux4g-select--md) :is(.ux4g-select-text, .ux4g-select-input, .ux4g-select-option, .ux4g-select-checkbox-label) {
  font-size: var(--ux4g-fs-14, 14px);
}

/* Large (L) */
.ux4g-select:is(.ux4g-select-lg, .ux4g-select--lg) .ux4g-select-control {
  height: var(--ux4g-sz-l, 48px);
  min-height: var(--ux4g-sz-l, 48px);
  padding: var(--ux4g-padding-none, 0) var(--ux4g-padding-m, 16px);
  border-radius: var(--ux4g-radius-lg, 10px);
}

.ux4g-select:is(.ux4g-select-lg, .ux4g-select--lg) :is(.ux4g-select-icon, .ux4g-select-caret) {
  font-size: var(--ux4g-sz-24, 22px);
}

.ux4g-select:is(.ux4g-select-lg, .ux4g-select--lg) :is(.ux4g-select-text, .ux4g-select-input, .ux4g-select-option, .ux4g-select-checkbox-label) {
  font-size: var(--ux4g-fs-16, 16px);
}

/* ==========================================================================
   Chips / Tag for Selected items in multi-select
   ========================================================================== */

.ux4g-select .ux4g-select-chips {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-padding-2xs, 4px);
  flex-wrap: nowrap;
  overflow: hidden;
}

.ux4g-select-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-padding-2xs, 4px);
  background: var(--ux4g-bg-neutral-subtle, #f3f4f6);
  border: var(--ux4g-border-width-sm, 1px) solid var(--ux4g-border-color-neutral-subtle, #e5e5e5);
  border-radius: var(--ux4g-radius-sm, 4px);
  padding: var(--ux4g-padding-3xs, 2px) var(--ux4g-padding-2xs, 6px);
  font-size: var(--ux4g-fs-12, 12px);
  line-height: 1;
  color: var(--ux4g-text-neutral-primary, #171717);
  white-space: nowrap;
}

.ux4g-select-chip-remove {
  cursor: pointer;
  font-size: var(--ux4g-fs-14, 14px);
  color: var(--ux4g-text-neutral-secondary, #737373);
}

.ux4g-select-chip-remove:hover {
  color: var(--ux4g-text-neutral-primary, #171717);
}

.ux4g-select-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ux4g-bg-primary-strong, var(--ux4g-color-primary-600, #4a2bc2));
  color: var(--ux4g-text-neutral-inverse, var(--ux4g-text-white, #ffffff));
  font-size: var(--ux4g-fs-11, 11px);
  font-weight: var(--ux4g-fw-semibold, 600);
  border-radius: var(--ux4g-radius-full, 9999px);
  padding: var(--ux4g-padding-3xs, 2px) var(--ux4g-padding-2xs, 6px);
  margin-left: var(--ux4g-padding-2xs, 4px);
}

/* ==========================================================================
   Help & Description Text
   ========================================================================== */

.ux4g-select .ux4g-select-help {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-padding-2xs, 4px);
  font-size: var(--ux4g-fs-12, 12px);
  line-height: var(--ux4g-lh-18, 1.4);
  color: var(--ux4g-text-neutral-secondary, #737373);
  margin-top: var(--ux4g-padding-3xs, 2px);
}

.ux4g-select .ux4g-select-help .ux4g-icon-outlined,
.ux4g-select .ux4g-select-help .ux4g-icon {
  font-size: var(--ux4g-fs-14, 14px);
  color: var(--ux4g-text-neutral-secondary, #737373);
}

/* ==========================================================================
   Dropdown Menu & Dropdown List
   ========================================================================== */

.ux4g-select .ux4g-select-menu {
  position: absolute;
  top: calc(100% - 20px);
  left: 0;
  width: 100%;
  background: var(--ux4g-bg-neutral-elevated, #ffffff);
  border: var(--ux4g-border-width-sm, 1px) solid var(--ux4g-border-color-neutral-subtle, #e5e5e5);
  border-radius: var(--ux4g-radius-md, 10px);
  box-shadow: var(--ux4g-shadow-l2, 0 10px 25px -5px rgba(0, 0, 0, 0.1));
  padding: var(--ux4g-padding-2xs, 6px) var(--ux4g-padding-none, 0);
  display: none;
  z-index: var(--ux4g-z-dropdown, 1001);
  max-height: 240px;
  overflow-y: auto;
  box-sizing: border-box;
}

.ux4g-select.is-open .ux4g-select-menu {
  display: block;
}

.ux4g-select .ux4g-select-list {
  list-style: none;
  padding: var(--ux4g-padding-none, 0);
  margin: var(--ux4g-padding-none, 0);
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-padding-3xs, 2px);
}

/* Single Select Option */
.ux4g-select .ux4g-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - var(--ux4g-padding-s, 12px));
  margin: var(--ux4g-padding-none, 0) var(--ux4g-padding-2xs, 6px);
  padding: var(--ux4g-padding-xs, 8px) var(--ux4g-padding-s, 12px);
  border-radius: var(--ux4g-radius-sm, 6px);
  border: none;
  background: transparent;
  color: var(--ux4g-text-neutral-primary, #171717);
  font-family: inherit;
  font-size: var(--ux4g-fs-14, 14px);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition:
    background-color var(--ux4g-transition-fast, 0.15s ease),
    color var(--ux4g-transition-fast, 0.15s ease);
}

.ux4g-select .ux4g-select-option:hover {
  background-color: var(--ux4g-bg-neutral-subtle, #f3f4f6);
}

.ux4g-select .ux4g-select-option:focus-visible {
  background-color: var(--ux4g-bg-neutral-subtle, #f3f4f6);
  outline: var(--ux4g-border-width-md, 2px) solid var(--ux4g-border-color-primary-strong, #4a2bc2);
  outline-offset: -2px;
}

.ux4g-select .ux4g-select-option.is-selected,
.ux4g-select .ux4g-select-option[aria-selected="true"] {
  background-color: var(--ux4g-bg-primary-soft, #ede9fe);
  color: var(--ux4g-text-brand-primary-default, var(--ux4g-color-primary-600, #4a2bc2));
  font-weight: var(--ux4g-fw-medium, 500);
}

.ux4g-select .ux4g-select-option .ux4g-select-option-check {
  font-size: var(--ux4g-sz-18, 18px);
  color: var(--ux4g-text-brand-primary-default, var(--ux4g-color-primary-600, #4a2bc2));
  opacity: 0;
  transition: opacity var(--ux4g-transition-fast, 0.15s ease);
}

.ux4g-select .ux4g-select-option.is-selected .ux4g-select-option-check,
.ux4g-select .ux4g-select-option[aria-selected="true"] .ux4g-select-option-check {
  opacity: 1;
}

/* Multi Select Option Row with Standard UX4G Checkbox */
.ux4g-select .ux4g-select-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--ux4g-inline-xs, 8px);
  width: calc(100% - var(--ux4g-padding-s, 12px));
  margin: var(--ux4g-padding-none, 0) var(--ux4g-padding-2xs, 6px);
  padding: var(--ux4g-padding-xs, 8px) var(--ux4g-padding-xs, 10px);
  border-radius: var(--ux4g-radius-sm, 4px);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--ux4g-transition-fast, 0.15s ease);
}

.ux4g-select .ux4g-select-checkbox-row:hover {
  background-color: var(--ux4g-bg-neutral-subtle, #f3f4f6);
}

.ux4g-select .ux4g-select-checkbox-row:focus-visible {
  background-color: var(--ux4g-bg-neutral-subtle, #f3f4f6);
  outline: var(--ux4g-border-width-md, 2px) solid var(--ux4g-border-color-primary-strong, #4a2bc2);
  outline-offset: -2px;
}

.ux4g-select .ux4g-select-checkbox-row.is-selected {
  background-color: var(--ux4g-bg-primary-soft, #ede9fe);
}

.ux4g-select .ux4g-select-checkbox-row .ux4g-checkbox {
  pointer-events: none;
  width: auto;
}

.ux4g-select-checkbox-label {
  font-size: var(--ux4g-fs-14, 14px);
  color: var(--ux4g-text-neutral-primary, #171717);
  flex: 1;
}

/* ==========================================================================
   UX4G Native Form Select Variant (.ux4g-form-select)
   ========================================================================== */

.ux4g-form-select {
  display: block;
  width: 100%;
  height: var(--ux4g-sz-m, 40px);
  min-height: var(--ux4g-sz-m, 40px);
  padding: var(--ux4g-padding-2xs, 8px) var(--ux4g-padding-xl, 32px) var(--ux4g-padding-2xs, 8px) var(--ux4g-padding-s, 12px);
  font-family: inherit;
  font-size: var(--ux4g-fs-14, 14px);
  font-weight: var(--ux4g-fw-regular, 400);
  line-height: var(--ux4g-lh-20, 1.4);
  color: var(--ux4g-text-neutral-primary, #171717);
  background-color: var(--ux4g-bg-neutral-elevated, #ffffff);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23171717'%3e%3cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px 20px;
  border: var(--ux4g-border-width-sm, 1px) solid var(--ux4g-border-color-neutral-subtle, #e5e5e5);
  border-radius: var(--ux4g-radius-md, 8px);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  vertical-align: middle;
  transition:
    border-color var(--ux4g-transition-fast, 0.15s ease),
    box-shadow var(--ux4g-transition-fast, 0.15s ease),
    background-color var(--ux4g-transition-fast, 0.15s ease);
}

.ux4g-form-select:hover {
  border-color: var(--ux4g-border-color-neutral-default, #c4c4c4);
}

.ux4g-form-select:focus,
.ux4g-form-select:focus-visible {
  border-color: var(--ux4g-border-color-primary-strong, #4a2bc2);
  box-shadow: 0 0 0 var(--ux4g-border-width-sm, 1px) var(--ux4g-border-color-primary-strong, #4a2bc2);
  outline: none;
}

.ux4g-form-select:disabled {
  background-color: var(--ux4g-bg-neutral-subtle, #f3f4f6);
  border-color: var(--ux4g-border-color-neutral-subtle, #e5e5e5);
  color: var(--ux4g-text-neutral-disabled, #a3a3a3);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Form Select Sizes: Small (S), Medium (M), Large (L) */

/* Small (S) */

.ux4g-form-select-sm {
  height: var(--ux4g-sz-36, 36px);
  min-height: var(--ux4g-sz-36, 36px);
  padding: var(--ux4g-padding-2xs, 6px) var(--ux4g-padding-l, 28px) var(--ux4g-padding-2xs, 6px) var(--ux4g-padding-xs, 10px);
  font-size: var(--ux4g-fs-13, 13px);
  line-height: var(--ux4g-lh-18, 1.3);
  border-radius: var(--ux4g-radius-md, 8px);
  background-position: right var(--ux4g-padding-xs, 8px) center;
  background-size: 16px 16px;
}

/* Medium (M) - Default */
.ux4g-form-select-md {
  height: var(--ux4g-sz-m, 40px);
  min-height: var(--ux4g-sz-m, 40px);
  padding: var(--ux4g-padding-xs, 8px) var(--ux4g-padding-xl, 32px) var(--ux4g-padding-xs, 8px) var(--ux4g-padding-s, 12px);
  font-size: var(--ux4g-fs-14, 14px);
  line-height: var(--ux4g-lh-20, 1.4);
  border-radius: var(--ux4g-radius-md, 8px);
  background-position: right var(--ux4g-padding-xs, 10px) center;
  background-size: 18px 18px;
}

/* Large (L) */
.ux4g-form-select-lg {
  height: var(--ux4g-sz-l, 48px);
  min-height: var(--ux4g-sz-l, 48px);
  padding: var(--ux4g-padding-s, 12px) var(--ux4g-padding-2xl, 38px) var(--ux4g-padding-s, 12px) var(--ux4g-padding-m, 16px);
  font-size: var(--ux4g-fs-16, 16px);
  line-height: var(--ux4g-lh-24, 1.5);
  border-radius: var(--ux4g-radius-lg, 10px);
  background-position: right var(--ux4g-padding-s, 12px) center;
  background-size: 22px 22px;
}





}


/* 4. Patterns */
@layer ux4g-patterns {
/* Custom CSS for Identity & Access Body Pattern */
 
.ux4g-identity-access-container {
    box-sizing: border-box;
    width: var(--ux4g-sz-full);
}
 
.ux4g-identity-access-layout {
    display: flex;
    min-height: calc(var(--ux4g-sz-screen-h) - var(--ux4g-sz-48) - var(--ux4g-sz-24)); /* Fits remaining viewport height below navbar */
    background-color: var(--ux4g-bg-neutral-elevated);
    overflow: var(--ux4g-of-hidden);
    position: var(--ux4g-pos-relative);
    width: var(--ux4g-sz-full);
}
 
/* Left Sidebar Panel */
.ux4g-identity-access-sidebar {
    width: var(--ux4g-sz-half);
    background-color: var(--ux4g-bg-primary-strong); /* Premium brand deep purple */
    padding: var(--ux4g-section-2xl);
    position: var(--ux4g-pos-relative);
    overflow: var(--ux4g-of-hidden);
    box-sizing: border-box;
    z-index: var(--ux4g-z-layout-raised);
}
 
.ux4g-sidebar-top {
    position: var(--ux4g-pos-relative);
    z-index: var(--ux4g-z-layout-overlay);
}
.ux4g-sidebar-top .ux4g-heading-l-default{
    color: var(--ux4g-text-white);
}
.ux4g-sidebar-bottom {
    position: var(--ux4g-pos-relative);
    z-index: var(--ux4g-z-layout-overlay);
}
 
.ux4g-logo-white {
    filter: brightness(0) invert(1);
    height: var(--ux4g-sz-l);
}
 
.ux4g-opacity-80 {
    opacity: 0.8;
}
 
.ux4g-opacity-60 {
    opacity: 0.6;
}
 
/* Background circles styling */
.ux4g-sidebar-ring {
    position: var(--ux4g-pos-absolute);
    border-radius: var(--ux4g-radius-full);
    border: var(--ux4g-sz-36) solid color-mix(in srgb, var(--ux4g-text-white) 4%, transparent);
    pointer-events: none;
    z-index: var(--ux4g-z-layout-base);
}
.ux4g-sidebar-ring-bottom{
    border: var(--ux4g-sz-20) solid color-mix(in srgb, var(--ux4g-text-white) 4%, transparent) !important;
}
 
.ux4g-ring-1 {
    width: calc(var(--ux4g-sz-120) * 3.75);
    height: calc(var(--ux4g-sz-120) * 3.75);
    top: calc(-1 * var(--ux4g-sz-120));
    left: calc(-1 * var(--ux4g-sz-120));
}
 
.ux4g-ring-2 {
    width: calc(var(--ux4g-sz-80) * 4);
    height: calc(var(--ux4g-sz-80) * 4);
    bottom: calc(-1 * var(--ux4g-sz-80));
    right: calc(-1 * var(--ux4g-sz-80));
}
 
/* Right Main Panel */
.ux4g-identity-access-column {
    flex: 1;
    background-color: var(--ux4g-bg-neutral); /* Premium subtle grey background */
    padding: var(--ux4g-padding-xl) var(--ux4g-padding-3xl);
}
 
.ux4g-identity-access-column.ux4g-identity-access-column-centered {
    flex: 1;
    width: var(--ux4g-sz-full);
    padding: var(--ux4g-padding-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.ux4g-form-box {    
    box-sizing: border-box;
    /* margin-inline: auto;
    margin-block: auto !important; */
    width: var(--ux4g-sz-full);
}

.ux4g-identity-access-column .ux4g-form-box {
    max-width: 500px;
}

 
 
 
/* Input Code Prefix */
.ux4g-input-prefix {
    font-size: var(--ux4g-fs-14);
    font-weight: var(--ux4g-fw-medium);
    color: var(--ux4g-text-neutral-secondary);
    margin-inline-end: var(--ux4g-margin-s);
    padding-inline-end: var(--ux4g-padding-s);
    border-inline-end: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    display: inline-flex;
    align-items: center;
    user-select: none;
}
 
/* Alert styling overrides */
.ux4g-form-alert {
    padding: var(--ux4g-padding-s) var(--ux4g-padding-m);
    border-radius: var(--ux4g-radius-md);
    background-color: var(--ux4g-bg-error);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-error-default);
    align-items: flex-start;
}
 
.ux4g-form-alert .ux4g-alert-icon {
    color: var(--ux4g-icon-status-error);
}
 
.ux4g-form-alert .ux4g-alert-message {
    color: var(--ux4g-text-status-error);
}
 
/* Warning form alert override */
.ux4g-form-alert.ux4g-alert-warning {
    background-color: var(--ux4g-bg-warning);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-warning-default);
}
 
.ux4g-form-alert.ux4g-alert-warning .ux4g-alert-icon {
    color: var(--ux4g-icon-status-warning);
}
 
.ux4g-form-alert.ux4g-alert-warning .ux4g-alert-message {
    color: var(--ux4g-text-status-warning);
}
 
.ux4g-form-alert.ux4g-alert-warning .ux4g-alert-counter {
    color: var(--ux4g-text-status-warning);
    background-color: var(--ux4g-bg-warning-soft);
}
 
 
 
.ux4g-form-alert-body {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-2xs);
    flex: 1;
    min-width: 0;
}
 
.ux4g-form-alert-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: var(--ux4g-sz-full);
    gap: var(--ux4g-inline-s);
    
}
.ux4g-form-alert-footer span:first-child{
    flex: 1;

}
 
.ux4g-alert-counter {
    color: var(--ux4g-text-status-error);
    background-color: var(--ux4g-bg-error-soft);
    padding: var(--ux4g-padding-2xs) var(--ux4g-padding-xs);
    border-radius: var(--ux4g-radius-sm);
    display: flex;
    align-items: center;
}
 
/* Divider with Label Text */
.ux4g-divider-horizontal-text {
    position: var(--ux4g-pos-relative);
    text-align: var(--ux4g-ta-center);
    margin-block: var(--ux4g-margin-m);
}
 
.ux4g-divider-horizontal-text::before {
    content: "";
    position: var(--ux4g-pos-absolute);
    top: var(--ux4g-sz-half);
    left: 0;
    width: var(--ux4g-sz-full);
    height: var(--ux4g-border-width-sm);
    background-color: var(--ux4g-border-color-neutral-subtle);
    z-index: var(--ux4g-z-layout-raised);
}
 
.ux4g-divider-label {
    position: var(--ux4g-pos-relative);
    background-color: var(--ux4g-bg-neutral);
    padding-inline: var(--ux4g-padding-s);
    z-index: var(--ux4g-z-layout-overlay);
}
 
.ux4g-form-footer {
    margin-top: auto !important;
    padding-top: var(--ux4g-padding-2xl);
}
 
 
/* custom css */
.ux4g-input-container .ux4g-label-l-default{
    color: var(--ux4g-text-neutral-secondary);
}
.ux4g-form-footer .ux4g-label-m-default{
    color: var(--ux4g-text-neutral-tertiary);
}
.ux4g-sidebar-stat{
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-inline-2xs);
}
/* Mobile Breakpoint Overrides */
@media (max-width: 767px) {
    .ux4g-identity-access-layout {
        min-height: auto;
        flex-direction: column;
    }
    .ux4g-identity-access-column {
        width: var(--ux4g-sz-full);
        padding: var(--ux4g-padding-xl) var(--ux4g-padding-m);
       
    }
    .ux4g-form-box {
        max-width: var(--ux4g-sz-full);
        box-shadow: none;
        background-color: transparent;
    }
   
    .ux4g-identity-access-column-otp .ux4g-form-box,
    .ux4g-identity-access-column-adhar .ux4g-form-box,
    .ux4g-identity-access-column-success .ux4g-form-box
    {
        padding-block: var(--ux4g-padding-3xl);
 
    }
    .ux4g-form-footer{
        flex-direction: column;
        gap: var(--ux4g-stack-xs);
        padding-block-start: var(--ux4g-padding-2xl);
    }
}
 
/* Redirect Success Screen Components */
.ux4g-success-badge-outer {
    width: var(--ux4g-sz-64);
    height: var(--ux4g-sz-64);
    background-color: var(--ux4g-bg-success-soft);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ux4g-margin-xl);
}
 
.ux4g-success-badge-inner {
    width: var(--ux4g-sz-40);
    height: var(--ux4g-sz-40);
    background-color: var(--ux4g-bg-success-strong);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.ux4g-success-icon {
    font-size: var(--ux4g-fs-24) !important;
    color: var(--ux4g-text-white);
}
 
.ux4g-loader-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--ux4g-margin-2xl);
}
 
.ux4g-loader-dot {
    width: var(--ux4g-sz-10);
    height: var(--ux4g-sz-10);
    border-radius: var(--ux4g-radius-full);
    background-color: var(--ux4g-bg-primary-subtle);
    display: inline-block;
}
 
.ux4g-loader-dot-active {
    background-color: var(--ux4g-bg-primary-strong);
}
 
/* Brand-Subtle Background Layout Variation (Pattern 3) */
.ux4g-identity-access-layout-card,
.ux4g-identity-access-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--ux4g-sz-screen-h) - var(--ux4g-sz-48) - var(--ux4g-sz-24));
    width: var(--ux4g-sz-full);
    padding-block: var(--ux4g-padding-2xl);
}


.ux4g-identity-access-layout-card .ux4g-form-box {
    background-color: var(--ux4g-bg-neutral-elevated);
    border-radius: var(--ux4g-radius-lg);
    box-shadow: var(--ux4g-shadow-l2);
    padding: var(--ux4g-padding-xl);
    max-width: 550px;

}

.ux4g-identity-access-full .ux4g-form-box {
    max-width: 550px;

}


 
/* Mobile Breakpoint Overrides for Pattern 3 */
@media (max-width: 767px) {
    .ux4g-identity-access-layout-card,
    .ux4g-identity-access-full {
        padding-inline: var(--ux4g-padding-m);
        padding-block: var(--ux4g-padding-xl);
        min-height: auto;
    }
    .ux4g-identity-access-layout-card .ux4g-form-box,
    .ux4g-identity-access-full .ux4g-form-box {
        padding: var(--ux4g-padding-xl) var(--ux4g-padding-m);
        max-width: var(--ux4g-sz-full);
    }
}
 
/* Lock/Error Badge Components */
.ux4g-error-badge-outer {
    width: var(--ux4g-sz-64);
    height: var(--ux4g-sz-64);
    background-color: var(--ux4g-bg-error-soft);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ux4g-margin-xl);
}
 
.ux4g-error-badge-inner {
    width: var(--ux4g-sz-40);
    height: var(--ux4g-sz-40);
    background-color: var(--ux4g-bg-error-strong);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
 
/* ==========================================================================
   Session Timeout Modals Styles (Format 4)
   ========================================================================== */
 
/* Wrapper handles only height block constraints */
.session-out-bg{
    background-image: url("https://cdn.ux4g.gov.in/UX4G@3.0.18/assets/images/session-out-bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
.ux4g-session-timeout-wrapper {
    min-height: 540px;
}
 
/* Card details handles container constraint overrides */
.ux4g-session-card {
    padding: var(--ux4g-padding-l);
    max-width: 500px;
}

/* Session Modal Badge Styles */
.ux4g-session-badge-outer {
    width: var(--ux4g-sz-64);
    height: var(--ux4g-sz-64);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ux4g-margin-xl);
}

.ux4g-session-badge-inner {
    width: var(--ux4g-sz-40);
    height: var(--ux4g-sz-40);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Color variations for session badges */
.ux4g-session-badge-primary {
    background-color: var(--ux4g-bg-primary-soft);
}
.ux4g-session-badge-primary .ux4g-session-badge-inner {
    background-color: var(--ux4g-bg-primary-strong);
}

.ux4g-session-badge-warning {
    background-color: var(--ux4g-bg-warning-soft);
}
.ux4g-session-badge-warning .ux4g-session-badge-inner {
    background-color: var(--ux4g-bg-warning-strong);
}

.ux4g-session-badge-neutral {
    background-color: var(--ux4g-bg-neutral-soft);
}
.ux4g-session-badge-neutral .ux4g-session-badge-inner {
    background-color: var(--ux4g-bg-neutral-strong);
}

@media (min-width: 576px) {
    .ux4g-session-card {
        min-width: 500px;
    }
}
 
@media (max-width: 576px) {
    .ux4g-session-card {
        padding: var(--ux4g-padding-xl);
    }
}
 
/* Tabular countdown timers with custom size variables */
.ux4g-session-timer {
    font-size: var(--ux4g-fs-48);
    font-weight: var(--ux4g-fw-bold);
    font-variant-numeric: tabular-nums;
}
 
/* Smooth width updates for indicator fill */
.ux4g-session-progress-fill {
    transition: width 0.3s ease;
}
 
/* Actions handles responsive side-by-side flex layout & outline neutral state styling */
.ux4g-session-actions {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs);
    width: var(--ux4g-sz-full);
}
 
@media (min-width: 576px) {
    .ux4g-session-actions {
        flex-direction: row;
        gap: var(--ux4g-inline-m);
    }
}
 
.ux4g-session-actions button,
.ux4g-session-actions a {
    flex: 1;
    justify-content: center;
}
 
.ux4g-session-actions .ux4g-btn-outline-neutral {
    border-color: var(--ux4g-border-color-neutral-default);
    color: var(--ux4g-text-neutral-primary);
}
 
.ux4g-session-actions .ux4g-btn-outline-neutral:hover {
    background-color: var(--ux4g-bg-neutral-subtle);
    border-color: var(--ux4g-border-color-neutral-default);
}
 
.ux4g-session-actions .ux4g-btn-outline-neutral:active {
    background-color: var(--ux4g-bg-neutral-emphasis);
    border-color: var(--ux4g-border-color-neutral-default);
}
 
/* Auth Errors & Lockout Pattern */
.ux4g-lockout-icon {
    width: var(--ux4g-sz-64);
    height: var(--ux4g-sz-64);
    background-color: var(--ux4g-bg-error-soft);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ux4g-margin-xl);
}
 
.ux4g-lockout-icon-inner {
    width: var(--ux4g-sz-40);
    height: var(--ux4g-sz-40);
    background-color: var(--ux4g-bg-error-strong);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.ux4g-lockout-timer {
    font-size: var(--ux4g-fs-20);
    font-weight: var(--ux4g-fw-semibold);
    color: var(--ux4g-text-error-default);
    margin-block: var(--ux4g-margin-m);
}
 
.ux4g-suspicious-icon {
    width: var(--ux4g-sz-64);
    height: var(--ux4g-sz-64);
    background-color: var(--ux4g-bg-warning-soft);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ux4g-margin-xl);
}
 
.ux4g-suspicious-icon-inner {
    width: var(--ux4g-sz-40);
    height: var(--ux4g-sz-40);
    background-color: var(--ux4g-bg-warning-strong);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.ux4g-unlock-icon {
    width: var(--ux4g-sz-64);
    height: var(--ux4g-sz-64);
    background-color: var(--ux4g-bg-success-soft);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ux4g-margin-xl);
}
 
.ux4g-unlock-icon-inner {
    width: var(--ux4g-sz-40);
    height: var(--ux4g-sz-40);
    background-color: var(--ux4g-bg-success-strong);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.ux4g-alert-warning-custom {
    border-color: var(--ux4g-border-color-warning-default);
}
 
.ux4g-alert-warning-custom .ux4g-alert-icon {
    color: var(--ux4g-icon-status-warning);
}
 
.ux4g-disabled-input {
    opacity: var(--ux4g-opacity-50);
    pointer-events: none;
}
 
/* Form box width variants */
 
/* Column variant: primary-100 background on form column (right side) */
.ux4g-identity-access-column-centered {
    background-color: var(--ux4g-bg-primary-soft);
}
 
/* Card variant: light purple background (primary-100), centered card */
.ux4g-identity-access-layout-card {
    background-color: var(--ux4g-bg-primary-soft);
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
    padding: var(--ux4g-padding-2xl) var(--ux4g-padding-xl);
}
 
.ux4g-identity-access-layout-card .ux4g-identity-access-column {
    background: transparent;
    padding: 0;
    width: auto;
    flex: initial;
    position: relative;
    z-index: var(--ux4g-z-layout-overlay);
}
 
/* Locked state: lock icon in red soft circle */
.ux4g-locked-icon-circle {
    width: var(--ux4g-sz-80);
    height: var(--ux4g-sz-80);
    border-radius: var(--ux4g-radius-full);
    background-color: var(--ux4g-bg-error-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.ux4g-locked-icon-circle .ux4g-icon-outlined {
    font-size: var(--ux4g-sz-40);
    color: var(--ux4g-icon-status-error);
}
 
 
 
/* Mobile preview frame for showcasing mobile variants on desktop page */
.ux4g-mobile-frame {
    container-type: inline-size;
    max-width: 412px;
    margin: 0 auto var(--ux4g-margin-xl);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-lg);
    overflow: hidden;
}
 
.ux4g-mobile-frame .ux4g-identity-access-layout {
    min-height: auto;
    flex-direction: column;
    background: var(--ux4g-bg-neutral);
}
 
.ux4g-mobile-frame .ux4g-identity-access-column {
    padding: var(--ux4g-padding-xl);
    width: var(--ux4g-sz-full);
}
 
/* Mobile Card variant: white card on neutral bg */
.ux4g-mobile-frame.ux4g-mobile-frame-card .ux4g-identity-access-layout {
    padding: var(--ux4g-padding-m);
}
 
.ux4g-mobile-frame.ux4g-mobile-frame-card .ux4g-identity-access-column {
    padding: 0;
    background: transparent;
}
 
.ux4g-mobile-frame.ux4g-mobile-frame-card .ux4g-card {
    padding: var(--ux4g-padding-l);
    background: var(--ux4g-bg-neutral-elevated);
}
 
/* Mobile alert stacking: title, message, counter as 3 separate rows (block layout) */
.ux4g-mobile-frame .ux4g-alert-content > .ux4g-d-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--ux4g-stack-2xs);
}
 
.ux4g-mobile-frame .ux4g-alert-counter {
    margin-inline-start: 0 !important;
}


/* ================== Aadhar Authentication styles ================== */
.ux4g-aadhaar-options {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-s);
    width: var(--ux4g-sz-full);
}

.ux4g-aadhaar-option-card {
    display: flex;
    align-items: flex-start;
    padding: var(--ux4g-padding-m) var(--ux4g-padding-l);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    background-color: var(--ux4g-bg-neutral-elevated);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    gap: var(--ux4g-inline-m);
    box-sizing: border-box;
    width: var(--ux4g-sz-full);
}

.ux4g-aadhaar-option-card:hover {
    border-color: var(--ux4g-bg-primary-emphasis);
    background-color: var(--ux4g-bg-primary-soft);
}

.ux4g-aadhaar-option-card.is-selected,
.ux4g-aadhaar-option-card:has(.ux4g-radio-input:checked) {
    border-color: var(--ux4g-bg-primary-strong);
    background-color: var(--ux4g-bg-primary-soft);
    box-shadow: 0 0 0 1px var(--ux4g-bg-primary-strong);
}

.ux4g-aadhaar-option-card .ux4g-radio-content {
    text-align: left;
    flex: 1;
    min-width: 0;
}

.ux4g-aadhaar-option-card .ux4g-radio-label {
    font-size: var(--ux4g-fs-current) !important;
    line-height: var(--ux4g-lh-current) !important;
    font-weight: var(--ux4g-fw-current) !important;
    white-space: normal;
}

.ux4g-aadhaar-option-card .ux4g-radio-description {
    font-size: var(--ux4g-fs-current) !important;
    line-height: var(--ux4g-lh-current) !important;
    font-weight: var(--ux4g-fw-current) !important;
    white-space: normal;
    display: block;
}

.ux4g-aadhaar-option-card:has(.ux4g-radio-input:checked) .ux4g-radio-label {
    color: var(--ux4g-text-brand-primary-default) !important;
}

.ux4g-aadhaar-option-card:has(.ux4g-radio-input:checked) .ux4g-radio-description {
    color: var(--ux4g-text-brand-primary-default) !important;
}



/* Face auth scanner mockup styles */
.ux4g-face-auth-scanner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ux4g-padding-xl);
    background-color: var(--ux4g-bg-neutral-soft);
    border: var(--ux4g-border-width-sm) dashed var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-lg);
    margin-bottom: var(--ux4g-margin-xl);
    position: relative;
    overflow: hidden;
}

.ux4g-face-auth-avatar-wrap {
    width: 120px;
    height: 120px;
    border-radius: var(--ux4g-radius-full);
    border: 2px solid var(--ux4g-bg-primary-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ux4g-bg-neutral-elevated);
    margin-bottom: var(--ux4g-margin-m);
    position: relative;
}

.ux4g-face-auth-avatar-wrap .ux4g-icon-outlined {
    font-size: 64px;
    color: var(--ux4g-text-neutral-tertiary);
}

.ux4g-face-auth-scanner-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ux4g-bg-primary-strong), transparent);
    animation: scanner-move 2.5s ease-in-out infinite;
}

@keyframes scanner-move {
    0% { top: 10%; }
    50% { top: 90%; }
    100% { top: 10%; }
}

/* Transaction details box */
.ux4g-transaction-details {
    background-color: var(--ux4g-bg-neutral-soft);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-m) var(--ux4g-padding-l);
    width: var(--ux4g-sz-full);
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs);
    box-sizing: border-box;
}

.ux4g-transaction-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--ux4g-fs-14);
}

.ux4g-transaction-label {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-transaction-value {
    font-weight: var(--ux4g-fw-semibold);
    color: var(--ux4g-text-neutral-primary);
}

/* Card Aadhaar flow: reference screen alignment */
.ux4g-identity-access-layout-card {
    --ux4g-aadhaar-card-width: 500px;
    min-height: calc(100vh - 80px);
    justify-content: flex-start;
    padding: 112px var(--ux4g-padding-m) 48px;
}
/*
.ux4g-identity-access-layout-card .ux4g-form-box {
    max-width: var(--ux4g-aadhaar-card-width);
    width: 100%;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}*/

.ux4g-identity-access-layout-card .ux4g-form-box > .ux4g-text-link:first-child {
    margin-bottom: 40px !important;
    color: var(--ux4g-text-brand-primary-default);
}

.ux4g-identity-access-layout-card .ux4g-heading-l-strong {
    margin-bottom: var(--ux4g-margin-s) !important;
    font-size: 30px;
    line-height: 38px;
}

.ux4g-identity-access-layout-card .ux4g-body-m-default {
    font-size: 16px;
    line-height: 24px;
}

.ux4g-identity-access-layout-card .ux4g-signin-form {
    gap: 0;
}

.ux4g-identity-access-layout-card .ux4g-aadhaar-options {
    margin-bottom: 32px !important;
}

.ux4g-identity-access-layout-card .ux4g-aadhaar-option-card {
    min-height: 72px;
    align-items: center;
    padding: 14px 16px;
    border: 0;
    background-color: var(--ux4g-bg-neutral-soft);
    border-radius: var(--ux4g-radius-sm);
    box-shadow: none;
}

.ux4g-identity-access-layout-card .ux4g-aadhaar-option-card.is-selected,
.ux4g-identity-access-layout-card .ux4g-aadhaar-option-card:has(.ux4g-radio-input:checked) {
    background-color: var(--ux4g-bg-primary-soft);
    border: 0;
    box-shadow: none;
}



.ux4g-identity-access-layout-card .ux4g-input-container {
    max-width: 500px;
    margin-top: 32px;
}


.ux4g-identity-access-layout-card .ux4g-otp-group {
    justify-content: center;
    gap: 8px;
}



.ux4g-identity-access-layout-card .ux4g-otp-input {
    text-align: center;
    font-size: 22px;
}

.ux4g-identity-access-layout-card .ux4g-otp-meta {
    justify-content: flex-start;
    gap: 10px;
    color: var(--ux4g-text-neutral-tertiary);
}

.ux4g-identity-access-layout-card .ux4g-form-actions {
    width: 100%;
    justify-content: space-between;
    gap: var(--ux4g-inline-m);
    padding-top: 32px;
    border-top: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
}

.ux4g-identity-access-layout-card .ux4g-form-actions .ux4g-text-link {
    text-align: left !important;
}

.ux4g-identity-access-layout-card .ux4g-form-footer {
    margin-top: auto !important;
    padding-top: 96px;
    gap: 8px;
}

.ux4g-identity-access-layout-card .ux4g-alert-warning {
    display: block;
    margin-top: 32px;
    margin-bottom: 32px !important;
    padding: 18px 36px;
    border: 0;
    background-color: var(--ux4g-bg-warning-soft);
    text-align: center;
}

.ux4g-identity-access-layout-card .ux4g-alert-warning .ux4g-alert-icon {
    display: none;
}

.ux4g-identity-access-layout-card .ux4g-alert-warning .ux4g-alert-message {
    color: var(--ux4g-text-neutral-primary);
    font-size: 0;
}

.ux4g-identity-access-layout-card .ux4g-alert-warning .ux4g-alert-message::before {
    content: "Camera Access Required";
    display: block;
    margin-bottom: 14px;
    font-size: 20px;
    line-height: 28px;
    font-weight: var(--ux4g-fw-semibold);
}

.ux4g-identity-access-layout-card .ux4g-alert-warning .ux4g-alert-message::after {
    content: "Your face scan data is processed locally and never stored on our servers.";
    display: block;
    font-size: 14px;
    line-height: 20px;
    font-weight: var(--ux4g-fw-regular);
}

.ux4g-identity-access-layout-card .ux4g-face-auth-scanner {
    display: none;
}

.ux4g-identity-access-layout-card .ux4g-success-badge-outer {
    width: 100%;
    height: auto;
    min-height: 44px;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 32px;
    padding: 10px 16px;
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-success-default);
    border-radius: var(--ux4g-radius-sm);
    background-color: var(--ux4g-bg-success-soft);
    box-sizing: border-box;
}

.ux4g-identity-access-layout-card .ux4g-success-badge-outer::after {
    content: "Aadhaar identity verified successfully";
    color: var(--ux4g-text-status-success);
    font-size: 14px;
    line-height: 20px;
}

.ux4g-identity-access-layout-card .ux4g-success-badge-inner {
    width: 18px;
    height: 18px;
}

.ux4g-identity-access-layout-card .ux4g-success-icon {
    font-size: 14px !important;
}

.ux4g-identity-access-layout-card .ux4g-form-box.ux4g-ai-center {
    align-items: flex-start !important;
}

.ux4g-identity-access-layout-card .ux4g-form-box.ux4g-ai-center .ux4g-heading-l-strong,
.ux4g-identity-access-layout-card .ux4g-form-box.ux4g-ai-center .ux4g-body-m-default {
    text-align: left !important;
}

.ux4g-identity-access-layout-card .ux4g-form-box.ux4g-ai-center .ux4g-form-actions .ux4g-btn-primary {
    width: 100%;
}

.ux4g-identity-access-layout-card .ux4g-transaction-details {
    margin-top: 8px;
    padding: 24px;
    border: 0;
    border-radius: var(--ux4g-radius-sm);
    background-color: var(--ux4g-bg-primary-soft);
}

.ux4g-identity-access-layout-card .ux4g-transaction-row {
    display: none;
}

.ux4g-identity-access-layout-card .ux4g-transaction-row:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.ux4g-identity-access-layout-card .ux4g-transaction-label,
.ux4g-identity-access-layout-card .ux4g-transaction-value {
    font-size: 14px;
    line-height: 20px;
}

.ux4g-identity-access-layout-card .ux4g-transaction-value {
    font-size: 16px;
    font-weight: var(--ux4g-fw-semibold);
}

@media (max-width: 767px) {
    .ux4g-identity-access-layout-card {
        min-height: auto;
        padding: 48px var(--ux4g-padding-m);
    }

    .ux4g-identity-access-layout-card .ux4g-heading-l-strong {
        font-size: 26px;
        line-height: 34px;
    }

    .ux4g-identity-access-layout-card .ux4g-form-actions {
        flex-direction: column !important;
        align-items: stretch;
    }

    .ux4g-identity-access-layout-card .ux4g-form-actions .ux4g-btn-primary {
        width: 100%;
    }
}


/* AAdhar Authentication  */
.ux4g-aadhaar-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--ux4g-sz-full);
    padding-top: var(--ux4g-padding-xl);
    border-top: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    gap: var(--ux4g-inline-m);
    box-sizing: border-box;
}

.ux4g-aadhaar-form-actions .ux4g-text-link {
    text-align: left;
    color: var(--ux4g-text-brand-primary-default);
    text-decoration: none;
}

@media (max-width: 767px) {
    .ux4g-aadhaar-form-actions {
        flex-direction: column !important;
        align-items: stretch;
        gap: var(--ux4g-stack-s);
        padding-top: var(--ux4g-padding-l);
    }
    
    .ux4g-aadhaar-form-actions .ux4g-text-link {
        text-align: center;
        display: block;
    }
}


/* Custom CSS for Consent Capture Pattern */

.ux4g-consent-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: var(--ux4g-ta-center);
    gap: var(--ux4g-stack-xs);
    margin-bottom: var(--ux4g-margin-xl);
}

.ux4g-consent-header .ux4g-icon-btn {
    margin-bottom: var(--ux4g-margin-xs);
}
.ux4g-consent-header .ux4g-body-s-default{
    width: 80%;
}

.ux4g-consent-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ux4g-stack-m);
}

/* Fixed form footer at the bottom */
.ux4g-consent-footer {
    position: var(--ux4g-pos-absolute);
    bottom: var(--ux4g-sz-20);
    left: var(--ux4g-pos-start-0);
    right: var(--ux4g-pos-end-0);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ux4g-inline-s);
}

/* ==========================================================================
   Consent Captures (Full Screen & Card)
   ========================================================================== */

.ux4g-consent-capture-container {
    box-sizing: border-box;
    width: var(--ux4g-sz-full);
}

.ux4g-consent-capture {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--ux4g-sz-screen-h) - var(--ux4g-sz-48) - var(--ux4g-sz-24));
    width: var(--ux4g-sz-full);
    overflow: hidden;
    position: var(--ux4g-pos-relative);
    padding: var(--ux4g-padding-xl);
}

.ux4g-consent-capture-card {
    background-color: var(--ux4g-bg-primary-soft);
    padding: var(--ux4g-sz-80) 0;
    
}

.ux4g-consent-capture-full {
    background-color: var(--ux4g-bg-neutral);
    padding: var(--ux4g-sz-80) 0;

}

.ux4g-consent-capture .ux4g-consent-capture-wrapper {
    width: var(--ux4g-sz-full);
    max-width: 800px;
}

.ux4g-consent-capture-card .ux4g-consent-capture-wrapper {
    background-color: var(--ux4g-bg-neutral-elevated);
    border-radius: var(--ux4g-radius-lg);
    box-shadow: var(--ux4g-shadow-l2);
    padding: var(--ux4g-padding-xl);
}


@media (max-width: 767px) {
    .ux4g-consent-capture {
        padding: var(--ux4g-padding-m);
        min-height: auto;
    }
    
    .ux4g-consent-capture .ux4g-consent-capture-wrapper {
        padding: var(--ux4g-padding-m);
        max-width: var(--ux4g-sz-full);
    }

    /* Mobile responsive table for consent capture */
    .ux4g-consent-capture-wrapper .ux4g-table-responsive {
        border: none !important;
        overflow: hidden;
    }
    
    .ux4g-consent-capture-wrapper .ux4g-table {
        display: flex;
        flex-direction: column;
        gap: var(--ux4g-stack-s);
        border: none !important;
    }
    
    .ux4g-consent-capture-wrapper .ux4g-table thead {
        display: none;
    }
    
    .ux4g-consent-capture-wrapper .ux4g-table tbody {
        display: flex;
        flex-direction: column;
        gap: var(--ux4g-stack-s);
    }
    
    .ux4g-consent-capture-wrapper .ux4g-table tr {
        display: flex;
        flex-direction: column;
        gap: var(--ux4g-stack-xs);
        position: var(--ux4g-pos-relative);
        border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
        border-radius: var(--ux4g-radius-md);
        padding: var(--ux4g-padding-s) var(--ux4g-padding-m);
        background: var(--ux4g-bg-neutral)
    }
    
    .ux4g-consent-capture-wrapper .ux4g-table td {
        display: block;
        padding: 0 !important;
        border: none !important;
        background-color: transparent !important;
        height: auto !important;
        min-height: 0 !important;
    }
    
    /* Mobile responsive table columns */
    .ux4g-consent-capture-wrapper .ux4g-table td:nth-child(1) {
        padding-right: var(--ux4g-padding-xl) !important;
    }
    
    .ux4g-consent-capture-wrapper .ux4g-table-cell-avatar {
        display: inline;
    }
    
    /* Table 1: Consent Required */
    .ux4g-consent-table-req td:nth-child(4) { position: var(--ux4g-pos-absolute); top: var(--ux4g-padding-s); right: var(--ux4g-padding-m); }
    .ux4g-consent-table-req td:nth-child(2) { color: var(--ux4g-text-neutral-secondary); }
    .ux4g-consent-table-req td:nth-child(2)::before { content: "Purpose \00B7 "; }
    .ux4g-consent-table-req td:nth-child(3) { color: var(--ux4g-text-neutral-secondary); }
    .ux4g-consent-table-req td:nth-child(3)::before { content: "Retention \00B7 "; }

    /* Table 2: Data Sharing Consent */
    .ux4g-consent-table-share td:nth-child(5) { position: var(--ux4g-pos-absolute); top: var(--ux4g-padding-s); right: var(--ux4g-padding-m); }
    .ux4g-consent-table-share td:nth-child(2),
    .ux4g-consent-table-share td:nth-child(3),
    .ux4g-consent-table-share td:nth-child(4) { color: var(--ux4g-text-neutral-secondary); }
    .ux4g-consent-table-share td:nth-child(2)::before { content: "Data shared \00B7 "; }
    .ux4g-consent-table-share td:nth-child(3)::before { content: "Purpose \00B7 "; }
    .ux4g-consent-table-share td:nth-child(4)::before { content: "Duration \00B7 "; }

    /* Table 3: Manage Consents */
    .ux4g-consent-table-manage td:nth-child(3) { position: var(--ux4g-pos-absolute); top: var(--ux4g-padding-s); right: var(--ux4g-padding-m); }
    .ux4g-consent-table-manage td:nth-child(2) { color: var(--ux4g-text-neutral-secondary); }
    .ux4g-consent-table-manage td:nth-child(2)::before { content: "Data shared \00B7 "; }
    .ux4g-consent-table-manage td:nth-child(4) { color: var(--ux4g-text-neutral-secondary); }
    .ux4g-consent-table-manage td:nth-child(4):has(.ux4g-tag-tonal-error)::before { content: "Status \00B7 "; }

    /* Table 4: Consent History */
    .ux4g-consent-table-hist td:nth-child(2) { order: -1; padding-right: var(--ux4g-padding-xl) !important; color: var(--ux4g-text-neutral-primary); }
    .ux4g-consent-table-hist td:nth-child(5) { position: var(--ux4g-pos-absolute); top: var(--ux4g-padding-s); right: var(--ux4g-padding-m); }
    .ux4g-consent-table-hist td:nth-child(1),
    .ux4g-consent-table-hist td:nth-child(3),
    .ux4g-consent-table-hist td:nth-child(4) { color: var(--ux4g-text-neutral-secondary); }
    .ux4g-consent-table-hist td:nth-child(1)::before { content: "Scheme \00B7 "; }
    .ux4g-consent-table-hist td:nth-child(3)::before { content: "Data \00B7 "; }
    .ux4g-consent-table-hist td:nth-child(4)::before { content: "Given \00B7 "; }
    .ux4g-consent-footer {
        position: var(--ux4g-pos-relative);
        bottom: auto;
        margin-top: var(--ux4g-margin-2xl);
    }
    
    .ux4g-consent-history-footer {
        flex-direction: column;
        justify-content: center;
        gap: var(--ux4g-stack-s);
        text-align: var(--ux4g-ta-center);
    }

    .ux4g-consent-header .ux4g-body-s-default {
        width: 90%;
    }

    .ux4g-consent-title-wrap {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--ux4g-stack-xs);
    }
    
  
    
    .ux4g-consent-tabs .ux4g-filter-chip-md {
        flex-shrink: 0;
    }

     .ux4g-consent-button-row {
            display: block !important;
    }
    
    .ux4g-consent-button-row > * + * {
            margin-top: var(--ux4g-margin-s);
    }
}


/* ==========================================================================
   Data Sharing (Full Screen & Card)
   ========================================================================== */

.ux4g-consent-header-left {
    align-items: flex-start;
    text-align: var(--ux4g-ta-start);
}
.ux4g-consent-header-left .ux4g-body-s-default {
    width: 100%;
}

.ux4g-consent-button-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--ux4g-inline-s);
}

.ux4g-consent-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ux4g-inline-s);
    margin-bottom: var(--ux4g-margin-m);
}

.ux4g-consent-history-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--ux4g-margin-m);
}

/* Disable hover and active states for the warning icon button in the consent capture modal */
.ux4g-modal-center-content .ux4g-modal-body .ux4g-icon-btn.ux4g-bg-warning-soft {
    pointer-events: none;
}



/* ==========================================================================
   Declaration before Submission (Full Screen & Card)
   ========================================================================== */

.ux4g-consent-list {
    padding-left: var(--ux4g-padding-l);
    margin-bottom: var(--ux4g-margin-l);
    list-style-type: decimal;
}

.ux4g-consent-list li {
    margin-bottom: var(--ux4g-margin-s);
}

.ux4g-consent-list li:last-child {
    margin-bottom: 0;
}

.ux4g-consent-decl-btn-wrap {
    display: flex;
    justify-content: flex-end;
}

/* Declaration Scroll Box */
.ux4g-declaration-scroll-box {
    position: var(--ux4g-pos-relative);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
    border-radius: var(--ux4g-radius-md);
    background-color: var(--ux4g-bg-neutral);
    overflow: hidden;
}

.ux4g-declaration-content {
    max-height: 240px;
    overflow-y: auto;
    padding: var(--ux4g-padding-l);
}

.ux4g-declaration-scroll-hint {
    position: var(--ux4g-pos-absolute);
    bottom: var(--ux4g-pos-end-0);
    left: var(--ux4g-pos-start-0);
    width: var(--ux4g-sz-full);
    height: var(--ux4g-sz-80);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,1) 100%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: var(--ux4g-padding-m);
    pointer-events: none;
    transition: opacity 0.3s ease;
}



.ux4g-signature-input-wrap .ux4g-input-wrapper {
    max-width: var(--ux4g-sz-full);
}

@media (max-width: 767px) {
    .ux4g-consent-list {
        padding-left: var(--ux4g-padding-m);
    }
    
    .ux4g-consent-decl-btn-wrap {
        flex-direction: column;
    }
    
    .ux4g-consent-decl-btn-wrap .ux4g-btn-primary {
        width: var(--ux4g-sz-full);
    }
}

.ux4g-consent-decl-btn-wrap .ux4g-btn-primary:disabled {
    background-color: var(--ux4g-bg-primary-subtle) !important;
    color: var(--ux4g-text-white) !important;
}

.ux4g-declaration-scroll-hint .ux4g-tag-tonal-primary {
    background-color: var(--ux4g-bg-neutral-elevated) !important;
    box-shadow: var(--ux4g-shadow-l2);
}
/* Notification Styles */
.ux4g-notification-group-header {
    background: var(--ux4g-bg-neutral-soft);
    padding: var(--ux4g-padding-s) var(--ux4g-padding-l);
}
.ux4g-notification-item {
    padding: var(--ux4g-padding-s) var(--ux4g-padding-l);
    border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
    background: var(--ux4g-bg-neutral);
    display: flex;
    align-items: flex-start;
    gap: var(--ux4g-stack-s);
}
.ux4g-notification-content {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-2xs);
    flex: 1;
}
.ux4g-notification-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.ux4g-notification-action-link {
    margin-top: var(--ux4g-margin-2xs);
}

.ux4g-notification-drawer-header {
    padding: var(--ux4g-padding-m) var(--ux4g-padding-l);
    border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
}
.ux4g-notification-drawer-body {
    padding: var(--ux4g-padding-none);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ux4g-notification-drawer-body .ux4g-empty-state {
    margin: auto;
}
.ux4g-notification-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--ux4g-padding-none);
    display: flex;
    align-items: center;
}
.ux4g-notification-group-header span {
    text-transform: uppercase;
}
.ux4g-notification-item > [class^="ux4g-badge-dot"] {
    margin-top: var(--ux4g-margin-2xs);
}

.ux4g-application-main {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--ux4g-section-m) var(--ux4g-padding-2xl);
}

@media (max-width: 768px) {
    .ux4g-application-main {
        padding: var(--ux4g-padding-xl) var(--ux4g-padding-l);
    }
}

/* Empty State Icon Button Styles */
.ux4g-empty-state .ux4g-icon-btn {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.ux4g-empty-state .ux4g-icon-btn.ux4g-bg-primary-soft:hover {
    background-color: var(--ux4g-bg-primary-subtle) !important;
}

.ux4g-empty-state .ux4g-icon-btn.ux4g-bg-primary-soft:active {
    background-color: var(--ux4g-bg-primary-emphasis) !important;
}

.ux4g-empty-state .ux4g-icon-btn:disabled,
.ux4g-empty-state .ux4g-icon-btn[disabled] {
    background-color: var(--ux4g-bg-neutral-disabled) !important;
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

.ux4g-empty-state .ux4g-icon-btn:disabled .ux4g-icon-outlined,
.ux4g-empty-state .ux4g-icon-btn[disabled] .ux4g-icon-outlined {
    color: var(--ux4g-text-neutral-disabled) !important;
}

/* Reminder Alert Fixed Bottom Right */
.ux4g-reminder-alert {
    position: fixed;
    bottom: var(--ux4g-padding-l);
    right: var(--ux4g-padding-l);
    z-index: 1000;
    max-width: calc(100% - 48px);
    animation: slideInUp 0.3s ease-out forwards;
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ux4g-noti-content {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-inline-xs);
}




.noti-channel {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.noti-channel-container {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

.noti-channel-layout {
  display: flex;
  width: 100%;
}

.noti-channel-sidebar {
  width: 260px;
  flex-shrink: 0;
  height: max-content;
  border-radius: var(--ux4g-radius-md);
  border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
  background: var(--ux4g-bg-neutral-elevated);
  padding: var(--ux4g-padding-s);
}

.noti-channel-content {
  flex-grow: 1;
}

.noti-channel-panel {
  border-radius: var(--ux4g-radius-md);
  border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
  background: var(--ux4g-bg-neutral-elevated);
  padding: var(--ux4g-padding-xl);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.noti-channel-list-item {
  border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
}

.noti-channel-list-item:last-child {
  border-bottom: none;
}

.noti-channel-header {
  margin-bottom: var(--ux4g-margin-xl);
}

.noti-channel-content .ux4g-list {
  box-shadow: none !important;
  background: none;
  padding: 0;
}

.noti-channel-content .ux4g-btn-primary:disabled {
  background-color: var(--ux4g-bg-primary-subtle) !important;
  color: var(--ux4g-text-white) !important;
}

.noti-channel-success-box {
  border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-success-default);
}

/* Map tab is-active class to choice chip active styles */
.noti-channel-sidebar .ux4g-choice-chip-md.active {
  background-color: var(--ux4g-bg-primary-strong);
  color: var(--ux4g-text-white);
}
.noti-channel-sidebar .ux4g-choice-chip-md.active .ux4g-icon-outlined {
  color: var(--ux4g-text-white);
}

.noti-channel-nowrap {
  white-space: nowrap !important;
  word-wrap: normal !important;
}

@media (max-width: 768px) {
  .noti-channel-layout {
    flex-direction: column;
  }

  .noti-channel-panel {
    padding: var(--ux4g-padding-l);
  }

  .noti-channel-sidebar {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0 0 var(--ux4g-padding-l) 0;
  }

  .noti-channel-sidebar .ux4g-tab-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    gap: var(--ux4g-padding-2xs);
    padding: var(--ux4g-padding-2xs) var(--ux4g-padding-2xs) var(--ux4g-padding-s) var(--ux4g-padding-2xs);
    /* Space for outline and scrollbar */
  }

  /* Make tabs look like chips on mobile */
  .noti-channel-sidebar .ux4g-tab-item {
    width: max-content;
    flex-shrink: 0;
    font-size: var(--ux4g-fs-14);
    border-radius: var(--ux4g-radius-sm);
    padding: var(--ux4g-space-none) var(--ux4g-padding-xs);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
    background-color: var(--ux4g-bg-neutral);
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ux4g-text-neutral-primary);
    border-radius: var(--ux4g-radius-md);

  }

  .noti-channel-sidebar .ux4g-tab-item.active {
    background-color: var(--ux4g-bg-primary-strong);
    color: var(--ux4g-bg-neutral);
    border-color: transparent;
    font-weight: var(--ux4g-fw-regular);
  }

  .noti-channel-content {
    width: 100%;
  }

  /* Prevent text truncation in list items on mobile */
  .noti-channel-panel .ux4g-list-default .ux4g-list-item-row .ux4g-list-item-start .ux4g-d-flex>span {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }

  /* Ensure switches are perfectly right-aligned */
  .noti-channel-panel .ux4g-list-item-row.ux4g-toggles {
    justify-content: space-between;
    width: 100%;
  }

  .noti-channel-panel .ux4g-list-item-row.ux4g-toggles .ux4g-list-item-start {
    flex-grow: 1;
    margin-right: var(--ux4g-margin-l);
  }

  .noti-channel-panel .ux4g-list-item-row.ux4g-toggles .ux4g-list-item-end {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Make full width buttons on mobile */
  .noti-channel-panel .ux4g-btn {
    width: 100%;
  }
}
@media (min-width:768px) {
    .ux4g-application-submission .ux4g-identity-access-column {
        padding: var(--ux4g-padding-xl) 0
    }
}

@media (max-width:767px) {
    .ux4g-application-submission .ux4g-identity-access-column {
        justify-content: space-between;
        min-height: calc(100vh - 120px)
    }

    .ux4g-application-submission .ux4g-form-actions-bottom {
        border-top: 1px solid var(--ux4g-border-color-neutral-default);
        padding-top: var(--ux4g-padding-xl);
        margin-top: auto
    }
}

.ux4g-application-submission .ux4g-list {
    background-color: transparent;
    box-shadow: none;
    padding: 0
}

.ux4g-application-submission .ux4g-list-item {
    background-color: var(--ux4g-bg-neutral-soft)
}

.ux4g-application-submission .ux4g-list-item-row:has(input[type=radio]:checked) {
    background-color: var(--ux4g-bg-primary-soft)
}

.ux4g-application-submission .ux4g-gov-form-wrapper {
    max-width: 500px;
    margin: 0 auto
}

.ux4g-application-submission .ux4g-identity-access-layout-card .ux4g-success-badge-outer::after {
    content: none
}

.ux4g-application-submission .ux4g-identity-access-layout-card .ux4g-success-badge-outer {
    width: 72px;
    height: 72px;
    min-height: unset;
    justify-content: center;
    gap: 0;
    margin-bottom: 0;
    padding: 0;
    border: none;
    border-radius: var(--ux4g-radius-full);
    background-color: var(--ux4g-bg-success-subtle);
    box-sizing: border-box
}

.ux4g-application-submission .ux4g-identity-access-layout-card .ux4g-success-badge-inner {
    width: var(--ux4g-size-32);
    height: var(--ux4g-size-32);
    border-radius: var(--ux4g-radius-full);
    background-color: var(--ux4g-bg-success-strong);
    display: flex;
    align-items: center;
    justify-content: center
}

.ux4g-application-submission .ux4g-identity-access-layout-card .ux4g-success-badge-inner .ux4g-success-icon {
    font-size: var(--ux4g-fs-24) !important;
    color: var(--ux4g-text-neutral-inverse) !important
}

.ux4g-application-submission .ux4g-save-resume-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 774px;
    padding: var(--ux4g-padding-xl)
}

.ux4g-application-submission .ux4g-save-resume-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--ux4g-stack-m);
    width: var(--ux4g-sz-full);
}

.ux4g-application-submission .ux4g-save-resume-skeleton {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--ux4g-stack-m);
    justify-content: center
}

.ux4g-application-submission .ux4g-save-resume-skeleton-grid {
    grid-template-columns: 1fr 400px;
    gap: var(--ux4g-padding-xl);
    align-items: start
}

@media (max-width:991px) {
    .ux4g-application-submission .ux4g-save-resume-skeleton-grid {
        grid-template-columns: 1fr
    }
}

.ux4g-application-submission .ux4g-skeleton-block {
    background-color: var(--ux4g-bg-neutral-subtle);
    border-radius: var(--ux4g-radius-sm)
}

.ux4g-application-submission .ux4g-skeleton-title {
    width: 200px;
    height: var(--ux4g-sz-32)
}

.ux4g-application-submission .ux4g-skeleton-subtitle {
    width: 320px;
    height: var(--ux4g-sz-16)
}

.ux4g-application-submission .ux4g-skeleton-circle {
    width: var(--ux4g-sz-40);
    height: var(--ux4g-sz-40);
    border-radius: var(--ux4g-radius-full)
}

.ux4g-application-submission .ux4g-skeleton-btn {
    width: var(--ux4g-sz-120);
    height: var(--ux4g-sz-40);
    border-radius: var(--ux4g-radius-md)
}

.ux4g-application-submission .ux4g-skeleton-main {
    height: 400px;
    border-radius: var(--ux4g-radius-lg)
}

.ux4g-application-submission .ux4g-skeleton-sidebar-card {
    height: var(--ux4g-sz-120);
    border-radius: var(--ux4g-radius-lg)
}

.ux4g-application-submission .ux4g-draft-status-bar-mobile {
    padding-inline: var(--ux4g-padding-m);
    padding-block: var(--ux4g-padding-s);
    border-radius: var(--ux4g-radius-md)
}

.ux4g-application-submission .ux4g-save-resume-mobile-actions {
    width: var(--ux4g-sz-full);
    padding-top: var(--ux4g-padding-xl)
}

@media (max-width:767px) {
    .ux4g-application-submission .ux4g-save-resume-body {
        min-height: unset;
        padding-inline: var(--ux4g-padding-m);
        justify-content: space-between
    }
}

.ux4g-gov-workspace-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--ux4g-padding-xl);
    align-items: start
}

@media (max-width:991px) {
    .ux4g-gov-workspace-grid {
        grid-template-columns: 1fr
    }
}

.ux4g-gov-workspace-success-card {
    max-width: 480px;
    margin: 0 auto;
    background-color: var(--ux4g-bg-neutral-elevated);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-2xl)
}

/* ==================== Save and Resume – Resume Screen ==================== */

/* Form column centered layout */
.ux4g-application-submission .ux4g-save-resume-form-column {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-padding-xl);
    max-width: 500px;
    width: var(--ux4g-sz-full);
    padding-block: var(--ux4g-section-2xl);
}

/* Steps container */
.ux4g-application-submission .ux4g-save-resume-steps {
    display: flex;
    flex-direction: column;
    width: var(--ux4g-sz-full);
}

/* Step row */
.ux4g-application-submission .ux4g-save-resume-step-row {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m);
    padding-block: var(--ux4g-padding-s);
}

/* Step icon base */
.ux4g-application-submission .ux4g-save-resume-step-icon {
    width: var(--ux4g-sz-20);
    height: var(--ux4g-sz-20);
    border-radius: var(--ux4g-radius-full);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Step icon: completed */
.ux4g-application-submission .ux4g-save-resume-step-done {
    background-color: var(--ux4g-bg-success-strong);
}

.ux4g-application-submission .ux4g-save-resume-step-done .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-16);
    color: var(--ux4g-text-neutral-inverse);
}

/* Step icon: pending */
.ux4g-application-submission .ux4g-save-resume-step-pending {
    border: 1.5px solid var(--ux4g-border-color-neutral-default);
}

/* Resume screen actions row */
.ux4g-application-submission .ux4g-save-resume-actions {
    display: flex;
    gap: var(--ux4g-inline-s);
    width: var(--ux4g-sz-full);
}

/* Step icon: warning (incomplete) */
.ux4g-application-submission .ux4g-save-resume-step-warning {
    background-color: var(--ux4g-bg-warning-strong);
}

.ux4g-application-submission .ux4g-save-resume-step-warning .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-16);
    color: var(--ux4g-text-neutral-inverse);
}

@media (max-width: 767px) {
    .ux4g-application-submission .ux4g-save-resume-actions {
        flex-direction: column-reverse;
    }

    /* Modal action buttons stack vertically on mobile */
    .ux4g-application-submission .ux4g-modal-box>.ux4g-d-flex:last-child {
        flex-direction: column;
        gap: var(--ux4g-stack-xs);
        padding: var(--ux4g-padding-m) var(--ux4g-padding-l);
    }

    /* Modal container needs min-height on mobile */
    .ux4g-application-submission.ux4g-relative {
        min-height: 844px;
    }

    /* Notification row stacks on mobile */
    .ux4g-application-submission .ux4g-submission-notification-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ux4g-stack-xs);
    }
}

/* Modal scoped to pattern container (not viewport-fixed) */
.ux4g-application-submission .ux4g-modal-backdrop {
    position: absolute;
}

/* ==================== Submission Acknowledgement ==================== */

/* Hero icon badge (64px) */
.ux4g-application-submission .ux4g-submission-hero-icon {
    width: var(--ux4g-sz-64);
    height: var(--ux4g-sz-64);
}

/* Reference card */
.ux4g-application-submission .ux4g-submission-ref-card {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs);
    padding: var(--ux4g-padding-m);
    border-radius: var(--ux4g-radius-md);
    background-color: var(--ux4g-bg-primary);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-primary-default);
    width: var(--ux4g-sz-full);
}

/* Submission info card (white, no border) */
.ux4g-application-submission .ux4g-submission-info-card {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs);
    padding: var(--ux4g-padding-l);
    background-color: var(--ux4g-bg-neutral-elevated);
    border-radius: var(--ux4g-radius-md);
}
.ux4g-sms-email-notification {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: var(--ux4g-bg-neutral-elevated, #ffffff);
  border-radius: var(--ux4g-radius-lg, 12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.ux4g-sms-email-notification-header {
  display: flex;
  padding: var(--ux4g-padding-l, 20px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ux4g-stack-xs, 8px);
  border-bottom: 1px solid var(--ux4g-border-color-neutral-subtle);
  background: var(--ux4g-bg-neutral, #FAFAFA);
}

.ux4g-sen-info-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: var(--ux4g-section-xs);
}

@media (max-width: 768px) {
  .ux4g-sen-info-row {
    grid-template-columns: 1fr;
    gap: var(--ux4g-space-2, 4px);
  }
}

.ux4g-sms-email-notification .journey-timeline-card {
  border: none;
  padding: 0;
  box-shadow: none;
  background: transparent;
}

.ux4g-sen-timeline-card {
  background: var(--ux4g-bg-neutral-elevated, #ffffff) !important;
  border-color: var(--ux4g-border-color-neutral-default, #e0e0e0) !important;
}

.ux4g-sen-timeline-card.active {
  background: var(--ux4g-bg-primary-soft, #f3e8ff) !important;
  border-color: var(--ux4g-border-color-primary-default, #6200ea) !important;
}

.ux4g-sms-content {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-inline-xs);
}




/* Custom CSS for Payment Pattern */

.ux4g-payment-footer {
    position: var(--ux4g-pos-absolute);
    bottom: var(--ux4g-sz-20);
    left: var(--ux4g-pos-start-0);
    right: var(--ux4g-pos-end-0);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ux4g-inline-s);
}

/* ==========================================================================
   Payment Layouts (Full Screen & Card)
   ========================================================================== */



.ux4g-payment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--ux4g-sz-screen-h) - var(--ux4g-sz-48) - var(--ux4g-sz-24));
    width: var(--ux4g-sz-full);
    overflow: hidden;
    position: var(--ux4g-pos-relative);
    padding: var(--ux4g-padding-xl);
}

.ux4g-payment-card {
    background-color: var(--ux4g-bg-primary-soft);
    padding: var(--ux4g-sz-80) 0;
}

.ux4g-payment-full {
    background-color: var(--ux4g-bg-neutral);
    padding: var(--ux4g-sz-80) 0;
}

.ux4g-payment .ux4g-payment-wrapper {
    width: var(--ux4g-sz-full);
    max-width: 500px;
}

.ux4g-payment-card .ux4g-payment-wrapper {
    background-color: var(--ux4g-bg-neutral-elevated);
    border-radius: var(--ux4g-radius-lg);
    box-shadow: var(--ux4g-shadow-l2);
    padding: var(--ux4g-padding-xl);
}

@media (max-width: 767px) {
    .ux4g-payment {
        padding: var(--ux4g-padding-m);
        min-height: auto;
    }
    
    .ux4g-payment .ux4g-payment-wrapper {
        padding: var(--ux4g-padding-m);
        max-width: var(--ux4g-sz-full);
    }
    
    .ux4g-payment-footer {
        position: var(--ux4g-pos-relative);
        bottom: auto;
        margin-top: var(--ux4g-margin-2xl);
    }
}


/* Payment Summary Table */
.ux4g-payment .ux4g-table-responsive {
    border-radius: var(--ux4g-radius-md) !important;
}

.ux4g-payment .ux4g-table th,
.ux4g-payment .ux4g-table td {
    border: none !important;
}

.ux4g-payment .ux4g-table tbody tr:last-child td {
    border-top: 1px solid var(--ux4g-border-color-neutral-default) !important;
}

.ux4g-payment .ux4g-table th {
    text-align: left !important;
}


/* Payment List Styling */
.ux4g-payment .ux4g-list {
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-space-4);
}

.ux4g-payment .ux4g-list-item {
    border-radius: var(--ux4g-radius-md) !important;
    background-color: var(--ux4g-bg-neutral-soft) !important;
}

.ux4g-payment .ux4g-list-item-row:has(input[type="radio"]:checked) {
    background-color: var(--ux4g-bg-primary-soft) !important;
    border-radius: var(--ux4g-radius-md) !important;
}

.ux4g-dashboard-section-gap {
    padding-top: var(--ux4g-padding-2xl);
    padding-bottom: var(--ux4g-padding-2xl);
}



/* 4 Card Grid */
.ux4g-dashboard-overview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ux4g-inline-m);
}

.ux4g-dashboard-overview-card {
    display: flex;
    min-width: 230px;
    flex: 1;
    padding: var(--ux4g-padding-s) var(--ux4g-padding-m);
    flex-direction: column;
    justify-content: center;
    gap: var(--ux4g-stack-2xs);
    border-radius: var(--ux4g-radius-md);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
    background: var(--ux4g-bg-neutral-elevated);
}

@media (max-width: 768px) {
    .ux4g-dashboard-overview-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .ux4g-dashboard-overview-card {
        min-width: 0;
    }
}

/* Mobile Responsive Layout for Result List with Checkbox */
@media (max-width: 768px) {
    .ux4g-result-list:has(.ux4g-checkbox) {
        grid-template-columns: auto 1fr auto !important;
    }

    .ux4g-result-list:has(.ux4g-checkbox) .ux4g-checkbox {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        align-self: flex-start !important;
        margin-right: var(--ux4g-margin-s);
        margin-top: 4px;
    }

    .ux4g-result-list:has(.ux4g-checkbox) .ux4g-result-list-title,
    .ux4g-result-list:has(.ux4g-checkbox) .ux4g-result-list-title-group-header {
        grid-column: 2 !important;
    }

    .ux4g-result-list:has(.ux4g-checkbox) .ux4g-result-list-actions {
        grid-column: 3 !important;
    }

    .ux4g-result-list:has(.ux4g-checkbox) [class*="ux4g-sla-badge"],
    .ux4g-result-list:has(.ux4g-checkbox) [class*="ux4g-tag-"] {
        grid-column: 2 / span 2 !important;
    }

    .ux4g-result-list-v1:has(.ux4g-checkbox) .ux4g-result-list-id,
    .ux4g-result-list-v1:has(.ux4g-checkbox) .ux4g-result-list-dept {
        grid-column: 2 !important;
    }

    .ux4g-result-list-v1:has(.ux4g-checkbox) .ux4g-result-list-date {
        grid-column: 3 !important;
    }

    .ux4g-result-list-v1:has(.ux4g-checkbox) .ux4g-result-list-details .ux4g-result-list-detail-item:nth-child(odd) {
        grid-column: 2 !important;
    }
    
    .ux4g-result-list-v1:has(.ux4g-checkbox) .ux4g-result-list-details .ux4g-result-list-detail-item:nth-child(even) {
        grid-column: 3 !important;
    }

    .ux4g-result-list-v1:has(.ux4g-checkbox) .ux4g-result-list-details .ux4g-result-list-detail-item:nth-child(5) {
        grid-column: 2 / span 2 !important;
    }
}
.ux4g-dashboard-header-container{
    background-color: var(--ux4g-bg-primary);
    border-radius: 8px;
    padding: var(--ux4g-padding-m);
}

.ux4g-dashbaord-header-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.ux4g-dashboard-app-divider {
    height: var(--ux4g-size-12);
    margin: 0 var(--ux4g-margin-xs);
    border-left: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
}

.ux4g-dashboard-btn-track {
    min-width: var(--ux4g-size-80);
    border-radius: var(--ux4g-radius-full, 99px); 
}

.ux4g-dashboard-tag-border {
    border: var(--ux4g-border-width-sm, 1px) solid currentColor;
    background-color: transparent !important;
}

.ux4g-dashboard-action-meta {
    text-align: right;
}

.ux4g-dashboard-escalation-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ux4g-stack-2xs, 4px);
}

/* Dashboard Layout */
.ux4g-dashboard-layout-container {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Sidebar */
.ux4g-dashboard-sidebar {
    width: 256px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ux4g-stack-xl);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
    padding: var(--ux4g-padding-xl) var(--ux4g-padding-m);
}

.ux4g-dashboard-sidebar-profile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ux4g-dashboard-profile-img {
    width: var(--ux4g-size-64);
    height: var(--ux4g-size-64);
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: var(--ux4g-margin-xs);
}

.ux4g-dashboard-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs);
    flex-grow: 1;
    width: 100%;
}

.ux4g-dashboard-nav-item {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m);
    padding: var(--ux4g-padding-m);
    border-radius: var(--ux4g-radius-md);
    color: var(--ux4g-text-neutral-primary);
    text-decoration: none;
    font-size: var(--ux4g-fs-14);
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.ux4g-dashboard-nav-item:hover {
    background-color: var(--ux4g-bg-neutral-elevated);
}

.ux4g-dashboard-nav-item.active {
    background-color: var(--ux4g-bg-primary);
    color: var(--ux4g-text-white);
}

.ux4g-dashboard-nav-item.active .ux4g-dashboard-nav-icon {
    color: var(--ux4g-text-white);
}

.ux4g-dashboard-nav-icon {
    font-size: var(--ux4g-fs-20);
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-dashboard-sidebar-footer {
    margin-top: auto;
    padding-top: var(--ux4g-padding-2xl);
}

/* Popular Services Grid */
.ux4g-dashboard-service-grid {
    display: flex;
    gap: var(--ux4g-inline-m);
    flex-wrap: wrap;
    justify-content: center;
}

.ux4g-dashboard-service-card {
    display: flex;
    padding: var(--ux4g-padding-l) var(--ux4g-padding-l) var(--ux4g-padding-m) var(--ux4g-padding-l);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ux4g-stack-xs);
    flex: 1 0 0;
    min-width: 250px;
    border-radius: var(--ux4g-radius-md);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
    background: var(--ux4g-bg-neutral-elevated);
}
/* Main content */
.ux4g-dashboard-main-content {
    display: flex;
    padding: var(--ux4g-padding-xl);
    flex-direction: column;
    gap: var(--ux4g-stack-l);
    flex: 1 0 0;
    min-width: 0;
}

/* Dashboard Search Responsive */
.ux4g-dashboard-search-container {
    width: 100%;
}

@media (min-width: 768px) {
    .ux4g-dashboard-search-container {
        width: 50%;
    }
}

/* Dashboard Header Mobile Responsive Layout */
@media (max-width: 768px) {
    .ux4g-dashbaord-header-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--ux4g-stack-m) var(--ux4g-inline-m);
        align-items: center;
    }
    
    .ux4g-dashbaord-header-wrapper > .ux4g-d-flex {
        display: contents !important;
    }
    
    .ux4g-dashbaord-header-wrapper .ux4g-label-xl-strong {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    
    .ux4g-dashbaord-header-wrapper .ux4g-btn-text-primary {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    
    .ux4g-dashbaord-header-wrapper .ux4g-btn-outline-primary {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
    }
    
    .ux4g-dashbaord-header-wrapper .ux4g-btn-primary {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
    }
}

/* Main content */
.ux4g-pending-task-main {
    display: flex;
    padding: var(--ux4g-padding-xl);
    flex-direction: column;
    gap: var(--ux4g-stack-l);
    flex: 1 0 0;
    min-width: 0;
}

/* Disable active, focus, and hover states for the empty state icon button */
.ux4g-pending-task-main .ux4g-empty-state .ux4g-icon-btn-primary {
    pointer-events: none;
}

/* Center Empty State */
.ux4g-pending-task-main .ux4g-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--ux4g-stack-m, 16px);
    flex: 1;
    min-height: 60vh; /* Make sure it takes up most of the page height to center vertically */
}

.ux4g-pending-task-main .ux4g-empty-state-content {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-2xs, 4px);
    align-items: center;
}

.ux4g-pending-task-main .ux4g-empty-state-content p {
    max-width: 300px;
    margin: 0;
    color: var(--ux4g-text-neutral-secondary);
}

/* Mobile Responsiveness for Pending Task Result List (Overrides generic result-list.css) */
@media (max-width: 768px) {
    .ux4g-pending-task-main {
        padding: var(--ux4g-padding-m);
    }

    /* Override grid layout for the card */
    .ux4g-pending-task-main .ux4g-result-list-v1 {
        grid-template-columns: auto 1fr auto !important; /* Icon, Title/Meta, Toggle */
        gap: var(--ux4g-stack-xs) var(--ux4g-inline-m) !important;
    }

    /* Un-hide the icon */
    .ux4g-pending-task-main .ux4g-result-list-v1 .ux4g-result-list-icon {
        display: flex !important;
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        align-self: start !important;
    }

    /* Position the Title */
    .ux4g-pending-task-main .ux4g-result-list-v1 .ux4g-result-list-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end !important;
        font-size: var(--ux4g-fs-16) !important;
    }

    /* Position the Meta */
    .ux4g-pending-task-main .ux4g-result-list-v1 .ux4g-result-list-meta {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: start !important;
        display: flex !important;
    }

    /* Flatten actions container to separate toggle and button */
    .ux4g-pending-task-main .ux4g-result-list-v1 .ux4g-result-list-actions {
        display: contents !important;
    }

    /* Position Toggle */
    .ux4g-pending-task-main .ux4g-result-list-v1 .ux4g-result-list-accordion-toggle {
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: end !important;
    }

    /* Position Tag */
    .ux4g-pending-task-main .ux4g-result-list-v1 [class*="ux4g-tag-"] {
        grid-column: 1 / span 3 !important;
        grid-row: 3 !important;
        margin-top: var(--ux4g-margin-xs) !important;
        margin-bottom: 0 !important;
        width: fit-content !important;
    }

    /* Expanded Content */
    .ux4g-pending-task-main .ux4g-result-list-v1 .ux4g-result-list-content {
        grid-column: 1 / span 3 !important;
        grid-row: 4 !important;
        display: block !important; /* Un-flattens it so the top border (divider) comes back! */
        margin-top: var(--ux4g-margin-s) !important;
        padding-top: var(--ux4g-padding-m) !important;
        border-top: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default) !important;
    }

    /* Details Grid inside Expanded Content */
    .ux4g-pending-task-main .ux4g-result-list-v1 .ux4g-result-list-details {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--ux4g-stack-m) var(--ux4g-inline-m) !important;
    }
    
    .ux4g-pending-task-main .ux4g-result-list-v1 .ux4g-result-list-detail-item {
        grid-column: auto !important; /* Override generic nth-child placements */
        grid-row: auto !important;
    }

    /* Position Action Button */
    .ux4g-pending-task-main .ux4g-result-list-v1 .ux4g-result-list-actions > button,
    .ux4g-pending-task-main .ux4g-result-list-v1 .ux4g-result-list-actions > a {
        grid-column: 1 / span 3 !important;
        grid-row: 5 !important;
        width: 100% !important;
        justify-content: center !important;
        margin-top: var(--ux4g-margin-m) !important;
    }
    
    /* Make sure Desktop items don't break the layout if not hidden properly */
    .ux4g-pending-task-main .ux4g-result-list-v1 > .ux4g-result-list-id,
    .ux4g-pending-task-main .ux4g-result-list-v1 > .ux4g-result-list-date,
    .ux4g-pending-task-main .ux4g-result-list-v1 > .ux4g-result-list-dept {
        display: none !important;
    }
}

.ux4g-profile-container {
    display: flex;
    padding: var(--ux4g-padding-xl);
    flex-direction: column;
    gap: var(--ux4g-stack-l);
    flex: 1 0 0;
    min-width: 0;
}

.ux4g-profile-header {
    border-radius: var(--ux4g-radius-md, 8px);
    border: 1px solid var(--ux4g-border-color-neutral-subtle, #E5E5E5);
    background: var(--ux4g-bg-neutral-elevated, #FFF);
    padding: var(--ux4g-padding-xl, 24px);
}



.ux4g-profile-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ux4g-profile-header-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Custom Modal Styles for Profile */
.profile-model .ux4g-modal-header,
.profile-model .ux4g-modal-actions {
    border: none !important;
}

.profile-model .ux4g-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ux4g-inline-m, 16px);
    width: 100%;
}

.profile-model .ux4g-modal-actions button {
    width: 100%;
    justify-content: center;
}

/* Mobile Responsiveness for Profile Sections */
@media (max-width: 768px) {
    .ux4g-profile-header {
        padding: var(--ux4g-padding-l);
    }

    .ux4g-profile-header-content {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ux4g-stack-m, 16px);
    }

    .ux4g-profile-header .ux4g-btn-outline-danger {
        width: 100%;
        justify-content: center;
        margin-top: var(--ux4g-margin-s, 12px);
    }

    .profile-model .ux4g-modal-actions {
        grid-template-columns: 1fr !important;
    }
}


/* Custom List Styles for Profile */
.ux4g-profile-header .ux4g-list {
    box-shadow: none !important;
    background: none;
    padding: 0;
}

.ux4g-profile-header .ux4g-list-item {
    border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    padding-top: var(--ux4g-padding-m, 16px);
    padding-bottom: var(--ux4g-padding-m, 16px);
}

.ux4g-profile-header .ux4g-list-item:last-child {
    border-bottom: none;
}

.ux4g-profile-header .ux4g-list-switch .ux4g-list-item:nth-last-child(2) {
    border-bottom: none;
}

.ux4g-profile-header .ux4g-list-m .ux4g-list-item .ux4g-list-item-row {
    padding: 0;
}

/* Disable list item active/checked states inside profile header */
.ux4g-profile-header .ux4g-list-item-row:hover,
.ux4g-profile-header .ux4g-list-item-row:active,
.ux4g-profile-header .ux4g-list-item-row.active,
.ux4g-profile-header .ux4g-list-item-row.ux4g-toggles.active,
.ux4g-profile-header .ux4g-list-item-row:has(input:checked) {
    background-color: transparent !important;
}

/* Revert text colors when active or checked */
.ux4g-profile-header .ux4g-list-default .ux4g-list-item-row.active .ux4g-list-item-start *,
.ux4g-profile-header .ux4g-list-default .ux4g-list-item-row.active .ux4g-list-item-end *,
.ux4g-profile-header .ux4g-list-default .ux4g-list-item-row:has(input:not(:disabled):checked) .ux4g-list-item-start *,
.ux4g-profile-header .ux4g-list-default .ux4g-list-item-row:has(input:not(:disabled):checked) .ux4g-list-item-end * {
    color: var(--ux4g-text-neutral-primary) !important;
}

.ux4g-profile-header .ux4g-list-item-row.active .ux4g-text-neutral-secondary,
.ux4g-profile-header .ux4g-list-item-row:has(input:not(:disabled):checked) .ux4g-text-neutral-secondary {
    color: var(--ux4g-text-neutral-secondary) !important;
}

/* User Profile Card */
.profile-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ux4g-stack-m, 16px);
}

.profile-user-details {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m, 16px);
}

.profile-user-tags {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-xs, 8px);
    flex-wrap: wrap;
}

/* Allow text to wrap instead of truncating with ellipsis in profile lists */
.ux4g-profile-header .ux4g-list-default .ux4g-list-item-row .ux4g-list-item-start .ux4g-d-flex > span {
    text-overflow: unset;
    overflow: visible;
    white-space: normal;
}

@media (max-width: 768px) {
    .profile-user-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    
    .profile-user-details {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .profile-user-tags {
        justify-content: center;
    }
    
    .profile-user-card .profile-edit-btn {
        width: 100%;
        margin-top: var(--ux4g-margin-s, 12px);
    }

    .profile-linked-accounts-list .ux4g-list-item-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ux4g-stack-s, 12px);
    }
    
    .profile-linked-accounts-list .ux4g-list-item-end {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
}


.status-tracker-container .ux4g-result-list {
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-current, var(--ux4g-border-color-neutral-default));
    border-radius: var(--ux4g-radius-md);
}

.status-tracker-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--ux4g-sz-screen-h) - var(--ux4g-sz-48) - var(--ux4g-sz-24));
    width: var(--ux4g-sz-full);
    overflow: hidden;
    position: var(--ux4g-pos-relative);
    padding: var(--ux4g-padding-xl);
    padding-bottom: var(--ux4g-sz-80);
}

.status-tracker-container-card .journey-timeline-card {
    border-radius: var(--ux4g-radius-none);
    border: var(--ux4g-border-width-none) !important;
    padding: var(--ux4g-padding-none);

}

.ux4g-status-tracker-main {
    max-width: 600px;
    width: var(--ux4g-sz-full);
    margin-left: auto;
    margin-right: auto;
    /* padding: var(--ux4g-section-m) var(--ux4g-padding-2xl); */
}

@media (max-width: 768px) {
    .ux4g-status-tracker-main {
        padding: var(--ux4g-padding-s) var(--ux4g-padding-s);
    }
}

.status-rejected-alert {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs);
}

.status-rejected-alert .ux4g-alert-message {
    display: flex;
    flex-direction: column;
}

.status-rejected-alert ol {
    margin: 0;
    padding-left: var(--ux4g-padding-xl);
    /* Aligns list numbers with the text block */
    color: inherit;
}

.ux4g-status-button-container {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-m);
    align-items: center;
    width: var(--ux4g-sz-full);
}

.ux4g-status-button-row {
    flex-direction: row;
}

.ux4g-grievance-button-container {
    display: grid;
    flex-direction: row;
    gap: var(--ux4g-stack-m);
    align-items: center;
    width: var(--ux4g-sz-full);
    padding: var(--ux4g-padding-l);
    /* border: var(--ux4g-border-width-sm) solid var(--ux4g-border-current, var(--ux4g-border-color-neutral-default)); */
    border-radius: var(--ux4g-radius-md);
}

.ux4g-grievance-button-container .ux4g-btn-outline-primary {
    width: var(--ux4g-sz-full);
}


.ux4g-status-button-container .ux4g-btn-primary,
.ux4g-status-button-container .ux4g-btn-text-primary,
.ux4g-status-button-container .ux4g-btn-outline-primary,
.ux4g-status-button-container .ux4g-btn-text-danger {
    width: var(--ux4g-sz-full);
}

@media (max-width: 768px) {
    .ux4g-status-button-row {
        flex-direction: column;
    }

    .ux4g-status-button-container .ux4g-btn-primary,
    .ux4g-status-button-container .ux4g-btn-text-primary,
    .ux4g-status-button-container .ux4g-btn-outline-primary,
    .ux4g-status-button-container .ux4g-btn-text-danger {
        width: var(--ux4g-sz-full);
    }

    .ux4g-result-list-title-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: var(--ux4g-sz-full);
    }

    .ux4g-result-list-meta,
    .ux4g-sla-linear {
        display: block !important;
        grid-column: 1 / span 2;
        width: var(--ux4g-sz-full) !important;
        max-width: var(--ux4g-sz-full) !important;
    }

    .status-tracker-container {
        padding: var(--ux4g-padding-none);
    }
}

/* Type-2 Card Variant */
.status-tracker-container-card {
    background-color: var(--ux4g-bg-primary-soft);
    padding: var(--ux4g-sz-80) 0;

}


.status-tracker-container-card .ux4g-status-tracker-main {
    background-color: var(--ux4g-bg-neutral-elevated);
    border-radius: var(--ux4g-radius-lg);
    box-shadow: var(--ux4g-shadow-l2);
    padding: var(--ux4g-padding-l);
}

/* Remove borders inside Type-2 Card */
/* .status-tracker-container-card .ux4g-result-list {
    border: none !important;
    padding: var(--ux4g-padding-m) 0 !important;
} */

@media (max-width: 767px) {
    .status-tracker-container-card {
        padding: var(--ux4g-padding-s);
    }

    .status-tracker-container-card .ux4g-status-tracker-main {
        padding: var(--ux4g-padding-s);
    }
}

.ux4g-grievance-wrapper,
.ux4g-inspection-wrapper,
.ux4g-escalation-path,
.ux4g-field-inspection,
.ux4g-assigne-wrapper,
.ux4g-whn-wrapper,
.ux4g-gl-wrapper,
.ux4g-ai-wrapper,
.ux4g-slot-wrapper,
.ux4g-assigned-wrapper {
    border-radius: var(--ux4g-radius-md);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
    background: var(--ux4g-bg-neutral-elevated);
    display: flex;
    padding: var(--ux4g-padding-m);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ux4g-stack-s);
    align-self: stretch;
}

.ux4g-assigned-wrapper,
.ux4g-slot-wrapper,
.ux4g-ai-wrapper,
.ux4g-gl-wrapper {
    border: none;
}

.ux4g-escalation-level-card {
    background-color: var(--ux4g-bg-neutral-soft);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-m);
    width: var(--ux4g-sz-full);
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-2xs);
}

/* ==========================================================================
   UX4G Search & Browse Custom Component Styles
   ========================================================================== */

/* 1. Hero Search Section Styles */
.ux4g-sb-search-browse-75{
    width: 75%;
}
.ux4g-sb-search-hero-section {
    padding-block: var(--ux4g-section-2xl);
    padding-inline: var(--ux4g-padding-m);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ux4g-sb-search-hero-bar {
    max-width: 680px;
    width: var(--ux4g-sz-full);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    overflow: hidden;
}

.ux4g-sb-search-hero-bar-inner {
    height: var(--ux4g-sz-52);
    padding: 0 0 0 var(--ux4g-padding-m);
    border: none;
    background-color: var(--ux4g-bg-neutral-elevated);
}
.ux4g-sb-search-hero-section-inner{
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}


/* 2. Category Browse Grid Styles */

.ux4g-sb-category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ux4g-stack-xs);
    background-color: var(--ux4g-bg-neutral-elevated);
    border-radius: var(--ux4g-radius-md);
    border: var(--ux4g-border-thin) solid var(--ux4g-border-color-neutral-default);
}


.ux4g-sb-category-icon-wrap {
    width: var(--ux4g-sz-48);
    height: var(--ux4g-sz-48);
    background-color: var(--ux4g-bg-primary) !important;
    border-radius: var(--ux4g-radius-full);
}

.ux4g-sb-category-card-icon {
    font-size: var(--ux4g-fs-24);
}



.ux4g-sb-card-category {
    gap: var(--ux4g-inline-l)
}

/* 3. Featured Scheme Section Styles */
.ux4g-sb-featured-scheme-section {
    background-color: var(--ux4g-bg-neutral);
}

.ux4g-sb-featured-scheme-card {
    background-color: var(--ux4g-bg-primary);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-primary-default);
    border-radius: var(--ux4g-radius-md);
    box-shadow: var(--ux4g-shadow-l1);
    transition: box-shadow 0.3s ease;
}

.ux4g-sb-featured-scheme-card:hover {
    box-shadow: var(--ux4g-shadow-l2);
}

.ux4g-sb-featured-scheme-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ux4g-stack-s);
}



.ux4g-sb-featured-scheme-graphic-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ux4g-sz-full);
}

.ux4g-sb-featured-scheme-graphic {
    background-color: var(--ux4g-bg-primary-soft);
    border-radius: var(--ux4g-radius-sm);
    height: 180px;
    width: var(--ux4g-sz-full);
}

@media (max-width: 768px) {
    .ux4g-sb-featured-scheme-graphic {
        height: 140px;
    }
    .ux4g-sb-search-browse-75{
    width: 100%;
}
.ux4g-sb-search-discovery-main-2{
    padding-block-start: var(--ux4g-padding-xl) !important;
}
}

/* 4. Popular Services Section Styles */

.ux4g-sb-popular-service-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-m);
    height: var(--ux4g-sz-full);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.ux4g-sb-popular-service-card:hover {
    box-shadow: var(--ux4g-shadow-l1);
    border-color: var(--ux4g-border-color-neutral-default);
}

.ux4g-sb-popular-service-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--ux4g-stack-s);
}

.ux4g-sb-popular-service-meta {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-s);
}

.ux4g-sb-popular-service-card-footer {
    margin-block-start: var(--ux4g-margin-s);
}

/* 5. Recommended Section Styles */
.ux4g-sb-recommended-section {
    padding-block-end: var(--ux4g-section-2xl);
}

.ux4g-sb-recommended-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-m);
    height: var(--ux4g-sz-full);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.ux4g-sb-recommended-card:hover {
    box-shadow: var(--ux4g-shadow-l1);
    border-color: var(--ux4g-border-color-neutral-default);
}

.ux4g-sb-recommended-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--ux4g-stack-s);
}

.ux4g-sb-recommended-meta {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-s);
}

.ux4g-sb-recommended-card-footer {
    margin-block-start: var(--ux4g-margin-s);
}

/* 6. Quiz Banner Section Styles */
.ux4g-sb-quiz-section {
    padding-block-end: var(--ux4g-section-2xl);
}

.ux4g-sb-quiz-banner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--ux4g-bg-primary);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-primary-default);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-xl) var(--ux4g-padding-2xl);
    gap: var(--ux4g-inline-l);
}

.ux4g-sb-quiz-banner-body {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-2xs);
}

.ux4g-sb-quiz-banner-footer {
    display: flex;
    flex-shrink: 0;
}



/* search browse second screen */
.ux4g-sb-search-discovery-main-2{
    padding-block: var(--ux4g-section-2xl);
}

.ux4g-sb-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ux4g-inline-m);
}

.ux4g-sb-search-results-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--ux4g-inline-xl);
}

.ux4g-sb-filter-panel {
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-l);
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-m);
    height: fit-content;
}

.ux4g-sb-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ux4g-sb-filter-section {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs);
}


.ux4g-sb-results-list {
    display: flex;
    flex-direction: column;
}

.ux4g-sb-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ux4g-padding-m) var(--ux4g-padding-l);
    border-block-end: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
}

.ux4g-sb-result-row:last-child {
    border-block-end: none;
}

.ux4g-sb-result-left {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m);
}

.ux4g-sb-result-icon-wrap {
    width: var(--ux4g-sz-40);
    height: var(--ux4g-sz-40);
    background-color: var(--ux4g-bg-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ux4g-text-brand-primary-default);
}

.ux4g-sb-result-icon-wrap .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-24);
    color: inherit;
}

.ux4g-sb-result-content {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-2xs);
}

.ux4g-sb-result-right {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-l);
}

.ux4g-sb-result-meta {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m);
}



.ux4g-sb-service-badge {
    background-color: var(--ux4g-bg-neutral-subtle);
    color: var(--ux4g-text-neutral-primary);
    padding: var(--ux4g-padding-3xs) var(--ux4g-padding-xs);
    border-radius: var(--ux4g-radius-sm);
    font-size: var(--ux4g-fs-12);
    font-weight: var(--ux4g-fw-medium);
    height: 20px;
}
.ux4g-sb-search-discovery-main-4{
    margin-top: var(--ux4g-margin-xl);
}

.ux4g-sb-search-discovery-main-4 .ux4g-empty-state-content{
    max-width: 400px;
    min-width: 400px;

}

@media (max-width: 768px) {
    /* 1. Category Browse Section mobile overrides */
    .ux4g-sb-card-category {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--ux4g-inline-s) !important;
    }
    
    .ux4g-sb-card-category .ux4g-sb-category-card {
        padding: var(--ux4g-padding-m) !important;
    }

    /* 2. Featured Scheme Section mobile overrides */
    .ux4g-sb-featured-scheme-graphic-wrap {
        display: none !important;
    }

    .ux4g-sb-featured-scheme-card {
        padding: var(--ux4g-padding-l) !important;
    }

    .ux4g-sb-featured-scheme-btn {
        width: 100% !important;
    }

    /* 3. Popular Services Card background mobile override */
    .ux4g-sb-popular-service-card {
        background-color: var(--ux4g-bg-neutral-soft) !important;
    }

    /* 4. Quiz Banner mobile overrides */
    .ux4g-sb-quiz-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ux4g-stack-m);
        padding: var(--ux4g-padding-l) !important;
    }

    .ux4g-sb-quiz-banner-footer {
        width: 100% !important;
    }

    .ux4g-sb-quiz-banner-footer .ux4g-btn {
        width: 100% !important;
    }

    /* 5. Search Hero Container mobile overrides */
    .ux4g-search-hero-container {
        background-color: var(--ux4g-bg-primary) !important;
        padding-block: var(--ux4g-padding-l) !important;
    }

   
    /* search browse second screen */
    .ux4g-sb-results-header {
        gap: var(--ux4g-stack-xs);
    }

    .ux4g-sb-search-results-layout {
        grid-template-columns: 1fr;
        gap: var(--ux4g-stack-l);
    }

    .ux4g-sb-result-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ux4g-stack-m);
    }
    
    .ux4g-sb-result-right {
        justify-content: space-between;
        width: var(--ux4g-sz-full);
    }
}

/* 7. Dropdown Toggles in Search Results */
.ux4g-sb-result-dropdown {
    display: inline-flex;
    position: var(--ux4g-pos-relative);
}

.ux4g-sb-result-dropdown .ux4g-dropdown-control {
    background: transparent;
    border: none;
    padding: var(--ux4g-padding-none);
    min-height: auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ux4g-sb-result-dropdown .ux4g-dropdown-control:focus-visible {
    outline: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-primary-strong);
    border-radius: var(--ux4g-radius-sm);
}

.ux4g-sb-result-dropdown .ux4g-dropdown-menu {
    min-width: var(--ux4g-sz-120);
    width: auto;
    right: var(--ux4g-spacing-none);
    left: auto;
}

/* 8. Mobile Navbar and Search List Styles */
.ux4g-sb-navbar-mobile {
    padding: var(--ux4g-padding-m) var(--ux4g-padding-none);
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-s);
}

.ux4g-sb-search-header-item {
    padding: var(--ux4g-padding-s) var(--ux4g-padding-m);
    border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    list-style: none;
}

/* ==========================================================================
   Responsive Overrides for search-browse-2.html (scoped via body class)
   ========================================================================== */
@media (max-width: 768px) {
    

    .ux4g-sb-page-search-results .ux4g-sb-search-discovery-main-2 {
        padding-block: var(--ux4g-padding-m) !important;
    }

    .ux4g-sb-page-search-results .ux4g-sb-filter-panel {
        display: none !important;
    }

    .ux4g-sb-page-search-results .ux4g-choice-chips-container {
        overflow-x: auto !important;
        white-space: nowrap !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
        padding-block: var(--ux4g-padding-xs) !important;
    }

    .ux4g-sb-page-search-results .ux4g-choice-chips-container::-webkit-scrollbar {
        display: none !important;
    }

    .ux4g-sb-page-search-results .ux4g-sb-results-list {
        background-color: transparent !important;
        gap: var(--ux4g-stack-m) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .ux4g-sb-page-search-results .ux4g-sb-result-row {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        background-color: var(--ux4g-bg-neutral-elevated) !important;
        border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle) !important;
        border-block-end: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle) !important;
        border-radius: var(--ux4g-radius-md) !important;
        box-shadow: var(--ux4g-shadow-l0) !important;
        padding: var(--ux4g-padding-m) !important;
    }

    .ux4g-sb-page-search-results .ux4g-sb-result-right {
        width: auto !important;
        gap: var(--ux4g-inline-s) !important;
        justify-content: flex-end !important;
    }

    .ux4g-sb-page-search-results .ux4g-pagination-dotted {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--ux4g-inline-m) !important;
        margin-inline: auto !important;
        margin-top: var(--ux4g-margin-xl) !important;
        width: 100% !important;
    }

    .ux4g-sb-page-search-results .ux4g-pagination-dots {
        display: flex !important;
        align-items: center !important;
        gap: var(--ux4g-inline-s) !important;
        width: auto !important;
    }

    .ux4g-sb-page-search-results .ux4g-page-dot {
        width: 8px !important;
        height: 8px !important;
        border: none !important;
        background-color: var(--ux4g-bg-primary-soft) !important;
    }

    .ux4g-sb-page-search-results .ux4g-page-dot.ux4g-active {
        width: 28px !important;
        height: 8px !important;
        border-radius: var(--ux4g-radius-full) !important;
        background-color: var(--ux4g-bg-primary-strong) !important;
    }

    .ux4g-sb-page-search-results .ux4g-pagination-prev,
    .ux4g-sb-page-search-results .ux4g-pagination-next {
        width: 32px !important;
        height: 32px !important;
        background-color: var(--ux4g-bg-primary-soft) !important;
        color: var(--ux4g-text-brand-primary-default) !important;
        border-radius: var(--ux4g-radius-full) !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}






/* ==========================================================================
   UX4G Search & Browse Custom Component Styles
   ========================================================================== */

/* 1. Hero Search Section Styles */
.ux4g-gsd-search-browse-75{
    width: 75%;
}
.ux4g-gsd-search-hero-section {
    padding-block: var(--ux4g-section-2xl);
    padding-inline: var(--ux4g-padding-m);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ux4g-gsd-search-hero-bar {
    max-width: 680px;
    width: var(--ux4g-sz-full);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    overflow: hidden;
}

.ux4g-gsd-search-hero-bar-inner {
    height: var(--ux4g-sz-52);
    padding: 0 0 0 var(--ux4g-padding-m);
    border: none;
    background-color: var(--ux4g-bg-neutral-elevated);
}
.ux4g-gsd-search-hero-section-inner{
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
}


/* 2. Category Browse Grid Styles */

.ux4g-gsd-category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ux4g-stack-xs);
    background-color: var(--ux4g-bg-neutral-elevated);
    border-radius: var(--ux4g-radius-md);
    border: var(--ux4g-border-thin) solid var(--ux4g-border-color-neutral-default);
}


.ux4g-gsd-category-icon-wrap {
    width: var(--ux4g-sz-48);
    height: var(--ux4g-sz-48);
    background-color: var(--ux4g-bg-primary) !important;
    border-radius: var(--ux4g-radius-full);
}

.ux4g-gsd-category-card-icon {
    font-size: var(--ux4g-fs-24);
}



.ux4g-gsd-card-category {
    gap: var(--ux4g-inline-l)
}

/* Category-specific icon wrap backgrounds and icon text colors */
.ux4g-gsd-category-health .ux4g-gsd-category-icon-wrap {
    background-color: var(--ux4g-bg-primary-soft) !important;
}
.ux4g-gsd-category-health .ux4g-gsd-category-card-icon {
    color: var(--ux4g-text-brand-primary-default) !important;
}

.ux4g-gsd-category-education .ux4g-gsd-category-icon-wrap {
    background-color: var(--ux4g-bg-primary-soft) !important;
}
.ux4g-gsd-category-education .ux4g-gsd-category-card-icon {
    color: var(--ux4g-text-brand-primary-default) !important;
}

.ux4g-gsd-category-agriculture .ux4g-gsd-category-icon-wrap {
    background-color: var(--ux4g-bg-success-soft) !important;
}
.ux4g-gsd-category-agriculture .ux4g-gsd-category-card-icon {
    color: var(--ux4g-text-status-success) !important;
}

.ux4g-gsd-category-land-records .ux4g-gsd-category-icon-wrap {
    background-color: var(--ux4g-bg-info-soft) !important;
}
.ux4g-gsd-category-land-records .ux4g-gsd-category-card-icon {
    color: var(--ux4g-text-status-info) !important;
}

.ux4g-gsd-category-transport .ux4g-gsd-category-icon-wrap {
    background-color: var(--ux4g-bg-primary-soft) !important;
}
.ux4g-gsd-category-transport .ux4g-gsd-category-card-icon {
    color: var(--ux4g-text-brand-primary-default) !important;
}

.ux4g-gsd-category-social-welfare .ux4g-gsd-category-icon-wrap {
    background-color: var(--ux4g-bg-error-soft) !important;
}
.ux4g-gsd-category-social-welfare .ux4g-gsd-category-card-icon {
    color: var(--ux4g-text-status-error) !important;
}

.ux4g-gsd-category-utilities .ux4g-gsd-category-icon-wrap {
    background-color: var(--ux4g-bg-primary-soft) !important;
}
.ux4g-gsd-category-utilities .ux4g-gsd-category-card-icon {
    color: var(--ux4g-text-brand-primary-default) !important;
}

.ux4g-gsd-category-finance .ux4g-gsd-category-icon-wrap {
    background-color: var(--ux4g-bg-primary-soft) !important;
}
.ux4g-gsd-category-finance .ux4g-gsd-category-card-icon {
    color: var(--ux4g-text-brand-primary-default) !important;
}

/* 3. Featured Scheme Section Styles */
.ux4g-gsd-featured-scheme-section {
    background-color: var(--ux4g-bg-neutral);
}

.ux4g-gsd-featured-scheme-card {
    background-color: var(--ux4g-bg-primary);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-primary-default);
    border-radius: var(--ux4g-radius-md);
    box-shadow: var(--ux4g-shadow-l1);
    transition: box-shadow 0.3s ease;
}

.ux4g-gsd-featured-scheme-card:hover {
    box-shadow: var(--ux4g-shadow-l2);
}

.ux4g-gsd-featured-scheme-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ux4g-stack-s);
}



.ux4g-gsd-featured-scheme-graphic-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ux4g-sz-full);
}

.ux4g-gsd-featured-scheme-graphic {
    background-color: var(--ux4g-bg-primary-soft);
    border-radius: var(--ux4g-radius-sm);
    height: 180px;
    width: var(--ux4g-sz-full);
}

@media (max-width: 768px) {
    .ux4g-gsd-featured-scheme-graphic {
        height: 140px;
    }
    .ux4g-gsd-search-browse-75{
    width: 100%;
}
.ux4g-gsd-search-discovery-main-2{
    padding-block-start: var(--ux4g-padding-xl) !important;
}
}

/* 4. Popular Services Section Styles */

.ux4g-gsd-popular-service-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-m);
    height: var(--ux4g-sz-full);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.ux4g-gsd-popular-service-card:hover {
    box-shadow: var(--ux4g-shadow-l1);
    border-color: var(--ux4g-border-color-neutral-default);
}

.ux4g-gsd-popular-service-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--ux4g-stack-s);
}

.ux4g-gsd-popular-service-meta {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-s);
}

.ux4g-gsd-popular-service-card-footer {
    margin-block-start: var(--ux4g-margin-s);
}

/* 5. Recommended Section Styles */
.ux4g-gsd-recommended-section {
    padding-block-end: var(--ux4g-section-2xl);
}

.ux4g-gsd-recommended-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-m);
    height: var(--ux4g-sz-full);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.ux4g-gsd-recommended-card:hover {
    box-shadow: var(--ux4g-shadow-l1);
    border-color: var(--ux4g-border-color-neutral-default);
}

.ux4g-gsd-recommended-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--ux4g-stack-s);
}

.ux4g-gsd-recommended-meta {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-s);
}

.ux4g-gsd-recommended-card-footer {
    margin-block-start: var(--ux4g-margin-s);
}

/* 6. Quiz Banner Section Styles */
.ux4g-gsd-quiz-section {
    padding-block-end: var(--ux4g-section-2xl);
}

.ux4g-gsd-quiz-banner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--ux4g-bg-primary);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-primary-default);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-xl) var(--ux4g-padding-2xl);
    gap: var(--ux4g-inline-l);
}

.ux4g-gsd-quiz-banner-body {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-2xs);
}

.ux4g-gsd-quiz-banner-footer {
    display: flex;
    flex-shrink: 0;
}



/* search browse second screen */
.ux4g-gsd-search-discovery-main-2{
    padding-block: var(--ux4g-section-2xl);
}

.ux4g-gsd-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ux4g-inline-m);
}

.ux4g-gsd-search-results-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--ux4g-inline-xl);
}

.ux4g-gsd-filter-panel {
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-l);
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-m);
    height: fit-content;
}

.ux4g-gsd-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ux4g-gsd-filter-section {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs);
}


.ux4g-gsd-results-list {
    display: flex;
    flex-direction: column;
}

.ux4g-gsd-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ux4g-padding-m) var(--ux4g-padding-l);
    border-block-end: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    background-color: var(--ux4g-bg-neutral-elevated);

}

.ux4g-gsd-result-row:last-child {
    border-block-end: none;
}

.ux4g-gsd-result-left {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m);
}

.ux4g-gsd-result-icon-wrap {
    width: var(--ux4g-sz-40);
    height: var(--ux4g-sz-40);
    background-color: var(--ux4g-bg-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ux4g-text-brand-primary-default);
}

.ux4g-gsd-result-icon-wrap .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-24);
    color: inherit;
}

.ux4g-gsd-result-content {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-2xs);
}

.ux4g-gsd-result-right {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-l);
}

.ux4g-gsd-result-meta {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m);
}



.ux4g-gsd-service-badge {
    background-color: var(--ux4g-bg-neutral-subtle);
    color: var(--ux4g-text-neutral-primary);
    padding: var(--ux4g-padding-3xs) var(--ux4g-padding-xs);
    border-radius: var(--ux4g-radius-sm);
    font-size: var(--ux4g-fs-12);
    font-weight: var(--ux4g-fw-medium);
    height: 20px;
}

@media (max-width: 768px) {
    /* 1. Category Browse Section mobile overrides */
    .ux4g-gsd-card-category {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--ux4g-inline-s) !important;
    }
    
    .ux4g-gsd-card-category .ux4g-gsd-category-card {
        padding: var(--ux4g-padding-m) !important;
    }

    /* 2. Featured Scheme Section mobile overrides */
    .ux4g-gsd-featured-scheme-graphic-wrap {
        display: none !important;
    }

    .ux4g-gsd-featured-scheme-card {
        padding: var(--ux4g-padding-l) !important;
    }

    .ux4g-gsd-featured-scheme-btn {
        width: 100% !important;
    }

    /* 3. Popular Services Card background mobile override */
    .ux4g-gsd-popular-service-card {
        background-color: var(--ux4g-bg-neutral-soft) !important;
    }

    /* 4. Quiz Banner mobile overrides */
    .ux4g-gsd-quiz-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ux4g-stack-m);
        padding: var(--ux4g-padding-l) !important;
    }

    .ux4g-gsd-quiz-banner-footer {
        width: 100% !important;
    }

    .ux4g-gsd-quiz-banner-footer .ux4g-btn {
        width: 100% !important;
    }

    /* 5. Search Hero Container mobile overrides */
    .ux4g-search-hero-container {
        background-color: var(--ux4g-bg-primary) !important;
        padding-block: var(--ux4g-padding-l) !important;
    }

   
    /* search browse second screen */
    .ux4g-gsd-results-header {
        gap: var(--ux4g-stack-xs);
    }

    .ux4g-gsd-search-results-layout {
        grid-template-columns: 1fr;
        gap: var(--ux4g-stack-l);
    }

    .ux4g-gsd-result-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ux4g-stack-m);
    }
    
    .ux4g-gsd-result-right {
        justify-content: space-between;
        width: var(--ux4g-sz-full);
    }
}

/* 7. Dropdown Toggles in Search Results */
.ux4g-gsd-result-dropdown {
    display: inline-flex;
    position: var(--ux4g-pos-relative);
}

.ux4g-gsd-result-dropdown .ux4g-dropdown-control {
    background: transparent;
    border: none;
    padding: var(--ux4g-padding-none);
    min-height: auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ux4g-gsd-result-dropdown .ux4g-dropdown-control:focus-visible {
    outline: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-primary-strong);
    border-radius: var(--ux4g-radius-sm);
}

.ux4g-gsd-result-dropdown .ux4g-dropdown-menu {
    min-width: var(--ux4g-sz-120);
    width: auto;
    right: var(--ux4g-spacing-none);
    left: auto;
}

/* 8. Mobile Navbar and Search List Styles */
.ux4g-gsd-navbar-mobile {
    padding: var(--ux4g-padding-m) var(--ux4g-padding-none);
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-s);
}

.ux4g-gsd-search-header-item {
    padding: var(--ux4g-padding-s) var(--ux4g-padding-m);
    border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    list-style: none;
}

/* ==========================================================================
   Responsive Overrides for search-browse-2.html (scoped via body class)
   ========================================================================== */
@media (max-width: 768px) {
    

    .ux4g-gsd-page-search-results .ux4g-gsd-search-discovery-main-2 {
        padding-block: var(--ux4g-padding-m) !important;
    }

    .ux4g-gsd-page-search-results .ux4g-gsd-filter-panel {
        display: none !important;
    }

    .ux4g-gsd-page-search-results .ux4g-choice-chips-container {
        overflow-x: auto !important;
        white-space: nowrap !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
        padding-block: var(--ux4g-padding-xs) !important;
    }

    .ux4g-gsd-page-search-results .ux4g-choice-chips-container::-webkit-scrollbar {
        display: none !important;
    }

    .ux4g-gsd-page-search-results .ux4g-gsd-results-list {
        background-color: transparent !important;
        gap: var(--ux4g-stack-m) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .ux4g-gsd-page-search-results .ux4g-gsd-result-row {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        background-color: var(--ux4g-bg-neutral-elevated) !important;
        border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle) !important;
        border-block-end: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle) !important;
        border-radius: var(--ux4g-radius-md) !important;
        box-shadow: var(--ux4g-shadow-l0) !important;
        padding: var(--ux4g-padding-m) !important;
    }

    .ux4g-gsd-page-search-results .ux4g-gsd-result-right {
        width: auto !important;
        gap: var(--ux4g-inline-s) !important;
        justify-content: flex-end !important;
    }

    .ux4g-gsd-page-search-results .ux4g-pagination-dotted {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--ux4g-inline-m) !important;
        margin-inline: auto !important;
        margin-top: var(--ux4g-margin-xl) !important;
        width: 100% !important;
    }

    .ux4g-gsd-page-search-results .ux4g-pagination-dots {
        display: flex !important;
        align-items: center !important;
        gap: var(--ux4g-inline-s) !important;
        width: auto !important;
    }

    .ux4g-gsd-page-search-results .ux4g-page-dot {
        width: 8px !important;
        height: 8px !important;
        border: none !important;
        background-color: var(--ux4g-bg-primary-soft) !important;
    }

    .ux4g-gsd-page-search-results .ux4g-page-dot.ux4g-active {
        width: 28px !important;
        height: 8px !important;
        border-radius: var(--ux4g-radius-full) !important;
        background-color: var(--ux4g-bg-primary-strong) !important;
    }

    .ux4g-gsd-page-search-results .ux4g-pagination-prev,
    .ux4g-gsd-page-search-results .ux4g-pagination-next {
        width: 32px !important;
        height: 32px !important;
        background-color: var(--ux4g-bg-primary-soft) !important;
        color: var(--ux4g-text-brand-primary-default) !important;
        border-radius: var(--ux4g-radius-full) !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   Health Services Search Results custom classes
   ========================================================================== */
.ux4g-gsd-health-services-header-card {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m);
}

.ux4g-gsd-health-header-icon-wrap {
    width: var(--ux4g-sz-64);
    height: var(--ux4g-sz-64);
    background-color: var(--ux4g-bg-primary-soft);
    color: var(--ux4g-text-brand-primary-default);
    border-radius: var(--ux4g-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ux4g-gsd-health-header-icon-wrap .ux4g-icon-outlined {
    font-size: var(--ux4g-sz-32);
    color: var(--ux4g-text-brand-primary-default);
}

/* Ensure result row icons are rounded-md square icon wraps */
.ux4g-gsd-result-icon-wrap {
    border-radius: var(--ux4g-radius-md) !important;
}

/* Adjust page size selector padding for search discovery results */
.ux4g-gsd-search-discovery-main-2 .ux4g-page-size-select-wrapper select {
    padding-left: var(--ux4g-padding-s);
}

/* ==========================================================================
   GSD Screen 3: Birth Certificate Detail Page Styles
   ========================================================================== */
.ux4g-gsd-detail-hero-card {
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-primary-default);
    border-radius: var(--ux4g-radius-md);
    background-color: var(--ux4g-bg-neutral-elevated);
    padding: var(--ux4g-padding-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ux4g-inline-l);
    width: 100%;
}

.ux4g-gsd-detail-hero-left {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m);
}

.ux4g-gsd-detail-hero-icon-wrap {
    width: var(--ux4g-sz-64);
    height: var(--ux4g-sz-64);
    background-color: var(--ux4g-bg-primary-soft);
    color: var(--ux4g-text-brand-primary-default);
    border-radius: var(--ux4g-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ux4g-gsd-detail-hero-icon-wrap .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-32);
    color: var(--ux4g-text-brand-primary-default);
}

.ux4g-gsd-detail-hero-info {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-2xs);
}

.ux4g-gsd-detail-hero-title {
    color: var(--ux4g-text-brand-primary-default);
}

.ux4g-gsd-detail-hero-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ux4g-inline-s);
    margin-top: var(--ux4g-margin-xs);
}

.ux4g-gsd-meta-separator {
    color: var(--ux4g-text-neutral-tertiary);
}

.ux4g-gsd-verified-badge {
    color: var(--ux4g-text-status-success);
    display: inline-flex;
    align-items: center;
    gap: var(--ux4g-space-3);
}

.ux4g-gsd-info-card {
    background-color: var(--ux4g-bg-primary-soft);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-primary-default);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-l);
    height: 100%;
}

.ux4g-gsd-info-card-title {
    color: var(--ux4g-text-brand-primary-default);
}

@media (max-width: 768px) {
    .ux4g-gsd-detail-hero-card {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ux4g-stack-m);
    }
    
    .ux4g-gsd-detail-hero-left {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ux4g-stack-s);
    }
    
    .ux4g-gsd-detail-hero-card .ux4g-btn {
        width: 100%;
    }
    
    .ux4g-gsd-info-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Scoped horizontal scroll for tabs on mobile */
    .ux4g-gsd-page-search-results .ux4g-tab-underline .ux4g-tab-list {
        overflow-x: auto !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
    .ux4g-gsd-page-search-results .ux4g-tab-underline .ux4g-tab-list::-webkit-scrollbar {
        display: none !important;
    }
}

/* ==========================================================================
   UX4G Consultation Slot Booking Custom Styles
   ========================================================================== */

.ux4g-csb-advocates-list {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-m);
}

.ux4g-csb-advocate-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-l);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.ux4g-csb-advocate-card:hover {
    box-shadow: var(--ux4g-shadow-l1);
    border-color: var(--ux4g-border-color-neutral-default);
}

.ux4g-csb-advocate-left {
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-m);
}

.ux4g-csb-advocate-icon-wrap {
    width: var(--ux4g-sz-48);
    height: var(--ux4g-sz-48);
    background-color: var(--ux4g-bg-primary-soft);
    color: var(--ux4g-text-brand-primary-default);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ux4g-csb-advocate-icon-wrap .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-24);
    color: inherit;
}
.ux4g-csb-advocate-header-row{
         display: flex;
         gap: var(--ux4g-inline-m);
    }


.ux4g-csb-advocate-details {
    display: flex;
    flex-direction: column;
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .ux4g-csb-advocate-card {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ux4g-stack-m);
        padding: var(--ux4g-padding-m);
    }
    
    .ux4g-csb-advocate-left {
        gap: var(--ux4g-inline-s);
        align-items: flex-start;
    }
    
    .ux4g-csb-advocate-card .ux4g-btn {
        width: 100%;
    }
    .ux4g-csb-advocate-info{
         flex: 1;
    }
    .ux4g-csb-advocate-header-row{
         justify-content: space-between;
    }

    
}

/* ==========================================================================
   Confirmation Page Custom Styles
   ========================================================================== */

.ux4g-csb-confirm-container {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ux4g-stack-l);
}

.ux4g-csb-confirm-header {
    text-align: center;
    margin-bottom: var(--ux4g-margin-s);
}

.ux4g-csb-confirm-card {
    width: 100%;
    background-color: var(--ux4g-color-primary-50);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-color-primary-200);
    border-radius: var(--ux4g-radius-lg);
    padding: var(--ux4g-padding-xl);
    box-sizing: border-box;
}

.ux4g-csb-confirm-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    row-gap: var(--ux4g-stack-m);
    column-gap: var(--ux4g-inline-l);
}

/* Alert Warning Banner Overrides */
.ux4g-csb-confirm-alert {
    border-radius: var(--ux4g-radius-md);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-warning-default);
}

/* Actions */
.ux4g-csb-confirm-actions {
    display: flex;
    justify-content: center;
    gap: var(--ux4g-inline-m);
    margin-top: var(--ux4g-margin-s);
    width: 100%;
}

.ux4g-csb-confirm-actions .ux4g-btn {
    min-width: 180px;
}

/* Responsive Overrides for Confirmation Page */
@media (max-width: 768px) {
    .ux4g-csb-confirm-grid {
        grid-template-columns: 1fr;
        row-gap: var(--ux4g-stack-xs);
    }
    
    .ux4g-csb-confirm-card {
        padding: var(--ux4g-padding-l);
    }

    .ux4g-csb-confirm-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ux4g-stack-s);
    }

    .ux4g-csb-confirm-actions .ux4g-btn {
        width: 100%;
        min-width: 0;
    }
}

/* Success Page Confirmation Icon */
.ux4g-csb-success-icon-wrap {
    width: var(--ux4g-sz-64, 64px);
    height: var(--ux4g-sz-64, 64px);
    background-color: var(--ux4g-bg-success-soft);
    color: var(--ux4g-bg-success-strong);
    border-radius: var(--ux4g-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ux4g-margin-s);
}

.ux4g-csb-success-icon-wrap .ux4g-icon-outlined {
    font-size: var(--ux4g-fs-32, 32px);
}

/* Center wrapper to vertically and horizontally center the content */
.ux4g-csb-center-wrapper {
    min-height: calc(100vh - var(--ux4g-sz-80, 80px));
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Reschedule Card Styles */
.ux4g-csb-reschedule-card {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-lg);
    padding: var(--ux4g-padding-2xl);
    box-sizing: border-box;
}

.ux4g-csb-reschedule-select-container {
    width: 100%;
    margin-bottom: var(--ux4g-margin-l);
}

.ux4g-csb-reschedule-select-wrapper {
    position: relative;
    width: 100%;
    max-width: 320px;
}

.ux4g-csb-reschedule-select {
    width: 100%;
    height: 40px;
    padding: 0 var(--ux4g-padding-m);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-default);
    border-radius: var(--ux4g-radius-md);
    background-color: var(--ux4g-color-neutral-0);
    font-size: var(--ux4g-fs-14);
    font-family: inherit;
    color: var(--ux4g-text-neutral-primary);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.ux4g-csb-reschedule-select-wrapper::after {
    content: "expand_more";
    font-family: "Material Icons Outlined", "Material Icons";
    position: absolute;
    right: var(--ux4g-padding-m);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: var(--ux4g-fs-20);
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-csb-reschedule-actions {
    display: flex;
    justify-content: flex-start;
    gap: var(--ux4g-inline-m);
    margin-top: var(--ux4g-margin-xl);
    width: 100%;
}

.ux4g-csb-reschedule-actions .ux4g-btn {
    min-width: 160px;
}

/* Mobile Responsiveness for Reschedule Page */
@media (max-width: 860px) {
    .ux4g-csb-reschedule-card {
        padding: var(--ux4g-padding-l);
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    
    .ux4g-csb-reschedule-select-wrapper {
        max-width: 100%;
    }
    
    .ux4g-csb-reschedule-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ux4g-stack-s);
    }
    
    .ux4g-csb-reschedule-actions .ux4g-btn {
        width: 100%;
        min-width: 0;
    }
}

/* ==========================================================================
   UX4G Feedback Communication Component Styles
   ========================================================================== */

.ux4g-feedback-annual-income-section,
.ux4g-feedback-mobile-section,
.ux4g-feedback-identity-section,
.ux4g-feedback-category-section,
.ux4g-feedback-citizen-note-section,
.ux4g-feedback-verification-section,
.ux4g-feedback-completion-section {
    background-color: var(--ux4g-bg-primary-soft);
    min-height: calc(100vh - var(--ux4g-sz-80));
    display: flex;
    justify-content: center;
    padding: var(--ux4g-padding-2xl);
    box-sizing: border-box;
}

/* Ensure the layout container centers its child card horizontally and vertically */
.ux4g-feedback-annual-income-section .ux4g-container,
.ux4g-feedback-mobile-section .ux4g-container,
.ux4g-feedback-identity-section .ux4g-container,
.ux4g-feedback-category-section .ux4g-container,
.ux4g-feedback-citizen-note-section .ux4g-container,
.ux4g-feedback-verification-section .ux4g-container,
.ux4g-feedback-completion-section .ux4g-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--ux4g-sz-full);
}

.ux4g-feedback-annual-income-card,
.ux4g-feedback-mobile-card,
.ux4g-feedback-identity-card,
.ux4g-feedback-category-card,
.ux4g-feedback-citizen-note-card,
.ux4g-feedback-verification-card,
.ux4g-feedback-completion-card {
    background-color: var(--ux4g-bg-neutral-elevated);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-lg);
    width: var(--ux4g-sz-full);
    max-width: 700px;
    padding: var(--ux4g-padding-2xl);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-m);
}

.ux4g-feedback-back-wrapper {
    display: flex;
    align-items: center;
}

.ux4g-feedback-back-link {
    color: var(--ux4g-text-brand-primary-default);
    font-weight: var(--ux4g-fw-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--ux4g-inline-xs);
    text-decoration: none;
    cursor: pointer;
}

.ux4g-feedback-back-link:hover {
    text-decoration: underline;
}

.ux4g-feedback-header-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs);
}

.ux4g-feedback-title {
    color: var(--ux4g-text-neutral-primary);
}

.ux4g-feedback-subtitle {
    color: var(--ux4g-text-neutral-secondary);
}

.ux4g-feedback-input-container {
    width: var(--ux4g-sz-full);
}

.ux4g-feedback-currency-prefix {
    color: var(--ux4g-text-neutral-primary);
    font-size: var(--ux4g-fs-16);
    margin-right: var(--ux4g-padding-2xs);
    font-weight: var(--ux4g-fw-medium);
    user-select: none;
}

.ux4g-feedback-input {
    border: var(--ux4g-border-width-none) !important;
    outline: none !important;
    padding-left: var(--ux4g-padding-none) !important;
    font-size: var(--ux4g-fs-16);
    font-weight: var(--ux4g-fw-semibold);
}

.ux4g-feedback-btn-wrapper {
    margin-top: var(--ux4g-margin-l);
    display: flex;
    justify-content: flex-start;
}

.ux4g-feedback-submit-btn {
    width: auto;
}

/* Category Page Specific Styles */
.ux4g-feedback-combobox {
    width: var(--ux4g-sz-full);
}

.ux4g-feedback-alert {
    align-items: flex-start !important;
    gap: var(--ux4g-inline-m) !important;
    padding: var(--ux4g-padding-m) !important;
}

.ux4g-feedback-alert .ux4g-alert-icon {
    margin-top: var(--ux4g-space-1, 2px);
}


/* Mobile responsive style matching Image 1 */
@media (max-width: 768px) {
    .ux4g-feedback-annual-income-section,
    .ux4g-feedback-mobile-section,
    .ux4g-feedback-identity-section,
    .ux4g-feedback-category-section,
    .ux4g-feedback-citizen-note-section,
    .ux4g-feedback-verification-section,
    .ux4g-feedback-completion-section {
        background-color: var(--ux4g-bg-neutral);
        padding: var(--ux4g-padding-none);
        min-height: calc(100vh - var(--ux4g-sz-80, 80px));
        align-items: stretch;
    }

    .ux4g-feedback-annual-income-section .ux4g-container,
    .ux4g-feedback-mobile-section .ux4g-container,
    .ux4g-feedback-identity-section .ux4g-container,
    .ux4g-feedback-category-section .ux4g-container,
    .ux4g-feedback-citizen-note-section .ux4g-container,
    .ux4g-feedback-verification-section .ux4g-container,
    .ux4g-feedback-completion-section .ux4g-container {
        display: block;
        width: var(--ux4g-sz-full);
        height: var(--ux4g-sz-full);
    }

    .ux4g-feedback-annual-income-card,
    .ux4g-feedback-mobile-card,
    .ux4g-feedback-identity-card,
    .ux4g-feedback-category-card,
    .ux4g-feedback-citizen-note-card,
    .ux4g-feedback-verification-card,
    .ux4g-feedback-completion-card {
        border: var(--ux4g-border-width-none);
        border-radius: var(--ux4g-radius-none);
        box-shadow: none;
        min-height: var(--ux4g-sz-full);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--ux4g-padding-xl);
    }

    /* Push button to bottom */
    .ux4g-feedback-btn-wrapper {
        margin-top: auto;
        width: var(--ux4g-sz-full);
    }

    .ux4g-feedback-submit-btn {
        width: var(--ux4g-sz-full);
    }
}

/* Verification Page Specific Styles */
.ux4g-feedback-doc-status-card {
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-lg);
    padding: var(--ux4g-padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-m);
    background-color: var(--ux4g-bg-neutral-elevated);
}

.ux4g-feedback-doc-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ux4g-feedback-doc-info {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-space-1, 2px);
}

.ux4g-feedback-doc-title {
    color: var(--ux4g-text-neutral-primary);
}

.ux4g-feedback-progress-bar {
    --ux4g-progress-fill-start: var(--ux4g-bg-warning-soft);
    --ux4g-progress-fill-end: var(--ux4g-bg-warning-strong);
}

.ux4g-feedback-timeline-container {
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-lg);
    padding: var(--ux4g-padding-xl);
    background-color: var(--ux4g-bg-neutral-elevated);
}

/* Override active timeline card color in feedback flow to look normal */
.ux4g-feedback-verification-card .ux4g-journey-step-active .ux4g-journey-card {
    border: var(--ux4g-border-thin) solid var(--ux4g-border-color-neutral-subtle) !important;
    background: var(--ux4g-bg-neutral-elevated) !important;
}

/* Mobile responsive overrides for timeline container and doc status card */
@media (max-width: 768px) {
    .ux4g-feedback-doc-status-card,
    .ux4g-feedback-timeline-container {
        border: var(--ux4g-border-width-none);
        padding: var(--ux4g-padding-none);
        border-radius: var(--ux4g-radius-none);
        background-color: transparent;
    }
}

/* Service Completion Specific Layout & Styles */
.ux4g-feedback-completion-section .ux4g-container {
    flex-direction: column;
    gap: var(--ux4g-stack-m);
}
.ux4g-feedback-completion-section .ux4g-feedback{
        width: var(--ux4g-sz-full);
    max-width: 700px;
}

.ux4g-feedback-doc-box {
    background-color: var(--ux4g-bg-neutral-soft, #f4f4f5);
    border-radius: var(--ux4g-radius-md, 8px);
    padding: var(--ux4g-padding-m) var(--ux4g-padding-l);
    display: flex;
    align-items: center;
    gap: var(--ux4g-inline-s, 8px);
    box-sizing: border-box;
    width: var(--ux4g-sz-full);
}

.ux4g-feedback-doc-name {
    font-weight: var(--ux4g-fw-semibold, 600);
    color: var(--ux4g-text-neutral-primary);
    font-size: var(--ux4g-fs-14, 14px);
}

.ux4g-feedback-doc-meta {
    color: var(--ux4g-text-neutral-secondary);
    font-size: var(--ux4g-fs-14, 14px);
}

.ux4g-feedback-completion-btn-row {
    display: flex;
    gap: var(--ux4g-inline-m, 16px);
    width: var(--ux4g-sz-full);
    margin-top: var(--ux4g-margin-s);
}

.ux4g-feedback-completion-btn-row .ux4g-btn-primary,
.ux4g-feedback-completion-btn-row .ux4g-btn-outline-primary {
    flex: 1;
    justify-content: center;
}

/* ==========================================================================
   UX4G Help Centre Contact Options Component Refinements (Page 3)
   ========================================================================== */
.ux4g-support-channels-list {
    margin-top: var(--ux4g-space-4);
    display: flex;
    flex-direction: column ;
    gap: var(--ux4g-stack-s);
}

.ux4g-support-channel-card {
    background-color: var(--ux4g-bg-neutral-soft);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-m);
    min-height: 80px;
    gap: var(--ux4g-space-3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ux4g-support-channel-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ux4g-shadow-l1);
}

.ux4g-support-icon-wrapper {
    width: var(--ux4g-sz-48);
    height: var(--ux4g-sz-48);
    background-color: var(--ux4g-bg-primary-soft);
    border-radius: var(--ux4g-radius-full, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ux4g-support-icon-wrapper .ux4g-icon-outlined {
    color: var(--ux4g-text-brand-primary-default);
    font-size: var(--ux4g-fs-24);
}

.ux4g-support-complaint-link {
    color: var(--ux4g-text-brand-primary-default);
    font-size: var(--ux4g-fs-16);
    font-weight: var(--ux4g-fw-medium);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ux4g-support-complaint-link:hover {
    color: var(--ux4g-text-brand-primary-default);
    text-decoration: underline;
}

/* ==========================================================================
   UX4G Help Centre Contact Options Component Refinements (Page 4)
   ========================================================================== */
   .ux4g-chat-support-card{
       min-height: 455px;
    }
    .ux4g-chat-support-card .ux4g-form-action-footer{
        margin-block-start: auto;
    }
    .ux4g-chat-support-card .ux4g-live-chat-support{
        margin-inline-end: var(--ux4g-margin-s);
        margin-block-end: var(--ux4g-margin-s);
    }
/* ==========================================================================
UX4G Help Centre Contact Options Component Refinements (Page 6)
========================================================================== */
/* Parent wrapper positioning */
.ux4g-custom-list-dropdown {
    position: relative;
}
/* Trigger styling */
.ux4g-custom-dropdown-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: 10px 16px;
    font-size: var(--ux4g-fs-14);
    cursor: pointer;
}
/* Custom list layout */
.ux4g-custom-list-dropdown .ux4g-custom-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 10;
    margin-top: 4px;
    padding: 8px 0;
    background: #ffffff;
    border: 1px solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    box-shadow: var(--ux4g-shadow-l2);
    list-style: none;
    display: none; /* Toggled to block via JS when button is clicked */
}
/* Individual list item layout and states */
.ux4g-custom-list-dropdown .ux4g-custom-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ux4g-padding-s) var(--ux4g-padding-l);
    font-size: var(--ux4g-fs-14);
    line-height: var(--ux4g-lh-20);
    font-weight: var(--ux4g-fw-regular);
    color: var(--ux4g-text-neutral-primary);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.ux4g-custom-list-dropdown .ux4g-custom-dropdown-item:hover {
    background-color: var(--ux4g-bg-primary-soft);
    color: var(--ux4g-text-brand-primary-default);
}
.ux4g-custom-list-dropdown .ux4g-custom-dropdown-item.is-selected,
.ux4g-custom-list-dropdown .ux4g-custom-dropdown-item.active {
    background-color: var(--ux4g-bg-primary-soft);
    color: var(--ux4g-text-brand-primary-default);
    font-weight: var(--ux4g-fw-medium);
}
.ux4g-custom-list-dropdown .ux4g-custom-dropdown-item .ux4g-dropdown-single-check {
    opacity: 0;
    font-size: 20px;
    color: var(--ux4g-text-brand-primary-default);
    transition: opacity 0.2s ease;
}
.ux4g-custom-list-dropdown .ux4g-custom-dropdown-item.is-selected .ux4g-dropdown-single-check,
.ux4g-custom-list-dropdown .ux4g-custom-dropdown-item.active .ux4g-dropdown-single-check {
    opacity: 1;
}


/* Ensure mobile layout switches cards to column stack */
@media (max-width: 576px) {
    .ux4g-support-channel-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ux4g-space-3);
        padding: var(--ux4g-padding-m);
    }
    
    .ux4g-support-channel-card button {
        width: 100%;
    }
}

/* ==========================================================================
   UX4G Help Centre Contact Options Component Refinements (Page 7)
   ========================================================================== */

.ux4g-nearest-csc-header {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-space-2, 8px);
}

.ux4g-csc-search-container {
    width: 100%;
}

.ux4g-nearest-csc-info-box {
    background-color: var(--ux4g-bg-neutral-soft);
    border: var(--ux4g-border-width-sm) solid var(--ux4g-border-color-neutral-subtle);
    border-radius: var(--ux4g-radius-md);
    padding: var(--ux4g-padding-m);
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs);
}



.ux4g-nearest-csc-info-box .ux4g-csc-address {
    font-size: var(--ux4g-fs-14, 14px);
    color: var(--ux4g-text-neutral-secondary);
    margin: 0;
}

.ux4g-nearest-csc-info-box .ux4g-csc-meta {
    font-size: var(--ux4g-fs-12, 12px);
    color: var(--ux4g-text-neutral-tertiary);
    margin-top: 4px;
    margin-bottom: 0;
}

.ux4g-csc-actions {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-stack-xs, 8px);
    width: 100%;
}

/* ==========================================================================
   UX4G Language Switcher Component Refinements (Page Language Switcher 1)
   ========================================================================== */
.ux4g-language-header {
    display: flex;
    flex-direction: column;
    gap: var(--ux4g-space-2, 8px);
}

.ux4g-custom-dropdown-wrapper {
    position: relative;
    width: 100%;
}

.ux4g-custom-dropdown-wrapper .ux4g-dropdown-leading-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ux4g-text-neutral-secondary);
    font-size: var(--ux4g-fs-18, 18px);
    pointer-events: none;
    z-index: 2;
}

.ux4g-custom-dropdown-wrapper .ux4g-custom-dropdown-btn {
    padding-left: 44px; /* Make room for the leading globe icon */
}


@media (max-width: 768px) {
    .ux4g-feedback-completion-section .ux4g-container {
        display: flex;
        flex-direction: column;
        height: var(--ux4g-sz-full);
    }
    
    .ux4g-feedback-completion-card {
        flex: 1;
    }

    .ux4g-feedback-completion-btn-row {
        flex-direction: column-reverse;
        gap: var(--ux4g-stack-s);
        margin-top: auto;
        width: var(--ux4g-sz-full);
    }
    
    .ux4g-feedback-completion-btn-row .ux4g-btn-primary,
    .ux4g-feedback-completion-btn-row .ux4g-btn-outline-primary {
        max-width: 100%;
        width: 100%;
    }

    .ux4g-feedback-completion-section .ux4g-form-footer {
        padding-block: var(--ux4g-padding-xl) var(--ux4g-padding-l);
        width: 100%;
        text-align: center;
        background-color: var(--ux4g-bg-neutral);
    }
}



}


/* 5. Utilities */
@layer ux4g-utilities {


/* 1. TYPOGRAPHY & TEXT */
/* =====================================================
   1.0 GLOBAL RESET & BOX MODEL
===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}
/* Base Typography Engines */
[class*="ux4g-fs-"]{font-size:var(--ux4g-fs-current) !important;}
[class*="ux4g-lh-"]{line-height:var(--ux4g-lh-current) !important;}


/* Font Size (Display + Body Scale) */
.ux4g-fs-60{--ux4g-fs-current:var(--ux4g-fs-60);}
.ux4g-fs-52{--ux4g-fs-current:var(--ux4g-fs-52);}
.ux4g-fs-40{--ux4g-fs-current:var(--ux4g-fs-40);}
.ux4g-fs-36{--ux4g-fs-current:var(--ux4g-fs-36);}
.ux4g-fs-32{--ux4g-fs-current:var(--ux4g-fs-32);}
.ux4g-fs-28{--ux4g-fs-current:var(--ux4g-fs-28);}
.ux4g-fs-24{--ux4g-fs-current:var(--ux4g-fs-24);}
.ux4g-fs-20{--ux4g-fs-current:var(--ux4g-fs-20);}
.ux4g-fs-18{--ux4g-fs-current:var(--ux4g-fs-18);}
.ux4g-fs-16{--ux4g-fs-current:var(--ux4g-fs-16);}
.ux4g-fs-14{--ux4g-fs-current:var(--ux4g-fs-14);}
.ux4g-fs-12{--ux4g-fs-current:var(--ux4g-fs-12);}
.ux4g-fs-11{--ux4g-fs-current:var(--ux4g-fs-11);}

/* Line Height (FIXED naming consistency) */
.ux4g-lh-52{--ux4g-lh-current:var(--ux4g-lh-52);}
.ux4g-lh-44{--ux4g-lh-current:var(--ux4g-lh-44);}
.ux4g-lh-36{--ux4g-lh-current:var(--ux4g-lh-36);}
.ux4g-lh-32{--ux4g-lh-current:var(--ux4g-lh-32);}
.ux4g-lh-28{--ux4g-lh-current:var(--ux4g-lh-28);}
.ux4g-lh-24{--ux4g-lh-current:var(--ux4g-lh-24);}
.ux4g-lh-20{--ux4g-lh-current:var(--ux4g-lh-20);}
.ux4g-lh-18{--ux4g-lh-current:var(--ux4g-lh-18);}
.ux4g-lh-16{--ux4g-lh-current:var(--ux4g-lh-16);}
.ux4g-lh-14{--ux4g-lh-current:var(--ux4g-lh-14);}


.ux4g-leading-none  {--ux4g-lh-current:var(--ux4g-lh-16)}
.ux4g-leading-tight  {--ux4g-lh-current:var(--ux4g-lh-20)} 
.ux4g-leading-snug  {--ux4g-lh-current:var(--ux4g-lh-22)} 
.ux4g-leading-normal {--ux4g-lh-current:var(--ux4g-lh-24)}
.ux4g-leading-relaxed  {--ux4g-lh-current:var(--ux4g-lh-26)} 
.ux4g-leading-loose {--ux4g-lh-current:var(--ux4g-lh-32);}

/* Base Typography Engines */
[class*="ux4g-fw-"]{font-weight:var(--ux4g-fw-current) !important;}
[class*="ux4g-ff-"]{font-family:var(--ux4g-ff-current, var(--ux4g-ff)) !important;}
/* 1.0 Font Weight */
.ux4g-fw-regular{--ux4g-fw-current:var(--ux4g-fw-regular);}
.ux4g-fw-medium{--ux4g-fw-current:var(--ux4g-fw-medium);}
.ux4g-fw-semibold{--ux4g-fw-current:var(--ux4g-fw-semibold);}
.ux4g-fw-bold{--ux4g-fw-current:var(--ux4g-fw-bold) !important;}
.ux4g-fw-d-semibold{--ux4g-fw-current:var(--ux4g-fw-display-semibold);}
.ux4g-fw-d-bold{--ux4g-fw-current:var(--ux4g-fw-display-bold);}

/* 2.0 Font Family */
.ux4g-ff-base{--ux4g-ff-current:var(--ux4g-ff);}
.ux4g-ff-display{--ux4g-ff-current:var(--ux4g-ff-display);}
/* =====================================================
   BASE RULE
===================================================== */
.ux4g-text,
[class^="ux4g-display-"],
[class^="ux4g-heading-"],
[class^="ux4g-title-"],
[class^="ux4g-body-"],
[class^="ux4g-label-"],
[class^="ux4g-breadcrumb-"],
[class^="ux4g-tab-"] {
  font-size: var(--ux4g-fs-current);
  line-height: var(--ux4g-lh-current);
  font-weight: var(--ux4g-fw-current);
  font-family: var(--ux4g-ff-current, var(--ux4g-ff));
  font-style: normal;
}

:root {
  --ux4g-text-default-color: var(--ux4g-text-neutral-primary);
}

/* =====================================================
   DESKTOP (Default — ≥1024px)
===================================================== */

/* --- Display --- */
.ux4g-display-l-default,
.ux4g-display-l-strong {
  --ux4g-fs-current: var(--ux4g-fs-60);
  --ux4g-lh-current: var(--ux4g-lh-64);
  --ux4g-ff-current: var(--ux4g-ff-display);
  --ux4g-text-current: var(--ux4g-text-default-color);
}

.ux4g-display-l-default {
  --ux4g-fw-current: var(--ux4g-fw-display-semibold);
}

.ux4g-display-l-strong {
  --ux4g-fw-current: var(--ux4g-fw-display-bold);
}

.ux4g-display-m-default,
.ux4g-display-m-strong {
  --ux4g-fs-current: var(--ux4g-fs-52);
  --ux4g-lh-current: var(--ux4g-lh-56);
  --ux4g-ff-current: var(--ux4g-ff-display);
  --ux4g-text-current: var(--ux4g-text-default-color);
}

.ux4g-display-m-default {
  --ux4g-fw-current: var(--ux4g-fw-display-semibold);
}

.ux4g-display-m-strong {
  --ux4g-fw-current: var(--ux4g-fw-display-bold);
}

.ux4g-display-s-default,
.ux4g-display-s-strong {
  --ux4g-fs-current: var(--ux4g-fs-40);
  --ux4g-lh-current: var(--ux4g-lh-44);
  --ux4g-ff-current: var(--ux4g-ff-display);
}

.ux4g-display-s-default {
  --ux4g-fw-current: var(--ux4g-fw-display-semibold);
}

.ux4g-display-s-strong {
  --ux4g-fw-current: var(--ux4g-fw-display-bold);
}

.ux4g-display-xs-default,
.ux4g-display-xs-strong {
  --ux4g-fs-current: var(--ux4g-fs-36);
  --ux4g-lh-current: var(--ux4g-lh-40);
  --ux4g-ff-current: var(--ux4g-ff-display);
}

.ux4g-display-xs-default {
  --ux4g-fw-current: var(--ux4g-fw-display-semibold);
}

.ux4g-display-xs-strong {
  --ux4g-fw-current: var(--ux4g-fw-display-bold);
}

/* --- Heading --- */
.ux4g-heading-2xl-default,
.ux4g-heading-2xl-strong {
  --ux4g-fs-current: var(--ux4g-fs-40);
  --ux4g-lh-current: var(--ux4g-lh-48);
}

.ux4g-heading-2xl-default {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-heading-2xl-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

.ux4g-heading-xl-default,
.ux4g-heading-xl-strong {
  --ux4g-fs-current: var(--ux4g-fs-32);
  --ux4g-lh-current: var(--ux4g-lh-40);
}

.ux4g-heading-xl-default {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-heading-xl-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

.ux4g-heading-l-default,
.ux4g-heading-l-strong {
  --ux4g-fs-current: var(--ux4g-fs-28);
  --ux4g-lh-current: var(--ux4g-lh-36);
}

.ux4g-heading-l-default {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-heading-l-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

.ux4g-heading-m-default,
.ux4g-heading-m-strong {
  --ux4g-fs-current: var(--ux4g-fs-24);
  --ux4g-lh-current: var(--ux4g-lh-32);
}

.ux4g-heading-m-default {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-heading-m-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

.ux4g-heading-s-default,
.ux4g-heading-s-strong {
  --ux4g-fs-current: var(--ux4g-fs-20);
  --ux4g-lh-current: var(--ux4g-lh-26);
}

.ux4g-heading-s-default {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-heading-s-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

.ux4g-heading-xs-default,
.ux4g-heading-xs-strong {
  --ux4g-fs-current: var(--ux4g-fs-16);
  --ux4g-lh-current: var(--ux4g-lh-22);
}

.ux4g-heading-xs-default {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-heading-xs-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

.ux4g-heading-2xs-default,
.ux4g-heading-2xs-strong {
  --ux4g-fs-current: var(--ux4g-fs-14);
  --ux4g-lh-current: var(--ux4g-lh-20);
}

.ux4g-heading-2xs-default {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-heading-2xs-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

/* --- Title --- */
.ux4g-title-l-default,
.ux4g-title-l-strong {
  --ux4g-fs-current: var(--ux4g-fs-24);
  --ux4g-lh-current: var(--ux4g-lh-28);
}

.ux4g-title-l-default {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-title-l-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

.ux4g-title-m-default,
.ux4g-title-m-strong {
  --ux4g-fs-current: var(--ux4g-fs-20);
  --ux4g-lh-current: var(--ux4g-lh-24);
}

.ux4g-title-m-default {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-title-m-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

.ux4g-title-s-default,
.ux4g-title-s-strong {
  --ux4g-fs-current: var(--ux4g-fs-16);
  --ux4g-lh-current: var(--ux4g-lh-20);
}

.ux4g-title-s-default {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-title-s-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

/* --- Body --- */
.ux4g-body-l-default,
.ux4g-body-l-strong {
  --ux4g-fs-current: var(--ux4g-fs-18);
  --ux4g-lh-current: var(--ux4g-lh-26);
}

.ux4g-body-l-default {
  --ux4g-fw-current: var(--ux4g-fw-regular);
}

.ux4g-body-l-strong {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-body-m-default,
.ux4g-body-m-strong {
  --ux4g-fs-current: var(--ux4g-fs-16);
  --ux4g-lh-current: var(--ux4g-lh-24);
}

.ux4g-body-m-default {
  --ux4g-fw-current: var(--ux4g-fw-regular);
}

.ux4g-body-m-strong {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-body-s-default,
.ux4g-body-s-strong {
  --ux4g-fs-current: var(--ux4g-fs-14);
  --ux4g-lh-current: var(--ux4g-lh-22);
}

.ux4g-body-s-default {
  --ux4g-fw-current: var(--ux4g-fw-regular);
}

.ux4g-body-s-strong {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

.ux4g-body-xs-default,
.ux4g-body-xs-strong {
  --ux4g-fs-current: var(--ux4g-fs-12);
  --ux4g-lh-current: var(--ux4g-lh-18);
}

.ux4g-body-xs-default {
  --ux4g-fw-current: var(--ux4g-fw-regular);
}

.ux4g-body-xs-strong {
  --ux4g-fw-current: var(--ux4g-fw-semibold);
}

/* --- Label --- */
.ux4g-label-xl-default,
.ux4g-label-xl-strong {
  --ux4g-fs-current: var(--ux4g-fs-16);
  --ux4g-lh-current: var(--ux4g-lh-20);
}

.ux4g-label-xl-default {
  --ux4g-fw-current: var(--ux4g-fw-medium);
}

.ux4g-label-xl-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

.ux4g-label-l-default,
.ux4g-label-l-strong {
  --ux4g-fs-current: var(--ux4g-fs-14);
  --ux4g-lh-current: var(--ux4g-lh-18);
}

.ux4g-label-l-default {
  --ux4g-fw-current: var(--ux4g-fw-medium);
}

.ux4g-label-l-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

.ux4g-label-m-default,
.ux4g-label-m-strong {
  --ux4g-fs-current: var(--ux4g-fs-12);
  --ux4g-lh-current: var(--ux4g-lh-16);
}

.ux4g-label-m-default {
  --ux4g-fw-current: var(--ux4g-fw-medium);
}

.ux4g-label-m-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

.ux4g-label-s-default,
.ux4g-label-s-strong {
  --ux4g-fs-current: var(--ux4g-fs-11);
  --ux4g-lh-current: var(--ux4g-lh-14);
}

.ux4g-label-s-default {
  --ux4g-fw-current: var(--ux4g-fw-medium);
}

.ux4g-label-s-strong {
  --ux4g-fw-current: var(--ux4g-fw-bold);
}

/* =====================================================
   TABLET (768px – 1023px)
===================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Display */
  .ux4g-display-l-default,
  .ux4g-display-l-strong {
    --ux4g-fs-current: var(--ux4g-fs-52);
    --ux4g-lh-current: var(--ux4g-lh-56);
  }

  .ux4g-display-m-default,
  .ux4g-display-m-strong {
    --ux4g-fs-current: var(--ux4g-fs-40);
    --ux4g-lh-current: var(--ux4g-lh-44);
  }

  .ux4g-display-s-default,
  .ux4g-display-s-strong {
    --ux4g-fs-current: var(--ux4g-fs-36);
    --ux4g-lh-current: var(--ux4g-lh-40);
  }

  .ux4g-display-xs-default,
  .ux4g-display-xs-strong {
    --ux4g-fs-current: var(--ux4g-fs-32);
    --ux4g-lh-current: var(--ux4g-lh-36);
  }

  /* Heading */
  .ux4g-heading-2xl-default,
  .ux4g-heading-2xl-strong {
    --ux4g-fs-current: var(--ux4g-fs-32);
    --ux4g-lh-current: var(--ux4g-lh-40);
  }

  .ux4g-heading-xl-default,
  .ux4g-heading-xl-strong {
    --ux4g-fs-current: var(--ux4g-fs-28);
    --ux4g-lh-current: var(--ux4g-lh-36);
  }

  .ux4g-heading-l-default,
  .ux4g-heading-l-strong {
    --ux4g-fs-current: var(--ux4g-fs-24);
    --ux4g-lh-current: var(--ux4g-lh-32);
  }

  .ux4g-heading-m-default,
  .ux4g-heading-m-strong {
    --ux4g-fs-current: var(--ux4g-fs-20);
    --ux4g-lh-current: var(--ux4g-lh-26);
  }

  .ux4g-heading-s-default,
  .ux4g-heading-s-strong {
    --ux4g-fs-current: var(--ux4g-fs-18);
    --ux4g-lh-current: var(--ux4g-lh-24);
  }

  .ux4g-heading-xs-default,
  .ux4g-heading-xs-strong {
    --ux4g-fs-current: var(--ux4g-fs-16);
    --ux4g-lh-current: var(--ux4g-lh-22);
  }

  .ux4g-heading-2xs-default,
  .ux4g-heading-2xs-strong {
    --ux4g-fs-current: var(--ux4g-fs-14);
    --ux4g-lh-current: var(--ux4g-lh-20);
  }

  /* Title — only title-l line-height differs */
  .ux4g-title-l-default,
  .ux4g-title-l-strong {
    --ux4g-fs-current: var(--ux4g-fs-24);
    --ux4g-lh-current: var(--ux4g-lh-28);
  }

  .ux4g-title-m-default,
  .ux4g-title-m-strong {
    --ux4g-fs-current: var(--ux4g-fs-20);
    --ux4g-lh-current: var(--ux4g-lh-24);
  }

  .ux4g-title-s-default,
  .ux4g-title-s-strong {
    --ux4g-fs-current: var(--ux4g-fs-16);
    --ux4g-lh-current: var(--ux4g-lh-20);
  }

  /* Body — line-height adjustments for readability */
  .ux4g-body-l-default,
  .ux4g-body-l-strong {
    --ux4g-fs-current: var(--ux4g-fs-18);
    --ux4g-lh-current: var(--ux4g-lh-26);
  }

  .ux4g-body-m-default,
  .ux4g-body-m-strong {
    --ux4g-fs-current: var(--ux4g-fs-16);
    --ux4g-lh-current: var(--ux4g-lh-24);
  }

  .ux4g-body-s-default,
  .ux4g-body-s-strong {
    --ux4g-fs-current: var(--ux4g-fs-14);
    --ux4g-lh-current: var(--ux4g-lh-22);
  }

  .ux4g-body-xs-default,
  .ux4g-body-xs-strong {
    --ux4g-fs-current: var(--ux4g-fs-12);
    --ux4g-lh-current: var(--ux4g-lh-18);
  }

  /* Label — unchanged from desktop (no overrides needed) */
}

/* =====================================================
   MOBILE (320px – 767px)
===================================================== */
@media (min-width: 320px) and (max-width: 767px) {

  /* Display */
  .ux4g-display-l-default,
  .ux4g-display-l-strong {
    --ux4g-fs-current: var(--ux4g-fs-36);
    --ux4g-lh-current: var(--ux4g-lh-40);
  }

  .ux4g-display-m-default,
  .ux4g-display-m-strong {
    --ux4g-fs-current: var(--ux4g-fs-32);
    --ux4g-lh-current: var(--ux4g-lh-36);
  }

  .ux4g-display-s-default,
  .ux4g-display-s-strong {
    --ux4g-fs-current: var(--ux4g-fs-28);
    --ux4g-lh-current: var(--ux4g-lh-32);
  }

  .ux4g-display-xs-default,
  .ux4g-display-xs-strong {
    --ux4g-fs-current: var(--ux4g-fs-24);
    --ux4g-lh-current: var(--ux4g-lh-26);
  }

  /* Heading */
  .ux4g-heading-2xl-default,
  .ux4g-heading-2xl-strong {
    --ux4g-fs-current: var(--ux4g-fs-24);
    --ux4g-lh-current: var(--ux4g-lh-32);
  }

  .ux4g-heading-xl-default,
  .ux4g-heading-xl-strong {
    --ux4g-fs-current: var(--ux4g-fs-20);
    --ux4g-lh-current: var(--ux4g-lh-26);
  }

  .ux4g-heading-l-default,
  .ux4g-heading-l-strong {
    --ux4g-fs-current: var(--ux4g-fs-18);
    --ux4g-lh-current: var(--ux4g-lh-24);
  }

  .ux4g-heading-m-default,
  .ux4g-heading-m-strong {
    --ux4g-fs-current: var(--ux4g-fs-16);
    --ux4g-lh-current: var(--ux4g-lh-22);
  }

  .ux4g-heading-s-default,
  .ux4g-heading-s-strong {
    --ux4g-fs-current: var(--ux4g-fs-16);
    --ux4g-lh-current: var(--ux4g-lh-22);
  }

  .ux4g-heading-xs-default,
  .ux4g-heading-xs-strong {
    --ux4g-fs-current: var(--ux4g-fs-16);
    --ux4g-lh-current: var(--ux4g-lh-22);
  }

  .ux4g-heading-2xs-default,
  .ux4g-heading-2xs-strong {
    --ux4g-fs-current: var(--ux4g-fs-14);
    --ux4g-lh-current: var(--ux4g-lh-20);
  }

  /* Title */
  .ux4g-title-l-default,
  .ux4g-title-l-strong {
    --ux4g-fs-current: var(--ux4g-fs-20);
    --ux4g-lh-current: var(--ux4g-lh-24);
  }

  .ux4g-title-m-default,
  .ux4g-title-m-strong {
    --ux4g-fs-current: var(--ux4g-fs-18);
    --ux4g-lh-current: var(--ux4g-lh-22);
  }

  .ux4g-title-s-default,
  .ux4g-title-s-strong {
    --ux4g-fs-current: var(--ux4g-fs-16);
    --ux4g-lh-current: var(--ux4g-lh-20);
  }

  /* Body — line-height adjustments for readability */
  .ux4g-body-l-default,
  .ux4g-body-l-strong {
    --ux4g-fs-current: var(--ux4g-fs-18);
    --ux4g-lh-current: var(--ux4g-lh-26);
  }

  .ux4g-body-m-default,
  .ux4g-body-m-strong {
    --ux4g-fs-current: var(--ux4g-fs-16);
    --ux4g-lh-current: var(--ux4g-lh-24);
  }

  .ux4g-body-s-default,
  .ux4g-body-s-strong {
    --ux4g-fs-current: var(--ux4g-fs-14);
    --ux4g-lh-current: var(--ux4g-lh-22);
  }

  .ux4g-body-xs-default,
  .ux4g-body-xs-strong {
    --ux4g-fs-current: var(--ux4g-fs-12);
    --ux4g-lh-current: var(--ux4g-lh-18);
  }

  /* Label — unchanged from desktop (no overrides needed) */
}
/* BASE */
.ux4g-text-neutral-primary,
.ux4g-text-neutral-secondary,
.ux4g-text-neutral-tertiary,
.ux4g-text-neutral-inverse,
.ux4g-text-neutral-emphasis,
.ux4g-text-primary,
.ux4g-text-secondary,
.ux4g-text-tertiary,
.ux4g-text-success,
.ux4g-text-error,
.ux4g-text-warning,
.ux4g-text-info,
.ux4g-text-link-neutral,
.ux4g-text-link-neutral-inverse,
.ux4g-text-link,
.ux4g-text-link-inverse,
.ux4g-text-link-disabled,
.ux4g-text-link-visited,
.ux4g-text-white,
.ux4g-text-black,
.ux4g-text-error-default {
  color: var(
    --ux4g-text-current,
    var(--ux4g-text-neutral-primary)
  ) !important;
}


.ux4g-icon,
[class^="ux4g-icon-"],
[class*=" ux4g-icon-"] {
  color: var(--ux4g-icon-color, var(--ux4g-text-current, inherit));
  fill: currentColor;
}

/* ================= NEUTRAL ================= */
.ux4g-text-neutral-primary   { --ux4g-text-current: var(--ux4g-text-neutral-primary); }
.ux4g-text-neutral-secondary { --ux4g-text-current: var(--ux4g-text-neutral-secondary); }
.ux4g-text-neutral-tertiary  { --ux4g-text-current: var(--ux4g-text-neutral-tertiary); }
.ux4g-text-neutral-inverse   { --ux4g-text-current: var(--ux4g-text-neutral-inverse); }
.ux4g-text-neutral-emphasis   { --ux4g-text-current: var(--ux4g-text-neutral-emphasis); }


/* ================= BRAND ================= */
.ux4g-text-primary   { --ux4g-text-current: var(--ux4g-text-brand-primary-default); }
.ux4g-text-secondary { --ux4g-text-current: var(--ux4g-text-brand-secondary-default); }
.ux4g-text-tertiary  { --ux4g-text-current: var(--ux4g-text-brand-tertiary-default); }

/* ================= STATUS ================= */
.ux4g-text-success { --ux4g-text-current: var(--ux4g-text-status-success); }
.ux4g-text-error   { --ux4g-text-current: var(--ux4g-text-status-error); }
.ux4g-text-warning { --ux4g-text-current: var(--ux4g-text-status-warning); }
.ux4g-text-info    { --ux4g-text-current: var(--ux4g-text-status-info); }

/* ================= ICON STATUS ================= */
.ux4g-icon-success { --ux4g-text-current: var(--ux4g-icon-status-success); }
.ux4g-icon-error   { --ux4g-text-current: var(--ux4g-icon-status-error); }
.ux4g-icon-warning { --ux4g-text-current: var(--ux4g-icon-status-warning); }
.ux4g-icon-info    { --ux4g-text-current: var(--ux4g-icon-status-info); }
.ux4g-icon-neutral { --ux4g-text-current: var(--ux4g-text-neutral-secondary); }

/* ================= LINKS - NEUTRAL ================= */
.ux4g-text-link-neutral { --ux4g-text-current: var(--ux4g-text-link-neutral-default); }
.ux4g-text-link-neutral:hover { --ux4g-text-current: var(--ux4g-text-link-neutral-hover); }
.ux4g-text-link-neutral:active { --ux4g-text-current: var(--ux4g-text-link-neutral-active); }
.ux4g-text-link-neutral:visited { --ux4g-text-current: var(--ux4g-text-link-neutral-visited); }
.ux4g-text-link-neutral-inverse { --ux4g-text-current: var(--ux4g-text-link-neutral-inverse); }

/* ================= LINKS - BRAND ================= */
.ux4g-text-link { --ux4g-text-current: var(--ux4g-text-link-default-default); }
.ux4g-text-link:hover { --ux4g-text-current: var(--ux4g-text-link-default-hover); }
.ux4g-text-link:active { --ux4g-text-current: var(--ux4g-text-link-default-active); }
.ux4g-text-link:visited { --ux4g-text-current: var(--ux4g-text-link-default-visited); }
.ux4g-text-link-inverse { --ux4g-text-current: var(--ux4g-text-link-default-inverse); }

/* ================= STATIC COLORS ================= */
.ux4g-text-white { --ux4g-text-current: var(--ux4g-text-white); }
.ux4g-text-black { --ux4g-text-current: var(--ux4g-text-black); }
.ux4g-text-error-default   { --ux4g-text-current: var(--ux4g-text-error-default); }

/* ================= LINK DISABLED ================= */
.ux4g-text-link:is(:disabled, [aria-disabled="true"]), .ux4g-text-link-neutral:is(:disabled, [aria-disabled="true"]) { --ux4g-text-current: var(--ux4g-text-link-disabled); color: var(--ux4g-text-current); cursor: not-allowed; text-decoration: none; pointer-events: none; }
.ux4g-text-link-disabled { --ux4g-text-current: var(--ux4g-text-link-disabled); color: var(--ux4g-text-current); cursor: not-allowed; text-decoration: none; pointer-events: none; }
.ux4g-text-link-visited { --ux4g-text-current: var(--ux4g-text-link-default-visited); color: var(--ux4g-text-current); }

/* =========================================
   TEXT UTILITIES
   Controls appearance and behavior of text.
   1. Font Weight
   2. Font Family
   3. Alignment
   4. Wrapping & Break
   5. Transform
========================================= */



/* 3.0 Text Alignment (RTL Safe) */
.ux4g-text-start{text-align:start;}
.ux4g-text-center{text-align:center;}
.ux4g-text-end{text-align:end;}

/* 4.0 Text Wrapping */
.ux4g-text-wrap{white-space:normal;}
.ux4g-text-nowrap{white-space:nowrap !important;}

/* 4.1 Word Break */
.ux4g-text-break{overflow-wrap:break-word;word-break:break-word;}

/* 5.0 Text Transform */
.ux4g-text-lowercase{text-transform:var(--ux4g-tt-lowercase);}
.ux4g-text-uppercase{text-transform:var(--ux4g-tt-uppercase);}
.ux4g-text-capitalize{text-transform:var(--ux4g-tt-capitalize);}
.ux4g-text-none {text-transform: var(--ux4g-text-transform-none);}


/* 6.0 Text Decoration */
.ux4g-text-underline { text-decoration: underline !important; }
.ux4g-text-line-through { text-decoration: line-through !important; }
.ux4g-text-no-underline { text-decoration: none !important; }

/* 7.0 List Styles */
.ux4g-list-none { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.ux4g-list-disc { list-style: disc !important; padding-inline-start: 1.5rem !important; }
.ux4g-list-decimal { list-style: decimal !important; padding-inline-start: 1.5rem !important; }

/* 8.0 Text Overflow & Truncate */
.ux4g-text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* Vertical Align Utilities */
.ux4g-va-baseline { vertical-align: var(--ux4g-va-baseline); }
.ux4g-va-top { vertical-align: var(--ux4g-va-top); }
.ux4g-va-middle { vertical-align: var(--ux4g-va-middle); }
.ux4g-va-bottom { vertical-align: var(--ux4g-va-bottom); }
.ux4g-va-text-top { vertical-align: var(--ux4g-va-text-top); }
.ux4g-va-text-bottom { vertical-align: var(--ux4g-va-text-bottom); }


/* 2. LAYOUT & SPACING */
/* =========================================
   UX4G MARGIN UTILITIES
   Order:
   1. Base Margin
   2. Margin Auto
   3. Margin Axis
   4. Directional Margin
   5. Auto Margins (Flexbox Alignment)
   6. Child Spacing (Space X / Space Y)
   Approach: Desktop-first
   Breakpoints:
     Desktop (base): 1024px – 1439px (no query)
     Desktop LG (lg): ≥ 1440px
     Tablet (md): ≤ 1023px
     Mobile (sm): ≤ 767px
   ========================================= */

/* 1.1 Margin Base */
.ux4g-m-none { margin: var(--ux4g-margin-none); } /* 0 */
.ux4g-m-3xs  { margin: var(--ux4g-margin-3xs); } /* 2px */
.ux4g-m-2xs  { margin: var(--ux4g-margin-2xs); } /* 4px */
.ux4g-m-xs   { margin: var(--ux4g-margin-xs); } /* 8px */
.ux4g-m-s    { margin: var(--ux4g-margin-s); } /* 12px */
.ux4g-m-m    { margin: var(--ux4g-margin-m); } /* 16px */
.ux4g-m-l    { margin: var(--ux4g-margin-l); } /* 20px */
.ux4g-m-xl   { margin: var(--ux4g-margin-xl); } /* 24px */
.ux4g-m-2xl  { margin: var(--ux4g-margin-2xl); } /* 32px */

/* 1.2 Margin Auto (Optimized Complete Set) */
.ux4g-m-auto  { margin: auto; }
.ux4g-mx-auto { margin-inline: auto; }
.ux4g-my-auto { margin-block: auto; }

/* 1.3 Margin Axis (Logical + RTL Safe) */
.ux4g-mx-none { margin-inline: var(--ux4g-margin-none); } /* 0 */
.ux4g-mx-3xs { margin-inline: var(--ux4g-margin-3xs); } /* 2px */
.ux4g-mx-2xs { margin-inline: var(--ux4g-margin-2xs); } /* 4px */
.ux4g-mx-xs  { margin-inline: var(--ux4g-margin-xs); } /* 8px */
.ux4g-mx-s   { margin-inline: var(--ux4g-margin-s); } /* 12px */
.ux4g-mx-m   { margin-inline: var(--ux4g-margin-m); } /* 16px */
.ux4g-mx-l   { margin-inline: var(--ux4g-margin-l); } /* 20px */
.ux4g-mx-xl  { margin-inline: var(--ux4g-margin-xl); } /* 24px */
.ux4g-mx-2xl { margin-inline: var(--ux4g-margin-2xl); } /* 32px */

.ux4g-my-none { margin-block: var(--ux4g-margin-none); } /* 0 */
.ux4g-my-3xs { margin-block: var(--ux4g-margin-3xs); } /* 2px */
.ux4g-my-2xs { margin-block: var(--ux4g-margin-2xs); } /* 4px */
.ux4g-my-xs  { margin-block: var(--ux4g-margin-xs); } /* 8px */
.ux4g-my-s   { margin-block: var(--ux4g-margin-s); } /* 12px */
.ux4g-my-m   { margin-block: var(--ux4g-margin-m); } /* 16px */
.ux4g-my-l   { margin-block: var(--ux4g-margin-l); } /* 20px */
.ux4g-my-xl  { margin-block: var(--ux4g-margin-xl); } /* 24px */
.ux4g-my-2xl { margin-block: var(--ux4g-margin-2xl); } /* 32px */

/* 1.4 Directional Margin (RTL Safe) */
/* Block Start (Top) */
.ux4g-mt-none { margin-block-start: var(--ux4g-margin-none); } /* 0 */
.ux4g-mt-3xs { margin-block-start: var(--ux4g-margin-3xs); } /* 2px */
.ux4g-mt-2xs { margin-block-start: var(--ux4g-margin-2xs); } /* 4px */
.ux4g-mt-xs  { margin-block-start: var(--ux4g-margin-xs); } /* 8px */
.ux4g-mt-s   { margin-block-start: var(--ux4g-margin-s); } /* 12px */
.ux4g-mt-m   { margin-block-start: var(--ux4g-margin-m); } /* 16px */
.ux4g-mt-l   { margin-block-start: var(--ux4g-margin-l); } /* 20px */
.ux4g-mt-xl  { margin-block-start: var(--ux4g-margin-xl); } /* 24px */
.ux4g-mt-2xl { margin-block-start: var(--ux4g-margin-2xl); } /* 32px */

/* Block End (Bottom) */
.ux4g-mb-none { margin-block-end: var(--ux4g-margin-none); } /* 0 */
.ux4g-mb-3xs { margin-block-end: var(--ux4g-margin-3xs); } /* 2px */
.ux4g-mb-2xs { margin-block-end: var(--ux4g-margin-2xs); } /* 4px */
.ux4g-mb-xs  { margin-block-end: var(--ux4g-margin-xs); } /* 8px */
.ux4g-mb-s   { margin-block-end: var(--ux4g-margin-s); } /* 12px */
.ux4g-mb-m   { margin-block-end: var(--ux4g-margin-m); } /* 16px */
.ux4g-mb-l   { margin-block-end: var(--ux4g-margin-l); } /* 20px */
.ux4g-mb-xl  { margin-block-end: var(--ux4g-margin-xl); } /* 24px */
.ux4g-mb-2xl { margin-block-end: var(--ux4g-margin-2xl); } /* 32px */

/* Inline Start (LTR: Left | RTL: Right) */
.ux4g-ml-none { margin-inline-start: var(--ux4g-margin-none); } /* 0 */
.ux4g-ml-3xs { margin-inline-start: var(--ux4g-margin-3xs); } /* 2px */
.ux4g-ml-2xs { margin-inline-start: var(--ux4g-margin-2xs); } /* 4px */
.ux4g-ml-xs  { margin-inline-start: var(--ux4g-margin-xs); } /* 8px */
.ux4g-ml-s   { margin-inline-start: var(--ux4g-margin-s); } /* 12px */
.ux4g-ml-m   { margin-inline-start: var(--ux4g-margin-m); } /* 16px */
.ux4g-ml-l   { margin-inline-start: var(--ux4g-margin-l); } /* 20px */
.ux4g-ml-xl  { margin-inline-start: var(--ux4g-margin-xl); } /* 24px */
.ux4g-ml-2xl { margin-inline-start: var(--ux4g-margin-2xl); } /* 32px */

/* Inline End (LTR: Right | RTL: Left) */
.ux4g-mr-none { margin-inline-end: var(--ux4g-margin-none); } /* 0 */
.ux4g-mr-3xs { margin-inline-end: var(--ux4g-margin-3xs); } /* 2px */
.ux4g-mr-2xs { margin-inline-end: var(--ux4g-margin-2xs); } /* 4px */
.ux4g-mr-xs  { margin-inline-end: var(--ux4g-margin-xs); } /* 8px */
.ux4g-mr-s   { margin-inline-end: var(--ux4g-margin-s); } /* 12px */
.ux4g-mr-m   { margin-inline-end: var(--ux4g-margin-m); } /* 16px */
.ux4g-mr-l   { margin-inline-end: var(--ux4g-margin-l); } /* 20px */
.ux4g-mr-xl  { margin-inline-end: var(--ux4g-margin-xl); } /* 24px */
.ux4g-mr-2xl { margin-inline-end: var(--ux4g-margin-2xl); } /* 32px */

/* Directional Auto Margins (Flexbox Alignment) */
.ux4g-ml-auto { margin-inline-start: auto; }
.ux4g-mr-auto { margin-inline-end: auto; }
.ux4g-mt-auto { margin-block-start: auto; }
.ux4g-mb-auto { margin-block-end: auto; }

/* 1.5 Child Spacing (Space X / Space Y) */
/* Space X (Horizontal) */
.ux4g-space-x-1  > * + * { margin-inline-start: var(--ux4g-space-2, 4px); }
.ux4g-space-x-2  > * + * { margin-inline-start: var(--ux4g-space-4, 8px); }
.ux4g-space-x-3  > * + * { margin-inline-start: var(--ux4g-space-5, 12px); }
.ux4g-space-x-4  > * + * { margin-inline-start: var(--ux4g-space-6, 16px); }
.ux4g-space-x-5  > * + * { margin-inline-start: var(--ux4g-space-7, 20px); }
.ux4g-space-x-6  > * + * { margin-inline-start: var(--ux4g-space-8, 24px); }
.ux4g-space-x-8  > * + * { margin-inline-start: var(--ux4g-space-9, 32px); }
.ux4g-space-x-10 > * + * { margin-inline-start: var(--ux4g-space-10, 40px); }

/* Space Y (Vertical) */
.ux4g-space-y-1  > * + * { margin-block-start: var(--ux4g-space-2, 4px); }
.ux4g-space-y-2  > * + * { margin-block-start: var(--ux4g-space-4, 8px); }
.ux4g-space-y-3  > * + * { margin-block-start: var(--ux4g-space-5, 12px); }
.ux4g-space-y-4  > * + * { margin-block-start: var(--ux4g-space-6, 16px); }
.ux4g-space-y-5  > * + * { margin-block-start: var(--ux4g-space-7, 20px); }
.ux4g-space-y-6  > * + * { margin-block-start: var(--ux4g-space-8, 24px); }
.ux4g-space-y-8  > * + * { margin-block-start: var(--ux4g-space-9, 32px); }
.ux4g-space-y-10 > * + * { margin-block-start: var(--ux4g-space-10, 40px); }

/* ================= RESPONSIVE ================= */

/* LG 1440px – 1920px (Desktop LG) */
@media (min-width: 1440px) {
  /* Margin Base */
  .ux4g-lg-m-none { margin: var(--ux4g-margin-none); } /* 0 */
  .ux4g-lg-m-3xs  { margin: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-lg-m-2xs  { margin: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-lg-m-xs   { margin: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-lg-m-s    { margin: var(--ux4g-margin-s); } /* 12px */
  .ux4g-lg-m-m    { margin: var(--ux4g-margin-m); } /* 16px */
  .ux4g-lg-m-l    { margin: var(--ux4g-margin-l); } /* 20px */
  .ux4g-lg-m-xl   { margin: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-lg-m-2xl  { margin: var(--ux4g-margin-2xl); } /* 32px */

  /* Margin Auto */
  .ux4g-lg-m-auto  { margin: auto; }
  .ux4g-lg-mx-auto { margin-inline: auto; }
  .ux4g-lg-my-auto { margin-block: auto; }

  /* Margin Axis */
  .ux4g-lg-mx-none { margin-inline: var(--ux4g-margin-none); } /* 0 */
  .ux4g-lg-mx-3xs { margin-inline: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-lg-mx-2xs { margin-inline: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-lg-mx-xs  { margin-inline: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-lg-mx-s   { margin-inline: var(--ux4g-margin-s); } /* 12px */
  .ux4g-lg-mx-m   { margin-inline: var(--ux4g-margin-m); } /* 16px */
  .ux4g-lg-mx-l   { margin-inline: var(--ux4g-margin-l); } /* 20px */
  .ux4g-lg-mx-xl  { margin-inline: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-lg-mx-2xl { margin-inline: var(--ux4g-margin-2xl); } /* 32px */

  .ux4g-lg-my-none { margin-block: var(--ux4g-margin-none); } /* 0 */
  .ux4g-lg-my-3xs { margin-block: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-lg-my-2xs { margin-block: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-lg-my-xs  { margin-block: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-lg-my-s   { margin-block: var(--ux4g-margin-s); } /* 12px */
  .ux4g-lg-my-m   { margin-block: var(--ux4g-margin-m); } /* 16px */
  .ux4g-lg-my-l   { margin-block: var(--ux4g-margin-l); } /* 20px */
  .ux4g-lg-my-xl  { margin-block: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-lg-my-2xl { margin-block: var(--ux4g-margin-2xl); } /* 32px */

  /* Directional Margin */
  .ux4g-lg-mt-none { margin-block-start: var(--ux4g-margin-none); } /* 0 */
  .ux4g-lg-mt-3xs { margin-block-start: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-lg-mt-2xs { margin-block-start: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-lg-mt-xs  { margin-block-start: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-lg-mt-s   { margin-block-start: var(--ux4g-margin-s); } /* 12px */
  .ux4g-lg-mt-m   { margin-block-start: var(--ux4g-margin-m); } /* 16px */
  .ux4g-lg-mt-l   { margin-block-start: var(--ux4g-margin-l); } /* 20px */
  .ux4g-lg-mt-xl  { margin-block-start: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-lg-mt-2xl { margin-block-start: var(--ux4g-margin-2xl); } /* 32px */

  .ux4g-lg-mb-none { margin-block-end: var(--ux4g-margin-none); } /* 0 */
  .ux4g-lg-mb-3xs { margin-block-end: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-lg-mb-2xs { margin-block-end: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-lg-mb-xs  { margin-block-end: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-lg-mb-s   { margin-block-end: var(--ux4g-margin-s); } /* 12px */
  .ux4g-lg-mb-m   { margin-block-end: var(--ux4g-margin-m); } /* 16px */
  .ux4g-lg-mb-l   { margin-block-end: var(--ux4g-margin-l); } /* 20px */
  .ux4g-lg-mb-xl  { margin-block-end: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-lg-mb-2xl { margin-block-end: var(--ux4g-margin-2xl); } /* 32px */

  .ux4g-lg-ml-none { margin-inline-start: var(--ux4g-margin-none); } /* 0 */
  .ux4g-lg-ml-3xs { margin-inline-start: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-lg-ml-2xs { margin-inline-start: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-lg-ml-xs  { margin-inline-start: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-lg-ml-s   { margin-inline-start: var(--ux4g-margin-s); } /* 12px */
  .ux4g-lg-ml-m   { margin-inline-start: var(--ux4g-margin-m); } /* 16px */
  .ux4g-lg-ml-l   { margin-inline-start: var(--ux4g-margin-l); } /* 20px */
  .ux4g-lg-ml-xl  { margin-inline-start: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-lg-ml-2xl { margin-inline-start: var(--ux4g-margin-2xl); } /* 32px */

  .ux4g-lg-mr-none { margin-inline-end: var(--ux4g-margin-none); } /* 0 */
  .ux4g-lg-mr-3xs { margin-inline-end: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-lg-mr-2xs { margin-inline-end: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-lg-mr-xs  { margin-inline-end: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-lg-mr-s   { margin-inline-end: var(--ux4g-margin-s); } /* 12px */
  .ux4g-lg-mr-m   { margin-inline-end: var(--ux4g-margin-m); } /* 16px */
  .ux4g-lg-mr-l   { margin-inline-end: var(--ux4g-margin-l); } /* 20px */
  .ux4g-lg-mr-xl  { margin-inline-end: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-lg-mr-2xl { margin-inline-end: var(--ux4g-margin-2xl); } /* 32px */

  /* Directional Auto Margins */
  .ux4g-lg-ml-auto { margin-inline-start: auto; }
  .ux4g-lg-mr-auto { margin-inline-end: auto; }
  .ux4g-lg-mt-auto { margin-block-start: auto; }
  .ux4g-lg-mb-auto { margin-block-end: auto; }

  /* Child Spacing (Space X / Space Y) */
  .ux4g-lg-space-x-1  > * + * { margin-inline-start: var(--ux4g-space-2, 4px); }
  .ux4g-lg-space-x-2  > * + * { margin-inline-start: var(--ux4g-space-4, 8px); }
  .ux4g-lg-space-x-3  > * + * { margin-inline-start: var(--ux4g-space-5, 12px); }
  .ux4g-lg-space-x-4  > * + * { margin-inline-start: var(--ux4g-space-6, 16px); }
  .ux4g-lg-space-x-5  > * + * { margin-inline-start: var(--ux4g-space-7, 20px); }
  .ux4g-lg-space-x-6  > * + * { margin-inline-start: var(--ux4g-space-8, 24px); }
  .ux4g-lg-space-x-8  > * + * { margin-inline-start: var(--ux4g-space-9, 32px); }
  .ux4g-lg-space-x-10 > * + * { margin-inline-start: var(--ux4g-space-10, 40px); }

  .ux4g-lg-space-y-1  > * + * { margin-block-start: var(--ux4g-space-2, 4px); }
  .ux4g-lg-space-y-2  > * + * { margin-block-start: var(--ux4g-space-4, 8px); }
  .ux4g-lg-space-y-3  > * + * { margin-block-start: var(--ux4g-space-5, 12px); }
  .ux4g-lg-space-y-4  > * + * { margin-block-start: var(--ux4g-space-6, 16px); }
  .ux4g-lg-space-y-5  > * + * { margin-block-start: var(--ux4g-space-7, 20px); }
  .ux4g-lg-space-y-6  > * + * { margin-block-start: var(--ux4g-space-8, 24px); }
  .ux4g-lg-space-y-8  > * + * { margin-block-start: var(--ux4g-space-9, 32px); }
  .ux4g-lg-space-y-10 > * + * { margin-block-start: var(--ux4g-space-10, 40px); }

}

/* MD 768px – 1023px (Tablet) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Margin Base */
  .ux4g-md-m-none { margin: var(--ux4g-margin-none); } /* 0 */
  .ux4g-md-m-3xs  { margin: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-md-m-2xs  { margin: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-md-m-xs   { margin: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-md-m-s    { margin: var(--ux4g-margin-s); } /* 12px */
  .ux4g-md-m-m    { margin: var(--ux4g-margin-m); } /* 16px */
  .ux4g-md-m-l    { margin: var(--ux4g-margin-l); } /* 20px */
  .ux4g-md-m-xl   { margin: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-md-m-2xl  { margin: var(--ux4g-margin-2xl); } /* 32px */

  /* Margin Auto */
  .ux4g-md-m-auto  { margin: auto; }
  .ux4g-md-mx-auto { margin-inline: auto; }
  .ux4g-md-my-auto { margin-block: auto; }

  /* Margin Axis */
  .ux4g-md-mx-none { margin-inline: var(--ux4g-margin-none); } /* 0 */
  .ux4g-md-mx-3xs { margin-inline: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-md-mx-2xs { margin-inline: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-md-mx-xs  { margin-inline: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-md-mx-s   { margin-inline: var(--ux4g-margin-s); } /* 12px */
  .ux4g-md-mx-m   { margin-inline: var(--ux4g-margin-m); } /* 16px */
  .ux4g-md-mx-l   { margin-inline: var(--ux4g-margin-l); } /* 20px */
  .ux4g-md-mx-xl  { margin-inline: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-md-mx-2xl { margin-inline: var(--ux4g-margin-2xl); } /* 32px */

  .ux4g-md-my-none { margin-block: var(--ux4g-margin-none); } /* 0 */
  .ux4g-md-my-3xs { margin-block: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-md-my-2xs { margin-block: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-md-my-xs  { margin-block: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-md-my-s   { margin-block: var(--ux4g-margin-s); } /* 12px */
  .ux4g-md-my-m   { margin-block: var(--ux4g-margin-m); } /* 16px */
  .ux4g-md-my-l   { margin-block: var(--ux4g-margin-l); } /* 20px */
  .ux4g-md-my-xl  { margin-block: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-md-my-2xl { margin-block: var(--ux4g-margin-2xl); } /* 32px */

  /* Directional Margin */
  .ux4g-md-mt-none { margin-block-start: var(--ux4g-margin-none); } /* 0 */
  .ux4g-md-mt-3xs { margin-block-start: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-md-mt-2xs { margin-block-start: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-md-mt-xs  { margin-block-start: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-md-mt-s   { margin-block-start: var(--ux4g-margin-s); } /* 12px */
  .ux4g-md-mt-m   { margin-block-start: var(--ux4g-margin-m); } /* 16px */
  .ux4g-md-mt-l   { margin-block-start: var(--ux4g-margin-l); } /* 20px */
  .ux4g-md-mt-xl  { margin-block-start: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-md-mt-2xl { margin-block-start: var(--ux4g-margin-2xl); } /* 32px */

  .ux4g-md-mb-none { margin-block-end: var(--ux4g-margin-none); } /* 0 */
  .ux4g-md-mb-3xs { margin-block-end: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-md-mb-2xs { margin-block-end: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-md-mb-xs  { margin-block-end: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-md-mb-s   { margin-block-end: var(--ux4g-margin-s); } /* 12px */
  .ux4g-md-mb-m   { margin-block-end: var(--ux4g-margin-m); } /* 16px */
  .ux4g-md-mb-l   { margin-block-end: var(--ux4g-margin-l); } /* 20px */
  .ux4g-md-mb-xl  { margin-block-end: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-md-mb-2xl { margin-block-end: var(--ux4g-margin-2xl); } /* 32px */

  .ux4g-md-ml-none { margin-inline-start: var(--ux4g-margin-none); } /* 0 */
  .ux4g-md-ml-3xs { margin-inline-start: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-md-ml-2xs { margin-inline-start: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-md-ml-xs  { margin-inline-start: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-md-ml-s   { margin-inline-start: var(--ux4g-margin-s); } /* 12px */
  .ux4g-md-ml-m   { margin-inline-start: var(--ux4g-margin-m); } /* 16px */
  .ux4g-md-ml-l   { margin-inline-start: var(--ux4g-margin-l); } /* 20px */
  .ux4g-md-ml-xl  { margin-inline-start: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-md-ml-2xl { margin-inline-start: var(--ux4g-margin-2xl); } /* 32px */

  .ux4g-md-mr-none { margin-inline-end: var(--ux4g-margin-none); } /* 0 */
  .ux4g-md-mr-3xs { margin-inline-end: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-md-mr-2xs { margin-inline-end: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-md-mr-xs  { margin-inline-end: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-md-mr-s   { margin-inline-end: var(--ux4g-margin-s); } /* 12px */
  .ux4g-md-mr-m   { margin-inline-end: var(--ux4g-margin-m); } /* 16px */
  .ux4g-md-mr-l   { margin-inline-end: var(--ux4g-margin-l); } /* 20px */
  .ux4g-md-mr-xl  { margin-inline-end: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-md-mr-2xl { margin-inline-end: var(--ux4g-margin-2xl); } /* 32px */

  /* Directional Auto Margins */
  .ux4g-md-ml-auto { margin-inline-start: auto; }
  .ux4g-md-mr-auto { margin-inline-end: auto; }
  .ux4g-md-mt-auto { margin-block-start: auto; }
  .ux4g-md-mb-auto { margin-block-end: auto; }

  /* Child Spacing (Space X / Space Y) */
  .ux4g-md-space-x-1  > * + * { margin-inline-start: var(--ux4g-space-2, 4px); }
  .ux4g-md-space-x-2  > * + * { margin-inline-start: var(--ux4g-space-4, 8px); }
  .ux4g-md-space-x-3  > * + * { margin-inline-start: var(--ux4g-space-5, 12px); }
  .ux4g-md-space-x-4  > * + * { margin-inline-start: var(--ux4g-space-6, 16px); }
  .ux4g-md-space-x-5  > * + * { margin-inline-start: var(--ux4g-space-7, 20px); }
  .ux4g-md-space-x-6  > * + * { margin-inline-start: var(--ux4g-space-8, 24px); }
  .ux4g-md-space-x-8  > * + * { margin-inline-start: var(--ux4g-space-9, 32px); }
  .ux4g-md-space-x-10 > * + * { margin-inline-start: var(--ux4g-space-10, 40px); }

  .ux4g-md-space-y-1  > * + * { margin-block-start: var(--ux4g-space-2, 4px); }
  .ux4g-md-space-y-2  > * + * { margin-block-start: var(--ux4g-space-4, 8px); }
  .ux4g-md-space-y-3  > * + * { margin-block-start: var(--ux4g-space-5, 12px); }
  .ux4g-md-space-y-4  > * + * { margin-block-start: var(--ux4g-space-6, 16px); }
  .ux4g-md-space-y-5  > * + * { margin-block-start: var(--ux4g-space-7, 20px); }
  .ux4g-md-space-y-6  > * + * { margin-block-start: var(--ux4g-space-8, 24px); }
  .ux4g-md-space-y-8  > * + * { margin-block-start: var(--ux4g-space-9, 32px); }
  .ux4g-md-space-y-10 > * + * { margin-block-start: var(--ux4g-space-10, 40px); }

}

/* SM 320px – 767px (Mobile) */
@media (min-width: 320px) and (max-width: 767px) {
  /* Margin Base */
  .ux4g-sm-m-none { margin: var(--ux4g-margin-none); } /* 0 */
  .ux4g-sm-m-3xs  { margin: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-sm-m-2xs  { margin: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-sm-m-xs   { margin: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-sm-m-s    { margin: var(--ux4g-margin-s); } /* 12px */
  .ux4g-sm-m-m    { margin: var(--ux4g-margin-m); } /* 16px */
  .ux4g-sm-m-l    { margin: var(--ux4g-margin-l); } /* 20px */
  .ux4g-sm-m-xl   { margin: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-sm-m-2xl  { margin: var(--ux4g-margin-2xl); } /* 32px */

  /* Margin Auto */
  .ux4g-sm-m-auto  { margin: auto; }
  .ux4g-sm-mx-auto { margin-inline: auto; }
  .ux4g-sm-my-auto { margin-block: auto; }

  /* Margin Axis */
  .ux4g-sm-mx-none { margin-inline: var(--ux4g-margin-none); } /* 0 */
  .ux4g-sm-mx-3xs { margin-inline: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-sm-mx-2xs { margin-inline: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-sm-mx-xs  { margin-inline: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-sm-mx-s   { margin-inline: var(--ux4g-margin-s); } /* 12px */
  .ux4g-sm-mx-m   { margin-inline: var(--ux4g-margin-m); } /* 16px */
  .ux4g-sm-mx-l   { margin-inline: var(--ux4g-margin-l); } /* 20px */
  .ux4g-sm-mx-xl  { margin-inline: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-sm-mx-2xl { margin-inline: var(--ux4g-margin-2xl); } /* 32px */

  .ux4g-sm-my-none { margin-block: var(--ux4g-margin-none); } /* 0 */
  .ux4g-sm-my-3xs { margin-block: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-sm-my-2xs { margin-block: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-sm-my-xs  { margin-block: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-sm-my-s   { margin-block: var(--ux4g-margin-s); } /* 12px */
  .ux4g-sm-my-m   { margin-block: var(--ux4g-margin-m); } /* 16px */
  .ux4g-sm-my-l   { margin-block: var(--ux4g-margin-l); } /* 20px */
  .ux4g-sm-my-xl  { margin-block: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-sm-my-2xl { margin-block: var(--ux4g-margin-2xl); } /* 32px */

  /* Directional Margin */
  .ux4g-sm-mt-none { margin-block-start: var(--ux4g-margin-none); } /* 0 */
  .ux4g-sm-mt-3xs { margin-block-start: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-sm-mt-2xs { margin-block-start: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-sm-mt-xs  { margin-block-start: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-sm-mt-s   { margin-block-start: var(--ux4g-margin-s); } /* 12px */
  .ux4g-sm-mt-m   { margin-block-start: var(--ux4g-margin-m); } /* 16px */
  .ux4g-sm-mt-l   { margin-block-start: var(--ux4g-margin-l); } /* 20px */
  .ux4g-sm-mt-xl  { margin-block-start: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-sm-mt-2xl { margin-block-start: var(--ux4g-margin-2xl); } /* 32px */

  .ux4g-sm-mb-none { margin-block-end: var(--ux4g-margin-none); } /* 0 */
  .ux4g-sm-mb-3xs { margin-block-end: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-sm-mb-2xs { margin-block-end: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-sm-mb-xs  { margin-block-end: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-sm-mb-s   { margin-block-end: var(--ux4g-margin-s); } /* 12px */
  .ux4g-sm-mb-m   { margin-block-end: var(--ux4g-margin-m); } /* 16px */
  .ux4g-sm-mb-l   { margin-block-end: var(--ux4g-margin-l); } /* 20px */
  .ux4g-sm-mb-xl  { margin-block-end: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-sm-mb-2xl { margin-block-end: var(--ux4g-margin-2xl); } /* 32px */

  .ux4g-sm-ml-none { margin-inline-start: var(--ux4g-margin-none); } /* 0 */
  .ux4g-sm-ml-3xs { margin-inline-start: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-sm-ml-2xs { margin-inline-start: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-sm-ml-xs  { margin-inline-start: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-sm-ml-s   { margin-inline-start: var(--ux4g-margin-s); } /* 12px */
  .ux4g-sm-ml-m   { margin-inline-start: var(--ux4g-margin-m); } /* 16px */
  .ux4g-sm-ml-l   { margin-inline-start: var(--ux4g-margin-l); } /* 20px */
  .ux4g-sm-ml-xl  { margin-inline-start: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-sm-ml-2xl { margin-inline-start: var(--ux4g-margin-2xl); } /* 32px */

  .ux4g-sm-mr-none { margin-inline-end: var(--ux4g-margin-none); } /* 0 */
  .ux4g-sm-mr-3xs { margin-inline-end: var(--ux4g-margin-3xs); } /* 2px */
  .ux4g-sm-mr-2xs { margin-inline-end: var(--ux4g-margin-2xs); } /* 4px */
  .ux4g-sm-mr-xs  { margin-inline-end: var(--ux4g-margin-xs); } /* 8px */
  .ux4g-sm-mr-s   { margin-inline-end: var(--ux4g-margin-s); } /* 12px */
  .ux4g-sm-mr-m   { margin-inline-end: var(--ux4g-margin-m); } /* 16px */
  .ux4g-sm-mr-l   { margin-inline-end: var(--ux4g-margin-l); } /* 20px */
  .ux4g-sm-mr-xl  { margin-inline-end: var(--ux4g-margin-xl); } /* 24px */
  .ux4g-sm-mr-2xl { margin-inline-end: var(--ux4g-margin-2xl); } /* 32px */

  /* Directional Auto Margins */
  .ux4g-sm-ml-auto { margin-inline-start: auto; }
  .ux4g-sm-mr-auto { margin-inline-end: auto; }
  .ux4g-sm-mt-auto { margin-block-start: auto; }
  .ux4g-sm-mb-auto { margin-block-end: auto; }

  /* Child Spacing (Space X / Space Y) */
  .ux4g-sm-space-x-1  > * + * { margin-inline-start: var(--ux4g-space-2, 4px); }
  .ux4g-sm-space-x-2  > * + * { margin-inline-start: var(--ux4g-space-4, 8px); }
  .ux4g-sm-space-x-3  > * + * { margin-inline-start: var(--ux4g-space-5, 12px); }
  .ux4g-sm-space-x-4  > * + * { margin-inline-start: var(--ux4g-space-6, 16px); }
  .ux4g-sm-space-x-5  > * + * { margin-inline-start: var(--ux4g-space-7, 20px); }
  .ux4g-sm-space-x-6  > * + * { margin-inline-start: var(--ux4g-space-8, 24px); }
  .ux4g-sm-space-x-8  > * + * { margin-inline-start: var(--ux4g-space-9, 32px); }
  .ux4g-sm-space-x-10 > * + * { margin-inline-start: var(--ux4g-space-10, 40px); }

  .ux4g-sm-space-y-1  > * + * { margin-block-start: var(--ux4g-space-2, 4px); }
  .ux4g-sm-space-y-2  > * + * { margin-block-start: var(--ux4g-space-4, 8px); }
  .ux4g-sm-space-y-3  > * + * { margin-block-start: var(--ux4g-space-5, 12px); }
  .ux4g-sm-space-y-4  > * + * { margin-block-start: var(--ux4g-space-6, 16px); }
  .ux4g-sm-space-y-5  > * + * { margin-block-start: var(--ux4g-space-7, 20px); }
  .ux4g-sm-space-y-6  > * + * { margin-block-start: var(--ux4g-space-8, 24px); }
  .ux4g-sm-space-y-8  > * + * { margin-block-start: var(--ux4g-space-9, 32px); }
  .ux4g-sm-space-y-10 > * + * { margin-block-start: var(--ux4g-space-10, 40px); }

}

/* =========================================
   UX4G PADDING UTILITIES
   Order:
   1. Base Padding
   2. Padding Axis
   3. Directional Padding
   4. Fixed Pixel Padding
   Approach: Desktop-first
   Breakpoints:
     Desktop (base): 1024px – 1439px (no query)
     Desktop LG (lg): ≥ 1440px
     Tablet (md): ≤ 1023px
     Mobile (sm): ≤ 767px
   ========================================= */

/* 2.1 Padding Base */
.ux4g-p-none { padding: var(--ux4g-padding-none); } /* 0 */
.ux4g-p-3xs  { padding: var(--ux4g-padding-3xs); } /* 2px */
.ux4g-p-2xs  { padding: var(--ux4g-padding-2xs); } /* 4px */
.ux4g-p-xs   { padding: var(--ux4g-padding-xs); } /* 8px */
.ux4g-p-s    { padding: var(--ux4g-padding-s); } /* 12px */
.ux4g-p-m    { padding: var(--ux4g-padding-m); } /* 16px */
.ux4g-p-l    { padding: var(--ux4g-padding-l); } /* 20px */
.ux4g-p-xl   { padding: var(--ux4g-padding-xl); } /* 24px */
.ux4g-p-2xl  { padding: var(--ux4g-padding-2xl); } /* 32px */
.ux4g-p-3xl  { padding: var(--ux4g-padding-3xl); } /* 40px */
.ux4g-p-4xl  { padding: var(--ux4g-padding-4xl); } /* 48px */

/* 2.2 Padding Axis (Fixed Complete Symmetry) */
.ux4g-px-none { padding-inline: var(--ux4g-padding-none); } /* 0 */
.ux4g-px-3xs { padding-inline: var(--ux4g-padding-3xs); } /* 2px */
.ux4g-px-2xs { padding-inline: var(--ux4g-padding-2xs); } /* 4px */
.ux4g-px-xs  { padding-inline: var(--ux4g-padding-xs); } /* 8px */
.ux4g-px-s   { padding-inline: var(--ux4g-padding-s); } /* 12px */
.ux4g-px-m   { padding-inline: var(--ux4g-padding-m); } /* 16px */
.ux4g-px-l   { padding-inline: var(--ux4g-padding-l); } /* 20px */
.ux4g-px-xl  { padding-inline: var(--ux4g-padding-xl); } /* 24px */
.ux4g-px-2xl { padding-inline: var(--ux4g-padding-2xl); } /* 32px */
.ux4g-px-3xl { padding-inline: var(--ux4g-padding-3xl); } /* 40px */
.ux4g-px-4xl { padding-inline: var(--ux4g-padding-4xl); } /* 48px */

.ux4g-py-none { padding-block: var(--ux4g-padding-none); } /* 0 */
.ux4g-py-3xs { padding-block: var(--ux4g-padding-3xs); } /* 2px */
.ux4g-py-2xs { padding-block: var(--ux4g-padding-2xs); } /* 4px */
.ux4g-py-xs  { padding-block: var(--ux4g-padding-xs); } /* 8px */
.ux4g-py-s   { padding-block: var(--ux4g-padding-s); } /* 12px */
.ux4g-py-m   { padding-block: var(--ux4g-padding-m); } /* 16px */
.ux4g-py-l   { padding-block: var(--ux4g-padding-l); } /* 20px */
.ux4g-py-xl  { padding-block: var(--ux4g-padding-xl); } /* 24px */
.ux4g-py-2xl { padding-block: var(--ux4g-padding-2xl); } /* 32px */
.ux4g-py-3xl { padding-block: var(--ux4g-padding-3xl); } /* 40px */
.ux4g-py-4xl { padding-block: var(--ux4g-padding-4xl); } /* 48px */

/* 2.3 Directional Padding (Logical + RTL Safe) */
/* Block Start (Top) */
.ux4g-pt-none { padding-block-start: var(--ux4g-padding-none); } /* 0 */
.ux4g-pt-3xs { padding-block-start: var(--ux4g-padding-3xs); } /* 2px */
.ux4g-pt-2xs { padding-block-start: var(--ux4g-padding-2xs); } /* 4px */
.ux4g-pt-xs  { padding-block-start: var(--ux4g-padding-xs); } /* 8px */
.ux4g-pt-s   { padding-block-start: var(--ux4g-padding-s); } /* 12px */
.ux4g-pt-m   { padding-block-start: var(--ux4g-padding-m); } /* 16px */
.ux4g-pt-l   { padding-block-start: var(--ux4g-padding-l); } /* 20px */
.ux4g-pt-xl  { padding-block-start: var(--ux4g-padding-xl); } /* 24px */
.ux4g-pt-2xl { padding-block-start: var(--ux4g-padding-2xl); } /* 32px */
.ux4g-pt-3xl { padding-block-start: var(--ux4g-padding-3xl); } /* 40px */
.ux4g-pt-4xl { padding-block-start: var(--ux4g-padding-4xl); } /* 48px */

/* Block End (Bottom) */
.ux4g-pb-none { padding-block-end: var(--ux4g-padding-none); } /* 0 */
.ux4g-pb-3xs { padding-block-end: var(--ux4g-padding-3xs); } /* 2px */
.ux4g-pb-2xs { padding-block-end: var(--ux4g-padding-2xs); } /* 4px */
.ux4g-pb-xs  { padding-block-end: var(--ux4g-padding-xs); } /* 8px */
.ux4g-pb-s   { padding-block-end: var(--ux4g-padding-s); } /* 12px */
.ux4g-pb-m   { padding-block-end: var(--ux4g-padding-m); } /* 16px */
.ux4g-pb-l   { padding-block-end: var(--ux4g-padding-l); } /* 20px */
.ux4g-pb-xl  { padding-block-end: var(--ux4g-padding-xl); } /* 24px */
.ux4g-pb-2xl { padding-block-end: var(--ux4g-padding-2xl); } /* 32px */
.ux4g-pb-3xl { padding-block-end: var(--ux4g-padding-3xl); } /* 40px */
.ux4g-pb-4xl { padding-block-end: var(--ux4g-padding-4xl); } /* 48px */

/* Inline Start (LTR/RTL Safe) */
.ux4g-pl-none { padding-inline-start: var(--ux4g-padding-none); } /* 0 */
.ux4g-pl-3xs { padding-inline-start: var(--ux4g-padding-3xs); } /* 2px */
.ux4g-pl-2xs { padding-inline-start: var(--ux4g-padding-2xs); } /* 4px */
.ux4g-pl-xs  { padding-inline-start: var(--ux4g-padding-xs); } /* 8px */
.ux4g-pl-s   { padding-inline-start: var(--ux4g-padding-s); } /* 12px */
.ux4g-pl-m   { padding-inline-start: var(--ux4g-padding-m); } /* 16px */
.ux4g-pl-l   { padding-inline-start: var(--ux4g-padding-l); } /* 20px */
.ux4g-pl-xl  { padding-inline-start: var(--ux4g-padding-xl); } /* 24px */
.ux4g-pl-2xl { padding-inline-start: var(--ux4g-padding-2xl); } /* 32px */
.ux4g-pl-3xl { padding-inline-start: var(--ux4g-padding-3xl); } /* 40px */
.ux4g-pl-4xl { padding-inline-start: var(--ux4g-padding-4xl); } /* 48px */

/* Inline End (LTR/RTL Safe) */
.ux4g-pr-none { padding-inline-end: var(--ux4g-padding-none); } /* 0 */
.ux4g-pr-3xs { padding-inline-end: var(--ux4g-padding-3xs); } /* 2px */
.ux4g-pr-2xs { padding-inline-end: var(--ux4g-padding-2xs); } /* 4px */
.ux4g-pr-xs  { padding-inline-end: var(--ux4g-padding-xs); } /* 8px */
.ux4g-pr-s   { padding-inline-end: var(--ux4g-padding-s); } /* 12px */
.ux4g-pr-m   { padding-inline-end: var(--ux4g-padding-m); } /* 16px */
.ux4g-pr-l   { padding-inline-end: var(--ux4g-padding-l); } /* 20px */
.ux4g-pr-xl  { padding-inline-end: var(--ux4g-padding-xl); } /* 24px */
.ux4g-pr-2xl { padding-inline-end: var(--ux4g-padding-2xl); } /* 32px */
.ux4g-pr-3xl { padding-inline-end: var(--ux4g-padding-3xl); } /* 40px */
.ux4g-pr-4xl { padding-inline-end: var(--ux4g-padding-4xl); } /* 48px */

/* 2.4 Fixed Pixel Padding */
.ux4g-pt-20 { padding-block-start: var(--ux4g-padding-l); }
.ux4g-pb-20 { padding-block-end: var(--ux4g-padding-l); }
.ux4g-pl-20 { padding-inline-start: var(--ux4g-padding-l); }
.ux4g-pr-20 { padding-inline-end: var(--ux4g-padding-l); }

/* ================= RESPONSIVE ================= */

/* LG 1440px – 1920px (Desktop LG) */
@media (min-width: 1440px) {
  /* Padding Base */
  .ux4g-lg-p-none { padding: var(--ux4g-padding-none); } /* 0 */
  .ux4g-lg-p-3xs  { padding: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-lg-p-2xs  { padding: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-lg-p-xs   { padding: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-lg-p-s    { padding: var(--ux4g-padding-s); } /* 12px */
  .ux4g-lg-p-m    { padding: var(--ux4g-padding-m); } /* 16px */
  .ux4g-lg-p-l    { padding: var(--ux4g-padding-l); } /* 20px */
  .ux4g-lg-p-xl   { padding: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-lg-p-2xl  { padding: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-lg-p-3xl  { padding: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-lg-p-4xl  { padding: var(--ux4g-padding-4xl); } /* 48px */

  /* Padding Axis */
  .ux4g-lg-px-none { padding-inline: var(--ux4g-padding-none); } /* 0 */
  .ux4g-lg-px-3xs { padding-inline: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-lg-px-2xs { padding-inline: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-lg-px-xs  { padding-inline: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-lg-px-s   { padding-inline: var(--ux4g-padding-s); } /* 12px */
  .ux4g-lg-px-m   { padding-inline: var(--ux4g-padding-m); } /* 16px */
  .ux4g-lg-px-l   { padding-inline: var(--ux4g-padding-l); } /* 20px */
  .ux4g-lg-px-xl  { padding-inline: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-lg-px-2xl { padding-inline: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-lg-px-3xl { padding-inline: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-lg-px-4xl { padding-inline: var(--ux4g-padding-4xl); } /* 48px */

  .ux4g-lg-py-none { padding-block: var(--ux4g-padding-none); } /* 0 */
  .ux4g-lg-py-3xs { padding-block: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-lg-py-2xs { padding-block: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-lg-py-xs  { padding-block: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-lg-py-s   { padding-block: var(--ux4g-padding-s); } /* 12px */
  .ux4g-lg-py-m   { padding-block: var(--ux4g-padding-m); } /* 16px */
  .ux4g-lg-py-l   { padding-block: var(--ux4g-padding-l); } /* 20px */
  .ux4g-lg-py-xl  { padding-block: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-lg-py-2xl { padding-block: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-lg-py-3xl { padding-block: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-lg-py-4xl { padding-block: var(--ux4g-padding-4xl); } /* 48px */

  /* Directional Padding */
  .ux4g-lg-pt-none { padding-block-start: var(--ux4g-padding-none); } /* 0 */
  .ux4g-lg-pt-3xs { padding-block-start: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-lg-pt-2xs { padding-block-start: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-lg-pt-xs  { padding-block-start: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-lg-pt-s   { padding-block-start: var(--ux4g-padding-s); } /* 12px */
  .ux4g-lg-pt-m   { padding-block-start: var(--ux4g-padding-m); } /* 16px */
  .ux4g-lg-pt-l   { padding-block-start: var(--ux4g-padding-l); } /* 20px */
  .ux4g-lg-pt-xl  { padding-block-start: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-lg-pt-2xl { padding-block-start: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-lg-pt-3xl { padding-block-start: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-lg-pt-4xl { padding-block-start: var(--ux4g-padding-4xl); } /* 48px */

  .ux4g-lg-pb-none { padding-block-end: var(--ux4g-padding-none); } /* 0 */
  .ux4g-lg-pb-3xs { padding-block-end: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-lg-pb-2xs { padding-block-end: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-lg-pb-xs  { padding-block-end: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-lg-pb-s   { padding-block-end: var(--ux4g-padding-s); } /* 12px */
  .ux4g-lg-pb-m   { padding-block-end: var(--ux4g-padding-m); } /* 16px */
  .ux4g-lg-pb-l   { padding-block-end: var(--ux4g-padding-l); } /* 20px */
  .ux4g-lg-pb-xl  { padding-block-end: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-lg-pb-2xl { padding-block-end: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-lg-pb-3xl { padding-block-end: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-lg-pb-4xl { padding-block-end: var(--ux4g-padding-4xl); } /* 48px */

  .ux4g-lg-pl-none { padding-inline-start: var(--ux4g-padding-none); } /* 0 */
  .ux4g-lg-pl-3xs { padding-inline-start: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-lg-pl-2xs { padding-inline-start: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-lg-pl-xs  { padding-inline-start: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-lg-pl-s   { padding-inline-start: var(--ux4g-padding-s); } /* 12px */
  .ux4g-lg-pl-m   { padding-inline-start: var(--ux4g-padding-m); } /* 16px */
  .ux4g-lg-pl-l   { padding-inline-start: var(--ux4g-padding-l); } /* 20px */
  .ux4g-lg-pl-xl  { padding-inline-start: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-lg-pl-2xl { padding-inline-start: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-lg-pl-3xl { padding-inline-start: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-lg-pl-4xl { padding-inline-start: var(--ux4g-padding-4xl); } /* 48px */

  .ux4g-lg-pr-none { padding-inline-end: var(--ux4g-padding-none); } /* 0 */
  .ux4g-lg-pr-3xs { padding-inline-end: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-lg-pr-2xs { padding-inline-end: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-lg-pr-xs  { padding-inline-end: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-lg-pr-s   { padding-inline-end: var(--ux4g-padding-s); } /* 12px */
  .ux4g-lg-pr-m   { padding-inline-end: var(--ux4g-padding-m); } /* 16px */
  .ux4g-lg-pr-l   { padding-inline-end: var(--ux4g-padding-l); } /* 20px */
  .ux4g-lg-pr-xl  { padding-inline-end: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-lg-pr-2xl { padding-inline-end: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-lg-pr-3xl { padding-inline-end: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-lg-pr-4xl { padding-inline-end: var(--ux4g-padding-4xl); } /* 48px */

}

/* MD 768px – 1023px (Tablet) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Padding Base */
  .ux4g-md-p-none { padding: var(--ux4g-padding-none); } /* 0 */
  .ux4g-md-p-3xs  { padding: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-md-p-2xs  { padding: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-md-p-xs   { padding: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-md-p-s    { padding: var(--ux4g-padding-s); } /* 12px */
  .ux4g-md-p-m    { padding: var(--ux4g-padding-m); } /* 16px */
  .ux4g-md-p-l    { padding: var(--ux4g-padding-l); } /* 20px */
  .ux4g-md-p-xl   { padding: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-md-p-2xl  { padding: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-md-p-3xl  { padding: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-md-p-4xl  { padding: var(--ux4g-padding-4xl); } /* 48px */

  /* Padding Axis */
  .ux4g-md-px-none { padding-inline: var(--ux4g-padding-none); } /* 0 */
  .ux4g-md-px-3xs { padding-inline: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-md-px-2xs { padding-inline: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-md-px-xs  { padding-inline: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-md-px-s   { padding-inline: var(--ux4g-padding-s); } /* 12px */
  .ux4g-md-px-m   { padding-inline: var(--ux4g-padding-m); } /* 16px */
  .ux4g-md-px-l   { padding-inline: var(--ux4g-padding-l); } /* 20px */
  .ux4g-md-px-xl  { padding-inline: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-md-px-2xl { padding-inline: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-md-px-3xl { padding-inline: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-md-px-4xl { padding-inline: var(--ux4g-padding-4xl); } /* 48px */

  .ux4g-md-py-none { padding-block: var(--ux4g-padding-none); } /* 0 */
  .ux4g-md-py-3xs { padding-block: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-md-py-2xs { padding-block: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-md-py-xs  { padding-block: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-md-py-s   { padding-block: var(--ux4g-padding-s); } /* 12px */
  .ux4g-md-py-m   { padding-block: var(--ux4g-padding-m); } /* 16px */
  .ux4g-md-py-l   { padding-block: var(--ux4g-padding-l); } /* 20px */
  .ux4g-md-py-xl  { padding-block: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-md-py-2xl { padding-block: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-md-py-3xl { padding-block: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-md-py-4xl { padding-block: var(--ux4g-padding-4xl); } /* 48px */

  /* Directional Padding */
  .ux4g-md-pt-none { padding-block-start: var(--ux4g-padding-none); } /* 0 */
  .ux4g-md-pt-3xs { padding-block-start: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-md-pt-2xs { padding-block-start: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-md-pt-xs  { padding-block-start: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-md-pt-s   { padding-block-start: var(--ux4g-padding-s); } /* 12px */
  .ux4g-md-pt-m   { padding-block-start: var(--ux4g-padding-m); } /* 16px */
  .ux4g-md-pt-l   { padding-block-start: var(--ux4g-padding-l); } /* 20px */
  .ux4g-md-pt-xl  { padding-block-start: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-md-pt-2xl { padding-block-start: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-md-pt-3xl { padding-block-start: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-md-pt-4xl { padding-block-start: var(--ux4g-padding-4xl); } /* 48px */

  .ux4g-md-pb-none { padding-block-end: var(--ux4g-padding-none); } /* 0 */
  .ux4g-md-pb-3xs { padding-block-end: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-md-pb-2xs { padding-block-end: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-md-pb-xs  { padding-block-end: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-md-pb-s   { padding-block-end: var(--ux4g-padding-s); } /* 12px */
  .ux4g-md-pb-m   { padding-block-end: var(--ux4g-padding-m); } /* 16px */
  .ux4g-md-pb-l   { padding-block-end: var(--ux4g-padding-l); } /* 20px */
  .ux4g-md-pb-xl  { padding-block-end: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-md-pb-2xl { padding-block-end: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-md-pb-3xl { padding-block-end: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-md-pb-4xl { padding-block-end: var(--ux4g-padding-4xl); } /* 48px */

  .ux4g-md-pl-none { padding-inline-start: var(--ux4g-padding-none); } /* 0 */
  .ux4g-md-pl-3xs { padding-inline-start: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-md-pl-2xs { padding-inline-start: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-md-pl-xs  { padding-inline-start: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-md-pl-s   { padding-inline-start: var(--ux4g-padding-s); } /* 12px */
  .ux4g-md-pl-m   { padding-inline-start: var(--ux4g-padding-m); } /* 16px */
  .ux4g-md-pl-l   { padding-inline-start: var(--ux4g-padding-l); } /* 20px */
  .ux4g-md-pl-xl  { padding-inline-start: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-md-pl-2xl { padding-inline-start: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-md-pl-3xl { padding-inline-start: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-md-pl-4xl { padding-inline-start: var(--ux4g-padding-4xl); } /* 48px */

  .ux4g-md-pr-none { padding-inline-end: var(--ux4g-padding-none); } /* 0 */
  .ux4g-md-pr-3xs { padding-inline-end: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-md-pr-2xs { padding-inline-end: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-md-pr-xs  { padding-inline-end: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-md-pr-s   { padding-inline-end: var(--ux4g-padding-s); } /* 12px */
  .ux4g-md-pr-m   { padding-inline-end: var(--ux4g-padding-m); } /* 16px */
  .ux4g-md-pr-l   { padding-inline-end: var(--ux4g-padding-l); } /* 20px */
  .ux4g-md-pr-xl  { padding-inline-end: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-md-pr-2xl { padding-inline-end: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-md-pr-3xl { padding-inline-end: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-md-pr-4xl { padding-inline-end: var(--ux4g-padding-4xl); } /* 48px */

}

/* SM 320px – 767px (Mobile) */
@media (min-width: 320px) and (max-width: 767px) {
  /* Padding Base */
  .ux4g-sm-p-none { padding: var(--ux4g-padding-none); } /* 0 */
  .ux4g-sm-p-3xs  { padding: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-sm-p-2xs  { padding: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-sm-p-xs   { padding: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-sm-p-s    { padding: var(--ux4g-padding-s); } /* 12px */
  .ux4g-sm-p-m    { padding: var(--ux4g-padding-m); } /* 16px */
  .ux4g-sm-p-l    { padding: var(--ux4g-padding-l); } /* 20px */
  .ux4g-sm-p-xl   { padding: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-sm-p-2xl  { padding: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-sm-p-3xl  { padding: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-sm-p-4xl  { padding: var(--ux4g-padding-4xl); } /* 48px */

  /* Padding Axis */
  .ux4g-sm-px-none { padding-inline: var(--ux4g-padding-none); } /* 0 */
  .ux4g-sm-px-3xs { padding-inline: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-sm-px-2xs { padding-inline: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-sm-px-xs  { padding-inline: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-sm-px-s   { padding-inline: var(--ux4g-padding-s); } /* 12px */
  .ux4g-sm-px-m   { padding-inline: var(--ux4g-padding-m); } /* 16px */
  .ux4g-sm-px-l   { padding-inline: var(--ux4g-padding-l); } /* 20px */
  .ux4g-sm-px-xl  { padding-inline: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-sm-px-2xl { padding-inline: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-sm-px-3xl { padding-inline: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-sm-px-4xl { padding-inline: var(--ux4g-padding-4xl); } /* 48px */

  .ux4g-sm-py-none { padding-block: var(--ux4g-padding-none); } /* 0 */
  .ux4g-sm-py-3xs { padding-block: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-sm-py-2xs { padding-block: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-sm-py-xs  { padding-block: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-sm-py-s   { padding-block: var(--ux4g-padding-s); } /* 12px */
  .ux4g-sm-py-m   { padding-block: var(--ux4g-padding-m); } /* 16px */
  .ux4g-sm-py-l   { padding-block: var(--ux4g-padding-l); } /* 20px */
  .ux4g-sm-py-xl  { padding-block: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-sm-py-2xl { padding-block: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-sm-py-3xl { padding-block: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-sm-py-4xl { padding-block: var(--ux4g-padding-4xl); } /* 48px */

  /* Directional Padding */
  .ux4g-sm-pt-none { padding-block-start: var(--ux4g-padding-none); } /* 0 */
  .ux4g-sm-pt-3xs { padding-block-start: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-sm-pt-2xs { padding-block-start: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-sm-pt-xs  { padding-block-start: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-sm-pt-s   { padding-block-start: var(--ux4g-padding-s); } /* 12px */
  .ux4g-sm-pt-m   { padding-block-start: var(--ux4g-padding-m); } /* 16px */
  .ux4g-sm-pt-l   { padding-block-start: var(--ux4g-padding-l); } /* 20px */
  .ux4g-sm-pt-xl  { padding-block-start: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-sm-pt-2xl { padding-block-start: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-sm-pt-3xl { padding-block-start: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-sm-pt-4xl { padding-block-start: var(--ux4g-padding-4xl); } /* 48px */

  .ux4g-sm-pb-none { padding-block-end: var(--ux4g-padding-none); } /* 0 */
  .ux4g-sm-pb-3xs { padding-block-end: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-sm-pb-2xs { padding-block-end: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-sm-pb-xs  { padding-block-end: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-sm-pb-s   { padding-block-end: var(--ux4g-padding-s); } /* 12px */
  .ux4g-sm-pb-m   { padding-block-end: var(--ux4g-padding-m); } /* 16px */
  .ux4g-sm-pb-l   { padding-block-end: var(--ux4g-padding-l); } /* 20px */
  .ux4g-sm-pb-xl  { padding-block-end: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-sm-pb-2xl { padding-block-end: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-sm-pb-3xl { padding-block-end: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-sm-pb-4xl { padding-block-end: var(--ux4g-padding-4xl); } /* 48px */

  .ux4g-sm-pl-none { padding-inline-start: var(--ux4g-padding-none); } /* 0 */
  .ux4g-sm-pl-3xs { padding-inline-start: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-sm-pl-2xs { padding-inline-start: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-sm-pl-xs  { padding-inline-start: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-sm-pl-s   { padding-inline-start: var(--ux4g-padding-s); } /* 12px */
  .ux4g-sm-pl-m   { padding-inline-start: var(--ux4g-padding-m); } /* 16px */
  .ux4g-sm-pl-l   { padding-inline-start: var(--ux4g-padding-l); } /* 20px */
  .ux4g-sm-pl-xl  { padding-inline-start: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-sm-pl-2xl { padding-inline-start: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-sm-pl-3xl { padding-inline-start: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-sm-pl-4xl { padding-inline-start: var(--ux4g-padding-4xl); } /* 48px */

  .ux4g-sm-pr-none { padding-inline-end: var(--ux4g-padding-none); } /* 0 */
  .ux4g-sm-pr-3xs { padding-inline-end: var(--ux4g-padding-3xs); } /* 2px */
  .ux4g-sm-pr-2xs { padding-inline-end: var(--ux4g-padding-2xs); } /* 4px */
  .ux4g-sm-pr-xs  { padding-inline-end: var(--ux4g-padding-xs); } /* 8px */
  .ux4g-sm-pr-s   { padding-inline-end: var(--ux4g-padding-s); } /* 12px */
  .ux4g-sm-pr-m   { padding-inline-end: var(--ux4g-padding-m); } /* 16px */
  .ux4g-sm-pr-l   { padding-inline-end: var(--ux4g-padding-l); } /* 20px */
  .ux4g-sm-pr-xl  { padding-inline-end: var(--ux4g-padding-xl); } /* 24px */
  .ux4g-sm-pr-2xl { padding-inline-end: var(--ux4g-padding-2xl); } /* 32px */
  .ux4g-sm-pr-3xl { padding-inline-end: var(--ux4g-padding-3xl); } /* 40px */
  .ux4g-sm-pr-4xl { padding-inline-end: var(--ux4g-padding-4xl); } /* 48px */

}

/* =========================================
   UX4G SIZING SYSTEM (CLEAN)
========================================= */

/* ========================
   1. WIDTH (PERCENT)
======================== */
.ux4g-w-0    { width: 0; }
.ux4g-w-25   { width: 25%; }
.ux4g-w-50   { width: 50%; }
.ux4g-w-75   { width: 75%; }
.ux4g-w-100  { width: 100%; }
.ux4g-w-auto { width: auto; }

/* ========================
   2. WIDTH (FIXED - TOKEN)
======================== */
.ux4g-wpx-60  { width: 3.75rem; }
.ux4g-wpx-100 { width: 6.25rem; }
.ux4g-wpx-150 { width: 9.375rem; }
.ux4g-wpx-200 { width: 12.5rem; }
.ux4g-wpx-300 { width: 18.75rem; }
.ux4g-wpx-400 { width: 25rem; }

/* ========================
   3. SPECIAL WIDTH
======================== */
.ux4g-w-min     { width: min-content; }
.ux4g-w-max     { width: max-content; }
.ux4g-w-fit     { width: fit-content; }
.ux4g-max-w-xs { max-width: 20rem; }
.ux4g-max-w-sm { max-width: 24rem; }
.ux4g-max-w-md { max-width: 28rem; }
.ux4g-max-w-lg { max-width: 32rem; }
.ux4g-max-w-xl { max-width: 36rem; }
.ux4g-max-w-2xl { max-width: 42rem; }
.ux4g-max-w-3xl { max-width: 48rem; }
.ux4g-max-w-4xl { max-width: 56rem; }
.ux4g-max-w-5xl { max-width: 64rem; }
.ux4g-max-w-6xl { max-width: 72rem; }
.ux4g-max-w-7xl { max-width: 80rem; }
.ux4g-w-screen  { width: 100vw; }


/* ========================
   4. MAX / MIN WIDTH
======================== */
.ux4g-max-w-none { max-width: none; }
.ux4g-max-w-full { max-width: 100%; }
.ux4g-max-w-fit  { max-width: fit-content; }

.ux4g-min-w-0    { min-width: 0; }
.ux4g-min-w-full { min-width: 100%; }

/* ========================
   5. HEIGHT (PERCENT)
======================== */
.ux4g-h-0    { height: 0; }
.ux4g-h-25   { height: 25%; }
.ux4g-h-50   { height: 50%; }
.ux4g-h-75   { height: 75%; }
.ux4g-h-100  { height: 100%; }
.ux4g-h-auto { height: auto; }

/* ========================
   6. HEIGHT (FIXED)
======================== */
.ux4g-hpx-40  { height: 2.5rem; }
.ux4g-hpx-60  { height: 3.75rem; }
.ux4g-hpx-100 { height: 6.25rem; }
.ux4g-hpx-150 { height: 9.375rem; }
.ux4g-hpx-200 { height: 12.5rem; }
.ux4g-hpx-300 { height: 18.75rem; }
.ux4g-hpx-400 { height: 25rem; }


/* ========================
   7. SPECIAL HEIGHT
======================== */
.ux4g-h-min     { height: min-content; }
.ux4g-h-max     { height: max-content; }
.ux4g-h-fit     { height: fit-content; }
.ux4g-h-screen  { height: 100vh; }
.ux4g-h-dvh     { height: 100dvh; }

/* ========================
   8. MIN / MAX HEIGHT
======================== */
.ux4g-max-h-full   { max-height: 100%; }
.ux4g-max-h-screen { max-height: 100vh; }

.ux4g-min-h-0      { min-height: 0; }
.ux4g-min-h-80     { min-height: 5rem; }
.ux4g-min-h-180    { min-height: 11.25rem; }
.ux4g-min-h-full   { min-height: 100%; }
.ux4g-min-h-screen { min-height: 100vh; }
.ux4g-min-h-dvh    { min-height: 100dvh; }

/* =========================================
   LOGICAL SIZING (RTL SAFE)
========================================= */

/* INLINE SIZE */
.ux4g-is-auto   { inline-size: auto; }
.ux4g-is-full   { inline-size: 100%; }
.ux4g-is-fit    { inline-size: fit-content; }
.ux4g-is-screen { inline-size: 100vi; }

/* BLOCK SIZE */
.ux4g-bs-auto   { block-size: auto; }
.ux4g-bs-full   { block-size: 100%; }
.ux4g-bs-fit    { block-size: fit-content; }
.ux4g-bs-screen { block-size: 100vb; }

/* MIN/MAX LOGICAL */
.ux4g-min-is-0    { min-inline-size: 0; }
.ux4g-min-is-full { min-inline-size: 100%; }
.ux4g-max-is-full { max-inline-size: 100%; }

.ux4g-min-bs-0      { min-block-size: 0; }
.ux4g-min-bs-full   { min-block-size: 100%; }
.ux4g-min-bs-screen { min-block-size: 100vb; }
.ux4g-max-bs-full   { max-block-size: 100%; }
/* =========================================
   GAP UTILITIES (Semantic)
   Controls spacing between grid/flex items.
   1. Section Gap (Layout)
   2. Stack Gap (Vertical)
   3. Inline Gap (Horizontal)
   Approach: Desktop-first
   Breakpoints:
     Desktop (base): 1024px – 1439px (no query)
     Desktop LG (lg): ≥ 1440px
     Tablet (md): ≤ 1023px
     Mobile (sm): ≤ 767px
========================================= */

/* 1.1 Section Gap (Layout Spacing) */
.ux4g-gap-none { gap: var(--ux4g-section-none, var(--ux4g-space-none, 0rem)); } /* 0px */
.ux4g-gap-2xs  { gap: var(--ux4g-section-2xs, var(--ux4g-space-2, 0.25rem)); } /* 4px */
.ux4g-gap-3xs  { gap: var(--ux4g-section-3xs, var(--ux4g-space-3, 0.375rem)); } /* 6px */
.ux4g-gap-4xs  { gap: var(--ux4g-section-4xs, var(--ux4g-space-4, 0.5rem)); } /* 8px */
.ux4g-gap-5xs  { gap: var(--ux4g-section-5xs, var(--ux4g-space-5, 0.75rem)); } /* 12px */
.ux4g-gap-6xs  { gap: var(--ux4g-section-6xs, var(--ux4g-space-6, 1rem)); } /* 16px */
.ux4g-gap-7xs  { gap: var(--ux4g-section-7xs, var(--ux4g-space-7, 1.25rem)); } /* 20px */
.ux4g-gap-xs   { gap: var(--ux4g-section-xs, var(--ux4g-space-8, 1.5rem)); } /* 24px */
.ux4g-gap-s    { gap: var(--ux4g-section-s, var(--ux4g-space-9, 2rem)); } /* 28px */
.ux4g-gap-m    { gap: var(--ux4g-section-m, var(--ux4g-space-11, 3rem)); } /* 36px */
.ux4g-gap-l    { gap: var(--ux4g-section-l, var(--ux4g-space-12, 3.5rem)); } /* 40px */
.ux4g-gap-xl   { gap: var(--ux4g-section-xl, var(--ux4g-space-13, 4rem)); } /* 48px */
.ux4g-gap-2xl  { gap: var(--ux4g-section-2xl, var(--ux4g-space-14, 5rem)); } /* 56px */

/* 1.2 Stack Gap (Vertical Rhythm) */
.ux4g-stack-gap-none { row-gap: var(--ux4g-stack-none); }
.ux4g-stack-gap-2xs  { row-gap: var(--ux4g-stack-2xs); }
.ux4g-stack-gap-xs   { row-gap: var(--ux4g-stack-xs); }
.ux4g-stack-gap-s    { row-gap: var(--ux4g-stack-s); }
.ux4g-stack-gap-m    { row-gap: var(--ux4g-stack-m); }
.ux4g-stack-gap-l    { row-gap: var(--ux4g-stack-l); }

/* 1.3 Inline Gap (Horizontal Flow) */
.ux4g-inline-gap-none { column-gap: var(--ux4g-inline-none); }
.ux4g-inline-gap-2xs  { column-gap: var(--ux4g-inline-2xs); }
.ux4g-inline-gap-xs   { column-gap: var(--ux4g-inline-xs); }
.ux4g-inline-gap-s    { column-gap: var(--ux4g-inline-s); }
.ux4g-inline-gap-m    { column-gap: var(--ux4g-inline-m); }
.ux4g-inline-gap-l    { column-gap: var(--ux4g-inline-l); }


/* ================= RESPONSIVE ================= */

/* LG 1440px – 1920px (Desktop LG) */
@media (min-width: 1440px) {
  /* Section Gap */
  .ux4g-lg-gap-none { gap: var(--ux4g-section-none, var(--ux4g-space-none, 0rem)); }
  .ux4g-lg-gap-2xs  { gap: var(--ux4g-section-2xs, var(--ux4g-space-2, 0.25rem)); }
  .ux4g-lg-gap-3xs  { gap: var(--ux4g-section-3xs, var(--ux4g-space-3, 0.375rem)); }
  .ux4g-lg-gap-4xs  { gap: var(--ux4g-section-4xs, var(--ux4g-space-4, 0.5rem)); }
  .ux4g-lg-gap-5xs  { gap: var(--ux4g-section-5xs, var(--ux4g-space-5, 0.75rem)); }
  .ux4g-lg-gap-6xs  { gap: var(--ux4g-section-6xs, var(--ux4g-space-6, 1rem)); }
  .ux4g-lg-gap-7xs  { gap: var(--ux4g-section-7xs, var(--ux4g-space-7, 1.25rem)); }
  .ux4g-lg-gap-xs   { gap: var(--ux4g-section-xs, var(--ux4g-space-8, 1.5rem)); }
  .ux4g-lg-gap-s    { gap: var(--ux4g-section-s, var(--ux4g-space-9, 2rem)); }
  .ux4g-lg-gap-m    { gap: var(--ux4g-section-m, var(--ux4g-space-11, 3rem)); }
  .ux4g-lg-gap-l    { gap: var(--ux4g-section-l, var(--ux4g-space-12, 3.5rem)); }
  .ux4g-lg-gap-xl   { gap: var(--ux4g-section-xl, var(--ux4g-space-13, 4rem)); }
  .ux4g-lg-gap-2xl  { gap: var(--ux4g-section-2xl, var(--ux4g-space-14, 5rem)); }

  /* Stack Gap */
  .ux4g-lg-stack-gap-none { row-gap: var(--ux4g-stack-none); }
  .ux4g-lg-stack-gap-2xs  { row-gap: var(--ux4g-stack-2xs); }
  .ux4g-lg-stack-gap-xs   { row-gap: var(--ux4g-stack-xs); }
  .ux4g-lg-stack-gap-s    { row-gap: var(--ux4g-stack-s); }
  .ux4g-lg-stack-gap-m    { row-gap: var(--ux4g-stack-m); }
  .ux4g-lg-stack-gap-l    { row-gap: var(--ux4g-stack-l); }

  /* Inline Gap */
  .ux4g-lg-inline-gap-none { column-gap: var(--ux4g-inline-none); }
  .ux4g-lg-inline-gap-2xs  { column-gap: var(--ux4g-inline-2xs); }
  .ux4g-lg-inline-gap-xs   { column-gap: var(--ux4g-inline-xs); }
  .ux4g-lg-inline-gap-s    { column-gap: var(--ux4g-inline-s); }
  .ux4g-lg-inline-gap-m    { column-gap: var(--ux4g-inline-m); }
  .ux4g-lg-inline-gap-l    { column-gap: var(--ux4g-inline-l); }
}

/* MD 768px – 1023px (Tablet) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Section Gap */
  .ux4g-md-gap-none { gap: var(--ux4g-section-none, var(--ux4g-space-none, 0rem)); }
  .ux4g-md-gap-2xs  { gap: var(--ux4g-section-2xs, var(--ux4g-space-2, 0.25rem)); }
  .ux4g-md-gap-3xs  { gap: var(--ux4g-section-3xs, var(--ux4g-space-3, 0.375rem)); }
  .ux4g-md-gap-4xs  { gap: var(--ux4g-section-4xs, var(--ux4g-space-4, 0.5rem)); }
  .ux4g-md-gap-5xs  { gap: var(--ux4g-section-5xs, var(--ux4g-space-5, 0.75rem)); }
  .ux4g-md-gap-6xs  { gap: var(--ux4g-section-6xs, var(--ux4g-space-6, 1rem)); }
  .ux4g-md-gap-7xs  { gap: var(--ux4g-section-7xs, var(--ux4g-space-7, 1.25rem)); }
  .ux4g-md-gap-xs   { gap: var(--ux4g-section-xs, var(--ux4g-space-8, 1.5rem)); }
  .ux4g-md-gap-s    { gap: var(--ux4g-section-s, var(--ux4g-space-9, 2rem)); }
  .ux4g-md-gap-m    { gap: var(--ux4g-section-m, var(--ux4g-space-11, 3rem)); }
  .ux4g-md-gap-l    { gap: var(--ux4g-section-l, var(--ux4g-space-12, 3.5rem)); }
  .ux4g-md-gap-xl   { gap: var(--ux4g-section-xl, var(--ux4g-space-13, 4rem)); }
  .ux4g-md-gap-2xl  { gap: var(--ux4g-section-2xl, var(--ux4g-space-14, 5rem)); }

  /* Stack Gap */
  .ux4g-md-stack-gap-none { row-gap: var(--ux4g-stack-none); }
  .ux4g-md-stack-gap-2xs  { row-gap: var(--ux4g-stack-2xs); }
  .ux4g-md-stack-gap-xs   { row-gap: var(--ux4g-stack-xs); }
  .ux4g-md-stack-gap-s    { row-gap: var(--ux4g-stack-s); }
  .ux4g-md-stack-gap-m    { row-gap: var(--ux4g-stack-m); }
  .ux4g-md-stack-gap-l    { row-gap: var(--ux4g-stack-l); }

  /* Inline Gap */
  .ux4g-md-inline-gap-none { column-gap: var(--ux4g-inline-none); }
  .ux4g-md-inline-gap-2xs  { column-gap: var(--ux4g-inline-2xs); }
  .ux4g-md-inline-gap-xs   { column-gap: var(--ux4g-inline-xs); }
  .ux4g-md-inline-gap-s    { column-gap: var(--ux4g-inline-s); }
  .ux4g-md-inline-gap-m    { column-gap: var(--ux4g-inline-m); }
  .ux4g-md-inline-gap-l    { column-gap: var(--ux4g-inline-l); }
}

/* SM 320px – 767px (Mobile) */
@media (min-width: 320px) and (max-width: 767px) {
  /* Section Gap */
  .ux4g-sm-gap-none { gap: var(--ux4g-section-none, var(--ux4g-space-none, 0rem)); }
  .ux4g-sm-gap-2xs  { gap: var(--ux4g-section-2xs, var(--ux4g-space-2, 0.25rem)); }
  .ux4g-sm-gap-3xs  { gap: var(--ux4g-section-3xs, var(--ux4g-space-3, 0.375rem)); }
  .ux4g-sm-gap-4xs  { gap: var(--ux4g-section-4xs, var(--ux4g-space-4, 0.5rem)); }
  .ux4g-sm-gap-5xs  { gap: var(--ux4g-section-5xs, var(--ux4g-space-5, 0.75rem)); }
  .ux4g-sm-gap-6xs  { gap: var(--ux4g-section-6xs, var(--ux4g-space-6, 1rem)); }
  .ux4g-sm-gap-7xs  { gap: var(--ux4g-section-7xs, var(--ux4g-space-7, 1.25rem)); }
  .ux4g-sm-gap-xs   { gap: var(--ux4g-section-xs, var(--ux4g-space-8, 1.5rem)); }
  .ux4g-sm-gap-s    { gap: var(--ux4g-section-s, var(--ux4g-space-9, 2rem)); }
  .ux4g-sm-gap-m    { gap: var(--ux4g-section-m, var(--ux4g-space-11, 3rem)); }
  .ux4g-sm-gap-l    { gap: var(--ux4g-section-l, var(--ux4g-space-12, 3.5rem)); }
  .ux4g-sm-gap-xl   { gap: var(--ux4g-section-xl, var(--ux4g-space-13, 4rem)); }
  .ux4g-sm-gap-2xl  { gap: var(--ux4g-section-2xl, var(--ux4g-space-14, 5rem)); }

  /* Stack Gap */
  .ux4g-sm-stack-gap-none { row-gap: var(--ux4g-stack-none); }
  .ux4g-sm-stack-gap-2xs  { row-gap: var(--ux4g-stack-2xs); }
  .ux4g-sm-stack-gap-xs   { row-gap: var(--ux4g-stack-xs); }
  .ux4g-sm-stack-gap-s    { row-gap: var(--ux4g-stack-s); }
  .ux4g-sm-stack-gap-m    { row-gap: var(--ux4g-stack-m); }
  .ux4g-sm-stack-gap-l    { row-gap: var(--ux4g-stack-l); }

  /* Inline Gap */
  .ux4g-sm-inline-gap-none { column-gap: var(--ux4g-inline-none); }
  .ux4g-sm-inline-gap-2xs  { column-gap: var(--ux4g-inline-2xs); }
  .ux4g-sm-inline-gap-xs   { column-gap: var(--ux4g-inline-xs); }
  .ux4g-sm-inline-gap-s    { column-gap: var(--ux4g-inline-s); }
  .ux4g-sm-inline-gap-m    { column-gap: var(--ux4g-inline-m); }
  .ux4g-sm-inline-gap-l    { column-gap: var(--ux4g-inline-l); }
}
   
/* =========================================
   OBJECT FIT & POSITION UTILITIES
   Approach: Desktop-first
   Breakpoints:
     Desktop (base): 1024px – 1439px (no query)
     Desktop LG (lg): ≥ 1440px
     Tablet (md): ≤ 1023px
     Mobile (sm): ≤ 767px
========================================= */

/* OBJECT FIT */
.ux4g-of-cover { object-fit: cover; }
.ux4g-of-contain { object-fit: contain; }
.ux4g-of-fill { object-fit: fill; }
.ux4g-of-none { object-fit: none; }
.ux4g-of-scale-down { object-fit: scale-down; }

/* OBJECT POSITION BASE */
.ux4g-op {
  object-position: var(--ux4g-op, center);
}

/* POSITION PRESETS */
.ux4g-op-center { --ux4g-op: center; }
.ux4g-op-top { --ux4g-op: top; }
.ux4g-op-bottom { --ux4g-op: bottom; }
.ux4g-op-left { --ux4g-op: left; }
.ux4g-op-right { --ux4g-op: right; }

/* OPTIONAL CORNERS */
.ux4g-op-top-left { --ux4g-op: top left; }
.ux4g-op-top-right { --ux4g-op: top right; }
.ux4g-op-bottom-left { --ux4g-op: bottom left; }
.ux4g-op-bottom-right { --ux4g-op: bottom right; }

/* FLUID IMAGE FIX */
.ux4g-img-fluid {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ================= RESPONSIVE ================= */

/* LG 1440px – 1920px (Desktop LG) */
@media (min-width: 1440px) {
  .ux4g-lg-of-cover { object-fit: cover; }
  .ux4g-lg-of-contain { object-fit: contain; }
  .ux4g-lg-of-fill { object-fit: fill; }
  .ux4g-lg-of-none { object-fit: none; }
  .ux4g-lg-of-scale-down { object-fit: scale-down; }
}

/* MD 768px – 1023px (Tablet) */
@media (min-width: 768px) and (max-width: 1023px) {
  .ux4g-md-of-cover { object-fit: cover; }
  .ux4g-md-of-contain { object-fit: contain; }
  .ux4g-md-of-fill { object-fit: fill; }
  .ux4g-md-of-none { object-fit: none; }
  .ux4g-md-of-scale-down { object-fit: scale-down; }
}

/* SM 320px – 767px (Mobile) */
@media (min-width: 320px) and (max-width: 767px) {
  .ux4g-sm-of-cover { object-fit: cover; }
  .ux4g-sm-of-contain { object-fit: contain; }
  .ux4g-sm-of-fill { object-fit: fill; }
  .ux4g-sm-of-none { object-fit: none; }
  .ux4g-sm-of-scale-down { object-fit: scale-down; }
}

/* Base Engine */
.ux4g-o-auto,
.ux4g-o-hidden,
.ux4g-o-visible,
.ux4g-o-scroll {
  overflow: var(--ux4g-of);
}

[class*="ux4g-o-x-"] {
  overflow-x: var(--ux4g-ofx);
}

[class*="ux4g-o-y-"] {
  overflow-y: var(--ux4g-ofy);
}

/* ===== Overflow Utilities ===== */
.ux4g-o-auto { --ux4g-of: var(--ux4g-of-auto); }
.ux4g-o-hidden { --ux4g-of: var(--ux4g-of-hidden); }
.ux4g-o-visible { --ux4g-of: var(--ux4g-of-visible); }
.ux4g-o-scroll { --ux4g-of: var(--ux4g-of-scroll); }

/* ===== Overflow X Utilities ===== */
.ux4g-o-x-auto { --ux4g-ofx: var(--ux4g-ofx-auto); }
.ux4g-o-x-hidden { --ux4g-ofx: var(--ux4g-ofx-hidden); }
.ux4g-o-x-visible { --ux4g-ofx: var(--ux4g-ofx-visible); }
.ux4g-o-x-scroll { --ux4g-ofx: var(--ux4g-ofx-scroll); }

/* ===== Overflow Y Utilities ===== */
.ux4g-o-y-auto { --ux4g-ofy: var(--ux4g-ofy-auto); }
.ux4g-o-y-hidden { --ux4g-ofy: var(--ux4g-ofy-hidden); }
.ux4g-o-y-visible { --ux4g-ofy: var(--ux4g-ofy-visible); }
.ux4g-o-y-scroll { --ux4g-ofy: var(--ux4g-ofy-scroll); }




/* =========================================================
   Base Overflow Engine (DRY)
========================================================= */
.ux4g-o-auto,
.ux4g-o-scroll,
.ux4g-o-y-auto,
.ux4g-o-y-scroll,
.ux4g-o-x-auto,
.ux4g-o-x-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--ux4g-scroll-thumb) var(--ux4g-scroll-track);
}


/* WebKit Browsers (Chrome, Edge, Safari) */
.ux4g-o-auto::-webkit-scrollbar,
.ux4g-o-scroll::-webkit-scrollbar,
.ux4g-o-y-auto::-webkit-scrollbar,
.ux4g-o-y-scroll::-webkit-scrollbar,
.ux4g-o-x-auto::-webkit-scrollbar,
.ux4g-o-x-scroll::-webkit-scrollbar {
  width: var(--ux4g-scroll-size);
  height: var(--ux4g-scroll-size);
}

.ux4g-o-auto::-webkit-scrollbar-track,
.ux4g-o-scroll::-webkit-scrollbar-track,
.ux4g-o-y-auto::-webkit-scrollbar-track,
.ux4g-o-y-scroll::-webkit-scrollbar-track,
.ux4g-o-x-auto::-webkit-scrollbar-track,
.ux4g-o-x-scroll::-webkit-scrollbar-track {
  background: var(--ux4g-scroll-track);
  border-radius: var(--ux4g-scroll-radius);
}

.ux4g-o-auto::-webkit-scrollbar-thumb,
.ux4g-o-scroll::-webkit-scrollbar-thumb,
.ux4g-o-y-auto::-webkit-scrollbar-thumb,
.ux4g-o-y-scroll::-webkit-scrollbar-thumb,
.ux4g-o-x-auto::-webkit-scrollbar-thumb,
.ux4g-o-x-scroll::-webkit-scrollbar-thumb {
  background-color: var(--ux4g-scroll-thumb);
  border-radius: var(--ux4g-scroll-radius);
  border: 2px solid transparent;
  background-clip: content-box;
}

.ux4g-o-auto::-webkit-scrollbar-thumb:hover,
.ux4g-o-scroll::-webkit-scrollbar-thumb:hover,
.ux4g-o-y-auto::-webkit-scrollbar-thumb:hover,
.ux4g-o-y-scroll::-webkit-scrollbar-thumb:hover,
.ux4g-o-x-auto::-webkit-scrollbar-thumb:hover,
.ux4g-o-x-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--ux4g-color-neutral-400, #a1a1a1);
}
/* ==========================================
   UX4G Position Utilities
   ==========================================
   Phase 1: Full inset scale (0/25/50/75/100/auto),
   inset shorthand, negative insets, helpers.
   ========================================== */

/* ===== Position Types ===== */
.ux4g-static   { position: var(--ux4g-pos-static); }
.ux4g-relative { position: var(--ux4g-pos-relative); }
.ux4g-absolute { position: var(--ux4g-pos-absolute); }
.ux4g-fixed    { position: var(--ux4g-pos-fixed); }
.ux4g-sticky   { position: var(--ux4g-pos-sticky); }

/* ===== Top ===== */
.ux4g-top-0    { top: var(--ux4g-pos-top-0); }
.ux4g-top-25   { top: var(--ux4g-pos-top-25); }
.ux4g-top-50   { top: var(--ux4g-pos-top-50); }
.ux4g-top-75   { top: var(--ux4g-pos-top-75); }
.ux4g-top-100  { top: var(--ux4g-pos-top-100); }
.ux4g-top-auto { top: var(--ux4g-pos-top-auto); }

/* ===== Bottom ===== */
.ux4g-bottom-0    { bottom: var(--ux4g-pos-bottom-0); }
.ux4g-bottom-25   { bottom: var(--ux4g-pos-bottom-25); }
.ux4g-bottom-50   { bottom: var(--ux4g-pos-bottom-50); }
.ux4g-bottom-75   { bottom: var(--ux4g-pos-bottom-75); }
.ux4g-bottom-100  { bottom: var(--ux4g-pos-bottom-100); }
.ux4g-bottom-auto { bottom: var(--ux4g-pos-bottom-auto); }

/* ===== Start (Left) ===== */
.ux4g-start-0    { left: var(--ux4g-pos-start-0); }
.ux4g-start-25   { left: var(--ux4g-pos-start-25); }
.ux4g-start-50   { left: var(--ux4g-pos-start-50); }
.ux4g-start-75   { left: var(--ux4g-pos-start-75); }
.ux4g-start-100  { left: var(--ux4g-pos-start-100); }
.ux4g-start-auto { left: var(--ux4g-pos-start-auto); }

/* ===== End (Right) ===== */
.ux4g-end-0    { right: var(--ux4g-pos-end-0); }
.ux4g-end-25   { right: var(--ux4g-pos-end-25); }
.ux4g-end-50   { right: var(--ux4g-pos-end-50); }
.ux4g-end-75   { right: var(--ux4g-pos-end-75); }
.ux4g-end-100  { right: var(--ux4g-pos-end-100); }
.ux4g-end-auto { right: var(--ux4g-pos-end-auto); }

/* ===== Inset Shorthand (all 4 sides) ===== */
.ux4g-inset-0    { inset: 0; }
.ux4g-inset-25   { inset: 25%; }
.ux4g-inset-50   { inset: 50%; }
.ux4g-inset-100  { inset: 100%; }
.ux4g-inset-auto { inset: auto; }

/* Inset X (left + right) */
.ux4g-inset-x-0    { left: 0; right: 0; }
.ux4g-inset-x-auto { left: auto; right: auto; }

/* Inset Y (top + bottom) */
.ux4g-inset-y-0    { top: 0; bottom: 0; }

/* ===== Negative Inset (badge/overlay overlap) ===== */
.ux4g-top-n-4  { top: var(--ux4g-pos-top-n-4); }
.ux4g-top-n-8  { top: var(--ux4g-pos-top-n-8); }
.ux4g-top-n-12 { top: var(--ux4g-pos-top-n-12); }
.ux4g-end-n-4  { right: var(--ux4g-pos-end-n-4); }
.ux4g-end-n-8  { right: var(--ux4g-pos-end-n-8); }
.ux4g-end-n-12 { right: var(--ux4g-pos-end-n-12); }
.ux4g-bottom-n-4  { bottom: var(--ux4g-pos-bottom-n-4); }
.ux4g-bottom-n-8  { bottom: var(--ux4g-pos-bottom-n-8); }
.ux4g-bottom-n-12 { bottom: var(--ux4g-pos-bottom-n-12); }
.ux4g-start-n-4  { left: var(--ux4g-pos-start-n-4); }
.ux4g-start-n-8  { left: var(--ux4g-pos-start-n-8); }
.ux4g-start-n-12 { left: var(--ux4g-pos-start-n-12); }

/* ===== Fixed Pixel Insets (precise positioning) ===== */
/* Top */
.ux4g-top-px-4  { top: var(--ux4g-pos-px-4); }
.ux4g-top-px-8  { top: var(--ux4g-pos-px-8); }
.ux4g-top-px-12 { top: var(--ux4g-pos-px-12); }
.ux4g-top-px-16 { top: var(--ux4g-pos-px-16); }
.ux4g-top-px-24 { top: var(--ux4g-pos-px-24); }
.ux4g-top-px-32 { top: var(--ux4g-pos-px-32); }
.ux4g-top-px-48 { top: var(--ux4g-pos-px-48); }

/* Bottom */
.ux4g-bottom-px-4  { bottom: var(--ux4g-pos-px-4); }
.ux4g-bottom-px-8  { bottom: var(--ux4g-pos-px-8); }
.ux4g-bottom-px-12 { bottom: var(--ux4g-pos-px-12); }
.ux4g-bottom-px-16 { bottom: var(--ux4g-pos-px-16); }
.ux4g-bottom-px-24 { bottom: var(--ux4g-pos-px-24); }
.ux4g-bottom-px-32 { bottom: var(--ux4g-pos-px-32); }
.ux4g-bottom-px-48 { bottom: var(--ux4g-pos-px-48); }

/* Start (Left) */
.ux4g-start-px-4  { left: var(--ux4g-pos-px-4); }
.ux4g-start-px-8  { left: var(--ux4g-pos-px-8); }
.ux4g-start-px-12 { left: var(--ux4g-pos-px-12); }
.ux4g-start-px-16 { left: var(--ux4g-pos-px-16); }
.ux4g-start-px-24 { left: var(--ux4g-pos-px-24); }
.ux4g-start-px-32 { left: var(--ux4g-pos-px-32); }
.ux4g-start-px-48 { left: var(--ux4g-pos-px-48); }

/* End (Right) */
.ux4g-end-px-4  { right: var(--ux4g-pos-px-4); }
.ux4g-end-px-8  { right: var(--ux4g-pos-px-8); }
.ux4g-end-px-12 { right: var(--ux4g-pos-px-12); }
.ux4g-end-px-16 { right: var(--ux4g-pos-px-16); }
.ux4g-end-px-24 { right: var(--ux4g-pos-px-24); }
.ux4g-end-px-32 { right: var(--ux4g-pos-px-32); }
.ux4g-end-px-48 { right: var(--ux4g-pos-px-48); }

/* ===== Small Offset Utilities (legacy) ===== */
.ux4g-bottom-xs { bottom: var(--ux4g-pos-bottom-xs); }
.ux4g-bottom-sm { bottom: var(--ux4g-pos-bottom-sm); }

.ux4g-end-overflow-xs { right: var(--ux4g-pos-end-overflow-xs); }
.ux4g-end-overflow-sm { right: var(--ux4g-pos-end-overflow-sm); }
.ux4g-end-overflow-md { right: var(--ux4g-pos-end-overflow-md); }

/* ===== Transform ===== */
.ux4g-translate-middle   { transform: var(--ux4g-pos-translate-middle); }
.ux4g-translate-middle-x { transform: var(--ux4g-pos-translate-middle-x); }
.ux4g-translate-middle-y { transform: var(--ux4g-pos-translate-middle-y); }

/* ===== Helpers ===== */
.ux4g-fixed-top {
  position: var(--ux4g-pos-fixed);
  top: 0;
  left: 0;
  right: 0;
}

.ux4g-fixed-bottom {
  position: var(--ux4g-pos-fixed);
  bottom: 0;
  left: 0;
  right: 0;
}

.ux4g-sticky-top {
  position: var(--ux4g-pos-sticky);
  top: 0;
}

.ux4g-sticky-bottom {
  position: var(--ux4g-pos-sticky);
  bottom: 0;
}

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

/* ==========================================
   UX4G Responsive Position Utilities
   ==========================================
   Breakpoints:
     Desktop LG (lg): ≥ 1440px
     Tablet (md): 768px – 1023px
     Mobile (sm): 320px – 767px
   ========================================== */

/* =========================================
   LG ≥ 1440px (Desktop Large)
========================================= */
@media (min-width: 1440px) {
  .ux4g-lg-static   { position: static !important; }
  .ux4g-lg-relative { position: relative !important; }
  .ux4g-lg-absolute { position: absolute !important; }
  .ux4g-lg-fixed    { position: fixed !important; }
  .ux4g-lg-sticky   { position: sticky !important; }

  .ux4g-lg-top-0    { top: 0 !important; }
  .ux4g-lg-top-50   { top: 50% !important; }
  .ux4g-lg-top-100  { top: 100% !important; }
  .ux4g-lg-bottom-0 { bottom: 0 !important; }
  .ux4g-lg-start-0  { left: 0 !important; }
  .ux4g-lg-end-0    { right: 0 !important; }

  .ux4g-lg-inset-0    { inset: 0 !important; }
  .ux4g-lg-inset-auto { inset: auto !important; }

  .ux4g-lg-sticky-top {
    position: sticky !important;
    top: 0 !important;
  }

  .ux4g-lg-fixed-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* =========================================
   MD 768px – 1023px (Tablet)
========================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .ux4g-md-static   { position: static !important; }
  .ux4g-md-relative { position: relative !important; }
  .ux4g-md-absolute { position: absolute !important; }
  .ux4g-md-fixed    { position: fixed !important; }
  .ux4g-md-sticky   { position: sticky !important; }

  .ux4g-md-top-0    { top: 0 !important; }
  .ux4g-md-top-50   { top: 50% !important; }
  .ux4g-md-top-100  { top: 100% !important; }
  .ux4g-md-bottom-0 { bottom: 0 !important; }
  .ux4g-md-start-0  { left: 0 !important; }
  .ux4g-md-end-0    { right: 0 !important; }

  .ux4g-md-inset-0    { inset: 0 !important; }
  .ux4g-md-inset-auto { inset: auto !important; }

  .ux4g-md-sticky-top {
    position: sticky !important;
    top: 0 !important;
  }

  .ux4g-md-fixed-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* =========================================
   SM 320px – 767px (Mobile)
========================================= */
@media (min-width: 320px) and (max-width: 767px) {
  .ux4g-sm-static   { position: static !important; }
  .ux4g-sm-relative { position: relative !important; }
  .ux4g-sm-absolute { position: absolute !important; }
  .ux4g-sm-fixed    { position: fixed !important; }
  .ux4g-sm-sticky   { position: sticky !important; }

  .ux4g-sm-top-0    { top: 0 !important; }
  .ux4g-sm-top-50   { top: 50% !important; }
  .ux4g-sm-top-100  { top: 100% !important; }
  .ux4g-sm-bottom-0 { bottom: 0 !important; }
  .ux4g-sm-start-0  { left: 0 !important; }
  .ux4g-sm-end-0    { right: 0 !important; }

  .ux4g-sm-inset-0    { inset: 0 !important; }
  .ux4g-sm-inset-auto { inset: auto !important; }

  .ux4g-sm-sticky-top {
    position: sticky !important;
    top: 0 !important;
  }

  .ux4g-sm-fixed-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
}

   /* Z-Index Utilities (Low Level) */
.ux4g-z-n1 { z-index: var(--ux4g-z-n1) ; }
.ux4g-z-0 { z-index: var(--ux4g-z-0) ; }
.ux4g-z-1 { z-index: var(--ux4g-z-1) ; }
.ux4g-z-2 { z-index: var(--ux4g-z-2) ; }
.ux4g-z-3 { z-index: var(--ux4g-z-3) ; }


.ux4g-z-10 { z-index: var(--ux4g-z-10); }
.ux4g-z-20 { z-index: var(--ux4g-z-20); }
.ux4g-z-30 { z-index: var(--ux4g-z-30); }
.ux4g-z-40 { z-index: var(--ux4g-z-40); }
.ux4g-z-50 { z-index: var(--ux4g-z-50); }


/* Z-Index Utilities (Semantic / Component) */
.ux4g-z-dropdown { z-index: var(--ux4g-z-dropdown); }
.ux4g-z-sticky { z-index: var(--ux4g-z-sticky); }
.ux4g-z-fixed { z-index: var(--ux4g-z-fixed); }
.ux4g-z-offcanvas { z-index: var(--ux4g-z-offcanvas); }
.ux4g-z-modal-backdrop { z-index: var(--ux4g-z-modal-backdrop); }
.ux4g-z-modal { z-index: var(--ux4g-z-modal); }
.ux4g-z-popover { z-index: var(--ux4g-z-popover); }
.ux4g-z-tooltip { z-index: var(--ux4g-z-tooltip); }
.ux4g-z-toast { z-index: var(--ux4g-z-toast); }

.ux4g-visible {
  visibility: var(--ux4g-visibility-visible) !important;
}

.ux4g-invisible {
  visibility: var(--ux4g-visibility-hidden) !important;
}

/* =========================================
   DISPLAY UTILITIES
   Author: UX4G
   Based on Bootstrap's display utilities.
========================================= */

.ux4g-d-none { display: none !important; }
.ux4g-d-inline { display: inline !important; }
.ux4g-d-inline-block { display: inline-block !important; }
.ux4g-d-block { display: block !important; }

.ux4g-d-table { display: table !important; }
.ux4g-d-table-row { display: table-row !important; }
.ux4g-d-table-cell { display: table-cell !important; }
.ux4g-d-grid { display: grid !important; }
.ux4g-d-flex { display: flex !important; }
.ux4g-d-inline-flex { display: inline-flex !important; }
.ux4g-d-contents { display: contents !important; }
.ux4g-d-list-item { display: list-item !important; }

/* =========================================
   RESPONSIVE DISPLAY UTILITIES
   Author: UX4G
   Notation: .ux4g-{breakpoint}-d-{value}
   Approach: Desktop-first
   Breakpoints:
     Desktop (base): 1024px – 1439px (no query)
     Desktop LG (lg): ≥ 1440px
     Tablet (md): ≤ 1023px
     Mobile (sm): ≤ 767px
========================================= */

/* Desktop LG (lg) 1440px – 1920px */
@media (min-width: 1440px) {
   .ux4g-lg-d-none { display: none !important; }
   .ux4g-lg-d-inline { display: inline !important; }
   .ux4g-lg-d-inline-block { display: inline-block !important; }
   .ux4g-lg-d-block { display: block !important; }
   .ux4g-lg-d-grid { display: grid !important; }
   .ux4g-lg-d-table { display: table !important; }
   .ux4g-lg-d-table-row { display: table-row !important; }
   .ux4g-lg-d-table-cell { display: table-cell !important; }
   .ux4g-lg-d-flex { display: flex !important; }
   .ux4g-lg-d-inline-flex { display: inline-flex !important; }
}

/* Tablet 768px – 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
   .ux4g-md-d-none { display: none !important; }
   .ux4g-md-d-inline { display: inline !important; }
   .ux4g-md-d-inline-block { display: inline-block !important; }
   .ux4g-md-d-block { display: block !important; }
   .ux4g-md-d-grid { display: grid !important; }
   .ux4g-md-d-table { display: table !important; }
   .ux4g-md-d-table-row { display: table-row !important; }
   .ux4g-md-d-table-cell { display: table-cell !important; }
   .ux4g-md-d-flex { display: flex !important; }
   .ux4g-md-d-inline-flex { display: inline-flex !important; }
}

/* Mobile 320px – 767px */
@media (min-width: 320px) and (max-width: 767px) {
   .ux4g-sm-d-none { display: none !important; }
   .ux4g-sm-d-inline { display: inline !important; }
   .ux4g-sm-d-inline-block { display: inline-block !important; }
   .ux4g-sm-d-block { display: block !important; }
   .ux4g-sm-d-grid { display: grid !important; }
   .ux4g-sm-d-table { display: table !important; }
   .ux4g-sm-d-table-row { display: table-row !important; }
   .ux4g-sm-d-table-cell { display: table-cell !important; }
   .ux4g-sm-d-flex { display: flex !important; }
   .ux4g-sm-d-inline-flex { display: inline-flex !important; }
}

/* Print Utilities */
@media print {
   .ux4g-d-print-none { display: none !important; }
   .ux4g-d-print-inline { display: inline !important; }
   .ux4g-d-print-inline-block { display: inline-block !important; }
   .ux4g-d-print-block { display: block !important; }
   .ux4g-d-print-grid { display: grid !important; }
   .ux4g-d-print-table { display: table !important; }
   .ux4g-d-print-table-row { display: table-row !important; }
   .ux4g-d-print-table-cell { display: table-cell !important; }
   .ux4g-d-print-flex { display: flex !important; }
   .ux4g-d-print-inline-flex { display: inline-flex !important; }
}


/* 3. FLEXBOX & GRID */
/* =========================================
   FLEX DIRECTION
========================================= */
.ux4g-flex-row { flex-direction: row; }
.ux4g-flex-col, .ux4g-flex-column { flex-direction: column; }
.ux4g-flex-row-reverse { flex-direction: row-reverse; }
.ux4g-flex-col-reverse, .ux4g-flex-column-reverse { flex-direction: column-reverse; }

/* =========================================
   FLEX (SHORTHANDS)
========================================= */
.ux4g-flex-1 { flex: 1; }
.ux4g-flex-2 { flex: 2; }
.ux4g-flex-3 { flex: 3; }
.ux4g-flex-auto { flex: 1 1 auto; }
.ux4g-flex-none { flex: none; }

/* =========================================
   FLEX WRAP
========================================= */
.ux4g-wrap { flex-wrap: wrap; }
.ux4g-nowrap { flex-wrap: nowrap; }
.ux4g-wrap-reverse { flex-wrap: wrap-reverse; }
.ux4g-flex-fill { flex: 1 1 auto; }

/* =========================================
   FLEX GROW / SHRINK
========================================= */
.ux4g-grow { flex-grow: 1; }
.ux4g-grow-0 { flex-grow: 0; }
.ux4g-shrink { flex-shrink: 1; }
.ux4g-shrink-0 { flex-shrink: 0; }
/* =========================================
   RESPONSIVE FLEX UTILITIES
   Summary: Direction, Wrap, Fill, Grow/Shrink
   Approach: Desktop-first
   Breakpoints:
     Desktop (base): 1024px – 1439px (no query)
     Desktop LG (lg): ≥ 1440px
     Tablet (md): ≤ 1023px
     Mobile (sm): ≤ 767px
========================================= */

/* ================= LG 1440px – 1920px (Desktop LG) ================= */
@media (min-width: 1440px) {
    /* Direction */
    .ux4g-lg-flex-row { flex-direction: row; }
    .ux4g-lg-flex-col { flex-direction: column; }
    .ux4g-lg-flex-row-reverse { flex-direction: row-reverse; }
    .ux4g-lg-flex-col-reverse { flex-direction: column-reverse; }

    /* Wrap */
    .ux4g-lg-wrap { flex-wrap: wrap; }
    .ux4g-lg-nowrap { flex-wrap: nowrap; }
    .ux4g-lg-wrap-reverse { flex-wrap: wrap-reverse; }

    /* Fill */
    .ux4g-lg-flex-fill { flex: 1 1 auto; }

    /* Grow / Shrink */
    .ux4g-lg-grow { flex-grow: 1; }
    .ux4g-lg-grow-0 { flex-grow: 0; }
    .ux4g-lg-shrink { flex-shrink: 1; }
    .ux4g-lg-shrink-0 { flex-shrink: 0; }
}

/* ================= MD 768px – 1023px (Tablet) ================= */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Direction */
    .ux4g-md-flex-row { flex-direction: row; }
    .ux4g-md-flex-col { flex-direction: column; }
    .ux4g-md-flex-row-reverse { flex-direction: row-reverse; }
    .ux4g-md-flex-col-reverse { flex-direction: column-reverse; }

    /* Wrap */
    .ux4g-md-wrap { flex-wrap: wrap; }
    .ux4g-md-nowrap { flex-wrap: nowrap; }
    .ux4g-md-wrap-reverse { flex-wrap: wrap-reverse; }

    /* Fill */
    .ux4g-md-flex-fill { flex: 1 1 auto; }

    /* Grow / Shrink */
    .ux4g-md-grow { flex-grow: 1; }
    .ux4g-md-grow-0 { flex-grow: 0; }
    .ux4g-md-shrink { flex-shrink: 1; }
    .ux4g-md-shrink-0 { flex-shrink: 0; }
}

/* ================= SM 320px – 767px (Mobile) ================= */
@media (min-width: 320px) and (max-width: 767px) {
    /* Direction */
    .ux4g-sm-flex-row { flex-direction: row; }
    .ux4g-sm-flex-col { flex-direction: column; }
    .ux4g-sm-flex-row-reverse { flex-direction: row-reverse; }
    .ux4g-sm-flex-col-reverse { flex-direction: column-reverse; }

    /* Wrap */
    .ux4g-sm-wrap { flex-wrap: wrap; }
    .ux4g-sm-nowrap { flex-wrap: nowrap; }
    .ux4g-sm-wrap-reverse { flex-wrap: wrap-reverse; }

    /* Fill */
    .ux4g-sm-flex-fill { flex: 1 1 auto; }

    /* Grow / Shrink */
    .ux4g-sm-grow { flex-grow: 1; }
    .ux4g-sm-grow-0 { flex-grow: 0; }
    .ux4g-sm-shrink { flex-shrink: 1; }
    .ux4g-sm-shrink-0 { flex-shrink: 0; }
}

/* =========================================
   ALIGN UTILITIES
   Controls alignment of flex items.
   1. Align Items (ai)
   2. Align Self (as)
   3. Align Content (ac)

   Breakpoints:
     Desktop (base): 1024px – 1439px (no media query)
     Desktop LG (lg): ≥ 1440px
     Tablet (md): ≤ 1023px
     Mobile (sm): ≤ 767px
========================================= */

/* ================= BASE (Desktop 1024px – 1439px) ================= */

/* 1.0 ALIGN ITEMS */
.ux4g-ai-start { align-items: flex-start; }
.ux4g-ai-center { align-items: center; }
.ux4g-ai-end { align-items: flex-end; }
.ux4g-ai-stretch { align-items: stretch; }
.ux4g-ai-baseline { align-items: baseline; }

/* 2.0 ALIGN SELF */
.ux4g-as-start { align-self: flex-start; }
.ux4g-as-end { align-self: flex-end; }
.ux4g-as-center { align-self: center; }
.ux4g-as-baseline { align-self: baseline; }
.ux4g-as-stretch { align-self: stretch; }

/* 3.0 ALIGN CONTENT */
.ux4g-ac-start { align-content: flex-start; }
.ux4g-ac-end { align-content: flex-end; }
.ux4g-ac-center { align-content: center; }
.ux4g-ac-between { align-content: space-between; }
.ux4g-ac-around { align-content: space-around; }
.ux4g-ac-stretch { align-content: stretch; }


/* ================= RESPONSIVE ================= */

/* ================= LG ≥ 1440px (Desktop LG) ================= */
@media (min-width: 1440px) {
  /* ALIGN ITEMS */
  .ux4g-lg-ai-start { align-items: flex-start; }
  .ux4g-lg-ai-end { align-items: flex-end; }
  .ux4g-lg-ai-center { align-items: center; }
  .ux4g-lg-ai-baseline { align-items: baseline; }
  .ux4g-lg-ai-stretch { align-items: stretch; }

  /* ALIGN SELF */
  .ux4g-lg-as-start { align-self: flex-start; }
  .ux4g-lg-as-end { align-self: flex-end; }
  .ux4g-lg-as-center { align-self: center; }
  .ux4g-lg-as-baseline { align-self: baseline; }
  .ux4g-lg-as-stretch { align-self: stretch; }

  /* ALIGN CONTENT */
  .ux4g-lg-ac-start { align-content: flex-start; }
  .ux4g-lg-ac-end { align-content: flex-end; }
  .ux4g-lg-ac-center { align-content: center; }
  .ux4g-lg-ac-between { align-content: space-between; }
  .ux4g-lg-ac-around { align-content: space-around; }
  .ux4g-lg-ac-stretch { align-content: stretch; }
}

/* ================= MD ≤ 1023px (Tablet) ================= */
@media (min-width: 768px) and (max-width: 1023px) {
  /* ALIGN ITEMS */
  .ux4g-md-ai-start { align-items: flex-start; }
  .ux4g-md-ai-end { align-items: flex-end; }
  .ux4g-md-ai-center { align-items: center; }
  .ux4g-md-ai-baseline { align-items: baseline; }
  .ux4g-md-ai-stretch { align-items: stretch; }

  /* ALIGN SELF */
  .ux4g-md-as-start { align-self: flex-start; }
  .ux4g-md-as-end { align-self: flex-end; }
  .ux4g-md-as-center { align-self: center; }
  .ux4g-md-as-baseline { align-self: baseline; }
  .ux4g-md-as-stretch { align-self: stretch; }

  /* ALIGN CONTENT */
  .ux4g-md-ac-start { align-content: flex-start; }
  .ux4g-md-ac-end { align-content: flex-end; }
  .ux4g-md-ac-center { align-content: center; }
  .ux4g-md-ac-between { align-content: space-between; }
  .ux4g-md-ac-around { align-content: space-around; }
  .ux4g-md-ac-stretch { align-content: stretch; }
}

/* ================= SM ≤ 767px (Mobile) ================= */
@media (min-width: 320px) and (max-width: 767px) {
  /* ALIGN ITEMS */
  .ux4g-sm-ai-start { align-items: flex-start; }
  .ux4g-sm-ai-end { align-items: flex-end; }
  .ux4g-sm-ai-center { align-items: center; }
  .ux4g-sm-ai-baseline { align-items: baseline; }
  .ux4g-sm-ai-stretch { align-items: stretch; }

  /* ALIGN SELF */
  .ux4g-sm-as-start { align-self: flex-start; }
  .ux4g-sm-as-end { align-self: flex-end; }
  .ux4g-sm-as-center { align-self: center; }
  .ux4g-sm-as-baseline { align-self: baseline; }
  .ux4g-sm-as-stretch { align-self: stretch; }

  /* ALIGN CONTENT */
  .ux4g-sm-ac-start { align-content: flex-start; }
  .ux4g-sm-ac-end { align-content: flex-end; }
  .ux4g-sm-ac-center { align-content: center; }
  .ux4g-sm-ac-between { align-content: space-between; }
  .ux4g-sm-ac-around { align-content: space-around; }
  .ux4g-sm-ac-stretch { align-content: stretch; }
}

/* =========================================
   JUSTIFY UTILITIES
   Controls justification of flex/grid items.
   1. Justify Content (jc)
   2. Justify Items (ji)
   3. Justify Self (js)
   Approach: Desktop-first
   Breakpoints:
     Desktop (base): 1024px – 1439px (no query)
     Desktop LG (lg): ≥ 1440px
     Tablet (md): ≤ 1023px
     Mobile (sm): ≤ 767px
========================================= */

/* 1.0 JUSTIFY CONTENT */
.ux4g-jc-start { justify-content: flex-start; }
.ux4g-jc-end { justify-content: flex-end; }
.ux4g-jc-center { justify-content: center; }
.ux4g-jc-between { justify-content: space-between; }
.ux4g-jc-around { justify-content: space-around; }
.ux4g-jc-evenly { justify-content: space-evenly; }

/* 2.0 JUSTIFY ITEMS */
.ux4g-ji-start { justify-items: start; }
.ux4g-ji-end { justify-items: end; }
.ux4g-ji-center { justify-items: center; }
.ux4g-ji-stretch { justify-items: stretch; }
.ux4g-ji-normal { justify-items: normal; }
.ux4g-ji-center-safe { justify-items: safe center; }
.ux4g-ji-end-safe { justify-items: safe end; }

/* 3.0 JUSTIFY SELF */
.ux4g-js-auto { justify-self: auto; }
.ux4g-js-start { justify-self: start; }
.ux4g-js-end { justify-self: end; }
.ux4g-js-center { justify-self: center; }
.ux4g-js-stretch { justify-self: stretch; }
.ux4g-js-center-safe { justify-self: safe center; }
.ux4g-js-end-safe { justify-self: safe end; }


/* ================= RESPONSIVE ================= */

/* ================= LG 1440px – 1920px (Desktop LG) ================= */
@media (min-width: 1440px) {
  .ux4g-lg-jc-start { justify-content: flex-start; }
  .ux4g-lg-jc-end { justify-content: flex-end; }
  .ux4g-lg-jc-center { justify-content: center; }
  .ux4g-lg-jc-between { justify-content: space-between; }
  .ux4g-lg-jc-around { justify-content: space-around; }
  .ux4g-lg-jc-evenly { justify-content: space-evenly; }

  .ux4g-lg-ji-start { justify-items: start; }
  .ux4g-lg-ji-end { justify-items: end; }
  .ux4g-lg-ji-center { justify-items: center; }
  .ux4g-lg-ji-stretch { justify-items: stretch; }

  .ux4g-lg-js-start { justify-self: start; }
  .ux4g-lg-js-end { justify-self: end; }
  .ux4g-lg-js-center { justify-self: center; }
  .ux4g-lg-js-stretch { justify-self: stretch; }
}

/* ================= MD 768px – 1023px (Tablet) ================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .ux4g-md-jc-start { justify-content: flex-start; }
  .ux4g-md-jc-end { justify-content: flex-end; }
  .ux4g-md-jc-center { justify-content: center; }
  .ux4g-md-jc-between { justify-content: space-between; }
  .ux4g-md-jc-around { justify-content: space-around; }
  .ux4g-md-jc-evenly { justify-content: space-evenly; }

  .ux4g-md-ji-start { justify-items: start; }
  .ux4g-md-ji-end { justify-items: end; }
  .ux4g-md-ji-center { justify-items: center; }
  .ux4g-md-ji-stretch { justify-items: stretch; }

  .ux4g-md-js-start { justify-self: start; }
  .ux4g-md-js-end { justify-self: end; }
  .ux4g-md-js-center { justify-self: center; }
  .ux4g-md-js-stretch { justify-self: stretch; }
}

/* ================= SM 320px – 767px (Mobile) ================= */
@media (min-width: 320px) and (max-width: 767px) {
  .ux4g-sm-jc-start { justify-content: flex-start; }
  .ux4g-sm-jc-end { justify-content: flex-end; }
  .ux4g-sm-jc-center { justify-content: center; }
  .ux4g-sm-jc-between { justify-content: space-between; }
  .ux4g-sm-jc-around { justify-content: space-around; }
  .ux4g-sm-jc-evenly { justify-content: space-evenly; }

  .ux4g-sm-ji-start { justify-items: start; }
  .ux4g-sm-ji-end { justify-items: end; }
  .ux4g-sm-ji-center { justify-items: center; }
  .ux4g-sm-ji-stretch { justify-items: stretch; }

  .ux4g-sm-js-start { justify-self: start; }
  .ux4g-sm-js-end { justify-self: end; }
  .ux4g-sm-js-center { justify-self: center; }
  .ux4g-sm-js-stretch { justify-self: stretch; }
}

/* =========================================
   ORDER UTILITIES
   Controls the visual order of flex items.
   Range: 0-5, first (-1), last (999)
   Approach: Desktop-first
   Breakpoints:
     Desktop (base): 1024px – 1439px (no query)
     Desktop LG (lg): ≥ 1440px
     Tablet (md): ≤ 1023px
     Mobile (sm): ≤ 767px
========================================= */

.ux4g-order-first { order: -1; }
.ux4g-order-last { order: 999; }
.ux4g-order-0 { order: 0; }
.ux4g-order-1 { order: 1; }
.ux4g-order-2 { order: 2; }
.ux4g-order-3 { order: 3; }
.ux4g-order-4 { order: 4; }
.ux4g-order-5 { order: 5; }

/* ================= LG 1440px – 1920px (Desktop LG) ================= */
@media (min-width: 1440px) {
  .ux4g-lg-order-first { order: -1; }
  .ux4g-lg-order-last { order: 999; }
  .ux4g-lg-order-0 { order: 0; }
  .ux4g-lg-order-1 { order: 1; }
  .ux4g-lg-order-2 { order: 2; }
  .ux4g-lg-order-3 { order: 3; }
  .ux4g-lg-order-4 { order: 4; }
  .ux4g-lg-order-5 { order: 5; }
}

/* ================= MD 768px – 1023px (Tablet) ================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .ux4g-md-order-first { order: -1; }
  .ux4g-md-order-last { order: 999; }
  .ux4g-md-order-0 { order: 0; }
  .ux4g-md-order-1 { order: 1; }
  .ux4g-md-order-2 { order: 2; }
  .ux4g-md-order-3 { order: 3; }
  .ux4g-md-order-4 { order: 4; }
  .ux4g-md-order-5 { order: 5; }
}

/* ================= SM 320px – 767px (Mobile) ================= */
@media (min-width: 320px) and (max-width: 767px) {
  .ux4g-sm-order-first { order: -1; }
  .ux4g-sm-order-last { order: 999; }
  .ux4g-sm-order-0 { order: 0; }
  .ux4g-sm-order-1 { order: 1; }
  .ux4g-sm-order-2 { order: 2; }
  .ux4g-sm-order-3 { order: 3; }
  .ux4g-sm-order-4 { order: 4; }
  .ux4g-sm-order-5 { order: 5; }
}


/* 4. VISUAL EFFECTS */
[class^="ux4g-bg-"],
[class*=" ux4g-bg-"] {
  background-color: var(--ux4g-bg-current, var(--ux4g-bg-neutral-elevated));
  color: var(--ux4g-text-current, var(--ux4g-text-neutral-primary));
}

/* NEUTRAL */
.ux4g-bg-neutral-elevated { --ux4g-bg-current: var(--ux4g-bg-neutral-elevated); }
.ux4g-bg-neutral          { --ux4g-bg-current: var(--ux4g-bg-neutral); }
.ux4g-bg-neutral-soft     { --ux4g-bg-current: var(--ux4g-bg-neutral-soft); }
.ux4g-bg-neutral-subtle   { --ux4g-bg-current: var(--ux4g-bg-neutral-subtle); }
.ux4g-bg-neutral-emphasis { --ux4g-bg-current: var(--ux4g-bg-neutral-emphasis); }
.ux4g-bg-neutral-strong   { 
  --ux4g-bg-current: var(--ux4g-bg-neutral-strong);
  --ux4g-text-current: var(--ux4g-text-neutral-primary);
}
.ux4g-bg-neutral-stronger {
  --ux4g-bg-current: var(--ux4g-bg-neutral-stronger);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}
.ux4g-bg-neutral-disabled { --ux4g-bg-current: var(--ux4g-bg-neutral-disabled); }

/* PRIMARY */
.ux4g-bg-primary          { --ux4g-bg-current: var(--ux4g-bg-primary); }
.ux4g-bg-primary-soft     { --ux4g-bg-current: var(--ux4g-bg-primary-soft); }
.ux4g-bg-primary-subtle   { --ux4g-bg-current: var(--ux4g-bg-primary-subtle); }
.ux4g-bg-primary-emphasis { --ux4g-bg-current: var(--ux4g-bg-primary-emphasis); }
.ux4g-bg-primary-strong   { 
  --ux4g-bg-current: var(--ux4g-bg-primary-strong);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}
.ux4g-bg-primary-strong-hover { 
  --ux4g-bg-current: var(--ux4g-bg-primary-strong-hover);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}
.ux4g-bg-primary-stronger { 
  --ux4g-bg-current: var(--ux4g-bg-primary-stronger);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}
.ux4g-bg-primary-stronger-hover { 
  --ux4g-bg-current: var(--ux4g-bg-primary-stronger-hover);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}

/* SECONDARY */
.ux4g-bg-secondary          { --ux4g-bg-current: var(--ux4g-bg-secondary); }
.ux4g-bg-secondary-soft     { --ux4g-bg-current: var(--ux4g-bg-secondary-soft); }
.ux4g-bg-secondary-subtle   { --ux4g-bg-current: var(--ux4g-bg-secondary-subtle); }
.ux4g-bg-secondary-emphasis { --ux4g-bg-current: var(--ux4g-bg-secondary-emphasis); }
.ux4g-bg-secondary-strong   { 
  --ux4g-bg-current: var(--ux4g-bg-secondary-strong);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}

/* TERTIARY */
.ux4g-bg-tertiary          { --ux4g-bg-current: var(--ux4g-bg-tertiary); }
.ux4g-bg-tertiary-soft     { --ux4g-bg-current: var(--ux4g-bg-tertiary-soft); }
.ux4g-bg-tertiary-subtle   { --ux4g-bg-current: var(--ux4g-bg-tertiary-subtle); }
.ux4g-bg-tertiary-emphasis { --ux4g-bg-current: var(--ux4g-bg-tertiary-emphasis); }
.ux4g-bg-tertiary-strong   { 
  --ux4g-bg-current: var(--ux4g-bg-tertiary-strong);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}

/* SUCCESS */
.ux4g-bg-success          { --ux4g-bg-current: var(--ux4g-bg-success); }
.ux4g-bg-success-soft     { --ux4g-bg-current: var(--ux4g-bg-success-soft); }
.ux4g-bg-success-subtle   { --ux4g-bg-current: var(--ux4g-bg-success-subtle); }
.ux4g-bg-success-emphasis { --ux4g-bg-current: var(--ux4g-bg-success-emphasis); }
.ux4g-bg-success-strong   { 
  --ux4g-bg-current: var(--ux4g-bg-success-strong);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}

/* ERROR */
.ux4g-bg-error          { --ux4g-bg-current: var(--ux4g-bg-error); }
.ux4g-bg-error-soft     { --ux4g-bg-current: var(--ux4g-bg-error-soft); }
.ux4g-bg-error-subtle   { --ux4g-bg-current: var(--ux4g-bg-error-subtle); }
.ux4g-bg-error-emphasis { --ux4g-bg-current: var(--ux4g-bg-error-emphasis); }
.ux4g-bg-error-strong   { 
  --ux4g-bg-current: var(--ux4g-bg-error-strong);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}
.ux4g-bg-error-strong-hover { 
  --ux4g-bg-current: var(--ux4g-bg-error-strong-hover);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}
.ux4g-bg-error-stronger { 
  --ux4g-bg-current: var(--ux4g-bg-error-stronger);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}

/* WARNING */
.ux4g-bg-warning          { --ux4g-bg-current: var(--ux4g-bg-warning); }
.ux4g-bg-warning-soft     { --ux4g-bg-current: var(--ux4g-bg-warning-soft); }
.ux4g-bg-warning-subtle   { --ux4g-bg-current: var(--ux4g-bg-warning-subtle); }
.ux4g-bg-warning-emphasis { --ux4g-bg-current: var(--ux4g-bg-warning-emphasis); }
.ux4g-bg-warning-strong   { 
  --ux4g-bg-current: var(--ux4g-bg-warning-strong);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}

/* INFO */
.ux4g-bg-info          { --ux4g-bg-current: var(--ux4g-bg-info); }
.ux4g-bg-info-soft     { --ux4g-bg-current: var(--ux4g-bg-info-soft); }
.ux4g-bg-info-subtle   { --ux4g-bg-current: var(--ux4g-bg-info-subtle); }
.ux4g-bg-info-emphasis { --ux4g-bg-current: var(--ux4g-bg-info-emphasis); }
.ux4g-bg-info-strong   { 
  --ux4g-bg-current: var(--ux4g-bg-info-strong);
  --ux4g-text-current: var(--ux4g-text-neutral-inverse);
}

/* OTHER */
.ux4g-control-bg-default { --ux4g-bg-current: var(--ux4g-control-bg-default); }
.ux4g-bg-overlay         { --ux4g-bg-current: var(--ux4g-bg-overlay); }

/* UTILITY */
.ux4g-bg-none {
  background-color: transparent !important;
}
/* Base Border Engine */
.ux4g-border { border-style: solid; border-width: var(--ux4g-border-width-sm); border-color: var(--ux4g-border-color-neutral-default); }
.ux4g-border-bold { border-style: solid; border-width: var(--ux4g-border-width-md); border-color: var(--ux4g-border-color-neutral-default); }

/* Border Width */
.ux4g-border-none { border-width: var(--ux4g-border-width-none); }
.ux4g-b-0 { border: 0; }

/* Individual Sides (Token + RTL Safe) */
.ux4g-bt { border-top: var(--ux4g-border-width-sm) solid var(--ux4g-border-current, var(--ux4g-border-color-neutral-default)); }
.ux4g-br { border-inline-end: var(--ux4g-border-width-sm) solid var(--ux4g-border-current, var(--ux4g-border-color-neutral-default)); }
.ux4g-bb { border-bottom: var(--ux4g-border-width-sm) solid var(--ux4g-border-current, var(--ux4g-border-color-neutral-default)); }
.ux4g-bl { border-inline-start: var(--ux4g-border-width-sm) solid var(--ux4g-border-current, var(--ux4g-border-color-neutral-default)); }

/* Border Style */
.ux4g-border-dashed { border-style: dashed; }
.ux4g-border-dotted { border-style: dotted; }

/* Remove Border (Atomic Reset) */
.ux4g-bt-0 { border-top: 0; }
.ux4g-br-0 { border-inline-end: 0; }
.ux4g-bb-0 { border-bottom: 0; }
.ux4g-bl-0 { border-inline-start: 0; }

/* Border Color Tokens (Engine Setters) */
/* These update both the variable (for side-support) and direct property (for all-side support) */
.ux4g-border-neutral-subtle { 
  --ux4g-border-current: var(--ux4g-border-color-neutral-subtle); 
  border-color: var(--ux4g-border-color-neutral-subtle);
}
.ux4g-border-neutral-strong { 
  --ux4g-border-current: var(--ux4g-border-color-neutral-strong); 
  border-color: var(--ux4g-border-color-neutral-strong);
}
.ux4g-border-primary { 
  --ux4g-border-current: var(--ux4g-border-color-primary-default); 
  border-color: var(--ux4g-border-color-primary-default);
}
.ux4g-border-primary-strong { 
  --ux4g-border-current: var(--ux4g-border-color-primary-strong); 
  border-color: var(--ux4g-border-color-primary-strong);
}
.ux4g-border-secondary { 
  --ux4g-border-current: var(--ux4g-border-color-secondary-default); 
  border-color: var(--ux4g-border-color-secondary-default);
}
.ux4g-border-tertiary { 
  --ux4g-border-current: var(--ux4g-border-color-tertiary-default); 
  border-color: var(--ux4g-border-color-tertiary-default);
}
.ux4g-border-success { 
  --ux4g-border-current: var(--ux4g-border-color-success-default); 
  border-color: var(--ux4g-border-color-success-default);
}
.ux4g-border-success-strong { 
  --ux4g-border-current: var(--ux4g-border-color-success-strong); 
  border-color: var(--ux4g-border-color-success-strong);
}
.ux4g-border-info { 
  --ux4g-border-current: var(--ux4g-border-color-info-default); 
  border-color: var(--ux4g-border-color-info-default);
}
.ux4g-border-info-strong { 
  --ux4g-border-current: var(--ux4g-border-color-info-strong); 
  border-color: var(--ux4g-border-color-info-strong);
}
.ux4g-border-error { 
  --ux4g-border-current: var(--ux4g-border-color-error-default); 
  border-color: var(--ux4g-border-color-error-default);
}
.ux4g-border-error-strong { 
  --ux4g-border-current: var(--ux4g-border-color-error-strong); 
  border-color: var(--ux4g-border-color-error-strong);
}
.ux4g-border-warning { 
  --ux4g-border-current: var(--ux4g-border-color-warning-default); 
  border-color: var(--ux4g-border-color-warning-default);
}
.ux4g-border-warning-strong { 
  --ux4g-border-current: var(--ux4g-border-color-warning-strong); 
  border-color: var(--ux4g-border-color-warning-strong);
}
.ux4g-border-neutral-elevated { 
  --ux4g-border-current: var(--ux4g-border-color-neutral-elevated); 
  border-color: var(--ux4g-border-color-neutral-elevated);
}
.ux4g-border-control { 
  --ux4g-border-current: var(--ux4g-control-border-default); 
  border-color: var(--ux4g-control-border-default);
}

/* Border Radius - All */
.ux4g-radius-none { border-radius: var(--ux4g-radius-0) !important; }
.ux4g-radius-xs   { border-radius: var(--ux4g-radius-xs, var(--ux4g-radius-1, 2px)) !important; }
.ux4g-radius-s    { border-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important; }
.ux4g-radius-m    { border-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important; }
.ux4g-radius-l    { border-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important; }
.ux4g-radius-xl   { border-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important; }
.ux4g-radius-2xl  { border-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important; }
.ux4g-radius-full { border-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important; }

/* Top Corners (Angle Radius) */
.ux4g-radius-top-none {
  border-top-left-radius: var(--ux4g-radius-0) !important;
  border-top-right-radius: var(--ux4g-radius-0) !important;
}
.ux4g-radius-top-s {
  border-top-left-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important;
  border-top-right-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important;
}
.ux4g-radius-top-m {
  border-top-left-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important;
  border-top-right-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important;
}
.ux4g-radius-top-l {
  border-top-left-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important;
  border-top-right-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important;
}
.ux4g-radius-top-xl {
  border-top-left-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important;
  border-top-right-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important;
}
.ux4g-radius-top-2xl {
  border-top-left-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important;
  border-top-right-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important;
}
.ux4g-radius-top-full {
  border-top-left-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important;
  border-top-right-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important;
}

/* Bottom Corners */
.ux4g-radius-bottom-none {
  border-bottom-left-radius: var(--ux4g-radius-0) !important;
  border-bottom-right-radius: var(--ux4g-radius-0) !important;
}
.ux4g-radius-bottom-s {
  border-bottom-left-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important;
  border-bottom-right-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important;
}
.ux4g-radius-bottom-m {
  border-bottom-left-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important;
  border-bottom-right-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important;
}
.ux4g-radius-bottom-l {
  border-bottom-left-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important;
  border-bottom-right-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important;
}
.ux4g-radius-bottom-xl {
  border-bottom-left-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important;
  border-bottom-right-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important;
}
.ux4g-radius-bottom-2xl {
  border-bottom-left-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important;
  border-bottom-right-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important;
}
.ux4g-radius-bottom-full {
  border-bottom-left-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important;
  border-bottom-right-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important;
}

/* Left Corners */
.ux4g-radius-left-none {
  border-top-left-radius: var(--ux4g-radius-0) !important;
  border-bottom-left-radius: var(--ux4g-radius-0) !important;
}
.ux4g-radius-left-s {
  border-top-left-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important;
  border-bottom-left-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important;
}
.ux4g-radius-left-m {
  border-top-left-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important;
  border-bottom-left-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important;
}
.ux4g-radius-left-l {
  border-top-left-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important;
  border-bottom-left-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important;
}
.ux4g-radius-left-xl {
  border-top-left-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important;
  border-bottom-left-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important;
}
.ux4g-radius-left-2xl {
  border-top-left-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important;
  border-bottom-left-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important;
}
.ux4g-radius-left-full {
  border-top-left-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important;
  border-bottom-left-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important;
}

/* Right Corners */
.ux4g-radius-right-none {
  border-top-right-radius: var(--ux4g-radius-0) !important;
  border-bottom-right-radius: var(--ux4g-radius-0) !important;
}
.ux4g-radius-right-s {
  border-top-right-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important;
  border-bottom-right-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important;
}
.ux4g-radius-right-m {
  border-top-right-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important;
  border-bottom-right-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important;
}
.ux4g-radius-right-l {
  border-top-right-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important;
  border-bottom-right-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important;
}
.ux4g-radius-right-xl {
  border-top-right-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important;
  border-bottom-right-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important;
}
.ux4g-radius-right-2xl {
  border-top-right-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important;
  border-bottom-right-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important;
}
.ux4g-radius-right-full {
  border-top-right-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important;
  border-bottom-right-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important;
}

/* Individual Angle (Most Powerful) */
.ux4g-radius-tl-s { border-top-left-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important; }
.ux4g-radius-tr-s { border-top-right-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important; }
.ux4g-radius-bl-s { border-bottom-left-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important; }
.ux4g-radius-br-s { border-bottom-right-radius: var(--ux4g-radius-sm, var(--ux4g-radius-2, 4px)) !important; }

.ux4g-radius-tl-m { border-top-left-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important; }
.ux4g-radius-tr-m { border-top-right-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important; }
.ux4g-radius-bl-m { border-bottom-left-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important; }
.ux4g-radius-br-m { border-bottom-right-radius: var(--ux4g-radius-md, var(--ux4g-radius-3, 8px)) !important; }

.ux4g-radius-tl-l { border-top-left-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important; }
.ux4g-radius-tr-l { border-top-right-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important; }
.ux4g-radius-bl-l { border-bottom-left-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important; }
.ux4g-radius-br-l { border-bottom-right-radius: var(--ux4g-radius-lg, var(--ux4g-radius-4, 12px)) !important; }

.ux4g-radius-tl-xl { border-top-left-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important; }
.ux4g-radius-tr-xl { border-top-right-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important; }
.ux4g-radius-bl-xl { border-bottom-left-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important; }
.ux4g-radius-br-xl { border-bottom-right-radius: var(--ux4g-radius-xl, var(--ux4g-radius-5, 16px)) !important; }

.ux4g-radius-tl-2xl { border-top-left-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important; }
.ux4g-radius-tr-2xl { border-top-right-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important; }
.ux4g-radius-bl-2xl { border-bottom-left-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important; }
.ux4g-radius-br-2xl { border-bottom-right-radius: var(--ux4g-radius-2xl, var(--ux4g-radius-6, 24px)) !important; }

.ux4g-radius-tl-full { border-top-left-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important; }
.ux4g-radius-tr-full { border-top-right-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important; }
.ux4g-radius-bl-full { border-bottom-left-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important; }
.ux4g-radius-br-full { border-bottom-right-radius: var(--ux4g-radius-full, var(--ux4g-radius-circular, 999px)) !important; }


/* Base Shadow Engine */
[class^="ux4g-shadow-"],
[class*=" ux4g-shadow-"] {
  box-shadow: var(--ux4g-shadow-current, none);
}

/* Shadow Levels (Combined) */
.ux4g-shadow-l0 { --ux4g-shadow-current: var(--ux4g-shadow-l0); }
.ux4g-shadow-l1 { --ux4g-shadow-current: var(--ux4g-shadow-l1); }
.ux4g-shadow-l2 { --ux4g-shadow-current: var(--ux4g-shadow-l2); }
.ux4g-shadow-l3 { --ux4g-shadow-current: var(--ux4g-shadow-l3); }
.ux4g-shadow-l4 { --ux4g-shadow-current: var(--ux4g-shadow-l4); }



/* Base Engine */
[class^="ux4g-opacity-"],
[class*=" ux4g-opacity-"] {
  opacity: var(--ux4g-opacity-current);
}

/* Opacity Scale */
.ux4g-opacity-0   { --ux4g-opacity-current: var(--ux4g-opacity-0); }
.ux4g-opacity-5   { --ux4g-opacity-current: var(--ux4g-opacity-5); }
.ux4g-opacity-10  { --ux4g-opacity-current: var(--ux4g-opacity-10); }
.ux4g-opacity-20  { --ux4g-opacity-current: var(--ux4g-opacity-20); }
.ux4g-opacity-25  { --ux4g-opacity-current: var(--ux4g-opacity-25); }
.ux4g-opacity-30  { --ux4g-opacity-current: var(--ux4g-opacity-30); }
.ux4g-opacity-40  { --ux4g-opacity-current: var(--ux4g-opacity-40); }
.ux4g-opacity-50  { --ux4g-opacity-current: var(--ux4g-opacity-50); }
.ux4g-opacity-60  { --ux4g-opacity-current: var(--ux4g-opacity-60); }
.ux4g-opacity-70  { --ux4g-opacity-current: var(--ux4g-opacity-70); }
.ux4g-opacity-75  { --ux4g-opacity-current: var(--ux4g-opacity-75); }
.ux4g-opacity-80  { --ux4g-opacity-current: var(--ux4g-opacity-80); }
.ux4g-opacity-90  { --ux4g-opacity-current: var(--ux4g-opacity-90); }
.ux4g-opacity-95  { --ux4g-opacity-current: var(--ux4g-opacity-95); }
.ux4g-opacity-100 { --ux4g-opacity-current: var(--ux4g-opacity-100); }

.ux4g-blur-0 { filter: blur(var(--ux4g-blur-none)); }
.ux4g-blur-1 { filter: blur(var(--ux4g-blur-subtle)); }
.ux4g-blur-2 { filter: blur(var(--ux4g-blur-soft)); }
.ux4g-blur-3 { filter: blur(var(--ux4g-blur-medium)); }
.ux4g-blur-4 { filter: blur(var(--ux4g-blur-strong)); }


/* 5. INTERACTION & EMBEDS */
.ux4g-appearance-none {
  appearance: none;
  -webkit-appearance: none;
}

.ux4g-cursor-pointer { cursor: pointer; }
.ux4g-cursor-not-allowed { cursor: not-allowed; }

.ux4g-pointer-events-none { pointer-events: none; }
.ux4g-pointer-events-auto { pointer-events: auto; }

.ux4g-select-none { user-select: none; }
.ux4g-select-text { user-select: text; }
.ux4g-select-all { user-select: all; }
.ux4g-select-auto { user-select: auto; }

.ux4g-resize-none { resize: none; }
.ux4g-resize-y { resize: vertical; }



 /* 8. ASPECT RATIO */
.ux4g-aspect-auto { aspect-ratio: auto; }
.ux4g-aspect-square { aspect-ratio: 1 / 1; }
.ux4g-aspect-video { aspect-ratio: 16 / 9; }




}