/*!
 * National Design System
 * Version: 1.0.0
 * License: MIT
 */
:root {
    --spacing-0: 0px;
    --spacing-0-5: 2px;
    --spacing-1: 4px;
    --spacing-1-5: 6px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    --spacing-32: 128px;
    --spacing-40: 160px;
    --spacing-48: 192px;
    --spacing-56: 224px;
    --spacing-64: 256px;
    --spacing-80: 320px;
    --spacing-96: 384px;
    --spacing-120: 480px;
    --spacing-140: 560px;
    --spacing-160: 640px;
    --spacing-180: 720px;
    --spacing-192: 768px;
    --spacing-256: 1024px;
    --spacing-320: 1280px;
    --spacing-360: 1440px;
    --spacing-400: 1600px;
    --spacing-480: 1920px;
    --radius-0: 0;
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-9999: 9999px;
    --radius-none: var(--radius-0);
    --radius-xs: var(--radius-2);
    --radius-sm: var(--radius-4);
    --radius-md: var(--radius-8);
    --radius-lg: var(--radius-16);
    --radius-xl: var(--radius-24);
    --radius-full: var(--radius-9999);
    --width-xxs: var(--spacing-80);
    --width-xs: var(--spacing-96);
    --width-sm: var(--spacing-120);
    --width-md: var(--spacing-140);
    --width-lg: var(--spacing-160);
    --width-xl: var(--spacing-192);
    --width-2xl: var(--spacing-256);
    --width-3xl: var(--spacing-320);
    --width-4xl: var(--spacing-360);
    --width-5xl: var(--spacing-400);
    --width-6xl: var(--spacing-480);
    --maxwidth-paragraph-max-width: var(--spacing-180);
    --tooltip-padding: var(--spacing-2);
    --tooltip-gap: var(--spacing-2);
    --tab-button-gap: var(--spacing-1);
    --notification-gap: var(--spacing-4);
    --notification-padding: var(--spacing-4);
    --notification-h-padding: var(--spacing-6);
    --notification-alert-v-padding: var(--spacing-2);
    --notification-alert-h-padding: var(--spacing-6);
    --notification-toast-v-padding: var(--spacing-4);
    --notification-toast-desktop-h-padding: var(--spacing-6);
    --notification-toast-mobile-h-padding: var(--spacing-4);
    --tab-horizontal-tab-md-button-v-padding: var(--spacing-3);
    --tab-horizontal-tab-md-button-h-padding: var(--spacing-4);
    --tab-horizontal-tab-sm-button-v-padding: var(--spacing-2);
    --tab-horizontal-tab-sm-button-h-padding: var(--spacing-3);
    --tab-vertical-tab-md-button-v-padding: var(--spacing-1-5);
    --tab-vertical-tab-md-button-h-padding: var(--spacing-3);
    --tab-vertical-tab-sm-button-v-padding: var(--spacing-0-5);
    --tab-vertical-tab-sm-button-h-padding: var(--spacing-1-5);
    --table-cell-gap: var(--spacing-2);
    --table-cell-v-padding: var(--spacing-2);
    --table-cell-h-padding: var(--spacing-4);
    --control-vertical-gap: var(--spacing-1);
    --control-title-error-gap: var(--spacing-4);
    --control-switch-error-icon-gap: var(--spacing-2);
    --control-radio-error-icon-gap: var(--spacing-4);
    --control-switch-description-padding: var(--spacing-16);
    --control-radio-description-padding: var(--spacing-12);
    --form-label-gap: var(--spacing-1);
    --form-field-label-gap: var(--spacing-2);
    --form-input-padding: var(--spacing-0);
    --form-input-gap: var(--spacing-0);
    --form-textarea-padding: var(--spacing-0);
    --form-textarea-gap: var(--spacing-0);
    --form-select-padding: var(--spacing-0);
    --form-select-gap: var(--spacing-0);
    --accordion-lg-header-padding: var(--spacing-4);
    --accordion-lg-header-gap: var(--spacing-4);
    --accordion-md-header-padding: var(--spacing-3);
    --accordion-md-header-gap: var(--spacing-12);
    --accordion-sm-header-padding: var(--spacing-2);
    --accordion-sm-header-gap: var(--spacing-2);
    --section-padding: var(--spacing-8);
    --section-gap: var(--spacing-8);
    --text-content-gap: var(--spacing-2);
    --icon-text-gap: var(--spacing-2);
    --buttons-lg-gap: var(--spacing-1);
    --model-padding: var(--spacing-6);
    --buttons-lg-padding: var(--spacing-4);
    --model-gap: var(--spacing-2);
    --buttons-md-gap: var(--spacing-1);
    --buttons-md-padding: var(--spacing-3);
    --buttons-sm-gap: var(--spacing-1);
    --buttons-sm-padding: var(--spacing-2);
    --model-content-bottom-padding: var(--spacing-4);
    --buttons-group-gap: var(--spacing-2);
    --button-menu-gap: var(--spacing-2);
    --button-menu-v-padding: var(--spacing-2);
    --button-menu-h-padding: var(--spacing-2);
    --link-md-gap: var(--spacing-2);
    --link-sm-gap: var(--spacing-1);
    --link-links-group-gap: var(--spacing-3);
    --progressindicator-progress-indicator-gap: var(--spacing-2);
    --progressindicator-progress-text-content-side-padding: var(--spacing-4);
    --pagination-item-sm-padding: var(--spacing-1);
    --pagination-item-md-padding: var(--spacing-1-5);
    --pagination-item-lg-padding: var(--spacing-2);
    --pagination-items-padding: var(--spacing-2);
    --card-lg-padding: var(--spacing-8);
    --card-lg-gap: var(--spacing-6);
    --card-md-padding: var(--spacing-6);
    --card-md-gap: var(--spacing-4);
    --card-sm-padding: var(--spacing-4);
    --card-sm-gap: var(--spacing-2);
    --components-card-radius: var(--spacing-4);
    --colors-base-white: #ffffff;
    --colors-base-black: #161616;
    --colors-primary-sa-flag-25: #f7fdf9;
    --colors-primary-sa-flag-50: #f3fcf6;
    --colors-primary-sa-flag-100: #dff6e7;
    --colors-primary-sa-flag-200: #b8eacb;
    --colors-primary-sa-flag-300: #88d8ad;
    --colors-primary-sa-flag-400: #54c08a;
    --colors-primary-sa-flag-500-alpha-10: #25935f19;
    --colors-primary-sa-flag-500: #25935f;
    --colors-primary-sa-flag-600-primary: #1b8354;
    --colors-primary-sa-flag-700: #166a45;
    --colors-primary-sa-flag-800: #14573a;
    --colors-primary-sa-flag-900: #104631;
    --colors-primary-sa-flag-950: #092a1e;
    --colors-secondary-gold-25: #fffef7;
    --colors-secondary-gold-50: #fffef2;
    --colors-secondary-gold-100: #fffce6;
    --colors-secondary-gold-200: #fcf3bd;
    --colors-secondary-gold-300: #fae996;
    --colors-secondary-gold-400: #f7d54d;
    --colors-secondary-gold-500: #f5bd02;
    --colors-secondary-gold-600-primary: #dba102;
    --colors-secondary-gold-700: #b87b02;
    --colors-secondary-gold-800: #945c01;
    --colors-secondary-gold-900: #6e3c00;
    --colors-secondary-gold-950: #472400;
    --colors-tertiary-lavendar-25: #fefcff;
    --colors-tertiary-lavendar-50: #f9f5fa;
    --colors-tertiary-lavendar-100: #f2e9f5;
    --colors-tertiary-lavendar-200: #e1cce8;
    --colors-tertiary-lavendar-300: #ccadd9;
    --colors-tertiary-lavendar-400: #a57bba;
    --colors-tertiary-lavendar-500-primary: #80519f;
    --colors-tertiary-lavendar-600: #6d428f;
    --colors-tertiary-lavendar-700: #532d75;
    --colors-tertiary-lavendar-800: #3d1d5e;
    --colors-tertiary-lavendar-900: #281047;
    --colors-tertiary-lavendar-950: #16072e;
    --colors-neutral-25: #fcfcfd;
    --colors-neutral-50: #f9fafb;
    --colors-neutral-100: #f3f4f6;
    --colors-neutral-200: #e5e7eb;
    --colors-neutral-300: #d2d6db;
    --colors-neutral-400: #9da4ae;
    --colors-neutral-500: #6c727e;
    --colors-neutral-600: #4d5761;
    --colors-neutral-700: #384250;
    --colors-neutral-800: #1f2a37;
    --colors-neutral-900: #111927;
    --colors-neutral-950: #0c111b;
    --colors-blue-25: #f5faff;
    --colors-blue-50: #eff8ff;
    --colors-blue-100: #d1e9ff;
    --colors-blue-200: #b2ddff;
    --colors-blue-300: #84caff;
    --colors-blue-400: #53b0fd;
    --colors-blue-500: #2e90fa;
    --colors-blue-600: #156fee;
    --colors-blue-700: #175cd3;
    --colors-blue-800: #1849a9;
    --colors-blue-900: #194084;
    --colors-blue-950: #102a56;
    --colors-green-25: #f6fef9;
    --colors-green-50: #ecfdf3;
    --colors-green-100: #dcfae6;
    --colors-green-200: #abefc6;
    --colors-green-300: #75dfa6;
    --colors-green-400: #47cd89;
    --colors-green-500: #17b169;
    --colors-green-600: #069454;
    --colors-green-700: #067647;
    --colors-green-800: #085d3a;
    --colors-green-900: #074c30;
    --colors-green-950: #053321;
    --colors-yellow-25: #fffcf5;
    --colors-yellow-50: #fffaeb;
    --colors-yellow-100: #fef0c7;
    --colors-yellow-200: #fedf89;
    --colors-yellow-300: #fec84b;
    --colors-yellow-400: #fdb022;
    --colors-yellow-500: #f79009;
    --colors-yellow-600: #dc6803;
    --colors-yellow-700: #b54707;
    --colors-yellow-800: #93370c;
    --colors-yellow-900: #7a2e0e;
    --colors-yellow-950: #4e1d09;
    --colors-red-25: #fffbfa;
    --colors-red-50: #fef3f2;
    --colors-red-100: #fee4e2;
    --colors-red-200: #fecdca;
    --colors-red-300: #fca19b;
    --colors-red-400: #f97066;
    --colors-red-500: #f04437;
    --colors-red-600: #d92c20;
    --colors-red-700: #b42318;
    --colors-red-800: #912018;
    --colors-red-900: #7a2619;
    --colors-red-950: #54150c;
    --colors-alpha-alpha-white-0: #ffffff00;
    --colors-alpha-alpha-white-10: #ffffff19;
    --colors-alpha-alpha-white-20: #ffffff33;
    --colors-alpha-alpha-white-30: #ffffff4c;
    --colors-alpha-alpha-white-40: #ffffff66;
    --colors-alpha-alpha-white-50: #ffffff7f;
    --colors-alpha-alpha-white-60: #ffffff99;
    --colors-alpha-alpha-white-70: #ffffffb2;
    --colors-alpha-alpha-white-80: #ffffffcc;
    --colors-alpha-alpha-white-90: #ffffffe5;
    --colors-alpha-alpha-white-100: #ffffff;
    --colors-alpha-alpha-black-0: #16161600;
    --colors-alpha-alpha-black-10: #16161619;
    --colors-alpha-alpha-black-20: #16161633;
    --colors-alpha-alpha-black-30: #1616164c;
    --colors-alpha-alpha-black-40: #16161666;
    --colors-alpha-alpha-black-50: #1616167f;
    --colors-alpha-alpha-black-60: #16161699;
    --colors-alpha-alpha-black-70: #161616b2;
    --colors-alpha-alpha-black-80: #161616cc;
    --colors-alpha-alpha-black-90: #161616e5;
    --colors-alpha-alpha-black-100: #161616;
    --colors-alpha-alpha-green-10: #1b835419;
    --colors-alpha-alpha-green-20: #1b835433;
    --colors-alpha-alpha-green-30: #1b83544c;
    --colors-alpha-alpha-green-40: #1b835466;
    --colors-alpha-alpha-green-50: #1b83547f;
    --colors-alpha-alpha-green-60: #1b835499;
    --colors-alpha-alpha-green-70: #1b8354b2;
    --colors-alpha-alpha-green-80: #1b8354cc;
    --colors-alpha-alpha-green-90: #1b8354e5;
    --colors-alpha-alpha-green-100: var(--colors-primary-sa-flag-600-primary);
    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
    --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
    --shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
    --shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
    --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
    --background-white: var(--colors-base-white);
    --background-body: var(--colors-neutral-50);
    --background-menu: var(--colors-base-white);
    --background-card: var(--colors-base-white);
    --background-surface-oncolor: var(--colors-base-white);
    --background-black: var(--colors-base-black);
    --background-brand-light: var(--colors-primary-sa-flag-50);
    --background-neutral-800: var(--colors-neutral-800);
    --background-neutral-400: var(--colors-neutral-400);
    --background-neutral-300: var(--colors-neutral-300);
    --background-neutral-200: var(--colors-neutral-200);
    --background-neutral-100: var(--colors-neutral-100);
    --background-neutral-50: var(--colors-neutral-50);
    --background-neutral-25: var(--colors-neutral-25);
    --background-primary: var(--colors-primary-sa-flag-600-primary);
    --background-primary-400: var(--colors-primary-sa-flag-400);
    --background-primary-200: var(--colors-primary-sa-flag-200);
    --background-primary-50: var(--colors-primary-sa-flag-50);
    --background-primary-25: var(--colors-primary-sa-flag-25);
    --background-secondary: var(--colors-secondary-gold-600-primary);
    --background-secondary-50: var(--colors-secondary-gold-50);
    --background-secondary-25: var(--colors-secondary-gold-25);
    --background-tertiary: var(--colors-tertiary-lavendar-600);
    --background-tertiary-50: var(--colors-tertiary-lavendar-50);
    --background-tertiary-25: var(--colors-tertiary-lavendar-25);
    --background-success: var(--colors-green-600);
    --background-success-light: var(--colors-green-50);
    --background-success-50: var(--colors-green-50);
    --background-success-25: var(--colors-green-25);
    --background-info: var(--colors-blue-600);
    --background-info-light: var(--colors-blue-50);
    --background-info-50: var(--colors-blue-50);
    --background-info-25: var(--colors-blue-25);
    --background-warning: var(--colors-yellow-600);
    --background-warning-light: var(--colors-yellow-50);
    --background-warning-50: var(--colors-yellow-50);
    --background-warning-25: var(--colors-yellow-25);
    --background-error: var(--colors-red-600);
    --background-error-light: var(--colors-red-50);
    --background-error-50: var(--colors-red-50);
    --background-error-25: var(--colors-red-25);
    --background-sa-flag: var(--colors-green-900);
    --background-sa-flag-50: var(--colors-green-50);
    --background-sa-flag-25: var(--colors-green-25);
    --background-notification-white: var(--colors-base-white);
    --text-default: var(--colors-base-black);
    --text-primary: var(--colors-primary-sa-flag-600-primary);
    --text-secondary: var(--colors-secondary-gold-600-primary);
    --text-tertiary: var(--colors-tertiary-lavendar-500-primary);
    --text-primary-sa-flag: var(--colors-primary-sa-flag-800);
    --text-display: var(--colors-neutral-800);
    --text-primary-paragraph: var(--colors-neutral-700);
    --text-secondary-paragraph: var(--colors-neutral-500);
    --text-oncolor-primary: var(--colors-base-white);
    --text-oncolor-secondary: var(--alpha-white-80);
    --text-oncolor-tertiary: var(--alpha-white-70);
    --text-success: var(--colors-green-700);
    --text-info: var(--colors-blue-700);
    --text-warning: var(--colors-yellow-700);
    --text-error: var(--colors-red-700);
    --text-primary-light: var(--colors-primary-sa-flag-300);
    --text-secondary-light: var(--colors-secondary-gold-300);
    --text-tertiary-light: var(--colors-tertiary-lavendar-300);
    --text-default-disabled: var(--colors-neutral-400);
    --text-default-oncolor-disabled: var(--alpha-white-40);
    --border-white: var(--colors-base-white);
    --border-white-40: var(--alpha-white-40);
    --button-background-black-default: var(--colors-neutral-950);
    --button-background-black-hovered: var(--colors-neutral-800);
    --button-background-black-pressed: var(--colors-neutral-600);
    --button-background-black-selected: var(--colors-neutral-700);
    --button-background-black-focused: var(--colors-neutral-950);
    --button-background-primary-default: var(--colors-primary-sa-flag-600-primary);
    --button-background-primary-hovered: var(--colors-primary-sa-flag-700);
    --button-background-primary-pressed: var(--colors-primary-sa-flag-900);
    --button-background-primary-selected: var(--colors-primary-sa-flag-800);
    --button-background-primary-focused: var(--colors-primary-sa-flag-600-primary);
    --button-background-neutral-default: var(--colors-neutral-100);
    --button-background-neutral-hovered: var(--colors-neutral-100);
    --button-background-neutral-pressed: var(--colors-neutral-200);
    --button-background-neutral-selected: var(--colors-neutral-200);
    --button-background-neutral-focused: var(--colors-neutral-100);
    --button-background-danger-primary-default: var(--colors-red-600);
    --button-background-danger-primary-hovered: var(--colors-red-700);
    --button-background-danger-primary-pressed: var(--colors-red-900);
    --button-background-danger-primary-selected: var(--colors-red-800);
    --button-background-danger-primary-focused: var(--colors-red-600);
    --button-label-danger-primary-default-oncolor: var(--colors-red-200);
    --button-label-danger-primary-hovered-oncolor: var(--colors-red-300);
    --button-label-danger-primary-pressed-oncolor: var(--colors-red-400);
    --button-background-danger-secondary-default: var(--colors-red-50);
    --button-background-danger-secondary-hovered: var(--colors-red-100);
    --button-background-danger-secondary-pressed: var(--colors-red-200);
    --button-background-danger-secondary-selected: var(--colors-red-50);
    --button-background-danger-secondary-focused: var(--colors-red-50);
    --button-background-oncolor-default: var(--colors-base-white);
    --button-background-oncolor-hovered: var(--alpha-white-80);
    --button-background-oncolor-pressed: var(--alpha-white-60);
    --button-background-oncolor-selected: var(--alpha-white-70);
    --button-background-oncolor-focused: var(--alpha-white-100);
    --button-background-transparent-default: var(--alpha-white-0);
    --button-background-transparent-hovered: var(--alpha-white-20);
    --button-background-transparent-pressed: var(--alpha-white-40);
    --button-background-transparent-selected: var(--alpha-white-30);
    --button-background-transparent-focused: var(--alpha-white-0);
    --button-background-disabled-on-color: var(--alpha-white-20);
    --button-label-transparent-hovered-on-color: var(--colors-primary-sa-flag-400);
    --border-black: var(--colors-base-black);
    --border-primary: var(--colors-primary-sa-flag-600-primary);
    --border-primary-light: var(--colors-primary-sa-flag-200);
    --border-secondary: var(--colors-secondary-gold-600-primary);
    --border-secondary-light: var(--colors-secondary-gold-200);
    --border-tertiary: var(--colors-tertiary-lavendar-500-primary);
    --border-tertiary-light: var(--colors-tertiary-lavendar-200);
    --border-neutral-primary: var(--colors-neutral-300);
    --border-neutral-secondary: var(--colors-neutral-200);
    --border-neutral-tertiary: var(--colors-neutral-100);
    --border-background-white: var(--colors-neutral-100);
    --border-background-neutral: var(--colors-neutral-300);
    --border-transparent-10: var(--alpha-white-10);
    --border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30);
    --border-success: var(--colors-green-700);
    --button-label-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
    --border-success-light: var(--colors-green-200);
    --border-info: var(--colors-blue-700);
    --button-label-transparent-selected-on-color: var(--colors-primary-sa-flag-400);
    --border-info-light: var(--colors-blue-200);
    --button-icon-transparent-hovered-on-color: var(--background-primary-400);
    --border-warning: var(--colors-yellow-700);
    --border-warning-light: var(--colors-yellow-200);
    --border-error: var(--colors-red-700);
    --button-icon-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
    --border-error-light: var(--colors-red-200);
    --button-icon-transparent-selected-on-color: var(--colors-primary-sa-flag-400);
    --border-disabled: var(--colors-neutral-400);
    --link-primary: var(--colors-primary-sa-flag-600-primary);
    --link-primary-hovered: var(--colors-primary-sa-flag-400);
    --link-primary-pressed: var(--colors-primary-sa-flag-300);
    --link-primary-focused: var(--colors-primary-sa-flag-600-primary);
    --link-primary-visited: var(--colors-primary-sa-flag-800);
    --link-icon-primary-hovered: var(--colors-primary-sa-flag-400);
    --link-icon-primary-pressed: var(--colors-primary-sa-flag-300);
    --link-icon-primary-focused: var(--colors-primary-sa-flag-600-primary);
    --link-icon-primary-visited: var(--colors-primary-sa-flag-800);
    --link-secondary: var(--colors-secondary-gold-600-primary);
    --link-secondary-hovered: var(--colors-secondary-gold-400);
    --link-secondary-pressed: var(--colors-secondary-gold-300);
    --link-secondary-focused: var(--colors-secondary-gold-600-primary);
    --link-secondary-visited: var(--colors-secondary-gold-900);
    --link-tertiary: var(--colors-tertiary-lavendar-500-primary);
    --link-tertiary-hovered: var(--colors-tertiary-lavendar-400);
    --link-tertiary-pressed: var(--colors-tertiary-lavendar-300);
    --link-tertiary-focused: var(--colors-tertiary-lavendar-500-primary);
    --link-tertiary-visited: var(--colors-tertiary-lavendar-800);
    --link-neutral: var(--colors-neutral-700);
    --link-neutral-hovered: var(--colors-neutral-500);
    --link-icon-neutral-hovered: var(--colors-neutral-500);
    --link-neutral-pressed: var(--colors-neutral-400);
    --link-icon-neutral-pressed: var(--colors-neutral-400);
    --link-neutral-focused: var(--colors-neutral-700);
    --link-icon-neutral-focused: var(--colors-neutral-700);
    --link-neutral-visited: var(--colors-neutral-600);
    --link-icon-neutral-visited: var(--colors-neutral-600);
    --link-danger: var(--colors-red-600);
    --link-danger-hovered: var(--colors-red-700);
    --link-icon-danger-hovered: var(--colors-red-700);
    --link-danger-pressed: var(--colors-red-900);
    --link-icon-danger-pressed: var(--colors-red-900);
    --link-danger-focused: var(--colors-red-600);
    --link-icon-danger-focused: var(--colors-red-600);
    --link-danger-visited: var(--colors-red-800);
    --link-icon-danger-visited: var(--colors-red-800);
    --link-oncolor: var(--colors-base-white);
    --link-oncolor-hovered: var(--colors-alpha-alpha-white-80);
    --link-icon-oncolor-hovered: var(--alpha-white-80);
    --link-oncolor-pressed: var(--colors-alpha-alpha-white-60);
    --link-icon-oncolor-pressed: var(--alpha-white-60);
    --link-oncolor-focused: var(--colors-base-white);
    --link-link-oncolor-focused: var(--colors-base-white);
    --link-oncolor-visited: var(--colors-alpha-alpha-white-90);
    --link-icon-oncolor-visited: var(--alpha-white-90);
    --link-oncolor-disabled: var(--colors-alpha-alpha-white-30);
    --link-icon-oncolor-disabled: var(--alpha-white-30);
    --icon-oncolor: var(--colors-base-white);
    --tag-background-neutral: var(--colors-neutral-600);
    --tag-background-neutral-light: var(--colors-neutral-50);
    --tag-background-on-color: var(--colors-alpha-alpha-white-20);
    --tag-text-neutral: var(--colors-neutral-800);
    --tag-text-success: var(--colors-green-800);
    --tag-text-info: var(--colors-blue-800);
    --tag-text-warning: var(--colors-yellow-800);
    --tag-text-error: var(--colors-red-800);
    --tag-icon-neutral: var(--colors-neutral-800);
    --tag-icon-success: var(--colors-green-800);
    --tag-icon-info: var(--colors-blue-800);
    --tag-icon-warning: var(--colors-yellow-800);
    --tag-icon-error: var(--colors-red-800);
    --tag-background-success: var(--colors-green-700);
    --tag-background-success-light: var(--colors-green-50);
    --tag-background-info: var(--colors-blue-600);
    --tag-background-info-light: var(--colors-blue-50);
    --tag-background-warning: var(--colors-yellow-700);
    --tag-background-warning-light: var(--colors-yellow-50);
    --tag-background-error: var(--colors-red-600);
    --tag-background-error-light: var(--colors-red-50);
    --tag-border-neutral: var(--colors-neutral-600);
    --tag-border-neutral-light: var(--colors-neutral-50);
    --tag-border-on-color: var(--colors-alpha-alpha-white-60);
    --tag-border-success: var(--colors-green-700);
    --tag-border-success-light: var(--colors-green-200);
    --tag-border-info: var(--colors-blue-700);
    --tag-border-info-light: var(--colors-blue-200);
    --tag-border-warning: var(--colors-yellow-700);
    --tag-border-warning-light: var(--colors-yellow-200);
    --tag-border-error: var(--colors-red-700);
    --tag-border-error-light: var(--colors-red-200);
    --tag-dot: var(--colors-alpha-alpha-white-60);
    --form-text-form-title: var(--text-default);
    --controls-control-primary: var(--alpha-white-0);
    --table-cell-border: var(--colors-neutral-300);
    --table-cell-border-inverse: var(--border-black);
    --table-text-head: var(--colors-neutral-700);
    --table-text-body: var(--text-default);
    --table-background-disabled: var(--background-disabled);
    --table-background-hover-selected: var(--colors-neutral-50);
    --table-background-header: var(--colors-neutral-100);
    --table-background-row: var(--colors-neutral-50);
    --controls-control-primary-checked: var(--colors-primary-sa-flag-600-primary);
    --controls-control-primary-hovered: var(--colors-primary-sa-flag-800);
    --controls-control-primary-pressed: var(--colors-primary-sa-flag-800);
    --controls-control-primary-focused: var(--colors-primary-sa-flag-600-primary);
    --controls-control-neutral-checked: var(--colors-neutral-950);
    --controls-control-neutral-hovered: var(--colors-neutral-600);
    --controls-control-neutral-pressed: var(--colors-neutral-600);
    --controls-control-neutral-focused: var(--colors-neutral-950);
    --controls-control-primary--readonly: var(--alpha-white-0);
    --controls-control-pressed: var(--colors-neutral-300);
    --controls-control-ripple-effect: var(--colors-neutral-200);
    --controls-control-border: var(--colors-neutral-500);
    --form-text-form-paragraph: var(--text-secondary-paragraph);
    --form-field-text-label: var(--text-default);
    --form-field-text-placeholder: var(--text-secondary-paragraph);
    --form-field-text-hovered: var(--text-default);
    --stepper-button-completed: var(--colors-primary-sa-flag-600-primary);
    --tooltip-background-light: var(--colors-base-white);
    --tooltip-text-heading-light: var(--text-display);
    --tooltip-text-paragraph-light: var(--text-primary-paragraph);
    --tooltip-background-dark: var(--colors-neutral-800);
    --tooltip-text-heading-dark: var(--colors-neutral-50);
    --tooltip-text-paragraph-dark: var(--colors-neutral-100);
    --alpha-white-0: var(--colors-alpha-alpha-white-0);
    --alpha-white-10: var(--colors-alpha-alpha-white-10);
    --alpha-white-20: var(--colors-alpha-alpha-white-20);
    --alpha-white-30: var(--colors-alpha-alpha-white-30);
    --alpha-white-40: var(--colors-alpha-alpha-white-40);
    --alpha-white-50: var(--colors-alpha-alpha-white-50);
    --alpha-white-60: var(--colors-alpha-alpha-white-60);
    --alpha-white-70: var(--colors-alpha-alpha-white-70);
    --alpha-white-80: var(--colors-alpha-alpha-white-80);
    --alpha-white-90: var(--colors-alpha-alpha-white-90);
    --alpha-white-100: var(--colors-alpha-alpha-white-100);
    --alpha-black-0: var(--colors-alpha-alpha-black-0);
    --alpha-black-10: var(--colors-alpha-alpha-black-10);
    --alpha-black-20: var(--colors-alpha-alpha-black-20);
    --alpha-black-30: var(--colors-alpha-alpha-black-30);
    --alpha-black-40: var(--colors-alpha-alpha-black-40);
    --alpha-black-50: var(--colors-alpha-alpha-black-50);
    --alpha-black-60: var(--colors-alpha-alpha-black-60);
    --alpha-black-70: var(--colors-alpha-alpha-black-70);
    --alpha-black-80: var(--colors-alpha-alpha-black-80);
    --alpha-black-90: var(--colors-alpha-alpha-black-90);
    --alpha-black-100: var(--colors-alpha-alpha-black-100);
    --background-disabled: var(--colors-neutral-200);
    --background-disabled-primary: var(--colors-primary-sa-flag-200);
    --background-inverse-disabled: var(--colors-neutral-100);
    --stepper-button-completed-hovered: var(--colors-primary-sa-flag-700);
    --stepper-button-current: var(--colors-primary-sa-flag-600-primary);
    --stepper-button-current-hovered: var(--colors-primary-sa-flag-700);
    --stepper-button-upcomming: var(--colors-neutral-300);
    --stepper-button-upcomming-hovered: var(--colors-neutral-400);
    --stepper-button-background: var(--colors-base-white);
    --stepper-text-primary: var(--text-display);
    --stepper-text-secondary: var(--text-primary-paragraph);
    --stepper-text-tertiary: var(--text-secondary-paragraph);
    --stepper-line-completed: var(--colors-primary-sa-flag-600-primary);
    --stepper-line-completed-hovered: var(--colors-primary-sa-flag-700);
    --stepper-line-current: var(--colors-neutral-300);
    --stepper-line-upcomming: var(--colors-neutral-300);
    --stepper-line-upcomming-hovered: var(--colors-neutral-400);
    --form-field-text-focused: var(--text-primary-paragraph);
    --form-field-text-pressed: var(--text-primary-paragraph);
    --form-field-text-filled: var(--text-default);
    --form-field-text-readonly: var(--text-default);
    --form-field-text-helper: var(--text-secondary-paragraph);
    --form-field-background-default: var(--background-card);
    --form-field-background-lighter: var(--colors-neutral-25);
    --form-field-background-darker: var(--colors-neutral-100);
    --form-field-background-pressed: var(--colors-neutral-100);
    --form-field-border-default: var(--colors-neutral-400);
    --form-field-border-hovered: var(--colors-neutral-700);
    --form-field-border-pressed: var(--colors-neutral-950);
    --form-field-border-error: var(--border-error);
    --form-option-background-hover: var(--colors-neutral-100);
    --form-option-background-pressed: var(--colors-neutral-200);
    --form-datecell-background-default: var(--colors-primary-sa-flag-600-primary);
    --form-datecell-background-hovered: var(--colors-primary-sa-flag-700);
    --icon-default: var(--colors-base-black);
    --form-datecell-background-pressed: var(--colors-primary-sa-flag-900);
    --form-datecell-background-focused: var(--colors-primary-sa-flag-600-primary);
    --form-datecell-today-background-default: var(--alpha-white-0);
    --form-datecell-today-background-hovered: var(--colors-neutral-200);
    --form-datecell-today-background-pressed: var(--colors-neutral-300);
    --icon-default-500: var(--colors-neutral-500);
    --form-datecell-today-background-focused: var(--alpha-white-0);
    --form-datecell-background-disabled: var(--colors-base-white);
    --form-datecell-background-600: var(--colors-primary-sa-flag-600-primary);
    --form-datecell-background-300: var(--colors-primary-sa-flag-300);
    --form-datecell-background-200: var(--colors-primary-sa-flag-200);
    --form-datecell-background-100: var(--colors-primary-sa-flag-100);
    --controls-control-icon-hovered: var(--icon-oncolor);
    --alpha-primary-10: var(--colors-alpha-alpha-green-10);
    --icon-default-400: var(--colors-neutral-400);
    --icon-primary: var(--colors-primary-sa-flag-600-primary);
    --alpha-primary-20: var(--colors-alpha-alpha-green-20);
    --icon-primary-light: var(--colors-primary-sa-flag-50);
    --alpha-warning-10: #dc680319;
    --icon-primary-400: var(--colors-primary-sa-flag-400);
    --alpha-warning-20: #dc680333;
    --alpha-error-10: #d92c2019;
    --alpha-error-20: #d92c2033;
    --alpha-info-10: #156fee19;
    --alpha-info-20: #156fee33;
    --alpha-success-10: #06945419;
    --alpha-success-20: #06945433;
    --icon-neutral: var(--colors-neutral-700);
    --icon-neutral-light: var(--colors-neutral-50);
    --icon-secondary: var(--colors-secondary-gold-600-primary);
    --icon-secondary-light: var(--colors-secondary-gold-50);
    --icon-tertiary: var(--colors-tertiary-lavendar-500-primary);
    --icon-tertiary-light: var(--colors-tertiary-lavendar-50);
    --icon-success: var(--colors-green-700);
    --icon-info: var(--colors-blue-700);
    --icon-warning: var(--colors-yellow-700);
    --icon-error: var(--colors-red-700);
    --icon-default-disabled: var(--colors-neutral-400);
    --icon-default-oncolor-disabled: var(--colors-alpha-alpha-white-40);
    --control-disabled: var(--colors-neutral-400);
    --featuredicons-icon-oncolor: var(--colors-base-white);
    --featuredicons-icon-success: var(--colors-green-700);
    --featuredicons-icon-default: var(--colors-base-black);
    --featuredicons-icon-error: var(--colors-red-700);
    --featuredicons-background-error-light: var(--colors-red-50);
    --featuredicons-background-info-light: var(--colors-blue-50);
    --featuredicons-background-warning-light: var(--colors-yellow-50);
    --featuredicons-background-success-light: var(--colors-green-50);
    --featuredicons-background-brand-light: var(--colors-primary-sa-flag-50);
    --featuredicons-background-default-light: var(--colors-neutral-50);
    --featuredicons-icon-primary: var(--colors-primary-sa-flag-600-primary);
    --featuredicons-icon-neutral: var(--colors-neutral-700);
    --featuredicons-icon-info: var(--colors-blue-700);
    --featuredicons-icon-warning: var(--colors-yellow-700);
    --controls-control-icon-pressed: var(--icon-oncolor);
    --controls-control-icon-disabled: var(--colors-base-white);
    --notification-background-error-light: var(--colors-red-50);
    --notification-background-info-light: var(--colors-blue-50);
    --notification-background-warning-light: var(--colors-yellow-50);
    --notification-background-success-light: var(--colors-green-50);
    --notification-background-brand-light: var(--colors-primary-sa-flag-50);
    --notification-background-default-light: var(--colors-neutral-50);
    --notification-background-default-50: var(--background-neutral-50);
    --notification-background-success-50: var(--background-success-50);
    --notification-background-warning-50: var(--background-warning-50);
    --notification-background-error-50: var(--background-error-50);
    --notification-background-brand-50: var(--colors-primary-sa-flag-50);
    --notification-background-info-50: var(--background-info-50);
    --notification-background-default-25: var(--background-neutral-25);
    --notification-background-success-25: var(--background-success-25);
    --notification-background-warning-25: var(--background-warning-25);
    --notification-background-error-25: var(--background-error-25);
    --notification-background-brand-25: var(--background-primary-25);
    --notification-background-info-25: var(--background-info-25);
    --notification-text-success: var(--text-success);
    --notification-text-error: var(--text-error);
    --notification-text-info: var(--text-info);
    --notification-text-warning: var(--text-warning);
    --notification-text-brand: var(--text-primary);
    --controls-control-text-error: var(--text-error);
    --featuredicons-icon-secondary: var(--colors-secondary-gold-600-primary);
    --featuredicons-icon-default-500: var(--colors-neutral-500);
    --featuredicons-icon-default-400: var(--colors-neutral-400);
    --featuredicons-icon-primary-light: var(--colors-primary-sa-flag-50);
    --featuredicons-icon-primary-400: var(--colors-primary-sa-flag-400);
    --featuredicons-icon-neutral-light: var(--colors-neutral-50);
    --featuredicons-icon-secondary-light: var(--colors-secondary-gold-50);
    --featuredicons-icon-tertiary: var(--colors-tertiary-lavendar-500-primary);
    --featuredicons-icon-tertiary-light: var(--colors-tertiary-lavendar-50);
    --featuredicons-icon-success-light: var(--colors-green-50);
    --featuredicons-icon-info-light: var(--colors-blue-50);
    --featuredicons-bg-icon-warning-light: var(--background-warning-50);
    --featuredicons-bg-icon-error-light: var(--background-error-50);
    --featuredicons-bg-icon-brand-light: var(--colors-primary-sa-flag-50);
    --featuredicons-bg-icon-info-light: var(--background-info-50);
    --featuredicons-bg-icon-success-light: var(--background-success-50);
    --icon-success-light: var(--colors-green-50);
    --icon-info-light: var(--colors-blue-50);
    --icon-warning-light: var(--colors-yellow-50);
    --icon-error-light: var(--colors-red-50)
}

input:is([type=text],[type=email],[type=password],[type=search],[type=tel],[type=url]):is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:autofill,:autofill:hover,:autofill:focus), textarea:is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:autofill,:autofill:hover,:autofill:focus) {
    -webkit-box-shadow: 0 0 0 1000px var(--form-field-background-default) inset !important;
    box-shadow: 0 0 0 1000px var(--form-field-background-default) inset !important;
    -webkit-text-fill-color: var(--form-field-text-focused) !important;
    caret-color: var(--form-field-text-focused);
    background-clip: padding-box;
    transition: background-color 9999s ease-out,color 9999s ease-out
}

input:is([type=text],[type=email],[type=password],[type=search],[type=tel],[type=url]):-moz-autofill, textarea:-moz-autofill {
    box-shadow: 0 0 0 1000px var(--form-field-background-default) inset !important;
    color: var(--form-field-text-focused) !important;
    background-clip: padding-box
}

:root {
    --text-white: var(--colors-base-white);
    --text-black: var(--colors-base-black);
    --colors-primary-sa-flag-600: #1b8354;
    --colors-secondary-gold-600: #dba102;
    --colors-secondary-gold-primary: var(--colors-secondary-gold-600);
    --colors-tertiary-lavendar-500: #80519f;
    --colors-tertiary-lavendar-primary: var(--colors-tertiary-lavendar-500);
    --colors-neutral-750: #2b3643;
    --colors-neutral-850: #18212f;
    --shadow-md-top: 0px -3.288px 6.575px -1.644px rgba(16, 24, 40, 0.10), 0px -1.644px 3.288px -1.644px rgba(16, 24, 40, 0.06);
    --shadow-inset: inset 0px 0 4px 2px rgba(0, 0, 0, 0.05);
    --background-default: var(--colors-base-white);
    --background-nav: var(--colors-base-white);
    --background-topbar: var(--colors-neutral-100);
    --background-footer: var(--background-sa-flag);
    --background-stripe: var(--colors-neutral-50);
    --background-sub-hero: var(--background-brand-light);
    --background-primary-300: var(--colors-primary-sa-flag-300);
    --background-surface-elevated: var(--colors-base-white);
    --background-surface-sunken: var(--colors-neutral-100);
    --background-overlay: var(--colors-alpha-alpha-black-50);
    --divider-color: var(--alpha-black-10);
    --border-focus: var(--colors-base-black);
    --alpha-lavender-10: #80519f19;
    --alpha-lavender-20: #80519f33;
    --chip-background-neutral-default: var(--colors-neutral-100);
    --chip-background-neutral-hovered: var(--colors-neutral-200);
    --chip-background-neutral-pressed: var(--colors-neutral-300);
    --chip-background-neutral-selected: var(--colors-neutral-700);
    --chip-background-neutral-focused: var(--colors-neutral-100);
    --chip-background-on-color-default: var(--colors-base-white);
    --chip-background-on-color-hovered: var(--colors-alpha-alpha-white-80);
    --chip-background-on-color-pressed: var(--colors-alpha-alpha-white-60);
    --chip-background-on-color-selected: var(--colors-alpha-alpha-white-70);
    --chip-background-on-color-focused: var(--colors-base-white);
    --chip-background-on-color-disabled: var(--colors-alpha-alpha-white-20);
    --chip-background-primary-default: var(--colors-primary-sa-flag-100);
    --chip-background-primary-hovered: var(--colors-primary-sa-flag-200);
    --chip-background-primary-pressed: var(--colors-primary-sa-flag-400);
    --chip-background-primary-selected: var(--colors-primary-sa-flag-600-primary);
    --chip-background-primary-focused: var(--colors-primary-sa-flag-100);
    --chip-text-neutral-default: var(--colors-base-black);
    --chip-text-neutral-selected: var(--colors-base-white);
    --chip-text-primary-default: var(--colors-primary-sa-flag-800);
    --chip-text-primary-pressed: var(--colors-primary-sa-flag-900);
    --chip-text-oncolor-primary: var(--colors-base-white);
    --chip-text-disabled: var(--colors-neutral-400);
    --swiper-button-background-default: var(--colors-base-white);
    --swiper-button-background-hovered: var(--colors-primary-sa-flag-50);
    --swiper-button-background-pressed: var(--colors-primary-sa-flag-100);
    --swiper-button-background-disabled: var(--colors-neutral-200);
    --swiper-button-icon-default: var(--colors-primary-sa-flag-600-primary);
    --swiper-button-icon-hovered: var(--colors-primary-sa-flag-700);
    --swiper-button-icon-disabled: var(--colors-neutral-400);
    --swiper-button-oncolor-background-default: var(--colors-alpha-alpha-white-10);
    --swiper-button-oncolor-background-hovered: var(--colors-alpha-alpha-white-20);
    --swiper-button-oncolor-background-pressed: var(--colors-alpha-alpha-white-30);
    --swiper-button-oncolor-icon-default: var(--colors-base-white);
    --swiper-button-oncolor-icon-hovered: var(--colors-base-white);
    --swiper-pagination-bullet-default: var(--colors-neutral-200);
    --swiper-pagination-bullet-active: var(--colors-primary-sa-flag-600-primary);
    --swiper-pagination-bullet-oncolor-default: var(--colors-alpha-alpha-white-60);
    --swiper-pagination-bullet-oncolor-active: var(--colors-base-white);
    --swiper-transition-speed: 500ms;
    --swiper-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --chip-text-oncolor-disabled: var(--colors-alpha-alpha-white-40);
    --rating-star-normal-default: var(--colors-neutral-300);
    --rating-star-selected-default: var(--background-secondary);
    --rating-star-pressed-default: var(--colors-secondary-gold-700);
    --rating-star-hovered-default: var(--colors-secondary-gold-500);
    --rating-star-normal-brand: var(--colors-neutral-300);
    --rating-star-selected-brand: var(--colors-primary-sa-flag-600-primary);
    --rating-star-pressed-brand: var(--colors-primary-sa-flag-700);
    --rating-star-hovered-brand: var(--colors-primary-sa-flag-500);
    --form-field-border-success: var(--border-success);
    --form-field-border-warning: var(--border-warning);
    --form-field-border-info: var(--border-info);
    --autocomplete-highlight: var(--colors-primary-sa-flag-100);
    --autocomplete-active: var(--background-neutral-light);
    --table-background-row-selected: var(--colors-primary-sa-flag-50);
    --table-background-tr-selected: var(--colors-primary-sa-flag-50);
    --table-background-hover-selected: var(--colors-alpha-alpha-green-10);
    --avatar-background: var(--button-background-neutral-default);
    --avatar-color: var(--icon-default);
    --avatar-border: var(--border-white);
    --button-status-success-bg: var(--background-success-light);
    --button-status-success-text: var(--text-success);
    --button-status-error-bg: var(--background-error-light);
    --button-status-error-text: var(--text-error);
    --button-status-info-bg: var(--background-info-light);
    --button-status-info-text: var(--text-info);
    --button-status-warning-bg: var(--background-warning-light);
    --button-status-warning-text: var(--text-warning);
    --button-border-error: var(--colors-red-200);
    --button-border-success: var(--colors-green-200);
    --button-border-warning: var(--colors-yellow-200);
    --button-border-info: var(--colors-blue-200);
    --focus-outline: var(--colors-base-black);
    --focus-inner: var(--colors-base-white);
    --icon-separator: var(--colors-neutral-400);
    --icon-neutral: var(--colors-neutral-700);
    --icon-neutral-ring: var(--colors-neutral-100);
    --icon-success-ring: var(--colors-green-100);
    --icon-info-ring: var(--colors-blue-100);
    --icon-warning-ring: var(--colors-yellow-100);
    --icon-error-ring: var(--colors-red-100);
    --background-neutral-light: var(--colors-neutral-100);
    --background-card-hovered: var(--colors-neutral-50);
    --tag-border-neutral-light: var(--colors-neutral-200);
    --border-disabled: var(--colors-neutral-300);
    --checkbox-primary-hovered: var(--controls-control-primary-hovered);
    --checkbox-primary-pressed: var(--controls-control-primary-pressed);
    --switch-primary-hovered: var(--controls-control-primary-hovered);
    --switch-primary-pressed: var(--controls-control-primary-pressed);
    --switch-neutral-default: var(--colors-neutral-950);
    --switch-neutral-checked: var(--controls-control-neutral-checked);
    --switch-neutral-hovered: var(--controls-control-neutral-hovered);
    --switch-neutral-pressed: var(--controls-control-neutral-pressed);
    --radio-neutral-checked: var(--controls-control-neutral-checked);
    --radio-neutral-hovered: var(--controls-control-neutral-hovered);
    --radio-neutral-pressed: var(--controls-control-neutral-pressed)
}

@media(max-width: 600px) {
    :root {
        --nds-viewport-padding: calc(var(--nds-viewport-base-padding)/2)
    }
}

:root[data-theme=dark] {
    --background-default: var(--colors-neutral-800);
    --background-body: var(--colors-neutral-900);
    --background-card: var(--background-default);
    --background-card-hovered: var(--alpha-white-10);
    --background-nav: var(--background-default);
    --background-topbar: var(--colors-neutral-900);
    --background-footer: var(--colors-alpha-alpha-green-30);
    --background-menu: var(--background-default);
    --background-stripe: var(--colors-neutral-850);
    --background-sub-hero: var(--alpha-primary-10);
    --background-overlay: var(--alpha-black-70);
    --text-default: var(--colors-neutral-200);
    --text-display: var(--colors-neutral-100);
    --text-primary-paragraph: var(--colors-neutral-300);
    --text-secondary-paragraph: var(--colors-neutral-400);
    --text-primary: var(--colors-primary-sa-flag-400);
    --text-oncolor-primary: var(--colors-neutral-100);
    --divider-color: var(--alpha-white-10);
    --link-primary: var(--colors-primary-sa-flag-400);
    --link-primary-hovered: var(--colors-primary-sa-flag-300);
    --link-primary-pressed: var(--colors-primary-sa-flag-200);
    --link-primary-focused: var(--colors-primary-sa-flag-400);
    --link-primary-visited: var(--colors-primary-sa-flag-500);
    --link-neutral: var(--colors-neutral-200);
    --link-neutral-hovered: var(--colors-neutral-400);
    --link-icon-neutral-hovered: var(--colors-neutral-400);
    --link-neutral-pressed: var(--colors-neutral-500);
    --link-icon-neutral-pressed: var(--colors-neutral-500);
    --link-neutral-focused: var(--colors-neutral-200);
    --link-icon-neutral-focused: var(--colors-neutral-200);
    --link-neutral-visited: var(--colors-neutral-300);
    --link-icon-neutral-visited: var(--colors-neutral-300);
    --text-primary-sa-flag: var(--colors-primary-sa-flag-400);
    --text-success: var(--colors-green-400);
    --text-info: var(--colors-blue-400);
    --text-warning: var(--colors-yellow-400);
    --text-error: var(--colors-red-400);
    --icon-separator: var(--colors-neutral-500);
    --icon-neutral: var(--colors-neutral-600);
    --icon-neutral-ring: var(--colors-neutral-800);
    --icon-success: var(--colors-green-400);
    --icon-info: var(--colors-blue-400);
    --icon-warning: var(--colors-yellow-400);
    --icon-error: var(--colors-red-400);
    --featuredicons-icon-default: var(--colors-neutral-100);
    --featuredicons-background-default-light: var(--alpha-white-10);
    --featuredicons-background-neutral-light: var(--alpha-white-10);
    --featuredicons-icon-neutral: var(--colors-neutral-300);
    --featuredicons-background-error-light: var(--alpha-error-10);
    --featuredicons-background-info-light: var(--alpha-info-10);
    --featuredicons-background-warning-light: var(--alpha-warning-10);
    --featuredicons-background-success-light: var(--alpha-success-10);
    --featuredicons-background-brand-light: var(--alpha-primary-10);
    --featuredicons-icon-primary: var(--colors-green-400);
    --featuredicons-icon-success: var(--colors-green-400);
    --featuredicons-icon-error: var(--colors-red-400);
    --featuredicons-icon-info: var(--colors-blue-400);
    --featuredicons-icon-warning: var(--colors-yellow-400);
    --icon-success-ring: var(--colors-green-900);
    --icon-info-ring: var(--colors-blue-900);
    --icon-warning-ring: var(--colors-yellow-900);
    --icon-error-ring: var(--colors-red-900);
    --tag-background-neutral-light: var(--alpha-white-10);
    --tag-text-neutral: var(--colors-neutral-100);
    --tag-icon-neutral: var(--colors-neutral-300);
    --tag-border-neutral-light: var(--colors-neutral-400);
    --tag-border-neutral: var(--colors-neutral-300);
    --tag-background-success-light: var(--alpha-success-10);
    --tag-text-success: var(--colors-green-400);
    --tag-icon-success: var(--colors-green-400);
    --tag-border-success-light: var(--colors-green-400);
    --tag-border-success: var(--colors-green-400);
    --tag-background-info-light: var(--alpha-info-10);
    --tag-text-info: var(--colors-blue-400);
    --tag-icon-info: var(--colors-blue-400);
    --tag-border-info-light: var(--colors-blue-400);
    --tag-border-info: var(--colors-blue-400);
    --tag-background-warning-light: var(--alpha-warning-10);
    --tag-text-warning: var(--colors-yellow-400);
    --tag-icon-warning: var(--colors-yellow-400);
    --tag-border-warning-light: var(--colors-yellow-400);
    --tag-border-warning: var(--colors-yellow-400);
    --tag-background-error-light: var(--alpha-error-10);
    --tag-text-error: var(--colors-red-400);
    --tag-icon-error: var(--colors-red-400);
    --tag-border-error-light: var(--colors-red-400);
    --tag-border-error: var(--colors-red-400);
    --chip-background-neutral-default: var(--alpha-white-10);
    --chip-background-neutral-hovered: var(--alpha-white-20);
    --chip-background-neutral-pressed: var(--alpha-white-30);
    --chip-background-neutral-selected: var(--colors-neutral-300);
    --chip-background-neutral-focused: var(--alpha-white-10);
    --chip-background-primary-default: var(--colors-alpha-alpha-green-10);
    --chip-background-primary-hovered: var(--colors-alpha-alpha-green-20);
    --chip-background-primary-pressed: var(--colors-alpha-alpha-green-30);
    --chip-background-primary-focused: var(--colors-alpha-alpha-green-10);
    --chip-text-neutral-default: var(--colors-base-white);
    --chip-text-neutral-selected: var(--colors-base-black);
    --chip-text-primary-default: var(--colors-primary-sa-flag-200);
    --chip-text-primary-pressed: var(--colors-primary-sa-flag-100);
    --chip-text-disabled: var(--colors-neutral-600);
    --form-field-background-default: var(--colors-neutral-800);
    --form-field-background-lighter: var(--colors-neutral-900);
    --form-field-background-darker: var(--colors-neutral-700);
    --form-field-background-pressed: var(--colors-neutral-700);
    --form-field-border-default: var(--colors-neutral-500);
    --form-field-border-hovered: var(--colors-neutral-300);
    --form-field-border-pressed: var(--colors-neutral-100);
    --form-field-border-error: var(--border-error-light);
    --form-field-border-success: var(--border-success-light);
    --form-field-border-warning: var(--border-warning-light);
    --form-field-border-info: var(--border-info-light);
    --form-option-background-hover: var(--colors-neutral-700);
    --form-option-background-pressed: var(--colors-neutral-600);
    --autocomplete-highlight: var(--colors-alpha-alpha-green-50);
    --autocomplete-active: var(--colors-neutral-700);
    --form-datecell-background-default: var(--colors-primary-sa-flag-600-primary);
    --form-datecell-background-hovered: var(--colors-primary-sa-flag-700);
    --form-datecell-background-pressed: var(--colors-primary-sa-flag-900);
    --form-datecell-background-focused: var(--colors-primary-sa-flag-600-primary);
    --form-datecell-today-background-default: var(--alpha-black-10);
    --form-datecell-today-background-hovered: var(--colors-neutral-700);
    --form-datecell-today-background-pressed: var(--colors-neutral-600);
    --form-datecell-today-background-focused: var(--alpha-white-0);
    --form-datecell-background-disabled: var(--colors-neutral-800);
    --form-datecell-background-600: var(--colors-primary-sa-flag-600-primary);
    --form-datecell-background-300: var(--colors-primary-sa-flag-300);
    --form-datecell-background-200: var(--colors-primary-sa-flag-400);
    --form-datecell-background-100: var(--colors-primary-sa-flag-300);
    --controls-control-border: var(--colors-neutral-400);
    --controls-control-pressed: var(--colors-neutral-600);
    --controls-control-ripple-effect: var(--alpha-black-50);
    --controls-control-primary-checked: var(--colors-green-600);
    --controls-control-primary-hovered: var(--colors-green-500);
    --controls-control-primary-pressed: var(--colors-green-400);
    --controls-control-primary-focused: var(--colors-green-600);
    --controls-control-neutral-checked: var(--colors-neutral-600);
    --controls-control-neutral-hovered: var(--colors-neutral-400);
    --controls-control-neutral-pressed: var(--colors-neutral-400);
    --controls-control-neutral-focused: var(--colors-neutral-600);
    --checkbox-primary-hovered: var(--colors-primary-sa-flag-700);
    --checkbox-primary-pressed: var(--colors-primary-sa-flag-800);
    --switch-primary-hovered: var(--colors-primary-sa-flag-700);
    --switch-primary-pressed: var(--colors-primary-sa-flag-800);
    --switch-neutral-default: var(--colors-neutral-400);
    --radio-neutral-checked: var(--colors-neutral-400);
    --radio-neutral-hovered: var(--colors-neutral-300);
    --radio-neutral-pressed: var(--colors-neutral-300);
    --controls-control-icon-hovered: var(--colors-primary-sa-flag-400);
    --controls-control-icon-pressed: var(--colors-primary-sa-flag-400);
    --controls-control-icon-disabled: var(--colors-neutral-400);
    --controls-control-text-error: var(--colors-red-400);
    --controls-switch-track-background: var(--colors-neutral-950);
    --control-disabled: var(--alpha-white-30);
    --button-status-success-bg: var(--alpha-success-10);
    --button-status-success-text: var(--colors-green-400);
    --button-status-error-bg: var(--alpha-error-10);
    --button-status-error-text: var(--colors-red-400);
    --button-status-info-bg: var(--alpha-info-10);
    --button-status-info-text: var(--colors-blue-400);
    --button-status-warning-bg: var(--alpha-warning-10);
    --button-status-warning-text: var(--colors-yellow-400);
    --background-neutral-light: var(--alpha-white-10);
    --background-disabled: var(--colors-neutral-700);
    --background-disabled-primary: var(--colors-primary-sa-flag-900);
    --background-inverse-disabled: var(--colors-neutral-600);
    --border-disabled: var(--colors-neutral-600);
    --focus-outline: var(--colors-base-white);
    --focus-inner: var(--colors-base-black);
    --table-cell-border: var(--colors-neutral-700);
    --table-cell-border-inverse: var(--colors-base-white);
    --table-text-head: var(--colors-neutral-300);
    --table-background-hover-selected: var(--colors-alpha-alpha-green-40);
    --table-background-tr-selected: var(--colors-neutral-800);
    --table-background-row-selected: var(--colors-alpha-alpha-green-20);
    --table-background-header: var(--colors-neutral-900);
    --table-background-row: var(--background-stripe);
    --table-background-disabled: var(--colors-neutral-700);
    --avatar-background: var(--colors-neutral-700);
    --avatar-color: var(--colors-neutral-300);
    --avatar-border: var(--colors-neutral-800);
    --button-background-neutral-default: var(--colors-neutral-700);
    --button-background-neutral-hovered: var(--colors-neutral-600);
    --button-background-neutral-pressed: var(--colors-neutral-500);
    --button-background-neutral-selected: var(--colors-neutral-600);
    --button-background-neutral-focused: var(--colors-neutral-700);
    --button-background-black-hovered: var(--colors-neutral-900);
    --border-primary-light: var(--colors-primary-sa-flag-400);
    --border-secondary-light: var(--colors-secondary-gold-400);
    --border-tertiary-light: var(--colors-tertiary-lavendar-400);
    --border-success-light: var(--colors-green-400);
    --border-info-light: var(--colors-blue-400);
    --border-warning-light: var(--colors-yellow-400);
    --border-error-light: var(--colors-red-400);
    --border-neutral-light: var(--colors-neutral-400);
    --border-neutral-primary: var(--colors-neutral-600);
    --border-neutral-secondary: var(--colors-neutral-700);
    --border-neutral-tertiary: var(--colors-neutral-800);
    --stepper-button-completed: var(--colors-green-600);
    --stepper-button-completed-hovered: var(--colors-green-700);
    --stepper-button-current: var(--colors-green-600);
    --stepper-button-current-hovered: var(--colors-green-700);
    --stepper-button-upcomming: var(--colors-neutral-600);
    --stepper-button-upcomming-hovered: var(--colors-neutral-600);
    --stepper-button-background: var(--background-default);
    --stepper-text-primary: var(--text-default);
    --stepper-line-current: var(--colors-neutral-600);
    --stepper-line-upcomming: var(--colors-neutral-600);
    --stepper-line-upcomming-hovered: var(--colors-neutral-600);
    --shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, .10);
    --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, .12), 0px 1px 3px 0px rgba(0, 0, 0, .2);
    --shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, .12), 0px 4px 8px -2px rgba(0, 0, 0, .2);
    --shadow-md-top: 0px -3.288px 6.575px -1.644px rgba(0, 0, 0, .2), 0px -1.644px 3.288px -1.644px rgba(0, 0, 0, .12);
    --shadow-lg: 0px 4px 6px -2px rgba(0, 0, 0, .06), 0px 12px 16px -4px rgba(0, 0, 0, .16);
    --shadow-xl: 0px 8px 8px -4px rgba(0, 0, 0, .06), 0px 20px 24px -4px rgba(0, 0, 0, .16);
    --shadow-2xl: 0px 24px 48px -12px rgba(0, 0, 0, .35);
    --shadow-3xl: 0px 32px 64px -12px rgba(0, 0, 0, .28);
    --shadow-inset: inset 0px 0 4px 2px rgba(0, 0, 0, 0.10)
}

:is(.nds-hero-section,.nds-content-section) {
    --_section-bg: var(--section-bg, var(--background-default));
    --_section-shadow: var(--section-shadow, none);
    --_section-border: var(--section-border, none);
    --_section-border-radius: var(--section-border-radius, 0);
    --_section-title-color: var(--section-title-color, var(--text-display));
    --_section-subtitle-color: var(--section-subtitle-color, var(--text-secondary-paragraph));
    --_section-description-color: var(--section-description-color, var(--text-default));
    --_section-text-color: var(--section-text-color, inherit);
    background-color: var(--_section-bg);
    box-shadow: var(--_section-shadow);
    border: var(--_section-border);
    border-radius: var(--_section-border-radius);
    color: var(--_section-text-color)
}

    :is(.nds-hero-section,.nds-content-section):is(.nds-primary,.nds-green,.nds-gradient-green,.nds-neutral) {
        --section-title-color: var(--text-oncolor-primary);
        --section-subtitle-color: var(--text-oncolor-secondary);
        --section-description-color: var(--text-oncolor-secondary);
        --section-text-color: var(--text-oncolor-secondary)
    }

    :is(.nds-hero-section,.nds-content-section):is(.nds-primary,.nds-green) {
        --section-bg: var(--colors-green-900)
    }

    :is(.nds-hero-section,.nds-content-section).nds-gradient-green {
        --_gradient-angle: var(--gradient-angle, -45deg);
        --section-bg: var(--colors-green-900);
        background: linear-gradient(var(--_gradient-angle), var(--colors-primary-sa-flag-900), var(--colors-primary-sa-flag-600))
    }

:is(html[dir=ltr],.ltr) :is(.nds-hero-section,.nds-content-section).nds-gradient-green {
    --gradient-angle: 45deg
}

:is(.nds-hero-section,.nds-content-section).nds-neutral {
    --section-bg: var(--colors-neutral-900)
}

:is(.nds-hero-section,.nds-content-section).nds-brand {
    --section-shadow: var(--shadow-inset);
    --section-bg: var(--background-brand-light);
    --section-title-color: var(--text-display);
    --section-subtitle-color: var(--text-default);
    --section-description-color: var(--text-default);
    --section-text-color: var(--text-default)
}

:root[data-theme=dark] :is(.nds-hero-section,.nds-content-section).nds-brand {
    --section-bg: var(--alpha-primary-10)
}

:is(.nds-hero-section,.nds-content-section):is(.nds-ghost,.nds-noBg) {
    --section-bg: transparent !important;
    --section-shadow: none !important;
    --section-border: none !important;
    --section-border-radius: 0 !important
}

.nds-section-title {
    letter-spacing: -0.02rem;
    font-weight: bold;
    color: var(--_section-title-color)
}

.nds-section-subtitle {
    font-weight: 500;
    letter-spacing: -0.01rem;
    color: var(--_section-subtitle-color)
}

.nds-section-description {
    color: var(--_section-description-color)
}

.nds-section-brief {
    font-size: var(--typo-text-lg-FS);
    line-height: var(--typo-text-lg-LH);
    font-weight: 600;
    margin-bottom: 1rem
}

.nds-section-body {
    margin-block-end: 2rem
}

    .nds-section-body:last-child {
        margin-block-end: 0
    }

    .nds-section-body :not(nav,.nds-scroll-more,.nds-drawer,.nds-drawer-list li) > ul.nds-divided li, .nds-section-body :not(nav,.nds-scroll-more,.nds-drawer,.nds-drawer-list li) > ol.nds-divided li {
        border-bottom: 1px solid var(--divider-color)
    }

    .nds-section-body :not(nav,.nds-scroll-more,.nds-drawer,.nds-drawer-list li) > ul li, .nds-section-body :not(nav,.nds-scroll-more,.nds-drawer,.nds-drawer-list li) > ol li {
        padding-block: var(--spacing-md)
    }

        .nds-section-body : not(nav,.nds-scroll-more,.nds-drawer,.nds-drawer-list li) > ul li:first-child, .nds-section-body :not(nav,.nds-scroll-more,.nds-drawer,.nds-drawer-list li) > ol li:first-child {
            padding-block-start: 0
        }

        .nds-section-body :not(nav,.nds-scroll-more,.nds-drawer,.nds-drawer-list li) > ul li:last-child, .nds-section-body :not(nav,.nds-scroll-more,.nds-drawer,.nds-drawer-list li) > ol li:last-child {
            padding-block-end: 0;
            border-bottom: none
        }

    .nds-section-body :is(p,ul,ol,.nds-table-wrapper,.nds-table,.nds-tabs,.nds-code,.nds-definition-list):not(.nds-scroll-more-content) {
        margin-block-end: 1rem
    }

        .nds-section-body :is(p,ul,ol,.nds-table-wrapper,.nds-table,.nds-tabs,.nds-code,.nds-definition-list):not(.nds-scroll-more-content):is(:last-child,:has(+.nds-divider),:has(+hr)) {
            margin-block-end: 0
        }

.nds-block {
    container-type: inline-size;
    container-name: block;
    width: 100%;
    margin-block-end: 2rem
}

    .nds-block:last-child {
        margin-block-end: 0
    }

    .nds-block p {
        color: var(--text-primary-paragraph);
        text-wrap: pretty
    }

    .nds-block > img {
        max-width: 80%;
        margin: auto;
        display: block
    }

@media(max-width: 960px) {
    .nds-block > img {
        max-width: 100%
    }
}

.nds-block > video {
    max-height: 60vh;
    width: auto;
    margin: auto;
    display: block
}

.nds-block-title {
    --_block-title-FS: var(--block-title-FS, var(--typo-text-xl-FS));
    --_block-title-LH: var(--block-title-LH, var(--typo-text-xl-LH));
    --_block-title-FW: var(--block-title-FW, 600);
    --_block-title-MB: var(--block-title-MB, var(--spacing-lg));
    --_block-title-color: var(--block-title-color, var(--text-display));
    font-size: var(--_block-title-FS);
    line-height: var(--_block-title-LH);
    font-weight: var(--_block-title-FW);
    color: var(--_block-title-color);
    margin-block-end: .5rem
}

    .nds-block-title:last-child {
        margin-block-end: 0
    }

::view-transition-old(root), ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal
}

::view-transition-new(root) {
    z-index: 1
}

:root {
    scrollbar-color: var(--colors-neutral-600) var(--background-default)
}

    :root[data-theme=dark] {
        scrollbar-color: var(--colors-neutral-400) var(--background-default)
    }

.nds-divider {
    --_divider: var(--divider, var(--spacing-xs));
    --_divider-size: var(--divider-size, 1px);
    margin-block: var(--_divider);
    flex-shrink: 0;
    border: 0;
    border-block-start: var(--_divider-size) solid var(--divider-color);
    width: auto;
    opacity: 1;
    color: inherit
}

    .nds-divider:not(:empty) {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        color: var(--text-secondary-paragraph);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
        border-block-start: 0
    }

        .nds-divider:not(:empty)::before, .nds-divider:not(:empty)::after {
            content: "";
            flex: 1;
            border-block-start: var(--_divider-size) solid var(--divider-color)
        }

    .nds-divider.nds-md {
        --divider: var(--spacing-md)
    }

    .nds-divider.nds-lg {
        --divider: var(--spacing-lg)
    }

    .nds-divider.nds-xl {
        --divider: var(--spacing-xl)
    }

    .nds-divider.nds-2xl {
        --divider: var(--spacing-2xl)
    }

    .nds-divider.nds-3xl {
        --divider: var(--spacing-3xl)
    }

    .nds-divider.nds-4xl {
        --divider: var(--spacing-4xl)
    }

    .nds-divider.nds-vertical {
        writing-mode: vertical-rl;
        align-self: stretch;
        margin-block: 0;
        margin-inline: var(--_divider)
    }

        .nds-divider.nds-vertical: not(:empty)::before, .nds-divider.nds-vertical:not(:empty)::after {
            min-height: 16px
        }

body.nds-minimal[style*="--bg-img"] {
    background: linear-gradient(color-mix(in srgb, var(--background-body) var(--bg-opacity-top, 80%), transparent), color-mix(in srgb, var(--background-body) var(--bg-opacity-bottom, 80%), transparent)),var(--bg-img) center/cover no-repeat fixed
}

:is(button,.button,.btn,.nds-btn,.nds-nav-link,[role=button],[role=tab]) {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none
}

:is(button) {
    background-color: rgba(0,0,0,0);
    border: none;
    cursor: pointer
}

.nds-description {
    font-size: var(--typo-text-sm-FS);
    line-height: var(--typo-text-sm-LH);
    color: var(--text-secondary-paragraph);
    font-weight: 400;
    white-space: normal;
    text-align: start
}

.nds-last-edit {
    font-size: var(--typo-text-clamp-md-FS);
    text-align: end;
    height: 24px;
    display: block;
    margin-top: calc((24px + var(--spacing-md))*-1);
    width: 100%;
    max-width: var(--nds-content-MaxWidth, 1280px);
    margin-inline: auto;
    padding: 0 var(--nds-viewport-padding, 32px)
}

@keyframes nds-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%)
    }

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

@keyframes slideDown {
    from {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(100%)
    }
}

@keyframes colorCycle {
    0% {
        color: var(--colors-primary-sa-flag-400)
    }

    100% {
        color: var(--text-default)
    }
}

@keyframes processing {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}

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

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

/*
:where(.nds-link,a):not(.nds-btn,.nds-card) {
    --_link-color: var(--link-color, var(--link-neutral));
    --_link-hover: var(--link-hover, var(--link-neutral-hovered));
    --_link-pressed: var(--link-pressed, var(--link-neutral-pressed));
    --_link-focused: var(--link-focused, var(--link-neutral-focused));
    --_link-visited: var(--link-visited, var(--link-neutral-visited));
    --_link-decoration: var(--link-decoration, none);
    color: var(--_link-color);
    text-decoration: var(--_link-decoration)
}*/

:where(.nds-link,a):not(.nds-btn,.nds-card):is(:hover,:active,.nds-underline) {
    --link-decoration: underline
}

:where(.nds-content-section:not(.nds-demo-section)) :where(.nds-link,a):not(.nds-btn,.nds-card) {
    --link-decoration: underline
}

    :where(.nds-content-section:not(.nds-demo-section)) :where(.nds-link,a):not(.nds-btn,.nds-card):not(.nds-neutral) {
        --link-color: var(--link-primary);
        --link-hover: var(--link-primary-hovered);
        --link-pressed: var(--link-primary-pressed);
        --link-focused: var(--link-primary-focused);
        --link-visited: var(--link-primary-visited)
    }

    :where(.nds-content-section:not(.nds-demo-section)) :where(.nds-link,a):not(.nds-btn,.nds-card):visited {
        --link-color: var(--_link-visited)
    }

    :where(.nds-content-section:not(.nds-demo-section)) :where(.nds-link,a):not(.nds-btn,.nds-card):focus {
        --link-color: var(--_link-focused)
    }

:where(.nds-link,a):not(.nds-btn,.nds-card):is(.nds-primary,.nds-color) {
    --link-color: var(--link-primary);
    --link-hover: var(--link-primary-hovered);
    --link-pressed: var(--link-primary-pressed);
    --link-focused: var(--link-primary-focused);
    --link-visited: var(--link-primary-visited)
}

:where(.nds-link,a):not(.nds-btn,.nds-card).nds-oncolor {
    --link-color: var(--link-oncolor);
    --link-hover: var(--link-oncolor-hovered);
    --link-pressed: var(--link-oncolor-pressed);
    --link-focused: var(--link-oncolor-focused);
    --link-visited: var(--link-oncolor-visited)
}

:where(.nds-link,a):not(.nds-btn,.nds-card):hover {
    --link-color: var(--_link-hover)
}

:where(.nds-link,a):not(.nds-btn,.nds-card):active {
    --link-color: var(--_link-pressed)
}

:is(.nds-link,a):not(.nds-card):where(.nds-icon,.nds-external) > .nds-label {
    flex: unset !important
}

:is(.nds-link,a):not(.nds-card):where(.nds-icon,.nds-external)::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    vertical-align: text-bottom;
    margin-inline-start: var(--spacing-xs);
    mask: var(--_link-icon) center/contain no-repeat
}

:is(.nds-link,a):not(.nds-card):where(.nds-icon,.nds-external).nds-icon {
    --_link-icon: var(--nds-icon-link-04)
}

:is(.nds-link,a):not(.nds-card):where(.nds-icon,.nds-external).nds-external {
    --_link-icon: var(--nds-icon-link-square-02)
}

.nds-breadcrumb {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    flex-wrap: wrap
}

    .nds-breadcrumb > li {
        display: flex;
        align-items: center;
        color: var(--text-secondary-paragraph)
    }

        .nds-breadcrumb > li:last-child {
            color: var(--text-default-disabled)
        }

    .nds-breadcrumb li:not(:last-child)::after {
        content: "";
        display: inline-block;
        width: 24px;
        height: 1em;
        background: var(--icon-separator);
        mask: var(--nds-icon-arrow-left-01) center/contain no-repeat
    }

:is(html[dir=ltr],.ltr) .nds-breadcrumb > li:not(:last-child)::after {
    transform: scaleX(-1)
}

.nds-breadcrumb li::after {
    content: "";
    min-width: 24px
}

.nds-breadcrumb-ellipsis .nds-dropmenu-menu {
    min-width: 120px
}

.nds-breadcrumb-ellipsis .nds-dropmenu-item {
    min-height: 40px
}

.nds-avatar:not([hidden]) {
    --_avatar-size: var(--avatar-size, 40px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--avatar-background);
    color: var(--avatar-color);
    font-family: "IBM Plex Sans Arabic",sans-serif;
    font-weight: 500;
    flex-shrink: 0;
    user-select: none;
    width: var(--_avatar-size);
    height: var(--_avatar-size)
}

    .nds-avatar:not([hidden]) img {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        object-fit: cover;
        display: block;
        border-radius: 50%
    }

    .nds-avatar:not([hidden]).nds-image-border img {
        outline: 2px solid var(--alpha-black-20);
        outline-offset: -2px
    }

    .nds-avatar:not([hidden]) i {
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit
    }

    .nds-avatar:not([hidden]) .nds-label {
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase
    }

.nds-avatar.nds-md, .nds-avatar {
    width: var(--_avatar-size);
    height: var(--_avatar-size);
    font-size: calc(var(--_avatar-size)/3)
}

    .nds-avatar.nds-md i, .nds-avatar i {
        width: calc(var(--_avatar-size)/2);
        height: calc(var(--_avatar-size)/2)
    }

    .nds-avatar.nds-md.nds-btn img, .nds-avatar.nds-btn img {
        width: calc(var(--btn-height));
        height: calc(var(--btn-height));
        padding: 4px
    }

    .nds-avatar.nds-xs {
        --avatar-size: 24px
    }

    .nds-avatar.nds-sm {
        --avatar-size: 32px
    }

    .nds-avatar.nds-md {
        --avatar-size: 40px
    }

    .nds-avatar.nds-lg {
        --avatar-size: 48px
    }

    .nds-avatar.nds-xl {
        --avatar-size: 64px
    }

    .nds-avatar.nds-2xl {
        --avatar-size: 80px
    }

    .nds-avatar.nds-3xl {
        --avatar-size: 120px;
        border: 4px solid var(--avatar-border)
    }

    .nds-avatar.nds-square, .nds-avatar.nds-square > img {
        border-radius: var(--radius-sm)
    }

        .nds-3xl .nds-avatar.nds-square, .nds-avatar.nds-square.nds-3xl, .nds-3xl .nds-avatar.nds-square > img, .nds-avatar.nds-square > img.nds-3xl {
            border-radius: var(--radius-md)
        }

.nds-avatar-group {
    --_avatar-gap: var(--avatar-gap, 6px);
    display: flex;
    align-items: center;
    gap: var(--_avatar-gap, 6px)
}

    .nds-avatar-group.nds-stacked {
        --_stacked-gap: calc(var(--_avatar-gap) * 2);
        gap: 0;
        padding-left: var(--_stacked-gap)
    }

        .nds-avatar-group.nds-stacked .nds-avatar {
            --avatar-size: 40px;
            margin-left: calc(var(--_stacked-gap)*-1)
        }

:is(html[dir=ltr],.ltr) .nds-avatar-group.nds-stacked {
    padding-left: unset;
    padding-right: var(--_stacked-gap)
}

    :is(html[dir=ltr],.ltr) .nds-avatar-group.nds-stacked .nds-avatar {
        margin-left: unset;
        margin-right: calc(var(--_stacked-gap)*-1)
    }

.nds-avatar-group.nds-xs {
    --avatar-gap: 2px
}

    .nds-avatar-group.nds-xs .nds-avatar {
        --avatar-size: 24px
    }

.nds-avatar-group.nds-sm {
    --avatar-gap: 4px
}

    .nds-avatar-group.nds-sm .nds-avatar {
        --avatar-size: 32px
    }

.nds-avatar-group.nds-md {
    --avatar-gap: 6px
}

    .nds-avatar-group.nds-md .nds-avatar {
        --avatar-size: 40px
    }

.nds-avatar-group.nds-lg {
    --avatar-gap: 8px
}

    .nds-avatar-group.nds-lg .nds-avatar {
        --avatar-size: 48px
    }

.nds-avatar-group.nds-xl {
    --avatar-gap: 10px
}

    .nds-avatar-group.nds-xl .nds-avatar {
        --avatar-size: 64px
    }

.nds-avatar-group.nds-2xl {
    --avatar-gap: 12px
}

    .nds-avatar-group.nds-2xl .nds-avatar {
        --avatar-size: 80px
    }

.nds-avatar-group.nds-3xl {
    --avatar-gap: 14px
}

    .nds-avatar-group.nds-3xl .nds-avatar {
        --avatar-size: 120px;
        border: 4px solid var(--avatar-border)
    }

.nds-persona {
    --_name-FS: var(--persona-name-FS, var(--typo-text-xl-FS));
    --_name-LH: var(--persona-name-LH, var(--typo-text-xl-LH));
    --_name-color: var(--persona-name-color, var(--text-default));
    --_role-FS: var(--persona-role-FS, var(--typo-text-lg-FS));
    --_role-LH: var(--persona-role-LH, var(--typo-text-lg-LH));
    --_role-color: var(--persona-role-color, var(--text-primary-paragraph));
    --_desc-FS: var(--persona-desc-FS, var(--typo-text-md-FS));
    --_desc-LH: var(--persona-desc-LH, var(--typo-text-md-LH));
    --_desc-color: var(--persona-desc-color, var(--text-secondary-paragraph));
    --avatar-size: 80px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg)
}

    .nds-persona .nds-persona-info {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        text-align: start
    }

    .nds-persona .nds-persona-name {
        font-size: var(--_name-FS);
        line-height: var(--_name-LH);
        color: var(--_name-color);
        font-weight: 600
    }

    .nds-persona .nds-persona-role {
        font-size: var(--_role-FS);
        line-height: var(--_role-LH);
        color: var(--_role-color)
    }

    .nds-persona .nds-persona-desc {
        font-size: var(--_desc-FS);
        line-height: var(--_desc-LH);
        color: var(--_desc-color)
    }

    .nds-persona .nds-divider {
        flex: 1 100%;
        align-self: stretch
    }

    .nds-persona .nds-persona-action {
        flex: 1 100%;
        display: flex;
        flex-wrap: wrap
    }

        .nds-persona .nds-persona-action > .nds-btn {
            --btn-width: fit-content
        }

    .nds-persona.nds-colView {
        flex-direction: column
    }

    .nds-persona.nds-center {
        flex-direction: column;
        align-items: center
    }

        .nds-persona.nds-center .nds-persona-info {
            align-items: center;
            text-align: center
        }

    .nds-persona.nds-md {
        --avatar-size: 64px;
        --persona-name-FS: var(--typo-text-lg-FS);
        --persona-name-LH: var(--typo-text-lg-LH);
        --persona-role-FS: var(--typo-text-md-FS);
        --persona-role-LH: var(--typo-text-md-LH);
        --persona-desc-FS: var(--typo-text-sm-FS);
        --persona-desc-LH: var(--typo-text-sm-LH)
    }

    .nds-persona.nds-sm {
        --avatar-size: 48px;
        --persona-name-FS: var(--typo-text-md-FS);
        --persona-name-LH: var(--typo-text-md-LH);
        --persona-role-FS: var(--typo-text-sm-FS);
        --persona-role-LH: var(--typo-text-sm-LH);
        --persona-desc-FS: var(--typo-text-xs-FS);
        --persona-desc-LH: var(--typo-text-xs-LH)
    }

.nds-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    transition: opacity var(--nds-transition);
    background-color: var(--backdrop-bg, var(--alpha-black-60));
    z-index: var(--backdrop-z-index, 1100)
}

    .nds-backdrop[data-state~=active] {
        opacity: 1;
        backdrop-filter: var(--backdrop-blur, blur(2px))
    }

body[data-state=backdrop][style*=top] {
    position: fixed;
    width: 100%;
    inset-inline-start: 0;
    overflow-y: hidden;
}

.nds-btn {
    --_btn-bg: var(--btn-bg, transparent);
    --_btn-bg-hover: var(--btn-bg-hover, var(--_btn-bg));
    --_btn-bg-active: var(--btn-bg-active, var(--_btn-bg));
    --_btn-bg-selected: var(--btn-bg-selected, var(--_btn-bg));
    --_btn-bg-disabled: var(--btn-bg-disabled, var(--background-disabled));
    --_btn-color: var(--btn-color, var(--text-default));
    --_btn-color-hover: var(--btn-color-hover, var(--_btn-color));
    --_btn-color-disabled: var(--btn-color-disabled, var(--text-default-disabled));
    --_btn-border: var(--btn-border, transparent);
    --_btn-border-hover: var(--btn-border-hover, var(--_btn-border));
    --_btn-border-active: var(--btn-border-active, var(--_btn-border));
    --_btn-border-selected: var(--btn-border-selected, var(--_btn-border));
    --_btn-border-disabled: var(--btn-border-disabled, transparent);
    --_btn-indicator-color: var(--btn-indicator-color, var(--background-neutral-400));
    --_btn-indicator-active: var(--btn-indicator-active, var(--background-neutral-800));
    --_btn-indicator-selected: var(--btn-indicator-selected, var(--background-neutral-800));
    --_btn-loading-color: var(--btn-loading-color, var(--text-default));
    --_btn-loading-track: var(--btn-loading-track, var(--alpha-black-10));
    --_btn-size: var(--btn-size, 40px);
    --_btn-height: var(--btn-height, var(--_btn-size));
    --_btn-height-min: var(--btn-height-min, var(--_btn-size));
    --_btn-width: var(--btn-width, unset);
    --_btn-gap: var(--btn-gap, var(--spacing-xs));
    --_btn-padding: var(--btn-padding, calc(var(--_btn-size) * 0.375 - 3px));
    --_btn-radius: var(--btn-radius, var(--radius-sm));
    --_btn-FS: var(--btn-FS, calc(var(--_btn-size) * 0.2 + 6px));
    --_btn-icon-size: calc(var(--_btn-size) / 2);
    --btn-indicator-size: calc(var(--_btn-size) * 0.075);
    --_btn-space: calc(var(--_btn-size) - var(--_btn-padding) - 4px);
    --loading-size: var(--_btn-space) !important;
    --loading-border: max(2px, calc(var(--_btn-space) / 12)) !important;
    display: inline-flex;
    align-items: center;
    gap: var(--_btn-gap);
    border: 1px solid rgba(0,0,0,0);
    border-radius: var(--_btn-radius);
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
    vertical-align: middle;
    justify-content: center;
    height: var(--_btn-height);
    min-height: var(--_btn-height-min);
    width: var(--_btn-width, fit-content);
    min-width: var(--_btn-size);
    padding-inline: var(--_btn-padding);
    padding-block: calc(var(--_btn-padding)/2);
    background-color: var(--_btn-bg);
    color: var(--_btn-color);
    border-color: var(--_btn-border)
}

    .nds-btn[hidden] {
        display: none
    }

    .nds-btn > .nds-label, .nds-btn i {
        font-weight: 500;
        text-decoration: none;
        font-size: var(--_btn-FS)
    }

    .nds-btn:not(button):not(a) {
        pointer-events: none
    }

    .nds-btn .nds-label {
        text-align: start
    }

    .nds-btn:is(:hover,[data-state~=hover]) {
        background-color: var(--_btn-bg-hover);
        color: var(--_btn-color-hover);
        border-color: var(--_btn-border-hover)
    }

    .nds-btn:is([data-state~=selected],[data-state~=open],[data-state~=active],[data-state~=current]) {
        background-color: var(--_btn-bg-selected);
        border-color: var(--_btn-border-selected)
    }

    .nds-btn:is(:active,[data-state~=pressed]) {
        background-color: var(--_btn-bg-active);
        border-color: var(--_btn-border-active)
    }

    .nds-btn:is(:disabled,[data-state~=disabled],[aria-disabled=true]) {
        background-color: var(--_btn-bg-disabled);
        color: var(--_btn-color-disabled);
        border-color: var(--_btn-border-disabled);
        cursor: not-allowed;
        pointer-events: none
    }

    .nds-btn:is(.focus,:focus-visible) {
        outline: 2px solid var(--focus-outline) !important;
        outline-offset: -2px !important;
        box-shadow: inset 0 0 0 3px var(--focus-inner) !important
    }

    .nds-btn[data-status=success] {
        --btn-bg-hover: var(--button-status-success-bg) !important;
        --btn-bg: var(--button-status-success-bg) !important;
        --btn-color: var(--button-status-success-text) !important
    }

        .nds-btn[data-status=success] :is(i,.nds-icon) {
            --nds-icon: var(--nds-icon-checkmark-circle-01)
        }

    .nds-btn[data-status=error] {
        --btn-bg-hover: var(--button-status-error-bg) !important;
        --btn-bg: var(--button-status-error-bg) !important;
        --btn-color: var(--button-status-error-text) !important
    }

        .nds-btn[data-status=error] :is(i,.nds-icon) {
            --nds-icon: var(--nds-icon-cancel-circle)
        }

    .nds-btn[data-status=info] {
        --btn-bg-hover: var(--button-status-info-bg) !important;
        --btn-bg: var(--button-status-info-bg) !important;
        --btn-color: var(--button-status-info-text) !important
    }

        .nds-btn[data-status=info] :is(i,.nds-icon) {
            --nds-icon: var(--nds-icon-information-circle)
        }

    .nds-btn[data-status=warning] {
        --btn-bg-hover: var(--button-status-warning-bg) !important;
        --btn-bg: var(--button-status-warning-bg) !important;
        --btn-color: var(--button-status-warning-text) !important
    }

        .nds-btn[data-status=warning] :is(i,.nds-icon) {
            --nds-icon: var(--nds-icon-alert-circle)
        }

.nds-btn {
    --btn-size: 40px;
    --btn-indicator-size: 3px
}

    .nds-btn.nds-md {
        --btn-size: 45px;
        --btn-indicator-size: 3px
    }

    .nds-btn.nds-sm {
        --btn-size: 24px;
        --btn-indicator-size: 2px
    }

    .nds-btn.nds-primary {
        --btn-bg: var(--button-background-primary-default);
        --btn-bg-hover: var(--button-background-primary-hovered);
        --btn-bg-active: var(--button-background-primary-pressed);
        --btn-bg-selected: var(--button-background-primary-selected);
        --btn-color: var(--text-oncolor-primary);
        --btn-indicator-color: var(--background-primary-400);
        --btn-indicator-active: var(--background-primary-400);
        --btn-indicator-selected: var(--background-primary-400);
        --btn-loading-color: var(--text-oncolor-primary);
        --btn-loading-track: var(--alpha-white-20)
    }

    .nds-btn.nds-neutral {
        --btn-bg: var(--button-background-black-default);
        --btn-bg-hover: var(--button-background-black-hovered);
        --btn-bg-active: var(--button-background-black-pressed);
        --btn-bg-selected: var(--button-background-black-selected);
        --btn-color: var(--text-oncolor-primary);
        --btn-indicator-color: var(--background-primary-400);
        --btn-indicator-active: var(--background-primary-400);
        --btn-indicator-selected: var(--background-primary-400);
        --btn-loading-color: var(--text-oncolor-primary);
        --btn-loading-track: var(--alpha-white-20)
    }

    .nds-btn.nds-secondary {
        --btn-bg: var(--button-background-neutral-default);
        --btn-bg-hover: var(--button-background-neutral-hovered);
        --btn-bg-active: var(--button-background-neutral-pressed);
        --btn-bg-selected: var(--button-background-neutral-selected);
        --btn-color: var(--text-default)
    }

    .nds-btn.nds-secondary-outline {
        --btn-bg: var(--button-background-transparent-default);
        --btn-bg-hover: var(--button-background-neutral-default);
        --btn-bg-active: var(--button-background-neutral-pressed);
        --btn-bg-selected: var(--button-background-neutral-selected);
        --btn-bg-disabled: var(--button-background-transparent-default);
        --btn-color: var(--text-default);
        --btn-border: var(--border-neutral-primary);
        --btn-border-hover: var(--border-neutral-secondary);
        --btn-border-active: var(--border-neutral-primary);
        --btn-border-selected: var(--border-neutral-primary);
        --btn-border-disabled: var(--border-neutral-secondary)
    }

    .nds-btn.nds-subtle {
        --btn-bg: var(--button-background-transparent-default);
        --btn-bg-hover: var(--button-background-neutral-default);
        --btn-bg-active: var(--button-background-neutral-pressed);
        --btn-bg-selected: var(--button-background-neutral-selected);
        --btn-bg-disabled: transparent;
        --btn-color: var(--text-default)
    }

    .nds-btn.nds-transparent {
        --btn-bg: var(--button-background-transparent-default);
        --btn-bg-hover: var(--button-background-transparent-hovered);
        --btn-bg-active: var(--button-background-transparent-pressed);
        --btn-bg-selected: var(--button-background-transparent-selected);
        --btn-bg-disabled: transparent;
        --btn-color: var(--text-default);
        --btn-color-hover: var(--button-background-primary-hovered);
        --btn-loading-color: var(--background-primary)
    }

        .nds-btn.nds-transparent.nds-color {
            --btn-color: var(--button-background-primary-default);
            --btn-color-hover: var(--text-default)
        }

        .nds-btn.nds-transparent:is([data-state~=selected],[data-state~=open],[data-state~=active],[data-state~=current]) {
            color: var(--button-background-primary-selected)
        }

        .nds-btn.nds-transparent:is(:active,[data-state~=pressed]) {
            color: var(--button-background-primary-pressed)
        }

.nds-btn-group .nds-btn:not(:first-child) {
    border-inline-start-color: var(--_btn-bg-hover)
}

.nds-btn.nds-oncolor:is(.nds-primary,.nds-neutral) {
    --btn-bg: var(--button-background-oncolor-default);
    --btn-bg-hover: var(--button-background-oncolor-hovered);
    --btn-bg-active: var(--button-background-oncolor-pressed);
    --btn-bg-selected: var(--button-background-oncolor-selected);
    --btn-bg-disabled: var(--button-background-disabled-on-color);
    --btn-color-disabled: var(--text-default-oncolor-disabled);
    --btn-color: var(--background-black);
    --btn-loading-color: var(--background-black)
}

    .nds-btn.nds-oncolor:is(.nds-primary,.nds-neutral):is(.focus,:focus-visible) {
        outline: 2px solid var(--colors-base-white) !important;
        outline-offset: -1px !important;
        box-shadow: inset 0 0 0 3px var(--colors-base-black) !important
    }

:root[data-theme=dark] .nds-btn:is(.nds-primary,.nds-neutral) {
    --btn-bg-disabled: var(--button-background-disabled-on-color)
}

.nds-btn.nds-oncolor, :where(:root[data-theme=dark]) .nds-btn:not(.nds-primary,.nds-neutral) {
    --btn-color-disabled: var(--text-default-oncolor-disabled);
    --btn-indicator-color: var(--alpha-white-40);
    --btn-indicator-active: var(--alpha-white-60);
    --btn-indicator-selected: var(--background-white)
}

    .nds-btn.nds-oncolor.nds-secondary, :where(:root[data-theme=dark]) .nds-btn:not(.nds-primary,.nds-neutral).nds-secondary {
        --btn-bg: var(--button-background-transparent-hovered);
        --btn-bg-hover: var(--button-background-transparent-hovered);
        --btn-bg-active: var(--button-background-transparent-pressed);
        --btn-bg-selected: var(--button-background-transparent-selected);
        --btn-bg-disabled: var(--button-background-disabled-on-color);
        --btn-indicator-active: var(--button-background-disabled-on-color);
        --btn-color: var(--text-oncolor-primary);
        --btn-loading-color: var(--text-oncolor-primary);
        --btn-loading-track: var(--alpha-white-20)
    }

    .nds-btn.nds-oncolor.nds-secondary-outline, :where(:root[data-theme=dark]) .nds-btn:not(.nds-primary,.nds-neutral).nds-secondary-outline {
        --btn-bg: var(--button-background-transparent-default);
        --btn-bg-hover: var(--button-background-transparent-hovered);
        --btn-bg-active: var(--button-background-transparent-pressed);
        --btn-bg-selected: var(--button-background-transparent-selected);
        --btn-bg-disabled: var(--button-background-transparent-default);
        --btn-color: var(--colors-base-white);
        --btn-border: var(--border-white-40);
        --btn-border-hover: var(--border-white-40);
        --btn-border-active: var(--border-white-40);
        --btn-border-selected: var(--border-white-40);
        --btn-loading-color: var(--colors-base-white);
        --btn-loading-track: var(--alpha-white-20)
    }

    .nds-btn.nds-oncolor.nds-subtle, :where(:root[data-theme=dark]) .nds-btn:not(.nds-primary,.nds-neutral).nds-subtle {
        --btn-bg: transparent;
        --btn-bg-hover: var(--button-background-transparent-hovered);
        --btn-bg-active: var(--button-background-transparent-pressed);
        --btn-bg-selected: var(--button-background-transparent-selected);
        --btn-bg-disabled: transparent;
        --btn-color: var(--text-oncolor-primary);
        --btn-loading-color: var(--text-oncolor-primary);
        --btn-loading-track: var(--alpha-white-20)
    }

    .nds-btn.nds-oncolor.nds-transparent, :where(:root[data-theme=dark]) .nds-btn:not(.nds-primary,.nds-neutral).nds-transparent {
        --btn-bg: transparent;
        --btn-bg-hover: transparent;
        --btn-bg-active: transparent;
        --btn-bg-selected: transparent;
        --btn-color: var(--text-oncolor-primary);
        --btn-color-hover: var(--button-label-transparent-hovered-on-color);
        --btn-loading-color: var(--text-oncolor-primary);
        --btn-loading-track: var(--alpha-white-20)
    }

        .nds-btn.nds-oncolor.nds-transparent:is([data-state~=selected],[data-state~=open],[data-state~=active],[data-state~=current]), :where(:root[data-theme=dark]) .nds-btn:not(.nds-primary,.nds-neutral).nds-transparent:is([data-state~=selected],[data-state~=open],[data-state~=active],[data-state~=current]) {
            color: var(--button-label-transparent-pressed-on-color)
        }

        .nds-btn.nds-oncolor.nds-transparent:is(:active,[data-state~=pressed]), :where(:root[data-theme=dark]) .nds-btn:not(.nds-primary,.nds-neutral).nds-transparent:is(:active,[data-state~=pressed]) {
            color: var(--button-label-transparent-pressed-on-color)
        }

.nds-btn.nds-destructive.nds-primary {
    --btn-bg: var(--button-background-danger-primary-default);
    --btn-bg-hover: var(--button-background-danger-primary-hovered);
    --btn-bg-active: var(--button-background-danger-primary-pressed);
    --btn-bg-selected: var(--button-background-danger-primary-selected);
    --btn-color: var(--text-oncolor-primary);
    --btn-loading-color: var(--text-oncolor-primary);
    --btn-loading-track: var(--alpha-white-20)
}

.nds-btn.nds-destructive.nds-secondary {
    --btn-bg: var(--button-background-danger-secondary-default);
    --btn-bg-hover: var(--button-background-danger-secondary-hovered);
    --btn-bg-active: var(--button-background-danger-secondary-pressed);
    --btn-bg-selected: var(--button-background-danger-secondary-selected);
    --btn-color: var(--text-error);
    --btn-loading-color: var(--button-background-danger-primary-default)
}

.nds-btn.nds-destructive.nds-secondary-outline {
    --btn-bg: transparent;
    --btn-bg-hover: var(--button-background-danger-secondary-hovered);
    --btn-bg-active: var(--button-background-danger-secondary-pressed);
    --btn-bg-selected: var(--button-background-danger-secondary-selected);
    --btn-bg-disabled: var(--button-background-transparent-default);
    --btn-color: var(--text-error);
    --btn-border: var(--button-border-error);
    --btn-border-hover: var(--button-border-error);
    --btn-border-active: var(--button-border-error);
    --btn-border-selected: var(--button-border-error);
    --btn-border-disabled: var(--border-neutral-secondary);
    --btn-loading-color: var(--button-background-danger-primary-default)
}

.nds-btn.nds-destructive.nds-subtle {
    --btn-bg: transparent;
    --btn-bg-hover: var(--button-background-danger-secondary-default);
    --btn-bg-active: var(--button-background-danger-secondary-hovered);
    --btn-bg-selected: var(--button-background-danger-secondary-selected);
    --btn-bg-disabled: transparent;
    --btn-color: var(--text-error);
    --btn-loading-color: var(--button-background-danger-primary-default)
}

.nds-btn.nds-destructive.nds-transparent {
    --btn-bg: var(--button-background-transparent-default);
    --btn-bg-hover: var(--button-background-transparent-hovered);
    --btn-bg-active: var(--button-background-transparent-pressed);
    --btn-bg-selected: var(--button-background-transparent-selected);
    --btn-bg-disabled: var(--button-background-transparent-default);
    --btn-color: var(--button-background-danger-primary-default);
    --btn-color-hover: var(--button-background-danger-primary-hovered);
    --btn-loading-color: var(--button-background-danger-primary-default)
}

    .nds-btn.nds-destructive.nds-transparent:is([data-state~=selected],[data-state~=open],[data-state~=active],[data-state~=current]) {
        color: var(--button-background-danger-primary-selected)
    }

    .nds-btn.nds-destructive.nds-transparent:is(:active,[data-state~=pressed]) {
        color: var(--button-background-danger-primary-pressed)
    }

.nds-btn.nds-oncolor.nds-destructive, :where(:root[data-theme=dark]) .nds-btn.nds-destructive {
    --btn-loading-color: var(--colors-base-white);
    --btn-loading-track: var(--alpha-white-20)
}

    .nds-btn.nds-oncolor.nds-destructive.nds-primary, :where(:root[data-theme=dark]) .nds-btn.nds-destructive.nds-primary {
        --btn-bg: var(--button-background-danger-primary-default);
        --btn-bg-hover: var(--button-background-danger-primary-hovered);
        --btn-bg-active: var(--button-background-danger-primary-pressed);
        --btn-bg-selected: var(--button-background-danger-primary-selected);
        --btn-color: var(--text-oncolor-primary)
    }

    .nds-btn.nds-oncolor.nds-destructive.nds-secondary, :where(:root[data-theme=dark]) .nds-btn.nds-destructive.nds-secondary {
        --btn-bg: var(--button-background-danger-secondary-default);
        --btn-bg-hover: var(--button-background-danger-secondary-hovered);
        --btn-bg-active: var(--button-background-danger-secondary-pressed);
        --btn-bg-selected: var(--button-background-danger-secondary-selected);
        --btn-color: var(--button-background-danger-primary-default)
    }

    .nds-btn.nds-oncolor.nds-destructive.nds-secondary-outline, :where(:root[data-theme=dark]) .nds-btn.nds-destructive.nds-secondary-outline {
        --btn-bg: transparent;
        --btn-bg-hover: var(--button-background-danger-secondary-hovered);
        --btn-bg-active: var(--button-background-danger-secondary-pressed);
        --btn-bg-selected: var(--button-background-danger-secondary-selected);
        --btn-bg-disabled: var(--button-background-transparent-default);
        --btn-color: var(--button-label-danger-primary-default-oncolor);
        --btn-color-hover: var(--button-background-danger-primary-hovered);
        --btn-border: var(--button-border-error);
        --btn-border-hover: var(--button-border-error);
        --btn-border-active: var(--button-border-error);
        --btn-border-selected: var(--button-border-error);
        --btn-border-disabled: var(--border-neutral-secondary)
    }

        .nds-btn.nds-oncolor.nds-destructive.nds-secondary-outline:is([data-state~=selected],[data-state~=open],[data-state~=active],[data-state~=current]), :where(:root[data-theme=dark]) .nds-btn.nds-destructive.nds-secondary-outline:is([data-state~=selected],[data-state~=open],[data-state~=active],[data-state~=current]) {
            color: var(--button-background-danger-primary-selected)
        }

        .nds-btn.nds-oncolor.nds-destructive.nds-secondary-outline:is(:active,[data-state~=pressed]), :where(:root[data-theme=dark]) .nds-btn.nds-destructive.nds-secondary-outline:is(:active,[data-state~=pressed]) {
            color: var(--button-background-danger-primary-pressed)
        }

    .nds-btn.nds-oncolor.nds-destructive.nds-subtle, :where(:root[data-theme=dark]) .nds-btn.nds-destructive.nds-subtle {
        --btn-bg: transparent;
        --btn-bg-hover: var(--button-background-danger-secondary-default);
        --btn-bg-active: var(--button-background-danger-secondary-hovered);
        --btn-bg-selected: var(--button-background-danger-secondary-selected);
        --btn-bg-disabled: transparent;
        --btn-color: var(--button-label-danger-primary-default-oncolor);
        --btn-color-hover: var(--button-background-danger-primary-hovered)
    }

        .nds-btn.nds-oncolor.nds-destructive.nds-subtle:is([data-state~=selected],[data-state~=open],[data-state~=active],[data-state~=current]), :where(:root[data-theme=dark]) .nds-btn.nds-destructive.nds-subtle:is([data-state~=selected],[data-state~=open],[data-state~=active],[data-state~=current]) {
            color: var(--button-background-danger-primary-selected)
        }

        .nds-btn.nds-oncolor.nds-destructive.nds-subtle:is(:active,[data-state~=pressed]), :where(:root[data-theme=dark]) .nds-btn.nds-destructive.nds-subtle:is(:active,[data-state~=pressed]) {
            color: var(--button-background-danger-primary-pressed)
        }

    .nds-btn.nds-oncolor.nds-destructive.nds-transparent, :where(:root[data-theme=dark]) .nds-btn.nds-destructive.nds-transparent {
        --btn-color: var(--button-label-danger-primary-default-oncolor);
        --btn-color-hover: var(--button-label-danger-primary-hovered-oncolor)
    }

        .nds-btn.nds-oncolor.nds-destructive.nds-transparent:is([data-state~=selected],[data-state~=open],[data-state~=active],[data-state~=current]), :where(:root[data-theme=dark]) .nds-btn.nds-destructive.nds-transparent:is([data-state~=selected],[data-state~=open],[data-state~=active],[data-state~=current]) {
            color: var(--button-label-danger-primary-selected-oncolor)
        }

        .nds-btn.nds-oncolor.nds-destructive.nds-transparent:is(:active,[data-state~=pressed]), :where(:root[data-theme=dark]) .nds-btn.nds-destructive.nds-transparent:is(:active,[data-state~=pressed]) {
            color: var(--button-label-danger-primary-pressed-oncolor)
        }

.nds-btn.nds-indicator::before {
    content: "";
    position: absolute !important;
    height: var(--btn-indicator-size);
    border-radius: var(--radius-full);
    display: block;
    bottom: 0;
    inset-inline: 0;
    margin-inline: var(--spacing-md)
}

.nds-btn.nds-indicator:is(:hover,[data-state~=hover])::before {
    background-color: var(--_btn-indicator-color)
}

.nds-btn.nds-indicator:is(:focus-visible,[aria-selected=true],[data-state~=open],[data-state~=selected],[data-state~=active],[data-state~=current],[data-state~=focused])::before {
    background-color: var(--_btn-indicator-selected)
}

.nds-btn.nds-indicator:is(:active,[data-state~=pressed])::before {
    background-color: var(--_btn-indicator-active)
}

.nds-btn.nds-ellipsis {
    width: var(--btn-size);
    padding: 0
}

    .nds-btn.nds-ellipsis::after {
        content: "";
        display: inline-block;
        width: 1em;
        height: 1em;
        background: currentColor;
        mask: var(--nds-icon-more-horizontal) center/contain no-repeat
    }

.nds-btn:is(.nds-menu-btn,.nds-next,.nds-prev,.nds-up,.nds-down)::after {
    content: "";
    display: inline-block;
    position: relative;
    width: var(--_btn-icon-size);
    height: var(--_btn-icon-size);
    background: currentColor;
    mask: var(--nds-icon-arrow-left-01) center/contain no-repeat;
    rotate: -90deg;
    transition: transform .1s ease
}

.nds-btn.nds-menu-btn:is([data-state~=opening],[data-state~=open],[aria-expanded=true])::after, :is([data-state~=opening],[data-state~=open]) > .nds-btn.nds-menu-btn::after {
    transform: rotate(180deg)
}

.nds-btn.nds-next::after {
    transform: rotate(90deg);
    font-size: 26px !important;
}

:is(html[dir=ltr],.ltr) .nds-btn.nds-next::after {
    transform: rotate(-90deg)
}

.nds-btn.nds-prev {
    flex-direction: row-reverse
}

    .nds-btn.nds-prev::after {
        transform: rotate(-90deg)
    }

:is(html[dir=ltr],.ltr) .nds-btn.nds-prev::after {
    transform: rotate(90deg)
}

.nds-btn.nds-up::after {
    transform: rotate(180deg)
}

.nds-btn.nds-down::after {
    transform: rotate(0deg)
}

.nds-btn.nds-lead-icon {
    flex-direction: row
}

.nds-btn.nds-trail-icon {
    flex-direction: row-reverse
}

.nds-btn.nds-full {
    width: 100% !important;
    justify-content: center !important;
    min-width: var(--btn-size)
}

    .nds-btn.nds-full .nds-label {
        text-align: center !important
    }

.nds-btn:is(.nds-icon-only,.nds-circle) .nds-label {
    display: none
}

:is(.nds-btn.nds-label-only,.nds-label-only) :is(i,svg,img) {
    display: none
}

.nds-btn:is(.nds-icon-only,.nds-circle) {
    justify-content: center;
    width: var(--btn-size);
    padding: 0 var(--spacing-md)
}

    .nds-btn:is(.nds-icon-only,.nds-circle).nds-menu-btn {
        width: fit-content;
        padding: 0 var(--spacing-lg)
    }

        .nds-btn:is(.nds-icon-only,.nds-circle).nds-menu-btn.nds-sm {
            padding: 0 var(--spacing-sm)
        }

        .nds-btn:is(.nds-icon-only,.nds-circle).nds-menu-btn.nds-md {
            padding: 0 var(--spacing-md)
        }

        .nds-btn:is(.nds-icon-only,.nds-circle).nds-menu-btn.nds-lg {
            padding: 0 var(--spacing-lg)
        }

    .nds-btn:is(.nds-icon-only,.nds-circle).nds-circle {
        border-radius: 50%
    }

.nds-btn.nds-btn i {
    flex-shrink: 0;
    width: var(--_btn-icon-size);
    height: var(--_btn-icon-size);
    font-size: var(--_btn-icon-size);
    line-height: var(--_btn-icon-size)
}

.nds-btn:is(.nds-loading,[data-state~=loading]) {
    --loading-color: var(--_btn-loading-color);
    --loading-track: var(--_btn-loading-track);
    color: rgba(0,0,0,0) !important
}

.nds-btn.nds-progress {
    position: relative
}

    .nds-btn.nds-progress .nds-progress-circle {
        display: block;
        position: absolute;
        inset: 0;
        margin: auto;
        pointer-events: none;
        --progress-track-color: var(--_btn-loading-track, var(--alpha-black-10));
        --progress-color: var(--_btn-color);
        --progress-size: calc(var(--btn-size) - 8px)
    }

        .nds-btn.nds-progress .nds-progress-circle .nds-progress-info {
            display: none !important
        }

        .nds-btn.nds-progress .nds-progress-circle svg circle.nds-progress-track {
            stroke-dashoffset: calc(var(--progress-circumference, 62.83) - var(--progress-circumference, 62.83)*min(var(--progress-value, 0),100)/100);
            transition: stroke-dashoffset .3s ease
        }

    .nds-btn.nds-progress:not(.nds-progress-static) .nds-progress-circle svg circle.nds-progress-track {
        animation: button-progress-countdown linear forwards;
        animation-duration: var(--progress-duration, 4000ms)
    }

    .nds-btn.nds-progress.nds-oncolor .nds-progress-circle {
        --progress-track-color: var(--alpha-white-20);
        --progress-color: var(--text-oncolor-primary)
    }

.nds-btn :is(i,.nds-icon):has(.nds-badge) {
    position: relative
}

.nds-btn .nds-badge {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: -6px;
    font-size: 9px;
    font-family: var(--nds-font-family);
    background-color: var(--background-error);
    color: var(--text-oncolor-primary);
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding: 4px;
    pointer-events: none
}

.nds-btn-group {
    --btn-group-radius: var(--radius-md);
    display: flex;
    border-radius: var(--btn-group-radius);
    gap: 0 !important;
    width: fit-content;
    flex-wrap: nowrap
}

    .nds-btn-group:has(>.nds-md,>.nds-sm) {
        --btn-group-radius: var(--radius-sm)
    }

    .nds-btn-group .nds-btn {
        --btn-radius: 0;
        position: relative;
        z-index: 1
    }

        .nds-btn-group .nds-btn:not(:last-child) {
            border-inline-end-width: 0
        }

        .nds-btn-group .nds-btn + .nds-btn {
            border-inline-start-width: 1px
        }

        .nds-btn-group .nds-btn:first-child {
            --btn-radius: 0;
            border-start-start-radius: var(--btn-group-radius);
            border-end-start-radius: var(--btn-group-radius)
        }

        .nds-btn-group .nds-btn:last-child {
            --btn-radius: 0;
            border-start-end-radius: var(--btn-group-radius);
            border-end-end-radius: var(--btn-group-radius)
        }

        .nds-btn-group .nds-btn:is(:hover,:focus,.nds-active) {
            z-index: 2
        }

@keyframes button-progress-countdown {
    from {
        stroke-dashoffset: 62.83
    }

    to {
        stroke-dashoffset: 0
    }
}

@media(prefers-contrast: high) {
    .nds-btn {
        border-width: 2px
    }

        .nds-btn:focus {
            outline-width: 3px
        }
}

@media(prefers-reduced-motion: reduce) {
    .nds-btn, .nds-btn::after {
        transition: none;
        animation: none
    }
}

@media print {
    .nds-btn {
        background: rgba(0,0,0,0) !important;
        color: #000 !important;
        border: 1px solid #000 !important
    }
}

.nds-card {
    --card-bg: initial;
    --card-bg-hover: initial;
    --card-border: initial;
    --card-border-hover: initial;
    --card-border-active: initial;
    --card-padding: initial;
    --card-gap: initial;
    --card-radius: initial;
    --card-text: initial;
    --card-title: initial;
    --card-subtitle: initial;
    --card-number: initial;
    --card-rating: initial;
    --card-width: initial;
    --card-width-min: initial;
    --card-width-max: initial;
    --icon-color: initial;
    --icon-bg-color: initial;
    --avatar-color: initial;
    --_card-bg: var(--card-bg, var(--background-card));
    --_card-bg-hover: var(--card-bg-hover, var(--background-card-hovered));
    --_card-border: var(--card-border, var(--border-neutral-primary));
    --_card-border-hover: var(--card-border-hover, var(--border-primary));
    --_card-border-active: var(--card-border-active, var(--border-neutral-primary));
    --_card-padding: var(--card-padding, var(--spacing-xl));
    --_card-gap: var(--card-gap, var(--spacing-3xl));
    --_card-radius: var(--card-radius, var(--components-card-radius));
    --_card-text: var(--card-text, var(--text-display));
    --_card-title: var(--card-title, var(--text-display));
    --_card-subtitle: var(--card-subtitle, var(--text-primary));
    --_card-number: var(--card-number, var(--text-primary-sa-flag));
    --_card-icon: var(--icon-color, var(--featuredicons-icon-primary));
    --_card-icon-bg: var(--icon-bg-color, var(--featuredicons-background-brand-light));
    --icon-color: var(--_card-icon);
    --icon-bg-color: var(--_card-icon-bg);
    --avatar-color: var(--_card-icon);
    --_card-rating: var(--card-rating, var(--text-secondary-paragraph));
    --_card-width: var(--card-width, 100%);
    --_card-width-min: var(--card-width-min, 0);
    --_card-width-max: var(--card-width-max, var(--card-width, 360px));
    font-family: var(--nds-font-family);
    text-align: start;
    background-color: var(--_card-bg);
    border: 1px solid rgba(0,0,0,0);
    border-radius: var(--_card-radius);
    padding: var(--_card-padding);
    min-width: var(--_card-width-min);
    width: var(--_card-width);
    max-width: var(--_card-width-max);
    position: relative
}

    .nds-card:not([hidden]) {
        display: flex;
        flex-direction: column;
        gap: var(--_card-gap);
        flex-wrap: nowrap
    }

    .nds-card.nds-shadow {
        box-shadow: var(--shadow-md)
    }

        .nds-card.nds-shadow:not(.nds-stroke) {
            border: 1px solid var(--border-neutral-tertiary)
        }

    .nds-card.nds-stroke {
        border: 1px solid var(--_card-border)
    }

    .nds-card.nds-rowView {
        flex-direction: row
    }

        .nds-card.nds-rowView .nds-card-header {
            flex: 0 1;
            flex-wrap: wrap;
            align-content: flex-start;
            justify-content: center
        }

    .nds-card.nds-color {
        --card-bg: var(--background-success-25);
        --card-bg-hover: var(--colors-green-50);
        --card-border: var(--border-success-light);
        --card-title: var(--colors-green-700)
    }

:root[data-theme=dark] .nds-card.nds-color {
    --card-bg: var(--alpha-success-10);
    --card-bg-hover: var(--alpha-success-20);
    --card-border: var(--border-success-light);
    --card-title: var(--colors-green-400)
}

.nds-card:is(.nds-full-width,.nds-full) {
    --card-width: 100%
}

.nds-card:is(.nds-center,.nds-statistic) :is(.nds-card-header,.nds-card-content>*,.nds-card-text>*,.nds-card-tags,.nds-card-actions) {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important
}

.nds-card:is(.nds-center,.nds-statistic) :is(.nds-card-rating) {
    flex-direction: column
}

.nds-card .nds-card-header:not([hidden]) {
    position: relative;
    display: flex;
    gap: var(--spacing-md)
}

    .nds-card .nds-card-header:not([hidden]):is(:has(.nds-close),.nds-rowView) {
        width: 100%;
        flex-direction: row;
        justify-content: space-between
    }

.nds-card .nds-card-image:not(.nds-avatar) {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--img-ratio, 2/1);
    border-radius: var(--radius-md, 8px);
    overflow: hidden
}

    .nds-card .nds-card-image:not(.nds-avatar)::after {
        --_overlay: var(--overlay, 0);
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, rgba(9, 42, 30, var(--_overlay)) 0%, rgba(9, 42, 30, var(--_overlay)) 100%);
        z-index: 2;
        pointer-events: none
    }

    .nds-card .nds-card-image:not(.nds-avatar) img {
        max-width: 100%;
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: var(--img-pos-x, 50%) var(--img-pos-y, 50%)
    }

.nds-card:not(.nds-center,.nds-statistic) .nds-card-featured-icon {
    align-self: flex-start
}

.nds-card .nds-card-content:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--_card-gap);
    width: 100%;
    flex: 1
}

.nds-card .nds-card-text:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 8px);
    width: 100%;
    white-space: wrap;
    flex: 1
}

    .nds-card .nds-card-text:not([hidden]) .nds-card-title {
        font-size: var(--typo-text-lg-FS);
        line-height: var(--typo-text-lg-LH);
        font-weight: 700;
        color: var(--_card-title);
        margin: 0;
        width: 100%
    }

    .nds-card .nds-card-text:not([hidden]) .nds-card-subtitle {
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH);
        font-weight: 600;
        color: var(--_card-subtitle);
        margin: 0;
        width: 100%
    }

    .nds-card .nds-card-text:not([hidden]) .nds-card-description {
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH);
        font-weight: 400;
        color: var(--_card-text);
        margin: 0;
        width: 100%
    }

.nds-card .nds-card-meta:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--_card-gap);
    width: 100%
}

.nds-card .nds-card-tags:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md, 8px);
    align-items: flex-start
}

.nds-card .nds-card-rating:not([hidden]) {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 4px)
}

.nds-card .nds-card-rating-text {
    font-size: var(--typo-text-xs-FS);
    line-height: var(--typo-text-xs-LH);
    font-weight: 400;
    color: var(--_card-rating);
    margin: 0
}

.nds-card .nds-card-checkbox {
    position: absolute;
    top: var(--spacing-xl, 16px);
    inset-inline-end: var(--spacing-xl, 16px);
    z-index: 3
}

.nds-card .nds-card-status {
    position: absolute;
    top: 0;
    inset-inline-start: 0
}

.nds-card .nds-card-actions:not([hidden]) {
    display: flex;
    gap: var(--spacing-xl, 16px);
    align-items: flex-start;
    width: 100%;
    margin-top: auto;
    flex-direction: row
}

    .nds-card .nds-card-actions:not([hidden]).nds-end {
        justify-content: flex-end
    }

.nds-card > .nds-form:not([hidden]), .nds-card-form:not([hidden]) {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--_card-gap)
}

.nds-card.nds-statistic {
    justify-content: flex-start !important
}

    .nds-card.nds-statistic .nds-card-header {
        align-items: center
    }

    .nds-card.nds-statistic .nds-card-featured-icon {
        align-self: center;
        margin-bottom: 0
    }

    .nds-card.nds-statistic .nds-card-content {
        align-items: center
    }

    .nds-card.nds-statistic .nds-card-text > * {
        align-items: center;
        text-align: center
    }

    .nds-card.nds-statistic .nds-card-text :is(.nds-card-number,.nds-counter-value,.nds-number-format) {
        color: var(--_card-number);
        font-size: var(--typo-display-clamp-lg-FS);
        line-height: var(--typo-display-clamp-lg-LH);
        font-weight: 500;
        letter-spacing: -0.96px;
        direction: ltr;
        display: block;
        width: 100%
    }

        .nds-card.nds-statistic .nds-card-text :is(.nds-card-number,.nds-counter-value,.nds-number-format).nds-md {
            font-size: var(--typo-display-clamp-md-FS);
            line-height: var(--typo-display-clamp-md-LH)
        }

        .nds-card.nds-statistic .nds-card-text :is(.nds-card-number,.nds-counter-value,.nds-number-format).nds-sm {
            font-size: var(--typo-display-clamp-sm-FS);
            line-height: var(--typo-display-clamp-sm-LH)
        }

.nds-card.nds-user {
    --_card-width: var(--card-width, 224px)
}

    .nds-card.nds-user .nds-card-tags {
        min-height: 48px
    }

.nds-card:not(.nds-oncolor,[disabled]).nds-gold {
    --card-border-hover: var(--colors-secondary-gold-600);
    --card-border-active: var(--colors-secondary-gold-400);
    --card-title: var(--colors-secondary-gold-800);
    --card-subtitle: var(--colors-secondary-gold-800);
    --card-number: var(--colors-secondary-gold-800);
    --icon-bg-color: var(--colors-secondary-gold-100);
    --icon-color: var(--colors-secondary-gold-800)
}

    .nds-card:not(.nds-oncolor,[disabled]).nds-gold.nds-color {
        --card-bg: var(--colors-secondary-gold-50);
        --card-bg-hover: var(--colors-secondary-gold-100);
        --card-border: var(--colors-secondary-gold-300)
    }

:root[data-theme=dark] .nds-card:not(.nds-oncolor,[disabled]).nds-gold {
    --card-title: var(--colors-secondary-gold-400);
    --card-subtitle: var(--colors-secondary-gold-400);
    --card-number: var(--colors-secondary-gold-400);
    --icon-bg-color: var(--alpha-warning-10);
    --icon-color: var(--colors-secondary-gold-400)
}

    :root[data-theme=dark] .nds-card:not(.nds-oncolor,[disabled]).nds-gold.nds-color {
        --card-bg: var(--alpha-warning-10);
        --card-bg-hover: var(--alpha-warning-20);
        --card-border: var(--colors-secondary-gold-700)
    }

.nds-card:not(.nds-oncolor,[disabled]).nds-neutral {
    --card-border-hover: var(--colors-neutral-500);
    --card-border-active: var(--colors-neutral-300);
    --card-title: var(--colors-neutral-800);
    --card-subtitle: var(--colors-neutral-600);
    --card-number: var(--colors-neutral-600);
    --icon-bg-color: var(--colors-neutral-50);
    --icon-color: var(--colors-neutral-600)
}

    .nds-card:not(.nds-oncolor,[disabled]).nds-neutral.nds-color {
        --card-bg: var(--colors-neutral-50);
        --card-bg-hover: var(--colors-neutral-100);
        --card-border: var(--colors-neutral-200);
        --icon-bg-color: var(--colors-neutral-100)
    }

:root[data-theme=dark] .nds-card:not(.nds-oncolor,[disabled]).nds-neutral {
    --card-title: var(--colors-neutral-200);
    --card-subtitle: var(--colors-neutral-400);
    --card-number: var(--colors-neutral-400);
    --icon-bg-color: var(--alpha-white-10);
    --icon-color: var(--colors-neutral-400)
}

    :root[data-theme=dark] .nds-card:not(.nds-oncolor,[disabled]).nds-neutral.nds-color {
        --card-bg: var(--alpha-white-10);
        --card-bg-hover: var(--alpha-white-20);
        --card-border: var(--colors-neutral-500)
    }

.nds-card:not(.nds-oncolor,[disabled]).nds-lavendar {
    --card-border-hover: var(--colors-tertiary-lavendar-500);
    --card-border-active: var(--colors-tertiary-lavendar-300);
    --card-title: var(--colors-tertiary-lavendar-600);
    --card-subtitle: var(--colors-tertiary-lavendar-600);
    --card-number: var(--colors-tertiary-lavendar-600);
    --icon-bg-color: var(--colors-tertiary-lavendar-50);
    --icon-color: var(--colors-tertiary-lavendar-600)
}

    .nds-card:not(.nds-oncolor,[disabled]).nds-lavendar.nds-color {
        --card-bg: var(--colors-tertiary-lavendar-50);
        --card-bg-hover: var(--colors-tertiary-lavendar-100);
        --card-border: var(--colors-tertiary-lavendar-200);
        --icon-bg-color: var(--alpha-lavender-10)
    }

:root[data-theme=dark] .nds-card:not(.nds-oncolor,[disabled]).nds-lavendar {
    --card-title: var(--colors-tertiary-lavendar-300);
    --card-subtitle: var(--colors-tertiary-lavendar-300);
    --card-number: var(--colors-tertiary-lavendar-300);
    --icon-bg-color: var(--alpha-lavender-10);
    --icon-color: var(--colors-tertiary-lavendar-300)
}

    :root[data-theme=dark] .nds-card:not(.nds-oncolor,[disabled]).nds-lavendar.nds-color {
        --card-bg: var(--alpha-lavender-10);
        --card-bg-hover: var(--alpha-lavender-20);
        --card-border: var(--colors-tertiary-lavendar-500)
    }

.nds-card:not(.nds-oncolor,[disabled]).nds-yellow {
    --card-border-hover: var(--colors-yellow-600);
    --card-border-active: var(--colors-yellow-300);
    --card-title: var(--colors-yellow-700);
    --card-subtitle: var(--colors-yellow-700);
    --card-number: var(--colors-yellow-700);
    --icon-bg-color: var(--colors-yellow-50);
    --icon-color: var(--colors-yellow-700)
}

    .nds-card:not(.nds-oncolor,[disabled]).nds-yellow.nds-color {
        --card-bg: var(--colors-yellow-25);
        --card-bg-hover: var(--colors-yellow-50);
        --card-border: var(--colors-yellow-200);
        --icon-bg-color: var(--colors-yellow-50)
    }

:root[data-theme=dark] .nds-card:not(.nds-oncolor,[disabled]).nds-yellow {
    --card-title: var(--colors-yellow-400);
    --card-subtitle: var(--colors-yellow-400);
    --card-number: var(--colors-yellow-400);
    --icon-bg-color: var(--alpha-warning-10);
    --icon-color: var(--colors-yellow-400)
}

    :root[data-theme=dark] .nds-card:not(.nds-oncolor,[disabled]).nds-yellow.nds-color {
        --card-bg: var(--alpha-warning-10);
        --card-bg-hover: var(--alpha-warning-20);
        --card-border: var(--colors-yellow-200)
    }

.nds-card:not(.nds-oncolor,[disabled]).nds-red {
    --card-border-hover: var(--colors-red-600);
    --card-border-active: var(--colors-red-300);
    --card-title: var(--colors-red-700);
    --card-subtitle: var(--colors-red-700);
    --card-number: var(--colors-red-700);
    --icon-bg-color: var(--colors-red-50);
    --icon-color: var(--colors-red-700)
}

    .nds-card:not(.nds-oncolor,[disabled]).nds-red.nds-color {
        --card-bg: var(--colors-red-50);
        --card-bg-hover: var(--colors-red-100);
        --card-border: var(--colors-red-200);
        --icon-bg-color: var(--alpha-error-10)
    }

:root[data-theme=dark] .nds-card:not(.nds-oncolor,[disabled]).nds-red {
    --card-title: var(--colors-red-400);
    --card-subtitle: var(--colors-red-400);
    --card-number: var(--colors-red-400);
    --icon-bg-color: var(--alpha-error-10);
    --icon-color: var(--colors-red-400)
}

    :root[data-theme=dark] .nds-card:not(.nds-oncolor,[disabled]).nds-red.nds-color {
        --card-bg: var(--alpha-error-10);
        --card-bg-hover: var(--alpha-error-20);
        --card-border: var(--colors-red-700)
    }

.nds-card:not(.nds-oncolor,[disabled]).nds-blue {
    --card-border-hover: var(--colors-blue-600);
    --card-border-active: var(--colors-blue-300);
    --card-title: var(--colors-blue-700);
    --card-subtitle: var(--colors-blue-700);
    --card-number: var(--colors-blue-700);
    --icon-bg-color: var(--colors-blue-50);
    --icon-color: var(--colors-blue-700)
}

    .nds-card:not(.nds-oncolor,[disabled]).nds-blue.nds-color {
        --card-bg: var(--colors-blue-50);
        --card-bg-hover: var(--colors-blue-100);
        --card-border: var(--colors-blue-200);
        --icon-bg-color: var(--alpha-info-10)
    }

:root[data-theme=dark] .nds-card:not(.nds-oncolor,[disabled]).nds-blue {
    --card-title: var(--colors-blue-400);
    --card-subtitle: var(--colors-blue-400);
    --card-number: var(--colors-blue-400);
    --icon-bg-color: var(--alpha-info-10);
    --icon-color: var(--colors-blue-400)
}

    :root[data-theme=dark] .nds-card:not(.nds-oncolor,[disabled]).nds-blue.nds-color {
        --card-bg: var(--alpha-info-10);
        --card-bg-hover: var(--alpha-info-20);
        --card-border: var(--colors-blue-700)
    }

.nds-card.nds-oncolor {
    --card-bg: var(--alpha-white-10);
    --card-bg-hover: var(--alpha-white-20);
    --card-border: var(--alpha-white-20);
    --card-border-hover: var(--alpha-white-40);
    --card-border-active: var(--alpha-white-30);
    --card-text: var(--text-oncolor-primary);
    --card-title: var(--text-oncolor-primary);
    --card-subtitle: var(--text-oncolor-secondary);
    --card-number: var(--text-oncolor-primary);
    --icon-bg-color: var(--alpha-white-10);
    --icon-color: var(--featuredicons-icon-oncolor);
    --card-rating: var(--alpha-white-80)
}

.nds-card:is(a,button) {
    cursor: pointer
}

    .nds-card:is(a,button):hover {
        background-color: var(--_card-bg-hover)
    }

    .nds-card:is(a,button):active {
        transform: translateY(0)
    }

    .nds-card:is(a,button).nds-shadow:hover {
        box-shadow: var(--shadow-lg)
    }

    .nds-card:is(a,button).nds-shadow:active {
        box-shadow: var(--shadow-md)
    }

    .nds-card:is(a,button).nds-stroke:hover {
        border-color: var(--_card-border-hover)
    }

    .nds-card:is(a,button).nds-stroke:active {
        border-color: var(--_card-border-active)
    }

.nds-card:is([disabled],.nds-disabled) {
    --_card-bg: var(--background-disabled);
    --_card-text: var(--text-default-disabled);
    --_card-title: var(--text-default-disabled);
    --_card-subtitle: var(--text-default-disabled);
    --_card-number: var(--text-default-disabled);
    --_card-border: var(--border-disabled);
    --_card-icon: var(--icon-default-400);
    --_card-icon-bg: var(--background-inverse-disabled);
    --icon-color: var(--icon-default-400);
    --icon-bg-color: var(--background-inverse-disabled);
    --_card-rating: var(--text-default-disabled);
    box-shadow: none;
    pointer-events: none
}

    .nds-card:is([disabled],.nds-disabled) :is(.nds-card-image,.nds-card-meta,.nds-card-actions) {
        opacity: .5
    }

.nds-modal {
    position: fixed;
    inset: 0;
    z-index: 1101;
    max-height: 80svh;
    height: fit-content;
    margin: auto;
    overflow: visible;
    transition: transform var(--nds-transition),opacity var(--nds-transition);
    opacity: 1
}

    .nds-modal.nds-card {
        max-width: 600px;
        width: calc(100% - var(--spacing-xl)*2);
        overflow-y: auto;
        transform: translateY(0)
    }

        .nds-modal.nds-card[data-state=closing] {
            opacity: 0
        }

@media(max-width: 600px) {
    .nds-modal.nds-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
        inset: auto 0 0 0;
        border-radius: var(--components-card-radius) var(--components-card-radius) 0 0;
        min-height: 256px;
        transform: translateY(100%);
        opacity: 1
    }

        .nds-modal.nds-card .nds-card-actions {
            flex-direction: column;
            gap: var(--spacing-lg, 12px)
        }

            .nds-modal.nds-card .nds-card-actions .nds-btn {
                width: 100%
            }

                .nds-modal.nds-card .nds-card-actions .nds-btn .nds-label {
                    text-align: center
                }

        .nds-modal.nds-card[data-state=open] {
            transform: translateY(0)
        }

        .nds-modal.nds-card[data-state=closing] {
            transform: translateY(100%)
        }
}

.nds-modal.nds-sm {
    max-width: 400px
}

@media(max-width: 600px) {
    .nds-modal.nds-sm {
        max-width: 100%
    }
}

.nds-modal.nds-md {
    max-width: 600px
}

.nds-modal.nds-lg {
    max-width: 800px
}

.nds-modal.nds-full {
    max-width: calc(100vw - var(--spacing-10xl))
}

@media(max-width: 600px) {
    .nds-modal.nds-full {
        max-width: 100%
    }
}

.nds-modal[role=dialog]:focus {
    outline: none
}

.nds-modal {
    cursor: default
}

.nds-form-container.nds-check-container:not([hidden]).nds-md {
    --nds-input-size: 20px;
    gap: var(--spacing-lg)
}

.nds-form-container.nds-check-container:not([hidden]).nds-lg {
    --nds-input-size: 24px;
    gap: var(--spacing-xl)
}

.nds-form-container.nds-check-container:not([hidden]) > .nds-form-header .nds-label {
    font-size: var(--typo-text-md-FS);
    line-height: var(--nds-input-size, 16px)
}

.nds-form-container.nds-check-container:not([hidden]) .nds-form-control.focused:focus-visible {
    outline: 2px solid var(--colors-base-black) !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 0 0 3px var(--focus-inner) !important
}

.nds-check-container .nds-form-control input[type=checkbox] {
    width: var(--nds-input-size, 16px);
    height: var(--nds-input-size, 16px);
    appearance: none;
    position: relative;
    z-index: 1
}

    .nds-check-container .nds-form-control input[type=checkbox]:not(:disabled) {
        cursor: pointer
    }

    .nds-check-container .nds-form-control input[type=checkbox]:focus-visible {
        outline: 2px solid var(--colors-base-black);
        outline-offset: 2px;
        border-radius: var(--radius-xs)
    }

    .nds-check-container .nds-form-control input[type=checkbox]::before, .nds-check-container .nds-form-control input[type=checkbox]::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: var(--radius-xs)
    }

    .nds-check-container .nds-form-control input[type=checkbox]::before {
        background-color: var(--checkbox-tile-bg, var(--background-default));
        box-shadow: 0 0 0 1px var(--checkbox-tile-border, var(--controls-control-border));
        z-index: 1
    }

    .nds-check-container .nds-form-control input[type=checkbox]::after {
        background: var(--checkbox-glyph-bg, var(--background-default));
        mask: center/80% no-repeat;
        z-index: 2
    }

    .nds-check-container .nds-form-control input[type=checkbox]:is(:checked,:indeterminate)::before {
        --checkbox-tile-bg: var(--controls-control-primary-checked);
        --checkbox-tile-border: var(--checkbox-tile-bg)
    }

    .nds-check-container .nds-form-control input[type=checkbox]:is(:checked,:indeterminate)::after {
        --checkbox-glyph-bg: var(--icon-oncolor);
        mask-image: var(--nds-icon-checkmark)
    }

    .nds-check-container .nds-form-control input[type=checkbox]:is(:checked,:indeterminate):not(:disabled):hover::before {
        --checkbox-tile-bg: var(--checkbox-primary-hovered)
    }

    .nds-check-container .nds-form-control input[type=checkbox]:is(:checked,:indeterminate):not(:disabled):active::before {
        --checkbox-tile-bg: var(--checkbox-primary-pressed)
    }

    .nds-check-container .nds-form-control input[type=checkbox]:indeterminate::after {
        mask-image: var(--nds-icon-dash)
    }

    .nds-check-container .nds-form-control input[type=checkbox]:not(:checked,:indeterminate,:disabled):hover::before {
        --checkbox-tile-border: var(--controls-control-neutral-hovered)
    }

    .nds-check-container .nds-form-control input[type=checkbox]:not(:checked,:indeterminate,:disabled):active::before {
        --checkbox-tile-border: var(--controls-control-neutral-pressed)
    }

    .nds-check-container .nds-form-control input[type=checkbox].nds-neutral:is(:checked,:indeterminate)::before {
        --checkbox-tile-bg: var(--controls-control-neutral-checked)
    }

    .nds-check-container .nds-form-control input[type=checkbox].nds-neutral:is(:checked,:indeterminate):not(:disabled):hover::before {
        --checkbox-tile-bg: var(--controls-control-neutral-hovered)
    }

    .nds-check-container .nds-form-control input[type=checkbox].nds-neutral:is(:checked,:indeterminate):not(:disabled):active::before {
        --checkbox-tile-bg: var(--controls-control-neutral-pressed)
    }

    .nds-check-container .nds-form-control input[type=checkbox]:disabled::before {
        --checkbox-tile-border: var(--background-disabled)
    }

    .nds-check-container .nds-form-control input[type=checkbox]:is(:checked,:indeterminate):disabled::before {
        --checkbox-tile-bg: var(--background-disabled);
        --checkbox-tile-border: var(--checkbox-tile-bg)
    }

    .nds-check-container .nds-form-control input[type=checkbox]:is(:checked,:indeterminate):disabled::after {
        --checkbox-glyph-bg: var(--controls-control-icon-disabled)
    }

.nds-check-container[data-state~=readonly] .nds-form-control input[type=checkbox]::before, .nds-check-container[data-state~=readonly] .nds-form-control input[type=checkbox]:hover::before, .nds-check-container[data-state~=readonly] .nds-form-control input[type=checkbox]:active::before {
    --checkbox-tile-border: var(--background-disabled)
}

.nds-check-container[data-state~=readonly] .nds-form-control input[type=checkbox]:is(:checked,:indeterminate)::before, .nds-check-container[data-state~=readonly] .nds-form-control input[type=checkbox]:is(:checked,:indeterminate):hover::before, .nds-check-container[data-state~=readonly] .nds-form-control input[type=checkbox]:is(:checked,:indeterminate):active::before, .nds-check-container[data-state~=readonly] .nds-form-control input[type=checkbox].nds-neutral:is(:checked,:indeterminate)::before, .nds-check-container[data-state~=readonly] .nds-form-control input[type=checkbox].nds-neutral:is(:checked,:indeterminate):hover::before, .nds-check-container[data-state~=readonly] .nds-form-control input[type=checkbox].nds-neutral:is(:checked,:indeterminate):active::before {
    --checkbox-tile-bg: var(--background-default)
}

.nds-check-container[data-state~=readonly] .nds-form-control input[type=checkbox]:is(:checked,:indeterminate)::after {
    --checkbox-glyph-bg: var(--controls-control-primary-checked)
}

.nds-check-container[data-state~=readonly] .nds-form-control input[type=checkbox].nds-neutral:is(:checked,:indeterminate)::after {
    --checkbox-glyph-bg: var(--controls-control-neutral-checked)
}

:root[data-theme=dark] .nds-check-container[data-state~=readonly] .nds-form-control input[type=checkbox].nds-neutral:is(:checked,:indeterminate)::after {
    --checkbox-glyph-bg: var(--icon-oncolor)
}

.nds-chip {
    --_chip-bg: var(--chip-bg, var(--chip-background-neutral-default));
    --_chip-text: var(--chip-text, var(--chip-text-neutral-default));
    --_chip-icon: var(--chip-icon, var(--_chip-text));
    --_chip-size: var(--chip-size, 24px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    height: var(--_chip-size);
    line-height: var(--_chip-size);
    background-color: var(--_chip-bg);
    color: var(--_chip-text)
}

    .nds-chip.nds-rounded {
        border-radius: 999px
    }

    .nds-chip:is(:focus-visible,[data-state~=focused]) {
        outline: 2px solid var(--focus-outline) !important;
        outline-offset: -2px !important;
        box-shadow: inset 0 0 0 3px var(--focus-inner) !important
    }

    .nds-chip:is(:disabled,[data-state~=disabled]) {
        opacity: .5;
        cursor: not-allowed;
        pointer-events: none;
        background-color: var(--background-disabled);
        color: var(--text-default-disabled)
    }

    .nds-chip .nds-label {
        --_truncate: var(--truncate, 1);
        overflow: hidden;
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: var(--_truncate);
        line-clamp: var(--_truncate);
        text-overflow: ellipsis;
        padding-inline: var(--spacing-xxs);
        text-align: start;
        max-width: 160px
    }

    .nds-chip.nds-md, .nds-chip {
        --chip-size: 24px;
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--typo-text-xs-FS)
    }

        .nds-chip.nds-sm {
            --chip-size: 20px;
            padding: var(--spacing-xs) var(--spacing-md);
            font-size: var(--typo-text-xs-FS)
        }

        .nds-chip.nds-lg {
            --chip-size: 32px;
            padding: var(--spacing-md) var(--spacing-lg);
            font-size: var(--typo-text-md-FS)
        }

        .nds-chip:is(.nds-primary,.nds-green) {
            --chip-bg: var(--chip-background-primary-default);
            --chip-text: var(--chip-text-primary-default)
        }

            .nds-chip:is(.nds-primary,.nds-green):is(:hover,[data-state~=hover]) {
                --chip-bg: var(--chip-background-primary-hovered)
            }

            .nds-chip:is(.nds-primary,.nds-green):is(:active,.pressed,[data-state~=pressed]) {
                --chip-bg: var(--chip-background-primary-pressed);
                --chip-text: var(--chip-text-primary-selected)
            }

            .nds-chip:is(.nds-primary,.nds-green)[data-state~=selected] {
                --chip-bg: var(--chip-background-primary-selected);
                --chip-text: var(--chip-text-oncolor-primary)
            }

            .nds-chip:is(.nds-primary,.nds-green):is(:focus-visible,[data-state~=focused]) {
                --chip-bg: var(--chip-background-primary-focused);
                --chip-text: var(--chip-text-primary-default)
            }

            .nds-chip:is(.nds-primary,.nds-green).nds-oncolor {
                --chip-bg: var(--chip-background-on-color-default);
                --chip-text: var(--colors-base-black)
            }

                .nds-chip:is(.nds-primary,.nds-green).nds-oncolor:is(:hover,[data-state~=hover]) {
                    --chip-bg: var(--chip-background-on-color-hovered)
                }

                .nds-chip:is(.nds-primary,.nds-green).nds-oncolor:is(:active,.pressed,[data-state~=pressed]) {
                    --chip-bg: var(--chip-background-on-color-pressed)
                }

                .nds-chip:is(.nds-primary,.nds-green).nds-oncolor[data-state~=selected] {
                    --chip-bg: var(--chip-background-on-color-selected)
                }

                .nds-chip:is(.nds-primary,.nds-green).nds-oncolor:is(:focus-visible,[data-state~=focused]) {
                    --chip-bg: var(--chip-background-on-color-focused);
                    outline: 2px solid var(--colors-base-white) !important;
                    outline-offset: -1px !important;
                    box-shadow: inset 0 0 0 3px var(--colors-base-black) !important
                }

                .nds-chip:is(.nds-primary,.nds-green).nds-oncolor:is(:disabled,[data-state~=disabled]) {
                    background-color: var(--chip-background-on-color-disabled);
                    color: var(--text-default-oncolor-disabled)
                }

        .nds-chip:is(.nds-neutral,.nds-gray) {
            --chip-bg: var(--chip-background-neutral-default);
            --chip-text: var(--chip-text-neutral-default)
        }

            .nds-chip:is(.nds-neutral,.nds-gray):is(:hover,[data-state~=hover]) {
                --chip-bg: var(--chip-background-neutral-hovered)
            }

            .nds-chip:is(.nds-neutral,.nds-gray):is(:active,.pressed,[data-state~=pressed]) {
                --chip-bg: var(--chip-background-neutral-pressed)
            }

            .nds-chip:is(.nds-neutral,.nds-gray)[data-state~=selected] {
                --chip-bg: var(--chip-background-neutral-selected);
                --chip-text: var(--chip-text-neutral-selected)
            }

            .nds-chip:is(.nds-neutral,.nds-gray):is(:focus-visible,[data-state~=focused]) {
                --chip-bg: var(--chip-background-neutral-focused);
                --chip-text: var(--chip-text-neutral-default)
            }

            .nds-chip:is(.nds-neutral,.nds-gray).nds-oncolor {
                --chip-bg: var(--chip-background-on-color-default);
                --chip-text: var(--colors-base-black)
            }

                .nds-chip:is(.nds-neutral,.nds-gray).nds-oncolor:is(:hover,[data-state~=hover]) {
                    --chip-bg: var(--chip-background-on-color-hovered)
                }

                .nds-chip:is(.nds-neutral,.nds-gray).nds-oncolor:is(:active,.pressed,[data-state~=pressed]) {
                    --chip-bg: var(--chip-background-on-color-pressed)
                }

                .nds-chip:is(.nds-neutral,.nds-gray).nds-oncolor[data-state~=selected] {
                    --chip-bg: var(--chip-background-on-color-selected)
                }

                .nds-chip:is(.nds-neutral,.nds-gray).nds-oncolor:is(:focus-visible,[data-state~=focused]) {
                    --chip-bg: var(--chip-background-on-color-focused);
                    outline: 2px solid var(--colors-base-white) !important;
                    outline-offset: -1px !important;
                    box-shadow: inset 0 0 0 3px var(--colors-base-black) !important
                }

                .nds-chip:is(.nds-neutral,.nds-gray).nds-oncolor:is(:disabled,[data-state~=disabled]) {
                    background-color: var(--chip-background-on-color-disabled);
                    color: var(--text-default-oncolor-disabled)
                }

        .nds-chip :is(.nds-icon,i) {
            color: var(--_chip-icon)
        }

        .nds-chip.nds-lead-icon :is(.nds-icon,i):first-child {
            margin-inline-end: var(--spacing-xs)
        }

        .nds-chip.nds-trail-icon :is(.nds-icon,i):last-child {
            margin-inline-start: var(--spacing-xs)
        }

.nds-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center
}

.nds-date-picker {
    position: relative
}

    .nds-date-picker .nds-form-control > input, .nds-date-picker .nds-form-control > i {
        cursor: pointer
    }

    .nds-date-picker .nds-form-control::after {
        content: "";
        pointer-events: none;
        position: absolute;
        left: var(--spacing-md);
        transition: transform .1s ease;
        display: inline-block;
        width: 20px;
        height: 20px;
        background: currentColor;
        mask: var(--nds-icon-arrow-left-01) center/contain no-repeat;
        rotate: -90deg;
        top: 50%;
        translate: 0 -50%
    }

:is(html[dir=ltr],.ltr) .nds-date-picker .nds-form-control::after {
    left: unset;
    right: var(--spacing-md)
}

.nds-date-picker[data-state~=open] .nds-form-control::after {
    transform: rotate(180deg)
}

.nds-date-picker-dropdown {
    --btn-size: 32px;
    position: fixed;
    z-index: 1000;
    padding: 0;
    max-width: 500px;
    min-width: 350px;
    background-color: var(--form-field-background-default);
    border: 1px solid var(--form-field-border-default);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-md)
}

    .nds-date-picker-dropdown[data-state~=hidden] {
        display: none
    }

    .nds-date-picker-dropdown .nds-calendar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--divider-color)
    }

    .nds-date-picker-dropdown .nds-calendar-title {
        flex: 1;
        display: flex;
        justify-content: space-between
    }

    .nds-date-picker-dropdown .nds-month-year-selectors {
        display: flex
    }

    .nds-date-picker-dropdown .nds-calendar-month-switch {
        display: flex
    }

    .nds-date-picker-dropdown :is(.nds-month-dropmenu,.nds-year-dropmenu) .nds-dropmenu-menu {
        min-width: unset;
        padding: var(--spacing-md)
    }

    .nds-date-picker-dropdown :is(.nds-month-dropmenu,.nds-year-dropmenu) .nds-dropmenu-scroll {
        max-height: 200px;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs)
    }

@media(max-width: 600px) {
    .nds-date-picker-dropdown :is(.nds-month-dropmenu,.nds-year-dropmenu) .nds-dropmenu-trigger .nds-label {
        max-width: 100px;
        overflow: clip;
        text-overflow: ellipsis
    }
}

.nds-date-picker-dropdown .nds-calendar-body {
    padding: var(--spacing-md)
}

.nds-date-picker-dropdown .nds-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px
}

    .nds-date-picker-dropdown .nds-calendar-weekdays .nds-weekday {
        text-align: center;
        font-size: var(--typo-text-md-FS);
        font-weight: 400;
        color: var(--text-primary-paragraph);
        padding: var(--spacing-md) var(--spacing-xs);
        min-width: var(--btn-size)
    }

@media(max-width: 600px) {
    .nds-date-picker-dropdown .nds-calendar-weekdays .nds-weekday {
        font-size: var(--typo-text-sm-FS)
    }
}

.nds-date-picker-dropdown .nds-calendar-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    justify-items: center;
    overflow: hidden
}

    .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell {
        border-radius: 50% !important;
        width: var(--btn-size);
        height: var(--btn-size);
        font-weight: 400;
        padding: 0;
        --btn-size: 40px
    }

        .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell .nds-label {
            text-align: center
        }

        .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell::before {
            display: none;
            content: "";
            position: absolute;
            background-color: var(--form-datecell-background-100);
            width: var(--btn-size);
            height: var(--btn-size);
            z-index: -1
        }

        .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=other-month] {
            color: var(--text-default-disabled)
        }

        .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=today] {
            background-color: unset;
            border: 2px solid var(--button-background-primary-default);
            color: var(--text-primary);
            font-weight: 700
        }

            .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=today][data-state~=selected] {
                outline: 2px solid var(--button-background-primary-default);
                outline-offset: -2px !important;
                box-shadow: inset 0 0 0 2px var(--colors-base-white)
            }

                .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=today][data-state~=selected]:hover {
                    outline: 2px solid var(--button-background-primary-hover)
                }

        .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=selected] {
            background-color: var(--button-background-primary-default);
            color: var(--text-oncolor-primary)
        }

            .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=selected]:hover {
                background-color: var(--form-datecell-background-hovered)
            }

        .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell:is([data-state~=range-start],[data-state~=range-end]) {
            background-color: var(--form-datecell-background-default);
            color: var(--text-oncolor-primary)
        }

            .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell:is([data-state~=range-start],[data-state~=range-end])[data-state~=today] {
                outline: 2px solid var(--form-datecell-background-default);
                outline-offset: -2px !important
            }

                .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell:is([data-state~=range-start],[data-state~=range-end])[data-state~=today]:hover {
                    background-color: var(--form-datecell-background-hovered);
                    outline: 2px solid var(--form-datecell-background-hovered)
                }

            .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell:is([data-state~=range-start],[data-state~=range-end]):hover {
                background-color: var(--form-datecell-background-hovered)
            }

        .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=range-start]:not([data-state~=range-end])[data-state~=has-range-end]::before {
            display: block;
            transform: scaleX(1) translateX(-50%)
        }

:is(html[dir=ltr],.ltr) .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=range-start]:not([data-state~=range-end])[data-state~=has-range-end]::before {
    transform: scaleX(1) translateX(50%)
}

.nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=range-end]:not([data-state~=range-start])[data-state~=has-range-start]::before {
    content: "";
    display: block;
    transform: scaleX(1) translateX(50%)
}

:is(html[dir=ltr],.ltr) .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=range-end]:not([data-state~=range-start])[data-state~=has-range-start]::before {
    transform: scaleX(1) translateX(-50%)
}

.nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=in-range]:not([data-state~=range-start],[data-state~=range-end]) {
    background-color: var(--form-datecell-today-background-default)
}

    .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=in-range]:not([data-state~=range-start],[data-state~=range-end])::before {
        content: "";
        display: block;
        transform: scaleX(2)
    }

    .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=in-range]:not([data-state~=range-start],[data-state~=range-end]):hover {
        background-color: var(--form-datecell-background-200)
    }

    .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell[data-state~=in-range]:not([data-state~=range-start],[data-state~=range-end]):active {
        background-color: var(--form-datecell-background-300)
    }

@media(max-width: 600px) {
    .nds-date-picker-dropdown .nds-calendar-dates .nds-date-cell {
        --btn-size: 32px
    }
}

.nds-date-picker-dropdown .nds-calendar-footer {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-top: 1px solid var(--divider-color);
    gap: var(--spacing-2xl)
}

    .nds-date-picker-dropdown .nds-calendar-footer :is(.nds-calendar-action-start,.nds-calendar-action-end) {
        display: flex;
        gap: var(--spacing-md)
    }

.nds-dropmenu {
    position: relative;
    display: inline-flex
}

.nds-dropmenu-scroll {
    overflow: hidden;
    overflow-y: auto;
    max-height: 400px;
    overscroll-behavior: contain
}

.nds-dropmenu-item {
    display: flex;
    justify-content: flex-start;
    text-decoration: none;
    width: 100%
}

    .nds-dropmenu-item:is(:link,:visited) {
        text-decoration: none
    }

.nds-dropmenu-action {
    --gap: var(--spacing-lg)
}

    .nds-dropmenu-action .nds-btn {
        width: 100%
    }

        .nds-dropmenu-action .nds-btn .nds-label {
            width: 100%;
            text-align: center
        }

.nds-dropmenu-menu {
    --_menu-padding: var(--menu-padding, var(--spacing-md, 8px));
    --_dropmenu-offset: var(--spacing-xs, 4px);
    --_dropmenu-slide: calc(var(--dropmenu-slide, 8px) * -1);
    --_dropmenu-width: var(--dropmenu-width, fit-content);
    --_dropmenu-min-width: var(--dropmenu-min-width, max-content);
    --_dropmenu-max-width: var(--dropmenu-max-width, calc(100vw - 16px));
    --divider: var(--_menu-padding);
    display: none;
    position: fixed;
    z-index: 1000;
    width: var(--_dropmenu-width);
    min-width: var(--_dropmenu-min-width);
    max-width: var(--_dropmenu-max-width);
    padding: var(--_menu-padding);
    list-style: none;
    background-color: var(--background-menu);
    border: 1px solid var(--border-neutral-secondary);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
    transition: opacity var(--nds-transition),transform var(--nds-transition);
    opacity: 1;
    transform: translateY(0)
}

    .nds-dropmenu-menu .nds-dropmenu-group, .nds-dropmenu-menu .nds-dropmenu-item:not(.nds-btn) {
        margin-top: var(--spacing-2xl);
        margin-bottom: var(--spacing-2xl);
        margin-inline: var(--spacing-md)
    }

        .nds-dropmenu-menu .nds-dropmenu-group: first-child, .nds-dropmenu-menu .nds-dropmenu-item:not(.nds-btn):first-child {
            margin-top: var(--spacing-md)
        }

        .nds-dropmenu-menu .nds-dropmenu-group:last-child, .nds-dropmenu-menu .nds-dropmenu-item:not(.nds-btn):last-child {
            margin-bottom: var(--spacing-lg)
        }

        .nds-dropmenu-menu .nds-dropmenu-group > .nds-label {
            font-size: var(--typo-text-xs-FS);
            font-weight: 700;
            line-height: var(--typo-text-xs-LH);
            color: var(--text-display)
        }

    .nds-dropmenu-menu .nds-form-control {
        min-width: unset;
        width: 100%
    }

    .nds-dropmenu-menu[data-state~=open] {
        display: block
    }

    .nds-dropmenu-menu[data-position-vertical=top] {
        --_dropmenu-slide: var(--dropmenu-slide, 8px)
    }

    .nds-dropmenu-menu[data-state~=opening], .nds-dropmenu-menu[data-state~=closing] {
        opacity: 0;
        transform: translateY(var(--_dropmenu-slide))
    }

@media(max-width: 600px) {
    .nds-dropmenu-menu {
        max-width: calc(100vw - var(--nds-viewport-padding)*4)
    }
}

@media(prefers-reduced-motion: reduce) {
    .nds-dropmenu-menu {
        transition: none
    }
}

.nds-form-container .nds-autocomplete-menu .nds-dropmenu-item mark {
    background-color: var(--autocomplete-highlight);
    color: inherit;
    padding: 0;
    border-radius: 2px
}

.nds-auto-fill:not([hidden]) {
    display: flex;
    gap: var(--spacing-md);
    flex-direction: column
}

    .nds-auto-fill:not([hidden]) > .nds-label {
        font-size: var(--typo-text-clamp-lg-FS);
        line-height: var(--typo-text-clamp-lg-LH);
        color: var(--text-primary);
        font-weight: 500
    }

.nds-filter {
    --dropmenu-min-width: 250px
}

.nds-results-count {
    color: var(--text-secondary-paragraph)
}

.nds-filter-applied:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    min-width: 0;
    align-items: center;
    flex: 1 1 100%;
    min-width: 0
}

    .nds-filter-applied:not([hidden]) > .nds-label {
        font-size: var(--typo-text-clamp-lg-FS);
        font-weight: 500
    }

.nds-filter[data-state~=submitting] {
    opacity: .7;
    pointer-events: none;
    cursor: wait
}

    .nds-filter[data-state~=submitting] .nds-btn {
        pointer-events: none
    }

.nds-filter[data-status=success] :is(.nds-search-input,.nds-form-control input) {
    border-color: var(--border-success)
}

.nds-filter[data-status=error] :is(.nds-search-input,.nds-form-control input) {
    border-color: var(--border-error)
}

.nds-filter-hidden-inputs {
    display: none !important;
    visibility: hidden !important
}

.nds-search-box {
    display: flex;
    gap: var(--spacing-2xl) !important;
    margin: 0 auto;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%
}

@media(max-width: 600px) {
    .nds-search-box {
        gap: var(--spacing-xl)
    }

    .nds-main-nav .nds-search-box {
        padding-inline: var(--spacing-xl)
    }
}

.nds-search-box .nds-search-content {
    display: flex;
    gap: var(--spacing-lg);
    width: 100%
}

    .nds-search-box .nds-search-content .nds-form-control {
        flex: 1
    }

@media(max-width: 600px) {
    .nds-search-box .nds-search-content {
        gap: var(--spacing-md)
    }

        .nds-search-box .nds-search-content :is(.nds-search-btn,.nds-filter-btn) > .nds-label {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0
        }
}

.nds-search-box .nds-auto-fill:not([hidden]) {
    flex-direction: row;
    flex: 1 1 100%;
    align-items: center;
    flex-wrap: wrap
}

    .nds-search-box .nds-auto-fill:not([hidden]) > .nds-label {
        font-size: var(--typo-text-clamp-lg-FS);
        font-weight: 500;
        color: var(--text-default)
    }

.nds-multiselect > .nds-form-control {
    height: auto;
    min-height: var(--_input-size);
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--spacing-sm);
    cursor: text
}

.nds-multiselect-chips {
    padding: var(--spacing-md);
    flex: 1 1 0;
    min-width: 0
}

    .nds-multiselect-chips:empty {
        display: none
    }

.nds-multiselect-placeholder {
    color: var(--form-field-text-placeholder);
    font-size: var(--typo-text-sm-FS);
    align-self: center;
    pointer-events: none
}

.nds-multiselect[data-state~=filled] .nds-multiselect-placeholder {
    display: none
}

.nds-multiselect-values {
    display: none !important
}

.nds-featured-icon {
    --featuredicons-bg-color: var(--icon-bg-color, var(--featuredicons-background-brand-light));
    --featuredicons-icon-color: var(--icon-color, var(--featuredicons-icon-primary));
    --featuredicons-dark-bg-color: var(--dark-bg-color, var(--background-success));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--nds-icon-size)/4 - 2px);
    position: relative;
    width: var(--nds-icon-size);
    height: var(--nds-icon-size);
    font-size: calc(var(--nds-icon-size)/2) !important;
    padding: calc(var(--nds-icon-size)/4);
    line-height: calc(var(--nds-icon-size)/2) !important;
    border: unset;
    background-color: var(--featuredicons-bg-color);
    color: var(--featuredicons-icon-color);
    overflow: hidden
}

    .nds-featured-icon.nds-md, .nds-featured-icon {
        --nds-icon-size: 40px
    }

        .nds-featured-icon.nds-sm {
            --nds-icon-size: 32px
        }

        .nds-featured-icon.nds-lg {
            --nds-icon-size: 48px
        }

        .nds-featured-icon.nds-xl {
            --nds-icon-size: 56px
        }

        .nds-featured-icon.nds-circle {
            border-radius: 50%
        }

        .nds-featured-icon.nds-outline {
            background-color: rgba(0,0,0,0);
            border: 2px solid currentColor
        }

        .nds-featured-icon.nds-dark {
            background-color: var(--featuredicons-dark-bg-color);
            border: 2px solid rgba(0,0,0,0)
        }

            .nds-featured-icon.nds-dark :is(.nds-icon,i) {
                color: var(--icon-oncolor)
            }

:root[data-theme=dark] .nds-featured-icon.nds-dark {
    --dark-bg-color: var(--colors-primary-sa-flag-700)
}

    :root[data-theme=dark] .nds-featured-icon.nds-dark[data-status=success] {
        --dark-bg-color: var(--colors-green-700)
    }

    :root[data-theme=dark] .nds-featured-icon.nds-dark[data-status=info] {
        --dark-bg-color: var(--colors-blue-700)
    }

    :root[data-theme=dark] .nds-featured-icon.nds-dark[data-status=warning] {
        --dark-bg-color: var(--colors-yellow-700)
    }

    :root[data-theme=dark] .nds-featured-icon.nds-dark[data-status=error] {
        --dark-bg-color: var(--colors-red-700)
    }

    :root[data-theme=dark] .nds-featured-icon.nds-dark[data-status=neutral] {
        --dark-bg-color: var(--colors-neutral-900)
    }

[data-status=success] {
    --icon-bg-color: var(--featuredicons-background-success-light);
    --icon-color: var(--featuredicons-icon-success);
    --dark-bg-color: var(--background-success)
}

[data-status=info] {
    --icon-bg-color: var(--featuredicons-background-info-light);
    --icon-color: var(--featuredicons-icon-info);
    --dark-bg-color: var(--background-info)
}

[data-status=warning] {
    --icon-bg-color: var(--featuredicons-background-warning-light);
    --icon-color: var(--featuredicons-icon-warning);
    --dark-bg-color: var(--background-warning)
}

:is([data-status=error],[data-status=critical]) {
    --icon-bg-color: var(--featuredicons-background-error-light);
    --icon-color: var(--featuredicons-icon-error);
    --dark-bg-color: var(--background-error)
}

[data-status=neutral] {
    --icon-bg-color: var(--featuredicons-background-default-light);
    --icon-color: var(--featuredicons-icon-neutral);
    --dark-bg-color: var(--background-default)
}

.nds-feedback {
    align-items: center;
    font-size: var(--typo-text-sm-FS);
    line-height: var(--typo-text-sm-LH);
    font-weight: 500;
    gap: var(--spacing-sm)
}

    .nds-feedback:not([hidden]):not([data-status]), .nds-feedback[data-status]:not([hidden]), [data-status] .nds-feedback:not([hidden]) {
        display: flex
    }

    .nds-feedback[data-status=error], [data-status=error] .nds-feedback {
        color: var(--text-error)
    }

    .nds-feedback[data-status=success], [data-status=success] .nds-feedback {
        color: var(--text-success)
    }

    .nds-feedback[data-status=warning], [data-status=warning] .nds-feedback {
        color: var(--text-warning)
    }

    .nds-feedback[data-status=info], [data-status=info] .nds-feedback {
        color: var(--text-info)
    }

:root[data-theme=dark] .nds-feedback:is([data-status=neutral],[data-status=help]):not(.nds-outline) .nds-feedback-icon {
    --feedback-ring: var(--colors-neutral-900)
}

:root[data-theme=dark] :is([data-status=neutral],[data-status=help]) .nds-feedback:not(.nds-outline) .nds-feedback-icon {
    --feedback-ring: var(--colors-neutral-900)
}

:root[data-theme=dark] .nds-feedback:is([data-status=neutral],[data-status=help]).nds-outline .nds-feedback-icon {
    --feedback-color: var(--colors-neutral-300)
}

:root[data-theme=dark] :is([data-status=neutral],[data-status=help]) .nds-feedback.nds-outline .nds-feedback-icon {
    --feedback-color: var(--colors-neutral-300)
}

.nds-feedback.nds-sm {
    --feedback-size: 16px
}

.nds-feedback.nds-md {
    --feedback-size: 24px;
    font-size: var(--typo-text-md-FS);
    line-height: var(--typo-text-md-LH)
}

.nds-feedback .nds-feedback-message {
    flex: 1
}

[data-status=error] {
    --feedback-bg: var(--background-error);
    --feedback-color: var(--icon-error);
    --feedback-ring: var(--icon-error-ring)
}

    [data-status=error] .nds-feedback-icon .nds-icon {
        --nds-icon: var(--nds-icon-cancel-circle)
    }

[data-status=success] {
    --feedback-bg: var(--background-success);
    --feedback-color: var(--icon-success);
    --feedback-ring: var(--icon-success-ring)
}

    [data-status=success] .nds-feedback-icon .nds-icon {
        --nds-icon: var(--nds-icon-checkmark-circle-02)
    }

[data-status=warning] {
    --feedback-bg: var(--background-warning);
    --feedback-color: var(--icon-warning);
    --feedback-ring: var(--icon-warning-ring)
}

    [data-status=warning] .nds-feedback-icon .nds-icon {
        --nds-icon: var(--nds-icon-alert-circle)
    }

[data-status=info] {
    --feedback-bg: var(--background-info);
    --feedback-color: var(--icon-info);
    --feedback-ring: var(--icon-info-ring)
}

:is([data-status=neutral],[data-status=help]) {
    --feedback-bg: var(--icon-neutral);
    --feedback-color: var(--icon-neutral);
    --feedback-ring: var(--icon-neutral-ring)
}

[data-status=help] .nds-feedback-icon .nds-icon {
    --nds-icon: var(--nds-icon-help-circle)
}

.nds-feedback-icon {
    --_feedback-size: var(--feedback-size, 24px);
    --_feedback-bg: var(--feedback-bg, var(--icon-neutral));
    --_feedback-color: var(--feedback-color, var(--icon-neutral));
    --_feedback-ring: var(--feedback-ring, var(--icon-neutral-ring));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    position: relative;
    width: var(--_feedback-size);
    height: var(--_feedback-size);
    font-size: var(--_feedback-size);
    line-height: var(--_feedback-size);
    padding: 0;
    border: unset;
    background-color: var(--_feedback-bg);
    color: var(--_feedback-color)
}

:root[data-theme=dark] .nds-feedback-icon {
    --_feedback-bg: var(--feedback-bg, var(--icon-neutral));
    --_feedback-ring: var(--feedback-ring, var(--colors-neutral-900))
}

.nds-feedback-icon i {
    position: relative;
    z-index: 1
}

.nds-feedback-icon > i {
    color: var(--colors-base-white);
    clip-path: inset(25.5%)
}

.nds-feedback-icon:is(.nds-outline,.nds-feedback.nds-outline>*) {
    background-color: rgba(0,0,0,0)
}

    .nds-feedback-icon:is(.nds-outline,.nds-feedback.nds-outline>*) > i {
        color: var(--_feedback-color);
        clip-path: none
    }

.nds-feedback-icon:is(.nds-ring,.nds-feedback.nds-ring>*) {
    box-shadow: 0 0 0 4px var(--_feedback-ring)
}

.nds-feedback-icon .nds-icon {
    --nds-icon: var(--nds-icon-information-circle)
}

.nds-stepper {
    --stepper-size: 32px;
    --stepper-gap: var(--progressindicator-progress-indicator-gap);
    --_content-gap: var(--gap, var(--spacing-xl));
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--stepper-gap);
    font-family: "IBM Plex Sans Arabic",sans-serif;
    width: 100%;
    align-items: flex-start;
    counter-reset: step-counter
}

    .nds-stepper.nds-lg {
        --stepper-size: 40px;
        --stepper-gap: calc(var(--progressindicator-progress-indicator-gap) * 1.2)
    }

    .nds-stepper.nds-xl {
        --stepper-size: 48px;
        --stepper-gap: calc(var(--progressindicator-progress-indicator-gap) * 1.5)
    }

:is(html[dir=ltr],.ltr) .nds-stepper {
    direction: ltr
}

.nds-stepper .nds-progress-circle {
    display: none
}

.nds-stepper .nds-stepper-next {
    display: none
}

.nds-stepper .nds-stepper-step {
    flex: 1
}

    .nds-stepper .nds-stepper-step:not(:last-child) .nds-stepper-base::after {
        display: block
    }

    .nds-stepper .nds-stepper-step:last-child .nds-stepper-base::after {
        display: none
    }

.nds-stepper .nds-stepper-content {
    text-align: start;
    justify-content: center;
    padding: 0
}

.nds-stepper-step {
    display: flex;
    flex-direction: column;
    gap: var(--progressindicator-progress-text-content-side-padding);
    position: relative;
    counter-increment: step-counter
}

    .nds-stepper-step .nds-stepper-base::after {
        content: "";
        position: absolute;
        top: calc(var(--stepper-size)/2);
        inset-inline-start: var(--stepper-size);
        inset-inline-end: calc(var(--stepper-gap)*-1);
        height: 2px;
        background-color: var(--stepper-line-current)
    }

    .nds-stepper-step[data-state~=completed] .nds-stepper-base::after {
        background-color: var(--stepper-line-completed)
    }

    .nds-stepper-step[data-state~=upcoming] .nds-stepper-base::after {
        background-color: var(--stepper-line-upcomming)
    }

.nds-stepper.nds-center:not(.nds-vertical):not(.nds-radial) .nds-stepper-step {
    align-self: flex-start !important
}

    .nds-stepper.nds-center:not(.nds-vertical):not(.nds-radial) .nds-stepper-step .nds-stepper-base {
        transform: translateX(calc(-50% + var(--stepper-size) / 2))
    }

:is(html[dir=ltr],.ltr) .nds-stepper.nds-center:not(.nds-vertical):not(.nds-radial) .nds-stepper-step .nds-stepper-base {
    transform: translateX(calc(50% - var(--stepper-size) / 2))
}

.nds-stepper.nds-center:not(.nds-vertical):not(.nds-radial) .nds-stepper-step:last-child .nds-stepper-base {
    margin-inline: auto
}

.nds-stepper.nds-center:not(.nds-vertical):not(.nds-radial) .nds-stepper-step .nds-stepper-content {
    align-items: center;
    text-align: center
}

.nds-stepper-base {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative
}

.nds-stepper-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--stepper-size);
    height: var(--stepper-size);
    border-radius: 50%;
    border: 2px solid var(--stepper-button-current);
    background-color: var(--stepper-button-background);
    color: var(--stepper-button-current);
    font-size: calc(var(--stepper-size)/2);
    font-weight: 500;
    transition: var(--nds-transition);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    font-size: 0
}

    .nds-stepper-circle:hover {
        border-color: var(--stepper-button-current-hovered);
        color: var(--stepper-button-current-hovered)
    }

    .nds-stepper-circle::before {
        content: counter(step-counter);
        font-size: calc(var(--stepper-size)/2);
        font-weight: 500;
        color: inherit
    }

    .nds-stepper-circle[data-step-text] {
        font-size: 0;
        line-height: 1
    }

        .nds-stepper-circle[data-step-text]::before {
            content: attr(data-step-text);
            font-size: calc(var(--stepper-size)/2);
            font-weight: 500
        }

.nds-stepper-content {
    display: flex;
    flex-direction: column;
    gap: var(--_content-gap)
}

.nds-stepper-text {
    display: flex;
    flex-direction: column;
    line-height: normal;
    gap: max(var(--spacing-xs),var(--progress-size, var(--stepper-size))/16)
}

.nds-stepper-title {
    font-size: var(--typo-text-md-FS);
    font-weight: 600;
    color: var(--stepper-text-primary);
    line-height: 1;
    margin: 0
}

.nds-stepper-description {
    font-size: var(--typo-text-sm-FS);
    font-weight: 400;
    color: var(--stepper-text-secondary);
    margin: 0
}

.nds-stepper-action {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md)
}

    .nds-stepper-action .nds-btn {
        flex: 1
    }

.nds-stepper-step[data-state~=completed] .nds-stepper-circle {
    border-color: var(--stepper-button-completed);
    background-color: var(--stepper-button-completed);
    color: var(--colors-base-white)
}

    .nds-stepper-step[data-state~=completed] .nds-stepper-circle:hover {
        border-color: var(--stepper-button-completed-hovered);
        background-color: var(--stepper-button-completed-hovered)
    }

    .nds-stepper-step[data-state~=completed] .nds-stepper-circle::before, .nds-stepper-step[data-state~=completed] .nds-stepper-circle[data-step-text]::before {
        content: "" !important;
        display: inline-block;
        width: calc(var(--stepper-size)/2);
        height: calc(var(--stepper-size)/2);
        background: currentColor;
        mask: var(--nds-icon-checkmark) center/contain no-repeat
    }

.nds-stepper-step[data-state~=current] .nds-stepper-circle {
    border-color: var(--stepper-button-current);
    color: var(--stepper-button-current)
}

    .nds-stepper-step[data-state~=current] .nds-stepper-circle:hover {
        border-color: var(--stepper-button-current-hovered);
        color: var(--stepper-button-current-hovered)
    }

:root[data-theme=dark] :not(.nds-oncolor) > .nds-stepper-step[data-state~=current] .nds-stepper-circle::before {
    color: var(--text-success)
}

.nds-stepper-step[data-state~=upcoming] .nds-stepper-circle {
    border-color: var(--stepper-button-upcomming);
    color: var(--stepper-button-upcomming)
}

    .nds-stepper-step[data-state~=upcoming] .nds-stepper-circle:hover {
        border-color: var(--stepper-button-upcomming-hovered);
        color: var(--stepper-button-upcomming-hovered)
    }

.nds-stepper-step[data-state~=upcoming] :is(.nds-stepper-title,.nds-stepper-description) {
    color: var(--stepper-text-tertiary)
}

.nds-stepper.nds-dot {
    --stepper-size: 16px
}

    .nds-stepper.nds-dot .nds-stepper-circle {
        border: 0
    }

        .nds-stepper.nds-dot .nds-stepper-circle::before, .nds-stepper.nds-dot .nds-stepper-circle[data-step-text]::before {
            content: "" !important;
            font-size: 0 !important;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--colors-base-white)
        }

    .nds-stepper.nds-dot .nds-stepper-step[data-state~=completed] .nds-stepper-circle {
        background-color: var(--stepper-button-completed)
    }

        .nds-stepper.nds-dot .nds-stepper-step[data-state~=completed] .nds-stepper-circle:hover {
            background-color: var(--stepper-button-completed-hovered)
        }

        .nds-stepper.nds-dot .nds-stepper-step[data-state~=completed] .nds-stepper-circle::before, .nds-stepper.nds-dot .nds-stepper-step[data-state~=completed] .nds-stepper-circle[data-step-text]::before {
            background-color: var(--stepper-button-completed)
        }

        .nds-stepper.nds-dot .nds-stepper-step[data-state~=completed] .nds-stepper-circle:hover::before, .nds-stepper.nds-dot .nds-stepper-step[data-state~=completed] .nds-stepper-circle:hover[data-step-text]::before {
            background-color: var(--stepper-button-completed-hovered)
        }

    .nds-stepper.nds-dot .nds-stepper-step[data-state~=current] .nds-stepper-circle {
        background-color: var(--stepper-button-current)
    }

        .nds-stepper.nds-dot .nds-stepper-step[data-state~=current] .nds-stepper-circle:hover {
            background-color: var(--stepper-button-current-hovered)
        }

    .nds-stepper.nds-dot .nds-stepper-step[data-state~=upcoming] .nds-stepper-circle {
        border: 2px solid var(--stepper-button-upcomming)
    }

        .nds-stepper.nds-dot .nds-stepper-step[data-state~=upcoming] .nds-stepper-circle:hover {
            border-color: var(--stepper-button-upcomming-hovered)
        }

        .nds-stepper.nds-dot .nds-stepper-step[data-state~=upcoming] .nds-stepper-circle::before, .nds-stepper.nds-dot .nds-stepper-step[data-state~=upcoming] .nds-stepper-circle[data-step-text]::before {
            display: none
        }

    .nds-stepper.nds-dot.nds-vertical .nds-stepper-step .nds-stepper-content {
        justify-content: flex-start
    }

.nds-stepper.nds-vertical {
    flex-direction: column;
    --stepper-gap: calc(var(--stepper-size)*1.5)
}

    .nds-stepper.nds-vertical .nds-stepper-step {
        position: relative;
        flex-direction: row
    }

        .nds-stepper.nds-vertical .nds-stepper-step .nds-stepper-base::after {
            top: var(--stepper-size);
            inset-inline-start: calc(var(--stepper-size)/2 - 1px);
            inset-inline-end: unset;
            bottom: calc(var(--stepper-gap)*-1);
            width: 2px;
            height: unset;
            z-index: 0
        }

        .nds-stepper.nds-vertical .nds-stepper-step:last-child {
            padding-bottom: 0
        }

            .nds-stepper.nds-vertical .nds-stepper-step:last-child .nds-stepper-base::after {
                display: none
            }

        .nds-stepper.nds-vertical .nds-stepper-step .nds-stepper-base {
            flex-direction: row;
            align-items: flex-start;
            gap: var(--spacing-md)
        }

        .nds-stepper.nds-vertical .nds-stepper-step .nds-stepper-content {
            flex: 1
        }

    .nds-stepper.nds-vertical.nds-reverse {
        flex-direction: column-reverse
    }

        .nds-stepper.nds-vertical.nds-reverse .nds-stepper-step[data-state~=completed] + :not([data-state~=upcoming]) .nds-stepper-base::after {
            background-color: var(--stepper-line-completed)
        }

        .nds-stepper.nds-vertical.nds-reverse .nds-stepper-step .nds-stepper-base::after {
            display: none
        }

        .nds-stepper.nds-vertical.nds-reverse .nds-stepper-step ~ .nds-stepper-step .nds-stepper-base::after {
            display: block
        }

.nds-stepper.nds-radial {
    --stepper-size: 64px;
    --progress-size: var(--stepper-size);
    --stepper-gap: calc(var(--progress-size)/8);
    align-items: center
}

    .nds-stepper.nds-radial .nds-stepper-step {
        flex-direction: row;
        position: relative
    }

        .nds-stepper.nds-radial .nds-stepper-step:not([data-state~=current]) {
            display: none
        }

    .nds-stepper.nds-radial .nds-stepper-base {
        display: none
    }

    .nds-stepper.nds-radial.nds-sm {
        --stepper-size: 48px
    }

    .nds-stepper.nds-radial.nds-lg {
        --stepper-size: 96px
    }

    .nds-stepper.nds-radial.nds-xl {
        --stepper-size: 120px
    }

    .nds-stepper.nds-radial .nds-stepper-content {
        --content-gap: 0;
        width: 100%
    }

        .nds-stepper.nds-radial .nds-stepper-content .nds-stepper-title {
            font-size: clamp(14px,var(--stepper-size)*.1 + 8px,20px)
        }

        .nds-stepper.nds-radial .nds-stepper-content .nds-stepper-description {
            font-size: clamp(10px,var(--stepper-size)*.056 + 7.3px,14px)
        }

        .nds-stepper.nds-radial .nds-stepper-content .nds-stepper-next {
            display: block;
            font-size: clamp(10px,var(--stepper-size)*.056 + 7.3px,14px);
            color: var(--stepper-text-tertiary)
        }

    .nds-stepper.nds-radial.nds-neutral .nds-progress-circle {
        --progress-color: var(--colors-neutral-700)
    }

:root[data-theme=dark] .nds-stepper.nds-radial.nds-neutral .nds-progress-circle {
    --progress-color: var(--colors-neutral-200)
}

.nds-stepper.nds-radial .nds-progress-circle {
    --progress-size: var(--stepper-size);
    --progress-track-color: var(--colors-neutral-100);
    --progress-color: var(--background-primary);
    align-self: flex-start;
    --_progress-track-color: var(--progress-track-color, var(--colors-neutral-100));
    --_progress-color: var(--progress-color, var(--background-primary));
    position: relative;
    width: var(--progress-size, var(--progress-size)) !important;
    height: var(--progress-size, var(--progress-size)) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0
}

:root[data-theme=dark] .nds-stepper.nds-radial .nds-progress-circle {
    --progress-track-color: var(--alpha-white-10)
}

.nds-stepper.nds-radial .nds-progress-circle svg {
    width: var(--progress-size, var(--progress-size)) !important;
    height: var(--progress-size, var(--progress-size)) !important;
    transform: rotate(-90deg) !important
}

:is(html[dir=ltr],.ltr) .nds-stepper.nds-radial .nds-progress-circle svg {
    transform: rotate(-90deg) scaleY(-1) !important
}

.nds-stepper.nds-radial .nds-progress-circle svg circle {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    transform: scale(1.08);
    transform-origin: center center
}

    .nds-stepper.nds-radial .nds-progress-circle svg circle.nds-progress-bg {
        stroke: var(--_progress-track-color)
    }

    .nds-stepper.nds-radial .nds-progress-circle svg circle.nds-progress-track {
        stroke: var(--_progress-color)
    }

.nds-stepper.nds-radial .nds-progress-circle .nds-progress-info {
    position: absolute;
    color: var(--text-primary-paragraph);
    line-height: 1;
    align-items: center;
    text-align: center
}

.nds-stepper.nds-radial .nds-progress-circle svg circle.nds-progress-track {
    stroke-dasharray: 62.83 !important;
    stroke-dashoffset: calc(62.83 - 62.83*var(--current-step)/var(--total-steps));
    transition: stroke-dashoffset .3s ease !important
}

.nds-stepper.nds-radial .nds-progress-circle .nds-progress-steps {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    font-size: calc(var(--progress-size)/5);
    font-weight: 700;
    white-space: nowrap;
    gap: clamp(2px,var(--progress-size)*.05,4px);
    line-height: 1
}

.nds-stepper.nds-oncolor .nds-stepper-title {
    color: var(--alpha-white-40)
}

.nds-stepper.nds-oncolor .nds-stepper-description {
    color: var(--alpha-white-30)
}

.nds-stepper.nds-oncolor .nds-stepper-next {
    color: var(--alpha-white-30)
}

.nds-stepper.nds-oncolor .nds-stepper-step .nds-stepper-base:after {
    background-color: var(--alpha-white-30)
}

.nds-stepper.nds-oncolor .nds-stepper-step .nds-stepper-circle {
    border-color: var(--alpha-white-30);
    background-color: var(--alpha-white-10);
    color: var(--alpha-white-50)
}

    .nds-stepper.nds-oncolor .nds-stepper-step .nds-stepper-circle:hover {
        border-color: var(--alpha-white-60);
        background-color: var(--alpha-white-20);
        color: var(--alpha-white-60)
    }

.nds-stepper.nds-oncolor .nds-stepper-step[data-state~=current] .nds-stepper-title {
    color: var(--text-oncolor-primary)
}

.nds-stepper.nds-oncolor .nds-stepper-step[data-state~=current] .nds-stepper-description {
    color: var(--text-oncolor-secondary)
}

.nds-stepper.nds-oncolor .nds-stepper-step[data-state~=current] .nds-stepper-circle {
    border-color: var(--background-surface-oncolor);
    color: var(--colors-base-white)
}

    .nds-stepper.nds-oncolor .nds-stepper-step[data-state~=current] .nds-stepper-circle:hover {
        border-color: var(--alpha-white-40)
    }

.nds-stepper.nds-oncolor .nds-stepper-step[data-state~=completed] .nds-stepper-title {
    color: var(--text-oncolor-primary)
}

.nds-stepper.nds-oncolor .nds-stepper-step[data-state~=completed] .nds-stepper-description {
    color: var(--text-oncolor-secondary)
}

.nds-stepper.nds-oncolor .nds-stepper-step[data-state~=completed] .nds-stepper-base:after {
    background-color: var(--background-surface-oncolor)
}

.nds-stepper.nds-oncolor .nds-stepper-step[data-state~=completed] .nds-stepper-circle {
    border-color: var(--background-surface-oncolor);
    background-color: var(--background-surface-oncolor)
}

    .nds-stepper.nds-oncolor .nds-stepper-step[data-state~=completed] .nds-stepper-circle:hover {
        border-color: var(--background-surface-oncolor);
        background-color: var(--alpha-white-80)
    }

    .nds-stepper.nds-oncolor .nds-stepper-step[data-state~=completed] .nds-stepper-circle::before, .nds-stepper.nds-oncolor .nds-stepper-step[data-state~=completed] .nds-stepper-circle[data-step-text]::before {
        color: var(--colors-base-white)
    }

    .nds-stepper.nds-oncolor .nds-stepper-step[data-state~=completed] .nds-stepper-circle:before {
        color: var(--stepper-button-completed) !important
    }

.nds-stepper.nds-oncolor.nds-dot .nds-stepper-circle {
    background-color: var(--alpha-white-10)
}

    .nds-stepper.nds-oncolor.nds-dot .nds-stepper-circle::before, .nds-stepper.nds-oncolor.nds-dot .nds-stepper-circle[data-step-text]::before {
        background-color: var(--alpha-white-30)
    }

.nds-stepper.nds-oncolor.nds-dot .nds-stepper-step[data-state~=completed] .nds-stepper-circle {
    background-color: var(--background-surface-oncolor)
}

    .nds-stepper.nds-oncolor.nds-dot .nds-stepper-step[data-state~=completed] .nds-stepper-circle::before, .nds-stepper.nds-oncolor.nds-dot .nds-stepper-step[data-state~=completed] .nds-stepper-circle[data-step-text]::before {
        background-color: var(--background-surface-oncolor)
    }

.nds-stepper.nds-oncolor.nds-dot .nds-stepper-step[data-state~=current] .nds-stepper-circle {
    background-color: var(--background-surface-oncolor)
}

    .nds-stepper.nds-oncolor.nds-dot .nds-stepper-step[data-state~=current] .nds-stepper-circle::before, .nds-stepper.nds-oncolor.nds-dot .nds-stepper-step[data-state~=current] .nds-stepper-circle[data-step-text]::before {
        background-color: var(--background-primary)
    }

.nds-stepper.nds-oncolor.nds-dot .nds-stepper-step[data-state~=upcoming] .nds-stepper-circle {
    background-color: rgba(0,0,0,0);
    border-color: var(--alpha-white-30)
}

.nds-stepper.nds-oncolor.nds-radial .nds-progress-circle {
    --progress-track-color: var(--alpha-white-30);
    --progress-color: var(--background-surface-oncolor)
}

    .nds-stepper.nds-oncolor.nds-radial .nds-progress-circle .nds-progress-info {
        color: var(--text-oncolor-primary)
    }

.nds-stepper.nds-oncolor.nds-radial .nds-stepper-title {
    color: var(--text-oncolor-primary)
}

.nds-stepper.nds-oncolor.nds-radial .nds-stepper-description {
    color: var(--text-oncolor-secondary)
}

.nds-stepper.nds-oncolor.nds-radial .nds-stepper-next {
    color: var(--text-oncolor-tertiary)
}

.nds-swiper {
    --swiper-total: var(--total, 1);
    --swiper-slides: var(--slides, 1);
    --swiper-gap: var(--gap, var(--spacing-xl));
    --swiper-peek: var(--peek, 0px);
    --swiper-padding: var(--padding, 0);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    position: relative;
    width: 100%;
    direction: inherit
}

.nds-max-width .nds-swiper {
    --swiper-padding: var(--padding, var(--nds-viewport-padding))
}

.nds-swiper-wrapper {
    display: flex;
    height: 100%;
    width: 100%;
    gap: var(--swiper-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    direction: inherit;
    user-select: none;
    padding-inline: var(--swiper-padding);
    scroll-padding-inline: max(var(--swiper-peek),var(--swiper-padding))
}

    .nds-swiper-wrapper::-webkit-scrollbar {
        display: none
    }

.nds-swiper:not(.nds-hero) .nds-swiper-wrapper {
    padding-inline: max(2px,var(--swiper-padding))
}

@media(min-width: 961px) {
    .nds-content-layout.nds-cardView .nds-swiper-wrapper {
        padding-inline: 0px
    }
}

.nds-swiper-slide {
    flex: 0 0 calc((100% - var(--swiper-peek) - var(--swiper-gap)*(var(--swiper-slides, 1) - 1))/var(--swiper-slides, 1));
    min-width: 0;
    height: auto;
    position: relative;
    box-sizing: border-box;
    scroll-snap-align: start
}

.nds-swiper:not(.nds-hero) .nds-swiper-slide:first-child {
    padding-inline-start: 2px
}

.nds-swiper:not(.nds-hero) .nds-swiper-slide:last-child {
    padding-inline-end: 2px
}

.nds-swiper:not(.nds-hero) .nds-swiper-slide:has(.nds-card.nds-shadow) {
    padding-inline: 4px;
    padding-block: 4px 8px
}

.nds-swiper-slide > .nds-card {
    height: 100%;
    max-width: unset
}

:is(.nds-swiper-button-prev,.nds-swiper-button-next) {
    user-select: none
}

.nds-swiper.nds-hero :is(.nds-swiper-button-prev,.nds-swiper-button-next) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    text-shadow: 0px 0px 2px #000
}

.nds-swiper-button-prev {
    inset-inline-start: var(--spacing-md)
}

.nds-swiper:not(.nds-hero) .nds-swiper-button-prev {
    inset-inline-start: var(--nds-viewport-padding);
    margin-block: var(--spacing-sm)
}

.nds-swiper-button-next {
    inset-inline-end: var(--spacing-md)
}

.nds-swiper:not(.nds-hero) .nds-swiper-button-next {
    inset-inline-start: calc(var(--nds-viewport-padding) + var(--spacing-xs));
    margin-block: var(--spacing-sm)
}

.nds-swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg)
}

.nds-swiper.nds-hero .nds-swiper-pagination {
    position: absolute;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%)
}

.nds-swiper:not(.nds-hero) .nds-swiper-pagination {
    padding-block: var(--spacing-md);
    float: inline-end;
    margin-inline-end: var(--nds-viewport-padding)
}

.nds-swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--swiper-pagination-bullet-default);
    opacity: .6;
    cursor: pointer;
    transition: opacity var(--nds-transition);
    border: 1px solid rgba(0,0,0,.1);
    padding: 0;
    user-select: none
}

    .nds-swiper-pagination-bullet:hover {
        opacity: .8
    }

    .nds-swiper-pagination-bullet.nds-swiper-pagination-bullet-active {
        opacity: 1;
        background-color: var(--swiper-pagination-bullet-active);
        border-color: var(--swiper-pagination-bullet-active)
    }

.nds-swiper-navigation {
    display: flex;
    justify-content: space-between;
    width: 100%;
    --_nav-padding: var(--spacing-lg);
    padding-inline: var(--_nav-padding);
    gap: var(--spacing-xl)
}

.nds-max-width .nds-swiper-navigation {
    --_nav-padding: max(calc(var(--nds-viewport-padding) + var(--spacing-lg)), calc((100% - var(--nds-content-MaxWidth)) / 2))
}

.nds-swiper-navigation .nds-swiper-buttons {
    display: flex;
    gap: var(--spacing-md)
}

.nds-swiper-navigation :is(.nds-swiper-button-prev,.nds-swiper-button-next,.nds-swiper-pagination) {
    inset-inline: 0 !important;
    margin-block: 0 !important;
    margin-inline: 0 !important;
    float: unset
}

.nds-swiper:is(.nds-oncolor,.nds-hero) :is(.nds-section-title,.nds-section-description), .nds-oncolor :is(.nds-section-title,.nds-section-description) {
    color: var(--text-oncolor-primary)
}

.nds-swiper:is(.nds-oncolor,.nds-hero) .nds-swiper-pagination-bullet, .nds-oncolor .nds-swiper-pagination-bullet {
    background-color: var(--swiper-pagination-bullet-oncolor-default);
    border-color: hsla(0,0%,100%,.3)
}

    .nds-swiper:is(.nds-oncolor,.nds-hero) .nds-swiper-pagination-bullet.nds-swiper-pagination-bullet-active, .nds-oncolor .nds-swiper-pagination-bullet.nds-swiper-pagination-bullet-active {
        background-color: var(--swiper-pagination-bullet-oncolor-active);
        border-color: var(--swiper-pagination-bullet-oncolor-active)
    }

.nds-swiper.nds-hero {
    width: 100%;
    height: 100%;
    position: relative
}

    .nds-swiper.nds-hero .nds-swiper-wrapper {
        gap: 0
    }

    .nds-swiper.nds-hero .nds-swiper-slide {
        flex: 0 0 100%;
        position: relative;
        background-size: cover;
        background-position: center;
        color: var(--text-oncolor-primary);
        overflow: hidden;
        height: 100%;
        width: 100%
    }

    .nds-swiper.nds-hero .nds-swiper-button-prev {
        inset-inline-start: var(--spacing-lg)
    }

    .nds-swiper.nds-hero .nds-swiper-button-next {
        inset-inline-end: var(--spacing-lg)
    }

    .nds-swiper.nds-hero :is(.nds-swiper-button-prev,.nds-swiper-button-next) {
        --btn-size: 48px;
        visibility: hidden
    }

    .nds-swiper.nds-hero:hover :is(.nds-swiper-button-prev,.nds-swiper-button-next) {
        visibility: visible
    }

    .nds-swiper.nds-hero .nds-swiper-pagination {
        bottom: var(--spacing-xl)
    }

.nds-swiper-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
}

.nds-form-container.nds-switch-container:not([hidden]) {
    --_nds-input-size: var(--nds-input-size, 20px);
    --_switch-width: var(--switch-width, 48px);
    --_switch-height: var(--switch-height, 24px);
    --_switch-thumb-size: var(--switch-thumb-size, 16px);
    --_switch-thumb-offset: var(--switch-thumb-offset, 4px);
    gap: var(--spacing-lg)
}

    .nds-form-container.nds-switch-container:not([hidden]) .nds-form-header .nds-label {
        font-size: var(--typo-text-md-FS);
        line-height: calc(var(--_nds-input-size) + 4px)
    }

    .nds-form-container.nds-switch-container:not([hidden]).nds-sm {
        --nds-input-size: 16px;
        --switch-width: 36px;
        --switch-height: 18px;
        --switch-thumb-size: 12px;
        --switch-thumb-offset: 2px;
        gap: var(--spacing-md)
    }

    .nds-form-container.nds-switch-container:not([hidden]).nds-lg {
        --nds-input-size: 24px;
        --switch-width: 56px;
        --switch-height: 28px;
        --switch-thumb-size: 20px;
        --switch-thumb-offset: 4px;
        gap: var(--spacing-xl)
    }

    .nds-form-container.nds-switch-container:not([hidden]) .nds-form-control {
        border-radius: var(--radius-sm);
        background-color: rgba(0,0,0,0) !important
    }

        .nds-form-container.nds-switch-container:not([hidden]) .nds-form-control.focused:focus-visible {
            outline: 2px solid var(--focus-outline);
            outline-offset: -2px;
            box-shadow: inset 0 0 0 3px var(--focus-inner)
        }

        .nds-form-container.nds-switch-container:not([hidden]) .nds-form-control::before {
            display: none
        }

    .nds-form-container.nds-switch-container:not([hidden])[data-state~=disabled] {
        --switch-track-bg: var(--background-default);
        --switch-track-border: var(--control-disabled);
        --switch-thumb-bg: var(--control-disabled)
    }

        .nds-form-container.nds-switch-container:not([hidden])[data-state~=disabled] .nds-switch-track {
            cursor: not-allowed
        }

        .nds-form-container.nds-switch-container:not([hidden])[data-state~=disabled] .nds-switch-input:checked + .nds-switch-track {
            --switch-track-bg: var(--control-disabled);
            --switch-track-border: var(--switch-track-bg);
            --switch-thumb-bg: var(--controls-control-icon-disabled)
        }

.nds-switch-group {
    column-gap: var(--spacing-6xl)
}

.nds-switch {
    position: relative;
    display: inline-block;
    width: var(--_switch-width);
    height: var(--_switch-height);
    user-select: none
}

    .nds-switch::before {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: var(--_switch-width);
        height: var(--_switch-height);
        border-radius: 9999px;
        transform: translate(-50%, -50%);
        background-color: var(--controls-control-ripple-effect);
        transition: var(--nds-transition);
        z-index: 1;
        pointer-events: none
    }

    .nds-switch:hover::before {
        width: calc(var(--_switch-width) + var(--spacing-lg));
        height: calc(var(--_switch-height) + var(--spacing-lg))
    }

    .nds-switch .nds-switch-input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        margin: 0;
        cursor: pointer
    }

        .nds-switch .nds-switch-input:focus + .nds-switch-track {
            outline: 2px solid var(--focus-outline);
            outline-offset: 2px
        }

    .nds-switch .nds-switch-track {
        --_switch-track-bg: var(--switch-track-bg, var(--background-default));
        --_switch-track-border: var(--switch-track-border, var(--switch-neutral-default));
        position: absolute;
        inset: 0;
        cursor: pointer;
        background-color: var(--_switch-track-bg);
        border: 1px solid var(--_switch-track-border);
        border-radius: 9999px;
        z-index: 2
    }

    .nds-switch .nds-switch-thumb {
        --_switch-thumb-bg: var(--switch-thumb-bg, var(--switch-neutral-default));
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: var(--_switch-thumb-offset);
        width: var(--_switch-thumb-size);
        height: var(--_switch-thumb-size);
        background-color: var(--_switch-thumb-bg);
        border-radius: 9999px;
        transform: translateY(-50%);
        box-shadow: var(--shadow-sm);
        transition: all .1s ease
    }

    .nds-switch .nds-switch-input:not(:disabled,:checked) + .nds-switch-track:hover {
        --switch-track-border: var(--controls-control-neutral-hovered);
        --switch-thumb-bg: var(--controls-control-neutral-hovered)
    }

    .nds-switch .nds-switch-input:not(:disabled,:checked) + .nds-switch-track:active {
        --switch-track-border: var(--controls-control-neutral-pressed);
        --switch-thumb-bg: var(--controls-control-neutral-pressed)
    }

    .nds-switch .nds-switch-input:checked + .nds-switch-track {
        --switch-track-bg: var(--controls-control-primary-checked);
        --switch-track-border: var(--switch-track-bg);
        --switch-thumb-bg: var(--colors-base-white)
    }

        .nds-switch .nds-switch-input:checked + .nds-switch-track .nds-switch-thumb {
            inset-inline-start: unset;
            inset-inline-end: var(--_switch-thumb-offset)
        }

    .nds-switch .nds-switch-input:not(:disabled):checked + .nds-switch-track:hover {
        --switch-track-bg: var(--switch-primary-hovered)
    }

    .nds-switch .nds-switch-input:not(:disabled):checked + .nds-switch-track:active {
        --switch-track-bg: var(--switch-primary-pressed)
    }

    .nds-switch.nds-neutral .nds-switch-input:checked + .nds-switch-track {
        --switch-track-bg: var(--switch-neutral-checked)
    }

    .nds-switch.nds-neutral .nds-switch-input:not(:disabled):checked + .nds-switch-track:hover {
        --switch-track-bg: var(--switch-neutral-hovered)
    }

    .nds-switch.nds-neutral .nds-switch-input:not(:disabled):checked + .nds-switch-track:active {
        --switch-track-bg: var(--switch-neutral-pressed)
    }

    .nds-switch .nds-switch-track:active .nds-switch-thumb {
        width: calc(var(--_switch-thumb-size) + 6px)
    }

.nds-tag {
    --_bg: var(--tag-bg, var(--tag-background-neutral-light));
    --_text: var(--tag-text, var(--tag-text-neutral));
    --_border: var(--tag-border, var(--tag-border-neutral-light));
    --_icon: var(--tag-icon, var(--tag-icon-neutral));
    --_tag-height: var(--tag-height, 32px);
    --_tag-fs: var(--tag-fs, var(--typo-text-md-FS));
    --_tag-padding-inline: var(--tag-padding-inline, var(--spacing-xl));
    --_tag-dot-size: var(--tag-dot-size, 10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-weight: 500;
    font-size: var(--_tag-fs);
    line-height: var(--_tag-height);
    height: var(--_tag-height);
    min-width: fit-content;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    position: relative;
    padding: var(--spacing-none) var(--_tag-padding-inline);
    background-color: var(--_bg);
    color: var(--_text);
    border: 1px solid var(--_border)
}

    .nds-tag .nds-label {
        display: flex;
        align-items: center
    }

    .nds-tag.nds-sm {
        --tag-height: 24px;
        --tag-fs: var(--typo-text-sm-FS);
        --tag-padding-inline: var(--spacing-md)
    }

    .nds-tag.nds-xs {
        --tag-height: 20px;
        --tag-fs: var(--typo-text-xs-FS);
        --tag-padding-inline: var(--spacing-md)
    }

    .nds-tag :is(.nds-icon,i) {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--_icon)
    }

    .nds-tag.nds-icon-only {
        aspect-ratio: 1;
        width: var(--_tag-height);
        padding: var(--spacing-none) var(--spacing-xxs);
        justify-content: center
    }

        .nds-tag.nds-icon-only .nds-label {
            display: none !important
        }

    .nds-tag:is(.nds-gray:where(:not([data-status])),[data-status=neutral]) {
        --tag-bg: var(--tag-background-neutral-light);
        --tag-text: var(--tag-text-neutral);
        --tag-border: var(--tag-border-neutral-light);
        --tag-icon: var(--tag-icon-neutral)
    }

        .nds-tag:is(.nds-gray:where(:not([data-status])),[data-status=neutral]).nds-inverted {
            --tag-bg: var(--tag-background-neutral);
            --tag-text: var(--text-oncolor-primary);
            --tag-border: transparent;
            --tag-icon: var(--tag-dot)
        }

        .nds-tag:is(.nds-gray:where(:not([data-status])),[data-status=neutral]).nds-outline {
            --tag-bg: transparent;
            --tag-border: var(--tag-border-neutral);
            --tag-text: var(--tag-text-neutral)
        }

    .nds-tag:is(.nds-green:where(:not([data-status])),[data-status=success]) {
        --tag-bg: var(--tag-background-success-light);
        --tag-text: var(--tag-text-success);
        --tag-border: var(--tag-border-success-light);
        --tag-icon: var(--tag-icon-success)
    }

        .nds-tag:is(.nds-green:where(:not([data-status])),[data-status=success]).nds-inverted {
            --tag-bg: var(--tag-background-success);
            --tag-text: var(--text-oncolor-primary);
            --tag-border: transparent;
            --tag-icon: var(--tag-dot)
        }

        .nds-tag:is(.nds-green:where(:not([data-status])),[data-status=success]).nds-outline {
            --tag-bg: transparent;
            --tag-border: var(--tag-border-success);
            --tag-text: var(--tag-text-success)
        }

    .nds-tag:is(.nds-blue:where(:not([data-status])),[data-status=info]) {
        --tag-bg: var(--tag-background-info-light);
        --tag-text: var(--tag-text-info);
        --tag-border: var(--tag-border-info-light);
        --tag-icon: var(--tag-icon-info)
    }

        .nds-tag:is(.nds-blue:where(:not([data-status])),[data-status=info]).nds-inverted {
            --tag-bg: var(--tag-background-info);
            --tag-text: var(--text-oncolor-primary);
            --tag-border: transparent;
            --tag-icon: var(--tag-dot)
        }

        .nds-tag:is(.nds-blue:where(:not([data-status])),[data-status=info]).nds-outline {
            --tag-bg: transparent;
            --tag-border: var(--tag-border-info);
            --tag-text: var(--tag-text-info)
        }

    .nds-tag:is(.nds-yellow:where(:not([data-status])),[data-status=warning]) {
        --tag-bg: var(--tag-background-warning-light);
        --tag-text: var(--tag-text-warning);
        --tag-border: var(--tag-border-warning-light);
        --tag-icon: var(--tag-icon-warning)
    }

        .nds-tag:is(.nds-yellow:where(:not([data-status])),[data-status=warning]).nds-inverted {
            --tag-bg: var(--tag-background-warning);
            --tag-text: var(--text-oncolor-primary);
            --tag-border: transparent;
            --tag-icon: var(--tag-dot)
        }

        .nds-tag:is(.nds-yellow:where(:not([data-status])),[data-status=warning]).nds-outline {
            --tag-bg: transparent;
            --tag-border: var(--tag-border-warning);
            --tag-text: var(--tag-text-warning)
        }

    .nds-tag:is(.nds-red:where(:not([data-status])),[data-status=error]) {
        --tag-bg: var(--tag-background-error-light);
        --tag-text: var(--tag-text-error);
        --tag-border: var(--tag-border-error-light);
        --tag-icon: var(--tag-icon-error)
    }

        .nds-tag:is(.nds-red:where(:not([data-status])),[data-status=error]).nds-inverted {
            --tag-bg: var(--tag-background-error);
            --tag-text: var(--text-oncolor-primary);
            --tag-border: transparent;
            --tag-icon: var(--tag-dot)
        }

        .nds-tag:is(.nds-red:where(:not([data-status])),[data-status=error]).nds-outline {
            --tag-bg: transparent;
            --tag-border: var(--tag-border-error);
            --tag-text: var(--tag-text-error)
        }

    .nds-tag.nds-oncolor {
        --tag-bg: var(--tag-background-on-color);
        --tag-text: var(--text-oncolor-primary);
        --tag-border: transparent;
        --tag-icon: var(--text-oncolor-primary)
    }

        .nds-tag.nds-oncolor.nds-outline {
            --tag-bg: transparent;
            --tag-border: var(--tag-border-on-color);
            --tag-text: var(--text-oncolor-primary)
        }

    .nds-tag.nds-ghost {
        --tag-bg: transparent;
        --tag-border: transparent;
        --tag-text: var(--tag-text-neutral)
    }

    .nds-tag[data-status] {
        border-radius: 999px;
        --tag-border: transparent
    }

        .nds-tag[data-status] .nds-label::before {
            content: "";
            display: inline-block;
            width: var(--_tag-dot-size);
            height: var(--_tag-dot-size);
            border-radius: 50%;
            background-color: var(--_icon);
            margin-inline-end: var(--spacing-md)
        }

    .nds-tag.nds-rounded {
        border-radius: 999px
    }

.nds-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: flex-start
}

    .nds-group.article-tags {
        margin-bottom: var(--spacing-lg)
    }

.nds-accordion {
    --_accordion-header-height: var(--accordion-header-height, 56px);
    --_accordion-header-padding: var(--accordion-header-padding, var(--accordion-lg-header-padding, 16px));
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0
}

    .nds-accordion.nds-lg {
        --accordion-header-height: 56px;
        --accordion-header-padding: 16px
    }

    .nds-accordion.nds-md {
        --accordion-header-height: 48px;
        --accordion-header-padding: 12px
    }

    .nds-accordion.nds-sm {
        --accordion-header-height: 40px;
        --accordion-header-padding: 8px
    }

    .nds-accordion .nds-accordion-item {
        position: relative;
        border: none;
        border-top: 1px solid var(--divider-color);
        border-radius: 0
    }

    .nds-accordion .nds-accordion-header {
        margin: 0;
        padding: 0;
        font: inherit
    }

    .nds-accordion .nds-accordion-btn {
        --btn-bg: var(--button-background-transparent-default);
        --btn-bg-hover: var(--button-background-neutral-default);
        --btn-bg-active: var(--button-background-neutral-pressed);
        --btn-bg-selected: var(--button-background-transparent-default) !important;
        --btn-height: var(--_accordion-header-height);
        --nds-button-icon-size: 20px !important;
        justify-content: space-between;
        width: 100%;
        border-radius: 0 !important;
        padding: var(--_accordion-header-padding) var(--accordion-lg-header-padding);
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH);
        white-space: normal
    }

        .nds-accordion .nds-accordion-btn .nds-accordion-title {
            display: block;
            width: 100%;
            text-align: start;
            font-weight: 600
        }

    .nds-accordion .nds-accordion-collapse {
        display: grid;
        grid-template-rows: 0fr;
        overflow: clip;
        transition: grid-template-rows var(--nds-transition)
    }

        .nds-accordion .nds-accordion-collapse .nds-accordion-content {
            grid-row: 1/span 2;
            overflow: hidden
        }

        .nds-accordion .nds-accordion-collapse[data-state~=open], .nds-accordion .nds-accordion-collapse[data-state~=opening] {
            grid-template-rows: 1fr
        }

        .nds-accordion .nds-accordion-collapse:not([data-state]) .nds-accordion-content {
            display: none
        }

    .nds-accordion .nds-accordion-body {
        padding: var(--spacing-xl) var(--spacing-xl);
        color: var(--text-default)
    }

    .nds-accordion.nds-card {
        padding: 0;
        overflow: hidden
    }

        .nds-accordion.nds-card:not(.nds-stroke) {
            border: 0
        }

        .nds-accordion.nds-card .nds-accordion-item:first-child {
            border-top: 0
        }

@media(prefers-contrast: high) {
    .nds-accordion .nds-accordion-item {
        border-color: var(--text-primary)
    }

    .nds-accordion .nds-accordion-btn:focus {
        outline-width: 3px
    }
}

@media(prefers-reduced-motion: reduce) {
    .nds-accordion .nds-accordion-collapse {
        transition: none
    }
}

@media print {
    .nds-accordion .nds-accordion-collapse {
        display: block !important;
        height: auto !important
    }

    .nds-accordion .nds-accordion-content {
        display: block !important;
        overflow: visible !important
    }

    .nds-accordion .nds-accordion-btn {
        background-color: rgba(0,0,0,0) !important
    }
}

.nds-alert.nds-card:not([hidden]) {
    --_alert-stripe: var(--alert-stripe, var(--border-neutral-primary));
    --_alert-icon-bg: var(--alert-icon-bg, var(--background-neutral-light));
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    padding-inline-start: calc(var(--spacing-lg) + 8px);
    border-radius: var(--radius-md);
    border: 1px solid var(--_card-border);
    max-width: 100%;
    width: 100%;
    position: relative;
    overflow: clip;
    grid-column: 1/-1;
    isolation: isolate
}

    .nds-alert.nds-card:not([hidden])::after {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        display: block;
        width: 8px;
        height: 100%;
        background-color: var(--_alert-stripe);
        opacity: .7
    }

@media(max-width: 600px) {
    .nds-alert.nds-card:not([hidden]) {
        flex-direction: column;
        padding-inline-start: var(--spacing-lg);
        padding-block-start: calc(var(--spacing-lg) + 8px)
    }

        .nds-alert.nds-card:not([hidden])::after {
            width: 100%;
            height: 8px
        }
}

.nds-alert.nds-card:not([hidden]) .nds-feedback-icon {
    --nds-icon-size: 20px;
    width: calc(var(--nds-icon-size)*2);
    height: calc(var(--nds-icon-size)*2);
    background-color: var(--_alert-icon-bg)
}

.nds-alert.nds-card:not([hidden]) .nds-alert-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0
}

.nds-alert.nds-card:not([hidden]) .nds-alert-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm)
}

.nds-alert.nds-card:not([hidden]) .nds-alert-title {
    font-size: var(--typo-text-md-FS);
    line-height: var(--typo-text-md-LH);
    font-weight: 600;
    color: var(--_card-title);
    margin: 0
}

.nds-alert.nds-card:not([hidden]) .nds-alert-description {
    font-size: var(--typo-text-sm-FS);
    line-height: var(--typo-text-sm-LH);
    font-weight: 400;
    color: var(--text-subdued);
    margin: 0
}

.nds-alert.nds-card:not([hidden]) .nds-alert-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm)
}

.nds-alert.nds-card:not([hidden]) .nds-alert-close {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px
}

@media(max-width: 600px) {
    .nds-alert.nds-card:not([hidden]) .nds-alert-close {
        inset-block-start: 16px
    }
}

.nds-alert.nds-card:not([hidden]).nds-color {
    background-color: var(--background-default)
}

    .nds-alert.nds-card:not([hidden]).nds-color::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-color: var(--_card-bg);
        pointer-events: none;
        z-index: -1
    }

    .nds-alert.nds-card:not([hidden]).nds-color[data-status=success] {
        --card-bg: var(--background-success-25);
        --card-border: var(--border-success-light);
        --card-title: var(--text-success)
    }

:root[data-theme=dark] .nds-alert.nds-card:not([hidden]).nds-color[data-status=success] {
    --card-bg: var(--alpha-success-10);
    --card-border: var(--border-success-light)
}

.nds-alert.nds-card:not([hidden]).nds-color[data-status=info] {
    --card-bg: var(--background-info-25);
    --card-border: var(--border-info-light);
    --card-title: var(--text-info)
}

:root[data-theme=dark] .nds-alert.nds-card:not([hidden]).nds-color[data-status=info] {
    --card-bg: var(--alpha-info-10);
    --card-border: var(--border-info-light)
}

.nds-alert.nds-card:not([hidden]).nds-color[data-status=warning] {
    --card-bg: var(--background-warning-25);
    --card-border: var(--border-warning-light);
    --card-title: var(--text-warning)
}

:root[data-theme=dark] .nds-alert.nds-card:not([hidden]).nds-color[data-status=warning] {
    --card-bg: var(--alpha-warning-10);
    --card-border: var(--border-warning-light)
}

.nds-alert.nds-card:not([hidden]).nds-color:is([data-status=error],[data-status=critical]) {
    --card-bg: var(--background-error-25);
    --card-border: var(--border-error-light);
    --card-title: var(--text-error)
}

:root[data-theme=dark] .nds-alert.nds-card:not([hidden]).nds-color:is([data-status=error],[data-status=critical]) {
    --card-bg: var(--alpha-error-10);
    --card-border: var(--border-error-light)
}

.nds-alert.nds-card:not([hidden]).nds-color[data-status=neutral] {
    --card-bg: var(--background-neutral-light);
    --card-border: var(--border-neutral-secondary);
    --card-title: var(--text-default)
}

:root[data-theme=dark] .nds-alert.nds-card:not([hidden]).nds-color[data-status=neutral] {
    --card-bg: var(--alpha-white-10);
    --card-border: var(--border-neutral-light)
}

.nds-alert.nds-card:not([hidden]).nds-inline {
    flex-direction: row;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    padding-inline-start: var(--spacing-lg);
    gap: var(--spacing-md);
    border: none;
    background-color: var(--background-default)
}

    .nds-alert.nds-card:not([hidden]).nds-inline::after {
        inset-block-start: auto;
        inset-block-end: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 2px;
        opacity: 1
    }

    .nds-alert.nds-card:not([hidden]).nds-inline .nds-feedback-icon {
        width: var(--nds-icon-size);
        height: var(--nds-icon-size)
    }

    .nds-alert.nds-card:not([hidden]).nds-inline::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-color: var(--_card-bg);
        pointer-events: none;
        z-index: -1
    }

    .nds-alert.nds-card:not([hidden]).nds-inline[data-status=success] {
        --alert-icon-bg: var(--background-success);
        --card-bg: var(--background-success-25);
        --card-title: var(--text-success);
        --_inline-desc: var(--text-success)
    }

:root[data-theme=dark] .nds-alert.nds-card:not([hidden]).nds-inline[data-status=success] {
    --alert-icon-bg: var(--background-success);
    --card-bg: var(--alpha-success-10)
}

.nds-alert.nds-card:not([hidden]).nds-inline[data-status=info] {
    --alert-icon-bg: var(--background-info);
    --card-bg: var(--background-info-25);
    --card-title: var(--text-info);
    --_inline-desc: var(--text-info)
}

:root[data-theme=dark] .nds-alert.nds-card:not([hidden]).nds-inline[data-status=info] {
    --alert-icon-bg: var(--background-info);
    --card-bg: var(--alpha-info-10)
}

.nds-alert.nds-card:not([hidden]).nds-inline[data-status=warning] {
    --alert-icon-bg: var(--background-warning);
    --card-bg: var(--background-warning-25);
    --card-title: var(--text-warning);
    --_inline-desc: var(--text-warning)
}

:root[data-theme=dark] .nds-alert.nds-card:not([hidden]).nds-inline[data-status=warning] {
    --alert-icon-bg: var(--background-warning);
    --card-bg: var(--alpha-warning-10)
}

.nds-alert.nds-card:not([hidden]).nds-inline:is([data-status=error],[data-status=critical]) {
    --alert-icon-bg: var(--background-error);
    --card-bg: var(--background-error-25);
    --card-title: var(--text-error);
    --_inline-desc: var(--text-error)
}

:root[data-theme=dark] .nds-alert.nds-card:not([hidden]).nds-inline:is([data-status=error],[data-status=critical]) {
    --alert-icon-bg: var(--background-error);
    --card-bg: var(--alpha-error-10)
}

.nds-alert.nds-card:not([hidden]).nds-inline[data-status=neutral] {
    --alert-icon-bg: var(--icon-neutral);
    --card-bg: var(--background-neutral-light)
}

:root[data-theme=dark] .nds-alert.nds-card:not([hidden]).nds-inline[data-status=neutral] {
    --card-bg: var(--alpha-white-10)
}

.nds-alert.nds-card:not([hidden]).nds-inline[data-status=critical] .nds-feedback-icon .nds-icon {
    --nds-icon: var(--nds-icon-alert-circle)
}

.nds-alert.nds-card:not([hidden]).nds-inline .nds-alert-title, .nds-alert.nds-card:not([hidden]).nds-inline .nds-alert-description {
    font-size: var(--typo-text-clamp-md-FS);
    line-height: var(--typo-text-clamp-md-LH)
}

.nds-alert.nds-card:not([hidden]).nds-inline .nds-alert-description {
    color: var(--_inline-desc, var(--_card-title))
}

.nds-alert.nds-card:not([hidden]).nds-inline .nds-alert-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: self-start;
    justify-content: space-between;
    gap: var(--spacing-md)
}

.nds-alert.nds-card:not([hidden]).nds-inline .nds-alert-text {
    display: block;
    white-space: nowrap
}

.nds-alert.nds-card:not([hidden]).nds-inline .nds-alert-title, .nds-alert.nds-card:not([hidden]).nds-inline .nds-alert-description {
    display: inline;
    white-space: normal
}

.nds-alert.nds-card:not([hidden]).nds-inline .nds-alert-title {
    margin-inline-end: var(--spacing-sm)
}

@media(max-width: 600px) {
    .nds-alert.nds-card:not([hidden]).nds-inline .nds-alert-actions {
        flex: 1 1 100%
    }
}

.nds-alert.nds-card:not([hidden]).nds-inline .nds-alert-actions {
    margin-top: 0
}

    .nds-alert.nds-card:not([hidden]).nds-inline .nds-alert-actions .nds-link {
        font-size: var(--typo-text-clamp-md-FS);
        line-height: var(--typo-text-clamp-md-LH);
        text-decoration: underline
    }

.nds-alert.nds-card:not([hidden]).nds-inline .nds-alert-close {
    position: relative;
    inset-block-start: auto;
    inset-inline-end: auto
}

[data-status=success] {
    --alert-stripe: var(--background-success);
    --alert-icon-bg: var(--background-success-light)
}

:root[data-theme=dark] [data-status=success] {
    --alert-icon-bg: var(--alpha-success-10)
}

[data-status=info] {
    --alert-stripe: var(--background-info);
    --alert-icon-bg: var(--background-info-light)
}

:root[data-theme=dark] [data-status=info] {
    --alert-icon-bg: var(--alpha-info-10)
}

[data-status=warning] {
    --alert-stripe: var(--background-warning);
    --alert-icon-bg: var(--background-warning-light)
}

:root[data-theme=dark] [data-status=warning] {
    --alert-icon-bg: var(--alpha-warning-10)
}

:is([data-status=error],[data-status=critical]) {
    --alert-stripe: var(--background-error);
    --alert-icon-bg: var(--background-error-light)
}

:root[data-theme=dark] :is([data-status=error],[data-status=critical]) {
    --alert-icon-bg: var(--alpha-error-10)
}

[data-status=neutral] {
    --alert-stripe: var(--border-neutral-light);
    --alert-icon-bg: var(--background-neutral-light)
}

:root[data-theme=dark] [data-status=neutral] {
    --alert-icon-bg: var(--alpha-white-10)
}

.nds-alert-placeholder {
    position: fixed;
    z-index: 9999;
    inset-inline-end: max(var(--nds-viewport-padding),(100vw - var(--nds-content-MaxWidth, 1280px))/2);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    pointer-events: none;
    isolation: isolate
}

@media(max-width: 600px) {
    .nds-alert-placeholder {
        inset-inline: var(--nds-viewport-padding)
    }
}

.nds-alert-placeholder[data-position=top] {
    inset-block-start: calc(var(--_toast-top, var(--nds-nav-height)) + var(--spacing-md))
}

.nds-alert-placeholder[data-position=bottom] {
    inset-block-end: var(--nds-viewport-padding)
}

.nds-alert.nds-toast {
    width: fit-content;
    min-width: 300px;
    max-width: 600px;
    opacity: 0;
    transition: opacity var(--nds-transition);
    pointer-events: auto
}

@media(max-width: 600px) {
    .nds-alert.nds-toast {
        min-width: auto;
        max-width: none;
        width: auto
    }
}

.nds-alert.nds-toast[data-toast-state=show] {
    opacity: 1
}

.nds-alert.nds-toast[data-toast-state=hide] {
    opacity: 0
}

.nds-table-wrapper {
    --_max-width: var(--max-width, 100%);
    --mask-fade-distance: 48px;
    position: relative;
    width: 100%;
    max-width: var(--_max-width);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    display: block
}

    .nds-table-wrapper .nds-table {
        --_min-width: var(--min-width, 600px);
        min-width: var(--_min-width);
        display: table
    }

    .nds-table-wrapper[data-state~=has-more][data-state~=masked] {
        mask-image: linear-gradient(to right, transparent 0%, black var(--mask-fade-distance)),linear-gradient(to left, transparent 0%, black var(--mask-fade-distance))
    }

        .nds-table-wrapper[data-state~=has-more][data-state~=masked][data-state~=at-start] {
            mask-image: linear-gradient(to right, transparent 0%, black var(--mask-fade-distance))
        }

        .nds-table-wrapper[data-state~=has-more][data-state~=masked][data-state~=at-end] {
            mask-image: linear-gradient(to left, transparent 0%, black var(--mask-fade-distance))
        }

:is(html[dir=ltr],.ltr) .nds-table-wrapper[data-state~=has-more][data-state~=masked] {
    mask-image: linear-gradient(to right, transparent 0%, black var(--mask-fade-distance)),linear-gradient(to left, transparent 0%, black var(--mask-fade-distance))
}

    :is(html[dir=ltr],.ltr) .nds-table-wrapper[data-state~=has-more][data-state~=masked][data-state~=at-start] {
        mask-image: linear-gradient(to left, transparent 0%, black var(--mask-fade-distance))
    }

    :is(html[dir=ltr],.ltr) .nds-table-wrapper[data-state~=has-more][data-state~=masked][data-state~=at-end] {
        mask-image: linear-gradient(to right, transparent 0%, black var(--mask-fade-distance))
    }

.nds-table {
    width: 100%;
    background-color: var(--table-cell-border);
    border: 1px solid var(--table-cell-border);
    border-radius: var(--radius-md);
    overflow: clip;
    max-width: unset !important
}

    .nds-table.nds-center * {
        text-align: center
    }

    .nds-table tr {
        border-bottom: 1px solid var(--table-cell-border)
    }

        .nds-table tr:last-child {
            border-bottom: none
        }

    .nds-table :is(th,thead td) {
        background-color: var(--table-background-header);
        color: var(--table-text-head);
        font-weight: 600;
        font-size: var(--typo-text-sm-FS);
        padding: var(--table-cell-v-padding) var(--table-cell-h-padding);
        border-left: 1px solid var(--table-cell-border);
        border-bottom: 1px solid var(--table-cell-border);
        text-align: start;
        vertical-align: middle;
        white-space: nowrap;
        height: 48px
    }

        .nds-table :is(th,thead td):last-child {
            border-right: none
        }

:is(html[dir=ltr],.ltr) .nds-table :is(th,thead td) {
    border-right: 1px solid var(--table-cell-border)
}

    :is(html[dir=ltr],.ltr) .nds-table :is(th,thead td):last-child {
        border-left: none
    }

.nds-table td {
    padding: var(--table-cell-v-padding) var(--table-cell-h-padding);
    vertical-align: middle;
    background-color: var(--background-card);
    color: var(--table-text-body);
    border-left: 1px solid var(--table-cell-border);
    height: var(--_table-row-height, 64px)
}

    .nds-table td:last-child {
        border-right: none
    }

:is(html[dir=ltr],.ltr) .nds-table td {
    border-right: 1px solid var(--table-cell-border)
}

    :is(html[dir=ltr],.ltr) .nds-table td:last-child {
        border-left: none
    }

.nds-table tbody tr:hover td {
    background-color: var(--table-background-header)
}

.nds-table tbody tr:nth-child(even) td {
    background-color: var(--table-background-row)
}

.nds-table tbody tr:nth-child(even):hover td {
    background-color: var(--table-background-header)
}

.nds-table tbody tr[data-state~=selected] {
    background-color: var(--table-background-tr-selected)
}

    .nds-table tbody tr[data-state~=selected] td {
        background-color: var(--table-background-row-selected)
    }

    .nds-table tbody tr[data-state~=selected]:hover td {
        background-color: var(--table-background-hover-selected)
    }

.nds-table .nds-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-1)
}

.nds-table .nds-col-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm)
}

    .nds-table .nds-col-actions .nds-btn {
        --btn-size: 32px
    }

.nds-table th[data-state~=sorted-asc] .nds-sort-icon {
    --nds-icon: var(--nds-icon-sort-by-up-02)
}

.nds-table th[data-state~=sorted-desc] .nds-sort-icon {
    --nds-icon: var(--nds-icon-sort-by-down-02)
}

.nds-table :is(th,td) {
    outline: none
}

    .nds-table :is(th,td):focus {
        outline: none
    }

.nds-table caption {
    padding: var(--spacing-4);
    font-weight: 600;
    text-align: start;
    background-color: var(--table-background-header);
    border-bottom: 1px solid var(--table-cell-border)
}

.nds-table .table-actions {
    display: flex;
    gap: var(--spacing-1);
    align-items: center
}

    .nds-table .table-actions .nds-btn {
        min-width: auto
    }

.nds-table .actions-column {
    width: 1%
}

.nds-table :is(th,td):has(.nds-check-container), .nds-table .checkbox-column {
    width: 40px;
    text-align: center
}

    .nds-table :is(th,td):has(.nds-check-container) .nds-form-container.nds-check-container, .nds-table .checkbox-column .nds-form-container.nds-check-container {
        margin: 0
    }

        .nds-table :is(th,td):has(.nds-check-container) .nds-form-container.nds-check-container .nds-form-control, .nds-table .checkbox-column .nds-form-container.nds-check-container .nds-form-control {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0
        }

            .nds-table :is(th,td):has(.nds-check-container) .nds-form-container.nds-check-container .nds-form-control .nds-check, .nds-table .checkbox-column .nds-form-container.nds-check-container .nds-form-control .nds-check {
                margin: 0
            }

.nds-table.nds-compact {
    --_table-row-height: var(--table-row-height, 48px)
}

.nds-table[data-state~=loading] tbody tr td {
    background-color: var(--table-background-row);
    color: var(--text-disabled);
    animation: tableLoading 1.5s ease-in-out infinite alternate
}

@keyframes tableLoading {
    0% {
        opacity: .5
    }

    100% {
        opacity: 1
    }
}

.nds-tabs {
    --btn-indicator-size: 3px
}

    .nds-tabs:not([hidden]) {
        display: flex;
        flex-direction: column
    }

    .nds-tabs.nds-divided .nds-tab-list-container::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: var(--btn-indicator-size);
        background-color: var(--divider-color);
        border-radius: var(--radius-full);
        z-index: -1
    }

    .nds-tabs.nds-divided .nds-tab {
        margin-bottom: var(--btn-indicator-size);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0
    }

        .nds-tabs.nds-divided .nds-tab::before {
            margin-bottom: calc(var(--btn-indicator-size)*-1)
        }

    .nds-tabs.nds-vertical {
        flex-direction: row
    }

        .nds-tabs.nds-vertical .nds-tab-list {
            flex-direction: column;
            flex-wrap: nowrap;
            min-width: fit-content;
            padding-inline-end: var(--btn-indicator-size);
            position: sticky;
            z-index: 2;
            top: var(--nds-nav-height)
        }

        .nds-tabs.nds-vertical .nds-show-more {
            display: none !important
        }

        .nds-tabs.nds-vertical .nds-tab {
            border-radius: var(--radius-sm);
            width: 100%;
            justify-content: start
        }

            .nds-tabs.nds-vertical .nds-tab::before {
                content: "";
                position: absolute !important;
                height: var(--btn-indicator-size);
                border-radius: var(--radius-full);
                display: block;
                height: unset;
                inset-inline-start: 0;
                bottom: unset;
                width: var(--btn-indicator-size) !important;
                inset-block: 0;
                margin-block: var(--spacing-md);
                margin-inline: unset
            }

        .nds-tabs.nds-vertical.nds-divided .nds-tab {
            flex-direction: row-reverse;
            margin-bottom: unset;
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            justify-content: end
        }

:is(html[dir=ltr],.ltr) .nds-tabs.nds-vertical.nds-divided .nds-tab {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm)
}

.nds-tabs.nds-vertical.nds-divided .nds-tab .nds-label {
    text-align: end
}

.nds-tabs.nds-vertical.nds-divided .nds-tab::before {
    margin-inline-end: calc(var(--btn-indicator-size)*-1);
    inset-inline-end: 0;
    inset-inline-start: unset;
    margin-bottom: unset
}

.nds-tabs.nds-vertical.nds-divided .nds-tab-list-container::after {
    inset-inline-end: 0;
    height: 100%;
    width: var(--btn-indicator-size)
}

.nds-tabs .nds-tab-list:is(.nds-center,.center) {
    justify-content: center;
    width: fit-content;
    margin-inline: auto
}

.nds-tab-list-container {
    isolation: isolate
}

.nds-tab-list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    position: relative
}

.nds-tab {
    gap: var(--tab-button-gap);
    padding: var(--tab-horizontal-tab-md-button-v-padding) var(--tab-horizontal-tab-md-button-h-padding);
    color: var(--text-primary-paragraph);
    border: 0;
    white-space: nowrap;
    min-width: fit-content;
    position: relative;
    z-index: 2
}

    .nds-tab::before {
        content: "";
        position: absolute !important;
        height: var(--btn-indicator-size);
        border-radius: var(--radius-full);
        display: block;
        bottom: 0;
        inset-inline: 0;
        margin-inline: var(--spacing-md)
    }

.nds-lg .nds-tab {
    --btn-size: 48px
}

.nds-tab[aria-selected=true] .nds-label {
    color: var(--text-default);
    filter: drop-shadow(0 0 0.02em currentColor)
}

.nds-tab:is(:hover,:active)::before {
    background-color: var(--_btn-indicator-color)
}

.nds-tab[aria-selected=true]::before {
    background-color: var(--border-primary)
}

.nds-tab.nds-show-more {
    min-width: var(--btn-size);
    aspect-ratio: 1/1
}

.nds-tab:disabled {
    color: var(--text-default-disabled)
}

.nds-tabs:not(.nds-vertical) .nds-tab-list {
    flex-wrap: nowrap !important;
    max-width: 100%;
    scroll-behavior: smooth
}

    .nds-tabs:not(.nds-vertical) .nds-tab-list > * {
        width: fit-content
    }

@media(max-width: 600px) {
    .nds-tabs:not(.nds-vertical) .nds-tab-list > * {
        max-width: 85%
    }
}

.nds-tab-content {
    min-height: var(--btn-size);
    width: 100%;
    flex: 1;
    min-width: 0
}

.nds-tab-panel {
    padding: var(--spacing-2xl)
}

    .nds-tab-panel:focus {
        outline: none
    }

@media(prefers-contrast: high) {
    .nds-tab {
        border: 1px solid rgba(0,0,0,0)
    }

        .nds-tab:focus {
            border-color: currentColor
        }

        .nds-tab[aria-selected=true] {
            border: 1px solid var(--border-primary);
            border-bottom: 2px solid var(--border-primary)
        }
}

@media(prefers-reduced-motion: reduce) {
    :is(.nds-tab,.nds-tab-panel) {
        transition: none;
        animation: none
    }
}

.nds-tabs.nds-card {
    --card-width: 100%
}

    .nds-tabs.nds-card:not(.nds-stroke) {
        border: 0
    }

    .nds-tabs.nds-card .nds-tab-content {
        padding-inline: var(--_card-padding);
        padding-block: var(--spacing-2xl)
    }

        .nds-tabs.nds-card .nds-tab-content .nds-tab-panel {
            padding: 0
        }

    .nds-tabs.nds-card:not(.nds-vertical) {
        gap: 0;
        padding: 0;
        overflow: hidden
    }

        .nds-tabs.nds-card:not(.nds-vertical) .nds-tab {
            --btn-height: calc(var(--btn-size) * 1.25)
        }

    .nds-tabs.nds-card.nds-vertical .nds-tab-content {
        padding-inline-end: 0;
        padding-block: 0
    }

:is(.nds-tab-content,.nds-tab-panel).nds-card {
    --card-width: 100%;
    margin-block-start: var(--spacing-xl)
}

.nds-vertical > :is(.nds-tab-content,.nds-tab-panel).nds-card {
    margin-block-start: 0;
    margin-inline-start: var(--spacing-xl)
}

.nds-tab-content.nds-card {
    padding-inline: var(--_card-padding);
    padding-block: var(--spacing-2xl)
}

    .nds-tab-content.nds-card .nds-tab-panel {
        padding: 0
    }

@media(max-width: 960px) {
    .nds-content-layout.nds-cardView .nds-ghost .nds-tabs:not(.nds-card) .nds-tab-content:not(.nds-card,:has(.nds-max-width)), section > .nds-max-width .nds-tabs:not(.nds-card) .nds-tab-content:not(.nds-card,:has(.nds-max-width)) {
        padding-inline: var(--nds-viewport-padding)
    }

    .nds-content-layout.nds-cardView .nds-ghost .nds-tabs:not(.nds-card) .nds-tab-list, section > .nds-max-width .nds-tabs:not(.nds-card) .nds-tab-list {
        padding-inline: var(--nds-viewport-padding)
    }
}

.nds-tabs: not(.nds-vertical) .nds-tab-list-container {
    --scroll-fade: 48px;
    --scroll-divider: var(--divider-color);
    width: 100%;
    flex-direction: row
}

.nds-tabs:not(.nds-vertical) .nds-tab.nds-show-more {
    align-self: center;
    height: var(--btn-size) !important
}

.nds-topbar {
    background-color: var(--background-topbar);
    height: 40px;
    z-index: 1000;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    overflow-y: clip
}

    .nds-topbar > * {
        visibility: visible !important;
    }

    .nds-topbar .nds-topbar-info {
        display: flex;
        gap: var(--spacing-xl)
    }

    .nds-topbar .nds-text-icon {
        height: 40px;
        min-width: 40px
    }

        .nds-topbar .nds-text-icon > .text {
            font-size: var(--typo-text-clamp-md-FS);
            line-height: var(--typo-text-clamp-md-LH);
            white-space: nowrap
        }

        .nds-topbar .nds-text-icon > i {
            font-size: var(--typo-text-lg-FS);
            line-height: var(--typo-text-lg-LH);
            width: var(--typo-text-lg-FS)
        }

    .nds-topbar .generalInfo .nds-text-icon svg {
        color: var(--icon-default)
    }

.nds-main-nav {
    --_nav-z-base: 1000;
    --_nav-z-dropdown: -1;
    --_nav-z-brand: 1;
    --_nav-z-collapse-dropdown: 1;
    --_nav-z-showmore: 2;
    --_nav-z-secondary: calc(var(--_nav-z-base) + 1);
    --_nav-z-secondary-dropdown: calc(var(--_nav-z-base) + 2);
    --_nav-bg: var(--background-nav);
    --_nav-menu-bg: var(--background-menu);
    --_nav-color: var(--text-default);
    --_nav-menu-title: var(--text-primary);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--_nav-bg);
    height: var(--nds-nav-height);
    box-shadow: var(--shadow-md);
    z-index: var(--_nav-z-base);
    transform: translateY(0)
}

    .nds-main-nav:not(:has(.nds-collapse .nds-dropdown[data-state~=open]),:has(.nds-collapse[data-state~=open]),:has(.nds-nav-minimal .nds-dropdown[data-state~=open])) {
        overflow-x: clip
    }

    .nds-main-nav > .nds-nav-container:not([hidden]) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-lg)
    }

    .nds-main-nav .nds-brand {
        height: var(--nds-nav-height);
        padding: var(--spacing-lg, 12px) 0;
        display: flex;
        align-items: center;
        font-weight: bold;
        text-decoration: none;
        gap: var(--spacing-lg, 12px);
        align-content: center;
        flex-wrap: nowrap;
        white-space: nowrap;
        z-index: var(--_nav-z-brand)
    }

        .nds-main-nav .nds-brand :is(img,svg) {
            height: 100%;
            width: auto;
            max-width: unset
        }

        .nds-main-nav .nds-brand .nds-brand-name {
            visibility: visible;
            line-height: var(--typo-text-clamp-md-LH);
            font-size: var(--typo-text-clamp-md-FS);
            display: flex;
            flex-direction: column;
            gap: var(--spacing-2xs, 2px)
        }

        .nds-main-nav .nds-brand .nds-brand-slogan {
            font-size: var(--typo-text-sm-FS);
            line-height: var(--typo-text-sm-LH);
            font-weight: 400;
            display: block
        }

    .nds-main-nav .nds-mainNav-toggler {
        background: none;
        border: none;
        font-size: 1.2rem;
        cursor: pointer;
        color: var(--_nav-color);
        height: var(--nds-nav-height);
        width: 40px;
        display: none;
        align-items: center;
        justify-content: center
    }

    .nds-main-nav :is(.nds-nav-primary,.nds-nav-actions,.nds-nav-minimal) {
        display: flex;
        align-items: center;
        list-style: none
    }

    .nds-main-nav .nds-nav-minimal .nds-nav-item {
        border-bottom: unset !important
    }

    .nds-main-nav .nds-nav-item :is(.nds-nav-link,.nds-dropdown-item) .nds-label {
        position: relative;
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH);
        font-weight: 400
    }

    .nds-main-nav .nds-nav-item.nds-CTA {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 var(--spacing-md)
    }

        .nds-main-nav .nds-nav-item.nds-CTA > ::before {
            background-color: var(--_btn-indicator-color)
        }

    .nds-main-nav .nds-nav-item > *:first-child {
        position: relative;
        border-radius: var(--radius-sm, 4px)
    }

    .nds-main-nav .nds-nav-item.nds-icon-only .nds-nav-link .nds-label {
        display: none
    }

    .nds-main-nav .nds-nav-link {
        --btn-indicator-size: 5px;
        --btn-height: var(--nds-nav-height);
        font-size: var(--typo-text-clamp-lg-FS);
        line-height: var(--typo-text-clamp-lg-LH)
    }

        .nds-main-nav .nds-nav-link .nds-avatar {
            --avatar-size: calc(var(--nds-nav-height) - 40px)
        }

        .nds-main-nav .nds-nav-link:focus-visible {
            outline: 2px solid var(--colors-base-black);
            outline-offset: 2px
        }

    .nds-main-nav .nds-nav-primary {
        scrollbar-width: none
    }

        .nds-main-nav .nds-nav-primary::-webkit-scrollbar {
            display: none
        }

    .nds-main-nav .nds-collapse-content .nds-show-more {
        background-color: var(--_nav-bg);
        color: var(--_nav-color);
        transition: opacity var(--nds-transition);
        flex-shrink: 0
    }

        .nds-main-nav .nds-collapse-content .nds-show-more * {
            justify-content: center
        }

    .nds-main-nav .nds-collapse-content .nds-nav-primary:not([data-state~=has-more]) ~ .nds-show-more {
        display: none
    }

    .nds-main-nav .nds-dropdown {
        position: relative
    }

        .nds-main-nav .nds-dropdown .nds-dropdown-menu {
            display: none;
            border-radius: 0;
            z-index: var(--_nav-z-dropdown);
            overflow-y: clip;
            padding-bottom: 1rem
        }

            .nds-main-nav .nds-dropdown .nds-dropdown-menu > .nds-dropdown-content {
                background: var(--_nav-menu-bg);
                transform: translate(0, -100%);
                transition: transform var(--nds-transition);
                border-radius: 0 0 var(--radius-lg) var(--radius-lg);
                box-shadow: var(--shadow-md)
            }

                .nds-main-nav .nds-dropdown .nds-dropdown-menu > .nds-dropdown-content > .nds-content-wrapper {
                    padding-top: var(--spacing-2xl);
                    padding-bottom: var(--spacing-2xl);
                    width: 100%
                }

                    .nds-main-nav .nds-dropdown .nds-dropdown-menu > .nds-dropdown-content > .nds-content-wrapper .nds-search-box {
                        max-width: 800px
                    }

            .nds-main-nav .nds-dropdown .nds-dropdown-menu.nds-fit .nds-dropdown-item {
                --btn-width: 100%
            }

        .nds-main-nav .nds-dropdown[data-state~=open] .nds-dropdown-menu {
            display: flex;
            flex-direction: column
        }

        .nds-main-nav .nds-dropdown .nds-dropdown-menu .nds-dropdown-content {
            overflow: clip
        }

        .nds-main-nav .nds-dropdown[data-state~=opened] .nds-dropdown-menu {
            overflow: unset;
            padding-bottom: unset !important
        }

            .nds-main-nav .nds-dropdown[data-state~=opened] .nds-dropdown-menu .nds-dropdown-content {
                overflow: visible
            }

        .nds-main-nav .nds-dropdown[data-state~=open] .nds-dropdown-menu .nds-dropdown-content {
            transform: translateY(0)
        }

        .nds-main-nav .nds-dropdown:is([data-state~=opening],[data-state~=closing]) .nds-dropdown-menu .nds-dropdown-content {
            transform: translateY(-100%)
        }

        .nds-main-nav .nds-dropdown .nds-dropdown-item {
            text-decoration: none;
            justify-content: start
        }

            .nds-main-nav .nds-dropdown .nds-dropdown-item:last-child {
                border-bottom: none
            }

        .nds-main-nav .nds-dropdown .nds-dropdown-menu .nds-column {
            padding: var(--spacing-lg);
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md)
        }

        .nds-main-nav .nds-dropdown .nds-dropdown-columns .nds-dropdown-title {
            font-size: var(--typo-text-clamp-lg-FS);
            line-height: var(--typo-text-clamp-lg-LH);
            color: var(--_nav-menu-title);
            font-weight: 500
        }

        .nds-main-nav .nds-dropdown .nds-dropdown-columns ul {
            list-style: none;
            padding: 0;
            margin: 0
        }

        .nds-main-nav .nds-dropdown .nds-dropdown-columns .nds-list {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            column-gap: var(--spacing-2xl);
            padding: var(--spacing-lg) 0
        }

            .nds-main-nav .nds-dropdown .nds-dropdown-columns .nds-list.nds-multi-column-list {
                display: block;
                column-count: 3;
                column-gap: 2rem;
                list-style: none;
                padding: 0;
                margin: 0
            }

                .nds-main-nav .nds-dropdown .nds-dropdown-columns .nds-list.nds-multi-column-list * {
                    display: flex;
                    white-space: nowrap
                }

        .nds-main-nav .nds-dropdown .nds-dropdown-columns.nds-rowView .nds-list {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            flex-wrap: wrap;
            column-gap: var(--spacing-2xl)
        }

.nds-dropdown-menu .nds-dropdown-columns.nds-colView {
    column-count: 4;
    column-gap: var(--spacing-2xl)
}

    .nds-dropdown-menu .nds-dropdown-columns.nds-colView .nds-column {
        break-inside: avoid
    }

body:not(.nds-minimal) .nds-main-nav .nds-nav-item .nds-nav-link:is([data-state~=current]) {
    --btn-bg: var(--button-background-primary-default);
    --btn-bg-hover: var(--button-background-primary-hovered);
    --btn-bg-active: var(--button-background-primary-pressed);
    --btn-bg-selected: var(--button-background-primary-default);
    --btn-color: var(--text-oncolor-primary);
    --btn-indicator-color: var(--background-primary-400);
    --btn-indicator-active: var(--background-primary-400);
    --btn-indicator-selected: var(--background-primary-400);
    --btn-loading-color: var(--text-oncolor-primary);
    --btn-loading-track: var(--alpha-white-20)
}

body:not(.nds-minimal) .nds-main-nav .nds-mainNav-toggler {
    display: none
}

body:not(.nds-minimal) .nds-main-nav .nds-collapse {
    display: flex !important;
    width: 100%
}

    body:not(.nds-minimal) .nds-main-nav .nds-collapse[hidden] {
        visibility: hidden
    }

    body:not(.nds-minimal) .nds-main-nav .nds-collapse .nds-collapse-content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%
    }

body:not(.nds-minimal) .nds-main-nav .nds-nav-primary {
    overflow-x: auto;
    width: 100%;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
}

    body:not(.nds-minimal) .nds-main-nav .nds-nav-primary > * {
        flex-shrink: 0;
        white-space: nowrap
    }

body:not(.nds-minimal) .nds-main-nav .nds-collapse-content .nds-nav-primary[data-state~=has-more] ~ .nds-show-more {
    transform: translateX(0)
}

    body:not(.nds-minimal) .nds-main-nav .nds-collapse-content .nds-nav-primary[data-state~=has-more] ~ .nds-show-more i {
        transform: rotate(90deg);
        transition: transform .1s ease
    }

body:not(.nds-minimal) .nds-main-nav .nds-collapse-content .nds-nav-primary[data-state~=has-more][data-state~=at-end] ~ .nds-show-more i {
    transform: rotate(270deg)
}

:is(html[dir=ltr],.ltr) body:not(.nds-minimal) .nds-main-nav .nds-collapse-content .nds-nav-primary[data-state~=has-more] ~ .nds-show-more i {
    transform: rotate(270deg)
}

:is(html[dir=ltr],.ltr) body:not(.nds-minimal) .nds-main-nav .nds-collapse-content .nds-nav-primary[data-state~=has-more][data-state~=at-end] ~ .nds-show-more i {
    transform: rotate(90deg)
}

body:not(.nds-minimal) .nds-main-nav .nds-dropdown-menu, body:not(.nds-minimal) .nds-main-nav .nds-nav-minimal .nds-dropdown-menu {
    position: fixed;
    inset-inline: 0
}

body:not(.nds-minimal) .nds-main-nav .nds-dropdown[data-state~=open] .nds-dropdown-menu.nds-fit, body:not(.nds-minimal) .nds-main-nav .nds-nav-minimal .nds-dropdown[data-state~=open] .nds-dropdown-menu.nds-fit {
    min-width: fit-content !important;
    position: absolute !important;
    inset-inline: auto 0;
    white-space: nowrap
}

@media(max-width: 1280px) {
    .nds-dropdown-menu .nds-dropdown-columns.nds-colView {
        column-count: 3
    }
}

@media(max-width: 960px) {
    .nds-dropdown-menu .nds-dropdown-columns.nds-colView {
        column-count: 2
    }

    .nds-dropdown-menu .nds-dropdown-columns.nds-rowView {
        margin: 0;
        padding: 0
    }

        .nds-dropdown-menu .nds-dropdown-columns.nds-rowView .nds-list {
            flex-direction: column
        }

    .nds-multi-column-list {
        column-count: 2
    }

    .nds-topbar .nds-topbar-info > :is(#nds-cityName,#nds-date) {
        display: none
    }

    .nds-main-nav :is(.nds-nav-actions,.nds-nav-minimal) .nds-nav-item:not(.nds-CTA) .nds-nav-link .nds-label {
        display: none
    }
}

body.nds-minimal .nds-main-nav .nds-mainNav-toggler {
    display: flex
}

    body.nds-minimal .nds-main-nav .nds-mainNav-toggler i {
        font-size: 1.5rem;
        width: 1.5rem
    }

body.nds-minimal .nds-main-nav .nds-collapse {
    position: absolute;
    top: var(--nds-nav-height);
    inset-inline: 0;
    z-index: var(--_nav-z-dropdown);
    display: none;
    overflow: clip
}

    body.nds-minimal .nds-main-nav .nds-collapse .nds-collapse-content {
        background-color: var(--background-nav);
        box-shadow: var(--shadow-md);
        transform: translateY(-100%);
        transition: transform var(--nds-transition);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg)
    }

        body.nds-minimal .nds-main-nav .nds-collapse .nds-collapse-content:has(.nds-nav-actions .nds-dropdown[data-state~=open]) .nds-nav-primary {
            max-height: 10svh
        }

    body.nds-minimal .nds-main-nav .nds-collapse[data-state~=open] {
        display: flex;
        flex-direction: column
    }

        body.nds-minimal .nds-main-nav .nds-collapse[data-state~=open] .nds-collapse-content {
            transform: translateY(0)
        }

    body.nds-minimal .nds-main-nav .nds-collapse:is([data-state~=opening],[data-state~=closing]) .nds-collapse-content {
        transform: translateY(-100%)
    }

    body.nds-minimal .nds-main-nav .nds-collapse[data-state~=opened] {
        overflow: unset
    }

body.nds-minimal .nds-main-nav :is(.nds-nav-primary,.nds-show-more) .nds-nav-link {
    --btn-height: var(--nds-minimal-nav-item-height);
    width: 100%;
    align-items: center;
    justify-content: start
}

    body.nds-minimal .nds-main-nav :is(.nds-nav-primary,.nds-show-more) .nds-nav-link::before {
        content: "";
        position: absolute !important;
        height: var(--btn-indicator-size);
        border-radius: var(--radius-full);
        display: block;
        height: unset;
        inset-inline-start: 0;
        bottom: unset;
        width: var(--btn-indicator-size) !important;
        inset-block: 0;
        margin-block: var(--spacing-md);
        margin-inline: unset
    }

body.nds-minimal .nds-main-nav .nds-nav-primary {
    position: relative;
    overflow-x: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-height: 50svh;
    transition: max-height var(--nds-transition),margin-bottom .1s
}

    body.nds-minimal .nds-main-nav .nds-nav-primary .nds-nav-item .nds-nav-link.nds-menu-btn {
        --btn-bg: var(--button-background-transparent-default);
        --btn-bg-hover: var(--button-background-neutral-default);
        --btn-bg-active: var(--button-background-neutral-pressed);
        --btn-bg-selected: var(--button-background-transparent-default)
    }

        body.nds-minimal .nds-main-nav .nds-nav-primary .nds-nav-item .nds-nav-link.nds-menu-btn.nds-oncolor, :root[data-theme=dark] body.nds-minimal .nds-main-nav .nds-nav-primary .nds-nav-item .nds-nav-link.nds-menu-btn {
            --btn-bg-hover: var(--button-background-transparent-hovered);
            --btn-bg-active: var(--button-background-transparent-pressed)
        }

        body.nds-minimal .nds-main-nav .nds-nav-primary .nds-nav-item .nds-nav-link.nds-menu-btn:is([data-state~=active],[data-state~=selected],[data-state~=current]):not(:active,.nds-oncolor) {
            --btn-indicator-color: var(--background-primary);
            --btn-indicator-selected: var(--background-primary)
        }

    body.nds-minimal .nds-main-nav .nds-nav-primary .nds-nav-item:not(.nds-show-more) {
        margin: 0 var(--spacing-xl)
    }

    body.nds-minimal .nds-main-nav .nds-nav-primary .nds-nav-item:last-child {
        border-bottom: none;
        margin-bottom: var(--spacing-md)
    }

    body.nds-minimal .nds-main-nav .nds-nav-primary .nds-dropdown-menu {
        display: grid;
        transition: grid-template-rows var(--nds-transition);
        grid-template-rows: 0fr;
        box-shadow: unset !important;
        border-radius: unset !important;
        z-index: var(--_nav-z-collapse-dropdown);
        overflow: clip;
        will-change: height;
        contain: layout;
        padding: 0
    }

        body.nds-minimal .nds-main-nav .nds-nav-primary .nds-dropdown-menu .nds-dropdown-content {
            grid-row: 1/span 2;
            transform: translateY(0);
            transition: none;
            max-height: unset;
            overflow: unset !important
        }

            body.nds-minimal .nds-main-nav .nds-nav-primary .nds-dropdown-menu .nds-dropdown-content .nds-dropdown-item {
                width: 100%
            }

    body.nds-minimal .nds-main-nav .nds-nav-primary .nds-dropdown[data-state~=open] .nds-dropdown-menu {
        grid-template-rows: 1fr
    }

    body.nds-minimal .nds-main-nav .nds-nav-primary .nds-dropdown:is([data-state~=opening],[data-state~=closing]) .nds-dropdown-menu {
        grid-template-rows: 0fr
    }

body.nds-minimal .nds-main-nav .nds-nav-item {
    border-bottom: 1px solid var(--divider-color)
}

body.nds-minimal .nds-main-nav .nds-collapse-content .nds-nav-primary[data-state~=has-more] {
    margin-bottom: calc(var(--nds-minimal-nav-item-height))
}

    body.nds-minimal .nds-main-nav .nds-collapse-content .nds-nav-primary[data-state~=has-more] ~ .nds-show-more {
        opacity: 1;
        visibility: visible
    }

        body.nds-minimal .nds-main-nav .nds-collapse-content .nds-nav-primary[data-state~=has-more] ~ .nds-show-more i {
            transition: transform .1s ease
        }

    body.nds-minimal .nds-main-nav .nds-collapse-content .nds-nav-primary[data-state~=has-more][data-state~=at-end] ~ .nds-show-more i {
        transform: rotate(180deg)
    }

body.nds-minimal .nds-main-nav .nds-show-more {
    border-bottom: none;
    bottom: var(--nds-nav-height);
    box-shadow: 0px -4px 8px 0px rgba(0,0,0,.08);
    position: fixed;
    inset-inline: 0;
    z-index: var(--_nav-z-showmore);
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .1s,visibility .1s
}

body.nds-minimal .nds-main-nav .nds-nav-actions {
    position: sticky !important;
    inset-inline: 0;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--divider-color);
    justify-content: center;
    background-color: var(--_nav-bg);
    z-index: var(--_nav-z-secondary)
}

    body.nds-minimal .nds-main-nav .nds-nav-actions:not(:has([data-state~=open])) {
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        transition: border-radius var(--nds-transition)
    }

    body.nds-minimal .nds-main-nav .nds-nav-actions .nds-nav-item {
        border-bottom: none
    }

        body.nds-minimal .nds-main-nav .nds-nav-actions .nds-nav-item:first-child {
            border-top: none
        }

    body.nds-minimal .nds-main-nav .nds-nav-actions .nds-dropdown-menu {
        position: fixed !important;
        inset-inline: 0;
        z-index: var(--_nav-z-secondary-dropdown)
    }

        body.nds-minimal .nds-main-nav .nds-nav-actions .nds-dropdown-menu .nds-dropdown-content {
            background-color: var(--background-nav);
            border-radius: 0 0 var(--radius-lg) var(--radius-lg);
            box-shadow: var(--shadow-md)
        }

body.nds-minimal .nds-main-nav :is(.nds-nav-primary,.nds-nav-actions) .nds-dropdown-content {
    border-radius: 0;
    box-shadow: unset;
    margin: 0
}

.nds-main-nav .nds-nav-minimal .nds-dropdown-menu {
    position: fixed !important;
    inset-inline: 0;
    z-index: var(--_nav-z-dropdown)
}

    .nds-main-nav .nds-nav-minimal .nds-dropdown-menu .nds-dropdown-content {
        margin-inline: 0
    }

@media(max-width: 600px) {
    .nds-topbar .nds-topbar-info:not(.nds-digitalStamp-tab) > :not(.nds-theme-toggle-wrap) {
        display: none
    }

    .nds-dropdown-menu .nds-dropdown-columns.nds-colView {
        column-count: 1;
        width: 100%
    }

    .nds-multi-column-list {
        column-count: 1
    }
}

@media(prefers-reduced-motion: reduce) {
    .nds-main-nav :is(.nds-dropdown-menu,.nds-dropdown-content,.nds-collapse,.nds-collapse-content,.nds-nav-primary,.nds-nav-actions,.nds-show-more) {
        transition: none !important
    }
}

#nds-digitalStamp-verify-text {
    line-height: normal
}

.nds-digitalStamp-tab {
    z-index: 10;
    cursor: pointer;
    font-size: var(--typo-text-clamp-sm-FS);
    line-height: var(--typo-text-clamp-sm-LH);
    font-weight: 500;
    padding-inline: 0;
    gap: var(--spacing-xs)
}

    .nds-digitalStamp-tab .nds-flag {
        width: 20px;
        margin-inline-end: 4px
    }

@media(min-width: 961px) {
    .nds-digitalStamp-tab > .nds-digitalStamp-sm-text {
        display: none !important
    }
}

@media(max-width: 960px) {
    .nds-digitalStamp-tab > .nds-digitalStamp-lg-text {
        display: none !important
    }
}

#nds-digitalStamp {
    background-color: var(--background-topbar);
    position: relative;
    z-index: 1051;
    transition: grid-template-rows var(--nds-transition);
    grid-template-rows: 0fr;
    overflow: clip
}

    #nds-digitalStamp[data-state~=open] {
        display: grid;
        grid-template-rows: 1fr
    }

    #nds-digitalStamp:is([data-state~=opening],[data-state~=closing]) {
        grid-template-rows: 0fr
    }

    #nds-digitalStamp > * {
        grid-row: 1/span 2
    }

.nds-digitalStamp-notices {
    margin-block: var(--spacing-5xl);
    display: flex;
    gap: var(--spacing-xl);
    flex-wrap: wrap
}

.nds-digitalStamp-card {
    flex: 1;
    min-width: 300px;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xl)
}

.nds-digitalStamp-register {
    width: 100%;
    margin: 0 auto;
    background-color: var(--background-card);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl) var(--spacing-3xl);
    margin-block: var(--spacing-5xl);
    line-height: 24px;
    text-align: start;
    display: flex;
    gap: var(--spacing-sm);
    flex: 0 0 100%;
    justify-content: start;
    align-items: center
}

    .nds-digitalStamp-register > img {
        height: 30px;
        margin-inline-end: var(--spacing-2xl)
    }

.nds-digitalStamp-icon {
    position: relative;
    border: 1px solid var(--border-primary);
    border-radius: 50%;
    width: var(--spacing-6xl);
    height: var(--spacing-6xl);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

@media(max-width: 960px) {
    .nds-digitalStamp-icon {
        width: var(--spacing-4xl);
        height: var(--spacing-4xl);
        font-size: 1rem
    }
}

.nds-digitalStamp-icon > :is(.nds-icon,i) {
    color: var(--text-primary)
}

.nds-digitalStamp-content {
    flex: 1
}

.nds-digitalStamp-heading {
    font-size: var(--typo-text-clamp-lg-FS);
    line-height: var(--typo-text-clamp-lg-LH);
    font-weight: 600;
    color: var(--text-default);
    margin-bottom: var(--spacing-md)
}

.nds-digitalStamp-description {
    color: var(--text-default);
    line-height: 1.5
}

@media(max-width: 600px) {
    .nds-digitalStamp-notices {
        flex-direction: column;
        gap: var(--spacing-lg)
    }

    .nds-digitalStamp-card {
        gap: var(--spacing-lg)
    }

    .nds-digitalStamp-heading {
        font-size: 16px;
        line-height: normal
    }

    .nds-digitalStamp-description {
        font-size: 13px
    }
}

#nds-digitalStamp-verify-text {
    color: var(--text-primary-sa-flag)
}

.nds-digitalStamp-highlight {
    color: var(--text-primary);
    font-weight: bold
}

.nds-hero-section img {
    pointer-events: none
}

.nds-form:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl)
}

.nds-form-container:not([hidden]) {
    --_form-width: var(--form-width, 100%);
    display: flex;
    gap: var(--spacing-md);
    flex-direction: column;
    width: var(--_form-width)
}

    .nds-form-container:not([hidden]) .nds-form-header {
        display: flex;
        flex-direction: column
    }

        .nds-form-container:not([hidden]) .nds-form-header label {
            display: flex;
            flex-direction: column;
            cursor: pointer
        }

        .nds-form-container:not([hidden]) .nds-form-header .nds-label {
            color: var(--form-field-text-label);
            font-size: var(--typo-text-md-FS);
            line-height: var(--typo-text-md-LH);
            font-weight: 500;
            cursor: pointer
        }

    .nds-form-container:not([hidden]):is([data-required],.nds-required) .nds-form-header .nds-label::before, .nds-form-container:not([hidden]):is([data-required],.nds-required) > .nds-label::before {
        content: "* ";
        color: var(--controls-control-text-error)
    }

    .nds-form-container:not([hidden])[data-status=error] .nds-form-control {
        border-color: var(--form-field-border-error)
    }

        .nds-form-container:not([hidden])[data-status=error] .nds-form-control::before {
            background-color: var(--form-field-border-error)
        }

    .nds-form-container:not([hidden])[data-state~=focus]:not([data-state~=readonly]) .nds-form-control {
        box-shadow: var(--shadow-md)
    }

        .nds-form-container:not([hidden])[data-state~=focus]:not([data-state~=readonly]) .nds-form-control::before {
            width: 100%
        }

        .nds-form-container:not([hidden])[data-state~=focus]:not([data-state~=readonly]) .nds-form-control, .nds-form-container:not([hidden])[data-state~=focus]:not([data-state~=readonly]) .nds-form-control ::-webkit-input-placeholder {
            color: var(--form-field-text-focused)
        }

    .nds-form-container:not([hidden])[data-state~=active]:not([data-state~=readonly]) .nds-form-control {
        border-color: var(--form-field-border-default);
        background-color: var(--form-field-background-darker);
        box-shadow: var(--shadow-md)
    }

        .nds-form-container:not([hidden])[data-state~=active]:not([data-state~=readonly]) .nds-form-control::before {
            width: 50%
        }

        .nds-form-container:not([hidden])[data-state~=active]:not([data-state~=readonly]) .nds-form-control, .nds-form-container:not([hidden])[data-state~=active]:not([data-state~=readonly]) .nds-form-control ::-webkit-input-placeholder {
            color: var(--form-field-text-pressed)
        }

    .nds-form-container:not([hidden])[data-state~=readonly] {
        pointer-events: none
    }

        .nds-form-container:not([hidden])[data-state~=readonly] .nds-form-control {
            border-color: var(--border-neutral-primary);
            background-color: rgba(0,0,0,0);
            color: var(--form-field-text-readonly)
        }

            .nds-form-container:not([hidden])[data-state~=readonly] .nds-form-control ::-webkit-input-placeholder {
                color: var(--form-field-text-placeholder)
            }

            .nds-form-container:not([hidden])[data-state~=readonly] .nds-form-control:hover {
                border-color: var(--border-neutral-primary);
                color: var(--form-field-text-readonly)
            }

                .nds-form-container:not([hidden])[data-state~=readonly] .nds-form-control:hover ::-webkit-input-placeholder {
                    color: var(--form-field-text-placeholder)
                }

    .nds-form-container:not([hidden])[data-state~=disabled] {
        pointer-events: none;
        user-select: none
    }

        .nds-form-container:not([hidden])[data-state~=disabled] .nds-form-header .nds-label, .nds-form-container:not([hidden])[data-state~=disabled] .nds-form-header .nds-info {
            color: var(--text-default-disabled)
        }

        .nds-form-container:not([hidden])[data-state~=disabled] .nds-form-control {
            background-color: rgba(0,0,0,0);
            color: var(--text-default-disabled);
            border-color: var(--border-disabled)
        }

            .nds-form-container:not([hidden])[data-state~=disabled] .nds-form-control ::-webkit-input-placeholder {
                color: var(--text-default-disabled)
            }

:is(.nds-form-container,.nds-form-group) .nds-label + .nds-info {
    color: var(--text-primary-paragraph);
    font-size: var(--typo-text-sm-FS);
    line-height: var(--typo-text-sm-LH);
    min-width: 200px
}

:is(.nds-form-container,.nds-form-group) .nds-label + .nds-note {
    color: var(--text-secondary-paragraph);
    font-weight: 300
}

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0
}

    fieldset > legend, fieldset > legend > .nds-label {
        padding: 0;
        margin-bottom: var(--spacing-xl);
        font-size: var(--typo-text-lg-FS);
        font-weight: 500;
        line-height: 1
    }

    fieldset:is([data-required],[data-min-checked],.nds-required) > legend > .nds-label::before, fieldset:is([data-required],[data-min-checked],.nds-required) > .nds-label::before {
        content: "* ";
        color: var(--controls-control-text-error)
    }

.nds-form-control {
    --_input-size: var(--input-size, 40px);
    --_input-radius: var(--input-radius, var(--radius-sm));
    display: flex;
    min-height: var(--_input-size);
    height: var(--_input-size);
    justify-content: flex-start;
    align-items: self-start;
    padding: var(--spacing-none) var(--spacing-md);
    border-radius: var(--_input-radius);
    gap: var(--spacing-md);
    border: 1px solid var(--form-field-border-default);
    background-color: var(--form-field-background-default);
    position: relative
}

    .nds-form-control :is(input,textarea,select):not(:disabled):not([type=checkbox]):not([type=radio]) {
        color: var(--form-field-text-focused);
        outline: unset !important;
        outline-offset: unset !important;
        box-shadow: unset !important
    }

    .nds-form-control ::-webkit-input-placeholder {
        color: var(--form-field-text-placeholder)
    }

    .nds-form-control:hover {
        border-color: var(--form-field-border-hovered)
    }

        .nds-form-control:hover, .nds-form-control:hover ::-webkit-input-placeholder {
            color: var(--form-field-text-hovered)
        }

    .nds-form-control::before {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 50%;
        width: 0%;
        height: 2px;
        border-radius: 0 0 3px 3px;
        transform: translateX(-50%);
        background-color: var(--form-field-border-pressed);
        transition: width var(--nds-transition);
        z-index: 2
    }

.nds-md > .nds-form-control {
    --_input-size: 32px;
    font-size: var(--typo-text-sm-FS)
}

    .nds-md > .nds-form-control .nds-form-action > .nds-btn {
        --btn-size: 32px
    }

.nds-form-control:is(.nds-focus,.focus) {
    box-shadow: var(--shadow-md)
}

    .nds-form-control:is(.nds-focus,.focus)::before {
        width: 100%
    }

    .nds-form-control:is(.nds-focus,.focus), .nds-form-control:is(.nds-focus,.focus) ::-webkit-input-placeholder {
        color: var(--form-field-text-focused)
    }

.nds-form-control > i {
    align-self: center
}

.nds-form-control > input {
    background-color: rgba(0,0,0,0);
    border: 0px;
    outline: 0px;
    height: 100%;
    width: 100%
}

    .nds-form-control > input:focus {
        color: var(--form-field-text-focused)
    }

.nds-textarea > .nds-form-control {
    padding: var(--form-textarea-padding);
    height: fit-content;
    width: 100%
}

    .nds-textarea > .nds-form-control > textarea {
        padding: var(--spacing-md);
        min-height: 40px;
        min-width: 100%
    }

.nds-select > .nds-form-control > select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    width: 100%;
    height: 100%
}

.nds-select > .nds-form-control::after {
    content: "";
    pointer-events: none;
    position: absolute;
    left: var(--spacing-md);
    transition: transform .1s ease;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: var(--nds-icon-arrow-left-01) center/contain no-repeat;
    rotate: -90deg;
    top: 50%;
    translate: 0 -50%
}

:is(html[dir=ltr],.ltr) .nds-select > .nds-form-control::after {
    left: unset;
    right: var(--spacing-md)
}

.nds-select[data-state~=open] > .nds-form-control::after {
    transform: rotate(180deg)
}

.nds-form-control .nds-select-input {
    cursor: pointer
}

.nds-form-control .nds-form-action:not([hidden]) {
    display: flex;
    gap: var(--spacing-sm);
    flex-direction: row;
    margin-inline-end: calc(var(--spacing-md)*-1);
    align-self: stretch
}

    .nds-form-control .nds-form-action:not([hidden]):first-child {
        margin-inline-end: unset;
        margin-inline-start: calc(var(--spacing-md)*-1)
    }

    .nds-form-control .nds-form-action: not([hidden]) > *:not([hidden]):not(.nds-dropmenu,.nds-dropmenu-menu,.nds-browse-btn) {
        --btn-height: 100%;
        --btn-height-min: var(--btn-height);
        --btn-radius: var(--_input-radius);
        padding-block: 0;
        position: relative;
        height: var(--btn-height);
        display: flex;
        align-items: center;
        justify-content: center
    }

        .nds-form-control .nds-form-action:not([hidden]) > *:not([hidden]):not(.nds-dropmenu,.nds-dropmenu-menu,.nds-browse-btn):not(:first-child):not([hidden]+*)::before {
            content: "";
            width: 1px;
            background-color: var(--border-neutral-primary);
            height: calc(100% - var(--spacing-lg));
            position: absolute;
            inset-inline-start: calc(var(--spacing-sm)/-1.5);
            top: 50%;
            transform: translateY(-50%)
        }

    .nds-form-control .nds-form-action:not([hidden]):is(.nds-prefix,.nds-suffix) {
        gap: 0;
        white-space: nowrap
    }

        .nds-form-control .nds-form-action:not([hidden]):is(.nds-prefix,.nds-suffix) > *:not([hidden]):not(.nds-dropmenu,.nds-dropmenu-menu,.nds-browse-btn) {
            --btn-radius: 0 !important
        }

            .nds-form-control .nds-form-action:not([hidden]):is(.nds-prefix,.nds-suffix) > *:not([hidden]):not(.nds-dropmenu,.nds-dropmenu-menu,.nds-browse-btn):not(:first-child)::before {
                display: none
            }

        .nds-form-control .nds-form-action:not([hidden]):is(.nds-prefix,.nds-suffix) > :not(button):not(a) {
            --btn-color: var(--text-secondary-paragraph)
        }

    .nds-form-control .nds-form-action:not([hidden]).nds-suffix > *:last-child {
        border-start-end-radius: var(--_input-radius);
        border-end-end-radius: var(--_input-radius)
    }

    .nds-form-control .nds-form-action:not([hidden]).nds-prefix {
        margin-inline-end: unset;
        margin-inline-start: calc(var(--spacing-md)*-1)
    }

        .nds-form-control .nds-form-action: not([hidden]).nds-prefix > *:first-child {
            border-start-start-radius: var(--_input-radius);
            border-end-start-radius: var(--_input-radius)
        }

:where(.nds-form-container.nds-lighter:not(.nds-file-upload),.nds-form-container.nds-darker:not(.nds-file-upload)) .nds-form-control {
    border-color: rgba(0,0,0,0)
}

.nds-form-container:not(.nds-file-upload).nds-lighter .nds-form-control {
    background-color: var(--form-field-background-lighter)
}

.nds-form-container:not(.nds-file-upload).nds-darker .nds-form-control {
    background-color: var(--form-field-background-darker)
}

.nds-form-container:not(.nds-file-upload).nds-lighter[data-state~=active]:not([data-state~=readonly]) .nds-form-control {
    background-color: var(--form-field-background-lighter)
}

.nds-form-container[data-state~=listening] .nds-voice-input > i {
    animation: colorCycle 1s linear infinite alternate
}

.nds-toggle-password.show i {
    --nds-icon: var(--nds-icon-eye)
}

.nds-form-group {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-xl);
    column-gap: var(--spacing-4xl)
}

    .nds-form-group:has(>.nds-label) .nds-form-container {
        padding-inline-start: var(--spacing-md)
    }

    .nds-form-group.nds-rowView {
        flex-direction: row;
        flex-wrap: wrap
    }

        .nds-form-group.nds-rowView > .nds-feedback {
            flex-basis: 100%;
            width: 100%
        }

    .nds-form-group:is([data-required],[data-min-checked],.nds-required) > .nds-label::before {
        content: "* ";
        color: var(--controls-control-text-error)
    }

    .nds-form-group[data-state~=disabled] {
        opacity: .5;
        pointer-events: none
    }

        .nds-form-group[data-state~=disabled] .nds-form-container {
            pointer-events: none
        }

    .nds-form-group[data-status] > .nds-feedback {
        display: flex
    }

    .nds-form-group[data-status=error] > .nds-feedback {
        color: var(--text-error)
    }

    .nds-form-group[data-status=success] > .nds-feedback {
        color: var(--text-success)
    }

    .nds-form-group[data-status=warning] > .nds-feedback {
        color: var(--text-warning)
    }

    .nds-form-group[data-status=info] > .nds-feedback {
        color: var(--text-info)
    }

:is(.nds-check-container,.nds-radio-container,.nds-switch-container).nds-form-container:not([hidden]) {
    flex-direction: row-reverse;
    width: fit-content;
    flex-wrap: nowrap;
    justify-content: flex-end
}

    :is(.nds-check-container,.nds-radio-container,.nds-switch-container).nds-form-container:not([hidden]) .nds-form-header .nds-label {
        color: var(--text-display);
        font-weight: 500
    }

    :is(.nds-check-container,.nds-radio-container,.nds-switch-container).nds-form-container:not([hidden]) .nds-form-control {
        min-width: unset;
        min-height: unset;
        width: fit-content;
        height: fit-content;
        padding: 0;
        border: 0;
        box-shadow: unset;
        background-color: unset !important;
        position: relative
    }

:is(.nds-check-container,.nds-radio-container).nds-form-container:not([hidden]) .nds-form-control::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: var(--nds-input-size, 16px);
    height: var(--nds-input-size, 16px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--controls-control-ripple-effect);
    transition: width var(--nds-transition),height var(--nds-transition);
    z-index: 0;
    pointer-events: none
}

:is(.nds-check-container,.nds-radio-container).nds-form-container:not([hidden]) .nds-form-control:has(input:not(:disabled):hover)::before {
    width: calc(var(--nds-input-size, 16px)*2);
    height: calc(var(--nds-input-size, 16px)*2)
}

@media(max-width: 600px) {
    :is(.nds-check-container,.nds-radio-container,.nds-switch-container) {
        gap: var(--spacing-sm)
    }

        :is(.nds-check-container,.nds-radio-container,.nds-switch-container).nds-md {
            gap: var(--spacing-md)
        }

        :is(.nds-check-container,.nds-radio-container,.nds-switch-container).nds-lg {
            gap: var(--spacing-lg)
        }

    .nds-form-group:is(.nds-check-group,.nds-radio-group,.nds-switch-group) {
        row-gap: var(--spacing-lg);
        column-gap: var(--spacing-4xl)
    }
}

.nds-form-container.nds-otp-container:not([hidden]) {
    display: flex;
    width: fit-content;
    gap: 0
}

    .nds-form-container.nds-otp-container:not([hidden]) .nds-form-control {
        min-width: unset;
        min-height: unset;
        width: var(--_otp-size, 48px);
        height: var(--_otp-size, 48px);
        padding: 0
    }

        .nds-form-container.nds-otp-container:not([hidden]) .nds-form-control > input {
            text-align: center;
            font-size: var(--typo-text-lg-FS);
            line-height: var(--typo-text-lg-LH);
            font-weight: 600;
            width: 100%;
            height: 100%;
            border: 0;
            padding: 0
        }

            .nds-form-container.nds-otp-container:not([hidden]) .nds-form-control > input::-webkit-outer-spin-button, .nds-form-container.nds-otp-container:not([hidden]) .nds-form-control > input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0
            }

            .nds-form-container.nds-otp-container:not([hidden]) .nds-form-control > input[type=number] {
                -moz-appearance: textfield
            }

.nds-otp-group {
    row-gap: var(--spacing-md);
    display: flex;
    flex-direction: column;
    margin: auto
}

    .nds-otp-group .nds-otp {
        column-gap: var(--spacing-md);
        display: flex;
        align-items: center;
        direction: ltr;
        justify-content: center
    }

    .nds-otp-group .nds-otp-container {
        --_otp-size: 40px
    }

    .nds-otp-group.nds-sm .nds-otp-container {
        --_otp-size: 32px
    }

        .nds-otp-group.nds-sm .nds-otp-container .nds-form-control > input {
            font-size: var(--typo-text-md-FS)
        }

    .nds-otp-group.nds-lg .nds-otp-container {
        --_otp-size: 48px
    }

        .nds-otp-group.nds-lg .nds-otp-container .nds-form-control > input {
            font-size: var(--typo-text-xl-FS)
        }

.nds-otp-separator {
    width: 8px;
    height: 2px;
    background-color: var(--border-neutral-primary);
    border-radius: 1px;
    flex-shrink: 0;
    align-self: center
}

@media(max-width: 600px) {
    .nds-otp-group {
        gap: var(--spacing-sm)
    }

        .nds-otp-group .nds-otp-container {
            --_otp-size: 40px
        }

        .nds-otp-group.nds-sm .nds-otp-container {
            --_otp-size: 32px
        }

        .nds-otp-group.nds-lg .nds-otp-container {
            --_otp-size: 44px
        }
}

@media(prefers-contrast: high) {
    .nds-otp-container .nds-form-control {
        border-width: 2px
    }
}

@media(prefers-reduced-motion: reduce) {
    .nds-otp-container .nds-form-control {
        transition: none
    }
}

.nds-ipv-image-card.showZoom::before {
    content: "";
    position: absolute;
    z-index: 999;
    inset-block-end: 8px;
    inset-inline-end: 8px;
    width: 32px;
    height: 32px;
    background-color: rgba(0,0,0,.3);
    background-image: var(--nds-icon-zoom-in-area);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    pointer-events: none;
    border-radius: 8px
}

.nds-ipv-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer
}

.nds-ipv-image-title {
    color: var(--text-primary-default);
    margin-block-start: var(--spacing-sm);
    font-size: var(--typo-text-md-FS);
    line-height: var(--typo-text-md-LH);
    font-weight: 500
}

.nds-ipv-popup-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.9);
    display: none;
    z-index: 1000;
    backdrop-filter: blur(5px)
}

    .nds-ipv-popup-overlay.nds-ipv-active {
        display: flex;
        align-items: center;
        justify-content: center;
        animation: ndsIpvFadeIn .3s ease-out
    }

@keyframes ndsIpvFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.nds-ipv-popup-container {
    position: relative;
    width: 90vw;
    height: 90vh;
    overflow: hidden
}

.nds-ipv-popup-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: grab;
    user-select: none;
    transform-origin: center center
}

    .nds-ipv-popup-image:active {
        cursor: grabbing
    }

.nds-ipv-popup-controls {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-end: 20px;
    display: flex;
    gap: var(--spacing-sm);
    z-index: 1001;
    transition: opacity .3s ease,visibility .3s ease
}

@media(max-width: 600px) {
    .nds-ipv-popup-controls {
        inset-block-start: 10px;
        inset-inline-end: 10px
    }
}

.nds-ipv-navigation-controls {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding-inline: 20px;
    z-index: 1001;
    pointer-events: none;
    transition: opacity .3s ease,visibility .3s ease
}

@media(max-width: 600px) {
    .nds-ipv-navigation-controls {
        padding-inline: 10px
    }
}

.nds-ipv-navigation-controls button {
    pointer-events: all
}

:is(html[dir=ltr],.ltr) .nds-ipv-navigation-controls i {
    transform: scaleX(-1)
}

.nds-ipv-control-btn {
    background: rgba(0,0,0,.2);
    border: 1px solid hsla(0,0%,100%,.3);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--typo-text-xl-FS);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    backdrop-filter: blur(10px)
}

    .nds-ipv-control-btn:hover {
        background: rgba(0,0,0,.3);
        transform: scale(1.1)
    }

@media(max-width: 600px) {
    .nds-ipv-control-btn {
        width: 40px;
        height: 40px;
        font-size: var(--typo-text-lg-FS)
    }
}

.nds-ipv-zoom-info {
    position: absolute;
    inset-block-end: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 25px;
    font-size: var(--typo-text-sm-FS);
    line-height: var(--typo-text-sm-LH);
    backdrop-filter: blur(10px);
    transition: opacity .3s ease,visibility .3s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-md)
}

.nds-ipv-image-counter {
    position: absolute;
    inset-block-start: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 25px;
    font-size: var(--typo-text-sm-FS);
    line-height: var(--typo-text-sm-LH);
    font-weight: 500;
    backdrop-filter: blur(10px);
    transition: opacity .3s ease,visibility .3s ease
}

@media(max-width: 600px) {
    .nds-ipv-image-counter {
        inset-block-start: 70px;
        font-size: var(--typo-text-xs-FS);
        padding: var(--spacing-xs) var(--spacing-md)
    }
}

.nds-ipv-instructions {
    position: absolute;
    inset-block-start: 20px;
    inset-inline-start: 20px;
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-size: var(--typo-text-sm-FS);
    line-height: var(--typo-text-sm-LH);
    max-width: 250px;
    backdrop-filter: blur(10px);
    transition: opacity .3s ease,visibility .3s ease
}

    .nds-ipv-instructions strong {
        font-weight: 600
    }

@media(max-width: 600px) {
    .nds-ipv-instructions {
        display: none
    }
}

.nds-ipv-popup-controls.nds-ipv-ui-hidden .nds-ipv-control-btn:not(.nds-ipv-ui-toggle-btn) {
    display: none !important
}

.nds-ipv-instructions.nds-ipv-ui-hidden {
    display: none !important
}

.nds-ipv-zoom-info.nds-ipv-ui-hidden {
    display: none !important
}

.nds-ipv-navigation-controls.nds-ipv-ui-hidden {
    display: none !important
}

.nds-ipv-image-counter.nds-ipv-ui-hidden {
    display: none !important
}

.nds-pagination {
    --_pagination-margin-top: var(--pagination-margin-top, var(--spacing-2xl));
    width: 100%;
    margin-top: var(--_pagination-margin-top)
}

    .nds-pagination:not(:has(>.nds-pagination-list)) {
        display: none
    }

.nds-pagination-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    list-style: none;
    margin: 0;
    padding: 0
}

.nds-pagination-item {
    display: inline-flex
}

    .nds-pagination-item .nds-btn {
        --btn-FS: var(--typo-text-md-FS);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative
    }

        .nds-pagination-item .nds-btn .nds-label {
            text-align: center;
            width: 100%;
            position: relative
        }

        .nds-pagination-item .nds-btn:is([aria-current=page],[data-state~=active]) {
            font-weight: 600;
            color: var(--button-label-primary-default)
        }

            .nds-pagination-item .nds-btn:is([aria-current=page],[data-state~=active]):not(.nds-dropmenu-trigger:hover) {
                background-color: unset
            }

            .nds-pagination-item .nds-btn:is([aria-current=page],[data-state~=active]).nds-indicator:before {
                background-color: var(--button-background-primary-hovered);
                color: var(--button-background-primary-hovered)
            }

:root[data-theme=dark] .nds-pagination-item .nds-btn:is([aria-current=page],[data-state~=active]).nds-indicator:before {
    background-color: var(--button-background-primary-default);
    color: var(--button-background-primary-default)
}

:is(html[dir=ltr],.ltr) .nds-pagination-item:is(.nds-pagination-prev,.nds-pagination-next) .nds-btn i {
    transform: scaleX(-1)
}

.nds-pagination-ellipsis .nds-dropmenu-trigger > .nds-label {
    height: 1em;
    display: none
}

.nds-pagination-ellipsis .nds-dropmenu-menu, .nds-dropmenu-menu.nds-pagination-ellipsis {
    min-width: 60px
}

    .nds-pagination-ellipsis .nds-dropmenu-menu .nds-dropmenu-item, .nds-dropmenu-menu.nds-pagination-ellipsis .nds-dropmenu-item {
        --btn-indicator-selected: var(--button-background-primary-default);
        justify-content: center;
        min-width: 40px;
        min-height: 40px
    }

        .nds-pagination-ellipsis .nds-dropmenu-menu .nds-dropmenu-item:is([aria-current=page],[data-state~=active]):not(.nds-dropmenu-trigger:hover), .nds-dropmenu-menu.nds-pagination-ellipsis .nds-dropmenu-item:is([aria-current=page],[data-state~=active]):not(.nds-dropmenu-trigger:hover) {
            background-color: unset
        }

.nds-pagination-item .nds-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none
}

.nds-pagination.nds-md .nds-btn {
    --btn-size: 32px
}

.nds-pagination.nds-sm .nds-btn {
    --btn-size: 24px;
    --btn-FS: var(--typo-text-sm-FS)
}

.nds-paged-content {
    width: 100%
}

.nds-pagination-ellipsis .nds-dropmenu-trigger[data-state~=active] > .nds-label {
    display: block
}

.nds-pagination-ellipsis .nds-dropmenu-trigger[data-state~=active]::before {
    display: none
}

.nds-pagination-ellipsis .nds-dropmenu-trigger[data-state~=active]::after {
    position: absolute;
    transform: translateY(calc(var(--btn-size) / 2 - 2px))
}

.nds-progress-circle {
    --_progress-size: var(--progress-size, 64px);
    --_progress-value: var(--progress-value, 0);
    --_progress-circumference: var(--progress-circumference, 62.83);
    --_progress-track-color: var(--progress-track-color, var(--colors-neutral-100));
    --_progress-color: var(--progress-color, var(--background-primary));
    position: relative;
    width: var(--progress-size, var(--_progress-size)) !important;
    height: var(--progress-size, var(--_progress-size)) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    counter-reset: progress-counter min(var(--_progress-value),100)
}

    .nds-progress-circle svg {
        width: var(--progress-size, var(--_progress-size)) !important;
        height: var(--progress-size, var(--_progress-size)) !important;
        transform: rotate(-90deg) !important
    }

:is(html[dir=ltr],.ltr) .nds-progress-circle svg {
    transform: rotate(-90deg) scaleY(-1) !important
}

.nds-progress-circle svg circle {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    transform: scale(1.08);
    transform-origin: center center
}

    .nds-progress-circle svg circle.nds-progress-bg {
        stroke: var(--_progress-track-color)
    }

    .nds-progress-circle svg circle.nds-progress-track {
        stroke: var(--_progress-color)
    }

.nds-progress-circle .nds-progress-info {
    position: absolute;
    color: var(--text-primary-paragraph);
    line-height: 1;
    align-items: center;
    text-align: center
}

.nds-progress-circle .nds-progress-info {
    padding: 0 clamp(8px,var(--_progress-size, var(--_progress-size))*.2,40px) !important
}

    .nds-progress-circle .nds-progress-info :is(.nds-progress-percentage,.nds-progress-out-of) {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xxs);
        direction: ltr;
        letter-spacing: clamp(0rem,var(--_progress-size, var(--_progress-size))*-0.0006,-0.12rem) !important
    }

    .nds-progress-circle .nds-progress-info :is(.nds-progress-number,.nds-progress-symbol) {
        font-size: clamp(10px,var(--_progress-size, var(--_progress-size))*.15 + 6px,36px) !important;
        font-weight: 700 !important;
        line-height: normal
    }

    .nds-progress-circle .nds-progress-info .nds-progress-of {
        font-size: clamp(14px,var(--_progress-size, var(--_progress-size))*.1 + 4px,30px);
        line-height: normal
    }

    .nds-progress-circle .nds-progress-info .nds-progress-text {
        font-size: clamp(10px,var(--_progress-size, var(--_progress-size))*.1,20px);
        line-height: clamp(20px,var(--_progress-size, var(--_progress-size))*.125 + 5px,30px);
        max-height: max(0px,var(--_progress-size, var(--_progress-size)) - 80px);
        overflow: hidden;
        display: block
    }

:root[data-theme=dark] .nds-progress-circle {
    --_progress-track-color: var(--progress-track-color, var(--alpha-white-10))
}

.nds-progress-circle svg circle.nds-progress-track {
    stroke-dasharray: var(--_progress-circumference) !important;
    stroke-dashoffset: calc(var(--_progress-circumference) - var(--_progress-circumference)*min(var(--_progress-value),100)/100);
    transition: stroke-dashoffset .3s ease !important
}

.nds-progress-circle .nds-progress-percentage .nds-progress-number::before {
    content: counter(progress-counter);
    line-height: normal;
    letter-spacing: clamp(0rem,var(--_progress-size)*-0.0006,-0.12rem)
}

.nds-progress-circle .nds-progress-out-of {
    align-items: baseline !important
}

    .nds-progress-circle .nds-progress-out-of .nds-progress-of {
        font-weight: 400;
        color: var(--text-muted)
    }

.nds-progress-circle.nds-md {
    --progress-size: 80px
}

.nds-progress-circle.nds-lg {
    --progress-size: 120px
}

.nds-progress-circle.nds-xl {
    --progress-size: 160px
}

.nds-progress-circle.nds-2xl {
    --progress-size: 200px
}

.nds-progress-circle.nds-neutral {
    --progress-color: var(--colors-neutral-700)
}

:root[data-theme=dark] .nds-progress-circle.nds-neutral {
    --progress-color: var(--colors-neutral-200)
}

.nds-progress-circle[data-status=success] {
    --progress-color: var(--background-success);
    --progress-value: 100 !important
}

.nds-progress-circle[data-status=error] {
    --progress-color: var(--background-error)
}

.nds-progress-circle :is(.nds-feedback,.nds-feedback-icon) {
    display: none;
    justify-content: center
}

.nds-progress-circle[data-status] .nds-progress-percentage {
    display: none
}

.nds-progress-circle[data-status] .nds-feedback {
    display: flex
}

.nds-progress-circle[data-status] .nds-feedback-icon {
    display: inline-flex;
    width: clamp(16px,var(--_progress-size)*.3,72px);
    height: clamp(16px,var(--_progress-size)*.3,72px);
    font-size: clamp(16px,var(--_progress-size)*.3,72px)
}

.nds-progress-bar {
    --_progress-height: var(--progress-height, 8px);
    --_progress-value: var(--progress-value, 0);
    --_progress-color: var(--progress-color, var(--background-primary));
    counter-reset: progress-counter min(var(--_progress-value),100);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%
}

    .nds-progress-bar .nds-progress-label {
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
        font-weight: 500;
        color: var(--text-default)
    }

    .nds-progress-bar .nds-progress-track {
        width: 100%;
        height: var(--_progress-height);
        background-color: var(--colors-neutral-100);
        border-radius: var(--radius-full);
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden
    }

:root[data-theme=dark] .nds-progress-bar .nds-progress-track {
    background-color: var(--alpha-white-10)
}

.nds-progress-bar .nds-progress-fill {
    height: 100%;
    background-color: var(--_progress-color);
    border-radius: var(--radius-full);
    transition: width .3s ease;
    width: calc(min(var(--_progress-value),100)*1%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-inline-end: var(--spacing-xs);
    color: var(--text-oncolor-primary);
    font-size: var(--typo-text-xs-FS);
    font-weight: 600;
    white-space: nowrap
}

    .nds-progress-bar .nds-progress-fill::after {
        content: counter(progress-counter) "%";
        padding-inline: var(--spacing-xs)
    }

.nds-progress-bar .nds-feedback {
    display: flex
}

.nds-progress-bar:not([data-status]) .nds-feedback .nds-icon {
    --nds-icon: var(--nds-icon-information-circle)
}

.nds-progress-bar.nds-sm {
    --progress-height: 4px
}

    .nds-progress-bar.nds-sm .nds-progress-fill::after {
        content: none
    }

.nds-progress-bar.nds-md, .nds-progress-bar {
    --progress-height: 8px
}

    .nds-progress-bar.nds-md .nds-progress-fill::after, .nds-progress-bar .nds-progress-fill::after {
        content: none
    }

    .nds-progress-bar.nds-lg {
        --progress-height: 16px
    }

        .nds-progress-bar.nds-lg .nds-progress-fill::after {
            content: counter(progress-counter) "%"
        }

    .nds-progress-bar.nds-neutral {
        --progress-color: var(--colors-neutral-700)
    }

:root[data-theme=dark] .nds-progress-bar.nds-neutral {
    --progress-color: var(--colors-neutral-200)
}

    :root[data-theme=dark] .nds-progress-bar.nds-neutral .nds-progress-fill {
        color: var(--colors-neutral-700)
    }

.nds-progress-bar[data-status=success] {
    --progress-color: var(--background-success);
    --progress-value: 100 !important
}

.nds-progress-bar[data-status=error] {
    --progress-color: var(--background-error)
}

.nds-quote {
    --_quote-bg: var(--quote-background-default, var(--background-card));
    --_quote-border: var(--quote-border, var(--border-default));
    --_quote-radius: var(--quote-radius, var(--radius-lg));
    --_quote-padding: var(--quote-padding, var(--spacing-2xl));
    --_quote-mark-color: var(--quote-mark-color, var(--text-primary-sa-flag));
    --_quote-mark-size: var(--quote-mark-size, 48px);
    --_quote-title-FS: var(--quote-title-FS, var(--typo-display-xs-FS));
    --_quote-title-LH: var(--quote-title-LH, var(--typo-display-xs-LH));
    --_quote-title-color: var(--quote-title-color, var(--text-default));
    --_quote-text-FS: var(--quote-text-FS, var(--typo-text-xl-FS));
    --_quote-text-LH: var(--quote-text-LH, var(--typo-text-xl-LH));
    --_quote-text-color: var(--quote-text-color, var(--text-primary-paragraph));
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    background: var(--_quote-bg);
    border: 1px solid var(--_quote-border);
    border-radius: var(--_quote-radius);
    padding: calc(var(--_quote-padding) + var(--spacing-sm)) var(--_quote-padding);
    margin: 0
}

    .nds-quote .nds-quote-body {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        margin: 0;
        padding-inline: calc(var(--_quote-mark-size) + var(--spacing-lg));
        padding-block-end: var(--spacing-lg)
    }

        .nds-quote .nds-quote-body::before, .nds-quote .nds-quote-body::after {
            content: "";
            position: absolute;
            width: var(--_quote-mark-size);
            height: var(--_quote-mark-size);
            background: var(--_quote-mark-color);
            mask: var(--nds-icon-quote) center/contain no-repeat;
            pointer-events: none;
            user-select: none
        }

        .nds-quote .nds-quote-body::before {
            inset-block-start: calc((var(--_quote-padding) - var(--spacing-xs))*-1);
            inset-inline-start: 0
        }

        .nds-quote .nds-quote-body::after {
            inset-block-end: calc((var(--_quote-padding) - var(--spacing-xs))*-1);
            inset-inline-end: 0;
            transform: rotate(180deg)
        }

:is(html[dir=ltr],.ltr) .nds-quote .nds-quote-body::before {
    transform: scaleX(-1)
}

:is(html[dir=ltr],.ltr) .nds-quote .nds-quote-body::after {
    transform: scaleX(-1) rotate(180deg)
}

.nds-quote .nds-quote-title {
    font-size: var(--_quote-title-FS);
    line-height: var(--_quote-title-LH);
    font-weight: 500;
    color: var(--_quote-title-color);
    margin: 0;
    text-align: start
}

.nds-quote .nds-quote-text {
    font-size: var(--_quote-text-FS);
    line-height: var(--_quote-text-LH);
    color: var(--_quote-text-color);
    margin: 0;
    text-align: start
}

.nds-quote .nds-quote-author .nds-persona-name {
    font-style: normal
}

.nds-quote.nds-transparent {
    --_quote-bg: transparent;
    --_quote-border: transparent;
    padding-inline: 0
}

@container block (width <= 480px) {
    .nds-quote {
        --quote-mark-size: 28px;
        --quote-padding: var(--spacing-xl);
        --quote-text-FS: var(--typo-text-lg-FS);
        --quote-text-LH: var(--typo-text-lg-LH)
    }
}

.nds-form-container.nds-radio-container:not([hidden]).nds-md {
    --nds-input-size: 20px;
    gap: var(--spacing-lg)
}

.nds-form-container.nds-radio-container:not([hidden]).nds-lg {
    --nds-input-size: 24px;
    gap: var(--spacing-xl)
}

.nds-form-container.nds-radio-container:not([hidden]) > .nds-form-header .nds-label {
    font-size: var(--typo-text-md-FS);
    line-height: var(--nds-input-size, 16px)
}

.nds-form-container.nds-radio-container:not([hidden]) .nds-form-control.focused:focus-visible {
    outline: 2px solid var(--colors-base-black) !important;
    outline-offset: -2px !important;
    box-shadow: inset 0 0 0 3px var(--focus-inner) !important
}

.nds-radio-container .nds-form-control input[type=radio] {
    width: var(--nds-input-size, 16px);
    height: var(--nds-input-size, 16px);
    appearance: none;
    position: relative;
    z-index: 1
}

    .nds-radio-container .nds-form-control input[type=radio]:not(:disabled) {
        cursor: pointer
    }

    .nds-radio-container .nds-form-control input[type=radio]:focus-visible {
        outline: 2px solid var(--colors-base-black);
        outline-offset: 2px;
        border-radius: 50%
    }

    .nds-radio-container .nds-form-control input[type=radio]::after {
        --_radio-tile-bg: var(--radio-tile-bg, var(--background-default));
        --_radio-tile-border: var(--radio-tile-border, var(--controls-control-border));
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background-color: var(--_radio-tile-bg);
        box-shadow: 0 0 0 1px var(--_radio-tile-border);
        z-index: 1
    }

    .nds-radio-container .nds-form-control input[type=radio]:checked::after {
        --radio-tile-bg: var(--controls-control-primary-checked);
        --radio-tile-border: var(--radio-tile-bg);
        border: 3px solid var(--background-default)
    }

.nds-md .nds-radio-container .nds-form-control input[type=radio]:checked::after {
    border-width: 4px
}

.nds-lg .nds-radio-container .nds-form-control input[type=radio]:checked::after {
    border-width: 5px
}

.nds-radio-container .nds-form-control input[type=radio]:checked:not(:disabled):hover::after {
    --radio-tile-bg: var(--controls-control-primary-hovered)
}

.nds-radio-container .nds-form-control input[type=radio]:checked:not(:disabled):active::after {
    --radio-tile-bg: var(--controls-control-primary-pressed)
}

.nds-radio-container .nds-form-control input[type=radio]:not(:checked,:disabled):hover::after {
    --radio-tile-border: var(--controls-control-neutral-hovered)
}

.nds-radio-container .nds-form-control input[type=radio]:not(:checked,:disabled):active::after {
    --radio-tile-border: var(--controls-control-neutral-pressed)
}

.nds-radio-container .nds-form-control input[type=radio].nds-neutral:checked::after {
    --radio-tile-bg: var(--radio-neutral-checked)
}

.nds-radio-container .nds-form-control input[type=radio].nds-neutral:checked:not(:disabled):hover::after {
    --radio-tile-bg: var(--radio-neutral-hovered)
}

.nds-radio-container .nds-form-control input[type=radio].nds-neutral:checked:not(:disabled):active::after {
    --radio-tile-bg: var(--radio-neutral-pressed)
}

.nds-radio-container .nds-form-control input[type=radio]:disabled::after {
    --radio-tile-bg: var(--background-default);
    --radio-tile-border: var(--border-disabled)
}

.nds-radio-container .nds-form-control input[type=radio]:checked:disabled::after {
    --radio-tile-bg: var(--control-disabled);
    --radio-tile-border: var(--border-disabled)
}

.nds-radio-container[data-state~=readonly] .nds-form-control input[type=radio]::after, .nds-radio-container[data-state~=readonly] .nds-form-control input[type=radio]:hover::after, .nds-radio-container[data-state~=readonly] .nds-form-control input[type=radio]:active::after, .nds-radio-container[data-state~=readonly] .nds-form-control input[type=radio].nds-neutral::after, .nds-radio-container[data-state~=readonly] .nds-form-control input[type=radio].nds-neutral:hover::after, .nds-radio-container[data-state~=readonly] .nds-form-control input[type=radio].nds-neutral:active::after {
    --radio-tile-border: var(--border-disabled)
}

.nds-rating {
    --_star-size: var(--star-size, 32px);
    --_star-color: var(--star-color, var(--rating-star-normal-default));
    --_star-selected: var(--star-selected, var(--rating-star-selected-default));
    --_star-pressed: var(--star-pressed, var(--rating-star-pressed-default));
    --_star-hovered: var(--star-hovered, var(--rating-star-hovered-default));
    display: flex;
    align-items: flex-start;
    font-family: "IBM Plex Sans Arabic",sans-serif
}

.nds-rating-star {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: default;
    width: var(--_star-size);
    height: var(--_star-size);
    color: var(--_star-color)
}

    .nds-rating-star::before {
        content: "";
        width: 100%;
        height: 100%;
        background-color: currentColor;
        mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='42' height='40' viewBox='0 0 42 40' fill='none'%3e%3cpath d='M19.1839 1.93733C19.8987 0.387582 22.1013 0.387586 22.8161 1.93733L27.3024 11.6635C27.5937 12.2952 28.1923 12.73 28.883 12.8119L39.5195 14.0731C41.2143 14.274 41.8949 16.3688 40.6419 17.5275L32.7781 24.7998C32.2674 25.272 32.0388 25.9757 32.1744 26.6579L34.2618 37.1636C34.5944 38.8375 32.8125 40.1321 31.3233 39.2985L21.9769 34.0668C21.3699 33.7271 20.6301 33.7271 20.0231 34.0668L10.6767 39.2985C9.1875 40.1321 7.40558 38.8375 7.73819 37.1636L9.82565 26.6579C9.96121 25.9757 9.73257 25.272 9.2219 24.7998L1.35805 17.5275C0.105054 16.3688 0.78569 14.274 2.48048 14.0731L13.117 12.8119C13.8077 12.73 14.4063 12.2952 14.6976 11.6635L19.1839 1.93733Z' fill='black'/%3e%3c/svg%3e") no-repeat center/contain
    }

    .nds-rating-star[data-state~=selected] {
        color: var(--_star-selected)
    }

    .nds-rating-star[data-state~=pressed] {
        color: var(--_star-pressed)
    }

    .nds-rating-star[data-state~=half] {
        color: var(--_star-color)
    }

        .nds-rating-star[data-state~=half]::after {
            content: "";
            position: absolute;
            top: 0;
            inset-inline-start: 0;
            width: 100%;
            height: 100%;
            background-color: var(--_star-selected);
            mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='42' height='40' viewBox='0 0 42 40' fill='none'%3e%3cpath d='M19.1839 1.93733C19.8987 0.387582 22.1013 0.387586 22.8161 1.93733L27.3024 11.6635C27.5937 12.2952 28.1923 12.73 28.883 12.8119L39.5195 14.0731C41.2143 14.274 41.8949 16.3688 40.6419 17.5275L32.7781 24.7998C32.2674 25.272 32.0388 25.9757 32.1744 26.6579L34.2618 37.1636C34.5944 38.8375 32.8125 40.1321 31.3233 39.2985L21.9769 34.0668C21.3699 33.7271 20.6301 33.7271 20.0231 34.0668L10.6767 39.2985C9.1875 40.1321 7.40558 38.8375 7.73819 37.1636L9.82565 26.6579C9.96121 25.9757 9.73257 25.272 9.2219 24.7998L1.35805 17.5275C0.105054 16.3688 0.78569 14.274 2.48048 14.0731L13.117 12.8119C13.8077 12.73 14.4063 12.2952 14.6976 11.6635L19.1839 1.93733Z' fill='black'/%3e%3c/svg%3e") no-repeat center/contain,linear-gradient(to left, black 50%, transparent 50%);
            mask-composite: intersect;
            -webkit-mask-composite: source-in;
            z-index: 1
        }

:is(html[dir=ltr],.ltr) .nds-rating-star[data-state~=half]::after {
    transform: scaleX(-1)
}

.nds-rating-dropmenu {
    --menu-padding: var(--spacing-2xl)
}

    .nds-rating-dropmenu .nds-dropmenu-menu .nds-rating {
        margin-block: var(--spacing-2xl)
    }

.nds-rating.nds-xs {
    --star-size: 16px
}

.nds-rating.nds-sm {
    --star-size: 24px
}

.nds-rating.nds-lg {
    --star-size: 48px
}

.nds-rating.nds-brand {
    --star-color: var(--rating-star-normal-brand);
    --star-selected: var(--rating-star-selected-brand);
    --star-pressed: var(--rating-star-pressed-brand);
    --star-hovered: var(--rating-star-hovered-brand)
}

    .nds-rating.nds-brand .nds-rating-star:hover {
        color: var(--_star-hovered)
    }

.nds-rating[data-state~=interactive]:not([data-state~=disabled]):hover .nds-rating-star {
    color: var(--_star-color)
}

    .nds-rating[data-state~=interactive]:not([data-state~=disabled]):hover .nds-rating-star:after {
        display: none
    }

.nds-rating[data-state~=interactive]:not([data-state~=disabled]):active .nds-rating-star:after {
    display: none
}

.nds-rating[data-state~=interactive]:not([data-state~=disabled]) .nds-rating-star {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    border-radius: var(--radius-sm)
}

    .nds-rating[data-state~=interactive]:not([data-state~=disabled]) .nds-rating-star[data-state~=preview] {
        color: var(--_star-selected)
    }

    .nds-rating[data-state~=interactive]:not([data-state~=disabled]) .nds-rating-star:hover {
        color: var(--_star-hovered)
    }

    .nds-rating[data-state~=interactive]:not([data-state~=disabled]) .nds-rating-star:active {
        color: var(--_star-pressed)
    }

.nds-rating[data-state~=interactive]:not([data-state~=disabled]).nds-brand[data-state~=pressed] {
    color: var(--_star-pressed)
}

@media(max-width: 600px) {
    .nds-rating.nds-lg {
        --star-size: 40px
    }
}

:is(html[dir=ltr],.ltr) .nds-rating {
    direction: ltr
}

.nds-file-upload[data-state~=dropbox] .nds-form-header {
    display: none
}

.nds-file-upload[data-state~=dropbox] .nds-form-control {
    flex-direction: column;
    min-height: 120px;
    height: auto;
    padding: var(--spacing-3xl);
    border: 2px dashed var(--border-neutral-primary) !important;
    border-radius: var(--radius-sm);
    background-color: var(--background-neutral-100)
}

:root[data-theme=dark] .nds-file-upload[data-state~=dropbox] .nds-form-control {
    background-color: var(--background-default)
}

.nds-file-upload[data-state~=dropbox] .nds-form-control .nds-upload-zone {
    display: flex
}

.nds-file-upload[data-state~=dropbox] .nds-form-control .nds-form-action {
    justify-content: center;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md)
}

.nds-file-upload[data-state~=dropbox] .nds-form-control[data-state~=drag-over] {
    border-color: var(--border-success) !important;
    background-color: var(--background-success-25);
    color: var(--text-success)
}

:root[data-theme=dark] .nds-file-upload[data-state~=dropbox] .nds-form-control[data-state~=drag-over] {
    background-color: var(--alpha-success-10)
}

.nds-file-upload[data-state~=dropbox] .nds-form-control[data-state~=drag-over] .nds-upload-icon {
    color: var(--icon-success)
}

.nds-file-upload[data-state~=dropbox] .nds-form-control[data-state~=drag-over] :is(.nds-upload-text,.nds-upload-hint) {
    color: var(--text-success)
}

.nds-file-upload[data-state~=dropbox] .nds-form-control[data-state~=drag-over] .nds-browse-btn {
    color: var(--text-default-disabled)
}

.nds-file-upload:not([data-state~=dropbox]) .nds-form-control {
    min-width: 40px;
    width: fit-content
}

    .nds-file-upload:not([data-state~=dropbox]) .nds-form-control .nds-upload-zone {
        display: none
    }

    .nds-file-upload:not([data-state~=dropbox]) .nds-form-control .nds-form-action {
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        border: none
    }

.nds-file-upload:not([data-state~=dropbox]) .nds-drop-hint {
    display: none
}

.nds-file-upload .nds-form-control {
    position: relative;
    flex-direction: row;
    align-items: center;
    height: 40px;
    padding: 0;
    border: none;
    background: rgba(0,0,0,0);
    box-shadow: unset
}

    .nds-file-upload .nds-form-control::before, .nds-file-upload .nds-form-control::after {
        display: none
    }

    .nds-file-upload .nds-form-control[data-state~=disabled] {
        background-color: unset !important
    }

.nds-file-upload .nds-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-3xl);
    min-height: 80px
}

    .nds-file-upload .nds-upload-zone .nds-upload-icon {
        color: var(--text-default);
        font-size: 40px;
        line-height: 40px
    }

    .nds-file-upload .nds-upload-zone .nds-upload-text {
        color: var(--text-display);
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH);
        font-weight: 500
    }

    .nds-file-upload .nds-upload-zone .nds-upload-hint {
        color: var(--text-primary-paragraph);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH)
    }

.nds-file-upload .nds-form-action {
    display: flex
}

.nds-file-upload input[type=file] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none
}

.nds-file-upload .nds-file-list {
    margin-top: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm)
}

    .nds-file-upload .nds-file-list:empty {
        display: none
    }

.nds-file-upload .nds-file-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    border: 1px solid var(--border-neutral-primary);
    border-radius: var(--radius-sm);
    background-color: var(--background-neutral-100);
    gap: var(--spacing-md);
    min-height: 36px
}

:root[data-theme=dark] .nds-file-upload .nds-file-item {
    background-color: var(--background-default)
}

.nds-file-upload .nds-file-item .nds-feedback {
    display: flex
}

.nds-file-upload .nds-file-item .nds-progress-circle {
    display: none
}

.nds-file-upload .nds-file-item .nds-file-error {
    display: none
}

.nds-file-upload .nds-file-item[data-state~=uploading] .nds-progress-circle, .nds-file-upload .nds-file-item[data-state~=processing] .nds-progress-circle {
    display: flex
}

.nds-file-upload .nds-file-item[data-state~=uploading] .nds-feedback, .nds-file-upload .nds-file-item[data-state~=processing] .nds-feedback {
    display: none
}

.nds-file-upload .nds-file-item[data-state~=processing] {
    animation: processing 1.5s ease-in-out infinite
}

.nds-file-upload .nds-file-item[data-status=success] .nds-progress-circle {
    display: none
}

.nds-file-upload .nds-file-item[data-status=success] .nds-feedback {
    display: flex
}

.nds-file-upload .nds-file-item[data-status=error] {
    border-color: var(--border-error)
}

    .nds-file-upload .nds-file-item[data-status=error] .nds-progress-circle {
        display: none
    }

    .nds-file-upload .nds-file-item[data-status=error] .nds-feedback {
        display: flex;
        align-self: flex-start
    }

    .nds-file-upload .nds-file-item[data-status=error] .nds-file-error {
        display: flex
    }

.nds-file-upload .nds-file-item .nds-file-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 100px
}

    .nds-file-upload .nds-file-item .nds-file-info .nds-file-name {
        color: var(--text-default);
        font-size: var(--typo-text-sm-FS);
        line-height: var(--typo-text-sm-LH);
        font-weight: 500;
        display: flex;
        align-items: center
    }

.nds-file-upload .nds-file-item .nds-file-actions {
    display: flex;
    gap: var(--spacing-xs)
}

.nds-file-upload .nds-file-item .nds-file-error {
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-error);
    font-size: var(--typo-text-sm-FS);
    font-weight: 500
}

.nds-file-upload[data-state~=disabled] .nds-upload-zone :is(.nds-upload-icon,.nds-upload-text,.nds-upload-hint) {
    color: var(--text-default-disabled)
}

.nds-file-upload[data-state~=single] .nds-file-list {
    max-height: none
}

.nds-file-upload[data-state~=single] .nds-file-item:not(:first-child) {
    display: none
}

.nds-code {
    border: 1px solid var(--border-neutral-secondary);
    border-radius: var(--radius-md);
    padding: 0;
    position: relative;
    overflow: clip;
    width: -webkit-fill-available
}

    .nds-code .nds-tab-list {
        justify-content: flex-end
    }

:is(html[dir=ltr],.ltr) .nds-code .nds-tab-list {
    justify-content: flex-start
}

.nds-code.nds-tabs .nds-tab {
    font-size: var(--typo-text-sm-FS)
}

.nds-code .nds-tab-content {
    position: relative;
    min-height: unset
}

.nds-code .nds-tab-panel.code-example {
    padding: 0
}

.nds-code .nds-code-action {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2
}

.nds-code pre {
    margin: 0;
    padding: 0;
    background: rgba(0,0,0,0);
    border: none;
    overflow-y: hidden;
    overflow-x: auto
}

.nds-code code {
    font-family: "Monaco","Menlo","Ubuntu Mono",monospace;
    font-size: var(--typo-text-sm-FS);
    line-height: var(--typo-text-sm-LH);
    font-weight: 600;
    direction: ltr;
    text-align: left;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    white-space: pre;
    overflow-y: hidden;
    overflow-x: auto;
    margin: 0;
    padding: var(--spacing-xl) 0;
    background: rgba(0,0,0,0);
    border: none
}

    .nds-code code.line-numbers {
        counter-reset: line;
        display: flex !important;
        flex-direction: column !important;
        padding-inline-end: var(--spacing-2xl)
    }

        .nds-code code.line-numbers .code-line {
            display: block;
            position: relative
        }

            .nds-code code.line-numbers .code-line::before {
                counter-increment: line;
                content: counter(line);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 3em;
                margin-right: 1rem;
                color: var(--colors-neutral-500);
                font-size: var(--typo-text-xs-FS);
                user-select: none;
                pointer-events: none;
                position: relative;
                z-index: 2
            }

            .nds-code code.line-numbers .code-line::after {
                content: "";
                display: block;
                position: absolute;
                top: calc(var(--spacing-xl)*-1);
                left: 0;
                width: 3em;
                height: calc(100% + var(--spacing-7xl));
                font-size: var(--typo-text-xs-FS);
                background-color: var(--background-stripe);
                border: none;
                border-right: 1px solid var(--border-neutral-secondary);
                user-select: none;
                pointer-events: none;
                z-index: 1
            }

    .nds-code code:not(.line-numbers) .code-line:first-child {
        margin-inline-start: var(--spacing-xl)
    }

.nds-inline-code {
    font-weight: 600;
    white-space: nowrap
}

:is(.nds-code,.nds-inline-code) {
    --_syntax-red: var(--syntax-red, var(--colors-red-600));
    --_syntax-orange: var(--syntax-orange, var(--colors-yellow-600));
    --_syntax-green: var(--syntax-green, var(--colors-green-600));
    --_syntax-blue: var(--syntax-blue, var(--colors-blue-600));
    --_syntax-purple: var(--syntax-purple, var(--colors-tertiary-lavendar-500));
    --_syntax-cyan: var(--syntax-cyan);
    --_syntax-yellow: var(--syntax-yellow, var(--colors-yellow-600));
    --_syntax-gray: var(--syntax-gray, var(--colors-neutral-500));
    --_syntax-gray-dark: var(--syntax-gray-dark, var(--colors-neutral-600))
}

:is(.syntax-tag,.syntax-selector) {
    color: var(--_syntax-red);
    font-weight: 600
}

:is(.syntax-attr,.syntax-number) {
    color: var(--_syntax-orange)
}

:is(.syntax-value,.syntax-string,.syntax-template) {
    color: var(--_syntax-green)
}

:is(.syntax-property,.syntax-function,.syntax-method) {
    color: var(--_syntax-blue)
}

:is(.syntax-keyword,.syntax-regex) {
    color: var(--_syntax-purple);
    font-weight: 600
}

:is(.syntax-literal,.syntax-operator) {
    color: var(--_syntax-cyan)
}

:is(.syntax-builtin,.syntax-class) {
    color: var(--_syntax-yellow);
    font-weight: 600
}

.syntax-comment {
    color: var(--_syntax-gray);
    font-style: italic
}

.syntax-parameter {
    color: var(--_syntax-gray-dark)
}

@media(max-width: 600px) {
    .nds-code code {
        font-size: var(--typo-text-xs-FS)
    }
}

@media(min-width: 601px)and (max-width: 960px) {
    .nds-code code {
        font-size: var(--typo-text-sm-FS)
    }
}

.nds-copy {
    transition: color 150ms ease
}

    .nds-copy .nds-label {
        white-space: nowrap
    }

    .nds-copy[data-status=success] {
        color: var(--text-success)
    }

        .nds-copy[data-status=success] .nds-icon {
            transition: transform 150ms ease;
            transform: scale(1.1)
        }

.nds-share {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 40px
}

    .nds-share .nds-dropmenu-menu .nds-label {
        white-space: nowrap
    }

    .nds-share .nds-dropmenu-menu [data-status=success] i::before {
        content: "㶦"
    }

.nds-sidemenu {
    --drawer-max-height: calc(100svh - var(--nds-nav-height) - var(--spacing-xl));
    --btn-width: 40px;
    --_toggle-height: var(--toggle-height, var(--nds-sidemenu-toggle-height, 40px));
    width: var(--nds-sidemenu-width);
    background-color: var(--background-menu);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-md);
    min-height: fit-content;
    z-index: 1
}

.nds-content-layout.nds-cardView .nds-sidemenu {
    border-radius: var(--radius-md)
}

.nds-sidemenu-toggle {
    --_toggle-transform: var(--toggle-transform, unset);
    --_toggle-pos: var(--toggle-pos, 40svh);
    display: none
}

.nds-sidemenu > nav.nds-drawer {
    position: sticky;
    top: calc(var(--nds-nav-height) + var(--spacing-md))
}

@media(max-width: 960px) {
    .nds-sidemenu {
        height: 100%;
        border-radius: 0 !important;
        border-top: 0;
        border-bottom: 0
    }

    .nds-sidemenu-toggle:not([hidden]) {
        --btn-size: 40px;
        border: unset;
        outline: none;
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
        position: fixed;
        right: 0;
        display: flex;
        justify-content: center;
        top: calc(var(--nds-nav-height) + var(--spacing-md));
        --toggle-transform: translate(calc((var(--nds-sidemenu-width)) * -1), var(--_toggle-pos));
        box-shadow: var(--shadow-md)
    }

    .nds-sidemenu-toggle i {
        font-size: 1.5rem;
        color: var(--text-oncolor-primary);
        scale: -1;
        font-weight: 600;
        margin: auto
    }

    :is(html[dir=ltr],.ltr) .nds-sidemenu-toggle i {
        scale: 1
    }

    :is(html[dir=ltr],.ltr) .nds-sidemenu:not(.nds-top) {
        transform: translateX(-100%)
    }

    :is(html[dir=ltr],.ltr) .nds-sidemenu-toggle {
        right: unset;
        left: 0;
        --toggle-transform: translate(calc(var(--nds-sidemenu-width)), var(--_toggle-pos));
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0
    }

    :is(html[dir=ltr],.ltr) .nds-sidemenu li.redirect.external > a::after {
        scale: -1
    }

    .nds-sidemenu:not(.nds-top) {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 899;
        --btn-height: 72px;
        --toggle-height: var(--btn-height);
        transform: translateX(100%)
    }

    :is(html[dir=ltr],.ltr) .nds-sidemenu:not(.nds-top) {
        transform: translateX(-100%)
    }

    .nds-sidemenu:not(.nds-top)[data-state~=open] {
        transform: translateX(0px) !important;
        transition: transform var(--nds-transition)
    }

    .nds-sidemenu:not(.nds-top)[data-state~=closing] {
        transform: translateX(100%) !important;
        transition: transform var(--nds-transition)
    }

    :is(html[dir=ltr],.ltr) .nds-sidemenu:not(.nds-top)[data-state~=closing] {
        transform: translateX(-100%) !important
    }

    .nds-sidemenu:not(.nds-top) .nds-sidemenu-toggle {
        transform: var(--_toggle-transform);
        transition: transform var(--nds-transition);
        --btn-indicator-size: 3px
    }

        .nds-sidemenu:not(.nds-top) .nds-sidemenu-toggle::before {
            content: "";
            position: absolute !important;
            height: var(--btn-indicator-size);
            border-radius: var(--radius-full);
            display: block;
            height: unset;
            inset-inline-start: 0;
            bottom: unset;
            width: var(--btn-indicator-size) !important;
            inset-block: 0;
            margin-block: var(--spacing-md);
            margin-inline: unset
        }

        .nds-sidemenu:not(.nds-top) .nds-sidemenu-toggle::before {
            inset-inline-start: auto;
            inset-inline-end: 0;
            --btn-indicator-color: var(--background-primary-400);
            background-color: var(--btn-indicator-color)
        }

        .nds-sidemenu:not(.nds-top) .nds-sidemenu-toggle:hover::before {
            --btn-indicator-color: var(--background-primary-400)
        }

        .nds-sidemenu:not(.nds-top) .nds-sidemenu-toggle.nds-peek:not([data-state=open]) {
            --toggle-transform: translate(calc((var(--nds-sidemenu-width) - var(--btn-width)/1.5) * -1), var(--_toggle-pos));
            --btn-indicator-size: 5px
        }

    :is(html[dir=ltr],.ltr) .nds-sidemenu:not(.nds-top) .nds-sidemenu-toggle.nds-peek:not([data-state=open]) {
        --toggle-transform: translate(calc(var(--nds-sidemenu-width) - var(--btn-width)/1.5), var(--_toggle-pos))
    }

    .nds-sidemenu:not(.nds-top) .nds-sidemenu-toggle.nds-peek:not([data-state=open]) .nds-label {
        height: 100%;
        width: 40px;
        opacity: 0;
        display: block;
        position: absolute
    }

    .nds-sidemenu:not(.nds-top) .nds-sidemenu-toggle.nds-peek:not([data-state=open]) i {
        opacity: 0
    }

    .nds-sidemenu.nds-top {
        grid-column: 1/-1;
        --btn-gap: var(--spacing-md);
        position: sticky;
        top: calc(var(--nds-nav-height));
        --nds-sidemenu-width: 100%;
        --drawer-max-height: 60svh;
        background-color: unset;
        overflow: clip;
        height: var(--_toggle-height);
        min-height: 40px;
        padding: 0;
        border-radius: 0;
        transform: translateX(0px) !important;
        z-index: 900
    }

        .nds-sidemenu.nds-top .nds-sidemenu-toggle {
            --btn-width: 100%;
            --btn-bg: var(--background-nav);
            --btn-bg-hover: var(--button-background-neutral-hovered);
            --btn-bg-active: var(--button-background-neutral-pressed);
            --btn-bg-selected: var(--button-background-neutral-selected);
            --btn-indicator-size: 3px;
            --btn-height: var(--_toggle-height);
            max-width: var(--nds-content-MaxWidth, 1280px);
            margin: 0 auto;
            padding: 0 var(--nds-viewport-padding, 32px);
            border-radius: 0;
            position: relative;
            top: unset;
            --toggle-transform: unset;
            z-index: 1
        }

            .nds-sidemenu.nds-top .nds-sidemenu-toggle .nds-label {
                flex: 1
            }

                .nds-sidemenu.nds-top .nds-sidemenu-toggle .nds-label[hidden] {
                    visibility: hidden;
                    display: block
                }

            .nds-sidemenu.nds-top .nds-sidemenu-toggle i {
                color: var(--text-primary)
            }

        .nds-sidemenu.nds-top .nds-drawer {
            top: calc(var(--nds-nav-height));
            background-color: var(--background-menu);
            box-shadow: var(--shadow-md);
            padding: var(--spacing-md);
            border-radius: 0 0 var(--radius-md) var(--radius-md);
            transform: translateY(-110%);
            transition: transform var(--nds-transition)
        }

            .nds-sidemenu.nds-top .nds-drawer[data-state~=opening] {
                transform: translateY(-100%)
            }

            .nds-sidemenu.nds-top .nds-drawer[data-state~=open] {
                transform: translateY(0)
            }

            .nds-sidemenu.nds-top .nds-drawer[data-state~=closing] {
                transform: translateY(-100%)
            }

        .nds-sidemenu.nds-top:is([data-state~=open],[data-state~=closing]) {
            top: 0;
            height: fit-content;
            box-shadow: unset;
            padding: 0;
            border-radius: 0;
            margin-bottom: 1rem
        }

            .nds-sidemenu.nds-top:is([data-state~=open],[data-state~=closing]) .nds-sidemenu-toggle {
                position: sticky;
                top: var(--nds-nav-height)
            }

        .nds-sidemenu.nds-top .nds-drawer > .nds-scroll-more {
            padding-top: var(--nds-nav-height)
        }

        .nds-sidemenu.nds-top[data-state~=open] ~ .nds-main-content {
            margin-top: calc((var(--_topsubmenu-height) - var(--nds-sidemenu-toggle-height, 40px) + 16px)*-1)
        }
}

.nds-sideinfo-section .nds-section-body {
    display: flex;
    gap: var(--spacing-4xl)
}

@media(max-width: 960px) {
    .nds-sideinfo-section .nds-section-body {
        flex-direction: column
    }
}

.nds-sideinfo-section .nds-info-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0
}

.nds-sideinfo-section .nds-sideinfo {
    --card-padding: var(--spacing-4xl);
    --nds-sideinfo-top-offset: 0px;
    --_sideinfo-sticky-top: calc(var(--nds-nav-height) + var(--spacing-md) + var(--nds-sideinfo-top-offset));
    width: var(--nds-sideinfo-width);
    position: static;
    top: var(--_sideinfo-sticky-top);
    height: fit-content;
    --card-width: 100%
}

@media(max-width: 960px) {
    .nds-sideinfo-section .nds-sideinfo {
        top: unset;
        --nds-sideinfo-width: 100%
    }
}

.nds-sideinfo-section .nds-sideinfo.nds-sticky {
    position: sticky
}

@media(max-width: 960px) {
    .nds-sideinfo-section .nds-sideinfo.nds-sticky {
        position: static;
        top: unset
    }
}

@media(max-width: 960px) {
    .nds-sideinfo-section .nds-sideinfo.nds-top {
        order: -1
    }
}

.nds-sideinfo-section .nds-sideinfo.nds-reverse {
    order: -1
}

.nds-sideinfo-section .nds-sideinfo.nds-sm {
    --nds-sideinfo-width: 200px
}

.nds-sideinfo-section .nds-sideinfo.nds-md {
    --nds-sideinfo-width: 300px
}

.nds-sideinfo-section .nds-sideinfo.nds-lg {
    --nds-sideinfo-width: 400px
}

.nds-sideinfo-section .nds-sideinfo .nds-definition-list {
    --dl-icon-size: 24px;
    --dl-icon-gap: var(--spacing-md);
    gap: var(--spacing-xl)
}

    .nds-sideinfo-section .nds-sideinfo .nds-definition-list :is(dt,.nds-item-title) {
        font-size: var(--typo-text-md-FS)
    }

    .nds-sideinfo-section .nds-sideinfo .nds-definition-list :is(dd,.nds-item-desc) .nds-btn.nds-transparent {
        padding: 0;
        --btn-height: fit-content
    }

@media(min-width: 961px) {
    .nds-hero-section.nds-aside + .nds-content-layout .nds-sideinfo-section .nds-sideinfo {
        top: calc(var(--_sideinfo-sticky-top) + var(--nds-sideinfo-top)*-1);
        transform: translateY(calc(var(--nds-sideinfo-top, -180px) + var(--spacing-3xl) + var(--nds-sideinfo-top-offset)));
        margin-bottom: calc(var(--nds-sideinfo-top, -180px) + var(--spacing-3xl) + var(--nds-sideinfo-top-offset))
    }
}

.nds-drawer {
    --_gap: var(--drawer-gap, 0px);
    --_indent: var(--drawer-indent, calc(var(--_btn-padding, var(--spacing-xl))));
    --_lined-block: var(--drawer-lined-block, 0px);
    --_divider: var(--drawer-divider, var(--divider-color));
    --_indicator-width: var(--drawer-indicator-width, 5px);
    --_lined-width: var(--drawer-lined-width, 1px);
    --_indicator: var(--drawer-indicator, transparent /* var(--alpha-black-30) */ );
    --_indicator-active: var(--drawer-indicator-active, var(--background-primary));
    --_indicator-hover: var(--drawer-indicator-hover, var(--colors-neutral-400));
    --truncate: var(--drawer-truncate, 1);
    --_transition: var(--drawer-transition, var(--nds-transition));
    --_max-height: var(--drawer-max-height, 400px);
    width: 100%
}

    .nds-drawer:not([hidden]) {
        display: flex;
        flex-direction: column
    }

    .nds-drawer ::-webkit-scrollbar {
        display: none
    }

    .nds-drawer * {
        scrollbar-width: none;
        -ms-overflow-style: none
    }

    .nds-drawer.nds-oncolor {
        --drawer-divider: var(--alpha-white-10)
    }

    .nds-drawer.nds-card {
        --card-width: 100%
    }

.nds-drawer-list {
    display: flex;
    flex-direction: column;
    gap: var(--_gap);
    list-style: none;
    margin: 0;
    padding: 0
}

    .nds-drawer-list ul {
        list-style: none;
        margin: 0;
        padding: 0
    }

    .nds-drawer-list li {
        display: flex;
        flex-direction: column
    }

        .nds-drawer-list li > .nds-btn {
            --btn-height: var(--drawer-btn-height, "fit-content");
            --btn-width: 100%;
            --btn-gap: var(--drawer-btn-gap, var(--spacing-md));
            justify-content: flex-start
        }

            .nds-drawer-list li > .nds-btn .nds-label {
                flex: 1;
                white-space: normal
            }

            .nds-drawer-list li > .nds-btn:is(:hover,[data-state~=active]) .nds-featured-icon {
                --icon-bg-color: var(--featuredicons-background-default-light);
                --icon-color: var(--featuredicons-icon-neutral);
                --dark-bg-color: var(--featuredicons-icon-default)
            }

.nds-drawer .nds-btn.nds-indicator {
    --btn-indicator-size: var(--_indicator-width)
}

    .nds-drawer .nds-btn.nds-indicator::before {
        content: "";
        position: absolute !important;
        height: var(--btn-indicator-size);
        border-radius: var(--radius-full);
        display: block;
        height: unset;
        inset-inline-start: 0;
        bottom: unset;
        width: var(--btn-indicator-size) !important;
        inset-block: 0;
        margin-block: var(--spacing-md);
        margin-inline: unset
    }

.nds-drawer[data-state~=always-open] .nds-drawer-list > li > .nds-btn {
    pointer-events: none;
    cursor: default
}

    .nds-drawer[data-state~=always-open] .nds-drawer-list > li > .nds-btn.nds-menu-btn::after {
        display: none
    }

    .nds-drawer[data-state~=always-open] .nds-drawer-list > li > .nds-btn.nds-menu-btn::before {
        background-color: rgba(0,0,0,0)
    }

.nds-drawer-list .nds-btn.nds-menu-btn {
    --btn-bg: var(--button-background-transparent-default)
}

:where(:root:not([data-theme=dark])) .nds-drawer-list .nds-btn:where(:not(.nds-menu-btn,:active,.nds-oncolor)):where([data-state~=active],[data-state~=selected]) {
    --btn-color: var(--background-primary);
    --btn-indicator-color: var(--background-primary);
    --btn-indicator-selected: var(--background-primary)
}

.nds-drawer-list > li > .nds-btn:has(>.nds-drawer-item) {
    height: auto;
    min-height: 0;
    align-items: flex-start;
    padding-block: var(--spacing-md)
}

.nds-drawer-list .nds-drawer-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
    align-items: flex-start;
    width: 100%
}

.nds-drawer-list .nds-drawer-item-head {
    width: 100%
}

    .nds-drawer-list .nds-drawer-item-head > .nds-label:not(.nds-truncate) {
        display: block;
        font-size: var(--typo-text-md-FS);
        line-height: var(--typo-text-md-LH)
    }

    .nds-drawer-list .nds-drawer-item-head .nds-tag {
        float: inline-end
    }

    .nds-drawer-list .nds-drawer-item-head .nds-description {
        width: 100%
    }

.nds-drawer-list li:has(>ul) > .nds-btn {
    cursor: pointer
}

.nds-drawer-list li > ul {
    display: none;
    height: 0;
    transition: height var(--_transition);
    margin-inline-start: var(--_indent)
}

    .nds-drawer-list li > ul > li {
        display: list-item;
        color: var(--colors-neutral-400);
        position: relative
    }

        .nds-drawer-list li > ul > li:first-child {
            padding-block-start: var(--spacing-md)
        }

        .nds-drawer-list li > ul > li:last-child {
            padding-block-end: var(--spacing-md)
        }

        .nds-drawer-list li > ul > li .nds-btn {
            font-weight: 400
        }

            .nds-drawer-list li > ul > li .nds-btn.nds-indicator:not(:hover,:active,[data-state~=active],[data-state~=selected])::before {
                --btn-indicator-size: var(--_indicator-width);
                height: var(--btn-indicator-size);
                display: block;
                background-color: var(--_indicator)
            }

    .nds-drawer-list li > ul.nds-divided > li {
        border-block-end: 1px solid var(--_divider)
    }

        .nds-drawer-list li > ul.nds-divided > li:last-child {
            border-block-end: none
        }

    .nds-drawer-list li > ul > li {
        display: flex;
        color: inherit
    }

        .nds-drawer-list li > ul > li:not(:first-child) {
            margin-block-start: var(--spacing-xs)
        }

        .nds-drawer-list li > ul > li > .nds-btn {
            font-weight: 600
        }

        .nds-drawer-list li > ul > li > ul {
            margin-inline-start: calc(var(--_indent))
        }

    .nds-drawer-list li > ul:is([data-state~=opening],[data-state~=open],[data-state~=closing]) {
        display: unset
    }

    .nds-drawer-list li > ul:is([data-state~=opening],[data-state~=closing]) {
        overflow-y: clip
    }

    .nds-drawer-list li > ul[data-state~=open] {
        height: auto
    }

.nds-drawer.nds-lined .nds-drawer-list li > ul {
    position: relative
}

    .nds-drawer.nds-lined .nds-drawer-list li > ul::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block: var(--_lined-block);
        width: var(--_lined-width);
        background-color: var(--_divider)
    }

    .nds-drawer.nds-lined .nds-drawer-list li > ul > li .nds-btn::before {
        inset-inline-start: calc(var(--_indicator-width)/2*-1)
    }

.nds-drawer.nds-sm {
    --drawer-indent: var(--spacing-lg);
    --drawer-indicator-width: 2px
}

    .nds-drawer.nds-sm .nds-btn {
        --btn-size: 32px
    }

.nds-drawer.nds-lg {
    --drawer-indent: var(--spacing-2xl);
    --drawer-indicator-width: 4px
}

    .nds-drawer.nds-lg .nds-btn {
        --btn-size: 48px
    }

.nds-drawer:has(>.nds-scroll-more) {
    position: relative;
    max-height: var(--_max-height)
}

.nds-drawer > .nds-scroll-more {
    --scroll-max-height: var(--drawer-max-height, 400px);
    --scroll-divider: var(--_divider);
    --scroll-fade: 48px;
    flex: 1;
    min-height: 0
}

.nds-drawer .nds-show-more {
    --btn-height: var(--drawer-btn-height)
}

.nds-drawer.nds-divided .nds-drawer-list > li {
    border-block-end: 1px solid var(--_divider);
    padding-bottom: var(--_gap)
}

    .nds-drawer.nds-divided .nds-drawer-list > li:last-child {
        border-block-end: none;
        padding-bottom: 0
    }

.nds-drawer.nds-divided[data-state~=always-open] .nds-drawer-list > li {
    border-block-end: none
}

    .nds-drawer.nds-divided[data-state~=always-open] .nds-drawer-list > li > .nds-btn {
        border-block-end: 1px solid var(--_divider);
        border-radius: 0
    }

    .nds-drawer.nds-divided[data-state~=always-open] .nds-drawer-list > li:only-child > .nds-btn {
        border-block-end: none
    }

.nds-grid .nds-drawer.nds-fit {
    --drawer-btn-height: 100%;
    height: 100%
}

    .nds-grid .nds-drawer.nds-fit .nds-drawer-list {
        height: 100%
    }

        .nds-grid .nds-drawer.nds-fit .nds-drawer-list > li {
            height: 100%
        }

.nds-toc {
    --drawer-lined-block: 0px;
    --drawer-lined-width: 2px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md)
}

.nds-toc-head {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md)
}

    .nds-toc-head .nds-label {
        color: var(--text-primary-paragraph)
    }

.nds-toc-title {
    font-size: var(--typo-text-xl-FS);
    line-height: var(--typo-text-xl-LH);
    font-weight: 600;
    color: var(--text-display);
    margin: 0
}

.nds-toc .nds-drawer {
    --drawer-indicator-width: 3px
}

    .nds-toc .nds-drawer .nds-drawer-list .nds-btn {
        --btn-bg: transparent;
        --btn-bg-selected: transparent;
        --btn-color: var(--text-display);
        --btn-indicator-color: var(--background-primary);
        --btn-indicator-selected: var(--background-primary)
    }

        .nds-toc .nds-drawer .nds-drawer-list .nds-btn[data-state~=active] .nds-label {
            font-weight: 600
        }

    .nds-toc .nds-drawer .nds-drawer-list li > ul {
        display: flex;
        flex-direction: column;
        height: auto;
        overflow: visible;
        margin-inline-start: var(--_indent)
    }

        .nds-toc .nds-drawer .nds-drawer-list li > ul > li {
            display: flex;
            list-style: none;
            padding-block: 0;
            color: inherit
        }

            .nds-toc .nds-drawer .nds-drawer-list li > ul > li:first-child {
                padding-block-start: 0
            }

            .nds-toc .nds-drawer .nds-drawer-list li > ul > li:last-child {
                padding-block-end: 0
            }

    .nds-toc .nds-drawer .nds-drawer-list .nds-btn.nds-menu-btn::after {
        display: none
    }

.nds-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: text-bottom
}

.nds-tooltip-trigger {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: rgba(0,0,0,0);
    color: inherit;
    cursor: help
}

.nds-tooltip:not(:has(>.nds-tooltip-trigger .nds-icon)) {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    vertical-align: unset
}

.nds-tooltip:not([data-state~=open]) .nds-tooltip-trigger [data-status=help] .nds-feedback-icon:not(:is(.nds-outline,.nds-feedback.nds-outline>*)) {
    background-color: var(--icon-default-500)
}

.nds-tooltip-balloon {
    --_tooltip-bg: var(--tooltip-background-light);
    --_tooltip-title: var(--tooltip-text-heading-light);
    --_tooltip-body: var(--tooltip-text-paragraph-light);
    --_tooltip-padding: var(--tooltip-padding);
    --_tooltip-gap: var(--tooltip-gap);
    --_tooltip-arrow-size: var(--tooltip-arrow-size, 10px);
    --_tooltip-max-width: var(--tooltip-max-width, 240px);
    --_arrow-inline-start: 16px
}

:root[data-theme=dark] .nds-tooltip-balloon {
    --_tooltip-bg: var(--tooltip-background-dark);
    --_tooltip-title: var(--tooltip-text-heading-dark);
    --_tooltip-body: var(--tooltip-text-paragraph-dark)
}

.nds-tooltip-balloon:not([hidden]) {
    display: flex;
    gap: var(--_tooltip-gap);
    align-items: flex-start;
    position: fixed;
    z-index: 1000;
    width: max-content;
    max-width: var(--_tooltip-max-width);
    padding: var(--_tooltip-padding);
    background-color: var(--_tooltip-bg);
    color: var(--_tooltip-body);
    border: 1px solid var(--border-neutral-secondary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--typo-text-xs-FS);
    line-height: var(--typo-text-xs-LH)
}

.nds-tooltip-balloon::before {
    content: "";
    position: absolute;
    width: var(--_tooltip-arrow-size);
    height: var(--_tooltip-arrow-size);
    background: inherit;
    border: inherit;
    transform: rotate(45deg);
    top: calc(var(--_tooltip-arrow-size)/-2 - 1px);
    left: var(--_arrow-inline-start);
    border-block-end: 0;
    border-inline-start: 0
}

.nds-tooltip-balloon[data-position-vertical=top]::before {
    top: auto;
    bottom: calc(var(--_tooltip-arrow-size)/-2 - 1px);
    border-block-end: inherit;
    border-inline-start: inherit;
    border-block-start: 0;
    border-inline-end: 0
}

:is(html[dir=ltr],.ltr) .nds-tooltip-balloon::before {
    border-inline-start: inherit;
    border-inline-end: 0
}

:is(html[dir=ltr],.ltr) .nds-tooltip-balloon[data-position-vertical=top]::before {
    border-inline-start: 0;
    border-inline-end: inherit
}

.nds-tooltip-balloon .nds-tooltip-body {
    display: block;
    flex: 1;
    color: var(--_tooltip-body)
}

.nds-tooltip-balloon .nds-tooltip-title {
    display: block;
    font-weight: 600;
    color: var(--_tooltip-title);
    margin-block-end: var(--_tooltip-gap)
}

.nds-tooltip-balloon .nds-tooltip-message {
    display: block;
    margin: 0;
    color: var(--_tooltip-body)
}

.nds-empty:has(>[data-nds-empty-placeholder]):not(table):not(tbody) {
    display: flex;
    align-items: center;
    justify-content: center
}

.nds-empty-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-4xl) var(--spacing-xl);
    text-align: center
}

li.nds-empty-placeholder {
    list-style: none
}

tr[data-nds-empty-placeholder] > td {
    padding: var(--spacing-4xl) var(--spacing-xl);
    text-align: center;
    vertical-align: middle
}

    tr[data-nds-empty-placeholder] > td > i {
        display: block;
        margin-inline: auto;
        margin-block-end: var(--spacing-md)
    }

:is(.nds-empty-placeholder,tr[data-nds-empty-placeholder]>td) > i {
    color: var(--text-primary-paragraph);
    font-size: var(--typo-display-md-FS)
}

:is(.nds-empty-placeholder,tr[data-nds-empty-placeholder]>td) .nds-empty-message {
    color: var(--text-secondary-paragraph);
    font-size: var(--typo-text-clamp-md-FS);
    line-height: var(--typo-text-clamp-md-LH)
}

.nds-scroll-more {
    --scroll-fade: initial;
    --scroll-max-height: initial;
    --scroll-max-width: initial;
    --scroll-gap: initial;
    --scroll-divider: initial;
    --_scroll-fade: var(--scroll-fade, 48px);
    --_scroll-max-height: var(--scroll-max-height, none);
    --_scroll-max-width: var(--scroll-max-width, none);
    --_scroll-gap: var(--scroll-gap, 0);
    --_scroll-divider: var(--scroll-divider, var(--divider-color));
    --_fade-start: var(--_scroll-fade);
    --_fade-end: var(--_scroll-fade);
    --_dir-start: left;
    --_dir-end: right;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: var(--_scroll-gap);
    max-block-size: var(--_scroll-max-height);
    max-inline-size: var(--_scroll-max-width)
}

:is(html[dir=ltr],.ltr) .nds-scroll-more {
    --_dir-start: right;
    --_dir-end: left
}

.nds-scroll-more[data-axis=horizontal] {
    flex-direction: row
}

.nds-scroll-more-content {
    --mask-fade-distance: var(--_scroll-fade);
    overflow: auto;
    flex: 1;
    min-width: 0;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none
}

    .nds-scroll-more-content::-webkit-scrollbar {
        display: none
    }

.nds-scroll-more.nds-snap[data-axis=vertical] > .nds-scroll-more-content {
    scroll-snap-type: y mandatory
}

.nds-scroll-more.nds-snap[data-axis=horizontal] > .nds-scroll-more-content {
    scroll-snap-type: x mandatory
}

.nds-scroll-more.nds-snap > .nds-scroll-more-content > * {
    scroll-snap-align: start
}

.nds-scroll-more.nds-snap {
    --_fade-start: 0px
}

    .nds-scroll-more.nds-snap[data-state~=at-end] {
        --_fade-start: var(--_scroll-fade)
    }

.nds-scroll-more[data-axis=vertical][data-state~=has-more] > .nds-scroll-more-content {
    mask-image: linear-gradient(to bottom, transparent 0%, black var(--_fade-start), black calc(100% - var(--_fade-end)), transparent 100%)
}

.nds-scroll-more[data-axis=horizontal][data-state~=has-more] > .nds-scroll-more-content {
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to var(--_dir-start), transparent 0%, black var(--_fade-start)),linear-gradient(to var(--_dir-end), transparent 0%, black var(--_fade-end))
}

.nds-scroll-more[data-state~=at-start] {
    --_fade-start: 0px
}

.nds-scroll-more[data-state~=at-end] {
    --_fade-end: 0px
}

.nds-scroll-more > .nds-show-more {
    display: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center
}

    .nds-scroll-more > .nds-show-more i {
        transition: transform var(--nds-transition);
        transform: rotate(var(--_icon-rotate, 0deg))
    }

.nds-scroll-more[data-state~=has-more] > .nds-show-more {
    display: inline-flex
}

.nds-scroll-more[data-axis=vertical] > .nds-show-more {
    width: 100% !important
}

.nds-scroll-more > .nds-divider {
    display: none;
    border-block-start-color: var(--_scroll-divider)
}

.nds-scroll-more.nds-divided[data-state~=has-more] > .nds-divider {
    display: block
}

.nds-scroll-more[data-axis=horizontal] > .nds-divider {
    writing-mode: vertical-rl
}

.nds-scroll-more[data-axis=vertical][data-state~=at-end] > .nds-show-more {
    --_icon-rotate: 180deg
}

.nds-scroll-more[data-axis=horizontal] > .nds-show-more {
    align-self: stretch;
    height: auto !important;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    --_icon-rotate: 90deg
}

:is(html[dir=ltr],.ltr) .nds-scroll-more[data-axis=horizontal] > .nds-show-more {
    writing-mode: vertical-lr;
    --_icon-rotate: -90deg
}

.nds-scroll-more[data-axis=horizontal][data-state~=at-end] > .nds-show-more {
    --_icon-rotate: -90deg
}

:is(html[dir=ltr],.ltr) .nds-scroll-more[data-axis=horizontal][data-state~=at-end] > .nds-show-more {
    --_icon-rotate: 90deg
}

.nds-user-feedback {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xl)
}

.nds-user-feedback-question, .nds-user-feedback-answer-btn, .nds-user-feedback-statistic {
    display: flex
}

.nds-user-feedback-status:not([hidden]), .nds-user-feedback-details:not([hidden]), .nds-user-feedback-submit:not([hidden]), .nds-user-feedback-close:not([hidden]) {
    display: flex
}

@media(max-width: 600px) {
    .nds-user-feedback-close:not([hidden]) {
        order: -1;
        align-self: end
    }
}

.nds-user-feedback[data-state=details] :is(.nds-user-feedback-statistic,.nds-why-yes,.nds-why-no) {
    display: none
}

.nds-user-feedback[data-state=details][data-answer=yes] .nds-why-yes, .nds-user-feedback[data-state=details][data-answer=no] .nds-why-no {
    display: flex
}

.nds-user-feedback[data-state=status] :is(.nds-user-feedback-question,.nds-user-feedback-answer-btn) {
    display: none
}

.nds-user-feedback[data-state=status] .nds-user-feedback-statistic {
    display: flex
}

.nds-user-feedback-overview {
    display: flex;
    gap: var(--spacing-xl);
    align-items: center
}

@media(max-width: 600px) {
    .nds-user-feedback-overview {
        flex-direction: column;
        align-items: start
    }
}

.nds-user-feedback-overview .nds-user-feedback-answer-btn {
    gap: var(--spacing-lg);
    flex-wrap: nowrap;
    flex: 1
}

.nds-user-feedback-overview .nds-user-feedback-status {
    flex: 1
}

.nds-user-feedback-overview .nds-user-feedback-statistic {
    font-size: var(--typo-text-sm-FS)
}

.nds-user-feedback-details {
    gap: var(--spacing-4xl)
}

@media(max-width: 600px) {
    .nds-user-feedback-details {
        flex-direction: column;
        align-items: start
    }
}

.nds-user-feedback-details .nds-user-feedback-options {
    flex: 1 0 60%;
    display: flex;
    gap: var(--spacing-4xl);
    flex-direction: column
}

.nds-user-feedback-details .nds-user-feedback-comment {
    flex: 1 1 40%;
    width: 100%
}

.nds-user-feedback-submit {
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4xl)
}

@media(max-width: 600px) {
    .nds-user-feedback-submit {
        flex-direction: column;
        align-items: start
    }
}

.nds-user-feedback-submit .nds-user-feedback-agreement {
    font-size: var(--typo-text-sm-FS);
    line-height: var(--typo-text-sm-LH);
    --link-color: var(--link-primary);
    --link-hover: var(--link-primary-hovered);
    --link-pressed: var(--link-primary-pressed)
}

.nds-user-feedback-submit .nds-user-feedback-submit-btn {
    flex-shrink: 0
}

.nds-user-feedback-section {
    border-top: 2px solid var(--border-primary) !important;
    background: var(--background-default)
}

.nds-footer {
    background: var(--colors-neutral-100);
    padding-block: var(--spacing-4xl);
    z-index: 1
}

:root[data-theme=dark] .nds-footer:not(.nds-green) {
    background: var(--colors-neutral-700)
}

.nds-footer-content {
    display: block;
    margin-bottom: var(--spacing-4xl);
    column-count: 4;
    column-gap: var(--spacing-4xl)
}

    .nds-footer-content > li {
        break-inside: avoid;
        page-break-inside: avoid
    }

.nds-footer-drawer .nds-list-header {
    --drawer-btn-height: 48px
}

.nds-footer-drawer[data-state=always-open] .nds-list-header {
    --btn-bg-selected: transparent !important
}

.nds-footer-app-item {
    break-inside: avoid;
    break-after: avoid
}

:is(.nds-footer-social-wrapper,.nds-footer-apps-wrapper) {
    list-style: none !important;
    padding: 0;
    margin: 0
}

.nds-footer-social-icons {
    display: flex;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
    flex-wrap: wrap
}

.nds-footer-mobile-app-icons {
    display: flex;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
    flex-wrap: wrap
}

.nds-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.nds-footer-copyright {
    flex: 1
}

.nds-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    text-decoration: underline
}

.nds-footer-separator {
    margin-inline: var(--spacing-md);
    opacity: .7
}

.nds-footer-copy-right {
    font-size: var(--typo-text-sm-FS);
    line-height: var(--typo-text-sm-LH)
}

.nds-footer-logos {
    width: 25%;
    min-width: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    align-items: center
}

    .nds-footer-logos > * {
        display: inline-flex
    }

    .nds-footer-logos img {
        height: 40px;
        width: auto;
        transition: opacity .3s ease
    }

        .nds-footer-logos img:hover {
            opacity: .8
        }

:root[data-theme=dark] .nds-footer-logos img.nds-oncolor, .nds-footer.nds-green .nds-footer-logos img.nds-oncolor {
    filter: brightness(0) invert(1)
}

.nds-footer.nds-green {
    background: var(--background-footer)
}

:root:not([data-theme=dark]) .nds-footer.nds-green {
    color: var(--text-oncolor-primary)
}

    :root:not([data-theme=dark]) .nds-footer.nds-green .nds-drawer {
        --drawer-divider: var(--alpha-white-10)
    }

    :root:not([data-theme=dark]) .nds-footer.nds-green .nds-btn.nds-subtle {
        --btn-bg: transparent;
        --btn-bg-hover: var(--button-background-transparent-hovered);
        --btn-bg-active: var(--button-background-transparent-pressed);
        --btn-bg-selected: var(--button-background-transparent-selected);
        --btn-bg-disabled: transparent;
        --btn-color: var(--text-oncolor-primary);
        --btn-loading-color: var(--text-oncolor-primary);
        --btn-loading-track: var(--alpha-white-20);
        --btn-indicator-color: var(--alpha-white-40);
        --btn-indicator-active: var(--alpha-white-60);
        --btn-indicator-selected: var(--text-oncolor-primary)
    }

    :root:not([data-theme=dark]) .nds-footer.nds-green .nds-btn.nds-secondary-outline {
        --btn-bg: var(--button-background-transparent-default);
        --btn-bg-hover: var(--button-background-transparent-hovered);
        --btn-bg-active: var(--button-background-transparent-pressed);
        --btn-bg-selected: var(--button-background-transparent-selected);
        --btn-bg-disabled: var(--button-background-transparent-default);
        --btn-color: var(--colors-base-white);
        --btn-border: var(--border-white-40);
        --btn-border-hover: var(--border-white-40);
        --btn-border-active: var(--border-white-40);
        --btn-border-selected: var(--border-white-40);
        --btn-loading-color: var(--colors-base-white);
        --btn-loading-track: var(--alpha-white-20)
    }

    :root:not([data-theme=dark]) .nds-footer.nds-green .nds-footer-bottom a {
        --link-color: var(--link-oncolor);
        --link-hover: var(--link-oncolor-hovered);
        --link-pressed: var(--link-oncolor-pressed);
        --link-focused: var(--link-oncolor-focused);
        --link-visited: var(--link-oncolor-visited)
    }

    :root:not([data-theme=dark]) .nds-footer.nds-green .nds-footer-separator {
        color: var(--text-oncolor-primary)
    }

    :root:not([data-theme=dark]) .nds-footer.nds-green .nds-footer-copy-right {
        color: var(--alpha-white-60)
    }

@media(max-width: 960px) {
    .nds-footer-content {
        column-count: 2
    }
}

@media(max-width: 600px) {
    .nds-footer .nds-footer-bottom {
        justify-content: center;
        margin: auto;
        flex-direction: column;
        gap: 1.5rem;
        text-align: center
    }

    .nds-footer .nds-footer-copyright .nds-footer-links, .nds-footer #authorCopyright {
        justify-content: center
    }

    .nds-footer .nds-footer-logos {
        width: 100%;
        min-width: auto;
        justify-content: center
    }

    .nds-footer :is(.nds-footer-social-icons,.nds-footer-mobile-app-icons) {
        justify-content: center
    }

    .nds-footer-content {
        column-count: 1
    }
}

.nds-cookie-popup.nds-card {
    --card-width: 100%;
    --card-padding: var(--spacing-3xl);
    --card-gap: var(--spacing-lg);
    --card-radius: var(--components-card-radius) var(--components-card-radius) 0 0
}

    .nds-cookie-popup.nds-card:not([hidden]) {
        position: fixed;
        bottom: 0;
        inset-inline: 0;
        box-shadow: var(--shadow-md-top);
        z-index: 1000;
        animation: slideUp var(--nds-transition)
    }

@media(prefers-reduced-motion: reduce) {
    .nds-cookie-popup.nds-card:not([hidden]) {
        animation: none
    }
}

@media(min-width: 601px) {
    .nds-cookie-popup.nds-card.nds-compact {
        --card-radius: var(--components-card-radius);
        --card-width: calc(100% - var(--spacing-4xl));
        --card-width-max: 480px;
        margin-inline: auto;
        bottom: var(--spacing-3xl)
    }
}

.nds-cookie-popup.nds-card .nds-card-actions {
    flex-direction: column
}

.nds-cookie-popup-links {
    display: flex;
    gap: var(--spacing-lg)
}

    .nds-cookie-popup-links a {
        color: var(--text-primary);
        text-decoration: none
    }

        .nds-cookie-popup-links a:hover {
            color: var(--text-default);
            text-decoration: underline
        }

.nds-loading, [data-state=loading] {
    --_loading-size: var(--loading-size, 32px);
    --_loading-border: var(--loading-border, 3px);
    --_loading-color: var(--loading-color, var(--background-primary));
    --_loading-track: var(--loading-track, var(--alpha-black-10));
    --_loading-opacity: var(--loading-opacity, 0.15);
    position: relative;
    pointer-events: none
}

    .nds-loading:not(.nds-btn) > *, [data-state=loading]:not(.nds-btn) > * {
        opacity: var(--_loading-opacity)
    }

    .nds-loading::after, [data-state=loading]::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: var(--_loading-size);
        height: var(--_loading-size);
        transform: translate(-50%, -50%);
        border: var(--_loading-border) solid var(--_loading-track);
        border-top-color: var(--_loading-color);
        border-radius: 50%;
        animation: nds-spin 1s linear infinite;
        z-index: 9
    }

:root[data-theme=dark] .nds-loading {
    --_loading-color: var(--loading-color, var(--colors-base-white));
    --_loading-track: var(--loading-track, var(--alpha-white-20))
}

:root[data-theme=dark] [data-state=loading] {
    --_loading-color: var(--loading-color, var(--colors-base-white));
    --_loading-track: var(--loading-track, var(--alpha-white-20))
}

.nds-loading.nds-xxs, [data-state=loading].nds-xxs {
    --_loading-size: var(--loading-size, 20px);
    --_loading-border: var(--loading-border, 2px)
}

.nds-loading.nds-xs, [data-state=loading].nds-xs {
    --_loading-size: var(--loading-size, 24px);
    --_loading-border: var(--loading-border, 2px)
}

.nds-loading.nds-sm, [data-state=loading].nds-sm {
    --_loading-size: var(--loading-size, 28px);
    --_loading-border: var(--loading-border, 2px)
}

.nds-loading.nds-md, [data-state=loading].nds-md {
    --_loading-size: var(--loading-size, 32px);
    --_loading-border: var(--loading-border, 3px)
}

.nds-loading.nds-lg, [data-state=loading].nds-lg {
    --_loading-size: var(--loading-size, 36px);
    --_loading-border: var(--loading-border, 3px)
}

.nds-loading.nds-xl, [data-state=loading].nds-xl {
    --_loading-size: var(--loading-size, 40px);
    --_loading-border: var(--loading-border, 4px)
}

.nds-loading.nds-2xl, [data-state=loading].nds-2xl {
    --_loading-size: var(--loading-size, 44px);
    --_loading-border: var(--loading-border, 4px)
}

.nds-loading.nds-neutral, [data-state=loading].nds-neutral {
    --_loading-color: var(--loading-color, var(--background-black));
    --_loading-track: var(--loading-track, var(--alpha-black-10))
}

:root[data-theme=dark] .nds-loading.nds-neutral {
    --_loading-color: var(--loading-color, var(--colors-base-white));
    --_loading-track: var(--loading-track, var(--alpha-white-20))
}

:root[data-theme=dark] [data-state=loading].nds-neutral {
    --_loading-color: var(--loading-color, var(--colors-base-white));
    --_loading-track: var(--loading-track, var(--alpha-white-20))
}

.nds-loading.nds-oncolor, [data-state=loading].nds-oncolor {
    --_loading-color: var(--loading-color, var(--colors-base-white));
    --_loading-track: var(--loading-track, var(--alpha-white-20))
}

.nds-definition-list {
    --_dl-icon-size: var(--dl-icon-size, 20px);
    --_dl-icon-gap: var(--dl-icon-gap, calc(var(--_dl-icon-size)/2));
    --_dl-title-FS: var(--dl-title-FS, var(--typo-text-lg-FS));
    --_dl-desc-FS: var(--dl-desc-FS, var(--typo-text-md-FS));
    --_dl-gap: var(--row-gap, var(--gap, var(--spacing-lg)));
    display: flex;
    flex-direction: column;
    row-gap: var(--_dl-gap)
}

    .nds-definition-list.nds-md {
        --dl-icon-size: 18px;
        --dl-title-FS: var(--typo-text-clamp-md-FS);
        --row-gap: var(--spacing-md)
    }

    .nds-definition-list.nds-sm {
        --dl-icon-size: 18px;
        --dl-title-FS: var(--typo-text-clamp-sm-FS);
        --dl-desc-FS: var(--typo-text-sm-FS);
        --row-gap: var(--spacing-sm)
    }

    .nds-definition-list.nds-tableView:not([class*=nds-tableView-]) {
        display: grid;
        grid-template-columns: auto 1fr;
        height: 100%
    }

        .nds-definition-list.nds-tableView:not([class*=nds-tableView-]) :is(dd,.nds-item-desc) {
            display: flex;
            align-items: center
        }

        .nds-definition-list.nds-tableView:not([class*=nds-tableView-]) .nds-definition-item {
            grid-column: 1/-1;
            display: grid;
            grid-template-columns: subgrid;
            row-gap: var(--_dl-gap);
            column-gap: var(--col-gap, var(--gap, var(--spacing-xl)))
        }

            .nds-definition-list.nds-tableView:not([class*=nds-tableView-]) .nds-definition-item:has(>:is(dt,.nds-item-title) :is(.nds-icon,i)) :is(dd,.nds-item-desc) {
                padding-inline-start: 0
            }

@media(max-width: 600px) {
    .nds-definition-list.nds-tableView-sm {
        display: grid;
        grid-template-columns: auto 1fr;
        height: 100%
    }

        .nds-definition-list.nds-tableView-sm :is(dd,.nds-item-desc) {
            display: flex;
            align-items: center
        }

        .nds-definition-list.nds-tableView-sm .nds-definition-item {
            grid-column: 1/-1;
            display: grid;
            grid-template-columns: subgrid;
            row-gap: var(--_dl-gap);
            column-gap: var(--col-gap, var(--gap, var(--spacing-xl)))
        }

            .nds-definition-list.nds-tableView-sm .nds-definition-item:has(>:is(dt,.nds-item-title) :is(.nds-icon,i)) :is(dd,.nds-item-desc) {
                padding-inline-start: 0
            }
}

@media(min-width: 601px)and (max-width: 960px) {
    .nds-definition-list.nds-tableView-md {
        display: grid;
        grid-template-columns: auto 1fr;
        height: 100%
    }

        .nds-definition-list.nds-tableView-md :is(dd,.nds-item-desc) {
            display: flex;
            align-items: center
        }

        .nds-definition-list.nds-tableView-md .nds-definition-item {
            grid-column: 1/-1;
            display: grid;
            grid-template-columns: subgrid;
            row-gap: var(--_dl-gap);
            column-gap: var(--col-gap, var(--gap, var(--spacing-xl)))
        }

            .nds-definition-list.nds-tableView-md .nds-definition-item:has(>:is(dt,.nds-item-title) :is(.nds-icon,i)) :is(dd,.nds-item-desc) {
                padding-inline-start: 0
            }
}

@media(min-width: 961px) {
    .nds-definition-list.nds-tableView-lg {
        display: grid;
        grid-template-columns: auto 1fr;
        height: 100%
    }

        .nds-definition-list.nds-tableView-lg :is(dd,.nds-item-desc) {
            display: flex;
            align-items: center
        }

        .nds-definition-list.nds-tableView-lg .nds-definition-item {
            grid-column: 1/-1;
            display: grid;
            grid-template-columns: subgrid;
            row-gap: var(--_dl-gap);
            column-gap: var(--col-gap, var(--gap, var(--spacing-xl)))
        }

            .nds-definition-list.nds-tableView-lg .nds-definition-item:has(>:is(dt,.nds-item-title) :is(.nds-icon,i)) :is(dd,.nds-item-desc) {
                padding-inline-start: 0
            }
}

.nds-definition-list.nds-rowView .nds-definition-item {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--col-gap, var(--gap, var(--spacing-sm)))
}

    .nds-definition-list.nds-rowView .nds-definition-item:has(>:is(dt,.nds-item-title) :is(.nds-icon,i)) :is(dd,.nds-item-desc) {
        padding-inline-start: 0
    }

.nds-definition-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    text-align: start;
    width: 100%
}

.nds-definition-list :is(dt,.nds-item-title) {
    display: flex;
    align-items: center;
    gap: var(--_dl-icon-gap);
    font-size: var(--_dl-title-FS);
    color: var(--text-primary-paragraph);
    margin: 0
}

    .nds-definition-list :is(dt,.nds-item-title) :is(.nds-icon,i) {
        color: var(--text-primary);
        min-width: 18px;
        width: max(18px,var(--_dl-icon-size));
        height: max(18px,var(--_dl-icon-size));
        font-size: max(18px,var(--_dl-icon-size))
    }

    .nds-definition-list :is(dt,.nds-item-title) .nds-label {
        flex: 1;
        font-weight: 600;
        line-height: normal
    }

.nds-definition-list :is(dd,.nds-item-desc) {
    color: var(--text-secondary-paragraph);
    font-size: var(--_dl-desc-FS)
}

.nds-definition-list .nds-definition-item:has(>:is(dt,.nds-item-title) :is(.nds-icon,i)) :is(dd,.nds-item-desc) {
    padding-inline-start: calc(max(18px,var(--_dl-icon-size)) + var(--_dl-icon-gap) + 2px)
}

.nds-definition-list.nds-divided .nds-definition-item {
    padding-bottom: var(--_dl-gap);
    border-bottom: 1px solid var(--divider-color)
}

    .nds-definition-list.nds-divided .nds-definition-item:last-child, .nds-definition-list.nds-divided .nds-definition-item.nds-last-row {
        border-bottom: none;
        padding-bottom: 0
    }

.nds-definition-list.nds-divided.nds-tableView:not([class*=nds-tableView-]) {
    gap: 0
}

    .nds-definition-list.nds-divided.nds-tableView:not([class*=nds-tableView-]) .nds-definition-item {
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--divider-color)
    }

        .nds-definition-list.nds-divided.nds-tableView:not([class*=nds-tableView-]) .nds-definition-item:last-child, .nds-definition-list.nds-divided.nds-tableView:not([class*=nds-tableView-]) .nds-definition-item.nds-last-row {
            border-bottom: none
        }

@media(max-width: 600px) {
    .nds-definition-list.nds-divided.nds-tableView-sm {
        gap: 0
    }

        .nds-definition-list.nds-divided.nds-tableView-sm .nds-definition-item {
            padding: var(--spacing-md) 0;
            border-bottom: 1px solid var(--divider-color)
        }

            .nds-definition-list.nds-divided.nds-tableView-sm .nds-definition-item:last-child, .nds-definition-list.nds-divided.nds-tableView-sm .nds-definition-item.nds-last-row {
                border-bottom: none
            }
}

@media(min-width: 601px)and (max-width: 960px) {
    .nds-definition-list.nds-divided.nds-tableView-md {
        gap: 0
    }

        .nds-definition-list.nds-divided.nds-tableView-md .nds-definition-item {
            padding: var(--spacing-md) 0;
            border-bottom: 1px solid var(--divider-color)
        }

            .nds-definition-list.nds-divided.nds-tableView-md .nds-definition-item:last-child, .nds-definition-list.nds-divided.nds-tableView-md .nds-definition-item.nds-last-row {
                border-bottom: none
            }
}

@media(min-width: 961px) {
    .nds-definition-list.nds-divided.nds-tableView-lg {
        gap: 0
    }

        .nds-definition-list.nds-divided.nds-tableView-lg .nds-definition-item {
            padding: var(--spacing-md) 0;
            border-bottom: 1px solid var(--divider-color)
        }

            .nds-definition-list.nds-divided.nds-tableView-lg .nds-definition-item:last-child, .nds-definition-list.nds-divided.nds-tableView-lg .nds-definition-item.nds-last-row {
                border-bottom: none
            }
}

.nds-chart {
    --_chart-color-1: var(--chart-color-1, var(--colors-primary-sa-flag-600));
    --_chart-color-2: var(--chart-color-2, var(--colors-primary-sa-flag-400));
    --_chart-color-3: var(--chart-color-3, var(--colors-neutral-200));
    --_chart-color-4: var(--chart-color-4, var(--colors-primary-sa-flag-500));
    --_chart-color-5: var(--chart-color-5, var(--colors-primary-sa-flag-200));
    --_chart-color-6: var(--chart-color-6, var(--colors-primary-sa-flag-800));
    --_chart-area-opacity: var(--chart-area-opacity, 0.15);
    --_chart-grid-color: var(--chart-grid-color, var(--colors-neutral-100));
    --_chart-text: var(--chart-text, var(--text-primary-paragraph));
    --_chart-label: var(--chart-label, var(--text-default));
    --_chart-radius: var(--chart-radius, var(--radius-md));
    --_chart-tooltip-bg: var(--chart-tooltip-bg, var(--background-menu));
    --_chart-tooltip-border: var(--chart-tooltip-border, var(--border-neutral-secondary));
    --_chart-pie-label-1: var(--chart-pie-label-1, var(--text-oncolor-primary));
    --_chart-pie-label-2: var(--chart-pie-label-2, var(--text-oncolor-primary));
    --_chart-pie-label-3: var(--chart-pie-label-3, var(--text-black));
    --_chart-pie-label-4: var(--chart-pie-label-4, var(--text-black));
    --_chart-pie-label-5: var(--chart-pie-label-5, var(--text-oncolor-primary));
    --_chart-pie-label-6: var(--chart-pie-label-6, var(--text-oncolor-primary));
    --_chart-dot-fill: var(--chart-dot-fill, var(--background-white));
    position: relative;
    width: 100%;
    min-height: 200px;
    font-family: var(--nds-font-family, 'Madani Arabic',"IBM Plex Sans Arabic", sans-serif)
}

:root[data-theme=dark] .nds-chart {
    --_chart-grid-color: var(--chart-grid-color, var(--colors-neutral-700));
    --_chart-color-1: var(--chart-color-1, var(--colors-primary-sa-flag-600));
    --_chart-color-2: var(--chart-color-2, var(--colors-primary-sa-flag-400));
    --_chart-color-3: var(--chart-color-3, var(--colors-neutral-200));
    --_chart-color-4: var(--chart-color-4, var(--colors-primary-sa-flag-500));
    --_chart-color-5: var(--chart-color-5, var(--colors-primary-sa-flag-200));
    --_chart-color-6: var(--chart-color-6, var(--colors-primary-sa-flag-300))
}

.nds-chart[data-chart-type=pie], .nds-chart[data-chart-type=donut] {
    --chart-color-1: var(--colors-primary-sa-flag-600);
    --chart-color-2: var(--colors-primary-sa-flag-500);
    --chart-color-3: var(--colors-primary-sa-flag-400);
    --chart-color-4: var(--colors-primary-sa-flag-200);
    --chart-color-5: var(--colors-primary-sa-flag-800);
    --chart-color-6: var(--colors-primary-sa-flag-900)
}

:root[data-theme=dark] .nds-chart[data-chart-type=pie] {
    --chart-color-1: var(--colors-primary-sa-flag-600);
    --chart-color-2: var(--colors-primary-sa-flag-500);
    --chart-color-3: var(--colors-primary-sa-flag-400);
    --chart-color-4: var(--colors-primary-sa-flag-200);
    --chart-color-5: var(--colors-primary-sa-flag-300);
    --chart-color-6: var(--colors-primary-sa-flag-100)
}

:root[data-theme=dark] .nds-chart[data-chart-type=donut] {
    --chart-color-1: var(--colors-primary-sa-flag-600);
    --chart-color-2: var(--colors-primary-sa-flag-500);
    --chart-color-3: var(--colors-primary-sa-flag-400);
    --chart-color-4: var(--colors-primary-sa-flag-200);
    --chart-color-5: var(--colors-primary-sa-flag-300);
    --chart-color-6: var(--colors-primary-sa-flag-100)
}

.nds-chart[data-chart-type=line] {
    --chart-color-1: var(--colors-primary-sa-flag-900);
    --chart-color-2: var(--colors-primary-sa-flag-600);
    --chart-color-3: var(--colors-primary-sa-flag-200);
    --chart-color-4: var(--colors-primary-sa-flag-500);
    --chart-color-5: var(--colors-primary-sa-flag-400);
    --chart-color-6: var(--colors-primary-sa-flag-800)
}

:root[data-theme=dark] .nds-chart[data-chart-type=line] {
    --chart-color-1: var(--colors-primary-sa-flag-600);
    --chart-color-2: var(--colors-primary-sa-flag-400);
    --chart-color-3: var(--colors-primary-sa-flag-200);
    --chart-color-4: var(--colors-primary-sa-flag-500);
    --chart-color-5: var(--colors-primary-sa-flag-300);
    --chart-color-6: var(--colors-primary-sa-flag-100)
}

.nds-chart-body {
    display: flex;
    align-items: center
}

.nds-chart-canvas-wrap {
    flex: 1;
    min-width: 0
}

.nds-chart-canvas {
    overflow: hidden
}

.nds-chart-svg {
    display: block;
    width: 100%;
    height: auto
}

.nds-chart-gridline {
    stroke: var(--_chart-grid-color);
    stroke-width: 1
}

.nds-chart-axis-label {
    fill: var(--_chart-text);
    font-size: var(--typo-text-sm-FS);
    font-family: inherit
}

.nds-chart-axis-title {
    color: var(--_chart-text);
    font-size: var(--typo-text-sm-FS);
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap
}

.nds-chart-axis-title--y {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    flex-shrink: 0
}

.nds-chart-axis-title--x {
    text-align: center;
    padding-block-start: var(--spacing-xl)
}

.nds-chart-bar {
    transition: opacity .2s ease;
    cursor: pointer
}

.nds-chart-bar--active {
    opacity: .8
}

.nds-chart-slice {
    transition: opacity .2s ease;
    cursor: pointer
}

.nds-chart-slice--active {
    opacity: .85
}

.nds-chart-pie-label {
    font-size: var(--typo-text-sm-FS);
    font-weight: 600;
    font-family: inherit;
    pointer-events: none
}

.nds-chart-line {
    stroke-linecap: round;
    stroke-linejoin: round
}

.nds-chart-area-top {
    stop-color: #fff;
    stop-opacity: var(--_chart-area-opacity)
}

.nds-chart-area-bottom {
    stop-color: #fff;
    stop-opacity: 0
}

.nds-chart-dot {
    transition: r .15s ease;
    pointer-events: none
}

.nds-chart-dot--active {
    r: 6
}

.nds-chart-dot-hit {
    cursor: pointer
}

.nds-chart-data-label {
    fill: var(--_chart-label);
    font-size: var(--typo-text-sm-FS);
    font-weight: 600;
    font-family: inherit
}

.nds-chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-md) 0
}

.nds-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm)
}

.nds-chart-legend-marker {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0
}

.nds-chart-legend-label {
    font-size: var(--typo-text-sm-FS);
    color: var(--_chart-label)
}

.nds-chart-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--_chart-tooltip-bg);
    border: 1px solid var(--_chart-tooltip-border);
    border-radius: var(--_chart-radius);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
    font-size: var(--typo-text-sm-FS);
    line-height: var(--typo-text-sm-LH);
    color: var(--_chart-label);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
    white-space: nowrap
}

.nds-chart-tooltip--visible {
    opacity: 1;
    visibility: visible
}

@media(max-width: 600px) {
    .nds-chart-legend {
        gap: var(--spacing-sm)
    }

    .nds-chart-legend-label {
        font-size: var(--typo-text-xs-FS)
    }

    .nds-chart-axis-label {
        font-size: 10px
    }
}

@media(prefers-reduced-motion: reduce) {
    :is(.nds-chart-bar,.nds-chart-slice,.nds-chart-dot,.nds-chart-tooltip) {
        transition: none
    }
}

@media print {
    .nds-chart-tooltip {
        display: none
    }

    .nds-chart-area {
        opacity: .2
    }
}

.nds-btn[data-state~=cooldown] .nds-label {
    white-space: nowrap
}

.nds-flex {
    display: flex;
    justify-content: var(--justify, flex-start);
    align-items: var(--align, center);
    gap: var(--gap, var(--spacing-xl))
}

.nds-row {
    flex-direction: row !important
}

.nds-col {
    flex-direction: column !important
}

.nds-row.nds-reverse {
    flex-direction: row-reverse !important
}

.nds-col.nds-reverse {
    flex-direction: column-reverse !important
}

.nds-wrap {
    flex-wrap: wrap !important
}

.nds-nowrap {
    flex-wrap: nowrap !important
}

.nds-number-format {
    --_number-icon-size: var(--number-icon-size, 1em);
    display: inline-flex;
    align-items: baseline;
    line-height: normal;
    gap: var(--spacing-xs)
}

:is(html[dir=ltr],.ltr) .nds-number-format {
    flex-direction: row-reverse
}

.nds-number-format > .nds-icon {
    width: var(--_number-icon-size);
    height: var(--_number-icon-size);
    align-self: center
}

:root[data-theme=dark] .nds-number-format > .nds-icon {
    filter: invert(1)
}

.nds-number-format[data-currency]::after {
    align-self: center
}

.nds-number-format[data-currency=SAR]::after {
    content: "";
    display: inline-block;
    width: var(--_number-icon-size);
    height: var(--_number-icon-size);
    background: currentColor;
    mask: var(--nds-icon-riyal) no-repeat center/contain
}

.nds-number-format[data-currency=USD]::after {
    content: "$"
}

.nds-number-format[data-currency=EUR]::after {
    content: "€"
}

.nds-number-format[data-currency=GBP]::after {
    content: "£"
}

.nds-number-format[data-currency=JPY]::after {
    content: "¥"
}

.nds-number-format[data-currency=CNY]::after {
    content: "¥"
}

.nds-number-format[data-currency=INR]::after {
    content: "₹"
}

.nds-number-format[data-currency=KRW]::after {
    content: "₩"
}

.nds-number-format[data-currency=TRY]::after {
    content: "₺"
}

.nds-number-format[data-free]::after {
    display: none
}

:where(.nds-truncate:not([hidden])) {
    --_truncate: var(--truncate, 1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--_truncate);
    line-clamp: var(--_truncate);
    text-overflow: ellipsis;
    white-space: wrap
}

.nds-center {
    text-align: center !important;
    margin-inline: auto
}

@media(max-width: 599px) {
    .nds-center-sm, .nds-center-sm > * {
        text-align: center !important
    }
}

@media(min-width: 600px)and (max-width: 959px) {
    .nds-center-md, .nds-center-md > * {
        text-align: center !important
    }
}

@media(min-width: 960px)and (max-width: 1279px) {
    .nds-center-lg, .nds-center-lg > * {
        text-align: center !important
    }
}

@media(min-width: 1280px) {
    .nds-center-xl, .nds-center-xl > * {
        text-align: center !important
    }
}

.nds-flush {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important
}

.nds-circle {
    clip-path: circle(50%);
    border-radius: 50%;
    aspect-ratio: 1/1
}

.nds-expandable {
    position: relative;
    --mask-fade-percentage: 35%
}

    .nds-expandable .nds-expandable-content {
        overflow-y: hidden;
        max-height: var(--max-height, 300px)
    }

    .nds-expandable[data-state~=expandable]:has(>.nds-expandable-content), .nds-expandable[data-state~=expandable] > *:has(>.nds-expandable-content) {
        overflow: hidden
    }

    .nds-expandable[data-state~=expandable] .nds-expandable-content {
        mask-image: linear-gradient(180deg, black calc(100% - var(--mask-fade-percentage)), transparent 100%)
    }

    .nds-expandable[data-state~=expandable] .nds-expand-btn {
        position: absolute;
        bottom: 0;
        inset-inline-end: 0
    }

    .nds-expandable[data-state~=expandable][data-state~=expanded] .nds-expandable-content {
        max-height: 100%;
        padding-bottom: var(--spacing-4xl);
        mask-image: none;
        -webkit-mask-image: none
    }

.nds-ltr {
    direction: ltr !important
}

.nds-color-primary {
    color: var(--text-primary)
}

.hidden {
    display: none
}

@media(max-width: 960px) {
    .nds-desktop-only {
        display: none !important
    }
}

@media(min-width: 961px) {
    .nds-mobile-only {
        display: none !important
    }
}

.nds-required-notice {
    color: var(--text-error);
    font-size: var(--font-size-sm);
    margin-block-end: var(--spacing-md)
}

/* Instagram — Hugeicons stroke-rounded style (24×24, 1.5 stroke); token also in nds-icons.min.css */
:root {
    --nds-icon-instagram: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 3H17C18.6569 3 20 4.34315 20 6V18C20 19.6569 18.6569 21 17 21H7C5.34315 21 4 19.6569 4 18V6C4 4.34315 5.34315 3 7 3Z' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M16.5 7.5C16.5 8.05228 16.0523 8.5 15.5 8.5C14.9477 8.5 14.5 8.05228 14.5 7.5C14.5 6.94772 14.9477 6.5 15.5 6.5C16.0523 6.5 16.5 6.94772 16.5 7.5Z' fill='currentColor'/%3E%3C/svg%3E");
}

.nds-hgi-instagram {
    --nds-icon: var(--nds-icon-instagram);
}