@charset "UTF-8";
/**
 * Do not edit directly, this file was auto-generated.
 */
:root {
  --bal-color-white: #FFFFFF;
  --bal-color-black: #000000;
  --bal-color-neutral: rgba(255, 255, 255, 0);
  --bal-color-danger-1: #FCE8E6;
  --bal-color-danger-2: #F7A299;
  --bal-color-danger-3: #F05D4D;
  --bal-color-danger-4: #EA1800;
  --bal-color-danger-5: #CB1501;
  --bal-color-danger-6: #A01100;
  --bal-color-warning-1: #FFF9E8;
  --bal-color-warning-2: #FFE5A3;
  --bal-color-warning-3: #FFD25E;
  --bal-color-warning-4: #FFBE19;
  --bal-color-warning-5: #F99319;
  --bal-color-warning-6: #C97612;
  --bal-color-success-1: #E8F3EC;
  --bal-color-success-2: #A1CFB3;
  --bal-color-success-3: #5BAB7A;
  --bal-color-success-4: #168741;
  --bal-color-success-5: #116B34;
  --bal-color-success-6: #0B5227;
  --bal-color-info-1: #E8F1FB;
  --bal-color-info-2: #A4C9ED;
  --bal-color-info-3: #60A0E0;
  --bal-color-info-4: #1C77D2;
  --bal-color-info-5: #155BA3;
  --bal-color-info-6: #0E457B;
  --bal-color-sky-1: #E5F1FE;
  --bal-color-sky-2: #A7D1FA;
  --bal-color-sky-3: #56A7F5;
  --bal-color-sky-4: #6672CC;
  --bal-color-sky-5: #0014AA;
  --bal-color-sky-6: #000A55;
  --bal-color-grey-1: #FAFAFA;
  --bal-color-grey-2: #F6F6F6;
  --bal-color-grey-3: #E8E8E8;
  --bal-color-grey-4: #B6B6B6;
  --bal-color-grey-5: #747474;
  --bal-color-grey-6: #313131;
  --bal-color-yellow-1: #FFF9E8;
  --bal-color-yellow-2: #FFECBC;
  --bal-color-yellow-3: #FAE052;
  --bal-color-yellow-4: #FFBE19;
  --bal-color-yellow-5: #FA9319;
  --bal-color-yellow-6: #B24A00;
  --bal-color-red-1: #FFEEF1;
  --bal-color-red-2: #FFD7D7;
  --bal-color-red-3: #FFACA6;
  --bal-color-red-4: #FF596F;
  --bal-color-red-5: #D9304C;
  --bal-color-red-6: #99172D;
  --bal-color-green-1: #E9FBF7;
  --bal-color-green-2: #CBF2EC;
  --bal-color-green-3: #94E3D4;
  --bal-color-green-4: #21D9AC;
  --bal-color-green-5: #00B28F;
  --bal-color-green-6: #1B5951;
  --bal-color-purple-1: #F9F3FF;
  --bal-color-purple-2: #E1D9FF;
  --bal-color-purple-3: #B8B2FF;
  --bal-color-purple-4: #BE82FA;
  --bal-color-purple-5: #9F52CC;
  --bal-color-purple-6: #6C2273;
  --bal-color-primary-1: #E5E7F0;
  --bal-color-primary-2: #B3B6D4;
  --bal-color-primary-3: #656EA8;
  --bal-color-primary-4: #293485;
  --bal-color-primary-5: #000D6E;
  --bal-color-primary-6: #000739;
  --bal-elevation-shadow-0: none;
  --bal-elevation-shadow-1: 0 2px 5px 1px rgba(0, 7, 57, 0.12);
  --bal-elevation-shadow-2: 0 4px 4px 0 rgba(0, 7, 57, 0.15);
  --bal-elevation-shadow-3: 0 0 10px 0 rgba(0, 7, 57, 0.15);
  --bal-elevation-shadow-4: 0 0 30px 0 rgba(0, 7, 57, 0.15);
  --bal-elevation-opacity-0: 0;
  --bal-elevation-opacity-30: 0.3;
  --bal-elevation-opacity-40: 0.4;
  --bal-elevation-opacity-50: 0.5;
  --bal-elevation-opacity-60: 0.6;
  --bal-elevation-opacity-80: 0.8;
  --bal-elevation-opacity-100: 1;
  --bal-elevation-z-index-100: 6.25rem;
  --bal-elevation-z-index-200: 12.5rem;
  --bal-elevation-z-index-300: 18.75rem;
  --bal-elevation-z-index-400: 25rem;
  --bal-elevation-z-index-1000: 62.5rem;
  --bal-elevation-z-index-1100: 68.75rem;
  --bal-elevation-z-index-1200: 75rem;
  --bal-elevation-z-index-1300: 81.25rem;
  --bal-elevation-z-index-behind-all: -62499.9375rem;
  --bal-font-shadow-0: none;
  --bal-font-shadow-1: 0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5);
  --bal-font-size-0: 0rem;
  --bal-font-size-12: 0.75rem;
  --bal-font-size-14: 0.875rem;
  --bal-font-size-16: 1rem;
  --bal-font-size-18: 1.125rem;
  --bal-font-size-20: 1.25rem;
  --bal-font-size-24: 1.5rem;
  --bal-font-size-28: 1.75rem;
  --bal-font-size-32: 2rem;
  --bal-font-size-40: 2.5rem;
  --bal-font-size-48: 3rem;
  --bal-font-size-80: 5rem;
  --bal-font-size-176: 11rem;
  --bal-font-family-heading: "BaloiseCreateHeadline", "Arial", "sans-serif";
  --bal-font-family-body: "BaloiseCreateText", "Arial", "sans-serif";
  --bal-font-weight-300: 300;
  --bal-font-weight-400: 400;
  --bal-font-weight-700: 700;
  --bal-font-line-height-1: 1;
  --bal-font-line-height-2: 1.3;
  --bal-font-line-height-3: 1.5;
  --bal-font-line-height-4: 2;
  --bal-size-border-0: 0rem;
  --bal-size-border-1: 0.0625rem;
  --bal-size-border-2: 0.125rem;
  --bal-size-border-3: 0.25rem;
  --bal-size-radius-0: 0rem;
  --bal-size-radius-1: 0.25rem;
  --bal-size-radius-2: 0.75rem;
  --bal-size-radius-3: 9999px;
  --bal-size-breakpoint-1: 769px;
  --bal-size-breakpoint-2: 1024px;
  --bal-size-breakpoint-3: 1280px;
  --bal-size-breakpoint-4: 1440px;
  --bal-size-breakpoint-5: 1920px;
  --bal-size-container-1: 320px;
  --bal-size-container-2: 480px;
  --bal-size-container-3: 640px;
  --bal-size-container-4: 896px;
  --bal-size-container-5: 1496px;
  --bal-size-container-full: 100%;
  --bal-size-space-0: 0rem;
  --bal-size-space-1: 0.0625rem;
  --bal-size-space-2: 0.125rem;
  --bal-size-space-4: 0.25rem;
  --bal-size-space-8: 0.5rem;
  --bal-size-space-12: 0.75rem;
  --bal-size-space-14: 0.875rem;
  --bal-size-space-16: 1rem;
  --bal-size-space-20: 1.25rem;
  --bal-size-space-24: 1.5rem;
  --bal-size-space-32: 2rem;
  --bal-size-space-40: 2.5rem;
  --bal-size-space-48: 3rem;
  --bal-size-space-56: 3.5rem;
  --bal-size-space-64: 4rem;
  --bal-size-space-72: 4.5rem;
  --bal-size-space-96: 6rem;
  --bal-size-space-128: 8rem;
  --bal-size-space-auto: auto;
  --bal-interaction-focus-size-inner: 2;
  --bal-interaction-focus-size-outer: 5;
  --bal-interaction-focus-size-inner-inset: 3;
  --bal-interaction-focus-size-outer-inset: 5;
  --bal-heading-color-base: inherit;
  --bal-close-color-background-hover: rgba(0, 7, 57, 0.10000000149011612);
  --bal-close-color-background-active: rgba(0, 7, 57, 0.30000001192092896);
  --bal-close-color-background-inverted-hover: rgba(255, 255, 255, 0.30000001192092896);
  --bal-close-color-background-inverted-active: rgba(255, 255, 255, 0.5);
  --bal-card-color-base-text: inherit;
  --bal-card-color-white-text: inherit;
  --bal-card-color-info-text: inherit;
  --bal-card-color-success-text: inherit;
  --bal-card-color-warning-text: inherit;
  --bal-card-color-danger-text: inherit;
  --bal-card-color-grey-light-text: inherit;
  --bal-card-color-grey-text: inherit;
  --bal-card-color-red-lighter-text: inherit;
  --bal-card-color-red-light-text: inherit;
  --bal-card-color-red-text: inherit;
  --bal-card-color-purple-lighter-text: inherit;
  --bal-card-color-purple-light-text: inherit;
  --bal-card-color-purple-text: inherit;
  --bal-card-color-green-lighter-text: inherit;
  --bal-card-color-green-light-text: inherit;
  --bal-card-color-green-text: inherit;
  --bal-card-color-yellow-lighter-text: inherit;
  --bal-card-color-yellow-light-text: inherit;
  --bal-card-color-yellow-text: inherit;
  --bal-notification-color-base-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
  --bal-notification-color-info-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
  --bal-notification-color-success-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
  --bal-notification-color-warning-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
  --bal-notification-color-danger-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
  --bal-notification-color-outline-base-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
  --bal-notification-color-outline-purple-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
  --bal-notification-color-outline-green-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
  --bal-notification-color-outline-yellow-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
  --bal-notification-color-outline-red-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
  --bal-link-family: inherit;
  --bal-toast-success-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
  --bal-toast-info-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
  --bal-toast-base-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
  --bal-toast-warning-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
  --bal-toast-danger-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
  --bal-background-color-white: var(--bal-color-white);
  --bal-background-color-transparent: var(--bal-color-neutral);
  --bal-background-color-sky-light: var(--bal-color-sky-1);
  --bal-background-color-sky: var(--bal-color-sky-2);
  --bal-background-color-sky-dark: var(--bal-color-sky-3);
  --bal-background-color-disabled: var(--bal-color-grey-3);
  --bal-background-color-info: var(--bal-color-info-3);
  --bal-background-color-info-light: var(--bal-color-info-2);
  --bal-background-color-info-dark: var(--bal-color-info-4);
  --bal-background-color-info-darker: var(--bal-color-info-5);
  --bal-background-color-info-darkest: var(--bal-color-info-6);
  --bal-background-color-success: var(--bal-color-success-3);
  --bal-background-color-success-lighter: var(--bal-color-success-1);
  --bal-background-color-success-light: var(--bal-color-success-2);
  --bal-background-color-success-dark: var(--bal-color-success-4);
  --bal-background-color-success-darker: var(--bal-color-success-5);
  --bal-background-color-success-darkest: var(--bal-color-success-6);
  --bal-background-color-warning-lighter: var(--bal-color-warning-1);
  --bal-background-color-warning-light: var(--bal-color-warning-2);
  --bal-background-color-warning: var(--bal-color-warning-3);
  --bal-background-color-warning-dark: var(--bal-color-warning-4);
  --bal-background-color-warning-darker: var(--bal-color-warning-5);
  --bal-background-color-warning-darkest: var(--bal-color-warning-6);
  --bal-background-color-danger-lighter: var(--bal-color-danger-1);
  --bal-background-color-danger-light: var(--bal-color-danger-2);
  --bal-background-color-danger: var(--bal-color-danger-3);
  --bal-background-color-danger-dark: var(--bal-color-danger-4);
  --bal-background-color-danger-darker: var(--bal-color-danger-5);
  --bal-background-color-danger-darkest: var(--bal-color-danger-6);
  --bal-background-color-green-light-2: var(--bal-color-green-1);
  --bal-background-color-grey-light: var(--bal-color-grey-2);
  --bal-background-color-grey: var(--bal-color-grey-3);
  --bal-background-color-grey-dark: var(--bal-color-grey-4);
  --bal-background-color-primary-light: var(--bal-color-primary-3);
  --bal-background-color-primary: var(--bal-color-primary-5);
  --bal-background-color-primary-hover: var(--bal-color-sky-5);
  --bal-background-color-primary-active: var(--bal-color-primary-6);
  --bal-background-color-green-lighter: var(--bal-color-green-1);
  --bal-background-color-green-light: var(--bal-color-green-2);
  --bal-background-color-green: var(--bal-color-green-3);
  --bal-background-color-purple-lighter: var(--bal-color-purple-1);
  --bal-background-color-purple-light: var(--bal-color-purple-2);
  --bal-background-color-purple: var(--bal-color-purple-3);
  --bal-background-color-red-lighter: var(--bal-color-red-1);
  --bal-background-color-red-light: var(--bal-color-red-2);
  --bal-background-color-red: var(--bal-color-red-3);
  --bal-background-color-yellow-lighter: var(--bal-color-yellow-1);
  --bal-background-color-yellow-light: var(--bal-color-yellow-2);
  --bal-background-color-yellow: var(--bal-color-yellow-3);
  --bal-border-color-white: var(--bal-color-white);
  --bal-border-color-base: var(--bal-color-grey-3);
  --bal-border-color-inverted: var(--bal-color-white);
  --bal-border-color-disabled: var(--bal-color-grey-4);
  --bal-border-color-disabled-inverted: var(--bal-color-primary-3);
  --bal-border-color-grey-light: var(--bal-color-grey-3);
  --bal-border-color-grey: var(--bal-color-grey-3);
  --bal-border-color-grey-dark: var(--bal-color-grey-4);
  --bal-border-color-primary-light: var(--bal-color-primary-3);
  --bal-border-color-primary: var(--bal-color-primary-5);
  --bal-border-color-primary-hover: var(--bal-color-sky-5);
  --bal-border-color-primary-active: var(--bal-color-primary-6);
  --bal-border-color-inverted-primary: var(--bal-color-primary-4);
  --bal-border-color-inverted-primary-hover: var(--bal-color-sky-2);
  --bal-border-color-inverted-primary-active: var(--bal-color-sky-4);
  --bal-border-color-info: var(--bal-color-info-4);
  --bal-border-color-info-hover: var(--bal-color-info-5);
  --bal-border-color-info-active: var(--bal-color-info-6);
  --bal-border-color-success: var(--bal-color-success-4);
  --bal-border-color-success-hover: var(--bal-color-success-5);
  --bal-border-color-success-active: var(--bal-color-success-6);
  --bal-border-color-warning: var(--bal-color-warning-4);
  --bal-border-color-warning-hover: var(--bal-color-warning-5);
  --bal-border-color-warning-active: var(--bal-color-warning-6);
  --bal-border-color-danger: var(--bal-color-danger-4);
  --bal-border-color-danger-hover: var(--bal-color-danger-5);
  --bal-border-color-danger-active: var(--bal-color-danger-6);
  --bal-border-color-green: var(--bal-color-green-4);
  --bal-border-color-green-hover: var(--bal-color-green-5);
  --bal-border-color-green-active: var(--bal-color-green-6);
  --bal-border-color-purple: var(--bal-color-purple-4);
  --bal-border-color-purple-hover: var(--bal-color-purple-5);
  --bal-border-color-purple-active: var(--bal-color-purple-6);
  --bal-border-color-red: var(--bal-color-red-4);
  --bal-border-color-red-hover: var(--bal-color-red-5);
  --bal-border-color-red-active: var(--bal-color-red-6);
  --bal-border-color-yellow: var(--bal-color-yellow-4);
  --bal-border-color-yellow-hover: var(--bal-color-yellow-5);
  --bal-border-color-yellow-active: var(--bal-color-yellow-6);
  --bal-border-width-none: var(--bal-size-border-0);
  --bal-border-width-base: var(--bal-size-border-2);
  --bal-border-width-md: var(--bal-size-border-3);
  --bal-breakpoint-tablet: var(--bal-size-breakpoint-1);
  --bal-breakpoint-desktop: var(--bal-size-breakpoint-2);
  --bal-breakpoint-desktop-lg: var(--bal-size-breakpoint-3); /** HighDefinition */
  --bal-breakpoint-desktop-xl: var(--bal-size-breakpoint-4); /** Widescreen */
  --bal-breakpoint-desktop-2xl: var(--bal-size-breakpoint-5); /** FullHD */
  --bal-container-width-modal: var(--bal-size-container-3);
  --bal-container-width-compact: var(--bal-size-container-4);
  --bal-container-width-base: var(--bal-size-container-5);
  --bal-container-width-fluid: var(--bal-size-container-full);
  --bal-container-space-mobile: var(--bal-size-space-16);
  --bal-container-space-tablet: var(--bal-size-space-40);
  --bal-container-space-desktop: var(--bal-size-space-48);
  --bal-interaction-focus-color-base: var(--bal-color-purple-6);
  --bal-interaction-focus-color-inverted: var(--bal-color-yellow-3);
  --bal-opacity-hidden: var(--bal-elevation-opacity-0);
  --bal-opacity-half: var(--bal-elevation-opacity-50);
  --bal-opacity-disabled: var(--bal-elevation-opacity-60);
  --bal-opacity-backdrop: var(--bal-elevation-opacity-80);
  --bal-opacity-full: var(--bal-elevation-opacity-100);
  --bal-radius-none: var(--bal-size-radius-0);
  --bal-radius-base: var(--bal-size-radius-1);
  --bal-radius-lg: var(--bal-size-radius-2);
  --bal-radius-rounded: var(--bal-size-radius-3);
  --bal-space-none-mobile: var(--bal-size-space-0);
  --bal-space-none-tablet: var(--bal-size-space-0);
  --bal-space-none-desktop: var(--bal-size-space-0);
  --bal-space-auto-mobile: var(--bal-size-space-auto);
  --bal-space-auto-tablet: var(--bal-size-space-auto);
  --bal-space-auto-desktop: var(--bal-size-space-auto);
  --bal-space-2xs-mobile: var(--bal-size-space-4);
  --bal-space-2xs-tablet: var(--bal-size-space-4);
  --bal-space-2xs-desktop: var(--bal-size-space-4);
  --bal-space-xs-mobile: var(--bal-size-space-8);
  --bal-space-xs-tablet: var(--bal-size-space-8);
  --bal-space-xs-desktop: var(--bal-size-space-8);
  --bal-space-sm-mobile: var(--bal-size-space-12);
  --bal-space-sm-tablet: var(--bal-size-space-12);
  --bal-space-sm-desktop: var(--bal-size-space-12);
  --bal-space-base-mobile: var(--bal-size-space-16);
  --bal-space-base-tablet: var(--bal-size-space-16);
  --bal-space-base-desktop: var(--bal-size-space-16);
  --bal-space-md-mobile: var(--bal-size-space-20);
  --bal-space-md-tablet: var(--bal-size-space-20);
  --bal-space-md-desktop: var(--bal-size-space-24);
  --bal-space-lg-mobile: var(--bal-size-space-24);
  --bal-space-lg-tablet: var(--bal-size-space-24);
  --bal-space-lg-desktop: var(--bal-size-space-32);
  --bal-space-xl-mobile: var(--bal-size-space-32);
  --bal-space-xl-tablet: var(--bal-size-space-40);
  --bal-space-xl-desktop: var(--bal-size-space-48);
  --bal-space-2xl-mobile: var(--bal-size-space-48);
  --bal-space-2xl-tablet: var(--bal-size-space-56);
  --bal-space-2xl-desktop: var(--bal-size-space-64);
  --bal-space-3xl-mobile: var(--bal-size-space-56);
  --bal-space-3xl-tablet: var(--bal-size-space-72);
  --bal-space-3xl-desktop: var(--bal-size-space-96);
  --bal-space-4xl-mobile: var(--bal-size-space-64);
  --bal-space-4xl-tablet: var(--bal-size-space-96);
  --bal-space-4xl-desktop: var(--bal-size-space-128);
  --bal-text-shadow: var(--bal-font-shadow-1);
  --bal-text-size-none-mobile: var(--bal-font-size-0);
  --bal-text-size-none-tablet: var(--bal-font-size-0);
  --bal-text-size-none-desktop: var(--bal-font-size-0);
  --bal-text-size-xs-mobile: var(--bal-font-size-12);
  --bal-text-size-xs-tablet: var(--bal-font-size-12);
  --bal-text-size-xs-desktop: var(--bal-font-size-12);
  --bal-text-size-sm-mobile: var(--bal-font-size-14);
  --bal-text-size-sm-tablet: var(--bal-font-size-14);
  --bal-text-size-sm-desktop: var(--bal-font-size-14);
  --bal-text-size-base-mobile: var(--bal-font-size-16);
  --bal-text-size-base-tablet: var(--bal-font-size-16);
  --bal-text-size-base-desktop: var(--bal-font-size-16);
  --bal-text-size-md-mobile: var(--bal-font-size-16);
  --bal-text-size-md-tablet: var(--bal-font-size-18);
  --bal-text-size-md-desktop: var(--bal-font-size-18);
  --bal-text-size-lg-mobile: var(--bal-font-size-18);
  --bal-text-size-lg-tablet: var(--bal-font-size-18);
  --bal-text-size-lg-desktop: var(--bal-font-size-18);
  --bal-text-size-xl-mobile: var(--bal-font-size-20);
  --bal-text-size-xl-tablet: var(--bal-font-size-24);
  --bal-text-size-xl-desktop: var(--bal-font-size-24);
  --bal-text-size-2xl-mobile: var(--bal-font-size-24);
  --bal-text-size-2xl-tablet: var(--bal-font-size-32);
  --bal-text-size-2xl-desktop: var(--bal-font-size-32);
  --bal-text-size-3xl-mobile: var(--bal-font-size-28);
  --bal-text-size-3xl-tablet: var(--bal-font-size-40);
  --bal-text-size-3xl-desktop: var(--bal-font-size-40);
  --bal-text-size-4xl-mobile: var(--bal-font-size-32);
  --bal-text-size-4xl-tablet: var(--bal-font-size-48);
  --bal-text-size-4xl-desktop: var(--bal-font-size-48);
  --bal-text-size-5xl-mobile: var(--bal-font-size-48);
  --bal-text-size-5xl-tablet: var(--bal-font-size-80);
  --bal-text-size-5xl-desktop: var(--bal-font-size-80);
  --bal-text-family-heading: var(--bal-font-family-heading);
  --bal-text-family-body: var(--bal-font-family-body);
  --bal-text-line-height-single: var(--bal-font-line-height-1);
  --bal-text-line-height-heading: var(--bal-font-line-height-2);
  --bal-text-line-height-body: var(--bal-font-line-height-3);
  --bal-text-line-height-double: var(--bal-font-line-height-4);
  --bal-text-weight-light: var(--bal-font-weight-300);
  --bal-text-weight-regular: var(--bal-font-weight-400);
  --bal-text-weight-bold: var(--bal-font-weight-700);
  --bal-text-color-white: var(--bal-color-white);
  --bal-text-color-primary-light: var(--bal-color-primary-3);
  --bal-text-color-disabled: var(--bal-color-grey-5);
  --bal-text-color-info: var(--bal-color-info-4);
  --bal-text-color-warning: var(--bal-color-warning-5);
  --bal-text-color-success: var(--bal-color-success-4);
  --bal-text-color-danger: var(--bal-color-danger-4);
  --bal-text-color-danger-hover: var(--bal-color-danger-5);
  --bal-text-color-danger-active: var(--bal-color-danger-6);
  --bal-text-color-primary: var(--bal-color-primary-5);
  --bal-text-color-primary-hover: var(--bal-color-sky-5);
  --bal-text-color-primary-active: var(--bal-color-primary-6);
  --bal-text-color-inverted-primary-hover: var(--bal-color-sky-2);
  --bal-text-color-inverted-primary-active: var(--bal-color-info-3);
  --bal-text-color-grey-light: var(--bal-color-grey-4);
  --bal-text-color-grey: var(--bal-color-grey-5);
  --bal-text-color-grey-dark: var(--bal-color-grey-6);
  --bal-shadow-text: var(--bal-font-shadow-1);
  --bal-shadow-box-none: var(--bal-elevation-shadow-0);
  --bal-shadow-box-header: var(--bal-elevation-shadow-2);
  --bal-shadow-box-base: var(--bal-elevation-shadow-3);
  --bal-shadow-box-elevated: var(--bal-elevation-shadow-4);
  --bal-z-index-deep: var(--bal-elevation-z-index-behind-all);
  --bal-z-index-masked: var(--bal-elevation-z-index-100);
  --bal-z-index-mask: var(--bal-elevation-z-index-200);
  --bal-z-index-sticky: var(--bal-elevation-z-index-300);
  --bal-z-index-navigation: var(--bal-elevation-z-index-400);
  --bal-z-index-popup: var(--bal-elevation-z-index-1000);
  --bal-z-index-modal: var(--bal-elevation-z-index-1100);
  --bal-z-index-toast: var(--bal-elevation-z-index-1200);
  --bal-z-index-tooltip: var(--bal-elevation-z-index-1300);
  --bal-heading-shadow: var(--bal-font-shadow-1);
  --bal-icon-tile-size-base-mobile: var(--bal-size-space-32);
  --bal-icon-tile-size-base-tablet: var(--bal-size-space-48);
  --bal-icon-tile-size-lg-mobile: var(--bal-size-space-48);
  --bal-icon-tile-size-lg-tablet: var(--bal-size-space-64);
  --bal-icon-tile-size-xl-mobile: var(--bal-size-space-64);
  --bal-icon-tile-size-xl-tablet: var(--bal-size-space-96);
  --bal-icon-size-xs: var(--bal-font-size-12);
  --bal-icon-size-sm: var(--bal-font-size-14);
  --bal-icon-size-base: var(--bal-font-size-16);
  --bal-icon-size-md: var(--bal-font-size-24);
  --bal-icon-size-lg: var(--bal-font-size-40);
  --bal-icon-size-xl: var(--bal-font-size-80);
  --bal-icon-size-2xl: var(--bal-font-size-176);
  --bal-tag-color-purple-dark-background: var(--bal-color-purple-6);
  --bal-tag-color-red-dark-background: var(--bal-color-red-6);
  --bal-tag-color-green-dark-background: var(--bal-color-green-6);
  --bal-tag-color-yellow-dark-background: var(--bal-color-yellow-6);
  --bal-notification-color-outline-base-border: var(--bal-color-primary-2);
  --bal-interaction-focus-color-border: var(--bal-background-color-white);
  --bal-interaction-focus-color-end: var(--bal-interaction-focus-color-base);
  --bal-interaction-focus-color-inverted-end: var(--bal-interaction-focus-color-inverted);
  --bal-text-color-hint: var(--bal-text-color-primary-light);
  --bal-text-color-inverted-disabled: var(--bal-text-color-primary-light);
  --bal-text-color-inverted-primary: var(--bal-text-color-white);
  --bal-heading-1-space: var(--bal-space-xs-mobile);
  --bal-heading-1-size-mobile: var(--bal-text-size-3xl-mobile);
  --bal-heading-1-size-tablet: var(--bal-text-size-3xl-tablet);
  --bal-heading-1-size-desktop: var(--bal-text-size-3xl-desktop);
  --bal-heading-2-space: var(--bal-space-xs-mobile);
  --bal-heading-2-size-mobile: var(--bal-text-size-2xl-mobile);
  --bal-heading-2-size-tablet: var(--bal-text-size-2xl-tablet);
  --bal-heading-2-size-desktop: var(--bal-text-size-2xl-desktop);
  --bal-heading-3-space: var(--bal-space-xs-mobile);
  --bal-heading-3-size-mobile: var(--bal-text-size-xl-mobile);
  --bal-heading-3-size-tablet: var(--bal-text-size-xl-tablet);
  --bal-heading-3-size-desktop: var(--bal-text-size-xl-desktop);
  --bal-heading-4-space: var(--bal-space-xs-mobile);
  --bal-heading-4-size-mobile: var(--bal-text-size-lg-mobile);
  --bal-heading-4-size-tablet: var(--bal-text-size-lg-tablet);
  --bal-heading-4-size-desktop: var(--bal-text-size-lg-desktop);
  --bal-heading-5-space: var(--bal-space-xs-mobile);
  --bal-heading-5-size-mobile: var(--bal-text-size-base-mobile);
  --bal-heading-5-size-tablet: var(--bal-text-size-base-tablet);
  --bal-heading-5-size-desktop: var(--bal-text-size-base-desktop);
  --bal-heading-family: var(--bal-text-family-heading);
  --bal-heading-weight: var(--bal-text-weight-bold);
  --bal-heading-line-height: var(--bal-text-line-height-heading);
  --bal-heading-color-primary: var(--bal-text-color-primary);
  --bal-heading-color-white: var(--bal-text-color-white);
  --bal-heading-color-info: var(--bal-text-color-info);
  --bal-heading-color-success: var(--bal-text-color-success);
  --bal-heading-color-warning: var(--bal-text-color-warning);
  --bal-heading-color-danger: var(--bal-text-color-danger);
  --bal-heading-display1-space: var(--bal-space-base-mobile);
  --bal-heading-display1-size-mobile: var(--bal-text-size-5xl-mobile);
  --bal-heading-display1-size-tablet: var(--bal-text-size-5xl-tablet);
  --bal-heading-display1-size-desktop: var(--bal-text-size-5xl-desktop);
  --bal-heading-display2-space: var(--bal-space-base-mobile);
  --bal-heading-display2-size-mobile: var(--bal-text-size-4xl-mobile);
  --bal-heading-display2-size-tablet: var(--bal-text-size-4xl-tablet);
  --bal-heading-display2-size-desktop: var(--bal-text-size-4xl-desktop);
  --bal-heading-subtitle-family: var(--bal-text-family-heading);
  --bal-heading-subtitle-line-height: var(--bal-text-line-height-heading);
  --bal-heading-subtitle-weight: var(--bal-text-weight-light);
  --bal-close-radius: var(--bal-radius-rounded);
  --bal-close-color-background-base: var(--bal-background-color-transparent);
  --bal-close-color-icon-base: var(--bal-text-color-primary);
  --bal-close-color-icon-inverted: var(--bal-text-color-white);
  --bal-body-color: var(--bal-text-color-primary);
  --bal-body-family: var(--bal-text-family-body);
  --bal-body-line-height: var(--bal-text-line-height-body);
  --bal-body-size: var(--bal-text-size-base-mobile);
  --bal-body-space: var(--bal-space-base-mobile);
  --bal-body-weight: var(--bal-text-weight-regular);
  --bal-icon-color-primary: var(--bal-text-color-primary);
  --bal-icon-color-primary-light: var(--bal-text-color-primary-light);
  --bal-icon-color-success: var(--bal-text-color-success);
  --bal-icon-color-info: var(--bal-text-color-info);
  --bal-icon-color-warning: var(--bal-text-color-warning);
  --bal-icon-color-danger: var(--bal-text-color-danger);
  --bal-icon-color-white: var(--bal-text-color-white);
  --bal-icon-color-grey: var(--bal-text-color-grey);
  --bal-icon-color-disabled: var(--bal-text-color-grey-dark);
  --bal-icon-tile-radius: var(--bal-radius-base);
  --bal-icon-tile-color-purple: var(--bal-background-color-purple-lighter);
  --bal-icon-tile-color-red: var(--bal-background-color-red-lighter);
  --bal-icon-tile-color-green: var(--bal-background-color-green-lighter);
  --bal-icon-tile-color-yellow: var(--bal-background-color-yellow-lighter);
  --bal-spinner-size: var(--bal-space-2xl-mobile);
  --bal-spinner-circle-border-width: var(--bal-border-width-md);
  --bal-spinner-circle-size: var(--bal-space-lg-mobile);
  --bal-spinner-circle-color-background: var(--bal-background-color-grey);
  --bal-spinner-circle-color-progress: var(--bal-background-color-primary);
  --bal-spinner-circle-color-inverted-background: var(--bal-background-color-white);
  --bal-spinner-circle-color-inverted-progress: var(--bal-background-color-primary);
  --bal-tag-family: var(--bal-text-family-body);
  --bal-tag-weight: var(--bal-text-weight-bold);
  --bal-tag-line-height: var(--bal-text-line-height-body);
  --bal-tag-size: var(--bal-text-size-base-mobile);
  --bal-tag-space-y: var(--bal-space-2xs-mobile);
  --bal-tag-space-x: var(--bal-space-sm-mobile);
  --bal-tag-radius-base: var(--bal-radius-lg);
  --bal-tag-radius-square: var(--bal-radius-base);
  --bal-tag-radius-pill: var(--bal-radius-rounded);
  --bal-tag-color-base-text: var(--bal-text-color-primary);
  --bal-tag-color-base-background: var(--bal-background-color-grey);
  --bal-tag-color-primary-text: var(--bal-text-color-white);
  --bal-tag-color-primary-background: var(--bal-background-color-primary);
  --bal-tag-color-grey-text: var(--bal-text-color-white);
  --bal-tag-color-grey-background: var(--bal-background-color-grey-dark);
  --bal-tag-color-info-text: var(--bal-text-color-white);
  --bal-tag-color-info-background: var(--bal-background-color-info-dark);
  --bal-tag-color-success-text: var(--bal-text-color-white);
  --bal-tag-color-success-background: var(--bal-background-color-success-dark);
  --bal-tag-color-warning-text: var(--bal-text-color-primary);
  --bal-tag-color-warning-background: var(--bal-background-color-warning-dark);
  --bal-tag-color-danger-text: var(--bal-text-color-white);
  --bal-tag-color-danger-background: var(--bal-background-color-danger-dark);
  --bal-tag-color-purple-text: var(--bal-text-color-primary);
  --bal-tag-color-purple-background: var(--bal-background-color-purple);
  --bal-tag-color-purple-light-text: var(--bal-text-color-primary);
  --bal-tag-color-purple-light-background: var(--bal-background-color-purple-light);
  --bal-tag-color-purple-dark-text: var(--bal-text-color-white);
  --bal-tag-color-red-text: var(--bal-text-color-primary);
  --bal-tag-color-red-background: var(--bal-background-color-red);
  --bal-tag-color-red-light-text: var(--bal-text-color-primary);
  --bal-tag-color-red-light-background: var(--bal-background-color-red-light);
  --bal-tag-color-red-dark-text: var(--bal-text-color-white);
  --bal-tag-color-green-text: var(--bal-text-color-primary);
  --bal-tag-color-green-background: var(--bal-background-color-green);
  --bal-tag-color-green-light-text: var(--bal-text-color-primary);
  --bal-tag-color-green-light-background: var(--bal-background-color-green-light);
  --bal-tag-color-green-dark-text: var(--bal-text-color-white);
  --bal-tag-color-yellow-text: var(--bal-text-color-primary);
  --bal-tag-color-yellow-background: var(--bal-background-color-yellow);
  --bal-tag-color-yellow-light-text: var(--bal-text-color-primary);
  --bal-tag-color-yellow-light-background: var(--bal-background-color-yellow-light);
  --bal-tag-color-yellow-dark-text: var(--bal-text-color-white);
  --bal-tag-sm-size: var(--bal-text-size-sm-mobile);
  --bal-tag-sm-weight: var(--bal-text-weight-regular);
  --bal-tag-sm-space-y: var(--bal-space-none-mobile);
  --bal-tag-sm-space-x: var(--bal-space-sm-mobile);
  --bal-tag-md-size: var(--bal-text-size-base-mobile);
  --bal-tag-md-weight: var(--bal-text-weight-bold);
  --bal-tag-md-space-y: var(--bal-space-xs-mobile);
  --bal-tag-md-space-x: var(--bal-space-base-mobile);
  --bal-tag-lg-size: var(--bal-text-size-base-mobile);
  --bal-tag-lg-weight: var(--bal-text-weight-bold);
  --bal-tag-lg-space-y: var(--bal-space-sm-mobile);
  --bal-tag-lg-space-x: var(--bal-space-lg-mobile);
  --bal-label-family: var(--bal-text-family-body);
  --bal-label-weight: var(--bal-text-weight-bold);
  --bal-label-line-height: var(--bal-text-line-height-body);
  --bal-label-color-base: var(--bal-text-color-primary);
  --bal-label-color-base-hover: var(--bal-text-color-primary-hover);
  --bal-label-color-base-active: var(--bal-text-color-primary-active);
  --bal-label-color-disabled: var(--bal-text-color-disabled);
  --bal-label-color-success: var(--bal-text-color-success);
  --bal-label-color-warning: var(--bal-text-color-warning);
  --bal-label-color-danger: var(--bal-text-color-danger);
  --bal-label-color-danger-hover: var(--bal-text-color-danger-hover);
  --bal-label-color-danger-active: var(--bal-text-color-danger-active);
  --bal-label-size-3xl-mobile: var(--bal-text-size-3xl-mobile);
  --bal-label-size-3xl-tablet: var(--bal-text-size-3xl-tablet);
  --bal-label-size-3xl-desktop: var(--bal-text-size-3xl-desktop);
  --bal-label-size-2xl-mobile: var(--bal-text-size-2xl-mobile);
  --bal-label-size-2xl-tablet: var(--bal-text-size-2xl-tablet);
  --bal-label-size-2xl-desktop: var(--bal-text-size-2xl-desktop);
  --bal-label-size-xl-mobile: var(--bal-text-size-xl-mobile);
  --bal-label-size-xl-tablet: var(--bal-text-size-xl-tablet);
  --bal-label-size-xl-desktop: var(--bal-text-size-xl-desktop);
  --bal-label-size-lg-mobile: var(--bal-text-size-lg-mobile);
  --bal-label-size-lg-tablet: var(--bal-text-size-lg-tablet);
  --bal-label-size-lg-desktop: var(--bal-text-size-lg-tablet);
  --bal-label-size-md-mobile: var(--bal-text-size-md-mobile);
  --bal-label-size-md-tablet: var(--bal-text-size-md-tablet);
  --bal-label-size-md-desktop: var(--bal-text-size-md-desktop);
  --bal-label-size-base-mobile: var(--bal-text-size-base-mobile);
  --bal-label-size-base-tablet: var(--bal-text-size-base-tablet);
  --bal-label-size-base-desktop: var(--bal-text-size-base-tablet);
  --bal-label-size-sm-mobile: var(--bal-text-size-sm-mobile);
  --bal-label-size-sm-tablet: var(--bal-text-size-sm-tablet);
  --bal-label-size-sm-desktop: var(--bal-space-sm-desktop);
  --bal-divider-radius: var(--bal-radius-rounded);
  --bal-divider-width: var(--bal-border-width-base);
  --bal-divider-color-base: var(--bal-border-color-grey);
  --bal-divider-color-primary-light: var(--bal-border-color-primary-light);
  --bal-divider-color-primary: var(--bal-border-color-primary);
  --bal-divider-color-light-blue: var(--bal-border-color-primary-hover);
  --bal-divider-color-primary-dark: var(--bal-border-color-primary-active);
  --bal-divider-color-grey-light: var(--bal-border-color-grey-light);
  --bal-divider-color-grey: var(--bal-border-color-grey);
  --bal-divider-color-grey-dark: var(--bal-border-color-grey-dark);
  --bal-divider-color-warning: var(--bal-border-color-warning);
  --bal-divider-color-success: var(--bal-border-color-success);
  --bal-divider-color-danger: var(--bal-border-color-danger);
  --bal-divider-color-danger-dark: var(--bal-border-color-danger-hover);
  --bal-divider-color-danger-darker: var(--bal-border-color-danger-active);
  --bal-divider-color-white: var(--bal-border-color-white);
  --bal-card-radius-base: var(--bal-radius-lg);
  --bal-card-radius-square: var(--bal-radius-base);
  --bal-card-shadow-flat: var(--bal-shadow-box-none);
  --bal-card-shadow-base: var(--bal-shadow-box-base);
  --bal-card-shadow-hover: var(--bal-shadow-box-elevated);
  --bal-card-color-base-background: var(--bal-background-color-white);
  --bal-card-color-base-outline: var(--bal-border-color-grey);
  --bal-card-color-white-background: var(--bal-background-color-white);
  --bal-card-color-white-outline: var(--bal-border-color-grey);
  --bal-card-color-primary-text: var(--bal-text-color-white);
  --bal-card-color-primary-background: var(--bal-background-color-primary);
  --bal-card-color-info-background: var(--bal-background-color-info);
  --bal-card-color-success-background: var(--bal-background-color-success);
  --bal-card-color-warning-background: var(--bal-background-color-warning);
  --bal-card-color-danger-background: var(--bal-background-color-danger);
  --bal-card-color-grey-light-background: var(--bal-background-color-grey-light);
  --bal-card-color-grey-light-outline: var(--bal-border-color-grey-dark);
  --bal-card-color-grey-background: var(--bal-background-color-grey);
  --bal-card-color-grey-outline: var(--bal-border-color-grey-dark);
  --bal-card-color-red-lighter-background: var(--bal-background-color-red-lighter);
  --bal-card-color-red-lighter-outline: var(--bal-background-color-red);
  --bal-card-color-red-light-background: var(--bal-background-color-red-light);
  --bal-card-color-red-light-outline: var(--bal-background-color-red);
  --bal-card-color-red-background: var(--bal-background-color-red);
  --bal-card-color-red-outline: var(--bal-background-color-red);
  --bal-card-color-purple-lighter-background: var(--bal-background-color-purple-lighter);
  --bal-card-color-purple-lighter-outline: var(--bal-background-color-purple);
  --bal-card-color-purple-light-background: var(--bal-background-color-purple-light);
  --bal-card-color-purple-light-outline: var(--bal-background-color-purple);
  --bal-card-color-purple-background: var(--bal-background-color-purple);
  --bal-card-color-purple-outline: var(--bal-background-color-purple);
  --bal-card-color-green-lighter-background: var(--bal-background-color-green-lighter);
  --bal-card-color-green-lighter-outline: var(--bal-background-color-green);
  --bal-card-color-green-light-background: var(--bal-background-color-green-light);
  --bal-card-color-green-light-outline: var(--bal-background-color-green);
  --bal-card-color-green-background: var(--bal-background-color-green);
  --bal-card-color-green-outline: var(--bal-background-color-green);
  --bal-card-color-yellow-lighter-background: var(--bal-background-color-yellow-lighter);
  --bal-card-color-yellow-lighter-outline: var(--bal-background-color-yellow);
  --bal-card-color-yellow-light-background: var(--bal-background-color-yellow-light);
  --bal-card-color-yellow-light-outline: var(--bal-background-color-yellow);
  --bal-card-color-yellow-background: var(--bal-background-color-yellow);
  --bal-card-color-yellow-outline: var(--bal-background-color-yellow);
  --bal-card-space-sm-mobile: var(--bal-space-base-mobile);
  --bal-card-space-sm-tablet: var(--bal-space-base-mobile);
  --bal-card-space-sm-desktop: var(--bal-space-base-mobile);
  --bal-card-space-base-mobile: var(--bal-space-base-mobile);
  --bal-card-space-base-tablet: var(--bal-space-lg-mobile);
  --bal-card-space-base-desktop: var(--bal-space-lg-mobile);
  --bal-card-space-md-mobile: var(--bal-space-base-mobile);
  --bal-card-space-md-tablet: var(--bal-space-lg-mobile);
  --bal-card-space-md-desktop: var(--bal-space-xl-mobile);
  --bal-card-space-lg-mobile: var(--bal-space-base-mobile);
  --bal-card-space-lg-tablet: var(--bal-space-xl-mobile);
  --bal-card-space-lg-desktop: var(--bal-space-2xl-mobile);
  --bal-card-outline-width: var(--bal-border-width-base);
  --bal-button-family: var(--bal-text-family-heading);
  --bal-button-weight: var(--bal-text-weight-bold);
  --bal-button-line-height: var(--bal-text-line-height-heading);
  --bal-button-size-sm: var(--bal-text-size-sm-mobile);
  --bal-button-size-base: var(--bal-text-size-base-mobile);
  --bal-button-size-lg: var(--bal-text-size-lg-mobile);
  --bal-button-radius-base: var(--bal-radius-base);
  --bal-button-radius-rounded: var(--bal-radius-rounded);
  --bal-button-color-primary-base-text: var(--bal-text-color-white);
  --bal-button-color-primary-base-background: var(--bal-background-color-primary);
  --bal-button-color-primary-base-border: var(--bal-border-color-primary);
  --bal-button-color-primary-hover-text: var(--bal-text-color-white);
  --bal-button-color-primary-hover-background: var(--bal-background-color-primary-hover);
  --bal-button-color-primary-hover-border: var(--bal-border-color-primary-hover);
  --bal-button-color-primary-active-text: var(--bal-text-color-white);
  --bal-button-color-primary-active-background: var(--bal-background-color-primary-active);
  --bal-button-color-primary-active-border: var(--bal-border-color-primary-active);
  --bal-button-color-secondary-base-text: var(--bal-background-color-primary);
  --bal-button-color-secondary-base-background: var(--bal-background-color-transparent);
  --bal-button-color-secondary-base-border: var(--bal-border-color-primary);
  --bal-button-color-secondary-hover-text: var(--bal-text-color-primary-hover);
  --bal-button-color-secondary-hover-background: var(--bal-background-color-sky-light);
  --bal-button-color-secondary-hover-border: var(--bal-border-color-primary-hover);
  --bal-button-color-secondary-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-secondary-active-background: var(--bal-background-color-sky-light);
  --bal-button-color-secondary-active-border: var(--bal-border-color-primary-active);
  --bal-button-color-tertiary-base-text: var(--bal-background-color-primary);
  --bal-button-color-tertiary-base-background: var(--bal-background-color-transparent);
  --bal-button-color-tertiary-base-border: var(--bal-background-color-transparent);
  --bal-button-color-tertiary-hover-text: var(--bal-text-color-primary-hover);
  --bal-button-color-tertiary-hover-background: var(--bal-background-color-sky-light);
  --bal-button-color-tertiary-hover-border: var(--bal-background-color-sky-light);
  --bal-button-color-tertiary-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-tertiary-active-background: var(--bal-background-color-sky-light);
  --bal-button-color-tertiary-active-border: var(--bal-background-color-sky-light);
  --bal-button-color-tertiary-purple-base-text: var(--bal-background-color-primary);
  --bal-button-color-tertiary-purple-base-background: var(--bal-background-color-purple-lighter);
  --bal-button-color-tertiary-purple-base-border: var(--bal-background-color-purple-lighter);
  --bal-button-color-tertiary-purple-hover-text: var(--bal-text-color-primary);
  --bal-button-color-tertiary-purple-hover-background: var(--bal-background-color-purple-lighter);
  --bal-button-color-tertiary-purple-hover-border: var(--bal-border-color-purple-hover);
  --bal-button-color-tertiary-purple-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-tertiary-purple-active-background: var(--bal-background-color-purple-lighter);
  --bal-button-color-tertiary-purple-active-border: var(--bal-border-color-purple-active);
  --bal-button-color-tertiary-green-base-text: var(--bal-background-color-primary);
  --bal-button-color-tertiary-green-base-background: var(--bal-background-color-green-lighter);
  --bal-button-color-tertiary-green-base-border: var(--bal-background-color-green-lighter);
  --bal-button-color-tertiary-green-hover-text: var(--bal-text-color-primary);
  --bal-button-color-tertiary-green-hover-background: var(--bal-background-color-green-lighter);
  --bal-button-color-tertiary-green-hover-border: var(--bal-border-color-green-hover);
  --bal-button-color-tertiary-green-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-tertiary-green-active-background: var(--bal-background-color-green-lighter);
  --bal-button-color-tertiary-green-active-border: var(--bal-border-color-green-active);
  --bal-button-color-tertiary-red-base-text: var(--bal-background-color-primary);
  --bal-button-color-tertiary-red-base-background: var(--bal-background-color-red-lighter);
  --bal-button-color-tertiary-red-base-border: var(--bal-background-color-red-lighter);
  --bal-button-color-tertiary-red-hover-text: var(--bal-text-color-primary);
  --bal-button-color-tertiary-red-hover-background: var(--bal-background-color-red-lighter);
  --bal-button-color-tertiary-red-hover-border: var(--bal-border-color-red-hover);
  --bal-button-color-tertiary-red-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-tertiary-red-active-background: var(--bal-background-color-red-lighter);
  --bal-button-color-tertiary-red-active-border: var(--bal-border-color-red-active);
  --bal-button-color-tertiary-yellow-base-text: var(--bal-background-color-primary);
  --bal-button-color-tertiary-yellow-base-background: var(--bal-background-color-yellow-lighter);
  --bal-button-color-tertiary-yellow-base-border: var(--bal-background-color-yellow-lighter);
  --bal-button-color-tertiary-yellow-hover-text: var(--bal-text-color-primary);
  --bal-button-color-tertiary-yellow-hover-background: var(--bal-background-color-yellow-lighter);
  --bal-button-color-tertiary-yellow-hover-border: var(--bal-border-color-yellow-hover);
  --bal-button-color-tertiary-yellow-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-tertiary-yellow-active-background: var(--bal-background-color-yellow-lighter);
  --bal-button-color-tertiary-yellow-active-border: var(--bal-border-color-yellow-active);
  --bal-button-color-info-base-text: var(--bal-background-color-primary);
  --bal-button-color-info-base-background: var(--bal-background-color-sky);
  --bal-button-color-info-base-border: var(--bal-background-color-info-darker);
  --bal-button-color-info-hover-text: var(--bal-text-color-white);
  --bal-button-color-info-hover-background: var(--bal-background-color-info-darker);
  --bal-button-color-info-hover-border: var(--bal-background-color-info-darker);
  --bal-button-color-info-active-text: var(--bal-text-color-white);
  --bal-button-color-info-active-background: var(--bal-background-color-info-darkest);
  --bal-button-color-info-active-border: var(--bal-background-color-info-darkest);
  --bal-button-color-success-base-text: var(--bal-background-color-primary);
  --bal-button-color-success-base-background: var(--bal-background-color-success-lighter);
  --bal-button-color-success-base-border: var(--bal-background-color-success-darker);
  --bal-button-color-success-hover-text: var(--bal-text-color-white);
  --bal-button-color-success-hover-background: var(--bal-background-color-success-darker);
  --bal-button-color-success-hover-border: var(--bal-background-color-success-darker);
  --bal-button-color-success-active-text: var(--bal-text-color-white);
  --bal-button-color-success-active-background: var(--bal-background-color-success-darkest);
  --bal-button-color-success-active-border: var(--bal-background-color-success-darkest);
  --bal-button-color-warning-base-text: var(--bal-background-color-primary);
  --bal-button-color-warning-base-background: var(--bal-background-color-warning-lighter);
  --bal-button-color-warning-base-border: var(--bal-background-color-warning-darker);
  --bal-button-color-warning-hover-text: var(--bal-text-color-primary);
  --bal-button-color-warning-hover-background: var(--bal-background-color-warning-darker);
  --bal-button-color-warning-hover-border: var(--bal-background-color-warning-darker);
  --bal-button-color-warning-active-text: var(--bal-text-color-primary);
  --bal-button-color-warning-active-background: var(--bal-background-color-warning-darkest);
  --bal-button-color-warning-active-border: var(--bal-background-color-warning-darkest);
  --bal-button-color-danger-base-text: var(--bal-background-color-primary);
  --bal-button-color-danger-base-background: var(--bal-background-color-danger-lighter);
  --bal-button-color-danger-base-border: var(--bal-background-color-danger-darker);
  --bal-button-color-danger-hover-text: var(--bal-text-color-white);
  --bal-button-color-danger-hover-background: var(--bal-background-color-danger-darker);
  --bal-button-color-danger-hover-border: var(--bal-background-color-danger-darker);
  --bal-button-color-danger-active-text: var(--bal-text-color-white);
  --bal-button-color-danger-active-background: var(--bal-background-color-danger-darkest);
  --bal-button-color-danger-active-border: var(--bal-background-color-danger-darkest);
  --bal-button-color-disabled-base-text: var(--bal-text-color-disabled);
  --bal-button-color-disabled-base-background: var(--bal-background-color-grey);
  --bal-button-color-disabled-base-border: var(--bal-border-color-grey);
  --bal-button-color-disabled-hover-text: var(--bal-text-color-disabled);
  --bal-button-color-disabled-hover-background: var(--bal-background-color-grey);
  --bal-button-color-disabled-hover-border: var(--bal-border-color-grey);
  --bal-button-color-disabled-active-text: var(--bal-text-color-disabled);
  --bal-button-color-disabled-active-background: var(--bal-background-color-grey);
  --bal-button-color-disabled-active-border: var(--bal-border-color-grey);
  --bal-button-color-link-base-text: var(--bal-background-color-primary);
  --bal-button-color-link-base-background: var(--bal-background-color-transparent);
  --bal-button-color-link-base-border: var(--bal-background-color-transparent);
  --bal-button-color-link-hover-text: var(--bal-text-color-primary-hover);
  --bal-button-color-link-hover-background: var(--bal-background-color-transparent);
  --bal-button-color-link-hover-border: var(--bal-background-color-transparent);
  --bal-button-color-link-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-link-active-background: var(--bal-background-color-transparent);
  --bal-button-color-link-active-border: var(--bal-background-color-transparent);
  --bal-button-color-inverted-base-text: var(--bal-background-color-primary);
  --bal-button-color-inverted-base-background: var(--bal-background-color-white);
  --bal-button-color-inverted-base-border: var(--bal-background-color-white);
  --bal-button-color-inverted-hover-text: var(--bal-background-color-primary);
  --bal-button-color-inverted-hover-background: var(--bal-background-color-sky);
  --bal-button-color-inverted-hover-border: var(--bal-background-color-sky);
  --bal-button-color-inverted-active-text: var(--bal-text-color-white);
  --bal-button-color-inverted-active-background: var(--bal-background-color-primary-hover);
  --bal-button-color-inverted-active-border: var(--bal-background-color-primary-hover);
  --bal-button-color-inverted-secondary-base-text: var(--bal-text-color-white);
  --bal-button-color-inverted-secondary-base-background: var(--bal-background-color-transparent);
  --bal-button-color-inverted-secondary-base-border: var(--bal-background-color-white);
  --bal-button-color-inverted-secondary-hover-text: var(--bal-text-color-white);
  --bal-button-color-inverted-secondary-hover-background: var(--bal-background-color-primary-light);
  --bal-button-color-inverted-secondary-hover-border: var(--bal-background-color-sky-dark);
  --bal-button-color-inverted-secondary-active-text: var(--bal-text-color-white);
  --bal-button-color-inverted-secondary-active-background: var(--bal-background-color-primary-light);
  --bal-button-color-inverted-secondary-active-border: var(--bal-background-color-primary-hover);
  --bal-button-color-inverted-tertiary-base-text: var(--bal-background-color-primary);
  --bal-button-color-inverted-tertiary-base-background: var(--bal-background-color-grey-light);
  --bal-button-color-inverted-tertiary-base-border: var(--bal-background-color-grey-light);
  --bal-button-color-inverted-tertiary-hover-text: var(--bal-text-color-primary);
  --bal-button-color-inverted-tertiary-hover-background: var(--bal-background-color-sky-light);
  --bal-button-color-inverted-tertiary-hover-border: var(--bal-background-color-sky-light);
  --bal-button-color-inverted-tertiary-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-inverted-tertiary-active-background: var(--bal-background-color-sky);
  --bal-button-color-inverted-tertiary-active-border: var(--bal-background-color-sky);
  --bal-button-color-inverted-link-base-background: var(--bal-background-color-transparent);
  --bal-button-color-inverted-link-base-border: var(--bal-background-color-transparent);
  --bal-button-color-inverted-link-hover-text: var(--bal-text-color-inverted-primary-hover);
  --bal-button-color-inverted-link-hover-background: var(--bal-background-color-transparent);
  --bal-button-color-inverted-link-hover-border: var(--bal-background-color-transparent);
  --bal-button-color-inverted-link-active-text: var(--bal-text-color-inverted-primary-active);
  --bal-button-color-inverted-link-active-background: var(--bal-background-color-transparent);
  --bal-button-color-inverted-link-active-border: var(--bal-background-color-transparent);
  --bal-button-color-tertiary-purple-dashed-base-text: var(--bal-background-color-primary);
  --bal-button-color-tertiary-purple-dashed-base-background: var(--bal-background-color-purple-lighter);
  --bal-button-color-tertiary-purple-dashed-base-border: var(--bal-background-color-purple);
  --bal-button-color-tertiary-purple-dashed-hover-text: var(--bal-text-color-primary);
  --bal-button-color-tertiary-purple-dashed-hover-background: var(--bal-background-color-purple-lighter);
  --bal-button-color-tertiary-purple-dashed-hover-border: var(--bal-border-color-purple-hover);
  --bal-button-color-tertiary-purple-dashed-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-tertiary-purple-dashed-active-background: var(--bal-background-color-purple-lighter);
  --bal-button-color-tertiary-purple-dashed-active-border: var(--bal-border-color-purple-active);
  --bal-button-color-tertiary-green-dashed-base-text: var(--bal-background-color-primary);
  --bal-button-color-tertiary-green-dashed-base-background: var(--bal-background-color-green-lighter);
  --bal-button-color-tertiary-green-dashed-base-border: var(--bal-background-color-green);
  --bal-button-color-tertiary-green-dashed-hover-text: var(--bal-text-color-primary);
  --bal-button-color-tertiary-green-dashed-hover-background: var(--bal-background-color-green-lighter);
  --bal-button-color-tertiary-green-dashed-hover-border: var(--bal-border-color-green-hover);
  --bal-button-color-tertiary-green-dashed-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-tertiary-green-dashed-active-background: var(--bal-background-color-green-lighter);
  --bal-button-color-tertiary-green-dashed-active-border: var(--bal-border-color-green-active);
  --bal-button-color-tertiary-red-dashed-base-text: var(--bal-background-color-primary);
  --bal-button-color-tertiary-red-dashed-base-background: var(--bal-background-color-red-lighter);
  --bal-button-color-tertiary-red-dashed-base-border: var(--bal-background-color-red);
  --bal-button-color-tertiary-red-dashed-hover-text: var(--bal-text-color-primary);
  --bal-button-color-tertiary-red-dashed-hover-background: var(--bal-background-color-red-lighter);
  --bal-button-color-tertiary-red-dashed-hover-border: var(--bal-border-color-red-hover);
  --bal-button-color-tertiary-red-dashed-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-tertiary-red-dashed-active-background: var(--bal-background-color-red-lighter);
  --bal-button-color-tertiary-red-dashed-active-border: var(--bal-border-color-red-active);
  --bal-button-color-tertiary-yellow-dashed-base-text: var(--bal-background-color-primary);
  --bal-button-color-tertiary-yellow-dashed-base-background: var(--bal-background-color-yellow-lighter);
  --bal-button-color-tertiary-yellow-dashed-base-border: var(--bal-background-color-yellow);
  --bal-button-color-tertiary-yellow-dashed-hover-text: var(--bal-text-color-primary);
  --bal-button-color-tertiary-yellow-dashed-hover-background: var(--bal-background-color-yellow-lighter);
  --bal-button-color-tertiary-yellow-dashed-hover-border: var(--bal-border-color-yellow-hover);
  --bal-button-color-tertiary-yellow-dashed-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-tertiary-yellow-dashed-active-background: var(--bal-background-color-yellow-lighter);
  --bal-button-color-tertiary-yellow-dashed-active-border: var(--bal-border-color-yellow-active);
  --bal-button-color-text-base-text: var(--bal-background-color-primary);
  --bal-button-color-text-base-background: var(--bal-background-color-transparent);
  --bal-button-color-text-base-border: var(--bal-background-color-transparent);
  --bal-button-color-text-hover-text: var(--bal-text-color-primary-hover);
  --bal-button-color-text-hover-background: var(--bal-background-color-transparent);
  --bal-button-color-text-hover-border: var(--bal-background-color-transparent);
  --bal-button-color-text-active-text: var(--bal-text-color-primary-active);
  --bal-button-color-text-active-background: var(--bal-background-color-transparent);
  --bal-button-color-text-active-border: var(--bal-background-color-transparent);
  --bal-notification-radius: var(--bal-radius-lg);
  --bal-notification-color-base-background: var(--bal-background-color-grey-light);
  --bal-notification-color-base-border: var(--bal-background-color-grey-light);
  --bal-notification-color-base-text: var(--bal-text-color-primary);
  --bal-notification-color-info-background: var(--bal-background-color-info-light);
  --bal-notification-color-info-border: var(--bal-background-color-info-light);
  --bal-notification-color-info-text: var(--bal-text-color-primary);
  --bal-notification-color-success-background: var(--bal-background-color-success-light);
  --bal-notification-color-success-border: var(--bal-background-color-success-light);
  --bal-notification-color-success-text: var(--bal-text-color-primary);
  --bal-notification-color-warning-background: var(--bal-background-color-warning-light);
  --bal-notification-color-warning-border: var(--bal-background-color-warning-light);
  --bal-notification-color-warning-text: var(--bal-text-color-primary);
  --bal-notification-color-danger-background: var(--bal-background-color-danger-light);
  --bal-notification-color-danger-border: var(--bal-background-color-danger-light);
  --bal-notification-color-danger-text: var(--bal-text-color-primary);
  --bal-notification-color-outline-base-background: var(--bal-background-color-white);
  --bal-notification-color-outline-base-text: var(--bal-text-color-primary);
  --bal-notification-color-outline-purple-background: var(--bal-background-color-purple-lighter);
  --bal-notification-color-outline-purple-border: var(--bal-border-color-purple);
  --bal-notification-color-outline-purple-text: var(--bal-text-color-primary);
  --bal-notification-color-outline-green-background: var(--bal-background-color-green-lighter);
  --bal-notification-color-outline-green-border: var(--bal-border-color-green);
  --bal-notification-color-outline-green-text: var(--bal-text-color-primary);
  --bal-notification-color-outline-yellow-background: var(--bal-background-color-yellow-lighter);
  --bal-notification-color-outline-yellow-border: var(--bal-border-color-yellow);
  --bal-notification-color-outline-yellow-text: var(--bal-text-color-primary);
  --bal-notification-color-outline-red-background: var(--bal-background-color-red-lighter);
  --bal-notification-color-outline-red-border: var(--bal-border-color-red);
  --bal-notification-color-outline-red-text: var(--bal-text-color-primary);
  --bal-badge-text-family: var(--bal-text-family-heading);
  --bal-badge-text-weight: var(--bal-text-weight-bold);
  --bal-badge-text-size-sm: var(--bal-text-size-none-mobile);
  --bal-badge-text-size-base: var(--bal-text-size-xs-mobile);
  --bal-badge-text-size-lg: var(--bal-text-size-base-mobile);
  --bal-badge-size-sm: var(--bal-space-sm-mobile);
  --bal-badge-size-base: var(--bal-space-lg-mobile);
  --bal-badge-size-lg: var(--bal-space-xl-mobile);
  --bal-badge-color-base-text: var(--bal-text-color-primary);
  --bal-badge-color-base-background: var(--bal-background-color-red);
  --bal-badge-color-info-text: var(--bal-text-color-primary);
  --bal-badge-color-info-background: var(--bal-background-color-purple);
  --bal-badge-color-success-text: var(--bal-text-color-primary);
  --bal-badge-color-success-background: var(--bal-background-color-green);
  --bal-badge-color-warning-text: var(--bal-text-color-primary);
  --bal-badge-color-warning-background: var(--bal-background-color-yellow-light);
  --bal-badge-color-danger-text: var(--bal-text-color-primary);
  --bal-badge-color-danger-background: var(--bal-background-color-red);
  --bal-badge-color-red-text: var(--bal-text-color-primary);
  --bal-badge-color-red-background: var(--bal-background-color-red);
  --bal-badge-color-purple-text: var(--bal-text-color-primary);
  --bal-badge-color-purple-background: var(--bal-background-color-purple);
  --bal-badge-color-green-text: var(--bal-text-color-primary);
  --bal-badge-color-green-background: var(--bal-background-color-green);
  --bal-badge-color-yellow-text: var(--bal-text-color-primary);
  --bal-badge-color-yellow-background: var(--bal-background-color-yellow-light);
  --bal-badge-color-grey-text: var(--bal-text-color-grey-dark);
  --bal-badge-color-grey-background: var(--bal-background-color-grey);
  --bal-link-weight: var(--bal-text-weight-bold);
  --bal-link-border-width: var(--bal-border-width-base);
  --bal-link-color-base: var(--bal-text-color-primary);
  --bal-link-color-base-hover: var(--bal-text-color-primary-hover);
  --bal-link-color-base-active: var(--bal-text-color-primary-active);
  --bal-link-color-inverted-hover: var(--bal-text-color-inverted-primary-hover);
  --bal-link-color-inverted-active: var(--bal-text-color-inverted-primary-active);
  --bal-toast-radius: var(--bal-radius-base);
  --bal-toast-success-background: var(--bal-background-color-success-light);
  --bal-toast-success-border: var(--bal-background-color-success-light);
  --bal-toast-success-text: var(--bal-text-color-primary);
  --bal-toast-info-background: var(--bal-background-color-info-light);
  --bal-toast-info-border: var(--bal-background-color-info-light);
  --bal-toast-info-text: var(--bal-text-color-primary);
  --bal-toast-base-background: var(--bal-background-color-grey-light);
  --bal-toast-base-border: var(--bal-background-color-grey-light);
  --bal-toast-base-text: var(--bal-text-color-primary);
  --bal-toast-warning-background: var(--bal-background-color-warning-light);
  --bal-toast-warning-border: var(--bal-background-color-warning-light);
  --bal-toast-warning-text: var(--bal-text-color-primary);
  --bal-toast-danger-background: var(--bal-background-color-danger-light);
  --bal-toast-danger-border: var(--bal-background-color-danger-light);
  --bal-toast-danger-text: var(--bal-text-color-primary);
  --bal-snackbar-radius: var(--bal-radius-base);
  --bal-snackbar-success-background: var(--bal-background-color-success-light);
  --bal-snackbar-success-border: var(--bal-background-color-success-light);
  --bal-snackbar-success-text: var(--bal-text-color-primary);
  --bal-snackbar-info-background: var(--bal-background-color-info-light);
  --bal-snackbar-info-border: var(--bal-background-color-info-light);
  --bal-snackbar-info-text: var(--bal-text-color-primary);
  --bal-snackbar-base-background: var(--bal-background-color-grey-light);
  --bal-snackbar-base-border: var(--bal-background-color-grey-light);
  --bal-snackbar-base-text: var(--bal-text-color-primary);
  --bal-snackbar-warning-background: var(--bal-background-color-warning-light);
  --bal-snackbar-warning-border: var(--bal-background-color-warning-light);
  --bal-snackbar-warning-text: var(--bal-text-color-primary);
  --bal-snackbar-danger-background: var(--bal-background-color-danger-light);
  --bal-snackbar-danger-border: var(--bal-background-color-danger-light);
  --bal-snackbar-danger-text: var(--bal-text-color-primary);
  --bal-interaction-focus-color-start: var(--bal-interaction-focus-color-border);
  --bal-interaction-focus-color-inverted-start: var(--bal-interaction-focus-color-border);
  --bal-button-color-inverted-link-base-text: var(--bal-text-color-inverted-primary);
  --bal-link-color-inverted: var(--bal-text-color-inverted-primary);
  /* Base tokens */
  --bal-container-space: var(--bal-size-space-16);
  --bal-space-none: var(--bal-size-space-0);
  --bal-space-auto: var(--bal-size-space-auto);
  --bal-space-2xs: var(--bal-size-space-4);
  --bal-space-xs: var(--bal-size-space-8);
  --bal-space-sm: var(--bal-size-space-12);
  --bal-space-base: var(--bal-size-space-16);
  --bal-space-md: var(--bal-size-space-20);
  --bal-space-lg: var(--bal-size-space-24);
  --bal-space-xl: var(--bal-size-space-32);
  --bal-space-2xl: var(--bal-size-space-48);
  --bal-space-3xl: var(--bal-size-space-56);
  --bal-space-4xl: var(--bal-size-space-64);
  --bal-text-size-none: var(--bal-font-size-0);
  --bal-text-size-xs: var(--bal-font-size-12);
  --bal-text-size-sm: var(--bal-font-size-14);
  --bal-text-size-base: var(--bal-font-size-16);
  --bal-text-size-md: var(--bal-font-size-16);
  --bal-text-size-lg: var(--bal-font-size-18);
  --bal-text-size-xl: var(--bal-font-size-20);
  --bal-text-size-2xl: var(--bal-font-size-24);
  --bal-text-size-3xl: var(--bal-font-size-28);
  --bal-text-size-4xl: var(--bal-font-size-32);
  --bal-text-size-5xl: var(--bal-font-size-48);
  --bal-icon-tile-size-base: var(--bal-size-space-32);
  --bal-icon-tile-size-lg: var(--bal-size-space-48);
  --bal-icon-tile-size-xl: var(--bal-size-space-64);
  --bal-heading-1-size: var(--bal-text-size-3xl-mobile);
  --bal-heading-2-size: var(--bal-text-size-2xl-mobile);
  --bal-heading-3-size: var(--bal-text-size-xl-mobile);
  --bal-heading-4-size: var(--bal-text-size-lg-mobile);
  --bal-heading-5-size: var(--bal-text-size-base-mobile);
  --bal-heading-display1-size: var(--bal-text-size-5xl-mobile);
  --bal-heading-display2-size: var(--bal-text-size-4xl-mobile);
  --bal-label-size-3xl: var(--bal-text-size-3xl-mobile);
  --bal-label-size-2xl: var(--bal-text-size-2xl-mobile);
  --bal-label-size-xl: var(--bal-text-size-xl-mobile);
  --bal-label-size-lg: var(--bal-text-size-lg-mobile);
  --bal-label-size-md: var(--bal-text-size-md-mobile);
  --bal-label-size-base: var(--bal-text-size-base-mobile);
  --bal-label-size-sm: var(--bal-text-size-sm-mobile);
  --bal-card-space-sm: var(--bal-space-base-mobile);
  --bal-card-space-base: var(--bal-space-base-mobile);
  --bal-card-space-md: var(--bal-space-base-mobile);
  --bal-card-space-lg: var(--bal-space-base-mobile);
  /* Device tokens */
  --bal-container-space-device: var(--bal-size-space-16);
  --bal-space-none-device: var(--bal-size-space-0);
  --bal-space-auto-device: var(--bal-size-space-auto);
  --bal-space-2xs-device: var(--bal-size-space-4);
  --bal-space-xs-device: var(--bal-size-space-8);
  --bal-space-sm-device: var(--bal-size-space-12);
  --bal-space-base-device: var(--bal-size-space-16);
  --bal-space-md-device: var(--bal-size-space-20);
  --bal-space-lg-device: var(--bal-size-space-24);
  --bal-space-xl-device: var(--bal-size-space-32);
  --bal-space-2xl-device: var(--bal-size-space-48);
  --bal-space-3xl-device: var(--bal-size-space-56);
  --bal-space-4xl-device: var(--bal-size-space-64);
  --bal-text-size-none-device: var(--bal-font-size-0);
  --bal-text-size-xs-device: var(--bal-font-size-12);
  --bal-text-size-sm-device: var(--bal-font-size-14);
  --bal-text-size-base-device: var(--bal-font-size-16);
  --bal-text-size-md-device: var(--bal-font-size-16);
  --bal-text-size-lg-device: var(--bal-font-size-18);
  --bal-text-size-xl-device: var(--bal-font-size-20);
  --bal-text-size-2xl-device: var(--bal-font-size-24);
  --bal-text-size-3xl-device: var(--bal-font-size-28);
  --bal-text-size-4xl-device: var(--bal-font-size-32);
  --bal-text-size-5xl-device: var(--bal-font-size-48);
  --bal-icon-tile-size-base-device: var(--bal-size-space-32);
  --bal-icon-tile-size-lg-device: var(--bal-size-space-48);
  --bal-icon-tile-size-xl-device: var(--bal-size-space-64);
  --bal-heading-1-size-device: var(--bal-text-size-3xl-mobile);
  --bal-heading-2-size-device: var(--bal-text-size-2xl-mobile);
  --bal-heading-3-size-device: var(--bal-text-size-xl-mobile);
  --bal-heading-4-size-device: var(--bal-text-size-lg-mobile);
  --bal-heading-5-size-device: var(--bal-text-size-base-mobile);
  --bal-heading-display1-size-device: var(--bal-text-size-5xl-mobile);
  --bal-heading-display2-size-device: var(--bal-text-size-4xl-mobile);
  --bal-label-size-3xl-device: var(--bal-text-size-3xl-mobile);
  --bal-label-size-2xl-device: var(--bal-text-size-2xl-mobile);
  --bal-label-size-xl-device: var(--bal-text-size-xl-mobile);
  --bal-label-size-lg-device: var(--bal-text-size-lg-mobile);
  --bal-label-size-md-device: var(--bal-text-size-md-mobile);
  --bal-label-size-base-device: var(--bal-text-size-base-mobile);
  --bal-label-size-sm-device: var(--bal-text-size-sm-mobile);
  --bal-card-space-sm-device: var(--bal-space-base-mobile);
  --bal-card-space-base-device: var(--bal-space-base-mobile);
  --bal-card-space-md-device: var(--bal-space-base-mobile);
  --bal-card-space-lg-device: var(--bal-space-base-mobile);
}

/* Device tokens: Tablet */
@media (min-width: 769px) {
  :root {
    --bal-breakpoint-device: var(--bal-size-breakpoint-1);
    --bal-container-space-device: var(--bal-size-space-40);
    --bal-space-none-device: var(--bal-size-space-0);
    --bal-space-auto-device: var(--bal-size-space-auto);
    --bal-space-2xs-device: var(--bal-size-space-4);
    --bal-space-xs-device: var(--bal-size-space-8);
    --bal-space-sm-device: var(--bal-size-space-12);
    --bal-space-base-device: var(--bal-size-space-16);
    --bal-space-md-device: var(--bal-size-space-20);
    --bal-space-lg-device: var(--bal-size-space-24);
    --bal-space-xl-device: var(--bal-size-space-40);
    --bal-space-2xl-device: var(--bal-size-space-56);
    --bal-space-3xl-device: var(--bal-size-space-72);
    --bal-space-4xl-device: var(--bal-size-space-96);
    --bal-text-size-none-device: var(--bal-font-size-0);
    --bal-text-size-xs-device: var(--bal-font-size-12);
    --bal-text-size-sm-device: var(--bal-font-size-14);
    --bal-text-size-base-device: var(--bal-font-size-16);
    --bal-text-size-md-device: var(--bal-font-size-18);
    --bal-text-size-lg-device: var(--bal-font-size-18);
    --bal-text-size-xl-device: var(--bal-font-size-24);
    --bal-text-size-2xl-device: var(--bal-font-size-32);
    --bal-text-size-3xl-device: var(--bal-font-size-40);
    --bal-text-size-4xl-device: var(--bal-font-size-48);
    --bal-text-size-5xl-device: var(--bal-font-size-80);
    --bal-icon-tile-size-base-device: var(--bal-size-space-48);
    --bal-icon-tile-size-lg-device: var(--bal-size-space-64);
    --bal-icon-tile-size-xl-device: var(--bal-size-space-96);
    --bal-heading-1-size-device: var(--bal-text-size-3xl-tablet);
    --bal-heading-2-size-device: var(--bal-text-size-2xl-tablet);
    --bal-heading-3-size-device: var(--bal-text-size-xl-tablet);
    --bal-heading-4-size-device: var(--bal-text-size-lg-tablet);
    --bal-heading-5-size-device: var(--bal-text-size-base-tablet);
    --bal-heading-display1-size-device: var(--bal-text-size-5xl-tablet);
    --bal-heading-display2-size-device: var(--bal-text-size-4xl-tablet);
    --bal-label-size-3xl-device: var(--bal-text-size-3xl-tablet);
    --bal-label-size-2xl-device: var(--bal-text-size-2xl-tablet);
    --bal-label-size-xl-device: var(--bal-text-size-xl-tablet);
    --bal-label-size-lg-device: var(--bal-text-size-lg-tablet);
    --bal-label-size-md-device: var(--bal-text-size-md-tablet);
    --bal-label-size-base-device: var(--bal-text-size-base-tablet);
    --bal-label-size-sm-device: var(--bal-text-size-sm-tablet);
    --bal-card-space-sm-device: var(--bal-space-base-mobile);
    --bal-card-space-base-device: var(--bal-space-lg-mobile);
    --bal-card-space-md-device: var(--bal-space-lg-mobile);
    --bal-card-space-lg-device: var(--bal-space-xl-mobile);
  }
}
/* Device tokens: Desktop */
@media (min-width: 1024px) {
  :root {
    --bal-breakpoint-device: var(--bal-size-breakpoint-2);
    --bal-container-space-device: var(--bal-size-space-48);
    --bal-space-none-device: var(--bal-size-space-0);
    --bal-space-auto-device: var(--bal-size-space-auto);
    --bal-space-2xs-device: var(--bal-size-space-4);
    --bal-space-xs-device: var(--bal-size-space-8);
    --bal-space-sm-device: var(--bal-size-space-12);
    --bal-space-base-device: var(--bal-size-space-16);
    --bal-space-md-device: var(--bal-size-space-24);
    --bal-space-lg-device: var(--bal-size-space-32);
    --bal-space-xl-device: var(--bal-size-space-48);
    --bal-space-2xl-device: var(--bal-size-space-64);
    --bal-space-3xl-device: var(--bal-size-space-96);
    --bal-space-4xl-device: var(--bal-size-space-128);
    --bal-text-size-none-device: var(--bal-font-size-0);
    --bal-text-size-xs-device: var(--bal-font-size-12);
    --bal-text-size-sm-device: var(--bal-font-size-14);
    --bal-text-size-base-device: var(--bal-font-size-16);
    --bal-text-size-md-device: var(--bal-font-size-18);
    --bal-text-size-lg-device: var(--bal-font-size-18);
    --bal-text-size-xl-device: var(--bal-font-size-24);
    --bal-text-size-2xl-device: var(--bal-font-size-32);
    --bal-text-size-3xl-device: var(--bal-font-size-40);
    --bal-text-size-4xl-device: var(--bal-font-size-48);
    --bal-text-size-5xl-device: var(--bal-font-size-80);
    --bal-heading-1-size-device: var(--bal-text-size-3xl-desktop);
    --bal-heading-2-size-device: var(--bal-text-size-2xl-desktop);
    --bal-heading-3-size-device: var(--bal-text-size-xl-desktop);
    --bal-heading-4-size-device: var(--bal-text-size-lg-desktop);
    --bal-heading-5-size-device: var(--bal-text-size-base-desktop);
    --bal-heading-display1-size-device: var(--bal-text-size-5xl-desktop);
    --bal-heading-display2-size-device: var(--bal-text-size-4xl-desktop);
    --bal-label-size-3xl-device: var(--bal-text-size-3xl-desktop);
    --bal-label-size-2xl-device: var(--bal-text-size-2xl-desktop);
    --bal-label-size-xl-device: var(--bal-text-size-xl-desktop);
    --bal-label-size-lg-device: var(--bal-text-size-lg-tablet);
    --bal-label-size-md-device: var(--bal-text-size-md-desktop);
    --bal-label-size-base-device: var(--bal-text-size-base-tablet);
    --bal-label-size-sm-device: var(--bal-space-sm-desktop);
    --bal-card-space-sm-device: var(--bal-space-base-mobile);
    --bal-card-space-base-device: var(--bal-space-lg-mobile);
    --bal-card-space-md-device: var(--bal-space-xl-mobile);
    --bal-card-space-lg-device: var(--bal-space-2xl-mobile);
  }
}
:root {
  --bal-column-gap: 1rem;
}

/**
  * @deprecated Use desktop with t-shirt size breakpoints instead
  */
.table:not(:last-child), .table-container:not(:last-child) {
  margin-bottom: 0.25rem;
}

.file.is-disabled .file-label,
.file.is-disabled .file-cta {
  cursor: default !important;
  pointer-events: none !important;
}

.file {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/*! minireset.css v0.0.7 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select {
  margin: 0;
}

html {
  box-sizing: border-box;
}

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

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

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Grouping content
 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

html {
  background-color: var(--bal-body-color-background);
  font-size: var(--bal-body-text-size);
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: auto;
}

*:focus {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  touch-action: manipulation;
}

article,
aside,
figure,
footer,
header,
hgroup,
section {
  display: block;
}

body,
button,
input,
optgroup,
select,
textarea {
  font-family: var(--bal-body-family);
}

body {
  color: var(--bal-body-color);
  font-size: var(--bal-body-size);
  font-weight: var(--bal-body-weight);
  line-height: var(--bal-body-line-height);
  -webkit-overflow-scrolling: auto;
}

button {
  color: inherit;
}

p:not(.text, .title, .subtitle, .heading) {
  hyphens: auto;
  margin: 0;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p:not(.text, .title, .subtitle, .heading) strong {
  color: currentColor;
}

small {
  font-size: var(--bal-text-size-sm);
}

span {
  font-style: inherit;
  font-weight: inherit;
}

b,
strong {
  color: inherit;
  font-weight: var(--bal-text-weight-bold);
}

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

input[type=checkbox],
input[type=radio] {
  vertical-align: baseline;
}

fieldset {
  border: none;
}

@font-face {
  font-family: BaloiseCreateHeadline;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("BaloiseCreateHeadline"), local("BaloiseCreateHeadline-bold"), url("/assets/fonts/BaloiseCreateHeadline-bold.woff2") format("woff2"), url("/assets/fonts/BaloiseCreateHeadline-bold.woff") format("woff");
}
@font-face {
  font-family: BaloiseCreateHeadline;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("BaloiseCreateHeadline-light"), url("/assets/fonts/BaloiseCreateHeadline-light.woff2") format("woff2"), url("/assets/fonts/BaloiseCreateHeadline-light.woff") format("woff");
}
@font-face {
  font-family: BaloiseCreateText;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("BaloiseCreateText-bold"), url("/assets/fonts/BaloiseCreateText-bold.woff2") format("woff2"), url("/assets/fonts/BaloiseCreateText-bold.woff") format("woff");
}
@font-face {
  font-family: BaloiseCreateText;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("BaloiseCreateText"), local("BaloiseCreateText-regular"), url("/assets/fonts/BaloiseCreateText-regular.woff2") format("woff2"), url("/assets/fonts/BaloiseCreateText-regular.woff") format("woff");
}
/**
 * @prop --bal-body-background: Body background color
 * @prop --bal-body-font-family: Body font family
 * @prop --bal-body-color: Body text color
 * @prop --bal-body-font-weight: Body text weight
 * @prop --bal-body-font-size: Body font size
 * @prop --bal-body-line-height: Body line height
 * @prop --bal-divider-background: Divider background color
 * @prop --bal-focus-shadow-start-color: Focus shadow start color
 * @prop --bal-focus-shadow-end-color: Focus shadow start end
 * @prop --bal-focus-shadow: Focus shadow
 * @prop --bal-focus-shadow-inset: Focus shadow inset
 * @prop --bal-focus-shadow-inverted-start-color: Focus shadow start color
 * @prop --bal-focus-shadow-inverted-end-color: Focus shadow end color
 * @prop --bal-focus-shadow-inverted: Focus shadow on a dark background
 * @prop --bal-focus-shadow-inverted-inset: Focus shadow on a dark background inset
 * @prop --bal-small-font-size: TBD
 * @prop --bal-strong-color: TBD
 * @prop --bal-strong-font-weight: TBD
 */
/**
 * @prop --bal-form-field-control-font-size: TBD
 * @prop --bal-form-field-control-font-family: TBD
 * @prop --bal-form-field-control-color: TBD
 * @prop --bal-form-field-control-placeholder-color: TBD
 * @prop --bal-form-field-control-radius: TBD
 * @prop --bal-form-field-control-background: TBD
 * @prop --bal-form-field-control-background-hover: TBD
 * @prop --bal-form-field-control-background-active: TBD
 * @prop --bal-form-field-control-border-width: TBD
 * @prop --bal-form-field-control-border-style: TBD
 * @prop --bal-form-field-control-border-color: TBD
 * @prop --bal-form-field-control-border-color-hover: TBD
 * @prop --bal-form-field-control-border-color-active: TBD
 * @prop --bal-form-field-control-success-background: TBD
 * @prop --bal-form-field-control-success-background-hover: TBD
 * @prop --bal-form-field-control-success-background-active: TBD
 * @prop --bal-form-field-control-success-border-color: TBD
 * @prop --bal-form-field-control-success-border-color-hover: TBD
 * @prop --bal-form-field-control-success-border-color-active: TBD
 * @prop --bal-form-field-control-danger-background: TBD
 * @prop --bal-form-field-control-danger-background-hover: TBD
 * @prop --bal-form-field-control-danger-background-active: TBD
 * @prop --bal-form-field-control-danger-border-color: TBD
 * @prop --bal-form-field-control-danger-border-color-hover: TBD
 * @prop --bal-form-field-control-danger-border-color-active: TBD
 * @prop --bal-form-field-control-disabled-color: TBD
 * @prop --bal-form-field-control-disabled-background: TBD
 * @prop --bal-form-field-control-disabled-border-color: TBD
 * @prop --bal-form-field-label-font-size: TBD
 * @prop --bal-form-field-label-line-height: TBD
 * @prop --bal-form-field-label-font-weight: TBD
 * @prop --bal-form-field-label-font-family: TBD
 * @prop --bal-form-field-label-margin-bottom: TBD
 * @prop --bal-form-field-label-color-hover: TBD
 * @prop --bal-form-field-label-color-active: TBD
 * @prop --bal-form-field-label-success-color: TBD
 * @prop --bal-form-field-label-danger-color: TBD
 * @prop --bal-form-field-label-danger-color-hover: TBD
 * @prop --bal-form-field-label-danger-color-active: TBD
 * @prop --bal-form-field-label-disabled-color TBD
 * @prop --bal-form-field-message-font-size: TBD
 * @prop --bal-form-field-message-font-weight: TBD
 * @prop --bal-form-field-message-color: TBD
 * @prop --bal-form-field-message-color-hover: TBD
 * @prop --bal-form-field-message-color-active: TBD
 * @prop --bal-form-field-message-font-weight: TBD
 * @prop --bal-form-field-message-success-color: TBD
 * @prop --bal-form-field-message-danger-color: TBD
 * @prop --bal-form-field-message-disabled-color: TBD
 * @prop --bal-form-field-icon-color: TBD
 * @prop --bal-form-field-icon-color-hover: TBD
 * @prop --bal-form-field-icon-color-active: TBD
 * @prop --bal-form-field-icon-success-color: TBD
 * @prop --bal-form-field-icon-danger-color: TBD
 * @prop --bal-form-field-icon-disabled-color: TBD
 * @prop --bal-file-label-color: TBD
 * @prop --bal-file-label-color-hover: TBD
 * @prop --bal-file-label-color-active: TBD
 * @prop --bal-file-border-style: TBD
 * @prop --bal-file-label-disabled-color: TBD
 */
:root {
  --bal-form-field-control-font-size: var(--bal-text-size-base);
  --bal-form-field-control-font-family: var(--bal-font-family-text);
  --bal-form-field-control-color: var(--bal-color-text-primary);
  --bal-form-field-control-placeholder-color: var(--bal-color-text-primary-light);
  --bal-form-field-control-radius: var(--bal-radius-base);
  --bal-form-field-control-background: var(--bal-color-white);
  --bal-form-field-control-background-hover: var(--bal-color-grey-1);
  --bal-form-field-control-background-active: var(--bal-color-grey-1);
  --bal-form-field-control-border-width: var(--bal-border-width-base);
  --bal-form-field-control-border-style: solid;
  --bal-form-field-control-border-color: var(--bal-color-border-base);
  --bal-form-field-control-border-color-hover: var(--bal-form-field-control-border-color);
  --bal-form-field-control-border-color-active: var(--bal-color-border-primary-base);
  --bal-form-field-control-success-background: var(--bal-color-success-1);
  --bal-form-field-control-success-background-hover: var(--bal-color-success-1);
  --bal-form-field-control-success-background-active: var(--bal-color-success-1);
  --bal-form-field-control-success-border-color: var(--bal-color-border-success-base);
  --bal-form-field-control-success-border-color-hover: var(--bal-form-field-control-border-color);
  --bal-form-field-control-success-border-color-active: var(--bal-color-border-primary-base);
  --bal-form-field-control-danger-background: var(--bal-color-danger-1);
  --bal-form-field-control-danger-background-hover: var(--bal-color-danger-1);
  --bal-form-field-control-danger-background-active: var(--bal-color-danger-1);
  --bal-form-field-control-danger-border-color: var(--bal-color-border-danger-base);
  --bal-form-field-control-danger-border-color-hover: var(--bal-form-field-control-border-color);
  --bal-form-field-control-danger-border-color-active: var(--bal-color-border-primary-base);
  --bal-form-field-control-disabled-color: var(--bal-color-text-grey-dark);
  --bal-form-field-control-disabled-background: var(--bal-color-grey-2);
  --bal-form-field-control-disabled-border-color: var(--bal-color-border-grey-dark);
  --bal-form-field-label-font-size: var(--bal-text-size-sm);
  --bal-form-field-label-line-height: var(--bal-line-height-small);
  --bal-form-field-label-font-weight: var(--bal-text-weight-bold);
  --bal-form-field-label-font-family: var(--bal-font-family-text);
  --bal-form-field-label-margin-bottom: 0.25rem;
  --bal-form-field-label-color-hover: var(--bal-link-color-text-primary-hover);
  --bal-form-field-label-color-active: var(--bal-link-color-text-primary-active);
  --bal-form-field-label-success-color: var(--bal-color-text-success);
  --bal-form-field-label-danger-color: var(--bal-color-text-danger);
  --bal-form-field-label-danger-color-hover: var(--bal-color-text-danger-hover);
  --bal-form-field-label-danger-color-active: var(--bal-color-text-danger-active);
  --bal-form-field-label-disabled-color: var(--bal-color-text-grey);
  --bal-form-field-message-font-size: var(--bal-text-size-xs);
  --bal-form-field-message-font-weight: var(--bal-text-weight-regular);
  --bal-form-field-message-color: var(--bal-color-text-primary-light);
  --bal-form-field-message-color-hover: var(--bal-link-color-text-primary-hover);
  --bal-form-field-message-color-active: var(--bal-link-color-text-primary-active);
  --bal-form-field-message-font-weight: var(--bal-text-weight-regular);
  --bal-form-field-message-success-color: var(--bal-color-text-success);
  --bal-form-field-message-danger-color: var(--bal-color-text-danger);
  --bal-form-field-message-disabled-color: var(--bal-color-text-grey);
  --bal-form-field-icon-color: var(--bal-link-color-text-primary-base);
  --bal-form-field-icon-color-hover: var(--bal-link-color-text-primary-hover);
  --bal-form-field-icon-color-active: var(--bal-link-color-text-primary-active);
  --bal-form-field-icon-success-color: var(--bal-color-text-success);
  --bal-form-field-icon-danger-color: var(--bal-color-text-danger);
  --bal-form-field-icon-disabled-color: var(--bal-color-text-grey);
  --bal-file-label-color: var(--bal-link-color-text-primary-base);
  --bal-file-label-color-hover: var(--bal-link-color-text-primary-hover);
  --bal-file-label-color-active: var(--bal-link-color-text-primary-active);
  --bal-file-border-style: dashed;
  --bal-file-label-disabled-color: var(--bal-color-text-grey-dark);
}

/**
 * @prop --bal-list-marker-color: Color of the list marker symbol
 * @prop --bal-list-marker-inverted-color: Color of the list marker symbol on a dark background
 * @prop --bal-list-bullet-radius: Radius of the custom bullet
 * @prop --bal-list-bullet-background: Background color of the custom bullet
 * @prop --bal-list-bullet-background-green: Green background color of the custom bullet
 * @prop --bal-list-bullet-background-red: Red background color of the custom bullet
 * @prop --bal-list-bullet-background-yellow: Yellow background color of the custom bullet
 * @prop --bal-list-bullet-background-purple: Purple background color of the custom bullet
 */
:root {
  --bal-list-marker-color: var(--bal-color-brand-primary-base);
  --bal-list-marker-inverted-color: var(--bal-color-white);
  --bal-list-bullet-radius: var(--bal-radius-rounded);
  --bal-list-bullet-background: var(--bal-color-green-3);
  --bal-list-bullet-background-green: var(--bal-color-green-3);
  --bal-list-bullet-background-red: var(--bal-color-red-3);
  --bal-list-bullet-background-yellow: var(--bal-color-yellow-3);
  --bal-list-bullet-background-purple: var(--bal-color-purple-3);
  --bal-description-list-grid-term: 1fr;
  --bal-description-list-grid-detail: 1fr;
  --bal-description-list-row-gap: var(--bal-space-2xs);
  --bal-description-list-column-gap: var(--bal-space-base);
  --bal-description-list-term-color: var(--bal-color-text-primary-light);
  --bal-description-list-term-font-weight: var(--bal-text-weight-regular);
  --bal-description-list-detail-color: var(--bal-color-text-primary);
  --bal-description-list-detail-font-weight: var(--bal-text-weight-regular);
}

/**
 * @prop --bal-table-color: Tables default font color
 * @prop --bal-table-background-color: Tables default background color
 * @prop --bal-table-body-background-color: Table body background
 * @prop --bal-table-cell-border: Table cell border
 * @prop --bal-table-cell-border-width: Table cell border width
 * @prop --bal-table-cell-padding: Table cell padding
 * @prop --bal-table-cell-heading-color: Table cell heading color
 * @prop --bal-table-head-cell-border-width: Table head cell border width
 * @prop --bal-table-head-cell-border-color: Table head cell border color
 * @prop --bal-table-head-cell-color: Table head cell color
 * @prop --bal-table-head-background-color: Table head cell background
 * @prop --bal-table-head-font-size:  Table head cell font size backgound
 * @prop --bal-table-head-font-family: Table head cell font family
 * @prop --bal-table-foot-cell-border-width: Table foot cell border width
 * @prop --bal-table-foot-cell-color: Table foot cell color
 * @prop --bal-table-foot-background-color: Table foot cell background
 * @prop --bal-table-row-background-color-hover: Table row hover background
 * @prop --bal-table-row-background-color-active: Table row pressed background
 * @prop --bal-table-row-color-active: Table row pressed font color
 * @prop --bal-table-striped-row-even-background-color: Table row striped background
 * @prop --bal-table-striped-row-even-background-color-hover: Table row striped background on hover
 */
:root {
  --bal-table-color: var(--bal-color-primary-5);
  --bal-table-background-color: var(--bal-color-white);
  --bal-table-body-background-color: transparent;
  --bal-table-cell-border-color: var(--bal-border-color-base);
  --bal-table-cell-border: 2px solid var(--bal-table-cell-border-color);
  --bal-table-cell-border-width: 0 0 2px;
  --bal-table-cell-padding: 0.5em 0.75em;
  --bal-table-cell-heading-color: var(--bal-color-primary-5);
  --bal-table-head-cell-border-width: 0 0 1px;
  --bal-table-head-cell-border-color: var(--bal-color-primary-5);
  --bal-table-head-cell-color: var(--bal-color-primary-5);
  --bal-table-head-background-color: transparent;
  --bal-table-head-font-size: var(--bal-text-size-base);
  --bal-table-head-font-family: var(--bal-font-family-title);
  --bal-table-foot-cell-border-width: 0 0 0;
  --bal-table-foot-cell-color: var(--bal-color-primary-5);
  --bal-table-foot-background-color: transparent;
  --bal-table-row-background-color-hover: var(--bal-color-grey-2);
  --bal-table-row-background-color-active: var(--bal-color-primary-1);
  --bal-table-row-color-active: var(--bal-color-primary-5);
  --bal-table-striped-row-even-background-color: var(--bal-color-grey-1);
  --bal-table-striped-row-even-background-color-hover: var(--bal-color-grey-2);
}

.select select, .input, .textarea {
  justify-content: flex-start;
  background-color: var(--bal-form-field-control-background);
  border-color: var(--bal-form-field-control-border-color);
  border-style: var(--bal-form-field-control-border-style);
  border-radius: var(--bal-form-field-control-radius);
  color: var(--bal-form-field-control-color);
}
.select select::-moz-placeholder, .input::-moz-placeholder, .textarea::-moz-placeholder {
  color: var(--bal-form-field-control-placeholder-color);
}
.select select::-webkit-input-placeholder, .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder {
  color: var(--bal-form-field-control-placeholder-color);
}
.select select:-moz-placeholder, .input:-moz-placeholder, .textarea:-moz-placeholder {
  color: var(--bal-form-field-control-placeholder-color);
}
.select select:-ms-input-placeholder, .input:-ms-input-placeholder, .textarea:-ms-input-placeholder {
  color: var(--bal-form-field-control-placeholder-color);
}
@media (hover: hover) and (pointer: fine) {
  .select select:hover, .input:hover, .textarea:hover, .select select.is-hovered, .is-hovered.input, .is-hovered.textarea {
    border-color: var(--bal-form-field-control-border-color-hover);
    background-color: var(--bal-form-field-control-background-hover);
  }
}
.select select.bal-focused, .bal-focused.input, .bal-focused.textarea, .select select:focus, .input:focus, .textarea:focus, .select select.is-focused, .is-focused.input, .is-focused.textarea, .select select:active, .input:active, .textarea:active, .select select.is-active, .is-active.input, .is-active.textarea {
  border-color: var(--bal-form-field-control-border-color-active);
  background-color: var(--bal-form-field-control-background-active);
}
.select select[disabled], [disabled].input, [disabled].textarea, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .input, fieldset[disabled] .textarea {
  background-color: var(--bal-form-field-control-disabled-background);
  border-color: var(--bal-form-field-control-disabled-border-color);
  box-shadow: none;
  color: var(--bal-form-field-control-disabled-color);
}
.select select[disabled]::-moz-placeholder, [disabled].input::-moz-placeholder, [disabled].textarea::-moz-placeholder, fieldset[disabled] .select select::-moz-placeholder, .select fieldset[disabled] select::-moz-placeholder, fieldset[disabled] .input::-moz-placeholder, fieldset[disabled] .textarea::-moz-placeholder {
  color: var(--bal-form-field-control-disabled-color);
}
.select select[disabled]::-webkit-input-placeholder, [disabled].input::-webkit-input-placeholder, [disabled].textarea::-webkit-input-placeholder, fieldset[disabled] .select select::-webkit-input-placeholder, .select fieldset[disabled] select::-webkit-input-placeholder, fieldset[disabled] .input::-webkit-input-placeholder, fieldset[disabled] .textarea::-webkit-input-placeholder {
  color: var(--bal-form-field-control-disabled-color);
}
.select select[disabled]:-moz-placeholder, [disabled].input:-moz-placeholder, [disabled].textarea:-moz-placeholder, fieldset[disabled] .select select:-moz-placeholder, .select fieldset[disabled] select:-moz-placeholder, fieldset[disabled] .input:-moz-placeholder, fieldset[disabled] .textarea:-moz-placeholder {
  color: var(--bal-form-field-control-disabled-color);
}
.select select[disabled]:-ms-input-placeholder, [disabled].input:-ms-input-placeholder, [disabled].textarea:-ms-input-placeholder, fieldset[disabled] .select select:-ms-input-placeholder, .select fieldset[disabled] select:-ms-input-placeholder, fieldset[disabled] .input:-ms-input-placeholder, fieldset[disabled] .textarea:-ms-input-placeholder {
  color: var(--bal-form-field-control-disabled-color);
}

.file-cta, .select select, .input, .textarea {
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  align-items: center;
  border-width: var(--bal-border-width-base);
  border-color: var(--bal-color-border-base);
  border-radius: var(--bal-radius-base);
  box-shadow: none;
  display: inline-flex;
  font-size: var(--bal-text-size-base);
  min-height: 3rem;
  height: 3rem;
  line-height: 1.5;
  padding-left: calc(0.75em - var(--bal-border-width-base));
  padding-right: calc(0.75em - var(--bal-border-width-base));
  position: relative;
  vertical-align: top;
}
.file-cta:focus, .select select:focus, .input:focus, .textarea:focus, .is-focused.file-cta, .select select.is-focused, .is-focused.input, .is-focused.textarea, .file-cta:active, .select select:active, .input:active, .textarea:active, .is-active.file-cta, .select select.is-active, .is-active.input, .is-active.textarea {
  outline: none;
}
[disabled].file-cta, .select select[disabled], [disabled].input, [disabled].textarea, fieldset[disabled] .file-cta, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .input, fieldset[disabled] .textarea {
  cursor: default;
}

.textarea, .input {
  max-width: 100%;
  width: 100%;
}
[readonly].textarea, [readonly].input {
  box-shadow: none;
}
.is-fullwidth.textarea, .is-fullwidth.input {
  display: block;
  width: 100%;
}
.is-inline.textarea, .is-inline.input {
  display: inline;
  width: auto;
}

.textarea {
  display: block;
  max-width: 100%;
  min-width: 100%;
  resize: vertical;
  padding: calc(0.75em - 2px);
}
.textarea:not([rows]) {
  max-height: 40em;
  min-height: 8em;
}
.textarea[rows] {
  height: initial;
}
.textarea.has-fixed-size {
  resize: none;
}

input.input,
textarea.textarea {
  border-width: 2px;
  border-radius: var(--bal-form-field-control-radius);
  font-size: var(--bal-form-field-control-font-size);
  font-family: var(--bal-form-field-control-font-family);
  color: var(--bal-form-field-control-color);
  outline: none;
  box-shadow: none;
}
input.input.is-danger,
textarea.textarea.is-danger {
  border-color: var(--bal-form-field-control-danger-border-color);
  background: var(--bal-form-field-control-danger-background);
}
input.input.is-danger.bal-focused, input.input.is-danger:focus, input.input.is-danger.is-focused, input.input.is-danger:active, input.input.is-danger.is-active,
textarea.textarea.is-danger.bal-focused,
textarea.textarea.is-danger:focus,
textarea.textarea.is-danger.is-focused,
textarea.textarea.is-danger:active,
textarea.textarea.is-danger.is-active {
  border-color: var(--bal-form-field-control-border-color-active);
}
input.input.is-success,
textarea.textarea.is-success {
  border-color: var(--bal-form-field-control-success-border-color);
  background: var(--bal-form-field-control-success-background);
}
input.input.is-success.bal-focused, input.input.is-success:focus, input.input.is-success.is-focused, input.input.is-success:active, input.input.is-success.is-active,
textarea.textarea.is-success.bal-focused,
textarea.textarea.is-success:focus,
textarea.textarea.is-success.is-focused,
textarea.textarea.is-success:active,
textarea.textarea.is-success.is-active {
  border-color: var(--bal-form-field-control-border-color-active);
}
input.input.is-warning,
textarea.textarea.is-warning {
  border-color: var(--bal-color-border-warning-base);
  background: var(--bal-color-warning-1);
}
input.input.is-warning.bal-focused, input.input.is-warning:focus, input.input.is-warning.is-focused, input.input.is-warning:active, input.input.is-warning.is-active,
textarea.textarea.is-warning.bal-focused,
textarea.textarea.is-warning:focus,
textarea.textarea.is-warning.is-focused,
textarea.textarea.is-warning:active,
textarea.textarea.is-warning.is-active {
  border-color: var(--bal-form-field-control-border-color-active);
}
input.input.is-disabled,
textarea.textarea.is-disabled {
  color: var(--bal-form-field-control-disabled-color);
  border-color: var(--bal-form-field-control-disabled-border-color);
  background: var(--bal-form-field-control-disabled-background);
}

input.is-grouped {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.select {
  display: inline-block;
  max-width: 100%;
  width: 100%;
  position: relative;
  vertical-align: top;
}
.select:not(.is-multiple) {
  height: 3rem;
}
.select:not(.is-multiple):not(.is-loading)::after {
  border: 3px solid var(--bal-form-field-icon-color);
  border-radius: 2px;
  border-right: 0;
  border-top: 0;
  content: " ";
  display: block;
  height: 0.625em;
  margin-top: -0.4rem;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: rotate(-45deg);
  transform-origin: center;
  width: 0.625em;
  right: 1.125em;
  z-index: 4;
}
.select select {
  cursor: pointer;
  display: block;
  font-size: 1em;
  max-width: 100%;
  width: 100%;
  outline: none;
  border-radius: var(--bal-form-field-control-radius);
}
.select select::-ms-expand {
  display: none;
}
.select select[disabled]:hover, fieldset[disabled] .select select:hover {
  border-color: var(--bal-form-field-control-disabled-border-color);
}
.select select:not([multiple]) {
  padding-right: 2.5em;
}
.select select[multiple] {
  height: auto;
  padding: 0;
}
.select select[multiple] option {
  padding: 0.5em 1em;
}
.select:not(.is-multiple):not(.is-loading):hover::after {
  border-color: var(--bal-form-field-label-color-hover);
}
.select:not(.is-multiple):not(.is-loading):active::after {
  border-color: var(--bal-form-field-label-color-active);
}
.select.is-disabled::after {
  border-color: var(--bal-form-field-control-disabled-border-color) !important;
}
.select.is-success select {
  border-color: var(--bal-form-field-control-success-border-color);
  background: var(--bal-form-field-control-success-background);
}
.select.is-success select.bal-focused, .select.is-success select:focus, .select.is-success select.is-focused, .select.is-success select:active, .select.is-success select.is-active {
  border-color: var(--bal-form-field-control-success-border-color-active);
}
.select.is-success::after {
  border-color: var(--bal-form-field-control-success-border-color) !important;
}
.select.is-success:focus::after, .select.is-success:active::after, .select.is-success:focus-within::after {
  border-color: var(--bal-form-field-control-success-border-color-active) !important;
}
.select.is-danger select {
  border-color: var(--bal-form-field-control-danger-border-color);
  background: var(--bal-form-field-control-danger-background);
}
.select.is-danger select.bal-focused, .select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active {
  border-color: var(--bal-form-field-control-danger-border-color-active);
}
.select.is-danger::after {
  border-color: var(--bal-form-field-control-danger-border-color) !important;
}
.select.is-danger:focus::after, .select.is-danger:active::after, .select.is-danger:focus-within::after {
  border-color: var(--bal-form-field-control-danger-border-color-active) !important;
}
.select.is-warning select {
  border-color: var(--bal-color-border-warning-base);
  background: var(--bal-color-warning-1);
}
.select.is-warning select.bal-focused, .select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active {
  border-color: var(--bal-color-border-primary);
}
.select.is-warning::after {
  border-color: var(--bal-color-border-warning-base) !important;
}
.select.is-warning:focus::after, .select.is-warning:active::after, .select.is-warning:focus-within::after {
  border-color: var(--bal-color-border-primary) !important;
}
.select.is-fullwidth {
  width: 100%;
}
.select.is-fullwidth select {
  width: 100%;
}

.file {
  align-items: stretch;
  display: flex;
  justify-content: flex-start;
  position: relative;
  width: 100%;
  font-size: var(--bal-form-field-control-font-size);
  justify-content: center;
}
.file .file-label {
  width: 100%;
  flex-direction: column;
}
.file .file-cta {
  flex-direction: column;
  height: auto;
  padding: 1em 3em;
}
.file .file-icon {
  height: 1.5em;
  width: 1.5em;
}

.file-label {
  align-items: stretch;
  display: flex;
  cursor: pointer;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
  gap: 0.5rem;
  font-weight: var(--bal-form-field-label-font-weight);
  color: var(--bal-form-field-label-color);
  text-align: center;
  hyphens: auto;
}
.file-label:hover .file-cta,
.file-label:hover .file-label {
  color: var(--bal-form-field-label-color-hover);
}
.file-label:hover .file-cta {
  background-color: var(--bal-form-field-control-background-hover);
  border-color: var(--bal-form-field-control-border-color-hover);
}
.file-label:active .file-cta,
.file-label:active .file-label, .file-label:focus-within .file-cta,
.file-label:focus-within .file-label {
  color: var(--bal-form-field-label-color-active);
}
.file-label:active .file-cta, .file-label:focus-within .file-cta {
  background-color: var(--bal-form-field-control-background-active);
  border-color: var(--bal-form-field-control-border-color-active);
}

.file-input {
  height: 100%;
  left: 0;
  opacity: 0;
  outline: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.file-cta {
  justify-content: flex-start;
  border-style: var(--bal-file-border-style);
  border-color: var(--bal-form-field-control-border-color);
  border-radius: var(--bal-form-field-control-radius);
  background: var(--bal-form-field-control-background);
  font-size: 1em;
  padding-left: 1em;
  padding-right: 1em;
  white-space: nowrap;
  gap: 0.5rem;
}

.file-cta {
  background-color: var(--bal-form-field-control-background);
  color: var(--bal-form-field-control-color);
}

.file-icon {
  align-items: center;
  display: flex;
  height: 1em;
  justify-content: center;
  margin-right: 0.5em;
  width: 1em;
}

.file.is-success .file-label,
.file.is-success .file-cta {
  color: var(--bal-form-field-label-success-color);
}
.file.is-success .file-cta {
  border-color: var(--bal-form-field-control-success-border-color);
  background: var(--bal-form-field-control-success-background);
}
.file.is-success .file-label:active .file-cta, .file.is-success .file-label:focus-within .file-cta {
  border-color: var(--bal-form-field-control-border-color-active);
  color: var(--bal-link-color-text-primary-active);
}
.file.is-success .file-label:active .file-cta .file-label, .file.is-success .file-label:focus-within .file-cta .file-label {
  color: var(--bal-link-color-text-primary-active);
}

.file.is-danger .file-label,
.file.is-danger .file-cta {
  color: var(--bal-form-field-label-danger-color);
}
.file.is-danger .file-cta {
  border-color: var(--bal-form-field-control-danger-border-color);
  background: var(--bal-form-field-control-danger-background);
}
.file.is-danger .file-label:active .file-cta, .file.is-danger .file-label:focus-within .file-cta {
  border-color: var(--bal-form-field-control-border-color-active);
  color: var(--bal-link-color-text-primary-active);
}
.file.is-danger .file-label:active .file-cta .file-label, .file.is-danger .file-label:focus-within .file-cta .file-label {
  color: var(--bal-link-color-text-primary-active);
}

.file.is-warning .file-label,
.file.is-warning .file-cta {
  color: var(--bal-color-text-warning);
}
.file.is-warning .file-cta {
  border-color: var(--bal-color-border-warning-base);
  background: var(--bal-color-warning-1);
}
.file.is-warning .file-label:active .file-cta, .file.is-warning .file-label:focus-within .file-cta {
  border-color: var(--bal-form-field-control-border-color-active);
  color: var(--bal-link-color-text-primary-active);
}
.file.is-warning .file-label:active .file-cta .file-label, .file.is-warning .file-label:focus-within .file-cta .file-label {
  color: var(--bal-link-color-text-primary-active);
}

.file.is-disabled .file-label,
.file.is-disabled .file-cta {
  color: var(--bal-file-label-disabled-color);
}
.file.is-disabled .file-cta {
  border-color: var(--bal-form-field-control-disabled-border-color);
  background: var(--bal-form-field-control-disabled-background);
}

@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.help {
  display: block;
  margin-top: -2px;
  color: var(--bal-form-field-message-color);
  font-size: var(--bal-form-field-message-font-size);
  font-weight: var(--bal-form-field-message-font-weight);
  hyphens: auto;
}
.help.is-danger {
  color: var(--bal-form-field-message-danger-color);
}
.help.is-success {
  color: var(--bal-form-field-message-success-color);
}
.help.is-warning {
  color: var(--bal-color-text-warning);
}
.help.is-disabled {
  color: var(--bal-form-field-message-disabled-color);
}

.field:not(:last-child) {
  margin-bottom: 0.25rem;
}
.field.has-addons {
  display: flex;
  justify-content: flex-start;
}
.field.has-addons .control:not(:last-child) {
  margin-right: -1px;
}
.field.has-addons .control:not(:first-child):not(:last-child) .button,
.field.has-addons .control:not(:first-child):not(:last-child) .input,
.field.has-addons .control:not(:first-child):not(:last-child) .select select {
  border-radius: 0;
}
.field.has-addons .control:first-child:not(:only-child) .button,
.field.has-addons .control:first-child:not(:only-child) .input,
.field.has-addons .control:first-child:not(:only-child) .select select {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.field.has-addons .control:last-child:not(:only-child) .button,
.field.has-addons .control:last-child:not(:only-child) .input,
.field.has-addons .control:last-child:not(:only-child) .select select {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.field.has-addons .control .button:not([disabled]):hover, .field.has-addons .control .button:not([disabled]).is-hovered,
.field.has-addons .control .input:not([disabled]):hover,
.field.has-addons .control .input:not([disabled]).is-hovered,
.field.has-addons .control .select select:not([disabled]):hover,
.field.has-addons .control .select select:not([disabled]).is-hovered {
  z-index: 2;
}
.field.has-addons .control .button:not([disabled]):focus, .field.has-addons .control .button:not([disabled]).is-focused, .field.has-addons .control .button:not([disabled]):active, .field.has-addons .control .button:not([disabled]).is-active,
.field.has-addons .control .input:not([disabled]):focus,
.field.has-addons .control .input:not([disabled]).is-focused,
.field.has-addons .control .input:not([disabled]):active,
.field.has-addons .control .input:not([disabled]).is-active,
.field.has-addons .control .select select:not([disabled]):focus,
.field.has-addons .control .select select:not([disabled]).is-focused,
.field.has-addons .control .select select:not([disabled]):active,
.field.has-addons .control .select select:not([disabled]).is-active {
  z-index: 3;
}
.field.has-addons .control .button:not([disabled]):focus:hover, .field.has-addons .control .button:not([disabled]).is-focused:hover, .field.has-addons .control .button:not([disabled]):active:hover, .field.has-addons .control .button:not([disabled]).is-active:hover,
.field.has-addons .control .input:not([disabled]):focus:hover,
.field.has-addons .control .input:not([disabled]).is-focused:hover,
.field.has-addons .control .input:not([disabled]):active:hover,
.field.has-addons .control .input:not([disabled]).is-active:hover,
.field.has-addons .control .select select:not([disabled]):focus:hover,
.field.has-addons .control .select select:not([disabled]).is-focused:hover,
.field.has-addons .control .select select:not([disabled]):active:hover,
.field.has-addons .control .select select:not([disabled]).is-active:hover {
  z-index: 4;
}
.field.has-addons .control.is-expanded {
  flex-grow: 1;
  flex-shrink: 1;
}
.field.has-addons.has-addons-centered {
  justify-content: center;
}
.field.has-addons.has-addons-right {
  justify-content: flex-end;
}
.field.has-addons.has-addons-fullwidth .control {
  flex-grow: 1;
  flex-shrink: 0;
}
.field.is-grouped {
  display: flex;
  justify-content: flex-start;
}
.field.is-grouped > .control:not(:last-child) {
  margin-bottom: 0;
}
.field.is-grouped > .control.is-expanded {
  flex-grow: 1;
  flex-shrink: 1;
}
.field.is-grouped.is-grouped-centered {
  justify-content: center;
}
.field.is-grouped.is-grouped-right {
  justify-content: flex-end;
}
.field.is-grouped.is-grouped-multiline {
  flex-wrap: wrap;
}
.field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) {
  margin-bottom: 0.75rem;
}
.field.is-grouped.is-grouped-multiline:last-child {
  margin-bottom: -0.75rem;
}
.field.is-grouped.is-grouped-multiline:not(:last-child) {
  margin-bottom: 0;
}
@media screen and (min-width: 769px) {
  .field.is-horizontal {
    display: flex;
  }
}

.field-label .label {
  font-size: inherit;
}
@media screen and (max-width: 768px) {
  .field-label {
    margin-bottom: 0.5rem;
  }
}
@media screen and (min-width: 769px) {
  .field-label {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
    margin-right: 1.5rem;
    text-align: right;
  }
  .field-label.is-small {
    font-size: var(--bal-text-size-sm);
    padding-top: 0.375em;
  }
  .field-label.is-normal {
    padding-top: 0.375em;
  }
}

.field-body .field .field {
  margin-bottom: 0;
}
@media screen and (min-width: 769px) {
  .field-body {
    display: flex;
    flex-basis: 0;
    flex-grow: 5;
    flex-shrink: 1;
  }
  .field-body .field {
    margin-bottom: 0;
  }
  .field-body > .field {
    flex-shrink: 1;
  }
  .field-body > .field:not(.is-narrow) {
    flex-grow: 1;
  }
  .field-body > .field:not(:last-child) {
    margin-right: 0.75rem;
  }
}

.control {
  box-sizing: border-box;
  clear: both;
  font-size: var(--bal-form-field-control-font-size);
  position: relative;
  text-align: inherit;
}
.control.is-loading::after {
  animation: spinAround 500ms infinite linear;
  border: 2px solid var(--bal-form-field-control-border-color-active);
  border-radius: var(--bal-radius-rounded);
  border-right-color: transparent;
  border-top-color: transparent;
  content: "";
  display: block;
  height: 1.125em;
  width: 1.125em;
  position: absolute !important;
  right: 0.875rem;
  top: 0.875rem;
  z-index: 4;
}

.control.has-icons-right::after {
  right: 2.3rem;
}

.field.is-grouped {
  gap: calc(var(--bal-column-gap) / 2);
}

.field.has-direction-row.is-grouped {
  flex-direction: row;
}

.field.has-direction-column.is-grouped {
  flex-direction: column;
  width: -moz-fit-content;
  width: fit-content;
}
.field.has-direction-column.is-grouped .button {
  width: 100%;
}
.field.has-direction-column.is-grouped .bal-button {
  margin: 0 !important;
}

@media screen and (max-width: 768px) {
  .field.has-direction-auto.is-grouped {
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
  }
  .field.has-direction-auto.is-grouped .control {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 100%;
    margin-right: 0 !important;
  }
  .field.has-direction-auto.is-grouped .control .button {
    min-width: 100%;
  }
  .field.has-direction-auto.is-grouped.is-reverse {
    flex-direction: column-reverse;
  }
}
.container {
  flex-grow: 1;
  margin: 0 auto;
  position: relative;
  width: auto;
  padding-left: var(--bal-container-space-device);
  padding-right: var(--bal-container-space-device);
}
@media screen and (min-width: 1024px) {
  .container {
    max-width: var(--bal-container-width-normal);
  }
}
.container.is-fluid {
  max-width: var(--bal-container-width-fluid) !important;
}
.container.is-compact {
  max-width: var(--bal-container-width-compact) !important;
}

.grid {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.col {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: var(--bal-column-gap);
}
.grid.is-mobile > .col.is-narrow {
  flex: none;
  width: unset;
}
.grid.is-mobile > .col.is-full {
  flex: none;
  width: 100%;
}
.grid.is-mobile > .col.is-three-quarters {
  flex: none;
  width: 75%;
}
.grid.is-mobile > .col.is-two-thirds {
  flex: none;
  width: 66.6666%;
}
.grid.is-mobile > .col.is-half {
  flex: none;
  width: 50%;
}
.grid.is-mobile > .col.is-one-third {
  flex: none;
  width: 33.3333%;
}
.grid.is-mobile > .col.is-one-quarter {
  flex: none;
  width: 25%;
}
.grid.is-mobile > .col.is-one-fifth {
  flex: none;
  width: 20%;
}
.grid.is-mobile > .col.is-two-fifths {
  flex: none;
  width: 40%;
}
.grid.is-mobile > .col.is-three-fifths {
  flex: none;
  width: 60%;
}
.grid.is-mobile > .col.is-four-fifths {
  flex: none;
  width: 80%;
}
.grid.is-mobile > .col.is-offset-three-quarters {
  margin-left: 75%;
}
.grid.is-mobile > .col.is-offset-two-thirds {
  margin-left: 66.6666%;
}
.grid.is-mobile > .col.is-offset-half {
  margin-left: 50%;
}
.grid.is-mobile > .col.is-offset-one-third {
  margin-left: 33.3333%;
}
.grid.is-mobile > .col.is-offset-one-quarter {
  margin-left: 25%;
}
.grid.is-mobile > .col.is-offset-one-fifth {
  margin-left: 20%;
}
.grid.is-mobile > .col.is-offset-two-fifths {
  margin-left: 40%;
}
.grid.is-mobile > .col.is-offset-three-fifths {
  margin-left: 60%;
}
.grid.is-mobile > .col.is-offset-four-fifths {
  margin-left: 80%;
}
.grid.is-mobile > .col.is-0 {
  flex: none;
  width: 0%;
}
.grid.is-mobile > .col.is-offset-0 {
  margin-left: 0%;
}
.grid.is-mobile > .col.is-1 {
  flex: none;
  width: 8.3333333333%;
}
.grid.is-mobile > .col.is-offset-1 {
  margin-left: 8.3333333333%;
}
.grid.is-mobile > .col.is-2 {
  flex: none;
  width: 16.6666666667%;
}
.grid.is-mobile > .col.is-offset-2 {
  margin-left: 16.6666666667%;
}
.grid.is-mobile > .col.is-3 {
  flex: none;
  width: 25%;
}
.grid.is-mobile > .col.is-offset-3 {
  margin-left: 25%;
}
.grid.is-mobile > .col.is-4 {
  flex: none;
  width: 33.3333333333%;
}
.grid.is-mobile > .col.is-offset-4 {
  margin-left: 33.3333333333%;
}
.grid.is-mobile > .col.is-5 {
  flex: none;
  width: 41.6666666667%;
}
.grid.is-mobile > .col.is-offset-5 {
  margin-left: 41.6666666667%;
}
.grid.is-mobile > .col.is-6 {
  flex: none;
  width: 50%;
}
.grid.is-mobile > .col.is-offset-6 {
  margin-left: 50%;
}
.grid.is-mobile > .col.is-7 {
  flex: none;
  width: 58.3333333333%;
}
.grid.is-mobile > .col.is-offset-7 {
  margin-left: 58.3333333333%;
}
.grid.is-mobile > .col.is-8 {
  flex: none;
  width: 66.6666666667%;
}
.grid.is-mobile > .col.is-offset-8 {
  margin-left: 66.6666666667%;
}
.grid.is-mobile > .col.is-9 {
  flex: none;
  width: 75%;
}
.grid.is-mobile > .col.is-offset-9 {
  margin-left: 75%;
}
.grid.is-mobile > .col.is-10 {
  flex: none;
  width: 83.3333333333%;
}
.grid.is-mobile > .col.is-offset-10 {
  margin-left: 83.3333333333%;
}
.grid.is-mobile > .col.is-11 {
  flex: none;
  width: 91.6666666667%;
}
.grid.is-mobile > .col.is-offset-11 {
  margin-left: 91.6666666667%;
}
.grid.is-mobile > .col.is-12 {
  flex: none;
  width: 100%;
}
.grid.is-mobile > .col.is-offset-12 {
  margin-left: 100%;
}
@media screen and (max-width: 768px) {
  .col.mobile\:is-narrow {
    flex: none;
    width: unset;
  }
  .col.mobile\:is-full {
    flex: none;
    width: 100%;
  }
  .col.mobile\:is-three-quarters {
    flex: none;
    width: 75%;
  }
  .col.mobile\:is-two-thirds {
    flex: none;
    width: 66.6666%;
  }
  .col.mobile\:is-half {
    flex: none;
    width: 50%;
  }
  .col.mobile\:is-one-third {
    flex: none;
    width: 33.3333%;
  }
  .col.mobile\:is-one-quarter {
    flex: none;
    width: 25%;
  }
  .col.mobile\:is-one-fifth {
    flex: none;
    width: 20%;
  }
  .col.mobile\:is-two-fifths {
    flex: none;
    width: 40%;
  }
  .col.mobile\:is-three-fifths {
    flex: none;
    width: 60%;
  }
  .col.mobile\:is-four-fifths {
    flex: none;
    width: 80%;
  }
  .col.mobile\:is-offset-three-quarters {
    margin-left: 75%;
  }
  .col.mobile\:is-offset-two-thirds {
    margin-left: 66.6666%;
  }
  .col.mobile\:is-offset-half {
    margin-left: 50%;
  }
  .col.mobile\:is-offset-one-third {
    margin-left: 33.3333%;
  }
  .col.mobile\:is-offset-one-quarter {
    margin-left: 25%;
  }
  .col.mobile\:is-offset-one-fifth {
    margin-left: 20%;
  }
  .col.mobile\:is-offset-two-fifths {
    margin-left: 40%;
  }
  .col.mobile\:is-offset-three-fifths {
    margin-left: 60%;
  }
  .col.mobile-offset-four-fifths {
    margin-left: 80%;
  }
  .col.mobile\:is-0 {
    flex: none;
    width: 0%;
  }
  .col.mobile\:is-offset-0 {
    margin-left: 0%;
  }
  .col.mobile\:is-1 {
    flex: none;
    width: 8.3333333333%;
  }
  .col.mobile\:is-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col.mobile\:is-2 {
    flex: none;
    width: 16.6666666667%;
  }
  .col.mobile\:is-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col.mobile\:is-3 {
    flex: none;
    width: 25%;
  }
  .col.mobile\:is-offset-3 {
    margin-left: 25%;
  }
  .col.mobile\:is-4 {
    flex: none;
    width: 33.3333333333%;
  }
  .col.mobile\:is-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col.mobile\:is-5 {
    flex: none;
    width: 41.6666666667%;
  }
  .col.mobile\:is-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col.mobile\:is-6 {
    flex: none;
    width: 50%;
  }
  .col.mobile\:is-offset-6 {
    margin-left: 50%;
  }
  .col.mobile\:is-7 {
    flex: none;
    width: 58.3333333333%;
  }
  .col.mobile\:is-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col.mobile\:is-8 {
    flex: none;
    width: 66.6666666667%;
  }
  .col.mobile\:is-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col.mobile\:is-9 {
    flex: none;
    width: 75%;
  }
  .col.mobile\:is-offset-9 {
    margin-left: 75%;
  }
  .col.mobile\:is-10 {
    flex: none;
    width: 83.3333333333%;
  }
  .col.mobile\:is-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col.mobile\:is-11 {
    flex: none;
    width: 91.6666666667%;
  }
  .col.mobile\:is-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col.mobile\:is-12 {
    flex: none;
    width: 100%;
  }
  .col.mobile\:is-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 769px) {
  .col.is-narrow, .col.tablet\:is-narrow {
    flex: none;
    width: unset;
  }
  .col.is-full, .col.tablet\:is-full {
    flex: none;
    width: 100%;
  }
  .col.is-three-quarters, .col.tablet\:is-three-quarters {
    flex: none;
    width: 75%;
  }
  .col.is-two-thirds, .col.tablet\:is-two-thirds {
    flex: none;
    width: 66.6666%;
  }
  .col.is-half, .col.tablet\:is-half {
    flex: none;
    width: 50%;
  }
  .col.is-one-third, .col.tablet\:is-one-third {
    flex: none;
    width: 33.3333%;
  }
  .col.is-one-quarter, .col.tablet\:is-one-quarter {
    flex: none;
    width: 25%;
  }
  .col.is-one-fifth, .col.tablet\:is-one-fifth {
    flex: none;
    width: 20%;
  }
  .col.is-two-fifths, .col.tablet\:is-two-fifths {
    flex: none;
    width: 40%;
  }
  .col.is-three-fifths, .col.tablet\:is-three-fifths {
    flex: none;
    width: 60%;
  }
  .col.is-four-fifths, .col.tablet\:is-four-fifths {
    flex: none;
    width: 80%;
  }
  .col.is-offset-three-quarters, .col.tablet\:is-offset-three-quarters {
    margin-left: 75%;
  }
  .col.is-offset-two-thirds, .col.tablet\:is-offset-two-thirds {
    margin-left: 66.6666%;
  }
  .col.is-offset-half, .col.tablet\:is-offset-half {
    margin-left: 50%;
  }
  .col.is-offset-one-third, .col.tablet\:is-offset-one-third {
    margin-left: 33.3333%;
  }
  .col.is-offset-one-quarter, .col.tablet\:is-offset-one-quarter {
    margin-left: 25%;
  }
  .col.is-offset-one-fifth, .col.tablet\:is-offset-one-fifth {
    margin-left: 20%;
  }
  .col.is-offset-two-fifths, .col.tablet\:is-offset-two-fifths {
    margin-left: 40%;
  }
  .col.is-offset-three-fifths, .col.tablet\:is-offset-three-fifths {
    margin-left: 60%;
  }
  .col.is-offset-four-fifths, .col.tablet\:is-offset-four-fifths {
    margin-left: 80%;
  }
  .col.is-0, .col.tablet\:is-0 {
    flex: none;
    width: 0%;
  }
  .col.is-offset-0, .col.tablet\:is-offset-0 {
    margin-left: 0%;
  }
  .col.is-1, .col.tablet\:is-1 {
    flex: none;
    width: 8.3333333333%;
  }
  .col.is-offset-1, .col.tablet\:is-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col.is-2, .col.tablet\:is-2 {
    flex: none;
    width: 16.6666666667%;
  }
  .col.is-offset-2, .col.tablet\:is-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col.is-3, .col.tablet\:is-3 {
    flex: none;
    width: 25%;
  }
  .col.is-offset-3, .col.tablet\:is-offset-3 {
    margin-left: 25%;
  }
  .col.is-4, .col.tablet\:is-4 {
    flex: none;
    width: 33.3333333333%;
  }
  .col.is-offset-4, .col.tablet\:is-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col.is-5, .col.tablet\:is-5 {
    flex: none;
    width: 41.6666666667%;
  }
  .col.is-offset-5, .col.tablet\:is-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col.is-6, .col.tablet\:is-6 {
    flex: none;
    width: 50%;
  }
  .col.is-offset-6, .col.tablet\:is-offset-6 {
    margin-left: 50%;
  }
  .col.is-7, .col.tablet\:is-7 {
    flex: none;
    width: 58.3333333333%;
  }
  .col.is-offset-7, .col.tablet\:is-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col.is-8, .col.tablet\:is-8 {
    flex: none;
    width: 66.6666666667%;
  }
  .col.is-offset-8, .col.tablet\:is-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col.is-9, .col.tablet\:is-9 {
    flex: none;
    width: 75%;
  }
  .col.is-offset-9, .col.tablet\:is-offset-9 {
    margin-left: 75%;
  }
  .col.is-10, .col.tablet\:is-10 {
    flex: none;
    width: 83.3333333333%;
  }
  .col.is-offset-10, .col.tablet\:is-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col.is-11, .col.tablet\:is-11 {
    flex: none;
    width: 91.6666666667%;
  }
  .col.is-offset-11, .col.tablet\:is-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col.is-12, .col.tablet\:is-12 {
    flex: none;
    width: 100%;
  }
  .col.is-offset-12, .col.tablet\:is-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (max-width: 1023px) {
  .col.touch\:is-narrow {
    flex: none;
    width: unset;
  }
  .col.touch\:is-full {
    flex: none;
    width: 100%;
  }
  .col.touch\:is-three-quarters {
    flex: none;
    width: 75%;
  }
  .col.touch\:is-two-thirds {
    flex: none;
    width: 66.6666%;
  }
  .col.touch\:is-half {
    flex: none;
    width: 50%;
  }
  .col.touch\:is-one-third {
    flex: none;
    width: 33.3333%;
  }
  .col.touch\:is-one-quarter {
    flex: none;
    width: 25%;
  }
  .col.touch\:is-one-fifth {
    flex: none;
    width: 20%;
  }
  .col.touch\:is-two-fifths {
    flex: none;
    width: 40%;
  }
  .col.touch\:is-three-fifths {
    flex: none;
    width: 60%;
  }
  .col.touch\:is-four-fifths {
    flex: none;
    width: 80%;
  }
  .col.touch\:is-offset-three-quarters {
    margin-left: 75%;
  }
  .col.touch\:is-offset-two-thirds {
    margin-left: 66.6666%;
  }
  .col.touch\:is-offset-half {
    margin-left: 50%;
  }
  .col.touch\:is-offset-one-third {
    margin-left: 33.3333%;
  }
  .col.touch\:is-offset-one-quarter {
    margin-left: 25%;
  }
  .col.touch\:is-offset-one-fifth {
    margin-left: 20%;
  }
  .col.touch\:is-offset-two-fifths {
    margin-left: 40%;
  }
  .col.touch\:is-offset-three-fifths {
    margin-left: 60%;
  }
  .col.touch\:is-offset-four-fifths {
    margin-left: 80%;
  }
  .col.touch\:is-0 {
    flex: none;
    width: 0%;
  }
  .col.touch\:is-offset-0 {
    margin-left: 0%;
  }
  .col.touch\:is-1 {
    flex: none;
    width: 8.3333333333%;
  }
  .col.touch\:is-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col.touch\:is-2 {
    flex: none;
    width: 16.6666666667%;
  }
  .col.touch\:is-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col.touch\:is-3 {
    flex: none;
    width: 25%;
  }
  .col.touch\:is-offset-3 {
    margin-left: 25%;
  }
  .col.touch\:is-4 {
    flex: none;
    width: 33.3333333333%;
  }
  .col.touch\:is-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col.touch\:is-5 {
    flex: none;
    width: 41.6666666667%;
  }
  .col.touch\:is-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col.touch\:is-6 {
    flex: none;
    width: 50%;
  }
  .col.touch\:is-offset-6 {
    margin-left: 50%;
  }
  .col.touch\:is-7 {
    flex: none;
    width: 58.3333333333%;
  }
  .col.touch\:is-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col.touch\:is-8 {
    flex: none;
    width: 66.6666666667%;
  }
  .col.touch\:is-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col.touch\:is-9 {
    flex: none;
    width: 75%;
  }
  .col.touch\:is-offset-9 {
    margin-left: 75%;
  }
  .col.touch\:is-10 {
    flex: none;
    width: 83.3333333333%;
  }
  .col.touch\:is-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col.touch\:is-11 {
    flex: none;
    width: 91.6666666667%;
  }
  .col.touch\:is-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col.touch\:is-12 {
    flex: none;
    width: 100%;
  }
  .col.touch\:is-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .col.desktop\:is-narrow {
    flex: none;
    width: unset;
  }
  .col.desktop\:is-full {
    flex: none;
    width: 100%;
  }
  .col.desktop\:is-three-quarters {
    flex: none;
    width: 75%;
  }
  .col.desktop\:is-two-thirds {
    flex: none;
    width: 66.6666%;
  }
  .col.desktop\:is-half {
    flex: none;
    width: 50%;
  }
  .col.desktop\:is-one-third {
    flex: none;
    width: 33.3333%;
  }
  .col.desktop\:is-one-quarter {
    flex: none;
    width: 25%;
  }
  .col.desktop\:is-one-fifth {
    flex: none;
    width: 20%;
  }
  .col.desktop\:is-two-fifths {
    flex: none;
    width: 40%;
  }
  .col.desktop\:is-three-fifths {
    flex: none;
    width: 60%;
  }
  .col.desktop\:is-four-fifths {
    flex: none;
    width: 80%;
  }
  .col.desktop\:is-offset-three-quarters {
    margin-left: 75%;
  }
  .col.desktop\:is-offset-two-thirds {
    margin-left: 66.6666%;
  }
  .col.desktop\:is-offset-half {
    margin-left: 50%;
  }
  .col.desktop\:is-offset-one-third {
    margin-left: 33.3333%;
  }
  .col.desktop\:is-offset-one-quarter {
    margin-left: 25%;
  }
  .col.desktop\:is-offset-one-fifth {
    margin-left: 20%;
  }
  .col.desktop\:is-offset-two-fifths {
    margin-left: 40%;
  }
  .col.desktop\:is-offset-three-fifths {
    margin-left: 60%;
  }
  .col.desktop\:is-offset-four-fifths {
    margin-left: 80%;
  }
  .col.desktop\:is-0 {
    flex: none;
    width: 0%;
  }
  .col.desktop\:is-offset-0 {
    margin-left: 0%;
  }
  .col.desktop\:is-1 {
    flex: none;
    width: 8.3333333333%;
  }
  .col.desktop\:is-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col.desktop\:is-2 {
    flex: none;
    width: 16.6666666667%;
  }
  .col.desktop\:is-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col.desktop\:is-3 {
    flex: none;
    width: 25%;
  }
  .col.desktop\:is-offset-3 {
    margin-left: 25%;
  }
  .col.desktop\:is-4 {
    flex: none;
    width: 33.3333333333%;
  }
  .col.desktop\:is-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col.desktop\:is-5 {
    flex: none;
    width: 41.6666666667%;
  }
  .col.desktop\:is-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col.desktop\:is-6 {
    flex: none;
    width: 50%;
  }
  .col.desktop\:is-offset-6 {
    margin-left: 50%;
  }
  .col.desktop\:is-7 {
    flex: none;
    width: 58.3333333333%;
  }
  .col.desktop\:is-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col.desktop\:is-8 {
    flex: none;
    width: 66.6666666667%;
  }
  .col.desktop\:is-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col.desktop\:is-9 {
    flex: none;
    width: 75%;
  }
  .col.desktop\:is-offset-9 {
    margin-left: 75%;
  }
  .col.desktop\:is-10 {
    flex: none;
    width: 83.3333333333%;
  }
  .col.desktop\:is-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col.desktop\:is-11 {
    flex: none;
    width: 91.6666666667%;
  }
  .col.desktop\:is-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col.desktop\:is-12 {
    flex: none;
    width: 100%;
  }
  .col.desktop\:is-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1440px) {
  .col.widescreen\:is-narrow {
    flex: none;
    width: unset;
  }
  .col.widescreen\:is-full {
    flex: none;
    width: 100%;
  }
  .col.widescreen\:is-three-quarters {
    flex: none;
    width: 75%;
  }
  .col.widescreen\:is-two-thirds {
    flex: none;
    width: 66.6666%;
  }
  .col.widescreen\:is-half {
    flex: none;
    width: 50%;
  }
  .col.widescreen\:is-one-third {
    flex: none;
    width: 33.3333%;
  }
  .col.widescreen\:is-one-quarter {
    flex: none;
    width: 25%;
  }
  .col.widescreen\:is-one-fifth {
    flex: none;
    width: 20%;
  }
  .col.widescreen\:is-two-fifths {
    flex: none;
    width: 40%;
  }
  .col.widescreen\:is-three-fifths {
    flex: none;
    width: 60%;
  }
  .col.widescreen\:is-four-fifths {
    flex: none;
    width: 80%;
  }
  .col.widescreen\:is-offset-three-quarters {
    margin-left: 75%;
  }
  .col.widescreen\:is-offset-two-thirds {
    margin-left: 66.6666%;
  }
  .col.widescreen\:is-offset-half {
    margin-left: 50%;
  }
  .col.widescreen\:is-offset-one-third {
    margin-left: 33.3333%;
  }
  .col.widescreen\:is-offset-one-quarter {
    margin-left: 25%;
  }
  .col.widescreen\:is-offset-one-fifth {
    margin-left: 20%;
  }
  .col.widescreen\:is-offset-two-fifths {
    margin-left: 40%;
  }
  .col.widescreen\:is-offset-three-fifths {
    margin-left: 60%;
  }
  .col.widescreen\:is-offset-four-fifths {
    margin-left: 80%;
  }
  .col.widescreen\:is-0 {
    flex: none;
    width: 0%;
  }
  .col.widescreen\:is-offset-0 {
    margin-left: 0%;
  }
  .col.widescreen\:is-1 {
    flex: none;
    width: 8.3333333333%;
  }
  .col.widescreen\:is-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col.widescreen\:is-2 {
    flex: none;
    width: 16.6666666667%;
  }
  .col.widescreen\:is-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col.widescreen\:is-3 {
    flex: none;
    width: 25%;
  }
  .col.widescreen\:is-offset-3 {
    margin-left: 25%;
  }
  .col.widescreen\:is-4 {
    flex: none;
    width: 33.3333333333%;
  }
  .col.widescreen\:is-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col.widescreen\:is-5 {
    flex: none;
    width: 41.6666666667%;
  }
  .col.widescreen\:is-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col.widescreen\:is-6 {
    flex: none;
    width: 50%;
  }
  .col.widescreen\:is-offset-6 {
    margin-left: 50%;
  }
  .col.widescreen\:is-7 {
    flex: none;
    width: 58.3333333333%;
  }
  .col.widescreen\:is-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col.widescreen\:is-8 {
    flex: none;
    width: 66.6666666667%;
  }
  .col.widescreen\:is-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col.widescreen\:is-9 {
    flex: none;
    width: 75%;
  }
  .col.widescreen\:is-offset-9 {
    margin-left: 75%;
  }
  .col.widescreen\:is-10 {
    flex: none;
    width: 83.3333333333%;
  }
  .col.widescreen\:is-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col.widescreen\:is-11 {
    flex: none;
    width: 91.6666666667%;
  }
  .col.widescreen\:is-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col.widescreen\:is-12 {
    flex: none;
    width: 100%;
  }
  .col.widescreen\:is-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1920px) {
  .col.fullhd\:is-narrow {
    flex: none;
    width: unset;
  }
  .col.fullhd\:is-full {
    flex: none;
    width: 100%;
  }
  .col.fullhd\:is-three-quarters {
    flex: none;
    width: 75%;
  }
  .col.fullhd\:is-two-thirds {
    flex: none;
    width: 66.6666%;
  }
  .col.fullhd\:is-half {
    flex: none;
    width: 50%;
  }
  .col.fullhd\:is-one-third {
    flex: none;
    width: 33.3333%;
  }
  .col.fullhd\:is-one-quarter {
    flex: none;
    width: 25%;
  }
  .col.fullhd\:is-one-fifth {
    flex: none;
    width: 20%;
  }
  .col.fullhd\:is-two-fifths {
    flex: none;
    width: 40%;
  }
  .col.fullhd\:is-three-fifths {
    flex: none;
    width: 60%;
  }
  .col.fullhd\:is-four-fifths {
    flex: none;
    width: 80%;
  }
  .col.fullhd\:is-offset-three-quarters {
    margin-left: 75%;
  }
  .col.fullhd\:is-offset-two-thirds {
    margin-left: 66.6666%;
  }
  .col.fullhd\:is-offset-half {
    margin-left: 50%;
  }
  .col.fullhd\:is-offset-one-third {
    margin-left: 33.3333%;
  }
  .col.fullhd\:is-offset-one-quarter {
    margin-left: 25%;
  }
  .col.fullhd\:is-offset-one-fifth {
    margin-left: 20%;
  }
  .col.fullhd\:is-offset-two-fifths {
    margin-left: 40%;
  }
  .col.fullhd\:is-offset-three-fifths {
    margin-left: 60%;
  }
  .col.fullhd\:is-offset-four-fifths {
    margin-left: 80%;
  }
  .col.fullhd\:is-0 {
    flex: none;
    width: 0%;
  }
  .col.fullhd\:is-offset-0 {
    margin-left: 0%;
  }
  .col.fullhd\:is-1 {
    flex: none;
    width: 8.3333333333%;
  }
  .col.fullhd\:is-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col.fullhd\:is-2 {
    flex: none;
    width: 16.6666666667%;
  }
  .col.fullhd\:is-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col.fullhd\:is-3 {
    flex: none;
    width: 25%;
  }
  .col.fullhd\:is-offset-3 {
    margin-left: 25%;
  }
  .col.fullhd\:is-4 {
    flex: none;
    width: 33.3333333333%;
  }
  .col.fullhd\:is-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col.fullhd\:is-5 {
    flex: none;
    width: 41.6666666667%;
  }
  .col.fullhd\:is-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col.fullhd\:is-6 {
    flex: none;
    width: 50%;
  }
  .col.fullhd\:is-offset-6 {
    margin-left: 50%;
  }
  .col.fullhd\:is-7 {
    flex: none;
    width: 58.3333333333%;
  }
  .col.fullhd\:is-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col.fullhd\:is-8 {
    flex: none;
    width: 66.6666666667%;
  }
  .col.fullhd\:is-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col.fullhd\:is-9 {
    flex: none;
    width: 75%;
  }
  .col.fullhd\:is-offset-9 {
    margin-left: 75%;
  }
  .col.fullhd\:is-10 {
    flex: none;
    width: 83.3333333333%;
  }
  .col.fullhd\:is-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col.fullhd\:is-11 {
    flex: none;
    width: 91.6666666667%;
  }
  .col.fullhd\:is-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col.fullhd\:is-12 {
    flex: none;
    width: 100%;
  }
  .col.fullhd\:is-offset-12 {
    margin-left: 100%;
  }
}

.grid {
  margin-left: calc(var(--bal-column-gap) * -1);
  margin-right: calc(var(--bal-column-gap) * -1);
  margin-top: calc(var(--bal-column-gap) * -1);
}
.grid:last-child {
  margin-bottom: calc(var(--bal-column-gap) * -1);
}
.grid:not(:last-child) {
  margin-bottom: calc(1.5rem - var(--bal-column-gap));
}
.grid.is-centered {
  justify-content: center;
}
.grid.is-gapless {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
}
.grid.is-gapless > .col {
  margin: 0;
  padding: 0 !important;
}
.grid.is-gapless:not(:last-child) {
  margin-bottom: 1.5rem;
}
.grid.is-gapless:last-child {
  margin-bottom: 0;
}
.grid.is-mobile {
  display: flex;
}
.grid.is-multiline {
  flex-wrap: wrap;
}
.grid.is-vcentered {
  align-items: center;
}
@media screen and (min-width: 769px) {
  .grid:not(.is-desktop) {
    display: flex;
  }
}
@media screen and (min-width: 1024px) {
  .grid.is-desktop {
    display: flex;
  }
}

ol.list,
ul.list,
ol.is-list,
ul.is-list {
  margin-bottom: 1.5rem;
  margin-left: 2rem;
}
@media screen and (min-width: 1024px) {
  ol.list,
  ul.list,
  ol.is-list,
  ul.is-list {
    margin-bottom: 2rem;
  }
}
ol.list.is-inside,
ul.list.is-inside,
ol.is-list.is-inside,
ul.is-list.is-inside {
  list-style-position: inside !important;
  margin-left: 0;
}
ol.list.is-inside li,
ul.list.is-inside li,
ol.is-list.is-inside li,
ul.is-list.is-inside li {
  list-style-position: inside !important;
}
ol.list li,
ul.list li,
ol.is-list li,
ul.is-list li {
  hyphens: auto;
  margin-bottom: 1rem;
}
ol.list li:last-child,
ul.list li:last-child,
ol.is-list li:last-child,
ul.is-list li:last-child {
  margin-bottom: 0;
}
ol.list li::marker,
ul.list li::marker,
ol.is-list li::marker,
ul.is-list li::marker {
  color: var(--bal-list-marker-color);
}
ol.list.has-bullet-circle li::marker,
ul.list.has-bullet-circle li::marker,
ol.is-list.has-bullet-circle li::marker,
ul.is-list.has-bullet-circle li::marker {
  content: none;
}
ol.list.has-bullet-circle li::before,
ul.list.has-bullet-circle li::before,
ol.is-list.has-bullet-circle li::before,
ul.is-list.has-bullet-circle li::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  font-size: 0.75rem;
  margin-left: -1.25rem;
  margin-top: 0.313rem;
  border-radius: var(--bal-list-bullet-radius);
  background: var(--bal-list-bullet-background);
}
ol.list.has-bullet-circle.has-bullet-red li::before,
ol.list.has-bullet-circle li.has-bullet-red::before,
ul.list.has-bullet-circle.has-bullet-red li::before,
ul.list.has-bullet-circle li.has-bullet-red::before,
ol.is-list.has-bullet-circle.has-bullet-red li::before,
ol.is-list.has-bullet-circle li.has-bullet-red::before,
ul.is-list.has-bullet-circle.has-bullet-red li::before,
ul.is-list.has-bullet-circle li.has-bullet-red::before {
  background: var(--bal-list-bullet-background-red);
}
ol.list.has-bullet-circle.has-bullet-yellow li::before,
ol.list.has-bullet-circle li.has-bullet-yellow::before,
ul.list.has-bullet-circle.has-bullet-yellow li::before,
ul.list.has-bullet-circle li.has-bullet-yellow::before,
ol.is-list.has-bullet-circle.has-bullet-yellow li::before,
ol.is-list.has-bullet-circle li.has-bullet-yellow::before,
ul.is-list.has-bullet-circle.has-bullet-yellow li::before,
ul.is-list.has-bullet-circle li.has-bullet-yellow::before {
  background: var(--bal-list-bullet-background-yellow);
}
ol.list.has-bullet-circle.has-bullet-green li::before,
ol.list.has-bullet-circle li.has-bullet-green::before,
ul.list.has-bullet-circle.has-bullet-green li::before,
ul.list.has-bullet-circle li.has-bullet-green::before,
ol.is-list.has-bullet-circle.has-bullet-green li::before,
ol.is-list.has-bullet-circle li.has-bullet-green::before,
ul.is-list.has-bullet-circle.has-bullet-green li::before,
ul.is-list.has-bullet-circle li.has-bullet-green::before {
  background: var(--bal-list-bullet-background-green);
}
ol.list.has-bullet-circle.has-bullet-purple li::before,
ol.list.has-bullet-circle li.has-bullet-purple::before,
ul.list.has-bullet-circle.has-bullet-purple li::before,
ul.list.has-bullet-circle li.has-bullet-purple::before,
ol.is-list.has-bullet-circle.has-bullet-purple li::before,
ol.is-list.has-bullet-circle li.has-bullet-purple::before,
ul.is-list.has-bullet-circle.has-bullet-purple li::before,
ul.is-list.has-bullet-circle li.has-bullet-purple::before {
  background: var(--bal-list-bullet-background-purple);
}
ol.list.is-compact,
ul.list.is-compact,
ol.is-list.is-compact,
ul.is-list.is-compact {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
ol.list.is-compact li,
ul.list.is-compact li,
ol.is-list.is-compact li,
ul.is-list.is-compact li {
  margin-bottom: 0.25rem;
}
ol.list.has-bullets, ol.list.has-bullet-check, ol.list.has-bullet-arrow-down, ol.list.has-bullet-close, ol.list.has-bullet-check-circle,
ul.list.has-bullets,
ul.list.has-bullet-check,
ul.list.has-bullet-arrow-down,
ul.list.has-bullet-close,
ul.list.has-bullet-check-circle,
ol.is-list.has-bullets,
ol.is-list.has-bullet-check,
ol.is-list.has-bullet-arrow-down,
ol.is-list.has-bullet-close,
ol.is-list.has-bullet-check-circle,
ul.is-list.has-bullets,
ul.is-list.has-bullet-check,
ul.is-list.has-bullet-arrow-down,
ul.is-list.has-bullet-close,
ul.is-list.has-bullet-check-circle {
  list-style-type: none !important;
}
ol.list.has-bullets li, ol.list.has-bullet-check li, ol.list.has-bullet-arrow-down li, ol.list.has-bullet-close li, ol.list.has-bullet-check-circle li,
ul.list.has-bullets li,
ul.list.has-bullet-check li,
ul.list.has-bullet-arrow-down li,
ul.list.has-bullet-close li,
ul.list.has-bullet-check-circle li,
ol.is-list.has-bullets li,
ol.is-list.has-bullet-check li,
ol.is-list.has-bullet-arrow-down li,
ol.is-list.has-bullet-close li,
ol.is-list.has-bullet-check-circle li,
ul.is-list.has-bullets li,
ul.is-list.has-bullet-check li,
ul.is-list.has-bullet-arrow-down li,
ul.is-list.has-bullet-close li,
ul.is-list.has-bullet-check-circle li {
  list-style-type: none !important;
}
ol.list.has-bullets li::marker, ol.list.has-bullet-check li::marker, ol.list.has-bullet-arrow-down li::marker, ol.list.has-bullet-close li::marker, ol.list.has-bullet-check-circle li::marker,
ul.list.has-bullets li::marker,
ul.list.has-bullet-check li::marker,
ul.list.has-bullet-arrow-down li::marker,
ul.list.has-bullet-close li::marker,
ul.list.has-bullet-check-circle li::marker,
ol.is-list.has-bullets li::marker,
ol.is-list.has-bullet-check li::marker,
ol.is-list.has-bullet-arrow-down li::marker,
ol.is-list.has-bullet-close li::marker,
ol.is-list.has-bullet-check-circle li::marker,
ul.is-list.has-bullets li::marker,
ul.is-list.has-bullet-check li::marker,
ul.is-list.has-bullet-arrow-down li::marker,
ul.is-list.has-bullet-close li::marker,
ul.is-list.has-bullet-check-circle li::marker {
  content: none !important;
}
ol.list.has-bullets li::before, ol.list.has-bullet-check li::before, ol.list.has-bullet-arrow-down li::before, ol.list.has-bullet-close li::before, ol.list.has-bullet-check-circle li::before,
ul.list.has-bullets li::before,
ul.list.has-bullet-check li::before,
ul.list.has-bullet-arrow-down li::before,
ul.list.has-bullet-close li::before,
ul.list.has-bullet-check-circle li::before,
ol.is-list.has-bullets li::before,
ol.is-list.has-bullet-check li::before,
ol.is-list.has-bullet-arrow-down li::before,
ol.is-list.has-bullet-close li::before,
ol.is-list.has-bullet-check-circle li::before,
ul.is-list.has-bullets li::before,
ul.is-list.has-bullet-check li::before,
ul.is-list.has-bullet-arrow-down li::before,
ul.is-list.has-bullet-close li::before,
ul.is-list.has-bullet-check-circle li::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  font-size: 0.875rem;
  margin-left: -1.375rem;
  margin-top: 0.313rem;
}
ol.list.has-bullets.has-bullet-check-circle li::before, ol.list.has-bullets.has-bullet-arrow-down li::before, ol.list.has-bullet-check.has-bullet-check-circle li::before, ol.list.has-bullet-check.has-bullet-arrow-down li::before, ol.list.has-bullet-arrow-down.has-bullet-check-circle li::before, ol.list.has-bullet-arrow-down.has-bullet-arrow-down li::before, ol.list.has-bullet-close.has-bullet-check-circle li::before, ol.list.has-bullet-close.has-bullet-arrow-down li::before, ol.list.has-bullet-check-circle.has-bullet-check-circle li::before, ol.list.has-bullet-check-circle.has-bullet-arrow-down li::before,
ul.list.has-bullets.has-bullet-check-circle li::before,
ul.list.has-bullets.has-bullet-arrow-down li::before,
ul.list.has-bullet-check.has-bullet-check-circle li::before,
ul.list.has-bullet-check.has-bullet-arrow-down li::before,
ul.list.has-bullet-arrow-down.has-bullet-check-circle li::before,
ul.list.has-bullet-arrow-down.has-bullet-arrow-down li::before,
ul.list.has-bullet-close.has-bullet-check-circle li::before,
ul.list.has-bullet-close.has-bullet-arrow-down li::before,
ul.list.has-bullet-check-circle.has-bullet-check-circle li::before,
ul.list.has-bullet-check-circle.has-bullet-arrow-down li::before,
ol.is-list.has-bullets.has-bullet-check-circle li::before,
ol.is-list.has-bullets.has-bullet-arrow-down li::before,
ol.is-list.has-bullet-check.has-bullet-check-circle li::before,
ol.is-list.has-bullet-check.has-bullet-arrow-down li::before,
ol.is-list.has-bullet-arrow-down.has-bullet-check-circle li::before,
ol.is-list.has-bullet-arrow-down.has-bullet-arrow-down li::before,
ol.is-list.has-bullet-close.has-bullet-check-circle li::before,
ol.is-list.has-bullet-close.has-bullet-arrow-down li::before,
ol.is-list.has-bullet-check-circle.has-bullet-check-circle li::before,
ol.is-list.has-bullet-check-circle.has-bullet-arrow-down li::before,
ul.is-list.has-bullets.has-bullet-check-circle li::before,
ul.is-list.has-bullets.has-bullet-arrow-down li::before,
ul.is-list.has-bullet-check.has-bullet-check-circle li::before,
ul.is-list.has-bullet-check.has-bullet-arrow-down li::before,
ul.is-list.has-bullet-arrow-down.has-bullet-check-circle li::before,
ul.is-list.has-bullet-arrow-down.has-bullet-arrow-down li::before,
ul.is-list.has-bullet-close.has-bullet-check-circle li::before,
ul.is-list.has-bullet-close.has-bullet-arrow-down li::before,
ul.is-list.has-bullet-check-circle.has-bullet-check-circle li::before,
ul.is-list.has-bullet-check-circle.has-bullet-arrow-down li::before {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  margin-left: -1.44rem;
  margin-top: 0.25rem;
}
ol.list.has-bullet-check li::before,
ol.list li.has-bullet-check::before,
ul.list.has-bullet-check li::before,
ul.list li.has-bullet-check::before,
ol.is-list.has-bullet-check li::before,
ol.is-list li.has-bullet-check::before,
ul.is-list.has-bullet-check li::before,
ul.is-list li.has-bullet-check::before {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4ODU0XzM0MjU0OSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEzLjYzNzEgMS4xOTc5MkMxNC4wNjI4IDEuNTQ5NzQgMTQuMTIyOCAyLjE4MDA2IDEzLjc3MDkgMi42MDU3OUw1LjczMDkgMTIuMzM1TDUuNzI4NDggMTIuMzM3OUM1LjU0NTYgMTIuNTU3NSA1LjMxNjA4IDEyLjczMzYgNS4wNTY2MSAxMi44NTM0QzQuNzk3MTMgMTIuOTczMSA0LjUxNDIzIDEzLjAzMzYgNC4yMjg0OCAxMy4wMzAySDQuMjI3NThDMy45MzcxNSAxMy4wMjY2IDMuNjUxMzEgMTIuOTU3MyAzLjM5MTUyIDEyLjgyNzRDMy4xMzI2IDEyLjY5NzkgMi45MDYyNiAxMi41MTE3IDIuNzI5MzcgMTIuMjgyNkMyLjcyODc3IDEyLjI4MTggMi43MjgxOCAxMi4yODEgMi43Mjc1OCAxMi4yODAyTDAuMjEwNjk0IDkuMDQ0MjZDLTAuMTI4Mzc2IDguNjA4MzEgLTAuMDQ5ODQyIDcuOTgwMDMgMC4zODYxMDUgNy42NDA5NkMwLjgyMjA1MyA3LjMwMTg5IDEuNDUwMzMgNy4zODA0MyAxLjc4OTQgNy44MTYzOEw0LjI1Mjk3IDEwLjk4MzhMMTIuMjI5MiAxLjMzMTc2QzEyLjU4MSAwLjkwNjAzNSAxMy4yMTE0IDAuODQ2MTEzIDEzLjYzNzEgMS4xOTc5MloiIGZpbGw9IiMwMDBENkUiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8zODg1NF8zNDI1NDkiPgo8cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==) no-repeat left top;
}
ol.list.has-bullet-arrow-down li::before,
ol.list li.has-bullet-arrow-down::before,
ul.list.has-bullet-arrow-down li::before,
ul.list li.has-bullet-arrow-down::before,
ol.is-list.has-bullet-arrow-down li::before,
ol.is-list li.has-bullet-arrow-down::before,
ul.is-list.has-bullet-arrow-down li::before,
ul.is-list li.has-bullet-arrow-down::before {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjY0NjQ2IDE0Ljg1MzZDNy44NDE3MiAxNS4wNDg4IDguMTU4MyAxNS4wNDg4IDguMzUzNTYgMTQuODUzNkwxMS44NTM2IDExLjM1MzZDMTEuOTk2NiAxMS4yMTA2IDEyLjAzOTMgMTAuOTk1NSAxMS45NjE5IDEwLjgwODdDMTEuODg0NSAxMC42MjE4IDExLjcwMjIgMTAuNSAxMS41IDEwLjVIOS4wMDAwMVYyQzkuMDAwMDEgMS40NDc3IDguNTUyMjkgMSA4LjAwMDAxIDFDNy40NDc3MiAxIDcuMDAwMDEgMS40NDc3IDcuMDAwMDEgMlYxMC41SDQuNTAwMDFDNC4yOTc3OCAxMC41IDQuMTE1NDYgMTAuNjIxOCA0LjAzODA3IDEwLjgwODdDMy45NjA2OCAxMC45OTU1IDQuMDAzNDYgMTEuMjEwNiA0LjE0NjQ2IDExLjM1MzZMNy42NDY0NiAxNC44NTM2WiIgZmlsbD0iIzAwMEQ2RSIvPgo8L3N2Zz4=) no-repeat left top;
}
ol.list.has-bullet-check-circle li::before,
ol.list li.has-bullet-check-circle::before,
ul.list.has-bullet-check-circle li::before,
ul.list li.has-bullet-check-circle::before,
ol.is-list.has-bullet-check-circle li::before,
ol.is-list li.has-bullet-check-circle::before,
ul.is-list.has-bullet-check-circle li::before,
ul.is-list li.has-bullet-check-circle::before {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE3ODdfMTIyNCkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTggMTZDMTIuNDE4MyAxNiAxNiAxMi40MTgzIDE2IDhDMTYgMy41ODE3MiAxMi40MTgzIDAgOCAwQzMuNTgxNzIgMCAwIDMuNTgxNzIgMCA4QzAgMTIuNDE4MyAzLjU4MTcyIDE2IDggMTZaTTYuNzYxNyAxMS43OTQ1QzYuOTgyNTkgMTEuNjk2NSA3LjE3OTI0IDExLjU1MTMgNy4zMzc3MyAxMS4zNjlMMTIuMzczMSA2LjMzMzIxQzEyLjQ2NzcgNi4yMzM5NiAxMi41NDE3IDYuMTE3MDYgMTIuNTkxIDUuOTg5MTVDMTIuNjQwMyA1Ljg2MTI1IDEyLjY2MzkgNS43MjQ4OCAxMi42NjA0IDUuNTg3ODRDMTIuNjU2OSA1LjQ1MDggMTIuNjI2NCA1LjMxNTgxIDEyLjU3MDcgNS4xOTA1OUMxMi41MTQ5IDUuMDY1MzcgMTIuNDM1IDQuOTUyMzkgMTIuMzM1NSA0Ljg1ODA5QzEyLjIzNjEgNC43NjM3OCAxMi4xMTkgNC42ODk5OSAxMS45OTExIDQuNjQwODhDMTEuODYzMiA0LjU5MTc3IDExLjcyNjggNC41NjgzIDExLjU4OTggNC41NzE3OEMxMS40NTI5IDQuNTc1MjYgMTEuMzE3OSA0LjYwNTYyIDExLjE5MjYgNC42NjExN0MxMS4wNjc3IDQuNzE2NTcgMTAuOTU0IDQuNzk2NzQgMTAuODU5NyA0Ljg5NTYxTDYuMTUwNiA5LjU0MjI2QzYuMTAzODUgOS41ODgzOCA2LjAyNzk1IDkuNTg1NzIgNS45ODQ1NSA5LjUzNjQzTDQuOTA2MjEgOC4zMTE3NUw0LjkwMDA1IDguMzA1MzVDNC43MTM1OCA4LjExMTY0IDQuNDU5NTUgNy45OTczOCA0LjE5MDk4IDcuOTg2MTRDMy45MjI0MSA3Ljk3NDg5IDMuNjU5NzEgOC4wNjc1IDMuNDU3NjggOC4yNDQ5QzMuMjU1NjIgOC40MjIzMyAzLjEyOTgyIDguNjcwOTEgMy4xMDY3OSA4LjkzODlDMy4wODM3NSA5LjIwNjkgMy4xNjUzMSA5LjQ3MzMxIDMuMzM0MjMgOS42ODI1N0wzLjMzOTY4IDkuNjg5MzNMNC43NDk3NyAxMS4yODg4QzQuOTAzMDcgMTEuNDg1NCA1LjA5ODMxIDExLjY0NTUgNS4zMjEzMSAxMS43NTc0QzUuNTQ3OTYgMTEuODcxMiA1Ljc5NzQyIDExLjkzMjIgNi4wNTA5OCAxMS45MzZDNi4yOTU0MiAxMS45NDIgNi41MzgxOSAxMS44OTM2IDYuNzYxNyAxMS43OTQ1WiIgZmlsbD0iIzAwMEQ2RSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzE3ODdfMTIyNCI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat left top;
}
ol.list.has-bullet-close li::before,
ol.list li.has-bullet-close::before,
ul.list.has-bullet-close li::before,
ul.list li.has-bullet-close::before,
ol.is-list.has-bullet-close li::before,
ol.is-list li.has-bullet-close::before,
ul.is-list.has-bullet-close li::before,
ul.is-list li.has-bullet-close::before {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4ODU0XzM0MjU5OSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNzA3MTEgMC4yOTI4OTNDMS4zMTY1OCAtMC4wOTc2MzEgMC42ODM0MTcgLTAuMDk3NjMxIDAuMjkyODkzIDAuMjkyODkzQy0wLjA5NzYzMSAwLjY4MzQxNyAtMC4wOTc2MzEgMS4zMTY1OCAwLjI5Mjg5MyAxLjcwNzExTDUuNTg1NzkgN0wwLjI5Mjg5MyAxMi4yOTI5Qy0wLjA5NzYzMSAxMi42ODM0IC0wLjA5NzYzMSAxMy4zMTY2IDAuMjkyODkzIDEzLjcwNzFDMC42ODM0MTcgMTQuMDk3NiAxLjMxNjU4IDE0LjA5NzYgMS43MDcxMSAxMy43MDcxTDcgOC40MTQyMUwxMi4yOTI5IDEzLjcwNzFDMTIuNjgzNCAxNC4wOTc2IDEzLjMxNjYgMTQuMDk3NiAxMy43MDcxIDEzLjcwNzFDMTQuMDk3NiAxMy4zMTY2IDE0LjA5NzYgMTIuNjgzNCAxMy43MDcxIDEyLjI5MjlMOC40MTQyMSA3TDEzLjcwNzEgMS43MDcxMUMxNC4wOTc2IDEuMzE2NTggMTQuMDk3NiAwLjY4MzQxNyAxMy43MDcxIDAuMjkyODkzQzEzLjMxNjYgLTAuMDk3NjMxIDEyLjY4MzQgLTAuMDk3NjMxIDEyLjI5MjkgMC4yOTI4OTNMNyA1LjU4NTc5TDEuNzA3MTEgMC4yOTI4OTNaIiBmaWxsPSIjMDAwRDZFIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzg4NTRfMzQyNTk5Ij4KPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) no-repeat left top;
}
ol.list.has-bullet-check.has-bullet-green li::before,
ol.list li.has-bullet-check.has-bullet-green::before,
ul.list.has-bullet-check.has-bullet-green li::before,
ul.list li.has-bullet-check.has-bullet-green::before,
ol.is-list.has-bullet-check.has-bullet-green li::before,
ol.is-list li.has-bullet-check.has-bullet-green::before,
ul.is-list.has-bullet-check.has-bullet-green li::before,
ul.is-list li.has-bullet-check.has-bullet-green::before {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI1MDdfMTkzNDYxKSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTMuNjM3MSAxLjE5NzkyQzE0LjA2MjggMS41NDk3NCAxNC4xMjI4IDIuMTgwMDYgMTMuNzcwOSAyLjYwNTc5TDUuNzMwOSAxMi4zMzVMNS43Mjg0OCAxMi4zMzc5QzUuNTQ1NiAxMi41NTc1IDUuMzE2MDggMTIuNzMzNiA1LjA1NjYxIDEyLjg1MzRDNC43OTcxMyAxMi45NzMxIDQuNTE0MjMgMTMuMDMzNiA0LjIyODQ4IDEzLjAzMDJDMy45MzgwNSAxMy4wMjY2IDMuNjUxMzEgMTIuOTU3MyAzLjM5MTUyIDEyLjgyNzRDMy4xMzI2IDEyLjY5NzkgMi45MDYyNiAxMi41MTE3IDIuNzI5MzcgMTIuMjgyNkMyLjcyODc3IDEyLjI4MTggMi43MjgxOCAxMi4yODEgMi43Mjc1OCAxMi4yODAyTDAuMjEwNjk0IDkuMDQ0MjZDLTAuMTI4Mzc2IDguNjA4MzEgLTAuMDQ5ODQyIDcuOTgwMDMgMC4zODYxMDUgNy42NDA5NkMwLjgyMjA1MyA3LjMwMTg5IDEuNDUwMzMgNy4zODA0MyAxLjc4OTQgNy44MTYzOEw0LjI1Mjk3IDEwLjk4MzhMMTIuMjI5MiAxLjMzMTc2QzEyLjU4MSAwLjkwNjAzNSAxMy4yMTE0IDAuODQ2MTEzIDEzLjYzNzEgMS4xOTc5MloiIGZpbGw9IiMwMEIyOEYiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNTA3XzE5MzQ2MSI+CjxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat left top;
}
ol.list.has-bullet-close.has-bullet-red li::before,
ol.list li.has-bullet-close.has-bullet-red::before,
ul.list.has-bullet-close.has-bullet-red li::before,
ul.list li.has-bullet-close.has-bullet-red::before,
ol.is-list.has-bullet-close.has-bullet-red li::before,
ol.is-list li.has-bullet-close.has-bullet-red::before,
ul.is-list.has-bullet-close.has-bullet-red li::before,
ul.is-list li.has-bullet-close.has-bullet-red::before {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI1MDdfMTkzNDY1KSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS43MDcxMSAwLjI5Mjg5M0MxLjMxNjU4IC0wLjA5NzYzMSAwLjY4MzQxNyAtMC4wOTc2MzEgMC4yOTI4OTMgMC4yOTI4OTNDLTAuMDk3NjMxIDAuNjgzNDE3IC0wLjA5NzYzMSAxLjMxNjU4IDAuMjkyODkzIDEuNzA3MTFMNS41ODU3OSA3TDAuMjkyODkzIDEyLjI5MjlDLTAuMDk3NjMxIDEyLjY4MzQgLTAuMDk3NjMxIDEzLjMxNjYgMC4yOTI4OTMgMTMuNzA3MUMwLjY4MzQxNyAxNC4wOTc2IDEuMzE2NTggMTQuMDk3NiAxLjcwNzExIDEzLjcwNzFMNyA4LjQxNDIxTDEyLjI5MjkgMTMuNzA3MUMxMi42ODM0IDE0LjA5NzYgMTMuMzE2NiAxNC4wOTc2IDEzLjcwNzEgMTMuNzA3MUMxNC4wOTc2IDEzLjMxNjYgMTQuMDk3NiAxMi42ODM0IDEzLjcwNzEgMTIuMjkyOUw4LjQxNDIxIDdMMTMuNzA3MSAxLjcwNzExQzE0LjA5NzYgMS4zMTY1OCAxNC4wOTc2IDAuNjgzNDE3IDEzLjcwNzEgMC4yOTI4OTNDMTMuMzE2NiAtMC4wOTc2MzEgMTIuNjgzNCAtMC4wOTc2MzEgMTIuMjkyOSAwLjI5Mjg5M0w3IDUuNTg1NzlMMS43MDcxMSAwLjI5Mjg5M1oiIGZpbGw9IiNEOTMwNEMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNTA3XzE5MzQ2NSI+CjxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat left top;
}
ol.list.is-inverted li,
ol.list.is-inverted li::marker,
ul.list.is-inverted li,
ul.list.is-inverted li::marker,
ol.is-list.is-inverted li,
ol.is-list.is-inverted li::marker,
ul.is-list.is-inverted li,
ul.is-list.is-inverted li::marker {
  color: var(--bal-list-marker-inverted-color);
}
ol.list.is-inverted.has-bullet-check li::before,
ol.list.is-inverted li.has-bullet-check::before,
ul.list.is-inverted.has-bullet-check li::before,
ul.list.is-inverted li.has-bullet-check::before,
ol.is-list.is-inverted.has-bullet-check li::before,
ol.is-list.is-inverted li.has-bullet-check::before,
ul.is-list.is-inverted.has-bullet-check li::before,
ul.is-list.is-inverted li.has-bullet-check::before {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4ODU0XzM0MjU0OSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEzLjYzNzEgMS4xOTc5MkMxNC4wNjI4IDEuNTQ5NzQgMTQuMTIyOCAyLjE4MDA2IDEzLjc3MDkgMi42MDU3OUw1LjczMDkgMTIuMzM1TDUuNzI4NDggMTIuMzM3OUM1LjU0NTYgMTIuNTU3NSA1LjMxNjA4IDEyLjczMzYgNS4wNTY2MSAxMi44NTM0QzQuNzk3MTMgMTIuOTczMSA0LjUxNDIzIDEzLjAzMzYgNC4yMjg0OCAxMy4wMzAySDQuMjI3NThDMy45MzcxNSAxMy4wMjY2IDMuNjUxMzEgMTIuOTU3MyAzLjM5MTUyIDEyLjgyNzRDMy4xMzI2IDEyLjY5NzkgMi45MDYyNiAxMi41MTE3IDIuNzI5MzcgMTIuMjgyNkMyLjcyODc3IDEyLjI4MTggMi43MjgxOCAxMi4yODEgMi43Mjc1OCAxMi4yODAyTDAuMjEwNjk0IDkuMDQ0MjZDLTAuMTI4Mzc2IDguNjA4MzEgLTAuMDQ5ODQyIDcuOTgwMDMgMC4zODYxMDUgNy42NDA5NkMwLjgyMjA1MyA3LjMwMTg5IDEuNDUwMzMgNy4zODA0MyAxLjc4OTQgNy44MTYzOEw0LjI1Mjk3IDEwLjk4MzhMMTIuMjI5MiAxLjMzMTc2QzEyLjU4MSAwLjkwNjAzNSAxMy4yMTE0IDAuODQ2MTEzIDEzLjYzNzEgMS4xOTc5MloiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMzg4NTRfMzQyNTQ5Ij4KPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=) no-repeat left top;
}
ol.list.is-inverted.has-bullet-close li::before,
ol.list.is-inverted li.has-bullet-close::before,
ul.list.is-inverted.has-bullet-close li::before,
ul.list.is-inverted li.has-bullet-close::before,
ol.is-list.is-inverted.has-bullet-close li::before,
ol.is-list.is-inverted li.has-bullet-close::before,
ul.is-list.is-inverted.has-bullet-close li::before,
ul.is-list.is-inverted li.has-bullet-close::before {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM4ODU0XzM0MjU5OSkiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNzA3MTEgMC4yOTI4OTNDMS4zMTY1OCAtMC4wOTc2MzEgMC42ODM0MTcgLTAuMDk3NjMxIDAuMjkyODkzIDAuMjkyODkzQy0wLjA5NzYzMSAwLjY4MzQxNyAtMC4wOTc2MzEgMS4zMTY1OCAwLjI5Mjg5MyAxLjcwNzExTDUuNTg1NzkgN0wwLjI5Mjg5MyAxMi4yOTI5Qy0wLjA5NzYzMSAxMi42ODM0IC0wLjA5NzYzMSAxMy4zMTY2IDAuMjkyODkzIDEzLjcwNzFDMC42ODM0MTcgMTQuMDk3NiAxLjMxNjU4IDE0LjA5NzYgMS43MDcxMSAxMy43MDcxTDcgOC40MTQyMUwxMi4yOTI5IDEzLjcwNzFDMTIuNjgzNCAxNC4wOTc2IDEzLjMxNjYgMTQuMDk3NiAxMy43MDcxIDEzLjcwNzFDMTQuMDk3NiAxMy4zMTY2IDE0LjA5NzYgMTIuNjgzNCAxMy43MDcxIDEyLjI5MjlMOC40MTQyMSA3TDEzLjcwNzEgMS43MDcxMUMxNC4wOTc2IDEuMzE2NTggMTQuMDk3NiAwLjY4MzQxNyAxMy43MDcxIDAuMjkyODkzQzEzLjMxNjYgLTAuMDk3NjMxIDEyLjY4MzQgLTAuMDk3NjMxIDEyLjI5MjkgMC4yOTI4OTNMNyA1LjU4NTc5TDEuNzA3MTEgMC4yOTI4OTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM4ODU0XzM0MjU5OSI+CjxyZWN0IHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K) no-repeat left top;
}

ul.list:not(.has-bullet-circle):not(.has-bullet-check) li,
ul.is-list:not(.has-bullet-circle):not(.has-bullet-check) li {
  list-style: disc;
}

dl.list {
  display: grid;
  grid-template-columns: var(--bal-description-list-grid-term) var(--bal-description-list-grid-detail);
  row-gap: var(--bal-description-list-row-gap);
  -moz-column-gap: var(--bal-description-list-column-gap);
       column-gap: var(--bal-description-list-column-gap);
}
dl.list dt {
  color: var(--bal-description-list-term-color);
  font-weight: var(--bal-description-list-term-font-weight);
}
dl.list dd {
  color: var(--bal-description-list-detail-color);
  font-weight: var(--bal-description-list-detail-font-weight);
}

.table {
  background-color: var(--bal-table-background-color);
  color: var(--bal-table-color);
}
.table td,
.table th {
  border: var(--bal-table-cell-border);
  border-width: var(--bal-table-cell-border-width);
  padding: var(--bal-table-cell-padding);
  vertical-align: middle;
}
.table td.is-narrow,
.table th.is-narrow {
  white-space: nowrap;
  width: 1%;
}
.table td.is-selected,
.table th.is-selected {
  background-color: var(--bal-table-row-background-color-active);
  color: var(--bal-table-row-color-active);
}
.table td.is-selected a,
.table td.is-selected strong,
.table th.is-selected a,
.table th.is-selected strong {
  color: currentColor;
}
.table th {
  color: var(--bal-table-cell-heading-color);
}
.table th:not([align]) {
  text-align: inherit;
}
.table tr.is-selected {
  background-color: var(--bal-table-row-background-color-active);
  color: var(--bal-table-row-color-active);
}
.table tr.is-selected a,
.table tr.is-selected strong {
  color: currentColor;
}
.table tr.is-selected td,
.table tr.is-selected th {
  border-color: var(--bal-table-row-color-active);
  color: currentColor;
}
.table thead {
  background-color: var(--bal-table-head-background-color);
}
.table thead td,
.table thead th {
  border-width: var(--bal-table-head-cell-border-width);
  color: var(--bal-table-head-cell-color);
}
.table tfoot {
  background-color: var(--bal-table-foot-background-color);
}
.table tfoot td,
.table tfoot th {
  border-width: var(--bal-table-foot-cell-border-width);
  color: var(--bal-table-foot-cell-color);
}
.table tbody {
  background-color: var(--bal-table-body-background-color);
}
.table tbody tr:last-child td,
.table tbody tr:last-child th {
  border-bottom-width: 0;
}
.table.is-bordered th {
  border-top-width: 1px;
  border-left-width: 1px;
  border-right-width: 1px;
  border-top-color: var(--bal-table-cell-border-color);
  border-left-color: var(--bal-table-cell-border-color);
  border-right-color: var(--bal-table-cell-border-color);
}
.table.is-bordered td {
  border-width: 1px;
}
.table.is-bordered tr:last-child td {
  border-bottom-width: 1px;
}
.table.is-fullwidth {
  width: 100%;
}
.table.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: var(--bal-table-row-background-color-hover);
}
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
  background-color: var(--bal-table-row-background-color-hover);
}
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
  background-color: var(--bal-table-striped-row-even-background-color-hover);
}
.table.is-narrow td,
.table.is-narrow th {
  padding: 0.25em 0.5em;
}
.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: var(--bal-table-striped-row-even-background-color);
}

.table-container {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  overflow-y: hidden;
  max-width: 100%;
}

table.table {
  display: table !important;
  border-spacing: 0;
  margin: 0;
}
table.table thead tr {
  border-top: 0;
}
table.table thead th {
  font-family: var(--bal-table-head-font-family);
  border-color: var(--bal-table-head-cell-border-color);
  border-bottom-width: 2px;
}
table.table th:not([align]) {
  text-align: left;
}
table.table td,
table.table th {
  font-size: var(--bal-table-head-font-size);
  vertical-align: middle;
  color: var(--bal-table-color);
  text-align: left;
}
table.table td .bal-checkbox,
table.table th .bal-checkbox {
  padding: 0;
  margin-top: 1px;
}
table.table td {
  color: var(--bal-table-color);
  hyphens: auto;
}
table.table td.has-buttons {
  padding: 2px;
}
table.table td.has-buttons .bal-button {
  margin-right: 0.25rem;
}
table.table td.has-buttons .bal-button:last-child {
  margin-right: 0px;
}
table.table td.has-buttons .buttons {
  justify-content: flex-end;
  padding: 3px;
}

.has-sticky-footer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.has-sticky-footer main {
  padding-bottom: 2.5rem;
}
.has-sticky-footer .bal-footer,
.has-sticky-footer footer.footer {
  margin-top: auto;
}

/**
  * @deprecated Use desktop with t-shirt size breakpoints instead
  */
/**
  * Mixin to support host and non-host mode for hybrid components.
  * The mixin takes care of the correct selector and allows to write the styles only once.
  * The $selectors parameter can be a single selector or a list of selectors.
  * The $is-host parameter determines if the component is in host mode or not.
  */
/**
  * Mixin sets the selector for host and non-host mode.
  * The styles are wrapped in a :host selector and only applied if the component is used in host mode.
  * The $is-host parameter determines if the component is in host mode or not.
  * The $selector parameter is the selector for non-host mode and can be a single selector or a list of selectors.
  */
/**
  * Mixin generates styles for an element of a component for host and non-host mode.
  * The styles are wrapped in a :host selector and only applied if the component is used in host mode.
  * The $is-host parameter determines if the component is in host mode or not.
  * The $selector parameter is the selector for non-host mode and can be a single selector or a list of selectors.
  */
/**
  * Mixin only generates styles for host mode.
  * The styles are wrapped in a :host selector and only applied if the component is used in host mode.
  * The $is-host parameter determines if the component is in host mode or not.
  */
/**
  * Mixin only generates styles for non-host mode.
  * The styles are not wrapped in a :host selector and only applied if the component is used in non-host mode.
  * The $is-host parameter determines if the component is in host mode or not.
  */
/**
  * Mixin to support host and non-host mode for hybrid components.
  * The mixin takes care of the correct selector and allows to write the styles only once.
  * The $selectors parameter can be a single selector or a list of selectors.
  * The $is-host parameter determines if the component is in host mode or not.
  */
/**
  * Mixin to support host and non-host mode for hybrid components.
  * The mixin takes care of the correct selector and allows to write the styles only once.
  * The $selectors parameter can be a single selector or a list of selectors.
  * The $is-host parameter determines if the component is in host mode or not.
  * The $use-host parameter determines if the component should use the :host selector or not.
  */
/**
  * Mixin to define the host base variables and display property for a component.
  */
/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.toast {
  --_toast-position: var(--toast-position, var(--mod-toast-position, static));
  --_toast-top: var(--toast-top, var(--mod-toast-top));
  --_toast-right: var(--toast-right, var(--mod-toast-right));
  --_toast-bottom: var(--toast-bottom, var(--mod-toast-bottom));
  --_toast-left: var(--toast-left, var(--mod-toast-left));
  position: var(--_toast-position);
  top: var(--_toast-top);
  right: var(--_toast-right);
  bottom: var(--_toast-bottom);
  left: var(--_toast-left);
  --_toast-m: var(--toast-m, var(--mod-toast-m, 0));
  --_toast-my: var(--toast-my, var(--mod-toast-my));
  --_toast-mx: var(--toast-mx, var(--mod-toast-mx));
  --_toast-ml: var(--toast-ml, var(--mod-toast-ml));
  --_toast-mr: var(--toast-mr, var(--mod-toast-mr));
  --_toast-mt: var(--toast-mt, var(--mod-toast-mt));
  --_toast-mb: var(--toast-mb, var(--mod-toast-mb));
  margin: var(--_toast-m);
  margin-inline: var(--_toast-mx);
  margin-block: var(--_toast-my);
  margin-left: var(--_toast-ml);
  margin-right: var(--_toast-mr);
  margin-top: var(--_toast-mt);
  margin-bottom: var(--_toast-mb);
  --_toast-shadow: var(--toast-shadow, var(--mod-toast-shadow, var(--bal-shadow-box-base)));
  --_toast-radius: var(--toast-radius, var(--mod-toast-radius, var(--bal-toast-radius)));
  --_toast-color-background: var(--toast-color-background, var(--mod-toast-color-background, var(--bal-toast-base-background)));
  --_toast-color-text: var(--toast-color-text, var(--mod-toast-color-text, var(--bal-toast-base-text)));
  --_toast-icon: var(--toast-icon, var(--mod-toast-icon, var(--bal-toast-base-icon)));
  --_toast-heading-family: var(--toast-heading-family, var(--mod-toast-heading-family, var(--bal-text-family-heading)));
  --_toast-heading-weight: var(--toast-heading-weight, var(--mod-toast-heading-weight, var(--bal-text-weight-bold)));
  --_toast-heading-size: var(--toast-heading-size, var(--mod-toast-heading-size, var(--bal-text-size-base-device)));
  --_toast-heading-line-height: var(--toast-heading-line-height, var(--mod-toast-heading-line-height, var(--bal-text-line-height-heading)));
  --_toast-content-family: var(--toast-content-family, var(--mod-toast-content-family, var(--bal-text-family-body)));
  --_toast-content-weight: var(--toast-content-weight, var(--mod-toast-content-weight, inherit));
  --_toast-content-size: var(--toast-content-size, var(--mod-toast-content-size, var(--bal-text-size-sm-device)));
  --_toast-content-line-height: var(--toast-content-line-height, var(--mod-toast-content-line-height, var(--bal-text-line-height-body)));
  --_toast-gap: var(--toast-gap, var(--mod-toast-gap, 0.125rem));
  --_toast-pl: var(--toast-pl, var(--mod-toast-pl, 3rem));
  --_toast-pt: var(--toast-pt, var(--mod-toast-pt, 1rem));
  --_toast-pr: var(--toast-pr, var(--mod-toast-pr, 1rem));
  --_toast-pb: var(--toast-pb, var(--mod-toast-pb, 1rem));
  --_toast-animation-start-opacity: var(--toast-animation-start-opacity, var(--mod-toast-animation-start-opacity, 1));
  --_toast-animation-start-transform: var(--toast-animation-start-transform, var(--mod-toast-animation-start-transform, none));
  --_toast-animation-transition: var(--toast-animation-transition, var(--mod-toast-animation-transition, none));
  --_toast-animation-end-opacity: var(--toast-animation-end-opacity, var(--mod-toast-animation-end-opacity, 1));
  --_toast-animation-end-transform: var(--toast-animation-end-transform, var(--mod-toast-animation-end-transform, none));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.toast {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex: 1;
  position: relative;
  hyphens: auto;
  color: var(--_toast-color-text);
  background: var(--_toast-color-background);
  border-radius: var(--_toast-radius);
  box-shadow: var(--_toast-shadow);
  padding-top: var(--_toast-pt);
  padding-right: var(--_toast-pr);
  padding-bottom: var(--_toast-pb);
  padding-left: var(--_toast-pl);
  -moz-column-gap: calc(var(--_toast-gap) * 4);
       column-gap: calc(var(--_toast-gap) * 4);
  row-gap: var(--_toast-gap);
  align-items: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "message";
}
.toast::before {
  display: block;
  background-color: currentColor;
  color: currentColor;
  forced-color-adjust: preserve-parent-color;
  position: absolute;
  height: 1.5rem;
  width: 1.5rem;
  top: auto;
  left: 0.825rem;
  content: "";
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  mask-image: var(--_toast-icon);
  -webkit-mask-image: var(--_toast-icon);
}
.toast:where(:has(> h2, > strong, > b)):where(:not(:has(> .button, > bal-button))):where(:not(:has(> .close, > bal-close))) {
  grid-template-columns: 1fr;
  grid-template-areas: "heading" "message";
}
.toast:where(:has(> .button, > bal-button)):where(:not(:has(> .close, > bal-close))) {
  grid-template-columns: 1fr auto;
  grid-template-areas: "message action";
}
.toast:where(:has(> .button, > bal-button)):where(:not(:has(> .close, > bal-close))):has(> h2, > strong, > b) {
  grid-template-areas: "heading action" "message action";
}
.toast:where(:has(> .close, > bal-close)):where(:not(:has(> .button, > bal-button))) {
  grid-template-columns: 1fr auto;
  grid-template-areas: "message close";
}
.toast:where(:has(> .close, > bal-close)):where(:not(:has(> .button, > bal-button))):has(> h2, > strong, > b) {
  grid-template-areas: "heading close" "message close";
}
.toast:where(:has(> .button, > bal-button)):where(:has(> .close, > bal-close)) {
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "message action close";
}
.toast:where(:has(> .button, > bal-button)):where(:has(> .close, > bal-close)):has(> h2, > strong, > b) {
  grid-template-areas: "heading action close" "message action close";
}
.toast, .toast > span, .toast > p {
  font-family: var(--_toast-content-family);
  font-size: var(--_toast-content-size);
  font-weight: var(--_toast-content-weight);
  line-height: var(--_toast-content-line-height);
}
.toast > span, .toast > p {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  margin: 0 !important;
  grid-area: message;
}
.toast > strong, .toast > b, .toast > h2 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  font-family: var(--_toast-heading-family);
  font-weight: var(--_toast-heading-weight);
  line-height: var(--_toast-heading-line-height);
  font-size: var(--_toast-heading-size);
  margin: 0 !important;
  grid-area: heading;
}
.toast bal-button,
.toast .button {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  --button-mt: 0;
  grid-area: action;
  align-self: center;
}
.toast .close,
.toast bal-close {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: close;
  align-self: center;
}

.toast.is-info {
  --mod-toast-color-text: var(--bal-toast-info-text);
  --mod-toast-color-border: var(--bal-toast-info-border);
  --mod-toast-color-background: var(--bal-toast-info-background);
  --mod-toast-icon: var(--bal-toast-info-icon);
}
.toast.is-success {
  --mod-toast-color-text: var(--bal-toast-success-text);
  --mod-toast-color-border: var(--bal-toast-success-border);
  --mod-toast-color-background: var(--bal-toast-success-background);
  --mod-toast-icon: var(--bal-toast-success-icon);
}
.toast.is-warning {
  --mod-toast-color-text: var(--bal-toast-warning-text);
  --mod-toast-color-border: var(--bal-toast-warning-border);
  --mod-toast-color-background: var(--bal-toast-warning-background);
  --mod-toast-icon: var(--bal-toast-warning-icon);
}
.toast.is-danger {
  --mod-toast-color-text: var(--bal-toast-danger-text);
  --mod-toast-color-border: var(--bal-toast-danger-border);
  --mod-toast-color-background: var(--bal-toast-danger-background);
  --mod-toast-icon: var(--bal-toast-danger-icon);
}

/**
  * Usage examples:
  *   @include attr.has(attr.bool(checked)) { ... }
  *   @include attr.has(attr.bool(checked), attr.bool(invalid), attr.bool(inverted)) { ... }
  *   @include attr.has(attr.val(type, 'button')) { ... }
  *   @include attr.has(attr.val(type, 'button'), attr.bool(checked)) { ... }
  */
/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.text {
  --_text-position: var(--text-position, var(--mod-text-position, static));
  --_text-top: var(--text-top, var(--mod-text-top));
  --_text-right: var(--text-right, var(--mod-text-right));
  --_text-bottom: var(--text-bottom, var(--mod-text-bottom));
  --_text-left: var(--text-left, var(--mod-text-left));
  position: var(--_text-position);
  top: var(--_text-top);
  right: var(--_text-right);
  bottom: var(--_text-bottom);
  left: var(--_text-left);
  --_text-m: var(--text-m, var(--mod-text-m, 0));
  --_text-my: var(--text-my, var(--mod-text-my));
  --_text-mx: var(--text-mx, var(--mod-text-mx));
  --_text-ml: var(--text-ml, var(--mod-text-ml));
  --_text-mr: var(--text-mr, var(--mod-text-mr));
  --_text-mt: var(--text-mt, var(--mod-text-mt));
  --_text-mb: var(--text-mb, var(--mod-text-mb));
  margin: var(--_text-m);
  margin-inline: var(--_text-mx);
  margin-block: var(--_text-my);
  margin-left: var(--_text-ml);
  margin-right: var(--_text-mr);
  margin-top: var(--_text-mt);
  margin-bottom: var(--_text-mb);
  --_text-color: var(--text-color, var(--mod-text-color, inherit));
  --_text-family: var(--text-family, var(--mod-text-family, var(--bal-body-family)));
  --_text-weight: var(--text-weight, var(--mod-text-weight, var(--bal-body-weight)));
  --_text-line-height: var(--text-line-height, var(--mod-text-line-height, var(--bal-body-line-height)));
  --_text-size: var(--text-size, var(--mod-text-size, var(--bal-text-size-base-device)));
  --_text-shadow: var(--text-shadow, var(--mod-text-shadow, var(--bal-shadow-text)));
  --_text-space: var(--text-space, var(--mod-text-space, var(--bal-body-space)));
  --_text-shadow: var(--text-shadow, var(--mod-text-shadow, none));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.text {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  box-sizing: content-box;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
  color: var(--_text-color);
  font-family: var(--_text-family);
  font-weight: var(--_text-weight);
  line-height: var(--_text-line-height);
  font-size: var(--_text-size);
  text-shadow: var(--_text-shadow);
}
.text b,
.text strong,
.text .is-bold {
  font-weight: var(--bal-text-weight-bold);
}
.text.is-centered {
  text-align: center;
}
.text.is-right {
  text-align: right;
}
.text.is-justified {
  text-align: justify;
}

.text.has-no-wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

:host([no-wrap]:not([no-wrap=false])) #text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.text.is-light {
  --mod-text-weight: var(--bal-text-weight-light);
}
.text.is-regular {
  --mod-text-weight: var(--bal-text-weight-regular);
}
.text.is-bold {
  --mod-text-weight: var(--bal-text-weight-bold);
}

:host([bold]:not([bold=false])) {
  --mod-text-weight: var(--bal-text-weight-bold);
}

.text.has-shadow {
  --mod-text-shadow: var(--bal-text-shadow);
}

:host([shadow]:not([shadow=false])) {
  --mod-text-shadow: var(--bal-text-shadow);
}

.text.is-inline {
  display: inline;
}

:host([inline]:not([inline=false])) {
  display: inline;
}

.text.is-white {
  --mod-text-color: var(--bal-text-color-white);
}

.text.is-black {
  --mod-text-color: var(--bal-text-color-black);
}

.text.is-primary {
  --mod-text-color: var(--bal-text-color-primary);
}

.text.is-primary-hover {
  --mod-text-color: var(--bal-text-color-primary-hover);
}

.text.is-primary-active {
  --mod-text-color: var(--bal-text-color-primary-active);
}

.text.is-inverted-primary {
  --mod-text-color: var(--bal-text-color-inverted-primary);
}

.text.is-inverted-primary-hover {
  --mod-text-color: var(--bal-text-color-inverted-primary-hover);
}

.text.is-inverted-primary-active {
  --mod-text-color: var(--bal-text-color-inverted-primary-active);
}

.text.is-primary-light {
  --mod-text-color: var(--bal-text-color-primary-light);
}

.text.is-hint {
  --mod-text-color: var(--bal-text-color-hint);
}

.text.is-grey-light {
  --mod-text-color: var(--bal-text-color-grey-light);
}

.text.is-grey {
  --mod-text-color: var(--bal-text-color-grey);
}

.text.is-grey-dark {
  --mod-text-color: var(--bal-text-color-grey-dark);
}

.text.is-disabled {
  --mod-text-color: var(--bal-text-color-disabled);
}

.text.is-inverted-disabled {
  --mod-text-color: var(--bal-text-color-inverted-disabled);
}

.text.is-info {
  --mod-text-color: var(--bal-text-color-info);
}

.text.is-warning {
  --mod-text-color: var(--bal-text-color-warning);
}

.text.is-success {
  --mod-text-color: var(--bal-text-color-success);
}

.text.is-danger {
  --mod-text-color: var(--bal-text-color-danger);
}

.text.is-danger-hover {
  --mod-text-color: var(--bal-text-color-danger-hover);
}

.text.is-danger-active {
  --mod-text-color: var(--bal-text-color-danger-active);
}

.text.is-xxxxx-large {
  --mod-text-size: var(--bal-text-size-5xl-device);
}
.text.is-5xl {
  --mod-text-size: var(--bal-text-size-5xl-device);
}
.text.is-xxxx-large {
  --mod-text-size: var(--bal-text-size-4xl-device);
}
.text.is-4xl {
  --mod-text-size: var(--bal-text-size-4xl-device);
}
.text.is-xxx-large {
  --mod-text-size: var(--bal-text-size-3xl-device);
}
.text.is-3xl {
  --mod-text-size: var(--bal-text-size-3xl-device);
}
.text.is-xx-large {
  --mod-text-size: var(--bal-text-size-2xl-device);
}
.text.is-2xl {
  --mod-text-size: var(--bal-text-size-2xl-device);
}
.text.is-x-large {
  --mod-text-size: var(--bal-text-size-xl-device);
}
.text.is-xl {
  --mod-text-size: var(--bal-text-size-xl-device);
}
.text.is-large {
  --mod-text-size: var(--bal-text-size-lg-device);
}
.text.is-lead {
  --mod-text-size: var(--bal-text-size-lg-device);
}
.text.is-lg {
  --mod-text-size: var(--bal-text-size-lg-device);
}
.text.is-medium {
  --mod-text-size: var(--bal-text-size-md-device);
}
.text.is-block {
  --mod-text-size: var(--bal-text-size-md-device);
}
.text.is-md {
  --mod-text-size: var(--bal-text-size-md-device);
}
.text.is-normal {
  --mod-text-size: var(--bal-text-size-base-device);
}
.text.is-base {
  --mod-text-size: var(--bal-text-size-base-device);
}
.text.is-small {
  --mod-text-size: var(--bal-text-size-sm-device);
}
.text.is-sm {
  --mod-text-size: var(--bal-text-size-sm-device);
}
.text.is-x-small {
  --mod-text-size: var(--bal-text-size-xs-device);
}
.text.is-xs {
  --mod-text-size: var(--bal-text-size-xs-device);
}

.text.is-heading, .text.is-title {
  --mod-text-family: var(--bal-text-family-heading);
  --mod-text-weight: var(--bal-text-weight-bold);
  --mod-text-line-height: var(--bal-text-line-height-heading);
}
.text.is-subtitle {
  --mod-text-family: var(--bal-text-family-heading);
  --mod-text-weight: var(--bal-text-weight-light);
  --mod-text-line-height: var(--bal-text-line-height-heading);
}

:host([heading]:not([heading=false])) {
  --mod-text-family: var(--bal-text-family-heading);
  --mod-text-weight: var(--bal-text-weight-bold);
  --mod-text-line-height: var(--bal-text-line-height-heading);
}

:host([subtitle]:not([subtitle=false])) {
  --mod-text-family: var(--bal-text-family-heading);
  --mod-text-weight: var(--bal-text-weight-light);
  --mod-text-line-height: var(--bal-text-line-height-heading);
}

.text.has-space-all {
  --mod-text-mt: var(--_text-space);
  --mod-text-mb: var(--_text-space);
}
.text.has-space-top {
  --mod-text-mt: var(--_text-space);
  --mod-text-mb: 0;
}
.text.has-space-bottom {
  --mod-text-mb: var(--_text-space);
}
.text.has-space-none {
  --mod-text-mb: 0;
  --mod-text-mt: 0;
}

:host([space=all]) {
  --text-mt: var(--_text-space);
  --text-mb: var(--_text-space);
}

:host([space=top]) {
  --text-mt: var(--_text-space);
  --text-mb: 0;
}

:host([space=bottom]) {
  --text-mt: 0;
  --text-mb: var(--_text-space);
}

:host([space=none]) {
  --text-mt: 0;
  --text-mb: 0;
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.tag:not(.token) {
  --_tag-m: var(--tag-m, var(--mod-tag-m, 0));
  --_tag-my: var(--tag-my, var(--mod-tag-my));
  --_tag-mx: var(--tag-mx, var(--mod-tag-mx));
  --_tag-ml: var(--tag-ml, var(--mod-tag-ml));
  --_tag-mr: var(--tag-mr, var(--mod-tag-mr));
  --_tag-mt: var(--tag-mt, var(--mod-tag-mt));
  --_tag-mb: var(--tag-mb, var(--mod-tag-mb));
  margin: var(--_tag-m);
  margin-inline: var(--_tag-mx);
  margin-block: var(--_tag-my);
  margin-left: var(--_tag-ml);
  margin-right: var(--_tag-mr);
  margin-top: var(--_tag-mt);
  margin-bottom: var(--_tag-mb);
  --_tag-position: var(--tag-position, var(--mod-tag-position, static));
  --_tag-top: var(--tag-top, var(--mod-tag-top));
  --_tag-right: var(--tag-right, var(--mod-tag-right));
  --_tag-bottom: var(--tag-bottom, var(--mod-tag-bottom));
  --_tag-left: var(--tag-left, var(--mod-tag-left));
  position: var(--_tag-position);
  top: var(--_tag-top);
  right: var(--_tag-right);
  bottom: var(--_tag-bottom);
  left: var(--_tag-left);
  --tag-min-height: 2rem;
  --tag-gap: 0.25rem;
  --tag-padding: var(--bal-tag-space-y) var(--bal-tag-space-x);
  --tag-radius: var(--bal-tag-radius-base);
  --tag-line-height: 1;
  --tag-color-text: var(--bal-tag-color-base-text);
  --tag-color-background: var(--bal-tag-color-base-background);
  --tag-font-family: var(--bal-tag-family);
  --tag-font-size: var(--bal-tag-size);
  --tag-font-weight: var(--bal-tag-weight);
  --tag-close-mr: calc(0.25rem * -1);
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.tag:not(.token) {
  margin: var(--tag-m);
  margin-inline: var(--tag-mx);
  margin-block: var(--tag-my);
  margin-left: var(--tag-ml);
  margin-right: var(--tag-mr);
  margin-top: var(--tag-mt);
  margin-bottom: var(--tag-mb);
  position: var(--tag-position);
  top: var(--tag-top);
  right: var(--tag-right);
  bottom: var(--tag-bottom);
  left: var(--tag-left);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  min-height: var(--tag-min-height);
  gap: var(--tag-gap);
  padding: var(--tag-padding);
  border-radius: var(--tag-radius);
  color: var(--tag-color-text);
  background-color: var(--tag-color-background);
  font-family: var(--tag-font-family);
  line-height: var(--tag-line-height);
  font-size: var(--tag-font-size);
  font-weight: var(--tag-font-weight);
}
.tag:not(.token) > .close,
.tag:not(.token) > bal-close {
  --bal-close-mr: var(--tag-close-mr);
}
.tag:not(.token) > bal-icon {
  --icon-size: 0.875rem;
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.tag:not(.token).is-primary {
  --tag-color-text: var(--bal-tag-color-primary-text);
  --tag-color-background: var(--bal-tag-color-primary-background);
}
.tag:not(.token).is-grey {
  --tag-color-text: var(--bal-tag-color-grey-text);
  --tag-color-background: var(--bal-tag-color-grey-background);
}
.tag:not(.token).is-success {
  --tag-color-text: var(--bal-tag-color-success-text);
  --tag-color-background: var(--bal-tag-color-success-background);
}
.tag:not(.token).is-info {
  --tag-color-text: var(--bal-tag-color-info-text);
  --tag-color-background: var(--bal-tag-color-info-background);
}
.tag:not(.token).is-warning {
  --tag-color-text: var(--bal-tag-color-warning-text);
  --tag-color-background: var(--bal-tag-color-warning-background);
}
.tag:not(.token).is-danger {
  --tag-color-text: var(--bal-tag-color-danger-text);
  --tag-color-background: var(--bal-tag-color-danger-background);
}
.tag:not(.token).is-purple {
  --tag-color-text: var(--bal-tag-color-purple-text);
  --tag-color-background: var(--bal-tag-color-purple-background);
}
.tag:not(.token).is-red {
  --tag-color-text: var(--bal-tag-color-red-text);
  --tag-color-background: var(--bal-tag-color-red-background);
}
.tag:not(.token).is-yellow {
  --tag-color-text: var(--bal-tag-color-yellow-text);
  --tag-color-background: var(--bal-tag-color-yellow-background);
}
.tag:not(.token).is-green {
  --tag-color-text: var(--bal-tag-color-green-text);
  --tag-color-background: var(--bal-tag-color-green-background);
}
.tag:not(.token).is-purple-dark {
  --tag-color-text: var(--bal-tag-color-purple-dark-text);
  --tag-color-background: var(--bal-tag-color-purple-dark-background);
}
.tag:not(.token).is-red-dark {
  --tag-color-text: var(--bal-tag-color-red-dark-text);
  --tag-color-background: var(--bal-tag-color-red-dark-background);
}
.tag:not(.token).is-yellow-dark {
  --tag-color-text: var(--bal-tag-color-yellow-dark-text);
  --tag-color-background: var(--bal-tag-color-yellow-dark-background);
}
.tag:not(.token).is-green-dark {
  --tag-color-text: var(--bal-tag-color-green-dark-text);
  --tag-color-background: var(--bal-tag-color-green-dark-background);
}
.tag:not(.token).is-purple-light {
  --tag-color-text: var(--bal-tag-color-purple-light-text);
  --tag-color-background: var(--bal-tag-color-purple-light-background);
}
.tag:not(.token).is-red-light {
  --tag-color-text: var(--bal-tag-color-red-light-text);
  --tag-color-background: var(--bal-tag-color-red-light-background);
}
.tag:not(.token).is-yellow-light {
  --tag-color-text: var(--bal-tag-color-yellow-light-text);
  --tag-color-background: var(--bal-tag-color-yellow-light-background);
}
.tag:not(.token).is-green-light {
  --tag-color-text: var(--bal-tag-color-green-light-text);
  --tag-color-background: var(--bal-tag-color-green-light-background);
}
.tag:not(.token).is-square {
  --tag-radius: var(--bal-tag-radius-square);
}
.tag:not(.token).is-pill {
  --tag-radius: var(--bal-tag-radius-pill);
}
.tag:not(.token).is-sm {
  --tag-min-height: 1.5rem;
  --tag-padding: var(--bal-tag-sm-space-y) var(--bal-tag-sm-space-x);
  --tag-font-size: var(--bal-tag-sm-size);
  --tag-font-weight: var(--bal-tag-sm-weight);
}
.tag:not(.token).is-md {
  --tag-min-height: 2.5rem;
  --tag-padding: var(--bal-tag-md-space-y) var(--bal-tag-md-space-x);
  --tag-font-size: var(--bal-tag-md-size);
  --tag-font-weight: var(--bal-tag-md-weight);
}
.tag:not(.token).is-lg {
  --tag-min-height: 3rem;
  --tag-padding: var(--bal-tag-lg-space-y) var(--bal-tag-lg-space-x);
  --tag-font-size: var(--bal-tag-lg-size);
  --tag-font-weight: var(--bal-tag-lg-weight);
}

/**
  * Overrides child component styles
  * --------------------------------
  * Define here the styles to override child components inside the tag component.
  * Example: close inside tag
  */
.tag:not(.token).is-sm > .close,
.tag:not(.token).is-sm > bal-close {
  --close-padding: 0.25rem;
  --close-size-icon: 10px;
}
.tag:not(.token).is-grey > .close,
.tag:not(.token).is-grey > bal-close, .tag:not(.token).is-info > .close,
.tag:not(.token).is-info > bal-close, .tag:not(.token).is-success > .close,
.tag:not(.token).is-success > bal-close, .tag:not(.token).is-danger > .close,
.tag:not(.token).is-danger > bal-close, .tag:not(.token).is-purple-dark > .close,
.tag:not(.token).is-purple-dark > bal-close, .tag:not(.token).is-red-dark > .close,
.tag:not(.token).is-red-dark > bal-close, .tag:not(.token).is-green-dark > .close,
.tag:not(.token).is-green-dark > bal-close, .tag:not(.token).is-yellow-dark > .close,
.tag:not(.token).is-yellow-dark > bal-close, .tag:not(.token).is-primary > .close,
.tag:not(.token).is-primary > bal-close {
  --close-color-icon: var(--bal-close-color-icon-inverted);
  --close-color-background-hover: var(--bal-close-color-background-inverted-hover);
  --close-color-background-active: var(--bal-close-color-background-inverted-active);
  --close-shadow-focus: var(--bal-close-shadow-outline-inverted);
}
.tag:not(.token).is-grey > bal-icon, .tag:not(.token).is-info > bal-icon, .tag:not(.token).is-success > bal-icon, .tag:not(.token).is-danger > bal-icon, .tag:not(.token).is-purple-dark > bal-icon, .tag:not(.token).is-red-dark > bal-icon, .tag:not(.token).is-green-dark > bal-icon, .tag:not(.token).is-yellow-dark > bal-icon, .tag:not(.token).is-primary > bal-icon {
  --bal-icon-color: var(--bal-close-color-icon-inverted);
}

/**
  * Tags container
  * --------------------------------
  * Define here the styles for tags container to be able to use a flex layout with gap.
  */
.tags {
  display: flex;
  gap: var(--bal-tag-space-x);
}

/**
  * Mixins
  */
/**
  * Basic Style
  */
.stack,
.stack-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column nowrap;
}

.stack {
  gap: 1rem;
}

.stack-content {
  flex: 1;
  height: 100%;
  gap: 0.25rem;
}

.stack > .stack,
.stack > .stack-content {
  align-self: stretch;
}

.stack.is-horizontal > .stack-content {
  align-self: center;
}

.stack.has-wrap,
.stack-content.has-wrap {
  flex-wrap: wrap;
}
.stack.as-row, .stack.is-horizontal, .stack.has-direction-row,
.stack-content.as-row,
.stack-content.is-horizontal,
.stack-content.has-direction-row {
  flex-flow: row nowrap;
  align-items: center;
}
.stack.as-row-reverse, .stack.is-horizontal-reverse, .stack.has-direction-row-reverse,
.stack-content.as-row-reverse,
.stack-content.is-horizontal-reverse,
.stack-content.has-direction-row-reverse {
  flex-flow: row-reverse nowrap;
  align-items: center;
}
.stack.as-col-reverse, .stack.is-vertical-reverse, .stack.has-direction-column-reverse,
.stack-content.as-col-reverse,
.stack-content.is-vertical-reverse,
.stack-content.has-direction-column-reverse {
  flex-flow: column-reverse nowrap;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-left, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-start,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-left,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-start {
  justify-content: flex-start;
  align-items: flex-start;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-center,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-center {
  justify-content: flex-start;
  align-items: center;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-right, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-end,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-right,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-end {
  justify-content: flex-start;
  align-items: flex-end;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-start, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-left, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-start,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-start,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-left,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-start {
  justify-content: center;
  align-items: flex-start;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center {
  justify-content: center;
  align-items: center;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-end, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-right, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-end,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-end,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-right,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-end {
  justify-content: center;
  align-items: flex-end;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-left, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-start,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-left,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-start {
  justify-content: flex-end;
  align-items: flex-start;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-center,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-center {
  justify-content: flex-end;
  align-items: center;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-right, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-end,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-right,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-end {
  justify-content: flex-end;
  align-items: flex-end;
}
.stack.as-row.align-top-left, .stack.as-row.align-top-start, .stack.is-horizontal.align-top-left, .stack.is-horizontal.align-top-start, .stack.has-direction-row.align-top-left, .stack.has-direction-row.align-top-start, .stack.as-row-reverse.align-top-left, .stack.as-row-reverse.align-top-start, .stack.is-horizontal-reverse.align-top-left, .stack.is-horizontal-reverse.align-top-start, .stack.has-direction-row-reverse.align-top-left, .stack.has-direction-row-reverse.align-top-start,
.stack-content.as-row.align-top-left,
.stack-content.as-row.align-top-start,
.stack-content.is-horizontal.align-top-left,
.stack-content.is-horizontal.align-top-start,
.stack-content.has-direction-row.align-top-left,
.stack-content.has-direction-row.align-top-start,
.stack-content.as-row-reverse.align-top-left,
.stack-content.as-row-reverse.align-top-start,
.stack-content.is-horizontal-reverse.align-top-left,
.stack-content.is-horizontal-reverse.align-top-start,
.stack-content.has-direction-row-reverse.align-top-left,
.stack-content.has-direction-row-reverse.align-top-start {
  align-items: flex-start;
  justify-content: flex-start;
}
.stack.as-row.align-top, .stack.as-row.align-top-center, .stack.is-horizontal.align-top, .stack.is-horizontal.align-top-center, .stack.has-direction-row.align-top, .stack.has-direction-row.align-top-center, .stack.as-row-reverse.align-top, .stack.as-row-reverse.align-top-center, .stack.is-horizontal-reverse.align-top, .stack.is-horizontal-reverse.align-top-center, .stack.has-direction-row-reverse.align-top, .stack.has-direction-row-reverse.align-top-center,
.stack-content.as-row.align-top,
.stack-content.as-row.align-top-center,
.stack-content.is-horizontal.align-top,
.stack-content.is-horizontal.align-top-center,
.stack-content.has-direction-row.align-top,
.stack-content.has-direction-row.align-top-center,
.stack-content.as-row-reverse.align-top,
.stack-content.as-row-reverse.align-top-center,
.stack-content.is-horizontal-reverse.align-top,
.stack-content.is-horizontal-reverse.align-top-center,
.stack-content.has-direction-row-reverse.align-top,
.stack-content.has-direction-row-reverse.align-top-center {
  align-items: flex-start;
  justify-content: center;
}
.stack.as-row.align-top-right, .stack.as-row.align-top-end, .stack.is-horizontal.align-top-right, .stack.is-horizontal.align-top-end, .stack.has-direction-row.align-top-right, .stack.has-direction-row.align-top-end, .stack.as-row-reverse.align-top-right, .stack.as-row-reverse.align-top-end, .stack.is-horizontal-reverse.align-top-right, .stack.is-horizontal-reverse.align-top-end, .stack.has-direction-row-reverse.align-top-right, .stack.has-direction-row-reverse.align-top-end,
.stack-content.as-row.align-top-right,
.stack-content.as-row.align-top-end,
.stack-content.is-horizontal.align-top-right,
.stack-content.is-horizontal.align-top-end,
.stack-content.has-direction-row.align-top-right,
.stack-content.has-direction-row.align-top-end,
.stack-content.as-row-reverse.align-top-right,
.stack-content.as-row-reverse.align-top-end,
.stack-content.is-horizontal-reverse.align-top-right,
.stack-content.is-horizontal-reverse.align-top-end,
.stack-content.has-direction-row-reverse.align-top-right,
.stack-content.has-direction-row-reverse.align-top-end {
  align-items: flex-start;
  justify-content: flex-end;
}
.stack.as-row.align-start, .stack.as-row.align-center-left, .stack.as-row.align-center-start, .stack.is-horizontal.align-start, .stack.is-horizontal.align-center-left, .stack.is-horizontal.align-center-start, .stack.has-direction-row.align-start, .stack.has-direction-row.align-center-left, .stack.has-direction-row.align-center-start, .stack.as-row-reverse.align-start, .stack.as-row-reverse.align-center-left, .stack.as-row-reverse.align-center-start, .stack.is-horizontal-reverse.align-start, .stack.is-horizontal-reverse.align-center-left, .stack.is-horizontal-reverse.align-center-start, .stack.has-direction-row-reverse.align-start, .stack.has-direction-row-reverse.align-center-left, .stack.has-direction-row-reverse.align-center-start,
.stack-content.as-row.align-start,
.stack-content.as-row.align-center-left,
.stack-content.as-row.align-center-start,
.stack-content.is-horizontal.align-start,
.stack-content.is-horizontal.align-center-left,
.stack-content.is-horizontal.align-center-start,
.stack-content.has-direction-row.align-start,
.stack-content.has-direction-row.align-center-left,
.stack-content.has-direction-row.align-center-start,
.stack-content.as-row-reverse.align-start,
.stack-content.as-row-reverse.align-center-left,
.stack-content.as-row-reverse.align-center-start,
.stack-content.is-horizontal-reverse.align-start,
.stack-content.is-horizontal-reverse.align-center-left,
.stack-content.is-horizontal-reverse.align-center-start,
.stack-content.has-direction-row-reverse.align-start,
.stack-content.has-direction-row-reverse.align-center-left,
.stack-content.has-direction-row-reverse.align-center-start {
  align-items: center;
  justify-content: flex-start;
}
.stack.as-row.align-center, .stack.is-horizontal.align-center, .stack.has-direction-row.align-center, .stack.as-row-reverse.align-center, .stack.is-horizontal-reverse.align-center, .stack.has-direction-row-reverse.align-center,
.stack-content.as-row.align-center,
.stack-content.is-horizontal.align-center,
.stack-content.has-direction-row.align-center,
.stack-content.as-row-reverse.align-center,
.stack-content.is-horizontal-reverse.align-center,
.stack-content.has-direction-row-reverse.align-center {
  align-items: center;
  justify-content: center;
}
.stack.as-row.align-end, .stack.as-row.align-center-right, .stack.as-row.align-center-end, .stack.is-horizontal.align-end, .stack.is-horizontal.align-center-right, .stack.is-horizontal.align-center-end, .stack.has-direction-row.align-end, .stack.has-direction-row.align-center-right, .stack.has-direction-row.align-center-end, .stack.as-row-reverse.align-end, .stack.as-row-reverse.align-center-right, .stack.as-row-reverse.align-center-end, .stack.is-horizontal-reverse.align-end, .stack.is-horizontal-reverse.align-center-right, .stack.is-horizontal-reverse.align-center-end, .stack.has-direction-row-reverse.align-end, .stack.has-direction-row-reverse.align-center-right, .stack.has-direction-row-reverse.align-center-end,
.stack-content.as-row.align-end,
.stack-content.as-row.align-center-right,
.stack-content.as-row.align-center-end,
.stack-content.is-horizontal.align-end,
.stack-content.is-horizontal.align-center-right,
.stack-content.is-horizontal.align-center-end,
.stack-content.has-direction-row.align-end,
.stack-content.has-direction-row.align-center-right,
.stack-content.has-direction-row.align-center-end,
.stack-content.as-row-reverse.align-end,
.stack-content.as-row-reverse.align-center-right,
.stack-content.as-row-reverse.align-center-end,
.stack-content.is-horizontal-reverse.align-end,
.stack-content.is-horizontal-reverse.align-center-right,
.stack-content.is-horizontal-reverse.align-center-end,
.stack-content.has-direction-row-reverse.align-end,
.stack-content.has-direction-row-reverse.align-center-right,
.stack-content.has-direction-row-reverse.align-center-end {
  align-items: center;
  justify-content: flex-end;
}
.stack.as-row.align-bottom-left, .stack.as-row.align-bottom-start, .stack.is-horizontal.align-bottom-left, .stack.is-horizontal.align-bottom-start, .stack.has-direction-row.align-bottom-left, .stack.has-direction-row.align-bottom-start, .stack.as-row-reverse.align-bottom-left, .stack.as-row-reverse.align-bottom-start, .stack.is-horizontal-reverse.align-bottom-left, .stack.is-horizontal-reverse.align-bottom-start, .stack.has-direction-row-reverse.align-bottom-left, .stack.has-direction-row-reverse.align-bottom-start,
.stack-content.as-row.align-bottom-left,
.stack-content.as-row.align-bottom-start,
.stack-content.is-horizontal.align-bottom-left,
.stack-content.is-horizontal.align-bottom-start,
.stack-content.has-direction-row.align-bottom-left,
.stack-content.has-direction-row.align-bottom-start,
.stack-content.as-row-reverse.align-bottom-left,
.stack-content.as-row-reverse.align-bottom-start,
.stack-content.is-horizontal-reverse.align-bottom-left,
.stack-content.is-horizontal-reverse.align-bottom-start,
.stack-content.has-direction-row-reverse.align-bottom-left,
.stack-content.has-direction-row-reverse.align-bottom-start {
  align-items: flex-end;
  justify-content: flex-start;
}
.stack.as-row.align-bottom, .stack.as-row.align-bottom-center, .stack.is-horizontal.align-bottom, .stack.is-horizontal.align-bottom-center, .stack.has-direction-row.align-bottom, .stack.has-direction-row.align-bottom-center, .stack.as-row-reverse.align-bottom, .stack.as-row-reverse.align-bottom-center, .stack.is-horizontal-reverse.align-bottom, .stack.is-horizontal-reverse.align-bottom-center, .stack.has-direction-row-reverse.align-bottom, .stack.has-direction-row-reverse.align-bottom-center,
.stack-content.as-row.align-bottom,
.stack-content.as-row.align-bottom-center,
.stack-content.is-horizontal.align-bottom,
.stack-content.is-horizontal.align-bottom-center,
.stack-content.has-direction-row.align-bottom,
.stack-content.has-direction-row.align-bottom-center,
.stack-content.as-row-reverse.align-bottom,
.stack-content.as-row-reverse.align-bottom-center,
.stack-content.is-horizontal-reverse.align-bottom,
.stack-content.is-horizontal-reverse.align-bottom-center,
.stack-content.has-direction-row-reverse.align-bottom,
.stack-content.has-direction-row-reverse.align-bottom-center {
  align-items: flex-end;
  justify-content: center;
}
.stack.as-row.align-bottom-right, .stack.as-row.align-bottom-end, .stack.is-horizontal.align-bottom-right, .stack.is-horizontal.align-bottom-end, .stack.has-direction-row.align-bottom-right, .stack.has-direction-row.align-bottom-end, .stack.as-row-reverse.align-bottom-right, .stack.as-row-reverse.align-bottom-end, .stack.is-horizontal-reverse.align-bottom-right, .stack.is-horizontal-reverse.align-bottom-end, .stack.has-direction-row-reverse.align-bottom-right, .stack.has-direction-row-reverse.align-bottom-end,
.stack-content.as-row.align-bottom-right,
.stack-content.as-row.align-bottom-end,
.stack-content.is-horizontal.align-bottom-right,
.stack-content.is-horizontal.align-bottom-end,
.stack-content.has-direction-row.align-bottom-right,
.stack-content.has-direction-row.align-bottom-end,
.stack-content.as-row-reverse.align-bottom-right,
.stack-content.as-row-reverse.align-bottom-end,
.stack-content.is-horizontal-reverse.align-bottom-right,
.stack-content.is-horizontal-reverse.align-bottom-end,
.stack-content.has-direction-row-reverse.align-bottom-right,
.stack-content.has-direction-row-reverse.align-bottom-end {
  align-items: flex-end;
  justify-content: flex-end;
}

/**
 * Text Alignment for stack-content
 */
.stack-content, .stack-content.align-top-left, .stack-content.align-top-start, .stack-content.align-start, .stack-content.align-center-left, .stack-content.align-center-start, .stack-content.align-bottom-left, .stack-content.align-bottom-start {
  text-align: left;
}
.stack-content.align-top, .stack-content.align-top-center, .stack-content.align-center, .stack-content.align-bottom, .stack-content.align-bottom-center {
  text-align: center;
}
.stack-content.align-top-right, .stack-content.align-top-end, .stack-content.align-end, .stack-content.align-center-right, .stack-content.align-center-end, .stack-content.align-bottom-right, .stack-content.align-bottom-end {
  text-align: right;
}
.stack-content.text-left {
  text-align: left;
}
.stack-content.text-center {
  text-align: center;
}
.stack-content.text-right {
  text-align: right;
}

.stack.fit-content,
.stack-content.fit-content {
  flex: unset;
  width: -moz-fit-content;
  width: fit-content;
}
.stack.p-2xs,
.stack-content.p-2xs {
  padding: var(--bal-space-2xs);
}
@media screen and (min-width: 769px) {
  .stack.p-2xs,
  .stack-content.p-2xs {
    padding: var(--bal-space-2xs-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.p-2xs,
  .stack-content.p-2xs {
    padding: var(--bal-space-2xs-desktop);
  }
}
.stack.p-xs,
.stack-content.p-xs {
  padding: var(--bal-space-xs);
}
@media screen and (min-width: 769px) {
  .stack.p-xs,
  .stack-content.p-xs {
    padding: var(--bal-space-xs-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.p-xs,
  .stack-content.p-xs {
    padding: var(--bal-space-xs-desktop);
  }
}
.stack.p-sm,
.stack-content.p-sm {
  padding: var(--bal-space-sm);
}
@media screen and (min-width: 769px) {
  .stack.p-sm,
  .stack-content.p-sm {
    padding: var(--bal-space-sm-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.p-sm,
  .stack-content.p-sm {
    padding: var(--bal-space-sm-desktop);
  }
}
.stack.p-base,
.stack-content.p-base {
  padding: var(--bal-space-base);
}
@media screen and (min-width: 769px) {
  .stack.p-base,
  .stack-content.p-base {
    padding: var(--bal-space-base-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.p-base,
  .stack-content.p-base {
    padding: var(--bal-space-base-desktop);
  }
}
.stack.p-md,
.stack-content.p-md {
  padding: var(--bal-space-md);
}
@media screen and (min-width: 769px) {
  .stack.p-md,
  .stack-content.p-md {
    padding: var(--bal-space-md-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.p-md,
  .stack-content.p-md {
    padding: var(--bal-space-md-desktop);
  }
}
.stack.p-lg,
.stack-content.p-lg {
  padding: var(--bal-space-lg);
}
@media screen and (min-width: 769px) {
  .stack.p-lg,
  .stack-content.p-lg {
    padding: var(--bal-space-lg-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.p-lg,
  .stack-content.p-lg {
    padding: var(--bal-space-lg-desktop);
  }
}
.stack.p-xl,
.stack-content.p-xl {
  padding: var(--bal-space-xl);
}
@media screen and (min-width: 769px) {
  .stack.p-xl,
  .stack-content.p-xl {
    padding: var(--bal-space-xl-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.p-xl,
  .stack-content.p-xl {
    padding: var(--bal-space-xl-desktop);
  }
}
.stack.p-2xl,
.stack-content.p-2xl {
  padding: var(--bal-space-2xl);
}
@media screen and (min-width: 769px) {
  .stack.p-2xl,
  .stack-content.p-2xl {
    padding: var(--bal-space-2xl-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.p-2xl,
  .stack-content.p-2xl {
    padding: var(--bal-space-2xl-desktop);
  }
}
.stack.px-2xs,
.stack-content.px-2xs {
  padding-left: var(--bal-space-2xs);
  padding-right: var(--bal-space-2xs);
}
@media screen and (min-width: 769px) {
  .stack.px-2xs,
  .stack-content.px-2xs {
    padding-left: var(--bal-space-2xs-tablet);
    padding-right: var(--bal-space-2xs-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.px-2xs,
  .stack-content.px-2xs {
    padding-left: var(--bal-space-2xs-desktop);
    padding-right: var(--bal-space-2xs-desktop);
  }
}
.stack.px-xs,
.stack-content.px-xs {
  padding-left: var(--bal-space-xs);
  padding-right: var(--bal-space-xs);
}
@media screen and (min-width: 769px) {
  .stack.px-xs,
  .stack-content.px-xs {
    padding-left: var(--bal-space-xs-tablet);
    padding-right: var(--bal-space-xs-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.px-xs,
  .stack-content.px-xs {
    padding-left: var(--bal-space-xs-desktop);
    padding-right: var(--bal-space-xs-desktop);
  }
}
.stack.px-sm,
.stack-content.px-sm {
  padding-left: var(--bal-space-sm);
  padding-right: var(--bal-space-sm);
}
@media screen and (min-width: 769px) {
  .stack.px-sm,
  .stack-content.px-sm {
    padding-left: var(--bal-space-sm-tablet);
    padding-right: var(--bal-space-sm-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.px-sm,
  .stack-content.px-sm {
    padding-left: var(--bal-space-sm-desktop);
    padding-right: var(--bal-space-sm-desktop);
  }
}
.stack.px-base,
.stack-content.px-base {
  padding-left: var(--bal-space-base);
  padding-right: var(--bal-space-base);
}
@media screen and (min-width: 769px) {
  .stack.px-base,
  .stack-content.px-base {
    padding-left: var(--bal-space-base-tablet);
    padding-right: var(--bal-space-base-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.px-base,
  .stack-content.px-base {
    padding-left: var(--bal-space-base-desktop);
    padding-right: var(--bal-space-base-desktop);
  }
}
.stack.px-md,
.stack-content.px-md {
  padding-left: var(--bal-space-md);
  padding-right: var(--bal-space-md);
}
@media screen and (min-width: 769px) {
  .stack.px-md,
  .stack-content.px-md {
    padding-left: var(--bal-space-md-tablet);
    padding-right: var(--bal-space-md-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.px-md,
  .stack-content.px-md {
    padding-left: var(--bal-space-md-desktop);
    padding-right: var(--bal-space-md-desktop);
  }
}
.stack.px-lg,
.stack-content.px-lg {
  padding-left: var(--bal-space-lg);
  padding-right: var(--bal-space-lg);
}
@media screen and (min-width: 769px) {
  .stack.px-lg,
  .stack-content.px-lg {
    padding-left: var(--bal-space-lg-tablet);
    padding-right: var(--bal-space-lg-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.px-lg,
  .stack-content.px-lg {
    padding-left: var(--bal-space-lg-desktop);
    padding-right: var(--bal-space-lg-desktop);
  }
}
.stack.px-xl,
.stack-content.px-xl {
  padding-left: var(--bal-space-xl);
  padding-right: var(--bal-space-xl);
}
@media screen and (min-width: 769px) {
  .stack.px-xl,
  .stack-content.px-xl {
    padding-left: var(--bal-space-xl-tablet);
    padding-right: var(--bal-space-xl-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.px-xl,
  .stack-content.px-xl {
    padding-left: var(--bal-space-xl-desktop);
    padding-right: var(--bal-space-xl-desktop);
  }
}
.stack.px-2xl,
.stack-content.px-2xl {
  padding-left: var(--bal-space-2xl);
  padding-right: var(--bal-space-2xl);
}
@media screen and (min-width: 769px) {
  .stack.px-2xl,
  .stack-content.px-2xl {
    padding-left: var(--bal-space-2xl-tablet);
    padding-right: var(--bal-space-2xl-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.px-2xl,
  .stack-content.px-2xl {
    padding-left: var(--bal-space-2xl-desktop);
    padding-right: var(--bal-space-2xl-desktop);
  }
}
.stack.py-2xs,
.stack-content.py-2xs {
  padding-top: var(--bal-space-2xs);
  padding-bottom: var(--bal-space-2xs);
}
@media screen and (min-width: 769px) {
  .stack.py-2xs,
  .stack-content.py-2xs {
    padding-top: var(--bal-space-2xs-tablet);
    padding-bottom: var(--bal-space-2xs-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.py-2xs,
  .stack-content.py-2xs {
    padding-top: var(--bal-space-2xs-desktop);
    padding-bottom: var(--bal-space-2xs-desktop);
  }
}
.stack.py-xs,
.stack-content.py-xs {
  padding-top: var(--bal-space-xs);
  padding-bottom: var(--bal-space-xs);
}
@media screen and (min-width: 769px) {
  .stack.py-xs,
  .stack-content.py-xs {
    padding-top: var(--bal-space-xs-tablet);
    padding-bottom: var(--bal-space-xs-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.py-xs,
  .stack-content.py-xs {
    padding-top: var(--bal-space-xs-desktop);
    padding-bottom: var(--bal-space-xs-desktop);
  }
}
.stack.py-sm,
.stack-content.py-sm {
  padding-top: var(--bal-space-sm);
  padding-bottom: var(--bal-space-sm);
}
@media screen and (min-width: 769px) {
  .stack.py-sm,
  .stack-content.py-sm {
    padding-top: var(--bal-space-sm-tablet);
    padding-bottom: var(--bal-space-sm-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.py-sm,
  .stack-content.py-sm {
    padding-top: var(--bal-space-sm-desktop);
    padding-bottom: var(--bal-space-sm-desktop);
  }
}
.stack.py-base,
.stack-content.py-base {
  padding-top: var(--bal-space-base);
  padding-bottom: var(--bal-space-base);
}
@media screen and (min-width: 769px) {
  .stack.py-base,
  .stack-content.py-base {
    padding-top: var(--bal-space-base-tablet);
    padding-bottom: var(--bal-space-base-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.py-base,
  .stack-content.py-base {
    padding-top: var(--bal-space-base-desktop);
    padding-bottom: var(--bal-space-base-desktop);
  }
}
.stack.py-md,
.stack-content.py-md {
  padding-top: var(--bal-space-md);
  padding-bottom: var(--bal-space-md);
}
@media screen and (min-width: 769px) {
  .stack.py-md,
  .stack-content.py-md {
    padding-top: var(--bal-space-md-tablet);
    padding-bottom: var(--bal-space-md-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.py-md,
  .stack-content.py-md {
    padding-top: var(--bal-space-md-desktop);
    padding-bottom: var(--bal-space-md-desktop);
  }
}
.stack.py-lg,
.stack-content.py-lg {
  padding-top: var(--bal-space-lg);
  padding-bottom: var(--bal-space-lg);
}
@media screen and (min-width: 769px) {
  .stack.py-lg,
  .stack-content.py-lg {
    padding-top: var(--bal-space-lg-tablet);
    padding-bottom: var(--bal-space-lg-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.py-lg,
  .stack-content.py-lg {
    padding-top: var(--bal-space-lg-desktop);
    padding-bottom: var(--bal-space-lg-desktop);
  }
}
.stack.py-xl,
.stack-content.py-xl {
  padding-top: var(--bal-space-xl);
  padding-bottom: var(--bal-space-xl);
}
@media screen and (min-width: 769px) {
  .stack.py-xl,
  .stack-content.py-xl {
    padding-top: var(--bal-space-xl-tablet);
    padding-bottom: var(--bal-space-xl-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.py-xl,
  .stack-content.py-xl {
    padding-top: var(--bal-space-xl-desktop);
    padding-bottom: var(--bal-space-xl-desktop);
  }
}
.stack.py-2xl,
.stack-content.py-2xl {
  padding-top: var(--bal-space-2xl);
  padding-bottom: var(--bal-space-2xl);
}
@media screen and (min-width: 769px) {
  .stack.py-2xl,
  .stack-content.py-2xl {
    padding-top: var(--bal-space-2xl-tablet);
    padding-bottom: var(--bal-space-2xl-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.py-2xl,
  .stack-content.py-2xl {
    padding-top: var(--bal-space-2xl-desktop);
    padding-bottom: var(--bal-space-2xl-desktop);
  }
}
.stack.p-none,
.stack-content.p-none {
  padding: 0;
}
.stack.px-none,
.stack-content.px-none {
  padding-left: 0;
  padding-right: 0;
}
.stack.py-none,
.stack-content.py-none {
  padding-top: 0;
  padding-bottom: 0;
}
.stack.gap-auto, .stack.gap-x-auto, .stack.gap-col-auto, .stack.gap-y-auto, .stack.gap-row-auto, .stack.has-space-auto, .stack.has-space-col-auto, .stack.has-space-row-auto,
.stack-content.gap-auto,
.stack-content.gap-x-auto,
.stack-content.gap-col-auto,
.stack-content.gap-y-auto,
.stack-content.gap-row-auto,
.stack-content.has-space-auto,
.stack-content.has-space-col-auto,
.stack-content.has-space-row-auto {
  justify-content: space-between;
}
.stack.gap-none, .stack.has-space-none,
.stack-content.gap-none,
.stack-content.has-space-none {
  gap: 0;
}
@media screen and (min-width: 769px) {
  .stack.gap-none, .stack.has-space-none,
  .stack-content.gap-none,
  .stack-content.has-space-none {
    gap: 0;
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-none, .stack.has-space-none,
  .stack-content.gap-none,
  .stack-content.has-space-none {
    gap: 0;
  }
}
.stack.gap-x-none, .stack.gap-col-none, .stack.has-space-col-none,
.stack-content.gap-x-none,
.stack-content.gap-col-none,
.stack-content.has-space-col-none {
  -moz-column-gap: 0;
       column-gap: 0;
}
@media screen and (min-width: 769px) {
  .stack.gap-x-none, .stack.gap-col-none, .stack.has-space-col-none,
  .stack-content.gap-x-none,
  .stack-content.gap-col-none,
  .stack-content.has-space-col-none {
    -moz-column-gap: 0;
         column-gap: 0;
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-x-none, .stack.gap-col-none, .stack.has-space-col-none,
  .stack-content.gap-x-none,
  .stack-content.gap-col-none,
  .stack-content.has-space-col-none {
    -moz-column-gap: 0;
         column-gap: 0;
  }
}
.stack.gap-y-none, .stack.gap-row-none, .stack.has-space-row-none,
.stack-content.gap-y-none,
.stack-content.gap-row-none,
.stack-content.has-space-row-none {
  row-gap: 0;
}
@media screen and (min-width: 769px) {
  .stack.gap-y-none, .stack.gap-row-none, .stack.has-space-row-none,
  .stack-content.gap-y-none,
  .stack-content.gap-row-none,
  .stack-content.has-space-row-none {
    row-gap: 0;
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-y-none, .stack.gap-row-none, .stack.has-space-row-none,
  .stack-content.gap-y-none,
  .stack-content.gap-row-none,
  .stack-content.has-space-row-none {
    row-gap: 0;
  }
}
.stack.gap-2xs, .stack.has-space-2xs,
.stack-content.gap-2xs,
.stack-content.has-space-2xs {
  gap: var(--bal-space-2xs);
}
@media screen and (min-width: 769px) {
  .stack.gap-2xs, .stack.has-space-2xs,
  .stack-content.gap-2xs,
  .stack-content.has-space-2xs {
    gap: var(--bal-space-2xs-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-2xs, .stack.has-space-2xs,
  .stack-content.gap-2xs,
  .stack-content.has-space-2xs {
    gap: var(--bal-space-2xs-desktop);
  }
}
.stack.gap-xs, .stack.has-space-xs,
.stack-content.gap-xs,
.stack-content.has-space-xs {
  gap: var(--bal-space-xs);
}
@media screen and (min-width: 769px) {
  .stack.gap-xs, .stack.has-space-xs,
  .stack-content.gap-xs,
  .stack-content.has-space-xs {
    gap: var(--bal-space-xs-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-xs, .stack.has-space-xs,
  .stack-content.gap-xs,
  .stack-content.has-space-xs {
    gap: var(--bal-space-xs-desktop);
  }
}
.stack.gap-sm, .stack.has-space-sm,
.stack-content.gap-sm,
.stack-content.has-space-sm {
  gap: var(--bal-space-sm);
}
@media screen and (min-width: 769px) {
  .stack.gap-sm, .stack.has-space-sm,
  .stack-content.gap-sm,
  .stack-content.has-space-sm {
    gap: var(--bal-space-sm-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-sm, .stack.has-space-sm,
  .stack-content.gap-sm,
  .stack-content.has-space-sm {
    gap: var(--bal-space-sm-desktop);
  }
}
.stack.gap-base, .stack.has-space-base,
.stack-content.gap-base,
.stack-content.has-space-base {
  gap: var(--bal-space-base);
}
@media screen and (min-width: 769px) {
  .stack.gap-base, .stack.has-space-base,
  .stack-content.gap-base,
  .stack-content.has-space-base {
    gap: var(--bal-space-base-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-base, .stack.has-space-base,
  .stack-content.gap-base,
  .stack-content.has-space-base {
    gap: var(--bal-space-base-desktop);
  }
}
.stack.gap-md, .stack.has-space-md,
.stack-content.gap-md,
.stack-content.has-space-md {
  gap: var(--bal-space-md);
}
@media screen and (min-width: 769px) {
  .stack.gap-md, .stack.has-space-md,
  .stack-content.gap-md,
  .stack-content.has-space-md {
    gap: var(--bal-space-md-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-md, .stack.has-space-md,
  .stack-content.gap-md,
  .stack-content.has-space-md {
    gap: var(--bal-space-md-desktop);
  }
}
.stack.gap-lg, .stack.has-space-lg,
.stack-content.gap-lg,
.stack-content.has-space-lg {
  gap: var(--bal-space-lg);
}
@media screen and (min-width: 769px) {
  .stack.gap-lg, .stack.has-space-lg,
  .stack-content.gap-lg,
  .stack-content.has-space-lg {
    gap: var(--bal-space-lg-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-lg, .stack.has-space-lg,
  .stack-content.gap-lg,
  .stack-content.has-space-lg {
    gap: var(--bal-space-lg-desktop);
  }
}
.stack.gap-xl, .stack.has-space-xl,
.stack-content.gap-xl,
.stack-content.has-space-xl {
  gap: var(--bal-space-xl);
}
@media screen and (min-width: 769px) {
  .stack.gap-xl, .stack.has-space-xl,
  .stack-content.gap-xl,
  .stack-content.has-space-xl {
    gap: var(--bal-space-xl-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-xl, .stack.has-space-xl,
  .stack-content.gap-xl,
  .stack-content.has-space-xl {
    gap: var(--bal-space-xl-desktop);
  }
}
.stack.gap-2xl, .stack.has-space-2xl,
.stack-content.gap-2xl,
.stack-content.has-space-2xl {
  gap: var(--bal-space-2xl);
}
@media screen and (min-width: 769px) {
  .stack.gap-2xl, .stack.has-space-2xl,
  .stack-content.gap-2xl,
  .stack-content.has-space-2xl {
    gap: var(--bal-space-2xl-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-2xl, .stack.has-space-2xl,
  .stack-content.gap-2xl,
  .stack-content.has-space-2xl {
    gap: var(--bal-space-2xl-desktop);
  }
}
.stack.gap-x-2xs, .stack.gap-col-2xs, .stack.has-space-col-2xs,
.stack-content.gap-x-2xs,
.stack-content.gap-col-2xs,
.stack-content.has-space-col-2xs {
  -moz-column-gap: var(--bal-space-2xs);
       column-gap: var(--bal-space-2xs);
}
@media screen and (min-width: 769px) {
  .stack.gap-x-2xs, .stack.gap-col-2xs, .stack.has-space-col-2xs,
  .stack-content.gap-x-2xs,
  .stack-content.gap-col-2xs,
  .stack-content.has-space-col-2xs {
    -moz-column-gap: var(--bal-space-2xs-tablet);
         column-gap: var(--bal-space-2xs-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-x-2xs, .stack.gap-col-2xs, .stack.has-space-col-2xs,
  .stack-content.gap-x-2xs,
  .stack-content.gap-col-2xs,
  .stack-content.has-space-col-2xs {
    -moz-column-gap: var(--bal-space-2xs-desktop);
         column-gap: var(--bal-space-2xs-desktop);
  }
}
.stack.gap-x-xs, .stack.gap-col-xs, .stack.has-space-col-xs,
.stack-content.gap-x-xs,
.stack-content.gap-col-xs,
.stack-content.has-space-col-xs {
  -moz-column-gap: var(--bal-space-xs);
       column-gap: var(--bal-space-xs);
}
@media screen and (min-width: 769px) {
  .stack.gap-x-xs, .stack.gap-col-xs, .stack.has-space-col-xs,
  .stack-content.gap-x-xs,
  .stack-content.gap-col-xs,
  .stack-content.has-space-col-xs {
    -moz-column-gap: var(--bal-space-xs-tablet);
         column-gap: var(--bal-space-xs-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-x-xs, .stack.gap-col-xs, .stack.has-space-col-xs,
  .stack-content.gap-x-xs,
  .stack-content.gap-col-xs,
  .stack-content.has-space-col-xs {
    -moz-column-gap: var(--bal-space-xs-desktop);
         column-gap: var(--bal-space-xs-desktop);
  }
}
.stack.gap-x-sm, .stack.gap-col-sm, .stack.has-space-col-sm,
.stack-content.gap-x-sm,
.stack-content.gap-col-sm,
.stack-content.has-space-col-sm {
  -moz-column-gap: var(--bal-space-sm);
       column-gap: var(--bal-space-sm);
}
@media screen and (min-width: 769px) {
  .stack.gap-x-sm, .stack.gap-col-sm, .stack.has-space-col-sm,
  .stack-content.gap-x-sm,
  .stack-content.gap-col-sm,
  .stack-content.has-space-col-sm {
    -moz-column-gap: var(--bal-space-sm-tablet);
         column-gap: var(--bal-space-sm-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-x-sm, .stack.gap-col-sm, .stack.has-space-col-sm,
  .stack-content.gap-x-sm,
  .stack-content.gap-col-sm,
  .stack-content.has-space-col-sm {
    -moz-column-gap: var(--bal-space-sm-desktop);
         column-gap: var(--bal-space-sm-desktop);
  }
}
.stack.gap-x-base, .stack.gap-col-base, .stack.has-space-col-base,
.stack-content.gap-x-base,
.stack-content.gap-col-base,
.stack-content.has-space-col-base {
  -moz-column-gap: var(--bal-space-base);
       column-gap: var(--bal-space-base);
}
@media screen and (min-width: 769px) {
  .stack.gap-x-base, .stack.gap-col-base, .stack.has-space-col-base,
  .stack-content.gap-x-base,
  .stack-content.gap-col-base,
  .stack-content.has-space-col-base {
    -moz-column-gap: var(--bal-space-base-tablet);
         column-gap: var(--bal-space-base-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-x-base, .stack.gap-col-base, .stack.has-space-col-base,
  .stack-content.gap-x-base,
  .stack-content.gap-col-base,
  .stack-content.has-space-col-base {
    -moz-column-gap: var(--bal-space-base-desktop);
         column-gap: var(--bal-space-base-desktop);
  }
}
.stack.gap-x-md, .stack.gap-col-md, .stack.has-space-col-md,
.stack-content.gap-x-md,
.stack-content.gap-col-md,
.stack-content.has-space-col-md {
  -moz-column-gap: var(--bal-space-md);
       column-gap: var(--bal-space-md);
}
@media screen and (min-width: 769px) {
  .stack.gap-x-md, .stack.gap-col-md, .stack.has-space-col-md,
  .stack-content.gap-x-md,
  .stack-content.gap-col-md,
  .stack-content.has-space-col-md {
    -moz-column-gap: var(--bal-space-md-tablet);
         column-gap: var(--bal-space-md-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-x-md, .stack.gap-col-md, .stack.has-space-col-md,
  .stack-content.gap-x-md,
  .stack-content.gap-col-md,
  .stack-content.has-space-col-md {
    -moz-column-gap: var(--bal-space-md-desktop);
         column-gap: var(--bal-space-md-desktop);
  }
}
.stack.gap-x-lg, .stack.gap-col-lg, .stack.has-space-col-lg,
.stack-content.gap-x-lg,
.stack-content.gap-col-lg,
.stack-content.has-space-col-lg {
  -moz-column-gap: var(--bal-space-lg);
       column-gap: var(--bal-space-lg);
}
@media screen and (min-width: 769px) {
  .stack.gap-x-lg, .stack.gap-col-lg, .stack.has-space-col-lg,
  .stack-content.gap-x-lg,
  .stack-content.gap-col-lg,
  .stack-content.has-space-col-lg {
    -moz-column-gap: var(--bal-space-lg-tablet);
         column-gap: var(--bal-space-lg-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-x-lg, .stack.gap-col-lg, .stack.has-space-col-lg,
  .stack-content.gap-x-lg,
  .stack-content.gap-col-lg,
  .stack-content.has-space-col-lg {
    -moz-column-gap: var(--bal-space-lg-desktop);
         column-gap: var(--bal-space-lg-desktop);
  }
}
.stack.gap-x-xl, .stack.gap-col-xl, .stack.has-space-col-xl,
.stack-content.gap-x-xl,
.stack-content.gap-col-xl,
.stack-content.has-space-col-xl {
  -moz-column-gap: var(--bal-space-xl);
       column-gap: var(--bal-space-xl);
}
@media screen and (min-width: 769px) {
  .stack.gap-x-xl, .stack.gap-col-xl, .stack.has-space-col-xl,
  .stack-content.gap-x-xl,
  .stack-content.gap-col-xl,
  .stack-content.has-space-col-xl {
    -moz-column-gap: var(--bal-space-xl-tablet);
         column-gap: var(--bal-space-xl-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-x-xl, .stack.gap-col-xl, .stack.has-space-col-xl,
  .stack-content.gap-x-xl,
  .stack-content.gap-col-xl,
  .stack-content.has-space-col-xl {
    -moz-column-gap: var(--bal-space-xl-desktop);
         column-gap: var(--bal-space-xl-desktop);
  }
}
.stack.gap-x-2xl, .stack.gap-col-2xl, .stack.has-space-col-2xl,
.stack-content.gap-x-2xl,
.stack-content.gap-col-2xl,
.stack-content.has-space-col-2xl {
  -moz-column-gap: var(--bal-space-2xl);
       column-gap: var(--bal-space-2xl);
}
@media screen and (min-width: 769px) {
  .stack.gap-x-2xl, .stack.gap-col-2xl, .stack.has-space-col-2xl,
  .stack-content.gap-x-2xl,
  .stack-content.gap-col-2xl,
  .stack-content.has-space-col-2xl {
    -moz-column-gap: var(--bal-space-2xl-tablet);
         column-gap: var(--bal-space-2xl-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-x-2xl, .stack.gap-col-2xl, .stack.has-space-col-2xl,
  .stack-content.gap-x-2xl,
  .stack-content.gap-col-2xl,
  .stack-content.has-space-col-2xl {
    -moz-column-gap: var(--bal-space-2xl-desktop);
         column-gap: var(--bal-space-2xl-desktop);
  }
}
.stack.gap-y-2xs, .stack.gap-row-2xs, .stack.has-space-row-2xs,
.stack-content.gap-y-2xs,
.stack-content.gap-row-2xs,
.stack-content.has-space-row-2xs {
  row-gap: var(--bal-space-2xs);
}
@media screen and (min-width: 769px) {
  .stack.gap-y-2xs, .stack.gap-row-2xs, .stack.has-space-row-2xs,
  .stack-content.gap-y-2xs,
  .stack-content.gap-row-2xs,
  .stack-content.has-space-row-2xs {
    row-gap: var(--bal-space-2xs-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-y-2xs, .stack.gap-row-2xs, .stack.has-space-row-2xs,
  .stack-content.gap-y-2xs,
  .stack-content.gap-row-2xs,
  .stack-content.has-space-row-2xs {
    row-gap: var(--bal-space-2xs-desktop);
  }
}
.stack.gap-y-xs, .stack.gap-row-xs, .stack.has-space-row-xs,
.stack-content.gap-y-xs,
.stack-content.gap-row-xs,
.stack-content.has-space-row-xs {
  row-gap: var(--bal-space-xs);
}
@media screen and (min-width: 769px) {
  .stack.gap-y-xs, .stack.gap-row-xs, .stack.has-space-row-xs,
  .stack-content.gap-y-xs,
  .stack-content.gap-row-xs,
  .stack-content.has-space-row-xs {
    row-gap: var(--bal-space-xs-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-y-xs, .stack.gap-row-xs, .stack.has-space-row-xs,
  .stack-content.gap-y-xs,
  .stack-content.gap-row-xs,
  .stack-content.has-space-row-xs {
    row-gap: var(--bal-space-xs-desktop);
  }
}
.stack.gap-y-sm, .stack.gap-row-sm, .stack.has-space-row-sm,
.stack-content.gap-y-sm,
.stack-content.gap-row-sm,
.stack-content.has-space-row-sm {
  row-gap: var(--bal-space-sm);
}
@media screen and (min-width: 769px) {
  .stack.gap-y-sm, .stack.gap-row-sm, .stack.has-space-row-sm,
  .stack-content.gap-y-sm,
  .stack-content.gap-row-sm,
  .stack-content.has-space-row-sm {
    row-gap: var(--bal-space-sm-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-y-sm, .stack.gap-row-sm, .stack.has-space-row-sm,
  .stack-content.gap-y-sm,
  .stack-content.gap-row-sm,
  .stack-content.has-space-row-sm {
    row-gap: var(--bal-space-sm-desktop);
  }
}
.stack.gap-y-base, .stack.gap-row-base, .stack.has-space-row-base,
.stack-content.gap-y-base,
.stack-content.gap-row-base,
.stack-content.has-space-row-base {
  row-gap: var(--bal-space-base);
}
@media screen and (min-width: 769px) {
  .stack.gap-y-base, .stack.gap-row-base, .stack.has-space-row-base,
  .stack-content.gap-y-base,
  .stack-content.gap-row-base,
  .stack-content.has-space-row-base {
    row-gap: var(--bal-space-base-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-y-base, .stack.gap-row-base, .stack.has-space-row-base,
  .stack-content.gap-y-base,
  .stack-content.gap-row-base,
  .stack-content.has-space-row-base {
    row-gap: var(--bal-space-base-desktop);
  }
}
.stack.gap-y-md, .stack.gap-row-md, .stack.has-space-row-md,
.stack-content.gap-y-md,
.stack-content.gap-row-md,
.stack-content.has-space-row-md {
  row-gap: var(--bal-space-md);
}
@media screen and (min-width: 769px) {
  .stack.gap-y-md, .stack.gap-row-md, .stack.has-space-row-md,
  .stack-content.gap-y-md,
  .stack-content.gap-row-md,
  .stack-content.has-space-row-md {
    row-gap: var(--bal-space-md-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-y-md, .stack.gap-row-md, .stack.has-space-row-md,
  .stack-content.gap-y-md,
  .stack-content.gap-row-md,
  .stack-content.has-space-row-md {
    row-gap: var(--bal-space-md-desktop);
  }
}
.stack.gap-y-lg, .stack.gap-row-lg, .stack.has-space-row-lg,
.stack-content.gap-y-lg,
.stack-content.gap-row-lg,
.stack-content.has-space-row-lg {
  row-gap: var(--bal-space-lg);
}
@media screen and (min-width: 769px) {
  .stack.gap-y-lg, .stack.gap-row-lg, .stack.has-space-row-lg,
  .stack-content.gap-y-lg,
  .stack-content.gap-row-lg,
  .stack-content.has-space-row-lg {
    row-gap: var(--bal-space-lg-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-y-lg, .stack.gap-row-lg, .stack.has-space-row-lg,
  .stack-content.gap-y-lg,
  .stack-content.gap-row-lg,
  .stack-content.has-space-row-lg {
    row-gap: var(--bal-space-lg-desktop);
  }
}
.stack.gap-y-xl, .stack.gap-row-xl, .stack.has-space-row-xl,
.stack-content.gap-y-xl,
.stack-content.gap-row-xl,
.stack-content.has-space-row-xl {
  row-gap: var(--bal-space-xl);
}
@media screen and (min-width: 769px) {
  .stack.gap-y-xl, .stack.gap-row-xl, .stack.has-space-row-xl,
  .stack-content.gap-y-xl,
  .stack-content.gap-row-xl,
  .stack-content.has-space-row-xl {
    row-gap: var(--bal-space-xl-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-y-xl, .stack.gap-row-xl, .stack.has-space-row-xl,
  .stack-content.gap-y-xl,
  .stack-content.gap-row-xl,
  .stack-content.has-space-row-xl {
    row-gap: var(--bal-space-xl-desktop);
  }
}
.stack.gap-y-2xl, .stack.gap-row-2xl, .stack.has-space-row-2xl,
.stack-content.gap-y-2xl,
.stack-content.gap-row-2xl,
.stack-content.has-space-row-2xl {
  row-gap: var(--bal-space-2xl);
}
@media screen and (min-width: 769px) {
  .stack.gap-y-2xl, .stack.gap-row-2xl, .stack.has-space-row-2xl,
  .stack-content.gap-y-2xl,
  .stack-content.gap-row-2xl,
  .stack-content.has-space-row-2xl {
    row-gap: var(--bal-space-2xl-tablet);
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-y-2xl, .stack.gap-row-2xl, .stack.has-space-row-2xl,
  .stack-content.gap-y-2xl,
  .stack-content.gap-row-2xl,
  .stack-content.has-space-row-2xl {
    row-gap: var(--bal-space-2xl-desktop);
  }
}

.stack > bal-radio {
  margin-top: -0.25rem;
}

bal-content > bal-text,
.stack-content > bal-text,
bal-content > .text,
.stack-content > .text,
.stack > bal-text,
.stack > bal-label,
.stack > bal-heading,
.stack > bal-heading:not(:last-child),
.stack > .label,
.stack > .heading,
.stack > .heading:not(:last-child),
.stack > .title,
.stack > .title:not(:last-child),
.stack > .subtitle,
.stack > .subtitle:not(:last-child),
.stack > .link,
.stack > .is-link,
.stack > p {
  margin: 0;
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.snackbar {
  --_snackbar-position: var(--snackbar-position, var(--mod-snackbar-position, static));
  --_snackbar-top: var(--snackbar-top, var(--mod-snackbar-top));
  --_snackbar-right: var(--snackbar-right, var(--mod-snackbar-right));
  --_snackbar-bottom: var(--snackbar-bottom, var(--mod-snackbar-bottom));
  --_snackbar-left: var(--snackbar-left, var(--mod-snackbar-left));
  position: var(--_snackbar-position);
  top: var(--_snackbar-top);
  right: var(--_snackbar-right);
  bottom: var(--_snackbar-bottom);
  left: var(--_snackbar-left);
  --_snackbar-m: var(--snackbar-m, var(--mod-snackbar-m, 0));
  --_snackbar-my: var(--snackbar-my, var(--mod-snackbar-my));
  --_snackbar-mx: var(--snackbar-mx, var(--mod-snackbar-mx));
  --_snackbar-ml: var(--snackbar-ml, var(--mod-snackbar-ml));
  --_snackbar-mr: var(--snackbar-mr, var(--mod-snackbar-mr));
  --_snackbar-mt: var(--snackbar-mt, var(--mod-snackbar-mt));
  --_snackbar-mb: var(--snackbar-mb, var(--mod-snackbar-mb));
  margin: var(--_snackbar-m);
  margin-inline: var(--_snackbar-mx);
  margin-block: var(--_snackbar-my);
  margin-left: var(--_snackbar-ml);
  margin-right: var(--_snackbar-mr);
  margin-top: var(--_snackbar-mt);
  margin-bottom: var(--_snackbar-mb);
  --_snackbar-shadow: var(--snackbar-shadow, var(--mod-snackbar-shadow, var(--bal-shadow-box-base)));
  --_snackbar-radius: var(--snackbar-radius, var(--mod-snackbar-radius, var(--bal-snackbar-radius)));
  --_snackbar-color-background: var(--snackbar-color-background, var(--mod-snackbar-color-background, var(--bal-snackbar-base-background)));
  --_snackbar-color-text: var(--snackbar-color-text, var(--mod-snackbar-color-text, var(--bal-snackbar-base-text)));
  --_snackbar-icon: var(--snackbar-icon, var(--mod-snackbar-icon, var(--bal-snackbar-base-icon)));
  --_snackbar-heading-family: var(--snackbar-heading-family, var(--mod-snackbar-heading-family, var(--bal-text-family-heading)));
  --_snackbar-heading-weight: var(--snackbar-heading-weight, var(--mod-snackbar-heading-weight, var(--bal-text-weight-bold)));
  --_snackbar-heading-size: var(--snackbar-heading-size, var(--mod-snackbar-heading-size, var(--bal-text-size-base-device)));
  --_snackbar-heading-line-height: var(--snackbar-heading-line-height, var(--mod-snackbar-heading-line-height, var(--bal-text-line-height-heading)));
  --_snackbar-content-family: var(--snackbar-content-family, var(--mod-snackbar-content-family, var(--bal-text-family-body)));
  --_snackbar-content-weight: var(--snackbar-content-weight, var(--mod-snackbar-content-weight, inherit));
  --_snackbar-content-size: var(--snackbar-content-size, var(--mod-snackbar-content-size, var(--bal-text-size-sm-device)));
  --_snackbar-content-line-height: var(--snackbar-content-line-height, var(--mod-snackbar-content-line-height, var(--bal-text-line-height-body)));
  --_snackbar-gap: var(--snackbar-gap, var(--mod-snackbar-gap, 0.125rem));
  --_snackbar-pl: var(--snackbar-pl, var(--mod-snackbar-pl, 3rem));
  --_snackbar-pt: var(--snackbar-pt, var(--mod-snackbar-pt, 1rem));
  --_snackbar-pr: var(--snackbar-pr, var(--mod-snackbar-pr, 1rem));
  --_snackbar-pb: var(--snackbar-pb, var(--mod-snackbar-pb, 1rem));
  --_snackbar-animation-start-opacity: var(--snackbar-animation-start-opacity, var(--mod-snackbar-animation-start-opacity, 1));
  --_snackbar-animation-start-transform: var(--snackbar-animation-start-transform, var(--mod-snackbar-animation-start-transform, none));
  --_snackbar-animation-transition: var(--snackbar-animation-transition, var(--mod-snackbar-animation-transition, none));
  --_snackbar-animation-end-opacity: var(--snackbar-animation-end-opacity, var(--mod-snackbar-animation-end-opacity, 1));
  --_snackbar-animation-end-transform: var(--snackbar-animation-end-transform, var(--mod-snackbar-animation-end-transform, none));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.snackbar {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex: 1;
  position: relative;
  hyphens: auto;
  color: var(--_snackbar-color-text);
  background: var(--_snackbar-color-background);
  border-radius: var(--_snackbar-radius);
  box-shadow: var(--_snackbar-shadow);
  padding-top: var(--_snackbar-pt);
  padding-right: var(--_snackbar-pr);
  padding-bottom: var(--_snackbar-pb);
  padding-left: var(--_snackbar-pl);
  -moz-column-gap: calc(var(--_snackbar-gap) * 4);
       column-gap: calc(var(--_snackbar-gap) * 4);
  row-gap: var(--_snackbar-gap);
  align-items: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "message";
}
.snackbar:not(:has(bal-icon, .icon))::before {
  display: block;
  background-color: currentColor;
  color: currentColor;
  forced-color-adjust: preserve-parent-color;
  position: absolute;
  height: 1.5rem;
  width: 1.5rem;
  top: var(--_snackbar-pt);
  left: 0.825rem;
  content: "";
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  mask-image: var(--_snackbar-icon);
  -webkit-mask-image: var(--_snackbar-icon);
}
.snackbar:has(bal-icon) {
  --mod-snackbar-pl: 1rem;
}
.snackbar bal-icon {
  --icon-color: null;
  --icon-size: var(--bal-icon-size-lg);
}
.snackbar:where(:has(> h2, > strong, > b)):where(:not(:has(> .button, > bal-button, > .buttons))):where(:not(:has(> .close, > bal-close))) {
  grid-template-columns: 1fr;
  grid-template-areas: "heading" "message";
}
.snackbar:where(:has(> .button, > bal-button, > .buttons)):where(:not(:has(> .close, > bal-close))) {
  grid-template-columns: 1fr auto;
  grid-template-areas: "message" "action";
}
.snackbar:where(:has(> .button, > bal-button, > .buttons)):where(:not(:has(> .close, > bal-close))):has(> h2, > strong, > b) {
  grid-template-areas: "heading" "message" "action";
}
.snackbar:where(:has(> .close, > bal-close)):where(:not(:has(> .button, > bal-button, > .buttons))) {
  grid-template-columns: 1fr auto;
  grid-template-areas: "message close";
}
.snackbar:where(:has(> .close, > bal-close)):where(:not(:has(> .button, > bal-button, > .buttons))):has(> h2, > strong, > b) {
  grid-template-areas: "heading close" "message message";
}
.snackbar:where(:has(> .button, > bal-button, > .buttons)):where(:has(> .close, > bal-close)) {
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "message close" "action action";
}
.snackbar:where(:has(> .button, > bal-button, > .buttons)):where(:has(> .close, > bal-close)):has(> h2, > strong, > b) {
  grid-template-areas: "heading close" "message message" "action action";
}
.snackbar:where(:has(> bal-icon)):where(:not(:has(> .button, > bal-button, > .buttons))):where(:not(:has(> .close, > bal-close))) {
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon message";
}
.snackbar:where(:has(> bal-icon)):where(:not(:has(> .button, > bal-button, > .buttons))):where(:not(:has(> .close, > bal-close))):has(> h2, > strong, > b) {
  grid-template-areas: "icon heading" "icon message";
}
.snackbar:where(:has(> bal-icon)):where(:has(> .button, > bal-button, > .buttons)):where(:not(:has(> .close, > bal-close))) {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon message" ". action";
}
.snackbar:where(:has(> bal-icon)):where(:has(> .button, > bal-button, > .buttons)):where(:not(:has(> .close, > bal-close))):has(> h2, > strong, > b) {
  grid-template-areas: "icon heading" "icon message" ". action";
}
.snackbar:where(:has(> bal-icon)):where(:has(> .close, > bal-close)):where(:not(:has(> .button, > bal-button, > .buttons))) {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon message close";
}
.snackbar:where(:has(> bal-icon)):where(:has(> .close, > bal-close)):where(:not(:has(> .button, > bal-button, > .buttons))):has(> h2, > strong, > b) {
  grid-template-areas: "icon heading close" ". message message";
}
.snackbar:where(:has(> bal-icon)):where(:has(> .button, > bal-button, > .buttons)):where(:has(> .close, > bal-close)) {
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "icon message close" ". action action";
}
.snackbar:where(:has(> bal-icon)):where(:has(> .button, > bal-button, > .buttons)):where(:has(> .close, > bal-close)):has(> h2, > strong, > b) {
  grid-template-areas: "icon heading close" "icon message message" ". action action";
}
.snackbar, .snackbar > span, .snackbar > p {
  font-family: var(--_snackbar-content-family);
  font-size: var(--_snackbar-content-size);
  font-weight: var(--_snackbar-content-weight);
  line-height: var(--_snackbar-content-line-height);
}
.snackbar > span, .snackbar > p {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  margin: 0 !important;
  grid-area: message;
}
.snackbar > strong, .snackbar > b, .snackbar > h2 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  font-family: var(--_snackbar-heading-family);
  font-weight: var(--_snackbar-heading-weight);
  line-height: var(--_snackbar-heading-line-height);
  font-size: var(--_snackbar-heading-size);
  margin: 0 !important;
  grid-area: heading;
}
.snackbar bal-button,
.snackbar .button {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  --button-mt: 0.5rem;
  grid-area: action;
  align-self: center;
}
.snackbar bal-button-group,
.snackbar .buttons {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  --button-mt: 1rem;
  grid-area: action;
  align-self: center;
}
.snackbar .close,
.snackbar bal-close {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: close;
  align-self: flex-start;
}
.snackbar bal-icon {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: icon;
  align-self: flex-start;
}

/**
  * Variants
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.snackbar.is-info {
  --mod-snackbar-color-text: var(--bal-snackbar-info-text);
  --mod-snackbar-color-border: var(--bal-snackbar-info-border);
  --mod-snackbar-color-background: var(--bal-snackbar-info-background);
  --mod-snackbar-icon: var(--bal-snackbar-info-icon);
}
.snackbar.is-success {
  --mod-snackbar-color-text: var(--bal-snackbar-success-text);
  --mod-snackbar-color-border: var(--bal-snackbar-success-border);
  --mod-snackbar-color-background: var(--bal-snackbar-success-background);
  --mod-snackbar-icon: var(--bal-snackbar-success-icon);
}
.snackbar.is-warning {
  --mod-snackbar-color-text: var(--bal-snackbar-warning-text);
  --mod-snackbar-color-border: var(--bal-snackbar-warning-border);
  --mod-snackbar-color-background: var(--bal-snackbar-warning-background);
  --mod-snackbar-icon: var(--bal-snackbar-warning-icon);
}
.snackbar.is-danger {
  --mod-snackbar-color-text: var(--bal-snackbar-danger-text);
  --mod-snackbar-color-border: var(--bal-snackbar-danger-border);
  --mod-snackbar-color-background: var(--bal-snackbar-danger-background);
  --mod-snackbar-icon: var(--bal-snackbar-danger-icon);
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.notification {
  --_notification-position: var(--notification-position, var(--mod-notification-position, static));
  --_notification-top: var(--notification-top, var(--mod-notification-top));
  --_notification-right: var(--notification-right, var(--mod-notification-right));
  --_notification-bottom: var(--notification-bottom, var(--mod-notification-bottom));
  --_notification-left: var(--notification-left, var(--mod-notification-left));
  position: var(--_notification-position);
  top: var(--_notification-top);
  right: var(--_notification-right);
  bottom: var(--_notification-bottom);
  left: var(--_notification-left);
  --_notification-m: var(--notification-m, var(--mod-notification-m, 0));
  --_notification-my: var(--notification-my, var(--mod-notification-my));
  --_notification-mx: var(--notification-mx, var(--mod-notification-mx));
  --_notification-ml: var(--notification-ml, var(--mod-notification-ml));
  --_notification-mr: var(--notification-mr, var(--mod-notification-mr));
  --_notification-mt: var(--notification-mt, var(--mod-notification-mt));
  --_notification-mb: var(--notification-mb, var(--mod-notification-mb));
  margin: var(--_notification-m);
  margin-inline: var(--_notification-mx);
  margin-block: var(--_notification-my);
  margin-left: var(--_notification-ml);
  margin-right: var(--_notification-mr);
  margin-top: var(--_notification-mt);
  margin-bottom: var(--_notification-mb);
  --_notification-radius: var(--notification-radius, var(--mod-notification-radius, var(--bal-notification-radius-base)));
  --_notification-color-background: var(--notification-color-background, var(--mod-notification-color-background, var(--bal-notification-color-base-background)));
  --_notification-color-border: var(--notification-color-border, var(--mod-notification-color-border, var(--bal-notification-color-base-border)));
  --_notification-color-text: var(--notification-color-text, var(--mod-notification-color-text, var(--bal-notification-color-base-text)));
  --_notification-heading-family: var(--notification-heading-family, var(--mod-notification-heading-family, var(--bal-text-family-heading)));
  --_notification-heading-weight: var(--notification-heading-weight, var(--mod-notification-heading-weight, var(--bal-text-weight-bold)));
  --_notification-heading-size: var(--notification-heading-size, var(--mod-notification-heading-size, var(--bal-text-size-lg-device)));
  --_notification-heading-line-height: var(--notification-heading-line-height, var(--mod-notification-heading-line-height, var(--bal-text-line-height-heading)));
  --_notification-content-family: var(--notification-content-family, var(--mod-notification-content-family, var(--bal-text-family-body)));
  --_notification-content-weight: var(--notification-content-weight, var(--mod-notification-content-weight, inherit));
  --_notification-content-size: var(--notification-content-size, var(--mod-notification-content-size, var(--bal-text-size-base-device)));
  --_notification-content-line-height: var(--notification-content-line-height, var(--mod-notification-content-line-height, var(--bal-text-line-height-body)));
  --_notification-icon: var(--notification-icon, var(--mod-notification-icon, var(--bal-notification-color-base-icon)));
  --_notification-icon-display: var(--notification-icon-display, var(--mod-notification-icon-display, block));
  --_notification-space: var(--notification-space, var(--mod-notification-space, var(--bal-card-space-base-device, 24px)));
  --_notification-space-left: var(--notification-space-left, var(--mod-notification-space-left, var(--bal-card-space-base-device, 24px)));
  --_notification-space-top: var(--notification-space-top, var(--mod-notification-space-top, var(--bal-card-space-base-device, 24px)));
  --_notification-space-right: var(--notification-space-right, var(--mod-notification-space-right, var(--bal-card-space-base-device, 24px)));
  --_notification-space-bottom: var(--notification-space-bottom, var(--mod-notification-space-bottom, var(--bal-card-space-base-device, 24px)));
  --_notification-close-offset: var(--notification-close-offset, var(--mod-notification-close-offset, 2rem));
  --_notification-gap: var(--notification-gap, var(--mod-notification-gap, 0.125rem));
  --_notification-close-position: var(--notification-close-position, var(--mod-notification-close-position, absolute));
  --_notification-close-right: var(--notification-close-right, var(--mod-notification-close-right, var(--_notification-space)));
  --_notification-close-top: var(--notification-close-top, var(--mod-notification-close-top, var(--_notification-space)));
  --_notification-animation-start-opacity: var(--notification-animation-start-opacity, var(--mod-notification-animation-start-opacity, 1));
  --_notification-animation-start-transform: var(--notification-animation-start-transform, var(--mod-notification-animation-start-transform, none));
  --_notification-animation-transition: var(--notification-animation-transition, var(--mod-notification-animation-transition, none));
  --_notification-animation-end-opacity: var(--notification-animation-end-opacity, var(--mod-notification-animation-end-opacity, 1));
  --_notification-animation-end-transform: var(--notification-animation-end-transform, var(--mod-notification-animation-end-transform, none));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.notification {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  flex: 1;
  position: relative;
  hyphens: auto;
  border: var(--bal-border-width-base) solid var(--_notification-color-border);
  border-radius: var(--_notification-radius);
  background: var(--_notification-color-background);
  color: var(--_notification-color-text);
  padding-top: var(--_notification-space-top);
  padding-right: var(--_notification-space-right);
  padding-bottom: var(--_notification-space-bottom);
  padding-left: var(--_notification-space-left);
  display: flex;
  flex-direction: column;
  gap: var(--_notification-gap);
}
.notification:has(> bal-close), .notification:has(> .close) {
  padding-right: var(--_notification-close-offset);
}
.notification bal-close,
.notification .close {
  position: var(--_notification-close-position);
  top: var(--_notification-close-top);
  right: var(--_notification-close-right);
}
.notification bal-button,
.notification a.button,
.notification button.button {
  --button-mt: calc(var(--_notification-space) - var(--_notification-gap));
}
.notification > strong, .notification > b, .notification > h2 {
  font-family: var(--_notification-heading-family);
  font-weight: var(--_notification-heading-weight);
  line-height: var(--_notification-heading-line-height);
  font-size: var(--_notification-heading-size);
  margin: 0 !important;
}
.notification > span, .notification > p {
  font-family: var(--_notification-content-family);
  font-size: var(--_notification-content-size);
  font-weight: var(--_notification-content-weight);
  line-height: var(--_notification-content-line-height);
  margin: 0 !important;
}
.notification::before {
  display: var(--_notification-icon-display);
  background-color: currentColor;
  color: currentColor;
  forced-color-adjust: preserve-parent-color;
  position: absolute;
  height: 1.5rem;
  width: 1.5rem;
  left: 0.825rem;
  top: calc((var(--_notification-space)));
  content: "";
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  mask-image: var(--_notification-icon);
  -webkit-mask-image: var(--_notification-icon);
}

/**
  * Variants
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
/**
 * Toast Variant
 * --------------------------------
 * Define here the styles for the toast variant of the notification component.
 */
.notification.is-toast {
  --mod-notification-radius: var(--bal-notification-radius-alert);
  --mod-notification-space: var(--bal-space-base-device);
  --mod-notification-space-top: var(--bal-space-base-device);
  --mod-notification-space-right: var(--bal-space-base-device);
  --mod-notification-space-bottom: var(--bal-space-base-device);
  --mod-notification-space-left: var(--bal-space-base-device);
  --mod-notification-heading-size: var(--bal-text-size-base-device);
  --mod-notification-content-size: var(--bal-text-size-sm-device);
  --mod-notification-close-position: static;
  --mod-notification-close-top: initial;
  --mod-notification-close-right: initial;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "message action close";
  -moz-column-gap: calc(var(--_notification-gap) * 4);
       column-gap: calc(var(--_notification-gap) * 4);
  row-gap: var(--_notification-gap);
  align-items: center;
  box-shadow: var(--bal-shadow-base);
}
.notification.is-toast:has(> h2, > strong, > b) {
  grid-template-areas: "heading action close" "message action close";
}
.notification.is-toast bal-button,
.notification.is-toast .button {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  --button-mt: 0;
  grid-area: action;
  align-self: center;
}
.notification.is-toast .close,
.notification.is-toast bal-close {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 5;
  grid-area: close;
  align-self: center;
}
.notification.is-toast > strong, .notification.is-toast > b, .notification.is-toast > h2 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: heading;
}
.notification.is-toast ::slotted {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: message;
}
.notification.is-toast slot, .notification.is-toast > span, .notification.is-toast > p {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: message;
}

/**
  * States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.notification.has-no-icon {
  --mod-notification-icon-display: none;
}
.notification:not(.has-no-icon) {
  --mod-notification-space-left: 3rem;
}

.notification.is-info {
  --mod-notification-color-text: var(--bal-notification-color-info-text);
  --mod-notification-color-border: var(--bal-notification-color-info-border);
  --mod-notification-color-background: var(--bal-notification-color-info-background);
  --mod-notification-icon: var(--bal-notification-color-info-icon);
}
.notification.is-success {
  --mod-notification-color-text: var(--bal-notification-color-success-text);
  --mod-notification-color-border: var(--bal-notification-color-success-border);
  --mod-notification-color-background: var(--bal-notification-color-success-background);
  --mod-notification-icon: var(--bal-notification-color-success-icon);
}
.notification.is-warning {
  --mod-notification-color-text: var(--bal-notification-color-warning-text);
  --mod-notification-color-border: var(--bal-notification-color-warning-border);
  --mod-notification-color-background: var(--bal-notification-color-warning-background);
  --mod-notification-icon: var(--bal-notification-color-warning-icon);
}
.notification.is-danger {
  --mod-notification-color-text: var(--bal-notification-color-danger-text);
  --mod-notification-color-border: var(--bal-notification-color-danger-border);
  --mod-notification-color-background: var(--bal-notification-color-danger-background);
  --mod-notification-icon: var(--bal-notification-color-danger-icon);
}
.notification.is-outline-base {
  --mod-notification-color-text: var(--bal-notification-color-outline-base-text);
  --mod-notification-color-border: var(--bal-notification-color-outline-base-border);
  --mod-notification-color-background: var(--bal-notification-color-outline-base-background);
  --mod-notification-icon: var(--bal-notification-color-outline-base-icon);
}
.notification.is-outline-purple {
  --mod-notification-color-text: var(--bal-notification-color-outline-purple-text);
  --mod-notification-color-border: var(--bal-notification-color-outline-purple-border);
  --mod-notification-color-background: var(--bal-notification-color-outline-purple-background);
  --mod-notification-icon: var(--bal-notification-color-outline-purple-icon);
}
.notification.is-outline-green {
  --mod-notification-color-text: var(--bal-notification-color-outline-green-text);
  --mod-notification-color-border: var(--bal-notification-color-outline-green-border);
  --mod-notification-color-background: var(--bal-notification-color-outline-green-background);
  --mod-notification-icon: var(--bal-notification-color-outline-green-icon);
}
.notification.is-outline-yellow {
  --mod-notification-color-text: var(--bal-notification-color-outline-yellow-text);
  --mod-notification-color-border: var(--bal-notification-color-outline-yellow-border);
  --mod-notification-color-background: var(--bal-notification-color-outline-yellow-background);
  --mod-notification-icon: var(--bal-notification-color-outline-yellow-icon);
}
.notification.is-outline-red {
  --mod-notification-color-text: var(--bal-notification-color-outline-red-text);
  --mod-notification-color-border: var(--bal-notification-color-outline-red-border);
  --mod-notification-color-background: var(--bal-notification-color-outline-red-background);
  --mod-notification-icon: var(--bal-notification-color-outline-red-icon);
}

.notification.is-sm {
  --mod-notification-space: var(--bal-card-space-sm-device);
  --mod-notification-space-top: var(--bal-card-space-sm-device);
  --mod-notification-space-right: var(--bal-card-space-sm-device);
  --mod-notification-space-bottom: var(--bal-card-space-sm-device);
  --mod-notification-space-left: var(--bal-card-space-sm-device);
}
.notification.is-md {
  --mod-notification-space: var(--bal-card-space-md-device);
  --mod-notification-space-top: var(--bal-card-space-md-device);
  --mod-notification-space-right: var(--bal-card-space-md-device);
  --mod-notification-space-bottom: var(--bal-card-space-md-device);
  --mod-notification-space-left: var(--bal-card-space-md-device);
}
.notification.is-lg {
  --mod-notification-space: var(--bal-card-space-lg-device);
  --mod-notification-space-top: var(--bal-card-space-lg-device);
  --mod-notification-space-right: var(--bal-card-space-lg-device);
  --mod-notification-space-bottom: var(--bal-card-space-lg-device);
  --mod-notification-space-left: var(--bal-card-space-lg-device);
}

/**
  * Basic Style
  */
.content > a:-moz-any-link:not(.button) {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  hyphens: auto;
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--bal-link-family);
  font-weight: var(--bal-link-weight);
  border-radius: var(--bal-radius-base);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: var(--bal-link-border-width);
  -moz-transition-property: color, background-color, border-color, box-shadow;
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  outline: none;
}
a.link:not(.button),
a.is-link:not(.button),
.content > a:any-link:not(.button) {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  hyphens: auto;
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--bal-link-family);
  font-weight: var(--bal-link-weight);
  border-radius: var(--bal-radius-base);
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: var(--bal-link-border-width);
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  outline: none;
}
.content > a:-moz-any-link:not(.button)::-moz-focus-inner {
  border: 0;
}
a.link:not(.button)::-moz-focus-inner,
a.is-link:not(.button)::-moz-focus-inner,
.content > a:any-link:not(.button)::-moz-focus-inner {
  border: 0;
}
.content > a:-moz-any-link:not(.button) > strong {
  color: currentcolor;
}
a.link:not(.button) > strong,
a.is-link:not(.button) > strong,
.content > a:any-link:not(.button) > strong {
  color: currentcolor;
}
.content > a:-moz-any-link:not(.button):not(.is-inverted) {
  color: var(--bal-link-color-base);
}
a.link:not(.button):not(.is-inverted),
a.is-link:not(.button):not(.is-inverted),
.content > a:any-link:not(.button):not(.is-inverted) {
  color: var(--bal-link-color-base);
}
.content > a:-moz-any-link:not(.button):not(.is-inverted) bal-icon {
  --bal-icon-color: var(--bal-link-color-base);
}
a.link:not(.button):not(.is-inverted) bal-icon,
a.is-link:not(.button):not(.is-inverted) bal-icon,
.content > a:any-link:not(.button):not(.is-inverted) bal-icon {
  --bal-icon-color: var(--bal-link-color-base);
}
@media (hover: hover) and (pointer: fine) {
  .content > a:-moz-any-link:not(.button):not(.is-inverted):hover, .content > a:-moz-any-link:not(.button):not(.is-inverted).is-hovered {
    color: var(--bal-link-color-base-hover);
  }
  a.link:not(.button):not(.is-inverted):hover, a.link:not(.button):not(.is-inverted).is-hovered,
  a.is-link:not(.button):not(.is-inverted):hover,
  a.is-link:not(.button):not(.is-inverted).is-hovered,
  .content > a:any-link:not(.button):not(.is-inverted):hover,
  .content > a:any-link:not(.button):not(.is-inverted).is-hovered {
    color: var(--bal-link-color-base-hover);
  }
  .content > a:-moz-any-link:not(.button):not(.is-inverted):hover bal-icon, .content > a:-moz-any-link:not(.button):not(.is-inverted).is-hovered bal-icon {
    --bal-icon-color: var(--bal-link-color-base-hover);
  }
  a.link:not(.button):not(.is-inverted):hover bal-icon, a.link:not(.button):not(.is-inverted).is-hovered bal-icon,
  a.is-link:not(.button):not(.is-inverted):hover bal-icon,
  a.is-link:not(.button):not(.is-inverted).is-hovered bal-icon,
  .content > a:any-link:not(.button):not(.is-inverted):hover bal-icon,
  .content > a:any-link:not(.button):not(.is-inverted).is-hovered bal-icon {
    --bal-icon-color: var(--bal-link-color-base-hover);
  }
}
.content > a:-moz-any-link:not(.button):not(.is-inverted):active, .content > a:-moz-any-link:not(.button):not(.is-inverted).is-active {
  color: var(--bal-link-color-base-active);
}
a.link:not(.button):not(.is-inverted):active, a.link:not(.button):not(.is-inverted).is-active,
a.is-link:not(.button):not(.is-inverted):active,
a.is-link:not(.button):not(.is-inverted).is-active,
.content > a:any-link:not(.button):not(.is-inverted):active,
.content > a:any-link:not(.button):not(.is-inverted).is-active {
  color: var(--bal-link-color-base-active);
}
.content > a:-moz-any-link:not(.button):not(.is-inverted):active bal-icon, .content > a:-moz-any-link:not(.button):not(.is-inverted).is-active bal-icon {
  --bal-icon-color: var(--bal-link-color-base-active);
}
a.link:not(.button):not(.is-inverted):active bal-icon, a.link:not(.button):not(.is-inverted).is-active bal-icon,
a.is-link:not(.button):not(.is-inverted):active bal-icon,
a.is-link:not(.button):not(.is-inverted).is-active bal-icon,
.content > a:any-link:not(.button):not(.is-inverted):active bal-icon,
.content > a:any-link:not(.button):not(.is-inverted).is-active bal-icon {
  --bal-icon-color: var(--bal-link-color-base-active);
}
@media (hover: hover) and (pointer: fine) {
  .content > a:-moz-any-link:not(.button):not(.is-inverted):focus-visible:not(:active), .content > a:-moz-any-link:not(.button):not(.is-inverted).is-focused:not(:active) {
    box-shadow: var(--bal-interaction-focus-color-border) 0 0 0 2px, var(--bal-interaction-focus-color-start) 0 0 0 5px !important;
  }
  a.link:not(.button):not(.is-inverted):focus-visible:not(:active), a.link:not(.button):not(.is-inverted).is-focused:not(:active),
  a.is-link:not(.button):not(.is-inverted):focus-visible:not(:active),
  a.is-link:not(.button):not(.is-inverted).is-focused:not(:active),
  .content > a:any-link:not(.button):not(.is-inverted):focus-visible:not(:active),
  .content > a:any-link:not(.button):not(.is-inverted).is-focused:not(:active) {
    box-shadow: var(--bal-interaction-focus-color-border) 0 0 0 2px, var(--bal-interaction-focus-color-start) 0 0 0 5px !important;
  }
}
.content > a:-moz-any-link:not(.button).is-inverted {
  color: var(--bal-link-color-inverted);
}
a.link:not(.button).is-inverted,
a.is-link:not(.button).is-inverted,
.content > a:any-link:not(.button).is-inverted {
  color: var(--bal-link-color-inverted);
}
.content > a:-moz-any-link:not(.button).is-inverted bal-icon {
  --bal-icon-color: var(--bal-link-color-inverted);
}
a.link:not(.button).is-inverted bal-icon,
a.is-link:not(.button).is-inverted bal-icon,
.content > a:any-link:not(.button).is-inverted bal-icon {
  --bal-icon-color: var(--bal-link-color-inverted);
}
@media (hover: hover) and (pointer: fine) {
  .content > a:-moz-any-link:not(.button).is-inverted:hover, .content > a:-moz-any-link:not(.button).is-inverted.is-hovered {
    color: var(--bal-link-color-inverted-hover);
  }
  a.link:not(.button).is-inverted:hover, a.link:not(.button).is-inverted.is-hovered,
  a.is-link:not(.button).is-inverted:hover,
  a.is-link:not(.button).is-inverted.is-hovered,
  .content > a:any-link:not(.button).is-inverted:hover,
  .content > a:any-link:not(.button).is-inverted.is-hovered {
    color: var(--bal-link-color-inverted-hover);
  }
  .content > a:-moz-any-link:not(.button).is-inverted:hover bal-icon, .content > a:-moz-any-link:not(.button).is-inverted.is-hovered bal-icon {
    --bal-icon-color: var(--bal-link-color-inverted-hover);
  }
  a.link:not(.button).is-inverted:hover bal-icon, a.link:not(.button).is-inverted.is-hovered bal-icon,
  a.is-link:not(.button).is-inverted:hover bal-icon,
  a.is-link:not(.button).is-inverted.is-hovered bal-icon,
  .content > a:any-link:not(.button).is-inverted:hover bal-icon,
  .content > a:any-link:not(.button).is-inverted.is-hovered bal-icon {
    --bal-icon-color: var(--bal-link-color-inverted-hover);
  }
}
.content > a:-moz-any-link:not(.button).is-inverted:active, .content > a:-moz-any-link:not(.button).is-inverted.is-active {
  color: var(--bal-link-color-inverted-active);
}
a.link:not(.button).is-inverted:active, a.link:not(.button).is-inverted.is-active,
a.is-link:not(.button).is-inverted:active,
a.is-link:not(.button).is-inverted.is-active,
.content > a:any-link:not(.button).is-inverted:active,
.content > a:any-link:not(.button).is-inverted.is-active {
  color: var(--bal-link-color-inverted-active);
}
.content > a:-moz-any-link:not(.button).is-inverted:active bal-icon, .content > a:-moz-any-link:not(.button).is-inverted.is-active bal-icon {
  --bal-icon-color: var(--bal-link-color-inverted-active);
}
a.link:not(.button).is-inverted:active bal-icon, a.link:not(.button).is-inverted.is-active bal-icon,
a.is-link:not(.button).is-inverted:active bal-icon,
a.is-link:not(.button).is-inverted.is-active bal-icon,
.content > a:any-link:not(.button).is-inverted:active bal-icon,
.content > a:any-link:not(.button).is-inverted.is-active bal-icon {
  --bal-icon-color: var(--bal-link-color-inverted-active);
}
@media (hover: hover) and (pointer: fine) {
  .content > a:-moz-any-link:not(.button).is-inverted:focus-visible:not(:active), .content > a:-moz-any-link:not(.button).is-inverted.is-focused:not(:active) {
    box-shadow: var(--bal-interaction-focus-color-inverted-start) 0 0 0 2px, var(--bal-interaction-focus-color-inverted-end) 0 0 0 5px !important;
  }
  a.link:not(.button).is-inverted:focus-visible:not(:active), a.link:not(.button).is-inverted.is-focused:not(:active),
  a.is-link:not(.button).is-inverted:focus-visible:not(:active),
  a.is-link:not(.button).is-inverted.is-focused:not(:active),
  .content > a:any-link:not(.button).is-inverted:focus-visible:not(:active),
  .content > a:any-link:not(.button).is-inverted.is-focused:not(:active) {
    box-shadow: var(--bal-interaction-focus-color-inverted-start) 0 0 0 2px, var(--bal-interaction-focus-color-inverted-end) 0 0 0 5px !important;
  }
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.label {
  --_label-position: var(--label-position, var(--mod-label-position, static));
  --_label-top: var(--label-top, var(--mod-label-top));
  --_label-right: var(--label-right, var(--mod-label-right));
  --_label-bottom: var(--label-bottom, var(--mod-label-bottom));
  --_label-left: var(--label-left, var(--mod-label-left));
  position: var(--_label-position);
  top: var(--_label-top);
  right: var(--_label-right);
  bottom: var(--_label-bottom);
  left: var(--_label-left);
  --_label-m: var(--label-m, var(--mod-label-m, 0));
  --_label-my: var(--label-my, var(--mod-label-my));
  --_label-mx: var(--label-mx, var(--mod-label-mx));
  --_label-ml: var(--label-ml, var(--mod-label-ml));
  --_label-mr: var(--label-mr, var(--mod-label-mr));
  --_label-mt: var(--label-mt, var(--mod-label-mt));
  --_label-mb: var(--label-mb, var(--mod-label-mb));
  margin: var(--_label-m);
  margin-inline: var(--_label-mx);
  margin-block: var(--_label-my);
  margin-left: var(--_label-ml);
  margin-right: var(--_label-mr);
  margin-top: var(--_label-mt);
  margin-bottom: var(--_label-mb);
  --_label-color: var(--label-color, var(--mod-label-color, inherit));
  --_label-family: var(--label-family, var(--mod-label-family, var(--bal-label-family)));
  --_label-weight: var(--label-weight, var(--mod-label-weight, var(--bal-label-weight)));
  --_label-line-height: var(--label-line-height, var(--mod-label-line-height, var(--bal-label-line-height)));
  --_label-size: var(--label-size, var(--mod-label-size, var(--bal-label-size-base-device)));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.label {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  box-sizing: content-box;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
  min-width: 0;
  color: var(--_label-color);
  font-family: var(--_label-family);
  font-weight: var(--_label-weight);
  font-size: var(--_label-size);
  line-height: var(--_label-line-height);
}

.label.has-no-wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

:host([no-wrap]:not([no-wrap=false])) label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.label.is-lg {
  --mod-label-family: var(--bal-text-family-heading);
}
.label.is-xl {
  --mod-label-family: var(--bal-text-family-heading);
}
.label.is-2xl {
  --mod-label-family: var(--bal-text-family-heading);
}
.label.is-3xl {
  --mod-label-family: var(--bal-text-family-heading);
}

.label.is-xxx-large {
  --mod-label-size: var(--bal-label-size-3xl-device);
}
.label.is-3xl {
  --mod-label-size: var(--bal-label-size-3xl-device);
}
.label.is-xx-large {
  --mod-label-size: var(--bal-label-size-2xl-device);
}
.label.is-2xl {
  --mod-label-size: var(--bal-label-size-2xl-device);
}
.label.is-x-large {
  --mod-label-size: var(--bal-label-size-xl-device);
}
.label.is-xl {
  --mod-label-size: var(--bal-label-size-xl-device);
}
.label.is-large {
  --mod-label-size: var(--bal-label-size-lg-device);
}
.label.is-lg {
  --mod-label-size: var(--bal-label-size-lg-device);
}
.label.is-normal {
  --mod-label-size: var(--bal-label-size-base-device);
}
.label.is-base {
  --mod-label-size: var(--bal-label-size-base-device);
}
.label.is-small {
  --mod-label-size: var(--bal-label-size-sm-device);
}
.label.is-sm {
  --mod-label-size: var(--bal-label-size-sm-device);
}

.label.is-success {
  --mod-label-color: var(--bal-label-color-success);
}
.label.is-warning {
  --mod-label-color: var(--bal-label-color-warning);
}
.label.is-danger {
  --mod-label-color: var(--bal-label-color-danger);
}
.label.is-hovered {
  --mod-label-color: var(--bal-label-color-base-hover);
}
.label.is-pressed {
  --mod-label-color: var(--bal-label-color-base-active);
}
.label.is-danger.is-hovered {
  --mod-label-color: var(--bal-label-color-danger-hover);
}
.label.is-danger.is-pressed {
  --mod-label-color: var(--bal-label-color-danger-active);
}
.label.is-disabled {
  --mod-label-color: var(--bal-label-color-disabled) !important;
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.heading, .title, .subtitle {
  --_heading-position: var(--heading-position, var(--mod-heading-position, static));
  --_heading-top: var(--heading-top, var(--mod-heading-top));
  --_heading-right: var(--heading-right, var(--mod-heading-right));
  --_heading-bottom: var(--heading-bottom, var(--mod-heading-bottom));
  --_heading-left: var(--heading-left, var(--mod-heading-left));
  position: var(--_heading-position);
  top: var(--_heading-top);
  right: var(--_heading-right);
  bottom: var(--_heading-bottom);
  left: var(--_heading-left);
  --_heading-m: var(--heading-m, var(--mod-heading-m, 0));
  --_heading-my: var(--heading-my, var(--mod-heading-my));
  --_heading-mx: var(--heading-mx, var(--mod-heading-mx));
  --_heading-ml: var(--heading-ml, var(--mod-heading-ml));
  --_heading-mr: var(--heading-mr, var(--mod-heading-mr));
  --_heading-mt: var(--heading-mt, var(--mod-heading-mt));
  --_heading-mb: var(--heading-mb, var(--mod-heading-mb));
  margin: var(--_heading-m);
  margin-inline: var(--_heading-mx);
  margin-block: var(--_heading-my);
  margin-left: var(--_heading-ml);
  margin-right: var(--_heading-mr);
  margin-top: var(--_heading-mt);
  margin-bottom: var(--_heading-mb);
  --_heading-color: var(--heading-color, var(--mod-heading-color, inherit));
  --_heading-family: var(--heading-family, var(--mod-heading-family, var(--bal-heading-family)));
  --_heading-weight: var(--heading-weight, var(--mod-heading-weight, var(--bal-heading-weight)));
  --_heading-line-height: var(--heading-line-height, var(--mod-heading-line-height, var(--bal-heading-line-height)));
  --_heading-font-size: var(--heading-font-size, var(--mod-heading-font-size, var(--bal-heading-1-size-device)));
  --_heading-space: var(--heading-space, var(--mod-heading-space, var(--bal-heading-1-space)));
  --_heading-shadow: var(--heading-shadow, var(--mod-heading-shadow, none));
  --_heading-text-align: var(--heading-text-align, var(--mod-heading-text-align, left));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.heading, .title, .subtitle {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  box-sizing: content-box;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
  color: var(--_heading-color);
  font-family: var(--_heading-family);
  font-weight: var(--_heading-weight);
  font-size: var(--_heading-font-size);
  line-height: var(--_heading-line-height);
  text-align: var(--_heading-text-align);
  text-shadow: var(--_heading-shadow);
}
.heading em:not(.text),
.heading span:not(.text), .title em:not(.text),
.title span:not(.text), .subtitle em:not(.text),
.subtitle span:not(.text) {
  font-weight: inherit;
}
.heading b,
.heading strong,
.heading .is-bold, .title b,
.title strong,
.title .is-bold, .subtitle b,
.subtitle strong,
.subtitle .is-bold {
  font-weight: var(--bal-text-weight-bold);
}
.heading.is-bold, .title.is-bold, .subtitle.is-bold {
  font-weight: var(--bal-text-weight-bold);
}
.heading.is-centered, .title.is-centered, .subtitle.is-centered {
  text-align: center;
}
.heading.is-right, .title.is-right, .subtitle.is-right {
  text-align: right;
}
.heading.is-justified, .title.is-justified, .subtitle.is-justified {
  text-align: justify;
}

.heading.has-no-wrap, .title.has-no-wrap, .subtitle.has-no-wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

:host([no-wrap]:not([no-wrap=false])) #heading {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.heading.has-shadow, .title.has-shadow, .subtitle.has-shadow {
  --mod-heading-shadow: var(--bal-heading-shadow);
}

:host([shadow]:not([shadow=false])) {
  --mod-heading-shadow: var(--bal-heading-shadow);
}

.heading.subtitle, .heading.is-subtitle, .title.subtitle, .title.is-subtitle, .subtitle.subtitle, .subtitle.is-subtitle {
  --mod-heading-family: var(--bal-heading-subtitle-family);
  --mod-heading-weight: var(--bal-heading-subtitle-weight);
  --mod-heading-line-height: var(--bal-heading-subtitle-line-height);
}

.heading.is-primary, .title.is-primary, .subtitle.is-primary {
  --mod-heading-color: var(--bal-heading-color-primary);
}

.heading.is-success, .title.is-success, .subtitle.is-success {
  --mod-heading-color: var(--bal-heading-color-success);
}

.heading.is-warning, .title.is-warning, .subtitle.is-warning {
  --mod-heading-color: var(--bal-heading-color-warning);
}

.heading.is-danger, .title.is-danger, .subtitle.is-danger {
  --mod-heading-color: var(--bal-heading-color-danger);
}

.heading.is-white, .title.is-white, .subtitle.is-white {
  --mod-heading-color: var(--bal-heading-color-white);
}

.heading.is-black, .title.is-black, .subtitle.is-black {
  --mod-heading-color: var(--bal-heading-color-black);
}

.heading.is-1, .title.is-1, .subtitle.is-1 {
  --mod-heading-font-size: var(--bal-heading-1-size-device);
  --mod-heading-space: var(--bal-heading-1-space);
}
.heading.is-level-1, .title.is-level-1, .subtitle.is-level-1 {
  --mod-heading-font-size: var(--bal-heading-1-size-device);
  --mod-heading-space: var(--bal-heading-1-space);
}
.heading.is-3xl, .title.is-3xl, .subtitle.is-3xl {
  --mod-heading-font-size: var(--bal-heading-1-size-device);
  --mod-heading-space: var(--bal-heading-1-space);
}
.heading.is-2, .title.is-2, .subtitle.is-2 {
  --mod-heading-font-size: var(--bal-heading-2-size-device);
  --mod-heading-space: var(--bal-heading-2-space);
}
.heading.is-level-2, .title.is-level-2, .subtitle.is-level-2 {
  --mod-heading-font-size: var(--bal-heading-2-size-device);
  --mod-heading-space: var(--bal-heading-2-space);
}
.heading.is-2xl, .title.is-2xl, .subtitle.is-2xl {
  --mod-heading-font-size: var(--bal-heading-2-size-device);
  --mod-heading-space: var(--bal-heading-2-space);
}
.heading.is-3, .title.is-3, .subtitle.is-3 {
  --mod-heading-font-size: var(--bal-heading-3-size-device);
  --mod-heading-space: var(--bal-heading-3-space);
}
.heading.is-level-3, .title.is-level-3, .subtitle.is-level-3 {
  --mod-heading-font-size: var(--bal-heading-3-size-device);
  --mod-heading-space: var(--bal-heading-3-space);
}
.heading.is-xl, .title.is-xl, .subtitle.is-xl {
  --mod-heading-font-size: var(--bal-heading-3-size-device);
  --mod-heading-space: var(--bal-heading-3-space);
}
.heading.is-4, .title.is-4, .subtitle.is-4 {
  --mod-heading-font-size: var(--bal-heading-4-size-device);
  --mod-heading-space: var(--bal-heading-4-space);
}
.heading.is-level-4, .title.is-level-4, .subtitle.is-level-4 {
  --mod-heading-font-size: var(--bal-heading-4-size-device);
  --mod-heading-space: var(--bal-heading-4-space);
}
.heading.is-lg, .title.is-lg, .subtitle.is-lg {
  --mod-heading-font-size: var(--bal-heading-4-size-device);
  --mod-heading-space: var(--bal-heading-4-space);
}
.heading.is-5, .title.is-5, .subtitle.is-5 {
  --mod-heading-font-size: var(--bal-heading-5-size-device);
  --mod-heading-space: var(--bal-heading-5-space);
}
.heading.is-level-5, .title.is-level-5, .subtitle.is-level-5 {
  --mod-heading-font-size: var(--bal-heading-5-size-device);
  --mod-heading-space: var(--bal-heading-5-space);
}
.heading.is-base, .title.is-base, .subtitle.is-base {
  --mod-heading-font-size: var(--bal-heading-5-size-device);
  --mod-heading-space: var(--bal-heading-5-space);
}
.heading.is-display-1, .title.is-display-1, .subtitle.is-display-1 {
  --mod-heading-font-size: var(--bal-heading-display1-size-device);
  --mod-heading-space: var(--bal-heading-display1-space);
}
.heading.is-5xl, .title.is-5xl, .subtitle.is-5xl {
  --mod-heading-font-size: var(--bal-heading-display1-size-device);
  --mod-heading-space: var(--bal-heading-display1-space);
}
.heading.is-display-2, .title.is-display-2, .subtitle.is-display-2 {
  --mod-heading-font-size: var(--bal-heading-display2-size-device);
  --mod-heading-space: var(--bal-heading-display2-space);
}
.heading.is-4xl, .title.is-4xl, .subtitle.is-4xl {
  --mod-heading-font-size: var(--bal-heading-display2-size-device);
  --mod-heading-space: var(--bal-heading-display2-space);
}

h1,
[role=heading][aria-level="1"] {
  --mod-heading-font-size: var(--bal-heading-1-size-device);
  --mod-heading-space: var(--bal-heading-1-space);
}

h2,
[role=heading][aria-level="2"] {
  --mod-heading-font-size: var(--bal-heading-2-size-device);
  --mod-heading-space: var(--bal-heading-2-space);
}

h3,
[role=heading][aria-level="3"] {
  --mod-heading-font-size: var(--bal-heading-3-size-device);
  --mod-heading-space: var(--bal-heading-3-space);
}

h4,
[role=heading][aria-level="4"] {
  --mod-heading-font-size: var(--bal-heading-4-size-device);
  --mod-heading-space: var(--bal-heading-4-space);
}

h5,
[role=heading][aria-level="5"] {
  --mod-heading-font-size: var(--bal-heading-5-size-device);
  --mod-heading-space: var(--bal-heading-5-space);
}

.heading.has-space-all, .title.has-space-all, .subtitle.has-space-all {
  --mod-heading-mt: var(--_heading-space);
  --mod-heading-mb: var(--_heading-space);
}
.heading.has-space-top, .title.has-space-top, .subtitle.has-space-top {
  --mod-heading-mt: var(--_heading-space);
  --mod-heading-mb: 0;
}
.heading.has-space-bottom, .title.has-space-bottom, .subtitle.has-space-bottom {
  --mod-heading-mb: var(--_heading-space);
}
.heading.has-space-none, .title.has-space-none, .subtitle.has-space-none {
  --mod-heading-mb: 0;
  --mod-heading-mt: 0;
}

:host([space=all]) {
  --heading-mt: var(--_heading-space);
  --heading-mb: var(--_heading-space);
}

:host([space=top]) {
  --heading-mt: var(--_heading-space);
  --heading-mb: 0;
}

:host([space=bottom]) {
  --heading-mt: 0;
  --heading-mb: var(--_heading-space);
}

:host([space=none]) {
  --heading-mt: 0;
  --heading-mb: 0;
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
hr, .divider {
  --divider-m: var(--bal-divider-m, 0);
  --divider-my: var(--bal-divider-my);
  --divider-mx: var(--bal-divider-mx);
  --divider-ml: var(--bal-divider-ml);
  --divider-mr: var(--bal-divider-mr);
  --divider-mt: var(--bal-divider-mt);
  --divider-mb: var(--bal-divider-mb);
  --divider-color: var(--bal-divider-color-base);
  --divider-width: var(--bal-divider-width);
  --divider-radius: var(--bal-divider-radius);
  --divider-space: 0;
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
hr, .divider {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--divider-radius);
  height: var(--divider-width);
  background-color: var(--divider-color);
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
hr.is-primary, .divider.is-primary {
  --divider-color: var(--bal-divider-color-primary);
}
hr.is-primary-light, .divider.is-primary-light {
  --divider-color: var(--bal-divider-color-primary-light);
}
hr.is-primary-dark, .divider.is-primary-dark {
  --divider-color: var(--bal-divider-color-primary-dark);
}
hr.is-grey-light, .divider.is-grey-light {
  --divider-color: var(--bal-divider-color-grey-light);
}
hr.is-grey, .divider.is-grey {
  --divider-color: var(--bal-divider-color-grey);
}
hr.is-grey-dark, .divider.is-grey-dark {
  --divider-color: var(--bal-divider-color-grey-dark);
}
hr.is-warning, .divider.is-warning {
  --divider-color: var(--bal-divider-color-warning);
}
hr.is-success, .divider.is-success {
  --divider-color: var(--bal-divider-color-success);
}
hr.is-danger, .divider.is-danger {
  --divider-color: var(--bal-divider-color-danger);
}
hr.is-danger-dark, .divider.is-danger-dark {
  --divider-color: var(--bal-divider-color-danger-dark);
}
hr.is-danger-darker, .divider.is-danger-darker {
  --divider-color: var(--bal-divider-color-danger-darker);
}
hr.is-white, .divider.is-white {
  --divider-color: var(--bal-divider-color-white);
}
hr.is-light-blue, .divider.is-light-blue {
  --divider-color: var(--bal-divider-color-light-blue);
}
hr:not(.is-vertical), hr.is-horizontal, .divider:not(.is-vertical), .divider.is-horizontal {
  flex: 1 0 100%;
  width: 100%;
  min-height: var(--divider-width);
  height: var(--divider-width);
  margin-top: var(--divider-space);
  margin-bottom: var(--divider-space);
}
hr.is-vertical, .divider.is-vertical {
  height: auto;
  flex-shrink: 0;
  align-self: stretch;
  width: var(--divider-width);
  margin-left: var(--divider-space);
  margin-right: var(--divider-space);
}
hr.is-dashed:not(.is-vertical), .divider.is-dashed:not(.is-vertical) {
  background: repeating-linear-gradient(90deg, var(--divider-color) 0, var(--divider-color) 8px, transparent 8px, transparent 16px);
}
hr.is-dashed.is-vertical, .divider.is-dashed.is-vertical {
  background: repeating-linear-gradient(180deg, var(--divider-color) 0, var(--divider-color) 8px, transparent 8px, transparent 16px);
}
hr.has-space-none, .divider.has-space-none {
  --divider-space: var(--bal-space-none-device);
}
hr.has-space-2xs, .divider.has-space-2xs {
  --divider-space: var(--bal-space-2xs-device);
}
hr.has-space-xs, .divider.has-space-xs {
  --divider-space: var(--bal-space-xs-device);
}
hr.has-space-sm, .divider.has-space-sm {
  --divider-space: var(--bal-space-sm-device);
}
hr.has-space-base, .divider.has-space-base {
  --divider-space: var(--bal-space-base-device);
}
hr.has-space-md, .divider.has-space-md {
  --divider-space: var(--bal-space-md-device);
}
hr.has-space-lg, .divider.has-space-lg {
  --divider-space: var(--bal-space-lg-device);
}
hr.has-space-xl, .divider.has-space-xl {
  --divider-space: var(--bal-space-xl-device);
}
hr.has-space-2xl, .divider.has-space-2xl {
  --divider-space: var(--bal-space-2xl-device);
}
hr.has-space-3xl, .divider.has-space-3xl {
  --divider-space: var(--bal-space-3xl-device);
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.close {
  --close-color-background: var(--bal-close-color-background-base);
  --close-color-background-hover: var(--bal-close-color-background-hover);
  --close-color-background-active: var(--bal-close-color-background-active);
  --close-color-icon: var(--bal-close-color-icon-base);
  --close-radius: var(--bal-close-radius);
  --close-size-icon: 12px;
  --close-padding: 0.313rem;
  --close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.close {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border: none;
  background: var(--close-color-background);
  border-radius: var(--close-radius);
  padding: var(--close-padding);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  outline: none;
}
.close::after {
  content: "";
  display: block;
  width: var(--close-size-icon);
  height: var(--close-size-icon);
  -webkit-mask-image: var(--close-icon);
          mask-image: var(--close-icon);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: var(--close-color-icon);
}
@media (hover: hover) and (pointer: fine) {
  .close:hover, .close.is-hovered {
    background: var(--close-color-background-hover);
  }
}
.close:active, .close.is-pressed {
  background: var(--close-color-background-active);
}
@media (hover: hover) and (pointer: fine) {
  .close:focus-visible:not(:active), .close.is-focused:not(:active) {
    box-shadow: var(--bal-interaction-focus-color-border) 0 0 0 2px, var(--bal-interaction-focus-color-start) 0 0 0 5px !important;
  }
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.close.is-sm {
  --close-padding: 0.25rem;
  --close-size-icon: 10px;
}
.close.is-md {
  --close-padding: 0.531rem;
  --close-size-icon: 24px;
}
.close.is-inverted {
  --close-color-icon: var(--bal-close-color-icon-inverted);
}
@media (hover: hover) and (pointer: fine) {
  .close.is-inverted:hover, .close.is-inverted.is-hovered {
    --close-color-background-hover: var(--bal-close-color-background-inverted-hover);
  }
}
.close.is-inverted:active, .close.is-inverted.is-pressed {
  --close-color-background-active: var(--bal-close-color-background-inverted-active);
}
.close.is-inverted:focus-visible, .close.is-inverted.is-focused {
  --close-shadow-focus: var(--bal-close-shadow-outline-inverted);
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.card {
  --card-color-background: var(--bal-card-color-base-background);
  --card-color-text: var(--bal-card-color-base-text);
  --card-color-border: var(--bal-card-color-base-border, transparent);
  --card-radius: var(--bal-card-radius-base);
  --card-border-width: var(--bal-border-width-base, 0);
  --card-border-style: var(--bal-border-style-base, dashed);
  --card-shadow: var(--bal-card-shadow-base);
  --card-gap: var(--bal-card-space-base-device);
  --card-padding: calc(var(--bal-card-space-base-device) - var(--card-border-width));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--card-color-text);
  background-color: var(--card-color-background);
  border-radius: var(--card-radius);
  border-color: var(--card-color-border);
  border-width: var(--card-border-width);
  border-style: var(--card-border-style);
  box-shadow: var(--card-shadow);
  gap: var(--card-gap);
  padding: var(--card-padding);
  text-decoration: none;
}
.card picture,
.card picture > img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-inline-size: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  block-size: auto;
  border-radius: var(--card-radius);
}
.card:not(.is-dense):has(picture) {
  padding-top: 0;
}
.card:not(.is-dense) picture {
  margin-top: calc(var(--card-border-width) * -1);
  margin-left: calc(var(--card-gap) * -1);
  width: calc(100% + var(--card-gap) * 2);
  max-width: calc(100% + var(--card-gap) * 2);
  max-inline-size: calc(100% + var(--card-gap) * 2);
}
.card:not(.is-dense) picture,
.card:not(.is-dense) picture > img {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.card > .tag:first-child,
.card > bal-tag:first-child {
  --bal-tag-position: absolute;
  --bal-tag-top: 0;
  align-self: center;
  transform: translateY(-50%);
}
.card > .tag.is-left:first-child,
.card > bal-tag[position=left]:first-child {
  align-self: flex-start;
}
.card > .tag.is-right:first-child,
.card > bal-tag[position=right]:first-child {
  align-self: flex-end;
}
.card > .badge:first-child,
.card > bal-badge:first-child {
  --bal-badge-position: absolute;
  --bal-badge-top: 0;
  transform: translate(calc(50% + var(--card-gap)), -50%);
  align-self: flex-end;
}
.card .card-header {
  --bal-heavding-line-height: 32px;
  gap: var(--card-gap);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.card .card-header .title,
.card .card-header .subtitle,
.card .card-header .heading {
  margin: 0;
}
.card .card-content bal-heading:not(:last-child),
.card .card-content h1:is(.title, .subtitle, .heading):not(:last-child) {
  --heading-mb: var(--bal-space-xs-device);
}
.card .card-content h1:not(.title, .subtitle, .heading, :last-child) {
  margin-bottom: var(--bal-space-xs-device);
}
.card .card-content h2:is(.title, .subtitle, .heading):not(:last-child) {
  --heading-mb: var(--bal-space-xs-device);
}
.card .card-content h2:not(.title, .subtitle, .heading, :last-child) {
  margin-bottom: var(--bal-space-xs-device);
}
.card .card-content h3:is(.title, .subtitle, .heading):not(:last-child) {
  --heading-mb: var(--bal-space-xs-device);
}
.card .card-content h3:not(.title, .subtitle, .heading, :last-child) {
  margin-bottom: var(--bal-space-xs-device);
}
.card .card-content h4:is(.title, .subtitle, .heading):not(:last-child) {
  --heading-mb: var(--bal-space-xs-device);
}
.card .card-content h4:not(.title, .subtitle, .heading, :last-child) {
  margin-bottom: var(--bal-space-xs-device);
}
.card .card-content h5:is(.title, .subtitle, .heading):not(:last-child) {
  --heading-mb: var(--bal-space-2xs-device);
}
.card .card-content h5:not(.title, .subtitle, .heading, :last-child) {
  margin-bottom: var(--bal-space-2xs-device);
}
.card .card-content bal-text:not(:last-child),
.card .card-content p.text:not(:last-child) {
  --text-mb: var(--bal-space-base-device);
}
.card .card-content p:not(.text, :last-child) {
  margin-bottom: var(--bal-space-base-device);
}
.card .card-content > :is(h1, h2, h3, h4, h5, h6, bal-heading) + p.text,
.card .card-content > :is(h1, h2, h3, h4, h5, h6, bal-heading) + bal-text {
  --text-mt: var(--bal-space-base-device);
}
.card .card-content > :is(h1, h2, h3, h4, h5, h6, bal-heading) + p:not(.text, bal-text) {
  margin-top: var(--bal-space-base-device);
}
.card .card-actions {
  --buttons-align-items: var(--bal-buttons-align-items, center);
  --buttons-justify-content: var(--bal-buttons-justify-content, flex-start);
  display: flex;
  gap: 0.5rem;
  flex-flow: column wrap;
  width: 100%;
}
.card .card-actions:not(:last-child) {
  margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
  .card .card-actions .button:not(.is-square, .is-circle),
  .card .card-actions bal-button:not(.is-square, .is-circle) {
    flex: 1 1 auto;
  }
}
@media screen and (min-width: 769px) {
  .card .card-actions {
    flex-flow: row wrap;
    align-items: var(--buttons-align-items);
    justify-content: var(--buttons-justify-content);
  }
  .card .card-actions.fit-content {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.card .card-actions.as-row {
  flex-flow: row wrap;
  align-items: var(--buttons-align-items);
  justify-content: var(--buttons-justify-content);
}
.card .card-actions.as-row.is-expanded .button,
.card .card-actions.as-row.is-expanded bal-button {
  flex: 1;
}
.card .card-actions.as-col {
  flex-flow: column wrap;
}
@media screen and (min-width: 769px) {
  .card .card-actions.as-col {
    --buttons-align-items: flex-start;
  }
}
.card .card-actions.is-reverse.as-row {
  flex-flow: row-reverse wrap;
}
.card .card-actions.is-reverse.as-col {
  flex-flow: column-reverse wrap;
}
@media screen and (min-width: 769px) {
  .card .card-actions.is-center:not(.as-col), .card .card-actions.is-centered:not(.as-col) {
    --buttons-justify-content: center;
  }
  .card .card-actions.is-center.as-col, .card .card-actions.is-centered.as-col {
    --buttons-align-items: center;
  }
  .card .card-actions.is-right:not(.as-col) {
    --buttons-justify-content: flex-end;
  }
  .card .card-actions.is-right.as-col {
    --buttons-align-items: flex-end;
  }
}
.card .card-actions.fit-content bal-button {
  --bal-button-width: 100%;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .card .card-actions {
    --bal-button-width: 100%;
  }
  .card .card-actions bal-button {
    --bal-button-width: 100%;
    width: 100%;
  }
}
.card.align-center {
  align-items: center;
  --bal-buttons-align-items: center;
  --bal-buttons-justify-content: center;
}
.card.align-right {
  --bal-buttons-align-items: flex-end;
  --bal-buttons-justify-content: flex-end;
}
.card.is-square {
  --card-radius: var(--bal-card-radius-square);
}
.card.is-flat {
  --card-radius: var(--bal-card-radius-flat);
  --card-shadow: var(--bal-card-shadow-flat);
}
.card.is-dense {
  --card-shadow: var(--bal-card-shadow-flat);
  --card-padding: 0;
}
.card.is-outlined {
  --card-shadow: var(--bal-card-shadow-flat);
  --card-border-width: var(--bal-card-outline-width);
  --card-color-border: var(--bal-card-color-base-outline, transparent);
}
.card.is-fullheight {
  height: 100%;
}
.card.is-fullheight .card-content,
.card.is-fullheight .card-content > .stack,
.card.is-fullheight .card-content > .flex,
.card.is-fullheight .card-content > .is-flex {
  height: 100%;
}

a.card,
button.card {
  --bal-heading-color: var(--bal-text-color-primary);
  --bal-text-color: var(--bal-text-color-primary);
  color: var(--bal-text-color-primary);
  text-decoration: none;
  translate: 0 0;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  a.card:hover, a.card.is-hovered,
  button.card:hover,
  button.card.is-hovered {
    --bal-heading-color: var(--bal-text-color-primary-hover);
    --bal-text-color: var(--bal-text-color-primary-hover);
    --card-shadow: var(--bal-card-shadow-hover);
    color: var(--bal-text-color-primary-hover);
    background: color-mix(in srgb, var(--card-color-background), var(--bal-color-primary-6) 4%);
  }
}
a.card:active, a.card.is-pressed,
button.card:active,
button.card.is-pressed {
  --bal-heading-color: var(--bal-text-color-primary-active);
  --bal-text-color: var(--bal-text-color-primary-active);
  --card-shadow: var(--bal-card-shadow-hover);
  color: var(--bal-text-color-primary-active);
  background: color-mix(in srgb, var(--card-color-background), var(--bal-color-primary-6) 6%);
  translate: 0 0.5px;
}
@media (hover: hover) and (pointer: fine) {
  a.card:focus-visible:not(:active), a.card.is-focused:not(:active),
  button.card:focus-visible:not(:active),
  button.card.is-focused:not(:active) {
    box-shadow: var(--bal-interaction-focus-color-border) 0 0 0 2px, var(--bal-interaction-focus-color-start) 0 0 0 5px !important;
  }
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.image-teaser picture,
.image-teaser picture > img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-inline-size: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  block-size: auto;
  border-radius: var(--bal-card-radius-base);
}
.image-teaser .card {
  margin-top: calc(var(--card-gap) * -1 * 2);
  margin-left: calc(var(--card-gap));
  margin-right: calc(var(--card-gap));
  max-width: -moz-fit-content;
  max-width: fit-content;
}
@media screen and (min-width: 769px) {
  .image-teaser.is-wide .card {
    width: 75%;
    margin-left: calc(var(--card-gap) * 2);
    margin-right: calc(var(--card-gap));
  }
  .image-teaser.is-wide.is-center .card {
    margin-left: auto;
    margin-right: auto;
  }
  .image-teaser.is-wide.is-right .card {
    margin-left: auto;
    margin-right: calc(var(--card-gap) * 2);
  }
}
@media screen and (min-width: 1024px) {
  .image-teaser.is-wide .card {
    width: 50%;
  }
}

a.image-link,
button.image-link {
  cursor: pointer;
}
a.image-link picture,
button.image-link picture {
  overflow: hidden;
}
a.image-link img,
button.image-link img {
  transition: all 0.4s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  a.image-link img:hover, a.image-link img.is-hovered,
  button.image-link img:hover,
  button.image-link img.is-hovered {
    transform: scale(1.1);
  }
}
a.image-link img:active, a.image-link img.is-pressed,
button.image-link img:active,
button.image-link img.is-pressed {
  transform: scale(1.1);
}

a.image-teaser,
button.image-teaser {
  cursor: pointer;
  --bal-heading-color: var(--bal-text-color-primary);
  --bal-text-color: var(--bal-text-color-primary);
  color: var(--bal-text-color-primary);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  a.image-teaser:hover, a.image-teaser.is-hovered,
  button.image-teaser:hover,
  button.image-teaser.is-hovered {
    --bal-heading-color: var(--bal-text-color-primary-hover);
    --bal-text-color: var(--bal-text-color-primary-hover);
    --card-shadow: var(--bal-card-shadow-hover);
    color: var(--bal-text-color-primary-hover);
    background: color-mix(in srgb, var(--card-color-background), var(--bal-color-primary-6) 4%);
  }
}

.card.has-space-sm {
  --card-padding: calc(var(--bal-card-space-sm-device) - var(--card-border-width));
  --card-gap: var(--bal-card-space-sm-device);
}
.card.has-space-md {
  --card-padding: calc(var(--bal-card-space-md-device) - var(--card-border-width));
  --card-gap: var(--bal-card-space-md-device);
}
.card.has-space-lg {
  --card-padding: calc(var(--bal-card-space-lg-device) - var(--card-border-width));
  --card-gap: var(--bal-card-space-lg-device);
}

.card.is-white {
  --card-color-background: var(--bal-card-color-white-background);
  --card-color-text: var(--bal-card-color-white-text);
  --card-color-border: var(--bal-card-color-white-border, transparent);
}
.card.is-white.is-outlined {
  --card-color-border: var(--bal-card-color-white-outline, transparent);
}
.card.is-primary {
  --card-color-background: var(--bal-card-color-primary-background);
  --card-color-text: var(--bal-card-color-primary-text);
  --card-color-border: var(--bal-card-color-primary-border, transparent);
}
.card.is-primary.is-outlined {
  --card-color-border: var(--bal-card-color-primary-outline, transparent);
}
.card.is-primary-light {
  --card-color-background: var(--bal-card-color-primary-light-background);
  --card-color-text: var(--bal-card-color-primary-light-text);
  --card-color-border: var(--bal-card-color-primary-light-border, transparent);
}
.card.is-primary-light.is-outlined {
  --card-color-border: var(--bal-card-color-primary-light-outline, transparent);
}
.card.is-info {
  --card-color-background: var(--bal-card-color-info-background);
  --card-color-text: var(--bal-card-color-info-text);
  --card-color-border: var(--bal-card-color-info-border, transparent);
}
.card.is-info.is-outlined {
  --card-color-border: var(--bal-card-color-info-outline, transparent);
}
.card.is-success {
  --card-color-background: var(--bal-card-color-success-background);
  --card-color-text: var(--bal-card-color-success-text);
  --card-color-border: var(--bal-card-color-success-border, transparent);
}
.card.is-success.is-outlined {
  --card-color-border: var(--bal-card-color-success-outline, transparent);
}
.card.is-warning {
  --card-color-background: var(--bal-card-color-warning-background);
  --card-color-text: var(--bal-card-color-warning-text);
  --card-color-border: var(--bal-card-color-warning-border, transparent);
}
.card.is-warning.is-outlined {
  --card-color-border: var(--bal-card-color-warning-outline, transparent);
}
.card.is-danger {
  --card-color-background: var(--bal-card-color-danger-background);
  --card-color-text: var(--bal-card-color-danger-text);
  --card-color-border: var(--bal-card-color-danger-border, transparent);
}
.card.is-danger.is-outlined {
  --card-color-border: var(--bal-card-color-danger-outline, transparent);
}
.card.is-grey {
  --card-color-background: var(--bal-card-color-grey-background);
  --card-color-text: var(--bal-card-color-grey-text);
  --card-color-border: var(--bal-card-color-grey-border, transparent);
}
.card.is-grey.is-outlined {
  --card-color-border: var(--bal-card-color-grey-outline, transparent);
}
.card.is-grey-light {
  --card-color-background: var(--bal-card-color-grey-light-background);
  --card-color-text: var(--bal-card-color-grey-light-text);
  --card-color-border: var(--bal-card-color-grey-light-border, transparent);
}
.card.is-grey-light.is-outlined {
  --card-color-border: var(--bal-card-color-grey-light-outline, transparent);
}
.card.is-red {
  --card-color-background: var(--bal-card-color-red-background);
  --card-color-text: var(--bal-card-color-red-text);
  --card-color-border: var(--bal-card-color-red-border, transparent);
}
.card.is-red.is-outlined {
  --card-color-border: var(--bal-card-color-red-outline, transparent);
}
.card.is-red-light {
  --card-color-background: var(--bal-card-color-red-light-background);
  --card-color-text: var(--bal-card-color-red-light-text);
  --card-color-border: var(--bal-card-color-red-light-border, transparent);
}
.card.is-red-light.is-outlined {
  --card-color-border: var(--bal-card-color-red-light-outline, transparent);
}
.card.is-red-lighter {
  --card-color-background: var(--bal-card-color-red-lighter-background);
  --card-color-text: var(--bal-card-color-red-lighter-text);
  --card-color-border: var(--bal-card-color-red-lighter-border, transparent);
}
.card.is-red-lighter.is-outlined {
  --card-color-border: var(--bal-card-color-red-lighter-outline, transparent);
}
.card.is-green {
  --card-color-background: var(--bal-card-color-green-background);
  --card-color-text: var(--bal-card-color-green-text);
  --card-color-border: var(--bal-card-color-green-border, transparent);
}
.card.is-green.is-outlined {
  --card-color-border: var(--bal-card-color-green-outline, transparent);
}
.card.is-green-light {
  --card-color-background: var(--bal-card-color-green-light-background);
  --card-color-text: var(--bal-card-color-green-light-text);
  --card-color-border: var(--bal-card-color-green-light-border, transparent);
}
.card.is-green-light.is-outlined {
  --card-color-border: var(--bal-card-color-green-light-outline, transparent);
}
.card.is-green-lighter {
  --card-color-background: var(--bal-card-color-green-lighter-background);
  --card-color-text: var(--bal-card-color-green-lighter-text);
  --card-color-border: var(--bal-card-color-green-lighter-border, transparent);
}
.card.is-green-lighter.is-outlined {
  --card-color-border: var(--bal-card-color-green-lighter-outline, transparent);
}
.card.is-purple {
  --card-color-background: var(--bal-card-color-purple-background);
  --card-color-text: var(--bal-card-color-purple-text);
  --card-color-border: var(--bal-card-color-purple-border, transparent);
}
.card.is-purple.is-outlined {
  --card-color-border: var(--bal-card-color-purple-outline, transparent);
}
.card.is-purple-light {
  --card-color-background: var(--bal-card-color-purple-light-background);
  --card-color-text: var(--bal-card-color-purple-light-text);
  --card-color-border: var(--bal-card-color-purple-light-border, transparent);
}
.card.is-purple-light.is-outlined {
  --card-color-border: var(--bal-card-color-purple-light-outline, transparent);
}
.card.is-purple-lighter {
  --card-color-background: var(--bal-card-color-purple-lighter-background);
  --card-color-text: var(--bal-card-color-purple-lighter-text);
  --card-color-border: var(--bal-card-color-purple-lighter-border, transparent);
}
.card.is-purple-lighter.is-outlined {
  --card-color-border: var(--bal-card-color-purple-lighter-outline, transparent);
}
.card.is-yellow {
  --card-color-background: var(--bal-card-color-yellow-background);
  --card-color-text: var(--bal-card-color-yellow-text);
  --card-color-border: var(--bal-card-color-yellow-border, transparent);
}
.card.is-yellow.is-outlined {
  --card-color-border: var(--bal-card-color-yellow-outline, transparent);
}
.card.is-yellow-light {
  --card-color-background: var(--bal-card-color-yellow-light-background);
  --card-color-text: var(--bal-card-color-yellow-light-text);
  --card-color-border: var(--bal-card-color-yellow-light-border, transparent);
}
.card.is-yellow-light.is-outlined {
  --card-color-border: var(--bal-card-color-yellow-light-outline, transparent);
}
.card.is-yellow-lighter {
  --card-color-background: var(--bal-card-color-yellow-lighter-background);
  --card-color-text: var(--bal-card-color-yellow-lighter-text);
  --card-color-border: var(--bal-card-color-yellow-lighter-border, transparent);
}
.card.is-yellow-lighter.is-outlined {
  --card-color-border: var(--bal-card-color-yellow-lighter-outline, transparent);
}

/**
  * Mixins
  * -------------------------------
  * Define here component specific mixins
  */
/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.button {
  --_button-position: var(--button-position, var(--mod-button-position, static));
  --_button-top: var(--button-top, var(--mod-button-top));
  --_button-right: var(--button-right, var(--mod-button-right));
  --_button-bottom: var(--button-bottom, var(--mod-button-bottom));
  --_button-left: var(--button-left, var(--mod-button-left));
  position: var(--_button-position);
  top: var(--_button-top);
  right: var(--_button-right);
  bottom: var(--_button-bottom);
  left: var(--_button-left);
  --_button-m: var(--button-m, var(--mod-button-m, 0));
  --_button-my: var(--button-my, var(--mod-button-my));
  --_button-mx: var(--button-mx, var(--mod-button-mx));
  --_button-ml: var(--button-ml, var(--mod-button-ml));
  --_button-mr: var(--button-mr, var(--mod-button-mr));
  --_button-mt: var(--button-mt, var(--mod-button-mt));
  --_button-mb: var(--button-mb, var(--mod-button-mb));
  margin: var(--_button-m);
  margin-inline: var(--_button-mx);
  margin-block: var(--_button-my);
  margin-left: var(--_button-ml);
  margin-right: var(--_button-mr);
  margin-top: var(--_button-mt);
  margin-bottom: var(--_button-mb);
  --_button-font-family: var(--button-font-family, var(--mod-button-font-family, var(--bal-button-family)));
  --_button-font-weight: var(--button-font-weight, var(--mod-button-font-weight, var(--bal-button-weight)));
  --_button-font-size: var(--button-font-size, var(--mod-button-font-size, var(--bal-button-size-base)));
  --_button-line-height: var(--button-line-height, var(--mod-button-line-height, var(--bal-button-line-height)));
  --_button-radius: var(--button-radius, var(--mod-button-radius, var(--bal-button-radius-base)));
  --_button-color-text: var(--button-color-text, var(--mod-button-color-text, var(--bal-button-color-primary-base-text)));
  --_button-color-border: var(--button-color-border, var(--mod-button-color-border, var(--bal-button-color-primary-base-border)));
  --_button-color-background: var(--button-color-background, var(--mod-button-color-background, var(--bal-button-color-primary-base-background)));
  --_button-color-text-hover: var(--button-color-text-hover, var(--mod-button-color-text-hover, var(--bal-button-color-primary-hover-text)));
  --_button-color-border-hover: var(--button-color-border-hover, var(--mod-button-color-border-hover, var(--bal-button-color-primary-hover-border)));
  --_button-color-background-hover: var(--button-color-background-hover, var(--mod-button-color-background-hover, var(--bal-button-color-primary-hover-background)));
  --_button-color-text-active: var(--button-color-text-active, var(--mod-button-color-text-active, var(--bal-button-color-primary-active-text)));
  --_button-color-border-active: var(--button-color-border-active, var(--mod-button-color-border-active, var(--bal-button-color-primary-active-border)));
  --_button-color-background-active: var(--button-color-background-active, var(--mod-button-color-background-active, var(--bal-button-color-primary-active-background)));
  --_button-width: var(--button-width, var(--mod-button-width, var(--bal-button-width, fit-content)));
  --_button-border-style: var(--button-border-style, var(--mod-button-border-style, solid));
  --_button-gap: var(--button-gap, var(--mod-button-gap, 0.5rem));
  --_button-min-height: var(--button-min-height, var(--mod-button-min-height, 3rem));
  --_button-min-width: var(--button-min-width, var(--mod-button-min-width, 3rem));
  --_button-padding-inline: var(--button-padding-inline, var(--mod-button-padding-inline, 1.5rem));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  word-break: normal;
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
  text-decoration: none;
  user-select: none;
  touch-action: manipulation;
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  font-size: var(--_button-font-size);
  font-family: var(--_button-font-family);
  font-weight: var(--_button-font-weight);
  line-height: var(--_button-line-height);
  border-radius: var(--_button-radius);
  border-style: var(--_button-border-style);
  border-width: var(--bal-border-width-base);
  width: var(--_button-width, -moz-fit-content);
  width: var(--_button-width, fit-content);
  min-width: var(--_button-min-width);
  min-height: var(--_button-min-height);
  gap: var(--_button-gap);
  padding-inline: var(--_button-padding-inline);
  background-color: var(--_button-color-background);
  color: var(--_button-color-text);
  border-color: var(--_button-color-border);
}
.button::-moz-focus-inner {
  border: 0;
}
.button bal-icon {
  --icon-color: var(--_button-color-text);
}
.button:focus, .button:active {
  outline: none;
}
@media (hover: hover) and (pointer: fine) {
  .button:focus-visible:not(:active), .button.is-focused:not(:active) {
    box-shadow: var(--bal-interaction-focus-color-border) 0 0 0 2px, var(--bal-interaction-focus-color-start) 0 0 0 5px !important;
  }
}
@media (hover: hover) and (pointer: fine) {
  .button:hover, .button.is-hovered {
    background-color: var(--_button-color-background-hover);
    color: var(--_button-color-text-hover);
    border-color: var(--_button-color-border-hover);
  }
}
.button:active, .button.is-pressed {
  background-color: var(--_button-color-background-active);
  color: var(--_button-color-text-active);
  border-color: var(--_button-color-border-active);
  translate: 0 0.5px;
}

.button .badge,
.button bal-badge {
  --badge-position: absolute;
  --badge-top: -0.5rem;
  --badge-right: -0.5rem;
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
button.is-primary:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-primary-base-text);
  --mod-button-color-background: var(--bal-button-color-primary-base-background);
  --mod-button-color-border: var(--bal-button-color-primary-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-primary-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-primary-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-primary-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-primary-active-text);
  --mod-button-color-background-active: var(--bal-button-color-primary-active-background);
  --mod-button-color-border-active: var(--bal-button-color-primary-active-border);
}

button.is-secondary:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-secondary-base-text);
  --mod-button-color-background: var(--bal-button-color-secondary-base-background);
  --mod-button-color-border: var(--bal-button-color-secondary-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-secondary-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-secondary-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-secondary-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-secondary-active-text);
  --mod-button-color-background-active: var(--bal-button-color-secondary-active-background);
  --mod-button-color-border-active: var(--bal-button-color-secondary-active-border);
}

button.is-tertiary:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-tertiary-base-text);
  --mod-button-color-background: var(--bal-button-color-tertiary-base-background);
  --mod-button-color-border: var(--bal-button-color-tertiary-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-tertiary-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-tertiary-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-tertiary-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-tertiary-active-text);
  --mod-button-color-background-active: var(--bal-button-color-tertiary-active-background);
  --mod-button-color-border-active: var(--bal-button-color-tertiary-active-border);
}

button.is-tertiary-yellow:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-tertiary-yellow-base-text);
  --mod-button-color-background: var(--bal-button-color-tertiary-yellow-base-background);
  --mod-button-color-border: var(--bal-button-color-tertiary-yellow-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-tertiary-yellow-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-tertiary-yellow-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-tertiary-yellow-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-tertiary-yellow-active-text);
  --mod-button-color-background-active: var(--bal-button-color-tertiary-yellow-active-background);
  --mod-button-color-border-active: var(--bal-button-color-tertiary-yellow-active-border);
}

button.is-tertiary-purple:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-tertiary-purple-base-text);
  --mod-button-color-background: var(--bal-button-color-tertiary-purple-base-background);
  --mod-button-color-border: var(--bal-button-color-tertiary-purple-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-tertiary-purple-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-tertiary-purple-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-tertiary-purple-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-tertiary-purple-active-text);
  --mod-button-color-background-active: var(--bal-button-color-tertiary-purple-active-background);
  --mod-button-color-border-active: var(--bal-button-color-tertiary-purple-active-border);
}

button.is-tertiary-green:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-tertiary-green-base-text);
  --mod-button-color-background: var(--bal-button-color-tertiary-green-base-background);
  --mod-button-color-border: var(--bal-button-color-tertiary-green-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-tertiary-green-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-tertiary-green-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-tertiary-green-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-tertiary-green-active-text);
  --mod-button-color-background-active: var(--bal-button-color-tertiary-green-active-background);
  --mod-button-color-border-active: var(--bal-button-color-tertiary-green-active-border);
}

button.is-tertiary-red:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-tertiary-red-base-text);
  --mod-button-color-background: var(--bal-button-color-tertiary-red-base-background);
  --mod-button-color-border: var(--bal-button-color-tertiary-red-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-tertiary-red-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-tertiary-red-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-tertiary-red-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-tertiary-red-active-text);
  --mod-button-color-background-active: var(--bal-button-color-tertiary-red-active-background);
  --mod-button-color-border-active: var(--bal-button-color-tertiary-red-active-border);
}

button.is-info:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-info-base-text);
  --mod-button-color-background: var(--bal-button-color-info-base-background);
  --mod-button-color-border: var(--bal-button-color-info-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-info-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-info-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-info-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-info-active-text);
  --mod-button-color-background-active: var(--bal-button-color-info-active-background);
  --mod-button-color-border-active: var(--bal-button-color-info-active-border);
}

button.is-success:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-success-base-text);
  --mod-button-color-background: var(--bal-button-color-success-base-background);
  --mod-button-color-border: var(--bal-button-color-success-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-success-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-success-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-success-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-success-active-text);
  --mod-button-color-background-active: var(--bal-button-color-success-active-background);
  --mod-button-color-border-active: var(--bal-button-color-success-active-border);
}

button.is-warning:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-warning-base-text);
  --mod-button-color-background: var(--bal-button-color-warning-base-background);
  --mod-button-color-border: var(--bal-button-color-warning-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-warning-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-warning-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-warning-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-warning-active-text);
  --mod-button-color-background-active: var(--bal-button-color-warning-active-background);
  --mod-button-color-border-active: var(--bal-button-color-warning-active-border);
}

button.is-danger:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-danger-base-text);
  --mod-button-color-background: var(--bal-button-color-danger-base-background);
  --mod-button-color-border: var(--bal-button-color-danger-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-danger-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-danger-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-danger-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-danger-active-text);
  --mod-button-color-background-active: var(--bal-button-color-danger-active-background);
  --mod-button-color-border-active: var(--bal-button-color-danger-active-border);
}

button.is-link:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-link-base-text);
  --mod-button-color-background: var(--bal-button-color-link-base-background);
  --mod-button-color-border: var(--bal-button-color-link-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-link-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-link-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-link-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-link-active-text);
  --mod-button-color-background-active: var(--bal-button-color-link-active-background);
  --mod-button-color-border-active: var(--bal-button-color-link-active-border);
}

button.is-text:not(.is-inverted):not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-text-base-text);
  --mod-button-color-background: var(--bal-button-color-text-base-background);
  --mod-button-color-border: var(--bal-button-color-text-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-text-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-text-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-text-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-text-active-text);
  --mod-button-color-background-active: var(--bal-button-color-text-active-background);
  --mod-button-color-border-active: var(--bal-button-color-text-active-border);
}

button.is-primary.is-inverted:not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-inverted-base-text);
  --mod-button-color-background: var(--bal-button-color-inverted-base-background);
  --mod-button-color-border: var(--bal-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--bal-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--bal-button-color-inverted-active-border);
}

button.is-tertiary-yellow.is-inverted:not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-inverted-base-text);
  --mod-button-color-background: var(--bal-button-color-inverted-base-background);
  --mod-button-color-border: var(--bal-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--bal-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--bal-button-color-inverted-active-border);
}

button.is-tertiary-purple.is-inverted:not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-inverted-base-text);
  --mod-button-color-background: var(--bal-button-color-inverted-base-background);
  --mod-button-color-border: var(--bal-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--bal-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--bal-button-color-inverted-active-border);
}

button.is-tertiary-green.is-inverted:not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-inverted-base-text);
  --mod-button-color-background: var(--bal-button-color-inverted-base-background);
  --mod-button-color-border: var(--bal-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--bal-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--bal-button-color-inverted-active-border);
}

button.is-tertiary-red.is-inverted:not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-inverted-base-text);
  --mod-button-color-background: var(--bal-button-color-inverted-base-background);
  --mod-button-color-border: var(--bal-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--bal-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--bal-button-color-inverted-active-border);
}

button.is-info.is-inverted:not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-inverted-base-text);
  --mod-button-color-background: var(--bal-button-color-inverted-base-background);
  --mod-button-color-border: var(--bal-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--bal-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--bal-button-color-inverted-active-border);
}

button.is-success.is-inverted:not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-inverted-base-text);
  --mod-button-color-background: var(--bal-button-color-inverted-base-background);
  --mod-button-color-border: var(--bal-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--bal-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--bal-button-color-inverted-active-border);
}

button.is-warning.is-inverted:not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-inverted-base-text);
  --mod-button-color-background: var(--bal-button-color-inverted-base-background);
  --mod-button-color-border: var(--bal-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--bal-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--bal-button-color-inverted-active-border);
}

button.is-danger.is-inverted:not(.is-dashed) {
  --mod-button-color-text: var(--bal-button-color-inverted-base-text);
  --mod-button-color-background: var(--bal-button-color-inverted-base-background);
  --mod-button-color-border: var(--bal-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--bal-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--bal-button-color-inverted-active-border);
}

button.is-secondary.is-inverted {
  --mod-button-color-text: var(--bal-button-color-inverted-secondary-base-text);
  --mod-button-color-background: var(--bal-button-color-inverted-secondary-base-background);
  --mod-button-color-border: var(--bal-button-color-inverted-secondary-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-inverted-secondary-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-inverted-secondary-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-inverted-secondary-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-inverted-secondary-active-text);
  --mod-button-color-background-active: var(--bal-button-color-inverted-secondary-active-background);
  --mod-button-color-border-active: var(--bal-button-color-inverted-secondary-active-border);
}

button.is-tertiary.is-inverted {
  --mod-button-color-text: var(--bal-button-color-inverted-tertiary-base-text);
  --mod-button-color-background: var(--bal-button-color-inverted-tertiary-base-background);
  --mod-button-color-border: var(--bal-button-color-inverted-tertiary-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-inverted-tertiary-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-inverted-tertiary-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-inverted-tertiary-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-inverted-tertiary-active-text);
  --mod-button-color-background-active: var(--bal-button-color-inverted-tertiary-active-background);
  --mod-button-color-border-active: var(--bal-button-color-inverted-tertiary-active-border);
}

button.is-text link.is-inverted {
  --mod-button-color-text: var(--bal-button-color-inverted-text link-base-text);
  --mod-button-color-background: var(--bal-button-color-inverted-text link-base-background);
  --mod-button-color-border: var(--bal-button-color-inverted-text link-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-inverted-text link-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-inverted-text link-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-inverted-text link-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-inverted-text link-active-text);
  --mod-button-color-background-active: var(--bal-button-color-inverted-text link-active-background);
  --mod-button-color-border-active: var(--bal-button-color-inverted-text link-active-border);
}

button.is-sm {
  --mod-button-font-size: var(--bal-button-size-sm);
  --mod-button-min-height: 2rem;
  --mod-button-min-width: 2rem;
  --mod-button-padding-inline: 0.75rem;
}

button.is-lg {
  --mod-button-font-size: var(--bal-button-size-lg);
  --mod-button-min-height: 3.5rem;
  --mod-button-min-width: 3.5rem;
  --mod-button-padding-inline: 1.5rem;
}

button.is-flat {
  --mod-button-padding-inline: 0;
  --mod-button-min-height: 1.75rem;
}

button.is-rounded {
  --mod-button-radius: var(--bal-button-radius-rounded);
}

button.is-square:not(.is-sm), button.is-square:not(.is-small) {
  --mod-button-radius: var(--bal-button-radius-base);
  --mod-button-padding-inline: 0;
  --mod-button-gap: 0;
  --mod-button-min-height: 3rem;
  --mod-button-min-width: 3rem;
  --icon-size: 1.5rem;
}
button.is-square.is-sm, button.is-square.is-small {
  --mod-button-radius: var(--bal-button-radius-base);
  --mod-button-padding-inline: 0;
  --mod-button-gap: 0;
  --mod-button-min-height: 2rem;
  --mod-button-min-width: 2rem;
  --icon-size: var(--bal-icon-size-sm);
}

button.is-circle:not(.is-sm), button.is-circle:not(.is-small) {
  --mod-button-radius: var(--bal-button-radius-rounded);
  --mod-button-padding-inline: 0;
  --mod-button-gap: 0;
  --mod-button-min-height: 3rem;
  --mod-button-min-width: 3rem;
  --icon-size: 1.5rem;
}
button.is-circle.is-small, button.is-circle.is-sm {
  --mod-button-radius: var(--bal-button-radius-rounded);
  --mod-button-padding-inline: 0;
  --mod-button-gap: 0;
  --mod-button-min-height: 2rem;
  --mod-button-min-width: 2rem;
  --icon-size: var(--bal-icon-size-sm);
}

.button.is-tertiary-purple.is-dashed {
  --mod-button-border-style: dashed;
  --mod-button-color-text: var(--bal-button-color-tertiary-purple-dashed-base-text);
  --mod-button-color-background: var(--bal-button-color-tertiary-purple-dashed-base-background);
  --mod-button-color-border: var(--bal-button-color-tertiary-purple-dashed-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-tertiary-purple-dashed-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-tertiary-purple-dashed-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-tertiary-purple-dashed-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-tertiary-purple-dashed-active-text);
  --mod-button-color-background-active: var(--bal-button-color-tertiary-purple-dashed-active-background);
  --mod-button-color-border-active: var(--bal-button-color-tertiary-purple-dashed-active-border);
}
.button.is-tertiary-purple.is-dashed bal-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  border-radius: var(--bal-button-radius-rounded);
  background: var(--_button-color-border);
}

.button.is-tertiary-red.is-dashed {
  --mod-button-border-style: dashed;
  --mod-button-color-text: var(--bal-button-color-tertiary-red-dashed-base-text);
  --mod-button-color-background: var(--bal-button-color-tertiary-red-dashed-base-background);
  --mod-button-color-border: var(--bal-button-color-tertiary-red-dashed-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-tertiary-red-dashed-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-tertiary-red-dashed-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-tertiary-red-dashed-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-tertiary-red-dashed-active-text);
  --mod-button-color-background-active: var(--bal-button-color-tertiary-red-dashed-active-background);
  --mod-button-color-border-active: var(--bal-button-color-tertiary-red-dashed-active-border);
}
.button.is-tertiary-red.is-dashed bal-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  border-radius: var(--bal-button-radius-rounded);
  background: var(--_button-color-border);
}

.button.is-tertiary-green.is-dashed {
  --mod-button-border-style: dashed;
  --mod-button-color-text: var(--bal-button-color-tertiary-green-dashed-base-text);
  --mod-button-color-background: var(--bal-button-color-tertiary-green-dashed-base-background);
  --mod-button-color-border: var(--bal-button-color-tertiary-green-dashed-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-tertiary-green-dashed-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-tertiary-green-dashed-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-tertiary-green-dashed-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-tertiary-green-dashed-active-text);
  --mod-button-color-background-active: var(--bal-button-color-tertiary-green-dashed-active-background);
  --mod-button-color-border-active: var(--bal-button-color-tertiary-green-dashed-active-border);
}
.button.is-tertiary-green.is-dashed bal-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  border-radius: var(--bal-button-radius-rounded);
  background: var(--_button-color-border);
}

.button.is-tertiary-yellow.is-dashed {
  --mod-button-border-style: dashed;
  --mod-button-color-text: var(--bal-button-color-tertiary-yellow-dashed-base-text);
  --mod-button-color-background: var(--bal-button-color-tertiary-yellow-dashed-base-background);
  --mod-button-color-border: var(--bal-button-color-tertiary-yellow-dashed-base-border);
  --mod-button-color-text-hover: var(--bal-button-color-tertiary-yellow-dashed-hover-text);
  --mod-button-color-background-hover: var(--bal-button-color-tertiary-yellow-dashed-hover-background);
  --mod-button-color-border-hover: var(--bal-button-color-tertiary-yellow-dashed-hover-border);
  --mod-button-color-text-active: var(--bal-button-color-tertiary-yellow-dashed-active-text);
  --mod-button-color-background-active: var(--bal-button-color-tertiary-yellow-dashed-active-background);
  --mod-button-color-border-active: var(--bal-button-color-tertiary-yellow-dashed-active-border);
}
.button.is-tertiary-yellow.is-dashed bal-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  border-radius: var(--bal-button-radius-rounded);
  background: var(--_button-color-border);
}

fieldset[disabled] .button, fieldset[disabled] .button:hover, fieldset[disabled] .button.is-hovered, fieldset[disabled] .button:active, fieldset[disabled] .button.is-pressed, fieldset[disabled] .button:focus, fieldset[disabled] .button.is-focused,
.button.is-disabled,
.button.is-disabled:hover,
.button.is-disabled.is-hovered,
.button.is-disabled:active,
.button.is-disabled.is-pressed,
.button.is-disabled:focus,
.button.is-disabled.is-focused,
.button.is-inverted.is-disabled,
.button.is-inverted.is-disabled:hover,
.button.is-inverted.is-disabled.is-hovered,
.button.is-inverted.is-disabled:active,
.button.is-inverted.is-disabled.is-pressed,
.button.is-inverted.is-disabled:focus,
.button.is-inverted.is-disabled.is-focused,
.button[disabled],
.button[disabled]:hover,
.button[disabled].is-hovered,
.button[disabled]:active,
.button[disabled].is-pressed,
.button[disabled]:focus,
.button[disabled].is-focused {
  pointer-events: none;
  opacity: 1;
  box-shadow: none;
  text-decoration: none;
  cursor: default;
  translate: 0 0;
  background-color: var(--bal-button-color-disabled-base-background);
  border: var(--bal-button-color-disabled-base-border);
  color: var(--bal-button-color-disabled-base-text);
}
fieldset[disabled] .button > bal-icon, fieldset[disabled] .button:hover > bal-icon, fieldset[disabled] .button.is-hovered > bal-icon, fieldset[disabled] .button:active > bal-icon, fieldset[disabled] .button.is-pressed > bal-icon, fieldset[disabled] .button:focus > bal-icon, fieldset[disabled] .button.is-focused > bal-icon,
.button.is-disabled > bal-icon,
.button.is-disabled:hover > bal-icon,
.button.is-disabled.is-hovered > bal-icon,
.button.is-disabled:active > bal-icon,
.button.is-disabled.is-pressed > bal-icon,
.button.is-disabled:focus > bal-icon,
.button.is-disabled.is-focused > bal-icon,
.button.is-inverted.is-disabled > bal-icon,
.button.is-inverted.is-disabled:hover > bal-icon,
.button.is-inverted.is-disabled.is-hovered > bal-icon,
.button.is-inverted.is-disabled:active > bal-icon,
.button.is-inverted.is-disabled.is-pressed > bal-icon,
.button.is-inverted.is-disabled:focus > bal-icon,
.button.is-inverted.is-disabled.is-focused > bal-icon,
.button[disabled] > bal-icon,
.button[disabled]:hover > bal-icon,
.button[disabled].is-hovered > bal-icon,
.button[disabled]:active > bal-icon,
.button[disabled].is-pressed > bal-icon,
.button[disabled]:focus > bal-icon,
.button[disabled].is-focused > bal-icon {
  --icon-size: var(--bal-button-color-disabled-base-text);
}
fieldset[disabled] .button > bal-spinner, fieldset[disabled] .button:hover > bal-spinner, fieldset[disabled] .button.is-hovered > bal-spinner, fieldset[disabled] .button:active > bal-spinner, fieldset[disabled] .button.is-pressed > bal-spinner, fieldset[disabled] .button:focus > bal-spinner, fieldset[disabled] .button.is-focused > bal-spinner,
.button.is-disabled > bal-spinner,
.button.is-disabled:hover > bal-spinner,
.button.is-disabled.is-hovered > bal-spinner,
.button.is-disabled:active > bal-spinner,
.button.is-disabled.is-pressed > bal-spinner,
.button.is-disabled:focus > bal-spinner,
.button.is-disabled.is-focused > bal-spinner,
.button.is-inverted.is-disabled > bal-spinner,
.button.is-inverted.is-disabled:hover > bal-spinner,
.button.is-inverted.is-disabled.is-hovered > bal-spinner,
.button.is-inverted.is-disabled:active > bal-spinner,
.button.is-inverted.is-disabled.is-pressed > bal-spinner,
.button.is-inverted.is-disabled:focus > bal-spinner,
.button.is-inverted.is-disabled.is-focused > bal-spinner,
.button[disabled] > bal-spinner,
.button[disabled]:hover > bal-spinner,
.button[disabled].is-hovered > bal-spinner,
.button[disabled]:active > bal-spinner,
.button[disabled].is-pressed > bal-spinner,
.button[disabled]:focus > bal-spinner,
.button[disabled].is-focused > bal-spinner {
  --spinner-color: var(--bal-button-color-disabled-base-text);
}
fieldset[disabled] .button > bal-spinner[variation=circle], fieldset[disabled] .button:hover > bal-spinner[variation=circle], fieldset[disabled] .button.is-hovered > bal-spinner[variation=circle], fieldset[disabled] .button:active > bal-spinner[variation=circle], fieldset[disabled] .button.is-pressed > bal-spinner[variation=circle], fieldset[disabled] .button:focus > bal-spinner[variation=circle], fieldset[disabled] .button.is-focused > bal-spinner[variation=circle],
.button.is-disabled > bal-spinner[variation=circle],
.button.is-disabled:hover > bal-spinner[variation=circle],
.button.is-disabled.is-hovered > bal-spinner[variation=circle],
.button.is-disabled:active > bal-spinner[variation=circle],
.button.is-disabled.is-pressed > bal-spinner[variation=circle],
.button.is-disabled:focus > bal-spinner[variation=circle],
.button.is-disabled.is-focused > bal-spinner[variation=circle],
.button.is-inverted.is-disabled > bal-spinner[variation=circle],
.button.is-inverted.is-disabled:hover > bal-spinner[variation=circle],
.button.is-inverted.is-disabled.is-hovered > bal-spinner[variation=circle],
.button.is-inverted.is-disabled:active > bal-spinner[variation=circle],
.button.is-inverted.is-disabled.is-pressed > bal-spinner[variation=circle],
.button.is-inverted.is-disabled:focus > bal-spinner[variation=circle],
.button.is-inverted.is-disabled.is-focused > bal-spinner[variation=circle],
.button[disabled] > bal-spinner[variation=circle],
.button[disabled]:hover > bal-spinner[variation=circle],
.button[disabled].is-hovered > bal-spinner[variation=circle],
.button[disabled]:active > bal-spinner[variation=circle],
.button[disabled].is-pressed > bal-spinner[variation=circle],
.button[disabled]:focus > bal-spinner[variation=circle],
.button[disabled].is-focused > bal-spinner[variation=circle] {
  --spinner-circle-color-border-background: var(--bal-color-grey-4);
  --spinner-circle-color-border-progress: var(--bal-button-color-disabled-base-text);
}

.buttons {
  --buttons-align-items: var(--bal-buttons-align-items, center);
  --buttons-justify-content: var(--bal-buttons-justify-content, flex-start);
  display: flex;
  gap: 0.5rem;
  flex-flow: column wrap;
  width: 100%;
}
.buttons:not(:last-child) {
  margin-bottom: 1rem;
}
@media screen and (max-width: 768px) {
  .buttons .button:not(.is-square, .is-circle),
  .buttons bal-button:not(.is-square, .is-circle) {
    flex: 1 1 auto;
  }
}
@media screen and (min-width: 769px) {
  .buttons {
    flex-flow: row wrap;
    align-items: var(--buttons-align-items);
    justify-content: var(--buttons-justify-content);
  }
  .buttons.fit-content {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.buttons.as-row {
  flex-flow: row wrap;
  align-items: var(--buttons-align-items);
  justify-content: var(--buttons-justify-content);
}
.buttons.as-row.is-expanded .button,
.buttons.as-row.is-expanded bal-button {
  flex: 1;
}
.buttons.as-col {
  flex-flow: column wrap;
}
@media screen and (min-width: 769px) {
  .buttons.as-col {
    --buttons-align-items: flex-start;
  }
}
.buttons.is-reverse.as-row {
  flex-flow: row-reverse wrap;
}
.buttons.is-reverse.as-col {
  flex-flow: column-reverse wrap;
}
@media screen and (min-width: 769px) {
  .buttons.is-center:not(.as-col), .buttons.is-centered:not(.as-col) {
    --buttons-justify-content: center;
  }
  .buttons.is-center.as-col, .buttons.is-centered.as-col {
    --buttons-align-items: center;
  }
  .buttons.is-right:not(.as-col) {
    --buttons-justify-content: flex-end;
  }
  .buttons.is-right.as-col {
    --buttons-align-items: flex-end;
  }
}
.buttons.fit-content bal-button {
  --bal-button-width: 100%;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .buttons {
    --bal-button-width: 100%;
  }
  .buttons bal-button {
    --bal-button-width: 100%;
    width: 100%;
  }
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.badge {
  --_badge-m: var(--badge-m, var(--mod-badge-m, 0));
  --_badge-my: var(--badge-my, var(--mod-badge-my));
  --_badge-mx: var(--badge-mx, var(--mod-badge-mx));
  --_badge-ml: var(--badge-ml, var(--mod-badge-ml));
  --_badge-mr: var(--badge-mr, var(--mod-badge-mr));
  --_badge-mt: var(--badge-mt, var(--mod-badge-mt));
  --_badge-mb: var(--badge-mb, var(--mod-badge-mb));
  margin: var(--_badge-m);
  margin-inline: var(--_badge-mx);
  margin-block: var(--_badge-my);
  margin-left: var(--_badge-ml);
  margin-right: var(--_badge-mr);
  margin-top: var(--_badge-mt);
  margin-bottom: var(--_badge-mb);
  --_badge-position: var(--badge-position, var(--mod-badge-position, static));
  --_badge-top: var(--badge-top, var(--mod-badge-top));
  --_badge-right: var(--badge-right, var(--mod-badge-right));
  --_badge-bottom: var(--badge-bottom, var(--mod-badge-bottom));
  --_badge-left: var(--badge-left, var(--mod-badge-left));
  position: var(--_badge-position);
  top: var(--_badge-top);
  right: var(--_badge-right);
  bottom: var(--_badge-bottom);
  left: var(--_badge-left);
  --badge-font-family: var(--bal-badge-text-family);
  --badge-font-weight: var(--bal-badge-text-weight);
  --badge-min-width: var(--bal-badge-size-base);
  --badge-height: var(--bal-badge-size-base);
  --badge-radius: calc(var(--bal-badge-size-base) / 2);
  --badge-color-background: var(--bal-badge-color-base-background);
  --badge-color-text: var(--bal-badge-color-base-text);
  --badge-pulse-color: var(--bal-badge-color-base-background);
  --badge-font-size: 85%;
  --badge-icon-size: 0.875rem;
  --badge-gap: 4px;
  --badge-padding-inline: 4px;
  --badge-padding-block: 4px;
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.badge {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-flex;
  vertical-align: text-top;
  justify-content: center;
  align-items: center;
  hyphens: auto;
  font-size: var(--badge-font-size);
  white-space: nowrap;
  line-height: 1;
  z-index: 1;
  cursor: inherit;
  min-width: var(--badge-min-width);
  height: var(--badge-height);
  border-radius: var(--badge-radius);
  background: var(--badge-color-background);
  color: var(--badge-color-text);
  font-family: var(--badge-font-family);
  font-weight: var(--badge-font-weight);
  gap: var(--badge-gap);
  padding-inline: var(--badge-padding-inline);
  padding-block: var(--badge-padding-block);
}
.badge > bal-icon {
  --icon-size: var(--badge-icon-size);
}
.badge.has-pulse {
  animation: pulse 2s infinite;
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.badge {
  margin: var(--badge-m);
  margin-inline: var(--badge-mx);
  margin-block: var(--badge-my);
  margin-left: var(--badge-ml);
  margin-right: var(--badge-mr);
  margin-top: var(--badge-mt);
  margin-bottom: var(--badge-mb);
  position: var(--badge-position);
  top: var(--badge-top);
  right: var(--badge-right);
  bottom: var(--badge-bottom);
  left: var(--badge-left);
}

.badge.is-red {
  --badge-color-text: var(--bal-badge-color-red-text);
  --badge-color-background: var(--bal-badge-color-red-background);
  --badge-pulse-color: var(--bal-badge-color-red-background);
}
.badge.is-red bal-icon {
  --bal-icon-color: var(--bal-badge-color-red-text);
}
.badge.is-green {
  --badge-color-text: var(--bal-badge-color-green-text);
  --badge-color-background: var(--bal-badge-color-green-background);
  --badge-pulse-color: var(--bal-badge-color-green-background);
}
.badge.is-green bal-icon {
  --bal-icon-color: var(--bal-badge-color-green-text);
}
.badge.is-yellow {
  --badge-color-text: var(--bal-badge-color-yellow-text);
  --badge-color-background: var(--bal-badge-color-yellow-background);
  --badge-pulse-color: var(--bal-badge-color-yellow-background);
}
.badge.is-yellow bal-icon {
  --bal-icon-color: var(--bal-badge-color-yellow-text);
}
.badge.is-purple {
  --badge-color-text: var(--bal-badge-color-purple-text);
  --badge-color-background: var(--bal-badge-color-purple-background);
  --badge-pulse-color: var(--bal-badge-color-purple-background);
}
.badge.is-purple bal-icon {
  --bal-icon-color: var(--bal-badge-color-purple-text);
}
.badge.is-grey {
  --badge-color-text: var(--bal-badge-color-grey-text);
  --badge-color-background: var(--bal-badge-color-grey-background);
  --badge-pulse-color: var(--bal-badge-color-grey-background);
}
.badge.is-grey bal-icon {
  --bal-icon-color: var(--bal-badge-color-grey-text);
}
.badge.is-success {
  --badge-color-text: var(--bal-badge-color-success-text);
  --badge-color-background: var(--bal-badge-color-success-background);
  --badge-pulse-color: var(--bal-badge-color-success-background);
}
.badge.is-success bal-icon {
  --bal-icon-color: var(--bal-badge-color-success-text);
}
.badge.is-warning {
  --badge-color-text: var(--bal-badge-color-warning-text);
  --badge-color-background: var(--bal-badge-color-warning-background);
  --badge-pulse-color: var(--bal-badge-color-warning-background);
}
.badge.is-warning bal-icon {
  --bal-icon-color: var(--bal-badge-color-warning-text);
}
.badge.is-danger {
  --badge-color-text: var(--bal-badge-color-danger-text);
  --badge-color-background: var(--bal-badge-color-danger-background);
  --badge-pulse-color: var(--bal-badge-color-danger-background);
}
.badge.is-danger bal-icon {
  --bal-icon-color: var(--bal-badge-color-danger-text);
}
.badge.is-sm {
  --badge-radius: calc(var(--bal-badge-size-sm) / 2);
  --badge-height: var(--bal-badge-size-sm);
  --badge-min-width: var(--bal-badge-size-sm);
  --badge-padding-inline: 0;
  --badge-padding-block: 0;
  --badge-font-size: 0;
  max-width: var(--bal-badge-size-sm);
  padding: 0;
  overflow: hidden;
}
.badge.is-sm > * {
  display: none;
}
.badge.is-lg {
  --badge-min-width: var(--bal-badge-size-lg);
  --badge-height: var(--bal-badge-size-lg);
  --badge-radius: calc(var(--bal-badge-size-lg) / 2);
  --badge-font-size: 1rem;
  --badge-icon-size: 1.125rem;
}

/**
  * Animations
  * --------------------------------
  * Define here the animations for the component.
  */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--badge-pulse-color);
  }
  70% {
    box-shadow: 0 0 0 0.5rem transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.accordion {
  /* Marker icons (SVG via mask so we can color with currentColor) */
  --accordion-marker-size: 1rem;
  --accordion-marker-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%3E%3Cpath%20fill='black'%20d='M5,7.874a1.238,1.238,0,0,1-.879-.364L.206,3.393A.75.75,0,1,1,1.294,2.36L4.819,6.072a.249.249,0,0,0,.362,0L8.706,2.36A.75.75,0,1,1,9.794,3.393L5.9,7.5A1.269,1.269,0,0,1,5,7.874Z'/%3E%3C/svg%3E");
  --accordion-marker-plus: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2014'%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%201C8%200.447715%207.55228%200%207%200C6.44772%200%206%200.447715%206%201V6H1C0.447715%206%200%206.44772%200%207C0%207.55228%200.447715%208%201%208H6V13C6%2013.5523%206.44772%2014%207%2014C7.55228%2014%208%2013.5523%208%2013V8H13C13.5523%208%2014%207.55228%2014%207C14%206.44772%2013.5523%206%2013%206H8V1Z'/%3E%3C/svg%3E");
  --accordion-marker-minus: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2014'%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%207C0%206.44772%200.447715%206%201%206H13C13.5523%206%2014%206.44772%2014%207C14%207.55228%2013.5523%208%2013%208H1C0.447715%208%200%207.55228%200%207Z'/%3E%3C/svg%3E");
  /* Default marker variant */
  --accordion-marker-icon: var(--accordion-marker-chevron);
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
details.accordion {
  display: block;
  position: relative;
}

details.accordion > summary:not(.button) {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

details.accordion > summary {
  /* Hide the native disclosure triangle */
  list-style: none;
}
details.accordion > summary::-webkit-details-marker {
  display: none;
}
details.accordion > summary::marker {
  content: "";
}

details.accordion {
  /* No marker variant */
}
details.accordion > summary::after {
  content: "";
  flex: 0 0 auto;
  min-width: var(--accordion-marker-size);
  width: 1.5rem;
  height: var(--accordion-marker-size);
  background-color: currentcolor;
  -webkit-mask-image: var(--accordion-marker-icon);
          mask-image: var(--accordion-marker-icon);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transform-origin: center;
  cursor: pointer;
}
details.accordion.has-marker-plus {
  --accordion-marker-icon: var(--accordion-marker-plus);
}
details.accordion.has-marker-plus-minus {
  --accordion-marker-icon: var(--accordion-marker-plus);
}
details.accordion.has-marker-plus-minus[open] {
  --accordion-marker-icon: var(--accordion-marker-minus);
}
details.accordion[open]:not(.has-marker-plus, .has-marker-plus-minus) > summary::after {
  transform: rotate(180deg);
}
details.accordion.has-marker-plus[open] > summary::after {
  transform: rotate(225deg);
}
details.accordion.has-marker-none > summary::after {
  display: none;
}
details.accordion.has-marker-left > summary::after {
  order: -1;
}
details.accordion.has-marker-left > summary:not(.button) {
  justify-content: flex-start;
}

details.accordion > p,
details.accordion > .has-space {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/**
 * Animation: smooth open/close
 * --------------------------------
 * - Uses ::details-content when supported (modern browsers)
 * - Falls back to animating element siblings after summary
 */
:root {
  interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: no-preference) {
  details.accordion > summary::after {
    transition: transform 300ms ease;
  }
  @supports selector(::details-content) {
    details::details-content {
      overflow: hidden;
      height: 0;
      /* Enable transitioning of `content-visibility` */
      transition: height 0.3s, content-visibility 0.3s;
      transition-behavior: allow-discrete;
    }
    details[open]::details-content {
      height: auto;
    }
  }
}
/*
 * Visual variant: place summary at the bottom.
 * Uses :has() to reserve space so the summary is visible even when closed.
 */
details.accordion:has(> summary.button.at-end) {
  padding-bottom: 3rem;
}

details.accordion:has(> summary.button.is-small.at-end) {
  padding-bottom: 2rem;
}

details.accordion > summary.button.at-end {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Keep content from being covered by the bottom-positioned summary */
details.accordion:has(> summary.button.at-end) > summary.button.at-end ~ * {
  padding-bottom: 3rem;
}

details.accordion:has(> summary.button.is-small.at-end) > summary.button.is-small.at-end ~ * {
  padding-bottom: 2rem;
}

/* Optional: show different summary text based on open/closed (CSS-only)
 * Markup:
 *   <span class="accordion-label" aria-hidden="true">
 *     <span class="is-closed">…</span>
 *     <span class="is-open">…</span>
 *   </span>
 */
details.accordion > summary .accordion-label > .is-open,
details.accordion > summary > .is-open {
  display: none;
}

details.accordion[open] > summary .accordion-label > .is-closed,
details.accordion[open] > summary > .is-closed {
  display: none;
}

details.accordion[open] > summary .accordion-label > .is-open,
details.accordion[open] > summary > .is-open {
  display: inline;
}

.bg-white {
  background: var(--bal-background-color-white) !important;
}

.bg-transparent {
  background: var(--bal-background-color-transparent) !important;
}

.bg-sky-light {
  background: var(--bal-background-color-sky-light) !important;
}

.bg-sky {
  background: var(--bal-background-color-sky) !important;
}

.bg-sky-dark {
  background: var(--bal-background-color-sky-dark) !important;
}

.bg-disabled {
  background: var(--bal-background-color-disabled) !important;
}

.bg-info {
  background: var(--bal-background-color-info) !important;
}

.bg-info-light {
  background: var(--bal-background-color-info-light) !important;
}

.bg-info-dark {
  background: var(--bal-background-color-info-dark) !important;
}

.bg-info-darker {
  background: var(--bal-background-color-info-darker) !important;
}

.bg-info-darkest {
  background: var(--bal-background-color-info-darkest) !important;
}

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

.bg-success-lighter {
  background: var(--bal-background-color-success-lighter) !important;
}

.bg-success-light {
  background: var(--bal-background-color-success-light) !important;
}

.bg-success-dark {
  background: var(--bal-background-color-success-dark) !important;
}

.bg-success-darker {
  background: var(--bal-background-color-success-darker) !important;
}

.bg-success-darkest {
  background: var(--bal-background-color-success-darkest) !important;
}

.bg-warning-lighter {
  background: var(--bal-background-color-warning-lighter) !important;
}

.bg-warning-light {
  background: var(--bal-background-color-warning-light) !important;
}

.bg-warning {
  background: var(--bal-background-color-warning) !important;
}

.bg-warning-dark {
  background: var(--bal-background-color-warning-dark) !important;
}

.bg-warning-darker {
  background: var(--bal-background-color-warning-darker) !important;
}

.bg-warning-darkest {
  background: var(--bal-background-color-warning-darkest) !important;
}

.bg-danger-lighter {
  background: var(--bal-background-color-danger-lighter) !important;
}

.bg-danger-light {
  background: var(--bal-background-color-danger-light) !important;
}

.bg-danger {
  background: var(--bal-background-color-danger) !important;
}

.bg-danger-dark {
  background: var(--bal-background-color-danger-dark) !important;
}

.bg-danger-darker {
  background: var(--bal-background-color-danger-darker) !important;
}

.bg-danger-darkest {
  background: var(--bal-background-color-danger-darkest) !important;
}

.bg-green-light-2 {
  background: var(--bal-background-color-green-light-2) !important;
}

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

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

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

.bg-primary-light {
  background: var(--bal-background-color-primary-light) !important;
}

.bg-primary {
  background: var(--bal-background-color-primary) !important;
}

.bg-primary-hover {
  background: var(--bal-background-color-primary-hover) !important;
}

.bg-primary-active {
  background: var(--bal-background-color-primary-active) !important;
}

.bg-green-lighter {
  background: var(--bal-background-color-green-lighter) !important;
}

.bg-green-light {
  background: var(--bal-background-color-green-light) !important;
}

.bg-green {
  background: var(--bal-background-color-green) !important;
}

.bg-purple-lighter {
  background: var(--bal-background-color-purple-lighter) !important;
}

.bg-purple-light {
  background: var(--bal-background-color-purple-light) !important;
}

.bg-purple {
  background: var(--bal-background-color-purple) !important;
}

.bg-red-lighter {
  background: var(--bal-background-color-red-lighter) !important;
}

.bg-red-light {
  background: var(--bal-background-color-red-light) !important;
}

.bg-red {
  background: var(--bal-background-color-red) !important;
}

.bg-yellow-lighter {
  background: var(--bal-background-color-yellow-lighter) !important;
}

.bg-yellow-light {
  background: var(--bal-background-color-yellow-light) !important;
}

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

.bg-black {
  background: var(--bal-color-black) !important;
}

.bg-neutral {
  background: var(--bal-color-neutral) !important;
}

.bg-danger-1 {
  background: var(--bal-color-danger-1) !important;
}

.bg-danger-2 {
  background: var(--bal-color-danger-2) !important;
}

.bg-danger-3 {
  background: var(--bal-color-danger-3) !important;
}

.bg-danger-4 {
  background: var(--bal-color-danger-4) !important;
}

.bg-danger-5 {
  background: var(--bal-color-danger-5) !important;
}

.bg-danger-6 {
  background: var(--bal-color-danger-6) !important;
}

.bg-warning-1 {
  background: var(--bal-color-warning-1) !important;
}

.bg-warning-2 {
  background: var(--bal-color-warning-2) !important;
}

.bg-warning-3 {
  background: var(--bal-color-warning-3) !important;
}

.bg-warning-4 {
  background: var(--bal-color-warning-4) !important;
}

.bg-warning-5 {
  background: var(--bal-color-warning-5) !important;
}

.bg-warning-6 {
  background: var(--bal-color-warning-6) !important;
}

.bg-success-1 {
  background: var(--bal-color-success-1) !important;
}

.bg-success-2 {
  background: var(--bal-color-success-2) !important;
}

.bg-success-3 {
  background: var(--bal-color-success-3) !important;
}

.bg-success-4 {
  background: var(--bal-color-success-4) !important;
}

.bg-success-5 {
  background: var(--bal-color-success-5) !important;
}

.bg-success-6 {
  background: var(--bal-color-success-6) !important;
}

.bg-info-1 {
  background: var(--bal-color-info-1) !important;
}

.bg-info-2 {
  background: var(--bal-color-info-2) !important;
}

.bg-info-3 {
  background: var(--bal-color-info-3) !important;
}

.bg-info-4 {
  background: var(--bal-color-info-4) !important;
}

.bg-info-5 {
  background: var(--bal-color-info-5) !important;
}

.bg-info-6 {
  background: var(--bal-color-info-6) !important;
}

.bg-sky-1 {
  background: var(--bal-color-sky-1) !important;
}

.bg-sky-2 {
  background: var(--bal-color-sky-2) !important;
}

.bg-sky-3 {
  background: var(--bal-color-sky-3) !important;
}

.bg-sky-4 {
  background: var(--bal-color-sky-4) !important;
}

.bg-sky-5 {
  background: var(--bal-color-sky-5) !important;
}

.bg-sky-6 {
  background: var(--bal-color-sky-6) !important;
}

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

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

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

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

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

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

.bg-yellow-1 {
  background: var(--bal-color-yellow-1) !important;
}

.bg-yellow-2 {
  background: var(--bal-color-yellow-2) !important;
}

.bg-yellow-3 {
  background: var(--bal-color-yellow-3) !important;
}

.bg-yellow-4 {
  background: var(--bal-color-yellow-4) !important;
}

.bg-yellow-5 {
  background: var(--bal-color-yellow-5) !important;
}

.bg-yellow-6 {
  background: var(--bal-color-yellow-6) !important;
}

.bg-red-1 {
  background: var(--bal-color-red-1) !important;
}

.bg-red-2 {
  background: var(--bal-color-red-2) !important;
}

.bg-red-3 {
  background: var(--bal-color-red-3) !important;
}

.bg-red-4 {
  background: var(--bal-color-red-4) !important;
}

.bg-red-5 {
  background: var(--bal-color-red-5) !important;
}

.bg-red-6 {
  background: var(--bal-color-red-6) !important;
}

.bg-green-1 {
  background: var(--bal-color-green-1) !important;
}

.bg-green-2 {
  background: var(--bal-color-green-2) !important;
}

.bg-green-3 {
  background: var(--bal-color-green-3) !important;
}

.bg-green-4 {
  background: var(--bal-color-green-4) !important;
}

.bg-green-5 {
  background: var(--bal-color-green-5) !important;
}

.bg-green-6 {
  background: var(--bal-color-green-6) !important;
}

.bg-purple-1 {
  background: var(--bal-color-purple-1) !important;
}

.bg-purple-2 {
  background: var(--bal-color-purple-2) !important;
}

.bg-purple-3 {
  background: var(--bal-color-purple-3) !important;
}

.bg-purple-4 {
  background: var(--bal-color-purple-4) !important;
}

.bg-purple-5 {
  background: var(--bal-color-purple-5) !important;
}

.bg-purple-6 {
  background: var(--bal-color-purple-6) !important;
}

.bg-primary-1 {
  background: var(--bal-color-primary-1) !important;
}

.bg-primary-2 {
  background: var(--bal-color-primary-2) !important;
}

.bg-primary-3 {
  background: var(--bal-color-primary-3) !important;
}

.bg-primary-4 {
  background: var(--bal-color-primary-4) !important;
}

.bg-primary-5 {
  background: var(--bal-color-primary-5) !important;
}

.bg-primary-6 {
  background: var(--bal-color-primary-6) !important;
}

.focus\:bg-white:focus {
  background: var(--bal-background-color-white) !important;
}

.hover\:bg-white:hover {
  background: var(--bal-background-color-white) !important;
}

.active\:bg-white:active {
  background: var(--bal-background-color-white) !important;
}

.focus\:bg-transparent:focus {
  background: var(--bal-background-color-transparent) !important;
}

.hover\:bg-transparent:hover {
  background: var(--bal-background-color-transparent) !important;
}

.active\:bg-transparent:active {
  background: var(--bal-background-color-transparent) !important;
}

.focus\:bg-sky-light:focus {
  background: var(--bal-background-color-sky-light) !important;
}

.hover\:bg-sky-light:hover {
  background: var(--bal-background-color-sky-light) !important;
}

.active\:bg-sky-light:active {
  background: var(--bal-background-color-sky-light) !important;
}

.focus\:bg-sky:focus {
  background: var(--bal-background-color-sky) !important;
}

.hover\:bg-sky:hover {
  background: var(--bal-background-color-sky) !important;
}

.active\:bg-sky:active {
  background: var(--bal-background-color-sky) !important;
}

.focus\:bg-sky-dark:focus {
  background: var(--bal-background-color-sky-dark) !important;
}

.hover\:bg-sky-dark:hover {
  background: var(--bal-background-color-sky-dark) !important;
}

.active\:bg-sky-dark:active {
  background: var(--bal-background-color-sky-dark) !important;
}

.focus\:bg-disabled:focus {
  background: var(--bal-background-color-disabled) !important;
}

.hover\:bg-disabled:hover {
  background: var(--bal-background-color-disabled) !important;
}

.active\:bg-disabled:active {
  background: var(--bal-background-color-disabled) !important;
}

.focus\:bg-info:focus {
  background: var(--bal-background-color-info) !important;
}

.hover\:bg-info:hover {
  background: var(--bal-background-color-info) !important;
}

.active\:bg-info:active {
  background: var(--bal-background-color-info) !important;
}

.focus\:bg-info-light:focus {
  background: var(--bal-background-color-info-light) !important;
}

.hover\:bg-info-light:hover {
  background: var(--bal-background-color-info-light) !important;
}

.active\:bg-info-light:active {
  background: var(--bal-background-color-info-light) !important;
}

.focus\:bg-info-dark:focus {
  background: var(--bal-background-color-info-dark) !important;
}

.hover\:bg-info-dark:hover {
  background: var(--bal-background-color-info-dark) !important;
}

.active\:bg-info-dark:active {
  background: var(--bal-background-color-info-dark) !important;
}

.focus\:bg-info-darker:focus {
  background: var(--bal-background-color-info-darker) !important;
}

.hover\:bg-info-darker:hover {
  background: var(--bal-background-color-info-darker) !important;
}

.active\:bg-info-darker:active {
  background: var(--bal-background-color-info-darker) !important;
}

.focus\:bg-info-darkest:focus {
  background: var(--bal-background-color-info-darkest) !important;
}

.hover\:bg-info-darkest:hover {
  background: var(--bal-background-color-info-darkest) !important;
}

.active\:bg-info-darkest:active {
  background: var(--bal-background-color-info-darkest) !important;
}

.focus\:bg-success:focus {
  background: var(--bal-background-color-success) !important;
}

.hover\:bg-success:hover {
  background: var(--bal-background-color-success) !important;
}

.active\:bg-success:active {
  background: var(--bal-background-color-success) !important;
}

.focus\:bg-success-lighter:focus {
  background: var(--bal-background-color-success-lighter) !important;
}

.hover\:bg-success-lighter:hover {
  background: var(--bal-background-color-success-lighter) !important;
}

.active\:bg-success-lighter:active {
  background: var(--bal-background-color-success-lighter) !important;
}

.focus\:bg-success-light:focus {
  background: var(--bal-background-color-success-light) !important;
}

.hover\:bg-success-light:hover {
  background: var(--bal-background-color-success-light) !important;
}

.active\:bg-success-light:active {
  background: var(--bal-background-color-success-light) !important;
}

.focus\:bg-success-dark:focus {
  background: var(--bal-background-color-success-dark) !important;
}

.hover\:bg-success-dark:hover {
  background: var(--bal-background-color-success-dark) !important;
}

.active\:bg-success-dark:active {
  background: var(--bal-background-color-success-dark) !important;
}

.focus\:bg-success-darker:focus {
  background: var(--bal-background-color-success-darker) !important;
}

.hover\:bg-success-darker:hover {
  background: var(--bal-background-color-success-darker) !important;
}

.active\:bg-success-darker:active {
  background: var(--bal-background-color-success-darker) !important;
}

.focus\:bg-success-darkest:focus {
  background: var(--bal-background-color-success-darkest) !important;
}

.hover\:bg-success-darkest:hover {
  background: var(--bal-background-color-success-darkest) !important;
}

.active\:bg-success-darkest:active {
  background: var(--bal-background-color-success-darkest) !important;
}

.focus\:bg-warning-lighter:focus {
  background: var(--bal-background-color-warning-lighter) !important;
}

.hover\:bg-warning-lighter:hover {
  background: var(--bal-background-color-warning-lighter) !important;
}

.active\:bg-warning-lighter:active {
  background: var(--bal-background-color-warning-lighter) !important;
}

.focus\:bg-warning-light:focus {
  background: var(--bal-background-color-warning-light) !important;
}

.hover\:bg-warning-light:hover {
  background: var(--bal-background-color-warning-light) !important;
}

.active\:bg-warning-light:active {
  background: var(--bal-background-color-warning-light) !important;
}

.focus\:bg-warning:focus {
  background: var(--bal-background-color-warning) !important;
}

.hover\:bg-warning:hover {
  background: var(--bal-background-color-warning) !important;
}

.active\:bg-warning:active {
  background: var(--bal-background-color-warning) !important;
}

.focus\:bg-warning-dark:focus {
  background: var(--bal-background-color-warning-dark) !important;
}

.hover\:bg-warning-dark:hover {
  background: var(--bal-background-color-warning-dark) !important;
}

.active\:bg-warning-dark:active {
  background: var(--bal-background-color-warning-dark) !important;
}

.focus\:bg-warning-darker:focus {
  background: var(--bal-background-color-warning-darker) !important;
}

.hover\:bg-warning-darker:hover {
  background: var(--bal-background-color-warning-darker) !important;
}

.active\:bg-warning-darker:active {
  background: var(--bal-background-color-warning-darker) !important;
}

.focus\:bg-warning-darkest:focus {
  background: var(--bal-background-color-warning-darkest) !important;
}

.hover\:bg-warning-darkest:hover {
  background: var(--bal-background-color-warning-darkest) !important;
}

.active\:bg-warning-darkest:active {
  background: var(--bal-background-color-warning-darkest) !important;
}

.focus\:bg-danger-lighter:focus {
  background: var(--bal-background-color-danger-lighter) !important;
}

.hover\:bg-danger-lighter:hover {
  background: var(--bal-background-color-danger-lighter) !important;
}

.active\:bg-danger-lighter:active {
  background: var(--bal-background-color-danger-lighter) !important;
}

.focus\:bg-danger-light:focus {
  background: var(--bal-background-color-danger-light) !important;
}

.hover\:bg-danger-light:hover {
  background: var(--bal-background-color-danger-light) !important;
}

.active\:bg-danger-light:active {
  background: var(--bal-background-color-danger-light) !important;
}

.focus\:bg-danger:focus {
  background: var(--bal-background-color-danger) !important;
}

.hover\:bg-danger:hover {
  background: var(--bal-background-color-danger) !important;
}

.active\:bg-danger:active {
  background: var(--bal-background-color-danger) !important;
}

.focus\:bg-danger-dark:focus {
  background: var(--bal-background-color-danger-dark) !important;
}

.hover\:bg-danger-dark:hover {
  background: var(--bal-background-color-danger-dark) !important;
}

.active\:bg-danger-dark:active {
  background: var(--bal-background-color-danger-dark) !important;
}

.focus\:bg-danger-darker:focus {
  background: var(--bal-background-color-danger-darker) !important;
}

.hover\:bg-danger-darker:hover {
  background: var(--bal-background-color-danger-darker) !important;
}

.active\:bg-danger-darker:active {
  background: var(--bal-background-color-danger-darker) !important;
}

.focus\:bg-danger-darkest:focus {
  background: var(--bal-background-color-danger-darkest) !important;
}

.hover\:bg-danger-darkest:hover {
  background: var(--bal-background-color-danger-darkest) !important;
}

.active\:bg-danger-darkest:active {
  background: var(--bal-background-color-danger-darkest) !important;
}

.focus\:bg-green-light-2:focus {
  background: var(--bal-background-color-green-light-2) !important;
}

.hover\:bg-green-light-2:hover {
  background: var(--bal-background-color-green-light-2) !important;
}

.active\:bg-green-light-2:active {
  background: var(--bal-background-color-green-light-2) !important;
}

.focus\:bg-grey-light:focus {
  background: var(--bal-background-color-grey-light) !important;
}

.hover\:bg-grey-light:hover {
  background: var(--bal-background-color-grey-light) !important;
}

.active\:bg-grey-light:active {
  background: var(--bal-background-color-grey-light) !important;
}

.focus\:bg-grey:focus {
  background: var(--bal-background-color-grey) !important;
}

.hover\:bg-grey:hover {
  background: var(--bal-background-color-grey) !important;
}

.active\:bg-grey:active {
  background: var(--bal-background-color-grey) !important;
}

.focus\:bg-grey-dark:focus {
  background: var(--bal-background-color-grey-dark) !important;
}

.hover\:bg-grey-dark:hover {
  background: var(--bal-background-color-grey-dark) !important;
}

.active\:bg-grey-dark:active {
  background: var(--bal-background-color-grey-dark) !important;
}

.focus\:bg-primary-light:focus {
  background: var(--bal-background-color-primary-light) !important;
}

.hover\:bg-primary-light:hover {
  background: var(--bal-background-color-primary-light) !important;
}

.active\:bg-primary-light:active {
  background: var(--bal-background-color-primary-light) !important;
}

.focus\:bg-primary:focus {
  background: var(--bal-background-color-primary) !important;
}

.hover\:bg-primary:hover {
  background: var(--bal-background-color-primary) !important;
}

.active\:bg-primary:active {
  background: var(--bal-background-color-primary) !important;
}

.focus\:bg-primary-hover:focus {
  background: var(--bal-background-color-primary-hover) !important;
}

.hover\:bg-primary-hover:hover {
  background: var(--bal-background-color-primary-hover) !important;
}

.active\:bg-primary-hover:active {
  background: var(--bal-background-color-primary-hover) !important;
}

.focus\:bg-primary-active:focus {
  background: var(--bal-background-color-primary-active) !important;
}

.hover\:bg-primary-active:hover {
  background: var(--bal-background-color-primary-active) !important;
}

.active\:bg-primary-active:active {
  background: var(--bal-background-color-primary-active) !important;
}

.focus\:bg-green-lighter:focus {
  background: var(--bal-background-color-green-lighter) !important;
}

.hover\:bg-green-lighter:hover {
  background: var(--bal-background-color-green-lighter) !important;
}

.active\:bg-green-lighter:active {
  background: var(--bal-background-color-green-lighter) !important;
}

.focus\:bg-green-light:focus {
  background: var(--bal-background-color-green-light) !important;
}

.hover\:bg-green-light:hover {
  background: var(--bal-background-color-green-light) !important;
}

.active\:bg-green-light:active {
  background: var(--bal-background-color-green-light) !important;
}

.focus\:bg-green:focus {
  background: var(--bal-background-color-green) !important;
}

.hover\:bg-green:hover {
  background: var(--bal-background-color-green) !important;
}

.active\:bg-green:active {
  background: var(--bal-background-color-green) !important;
}

.focus\:bg-purple-lighter:focus {
  background: var(--bal-background-color-purple-lighter) !important;
}

.hover\:bg-purple-lighter:hover {
  background: var(--bal-background-color-purple-lighter) !important;
}

.active\:bg-purple-lighter:active {
  background: var(--bal-background-color-purple-lighter) !important;
}

.focus\:bg-purple-light:focus {
  background: var(--bal-background-color-purple-light) !important;
}

.hover\:bg-purple-light:hover {
  background: var(--bal-background-color-purple-light) !important;
}

.active\:bg-purple-light:active {
  background: var(--bal-background-color-purple-light) !important;
}

.focus\:bg-purple:focus {
  background: var(--bal-background-color-purple) !important;
}

.hover\:bg-purple:hover {
  background: var(--bal-background-color-purple) !important;
}

.active\:bg-purple:active {
  background: var(--bal-background-color-purple) !important;
}

.focus\:bg-red-lighter:focus {
  background: var(--bal-background-color-red-lighter) !important;
}

.hover\:bg-red-lighter:hover {
  background: var(--bal-background-color-red-lighter) !important;
}

.active\:bg-red-lighter:active {
  background: var(--bal-background-color-red-lighter) !important;
}

.focus\:bg-red-light:focus {
  background: var(--bal-background-color-red-light) !important;
}

.hover\:bg-red-light:hover {
  background: var(--bal-background-color-red-light) !important;
}

.active\:bg-red-light:active {
  background: var(--bal-background-color-red-light) !important;
}

.focus\:bg-red:focus {
  background: var(--bal-background-color-red) !important;
}

.hover\:bg-red:hover {
  background: var(--bal-background-color-red) !important;
}

.active\:bg-red:active {
  background: var(--bal-background-color-red) !important;
}

.focus\:bg-yellow-lighter:focus {
  background: var(--bal-background-color-yellow-lighter) !important;
}

.hover\:bg-yellow-lighter:hover {
  background: var(--bal-background-color-yellow-lighter) !important;
}

.active\:bg-yellow-lighter:active {
  background: var(--bal-background-color-yellow-lighter) !important;
}

.focus\:bg-yellow-light:focus {
  background: var(--bal-background-color-yellow-light) !important;
}

.hover\:bg-yellow-light:hover {
  background: var(--bal-background-color-yellow-light) !important;
}

.active\:bg-yellow-light:active {
  background: var(--bal-background-color-yellow-light) !important;
}

.focus\:bg-yellow:focus {
  background: var(--bal-background-color-yellow) !important;
}

.hover\:bg-yellow:hover {
  background: var(--bal-background-color-yellow) !important;
}

.active\:bg-yellow:active {
  background: var(--bal-background-color-yellow) !important;
}

.focus\:bg-black:focus {
  background: var(--bal-color-black) !important;
}

.hover\:bg-black:hover {
  background: var(--bal-color-black) !important;
}

.active\:bg-black:active {
  background: var(--bal-color-black) !important;
}

.focus\:bg-neutral:focus {
  background: var(--bal-color-neutral) !important;
}

.hover\:bg-neutral:hover {
  background: var(--bal-color-neutral) !important;
}

.active\:bg-neutral:active {
  background: var(--bal-color-neutral) !important;
}

.focus\:bg-danger-1:focus {
  background: var(--bal-color-danger-1) !important;
}

.hover\:bg-danger-1:hover {
  background: var(--bal-color-danger-1) !important;
}

.active\:bg-danger-1:active {
  background: var(--bal-color-danger-1) !important;
}

.focus\:bg-danger-2:focus {
  background: var(--bal-color-danger-2) !important;
}

.hover\:bg-danger-2:hover {
  background: var(--bal-color-danger-2) !important;
}

.active\:bg-danger-2:active {
  background: var(--bal-color-danger-2) !important;
}

.focus\:bg-danger-3:focus {
  background: var(--bal-color-danger-3) !important;
}

.hover\:bg-danger-3:hover {
  background: var(--bal-color-danger-3) !important;
}

.active\:bg-danger-3:active {
  background: var(--bal-color-danger-3) !important;
}

.focus\:bg-danger-4:focus {
  background: var(--bal-color-danger-4) !important;
}

.hover\:bg-danger-4:hover {
  background: var(--bal-color-danger-4) !important;
}

.active\:bg-danger-4:active {
  background: var(--bal-color-danger-4) !important;
}

.focus\:bg-danger-5:focus {
  background: var(--bal-color-danger-5) !important;
}

.hover\:bg-danger-5:hover {
  background: var(--bal-color-danger-5) !important;
}

.active\:bg-danger-5:active {
  background: var(--bal-color-danger-5) !important;
}

.focus\:bg-danger-6:focus {
  background: var(--bal-color-danger-6) !important;
}

.hover\:bg-danger-6:hover {
  background: var(--bal-color-danger-6) !important;
}

.active\:bg-danger-6:active {
  background: var(--bal-color-danger-6) !important;
}

.focus\:bg-warning-1:focus {
  background: var(--bal-color-warning-1) !important;
}

.hover\:bg-warning-1:hover {
  background: var(--bal-color-warning-1) !important;
}

.active\:bg-warning-1:active {
  background: var(--bal-color-warning-1) !important;
}

.focus\:bg-warning-2:focus {
  background: var(--bal-color-warning-2) !important;
}

.hover\:bg-warning-2:hover {
  background: var(--bal-color-warning-2) !important;
}

.active\:bg-warning-2:active {
  background: var(--bal-color-warning-2) !important;
}

.focus\:bg-warning-3:focus {
  background: var(--bal-color-warning-3) !important;
}

.hover\:bg-warning-3:hover {
  background: var(--bal-color-warning-3) !important;
}

.active\:bg-warning-3:active {
  background: var(--bal-color-warning-3) !important;
}

.focus\:bg-warning-4:focus {
  background: var(--bal-color-warning-4) !important;
}

.hover\:bg-warning-4:hover {
  background: var(--bal-color-warning-4) !important;
}

.active\:bg-warning-4:active {
  background: var(--bal-color-warning-4) !important;
}

.focus\:bg-warning-5:focus {
  background: var(--bal-color-warning-5) !important;
}

.hover\:bg-warning-5:hover {
  background: var(--bal-color-warning-5) !important;
}

.active\:bg-warning-5:active {
  background: var(--bal-color-warning-5) !important;
}

.focus\:bg-warning-6:focus {
  background: var(--bal-color-warning-6) !important;
}

.hover\:bg-warning-6:hover {
  background: var(--bal-color-warning-6) !important;
}

.active\:bg-warning-6:active {
  background: var(--bal-color-warning-6) !important;
}

.focus\:bg-success-1:focus {
  background: var(--bal-color-success-1) !important;
}

.hover\:bg-success-1:hover {
  background: var(--bal-color-success-1) !important;
}

.active\:bg-success-1:active {
  background: var(--bal-color-success-1) !important;
}

.focus\:bg-success-2:focus {
  background: var(--bal-color-success-2) !important;
}

.hover\:bg-success-2:hover {
  background: var(--bal-color-success-2) !important;
}

.active\:bg-success-2:active {
  background: var(--bal-color-success-2) !important;
}

.focus\:bg-success-3:focus {
  background: var(--bal-color-success-3) !important;
}

.hover\:bg-success-3:hover {
  background: var(--bal-color-success-3) !important;
}

.active\:bg-success-3:active {
  background: var(--bal-color-success-3) !important;
}

.focus\:bg-success-4:focus {
  background: var(--bal-color-success-4) !important;
}

.hover\:bg-success-4:hover {
  background: var(--bal-color-success-4) !important;
}

.active\:bg-success-4:active {
  background: var(--bal-color-success-4) !important;
}

.focus\:bg-success-5:focus {
  background: var(--bal-color-success-5) !important;
}

.hover\:bg-success-5:hover {
  background: var(--bal-color-success-5) !important;
}

.active\:bg-success-5:active {
  background: var(--bal-color-success-5) !important;
}

.focus\:bg-success-6:focus {
  background: var(--bal-color-success-6) !important;
}

.hover\:bg-success-6:hover {
  background: var(--bal-color-success-6) !important;
}

.active\:bg-success-6:active {
  background: var(--bal-color-success-6) !important;
}

.focus\:bg-info-1:focus {
  background: var(--bal-color-info-1) !important;
}

.hover\:bg-info-1:hover {
  background: var(--bal-color-info-1) !important;
}

.active\:bg-info-1:active {
  background: var(--bal-color-info-1) !important;
}

.focus\:bg-info-2:focus {
  background: var(--bal-color-info-2) !important;
}

.hover\:bg-info-2:hover {
  background: var(--bal-color-info-2) !important;
}

.active\:bg-info-2:active {
  background: var(--bal-color-info-2) !important;
}

.focus\:bg-info-3:focus {
  background: var(--bal-color-info-3) !important;
}

.hover\:bg-info-3:hover {
  background: var(--bal-color-info-3) !important;
}

.active\:bg-info-3:active {
  background: var(--bal-color-info-3) !important;
}

.focus\:bg-info-4:focus {
  background: var(--bal-color-info-4) !important;
}

.hover\:bg-info-4:hover {
  background: var(--bal-color-info-4) !important;
}

.active\:bg-info-4:active {
  background: var(--bal-color-info-4) !important;
}

.focus\:bg-info-5:focus {
  background: var(--bal-color-info-5) !important;
}

.hover\:bg-info-5:hover {
  background: var(--bal-color-info-5) !important;
}

.active\:bg-info-5:active {
  background: var(--bal-color-info-5) !important;
}

.focus\:bg-info-6:focus {
  background: var(--bal-color-info-6) !important;
}

.hover\:bg-info-6:hover {
  background: var(--bal-color-info-6) !important;
}

.active\:bg-info-6:active {
  background: var(--bal-color-info-6) !important;
}

.focus\:bg-sky-1:focus {
  background: var(--bal-color-sky-1) !important;
}

.hover\:bg-sky-1:hover {
  background: var(--bal-color-sky-1) !important;
}

.active\:bg-sky-1:active {
  background: var(--bal-color-sky-1) !important;
}

.focus\:bg-sky-2:focus {
  background: var(--bal-color-sky-2) !important;
}

.hover\:bg-sky-2:hover {
  background: var(--bal-color-sky-2) !important;
}

.active\:bg-sky-2:active {
  background: var(--bal-color-sky-2) !important;
}

.focus\:bg-sky-3:focus {
  background: var(--bal-color-sky-3) !important;
}

.hover\:bg-sky-3:hover {
  background: var(--bal-color-sky-3) !important;
}

.active\:bg-sky-3:active {
  background: var(--bal-color-sky-3) !important;
}

.focus\:bg-sky-4:focus {
  background: var(--bal-color-sky-4) !important;
}

.hover\:bg-sky-4:hover {
  background: var(--bal-color-sky-4) !important;
}

.active\:bg-sky-4:active {
  background: var(--bal-color-sky-4) !important;
}

.focus\:bg-sky-5:focus {
  background: var(--bal-color-sky-5) !important;
}

.hover\:bg-sky-5:hover {
  background: var(--bal-color-sky-5) !important;
}

.active\:bg-sky-5:active {
  background: var(--bal-color-sky-5) !important;
}

.focus\:bg-sky-6:focus {
  background: var(--bal-color-sky-6) !important;
}

.hover\:bg-sky-6:hover {
  background: var(--bal-color-sky-6) !important;
}

.active\:bg-sky-6:active {
  background: var(--bal-color-sky-6) !important;
}

.focus\:bg-grey-1:focus {
  background: var(--bal-color-grey-1) !important;
}

.hover\:bg-grey-1:hover {
  background: var(--bal-color-grey-1) !important;
}

.active\:bg-grey-1:active {
  background: var(--bal-color-grey-1) !important;
}

.focus\:bg-grey-2:focus {
  background: var(--bal-color-grey-2) !important;
}

.hover\:bg-grey-2:hover {
  background: var(--bal-color-grey-2) !important;
}

.active\:bg-grey-2:active {
  background: var(--bal-color-grey-2) !important;
}

.focus\:bg-grey-3:focus {
  background: var(--bal-color-grey-3) !important;
}

.hover\:bg-grey-3:hover {
  background: var(--bal-color-grey-3) !important;
}

.active\:bg-grey-3:active {
  background: var(--bal-color-grey-3) !important;
}

.focus\:bg-grey-4:focus {
  background: var(--bal-color-grey-4) !important;
}

.hover\:bg-grey-4:hover {
  background: var(--bal-color-grey-4) !important;
}

.active\:bg-grey-4:active {
  background: var(--bal-color-grey-4) !important;
}

.focus\:bg-grey-5:focus {
  background: var(--bal-color-grey-5) !important;
}

.hover\:bg-grey-5:hover {
  background: var(--bal-color-grey-5) !important;
}

.active\:bg-grey-5:active {
  background: var(--bal-color-grey-5) !important;
}

.focus\:bg-grey-6:focus {
  background: var(--bal-color-grey-6) !important;
}

.hover\:bg-grey-6:hover {
  background: var(--bal-color-grey-6) !important;
}

.active\:bg-grey-6:active {
  background: var(--bal-color-grey-6) !important;
}

.focus\:bg-yellow-1:focus {
  background: var(--bal-color-yellow-1) !important;
}

.hover\:bg-yellow-1:hover {
  background: var(--bal-color-yellow-1) !important;
}

.active\:bg-yellow-1:active {
  background: var(--bal-color-yellow-1) !important;
}

.focus\:bg-yellow-2:focus {
  background: var(--bal-color-yellow-2) !important;
}

.hover\:bg-yellow-2:hover {
  background: var(--bal-color-yellow-2) !important;
}

.active\:bg-yellow-2:active {
  background: var(--bal-color-yellow-2) !important;
}

.focus\:bg-yellow-3:focus {
  background: var(--bal-color-yellow-3) !important;
}

.hover\:bg-yellow-3:hover {
  background: var(--bal-color-yellow-3) !important;
}

.active\:bg-yellow-3:active {
  background: var(--bal-color-yellow-3) !important;
}

.focus\:bg-yellow-4:focus {
  background: var(--bal-color-yellow-4) !important;
}

.hover\:bg-yellow-4:hover {
  background: var(--bal-color-yellow-4) !important;
}

.active\:bg-yellow-4:active {
  background: var(--bal-color-yellow-4) !important;
}

.focus\:bg-yellow-5:focus {
  background: var(--bal-color-yellow-5) !important;
}

.hover\:bg-yellow-5:hover {
  background: var(--bal-color-yellow-5) !important;
}

.active\:bg-yellow-5:active {
  background: var(--bal-color-yellow-5) !important;
}

.focus\:bg-yellow-6:focus {
  background: var(--bal-color-yellow-6) !important;
}

.hover\:bg-yellow-6:hover {
  background: var(--bal-color-yellow-6) !important;
}

.active\:bg-yellow-6:active {
  background: var(--bal-color-yellow-6) !important;
}

.focus\:bg-red-1:focus {
  background: var(--bal-color-red-1) !important;
}

.hover\:bg-red-1:hover {
  background: var(--bal-color-red-1) !important;
}

.active\:bg-red-1:active {
  background: var(--bal-color-red-1) !important;
}

.focus\:bg-red-2:focus {
  background: var(--bal-color-red-2) !important;
}

.hover\:bg-red-2:hover {
  background: var(--bal-color-red-2) !important;
}

.active\:bg-red-2:active {
  background: var(--bal-color-red-2) !important;
}

.focus\:bg-red-3:focus {
  background: var(--bal-color-red-3) !important;
}

.hover\:bg-red-3:hover {
  background: var(--bal-color-red-3) !important;
}

.active\:bg-red-3:active {
  background: var(--bal-color-red-3) !important;
}

.focus\:bg-red-4:focus {
  background: var(--bal-color-red-4) !important;
}

.hover\:bg-red-4:hover {
  background: var(--bal-color-red-4) !important;
}

.active\:bg-red-4:active {
  background: var(--bal-color-red-4) !important;
}

.focus\:bg-red-5:focus {
  background: var(--bal-color-red-5) !important;
}

.hover\:bg-red-5:hover {
  background: var(--bal-color-red-5) !important;
}

.active\:bg-red-5:active {
  background: var(--bal-color-red-5) !important;
}

.focus\:bg-red-6:focus {
  background: var(--bal-color-red-6) !important;
}

.hover\:bg-red-6:hover {
  background: var(--bal-color-red-6) !important;
}

.active\:bg-red-6:active {
  background: var(--bal-color-red-6) !important;
}

.focus\:bg-green-1:focus {
  background: var(--bal-color-green-1) !important;
}

.hover\:bg-green-1:hover {
  background: var(--bal-color-green-1) !important;
}

.active\:bg-green-1:active {
  background: var(--bal-color-green-1) !important;
}

.focus\:bg-green-2:focus {
  background: var(--bal-color-green-2) !important;
}

.hover\:bg-green-2:hover {
  background: var(--bal-color-green-2) !important;
}

.active\:bg-green-2:active {
  background: var(--bal-color-green-2) !important;
}

.focus\:bg-green-3:focus {
  background: var(--bal-color-green-3) !important;
}

.hover\:bg-green-3:hover {
  background: var(--bal-color-green-3) !important;
}

.active\:bg-green-3:active {
  background: var(--bal-color-green-3) !important;
}

.focus\:bg-green-4:focus {
  background: var(--bal-color-green-4) !important;
}

.hover\:bg-green-4:hover {
  background: var(--bal-color-green-4) !important;
}

.active\:bg-green-4:active {
  background: var(--bal-color-green-4) !important;
}

.focus\:bg-green-5:focus {
  background: var(--bal-color-green-5) !important;
}

.hover\:bg-green-5:hover {
  background: var(--bal-color-green-5) !important;
}

.active\:bg-green-5:active {
  background: var(--bal-color-green-5) !important;
}

.focus\:bg-green-6:focus {
  background: var(--bal-color-green-6) !important;
}

.hover\:bg-green-6:hover {
  background: var(--bal-color-green-6) !important;
}

.active\:bg-green-6:active {
  background: var(--bal-color-green-6) !important;
}

.focus\:bg-purple-1:focus {
  background: var(--bal-color-purple-1) !important;
}

.hover\:bg-purple-1:hover {
  background: var(--bal-color-purple-1) !important;
}

.active\:bg-purple-1:active {
  background: var(--bal-color-purple-1) !important;
}

.focus\:bg-purple-2:focus {
  background: var(--bal-color-purple-2) !important;
}

.hover\:bg-purple-2:hover {
  background: var(--bal-color-purple-2) !important;
}

.active\:bg-purple-2:active {
  background: var(--bal-color-purple-2) !important;
}

.focus\:bg-purple-3:focus {
  background: var(--bal-color-purple-3) !important;
}

.hover\:bg-purple-3:hover {
  background: var(--bal-color-purple-3) !important;
}

.active\:bg-purple-3:active {
  background: var(--bal-color-purple-3) !important;
}

.focus\:bg-purple-4:focus {
  background: var(--bal-color-purple-4) !important;
}

.hover\:bg-purple-4:hover {
  background: var(--bal-color-purple-4) !important;
}

.active\:bg-purple-4:active {
  background: var(--bal-color-purple-4) !important;
}

.focus\:bg-purple-5:focus {
  background: var(--bal-color-purple-5) !important;
}

.hover\:bg-purple-5:hover {
  background: var(--bal-color-purple-5) !important;
}

.active\:bg-purple-5:active {
  background: var(--bal-color-purple-5) !important;
}

.focus\:bg-purple-6:focus {
  background: var(--bal-color-purple-6) !important;
}

.hover\:bg-purple-6:hover {
  background: var(--bal-color-purple-6) !important;
}

.active\:bg-purple-6:active {
  background: var(--bal-color-purple-6) !important;
}

.focus\:bg-primary-1:focus {
  background: var(--bal-color-primary-1) !important;
}

.hover\:bg-primary-1:hover {
  background: var(--bal-color-primary-1) !important;
}

.active\:bg-primary-1:active {
  background: var(--bal-color-primary-1) !important;
}

.focus\:bg-primary-2:focus {
  background: var(--bal-color-primary-2) !important;
}

.hover\:bg-primary-2:hover {
  background: var(--bal-color-primary-2) !important;
}

.active\:bg-primary-2:active {
  background: var(--bal-color-primary-2) !important;
}

.focus\:bg-primary-3:focus {
  background: var(--bal-color-primary-3) !important;
}

.hover\:bg-primary-3:hover {
  background: var(--bal-color-primary-3) !important;
}

.active\:bg-primary-3:active {
  background: var(--bal-color-primary-3) !important;
}

.focus\:bg-primary-4:focus {
  background: var(--bal-color-primary-4) !important;
}

.hover\:bg-primary-4:hover {
  background: var(--bal-color-primary-4) !important;
}

.active\:bg-primary-4:active {
  background: var(--bal-color-primary-4) !important;
}

.focus\:bg-primary-5:focus {
  background: var(--bal-color-primary-5) !important;
}

.hover\:bg-primary-5:hover {
  background: var(--bal-color-primary-5) !important;
}

.active\:bg-primary-5:active {
  background: var(--bal-color-primary-5) !important;
}

.focus\:bg-primary-6:focus {
  background: var(--bal-color-primary-6) !important;
}

.hover\:bg-primary-6:hover {
  background: var(--bal-color-primary-6) !important;
}

.active\:bg-primary-6:active {
  background: var(--bal-color-primary-6) !important;
}

/**
  * Deprecated
  */
.bg-primary {
  color: var(--bal-color-white);
}

.bg-primary-3 {
  color: var(--bal-color-white);
}

.bg-primary-4 {
  color: var(--bal-color-white);
}

.bg-primary-5 {
  color: var(--bal-color-white);
}

.bg-primary-6 {
  color: var(--bal-color-white);
}

.focus\:bg-primary:focus {
  color: var(--bal-color-white);
}

.hover\:bg-primary:hover {
  color: var(--bal-color-white);
}

.active\:bg-primary:active {
  color: var(--bal-color-white);
}

.focus\:bg-primary-3:focus {
  color: var(--bal-color-white);
}

.hover\:bg-primary-3:hover {
  color: var(--bal-color-white);
}

.active\:bg-primary-3:active {
  color: var(--bal-color-white);
}

.focus\:bg-primary-4:focus {
  color: var(--bal-color-white);
}

.hover\:bg-primary-4:hover {
  color: var(--bal-color-white);
}

.active\:bg-primary-4:active {
  color: var(--bal-color-white);
}

.focus\:bg-primary-5:focus {
  color: var(--bal-color-white);
}

.hover\:bg-primary-5:hover {
  color: var(--bal-color-white);
}

.active\:bg-primary-5:active {
  color: var(--bal-color-white);
}

.focus\:bg-primary-6:focus {
  color: var(--bal-color-white);
}

.hover\:bg-primary-6:hover {
  color: var(--bal-color-white);
}

.active\:bg-primary-6:active {
  color: var(--bal-color-white);
}

.radius-none {
  border-radius: var(--bal-radius-none) !important;
}

.radius {
  border-radius: var(--bal-radius-base) !important;
}

.radius-lg {
  border-radius: var(--bal-radius-lg) !important;
}

.radius-rounded {
  border-radius: var(--bal-radius-rounded) !important;
}

.radius-top-none {
  border-top-left-radius: var(--bal-radius-none) !important;
  border-top-right-radius: var(--bal-radius-none) !important;
}

.radius-top {
  border-top-left-radius: var(--bal-radius-base) !important;
  border-top-right-radius: var(--bal-radius-base) !important;
}

.radius-top-lg {
  border-top-left-radius: var(--bal-radius-lg) !important;
  border-top-right-radius: var(--bal-radius-lg) !important;
}

.radius-top-rounded {
  border-top-left-radius: var(--bal-radius-rounded) !important;
  border-top-right-radius: var(--bal-radius-rounded) !important;
}

.radius-top-left-none {
  border-top-left-radius: var(--bal-radius-none) !important;
}

.radius-top-left {
  border-top-left-radius: var(--bal-radius-base) !important;
}

.radius-top-left-lg {
  border-top-left-radius: var(--bal-radius-lg) !important;
}

.radius-top-left-rounded {
  border-top-left-radius: var(--bal-radius-rounded) !important;
}

.radius-top-right-none {
  border-top-right-radius: var(--bal-radius-none) !important;
}

.radius-top-right {
  border-top-right-radius: var(--bal-radius-base) !important;
}

.radius-top-right-lg {
  border-top-right-radius: var(--bal-radius-lg) !important;
}

.radius-top-right-rounded {
  border-top-right-radius: var(--bal-radius-rounded) !important;
}

.radius-bottom-none {
  border-bottom-left-radius: var(--bal-radius-none) !important;
  border-bottom-right-radius: var(--bal-radius-none) !important;
}

.radius-bottom {
  border-bottom-left-radius: var(--bal-radius-base) !important;
  border-bottom-right-radius: var(--bal-radius-base) !important;
}

.radius-bottom-lg {
  border-bottom-left-radius: var(--bal-radius-lg) !important;
  border-bottom-right-radius: var(--bal-radius-lg) !important;
}

.radius-bottom-rounded {
  border-bottom-left-radius: var(--bal-radius-rounded) !important;
  border-bottom-right-radius: var(--bal-radius-rounded) !important;
}

.radius-bottom-left-none {
  border-bottom-left-radius: var(--bal-radius-none) !important;
}

.radius-bottom-left {
  border-bottom-left-radius: var(--bal-radius-base) !important;
}

.radius-bottom-left-lg {
  border-bottom-left-radius: var(--bal-radius-lg) !important;
}

.radius-bottom-left-rounded {
  border-bottom-left-radius: var(--bal-radius-rounded) !important;
}

.radius-bottom-right-none {
  border-bottom-right-radius: var(--bal-radius-none) !important;
}

.radius-bottom-right {
  border-bottom-right-radius: var(--bal-radius-base) !important;
}

.radius-bottom-right-lg {
  border-bottom-right-radius: var(--bal-radius-lg) !important;
}

.radius-bottom-right-rounded {
  border-bottom-right-radius: var(--bal-radius-rounded) !important;
}

.border-white {
  border-color: var(--bal-border-color-white) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border {
  border-color: var(--bal-border-color-base) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-inverted {
  border-color: var(--bal-border-color-inverted) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-disabled {
  border-color: var(--bal-border-color-disabled) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-disabled-inverted {
  border-color: var(--bal-border-color-disabled-inverted) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-grey-light {
  border-color: var(--bal-border-color-grey-light) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-grey {
  border-color: var(--bal-border-color-grey) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-grey-dark {
  border-color: var(--bal-border-color-grey-dark) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-primary-light {
  border-color: var(--bal-border-color-primary-light) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-primary {
  border-color: var(--bal-border-color-primary) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-primary-hover {
  border-color: var(--bal-border-color-primary-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-primary-active {
  border-color: var(--bal-border-color-primary-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-inverted-primary {
  border-color: var(--bal-border-color-inverted-primary) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-inverted-primary-hover {
  border-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-inverted-primary-active {
  border-color: var(--bal-border-color-inverted-primary-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-info {
  border-color: var(--bal-border-color-info) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-info-hover {
  border-color: var(--bal-border-color-info-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-info-active {
  border-color: var(--bal-border-color-info-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-success {
  border-color: var(--bal-border-color-success) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-success-hover {
  border-color: var(--bal-border-color-success-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-success-active {
  border-color: var(--bal-border-color-success-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-warning {
  border-color: var(--bal-border-color-warning) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-warning-hover {
  border-color: var(--bal-border-color-warning-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-warning-active {
  border-color: var(--bal-border-color-warning-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-danger {
  border-color: var(--bal-border-color-danger) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-danger-hover {
  border-color: var(--bal-border-color-danger-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-danger-active {
  border-color: var(--bal-border-color-danger-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-green {
  border-color: var(--bal-border-color-green) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-green-hover {
  border-color: var(--bal-border-color-green-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-green-active {
  border-color: var(--bal-border-color-green-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-purple {
  border-color: var(--bal-border-color-purple) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-purple-hover {
  border-color: var(--bal-border-color-purple-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-purple-active {
  border-color: var(--bal-border-color-purple-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-red {
  border-color: var(--bal-border-color-red) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-red-hover {
  border-color: var(--bal-border-color-red-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-red-active {
  border-color: var(--bal-border-color-red-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-yellow {
  border-color: var(--bal-border-color-yellow) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-yellow-hover {
  border-color: var(--bal-border-color-yellow-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-yellow-active {
  border-color: var(--bal-border-color-yellow-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-white:focus {
  border-color: var(--bal-border-color-white) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-white:hover {
  border-color: var(--bal-border-color-white) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-white:active {
  border-color: var(--bal-border-color-white) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border:focus {
  border-color: var(--bal-border-color-base) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border:hover {
  border-color: var(--bal-border-color-base) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border:active {
  border-color: var(--bal-border-color-base) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-inverted:focus {
  border-color: var(--bal-border-color-inverted) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-inverted:hover {
  border-color: var(--bal-border-color-inverted) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-inverted:active {
  border-color: var(--bal-border-color-inverted) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-disabled:focus {
  border-color: var(--bal-border-color-disabled) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-disabled:hover {
  border-color: var(--bal-border-color-disabled) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-disabled:active {
  border-color: var(--bal-border-color-disabled) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-disabled-inverted:focus {
  border-color: var(--bal-border-color-disabled-inverted) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-disabled-inverted:hover {
  border-color: var(--bal-border-color-disabled-inverted) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-disabled-inverted:active {
  border-color: var(--bal-border-color-disabled-inverted) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-grey-light:focus {
  border-color: var(--bal-border-color-grey-light) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-grey-light:hover {
  border-color: var(--bal-border-color-grey-light) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-grey-light:active {
  border-color: var(--bal-border-color-grey-light) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-grey:focus {
  border-color: var(--bal-border-color-grey) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-grey:hover {
  border-color: var(--bal-border-color-grey) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-grey:active {
  border-color: var(--bal-border-color-grey) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-grey-dark:focus {
  border-color: var(--bal-border-color-grey-dark) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-grey-dark:hover {
  border-color: var(--bal-border-color-grey-dark) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-grey-dark:active {
  border-color: var(--bal-border-color-grey-dark) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-primary-light:focus {
  border-color: var(--bal-border-color-primary-light) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-primary-light:hover {
  border-color: var(--bal-border-color-primary-light) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-primary-light:active {
  border-color: var(--bal-border-color-primary-light) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-primary:focus {
  border-color: var(--bal-border-color-primary) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-primary:hover {
  border-color: var(--bal-border-color-primary) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-primary:active {
  border-color: var(--bal-border-color-primary) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-primary-hover:focus {
  border-color: var(--bal-border-color-primary-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-primary-hover:hover {
  border-color: var(--bal-border-color-primary-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-primary-hover:active {
  border-color: var(--bal-border-color-primary-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-primary-active:focus {
  border-color: var(--bal-border-color-primary-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-primary-active:hover {
  border-color: var(--bal-border-color-primary-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-primary-active:active {
  border-color: var(--bal-border-color-primary-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-inverted-primary:focus {
  border-color: var(--bal-border-color-inverted-primary) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-inverted-primary:hover {
  border-color: var(--bal-border-color-inverted-primary) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-inverted-primary:active {
  border-color: var(--bal-border-color-inverted-primary) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-inverted-primary-hover:focus {
  border-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-inverted-primary-hover:hover {
  border-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-inverted-primary-hover:active {
  border-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-inverted-primary-active:focus {
  border-color: var(--bal-border-color-inverted-primary-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-inverted-primary-active:hover {
  border-color: var(--bal-border-color-inverted-primary-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-inverted-primary-active:active {
  border-color: var(--bal-border-color-inverted-primary-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-info:focus {
  border-color: var(--bal-border-color-info) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-info:hover {
  border-color: var(--bal-border-color-info) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-info:active {
  border-color: var(--bal-border-color-info) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-info-hover:focus {
  border-color: var(--bal-border-color-info-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-info-hover:hover {
  border-color: var(--bal-border-color-info-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-info-hover:active {
  border-color: var(--bal-border-color-info-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-info-active:focus {
  border-color: var(--bal-border-color-info-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-info-active:hover {
  border-color: var(--bal-border-color-info-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-info-active:active {
  border-color: var(--bal-border-color-info-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-success:focus {
  border-color: var(--bal-border-color-success) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-success:hover {
  border-color: var(--bal-border-color-success) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-success:active {
  border-color: var(--bal-border-color-success) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-success-hover:focus {
  border-color: var(--bal-border-color-success-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-success-hover:hover {
  border-color: var(--bal-border-color-success-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-success-hover:active {
  border-color: var(--bal-border-color-success-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-success-active:focus {
  border-color: var(--bal-border-color-success-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-success-active:hover {
  border-color: var(--bal-border-color-success-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-success-active:active {
  border-color: var(--bal-border-color-success-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-warning:focus {
  border-color: var(--bal-border-color-warning) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-warning:hover {
  border-color: var(--bal-border-color-warning) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-warning:active {
  border-color: var(--bal-border-color-warning) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-warning-hover:focus {
  border-color: var(--bal-border-color-warning-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-warning-hover:hover {
  border-color: var(--bal-border-color-warning-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-warning-hover:active {
  border-color: var(--bal-border-color-warning-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-warning-active:focus {
  border-color: var(--bal-border-color-warning-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-warning-active:hover {
  border-color: var(--bal-border-color-warning-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-warning-active:active {
  border-color: var(--bal-border-color-warning-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-danger:focus {
  border-color: var(--bal-border-color-danger) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-danger:hover {
  border-color: var(--bal-border-color-danger) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-danger:active {
  border-color: var(--bal-border-color-danger) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-danger-hover:focus {
  border-color: var(--bal-border-color-danger-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-danger-hover:hover {
  border-color: var(--bal-border-color-danger-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-danger-hover:active {
  border-color: var(--bal-border-color-danger-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-danger-active:focus {
  border-color: var(--bal-border-color-danger-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-danger-active:hover {
  border-color: var(--bal-border-color-danger-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-danger-active:active {
  border-color: var(--bal-border-color-danger-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-green:focus {
  border-color: var(--bal-border-color-green) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-green:hover {
  border-color: var(--bal-border-color-green) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-green:active {
  border-color: var(--bal-border-color-green) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-green-hover:focus {
  border-color: var(--bal-border-color-green-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-green-hover:hover {
  border-color: var(--bal-border-color-green-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-green-hover:active {
  border-color: var(--bal-border-color-green-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-green-active:focus {
  border-color: var(--bal-border-color-green-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-green-active:hover {
  border-color: var(--bal-border-color-green-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-green-active:active {
  border-color: var(--bal-border-color-green-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-purple:focus {
  border-color: var(--bal-border-color-purple) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-purple:hover {
  border-color: var(--bal-border-color-purple) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-purple:active {
  border-color: var(--bal-border-color-purple) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-purple-hover:focus {
  border-color: var(--bal-border-color-purple-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-purple-hover:hover {
  border-color: var(--bal-border-color-purple-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-purple-hover:active {
  border-color: var(--bal-border-color-purple-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-purple-active:focus {
  border-color: var(--bal-border-color-purple-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-purple-active:hover {
  border-color: var(--bal-border-color-purple-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-purple-active:active {
  border-color: var(--bal-border-color-purple-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-red:focus {
  border-color: var(--bal-border-color-red) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-red:hover {
  border-color: var(--bal-border-color-red) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-red:active {
  border-color: var(--bal-border-color-red) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-red-hover:focus {
  border-color: var(--bal-border-color-red-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-red-hover:hover {
  border-color: var(--bal-border-color-red-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-red-hover:active {
  border-color: var(--bal-border-color-red-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-red-active:focus {
  border-color: var(--bal-border-color-red-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-red-active:hover {
  border-color: var(--bal-border-color-red-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-red-active:active {
  border-color: var(--bal-border-color-red-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-yellow:focus {
  border-color: var(--bal-border-color-yellow) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-yellow:hover {
  border-color: var(--bal-border-color-yellow) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-yellow:active {
  border-color: var(--bal-border-color-yellow) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-yellow-hover:focus {
  border-color: var(--bal-border-color-yellow-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-yellow-hover:hover {
  border-color: var(--bal-border-color-yellow-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-yellow-hover:active {
  border-color: var(--bal-border-color-yellow-hover) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.focus\:border-yellow-active:focus {
  border-color: var(--bal-border-color-yellow-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.hover\:border-yellow-active:hover {
  border-color: var(--bal-border-color-yellow-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.active\:border-yellow-active:active {
  border-color: var(--bal-border-color-yellow-active) !important;
  border-width: var(--bal-border-width-normal) !important;
  border-style: solid;
}

.border-top-white {
  border-top-color: var(--bal-border-color-white) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top {
  border-top-color: var(--bal-border-color-base) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-inverted {
  border-top-color: var(--bal-border-color-inverted) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-disabled {
  border-top-color: var(--bal-border-color-disabled) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-disabled-inverted {
  border-top-color: var(--bal-border-color-disabled-inverted) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-grey-light {
  border-top-color: var(--bal-border-color-grey-light) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-grey {
  border-top-color: var(--bal-border-color-grey) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-grey-dark {
  border-top-color: var(--bal-border-color-grey-dark) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-primary-light {
  border-top-color: var(--bal-border-color-primary-light) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-primary {
  border-top-color: var(--bal-border-color-primary) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-primary-hover {
  border-top-color: var(--bal-border-color-primary-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-primary-active {
  border-top-color: var(--bal-border-color-primary-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-inverted-primary {
  border-top-color: var(--bal-border-color-inverted-primary) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-inverted-primary-hover {
  border-top-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-inverted-primary-active {
  border-top-color: var(--bal-border-color-inverted-primary-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-info {
  border-top-color: var(--bal-border-color-info) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-info-hover {
  border-top-color: var(--bal-border-color-info-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-info-active {
  border-top-color: var(--bal-border-color-info-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-success {
  border-top-color: var(--bal-border-color-success) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-success-hover {
  border-top-color: var(--bal-border-color-success-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-success-active {
  border-top-color: var(--bal-border-color-success-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-warning {
  border-top-color: var(--bal-border-color-warning) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-warning-hover {
  border-top-color: var(--bal-border-color-warning-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-warning-active {
  border-top-color: var(--bal-border-color-warning-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-danger {
  border-top-color: var(--bal-border-color-danger) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-danger-hover {
  border-top-color: var(--bal-border-color-danger-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-danger-active {
  border-top-color: var(--bal-border-color-danger-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-green {
  border-top-color: var(--bal-border-color-green) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-green-hover {
  border-top-color: var(--bal-border-color-green-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-green-active {
  border-top-color: var(--bal-border-color-green-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-purple {
  border-top-color: var(--bal-border-color-purple) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-purple-hover {
  border-top-color: var(--bal-border-color-purple-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-purple-active {
  border-top-color: var(--bal-border-color-purple-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-red {
  border-top-color: var(--bal-border-color-red) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-red-hover {
  border-top-color: var(--bal-border-color-red-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-red-active {
  border-top-color: var(--bal-border-color-red-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-yellow {
  border-top-color: var(--bal-border-color-yellow) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-yellow-hover {
  border-top-color: var(--bal-border-color-yellow-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-top-yellow-active {
  border-top-color: var(--bal-border-color-yellow-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-white:focus {
  border-top-color: var(--bal-border-color-white) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-white:hover {
  border-top-color: var(--bal-border-color-white) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-white:active {
  border-top-color: var(--bal-border-color-white) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top:focus {
  border-top-color: var(--bal-border-color-base) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top:hover {
  border-top-color: var(--bal-border-color-base) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top:active {
  border-top-color: var(--bal-border-color-base) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-inverted:focus {
  border-top-color: var(--bal-border-color-inverted) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-inverted:hover {
  border-top-color: var(--bal-border-color-inverted) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-inverted:active {
  border-top-color: var(--bal-border-color-inverted) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-disabled:focus {
  border-top-color: var(--bal-border-color-disabled) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-disabled:hover {
  border-top-color: var(--bal-border-color-disabled) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-disabled:active {
  border-top-color: var(--bal-border-color-disabled) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-disabled-inverted:focus {
  border-top-color: var(--bal-border-color-disabled-inverted) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-disabled-inverted:hover {
  border-top-color: var(--bal-border-color-disabled-inverted) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-disabled-inverted:active {
  border-top-color: var(--bal-border-color-disabled-inverted) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-grey-light:focus {
  border-top-color: var(--bal-border-color-grey-light) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-grey-light:hover {
  border-top-color: var(--bal-border-color-grey-light) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-grey-light:active {
  border-top-color: var(--bal-border-color-grey-light) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-grey:focus {
  border-top-color: var(--bal-border-color-grey) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-grey:hover {
  border-top-color: var(--bal-border-color-grey) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-grey:active {
  border-top-color: var(--bal-border-color-grey) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-grey-dark:focus {
  border-top-color: var(--bal-border-color-grey-dark) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-grey-dark:hover {
  border-top-color: var(--bal-border-color-grey-dark) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-grey-dark:active {
  border-top-color: var(--bal-border-color-grey-dark) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-primary-light:focus {
  border-top-color: var(--bal-border-color-primary-light) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-primary-light:hover {
  border-top-color: var(--bal-border-color-primary-light) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-primary-light:active {
  border-top-color: var(--bal-border-color-primary-light) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-primary:focus {
  border-top-color: var(--bal-border-color-primary) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-primary:hover {
  border-top-color: var(--bal-border-color-primary) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-primary:active {
  border-top-color: var(--bal-border-color-primary) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-primary-hover:focus {
  border-top-color: var(--bal-border-color-primary-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-primary-hover:hover {
  border-top-color: var(--bal-border-color-primary-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-primary-hover:active {
  border-top-color: var(--bal-border-color-primary-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-primary-active:focus {
  border-top-color: var(--bal-border-color-primary-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-primary-active:hover {
  border-top-color: var(--bal-border-color-primary-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-primary-active:active {
  border-top-color: var(--bal-border-color-primary-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-inverted-primary:focus {
  border-top-color: var(--bal-border-color-inverted-primary) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-inverted-primary:hover {
  border-top-color: var(--bal-border-color-inverted-primary) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-inverted-primary:active {
  border-top-color: var(--bal-border-color-inverted-primary) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-inverted-primary-hover:focus {
  border-top-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-inverted-primary-hover:hover {
  border-top-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-inverted-primary-hover:active {
  border-top-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-inverted-primary-active:focus {
  border-top-color: var(--bal-border-color-inverted-primary-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-inverted-primary-active:hover {
  border-top-color: var(--bal-border-color-inverted-primary-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-inverted-primary-active:active {
  border-top-color: var(--bal-border-color-inverted-primary-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-info:focus {
  border-top-color: var(--bal-border-color-info) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-info:hover {
  border-top-color: var(--bal-border-color-info) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-info:active {
  border-top-color: var(--bal-border-color-info) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-info-hover:focus {
  border-top-color: var(--bal-border-color-info-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-info-hover:hover {
  border-top-color: var(--bal-border-color-info-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-info-hover:active {
  border-top-color: var(--bal-border-color-info-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-info-active:focus {
  border-top-color: var(--bal-border-color-info-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-info-active:hover {
  border-top-color: var(--bal-border-color-info-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-info-active:active {
  border-top-color: var(--bal-border-color-info-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-success:focus {
  border-top-color: var(--bal-border-color-success) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-success:hover {
  border-top-color: var(--bal-border-color-success) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-success:active {
  border-top-color: var(--bal-border-color-success) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-success-hover:focus {
  border-top-color: var(--bal-border-color-success-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-success-hover:hover {
  border-top-color: var(--bal-border-color-success-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-success-hover:active {
  border-top-color: var(--bal-border-color-success-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-success-active:focus {
  border-top-color: var(--bal-border-color-success-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-success-active:hover {
  border-top-color: var(--bal-border-color-success-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-success-active:active {
  border-top-color: var(--bal-border-color-success-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-warning:focus {
  border-top-color: var(--bal-border-color-warning) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-warning:hover {
  border-top-color: var(--bal-border-color-warning) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-warning:active {
  border-top-color: var(--bal-border-color-warning) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-warning-hover:focus {
  border-top-color: var(--bal-border-color-warning-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-warning-hover:hover {
  border-top-color: var(--bal-border-color-warning-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-warning-hover:active {
  border-top-color: var(--bal-border-color-warning-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-warning-active:focus {
  border-top-color: var(--bal-border-color-warning-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-warning-active:hover {
  border-top-color: var(--bal-border-color-warning-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-warning-active:active {
  border-top-color: var(--bal-border-color-warning-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-danger:focus {
  border-top-color: var(--bal-border-color-danger) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-danger:hover {
  border-top-color: var(--bal-border-color-danger) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-danger:active {
  border-top-color: var(--bal-border-color-danger) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-danger-hover:focus {
  border-top-color: var(--bal-border-color-danger-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-danger-hover:hover {
  border-top-color: var(--bal-border-color-danger-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-danger-hover:active {
  border-top-color: var(--bal-border-color-danger-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-danger-active:focus {
  border-top-color: var(--bal-border-color-danger-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-danger-active:hover {
  border-top-color: var(--bal-border-color-danger-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-danger-active:active {
  border-top-color: var(--bal-border-color-danger-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-green:focus {
  border-top-color: var(--bal-border-color-green) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-green:hover {
  border-top-color: var(--bal-border-color-green) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-green:active {
  border-top-color: var(--bal-border-color-green) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-green-hover:focus {
  border-top-color: var(--bal-border-color-green-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-green-hover:hover {
  border-top-color: var(--bal-border-color-green-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-green-hover:active {
  border-top-color: var(--bal-border-color-green-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-green-active:focus {
  border-top-color: var(--bal-border-color-green-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-green-active:hover {
  border-top-color: var(--bal-border-color-green-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-green-active:active {
  border-top-color: var(--bal-border-color-green-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-purple:focus {
  border-top-color: var(--bal-border-color-purple) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-purple:hover {
  border-top-color: var(--bal-border-color-purple) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-purple:active {
  border-top-color: var(--bal-border-color-purple) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-purple-hover:focus {
  border-top-color: var(--bal-border-color-purple-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-purple-hover:hover {
  border-top-color: var(--bal-border-color-purple-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-purple-hover:active {
  border-top-color: var(--bal-border-color-purple-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-purple-active:focus {
  border-top-color: var(--bal-border-color-purple-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-purple-active:hover {
  border-top-color: var(--bal-border-color-purple-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-purple-active:active {
  border-top-color: var(--bal-border-color-purple-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-red:focus {
  border-top-color: var(--bal-border-color-red) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-red:hover {
  border-top-color: var(--bal-border-color-red) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-red:active {
  border-top-color: var(--bal-border-color-red) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-red-hover:focus {
  border-top-color: var(--bal-border-color-red-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-red-hover:hover {
  border-top-color: var(--bal-border-color-red-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-red-hover:active {
  border-top-color: var(--bal-border-color-red-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-red-active:focus {
  border-top-color: var(--bal-border-color-red-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-red-active:hover {
  border-top-color: var(--bal-border-color-red-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-red-active:active {
  border-top-color: var(--bal-border-color-red-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-yellow:focus {
  border-top-color: var(--bal-border-color-yellow) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-yellow:hover {
  border-top-color: var(--bal-border-color-yellow) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-yellow:active {
  border-top-color: var(--bal-border-color-yellow) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-yellow-hover:focus {
  border-top-color: var(--bal-border-color-yellow-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-yellow-hover:hover {
  border-top-color: var(--bal-border-color-yellow-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-yellow-hover:active {
  border-top-color: var(--bal-border-color-yellow-hover) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.focus\:border-top-yellow-active:focus {
  border-top-color: var(--bal-border-color-yellow-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.hover\:border-top-yellow-active:hover {
  border-top-color: var(--bal-border-color-yellow-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.active\:border-top-yellow-active:active {
  border-top-color: var(--bal-border-color-yellow-active) !important;
  border-top-width: var(--bal-border-width-normal) !important;
  border-top-style: solid;
}

.border-right-white {
  border-right-color: var(--bal-border-color-white) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right {
  border-right-color: var(--bal-border-color-base) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-inverted {
  border-right-color: var(--bal-border-color-inverted) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-disabled {
  border-right-color: var(--bal-border-color-disabled) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-disabled-inverted {
  border-right-color: var(--bal-border-color-disabled-inverted) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-grey-light {
  border-right-color: var(--bal-border-color-grey-light) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-grey {
  border-right-color: var(--bal-border-color-grey) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-grey-dark {
  border-right-color: var(--bal-border-color-grey-dark) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-primary-light {
  border-right-color: var(--bal-border-color-primary-light) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-primary {
  border-right-color: var(--bal-border-color-primary) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-primary-hover {
  border-right-color: var(--bal-border-color-primary-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-primary-active {
  border-right-color: var(--bal-border-color-primary-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-inverted-primary {
  border-right-color: var(--bal-border-color-inverted-primary) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-inverted-primary-hover {
  border-right-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-inverted-primary-active {
  border-right-color: var(--bal-border-color-inverted-primary-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-info {
  border-right-color: var(--bal-border-color-info) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-info-hover {
  border-right-color: var(--bal-border-color-info-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-info-active {
  border-right-color: var(--bal-border-color-info-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-success {
  border-right-color: var(--bal-border-color-success) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-success-hover {
  border-right-color: var(--bal-border-color-success-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-success-active {
  border-right-color: var(--bal-border-color-success-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-warning {
  border-right-color: var(--bal-border-color-warning) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-warning-hover {
  border-right-color: var(--bal-border-color-warning-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-warning-active {
  border-right-color: var(--bal-border-color-warning-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-danger {
  border-right-color: var(--bal-border-color-danger) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-danger-hover {
  border-right-color: var(--bal-border-color-danger-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-danger-active {
  border-right-color: var(--bal-border-color-danger-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-green {
  border-right-color: var(--bal-border-color-green) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-green-hover {
  border-right-color: var(--bal-border-color-green-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-green-active {
  border-right-color: var(--bal-border-color-green-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-purple {
  border-right-color: var(--bal-border-color-purple) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-purple-hover {
  border-right-color: var(--bal-border-color-purple-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-purple-active {
  border-right-color: var(--bal-border-color-purple-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-red {
  border-right-color: var(--bal-border-color-red) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-red-hover {
  border-right-color: var(--bal-border-color-red-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-red-active {
  border-right-color: var(--bal-border-color-red-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-yellow {
  border-right-color: var(--bal-border-color-yellow) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-yellow-hover {
  border-right-color: var(--bal-border-color-yellow-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-right-yellow-active {
  border-right-color: var(--bal-border-color-yellow-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-white:focus {
  border-right-color: var(--bal-border-color-white) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-white:hover {
  border-right-color: var(--bal-border-color-white) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-white:active {
  border-right-color: var(--bal-border-color-white) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right:focus {
  border-right-color: var(--bal-border-color-base) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right:hover {
  border-right-color: var(--bal-border-color-base) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right:active {
  border-right-color: var(--bal-border-color-base) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-inverted:focus {
  border-right-color: var(--bal-border-color-inverted) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-inverted:hover {
  border-right-color: var(--bal-border-color-inverted) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-inverted:active {
  border-right-color: var(--bal-border-color-inverted) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-disabled:focus {
  border-right-color: var(--bal-border-color-disabled) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-disabled:hover {
  border-right-color: var(--bal-border-color-disabled) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-disabled:active {
  border-right-color: var(--bal-border-color-disabled) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-disabled-inverted:focus {
  border-right-color: var(--bal-border-color-disabled-inverted) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-disabled-inverted:hover {
  border-right-color: var(--bal-border-color-disabled-inverted) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-disabled-inverted:active {
  border-right-color: var(--bal-border-color-disabled-inverted) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-grey-light:focus {
  border-right-color: var(--bal-border-color-grey-light) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-grey-light:hover {
  border-right-color: var(--bal-border-color-grey-light) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-grey-light:active {
  border-right-color: var(--bal-border-color-grey-light) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-grey:focus {
  border-right-color: var(--bal-border-color-grey) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-grey:hover {
  border-right-color: var(--bal-border-color-grey) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-grey:active {
  border-right-color: var(--bal-border-color-grey) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-grey-dark:focus {
  border-right-color: var(--bal-border-color-grey-dark) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-grey-dark:hover {
  border-right-color: var(--bal-border-color-grey-dark) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-grey-dark:active {
  border-right-color: var(--bal-border-color-grey-dark) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-primary-light:focus {
  border-right-color: var(--bal-border-color-primary-light) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-primary-light:hover {
  border-right-color: var(--bal-border-color-primary-light) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-primary-light:active {
  border-right-color: var(--bal-border-color-primary-light) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-primary:focus {
  border-right-color: var(--bal-border-color-primary) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-primary:hover {
  border-right-color: var(--bal-border-color-primary) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-primary:active {
  border-right-color: var(--bal-border-color-primary) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-primary-hover:focus {
  border-right-color: var(--bal-border-color-primary-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-primary-hover:hover {
  border-right-color: var(--bal-border-color-primary-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-primary-hover:active {
  border-right-color: var(--bal-border-color-primary-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-primary-active:focus {
  border-right-color: var(--bal-border-color-primary-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-primary-active:hover {
  border-right-color: var(--bal-border-color-primary-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-primary-active:active {
  border-right-color: var(--bal-border-color-primary-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-inverted-primary:focus {
  border-right-color: var(--bal-border-color-inverted-primary) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-inverted-primary:hover {
  border-right-color: var(--bal-border-color-inverted-primary) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-inverted-primary:active {
  border-right-color: var(--bal-border-color-inverted-primary) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-inverted-primary-hover:focus {
  border-right-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-inverted-primary-hover:hover {
  border-right-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-inverted-primary-hover:active {
  border-right-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-inverted-primary-active:focus {
  border-right-color: var(--bal-border-color-inverted-primary-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-inverted-primary-active:hover {
  border-right-color: var(--bal-border-color-inverted-primary-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-inverted-primary-active:active {
  border-right-color: var(--bal-border-color-inverted-primary-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-info:focus {
  border-right-color: var(--bal-border-color-info) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-info:hover {
  border-right-color: var(--bal-border-color-info) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-info:active {
  border-right-color: var(--bal-border-color-info) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-info-hover:focus {
  border-right-color: var(--bal-border-color-info-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-info-hover:hover {
  border-right-color: var(--bal-border-color-info-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-info-hover:active {
  border-right-color: var(--bal-border-color-info-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-info-active:focus {
  border-right-color: var(--bal-border-color-info-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-info-active:hover {
  border-right-color: var(--bal-border-color-info-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-info-active:active {
  border-right-color: var(--bal-border-color-info-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-success:focus {
  border-right-color: var(--bal-border-color-success) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-success:hover {
  border-right-color: var(--bal-border-color-success) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-success:active {
  border-right-color: var(--bal-border-color-success) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-success-hover:focus {
  border-right-color: var(--bal-border-color-success-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-success-hover:hover {
  border-right-color: var(--bal-border-color-success-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-success-hover:active {
  border-right-color: var(--bal-border-color-success-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-success-active:focus {
  border-right-color: var(--bal-border-color-success-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-success-active:hover {
  border-right-color: var(--bal-border-color-success-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-success-active:active {
  border-right-color: var(--bal-border-color-success-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-warning:focus {
  border-right-color: var(--bal-border-color-warning) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-warning:hover {
  border-right-color: var(--bal-border-color-warning) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-warning:active {
  border-right-color: var(--bal-border-color-warning) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-warning-hover:focus {
  border-right-color: var(--bal-border-color-warning-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-warning-hover:hover {
  border-right-color: var(--bal-border-color-warning-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-warning-hover:active {
  border-right-color: var(--bal-border-color-warning-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-warning-active:focus {
  border-right-color: var(--bal-border-color-warning-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-warning-active:hover {
  border-right-color: var(--bal-border-color-warning-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-warning-active:active {
  border-right-color: var(--bal-border-color-warning-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-danger:focus {
  border-right-color: var(--bal-border-color-danger) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-danger:hover {
  border-right-color: var(--bal-border-color-danger) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-danger:active {
  border-right-color: var(--bal-border-color-danger) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-danger-hover:focus {
  border-right-color: var(--bal-border-color-danger-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-danger-hover:hover {
  border-right-color: var(--bal-border-color-danger-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-danger-hover:active {
  border-right-color: var(--bal-border-color-danger-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-danger-active:focus {
  border-right-color: var(--bal-border-color-danger-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-danger-active:hover {
  border-right-color: var(--bal-border-color-danger-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-danger-active:active {
  border-right-color: var(--bal-border-color-danger-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-green:focus {
  border-right-color: var(--bal-border-color-green) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-green:hover {
  border-right-color: var(--bal-border-color-green) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-green:active {
  border-right-color: var(--bal-border-color-green) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-green-hover:focus {
  border-right-color: var(--bal-border-color-green-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-green-hover:hover {
  border-right-color: var(--bal-border-color-green-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-green-hover:active {
  border-right-color: var(--bal-border-color-green-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-green-active:focus {
  border-right-color: var(--bal-border-color-green-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-green-active:hover {
  border-right-color: var(--bal-border-color-green-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-green-active:active {
  border-right-color: var(--bal-border-color-green-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-purple:focus {
  border-right-color: var(--bal-border-color-purple) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-purple:hover {
  border-right-color: var(--bal-border-color-purple) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-purple:active {
  border-right-color: var(--bal-border-color-purple) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-purple-hover:focus {
  border-right-color: var(--bal-border-color-purple-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-purple-hover:hover {
  border-right-color: var(--bal-border-color-purple-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-purple-hover:active {
  border-right-color: var(--bal-border-color-purple-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-purple-active:focus {
  border-right-color: var(--bal-border-color-purple-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-purple-active:hover {
  border-right-color: var(--bal-border-color-purple-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-purple-active:active {
  border-right-color: var(--bal-border-color-purple-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-red:focus {
  border-right-color: var(--bal-border-color-red) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-red:hover {
  border-right-color: var(--bal-border-color-red) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-red:active {
  border-right-color: var(--bal-border-color-red) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-red-hover:focus {
  border-right-color: var(--bal-border-color-red-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-red-hover:hover {
  border-right-color: var(--bal-border-color-red-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-red-hover:active {
  border-right-color: var(--bal-border-color-red-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-red-active:focus {
  border-right-color: var(--bal-border-color-red-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-red-active:hover {
  border-right-color: var(--bal-border-color-red-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-red-active:active {
  border-right-color: var(--bal-border-color-red-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-yellow:focus {
  border-right-color: var(--bal-border-color-yellow) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-yellow:hover {
  border-right-color: var(--bal-border-color-yellow) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-yellow:active {
  border-right-color: var(--bal-border-color-yellow) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-yellow-hover:focus {
  border-right-color: var(--bal-border-color-yellow-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-yellow-hover:hover {
  border-right-color: var(--bal-border-color-yellow-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-yellow-hover:active {
  border-right-color: var(--bal-border-color-yellow-hover) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.focus\:border-right-yellow-active:focus {
  border-right-color: var(--bal-border-color-yellow-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.hover\:border-right-yellow-active:hover {
  border-right-color: var(--bal-border-color-yellow-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.active\:border-right-yellow-active:active {
  border-right-color: var(--bal-border-color-yellow-active) !important;
  border-right-width: var(--bal-border-width-normal) !important;
  border-right-style: solid;
}

.border-bottom-white {
  border-bottom-color: var(--bal-border-color-white) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom {
  border-bottom-color: var(--bal-border-color-base) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-inverted {
  border-bottom-color: var(--bal-border-color-inverted) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-disabled {
  border-bottom-color: var(--bal-border-color-disabled) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-disabled-inverted {
  border-bottom-color: var(--bal-border-color-disabled-inverted) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-grey-light {
  border-bottom-color: var(--bal-border-color-grey-light) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-grey {
  border-bottom-color: var(--bal-border-color-grey) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-grey-dark {
  border-bottom-color: var(--bal-border-color-grey-dark) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-primary-light {
  border-bottom-color: var(--bal-border-color-primary-light) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-primary {
  border-bottom-color: var(--bal-border-color-primary) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-primary-hover {
  border-bottom-color: var(--bal-border-color-primary-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-primary-active {
  border-bottom-color: var(--bal-border-color-primary-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-inverted-primary {
  border-bottom-color: var(--bal-border-color-inverted-primary) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-inverted-primary-hover {
  border-bottom-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-inverted-primary-active {
  border-bottom-color: var(--bal-border-color-inverted-primary-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-info {
  border-bottom-color: var(--bal-border-color-info) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-info-hover {
  border-bottom-color: var(--bal-border-color-info-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-info-active {
  border-bottom-color: var(--bal-border-color-info-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-success {
  border-bottom-color: var(--bal-border-color-success) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-success-hover {
  border-bottom-color: var(--bal-border-color-success-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-success-active {
  border-bottom-color: var(--bal-border-color-success-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-warning {
  border-bottom-color: var(--bal-border-color-warning) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-warning-hover {
  border-bottom-color: var(--bal-border-color-warning-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-warning-active {
  border-bottom-color: var(--bal-border-color-warning-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-danger {
  border-bottom-color: var(--bal-border-color-danger) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-danger-hover {
  border-bottom-color: var(--bal-border-color-danger-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-danger-active {
  border-bottom-color: var(--bal-border-color-danger-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-green {
  border-bottom-color: var(--bal-border-color-green) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-green-hover {
  border-bottom-color: var(--bal-border-color-green-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-green-active {
  border-bottom-color: var(--bal-border-color-green-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-purple {
  border-bottom-color: var(--bal-border-color-purple) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-purple-hover {
  border-bottom-color: var(--bal-border-color-purple-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-purple-active {
  border-bottom-color: var(--bal-border-color-purple-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-red {
  border-bottom-color: var(--bal-border-color-red) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-red-hover {
  border-bottom-color: var(--bal-border-color-red-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-red-active {
  border-bottom-color: var(--bal-border-color-red-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-yellow {
  border-bottom-color: var(--bal-border-color-yellow) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-yellow-hover {
  border-bottom-color: var(--bal-border-color-yellow-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-bottom-yellow-active {
  border-bottom-color: var(--bal-border-color-yellow-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-white:focus {
  border-bottom-color: var(--bal-border-color-white) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-white:hover {
  border-bottom-color: var(--bal-border-color-white) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-white:active {
  border-bottom-color: var(--bal-border-color-white) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom:focus {
  border-bottom-color: var(--bal-border-color-base) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom:hover {
  border-bottom-color: var(--bal-border-color-base) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom:active {
  border-bottom-color: var(--bal-border-color-base) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-inverted:focus {
  border-bottom-color: var(--bal-border-color-inverted) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-inverted:hover {
  border-bottom-color: var(--bal-border-color-inverted) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-inverted:active {
  border-bottom-color: var(--bal-border-color-inverted) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-disabled:focus {
  border-bottom-color: var(--bal-border-color-disabled) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-disabled:hover {
  border-bottom-color: var(--bal-border-color-disabled) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-disabled:active {
  border-bottom-color: var(--bal-border-color-disabled) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-disabled-inverted:focus {
  border-bottom-color: var(--bal-border-color-disabled-inverted) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-disabled-inverted:hover {
  border-bottom-color: var(--bal-border-color-disabled-inverted) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-disabled-inverted:active {
  border-bottom-color: var(--bal-border-color-disabled-inverted) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-grey-light:focus {
  border-bottom-color: var(--bal-border-color-grey-light) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-grey-light:hover {
  border-bottom-color: var(--bal-border-color-grey-light) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-grey-light:active {
  border-bottom-color: var(--bal-border-color-grey-light) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-grey:focus {
  border-bottom-color: var(--bal-border-color-grey) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-grey:hover {
  border-bottom-color: var(--bal-border-color-grey) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-grey:active {
  border-bottom-color: var(--bal-border-color-grey) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-grey-dark:focus {
  border-bottom-color: var(--bal-border-color-grey-dark) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-grey-dark:hover {
  border-bottom-color: var(--bal-border-color-grey-dark) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-grey-dark:active {
  border-bottom-color: var(--bal-border-color-grey-dark) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-primary-light:focus {
  border-bottom-color: var(--bal-border-color-primary-light) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-primary-light:hover {
  border-bottom-color: var(--bal-border-color-primary-light) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-primary-light:active {
  border-bottom-color: var(--bal-border-color-primary-light) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-primary:focus {
  border-bottom-color: var(--bal-border-color-primary) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-primary:hover {
  border-bottom-color: var(--bal-border-color-primary) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-primary:active {
  border-bottom-color: var(--bal-border-color-primary) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-primary-hover:focus {
  border-bottom-color: var(--bal-border-color-primary-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-primary-hover:hover {
  border-bottom-color: var(--bal-border-color-primary-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-primary-hover:active {
  border-bottom-color: var(--bal-border-color-primary-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-primary-active:focus {
  border-bottom-color: var(--bal-border-color-primary-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-primary-active:hover {
  border-bottom-color: var(--bal-border-color-primary-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-primary-active:active {
  border-bottom-color: var(--bal-border-color-primary-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-inverted-primary:focus {
  border-bottom-color: var(--bal-border-color-inverted-primary) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-inverted-primary:hover {
  border-bottom-color: var(--bal-border-color-inverted-primary) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-inverted-primary:active {
  border-bottom-color: var(--bal-border-color-inverted-primary) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-inverted-primary-hover:focus {
  border-bottom-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-inverted-primary-hover:hover {
  border-bottom-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-inverted-primary-hover:active {
  border-bottom-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-inverted-primary-active:focus {
  border-bottom-color: var(--bal-border-color-inverted-primary-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-inverted-primary-active:hover {
  border-bottom-color: var(--bal-border-color-inverted-primary-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-inverted-primary-active:active {
  border-bottom-color: var(--bal-border-color-inverted-primary-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-info:focus {
  border-bottom-color: var(--bal-border-color-info) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-info:hover {
  border-bottom-color: var(--bal-border-color-info) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-info:active {
  border-bottom-color: var(--bal-border-color-info) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-info-hover:focus {
  border-bottom-color: var(--bal-border-color-info-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-info-hover:hover {
  border-bottom-color: var(--bal-border-color-info-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-info-hover:active {
  border-bottom-color: var(--bal-border-color-info-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-info-active:focus {
  border-bottom-color: var(--bal-border-color-info-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-info-active:hover {
  border-bottom-color: var(--bal-border-color-info-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-info-active:active {
  border-bottom-color: var(--bal-border-color-info-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-success:focus {
  border-bottom-color: var(--bal-border-color-success) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-success:hover {
  border-bottom-color: var(--bal-border-color-success) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-success:active {
  border-bottom-color: var(--bal-border-color-success) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-success-hover:focus {
  border-bottom-color: var(--bal-border-color-success-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-success-hover:hover {
  border-bottom-color: var(--bal-border-color-success-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-success-hover:active {
  border-bottom-color: var(--bal-border-color-success-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-success-active:focus {
  border-bottom-color: var(--bal-border-color-success-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-success-active:hover {
  border-bottom-color: var(--bal-border-color-success-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-success-active:active {
  border-bottom-color: var(--bal-border-color-success-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-warning:focus {
  border-bottom-color: var(--bal-border-color-warning) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-warning:hover {
  border-bottom-color: var(--bal-border-color-warning) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-warning:active {
  border-bottom-color: var(--bal-border-color-warning) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-warning-hover:focus {
  border-bottom-color: var(--bal-border-color-warning-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-warning-hover:hover {
  border-bottom-color: var(--bal-border-color-warning-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-warning-hover:active {
  border-bottom-color: var(--bal-border-color-warning-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-warning-active:focus {
  border-bottom-color: var(--bal-border-color-warning-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-warning-active:hover {
  border-bottom-color: var(--bal-border-color-warning-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-warning-active:active {
  border-bottom-color: var(--bal-border-color-warning-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-danger:focus {
  border-bottom-color: var(--bal-border-color-danger) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-danger:hover {
  border-bottom-color: var(--bal-border-color-danger) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-danger:active {
  border-bottom-color: var(--bal-border-color-danger) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-danger-hover:focus {
  border-bottom-color: var(--bal-border-color-danger-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-danger-hover:hover {
  border-bottom-color: var(--bal-border-color-danger-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-danger-hover:active {
  border-bottom-color: var(--bal-border-color-danger-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-danger-active:focus {
  border-bottom-color: var(--bal-border-color-danger-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-danger-active:hover {
  border-bottom-color: var(--bal-border-color-danger-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-danger-active:active {
  border-bottom-color: var(--bal-border-color-danger-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-green:focus {
  border-bottom-color: var(--bal-border-color-green) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-green:hover {
  border-bottom-color: var(--bal-border-color-green) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-green:active {
  border-bottom-color: var(--bal-border-color-green) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-green-hover:focus {
  border-bottom-color: var(--bal-border-color-green-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-green-hover:hover {
  border-bottom-color: var(--bal-border-color-green-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-green-hover:active {
  border-bottom-color: var(--bal-border-color-green-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-green-active:focus {
  border-bottom-color: var(--bal-border-color-green-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-green-active:hover {
  border-bottom-color: var(--bal-border-color-green-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-green-active:active {
  border-bottom-color: var(--bal-border-color-green-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-purple:focus {
  border-bottom-color: var(--bal-border-color-purple) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-purple:hover {
  border-bottom-color: var(--bal-border-color-purple) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-purple:active {
  border-bottom-color: var(--bal-border-color-purple) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-purple-hover:focus {
  border-bottom-color: var(--bal-border-color-purple-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-purple-hover:hover {
  border-bottom-color: var(--bal-border-color-purple-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-purple-hover:active {
  border-bottom-color: var(--bal-border-color-purple-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-purple-active:focus {
  border-bottom-color: var(--bal-border-color-purple-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-purple-active:hover {
  border-bottom-color: var(--bal-border-color-purple-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-purple-active:active {
  border-bottom-color: var(--bal-border-color-purple-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-red:focus {
  border-bottom-color: var(--bal-border-color-red) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-red:hover {
  border-bottom-color: var(--bal-border-color-red) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-red:active {
  border-bottom-color: var(--bal-border-color-red) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-red-hover:focus {
  border-bottom-color: var(--bal-border-color-red-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-red-hover:hover {
  border-bottom-color: var(--bal-border-color-red-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-red-hover:active {
  border-bottom-color: var(--bal-border-color-red-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-red-active:focus {
  border-bottom-color: var(--bal-border-color-red-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-red-active:hover {
  border-bottom-color: var(--bal-border-color-red-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-red-active:active {
  border-bottom-color: var(--bal-border-color-red-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-yellow:focus {
  border-bottom-color: var(--bal-border-color-yellow) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-yellow:hover {
  border-bottom-color: var(--bal-border-color-yellow) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-yellow:active {
  border-bottom-color: var(--bal-border-color-yellow) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-yellow-hover:focus {
  border-bottom-color: var(--bal-border-color-yellow-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-yellow-hover:hover {
  border-bottom-color: var(--bal-border-color-yellow-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-yellow-hover:active {
  border-bottom-color: var(--bal-border-color-yellow-hover) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.focus\:border-bottom-yellow-active:focus {
  border-bottom-color: var(--bal-border-color-yellow-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.hover\:border-bottom-yellow-active:hover {
  border-bottom-color: var(--bal-border-color-yellow-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.active\:border-bottom-yellow-active:active {
  border-bottom-color: var(--bal-border-color-yellow-active) !important;
  border-bottom-width: var(--bal-border-width-normal) !important;
  border-bottom-style: solid;
}

.border-left-white {
  border-left-color: var(--bal-border-color-white) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left {
  border-left-color: var(--bal-border-color-base) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-inverted {
  border-left-color: var(--bal-border-color-inverted) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-disabled {
  border-left-color: var(--bal-border-color-disabled) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-disabled-inverted {
  border-left-color: var(--bal-border-color-disabled-inverted) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-grey-light {
  border-left-color: var(--bal-border-color-grey-light) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-grey {
  border-left-color: var(--bal-border-color-grey) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-grey-dark {
  border-left-color: var(--bal-border-color-grey-dark) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-primary-light {
  border-left-color: var(--bal-border-color-primary-light) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-primary {
  border-left-color: var(--bal-border-color-primary) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-primary-hover {
  border-left-color: var(--bal-border-color-primary-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-primary-active {
  border-left-color: var(--bal-border-color-primary-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-inverted-primary {
  border-left-color: var(--bal-border-color-inverted-primary) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-inverted-primary-hover {
  border-left-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-inverted-primary-active {
  border-left-color: var(--bal-border-color-inverted-primary-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-info {
  border-left-color: var(--bal-border-color-info) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-info-hover {
  border-left-color: var(--bal-border-color-info-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-info-active {
  border-left-color: var(--bal-border-color-info-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-success {
  border-left-color: var(--bal-border-color-success) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-success-hover {
  border-left-color: var(--bal-border-color-success-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-success-active {
  border-left-color: var(--bal-border-color-success-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-warning {
  border-left-color: var(--bal-border-color-warning) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-warning-hover {
  border-left-color: var(--bal-border-color-warning-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-warning-active {
  border-left-color: var(--bal-border-color-warning-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-danger {
  border-left-color: var(--bal-border-color-danger) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-danger-hover {
  border-left-color: var(--bal-border-color-danger-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-danger-active {
  border-left-color: var(--bal-border-color-danger-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-green {
  border-left-color: var(--bal-border-color-green) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-green-hover {
  border-left-color: var(--bal-border-color-green-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-green-active {
  border-left-color: var(--bal-border-color-green-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-purple {
  border-left-color: var(--bal-border-color-purple) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-purple-hover {
  border-left-color: var(--bal-border-color-purple-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-purple-active {
  border-left-color: var(--bal-border-color-purple-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-red {
  border-left-color: var(--bal-border-color-red) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-red-hover {
  border-left-color: var(--bal-border-color-red-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-red-active {
  border-left-color: var(--bal-border-color-red-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-yellow {
  border-left-color: var(--bal-border-color-yellow) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-yellow-hover {
  border-left-color: var(--bal-border-color-yellow-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-left-yellow-active {
  border-left-color: var(--bal-border-color-yellow-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-white:focus {
  border-left-color: var(--bal-border-color-white) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-white:hover {
  border-left-color: var(--bal-border-color-white) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-white:active {
  border-left-color: var(--bal-border-color-white) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left:focus {
  border-left-color: var(--bal-border-color-base) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left:hover {
  border-left-color: var(--bal-border-color-base) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left:active {
  border-left-color: var(--bal-border-color-base) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-inverted:focus {
  border-left-color: var(--bal-border-color-inverted) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-inverted:hover {
  border-left-color: var(--bal-border-color-inverted) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-inverted:active {
  border-left-color: var(--bal-border-color-inverted) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-disabled:focus {
  border-left-color: var(--bal-border-color-disabled) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-disabled:hover {
  border-left-color: var(--bal-border-color-disabled) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-disabled:active {
  border-left-color: var(--bal-border-color-disabled) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-disabled-inverted:focus {
  border-left-color: var(--bal-border-color-disabled-inverted) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-disabled-inverted:hover {
  border-left-color: var(--bal-border-color-disabled-inverted) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-disabled-inverted:active {
  border-left-color: var(--bal-border-color-disabled-inverted) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-grey-light:focus {
  border-left-color: var(--bal-border-color-grey-light) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-grey-light:hover {
  border-left-color: var(--bal-border-color-grey-light) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-grey-light:active {
  border-left-color: var(--bal-border-color-grey-light) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-grey:focus {
  border-left-color: var(--bal-border-color-grey) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-grey:hover {
  border-left-color: var(--bal-border-color-grey) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-grey:active {
  border-left-color: var(--bal-border-color-grey) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-grey-dark:focus {
  border-left-color: var(--bal-border-color-grey-dark) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-grey-dark:hover {
  border-left-color: var(--bal-border-color-grey-dark) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-grey-dark:active {
  border-left-color: var(--bal-border-color-grey-dark) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-primary-light:focus {
  border-left-color: var(--bal-border-color-primary-light) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-primary-light:hover {
  border-left-color: var(--bal-border-color-primary-light) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-primary-light:active {
  border-left-color: var(--bal-border-color-primary-light) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-primary:focus {
  border-left-color: var(--bal-border-color-primary) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-primary:hover {
  border-left-color: var(--bal-border-color-primary) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-primary:active {
  border-left-color: var(--bal-border-color-primary) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-primary-hover:focus {
  border-left-color: var(--bal-border-color-primary-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-primary-hover:hover {
  border-left-color: var(--bal-border-color-primary-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-primary-hover:active {
  border-left-color: var(--bal-border-color-primary-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-primary-active:focus {
  border-left-color: var(--bal-border-color-primary-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-primary-active:hover {
  border-left-color: var(--bal-border-color-primary-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-primary-active:active {
  border-left-color: var(--bal-border-color-primary-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-inverted-primary:focus {
  border-left-color: var(--bal-border-color-inverted-primary) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-inverted-primary:hover {
  border-left-color: var(--bal-border-color-inverted-primary) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-inverted-primary:active {
  border-left-color: var(--bal-border-color-inverted-primary) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-inverted-primary-hover:focus {
  border-left-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-inverted-primary-hover:hover {
  border-left-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-inverted-primary-hover:active {
  border-left-color: var(--bal-border-color-inverted-primary-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-inverted-primary-active:focus {
  border-left-color: var(--bal-border-color-inverted-primary-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-inverted-primary-active:hover {
  border-left-color: var(--bal-border-color-inverted-primary-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-inverted-primary-active:active {
  border-left-color: var(--bal-border-color-inverted-primary-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-info:focus {
  border-left-color: var(--bal-border-color-info) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-info:hover {
  border-left-color: var(--bal-border-color-info) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-info:active {
  border-left-color: var(--bal-border-color-info) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-info-hover:focus {
  border-left-color: var(--bal-border-color-info-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-info-hover:hover {
  border-left-color: var(--bal-border-color-info-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-info-hover:active {
  border-left-color: var(--bal-border-color-info-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-info-active:focus {
  border-left-color: var(--bal-border-color-info-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-info-active:hover {
  border-left-color: var(--bal-border-color-info-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-info-active:active {
  border-left-color: var(--bal-border-color-info-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-success:focus {
  border-left-color: var(--bal-border-color-success) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-success:hover {
  border-left-color: var(--bal-border-color-success) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-success:active {
  border-left-color: var(--bal-border-color-success) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-success-hover:focus {
  border-left-color: var(--bal-border-color-success-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-success-hover:hover {
  border-left-color: var(--bal-border-color-success-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-success-hover:active {
  border-left-color: var(--bal-border-color-success-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-success-active:focus {
  border-left-color: var(--bal-border-color-success-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-success-active:hover {
  border-left-color: var(--bal-border-color-success-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-success-active:active {
  border-left-color: var(--bal-border-color-success-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-warning:focus {
  border-left-color: var(--bal-border-color-warning) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-warning:hover {
  border-left-color: var(--bal-border-color-warning) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-warning:active {
  border-left-color: var(--bal-border-color-warning) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-warning-hover:focus {
  border-left-color: var(--bal-border-color-warning-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-warning-hover:hover {
  border-left-color: var(--bal-border-color-warning-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-warning-hover:active {
  border-left-color: var(--bal-border-color-warning-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-warning-active:focus {
  border-left-color: var(--bal-border-color-warning-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-warning-active:hover {
  border-left-color: var(--bal-border-color-warning-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-warning-active:active {
  border-left-color: var(--bal-border-color-warning-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-danger:focus {
  border-left-color: var(--bal-border-color-danger) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-danger:hover {
  border-left-color: var(--bal-border-color-danger) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-danger:active {
  border-left-color: var(--bal-border-color-danger) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-danger-hover:focus {
  border-left-color: var(--bal-border-color-danger-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-danger-hover:hover {
  border-left-color: var(--bal-border-color-danger-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-danger-hover:active {
  border-left-color: var(--bal-border-color-danger-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-danger-active:focus {
  border-left-color: var(--bal-border-color-danger-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-danger-active:hover {
  border-left-color: var(--bal-border-color-danger-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-danger-active:active {
  border-left-color: var(--bal-border-color-danger-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-green:focus {
  border-left-color: var(--bal-border-color-green) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-green:hover {
  border-left-color: var(--bal-border-color-green) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-green:active {
  border-left-color: var(--bal-border-color-green) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-green-hover:focus {
  border-left-color: var(--bal-border-color-green-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-green-hover:hover {
  border-left-color: var(--bal-border-color-green-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-green-hover:active {
  border-left-color: var(--bal-border-color-green-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-green-active:focus {
  border-left-color: var(--bal-border-color-green-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-green-active:hover {
  border-left-color: var(--bal-border-color-green-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-green-active:active {
  border-left-color: var(--bal-border-color-green-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-purple:focus {
  border-left-color: var(--bal-border-color-purple) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-purple:hover {
  border-left-color: var(--bal-border-color-purple) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-purple:active {
  border-left-color: var(--bal-border-color-purple) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-purple-hover:focus {
  border-left-color: var(--bal-border-color-purple-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-purple-hover:hover {
  border-left-color: var(--bal-border-color-purple-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-purple-hover:active {
  border-left-color: var(--bal-border-color-purple-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-purple-active:focus {
  border-left-color: var(--bal-border-color-purple-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-purple-active:hover {
  border-left-color: var(--bal-border-color-purple-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-purple-active:active {
  border-left-color: var(--bal-border-color-purple-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-red:focus {
  border-left-color: var(--bal-border-color-red) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-red:hover {
  border-left-color: var(--bal-border-color-red) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-red:active {
  border-left-color: var(--bal-border-color-red) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-red-hover:focus {
  border-left-color: var(--bal-border-color-red-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-red-hover:hover {
  border-left-color: var(--bal-border-color-red-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-red-hover:active {
  border-left-color: var(--bal-border-color-red-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-red-active:focus {
  border-left-color: var(--bal-border-color-red-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-red-active:hover {
  border-left-color: var(--bal-border-color-red-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-red-active:active {
  border-left-color: var(--bal-border-color-red-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-yellow:focus {
  border-left-color: var(--bal-border-color-yellow) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-yellow:hover {
  border-left-color: var(--bal-border-color-yellow) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-yellow:active {
  border-left-color: var(--bal-border-color-yellow) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-yellow-hover:focus {
  border-left-color: var(--bal-border-color-yellow-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-yellow-hover:hover {
  border-left-color: var(--bal-border-color-yellow-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-yellow-hover:active {
  border-left-color: var(--bal-border-color-yellow-hover) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.focus\:border-left-yellow-active:focus {
  border-left-color: var(--bal-border-color-yellow-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.hover\:border-left-yellow-active:hover {
  border-left-color: var(--bal-border-color-yellow-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.active\:border-left-yellow-active:active {
  border-left-color: var(--bal-border-color-yellow-active) !important;
  border-left-width: var(--bal-border-width-normal) !important;
  border-left-style: solid;
}

.border-width-none {
  border-width: var(--bal-border-width-none) !important;
}

.border-width {
  border-width: var(--bal-border-width-base) !important;
}

.border-width-md {
  border-width: var(--bal-border-width-md) !important;
}

@media screen and (max-width: 768px) {
  .mobile\:border-width-none {
    border-width: var(--bal-border-width-none) !important;
  }
  .mobile\:border-width {
    border-width: var(--bal-border-width-base) !important;
  }
  .mobile\:border-width-md {
    border-width: var(--bal-border-width-md) !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:border-width-none {
    border-width: var(--bal-border-width-none) !important;
  }
  .tablet\:border-width {
    border-width: var(--bal-border-width-base) !important;
  }
  .tablet\:border-width-md {
    border-width: var(--bal-border-width-md) !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:border-width-none {
    border-width: var(--bal-border-width-none) !important;
  }
  .desktop\:border-width {
    border-width: var(--bal-border-width-base) !important;
  }
  .desktop\:border-width-md {
    border-width: var(--bal-border-width-md) !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:border-width-none {
    border-width: var(--bal-border-width-none) !important;
  }
  .desktop-xl\:border-width {
    border-width: var(--bal-border-width-base) !important;
  }
  .desktop-xl\:border-width-md {
    border-width: var(--bal-border-width-md) !important;
  }
}
.border-none {
  border: none !important;
}

@media screen and (max-width: 768px) {
  .mobile\:border-none {
    border: none !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:border-none {
    border: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:border-none {
    border: none !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:border-none {
    border: none !important;
  }
}
.border-top-none {
  border-top: none !important;
}

@media screen and (max-width: 768px) {
  .mobile\:border-top-none {
    border-top: none !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:border-top-none {
    border-top: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:border-top-none {
    border-top: none !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:border-top-none {
    border-top: none !important;
  }
}
.border-right-none {
  border-right: none !important;
}

@media screen and (max-width: 768px) {
  .mobile\:border-right-none {
    border-right: none !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:border-right-none {
    border-right: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:border-right-none {
    border-right: none !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:border-right-none {
    border-right: none !important;
  }
}
.border-bottom-none {
  border-bottom: none !important;
}

@media screen and (max-width: 768px) {
  .mobile\:border-bottom-none {
    border-bottom: none !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:border-bottom-none {
    border-bottom: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:border-bottom-none {
    border-bottom: none !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:border-bottom-none {
    border-bottom: none !important;
  }
}
.border-left-none {
  border-left: none !important;
}

@media screen and (max-width: 768px) {
  .mobile\:border-left-none {
    border-left: none !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:border-left-none {
    border-left: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:border-left-none {
    border-left: none !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:border-left-none {
    border-left: none !important;
  }
}
.z-index-deep {
  z-index: var(--bal-z-index-deep) !important;
}

.z-index-masked {
  z-index: var(--bal-z-index-masked) !important;
}

.z-index-mask {
  z-index: var(--bal-z-index-mask) !important;
}

.z-index-sticky {
  z-index: var(--bal-z-index-sticky) !important;
}

.z-index-navigation {
  z-index: var(--bal-z-index-navigation) !important;
}

.z-index-popup {
  z-index: var(--bal-z-index-popup) !important;
}

.z-index-modal {
  z-index: var(--bal-z-index-modal) !important;
}

.z-index-toast {
  z-index: var(--bal-z-index-toast) !important;
}

.z-index-tooltip {
  z-index: var(--bal-z-index-tooltip) !important;
}

@media screen and (max-width: 768px) {
  .mobile\:z-index-deep {
    z-index: var(--bal-z-index-deep) !important;
  }
  .mobile\:z-index-masked {
    z-index: var(--bal-z-index-masked) !important;
  }
  .mobile\:z-index-mask {
    z-index: var(--bal-z-index-mask) !important;
  }
  .mobile\:z-index-sticky {
    z-index: var(--bal-z-index-sticky) !important;
  }
  .mobile\:z-index-navigation {
    z-index: var(--bal-z-index-navigation) !important;
  }
  .mobile\:z-index-popup {
    z-index: var(--bal-z-index-popup) !important;
  }
  .mobile\:z-index-modal {
    z-index: var(--bal-z-index-modal) !important;
  }
  .mobile\:z-index-toast {
    z-index: var(--bal-z-index-toast) !important;
  }
  .mobile\:z-index-tooltip {
    z-index: var(--bal-z-index-tooltip) !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:z-index-deep {
    z-index: var(--bal-z-index-deep) !important;
  }
  .tablet\:z-index-masked {
    z-index: var(--bal-z-index-masked) !important;
  }
  .tablet\:z-index-mask {
    z-index: var(--bal-z-index-mask) !important;
  }
  .tablet\:z-index-sticky {
    z-index: var(--bal-z-index-sticky) !important;
  }
  .tablet\:z-index-navigation {
    z-index: var(--bal-z-index-navigation) !important;
  }
  .tablet\:z-index-popup {
    z-index: var(--bal-z-index-popup) !important;
  }
  .tablet\:z-index-modal {
    z-index: var(--bal-z-index-modal) !important;
  }
  .tablet\:z-index-toast {
    z-index: var(--bal-z-index-toast) !important;
  }
  .tablet\:z-index-tooltip {
    z-index: var(--bal-z-index-tooltip) !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:z-index-deep {
    z-index: var(--bal-z-index-deep) !important;
  }
  .desktop\:z-index-masked {
    z-index: var(--bal-z-index-masked) !important;
  }
  .desktop\:z-index-mask {
    z-index: var(--bal-z-index-mask) !important;
  }
  .desktop\:z-index-sticky {
    z-index: var(--bal-z-index-sticky) !important;
  }
  .desktop\:z-index-navigation {
    z-index: var(--bal-z-index-navigation) !important;
  }
  .desktop\:z-index-popup {
    z-index: var(--bal-z-index-popup) !important;
  }
  .desktop\:z-index-modal {
    z-index: var(--bal-z-index-modal) !important;
  }
  .desktop\:z-index-toast {
    z-index: var(--bal-z-index-toast) !important;
  }
  .desktop\:z-index-tooltip {
    z-index: var(--bal-z-index-tooltip) !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:z-index-deep {
    z-index: var(--bal-z-index-deep) !important;
  }
  .desktop-xl\:z-index-masked {
    z-index: var(--bal-z-index-masked) !important;
  }
  .desktop-xl\:z-index-mask {
    z-index: var(--bal-z-index-mask) !important;
  }
  .desktop-xl\:z-index-sticky {
    z-index: var(--bal-z-index-sticky) !important;
  }
  .desktop-xl\:z-index-navigation {
    z-index: var(--bal-z-index-navigation) !important;
  }
  .desktop-xl\:z-index-popup {
    z-index: var(--bal-z-index-popup) !important;
  }
  .desktop-xl\:z-index-modal {
    z-index: var(--bal-z-index-modal) !important;
  }
  .desktop-xl\:z-index-toast {
    z-index: var(--bal-z-index-toast) !important;
  }
  .desktop-xl\:z-index-tooltip {
    z-index: var(--bal-z-index-tooltip) !important;
  }
}
.opacity-hidden {
  opacity: var(--bal-opacity-hidden) !important;
}

.opacity-half {
  opacity: var(--bal-opacity-half) !important;
}

.opacity-disabled {
  opacity: var(--bal-opacity-disabled) !important;
}

.opacity-backdrop {
  opacity: var(--bal-opacity-backdrop) !important;
}

.opacity-full {
  opacity: var(--bal-opacity-full) !important;
}

@media screen and (max-width: 768px) {
  .mobile\:opacity-hidden {
    opacity: var(--bal-opacity-hidden) !important;
  }
  .mobile\:opacity-half {
    opacity: var(--bal-opacity-half) !important;
  }
  .mobile\:opacity-disabled {
    opacity: var(--bal-opacity-disabled) !important;
  }
  .mobile\:opacity-backdrop {
    opacity: var(--bal-opacity-backdrop) !important;
  }
  .mobile\:opacity-full {
    opacity: var(--bal-opacity-full) !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:opacity-hidden {
    opacity: var(--bal-opacity-hidden) !important;
  }
  .tablet\:opacity-half {
    opacity: var(--bal-opacity-half) !important;
  }
  .tablet\:opacity-disabled {
    opacity: var(--bal-opacity-disabled) !important;
  }
  .tablet\:opacity-backdrop {
    opacity: var(--bal-opacity-backdrop) !important;
  }
  .tablet\:opacity-full {
    opacity: var(--bal-opacity-full) !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:opacity-hidden {
    opacity: var(--bal-opacity-hidden) !important;
  }
  .desktop\:opacity-half {
    opacity: var(--bal-opacity-half) !important;
  }
  .desktop\:opacity-disabled {
    opacity: var(--bal-opacity-disabled) !important;
  }
  .desktop\:opacity-backdrop {
    opacity: var(--bal-opacity-backdrop) !important;
  }
  .desktop\:opacity-full {
    opacity: var(--bal-opacity-full) !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:opacity-hidden {
    opacity: var(--bal-opacity-hidden) !important;
  }
  .desktop-xl\:opacity-half {
    opacity: var(--bal-opacity-half) !important;
  }
  .desktop-xl\:opacity-disabled {
    opacity: var(--bal-opacity-disabled) !important;
  }
  .desktop-xl\:opacity-backdrop {
    opacity: var(--bal-opacity-backdrop) !important;
  }
  .desktop-xl\:opacity-full {
    opacity: var(--bal-opacity-full) !important;
  }
}
.shadow-none {
  box-shadow: var(--bal-shadow-box-none) !important;
}

.shadow-header {
  box-shadow: var(--bal-shadow-box-header) !important;
}

.shadow {
  box-shadow: var(--bal-shadow-box-base) !important;
}

.shadow-elevated {
  box-shadow: var(--bal-shadow-box-elevated) !important;
}

.focus\:shadow-none:focus {
  box-shadow: var(--bal-shadow-box-none) !important;
}

.hover\:shadow-none:hover {
  box-shadow: var(--bal-shadow-box-none) !important;
}

.active\:shadow-none:active {
  box-shadow: var(--bal-shadow-box-none) !important;
}

.focus\:shadow-header:focus {
  box-shadow: var(--bal-shadow-box-header) !important;
}

.hover\:shadow-header:hover {
  box-shadow: var(--bal-shadow-box-header) !important;
}

.active\:shadow-header:active {
  box-shadow: var(--bal-shadow-box-header) !important;
}

.focus\:shadow:focus {
  box-shadow: var(--bal-shadow-box-base) !important;
}

.hover\:shadow:hover {
  box-shadow: var(--bal-shadow-box-base) !important;
}

.active\:shadow:active {
  box-shadow: var(--bal-shadow-box-base) !important;
}

.focus\:shadow-elevated:focus {
  box-shadow: var(--bal-shadow-box-elevated) !important;
}

.hover\:shadow-elevated:hover {
  box-shadow: var(--bal-shadow-box-elevated) !important;
}

.active\:shadow-elevated:active {
  box-shadow: var(--bal-shadow-box-elevated) !important;
}

@media screen and (max-width: 768px) {
  .mobile\:shadow-none {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .mobile\:shadow-header {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .mobile\:shadow {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .mobile\:shadow-elevated {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
  .mobile\:focus\:shadow-none:focus {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .mobile\:hover\:shadow-none:hover {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .mobile\:active\:shadow-none:active {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .mobile\:focus\:shadow-header:focus {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .mobile\:hover\:shadow-header:hover {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .mobile\:active\:shadow-header:active {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .mobile\:focus\:shadow:focus {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .mobile\:hover\:shadow:hover {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .mobile\:active\:shadow:active {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .mobile\:focus\:shadow-elevated:focus {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
  .mobile\:hover\:shadow-elevated:hover {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
  .mobile\:active\:shadow-elevated:active {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:shadow-none {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .tablet\:shadow-header {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .tablet\:shadow {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .tablet\:shadow-elevated {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
  .tablet\:focus\:shadow-none:focus {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .tablet\:hover\:shadow-none:hover {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .tablet\:active\:shadow-none:active {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .tablet\:focus\:shadow-header:focus {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .tablet\:hover\:shadow-header:hover {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .tablet\:active\:shadow-header:active {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .tablet\:focus\:shadow:focus {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .tablet\:hover\:shadow:hover {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .tablet\:active\:shadow:active {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .tablet\:focus\:shadow-elevated:focus {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
  .tablet\:hover\:shadow-elevated:hover {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
  .tablet\:active\:shadow-elevated:active {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:shadow-none {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .desktop\:shadow-header {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .desktop\:shadow {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .desktop\:shadow-elevated {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
  .desktop\:focus\:shadow-none:focus {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .desktop\:hover\:shadow-none:hover {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .desktop\:active\:shadow-none:active {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .desktop\:focus\:shadow-header:focus {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .desktop\:hover\:shadow-header:hover {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .desktop\:active\:shadow-header:active {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .desktop\:focus\:shadow:focus {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .desktop\:hover\:shadow:hover {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .desktop\:active\:shadow:active {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .desktop\:focus\:shadow-elevated:focus {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
  .desktop\:hover\:shadow-elevated:hover {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
  .desktop\:active\:shadow-elevated:active {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:shadow-none {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .desktop-xl\:shadow-header {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .desktop-xl\:shadow {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .desktop-xl\:shadow-elevated {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
  .desktop-xl\:focus\:shadow-none:focus {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .desktop-xl\:hover\:shadow-none:hover {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .desktop-xl\:active\:shadow-none:active {
    box-shadow: var(--bal-shadow-box-none) !important;
  }
  .desktop-xl\:focus\:shadow-header:focus {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .desktop-xl\:hover\:shadow-header:hover {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .desktop-xl\:active\:shadow-header:active {
    box-shadow: var(--bal-shadow-box-header) !important;
  }
  .desktop-xl\:focus\:shadow:focus {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .desktop-xl\:hover\:shadow:hover {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .desktop-xl\:active\:shadow:active {
    box-shadow: var(--bal-shadow-box-base) !important;
  }
  .desktop-xl\:focus\:shadow-elevated:focus {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
  .desktop-xl\:hover\:shadow-elevated:hover {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
  .desktop-xl\:active\:shadow-elevated:active {
    box-shadow: var(--bal-shadow-box-elevated) !important;
  }
}
.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-baseline {
  align-content: baseline !important;
}

.align-content-space-between {
  align-content: space-between !important;
}

.align-content-space-around {
  align-content: space-around !important;
}

.align-content-space-evenly {
  align-content: space-evenly !important;
}

@media screen and (max-width: 768px) {
  .mobile\:align-content-start {
    align-content: flex-start !important;
  }
  .mobile\:align-content-end {
    align-content: flex-end !important;
  }
  .mobile\:align-content-center {
    align-content: center !important;
  }
  .mobile\:align-content-baseline {
    align-content: baseline !important;
  }
  .mobile\:align-content-space-between {
    align-content: space-between !important;
  }
  .mobile\:align-content-space-around {
    align-content: space-around !important;
  }
  .mobile\:align-content-space-evenly {
    align-content: space-evenly !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:align-content-start {
    align-content: flex-start !important;
  }
  .tablet\:align-content-end {
    align-content: flex-end !important;
  }
  .tablet\:align-content-center {
    align-content: center !important;
  }
  .tablet\:align-content-baseline {
    align-content: baseline !important;
  }
  .tablet\:align-content-space-between {
    align-content: space-between !important;
  }
  .tablet\:align-content-space-around {
    align-content: space-around !important;
  }
  .tablet\:align-content-space-evenly {
    align-content: space-evenly !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:align-content-start {
    align-content: flex-start !important;
  }
  .desktop\:align-content-end {
    align-content: flex-end !important;
  }
  .desktop\:align-content-center {
    align-content: center !important;
  }
  .desktop\:align-content-baseline {
    align-content: baseline !important;
  }
  .desktop\:align-content-space-between {
    align-content: space-between !important;
  }
  .desktop\:align-content-space-around {
    align-content: space-around !important;
  }
  .desktop\:align-content-space-evenly {
    align-content: space-evenly !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:align-content-start {
    align-content: flex-start !important;
  }
  .desktop-xl\:align-content-end {
    align-content: flex-end !important;
  }
  .desktop-xl\:align-content-center {
    align-content: center !important;
  }
  .desktop-xl\:align-content-baseline {
    align-content: baseline !important;
  }
  .desktop-xl\:align-content-space-between {
    align-content: space-between !important;
  }
  .desktop-xl\:align-content-space-around {
    align-content: space-around !important;
  }
  .desktop-xl\:align-content-space-evenly {
    align-content: space-evenly !important;
  }
}
.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

@media screen and (max-width: 768px) {
  .mobile\:align-items-start {
    align-items: flex-start !important;
  }
  .mobile\:align-items-end {
    align-items: flex-end !important;
  }
  .mobile\:align-items-center {
    align-items: center !important;
  }
  .mobile\:align-items-stretch {
    align-items: stretch !important;
  }
  .mobile\:align-items-baseline {
    align-items: baseline !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:align-items-start {
    align-items: flex-start !important;
  }
  .tablet\:align-items-end {
    align-items: flex-end !important;
  }
  .tablet\:align-items-center {
    align-items: center !important;
  }
  .tablet\:align-items-stretch {
    align-items: stretch !important;
  }
  .tablet\:align-items-baseline {
    align-items: baseline !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:align-items-start {
    align-items: flex-start !important;
  }
  .desktop\:align-items-end {
    align-items: flex-end !important;
  }
  .desktop\:align-items-center {
    align-items: center !important;
  }
  .desktop\:align-items-stretch {
    align-items: stretch !important;
  }
  .desktop\:align-items-baseline {
    align-items: baseline !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:align-items-start {
    align-items: flex-start !important;
  }
  .desktop-xl\:align-items-end {
    align-items: flex-end !important;
  }
  .desktop-xl\:align-items-center {
    align-items: center !important;
  }
  .desktop-xl\:align-items-stretch {
    align-items: stretch !important;
  }
  .desktop-xl\:align-items-baseline {
    align-items: baseline !important;
  }
}
.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

@media screen and (max-width: 768px) {
  .mobile\:align-self-start {
    align-self: flex-start !important;
  }
  .mobile\:align-self-end {
    align-self: flex-end !important;
  }
  .mobile\:align-self-center {
    align-self: center !important;
  }
  .mobile\:align-self-stretch {
    align-self: stretch !important;
  }
  .mobile\:align-self-baseline {
    align-self: baseline !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:align-self-start {
    align-self: flex-start !important;
  }
  .tablet\:align-self-end {
    align-self: flex-end !important;
  }
  .tablet\:align-self-center {
    align-self: center !important;
  }
  .tablet\:align-self-stretch {
    align-self: stretch !important;
  }
  .tablet\:align-self-baseline {
    align-self: baseline !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:align-self-start {
    align-self: flex-start !important;
  }
  .desktop\:align-self-end {
    align-self: flex-end !important;
  }
  .desktop\:align-self-center {
    align-self: center !important;
  }
  .desktop\:align-self-stretch {
    align-self: stretch !important;
  }
  .desktop\:align-self-baseline {
    align-self: baseline !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:align-self-start {
    align-self: flex-start !important;
  }
  .desktop-xl\:align-self-end {
    align-self: flex-end !important;
  }
  .desktop-xl\:align-self-center {
    align-self: center !important;
  }
  .desktop-xl\:align-self-stretch {
    align-self: stretch !important;
  }
  .desktop-xl\:align-self-baseline {
    align-self: baseline !important;
  }
}
.flex-direction-row {
  flex-direction: row !important;
}

.flex-direction-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-direction-column {
  flex-direction: column !important;
}

.flex-direction-column-reverse {
  flex-direction: column-reverse !important;
}

@media screen and (max-width: 768px) {
  .mobile\:flex-direction-row {
    flex-direction: row !important;
  }
  .mobile\:flex-direction-row-reverse {
    flex-direction: row-reverse !important;
  }
  .mobile\:flex-direction-column {
    flex-direction: column !important;
  }
  .mobile\:flex-direction-column-reverse {
    flex-direction: column-reverse !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:flex-direction-row {
    flex-direction: row !important;
  }
  .tablet\:flex-direction-row-reverse {
    flex-direction: row-reverse !important;
  }
  .tablet\:flex-direction-column {
    flex-direction: column !important;
  }
  .tablet\:flex-direction-column-reverse {
    flex-direction: column-reverse !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:flex-direction-row {
    flex-direction: row !important;
  }
  .desktop\:flex-direction-row-reverse {
    flex-direction: row-reverse !important;
  }
  .desktop\:flex-direction-column {
    flex-direction: column !important;
  }
  .desktop\:flex-direction-column-reverse {
    flex-direction: column-reverse !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:flex-direction-row {
    flex-direction: row !important;
  }
  .desktop-xl\:flex-direction-row-reverse {
    flex-direction: row-reverse !important;
  }
  .desktop-xl\:flex-direction-column {
    flex-direction: column !important;
  }
  .desktop-xl\:flex-direction-column-reverse {
    flex-direction: column-reverse !important;
  }
}
.flex-1 {
  flex: 1 1 0% !important;
}

.flex-auto {
  flex: 1 1 auto !important;
}

.flex-initial {
  flex: 0 1 auto !important;
}

.flex-none {
  flex: none !important;
}

@media screen and (max-width: 768px) {
  .mobile\:flex-1 {
    flex: 1 1 0% !important;
  }
  .mobile\:flex-auto {
    flex: 1 1 auto !important;
  }
  .mobile\:flex-initial {
    flex: 0 1 auto !important;
  }
  .mobile\:flex-none {
    flex: none !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:flex-1 {
    flex: 1 1 0% !important;
  }
  .tablet\:flex-auto {
    flex: 1 1 auto !important;
  }
  .tablet\:flex-initial {
    flex: 0 1 auto !important;
  }
  .tablet\:flex-none {
    flex: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:flex-1 {
    flex: 1 1 0% !important;
  }
  .desktop\:flex-auto {
    flex: 1 1 auto !important;
  }
  .desktop\:flex-initial {
    flex: 0 1 auto !important;
  }
  .desktop\:flex-none {
    flex: none !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:flex-1 {
    flex: 1 1 0% !important;
  }
  .desktop-xl\:flex-auto {
    flex: 1 1 auto !important;
  }
  .desktop-xl\:flex-initial {
    flex: 0 1 auto !important;
  }
  .desktop-xl\:flex-none {
    flex: none !important;
  }
}
.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-space-between {
  justify-content: space-between !important;
}

.justify-content-space-around {
  justify-content: space-around !important;
}

.justify-content-space-evenly {
  justify-content: space-evenly !important;
}

@media screen and (max-width: 768px) {
  .mobile\:justify-content-start {
    justify-content: flex-start !important;
  }
  .mobile\:justify-content-end {
    justify-content: flex-end !important;
  }
  .mobile\:justify-content-center {
    justify-content: center !important;
  }
  .mobile\:justify-content-space-between {
    justify-content: space-between !important;
  }
  .mobile\:justify-content-space-around {
    justify-content: space-around !important;
  }
  .mobile\:justify-content-space-evenly {
    justify-content: space-evenly !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:justify-content-start {
    justify-content: flex-start !important;
  }
  .tablet\:justify-content-end {
    justify-content: flex-end !important;
  }
  .tablet\:justify-content-center {
    justify-content: center !important;
  }
  .tablet\:justify-content-space-between {
    justify-content: space-between !important;
  }
  .tablet\:justify-content-space-around {
    justify-content: space-around !important;
  }
  .tablet\:justify-content-space-evenly {
    justify-content: space-evenly !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:justify-content-start {
    justify-content: flex-start !important;
  }
  .desktop\:justify-content-end {
    justify-content: flex-end !important;
  }
  .desktop\:justify-content-center {
    justify-content: center !important;
  }
  .desktop\:justify-content-space-between {
    justify-content: space-between !important;
  }
  .desktop\:justify-content-space-around {
    justify-content: space-around !important;
  }
  .desktop\:justify-content-space-evenly {
    justify-content: space-evenly !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:justify-content-start {
    justify-content: flex-start !important;
  }
  .desktop-xl\:justify-content-end {
    justify-content: flex-end !important;
  }
  .desktop-xl\:justify-content-center {
    justify-content: center !important;
  }
  .desktop-xl\:justify-content-space-between {
    justify-content: space-between !important;
  }
  .desktop-xl\:justify-content-space-around {
    justify-content: space-around !important;
  }
  .desktop-xl\:justify-content-space-evenly {
    justify-content: space-evenly !important;
  }
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

@media screen and (max-width: 768px) {
  .mobile\:flex-nowrap {
    flex-wrap: nowrap !important;
  }
  .mobile\:flex-wrap {
    flex-wrap: wrap !important;
  }
  .mobile\:flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:flex-nowrap {
    flex-wrap: nowrap !important;
  }
  .tablet\:flex-wrap {
    flex-wrap: wrap !important;
  }
  .tablet\:flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:flex-nowrap {
    flex-wrap: nowrap !important;
  }
  .desktop\:flex-wrap {
    flex-wrap: wrap !important;
  }
  .desktop\:flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:flex-nowrap {
    flex-wrap: nowrap !important;
  }
  .desktop-xl\:flex-wrap {
    flex-wrap: wrap !important;
  }
  .desktop-xl\:flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
}
.gap-none {
  gap: 0 !important;
}

.gap-auto {
  gap: auto !important;
}

.gap-none {
  gap: var(--bal-space-none-device) !important;
}

.gap-auto {
  gap: var(--bal-space-auto-device) !important;
}

.gap-2xs, .gap-xx-small {
  gap: var(--bal-space-2xs-device) !important;
}

.gap-xs, .gap-x-small {
  gap: var(--bal-space-xs-device) !important;
}

.gap-sm, .gap-small {
  gap: var(--bal-space-sm-device) !important;
}

.gap-base, .gap-normal {
  gap: var(--bal-space-base-device) !important;
}

.gap-md, .gap-medium {
  gap: var(--bal-space-md-device) !important;
}

.gap-lg, .gap-large {
  gap: var(--bal-space-lg-device) !important;
}

.gap-xl, .gap-x-large {
  gap: var(--bal-space-xl-device) !important;
}

.gap-2xl, .gap-xx-large {
  gap: var(--bal-space-2xl-device) !important;
}

.gap-3xl, .gap-xxx-large {
  gap: var(--bal-space-3xl-device) !important;
}

.gap-4xl, .gap-xxxx-large {
  gap: var(--bal-space-4xl-device) !important;
}

.row-gap-none {
  row-gap: 0 !important;
}

.row-gap-auto {
  row-gap: auto !important;
}

.row-gap-none {
  row-gap: var(--bal-space-none-device) !important;
}

.row-gap-auto {
  row-gap: var(--bal-space-auto-device) !important;
}

.row-gap-2xs, .row-gap-xx-small {
  row-gap: var(--bal-space-2xs-device) !important;
}

.row-gap-xs, .row-gap-x-small {
  row-gap: var(--bal-space-xs-device) !important;
}

.row-gap-sm, .row-gap-small {
  row-gap: var(--bal-space-sm-device) !important;
}

.row-gap-base, .row-gap-normal {
  row-gap: var(--bal-space-base-device) !important;
}

.row-gap-md, .row-gap-medium {
  row-gap: var(--bal-space-md-device) !important;
}

.row-gap-lg, .row-gap-large {
  row-gap: var(--bal-space-lg-device) !important;
}

.row-gap-xl, .row-gap-x-large {
  row-gap: var(--bal-space-xl-device) !important;
}

.row-gap-2xl, .row-gap-xx-large {
  row-gap: var(--bal-space-2xl-device) !important;
}

.row-gap-3xl, .row-gap-xxx-large {
  row-gap: var(--bal-space-3xl-device) !important;
}

.row-gap-4xl, .row-gap-xxxx-large {
  row-gap: var(--bal-space-4xl-device) !important;
}

.column-gap-none {
  -moz-column-gap: 0 !important;
       column-gap: 0 !important;
}

.column-gap-auto {
  -moz-column-gap: auto !important;
       column-gap: auto !important;
}

.column-gap-none {
  -moz-column-gap: var(--bal-space-none-device) !important;
       column-gap: var(--bal-space-none-device) !important;
}

.column-gap-auto {
  -moz-column-gap: var(--bal-space-auto-device) !important;
       column-gap: var(--bal-space-auto-device) !important;
}

.column-gap-2xs, .column-gap-xx-small {
  -moz-column-gap: var(--bal-space-2xs-device) !important;
       column-gap: var(--bal-space-2xs-device) !important;
}

.column-gap-xs, .column-gap-x-small {
  -moz-column-gap: var(--bal-space-xs-device) !important;
       column-gap: var(--bal-space-xs-device) !important;
}

.column-gap-sm, .column-gap-small {
  -moz-column-gap: var(--bal-space-sm-device) !important;
       column-gap: var(--bal-space-sm-device) !important;
}

.column-gap-base, .column-gap-normal {
  -moz-column-gap: var(--bal-space-base-device) !important;
       column-gap: var(--bal-space-base-device) !important;
}

.column-gap-md, .column-gap-medium {
  -moz-column-gap: var(--bal-space-md-device) !important;
       column-gap: var(--bal-space-md-device) !important;
}

.column-gap-lg, .column-gap-large {
  -moz-column-gap: var(--bal-space-lg-device) !important;
       column-gap: var(--bal-space-lg-device) !important;
}

.column-gap-xl, .column-gap-x-large {
  -moz-column-gap: var(--bal-space-xl-device) !important;
       column-gap: var(--bal-space-xl-device) !important;
}

.column-gap-2xl, .column-gap-xx-large {
  -moz-column-gap: var(--bal-space-2xl-device) !important;
       column-gap: var(--bal-space-2xl-device) !important;
}

.column-gap-3xl, .column-gap-xxx-large {
  -moz-column-gap: var(--bal-space-3xl-device) !important;
       column-gap: var(--bal-space-3xl-device) !important;
}

.column-gap-4xl, .column-gap-xxxx-large {
  -moz-column-gap: var(--bal-space-4xl-device) !important;
       column-gap: var(--bal-space-4xl-device) !important;
}

.gap-none {
  gap: 0 !important;
}

.gap-auto {
  gap: auto !important;
}

@media screen and (max-width: 768px) {
  .mobile\:gap-none {
    gap: 0 !important;
  }
  .mobile\:gap-auto {
    gap: auto !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:gap-none {
    gap: 0 !important;
  }
  .tablet\:gap-auto {
    gap: auto !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:gap-none {
    gap: 0 !important;
  }
  .desktop\:gap-auto {
    gap: auto !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:gap-none {
    gap: 0 !important;
  }
  .desktop-xl\:gap-auto {
    gap: auto !important;
  }
}
.row-gap-none {
  row-gap: 0 !important;
}

.row-gap-auto {
  row-gap: auto !important;
}

@media screen and (max-width: 768px) {
  .mobile\:row-gap-none {
    row-gap: 0 !important;
  }
  .mobile\:row-gap-auto {
    row-gap: auto !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:row-gap-none {
    row-gap: 0 !important;
  }
  .tablet\:row-gap-auto {
    row-gap: auto !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:row-gap-none {
    row-gap: 0 !important;
  }
  .desktop\:row-gap-auto {
    row-gap: auto !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:row-gap-none {
    row-gap: 0 !important;
  }
  .desktop-xl\:row-gap-auto {
    row-gap: auto !important;
  }
}
.column-gap-none {
  -moz-column-gap: 0 !important;
       column-gap: 0 !important;
}

.column-gap-auto {
  -moz-column-gap: auto !important;
       column-gap: auto !important;
}

@media screen and (max-width: 768px) {
  .mobile\:column-gap-none {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .mobile\:column-gap-auto {
    -moz-column-gap: auto !important;
         column-gap: auto !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:column-gap-none {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .tablet\:column-gap-auto {
    -moz-column-gap: auto !important;
         column-gap: auto !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:column-gap-none {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .desktop\:column-gap-auto {
    -moz-column-gap: auto !important;
         column-gap: auto !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:column-gap-none {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .desktop-xl\:column-gap-auto {
    -moz-column-gap: auto !important;
         column-gap: auto !important;
  }
}
.select-none {
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

.select-text {
  -webkit-user-select: text !important;
     -moz-user-select: text !important;
          user-select: text !important;
}

.select-all {
  -webkit-user-select: all !important;
     -moz-user-select: all !important;
          user-select: all !important;
}

.select-auto {
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
          user-select: auto !important;
}

.cursor-auto {
  cursor: auto !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-wait {
  cursor: wait !important;
}

.cursor-move {
  cursor: move !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.pointer-events-auto {
  pointer-events: auto !important;
}

.pointer-events-none {
  pointer-events: none !important;
}

.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.inline {
  display: inline !important;
}

.inline-block {
  display: inline-block !important;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

@media screen and (max-width: 768px) {
  .mobile\:hidden {
    display: none !important;
  }
  .mobile\:block {
    display: block !important;
  }
  .mobile\:inline {
    display: inline !important;
  }
  .mobile\:inline-block {
    display: inline-block !important;
  }
  .mobile\:flex {
    display: flex !important;
  }
  .mobile\:inline-flex {
    display: inline-flex !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:hidden {
    display: none !important;
  }
  .tablet\:block {
    display: block !important;
  }
  .tablet\:inline {
    display: inline !important;
  }
  .tablet\:inline-block {
    display: inline-block !important;
  }
  .tablet\:flex {
    display: flex !important;
  }
  .tablet\:inline-flex {
    display: inline-flex !important;
  }
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .tablet-only\:hidden {
    display: none !important;
  }
  .tablet-only\:block {
    display: block !important;
  }
  .tablet-only\:inline {
    display: inline !important;
  }
  .tablet-only\:inline-block {
    display: inline-block !important;
  }
  .tablet-only\:flex {
    display: flex !important;
  }
  .tablet-only\:inline-flex {
    display: inline-flex !important;
  }
}
@media screen and (max-width: 1023px) {
  .touch\:hidden {
    display: none !important;
  }
  .touch\:block {
    display: block !important;
  }
  .touch\:inline {
    display: inline !important;
  }
  .touch\:inline-block {
    display: inline-block !important;
  }
  .touch\:flex {
    display: flex !important;
  }
  .touch\:inline-flex {
    display: inline-flex !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:hidden {
    display: none !important;
  }
  .desktop\:block {
    display: block !important;
  }
  .desktop\:inline {
    display: inline !important;
  }
  .desktop\:inline-block {
    display: inline-block !important;
  }
  .desktop\:flex {
    display: flex !important;
  }
  .desktop\:inline-flex {
    display: inline-flex !important;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .desktop-only\:hidden {
    display: none !important;
  }
  .desktop-only\:block {
    display: block !important;
  }
  .desktop-only\:inline {
    display: inline !important;
  }
  .desktop-only\:inline-block {
    display: inline-block !important;
  }
  .desktop-only\:flex {
    display: flex !important;
  }
  .desktop-only\:inline-flex {
    display: inline-flex !important;
  }
}
@media screen and (min-width: 1280px) {
  .desktop-lg\:hidden {
    display: none !important;
  }
  .desktop-lg\:block {
    display: block !important;
  }
  .desktop-lg\:inline {
    display: inline !important;
  }
  .desktop-lg\:inline-block {
    display: inline-block !important;
  }
  .desktop-lg\:flex {
    display: flex !important;
  }
  .desktop-lg\:inline-flex {
    display: inline-flex !important;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .desktop-lg-only\:hidden {
    display: none !important;
  }
  .desktop-lg-only\:block {
    display: block !important;
  }
  .desktop-lg-only\:inline {
    display: inline !important;
  }
  .desktop-lg-only\:inline-block {
    display: inline-block !important;
  }
  .desktop-lg-only\:flex {
    display: flex !important;
  }
  .desktop-lg-only\:inline-flex {
    display: inline-flex !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:hidden {
    display: none !important;
  }
  .desktop-xl\:block {
    display: block !important;
  }
  .desktop-xl\:inline {
    display: inline !important;
  }
  .desktop-xl\:inline-block {
    display: inline-block !important;
  }
  .desktop-xl\:flex {
    display: flex !important;
  }
  .desktop-xl\:inline-flex {
    display: inline-flex !important;
  }
}
@media screen and (min-width: 1440px) and (max-width: 1919px) {
  .desktop-xl-only\:hidden {
    display: none !important;
  }
  .desktop-xl-only\:block {
    display: block !important;
  }
  .desktop-xl-only\:inline {
    display: inline !important;
  }
  .desktop-xl-only\:inline-block {
    display: inline-block !important;
  }
  .desktop-xl-only\:flex {
    display: flex !important;
  }
  .desktop-xl-only\:inline-flex {
    display: inline-flex !important;
  }
}
@media screen and (min-width: 1920px) {
  .desktop-2xl\:hidden {
    display: none !important;
  }
  .desktop-2xl\:block {
    display: block !important;
  }
  .desktop-2xl\:inline {
    display: inline !important;
  }
  .desktop-2xl\:inline-block {
    display: inline-block !important;
  }
  .desktop-2xl\:flex {
    display: flex !important;
  }
  .desktop-2xl\:inline-flex {
    display: inline-flex !important;
  }
}
.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-x-auto {
  overflow: auto !important;
}

.overflow-x-hidden {
  overflow: hidden !important;
}

.overflow-x-visible {
  overflow: visible !important;
}

.overflow-x-scroll {
  overflow: scroll !important;
}

.overflow-y-auto {
  overflow: auto !important;
}

.overflow-y-hidden {
  overflow: hidden !important;
}

.overflow-y-visible {
  overflow: visible !important;
}

.overflow-y-scroll {
  overflow: scroll !important;
}

@media screen and (max-width: 768px) {
  .mobile\:overflow-auto {
    overflow: auto !important;
  }
  .mobile\:overflow-hidden {
    overflow: hidden !important;
  }
  .mobile\:overflow-visible {
    overflow: visible !important;
  }
  .mobile\:overflow-scroll {
    overflow: scroll !important;
  }
  .mobile\:overflow-x-auto {
    overflow: auto !important;
  }
  .mobile\:overflow-x-hidden {
    overflow: hidden !important;
  }
  .mobile\:overflow-x-visible {
    overflow: visible !important;
  }
  .mobile\:overflow-x-scroll {
    overflow: scroll !important;
  }
  .mobile\:overflow-y-auto {
    overflow: auto !important;
  }
  .mobile\:overflow-y-hidden {
    overflow: hidden !important;
  }
  .mobile\:overflow-y-visible {
    overflow: visible !important;
  }
  .mobile\:overflow-y-scroll {
    overflow: scroll !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:overflow-auto {
    overflow: auto !important;
  }
  .tablet\:overflow-hidden {
    overflow: hidden !important;
  }
  .tablet\:overflow-visible {
    overflow: visible !important;
  }
  .tablet\:overflow-scroll {
    overflow: scroll !important;
  }
  .tablet\:overflow-x-auto {
    overflow: auto !important;
  }
  .tablet\:overflow-x-hidden {
    overflow: hidden !important;
  }
  .tablet\:overflow-x-visible {
    overflow: visible !important;
  }
  .tablet\:overflow-x-scroll {
    overflow: scroll !important;
  }
  .tablet\:overflow-y-auto {
    overflow: auto !important;
  }
  .tablet\:overflow-y-hidden {
    overflow: hidden !important;
  }
  .tablet\:overflow-y-visible {
    overflow: visible !important;
  }
  .tablet\:overflow-y-scroll {
    overflow: scroll !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:overflow-auto {
    overflow: auto !important;
  }
  .desktop\:overflow-hidden {
    overflow: hidden !important;
  }
  .desktop\:overflow-visible {
    overflow: visible !important;
  }
  .desktop\:overflow-scroll {
    overflow: scroll !important;
  }
  .desktop\:overflow-x-auto {
    overflow: auto !important;
  }
  .desktop\:overflow-x-hidden {
    overflow: hidden !important;
  }
  .desktop\:overflow-x-visible {
    overflow: visible !important;
  }
  .desktop\:overflow-x-scroll {
    overflow: scroll !important;
  }
  .desktop\:overflow-y-auto {
    overflow: auto !important;
  }
  .desktop\:overflow-y-hidden {
    overflow: hidden !important;
  }
  .desktop\:overflow-y-visible {
    overflow: visible !important;
  }
  .desktop\:overflow-y-scroll {
    overflow: scroll !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:overflow-auto {
    overflow: auto !important;
  }
  .desktop-xl\:overflow-hidden {
    overflow: hidden !important;
  }
  .desktop-xl\:overflow-visible {
    overflow: visible !important;
  }
  .desktop-xl\:overflow-scroll {
    overflow: scroll !important;
  }
  .desktop-xl\:overflow-x-auto {
    overflow: auto !important;
  }
  .desktop-xl\:overflow-x-hidden {
    overflow: hidden !important;
  }
  .desktop-xl\:overflow-x-visible {
    overflow: visible !important;
  }
  .desktop-xl\:overflow-x-scroll {
    overflow: scroll !important;
  }
  .desktop-xl\:overflow-y-auto {
    overflow: auto !important;
  }
  .desktop-xl\:overflow-y-hidden {
    overflow: hidden !important;
  }
  .desktop-xl\:overflow-y-visible {
    overflow: visible !important;
  }
  .desktop-xl\:overflow-y-scroll {
    overflow: scroll !important;
  }
}
.static {
  position: static !important;
}

.fixed {
  position: fixed !important;
}

.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.sticky {
  position: sticky !important;
}

@media screen and (max-width: 768px) {
  .mobile\:static {
    position: static !important;
  }
  .mobile\:fixed {
    position: fixed !important;
  }
  .mobile\:relative {
    position: relative !important;
  }
  .mobile\:absolute {
    position: absolute !important;
  }
  .mobile\:sticky {
    position: sticky !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:static {
    position: static !important;
  }
  .tablet\:fixed {
    position: fixed !important;
  }
  .tablet\:relative {
    position: relative !important;
  }
  .tablet\:absolute {
    position: absolute !important;
  }
  .tablet\:sticky {
    position: sticky !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:static {
    position: static !important;
  }
  .desktop\:fixed {
    position: fixed !important;
  }
  .desktop\:relative {
    position: relative !important;
  }
  .desktop\:absolute {
    position: absolute !important;
  }
  .desktop\:sticky {
    position: sticky !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:static {
    position: static !important;
  }
  .desktop-xl\:fixed {
    position: fixed !important;
  }
  .desktop-xl\:relative {
    position: relative !important;
  }
  .desktop-xl\:absolute {
    position: absolute !important;
  }
  .desktop-xl\:sticky {
    position: sticky !important;
  }
}
.top-auto {
  top: auto !important;
}

.top-1rem {
  top: 1rem !important;
}

.top-0-5rem {
  top: 0.5rem !important;
}

.top-0-25rem {
  top: 0.25rem !important;
}

.top-0 {
  top: 0 !important;
}

.top-50 {
  top: 50% !important;
}

.top-100 {
  top: 100% !important;
}

@media screen and (max-width: 768px) {
  .mobile\:top-auto {
    top: auto !important;
  }
  .mobile\:top-1rem {
    top: 1rem !important;
  }
  .mobile\:top-0-5rem {
    top: 0.5rem !important;
  }
  .mobile\:top-0-25rem {
    top: 0.25rem !important;
  }
  .mobile\:top-0 {
    top: 0 !important;
  }
  .mobile\:top-50 {
    top: 50% !important;
  }
  .mobile\:top-100 {
    top: 100% !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:top-auto {
    top: auto !important;
  }
  .tablet\:top-1rem {
    top: 1rem !important;
  }
  .tablet\:top-0-5rem {
    top: 0.5rem !important;
  }
  .tablet\:top-0-25rem {
    top: 0.25rem !important;
  }
  .tablet\:top-0 {
    top: 0 !important;
  }
  .tablet\:top-50 {
    top: 50% !important;
  }
  .tablet\:top-100 {
    top: 100% !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:top-auto {
    top: auto !important;
  }
  .desktop\:top-1rem {
    top: 1rem !important;
  }
  .desktop\:top-0-5rem {
    top: 0.5rem !important;
  }
  .desktop\:top-0-25rem {
    top: 0.25rem !important;
  }
  .desktop\:top-0 {
    top: 0 !important;
  }
  .desktop\:top-50 {
    top: 50% !important;
  }
  .desktop\:top-100 {
    top: 100% !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:top-auto {
    top: auto !important;
  }
  .desktop-xl\:top-1rem {
    top: 1rem !important;
  }
  .desktop-xl\:top-0-5rem {
    top: 0.5rem !important;
  }
  .desktop-xl\:top-0-25rem {
    top: 0.25rem !important;
  }
  .desktop-xl\:top-0 {
    top: 0 !important;
  }
  .desktop-xl\:top-50 {
    top: 50% !important;
  }
  .desktop-xl\:top-100 {
    top: 100% !important;
  }
}
.right-auto {
  right: auto !important;
}

.right-1rem {
  right: 1rem !important;
}

.right-0 {
  right: 0 !important;
}

.right-50 {
  right: 50% !important;
}

.right-100 {
  right: 100% !important;
}

@media screen and (max-width: 768px) {
  .mobile\:right-auto {
    right: auto !important;
  }
  .mobile\:right-1rem {
    right: 1rem !important;
  }
  .mobile\:right-0 {
    right: 0 !important;
  }
  .mobile\:right-50 {
    right: 50% !important;
  }
  .mobile\:right-100 {
    right: 100% !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:right-auto {
    right: auto !important;
  }
  .tablet\:right-1rem {
    right: 1rem !important;
  }
  .tablet\:right-0 {
    right: 0 !important;
  }
  .tablet\:right-50 {
    right: 50% !important;
  }
  .tablet\:right-100 {
    right: 100% !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:right-auto {
    right: auto !important;
  }
  .desktop\:right-1rem {
    right: 1rem !important;
  }
  .desktop\:right-0 {
    right: 0 !important;
  }
  .desktop\:right-50 {
    right: 50% !important;
  }
  .desktop\:right-100 {
    right: 100% !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:right-auto {
    right: auto !important;
  }
  .desktop-xl\:right-1rem {
    right: 1rem !important;
  }
  .desktop-xl\:right-0 {
    right: 0 !important;
  }
  .desktop-xl\:right-50 {
    right: 50% !important;
  }
  .desktop-xl\:right-100 {
    right: 100% !important;
  }
}
.bottom-auto {
  bottom: auto !important;
}

.bottom-1rem {
  bottom: 1rem !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.bottom-50 {
  bottom: 50% !important;
}

.bottom-100 {
  bottom: 100% !important;
}

@media screen and (max-width: 768px) {
  .mobile\:bottom-auto {
    bottom: auto !important;
  }
  .mobile\:bottom-1rem {
    bottom: 1rem !important;
  }
  .mobile\:bottom-0 {
    bottom: 0 !important;
  }
  .mobile\:bottom-50 {
    bottom: 50% !important;
  }
  .mobile\:bottom-100 {
    bottom: 100% !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:bottom-auto {
    bottom: auto !important;
  }
  .tablet\:bottom-1rem {
    bottom: 1rem !important;
  }
  .tablet\:bottom-0 {
    bottom: 0 !important;
  }
  .tablet\:bottom-50 {
    bottom: 50% !important;
  }
  .tablet\:bottom-100 {
    bottom: 100% !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:bottom-auto {
    bottom: auto !important;
  }
  .desktop\:bottom-1rem {
    bottom: 1rem !important;
  }
  .desktop\:bottom-0 {
    bottom: 0 !important;
  }
  .desktop\:bottom-50 {
    bottom: 50% !important;
  }
  .desktop\:bottom-100 {
    bottom: 100% !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:bottom-auto {
    bottom: auto !important;
  }
  .desktop-xl\:bottom-1rem {
    bottom: 1rem !important;
  }
  .desktop-xl\:bottom-0 {
    bottom: 0 !important;
  }
  .desktop-xl\:bottom-50 {
    bottom: 50% !important;
  }
  .desktop-xl\:bottom-100 {
    bottom: 100% !important;
  }
}
.left-auto {
  left: auto !important;
}

.left-1rem {
  left: 1rem !important;
}

.left-0 {
  left: 0 !important;
}

.left-50 {
  left: 50% !important;
}

.left-100 {
  left: 100% !important;
}

@media screen and (max-width: 768px) {
  .mobile\:left-auto {
    left: auto !important;
  }
  .mobile\:left-1rem {
    left: 1rem !important;
  }
  .mobile\:left-0 {
    left: 0 !important;
  }
  .mobile\:left-50 {
    left: 50% !important;
  }
  .mobile\:left-100 {
    left: 100% !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:left-auto {
    left: auto !important;
  }
  .tablet\:left-1rem {
    left: 1rem !important;
  }
  .tablet\:left-0 {
    left: 0 !important;
  }
  .tablet\:left-50 {
    left: 50% !important;
  }
  .tablet\:left-100 {
    left: 100% !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:left-auto {
    left: auto !important;
  }
  .desktop\:left-1rem {
    left: 1rem !important;
  }
  .desktop\:left-0 {
    left: 0 !important;
  }
  .desktop\:left-50 {
    left: 50% !important;
  }
  .desktop\:left-100 {
    left: 100% !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:left-auto {
    left: auto !important;
  }
  .desktop-xl\:left-1rem {
    left: 1rem !important;
  }
  .desktop-xl\:left-0 {
    left: 0 !important;
  }
  .desktop-xl\:left-50 {
    left: 50% !important;
  }
  .desktop-xl\:left-100 {
    left: 100% !important;
  }
}
.vertical-align-top {
  vertical-align: top !important;
}

.vertical-align-middle {
  vertical-align: middle !important;
}

.vertical-align-bottom {
  vertical-align: bottom !important;
}

@media screen and (max-width: 768px) {
  .mobile\:vertical-align-top {
    vertical-align: top !important;
  }
  .mobile\:vertical-align-middle {
    vertical-align: middle !important;
  }
  .mobile\:vertical-align-bottom {
    vertical-align: bottom !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:vertical-align-top {
    vertical-align: top !important;
  }
  .tablet\:vertical-align-middle {
    vertical-align: middle !important;
  }
  .tablet\:vertical-align-bottom {
    vertical-align: bottom !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:vertical-align-top {
    vertical-align: top !important;
  }
  .desktop\:vertical-align-middle {
    vertical-align: middle !important;
  }
  .desktop\:vertical-align-bottom {
    vertical-align: bottom !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:vertical-align-top {
    vertical-align: top !important;
  }
  .desktop-xl\:vertical-align-middle {
    vertical-align: middle !important;
  }
  .desktop-xl\:vertical-align-bottom {
    vertical-align: bottom !important;
  }
}
.is-sr-only {
  border: none !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 0.01em !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 0.01em !important;
}

.h-full {
  height: 100% !important;
}

.h-screen {
  height: 100vh !important;
}

.h-auto {
  height: auto !important;
}

.h-min {
  height: -moz-min-content !important;
  height: min-content !important;
}

.h-max {
  height: -moz-max-content !important;
  height: max-content !important;
}

.h-fit {
  height: -moz-fit-content !important;
  height: fit-content !important;
}

.h-1rem {
  height: 1rem !important;
}

.h-2rem {
  height: 2rem !important;
}

.h-3rem {
  height: 3rem !important;
}

.h-4rem {
  height: 4rem !important;
}

.h-5rem {
  height: 5rem !important;
}

.h-6rem {
  height: 6rem !important;
}

.h-7rem {
  height: 7rem !important;
}

.h-8rem {
  height: 8rem !important;
}

.h-9rem {
  height: 9rem !important;
}

.h-10rem {
  height: 10rem !important;
}

.h-11rem {
  height: 11rem !important;
}

.h-12rem {
  height: 12rem !important;
}

.h-13rem {
  height: 13rem !important;
}

.h-14rem {
  height: 14rem !important;
}

.h-15rem {
  height: 15rem !important;
}

.h-16rem {
  height: 16rem !important;
}

.h-17rem {
  height: 17rem !important;
}

.h-18rem {
  height: 18rem !important;
}

.h-19rem {
  height: 19rem !important;
}

.h-20rem {
  height: 20rem !important;
}

.h-21rem {
  height: 21rem !important;
}

.h-22rem {
  height: 22rem !important;
}

.h-23rem {
  height: 23rem !important;
}

.h-24rem {
  height: 24rem !important;
}

.h-25rem {
  height: 25rem !important;
}

.h-26rem {
  height: 26rem !important;
}

.h-27rem {
  height: 27rem !important;
}

.h-28rem {
  height: 28rem !important;
}

.h-29rem {
  height: 29rem !important;
}

.h-30rem {
  height: 30rem !important;
}

@media screen and (max-width: 768px) {
  .mobile\:h-full {
    height: 100% !important;
  }
  .mobile\:h-screen {
    height: 100vh !important;
  }
  .mobile\:h-auto {
    height: auto !important;
  }
  .mobile\:h-min {
    height: -moz-min-content !important;
    height: min-content !important;
  }
  .mobile\:h-max {
    height: -moz-max-content !important;
    height: max-content !important;
  }
  .mobile\:h-fit {
    height: -moz-fit-content !important;
    height: fit-content !important;
  }
  .mobile\:h-1rem {
    height: 1rem !important;
  }
  .mobile\:h-2rem {
    height: 2rem !important;
  }
  .mobile\:h-3rem {
    height: 3rem !important;
  }
  .mobile\:h-4rem {
    height: 4rem !important;
  }
  .mobile\:h-5rem {
    height: 5rem !important;
  }
  .mobile\:h-6rem {
    height: 6rem !important;
  }
  .mobile\:h-7rem {
    height: 7rem !important;
  }
  .mobile\:h-8rem {
    height: 8rem !important;
  }
  .mobile\:h-9rem {
    height: 9rem !important;
  }
  .mobile\:h-10rem {
    height: 10rem !important;
  }
  .mobile\:h-11rem {
    height: 11rem !important;
  }
  .mobile\:h-12rem {
    height: 12rem !important;
  }
  .mobile\:h-13rem {
    height: 13rem !important;
  }
  .mobile\:h-14rem {
    height: 14rem !important;
  }
  .mobile\:h-15rem {
    height: 15rem !important;
  }
  .mobile\:h-16rem {
    height: 16rem !important;
  }
  .mobile\:h-17rem {
    height: 17rem !important;
  }
  .mobile\:h-18rem {
    height: 18rem !important;
  }
  .mobile\:h-19rem {
    height: 19rem !important;
  }
  .mobile\:h-20rem {
    height: 20rem !important;
  }
  .mobile\:h-21rem {
    height: 21rem !important;
  }
  .mobile\:h-22rem {
    height: 22rem !important;
  }
  .mobile\:h-23rem {
    height: 23rem !important;
  }
  .mobile\:h-24rem {
    height: 24rem !important;
  }
  .mobile\:h-25rem {
    height: 25rem !important;
  }
  .mobile\:h-26rem {
    height: 26rem !important;
  }
  .mobile\:h-27rem {
    height: 27rem !important;
  }
  .mobile\:h-28rem {
    height: 28rem !important;
  }
  .mobile\:h-29rem {
    height: 29rem !important;
  }
  .mobile\:h-30rem {
    height: 30rem !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:h-full {
    height: 100% !important;
  }
  .tablet\:h-screen {
    height: 100vh !important;
  }
  .tablet\:h-auto {
    height: auto !important;
  }
  .tablet\:h-min {
    height: -moz-min-content !important;
    height: min-content !important;
  }
  .tablet\:h-max {
    height: -moz-max-content !important;
    height: max-content !important;
  }
  .tablet\:h-fit {
    height: -moz-fit-content !important;
    height: fit-content !important;
  }
  .tablet\:h-1rem {
    height: 1rem !important;
  }
  .tablet\:h-2rem {
    height: 2rem !important;
  }
  .tablet\:h-3rem {
    height: 3rem !important;
  }
  .tablet\:h-4rem {
    height: 4rem !important;
  }
  .tablet\:h-5rem {
    height: 5rem !important;
  }
  .tablet\:h-6rem {
    height: 6rem !important;
  }
  .tablet\:h-7rem {
    height: 7rem !important;
  }
  .tablet\:h-8rem {
    height: 8rem !important;
  }
  .tablet\:h-9rem {
    height: 9rem !important;
  }
  .tablet\:h-10rem {
    height: 10rem !important;
  }
  .tablet\:h-11rem {
    height: 11rem !important;
  }
  .tablet\:h-12rem {
    height: 12rem !important;
  }
  .tablet\:h-13rem {
    height: 13rem !important;
  }
  .tablet\:h-14rem {
    height: 14rem !important;
  }
  .tablet\:h-15rem {
    height: 15rem !important;
  }
  .tablet\:h-16rem {
    height: 16rem !important;
  }
  .tablet\:h-17rem {
    height: 17rem !important;
  }
  .tablet\:h-18rem {
    height: 18rem !important;
  }
  .tablet\:h-19rem {
    height: 19rem !important;
  }
  .tablet\:h-20rem {
    height: 20rem !important;
  }
  .tablet\:h-21rem {
    height: 21rem !important;
  }
  .tablet\:h-22rem {
    height: 22rem !important;
  }
  .tablet\:h-23rem {
    height: 23rem !important;
  }
  .tablet\:h-24rem {
    height: 24rem !important;
  }
  .tablet\:h-25rem {
    height: 25rem !important;
  }
  .tablet\:h-26rem {
    height: 26rem !important;
  }
  .tablet\:h-27rem {
    height: 27rem !important;
  }
  .tablet\:h-28rem {
    height: 28rem !important;
  }
  .tablet\:h-29rem {
    height: 29rem !important;
  }
  .tablet\:h-30rem {
    height: 30rem !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:h-full {
    height: 100% !important;
  }
  .desktop\:h-screen {
    height: 100vh !important;
  }
  .desktop\:h-auto {
    height: auto !important;
  }
  .desktop\:h-min {
    height: -moz-min-content !important;
    height: min-content !important;
  }
  .desktop\:h-max {
    height: -moz-max-content !important;
    height: max-content !important;
  }
  .desktop\:h-fit {
    height: -moz-fit-content !important;
    height: fit-content !important;
  }
  .desktop\:h-1rem {
    height: 1rem !important;
  }
  .desktop\:h-2rem {
    height: 2rem !important;
  }
  .desktop\:h-3rem {
    height: 3rem !important;
  }
  .desktop\:h-4rem {
    height: 4rem !important;
  }
  .desktop\:h-5rem {
    height: 5rem !important;
  }
  .desktop\:h-6rem {
    height: 6rem !important;
  }
  .desktop\:h-7rem {
    height: 7rem !important;
  }
  .desktop\:h-8rem {
    height: 8rem !important;
  }
  .desktop\:h-9rem {
    height: 9rem !important;
  }
  .desktop\:h-10rem {
    height: 10rem !important;
  }
  .desktop\:h-11rem {
    height: 11rem !important;
  }
  .desktop\:h-12rem {
    height: 12rem !important;
  }
  .desktop\:h-13rem {
    height: 13rem !important;
  }
  .desktop\:h-14rem {
    height: 14rem !important;
  }
  .desktop\:h-15rem {
    height: 15rem !important;
  }
  .desktop\:h-16rem {
    height: 16rem !important;
  }
  .desktop\:h-17rem {
    height: 17rem !important;
  }
  .desktop\:h-18rem {
    height: 18rem !important;
  }
  .desktop\:h-19rem {
    height: 19rem !important;
  }
  .desktop\:h-20rem {
    height: 20rem !important;
  }
  .desktop\:h-21rem {
    height: 21rem !important;
  }
  .desktop\:h-22rem {
    height: 22rem !important;
  }
  .desktop\:h-23rem {
    height: 23rem !important;
  }
  .desktop\:h-24rem {
    height: 24rem !important;
  }
  .desktop\:h-25rem {
    height: 25rem !important;
  }
  .desktop\:h-26rem {
    height: 26rem !important;
  }
  .desktop\:h-27rem {
    height: 27rem !important;
  }
  .desktop\:h-28rem {
    height: 28rem !important;
  }
  .desktop\:h-29rem {
    height: 29rem !important;
  }
  .desktop\:h-30rem {
    height: 30rem !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:h-full {
    height: 100% !important;
  }
  .desktop-xl\:h-screen {
    height: 100vh !important;
  }
  .desktop-xl\:h-auto {
    height: auto !important;
  }
  .desktop-xl\:h-min {
    height: -moz-min-content !important;
    height: min-content !important;
  }
  .desktop-xl\:h-max {
    height: -moz-max-content !important;
    height: max-content !important;
  }
  .desktop-xl\:h-fit {
    height: -moz-fit-content !important;
    height: fit-content !important;
  }
  .desktop-xl\:h-1rem {
    height: 1rem !important;
  }
  .desktop-xl\:h-2rem {
    height: 2rem !important;
  }
  .desktop-xl\:h-3rem {
    height: 3rem !important;
  }
  .desktop-xl\:h-4rem {
    height: 4rem !important;
  }
  .desktop-xl\:h-5rem {
    height: 5rem !important;
  }
  .desktop-xl\:h-6rem {
    height: 6rem !important;
  }
  .desktop-xl\:h-7rem {
    height: 7rem !important;
  }
  .desktop-xl\:h-8rem {
    height: 8rem !important;
  }
  .desktop-xl\:h-9rem {
    height: 9rem !important;
  }
  .desktop-xl\:h-10rem {
    height: 10rem !important;
  }
  .desktop-xl\:h-11rem {
    height: 11rem !important;
  }
  .desktop-xl\:h-12rem {
    height: 12rem !important;
  }
  .desktop-xl\:h-13rem {
    height: 13rem !important;
  }
  .desktop-xl\:h-14rem {
    height: 14rem !important;
  }
  .desktop-xl\:h-15rem {
    height: 15rem !important;
  }
  .desktop-xl\:h-16rem {
    height: 16rem !important;
  }
  .desktop-xl\:h-17rem {
    height: 17rem !important;
  }
  .desktop-xl\:h-18rem {
    height: 18rem !important;
  }
  .desktop-xl\:h-19rem {
    height: 19rem !important;
  }
  .desktop-xl\:h-20rem {
    height: 20rem !important;
  }
  .desktop-xl\:h-21rem {
    height: 21rem !important;
  }
  .desktop-xl\:h-22rem {
    height: 22rem !important;
  }
  .desktop-xl\:h-23rem {
    height: 23rem !important;
  }
  .desktop-xl\:h-24rem {
    height: 24rem !important;
  }
  .desktop-xl\:h-25rem {
    height: 25rem !important;
  }
  .desktop-xl\:h-26rem {
    height: 26rem !important;
  }
  .desktop-xl\:h-27rem {
    height: 27rem !important;
  }
  .desktop-xl\:h-28rem {
    height: 28rem !important;
  }
  .desktop-xl\:h-29rem {
    height: 29rem !important;
  }
  .desktop-xl\:h-30rem {
    height: 30rem !important;
  }
}
.w-full {
  width: 100% !important;
}

.w-screen {
  width: 100vw !important;
}

.w-auto {
  width: auto !important;
}

.w-min {
  width: -moz-min-content !important;
  width: min-content !important;
}

.w-max {
  width: -moz-max-content !important;
  width: max-content !important;
}

.w-fit {
  width: -moz-fit-content !important;
  width: fit-content !important;
}

.w-1 {
  width: 8.3333% !important;
}

.w-2 {
  width: 16.6667% !important;
}

.w-3 {
  width: 25% !important;
}

.w-4 {
  width: 33.3333% !important;
}

.w-5 {
  width: 41.6667% !important;
}

.w-6 {
  width: 50% !important;
}

.w-7 {
  width: 58.3333% !important;
}

.w-8 {
  width: 66.6667% !important;
}

.w-9 {
  width: 75% !important;
}

.w-10 {
  width: 83.3333% !important;
}

.w-11 {
  width: 91.6667% !important;
}

.w-12 {
  width: 100% !important;
}

.w-1rem {
  width: 1rem !important;
}

.w-2rem {
  width: 2rem !important;
}

.w-3rem {
  width: 3rem !important;
}

.w-4rem {
  width: 4rem !important;
}

.w-5rem {
  width: 5rem !important;
}

.w-6rem {
  width: 6rem !important;
}

.w-7rem {
  width: 7rem !important;
}

.w-8rem {
  width: 8rem !important;
}

.w-9rem {
  width: 9rem !important;
}

.w-10rem {
  width: 10rem !important;
}

.w-11rem {
  width: 11rem !important;
}

.w-12rem {
  width: 12rem !important;
}

.w-13rem {
  width: 13rem !important;
}

.w-14rem {
  width: 14rem !important;
}

.w-15rem {
  width: 15rem !important;
}

.w-16rem {
  width: 16rem !important;
}

.w-17rem {
  width: 17rem !important;
}

.w-18rem {
  width: 18rem !important;
}

.w-19rem {
  width: 19rem !important;
}

.w-20rem {
  width: 20rem !important;
}

.w-21rem {
  width: 21rem !important;
}

.w-22rem {
  width: 22rem !important;
}

.w-23rem {
  width: 23rem !important;
}

.w-24rem {
  width: 24rem !important;
}

.w-25rem {
  width: 25rem !important;
}

.w-26rem {
  width: 26rem !important;
}

.w-27rem {
  width: 27rem !important;
}

.w-28rem {
  width: 28rem !important;
}

.w-29rem {
  width: 29rem !important;
}

.w-30rem {
  width: 30rem !important;
}

@media screen and (max-width: 768px) {
  .mobile\:w-full {
    width: 100% !important;
  }
  .mobile\:w-screen {
    width: 100vw !important;
  }
  .mobile\:w-auto {
    width: auto !important;
  }
  .mobile\:w-min {
    width: -moz-min-content !important;
    width: min-content !important;
  }
  .mobile\:w-max {
    width: -moz-max-content !important;
    width: max-content !important;
  }
  .mobile\:w-fit {
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
  .mobile\:w-1 {
    width: 8.3333% !important;
  }
  .mobile\:w-2 {
    width: 16.6667% !important;
  }
  .mobile\:w-3 {
    width: 25% !important;
  }
  .mobile\:w-4 {
    width: 33.3333% !important;
  }
  .mobile\:w-5 {
    width: 41.6667% !important;
  }
  .mobile\:w-6 {
    width: 50% !important;
  }
  .mobile\:w-7 {
    width: 58.3333% !important;
  }
  .mobile\:w-8 {
    width: 66.6667% !important;
  }
  .mobile\:w-9 {
    width: 75% !important;
  }
  .mobile\:w-10 {
    width: 83.3333% !important;
  }
  .mobile\:w-11 {
    width: 91.6667% !important;
  }
  .mobile\:w-12 {
    width: 100% !important;
  }
  .mobile\:w-1rem {
    width: 1rem !important;
  }
  .mobile\:w-2rem {
    width: 2rem !important;
  }
  .mobile\:w-3rem {
    width: 3rem !important;
  }
  .mobile\:w-4rem {
    width: 4rem !important;
  }
  .mobile\:w-5rem {
    width: 5rem !important;
  }
  .mobile\:w-6rem {
    width: 6rem !important;
  }
  .mobile\:w-7rem {
    width: 7rem !important;
  }
  .mobile\:w-8rem {
    width: 8rem !important;
  }
  .mobile\:w-9rem {
    width: 9rem !important;
  }
  .mobile\:w-10rem {
    width: 10rem !important;
  }
  .mobile\:w-11rem {
    width: 11rem !important;
  }
  .mobile\:w-12rem {
    width: 12rem !important;
  }
  .mobile\:w-13rem {
    width: 13rem !important;
  }
  .mobile\:w-14rem {
    width: 14rem !important;
  }
  .mobile\:w-15rem {
    width: 15rem !important;
  }
  .mobile\:w-16rem {
    width: 16rem !important;
  }
  .mobile\:w-17rem {
    width: 17rem !important;
  }
  .mobile\:w-18rem {
    width: 18rem !important;
  }
  .mobile\:w-19rem {
    width: 19rem !important;
  }
  .mobile\:w-20rem {
    width: 20rem !important;
  }
  .mobile\:w-21rem {
    width: 21rem !important;
  }
  .mobile\:w-22rem {
    width: 22rem !important;
  }
  .mobile\:w-23rem {
    width: 23rem !important;
  }
  .mobile\:w-24rem {
    width: 24rem !important;
  }
  .mobile\:w-25rem {
    width: 25rem !important;
  }
  .mobile\:w-26rem {
    width: 26rem !important;
  }
  .mobile\:w-27rem {
    width: 27rem !important;
  }
  .mobile\:w-28rem {
    width: 28rem !important;
  }
  .mobile\:w-29rem {
    width: 29rem !important;
  }
  .mobile\:w-30rem {
    width: 30rem !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:w-full {
    width: 100% !important;
  }
  .tablet\:w-screen {
    width: 100vw !important;
  }
  .tablet\:w-auto {
    width: auto !important;
  }
  .tablet\:w-min {
    width: -moz-min-content !important;
    width: min-content !important;
  }
  .tablet\:w-max {
    width: -moz-max-content !important;
    width: max-content !important;
  }
  .tablet\:w-fit {
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
  .tablet\:w-1 {
    width: 8.3333% !important;
  }
  .tablet\:w-2 {
    width: 16.6667% !important;
  }
  .tablet\:w-3 {
    width: 25% !important;
  }
  .tablet\:w-4 {
    width: 33.3333% !important;
  }
  .tablet\:w-5 {
    width: 41.6667% !important;
  }
  .tablet\:w-6 {
    width: 50% !important;
  }
  .tablet\:w-7 {
    width: 58.3333% !important;
  }
  .tablet\:w-8 {
    width: 66.6667% !important;
  }
  .tablet\:w-9 {
    width: 75% !important;
  }
  .tablet\:w-10 {
    width: 83.3333% !important;
  }
  .tablet\:w-11 {
    width: 91.6667% !important;
  }
  .tablet\:w-12 {
    width: 100% !important;
  }
  .tablet\:w-1rem {
    width: 1rem !important;
  }
  .tablet\:w-2rem {
    width: 2rem !important;
  }
  .tablet\:w-3rem {
    width: 3rem !important;
  }
  .tablet\:w-4rem {
    width: 4rem !important;
  }
  .tablet\:w-5rem {
    width: 5rem !important;
  }
  .tablet\:w-6rem {
    width: 6rem !important;
  }
  .tablet\:w-7rem {
    width: 7rem !important;
  }
  .tablet\:w-8rem {
    width: 8rem !important;
  }
  .tablet\:w-9rem {
    width: 9rem !important;
  }
  .tablet\:w-10rem {
    width: 10rem !important;
  }
  .tablet\:w-11rem {
    width: 11rem !important;
  }
  .tablet\:w-12rem {
    width: 12rem !important;
  }
  .tablet\:w-13rem {
    width: 13rem !important;
  }
  .tablet\:w-14rem {
    width: 14rem !important;
  }
  .tablet\:w-15rem {
    width: 15rem !important;
  }
  .tablet\:w-16rem {
    width: 16rem !important;
  }
  .tablet\:w-17rem {
    width: 17rem !important;
  }
  .tablet\:w-18rem {
    width: 18rem !important;
  }
  .tablet\:w-19rem {
    width: 19rem !important;
  }
  .tablet\:w-20rem {
    width: 20rem !important;
  }
  .tablet\:w-21rem {
    width: 21rem !important;
  }
  .tablet\:w-22rem {
    width: 22rem !important;
  }
  .tablet\:w-23rem {
    width: 23rem !important;
  }
  .tablet\:w-24rem {
    width: 24rem !important;
  }
  .tablet\:w-25rem {
    width: 25rem !important;
  }
  .tablet\:w-26rem {
    width: 26rem !important;
  }
  .tablet\:w-27rem {
    width: 27rem !important;
  }
  .tablet\:w-28rem {
    width: 28rem !important;
  }
  .tablet\:w-29rem {
    width: 29rem !important;
  }
  .tablet\:w-30rem {
    width: 30rem !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:w-full {
    width: 100% !important;
  }
  .desktop\:w-screen {
    width: 100vw !important;
  }
  .desktop\:w-auto {
    width: auto !important;
  }
  .desktop\:w-min {
    width: -moz-min-content !important;
    width: min-content !important;
  }
  .desktop\:w-max {
    width: -moz-max-content !important;
    width: max-content !important;
  }
  .desktop\:w-fit {
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
  .desktop\:w-1 {
    width: 8.3333% !important;
  }
  .desktop\:w-2 {
    width: 16.6667% !important;
  }
  .desktop\:w-3 {
    width: 25% !important;
  }
  .desktop\:w-4 {
    width: 33.3333% !important;
  }
  .desktop\:w-5 {
    width: 41.6667% !important;
  }
  .desktop\:w-6 {
    width: 50% !important;
  }
  .desktop\:w-7 {
    width: 58.3333% !important;
  }
  .desktop\:w-8 {
    width: 66.6667% !important;
  }
  .desktop\:w-9 {
    width: 75% !important;
  }
  .desktop\:w-10 {
    width: 83.3333% !important;
  }
  .desktop\:w-11 {
    width: 91.6667% !important;
  }
  .desktop\:w-12 {
    width: 100% !important;
  }
  .desktop\:w-1rem {
    width: 1rem !important;
  }
  .desktop\:w-2rem {
    width: 2rem !important;
  }
  .desktop\:w-3rem {
    width: 3rem !important;
  }
  .desktop\:w-4rem {
    width: 4rem !important;
  }
  .desktop\:w-5rem {
    width: 5rem !important;
  }
  .desktop\:w-6rem {
    width: 6rem !important;
  }
  .desktop\:w-7rem {
    width: 7rem !important;
  }
  .desktop\:w-8rem {
    width: 8rem !important;
  }
  .desktop\:w-9rem {
    width: 9rem !important;
  }
  .desktop\:w-10rem {
    width: 10rem !important;
  }
  .desktop\:w-11rem {
    width: 11rem !important;
  }
  .desktop\:w-12rem {
    width: 12rem !important;
  }
  .desktop\:w-13rem {
    width: 13rem !important;
  }
  .desktop\:w-14rem {
    width: 14rem !important;
  }
  .desktop\:w-15rem {
    width: 15rem !important;
  }
  .desktop\:w-16rem {
    width: 16rem !important;
  }
  .desktop\:w-17rem {
    width: 17rem !important;
  }
  .desktop\:w-18rem {
    width: 18rem !important;
  }
  .desktop\:w-19rem {
    width: 19rem !important;
  }
  .desktop\:w-20rem {
    width: 20rem !important;
  }
  .desktop\:w-21rem {
    width: 21rem !important;
  }
  .desktop\:w-22rem {
    width: 22rem !important;
  }
  .desktop\:w-23rem {
    width: 23rem !important;
  }
  .desktop\:w-24rem {
    width: 24rem !important;
  }
  .desktop\:w-25rem {
    width: 25rem !important;
  }
  .desktop\:w-26rem {
    width: 26rem !important;
  }
  .desktop\:w-27rem {
    width: 27rem !important;
  }
  .desktop\:w-28rem {
    width: 28rem !important;
  }
  .desktop\:w-29rem {
    width: 29rem !important;
  }
  .desktop\:w-30rem {
    width: 30rem !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:w-full {
    width: 100% !important;
  }
  .desktop-xl\:w-screen {
    width: 100vw !important;
  }
  .desktop-xl\:w-auto {
    width: auto !important;
  }
  .desktop-xl\:w-min {
    width: -moz-min-content !important;
    width: min-content !important;
  }
  .desktop-xl\:w-max {
    width: -moz-max-content !important;
    width: max-content !important;
  }
  .desktop-xl\:w-fit {
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
  .desktop-xl\:w-1 {
    width: 8.3333% !important;
  }
  .desktop-xl\:w-2 {
    width: 16.6667% !important;
  }
  .desktop-xl\:w-3 {
    width: 25% !important;
  }
  .desktop-xl\:w-4 {
    width: 33.3333% !important;
  }
  .desktop-xl\:w-5 {
    width: 41.6667% !important;
  }
  .desktop-xl\:w-6 {
    width: 50% !important;
  }
  .desktop-xl\:w-7 {
    width: 58.3333% !important;
  }
  .desktop-xl\:w-8 {
    width: 66.6667% !important;
  }
  .desktop-xl\:w-9 {
    width: 75% !important;
  }
  .desktop-xl\:w-10 {
    width: 83.3333% !important;
  }
  .desktop-xl\:w-11 {
    width: 91.6667% !important;
  }
  .desktop-xl\:w-12 {
    width: 100% !important;
  }
  .desktop-xl\:w-1rem {
    width: 1rem !important;
  }
  .desktop-xl\:w-2rem {
    width: 2rem !important;
  }
  .desktop-xl\:w-3rem {
    width: 3rem !important;
  }
  .desktop-xl\:w-4rem {
    width: 4rem !important;
  }
  .desktop-xl\:w-5rem {
    width: 5rem !important;
  }
  .desktop-xl\:w-6rem {
    width: 6rem !important;
  }
  .desktop-xl\:w-7rem {
    width: 7rem !important;
  }
  .desktop-xl\:w-8rem {
    width: 8rem !important;
  }
  .desktop-xl\:w-9rem {
    width: 9rem !important;
  }
  .desktop-xl\:w-10rem {
    width: 10rem !important;
  }
  .desktop-xl\:w-11rem {
    width: 11rem !important;
  }
  .desktop-xl\:w-12rem {
    width: 12rem !important;
  }
  .desktop-xl\:w-13rem {
    width: 13rem !important;
  }
  .desktop-xl\:w-14rem {
    width: 14rem !important;
  }
  .desktop-xl\:w-15rem {
    width: 15rem !important;
  }
  .desktop-xl\:w-16rem {
    width: 16rem !important;
  }
  .desktop-xl\:w-17rem {
    width: 17rem !important;
  }
  .desktop-xl\:w-18rem {
    width: 18rem !important;
  }
  .desktop-xl\:w-19rem {
    width: 19rem !important;
  }
  .desktop-xl\:w-20rem {
    width: 20rem !important;
  }
  .desktop-xl\:w-21rem {
    width: 21rem !important;
  }
  .desktop-xl\:w-22rem {
    width: 22rem !important;
  }
  .desktop-xl\:w-23rem {
    width: 23rem !important;
  }
  .desktop-xl\:w-24rem {
    width: 24rem !important;
  }
  .desktop-xl\:w-25rem {
    width: 25rem !important;
  }
  .desktop-xl\:w-26rem {
    width: 26rem !important;
  }
  .desktop-xl\:w-27rem {
    width: 27rem !important;
  }
  .desktop-xl\:w-28rem {
    width: 28rem !important;
  }
  .desktop-xl\:w-29rem {
    width: 29rem !important;
  }
  .desktop-xl\:w-30rem {
    width: 30rem !important;
  }
}
.min-h-auto {
  min-height: auto !important;
}

.min-h-0 {
  min-height: 0px !important;
}

.min-h-full {
  min-height: 100% !important;
}

.min-h-screen {
  min-height: 100vh !important;
}

.min-h-min {
  min-height: -moz-min-content !important;
  min-height: min-content !important;
}

.min-h-max {
  min-height: -moz-max-content !important;
  min-height: max-content !important;
}

.min-h-fit {
  min-height: -moz-fit-content !important;
  min-height: fit-content !important;
}

@media screen and (max-width: 768px) {
  .mobile\:min-h-auto {
    min-height: auto !important;
  }
  .mobile\:min-h-0 {
    min-height: 0px !important;
  }
  .mobile\:min-h-full {
    min-height: 100% !important;
  }
  .mobile\:min-h-screen {
    min-height: 100vh !important;
  }
  .mobile\:min-h-min {
    min-height: -moz-min-content !important;
    min-height: min-content !important;
  }
  .mobile\:min-h-max {
    min-height: -moz-max-content !important;
    min-height: max-content !important;
  }
  .mobile\:min-h-fit {
    min-height: -moz-fit-content !important;
    min-height: fit-content !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:min-h-auto {
    min-height: auto !important;
  }
  .tablet\:min-h-0 {
    min-height: 0px !important;
  }
  .tablet\:min-h-full {
    min-height: 100% !important;
  }
  .tablet\:min-h-screen {
    min-height: 100vh !important;
  }
  .tablet\:min-h-min {
    min-height: -moz-min-content !important;
    min-height: min-content !important;
  }
  .tablet\:min-h-max {
    min-height: -moz-max-content !important;
    min-height: max-content !important;
  }
  .tablet\:min-h-fit {
    min-height: -moz-fit-content !important;
    min-height: fit-content !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:min-h-auto {
    min-height: auto !important;
  }
  .desktop\:min-h-0 {
    min-height: 0px !important;
  }
  .desktop\:min-h-full {
    min-height: 100% !important;
  }
  .desktop\:min-h-screen {
    min-height: 100vh !important;
  }
  .desktop\:min-h-min {
    min-height: -moz-min-content !important;
    min-height: min-content !important;
  }
  .desktop\:min-h-max {
    min-height: -moz-max-content !important;
    min-height: max-content !important;
  }
  .desktop\:min-h-fit {
    min-height: -moz-fit-content !important;
    min-height: fit-content !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:min-h-auto {
    min-height: auto !important;
  }
  .desktop-xl\:min-h-0 {
    min-height: 0px !important;
  }
  .desktop-xl\:min-h-full {
    min-height: 100% !important;
  }
  .desktop-xl\:min-h-screen {
    min-height: 100vh !important;
  }
  .desktop-xl\:min-h-min {
    min-height: -moz-min-content !important;
    min-height: min-content !important;
  }
  .desktop-xl\:min-h-max {
    min-height: -moz-max-content !important;
    min-height: max-content !important;
  }
  .desktop-xl\:min-h-fit {
    min-height: -moz-fit-content !important;
    min-height: fit-content !important;
  }
}
.min-w-auto {
  min-width: auto !important;
}

.min-w-0 {
  min-width: 0px !important;
}

.min-w-full {
  min-width: 100% !important;
}

.min-w-screen {
  min-width: 100vw !important;
}

.min-w-min {
  min-width: -moz-min-content !important;
  min-width: min-content !important;
}

.min-w-max {
  min-width: -moz-max-content !important;
  min-width: max-content !important;
}

.min-w-fit {
  min-width: -moz-fit-content !important;
  min-width: fit-content !important;
}

@media screen and (max-width: 768px) {
  .mobile\:min-w-auto {
    min-width: auto !important;
  }
  .mobile\:min-w-0 {
    min-width: 0px !important;
  }
  .mobile\:min-w-full {
    min-width: 100% !important;
  }
  .mobile\:min-w-screen {
    min-width: 100vw !important;
  }
  .mobile\:min-w-min {
    min-width: -moz-min-content !important;
    min-width: min-content !important;
  }
  .mobile\:min-w-max {
    min-width: -moz-max-content !important;
    min-width: max-content !important;
  }
  .mobile\:min-w-fit {
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:min-w-auto {
    min-width: auto !important;
  }
  .tablet\:min-w-0 {
    min-width: 0px !important;
  }
  .tablet\:min-w-full {
    min-width: 100% !important;
  }
  .tablet\:min-w-screen {
    min-width: 100vw !important;
  }
  .tablet\:min-w-min {
    min-width: -moz-min-content !important;
    min-width: min-content !important;
  }
  .tablet\:min-w-max {
    min-width: -moz-max-content !important;
    min-width: max-content !important;
  }
  .tablet\:min-w-fit {
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:min-w-auto {
    min-width: auto !important;
  }
  .desktop\:min-w-0 {
    min-width: 0px !important;
  }
  .desktop\:min-w-full {
    min-width: 100% !important;
  }
  .desktop\:min-w-screen {
    min-width: 100vw !important;
  }
  .desktop\:min-w-min {
    min-width: -moz-min-content !important;
    min-width: min-content !important;
  }
  .desktop\:min-w-max {
    min-width: -moz-max-content !important;
    min-width: max-content !important;
  }
  .desktop\:min-w-fit {
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:min-w-auto {
    min-width: auto !important;
  }
  .desktop-xl\:min-w-0 {
    min-width: 0px !important;
  }
  .desktop-xl\:min-w-full {
    min-width: 100% !important;
  }
  .desktop-xl\:min-w-screen {
    min-width: 100vw !important;
  }
  .desktop-xl\:min-w-min {
    min-width: -moz-min-content !important;
    min-width: min-content !important;
  }
  .desktop-xl\:min-w-max {
    min-width: -moz-max-content !important;
    min-width: max-content !important;
  }
  .desktop-xl\:min-w-fit {
    min-width: -moz-fit-content !important;
    min-width: fit-content !important;
  }
}
.max-h-auto {
  max-height: auto !important;
}

.max-h-0 {
  max-height: 0px !important;
}

.max-h-full {
  max-height: 100% !important;
}

.max-h-screen {
  max-height: 100vh !important;
}

.min-h-min {
  max-height: -moz-min-content !important;
  max-height: min-content !important;
}

.min-h-max {
  max-height: -moz-max-content !important;
  max-height: max-content !important;
}

.min-h-fit {
  max-height: -moz-fit-content !important;
  max-height: fit-content !important;
}

@media screen and (max-width: 768px) {
  .mobile\:max-h-auto {
    max-height: auto !important;
  }
  .mobile\:max-h-0 {
    max-height: 0px !important;
  }
  .mobile\:max-h-full {
    max-height: 100% !important;
  }
  .mobile\:max-h-screen {
    max-height: 100vh !important;
  }
  .mobile\:min-h-min {
    max-height: -moz-min-content !important;
    max-height: min-content !important;
  }
  .mobile\:min-h-max {
    max-height: -moz-max-content !important;
    max-height: max-content !important;
  }
  .mobile\:min-h-fit {
    max-height: -moz-fit-content !important;
    max-height: fit-content !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:max-h-auto {
    max-height: auto !important;
  }
  .tablet\:max-h-0 {
    max-height: 0px !important;
  }
  .tablet\:max-h-full {
    max-height: 100% !important;
  }
  .tablet\:max-h-screen {
    max-height: 100vh !important;
  }
  .tablet\:min-h-min {
    max-height: -moz-min-content !important;
    max-height: min-content !important;
  }
  .tablet\:min-h-max {
    max-height: -moz-max-content !important;
    max-height: max-content !important;
  }
  .tablet\:min-h-fit {
    max-height: -moz-fit-content !important;
    max-height: fit-content !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:max-h-auto {
    max-height: auto !important;
  }
  .desktop\:max-h-0 {
    max-height: 0px !important;
  }
  .desktop\:max-h-full {
    max-height: 100% !important;
  }
  .desktop\:max-h-screen {
    max-height: 100vh !important;
  }
  .desktop\:min-h-min {
    max-height: -moz-min-content !important;
    max-height: min-content !important;
  }
  .desktop\:min-h-max {
    max-height: -moz-max-content !important;
    max-height: max-content !important;
  }
  .desktop\:min-h-fit {
    max-height: -moz-fit-content !important;
    max-height: fit-content !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:max-h-auto {
    max-height: auto !important;
  }
  .desktop-xl\:max-h-0 {
    max-height: 0px !important;
  }
  .desktop-xl\:max-h-full {
    max-height: 100% !important;
  }
  .desktop-xl\:max-h-screen {
    max-height: 100vh !important;
  }
  .desktop-xl\:min-h-min {
    max-height: -moz-min-content !important;
    max-height: min-content !important;
  }
  .desktop-xl\:min-h-max {
    max-height: -moz-max-content !important;
    max-height: max-content !important;
  }
  .desktop-xl\:min-h-fit {
    max-height: -moz-fit-content !important;
    max-height: fit-content !important;
  }
}
.max-w-auto {
  max-width: auto !important;
}

.max-w-0 {
  max-width: 0px !important;
}

.max-w-full {
  max-width: 100% !important;
}

.max-w-screen {
  max-width: 100vw !important;
}

.max-w-min {
  max-width: -moz-min-content !important;
  max-width: min-content !important;
}

.max-w-max {
  max-width: -moz-max-content !important;
  max-width: max-content !important;
}

.max-w-fit {
  max-width: -moz-fit-content !important;
  max-width: fit-content !important;
}

@media screen and (max-width: 768px) {
  .mobile\:max-w-auto {
    max-width: auto !important;
  }
  .mobile\:max-w-0 {
    max-width: 0px !important;
  }
  .mobile\:max-w-full {
    max-width: 100% !important;
  }
  .mobile\:max-w-screen {
    max-width: 100vw !important;
  }
  .mobile\:max-w-min {
    max-width: -moz-min-content !important;
    max-width: min-content !important;
  }
  .mobile\:max-w-max {
    max-width: -moz-max-content !important;
    max-width: max-content !important;
  }
  .mobile\:max-w-fit {
    max-width: -moz-fit-content !important;
    max-width: fit-content !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:max-w-auto {
    max-width: auto !important;
  }
  .tablet\:max-w-0 {
    max-width: 0px !important;
  }
  .tablet\:max-w-full {
    max-width: 100% !important;
  }
  .tablet\:max-w-screen {
    max-width: 100vw !important;
  }
  .tablet\:max-w-min {
    max-width: -moz-min-content !important;
    max-width: min-content !important;
  }
  .tablet\:max-w-max {
    max-width: -moz-max-content !important;
    max-width: max-content !important;
  }
  .tablet\:max-w-fit {
    max-width: -moz-fit-content !important;
    max-width: fit-content !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:max-w-auto {
    max-width: auto !important;
  }
  .desktop\:max-w-0 {
    max-width: 0px !important;
  }
  .desktop\:max-w-full {
    max-width: 100% !important;
  }
  .desktop\:max-w-screen {
    max-width: 100vw !important;
  }
  .desktop\:max-w-min {
    max-width: -moz-min-content !important;
    max-width: min-content !important;
  }
  .desktop\:max-w-max {
    max-width: -moz-max-content !important;
    max-width: max-content !important;
  }
  .desktop\:max-w-fit {
    max-width: -moz-fit-content !important;
    max-width: fit-content !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:max-w-auto {
    max-width: auto !important;
  }
  .desktop-xl\:max-w-0 {
    max-width: 0px !important;
  }
  .desktop-xl\:max-w-full {
    max-width: 100% !important;
  }
  .desktop-xl\:max-w-screen {
    max-width: 100vw !important;
  }
  .desktop-xl\:max-w-min {
    max-width: -moz-min-content !important;
    max-width: min-content !important;
  }
  .desktop-xl\:max-w-max {
    max-width: -moz-max-content !important;
    max-width: max-content !important;
  }
  .desktop-xl\:max-w-fit {
    max-width: -moz-fit-content !important;
    max-width: fit-content !important;
  }
}
.m-none {
  margin: var(--bal-space-none-device) !important;
}

.m-auto {
  margin: var(--bal-space-auto-device) !important;
}

.m-2xs, .m-xx-small {
  margin: var(--bal-space-2xs-device) !important;
}

.m-xs, .m-x-small {
  margin: var(--bal-space-xs-device) !important;
}

.m-sm, .m-small {
  margin: var(--bal-space-sm-device) !important;
}

.m-base, .m-normal {
  margin: var(--bal-space-base-device) !important;
}

.m-md, .m-medium {
  margin: var(--bal-space-md-device) !important;
}

.m-lg, .m-large {
  margin: var(--bal-space-lg-device) !important;
}

.m-xl, .m-x-large {
  margin: var(--bal-space-xl-device) !important;
}

.m-2xl, .m-xx-large {
  margin: var(--bal-space-2xl-device) !important;
}

.m-3xl, .m-xxx-large {
  margin: var(--bal-space-3xl-device) !important;
}

.m-4xl, .m-xxxx-large {
  margin: var(--bal-space-4xl-device) !important;
}

.mx-none {
  margin-left: var(--bal-space-none-device) !important;
  margin-right: var(--bal-space-none-device) !important;
}

.mx-auto {
  margin-left: var(--bal-space-auto-device) !important;
  margin-right: var(--bal-space-auto-device) !important;
}

.mx-2xs, .mx-xx-small {
  margin-left: var(--bal-space-2xs-device) !important;
  margin-right: var(--bal-space-2xs-device) !important;
}

.mx-xs, .mx-x-small {
  margin-left: var(--bal-space-xs-device) !important;
  margin-right: var(--bal-space-xs-device) !important;
}

.mx-sm, .mx-small {
  margin-left: var(--bal-space-sm-device) !important;
  margin-right: var(--bal-space-sm-device) !important;
}

.mx-base, .mx-normal {
  margin-left: var(--bal-space-base-device) !important;
  margin-right: var(--bal-space-base-device) !important;
}

.mx-md, .mx-medium {
  margin-left: var(--bal-space-md-device) !important;
  margin-right: var(--bal-space-md-device) !important;
}

.mx-lg, .mx-large {
  margin-left: var(--bal-space-lg-device) !important;
  margin-right: var(--bal-space-lg-device) !important;
}

.mx-xl, .mx-x-large {
  margin-left: var(--bal-space-xl-device) !important;
  margin-right: var(--bal-space-xl-device) !important;
}

.mx-2xl, .mx-xx-large {
  margin-left: var(--bal-space-2xl-device) !important;
  margin-right: var(--bal-space-2xl-device) !important;
}

.mx-3xl, .mx-xxx-large {
  margin-left: var(--bal-space-3xl-device) !important;
  margin-right: var(--bal-space-3xl-device) !important;
}

.mx-4xl, .mx-xxxx-large {
  margin-left: var(--bal-space-4xl-device) !important;
  margin-right: var(--bal-space-4xl-device) !important;
}

.my-none {
  margin-top: var(--bal-space-none-device) !important;
  margin-bottom: var(--bal-space-none-device) !important;
}

.my-auto {
  margin-top: var(--bal-space-auto-device) !important;
  margin-bottom: var(--bal-space-auto-device) !important;
}

.my-2xs, .my-xx-small {
  margin-top: var(--bal-space-2xs-device) !important;
  margin-bottom: var(--bal-space-2xs-device) !important;
}

.my-xs, .my-x-small {
  margin-top: var(--bal-space-xs-device) !important;
  margin-bottom: var(--bal-space-xs-device) !important;
}

.my-sm, .my-small {
  margin-top: var(--bal-space-sm-device) !important;
  margin-bottom: var(--bal-space-sm-device) !important;
}

.my-base, .my-normal {
  margin-top: var(--bal-space-base-device) !important;
  margin-bottom: var(--bal-space-base-device) !important;
}

.my-md, .my-medium {
  margin-top: var(--bal-space-md-device) !important;
  margin-bottom: var(--bal-space-md-device) !important;
}

.my-lg, .my-large {
  margin-top: var(--bal-space-lg-device) !important;
  margin-bottom: var(--bal-space-lg-device) !important;
}

.my-xl, .my-x-large {
  margin-top: var(--bal-space-xl-device) !important;
  margin-bottom: var(--bal-space-xl-device) !important;
}

.my-2xl, .my-xx-large {
  margin-top: var(--bal-space-2xl-device) !important;
  margin-bottom: var(--bal-space-2xl-device) !important;
}

.my-3xl, .my-xxx-large {
  margin-top: var(--bal-space-3xl-device) !important;
  margin-bottom: var(--bal-space-3xl-device) !important;
}

.my-4xl, .my-xxxx-large {
  margin-top: var(--bal-space-4xl-device) !important;
  margin-bottom: var(--bal-space-4xl-device) !important;
}

.mt-none {
  margin-top: var(--bal-space-none-device) !important;
}

.mt-auto {
  margin-top: var(--bal-space-auto-device) !important;
}

.mt-2xs, .mt-xx-small {
  margin-top: var(--bal-space-2xs-device) !important;
}

.mt-xs, .mt-x-small {
  margin-top: var(--bal-space-xs-device) !important;
}

.mt-sm, .mt-small {
  margin-top: var(--bal-space-sm-device) !important;
}

.mt-base, .mt-normal {
  margin-top: var(--bal-space-base-device) !important;
}

.mt-md, .mt-medium {
  margin-top: var(--bal-space-md-device) !important;
}

.mt-lg, .mt-large {
  margin-top: var(--bal-space-lg-device) !important;
}

.mt-xl, .mt-x-large {
  margin-top: var(--bal-space-xl-device) !important;
}

.mt-2xl, .mt-xx-large {
  margin-top: var(--bal-space-2xl-device) !important;
}

.mt-3xl, .mt-xxx-large {
  margin-top: var(--bal-space-3xl-device) !important;
}

.mt-4xl, .mt-xxxx-large {
  margin-top: var(--bal-space-4xl-device) !important;
}

.mr-none {
  margin-right: var(--bal-space-none-device) !important;
}

.mr-auto {
  margin-right: var(--bal-space-auto-device) !important;
}

.mr-2xs, .mr-xx-small {
  margin-right: var(--bal-space-2xs-device) !important;
}

.mr-xs, .mr-x-small {
  margin-right: var(--bal-space-xs-device) !important;
}

.mr-sm, .mr-small {
  margin-right: var(--bal-space-sm-device) !important;
}

.mr-base, .mr-normal {
  margin-right: var(--bal-space-base-device) !important;
}

.mr-md, .mr-medium {
  margin-right: var(--bal-space-md-device) !important;
}

.mr-lg, .mr-large {
  margin-right: var(--bal-space-lg-device) !important;
}

.mr-xl, .mr-x-large {
  margin-right: var(--bal-space-xl-device) !important;
}

.mr-2xl, .mr-xx-large {
  margin-right: var(--bal-space-2xl-device) !important;
}

.mr-3xl, .mr-xxx-large {
  margin-right: var(--bal-space-3xl-device) !important;
}

.mr-4xl, .mr-xxxx-large {
  margin-right: var(--bal-space-4xl-device) !important;
}

.mb-none {
  margin-bottom: var(--bal-space-none-device) !important;
}

.mb-auto {
  margin-bottom: var(--bal-space-auto-device) !important;
}

.mb-2xs, .mb-xx-small {
  margin-bottom: var(--bal-space-2xs-device) !important;
}

.mb-xs, .mb-x-small {
  margin-bottom: var(--bal-space-xs-device) !important;
}

.mb-sm, .mb-small {
  margin-bottom: var(--bal-space-sm-device) !important;
}

.mb-base, .mb-normal {
  margin-bottom: var(--bal-space-base-device) !important;
}

.mb-md, .mb-medium {
  margin-bottom: var(--bal-space-md-device) !important;
}

.mb-lg, .mb-large {
  margin-bottom: var(--bal-space-lg-device) !important;
}

.mb-xl, .mb-x-large {
  margin-bottom: var(--bal-space-xl-device) !important;
}

.mb-2xl, .mb-xx-large {
  margin-bottom: var(--bal-space-2xl-device) !important;
}

.mb-3xl, .mb-xxx-large {
  margin-bottom: var(--bal-space-3xl-device) !important;
}

.mb-4xl, .mb-xxxx-large {
  margin-bottom: var(--bal-space-4xl-device) !important;
}

.ml-none {
  margin-left: var(--bal-space-none-device) !important;
}

.ml-auto {
  margin-left: var(--bal-space-auto-device) !important;
}

.ml-2xs, .ml-xx-small {
  margin-left: var(--bal-space-2xs-device) !important;
}

.ml-xs, .ml-x-small {
  margin-left: var(--bal-space-xs-device) !important;
}

.ml-sm, .ml-small {
  margin-left: var(--bal-space-sm-device) !important;
}

.ml-base, .ml-normal {
  margin-left: var(--bal-space-base-device) !important;
}

.ml-md, .ml-medium {
  margin-left: var(--bal-space-md-device) !important;
}

.ml-lg, .ml-large {
  margin-left: var(--bal-space-lg-device) !important;
}

.ml-xl, .ml-x-large {
  margin-left: var(--bal-space-xl-device) !important;
}

.ml-2xl, .ml-xx-large {
  margin-left: var(--bal-space-2xl-device) !important;
}

.ml-3xl, .ml-xxx-large {
  margin-left: var(--bal-space-3xl-device) !important;
}

.ml-4xl, .ml-xxxx-large {
  margin-left: var(--bal-space-4xl-device) !important;
}

.p-none {
  padding: var(--bal-space-none-device) !important;
}

.p-auto {
  padding: var(--bal-space-auto-device) !important;
}

.p-2xs, .p-xx-small {
  padding: var(--bal-space-2xs-device) !important;
}

.p-xs, .p-x-small {
  padding: var(--bal-space-xs-device) !important;
}

.p-sm, .p-small {
  padding: var(--bal-space-sm-device) !important;
}

.p-base, .p-normal {
  padding: var(--bal-space-base-device) !important;
}

.p-md, .p-medium {
  padding: var(--bal-space-md-device) !important;
}

.p-lg, .p-large {
  padding: var(--bal-space-lg-device) !important;
}

.p-xl, .p-x-large {
  padding: var(--bal-space-xl-device) !important;
}

.p-2xl, .p-xx-large {
  padding: var(--bal-space-2xl-device) !important;
}

.p-3xl, .p-xxx-large {
  padding: var(--bal-space-3xl-device) !important;
}

.p-4xl, .p-xxxx-large {
  padding: var(--bal-space-4xl-device) !important;
}

.px-none {
  padding-left: var(--bal-space-none-device) !important;
  padding-right: var(--bal-space-none-device) !important;
}

.px-auto {
  padding-left: var(--bal-space-auto-device) !important;
  padding-right: var(--bal-space-auto-device) !important;
}

.px-2xs, .px-xx-small {
  padding-left: var(--bal-space-2xs-device) !important;
  padding-right: var(--bal-space-2xs-device) !important;
}

.px-xs, .px-x-small {
  padding-left: var(--bal-space-xs-device) !important;
  padding-right: var(--bal-space-xs-device) !important;
}

.px-sm, .px-small {
  padding-left: var(--bal-space-sm-device) !important;
  padding-right: var(--bal-space-sm-device) !important;
}

.px-base, .px-normal {
  padding-left: var(--bal-space-base-device) !important;
  padding-right: var(--bal-space-base-device) !important;
}

.px-md, .px-medium {
  padding-left: var(--bal-space-md-device) !important;
  padding-right: var(--bal-space-md-device) !important;
}

.px-lg, .px-large {
  padding-left: var(--bal-space-lg-device) !important;
  padding-right: var(--bal-space-lg-device) !important;
}

.px-xl, .px-x-large {
  padding-left: var(--bal-space-xl-device) !important;
  padding-right: var(--bal-space-xl-device) !important;
}

.px-2xl, .px-xx-large {
  padding-left: var(--bal-space-2xl-device) !important;
  padding-right: var(--bal-space-2xl-device) !important;
}

.px-3xl, .px-xxx-large {
  padding-left: var(--bal-space-3xl-device) !important;
  padding-right: var(--bal-space-3xl-device) !important;
}

.px-4xl, .px-xxxx-large {
  padding-left: var(--bal-space-4xl-device) !important;
  padding-right: var(--bal-space-4xl-device) !important;
}

.py-none {
  padding-top: var(--bal-space-none-device) !important;
  padding-bottom: var(--bal-space-none-device) !important;
}

.py-auto {
  padding-top: var(--bal-space-auto-device) !important;
  padding-bottom: var(--bal-space-auto-device) !important;
}

.py-2xs, .py-xx-small {
  padding-top: var(--bal-space-2xs-device) !important;
  padding-bottom: var(--bal-space-2xs-device) !important;
}

.py-xs, .py-x-small {
  padding-top: var(--bal-space-xs-device) !important;
  padding-bottom: var(--bal-space-xs-device) !important;
}

.py-sm, .py-small {
  padding-top: var(--bal-space-sm-device) !important;
  padding-bottom: var(--bal-space-sm-device) !important;
}

.py-base, .py-normal {
  padding-top: var(--bal-space-base-device) !important;
  padding-bottom: var(--bal-space-base-device) !important;
}

.py-md, .py-medium {
  padding-top: var(--bal-space-md-device) !important;
  padding-bottom: var(--bal-space-md-device) !important;
}

.py-lg, .py-large {
  padding-top: var(--bal-space-lg-device) !important;
  padding-bottom: var(--bal-space-lg-device) !important;
}

.py-xl, .py-x-large {
  padding-top: var(--bal-space-xl-device) !important;
  padding-bottom: var(--bal-space-xl-device) !important;
}

.py-2xl, .py-xx-large {
  padding-top: var(--bal-space-2xl-device) !important;
  padding-bottom: var(--bal-space-2xl-device) !important;
}

.py-3xl, .py-xxx-large {
  padding-top: var(--bal-space-3xl-device) !important;
  padding-bottom: var(--bal-space-3xl-device) !important;
}

.py-4xl, .py-xxxx-large {
  padding-top: var(--bal-space-4xl-device) !important;
  padding-bottom: var(--bal-space-4xl-device) !important;
}

.pt-none {
  padding-top: var(--bal-space-none-device) !important;
}

.pt-auto {
  padding-top: var(--bal-space-auto-device) !important;
}

.pt-2xs, .pt-xx-small {
  padding-top: var(--bal-space-2xs-device) !important;
}

.pt-xs, .pt-x-small {
  padding-top: var(--bal-space-xs-device) !important;
}

.pt-sm, .pt-small {
  padding-top: var(--bal-space-sm-device) !important;
}

.pt-base, .pt-normal {
  padding-top: var(--bal-space-base-device) !important;
}

.pt-md, .pt-medium {
  padding-top: var(--bal-space-md-device) !important;
}

.pt-lg, .pt-large {
  padding-top: var(--bal-space-lg-device) !important;
}

.pt-xl, .pt-x-large {
  padding-top: var(--bal-space-xl-device) !important;
}

.pt-2xl, .pt-xx-large {
  padding-top: var(--bal-space-2xl-device) !important;
}

.pt-3xl, .pt-xxx-large {
  padding-top: var(--bal-space-3xl-device) !important;
}

.pt-4xl, .pt-xxxx-large {
  padding-top: var(--bal-space-4xl-device) !important;
}

.pr-none {
  padding-right: var(--bal-space-none-device) !important;
}

.pr-auto {
  padding-right: var(--bal-space-auto-device) !important;
}

.pr-2xs, .pr-xx-small {
  padding-right: var(--bal-space-2xs-device) !important;
}

.pr-xs, .pr-x-small {
  padding-right: var(--bal-space-xs-device) !important;
}

.pr-sm, .pr-small {
  padding-right: var(--bal-space-sm-device) !important;
}

.pr-base, .pr-normal {
  padding-right: var(--bal-space-base-device) !important;
}

.pr-md, .pr-medium {
  padding-right: var(--bal-space-md-device) !important;
}

.pr-lg, .pr-large {
  padding-right: var(--bal-space-lg-device) !important;
}

.pr-xl, .pr-x-large {
  padding-right: var(--bal-space-xl-device) !important;
}

.pr-2xl, .pr-xx-large {
  padding-right: var(--bal-space-2xl-device) !important;
}

.pr-3xl, .pr-xxx-large {
  padding-right: var(--bal-space-3xl-device) !important;
}

.pr-4xl, .pr-xxxx-large {
  padding-right: var(--bal-space-4xl-device) !important;
}

.pb-none {
  padding-bottom: var(--bal-space-none-device) !important;
}

.pb-auto {
  padding-bottom: var(--bal-space-auto-device) !important;
}

.pb-2xs, .pb-xx-small {
  padding-bottom: var(--bal-space-2xs-device) !important;
}

.pb-xs, .pb-x-small {
  padding-bottom: var(--bal-space-xs-device) !important;
}

.pb-sm, .pb-small {
  padding-bottom: var(--bal-space-sm-device) !important;
}

.pb-base, .pb-normal {
  padding-bottom: var(--bal-space-base-device) !important;
}

.pb-md, .pb-medium {
  padding-bottom: var(--bal-space-md-device) !important;
}

.pb-lg, .pb-large {
  padding-bottom: var(--bal-space-lg-device) !important;
}

.pb-xl, .pb-x-large {
  padding-bottom: var(--bal-space-xl-device) !important;
}

.pb-2xl, .pb-xx-large {
  padding-bottom: var(--bal-space-2xl-device) !important;
}

.pb-3xl, .pb-xxx-large {
  padding-bottom: var(--bal-space-3xl-device) !important;
}

.pb-4xl, .pb-xxxx-large {
  padding-bottom: var(--bal-space-4xl-device) !important;
}

.pl-none {
  padding-left: var(--bal-space-none-device) !important;
}

.pl-auto {
  padding-left: var(--bal-space-auto-device) !important;
}

.pl-2xs, .pl-xx-small {
  padding-left: var(--bal-space-2xs-device) !important;
}

.pl-xs, .pl-x-small {
  padding-left: var(--bal-space-xs-device) !important;
}

.pl-sm, .pl-small {
  padding-left: var(--bal-space-sm-device) !important;
}

.pl-base, .pl-normal {
  padding-left: var(--bal-space-base-device) !important;
}

.pl-md, .pl-medium {
  padding-left: var(--bal-space-md-device) !important;
}

.pl-lg, .pl-large {
  padding-left: var(--bal-space-lg-device) !important;
}

.pl-xl, .pl-x-large {
  padding-left: var(--bal-space-xl-device) !important;
}

.pl-2xl, .pl-xx-large {
  padding-left: var(--bal-space-2xl-device) !important;
}

.pl-3xl, .pl-xxx-large {
  padding-left: var(--bal-space-3xl-device) !important;
}

.pl-4xl, .pl-xxxx-large {
  padding-left: var(--bal-space-4xl-device) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-inverted-primary-hover {
  color: var(--bal-text-color-inverted-primary-hover) !important;
}

.text-inverted-primary-active {
  color: var(--bal-text-color-inverted-primary-active) !important;
}

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

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

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

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

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

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

.focus\:text-primary-light:focus {
  color: var(--bal-text-color-primary-light) !important;
}

.hover\:text-primary-light:hover {
  color: var(--bal-text-color-primary-light) !important;
}

.active\:text-primary-light:active {
  color: var(--bal-text-color-primary-light) !important;
}

.focus\:text-hint:focus {
  color: var(--bal-text-color-hint) !important;
}

.hover\:text-hint:hover {
  color: var(--bal-text-color-hint) !important;
}

.active\:text-hint:active {
  color: var(--bal-text-color-hint) !important;
}

.focus\:text-disabled:focus {
  color: var(--bal-text-color-disabled) !important;
}

.hover\:text-disabled:hover {
  color: var(--bal-text-color-disabled) !important;
}

.active\:text-disabled:active {
  color: var(--bal-text-color-disabled) !important;
}

.focus\:text-inverted-disabled:focus {
  color: var(--bal-text-color-inverted-disabled) !important;
}

.hover\:text-inverted-disabled:hover {
  color: var(--bal-text-color-inverted-disabled) !important;
}

.active\:text-inverted-disabled:active {
  color: var(--bal-text-color-inverted-disabled) !important;
}

.focus\:text-info:focus {
  color: var(--bal-text-color-info) !important;
}

.hover\:text-info:hover {
  color: var(--bal-text-color-info) !important;
}

.active\:text-info:active {
  color: var(--bal-text-color-info) !important;
}

.focus\:text-warning:focus {
  color: var(--bal-text-color-warning) !important;
}

.hover\:text-warning:hover {
  color: var(--bal-text-color-warning) !important;
}

.active\:text-warning:active {
  color: var(--bal-text-color-warning) !important;
}

.focus\:text-success:focus {
  color: var(--bal-text-color-success) !important;
}

.hover\:text-success:hover {
  color: var(--bal-text-color-success) !important;
}

.active\:text-success:active {
  color: var(--bal-text-color-success) !important;
}

.focus\:text-danger:focus {
  color: var(--bal-text-color-danger) !important;
}

.hover\:text-danger:hover {
  color: var(--bal-text-color-danger) !important;
}

.active\:text-danger:active {
  color: var(--bal-text-color-danger) !important;
}

.focus\:text-danger-hover:focus {
  color: var(--bal-text-color-danger-hover) !important;
}

.hover\:text-danger-hover:hover {
  color: var(--bal-text-color-danger-hover) !important;
}

.active\:text-danger-hover:active {
  color: var(--bal-text-color-danger-hover) !important;
}

.focus\:text-danger-active:focus {
  color: var(--bal-text-color-danger-active) !important;
}

.hover\:text-danger-active:hover {
  color: var(--bal-text-color-danger-active) !important;
}

.active\:text-danger-active:active {
  color: var(--bal-text-color-danger-active) !important;
}

.focus\:text-primary:focus {
  color: var(--bal-text-color-primary) !important;
}

.hover\:text-primary:hover {
  color: var(--bal-text-color-primary) !important;
}

.active\:text-primary:active {
  color: var(--bal-text-color-primary) !important;
}

.focus\:text-primary-hover:focus {
  color: var(--bal-text-color-primary-hover) !important;
}

.hover\:text-primary-hover:hover {
  color: var(--bal-text-color-primary-hover) !important;
}

.active\:text-primary-hover:active {
  color: var(--bal-text-color-primary-hover) !important;
}

.focus\:text-primary-active:focus {
  color: var(--bal-text-color-primary-active) !important;
}

.hover\:text-primary-active:hover {
  color: var(--bal-text-color-primary-active) !important;
}

.active\:text-primary-active:active {
  color: var(--bal-text-color-primary-active) !important;
}

.focus\:text-inverted-primary:focus {
  color: var(--bal-text-color-inverted-primary) !important;
}

.hover\:text-inverted-primary:hover {
  color: var(--bal-text-color-inverted-primary) !important;
}

.active\:text-inverted-primary:active {
  color: var(--bal-text-color-inverted-primary) !important;
}

.focus\:text-inverted-primary-hover:focus {
  color: var(--bal-text-color-inverted-primary-hover) !important;
}

.hover\:text-inverted-primary-hover:hover {
  color: var(--bal-text-color-inverted-primary-hover) !important;
}

.active\:text-inverted-primary-hover:active {
  color: var(--bal-text-color-inverted-primary-hover) !important;
}

.focus\:text-inverted-primary-active:focus {
  color: var(--bal-text-color-inverted-primary-active) !important;
}

.hover\:text-inverted-primary-active:hover {
  color: var(--bal-text-color-inverted-primary-active) !important;
}

.active\:text-inverted-primary-active:active {
  color: var(--bal-text-color-inverted-primary-active) !important;
}

.focus\:text-grey-light:focus {
  color: var(--bal-text-color-grey-light) !important;
}

.hover\:text-grey-light:hover {
  color: var(--bal-text-color-grey-light) !important;
}

.active\:text-grey-light:active {
  color: var(--bal-text-color-grey-light) !important;
}

.focus\:text-grey:focus {
  color: var(--bal-text-color-grey) !important;
}

.hover\:text-grey:hover {
  color: var(--bal-text-color-grey) !important;
}

.active\:text-grey:active {
  color: var(--bal-text-color-grey) !important;
}

.focus\:text-grey-dark:focus {
  color: var(--bal-text-color-grey-dark) !important;
}

.hover\:text-grey-dark:hover {
  color: var(--bal-text-color-grey-dark) !important;
}

.active\:text-grey-dark:active {
  color: var(--bal-text-color-grey-dark) !important;
}

.font-family-heading {
  font-family: var(--bal-text-family-heading) !important;
}

.font-family-body {
  font-family: var(--bal-text-family-body) !important;
}

.line-height-single {
  line-height: var(--bal-text-line-height-single) !important;
}

.line-height-heading {
  line-height: var(--bal-text-line-height-heading) !important;
}

.line-height-body {
  line-height: var(--bal-text-line-height-body) !important;
}

.line-height-double {
  line-height: var(--bal-text-line-height-double) !important;
}

.text-none {
  font-size: var(--bal-text-size-none-device) !important;
}

.text-xs, .text-x-small {
  font-size: var(--bal-text-size-xs-device) !important;
}

.text-sm, .text-small {
  font-size: var(--bal-text-size-sm-device) !important;
}

.text-base, .text-normal {
  font-size: var(--bal-text-size-base-device) !important;
}

.text-md, .text-medium {
  font-size: var(--bal-text-size-md-device) !important;
}

.text-lg, .text-large {
  font-size: var(--bal-text-size-lg-device) !important;
}

.text-xl, .text-x-large {
  font-size: var(--bal-text-size-xl-device) !important;
}

.text-2xl, .text-xx-large {
  font-size: var(--bal-text-size-2xl-device) !important;
}

.text-3xl, .text-xxx-large {
  font-size: var(--bal-text-size-3xl-device) !important;
}

.text-4xl, .text-xxxx-large {
  font-size: var(--bal-text-size-4xl-device) !important;
}

.text-5xl, .text-xxxxx-large {
  font-size: var(--bal-text-size-5xl-device) !important;
}

.text-align-center {
  text-align: center !important;
}

.text-align-left {
  text-align: left !important;
}

.text-align-right {
  text-align: right !important;
}

.text-align-justify {
  text-align: justify !important;
}

@media screen and (max-width: 768px) {
  .mobile\:text-align-center {
    text-align: center !important;
  }
  .mobile\:text-align-left {
    text-align: left !important;
  }
  .mobile\:text-align-right {
    text-align: right !important;
  }
  .mobile\:text-align-justify {
    text-align: justify !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:text-align-center {
    text-align: center !important;
  }
  .tablet\:text-align-left {
    text-align: left !important;
  }
  .tablet\:text-align-right {
    text-align: right !important;
  }
  .tablet\:text-align-justify {
    text-align: justify !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:text-align-center {
    text-align: center !important;
  }
  .desktop\:text-align-left {
    text-align: left !important;
  }
  .desktop\:text-align-right {
    text-align: right !important;
  }
  .desktop\:text-align-justify {
    text-align: justify !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:text-align-center {
    text-align: center !important;
  }
  .desktop-xl\:text-align-left {
    text-align: left !important;
  }
  .desktop-xl\:text-align-right {
    text-align: right !important;
  }
  .desktop-xl\:text-align-justify {
    text-align: justify !important;
  }
}
.lowercase {
  text-transform: lowercase !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.capitalize {
  text-transform: capitalize !important;
}

.font-weight-light {
  font-weight: var(--bal-text-weight-light) !important;
}

.font-weight-regular {
  font-weight: var(--bal-text-weight-regular) !important;
}

.font-weight-bold {
  font-weight: var(--bal-text-weight-bold) !important;
}

.white-space-normal {
  white-space: normal !important;
}

.white-space-nowrap {
  white-space: nowrap !important;
}

.line-height-single {
  line-height: var(--bal-text-line-height-single) !important;
}

.line-height-heading {
  line-height: var(--bal-text-line-height-heading) !important;
}

.line-height-body {
  line-height: var(--bal-text-line-height-body) !important;
}

.line-height-double {
  line-height: var(--bal-text-line-height-double) !important;
}

.text-overflow-clip {
  text-overflow: clip !important;
}

.text-overflow-ellipsis {
  text-overflow: ellipsis !important;
}

@media screen and (max-width: 768px) {
  .mobile\:text-overflow-clip {
    text-overflow: clip !important;
  }
  .mobile\:text-overflow-ellipsis {
    text-overflow: ellipsis !important;
  }
}
@media screen and (min-width: 769px) {
  .tablet\:text-overflow-clip {
    text-overflow: clip !important;
  }
  .tablet\:text-overflow-ellipsis {
    text-overflow: ellipsis !important;
  }
}
@media screen and (min-width: 1024px) {
  .desktop\:text-overflow-clip {
    text-overflow: clip !important;
  }
  .desktop\:text-overflow-ellipsis {
    text-overflow: ellipsis !important;
  }
}
@media screen and (min-width: 1440px) {
  .desktop-xl\:text-overflow-clip {
    text-overflow: clip !important;
  }
  .desktop-xl\:text-overflow-ellipsis {
    text-overflow: ellipsis !important;
  }
}
.text-5xl:not(:last-child),
.text-xxxxx-large:not(:last-child) {
  margin-bottom: var(--bal-space-base-device);
}

.text-4xl:not(:last-child),
.text-xxxx-large:not(:last-child) {
  margin-bottom: var(--bal-space-xs-device);
}

.text-3xl:not(:last-child),
.text-xxx-large:not(:last-child) {
  margin-bottom: var(--bal-space-xs-device);
}

.text-2xl:not(:last-child),
.text-xx-large:not(:last-child) {
  margin-bottom: var(--bal-space-xs-device);
}

.text-xl:not(:last-child),
.text-x-large:not(:last-child) {
  margin-bottom: var(--bal-space-xs-device);
}

.text-lg:not(:last-child),
.text-large:not(:last-child) {
  margin-bottom: var(--bal-space-xs-device);
}

.text-md:not(:last-child),
.text-medium:not(:last-child) {
  margin-bottom: var(--bal-space-xs-device);
}

.text-base:not(:last-child),
.text-normal:not(:last-child) {
  margin-bottom: var(--bal-space-2xs-device);
}

.text-sm:not(:last-child),
.text-small:not(:last-child) {
  margin-bottom: var(--bal-space-2xs-device);
}

.text-xs:not(:last-child),
.text-x-small:not(:last-child) {
  margin-bottom: var(--bal-space-2xs-device);
}
/*# sourceMappingURL=baloise-design-system.local.css.map */