@font-face {
    font-family: IBMPlexSans-Regular;
    src: url(https://ksau-hs.edu.sa/_catalogs/masterpage/NewKSAUPortal/assets/fonts/IBMPlexSansArabic/IBMPlexSansArabic-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: IBMPlexSans-Medium;
    src: url(https://ksau-hs.edu.sa/_catalogs/masterpage/NewKSAUPortal/assets/fonts/IBMPlexSansArabic/IBMPlexSansArabic-Medium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: IBMPlexSans-SemiBold;
    src: url(https://ksau-hs.edu.sa/_catalogs/masterpage/NewKSAUPortal/assets/fonts/IBMPlexSansArabic/IBMPlexSansArabic-SemiBold.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: IBMPlexSans-Bold;
    src: url(https://ksau-hs.edu.sa/_catalogs/masterpage/NewKSAUPortal/assets/fonts/IBMPlexSansArabic/IBMPlexSansArabic-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

:root {
	--field-text-label:#0D121C;
	--text-text-primary:#0D121C;
    --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;
    --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);
    --paragraph-max-width: var(--spacing-180);
    --container-padding-mobile: var(--spacing-4);
    --container-padding-desktop: var(--spacing-8);
    --container-max-width-desktop: var(--spacing-320);
    --radius-none: 0;
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-4xl: 24px;
    --radius-full: 9999px;
    --colors-base-white: #ffffff;
    --colors-base-black: #0d121c;
    --colors-alpha-white: 0deg 0% 100%;
    --colors-alpha-black: 0deg 0% 0%;
    --colors-gray-25: #fafafa;
    --colors-gray-50: #f5f5f6;
    --colors-gray-100: #f0f1f1;
    --colors-gray-200: #ececed;
    --colors-gray-300: #cecfd2;
    --colors-gray-400: #94969c;
    --colors-gray-500: #85888e;
    --colors-gray-600: #61646c;
    --colors-gray-700: #333741;
    --colors-gray-800: #1f242f;
    --colors-gray-900: #161b26;
    --colors-gray-950: #0c111d;
    --colors-brand-25: #f7fdf9;
    --colors-brand-50: #f3fcf6;
    --colors-brand-100: #dff6e7;
    --colors-brand-200: #b8eacb;
    --colors-brand-300: #88d8ad;
    --colors-brand-400: #54c08a;
    --colors-brand-500: #25935f;
    --colors-brand-600: #1b8354;
    --colors-brand-700: #166a45;
    --colors-brand-800: #14573a;
    --colors-brand-900: #104631;
    --colors-brand-950: #092a1e;
    --colors-error-25: #fffbfa;
    --colors-error-50: #fef3f2;
    --colors-error-100: #fee4e2;
    --colors-error-200: #fecdca;
    --colors-error-300: #fda29b;
    --colors-error-400: #f97066;
    --colors-error-500: #f04438;
    --colors-error-600: #d92d20;
    --colors-error-700: #b42318;
    --colors-error-800: #912018;
    --colors-error-900: #7a271a;
    --colors-error-950: #55160c;
    --colors-warning-25: #fffcf5;
    --colors-warning-50: #fffaeb;
    --colors-warning-100: #fef0c7;
    --colors-warning-200: #fedf89;
    --colors-warning-300: #fec84b;
    --colors-warning-400: #fdb022;
    --colors-warning-500: #f79009;
    --colors-warning-600: #dc6803;
    --colors-warning-700: #b54708;
    --colors-warning-800: #93370d;
    --colors-warning-900: #7a2e0e;
    --colors-warning-950: #4e1d09;
    --colors-success-25: #f6fef9;
    --colors-success-50: #ecfdf3;
    --colors-success-100: #dcfae6;
    --colors-success-200: #abefc6;
    --colors-success-300: #75e0a7;
    --colors-success-400: #47cd89;
    --colors-success-500: #17b26a;
    --colors-success-600: #079455;
    --colors-success-700: #067647;
    --colors-success-800: #085d3a;
    --colors-success-900: #074d31;
    --colors-success-950: #053321;
    --colors-info-25: #f5faff;
    --colors-info-50: #eff8ff;
    --colors-info-100: #d1e9ff;
    --colors-info-200: #b2ddff;
    --colors-info-300: #84caff;
    --colors-info-400: #53b1fd;
    --colors-info-500: #2e90fa;
    --colors-info-600: #1570ef;
    --colors-info-700: #175cd3;
    --colors-info-800: #1849a9;
    --colors-info-900: #194185;
    --colors-info-950: #102a56;
    --colors-gray-blue-25: #fcfcfd;
    --colors-gray-blue-50: #f8f9fc;
    --colors-gray-blue-100: #eaecf5;
    --colors-gray-blue-200: #d5d9eb;
    --colors-gray-blue-300: #b3b8db;
    --colors-gray-blue-400: #717bbc;
    --colors-gray-blue-500: #4e5ba6;
    --colors-gray-blue-600: #3e4784;
    --colors-gray-blue-700: #363f72;
    --colors-gray-blue-800: #293056;
    --colors-gray-blue-900: #101323;
    --colors-gray-blue-950: #0d0f1c;
    --colors-gray-cool-25: #fcfcfd;
    --colors-gray-cool-50: #f9f9fb;
    --colors-gray-cool-100: #eff1f5;
    --colors-gray-cool-200: #dcdfea;
    --colors-gray-cool-300: #b9c0d4;
    --colors-gray-cool-400: #7d89b0;
    --colors-gray-cool-500: #5d6b98;
    --colors-gray-cool-600: #4a5578;
    --colors-gray-cool-700: #404968;
    --colors-gray-cool-800: #30374f;
    --colors-gray-cool-900: #111322;
    --colors-gray-cool-950: #0e101b;
    --colors-gray-modern-25: #fcfcfd;
    --colors-gray-modern-50: #f8fafc;
    --colors-gray-modern-100: #eef2f6;
    --colors-gray-modern-200: #e3e8ef;
    --colors-gray-modern-300: #cdd5df;
    --colors-gray-modern-400: #9aa4b2;
    --colors-gray-modern-500: #697586;
    --colors-gray-modern-600: #4b5565;
    --colors-gray-modern-700: #364152;
    --colors-gray-modern-800: #202939;
    --colors-gray-modern-900: #121926;
    --colors-gray-modern-950: #0d121c;
    --colors-gray-neutral-25: #fcfcfd;
    --colors-gray-neutral-50: #f9fafb;
    --colors-gray-neutral-100: #f3f4f6;
    --colors-gray-neutral-200: #e5e7eb;
    --colors-gray-neutral-300: #d2d6db;
    --colors-gray-neutral-400: #9da4ae;
    --colors-gray-neutral-500: #6c737f;
    --colors-gray-neutral-600: #4d5761;
    --colors-gray-neutral-700: #384250;
    --colors-gray-neutral-800: #1f2a37;
    --colors-gray-neutral-900: #111927;
    --colors-gray-neutral-950: #0d121c;
    --colors-gray-iron-25: #fcfcfc;
    --colors-gray-iron-50: #fafafa;
    --colors-gray-iron-100: #f4f4f5;
    --colors-gray-iron-200: #e4e4e7;
    --colors-gray-iron-300: #d1d1d6;
    --colors-gray-iron-400: #a0a0ab;
    --colors-gray-iron-500: #70707b;
    --colors-gray-iron-600: #51525c;
    --colors-gray-iron-700: #3f3f46;
    --colors-gray-iron-800: #26272b;
    --colors-gray-iron-900: #1a1a1e;
    --colors-gray-iron-950: #131316;
    --colors-gray-true-25: #fcfcfc;
    --colors-gray-true-50: #fafafa;
    --colors-gray-true-100: #f5f5f5;
    --colors-gray-true-200: #e5e5e5;
    --colors-gray-true-300: #d6d6d6;
    --colors-gray-true-400: #a3a3a3;
    --colors-gray-true-500: #737373;
    --colors-gray-true-600: #525252;
    --colors-gray-true-700: #424242;
    --colors-gray-true-800: #292929;
    --colors-gray-true-900: #141414;
    --colors-gray-true-950: #0f0f0f;
    --colors-gray-warm-25: #fdfdfc;
    --colors-gray-warm-50: #fafaf9;
    --colors-gray-warm-100: #f5f5f4;
    --colors-gray-warm-200: #e7e5e4;
    --colors-gray-warm-300: #d7d3d0;
    --colors-gray-warm-400: #a9a29d;
    --colors-gray-warm-500: #79716b;
    --colors-gray-warm-600: #57534e;
    --colors-gray-warm-700: #44403c;
    --colors-gray-warm-800: #292524;
    --colors-gray-warm-900: #1c1917;
    --colors-gray-warm-950: #171412;
    --colors-moss-25: #fafdf7;
    --colors-moss-50: #f5fbee;
    --colors-moss-100: #e6f4d7;
    --colors-moss-200: #ceeab0;
    --colors-moss-300: #acdc79;
    --colors-moss-400: #86cb3c;
    --colors-moss-500: #669f2a;
    --colors-moss-600: #4f7a21;
    --colors-moss-700: #3f621a;
    --colors-moss-800: #335015;
    --colors-moss-900: #2b4212;
    --colors-moss-950: #1a280b;
    --colors-green-light-25: #fafef5;
    --colors-green-light-50: #f3fee7;
    --colors-green-light-100: #e3fbcc;
    --colors-green-light-200: #d0f8ab;
    --colors-green-light-300: #a6ef67;
    --colors-green-light-400: #85e13a;
    --colors-green-light-500: #66c61c;
    --colors-green-light-600: #4ca30d;
    --colors-green-light-700: #3b7c0f;
    --colors-green-light-800: #326212;
    --colors-green-light-900: #2b5314;
    --colors-green-light-950: #15290a;
    --colors-green-25: #f6fef9;
    --colors-green-50: #edfcf2;
    --colors-green-100: #d3f8df;
    --colors-green-200: #aaf0c4;
    --colors-green-300: #73e2a3;
    --colors-green-400: #3ccb7f;
    --colors-green-500: #16b364;
    --colors-green-600: #099250;
    --colors-green-700: #087443;
    --colors-green-800: #095c37;
    --colors-green-900: #084c2e;
    --colors-green-950: #052e1c;
    --colors-Teal-25: #f6fefc;
    --colors-Teal-50: #f0fdf9;
    --colors-Teal-100: #ccfbef;
    --colors-Teal-200: #99f6e0;
    --colors-Teal-300: #5fe9d0;
    --colors-Teal-400: #2ed3b7;
    --colors-Teal-500: #15b79e;
    --colors-Teal-600: #0e9384;
    --colors-Teal-700: #107569;
    --colors-Teal-800: #125d56;
    --colors-Teal-900: #134e48;
    --colors-Teal-950: #0a2926;
    --colors-cyan-25: #f5feff;
    --colors-cyan-50: #ecfdff;
    --colors-cyan-100: #cff9fe;
    --colors-cyan-200: #a5f0fc;
    --colors-cyan-300: #67e3f9;
    --colors-cyan-400: #22ccee;
    --colors-cyan-500: #06aed4;
    --colors-cyan-600: #088ab2;
    --colors-cyan-700: #0e7090;
    --colors-cyan-800: #155b75;
    --colors-cyan-900: #164c63;
    --colors-cyan-950: #0d2d3a;
    --colors-blue-light-25: #f5fbff;
    --colors-blue-light-50: #f0f9ff;
    --colors-blue-light-100: #e0f2fe;
    --colors-blue-light-200: #b9e6fe;
    --colors-blue-light-300: #7cd4fd;
    --colors-blue-light-400: #36bffa;
    --colors-blue-light-500: #0ba5ec;
    --colors-blue-light-600: #0086c9;
    --colors-blue-light-700: #026aa2;
    --colors-blue-light-800: #065986;
    --colors-blue-light-900: #0b4a6f;
    --colors-blue-light-950: #062c41;
    --colors-blue-dark-25: #f5f8ff;
    --colors-blue-dark-50: #eff4ff;
    --colors-blue-dark-100: #d1e0ff;
    --colors-blue-dark-200: #b2ccff;
    --colors-blue-dark-300: #84adff;
    --colors-blue-dark-400: #528bff;
    --colors-blue-dark-500: #2970ff;
    --colors-blue-dark-600: #155eef;
    --colors-blue-dark-700: #004eeb;
    --colors-blue-dark-800: #0040c1;
    --colors-blue-dark-900: #00359e;
    --colors-blue-dark-950: #002266;
    --colors-indigo-25: #f5f8ff;
    --colors-indigo-50: #eef4ff;
    --colors-indigo-100: #e0eaff;
    --colors-indigo-200: #c7d7fe;
    --colors-indigo-300: #a4bcfd;
    --colors-indigo-400: #8098f9;
    --colors-indigo-500: #6172f3;
    --colors-indigo-600: #444ce7;
    --colors-indigo-700: #3538cd;
    --colors-indigo-800: #2d31a6;
    --colors-indigo-900: #2d3282;
    --colors-indigo-950: #1f235b;
    --colors-violet-25: #fbfaff;
    --colors-violet-50: #f5f3ff;
    --colors-violet-100: #ece9fe;
    --colors-violet-200: #ddd6fe;
    --colors-violet-300: #c3b5fd;
    --colors-violet-400: #a48afb;
    --colors-violet-500: #875bf7;
    --colors-violet-600: #7839ee;
    --colors-violet-700: #6927da;
    --colors-violet-800: #5720b7;
    --colors-violet-900: #491c96;
    --colors-violet-950: #2e125e;
    --colors-purple-25: #fafaff;
    --colors-purple-50: #f4f3ff;
    --colors-purple-100: #ebe9fe;
    --colors-purple-200: #d9d6fe;
    --colors-purple-300: #bdb4fe;
    --colors-purple-400: #9b8afb;
    --colors-purple-500: #7a5af8;
    --colors-purple-600: #6938ef;
    --colors-purple-700: #5925dc;
    --colors-purple-800: #4a1fb8;
    --colors-purple-900: #3e1c96;
    --colors-purple-950: #27115f;
    --colors-fuchsia-25: #fefaff;
    --colors-fuchsia-50: #fdf4ff;
    --colors-fuchsia-100: #fbe8ff;
    --colors-fuchsia-200: #f6d0fe;
    --colors-fuchsia-300: #eeaafd;
    --colors-fuchsia-400: #e478fa;
    --colors-fuchsia-500: #d444f1;
    --colors-fuchsia-600: #ba24d5;
    --colors-fuchsia-700: #9f1ab1;
    --colors-fuchsia-800: #821890;
    --colors-fuchsia-900: #6f1877;
    --colors-fuchsia-950: #47104c;
    --colors-pink-25: #fef6fb;
    --colors-pink-50: #fdf2fa;
    --colors-pink-100: #fce7f6;
    --colors-pink-200: #fcceee;
    --colors-pink-300: #faa7e0;
    --colors-pink-400: #f670c7;
    --colors-pink-500: #ee46bc;
    --colors-pink-600: #dd2590;
    --colors-pink-700: #c11574;
    --colors-pink-800: #9e165f;
    --colors-pink-900: #851651;
    --colors-pink-950: #4e0d30;
    --colors-rosé-25: #fff5f6;
    --colors-rosé-50: #fff1f3;
    --colors-rosé-100: #ffe4e8;
    --colors-rosé-200: #fecdd6;
    --colors-rosé-300: #fea3b4;
    --colors-rosé-400: #fd6f8e;
    --colors-rosé-500: #f63d68;
    --colors-rosé-600: #e31b54;
    --colors-rosé-700: #c01048;
    --colors-rosé-800: #a11043;
    --colors-rosé-900: #89123e;
    --colors-rosé-950: #510b24;
    --colors-orange-dark-25: #fff9f5;
    --colors-orange-dark-50: #fff4ed;
    --colors-orange-dark-100: #ffe6d5;
    --colors-orange-dark-200: #ffd6ae;
    --colors-orange-dark-300: #ff9c66;
    --colors-orange-dark-400: #ff692e;
    --colors-orange-dark-500: #ff4405;
    --colors-orange-dark-600: #e62e05;
    --colors-orange-dark-700: #bc1b06;
    --colors-orange-dark-800: #97180c;
    --colors-orange-dark-900: #771a0d;
    --colors-orange-dark-950: #57130a;
    --colors-orange-25: #fefaf5;
    --colors-orange-50: #fef6ee;
    --colors-orange-100: #fdead7;
    --colors-orange-200: #f9dbaf;
    --colors-orange-300: #f7b27a;
    --colors-orange-400: #f38744;
    --colors-orange-500: #ef6820;
    --colors-orange-600: #e04f16;
    --colors-orange-700: #b93815;
    --colors-orange-800: #932f19;
    --colors-orange-900: #772917;
    --colors-orange-950: #511c10;
    --colors-yellow-25: #fefdf0;
    --colors-yellow-50: #fefbe8;
    --colors-yellow-100: #fef7c3;
    --colors-yellow-200: #feee95;
    --colors-yellow-300: #fde272;
    --colors-yellow-400: #fac515;
    --colors-yellow-500: #eaaa08;
    --colors-yellow-600: #ca8504;
    --colors-yellow-700: #a15c07;
    --colors-yellow-800: #854a0e;
    --colors-yellow-900: #713b12;
    --colors-yellow-950: #542c0d;
    --gradient-gray-600-500-90deg: linear-gradient(90deg, var(--colors-gray-600) 0%, var(--colors-gray-500) 100%);
    --gradient-gray-700-600-45deg: linear-gradient(45deg, var(--colors-gray-700) 0%, var(--colors-gray-600) 100%);
    --gradient-gray-800-600-45deg: linear-gradient(45deg, var(--colors-gray-800) 0%, var(--colors-gray-600) 100%);
    --gradient-gray-800-600-90deg: linear-gradient(90deg, var(--colors-gray-800) 0%, var(--colors-gray-600) 100%);
    --gradient-gray-800-700-26-5deg: linear-gradient(26.5deg, var(--colors-gray-600) 0%, var(--colors-gray-700) 100%);
    --gradient-gray-900-600-45deg: linear-gradient(45deg, var(--colors-gray-900) 0%, var(--colors-gray-600) 100%);
    --gradient-brand-600-500-90deg: linear-gradient(90deg, var(--colors-brand-600) 0%, var(--colors-brand-500) 100%);
    --gradient-brand-700-600-45deg: linear-gradient(45deg, var(--colors-brand-700) 0%, var(--colors-brand-600) 100%);
    --gradient-brand-800-600-45deg: linear-gradient(45deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100%);
    --gradient-brand-800-600-90deg: linear-gradient(90deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100%);
    --gradient-brand-800-700-26-5deg: linear-gradient(
            26.5deg,
            var(--colors-brand-600) 0%,
            var(--colors-brand-700) 100%
    );
    --gradient-brand-900-600-45deg: linear-gradient(45deg, var(--colors-brand-900) 0%, var(--colors-brand-600) 100%);
    --colors-text-primary: var(--colors-gray-900);
    --colors-text-primary_on-brand: var(--colors-base-white);
    --colors-text-secondary: var(--colors-gray-700);
    --colors-text-secondary_on-brand: hsla(var(--colors-alpha-white) / 70%);
    --colors-text-tertiary: var(--colors-gray-600);
    --colors-text-quarterary: var(--colors-gray-500);
    --colors-text-white: var(--colors-base-white);
    --colors-text-disabled: var(--colors-gray-500);
    --colors-text-placeholder: var(--colors-gray-500);
    --colors-text-brand-primary: var(--colors-brand-800);
    --colors-text-brand-secondary: var(--colors-brand-700);
    --colors-text-error-primary: var(--colors-error-600);
    --colors-border-primary: var(--colors-gray-300);
    --colors-border-secondary: var(--colors-gray-200);
    --colors-border-disabled: var(--colors-gray-300);
    --colors-border-disabled_subtle: var(--colors-gray-200);
    --colors-border-brand: var(--colors-brand-300);
    --colors-border-error: var(--colors-error-300);
    --colors-fg-primary: var(--colors-gray-900);
    --colors-fg-quinary-400: var(--colors-gray-400);
    --colors-fg-tertiary-600: var(--colors-gray-600);
    --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.1);
    --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1);
    --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);
    --IBMPlexSansAR-R: "IBMPlexSans-Regular";
    --IBMPlexSansAR-M: "IBMPlexSans-Medium";
    --IBMPlexSansAR-SB: "IBMPlexSans-SemiBold";
    --IBMPlexSansAR-B: "IBMPlexSans-Bold";
    --IBMPlexSans-R: "IBMPlexSans-Regular-En";
    --IBMPlexSans-M: "IBMPlexSans-Medium-En";
    --IBMPlexSans-SB: "IBMPlexSans-SemiBold-En";
    --IBMPlexSans-B: "IBMPlexSans-Bold-En";
    --spacing-none: 0px;
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 48px;
    --spacing-7xl: 64px;
    --spacing-8xl: 80px;
    --spacing-9xl: 96px;
    --spacing-10xl: 128px;
    --spacing-11xl: 160px;
    --Display-2xlF: 72px;
    --Display-2xlL: 90px;
    --Display-xlF: 60px;
    --Display-xlL: 72px;
    --Display-lgF: 48px;
    --Display-lgL: 60px;
    --Display-mdF: 36px;
    --Display-mdL: 44px;
    --Display-smF: 30px;
    --Display-smL: 38px;
    --Display-xsF: 24px;
    --Display-xsL: 32px;
    --Text-xlF: 20px;
    --Text-xlL: 30px;
    --Text-lgF: 18px;
    --Text-lgL: 28px;
    --Text-mdF: 16px;
    --Text-mdL: 24px;
    --Text-smF: 14px;
    --Text-smL: 20px;
    --Text-xsF: 12px;
    --Text-xsL: 18px;
    --Text-2xsF: 10px;
    --Text-2xsL: 14px
}

.btn-icon {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center
}

.Event-Home .UpcomingEvents .btn-icon path {
    fill: #fff
}

.Event-Home .UpcomingEvents a {
    background-color: #1b8354 !important;
    height: 40px;
    min-width: 40px;
    border-radius: 4px
}

.Event-Home .UpcomingEvents a:hover {
    background-color: var(--colors-brand-700) !important
}

.Event-Home .UpcomingEvents a:active {
    background-color: var(--colors-brand-900) !important
}

.Event-Home .UpcomingEvents a:focus {
    background-color: var(--colors-brand-600);
    outline: 2px solid var(--colors-gray-950) !important;
    outline-offset: 1px
}

.btn--lg span.btn-icon {
    width: 24px;
    height: 24px
}

.btn--md span.btn-icon {
    width: 20px;
    height: 20px
}

.btn--sm span.btn-icon {
    width: 16px;
    height: 16px
}

.btn--subtle:hover, .btn--close:hover, .btn--sort:hover {
    background: var(--colors-gray-neutral-50)
}

.btn--subtle:visited, .btn--close:visited, .btn--sort:visited {
    background: var(--colors-gray-neutral-100)
}

.btn--subtle:focus, .btn--close:focus, .btn--sort:focus {
    background: #fff0;
    outline: 2px solid var(--colors-base-black);
    position: relative
}

.btn--subtle:active, .btn--close:active, .btn--sort:active {
    background: var(--colors-gray-neutral-200);
    outline: none
}

.btn--subtle:disabled, .btn--subtle[disabled], .btn--close:disabled, .btn--close[disabled], .btn--sort:disabled, .btn--sort[disabled] {
    background: #fff0;
    color: var(--colors-gray-neutral-400)
}

.tag {
    display: inline-flex;
    height: 32px;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-xs)
}

.tag--gray {
    color: var(--colors-gray-neutral-700);
    background: var(--colors-gray-neutral-50);
    border: 1px solid var(--colors-gray-neutral-200)
}

.tag--gray-outlined {
    border: 1px solid var(--colors-gray-neutral-500);
    background-color: var(--colors-base-white);
    color: var(--colors-gray-neutral-700)
}

.tag--success {
    color: var(--colors-brand-700);
    background-color: var(--colors-brand-50);
    border: 1px solid var(--colors-brand-200)
}

.tag--success-outlined {
    border: 1px solid var(--colors-brand-500);
    background-color: var(--colors-base-white);
    color: var(--colors-brand-700)
}

.tag--destruct {
    color: var(--colors-error-700);
    background-color: var(--colors-error-50);
    border: 1px solid var(--colors-error-200)
}

.tag--destruct-outlined {
    border: 1px solid var(--colors-error-500);
    background-color: var(--colors-base-white);
    color: var(--colors-error-700)
}

.tag--warning {
    color: var(--colors-warning-700);
    background-color: var(--colors-warning-50);
    border: 1px solid var(--colors-warning-200)
}

.tag--warning-outlined {
    border: 1px solid var(--colors-warning-500);
    background-color: var(--colors-base-white);
    color: var(--colors-warning-700)
}

.tag--info {
    color: var(--colors-info-700);
    background-color: var(--colors-info-50);
    border: 1px solid var(--colors-info-200)
}

.tag--info-outlined {
    border: 1px solid var(--colors-info-500);
    background-color: #fff0;
    color: var(--colors-info-700)
}

.accordion-item {
    border-top: 1px solid var(--colors-border-primary);
    width: 100%;
    z-index: 1;
    position: relative
}

.accordion-item--flush {
    width: 100%;
    -o-border-image: linear-gradient(to right, transparent 0 16px, var(--colors-border-primary) 16px 382px, transparent 382px 100%) 100% 1;
    border-image: linear-gradient(to right, transparent 0 16px, var(--colors-border-primary) 16px 382px, transparent 382px 100%) 100% 1
}

.switch {
    display: flex;
    gap: var(--spacing-xl);
    width: fit-content;
    padding: 3px;
    cursor: pointer
}

.switch-main__content.disabled > .switch__label, .switch-main__content.disabled > div > .switch__label, .switch-main__content.disabled > div > .switch__helper-text {
    color: var(--colors-border-disabled)
}

.switch .switch-wrapper .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px
}

.switch .switch-wrapper .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    transition: 0.4s;
    border-radius: 50%
}

.switch .switch-wrapper input:checked + .slider {
    background-color: var(--colors-brand-600)
}

.switch .switch-wrapper input:focus + .slider {
    box-shadow: 0 0 1px var(--colors-brand-600)
}

.switch .switch-wrapper input:checked + .slider:before {
    transform: translate(24px)
}

.switch-icon {
    display: none !important;
    color: var(--colors-base-white);
    font-size: 18px !important;
    font-weight: bolder !important
}

.switch.focus {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--colors-base-black)
}

.switch__helper-text {
    color: var(--colors-text-tertiary);
    margin-block: var(--spacing-xs)
}

.switch__warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    margin-left: var(--spacing-3xl);
    color: var(--colors-text-error-primary)
}

.switch--brand input:checked ~ .switch__label, .switch--brand input:checked ~ div > .switch__label {
    color: var(--colors-text-brand-secondary)
}

.switch--brand .switch-main__content.disabled .switch-wrapper > .slider--active {
    background-color: var(--colors-brand-200)
}

.switch--brand .switch-main__content.disabled > .switch__label, .switch--brand .switch-main__content.disabled > div > .switch__label, .switch--brand .switch-main__content.disabled > div > .switch__helper-text {
    color: var(--colors-border-disabled)
}

.switch--readonly .switch-slider .switch-icon {
    color: var(--colors-gray-neutral-600)
}

.radio.focus {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--colors-base-black)
}

.radio.active input:not(:checked) ~ .radio-container {
    background-color: var(--colors-gray-neutral-300)
}

.radio-container {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--radius-full);
    border: 1px solid var(--colors-gray-neutral-500);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    z-index: 1
}

.radio-container:after, .radio-container:before {
    content: "";
    border-radius: var(--radius-full);
    background: #f3f4f6bd;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: -1;
    transition: all 0.3s ease-in-out
}

.radio-container:before {
    background-color: var(--colors-gray-neutral-950);
    width: 15px;
    height: 15px;
    z-index: 0;
    transition: all 0.1s ease-in-out
}

.radio input:disabled ~ .radio-container {
    border-color: var(--colors-border-disabled)
}

.radio input:disabled ~ .radio-container:before {
    background-color: var(--colors-border-disabled);
    transform: translate(-50%, -50%) scale(1)
}

.radio input:disabled ~ .radio__label, .radio input:disabled ~ div > .radio__label, .radio input:disabled ~ div > .radio__helper-text {
    color: var(--colors-border-disabled)
}

.radio__helper-text {
    color: var(--colors-text-tertiary);
    margin-block: var(--spacing-xs)
}

.radio__warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    color: var(--colors-text-error-primary)
}

.radio__warning-icon {
    width: 24px
}

.radio--brand input:checked ~ .radio-container {
    border-color: var(--colors-brand-600)
}

.radio--brand input:checked ~ .radio-container:active:hover:before {
    background-color: #104631
}

.radio--brand input:checked ~ .radio-container:before {
    background-color: var(--colors-brand-600)
}

.radio--brand input:checked ~ .radio__label, .radio--brand input:checked ~ div > .radio__label {
    color: var(--colors-text-brand-secondary)
}

.radio--brand.active input:checked ~ .radio-container:before {
    background-color: var(--colors-brand-700)
}

.radio--brand input:disabled ~ .radio-container {
    border-color: var(--colors-border-disabled)
}

.radio--brand input:disabled ~ .radio-container:before {
    background-color: var(--colors-border-disabled);
    transform: translate(-50%, -50%) scale(1)
}

.radio--brand input:disabled ~ .radio__label, .radio--brand input:disabled ~ div > .radio__label, .radio--brand input:disabled ~ div > .radio__helper-text {
    color: var(--colors-border-disabled)
}

.input {
    display: flex;
    height: 40px;
    width: 100%;
    min-width: 200px;
    justify-content: flex-start;
    padding: var(--spacing-none) var(--spacing-xl);
    border-radius: var(--radius-sm);
    gap: var(--spacing-xs);
    border: 1px solid var(--colors-gray-neutral-400);
    background: var(--colors-base-white);
    position: relative
}

.input--error, .input--error:hover {
    border-color: var(--colors-error-600)
}

.dropdown__chevron {
    position: absolute;
    top: 50%;
    right: var(--spacing-xl);
    transform: translateY(-50%);
    color: var(--colors-gray-neutral-700);
    transition: all 0.4s ease-in-out;
    display: flex
}

.dropdown__list, .textarea__dropdown-list, .input__dropdown-list {
    display: flex;
    padding: var(--spacing-md);
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--radius-sm);
    border: 1px solid var(--colors-border-primary);
    background: var(--colors-base-white);
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    overflow-y: auto;
    list-style: none;
    height: auto;
    max-height: 0;
    padding-block: 0;
    z-index: -2;
    opacity: 0;
    overflow: hidden;
    transition: z-index 0.1s ease-in-out, padding-block 0.1s ease-in-out, max-height 0.2s 0.01s ease-in-out;
    pointer-events: none
}

dialog .modal {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 600px;
    padding: var(--spacing-3xl);
    background-color: var(--colors-base-white);
    border-radius: var(--radius-md)
}

dialog .modal__heading {
    color: var(--colors-text-primary)
}

dialog .modal__content {
    color: var(--colors-text-tertiary);
    padding-bottom: var(--spacing-xl)
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--size-4, 4px);
    color: var(--colors-gray-neutral-950);
    cursor: pointer;
    padding-right: var(--size-4, 4px)
}

.notification__icon {
    color: var(--colors-gray-neutral-600)
}

.notification--critical {
    border-color: var(--colors-error-400);
    background-color: var(--colors-error-50)
}

.notification--critical .notification__content, .notification--critical .notification__icon, .notification--critical .notification__lead-text {
    color: var(--colors-text-error-primary)
}

.notification--warning {
    border-color: var(--colors-warning-400);
    background-color: var(--colors-warning-50)
}

.notification--warning .notification__content, .notification--warning .notification__icon, .notification--warning .notification__lead-text {
    color: var(--colors-warning-600)
}

.notification--success {
    border-color: var(--colors-brand-400);
    background-color: var(--colors-brand-50)
}

.notification--success .notification__content, .notification--success .notification__icon, .notification--success .notification__lead-text {
    color: var(--colors-text-brand-primary)
}

.notification--info {
    border-color: var(--colors-info-400);
    background-color: var(--colors-info-50)
}

.notification--info .notification__content, .notification--info .notification__icon, .notification--info .notification__lead-text {
    color: var(--colors-info-600)
}

.notification--neutral {
    border-color: var(--colors-gray-neutral-400);
    background-color: var(--colors-gray-neutral-50)
}

.notification--neutral .notification__content, .notification--neutral .notification__icon, .notification--neutral .notification__lead-text {
    color: var(--colors-text-secondary)
}

.file-upload {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-8, 8px)
}

.file-upload__instructions {
    color: var(--colors-text-secondary)
}

.file-upload__formats {
    color: var(--colors-text-tertiary)
}

.file-upload__item {
    display: flex;
    align-items: center;
    border-radius: var(--radius-xs);
    border: 1px solid var(--colors-gray-neutral-300);
    background: var(--colors-gray-neutral-100)
}

.file-upload__file-item, .file-upload__file-item--error {
    display: flex;
    align-items: center;
    border-radius: var(--radius-xs);
    border: 1px solid var(--colors-gray-neutral-300);
    background: var(--colors-gray-neutral-100);
    padding: var(--spacing-md);
    gap: 8px;
    width: 100%
}

.file-upload__file-item--error, .file-upload__file-item--error--error {
    border-color: var(--colors-error-600)
}

.file-upload__file-item--error .file-upload__file-item, .file-upload__file-item--error--error .file-upload__file-item {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--colors-gray-neutral-300)
}

.file-upload__file-item--error .file-upload__file-item-msg, .file-upload__file-item--error--error .file-upload__file-item-msg {
    display: flex;
    width: 100%;
    flex-direction: column;
    color: var(--colors-text-error-primary);
    align-items: flex-start;
    gap: 8px
}

.file-upload__file-status--complete {
    color: var(--colors-brand-600)
}

.file-upload__file-status--error {
    color: var(--colors-error-600)
}

.file-upload__file-name {
    color: var(--Colors-Gray-neutral-950);
    overflow: hidden;
    white-space: nowrap;
    flex: 1
}

.file-upload--drag-over .file-upload__drop-area {
    background-color: var(--colors-brand-50);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%231B8354FF' stroke-width='2' stroke-dasharray='12%2c6.5' stroke-dashoffset='5' stroke-linecap='square'/%3e%3c/svg%3e")
}

.file-upload--drag-over .file-upload__icon {
    color: var(--colors-brand-600)
}

.file-upload--drag-over .file-upload__instructions, .file-upload--drag-over .file-upload__formats {
    color: var(--colors-text-brand-primary)
}

.file-upload--disabled .file-upload__drop-area {
    background-color: var(--colors-base-white)
}

.file-upload--disabled .file-upload__icon, .file-upload--disabled .file-upload__instructions, .file-upload--disabled .file-upload__formats {
    color: var(--colors-gray-neutral-300)
}

.spinner {
    display: flex;
    justify-content: center;
    align-items: center
}

.spinner__circle {
    position: relative;
    border: 2px solid var(--colors-gray-neutral-200);
    border-top-color: var(--colors-gray-neutral-800);
    mix-blend-mode: multiply;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: spin 0.5s linear infinite;
    animation-delay: 1ms
}

.spinner--tiny {
    width: 20px;
    height: 20px
}

.spinner--xs {
    width: 24px;
    height: 24px
}

.spinner--sm {
    width: 28px;
    height: 28px
}

.spinner--md {
    width: 32px;
    height: 32px
}

.spinner--lg {
    width: 36px;
    height: 36px
}

.spinner--xl {
    width: 40px;
    height: 40px
}

.spinner--huge {
    width: 44px;
    height: 44px
}

.spinner--neutral .spinner__circle {
    border-color: var(--colors-gray-neutral-200);
    border-top-color: var(--colors-gray-neutral-800)
}

.spinner--neutral .spinner__circle:after, .spinner--neutral .spinner__circle:before {
    background-color: var(--colors-gray-neutral-800)
}

.spinner--brand .spinner__circle {
    border-color: var(--colors-gray-neutral-200);
    border-top-color: var(--colors-brand-600)
}

.spinner--brand .spinner__circle:after, .spinner--brand .spinner__circle:before {
    background-color: var(--colors-brand-600)
}

.spinner--on-color .spinner__circle {
    border-color: hsla(var(--colors-alpha-white) / 30%);
    border-top-color: var(--colors-base-white);
    mix-blend-mode: normal
}

.spinner--on-color .spinner__circle:after, .spinner--on-color .spinner__circle:before {
    background-color: var(--colors-base-white)
}

.date-picker-root__main__inputs .input {
    width: 50px;
    max-width: unset;
    min-width: unset;
    flex: 1
}

[data-dual-view="true"] .date-picker-root__main__inputs .input {
    width: 200px
}

.date-cell--selected .date-cell__label span {
    color: var(--colors-base-white) !important;
    border-radius: var(--radius-full);
    background-color: var(--colors-brand-600)
}

.date-cell--today .date-cell__label span {
    border: 2px solid var(--colors-brand-600);
    color: var(--colors-brand-600)
}

.date-cell--today:hover .date-cell__label span {
    background: var(--colors-brand-100)
}

.date-cell--mid-range .date-cell__label {
    background-color: var(--colors-brand-100)
}

.date-cell--mid-range--first-child .date-cell__label:before {
    content: "";
    width: 52px;
    height: 48px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50% 0 0 50%;
    background-color: var(--colors-brand-100);
    z-index: -1
}

.date-cell--mid-range--last-child .date-cell__label:before {
    content: "";
    width: 52px;
    height: 48px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 50% 50% 0;
    background-color: var(--colors-brand-100);
    z-index: -1
}

.progress-indicator__step-content > .step-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--colors-gray-neutral-300, #d2d6db);
    color: var(--colors-gray-neutral-300, #d2d6db)
}

.progress-indicator__step-content > .step-icon--brand-border {
    border: 2px solid var(--colors-brand-600);
    color: var(--colors-brand-600)
}

.progress-indicator__step-content > .step-icon--brand-bg {
    border: 2px solid var(--colors-brand-600);
    background-color: var(--colors-brand-600);
    color: #fff
}

.progress-indicator__step-content > .step-label .step-label--circle {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: 2px solid var(--colors-gray-neutral-300);
    color: var(--colors-gray-neutral-300)
}

.progress-indicator__step-content > .step-label .step-label--dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--colors-gray-neutral-300)
}

.progress-indicator__step-content > .step-label[data-state="current"] .step-label--circle {
    border: 2px solid var(--colors-brand-600);
    color: var(--colors-brand-600)
}

.progress-indicator__step-content > .step-label[data-state="current"] .step-label--dot {
    border: 2px solid var(--colors-brand-600)
}

.progress-indicator__step-content > .step-label[data-state="completed"] .step-label--circle {
    border: 2px solid var(--colors-brand-600);
    background-color: var(--colors-brand-600);
    color: #fff
}

.progress-indicator__step-content > .step-label[data-state="completed"] .step-label--dot {
    background-color: var(--colors-brand-600)
}

.progress-indicator__step-content > .step-label[data-state="upcomming"] .step-label--circle {
    border: 2px solid var(--colors-gray-neutral-300);
    color: var(--colors-gray-neutral-300)
}

.progress-indicator__step-content > .step-label[data-state="upcomming"] .step-label--dot {
    background-color: var(--colors-gray-neutral-300)
}

.progress-indicator__step-content > .step-label--brand-border {
    color: var(--colors-brand-600);
    border-color: var(--colors-brand-600)
}

.progress-indicator__step-content > .step-text {
    gap: 4px;
    height: fit-content;
    padding-right: 16px
}

.progress-indicator__step-connector {
    display: block;
    width: calc(100% - 32px);
    height: 2px;
    background: var(--colors-gray-neutral-300);
    position: absolute;
    top: 16px;
    left: 32px
}

.progress-indicator__step-connector--active {
    background: var(--colors-brand-600)
}

[data-alignment="vertical"].progress-indicator {
    flex-direction: column
}

.step-label .step-label--circle {
    display: grid;
    place-items: center;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: 2px solid var(--colors-gray-neutral-300);
    color: var(--colors-gray-neutral-300)
}

.step-label .step-label--dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--colors-gray-neutral-300)
}

.step-label[data-state="current"] .step-label--circle {
    border: 2px solid var(--colors-brand-600);
    color: var(--colors-brand-600)
}

.step-label[data-state="current"] .step-label--dot {
    border: 2px solid var(--colors-brand-600)
}

.step-label[data-state="completed"] .step-label--circle {
    border: 2px solid var(--colors-brand-600);
    background-color: var(--colors-brand-600);
    color: #fff
}

.step-label[data-state="completed"] .step-label--dot {
    background-color: var(--colors-brand-600)
}

.step-label[data-state="upcomming"] .step-label--circle {
    border: 2px solid var(--colors-gray-neutral-300);
    color: var(--colors-gray-neutral-300)
}

.step-label[data-state="upcomming"] .step-label--dot {
    background-color: var(--colors-gray-neutral-300)
}

.textarea {
    display: inline-flex;
    height: 40px;
    width: 320px;
    max-width: 332px;
    min-width: 200px;
    justify-content: flex-start;
    border-radius: var(--radius-sm);
    gap: var(--spacing-xs);
    border: 1px solid var(--colors-gray-neutral-400);
    background: var(--colors-base-white);
    overflow: hidden;
    position: relative
}

.textarea:hover {
    border-color: var(--colors-gray-neutral-700)
}

.textarea:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    transform: translate(-50%);
    background-color: var(--colors-gray-neutral-950);
    transition: width 0.2s ease-in-out
}

.textarea__field {
    background-color: #fff0;
    border: 0;
    outline: 0;
    height: 100%;
    width: 100%;
    color: var(--colors-text-primary);
    padding: 0;
    resize: none;
    position: relative
}

.textarea__field::-moz-placeholder {
    color: var(--colors-text-placeholder)
}

.textarea__field::placeholder {
    color: var(--colors-text-placeholder)
}

.textarea--readonly, .textarea--readonly:hover, .textarea--disabled, .textarea--disabled:hover {
    border-color: var(--colors-gray-neutral-300);
    box-shadow: none !important
}

.textarea--disabled .textarea__field::-moz-placeholder {
    color: var(--colors-gray-neutral-300)
}

.textarea--disabled .textarea__field, .textarea--disabled .textarea__field::placeholder {
    color: var(--colors-gray-neutral-300)
}

.textarea--disabled .textarea__icon span, .textarea--disabled .textarea__prefix--subtle-text, .textarea--disabled .textarea__prefix--solid-text {
    color: var(--colors-gray-neutral-300)
}

.textarea__feedback-icon--success {
    color: var(--colors-brand-600)
}

.textarea__feedback-icon--error {
    color: var(--colors-error-600)
}

.textarea__feedback-icon--error span:after {
    background-color: var(--colors-error-100)
}

.textarea__feedback-icon--warning {
    color: var(--colors-warning-600)
}

.textarea__feedback-icon--warning-triangle {
    color: var(--colors-warning-600)
}

.textarea--lighter:hover {
    border: 1px solid var(--colors-gray-neutral-400)
}

.textarea--lighter.focus {
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-base-white)
}

.textarea--lighter.active {
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-gray-neutral-100)
}

.textarea--darker {
    border: 0;
    background-color: var(--colors-gray-neutral-50)
}

.textarea--darker:hover {
    border: 1px solid var(--colors-gray-neutral-400)
}

.textarea--darker.focus {
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-base-white)
}

.textarea--darker.active {
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-gray-neutral-100)
}

.textarea--error, .textarea--error:hover {
    outline-color: var(--colors-error-600)
}

.textarea--error:after {
    background-color: var(--colors-error-600)
}

.card-row {
    padding: var(--spacing-xl, 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3xl, 24px);
    border-radius: var(--radius-lg, 16px);
    background: var(--Colors-Base-white, #fff);
    /*border: 2px solid var(--Colors-Base-black, #fff);*/
    cursor: pointer;
    position: relative
}

.card {
    max-width: 350px;
    padding: var(--spacing-xl, 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3xl, 24px);
    border-radius: var(--radius-lg, 16px);
    background: var(--Colors-Base-white, #fff);
    border: 2px solid #fff;
    cursor: pointer;
    position: relative
}

.card__image-container img {
    width: auto;
    height: 100%;
    border-radius: inherit
}

.card.disabled {
    color: var(--colors-gray-neutral-300);
    background-color: #fff0;
    border-color: #fff0
}

.card.disabled:after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--colors-gray-neutral-100);
    opacity: .3
}

.card.focused {
    border-radius: var(--radius-lg, 16px);
    border: 2px solid var(--Colors-Base-black, #000)
}

.content-switcher__item--first {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: .5px solid var(--colors-2-border-secondary, #e5e7eb)
}

.content-switcher__item--on-color.content-switcher__item--selected, .content-switcher__item--on-color.content-switcher__item--selected:hover {
    background-color: var(--colors-brand-600)
}

div.table-wrapper .azm-structured-table tr.row-divider:not(:last-child) {
    border-bottom: 1px solid var(--colors-gray-neutral-300)
}

div.table-wrapper .azm-structured-table thead {
    border-bottom: 1px solid var(--colors-gray-neutral-300);
    border-top: 1px solid var(--colors-gray-neutral-300);
    background: var(--Colors-Gray-neutral-100, #f3f4f6)
}

div.table-wrapper .azm-structured-table thead th {
    height: 48px;
    border-right: 1px solid var(--colors-gray-neutral-300);
    text-align: left;
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
    justify-content: space-between;
    align-items: center;
    color: var(--colors-gray-neutral-600)
}

div.table-wrapper .azm-structured-table tbody tr:hover {
    background-color: var(--colors-gray-neutral-100)
}

div.table-wrapper .azm-structured-table tbody tr td div {
    display: flex;
    align-items: center;
    justify-content: start
}

.pagination__item button:hover {
    background: var(--colors-gray-neutral-100);
    color: #161616;
    border-radius: 4px
}

.list--brand .list__item {
    color: #1b8354
}

.list--brand > ul .list__item:before {
    background-color: #1b8354
}

.list--neutral .list__item {
    color: #0d121c
}

.list--neutral > ul .list__item:before {
    background-color: #0d121c
}

.list--on-color .list__item {
    color: var(--Link-2-link-default_on-color, #fff)
}

.list--on-color > ul .list__item:before {
    background-color: #fff
}

.list--unordered .list__item {
    display: flex;
    align-items: center;
    gap: 8px
}

.list--unordered .list__item:before {
    content: "-"
}

.list--unordered > ul .list__item {
    display: flex;
    align-items: center;
    gap: 8px
}

.list--unordered > ul .list__item:before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%
}

.list--with-icon .list__item {
    display: flex;
    align-items: center;
    gap: 8px
}

.list--with-icon .list__item-icon {
    display: flex;
    width: 16px;
    height: 16px;
    justify-content: center;
    align-items: center
}

.avatar {
    border-radius: var(--radius-full);
    border: 2px solid var(--colors-border-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--colors-button-background-neutral-default, #f3f4f6);
    overflow: hidden
}

.avatar--120 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px
}

.avatar--120 .avatar__icon > * {
    width: 100%;
    height: 100%
}

.avatar--80 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px
}

.avatar--80 .avatar__icon > * {
    width: 100%;
    height: 100%
}

.avatar--68 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px
}

.avatar--68 .avatar__icon > * {
    width: 100%;
    height: 100%
}

.avatar--48 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px
}

.avatar--48 .avatar__icon > * {
    width: 100%;
    height: 100%
}

.avatar--40 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px
}

.avatar--40 .avatar__icon > * {
    width: 100%;
    height: 100%
}

.avatar--32 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px
}

.avatar--32 .avatar__icon > * {
    width: 100%;
    height: 100%
}

.avatar--24 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px
}

.avatar--24 .avatar__icon > * {
    width: 100%;
    height: 100%
}

.footer {
    display: flex;
    padding: var(--spacing-none) var(--spacing-4xl);
    justify-content: center;
    align-items: flex-start;
    background-color: var(--colors-gray-neutral-100)
}

.footer-content {
    display: flex;
    max-width: 1280px;
    width: 100%;
    margin: auto;
    padding: var(--spacing-3xl, 24px) var(--spacing-none, 0);
    flex-direction: column;
    align-items: flex-start
}

.footer__nav-links {
    display: flex;
    padding: var(--spacing-xl) var(--spacing-none);
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--spacing-3xl);
    align-self: stretch;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: var(--spacing-8xl);
    z-index: 2
}

.footer__basic {
    display: flex;
    padding: var(--spacing-xl) var(--spacing-none);
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3xl);
    width: 100%;
    z-index: 2
}

.footer-icon-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.footer-icon-section a {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px
}

.footer-title-description {
    max-width: var(--width-2xl);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    margin-block: var(--spacing-7xl)
}

.footer-title-description h3 {
    font-size: 72px;
    font-weight: 700;
    line-height: 90px;
    letter-spacing: -1.44px
}

.footer-title-description p {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px
}

.footer__actions, .footer__extra-actions {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--spacing-xl);
    align-self: stretch;
    flex-wrap: wrap;
    list-style: none
}

.footer__extra-actions li a span {
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px
}

.footer__copyright {
    color: var(--colors-text-primary);
    margin-top: 40px
}

.footer__nav-links ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.footer__nav-links-column {
    min-width: 180px
}

.footer__nav-links-column, .footer__nav-links-column-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md)
}

.footer__nav-links-column-title {
    width: 100%;
    color: var(--colors-text-primary);
    display: flex;
    padding-bottom: var(--spacing-md, 8px);
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid var(--colors-border-primary)
}

.footer__actions-copyright {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xl);
    flex: 1
}

.footer__actions {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--spacing-xl);
    align-self: stretch;
    flex-wrap: wrap;
    list-style: none
}

.footer__copyright {
    color: var(--colors-text-primary)
}

.footer__logos {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-xl)
}

.footer--bg-default {
    background-color: var(--colors-gray-neutral-100)
}

.footer--bg-brand {
    background-color: var(--colors-brand-900)
}

.footer--bg-brand .footer__nav-links-column-title {
    color: var(--colors-text-primary_on-brand)
}

.footer--bg-brand .footer__copyright {
    color: var(--colors-text-primary_on-brand)
}

.footer__last-Modified-date {
    font-family: inherit;
    color: var(--colors-base-white)
}

.footer-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    z-index: 1
}

.footer-banner {
    width: 100%;
    display: block;
    line-height: 0;
    margin: 0;
    padding: 0;
    background: var(--colors-brand-900)
}

.footer-banner img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover
}

.footer-banner + .footer {
    margin-top: 0
}

.footer-banner--flip img {
    transform: scaleY(-1);
    transform-origin: center
}

.footer-pattern {
    background-image: url(../images/mujallidf_images/1-03.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.footer-pattern-arabic {
    left: 0;
    right: auto;
    transform: rotateY(180deg)
}

@media only screen and(max-width: 991px) and(min-width: 768px) {
    .footer-pattern {
        width: 50%
    }
}

@media only screen and(min-width: 992px) and(max-width: 1921px) {
    .footer-pattern {
        width: 30%
    }
}

@media only screen and(max-width: 1920px) and(min-width: 1567px) {
    .footer-pattern {
        width: 30%
    }
}

@media only screen and(min-width: 1568px) {
    .footer-pattern {
        width: 28%
    }
}

@media only screen and(max-width: 767px) and(min-width: 568px) {
    .footer-pattern {
        width: 68%
    }
}

@media only screen and(max-width: 569px) and(min-width: 501px) {
    .footer-pattern {
        width: 68%
    }
}

@media only screen and(max-width: 500px) and(min-width: 350px) {
    .footer-pattern {
        width: 68%
    }
}

@media only screen and(max-width: 349px) {
    .footer-pattern {
        width: 78%
    }
}

.table-of-content__tab-sublist .table-of-content__tab:before {
    content: "";
    width: 2px;
    height: 100%;
    background-color: var(--colors-gray-neutral-300);
    display: block;
    position: absolute;
    left: 16px;
    top: 0
}

.table-of-content__tab-sub-sublist .table-of-content__tab:before {
    content: "";
    width: 2px;
    height: 100%;
    background-color: var(--colors-gray-neutral-300);
    display: block;
    position: absolute;
    left: 16px;
    top: 0
}

.table-of-content__tab-sub-sublist .table-of-content__tab:after {
    content: "";
    width: 2px;
    height: 100%;
    background-color: var(--colors-gray-neutral-300);
    display: block;
    position: absolute;
    left: 32px;
    top: 0
}

.table-of-content__tab-prefix {
    display: none;
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--colors-brand-600);
    width: 3px;
    position: absolute;
    left: 0;
    top: 0
}

.text-xl-regular {
    font: 400 20px/30px IBMPlexSans-Regular
}

.text-lg-regular {
    font: 400 18px/28px IBMPlexSans-Regular
}

.input__field::-moz-placeholder, .textarea__field::-moz-placeholder {
    font: 400 16px/24px IBMPlexSans-Regular
}

.text-md-regular, .accordion-item__body, .input__field, .input__field::placeholder, .input__prefix-label, .input__prefix-icon, .input__prefix-chevron, .input__suffix-label, .input__suffix-icon, .input__suffix-chevron, .input--lg .input__prefix-label, .input--lg .input__suffix-label, .link, .link--md, .dropdown__label, .dropdown__btn, .dropdown--lg .dropdown__label, .dropdown--lg .dropdown__label-placeholder, .dropdown--lg .dropdown__option-label, .notification__content p, .date-cell__label, .menu-item__label, .menu-item__trail-element, div.table-wrapper .azm-table tbody td, .dga-tooltip-item, .content-switcher__item, div.table-wrapper .azm-structured-table tbody td {
    font: 400 16px/24px IBMPlexSans-Regular
}

.input--lg .input__field::-moz-placeholder, .input--md .input__field::-moz-placeholder, .textarea--lg .textarea__field::-moz-placeholder {
    font: 400 14px/20px IBMPlexSans-Regular
}

.text-sm-regular, .checkbox__helper-text, .switch__helper-text, .radio__helper-text, .input__prefix .dropdown__label--selection, .input__suffix .dropdown__label--selection, .input--lg .input__field, .input--lg .input__field::placeholder, .input--md .input__field, .input--md .input__field::placeholder, .input--md .input__prefix-label, .input--md .input__suffix-label, .link--sm, .dropdown__option-label, .dropdown--md .dropdown__label, .dropdown--md .dropdown__label-placeholder, .dropdown--md .dropdown__option-label, dialog .modal__content, .tabs-list__label, .file-upload__formats, .file-upload__file-item--error .file-upload__file-item-msg, .file-upload__file-item--error--error .file-upload__file-item-msg, .textarea--lg .textarea__field, .textarea--lg .textarea__field::placeholder, .sub-menu__link-helper, .sidepanel__submenu--sublevel .sidepanel__submenu-tab-label, .table-of-content__tab-label, .textarea__field, .textarea__field::placeholder {
    font: 400 14px/20px IBMPlexSans-Regular
}

.text-xs-regular, .dga-tooltip-main__content__helper-text {
    font: 400 12px/18px IBMPlexSans-Regular
}

.text-md-medium, .btn--lg, .tag, .tag--lg, .checkbox__label, .switch__label, .date-picker__navigator-label, .progress-indicator__step-content > .step-icon, .progress-indicator__step-content > .step-label .step-label--circle, .step-label .step-label--circle, .avatar--48 .avatar__text, .header-menu__item-label, .header-menu__item-icon, .header-menu__item-arrow, .radio__label {
    font: 500 16px/24px IBMPlexSans-Medium
}

.text-sm-medium, .btn--md, .checkbox__warning, .switch__warning, .radio__warning, .tabs-list__item--active .tabs-list__label, .file-upload__file-name {
    font: 500 14px/20px IBMPlexSans-Medium
}

.text-xs-medium, .btn--sm, .tag--md, div.table-wrapper .azm-table thead th span span.text, div.table-wrapper .azm-structured-table thead th {
    font: 500 12px/18px IBMPlexSans-Medium
}

.text-lg-semibold, dialog .modal__heading, .footer__nav-links-column-title {
    font: 600 18px/28px IBMPlexSans-SemiBold
}

.text-sm-semibold, .dropdown__list-group-label, .avatar--40 .avatar__text, .sidepanel__menu-tab-label, .sidepanel__submenu-tab-label, .table-of-content__tab.selected .table-of-content__tab-label, .table-of-content__tab.active .table-of-content__tab-label {
    font: 600 14px/20px IBMPlexSans-SemiBold
}

.text-2xs-semibold, .tag--sm {
    font: 600 10px/14px IBMPlexSans-SemiBold
}

.display-md-bold {
    font: 700 36px/44px IBMPlexSans-Bold
}

.display-sm-bold {
    font: 700 30px/38px IBMPlexSans-Bold
}

.display-xs-bold {
    font: 700 24px/32px IBMPlexSans-Bold
}

.text-sm-bold {
    font: 700 14px/20px IBMPlexSans-Bold
}

.shadow-md, .input.focus, .dropdown__btn.open, .textarea.focus, .card, .card.focused {
    box-shadow: var(--shadow-md)
}

.shadow-lg, .dga-tooltip-main, .header__sub-menu, .sidepanel {
    box-shadow: var(--shadow-lg)
}

: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;
    --spacing-none: var(--spacing-0);
    --spacing-xxs: var(--spacing-0․5);
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-1․5);
    --spacing-md: var(--spacing-2);
    --spacing-lg: var(--spacing-3);
    --spacing-xl: var(--spacing-4);
    --spacing-2xl: var(--spacing-5);
    --spacing-3xl: var(--spacing-6);
    --spacing-4xl: var(--spacing-8);
    --spacing-5xl: var(--spacing-10);
    --spacing-6xl: var(--spacing-12);
    --spacing-7xl: var(--spacing-16);
    --spacing-8xl: var(--spacing-20);
    --spacing-9xl: var(--spacing-24);
    --spacing-10xl: var(--spacing-32);
    --spacing-11xl: var(--spacing-40);
    --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);
    --paragraph-max-width: var(--spacing-180);
    --container-padding-mobile: var(--spacing-4);
    --container-padding-desktop: var(--spacing-8);
    --container-max-width-desktop: var(--spacing-320);
    --radius-none: 0;
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-4xl: 24px;
    --radius-full: 9999px;
    --colors-base-white: #ffffff;
    --colors-base-black: #0d121c;
    --colors-alpha-white: 0deg 0% 100%;
    --colors-alpha-black: 0deg 0% 0%;
    --colors-gray-25: #fafafa;
    --colors-gray-50: #f5f5f6;
    --colors-gray-100: #f0f1f1;
    --colors-gray-200: #ececed;
    --colors-gray-300: #cecfd2;
    --colors-gray-400: #94969c;
    --colors-gray-500: #85888e;
    --colors-gray-600: #61646c;
    --colors-gray-700: #333741;
    --colors-gray-800: #1f242f;
    --colors-gray-900: #161b26;
    --colors-gray-950: #0c111d;
    --colors-gray-1000: #161616;
    --colors-brand-25: #f7fdf9;
    --colors-brand-50: #f3fcf6;
    --colors-brand-100: #dff6e7;
    --colors-brand-200: #b8eacb;
    --colors-brand-300: #88d8ad;
    --colors-brand-400: #54c08a;
    --colors-brand-500: #25935f;
    --colors-brand-600: #1b8354;
    --colors-brand-700: #166a45;
    --colors-brand-800: #14573a;
    --colors-brand-900: #104631;
    --colors-brand-950: #092a1e;
    --colors-error-25: #fffbfa;
    --colors-error-50: #fef3f2;
    --colors-error-100: #fee4e2;
    --colors-error-200: #fecdca;
    --colors-error-300: #fda29b;
    --colors-error-400: #f97066;
    --colors-error-500: #f04438;
    --colors-error-600: #d92d20;
    --colors-error-700: #b42318;
    --colors-error-800: #912018;
    --colors-error-900: #7a271a;
    --colors-error-950: #55160c;
    --colors-warning-25: #fffcf5;
    --colors-warning-50: #fffaeb;
    --colors-warning-100: #fef0c7;
    --colors-warning-200: #fedf89;
    --colors-warning-300: #fec84b;
    --colors-warning-400: #fdb022;
    --colors-warning-500: #f79009;
    --colors-warning-600: #dc6803;
    --colors-warning-700: #b54708;
    --colors-warning-800: #93370d;
    --colors-warning-900: #7a2e0e;
    --colors-warning-950: #4e1d09;
    --colors-success-25: #f6fef9;
    --colors-success-50: #ecfdf3;
    --colors-success-100: #dcfae6;
    --colors-success-200: #abefc6;
    --colors-success-300: #75e0a7;
    --colors-success-400: #47cd89;
    --colors-success-500: #17b26a;
    --colors-success-600: #079455;
    --colors-success-700: #067647;
    --colors-success-800: #085d3a;
    --colors-success-900: #074d31;
    --colors-success-950: #053321;
    --colors-info-25: #f5faff;
    --colors-info-50: #eff8ff;
    --colors-info-100: #d1e9ff;
    --colors-info-200: #b2ddff;
    --colors-info-300: #84caff;
    --colors-info-400: #53b1fd;
    --colors-info-500: #2e90fa;
    --colors-info-600: #1570ef;
    --colors-info-700: #175cd3;
    --colors-info-800: #1849a9;
    --colors-info-900: #194185;
    --colors-info-950: #102a56;
    --colors-gray-blue-25: #fcfcfd;
    --colors-gray-blue-50: #f8f9fc;
    --colors-gray-blue-100: #eaecf5;
    --colors-gray-blue-200: #d5d9eb;
    --colors-gray-blue-300: #b3b8db;
    --colors-gray-blue-400: #717bbc;
    --colors-gray-blue-500: #4e5ba6;
    --colors-gray-blue-600: #3e4784;
    --colors-gray-blue-700: #363f72;
    --colors-gray-blue-800: #293056;
    --colors-gray-blue-900: #101323;
    --colors-gray-blue-950: #0d0f1c;
    --colors-gray-cool-25: #fcfcfd;
    --colors-gray-cool-50: #f9f9fb;
    --colors-gray-cool-100: #eff1f5;
    --colors-gray-cool-200: #dcdfea;
    --colors-gray-cool-300: #b9c0d4;
    --colors-gray-cool-400: #7d89b0;
    --colors-gray-cool-500: #5d6b98;
    --colors-gray-cool-600: #4a5578;
    --colors-gray-cool-700: #404968;
    --colors-gray-cool-800: #30374f;
    --colors-gray-cool-900: #111322;
    --colors-gray-cool-950: #0e101b;
    --colors-gray-modern-25: #fcfcfd;
    --colors-gray-modern-50: #f8fafc;
    --colors-gray-modern-100: #eef2f6;
    --colors-gray-modern-200: #e3e8ef;
    --colors-gray-modern-300: #cdd5df;
    --colors-gray-modern-400: #9aa4b2;
    --colors-gray-modern-500: #697586;
    --colors-gray-modern-600: #4b5565;
    --colors-gray-modern-700: #364152;
    --colors-gray-modern-800: #202939;
    --colors-gray-modern-900: #121926;
    --colors-gray-modern-950: #0d121c;
    --colors-gray-neutral-25: #fcfcfd;
    --colors-gray-neutral-50: #f9fafb;
    --colors-gray-neutral-100: #f3f4f6;
    --colors-gray-neutral-200: #e5e7eb;
    --colors-gray-neutral-300: #d2d6db;
    --colors-gray-neutral-400: #9da4ae;
    --colors-gray-neutral-500: #6c737f;
    --colors-gray-neutral-600: #4d5761;
    --colors-gray-neutral-700: #384250;
    --colors-gray-neutral-800: #1f2a37;
    --colors-gray-neutral-900: #111927;
    --colors-gray-neutral-950: #0d121c;
    --colors-gray-iron-25: #fcfcfc;
    --colors-gray-iron-50: #fafafa;
    --colors-gray-iron-100: #f4f4f5;
    --colors-gray-iron-200: #e4e4e7;
    --colors-gray-iron-300: #d1d1d6;
    --colors-gray-iron-400: #a0a0ab;
    --colors-gray-iron-500: #70707b;
    --colors-gray-iron-600: #51525c;
    --colors-gray-iron-700: #3f3f46;
    --colors-gray-iron-800: #26272b;
    --colors-gray-iron-900: #1a1a1e;
    --colors-gray-iron-950: #131316;
    --colors-gray-true-25: #fcfcfc;
    --colors-gray-true-50: #fafafa;
    --colors-gray-true-100: #f5f5f5;
    --colors-gray-true-200: #e5e5e5;
    --colors-gray-true-300: #d6d6d6;
    --colors-gray-true-400: #a3a3a3;
    --colors-gray-true-500: #737373;
    --colors-gray-true-600: #525252;
    --colors-gray-true-700: #424242;
    --colors-gray-true-800: #292929;
    --colors-gray-true-900: #141414;
    --colors-gray-true-950: #0f0f0f;
    --colors-gray-warm-25: #fdfdfc;
    --colors-gray-warm-50: #fafaf9;
    --colors-gray-warm-100: #f5f5f4;
    --colors-gray-warm-200: #e7e5e4;
    --colors-gray-warm-300: #d7d3d0;
    --colors-gray-warm-400: #a9a29d;
    --colors-gray-warm-500: #79716b;
    --colors-gray-warm-600: #57534e;
    --colors-gray-warm-700: #44403c;
    --colors-gray-warm-800: #292524;
    --colors-gray-warm-900: #1c1917;
    --colors-gray-warm-950: #171412;
    --colors-moss-25: #fafdf7;
    --colors-moss-50: #f5fbee;
    --colors-moss-100: #e6f4d7;
    --colors-moss-200: #ceeab0;
    --colors-moss-300: #acdc79;
    --colors-moss-400: #86cb3c;
    --colors-moss-500: #669f2a;
    --colors-moss-600: #4f7a21;
    --colors-moss-700: #3f621a;
    --colors-moss-800: #335015;
    --colors-moss-900: #2b4212;
    --colors-moss-950: #1a280b;
    --colors-green-light-25: #fafef5;
    --colors-green-light-50: #f3fee7;
    --colors-green-light-100: #e3fbcc;
    --colors-green-light-200: #d0f8ab;
    --colors-green-light-300: #a6ef67;
    --colors-green-light-400: #85e13a;
    --colors-green-light-500: #66c61c;
    --colors-green-light-600: #4ca30d;
    --colors-green-light-700: #3b7c0f;
    --colors-green-light-800: #326212;
    --colors-green-light-900: #2b5314;
    --colors-green-light-950: #15290a;
    --colors-green-25: #f6fef9;
    --colors-green-50: #edfcf2;
    --colors-green-100: #d3f8df;
    --colors-green-200: #aaf0c4;
    --colors-green-300: #73e2a3;
    --colors-green-400: #3ccb7f;
    --colors-green-500: #16b364;
    --colors-green-600: #099250;
    --colors-green-700: #087443;
    --colors-green-800: #095c37;
    --colors-green-900: #084c2e;
    --colors-green-950: #052e1c;
    --colors-Teal-25: #f6fefc;
    --colors-Teal-50: #f0fdf9;
    --colors-Teal-100: #ccfbef;
    --colors-Teal-200: #99f6e0;
    --colors-Teal-300: #5fe9d0;
    --colors-Teal-400: #2ed3b7;
    --colors-Teal-500: #15b79e;
    --colors-Teal-600: #0e9384;
    --colors-Teal-700: #107569;
    --colors-Teal-800: #125d56;
    --colors-Teal-900: #134e48;
    --colors-Teal-950: #0a2926;
    --colors-cyan-25: #f5feff;
    --colors-cyan-50: #ecfdff;
    --colors-cyan-100: #cff9fe;
    --colors-cyan-200: #a5f0fc;
    --colors-cyan-300: #67e3f9;
    --colors-cyan-400: #22ccee;
    --colors-cyan-500: #06aed4;
    --colors-cyan-600: #088ab2;
    --colors-cyan-700: #0e7090;
    --colors-cyan-800: #155b75;
    --colors-cyan-900: #164c63;
    --colors-cyan-950: #0d2d3a;
    --colors-blue-light-25: #f5fbff;
    --colors-blue-light-50: #f0f9ff;
    --colors-blue-light-100: #e0f2fe;
    --colors-blue-light-200: #b9e6fe;
    --colors-blue-light-300: #7cd4fd;
    --colors-blue-light-400: #36bffa;
    --colors-blue-light-500: #0ba5ec;
    --colors-blue-light-600: #0086c9;
    --colors-blue-light-700: #026aa2;
    --colors-blue-light-800: #065986;
    --colors-blue-light-900: #0b4a6f;
    --colors-blue-light-950: #062c41;
    --colors-blue-dark-25: #f5f8ff;
    --colors-blue-dark-50: #eff4ff;
    --colors-blue-dark-100: #d1e0ff;
    --colors-blue-dark-200: #b2ccff;
    --colors-blue-dark-300: #84adff;
    --colors-blue-dark-400: #528bff;
    --colors-blue-dark-500: #2970ff;
    --colors-blue-dark-600: #155eef;
    --colors-blue-dark-700: #004eeb;
    --colors-blue-dark-800: #0040c1;
    --colors-blue-dark-900: #00359e;
    --colors-blue-dark-950: #002266;
    --colors-indigo-25: #f5f8ff;
    --colors-indigo-50: #eef4ff;
    --colors-indigo-100: #e0eaff;
    --colors-indigo-200: #c7d7fe;
    --colors-indigo-300: #a4bcfd;
    --colors-indigo-400: #8098f9;
    --colors-indigo-500: #6172f3;
    --colors-indigo-600: #444ce7;
    --colors-indigo-700: #3538cd;
    --colors-indigo-800: #2d31a6;
    --colors-indigo-900: #2d3282;
    --colors-indigo-950: #1f235b;
    --colors-violet-25: #fbfaff;
    --colors-violet-50: #f5f3ff;
    --colors-violet-100: #ece9fe;
    --colors-violet-200: #ddd6fe;
    --colors-violet-300: #c3b5fd;
    --colors-violet-400: #a48afb;
    --colors-violet-500: #875bf7;
    --colors-violet-600: #7839ee;
    --colors-violet-700: #6927da;
    --colors-violet-800: #5720b7;
    --colors-violet-900: #491c96;
    --colors-violet-950: #2e125e;
    --colors-purple-25: #fafaff;
    --colors-purple-50: #f4f3ff;
    --colors-purple-100: #ebe9fe;
    --colors-purple-200: #d9d6fe;
    --colors-purple-300: #bdb4fe;
    --colors-purple-400: #9b8afb;
    --colors-purple-500: #7a5af8;
    --colors-purple-600: #6938ef;
    --colors-purple-700: #5925dc;
    --colors-purple-800: #4a1fb8;
    --colors-purple-900: #3e1c96;
    --colors-purple-950: #27115f;
    --colors-fuchsia-25: #fefaff;
    --colors-fuchsia-50: #fdf4ff;
    --colors-fuchsia-100: #fbe8ff;
    --colors-fuchsia-200: #f6d0fe;
    --colors-fuchsia-300: #eeaafd;
    --colors-fuchsia-400: #e478fa;
    --colors-fuchsia-500: #d444f1;
    --colors-fuchsia-600: #ba24d5;
    --colors-fuchsia-700: #9f1ab1;
    --colors-fuchsia-800: #821890;
    --colors-fuchsia-900: #6f1877;
    --colors-fuchsia-950: #47104c;
    --colors-pink-25: #fef6fb;
    --colors-pink-50: #fdf2fa;
    --colors-pink-100: #fce7f6;
    --colors-pink-200: #fcceee;
    --colors-pink-300: #faa7e0;
    --colors-pink-400: #f670c7;
    --colors-pink-500: #ee46bc;
    --colors-pink-600: #dd2590;
    --colors-pink-700: #c11574;
    --colors-pink-800: #9e165f;
    --colors-pink-900: #851651;
    --colors-pink-950: #4e0d30;
    --colors-rosé-25: #fff5f6;
    --colors-rosé-50: #fff1f3;
    --colors-rosé-100: #ffe4e8;
    --colors-rosé-200: #fecdd6;
    --colors-rosé-300: #fea3b4;
    --colors-rosé-400: #fd6f8e;
    --colors-rosé-500: #f63d68;
    --colors-rosé-600: #e31b54;
    --colors-rosé-700: #c01048;
    --colors-rosé-800: #a11043;
    --colors-rosé-900: #89123e;
    --colors-rosé-950: #510b24;
    --colors-orange-dark-25: #fff9f5;
    --colors-orange-dark-50: #fff4ed;
    --colors-orange-dark-100: #ffe6d5;
    --colors-orange-dark-200: #ffd6ae;
    --colors-orange-dark-300: #ff9c66;
    --colors-orange-dark-400: #ff692e;
    --colors-orange-dark-500: #ff4405;
    --colors-orange-dark-600: #e62e05;
    --colors-orange-dark-700: #bc1b06;
    --colors-orange-dark-800: #97180c;
    --colors-orange-dark-900: #771a0d;
    --colors-orange-dark-950: #57130a;
    --colors-orange-25: #fefaf5;
    --colors-orange-50: #fef6ee;
    --colors-orange-100: #fdead7;
    --colors-orange-200: #f9dbaf;
    --colors-orange-300: #f7b27a;
    --colors-orange-400: #f38744;
    --colors-orange-500: #ef6820;
    --colors-orange-600: #e04f16;
    --colors-orange-700: #b93815;
    --colors-orange-800: #932f19;
    --colors-orange-900: #772917;
    --colors-orange-950: #511c10;
    --colors-yellow-25: #fefdf0;
    --colors-yellow-50: #fefbe8;
    --colors-yellow-100: #fef7c3;
    --colors-yellow-200: #feee95;
    --colors-yellow-300: #fde272;
    --colors-yellow-400: #fac515;
    --colors-yellow-500: #eaaa08;
    --colors-yellow-600: #ca8504;
    --colors-yellow-700: #a15c07;
    --colors-yellow-800: #854a0e;
    --colors-yellow-900: #713b12;
    --colors-yellow-950: #542c0d;
    --gradient-gray-600-500-90deg: linear-gradient(90deg, var(--colors-gray-600) 0%, var(--colors-gray-500) 100%);
    --gradient-gray-700-600-45deg: linear-gradient(45deg, var(--colors-gray-700) 0%, var(--colors-gray-600) 100%);
    --gradient-gray-800-600-45deg: linear-gradient(45deg, var(--colors-gray-800) 0%, var(--colors-gray-600) 100%);
    --gradient-gray-800-600-90deg: linear-gradient(90deg, var(--colors-gray-800) 0%, var(--colors-gray-600) 100%);
    --gradient-gray-800-700-26-5deg: linear-gradient(26.5deg, var(--colors-gray-600) 0%, var(--colors-gray-700) 100%);
    --gradient-gray-900-600-45deg: linear-gradient(45deg, var(--colors-gray-900) 0%, var(--colors-gray-600) 100%);
    --gradient-brand-600-500-90deg: linear-gradient(90deg, var(--colors-brand-600) 0%, var(--colors-brand-500) 100%);
    --gradient-brand-700-600-45deg: linear-gradient(45deg, var(--colors-brand-700) 0%, var(--colors-brand-600) 100%);
    --gradient-brand-800-600-45deg: linear-gradient(45deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100%);
    --gradient-brand-800-600-90deg: linear-gradient(90deg, var(--colors-brand-800) 0%, var(--colors-brand-600) 100%);
    --gradient-brand-800-700-26-5deg: linear-gradient(
            26.5deg,
            var(--colors-brand-600) 0%,
            var(--colors-brand-700) 100%
    );
    --gradient-brand-900-600-45deg: linear-gradient(45deg, var(--colors-brand-900) 0%, var(--colors-brand-600) 100%);
    --colors-text-primary: var(--colors-gray-900);
    --colors-text-primary_on-brand: var(--colors-base-white);
    --colors-text-secondary: var(--colors-gray-700);
    --colors-text-secondary_on-brand: hsla(var(--colors-alpha-white) / 70%);
    --colors-text-tertiary: var(--colors-gray-600);
    --colors-text-quarterary: var(--colors-gray-500);
    --colors-text-white: var(--colors-base-white);
    --colors-text-disabled: var(--colors-gray-500);
    --colors-text-placeholder: var(--colors-gray-500);
    --colors-text-brand-primary: var(--colors-brand-800);
    --colors-text-brand-secondary: var(--colors-brand-700);
    --colors-text-error-primary: var(--colors-error-600);
    --colors-border-primary: var(--colors-gray-300);
    --colors-border-secondary: var(--colors-gray-200);
    --colors-border-disabled: var(--colors-gray-300);
    --colors-border-disabled_subtle: var(--colors-gray-200);
    --colors-border-brand: var(--colors-brand-300);
    --colors-border-error: var(--colors-error-300);
    --colors-fg-primary: var(--colors-gray-900);
    --colors-fg-quinary-400: var(--colors-gray-400);
    --colors-fg-tertiary-600: var(--colors-gray-600);
    --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.1);
    --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1);
    --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)
}

.btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--radius-sm);
    margin: var(--spacing-xs);
    cursor: pointer;
    border: 0;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    box-sizing: border-box;
    overflow: hidden
}

.btn--lg {
    min-width: 40px;
    height: 40px;
    padding-inline: var(--buttons-lg-padding, 16px)
}

.btn--lg span.btn-icon {
    font-size: 24px
}

.btn--md {
    height: 32px;
    padding-inline: var(--spacing-lg)
}

.btn--md span.btn-icon {
    font-size: 20px
}

.btn--sm {
    height: 24px;
    padding-inline: var(--spacing-md)
}

.btn--sm span.btn-icon {
    font-size: 16px
}

.btn--icon {
    padding: 0
}

.btn--icon.btn--icon-menu.btn--lg {
    width: auto;
    padding-inline: var(--spacing-xl)
}

.btn--icon.btn--md {
    width: 32px;
    height: 32px
}

.btn--icon-menu.btn--md {
    width: auto;
    padding-inline: var(--spacing-lg)
}

.btn--icon.btn--sm {
    width: 24px;
    height: 24px
}

.btn--icon-menu.btn--sm {
    width: auto;
    padding-inline: var(--spacing-md)
}

.btn--primary-neutral:disabled, .btn--primary-neutral[disabled] {
    background: var(--colors-gray-neutral-100);
    color: var(--colors-gray-neutral-400)
}

.btn--primary-brand {
    padding: 8px 16px;
    font-size: 16px;
    line-height: 24px;
    background-color: #1b8354;
    color: #fff;
    text-decoration: none;
    border: none;
    transition: background-color 0.2s ease, outline 0.2s ease
}

.btn--primary-brand:hover {
    background-color: var(--colors-brand-700) !important;
    color: #fff
}

.btn--primary-brand:active {
    background-color: var(--colors-brand-900) !important;
    color: var(--colors-gray-neutral-25) !important
}

.btn--primary-brand:focus {
    outline: 2px solid #0d121c;
    border: 1px solid var(--colors-white) !important;
    text-decoration: none
}

.btn--primary-brand:visited {
    color: var(--colors-white) !important
}

.btn--primary-brand:disabled, .btn--primary-brand[disabled] {
    background-color: #e0e0e0;
    color: #fff;
    cursor: not-allowed
}

.btn--secondary:visited {
    background: var(--colors-gray-neutral-300)
}

.btn--secondary:focus {
    background: var(--colors-gray-neutral-100);
    outline: 2px solid var(--colors-base-black)
}

.btn--secondary:active {
    background: var(--colors-gray-neutral-400);
    outline: 2px solid var(--colors-base-black)
}

.btn--secondary:disabled, .btn--secondary[disabled] {
    background: var(--colors-gray-neutral-100);
    color: var(--colors-gray-neutral-400);
    border: 1px solid var(--colors-gray-neutral-200)
}

.btn--subtle, .btn--close {
    background-color: #fff0;
    color: var(--colors-text-primary);
    mix-blend-mode: multiply
}

.btn--subtle:hover, .btn--close:hover {
    background: var(--colors-gray-neutral-50)
}

.btn--subtle:visited, .btn--close:visited {
    background: var(--colors-gray-neutral-100)
}

.btn--subtle:focus, .btn--close:focus {
    background: #fff0;
    outline: 2px solid var(--colors-base-black);
    position: relative
}

.btn--subtle:focus:after, .btn--close:focus:after {
    content: "";
    display: block;
    background-color: #fff0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #fff;
    border-radius: var(--radius-sm)
}

.btn--subtle:active, .btn--close:active {
    background: var(--colors-gray-neutral-200);
    outline: none
}

.btn--subtle:active:after, .btn--close:active:after {
    display: none !important
}

.btn--subtle:disabled, .btn--subtle[disabled], .btn--close:disabled, .btn--close[disabled] {
    background: #fff0;
    color: var(--colors-gray-neutral-400)
}

.btn--transparent {
    background-color: #fff0;
    color: var(--colors-text-primary)
}

.btn--transparent:hover {
    background: #fff0;
    color: var(--colors-brand-600)
}

.btn--transparent:visited {
    color: var(--colors-brand-700)
}

.btn--transparent:focus {
    background: #fff0;
    outline: 2px solid var(--colors-base-black);
    position: relative
}

.btn--transparent:active {
    color: var(--colors-brand-800);
    outline: none
}

.btn--transparent:disabled, .btn--transparent[disabled] {
    background: #fff0;
    color: var(--colors-gray-neutral-400)
}

.btn--close {
    display: flex;
    width: 40px;
    height: 40px;
    padding: var(--spacing-md);
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-sm);
    background-color: #fff0;
    color: var(--colors-gray-neutral-500)
}

.btn--close:hover {
    background: var(--colors-gray-neutral-50);
    color: var(--colors-gray-neutral-700)
}

.btn--close:active {
    background-color: var(--colors-gray-neutral-200)
}

.btn--des-primary {
    background-color: var(--colors-error-600);
    color: var(--colors-text-white)
}

.btn--des-primary:hover {
    background: var(--colors-error-700)
}

.btn--des-primary:visited {
    background: var(--colors-error-800)
}

.btn--des-primary:focus {
    background: var(--colors-error-600);
    outline: 2px solid var(--colors-base-black);
    position: relative
}

.btn--des-primary:active {
    background: var(--colors-error-900);
    outline: none
}

.btn--des-primary:disabled, .btn--des-primary[disabled] {
    background: var(--colors-gray-neutral-100);
    color: var(--colors-gray-neutral-400)
}

.btn--des-secondary {
    background-color: var(--colors-error-50);
    color: var(--colors-error-600)
}

.btn--des-secondary:hover {
    background: var(--colors-error-100)
}

.btn--des-secondary:visited {
    background: var(--colors-error-300)
}

.btn--des-secondary:focus {
    background: var(--colors-error-50);
    outline: 2px solid var(--colors-base-black);
    position: relative
}

.btn--des-secondary:active {
    background: var(--colors-error-200);
    outline: none
}

.btn--des-secondary:disabled, .btn--des-secondary[disabled] {
    background: var(--colors-gray-neutral-100);
    color: var(--colors-gray-neutral-400);
    outline: 1px solid var(--colors-gray-neutral-200)
}

.btn--des-secondary-outline {
    outline: 1px solid var(--colors-error-400);
    background-color: #fff0;
    color: var(--colors-error-600);
    mix-blend-mode: multiply
}

.btn--des-secondary-outline:hover {
    background: var(--colors-error-50)
}

.btn--des-secondary-outline:visited {
    background: var(--colors-error-100)
}

.btn--des-secondary-outline:focus {
    background: #fff0;
    outline: 2px solid var(--colors-base-black);
    position: relative
}

.btn--des-secondary-outline:active {
    background: var(--colors-error-200);
    outline: 1px solid var(--colors-error-400)
}

.btn--des-secondary-outline:disabled, .btn--des-secondary-outline[disabled] {
    background: #fff0;
    color: var(--colors-gray-neutral-400);
    outline: 1px solid var(--colors-gray-neutral-200)
}

.btn--des-subtle {
    background-color: #fff0;
    color: var(--colors-error-600)
}

.btn--des-subtle:hover {
    background: var(--colors-error-50)
}

.btn--des-subtle:visited {
    background: var(--colors-error-100)
}

.btn--des-subtle:focus {
    background: #fff0;
    outline: 2px solid var(--colors-base-black);
    position: relative
}

.btn--des-subtle:active {
    background: var(--colors-error-200);
    outline: none
}

.btn--des-subtle:disabled, .btn--des-subtle[disabled] {
    background: #fff0;
    color: var(--colors-gray-neutral-400)
}

.btn--des-transparent {
    background-color: #fff0;
    color: var(--colors-error-600)
}

.btn--des-transparent:hover {
    background: #fff0;
    color: var(--colors-error-700)
}

.btn--des-transparent:visited {
    color: var(--colors-error-700)
}

.btn--des-transparent:focus {
    background: #fff0;
    outline: 2px solid var(--colors-base-black);
    position: relative;
    color: var(--colors-error-600)
}

.btn--des-transparent:active {
    color: var(--colors-error-800);
    outline: none
}

.btn--des-transparent:disabled, .btn--des-transparent[disabled] {
    background: #fff0;
    color: var(--colors-gray-neutral-400)
}

.btn--primary-neutral-on-color {
    background-color: var(--colors-base-white);
    color: var(--colors-text-primary)
}

.btn--primary-neutral-on-color:hover {
    background-color: hsla(var(--colors-alpha-white) / 80%)
}

.btn--primary-neutral-on-color:visited, .btn--primary-neutral-on-color.selected {
    background-color: hsla(var(--colors-alpha-white) / 70%)
}

.btn--primary-neutral-on-color:focus {
    outline-color: var(--colors-base-white)
}

.btn--primary-neutral-on-color:focus:after {
    border-color: var(--colors-base-black)
}

.btn--primary-neutral-on-color:active {
    background-color: hsla(var(--colors-alpha-white) / 60%)
}

.btn--primary-neutral-on-color:disabled, .btn--primary-neutral-on-color[disabled] {
    background-color: hsla(var(--colors-alpha-white) / 30%);
    color: hsla(var(--colors-alpha-white) / 30%)
}

.btn--primary-brand-on-color {
    background-color: var(--colors-brand-500);
    color: var(--colors-text-primary_on-brand)
}

.btn--primary-brand-on-color:hover {
    background-color: var(--colors-brand-600)
}

.btn--primary-brand-on-color:visited, .btn--primary-brand-on-color.selected {
    background-color: var(--colors-brand-700)
}

.btn--primary-brand-on-color:focus {
    outline-color: var(--colors-base-white)
}

.btn--primary-brand-on-color:focus:after {
    border-color: var(--colors-base-black)
}

.btn--primary-brand-on-color:active {
    color: var(--colors-text-brand-primary);
    background-color: var(--colors-brand-300)
}

.btn--primary-brand-on-color:disabled, .btn--primary-brand-on-color[disabled] {
    background-color: hsla(var(--colors-alpha-white) / 30%);
    color: hsla(var(--colors-alpha-white) / 30%)
}

.btn--secondary-on-color {
    background-color: hsla(var(--colors-alpha-white) / 10%);
    color: var(--colors-text-primary_on-brand)
}

.btn--secondary-on-color:hover {
    background-color: hsla(var(--colors-alpha-white) / 20%)
}

.btn--secondary-on-color:visited, .btn--secondary-on-color.selected {
    background-color: hsla(var(--colors-alpha-white) / 30%)
}

.btn--secondary-on-color:focus {
    outline-color: var(--colors-base-white)
}

.btn--secondary-on-color:focus:after {
    display: none
}

.btn--secondary-on-color:active {
    color: var(--colors-text-brand-primary);
    background-color: hsla(var(--colors-alpha-white) / 40%)
}

.btn--secondary-on-color:disabled, .btn--secondary-on-color[disabled] {
    background-color: hsla(var(--colors-alpha-white) / 30%);
    color: hsla(var(--colors-alpha-white) / 30%)
}

.btn--secondary-outline-on-color {
    outline-color: hsla(var(--colors-alpha-white) / 40%);
    color: var(--colors-text-primary_on-brand);
    mix-blend-mode: normal
}

.btn--secondary-outline-on-color:hover {
    background: hsla(var(--colors-alpha-white) / 10%)
}

.btn--secondary-outline-on-color:visited, .btn--secondary-outline-on-color.selected {
    background: hsla(var(--colors-alpha-white) / 20%);
    outline-color: hsla(var(--colors-alpha-white) / 40%)
}

.btn--secondary-outline-on-color:focus {
    background: #fff0;
    outline-color: var(--colors-base-white)
}

.btn--secondary-outline-on-color:active {
    background: hsla(var(--colors-alpha-white) / 40%);
    outline-color: hsla(var(--colors-alpha-white) / 30%)
}

.btn--secondary-outline-on-color:disabled, .btn--secondary-outline-on-color[disabled] {
    outline-color: hsla(var(--colors-alpha-white) / 30%);
    color: hsla(var(--colors-alpha-white) / 30%)
}

.btn--subtle-on-color {
    background-color: var(--colors-brand-500);
    color: var(--colors-text-primary_on-brand)
}

.btn--subtle-on-color:hover {
    background-color: var(--colors-brand-600)
}

.btn--subtle-on-color:visited, .btn--subtle-on-color.selected {
    background-color: var(--colors-brand-700)
}

.btn--subtle-on-color:focus {
    outline-color: var(--colors-base-white)
}

.btn--subtle-on-color:focus:after {
    border-color: var(--colors-base-black)
}

.btn--subtle-on-color:active {
    color: var(--colors-text-brand-primary);
    background-color: var(--colors-brand-300)
}

.btn--subtle-on-color:disabled, .btn--subtle-on-color[disabled] {
    background-color: hsla(var(--colors-alpha-white) / 30%);
    color: hsla(var(--colors-alpha-white) / 30%)
}

.btn--transparent-on-color {
    background-color: var(--colors-brand-500);
    color: var(--colors-text-primary_on-brand)
}

.btn--transparent-on-color:hover {
    background-color: var(--colors-brand-600)
}

.btn--transparent-on-color:visited, .btn--transparent-on-color.selected {
    background-color: var(--colors-brand-700)
}

.btn--transparent-on-color:focus {
    outline-color: var(--colors-base-white)
}

.btn--transparent-on-color:focus:after {
    border-color: var(--colors-base-black)
}

.btn--transparent-on-color:active {
    color: var(--colors-text-brand-primary);
    background-color: var(--colors-brand-300)
}

.btn--transparent-on-color:disabled, .btn--transparent-on-color[disabled] {
    background-color: hsla(var(--colors-alpha-white) / 30%);
    color: hsla(var(--colors-alpha-white) / 30%)
}

.badges .flex-column {
    align-items: flex-start
}

.badges .flex {
    gap: 1rem
}

.badge {
    display: inline-flex;
    height: 32px;
    padding: var(--spacing-none) var(--spacing-lg);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-xs)
}

.badge--lg {
    height: 32px
}

.badge--lg span.badge-icon {
    font-size: 18px
}

.badge--md {
    height: 24px
}

.badge--md span.badge-icon {
    font-size: 14px
}

.badge--sm {
    height: 20px
}

.badge--sm span.badge-icon {
    font-size: 10px
}

.badge--rounded {
    border-radius: var(--radius-full)
}

.badge--icon {
    padding: 0
}

.badge--icon.badge--lg {
    width: 32px;
    height: 32px
}

.badge--icon.badge--md {
    width: 24px;
    height: 24px
}

.badge--icon.badge--sm {
    width: 20px;
    height: 20px
}

.badge--gray {
    color: var(--colors-gray-neutral-700);
    background: var(--colors-gray-neutral-50);
    border: 1px solid var(--colors-gray-neutral-200)
}

.badge--gray-outlined {
    border: 1px solid var(--colors-gray-neutral-500);
    background-color: var(--colors-base-white);
    color: var(--colors-gray-neutral-700)
}

.badge--success {
    color: var(--colors-brand-700);
    background-color: var(--colors-brand-50);
    border: 1px solid var(--colors-brand-200)
}

.badge--success-outlined {
    border: 1px solid var(--colors-brand-500);
    background-color: var(--colors-base-white);
    color: var(--colors-brand-700)
}

.badge--destruct {
    color: var(--colors-error-700);
    background-color: var(--colors-error-50);
    border: 1px solid var(--colors-error-200)
}

.badge--destruct-outlined {
    border: 1px solid var(--colors-error-500);
    background-color: var(--colors-base-white);
    color: var(--colors-error-700)
}

.badge--warning {
    color: var(--colors-warning-700);
    background-color: var(--colors-warning-50);
    border: 1px solid var(--colors-warning-200)
}

.badge--warning-outlined {
    border: 1px solid var(--colors-warning-500);
    background-color: var(--colors-base-white);
    color: var(--colors-warning-700)
}

.badge--info {
    color: var(--colors-info-700);
    background-color: var(--colors-info-50);
    border: 1px solid var(--colors-info-200)
}

.badge--info-outlined {
    border: 1px solid var(--colors-info-500);
    background-color: #fff0;
    color: var(--colors-info-700)
}

.badge--purple {
    color: var(--colors-purple-700);
    background-color: var(--colors-purple-50);
    border: 1px solid var(--colors-purple-200)
}

.badge--purple-outlined {
    border: 1px solid var(--colors-purple-500);
    background-color: #fff0;
    color: var(--colors-purple-700)
}

.badge--pink {
    color: var(--colors-pink-700);
    background-color: var(--colors-pink-50);
    border: 1px solid var(--colors-pink-200)
}

.badge--pink-outlined {
    border: 1px solid var(--colors-pink-500);
    background-color: #fff0;
    color: var(--colors-pink-700)
}

.badge--orange {
    color: var(--colors-orange-700);
    background-color: var(--colors-orange-50);
    border: 1px solid var(--colors-orange-200)
}

.badge--orange-outlined {
    border: 1px solid var(--colors-orange-500);
    background-color: #fff0;
    color: var(--colors-orange-700)
}

.badge--on-color {
    color: var(--colors-base-white);
    background-color: hsl(var(--colors-alpha-white) / 30%)
}

.badge--on-color-outlined {
    border: 1px solid hsl(var(--colors-alpha-white) / 90%);
    background-color: #fff0;
    color: hsl(var(--colors-alpha-white) / 90%)
}

.accordion-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block
}

.accordion-list__item:last-child {
    border-bottom: 1px solid var(--colors-border-primary)
}

.accordion-item {
    border-top: 1px solid var(--colors-border-primary);
    z-index: 1;
    position: relative
}

.accordion-item__header:hover {
    background: var(--colors-gray-neutral-50);
    mix-blend-mode: multiply;
    outline: none
}

.accordion-item__title {
    color: var(--colors-text-primary);
    width: 100%
}

.accordion-item__arrow img {
    width: 16px;
    height: 16px
}

.accordion-item__arrow {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out
}

.accordion-item__body {
    display: flex;
    align-items: flex-start;
    padding: 0 var(--spacing-6xl) 0 var(--spacing-xl);
    gap: var(--spacing-md);
    color: var(--colors-text-secondary);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out
}

.accordion-item.focused .accordion-item__header, .accordion-item__header:focus {
    background-color: #fff0;
    outline: none
}

.accordion-item__header:active {
    background-color: var(--colors-gray-neutral-200);
    outline: none
}

.accordion-item.disabled .accordion-item__title, .accordion-item.disabled .accordion-item__arrow, .accordion-item.disabled .accordion-item__arrow path, .accordion-item.disabled .accordion-item__body {
    color: var(--colors-gray-neutral-300);
    stroke: var(--colors-gray-neutral-300)
}

.accordion-item--flush {
    width: 398px;
    -o-border-image: linear-gradient(to right, transparent 0 16px, var(--colors-border-primary) 16px 382px, transparent 382px 100%) 100% 1;
    border-image: linear-gradient(to right, transparent 0 16px, var(--colors-border-primary) 16px 382px, transparent 382px 100%) 100% 1
}

[dir="rtl"] .accordion-item .accordion-item__body {
    padding: 0 var(--spacing-xl) 0 var(--spacing-6xl)
}

[dir="rtl"] .accordion-item--icon-leading .accordion-item__body {
    padding: 0 var(--spacing-6xl) 0 var(--spacing-none)
}

[dir="rtl"] .accordion-item.active .accordion-item__body {
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-3xl) var(--spacing-6xl)
}

[dir="rtl"] .accordion-item--icon-leading.active .accordion-item__body {
    padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-none)
}

.featured-icon--xl span {
    font-size: 28px
}

.featured-icon--lg span {
    font-size: 24px
}

.featured-icon--md span {
    font-size: 20px
}

.featured-icon--sm span {
    font-size: 16px
}

.featured-icon--hard-brand {
    color: var(--colors-base-white);
    background-color: var(--colors-brand-600)
}

.featured-icon--hard-success {
    color: var(--colors-base-white);
    background-color: var(--colors-brand-600)
}

.featured-icon--light-brand {
    color: var(--colors-brand-600);
    background-color: var(--colors-brand-50)
}

.featured-icon--light-error {
    color: var(--colors-error-600);
    background-color: var(--colors-error-50)
}

.featured-icon--light-warning {
    color: var(--colors-warning-600);
    background-color: var(--colors-warning-50)
}

.featured-icon--light-success {
    color: var(--colors-brand-600);
    background-color: var(--colors-brand-50)
}

.featured-icon--outlined-brand {
    border: 1px solid var(--colors-brand-200);
    color: var(--colors-brand-600);
    background-color: #fff0
}

.featured-icon--outlined-error {
    border: 1px solid var(--colors-error-200);
    color: var(--colors-error-600);
    background-color: #fff0
}

.featured-icon--outlined-warning {
    border: 1px solid var(--colors-warning-200);
    color: var(--colors-warning-600);
    background-color: #fff0
}

.featured-icon--outlined-success {
    border: 1px solid var(--colors-brand-200);
    color: var(--colors-brand-600);
    background-color: #fff0
}

.notification-toast {
    display: flex;
    width: 484px;
    padding: var(--spacing-xl) var(--spacing-3xl);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xl);
    border-radius: var(--radius-md, 8px);
    background: var(--colors-base-white);
    position: relative;
    overflow: hidden
}

@media only screen and(max-width: 37.5em) {
    .notification-toast__action {
        display: none
    }

    .notification-toast__action-mobile {
        display: flex
    }

    .notification-toast {
        width: 100%;
        padding: var(--spacing-xl)
    }

    .notification-toast:after {
        width: 100%;
        height: 8px
    }

    .notification-toast__header {
        flex-direction: column;
        gap: var(--spacing-xl)
    }
}

.notification-toast--neutral:after {
    background-color: var(--colors-base-white)
}

.notification-toast--info:after {
    background-color: var(--colors-info-400)
}

.notification-toast--error:after {
    background-color: var(--colors-error-400)
}

.notification-toast--warning:after {
    background-color: var(--colors-warning-400)
}

.notification-toast--success:after {
    background-color: var(--colors-success-400)
}

[dir="rtl"] .notification-toast__close-btn {
    right: auto;
    left: calc(var(--spacing-3xl))
}

@media only screen and(max-width: 37.5em) {
    [dir="rtl"] .notification-toast__close-btn {
        right: auto;
        left: var(--spacing-xl)
    }
}

.alert {
    display: flex;
    width: 100%;
    padding: var(--spacing-xl) var(--spacing-3xl);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xl);
    border-radius: var(--radius-md);
    background: var(--colors-base-white);
    border: 1px solid var(--colors-gray-neutral-300);
    position: relative;
    overflow: hidden
}

.alert--neutral:after {
    background-color: var(--colors-base-white)
}

.alert--info:after {
    background-color: var(--colors-info-400)
}

.alert--error:after {
    background-color: var(--colors-error-400)
}

.alert--warning:after {
    background-color: var(--colors-warning-400)
}

.alert--success:after {
    background-color: var(--colors-success-400)
}

.alert--neutral-bg {
    background-color: var(--colors-gray-neutral-25);
    border-color: var(--colors-gray-neutral-300)
}

.alert--neutral-bg:after {
    background-color: var(--colors-gray-neutral-25)
}

.alert--info-bg {
    background-color: var(--colors-info-25);
    border-color: var(--colors-info-300)
}

.alert--error-bg {
    background-color: var(--colors-error-25);
    border-color: var(--colors-error-300)
}

.alert--warning-bg {
    background-color: var(--colors-warning-25);
    border-color: var(--colors-warning-300)
}

.alert--success-bg {
    background-color: var(--colors-success-25);
    border-color: var(--colors-success-300)
}

[dir="rtl"] .alert__close-btn {
    right: auto;
    left: var(--spacing-3xl)
}

@media only screen and(max-width: 37.5em) {
    [dir="rtl"] .alert__close-btn {
        right: auto;
        left: var(--spacing-xl)
    }
}

.input {
    display: inline-flex;
    height: 40px;
    min-width: 200px;
    justify-content: flex-start;
    padding: var(--spacing-none) var(--spacing-xl);
    border-radius: var(--radius-sm);
    gap: var(--spacing-xs);
    border: 1px solid var(--colors-gray-neutral-400);
    background: var(--colors-base-white);
    position: relative
}

.input:hover {
    border-color: var(--colors-gray-neutral-700)
}

.input:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    transform: translate(-50%);
    background-color: var(--colors-gray-neutral-950);
    transition: width 0.2s ease-in-out
}

form .input__field {
    background-color: #fff0;
    border: 0;
    outline: 0;
    height: 100%;
    width: 100%;
    color: var(--colors-text-primary);
    padding: 0
}

.input__field:focus, .input__field:focus-visible {
    box-shadow: none;
    border: 1px solid var(--colors-gray-400);
    outline: none;
    border-bottom: 2px solid var(--colors-gray-950) !important
}

.input__field::-moz-placeholder {
    color: var(--colors-text-placeholder)
}

.input__field::placeholder {
    color: var(--colors-text-placeholder)
}

.input--readonly, .input--readonly:hover, .input--disabled, .input--disabled:hover {
    border-color: var(--colors-gray-neutral-300);
    box-shadow: none !important
}

.input--readonly .input__field::-moz-placeholder, .input--disabled .input__field::-moz-placeholder {
    color: var(--colors-text-primary)
}

.input--readonly .input__field, .input--readonly .input__field::placeholder, .input--disabled .input__field, .input--disabled .input__field::placeholder {
    color: var(--colors-text-primary)
}

.input--disabled .input__field::-moz-placeholder {
    color: var(--colors-gray-neutral-300)
}

.input--disabled .input__field, .input--disabled .input__field::placeholder {
    color: var(--colors-gray-neutral-300)
}

.input--disabled .input__icon span, .input--disabled .input__prefix--subtle-text, .input--disabled .input__prefix--solid-text {
    color: var(--colors-gray-neutral-300)
}

.input__icon span {
    color: var(--colors-gray-neutral-700);
    font-size: 20px
}

.input__feedback-icon--success {
    color: var(--colors-brand-600)
}

.input__feedback-icon--error {
    color: var(--colors-error-600)
}

.input__feedback-icon--error span:after {
    background-color: var(--colors-error-100)
}

.input__feedback-icon--warning {
    color: var(--colors-warning-600)
}

.input__feedback-icon--warning-triangle {
    color: var(--colors-warning-600)
}

.input__prefix, .input__suffix {
    display: inline-flex;
    height: 100%;
    padding: var(--spacing-xxs) var(--spacing-xl);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    mix-blend-mode: multiply;
    margin-left: calc(-1 * var(--spacing-xl));
    border: 0
}

.input__prefix.selected, .input__suffix.selected {
    background-color: var(--colors-gray-neutral-700)
}

.input__suffix {
    margin-right: calc(-1 * var(--spacing-xl));
    margin-left: var(--spacing-xl);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0
}

.input--lighter {
    border: 0
}

.input--lighter:hover {
    border: 1px solid var(--colors-gray-neutral-400)
}

.input--lighter.focus {
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-base-white)
}

.input--lighter.active {
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-gray-neutral-100)
}

.input--darker {
    border: 0;
    background-color: var(--colors-gray-neutral-50)
}

.input--darker:hover {
    border: 1px solid var(--colors-gray-neutral-400)
}

.input--darker.focus {
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-base-white)
}

.input--darker.active {
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-gray-neutral-100)
}

.input--error, .input--error:hover {
    outline-color: var(--colors-error-600)
}

.input--error:after {
    background-color: var(--colors-error-600)
}

.link {
    display: inline-flex;
    padding: var(--spacing-none);
    align-items: center;
    gap: 4px;
    border-radius: var(--radius-xs)
}

.link__icon {
    display: inline-flex;
    height: 100%
}

.link:hover:not(.link--disabled).link__label {
    text-decoration: underline
}

.link--inline .link__label {
    text-decoration: underline
}

.link, .link--brand {
    color: var(--colors-brand-600)
}

.link.active, .link--brand.active {
    color: var(--colors-brand-800)
}

.link:focus, .link--brand:focus, .btn-digital-stamp-card span:focus {
    color: var(--colors-brand-600);
    outline: 2px solid var(--colors-base-black);
    border-radius: var(--radius-xs)
}

.link:active, .btn-digital-stamp-card span:active {
    color: #88d8ad !important
}

.link--disabled, .link--disabled:hover {
    color: var(--colors-gray-neutral-400)
}

.link--md .link__icon {
    font-size: 20px !important
}

.link--sm .link__icon {
    font-size: 16px !important
}

.dropdown {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    position: relative;
    border-radius: var(--radius-sm)
}

.dropdown__label--selection {
    color: var(--colors-text-primary);
    display: inline-block
}

.dropdown__chevron {
    position: absolute;
    top: 50%;
    right: var(--spacing-xl);
    transform: translateY(-50%);
    color: var(--colors-gray-neutral-700);
    transition: all 0.4s ease-in-out
}

.dropdown__btn {
    cursor: pointer;
    height: auto;
    min-height: 40px;
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-base-white);
    padding: var(--spacing-none) var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    color: var(--colors-text-placeholder)
}

.dropdown__btn:hover {
    border-color: var(--colors-gray-neutral-700)
}

.dropdown__btn:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    transform: translate(-50%);
    background-color: var(--colors-gray-neutral-950);
    transition: width 0.2s ease-in-out
}

.dropdown--readonly .dropdown__btn, .dropdown--readonly .dropdown__label, .dropdown--readonly .dropdown__label-placeholder, .dropdown--disabled .dropdown__btn, .dropdown--disabled .dropdown__label, .dropdown--disabled .dropdown__label-placeholder {
    color: var(--colors-text-primary)
}

.dropdown__list, .textarea__dropdown-list, .input__dropdown-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    overflow-y: auto;
    list-style: none;
    height: auto;
    max-height: 0;
    padding-block: 0;
    z-index: -2;
    opacity: 0;
    overflow: hidden;
    transition: z-index 0.1s ease-in-out, padding-block 0.1s ease-in-out, max-height 0.2s 0.01s ease-in-out;
    pointer-events: none;
    display: flex;
    padding: var(--spacing-md);
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--radius-sm);
    border: 1px solid var(--colors-border-primary);
    background: var(--colors-base-white)
}

.dropdown__list::-webkit-scrollbar, .textarea__dropdown-list::-webkit-scrollbar, .input__dropdown-list::-webkit-scrollbar {
    height: 100px;
    width: calc(8px + 2 * var(--spacing-xs))
}

.dropdown__list::-webkit-scrollbar-track, .textarea__dropdown-list::-webkit-scrollbar-track, .input__dropdown-list::-webkit-scrollbar-track {
    background-color: #fff0;
    padding: var(--spacing-xs)
}

.dropdown__list::-webkit-scrollbar-thumb, .textarea__dropdown-list::-webkit-scrollbar-thumb, .input__dropdown-list::-webkit-scrollbar-thumb {
    height: 100px;
    border-radius: var(--radius-full);
    border: var(--spacing-xs) solid #fff0;
    background-color: var(--colors-gray-neutral-300);
    background-clip: content-box;
    mix-blend-mode: multiply
}

.dropdown__list li, .textarea__dropdown-list li, .input__dropdown-list li {
    width: 100%;
    padding: 0;
    margin: 0
}

.dropdown__btn.open + .dropdown__list, .dropdown__btn.open + .textarea__dropdown-list, .dropdown__btn.open + .input__dropdown-list {
    z-index: 2;
    opacity: 1;
    padding-block: var(--spacing-md);
    max-height: 376px;
    pointer-events: auto;
    overflow-y: auto
}

.dropdown__option {
    cursor: pointer;
    position: relative;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    display: flex;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
    border-radius: var(--radius-sm);
    background-color: #fff0;
    border: 0;
    margin: 0
}

.dropdown__option-label {
    color: var(--colors-text-primary)
}

.dropdown__option:hover {
    background-color: var(--colors-gray-neutral-100)
}

.dropdown__option:focus {
    outline: 2px solid var(--colors-base-black)
}

.dropdown__option.active {
    outline: none;
    background-color: var(--colors-gray-neutral-200)
}

.dropdown__option--checkbox .dropdown__option-icon {
    display: none !important;
    color: var(--colors-base-white);
    font-size: 18px !important;
    font-weight: bolder !important
}

.dropdown__option--checkbox.selected > .dropdown__option-icon-container {
    background-color: var(--colors-gray-neutral-950)
}

.dropdown__option--checkbox.selected > .dropdown__option-icon-container > .dropdown__option-icon {
    opacity: 1;
    display: inline-block !important;
    color: var(--colors-base-white) !important
}

.dropdown--error .dropdown__btn {
    border-color: var(--colors-error-600)
}

.dropdown--error .dropdown__btn:after {
    background-color: var(--colors-error-600)
}

.dropdown__feedback-icon--success {
    color: var(--colors-brand-600)
}

.dropdown__feedback-icon--error {
    color: var(--colors-error-600)
}

.dropdown__feedback-icon--error span:after {
    background-color: var(--colors-error-100)
}

.dropdown__feedback-icon--warning {
    color: var(--colors-warning-600)
}

.dropdown__feedback-icon--warning span:after {
    background-color: var(--colors-warning-100)
}

.dropdown--lighter .dropdown__btn:hover {
    border: 1px solid var(--colors-gray-neutral-400)
}

.dropdown--lighter .dropdown__btn.open {
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-base-white)
}

.dropdown--lighter .dropdown__btn.active {
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-gray-neutral-100)
}

.dropdown--darker .dropdown__btn {
    border: 0;
    background-color: var(--colors-gray-neutral-50)
}

.dropdown--darker .dropdown__btn:hover {
    border: 1px solid var(--colors-gray-neutral-400)
}

.dropdown--darker .dropdown__btn.open {
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-base-white)
}

.dropdown--darker .dropdown__btn.active {
    border: 1px solid var(--colors-gray-neutral-400);
    background-color: var(--colors-gray-neutral-100)
}

.dropdown--lg .dropdown__list, .dropdown--lg .textarea__dropdown-list, .dropdown--lg .input__dropdown-list {
    top: 40px
}

.dropdown--md .dropdown__list, .dropdown--md .textarea__dropdown-list, .dropdown--md .input__dropdown-list {
    top: 32px
}

.modal {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 600px;
    padding: var(--spacing-3xl);
    background-color: var(--colors-base-white);
    border-radius: var(--radius-md)
}

@media only screen and(max-width: 56.25em) {
    .modal {
        width: 100%
    }
}

.modal__header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.modal__body {
    width: 100%
}

.modal__heading {
    color: var(--colors-text-primary)
}

.modal__content {
    color: var(--colors-text-tertiary);
    padding-bottom: var(--spacing-xl)
}

.modal__actions {
    width: 100%
}

.modal__actions .btn {
    margin: 0
}

.modal__actions, .modal__actions-btn-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

@media only screen and(max-width: 56.25em) {
    .modal__actions, .modal__actions-btn-group {
        flex-direction: column-reverse;
        width: 100%
    }

    .modal__actions .btn, .modal__actions-btn-group .btn, .modal__actions-btn {
        width: 100%
    }
}

.modal__actions > .modal__actions-btn:first-child {
    display: flex
}

@media only screen and(max-width: 56.25em) {
    .modal__actions > .modal__actions-btn:first-child {
        display: none
    }
}

.modal__actions > .modal__actions-btn:nth-child(2) {
    display: none
}

@media only screen and(max-width: 56.25em) {
    .modal__actions > .modal__actions-btn:nth-child(2) {
        display: flex
    }
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--size-4, 4px);
    color: var(--colors-gray-neutral-950);
    cursor: pointer
}

.breadcrumb-item.active {
    color: var(--colors-gray-neutral-400)
}

.breadcrumb-item:first-child {
    padding-right: var(--size-4, 4px)
}

.breadcrumb-item:not(:first-child) {
    display: flex;
    align-items: center;
    gap: 8px
}

.breadcrumb-icon {
    color: var(--colors-gray-neutral-400);
    width: 16px;
    height: 16px;
    font-size: 20px;
    display: flex;
    align-items: center
}

[dir="rtl"] .breadcrumb-item:first-child {
    padding-right: 0;
    padding-left: 4px
}

[dir="rtl"] .breadcrumb-icon {
    transform: rotate(180deg)
}

.pagination__item--active:after {
    content: "";
    width: calc(100% - 8px);
    height: 3px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -1px;
    border-radius: var(--radius-full, 9999px);
    background: var(--Colors-SA-Flag-600, #1b8354)
}

.pagination--meduim .pagination__item button {
    width: 32px;
    height: 32px
}

div.table-wrapper {
    width: max-content
}

div.table-wrapper .azm-table tr.row-divider:not(:last-child) {
    border-bottom: 1px solid var(--colors-gray-neutral-300)
}

div.table-wrapper .azm-table thead {
    border-bottom: 1px solid var(--colors-gray-neutral-300);
    border-top: 1px solid var(--colors-gray-neutral-300);
    background: var(--Colors-Gray-neutral-100, #f3f4f6)
}

div.table-wrapper .azm-table thead th:first-child {
    width: 20px
}

div.table-wrapper .azm-table thead th {
    height: 48px;
    border-right: 1px solid var(--colors-gray-neutral-300);
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px)
}

div.table-wrapper .azm-table thead th span span.text {
    color: var(--colors-gray-neutral-600)
}

div.table-wrapper .azm-table thead th span span.icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center
}

div.table-wrapper .azm-table thead th span span.icon-wrapper .material-icons-outlined {
    cursor: pointer;
    margin-inline: 3px;
    background-color: var(--colors-gray-modern-950);
    border-radius: 4px;
    color: #fff
}

div.table-wrapper .azm-table thead th span span.icon-wrapper .material-icons-outlined:hover {
    transition: all 0.2s ease-in-out;
    background-color: var(--colors-gray-neutral-600)
}

div.table-wrapper .azm-table thead th span span.icon-wrapper .material-icons-outlined:active {
    transition: all 0.2s ease-in-out;
    background-color: var(--colors-gray-neutral-500)
}

div.table-wrapper .azm-table thead th span span.icon-wrapper .material-icons-outlined:visited, div.table-wrapper .azm-table thead th span span.icon-wrapper .material-icons-outlined:focus {
    transition: all 0.2s ease-in-out;
    border-radius: var(--radius-4, 4px);
    border: 2px solid var(--colors-base-black);
    background: var(--Colors-Gray-neutral-950, #0d121c)
}

div.table-wrapper .azm-table tbody tr.alternate:nth-child(odd):not(div.table-wrapper .azm-table tbody tr:hover,div.table-wrapper .azm-table tbody tr.row-selected) {
    transition: all 0.2s ease-in-out;
    background-color: #fff
}

div.table-wrapper .azm-table tbody td:first-child {
    width: 20px
}

.table-contained {
    /*overflow: hidden;*/
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--colors-gray-neutral-300);
    padding: 0
}

[dir="rtl"] .azm-table {
    direction: rtl
}

[dir="ltr"] .azm-table {
    direction: ltr
}

.rating {
    display: inline-flex;
    position: relative;
    font-size: 1.5rem;
    color: #faaf00;
    cursor: pointer;
    text-align: left;
    width: min-content;
    -webkit-tap-highlight-color: #fff0
}

.header-nav__main {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl)
}

.header-menu__item:hover:after, .search-trigger.search-main--hover:after {
    content: "";
    display: block;
    width: calc(100% - var(--spacing-md) * 2);
    height: 8px;
    border-radius: var(--radius-full);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    background-color: var(--colors-fg-quinary-400)
}

.header-menu__item:hover .header-menu__item-label, .header-menu__item:hover .header-menu__item-icon, .header-menu__item:hover .header-menu__item-arrow, .header-menu__item:active .header-menu__item-label, .header-menu__item:active .header-menu__item-icon, .header-menu__item:active .header-menu__item-arrow {
    color: var(--colors-text-primary);
    text-decoration: none;
    outline: none
}

.header-nav__actions .search-trigger.search-main--hover:active {
    background: var(--colors-gray-neutral-200)
}

.header-nav__actions .search-trigger.search-main--hover {
    background: var(--colors-gray-neutral-100);
    text-decoration: none;
    outline: none
}

.header-menu__item:hover {
    background: var(--colors-gray-neutral-100);
    text-decoration: none;
    outline: none
}

.header-menu__item:active {
    text-decoration: none;
    outline: none
}


.header-menu__item-label, .header-menu__item-icon, .header-menu__item-arrow {
    color: var(--colors-text-secondary)
}

.header-menu__item-icon, .header-menu__item-arrow {
    color: var(--colors-text-secondary);
    display: flex;
    align-items: center
}

.header-menu__item--active:hover, .header-menu__item--active:focus, .header-menu__item--active:active {
    position: relative;
    background: var(--button-background-primary-default);
    outline: 0
}

.header-menu__item.header-menu__item--selected,.header-menu__item.header-menu__item--selected .header-menu__item-label, .header-menu__item.search-trigger.search-main--selected, .header-menu__item.search-trigger.search-main--selected .header-menu__item-label, .header-menu__item.contact-trigger.contactus-main--selected, .header-menu__item.contact-trigger.contactus-main--selected .header-menu__item-label, .contactus-main.header-menu__item.contact-trigger.header-menu__item--selected .header-menu__item-label, .search-main.header-menu__item.search-trigger.header-menu__item--selected .header-menu__item-label {
    background: var(--colors-brand-600);
    color: var(--colors-base-white)
}

.header-menu__item--selected.header-menu__item:hover .header-menu__item-label, .search-main--selected.search-main--hover.header-menu__item:hover .header-menu__item-label, .header-menu__item.header-menu__item--selected:hover, .header-menu__item.search-trigger.search-main--selected:hover, .header-menu__item.contact-trigger.contactus-main--selected:hover {
    background: var(--colors-brand-700);
    color: var(--colors-base-white)
}

.header-menu__item--selected.header-menu__item:active .header-menu__item-label, .search-main--selected.search-main--hover.header-menu__item:active .header-menu__item-label, .header-menu__item.header-menu__item--selected:active, .header-menu__item.search-trigger.search-main--selected:active, .header-menu__item.contact-trigger.contactus-main--selected:active, .header-nav__actions .search-main.header-menu__item.header-menu__item--selected:active {
    background: var(--colors-brand-900);
    color: var(--colors-base-white)
}

.header-menu__item-label {
    background: transparent !important;
}

.header-menu__item.header-menu__item--selected:after, .header-menu__item.header-menu__item--selected:hover:after, .header-menu__item.header-menu__item--selected:active:after, .header-menu__item.search-trigger.search-main--selected:after, .header-menu__item.search-trigger.search-main--selected:hover:after, .header-menu__item.search-trigger.search-main--selected:active:after, .header-menu__item.contact-trigger.contactus-main--selected:after, .header-menu__item.contact-trigger.contactus-main--selected:hover:after, .header-menu__item.contact-trigger.contactus-main--selected:active:after {
    background: var(--colors-brand-400);
    display: block ! Important;
    left: var(--spacing-md) var(--spacing-lg);
    transform: none;
    content: "";
    display: block;
    height: 8px;
    border-radius: var(--radius-full);
    position: absolute;
    bottom: 0
}

.header-menu__item--active .header-menu__item-label, .header-menu__item--active .header-menu__item-icon, .header-menu__item--active .header-menu__item-arrow, .header-menu__item--active:hover .header-menu__item-label, .header-menu__item--active:hover .header-menu__item-icon, .header-menu__item--active:hover .header-menu__item-arrow, .header-menu__item--active:focus .header-menu__item-label, .header-menu__item--active:focus .header-menu__item-icon, .header-menu__item--active:focus .header-menu__item-arrow, .header-menu__item--active:active .header-menu__item-label, .header-menu__item--active:active .header-menu__item-icon, .header-menu__item--active:active .header-menu__item-arrow {
    color: var(--colors-text-primary_on-brand)
}

.header-menu__item--active:after, .header-menu__item--active:hover:after, .header-menu__item--active:focus:after, .header-menu__item--active:active:after {
    content: "";
    display: block;
    width: calc(100% - var(--spacing-md) * 2);
    height: 8px;
    border-radius: var(--radius-full);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    background-color: var(--colors-brand-400)
}

.header-menu__item--active.header-menu__item--disabled:after {
    content: "";
    display: block !important;
    width: calc(100% - var(--spacing-md) * 2);
    height: 8px;
    border-radius: var(--radius-full);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    background-color: var(--colors-gray-neutral-300)
}

.header-menu__item--disabled .header-menu__item-label, .header-menu__item--disabled .header-menu__item-icon, .header-menu__item--disabled .header-menu__item-arrow, .header-menu__item--disabled:hover .header-menu__item-label, .header-menu__item--disabled:hover .header-menu__item-icon, .header-menu__item--disabled:hover .header-menu__item-arrow, .header-menu__item--disabled:focus .header-menu__item-label, .header-menu__item--disabled:focus .header-menu__item-icon, .header-menu__item--disabled:focus .header-menu__item-arrow, .header-menu__item--disabled:active .header-menu__item-label, .header-menu__item--disabled:active .header-menu__item-icon, .header-menu__item--disabled:active .header-menu__item-arrow {
    color: var(--colors-gray-neutral-300)
}

.header__sub-menu--bg-brand {
    background-color: var(--colors-brand-900)
}

.sub-menu__column-title {
    color: var(--colors-text-brand-secondary)
}

.sub-menu__link:hover, .sub-menu__link:focus, .sub-menu__link:active {
    background-color: var(--colors-gray-neutral-50)
}

.sub-menu__link:active {
    background-color: var(--colors-gray-neutral-200);
    outline: none
}

.sub-menu__link-icon {
    color: var(--colors-brand-600)
}

.sub-menu__link-icon--bg {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--colors-brand-100);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg)
}

.sub-menu__link-label {
    color: var(--colors-text-primary)
}

.sub-menu__link-helper {
    color: var(--colors-text-tertiary)
}

.sub-menu__link--on-color.sub-menu__link:hover, .sub-menu__link--on-color.sub-menu__link:focus, .sub-menu__link--on-color.sub-menu__link:active {
    background-color: hsla(var(--colors-alpha-white) / 10%)
}

.sub-menu__link--on-color.sub-menu__link:active {
    background-color: hsla(var(--colors-alpha-white) / 40%);
    outline: none
}

.sub-menu__link--on-color .sub-menu__link-icon {
    color: var(--colors-brand-400)
}

.sub-menu__link--on-color .sub-menu__link-icon--bg {
    background-color: var(--colors-brand-800)
}

.sub-menu__link--on-color .sub-menu__link-label {
    color: var(--colors-text-primary_on-brand)
}

.sub-menu__link--on-color .sub-menu__link-helper {
    color: hsla(var(--colors-alpha-white) / 70%)
}

.next-nav-btn:hover .next-text, .next-nav-btn:hover .next-icon, .previous-nav-btn:hover .previous-text, .previous-nav-btn:hover .previous-icon {
    color: var(--colors-brand-600)
}

.table-of-content {
    width: 100%;
    padding: var(--container-padding-desktop) var(--spacing-none);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
    height: 100vh;
    display: grid;
    place-content: start start
}

.table-of-content__tab-sublist .table-of-content__tab:before {
    content: "";
    width: 2px;
    height: 100%;
    background-color: var(--colors-gray-neutral-300);
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 0
}

.table-of-content__tab-sub-sublist .table-of-content__tab:before {
    content: "";
    width: 2px;
    height: 100%;
    background-color: var(--colors-gray-neutral-300);
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 0
}

.table-of-content__tab-sub-sublist .table-of-content__tab:after {
    content: "";
    width: 2px;
    height: 100%;
    background-color: var(--colors-gray-neutral-300);
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 0
}

.table-of-content__tab-label {
    padding-block: var(--spacing-sm);
    flex: 1;
    color: var(--colors-text-secondary)
}

.table-of-content__tab-prefix {
    display: block;
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--colors-brand-600);
    width: 3px;
    position: absolute;
    inset-inline: 0;
    top: 0
}

.table-of-content__tab:hover .table-of-content__tab-prefix {
    display: block;
    background-color: var(--colors-fg-quinary-400)
}

.table-of-content__tab:hover .table-of-content__tab-label {
    color: var(--colors-text-primary)
}

.table-of-content__tab:hover {
    background-color: var(--colors-gray-neutral-100)
}

.table-of-content__tab:hover:after, .table-of-content__tab:hover:before {
    display: none
}

.table-of-content__tab:focus .table-of-content__tab-label {
    color: var(--colors-text-primary)
}

.table-of-content__tab:focus {
    outline: 2px solid var(--colors-base-black);
    background-color: #fff0
}

.table-of-content__tab.selected, .table-of-content__tab.active {
    color: var(--colors-text-primary)
}

.table-of-content__tab.selected .table-of-content__tab-prefix, .table-of-content__tab.active .table-of-content__tab-prefix {
    display: block;
    background-color: var(--colors-brand-600)
}

.table-of-content__tab.pressed .table-of-content__tab-prefix {
    display: block;
    background-color: var(--colors-fg-tertiary-600)
}

.table-of-content__tab.pressed .table-of-content__tab-label {
    color: var(--colors-text-primary)
}

.table-of-content__tab.pressed {
    outline: none;
    background-color: var(--colors-gray-neutral-300)
}

.table-of-content__tab.pressed:after, .table-of-content__tab.pressed:before {
    display: none
}

@media only screen and(min-width: 56.25em) {
    main {
        padding-left: calc(224px + var(--spacing-xl) + var(--spacing-xl) + 8px + 2 * var(--spacing-xs))
    }
}

@media only screen and(min-width: 112.5em) {
    html {
        font-size: 62.5%
    }
}

@media only screen and(max-width: 84em) {
    html {
        font-size: 60%
    }
}

@media only screen and(max-width: 75em) {
    html {
        font-size: 58%
    }
}

@media only screen and(max-width: 56.25em) {
    html {
        font-size: 55%
    }
}

@media only screen and(max-width: 37.5em) {
    html {
        font-size: 50%
    }
}

.breadcrumb-item .link__label {
    white-space: nowrap
}

.display-2xl-regular {
    font: 400 7.2rem/9rem IBMPlexSans-Regular
}

.display-xl-regular {
    font: 400 6rem/7.2rem IBMPlexSans-Regular
}

.display-lg-regular {
    font: 400 4.8rem/6rem IBMPlexSans-Regular
}

.display-md-regular {
    font: 400 3.6rem/4.4rem IBMPlexSans-Regular
}

.display-sm-regular {
    font: 400 3rem/3.8rem IBMPlexSans-Regular
}

.display-xs-regular {
    font: 400 2.4rem/3.2rem IBMPlexSans-Regular
}

.text-xl-regular {
    font: 400 2rem/3rem IBMPlexSans-Regular
}

.text-lg-regular {
    font: 400 1.8rem/2.8rem IBMPlexSans-Regular
}

.input__field::-moz-placeholder, .textarea__field::-moz-placeholder {
    font: 400 1.6rem/2.4rem IBMPlexSans-Regular
}

.text-md-regular, .accordion-item__body, .input__field, .input__field::placeholder, .input__prefix-label, .input__prefix-icon, .input__prefix-chevron, .input__suffix-label, .input__suffix-icon, .input__suffix-chevron, .input--lg .input__prefix-label, .input--lg .input__suffix-label, .link, .link--md, .dropdown__label, .dropdown__btn, .dropdown--lg .dropdown__label, .dropdown--lg .dropdown__label-placeholder, .dropdown--lg .dropdown__option-label, div.table-wrapper .azm-table tbody td {
    font: 400 1.6rem/2.4rem IBMPlexSans-Regular
}

.input--lg .input__field::-moz-placeholder, .input--md .input__field::-moz-placeholder, .textarea--lg .textarea__field::-moz-placeholder {
    font: 400 1.4rem/2rem IBMPlexSans-Regular
}

.text-sm-regular, .input__prefix .dropdown__label--selection, .input__suffix .dropdown__label--selection, .input--lg .input__field, .input--lg .input__field::placeholder, .input--md .input__field, .input--md .input__field::placeholder, .input--md .input__prefix-label, .input--md .input__suffix-label, .link--sm, .dropdown__option-label, .dropdown--md .dropdown__label, .dropdown--md .dropdown__label-placeholder, .dropdown--md .dropdown__option-label, .modal__content, .tabs-list__label, .dga-form-control > .dga-label, .textarea--lg .textarea__field, .textarea--lg .textarea__field::placeholder, .sub-menu__link-helper, .sidepanel__menu-tab, .sidepanel__submenu-tab, .sidepanel__submenu--sublevel .sidepanel__submenu-tab-label, .table-of-content__tab-label {
    font: 400 1.4rem/2rem IBMPlexSans-Regular
}

.text-xs-regular {
    font: 400 1.2rem/1.8rem IBMPlexSans-Regular
}

.text-2xs-regular {
    font: 400 1rem/1.4rem IBMPlexSans-Regular
}

.display-2xl-medium {
    font: 500 7.2rem/9rem IBMPlexSans-Medium
}

.display-xl-medium {
    font: 500 6rem/7.2rem IBMPlexSans-Medium
}

.display-lg-medium {
    font: 500 4.8rem/6rem IBMPlexSans-Medium
}

.display-md-medium {
    font: 500 3.6rem/4.4rem IBMPlexSans-Medium
}

.display-sm-medium {
    font: 500 3rem/3.8rem IBMPlexSans-Regular
}

.display-xs-medium {
    font: 500 2.4rem/3.2rem IBMPlexSans-Medium
}

.text-xl-medium {
    font: 500 2rem/3rem IBMPlexSans-Medium
}

.text-lg-medium {
    font: 500 1.8rem/2.8rem IBMPlexSans-Medium
}

.text-md-medium, .btn--lg, .badge, .badge--lg, .header-menu__item-label, .header-menu__item-icon, .header-menu__item-arrow {
    font: 500 1.6rem/2.4rem IBMPlexSans-Medium
}

.text-sm-medium, .btn--md, .tabs-list__item--active .tabs-list__label {
    font: 500 1.4rem/2rem IBMPlexSans-Medium
}

.text-xs-medium, .btn--sm, .badge--md, div.table-wrapper .azm-table thead th span span.text {
    font: 500 1.2rem/1.8rem IBMPlexSans-Medium
}

.text-2xs-medium {
    font: 500 1rem/1.4rem IBMPlexSans-Medium
}

.display-2xl-semibold {
    font: 600 7.2rem/9rem IBMPlexSans-SemiBold
}

.display-xl-semibold {
    font: 600 6rem/7.2rem IBMPlexSans-SemiBold
}

.display-lg-semibold {
    font: 600 4.8rem/6rem IBMPlexSans-SemiBold
}

.display-md-semibold {
    font: 600 3.6rem/4.4rem IBMPlexSans-SemiBold
}

.display-sm-semibold {
    font: 600 3rem/3.8rem IBMPlexSans-SemiBold
}

.display-xs-semibold {
    font: 600 2.4rem/3.2rem IBMPlexSans-SemiBold
}

.text-xl-semibold {
    font: 600 2rem/3rem IBMPlexSans-SemiBold
}

.text-lg-semibold, .modal__heading, .footer__nav-links-column-title {
    font: 600 1.8rem/2.8rem IBMPlexSans-SemiBold
}

.text-md-semibold, .accordion-item__title, .header-menu__item--active .header-menu__item-icon, .header-menu__item--active .header-menu__item-arrow, .header-menu__item--active:hover .header-menu__item-icon, .header-menu__item--active:hover .header-menu__item-arrow, .header-menu__item--active:focus .header-menu__item-label, .header-menu__item--active:focus .header-menu__item-icon, .header-menu__item--active:focus .header-menu__item-arrow, .header-menu__item--active:active .header-menu__item-icon, .header-menu__item--active:active .header-menu__item-arrow, .header-menu__item--disabled .header-menu__item-label, .header-menu__item--disabled .header-menu__item-icon, .header-menu__item--disabled .header-menu__item-arrow, .header-menu__item--disabled:hover .header-menu__item-label, .header-menu__item--disabled:hover .header-menu__item-icon, .header-menu__item--disabled:hover .header-menu__item-arrow, .header-menu__item--disabled:focus .header-menu__item-label, .header-menu__item--disabled:focus .header-menu__item-icon, .header-menu__item--disabled:focus .header-menu__item-arrow, .header-menu__item--disabled:active .header-menu__item-label, .header-menu__item--disabled:active .header-menu__item-icon, .header-menu__item--disabled:active .header-menu__item-arrow, .sub-menu__link-label {
    font: 600 1.6rem/2.4rem IBMPlexSans-SemiBold
}

.text-sm-semibold, .dropdown__list-group-label, .sidepanel__menu-tab-label, .sidepanel__submenu-tab-label, .table-of-content__tab.selected .table-of-content__tab-label, .table-of-content__tab.active .table-of-content__tab-label {
    font: 600 1.4rem/2rem IBMPlexSans-SemiBold
}

.text-xs-semibold {
    font: 600 1.2rem/1.8rem IBMPlexSans-SemiBold
}

.text-2xs-semibold, .badge--sm {
    font: 600 1rem/1.4rem IBMPlexSans-SemiBold
}

.display-2xl-bold {
    font: 700 7.2rem/9rem IBMPlexSans-Bold
}

.display-xl-bold {
    font: 700 6rem/7.2rem IBMPlexSans-Bold
}

.display-lg-bold {
    font: 700 4.8rem/6rem IBMPlexSans-Bold
}

.display-md-bold {
    font: 700 3.6rem/4.4rem IBMPlexSans-Bold
}

.display-sm-bold {
    font: 700 3rem/3.8rem IBMPlexSans-Bold
}

.display-xs-bold {
    font: 700 2.4rem/3.2rem IBMPlexSans-Bold
}

.text-xl-bold, .contribution-stepper [data-alignment="vertical"] .step-label .step-label--circle {
    font: 700 2rem/3rem IBMPlexSans-Bold
}

.text-lg-bold, .sub-menu__column-title {
    font: 700 1.8rem/2.8rem IBMPlexSans-Bold
}

.text-md-bold {
    font: 700 1.6rem/2.4rem IBMPlexSans-Bold
}

.text-sm-bold, .sidepanel__menu-tab.selected, .sidepanel__menu-tab.active, .sidepanel__menu-tab.active > .sidepanel__menu-tab-label, .selected.sidepanel__submenu-tab, .active.sidepanel__submenu-tab, .active.sidepanel__submenu-tab > .sidepanel__menu-tab-label {
    font: 700 1.4rem/2rem IBMPlexSans-Bold
}

.text-xs-bold {
    font: 700 1.2rem/1.8rem IBMPlexSans-Bold
}

.text-2xs-bold {
    font: 700 1rem/1.4rem IBMPlexSans-Bold
}

.shadow-md, .input.focus, .dropdown__btn.open, .textarea.focus {
    box-shadow: var(--shadow-md)
}

.shadow-lg, .header__sub-menu {
    box-shadow: var(--shadow-lg)
}

.shadow-xl, .dropdown__list, .input__dropdown-list, .textarea__dropdown-list {
    box-shadow: var(--shadow-xl)
}

.shadow-2xl {
    box-shadow: var(--shadow-2xl)
}

.shadow-3xl, .notification-toast, .modal {
    box-shadow: var(--shadow-3xl)
}

.show-Btn {
    transition: all 0.6s ease;
    opacity: 1 !important;
    translate: -150px;
    font-weight: 700 !important
}

.st {
    position: sticky;
    top: 10px
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 100
}

.pin-up {
    height: 100vh !important
}

.btn-container--without-margins > .btn {
    padding: 0;
    margin: 0
}

[dir="rtl"] .show-Btn {
    translate: 150px
}

.contribution-stepper [data-alignment="vertical"] .progress-indicator__step-connector {
    background-color: unset;
    width: unset;
    height: calc(100% - 62px);
    top: 62px;
    left: 31px;
    border-left: 3px dashed #b8eacb
}

[dir="rtl"] .contribution-stepper [data-alignment="vertical"] .progress-indicator__step-connector {
    right: 31px;
    border-right: 3px dashed #b8eacb;
    border-left: none
}

.contribution-stepper [data-alignment="vertical"] .step-label {
    width: 62px;
    height: 62px
}

.contribution-stepper [data-alignment="vertical"] .step-label .step-label--circle {
    width: 62px;
    height: 62px;
    background-color: #f3fcf6;
    color: #1b8354;
    border: none
}

ol.list-decimal {
    list-style-type: decimal
}

.table-preview .checkbox-main, .checkbox-main__content {
    min-width: fit-content !important
}

* {
    scroll-behavior: smooth
}

.filter-container .dropdown {
    width: fit-content;
    max-width: none;
    min-width: none
}

.component-bg {
    background-image: url(/component-bg.svg)
}

.component-bg aside {
    width: max-content !important;
    height: min-content;
    background: initial
}

.flipped-background:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: var(--bg-position, 100% 0);
    z-index: -1;
    border-radius: 1.2rem
}

.fade:after, .fade:before {
    content: "";
    position: absolute;
    bottom: 0;
    display: block;
    width: 25%;
    height: 100%;
    z-index: 9;
    filter: blur(20px)
}

.fade:after {
    right: 0;
    background-image: linear-gradient(to right, #fff0, #ffffffe6)
}

.fade:before {
    left: 0;
    background-image: linear-gradient(to left, #fff0, #fff)
}

.custom-outline-none .focus > .step-text {
    outline: none !important
}

.progress-indicator__step-connector span:last-child {
    display: none !important
}

.elevation-table table td, .elevation-table table th {
    border: 1px solid #e5e7eb !important
}

.change-log-input .input {
    background: #fcfcfd !important
}

@media screen and(max-width: 801px) {
    .opacity-bg {
        background: #ffffff0a !important;
        border-radius: 10px !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important
    }
}

.pointer {
    cursor: pointer
}

.custom-footer-style footer.footer {
    max-width: 630px;
    margin-inline: auto
}

.custom-footer-style .btn--secondary-outline-on-color {
    outline-color: #61646c;
    color: #161616
}

: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-96: 384px;
    --spacing-80: 320px;
    --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;
    --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)
}

@media only screen and(min-width: 1025px) {
    :root {
        --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);
        --card-lg-padding: var(--spacing-8);
        --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);
        --spacing-none: var(--spacing-0);
        --spacing-xxs: var(--spacing-0 .5);
        --spacing-xs: var(--spacing-1);
        --spacing-sm: var(--spacing-1 .5);
        --spacing-md: var(--spacing-2);
        --spacing-lg: var(--spacing-3);
        --spacing-xl: var(--spacing-4);
        --spacing-2xl: var(--spacing-5);
        --spacing-3xl: var(--spacing-6);
        --spacing-4xl: var(--spacing-8);
        --spacing-5xl: var(--spacing-10);
        --spacing-6xl: var(--spacing-12);
        --spacing-7xl: var(--spacing-16);
        --spacing-8xl: var(--spacing-20);
        --spacing-9xl: var(--spacing-24);
        --spacing-10xl: var(--spacing-32);
        --spacing-11xl: var(--spacing-40);
        --card-lg-gap: var(--spacing-6);
        --card-md-padding: var(--spacing-8);
        --card-md-gap: var(--spacing-6);
        --card-sm-padding: var(--spacing-8);
        --card-sm-gap: var(--spacing-6)
    }
}

@media only screen and(min-width: 768px) {
    :root {
        --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-3);
        --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-3);
        --accordion-sm-header-padding: var(--spacing-2);
        --accordion-sm-header-gap: var(--spacing-2);
        --card-lg-padding: var(--spacing-6);
        --section-padding: var(--spacing-6);
        --section-gap: var(--spacing-6);
        --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);
        --spacing-none: var(--spacing-0);
        --spacing-xxs: var(--spacing-0 .5);
        --spacing-xs: var(--spacing-1);
        --spacing-sm: var(--spacing-1 .5);
        --spacing-md: var(--spacing-2);
        --spacing-lg: var(--spacing-3);
        --spacing-xl: var(--spacing-4);
        --spacing-2xl: var(--spacing-5);
        --spacing-3xl: var(--spacing-6);
        --spacing-4xl: var(--spacing-8);
        --spacing-5xl: var(--spacing-10);
        --spacing-6xl: var(--spacing-12);
        --spacing-7xl: var(--spacing-16);
        --spacing-8xl: var(--spacing-20);
        --spacing-9xl: var(--spacing-24);
        --spacing-10xl: var(--spacing-32);
        --spacing-11xl: var(--spacing-40);
        --card-lg-gap: var(--spacing-6);
        --card-md-padding: var(--spacing-6);
        --card-md-gap: var(--spacing-5);
        --card-sm-padding: var(--spacing-6);
        --card-sm-gap: var(--spacing-5)
    }
}

@media only screen and(max-width: 767px) {
    :root {
        --tooltip-padding: var(--spacing-2);
        --tooltip-gap: var(--spacing-2);
        --tab-button-gap: var(--spacing-1);
        --notification-gap: var(--spacing-2);
        --notification-padding: var(--spacing-3);
        --notification-h-padding: var(--spacing-4);
        --notification-alert-v-padding: var(--spacing-2);
        --notification-alert-h-padding: var(--spacing-4);
        --notification-toast-v-padding: var(--spacing-3);
        --notification-toast-desktop-h-padding: var(--spacing-4);
        --notification-toast-mobile-h-padding: var(--spacing-4);
        --tab-horizontal-tab-md-button-v-padding: var(--spacing-2);
        --tab-horizontal-tab-md-button-h-padding: var(--spacing-3);
        --tab-horizontal-tab-sm-button-v-padding: var(--spacing-1);
        --tab-horizontal-tab-sm-button-h-padding: var(--spacing-2);
        --tab-vertical-tab-md-button-v-padding: var(--spacing-1);
        --tab-vertical-tab-md-button-h-padding: var(--spacing-2);
        --tab-vertical-tab-sm-button-v-padding: var(--spacing-0 .5);
        --tab-vertical-tab-sm-button-h-padding: var(--spacing-1);
        --table-cell-gap: var(--spacing-1);
        --table-cell-v-padding: var(--spacing-1);
        --table-cell-h-padding: var(--spacing-3);
        --control-vertical-gap: var(--spacing-1);
        --control-title-error-gap: var(--spacing-2);
        --control-switch-error-icon-gap: var(--spacing-1);
        --control-radio-error-icon-gap: var(--spacing-12);
        --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-3);
        --accordion-sm-header-padding: var(--spacing-2);
        --accordion-sm-header-gap: var(--spacing-2);
        --card-lg-padding: var(--spacing-4);
        --section-padding: var(--spacing-4);
        --section-gap: var(--spacing-4);
        --text-content-gap: var(--spacing-1);
        --icon-text-gap: var(--spacing-1);
        --buttons-lg-gap: var(--spacing-1);
        --model-padding: var(--spacing-4);
        --buttons-lg-padding: var(--spacing-4);
        --model-gap: var(--spacing-1);
        --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-2);
        --buttons-group-gap: var(--spacing-1);
        --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-1);
        --link-sm-gap: var(--spacing-1);
        --link-links-group-gap: var(--spacing-2);
        --progressindicator-progress-indicator-gap: var(--spacing-4);
        --progressindicator-progress-text-content-side-padding: var(--spacing-3);
        --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-1);
        --spacing-none: var(--spacing-0);
        --spacing-xxs: var(--spacing-0 .5);
        --spacing-xs: var(--spacing-1);
        --spacing-sm: var(--spacing-1 .5);
        --spacing-md: var(--spacing-2);
        --spacing-lg: var(--spacing-3);
        --spacing-xl: var(--spacing-4);
        --spacing-2xl: var(--spacing-5);
        --spacing-3xl: var(--spacing-6);
        --spacing-4xl: var(--spacing-8);
        --spacing-5xl: var(--spacing-10);
        --spacing-6xl: var(--spacing-12);
        --spacing-7xl: var(--spacing-16);
        --spacing-8xl: var(--spacing-20);
        --spacing-9xl: var(--spacing-24);
        --spacing-10xl: var(--spacing-32);
        --spacing-11xl: var(--spacing-40);
        --card-lg-gap: var(--spacing-4);
        --card-md-padding: var(--spacing-4);
        --card-md-gap: var(--spacing-3);
        --card-sm-padding: var(--spacing-4);
        --card-sm-gap: var(--spacing-3)
    }
}

:root {
    --radius-0: 0;
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-16: 16px;
    --radius-24: 24px;
    --radius-9999: 9999px;
    --components-card-radius: var(--spacing-4);
    --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);
    --colors-base-white: #ffffff;
    --colors-base-black: #0d121c;
    --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.1);
    --shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1);
    --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-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-50: var(--colors-green-50);
    --background-success-25: var(--colors-green-25);
    --background-info: var(--colors-blue-600);
    --background-info-50: var(--colors-blue-50);
    --background-info-25: var(--colors-blue-25);
    --background-warning: var(--colors-yellow-600);
    --background-warning-50: var(--colors-yellow-50);
    --background-warning-25: var(--colors-yellow-25);
    --background-error: var(--colors-red-600);
    --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-base-black);
    --text-primary-paragraph: var(--colors-base-black);
    --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: #ffffff;
    --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: #1b835419;
    --icon-default-400: var(--colors-neutral-400);
    --icon-primary: var(--colors-primary-sa-flag-600-primary);
    --alpha-primary-20: #1b835433;
    --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-success-light: var(--colors-green-50);
    --icon-info: var(--colors-blue-700);
    --icon-info-light: var(--colors-blue-50);
    --icon-warning: var(--colors-yellow-700);
    --icon-warning-light: var(--colors-yellow-50);
    --icon-error: var(--colors-red-700);
    --icon-error-light: var(--colors-red-50);
    --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-icon-secondary: var(--colors-secondary-gold-600-primary);
    --featuredicons-icon-default-500: var(--colors-neutral-500);
    --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-default-400: var(--colors-neutral-400);
    --featuredicons-icon-primary: var(--colors-primary-sa-flag-600-primary);
    --featuredicons-icon-primary-light: var(--colors-primary-sa-flag-50);
    --featuredicons-icon-primary-400: var(--colors-primary-sa-flag-400);
    --featuredicons-icon-neutral: var(--colors-neutral-700);
    --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: var(--colors-blue-700);
    --featuredicons-icon-info-light: var(--colors-blue-50);
    --featuredicons-icon-warning: var(--colors-yellow-700);
    --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);
    --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)
}

[data-theme="dark"]:root {
    --background-white: var(--colors-neutral-950);
    --background-body: var(--colors-neutral-900);
    --background-menu: var(--colors-neutral-800);
    --background-card: var(--colors-neutral-800);
    --background-surface-oncolor: var(--colors-base-white);
    --background-black: var(--colors-base-white);
    --background-neutral-800: var(--colors-neutral-600);
    --background-neutral-400: var(--colors-neutral-400);
    --background-neutral-300: var(--colors-neutral-500);
    --background-neutral-200: var(--colors-neutral-600);
    --background-neutral-100: var(--colors-neutral-800);
    --background-neutral-50: var(--colors-neutral-900);
    --background-neutral-25: var(--colors-neutral-950);
    --background-primary: var(--colors-primary-sa-flag-600-primary);
    --background-primary-400: var(--colors-primary-sa-flag-400);
    --background-primary-200: var(--colors-neutral-700);
    --background-primary-50: var(--colors-alpha-alpha-green-10);
    --background-primary-25: var(--colors-primary-sa-flag-950);
    --background-secondary: var(--colors-secondary-gold-600-primary);
    --background-secondary-50: var(--colors-neutral-800);
    --background-secondary-25: var(--colors-neutral-900);
    --background-tertiary: var(--colors-tertiary-lavendar-600);
    --background-tertiary-50: var(--colors-neutral-800);
    --background-tertiary-25: var(--colors-neutral-900);
    --background-success: var(--colors-green-600);
    --background-success-50: var(--colors-neutral-800);
    --background-success-25: var(--colors-neutral-900);
    --background-info: var(--colors-blue-600);
    --background-info-50: var(--colors-neutral-800);
    --background-info-25: var(--colors-neutral-900);
    --background-warning: var(--colors-yellow-600);
    --background-warning-50: var(--colors-neutral-800);
    --background-warning-25: var(--colors-neutral-900);
    --background-error: var(--colors-red-600);
    --background-error-50: var(--colors-neutral-800);
    --background-error-25: var(--colors-neutral-900);
    --background-sa-flag: var(--colors-primary-sa-flag-600-primary);
    --background-sa-flag-50: var(--colors-neutral-800);
    --background-sa-flag-25: var(--colors-neutral-900);
    --background-notification-white: var(--colors-neutral-900);
    --text-default: var(--colors-base-white);
    --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-100);
    --text-display: var(--colors-base-black);
    --text-primary-paragraph: var(--colors-base-black);
    --text-secondary-paragraph: var(--colors-neutral-200);
    --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-600);
    --text-info: var(--colors-blue-600);
    --text-warning: var(--colors-yellow-600);
    --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-black-40);
    --border-white: var(--colors-base-black);
    --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-800);
    --button-background-neutral-hovered: var(--colors-neutral-700);
    --button-background-neutral-pressed: var(--colors-neutral-600);
    --button-background-neutral-selected: var(--colors-neutral-700);
    --button-background-neutral-focused: var(--colors-neutral-800);
    --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-black);
    --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-white);
    --border-primary: var(--colors-primary-sa-flag-600-primary);
    --border-primary-light: var(--colors-green-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-500);
    --border-neutral-secondary: var(--colors-neutral-700);
    --border-neutral-tertiary: var(--colors-neutral-800);
    --border-background-white: var(--colors-neutral-600);
    --border-background-neutral: var(--colors-neutral-600);
    --border-transparent-10: var(--alpha-white-10);
    --border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30);
    --border-success: var(--colors-green-500);
    --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(--colors-primary-sa-flag-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-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);
    --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-primary-sa-flag-600-primary);
    --tag-background-neutral-light: var(--colors-neutral-800);
    --tag-background-on-color: var(--colors-alpha-alpha-white-20);
    --tag-text-neutral: var(--colors-neutral-100);
    --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-100);
    --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-300);
    --tag-border-neutral-light: var(--colors-neutral-800);
    --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-red-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-600);
    --table-cell-border-inverse: var(--border-black);
    --table-text-head: var(--colors-neutral-300);
    --table-text-body: var(--text-default);
    --table-background-disabled: var(--background-disabled);
    --table-background-hover-selected: var(--colors-neutral-900);
    --table-background-header: var(--colors-neutral-900);
    --table-background-row: var(--colors-neutral-900);
    --controls-control-primary-checked: var(--colors-primary-sa-flag-600-primary);
    --controls-control-primary-hovered: var(--colors-primary-sa-flag-300);
    --controls-control-primary-pressed: var(--colors-primary-sa-flag-400);
    --controls-control-primary-focused: var(--colors-primary-sa-flag-600-primary);
    --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);
    --controls-control-primary--readonly: var(--alpha-white-0);
    --controls-control-pressed: var(--colors-neutral-600);
    --controls-control-ripple-effect: var(--colors-neutral-950);
    --controls-control-border: var(--colors-neutral-400);
    --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-green-600);
    --tooltip-background-light: var(--colors-neutral-800);
    --tooltip-text-heading-light: var(--text-display);
    --tooltip-text-paragraph-light: var(--text-primary-paragraph);
    --tooltip-background-dark: var(--colors-base-white);
    --tooltip-text-heading-dark: var(--colors-neutral-800);
    --tooltip-text-paragraph-dark: var(--colors-neutral-700);
    --alpha-white-0: var(--colors-alpha-alpha-black-10);
    --alpha-white-10: var(--colors-alpha-alpha-black-10);
    --alpha-white-20: var(--colors-alpha-alpha-black-20);
    --alpha-white-30: var(--colors-alpha-alpha-black-30);
    --alpha-white-40: var(--colors-alpha-alpha-black-40);
    --alpha-white-50: var(--colors-alpha-alpha-black-50);
    --alpha-white-60: var(--colors-alpha-alpha-black-60);
    --alpha-white-70: var(--colors-alpha-alpha-black-70);
    --alpha-white-80: var(--colors-alpha-alpha-black-80);
    --alpha-white-90: var(--colors-alpha-alpha-black-90);
    --alpha-white-100: var(--colors-alpha-alpha-black-100);
    --alpha-black-0: var(--colors-alpha-alpha-white-10);
    --alpha-black-10: var(--colors-alpha-alpha-white-10);
    --alpha-black-20: var(--colors-alpha-alpha-white-20);
    --alpha-black-30: var(--colors-alpha-alpha-white-30);
    --alpha-black-40: var(--colors-alpha-alpha-white-40);
    --alpha-black-50: var(--colors-alpha-alpha-white-50);
    --alpha-black-60: var(--colors-alpha-alpha-white-60);
    --alpha-black-70: var(--colors-alpha-alpha-white-70);
    --alpha-black-80: var(--colors-alpha-alpha-white-80);
    --alpha-black-90: var(--colors-alpha-alpha-white-90);
    --alpha-black-100: var(--colors-alpha-alpha-white-100);
    --background-disabled: var(--colors-neutral-700);
    --background-disabled-primary: var(--colors-primary-sa-flag-700);
    --background-inverse-disabled: var(--colors-neutral-700);
    --stepper-button-completed-hovered: var(--colors-primary-sa-flag-700);
    --stepper-button-current: var(--colors-green-600);
    --stepper-button-current-hovered: var(--colors-primary-sa-flag-700);
    --stepper-button-upcomming: var(--colors-neutral-600);
    --stepper-button-upcomming-hovered: var(--colors-neutral-600);
    --stepper-button-background: var(--colors-base-white);
    --stepper-text-primary: var(--text-default);
    --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-700);
    --stepper-line-upcomming: var(--colors-neutral-700);
    --stepper-line-upcomming-hovered: var(--colors-neutral-700);
    --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(--colors-neutral-800);
    --form-field-background-lighter: var(--colors-neutral-600);
    --form-field-background-darker: var(--colors-neutral-800);
    --form-field-background-pressed: #4d5761;
    --form-field-border-default: var(--colors-neutral-500);
    --form-field-border-hovered: var(--colors-neutral-200);
    --form-field-border-pressed: var(--colors-neutral-25);
    --form-field-border-error: var(--border-error);
    --form-option-background-hover: var(--colors-neutral-500);
    --form-option-background-pressed: 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);
    --icon-default: var(--colors-base-white);
    --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-700);
    --form-datecell-today-background-pressed: var(--colors-neutral-600);
    --icon-default-500: var(--colors-neutral-200);
    --form-datecell-today-background-focused: var(--alpha-white-0);
    --form-datecell-background-disabled: #ffffff;
    --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-icon-hovered: var(--colors-primary-sa-flag-800);
    --alpha-primary-10: #166a4519;
    --icon-default-400: var(--colors-neutral-500);
    --icon-primary: var(--colors-primary-sa-flag-600-primary);
    --alpha-primary-20: #166a4533;
    --icon-primary-light: var(--colors-primary-sa-flag-50);
    --alpha-warning-10: #fec84b19;
    --icon-primary-400: var(--colors-primary-sa-flag-400);
    --alpha-warning-20: #fec84b33;
    --alpha-error-10: #b4231819;
    --alpha-error-20: #b4231833;
    --alpha-info-10: #156fee19;
    --alpha-info-20: #156fee33;
    --alpha-success-10: #06945419;
    --alpha-success-20: #06945433;
    --icon-neutral: var(--colors-neutral-500);
    --icon-neutral-light: var(--colors-neutral-950);
    --icon-secondary: var(--colors-secondary-gold-600-primary);
    --icon-secondary-light: var(--colors-secondary-gold-50);
    --icon-tertiary: var(--colors-tertiary-lavendar-600);
    --icon-tertiary-light: var(--colors-tertiary-lavendar-50);
    --icon-success: var(--colors-green-600);
    --icon-success-light: var(--colors-green-50);
    --icon-info: var(--colors-blue-700);
    --icon-info-light: var(--colors-blue-50);
    --icon-warning: var(--colors-yellow-700);
    --icon-warning-light: var(--colors-yellow-50);
    --icon-error: var(--colors-red-700);
    --icon-error-light: var(--colors-red-50);
    --icon-default-disabled: var(--colors-base-white);
    --icon-default-oncolor-disabled: var(--colors-base-white);
    --control-disabled: var(--colors-alpha-alpha-white-30);
    --featuredicons-icon-oncolor: var(--colors-base-white);
    --featuredicons-icon-success: var(--colors-green-600);
    --featuredicons-icon-default: var(--colors-base-white);
    --featuredicons-icon-error: var(--colors-red-700);
    --featuredicons-icon-secondary: var(--colors-secondary-gold-600-primary);
    --featuredicons-icon-default-500: var(--colors-neutral-200);
    --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-default-400: var(--colors-neutral-500);
    --featuredicons-icon-primary: var(--colors-primary-sa-flag-600-primary);
    --featuredicons-icon-primary-light: var(--colors-primary-sa-flag-50);
    --featuredicons-icon-primary-400: var(--colors-primary-sa-flag-400);
    --featuredicons-icon-neutral: var(--colors-neutral-500);
    --featuredicons-icon-neutral-light: var(--colors-neutral-950);
    --featuredicons-icon-secondary-light: var(--colors-secondary-gold-50);
    --featuredicons-icon-tertiary: var(--colors-tertiary-lavendar-600);
    --featuredicons-icon-tertiary-light: var(--colors-tertiary-lavendar-50);
    --featuredicons-icon-success-light: var(--colors-green-50);
    --featuredicons-icon-info: var(--colors-blue-700);
    --featuredicons-icon-info-light: var(--colors-blue-50);
    --featuredicons-icon-warning: var(--colors-yellow-700);
    --featuredicons-bg-icon-warning-light: var(--alpha-warning-10);
    --featuredicons-bg-icon-error-light: var(--alpha-error-10);
    --featuredicons-bg-icon-brand-light: var(--alpha-primary-10);
    --featuredicons-bg-icon-info-light: var(--alpha-info-10);
    --featuredicons-bg-icon-success-light: var(--alpha-success-10);
    --controls-control-icon-pressed: var(--colors-primary-sa-flag-800);
    --controls-control-icon-disabled: var(--colors-neutral-400);
    --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(--alpha-white-10);
    --notification-background-success-50: var(--alpha-success-20);
    --notification-background-warning-50: var(--alpha-warning-20);
    --notification-background-error-50: var(--alpha-error-20);
    --notification-background-brand-50: var(--alpha-primary-20);
    --notification-background-info-50: var(--alpha-info-20);
    --notification-background-default-25: var(--alpha-white-0);
    --notification-background-success-25: var(--alpha-primary-10);
    --notification-background-warning-25: var(--alpha-warning-10);
    --notification-background-error-25: var(--alpha-error-10);
    --notification-background-brand-25: var(--alpha-primary-10);
    --notification-background-info-25: var(--alpha-info-10);
    --notification-text-success: var(--colors-green-300);
    --notification-text-error: var(--colors-red-300);
    --notification-text-info: var(--colors-blue-300);
    --notification-text-warning: var(--colors-yellow-300);
    --notification-text-brand: var(--colors-primary-sa-flag-300);
    --controls-control-text-error: var(--colors-red-300)
}

.buttons .flex-column {
    align-items: flex-start
}

.btn-icon {
    display: flex;
    width: 24px;
    height: 24px;
    font-size: 24px;
    justify-content: center;
    align-items: center
}

.btn--lg span.btn-icon {
    width: 24px;
    height: 24px;
    font-size: 24px
}

.btn--md {
    height: 32px;
    padding-inline: var(--buttons-md-padding)
}

.btn--md span.btn-icon {
    width: 20px;
    height: 20px;
    font-size: 20px
}

.btn--sm {
    height: 24px;
    padding-inline: var(--buttons-sm-padding)
}

.btn--sm span.btn-icon {
    width: 16px;
    height: 16px;
    font-size: 16px
}

.btn--icon {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.btn--icon.btn--lg {
    width: 40px;
    height: 40px
}

.btn--icon-menu.btn--lg {
    width: auto;
    padding-inline: var(--buttons-lg-padding)
}

.btn--icon.btn--md {
    width: 32px;
    height: 32px;
    font-size: 32px
}

.btn--icon-menu.btn--md {
    width: auto;
    padding-inline: var(--buttons-md-padding)
}

.btn--icon.btn--sm {
    width: 24px;
    height: 24px;
    font-size: 24px
}

.btn--icon-menu.btn--sm {
    width: auto;
    padding-inline: var(--buttons-sm-padding)
}

.btn--primary-neutral {
    background-color: var(--button-background-black-default);
    color: var(--text-oncolor-primary);
    padding: 8px 16px
}

.btn--primary-neutral:hover {
    background-color: var(--button-background-black-hovered);
    color: var(--text-oncolor-primary)
}

.btn--primary-neutral:visited {
    background-color: var(--button-background-black-pressed)
}

.btn--primary-neutral:focus {
    background-color: var(--button-background-black-focused);
    outline: 2px solid var(--border-black);
    position: relative
}

.btn--primary-neutral:focus:after {
    content: "";
    display: block;
    background-color: #fff0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #fff;
    border-radius: var(--radius-sm)
}

.btn--primary-neutral:active {
    background-color: var(--button-background-black-selected);
    outline: none
}

.btn--primary-neutral:active:after {
    display: none !important
}

.btn--primary-neutral:disabled, .btn--primary-neutral[disabled] {
    background: var(--background-disabled);
    color: var(--text-default-disabled)
}

.btn--primary-neutral--on-color {
    background-color: var(--button-background-oncolor-default);
    color: var(--text-default)
}

.btn--primary-neutral--on-color:hover {
    background-color: var(--button-background-oncolor-hovered)
}

.btn--primary-neutral--on-color:visited, .btn--primary-neutral--on-color.selected {
    background-color: var(--button-background-oncolor-selected)
}

.btn--primary-neutral--on-color:focus {
    outline-color: var(--border-white)
}

.btn--primary-neutral--on-color:focus:after {
    border-color: var(--border-black)
}

.btn--primary-neutral--on-color:active {
    background-color: var(--button-background-oncolor-pressed)
}

.btn--primary-neutral--on-color:disabled, .btn--primary-neutral--on-color[disabled] {
    background-color: var(--button-background-disabled-on-color);
    color: var(--text-default-oncolor-disabled)
}

.btn--primary-brand--on-color {
    background-color: var(--button-background-oncolor-default);
    color: var(--text-default)
}

.btn--primary-brand--on-color:hover {
    background-color: var(--button-background-oncolor-hovered)
}

.btn--primary-brand--on-color:visited, .btn--primary-brand--on-color.selected {
    background-color: var(--button-background-oncolor-pressed)
}

.btn--primary-brand--on-color:focus {
    outline-color: var(--border-white)
}

.btn--primary-brand--on-color:focus:after {
    border-color: var(--border-black)
}

.btn--primary-brand--on-color:active {
    background-color: var(--button-background-oncolor-pressed)
}

.btn--primary-brand--on-color:disabled, .btn--primary-brand--on-color[disabled] {
    background-color: var(--button-background-disabled-on-color);
    color: var(--text-default-oncolor-disabled)
}

.btn--secondary--on-color {
    background-color: var(--button-background-transparent-hovered);
    color: var(--text-oncolor-primary)
}

.btn--secondary--on-color:hover {
    background-color: var(--button-background-transparent-hovered)
}

.btn--secondary--on-color:visited, .btn--secondary--on-color.selected {
    background-color: var(--Button-button-background-transparent-selected)
}

.btn--secondary--on-color:focus {
    outline-color: var(--border-white)
}

.btn--secondary--on-color:focus:after {
    display: none
}

.btn--secondary--on-color:active {
    background-color: var(--Button-button-background-transparent-pressed);
    color: var(--text-oncolor-primary)
}

.btn--secondary--on-color:disabled, .btn--secondary--on-color[disabled] {
    background-color: var(--button-background-disabled-on-color);
    color: var(--text-default-oncolor-disabled)
}

.btn--secondary-outline {
    outline: 1px solid var(--border-neutral-secondary);
    background-color: #fff0;
    color: #0d121c;
    mix-blend-mode: multiply;
    padding: 8px 16px
}

.btn--secondary-outline:hover {
    background: var(--button-background-neutral-default)
}

.btn--secondary-outline:active {
    background-color: #e5e7eb;
    border: 1px solid #d2d6db
}

.btn--secondary-outline:focus {
    background-color: #fff0;
    outline: 2px solid #0d121c !important;
    border-radius: 4px
}

.btn--secondary-outline:disabled, .btn--secondary-outline[disabled] {
    background-color: #fff0;
    color: #9ca3af;
    border: 1px solid #d2d6db;
    cursor: not-allowed
}

.btn--secondary-outline--on-color {
    outline-color: var(--border-white-40);
    color: var(--text-oncolor-primary);
    mix-blend-mode: normal
}

.btn--secondary-outline--on-color:hover, .btn--secondary-outline--on-color:visited, .btn--secondary-outline--on-color.selected {
    background: var(--button-background-transparent-hovered);
    outline-color: var(--border-white-40)
}

.btn--secondary-outline--on-color:focus {
    background: #fff0;
    outline: 2px solid var(--border-white)
}

.btn--secondary-outline--on-color:active {
    background: var(--button-background-transparent-hovered);
    outline-color: var(--border-white-40)
}

.btn--secondary-outline--on-color:disabled, .btn--secondary-outline--on-color[disabled] {
    outline-color: 1px solid var(--icon-default-oncolor-disabled);
    color: var(--text-default-oncolor-disabled)
}

.btn--subtle, .btn--close, .btn--sort {
    background-color: #fff0;
    color: var(--colors-text-primary);
    mix-blend-mode: multiply
}

.btn--subtle:hover, .btn--close:hover, .btn--sort:hover {
    background: var(--button-background-neutral-hovered)
}

.btn--subtle:visited, .btn--close:visited, .btn--sort:visited {
    background: var(--button-background-neutral-focused)
}

.btn--subtle:focus, .btn--close:focus, .btn--sort:focus {
    background: var(--button-background-black-focused);
    outline: 2px solid var(--border-black);
    position: relative
}

.btn--subtle:focus:after, .btn--close:focus:after, .btn--sort:focus:after {
    content: "";
    display: block;
    background-color: #fff0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #fff;
    border-radius: var(--radius-sm)
}

.btn--subtle:active, .btn--close:active, .btn--sort:active {
    background: var(--button-background-neutral-selected);
    outline: none
}

.btn--subtle:active:after, .btn--close:active:after, .btn--sort:active:after {
    display: none !important
}

.btn--subtle:disabled, .btn--subtle[disabled], .btn--close:disabled, .btn--close[disabled], .btn--sort:disabled, .btn--sort[disabled] {
    background: #fff0;
    color: var(--text-default-disabled)
}

.btn--transparent {
    background-color: #fff0;
    color: var(--text-default)
}

.btn--transparent:hover {
    background: #fff0;
    color: var(--button-background-primary-hovered)
}

.btn--transparent:visited {
    color: var(--button-background-primary-pressed)
}

.btn--transparent:focus {
    background: #fff0;
    outline: 2px solid var(--border-black);
    position: relative
}

.btn--transparent:focus:after {
    content: "";
    display: block;
    background-color: #fff0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #fff;
    border-radius: var(--radius-sm)
}

.btn--transparent:active {
    color: var(--button-background-primary-selected);
    outline: none
}

.btn--transparent:active:after {
    display: none !important
}

.btn--transparent:disabled, .btn--transparent[disabled] {
    background: #fff0;
    color: var(--text-default-disabled)
}

.btn--close {
    display: flex;
    width: 40px;
    height: 40px;
    padding: var(--spacing-md);
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-sm);
    background-color: #fff0;
    color: var(--icon-default)
}

.btn--close:hover {
    background: var(--button-background-neutral-hovered);
    color: var(--icon-default)
}

.btn--close:active {
    background-color: var(--button-background-neutral-pressed)
}

.btn--des-primary {
    background-color: var(--button-background-danger-primary-default);
    color: var(--text-oncolor-primary)
}

.btn--des-primary:hover {
    background: var(--button-background-danger-primary-hovered)
}

.btn--des-primary:visited {
    background: var(--button-background-danger-primary-pressed)
}

.btn--des-primary:focus {
    background: var(--button-background-danger-primary-focused);
    outline: 2px solid var(--border-black);
    position: relative
}

.btn--des-primary:focus:after {
    content: "";
    display: block;
    background-color: #fff0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #fff;
    border-radius: var(--radius-sm)
}

.btn--des-primary:active {
    background: var(--button-background-danger-primary-selected);
    outline: none
}

.btn--des-primary:active:after {
    display: none !important
}

.btn--des-primary:disabled, .btn--des-primary[disabled] {
    background: var(--background-disabled);
    color: var(--text-default-disabled)
}

.btn--des-secondary {
    background-color: var(--button-background-danger-secondary-default);
    color: var(--text-error)
}

.btn--des-secondary:hover {
    background: var(--button-background-danger-secondary-hovered)
}

.btn--des-secondary:visited {
    background: var(--button-background-danger-secondary-pressed)
}

.btn--des-secondary:focus {
    background: var(--button-background-danger-secondary-focused);
    outline: 2px solid var(--border-black);
    position: relative
}

.btn--des-secondary:focus:after {
    content: "";
    display: block;
    background-color: #fff0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #fff;
    border-radius: var(--radius-sm)
}

.btn--des-secondary:active {
    background: var(--button-background-danger-secondary-selected);
    outline: none
}

.btn--des-secondary:active:after {
    display: none !important
}

.btn--des-secondary:disabled, .btn--des-secondary[disabled] {
    background: var(--background-disabled);
    color: var(--text-default-disabled)
}

.btn--des-secondary-outline {
    outline: 1px solid var(--border-error-light);
    background-color: #fff0;
    color: var(--text-error);
    mix-blend-mode: multiply
}

.btn--des-secondary-outline:hover {
    background: var(--button-background-danger-secondary-hovered)
}

.btn--des-secondary-outline:visited {
    background: var(--button-background-danger-secondary-pressed)
}

.btn--des-secondary-outline:focus {
    background: #fff0;
    outline: 2px solid var(--border-black);
    position: relative
}

.btn--des-secondary-outline:focus:after {
    content: "";
    display: block;
    background-color: #fff0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #fff;
    border-radius: var(--radius-sm)
}

.btn--des-secondary-outline:active {
    background: var(--button-background-danger-secondary-selected);
    outline: 1px solid var(--border-error-light)
}

.btn--des-secondary-outline:active:after {
    display: none !important
}

.btn--des-secondary-outline:disabled, .btn--des-secondary-outline[disabled] {
    background: #fff0;
    color: var(--text-default-disabled);
    outline: 1px solid var(--border-neutral-secondary)
}

.btn--des-subtle {
    background-color: #fff0;
    color: var(--text-error)
}

.btn--des-subtle:hover {
    background: var(--button-background-danger-secondary-hovered)
}

.btn--des-subtle:visited {
    background: var(--button-background-danger-secondary-pressed)
}

.btn--des-subtle:focus {
    background: #fff0;
    outline: 2px solid var(--border-black);
    position: relative
}

.btn--des-subtle:focus:after {
    content: "";
    display: block;
    background-color: #fff0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #fff;
    border-radius: var(--radius-sm)
}

.btn--des-subtle:active {
    background: var(--button-background-danger-secondary-selected);
    outline: none
}

.btn--des-subtle:active:after {
    display: none !important
}

.btn--des-subtle:disabled, .btn--des-subtle[disabled] {
    background: #fff0;
    color: var(--text-default-disabled)
}

.btn--des-transparent {
    background-color: #fff0;
    color: var(--button-background-danger-primary-default)
}

.btn--des-transparent:hover {
    background: #fff0;
    color: var(--button-background-danger-primary-hovered)
}

.btn--des-transparent:visited {
    color: var(--button-background-danger-primary-pressed)
}

.btn--des-transparent:focus {
    background: #fff0;
    outline: 2px solid var(--border-black);
    position: relative;
    color: var(--button-background-danger-primary-selected)
}

.btn--des-transparent:focus:after {
    content: "";
    display: block;
    background-color: #fff0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #fff;
    border-radius: var(--radius-sm)
}

.btn--des-transparent:active {
    color: var(--button-background-danger-primary-selected);
    outline: none
}

.btn--des-transparent:active:after {
    display: none !important
}

.btn--des-transparent:disabled, .btn--des-transparent[disabled] {
    background: #fff0;
    color: var(--text-default-disabled)
}

.btn.btn--subtle-on-color, .btn.btn--close-on-color {
    background-color: #fff0;
    color: var(--text-oncolor-primary)
}

.btn.btn--subtle-on-color:hover, .btn.btn--close-on-color:hover {
    background-color: var(--button-background-transparent-hovered)
}

.btn.btn--subtle-on-color:visited, .btn.btn--subtle-on-color.selected, .btn.btn--close-on-color:visited, .btn.btn--close-on-color.selected {
    background-color: var(--button-background-transparent-selected)
}

.btn.btn--subtle-on-color:focus, .btn.btn--close-on-color:focus {
    outline: 2px solid var(--border-white)
}

.btn.btn--subtle-on-color:focus:after, .btn.btn--close-on-color:focus:after {
    display: none
}

.btn.btn--subtle-on-color:active, .btn.btn--close-on-color:active {
    color: var(--text-oncolor-primary);
    background-color: var(--button-background-transparent-pressed)
}

.btn.btn--subtle-on-color:disabled, .btn.btn--subtle-on-color[disabled], .btn.btn--close-on-color:disabled, .btn.btn--close-on-color[disabled] {
    background-color: #fff0;
    color: var(--text-default-oncolor-disabled)
}

.btn--transparent-on-color {
    background-color: #fff0;
    color: var(--text-oncolor-primary)
}

.btn--transparent-on-color:hover {
    color: var(--button-label-transparent-hovered-on-color)
}

.btn--transparent-on-color:visited, .btn--transparent-on-color.selected {
    color: var(--button-label-transparent-selected-on-color)
}

.btn--transparent-on-color:focus {
    outline: 2px solid var(--colors-base-white)
}

.btn--transparent-on-color:focus:after {
    display: none
}

.btn--transparent-on-color:active {
    color: var(--button-label-transparent-pressed-on-color)
}

.btn--transparent-on-color:disabled, .btn--transparent-on-color[disabled] {
    background-color: #fff0;
    color: var(--text-default-oncolor-disabled)
}

.tags .flex-column {
    align-items: flex-start
}

.tags .flex {
    gap: 1rem
}

.tag {
    display: inline-flex;
    height: 32px;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-sm)
}

.tag-icon {
    display: flex;
    padding: 1.875px 1.5px;
    justify-content: center;
    align-items: center
}

.tag--lg {
    height: 32px
}

.tag--lg span.tag-icon {
    width: 18px;
    height: 18px
}

.tag--md {
    height: 24px
}

.tag--md span.tag-icon {
    width: 14px;
    height: 14px
}

.tag--sm {
    height: 20px
}

.tag--sm span.tag-icon {
    width: 10px;
    height: 10px
}

.tag--rounded {
    border-radius: var(--radius-full)
}

.tag--icon {
    padding: 0
}

.tag--icon.tag--lg {
    width: 32px;
    height: 32px
}

.tag--icon.tag--md {
    width: 24px;
    height: 24px
}

.tag--icon.tag--sm {
    width: 20px;
    height: 20px
}

.tag--neutral {
    color: var(--tag-text-neutral);
    background: var(--tag-background-neutral-light);
    border: 1px solid var(--border-neutral-secondary)
}

.tag--neutral-outlined {
    border: 1px solid var(--tag-border-neutral);
    background-color: #fff0;
    color: var(--tag-text-neutral)
}

.tag--neutral svg {
    color: currentColor;
    stroke: currentColor
}

.tag--success {
    color: var(--tag-text-success);
    background-color: var(--tag-background-success-light);
    border: 1px solid var(--tag-border-success-light)
}

.tag--success-outlined {
    border: 1px solid var(--tag-border-success);
    background-color: #fff0;
    color: var(--tag-text-success)
}

.tag--success svg {
    color: currentColor;
    stroke: currentColor
}

.tag--error {
    color: var(--tag-text-error);
    background-color: var(--tag-background-error-light);
    border: 1px solid var(--tag-border-error-light)
}

.tag--error-outlined {
    border: 1px solid var(--tag-border-error);
    background-color: #fff0;
    color: var(--tag-text-error)
}

.tag--error svg {
    color: currentColor;
    stroke: currentColor
}

.tag--warning {
    color: var(--tag-text-warning);
    background-color: var(--tag-background-warning-light);
    border: 1px solid var(--tag-border-warning-light)
}

.tag--warning-outlined {
    border: 1px solid var(--tag-border-error);
    background-color: #fff0;
    color: var(--tag-text-warning)
}

.tag--warning svg {
    color: currentColor;
    stroke: currentColor
}

.tag--info {
    color: var(--tag-text-info);
    background-color: var(--tag-background-info-light);
    border: 1px solid var(--tag-border-info-light)
}

.tag--info-outlined {
    border: 1px solid var(--tag-border-info);
    background-color: #fff0;
    color: var(--tag-text-info)
}

.tag--info svg {
    color: currentColor;
    stroke: currentColor
}

.tag--purple {
    color: var(--colors-purple-700);
    background-color: var(--colors-purple-50);
    border: 1px solid var(--colors-purple-200)
}

.tag--purple-outlined {
    border: 1px solid var(--colors-purple-500);
    background-color: #fff0;
    color: var(--colors-purple-700)
}

.tag--purple svg {
    color: currentColor;
    stroke: currentColor
}

.tag--pink {
    color: var(--colors-pink-700);
    background-color: var(--colors-pink-50);
    border: 1px solid var(--colors-pink-200)
}

.tag--pink-outlined {
    border: 1px solid var(--colors-pink-500);
    background-color: #fff0;
    color: var(--colors-pink-700)
}

.tag--pink svg {
    color: currentColor;
    stroke: currentColor
}

.tag--orange {
    color: var(--colors-orange-700);
    background-color: var(--colors-orange-50);
    border: 1px solid var(--colors-orange-200)
}

.tag--orange-outlined {
    border: 1px solid var(--colors-orange-500);
    background-color: #fff0;
    color: var(--colors-orange-700)
}

.tag--orange svg {
    color: currentColor;
    stroke: currentColor
}

.tag--on-color {
    color: var(--colors-base-white);
    background-color: hsl(var(--colors-alpha-white) / 30%)
}

.tag--on-color-outlined {
    border: 1px solid hsl(var(--colors-alpha-white) / 90%);
    background-color: #fff0;
    color: hsl(var(--colors-alpha-white) / 90%)
}

.tag--on-color svg {
    color: currentColor;
    stroke: currentColor
}

.accordion-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
    width: 100%
}

.accordion-list__item:last-child {
    border-bottom: 1px solid var(--border-neutral-primary)
}

.accordion-item {
    border-top: 1px solid var(--border-neutral-primary);
    width: 100%;
    z-index: 1;
    position: relative
}

.accordion-item__header {
    display: flex;
    padding: var(--spacing-xl);
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
    cursor: pointer;
    text-decoration: none
}

.accordion-item__header:hover {
    background: var(--button-background-neutral-hovered);
    mix-blend-mode: multiply;
    outline: none
}

.accordion-item__title {
    color: var(--text-default);
    width: 100%
}

.accordion-item__arrow {
    transition: transform 0.3s ease-in-out
}

.accordion-item__arrow, .accordion-item__arrow > dga-icon {
    width: 17px;
    height: 16px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

.accordion-item__body {
    display: flex;
    align-items: flex-start;
    padding: 0 var(--spacing-6xl) 0 var(--spacing-xl);
    gap: var(--spacing-md);
    color: var(--text-primary-paragraph);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out
}

.accordion-item.active .accordion-item__body {
    padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-xl);
    opacity: 1
}

.accordion-item.active .accordion-item__arrow {
    transform: rotate(180deg)
}

.accordion-item.focused .accordion-item__header, .accordion-item__header:focus {
    background-color: #fff0;
    border: 0 solid var(--border-black);
    outline: none;
    position: relative;
    z-index: 1
}

.accordion-item__header:active {
    background-color: var(--button-background-neutral-pressed);
    outline: none
}

.accordion-item.disabled .accordion-item__header:active, .accordion-item.disabled .accordion-item__header:focus, .accordion-item.disabled .accordion-item__header:hover {
    background-color: #fff0;
    outline: none
}

.accordion-item.disabled .accordion-item__title, .accordion-item.disabled .accordion-item__arrow, .accordion-item.disabled .accordion-item__arrow path, .accordion-item.disabled .accordion-item__body {
    color: var(--text-default-disabled) !important;
    stroke: var(--text-default-disabled) !important
}

.accordion-item--lg .accordion-item__header {
    padding: var(--spacing-xl)
}

.accordion-item--md .accordion-item__header {
    padding: var(--spacing-lg) var(--spacing-xl)
}

.accordion-item--sm .accordion-item__header {
    padding: var(--spacing-md) var(--spacing-xl)
}

.accordion-item--flush {
    width: 100%;
    position: relative;
    border-top: 0
}

.accordion-item--flush:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0 16px, var(--border-neutral-primary) 16px calc(100% - 16px), transparent calc(100% - 16px) 100%)
}

.accordion-item--icon-leading .accordion-item__body {
    padding: 0 var(--spacing-none) 0 var(--spacing-6xl)
}

.accordion-item--icon-leading.active .accordion-item__body {
    padding: var(--spacing-md) var(--spacing-none) var(--spacing-3xl) var(--spacing-6xl)
}

:is(html[lang="ar"],html[dir="rtl"]).accordion-item .accordion-item__body {
    padding: 0 var(--spacing-xl) 0 var(--spacing-6xl)
}

:is(html[lang="ar"],html[dir="rtl"]).accordion-item--icon-leading .accordion-item__body {
    padding: 0 var(--spacing-6xl) 0 var(--spacing-none)
}

:is(html[lang="ar"],html[dir="rtl"]).accordion-item.active .accordion-item__body {
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-3xl) var(--spacing-6xl)
}

:is(html[lang="ar"],html[dir="rtl"]).accordion-item--icon-leading.active .accordion-item__body {
    padding: var(--spacing-md) var(--spacing-6xl) var(--spacing-3xl) var(--spacing-none)
}

.dga-ico {
    font-style: normal
}

.checkbox {
    display: flex;
    gap: var(--spacing-xl);
    padding: var(--spacing-none);
    cursor: pointer;
    width: fit-content;
    user-select: none
}

.checkbox-container {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--controls-control-border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: visible;
    z-index: 0
}

.checkbox-container::after, .checkbox input::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%) scale(0);
    background: var(--controls-control-ripple-effect);
    border-radius: var(--radius-full);
    z-index: -1;
    transition: transform 0.3s ease-in-out
}

.checkbox-container:hover::after, .checkbox-container:active::after, .checkbox input:active::after, .checkbox input:hover::after {
    transform: translate(-50%, -50%) scale(1)
}

.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.checkbox input:checked ~ .checkbox-container {
    background-color: var(--controls-control-neutral-checked);
    border-color: var(--controls-control-neutral-checked)
}

.checkbox input:checked ~ .checkbox-container .checkbox__checked-icon {
    display: inline-flex !important
}

.checkbox--indeterminate .checkbox-container {
    background-color: var(--controls-control-neutral-checked)
}

.checkbox--indeterminate .checkbox-container .checkbox-icon {
    display: none
}

.checkbox--indeterminate .checkbox-container .checkbox__indeterminate-icon {
    display: inline-block !important
}

.checkbox--indeterminate input:checked ~ .checkbox-container .checkbox__indeterminate-icon {
    display: none !important
}

.checkbox--indeterminate input:checked ~ .checkbox-container .checkbox__checked-icon {
    display: inline-block !important
}

.checkbox--brand input:checked ~ .checkbox-container {
    background-color: var(--controls-control-primary-checked);
    border-color: var(--controls-control-primary-checked)
}

.checkbox--brand input:checked ~ .checkbox__label, .checkbox--brand input:checked ~ div > .checkbox__label {
    color: #0d121c
}

.checkbox--brand.active input:not(:disabled):checked ~ .checkbox-container {
    background-color: var(--controls-control-primary-hovered)
}

.checkbox input:disabled ~ .checkbox-container {
    border-color: var(--border-disabled);
    background-color: var(--background-disabled)
}

.checkbox input:disabled ~ .checkbox__label, .checkbox input:disabled ~ div > .checkbox__label, .checkbox input:disabled ~ div > .checkbox__helper-text {
    color: var(--background-disabled)
}

.checkbox--brand input:checked:disabled ~ .checkbox-container {
    background-color: var(--background-disabled)
}

.checkbox--brand input:disabled ~ .checkbox-container {
    border-color: var(--border-disabled);
    background-color: #fff0
}

.checkbox--brand input:disabled ~ .checkbox-container::after {
    display: none
}

.checkbox--brand input:disabled ~ .checkbox__label, .checkbox--brand input:disabled ~ div > .checkbox__label, .checkbox--brand input:disabled ~ div > .checkbox__helper-text {
    color: var(--background-disabled)
}

.checkbox.active input:not(:checked) ~ .checkbox-container {
    background-color: var(--controls-control-pressed)
}

.checkbox-container::after, .radio-container::after {
    opacity: .3;
    mix-blend-mode: overlay
}

.checkbox--brand input:checked:hover ~ .checkbox-container {
    background-color: var(--colors-brand-700)
}

.checkbox--brand input:checked:active ~ .checkbox-container {
    background-color: var(--colors-brand-900)
}

.checkbox-container:focus, .checkbox-container:focus::after {
    outline: 2px solid #000;
    outline-offset: 2px
}

.checkbox-container:focus:hover {
    outline: 2px solid #000
}

.checkbox-container:focus:hover::after {
    outline: 0
}

.checkbox--lg .checkbox-container {
    width: 24px;
    height: 24px;
    min-width: 24px
}

.checkbox--md .checkbox-container {
    width: 32px;
    height: 32px;
    min-width: 32px
}

.checkbox--sm .checkbox-container {
    width: 16px;
    height: 16px;
    min-width: 16px
}

.checkbox--readonly .checkbox-container {
    background-color: transparent !important
}

.checkbox--readonly .checkbox-container .checkbox-icon {
    color: var(--controls-control-neutral-checked)
}

.checkbox-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-width: 382px
}

.checkbox-main__content {
    display: flex;
    column-gap: var(--spacing-md);
    align-items: center
}

.checkbox__label {
    color: var(--text-display, #1f2a37)
}

.checkbox__helper-text {
    color: var(--colors-text-tertiary);
    margin-block: var(--spacing-xs)
}

.checkbox__warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    color: var(--text-error)
}

.checkbox__warning-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center
}

.checkbox-icon {
    display: none !important;
    width: 16px;
    height: 16px;
    color: var(--colors-base-white);
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1
}

.switch {
    display: flex;
    gap: var(--spacing-xl);
    width: fit-content;
    padding: 6px;
    cursor: pointer
}

.switch-main__content.disabled > .switch__label, .switch-main__content.disabled > div > .switch__label, .switch-main__content.disabled > div > .switch__helper-text {
    color: var(--control-disabled)
}

.switch .switch-wrapper {
    position: relative;
    display: inline-block;
    min-width: 48px;
    height: 24px
}

.switch .switch-wrapper input {
    opacity: 0;
    width: 0;
    height: 0
}

.switch .switch-wrapper .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #fff;
    border: 1px solid #000;
    transition: 0.4s;
    border-radius: 34px
}

.switch .switch-wrapper .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: var(--controls-control-neutral-checked);
    transition: 0.4s;
    border-radius: 50%
}

.switch .switch-wrapper input:checked + .slider {
    background-color: var(--controls-control-primary-checked)
}

.switch .switch-wrapper input:focus + .slider {
    box-shadow: 0 0 1px var(--controls-control-neutral-pressed)
}

.switch .switch-wrapper input:focus + .slider.slider--active {
    background-color: var(--controls-control-primary-pressed);
    outline: 4px solid var(--controls-control-ripple-effect)
}

.switch .switch-wrapper input:hover + .slider {
    box-shadow: 0 0 1px var(--controls-control-neutral-hovered);
    outline: 4px solid var(--controls-control-ripple-effect)
}

.switch .switch-wrapper input:hover + .slider:before {
    background-color: var(--controls-control-neutral-hovered)
}

.switch .switch-wrapper input:hover + .slider.slider--active {
    background-color: var(--controls-control-primary-hovered);
    outline: 4px solid var(--controls-control-ripple-effect)
}

.switch .switch-wrapper input:disabled + .slider {
    box-shadow: 0 0 1px var(--controls-control-boarder-disabled) !important;
    border: 1px solid var(--control-disabled) !important;
    outline: 0 solid var(--controls-control-ripple-effect)
}

.switch .switch-wrapper input:disabled + .slider:before {
    background-color: var(--control-disabled)
}

.switch .switch-wrapper input:disabled + .slider.slider--active {
    background-color: var(--control-disabled) !important;
    outline: 0 solid var(--controls-control-ripple-effect)
}

.switch .switch-wrapper input:disabled + .slider.slider--active:before {
    background-color: var(--controls-control-icon-disabled) !important
}

.switch .switch-wrapper input:checked + .slider:before {
    transform: translate(24px);
    background-color: #fff
}

.switch .switch-wrapper .slider.round {
    border-radius: 34px
}

.switch .switch-wrapper .slider.round:before {
    border-radius: 50%
}

.switch-icon {
    display: none !important;
    color: var(--surface-oncolor);
    font-size: 18px !important;
    font-weight: bolder !important
}

.switch.focus {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--border-black)
}

.switch-main {
    flex-direction: column;
    gap: var(--spacing-xs);
    max-width: 382px
}

.switch-main, .switch-main__content {
    display: flex;
    -moz-column-gap: var(--spacing-xl);
    column-gap: var(--spacing-xl)
}

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

.switch__helper-text {
    color: var(--text-primary-paragraph);
    margin-block: var(--spacing-xs)
}

.switch__warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    margin-left: var(--spacing-3xl);
    color: var(--text-error)
}

.switch__warning-icon {
    width: 24px
}

.switch--brand input:checked ~ .switch__label, .switch--brand input:checked ~ div > .switch__label {
    color: var(--controls-control-primary-checked)
}

.switch--brand .switch-main__content.disabled .switch-wrapper > .slider--active {
    background-color: var(--border-disabled)
}

.switch--brand .switch-main__content.disabled > .switch__label, .switch--brand .switch-main__content.disabled > div > .switch__label, .switch--brand .switch-main__content.disabled > div > .switch__helper-text {
    color: var(--border-disabled)
}

.switch--readonly .switch-slider {
    background-color: transparent !important
}

.switch--readonly .switch-slider .switch-icon {
    color: var(--text-primary-paragraph) !important
}

[dir="rtl"] .switch .switch-wrapper .slider:before {
    left: auto;
    right: 4px
}

[dir="rtl"] .switch .switch-wrapper input:checked + .slider:before {
    transform: translate(-24px)
}

[dir="rtl"] .switch .switch__warning {
    margin-left: 0;
    margin-right: var(--spacing-3xl)
}

.radio {
    margin: var(--spacing-md);
    display: inline-flex;
    gap: var(--spacing-xl);
    padding: var(--spacing-md);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.radio.focus {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--controls-control-neutral-checked)
}

.radio-main {
    flex-direction: column;
    gap: var(--spacing-xs);
    max-width: 382px
}

.radio-main, .radio-main__content {
    display: flex;
    -moz-column-gap: var(--spacing-xl);
    column-gap: var(--spacing-md)
}

.radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.radio input:checked ~ .radio-container:before {
    transform: translate(-50%, -50%) scale(1)
}

.radio-container:hover::after {
    transform: translate(-50%, -50%) scale(1)
}

.radio.active input:not(:checked) ~ .radio-container {
    background-color: var(--controls-control-pressed)
}

.radio-container {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--radius-full);
    border: 1px solid var(--controls-control-border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    z-index: 1
}

.radio-container:after, .radio-container:before {
    content: "";
    border-radius: var(--radius-full);
    background: var(--controls-control-ripple-effect);
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: -1;
    transition: all 0.3s ease-in-out
}

.radio-container:before {
    background-color: var(--controls-control-primary-pressed);
    width: 15px;
    height: 15px;
    z-index: 0;
    transition: all 0.1s ease-in-out
}

.radio input:disabled ~ .radio-container {
    border-color: var(--control-disabled)
}

.radio input:disabled ~ .radio-container:before {
    background-color: var(--control-disabled);
    transform: translate(-50%, -50%) scale(1)
}

.radio input:disabled ~ .radio__label, .radio input:disabled ~ div > .radio__label, .radio input:disabled ~ div > .radio__helper-text {
    color: var(--control-disabled)
}

.radio__helper-text {
    color: var(--text-primary-paragraph);
    margin-block: var(--spacing-xs)
}

.radio__warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    color: var(--text-error)
}

.radio__warning-icon {
    width: 16px;
    height: 16px;
    color: var(--icon-error)
}

.radio--brand input:checked ~ .radio-container {
    border-color: var(--controls-control-primary-checked)
}

.radio--brand input:checked ~ .radio-container:before {
    background-color: var(--controls-control-primary-checked)
}

.radio--brand input:checked ~ .radio__label, .radio--brand input:checked ~ div > .radio__label {
    color: #0d121c
}

.radio--brand.active input:checked ~ .radio-container:before {
    background-color: var(--controls-control-primary-checked)
}

.radio--brand input:disabled ~ .radio-container {
    border-color: var(--control-disabled)
}

.radio--brand input:disabled ~ .radio-container:before {
    background-color: var(--control-disabled);
    transform: translate(-50%, -50%) scale(1)
}

.radio--brand input:disabled ~ .radio__label, .radio--brand input:disabled ~ div > .radio__label, .radio--brand input:disabled ~ div > .radio__helper-text {
    color: var(--control-disabled)
}

.dga-featured-icon {
    display: flex;
    min-width: 56px;
    width: 56px;
    height: 56px;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-sm)
}

.dga-featured-icon--xl {
    width: 56px;
    min-width: 56px;
    height: 56px
}

.dga-featured-icon--xl span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px
}

.dga-featured-icon--lg {
    width: 48px;
    min-width: 48px;
    height: 48px
}

.dga-featured-icon--lg span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px
}

.dga-featured-icon--md {
    width: 40px;
    min-width: 40px;
    height: 40px
}

.dga-featured-icon--md span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px
}

.dga-featured-icon--sm {
    width: 32px;
    min-width: 32px;
    height: 32px
}

.dga-featured-icon--sm span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px
}

.dga-featured-icon--circle {
    border-radius: var(--radius-full)
}

.dga-featured-icon--dark-brand {
    color: var(--colors-base-white);
    background-color: var(--text-success)
}

.dga-featured-icon--dark-gray {
    color: var(--colors-base-white);
    background-color: var(--colors-gray-neutral-500)
}

.dga-featured-icon--dark-error {
    color: var(--colors-base-white);
    background-color: var(--colors-error-500)
}

.dga-featured-icon--dark-warning {
    color: var(--colors-base-white);
    background-color: var(--colors-warning-400)
}

.dga-featured-icon--dark-success {
    color: var(--colors-base-white);
    background-color: var(--text-success)
}

.dga-featured-icon--dark-info {
    color: var(--colors-base-white);
    background-color: var(--colors-info-600)
}

.dga-featured-icon--light-brand {
    color: var(--text-success);
    background-color: var(--featuredicons-bg-icon-brand-light)
}

.dga-featured-icon--light-gray {
    color: var(--colors-gray-neutral-500);
    background-color: var(--colors-gray-neutral-100)
}

.dga-featured-icon--light-error {
    color: var(--text-error);
    background-color: var(--colors-error-50)
}

.dga-featured-icon--light-warning {
    color: var(--text-warning);
    background-color: var(--colors-warning-50)
}

.dga-featured-icon--light-success {
    color: var(--text-success);
    background-color: var(--featuredicons-bg-icon-brand-light)
}

.dga-featured-icon--light-info {
    color: var(--colors-info-600);
    background-color: var(--colors-info-50)
}

.dga-featured-icon--outlined-brand {
    border: 1px solid var(--colors-brand-200);
    color: var(--text-success);
    background-color: #fff0
}

.dga-featured-icon--outlined-gray {
    border: 1px solid var(--colors-gray-neutral-200);
    color: var(--colors-gray-neutral-500);
    background-color: #fff0
}

.dga-featured-icon--outlined-error {
    border: 1px solid var(--colors-error-200);
    color: var(--text-error);
    background-color: #fff0
}

.dga-featured-icon--outlined-warning {
    border: 1px solid var(--colors-warning-200);
    color: var(--text-warning);
    background-color: #fff0
}

.dga-featured-icon--outlined-success {
    border: 1px solid var(--colors-brand-200);
    color: var(--text-success);
    background-color: #fff0
}

.dga-featured-icon--outlined-info {
    border: 1px solid var(--colors-info-200);
    color: var(--colors-info-600);
    background-color: #fff0
}

.featured-icon {
    display: flex;
    min-width: 56px;
    width: 56px;
    height: 56px;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-sm)
}

.featured-icon--xl {
    width: 56px;
    min-width: 56px;
    height: 56px
}

.featured-icon--xl span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px
}

.featured-icon--lg {
    width: 48px;
    min-width: 48px;
    height: 48px
}

.featured-icon--lg span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px
}

.featured-icon--md {
    width: 40px;
    min-width: 40px;
    height: 40px
}

.featured-icon--md span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px
}

.featured-icon--sm {
    width: 32px;
    min-width: 32px;
    height: 32px
}

.featured-icon--sm span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px
}

.featured-icon--circle {
    border-radius: var(--radius-full)
}

.featured-icon--hard-brand {
    color: var(--colors-base-white);
    background-color: var(--text-success)
}

.featured-icon--hard-gray {
    color: var(--colors-base-white);
    background-color: var(--colors-gray-neutral-500)
}

.featured-icon--hard-error {
    color: var(--colors-base-white);
    background-color: var(--colors-error-500)
}

.featured-icon--hard-warning {
    color: var(--colors-base-white);
    background-color: var(--colors-warning-400)
}

.featured-icon--hard-success {
    color: var(--colors-base-white);
    background-color: var(--text-success)
}

.featured-icon--hard-info {
    color: var(--colors-base-white);
    background-color: var(--colors-info-600)
}

.featured-icon--light-brand {
    color: var(--text-success);
    background-color: var(--featuredicons-bg-icon-brand-light)
}

.featured-icon--light-gray {
    color: var(--colors-gray-neutral-500);
    background-color: var(--colors-gray-neutral-100)
}

.featured-icon--light-error {
    color: var(--text-error);
    background-color: var(--colors-error-50)
}

.featured-icon--light-warning {
    color: var(--text-warning);
    background-color: var(--colors-warning-50)
}

.featured-icon--light-success {
    color: var(--text-success);
    background-color: var(--featuredicons-bg-icon-brand-light)
}

.featured-icon--light-info {
    color: var(--colors-info-600);
    background-color: var(--colors-info-50)
}

.featured-icon--outlined-brand {
    border: 1px solid var(--colors-brand-200);
    color: var(--text-success);
    background-color: #fff0
}

.featured-icon--outlined-gray {
    border: 1px solid var(--colors-gray-neutral-200);
    color: var(--colors-gray-neutral-500);
    background-color: #fff0
}

.featured-icon--outlined-error {
    border: 1px solid var(--colors-error-200);
    color: var(--text-error);
    background-color: #fff0
}

.featured-icon--outlined-warning {
    border: 1px solid var(--colors-warning-200);
    color: var(--text-warning);
    background-color: #fff0
}

.featured-icon--outlined-success {
    border: 1px solid var(--colors-brand-200);
    color: var(--text-success);
    background-color: #fff0
}

.featured-icon--outlined-info {
    border: 1px solid var(--colors-info-200);
    color: var(--colors-info-600);
    background-color: #fff0
}

.notification-toast {
    position: fixed;
    z-index: 1000;
    display: flex;
    width: 484px;
    padding: var(--spacing-xl) var(--spacing-3xl);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xl);
    border-radius: var(--radius-md, 8px);
    background: var(--colors-base-white);
    overflow: hidden
}

.notification-toast:after {
    content: "";
    display: block;
    height: 100%;
    width: 8px;
    left: 0;
    top: 0;
    background-color: var(--colors-error-400);
    position: absolute
}

.notification-toast__close-btn {
    position: absolute;
    top: calc(var(--spacing-xl));
    right: calc(var(--spacing-3xl))
}

@media only screen and(max-width: 37.5em) {
    .notification-toast__close-btn {
        position: absolute;
        right: var(--spacing-xl)
    }
}

.notification-toast__header {
    display: flex;
    padding: var(--spacing-none);
    align-items: flex-start;
    gap: var(--spacing-lg)
}

.notification-toast__title {
    margin-bottom: var(--spacing-xs)
}

.notification-toast__action {
    padding: var(--spacing-none, 0) var(--spacing-5xl, 40px);
    gap: var(--spacing-md)
}

.notification-toast__action-mobile {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%
}

@media only screen and(max-width: 37.5em) {
    .notification-toast__action {
        display: none
    }

    .notification-toast__action-mobile {
        display: flex;
        gap: var(--spacing-md)
    }

    .notification-toast {
        width: 100%;
        padding: var(--spacing-xl)
    }

    .notification-toast:after {
        width: 100%;
        height: 8px
    }

    .notification-toast__header {
        flex-direction: column;
        gap: var(--spacing-xl)
    }
}

.notification-toast--neutral:after {
    background-color: var(--background-neutral-200)
}

.notification-toast--neutral .notification-toast__icon {
    color: var(--icon-default) !important;
    background-color: var(--background-neutral-50)
}

.notification-toast--info:after {
    background-color: var(--background-info)
}

.notification-toast--info .notification-toast__icon {
    color: var(--background-info) !important;
    background-color: var(--background-info-50)
}

.notification-toast--error:after {
    background-color: var(--background-error)
}

.notification-toast--error .notification-toast__icon {
    color: var(--background-error) !important;
    background-color: var(--background-error-50)
}

.notification-toast--warning:after {
    background-color: var(--background-warning)
}

.notification-toast--warning .notification-toast__icon {
    color: var(--background-warning) !important;
    background-color: var(--background-warning-50)
}

.notification-toast--success:after {
    background-color: var(--background-success)
}

.notification-toast--success .notification-toast__icon {
    color: var(--background-success) !important;
    background-color: var(--background-success-50)
}

html[dir="rtl"] .notification-toast__close-btn, html[lang="ar"] .notification-toast__close-btn {
    right: auto;
    left: calc(var(--spacing-3xl))
}

@media only screen and(max-width: 37.5em) {
    html[dir="rtl"] .notification-toast__close-btn, html[lang="ar"] .notification-toast__close-btn {
        right: auto;
        left: var(--spacing-xl)
    }
}

.vpostion-top {
    top: 16px
}

.vpostion-bottom {
    bottom: 16px
}

.hpostion-left {
    left: 16px
}

.hpostion-right {
    right: 16px
}

.notification-toast__icon {
    display: grid;
    place-items: center
}

.alert {
    display: flex;
    width: 100%;
    padding: var(--spacing-xl) var(--spacing-3xl);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xl);
    border-radius: var(--radius-md);
    background: var(--colors-base-white);
    border: 1px solid var(--border-neutral-primary);
    position: relative;
    overflow: hidden
}

.alert:after {
    content: "";
    display: block;
    height: 100%;
    width: 8px;
    left: 0;
    top: 0;
    background-color: var(--colors-error-400);
    position: absolute
}

.alert__close-btn {
    position: absolute;
    top: var(--spacing-xl);
    right: var(--spacing-3xl)
}

@media only screen and(max-width: 37.5em) {
    .alert__close-btn {
        right: var(--spacing-xl)
    }
}

.alert__header {
    display: flex;
    padding: var(--spacing-none);
    align-items: flex-start;
    gap: var(--spacing-lg)
}

.alert__title {
    margin-bottom: var(--spacing-xs)
}

.alert__action {
    padding: var(--spacing-none, 0) var(--spacing-5xl, 40px);
    gap: var(--spacing-md)
}

.alert__action-mobile {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%
}

@media only screen and(max-width: 37.5em) {
    .alert__action {
        display: none
    }

    .alert__action-mobile {
        display: flex
    }

    .alert {
        width: 100%;
        padding: var(--spacing-xl)
    }

    .alert:after {
        width: 100%;
        height: 8px
    }

    .alert__header {
        flex-direction: column;
        gap: var(--spacing-xl)
    }
}

.alert--neutral:after {
    background-color: var(--background-neutral-200)
}

.alert--info:after {
    background-color: var(--background-info)
}

.alert--error:after {
    background-color: var(--background-error)
}

.alert--warning:after {
    background-color: var(--background-warning)
}

.alert--success:after {
    background-color: var(--background-success)
}

.alert--neutral-bg {
    background-color: var(--background-notification-white);
    border-color: var(--border-neutral-primary)
}

.alert--neutral-bg:after {
    background-color: var(--background-notification-white)
}

.alert--info-bg {
    background-color: var(--background-info-25);
    border-color: var(--border-info-light)
}

.alert--info-bg:after {
    background-color: var(--colors-info-400)
}

.alert--error-bg {
    background-color: var(--background-error-25);
    border-color: var(--border-error-light)
}

.alert--error-bg:after {
    background-color: var(--colors-error-400)
}

.alert--warning-bg {
    background-color: var(--background-warning-25);
    border-color: var(--border-warning-light)
}

.alert--warning-bg:after {
    background-color: var(--colors-warning-400)
}

.alert--success-bg {
    background-color: var(--background-success-25);
    border-color: var(--border-success-light)
}

.alert--success-bg:after {
    background-color: var(--colors-success-400)
}

:is(html[lang="ar"],html[dir="rtl"]).alert__close-btn {
    right: auto;
    left: var(--spacing-3xl)
}

@media only screen and(max-width: 37.5em) {
    :is(html[lang="ar"],html[dir="rtl"]).alert__close-btn {
        right: auto;
        left: var(--spacing-xl)
    }
}

.dga-form-control {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.dga-form-control--fullwidth {
    width: 100%
}

textarea {
    margin: 0
}

.dga-textarea:hover {
    border-color: var(--form-field-border-hovered)
}

.dga-textarea--lg {
    height: auto;
    min-height: 96px
}

.dga-textarea {
    display: inline-flex;
    justify-content: flex-start;
    border-radius: var(--radius-sm);
    border: 1px solid var(--form-field-border-default);
    background: var(--form-field-background-default);
    overflow: hidden;
    position: relative
}

.dga-textarea:focus {
    box-shadow: var(--shadow-md)
}

.dga-textarea::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    transform: translateX(-50%);
    background-color: var(--form-field-border-pressed, #007aff);
    transition: width 0.2s ease-in-out
}

.dga-textarea:focus-within::after {
    width: 100%
}

.dga-textarea__field--resize {
    resize: vertical
}

.dga-textarea__field {
    background-color: #fff0;
    border: 0;
    outline: 0;
    height: 100%;
    width: 100%;
    color: var(--form-field-text-filled);
    padding: var(--spacing-lg) var(--spacing-xl);
    resize: none;
    position: relative
}

.input {
    display: flex;
    height: 40px;
    width: 100%;
    min-width: 200px;
    justify-content: flex-start;
    padding: var(--spacing-none) var(--spacing-xl);
    border-radius: var(--radius-sm);
    gap: var(--spacing-xs);
    border: 1px solid var(--form-field-border-default);
    background: var(--form-field-background-default);
    position: relative
}

.dga-textarea--lg .dga-textarea__field, .dga-textarea--lg, .dga-textarea__field::placeholder {
    font: 400 14px / 20px IBMPlexSansArabic
}

.input:hover {
    border-color: var(--form-field-border-hovered)
}

.input:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    transform: translate(-50%);
    background-color: var(--form-field-border-pressed);
    transition: width 0.2s ease-in-out
}

.input__field {
    background-color: #fff0;
    border: 0;
    outline: 0;
    height: 100%;
    width: 100%;
    color: var(--form-field-text-focused)
}

.input__field::-moz-placeholder {
    color: var(--form-field-text-placeholder);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.input__field::placeholder {
    color: var(--form-field-text-placeholder);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.input.focus:after {
    width: 100%
}

.input.active:after {
    width: 50%
}

.input--readonly, .input--readonly:hover, .input--disabled, .input--disabled:hover {
    border-color: var(--border-neutral-primary);
    box-shadow: none !important
}

.input--readonly:after, .input--disabled:after {
    display: none
}

.input--readonly .input__field::-moz-placeholder, .input--disabled .input__field::-moz-placeholder {
    color: var(--form-field-text-readonly)
}

.input--readonly .input__field, .input--readonly .input__field::placeholder, .input--disabled .input__field, .input--disabled .input__field::placeholder {
    color: var(--form-field-text-readonly)
}

.input--disabled {
    border-color: var(--border-disabled)
}

.input--disabled .input__field {
    color: var(--text-default-disabled)
}

.input--disabled .input__field::-moz-placeholder {
    color: var(--text-default-disabled)
}

.input--disabled .input__field, .input--disabled .input__field::placeholder {
    color: var(--text-default-disabled)
}

.input--disabled .input__icon span, .input--disabled .input__prefix--subtle-text, .input--disabled .input__prefix--solid-text {
    color: var(--text-default-disabled)
}

.input__icon {
    height: 100%;
    display: inline-flex;
    align-items: center
}

.input__icon span {
    color: var(--form-field-border-hovered);
    font-size: 20px
}

.input__feedback-icon {
    height: 100%;
    display: inline-flex;
    align-items: center
}

.input__feedback-icon span {
    font-size: 20px;
    position: relative;
    z-index: 0
}

.input__feedback-icon--success {
    color: var(--text-success)
}

.input__feedback-icon--success span:after {
    background-color: var(--colors-brand-100)
}

.input__feedback-icon--error {
    color: var(--text-error)
}

.input__feedback-icon--error span:after {
    background-color: var(--text-error-100)
}

.input__feedback-icon--warning {
    color: var(--text-warning)
}

.input__feedback-icon--warning span:after {
    background-color: var(--colors-warning-100)
}

.input__feedback-icon--warning-triangle {
    color: var(--text-warning)
}

.input__feedback-icon--warning-triangle span:after {
    width: 0 !important;
    height: 0 !important;
    transform: scale(1) !important;
    border: 12px solid #fff0;
    border-top: 0;
    border-bottom: 20px solid var(--colors-warning-100);
    border-radius: 0 !important;
    left: -2px !important;
    top: -1px !important
}

.input__feedback-icon--ring span:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1.16);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--radius-full);
    z-index: -1
}

.input__prefix-label, .input__prefix-icon, .input__prefix-chevron, .input__suffix-label, .input__suffix-icon, .input__suffix-chevron {
    color: var(--colors-text-primary)
}

.input__prefix .dropdown__label, .input__suffix .dropdown__label {
    display: none
}

.input__prefix .dropdown__label--selection, .input__suffix .dropdown__label--selection {
    display: inline-block;
    white-space: nowrap
}

.input__prefix .dropdown__label--selection ~ .input__prefix-label, .input__suffix .dropdown__label--selection ~ .input__prefix-label {
    display: none
}

.input__prefix-chevron, .input__suffix-chevron {
    font-size: 30px !important;
    transform: rotate(0);
    transition: all 0.3s ease-in-out
}

.input__prefix.active, .input__suffix.active {
    background-color: var(--colors-gray-neutral-300)
}

.input__prefix--solid, .input__suffix--solid, .input__prefix--solid-text, .input__suffix--solid-text {
    background-color: var(--colors-gray-neutral-100)
}

.input__prefix--solid-text .input__prefix-label, .input__suffix--solid-text .input__prefix-label {
    color: var(--colors-text-quarterary)
}

.input__prefix--solid:hover, .input__suffix--solid:hover {
    background-color: var(--colors-gray-neutral-200)
}

.input__prefix--solid:focus, .input__suffix--solid:focus {
    background-color: #fff0;
    border: 4px solid var(--colors-base-black);
    border-radius: 0
}

.input__prefix--solid.active, .input__suffix--solid.active {
    background-color: var(--colors-gray-neutral-300);
    border: 0
}

.input__prefix--solid:disabled, .input__suffix--solid:disabled {
    background-color: var(--colors-gray-neutral-100)
}

.input__prefix--solid:disabled .input__prefix-label, .input__prefix--solid:disabled .input__prefix-icon, .input__prefix--solid:disabled .input__prefix-chevron, .input__suffix--solid:disabled .input__prefix-label, .input__suffix--solid:disabled .input__prefix-icon, .input__suffix--solid:disabled .input__prefix-chevron {
    color: var(--colors-gray-neutral-300)
}

.input__prefix--subtle, .input__suffix--subtle, .input__prefix--subtle-text, .input__suffix--subtle-text {
    background-color: #fff0
}

.input__prefix--subtle-text .input__prefix-label, .input__suffix--subtle-text .input__prefix-label {
    color: var(--colors-text-quarterary)
}

.input__prefix--subtle:hover, .input__suffix--subtle:hover {
    background-color: var(--colors-gray-neutral-50)
}

.input__prefix--subtle:focus, .input__suffix--subtle:focus {
    background-color: #fff0;
    border: 4px solid var(--colors-base-black)
}

.input__prefix--subtle.active, .input__suffix--subtle.active {
    background-color: var(--colors-gray-neutral-200);
    border: 0
}

.input__prefix--subtle:disabled .input__prefix-label, .input__prefix--subtle:disabled .input__prefix-icon, .input__prefix--subtle:disabled .input__prefix-chevron, .input__suffix--subtle:disabled .input__prefix-label, .input__suffix--subtle:disabled .input__prefix-icon, .input__suffix--subtle:disabled .input__prefix-chevron {
    color: var(--colors-gray-neutral-300)
}

.input__prefix.selected, .input__suffix.selected {
    background-color: var(--form-field-border-hovered)
}

.input__prefix.selected .input__prefix-icon, .input__prefix.selected .input__prefix-label, .input__prefix.selected .input__prefix-chevron, .input__suffix.selected .input__prefix-icon, .input__suffix.selected .input__prefix-label, .input__suffix.selected .input__prefix-chevron, .input__prefix.selected .dropdown__label, .input__suffix.selected .dropdown__label {
    color: var(--colors-text-primary_on-brand)
}

.input__dropdown-btn.open + .input__dropdown-list {
    z-index: 2;
    opacity: 1;
    padding-block: var(--spacing-md);
    max-height: 376px;
    pointer-events: auto;
    overflow-y: auto
}

.input__dropdown-btn.open .input__dropdown .input__prefix-chevron, .input__dropdown-btn.open .input__dropdown .input__suffix-chevron {
    transform: rotate(180deg)
}

.input__prefix {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm)
}

.input__suffix {
    margin-right: calc(-1 * var(--spacing-2));
    margin-left: var(--spacing-xl);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0
}

.input--lighter {
    border: 0;
    background: var(--form-field-background-lighter, #fcfcfd)
}

.input--lighter:hover, .input--lighter.focus, .input--lighter.active {
    border: 1px solid var(--form-field-border-default)
}

.input--darker {
    border: 0;
    background-color: var(--form-field-background-darker, #f3f4f6)
}

.input--darker:hover {
    border: 1px solid var(--form-field-border-default)
}

.input--darker.focus, .input--darker.active {
    border: 1px solid var(--form-field-border-default);
    background-color: var(--form-field-background-default) !important
}

.input.readOnly {
    border: 1px solid var(--border-neutral-primary) !important;
    background-color: var(--form-field-background-default) !important;
    box-shadow: none !important
}

.input.readOnly:after {
    content: none
}

.input--error, .input--error:hover {
    border: 1px solid var(--form-field-border-error) !important
}

.input--error:after {
    background-color: var(--form-field-border-error)
}

.input--lg {
    height: 40px
}

.input--lg .input__field::-moz-placeholder {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.input--lg .input__field, .input--lg .input__field::placeholder {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.input--lg__feedback-icon span {
    font-size: 20px
}

.input--lg .input__prefix-icon, .input--lg .input__suffix-icon {
    font-size: 24px
}

.input--lg .input__prefix-chevron, .input--lg .input__suffix-chevron {
    font-size: 20px
}

.input--md {
    height: 32px
}

.input--md .input__field::-moz-placeholder {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.input--md .input__field, .input--md .input__field::placeholder {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.input--md__feedback-icon span {
    font-size: 16px
}

.input--md .input__prefix-icon, .input--md .input__suffix-icon {
    font-size: 20px
}

.input--md .input__prefix-chevron, .input--md .input__suffix-chevron {
    font-size: 16px
}

.link {
    display: inline-flex;
    padding: var(--spacing-none);
    align-items: center;
    gap: 4px;
    border-radius: var(--radius-xs);
    cursor: pointer
}

.link__icon {
    display: inline-flex;
    height: 100%;
    align-items: center;
    justify-content: center
}

.link:hover .link__label, .link--inline .link__label {
    text-decoration: underline
}

.link, .link--primary {
    color: var(--link-primary)
}

.link:hover, .link--primary:hover {
    color: var(--link-primary-hovered) !important;
    text-decoration: underline
}

.link:visited:active {
    color: #88d8ad !important
}

.link.active, .link--primary.active {
    color: var(--link-primary-pressed)
}

.link.focus, .link--primary.focus {
    color: var(--link-primary-focused);
    border: 2px solid var(--border-black);
    border-radius: var(--radius-xs)
}

.link--neutral {
    color: var(--link-neutral)
}

.link--neutral:hover {
    color: var(--link-neutral-hovered)
}

.link--neutral.active {
    color: var(--link-neutral-pressed)
}

.link--neutral:focus {
    color: var(--link-neutral-focused);
    outline: 2px solid var(--border-black);
    border-radius: var(--radius-xs)
}

.link--on-color {
    color: var(--link-oncolor)
}

.link--on-color:hover {
    color: var(--link-oncolor-hovered)
}

.link--on-color.active {
    color: var(--link-oncolor-pressed)
}

.link--on-color:visited {
    color: var(--link-oncolor-visited) !important
}

.link--on-color:focus {
    color: var(--link-oncolor-focused);
    outline: 2px solid var(--border-white);
    border-radius: var(--radius-xs)
}

.link--disabled, .link--disabled:hover {
    color: var(--link-oncolor-disabled)
}

.link--disabled:hover .link__label {
    text-decoration: none
}

.link--md .link__icon {
    width: 20px;
    height: 20px
}

.link--sm .link__icon {
    width: 16px;
    height: 16px
}

:is(html[lang="ar"],html[dir="rtl"]) {
    flex-direction: row-reverse
}

.dropdown {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 200px;
    position: relative;
    border-radius: var(--radius-sm)
}

.dropdown__label {
    color: var(--colors-text-placeholder);
    display: none
}

.dropdown__label--selection {
    color: var(--field-text-filled);
    display: inline-block
}

.dropdown__label--selection ~ .dropdown__label-placeholder {
    display: none
}

.dropdown__chevron {
    position: absolute;
    top: 50%;
    right: var(--spacing-xl);
    transform: translateY(-50%);
    color: var(--icon-default);
    transition: all 0.4s ease-in-out;
    display: flex
}

.dropdown__btn {
    cursor: pointer;
    height: auto;
    min-height: 40px;
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--form-field-border-default);
    background-color: var(--form-field-background-default);
    padding: var(--spacing-none) var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    color: var(--form-field-text-placeholder)
}

.dropdown__btn:focus {
    outline: 0
}


.dropdown__btn:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    transform: translate(-50%);
    background-color: var(--form-field-border-pressed);
    transition: width 0.2s ease-in-out
}

.dropdown__btn.open .dropdown__chevron {
    transform: rotate(180deg) translateY(50%)
}

.dropdown__btn.open:after {
    width: 100%
}

.dropdown__btn.active {
    background-color: var(--Colors-Gray-neutral-50)
}

.dropdown__btn.active:after {
    width: 50%
}

.dropdown--readonly .dropdown__btn, .dropdown--disabled .dropdown__btn {
    border-color: var(--colors-gray-neutral-300)
}

.dropdown--readonly .dropdown__btn:hover, .dropdown--disabled .dropdown__btn:hover {
    border-color: var(--colors-gray-neutral-300);
    box-shadow: none !important
}

.dropdown--readonly .dropdown__btn:after, .dropdown--disabled .dropdown__btn:after {
    display: none
}

.dropdown--readonly .dropdown__btn, .dropdown--readonly .dropdown__label, .dropdown--readonly .dropdown__label-placeholder, .dropdown--disabled .dropdown__btn, .dropdown--disabled .dropdown__label, .dropdown--disabled .dropdown__label-placeholder {
    color: var(--form-field-text-placeholder)
}

.dropdown--readonly .dropdown__chevron, .dropdown--disabled .dropdown__chevron, .dropdown--disabled .dropdown__btn, .dropdown--disabled .dropdown__label, .dropdown--disabled .dropdown__label-placeholder {
    color: var(--colors-gray-neutral-300)
}

.dropdown__list, .dga-search-box__dropdown-list, .textarea__dropdown-list, .input__dropdown-list {
    display: flex;
    padding: var(--spacing-md);
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-neutral-primary);
    background: var(--form-field-background-default);
    position: absolute;
    left: 0;
    right: 0;
    top: 45px;
    overflow-y: auto;
    list-style: none;
    height: auto;
    max-height: 0;
    padding-block: 0;
    z-index: -2;
    opacity: 0;
    overflow: hidden;
    transition: z-index 0.1s ease-in-out, padding-block 0.1s ease-in-out, max-height 0.2s 0.01s ease-in-out;
    pointer-events: none
}

.dropdown__list::-webkit-scrollbar, .dga-search-box__dropdown-list::-webkit-scrollbar, .textarea__dropdown-list::-webkit-scrollbar, .input__dropdown-list::-webkit-scrollbar {
    height: 100px;
    width: calc(8px + 2 * var(--spacing-xs))
}

.dropdown__list::-webkit-scrollbar-track, .dga-search-box__dropdown-list::-webkit-scrollbar-track, .textarea__dropdown-list::-webkit-scrollbar-track, .input__dropdown-list::-webkit-scrollbar-track {
    background-color: #fff0;
    padding: var(--spacing-xs)
}

.dropdown__list::-webkit-scrollbar-thumb, .dga-search-box__dropdown-list::-webkit-scrollbar-thumb, .textarea__dropdown-list::-webkit-scrollbar-thumb, .input__dropdown-list::-webkit-scrollbar-thumb {
    height: 100px;
    border-radius: var(--radius-full);
    border: var(--spacing-xs) solid #fff0;
    background-color: var(--colors-gray-neutral-300);
    background-clip: content-box;
    mix-blend-mode: multiply
}

.dropdown__list li, .dga-search-box__dropdown-list li, .textarea__dropdown-list li, .input__dropdown-list li {
    width: 100%;
    padding: 0;
    margin: 0
}

.dropdown__list-group {
    list-style: none
}

.dropdown__list-group-label {
    padding: var(--spacing-md, 8px) var(--spacing-md, 8px) var(--spacing-none, 0) var(--spacing-md, 8px) !important;
    color: var(--colors-text-quarterary)
}

.dropdown__btn.open + .dropdown__list, .dropdown__btn.open + .dga-search-box__dropdown-list, .dropdown__btn.open + .textarea__dropdown-list, .dropdown__btn.open + .input__dropdown-list {
    z-index: 2;
    opacity: 1;
    padding-block: var(--spacing-md);
    max-height: 376px;
    pointer-events: auto;
    overflow-y: auto
}

.dropdown__option {
    cursor: pointer;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
    border-radius: var(--radius-sm);
    background-color: #fff0;
    border: 0;
    margin: 0
}

.dropdown__option-label {
    color: var(--text-default)
}

.dropdown__option-icon {
    opacity: 0
}

.dropdown__option:hover {
    background-color: var(--form-option-background-hover)
}

.dropdown__option:focus {
    outline: 2px solid var(--border-black)
}

.dropdown__option.active {
    outline: none;
    background-color: var(--form-option-background-pressed)
}

.dropdown__option.selected > .dropdown__option-icon {
    opacity: 1
}

.dropdown__option--checkbox .dropdown__option-icon {
    display: none !important;
    color: var(--form-field-background-default);
    font-size: 18px !important;
    font-weight: bolder !important
}

.dropdown__option--checkbox.selected > .dropdown__option-icon-container {
    background-color: var(--form-field-border-pressed)
}

.dropdown__option--checkbox.selected > .dropdown__option-icon-container > .dropdown__option-icon {
    opacity: 1;
    display: inline-block !important;
    color: var(--field-background-default) !important
}

.dropdown__option--checkbox .dropdown__option-icon-container {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--colors-gray-neutral-500);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    margin: var(--spacing-xs);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.dropdown--multi-select {
    min-height: 40px;
    height: auto
}

.dropdown--multi-select .dropdown__option {
    justify-content: flex-start
}

.dropdown--error .dropdown__btn {
    border: 1px solid var(--form-field-border-error) !important
}

.dropdown--error .dropdown__btn:after {
    background-color: var(--form-field-border-error) !important
}

.dropdown__feedback-icon {
    height: 100%;
    display: inline-flex;
    align-items: center;
    margin-right: calc(var(--spacing-xl) + 10px)
}

.dropdown__feedback-icon span {
    font-size: 20px;
    position: relative;
    z-index: 0
}

.dropdown__feedback-icon span:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1.16);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--radius-full);
    z-index: -1
}

.dropdown__feedback-icon--success {
    color: var(--text-success)
}

.dropdown__feedback-icon--success span:after {
    background-color: var(--colors-brand-100)
}

.dropdown__feedback-icon--error {
    color: var(--text-error)
}

.dropdown__feedback-icon--error span:after {
    background-color: var(--text-error-100)
}

.dropdown__feedback-icon--warning {
    color: var(--text-warning)
}

.dropdown__feedback-icon--warning span:after {
    background-color: var(--text-warning-100)
}

.dropdown--lighter .dropdown__btn {
    border: 0
}

.dropdown--lighter .dropdown__btn:hover {
    border: 1px solid var(--form-field-border-default)
}

.dropdown--lighter .dropdown__btn.open {
    border: 1px solid var(--form-field-border-default);
    background-color: var(--form-field-background-default)
}

.dropdown--lighter .dropdown__btn.active {
    border: 1px solid var(--form-field-border-default);
    background-color: var(--form-field-background-pressed)
}

.dropdown--darker .dropdown__btn {
    border: 0;
    background-color: var(--form-field-background-darker)
}

.dropdown--darker .dropdown__btn:hover {
    border: 1px solid var(--form-field-border-default)
}

.dropdown--darker .dropdown__btn.open {
    border: 1px solid var(--form-field-border-default);
    background-color: var(--form-field-background-default)
}

.dropdown--darker .dropdown__btn.active {
    border: 1px solid var(--form-field-border-default);
    background-color: var(--form-field-background-pressed)
}

.dropdown--lg .dropdown__btn {
    height: auto;
    min-height: 40px
}

.dropdown--lg .dropdown__feedback-icon span {
    font-size: 20px
}

.dropdown--lg .dropdown__list, .dropdown--lg .dga-search-box__dropdown-list, .dropdown--lg .textarea__dropdown-list, .dropdown--lg .input__dropdown-list {
    top: 40px
}

.dropdown--lg .dropdown__option-icon {
    font-size: 24px
}

.dropdown--md .dropdown__btn {
    height: auto;
    min-height: 32px
}

.dropdown--md .dropdown__feedback-icon span {
    font-size: 16px
}

.dropdown--md .dropdown__list, .dropdown--md .dga-search-box__dropdown-list, .dropdown--md .textarea__dropdown-list, .dropdown--md .input__dropdown-list {
    top: 32px
}

.dropdown--md .dropdown__option-icon {
    font-size: 20px
}

[dir="rtl"] .dropdown__chevron {
    right: auto;
    left: var(--spacing-xl)
}

body.modal-open {
    overflow: hidden
}

dialog {
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #0000;
    border: none
}

dialog::backdrop {
    background: #00000078;
    -webkit-backdrop-filter: blur(3.1px);
    backdrop-filter: blur(3.1px)
}

dialog .modal {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 600px;
    padding: var(--spacing-3xl);
    background-color: var(--background-white);
    border-radius: var(--radius-md)
}

@media only screen and(max-width: 56.25em) {
    dialog .modal {
        width: 100%
    }
}

dialog .modal__header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

dialog .modal__body {
    width: 100%
}

dialog .modal__heading {
    color: var(--text-display)
}

dialog .modal__content {
    color: var(--text-primary-paragraph);
    padding-bottom: var(--spacing-xl)
}

dialog .modal__actions {
    width: 100%
}

dialog .modal__actions .btn {
    margin: 0
}

dialog .modal__actions, dialog .modal__actions-btn-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

@media only screen and(max-width: 56.25em) {
    dialog .modal__actions, dialog .modal__actions-btn-group {
        flex-direction: column-reverse;
        width: 100%
    }

    dialog .modal__actions .btn, dialog .modal__actions-btn-group .btn {
        width: 100%
    }

    dialog .modal__actions-btn {
        width: 100%
    }
}

dialog .modal__actions > dialog .modal__actions-btn:first-child {
    display: flex
}

@media only screen and(max-width: 56.25em) {
    dialog .modal__actions > dialog .modal__actions-btn:first-child {
        display: none
    }
}

dialog .modal__actions > dialog .modal__actions-btn:nth-child(2) {
    display: none
}

@media only screen and(max-width: 56.25em) {
    dialog .modal__actions > dialog .modal__actions-btn:nth-child(2) {
        display: flex
    }
}

.tabs-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.tabs-list--horizontal {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    position: relative;
    width: 100%
}

.tabs-list--horizontal::-webkit-scrollbar {
    height: 5px
}

.tabs-list--horizontal::-webkit-scrollbar-track {
    background-color: #fff0;
    padding: 1px
}

.tabs-list--horizontal::-webkit-scrollbar-thumb {
    height: 5px;
    border-radius: 10px;
    border: 1px solid #fff0;
    background-color: #ccc;
    background-clip: content-box;
    mix-blend-mode: multiply
}

.tabs-list--horizontal.tabs-list--divider:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: 3px;
    width: 100%;
    border-radius: var(--radius-full);
    background-color: var(--border-neutral-primary)
}

.tabs-list--vertical {
    display: inline-flex;
    align-items: start;
    flex-direction: column;
    gap: 3px
}

.tabs-list--vertical li {
    width: 100%
}

.tabs-list--vertical .tabs-list__item {
    justify-content: start !important
}

.tabs-list__item {
    display: flex;
    padding: var(--spacing-lg) var(--spacing-xl);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-sm);
    color: var(--text-primary-paragraph);
    position: relative;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none
}

.tabs-list__item:hover {
    background-color: var(--button-background-neutral-hovered);
    color: var(--colors-text-primary);
    text-decoration: none
}

.tabs-list__item:hover .tabs-list__label, .tabs-list__item:hover .tabs-list__icon {
    color: var(--colors-text-primary)
}

.tabs-list__item:hover:after, .tabs-list__item:active:after, .tabs-list__item--active:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translate(-50%);
    width: calc(100% - var(--spacing-xl) * 2);
    height: 3px;
    border-radius: var(--radius-full);
    background-color: var(--border-black);
    z-index: 1
}

.tabs-list__item:focus {
    outline: 2px solid var(--colors-base-black);
    position: relative;
    color: var(--text-default)
}

.tabs-list__item:focus:before {
    content: "";
    display: block;
    background-color: #fff0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: var(--radius-md)
}

.tabs-list__item:active {
    background: var(--button-background-neutral-pressed);
    outline: none
}

.tabs-list__item:active .tabs-list__icon, .tabs-list__item:active .tabs-list__label {
    color: var(--icon-default)
}

.tabs-list__item:active:after {
    background-color: var(--icon-default)
}

.tabs-list__item:active:before {
    display: none
}

.tabs-list__item--active .tabs-list__icon {
    color: var(--icon-default)
}

.tabs-list__item--active:after {
    background-color: var(--border-primary)
}

.tabs-list__item--active:active {
    background-color: #fff0;
    outline: none
}

.tabs-list__item--active:active .tabs-list__icon {
    color: var(--icon-default)
}

.tabs-list__item--active:hover {
    background-color: #fff0;
    color: var(--text-default)
}

.tabs-list__item--active:hover:after {
    background-color: var(--border-primary)
}

.tabs-list__item--md {
    padding: var(--spacing-lg) var(--spacing-xl)
}

.tabs-list__item--sm {
    padding: var(--spacing-md) var(--spacing-lg)
}

.tabs-list__item--sm:after {
    width: calc(100% - var(--spacing-lg) * 2)
}

.tabs-list__item.disabled {
    cursor: default
}

.tabs-list__item.disabled .tabs-list__label, .tabs-list__item.disabled .tabs-list__icon {
    color: var(--text-default-disabled)
}

.tabs-list__item.disabled:after {
    background-color: var(--text-default-disabled)
}

.tabs-list__item.disabled:hover, .tabs-list__item.disabled:active {
    background-color: #fff0
}

.tabs-list__item.disabled:focus {
    outline: none
}

.tabs-list__item.disabled:hover:after, .tabs-list__item.disabled:active:after, .tabs-list__item.disabled--active:after {
    display: none
}

.tabs-list__icon {
    display: flex;
    align-items: center;
    color: var(--unselected-tab-icon);
    width: 16px;
    height: 16px
}

.tabs-list--vertical .tabs-list__item:hover:after, .tabs-list--vertical .tabs-list__item:active:after, .tabs-list--vertical .tabs-list__item--active:after {
    inset: 50% auto auto 1px;
    transform: translateY(-50%);
    height: calc(100% - var(--spacing-md) * 2);
    min-height: 16px;
    width: 3px
}

.tabs-list--vertical .tabs-list__item--md {
    padding: var(--spacing-sm) var(--spacing-lg)
}

.tabs-list--vertical .tabs-list__item--sm {
    padding: var(--spacing-xxs) var(--spacing-sm)
}

.tabs-list .btn--icon {
    width: 15px !important;
    height: 15px !important
}

[dir="rtl"] .tabs-list--vertical .tabs-list__item:hover:after, [dir="rtl"] .tabs-list--vertical .tabs-list__item:active:after, [dir="rtl"] .tabs-list--vertical .tabs-list__item--active:after {
    right: 1px;
    left: auto
}

@media only screen and(max-width: 768px) {
    .breadcrumb {
        justify-content: center
    }
}

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

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--size-4, 4px);
    color: var(--link-neutral);
    cursor: pointer;
    padding-right: var(--size-4, 4px)
}

.breadcrumb-item.active {
    color: var(--text-default-disabled)
}

.breadcrumb-item:not(:first-child) {
    display: flex;
    align-items: center
}

.breadcrumb-item .disabled-link {
    cursor: not-allowed
}

.breadcrumb-item .disabled-link:hover, .breadcrumb-item .disabled-link:hover .link__label {
    text-decoration: none
}

.breadcrumb-item.ellipsis .link {
    align-items: flex-end
}

.breadcrumb-icon {
    color: var(--text-default-disabled);
    width: 16px;
    height: 16px;
    font-size: 20px;
    display: flex;
    align-items: center
}

:is(html[lang="ar"],html[dir="rtl"]).breadcrumb-item:first-child {
    padding-right: 0;
    padding-left: 4px
}

:is(html[lang="ar"],html[dir="rtl"]).breadcrumb-icon {
    transform: rotate(180deg)
}

.notification {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-3xl);
    border-bottom: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.notification__content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-3xl)
}

.notification__icon {
    display: grid;
    place-items: center;
    color: var(--controls-control-neutral-pressed)
}

.notification__lead-text {
    color: var(--colors-text-secondary)
}

.notification__dismiss {
    position: absolute;
    right: var(--spacing-3xl);
    transform: translate(50%)
}

.notification--critical {
    border-color: var(--background-error);
    background-color: var(--notification-background-error-light)
}

.notification--critical .notification__content, .notification--critical .notification__icon, .notification--critical .notification__lead-text {
    color: var(--text-error)
}

.notification--warning {
    border-color: var(--background-warning);
    background-color: var(--notification-background-warning-light)
}

.notification--warning .notification__content, .notification--warning .notification__icon, .notification--warning .notification__lead-text {
    color: var(--text-warning)
}

.notification--success {
    border-color: var(--background-success);
    background-color: var(--notification-background-success-light)
}

.notification--success .notification__content, .notification--success .notification__icon, .notification--success .notification__lead-text {
    color: var(--text-success)
}

.notification--info {
    border-color: var(--background-info);
    background-color: var(--notification-background-info-light)
}

.notification--info .notification__content, .notification--info .notification__icon, .notification--info .notification__lead-text {
    color: var(--text-info)
}

.notification--neutral {
    border-color: var(--background-black);
    background-color: var(--background-neutral-50)
}

.notification--neutral .notification__content, .notification--neutral .notification__icon, .notification--neutral .notification__lead-text {
    color: var(--text-primary-paragraph)
}

html[dir="rtl"] .notification__dismiss, html[lang="ar"] .notification__dismiss {
    right: auto;
    left: var(--spacing-3xl);
    transform: translate(-50%)
}

.file-upload {
    display: flex;
    width: 100%;
    max-width: 334px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-8, 8px)
}

.file-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.file-upload__drop-area {
    display: flex;
    padding: var(--spacing-3xl);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    width: 100%;
    border-radius: var(--radius-4, 4px);
    background: var(--colors-gray-neutral-50);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23D2D6DBFF' stroke-width='2' stroke-dasharray='12%2c6.5' stroke-dashoffset='5' stroke-linecap='square'/%3e%3c/svg%3e")
}

.file-upload__icon {
    font-size: 32px;
    color: var(--colors-gray-neutral-500);
    display: flex;
    align-items: center
}

.file-upload__content {
    text-align: center
}

.file-upload__instructions {
    font: 500 16px/24px IBMPlexSans-Medium;
    color: var(--text-display)
}

.file-upload__formats {
    color: var(--text-primary-paragraph)
}

.file-upload__item {
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-neutral-primary);
    background: var(--background-neutral-100)
}

.file-upload__file-item, .file-upload__file-item--error {
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-neutral-primary);
    background: var(--background-neutral-100);
    padding: var(--spacing-md);
    gap: 8px;
    width: 100%
}

.file-upload__file-item--error, .file-upload__file-item--error--error {
    border-color: var(--border-error)
}

.file-upload__file-item--error .file-upload__file-item, .file-upload__file-item--error--error .file-upload__file-item {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--border-neutral-primary)
}

.file-upload__file-item--error .file-upload__file-item-msg, .file-upload__file-item--error--error .file-upload__file-item-msg {
    display: flex;
    width: 100%;
    flex-direction: column;
    color: var(--text-error-primary);
    align-items: flex-start;
    gap: 8px
}

.file-upload__file-status--complete, .file-upload__file-status--error {
    font-size: 28px;
    display: flex;
    align-items: center
}

.file-upload__file-status--complete {
    color: var(--text-success)
}

.file-upload__file-status--error {
    color: var(--text-error-primary)
}

.file-upload__file-name {
    color: var(--text-default);
    overflow: hidden;
    white-space: nowrap;
    flex: 1
}

.file-upload__files-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
}

.file-upload--drag-over .file-upload__drop-area {
    background-color: var(--featuredicons-bg-icon-brand-light);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%231B8354FF' stroke-width='2' stroke-dasharray='12%2c6.5' stroke-dashoffset='5' stroke-linecap='square'/%3e%3c/svg%3e")
}

.file-upload--drag-over .file-upload__icon {
    color: var(--icon-success)
}

.file-upload--drag-over .file-upload__instructions, .file-upload--drag-over .file-upload__formats {
    color: var(--text-success)
}

.file-upload--disabled .file-upload__drop-area {
    background-color: var(--background-disabled)
}

.file-upload--disabled .file-upload__icon, .file-upload--disabled .file-upload__instructions, .file-upload--disabled .file-upload__formats {
    color: var(--text-default-disabled)
}

.loading {
    display: flex;
    justify-content: center;
    align-items: center
}

.loading__circle {
    position: relative;
    border: 2px solid var(--background-neutral-100);
    border-top-color: var(--background-black);
    mix-blend-mode: multiply;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: spin 0.5s linear infinite;
    animation-delay: 1ms
}

.loading--tiny {
    width: 20px;
    height: 20px
}

.loading--xs {
    width: 24px;
    height: 24px
}

.loading--sm {
    width: 28px;
    height: 28px
}

.loading--md {
    width: 32px;
    height: 32px
}

.loading--lg {
    width: 36px;
    height: 36px
}

.loading--xl {
    width: 40px;
    height: 40px
}

.loading--huge {
    width: 44px;
    height: 44px
}

.loading--neutral .loading__circle {
    border-color: var(--background-neutral-100);
    border-top-color: var(--background-black)
}

.loading--neutral .loading__circle:after, .loading--neutral .loading__circle:before {
    background-color: var(--background-black)
}

.loading--brand .loading__circle {
    border-color: var(--background-neutral-100);
    border-top-color: var(--background-primary)
}

.loading--brand .loading__circle:after, .loading--brand .loading__circle:before {
    background-color: var(--background-primary)
}

.loading--on-color .loading__circle {
    border-color: var(--alpha-white-30);
    border-top-color: var(--background-surface-oncolor);
    mix-blend-mode: normal
}

.loading--on-color .loading__circle:after, .loading--on-color .loading__circle:before {
    background-color: var(--background-surface-oncolor)
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.date-picker-root {
    border-radius: var(--radius-8, 8px);
    background: var(--colors-base-white);
    width: fit-content;
    display: flex;
    gap: 15px;
    padding: 16px
}

.date-picker-root__quick-options .options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    list-style: none;
    min-width: 120px
}

.date-picker-root__quick-options .options-list button {
    background: none;
    outline: none;
    border: 0;
    cursor: pointer
}

.date-picker-root__main__inputs {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 32px
}

.date-picker-root__main__inputs dga-text-input {
    height: fit-content;
    max-width: unset;
    min-width: unset;
    flex: 1
}

[data-dual-view="true"] .date-picker-root__main__inputs dga-text-input {
    width: 200px
}

.date-picker-root__main__inputs dga-text-input .input {
    height: 40px;
    width: 100%
}

.date-picker-root__main__buttons {
    margin-top: 16px;
    border-top: 1px solid gray;
    padding-top: 16px;
    display: flex;
    justify-content: flex-end
}

.date-picker-root__main__content-wrapper {
    display: flex;
    gap: 32px
}

.date-picker {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 392px
}

.date-picker__date-grid, .date-picker__weekdays {
    display: flex;
    flex-wrap: wrap;
    width: 392px
}

.date-picker__navigator {
    width: 100%;
    display: flex;
    align-items: center
}

.date-picker__navigator-label {
    padding-left: 20px;
    flex: 1;
    color: var(--colors-text-primary)
}

.date-picker__weekday {
    display: flex;
    width: 56px;
    height: 56px;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: #fff0
}

.date-cell {
    display: flex;
    width: 56px;
    height: 56px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 0;
    background-color: #fff0
}

.date-cell__label {
    display: flex;
    width: 100%;
    height: 48px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-none);
    background-color: #fff0;
    mix-blend-mode: multiply;
    color: var(--colors-text-primary)
}

.date-cell__label span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 100%;
    border-radius: var(--radius-full)
}

.date-cell:hover .date-cell__label span {
    background: var(--colors-gray-neutral-200)
}

.date-cell:active .date-cell__label span, .date-cell.pressed .date-cell__label span {
    background: var(--colors-gray-neutral-300)
}

.date-cell--selected .date-cell__label span {
    color: var(--colors-base-white) !important;
    border-radius: var(--radius-full);
    background-color: var(--text-success)
}

.date-cell--today .date-cell__label span {
    border: 2px solid var(--text-success);
    color: var(--text-success)
}

.date-cell--today:hover .date-cell__label span {
    background: var(--form-datecell-background-100)
}

.date-cell--today:active .date-cell__label span, .date-cell--today.pressed .date-cell__label span {
    background: var(--colors-brand-200)
}

.date-cell--disabled {
    opacity: .5
}

.date-cell[disabled] {
    opacity: .3
}

.date-cell .date-cell__label {
    position: relative
}

.date-cell--mid-range .date-cell__label {
    background-color: var(--form-datecell-background-100)
}

.date-cell--mid-range--first-child .date-cell__label:before {
    content: "";
    width: 52px;
    height: 48px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50% 0 0 50%;
    background-color: var(--form-datecell-background-100);
    z-index: -1
}

.date-cell--mid-range--last-child .date-cell__label:before {
    content: "";
    width: 52px;
    height: 48px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 50% 50% 0;
    background-color: var(--form-datecell-background-100);
    z-index: -1
}

[dir="rtl"] .date-picker__navigator button {
    transform: rotate(180deg)
}

.progress-indicator__step {
    position: relative;
    flex: 1;
    max-width: 200px;
    max-height: 200px
}

.progress-indicator__step-content {
    gap: 8px
}

.progress-indicator__step-content > .step-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--stepper-button-upcomming);
    color: var(--stepper-button-upcomming)
}

.progress-indicator__step-content > .step-icon--brand-border {
    border: 2px solid var(--stepper-button-current);
    color: var(--stepper-button-current)
}

.progress-indicator__step-content > .step-icon--brand-bg {
    border: 2px solid var(--stepper-button-current);
    background-color: var(--stepper-button-current);
    color: #fff
}

.progress-indicator__step-content > .step-label {
    display: grid;
    place-items: center;
    height: 32px;
    width: 32px
}

.progress-indicator__step-content > .step-label .step-label--circle {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: 2px solid var(--stepper-button-upcomming);
    color: var(--stepper-button-upcomming)
}

.progress-indicator__step-content > .step-label .step-label--dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--stepper-button-upcomming)
}

.progress-indicator__step-content > .step-label[data-state="current"] .step-label--circle {
    border: 2px solid var(--stepper-button-current);
    color: var(--stepper-button-current)
}

.progress-indicator__step-content > .step-label[data-state="current"] .step-label--dot {
    border: 2px solid var(--stepper-button-current)
}

.progress-indicator__step-content > .step-label[data-state="completed"] .step-label--circle {
    border: 2px solid var(--stepper-button-completed);
    background-color: var(--stepper-button-completed);
    color: #fff;
    padding: 8px
}

.progress-indicator__step-content > .step-label[data-state="completed"] .step-label--dot {
    background-color: var(--stepper-button-completed)
}

.progress-indicator__step-content > .step-label[data-state="upcomming"] .step-label--circle {
    border: 2px solid var(--stepper-button-upcomming);
    color: var(--stepper-button-upcomming)
}

.progress-indicator__step-content > .step-label[data-state="upcomming"] .step-label--dot {
    background-color: var(--stepper-button-upcomming)
}

.progress-indicator__step-content > .step-label--brand-border {
    color: var(--stepper-button-current);
    border-color: var(--stepper-button-current)
}

.progress-indicator__step-content > .step-text {
    gap: 4px;
    height: fit-content;
    margin-right: 16px
}

.progress-indicator__step-content > .step-text > span {
    color: var(--stepper-text-primary)
}

.progress-indicator__step-content > .step-text > p {
    color: var(--stepper-text-secondary)
}

.progress-indicator__step-content.focus > .step-icon {
    outline: 2px solid var(--colors-base-black)
}

.progress-indicator__step-content.focus > .step-text {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--colors-base-black)
}

.progress-indicator__step-connector {
    display: block;
    width: calc(100% - 32px);
    height: 2px;
    background: var(--stepper-button-upcomming);
    position: absolute;
    top: 16px;
    left: 32px
}

[dir="rtl"] .progress-indicator__step-connector {
    left: unset;
    right: 32px
}

.progress-indicator__step-connector--active {
    background: var(--stepper-button-current)
}

[data-alignment="vertical"] .progress-indicator__step-content {
    flex-direction: row !important;
    min-height: 128px
}

[data-alignment="vertical"] .progress-indicator__step-connector {
    height: calc(100% - 32px);
    width: 2px;
    left: 16px;
    top: 32px
}

[dir="rtl"] [data-alignment="vertical"] .progress-indicator__step-connector {
    right: 16px
}

[data-alignment="vertical"].progress-indicator {
    flex-direction: column;
    width: max-content
}

.step-label {
    display: grid;
    place-items: center;
    height: 32px;
    width: 32px
}

.step-label .step-label--circle {
    display: grid;
    place-items: center;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: 2px solid var(--stepper-button-upcomming);
    color: var(--stepper-button-upcomming)
}

.step-label .step-label--dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--stepper-button-upcomming)
}

.step-label[data-state="current"] .step-label--circle {
    border: 2px solid var(--stepper-button-current);
    color: var(--stepper-button-current)
}

.step-label[data-state="current"] .step-label--dot {
    border: 2px solid var(--stepper-button-current)
}

.step-label[data-state="completed"] .step-label--circle {
    border: 2px solid var(--stepper-button-completed);
    background-color: var(--stepper-button-completed);
    color: #fff;
    padding: 8px
}

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

.step-label[data-state="upcomming"] .step-label--circle {
    border: 2px solid var(--stepper-button-upcomming);
    color: var(--stepper-button-upcomming)
}

.step-label[data-state="upcomming"] .step-label--dot {
    background-color: var(--stepper-button-upcomming)
}

.menu {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-border-default, #cbd5e1);
    background: var(--colors-base-white)
}

.menu-group {
    padding: var(--spacing-md);
    width: 100%
}

.menu-group__label {
    padding: var(--spacing-md);
    color: var(--colors-gray-neutral-500)
}

.menu-item {
    display: flex;
    padding: var(--spacing-md);
    gap: var(--spacing-md);
    align-self: stretch;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%
}

.menu-item__icon {
    width: 24px;
    height: 24px
}

.menu-item__label {
    min-width: 100px;
    color: var(--Text-text-primary);
    flex: 1
}

.menu-item__trail-element {
    display: flex;
    align-items: center;
    justify-content: center
}

.menu-item:hover {
    border-radius: var(--radius-xs);
    background: var(--button-background-neutral-hovered);
    mix-blend-mode: multiply
}

.menu-item:active {
    border-radius: var(--radius-xs);
    background: var(--button-background-neutral-pressed, #e5e7eb);
    mix-blend-mode: multiply
}

.menu-item.disabled {
    opacity: .5;
    pointer-events: none
}

.divider {
    display: block;
    height: 1px;
    width: 100%;
    background-color: var(--border-border-default, #cbd5e1)
}

.menu-item a {
    color: inherit;
    text-decoration: none
}

.menu-item a:focus, .menu-item a:hover {
    color: inherit;
    text-decoration: none
}

.menu-item.selected {
    background: var(--colors-brand-25);
    border-radius: var(--radius-xs);
    mix-blend-mode: multiply;
    color: #1b8354
}

div.table-wrapper .azm-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0
}

div.table-wrapper .azm-table tr.row-divider:not(:last-child) {
    border-bottom: 1px solid var(--table-cell-border)
}

div.table-wrapper .azm-table thead {
    border-bottom: 1px solid var(--table-cell-border);
    border-top: 1px solid var(--table-cell-border);
    background: var(--table-background-header)
}

div.table-wrapper .azm-table thead th {
    font-size: 14px;
    height: 48px;
    border-right: 1px solid var(--table-cell-border);
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px)
}

div.table-wrapper .azm-table thead th span span.text {
    color: var(--table-text-head)
}

div.table-wrapper .azm-table thead th span span.icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px
}

div.table-wrapper .azm-table tbody tr.alternate:nth-child(2n):not(div.table-wrapper .azm-table tbody tr:hover,div.table-wrapper .azm-table tbody tr.row-selected) {
    transition: all 0.2s ease-in-out;
    background-color: var(--colors-gray-50)
}

div.table-wrapper .azm-table tbody tr:hover {
    background-color: var(--colors-gray-neutral-100)
}

div.table-wrapper .azm-table tbody tr.row-selected {
    background-color: var(--colors-brand-200)
}

div.table-wrapper .azm-table tbody td {
    height: 64px;
    color: var(--text-text-primary);
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px)
}

.table-contained {
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Table-table-cell-border);
    padding: 0
}

:is(html[lang="ar"],html[dir="rtl"]).azm-table {
    direction: ltr
}

.textarea {
    display: inline-flex;
    height: 40px;
    width: 320px;
    max-width: 332px;
    min-width: 200px;
    justify-content: flex-start;
    border-radius: var(--radius-sm);
    gap: var(--spacing-xs);
    border: 1px solid var(--form-field-border-default);
    background: var(--form-field-background-default);
    overflow: hidden;
    position: relative
}

.textarea:hover {
    border-color: var(--form-field-border-hovered)
}

.textarea[data-error="true"] {
    border-color: red
}

.textarea:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    transform: translate(-50%);
    background-color: var(--form-field-border-pressed);
    transition: width 0.2s ease-in-out
}

.textarea__field {
    background-color: #fff0;
    border: 0;
    outline: 0;
    height: 100%;
    width: 100%;
    color: var(--form-field-text-filled);
    padding: var(--spacing-lg) var(--spacing-xl);
    resize: none;
    position: relative
}

.textarea__field::-moz-placeholder {
    color: var(--form-field-text-placeholder)
}

.textarea__field::placeholder {
    color: var(--form-field-text-placeholder)
}

.textarea__field[disabled] {
    cursor: not-allowed
}

.textarea__field--hidden-scrollbar::-webkit-scrollbar {
    display: none
}

.textarea__field--hidden-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.textarea__field--resize {
    resize: vertical
}

.textarea.focus:after {
    width: 100%
}

.textarea.active:after {
    width: 50%
}

.textarea--readonly, .textarea--readonly:hover, .textarea--disabled, .textarea--disabled:hover {
    border-color: var(--input-text-disabled);
    box-shadow: none !important
}

.textarea--readonly:after, .textarea--disabled:after {
    display: none
}

.textarea--readonly .textarea__field::-moz-placeholder, .textarea--disabled .textarea__field::-moz-placeholder {
    color: var(--colors-text-primary)
}

.textarea--readonly .textarea__field, .textarea--readonly .textarea__field::placeholder, .textarea--disabled .textarea__field, .textarea--disabled .textarea__field::placeholder {
    color: var(--colors-text-primary)
}

.textarea--disabled .textarea__field::-moz-placeholder {
    color: var(--input-text-disabled)
}

.textarea--disabled .textarea__field, .textarea--disabled .textarea__field::placeholder {
    color: var(--input-text-disabled)
}

.textarea--disabled .textarea__icon span, .textarea--disabled .textarea__prefix--subtle-text, .textarea--disabled .textarea__prefix--solid-text {
    color: var(--input-text-disabled)
}

.textarea__icon {
    height: 100%;
    display: inline-flex;
    align-items: center
}

.textarea__icon span {
    color: var(--colors-gray-neutral-700);
    font-size: 20px
}

.textarea__feedback-icon {
    height: fit-content;
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: 12px;
    right: 16px
}

.textarea__feedback-icon span {
    font-size: 20px;
    position: relative;
    z-index: 0
}

.textarea__feedback-icon--success {
    color: var(--text-success)
}

.textarea__feedback-icon--success span:after {
    background-color: var(--colors-brand-100)
}

.textarea__feedback-icon--error {
    color: var(--form-field-border-error)
}

.textarea__feedback-icon--error span:after {
    background-color: var(--form-field-border-error)
}

.textarea__feedback-icon--warning {
    color: var(--text-warning)
}

.textarea__feedback-icon--warning span:after {
    background-color: var(--colors-warning-100)
}

.textarea__feedback-icon--warning-triangle {
    color: var(--text-warning)
}

.textarea__feedback-icon--warning-triangle span:after {
    width: 0 !important;
    height: 0 !important;
    transform: scale(1) !important;
    border: 12px solid #fff0;
    border-top: 0;
    border-bottom: 20px solid var(--colors-warning-100);
    border-radius: 0 !important;
    left: -2px !important;
    top: -1px !important
}

.textarea__feedback-icon--ring span:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1.16);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--radius-full);
    z-index: -1
}

[dir="rtl"] .textarea__feedback-icon {
    right: auto;
    left: 16px
}

.textarea__dropdown-btn.open + .textarea__dropdown-list {
    z-index: 2;
    opacity: 1;
    padding-block: var(--spacing-md);
    max-height: 376px;
    pointer-events: auto;
    overflow-y: auto
}

.textarea--lighter {
    border: 0
}

.textarea--lighter:hover {
    border: 1px solid var(--form-field-border-default)
}

.textarea--lighter.focus {
    border: 1px solid var(--form-field-border-default);
    background-color: var(--form-field-background-default)
}

.textarea--lighter.active {
    border: 1px solid var(--form-field-border-default);
    background-color: var(--form-field-background-darker)
}

.textarea--darker {
    border: 0;
    background-color: var(--form-field-background-darker)
}

.textarea--darker:hover {
    border: 1px solid var(--form-field-border-default)
}

.textarea--darker.focus, .textarea--darker.active {
    border: 1px solid var(--form-field-border-default);
    background-color: var(--form-field-background-default)
}

.textarea--error, .textarea--error:hover {
    outline-color: var(--form-field-border-error);
    border: 1px solid var(--form-field-border-error)
}

.textarea--error:after {
    background-color: var(--form-field-border-error)
}

.textarea--lg {
    height: auto;
    min-height: 96px
}

.textarea--lg__feedback-icon span {
    font-size: 20px
}

.textarea.disabled {
    opacity: .6
}

.dga-tooltip {
    width: fit-content;
    position: relative;
    z-index: 2
}

.dga-tooltip-main {
    position: absolute;
    width: max-content;
    max-width: 240px;
    border-radius: var(--radius-sm);
    background: var(--tooltip-background-light);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease
}

.dga-tooltip-main:hover {
    opacity: 1;
    visibility: visible
}

.dga-tooltip:hover .dga-tooltip-main {
    opacity: 1;
    visibility: visible
}

.dga-tooltip-main__wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--tooltip-gap);
    position: relative;
    padding: var(--tooltip-padding)
}

.dga-tooltip-main__icon {
    font-size: 18px;
    color: var(--icon-neutral);
    display: flex;
    align-items: center
}

.dga-tooltip-main .flex-column {
    gap: 4px
}

.dga-tooltip-main__content__title {
    color: var(--tooltip-text-heading-light)
}

.dga-tooltip-main__content__helper-text {
    color: var(--tooltip-text-paragraph-light)
}

.dga-tooltip-main__beak {
    position: absolute;
    left: 50%;
    border-style: solid
}

.dga-tooltip-main__beak[data-beak-direction="top-start"] {
    left: 14px;
    top: 1px;
    transform: translateY(-100%);
    border-width: 0 6px 6px 6px;
    border-color: #fff0 #fff0 var(--tooltip-background-light) #fff0
}

.dga-tooltip-main__beak[data-beak-direction="top-center"] {
    left: 50%;
    top: 1px;
    transform: translate(-50%, -100%);
    border-width: 0 6px 6px 6px;
    border-color: #fff0 #fff0 var(--tooltip-background-light) #fff0
}

.dga-tooltip-main__beak[data-beak-direction="top-end"] {
    left: calc(100% - 14px);
    top: 1px;
    transform: translateY(-100%);
    border-width: 0 6px 6px 6px;
    border-color: #fff0 #fff0 var(--tooltip-background-light) #fff0
}

.dga-tooltip-main__beak[data-beak-direction="right-start"] {
    top: 8px;
    left: 100%;
    border-width: 6px 0 6px 6px;
    border-color: #fff0 #fff0 #fff0 var(--tooltip-background-light)
}

.dga-tooltip-main__beak[data-beak-direction="right-center"] {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-color: #fff0 #fff0 #fff0 var(--tooltip-background-light)
}

.dga-tooltip-main__beak[data-beak-direction="right-end"] {
    bottom: 0;
    left: 100%;
    transform: translateY(-8px);
    border-width: 6px 0 6px 6px;
    border-color: #fff0 #fff0 #fff0 var(--tooltip-background-light)
}

.dga-tooltip-main__beak[data-beak-direction="bottom-start"] {
    left: 14px;
    top: calc(100% - 1px);
    border-width: 6px 6px 0 6px;
    border-color: var(--tooltip-background-light) #fff0 #fff0 #fff0
}

.dga-tooltip-main__beak[data-beak-direction="bottom-center"] {
    left: 50%;
    top: calc(100% - 1px);
    transform: translate(-50%);
    border-width: 6px 6px 0 6px;
    border-color: var(--tooltip-background-light) #fff0 #fff0 #fff0
}

.dga-tooltip-main__beak[data-beak-direction="bottom-end"] {
    left: calc(100% - 14px);
    top: calc(100% - 1px);
    border-width: 6px 6px 0 6px;
    border-color: var(--tooltip-background-light) #fff0 #fff0 #fff0
}

.dga-tooltip-main__beak[data-beak-direction="left-start"] {
    top: 8px;
    left: -5px;
    border-width: 6px 6px 6px 0;
    border-color: #fff0 var(--tooltip-background-light) #fff0 #fff0
}

.dga-tooltip-main__beak[data-beak-direction="left-center"] {
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-color: #fff0 var(--tooltip-background-light) #fff0 #fff0
}

.dga-tooltip-main__beak[data-beak-direction="left-end"] {
    top: calc(100% - 14px);
    left: -5px;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-color: #fff0 var(--tooltip-background-light) #fff0 #fff0
}

.dga-tooltip-main[data-direction="top"] {
    bottom: 100%;
    left: 50%;
    transform: translate(-50%);
    margin-bottom: 14px
}

.dga-tooltip-main[data-direction="left"] {
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: 14px
}

.dga-tooltip-main[data-direction="bottom"] {
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    margin-top: 14px
}

.dga-tooltip-main[data-direction="right"] {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 14px
}

.dga-tooltip-item {
    width: fit-content;
    cursor: pointer
}

.dga-tooltip--light .dga-tooltip-main {
    background: var(--tooltip-background-light)
}

.dga-tooltip[data-theme="dark"] .dga-tooltip-main {
    background: var(--tooltip-background-dark)
}

.dga-tooltip[data-theme="dark"] .dga-tooltip-main__icon {
    color: var(--icon-oncolor);
    fill: var(--icon-neutral)
}

.dga-tooltip[data-theme="dark"] .dga-tooltip-main__content__title {
    color: var(--tooltip-text-heading-dark)
}

.dga-tooltip[data-theme="dark"] .dga-tooltip-main__content__helper-text {
    color: var(--tooltip-text-paragraph-dark)
}

.dga-tooltip[data-theme="dark"] .dga-tooltip-main__beak[data-beak-direction="top-start"], .dga-tooltip[data-theme="dark"] .dga-tooltip-main__beak[data-beak-direction="top-center"], .dga-tooltip[data-theme="dark"] .dga-tooltip-main__beak[data-beak-direction="top-end"] {
    border-color: #fff0 #fff0 var(--tooltip-background-dark) #fff0
}

.dga-tooltip[data-theme="dark"] .dga-tooltip-main__beak[data-beak-direction="bottom-start"], .dga-tooltip[data-theme="dark"] .dga-tooltip-main__beak[data-beak-direction="bottom-center"], .dga-tooltip[data-theme="dark"] .dga-tooltip-main__beak[data-beak-direction="bottom-end"] {
    border-color: var(--tooltip-background-dark) #fff0 #fff0 #fff0
}

.dga-tooltip[data-theme="dark"] .dga-tooltip-main__beak[data-beak-direction="left-start"], .dga-tooltip[data-theme="dark"] .dga-tooltip-main__beak[data-beak-direction="left-center"], .dga-tooltip[data-theme="dark"] .dga-tooltip-main__beak[data-beak-direction="left-end"] {
    border-color: #fff0 var(--tooltip-background-dark) #fff0 #fff0
}

.dga-tooltip[data-theme="dark"] .dga-tooltip-main__beak[data-beak-direction="right-start"], .dga-tooltip[data-theme="dark"] .dga-tooltip-main__beak[data-beak-direction="right-center"], .dga-tooltip[data-theme="dark"] .dga-tooltip-main__beak[data-beak-direction="right-end"] {
    border-color: #fff0 #fff0 #fff0 var(--tooltip-background-dark)
}

.card {
    width: 100%;
    padding: var(--spacing-xl);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--card-lg-gap);
    border-radius: var(--radius-lg);
    background: var(--background-card);
    border: 2px solid #fff;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    overflow: hidden
}

.card--with-shadow {
    /*box-shadow: 0 4px 8px -2px #1018281a, 0 2px 4px -2px #1018280f;*/
	box-shadow:var(--shadow-md);
}

.card--stroke {
    border: 1px solid var(--border-neutral-primary)
}

.card__image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: var(--radius-lg, 16px)
}

.card__image-container img {
    width: 100%;
    height: auto;
    border-radius: inherit
}

.card__checkbox-container {
    position: absolute;
    top: 16px;
    right: 16px
}

.card__checkbox-container > .checkbox .checkbox-main {
    min-width: fit-content
}

.card > .badge--icon.badge--lg {
    width: 48px;
    height: 48px
}

.card__content-text {
    gap: 8px
}

.card__action {
    width: 100%;
    display: flex
}

.card__action--default {
    gap: 12px
}

.card__action--expanded {
    justify-content: flex-end
}

.card__action--expanded .btn svg {
    width: 24px;
    height: 24px
}

.card.disabled {
    color: var(--text-default-disabled);
    background-color: #fff0;
    border-color: #fff0
}

.card.disabled:after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-disabled);
    opacity: .3
}

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

.card.focused {
    border-radius: var(--radius-lg, 16px);
    border: 2px solid var(--border-black)
}

.expand-button {
    margin-left: auto;
    transition: transform 0.3s
}

.expand-button[aria-expanded="true"] .expand-icon {
    transform: rotate(180deg)
}

.collapse-content {
    display: none
}

.collapse-content.expanded {
    display: block
}

.content-switcher {
    display: flex;
    flex-direction: column;
    margin: 10px
}

.content-switcher__items {
    display: flex;
    flex-wrap: wrap
}

.content-switcher__item {
    display: inline-flex;
    min-width: 76px;
    padding: var(--spacing-xs) 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border: 0;
    background: var(--colors-gray-neutral-100);
    color: var(--colors-2-text-primary, #161616)
}

.content-switcher__item:hover {
    background: var(--colors-gray-neutral-200, #e5e7eb)
}

.content-switcher__item:focus {
    outline: none;
    border: 1px solid white !important;
    box-shadow: 0 0 0 2px #000;
    z-index: 9
}

.content-switcher__item--selected, .content-switcher__item--selected:hover {
    background-color: var(--colors-gray-neutral-950, #0d121c);
    color: var(--colors-2-text-primary_on-color, #fff)
}

.content-switcher__item--first {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: .5px solid var(--border-neutral-primary)
}

:is(html[lang="ar"],html[dir="rtl"]).content-switcher__item--first {
    border-radius: 0 var(--radius-md) var(--radius-md) 0
}

.content-switcher__item--mid {
    border-radius: var(--radius-none);
    border-right: .5px solid var(--colors-2-border-secondary, #e5e7eb);
    border-left: .5px solid var(--colors-2-border-secondary, #e5e7eb)
}

.content-switcher__item--last {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: .5px solid var(--colors-2-border-secondary, #e5e7eb)
}

:is(html[lang="ar"],html[dir="rtl"]).content-switcher__item--last {
    border-radius: var(--radius-md) 0 0 var(--radius-md)
}

.content-switcher__item--on-color {
    color: var(--colors-2-text-primary_on-color, #fff);
    background-color: hsla(var(--colors-alpha-white) / 10%);
    border-color: hsla(var(--colors-alpha-white) / 10%)
}

.content-switcher__item--on-color:hover {
    background: hsla(var(--colors-alpha-white) / 30%)
}

.content-switcher__item--on-color.content-switcher__item--selected, .content-switcher__item--on-color.content-switcher__item--selected:hover {
    background-color: var(--text-success)
}

.content-switcher__item--sm {
    height: auto
}

.content-switcher__item--md {
    height: 40px
}

.content-switcher__item--lg {
    height: 48px
}

.content-switcher__content {
    color: #000
}

.content-switcher__content--on-color {
    color: #fff
}

.rating {
    display: inline-flex;
    position: relative;
    font-size: 1.5rem;
    color: #dba102;
    cursor: pointer;
    text-align: left;
    width: min-content;
    -webkit-tap-highlight-color: #fff0
}

.rating--small {
    font-size: 24px
}

.rating--medium {
    font-size: 32px
}

.rating--large {
    font-size: 48px
}

.rating__star {
    position: relative
}

.rating__star--pressed {
    background-color: var(--background-neutral-100);
    border-radius: 100%
}

.rating__star__label {
    cursor: inherit
}

.rating__star__label-icon {
    display: flex;
    transition: transform 0.15s cubic-bezier(.4, 0, .2, 1) 0ms;
    pointer-events: none
}

.rating__star__label-icon > svg {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    fill: currentColor;
    flex-shrink: 0;
    transition: fill 0.2s cubic-bezier(.4, 0, .2, 1) 0ms;
    font-size: inherit
}

.rating__star__label-text, .rating__star__label-input {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

div.table-wrapper .azm-structured-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0
}

div.table-wrapper .azm-structured-table tr.row-divider:not(:last-child) {
    border-bottom: 1px solid var(--table-cell-border)
}

div.table-wrapper .azm-structured-table thead {
    border-bottom: 1px solid var(--table-cell-border);
    border-top: 1px solid var(--table-cell-border);
    background: var(--Colors-Gray-neutral-100, #f3f4f6)
}

div.table-wrapper .azm-structured-table thead th:first-child {
    width: 20px
}

div.table-wrapper .azm-structured-table thead th {
    height: 48px;
    border-right: 1px solid var(--table-cell-border);
    text-align: left;
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
    justify-content: space-between;
    align-items: center;
    color: var(--colors-gray-neutral-600)
}

div.table-wrapper .azm-structured-table thead th:last-child {
    border-right: none
}

div.table-wrapper .azm-structured-table tbody tr.alternate:nth-child(2n):not(div.table-wrapper .azm-structured-table tbody tr:hover,div.table-wrapper .azm-structured-table tbody tr.row-selected) {
    transition: all 0.2s ease-in-out;
    background-color: var(--colors-gray-50)
}

div.table-wrapper .azm-structured-table tbody tr:hover {
    background-color: var(--table-background-hover-selected)
}

div.table-wrapper .azm-structured-table tbody tr td div {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px
}

div.table-wrapper .azm-structured-table tbody tr td div .checkbox {
    margin-left: 0
}

div.table-wrapper .azm-structured-table tbody tr td div .checkbox .checkbox-main {
    min-width: 5px !important
}

div.table-wrapper .azm-structured-table tbody tr.row-selected {
    background-color: var(--colors-brand-200)
}

div.table-wrapper .azm-structured-table tbody td:first-child {
    width: 20px
}

div.table-wrapper .azm-structured-table tbody td {
    height: 64px;
    color: var(--text-text-primary);
    padding: var(--spacing-md, 8px) var(--spacing-xl, 16px)
}

div.table-wrapper .azm-structured-table tbody td.compact {
    height: 48px
}

div.table-wrapper .azm-structured-table tbody td.col-divider {
    border-right: 1px solid var(--table-cell-border)
}

.table-contained {
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--table-cell-border);
    padding: 0
}

.selected-cell {
    border: 3px solid var(--colors-brand-200);
    background: var(--Colors-Gray-neutral-950, #0d121c)
}

[dir="rtl"] .azm-structured-table {
    direction: rtl
}

[dir="rtl"] .azm-structured-table thead tr td {
    text-align: right
}

[dir="ltr"] .azm-structured-table {
    direction: ltr
}

.pagination {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    list-style: none
}

.pagination__item {
    position: relative
}

.pagination__item button {
    width: 24px;
    height: 24px;
    background-color: #fff0;
    cursor: pointer;
    border: none;
    display: grid;
    place-items: center
}

.pagination__item button:hover {
    background: var(--background-neutral-100);
    color: var(--text-default);
    border-radius: 4px
}

.pagination__item button:active {
    background-color: #fff0;
    border: 2px solid #161616;
    border-radius: 4px
}

.pagination__item--active:after {
    content: "";
    width: calc(100% - 8px);
    height: 3px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -1px;
    border-radius: var(--radius-full, 9999px);
    background: var(--Colors-SA-Flag-600, #1b8354)
}

.pagination--small .pagination__item button {
    width: 24px;
    height: 24px
}

.pagination--medium .pagination__item button {
    width: 32px;
    height: 32px
}

.pagination--large .pagination__item button {
    width: 40px;
    height: 40px
}

[dir="rtl"] .pagination__arrow button {
    transform: rotate(180deg)
}

.list {
    margin-left: 24px
}

[dir="rtl"] .list {
    margin-left: 0;
    margin-right: 24px
}

.list-title, .list-item {
    height: 24px
}

.list--primary .list-title, .list--primary .list-item {
    color: #1b8354
}

.list--primary > ul .list-item:before {
    background-color: #1b8354
}

.list--neutral .list-title, .list--neutral .list-item {
    color: #0d121c
}

.list--neutral > ul .list-item:before {
    background-color: #0d121c
}

.list--on-color .list-title, .list--on-color .list-item {
    color: var(--link-default_on-color, #fff)
}

.list--on-color > ul .list-item:before {
    background-color: #fff
}

.list--ordered {
    list-style-type: decimal;
    list-style-position: inside
}

.list--ordered > ol {
    list-style-type: lower-alpha;
    margin-left: 24px
}

.list--unordered {
    list-style-type: decimal
}

.list--unordered .list-item {
    display: flex;
    align-items: center;
    gap: 8px
}

.list--unordered > ul {
    list-style-type: disc;
    margin-left: 18px
}

.list--unordered > ul .list-item {
    display: flex;
    align-items: center;
    gap: 8px
}

.list--unordered > ul .list-item:before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%
}

.list--with-icon .list-item {
    display: flex;
    align-items: center;
    gap: 8px
}

.list--with-icon .list-item-icon {
    display: flex;
    width: 16px;
    height: 16px;
    justify-content: center;
    align-items: center
}

.list--with-icon > ul {
    margin-left: 24px
}

.avatar {
    border-radius: var(--radius-full);
    border: 2px solid var(--border-white);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--button-background-neutral-default);
    overflow: hidden
}

.avatar--image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.avatar--square {
    border-radius: var(--radius-8)
}

.avatar--120 {
    width: 120px;
    height: 120px;
    border-width: 4px
}

.avatar--120 .avatar__text {
    text-transform: uppercase
}

.avatar--120 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    font-size: 80px
}

.avatar--120 .avatar__icon > * {
    width: 100%;
    height: 100%;
    font-size: 80px
}

.avatar--80 {
    width: 80px;
    height: 80px
}

.avatar--80 .avatar__text {
    text-transform: uppercase
}

.avatar--80 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 56px
}

.avatar--80 .avatar__icon > * {
    width: 100%;
    height: 100%;
    font-size: 56px
}

.avatar--68 {
    width: 68px;
    height: 68px
}

.avatar--68 .avatar__text {
    text-transform: uppercase
}

.avatar--68 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 40px
}

.avatar--68 .avatar__icon > * {
    width: 100%;
    height: 100%;
    font-size: 40px
}

.avatar--48 {
    width: 48px;
    height: 48px
}

.avatar--48 .avatar__text {
    text-transform: uppercase
}

.avatar--48 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 32px
}

.avatar--48 .avatar__icon > * {
    width: 100%;
    height: 100%;
    font-size: 32px
}

.avatar--40 {
    width: 40px;
    height: 40px
}

.avatar--40 .avatar__text {
    text-transform: uppercase
}

.avatar--40 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 32px
}

.avatar--40 .avatar__icon > * {
    width: 100%;
    height: 100%;
    font-size: 32px
}

.avatar--32 {
    width: 32px;
    height: 32px
}

.avatar--32 .avatar__text {
    text-transform: uppercase
}

.avatar--32 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 24px
}

.avatar--32 .avatar__icon > * {
    width: 100%;
    height: 100%;
    font-size: 24px
}

.avatar--24 {
    width: 24px;
    height: 24px
}

.avatar--24 .avatar__text {
    text-transform: uppercase
}

.avatar--24 .avatar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 16px
}

.avatar--24 .avatar__icon > * {
    width: 100%;
    height: 100%;
    font-size: 16px
}

.dga-divider {
    display: flex;
    width: 100%;
    height: 1px;
    justify-content: center;
    align-items: center
}

.dga-divider--neutral {
    background-color: var(--border-neutral-primary)
}

.dga-divider--alpha-white {
    background-color: var(--alpha-white-30)
}

.dga-divider--white {
    background-color: var(--border-white)
}

.dga-divider--primary {
    background-color: var(--border-primary)
}

.chip {
    display: inline-flex;
    height: 32px;
    padding: var(--spacing-none) var(--spacing-lg);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    cursor: pointer
}

.chip--lg {
    height: 32px
}

.chip--md {
    height: 24px
}

.chip--sm {
    height: 20px
}

.chip--rounded {
    border-radius: var(--radius-full)
}

.chip-icon {
    display: grid;
    place-items: center;
    padding: 0;
    width: 16px;
    height: 16px
}

.chip-icon.chip--lg {
    width: 32px;
    height: 32px
}

.chip-icon.chip--md {
    width: 24px;
    height: 24px
}

.chip-icon.chip--sm {
    width: 20px;
    height: 20px
}

.chip--neutral {
    color: var(--text-default);
    background: var(--button-background-neutral-default)
}

.chip--neutral svg {
    color: currentColor;
    stroke: currentColor
}

.chip--neutral:hover {
    color: var(--text-default);
    background-color: var(--button-background-neutral-pressed)
}

.chip--neutral.pressed {
    color: var(--text-oncolor-primary);
    background-color: var(--button-background-black-selected)
}

.chip--success {
    color: var(--text-primary-sa-flag);
    background-color: var(--background-primary-50)
}

.chip--success svg {
    color: currentColor;
    stroke: currentColor
}

.chip--success:hover {
    color: var(--text-primary-sa-flag);
    background-color: var(--background-primary-200)
}

.chip--success.pressed {
    color: var(--button-background-primary-pressed);
    background-color: var(--background-primary-400)
}

.chip--on-color {
    color: var(--text-default);
    background: var(--button-background-oncolor-default)
}

.chip--on-color svg {
    color: currentColor;
    stroke: currentColor
}

.chip--on-color:hover {
    background-color: var(--button-background-oncolor-hovered)
}

.chip--on-color.pressed {
    background-color: var(--button-background-oncolor-pressed)
}

.chip--on-color.selected {
    background-color: var(--button-background-oncolor-selected)
}

.chip--neutral.disabled, .chip--success.disabled, .chip--on-color.disabled {
    color: var(--text-default-disabled);
    background-color: var(--background-disabled)
}

:host {
    --thumb-size: 12px;
    --thumb-height: 4px
}

.range-slider-wrapper.small {
    --thumb-size: 12px;
    --thumb-height: 4px
}

.range-slider-wrapper.medium {
    --thumb-size: 16px;
    --thumb-height: 8px
}

.range-slider-wrapper {
    width: 93%;
    position: relative;
    display: flex;
    align-items: center;
    margin: 40px calc(var(--thumb-size) / 2);
    margin-inline: auto;
    padding-top: 1.6rem;
    height: calc(var(--thumb-size) + 1.6rem)
}

.range-slider-input-wrapper {
    width: calc(100% + var(--thumb-size));
    margin: 0 calc(var(--thumb-size) / -2);
    position: absolute;
    height: var(--thumb-size);
    bottom: -15px
}

.range-slider-control-wrapper {
    width: 100%;
    position: absolute;
    height: var(--thumb-size);
    bottom: -15px
}

.range-slider-input {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 100%;
    opacity: 0;
    z-index: 3;
    padding: 0
}

.range-slider-input::-ms-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff0;
    border: #fff0
}

.range-slider-input::-moz-range-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff0;
    border: #fff0
}

.range-slider-input:focus::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff0;
    border: #fff0
}

.range-slider-input::-ms-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    pointer-events: all;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 0;
    border: 0 none;
    cursor: grab;
    background-color: red
}

.range-slider-input::-ms-thumb:active {
    cursor: grabbing
}

.range-slider-input::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    pointer-events: all;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 0;
    border: 0 none;
    cursor: grab;
    background-color: red
}

.range-slider-input::-moz-range-thumb:active {
    cursor: grabbing
}

.range-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    pointer-events: all;
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 0;
    border: 0 none;
    cursor: grab;
    background-color: red
}

.range-slider-input::-webkit-slider-thumb:active {
    cursor: grabbing
}

.range-slider-rail {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    height: var(--thumb-height);
    border-radius: 3px;
    background: var(--background-neutral-100, #f3f4f6)
}

.range-slider-inner-rail {
    position: absolute;
    height: 100%;
    background: var(--background-primary, #1b8354);
    z-index: 1;
    border-radius: 3px
}

.range-slider-control {
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    position: absolute;
    background: var(--background-primary, #1b8354);
    top: 50%;
    margin-left: calc(var(--thumb-size) / -2);
    transform: translate3d(0, -50%, 0);
    z-index: 2
}

.range-slider-container h3 {
    color: var(--form-field-text-label, #161616);
    font-family: IBMPlexSans-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 4px
}

.range-slider-note {
    bottom: -26px;
    left: -3px;
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px
}

.range-slider-note .range-slider-note-content p {
    color: var(--text-primary-paragraph, #384250);
    font-family: IBMPlexSans-Regular;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.range-slider-number_left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -31px
}

.range-slider-number_right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -31px
}

.circular-progress-bar {
    position: relative;
    width: fit-content
}

.circular-progress-bar .circular-progress-bar__label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content
}

.circular-progress-bar .circular-progress-bar__label--text {
    color: var(--text-primary-paragraph);
    text-align: center
}

.circular-progress-bar .circular-progress-bar__label--text.success {
    color: var(--text-success) !important
}

.circular-progress-bar .circular-progress-bar__label--icon.hgi-checkmark-circle-02 {
    color: var(--icon-success)
}

.circular-progress-bar[aria-size="200px"] .circular-progress-bar__label {
    text-align: center
}

.circular-progress-bar[aria-size="200px"] .circular-progress-bar__label--percentage {
    color: var(--text-primary-paragraph)
}

.circular-progress-bar[aria-size="200px"] .circular-progress-bar__label--text {
    text-align: center
}

.circular-progress-bar[aria-size="200px"] .circular-progress-bar__label--icon {
    font-size: 64px
}

.circular-progress-bar[aria-size="160px"] .circular-progress-bar__label {
    text-align: center
}

.circular-progress-bar[aria-size="160px"] .circular-progress-bar__label--percentage {
    color: var(--text-primary-paragraph)
}

.circular-progress-bar[aria-size="160px"] .circular-progress-bar__label--icon {
    font-size: 48px
}

.circular-progress-bar[aria-size="120px"] .circular-progress-bar__label {
    text-align: center
}

.circular-progress-bar[aria-size="120px"] .circular-progress-bar__label--percentage {
    color: var(--text-primary-paragraph)
}

.circular-progress-bar[aria-size="120px"] .circular-progress-bar__label--icon {
    font-size: 40px
}

.circular-progress-bar[aria-size="80px"] .circular-progress-bar__label {
    text-align: center
}

.circular-progress-bar[aria-size="80px"] .circular-progress-bar__label--percentage {
    color: var(--text-primary-paragraph)
}

.circular-progress-bar[aria-size="80px"] .circular-progress-bar__label--text {
    display: none
}

.circular-progress-bar[aria-size="80px"] .circular-progress-bar__label--icon {
    font-size: 32px
}

.circular-progress-bar[aria-size="64px"] .circular-progress-bar__label {
    text-align: center
}

.circular-progress-bar[aria-size="64px"] .circular-progress-bar__label--percentage {
    color: var(--text-primary-paragraph)
}

.circular-progress-bar[aria-size="64px"] .circular-progress-bar__label--text {
    display: none
}

.circular-progress-bar[aria-size="64px"] .circular-progress-bar__label--icon {
    font-size: 24px
}

.track {
    stroke: var(--background-neutral-100)
}

.tail--primary, .tail--success {
    stroke: var(--background-primary) !important
}

.tail--neutral {
    stroke: var(--button-background-black-selected) !important
}

.progress-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.progress-wrapper h3 {
    color: var(--form-field-text-label, #161616);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    font-family: IBMPlexSans-Regular
}

.progress-wrapper .progress-bar__note {
    display: flex;
    align-items: center;
    gap: 10px
}

.progress-wrapper .progress-bar__note .content p {
    color: var(--Text-text-primary-paragraph, #384250);
    font-family: IBMPlexSans-Regular;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0
}

.progress-bar-container {
    width: 100%;
    background: var(--background-neutral-100, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
    position: relative
}

.progress-bar-container.sm {
    height: 4px
}

.progress-bar-container.md {
    height: 8px
}

.progress-bar-container.lg {
    height: 16px;
    border-radius: 8px
}

.progress-bar-container.lg .progress-bar {
    border-radius: 8px
}

.progress-bar-container .progress-bar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
    transition: width 0.5s ease-in-out
}

.progress-bar-container .progress-bar.primary {
    background: var(--background-primary, #1b8354)
}

.progress-bar-container .progress-bar.neutral {
    background: var(--button-background-black-selected, #384250)
}

.progress-bar-container .progress-bar.error {
    background: var(--background-error, #d92d20)
}

.progress-bar-container .progress-bar .progress-bar-text {
    color: #fff;
    font-family: IBMPlexSans-Regular;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 0 8px
}

.dga-form-control {
    display: flex;
    flex-direction: column
}

.dga-form-control > .dga-label {
    margin-bottom: 8px;
    color: var(--form-field-text-label)
}

.dga-search-box {
    display: flex;
    height: 40px;
    width: 100%;
    min-width: 200px;
    justify-content: flex-start;
    align-items: center;
    padding: var(--spacing-none) var(--spacing-2);
    border-radius: var(--radius-sm);
    gap: var(--form-icon-enteredtext, 8px);
    border: 1px solid var(--form-field-border-default);
    background: var(--form-field-background-default);
    position: relative
}

.dga-search-box:hover {
    border-color: var(--form-field-border-hovered);
    color: var(--form-field-text-hovered)
}

.dga-search-box:hover > input {
    color: var(--form-field-text-hovered)
}

.dga-search-box:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    transform: translate(-50%);
    background-color: var(--form-field-border-pressed);
    transition: width 0.2s ease-in-out
}

.dga-search-box__field {
    background-color: #fff0;
    border: 0;
    outline: 0;
    height: 100%;
    width: 100%;
    color: var(--form-field-text-focused)
}

.dga-search-box__field::-moz-placeholder {
    color: var(--form-field-text-placeholder)
}

.dga-search-box__field::placeholder {
    color: var(--form-field-text-placeholder)
}

.dga-search-box.focus:after {
    width: 100%
}

.dga-search-box.active:after {
    width: 50%
}

.dga-search-box--readonly, .dga-search-box--readonly:hover, .dga-search-box--disabled, .dga-search-box--disabled:hover {
    border-color: var(--border-neutral-primary);
    box-shadow: none !important
}

.dga-search-box--readonly:after, .dga-search-box--disabled:after {
    display: none
}

.dga-search-box--readonly .input__field::-moz-placeholder, .dga-search-box--disabled .input__field::-moz-placeholder {
    color: var(--form-field-text-readonly)
}

.dga-search-box--readonly .input__field, .dga-search-box--readonly .input__field::placeholder, .dga-search-box--disabled .input__field, .dga-search-box--disabled .input__field::placeholder {
    color: var(--form-field-text-readonly)
}

.dga-search-box--disabled {
    border-color: var(--border-disabled)
}

.dga-search-box--disabled .input__field {
    color: var(--text-default-disabled)
}

.dga-search-box--disabled .input__field::-moz-placeholder {
    color: var(--text-default-disabled)
}

.dga-search-box--disabled .input__field, .dga-search-box--disabled .input__field::placeholder {
    color: var(--text-default-disabled)
}

.dga-search-box--disabled .input__icon span, .dga-search-box--disabled .input__prefix--subtle-text, .dga-search-box--disabled .input__prefix--solid-text {
    color: var(--text-default-disabled)
}

.dga-search-box__actions {
    display: flex;
    align-items: center;
    gap: 8px
}

.dga-search-box__actions .dga-divider--vertical {
    width: 25px;
    height: 1px;
    transform: rotate(90deg);
    background-color: #d2d6db
}

.dga-search-box__search-btn, .dga-search-box__action-btn {
    background: #fff0;
    outline: none;
    border: none;
    height: 100%;
    display: grid;
    place-items: center;
    cursor: pointer;
    min-width: unset
}

.dga-search-box__icon {
    height: 100%;
    display: flex;
    align-items: center
}

.dga-search-box__icon span {
    color: var(--form-field-border-hovered);
    font-size: 20px
}

.dga-search-box__feedback-icon {
    height: 100%;
    display: inline-flex;
    align-items: center
}

.dga-search-box__feedback-icon span {
    font-size: 20px;
    position: relative;
    z-index: 0
}

.dga-search-box__feedback-icon--success {
    color: var(--text-success)
}

.dga-search-box__feedback-icon--success span:after {
    background-color: var(--colors-brand-100)
}

.dga-search-box__feedback-icon--error {
    color: var(--text-error)
}

.dga-search-box__feedback-icon--error span:after {
    background-color: var(--text-error-100)
}

.dga-search-box__feedback-icon--warning {
    color: var(--text-warning)
}

.dga-search-box__feedback-icon--warning span:after {
    background-color: var(--colors-warning-100)
}

.dga-search-box__feedback-icon--warning-triangle {
    color: var(--text-warning)
}

.dga-search-box__feedback-icon--warning-triangle span:after {
    width: 0 !important;
    height: 0 !important;
    transform: scale(1) !important;
    border: 12px solid #fff0;
    border-top: 0;
    border-bottom: 20px solid var(--colors-warning-100);
    border-radius: 0 !important;
    left: -2px !important;
    top: -1px !important
}

.dga-search-box__feedback-icon--ring span:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1.16);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--radius-full);
    z-index: -1
}

.dga-search-box__prefix, .dga-search-box__suffix {
    display: inline-flex;
    height: 100%;
    padding: var(--spacing-xxs) var(--spacing-2);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    mix-blend-mode: multiply;
    margin-left: calc(-1 * var(--spacing-2));
    margin-right: var(--spacing-2);
    border: 0
}

.dga-search-box__prefix-label, .dga-search-box__prefix-icon, .dga-search-box__prefix-chevron, .dga-search-box__suffix-label, .dga-search-box__suffix-icon, .dga-search-box__suffix-chevron {
    color: var(--colors-text-primary)
}

.dga-search-box__prefix .dropdown__label, .dga-search-box__suffix .dropdown__label {
    display: none
}

.dga-search-box__prefix .dropdown__label--selection, .dga-search-box__suffix .dropdown__label--selection {
    display: inline-block;
    white-space: nowrap
}

.dga-search-box__prefix .dropdown__label--selection ~ .input__prefix-label, .dga-search-box__suffix .dropdown__label--selection ~ .input__prefix-label {
    display: none
}

.dga-search-box__prefix-chevron, .dga-search-box__suffix-chevron {
    font-size: 30px !important;
    transform: rotate(0);
    transition: all 0.3s ease-in-out
}

.dga-search-box__prefix.active, .dga-search-box__suffix.active {
    background-color: var(--colors-gray-neutral-300)
}

.dga-search-box__prefix--solid, .dga-search-box__suffix--solid, .dga-search-box__prefix--solid-text, .dga-search-box__suffix--solid-text {
    background-color: var(--colors-gray-neutral-100)
}

.dga-search-box__prefix--solid-text .input__prefix-label, .dga-search-box__suffix--solid-text .input__prefix-label {
    color: var(--colors-text-quarterary)
}

.dga-search-box__prefix--solid:hover, .dga-search-box__suffix--solid:hover {
    background-color: var(--colors-gray-neutral-200)
}

.dga-search-box__prefix--solid:focus, .dga-search-box__suffix--solid:focus {
    background-color: #fff0;
    border: 4px solid var(--colors-base-black);
    border-radius: 0
}

.dga-search-box__prefix--solid.active, .dga-search-box__suffix--solid.active {
    background-color: var(--colors-gray-neutral-300);
    border: 0
}

.dga-search-box__prefix--solid:disabled, .dga-search-box__suffix--solid:disabled {
    background-color: var(--colors-gray-neutral-100)
}

.dga-search-box__prefix--solid:disabled .input__prefix-label, .dga-search-box__prefix--solid:disabled .input__prefix-icon, .dga-search-box__prefix--solid:disabled .input__prefix-chevron, .dga-search-box__suffix--solid:disabled .input__prefix-label, .dga-search-box__suffix--solid:disabled .input__prefix-icon, .dga-search-box__suffix--solid:disabled .input__prefix-chevron {
    color: var(--colors-gray-neutral-300)
}

.dga-search-box__prefix--subtle, .dga-search-box__suffix--subtle, .dga-search-box__prefix--subtle-text, .dga-search-box__suffix--subtle-text {
    background-color: #fff0
}

.dga-search-box__prefix--subtle-text .input__prefix-label, .dga-search-box__suffix--subtle-text .input__prefix-label {
    color: var(--colors-text-quarterary)
}

.dga-search-box__prefix--subtle:hover, .dga-search-box__suffix--subtle:hover {
    background-color: var(--colors-gray-neutral-50)
}

.dga-search-box__prefix--subtle:focus, .dga-search-box__suffix--subtle:focus {
    background-color: #fff0;
    border: 4px solid var(--colors-base-black)
}

.dga-search-box__prefix--subtle.active, .dga-search-box__suffix--subtle.active {
    background-color: var(--colors-gray-neutral-200);
    border: 0
}

.dga-search-box__prefix--subtle:disabled .input__prefix-label, .dga-search-box__prefix--subtle:disabled .input__prefix-icon, .dga-search-box__prefix--subtle:disabled .input__prefix-chevron, .dga-search-box__suffix--subtle:disabled .input__prefix-label, .dga-search-box__suffix--subtle:disabled .input__prefix-icon, .dga-search-box__suffix--subtle:disabled .input__prefix-chevron {
    color: var(--colors-gray-neutral-300)
}

.dga-search-box__prefix.selected, .dga-search-box__suffix.selected {
    background-color: var(--form-field-border-hovered)
}

.dga-search-box__prefix.selected .input__prefix-icon, .dga-search-box__prefix.selected .input__prefix-label, .dga-search-box__prefix.selected .input__prefix-chevron, .dga-search-box__suffix.selected .input__prefix-icon, .dga-search-box__suffix.selected .input__prefix-label, .dga-search-box__suffix.selected .input__prefix-chevron, .dga-search-box__prefix.selected .dropdown__label, .dga-search-box__suffix.selected .dropdown__label {
    color: var(--colors-text-primary_on-brand)
}

.dga-search-box__dropdown-btn.open + .dga-search-box__dropdown-list {
    z-index: 2;
    opacity: 1;
    padding-block: var(--spacing-md);
    max-height: 376px;
    pointer-events: auto;
    overflow-y: auto
}

.dga-search-box__dropdown-btn.open .dga-search-box__dropdown .input__prefix-chevron, .dga-search-box__dropdown-btn.open .dga-search-box__dropdown .input__suffix-chevron {
    transform: rotate(180deg)
}

.dga-search-box__prefix {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm)
}

.dga-search-box__suffix {
    margin-right: calc(-1 * var(--spacing-2));
    margin-left: var(--spacing-xl);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0
}

.dga-search-box--lighter {
    border: 0;
    background: var(--form-field-background-lighter)
}

.dga-search-box--lighter:hover, .dga-search-box--lighter.focus, .dga-search-box--lighter.active {
    border: 1px solid var(--form-field-border-default)
}

.dga-search-box--darker {
    border: 0;
    background-color: var(--form-field-background-darker)
}

.dga-search-box--darker:hover {
    border: 1px solid var(--form-field-border-default)
}

.dga-search-box--darker.focus, .dga-search-box--darker.active {
    border: 1px solid var(--form-field-border-default);
    background-color: var(--form-field-background-default) !important
}

.dga-search-box.readOnly {
    border: 1px solid var(--border-neutral-primary) !important;
    background-color: var(--form-field-background-default) !important;
    box-shadow: none !important
}

.dga-search-box.readOnly:after {
    content: none
}

.dga-search-box--error, .dga-search-box--error:hover {
    border-color: var(--form-field-border-error)
}

.dga-search-box--error:after {
    background-color: var(--form-field-border-error)
}

.dga-search-box--lg {
    height: 40px
}

.dga-search-box--lg__feedback-icon span {
    font-size: 20px
}

.dga-search-box--lg .input__prefix-icon, .dga-search-box--lg .input__suffix-icon {
    font-size: 24px
}

.dga-search-box--lg .input__prefix-chevron, .dga-search-box--lg .input__suffix-chevron {
    font-size: 20px
}

.dga-search-box--md {
    height: 32px
}

.dga-search-box--md__feedback-icon span {
    font-size: 16px
}

.dga-search-box--md .input__prefix-icon, .dga-search-box--md .input__suffix-icon {
    font-size: 20px
}

.dga-search-box--md .input__prefix-chevron, .dga-search-box--md .input__suffix-chevron {
    font-size: 16px
}

.dga-search-box-helper-text {
    display: flex;
    align-items: center;
    gap: 10px
}

.dga-metric {
    display: flex;
    width: 360px;
    flex-direction: column;
    align-items: flex-end;
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 4px 8px -2px #1018281a, 0 2px 4px -2px #1018280f
}

.dga-metric__head {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 16px 16px 0;
    margin-bottom: 24px
}

.dga-metric__head-content {
    display: flex;
    align-items: center;
    gap: 8px
}

.dga-metric__head-content-text {
    color: var(--text-primary-paragraph, #384250)
}

.dga-metric__body {
    width: 100%
}

.dga-metric[data-chart-size="small-chart"] .dga-metric__body {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between
}

.dga-metric[data-chart-size="small-chart"] .dga-metric__content {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
    margin-bottom: 24px
}

.dga-metric[data-chart-size="small-chart"] .dga-metric__content-percentage {
    color: var(--Text-text-display, #1f2a37)
}

.dga-metric[data-chart-size="small-chart"] .dga-metric__content-change {
    display: flex;
    align-items: center;
    gap: 8px
}

.dga-metric[data-chart-size="small-chart"] .dga-metric__content-change-icon {
    width: 24px;
    height: 24px
}

.dga-metric[data-chart-size="small-chart"] .dga-metric__content-change-icon > svg {
    width: 100%;
    height: 100%
}

.dga-metric[data-chart-size="small-chart"] .dga-metric__content-change-value {
    color: var(--Text-text-success, #067647);
    text-align: center
}

.dga-metric[data-chart-size="small-chart"] .dga-metric__content-change-period {
    color: var(--Text-text-secondary-paragraph, #6c737f)
}

.dga-metric__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 16px;
    margin-bottom: 24px
}

.dga-metric__content-percentage {
    color: var(--Text-text-display, #1f2a37)
}

.dga-metric__content-change {
    display: flex;
    align-items: center;
    gap: 8px
}

.dga-metric__content-change-icon {
    width: 24px;
    height: 24px
}

.dga-metric__content-change-icon > svg {
    width: 100%;
    height: 100%
}

.dga-metric__content-change-icon > i {
    font-size: 24px
}

.dga-metric__content-change[data-change-trend="positive"] .dga-metric__content-change-icon {
    color: var(--icon-success) !important
}

.dga-metric__content-change[data-change-trend="positive"] .dga-metric__content-change-icon > i {
    font-size: 24px
}

.dga-metric__content-change[data-change-trend="negative"] .dga-metric__content-change-icon {
    color: var(--text-error) !important
}

.dga-metric__content-change[data-change-trend="negative"] .dga-metric__content-change-icon > i {
    font-size: 24px
}

.dga-metric__content-change-value {
    color: var(--Text-text-success, #067647);
    text-align: center
}

.dga-metric__content-change-period {
    color: var(--Text-text-secondary-paragraph, #6c737f)
}

.dga-metric__chart {
    padding: 0 16px;
    margin-bottom: 24px
}

.dga-metric__divider {
    display: flex;
    width: 100%;
    height: 1px;
    justify-content: center;
    align-items: center;
    background-color: var(--border-neutral-primary)
}

.dga-metric__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--spacing-xl, 16px)
}

.dga-metric__actions--primary {
    margin-left: auto
}

dga-second-nav-header .wrapper {
    height: 40px;
    max-height: 40px;
    position: relative;
    font-family: var(--font-family-text);
    font-size: var(--typo-size-text-md);
    font-weight: 400;
    line-height: var(--heights-text-md);
    text-align: left
}

dga-second-nav-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--spacing-4xl)
}

dga-second-nav-header .primary {
    background-color: var(--background-primary);
    color: var(--text-oncolor-primary)
}

dga-second-nav-header .gray {
    background-color: var(--background-neutral-100);
    color: var(--text-primary-paragraph)
}

dga-second-nav-header .border {
    border-bottom-width: 1px;
    border-bottom-style: solid
}

dga-second-nav-header .primary .border {
    border-bottom-color: var(--alpha-white-30)
}

dga-second-nav-header .gray .border {
    border-bottom-color: var(--border-neutral-primary)
}

dga-second-nav-header .content {
    display: flex;
    align-items: center;
    flex-grow: 1
}

dga-second-nav-header .actions {
    display: flex;
    align-items: center
}

dga-second-nav-header .items-container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: var(--spacing-xl)
}

dga-second-nav-header dga-second-nav-header-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs)
}

.dga-label {
    display: flex;
    gap: 4px;
    color: var(--form-field-text-label, #161616)
}

.dga-label > .star {
    color: var(--form-field-border-error, #b42318)
}

.dga-label.disabled, .dga-label.disabled > .star {
    color: var(--input-text-disabled, #9da4ae) !important
}

.slider-track {
    width: 100%;
    position: relative;
    height: auto;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top
}

.slider-list {
    display: flex;
    transition: transform 1s ease-in-out
}

.card-wrapper {
    outline: none;
    min-height: 1px;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    font-family: Poppins, sans-serif
}

.example-card {
    background: #f9004d;
    border-radius: 10px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    font-size: 36px;
    margin: 10px;
    padding: 10%;
    position: relative;
    font-weight: 100;
    font-family: Poppins, sans-serif
}

.dga-helper-text {
    display: flex;
    align-items: center;
    gap: 8px
}

.dga-helper-text--error {
    color: var(--text-error)
}

.dga-helper-text span {
    display: grid;
    place-items: center
}

.shadows-container {
    display: flex;
    width: 2240px;
    padding: var(--spacing-none);
    align-items: flex-start;
    gap: var(--spacing-7xl)
}

.shadows-box {
    display: flex;
    height: 240px;
    max-width: 256px;
    padding: var(--spacing-3xl);
    align-items: flex-start;
    gap: var(--spacing-none);
    flex: 1 0 0%;
    border-radius: var(--radius-xl);
    border: 1px solid var(--colors-border-primary);
    background: var(--colors-bg-primary)
}

@media only screen and(max-width: 75em) {
    .header-nav--fixed {
        width: 100%;
        max-width: 100vw;
        padding-inline: var(--spacing-8xl)
    }
}

@media only screen and(max-width: 56.25em) {
    .header-nav__branding {
        flex: 1;
        justify-content: center;
        justify-self: center
    }
}

.header-nav__menu, .header-nav__actions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center
}

@media only screen and(max-width: 56.25em) {
    .header-nav__menu, .header-nav__actions {
        display: none
    }
}

.header-menu__item {
    display: inline-flex;
    height: 72px;
    padding: var(--spacing-md) var(--spacing-3xl);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    background-color: #fff0;
    border-radius: var(--radius-xs)
}

.header-menu__item:hover .header-menu__item-label, .header-menu__item:hover .header-menu__item-icon, .header-menu__item:hover .header-menu__item-arrow, .header-menu__item:active .header-menu__item-label, .header-menu__item:active .header-menu__item-icon, .header-menu__item:active .header-menu__item-arrow {
    color: var(--text-default)
}

.header-menu__item:focus:after {
    display: none
}

.header-menu__item:active {
    color: #fff;
    background: var(--colors-gray-neutral-200)
}

.header-menu__item:active:after {
    display: block;
    background-color: var(--colors-gray-neutral-950)
}

.header-menu__item-label, .header-menu__item-icon {
    color: var(--text-default)
}

.header-menu__item-icon {
    color: var(--text-default);
    display: flex;
    align-items: center
}

.header-menu__item--active {
    background: var(--button-background-primary-default)
}

.header-menu__item--active .header-menu__item-label, .header-menu__item--active .header-menu__item-icon, .header-menu__item--active .header-menu__item-arrow, .header-menu__item--active:hover .header-menu__item-label, .header-menu__item--active:hover .header-menu__item-icon, .header-menu__item--active:hover .header-menu__item-arrow, .header-menu__item--active:focus .header-menu__item-label, .header-menu__item--active:focus .header-menu__item-icon, .header-menu__item--active:focus .header-menu__item-arrow, .header-menu__item--active:active .header-menu__item-label, .header-menu__item--active:active .header-menu__item-icon, .header-menu__item--active:active .header-menu__item-arrow {
    color: var(--text-oncolor-primary)
}

.header-menu__item--active:before, .header-menu__item--active:hover:before, .header-menu__item--active:focus:before, .header-menu__item--active:active:before {
    border: 0
}

.header-menu__item--active:focus {
    outline: 2px solid var(--colors-base-black)
}

.header-menu__item--active:focus:before {
    content: "";
    display: block;
    background-color: #fff0;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    border: 1px solid #fff;
    border-radius: var(--radius-xs)
}

.header-menu__item--active:active:before {
    border: 0
}

*

/
.header-menu__item--active.header-menu__item--disabled:after {
    content: "";
    display: block !important;
    width: calc(100% - var(--spacing-md) * 2);
    height: 8px;
    border-radius: var(--radius-full);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    background-color: var(--background-disabled)
}

.header-menu__item--active.header-menu__item--disabled:before {
    border: 0 !important
}

.header-menu__item--disabled, .header-menu__item--disabled:hover, .header-menu__item--disabled:focus, .header-menu__item--disabled:active {
    position: relative;
    background-color: #fff0;
    outline: none
}

.header-menu__item--disabled .header-menu__item-label, .header-menu__item--disabled .header-menu__item-icon, .header-menu__item--disabled .header-menu__item-arrow, .header-menu__item--disabled:hover .header-menu__item-label, .header-menu__item--disabled:hover .header-menu__item-icon, .header-menu__item--disabled:hover .header-menu__item-arrow, .header-menu__item--disabled:focus .header-menu__item-label, .header-menu__item--disabled:focus .header-menu__item-icon, .header-menu__item--disabled:focus .header-menu__item-arrow, .header-menu__item--disabled:active .header-menu__item-label, .header-menu__item--disabled:active .header-menu__item-icon, .header-menu__item--disabled:active .header-menu__item-arrow {
    color: var(--text-default-disabled)
}

.header-menu__item--disabled:after, .header-menu__item--disabled:hover:after, .header-menu__item--disabled:focus:after, .header-menu__item--disabled:active:after {
    display: none
}

.header__sub-menu--bg-brand {
    background-color: var(--background-sa-flag)
}

.header__sub-menu--full {
    width: 100%;
    left: 0
}

.sub-menu__container {
    display: flex;
    padding: var(--spacing-4xl) var(--spacing-none);
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--spacing-3xl);
    align-self: stretch;
    flex-wrap: wrap;
    width: 100%
}

.sub-menu__column-title {
    color: var(--text-primary)
}

.sub-menu__link {
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    display: flex;
    gap: var(--spacing-xl);
    align-items: center;
    background-color: #fff0;
    min-width: 320px
}

.sub-menu__link:hover {
    background-color: var(--button-background-neutral-hovered)
}

.sub-menu__link:hover .sub-menu__link-label, .sub-menu__link:focus .sub-menu__link-label, .sub-menu__link:active .sub-menu__link-label {
    text-decoration: none
}

.sub-menu__link:focus {
    background-color: #fff0;
    outline: 2px solid var(--colors-base-black)
}

.sub-menu__link:active {
    background-color: var(--button-background-neutral-pressed);
    outline: none
}

.sub-menu__link-icon {
    color: var(--icon-default)
}

.sub-menu__link-icon--bg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-primary);
    background-color: var(--background-primary-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg)
}

.sub-menu__link-label {
    color: var(--text-display)
}

.sub-menu__link-helper {
    color: var(--text-primary-paragraph)
}

.sub-menu__link--on-color.sub-menu__link:hover, .sub-menu__link--on-color.sub-menu__link:focus, .sub-menu__link--on-color.sub-menu__link:active {
    background-color: var(--button-background-transparent-hovered);
    text-decoration: none;
    outline: none
}

.sub-menu__link--on-color.sub-menu__link:focus {
    background-color: #fff0;
    outline: 2px solid var(--colors-base-white)
}

.sub-menu__link--on-color.sub-menu__link:active {
    background-color: var(--button-background-transparent-pressed);
    outline: none
}

.sub-menu__link--on-color .sub-menu__link-icon {
    color: var(--icon-oncolor)
}

.sub-menu__link--on-color .sub-menu__link-icon--bg {
    color: var(--icon-oncolor);
    background-color: var(--alpha-white-10)
}

.sub-menu__link--on-color .sub-menu__link-label, .sub-menu__link--on-color .sub-menu__link-helper {
    color: var(--text-oncolor-primary)
}

.sidepanel {
    background-color: var(--colors-base-white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    position: fixed;
    top: 0;
    z-index: 99;
    transition: all 0.4s ease-in-out
}

.sidepanel.collapsed {
    transform: translate(calc((100% + var(--spacing-xl) + var(--spacing-xl) + 8px + 2 * var(--spacing-xs)) * -2))
}

@media only screen and(min-width: 56.25em) {
    .sidepanel.collapsed {
        transform: translate(0)
    }
}

.sidepanel::-webkit-scrollbar {
    height: 100px;
    width: calc(8px + 2 * var(--spacing-xs))
}

.sidepanel::-webkit-scrollbar-track {
    background-color: #fff0;
    padding: var(--spacing-xs)
}

.sidepanel::-webkit-scrollbar-thumb {
    height: 100px;
    border-radius: var(--radius-full);
    border: var(--spacing-xs) solid #fff0;
    background-color: var(--border-neutral-primary);
    background-clip: content-box;
    mix-blend-mode: multiply
}

.sidepanel__nav-header {
    margin-inline: var(--spacing-4xl);
    margin-block: var(--spacing-lg)
}

.sidepanel ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.sidepanel__menu-list {
    width: 100%;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-8xl) var(--spacing-xl) !important
}

.sidepanel__menu-tab, .sidepanel__submenu-tab {
    display: flex;
    padding: var(--spacing-md) var(--spacing-xl);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    align-self: stretch;
    color: var(--colors-gray-neutral-600);
    text-decoration: none;
    border-radius: var(--radius-sm);
    mix-blend-mode: multiply;
    position: relative;
    border: 2px solid #fff0;
    outline: none
}

.sidepanel__menu-tab:after, .sidepanel__submenu-tab:after {
    content: "";
    width: 6px;
    height: calc(100% - 2 * var(--spacing-sm));
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-radius: var(--radius-full);
    background-color: var(--colors-brand-600);
    display: none
}

.sidepanel__menu-tab:hover, .sidepanel__submenu-tab:hover {
    background-color: var(--colors-gray-neutral-100);
    color: var(--colors-text-primary);
    border-color: #fff0
}

.sidepanel__menu-tab:hover:after, .sidepanel__submenu-tab:hover:after {
    display: block;
    background-color: var(--colors-gray-neutral-400)
}

.sidepanel__menu-tab:focus, .sidepanel__submenu-tab:focus {
    background-color: var(--colors-base-white)
}

.sidepanel__menu-tab:focus:after, .sidepanel__submenu-tab:focus:after {
    display: none
}

.sidepanel__menu-tab.selected, .selected.sidepanel__submenu-tab, .sidepanel__menu-tab.active, .active.sidepanel__submenu-tab {
    background-color: #fff0;
    color: var(--colors-gray-modern-950);
    font-weight: 700
}

.sidepanel__menu-tab.selected:after, .selected.sidepanel__submenu-tab:after, .sidepanel__menu-tab.active:after, .active.sidepanel__submenu-tab:after {
    display: block;
    background-color: var(--colors-brand-600)
}

.sidepanel__menu-tab.selected .sidepanel__menu-tab-icon, .selected.sidepanel__submenu-tab .sidepanel__menu-tab-icon, .sidepanel__menu-tab.active .sidepanel__menu-tab-icon, .active.sidepanel__submenu-tab .sidepanel__menu-tab-icon {
    color: #1b8354
}

.sidepanel__menu-tab.pressed, .pressed.sidepanel__submenu-tab {
    background-color: var(--border-neutral-primary);
    color: var(--colors-text-primary);
    border-color: #fff0
}

.sidepanel__menu-tab.pressed:after, .pressed.sidepanel__submenu-tab:after {
    display: block;
    background-color: var(--colors-gray-neutral-600)
}

.sidepanel__menu-tab.disabled, .disabled.sidepanel__submenu-tab {
    color: var(--border-neutral-primary);
    background-color: #fff0;
    border-color: #fff0
}

.sidepanel__menu-tab.disabled:after, .disabled.sidepanel__submenu-tab:after {
    display: none
}

.sidepanel__menu-tab-divider {
    background: var(--border-neutral-primary);
    height: 1px;
    margin: var(--spacing-md) var(--spacing-xl);
    display: block
}

.sidepanel__menu-tab.active + .sidepanel__submenu-list, .active.sidepanel__submenu-tab + .sidepanel__submenu-list {
    opacity: 1;
    padding-block: 3px !important
}

.sidepanel__menu-tab.active .sidepanel__menu-tab-arrow, .active.sidepanel__submenu-tab .sidepanel__menu-tab-arrow {
    transform: rotate(180deg)
}

.sidepanel__menu-tab-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

.sidepanel__menu-tab-label {
    flex: 1
}

.sidepanel__menu-tab-arrow {
    font-size: 20px;
    transform: rotate(0);
    transition: all 0.4s ease-in-out
}

.sidepanel__submenu-list {
    display: block;
    padding-block: 0 !important;
    max-height: 0;
    overflow-y: hidden;
    opacity: 1 !important;
    transition: max-height 0.3s ease
}

.sidepanel__submenu-tab {
    justify-content: flex-start;
    white-space: nowrap
}

.sidepanel__submenu-tab-label {
    flex: 1
}

.sidepanel__submenu-tab-icon {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.sidepanel__submenu--sublevel {
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) calc(var(--spacing-5xl) + var(--spacing-md) / 2)
}

.sidepanel--bg-gray {
    background-color: var(--colors-gray-neutral-50)
}

.sidepanel--bg-brand {
    background-color: var(--colors-brand-800)
}

.sidepanel--bg-brand .sidepanel__menu-tab, .sidepanel--bg-brand .sidepanel__submenu-tab {
    mix-blend-mode: normal;
    color: var(--colors-text-secondary_on-brand) !important
}

.sidepanel--bg-brand .sidepanel__menu-tab-label, .sidepanel--bg-brand .sidepanel__submenu-tab-label {
    color: var(--colors-text-secondary_on-brand) !important
}

.sidepanel--bg-brand .sidepanel__menu-tab:hover, .sidepanel--bg-brand .sidepanel__submenu-tab:hover {
    background-color: hsla(var(--colors-alpha-white) / 10%);
    color: var(--colors-text-primary_on-brand);
    border-color: #fff0
}

.sidepanel--bg-brand .sidepanel__menu-tab:hover:after, .sidepanel--bg-brand .sidepanel__submenu-tab:hover:after {
    display: block;
    background-color: hsla(var(--colors-alpha-white) / 40%)
}

.sidepanel--bg-brand .sidepanel__menu-tab:focus, .sidepanel--bg-brand .sidepanel__submenu-tab:focus {
    background-color: #fff0;
    border-color: var(--colors-base-white)
}

.sidepanel--bg-brand .sidepanel__menu-tab:focus:after, .sidepanel--bg-brand .sidepanel__submenu-tab:focus:after {
    display: none
}

.sidepanel--bg-brand .sidepanel__menu-tab.selected, .sidepanel--bg-brand .sidepanel__menu-tab.active, .sidepanel--bg-brand .sidepanel__submenu-tab.selected, .sidepanel--bg-brand .sidepanel__submenu-tab.active {
    background-color: hsla(var(--colors-alpha-white) / 20%);
    color: var(--colors-text-primary_on-brand)
}

.sidepanel--bg-brand .sidepanel__menu-tab.selected:after, .sidepanel--bg-brand .sidepanel__menu-tab.active:after, .sidepanel--bg-brand .sidepanel__submenu-tab.selected:after, .sidepanel--bg-brand .sidepanel__submenu-tab.active:after {
    display: block;
    background-color: var(--colors-base-white)
}

.sidepanel--bg-brand .sidepanel__menu-tab.pressed, .sidepanel--bg-brand .sidepanel__submenu-tab.pressed {
    background-color: hsla(var(--colors-alpha-white) / 30%);
    color: var(--colors-text-primary_on-brand);
    border-color: #fff0
}

.sidepanel--bg-brand .sidepanel__menu-tab.pressed:after, .sidepanel--bg-brand .sidepanel__submenu-tab.pressed:after {
    display: block;
    background-color: hsla(var(--colors-alpha-white) / 60%)
}

.sidepanel--border {
    border-right: 1px solid var(--colors-border-primary)
}

.sidepanel--overlay {
    background: hsla(var(--colors-alpha-white) / 80%);
    box-shadow: 4px 16px 24px #0000001a;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

@media only screen and(min-width: 56.25em) {
    .sidepanel--overlay {
        box-shadow: none
    }
}

.sidepanel--overlay-gray {
    background: hsla(var(--colors-alpha-white) / 80%);
    box-shadow: 4px 16px 24px #0000001a;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.sidepanel--overlay-brand {
    background: var(--colors-brand-800);
    box-shadow: 0 24px 48px -12px #1018282e;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.table-of-content {
    display: flex;
    width: 228px;
    padding: var(--container-padding-desktop) var(--spacing-none);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md)
}

.table-of-content__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md)
}

.table-of-content__tab-list, .table-of-content__tab-sublist {
    list-style: none;
    padding: 0
}

.table-of-content__tab-sublist .table-of-content__tab {
    position: relative;
    padding-left: calc(var(--spacing-xl) * 2)
}

.table-of-content__tab-sublist .table-of-content__tab:before {
    content: "";
    width: 2px;
    height: 100%;
    background-color: var(--background-neutral-300);
    display: block;
    position: absolute;
    left: 16px;
    top: 0
}

.table-of-content__tab-sub-sublist {
    list-style: none;
    padding: 0
}

.table-of-content__tab-sub-sublist .table-of-content__tab {
    position: relative;
    padding-left: calc(var(--spacing-xl) * 3)
}

.table-of-content__tab-sub-sublist .table-of-content__tab:before {
    content: "";
    width: 2px;
    height: 100%;
    background-color: var(--background-neutral-300);
    display: block;
    position: absolute;
    left: 16px;
    top: 0
}

.table-of-content__tab-sub-sublist .table-of-content__tab:after {
    content: "";
    width: 2px;
    height: 100%;
    background-color: var(--background-neutral-300);
    display: block;
    position: absolute;
    left: 32px;
    top: 0
}

.table-of-content__tab {
    display: flex;
    min-width: 140px;
    padding: 0 var(--spacing-md, 8px) 0 var(--spacing-xl);
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-xs);
    position: relative
}

.table-of-content__tab-label {
    padding-block: var(--spacing-sm);
    flex: 1;
    color: var(--text-primary-paragraph)
}

.table-of-content__tab-prefix {
    display: none;
    height: 100%;
    border-radius: var(--radius-full);
    background-color: var(--background-primary);
    width: 3px;
    position: absolute;
    left: 0;
    top: 0
}

.table-of-content__tab:hover .table-of-content__tab-prefix {
    display: block;
    background-color: var(--background-neutral-300)
}

.table-of-content__tab:hover .table-of-content__tab-label {
    color: var(--background-neutral-800)
}

.table-of-content__tab:hover {
    background-color: var(--background-neutral-100)
}

.table-of-content__tab:hover:before {
    background-color: var(--background-neutral-400)
}

.table-of-content__tab:focus .table-of-content__tab-prefix {
    display: none
}

.table-of-content__tab:focus .table-of-content__tab-label {
    color: var(--background-neutral-800)
}

.table-of-content__tab:focus {
    outline: 2px solid var(--border-black);
    background-color: #fff0
}

.table-of-content__tab:focus:after, .table-of-content__tab:focus:before {
    display: none
}

.table-of-content__tab.selected, .table-of-content__tab.active {
    color: var(--background-neutral-800)
}

.table-of-content__tab.selected .table-of-content__tab-prefix, .table-of-content__tab.active .table-of-content__tab-prefix {
    display: block;
    background-color: var(--background-primary)
}

.table-of-content__tab.selected:after, .table-of-content__tab.selected:before, .table-of-content__tab.active:after, .table-of-content__tab.active:before {
    display: none
}

.table-of-content__tab.pressed .table-of-content__tab-prefix {
    display: block;
    background-color: var(--controls-control-border)
}

.table-of-content__tab.pressed .table-of-content__tab-label {
    color: var(--background-neutral-800)
}

.table-of-content__tab.pressed {
    outline: none;
    background-color: var(--button-background-neutral-pressed)
}

.table-of-content__tab.pressed:before {
    background-color: var(--background-neutral-800)
}

*, *:after, *:before {
    margin: 0;
    padding: 0;
    box-sizing: inherit
}

* {
    box-sizing: border-box
}

html {
    font-size: 62.5%
}

@media only screen and(max-width: 56.25em) {
    html {
        font-size: 75%
    }
}

body {
    margin: var(--spacing-none);
    padding: var(--spacing-none);
    overflow: auto;
    background-color: var(--colors-white)
}

body {
    font-family: IBMPlexSans-Regular
}

a, a:active, a:focus, a:visited {
    color: inherit;
    text-decoration: none
}

a:focus, a:focus-visible {
    outline: none;
    box-shadow: none
}

.display-2xl-regular {
    font: 400 72px/90px IBMPlexSans-Regular
}

.display-xl-regular {
    font: 400 60px/72px IBMPlexSans-Regular
}

.display-lg-regular {
    font: 400 48px/60px IBMPlexSans-Regular
}

.display-md-regular, .avatar--120 .avatar__text {
    font: 400 36px/44px IBMPlexSans-Regular
}

.display-sm-regular, .avatar--80 .avatar__text {
    font: 400 30px/38px IBMPlexSans-Regular
}

.display-xs-regular {
    font: 400 24px/32px IBMPlexSans-Regular
}

.text-xl-regular, .content-switcher__item--lg, .circular-progress-bar[aria-size="200px"] .circular-progress-bar__label--text {
    font: 400 20px/30px IBMPlexSans-Regular
}

.text-lg-regular, .content-switcher__item--md, .circular-progress-bar[aria-size="80px"] .circular-progress-bar__label--percentage {
    font: 400 18px/28px IBMPlexSans-Regular
}

.input__field::-moz-placeholder, .textarea__field::-moz-placeholder, .dga-search-box__field::-moz-placeholder {
    font: 400 16px/24px IBMPlexSans-Regular
}

.text-md-regular, .accordion-item__body, .input__field, .input__field::placeholder, .input__prefix-label, .input__prefix-icon, .input__prefix-chevron, .input__suffix-label, .input__suffix-icon, .input__suffix-chevron, .input--lg .input__prefix-label, .input--lg .input__suffix-label, .link, .link--md, .dropdown__label, .dropdown__btn, .dropdown--lg .dropdown__label, .dropdown--lg .dropdown__label-placeholder, .dropdown--lg .dropdown__option-label, .notification__content p, .date-cell__label, .menu-item__label, .menu-item__trail-element, div.table-wrapper .azm-table tbody td, .dga-tooltip-item, .content-switcher__item--sm, div.table-wrapper .azm-structured-table tbody td, .list-title, .list-item, .circular-progress-bar[aria-size="160px"] .circular-progress-bar__label--text, .dga-search-box__field, .dga-search-box__field::placeholder, .dga-search-box__prefix-label, .dga-search-box__prefix-icon, .dga-search-box__prefix-chevron, .dga-search-box__suffix-label, .dga-search-box__suffix-icon, .dga-search-box__suffix-chevron, .dga-search-box--lg .input__prefix-label, .dga-search-box--lg .input__suffix-label, .dga-label--lg {
    font: 400 16px/24px IBMPlexSans-Regular
}

.input--lg .input__field::-moz-placeholder, .input--md .input__field::-moz-placeholder, .textarea--lg .textarea__field::-moz-placeholder, .dga-search-box--lg .input__field::-moz-placeholder, .dga-search-box--md .input__field::-moz-placeholder {
    font: 400 14px/20px IBMPlexSans-Regular
}

.text-sm-regular, .checkbox__helper-text, .switch__helper-text, .radio__helper-text, .dga-form-control > .dga-label, .input__prefix .dropdown__label--selection, .input__suffix .dropdown__label--selection, .input--lg .input__field, .input--lg .input__field::placeholder, .input--md .input__field, .input--md .input__field::placeholder, .input--md .input__prefix-label, .input--md .input__suffix-label, .link--sm, .dropdown__option-label, .dropdown--md .dropdown__label, .dropdown--md .dropdown__label-placeholder, .dropdown--md .dropdown__option-label, dialog .modal__content, .tabs-list__label, .file-upload__file-item--error .file-upload__file-item-msg, .file-upload__file-item--error--error .file-upload__file-item-msg, .textarea--lg .textarea__field, .textarea--lg .textarea__field::placeholder, .circular-progress-bar[aria-size="120px"] .circular-progress-bar__label--text, .dga-search-box__prefix .dropdown__label--selection, .dga-search-box__suffix .dropdown__label--selection, .dga-search-box--lg .input__field, .dga-search-box--lg .input__field::placeholder, .dga-search-box--md .input__field, .dga-search-box--md .input__field::placeholder, .dga-search-box--md .input__prefix-label, .dga-search-box--md .input__suffix-label, .dga-metric[data-chart-size="small-chart"] .dga-metric__content-change-period, .dga-metric__content-change-period, .dga-label--md, .sub-menu__link-helper, .sidepanel__menu-tab, .sidepanel__submenu-tab, .sidepanel__submenu--sublevel .sidepanel__submenu-tab-label, .table-of-content__tab-label, .dropdown__option {
    font: 400 14px/20px IBMPlexSans-Regular
}

.text-xs-regular, .file-upload__formats, .dga-tooltip-main__content__helper-text {
    font: 400 12px/18px IBMPlexSans-Regular
}

.text-2xs-regular {
    font: 400 10px/14px IBMPlexSans-Regular
}

.display-2xl-medium {
    font: 500 72px/90px IBMPlexSans-Regular
}

.display-xl-medium {
    font: 500 60px/72px IBMPlexSans-Medium
}

.display-lg-medium {
    font: 500 48px/60px IBMPlexSans-Medium
}

.display-md-medium {
    font: 500 36px/44px IBMPlexSans-Medium
}

.display-sm-medium {
    font: 500 30px/38px IBMPlexSans-Medium
}

.display-xs-medium {
    font: 500 24px/32px IBMPlexSans-Medium
}

.text-xl-medium, .avatar--68 .avatar__text {
    font: 500 20px/30px IBMPlexSans-Medium
}

.text-lg-medium {
    font: 500 18px/28px IBMPlexSans-Medium
}

.text-md-medium, .btn--lg, .tag, .tag--lg, .checkbox__label, .switch__label, .date-picker__navigator-label, .progress-indicator__step-content > .step-icon, .progress-indicator__step-content > .step-label .step-label--circle, .step-label .step-label--circle, .avatar--48 .avatar__text, .chip, .chip--lg, .header-menu__item-label, .header-menu__item-icon, .header-menu__item-arrow {
    font: 500 16px/24px IBMPlexSans-Medium
}

.text-sm-medium, .btn--md, .checkbox__warning, .switch__warning, .radio__warning, .tabs-list__item--active .tabs-list__label, .file-upload__file-name, .dga-metric__head-content-text, .dga-metric[data-chart-size="small-chart"] .dga-metric__content-change-value, .dga-metric__content-change-value {
    font: 500 14px/20px IBMPlexSans-Medium
}

.text-xs-medium, .btn--sm, .tag--md, div.table-wrapper .azm-table thead th span span.text, div.table-wrapper .azm-structured-table thead th, .chip--md {
    font: 500 12px/18px IBMPlexSans-Medium
}

.text-2xs-medium {
    font: 500 10px/14px IBMPlexSans-Medium
}

.display-2xl-semibold {
    font: 600 72px/90px IBMPlexSans-SemiBold
}

.display-xl-semibold {
    font: 600 60px/72px IBMPlexSans-SemiBold
}

.display-lg-semibold {
    font: 600 48px/60px IBMPlexSans-SemiBold
}

.display-md-semibold {
    font: 600 36px/44px IBMPlexSans-SemiBold
}

.display-sm-semibold {
    font: 600 30px/38px IBMPlexSans-SemiBold
}

.display-xs-semibold {
    font: 600 24px/32px IBMPlexSans-SemiBold
}

.text-xl-semibold {
    font: 600 20px/30px IBMPlexSans-SemiBold
}

.text-lg-semibold, dialog .modal__heading {
    font: 600 18px/28px IBMPlexSans-SemiBold
}

.text-md-semibold, .accordion-item__title, .header-menu__item--active .header-menu__item-icon, .header-menu__item--active .header-menu__item-arrow, .header-menu__item--active:hover .header-menu__item-icon, .header-menu__item--active:hover .header-menu__item-arrow, .header-menu__item--active:focus .header-menu__item-label, .header-menu__item--active:focus .header-menu__item-icon, .header-menu__item--active:focus .header-menu__item-arrow, .header-menu__item--active:active .header-menu__item-icon, .header-menu__item--active:active .header-menu__item-arrow, .header-menu__item--disabled .header-menu__item-label, .header-menu__item--disabled .header-menu__item-icon, .header-menu__item--disabled .header-menu__item-arrow, .header-menu__item--disabled:hover .header-menu__item-label, .header-menu__item--disabled:hover .header-menu__item-icon, .header-menu__item--disabled:hover .header-menu__item-arrow, .header-menu__item--disabled:focus .header-menu__item-label, .header-menu__item--disabled:focus .header-menu__item-icon, .header-menu__item--disabled:focus .header-menu__item-arrow, .header-menu__item--disabled:active .header-menu__item-label, .header-menu__item--disabled:active .header-menu__item-icon, .header-menu__item--disabled:active .header-menu__item-arrow, .sub-menu__link-label {
    font: 600 16px/24px IBMPlexSans-SemiBold
}

.text-sm-semibold, .dropdown__list-group-label, .avatar--40 .avatar__text, .dga-label--md.semibold, .dga-label--lg.semibold, .sidepanel__menu-tab-label, .sidepanel__submenu-tab-label, .table-of-content__tab.selected .table-of-content__tab-label, .table-of-content__tab.active .table-of-content__tab-label {
    font: 600 14px/20px IBMPlexSans-SemiBold
}

.text-xs-semibold, .dga-tooltip-main__content__title, .avatar--32 .avatar__text {
    font: 600 12px/18px IBMPlexSans-SemiBold
}

.text-2xs-semibold, .tag--sm, .chip--sm {
    font: 600 10px/14px IBMPlexSans-SemiBold
}

.display-2xl-bold {
    font: 700 72px/90px IBMPlexSans-Bold
}

.display-xl-bold {
    font: 700 60px/72px IBMPlexSans-Bold
}

.display-lg-bold {
    font: 700 48px/60px IBMPlexSans-Bold
}

.display-md-bold, .circular-progress-bar[aria-size="200px"] .circular-progress-bar__label--percentage, .dga-metric[data-chart-size="small-chart"] .dga-metric__content-percentage, .dga-metric__content-percentage {
    font: 700 36px/44px IBMPlexSans-Bold
}

.display-sm-bold, .circular-progress-bar[aria-size="160px"] .circular-progress-bar__label--percentage {
    font: 700 30px/38px IBMPlexSans-Bold
}

.display-xs-bold, .circular-progress-bar[aria-size="120px"] .circular-progress-bar__label--percentage {
    font: 700 24px/32px IBMPlexSans-Bold
}

.text-xl-bold {
    font: 700 20px/30px IBMPlexSans-Bold
}

.text-lg-bold, .sub-menu__column-title {
    font: 700 18px/28px IBMPlexSans-Bold
}

.text-md-bold, .notification__lead-text, .date-cell--today .date-cell__label span {
    font: 700 16px/24px IBMPlexSans-Bold
}

.text-sm-bold, .circular-progress-bar[aria-size="64px"] .circular-progress-bar__label--percentage, .sidepanel__menu-tab.selected, .sidepanel__menu-tab.active, .sidepanel__menu-tab.active > .sidepanel__menu-tab-label, .selected.sidepanel__submenu-tab, .active.sidepanel__submenu-tab, .active.sidepanel__submenu-tab > .sidepanel__menu-tab-label {
    font: 700 14px/20px IBMPlexSans-Bold
}

.text-xs-bold, .menu-group__label {
    font: 700 12px/18px IBMPlexSans-Bold
}

.text-2xs-bold, .avatar--24 .avatar__text {
    font: 700 10px/14px IBMPlexSans-Bold
}

.hgi-bulk {
    font-family: hgi-bulk-rounded !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    display: inline-block;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto
}

.spacing-hor-0 {
    height: 0
}

.spacing-vert-0 {
    width: 0
}

.px-0 {
    padding-inline: 0
}

.py-0 {
    padding-block: 0
}

.pl-0 {
    padding-left: 0
}

.pr-0 {
    padding-right: 0
}

.pt-0 {
    padding-top: 0
}

.mx-0 {
    margin-inline: 0
}

.my-0 {
    margin-block: 0
}

.ml-0 {
    margin-left: 0
}

.mr-0 {
    margin-right: 0
}

.mt-0 {
    margin-top: 0
}

.spacing-hor-2 {
    height: 2px
}

.spacing-vert-2 {
    width: 2px
}

.p-2 {
    padding: 2px
}

.px-2 {
    padding-inline: 2px
}

.py-2 {
    padding-block: 2px
}

.pl-2 {
    padding-left: 2px
}

.pr-2 {
    padding-right: 2px
}

.pt-2 {
    padding-top: 2px
}

.pb-2 {
    padding-bottom: 2px
}

.mx-2 {
    margin-inline: 2px
}

.my-2 {
    margin-block: 2px
}

.ml-2 {
    margin-left: 2px
}

.mr-2 {
    margin-right: 2px
}

.mt-2 {
    margin-top: 2px
}

.mb-2 {
    margin-bottom: 2px
}

.spacing-hor-4 {
    height: 4px
}

.spacing-vert-4 {
    width: 4px
}

.p-4 {
    padding: 4px
}

.px-4 {
    padding-inline: 4px
}

.py-4 {
    padding-block: 4px
}

.pl-4 {
    padding-left: 4px
}

.pr-4 {
    padding-right: 4px
}

.pt-4 {
    padding-top: 4px
}

.pb-4 {
    padding-bottom: 4px
}

.mx-4 {
    margin-inline: 4px
}

.my-4 {
    margin-block: 4px
}

.ml-4 {
    margin-left: 4px
}

.mr-4 {
    margin-right: 4px
}

.mt-4 {
    margin-top: 4px
}

.mb-4 {
    margin-bottom: 4px
}

.spacing-hor-8 {
    height: 8px
}

.spacing-vert-8 {
    width: 8px
}

.p-8 {
    padding: 8px
}

.px-8 {
    padding-inline: 8px
}

.py-8 {
    padding-block: 8px
}

.pl-8 {
    padding-left: 8px
}

.pr-8 {
    padding-right: 8px
}

.pt-8 {
    padding-top: 8px
}

.pb-8 {
    padding-bottom: 8px
}

.mx-8 {
    margin-inline: 8px
}

.my-8 {
    margin-block: 8px
}

.ml-8 {
    margin-left: 8px
}

.mr-8 {
    margin-right: 8px
}

.mt-8 {
    margin-top: 8px
}

.mb-8 {
    margin-bottom: 8px
}

.spacing-hor-12 {
    height: 12px
}

.spacing-vert-12 {
    width: 12px
}

.p-12 {
    padding: 12px
}

.px-12 {
    padding-inline: 12px
}

.py-12 {
    padding-block: 12px
}

.pl-12 {
    padding-left: 12px
}

.pr-12 {
    padding-right: 12px
}

.pt-12 {
    padding-top: 12px
}

.pb-12 {
    padding-bottom: 12px
}

.mx-12 {
    margin-inline: 12px
}

.my-12 {
    margin-block: 12px
}

.ml-12 {
    margin-left: 12px
}

.mr-12 {
    margin-right: 12px
}

.mt-12 {
    margin-top: 12px
}

.mb-12 {
    margin-bottom: 12px
}

.spacing-hor-16 {
    height: 16px
}

.spacing-vert-16 {
    width: 16px
}

.p-16 {
    padding: 16px
}

.px-16 {
    padding-inline: 16px
}

.py-16 {
    padding-block: 16px
}

.pl-16 {
    padding-left: 16px
}

.pr-16 {
    padding-right: 16px
}

.pt-16 {
    padding-top: 16px
}

.pb-16 {
    padding-bottom: 16px
}

.mx-16 {
    margin-inline: 16px
}

.my-16 {
    margin-block: 16px
}

.ml-16 {
    margin-left: 16px
}

.mr-16 {
    margin-right: 16px
}

.mt-16 {
    margin-top: 16px
}

.mb-16 {
    margin-bottom: 16px
}

.spacing-hor-24 {
    height: 24px
}

.spacing-vert-24 {
    width: 24px
}

.p-24 {
    padding: 24px
}

.px-24 {
    padding-inline: 24px
}

.py-24 {
    padding-block: 24px
}

.pl-24 {
    padding-left: 24px
}

.pr-24 {
    padding-right: 24px
}

.pt-24 {
    padding-top: 24px
}

.pb-24 {
    padding-bottom: 24px
}

.mx-24 {
    margin-inline: 24px
}

.my-24 {
    margin-block: 24px
}

.ml-24 {
    margin-left: 24px
}

.mr-24 {
    margin-right: 24px
}

.mt-24 {
    margin-top: 24px
}

.mb-24 {
    margin-bottom: 24px
}

.spacing-hor-32 {
    height: 32px
}

.spacing-vert-32 {
    width: 32px
}

.p-32 {
    padding: 32px
}

.px-32 {
    padding-inline: 32px
}

.py-32 {
    padding-block: 32px
}

.pl-32 {
    padding-left: 32px
}

.pr-32 {
    padding-right: 32px
}

.pt-32 {
    padding-top: 32px
}

.pb-32 {
    padding-bottom: 32px
}

.mx-32 {
    margin-inline: 32px
}

.my-32 {
    margin-block: 32px
}

.ml-32 {
    margin-left: 32px
}

.mr-32 {
    margin-right: 32px
}

.mt-32 {
    margin-top: 32px
}

.mb-32 {
    margin-bottom: 32px
}

.spacing-hor-40 {
    height: 40px
}

.spacing-vert-40 {
    width: 40px
}

.p-40 {
    padding: 40px
}

.px-40 {
    padding-inline: 40px
}

.py-40 {
    padding-block: 40px
}

.pl-40 {
    padding-left: 40px
}

.pr-40 {
    padding-right: 40px
}

.pt-40 {
    padding-top: 40px
}

.pb-40 {
    padding-bottom: 40px
}

.mx-40 {
    margin-inline: 40px
}

.my-40 {
    margin-block: 40px
}

.ml-40 {
    margin-left: 40px
}

.mr-40 {
    margin-right: 40px
}

.mt-40 {
    margin-top: 40px
}

.mb-40 {
    margin-bottom: 40px
}

.spacing-hor-48 {
    height: 48px
}

.spacing-vert-48 {
    width: 48px
}

.p-48 {
    padding: 48px
}

.px-48 {
    padding-inline: 48px
}

.py-48 {
    padding-block: 48px
}

.pl-48 {
    padding-left: 48px
}

.pr-48 {
    padding-right: 48px
}

.pt-48 {
    padding-top: 48px
}

.pb-48 {
    padding-bottom: 48px
}

.mx-48 {
    margin-inline: 48px
}

.my-48 {
    margin-block: 48px
}

.ml-48 {
    margin-left: 48px
}

.mr-48 {
    margin-right: 48px
}

.mt-48 {
    margin-top: 48px
}

.mb-48 {
    margin-bottom: 48px
}

.spacing-hor-56 {
    height: 56px
}

.spacing-vert-56 {
    width: 56px
}

.p-56 {
    padding: 56px
}

.px-56 {
    padding-inline: 56px
}

.py-56 {
    padding-block: 56px
}

.pl-56 {
    padding-left: 56px
}

.pr-56 {
    padding-right: 56px
}

.pt-56 {
    padding-top: 56px
}

.pb-56 {
    padding-bottom: 56px
}

.mx-56 {
    margin-inline: 56px
}

.my-56 {
    margin-block: 56px
}

.ml-56 {
    margin-left: 56px
}

.mr-56 {
    margin-right: 56px
}

.mt-56 {
    margin-top: 56px
}

.mb-56 {
    margin-bottom: 56px
}

.spacing-hor-64 {
    height: 64px
}

.spacing-vert-64 {
    width: 64px
}

.p-64 {
    padding: 64px
}

.px-64 {
    padding-inline: 64px
}

.py-64 {
    padding-block: 64px
}

.pl-64 {
    padding-left: 64px
}

.pr-64 {
    padding-right: 64px
}

.pt-64 {
    padding-top: 64px
}

.pb-64 {
    padding-bottom: 64px
}

.mx-64 {
    margin-inline: 64px
}

.my-64 {
    margin-block: 64px
}

.ml-64 {
    margin-left: 64px
}

.mr-64 {
    margin-right: 64px
}

.mt-64 {
    margin-top: 64px
}

.mb-64 {
    margin-bottom: 64px
}

.spacing-hor-72 {
    height: 72px
}

.spacing-vert-72 {
    width: 72px
}

.p-72 {
    padding: 72px
}

.px-72 {
    padding-inline: 72px
}

.py-72 {
    padding-block: 72px
}

.pl-72 {
    padding-left: 72px
}

.pr-72 {
    padding-right: 72px
}

.pt-72 {
    padding-top: 72px
}

.pb-72 {
    padding-bottom: 72px
}

.mx-72 {
    margin-inline: 72px
}

.my-72 {
    margin-block: 72px
}

.ml-72 {
    margin-left: 72px
}

.mr-72 {
    margin-right: 72px
}

.mt-72 {
    margin-top: 72px
}

.mb-72 {
    margin-bottom: 72px
}

.spacing-hor-80 {
    height: 80px
}

.spacing-vert-80 {
    width: 80px
}

.p-80 {
    padding: 80px
}

.px-80 {
    padding-inline: 80px
}

.py-80 {
    padding-block: 80px
}

.pl-80 {
    padding-left: 80px
}

.pr-80 {
    padding-right: 80px
}

.pt-80 {
    padding-top: 80px
}

.pb-80 {
    padding-bottom: 80px
}

.mx-80 {
    margin-inline: 80px
}

.my-80 {
    margin-block: 80px
}

.ml-80 {
    margin-left: 80px
}

.mr-80 {
    margin-right: 80px
}

.mt-80 {
    margin-top: 80px
}

.mb-80 {
    margin-bottom: 80px
}

.spacing-hor-88 {
    height: 88px
}

.spacing-vert-88 {
    width: 88px
}

.p-88 {
    padding: 88px
}

.px-88 {
    padding-inline: 88px
}

.py-88 {
    padding-block: 88px
}

.pl-88 {
    padding-left: 88px
}

.pr-88 {
    padding-right: 88px
}

.pt-88 {
    padding-top: 88px
}

.pb-88 {
    padding-bottom: 88px
}

.mx-88 {
    margin-inline: 88px
}

.my-88 {
    margin-block: 88px
}

.ml-88 {
    margin-left: 88px
}

.mr-88 {
    margin-right: 88px
}

.mt-88 {
    margin-top: 88px
}

.mb-88 {
    margin-bottom: 88px
}

.spacing-hor-96 {
    height: 96px
}

.spacing-vert-96 {
    width: 96px
}

.p-96 {
    padding: 96px
}

.px-96 {
    padding-inline: 96px
}

.py-96 {
    padding-block: 96px
}

.pl-96 {
    padding-left: 96px
}

.pr-96 {
    padding-right: 96px
}

.pt-96 {
    padding-top: 96px
}

.pb-96 {
    padding-bottom: 96px
}

.mx-96 {
    margin-inline: 96px
}

.my-96 {
    margin-block: 96px
}

.ml-96 {
    margin-left: 96px
}

.mr-96 {
    margin-right: 96px
}

.mt-96 {
    margin-top: 96px
}

.mb-96 {
    margin-bottom: 96px
}

.spacing-hor-104 {
    height: 104px
}

.spacing-vert-104 {
    width: 104px
}

.p-104 {
    padding: 104px
}

.px-104 {
    padding-inline: 104px
}

.py-104 {
    padding-block: 104px
}

.pl-104 {
    padding-left: 104px
}

.pr-104 {
    padding-right: 104px
}

.pt-104 {
    padding-top: 104px
}

.pb-104 {
    padding-bottom: 104px
}

.mx-104 {
    margin-inline: 104px
}

.my-104 {
    margin-block: 104px
}

.ml-104 {
    margin-left: 104px
}

.mr-104 {
    margin-right: 104px
}

.mt-104 {
    margin-top: 104px
}

.mb-104 {
    margin-bottom: 104px
}

.spacing-hor-112 {
    height: 112px
}

.spacing-vert-112 {
    width: 112px
}

.p-112 {
    padding: 112px
}

.px-112 {
    padding-inline: 112px
}

.py-112 {
    padding-block: 112px
}

.pl-112 {
    padding-left: 112px
}

.pr-112 {
    padding-right: 112px
}

.pt-112 {
    padding-top: 112px
}

.pb-112 {
    padding-bottom: 112px
}

.mx-112 {
    margin-inline: 112px
}

.my-112 {
    margin-block: 112px
}

.ml-112 {
    margin-left: 112px
}

.mr-112 {
    margin-right: 112px
}

.mt-112 {
    margin-top: 112px
}

.mb-112 {
    margin-bottom: 112px
}

.spacing-hor-120 {
    height: 120px
}

.spacing-vert-120 {
    width: 120px
}

.p-120 {
    padding: 120px
}

.px-120 {
    padding-inline: 120px
}

.py-120 {
    padding-block: 120px
}

.pl-120 {
    padding-left: 120px
}

.pr-120 {
    padding-right: 120px
}

.pt-120 {
    padding-top: 120px
}

.pb-120 {
    padding-bottom: 120px
}

.mx-120 {
    margin-inline: 120px
}

.my-120 {
    margin-block: 120px
}

.ml-120 {
    margin-left: 120px
}

.mr-120 {
    margin-right: 120px
}

.mt-120 {
    margin-top: 120px
}

.mb-120 {
    margin-bottom: 120px
}

.radius-small {
    border-radius: 2px
}

.radius-small-t {
    border-radius: 2px 2px 0 0
}

.radius-small-tl {
    border-radius: 2px 0 0
}

.radius-small-tr {
    border-radius: 0 2px 0 0
}

.radius-small-b {
    border-radius: 0 0 2px 2px
}

.radius-small-bl {
    border-radius: 0 0 2px
}

.radius-small-br {
    border-radius: 0 0 0 2px
}

.radius-medium {
    border-radius: 4px
}

.radius-medium-t {
    border-radius: 4px 4px 0 0
}

.radius-medium-tl {
    border-radius: 4px 0 0
}

.radius-medium-tr {
    border-radius: 0 4px 0 0
}

.radius-medium-b {
    border-radius: 0 0 4px 4px
}

.radius-medium-bl {
    border-radius: 0 0 4px
}

.radius-medium-br {
    border-radius: 0 0 0 4px
}

.radius-large {
    border-radius: 8px
}

.radius-large-t {
    border-radius: 8px 8px 0 0
}

.radius-large-tl {
    border-radius: 8px 0 0
}

.radius-large-tr {
    border-radius: 0 8px 0 0
}

.radius-large-b {
    border-radius: 0 0 8px 8px
}

.radius-large-bl {
    border-radius: 0 0 8px
}

.radius-large-br {
    border-radius: 0 0 0 8px
}

.radius-xlarge {
    border-radius: 12px
}

.radius-xlarge-t {
    border-radius: 12px 12px 0 0
}

.radius-xlarge-tl {
    border-radius: 12px 0 0
}

.radius-xlarge-tr {
    border-radius: 0 12px 0 0
}

.radius-xlarge-b {
    border-radius: 0 0 12px 12px
}

.radius-xlarge-bl {
    border-radius: 0 0 12px
}

.radius-xlarge-br {
    border-radius: 0 0 0 12px
}

.radius-none {
    border-radius: 0
}

.radius-circular {
    border-radius: 100%
}

.flex-column {
    display: flex;
    flex-direction: column
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center
}

.flex-center-y {
    display: flex;
    align-items: center
}

.flex-center-x {
    display: flex;
    justify-content: center
}

.flex-between {
    display: flex;
    justify-content: space-between
}

.flex-align-start {
    align-items: flex-start
}

.flex-align-end {
    align-items: flex-end
}

.flex-justify-end {
    justify-content: flex-end
}

.flex-justify-start {
    justify-content: flex-start
}

.shadow-xs {
    box-shadow: var(--shadow-xs)
}

.shadow-sm {
    box-shadow: var(--shadow-sm)
}

.shadow-md, .input.focus, .dropdown__btn.open, .textarea.focus, .card.focused, .dga-search-box.focus {
    box-shadow: var(--shadow-md)
}

.shadow-lg, .dga-tooltip-main, .header__sub-menu {
    box-shadow: var(--shadow-lg)
}

.shadow-xl, .dropdown__list, .input__dropdown-list, .textarea__dropdown-list, .dga-search-box__dropdown-list {
    box-shadow: var(--shadow-xl)
}

.shadow-2xl, .date-picker-root, .menu {
    box-shadow: var(--shadow-md)
}

.shadow-3xl, .notification-toast, dialog .modal {
    box-shadow: var(--shadow-3xl)
}

.ver-divider {
    width: 1px;
    height: 48px;
    background: hsla(var(--colors-alpha-black) / 20%);
    margin-inline: var(--spacing-xl)
}

@media only screen and(max-width: 37.5em) {
    .xs-hide {
        display: none
    }
}

.flex-justify-start {
    justify-content: start
}

.flex-justify-end {
    justify-content: end
}

.flex-justify-center {
    justify-content: center
}

.flex-justify-between {
    justify-content: between
}

.flex-justify-around {
    justify-content: around
}

.flex-align-start {
    align-items: start
}

.flex-align-end {
    align-items: end
}

.flex-align-center {
    align-items: center
}

.flex-align-stretch {
    align-items: stretch
}

*, :before, :after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

:before, :after {
    --tw-content: ""
}

html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: #fff0
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b, strong {
    font-weight: bolder
}

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    outline: none
}

button, select {
    text-transform: none
}

button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
    -webkit-appearance: button;
    background-color: #fff0;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

ol, ul, menu {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::-moz-placeholder, textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
}

input::placeholder, textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

button, [role="button"] {
    cursor: pointer
}

:disabled {
    cursor: default
}

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle
}

img, video {
    max-width: 100%;
    height: auto
}

[hidden] {
    display: none
}

*, :before, :after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:;
    --tw-pan-y:;
    --tw-pinch-zoom:;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:;
    --tw-gradient-via-position:;
    --tw-gradient-to-position:;
    --tw-ordinal:;
    --tw-slashed-zero:;
    --tw-numeric-figure:;
    --tw-numeric-spacing:;
    --tw-numeric-fraction:;
    --tw-ring-inset:;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:;
    --tw-brightness:;
    --tw-contrast:;
    --tw-grayscale:;
    --tw-hue-rotate:;
    --tw-invert:;
    --tw-saturate:;
    --tw-sepia:;
    --tw-drop-shadow:;
    --tw-backdrop-blur:;
    --tw-backdrop-brightness:;
    --tw-backdrop-contrast:;
    --tw-backdrop-grayscale:;
    --tw-backdrop-hue-rotate:;
    --tw-backdrop-invert:;
    --tw-backdrop-opacity:;
    --tw-backdrop-saturate:;
    --tw-backdrop-sepia:;
    --tw-contain-size:;
    --tw-contain-layout:;
    --tw-contain-paint:;
    --tw-contain-style:
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px
}

.site-main {
    background-color: var(--form-field-background-default) !important
}

#feedback_main, #feedback_yes, #feedback_no, #feedback_response {
    background-color: var(--form-field-background-default) !important
}

.feedback_wrapper {
    background-color: var(--form-field-background-default);
    max-width: 1280px;
    width: 100%;
    display: flex;
    margin: 0 auto
}

@media (max-width: 768px) {
    .feedback_wrapper {
        padding: var(--spacing-none) var(--spacing-4xl)
    }
}

@media (min-width: 640px) {
    .container {
        max-width: calc(100% - 64px) !important
    }
}

@media (min-width: 768px) {
    .container {
        max-width: calc(100% - 64px) !important
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: calc(100% - 64px) !important
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: calc(100% - 64px) !important
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: calc(100% - 64px) !important
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: calc(100% - 64px) !important
    }
}

@media (min-width: 1800px) {
    .container {
        max-width: calc(100% - 64px) !important
    }
}

.pointer-events-none {
    pointer-events: none
}

.visible {
    visibility: visible
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.inset-0 {
    inset: 0
}

.-bottom-\[90\%\] {
    bottom: -90%
}

.-right-16 {
    right: -4rem
}

.-right-20 {
    right: -5rem
}

.bottom-0 {
    bottom: 0
}

.left-0 {
    left: 0
}

.left-9 {
    left: 2.25rem
}

.left-\[10px\] {
    left: 10px
}

.left-\[25\%\] {
    left: 25%
}

.left-\[50\%\] {
    left: 50%
}

.left-\[70px\] {
    left: 70px
}

.right-0 {
    right: 0
}

.right-12 {
    right: 3rem
}

.right-\[10px\] {
    right: 10px
}

.right-\[70px\] {
    right: 70px
}

.top-0 {
    top: 0
}

.top-\[30px\] {
    top: 30px
}

.top-\[50\%\] {
    top: 50%
}

.-z-0, .z-0 {
    z-index: 0
}

.z-10 {
    z-index: 10
}

.z-20 {
    z-index: 20
}

.z-30 {
    z-index: 30
}

.z-50 {
    z-index: 50
}

.z-\[3\] {
    z-index: 3
}

.z-\[99999\] {
    z-index: 99999
}

.order-2 {
    order: 2
}

.col-span-1 {
    grid-column: span 1 / span 1
}

.col-span-10 {
    grid-column: span 10 / span 10
}

.col-span-12 {
    grid-column: span 12 / span 12
}

.col-span-2 {
    grid-column: span 2 / span 2
}

.col-span-4 {
    grid-column: span 4 / span 4
}

.col-span-6 {
    grid-column: span 6 / span 6
}

.col-span-8 {
    grid-column: span 8 / span 8
}

.float-left {
    float: left
}

.m-0 {
    margin: 0
}

.m-auto {
    margin: auto
}

.\ ! my-\[80px\] {
    margin-top: 80px !important;
    margin-bottom: 80px !important
}

.-my-2 {
    margin-top: -.5rem;
    margin-bottom: -.5rem
}

.mx-1 {
    margin-left: .25rem;
    margin-right: .25rem
}

.mx-2 {
    margin-left: .5rem;
    margin-right: .5rem
}

.mx-3 {
    margin-left: .75rem;
    margin-right: .75rem
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem
}

.mx-\[10px\] {
    margin-left: 10px;
    margin-right: 10px
}

.mx-\[16px\] {
    margin-left: 16px;
    margin-right: 16px
}

.mx-\[20rem\] {
    margin-left: 20rem;
    margin-right: 20rem
}

.mx-\[40px\] {
    margin-left: 40px;
    margin-right: 40px
}

.mx-\[7px\] {
    margin-left: 7px;
    margin-right: 7px
}

.mx-\[80px\] {
    margin-left: 80px;
    margin-right: 80px
}

.mx-\[8rem\] {
    margin-left: 8rem;
    margin-right: 8rem
}

.mx-\[var\(--spacing-8xl\)\] {
    margin-left: var(--spacing-8xl);
    margin-right: var(--spacing-8xl)
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.my-20 {
    margin-top: 5rem;
    margin-bottom: 5rem
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem
}

.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}

.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem
}

.my-\[12px\] {
    margin-top: 12px;
    margin-bottom: 12px
}

.my-\[15px\] {
    margin-top: 15px;
    margin-bottom: 15px
}

.my-\[20px\] {
    margin-top: 20px;
    margin-bottom: 20px
}

.my-\[24px\] {
    margin-top: 24px;
    margin-bottom: 24px
}

.my-\[32px\] {
    margin-top: 32px;
    margin-bottom: 32px
}

.my-\[40px\] {
    margin-top: 40px;
    margin-bottom: 40px
}

.my-\[50px\] {
    margin-top: 50px;
    margin-bottom: 50px
}

.my-\[80px\] {
    margin-top: 80px;
    margin-bottom: 80px
}

.my-\[8rem\] {
    margin-top: 8rem;
    margin-bottom: 8rem
}

.my-\[var\(--spacing-8xl\)\] {
    margin-top: var(--spacing-8xl);
    margin-bottom: var(--spacing-8xl)
}

.my-\[var\(--spacing-xl\)\] {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl)
}

.\ ! mb-\[24px\] {
    margin-bottom: 24px !important
}

.\ ! mb-\[40px\] {
    margin-bottom: 40px !important
}

.\ ! ml-0 {
    margin-left: 0 !important
}

.\ ! mr-0 {
    margin-right: 0 !important
}

.\ ! mt-3 {
    margin-top: 0.75rem !important
}

.\ ! mt-\[0\] {
    margin-top: 0 !important
}

.\ ! mt-\[120px\] {
    margin-top: 120px !important
}

.\ ! mt-\[160px\] {
    margin-top: 160px !important
}

.\ ! mt-\[16px\] {
    margin-top: 16px !important
}

.\ ! mt-\[24px\] {
    margin-top: 24px !important
}

.\ ! mt-\[32px\] {
    margin-top: 32px !important
}

.\ ! mt-\[80\] {
    margin-top: 80 !important
}

.\ ! mt-\[80px\] {
    margin-top: 80px !important
}

.\ ! mt-\[var\(--spacing-8xl\)\] {
    margin-top: var(--spacing-8xl) !important
}

.\ ! mt-auto {
    margin-top: auto !important
}

.-mb-px {
    margin-bottom: -1px
}

.-ml-\[var\(--spacing-xs\)\] {
    margin-left: calc(var(--spacing-xs) * -1)
}

.mb-0 {
    margin-bottom: 0
}

.mb-1 {
    margin-bottom: .25rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-20 {
    margin-bottom: 5rem
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-5 {
    margin-bottom: 1.25rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mb-8 {
    margin-bottom: 2rem
}

.mb-\[128px\] {
    margin-bottom: 128px
}

.mb-\[12px\] {
    margin-bottom: 12px
}

.mb-\[150px\] {
    margin-bottom: 150px
}

.mb-\[16px\] {
    margin-bottom: 16px
}

.mb-\[18px\] {
    margin-bottom: 18px
}

.mb-\[20px\] {
    margin-bottom: 20px
}

.mb-\[24px\] {
    margin-bottom: 24px
}

.mb-\[26px\] {
    margin-bottom: 26px
}

.mb-\[32px\] {
    margin-bottom: 32px
}

.mb-\[40px\] {
    margin-bottom: 40px
}

.mb-\[48px\] {
    margin-bottom: 48px
}

.mb-\[4px\] {
    margin-bottom: 4px
}

.mb-\[50px\] {
    margin-bottom: 50px
}

.mb-\[80px\] {
    margin-bottom: 80px
}

.mb-\[8px\] {
    margin-bottom: 8px
}

.mb-\[\] {
    margin-bottom:
}

.mb-\[var\(--spacing-4xl\,32px\)\] {
    margin-bottom: var(--spacing-4xl, 32px)
}

.mb-\[var\(--spacing-5xl\)\] {
    margin-bottom: var(--spacing-5xl)
}

.mb-\[var\(--spacing-5xl\,40px\)\] {
    margin-bottom: var(--spacing-5xl, 40px)
}

.mb-\[var\(--spacing-8xl\)\] {
    margin-bottom: var(--spacing-8xl)
}

.mb-\[var\(--spacing-xl\,16px\)\] {
    margin-bottom: var(--spacing-xl, 16px)
}

.ml-4 {
    margin-left: 1rem
}

.ml-\[0\] {
    margin-left: 0
}

.ml-\[30px\] {
    margin-left: 30px
}

.ml-\[80px\] {
    margin-left: 80px
}

.ml-auto {
    margin-left: auto
}

.mr-4 {
    margin-right: 1rem
}

.mr-9 {
    margin-right: 2.25rem
}

.mr-\[30px\] {
    margin-right: 30px
}

.mr-\[80px\] {
    margin-right: 80px
}

.mr-auto {
    margin-right: auto
}

.ms-auto {
    margin-inline-start: auto
}

.mt-2 {
    margin-top: .5rem
}

.mt-2\.5 {
    margin-top: .625rem
}

.mt-20 {
    margin-top: 5rem
}

.mt-3 {
    margin-top: .75rem
}

.mt-4 {
    margin-top: 1rem
}

.mt-5 {
    margin-top: 1.25rem
}

.mt-6 {
    margin-top: 1.5rem
}

.mt-7 {
    margin-top: 1.75rem
}

.mt-8 {
    margin-top: 2rem
}

.mt-\[-80px\] {
    margin-top: -80px
}

.mt-\[1\.2rem\] {
    margin-top: 1.2rem
}

.mt-\[10px\] {
    margin-top: 10px
}

.mt-\[150px\] {
    margin-top: 150px
}

.mt-\[15px\] {
    margin-top: 15px
}

.mt-\[16px\] {
    margin-top: 16px
}

.mt-\[18px\] {
    margin-top: 18px
}

.mt-\[20px\] {
    margin-top: 20px
}

.mt-\[210px\] {
    margin-top: 210px
}

.mt-\[24px\] {
    margin-top: 24px
}

.mt-\[30px\] {
    margin-top: 30px
}

.mt-\[32px\] {
    margin-top: 32px
}

.mt-\[36px\] {
    margin-top: 36px
}

.mt-\[40px\] {
    margin-top: 40px
}

.mt-\[4rem\] {
    margin-top: 4rem
}

.mt-\[66px\] {
    margin-top: 66px
}

.mt-\[80px\] {
    margin-top: 80px
}

.mt-\[8px\] {
    margin-top: 8px
}

.mt-\[var\(--spacing-4xl\)\] {
    margin-top: var(--spacing-4xl)
}

.mt-\[var\(--spacing-8xl\)\] {
    margin-top: var(--spacing-8xl)
}

.mt-\[var\(--spacing-md\,8px\)\] {
    margin-top: var(--spacing-md, 8px)
}

.mt-auto {
    margin-top: auto
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.table {
    display: table
}

.grid {
    display: grid
}

.contents {
    display: contents
}

.hidden {
    display: none
}

.aspect-\[16\/9\] {
    aspect-ratio: 16/9
}

.aspect-square {
    aspect-ratio: 1 / 1
}

.aspect-video {
    aspect-ratio: 16 / 9
}

.size-12 {
    width: 3rem;
    height: 3rem
}

.size-\[16px\] {
    width: 16px;
    height: 16px
}

.size-\[20px\] {
    width: 20px;
    height: 20px
}

.size-\[24px\] {
    width: 24px;
    height: 24px
}

.size-\[32px\] {
    width: 32px;
    height: 32px
}

.size-\[48px\] {
    width: 48px;
    height: 48px
}

.size-\[52px\] {
    width: 52px;
    height: 52px
}

.size-\[56px\] {
    width: 56px;
    height: 56px
}

.size-\[70px\] {
    width: 70px;
    height: 70px
}

.size-\[9px\] {
    width: 9px;
    height: 9px
}

.\ ! h-\[66px\] {
    height: 66px !important
}

.\ ! h-full {
    height: 100% !important
}

.h-5 {
    height: 1.25rem
}

.h-8 {
    height: 2rem
}

.h-\[100vh\] {
    height: 100vh
}

.h-\[158px\] {
    height: 158px
}

.h-\[160px\] {
    height: 160px
}

.h-\[1px\] {
    height: 1px
}

.h-\[2\.4rem\] {
    height: 2.4rem
}

.h-\[200px\] {
    height: 200px
}

.h-\[20px\] {
    height: 20px
}

.h-\[221px\] {
    height: 221px
}

.h-\[24px\] {
    height: 24px
}

.h-\[28px\] {
    height: 28px
}

.h-\[305px\] {
    height: 305px
}

.h-\[32px\] {
    height: 32px
}

.h-\[352px\] {
    height: 352px
}

.h-\[395px\] {
    height: 395px
}

.h-\[4\.8rem\] {
    height: 4.8rem
}

.h-\[40px\] {
    height: 40px
}

.h-\[425px\] {
    height: 425px
}

.h-\[43px\] {
    height: 43px
}

.h-\[44px\] {
    height: 44px
}

.h-\[46\.5px\] {
    height: 46.5px
}

.h-\[48px\] {
    height: 48px
}

.h-\[491px\] {
    height: 491px
}

.h-\[5\.2rem\] {
    height: 5.2rem
}

.h-\[50px\] {
    height: 50px
}

.h-\[52px\] {
    height: 52px
}

.h-\[58px\] {
    height: 58px
}

.h-\[5rem\] {
    height: 5rem
}

.h-\[6\.2rem\] {
    height: 6.2rem
}

.h-\[62px\] {
    height: 62px
}

.h-\[72px\] {
    height: 72px
}

.h-\[min\(648px\,100vh\)\] {
    height: min(648px, 100vh)
}

.h-auto {
    height: auto
}

.h-dvh {
    height: 100dvh
}

.h-full {
    height: 100%
}

.\ ! max-h-full {
    max-height: 100% !important
}

.max-h-\[160px\] {
    max-height: 160px
}

.max-h-\[305px\] {
    max-height: 305px
}

.max-h-\[352px\] {
    max-height: 352px
}

.max-h-\[395px\] {
    max-height: 395px
}

.max-h-\[425px\] {
    max-height: 425px
}

.max-h-\[491px\] {
    max-height: 491px
}

.min-h-\[250px\] {
    min-height: 250px
}

.min-h-\[28\.5rem\] {
    min-height: 28.5rem
}

.min-h-\[300px\] {
    min-height: 300px
}

.min-h-\[339px\] {
    min-height: 339px
}

.min-h-\[348px\] {
    min-height: 348px
}

.min-h-\[35\.5rem\] {
    min-height: 35.5rem
}

.min-h-\[42\.6rem\] {
    min-height: 42.6rem
}

.min-h-\[420px\] {
    min-height: 420px
}

.min-h-\[48px\] {
    min-height: 48px
}

.min-h-\[576px\] {
    min-height: 576px
}

.min-h-\[6\.6rem\] {
    min-height: 6.6rem
}

.min-h-\[60px\] {
    min-height: 60px
}

.min-h-\[6rem\] {
    min-height: 6rem
}

.min-h-screen {
    min-height: 100vh
}

.\ ! w-full {
    width: 100% !important
}

.w-5 {
    width: 1.25rem
}

.w-52 {
    width: 13rem
}

.w-8 {
    width: 2rem
}

.w-\[100\%\] {
    width: 100%
}

.w-\[120px\] {
    width: 120px
}

.w-\[150px\] {
    width: 150px
}

.w-\[168px\] {
    width: 168px
}

.w-\[183px\] {
    width: 183px
}

.w-\[1px\] {
    width: 1px
}

.w-\[2\.4rem\] {
    width: 2.4rem
}

.w-\[20px\] {
    width: 20px
}

.w-\[24px\] {
    width: 24px
}

.w-\[28px\] {
    width: 28px
}

.w-\[32px\] {
    width: 32px
}

.w-\[333px\] {
    width: 333px
}

.w-\[364px\] {
    width: 364px
}

.w-\[4\.8rem\] {
    width: 4.8rem
}

.w-\[40\%\] {
    width: 40%
}

.w-\[40px\] {
    width: 40px
}

.w-\[46\.5px\] {
    width: 46.5px
}

.w-\[48px\] {
    width: 48px
}

.w-\[5\.2rem\] {
    width: 5.2rem
}

.w-\[52px\] {
    width: 52px
}

.w-\[5rem\] {
    width: 5rem
}

.w-\[6\.2rem\] {
    width: 6.2rem
}

.w-\[60\%\] {
    width: 60%
}

.w-\[60px\] {
    width: 60px
}

.w-\[62px\] {
    width: 62px
}

.w-\[70\%\] {
    width: 70%
}

.w-\[80\%\] {
    width: 80%
}

.w-\[90\%\] {
    width: 90%
}

.w-\[95\%\] {
    width: 95%
}

.w-\[calc\(100\%\/1-16px\+\(16px\/1\)\)\] {
    width: calc(100% + 0px)
}

.w-\[calc\(100\%\/2-24px\+\(24px\/2\)\)\] {
    width: calc(50% - 12px)
}

.w-auto {
    width: auto
}

.w-fit {
    width: fit-content
}

.w-full {
    width: 100%
}

.w-screen {
    width: 100vw
}

.\ ! min-w-full {
    min-width: 100% !important
}

.min-w-\[130px\] {
    min-width: 130px
}

.min-w-\[200px\] {
    min-width: 200px
}

.min-w-\[216px\] {
    min-width: 216px
}

.min-w-\[220px\] {
    min-width: 220px
}

.min-w-\[300px\] {
    min-width: 300px
}

.min-w-\[310px\] {
    min-width: 310px
}

.min-w-\[40px\] {
    min-width: 40px
}

.min-w-\[46\.5px\] {
    min-width: 46.5px
}

.min-w-\[48px\] {
    min-width: 48px
}

.min-w-\[500px\] {
    min-width: 500px
}

.min-w-\[6\.6rem\] {
    min-width: 6.6rem
}

.min-w-\[60px\] {
    min-width: 60px
}

.min-w-\[62px\] {
    min-width: 62px
}

.min-w-\[6rem\] {
    min-width: 6rem
}

.min-w-fit {
    min-width: fit-content
}

.min-w-full {
    min-width: 100%
}

.max-w-52 {
    max-width: 13rem
}

.max-w-\[100px\] {
    max-width: 100px
}

.max-w-\[1280px\] {
    max-width: 1280px
}

.max-w-\[1300px\] {
    max-width: 1300px
}

.max-w-\[1610px\] {
    max-width: 1610px
}

.max-w-\[200px\] {
    max-width: 200px
}

.max-w-\[273px\] {
    max-width: 273px
}

.max-w-\[300px\] {
    max-width: 300px
}

.max-w-\[320px\] {
    max-width: 320px
}

.max-w-\[334px\] {
    max-width: 334px
}

.max-w-\[344px\] {
    max-width: 344px
}

.max-w-\[350px\] {
    max-width: 350px
}

.max-w-\[366px\] {
    max-width: 366px
}

.max-w-\[378px\] {
    max-width: 378px
}

.max-w-\[480px\] {
    max-width: 480px
}

.max-w-\[484px\] {
    max-width: 484px
}

.max-w-\[520px\] {
    max-width: 520px
}

.max-w-\[532px\] {
    max-width: 532px
}

.max-w-\[543px\] {
    max-width: 543px
}

.max-w-\[550px\] {
    max-width: 550px
}

.max-w-\[570px\] {
    max-width: 570px
}

.max-w-\[592px\] {
    max-width: 592px
}

.max-w-\[620px\] {
    max-width: 620px
}

.max-w-\[63px\] {
    max-width: 63px
}

.max-w-\[640px\] {
    max-width: 640px
}

.max-w-\[650px\] {
    max-width: 650px
}

.max-w-\[730px\] {
    max-width: 730px
}

.max-w-\[770px\] {
    max-width: 770px
}

.max-w-\[80\%\] {
    max-width: 80%
}

.max-w-\[825px\] {
    max-width: 825px
}

.max-w-\[840px\] {
    max-width: 840px
}

.max-w-\[865px\] {
    max-width: 865px
}

.max-w-\[880px\] {
    max-width: 880px
}

.max-w-full {
    max-width: 100%
}

.max-w-lg {
    max-width: 32rem
}

.flex-1 {
    flex: 1 1 0%
}

.flex-shrink-0, .shrink-0 {
    flex-shrink: 0
}

.flex-grow-0 {
    flex-grow: 0
}

.grow {
    flex-grow: 1
}

.-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-x-full {
    --tw-translate-x: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-x-full {
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.scale-\[180\%\] {
    --tw-scale-x: 180%;
    --tw-scale-y: 180%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.cursor-pointer {
    cursor: pointer
}

.resize {
    resize: both
}

.list-inside {
    list-style-position: inside
}

.list-outside {
    list-style-position: outside
}

.\ ! list-decimal {
    list-style-type: decimal !important
}

.\ ! list-disc {
    list-style-type: disc !important
}

.list-decimal {
    list-style-type: decimal
}

.list-disc {
    list-style-type: disc
}

.list-none {
    list-style-type: none
}

.appearance-none {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.grid-cols-1 {
    grid-template-columns:repeat(1, minmax(0, 1fr))
}

.grid-cols-10 {
    grid-template-columns:repeat(10, minmax(0, 1fr))
}

.grid-cols-12 {
    grid-template-columns:repeat(12, minmax(0, 1fr))
}

.grid-cols-2 {
    grid-template-columns:repeat(2, minmax(0, 1fr))
}

.grid-cols-4 {
    grid-template-columns:repeat(4, minmax(0, 1fr))
}

.grid-cols-6 {
    grid-template-columns:repeat(6, minmax(0, 1fr))
}

.grid-cols-8 {
    grid-template-columns:repeat(8, minmax(0, 1fr))
}

.grid-cols-\[1fr_2\.5fr\] {
    grid-template-columns:1fr 2.5fr
}

.flex-col {
    flex-direction: column
}

.flex-col-reverse {
    flex-direction: column-reverse
}

.flex-wrap {
    flex-wrap: wrap
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.items-baseline {
    align-items: baseline
}

.items-stretch {
    align-items: stretch
}

.justify-start {
    justify-content: flex-start
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.justify-around {
    justify-content: space-around
}

.justify-stretch {
    justify-content: stretch
}

.gap-1 {
    gap: .25rem
}

.gap-10 {
    gap: 2.5rem
}

.gap-2 {
    gap: .5rem
}

.gap-20 {
    gap: 5rem
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

.gap-5 {
    gap: 1.25rem
}

.gap-6 {
    gap: 1.5rem
}

.gap-8 {
    gap: 2rem
}

.gap-\[12px\] {
    gap: 12px
}

.gap-\[16px\] {
    gap: 16px
}

.gap-\[17px\] {
    gap: 17px
}

.gap-\[2\.4rem\] {
    gap: 2.4rem
}

.gap-\[20px\] {
    gap: 20px
}

.gap-\[22px\] {
    gap: 22px
}

.gap-\[24px\] {
    gap: 24px
}

.gap-\[26px\] {
    gap: 26px
}

.gap-\[3\.2rem\] {
    gap: 3.2rem
}

.gap-\[32px\] {
    gap: 32px
}

.gap-\[3px\] {
    gap: 3px
}

.gap-\[4\.8rem\] {
    gap: 4.8rem
}

.gap-\[40px\] {
    gap: 40px
}

.gap-\[46px\] {
    gap: 46px
}

.gap-\[4px\] {
    gap: 4px
}

.gap-\[80px\] {
    gap: 80px
}

.gap-\[8px\] {
    gap: 8px
}

.gap-\[var\(--spacing-2xl\)\] {
    gap: var(--spacing-2xl)
}

.gap-\[var\(--spacing-3xl\)\] {
    gap: var(--spacing-3xl)
}

.gap-\[var\(--spacing-3xl\,24px\)\] {
    gap: var(--spacing-3xl, 24px)
}

.gap-\[var\(--spacing-4xl\)\] {
    gap: var(--spacing-4xl)
}

.gap-\[var\(--spacing-4xl\,32px\)\] {
    gap: var(--spacing-4xl, 32px)
}

.gap-\[var\(--spacing-5xl\)\] {
    gap: var(--spacing-5xl)
}

.gap-\[var\(--spacing-8xl\)\] {
    gap: var(--spacing-8xl)
}

.gap-\[var\(--spacing-lg\)\] {
    gap: var(--spacing-lg)
}

.gap-\[var\(--spacing-md\)\] {
    gap: var(--spacing-md)
}

.gap-\[var\(--spacing-sm\)\] {
    gap: var(--spacing-sm)
}

.gap-\[var\(--spacing-xl\)\] {
    gap: var(--spacing-xl)
}

.gap-\[var\(--spacing-xl\,16px\)\;\], .gap-\[var\(--spacing-xl\,16px\)\] {
    gap: var(--spacing-xl, 16px)
}

.gap-\[var\(--spacing-xs\)\] {
    gap: var(--spacing-xs)
}

.gap-y-20 {
    row-gap: 5rem
}

.gap-y-5 {
    row-gap: 1.25rem
}

.space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.25rem * var(--tw-space-x-reverse));
    margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-y-10 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse))
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}

.space-y-\[16px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(16px * var(--tw-space-y-reverse))
}

.space-y-\[32px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(32px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(32px * var(--tw-space-y-reverse))
}

.space-y-\[40px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(40px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(40px * var(--tw-space-y-reverse))
}

.space-y-\[4px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(4px * var(--tw-space-y-reverse))
}

.space-y-\[80px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(80px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(80px * var(--tw-space-y-reverse))
}

.space-y-\[8px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(8px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(8px * var(--tw-space-y-reverse))
}

.space-y-\[var\(--spacing-4xl\)\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-4xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-4xl) * var(--tw-space-y-reverse))
}

.space-y-\[var\(--spacing-4xl\,32px\)\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-4xl, 32px) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-4xl, 32px) * var(--tw-space-y-reverse))
}

.space-y-\[var\(--spacing-8xl\)\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-8xl) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-8xl) * var(--tw-space-y-reverse))
}

.space-y-\[var\(--spacing-xl\,16px\)\] > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(var(--spacing-xl, 16px) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(var(--spacing-xl, 16px) * var(--tw-space-y-reverse))
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
}

.divide-y-\[1px\] > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
}

.divide-\[\#E5E7EB\] > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-divide-opacity))
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-divide-opacity))
}

.self-start {
    align-self: flex-start
}

.self-center {
    align-self: center
}

.self-stretch {
    align-self: stretch
}

.overflow-hidden {
    overflow: hidden
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-y-auto {
    overflow-y: auto
}

.overflow-x-hidden {
    overflow-x: hidden
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.\ ! whitespace-normal {
    white-space: normal !important
}

.whitespace-normal {
    white-space: normal
}

.whitespace-nowrap {
    white-space: nowrap
}

.whitespace-pre-line {
    white-space: pre-line
}

.whitespace-pre-wrap {
    white-space: pre-wrap
}

.text-balance {
    text-wrap: balance
}

.break-words {
    overflow-wrap: break-word
}

.break-all {
    word-break: break-all
}

.rounded {
    border-radius: .25rem
}

.rounded-2xl {
    border-radius: 1rem
}

.rounded-\[1\.2rem\] {
    border-radius: 1.2rem
}

.rounded-\[1\.6rem\] {
    border-radius: 1.6rem
}

.rounded-\[10px\] {
    border-radius: 10px
}

.rounded-\[10rem\] {
    border-radius: 10rem
}

.rounded-\[12px\] {
    border-radius: 12px
}

.rounded-\[16px\] {
    border-radius: 16px
}

.rounded-\[1rem\] {
    border-radius: 1rem
}

.rounded-\[24px\] {
    border-radius: 24px
}

.rounded-\[4px\] {
    border-radius: 4px
}

.rounded-\[6px\] {
    border-radius: 6px
}

.rounded-\[8px\] {
    border-radius: 8px
}

.rounded-\[var\(--radius-lg\)\] {
    border-radius: var(--radius-lg)
}

.rounded-\[var\(--radius-md\)\] {
    border-radius: var(--radius-md)
}

.rounded-\[var\(--radius-sm\,4px\)\] {
    border-radius: var(--radius-sm, 4px)
}

.rounded-\[var\(--radius-xl\)\] {
    border-radius: var(--radius-xl)
}

.rounded-\[var\(--radius-xl\,12px\)\] {
    border-radius: var(--radius-xl, 12px)
}

.rounded-\[var\(--radius-xs\)\] {
    border-radius: var(--radius-xs)
}

.rounded-\[var\(--spacing-3xl\)\] {
    border-radius: var(--spacing-3xl)
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: .5rem
}

.rounded-md {
    border-radius: .375rem
}

.rounded-e-full {
    border-start-end-radius: 9999px;
    border-end-end-radius: 9999px
}

.rounded-s-full {
    border-start-start-radius: 9999px;
    border-end-start-radius: 9999px
}

.rounded-t-\[var\(--radius-lg\)\] {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg)
}

.rounded-bl-\[18px\] {
    border-bottom-left-radius: 18px
}

.rounded-br-\[16px\] {
    border-bottom-right-radius: 16px
}

.rounded-br-\[18px\] {
    border-bottom-right-radius: 18px
}

.rounded-tl-\[var\(--radius-lg\)\] {
    border-top-left-radius: var(--radius-lg)
}

.border {
    border-width: 1px
}

.border-0 {
    border-width: 0
}

.border-\[1px\] {
    border-width: 1px
}

.\ ! border-l {
    border-left-width: 1px !important
}

.\ ! border-r {
    border-right-width: 1px !important
}

.border-b {
    border-bottom-width: 1px
}

.border-b-2 {
    border-bottom-width: 2px
}

.border-b-\[1px\] {
    border-bottom-width: 1px
}

.border-b-\[3px\] {
    border-bottom-width: 3px
}

.border-l-\[8px\] {
    border-left-width: 8px
}

.border-r {
    border-right-width: 1px
}

.border-t {
    border-top-width: 1px
}

.\ ! border-solid {
    border-style: solid !important
}

.border-solid {
    border-style: solid
}

.\ ! border-inherit {
    border-color: inherit !important
}

.border-\[\#D2D6DB\] {
    --tw-border-opacity: 1;
    border-color: rgb(210 214 219 / var(--tw-border-opacity))
}

.border-\[\#E5E7EB\] {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity))
}

.border-\[\#FEDF89\] {
    --tw-border-opacity: 1;
    border-color: rgb(254 223 137 / var(--tw-border-opacity))
}

.border-\[\#e8eaee\] {
    --tw-border-opacity: 1;
    border-color: rgb(232 234 238 / var(--tw-border-opacity))
}

.border-\[rgba\(255\,255\,255\,0\.30\)\] {
    border-color: #ffffff4d
}

.border-\[var\(--Colors-Gray-neutral-200\,\#E5E7EB\)\] {
    border-color: var(--Colors-Gray-neutral-200, #e5e7eb)
}

.border-\[var\(--Colors-Gray-neutral-300\,\#D2D6DB\)\] {
    border-color: var(--Colors-Gray-neutral-300, #d2d6db)
}

.border-\[var\(--border-background-neutral\,\#D2D6DB\)\] {
    border-color: var(--border-background-neutral, #d2d6db)
}

.border-\[var\(--border-neutral-primary\,\#D2D6DB\)\] {
    border-color: var(--border-neutral-primary, #d2d6db)
}

.border-\[var\(--border-neutral-secondary\,\#E5E7EB\)\] {
    border-color: var(--border-neutral-secondary, #e5e7eb)
}

.border-\[var\(--border-oncolor-transparent-30\,rgba\(255\,255\,255\,0\.30\)\)\] {
    border-color: var(--border-oncolor-transparent-30, rgb(255 255 255 / .3))
}

.border-\[var\(--colors-border-secondary\,\#EAECF0\)\] {
    border-color: var(--colors-border-secondary, #eaecf0)
}

.border-\[var\(--colors-brand-600\,\#1B8354\)\] {
    border-color: var(--colors-brand-600, #1b8354)
}

.border-\[var\(--colors-gray-neutral-200\)\] {
    border-color: var(--colors-gray-neutral-200)
}

.border-\[var\(--colors-gray-neutral-200\,\#E5E7EB\)\] {
    border-color: var(--colors-gray-neutral-200, #e5e7eb)
}

.border-\[var\(--colors-gray-neutral-300\)\] {
    border-color: var(--colors-gray-neutral-300)
}

.border-\[var\(--colors-gray-neutral-300\,\#D2D6DB\)\] {
    border-color: var(--colors-gray-neutral-300, #d2d6db)
}

.border-\[var\(--tag-border-info-light\,\#B2DDFF\)\] {
    border-color: var(--tag-border-info-light, #b2ddff)
}

.border-\[var\(--tag-border-success-light\,\#ABEFC6\)\] {
    border-color: var(--tag-border-success-light, #abefc6)
}

.border-\[var\(-tag-border-warning-light\,\#FEDF89\)\] {
    border-color: var(-tag-border-warning-light, #fedf89)
}

.border-black {
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity))
}

.border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity))
}

.border-transparent {
    border-color: #fff0
}

.border-l-\[\#DC6803\] {
    --tw-border-opacity: 1;
    border-left-color: rgb(220 104 3 / var(--tw-border-opacity))
}

.bg-\[\#074D31\] {
    --tw-bg-opacity: 1;
    background-color: rgb(7 77 49 / var(--tw-bg-opacity))
}

.bg-\[\#079455\] {
    --tw-bg-opacity: 1;
    background-color: rgb(7 148 85 / var(--tw-bg-opacity))
}

.bg-\[\#161616\] {
    --tw-bg-opacity: 1;
    background-color: rgb(22 22 22 / var(--tw-bg-opacity))
}

.bg-\[\#17B26A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(23 178 106 / var(--tw-bg-opacity))
}

.bg-\[\#1B8354\] {
    --tw-bg-opacity: 1;
    background-color: rgb(27 131 84 / var(--tw-bg-opacity))
}

.bg-\[\#384250\] {
    --tw-bg-opacity: 1;
    background-color: rgb(56 66 80 / var(--tw-bg-opacity))
}

.bg-\[\#47CD89\] {
    --tw-bg-opacity: 1;
    background-color: rgb(71 205 137 / var(--tw-bg-opacity))
}

.bg-\[\#6C737F\] {
    --tw-bg-opacity: 1;
    background-color: rgb(108 115 127 / var(--tw-bg-opacity))
}

.bg-\[\#B42318\] {
    --tw-bg-opacity: 1;
    background-color: rgb(180 35 24 / var(--tw-bg-opacity))
}

.bg-\[\#D2D6DB\] {
    --tw-bg-opacity: 1;
    background-color: rgb(210 214 219 / var(--tw-bg-opacity))
}

.bg-\[\#D92D20\] {
    --tw-bg-opacity: 1;
    background-color: rgb(217 45 32 / var(--tw-bg-opacity))
}

.bg-\[\#DC6803\] {
    --tw-bg-opacity: 1;
    background-color: rgb(220 104 3 / var(--tw-bg-opacity))
}

.bg-\[\#E5E7EB\] {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
}

.bg-\[\#F04438\] {
    --tw-bg-opacity: 1;
    background-color: rgb(240 68 56 / var(--tw-bg-opacity))
}

.bg-\[\#F3F4F6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
}

.bg-\[\#F3FCF6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(243 252 246 / var(--tw-bg-opacity))
}

.bg-\[\#F79009\] {
    --tw-bg-opacity: 1;
    background-color: rgb(247 144 9 / var(--tw-bg-opacity))
}

.bg-\[\#F7FDF9\] {
    --tw-bg-opacity: 1;
    background-color: rgb(247 253 249 / var(--tw-bg-opacity))
}

.bg-\[\#F97066\] {
    --tw-bg-opacity: 1;
    background-color: rgb(249 112 102 / var(--tw-bg-opacity))
}

.bg-\[\#F9FAFB\] {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity))
}

.bg-\[\#FDB022\] {
    --tw-bg-opacity: 1;
    background-color: rgb(253 176 34 / var(--tw-bg-opacity))
}

.bg-\[\#FEC84B\] {
    --tw-bg-opacity: 1;
    background-color: rgb(254 200 75 / var(--tw-bg-opacity))
}

.bg-\[\#FFFAEB\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 250 235 / var(--tw-bg-opacity))
}

.bg-\[\#FFFCF5\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 252 245 / var(--tw-bg-opacity))
}

.bg-\[\#bbb\] {
    --tw-bg-opacity: 1;
    background-color: rgb(187 187 187 / var(--tw-bg-opacity))
}

.bg-\[\#fff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.bg-\[var\(--Bg-icon-brand-light\,\#F3FCF6\)\] {
    background-color: var(--Bg-icon-brand-light, #f3fcf6)
}

.bg-\[var\(--background-SA-Flag\,\#074D31\)\] {
    background-color: var(--background-SA-Flag, #074d31)
}

.bg-\[var\(--background-neutral-200\,\#E5E7EB\)\] {
    background-color: var(--background-neutral-200, #e5e7eb)
}

.bg-\[var\(--background-neutral-50\,\#F9FAFB\)\] {
    background-color: var(--background-neutral-50, #f9fafb)
}

.bg-\[var\(--background-primary-25\,\#F7FDF9\)\] {
    background-color: var(--background-primary-25, #f7fdf9)
}

.bg-\[var\(--background-success\,\#079455\)\] {
    background-color: var(--background-success, #079455)
}

.bg-\[var\(--colors-base-white\,\#fff\)\] {
    background-color: var(--colors-base-white, #fff)
}

.bg-\[var\(--colors-brand-200\,\#B8EACB\)\] {
    background-color: var(--colors-brand-200, #b8eacb)
}

.bg-\[var\(--colors-error-200\,\#FECDCA\)\] {
    background-color: var(--colors-error-200, #fecdca)
}

.bg-\[var\(--colors-gray-neutral-300\,\#D2D6DB\)\] {
    background-color: var(--colors-gray-neutral-300, #d2d6db)
}

.bg-\[var\(--colors-gray-neutral-50\)\] {
    background-color: var(--colors-gray-neutral-50)
}

.bg-\[var\(--colors-gray-neutral-50\,\#F9FAFB\)\] {
    background-color: var(--colors-gray-neutral-50, #f9fafb)
}

.bg-\[var\(--stepper-button-completed\,\#1B8354\)\] {
    background-color: var(--stepper-button-completed, #1b8354)
}

.bg-\[var\(--tag-background-info-light\,\#EFF8FF\)\] {
    background-color: var(--tag-background-info-light, #eff8ff)
}

.bg-\[var\(--tag-background-neutral-light\,\#F9FAFB\)\] {
    background-color: var(--tag-background-neutral-light, #f9fafb)
}

.bg-\[var\(--tag-background-success-light\,\#ECFDF3\)\] {
    background-color: var(--tag-background-success-light, #ecfdf3)
}

.bg-\[var\(--tag-background-warning-light\,\#FFFAEB\)\] {
    background-color: var(--tag-background-warning-light, #fffaeb)
}

.bg-\[var\(-background-neutral-50\,\#F9FAFB\)\] {
    background-color: var(-background-neutral-50, #f9fafb)
}

.bg-\[var\(-background-primary-25\,\#F7FDF9\)\] {
    background-color: var(-background-primary-25, #f7fdf9)
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
}

.bg-gray-100\/50 {
    background-color: #f3f4f680
}

.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity))
}

.bg-transparent {
    background-color: #fff0
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.bg-opacity-10 {
    --tw-bg-opacity: 0.1
}

.bg-opacity-25 {
    --tw-bg-opacity: 0.25
}

.bg-opacity-50 {
    --tw-bg-opacity: 0.5
}

.bg-cover {
    background-size: cover
}

.bg-center {
    background-position: center
}

.bg-right {
    background-position: right
}

.bg-no-repeat {
    background-repeat: no-repeat
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.object-top {
    -o-object-position: top;
    object-position: top
}

.p-0 {
    padding: 0
}

.p-10 {
    padding: 2.5rem
}

.p-2 {
    padding: .5rem
}

.p-4 {
    padding: 1rem
}

.p-6 {
    padding: 1.5rem
}

.p-\[10px\] {
    padding: 10px
}

.p-\[12px\] {
    padding: 12px
}

.p-\[14px\] {
    padding: 14px
}

.p-\[15px\] {
    padding: 15px
}

.p-\[16px\] {
    padding: 16px
}

.p-\[2\.4rem\] {
    padding: 2.4rem
}

.p-\[20px\] {
    padding: 20px
}

.p-\[24px\] {
    padding: 24px
}

.p-\[3\.2rem\] {
    padding: 3.2rem
}

.p-\[32px\] {
    padding: 32px
}

.p-\[3rem\] {
    padding: 3rem
}

.p-\[4\.8rem\] {
    padding: 4.8rem
}

.p-\[40px\] {
    padding: 40px
}

.p-\[48px\] {
    padding: 48px
}

.p-\[8rem\] {
    padding: 8rem
}

.p-\[var\(--spacing-2xl\)\] {
    padding: var(--spacing-2xl)
}

.p-\[var\(--spacing-3xl\)\] {
    padding: var(--spacing-3xl)
}

.p-\[var\(--spacing-3xl\,24px\)\] {
    padding: var(--spacing-3xl, 24px)
}

.p-\[var\(--spacing-4xl\)\] {
    padding: var(--spacing-4xl)
}

.p-\[var\(--spacing-5xl\,40px\)\] {
    padding: var(--spacing-5xl, 40px)
}

.p-\[var\(--spacing-6xl\)\] {
    padding: var(--spacing-6xl)
}

.p-\[var\(--spacing-8xl\)\] {
    padding: var(--spacing-8xl)
}

.p-\[var\(--spacing-lg\,12px\)\] {
    padding: var(--spacing-lg, 12px)
}

.p-\[var\(--spacing-md\)\] {
    padding: var(--spacing-md)
}

.p-\[var\(--spacing-xl\)\] {
    padding: var(--spacing-xl)
}

.p-\[var\(--spacing-xl\,16px\)\] {
    padding: var(--spacing-xl, 16px)
}

.\ ! py-\[0px\] {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.px-0 {
    padding-left: 0;
    padding-right: 0
}

.px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem
}

.px-11 {
    padding-left: 2.75rem;
    padding-right: 2.75rem
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem
}

.px-20 {
    padding-left: 5rem;
    padding-right: 5rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.px-\[--spacing-3xl\] {
    padding-left: var(--spacing-3xl);
    padding-right: var(--spacing-3xl)
}

.px-\[1\.6rem\] {
    padding-left: 1.6rem;
    padding-right: 1.6rem
}

.px-\[10px\] {
    padding-left: 10px;
    padding-right: 10px
}

.px-\[12px\] {
    padding-left: 12px;
    padding-right: 12px
}

.px-\[16px\] {
    padding-left: 16px;
    padding-right: 16px
}

.px-\[196px\] {
    padding-left: 196px;
    padding-right: 196px
}

.px-\[24px\] {
    padding-left: 24px;
    padding-right: 24px
}

.px-\[40px\] {
    padding-left: 40px;
    padding-right: 40px
}

.px-\[48px\] {
    padding-left: 48px;
    padding-right: 48px
}

.px-\[4rem\] {
    padding-left: 4rem;
    padding-right: 4rem
}

.px-\[5px\] {
    padding-left: 5px;
    padding-right: 5px
}

.px-\[8px\] {
    padding-left: 8px;
    padding-right: 8px
}

.px-\[var\(--spacing-3xl\)\] {
    padding-left: var(--spacing-3xl);
    padding-right: var(--spacing-3xl)
}

.px-\[var\(--spacing-4xl\)\] {
    padding-left: var(--spacing-4xl);
    padding-right: var(--spacing-4xl)
}

.px-\[var\(--spacing-md\,8px\)\] {
    padding-left: var(--spacing-md, 8px);
    padding-right: var(--spacing-md, 8px)
}

.px-\[var\(--spacing-xl\)\] {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl)
}

.px-\[var\(--spacing-xl\,16px\)\] {
    padding-left: var(--spacing-xl, 16px);
    padding-right: var(--spacing-xl, 16px)
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem
}

.py-\[0\.8rem\] {
    padding-top: .8rem;
    padding-bottom: .8rem
}

.py-\[12px\] {
    padding-top: 12px;
    padding-bottom: 12px
}

.py-\[16px\] {
    padding-top: 16px;
    padding-bottom: 16px
}

.py-\[2\.4rem\] {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem
}

.py-\[24px\] {
    padding-top: 24px;
    padding-bottom: 24px
}

.py-\[26px\] {
    padding-top: 26px;
    padding-bottom: 26px
}

.py-\[2px\] {
    padding-top: 2px;
    padding-bottom: 2px
}

.py-\[32px\] {
    padding-top: 32px;
    padding-bottom: 32px
}

.py-\[40px\] {
    padding-top: 40px;
    padding-bottom: 40px
}

.py-\[4rem\] {
    padding-top: 4rem;
    padding-bottom: 4rem
}

.py-\[5rem\] {
    padding-top: 5rem;
    padding-bottom: 5rem
}

.py-\[70px\] {
    padding-top: 70px;
    padding-bottom: 70px
}

.py-\[80px\] {
    padding-top: 80px;
    padding-bottom: 80px
}

.py-\[8rem\] {
    padding-top: 8rem;
    padding-bottom: 8rem
}

.py-\[calc\(var\(--spacing-5xl\,40px\)\)\] {
    padding-top: calc(var(--spacing-5xl, 40px));
    padding-bottom: calc(var(--spacing-5xl, 40px))
}

.py-\[calc\(var\(--spacing-5xl\,40px\)\+72px\)\] {
    padding-top: calc(var(--spacing-5xl, 40px) + 72px);
    padding-bottom: calc(var(--spacing-5xl, 40px) + 72px)
}

.py-\[var\(--spacing-3xl\)\] {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl)
}

.py-\[var\(--spacing-3xl\,24px\)\] {
    padding-top: var(--spacing-3xl, 24px);
    padding-bottom: var(--spacing-3xl, 24px)
}

.py-\[var\(--spacing-5xl\)\] {
    padding-top: var(--spacing-5xl);
    padding-bottom: var(--spacing-5xl)
}

.py-\[var\(--spacing-5xl\,40px\)\] {
    padding-top: var(--spacing-5xl, 40px);
    padding-bottom: var(--spacing-5xl, 40px)
}

.py-\[var\(--spacing-6xl\)\] {
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl)
}

.py-\[var\(--spacing-lg\)\] {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg)
}

.py-\[var\(--spacing-xl\)\] {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl)
}

.py-\[var\(--spacing-xl\,16px\)\] {
    padding-top: var(--spacing-xl, 16px);
    padding-bottom: var(--spacing-xl, 16px)
}

.py-\[var\(spacing-8xl\)\] {
    padding-top: var(spacing-8xl);
    padding-bottom: var(spacing-8xl)
}

.\ ! pb-0 {
    padding-bottom: 0 !important
}

.\ ! pb-\[22px\] {
    padding-bottom: 22px !important
}

.pb-0 {
    padding-bottom: 0
}

.pb-1 {
    padding-bottom: .25rem
}

.pb-5 {
    padding-bottom: 1.25rem
}

.pb-\[10px\] {
    padding-bottom: 10px
}

.pb-\[128px\] {
    padding-bottom: 128px
}

.pb-\[160px\] {
    padding-bottom: 160px
}

.pb-\[22rem\] {
    padding-bottom: 22rem
}

.pb-\[2rem\] {
    padding-bottom: 2rem
}

.pb-\[32px\] {
    padding-bottom: 32px
}

.pb-\[350px\] {
    padding-bottom: 350px
}

.pb-\[40px\] {
    padding-bottom: 40px
}

.pb-\[48px\] {
    padding-bottom: 48px
}

.pb-\[80px\] {
    padding-bottom: 80px
}

.pb-\[8px\] {
    padding-bottom: 8px
}

.pb-\[var\(--spacing-11xl\)\] {
    padding-bottom: var(--spacing-11xl)
}

.pb-\[var\(--spacing-3xl\,24px\)\] {
    padding-bottom: var(--spacing-3xl, 24px)
}

.pb-\[var\(--spacing-4xl\)\] {
    padding-bottom: var(--spacing-4xl)
}

.pb-\[var\(--spacing-4xl\,32px\)\] {
    padding-bottom: var(--spacing-4xl, 32px)
}

.pb-\[var\(--spacing-5xl\)\] {
    padding-bottom: var(--spacing-5xl)
}

.pb-\[var\(--spacing-5xl\,40px\)\] {
    padding-bottom: var(--spacing-5xl, 40px)
}

.pb-\[var\(--spacing-lg\)\] {
    padding-bottom: var(--spacing-lg)
}

.pe-0 {
    padding-inline-end: 0
}

.pe-5 {
    padding-inline-end: 1.25rem
}

.pl-10 {
    padding-left: 2.5rem
}

.pl-2 {
    padding-left: .5rem
}

.pl-20 {
    padding-left: 5rem
}

.pl-\[1\.2rem\] {
    padding-left: 1.2rem
}

.pl-\[2\.4rem\] {
    padding-left: 2.4rem
}

.pl-\[24px\] {
    padding-left: 24px
}

.pl-\[25px\] {
    padding-left: 25px
}

.pl-\[30px\] {
    padding-left: 30px
}

.pr-10 {
    padding-right: 2.5rem
}

.pr-2 {
    padding-right: .5rem
}

.pr-\[1\.2rem\] {
    padding-right: 1.2rem
}

.pr-\[2\.4rem\] {
    padding-right: 2.4rem
}

.pr-\[24px\] {
    padding-right: 24px
}

.pr-\[25px\] {
    padding-right: 25px
}

.ps-10 {
    padding-inline-start: 2.5rem
}

.ps-12 {
    padding-inline-start: 3rem
}

.ps-3 {
    padding-inline-start: .75rem
}

.ps-4 {
    padding-inline-start: 1rem
}

.ps-5 {
    padding-inline-start: 1.25rem
}

.ps-8 {
    padding-inline-start: 2rem
}

.ps-9 {
    padding-inline-start: 2.25rem
}

.ps-\[30px\] {
    padding-inline-start: 30px
}

.pt-2 {
    padding-top: .5rem
}

.pt-4 {
    padding-top: 1rem
}

.pt-7 {
    padding-top: 1.75rem
}

.pt-\[0\.4rem\] {
    padding-top: .4rem
}

.pt-\[1\.2rem\] {
    padding-top: 1.2rem
}

.pt-\[112px\] {
    padding-top: 112px
}

.pt-\[128px\] {
    padding-top: 128px
}

.pt-\[12px\] {
    padding-top: 12px
}

.pt-\[130px\] {
    padding-top: 130px
}

.pt-\[16px\] {
    padding-top: 16px
}

.pt-\[2\.4rem\] {
    padding-top: 2.4rem
}

.pt-\[20px\] {
    padding-top: 20px
}

.pt-\[24px\] {
    padding-top: 24px
}

.pt-\[32px\] {
    padding-top: 32px
}

.pt-\[4\.8rem\] {
    padding-top: 4.8rem
}

.pt-\[40px\] {
    padding-top: 40px
}

.pt-\[43px\] {
    padding-top: 43px
}

.pt-\[80px\] {
    padding-top: 80px
}

.pt-\[8rem\] {
    padding-top: 8rem
}

.pt-\[var\(--spacing-5xl\,40px\)\] {
    padding-top: var(--spacing-5xl, 40px)
}

.pt-\[var\(--spacing-lg\)\] {
    padding-top: var(--spacing-lg)
}

.pt-\[var\(--spacing-xl\,16px\)\] {
    padding-top: var(--spacing-xl, 16px)
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-start {
    text-align: start
}

.text-end {
    text-align: end
}

.align-middle {
    vertical-align: middle
}

.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
}

.\ ! text-\[20px\] {
    font-size: 20px !important
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.text-\[10px\] {
    font-size: 10px
}

.text-\[12px\] {
    font-size: 12px
}

.text-\[14px\] {
    font-size: 14px
}

.text-\[15px\] {
    font-size: 15px
}

.text-\[16px\] {
    font-size: 16px
}

.text-\[17px\] {
    font-size: 17px
}

.text-\[18px\] {
    font-size: 18px
}

.text-\[20px\] {
    font-size: 20px
}

.text-\[24px\] {
    font-size: 24px
}

.text-\[30px\] {
    font-size: 30px
}

.text-\[32px\] {
    font-size: 32px
}

.text-\[34px\] {
    font-size: 34px
}

.text-\[36px\] {
    font-size: 36px
}

.text-\[38px\] {
    font-size: 38px
}

.text-\[48px\] {
    font-size: 48px
}

.text-\[60px\] {
    font-size: 60px
}

.text-\[72px\] {
    font-size: 72px
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.font-\[100\] {
    font-weight: 100
}

.font-\[400\] {
    font-weight: 400
}

.font-\[400px\] {
    font-weight: 400px
}

.font-\[500\] {
    font-weight: 500
}

.font-\[600\] {
    font-weight: 600
}

.font-\[700\], .font-bold {
    font-weight: 700
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.lowercase {
    text-transform: lowercase
}

.capitalize {
    text-transform: capitalize
}

.italic {
    font-style: italic
}

.\ ! leading-\[24px\] {
    line-height: 24px !important
}

.leading-6 {
    line-height: 1.5rem
}

.leading-\[10px\] {
    line-height: 10px
}

.leading-\[18px\] {
    line-height: 18px
}

.leading-\[20px\] {
    line-height: 20px !important
}

.leading-\[21px\] {
    line-height: 21px
}

.leading-\[24px\] {
    line-height: 24px
}

.leading-\[284x\] {
    line-height: 284x
}

.leading-\[28px\] {
    line-height: 28px
}

.leading-\[30px\] {
    line-height: 30px
}

.leading-\[32px\] {
    line-height: 32px
}

.leading-\[38px\] {
    line-height: 38px
}

.leading-\[44px\] {
    line-height: 44px
}

.leading-\[60px\] {
    line-height: 60px
}

.leading-\[72px\] {
    line-height: 72px
}

.leading-\[90px\] {
    line-height: 90px
}

.-tracking-\[4px\] {
    letter-spacing: -4px
}

.tracking-wider {
    letter-spacing: .05em
}

.\ ! text-\[\#1F2A37\] {
    --tw-text-opacity: 1 !important;
    color: rgb(31 42 55 / var(--tw-text-opacity)) !important
}

.\ ! text-\[var\(--colors-brand-600\,\#1B8354\)\] {
    color: var(--colors-brand-600, #1b8354) !important
}

.\ ! text-\[var\(--text-display\,\#1F2A37\)\] {
    color: var(--text-display, #1f2a37) !important
}

.\ ! text-\[var\(--text-primary-paragraph\,\#384250\)\] {
    color: var(--text-primary-paragraph, #384250) !important
}

.text-\[\#0D121C\] {
    --tw-text-opacity: 1;
    color: rgb(13 18 28 / var(--tw-text-opacity))
}

.text-\[\#111927\] {
    --tw-text-opacity: 1;
    color: rgb(17 25 39 / var(--tw-text-opacity))
}

.text-\[\#14573A\] {
    --tw-text-opacity: 1;
    color: rgb(20 87 58 / var(--tw-text-opacity))
}

.text-\[\#161616F\] {
    color: #161616F
}

.text-\[\#161616\] {
    --tw-text-opacity: 1;
    color: rgb(22 22 22 / var(--tw-text-opacity))
}

.text-\[\#1B8354\] {
    --tw-text-opacity: 1;
    color: rgb(27 131 84 / var(--tw-text-opacity))
}

.text-\[\#1F2A37\] {
    --tw-text-opacity: 1;
    color: rgb(31 42 55 / var(--tw-text-opacity))
}

.text-\[\#384250\] {
    --tw-text-opacity: 1;
    color: rgb(56 66 80 / var(--tw-text-opacity))
}

.text-\[\#4D5761\] {
    --tw-text-opacity: 1;
    color: rgb(77 87 97 / var(--tw-text-opacity))
}

.text-\[\#6C737F\] {
    --tw-text-opacity: 1;
    color: rgb(108 115 127 / var(--tw-text-opacity))
}

.text-\[\#88D8AD\] {
    --tw-text-opacity: 1;
    color: rgb(136 216 173 / var(--tw-text-opacity))
}

.text-\[\#B42318\] {
    --tw-text-opacity: 1;
    color: rgb(180 35 24 / var(--tw-text-opacity))
}

.text-\[\#B54708\] {
    --tw-text-opacity: 1;
    color: rgb(181 71 8 / var(--tw-text-opacity))
}

.text-\[\#FAE996\] {
    --tw-text-opacity: 1;
    color: rgb(250 233 150 / var(--tw-text-opacity))
}

.text-\[\#FFF\] {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.text-\[color\:var\(--colors-text-primary\)\] {
    color: var(--colors-text-primary)
}

.text-\[color\:var\(--colors-text-quarterary\)\] {
    color: var(--colors-text-quarterary)
}

.text-\[var\(--Text-text-primary\,\#0D121C\)\;\], .text-\[var\(--Text-text-primary\,\#0D121C\)\] {
    color: var(--Text-text-primary, #0d121c)
}

.text-\[var\(--Text-text-primary\,\#384250\)\] {
    color: var(--Text-text-primary, #384250)
}

.text-\[var\(--Text-text-primary-paragraph\,\#384250\)\] {
    color: var(--Text-text-primary-paragraph, #384250)
}

.text-\[var\(--Text-text-secondary\,\#384250\)\] {
    color: var(--Text-text-secondary, #384250)
}

.text-\[var\(--colors-brand-600\)\] {
    color: var(--colors-brand-600)
}

.text-\[var\(--colors-brand-600\,\#1B8354\)\] {
    color: var(--colors-brand-600, #1b8354)
}

.text-\[var\(--colors-brand-700\,\#166A45\)\] {
    color: var(--colors-brand-700, #166a45)
}

.text-\[var\(--colors-error-700\,\#B42318\)\] {
    color: var(--colors-error-700, #b42318)
}

.text-\[var\(--colors-gray-1000\)\] {
    color: var(--colors-gray-1000)
}

.text-\[var\(--colors-gray-1000\,\#161616\)\] {
    color: var(--colors-gray-1000, #161616)
}

.text-\[var\(--colors-gray-900\,\#101828\)\] {
    color: var(--colors-gray-900, #101828)
}

.text-\[var\(--colors-gray-modern-950\,\#0D121C\)\] {
    color: var(--colors-gray-modern-950, #0d121c)
}

.text-\[var\(--colors-gray-neutral-500\)\] {
    color: var(--colors-gray-neutral-500)
}

.text-\[var\(--colors-gray-neutral-600\,\#4D5761\)\] {
    color: var(--colors-gray-neutral-600, #4d5761)
}

.text-\[var\(--colors-gray-neutral-600\,\#F9FAFB\)\] {
    color: var(--colors-gray-neutral-600, #f9fafb)
}

.text-\[var\(--colors-gray-neutral-700\)\] {
    color: var(--colors-gray-neutral-700)
}

.text-\[var\(--colors-gray-neutral-700\,\#384250\)\] {
    color: var(--colors-gray-neutral-700, #384250)
}

.text-\[var\(--colors-gray-neutral-800\)\] {
    color: var(--colors-gray-neutral-800)
}

.text-\[var\(--colors-gray-neutral-800\,\#1F2A37\)\] {
    color: var(--colors-gray-neutral-800, #1f2a37)
}

.text-\[var\(--colors-gray-neutral-800\,\#384250\)\] {
    color: var(--colors-gray-neutral-800, #384250)
}

.text-\[var\(--colors-gray-neutral-900\,\#111927\)\] {
    color: var(--colors-gray-neutral-900, #111927)
}

.text-\[var\(--colors-gray-neutral-950\,\#0D121C\)\] {
    color: var(--colors-gray-neutral-950, #0d121c)
}

.text-\[var\(--colors-text-placeholder\,\#6C737F\)\] {
    color: var(--colors-text-placeholder, #6c737f)
}

.text-\[var\(--colors-text-primary\,\#0D121C\)\] {
    color: var(--colors-text-primary, #0d121c)
}

.text-\[var\(--colors-text-secondary\,\#384250\)\] {
    color: var(--colors-text-secondary, #384250)
}

.text-\[var\(--field-border-error\,\#B42318\)\] {
    color: var(--field-border-error, #b42318) !important
}

.text-\[var\(--field-text-label\,\#161616\)\] {
    color: var(--field-text-label, #161616)
}

.text-\[var\(--link-primary\,\#1B8354\)\] {
    color: var(--link-primary, #1b8354)
}

.text-\[var\(--tag-text-info\,\#1849A9\)\] {
    color: var(--tag-text-info, #1849a9)
}

.text-\[var\(--tag-text-neutral\,\#1F2A37\)\] {
    color: var(--tag-text-neutral, #1f2a37)
}

.text-\[var\(--tag-text-success\,\#085D3A\)\] {
    color: var(--tag-text-success, #085d3a)
}

.text-\[var\(--tag-text-warning\,\#93370D\)\] {
    color: var(--tag-text-warning, #93370d)
}

.text-\[var\(--text-default\,\#161616\)\] {
    color: #384250
}

.text-\[var\(--text-display\,\#1F2A37\)\] {
    color: var(--text-display, #1f2a37)
}

.text-\[var\(--text-oncolor-primary\,\#FFF\)\] {
    color: var(--text-oncolor-primary, #fff)
}

.text-\[var\(--text-primary\,\#1B8354\)\] {
    color: var(--text-primary, #1b8354)
}

.text-\[var\(--text-primary-paragraph\,\#384250\)\] {
    color: var(--text-primary-paragraph, #384250)
}

.text-\[var\(--text-primary-sa-flag\,\#14573A\)\] {
    color: var(--text-primary-sa-flag, #14573a)
}

.text-\[var\(--text-text-tertiary\,\#64748B\)\] {
    color: var(--text-text-tertiary, #64748b)
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity))
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity))
}

.text-inherit {
    color: inherit
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.underline {
    text-decoration-line: underline
}

.opacity-0 {
    opacity: 0
}

.opacity-100 {
    opacity: 1
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-custom {
    --tw-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --tw-shadow-colored: 0px 4px 8px -2px var(--tw-shadow-color), 0px 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.outline-none {
    outline: 2px solid #fff0;
    outline-offset: 2px
}

.outline {
    outline-style: solid
}

.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: 0.15s
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: 0.15s
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: 0.15s
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: 0.15s
}

.delay-500 {
    transition-delay: 0.5s
}

.duration-300 {
    transition-duration: 0.3s
}

.duration-500 {
    transition-duration: 0.5s
}

.ease-in-out {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

nav > ul.breadcrumb {
    justify-content: flex-start
}

.breadcrumb-item > .link--disabled {
    color: var(--text-default-disabled, #9da4ae) !important
}

.marker\:text-\[13px\] *::marker {
    font-size: 13px
}

.marker\:text-\[24px\] *::marker {
    font-size: 24px
}

.marker\:text-\[\#161616\] *::marker {
    color: #161616
}

.marker\:text-\[\#1B8354\] *::marker {
    color: #1b8354
}

.marker\:text-\[\#6C737F\] *::marker {
    color: #6c737f
}

.marker\:text-\[13px\]::marker {
    font-size: 13px
}

.marker\:text-\[24px\]::marker {
    font-size: 24px
}

.marker\:text-\[\#161616\]::marker {
    color: #161616
}

.marker\:text-\[\#1B8354\]::marker {
    color: #1b8354
}

.marker\:text-\[\#6C737F\]::marker {
    color: #6c737f
}

.before\:scale-x-\[-1\]:before {
    content: var(--tw-content);
    --tw-scale-x: -1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.before\:bg-\[length\:auto_50\%\]:before {
    content: var(--tw-content);
    background-size: auto 50%
}

.before\:bg-\[100\%_100\%\]:before {
    content: var(--tw-content);
    background-position: 100% 100%
}

.before\:bg-no-repeat:before {
    content: var(--tw-content);
    background-repeat: no-repeat
}

.after\:content-\[none\]:after {
    --tw-content: none;
    content: var(--tw-content)
}

.last-of-type\:mx-auto:last-of-type {
    margin-left: auto;
    margin-right: auto
}

.visited\:text-\[\#14573A\]:visited {
    color: #14573a
}

.visited\:text-\[\#ffffffe6\]:visited {
    color: #ffffffe6
}

.visited\:underline:visited {
    text-decoration-line: underline
}

.hover\:scale-110:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:border-\[\#B8EACB\]:hover {
    --tw-border-opacity: 1;
    border-color: rgb(184 234 203 / var(--tw-border-opacity))
}

.hover\:border-gray-300:hover {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity))
}

.hover\:bg-\[\#F3FCF6\]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 252 246 / var(--tw-bg-opacity))
}

.hover\:bg-\[var\(--colors-gray-neutral-100\)\]:hover {
    background-color: var(--colors-gray-neutral-100)
}

.hover\:bg-black:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}

.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.hover\:font-\[700\]:hover {
    font-weight: 700
}

.hover\:text-\[\#54C08A\]:hover {
    --tw-text-opacity: 1;
    color: rgb(84 192 138 / var(--tw-text-opacity))
}

.hover\:text-\[\#ffffffcc\]:hover {
    color: #fffc
}

.hover\:text-\[var\(--colors-text-primary\,\#0D121C\)\]:hover {
    color: var(--colors-text-primary, #0d121c)
}

.hover\:text-\[var\(--text-default\,\#161616\)\]:hover {
    color: var(--text-default, #161616)
}

.hover\:text-black:hover {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity))
}

.hover\:text-gray-200:hover {
    --tw-text-opacity: 1;
    color: rgb(229 231 235 / var(--tw-text-opacity))
}

.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.hover\:underline:hover {
    text-decoration-line: underline
}

.hover\:outline:hover {
    outline-style: solid
}

.hover\:outline-2:hover {
    outline-width: 2px
}

.hover\:outline-\[rgb\(16\,16\,16\)\]:hover {
    outline-color: #101010
}

.focus\:rounded-\[0px\]:focus {
    border-radius: 0
}

.focus\:border-\[2px\]:focus {
    border-width: 2px
}

.focus\:border-\[\#161616\]:focus {
    --tw-border-opacity: 1;
    border-color: rgb(22 22 22 / var(--tw-border-opacity))
}

.focus\:bg-\[\#f3f4f6\]:focus {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
}

.focus\:text-\[\#1B8354\]:focus {
    --tw-text-opacity: 1;
    color: rgb(27 131 84 / var(--tw-text-opacity))
}

.focus\:text-white:focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

.focus\:underline:focus {
    text-decoration-line: underline
}

.focus\:outline-none:focus {
    outline: 2px solid #fff0;
    outline-offset: 2px
}

.focus\:outline-\[2px\]:focus {
    outline-width: 2px
}

.focus\:outline-white:focus {
    outline-color: #fff
}

.active\:border-0:active {
    border-width: 0
}

.active\:text-\[\#88D8AD\]:active {
    --tw-text-opacity: 1;
    color: rgb(136 216 173 / var(--tw-text-opacity))
}

.active\:text-\[\#ffffff99\]:active {
    color: #fff9
}

.active\:underline:active {
    text-decoration-line: underline
}

.group:hover .group-hover\:block {
    display: block
}

.group:hover .group-hover\:text-\[\#1B8354\] {
    --tw-text-opacity: 1;
    color: rgb(27 131 84 / var(--tw-text-opacity))
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1
}

.group:hover .group-hover\:blur-\[4px\] {
    --tw-blur: blur(4px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

@media not all and(min-width: 1536px) {
    .max-2xl\:items-baseline {
        align-items: baseline
    }
}

@media not all and(min-width: 1280px) {
    .max-xl\:flex {
        display: flex
    }

    .max-xl\:justify-center {
        justify-content: center
    }

    .max-xl\:text-\[9px\] {
        font-size: 9px
    }
}

@media not all and(min-width: 1024px) {
    .max-lg\:mx-\[1\.6rem\] {
        margin-left: 1.6rem;
        margin-right: 1.6rem
    }

    .max-lg\:mx-\[16px\] {
        margin-left: 16px;
        margin-right: 16px
    }

    .max-lg\:mx-\[24px\] {
        margin-left: 24px;
        margin-right: 24px
    }

    .max-lg\:mx-\[40px\] {
        margin-left: 40px;
        margin-right: 40px
    }

    .max-lg\:my-10 {
        margin-top: 2.5rem;
        margin-bottom: 2.5rem
    }

    .max-lg\:ml-\[0\] {
        margin-left: 0
    }

    .max-lg\:ml-\[16px\] {
        margin-left: 16px
    }

    .max-lg\:mr-\[16px\] {
        margin-right: 16px
    }

    .max-lg\:mt-\[16px\] {
        margin-top: 16px
    }

    .max-lg\:hidden {
        display: none
    }

    .max-lg\:w-full {
        width: 100%
    }

    .max-lg\:max-w-\[300px\] {
        max-width: 300px
    }

    .max-lg\:max-w-\[592px\] {
        max-width: 592px
    }

    .max-lg\:grid-cols-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .max-lg\:flex-col {
        flex-direction: column
    }

    .max-lg\:flex-wrap {
        flex-wrap: wrap
    }

    .max-lg\:justify-start {
        justify-content: flex-start
    }

    .max-lg\:space-y-3 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
    }

    .max-lg\:px-\[24px\] {
        padding-left: 24px;
        padding-right: 24px
    }

    .max-lg\:py-\[28px\] {
        padding-top: 28px;
        padding-bottom: 28px
    }

    .max-lg\:pb-\[24px\] {
        padding-bottom: 24px
    }

    .max-lg\:pb-\[80px\] {
        padding-bottom: 80px
    }

    .max-lg\:pt-\[28px\] {
        padding-top: 28px
    }
}

@media not all and(min-width: 768px) {
    .max-md\:left-\[10px\] {
        left: 10px
    }

    .max-md\:right-\[10px\] {
        right: 10px
    }

    .max-md\:top-\[-20px\] {
        top: -20px
    }

    .max-md\:mx-\[1\.6rem\] {
        margin-left: 1.6rem;
        margin-right: 1.6rem
    }

    .max-md\:mx-\[4\.5rem\] {
        margin-left: 4.5rem;
        margin-right: 4.5rem
    }

    .max-md\:mx-\[var\(--spacing-xl\)\] {
        margin-left: var(--spacing-xl);
        margin-right: var(--spacing-xl)
    }

    .max-md\:w-full {
        width: 100%
    }

    .max-md\:max-w-\[300px\] {
        max-width: 300px
    }

    .max-md\:max-w-\[450px\] {
        max-width: 450px
    }

    .max-md\:grid-cols-1 {
        grid-template-columns:repeat(1, minmax(0, 1fr))
    }

    .max-md\:flex-col {
        flex-direction: column
    }

    .max-md\:flex-wrap {
        flex-wrap: wrap
    }

    .max-md\:gap-4 {
        gap: 1rem
    }

    .max-md\:gap-5 {
        gap: 1.25rem
    }

    .max-md\:gap-8 {
        gap: 2rem
    }

    .max-md\:gap-y-4 {
        row-gap: 1rem
    }

    .max-md\:p-\[var\(--spacing-2xl\)\] {
        padding: var(--spacing-2xl)
    }

    .max-md\:px-0 {
        padding-left: 0;
        padding-right: 0
    }

    .max-md\:px-\[var\(--spacing-2xl\)\] {
        padding-left: var(--spacing-2xl);
        padding-right: var(--spacing-2xl)
    }

    .max-md\:py-\[10rem\] {
        padding-top: 10rem;
        padding-bottom: 10rem
    }
}

@media not all and(min-width: 640px) {
    .max-sm\:top-\[0px\] {
        top: 0
    }

    .max-sm\:mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .max-sm\:mr-4 {
        margin-right: 1rem
    }

    .max-sm\:mt-\[11rem\] {
        margin-top: 11rem
    }

    .max-sm\:hidden {
        display: none
    }

    .max-sm\:min-w-full {
        min-width: 100%
    }

    .max-sm\:max-w-\[100\%\] {
        max-width: 100%
    }

    .max-sm\:grid-cols-1 {
        grid-template-columns:repeat(1, minmax(0, 1fr))
    }

    .max-sm\:flex-col {
        flex-direction: column
    }

    .max-sm\:justify-center {
        justify-content: center
    }

    .max-sm\:gap-\[16px\] {
        gap: 16px
    }

    .max-sm\:text-center {
        text-align: center
    }
}

@media (min-width: 640px) {
    .sm\:top-\[0px\] {
        top: 0
    }

    .sm\:top-\[60px\] {
        top: 60px
    }

    .sm\:col-span-2 {
        grid-column: span 2 / span 2
    }

    .sm\:col-span-6 {
        grid-column: span 6 / span 6
    }

    .sm\:-mx-6 {
        margin-left: -1.5rem;
        margin-right: -1.5rem
    }

    .sm\:flex {
        display: flex
    }

    .sm\:hidden {
        display: none
    }

    .sm\:min-h-\[50px\] {
        min-height: 50px
    }

    .sm\:w-full {
        width: 100%
    }

    .sm\:scale-\[120\%\] {
        --tw-scale-x: 120%;
        --tw-scale-y: 120%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .sm\:grid-cols-1 {
        grid-template-columns:repeat(1, minmax(0, 1fr))
    }

    .sm\:grid-cols-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .sm\:flex-row {
        flex-direction: row
    }

    .sm\:justify-start {
        justify-content: flex-start
    }

    .sm\:justify-between {
        justify-content: space-between
    }

    .sm\:gap-9 {
        gap: 2.25rem
    }

    .sm\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .sm\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem
    }
}

@media (min-width: 768px) {
    .md\:col-span-3 {
        grid-column: span 3 / span 3
    }

    .md\:col-span-4 {
        grid-column: span 4 / span 4
    }

    .md\:col-span-6 {
        grid-column: span 6 / span 6
    }

    .md\:col-span-8 {
        grid-column: span 8 / span 8
    }

    .md\:m-auto {
        margin: auto
    }

    .md\:mx-\[80px\] {
        margin-left: 80px;
        margin-right: 80px
    }

    .md\:mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .md\:mt-\[292px\] {
        margin-top: 292px
    }

    .md\:block {
        display: block
    }

    .md\:grid {
        display: grid
    }

    .md\:h-\[75\%\] {
        height: 75%
    }

    .md\:h-auto {
        height: auto
    }

    .md\:h-full {
        height: 100%
    }

    .md\:w-\[100\%\] {
        width: 100%
    }

    .md\:w-\[200px\] {
        width: 200px
    }

    .md\:w-\[35\%\] {
        width: 35%
    }

    .md\:w-\[40\%\] {
        width: 40%
    }

    .md\:w-\[60\%\] {
        width: 60%
    }

    .md\:w-\[65\%\] {
        width: 65%
    }

    .md\:w-\[70\%\] {
        width: 70%
    }

    .md\:w-\[80\%\] {
        width: 80%
    }

    .md\:w-\[calc\(100\%\/2-16px\+\(16px\/2\)\)\] {
        width: calc(50% - 8px)
    }

    .md\:w-full {
        width: 100%
    }

    .md\:max-w-\[34\%\] {
        max-width: 34%
    }

    .md\:max-w-\[66\%\] {
        max-width: 66%
    }

    .md\:max-w-\[730px\] {
        max-width: 730px
    }

    .md\:max-w-\[840px\] {
        max-width: 840px
    }

    .md\:max-w-full {
        max-width: 100%
    }

    .md\:max-w-none {
        max-width: none
    }

    .md\:-translate-x-\[calc\(100\%\/4-16px\+\(16px\/4\)\)\] {
        --tw-translate-x: calc((25% - 12px) * -1);
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .md\:scale-\[140\%\] {
        --tw-scale-x: 140%;
        --tw-scale-y: 140%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .md\:grid-cols-1 {
        grid-template-columns:repeat(1, minmax(0, 1fr))
    }

    .md\:grid-cols-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-3 {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .md\:grid-cols-4 {
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }

    .md\:flex-row {
        flex-direction: row
    }

    .md\:flex-col {
        flex-direction: column
    }

    .md\:items-center {
        align-items: center
    }

    .md\:justify-center {
        justify-content: center
    }

    .md\:justify-between {
        justify-content: space-between
    }

    .md\:gap-0 {
        gap: 0
    }

    .md\:gap-6 {
        gap: 1.5rem
    }

    .md\:p-\[16\.4rem\] {
        padding: 16.4rem
    }

    .md\:p-\[var\(--spacing-6xl\)\] {
        padding: var(--spacing-6xl)
    }

    .md\:px-2 {
        padding-left: .5rem;
        padding-right: .5rem
    }

    .md\:px-20 {
        padding-left: 5rem;
        padding-right: 5rem
    }

    .md\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .md\:px-\[80px\] {
        padding-left: 80px;
        padding-right: 80px
    }

    .md\:text-center {
        text-align: center
    }

    .md\:text-\[12px\] {
        font-size: 12px
    }

    .md\:text-\[24px\] {
        font-size: 24px
    }
}

@media (min-width: 1024px) {
    .lg\:relative {
        position: relative
    }

    .lg\:-right-\[50px\] {
        right: -50px
    }

    .lg\:-top-10 {
        top: -2.5rem
    }

    .lg\:top-12 {
        top: 3rem
    }

    .lg\:col-span-1 {
        grid-column: span 1 / span 1
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2
    }

    .lg\:col-span-4 {
        grid-column: span 4 / span 4
    }

    .lg\:col-span-8 {
        grid-column: span 8 / span 8
    }

    .lg\:-mx-8 {
        margin-left: -2rem;
        margin-right: -2rem
    }

    .lg\:mx-0 {
        margin-left: 0;
        margin-right: 0
    }

    .lg\:mx-1 {
        margin-left: .25rem;
        margin-right: .25rem
    }

    .lg\:my-4 {
        margin-top: 1rem;
        margin-bottom: 1rem
    }

    .lg\:my-\[var\(--spacing-3xl\)\] {
        margin-top: var(--spacing-3xl);
        margin-bottom: var(--spacing-3xl)
    }

    .lg\:\ ! -mb-\[256px\] {
        margin-bottom: -256px !important
    }

    .lg\:-mb-\[256px\] {
        margin-bottom: -256px
    }

    .lg\:mb-0 {
        margin-bottom: 0
    }

    .lg\:mb-\[var\(--spacing-4xl\)\] {
        margin-bottom: var(--spacing-4xl)
    }

    .lg\:mt-0 {
        margin-top: 0
    }

    .lg\:mt-\[-60px\] {
        margin-top: -60px
    }

    .lg\:mt-\[var\(--spacing-3xl\)\] {
        margin-top: var(--spacing-3xl)
    }

    .lg\:block {
        display: block
    }

    .lg\:flex {
        display: flex
    }

    .lg\:hidden {
        display: none
    }

    .lg\:h-\[720px\] {
        height: 720px
    }

    .lg\:min-h-\[216px\] {
        min-height: 216px
    }

    .lg\:min-h-\[327px\] {
        min-height: 327px
    }

    .lg\:min-h-\[527px\] {
        min-height: 527px
    }

    .lg\:min-h-\[560px\] {
        min-height: 560px
    }

    .lg\:min-h-\[654px\] {
        min-height: 654px
    }

    .lg\:w-\[200px\] {
        width: 200px
    }

    .lg\:w-\[294px\] {
        width: 294px
    }

    .lg\:w-\[35\%\] {
        width: 35%
    }

    .lg\:w-\[40\%\] {
        width: 40%
    }

    .lg\:w-\[50\%\] {
        width: 50%
    }

    .lg\:w-\[60\%\] {
        width: 60%
    }

    .lg\:w-\[720px\] {
        width: 720px
    }

    .lg\:w-\[\] {
        width:
    }

    .lg\:w-\[calc\(100\%\/3-24px\+\(24px\/3\)\)\] {
        width: calc(100% / 3 - 24px + (24px / 3))
    }

    .lg\:w-auto {
        width: auto
    }

    .lg\:min-w-\[200px\] {
        min-width: 200px
    }

    .lg\:min-w-\[730px\] {
        min-width: 730px
    }

    .lg\:max-w-\[1220px\] {
        max-width: 1220px
    }

    .lg\:max-w-\[1250px\] {
        max-width: 1250px
    }

    .lg\:max-w-\[30\%\] {
        max-width: 30%
    }

    .lg\:max-w-\[45\%\] {
        max-width: 45%
    }

    .lg\:max-w-\[480px\] {
        max-width: 480px
    }

    .lg\:max-w-\[486px\] {
        max-width: 486px
    }

    .lg\:max-w-\[524px\] {
        max-width: 524px
    }

    .lg\:max-w-\[550px\] {
        max-width: 550px
    }

    .lg\:max-w-\[588px\] {
        max-width: 588px
    }

    .lg\:max-w-\[589px\] {
        max-width: 589px
    }

    .lg\:max-w-\[620px\] {
        max-width: 620px
    }

    .lg\:max-w-\[700px\] {
        max-width: 700px
    }

    .lg\:max-w-\[720px\] {
        max-width: 720px
    }

    .lg\:max-w-\[754px\] {
        max-width: 754px
    }

    .lg\:-translate-x-full {
        --tw-translate-x: -100%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .lg\:scale-\[160\%\] {
        --tw-scale-x: 160%;
        --tw-scale-y: 160%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .lg\:scale-\[170\%\] {
        --tw-scale-x: 170%;
        --tw-scale-y: 170%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .lg\:grid-flow-col {
        grid-auto-flow: column
    }

    .lg\:grid-cols-1 {
        grid-template-columns:repeat(1, minmax(0, 1fr))
    }

    .lg\:grid-cols-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .lg\:grid-cols-\[276px_minmax\(auto\,_100\%\)\] {
        grid-template-columns:276px minmax(auto, 100%)
    }

    .lg\:grid-cols-\[276px_minmax\(auto\,_100\%\)_288px\] {
        grid-template-columns:276px minmax(auto, 100%) 288px
    }

    .lg\:flex-row {
        flex-direction: row
    }

    .lg\:items-center {
        align-items: center
    }

    .lg\:justify-start {
        justify-content: flex-start
    }

    .lg\:justify-end {
        justify-content: flex-end
    }

    .lg\:justify-between {
        justify-content: space-between
    }

    .lg\:\ ! gap-10 {
        gap: 2.5rem !important
    }

    .lg\:gap-\[var\(--spacing-5xl\)\] {
        gap: var(--spacing-5xl)
    }

    .lg\:p-2 {
        padding: .5rem
    }

    .lg\:p-\[32px\] {
        padding: 32px
    }

    .lg\:p-\[48px\] {
        padding: 48px
    }

    .lg\:p-\[80px\] {
        padding: 80px
    }

    .lg\:p-\[var\(--spacing-6xl\)\] {
        padding: var(--spacing-6xl)
    }

    .lg\:p-\[var\(--spacing-8xl\)\] {
        padding: var(--spacing-8xl)
    }

    .lg\:px-20 {
        padding-left: 5rem;
        padding-right: 5rem
    }

    .lg\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .lg\:px-\[24px\] {
        padding-left: 24px;
        padding-right: 24px
    }

    .lg\:px-\[32px\] {
        padding-left: 32px;
        padding-right: 32px
    }

    .lg\:px-\[var\(--spacing-5xl\,40px\)\] {
        padding-left: var(--spacing-5xl, 40px);
        padding-right: var(--spacing-5xl, 40px)
    }

    .lg\:px-\[var\(--spacing-6xl\)\] {
        padding-left: var(--spacing-6xl);
        padding-right: var(--spacing-6xl)
    }

    .lg\:px-\[var\(--spacing-8xl\)\] {
        padding-left: var(--spacing-8xl);
        padding-right: var(--spacing-8xl)
    }

    .lg\:px-\[var\(--spacing-8xl\,80px\)\] {
        padding-left: var(--spacing-8xl, 80px);
        padding-right: var(--spacing-8xl, 80px)
    }

    .lg\:py-\[calc\(var\(--spacing-8xl\,80px\)\)\] {
        padding-top: calc(var(--spacing-8xl, 80px));
        padding-bottom: calc(var(--spacing-8xl, 80px))
    }

    .lg\:py-\[calc\(var\(--spacing-8xl\,80px\)\+72px\)\] {
        padding-top: calc(var(--spacing-8xl, 80px) + 72px);
        padding-bottom: calc(var(--spacing-8xl, 80px) + 72px)
    }

    .lg\:py-\[var\(--spacing-8xl\,80px\)\] {
        padding-top: var(--spacing-8xl, 80px);
        padding-bottom: var(--spacing-8xl, 80px)
    }

    .lg\:pe-5 {
        padding-inline-end: 1.25rem
    }

    .lg\:ps-8 {
        padding-inline-start: 2rem
    }

    .lg\:pt-0 {
        padding-top: 0
    }

    .lg\:pt-\[160px\] {
        padding-top: 160px
    }

    .lg\:pt-\[60px\] {
        padding-top: 60px
    }

    .lg\:text-right {
        text-align: right
    }
}

@media (min-width: 1280px) {
    .xl\:-right-20 {
        right: -5rem
    }

    .xl\:-right-32 {
        right: -8rem
    }

    .xl\:-top-28 {
        top: -7rem
    }

    .xl\:-top-\[250px\] {
        top: -250px
    }

    .xl\:top-0 {
        top: 0
    }

    .xl\:col-span-2 {
        grid-column: span 2 / span 2
    }

    .xl\:col-span-3 {
        grid-column: span 3 / span 3
    }

    .xl\:col-span-4 {
        grid-column: span 4 / span 4
    }

    .xl\:col-span-5 {
        grid-column: span 5 / span 5
    }

    .xl\:col-span-6 {
        grid-column: span 6 / span 6
    }

    .xl\:col-span-7 {
        grid-column: span 7 / span 7
    }

    .xl\:max-h-\[26px\] {
        max-height: 26px
    }

    .xl\:w-\[calc\(100\%\/3-16px\+\(16px\/3\)\)\] {
        width: calc(100% / 3 - 16px + (16px / 3))
    }

    .xl\:w-\[calc\(100\%\/4-16px\+\(16px\/4\)\)\] {
        width: calc(25% - 12px)
    }

    .xl\:max-w-\[80\%\] {
        max-width: 80%
    }

    .xl\:-translate-x-\[calc\(100\%\/4-16px\+\(16px\/4\)\)\/2\] {
        --tw-translate-x: calc((25% - 12px) / -2);
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .xl\:scale-\[120\%\] {
        --tw-scale-x: 120%;
        --tw-scale-y: 120%;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .xl\:grid-cols-2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .xl\:flex-row {
        flex-direction: row
    }

    .xl\:p-\[32px\] {
        padding: 32px
    }
}

@media (min-width: 1536px) {
    .\32xl\:top-20 {
        top: 5rem
    }

    .\32xl\:col-span-3 {
        grid-column: span 3 / span 3
    }

    .\32xl\:min-w-\[100px\] {
        min-width: 100px
    }

    .\32xl\:scale-100 {
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .\32xl\:grid-cols-3 {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .\32xl\:grid-cols-\[1\.5fr_1fr\] {
        grid-template-columns:1.5fr 1fr
    }

    .\32xl\:flex-row {
        flex-direction: row
    }

    .\32xl\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

@media (min-width: 1600px) {
    .\33xl\:mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .\33xl\:max-w-\[1280px\] {
        max-width: 1280px
    }
}

@media (min-width: 1800px) {
    .\34xl\:mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .\34xl\:max-w-\[1280px\] {
        max-width: 1280px
    }
}

.ltr\:inset-y-0:where([dir="ltr"],[dir="ltr"] *) {
    top: 0;
    bottom: 0
}

.ltr\:right-0:where([dir="ltr"],[dir="ltr"] *) {
    right: 0
}

.ltr\:pl-4:where([dir="ltr"],[dir="ltr"] *) {
    padding-left: 1rem
}

.ltr\:pr-4:where([dir="ltr"],[dir="ltr"] *) {
    padding-right: 1rem
}

@media (min-width: 1280px) {
    .ltr\:xl\:min-w-\[400px\]:where([dir="ltr"],[dir="ltr"] *) {
        min-width: 400px
    }
}

.rtl\:inset-y-0:where([dir="rtl"],[dir="rtl"] *) {
    top: 0;
    bottom: 0
}

.rtl\:left-0:where([dir="rtl"],[dir="rtl"] *) {
    left: 0
}

.rtl\:pl-4:where([dir="rtl"],[dir="rtl"] *) {
    padding-left: 1rem
}

.rtl\:pr-4:where([dir="rtl"],[dir="rtl"] *) {
    padding-right: 1rem
}

@media (min-width: 1280px) {
    .rtl\:xl\:min-w-\[300px\]:where([dir="rtl"],[dir="rtl"] *) {
        min-width: 300px
    }
}

@font-face {
    font-family: hgi-stroke-rounded;
    src: url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-stroke-rounded.eot);
    src: url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-stroke-rounded.eot#iefix) format("embedded-opentype"), url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-stroke-rounded.woff2) format("woff2"), url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-stroke-rounded.woff) format("woff"), url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-stroke-rounded.ttf) format("truetype"), url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-stroke-rounded.svg#hgi-stroke-rounded) format("svg")
}

.hgi-stroke {
    font-family: hgi-stroke-rounded !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    display: inline-block;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto
}

.hgi-bulk.hgi-translation:before {
    content: "埵"
}

.hgi-bulk.hgi-translation:after {
    content: "埴"
}

.hgi-bulk.hgi-search-01:before {
    content: "剣"
}

.hgi-bulk:before {
    position: absolute;
    left: 0
}

.hgi-bulk.hgi-search-01:after {
    content: "剢"
}

.hgi-bulk:after {
    opacity: .4
}

.hgi-stroke.hgi-cards-02:before {
    content: "㿳"
}

.hgi-stroke.hgi-question:before {
    content: "傧"
}

.hgi-stroke.hgi-teacher:before {
    content: "嚙"
}

.hgi-stroke.hgi-location-04:before {
    content: "䩽"
}

.hgi-stroke.hgi-agreement-03:before {
    content: "㪱"
}

.hgi-stroke.hgi-student-card:before {
    content: "啝"
}

.hgi-stroke.hgi-mail-account-02:before {
    content: "䬛"
}

.hgi-stroke.hgi-agreement-01:before {
    content: "㪭"
}

.hgi-stroke.hgi-save-money-dollar:before {
    content: "別"
}

.hgi-stroke.hgi-service:before {
    content: "助"
}

.hgi-stroke.hgi-discount-tag-01:before {
    content: "䎾"
}

.hgi-stroke.hgi-message-multiple-01:before {
    content: "䰳"
}

.hgi-stroke.hgi-computer-settings:before {
    content: "䇦"
}

.hgi-stroke.hgi-zakat:before {
    content: "媛"
}

.hgi-stroke.hgi-activity-02:before {
    content: "㪃"
}

.hgi-stroke.hgi-folder-search:before {
    content: "䘱"
}

.hgi-stroke.hgi-job-search:before {
    content: "䣻"
}

.hgi-stroke.hgi-justice-scale-02:before {
    content: "䤣"
}

.hgi-stroke.hgi-square-lock-password:before {
    content: "哛"
}

.hgi-stroke.hgi-certificate-01:before {
    content: "䀥"
}

.hgi-stroke.hgi-award-02:before {
    content: "㲯"
}

.hgi-stroke.hgi-validation-approval:before {
    content: "夛"
}

.hgi-stroke.hgi-school:before {
    content: "刽"
}

.hgi-stroke.hgi-arrow-right-01:before {
    content: "㰫"
}

.hgi-stroke.hgi-arrow-left-01:before {
    content: "㰍"
}

.hgi-stroke.hgi-laurel-wreath-first-01:before {
    content: "䧁"
}

.hgi-stroke.hgi-honour-star:before {
    content: "䠍"
}

.hgi-stroke.hgi-ranking:before {
    content: "僱"
}

.hgi-stroke.hgi-medal-second-place:before {
    content: "䯋"
}

.hgi-stroke.hgi-linkedin-02:before {
    content: "䩥"
}

.hgi-stroke.hgi-snapchat:before {
    content: "可"
}

.hgi-stroke.hgi-new-twitter:before {
    content: "丏"
}

.hgi-stroke.hgi-youtube:before {
    content: "媗"
}

.hgi-stroke.hgi-disability-02:before {
    content: "䎷"
}

.hgi-stroke.hgi-sign-language-c:before {
    content: "厃"
}

.hgi-stroke.hgi-link-04:before {
    content: "䩑"
}

@font-face {
    font-family: hgi-solid-rounded;
    src: url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-solid-rounded.eot);
    src: url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-solid-rounded.eot#iefix) format("embedded-opentype"), url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-solid-rounded.woff2) format("woff2"), url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-solid-rounded.woff) format("woff"), url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-solid-rounded.ttf) format("truetype"), url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-solid-rounded.svg#hgi-solid-rounded) format("svg")
}

.hgi-solid {
    font-family: hgi-solid-rounded !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    display: inline-block;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto
}

.hgi-bulk.hgi-menu-01:after {
    content: "䯬"
}

.hgi-bulk.hgi-menu-01:before {
    content: "䯭"
}

.hgi-stroke.hgi-cancel-01:before {
    content: "㾽"
}

.hgi-stroke.hgi-arrow-right-02:before {
    content: "㰭"
}

.hgi-stroke.hgi-arrow-left-02::before {
    content: "㰏"
}

.hgi-stroke.hgi-cookie:before {
    content: "䈙"
}

.hgi-stroke.hgi-dashboard-square-02:before {
    content: "䋿"
}

.hgi-duotone.hgi-online-learning-01:after {
    content: "亊"
}

.hgi-stroke.hgi-profile-02:before {
    content: "偣"
}

.hgi-stroke.hgi-document-attachment:before {
    content: "䏵"
}

.hgi-stroke.hgi-sliders-horizontal:before {
    content: "叅"
}

@font-face {
    font-family: hgi-duotone-rounded;
    src: url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-duotone-rounded.eot);
    src: url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-duotone-rounded.eot#iefix) format("embedded-opentype"), url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-duotone-rounded.woff2) format("woff2"), url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-duotone-rounded.woff) format("woff"), url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-duotone-rounded.ttf) format("truetype"), url(https://assets-nu-mauve.vercel.app/fonts/icon-fonts/hgi-duotone-rounded.svg#hgi-duotone-rounded) format("svg")
}

.hgi-duotone {
    font-family: hgi-duotone-rounded !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    display: inline-block;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto
}

.hgi-duotone:before {
    position: absolute;
    left: 0
}

.hgi-duotone:after {
    opacity: .4
}

.hgi-stroke.hgi-arrow-data-transfer-horizontal:before {
    content: "㯧"
}

.hgi-stroke.hgi-hierarchy-circle-02:before {
    content: "䞷"
}

.menu-group a:visited {
    color: inherit
}

.header-nav__main a:visited {
    color: inherit
}

.file-upload__file-remove-btn {
    min-width: unset !important
}

.filteration__block-title {
    position: relative
}

.filteration__block-title {
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--colors-2-text-primary, #161616);
    font-family: inherit;
    font-size: var(--Size-Text-typo-size-text-sm, 14px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-Height-Text-line-heights-text-sm, 20px)
}

.filteration__selected-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    min-height: 40px
}

.filteration__panel {
    animation: slideDown 0.3s ease
}

.filteration__panel--open {
    top: 60%
}

.filteration__panel {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    overflow-y: auto;
    z-index: 1000;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-neutral-primary);
    background: var(--background-white);
    display: flex;
    width: 100%;
    max-width: var(--width-xxs);
    flex-direction: column;
    align-items: start;
    gap: var(--spacing-md);
    max-height: 75vh;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .05), 0 4px 6px -2px rgb(0 0 0 / .03);
    opacity: 0;
    visibility: hidden
}

.filteration__panel.is-visible {
    opacity: 1;
    visibility: visible
}

.filteration__block {
    width: 100%;
    transition: all 0.3s ease;
    padding: var(--spacing-md)
}

.filteration__actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    border-top: 1px solid var(--color-neutral-200);
    width: 100%
}

.filteration__block-content--chips {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px
}

.filteration__block-content {
    display: flex;
    flex: 1;
    width: 100%;
    transition: max-height 0.3s ease-in-out
}

.filteration__block-actions {
    margin-top: 22px;
    margin-bottom: 30px
}

.filteration__divider {
    height: 1px;
    background: var(--border-neutral-primary);
    width: 100%
}

.filteration {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    position: relative;
    width: 100%
}

button.dga-btn {
    min-width: unset !important
}

.chip--success.selected {
    color: var(--text-oncolor-primary);
    background-color: var(--background-primary)
}

input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, button:hover {
    border-color: inherit !important
}

.btn.focus, .btn:focus {
    box-shadow: none !important
}

.dropdown__btn:focus, .dropdown__btn:hover, .dropdown__btn:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--colors-gray-neutral-700);
    background-color: var(--colors-base-white);
    color: var(--colors-text-placeholder)
}

.pagination button {
    min-width: auto !important;
    padding: .3em .6em
}

.btn {
    min-width: unset;
    box-shadow: none !important
}

.btn--table-sort:hover {
    background: var(--button-background-neutral-pressed)
}

.btn--table-sort:focus {
    background: var(--button-background-neutral-focused)
}

.btn--table-sort:active {
    background: var(--button-background-neutral-selected)
}

.grid-listThree {
    position: relative
}

.loading-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.dga-loading {
    display: flex;
    justify-content: center;
    align-items: center
}

.dga-loading--xl {
    width: 40px;
    height: 40px
}

.dga-loading__circle {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #fff0;
    border-top-color: var(--background-primary, #005c9f);
    animation: spin 0.7s linear infinite;
    mix-blend-mode: multiply
}

@media (prefers-reduced-motion: reduce) {
    .dga-loading__circle {
        animation: none !important
    }
}

.header-nav__mobile-menu .sidepanel__menu-tab:hover .menu-arrow {
    transform: rotate(180deg)
}

.menu-arrow-mobile {
    width: 15px
}

.ms-rtestate-field h1, h1.ms-rteElement-H1 {
    line-height: 1.4;
    color: #0d121c
}

.ms-rtestate-field p, p.ms-rteElement-P {
    line-height: 24px
}

label {
    margin-bottom: 8px
}

.menu-item:focus {
    border: 2px solid var(--border-black);
    outline: none;
    background-color: #fff
}

.feedback-error-wrapper {
    gap: 16px !important;
	padding-top:8px;
}

.switch-wrapper:focus {
    outline: 2px solid var(--border-black)
}

a.header-menu__item-label:focus {
    outline: none;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    outline-offset: 4px
}

}
.switch-main__content input:focus {
    outline: 2px solid var(--border-black);
    opacity: 1;
    width: 48px;
    height: 24px
}

.slider.round.slider--inactive:active {
    box-shadow: 0 0 1px var(--controls-control-neutral-hovered);
    outline: 4px solid var(--controls-control-ripple-effect);
    opacity: .5
}

.switch .switch-wrapper input:active + .slider.slider--active {
    background-color: var(--colors-brand-900);
    outline: 4px solid var(--controls-control-ripple-effect)
}

@media only screen and (max-width: 770px) {
    #feedback_no .feedback_wrapper section div.w-full.flex.justify-between, #feedback_yes .feedback_wrapper section div.w-full.flex.justify-between {
        flex-direction: column
    }
}

a.header__logo:focus-within {
    outline: 2px solid var(--border-black)
}

.header-menu__item:focus-within {
    outline: 2px solid var(--border-black);
    outline-offset: 0
}

.search-main.header-menu__item:active {
    color: #fff;
    background: var(--colors-gray-neutral-200);
    outline: 0
}

.checkbox-container::after {
    opacity: .3;
    mix-blend-mode: multiply;
    background-color: var(--colors-gray-neutral-200, #e5e7eb);
    width: 64px;
    height: 64px
}

.checkbox-main input:focus {
    outline: 2px solid var(--colors-base-black, #0d121c);
    height: 32px;
    width: 32px;
    opacity: 1;
    outline-offset: 2px
}

.radio-main input:focus {
    outline: 2px solid var(--colors-base-black, #0d121c);
    opacity: 1;
    width: 24px;
    height: 24px;
    outline-offset: 2px
}

.checkbox--brand input:not(:checked):active ~ .checkbox-container {
    background-color: var(--colors-gray-300, #cecfd2);
    border-color: var(--colors-gray-neutral-600, #4d5761);
    transform: scale(.96);
    transition: transform 0.05s ease-out, background-color 0.1s ease-in
}

.checkbox--brand input:checked ~ .checkbox-container {
    background-color: var(--colors-brand-600);
    border-color: var(--colors-brand-600)
}

.checkbox--brand:hover input:checked ~ .checkbox-container {
    background-color: var(--colors-brand-700, #166a45);
    border-color: var(--colors-brand-700, #166a45)
}

.checkbox--brand input:checked:active ~ .checkbox-container {
    background-color: var(--colors-brand-800);
    border-color: var(--colors-brand-800)
}

.checkbox--brand input:checked ~ .checkbox__label, .checkbox--brand input:checked ~ div > .checkbox__label {
    color: var(--colors-base-black, #0d121c)
}

.radio-container::after {
    opacity: .3;
    mix-blend-mode: multiply;
    background-color: var(--colors-gray-neutral-200, #e5e7eb);
    width: 48px;
    height: 48px
}

.radio--brand input:not(:checked):active ~ .radio-container {
    background-color: var(--colors-gray-300, #cecfd2);
    border-color: var(--colors-gray-neutral-600, #4d5761);
    transform: scale(.96);
    transition: transform 0.05s ease-out, background-color 0.1s ease-in
}

.radio--brand input:checked ~ .radio__label, .radio--brand input:checked ~ div > .radio__label {
    color: var(--colors-base-black, #0d121c)
}

.radio--brand input[type="radio"]:checked + .radio-container:hover {
    border-color: var(--colors-brand-700, #166a45)
}

.radio--brand input[type="radio"]:checked + .radio-container:hover::before {
    background-color: var(--colors-brand-700, #166a45)
}

.radio--brand input[type="radio"]:checked:active + .radio-container {
    border-color: var(--colors-brand-800)
}

.radio--brand input[type="radio"]:checked:active + .radio-container::before {
    background-color: var(--colors-brand-800)
}

.checkbox--brand input:not(:checked):active ~ .checkbox-container {
    background-color: var(--colors-gray-300, #cecfd2);
    border-color: var(--colors-gray-neutral-600, #4d5761);
    transform: scale(.96);
    transition: transform 0.05s ease-out, background-color 0.1s ease-in
}

.radio--brand input:not(:checked):active ~ .radio-container {
    background-color: var(--colors-gray-300, #cecfd2);
    border-color: var(--colors-gray-neutral-600, #4d5761);
    transform: scale(.96);
    transition: transform 0.05s ease-out, background-color 0.1s ease-in
}

.accordion-item__header:focus-within {
    border: 2px solid #000
}

.ContentArea .ms-webpartzone-cell {
    margin: auto auto auto
}

#map {
    height: 500px;
    width: 70%;
    float: left;
    direction: rtl
}

#locations-list {
    height: 550px;
    overflow-y: auto;
    width: 28%;
    float: right;
    padding: 10px;
    direction: rtl
}

.location-item {
    cursor: pointer;
    padding: 8px;
    margin: 5px 0;
    border: 1px solid #ddd;
    text-align: right;
    height: auto !important
}

.location-item:hover {
    background: var(--button-background-neutral-default)
}

.active1 {
    background: #fff0;
    outline: 2px solid #000
}

select {
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
    text-align: right
}

.leaflet-popup-content {
    direction: rtl;
    text-align: right
}


.dropdown__btn:hover {
    border-color: var(--form-field-border-hovered)
}
.dropdown:hover{
    border-color: var(--form-field-border-hovered)

}
/*!* Hovered option *!*/

/*!* Selected option *!*/

/*!* Focused option (when navigating with keyboard) *!*/
.arrow-flipped {
    transform: rotate(180deg);
    transition: transform 0.3s ease
}

.ms-rtestate-field h3, h3.ms-rteElement-H3 {
    line-height: 1.75;
}
#success-message-conatact{
padding-top:8px;
}
#success-message-conatact p{
margin:0px!important;
}

.card-row a[href="/Arabic/Pages/All-FAQ.aspx"]:hover, .card-row a[href="/Arabic/Pages/contactus_form.aspx"]:hover,.home-page-container a:has(button):hover,.news-events-container a:has(button):hover,.VicePresidencies  a:has(button):hover,.mr-font-size,a:has(.btn--primary-brand){
    text-decoration: none;
}
#contact-form .error-wrapper{
gap:16px;
}
.checkbox textarea{height:100px;}
#contact-form .item label p{margin:0px;}
#contact-form #Phone{text-align:left;}
@media (min-width:768px) and (max-width:1367px)
{
	.defaultpages .wrapper .card-container .card{
		max-width:300px!important;
	}
}
.site-main .readerContent .text-dark{color:#384250!important;margin:0px;}
.AboutUs-Wrapper .dga-featured-icon,.AboutUs-Wrapper .dga-featured-icon img{width:24px!important;height:24px!important;background:transparent!important;}
.vision2030 .ar-layout .AboutUs-Wrapper .card-gb{
	background: transparent;
    color: #0D121C;
	border:0px;
}
.card-lgb-wrapper div{
	background-color:transparent!important;
	padding:16px!important;
	border:1px solid #D2D6DB!important;
}
#next-button:hover,#prev-button:hover{
	background-color: var(--colors-brand-700) !important;
}
#next-button:active,#prev-button:active{
	background-color: var(--colors-brand-900) !important;
}
#next-button:focus,#prev-button:focus{
	outline: 2px solid var(--colors-gray-950) !important;
}
#div_53b53dcd-259d-4d2e-aba4-dfbe3a84a872 #MSOZoneCell_WebPartWPQ1 div.table-wrapper {
    width: 80vw !important;
}
#div_53b53dcd-259d-4d2e-aba4-dfbe3a84a872 #MSOZoneCell_WebPartWPQ1 .table-contained {
    overflow: scroll hidden ;
}
.input.focus:after,.dga-textarea.focus:after {
    width:100%
}
.input.active.focus:after,.dga-textarea.active.focus:after {
    width:50%
}
.input__field:focus, .input__field:focus-visible{
	border-bottom:0px solid var(--colors-gray-400)!important;
}
.partner-section .grid{justify-content: center;    grid-template-columns: repeat(4, auto);}
.partner-section .grid .rounded-[16]{width:160px;}
@media (min-width: 441px) and (max-width:632px)
{.partner-section .grid{grid-template-columns: repeat(2, auto);}}
@media (max-width: 440px)
{.partner-section .grid{grid-template-columns: repeat(1, auto);}}
.error-wrapper{gap:16px;}
.form .item p{margin:0px;}
.ms-rtestate-field:has(#map){
	display:flex;
}
@media (max-width: 540px) {
  .ms-rtestate-field:has(#map){
	flex-direction: column-reverse;
}
#locations-list{width:90%}
#map{width:90%;}
}
.nav{    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: nowrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
    scroll-behavior: smooth;
    width: 99%;}
	#itemTitle
	{
	line-height: 1.6;
	}
	/*button.ksau-internal-link-active{
		background-color:var(--color-gray-200);
		color:var(--color-gray-500);	
	}
	a.ksau-internal-link-active{
		color:var(--color-gray-500);	
	}*/



/*a.contactus-main.header-menu__item.contact-trigger.header-menu__item--selected .contact-us-icon {*/
/*filter: invert(1);*/
/*}*/