@font-face {
    font-family: IBMPlexSans-Regular;
    src: url(../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(../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(../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(../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: #fff;
    --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: #2ce;
    --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: #026;
    --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 #1018280d;
    --shadow-sm: 0px 1px 2px 0px #1018280f,0px 1px 3px 0px #1018281a;
    --shadow-md: 0px 2px 4px -2px #1018280f,0px 4px 8px -2px #1018281a;
    --shadow-lg: 0px 4px 6px -2px #10182808,0px 12px 16px -4px #10182814;
    --shadow-xl: 0px 8px 8px -4px #10182808,0px 20px 24px -4px #10182814;
    --shadow-2xl: 0px 24px 48px -12px #1018282e;
    --shadow-3xl: 0px 32px 64px -12px #10182824;
    --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
}

: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: #fff;
    --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: #2ce;
    --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: #026;
    --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 #1018280d;
    --shadow-sm: 0px 1px 2px 0px #1018280f,0px 1px 3px 0px #1018281a;
    --shadow-md: 0px 2px 4px -2px #1018280f,0px 4px 8px -2px #1018281a;
    --shadow-lg: 0px 4px 6px -2px #10182808,0px 12px 16px -4px #10182814;
    --shadow-xl: 0px 8px 8px -4px #10182808,0px 20px 24px -4px #10182814;
    --shadow-2xl: 0px 24px 48px -12px #1018282e;
    --shadow-3xl: 0px 32px 64px -12px #10182824
}

: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);
    --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: #fff;
    --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: #fff0;
    --colors-alpha-alpha-white-10: #ffffff19;
    --colors-alpha-alpha-white-20: #fff3;
    --colors-alpha-alpha-white-30: #ffffff4c;
    --colors-alpha-alpha-white-40: #fff6;
    --colors-alpha-alpha-white-50: #ffffff7f;
    --colors-alpha-alpha-white-60: #fff9;
    --colors-alpha-alpha-white-70: #ffffffb2;
    --colors-alpha-alpha-white-80: #fffc;
    --colors-alpha-alpha-white-90: #ffffffe5;
    --colors-alpha-alpha-white-100: #fff;
    --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 #1018280d;
    --shadow-sm: 0px 1px 2px 0px #1018280f,0px 1px 3px 0px #1018281a;
    --shadow-md: 0px 2px 4px -2px #1018280f,0px 4px 8px -2px #1018281a;
    --shadow-lg: 0px 4px 6px -2px #10182808,0px 12px 16px -4px #10182814;
    --shadow-xl: 0px 8px 8px -4px #10182808,0px 20px 24px -4px #10182814;
    --shadow-2xl: 0px 24px 48px -12px #1018282e;
    --shadow-3xl: 0px 32px 64px -12px #10182824;
    --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: #fff;
    --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)
}

:root {
    --colors-white: #fff;
    --colors-white-20: #ffffff4d;
    --colors-white-30: #ffffff4d;
    --colors-white40: #fff6;
    --colors-white-60: #fff9;
    --colors-white-80: #fffc;
    --colors-white-90: #ffffffe6;
    --colors-black-op: #00000017;
    --colors-gray-25: #fcfcfd;
    --colors-gray-50: #f9fafb;
    --colors-gray-100: #f3f4f6;
    --colors-gray-200: #e5e7eb;
    --colors-gray-300: #d2d6db;
    --colors-gray-400: #9da4ae;
    --colors-gray-500: #6c737f;
    --colors-gray-600: #4d5761;
    --colors-gray-700: #384250;
    --colors-gray-800: #1f2a37;
    --colors-gray-900: #111927;
    --colors-gray-950: #0d121c;
    --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-gold-25: #fffef7;
    --colors-gold-50: #fffef2;
    --colors-gold-100: #fffce6;
    --colors-gold-200: #fcf3bd;
    --colors-gold-300: #fae996;
    --colors-gold-400: #f7d54d;
    --colors-gold-500: #f5bd02;
    --colors-gold-600: #dba102;
    --colors-gold-700: #b87b02;
    --colors-gold-800: #945c01;
    --colors-gold-900: #6e3c00;
    --colors-gold-950: #472400;
    --colors-lavender-25: #fefcff;
    --colors-lavender-50: #f9f5fa;
    --colors-lavender-100: #f2e9f5;
    --colors-lavender-200: #e1cce8;
    --colors-lavender-300: #ccadd9;
    --colors-lavender-400: #a57bba;
    --colors-lavender-500: #80519f;
    --colors-lavender-600: #6d428f;
    --colors-lavender-700: #532d75;
    --colors-lavender-800: #3d1d5e;
    --colors-lavender-900: #281047;
    --colors-lavender-950: #16072e;
    --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-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-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;
    --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%);
    --shadow-xs: 0 1px 2px 0 #1018280d;
    --shadow-sm: 0px 1px 2px 0px #1018280f,0px 1px 3px 0px #1018281a;
    --shadow-md: 0px 2px 4px -2px #1018280f,0px 4px 8px -2px #1018281a;
    --shadow-lg: 0px 4px 6px -2px #10182808,0px 12px 16px -4px #10182814;
    --shadow-xl: 0px 8px 8px -4px #10182808,0px 20px 24px -4px #10182814;
    --shadow-2xl: 0px 24px 48px -12px #1018282e;
    --shadow-3xl: 0px 32px 64px -12px #10182824;
    --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: 0;
    --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
}

[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: #fff;
    --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)
}


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

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

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

    .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-offset: 1px;
        outline: 2px solid var(--colors-gray-950) !important
    }

.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:focus, .btn--close:focus, .btn--sort:focus {
    outline: 2px solid var(--colors-base-black);
    background: #fff0;
    position: relative
}

.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-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-outlined {
    border: 1px solid var(--colors-warning-500);
    background-color: var(--colors-base-white);
    color: var(--colors-warning-700)
}

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

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

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

.radio__warning-icon {
    width: 24px
}

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

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

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

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

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

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

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

.spinner__circle {
    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: .5s linear 1ms infinite spin;
    position: relative
}

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

.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-text {
    gap: 4px;
    height: fit-content;
    padding-right: 16px
}

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

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

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

.textarea--disabled .textarea__field, .textarea--disabled .textarea__field::placeholder, .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--warning, .textarea__feedback-icon--warning-triangle {
    color: var(--colors-warning-600)
}

.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)
}

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

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

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

.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 {
    align-items: center;
    gap: 8px;
    display: flex
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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, .footer--bg-brand .footer__copyright {
        color: var(--colors-text-primary_on-brand)
    }

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

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

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

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

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

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

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

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

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

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

.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 {
    font: 400 14px/20px IBMPlexSans-Regular
}

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

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

.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)
}



.btn {
    appearance: none;
    border-radius: var(--radius-sm);
    margin: var(--spacing-xs);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    box-sizing: border-box;
    border: 0;
    outline: none;
    display: inline-flex;
    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 span.btn-icon {
    font-size: 20px
}

.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.btn--sm {
        width: 24px;
        height: 24px
    }

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

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

    .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;
        text-decoration: none;
        border: 1px solid var(--colors-white) !important
    }

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

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

.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 {
    color: var(--colors-text-primary);
    mix-blend-mode: multiply;
    background-color: #fff0
}

    .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 {
        outline: 2px solid var(--colors-base-black);
        background: #fff0;
        position: relative
    }

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

    .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] {
        color: var(--colors-gray-neutral-400);
        background: #fff0
    }

.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--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 {
        outline-color: var(--colors-base-white);
        background: #fff0
    }

    .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 {
    height: 32px;
    padding: var(--spacing-none)var(--spacing-lg);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-xs);
    display: inline-flex
}

.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);
    color: var(--colors-info-700);
    background-color: #fff0
}

.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);
    color: var(--colors-purple-700);
    background-color: #fff0
}

.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);
    color: var(--colors-pink-700);
    background-color: #fff0
}

.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);
    color: var(--colors-orange-700);
    background-color: #fff0
}

.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%);
    color: hsl(var(--colors-alpha-white)/90%);
    background-color: #fff0
}

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

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

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

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

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

.accordion-item--flush {
    -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;
    width: 398px
}

[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, .featured-icon--hard-success {
    color: var(--colors-base-white);
    background-color: var(--colors-brand-600)
}

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

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

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

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

form .input__field {
    width: 100%;
    height: 100%;
    color: var(--colors-text-primary);
    background-color: #fff0;
    border: 0;
    outline: 0;
    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::placeholder {
    color: var(--colors-text-placeholder)
}

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

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

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

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

.input__prefix, .input__suffix {
    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;
    display: inline-flex
}

.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.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)
}

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

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

.link:hover:not(.link--disabled).link__label, .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--md .link__icon {
    font-size: 20px !important
}

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

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

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

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

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

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

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

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

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

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

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

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

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

    .dropdown__list li, .textarea__dropdown-list li, .input__dropdown-list li {
        width: 100%;
        margin: 0;
        padding: 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);
    pointer-events: auto;
    max-height: 376px;
    overflow-y: auto
}

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

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

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

.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 {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    display: flex
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            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 {
                border-radius: var(--radius-4,4px);
                border: 2px solid var(--colors-base-black);
                background: var(--Colors-Gray-neutral-950,#0d121c);
                transition: all .2s ease-in-out
            }

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) {
    background-color: #fff;
    transition: all .2s ease-in-out
}

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

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

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

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

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

.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);
    outline: none;
    text-decoration: none
}

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

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

.header-menu__item:active {
    outline: none;
    text-decoration: 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);
    align-items: center;
    display: flex
}

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

.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);*/
    background: var(--button-button-background-primary-default);
/*    color: var(--colors-base-white);*/
    color: var(--text-text-oncolor-primary);
}

    .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);*/
        background: var(--button-button-background-primary-hovered);
/*        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);*/
        background: var(--button-button-background-primary-pressed);
/*        color: var(--colors-base-white)*/
    }

.header-menu__item-label {
    background: 0 0 !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);
    left: var(--spacing-md)var(--spacing-lg);
    content: "";
    border-radius: var(--radius-full);
    height: 8px;
    display: block;
    position: absolute;
    bottom: 0;
    transform: none;
    display: block !important
}

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

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

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

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

.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-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);
    align-items: flex-start;
    gap: var(--spacing-md);
    flex-direction: column;
    place-content: start;
    height: 100vh;
    display: grid
}

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

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

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

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

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

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

.display-sm-regular {
    font: 400 3rem/3.8rem 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 {
    font: 400 1.6rem/2.4rem IBMPlexSans-Regular
}

.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 {
    font: 400 1.4rem/2rem IBMPlexSans-Regular
}

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

.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-xl-medium {
    font: 500 2rem/3rem 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-lg-semibold, .modal__heading, .footer__nav-links-column-title {
    font: 600 1.8rem/2.8rem 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-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-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 .6s;
    translate: -150px;
    opacity: 1 !important;
    font-weight: 700 !important
}

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

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

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

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

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

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

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

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

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

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 {
        background: initial;
        height: min-content;
        width: max-content !important
    }

.flipped-background:before {
    content: "";
    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;
    position: absolute;
    inset: 0
}

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

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

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

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

.pointer {
    cursor: pointer
}

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

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



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

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

.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 {
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex
}

    .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: "";
            border-radius: var(--radius-sm);
            background-color: #fff0;
            border: 1px solid #fff;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0
        }

    .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);
    color: #0d121c;
    mix-blend-mode: multiply;
    background-color: #fff0;
    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;
        border-radius: 4px;
        outline: 2px solid #0d121c !important
    }

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

.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 {
        outline: 2px solid var(--border-white);
        background: #fff0
    }

    .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 {
    color: var(--colors-text-primary);
    mix-blend-mode: multiply;
    background-color: #fff0
}

    .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: "";
            border-radius: var(--radius-sm);
            background-color: #fff0;
            border: 1px solid #fff;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0
        }

    .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] {
        color: var(--text-default-disabled);
        background: #fff0
    }

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

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

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

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

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

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

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

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

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

    .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: "";
            border-radius: var(--radius-sm);
            background-color: #fff0;
            border: 1px solid #fff;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0
        }

    .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: "";
            border-radius: var(--radius-sm);
            background-color: #fff0;
            border: 1px solid #fff;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0
        }

    .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);
    color: var(--text-error);
    mix-blend-mode: multiply;
    background-color: #fff0
}

    .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 {
        outline: 2px solid var(--border-black);
        background: #fff0;
        position: relative
    }

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

    .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] {
        color: var(--text-default-disabled);
        outline: 1px solid var(--border-neutral-secondary);
        background: #fff0
    }

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

    .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 {
        outline: 2px solid var(--border-black);
        background: #fff0;
        position: relative
    }

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

    .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] {
        color: var(--text-default-disabled);
        background: #fff0
    }

.btn--des-transparent {
    color: var(--button-background-danger-primary-default);
    background-color: #fff0
}

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

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

    .btn--des-transparent:focus {
        outline: 2px solid var(--border-black);
        color: var(--button-background-danger-primary-selected);
        background: #fff0;
        position: relative
    }

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

    .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] {
        color: var(--text-default-disabled);
        background: #fff0
    }

.btn.btn--subtle-on-color, .btn.btn--close-on-color {
    color: var(--text-oncolor-primary);
    background-color: #fff0
}

    .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] {
        color: var(--text-default-oncolor-disabled);
        background-color: #fff0
    }

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

    .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] {
        color: var(--text-default-oncolor-disabled);
        background-color: #fff0
    }

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

.tags .flex {
    gap: 1rem
}

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

.tag-icon {
    justify-content: center;
    align-items: center;
    padding: 1.875px 1.5px;
    display: flex
}

.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);
    color: var(--tag-text-neutral);
    background-color: #fff0
}

.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);
    color: var(--tag-text-success);
    background-color: #fff0
}

.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);
    color: var(--tag-text-error);
    background-color: #fff0
}

.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);
    color: var(--tag-text-warning);
    background-color: #fff0
}

.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);
    color: var(--tag-text-info);
    background-color: #fff0
}

.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);
    color: var(--colors-purple-700);
    background-color: #fff0
}

.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);
    color: var(--colors-pink-700);
    background-color: #fff0
}

.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);
    color: var(--colors-orange-700);
    background-color: #fff0
}

.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%);
    color: hsl(var(--colors-alpha-white)/90%);
    background-color: #fff0
}

.tag--on-color svg {
    color: currentColor;
    stroke: currentColor
}

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

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

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

.accordion-item__header {
    padding: var(--spacing-xl);
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
    cursor: pointer;
    text-decoration: none;
    display: flex
}

    .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 .3s ease-in-out
}

    .accordion-item__arrow, .accordion-item__arrow > dga-icon {
        justify-content: center;
        align-items: center;
        width: 17px;
        height: 16px;
        font-size: 16px;
        display: flex
    }

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

.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 {
    border: 0 solid var(--border-black);
    z-index: 1;
    background-color: #fff0;
    outline: none;
    position: relative
}

.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 {
    border-top: 0;
    width: 100%;
    position: relative
}

    .accordion-item--flush:before {
        content: "";
        background: linear-gradient(to right,transparent 0 16px,var(--border-neutral-primary)16px calc(100% - 16px),transparent calc(100% - 16px)100%);
        height: 1px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0
    }

.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 {
    gap: var(--spacing-xl);
    padding: var(--spacing-none);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    width: fit-content;
    display: flex
}

.checkbox-container {
    border-radius: var(--radius-xs);
    border: 1px solid var(--controls-control-border);
    cursor: pointer;
    z-index: 0;
    justify-content: center;
    align-items: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    display: flex;
    position: relative;
    overflow: visible
}

    .checkbox-container:after, .checkbox input:after {
        content: "";
        background: var(--controls-control-ripple-effect);
        border-radius: var(--radius-full);
        z-index: -1;
        width: 50px;
        height: 50px;
        transition: transform .3s ease-in-out;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)scale(0)
    }

    .checkbox-container:hover:after, .checkbox-container:active:after, .checkbox input:active:after, .checkbox input:hover:after {
        transform: translate(-50%,-50%)scale(1)
    }

.checkbox input {
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
    position: absolute
}

    .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.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-offset: 2px;
    outline: 2px solid #000
}

    .checkbox-container:focus:hover {
        outline: 2px solid #000
    }

        .checkbox-container:focus:hover:after {
            outline: 0
        }

.checkbox--lg .checkbox-container {
    width: 24px;
    min-width: 24px;
    height: 24px
}

.checkbox--md .checkbox-container {
    width: 32px;
    min-width: 32px;
    height: 32px
}

.checkbox--sm .checkbox-container {
    width: 16px;
    min-width: 16px;
    height: 16px
}

.checkbox--readonly .checkbox-container {
    background-color: #0000 !important
}

    .checkbox--readonly .checkbox-container .checkbox-icon {
        color: var(--controls-control-neutral-checked)
    }

.checkbox-main {
    gap: var(--spacing-xs);
    flex-direction: column;
    max-width: 382px;
    display: flex
}

.checkbox-main__content {
    column-gap: var(--spacing-md);
    align-items: center;
    display: flex
}

.checkbox__label {
/*    color: var(--text-display,#1f2a37)*/
}

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

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

.checkbox__warning-icon {
    align-items: center;
    width: 16px;
    height: 16px;
    display: flex
}

.checkbox-icon {
    width: 16px;
    height: 16px;
    color: var(--colors-base-white);
    z-index: 1;
    justify-content: center;
    align-items: center;
    position: relative;
    display: none !important
}

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

.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 {
    min-width: 48px;
    height: 24px;
    display: inline-block;
    position: relative
}

    .switch .switch-wrapper input {
        opacity: 0;
        width: 0;
        height: 0
    }

    .switch .switch-wrapper .slider {
        cursor: pointer;
        background-color: #fff;
        border: 1px solid #000;
        border-radius: 34px;
        transition: all .4s;
        position: absolute;
        inset: 0
    }

        .switch .switch-wrapper .slider:before {
            content: "";
            background-color: var(--controls-control-neutral-checked);
            border-radius: 50%;
            width: 16px;
            height: 16px;
            transition: all .4s;
            position: absolute;
            bottom: 4px;
            left: 4px
        }

    .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 {
        outline: 0 solid var(--controls-control-ripple-effect);
        box-shadow: 0 0 1px var(--controls-control-boarder-disabled) !important;
        border: 1px solid var(--control-disabled) !important
    }

        .switch .switch-wrapper input:disabled + .slider:before {
            background-color: var(--control-disabled)
        }

        .switch .switch-wrapper input:disabled + .slider.slider--active {
            outline: 0 solid var(--controls-control-ripple-effect);
            background-color: var(--control-disabled) !important
        }

            .switch .switch-wrapper input:disabled + .slider.slider--active:before {
                background-color: var(--controls-control-icon-disabled) !important
            }

    .switch .switch-wrapper input:checked + .slider:before {
        background-color: #fff;
        transform: translate(24px)
    }

    .switch .switch-wrapper .slider.round {
        border-radius: 34px
    }

        .switch .switch-wrapper .slider.round:before {
            border-radius: 50%
        }

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

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

.switch-main {
    gap: var(--spacing-xs);
    flex-direction: column;
    max-width: 382px
}

.switch-main, .switch-main__content {
    -moz-column-gap: var(--spacing-xl);
    column-gap: var(--spacing-xl);
    display: flex
}

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

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

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

.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: #0000 !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);
    gap: var(--spacing-xl);
    padding: var(--spacing-md);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: inline-flex
}

    .radio.focus {
        border-radius: var(--radius-sm);
        outline: 2px solid var(--controls-control-neutral-checked)
    }

.radio-main {
    gap: var(--spacing-xs);
    flex-direction: column;
    max-width: 382px
}

.radio-main, .radio-main__content {
    -moz-column-gap: var(--spacing-xl);
    column-gap: var(--spacing-md);
    display: flex
}

.radio input {
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
    position: absolute
}

    .radio input:checked ~ .radio-container:before, .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 {
    border-radius: var(--radius-full);
    border: 1px solid var(--controls-control-border);
    z-index: 1;
    justify-content: center;
    align-items: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    display: flex;
    position: relative;
    overflow: visible
}

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

    .radio-container:before {
        background-color: var(--controls-control-primary-pressed);
        z-index: 0;
        width: 15px;
        height: 15px;
        transition: all .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 {
    align-items: center;
    gap: var(--spacing-xl);
    color: var(--text-error);
    display: flex
}

.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.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 {
    border-radius: var(--radius-sm);
    justify-content: center;
    align-items: center;
    width: 56px;
    min-width: 56px;
    height: 56px;
    display: flex
}

.dga-featured-icon--xl {
    width: 56px;
    min-width: 56px;
    height: 56px
}

    .dga-featured-icon--xl span {
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 28px;
        display: flex
    }

.dga-featured-icon--lg {
    width: 48px;
    min-width: 48px;
    height: 48px
}

    .dga-featured-icon--lg span {
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        display: flex
    }

.dga-featured-icon--md {
    width: 40px;
    min-width: 40px;
    height: 40px
}

    .dga-featured-icon--md span {
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        display: flex
    }

.dga-featured-icon--sm {
    width: 32px;
    min-width: 32px;
    height: 32px
}

    .dga-featured-icon--sm span {
        justify-content: center;
        align-items: center;
        width: 16px;
        height: 16px;
        display: flex
    }

.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 {
    border-radius: var(--radius-sm);
    justify-content: center;
    align-items: center;
    width: 56px;
    min-width: 56px;
    height: 56px;
    display: flex
}

.featured-icon--xl {
    width: 56px;
    min-width: 56px;
    height: 56px
}

    .featured-icon--xl span {
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 28px;
        display: flex
    }

.featured-icon--lg {
    width: 48px;
    min-width: 48px;
    height: 48px
}

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

.featured-icon--md {
    width: 40px;
    min-width: 40px;
    height: 40px
}

    .featured-icon--md span {
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        display: flex
    }

.featured-icon--sm {
    width: 32px;
    min-width: 32px;
    height: 32px
}

    .featured-icon--sm span {
        justify-content: center;
        align-items: center;
        width: 16px;
        height: 16px;
        display: flex
    }

.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 {
    z-index: 1000;
    width: 484px;
    padding: var(--spacing-xl)var(--spacing-3xl);
    align-items: flex-start;
    gap: var(--spacing-xl);
    border-radius: var(--radius-md,8px);
    background: var(--colors-base-white);
    flex-direction: column;
    display: flex;
    position: fixed;
    overflow: hidden
}

    .notification-toast:after {
        content: "";
        background-color: var(--colors-error-400);
        width: 8px;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0
    }

.notification-toast__close-btn {
    top: calc(var(--spacing-xl));
    right: calc(var(--spacing-3xl));
    position: absolute
}

.notification-toast__header {
    padding: var(--spacing-none);
    align-items: flex-start;
    gap: var(--spacing-lg);
    display: flex
}

.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 {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    display: none
}

.notification-toast--neutral:after {
    background-color: var(--background-neutral-200)
}

.notification-toast--neutral .notification-toast__icon {
    background-color: var(--background-neutral-50);
    color: var(--icon-default) !important
}

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

.notification-toast--info .notification-toast__icon {
    background-color: var(--background-info-50);
    color: var(--background-info) !important
}

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

.notification-toast--error .notification-toast__icon {
    background-color: var(--background-error-50);
    color: var(--background-error) !important
}

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

.notification-toast--warning .notification-toast__icon {
    background-color: var(--background-warning-50);
    color: var(--background-warning) !important
}

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

.notification-toast--success .notification-toast__icon {
    background-color: var(--background-success-50);
    color: var(--background-success) !important
}

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

.vpostion-top {
    top: 16px
}

.vpostion-bottom {
    bottom: 16px
}

.hpostion-left {
    left: 16px
}

.hpostion-right {
    right: 16px
}

.notification-toast__icon {
    place-items: center;
    display: grid
}

.alert {
    width: 100%;
    padding: var(--spacing-xl)var(--spacing-3xl);
    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);
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden
}

    .alert:after {
        content: "";
        background-color: var(--colors-error-400);
        width: 8px;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0
    }

.alert__close-btn {
    top: var(--spacing-xl);
    right: var(--spacing-3xl);
    position: absolute
}

.alert__header {
    padding: var(--spacing-none);
    align-items: flex-start;
    gap: var(--spacing-lg);
    display: flex
}

.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 {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    display: none
}

.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)
}

.dga-form-control {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.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 {
    border-radius: var(--radius-sm);
    border: 1px solid var(--form-field-border-default);
    background: var(--form-field-background-default);
    justify-content: flex-start;
    display: inline-flex;
    position: relative;
    overflow: hidden
}

    .dga-textarea:focus {
        box-shadow: var(--shadow-md)
    }

    .dga-textarea:after {
        content: "";
        background-color: var(--form-field-border-pressed,#007aff);
        width: 0%;
        height: 2px;
        transition: width .2s ease-in-out;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%)
    }

    .dga-textarea:focus-within:after {
        width: 100%
    }

.dga-textarea__field--resize {
    resize: vertical
}

.dga-textarea__field {
    width: 100%;
    height: 100%;
    color: var(--form-field-text-filled);
    padding: var(--spacing-lg)var(--spacing-xl);
    resize: none;
    background-color: #fff0;
    border: 0;
    outline: 0;
    position: relative
}

.input {
    width: 100%;
    min-width: 200px;
    height: 40px;
    padding: var(--spacing-none)var(--spacing-xl);
    border-radius: var(--radius-sm);
    justify-content: flex-start;
    gap: var(--spacing-xs);
    border: 1px solid var(--form-field-border-default);
    background: var(--form-field-background-default);
    display: flex;
    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__field {
    width: 100%;
    height: 100%;
    color: var(--form-field-text-focused);
    background-color: #fff0;
    border: 0;
    outline: 0
}

    .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 {
        color: var(--form-field-text-readonly)
    }

    .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, .input--disabled .input__icon span, .input--disabled .input__prefix--subtle-text, .input--disabled .input__prefix--solid-text {
            color: var(--text-default-disabled)
        }

.input__icon {
    align-items: center;
    height: 100%;
    display: inline-flex
}

    .input__icon span {
        color: var(--form-field-border-hovered);
        font-size: 20px
    }

.input__feedback-icon {
    align-items: center;
    height: 100%;
    display: inline-flex
}

    .input__feedback-icon span {
        z-index: 0;
        font-size: 20px;
        position: relative
    }

.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 {
        border: 12px solid #fff0;
        border-top: 0;
        border-bottom: 20px solid var(--colors-warning-100);
        border-radius: 0 !important;
        width: 0 !important;
        height: 0 !important;
        top: -1px !important;
        left: -2px !important;
        transform: scale(1) !important
    }

.input__feedback-icon--ring span:after {
    content: "";
    border-radius: var(--radius-full);
    z-index: -1;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.16)
}

.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 {
    white-space: nowrap;
    display: inline-block
}

    .input__prefix .dropdown__label--selection ~ .input__prefix-label, .input__suffix .dropdown__label--selection ~ .input__prefix-label {
        display: none
    }

.input__prefix-chevron, .input__suffix-chevron {
    transition: all .3s ease-in-out;
    transform: rotate(0);
    font-size: 30px !important
}

.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 {
        border: 4px solid var(--colors-base-black);
        background-color: #fff0;
        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 {
        border: 4px solid var(--colors-base-black);
        background-color: #fff0
    }

    .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);
    pointer-events: auto;
    max-height: 376px;
    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 {
    background: var(--form-field-background-lighter,#fcfcfd);
    border: 0
}

    .input--lighter:hover, .input--lighter.focus, .input--lighter.active {
        border: 1px solid var(--form-field-border-default)
    }

.input--darker {
    background-color: var(--form-field-background-darker,#f3f4f6);
    border: 0
}

    .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 {
    padding: var(--spacing-none);
    border-radius: var(--radius-xs);
    cursor: pointer;
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.link__icon {
    justify-content: center;
    align-items: center;
    height: 100%;
    display: inline-flex
}

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

.link, .link--primary {
    color: var(--link-primary)
}

    .link:hover, .link--primary:hover {
        text-decoration: underline;
/*        color: var(--link-primary-hovered) !important*/
    }

    .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 {
    border-radius: var(--radius-sm);
    flex-direction: column;
    width: 100%;
    min-width: 200px;
    display: flex;
    position: relative
}

.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 {
    top: 50%;
    right: var(--spacing-xl);
    color: var(--icon-default);
    transition: all .4s ease-in-out;
    display: flex;
    position: absolute;
    transform: translateY(-50%)
}

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

    .dropdown__btn:focus {
        outline: 0
    }

    .dropdown__btn:after {
        content: "";
        background-color: var(--form-field-border-pressed);
        width: 0%;
        height: 2px;
        transition: width .2s ease-in-out;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%)
    }

    .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 {
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-neutral-primary);
    background: var(--form-field-background-default);
    z-index: -2;
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    max-height: 0;
    padding-block: 0;
    list-style: none;
    transition: z-index .1s ease-in-out,padding-block .1s ease-in-out,max-height .2s ease-in-out 10ms;
    display: flex;
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    overflow: hidden
}

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

    .dga-search-box__dropdown-list::-webkit-scrollbar {
        height: 100px;
        width: calc(8px + 2*var(--spacing-xs))
    }

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

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

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

    .dga-search-box__dropdown-list::-webkit-scrollbar-track {
        padding: var(--spacing-xs);
        background-color: #fff0
    }

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

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

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

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

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

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

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

.dropdown__list-group {
    list-style: none
}

.dropdown__list-group-label {
    color: var(--colors-text-quarterary);
    padding: var(--spacing-md,8px)var(--spacing-md,8px)var(--spacing-none,0)var(--spacing-md,8px) !important
}

.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);
    pointer-events: auto;
    max-height: 376px;
    overflow-y: auto
}

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

.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 {
    background-color: var(--form-option-background-pressed);
    outline: none
}

.dropdown__option.selected > .dropdown__option-icon {
    opacity: 1
}

.dropdown__option--checkbox .dropdown__option-icon {
    color: var(--form-field-background-default);
    font-size: 18px !important;
    font-weight: bolder !important;
    display: none !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;
        color: var(--field-background-default) !important;
        display: inline-block !important
    }

.dropdown__option--checkbox .dropdown__option-icon-container {
    border-radius: var(--radius-xs);
    border: 1px solid var(--colors-gray-neutral-500);
    cursor: pointer;
    width: 24px;
    min-width: 24px;
    height: 24px;
    margin: var(--spacing-xs);
    -webkit-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

.dropdown--multi-select {
    height: auto;
    min-height: 40px
}

    .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%;
    margin-right: calc(var(--spacing-xl) + 10px);
    align-items: center;
    display: inline-flex
}

    .dropdown__feedback-icon span {
        z-index: 0;
        font-size: 20px;
        position: relative
    }

        .dropdown__feedback-icon span:after {
            content: "";
            border-radius: var(--radius-full);
            z-index: -1;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            transform: scale(1.16)
        }

.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 {
    background-color: var(--form-field-background-darker);
    border: 0
}

    .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 {
    z-index: 1000;
    background: 0 0;
    border: none;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0
}

    dialog::backdrop {
        -webkit-backdrop-filter: blur(3.1px);
        backdrop-filter: blur(3.1px);
        background: #00000078
    }

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

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

    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 {
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        display: flex
    }

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

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

.tabs-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.tabs-list--horizontal {
    flex-direction: row;
    align-items: center;
    gap: 3px;
    width: 100%;
    display: inline-flex;
    position: relative
}

    .tabs-list--horizontal::-webkit-scrollbar {
        height: 5px
    }

    .tabs-list--horizontal::-webkit-scrollbar-track {
        background-color: #fff0;
        padding: 1px
    }

    .tabs-list--horizontal::-webkit-scrollbar-thumb {
        mix-blend-mode: multiply;
        background-color: #ccc;
        background-clip: content-box;
        border: 1px solid #fff0;
        border-radius: 10px;
        height: 5px
    }

    .tabs-list--horizontal.tabs-list--divider:after {
        content: "";
        z-index: 0;
        border-radius: var(--radius-full);
        background-color: var(--border-neutral-primary);
        width: 100%;
        height: 3px;
        position: absolute;
        bottom: 0;
        left: 0
    }

.tabs-list--vertical {
    flex-direction: column;
    align-items: start;
    gap: 3px;
    display: inline-flex
}

    .tabs-list--vertical li {
        width: 100%
    }

    .tabs-list--vertical .tabs-list__item {
        justify-content: start !important
    }

.tabs-list__item {
    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);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    position: relative
}

    .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: "";
            width: calc(100% - var(--spacing-xl)*2);
            border-radius: var(--radius-full);
            background-color: var(--border-black);
            z-index: 1;
            height: 3px;
            display: block;
            position: absolute;
            bottom: 1px;
            left: 50%;
            transform: translate(-50%)
        }

    .tabs-list__item:focus {
        outline: 2px solid var(--colors-base-black);
        color: var(--text-default);
        position: relative
    }

        .tabs-list__item:focus:before {
            content: "";
            z-index: 1;
            border-radius: var(--radius-md);
            background-color: #fff0;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0
        }

    .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:active {
    background-color: #fff0;
    outline: none
}

    .tabs-list__item--active:active .tabs-list__icon {
        color: var(--icon-default)
    }

.tabs-list__item--active:hover {
    color: var(--text-default);
    background-color: #fff0
}

    .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 {
    color: var(--unselected-tab-icon);
    align-items: center;
    width: 16px;
    height: 16px;
    display: flex
}

.tabs-list--vertical .tabs-list__item:hover:after, .tabs-list--vertical .tabs-list__item:active:after, .tabs-list--vertical .tabs-list__item--active:after {
    height: calc(100% - var(--spacing-md)*2);
    width: 3px;
    min-height: 16px;
    inset: 50% auto auto 1px;
    transform: translateY(-50%)
}

.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 {
    left: auto;
    right: 1px
}

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

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

    .breadcrumb-item.active {
        color: var(--text-default-disabled)
    }

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

    .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);
    align-items: center;
    width: 16px;
    height: 16px;
    font-size: 20px;
    display: flex
}

:is(html[lang=ar],html[dir=rtl]).breadcrumb-item:first-child {
    padding-left: 4px;
    padding-right: 0
}

: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;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

.notification__content {
    align-items: center;
    gap: var(--spacing-md);
    padding: 0 var(--spacing-3xl);
    flex-wrap: wrap;
    flex: 1;
    display: flex
}

.notification__icon {
    color: var(--controls-control-neutral-pressed);
    place-items: center;
    display: grid
}

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

.notification__dismiss {
    right: var(--spacing-3xl);
    position: absolute;
    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 {
    align-items: flex-start;
    gap: var(--size-8,8px);
    flex-direction: column;
    width: 100%;
    max-width: 334px;
    display: flex
}

.file-upload__input {
    clip: rect(0,0,0,0);
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    position: absolute;
    overflow: hidden
}

.file-upload__drop-area {
    padding: var(--spacing-3xl);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    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");
    flex-direction: column;
    width: 100%;
    display: flex
}

.file-upload__icon {
    color: var(--colors-gray-neutral-500);
    align-items: center;
    font-size: 32px;
    display: flex
}

.file-upload__content {
    text-align: center
}

.file-upload__instructions {
    color: var(--text-display);
    font: 500 16px/24px IBMPlexSans-Medium
}

.file-upload__formats {
    color: var(--text-primary-paragraph)
}

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

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

.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: 0;
        border-bottom: 1px solid var(--border-neutral-primary);
        border-radius: 0
    }

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

.file-upload__file-status--complete, .file-upload__file-status--error {
    align-items: center;
    font-size: 28px;
    display: flex
}

.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);
    white-space: nowrap;
    flex: 1;
    overflow: hidden
}

.file-upload__files-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    display: flex
}

.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 {
    justify-content: center;
    align-items: center;
    display: flex
}

.loading__circle {
    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: .5s linear 1ms infinite spin;
    position: relative
}

.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 {
    to {
        transform: rotate(360deg)
    }
}

.date-picker-root {
    border-radius: var(--radius-8,8px);
    background: var(--colors-base-white);
    gap: 15px;
    width: fit-content;
    padding: 16px;
    display: flex
}

.date-picker-root__quick-options .options-list {
    flex-direction: column;
    gap: 10px;
    min-width: 120px;
    margin-top: 20px;
    list-style: none;
    display: flex
}

    .date-picker-root__quick-options .options-list button {
        cursor: pointer;
        background: 0 0;
        border: 0;
        outline: none
    }

.date-picker-root__main__inputs {
    justify-content: space-between;
    gap: 32px;
    width: 100%;
    display: flex
}

    .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 {
    width: 100%;
    height: 40px
}

.date-picker-root__main__buttons {
    border-top: 1px solid gray;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    display: flex
}

.date-picker-root__main__content-wrapper {
    gap: 32px;
    display: flex
}

.date-picker {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 392px;
    display: inline-flex
}

.date-picker__date-grid, .date-picker__weekdays {
    flex-wrap: wrap;
    width: 392px;
    display: flex
}

.date-picker__navigator {
    align-items: center;
    width: 100%;
    display: flex
}

.date-picker__navigator-label {
    color: var(--colors-text-primary);
    flex: 1;
    padding-left: 20px
}

.date-picker__weekday {
    background-color: #fff0;
    border: 0;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    display: flex
}

.date-cell {
    cursor: pointer;
    background-color: #fff0;
    border: 0;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    display: flex
}

.date-cell__label {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-none);
    mix-blend-mode: multiply;
    width: 100%;
    height: 48px;
    color: var(--colors-text-primary);
    background-color: #fff0;
    flex-direction: column;
    display: flex
}

    .date-cell__label span {
        border-radius: var(--radius-full);
        place-items: center;
        width: 48px;
        height: 100%;
        display: grid
    }

.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 {
    border-radius: var(--radius-full);
    background-color: var(--text-success);
    color: var(--colors-base-white) !important
}

.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: "";
    background-color: var(--form-datecell-background-100);
    z-index: -1;
    border-radius: 50% 0 0 50%;
    width: 52px;
    height: 48px;
    position: absolute;
    top: 0;
    right: 0
}

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

[dir=rtl] .date-picker__navigator button {
    transform: rotate(180deg)
}

.progress-indicator__step {
    flex: 1;
    max-width: 200px;
    max-height: 200px;
    position: relative
}

.progress-indicator__step-content {
    gap: 8px
}

    .progress-indicator__step-content > .step-icon {
        border: 2px solid var(--stepper-button-upcomming);
        width: 32px;
        height: 32px;
        color: var(--stepper-button-upcomming);
        border-radius: 50%;
        place-items: center;
        display: grid
    }

    .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 {
        place-items: center;
        width: 32px;
        height: 32px;
        display: grid
    }

        .progress-indicator__step-content > .step-label .step-label--circle {
            border: 2px solid var(--stepper-button-upcomming);
            width: 100%;
            height: 100%;
            color: var(--stepper-button-upcomming);
            border-radius: 50%
        }

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

        .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 {
    background: var(--stepper-button-upcomming);
    width: calc(100% - 32px);
    height: 2px;
    display: block;
    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 {
    min-height: 128px;
    flex-direction: row !important
}

[data-alignment=vertical] .progress-indicator__step-connector {
    width: 2px;
    height: calc(100% - 32px);
    top: 32px;
    left: 16px
}

[dir=rtl] [data-alignment=vertical] .progress-indicator__step-connector {
    right: 16px
}

[data-alignment=vertical].progress-indicator {
    flex-direction: column;
    width: max-content
}

.step-label {
    place-items: center;
    width: 32px;
    height: 32px;
    display: grid
}

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

    .step-label .step-label--dot {
        background-color: var(--stepper-button-upcomming);
        border-radius: 50%;
        width: 8px;
        height: 8px;
        display: block
    }

    .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 {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-border-default,#cbd5e1);
    background: var(--colors-base-white);
    width: 100%
}

.menu-group {
    padding: var(--spacing-md);
    width: 100%
}

.menu-group__label {
    padding: var(--spacing-md);
    color: var(--colors-gray-neutral-500)
}

.menu-item {
    padding: var(--spacing-md);
    gap: var(--spacing-md);
    cursor: pointer;
    box-sizing: border-box;
    align-self: stretch;
    align-items: center;
    width: 100%;
    display: flex
}

.menu-item__icon {
    width: 24px;
    height: 24px
}

.menu-item__label {
    min-width: 100px;
    color: var(--Text-text-primary);
    flex: 1
}

.menu-item__trail-element {
    justify-content: center;
    align-items: center;
    display: flex
}

.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 {
    background-color: var(--border-border-default,#cbd5e1);
    width: 100%;
    height: 1px;
    display: block
}

.menu-item a, .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 {
    border-collapse: collapse;
    width: 100%;
    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 {
            border-right: 1px solid var(--table-cell-border);
            height: 48px;
            padding: var(--spacing-md,8px)var(--spacing-xl,16px);
            font-size: 14px
        }

            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 {
                justify-content: center;
                align-items: center;
                gap: 2px;
                display: flex
            }

    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) {
        background-color: var(--colors-gray-50);
        transition: all .2s ease-in-out
    }

    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)
    }

:is(html[lang=ar],html[dir=rtl]).azm-table {
    direction: ltr
}

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

    .textarea:hover {
        border-color: var(--form-field-border-hovered)
    }

    .textarea[data-error=true] {
        border-color: red
    }

    .textarea:after {
        content: "";
        background-color: var(--form-field-border-pressed);
        width: 0%;
        height: 2px;
        transition: width .2s ease-in-out;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%)
    }

.textarea__field {
    width: 100%;
    height: 100%;
    color: var(--form-field-text-filled);
    padding: var(--spacing-lg)var(--spacing-xl);
    resize: none;
    background-color: #fff0;
    border: 0;
    outline: 0;
    position: relative
}

    .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 {
        color: var(--colors-text-primary)
    }

    .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, .textarea--disabled .textarea__icon span, .textarea--disabled .textarea__prefix--subtle-text, .textarea--disabled .textarea__prefix--solid-text {
            color: var(--input-text-disabled)
        }

.textarea__icon {
    align-items: center;
    height: 100%;
    display: inline-flex
}

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

.textarea__feedback-icon {
    align-items: center;
    height: fit-content;
    display: inline-flex;
    position: absolute;
    top: 12px;
    right: 16px
}

    .textarea__feedback-icon span {
        z-index: 0;
        font-size: 20px;
        position: relative
    }

.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 {
        border: 12px solid #fff0;
        border-top: 0;
        border-bottom: 20px solid var(--colors-warning-100);
        border-radius: 0 !important;
        width: 0 !important;
        height: 0 !important;
        top: -1px !important;
        left: -2px !important;
        transform: scale(1) !important
    }

.textarea__feedback-icon--ring span:after {
    content: "";
    border-radius: var(--radius-full);
    z-index: -1;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.16)
}

[dir=rtl] .textarea__feedback-icon {
    left: 16px;
    right: auto
}

.textarea__dropdown-btn.open + .textarea__dropdown-list {
    z-index: 2;
    opacity: 1;
    padding-block: var(--spacing-md);
    pointer-events: auto;
    max-height: 376px;
    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 {
    background-color: var(--form-field-background-darker);
    border: 0
}

    .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 {
    z-index: 2;
    width: fit-content;
    position: relative
}

.dga-tooltip-main {
    border-radius: var(--radius-sm);
    background: var(--tooltip-background-light);
    opacity: 0;
    visibility: hidden;
    width: max-content;
    max-width: 240px;
    transition: opacity .2s;
    position: absolute
}

    .dga-tooltip-main:hover, .dga-tooltip:hover .dga-tooltip-main {
        opacity: 1;
        visibility: visible
    }

.dga-tooltip-main__wrapper {
    align-items: flex-start;
    gap: var(--tooltip-gap);
    padding: var(--tooltip-padding);
    display: flex;
    position: relative
}

.dga-tooltip-main__icon {
    color: var(--icon-neutral);
    align-items: center;
    font-size: 18px;
    display: flex
}

.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 {
    border-style: solid;
    position: absolute;
    left: 50%
}

    .dga-tooltip-main__beak[data-beak-direction=top-start] {
        border-width: 0 6px 6px;
        border-color: #fff0 #fff0 var(--tooltip-background-light)#fff0;
        top: 1px;
        left: 14px;
        transform: translateY(-100%)
    }

    .dga-tooltip-main__beak[data-beak-direction=top-center] {
        border-width: 0 6px 6px;
        border-color: #fff0 #fff0 var(--tooltip-background-light)#fff0;
        top: 1px;
        left: 50%;
        transform: translate(-50%,-100%)
    }

    .dga-tooltip-main__beak[data-beak-direction=top-end] {
        border-width: 0 6px 6px;
        border-color: #fff0 #fff0 var(--tooltip-background-light)#fff0;
        top: 1px;
        left: calc(100% - 14px);
        transform: translateY(-100%)
    }

    .dga-tooltip-main__beak[data-beak-direction=right-start] {
        border-width: 6px 0 6px 6px;
        border-color: #fff0 #fff0 #fff0 var(--tooltip-background-light);
        top: 8px;
        left: 100%
    }

    .dga-tooltip-main__beak[data-beak-direction=right-center] {
        border-width: 6px 0 6px 6px;
        border-color: #fff0 #fff0 #fff0 var(--tooltip-background-light);
        top: 50%;
        left: 100%;
        transform: translateY(-50%)
    }

    .dga-tooltip-main__beak[data-beak-direction=right-end] {
        border-width: 6px 0 6px 6px;
        border-color: #fff0 #fff0 #fff0 var(--tooltip-background-light);
        bottom: 0;
        left: 100%;
        transform: translateY(-8px)
    }

    .dga-tooltip-main__beak[data-beak-direction=bottom-start] {
        border-width: 6px 6px 0;
        border-color: var(--tooltip-background-light)#fff0 #fff0 #fff0;
        top: calc(100% - 1px);
        left: 14px
    }

    .dga-tooltip-main__beak[data-beak-direction=bottom-center] {
        border-width: 6px 6px 0;
        border-color: var(--tooltip-background-light)#fff0 #fff0 #fff0;
        top: calc(100% - 1px);
        left: 50%;
        transform: translate(-50%)
    }

    .dga-tooltip-main__beak[data-beak-direction=bottom-end] {
        border-width: 6px 6px 0;
        border-color: var(--tooltip-background-light)#fff0 #fff0 #fff0;
        top: calc(100% - 1px);
        left: calc(100% - 14px)
    }

    .dga-tooltip-main__beak[data-beak-direction=left-start] {
        border-width: 6px 6px 6px 0;
        border-color: #fff0 var(--tooltip-background-light)#fff0 #fff0;
        top: 8px;
        left: -5px
    }

    .dga-tooltip-main__beak[data-beak-direction=left-center] {
        border-width: 6px 6px 6px 0;
        border-color: #fff0 var(--tooltip-background-light)#fff0 #fff0;
        top: 50%;
        left: -5px;
        transform: translateY(-50%)
    }

    .dga-tooltip-main__beak[data-beak-direction=left-end] {
        border-width: 6px 6px 6px 0;
        border-color: #fff0 var(--tooltip-background-light)#fff0 #fff0;
        top: calc(100% - 14px);
        left: -5px;
        transform: translateY(-50%)
    }

.dga-tooltip-main[data-direction=top] {
    margin-bottom: 14px;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%)
}

.dga-tooltip-main[data-direction=left] {
    margin-right: 14px;
    top: 50%;
    right: 100%;
    transform: translateY(-50%)
}

.dga-tooltip-main[data-direction=bottom] {
    margin-top: 14px;
    top: 100%;
    left: 50%;
    transform: translate(-50%)
}

.dga-tooltip-main[data-direction=right] {
    margin-left: 14px;
    top: 50%;
    left: 100%;
    transform: translateY(-50%)
}

.dga-tooltip-item {
    cursor: pointer;
    width: fit-content
}

.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);
    align-items: flex-start;
    gap: var(--card-lg-gap);
    gap: var(--card-card-lg-gap);
    border-radius: var(--radius-lg);
    /*    background: var(--background-card);*/
    cursor: pointer;
    box-sizing: border-box;
    /*    border: 2px solid #fff;*/
    flex-direction: column;
    position: relative;
    overflow: hidden;

    background-color: var(--background-background-card) !important;
    color: var(--text-text-display);
    border: 1px solid var(--border-border-neutral-primary) !important;
}

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

.card--stroke {
    border: 1px solid var(--border-neutral-primary)
}

.card__image-container {
    border-radius: var(--radius-lg,16px);
    width: 100%;
    height: 200px;
    overflow: hidden
}

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

.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: "";
        background-color: var(--background-disabled);
        opacity: .3;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0
    }

    .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 .3s
}

    .expand-button[aria-expanded=true] .expand-icon {
        transform: rotate(180deg)
    }

.collapse-content {
    display: none
}

    .collapse-content.expanded {
        display: block
    }

.content-switcher {
    flex-direction: column;
    margin: 10px;
    display: flex
}

.content-switcher__items {
    flex-wrap: wrap;
    display: flex
}

.content-switcher__item {
    min-width: 76px;
    padding: var(--spacing-xs)10px;
    cursor: pointer;
    background: var(--colors-gray-neutral-100);
    color: var(--colors-2-text-primary,#161616);
    border: 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex
}

    .content-switcher__item:hover {
        background: var(--colors-gray-neutral-200,#e5e7eb)
    }

    .content-switcher__item:focus {
        z-index: 9;
        outline: none;
        box-shadow: 0 0 0 2px #000;
        border: 1px solid #fff !important
    }

.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 {
    color: #dba102;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: #fff0;
    width: min-content;
    font-size: 1.5rem;
    display: inline-flex;
    position: relative
}

.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 {
    pointer-events: none;
    transition: transform .15s cubic-bezier(.4,0,.2,1);
    display: flex
}

    .rating__star__label-icon > svg {
        -webkit-user-select: none;
        user-select: none;
        fill: currentColor;
        width: 1em;
        height: 1em;
        font-size: inherit;
        flex-shrink: 0;
        transition: fill .2s cubic-bezier(.4,0,.2,1);
        display: inline-block
    }

.rating__star__label-text, .rating__star__label-input {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

div.table-wrapper .azm-structured-table {
    border-collapse: collapse;
    width: 100%;
    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 {
            border-right: 1px solid var(--table-cell-border);
            text-align: left;
            height: 48px;
            padding: var(--spacing-md,8px)var(--spacing-xl,16px);
            color: var(--colors-gray-neutral-600);
            justify-content: space-between;
            align-items: center
        }

            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) {
        background-color: var(--colors-gray-50);
        transition: all .2s ease-in-out
    }

    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 {
        justify-content: start;
        align-items: center;
        gap: 10px;
        display: flex
    }

        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 {
    border-radius: var(--radius-md,8px);
    border: 1px solid var(--table-cell-border);
    padding: 0;
    overflow: hidden
}

.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 {
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    display: flex
}

.pagination__item {
    position: relative
}

    .pagination__item button {
        cursor: pointer;
        background-color: #fff0;
        border: none;
        place-items: center;
        width: 24px;
        height: 24px;
        display: grid
    }

        .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: "";
    border-radius: var(--radius-full,9999px);
    background: var(--Colors-SA-Flag-600,#1b8354);
    width: calc(100% - 8px);
    height: 3px;
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translate(-50%)
}

.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 {
        margin-left: 24px;
        list-style-type: lower-alpha
    }

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

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

    .list--unordered > ul {
        margin-left: 18px;
        list-style-type: disc
    }

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

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

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

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

.list--with-icon > ul {
    margin-left: 24px
}

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

.avatar--image img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.avatar--square {
    border-radius: var(--radius-8)
}

.avatar--120 {
    border-width: 4px;
    width: 120px;
    height: 120px
}

    .avatar--120 .avatar__text {
        text-transform: uppercase
    }

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

        .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 {
        justify-content: center;
        align-items: center;
        width: 56px;
        height: 56px;
        font-size: 56px;
        display: flex
    }

        .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 {
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        font-size: 40px;
        display: flex
    }

        .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 {
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        font-size: 32px;
        display: flex
    }

        .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 {
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        font-size: 32px;
        display: flex
    }

        .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 {
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        font-size: 24px;
        display: flex
    }

        .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 {
        justify-content: center;
        align-items: center;
        width: 16px;
        height: 16px;
        font-size: 16px;
        display: flex
    }

        .avatar--24 .avatar__icon > * {
            width: 100%;
            height: 100%;
            font-size: 16px
        }

.dga-divider {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 1px;
    display: flex
}

.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 {
    height: 32px;
    padding: var(--spacing-none)var(--spacing-lg);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex
}

.chip--lg {
    height: 32px
}

.chip--md {
    height: 24px
}

.chip--sm {
    height: 20px
}

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

.chip-icon {
    place-items: center;
    width: 16px;
    height: 16px;
    padding: 0;
    display: grid
}

    .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, .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%;
    margin: 40px calc(var(--thumb-size)/2);
    height: calc(var(--thumb-size) + 1.6rem);
    align-items: center;
    margin-inline: auto;
    padding-top: 1.6rem;
    display: flex;
    position: relative
}

.range-slider-input-wrapper {
    width: calc(100% + var(--thumb-size));
    margin: 0 calc(var(--thumb-size)/-2);
    height: var(--thumb-size);
    position: absolute;
    bottom: -15px
}

.range-slider-control-wrapper {
    width: 100%;
    height: var(--thumb-size);
    position: absolute;
    bottom: -15px
}

.range-slider-input {
    pointer-events: none;
    appearance: none;
    opacity: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 0;
    position: absolute
}

    .range-slider-input::-ms-track {
        appearance: none;
        background: #fff0;
        border: #fff0
    }

    .range-slider-input::-moz-range-track {
        appearance: none;
        background: #fff0;
        border: #fff0
    }

    .range-slider-input:focus::-webkit-slider-runnable-track {
        appearance: none;
        background: #fff0;
        border: #fff0
    }

    .range-slider-input::-ms-thumb {
        appearance: none;
        pointer-events: all;
        width: var(--thumb-size);
        height: var(--thumb-size);
        cursor: grab;
        background-color: red;
        border: 0;
        border-radius: 0
    }

        .range-slider-input::-ms-thumb:active {
            cursor: grabbing
        }

    .range-slider-input::-moz-range-thumb {
        appearance: none;
        pointer-events: all;
        width: var(--thumb-size);
        height: var(--thumb-size);
        cursor: grab;
        background-color: red;
        border: 0;
        border-radius: 0
    }

        .range-slider-input::-moz-range-thumb:active {
            cursor: grabbing
        }

    .range-slider-input::-webkit-slider-thumb {
        appearance: none;
        pointer-events: all;
        width: var(--thumb-size);
        height: var(--thumb-size);
        cursor: grab;
        background-color: red;
        border: 0;
        border-radius: 0
    }

        .range-slider-input::-webkit-slider-thumb:active {
            cursor: grabbing
        }

.range-slider-rail {
    width: 100%;
    height: var(--thumb-height);
    background: var(--background-neutral-100,#f3f4f6);
    border-radius: 3px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.range-slider-inner-rail {
    background: var(--background-primary,#1b8354);
    z-index: 1;
    border-radius: 3px;
    height: 100%;
    position: absolute
}

.range-slider-control {
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: var(--background-primary,#1b8354);
    margin-left: calc(var(--thumb-size)/-2);
    z-index: 2;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.range-slider-container h3 {
    color: var(--form-field-text-label,#161616);
    margin-bottom: 4px;
    font-family: IBMPlexSans-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px
}

.range-slider-note {
    align-items: center;
    gap: 10px;
    display: flex;
    position: absolute;
    bottom: -26px;
    left: -3px
}

    .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%;
    left: -31px;
    transform: translateY(-50%)
}

.range-slider-number_right {
    position: absolute;
    top: 50%;
    right: -31px;
    transform: translateY(-50%)
}

.circular-progress-bar {
    width: fit-content;
    position: relative
}

    .circular-progress-bar .circular-progress-bar__label {
        width: max-content;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
    }

    .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 {
    flex-direction: column;
    gap: 4px;
    display: flex
}

    .progress-wrapper h3 {
        color: var(--form-field-text-label,#161616);
        font-family: IBMPlexSans-Regular;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px
    }

    .progress-wrapper .progress-bar__note {
        align-items: center;
        gap: 10px;
        display: flex
    }

        .progress-wrapper .progress-bar__note .content p {
            color: var(--Text-text-primary-paragraph,#384250);
            margin: 0;
            font-family: IBMPlexSans-Regular;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal
        }

.progress-bar-container {
    background: var(--background-neutral-100,#f3f4f6);
    border-radius: 4px;
    width: 100%;
    position: relative;
    overflow: hidden
}

    .progress-bar-container.sm {
        height: 4px
    }

    .progress-bar-container.md {
        height: 8px
    }

    .progress-bar-container.lg {
        border-radius: 8px;
        height: 16px
    }

        .progress-bar-container.lg .progress-bar {
            border-radius: 8px
        }

    .progress-bar-container .progress-bar {
        color: #fff;
        border-radius: 4px;
        justify-content: flex-end;
        align-items: center;
        height: 100%;
        font-weight: 700;
        transition: width .5s ease-in-out;
        display: flex
    }

        .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;
            padding: 0 8px;
            font-family: IBMPlexSans-Regular;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal
        }

.dga-form-control {
    flex-direction: column;
    display: flex
}

    .dga-form-control > .dga-label {
/*        color: var(--form-field-text-label);*/
        margin-bottom: 8px
    }

.dga-search-box {
    width: 100%;
    min-width: 200px;
    height: 40px;
    padding: var(--spacing-none)var(--spacing-2);
    border-radius: var(--radius-sm);
    justify-content: flex-start;
    align-items: center;
    gap: var(--form-icon-enteredtext,8px);
    border: 1px solid var(--form-field-border-default);
    background: var(--form-field-background-default);
    display: flex;
    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__field {
    width: 100%;
    height: 100%;
    color: var(--form-field-text-focused);
    background-color: #fff0;
    border: 0;
    outline: 0
}

    .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 {
        color: var(--form-field-text-readonly)
    }

    .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, .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 {
    align-items: center;
    gap: 8px;
    display: flex
}

    .dga-search-box__actions .dga-divider--vertical {
        background-color: #d2d6db;
        width: 25px;
        height: 1px;
        transform: rotate(90deg)
    }

.dga-search-box__search-btn, .dga-search-box__action-btn {
    cursor: pointer;
    height: 100%;
    min-width: unset;
    background: #fff0;
    border: none;
    outline: none;
    place-items: center;
    display: grid
}

.dga-search-box__icon {
    align-items: center;
    height: 100%;
    display: flex
}

    .dga-search-box__icon span {
        color: var(--form-field-border-hovered);
        font-size: 20px
    }

.dga-search-box__feedback-icon {
    align-items: center;
    height: 100%;
    display: inline-flex
}

    .dga-search-box__feedback-icon span {
        z-index: 0;
        font-size: 20px;
        position: relative
    }

.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 {
        border: 12px solid #fff0;
        border-top: 0;
        border-bottom: 20px solid var(--colors-warning-100);
        border-radius: 0 !important;
        width: 0 !important;
        height: 0 !important;
        top: -1px !important;
        left: -2px !important;
        transform: scale(1) !important
    }

.dga-search-box__feedback-icon--ring span:after {
    content: "";
    border-radius: var(--radius-full);
    z-index: -1;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.16)
}

.dga-search-box__prefix, .dga-search-box__suffix {
    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;
    display: inline-flex
}

.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 {
    white-space: nowrap;
    display: inline-block
}

    .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 {
    transition: all .3s ease-in-out;
    transform: rotate(0);
    font-size: 30px !important
}

.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 {
        border: 4px solid var(--colors-base-black);
        background-color: #fff0;
        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 {
        border: 4px solid var(--colors-base-black);
        background-color: #fff0
    }

    .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);
    pointer-events: auto;
    max-height: 376px;
    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 {
    background: var(--form-field-background-lighter);
    border: 0
}

    .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 {
    background-color: var(--form-field-background-darker);
    border: 0
}

    .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 {
    align-items: center;
    gap: 10px;
    display: flex
}

.dga-metric {
    border-radius: var(--radius-lg,16px);
    flex-direction: column;
    align-items: flex-end;
    width: 360px;
    display: flex;
    box-shadow: 0 4px 8px -2px #1018281a,0 2px 4px -2px #1018280f
}

.dga-metric__head {
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
    padding: 16px 16px 0;
    display: flex
}

.dga-metric__head-content {
    align-items: center;
    gap: 8px;
    display: flex
}

.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 {
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    display: flex
}

.dga-metric[data-chart-size=small-chart] .dga-metric__content {
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
    width: 100%;
    margin-bottom: 24px;
    padding: 0 16px;
    display: flex
}

.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 {
    align-items: center;
    gap: 8px;
    display: flex
}

.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 {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
    padding: 0 16px;
    display: flex
}

.dga-metric__content-percentage {
    color: var(--Text-text-display,#1f2a37)
}

.dga-metric__content-change {
    align-items: center;
    gap: 8px;
    display: flex
}

.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 {
    margin-bottom: 24px;
    padding: 0 16px
}

.dga-metric__divider {
    background-color: var(--border-neutral-primary);
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 1px;
    display: flex
}

.dga-metric__actions {
    width: 100%;
    padding: var(--spacing-xl,16px);
    justify-content: space-between;
    align-items: center;
    display: flex
}

.dga-metric__actions--primary {
    margin-left: auto
}

dga-second-nav-header .wrapper {
    height: 40px;
    max-height: 40px;
    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;
    position: relative
}

dga-second-nav-header .container {
    height: 100%;
    padding: 0 var(--spacing-4xl);
    justify-content: space-between;
    align-items: center;
    display: flex
}

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-style: solid;
    border-bottom-width: 1px
}

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 {
    flex-grow: 1;
    align-items: center;
    display: flex
}

dga-second-nav-header .actions {
    align-items: center;
    display: flex
}

dga-second-nav-header .items-container {
    justify-content: space-evenly;
    align-items: center;
    gap: var(--spacing-xl);
    display: flex
}

dga-second-nav-header dga-second-nav-header-item {
    align-items: center;
    gap: var(--spacing-xs);
    display: flex
}

.dga-label {
/*    color: var(--form-field-text-label,#161616);*/
    gap: 4px;
    display: flex
}

    .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 {
    white-space: nowrap;
    vertical-align: top;
    width: 100%;
    height: auto;
    display: inline-block;
    position: relative;
    overflow: hidden
}

.slider-list {
    transition: transform 1s ease-in-out;
    display: flex
}

.card-wrapper {
    vertical-align: top;
    white-space: normal;
    outline: none;
    min-height: 1px;
    margin: 0;
    padding: 0;
    font-family: Poppins,sans-serif;
    display: inline-block
}

.example-card {
    color: #fff;
    text-align: center;
    background: #f9004d;
    border-radius: 10px;
    margin: 10px;
    padding: 10%;
    font-family: Poppins,sans-serif;
    font-size: 36px;
    font-weight: 100;
    line-height: 100px;
    position: relative
}

.dga-helper-text {
    align-items: center;
    gap: 8px;
    display: flex
}

.dga-helper-text--error {
    color: var(--text-error)
}

.dga-helper-text span {
    place-items: center;
    display: grid
}

.shadows-container {
    width: 2240px;
    padding: var(--spacing-none);
    align-items: flex-start;
    gap: var(--spacing-7xl);
    display: flex
}

.shadows-box {
    max-width: 256px;
    height: 240px;
    padding: var(--spacing-3xl);
    align-items: flex-start;
    gap: var(--spacing-none);
    border-radius: var(--radius-xl);
    border: 1px solid var(--colors-border-primary);
    background: var(--colors-bg-primary);
    flex: 1 0;
    display: flex
}

.header-nav__menu, .header-nav__actions {
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.header-menu__item {
    height: 72px;
    padding: var(--spacing-md)var(--spacing-3xl);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-xs);
    background-color: #fff0;
    display: inline-flex
}

    .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);*/
        background: var(--button-button-background-neutral-pressed);
    }

        .header-menu__item:active:after {
            background-color: var(--colors-gray-neutral-950);
            display: block
        }

.header-menu__item-label, .header-menu__item-icon {
    color: var(--text-default)
}

.header-menu__item-icon {
    color: var(--text-default);
    align-items: center;
    display: flex
}

.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: "";
            z-index: 2;
            border-radius: var(--radius-xs);
            background-color: #fff0;
            border: 1px solid #fff;
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            bottom: 0;
            left: 0
        }

    .header-menu__item--active:active:before {
        border: 0
    }

    .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 {
    background-color: #fff0;
    outline: none;
    position: relative
}

    .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 {
    padding: var(--spacing-4xl)var(--spacing-none);
    align-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-3xl);
    flex-wrap: wrap;
    align-self: stretch;
    width: 100%;
    display: flex
}

.sub-menu__link {
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    gap: var(--spacing-xl);
    background-color: #fff0;
    align-items: center;
    min-width: 320px;
    display: flex
}

    .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 {
        outline: 2px solid var(--colors-base-black);
        background-color: #fff0
    }

    .sub-menu__link:active {
        background-color: var(--button-background-neutral-pressed);
        outline: none
    }

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

.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);
    outline: none;
    text-decoration: none
}

.sub-menu__link--on-color.sub-menu__link:focus {
    outline: 2px solid var(--colors-base-white);
    background-color: #fff0
}

.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-label, .sub-menu__link--on-color .sub-menu__link-helper {
    color: var(--text-oncolor-primary)
}

.sidepanel {
    background-color: var(--colors-base-white);
    z-index: 99;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    min-height: 100vh;
    max-height: 100vh;
    transition: all .4s ease-in-out;
    display: flex;
    position: fixed;
    top: 0;
    overflow-y: auto
}

    .sidepanel.collapsed {
        transform: translate(calc((100% + var(--spacing-xl) + var(--spacing-xl) + 8px + 2*var(--spacing-xs))*-2))
    }

    .sidepanel::-webkit-scrollbar {
        height: 100px;
        width: calc(8px + 2*var(--spacing-xs))
    }

    .sidepanel::-webkit-scrollbar-track {
        padding: var(--spacing-xs);
        background-color: #fff0
    }

    .sidepanel::-webkit-scrollbar-thumb {
        border-radius: var(--radius-full);
        border: var(--spacing-xs)solid #fff0;
        background-color: var(--border-neutral-primary);
        mix-blend-mode: multiply;
        background-clip: content-box;
        height: 100px
    }

.sidepanel__nav-header {
    margin-inline: var(--spacing-4xl);
    margin-block: var(--spacing-lg)
}

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

.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 {
    padding: var(--spacing-md)var(--spacing-xl);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--colors-gray-neutral-600);
    border-radius: var(--radius-sm);
    mix-blend-mode: multiply;
    border: 2px solid #fff0;
    outline: none;
    align-self: stretch;
    text-decoration: none;
    display: flex;
    position: relative
}

    .sidepanel__menu-tab:after, .sidepanel__submenu-tab:after {
        content: "";
        width: 6px;
        height: calc(100% - 2*var(--spacing-sm));
        border-radius: var(--radius-full);
        background-color: var(--colors-brand-600);
        display: none;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%)
    }

    .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 {
            background-color: var(--colors-gray-neutral-400);
            display: block
        }

    .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 {
        color: var(--colors-gray-modern-950);
        background-color: #fff0;
        font-weight: 700
    }

        .sidepanel__menu-tab.selected:after, .selected.sidepanel__submenu-tab:after, .sidepanel__menu-tab.active:after, .active.sidepanel__submenu-tab:after {
            background-color: var(--colors-brand-600);
            display: block
        }

        .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 {
            background-color: var(--colors-gray-neutral-600);
            display: block
        }

    .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 {
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    display: flex
}

.sidepanel__menu-tab-label {
    flex: 1
}

.sidepanel__menu-tab-arrow {
    font-size: 20px;
    transition: all .4s ease-in-out;
    transform: rotate(0)
}

.sidepanel__submenu-list {
    max-height: 0;
    transition: max-height .3s;
    display: block;
    overflow-y: hidden;
    opacity: 1 !important;
    padding-block: 0 !important
}

.sidepanel__submenu-tab {
    white-space: nowrap;
    justify-content: flex-start
}

.sidepanel__submenu-tab-label {
    flex: 1
}

.sidepanel__submenu-tab-icon {
    justify-content: center;
    align-items: center;
    font-size: 20px;
    display: flex
}

.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 {
            background-color: hsla(var(--colors-alpha-white)/40%);
            display: block
        }

    .sidepanel--bg-brand .sidepanel__menu-tab:focus, .sidepanel--bg-brand .sidepanel__submenu-tab:focus {
        border-color: var(--colors-base-white);
        background-color: #fff0
    }

        .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 {
            background-color: var(--colors-base-white);
            display: block
        }

    .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 {
            background-color: hsla(var(--colors-alpha-white)/60%);
            display: block
        }

.sidepanel--border {
    border-right: 1px solid var(--colors-border-primary)
}

.sidepanel--overlay, .sidepanel--overlay-gray {
    background: hsla(var(--colors-alpha-white)/80%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 4px 16px 24px #0000001a
}

.sidepanel--overlay-brand {
    background: var(--colors-brand-800);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 48px -12px #1018282e
}

.table-of-content {
    width: 228px;
    padding: var(--container-padding-desktop)var(--spacing-none);
    align-items: flex-start;
    gap: var(--spacing-md);
    flex-direction: column;
    display: flex
}

.table-of-content__header {
    align-items: flex-start;
    gap: var(--spacing-md);
    flex-direction: column;
    display: flex
}

.table-of-content__tab-list, .table-of-content__tab-sublist {
    padding: 0;
    list-style: none
}

    .table-of-content__tab-sublist .table-of-content__tab {
        padding-left: calc(var(--spacing-xl)*2);
        position: relative
    }

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

.table-of-content__tab-sub-sublist {
    padding: 0;
    list-style: none
}

    .table-of-content__tab-sub-sublist .table-of-content__tab {
        padding-left: calc(var(--spacing-xl)*3);
        position: relative
    }

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

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

.table-of-content__tab {
    min-width: 140px;
    padding: 0 var(--spacing-md,8px)0 var(--spacing-xl);
    border-radius: var(--radius-xs);
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative
}

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

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

.table-of-content__tab:hover .table-of-content__tab-prefix {
    background-color: var(--background-neutral-300);
    display: block
}

.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 {
        background-color: var(--background-primary);
        display: block
    }

    .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 {
    background-color: var(--controls-control-border);
    display: block
}

.table-of-content__tab.pressed .table-of-content__tab-label {
    color: var(--background-neutral-800)
}

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

    .table-of-content__tab.pressed:before {
        background-color: var(--background-neutral-800)
    }

*, :after, :before {
    box-sizing: inherit;
    margin: 0;
    padding: 0
}

* {
    box-sizing: border-box
}

html {
/*    font-size: 62.5%*/
}

body {
    margin: var(--spacing-none);
    padding: var(--spacing-none);
    background-color: var(--colors-white);
    font-family: IBMPlexSans-Regular;
    overflow: auto
}

a, a:active, a:focus, a:visited {
/*    color: inherit;*/
    text-decoration: none
}

    a:focus, a:focus-visible {
        box-shadow: none;
        outline: 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 {
    font: 400 16px/24px IBMPlexSans-Regular
}

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

.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 {
    font: 400 14px/20px IBMPlexSans-Regular
}

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

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

.dga-search-box--lg .input__field::-moz-placeholder {
    font: 400 14px/20px IBMPlexSans-Regular
}

.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 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant: normal;
    text-rendering: auto;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    position: relative;
    font-family: hgi-bulk-rounded !important
}

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

.px-2 {
    padding-inline: 2px
}

.py-2 {
    padding-block: 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
}

.spacing-hor-4 {
    height: 4px
}

.spacing-vert-4 {
    width: 4px
}

.px-4 {
    padding-inline: 4px
}

.py-4 {
    padding-block: 4px
}

.pl-4 {
    padding-left: 4px
}

.pr-4 {
    padding-right: 4px
}

.pb-4 {
    padding-bottom: 4px
}

.mx-4 {
    margin-inline: 4px
}

.my-4 {
    margin-block: 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
}

.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 {
    flex-direction: column;
    display: flex
}

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

.flex-center-y {
    align-items: center;
    display: flex
}

.flex-center-x {
    justify-content: center;
    display: flex
}

.flex-between {
    justify-content: space-between;
    display: flex
}

.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 {
    background: hsla(var(--colors-alpha-black)/20%);
    width: 1px;
    height: 48px;
    margin-inline: var(--spacing-xl)
}

.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: 0 solid #e5e7eb
}

:before, :after {
    --tw-content: ""
}

html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: #fff0;
    font-family: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    line-height: 1.5
}

body {
    line-height: inherit;
    margin: 0
}

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: unset;
    font-weight: unset;
    font-family: unset;
    line-height: unset;
}

a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit
}

b, strong {
    font-weight: bolder
}

code, kbd, samp, pre {
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button, input, optgroup, select, textarea {
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    outline: none;
    margin: 0;
    padding: 0
}

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 {
    height: auto
}

::-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 {
    margin: 0;
    padding: 0;
    list-style: none
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
}

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 {
    vertical-align: middle;
    display: block
}

img, video {
    max-width: 100%;
    height: auto
}

[hidden] {
    display: none
}

*, :before, :after, ::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: #3b82f680;
    --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, #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);*/
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex
}

@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-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-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
}

.aspect-\[16\/9\] {
    aspect-ratio: 16/9
}

.aspect-square {
    aspect-ratio: 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-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-\[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-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: 100%
}

.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-\[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
}

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

.list-disc {
    list-style-type: disc
}

.list-none {
    list-style-type: none
}

.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(.25rem*var(--tw-space-x-reverse));
    margin-left: calc(.25rem*calc(1 - var(--tw-space-x-reverse)))
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.5rem*var(--tw-space-x-reverse));
    margin-left: calc(.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(.5rem*calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.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]), .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]), .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 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

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

.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,#ffffff4d)
}

.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-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-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: .1
}

.bg-opacity-25 {
    --tw-bg-opacity: .25
}

.bg-opacity-50 {
    --tw-bg-opacity: .5
}

.bg-cover {
    background-size: cover
}

.bg-center {
    background-position: 50%
}

.bg-right {
    background-position: 100%
}

.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)
}

.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)
}

.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-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-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-\[\#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 #0000001a,0 1px 2px -1px #0000001a;
    --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 #00000040;
    --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 #1018281a,0px 2px 4px -2px #1018280f;
    --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 #0000001a,0 4px 6px -4px #0000001a;
    --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 #0000001a,0 2px 4px -2px #0000001a;
    --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 #0000000d;
    --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 #0000001a,0 8px 10px -6px #0000001a;
    --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-offset: 2px;
    outline: 2px solid #fff0
}

.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,-webkit-backdrop-filter,backdrop-filter;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4,0,.2,1)
}

.transition-all {
    transition-property: all;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4,0,.2,1)
}

.transition-opacity {
    transition-property: opacity;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4,0,.2,1)
}

.transition-transform {
    transition-property: transform;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(.4,0,.2,1)
}

.delay-500 {
    transition-delay: .5s
}

.duration-300 {
    transition-duration: .3s
}

.duration-500 {
    transition-duration: .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-offset: 2px;
    outline: 2px solid #fff0
}

.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 (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
    }

    .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(33.3333% - 16px)
    }

    .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-\[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(33.3333% - 10.6667px)
    }

    .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) {
    .\32 xl\:top-20 {
        top: 5rem
    }

    .\32 xl\:col-span-3 {
        grid-column: span 3/span 3
    }

    .\32 xl\:min-w-\[100px\] {
        min-width: 100px
    }

    .\32 xl\: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))
    }

    .\32 xl\:grid-cols-3 {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

    .\32 xl\:grid-cols-\[1\.5fr_1fr\] {
        grid-template-columns: 1.5fr 1fr
    }

    .\32 xl\:flex-row {
        flex-direction: row
    }

    .\32 xl\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

@media (min-width: 1600px) {
    .\33 xl\:mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .\33 xl\:max-w-\[1280px\] {
        max-width: 1280px
    }
}

@media (min-width: 1800px) {
    .\34 xl\:mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .\34 xl\: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 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant: normal;
    text-rendering: auto;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    position: relative;
    font-family: hgi-stroke-rounded !important
}

.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 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant: normal;
    text-rendering: auto;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    position: relative;
    font-family: hgi-solid-rounded !important
}

.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 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant: normal;
    text-rendering: auto;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    position: relative;
    font-family: hgi-duotone-rounded !important
}

    .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, .header-nav__main a:visited {
/*    color: inherit*/
}

.file-upload__file-remove-btn {
    min-width: unset !important
}

.filteration__block-title {
    margin-bottom: var(--spacing-md);
    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);
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: relative
}

.filteration__selected-filters {
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: center;
    min-height: 40px;
    display: flex
}

.filteration__panel {
    animation: .3s slideDown
}

.filteration__panel--open {
    top: 60%
}

.filteration__panel {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    z-index: 1000;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-neutral-primary);
    background: var(--background-white);
    width: 100%;
    max-width: var(--width-xxs);
    align-items: start;
    gap: var(--spacing-md);
    opacity: 0;
    visibility: hidden;
    flex-direction: column;
    max-height: 75vh;
    display: flex;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    overflow-y: auto;
    box-shadow: 0 10px 15px -3px #0000000d,0 4px 6px -2px #00000008
}

    .filteration__panel.is-visible {
        opacity: 1;
        visibility: visible
    }

.filteration__block {
    width: 100%;
    padding: var(--spacing-md);
    transition: all .3s
}

.filteration__actions {
    justify-content: center;
    gap: var(--spacing-md);
    border-top: 1px solid var(--color-neutral-200);
    width: 100%;
    display: flex
}

.filteration__block-content--chips {
    flex-flow: wrap;
    gap: 20px
}

.filteration__block-content {
    flex: 1;
    width: 100%;
    transition: max-height .3s ease-in-out;
    display: flex
}

.filteration__block-actions {
    margin-top: 22px;
    margin-bottom: 30px
}

.filteration__divider {
    background: var(--border-neutral-primary);
    width: 100%;
    height: 1px
}

.filteration {
    gap: var(--spacing-xl);
    flex-direction: column;
    width: 100%;
    display: flex;
    position: relative
}

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 {
    border-color: var(--colors-gray-neutral-700);
    background-color: var(--colors-base-white);
    color: var(--colors-text-placeholder);
    box-shadow: none !important;
    outline: none !important
}

.pagination button {
    padding: .3em .6em;
    min-width: auto !important
}

.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 {
    z-index: 2;
    pointer-events: none;
    justify-content: center;
    align-items: center;
    display: none;
    position: absolute;
    inset: 0
}

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

.dga-loading--xl {
    width: 40px;
    height: 40px
}

.dga-loading__circle {
    box-sizing: border-box;
    border: 4px solid #fff0;
    border-top-color: var(--background-primary,#005c9f);
    mix-blend-mode: multiply;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: .7s linear infinite spin
}

@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 {
    color: #0d121c;
    line-height: 1.4
}

.ms-rtestate-field p, p.ms-rteElement-P {
    line-height: 24px
}

label {
    margin-bottom: 8px
}

.menu-item:focus {
    border: 2px solid var(--border-black);
    background-color: #fff;
    outline: none
}

.feedback-error-wrapper {
    padding-top: 8px;
    gap: 16px !important
}

.switch-wrapper:focus {
    outline: 2px solid var(--border-black)
}

a.header-menu__item-label:focus {
    text-align: center;
    outline-offset: 4px;
    outline: none;
    justify-content: center;
    align-items: center;
    height: 90%;
    display: flex
}

.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);
    opacity: 1;
    outline-offset: 2px;
    width: 32px;
    height: 32px
}

.radio-main input:focus {
    outline: 2px solid var(--colors-base-black,#0d121c);
    opacity: 1;
    outline-offset: 2px;
    width: 24px;
    height: 24px
}

.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);
    transition: transform 50ms ease-out,background-color .1s ease-in;
    transform: scale(.96)
}

.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, .radio--brand input:not(:checked):active ~ .radio-container {
    background-color: var(--colors-gray-300,#cecfd2);
    border-color: var(--colors-gray-neutral-600,#4d5761);
    transition: transform 50ms ease-out,background-color .1s ease-in;
    transform: scale(.96)
}

.accordion-item__header:focus-within {
    border: 2px solid #000
}

.ContentArea .ms-webpartzone-cell {
    margin: auto
}

#map {
    float: left;
    direction: rtl;
    width: 70%;
    height: 500px
}

#locations-list {
    float: right;
    direction: rtl;
    width: 28%;
    height: 550px;
    padding: 10px;
    overflow-y: auto
}

.location-item {
    cursor: pointer;
    text-align: right;
    border: 1px solid #ddd;
    margin: 5px 0;
    padding: 8px;
    height: auto !important
}

    .location-item:hover {
        background: var(--button-background-neutral-default)
    }

.active1 {
    background: #fff0;
    outline: 2px solid #000
}

select {
/*    text-align: right;*/
    width: 100%;
    margin-bottom: 10px;
    padding: 5px
}

.leaflet-popup-content {
    text-align: right;
    direction: rtl
}

.dropdown__btn:hover, .dropdown:hover {
    border-color: var(--form-field-border-hovered)
}

.arrow-flipped {
    transition: transform .3s;
    transform: rotate(180deg)
}

.ms-rtestate-field h3, h3.ms-rteElement-H3 {
    line-height: 1.75
}

#success-message-conatact {
    padding-top: 8px
}

    #success-message-conatact p {
        margin: 0 !important
    }

.card-row a[href="/Arabic/Pages/All-FAQ.aspx"]:hover, .card-row a[href="/Arabic/Pages/contactus_form.aspx"]:hover, .mr-font-size {
    text-decoration: none
}

.home-page-container a:has(button):hover {
    text-decoration: none
}

.news-events-container a:has(button):hover {
    text-decoration: none
}

.VicePresidencies a:has(button):hover {
    text-decoration: none
}

a:has(.btn--primary-brand) {
    text-decoration: none
}

#contact-form .error-wrapper {
    gap: 16px
}

.checkbox textarea {
    height: 100px
}

#contact-form .item label p {
    margin: 0
}

#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 {
    margin: 0;
    color: #384250 !important
}

.AboutUs-Wrapper .dga-featured-icon, .AboutUs-Wrapper .dga-featured-icon img {
    background: 0 0 !important;
    width: 24px !important;
    height: 24px !important
}

.vision2030 .ar-layout .AboutUs-Wrapper .card-gb {
    color: #0d121c;
    background: 0 0;
    border: 0
}

.card-lgb-wrapper div {
    background-color: #0000 !important;
    border: 1px solid #d2d6db !important;
    padding: 16px !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 {
    grid-template-columns: repeat(4,auto);
    justify-content: center
}

@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: 0
}

.ms-rtestate-field:has(#map) {
    display: flex
}

@media (max-width: 540px) {
    .ms-rtestate-field:has(#map) {
        flex-direction: column-reverse
    }

    #locations-list, #map {
        width: 90%
    }
}

.nav {
    -ms-flex-wrap: wrap;
    white-space: nowrap;
    scroll-behavior: smooth;
    flex-wrap: nowrap;
    width: 99%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    overflow-x: auto
}

#itemTitle {
    line-height: 1.6
}


.tabs-list__item--active:after {
    background-color: var(--border-primary)
}

.skip-link {
    color: #fff;
    z-index: 1000;
    background-color: #004085;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 16px;
    text-decoration: none;
    transition: transform .3s;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%)
}

    .skip-link:focus {
        outline: 2px solid #fff;
        transform: translateY(0)
    }

.btn--transparent {
    outline: 1px solid hsla(var(--colors-alpha-white)/30%) !important
}

    .btn--transparent:hover {
        background-color: rgb(255 255 255/var(--tw-bg-opacity)) !important;
        --tw-bg-opacity: .2 !important
    }

.sectionPrevNextBtnDiv .btn--transparent:hover {
    --tw-bg-opacity: .2;
    background-color: var(--colors-gray-300) !important
}

.sectionPrevNextBtnDiv button {
    opacity: 1;
    border: 1px solid var(--colors-gray-300);
    background-color: var(--colors-white);
    border-radius: 4px;
    min-width: 40px;
    height: 40px;
    position: relative
}

.carousel-indicators li {
    background-color: var(--colors-gray-200);
    border-radius: var(--swiper-pagination-bullet-border-radius,50%);
    width: 15px;
    height: 15px
}

    .carousel-indicators li:hover {
        background-color: var(--colors-brand-700)
    }

.carousel-indicators {
    bottom: 1.5% !important
}

.homepage-news-calendar-container {
    gap: var(--spacing-7xl)
}

.homepage-news-container {
    gap: var(--spacing-3xl)
}

.event-date .day {
    font-size: var(--Display-xsF);
    color: #384250
}

.event-date span.month {
    color: #384250;
    font-size: var(--Text-smF)
}

.event-date span.month-arabic {
    font-size: 12px
}

.location-event-icon {
    width: 15px;
    height: 15px
}

.location-event-icon-anime {
    background-image: url("../images/mujallidf_images/location green.svg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 15px;
    height: 15px;
    transition: background-image .3s
}

    .location-event-icon-anime:hover {
        background-image: url("../images/mujallidf_images/location gray.svg")
    }

.event-section {
    background-color: var(--colors-primary-sa-flag-50)
}

.btn-icon:hover .event-section {
    background-color: var(--colors-green-700)
}

.card-news-homepage {
    max-width: 100%;
    height: 550px;
    padding-bottom: 60px
}

.event-title-arabic {
    align-items: flex-start
}

.card-news-homepage-arabic {
    padding-bottom: 120px
}

#servicesSlideshow .card {
    max-width: 200px;
    height: 200px;
    max-height: 200px
}

#servicesSlideshow .card-title {
    text-align: center;
    float: none
}

.servicesSlideshow-arabic .card {
    max-height: 300px !important
}

.homepage-news-calendar-container {
    background-color: var(--colors-gray-100);
    padding: 20px 15%
}

.home-page-event-container, .home-page-news-box .card, #servicesSlideshow .card:hover {
    border: 1px solid var(--colors-gray-300)
}

.gold-line {
    background-color: var(--colors-secondary-gold-600-primary);
    height: 8px
}

.ksau-row.service-section {
    padding: 50px 15%
}

.ksau-bgcolor-white {
    background-color: #fff
}

.ksau-box-seperator.ksau-row-seperator > [class*=col-]:before {
    content: "";
    background-color: #f9fafa;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0
}

.ksau-box-seperator .featured-icon-box {
    padding: 41px 31px 31px
}

.ksau-bgcolor-grey, .sidebar .ksau-bgcolor-grey > .ksau-bg-layer, .ksau-bgcolor-grey > .ksau-bg-layer {
    background-color: #f9fafa
}

.featured-icon-box .featured-icon {
    margin-left: auto;
    margin-right: auto;
    transition: all .5s ease-in-out;
    display: block
}

.featured-icon-box .ksau-icon {
    margin-bottom: -10px
}

.featured-icon {
    width: 44px;
    min-width: 44px;
    height: 44px
}

.ksau-icon.ksau-icon_element-size-lg {
    width: 60px;
    height: 58px;
    line-height: 60px
}

.featured-icon-box.top-icon .featured-content {
    padding-top: 14px
}

.tex_gray_p {
    color: #939598;
    font-size: 18px
}

.featured-title h4 {
    color: #006c41;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    font-weight: 600;
    display: block
}

.featured-icon-box.featured-icon-hover:hover .ksau-icon {
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    transform: translateY(-8px)
}

.hero-v2 {
    z-index: 1;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative
}

    .hero-v2 .title {
        color: var(--colors-base-white);
        flex-direction: column;
        justify-content: end;
        height: 55vh;
        display: flex
    }

        .hero-v2 .title h1 {
            color: var(--colors-base-white);
            font: 600 60px/72px IBMPlexSans-SemiBold
        }

        .hero-v2 .title p {
            font: 600 20px/30px IBMPlexSans-SemiBold
        }

    .hero-v2:before {
        content: "";
        z-index: -1;
        background: linear-gradient(#0000,#006c41 80%);
        width: 100%;
        height: 50%;
        position: absolute;
        bottom: 0
    }

.breadcrumb-item + .breadcrumb-item:before {
    display: none
}

.breadcrumb {
    background-color: #f9fafb
}

.accordion-item__body {
    opacity: 0;
    max-height: 0;
    transition: max-height .3s,opacity .3s;
    overflow: hidden;
    display: block !important
}

.accordion-item__header.active .accordion-item__arrow {
    transition: transform .1s;
    transform: rotate(180deg)
}

.accordion-item__header.active + .accordion-item__body {
    opacity: 1;
    flex-direction: column;
    max-height: 10000px !important;
    padding-top: 16px !important;
    padding-bottom: 24px !important
}

.hero-v2 .title-arabic, .accordion-list-arabic {
    text-align: right
}

.green-line {
    background-color: var(--colors-green-600);
    height: 2px;
    margin: 0 !important
}

.search-box {
    z-index: 4
}

#servicesSlideshow {
    width: 100%;
    max-width: 62%;
    margin: 0 auto
}

.homepage-news-calendar-container {
    background: url(/_catalogs/masterpage/NewKSAUPortal/assets/images/mujallidf_images/bg_logo_bat-removebg-preview.png) 3% 30%/contain no-repeat;
    background-color: var(--colors-base-white)
}

.service-section-white {
    background-color: #fff
}

.service-section .featured-icon-box {
    height: 250px;
    padding: 10%
}

.owl-carousel .owl-item img {
    margin-left: auto;
    margin-right: auto;
    width: 50% !important
}

.service-pattern {
    opacity: .03;
    background-image: url(/_catalogs/masterpage/NewKSAUPortal/assets/images/mujallidf_images/1-03.png);
    margin-top: 5px;
    right: 12%
}

.gold-vertical-line {
    background: var(--colors-secondary-gold-600-primary);
    width: 5px;
    height: 28px
}

.aboutus-pattern {
    z-index: -1;
    right: 10%
}

#servicesSlideshow .owl-nav .owl-prev:hover, #servicesSlideshow .owl-nav .owl-next:hover {
    background-color: var(--colors-gray-neutral-200)
}

.hideCity {
    display: none
}

.region-contactus .dropdown__btn:hover {
    border-color: var(--form-field-border-hovered) !important
}

.region-contactus-div {
    flex-wrap: wrap
}

#servicesSlideshow .owl-nav .owl-prev, #servicesSlideshow .owl-nav .owl-next {
    color: var(--icon-default);
    background-color: var(--background-body);
    aspect-ratio: 1;
    cursor: pointer;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    transition: background-color .3s;
    display: flex;
    position: absolute;
    top: 40%;
    display: block !important
}

#servicesSlideshow .owl-nav .owl-next {
    left: 100%
}

#servicesSlideshow .owl-nav .owl-prev {
    right: 100%
}

.event-section-grey {
    background-color: var(--colors-gray-100) !important
}

.homepage-news-container .tag {
    width: 20%;
    margin-top: 20px
}

.home-page-event-container .event-title-homepage {
    width: 150%
}

.breadcrumb-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: medium
}

    .breadcrumb-wrapper a:hover {
        color: var(--colors-green-600)
    }

.page-title-header {
    color: var(--colors-green-700) !important
}

.news-list .card {
    max-width: unset
}

.card {
    cursor: auto
}

.ksau-client.clients-slide {
    display: none !important
}

.admission-straem-box .admission-straem1-inner-box:hover {
    border: 1px solid var(--colors-green-700)
}

.admission-straem-box ul {
    list-style: outside
}

.card__image-container img {
    object-fit: cover;
    width: 100%;
    max-width: 100%;
    height: auto
}

.ms-webpart-chrome-vertical {
    display: table-row
}

.ms-webpart-chrome-fullWidth {
    min-width: 100%
}

.testimonials {
    position: relative
}

    .testimonials.ksau-testimonial-box-view-style5 .testimonial-content {
        padding: 0
    }

    .testimonials .testimonial-content {
        line-height: 1.6
    }

    .testimonials .testimonial-img {
        z-index: 9;
        text-align: center;
        width: 150px;
        height: 150px;
        margin: 0 auto;
        display: inline-block;
        position: relative
    }

        .testimonials .testimonial-img img {
            border: 4px solid #f4f1f1;
            border-radius: 50%;
            width: 100%;
            height: auto;
            transition: opacity .4s;
            -webkit-transform: translateZ(0);
            transform: translateZ(0) !important
        }

    .testimonials.ksau-testimonial-box-view-style5 .testimonial-content blockquote {
        color: var(--colors-text-primary);
        border-left: none;
        font-size: 16px;
        line-height: 24px
    }

.star-ratings {
    letter-spacing: 1px;
    width: auto;
    margin: 0;
    font-size: 10px
}

    .star-ratings ul {
        margin: 0;
        padding: 0
    }

        .star-ratings ul li {
            color: #fd4;
            font-size: 13.8px;
            display: inline-block
        }

.testimonials .testimonial-caption h5 {
    font-size: 18px;
    line-height: 28px
}

.testimonials .testimonial-caption span {
    font-size: 14px;
    line-height: 20px
}

.owl-carousel .item .testimonials img {
    width: 100% !important
}

.about-alumni a:hover {
    color: #000;
    text-decoration: none
}

.about-alumni .card:hover {
    border: 2px solid #eee
}

.about-alumni .card {
    max-width: 95%
}

.dar-student-guide td {
    border: 1px solid #eee;
    padding: 10px;
    font-size: 16px
}

.dar-student-guide a {
    color: var(--text-primary) !important
}

.dar-student-guide table ul {
    margin-left: 50px;
    font-size: 16px;
    list-style: outside
}

.campus a:hover {
    color: #000
}

.campus .card {
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 130px
}

    .campus .card:hover {
        border: 2px solid #eee
    }

.student-services .card {
    height: 536px;
    margin-bottom: 20px;
    margin-left: 10%;
    margin-right: 10%
}

.ms-rteTable-7 tr.ms-rteTableHeaderRow-7, .ms-rteTable-7 tr.ms-rteTableFooterRow-7, .ms-rteTable-7 tr.ms-rteTableHeaderRow-7 > th, .ms-rteTable-7 tr.ms-rteTableFooterRow-7 > th, .ms-rteTable-7 tr.ms-rteTableFooterRow-7 > td {
    background: var(--table-background-header)
}

.admission-criteria ul {
    margin-left: 50px;
    font-size: 15px;
    list-style: outside
}

.contact-admission .card {
    max-width: 95%;
    margin-left: 50px
}

.admission-criteria ol {
    margin-left: 50px;
    font-size: 15px;
    list-style: decimal
}

div.table-wrapper {
    width: auto
}

.apply-strem2 table tr td {
    border: 1px solid var(--colors-gray-neutral-300)
}

.apply-strem2 table tr th .text {
    font-weight: bolder !important
}

.admission-stream ul {
    font-size: 15px;
    list-style: outside
}

.admission-stream {
    margin-left: 50px
}

.apply-strem2 div.table-wrapper {
    width: auto
}

.city-content .card {
    height: 100%;
    min-height: 428px;
    max-height: 428px
}

.contact-us-ksau .input__field {
    width: 100% !important;
    height: 100% !important;
    color: var(--colors-text-primary) !important;
    background-color: #0000 !important;
    border: 0 !important;
    outline: 0 !important
}

#ctl00_PlaceHolderMain_RichHtmlField1__ControlWrapper_RichHtmlField .dga-divider {
    margin-top: 10px;
    margin-bottom: 10px
}

#m4rny4zyug9xnnnho {
    margin-top: -40px
}

.contact-us-ksau nav {
    display: none
}

.contact-us-ksau .head h1 {
    color: #000
}

.admission-deanship a:hover {
    color: var(--colors-brand-600);
    border: 1px solid #eee
}

.deanship-student h3, .deanship-library h3 {
    color: var(--colors-brand-600)
}

.alumni-testimonials .carousel-indicators {
    display: none
}

.alumni-testimonials .owl-carousel .owl-item {
    width: 500px !important
}

.alumni-testimonials .owl-carousel .owl-stage {
    transform: translate(0,0) !important
}

.alumni-testimonials .owl-controls .owl-dots {
    width: 450px !important
}

.alumni-testimonials .carousel {
    padding: 0 70px
}

    .alumni-testimonials .carousel .item {
        color: #999;
        text-align: center;
        min-height: 290px;
        font-size: 14px;
        overflow: hidden
    }

        .alumni-testimonials .carousel .item .img-box {
            border: 1px solid #ddd;
            border-radius: 50%;
            width: 135px;
            height: 135px;
            margin: 0 auto;
            padding: 5px
        }

    .alumni-testimonials .carousel .img-box img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        display: block
    }

    .alumni-testimonials .carousel .testimonial {
        padding: 30px 0 10px
    }

    .alumni-testimonials .carousel .overview {
        font-style: italic
    }

        .alumni-testimonials .carousel .overview b {
            text-transform: uppercase;
            color: #7aa641
        }

    .alumni-testimonials .carousel .carousel-control {
        background: 0 0;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        top: 50%
    }

.alumni-testimonials .carousel-control i {
    color: #000c;
    text-shadow: 0 3px 3px #e6e6e6,0 0 #000;
    font-size: 68px;
    line-height: 42px;
    display: inline-block;
    position: absolute
}

.alumni-testimonials .carousel .carousel-indicators {
    bottom: -40px
}

.alumni-testimonials .carousel-indicators li, .alumni-testimonials .carousel-indicators li.active {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 1px 3px
}

.alumni-testimonials .carousel-indicators li {
    background: #999;
    border-color: #fff0;
    box-shadow: inset 0 2px 1px #0003
}

    .alumni-testimonials .carousel-indicators li.active {
        background: #555;
        box-shadow: inset 0 2px 1px #0003
    }

.news-inner-style {
    font: 400 20px/30px IBMPlexSans-Regular
}

    .news-inner-style img {
        margin-left: auto;
        margin-right: auto;
        display: block
    }

@media (max-width: 767px) {
    #alumni-testimonials-carousel {
        display: none !important
    }

    .testimonial-list {
        display: block !important
    }
}

@media (min-width: 768px) {
    #alumni-testimonials-carousel {
        display: block !important
    }

    .testimonials.ksau-testimonial-box-view-style5 .testimonial-content .star-ratings {
        color: #dba102;
        margin-top: 10px;
        font-size: 16px
    }

    .testimonial-list {
        display: none !important
    }
}

.sitemap ul ul, .sitemap ul ul ul {
    list-style-type: circle
}

.sitemap .sitemap-subtitle {
    color: #000
}

@media only screen and (max-width: 806px) {
    #servicesSlideshow .owl-dots {
        display: none !important
    }
}

.hgi-stroke.hgi-arrow-down-01:before {
    content: "⌵";
    opacity: 0;
    transition: opacity .1s
}

.header-menu__item-arrow i {
/*    margin-bottom: 8px*/
}

.hgi-stroke.hgi-arrow-down-01:before {
    opacity: 1
}

@media only screen and (min-width: 992px) {
    .homepage-news-calendar-container {
        flex-direction: row
    }
}

.homepage-news-calendar-container {
    flex-direction: column
}

.news-list {
    margin-left: 0;
    margin-right: 0
}

.hgi-solid.hgi-tick-03:before {
    opacity: 1
}

.hgi-stroke.hgi-standard.hgi-cancel-circle:before {
    content: "㿃";
    opacity: 0;
    opacity: 1;
    transition: opacity .1s
}

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

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

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

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

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

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

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

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

@media only screen and (max-width: 1440px) and (min-width:1280px) {
    .service-section .featured-icon-box {
        height: 270px
    }
}

@media (min-width: 768px) and (max-width:1280px) {
    .change-color-mobile1 {
        background-color: #fff
    }

    .change-color-mobile {
        background-color: #fff0
    }
}

#stepper-dots, #latestNewsSlideshow .carousel-indicators {
    display: none !important
}

.news-des, .news-des p {
    font-size: 16px
}

.card-row, .card {
    cursor: auto
}

.home-page-news-box .card {
    height: 580px !important;
    min-height: 580px !important;
    max-height: 580px !important
}

.ms-rteFontSize-3 {
    font-size: 16px !important
}

.news-inner-style table .ms-rteTableEvenCol-default, .eventpage-des h3, .eventpage-des h4, .eventpage-des h5, .eventpage-des h6 {
    font-size: 20px;
    font-weight: 700
}

ol {
    list-style: auto
}

ul {
    list-style: outside
}

#RibbonContainer img {
    max-width: 1000px !important
}

a.ms-cui-ctl, a.ms-cui-ctl-medium {
    height: 20px !important
}

.header-menu__item ul {
    list-style: none
}

.header-widget {
    display: none !important
}

.news-des, .news-des p, .news-des ul, .news-des ul li, .news-des ol, .news-des ol li, .news-des span, .news-des table, .news-des th, .news-des td {
    color: #384250;
    font: 400 16px/24px IBMPlexSans-Regular;
    font-family: IBMPlexSans-Regular !important
}

    .news-des a {
        font: 400 16px/24px IBMPlexSans-Regular;
        color: var(--link-primary) !important;
        padding: var(--spacing-none) !important;
        border-radius: var(--radius-xs) !important;
        cursor: pointer !important;
        align-items: center !important;
        gap: 8px !important;
        font-family: IBMPlexSans-Regular !important;
        display: inline-flex !important
    }

        .news-des a span, .news-des a p {
            color: var(--link-primary) !important
        }

        .news-des a:hover {
            color: var(--link-primary-hovered) !important;
            text-decoration: underline !important
        }

        .news-des a:visited:active {
            color: #88d8ad !important
        }

        .news-des a.active {
            color: var(--link-primary-pressed) !important
        }

        .news-des a:focus {
            outline: 0;
            color: var(--link-primary-focused) !important;
            border: 2px solid var(--border-black) !important;
            border-radius: var(--radius-xs) !important
        }

    .news-des h1.news-des h2, .news-des h3, .news-des h4, .news-des h5, .news-des h6 {
        font-size: 20px;
        font-weight: 700;
        color: #0d121c !important;
        font-family: IBMPlexSans-Regular !important
    }

.news-image img, .eventpage-image img {
    background-color: #fff;
    border-radius: .25rem;
    max-width: 100%;
    height: auto;
    padding: 1rem;
    border: 1px solid #dee2e6 !important
}

.logo-footer-ksau {
    width: 150px
}

.logo-footer-vision {
    width: 83px
}

.card-services-homepage {
    padding: var(--spacing-xl,16px);
    border-radius: 16px;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    display: flex;
    /*    background-color: #fff !important;*/
    background-color: var(--background-background-card) !important;
    color: var(--text-text-display);
/*    border: 1px solid #dee2e6 !important;*/
    border: 1px solid var(--border-border-neutral-primary) !important;
}

    .card-services-homepage .services-icon-homepage {
        width: 100%;
        height: 180px;
        font-size: inherit;
        justify-content: center;
        align-items: center;
        display: flex
    }

        .card-services-homepage .services-icon-homepage > img {
            object-fit: contain;
            width: auto;
            max-width: 100%;
            height: auto;
            max-height: 100%;
            display: block
        }

.services-icon-homepage i {
    font-size: 28px
}

.title-services-homepage {
    color: #0d121c;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px
}

.card-services-homepage .service-description {
    color: #384250;
    margin-bottom: 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 0 !important
}

@media (max-width: 600px) {
    .card-services-homepage a {
/*        padding: 12px 0;*/
/*        display: block*/
    }

    .UpcomingEvents a, .UpcomingEvents button {
        padding: 12px
    }
}

.youtube-lazy {
    cursor: pointer;
    background-color: #000;
    width: 100%;
    padding-bottom: 56.25%;
    position: relative
}

.youtube-thumbnail {
    background-position: 50%;
    background-size: cover;
    width: 100%;
    height: 100%;
    margin: auto;
    display: block;
    position: absolute
}

.play-button {
    pointer-events: none;
    background: url(/_catalogs/masterpage/NewKSAUPortal/assets/images/youtube-red.svg) 0 0/contain no-repeat;
    width: 68px;
    height: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.all_news_cards {
    gap: var(--spacing-3xl);
    box-sizing: border-box;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: 1fr;
    width: 100%;
    display: grid
}

@media (max-width: 991px) {
    .all_news_cards {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width: 600px) {
    .all_news_cards {
        grid-template-columns: 1fr
    }
}

.news-section {
    gap: var(--spacing-xl);
    flex-direction: column;
    display: flex
}

.pager {
    justify-content: center;
    width: 100%;
    display: flex
}

@media (max-width: 600px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        max-width: 100%
    }
}

.accordion-item__header:hover {
    text-decoration: none
}

.input {
    position: relative
}

    .input:after {
        content: "";
        background-color: var(--form-field-border-pressed,#007aff);
        width: 0%;
        height: 2px;
        transition: width .2s ease-in-out;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%)
    }

    .input.input-error:after, .dga-textarea.input-error:after {
        background-color: var(--field-border-error,#b42318)
    }

.councel-members .featured-imagebox {
    border: 1px solid #ddd;
    border-radius: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 1px;
    padding: 16px
}

    .councel-members .featured-imagebox img {
        border: 5px solid #eee;
        border-radius: 10px
    }

@media (max-width: 676px) {
    .undergraduate-admission .flex {
        flex-direction: column
    }
}

@media (max-width: 535px) {
    .table-wrapper {
        overflow-x: scroll
    }

    .page-container .title span {
        font: 600 40px/42px IBMPlexSans-SemiBold !important
    }

    .hero-v2 .title p {
        font: 600 12px/20px IBMPlexSans-SemiBold !important
    }
}

.partner-section .btn--secondary-outline {
    padding: 0 !important
}

.digital-stamp-container .dga-featured-icon--light-brand {
    background-color: var(--text-success) !important
}

#services-container .box-link-item a {
    border: none;
    min-height: 0
}

#services-container .box-link-item, .digital-platforms-container .box-link-item {
    margin-right: auto
}

    .digital-platforms-container .box-link-item a, .digital-platforms-container .box-link-item button {
        border: none
    }

.digital-platforms-container .tag {
    display: none
}

.sis-icon-platform {
    padding: 29px
}

#chatbase-bubble-button {
    min-width: 0;
    box-shadow: none !important;
    background-color: #166a45 !important;
    width: 59px !important;
    height: 59px !important;
    bottom: 20px !important;
    right: 20px !important
}

#chatbase-bubble-window {
    right: 10rem !important
}

#chatbase-bubble-button:focus {
    outline: 0
}

#chatbase-bubble-button img {
    width: 50px !important;
    height: 50px !important
}

@media (max-width: 535px) {
    #chatbase-bubble-window {
        right: 0 !important
    }
}

#chatbase-message-bubbles, #tawk-message-preview-content, .widget-visible iframe:nth-of-type(3), .widget-visible iframe:nth-of-type(4) {
    display: none !important
}

#chatbase-bubble-button:hover {
    transform: none !important
}

.muneer-trigger-button-box button {
    min-width: 0 !important
}

body.muneer-readable-font :not(i) {
    font-family: IBMPlexSans-Regular !important
}

.muneer-trigger-button-box.bottom-right {
    left: 0 !important;
    right: auto !important
}

.muneer-trigger-button-box button {
    background-color: #166a45 !important
}

.accordion-item__header.active + .accordion-item__body ul {
    padding-right: 20px
}

.contactus-homepage {
    padding: 16px !important
}

.external-icon-footer {
    margin-right: 4px;
    display: inline
}

.sr-only {
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

#s4-ribbonrow {
    height: 200px
}

.ms-core-webpartadder {
    z-index: 9999
}

div#DeafServicePlace {
    bottom: 32px !important;
    left: 20px !important
}

#MrAccessInHand {
    bottom: 100px !important;
    left: 20px !important
}

    #MrAccessInHand:hover {
        filter: none !important
    }

.big-box-arrow a {
    width: 80px;
    min-height: 70px;
    border: none !important
}

.big-box-arrow .btn:focus {
    box-shadow: none !important
}

@media (min-width: 768px) {
    .md\:grid-cols-5 {
        grid-template-columns: repeat(5,minmax(0,1fr))
    }
}

.about-home .indicator-card {
    border: 0
}

.button-box {
    position: absolute;
    bottom: 20px;
    left: 20px
}

@media (max-width: 900px) {
    .mobile-section-home {
        flex-direction: column !important
    }
}

@media (max-width: 500px) {
    .ksau-sections-wrapper .custom-section__text {
        padding-left: 0 !important;
        padding-right: 0 !important
    }
}

.woot-widget-bubble.woot-elements--right {
    bottom: 100px
}

.woot-widget-bubble:hover {
    box-shadow: none !important
}

.woot-widget-bubble:focus {
    outline: 0 !important
}

@media only screen and (min-width: 667px) {
    .woot-widget-holder {
        bottom: 180px !important
    }
}

.tawasul-form .input {
    position: relative
}

    .tawasul-form .input.input-error:after, .dga-textarea.input-error:after {
        background-color: var(--field-border-error,#b42318)
    }

.tawasul-form .input-error {
    border: 1px solid var(--field-border-error,#b42318)
}

.external-icon-mmenu {
    display: inline
}

.link:visited {
    color: #166a45
}

.card-icon-who {
    width: 24px
}

@media (max-width: 1160px) {
    .ksau-number-iframe {
        -webkit-overflow-scrolling: touch;
        width: 90vw;
        max-width: 90vw;
        height: 70vw;
        display: block;
        overflow-x: auto
    }

    .before-table-ksau-number {
        width: 90vw;
        max-width: 90vw
    }

    #APIDetails .table-wrapper {
        width: 90vw;
        overflow-x: scroll !important
    }
}

#APIDetails .table-wrapper, #APIDetails .table-wrapper table {
    direction: rtl
}

.woot-widget-bubble.woot-elements--right {
    min-width: 0 !important
}

.box-link-item-external a:after {
    background: url(/_catalogs/masterpage/NewKSAUPortal/assets/images/external_link.svg) 50% no-repeat !important;
    background-color: var(--colors-gray-100) !important
}

.eventpage-des, .eventpage-des p, .eventpage-des ul, .eventpage-des ul li, .eventpage-des ol, .eventpage-des ol li, .eventpage-des span {
    color: #0d121c;
    font: 400 16px/24px IBMPlexSans-Regular;
    font-family: IBMPlexSans-Regular !important
}

    .eventpage-des p.text-md-semibold {
        font: 600 16px/24px IBMPlexSans-SemiBold
    }

    .eventpage-des p.text-md-bold {
        font: 700 16px/24px IBMPlexSans-Bold
    }

    .eventpage-des p.text-lg-bold {
        font: 700 18px/28px IBMPlexSans-Bold
    }

    .eventpage-des a {
        font: 400 16px/24px IBMPlexSans-Regular;
        color: var(--link-primary) !important;
        padding: var(--spacing-none) !important;
        border-radius: var(--radius-xs) !important;
        cursor: pointer !important;
        align-items: center !important;
        gap: 8px !important;
        font-family: IBMPlexSans-Regular !important;
        display: inline-flex !important
    }

    .eventpage-des ul li a.accordion-item__header {
        gap: var(--spacing-xl);
        width: 100%;
        padding: var(--spacing-xl) !important;
        text-decoration: none !important
    }

    .eventpage-des a:has(button) {
        text-decoration: none !important
    }

        .eventpage-des a:has(button):hover {
            text-decoration: none !important
        }

        .eventpage-des a:has(button):focus {
            text-decoration: none !important
        }

        .eventpage-des a:has(button):active {
            text-decoration: none !important
        }

    .eventpage-des a span, .eventpage-des a p {
        color: var(--link-primary) !important
    }

        .eventpage-des a:hover, .eventpage-des a span:hover {
            color: var(--link-primary-hovered) !important;
            text-decoration: underline !important
        }

    .eventpage-des a:visited:active {
        color: #88d8ad !important
    }

    .eventpage-des a.active {
        color: var(--link-primary-pressed) !important
    }

    .eventpage-des a:focus {
        outline: 0;
        color: var(--link-primary-focused) !important;
        border: 2px solid var(--border-black) !important;
        border-radius: var(--radius-xs) !important
    }

    .eventpage-des h1.eventpage-des h2, .eventpage-des h3, .eventpage-des h4, .eventpage-des h5, .eventpage-des h6 {
        font-size: 20px;
        font-weight: 700;
        color: #0d121c !important;
        font-family: IBMPlexSans-Regular !important
    }

.header-color-style {
    color: #0d121c !important
}

.text-color-style {
    color: #384250 !important
}

#downloadFilesTableAr {
    border-collapse: collapse;
    direction: rtl;
    width: 100%
}

    #downloadFilesTableAr th, #downloadFilesTableAr td {
        text-align: right;
        position: relative
    }

div.dataTables_filter, div.dataTables_length, div.dataTables_paginate, div.dataTables_info {
    display: none
}

.sort-icon {
    transition: transform .3s
}

    .sort-icon.rotate-up {
        transform: rotate(180deg)
    }

    .sort-icon.rotate-down {
        transform: rotate(0)
    }

#downloadFilesTableAr .sort-icon {
    width: 16px;
    height: 16px
}

#downloadFilesTableAr th:first-child {
    width: 90px
}

#downloadFilesTable .filter-icon {
    width: 16px;
    height: 16px
}

.col-filter-popover {
    z-index: 9999;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    width: 260px;
    padding: 8px;
    position: absolute;
    box-shadow: 0 8px 24px #00000014
}

    .col-filter-popover .filter-list {
        max-height: 220px;
        margin: 6px 0;
        padding-right: 4px;
        overflow: auto
    }

    .col-filter-popover .controls {
        justify-content: flex-end;
        gap: 8px;
        margin-top: 6px;
        display: flex
    }

.col-filter-chip {
    align-items: center;
    gap: 6px;
    margin: 4px 0;
    display: flex
}

.col-filter-search {
    width: 100%
}

.col-filter-popover input[type=text], .col-filter-popover input[type=text]:hover {
    border: none !important
}

*, :before, :after {
    box-sizing: border-box
}

html {
    max-width: 100%;
    height: auto;
    overflow-y: scroll
}

body {
/*    direction: rtl;*/
    overflow: hidden auto;
/*    text-align: right !important;*/
    font-family: IBMPlexSans-Regular !important
}

.header-nav, .header-menu__wrapper, .header-nav__full, .header-nav__main {
    margin: 0;
    padding: 0
}

.header {
    padding: var(--spacing-none);
    justify-content: space-between;
    align-items: center;
    height: 72px;
    display: flex;
    position: relative
}

.header--sticky {
/*    background-color: var(--background-menu);*/
    z-index: 1000 !important;
    position: sticky !important;
    top: 0 !important
}

.header-nav {
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    height: 72px;
    min-height: 72px;
    display: flex
}

.header-nav--full {
    width: 100%;
    padding: var(--spacing-none)var(--spacing-4xl);
    justify-content: space-between;
    align-items: center;
    display: flex
}

    .header-nav--full dga-nav-header-main {
        align-items: center;
        width: 100%;
        margin-left: auto;
        display: flex
    }

    .header-nav--full dga-nav-header-actions {
        align-items: center;
        width: fit-content;
        margin-right: auto;
        display: flex;

        max-width: 100%
    }

.header-nav--fixed {
    padding: var(--spacing-none)var(--spacing-4xl);
    justify-content: center;
    align-items: flex-start;
    margin-inline: auto;
    display: flex
}

.header-nav__main {
    align-items: center;
    display: flex
}

.header-menu__wrapper {
    outline: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    display: flex;
    overflow: visible
}

.header-nav__menu {
    width: 100%
}

.header-menu__item-label {
    white-space: nowrap
}

.header-nav__menu, .header-nav__actions {
    align-items: center;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.header-nav__branding-wrapper {
    flex-flow: row;
    align-items: center;
    display: flex
}

.header-nav__branding {
    padding-left: var(--spacing-2xl);
    flex-shrink: 0;
    align-items: center;
    display: flex
}

    .header-nav__branding img {
        width: 133px !important;
        height: 56px !important
    }

.header-menu__item-wrapper {
    display: inline-flex
}

.header-menu__item {
    height: 72px;
    /*    padding: var(--spacing-md)var(--spacing-lg);*/
    padding: var(--spacing-md)var(--spacing-xl);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-xs);
    background-color: #fff0;
    
    outline: none;
    display: inline-flex;
    /*    position: inherit !important;*/
    position: relative !important;
}

.header-menu__item--active {
    background: var(--button-background-primary-default);
    color: var(--colors-text-primary_on-brand);
    outline: 2px solid var(--colors-base-black);
    text-decoration: none
}

.header-menu__item-label, .header-menu__item-icon, .header-menu__item-arrow {
    color: #0d121c;
    text-decoration: none
}

.header-menu__item-body {
    align-items: center;
    gap: 4px;
    display: inline-flex
}

.header-menu__item-label {
    color: #0d121c;
    text-decoration: none;
    display: inline-flex
}

.header-menu__item-arrow {
    justify-content: center;
    align-items: center;
    display: inline-flex
}

    .header-menu__item-arrow i {
/*        margin-right: var(--spacing-xs);*/
        font-size: 16px;
        transition: transform .3s
    }

.header-menu__item--active:not(.search-trigger):not(.language-trigger) .header-menu__item-arrow i {
    transform: rotate(180deg)
}

.header-menu__item-arrow img {
    width: 20px;
    height: 20px
}

.arrow-down-icon {
    width: 16px;
    height: 16px;
    margin-right: var(--spacing-xs);
    display: inline
}

.hidden {
    display: none !important
}

li.header-menu__item.header-menu__item--active:after, .header-menu__item:hover:after {
    left: var(--spacing-md)var(--spacing-lg);
    transform: none;
    display: block !important
}

/*li.first.header-menu__item.header-menu__item--active:after, .first.header-menu__item:hover:after, .first.header-menu__item:active:after, .first.header-menu__item.header-menu__item--selected:after, .first.header-menu__item.header-menu__item--selected:hover:after, .first.header-menu__item.header-menu__item--selected:active:after {
    width: 5%
}

li.second.header-menu__item.header-menu__item--active:after, .second.header-menu__item:hover:after, .second.header-menu__item:active:after, .second.header-menu__item.header-menu__item--selected:after, .second.header-menu__item.header-menu__item--selected:hover:after, .second.header-menu__item.header-menu__item--selected:active:after {
    width: 6%
}

li.third.header-menu__item.header-menu__item--active:after, .third.header-menu__item:hover:after, .third.header-menu__item:active:after, .third.header-menu__item.header-menu__item--selected:after, .third.header-menu__item.header-menu__item--selected:hover:after, .third.header-menu__item.header-menu__item--selected:active:after {
    width: 4%
}

li.fourth.header-menu__item.header-menu__item--active:after, .fourth.header-menu__item:hover:after, .fourth.header-menu__item:active:after, .fourth.header-menu__item.header-menu__item--selected:after, .fourth.header-menu__item.header-menu__item--selected:hover:after, .fourth.header-menu__item.header-menu__item--selected:active:after {
    width: 10%
}

li.fifth.header-menu__item.header-menu__item--active:after, .fifth.header-menu__item:hover:after, .fifth.header-menu__item:active:after, .fifth.header-menu__item.header-menu__item--selected:after, .fifth.header-menu__item.header-menu__item--selected:hover:after, .fifth.header-menu__item.header-menu__item--selected:active:after {
    width: 6%
}

li.sixth.header-menu__item.header-menu__item--active:after, .sixth.header-menu__item:hover:after, .sixth.header-menu__item:active:after, .sixth.header-menu__item.header-menu__item--selected:after, .sixth.header-menu__item.header-menu__item--selected:hover:after, .sixth.header-menu__item.header-menu__item--selected:active:after {
    width: 3.5%
}*/

.search-main.header-menu__item--active:after, .search-main.header-menu__item:hover:after, .search-main.header-menu__item:active:after, .search-trigger.search-main--hover: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, .search-main.header-menu__item.header-menu__item--selected:after {
/*    width: 3%;*/
    left: var(--spacing-md)var(--spacing-lg);
    transform: none;
    display: block !important
}

.language-main.header-menu__item--active:after, .language-main.header-menu__item:hover:after, .language-main.header-menu__item:active:after {
/*    width: 3.5%;*/
    left: var(--spacing-md)var(--spacing-lg);
    transform: none;
    display: block !important
}

.contactus-main.header-menu__item--active:after, .contactus-main.header-menu__item:hover:after, .contactus-main.header-menu__item: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, .contactus-main.header-menu__item.header-menu__item--selected:after {
/*    width: 4.5%;*/
    left: var(--spacing-md)var(--spacing-lg);
    transform: none;
    display: block !important
}

.header-nav__mobile-menu .header-menu__item--active:after, .header-nav__mobile-menu .header-menu__item--active:hover:after, .header-nav__mobile-menu .header-menu__item--active:focus:after, .header-nav__mobile-menu .header-menu__item--active:active:after, .header-nav__mobile-menu .header-menu__item:hover:after, .header-nav__mobile-menu .header-menu__item:active:after, .header-nav__mobile-menu .sidepanel__menu-tab:hover:after, .header-nav__mobile-menu .sidepanel__submenu-tab:hover:after {
    content: none !important;
    background: 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    display: none !important
}

.error-icon {
    width: 16px;
    height: 16px
}

.header__sub-menu {
    background-color: var(--colors-base-white);
    width: 100vw;
    padding: var(--spacing-lg);
    visibility: hidden;
    opacity: 0;
    z-index: 999;
    pointer-events: none;
    transition: opacity .3s,visibility .3s;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    box-shadow: 0 4px 10px #0000001a
}

.header-menu__item .header__sub-menu--selected {
    visibility: visible;
    opacity: 1;
    pointer-events: auto
}

.sub-menu__container {
    gap: var(--spacing-3xl);
    padding: var(--spacing-5xl);
    grid-template-columns: repeat(4,minmax(250px,1fr));
    display: grid
}

.sub-menu__section {
    box-sizing: border-box;
    padding-right: var(--spacing-md);
    gap: var(--spacing-lg);
    flex-direction: column;
    width: 100%;
    display: flex
}

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

.sub-menu__link {
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    background-color: #fff0;
    align-items: center;
    text-decoration: none;
    transition: background-color .3s;
    display: flex
}

.sub-menu__link-icon {
    color: var(--icon-default)
}

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

.sub-menu__link-label {
    color: var(--text-default);
    text-decoration: none
}

.sub-menu__link-helper {
    color: var(--text-primary-paragraph)
}

.sub-menu__link--on-color {
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    background-color: #fff0;
    align-items: center;
    text-decoration: none;
    transition: background-color .3s;
    display: flex
}

    .sub-menu__link--on-color:hover {
        background-color: var(--button-background-neutral-hovered);
        outline: none;
        text-decoration: none
    }

    .sub-menu__link--on-color:focus {
        background-color: var(--button-background-neutral-focused);
        outline: 2px solid var(--colors-base-black);
        text-decoration: none
    }

    .sub-menu__link--on-color:active {
        background-color: var(--button-background-neutral-pressed);
        outline: 2px solid var(--colors-base-black);
        text-decoration: 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: #0d121c;
        text-decoration: none
    }

    .sub-menu__link--on-color:hover .sub-menu__link-label, .sub-menu__link--on-color:focus .sub-menu__link-label, .sub-menu__link--on-color:active .sub-menu__link-label {
        text-decoration: underline
    }

.search-box {
    background-color: var(--colors-base-white);
    padding: var(--spacing-lg)var(--spacing-none);
    z-index: 1000;
    width: 100%;
    display: none;
    position: absolute;
    left: 0;
    right: 0
}

.search-container {
    width: 100%;
    padding: var(--spacing-none)var(--spacing-4xl)
}

.search-box .search-container {
    gap: var(--spacing-5xl);
    flex-direction: column;
    align-items: flex-end;
    display: flex
}

.search-close-btn {
    background-color: var(--colors-gray-200);
    cursor: pointer;
    border: 0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    text-decoration: none !important
}

    .search-close-btn i {
        font-size: var(--Display-xsF);
        line-height: var(--Display-xsL)
    }

    .search-close-btn:hover {
        background-color: var(--colors-gray-100)
    }

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

    .search-close-btn:focus {
        background-color: #fff0;
        outline: 2px solid var(--colors-gray-950) !important
    }

.search-div {
    gap: var(--spacing-xl);
    width: 100%;
    margin: 0 auto var(--spacing-2xl)auto;
    display: flex
}

    .search-div .search-input {
        border: 1px solid var(--colors-gray-400);
        font-size: var(--Text-mdF);
        line-height: var(--Text-mdL);
        border-radius: 4px;
        width: 100%;
        padding: 0 16px 0 8px;
        background-color: #0000 !important
    }

        .search-div .search-input:hover {
            border: 1px solid var(--colors-gray-700)
        }

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

    .search-div a {
        height: 40px;
        padding-inline: var(--buttons-lg-padding);
        background-color: var(--colors-brand-600);
        color: var(--colors-base-white);
        margin: var(--spacing-none);
        cursor: pointer;
        border-radius: 4px;
        font: 500 16px/24px IBMPlexSans-Medium;
        text-decoration: none
    }

        .search-div a:hover {
            background-color: var(--colors-brand-700);
            color: var(--colors-base-white)
        }

        .search-div a:active {
            background-color: var(--colors-brand-900);
            color: var(--colors-base-white)
        }

        .search-div a:focus {
            height: 40px;
            padding: var(--spacing-sm)var(--spacing-xl);
            background-color: var(--colors-brand-600);
            border: 1px solid var(--colors-white);
            outline: 2px solid var(--colors-gray-950) !important
        }

.search-suggestions {
    flex-direction: column;
    gap: 16px;
    width: 100%;
    display: flex
}

    .search-suggestions h6 {
        color: var(--colors-brand-600);
        font-family: inherit;
        font-weight: 700;
        font-size: var(--Text-lgF);
        line-height: var(--Text-lgL);
        margin: 0
    }

.suggestions-tags {
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

    .suggestions-tags li {
        width: fit-content;
        padding: var(--spacing-xxs)var(--spacing-md);
        font-size: var(--Text-xsF);
        margin: var(--spacing-none);
        font-family: inherit;
        line-height: var(--Text-xsL);
        border: 1px solid var(--colors-gray-200);
        color: var(--colors-gray-700);
        background-color: var(--colors-gray-50);
        margin: var(--spacing-none);
        border-radius: 4px;
        position: relative
    }

.social-links {
    gap: var(--spacing-sm);
    align-items: center;
    display: flex
}

    .social-links a {
        border: 1px solid hsla(var(--colors-alpha-white)/40%);
        background-color: #fff0;
        border-radius: 4px;
        outline: none;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        transition: background-color .3s,border-color .3s;
        display: flex;
        width: 38px !important;
        height: 38px !important
    }

        .social-links a:hover {
            background-color: hsla(var(--colors-alpha-white)/40%);
            border-color: var(--colors-base-white);
            color: var(--colors-base-white)
        }

        .social-links a:active {
            background-color: hsla(var(--colors-alpha-white)/50%);
            border-color: var(--colors-base-white);
            color: var(--colors-base-white);
            outline: none
        }

        .social-links a:focus {
            border: 2px solid var(--colors-base-white);
            color: var(--colors-base-white);
            background-color: #fff0;
            outline: none
        }

        .social-links a:focus-visible {
            outline: 2px solid var(--colors-base-white)
        }

        .social-links a.btn--white-outline {
            color: var(--colors-base-white);
            border: 1px solid hsla(var(--colors-alpha-white)/40%);
            background-color: #fff0;
            outline: none
        }

            .social-links a.btn--white-outline:hover {
                background-color: hsla(var(--colors-alpha-white)/40%);
                color: var(--colors-base-white);
                border-color: var(--colors-base-white)
            }

            .social-links a.btn--white-outline:active {
                background-color: hsla(var(--colors-alpha-white)/50%);
                color: var(--colors-base-white);
                border-color: var(--colors-base-white)
            }

            .social-links a.btn--white-outline:focus {
                border-color: var(--colors-base-white);
                color: var(--colors-base-white);
                border: 2px solid var(--colors-base-white);
                background-color: #fff0
            }

#s4-bodyContainer {
    padding-bottom: 0 !important
}

.backtotop {
    box-shadow: var(--shadow-md);
    cursor: pointer;
    background-color: var(--colors-gray-neutral-100);
    z-index: 99;
    border-radius: 6px;
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 10%;
    left: 2%
}

    .backtotop i {
        color: var(--text-default);
        font-size: 22px;
        position: absolute;
        bottom: 50%;
        right: 50%;
        transform: translate(50%,50%)
    }

.header-menu__btn.hgi-stroke {
    display: none;
    background-color: var(--colors-gray-200) !important;
    border: 0 !important;
    border-radius: 4px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important
}

.header-nav__mobile-menu {
    background-color: var(--background-menu);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    max-height: 100vh;
    transition: opacity .3s,visibility 0s linear .3s;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow-y: auto
}

    .header-nav__mobile-menu.open {
        opacity: 1;
        visibility: visible;
        display: block
    }

    .header-nav__mobile-menu .sidepanel {
        background-color: var(--colors-base-white);
        width: 100%;
        max-height: 100vh;
        padding-bottom: var(--spacing-md);
        box-sizing: border-box;
        z-index: 998;
        flex-direction: column;
        align-items: flex-start;
        display: flex;
        position: relative;
        min-height: auto !important;
        overflow-y: initial !important;
        box-shadow: none !important
    }

    .header-nav__mobile-menu .sidepanel__menu-list {
        width: 100%;
        padding: var(--spacing-md)var(--spacing-xl) !important
    }

    .header-nav__mobile-menu .sidepanel__submenu-list {
        opacity: 0;
        max-height: 0;
        transition: max-height .3s,opacity .3s;
        display: none;
        overflow-y: hidden
    }

.sidepanel__submenu-list.open > .sidepanel__submenu-tab > .submenu-tab__text {
    padding-right: var(--spacing-xl)
}

.sidepanel__submenu-list.open > .sidepanel__submenu-item {
    padding-right: var(--spacing-6xl)
}

.header-nav__mobile-menu .sidepanel__submenu-list.open {
    opacity: 1;
    max-height: 1000px;
    display: block
}

.header-nav__mobile-menu .sidepanel__menu-tab, .sidepanel__submenu-tab {
    width: 100%;
    padding: var(--spacing-md);
    justify-content: right;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-default);
    border-radius: var(--radius-sm);
    mix-blend-mode: multiply;
    border-bottom: 1px solid var(--colors-gray-300);
    align-self: stretch;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    position: relative
}

    .header-nav__mobile-menu .sidepanel__menu-tab:hover {
        background-color: var(--colors-gray-neutral-100);
        border-bottom: 1px solid var(--colors-gray-300);
        color: var(--text-default)
    }

    .header-nav__mobile-menu .sidepanel__menu-tab:focus, .header-nav__mobile-menu .sidepanel__submenu-tab:focus {
        background-color: var(--colors-gray-neutral-100);
        color: var(--colors-text-primary);
        border-color: #fff0;
        border-bottom: 1px solid var(--colors-gray-300)
    }

    .header-nav__mobile-menu .sidepanel__menu-tab:hover:after, .header-nav__mobile-menu .sidepanel__submenu-tab:hover:after {
        display: none
    }

.header-nav__mobile-menu .sidepanel__submenu-list a {
    color: var(--text-default);
    padding: var(--spacing-md)var(--spacing-md);
    white-space: normal;
    word-break: break-word;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    text-decoration: none;
    display: block
}

    .header-nav__mobile-menu .sidepanel__submenu-list a:hover {
        background-color: var(--colors-gray-neutral-100);
        color: var(--colors-text-primary);
        text-decoration: underline
    }

.header-nav__mobile-menu .sidepanel__menu-tab-arrow {
    left: var(--spacing-xl);
    font-size: 20px;
    transition: all .4s ease-in-out;
    position: absolute
}

.header-nav__mobile-menu .sidepanel__submenu-item {
    border-bottom: 1px solid var(--colors-gray-300)
}

.sidepanel__header-actions {
    margin-left: auto !important
}

    .sidepanel__header-actions .header-nav__actions {
        gap: var(--spacing-md);
        text-align: center;
        padding-top: var(--spacing-md);
        flex-direction: row;
/*        justify-content: space-between;*/
        display: flex;
        flex-wrap: wrap;
        padding: 1rem;
    }

    .sidepanel__header-actions .header-menu__item {
        color: var(--text-default);
        padding: var(--spacing-sm)0;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        display: flex
    }

        .sidepanel__header-actions .header-menu__item:hover {
            color: var(--colors-text-primary);
            text-decoration: underline
        }

    .sidepanel__header-actions .header-menu__item-arrow {
        font-size: 20px
    }

    .sidepanel__header-actions .header-menu__item-label {
        flex-grow: 1
    }

.header-nav__mobile-menu dga-header-action-btn {
    gap: var(--spacing-2xl);
    padding: var(--spacing-xl)var(--spacing-2xl);
    display: flex
}

.header-nav__mobile-menu a.header-menu__item {
    padding: var(--spacing-md)var(--spacing-2xl);
    cursor: pointer;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--colors-gray-neutral-100);
    border-radius: 4px;
    min-width: auto;
    height: 100%;
    font-family: inherit;
    text-decoration: none;
    display: flex;
    position: relative
}

.header-nav__mobile-menu .header-menu__item:hover {
    background: var(--colors-gray-neutral-200);
    outline: 2px solid var(--colors-base-black);
    text-decoration: none
}

.header-nav__mobile-menu .header-menu__item:active {
    background-color: var(--colors-gray-neutral-50);
    outline: 2px solid var(--colors-base-black);
    text-decoration: none
}

    .header-nav__mobile-menu .header-menu__item:active:after, .header-nav__mobile-menu .header-menu__item:hover:after {
        display: none
    }

.stampNavBar {
    background-color: var(--colors-gray-100);
    padding: var(--spacing-none)var(--spacing-4xl);
    border-bottom: 1px solid var(--colors-gray-300);
    border-top: 1px solid var(--colors-gray-300);
    align-items: center;
    display: flex;
    position: relative
}

.secondNavBar {
    background-color: var(--colors-gray-100);
    height: 40px;
    padding: var(--spacing-none)var(--spacing-2xl);
    border-bottom: 1px solid var(--colors-gray-300);
    border-top: 1px solid var(--colors-gray-300);
    align-items: center;
    display: flex;
    position: relative
}

.navActions {
    gap: var(--spacing-xl);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-inline: auto;
    display: flex
}

    .navActions .action-buttons {
        align-items: center;
        gap: var(--spacing-sm);
        margin-right: auto;
        display: flex
    }

    .navActions .site-date {
        align-items: center;
        gap: var(--spacing-xs);
        text-align: right;
        flex-shrink: 0;
        margin-left: auto;
        display: flex
    }

    .navActions i {
        font-size: var(--Text-xlF);
        line-height: var(--Text-xlL);
        color: var(--text-default);
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        display: flex
    }

    .navActions button {
        min-width: auto;
        padding: inherit;
        color: var(--colors-text-white);
        background-color: #fff0;
        border: none;
        border-radius: 4px
    }

    .navActions .language-switcher {
        align-items: center;
        gap: var(--spacing-xs);
        width: auto;
        padding: 0 var(--spacing-sm);
        cursor: pointer;
        display: flex
    }

        .navActions .language-switcher i {
            flex-shrink: 0
        }

        .navActions .language-switcher span {
            font-size: var(--Text-smF);
            color: var(--colors-text-white);
            white-space: nowrap;
            line-height: 1
        }

    .navActions .search {
        align-items: center;
        gap: var(--spacing-xs);
        width: auto;
        padding: 0 var(--spacing-sm);
        cursor: pointer;
        display: flex
    }

        .navActions .search i {
            flex-shrink: 0
        }

        .navActions .search span {
            font-size: var(--Text-smF);
            color: var(--colors-text-white);
            white-space: nowrap;
            line-height: 1
        }

    .navActions .site-date i {
        font-size: var(--Text-lgF);
        color: var(--text-default);
        align-items: center;
        display: inline-flex
    }

    .navActions .site-date label {
        font-size: var(--Text-smF);
        color: var(--text-default);
        white-space: nowrap;
        align-items: center;
        margin-inline-end: var(--spacing-xs);
        line-height: 1;
        display: inline-flex;
        margin-bottom: 0 !important
    }

    .navActions .site-date i:last-of-type {
        margin-inline-start: var(--spacing-xs)
    }

    .navActions button: hover {
        background-color: hsla(var(--colors-alpha-white)/40%)
    }

    .navActions button:active {
        background-color: hsla(var(--colors-alpha-white)/50%)
    }

    .navActions button:focus {
        background-color: #fff0;
        outline: 2px solid var(--colors-gray-950) !important
    }

#privacyModal {
    z-index: 1000;
    border: 1px solid var(--colors-gray-300);
    background-color: var(--colors-white);
    border-radius: 25px;
    flex-direction: column;
    width: 20%;
    display: none;
    position: fixed;
    bottom: 0;
    left: 0
}

    #privacyModal button {
        min-width: unset
    }

.sitemap {
    padding: var(--spacing-lg);
    font-size: var(--Text-mdF)
}

.sitemap-subtitle {
    color: var(--text-default)
}

.sitemap-sub span {
    color: var(--text-default);
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
    display: block
}

.sitemap-page {
    margin: var(--spacing-none);
    color: var(--colors-brand-600);
    padding-left: 0;
    list-style-type: none
}

    .sitemap-page > li > ul {
        margin: 0;
        padding: 0
    }

    .sitemap-page > li {
        margin-left: var(--spacing-lg);
        padding-left: var(--spacing-sm);
        list-style-type: disc
    }

        .sitemap-page > li::marker {
            font-size: 1.5em
        }

        .sitemap-page > li > ul {
            margin-left: var(--spacing-xl);
            padding-left: var(--spacing-none);
            list-style-type: circle
        }

            .sitemap-page > li > ul > li::marker {
                font-size: 1.2em
            }

    .sitemap-page li {
        margin-bottom: var(--spacing-md)
    }

    .sitemap-page a {
        font-size: var(--Text-mdF);
        line-height: var(--Text-mdL);
        color: var(--colors-brand-600);
        font-family: inherit;
        text-decoration: none
    }

        .sitemap-page a:hover {
            color: var(--colors-brand-400);
            text-decoration: underline
        }

        .sitemap-page a:active {
            color: var(--colors-brand-300);
            text-decoration: underline
        }

        .sitemap-page a:visited {
            color: var(--colors-brand-800);
            text-decoration: underline
        }

        .sitemap-page a:focus {
            outline: 2px solid var(--colors-gray-950) !important
        }

.news-header {
    padding: 10px 0
}

.news-title-container {
    align-items: center;
    gap: 10px;
    display: flex
}

.highlight-bar {
    background-color: #bf9d42;
    width: 5px;
    height: 28px
}

.search-result-count {
    color: var(--text-default);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-4xl);
    font: 400 14px/20px IBMPlexSans-Regular
}

.search-result-heading {
    padding-top: var(--spacing-4xl);
    font: 700 30px/38px IBMPlexSans-Bold
}

.search-result {
    gap: var(--spacing-sm);
    padding: var(--spacing-lg)var(--spacing-none);
    flex-direction: column;
    display: flex
}

.search-result-tags {
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    display: flex
}

.search-result-link {
    font: 400 16px/24px IBMPlexSans-Regular
}

.search-result-descr {
    font-size: var(--Text-mdF);
    color: var(--text-default);
    line-height: 1.5
}

.search-result-date {
    font-size: var(--Text-xsF);
    color: var(--colors-gray-900)
}

.breadcrumb-content {
    --bs-breadcrumb-padding-x: 0;
    --bs-breadcrumb-padding-y: 0;
    --bs-breadcrumb-margin-bottom: 1rem;
    --bs-breadcrumb-bg:;
    --bs-breadcrumb-border-radius:;
    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
    --bs-breadcrumb-item-padding-x: .5rem;
    --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
    padding: var(--bs-breadcrumb-padding-y)var(--bs-breadcrumb-padding-x);
    margin-bottom: var(--bs-breadcrumb-margin-bottom);
    font-size: var(--bs-breadcrumb-font-size);
    background-color: var(--bs-breadcrumb-bg);
    border-radius: var(--bs-breadcrumb-border-radius);
    flex-wrap: nowrap;
    list-style: none;
    display: flex;
    margin: var(--spacing-none) !important;
    padding: var(--spacing-none) !important
}

#inner-breadcrump {
    background-color: var(--colors-brand-25);
    padding: var(--spacing-5xl)var(--spacing-none)
}

    #inner-breadcrump .page-container {
        gap: var(--spacing-md);
        flex-direction: column;
        display: flex
    }

.breadcrumb-content {
    margin: var(--spacing-none) !important;
    padding: var(--spacing-none) !important
}

.breadcrumb-content-bottom {
    gap: var(--spacing-xl);
    display: flex
}

#inner-breadcrump .page-title {
    font: 700 30px/38px IBMPlexSans-Bold;
    line-height: var(--Display-smL);
    color: var(--text-default)
}

.breadcrumb-content ul.inner-brc {
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.inner-brc .brc-item {
    align-items: center;
    display: inline-flex
}

.breadcrumb-content ul.inner-brc li a {
    font-size: var(--Text-smF);
    line-height: var(--Text-smL);
    color: var(--colors-gray-700);
    align-items: center;
    gap: var(--spacing-xs);
    text-decoration: none;
    display: inline-flex
}

    .breadcrumb-content ul.inner-brc li a:hover {
        color: var(--colors-gray-500);
        text-decoration: underline
    }

    .breadcrumb-content ul.inner-brc li a:active {
        color: var(--colors-gray-400);
        text-decoration: underline
    }

    .breadcrumb-content ul.inner-brc li a:focus {
        outline: 2px solid var(--colors-gray-950) !important
    }

.breadcrumb-content li:not(:first-child) {
    margin-right: var(--spacing-xxs) !important
}

.breadcrumb-content ul.inner-brc li span.active {
    font-size: var(--Text-smF);
    line-height: var(--Text-smL);
    cursor: default;
    color: var(--colors-gray-400) !important
}

.breadcrumb-content-item {
    display: none !important
}

.breadcrumb-content a.bc-node:after, .breadcrumb-content a.breadcrumb-content-item:after {
    content: "";
    width: 16px;
    height: 16px;
    fill: var(--colors-gray-950);
    background: url("data:image/svg+xml,<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.60372 8.55529C6.7256 8.71666 7.08951 9.1984 7.30624 9.47611C7.74031 10.0323 8.33342 10.7714 8.97323 11.5083C9.61627 12.2489 10.2918 12.9702 10.8919 13.5005C11.1928 13.7663 11.4571 13.9684 11.6753 14.0999C11.8804 14.2235 12.0016 14.2493 12.0016 14.2493C12.0016 14.2493 12.1192 14.2235 12.3244 14.0999C12.5425 13.9684 12.8068 13.7663 13.1078 13.5005C13.7079 12.9702 14.3834 12.2489 15.0264 11.5083C15.6662 10.7714 16.2593 10.0323 16.6934 9.47608C16.9101 9.19837 17.2735 8.7173 17.3954 8.55593C17.6411 8.22241 18.1111 8.15047 18.4446 8.3961C18.7781 8.64173 18.8494 9.11123 18.6037 9.44476L18.6018 9.4473C18.474 9.61655 18.0971 10.1156 17.8759 10.3989C17.4321 10.9677 16.8216 11.7286 16.1591 12.4917C15.4997 13.2511 14.7741 14.0298 14.101 14.6245C13.7653 14.9212 13.425 15.1879 13.0988 15.3845C12.7932 15.5687 12.4063 15.75 11.9998 15.75C11.5933 15.75 11.2064 15.5687 10.9008 15.3845C10.5747 15.1879 10.2344 14.9212 9.89869 14.6245C9.22557 14.0298 8.4999 13.2511 7.84058 12.4917C7.17803 11.7286 6.5676 10.9677 6.12372 10.399C5.90243 10.1154 5.52551 9.61637 5.39793 9.44747L5.39628 9.44528C5.15064 9.11176 5.22154 8.64179 5.55506 8.39615C5.88857 8.15053 6.35808 8.22179 6.60372 8.55529Z\" fill=\"%23161616\"/></svg>");
    display: inline-block;
    rotate: 90deg
}

#inner-breadcrump.inner-content {
    padding: var(--spacing-5xl)var(--spacing-none)var(--spacing-md)var(--spacing-none)
}

    #inner-breadcrump.inner-content .page-title {
        width: 68%;
        min-height: 76px
    }

.breadcrump-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto
}

.breadcrumb-bottom {
    padding: var(--spacing-md)var(--spacing-none)
}

.page-container {
    padding: var(--spacing-5xl)var(--spacing-8xl)
}

.page-content {
    gap: var(--spacing-4xl);
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
    display: flex
}

.home-page-container {
    padding: var(--spacing-5xl)var(--spacing-none)
}

.home-page-content {
    max-width: 1280px;
    padding: var(--spacing-none)var(--spacing-4xl);
    margin: 0 auto
}

.page-content .readerContent {
    flex: 3
}

.side-menu {
    flex: 0 0 350px;
    padding: 0
}

.wrapper {
/*    background-color: var(--form-field-background-default)*/
}

.DefaultContentBlock {
    width: 100%;
    max-width: 1200px;
    padding: var(--spacing-4xl)var(--spacing-lg)
}

.card__content-text h4 {
    color: var(--text-default) !important
}

.btn a:hover {
    color: inherit
}

.embla2 {
    --slide-spacing2: 20px;
    --slide-size2: 150px;
    max-width: calc(100% - 160px);
    margin: auto
}

@media screen and (max-width: 1200px) {
    .embla2 {
        --slide-size2: 200px
    }
}

@media screen and (max-width: 900px) {
    .embla2 {
        --slide-size2: 200px
    }
}

@media screen and (max-width: 500px) {
    .embla2 {
        --slide-size2: 200px
    }
}

.embla__container2 {
    touch-action: pan-y pinch-zoom;
    margin-right: calc(var(--slide-spacing2)*-1);
    display: flex
}

.embla__slide2 {
    flex: 0 0 var(--slide-size2);
    min-width: 0;
    padding-right: var(--slide-spacing2);
    transform: translateZ(0)
}

#slideContainer {
    display: flex
}

.embla2[dir=rtl] .embla__container2 {
    flex-direction: row-reverse
}

.embla {
    --slide-spacing: 20px;
    --slide-size: 33.3333%;
    max-width: 100%;
    margin: auto
}

.embla__viewport {
    overflow: hidden
}

.embla__container {
    touch-action: pan-y pinch-zoom;
    margin-left: calc(var(--slide-spacing)*-1);
    direction: rtl;
    transition: transform .5s ease-in-out;
    display: flex
}

.embla__slide {
    flex: 0 0 var(--slide-size);
    min-width: 0;
    padding-left: var(--slide-spacing);
    transform: translateZ(0)
}

.service-description {
    text-overflow: ellipsis;
    direction: rtl;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.Homepage-news-description {
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    direction: rtl;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

@media screen and (max-width: 900px) {
    .embla {
        --slide-size: 50%
    }
}

@media screen and (max-width: 600px) {
    .embla {
        --slide-size: 100%
    }
}

#services-container-wrapper {
    direction: rtl;
    width: 100%;
    overflow: hidden
}

#services-container {
    transition: transform .5s ease-in-out;
    display: flex
}

#stepper-dots span {
    transition: background-color .3s
}

#prev-button, #next-button {
    min-width: unset
}

.KSAUHStopFilter {
    gap: var(--spacing-3xl);
    margin-bottom: var(--spacing-3xl);
    display: flex
}

.Services-Tabs h2 {
    font-family: var(--IBMPlexSansAR-B);
    line-height: var(--Text-xlL);
    color: var(--colors-brand-600);
    margin: var(--spacing-none);
    padding: var(--spacing-md)var(--spacing-none);
    font-size: var(--Text-xlF) !important
}

.KSAUHSFilterDiv {
    flex: 1
}

.input-BAborder, button.form-control {
    border-radius: 3px;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden
}

.KSAUHSFilterDiv .form-control {
    border: 1px solid var(--colors-gray-400);
    min-height: 40px;
    padding: var(--spacing-none)var(--spacing-xl)var(--spacing-none)var(--spacing-md);
    font-size: var(--Text-mdF);
    line-height: var(--Text-mdL);
    border-radius: 4px;
    background-color: #0000 !important
}

    .KSAUHSFilterDiv .form-control:hover {
        border: 1px solid var(--colors-gray-700)
    }

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

.KSAUHSnavDiv {
    flex: 2;
    position: relative
}

    .KSAUHSnavDiv:after {
        content: "";
        background: var(--colors-gray-300);
        border-radius: 20px;
        height: 3px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0
    }

@media (max-width: 768px) {
    .KSAUHStopFilter {
        flex-direction: column;
        align-items: stretch
    }

    .KSAUHSnavDiv, .KSAUHSFilterDiv {
        width: 100%
    }

    .KSAUHSFilterDiv {
        margin-top: var(--spacing-md)
    }
}

.nav-link {
    background: 0 0;
    border: 0;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out
}

.KSAUHSnav-item .nav-link:hover, #KSAUHSnav-MDL .nav-link:hover {
    color: var(--colors-gray-950);
    background-color: var(--colors-gray-100)
}

.KSAUHSnav-item .nav-link.active:hover, #KSAUHSnav-MDL .nav-link.active:hover {
    background-color: #fff0
}

.KSAUHSnav-item .nav-link:active, #KSAUHSnav-MDL .nav-link:active {
    border: 2px solid var(--colors-gray-950);
    background-color: var(--colors-gray-200)
}

    .KSAUHSnav-item .nav-link:hover:after, .KSAUHSnav-item .nav-link:active:after, #KSAUHSnav-MDL .nav-link:hover:after, #KSAUHSnav-MDL .nav-link:active:after {
        content: "";
        background: var(--colors-gray-950);
        border-radius: 9999px;
        width: calc(100% - 16px);
        height: 3px;
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%)
    }

#KSAUHSTab-More .nav-link.active {
    border: 2px solid var(--colors-gray-950)
}

.KSAUHSnav-item .nav-link.active:after, #KSAUHSnav-MDL.show > .nav-link.active:after, #KSAUHSnav-MDL.active-from-dropdown > .nav-link:after {
    content: "";
    background: var(--colors-brand-600);
    border-radius: 9999px;
    width: calc(100% - 16px);
    height: 3px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%)
}

#KSAUHSnav-MDL.show > .nav-link.active, #KSAUHSnav-MDL.active-from-dropdown > .nav-link {
    border: 2px solid #000
}

.KSAUHSnav-item .nav-link.active:after, #KSAUHSnav-MDL.show-active > .nav-link:after {
    content: "";
    background: var(--colors-brand-600);
    border-radius: 9999px;
    width: calc(100% - 16px);
    height: 3px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%)
}

#KSAUHSnav-MDL.show > .nav-link.active {
    border: 2px solid var(--colors-gray-950)
}

.KSAUHSnav-item .nav-link, #KSAUHSnav-MDL .nav-link {
    font-family: var(--IBMPlexSansAR-M);
    font-size: var(--Text-smF);
    line-height: var(--Text-smL);
    z-index: 9;
    padding: var(--spacing-lg)var(--spacing-xl);
    border-radius: 4px;
    outline: 2px solid #fff0;
    position: relative;
    color: var(--colors-gray-700) !important;
    text-decoration: none !important
}

    .KSAUHSnav-item .nav-link:focus {
        color: var(--colors-gray-700)
    }

#KSAUHSTab-More.show > .nav-link {
    border: 2px solid var(--colors-gray-950);
    position: relative
}

    #KSAUHSTab-More.show > .nav-link:after {
        content: "";
        background: var(--colors-brand-600);
        border-radius: 9999px;
        width: calc(100% - 16px);
        height: 3px;
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%)
    }

.KSAUHSnav-item .nav-link:focus-visible, #KSAUHSnav-MDL .nav-link:focus-visible {
    outline-offset: -3px;
    outline: 2px solid #0d121c
}

.KSAUHSnav-item .nav-link:active, #KSAUHSnav-MDL .nav-link:active {
    border: none
}

#KSAUHSnav-MDL {
    display: none
}

    #KSAUHSnav-MDL.show {
        display: block
    }

.serviceDetails-tabs, .services-content {
    margin-top: var(--spacing-3xl);
    width: 65%;
    min-height: 250px
}

    .services-content .services-contentDiv {
        display: none
    }

        .services-content .services-contentDiv.active {
            display: block
        }

.grid-listThree {
    margin: var(--spacing-none);
    padding: var(--spacing-none);
    gap: var(--spacing-3xl);
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: 1fr;
    list-style: none;
    display: grid
}

@media (max-width: 1024px) {
    .grid-listThree {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width: 768px) {
    .grid-listThree {
        grid-template-columns: 1fr
    }
}

ul#KSAUHSTab-More.dropdown-menu.custom-dropdown-menu {
    float: right;
    text-align: right;
    position: absolute;
    top: auto;
    left: auto
}

.alert-body h6 {
    font-size: var(--Text-mdF);
    font-weight: bolder
}

.alert-body > * {
    padding: var(--spacing-xs)var(--spacing-none);
    margin: var(--spacing-none) !important
}

.alert.alert-danger {
    color: var(--colors-error-700);
    background-color: var(--colors-error-25);
    border: 1px solid var(--colors-error-200)
}

.alert-danger {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-link-color: var(--bs-danger-text-emphasis)
}

.alert {
    width: 100%;
    margin: var(--spacing-none);
    padding: var(--spacing-xl)var(--spacing-3xl);
    background: var(--colors-white);
    align-items: center;
    gap: var(--spacing-xl);
    border-radius: 8px;
    flex-direction: row;
    font-family: inherit;
    display: flex;
    position: relative;
    overflow: hidden
}

    .alert.alert-fill.alert-danger.alert-icon:before {
        content: "";
        background: url(data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2020C0%208.95431%208.95431%200%2020%200C31.0457%200%2040%208.95431%2040%2020C40%2031.0457%2031.0457%2040%2020%2040C8.95431%2040%200%2031.0457%200%2020Z%22%20fill%3D%22%23FEF3F2%22%2F%3E%3Cpath%20d%3D%22M19.9998%2016.4583C19.4245%2016.4583%2018.9582%2016.9247%2018.9582%2017.5C18.9582%2017.8451%2018.6783%2018.125%2018.3332%2018.125C17.988%2018.125%2017.7082%2017.8451%2017.7082%2017.5C17.7082%2016.2343%2018.7342%2015.2083%2019.9998%2015.2083C21.2655%2015.2083%2022.2915%2016.2343%2022.2915%2017.5C22.2915%2017.9552%2022.1581%2018.3813%2021.928%2018.7388C21.7839%2018.9628%2021.6154%2019.1766%2021.4601%2019.3697L21.3763%2019.4735C21.2474%2019.633%2021.1291%2019.7795%2021.0197%2019.9298C20.7501%2020.3004%2020.6248%2020.5789%2020.6248%2020.8333V21.25C20.6248%2021.5951%2020.345%2021.875%2019.9998%2021.875C19.6547%2021.875%2019.3748%2021.5951%2019.3748%2021.25V20.8333C19.3748%2020.1672%2019.7018%2019.6164%2020.009%2019.1943C20.1387%2019.016%2020.2809%2018.8401%2020.4102%2018.6802L20.4862%2018.586C20.6405%2018.3942%2020.7719%2018.2255%2020.8768%2018.0624C20.981%2017.9005%2021.0415%2017.7083%2021.0415%2017.5C21.0415%2016.9247%2020.5751%2016.4583%2019.9998%2016.4583Z%22%20fill%3D%22%23B42318%22%2F%3E%3Cpath%20d%3D%22M19.9933%2023.3333C19.5331%2023.3333%2019.16%2023.7064%2019.16%2024.1666C19.16%2024.6269%2019.5331%2025%2019.9933%2025H20.0008C20.461%2025%2020.8341%2024.6269%2020.8341%2024.1666C20.8341%2023.7064%2020.461%2023.3333%2020.0008%2023.3333H19.9933Z%22%20fill%3D%22%23B42318%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.0415%2020C11.0415%2015.0524%2015.0523%2011.0416%2019.9998%2011.0416C24.9474%2011.0416%2028.9582%2015.0524%2028.9582%2020C28.9582%2024.9475%2024.9474%2028.9583%2019.9998%2028.9583C15.0523%2028.9583%2011.0415%2024.9475%2011.0415%2020ZM19.9998%2012.2916C15.7426%2012.2916%2012.2915%2015.7428%2012.2915%2020C12.2915%2024.2572%2015.7426%2027.7083%2019.9998%2027.7083C24.257%2027.7083%2027.7082%2024.2572%2027.7082%2020C27.7082%2015.7428%2024.257%2012.2916%2019.9998%2012.2916Z%22%20fill%3D%22%23B42318%22%2F%3E%3C%2Fsvg%3E) 50%/contain no-repeat;
        width: 40px;
        min-width: 40px;
        height: 40px;
        display: block
    }

    .alert:after {
        content: "";
        background-color: var(--colors-error-400);
        width: 8px;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        right: 0
    }

.alert-body .alert-p {
    text-align: justify;
    font-size: var(--Text-smF);
    color: var(--text-default)
}

#search-results {
    padding: var(--spacing-sm)var(--spacing-none);
    display: none
}

dga-button button#nextButton, dga-button button#prevButton {
    min-width: unset
}




/*.digital-stamp-card {
    background: #f3f4f6;
    padding: 8px 0
}

    .digital-stamp-card .digital-stamp-header {
        align-items: center;
        gap: 10px;
        display: flex
    }

@media (max-width: 768px) {
    .digital-stamp-card .digital-stamp-header {
        flex-wrap: wrap
    }
}

.digital-stamp-card .digital-stamp-header p, .digital-stamp-card .digital-stamp-header h1 {
    color: #384250;
    font: 14px/20px IBMPlexSans-Regular
}

.digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
    cursor: pointer
}

@media (max-width: 768px) {
    .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
        flex: 100%
    }
}

.digital-stamp-link {
    cursor: pointer;
    color: #1b8354;
    font: 14px/20px IBMPlexSans-Regular;
    display: inline-block;
    position: relative
}

    .digital-stamp-link:hover {
        text-decoration: underline;
        color: #54c08a !important
    }

    .digital-stamp-link:active, .digital-stamp-link:visited:active {
        text-decoration: underline;
        color: #88d8ad !important
    }

    .digital-stamp-link:visited {
        text-decoration: underline;
        color: #14573a !important
    }

    .digital-stamp-link:focus {
        outline: 2px solid #0d121c !important
    }

.digital-stamp-card.open .digital-stamp-header .btn-digital-stamp-card i, .digital-stamp-card.open .digital-stamp-header .btn-digital-stamp-card img {
    transition: transform .3s;
    transform: rotate(180deg)
}

.digital-stamp-card .digital-stamp-body {
    padding-top: 40px;
    padding-bottom: 32px;
    display: none
}

.digital-stamp-card.open .digital-stamp-body {
    display: block
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container {
    gap: 32px;
    margin-bottom: 32px;
    display: flex
}

@media (max-width: 768px) {
    .digital-stamp-card .digital-stamp-body .digital-stamp-container {
        flex-direction: column
    }
}

.digital-stamp-card .digital-stamp-body .digital-stamp-container .box {
    align-items: flex-start;
    gap: 18px;
    display: flex
}

    .digital-stamp-card .digital-stamp-body .digital-stamp-container .box .header-stamp {
        color: #0d121c;
        margin-bottom: 12px;
        font-size: 18px;
        font-weight: 700
    }

    .digital-stamp-card .digital-stamp-body .digital-stamp-container .box .green-text {
        color: #1b8354
    }

    .digital-stamp-card .digital-stamp-body .digital-stamp-container .box .body-stamp {
        color: #384250;
        font-size: 16px
    }

.digital-stamp-card .digital-stamp-body .stamp-link-box {
    background: #fff;
    border-radius: 8px;
    align-items: center;
    gap: 12px;
    padding: 8px 28px;
    display: flex
}

    .digital-stamp-card .digital-stamp-body .stamp-link-box p {
        color: #384250;
        font-size: 16px
    }

.stamp-link-box a {
    color: #1b8354;
    font-size: 16px
}

@media (max-width: 768px) {
    .digital-stamp-card .digital-stamp-header {
        grid-template-columns: max-content 1fr;
        display: grid !important
    }

        .digital-stamp-card .digital-stamp-header > img {
            grid-area: 1/1 !important;
            width: 24px !important;
            height: 24px !important
        }

        .digital-stamp-card .digital-stamp-header > p, .digital-stamp-card .digital-stamp-header > h1 {
            white-space: normal !important;
            grid-area: 1/2 !important;
            min-width: 0 !important;
            margin: 0 !important
        }

        .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card {
            grid-area: 2/1/auto/-1 !important;
            justify-content: flex-start !important;
            width: 100% !important;
            margin-top: 0 !important;
            display: flex !important
        }
}*/

.indicator-card {
    border: 1px solid var(--colors-gray-300);
    border-radius: 16px;
    padding: 16px !important
}

.NewsEvent {
    padding: var(--spacing-5xl)0
}

.news-events-container {
    gap: var(--spacing-7xl);
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    max-width: 1280px;
    margin: 0 auto;
    display: grid
}

#NewsArea, #EventsArea {
    height: 100%
}

.NewsHome, .Event-Home {
    gap: var(--spacing-5xl);
    flex-direction: column;
    height: 100%;
    display: flex
}

#carouselHomePageNews {
    height: 100%;
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    flex-direction: column;
    display: flex
}

.carousel-inner {
    flex: 1;
    min-height: 0
}

.UpcomingEvents {
    height: 100%;
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    flex-direction: column;
    display: flex;
    margin: 0 !important
}

.ContentArea {
    border: 1px solid var(--colors-gray-300);
    background-color: var(--colors-white);
    border-radius: 16px;
    height: 100%;
    min-height: 0
}

.HomeNews-item {
    gap: var(--spacing-xl);
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    display: flex
}

    .HomeNews-item img {
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
        width: 100%;
        height: 300px
    }

.HomeNews .Home-news-Date {
    width: fit-content;
    padding: var(--spacing-xxs)var(--spacing-md);
    font-size: var(--Text-xsF);
    margin: var(--spacing-none);
    line-height: var(--Text-xsL);
    border: 1px solid var(--colors-info-200);
    color: var(--colors-info-800);
    background-color: var(--colors-info-50);
    border-radius: 4px;
    position: relative
}

.HomeNews-item .Home-news-Link {
    width: fit-content;
    padding: var(--spacing-md)var(--spacing-xl);
    background-color: var(--colors-brand-600);
    color: var(--colors-white);
    margin: var(--spacing-xxs);
    border-radius: 4px;
    font: 500 1.6rem/2.4rem IBMPlexSans-Medium;
    text-decoration: none
}

    .HomeNews-item .Home-news-Link:hover {
        background-color: var(--colors-brand-700)
    }

    .HomeNews-item .Home-news-Link:active {
        background-color: var(--colors-brand-900) !important
    }

    .HomeNews-item .Home-news-Link:focus {
        padding: 7px var(--spacing-xl);
        background-color: var(--colors-brand-600);
        border: 1px solid var(--colors-white);
        outline: 2px solid var(--colors-gray-950) !important
    }

.HomeNews-item .card-body {
    gap: var(--spacing-md);
    flex-direction: column;
    padding: 0;
    display: flex
}

    .HomeNews-item .card-body .Home-news-title {
        color: #0d121c;
        font-weight: 700;
        font-size: var(--Text-lgF);
        line-height: var(--Text-lgL);
        text-align: justify;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        margin: var(--spacing-none);
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .HomeNews-item .card-body .Home-news-brief {
        text-align: justify;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        color: #384250;
        font-size: var(--Text-mdF);
        line-height: var(--Text-mdL);
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

.UpcomingEvents > div {
    flex: 1;
    height: 100%
}

#carouselHomePageNews .sectionPrevNextBtnDiv {
    bottom: var(--spacing-xl);
    left: var(--spacing-xl);
    gap: var(--spacing-md);
    z-index: 2;
    display: flex;
    position: absolute
}

html[lang=en] #carouselHomePageNews .sectionPrevNextBtnDiv {
    right: var(--spacing-xl);
    left: auto
}

#carouselHomePageNews .sectionPrevNextBtnDiv i {
    color: var(--colors-gray-950);
    font-size: var(--Display-xsF);
    line-height: var(--Display-xsF);
    display: inline-block
}

html[lang=en] #carouselHomePageNews .sectionPrevNextBtnDiv i {
    transform: rotate(180deg)
}

#carouselHomePageNews .sectionPrevNextBtnDiv button {
    border: 0 solid var(--colors-gray-300);
    background-color: var(--colors-brand-600);
    border-radius: 4px;
    min-width: 40px;
    height: 40px;
    transition: all .2s;
    position: relative
}

    #carouselHomePageNews .sectionPrevNextBtnDiv button svg path {
        fill: var(--colors-gray-950)
    }

    #carouselHomePageNews .sectionPrevNextBtnDiv button:active {
        background-color: var(--colors-gray-200);
        border-color: var(--colors-gray-300)
    }

    #carouselHomePageNews .sectionPrevNextBtnDiv button:focus {
        min-width: 38px;
        height: 38px;
        outline: 2px solid var(--colors-gray-950) !important
    }

    #carouselHomePageNews .sectionPrevNextBtnDiv button:hover {
        background-color: var(--colors-gray-50);
        border-color: var(--colors-gray-200)
    }

div.dt-container .dt-length, div.dt-container .dt-search, div.dt-container .dt-info, div.dt-container .dt-processing, div.dt-container .dt-paging, .dt-column-title {
    color: inherit;
    font-size: 14px
}

.box-link {
    padding: var(--spacing-none);
    margin: var(--spacing-none);
    gap: var(--spacing-3xl);
    grid-auto-rows: 1fr;
    justify-content: center;
    display: grid;
    list-style: none !important
}

    .box-link.four {
        grid-template-columns: repeat(4,1fr)
    }

    .box-link.three {
        grid-template-columns: repeat(3,1fr)
    }

    .box-link.two {
        grid-template-columns: repeat(2,1fr)
    }

    .box-link.one {
        grid-template-columns: repeat(1,1fr)
    }

.box-link-item span {
    width: 100%;
    font-size: var(--Text-mdF);
    line-height: var(--Text-mdL);
    color: var(--colors-gray-800) !important
}

.box-link-item a {
    border: 1px solid var(--colors-gray-300);
    background-color: var(--colors-white);
    gap: var(--spacing-3xl);
    border-radius: 16px;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
    width: 100%;
    min-height: 100px;
    text-decoration: none;
    display: flex
}

li.box-link-item {
    width: 100%;
    display: -webkit-inline-box
}

.box-link-item a:after {
    content: "";
    background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" color=\"%23000000\" fill=\"none\"><path d=\"M3.99982 11.9998L19.9998 11.9998\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /><path d=\"M8.99963 17C8.99963 17 3.99968 13.3176 3.99966 12C3.99965 10.6824 8.99966 7 8.99966 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" /></svg>") 50% no-repeat;
    background-color: var(--colors-gray-100);
    border-radius: 4px;
    display: inline-block;
    width: 62px !important;
    min-width: 62px !important;
    height: 40px !important
}

html[lang=en] .box-link-item a:after {
    rotate: 180deg
}

.box-link-item a:hover:after {
    background-color: var(--colors-gray-200)
}

.box-link-item a:visited:after {
    color: var(--colors-white)
}

.box-link-item a:focus, .box-link-item a:hover, .box-link-item a:active {
    text-decoration: none
}

.box-link-item a:focus {
    outline: 0 !important
}

    .box-link-item a:focus:after {
        outline: 2px solid var(--colors-gray-950) !important
    }

.home-page-content .embla .box-link-item a:after, .Services-Tabs .box-link-item a:after {
    background-color: #1b8354;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'><path d='M4 12H20' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 17C9 17 4 13.3 4 12C4 10.7 9 7 9 7' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-position: 50%;
    background-repeat: no-repeat
}

.home-page-content .embla .box-link-item a:hover:after, .home-page-content .embla .box-link-item-external a:hover:after, .Services-Tabs .box-link-item a:hover:after, .Services-Tabs .box-link-item-external a:hover:after {
    background-color: var(--colors-brand-700) !important
}

.home-page-content .embla .box-link-item a:active:after, .home-page-content .embla .box-link-item-external a:active:after, .Services-Tabs .box-link-item a:active:after, .Services-Tabs .box-link-item-external a:active:after {
    background-color: var(--colors-brand-900) !important
}

.home-page-content .embla .box-link-item a:focus:after, .home-page-content .embla .box-link-item-external a:focus:after, .Services-Tabs .box-link-item a:focus:after, .Services-Tabs .box-link-item-external a:focus:after {
    background-color: var(--colors-brand-600);
    outline-offset: 1px;
    outline: 2px solid var(--colors-gray-950) !important
}

.home-page-content .embla .box-link-item-external a:after, .Services-Tabs .box-link-item-external a:after {
    background-color: #1b8354 !important;
    background-image: url(https://www.ksau-hs.edu.sa/English/SiteAssets/images/external_link_white_24.svg) !important;
    background-position: 50% !important;
    background-repeat: no-repeat !important
}

.box-icon {
    width: 100%;
    height: 40px
}

.visually-hidden {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

.clamp-1 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.img-hero {
    object-fit: fill;
    z-index: 0;
    width: 100%;
    height: 550px;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(-1)
}

@media (max-width: 1400px) {
    .img-hero {
        object-fit: cover
    }
}

.dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length {
    font-size: 14px
}

.dataTables_wrapper {
    padding: var(--spacing-sm)
}

    .dataTables_wrapper .dataTables_filter label {
        align-items: center;
        gap: 8px;
        display: flex
    }

button.close-cookie {
    text-decoration: none !important
}

#carouselAlumniPage i {
    color: var(--colors-brand-900);
    font-size: var(--Display-smL);
    line-height: var(--Display-smL);
    display: inline-block
}

#carouselAlumniPage button {
    background-color: #fff0;
    border: none;
    width: 80px;
    transition: all .2s
}

a.EventList-item:focus {
    outline: 2px solid #0d121c !important
}

a.EventList-item:active {
    background-color: #e5e7eb
}

a.EventList-item {
    color: #0d121c;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    font-size: 24px;
    line-height: 32px;
    text-decoration: none;
    display: flex
}

    a.EventList-item:hover {
        background-color: #f3f4f6
    }

.ms-srch-item {
    width: 100%;
    padding: var(--spacing-xl);
    border: 1px solid var(--colors-gray-300);
    border-radius: 16px;
    margin: 0;
    font-family: IBMPlexSans-Regular !important
}

    .ms-srch-item .ms-srch-item-body {
        width: 100%
    }

.ms-srch-item-title {
    font-size: var(--Text-lgF);
    vertical-align: middle;
    margin: 0;
    display: inline-block
}

.ms-srch-item-link {
    line-height: var(--Text-lgL);
    font-weight: 700;
    color: var(--colors-brand-600) !important;
    padding: var(--spacing-none) !important;
    border-radius: var(--radius-xs) !important;
    align-items: center !important;
    gap: 8px !important;
    display: inline-flex !important
}

.ms-srch-item-summary {
    color: var(--colors-neutral-800);
    font-family: IBMPlexSans-Regular;
    font-size: var(--Text-mdF);
    line-height: var(--Text-mdL);
    margin-top: 8px;
    display: block
}

.ms-srch-item-lastModified {
    font-size: var(--Text-smF);
    color: var(--colors-gray-600);
    margin-top: 8px;
    font-family: IBMPlexSans-Regular
}

.ms-srch-item-highlightedText {
    color: var(--colors-brand-600)
}

.ms-srch-item:hover {
    background-color: var(--colors-gray-50)
}

.ms-srch-result-groups {
    margin-bottom: 0 !important
}

.ms-srch-group-content {
    gap: var(--spacing-3xl);
    flex-direction: column;
    display: flex
}

.ms-srch-item-icon {
    vertical-align: middle;
    margin-top: 0;
    height: 16px;
    margin-inline-end: 8px;
    display: inline-block;
    float: none !important;
    padding: 0 !important
}

    .ms-srch-item-icon img {
        width: 16px;
        height: 16px;
        display: block
    }

.ms-srch-item-icon {
    margin-left: 8px
}

.pagination--large .pagination__item button {
    font-size: 16px
}

.dga-search-box {
    position: relative
}

    .dga-search-box:after {
        content: "";
        background-color: var(--form-field-border-pressed,#000);
        width: 0%;
        height: 2px;
        transition: width .2s ease-in-out;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%)
    }

    .dga-search-box:focus-within:after {
        width: 100%
    }

#content p {
    margin: 0 !important;
    line-height: normal !important
}

.tawasul-form .custom-green-bg {
    color: #fff;
    background-color: #1b8354
}

#arabot-ai-tip, #arabot-ai-tip2 {
    display: none !important
}

.event-details-timeline {
    grid-template-columns: 1fr 1fr;
    gap: 36px 0;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    position: relative
}

    .event-details-timeline:before {
        content: "";
        background: #eceaef;
        width: 2px;
        position: absolute;
        top: 16px;
        bottom: 44px;
        left: calc(50% - 1px)
    }

    .event-details-timeline:after {
        content: "";
        background: #f0f8f4;
        border-radius: 999px;
        width: 14px;
        height: 14px;
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translate(-50%);
        box-shadow: inset 0 0 0 3px #326d520f
    }

    .event-details-timeline .col {
        position: relative
    }

        .event-details-timeline .col.right {
            grid-column: 2
        }

        .event-details-timeline .col.left {
            grid-area: 2/1
        }

    .event-details-timeline .day {
        background: #fff;
        padding: 0 24px;
        position: relative
    }

        .event-details-timeline .day:before {
            content: "";
            background: #f0f8f4;
            border: 4px solid #326d520f;
            border-radius: 999px;
            width: 40px;
            height: 40px;
            position: absolute;
            transform: translate(50%)
        }

    .event-details-timeline .col.right .day:before {
        right: -15px
    }

    .event-details-timeline .col.left .day:before {
        left: -55px
    }

    .event-details-timeline .program-pill {
        text-align: center;
        color: #1f2a37;
        background: #e8f4ee;
        border-radius: 4px;
        width: 100%;
        margin: 6px 0 12px;
        padding: 10px 14px;
        font-weight: 700;
        display: inline-block
    }

    .event-details-timeline .agenda {
        margin: 0 24px 0 0;
        padding-right: 1.25rem;
        list-style: outside
    }

    .event-details-timeline .col.left .day-title, .event-details-timeline .col.left .day-date {
        text-align: left
    }

@media (max-width: 992px) {
    .event-details-timeline {
        grid-template-columns: 1fr
    }

        .event-details-timeline .col.right {
            order: 1;
            grid-area: auto
        }

        .event-details-timeline .col.left {
            order: 2;
            grid-area: auto;
            margin-top: 8px
        }

        .event-details-timeline .col.right {
            order: 1
        }

        .event-details-timeline .col.left {
            order: 2;
            margin-top: 8px
        }

            .event-details-timeline .col.right .day:before, .event-details-timeline .col.left .day:before {
                left: auto;
                right: calc(50% - 20px)
            }

        .event-details-timeline .day {
            padding: 0 16px
        }
}

.event-details-timeline .sr-only {
    clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute !important
}

@media (max-width: 992px) {
    .event-details-timeline {
        grid-template-columns: 1fr;
        row-gap: 24px
    }

        .event-details-timeline:before, .event-details-timeline:after, .event-details-timeline .day:before {
            content: none
        }

        .event-details-timeline .col.left .day-title, .event-details-timeline .col.left .day-date {
            text-align: right !important
        }
}

.featured-icon {
    font-size: 0
}

    .featured-icon img {
        font-size: 16px
    }

.input > input[type=text], .input input[type=tel], .input input[type=email] {
    border: none
}

    .input input[type=text]:hover, .input input[type=tel]:hover, .input input[type=email]:hover, .input input[type=text]:focus, .input input[type=tel]:focus, .input input[type=email]:focus {
        border-color: none
    }

button:hover, button:hover, button:active, button:active {
    border-color: inherit;
    background-color: inherit
}

#feedback_main p, #feedback_yes p, #feedback_no p, #feedback_response p {
/*    color: #0d121c*/
}

@media (min-width: 1161px) {
    .ksau-number-iframe {
        width: 100%;
        max-width: 100%;
        height: 600px
    }
}

@media (max-width: 1161px) and (min-width:1069px) {
    .ksau-number-iframe {
        width: 500px;
        height: 350px
    }

    .before-table-ksau-number {
        width: 500px;
        height: 200px
    }

    #s4-bodyContainer .ng-scope .inner-page-general #APIDetails .table-wrapper.table-contained {
        width: 500px;
        height: 100%
    }
}

@media (min-width: 770px) {
    .ahsaa-campus-row-full {
        width: 100%
    }
}

.radio {
    margin: 0;
    padding: 0 0 8px 16px
}

.header-menu__btn.hgi-stroke {
    display: none
}

@media only screen and (max-width: 1500px) {
    .body-container {
        margin: var(--spacing-lg)var(--spacing-2xl);
        max-width: calc(100% - 32px) !important
    }

    .sub-menu__container {
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        grid-template-columns: repeat(4,minmax(300px,1fr))
    }

    .sub-menu__section {
        gap: var(--spacing-md);
        padding: var(--spacing-lg)var(--spacing-4xl)
    }

    .header-menu__item-label, .header-menu__item-arrow i, .sub-menu__link--on-color, .sub-menu__link-label {
        font-size: var(--Text-mdF)
    }

    .sub-menu__column-title {
        font-size: var(--Text-mdF);
        margin-bottom: var(--spacing-md)
    }
}

@media only screen and (max-width: 1280px) {
    .page-container {
        margin: var(--spacing-none)var(--spacing-4xl);
        max-width: calc(100% - 32px) !important
    }

    .header-menu__wrapper {
        width: 100%;
        padding: var(--spacing-sm)var(--spacing-sm)
    }

    .header-nav__menu {
        width: 100%
    }

    .header-menu__item {
        padding: var(--spacing-none)var(--spacing-xs)
    }

    .header-menu__item-label, .header-menu__item-arrow i {
        font-size: var(--Text-smF)
    }

    .sub-menu__container {
        gap: var(--spacing-xs) !important;
        padding: var(--spacing-md) !important;
        grid-template-columns: repeat(4,minmax(250px,1fr)) !important
    }

    .sub-menu__section {
        gap: var(--spacing-xs);
        padding: var(--spacing-md)var(--spacing-4xl)
    }

    .sub-menu__link--on-color, .sub-menu__link-label {
        font-size: var(--Text-smF)
    }

    .sub-menu__column-title {
        font-size: var(--Text-mdF);
        margin-bottom: var(--spacing-xs)
    }

    .feedback_wrapper, .breadcrump-container {
        padding: var(--spacing-none)var(--spacing-4xl)
    }
}

@media only screen and (max-width: 1068px) {
    .page-container {
        margin: var(--spacing-none);
        padding: var(--spacing-4xl);
        max-width: 100%
    }

        .page-container .page-content {
            flex-direction: column
        }

    .side-menu {
        margin-bottom: var(--spacing-4xl);
        order: 1
    }

    .readerContent {
        order: 2
    }

    .secondNavBar {
        padding: var(--spacing-none)var(--spacing-4xl)
    }

    .header-nav--full {
        align-items: center;
        width: 100%;
        display: flex
    }

        .header-nav--full dga-nav-header-logos {
            justify-content: flex-end;
            align-items: center;
            width: 100%;
            display: flex
        }

    .header-menu__btn.hgi-stroke {
        visibility: visible;
        order: 1;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .header-nav__branding {
        flex-shrink: 0;
        order: 2;
        justify-content: flex-start;
        margin-left: auto;
        display: flex
    }

    .header-nav__main, .header-nav__actions {
        display: none
    }

    .header-nav__mobile-menu.open {
        display: flex
    }

    .header-nav__mobile-menu .header-menu__item-label {
        font-size: var(--Text-mdF);
        line-height: var(--Text-mdL)
    }

    .digital-stamp-card .digital-stamp-body .digital-stamp-container .box h6 {
        font-size: 16px
    }

    .digital-stamp-card .digital-stamp-header .btn-digital-stamp-card span {
        font-size: 12px
    }

    .digital-stamp-card .digital-stamp-body .digital-stamp-container .box p, .digital-stamp-card .digital-stamp-body .stamp-link-box p, .digital-stamp-card .digital-stamp-body .stamp-link-box a {
        font-size: 14px
    }
}

@media only screen and (max-width: 56.25em) {
    .header-menu__wrapper {
        padding: var(--spacing-sm)var(--spacing-sm);
        flex-direction: column;
        overflow: hidden
    }

    .header-nav__menu {
        display: inline-flex
    }
}

@media (max-width: 768px) {
    .page-container {
        margin: var(--spacing-none);
        padding: var(--spacing-4xl);
        max-width: 100%
    }

        .page-container .page-content {
            flex-direction: column
        }

    .side-menu {
        margin-bottom: var(--spacing-4xl);
        order: 1
    }

    .readerContent {
        order: 2
    }

    .secondNavBar {
        padding: var(--spacing-none)var(--spacing-4xl)
    }

    .header-nav--full {
        align-items: center;
        width: 100%;
        display: flex
    }

        .header-nav--full dga-nav-header-logos {
            justify-content: flex-end;
            align-items: center;
            width: 100%;
            display: flex
        }

    .header-menu__btn.hgi-stroke {
        visibility: visible;
        order: 1;
        justify-content: center;
        align-items: center;
        display: flex
    }

    .header-nav__branding {
        flex-shrink: 0;
        order: 2;
        justify-content: flex-start;
        display: flex
    }

    .header-nav__main, .header-nav__actions {
        display: none
    }

    .header-nav__mobile-menu.open {
        display: flex
    }

    .header-nav__mobile-menu .header-menu__item-label {
        font-size: var(--Text-smF);
        line-height: var(--Text-smL)
    }
}

@media only screen and (max-width: 960px) {
    .footer__nav-links {
        direction: inherit;
        grid-template-columns: repeat(2,1fr);
        display: grid
    }

    .footer__logos {
        flex-direction: column;
        align-items: center;
        display: flex
    }

    .social-links {
        justify-content: center;
        gap: 15px;
        display: flex
    }

    .footer__actions-copyright {
        text-align: center;
        display: block
    }

        .footer__actions-copyright > * {
            margin-bottom: var(--spacing-md)
        }

        .footer__actions-copyright > :last-child {
            margin-bottom: 0
        }

    .footer__actions {
        justify-content: center;
        align-items: center;
        gap: 20px;
        display: flex
    }

    .footer__basic {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        display: flex
    }
}

@media only screen and (max-width: 600px) {
    .footer__nav-links {
        flex-direction: column;
        align-items: flex-start;
        display: flex
    }

    .footer__nav-links-column-title {
        font: 500 16px/24px IBMPlexSans-Medium
    }
}

@media only screen and (max-width: 991px) {
    .breadcrumb ul.Inner-brc li span.active {
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        max-width: 400px;
        display: -webkit-box;
        overflow: hidden
    }
}

@media only screen and (max-width: 600px) {
    #inner-breadcrump .page-title {
        font-size: var(--Text-xlF);
        line-height: var(--Text-xlL);
        text-align: justify
    }

    .breadcrumb ul.Inner-brc li span.active {
        max-width: 100%
    }

    .breadcrumb ul.Inner-brc {
        grid-row-gap: var(--spacing-md);
        flex-direction: column
    }

    .breadcrumb li:last-child {
        grid-area: 2/1/2/2;
        width: 100%
    }
}

@media (min-width: 1280px) {
    .home-page-content {
        padding: 0
    }
}

@media (max-width: 1024px) {
    .home-page-container {
        padding: var(--spacing-4xl)var(--spacing-none)
    }

    .home-page-content {
        max-width: 100%
    }
}

@media (max-width: 768px) {
    .home-page-container {
        padding: var(--spacing-3xl)var(--spacing-none)
    }

    .home-page-content {
        max-width: 100%
    }
}

@media (max-width: 480px) {
    .home-page-container {
        padding: var(--spacing-2xl)var(--spacing-none)
    }

    .home-page-content {
        max-width: 100%
    }
}

@media only screen and (max-width: 1280px) {
    .news-events-container {
        margin: var(--spacing-none)var(--spacing-4xl);
        max-width: calc(100% - 32px) !important
    }

    .Home-sectionTitle {
        font-size: var(--Display-xsF);
        line-height: var(--Display-xsL)
    }

    .HomeNews-item .card-body .Home-news-brief {
        font-size: var(--Text-smF);
        line-height: var(--Text-smL)
    }
}

@media only screen and (max-width: 991px) {
    .news-events-container {
        gap: var(--spacing-3xl);
        flex-direction: column;
        display: flex;
        width: calc(100% - 62px) !important
    }

    .HomeNews-item img {
        height: 250px
    }

    .UpcomingEvents {
        max-width: 100%
    }

    #carouselKSAU button i {
        width: 32px;
        height: 32px;
        font-size: var(--Text-mdF);
        line-height: var(--Text-mdL)
    }

    #carouselKSAU .carousel-control-next, #carouselKSAU .carousel-control-prev {
        width: 32px;
        height: 32px;
        min-width: 32px !important
    }
}

@media only screen and (max-width: 771px) {
    #carouselKSAU .carousel-indicators li {
        width: 9px;
        height: 9px
    }

    .DescrBannerDiv .Descrtext .subtitle {
        text-align: justify;
        max-width: 230px
    }
}

@media only screen and (max-width: 991px) {
    .grid-listFour, .ImgGallery, .box-link.three, .box-link.four {
        grid-template-columns: repeat(2,1fr)
    }

    .grid-listTwo, .box-link.two {
        grid-template-columns: repeat(1,1fr)
    }
}

@media (max-width: 1500px) {
    #privacyModal {
        width: 100% !important
    }
}

@media (max-width: 640px) {
    .clamp-1 {
        white-space: normal;
        text-overflow: unset;
        overflow: visible
    }
}

#accreditation, #accreditation > * {
    align-items: center;
    gap: 10px;
    font-size: x-small;
    display: flex
}

    #accreditation > * {
        gap: 5px
    }

    #accreditation .logo {
        aspect-ratio: 1;
        background: #ffffffe9 url(https://ksau-hs.edu.sa/SiteAssets/img/ksauLogo.svg) 50%/cover no-repeat;
        border-radius: 100%;
        width: 62px;
        margin: 0 auto;
        transition: all .3s
    }

    #accreditation > :not(:has(>.logo)) {
        aspect-ratio: 1;
        background: #ffffffe9 url(https://ksau-hs.edu.sa/SiteAssets/img/ksauLogo.svg) 50%/cover no-repeat;
        border-radius: 100%;
        width: 62px;
        margin: 0 auto;
        transition: all .3s
    }

    #accreditation .logo:hover {
        transform: scale(2.5);
        box-shadow: 0 0 5px
    }

    #accreditation .ncaaa.logo {
        background-image: url(https://ksau-hs.edu.sa/SiteAssets/img/ncaaa.svg)
    }

    #accreditation .nelc .logo {
        background-image: url(https://ksau-hs.edu.sa/Arabic/MediaCenter/News/PublishingImages/Pages/ksau-win/Mor.webp)
    }

@media (max-width: 991px) {
    .org-chart-scroll-wrapper-ar, .org-chart-scroll-wrapper-en {
        -webkit-overflow-scrolling: touch;
        width: 100vw;
        max-width: 100vw;
        display: block;
        position: relative;
        overflow-x: auto
    }

        .org-chart-scroll-wrapper-ar .ksau-chart, .org-chart-scroll-wrapper-en .ksau-chart-En {
            width: 1100px;
            min-width: 100%
        }

    #box1 {
        position: relative;
        top: -19px !important
    }

    #box2, #box4 {
        position: relative;
        top: -14px !important
    }

    #box5 {
        position: relative;
        top: 8px !important
    }

    .colleges-row:before {
        top: 54px !important
    }
}

.ksau-chart .box {
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important
}

.ksau-chart .org-chart-wrapper {
    background-color: #fff;
    border: none;
    border-radius: 10px;
    width: 100%;
    margin: 0 auto;
    padding: 20px
}

.ksau-chart .org-chart {
    flex-direction: column;
    align-items: center;
    display: flex
}

.ksau-chart .box {
    background-color: #e5e7eb;
    border: 1px solid #6c737f;
    border-radius: 50px;
    width: 160px;
    margin: 2px;
    padding: 8px 12px;
    font-weight: 400;
    display: inline-block;
    position: relative;
    box-shadow: 0 2px 6px #0000001a
}

    .ksau-chart .box.dark-green {
        color: #fff;
        background-color: #166a45;
        border: 1px solid #166a45;
        font-weight: 700
    }

    .ksau-chart .box.green {
        background-color: #dff6e7;
        border: 1px solid #166a45;
        font-weight: 700
    }

.ksau-chart .line-down {
    background-color: #999;
    width: 2px;
    height: 30px;
    margin: 0 auto;
    position: relative
}

.ksau-chart .dual-branches {
    justify-content: center;
    gap: 40px;
    margin-top: -174px;
    display: flex;
    position: relative
}

.ksau-chart .horizontal-line {
    background-color: #999;
    width: 40px;
    height: 2px;
    display: inline-block
}

.ksau-chart .branch-layout {
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-top: 20px;
    display: flex;
    position: relative
}

.ksau-chart .branch-horizontal {
    align-items: center;
    display: flex;
    position: relative
}

    .ksau-chart .branch-horizontal.right .horizontal-line {
        margin-left: -22px
    }

    .ksau-chart .branch-horizontal.left .horizontal-line {
        margin-right: -67px
    }

.ksau-chart .vertical-branch {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    display: flex;
    position: relative
}

    .ksau-chart .vertical-branch.right {
        margin-right: 20px
    }

    .ksau-chart .vertical-branch.left {
        margin-left: 20x
    }

.ksau-chart .horizontal-branches {
    flex-flow: row;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 0;
    margin-top: 20px;
    display: flex;
    position: relative
}

    .ksau-chart .horizontal-branches:before {
        content: "";
        z-index: 1;
        background-color: #999;
        width: 717px;
        height: 2px;
        position: absolute;
        top: -26px;
        left: 50%;
        transform: translate(-50%)
    }

    .ksau-chart .horizontal-branches .box:before {
        content: "";
        z-index: 1;
        background-color: #999;
        width: 2px;
        height: 20px;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translate(-50%)
    }

.ksau-chart .campuses-row {
    justify-content: space-between;
    gap: 56px;
    margin-top: 18px;
    display: flex;
    position: relative
}

    .ksau-chart .campuses-row:before {
        content: "";
        z-index: 1;
        background-color: #999;
        width: 717px;
        height: 2px;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translate(-50%)
    }

.ksau-chart .campus-group {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    display: flex;
    position: relative
}

.ksau-chart .shift-right {
    min-width: 170px;
    transform: translate(27px)
}

.ksau-chart .campus-name {
    text-align: center;
    background-color: #d2d6db;
    border-radius: 50px;
    width: 162px;
    margin-top: 0;
    margin-bottom: -10px;
    padding: 6px 10px;
    font-weight: 700
}

.ksau-chart .colleges-row {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1px;
    display: flex
}

    .ksau-chart .colleges-row:before {
        content: "";
        z-index: 1;
        background-color: #999;
        height: 2px;
        position: absolute;
        top: 50px;
        transform: translate(-50%)
    }

.ksau-chart .colleges-row1:before {
    width: 165px;
    margin-top: 7px;
    margin-right: -165px
}

.ksau-chart .colleges-row2:before {
    width: 332px;
    margin-top: 7px;
    margin-right: -332px
}

.ksau-chart .colleges-row3:before {
    width: 112px;
    margin-top: 7px;
    margin-right: 0;
    transform: translate(0)
}

.ksau-chart .colleges-row .box {
    text-align: center;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    width: 50px;
    font-size: 10px;
    display: flex
}

.ksau-chart-En .org-chart-wrapper {
    background-color: #fff;
    border: none;
    border-radius: 10px;
    width: 100%;
    margin: 0 auto;
    padding: 20px
}

.ksau-chart-En .org-chart {
    flex-direction: column;
    align-items: center;
    display: flex
}

.ksau-chart-En .box {
    text-align: center;
    background-color: #e5e7eb;
    border: 1px solid #6c737f;
    border-radius: 50px;
    width: 170px;
    margin: 2px;
    padding: 8px 12px;
    font-weight: 400;
    display: inline-block;
    position: relative;
    box-shadow: 0 2px 6px #0000001a
}

    .ksau-chart-En .box.dark-green {
        color: #fff;
        background-color: #166a45;
        border: 1px solid #166a45;
        font-weight: 700
    }

    .ksau-chart-En .box.green {
        background-color: #dff6e7;
        border: 1px solid #166a45;
        font-size: 8pt;
        font-weight: 700
    }

.ksau-chart-En .line-down {
    background-color: #999;
    width: 2px;
    height: 30px;
    margin: 0 auto;
    position: relative
}

.ksau-chart-En .dual-branches {
    justify-content: center;
    gap: 40px;
    margin-top: -174px;
    display: flex;
    position: relative
}

.ksau-chart-En .horizontal-line {
    background-color: #999;
    width: 40px;
    height: 2px;
    display: inline-block
}

.ksau-chart-En .branch-layout {
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-top: 20px;
    display: flex;
    position: relative
}

.ksau-chart-En .branch-horizontal {
    align-items: center;
    display: flex;
    position: relative
}

    .ksau-chart-En .branch-horizontal.right .horizontal-line {
        margin-right: -92px
    }

    .ksau-chart-En .branch-horizontal.left .horizontal-line {
        margin-left: -67px
    }

.ksau-chart-En .vertical-branch {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    display: flex;
    position: relative
}

    .ksau-chart-En .vertical-branch.right {
        margin-left: 20px
    }

    .ksau-chart-En .vertical-branch.left {
        margin-right: 20px
    }

.ksau-chart-En .horizontal-branches {
    flex-flow: row;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 0;
    margin-top: 20px;
    display: flex;
    position: relative
}

    .ksau-chart-En .horizontal-branches:before {
        content: "";
        z-index: 1;
        background-color: #999;
        width: 745px;
        height: 2px;
        position: absolute;
        top: -38px;
        left: 50%;
        transform: translate(-50%)
    }

    .ksau-chart-En .horizontal-branches .box:before {
        content: "";
        z-index: 1;
        background-color: #999;
        width: 2px;
        height: 20px;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translate(-50%)
    }

.ksau-chart-En .campuses-row {
    justify-content: space-between;
    gap: 45px;
    margin-top: 20px;
    display: flex;
    position: relative
}

    .ksau-chart-En .campuses-row:before {
        content: "";
        z-index: 1;
        background-color: #999;
        width: 746px;
        height: 2px;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translate(-50%)
    }

.ksau-chart-En .campus-group {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    display: flex;
    position: relative;
    top: -1px
}

.ksau-chart-En .shift-right {
    min-width: 170px;
    transform: translate(-30px)
}

.ksau-chart-En .campus-name {
    text-align: center;
    background-color: #d2d6db;
    border-radius: 50px;
    width: 160px;
    margin-top: 0;
    margin-bottom: -10px;
    padding: 6px 10px;
    font-weight: 700
}

.ksau-chart-En .colleges-row {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1px;
    display: flex
}

    .ksau-chart-En .colleges-row:before {
        content: "";
        z-index: 1;
        background-color: #999;
        height: 2px;
        position: absolute;
        transform: translate(-50%);
        top: 50px !important
    }

.ksau-chart-En .colleges-row1:before {
    width: 180px;
    margin-top: 10px;
    margin-right: -180px
}

.ksau-chart-En .colleges-row2:before {
    width: 360px;
    margin-top: 10px;
    margin-right: -360px
}

.ksau-chart-En .colleges-row3:before {
    width: 120px;
    margin-top: 10px;
    margin-right: -120px
}

.ksau-chart-En .colleges-row .box {
    text-align: center;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    width: 55px;
    font-size: 10px;
    display: flex
}

.policyAR .wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0
}

.policyAR .card-container {
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    display: grid
}

.policyAR .card {
    background-color: #fff;
    border: none;
    border-radius: 8px;
    height: 130px;
    padding: 12px;
    transition: transform .3s;
    position: relative;
    box-shadow: 0 3px 5px #0000001a
}

    .policyAR .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px #0000001a
    }

    .policyAR .card h3 {
        color: #333;
        margin: 5px;
        font-size: 18px;
        line-height: 1.4
    }

.policyAR .arrow-link {
    color: #000;
    background-color: #f3f4f6;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 65px;
    height: 35px;
    font-size: 30px;
    text-decoration: none;
    transition: background-color .3s;
    display: flex;
    position: absolute;
    bottom: 15px;
    left: 15px
}

    .policyAR .arrow-link:hover {
        background-color: #d0d0d0
    }

.policyEN .wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0
}

.policyEN .card-container {
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    display: grid
}

.policyEN .card {
    background-color: #fff;
    border: none;
    border-radius: 8px;
    height: 130px;
    padding: 12px;
    transition: transform .3s;
    position: relative;
    box-shadow: 0 3px 5px #0000001a
}

    .policyEN .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px #0000001a
    }

    .policyEN .card h3 {
        color: #333;
        margin: 5px;
        font-size: 18px;
        line-height: 1.4
    }

.policyEN .arrow-link {
    color: #000;
    background-color: #f3f4f6;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 65px;
    height: 35px;
    font-size: 30px;
    text-decoration: none;
    transition: background-color .3s;
    display: flex;
    position: absolute;
    bottom: 15px;
    right: 15px
}

    .policyEN .arrow-link:hover {
        background-color: #d0d0d0
    }

.e-participationAr .wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0
}

.e-participationAr .card-container {
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    display: grid
}

.e-participationAr .card-container2 {
    grid-template-columns: repeat(1,1fr);
    gap: 20px;
    display: grid
}

.e-participationAr .card {
/*    height: 150px;*/
    box-shadow: var(--shadow-md);
    background-color: #fff;
    border: none;
    border-radius: 16px;
    padding: 16px;
    position: relative
}

    .e-participationAr .card h2, .e-participationAr .card h3 {
/*        color: #0d121c;*/
/*        align-items: center;*/
        gap: 6px;
        margin: 5px;
        font-family: IBMPlexSans-Bold;
        font-size: 18px;
        line-height: 1.4;
        display: flex;
        flex: 1;
    }

.e-participationAr .arrow-link {
    outline: 1px solid var(--border-neutral-secondary);
    color: #000;
    background-color: #fff0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 62px;
    height: 40px;
    font-size: 28px;
    text-decoration: none;
    transition: background-color .3s;
    display: flex;
    position: absolute;
    bottom: 15px;
    left: 15px
}

    .e-participationAr .arrow-link:hover {
        background: var(--button-background-neutral-default)
    }

    .e-participationAr .arrow-link:focus {
        background-color: #fff0;
        border-radius: 4px;
        outline: 2px solid #0d121c !important
    }

    .e-participationAr .arrow-link:active {
        background-color: #fff;
        border: 1px solid #d2d6db
    }

.e-participationEn .wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0
}

.e-participationEn .card-container {
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    display: grid
}

.e-participationEn .card-container2 {
    grid-template-columns: repeat(1,1fr);
    gap: 20px;
    display: grid
}

.e-participationEn .card {
    height: 150px;
    box-shadow: var(--shadow-md);
    background-color: #fff;
    border: none;
    border-radius: 16px;
    padding: 16px;
    position: relative
}

    .e-participationEn .card h3, .e-participationEn .card h2 {
        color: #0d121c;
        align-items: center;
        gap: 6px;
        margin: 5px;
        font-family: IBMPlexSans-Bold;
        font-size: 18px;
        line-height: 1.4;
        display: flex
    }

.e-participationEn .arrow-link {
    outline: 1px solid var(--border-neutral-secondary);
    color: #000;
    background-color: #fff0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 62px;
    height: 40px;
    font-size: 28px;
    text-decoration: none;
    transition: background-color .3s;
    display: flex;
    position: absolute;
    bottom: 15px;
    right: 15px
}

    .e-participationEn .arrow-link:hover {
        background: var(--button-background-neutral-default)
    }

    .e-participationEn .arrow-link:focus {
        background-color: #fff0;
        border-radius: 4px;
        outline: 2px solid #0d121c !important
    }

    .e-participationEn .arrow-link:active {
        background-color: #fff;
        border: 1px solid #d2d6db
    }

@media screen and (max-width: 768px) {
    .e-participationAr .card-container, .e-participationEn .card-container, .policyAR .card-container, .policyEN .card-container {
        grid-template-columns: repeat(1,1fr);
        gap: 16px;
        display: grid
    }

    .e-participationAr .card, .e-participationEn .card, .policyAR .card, .policyEN .card {
        height: 140px
    }

    .e-participationAr .arrow-link, .policyAR .arrow-link {
        bottom: 10px;
        left: 15px;
        right: auto;
        transform: none
    }

    .e-participationEn .arrow-link, .policyEN .arrow-link {
        bottom: 10px;
        left: auto;
        right: 15px;
        transform: none
    }

    .e-participationAr .card h3, .e-participationEn .card h3, .policyAR .card h3, .policyEN .card h3 {
        font-size: 16px
    }
}

.myKSAULogin .login-container {
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    display: flex
}

.myKSAULogin .login-box, .myKSAULogin .sso-box {
    text-align: center;
    background-color: #fff;
    border-radius: 8px;
    width: 500px;
    padding: 30px 25px;
    box-shadow: 0 2px 10px #0000001a
}

    .myKSAULogin .login-box h2, .myKSAULogin .sso-box h2 {
        color: #000;
        margin-bottom: 30px
    }

.myKSAULogin .logo-img {
    margin: 0 auto 20px;
    display: block
}

.myKSAULogin button {
    color: #fff;
    cursor: pointer;
    background-color: #1b8354;
    border: none;
    border-radius: 4px;
    width: 100%;
    padding: 12px;
    font-size: 15px
}

    .myKSAULogin button:hover {
        background-color: #057a45
    }

.myKSAULogin .sso-btn {
    text-align: center;
    color: #fff;
    background-color: #1b8354;
    border-radius: 5px;
    margin-top: 30px;
    padding: 12px;
    font-size: 15px;
    text-decoration: none;
    display: block
}

    .myKSAULogin .sso-btn:hover {
        background-color: #057a45
    }

.services-dashboard .dashboard-container {
    background-color: #fff;
    width: 1280px;
    margin: 40px auto;
    padding: 20px 30px
}

.services-dashboard .dashboard-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    display: flex
}

.services-dashboard .user-info {
    align-items: center;
    gap: 15px;
    display: flex
}

.services-dashboard .ksau-logo {
    width: 130px;
    height: auto
}

.services-dashboard .user-info h1 {
    color: #1b8354;
    margin: 0;
    font-size: 20px
}

.services-dashboard .user-info span {
    color: #666;
    font-size: 14px;
    display: block
}

.services-dashboard .actions {
    align-items: center;
    gap: 15px;
    display: flex
}

    .services-dashboard .actions input[type=search] {
        border: 1px solid #b0b0b0;
        border-radius: 4px;
        padding: 8px 12px;
        font-size: 14px
    }

        .services-dashboard .actions input[type=search]:hover {
            background-color: #fff;
            border: 1px solid #4a4a4a;
            outline: none;
            transition: all .3s
        }

    .services-dashboard .actions button {
        color: #fff;
        cursor: pointer;
        background-color: #1b8354;
        border: none;
        border-radius: 4px;
        padding: 8px 16px;
        font-size: 14px
    }

        .services-dashboard .actions button:hover {
            background-color: #057a45
        }

.services-dashboard .dashboard-body {
    justify-content: center;
    display: flex
}

.services-dashboard .services-grid {
    flex-grow: 1;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    display: grid
}

.services-dashboard .service-card {
    text-align: right;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    padding: 20px;
    font-size: 14px;
    transition: border-color .3s,box-shadow .3s
}

    .services-dashboard .service-card:hover {
        border-color: #069454;
        box-shadow: 0 4px 12px #00000014
    }

.services-dashboard .section-title {
    color: #1b8354;
    margin-top: 70px;
    margin-bottom: 25px;
    font-size: 20px
}

.contactUs-accordion .branch-info {
    background-color: #fff;
    border: 1px solid #d2d6db;
    border-radius: 16px;
    margin-bottom: 20px;
    padding: 16px
}

    .contactUs-accordion .branch-info .branch {
        margin-bottom: 15px;
        margin-right: 10px;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px
    }

.contactUs-accordion button.unstyled-button {
    all: unset;
    cursor: pointer
}

.contactUs-accordion .accordion {
    background-color: #fff;
    border: none;
    border-radius: 6px;
    margin-top: 15px;
    overflow: visible;
    box-shadow: 0 4px 8px #0000000d
}

.contactUs-accordion .accordion-logo {
    flex-shrink: 0;
    width: 35px;
    height: 35px
}

.contactUs-accordion .custom-accordion-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.contactUs-accordion .custom-accordion-item {
    margin-bottom: 16px
}

.contactUs-accordion .accordion-header {
    cursor: pointer;
    pointer-events: auto;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 15px;
    transition: background-color .3s,border-color .3s;
    position: relative;
    z-index: 10 !important
}

    .contactUs-accordion .accordion-header:focus-within {
        border: 1px solid #000;
        border-radius: 6px
    }

.contactUs-accordion .accordion-trigger {
    text-decoration: none
}

.contactUs-accordion .accordion-header:hover {
    background-color: #f3f4f6
}

.contactUs-accordion .accordion-header:active {
    background-color: #e5e7eb;
    border: 1px solid #000;
    border-radius: 6px
}

.contactUs-accordion .accordion-body {
    opacity: 0;
    max-height: 0;
    padding: 0 16px !important
}

.contactUs-accordion .accordion-header.active {
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 6px
}

    .contactUs-accordion .accordion-header.active .accordion-arrow {
        transition: transform .3s;
        transform: rotate(180deg)
    }

    .contactUs-accordion .accordion-header.active + .accordion-body {
        opacity: 1;
        background-color: #fff;
        border: 2px solid #fff0;
        border-radius: 0 0 6px 6px;
        max-height: none;
        padding: 20px
    }

.contactUs-accordion .info-grid {
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
    display: grid
}

.contactUs-accordion .info-item {
    align-items: center;
    font-size: 14px;
    display: flex
}

    .contactUs-accordion .info-item img {
        width: 24px;
        height: 24px;
        margin-left: 10px
    }

:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .contactUs-accordion .info-item img {
    margin-left: 15px;
    margin-right: 10px
}

@media (max-width: 767px) {
    .contactUs-accordion .info-grid {
        grid-template-columns: 1fr
    }

    .contactUs-accordion .info-item {
        word-wrap: break-word;
        overflow-wrap: break-word;
        flex-wrap: wrap;
        align-items: flex-start
    }

    .contactUs-accordion .accordion-logo {
        object-fit: contain;
        flex-shrink: 0;
        width: 35px;
        height: 35px
    }
}

#ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .verification .container {
    background-color: #fff;
    border-radius: 8px;
    margin: 50px auto;
    display: flex;
    overflow: hidden;
    box-shadow: 0 0 10px #0000001a;
    max-width: 850px !important
}

#ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .verification .col-md-6:first-child {
    color: #fff;
    background-color: #1b8354;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    display: flex
}

#ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .verification .vc-title h4, #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .verification .vc-title h6 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 16px
}

#ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .verification .col-md-6:last-child {
    background-color: #f9f9f9;
    padding: 30px
}

#ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .verification-box .inputText, #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .verification-box .inputTextca {
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    margin-bottom: 20px;
    padding: 8px;
    font-size: 13px
}

#ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_txtCaptcha {
    box-sizing: border-box;
    width: 210px !important
}

#ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .form-group img {
    flex-shrink: 0;
    max-width: 210px;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px
}

#ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch button#tt2 {
    color: #d9534f;
    cursor: pointer;
    background-color: #fff0;
    border: none;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: auto;
    padding: 8px 10px;
    font-size: 16px;
    font-weight: 700;
    display: block
}

    #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch button#tt2:before {
        content: "↻";
        text-align: center;
        display: block
    }

#ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .form-group .row:last-child {
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    display: flex
}

    #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .form-group .row:last-child .col-sm-12 {
        flex: 1
    }

    #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .form-group .row:last-child .col-md-5 {
        flex: none;
        margin-top: 0 !important
    }

#ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch input[type=submit] {
    cursor: pointer;
    white-space: nowrap;
    border: none;
    border-radius: 4px;
    width: auto;
    height: 38px;
    margin-right: -15px;
    padding: 8px 16px;
    font-size: 13px;
    color: #fff !important;
    background-color: #1b8354 !important;
    margin-top: 40px !important
}

    #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch input[type=submit]:hover {
        background-color: #006e58 !important
    }

@media (max-width: 767px) {
    #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .verification .container {
        flex-direction: column;
        margin: 20px auto;
        padding: 20px;
        max-width: 95% !important
    }

    #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .verification .col-md-6:first-child, #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .verification .col-md-6:last-child {
        width: 100%;
        padding: 20px !important
    }

    #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .vc-title h4, #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .vc-title h6 {
        text-align: center;
        font-size: 14px
    }

    #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .verification-box .inputText, #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch .verification-box .inputTextca {
        padding: 10px;
        font-size: 13px
    }

    #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_imgCaptcha {
        max-width: 100%;
        height: auto;
        margin: 10px auto;
        display: block
    }

    #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch input[type=submit] {
        width: 100%;
        margin-top: 10px !important
    }

    #ctl00_ctl47_g_87733425_26ce_4f8b_9d48_95b2fbcdf136_ctl00_pnlSearch button#tt2 {
        width: 40px;
        height: 40px;
        margin: 10px auto 0;
        display: block;
        position: static
    }
}

.VicePresidencies-Container {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin: 0;
    display: flex
}

    .VicePresidencies-Container .VicePresidencies {
        flex-wrap: wrap;
        justify-content: space-evenly;
        gap: 24px;
        display: flex
    }

    .VicePresidencies-Container .VPcard {
        text-align: right;
        background-color: #fff;
        border: 1px solid #d2d6db;
        border-radius: 16px;
        flex-direction: column;
        gap: 12px;
        width: 280px;
        padding: 16px;
        display: flex;
        overflow: hidden
    }

    .VicePresidencies-Container .featured-imagebox {
        font-size: 0;
        line-height: 0
    }

    .VicePresidencies-Container .VPcard .featured-imagebox img {
        border: 5px solid #eee;
        border-radius: 10px
    }

    .VicePresidencies-Container .VPcard .card-img {
        object-fit: contain;
        border-radius: 4px;
        height: auto;
        overflow: hidden
    }

        .VicePresidencies-Container .VPcard .card-img img {
            border-radius: 4px;
            width: 100%
        }

    .VicePresidencies-Container .card-body {
        flex-direction: column;
        flex: auto;
        gap: 8px;
        display: flex
    }

    .VicePresidencies-Container .VPcard .card-body .card-title {
        color: #166a45;
        margin: 0;
        font-family: IBMPlexSans-Bold;
        font-size: 20px;
        line-height: 30px
    }

    .VicePresidencies-Container .VPcard .card-body h5 {
        color: #0d121c;
        text-align: justify;
        font-family: IBMPlexSans-Medium;
        font-size: 18px;
        line-height: 28px
    }

    .VicePresidencies-Container .VP_primaryBTN {
        height: auto;
        width: fit-content !important
    }

    .VicePresidencies-Container .modal {
        z-index: 1055;
        --bs-modal-header-border-color: #dee2e6;
        --bs-modal-header-border-width: 1px;
        --bs-modal-border-radius: 8px;
        --bs-modal-title-line-height: 1.5;
        outline: 0;
        width: 50%;
        height: 95vh;
        margin-left: auto;
        margin-right: auto;
        display: none;
        position: fixed;
        top: 20px;
        right: 0;
        overflow: hidden auto;
        padding: 0 !important
    }

    .VicePresidencies-Container .fade {
        transition: opacity .15s linear
    }

        .VicePresidencies-Container .fade:not(.show) {
            opacity: 0
        }

        .VicePresidencies-Container .fade:before, .VicePresidencies-Container .fade:after {
            box-shadow: none !important;
            content: none !important;
            background-image: none !important
        }

    .VicePresidencies-Container .modal.show .modal-dialog {
        transform: none
    }

    .VicePresidencies-Container .modal.fade .modal-dialog {
        transition: transform .3s ease-out
    }

    .VicePresidencies-Container .modal-dialog {
        pointer-events: none;
        align-items: stretch;
        max-width: 100%;
        max-height: 100%;
        padding: 0;
        display: flex;
        position: relative;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important
    }

    .VicePresidencies-Container .modal-dialog-scrollable {
        height: 95vh
    }

        .VicePresidencies-Container .modal-dialog-scrollable .modal-content {
            max-height: 100%;
            overflow: hidden
        }

    .VicePresidencies-Container .modal-body {
        padding: 0 20px 20px
    }

    .VicePresidencies-Container .modal-dialog-scrollable .modal-body {
        overflow-y: auto
    }

    .VicePresidencies-Container .modal-content {
        pointer-events: auto;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #0000002d;
        border-radius: 8px;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        display: flex;
        position: relative
    }

    .VicePresidencies-Container .modal-header {
        border-bottom: 1px solid #dee2e6;
        border-top-left-radius: calc(.5rem - 1px);
        border-top-right-radius: calc(.5rem - 1px);
        flex-shrink: 0;
        align-items: center;
        padding: 20px;
        display: flex
    }

    .VicePresidencies-Container .modal-footer {
        z-index: 2;
        background-color: #fff;
        border-top: 1px solid #dee2e6;
        border-bottom-right-radius: calc(.5rem - 1px);
        border-bottom-left-radius: calc(.5rem - 1px);
        justify-content: flex-start;
        padding: 20px;
        display: flex;
        position: sticky;
        bottom: 0
    }

    .VicePresidencies-Container .modal-title {
        color: #1b8354;
        margin-top: 10px;
        font-family: IBMPlexSans-Bold;
        line-height: 30px;
        font-size: 20px !important
    }

    .VicePresidencies-Container .modal-subTitle {
        color: #1b8354;
        margin: 20px 0 10px;
        font-family: IBMPlexSans-Bold;
        font-size: 18px;
        font-weight: 700;
        line-height: 28px
    }

    .VicePresidencies-Container .modal-body ul {
        padding-right: 1.5rem;
        list-style-type: disc
    }

        .VicePresidencies-Container .modal-body ul ul {
            margin-top: 10px;
            padding-left: 1.5rem;
            list-style-type: circle
        }

        .VicePresidencies-Container .modal-body ul li, .VicePresidencies-Container .modal-body ul ul, .VicePresidencies-Container .modal-body p {
            color: #1f2a37;
            text-align: justify;
            font-family: IBMPlexSans-Regular;
            font-size: 16px;
            line-height: 24px
        }

    .VicePresidencies-Container .contactBTN a {
        display: inline-block
    }

    .VicePresidencies-Container .closebtnPopUp {
        background: var(--colors-white);
        cursor: pointer;
        border: 0;
        border-radius: 4px;
        justify-content: center;
        align-items: center;
        width: 35px;
        min-width: 35px;
        height: 35px;
        margin-inline-start: 10px;
        display: flex
    }

        .VicePresidencies-Container .closebtnPopUp img {
            width: 35px;
            height: 35px
        }

            .VicePresidencies-Container .closebtnPopUp img:hover {
                cursor: pointer;
                background-color: #e5e7eb
            }

            .VicePresidencies-Container .closebtnPopUp img:focus {
                outline-offset: 0;
                background-color: #f3f4f6;
                border: 2px solid #0a0a0a
            }

            .VicePresidencies-Container .closebtnPopUp img:active {
                outline-offset: 0;
                background-color: #e5e7eb;
                border: 2px solid #0a0a0a
            }

@media (min-width: 576px) {
    .VicePresidencies-Container .modal {
        width: 50%;
        height: 95%
    }

    .VicePresidencies-Container .modal-dialog {
        max-width: 1140px;
        margin-left: auto;
        margin-right: auto
    }
}

@media (min-width: 1200px) {
    .VicePresidencies-Container .modal-xl {
        --bs-modal-width: 1140px
    }
}

@media (min-width: 992px) {
    .VicePresidencies-Container .modal-xl {
        --bs-modal-width: 800px
    }
}

@media (max-width: 575.98px) {
    .VicePresidencies-Container .modal {
        width: 95%;
        padding: 0 !important
    }

    .VicePresidencies-Container .contactBTN, .VicePresidencies-Container.lang-en .contactBTN {
        width: auto
    }

        .VicePresidencies-Container .contactBTN a {
            text-align: left;
            height: auto
        }
}

.VicePresidencies-Container.lang-en {
    text-align: left;
    direction: ltr
}

    .VicePresidencies-Container.lang-en .card-title, .VicePresidencies-Container.lang-en .card-body h5, .VicePresidencies-Container.lang-en .modal-title, .VicePresidencies-Container.lang-en .modal-subTitle, .VicePresidencies-Container.lang-en .modal-body ul li, .VicePresidencies-Container.lang-en .modal-body ul ul, .VicePresidencies-Container.lang-en .modal-body p {
        text-align: left
    }

    .VicePresidencies-Container.lang-en .closebtnPopUp {
        margin-inline: 0 10px
    }

    .VicePresidencies-Container.lang-en .modal-body {
        padding-left: 40px
    }

    .VicePresidencies-Container.lang-en .modal-footer {
        justify-content: flex-start
    }

.Pcard {
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
    display: flex
}

.Pcard__img {
    width: 200px;
    height: 200px
}

    .Pcard__img img {
        object-fit: cover;
        border-radius: 8px;
        width: 100%;
        height: 100%
    }

.Pcard__content {
    text-align: center;
    flex: 1;
    min-width: 250px
}

.Pcard__name {
    color: #1b8354;
    margin-bottom: 8px
}

.Pcard__title {
    margin-bottom: 16px
}

.Pcard__btn {
    margin-top: 16px
}

@media (max-width: 767px) {
    .Pcard img {
        margin: 0 auto;
        display: block
    }

    .Pcard > div:first-child {
        margin-left: auto;
        margin-right: auto
    }
}

.vision2030 .tabs {
    scroll-behavior: smooth;
    white-space: nowrap;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    width: 99%;
    display: inline-flex;
    position: relative;
    overflow: auto hidden
}

    .vision2030 .tabs:after {
        content: "";
        background: var(--colors-gray-300);
        border-radius: 20px;
        height: 3px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0
    }

.vision2030 .tab-button {
    cursor: pointer;
    flex: 0 0 max-content;
    z-index: 3;
    background-color: #fff0;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: max-content;
    padding: 12px 16px;
    font: 500 14px/20px IBMPlexSans-Medium;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    display: flex;
    position: relative;
    color: #384250 !important
}

    .vision2030 .tab-button:hover {
        color: #111927;
        background-color: #f3f4f6
    }

        .vision2030 .tab-button:hover:after, .vision2030 .tab-button:active:after, .vision2030 .tab-button.active:after {
            content: "";
            width: calc(100% - var(--spacing-xl)*2);
            border-radius: var(--radius-full);
            background-color: var(--border-black);
            z-index: 1;
            height: 3px;
            display: block;
            position: absolute;
            bottom: 1px;
            left: 50%;
            transform: translate(-50%)
        }

    .vision2030 .tab-button.active:after {
        background-color: #1b8354
    }

    .vision2030 .tab-button:active {
        background-color: #e5e7eb;
        outline: none
    }

    .vision2030 .tab-button:focus-visible, .vision2030 .tab-button.active:focus-visible {
        outline-offset: -3px;
        outline: 2px solid #0d121c
    }

.vision2030 .tabs:has(.tab-button:focus-visible):after {
    bottom: -1px
}

.vision2030 .tab-button.active {
    color: #384250;
    outline: none
}

    .vision2030 .tab-button.active:hover {
        color: #161616;
        background-color: #fff0
    }

    .vision2030 .tab-button.active:active {
        background-color: #fff0;
        outline: none
    }

.vision2030 .tab-content {
    margin-top: 2rem;
    display: none
}

    .vision2030 .tab-content.active {
        display: block
    }

.vision2030 .initiative-summary {
    color: #333;
    margin: 0 0 24px;
    font-family: IBMPlexSans-Regular;
    font-size: 16px
}

.vision2030 .tab-content table {
    border-collapse: separate;
    border-spacing: 0;
    background-color: #fff;
    border: 1px solid #d2d6db;
    border-radius: 8px;
    width: 100%;
    overflow: hidden
}

.vision2030 .tab-content td {
    border: none;
    width: 300px;
    padding: 16px;
    font-family: IBMPlexSans-Regular;
    font-size: 16px;
    line-height: 24px;
    overflow: hidden
}

.vision2030 .tab-content th {
    color: #384250;
    background-color: #f3f4f6;
    border-bottom: 1px solid #d2d6db;
    border-right: 1px solid #d2d6db;
    height: 48px;
    padding: 16px;
    font: 500 12px/18px IBMPlexSans-Medium
}

.vision2030 .ar-layout .tab-content table tr:first-child th:first-child, .vision2030 .en-layout .tab-content table tr:first-child th:last-child {
    border-right: none
}

.vision2030 .ar-layout .tab-content td ul {
    margin: 0;
    padding-right: 1.25rem;
    list-style-position: inside
}

.vision2030 .en-layout .tab-content td ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style-position: inside
}

.vision2030 .ar-layout .tab-content table tr:first-child th:first-child {
    border-top-right-radius: 8px
}

.vision2030 .ar-layout .tab-content table tr:first-child th:last-child {
    border-top-left-radius: 8px
}

.vision2030 .ar-layout .tab-content table tr:last-child td:first-child {
    border-bottom-right-radius: 8px
}

.vision2030 .ar-layout .tab-content table tr:last-child td:last-child {
    border-bottom-left-radius: 8px
}

.vision2030 .en-layout .tab-content table tr:first-child th:first-child {
    border-top-left-radius: 8px
}

.vision2030 .en-layout .tab-content table tr:first-child th:last-child {
    border-top-right-radius: 8px
}

.vision2030 .en-layout .tab-content table tr:last-child td:first-child {
    border-bottom-left-radius: 8px
}

.vision2030 .en-layout .tab-content table tr:last-child td:last-child {
    border-bottom-right-radius: 8px
}

@media (max-width: 768px) {
    .vision2030 .tab-button {
        border-radius: 6px;
        width: 100%;
        padding: 12px 16px
    }

        .vision2030 .tab-button.active {
            border-radius: 6px
        }

    .vision2030 .ar-layout .tab-content, .vision2030 .en-layout .tab-content {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto
    }

        .vision2030 .ar-layout .tab-content table, .vision2030 .en-layout .tab-content table {
            width: max-content;
            min-width: 600px
        }
}

.ksau-sections-wrapper .custom-section {
    flex-flow: wrap;
    justify-content: start;
    align-items: center;
    gap: 24px;
    padding: 16px
}

.ksau-sections-wrapper .custom-section__content {
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    display: flex
}

.ksau-sections-wrapper .custom-section__img {
    flex-shrink: 0;
    width: 200px
}

.ksau-sections-wrapper .vision-logo {
    width: 150px
}

.ksau-sections-wrapper .custom-section--reverse .custom-section__content {
    flex-direction: row-reverse
}

.ksau-sections-wrapper .custom-section__text {
    flex-direction: column;
    flex: 1;
    justify-content: center;
    min-width: 0;
    padding-top: 20px;
    padding-left: 40px;
    padding-right: 40px;
    display: flex
}

.fixed-btn-size {
    align-self: flex-start;
    width: auto;
    max-width: 100%
}

div.table-wrapper .azm-table thead th {
    font: 500 12px/18px IBMPlexSans-Medium
}

.featured-icon {
    place-content: center;
    place-items: self-end;
    line-height: 0;
    display: inline-grid
}

.defaultpages .wrapper {
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex
}

.defaultpages .card-container {
    grid-template-columns: repeat(2,max-content);
    grid-auto-rows: 1fr;
    justify-content: center;
    gap: 24px;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    width: 100% !important
}

.defaultpages .card {
    border: 1px solid var(--colors-gray-300);
    background-color: #fff;
    border-radius: 16px;
    flex-direction: column;
    justify-content: space-between;
    width: min(92vw,628px);
    min-height: 122px;
    margin: 0;
    padding: 16px;
    text-decoration: none;
    transition: transform .3s;
    display: flex;
    position: relative;
    box-shadow: none !important;
    max-width: 1000px !important;
    list-style: none !important
}

.defaultpages .arrow-link {
    outline: 1px solid var(--border-neutral-secondary);
    color: #000;
    bottom: 15px;
    background-color: #fff0;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 62px;
    height: 40px;
    font-size: 28px;
    text-decoration: none;
    transition: background-color .3s;
    display: flex;
    position: absolute;
    inset-inline-end: 15px
}

    .defaultpages .arrow-link:active {
        border: 1px solid #d2d6db;
        background-color: #fff !important
    }

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

    .defaultpages .arrow-link:hover {
        background: var(--button-background-neutral-default)
    }

@media (max-width: 768px) {
    .defaultpages .card-container {
        margin-top: 20px;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 16px;
        margin-inline: 30px 0
    }
}

html[dir=ltr] .timeline {
    border-left: 2px solid #166a45;
    margin-left: 20px;
    padding-left: 40px;
    position: relative
}

html[dir=rtl] .timeline {
    border-right: 2px solid #166a45;
    margin-right: 20px;
    padding-right: 40px;
    position: relative
}

.event_timeline {
    gap: 20px;
    margin-bottom: 40px;
    display: flex;
    position: relative
}

    .event_timeline:before {
        content: "";
        background-color: #fff;
        border: 2px solid #166a45;
        border-radius: 50%;
        width: 14px;
        height: 14px;
        position: absolute;
        top: 5px;
        left: -48px
    }

    .event_timeline p {
        margin: 0;
        font-size: 14px;
        color: #0d121c !important
    }

    .event_timeline ul {
        margin: 5px 0 0;
        padding-left: 20px
    }

        .event_timeline ul li {
            margin-bottom: 4px;
            font-size: 14px;
            color: #0d121c !important
        }

.featured-icon--white {
    background-color: var(--colors-base-white)
}

.tab-content.bg-objectives {
    background-image: url(https://ksau-hs.edu.sa/English/MediaCenter/Events/PublishingImages/Pages/Life-Sciences-Innovation-Forum-2025/LSIF-1-03.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.tab-content.bg-about {
    background-image: url(https://ksau-hs.edu.sa/English/MediaCenter/Events/PublishingImages/Pages/Life-Sciences-Innovation-Forum-2025/LSIF%20BG%202.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.tab-content table.bg-program {
    background-image: url(https://ksau-hs.edu.sa/English/MediaCenter/Events/PublishingImages/Pages/Life-Sciences-Innovation-Forum-2025/LSIF-1-02.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.tab-content.bg-culture {
    background-image: url(https://ksau-hs.edu.sa/English/MediaCenter/Events/PublishingImages/Pages/Life-Sciences-Innovation-Forum-2025/CulturalBg.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}










.header-menu__item * {
    display: flex;
    align-items: center;
/*    color: #006A42;*/
    color: var(--text-text-default);
}
.header-menu__item:hover:not(.header-menu__item--selected) {
    * {
        /*        mix-blend-mode: darken;*/
        filter: grayscale(1) brightness(0);
    }
}

.header-menu__item--selected {
    * {
        filter: grayscale(0) brightness(1);
    }
}

.form-check-input {
    width: 1.5rem;
    height: 1.5rem;
}

.form-label input[type="checkbox"],
.form-label:has(input[type="checkbox"]) {
    margin: 0;
    display: flex;
    position: relative;
    align-items: center;
    gap: var(--spacing-xl);
}

input[type=checkbox]:checked {
    background-color: var(--controls-control-primary-checked);
    border-color: var(--controls-control-primary-checked);
}


.card-header{
    background: unset;
}