:root {
    /* TYPE */
    --display-2xl-regular-family: "Inter";
    --display-2xl-regular-size: 72px;
    --display-2xl-regular-size-rem: 4.5rem;
    --display-2xl-regular-weight: 400;
    --display-2xl-regular-style: normal;
    --display-2xl-regular-line-height: 90px;
    --display-2xl-regular-line-height-rem: 5.625rem;
    --display-2xl-medium-family: "Inter";
    --display-2xl-medium-size: 72px;
    --display-2xl-medium-size-rem: 4.5rem;
    --display-2xl-medium-weight: 500;
    --display-2xl-medium-style: normal;
    --display-2xl-medium-line-height: 90px;
    --display-2xl-medium-line-height-rem: 5.625rem;
    --display-2xl-semibold-family: "Inter";
    --display-2xl-semibold-size: 72px;
    --display-2xl-semibold-size-rem: 4.5rem;
    --display-2xl-semibold-weight: 600;
    --display-2xl-semibold-style: normal;
    --display-2xl-semibold-line-height: 90px;
    --display-2xl-semibold-line-height-rem: 5.625rem;
    --display-2xl-bold-family: "Inter";
    --display-2xl-bold-size: 72px;
    --display-2xl-bold-size-rem: 4.5rem;
    --display-2xl-bold-weight: 700;
    --display-2xl-bold-style: normal;
    --display-2xl-bold-line-height: 90px;
    --display-2xl-bold-line-height-rem: 5.625rem;
    --display-xl-regular-family: "Inter";
    --display-xl-regular-size: 60px;
    --display-xl-regular-size-rem: 3.75rem;
    --display-xl-regular-weight: 400;
    --display-xl-regular-style: normal;
    --display-xl-regular-line-height: 72px;
    --display-xl-regular-line-height-rem: 4.5rem;
    --display-xl-medium-family: "Inter";
    --display-xl-medium-size: 60px;
    --display-xl-medium-size-rem: 3.75rem;
    --display-xl-medium-weight: 500;
    --display-xl-medium-style: normal;
    --display-xl-medium-line-height: 72px;
    --display-xl-medium-line-height-rem: 4.5rem;
    --display-xl-semibold-family: "Inter";
    --display-xl-semibold-size: 60px;
    --display-xl-semibold-size-rem: 3.75rem;
    --display-xl-semibold-weight: 600;
    --display-xl-semibold-style: normal;
    --display-xl-semibold-line-height: 72px;
    --display-xl-semibold-line-height-rem: 4.5rem;
    --display-xl-bold-family: "Inter";
    --display-xl-bold-size: 60px;
    --display-xl-bold-size-rem: 3.75rem;
    --display-xl-bold-weight: 700;
    --display-xl-bold-style: normal;
    --display-xl-bold-line-height: 72px;
    --display-xl-bold-line-height-rem: 4.5rem;
    --display-lg-regular-family: "Inter";
    --display-lg-regular-size: 48px;
    --display-lg-regular-size-rem: 3rem;
    --display-lg-regular-weight: 400;
    --display-lg-regular-style: normal;
    --display-lg-regular-line-height: 60px;
    --display-lg-regular-line-height-rem: 3.75rem;
    --display-lg-medium-family: "Inter";
    --display-lg-medium-size: 48px;
    --display-lg-medium-size-rem: 3rem;
    --display-lg-medium-weight: 500;
    --display-lg-medium-style: normal;
    --display-lg-medium-line-height: 60px;
    --display-lg-medium-line-height-rem: 3.75rem;
    --display-lg-semibold-family: "Inter";
    --display-lg-semibold-size: 48px;
    --display-lg-semibold-size-rem: 3rem;
    --display-lg-semibold-weight: 600;
    --display-lg-semibold-style: normal;
    --display-lg-semibold-line-height: 60px;
    --display-lg-semibold-line-height-rem: 3.75rem;
    --display-lg-bold-family: "Inter";
    --display-lg-bold-size: 48px;
    --display-lg-bold-size-rem: 3rem;
    --display-lg-bold-weight: 700;
    --display-lg-bold-style: normal;
    --display-lg-bold-line-height: 60px;
    --display-lg-bold-line-height-rem: 3.75rem;
    --display-md-regular-family: "Inter";
    --display-md-regular-size: 36px;
    --display-md-regular-size-rem: 2.25rem;
    --display-md-regular-weight: 400;
    --display-md-regular-style: normal;
    --display-md-regular-line-height: 44px;
    --display-md-regular-line-height-rem: 2.75rem;
    --display-md-medium-family: "Inter";
    --display-md-medium-size: 36px;
    --display-md-medium-size-rem: 2.25rem;
    --display-md-medium-weight: 500;
    --display-md-medium-style: normal;
    --display-md-medium-line-height: 44px;
    --display-md-medium-line-height-rem: 2.75rem;
    --display-md-semibold-family: "Inter";
    --display-md-semibold-size: 36px;
    --display-md-semibold-size-rem: 2.25rem;
    --display-md-semibold-weight: 600;
    --display-md-semibold-style: normal;
    --display-md-semibold-line-height: 44px;
    --display-md-semibold-line-height-rem: 2.75rem;
    --display-md-bold-family: "Inter";
    --display-md-bold-size: 36px;
    --display-md-bold-size-rem: 2.25rem;
    --display-md-bold-weight: 700;
    --display-md-bold-style: normal;
    --display-md-bold-line-height: 44px;
    --display-md-bold-line-height-rem: 2.75rem;
    --display-sm-regular-family: "Inter";
    --display-sm-regular-size: 30px;
    --display-sm-regular-size-rem: 1.875rem;
    --display-sm-regular-weight: 400;
    --display-sm-regular-style: normal;
    --display-sm-regular-line-height: 38px;
    --display-sm-regular-line-height-rem: 2.375rem;
    --display-sm-medium-family: "Inter";
    --display-sm-medium-size: 30px;
    --display-sm-medium-size-rem: 1.875rem;
    --display-sm-medium-weight: 500;
    --display-sm-medium-style: normal;
    --display-sm-medium-line-height: 38px;
    --display-sm-medium-line-height-rem: 2.375rem;
    --display-sm-semibold-family: "Inter";
    --display-sm-semibold-size: 30px;
    --display-sm-semibold-size-rem: 1.875rem;
    --display-sm-semibold-weight: 600;
    --display-sm-semibold-style: normal;
    --display-sm-semibold-line-height: 38px;
    --display-sm-semibold-line-height-rem: 2.375rem;
    --display-sm-bold-family: "Inter";
    --display-sm-bold-size: 30px;
    --display-sm-bold-size-rem: 1.875rem;
    --display-sm-bold-weight: 700;
    --display-sm-bold-style: normal;
    --display-sm-bold-line-height: 38px;
    --display-sm-bold-line-height-rem: 2.375rem;
    --display-xs-regular-family: "Inter";
    --display-xs-regular-size: 24px;
    --display-xs-regular-size-rem: 1.5rem;
    --display-xs-regular-weight: 400;
    --display-xs-regular-style: normal;
    --display-xs-regular-line-height: 32px;
    --display-xs-regular-line-height-rem: 2rem;
    --display-xs-medium-family: "Inter";
    --display-xs-medium-size: 24px;
    --display-xs-medium-size-rem: 1.5rem;
    --display-xs-medium-weight: 500;
    --display-xs-medium-style: normal;
    --display-xs-medium-line-height: 32px;
    --display-xs-medium-line-height-rem: 2rem;
    --display-xs-semibold-family: "Inter";
    --display-xs-semibold-size: 24px;
    --display-xs-semibold-size-rem: 1.5rem;
    --display-xs-semibold-weight: 600;
    --display-xs-semibold-style: normal;
    --display-xs-semibold-line-height: 32px;
    --display-xs-semibold-line-height-rem: 2rem;
    --display-xs-bold-family: "Inter";
    --display-xs-bold-size: 24px;
    --display-xs-bold-size-rem: 1.5rem;
    --display-xs-bold-weight: 700;
    --display-xs-bold-style: normal;
    --display-xs-bold-line-height: 32px;
    --display-xs-bold-line-height-rem: 2rem;
    --text-xl-regular-family: "Inter";
    --text-xl-regular-size: 20px;
    --text-xl-regular-size-rem: 1.25rem;
    --text-xl-regular-weight: 400;
    --text-xl-regular-style: normal;
    --text-xl-regular-line-height: 30px;
    --text-xl-regular-line-height-rem: 1.875rem;
    --text-xl-medium-family: "Inter";
    --text-xl-medium-size: 20px;
    --text-xl-medium-size-rem: 1.25rem;
    --text-xl-medium-weight: 500;
    --text-xl-medium-style: normal;
    --text-xl-medium-line-height: 30px;
    --text-xl-medium-line-height-rem: 1.875rem;
    --text-xl-semibold-family: "Inter";
    --text-xl-semibold-size: 20px;
    --text-xl-semibold-size-rem: 1.25rem;
    --text-xl-semibold-weight: 600;
    --text-xl-semibold-style: normal;
    --text-xl-semibold-line-height: 30px;
    --text-xl-semibold-line-height-rem: 1.875rem;
    --text-xl-bold-family: "Inter";
    --text-xl-bold-size: 20px;
    --text-xl-bold-size-rem: 1.25rem;
    --text-xl-bold-weight: 700;
    --text-xl-bold-style: normal;
    --text-xl-bold-line-height: 30px;
    --text-xl-bold-line-height-rem: 1.875rem;
    --text-lg-regular-family: "Inter";
    --text-lg-regular-size: 18px;
    --text-lg-regular-size-rem: 1.125rem;
    --text-lg-regular-weight: 400;
    --text-lg-regular-style: normal;
    --text-lg-regular-line-height: 28px;
    --text-lg-regular-line-height-rem: 1.75rem;
    --text-lg-medium-family: "Inter";
    --text-lg-medium-size: 18px;
    --text-lg-medium-size-rem: 1.125rem;
    --text-lg-medium-weight: 500;
    --text-lg-medium-style: normal;
    --text-lg-medium-line-height: 28px;
    --text-lg-medium-line-height-rem: 1.75rem;
    --text-lg-semibold-family: "Inter";
    --text-lg-semibold-size: 18px;
    --text-lg-semibold-size-rem: 1.125rem;
    --text-lg-semibold-weight: 600;
    --text-lg-semibold-style: normal;
    --text-lg-semibold-line-height: 28px;
    --text-lg-semibold-line-height-rem: 1.75rem;
    --text-lg-bold-family: "Inter";
    --text-lg-bold-size: 18px;
    --text-lg-bold-size-rem: 1.125rem;
    --text-lg-bold-weight: 700;
    --text-lg-bold-style: normal;
    --text-lg-bold-line-height: 28px;
    --text-lg-bold-line-height-rem: 1.75rem;
    --text-md-regular-family: "Inter";
    --text-md-regular-size: 16px;
    --text-md-regular-size-rem: 1rem;
    --text-md-regular-weight: 400;
    --text-md-regular-style: normal;
    --text-md-regular-line-height: 24px;
    --text-md-regular-line-height-rem: 1.5rem;
    --text-md-medium-family: "Inter";
    --text-md-medium-size: 16px;
    --text-md-medium-size-rem: 1rem;
    --text-md-medium-weight: 500;
    --text-md-medium-style: normal;
    --text-md-medium-line-height: 24px;
    --text-md-medium-line-height-rem: 1.5rem;
    --text-md-semibold-family: "Inter";
    --text-md-semibold-size: 16px;
    --text-md-semibold-size-rem: 1rem;
    --text-md-semibold-weight: 600;
    --text-md-semibold-style: normal;
    --text-md-semibold-line-height: 24px;
    --text-md-semibold-line-height-rem: 1.5rem;
    --text-md-bold-family: "Inter";
    --text-md-bold-size: 16px;
    --text-md-bold-size-rem: 1rem;
    --text-md-bold-weight: 700;
    --text-md-bold-style: normal;
    --text-md-bold-line-height: 24px;
    --text-md-bold-line-height-rem: 1.5rem;
    --text-md-regular-family: "Inter";
    --text-md-regular-size: 32px;
    --text-md-regular-size-rem: 2rem;
    --text-md-regular-weight: 500;
    --text-md-regular-style: normal;
    --text-md-regular-line-height: 38px;
    --text-md-regular-line-height-rem: 2.375rem;
    --text-sm-regular-family: "Inter";
    --text-sm-regular-size: 14px;
    --text-sm-regular-size-rem: 0.875rem;
    --text-sm-regular-weight: 400;
    --text-sm-regular-style: normal;
    --text-sm-regular-line-height: 20px;
    --text-sm-regular-line-height-rem: 1.25rem;
    --text-sm-medium-family: "Inter";
    --text-sm-medium-size: 14px;
    --text-sm-medium-size-rem: 0.875rem;
    --text-sm-medium-weight: 500;
    --text-sm-medium-style: normal;
    --text-sm-medium-line-height: 20px;
    --text-sm-medium-line-height-rem: 1.25rem;
    --text-sm-semibold-family: "Inter";
    --text-sm-semibold-size: 14px;
    --text-sm-semibold-size-rem: 0.875rem;
    --text-sm-semibold-weight: 600;
    --text-sm-semibold-style: normal;
    --text-sm-semibold-line-height: 20px;
    --text-sm-semibold-line-height-rem: 1.25rem;
    --text-sm-bold-family: "Inter";
    --text-sm-bold-size: 14px;
    --text-sm-bold-size-rem: 0.875rem;
    --text-sm-bold-weight: 700;
    --text-sm-bold-style: normal;
    --text-sm-bold-line-height: 20px;
    --text-sm-bold-line-height-rem: 1.25rem;
    --text-xs-regular-family: "Inter";
    --text-xs-regular-size: 12px;
    --text-xs-regular-size-rem: 0.75rem;
    --text-xs-regular-weight: 400;
    --text-xs-regular-style: normal;
    --text-xs-regular-line-height: 18px;
    --text-xs-regular-line-height-rem: 1.125rem;
    --text-xs-medium-family: "Inter";
    --text-xs-medium-size: 12px;
    --text-xs-medium-size-rem: 0.75rem;
    --text-xs-medium-weight: 500;
    --text-xs-medium-style: normal;
    --text-xs-medium-line-height: 18px;
    --text-xs-medium-line-height-rem: 1.125rem;
    --text-xs-semibold-family: "Inter";
    --text-xs-semibold-size: 12px;
    --text-xs-semibold-size-rem: 0.75rem;
    --text-xs-semibold-weight: 600;
    --text-xs-semibold-style: normal;
    --text-xs-semibold-line-height: 18px;
    --text-xs-semibold-line-height-rem: 1.125rem;
    --text-xs-bold-family: "Inter";
    --text-xs-bold-size: 12px;
    --text-xs-bold-size-rem: 0.75rem;
    --text-xs-bold-weight: 700;
    --text-xs-bold-style: normal;
    --text-xs-bold-line-height: 18px;
    --text-xs-bold-line-height-rem: 1.125rem;
    --test-xs-xs-xs-xs-xs-xs-family: "Inter";
    --test-xs-xs-xs-xs-xs-xs-size: 12px;
    --test-xs-xs-xs-xs-xs-xs-size-rem: 0.75rem;
    --test-xs-xs-xs-xs-xs-xs-weight: 400;
    --test-xs-xs-xs-xs-xs-xs-style: normal;
    /* SHADOWS */
    --shadow-xs: 0 1px 2px 0 rgba(10 13 18 / 0.05);
    --shadow-sm: 0 1px 2px 0 rgba(10 13 18 / 0.06), 0 1px 3px 0 rgba(10 13 18 / 0.1);
    --shadow-md: 0 2px 4px -2px rgba(10 13 18 / 0.06), 0 4px 8px -2px rgba(10 13 18 / 0.1);
    --shadow-lg: 0 4px 6px -2px rgba(10 13 18 / 0.03), 0 12px 16px -4px rgba(10 13 18 / 0.08);
    --shadow-xl: 0 8px 8px -4px rgba(10 13 18 / 0.03), 0 20px 24px -4px rgba(10 13 18 / 0.08);
    --shadow-2xl: 0 24px 48px -12px rgba(10 13 18 / 0.18);
    --shadow-3xl: 0 32px 64px -12px rgba(10 13 18 / 0.14);
    --focus-ring-4px-primary-100: 0 0 0 4px #f3f7fb;
    --focus-ring-4px-gray-100: 0 0 0 4px #f2f3f5;
    --focus-ring-4px-error-100: 0 0 0 4px #fee4e2;
    --focus-ring-4px-gray-600: 0 0 0 4px #525863;
    --focus-ring-4px-primary-600: 0 0 0 4px #276fb7;
    --select: 0 0 0 4px #ebfcff;
    --select-red: 0 0 0 4px #fee4e2, 0 1px 2px 0 rgba(10 13 18 / 0.05);
    --effect-shadow-shadow-xs: 0 1px 2px 0 rgba(10 13 18 / 0.05);
    --effect-shadow-shadow-sm: 0 1px 2px 0 rgba(10 13 18 / 0.06), 0 1px 3px 0 rgba(10 13 18 / 0.1);
    --effect-shadow-shadow-md: 0 2px 4px -2px rgba(10 13 18 / 0.06), 0 4px 8px -2px rgba(10 13 18 / 0.1);
    --effect-shadow-shadow-lg: 0 4px 6px -2px rgba(10 13 18 / 0.03), 0 12px 16px -4px rgba(10 13 18 / 0.08);
    --effect-shadow-shadow-xl: 0 8px 8px -4px rgba(10 13 18 / 0.03), 0 20px 24px -4px rgba(10 13 18 / 0.08);
    --effect-shadow-shadow-2xl: 0 24px 48px -12px rgba(10 13 18 / 0.18);
    --effect-shadow-shadow-3xl: 0 32px 64px -12px rgba(10 13 18 / 0.14);
    --effect-shadow-shadows-shadow-xs-skeuomorphic: 0 1px 2px 0 rgba(10 13 18 / 0);
    /* GRIDS */
    --columns-columns-12: 12;
    --columns-gutter-12: 20px;
    --columns-gutter-rem-12: 1.25rem;
    --columns-columns-6: 6;
    --columns-gutter-6: 32px;
    --columns-gutter-rem-6: 2rem;
    --columns-columns-3: 3;
    --columns-gutter-3: 32px;
    --columns-gutter-rem-3: 2rem;
    --columns-columns-2: 2;
    --columns-gutter-2: 32px;
    --columns-gutter-rem-2: 2rem;
    --base-black: #000000;
    --base-white: #ffffff;
    --foundation-yellow-25: #fefdf0;
    --foundation-yellow-50: #fefbe8;
    --foundation-yellow-100: #fef7c3;
    --foundation-yellow-200: #fed995;
    --foundation-yellow-300: #fde272;
    --foundation-yellow-400: #fac515;
    --foundation-yellow-500: #efaa14;
    --foundation-yellow-600: #ca7804;
    --foundation-yellow-700: #a15107;
    --foundation-yellow-800: #854a0e;
    --foundation-yellow-900: #713b12;
    --foundation-yellow-1000: #542c0d;
    --foundation-brand-50: #e9f1f8;
    --foundation-brand-100: #bcd2e9;
    --foundation-brand-200: #9cbdde;
    --foundation-brand-300: #6e9fcf;
    --foundation-brand-400: #528cc5;
    --foundation-brand-500: #276fb7;
    --foundation-brand-600: #2365a7;
    --foundation-brand-700: #1c4f82;
    --foundation-brand-800: #153d65;
    --foundation-brand-900: #102f4d;
    --foundation-blue-grey-25: #fdfdfd;
    --foundation-blue-grey-50: #f8f9fc;
    --foundation-blue-grey-100: #eaecf5;
    --foundation-blue-grey-200: #d5d9eb;
    --foundation-blue-grey-300: #afb5d9;
    --foundation-blue-grey-400: #717bbc;
    --foundation-blue-grey-500: #4e5ba6;
    --foundation-blue-grey-600: #3e4784;
    --foundation-blue-grey-700: #363f72;
    --foundation-blue-grey-800: #293056;
    --foundation-blue-grey-900: #101323;
    --foundation-success-25: #f6fef9;
    --foundation-success-50: #ecfdf3;
    --foundation-success-100: #dcfae6;
    --foundation-success-200: #aaf0c4;
    --foundation-success-300: #75e0a7;
    --foundation-success-400: #47cd89;
    --foundation-success-500: #17b26a;
    --foundation-success-600: #079455;
    --foundation-success-700: #067647;
    --foundation-success-800: #085d3a;
    --foundation-success-900: #074d31;
    --foundation-success-1000: #053321;
    --foundation-warning-25: #fffcf5;
    --foundation-warning-50: #fffaeb;
    --foundation-warning-100: #fef0c7;
    --foundation-warning-200: #fedf89;
    --foundation-warning-300: #fec84b;
    --foundation-warning-400: #fdb022;
    --foundation-warning-500: #f79009;
    --foundation-warning-600: #dc6803;
    --foundation-warning-700: #b54708;
    --foundation-warning-800: #93370d;
    --foundation-warning-900: #7a2e0e;
    --foundation-warning-1000: #4e1d09;
    --foundation-error-25: #feeceb;
    --foundation-error-50: #FFF0F2;
    --foundation-error-100: #fee4e2;
    --foundation-error-200: #f9afa9;
    --foundation-error-300: #f68982;
    --foundation-error-400: #f3665c;
    --foundation-error-500: #f04438;
    --foundation-error-600: #cc3a30;
    --foundation-error-700: #cc3a30;
    --foundation-error-800: #aa3028;
    --foundation-error-900: #892720;
    --foundation-error-1000: #55160c;
    --foundation-grey-25: #FCFCFD;
    --foundation-grey-50: #fafafa;
    --foundation-grey-100: #f5f5f5;
    --foundation-grey-200: #e9eaeb;
    --foundation-grey-300: #d5d7da;
    --foundation-grey-400: #a4a7ae;
    --foundation-grey-500: #717680;
    --foundation-grey-600: #535862;
    --foundation-grey-700: #414651;
    --foundation-grey-800: #252b37;
    --foundation-grey-900: #101828;
    --foundation-grey-1000: #0c121f;
    --foundation-warning-orange-1: #FEF4E6;
    --foundation-warning-orange-2: #F9DBAF;
    --foundation-warning-orange-3: #fccf95;
    --foundation-warning-orange-4: #fab964;
    --foundation-warning-orange-5: #f8a435;
    --foundation-warning-orange-6: #ED5C23;
    --foundation-warning-orange-7: #D5421B;
    --foundation-warning-orange-8: #af6606;
    --foundation-warning-orange-9: #8d5205;
    --foundation-warning-orange-10: #6f4104;
    --foundation-success-green-1: #EDFCF2;
    --foundation-success-green-2: #c6eedb;
    --foundation-success-green-3: #99E0BF;
    --foundation-success-green-4: #6ad2a1;
    --foundation-success-green-5: #3dc485;
    --foundation-success-green-6: #12b76a;
    --foundation-success-green-7: #0f9c5a;
    --foundation-success-green-8: #0d824b;
    --foundation-success-green-9: #0a683c;
    --foundation-success-green-10: #085230;
    --foundation-error-red-1: #FEECEB;
    --foundation-error-red-2: #fbd2cf;
    --foundation-error-red-3: #f9afa9;
    --foundation-error-red-4: #f68982;
    --foundation-error-red-5: #f3665c;
    --foundation-error-red-6: #f04438;
    --foundation-error-red-7: #cc3a30;
    --foundation-error-red-8: #aa3028;
    --foundation-error-red-9: #892720;
    --foundation-error-red-10: #6c1f19;
    --foundation-orange-25: #fef4e6;
    --foundation-orange-50: #fde4c4;
    --foundation-orange-100: #fccf95;
    --foundation-orange-200: #fab964;
    --foundation-orange-300: #ff9c66;
    --foundation-orange-400: #f79009;
    --foundation-orange-500: #ed5c23;
    --foundation-orange-600: #fd6c33;
    --foundation-orange-700: #ed5c23;
    --foundation-orange-800: #af6606;
    --foundation-orange-900: #8d5205;
    --foundation-orange-1000: #6f4104;
    --content-primary: #181D27;
    --content-secondary: #414651;
    --content-tertiary: #717680;
    --content-accent: #2365a7;
    --content-positive: #31c375;
    --content-informative: #18baff;
    --content-critical: #fa8c16;
    --content-negative: #e94040;
    --content-inverse-primary: #ffffff;
    --border-primary-disabled: #d5d7da;
    --border-secondary: #e9eaeb;
    --border-tertiary: #f5f5f5;
    --border-brand: #276fb7;
    --border-error: #f04438;
    --background-primary: #ffffff;
    --background-secondary: #fafafa;
    /* VARIABLE COLLECTION */
    --white: #ffffff;
    --color: #000000;
    --grey-25: #fcfcfd;
    --grey-50: #fafafa;
    --grey-100: #f5f5f5;
    --grey-200: #e9eaeb;
    --grey-300: #d5d7da;
    --grey-400: #a4a7ae;
    --grey-500: #717680;
    --grey-600: #535862;
    --grey-700: #414651;
    --grey-800: #252b37;
    --grey-900: #181d27;
    --brand-25: #f3f7fb;
    --brand-50: #e9f1f8;
    --brand-100: #bcd2e9;
    --brand-200: #9cbdde;
    --brand-300: #6e9fcf;
    --brand-400: #528cc5;
    --brand-500: #276fb7;
    --brand-600: #2365a7;
    --brand-800: #153d65;
    --brand-900: #102f4d;
    --brand-700: #1c4f82;
    --error-25: #fffbfa;
    --error-50: #fef3f2;
    --error-100: #fee4e2;
    --error-200: #fecdca;
    --error-300: #fda29b;
    --error-400: #f97066;
    --error-500: #f04438;
    --error-600: #d92d20;
    --error-700: #b42318;
    --error-800: #912018;
    --error-900: #7a271a;
    --warning-25: #fffcf5;
    --warning-50: #fffaeb;
    --warning-100: #fef0c7;
    --warning-200: #fedf89;
    --warning-300: #fec84b;
    --warning-400: #fdb022;
    --warning-500: #f79009;
    --warning-600: #dc6803;
    --warning-700: #b54708;
    --warning-800: #93370d;
    --warning-900: #7a2e0e;
    --success-25: #f6fef9;
    --success-50: #ecfdf3;
    --success-100: #d1fadf;
    --success-200: #a6f4c5;
    --success-300: #6ce9a6;
    --success-400: #32d583;
    --success-500: #12b76a;
    --success-600: #039855;
    --success-700: #027a48;
    --success-800: #05603a;
    --success-900: #054f31;
    --blue-50: #EFF8FF;
    --blue-700: #175CD3;
    --orange-50: #FFF6ED;
    --orange-700: #C4320A;
    --blue-light-50: #F0F9FF;
}

.text-white {
    color: var(--white) !important;
}

.text-color {
    color: var(--color) !important;
}

.text-grey-25 {
    color: var(--grey-25) !important;
}

.text-grey-50 {
    color: var(--grey-50) !important;
}

.text-grey-100 {
    color: var(--grey-100) !important;
}

.text-grey-200 {
    color: var(--grey-200) !important;
}

.text-grey-300 {
    color: var(--grey-300) !important;
}

.text-grey-400 {
    color: var(--grey-400) !important;
}

.text-grey-500 {
    color: var(--grey-500) !important;
}

.text-grey-600 {
    color: var(--grey-600) !important;
}

.text-grey-700 {
    color: var(--grey-700) !important;
}

.text-grey-800 {
    color: var(--grey-800) !important;
}

.text-grey-900 {
    color: var(--grey-900) !important;
}

.text-brand-25 {
    color: var(--brand-25) !important;
}

.text-brand-50 {
    color: var(--brand-50) !important;
}

.text-brand-100 {
    color: var(--brand-100) !important;
}

.text-brand-200 {
    color: var(--brand-200) !important;
}

.text-brand-300 {
    color: var(--brand-300) !important;
}

.text-brand-400 {
    color: var(--brand-400) !important;
}

.text-brand-500 {
    color: var(--brand-500) !important;
}

.text-brand-600 {
    color: var(--brand-600) !important;
}

.text-brand-700 {
    color: var(--brand-700) !important;
}

.text-brand-800 {
    color: var(--brand-800) !important;
}

.text-brand-900 {
    color: var(--brand-900) !important;
}

.text-error-25 {
    color: var(--error-25) !important;
}

.text-error-50 {
    color: var(--error-50) !important;
}

.text-error-100 {
    color: var(--error-100) !important;
}

.text-error-200 {
    color: var(--error-200) !important;
}

.text-error-300 {
    color: var(--error-300) !important;
}

.text-error-400 {
    color: var(--error-400) !important;
}

.text-error-500 {
    color: var(--error-500) !important;
}

.text-error-600 {
    color: var(--error-600) !important;
}

.text-error-700 {
    color: var(--error-700) !important;
}

.text-error-800 {
    color: var(--error-800) !important;
}

.text-error-900 {
    color: var(--error-900) !important;
}

.text-warning-25 {
    color: var(--warning-25) !important;
}

.text-warning-50 {
    color: var(--warning-50) !important;
}

.text-warning-100 {
    color: var(--warning-100) !important;
}

.text-warning-200 {
    color: var(--warning-200) !important;
}

.text-warning-300 {
    color: var(--warning-300) !important;
}

.text-warning-400 {
    color: var(--warning-400) !important;
}

.text-warning-500 {
    color: var(--warning-500) !important;
}

.text-warning-600 {
    color: var(--warning-600) !important;
}

.text-warning-700 {
    color: var(--warning-700) !important;
}

.text-warning-800 {
    color: var(--warning-800) !important;
}

.text-warning-900 {
    color: var(--warning-900) !important;
}

.text-success-25 {
    color: var(--success-25) !important;
}

.text-success-50 {
    color: var(--success-50) !important;
}

.text-success-100 {
    color: var(--success-100) !important;
}

.text-success-200 {
    color: var(--success-200) !important;
}

.text-success-300 {
    color: var(--success-300) !important;
}

.text-success-400 {
    color: var(--success-400) !important;
}

.text-success-500 {
    color: var(--success-500) !important;
}

.text-success-600 {
    color: var(--success-600) !important;
}

.text-success-700 {
    color: var(--success-700) !important;
}

.text-success-800 {
    color: var(--success-800) !important;
}

.text-success-900 {
    color: var(--success-900) !important;
}

.text-blue-50 {
    color: var(--blue-50) !important;
}

.text-blue-700 {
    color: var(--blue-700) !important;
}

.text-orange-50 {
    color: var(--orange-50) !important;
}

.text-orange-700 {
    color: var(--orange-700) !important;
}

.bg-brand-50 {
    background-color: var(--brand-50);
}

.bg-brand-100 {
    background-color: var(--brand-100);
}

.bg-brand-200 {
    background-color: var(--brand-200);
}

.bg-brand-300 {
    background-color: var(--brand-300);
}

.bg-brand-400 {
    background-color: var(--brand-400);
}

.bg-brand-500 {
    background-color: var(--brand-500);
}

.bg-brand-600 {
    background-color: var(--brand-600);
}

.bg-brand-700 {
    background-color: var(--brand-700);
}

.bg-brand-800 {
    background-color: var(--brand-800);
}

.bg-brand-900 {
    background-color: var(--brand-900);
}
/* Error colors */
.bg-error-25 {
    background-color: var(--error-25);
}

.bg-error-50 {
    background-color: var(--error-50);
}

.bg-error-100 {
    background-color: var(--error-100);
}

.bg-error-200 {
    background-color: var(--error-200);
}

.bg-error-300 {
    background-color: var(--error-300);
}

.bg-error-400 {
    background-color: var(--error-400);
}

.bg-error-500 {
    background-color: var(--error-500);
}

.bg-error-600 {
    background-color: var(--error-600);
}

.bg-error-700 {
    background-color: var(--error-700);
}

.bg-error-800 {
    background-color: var(--error-800);
}

.bg-error-900 {
    background-color: var(--error-900);
}

/* Warning colors */
.bg-warning-25 {
    background-color: var(--warning-25);
}

.bg-warning-50 {
    background-color: var(--warning-50);
}

.bg-warning-100 {
    background-color: var(--warning-100);
}

.bg-warning-200 {
    background-color: var(--warning-200);
}

.bg-warning-300 {
    background-color: var(--warning-300);
}

.bg-warning-400 {
    background-color: var(--warning-400);
}

.bg-warning-500 {
    background-color: var(--warning-500);
}

.bg-warning-600 {
    background-color: var(--warning-600);
}

.bg-warning-700 {
    background-color: var(--warning-700);
}

.bg-warning-800 {
    background-color: var(--warning-800);
}

.bg-warning-900 {
    background-color: var(--warning-900);
}

/* Success colors */
.bg-success-25 {
    background-color: var(--success-25);
}

.bg-success-50 {
    background-color: var(--success-50);
}

.bg-success-100 {
    background-color: var(--success-100);
}

.bg-success-200 {
    background-color: var(--success-200);
}

.bg-success-300 {
    background-color: var(--success-300);
}

.bg-success-400 {
    background-color: var(--success-400);
}

.bg-success-500 {
    background-color: var(--success-500);
}

.bg-success-600 {
    background-color: var(--success-600);
}

.bg-success-700 {
    background-color: var(--success-700);
}

.bg-success-800 {
    background-color: var(--success-800);
}

.bg-success-900 {
    background-color: var(--success-900);
}

.bg-blue-50 {
    background-color: var(--blue-50);
}

.bg-blue-700 {
    background-color: var(--blue-700);
}

.bg-blue-light-50 {
    background-color: var(--blue-light-50);
}

.bg-orange-50 {
    background-color: var(--orange-50);
}

.bg-orange-700 {
    background-color: var(--orange-700);
}

/* Các class border */
.border-primary-disabled {
    border: 1px solid var(--border-primary-disabled);
}

.border-top-primary-disabled {
    border-top: 1px solid var(--border-primary-disabled);
}

.border-right-primary-disabled {
    border-right: 1px solid var(--border-primary-disabled);
}

.border-bottom-primary-disabled {
    border-bottom: 1px solid var(--border-primary-disabled);
}

.border-left-primary-disabled {
    border-left: 1px solid var(--border-primary-disabled);
}

.border-top-secondary {
    border-top: 1px solid var(--border-secondary);
}

.border-right-secondary {
    border-right: 1px solid var(--border-secondary);
}

.border-bottom-secondary {
    border-bottom: 1px solid var(--border-secondary);
}

.border-left-secondary {
    border-left: 1px solid var(--border-secondary);
}

.border-tertiary {
    border: 1px solid var(--border-tertiary);
}

.border-top-tertiary {
    border-top: 1px solid var(--border-tertiary);
}

.border-right-tertiary {
    border-right: 1px solid var(--border-tertiary);
}

.border-bottom-tertiary {
    border-bottom: 1px solid var(--border-tertiary);
}

.border-left-tertiary {
    border-left: 1px solid var(--border-tertiary);
}

.border-brand {
    border: 1px solid var(--border-brand);
}

.border-top-brand {
    border-top: 1px solid var(--border-brand);
}

.border-right-brand {
    border-right: 1px solid var(--border-brand);
}

.border-bottom-brand {
    border-bottom: 1px solid var(--border-brand);
}

.border-left-brand {
    border-left: 1px solid var(--border-brand);
}

.border-error {
    border: 1px solid var(--border-error);
}

.border-top-error {
    border-top: 1px solid var(--border-error);
}

.border-right-error {
    border-right: 1px solid var(--border-error);
}

.border-bottom-error {
    border-bottom: 1px solid var(--border-error);
}

.border-left-error {
    border-left: 1px solid var(--border-error);
}

.border-line-grey {
    border: 1px solid var(--border-line-grey);
}

.border-top-line-grey {
    border-top: 1px solid var(--border-line-grey);
}

.border-right-line-grey {
    border-right: 1px solid var(--border-line-grey);
}

.border-bottom-line-grey {
    border-bottom: 1px solid var(--border-line-grey);
}

.border-left-line-grey {
    border-left: 1px solid var(--border-line-grey);
}
/* Các class box-shadow */
.box-shadow-xs {
    box-shadow: var(--effect-shadow-shadow-xs) !important;
}

.box-shadow-sm {
    box-shadow: var(--effect-shadow-shadow-sm) !important;
}

.box-shadow-md {
    box-shadow: var(--effect-shadow-shadow-md) !important;
}

.box-shadow-lg {
    box-shadow: var(--effect-shadow-shadow-lg);
}

.box-shadow-xl {
    box-shadow: var(--effect-shadow-shadow-xl) !important;
}

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

.box-shadow-3xl {
    box-shadow: var(--effect-shadow-shadow-3xl);
}


/* Bổ sung CSS từ figma */
.text-content-primary {
    color: var(--content-primary);
}

.text-content-secondary {
    color: var(--content-secondary) !important;
}

.text-content-tertiary {
    color: var(--content-tertiary);
}

.text-content-accent {
    color: var(--content-accent);
}

.text-content-positive {
    color: var(--content-positive);
}

.text-content-informative {
    color: var(--content-informative);
}

.text-content-critical {
    color: var(--content-critical);
}

.text-content-negative {
    color: var(--content-negative);
}

.text-content-inverse {
    color: var(--content-inverse-primary);
}

.text-content {
    color: var(--text-content);
}
/* Các class border */
.border-primary-disabled {
    border: 1px solid var(--border-primary-disabled);
}

.border-secondary {
    border: 1px solid var(--border-secondary) !important;
}

.border-tertiary {
    border: 1px solid var(--border-tertiary);
}

.border-brand {
    border: 1px solid var(--border-brand);
}

.border-error {
    border: 1px solid var(--border-error);
}


/* Hiệu ứng chọn */
.box-shadow-select {
    box-shadow: var(--select);
}

.box-shadow-select-red {
    box-shadow: var(--select-red);
}
/* Text XS */
.text-xs-regular {
    font-family: "Inter";
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.text-xs-medium {
    font-family: "Inter";
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
}

.text-xs-semibold {
    font-family: "Inter";
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

.text-xs-bold {
    font-family: "Inter";
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

/* Text SM */
.text-sm-regular {
    font-family: "Inter";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.text-sm-medium {
    font-family: "Inter";
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.text-sm-semibold {
    font-family: "Inter";
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.text-sm-bold {
    font-family: "Inter";
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

/* Text MD */
.text-md-regular {
    font-family: "Inter";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.text-md-medium {
    font-family: "Inter";
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px;
}

.text-md-semibold {
    font-family: "Inter";
    font-size: 16px !important;
    font-weight: 600;
    line-height: 24px;
}

.text-md-bold {
    font-family: "Inter";
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

/* Text LG */
.text-lg-regular {
    font-family: "Inter";
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

.text-lg-medium {
    font-family: "Inter";
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.text-lg-semibold {
    font-family: "Inter";
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.text-lg-bold {
    font-family: "Inter";
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
}

/* Text XL */
.text-xl-regular {
    font-family: "Inter";
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}

.text-xl-medium {
    font-family: "Inter";
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

.text-xl-semibold {
    font-family: "Inter";
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
}

.text-xl-bold {
    font-family: "Inter";
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}

/* Display XS */
.display-xs-regular {
    font-family: "Inter";
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
}

.display-xs-medium {
    font-family: "Inter";
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.display-xs-semibold {
    font-family: "Inter";
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}

.display-xs-bold {
    font-family: "Inter";
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

/* Display SM */
.display-sm-regular {
    font-family: "Inter";
    font-size: 30px;
    font-weight: 400;
    line-height: 38px;
}

.display-sm-medium {
    font-family: "Inter";
    font-size: 30px;
    font-weight: 500;
    line-height: 38px;
}

.display-sm-semibold {
    font-family: "Inter";
    font-size: 30px;
    font-weight: 600;
    line-height: 38px;
}

.display-sm-bold {
    font-family: "Inter";
    font-size: 30px;
    font-weight: 700;
    line-height: 38px;
}

/* Display MD */
.display-md-regular {
    font-family: "Inter";
    font-size: 36px;
    font-weight: 400;
    line-height: 100%;
}

.display-md-medium {
    font-family: "Inter";
    font-size: 36px;
    font-weight: 500;
    line-height: 100%;
}

.display-md-semibold {
    font-family: "Inter";
    font-size: 36px;
    font-weight: 600;
    line-height: 100%;
}

.display-md-bold {
    font-family: "Inter";
    font-size: 36px;
    font-weight: 700;
    line-height: 100%;
}

/* Display LG */
.display-lg-regular {
    font-family: "Inter";
    font-size: 48px;
    font-weight: 400;
    line-height: 100%;
}

.display-lg-medium {
    font-family: "Inter";
    font-size: 48px;
    font-weight: 500;
    line-height: 100%;
}

.display-lg-semibold {
    font-family: "Inter";
    font-size: 48px;
    font-weight: 600;
    line-height: 100%;
}

.display-lg-bold {
    font-family: "Inter";
    font-size: 48px;
    font-weight: 700;
    line-height: 100%;
}


/* Extra custom */

.text-xs-semibold-sans {
    font-family: Plus Jakarta Sans;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
}

.text-md-semibold-sans {
    font-family: Plus Jakarta Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.text-lg-semibold-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.text-xl-semibold-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
}

.text-sm-medium-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}
/* Text XS */
.text-xs-regular-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.text-xs-medium-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

.text-xs-semibold-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

.text-xs-bold-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

/* Text SM */
.text-sm-regular-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}


.text-sm-bold-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

/* Text MD */
.text-md-medium-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.text-md-regular-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}


.text-md-bold-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

/* Text LG */
.text-lg-regular-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

.text-lg-medium {
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}



.text-lg-bold-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
}

/* Text XL */
.text-xl-regular-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}

.text-xl-medium-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}


.text-xl-bold-sans {
    font-family: "Plus Jakarta Sans";
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}
/* 🟠 WARNING - ORANGE */
.bg-content-tertiary {
    background: var(--content-tertiary) !important;
}

.bg-foundation-warning-orange-1 {
    background: var(--foundation-warning-orange-1) !important;
}

.bg-foundation-warning-orange-2 {
    background: var(--foundation-warning-orange-2) !important;
}

.bg-foundation-warning-orange-3 {
    background: var(--foundation-warning-orange-3) !important;
}

.bg-foundation-warning-orange-4 {
    background: var(--foundation-warning-orange-4) !important;
}

.bg-foundation-warning-orange-5 {
    background: var(--foundation-warning-orange-5) !important;
}

.bg-foundation-warning-orange-6 {
    background: var(--foundation-warning-orange-6) !important;
}

.bg-foundation-warning-orange-7 {
    background: var(--foundation-warning-orange-7) !important;
}

.bg-foundation-warning-orange-8 {
    background: var(--foundation-warning-orange-8) !important;
}

.bg-foundation-warning-orange-9 {
    background: var(--foundation-warning-orange-9) !important;
}

.bg-foundation-warning-orange-10 {
    background: var(--foundation-warning-orange-10) !important;
}

.border-foundation-warning-orange-1 {
    border: 1px solid var(--foundation-warning-orange-1) !important;
}

.border-foundation-warning-orange-2 {
    border: 1px solid var(--foundation-warning-orange-2) !important;
}

.border-foundation-warning-orange-3 {
    border: 1px solid var(--foundation-warning-orange-3) !important;
}

.border-foundation-warning-orange-4 {
    border: 1px solid var(--foundation-warning-orange-4) !important;
}

.border-foundation-warning-orange-5 {
    border: 1px solid var(--foundation-warning-orange-5) !important;
}

.border-foundation-warning-orange-6 {
    border: 1px solid var(--foundation-warning-orange-6) !important;
}

.border-foundation-warning-orange-7 {
    border: 1px solid var(--foundation-warning-orange-7) !important;
}

.border-foundation-warning-orange-8 {
    border: 1px solid var(--foundation-warning-orange-8) !important;
}

.border-foundation-warning-orange-9 {
    border: 1px solid var(--foundation-warning-orange-9) !important;
}

.border-foundation-warning-orange-10 {
    border: 1px solid var(--foundation-warning-orange-10) !important;
}

/* ✅ SUCCESS - GREEN */
.bg-foundation-success-green-1 {
    background: var(--foundation-success-green-1) !important;
}

.bg-foundation-success-green-2 {
    background: var(--foundation-success-green-2) !important;
}

.bg-foundation-success-green-3 {
    background: var(--foundation-success-green-3) !important;
}

.bg-foundation-success-green-4 {
    background: var(--foundation-success-green-4) !important;
}

.bg-foundation-success-green-5 {
    background: var(--foundation-success-green-5) !important;
}

.bg-foundation-success-green-6 {
    background: var(--foundation-success-green-6) !important;
}

.bg-foundation-success-green-7 {
    background: var(--foundation-success-green-7) !important;
}

.bg-foundation-success-green-8 {
    background: var(--foundation-success-green-8) !important;
}

.bg-foundation-success-green-9 {
    background: var(--foundation-success-green-9) !important;
}

.bg-foundation-success-green-10 {
    background: var(--foundation-success-green-10) !important;
}

.border-foundation-success-green-1 {
    border: 1px solid var(--foundation-success-green-1) !important;
}

.border-foundation-success-green-2 {
    border: 1px solid var(--foundation-success-green-2) !important;
}

.border-foundation-success-green-3 {
    border: 1px solid var(--foundation-success-green-3) !important;
}

.border-foundation-success-green-4 {
    border: 1px solid var(--foundation-success-green-4) !important;
}

.border-foundation-success-green-5 {
    border: 1px solid var(--foundation-success-green-5) !important;
}

.border-foundation-success-green-6 {
    border: 1px solid var(--foundation-success-green-6) !important;
}

.border-foundation-success-green-7 {
    border: 1px solid var(--foundation-success-green-7) !important;
}

.border-foundation-success-green-8 {
    border: 1px solid var(--foundation-success-green-8) !important;
}

.border-foundation-success-green-9 {
    border: 1px solid var(--foundation-success-green-9) !important;
}

.border-foundation-success-green-10 {
    border: 1px solid var(--foundation-success-green-10) !important;
}

/* 🔴 ERROR - RED */
.bg-foundation-error-red-1 {
    background: var(--foundation-error-red-1) !important;
}

.bg-foundation-error-red-2 {
    background: var(--foundation-error-red-2) !important;
}

.bg-foundation-error-red-3 {
    background: var(--foundation-error-red-3) !important;
}

.bg-foundation-error-red-4 {
    background: var(--foundation-error-red-4) !important;
}

.bg-foundation-error-red-5 {
    background: var(--foundation-error-red-5) !important;
}

.bg-foundation-error-red-6 {
    background: var(--foundation-error-red-6) !important;
}

.bg-foundation-error-red-7 {
    background: var(--foundation-error-red-7) !important;
}

.bg-foundation-error-red-8 {
    background: var(--foundation-error-red-8) !important;
}

.bg-foundation-error-red-9 {
    background: var(--foundation-error-red-9) !important;
}

.bg-foundation-error-red-10 {
    background: var(--foundation-error-red-10) !important;
}

.border-foundation-error-red-1 {
    border: 1px solid var(--foundation-error-red-1) !important;
}

.border-foundation-error-red-2 {
    border: 1px solid var(--foundation-error-red-2) !important;
}

.border-foundation-error-red-3 {
    border: 1px solid var(--foundation-error-red-3) !important;
}

.border-foundation-error-red-4 {
    border: 1px solid var(--foundation-error-red-4) !important;
}

.border-foundation-error-red-5 {
    border: 1px solid var(--foundation-error-red-5) !important;
}

.border-foundation-error-red-6 {
    border: 1px solid var(--foundation-error-red-6) !important;
}

.border-foundation-error-red-7 {
    border: 1px solid var(--foundation-error-red-7) !important;
}

.border-foundation-error-red-8 {
    border: 1px solid var(--foundation-error-red-8) !important;
}

.border-foundation-error-red-9 {
    border: 1px solid var(--foundation-error-red-9) !important;
}

.border-foundation-error-red-10 {
    border: 1px solid var(--foundation-error-red-10) !important;
}
/* 🟠 WARNING - ORANGE */
.text-foundation-warning-orange-1 {
    color: var(--foundation-warning-orange-1) !important;
}

.text-foundation-warning-orange-2 {
    color: var(--foundation-warning-orange-2) !important;
}

.text-foundation-warning-orange-3 {
    color: var(--foundation-warning-orange-3) !important;
}

.text-foundation-warning-orange-4 {
    color: var(--foundation-warning-orange-4) !important;
}

.text-foundation-warning-orange-5 {
    color: var(--foundation-warning-orange-5) !important;
}

.text-foundation-warning-orange-6 {
    color: var(--foundation-warning-orange-6) !important;
}

.text-foundation-warning-orange-7 {
    color: var(--foundation-warning-orange-7) !important;
}

.text-foundation-warning-orange-8 {
    color: var(--foundation-warning-orange-8) !important;
}

.text-foundation-warning-orange-9 {
    color: var(--foundation-warning-orange-9) !important;
}

.text-foundation-warning-orange-10 {
    color: var(--foundation-warning-orange-10) !important;
}

/* ✅ SUCCESS - GREEN */
.text-foundation-success-green-1 {
    color: var(--foundation-success-green-1) !important;
}

.text-foundation-success-green-2 {
    color: var(--foundation-success-green-2) !important;
}

.text-foundation-success-green-3 {
    color: var(--foundation-success-green-3) !important;
}

.text-foundation-success-green-4 {
    color: var(--foundation-success-green-4) !important;
}

.text-foundation-success-green-5 {
    color: var(--foundation-success-green-5) !important;
}

.text-foundation-success-green-6 {
    color: var(--foundation-success-green-6) !important;
}

.text-foundation-success-green-7 {
    color: var(--foundation-success-green-7) !important;
}

.text-foundation-success-green-8 {
    color: var(--foundation-success-green-8) !important;
}

.text-foundation-success-green-9 {
    color: var(--foundation-success-green-9) !important;
}

.text-foundation-success-green-10 {
    color: var(--foundation-success-green-10) !important;
}

/* 🔴 ERROR - RED */
.text-foundation-error-red-1 {
    color: var(--foundation-error-red-1) !important;
}

.text-foundation-error-red-2 {
    color: var(--foundation-error-red-2) !important;
}

.text-foundation-error-red-3 {
    color: var(--foundation-error-red-3) !important;
}

.text-foundation-error-red-4 {
    color: var(--foundation-error-red-4) !important;
}

.text-foundation-error-red-5 {
    color: var(--foundation-error-red-5) !important;
}

.text-foundation-error-red-6 {
    color: var(--foundation-error-red-6) !important;
}

.text-foundation-error-red-7 {
    color: var(--foundation-error-red-7) !important;
}

.text-foundation-error-red-8 {
    color: var(--foundation-error-red-8) !important;
}

.text-foundation-error-red-9 {
    color: var(--foundation-error-red-9) !important;
}

.text-foundation-error-red-10 {
    color: var(--foundation-error-red-10) !important;
}

.text-foundation-yellow-25 {
    color: var(--foundation-yellow-25) !important;
}

.text-foundation-yellow-50 {
    color: var(--foundation-yellow-50) !important;
}

.text-foundation-yellow-100 {
    color: var(--foundation-yellow-100) !important;
}

.text-foundation-yellow-200 {
    color: var(--foundation-yellow-200) !important;
}

.text-foundation-yellow-300 {
    color: var(--foundation-yellow-300) !important;
}

.text-foundation-yellow-400 {
    color: var(--foundation-yellow-400) !important;
}

.text-foundation-yellow-500 {
    color: var(--foundation-yellow-500) !important;
}

.text-foundation-yellow-600 {
    color: var(--foundation-yellow-600) !important;
}

.text-foundation-yellow-700 {
    color: var(--foundation-yellow-700) !important;
}

.text-foundation-yellow-800 {
    color: var(--foundation-yellow-800) !important;
}

.text-foundation-yellow-900 {
    color: var(--foundation-yellow-900) !important;
}

.text-foundation-yellow-1000 {
    color: var(--foundation-yellow-1000) !important;
}

.text-foundation-orange-25 {
    color: var(--foundation-orange-25) !important;
}

.text-foundation-orange-50 {
    color: var(--foundation-orange-50) !important;
}

.text-foundation-orange-100 {
    color: var(--foundation-orange-100) !important;
}

.text-foundation-orange-200 {
    color: var(--foundation-orange-200) !important;
}

.text-foundation-orange-300 {
    color: var(--foundation-orange-300) !important;
}

.text-foundation-orange-400 {
    color: var(--foundation-orange-400) !important;
}

.text-foundation-orange-500 {
    color: var(--foundation-orange-500) !important;
}

.text-foundation-orange-600 {
    color: var(--foundation-orange-600) !important;
}

.text-foundation-orange-700 {
    color: var(--foundation-orange-700) !important;
}

.text-foundation-orange-800 {
    color: var(--foundation-orange-800) !important;
}

.text-foundation-orange-900 {
    color: var(--foundation-orange-900) !important;
}

.text-foundation-orange-1000 {
    color: var(--foundation-orange-1000) !important;
}

.text-foundation-brand-50 {
    color: var(--foundation-brand-50) !important;
}

.text-foundation-brand-100 {
    color: var(--foundation-brand-100) !important;
}

.text-foundation-brand-200 {
    color: var(--foundation-brand-200) !important;
}

.text-foundation-brand-300 {
    color: var(--foundation-brand-300) !important;
}

.text-foundation-brand-400 {
    color: var(--foundation-brand-400) !important;
}

.text-foundation-brand-500 {
    color: var(--foundation-brand-500) !important;
}

.text-foundation-brand-600 {
    color: var(--foundation-brand-600) !important;
}

.text-foundation-brand-700 {
    color: var(--foundation-brand-700) !important;
}

.text-foundation-brand-800 {
    color: var(--foundation-brand-800) !important;
}

.text-foundation-brand-900 {
    color: var(--foundation-brand-900) !important;
}

.text-foundation-error-25 {
    color: var(--foundation-error-25) !important;
}

.text-foundation-error-50 {
    color: var(--foundation-error-50) !important;
}

.text-foundation-error-100 {
    color: var(--foundation-error-100);
}

.text-foundation-error-200 {
    color: var(--foundation-error-200);
}

.text-foundation-error-300 {
    color: var(--foundation-error-300);
}

.text-foundation-error-400 {
    color: var(--foundation-error-400);
}

.text-foundation-error-500 {
    color: var(--foundation-error-500);
}

.text-foundation-error-600 {
    color: var(--foundation-error-600) !important;
}

.text-foundation-error-700 {
    color: var(--foundation-error-700) !important;
}

.text-foundation-error-800 {
    color: var(--foundation-error-800);
}

.text-foundation-error-900 {
    color: var(--foundation-error-900);
}

.text-foundation-error-1000 {
    color: var(--foundation-error-1000);
}

.text-foundation-success-25 {
    color: var(--foundation-success-25);
}

.text-foundation-success-50 {
    color: var(--foundation-success-50) !important;
}

.text-foundation-success-100 {
    color: var(--foundation-success-100);
}

.text-foundation-success-200 {
    color: var(--foundation-success-200) !important;
}

.text-foundation-success-300 {
    color: var(--foundation-success-300);
}

.text-foundation-success-400 {
    color: var(--foundation-success-400);
}

.text-foundation-success-500 {
    color: var(--foundation-success-500);
}

.text-foundation-success-600 {
    color: var(--foundation-success-600) !important;
}

.text-foundation-success-700 {
    color: var(--foundation-success-700) !important;
}

.text-foundation-success-800 {
    color: var(--foundation-success-800);
}

.text-foundation-success-900 {
    color: var(--foundation-success-900);
}

.text-foundation-success-1000 {
    color: var(--foundation-success-1000);
}

.text-foundation-grey-25 {
    color: var(--foundation-grey-25);
}

.text-foundation-grey-50 {
    color: var(--foundation-grey-50) !important;
}

.text-foundation-grey-100 {
    color: var(--foundation-grey-100);
}

.text-foundation-grey-200 {
    color: var(--foundation-grey-200);
}

.text-foundation-grey-300 {
    color: var(--foundation-grey-300);
}

.text-foundation-grey-400 {
    color: var(--foundation-grey-400);
}

.text-foundation-grey-500 {
    color: var(--foundation-grey-500);
}

.text-foundation-grey-600 {
    color: var(--foundation-grey-600) !important;
}

.text-foundation-grey-700 {
    color: var(--foundation-grey-700) !important;
}

.text-foundation-grey-800 {
    color: var(--foundation-grey-800);
}

.text-foundation-grey-900 {
    color: var(--foundation-grey-900);
}

.text-foundation-grey-1000 {
    color: var(--foundation-grey-1000);
}

.text-brand {
    color: var(--border-brand);
}
/* YELLOW */
.bg-foundation-yellow-25 {
    background-color: var(--foundation-yellow-25) !important;
}

.bg-foundation-yellow-50 {
    background-color: var(--foundation-yellow-50) !important;
}

.bg-foundation-yellow-100 {
    background-color: var(--foundation-yellow-100);
}

.bg-foundation-yellow-200 {
    background-color: var(--foundation-yellow-200) !important;
}

.bg-foundation-yellow-300 {
    background-color: var(--foundation-yellow-300);
}

.bg-foundation-yellow-400 {
    background-color: var(--foundation-yellow-400);
}

.bg-foundation-yellow-500 {
    background-color: var(--foundation-yellow-500);
}

.bg-foundation-yellow-600 {
    background-color: var(--foundation-yellow-600);
}

.bg-foundation-yellow-700 {
    background-color: var(--foundation-yellow-700);
}

.bg-foundation-yellow-800 {
    background-color: var(--foundation-yellow-800);
}

.bg-foundation-yellow-900 {
    background-color: var(--foundation-yellow-900);
}

.bg-foundation-yellow-1000 {
    background-color: var(--foundation-yellow-1000);
}

.bg-hover-foundation-yellow-25:hover {
    background-color: var(--foundation-yellow-25);
}

.bg-hover-foundation-yellow-50:hover {
    background-color: var(--foundation-yellow-50);
}

.bg-hover-foundation-yellow-100:hover {
    background-color: var(--foundation-yellow-100);
}

.bg-hover-foundation-yellow-200:hover {
    background-color: var(--foundation-yellow-200);
}

.bg-hover-foundation-yellow-300:hover {
    background-color: var(--foundation-yellow-300);
}

.bg-hover-foundation-yellow-400:hover {
    background-color: var(--foundation-yellow-400);
}

.bg-hover-foundation-yellow-500:hover {
    background-color: var(--foundation-yellow-500);
}

.bg-hover-foundation-yellow-600:hover {
    background-color: var(--foundation-yellow-600);
}

.bg-hover-foundation-yellow-700:hover {
    background-color: var(--foundation-yellow-700);
}

.bg-hover-foundation-yellow-800:hover {
    background-color: var(--foundation-yellow-800);
}

.bg-hover-foundation-yellow-900:hover {
    background-color: var(--foundation-yellow-900);
}

.bg-hover-foundation-yellow-1000:hover {
    background-color: var(--foundation-yellow-1000);
}

.bg-foundation-orange-25 {
    background-color: var(--foundation-orange-25) !important;
}

.bg-foundation-orange-50 {
    background-color: var(--foundation-orange-50) !important;
}

.bg-foundation-orange-100 {
    background-color: var(--foundation-orange-100) !important;
}

.bg-foundation-orange-200 {
    background-color: var(--foundation-orange-200) !important;
}

.bg-foundation-orange-300 {
    background-color: var(--foundation-orange-300) !important;
}

.bg-foundation-orange-400 {
    background-color: var(--foundation-orange-400) !important;
}

.bg-foundation-orange-500 {
    background-color: var(--foundation-orange-500) !important;
}

.bg-foundation-orange-600 {
    background-color: var(--foundation-orange-600) !important;
}

.bg-foundation-orange-700 {
    background-color: var(--foundation-orange-700) !important;
}

.bg-foundation-orange-800 {
    background-color: var(--foundation-orange-800) !important;
}

.bg-foundation-orange-900 {
    background-color: var(--foundation-orange-900) !important;
}

.bg-foundation-orange-1000 {
    background-color: var(--foundation-orange-1000) !important;
}

.bg-hover-foundation-orange-25:hover {
    background-color: var(--foundation-orange-25) !important;
}

.bg-hover-foundation-orange-50:hover {
    background-color: var(--foundation-orange-50) !important;
}

.bg-hover-foundation-orange-100:hover {
    background-color: var(--foundation-orange-100) !important;
}

.bg-hover-foundation-orange-200:hover {
    background-color: var(--foundation-orange-200) !important;
}

.bg-hover-foundation-orange-300:hover {
    background-color: var(--foundation-orange-300) !important;
}

.bg-hover-foundation-orange-400:hover {
    background-color: var(--foundation-orange-400) !important;
}

.bg-hover-foundation-orange-500:hover {
    background-color: var(--foundation-orange-500) !important;
}

.bg-hover-foundation-orange-600:hover {
    background-color: var(--foundation-orange-600) !important;
}

.bg-hover-foundation-orange-700:hover {
    background-color: var(--foundation-orange-700) !important;
}

.bg-hover-foundation-orange-800:hover {
    background-color: var(--foundation-orange-800) !important;
}

.bg-hover-foundation-orange-900:hover {
    background-color: var(--foundation-orange-900) !important;
}

.bg-hover-foundation-orange-1000:hover {
    background-color: var(--foundation-orange-1000) !important;
}

/* GREY */
.bg-foundation-grey-25 {
    background-color: var(--foundation-grey-25) !important;
}

.bg-foundation-grey-50 {
    background-color: var(--foundation-grey-50);
}

.bg-foundation-grey-100 {
    background-color: var(--foundation-grey-100);
}

.bg-foundation-grey-200 {
    background-color: var(--foundation-grey-200);
}

.bg-foundation-grey-300 {
    background-color: var(--foundation-grey-300);
}

.bg-foundation-grey-400 {
    background-color: var(--foundation-grey-400);
}

.bg-foundation-grey-500 {
    background-color: var(--foundation-grey-500);
}

.bg-foundation-grey-600 {
    background-color: var(--foundation-grey-600);
}

.bg-foundation-grey-700 {
    background-color: var(--foundation-grey-700);
}

.bg-foundation-grey-800 {
    background-color: var(--foundation-grey-800);
}

.bg-foundation-grey-900 {
    background-color: var(--foundation-grey-900);
}

.bg-foundation-grey-1000 {
    background-color: var(--foundation-grey-1000);
}

/* BRAND */
.bg-foundation-brand-50 {
    background-color: var(--foundation-brand-50) !important;
}

.bg-foundation-brand-100 {
    background-color: var(--foundation-brand-100) !important;
}

.bg-foundation-brand-200 {
    background-color: var(--foundation-brand-200);
}

.bg-foundation-brand-300 {
    background-color: var(--foundation-brand-300);
}

.bg-foundation-brand-400 {
    background-color: var(--foundation-brand-400);
}

.bg-foundation-brand-500 {
    background-color: var(--foundation-brand-500);
}

.bg-foundation-brand-600 {
    background-color: var(--foundation-brand-600);
}

.bg-foundation-brand-700 {
    background-color: var(--foundation-brand-700);
}

.bg-foundation-brand-800 {
    background-color: var(--foundation-brand-800);
}

.bg-foundation-brand-900 {
    background-color: var(--foundation-brand-900);
}
/* BRAND HOVER */
.bg-hover-foundation-brand-50:hover {
    background-color: var(--foundation-brand-50);
}

.bg-hover-foundation-brand-100:hover {
    background-color: var(--foundation-brand-100);
}

.bg-hover-foundation-brand-200:hover {
    background-color: var(--foundation-brand-200);
}

.bg-hover-foundation-brand-300:hover {
    background-color: var(--foundation-brand-300);
}

.bg-hover-foundation-brand-400:hover {
    background-color: var(--foundation-brand-400);
}

.bg-hover-foundation-brand-500:hover {
    background-color: var(--foundation-brand-500);
}

.bg-hover-foundation-brand-600:hover {
    background-color: var(--foundation-brand-600);
}

.bg-hover-foundation-brand-700:hover {
    background-color: var(--foundation-brand-700);
}

.bg-hover-foundation-brand-800:hover {
    background-color: var(--foundation-brand-800);
}

.bg-hover-foundation-brand-900:hover {
    background-color: var(--foundation-brand-900);
}


/* BLUE GREY */
.bg-foundation-blue-grey-25 {
    background-color: var(--foundation-blue-grey-25);
}

.bg-foundation-blue-grey-50 {
    background-color: var(--foundation-blue-grey-50);
}

.bg-foundation-blue-grey-100 {
    background-color: var(--foundation-blue-grey-100);
}

.bg-foundation-blue-grey-200 {
    background-color: var(--foundation-blue-grey-200);
}

.bg-foundation-blue-grey-300 {
    background-color: var(--foundation-blue-grey-300);
}

.bg-foundation-blue-grey-400 {
    background-color: var(--foundation-blue-grey-400);
}

.bg-foundation-blue-grey-500 {
    background-color: var(--foundation-blue-grey-500);
}

.bg-foundation-blue-grey-600 {
    background-color: var(--foundation-blue-grey-600);
}

.bg-foundation-blue-grey-700 {
    background-color: var(--foundation-blue-grey-700);
}

.bg-foundation-blue-grey-800 {
    background-color: var(--foundation-blue-grey-800);
}

.bg-foundation-blue-grey-900 {
    background-color: var(--foundation-blue-grey-900);
}

/* SUCCESS */
.bg-foundation-success-25 {
    background-color: var(--foundation-success-25);
}

.bg-foundation-success-50 {
    background-color: var(--foundation-success-50) !important;
}

.bg-foundation-success-100 {
    background-color: var(--foundation-success-100);
}

.bg-foundation-success-200 {
    background-color: var(--foundation-success-200) !important;
}

.bg-foundation-success-300 {
    background-color: var(--foundation-success-300);
}

.bg-foundation-success-400 {
    background-color: var(--foundation-success-400);
}

.bg-foundation-success-500 {
    background-color: var(--foundation-success-500);
}

.bg-foundation-success-600 {
    background-color: var(--foundation-success-600);
}

.bg-foundation-success-700 {
    background-color: var(--foundation-success-700);
}

.bg-foundation-success-800 {
    background-color: var(--foundation-success-800);
}

.bg-foundation-success-900 {
    background-color: var(--foundation-success-900);
}

.bg-foundation-success-1000 {
    background-color: var(--foundation-success-1000);
}

/* WARNING */
.bg-foundation-warning-25 {
    background-color: var(--foundation-warning-25);
}

.bg-foundation-warning-50 {
    background-color: var(--foundation-warning-50);
}

.bg-foundation-warning-100 {
    background-color: var(--foundation-warning-100);
}

.bg-foundation-warning-200 {
    background-color: var(--foundation-warning-200);
}

.bg-foundation-warning-300 {
    background-color: var(--foundation-warning-300);
}

.bg-foundation-warning-400 {
    background-color: var(--foundation-warning-400);
}

.bg-foundation-warning-500 {
    background-color: var(--foundation-warning-500);
}

.bg-foundation-warning-600 {
    background-color: var(--foundation-warning-600);
}

.bg-foundation-warning-700 {
    background-color: var(--foundation-warning-700);
}

.bg-foundation-warning-800 {
    background-color: var(--foundation-warning-800);
}

.bg-foundation-warning-900 {
    background-color: var(--foundation-warning-900);
}

.bg-foundation-warning-1000 {
    background-color: var(--foundation-warning-1000);
}

/* ERROR */
.bg-foundation-error-25 {
    background-color: var(--foundation-error-25) !important;
}

.bg-foundation-error-50 {
    background-color: var(--foundation-error-50) !important;
}

.bg-foundation-error-100 {
    background-color: var(--foundation-error-100);
}

.bg-foundation-error-200 {
    background-color: var(--foundation-error-200);
}

.bg-foundation-error-300 {
    background-color: var(--foundation-error-300);
}

.bg-foundation-error-400 {
    background-color: var(--foundation-error-400);
}

.bg-foundation-error-500 {
    background-color: var(--foundation-error-500);
}

.bg-foundation-error-600 {
    background-color: var(--foundation-error-600);
}

.bg-foundation-error-700 {
    background-color: var(--foundation-error-700);
}

.bg-foundation-error-800 {
    background-color: var(--foundation-error-800);
}

.bg-foundation-error-900 {
    background-color: var(--foundation-error-900);
}

.bg-foundation-error-1000 {
    background-color: var(--foundation-error-1000);
}

.bg-grey-50 {
    background-color: var(--grey-50) !important;
}

.border-grey-50 {
    border-color: var(--grey-50) !important;
}

.bg-grey-100 {
    background-color: var(--grey-100) !important;
}

.border-grey-100 {
    border-color: var(--grey-100) !important;
}

.bg-grey-200 {
    background-color: var(--grey-200);
}

.border-grey-200 {
    border-color: var(--grey-200) !important;
}

.bg-grey-300 {
    background-color: var(--grey-300);
}

.border-grey-300 {
    border-color: var(--grey-300) !important;
}

.border-foundation-yellow-25 {
    border-color: var(--foundation-yellow-25) !important;
}

.border-foundation-yellow-50 {
    border-color: var(--foundation-yellow-50) !important;
}

.border-foundation-yellow-100 {
    border-color: var(--foundation-yellow-100) !important;
}

.border-foundation-yellow-200 {
    border-color: var(--foundation-yellow-200) !important;
}

.border-foundation-yellow-300 {
    border-color: var(--foundation-yellow-300) !important;
}

.border-foundation-yellow-400 {
    border-color: var(--foundation-yellow-400) !important;
}

.border-foundation-yellow-500 {
    border-color: var(--foundation-yellow-500) !important;
}

.border-foundation-yellow-600 {
    border-color: var(--foundation-yellow-600) !important;
}

.border-foundation-yellow-700 {
    border-color: var(--foundation-yellow-700) !important;
}

.border-foundation-yellow-800 {
    border-color: var(--foundation-yellow-800) !important;
}

.border-foundation-yellow-900 {
    border-color: var(--foundation-yellow-900) !important;
}

.border-foundation-yellow-1000 {
    border-color: var(--foundation-yellow-1000) !important;
}

.border-foundation-orange-25 {
    border-color: var(--foundation-orange-25) !important;
}

.border-foundation-orange-50 {
    border-color: var(--foundation-orange-50) !important;
}

.border-foundation-orange-100 {
    border-color: var(--foundation-orange-100) !important;
}

.border-foundation-orange-200 {
    border-color: var(--foundation-orange-200) !important;
}

.border-foundation-orange-300 {
    border-color: var(--foundation-orange-300) !important;
}

.border-foundation-orange-400 {
    border-color: var(--foundation-orange-400) !important;
}

.border-foundation-orange-500 {
    border-color: var(--foundation-orange-500) !important;
}

.border-foundation-orange-600 {
    border-color: var(--foundation-orange-600) !important;
}

.border-foundation-orange-700 {
    border-color: var(--foundation-orange-700) !important;
}

.border-foundation-orange-800 {
    border-color: var(--foundation-orange-800) !important;
}

.border-foundation-orange-900 {
    border-color: var(--foundation-orange-900) !important;
}

.border-foundation-orange-1000 {
    border-color: var(--foundation-orange-1000) !important;
}

.border-base-black {
    border-color: var(--base-black);
}

.border-base-white {
    border-color: var(--base-white);
}

.border-foundation-brand-50 {
    border-color: var(--foundation-brand-50) !important;
}

.border-foundation-brand-100 {
    border-color: var(--foundation-brand-100) !important;
}

.border-foundation-brand-200 {
    border-color: var(--foundation-brand-200) !important;
}

.border-foundation-brand-300 {
    border-color: var(--foundation-brand-300) !important;
}

.border-foundation-brand-400 {
    border: 1px solid var(--foundation-brand-400);
}

.border-foundation-brand-500 {
    border-color: var(--foundation-brand-500) !important;
}

.border-foundation-brand-600 {
    border-color: var(--foundation-brand-600) !important;
}

.border-foundation-brand-700 {
    border-color: var(--foundation-brand-700) !important;
}

.border-foundation-brand-800 {
    border-color: var(--foundation-brand-800) !important;
}

.border-foundation-brand-900 {
    border-color: var(--foundation-brand-900);
}

.border-foundation-blue-grey-25 {
    border-color: var(--foundation-blue-grey-25);
}

.border-foundation-blue-grey-50 {
    border-color: var(--foundation-blue-grey-50);
}

.border-foundation-blue-grey-100 {
    border-color: var(--foundation-blue-grey-100);
}

.border-foundation-blue-grey-200 {
    border-color: var(--foundation-blue-grey-200);
}

.border-foundation-blue-grey-300 {
    border-color: var(--foundation-blue-grey-300);
}

.border-foundation-blue-grey-400 {
    border-color: var(--foundation-blue-grey-400);
}

.border-foundation-blue-grey-500 {
    border-color: var(--foundation-blue-grey-500);
}

.border-foundation-blue-grey-600 {
    border-color: var(--foundation-blue-grey-600);
}

.border-foundation-blue-grey-700 {
    border-color: var(--foundation-blue-grey-700);
}

.border-foundation-blue-grey-800 {
    border-color: var(--foundation-blue-grey-800);
}

.border-foundation-blue-grey-900 {
    border-color: var(--foundation-blue-grey-900);
}

.border-foundation-success-25 {
    border-color: var(--foundation-success-25);
}

.border-foundation-success-50 {
    border-color: var(--foundation-success-50) !important;
}

.border-foundation-success-100 {
    border-color: var(--foundation-success-100);
}

.border-foundation-success-200 {
    border-color: var(--foundation-success-200) !important;
}

.border-foundation-success-300 {
    border-color: var(--foundation-success-300);
}

.border-foundation-success-400 {
    border-color: var(--foundation-success-400) !important;
}

.border-foundation-success-500 {
    border-color: var(--foundation-success-500) !important;
}

.border-foundation-success-600 {
    border-color: var(--foundation-success-600);
}

.border-foundation-success-700 {
    border-color: var(--foundation-success-700);
}

.border-foundation-success-800 {
    border-color: var(--foundation-success-800);
}

.border-foundation-success-900 {
    border-color: var(--foundation-success-900);
}

.border-foundation-success-1000 {
    border-color: var(--foundation-success-1000);
}

.border-foundation-warning-25 {
    border-color: var(--foundation-warning-25);
}

.border-foundation-warning-50 {
    border-color: var(--foundation-warning-50);
}

.border-foundation-warning-100 {
    border-color: var(--foundation-warning-100);
}

.border-foundation-warning-200 {
    border-color: var(--foundation-warning-200);
}

.border-foundation-warning-300 {
    border-color: var(--foundation-warning-300);
}

.border-foundation-warning-400 {
    border-color: var(--foundation-warning-400) !important;
}

.border-foundation-warning-500 {
    border-color: var(--foundation-warning-500);
}

.border-foundation-warning-600 {
    border-color: var(--foundation-warning-600);
}

.border-foundation-warning-700 {
    border-color: var(--foundation-warning-700);
}

.border-foundation-warning-800 {
    border-color: var(--foundation-warning-800);
}

.border-foundation-warning-900 {
    border-color: var(--foundation-warning-900);
}

.border-foundation-warning-1000 {
    border-color: var(--foundation-warning-1000);
}

.border-foundation-error-25 {
    border-color: var(--foundation-error-25) !important;
}

.border-foundation-error-50 {
    border-color: var(--foundation-error-50) !important;
}

.border-foundation-error-100 {
    border-color: var(--foundation-error-100);
}

.border-foundation-error-200 {
    border-color: var(--foundation-error-200) !important;
}

.border-foundation-error-300 {
    border-color: var(--foundation-error-300) !important;
}

.border-foundation-error-400 {
    border-color: var(--foundation-error-400) !important;
}

.border-foundation-error-500 {
    border-color: var(--foundation-error-500) !important;
}

.border-foundation-error-600 {
    border-color: var(--foundation-error-600);
}

.border-foundation-error-700 {
    border-color: var(--foundation-error-700);
}

.border-foundation-error-800 {
    border-color: var(--foundation-error-800);
}

.border-foundation-error-900 {
    border-color: var(--foundation-error-900);
}

.border-foundation-error-1000 {
    border-color: var(--foundation-error-1000);
}

.border-foundation-grey-25 {
    border-color: var(--foundation-grey-25);
}

.border-foundation-grey-50 {
    border-color: var(--foundation-grey-50);
}

.border-foundation-grey-100 {
    border-color: var(--foundation-grey-100);
}

.border-foundation-grey-200 {
    border-color: var(--foundation-grey-200);
}

.border-foundation-grey-300 {
    border-color: var(--foundation-grey-300) !important;
}

.border-foundation-grey-400 {
    border-color: var(--foundation-grey-400);
}

.border-foundation-grey-500 {
    border-color: var(--foundation-grey-500);
}

.border-foundation-grey-600 {
    border-color: var(--foundation-grey-600);
}

.border-foundation-grey-700 {
    border-color: var(--foundation-grey-700);
}

.border-foundation-grey-800 {
    border-color: var(--foundation-grey-800);
}

.border-foundation-grey-900 {
    border-color: var(--foundation-grey-900);
}

.border-foundation-grey-1000 {
    border-color: var(--foundation-grey-1000);
}

.border-white {
    border-color: var(--white) !important;
}

.border-color {
    border-color: var(--color) !important;
}

.border-grey-25 {
    border-color: var(--grey-25) !important;
}

.border-grey-50 {
    border-color: var(--grey-50) !important;
}

.border-grey-100 {
    border-color: var(--grey-100) !important;
}

.border-grey-200 {
    border-color: var(--grey-200) !important;
}

.border-grey-300 {
    border-color: var(--grey-300) !important;
}

.border-grey-400 {
    border-color: var(--grey-400) !important;
}

.border-grey-500 {
    border-color: var(--grey-500) !important;
}

.border-grey-600 {
    border-color: var(--grey-600) !important;
}

.border-grey-700 {
    border-color: var(--grey-700) !important;
}

.border-grey-800 {
    border-color: var(--grey-800) !important;
}

.border-grey-900 {
    border-color: var(--grey-900) !important;
}

.border-brand-25 {
    border-color: var(--brand-25) !important;
}

.border-brand-50 {
    border-color: var(--brand-50) !important;
}

.border-brand-100 {
    border-color: var(--brand-100) !important;
}

.border-brand-200 {
    border-color: var(--brand-200) !important;
}

.border-brand-300 {
    border-color: var(--brand-300) !important;
}

.border-brand-400 {
    border-color: var(--brand-400) !important;
}

.border-brand-500 {
    border-color: var(--brand-500) !important;
}

.border-brand-600 {
    border-color: var(--brand-600) !important;
}

.border-brand-700 {
    border-color: var(--brand-700) !important;
}

.border-brand-800 {
    border-color: var(--brand-800) !important;
}

.border-brand-900 {
    border-color: var(--brand-900) !important;
}

.border-error-25 {
    border-color: var(--error-25) !important;
}

.border-error-50 {
    border-color: var(--error-50) !important;
}

.border-error-100 {
    border-color: var(--error-100) !important;
}

.border-error-200 {
    border-color: var(--error-200) !important;
}

.border-error-300 {
    border-color: var(--error-300) !important;
}

.border-error-400 {
    border-color: var(--error-400) !important;
}

.border-error-500 {
    border-color: var(--error-500) !important;
}

.border-error-600 {
    border-color: var(--error-600) !important;
}

.border-error-700 {
    border-color: var(--error-700) !important;
}

.border-error-800 {
    border-color: var(--error-800) !important;
}

.border-error-900 {
    border-color: var(--error-900) !important;
}

.border-warning-25 {
    border-color: var(--warning-25) !important;
}

.border-warning-50 {
    border-color: var(--warning-50) !important;
}

.border-warning-100 {
    border-color: var(--warning-100) !important;
}

.border-warning-200 {
    border-color: var(--warning-200) !important;
}

.border-warning-300 {
    border-color: var(--warning-300) !important;
}

.border-warning-400 {
    border-color: var(--warning-400) !important;
}

.border-warning-500 {
    border-color: var(--warning-500) !important;
}

.border-warning-600 {
    border-color: var(--warning-600) !important;
}

.border-warning-700 {
    border-color: var(--warning-700) !important;
}

.border-warning-800 {
    border-color: var(--warning-800) !important;
}

.border-warning-900 {
    border-color: var(--warning-900) !important;
}

.border-success-25 {
    border-color: var(--success-25) !important;
}

.border-success-50 {
    border-color: var(--success-50) !important;
}

.border-success-100 {
    border-color: var(--success-100) !important;
}

.border-success-200 {
    border-color: var(--success-200) !important;
}

.border-success-300 {
    border-color: var(--success-300) !important;
}

.border-success-400 {
    border-color: var(--success-400) !important;
}

.border-success-500 {
    border-color: var(--success-500) !important;
}

.border-success-600 {
    border-color: var(--success-600) !important;
}

.border-success-700 {
    border-color: var(--success-700) !important;
}

.border-success-800 {
    border-color: var(--success-800) !important;
}

.border-success-900 {
    border-color: var(--success-900) !important;
}

.border-blue-50 {
    border-color: var(--blue-50) !important;
}

.border-blue-700 {
    border-color: var(--blue-700) !important;
}

.border-orange-50 {
    border-color: var(--orange-50) !important;
}

.border-orange-700 {
    border-color: var(--orange-700) !important;
}

.text-grey-500 {
    color: var(--grey-500);
}

.text-grey-600 {
    color: var(--grey-600);
}

.text-grey-900 {
    color: var(--grey-900);
}

.text-color-gray-900 {
    color: var(--gray-900);
}

.text-color-gray-600 {
    color: var(--gray-600);
}

.text-content {
    color: var(--text-content);
}

.text-grey-500 {
    color: var(--grey-500);
}

.w-90 {
    width: 90%;
}

.btn.btn-secondary-gray {
    color: var(--content-primary) !important;
    border: 1px solid var(--foundation-grey-300) !important;
    background-color: var(--background-secondary) !important;
}

.btn.btn-tertiary-gray {
    border: 1px solid var(--foundation-grey-300) !important;
    background-color: var(--base-white);
}

.btn.btn-foundation-brand-600 {
    border: 1px solid var(--foundation-brand-600) !important;
    background: var(--foundation-brand-600) !important;
    color: var(--base-white) !important;
}

.btn.btn-foundation-error-600 {
    border: 1px solid var(--foundation-error-600) !important;
    background: var(--foundation-error-600) !important;
    color: var(--base-white) !important;
}

.btn.btn-brand-600 {
    border: 1px solid var(--brand-600) !important;
    background: var(--brand-600) !important;
    color: var(--base-white) !important;
}

.btn.btn-grey-300 {
    border: 1px solid var(--grey-300) !important;
    background: var(--white) !important;
    color: var(--grey-700) !important;
}

.btn.btn-error-600 {
    border: 1px solid var(--error-600) !important;
    background: var(--error-600) !important;
    color: var(--base-white) !important;
}

.btn.btn-success-600 {
    border: 1px solid var(--success-600) !important;
    background: var(--success-600) !important;
    color: var(--base-white) !important;
}

.btn-size-xs {
    border-radius: 4px !important;
    padding: 8px !important;
    justify-content: center;
    align-items: center;
    box-shadow: var(--effect-shadow-shadow-xs);
}

.btn-size-sm {
    padding: 8px 14px !important;
    border-radius: 8px !important;
}

.btn-icon-size-sm {
    padding: 8px !important;
    border-radius: 8px !important;
    align-items: center;
    justify-content: center;
}

.btn-size-md {
    padding: 10px 16px !important;
    border-radius: 8px !important;
}

.btn-icon-size-md {
    padding: 10px !important;
    border-radius: 8px !important;
    align-items: center;
    justify-content: center;
}

.btn-size-lg {
    padding: 10px 18px !important;
    border-radius: 8px !important;
}

.btn-icon-size-lg {
    padding: 12px !important;
    border-radius: 8px !important;
    align-items: center;
    justify-content: center;
}

.btn-size-xl {
    padding: 12px 20px !important;
    border-radius: 8px !important;
}

.btn-icon-size-xl {
    padding: 14px !important;
    border-radius: 8px !important;
    align-items: center;
    justify-content: center;
}

.btn.btn-foundation-grey-200 {
    border: 1px solid var(--border-secondary) !important;
    background: var(--base-white);
}

.btn.btn-foundation-error-600:disabled {
    border: 1px solid var(--foundation-error-200) !important;
    background: var(--foundation-error-200) !important;
    color: var(--base-white) !important;
}

.btn.btn-secondary-2:disabled {
    background: var(--grey-100) !important;
    color: var(--grey-600) !important;
    opacity: 0.7
}

.radius-1px {
    border-radius: 1px;
}

.radius-2px {
    border-radius: 2px;
}

.radius-4px {
    border-radius: 4px;
}

.radius-8px {
    border-radius: 8px;
}

.rounded-start-8px {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.radius-10px {
    border-radius: 10px;
}

.radius-12px {
    border-radius: 12px;
}

.radius-16px {
    border-radius: 16px;
}

.radius-24px {
    border-radius: 24px;
}

.radius-40px {
    border-radius: 40px;
}

.radius-48px {
    border-radius: 48px;
}

.radius-100px {
    border-radius: 100px;
}

.gap-1px {
    gap: 1px;
}

.gap-2px {
    gap: 2px;
}

.gap-3px {
    gap: 3px;
}

.gap-4px {
    gap: 4px;
}

.gap-6px {
    gap: 6px;
}

.gap-8px {
    gap: 8px;
}

.gap-10px {
    gap: 10px;
}

.gap-12px {
    gap: 12px;
}

.gap-16px {
    gap: 16px;
}

.gap-20px {
    gap: 20px;
}

.gap-25px {
    gap: 25px;
}

.gap-24px {
    gap: 24px;
}

.gap-28px {
    gap: 28px;
}

.gap-30px {
    gap: 30px;
}

.gap-32px {
    gap: 32px;
}

.gap-35px {
    gap: 35px;
}

.gap-40px {
    gap: 40px;
}

.gap-45px {
    gap: 45px;
}

.gap-48px {
    gap: 48px;
}

.p-1px {
    padding: 1px;
}

.p-2px {
    padding: 2px;
}

.p-4px {
    padding: 4px;
}

.p-8px {
    padding: 8px;
}

.p-9px {
    padding: 9px;
}

.p-10px {
    padding: 10px;
}

.p-12px {
    padding: 12px;
}

.p-14px {
    padding: 14px;
}

.p-16px {
    padding: 16px !important;
}

.p-20px {
    padding: 20px !important;
}

.p-24px {
    padding: 24px !important;
}

.p-40px {
    padding: 40px;
}

.p-48px {
    padding: 48px;
}

.px-1px {
    padding-left: 1px;
    padding-right: 1px;
}

.px-2px {
    padding-left: 2px;
    padding-right: 2px;
}

.px-4px {
    padding-left: 4px;
    padding-right: 4px;
}

.px-6px {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.px-8px {
    padding-left: 8px;
    padding-right: 8px;
}

.px-10px {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.px-12px {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.px-14px {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.px-16px {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.px-20px {
    padding-left: 20px;
    padding-right: 20px;
}

.px-24px {
    padding-left: 24px;
    padding-right: 24px;
}

.px-28px {
    padding-left: 28px;
    padding-right: 28px;
}

.px-30px {
    padding-left: 30px;
    padding-right: 30px;
}

.px-32px {
    padding-left: 32px;
    padding-right: 32px;
}

.px-35px {
    padding-left: 35px;
    padding-right: 35px;
}

.px-38px {
    padding-left: 38px;
    padding-right: 38px;
}

.px-40px {
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.px-48px {
    padding-left: 48px;
    padding-right: 48px;
}

.py-1px {
    padding-top: 1px;
    padding-bottom: 1px;
}

.py-2px {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.py-4px {
    padding-top: 4px;
    padding-bottom: 4px;
}

.py-8px {
    padding-top: 8px;
    padding-bottom: 8px;
}

.py-9px {
    padding-top: 9px;
    padding-bottom: 9px;
}

.py-10px {
    padding-top: 10px;
    padding-bottom: 10px;
}

.py-12px {
    padding-top: 12px;
    padding-bottom: 12px;
}

.py-16px {
    padding-top: 16px;
    padding-bottom: 16px;
}

.py-20px {
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-24px {
    padding-top: 24px;
    padding-bottom: 24px;
}

.py-40px {
    padding-top: 40px;
    padding-bottom: 40px;
}

.py-48px {
    padding-top: 48px;
    padding-bottom: 48px;
}

.ps-1px {
    padding-left: 1px;
}

.ps-2px {
    padding-left: 2px;
}

.ps-4px {
    padding-left: 4px;
}

.ps-8px {
    padding-left: 8px;
}

.ps-10px {
    padding-left: 10px;
}

.ps-14px {
    padding-left: 14px;
}

.ps-16px {
    padding-left: 16px;
}

.ps-20px {
    padding-left: 20px;
}

.ps-24px {
    padding-left: 24px;
}

.ps-40px {
    padding-left: 40px;
}

.ps-48px {
    padding-left: 48px;
}

.pt-8px {
    padding-top: 8px;
}

.pt-10px {
    padding-top: 10px;
}

.pt-12px {
    padding-top: 12px;
}

.pt-16px {
    padding-top: 16px !important;
}

.pt-20px {
    padding-top: 20px !important;
}

.pt-22px {
    padding-top: 22px !important;
}

.pt-24px {
    padding-top: 24px !important;
}

.pb-12px {
    padding-bottom: 12px !important;
}

.pt-40px {
    padding-top: 40px;
}

.pb-15px {
    padding-bottom: 15px;
}

.pb-16px {
    padding-bottom: 16px !important;
}

.pe-1px {
    padding-right: 1px;
}

.pe-2px {
    padding-right: 2px;
}

.pe-4px {
    padding-right: 4px;
}

.pe-8px {
    padding-right: 8px;
}

.pe-16px {
    padding-right: 16px;
}

.pe-20px {
    padding-right: 20px;
}

.pe-24px {
    padding-right: 24px;
}

.pe-40px {
    padding-right: 40px;
}

.pe-48px {
    padding-right: 48px;
}

.pb-1px {
    padding-bottom: 1px;
}

.pb-2px {
    padding-bottom: 2px;
}

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

.pb-8px {
    padding-bottom: 8px;
}

.pb-20px {
    padding-bottom: 20px !important;
}

.pb-24px {
    padding-bottom: 24px !important;
}

.pb-40px {
    padding-bottom: 40px;
}

.pb-48px {
    padding-bottom: 48px;
}

.m-1px {
    margin: 1px;
}

.m-2px {
    margin: 2px;
}

.m-4px {
    margin: 4px;
}

.m-8px {
    margin: 8px;
}

.m-16px {
    margin: 16px;
}

.m-20px {
    margin: 20px !important;
}

.m-24px {
    margin: 24px;
}

.m-40px {
    margin: 40px;
}

.m-48px {
    margin: 48px;
}

.ms-1px {
    margin-left: 1px;
}

.ms-2px {
    margin-left: 2px;
}

.ms-4px {
    margin-left: 4px;
}

.ms-8px {
    margin-left: 8px;
}

.ms-16px {
    margin-left: 16px;
}

.ms-20px {
    margin-left: 20px;
}

.ms-24px {
    margin-left: 24px;
}

.ms-40px {
    margin-left: 40px;
}

.ms-48px {
    margin-left: 48px;
}

.me-1px {
    margin-right: 1px;
}

.me-2px {
    margin-right: 2px;
}

.me-4px {
    margin-right: 4px;
}

.me-8px {
    margin-right: 8px;
}

.me-16px {
    margin-right: 16px;
}

.me-20px {
    margin-right: 20px;
}

.me-24px {
    margin-right: 24px;
}

.me-40px {
    margin-right: 40px;
}

.me-48px {
    margin-right: 48px;
}

.mt-1px {
    margin-top: 1px;
}

.mt-2px {
    margin-top: 2px;
}

.mt-4px {
    margin-top: 4px;
}

.mt-6px {
    margin-top: 6px;
}

.mt-8px {
    margin-top: 8px !important;
}

.mt-16px {
    margin-top: 16px;
}

.mt-20px {
    margin-top: 20px;
}

.mt-24px {
    margin-top: 24px;
}

.mt-28px {
    margin-top: 28px;
}

.mt-30px {
    margin-top: 30px;
}

.mt-32px {
    margin-top: 32px;
}

.mt-35px {
    margin-top: 35px;
}

.mt-40px {
    margin-top: 40px;
}

.mt-48px {
    margin-top: 48px;
}

/* Margin bottom */
.mb-1px {
    margin-bottom: 1px;
}

.mb-2px {
    margin-bottom: 2px;
}

.mb-4px {
    margin-bottom: 4px;
}

.mb-6px {
    margin-bottom: 6px;
}

.mb-8px {
    margin-bottom: 8px !important;
}

.my-8px {
    margin-top: 8px;
    margin-bottom: 8px;
}

.mb-16px {
    margin-bottom: 16px;
}

.mb-20px {
    margin-bottom: 20px;
}

.mb-24px {
    margin-bottom: 24px;
}

.mb-30px {
    margin-bottom: 30px;
}

.mb-32px {
    margin-bottom: 32px;
}

.mb-40px {
    margin-bottom: 40px !important;
}

.mb-48px {
    margin-bottom: 48px !important;
}

.mb-50px {
    margin-bottom: 50px !important;
}

.mb-55px {
    margin-bottom: 55px !important;
}

.mb-60px {
    margin-bottom: 60px !important;
}

.mb-64px {
    margin-bottom: 64px !important;
}

.mx-1px {
    margin-left: 1px !important;
    margin-right: 1px !important;
}

.mx-2px {
    margin-left: 2px !important;
    margin-right: 2px !important;
}

.mx-4px {
    margin-left: 4px !important;
    margin-right: 4px !important;
}

.mx-6px {
    margin-left: 6px !important;
    margin-right: 6px !important;
}

.mx-10px {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.mx-16px {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

.mx-20px {
    margin-left: 20px !important;
    margin-right: 20px !important;
}

.mx-24px {
    margin-left: 24px !important;
    margin-right: 24px !important;
}

.mx-8px {
    margin-left: 8px !important;
    margin-right: 8px !important;
}

.w-32px {
    width: 32px !important;
}

.h-32px {
    height: 32px !important;
}

.w-36px {
    width: 36px !important;
}

.h-36px {
    height: 36px !important;
}

.w-48px {
    width: 48px !important;
}

.h-48px {
    height: 48px !important;
}

.w-24px {
    width: 24px !important;
}

.w-120px {
    width: 120px;
}

.h-120px {
    height: 120px;
}

.w-200px {
    width: 200px;
}

.h-200px {
    height: 200px;
}

.h-24px {
    height: 24px !important;
}

.mt-16px {
    margin-top: 16px;
}

.mt-40px {
    margin-top: 40px;
}

.my-12px {
    margin-top: 12px;
    margin-bottom: 12px;
}

[data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hoverable=true]) .app-sidebar .app-sidebar-header {
    flex-direction: column;
    gap: 10px;
    padding: 10px 1px 1px 1px !important;
}

[data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hoverable=true]) .app-sidebar .aside-user .aside-user-info {
    opacity: 0;
    text-indent: -9999px;
}

.menu-item .menu-link.active {
    transition: color .2s ease;
    background-color: var(--foundation-primary-blue-1) !important;
    color: var(--foundation-primary-blue-6) !important;
}

    .menu-item .menu-link.active i, .menu-item .menu-link.active .menu-title {
        color: var(--foundation-primary-blue-6) !important;
        /*font-weight:600 !important;*/
    }

.app-sidebar-menu-secondary.menu .menu-link .menu-title, .app-sidebar-menu-secondary.menu .menu-link .menu-icon i {
    color: var(--text-content);
    font-weight: 500;
    font-family: "Inter";
    font-size: 15px;
    font-style: normal;
    line-height: 24px;
}



.app-sidebar-menu-secondary.menu {
    padding: 0 20px;
}


.menu-rounded .menu-link {
    border-radius: 8px !important;
    padding: 10px 14px !important;
}

.text-hover-primary:hover {
    transition: color .2s ease;
    color: var(--foundation-primary-blue-6) !important
}

    .text-hover-primary:hover i {
        transition: color .2s ease;
        color: var(--foundation-primary-blue-6) !important
    }

    .text-hover-primary:hover .svg-icon {
        color: var(--foundation-primary-blue-6) !important
    }

.form-select {
    background-position: right 2px center;
    background-size: 9px 9px;
}

.symbol-flush {
    border-radius: 7.5px !important;
    border: 0.75px solid var(--border-primary-disabled);
    box-shadow: 0px 0.75px 1.5px 0px rgba(16, 24, 40, 0.05);
    background: var(--base-white);
}

.custom-dropzone {
    position: relative;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

    .custom-dropzone input[type="file"] {
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
        top: 0;
        left: 0;
    }

/*.select2-container {
    background: #fff;
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    padding: 10px 14px;
    height: 44px;
}*/

.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
    color: var(--content-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.badge-foundation-success-600 {
    color: var(--bs-success-inverse);
    background-color: var(--foundation-success-600);
}

.badge-foundation-success-700 {
    color: var(--bs-success-inverse);
    background-color: var(--foundation-success-700);
}

.badge-foundation-brand-600 {
    color: var(--bs-success-inverse);
    background-color: var(--foundation-brand-600);
}

.badge-foundation-error-500 {
    color: var(--bs-success-inverse);
    background-color: var(--foundation-error-500);
}

.badge-warning-700 {
    color: var(--warning-700);
    background-color: var(--warning-50);
}

.badge-success-700 {
    color: var(--success-700);
    background-color: var(--success-50);
}

.badge-brand-600 {
    color: var(--brand-600);
    background-color: var(--brand-50);
}

.badge-base {
    display: flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.link-brand-600 {
    color: var(--brand-600) !important;
    text-decoration-color: RGBA(73, 157, 255, var(--bs-link-underline-opacity, 1)) !important;
}

.showafter {
    display: none;
}

.modal-dialog-slideout {
    min-height: 100%;
    margin: 0 0 0 auto !important;
    padding: 12px;
}

.modal.fade .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(100%,0)scale(1);
    transform: translate(100%,0)scale(1);
}

.modal.fade.show .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    display: flex;
    align-items: stretch;
    -webkit-box-align: stretch;
    height: 100%;
}

    .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
        overflow-y: auto;
        overflow-x: hidden;
    }



/* CSS chung của Devextreme */
.dx-texteditor-input {
    min-height: 40px !important;
}

.dx-widget, .dx-widget input, .dx-widget textarea, .dx-widget select {
    font-family: "Inter" !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.dx-widget {
    /*display: block;  => ảnh hưởng đến calendar */
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none;
    padding: 0;
    outline: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color: var(--text-content);
    font-weight: 500;
    font-size: 14px;
    font-family: "Inter";
    line-height: 20px;
}
/* Điều chỉnh lại giao diện datagrid */
.dx-datagrid-borders > .dx-datagrid-filter-panel, .dx-datagrid-borders > .dx-datagrid-headers {
    border-top: 1px solid #ddd !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.dx-datagrid-borders > .dx-datagrid-headers, .dx-datagrid-borders > .dx-datagrid-rowsview, .dx-datagrid-borders > .dx-datagrid-total-footer {
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
}

.dx-datagrid-headers {
    color: var(--content-tertiary) !important;
    font-weight: 400 !important;
    touch-action: pinch-zoom !important;
}

.dx-datagrid, .dx-datagrid i {
    color: var(--content-secondary) !important;
    font-family: 'Inter';
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border-bottom: 1px solid #fff !important;
    font-family: 'Inter';
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    color: var(--content-tertiary) !important;
}

.dx-datagrid .dx-row > td {
    padding: 12px 20px !important;
}

.dx-datagrid .dx-column-lines > td {
    border-right: 1px solid #ddd !important;
}

.dx-row > td, .dx-row > tr > td {
    border: none !important;
}

.dx-datagrid .dx-row-lines > td {
    border-bottom: 1px solid #ddd !important;
}

.dx-datagrid-borders > .dx-datagrid-rowsview, .dx-datagrid-borders > .dx-datagrid-total-footer {
    border-bottom: 1px solid #ddd !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.dx-datagrid .dx-column-lines > td:last-child {
    border-right: none !important;
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused), .dx-datagrid-rowsview .dx-row-focused.dx-data-row > tr > td:not(.dx-focused) {
    background-color: #f5f5f5;
}

/* Điều chỉnh giao diện TreeList */
.dx-treelist-container {
    font-family: "Inter" !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.dx-treelist .dx-row > td {
    padding: 12px !important;
}

.dx-header-row {
    font-weight: 700;
    color: var(--content-tertiary);
    font-size: 14px;
}

.dx-treelist .dx-column-lines > td {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd !important;
}

.dx-treelist .dx-row-lines > td {
    border-bottom: 1px solid #ddd !important;
}

.dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td:not(.dx-treelist-cell-expandable), .dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td:not(.dx-treelist-cell-expandable) div, .dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td:not(.dx-treelist-cell-expandable) span, .dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td:not(.dx-treelist-cell-expandable) input, .dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td:not(.dx-treelist-cell-expandable) .form-select, .dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td:not(.dx-treelist-cell-expandable) textarea {
    font-size: 14px !important;
    font-weight: 600 !important;
}
/* Điều chỉnh lại giao diện FullCalendar */
.fc .fc-daygrid-day-number {
    height: 22px !important;
    width: 25px !important;
}

.fc .fc-col-header-cell .fc-col-header-cell-cushion {
    font-weight: 600 !important;
    color: var(--bs-gray-800);
}