/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --bal-animation-transition-duration: 300ms;
  --bal-animation-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1);
  --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-color-white: #ffffff;
  --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-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-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-black: #000000;
  --bal-color-light-blue-1: #e5f1fe;
  --bal-color-light-blue-2: #a7d1fa;
  --bal-color-light-blue-3: #56a7f5;
  --bal-color-light-blue-4: #6672cc;
  --bal-color-light-blue-5: #0014aa;
  --bal-color-light-blue-6: #000a55;
  --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-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-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-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-border-width-small: 0.0625rem; /** The small border size is crafted for subtle, refined delineation. */
  --bal-border-width-normal: 0.125rem; /** The normal border size strikes a harmonious balance, offering a versatile choice for defining boundaries within your design. */
  --bal-border-width-large: 0.25rem; /** The large border size makes a bold statement, creating strong visual contrasts and emphasizing key elements within your interface. */
  --bal-breakpoint-tablet: 769px; /** Tailored for tablet devices, this breakpoint ensures a seamless and optimized user experience on medium-sized screens. */
  --bal-breakpoint-desktop: 1024px; /** Optimized for desktop screens, this breakpoint provides a spacious canvas for your design, allowing for more intricate layouts and detailed content presentation. */
  --bal-breakpoint-high-definition: 1280px; /** Designed for high-definition displays, this breakpoint elevates your interface to a level of visual richness and clarity. */
  --bal-breakpoint-widescreen: 1440px; /** Tailored for widescreen monitors, this breakpoint offers a panoramic view that accommodates expansive content layouts. */
  --bal-breakpoint-fullhd: 1920px; /** Crafted for Full HD displays, this breakpoint strikes a balance between detail and performance. */
  --bal-container-size-detail-page: 744px; /** Deprecated container size for the website */
  --bal-container-size-compact: 896px; /** Tailored container size designed for form wizard applications or pages. */
  --bal-container-size-normal: 1496px; /** The default container size is versatile and suitable for various applications and website pages. */
  --bal-container-size-fluid: 100%; /** The container for fullscreen application with a large table for example. */
  --bal-opacity-0: 0;
  --bal-opacity-30: 0.3;
  --bal-opacity-40: 0.4;
  --bal-opacity-50: 0.5;
  --bal-opacity-60: 0.6;
  --bal-opacity-80: 0.8;
  --bal-opacity-100: 1;
  --bal-radius-normal: 0.25rem; /** The normal radius token strikes a balance between softness and structure. */
  --bal-radius-large: 0.75rem; /** The large radius token makes a bold visual statement by significantly rounding the corners of elements. */
  --bal-radius-rounded: 9999px; /** The rounded radius token embraces a curvier design language, introducing a high degree of softness and fluidity to your elements. */
  --bal-space-xx-small: 0.25rem; /** Minimum space between two elements */
  --bal-space-x-small: 0.5rem; /** Space between text and icons or headings and content or clickable elements */
  --bal-space-small: 0.75rem;
  --bal-space-normal: 1rem; /** Space between large headings and content. */
  --bal-space-medium: 1.25rem; /** Inner padding of cards */
  --bal-space-medium-desktop: 1.5rem;
  --bal-space-large: 1.5rem; /** Space between cards */
  --bal-space-large-desktop: 2rem;
  --bal-space-x-large: 2rem; /** Space between heading and card */
  --bal-space-x-large-tablet: 2.5rem;
  --bal-space-x-large-desktop: 3rem;
  --bal-space-xx-large: 3rem;
  --bal-space-xx-large-tablet: 3.5rem;
  --bal-space-xx-large-desktop: 4rem;
  --bal-space-xxx-large: 3.5rem; /** Footer bottom padding */
  --bal-space-xxx-large-tablet: 4.5rem;
  --bal-space-xxx-large-desktop: 6rem;
  --bal-space-xxxx-large: 4rem; /** Space between sections */
  --bal-space-xxxx-large-tablet: 6rem;
  --bal-space-xxxx-large-desktop: 8rem;
  --bal-font-weight-bold: 700; /** Bold is used for headings, links and buttons. */
  --bal-font-weight-regular: 400; /** Default width of paragraphs. Only available with the font BaloiseCreateText. */
  --bal-font-weight-light: 300; /** Can be used for secondary headings. Only available with the font BaloiseCreateHeadline. */
  --bal-font-family-title: BaloiseCreateHeadline, Arial, sans-serif;
  --bal-font-family-text: BaloiseCreateText, Arial, sans-serif;
  --bal-text-size-x-small: 0.75rem; /** Should only be used for helper texts or validation messages of a form control. */
  --bal-text-size-small: 0.875rem; /** Should only be used for label texts. */
  --bal-text-size-normal: 1rem; /** Should only be used for label texts. */
  --bal-text-size-medium: 1rem; /** Should only be used in a 2/3 grid column to improve readability. */
  --bal-text-size-medium-tablet: 1.125rem;
  --bal-text-size-large: 1.125rem; /** Should only be used for standard card titles and headings of level 4 or for lead text/paragraphs after a heading. */
  --bal-text-size-large-tablet: 1.25rem;
  --bal-text-size-x-large: 1.25rem; /** Should only be used for form titles, quick link navigation's and headings of level 3. */
  --bal-text-size-x-large-tablet: 1.5rem;
  --bal-text-size-xx-large: 1.5rem; /** Should only be used for content titles and headings of level 2. */
  --bal-text-size-xx-large-tablet: 2rem;
  --bal-text-size-xxx-large: 1.75rem; /** Should only be used for stage titles and headings of level 1. */
  --bal-text-size-xxx-large-tablet: 2.5rem;
  --bal-text-size-xxxx-large: 2rem; /** Should only be uses to illustrate large stage areas. */
  --bal-text-size-xxxx-large-tablet: 3rem;
  --bal-text-size-xxxxx-large: 3rem; /** Should only be uses to illustrate large stage areas. */
  --bal-text-size-xxxxx-large-tablet: 5rem;
  --bal-text-line-height-title: 1.3; /** Standard line-height for the headings. */
  --bal-text-line-height-text: 1.5; /** Default line height for all text elements. */
  --bal-text-shadow-normal: 0 0 4px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 80px rgba(0, 0, 0, 0.5); /** Increases readability when used on a image background. */
  --bal-z-index-deep: -999999; /** Deep z-index is used to stack something behind everything else. */
  --bal-z-index: 1; /** The default z-index for components and elements inside components. */
  --bal-z-index-masked: 100; /** Default z-index for masked interface elements. */
  --bal-z-index-mask: 200; /** Default z-index for masking interface elements. */
  --bal-z-index-sticky: 300; /** Default z-index for sticky interface elements. */
  --bal-z-index-navigation: 400; /** Default z-index for navigation. */
  --bal-z-index-popup: 1000; /** Default z-index for popups that stacks on top of all other elements. */
  --bal-z-index-modal: 1100; /** Default z-index for modals that stacks on top of overlays and other elements, but still allows popups to be visible. */
  --bal-z-index-toast: 1200; /** Default z-index for toast and snackbar messages. */
  --bal-z-index-tooltip: 1300; /** Default z-index for tooltips. */
  --bal-shadow-small: 0 2px 5px 1px rgba(0, 7, 57, 0.15);
  --bal-shadow-normal: 0 0 10px 0 rgba(0, 7, 57, 0.15); /** Default shadow size to elevate an element. */
  --bal-shadow-large: 0 0 30px 0 rgba(0, 7, 57, 0.15); /** Large shadow are used for hover effects. */
  --bal-shadow-header: 0 4px 4px 0 rgba(0, 7, 57, 0.15); /** Shadow effect for a header bar */
  --bal-color-background-primary: var(--bal-color-primary-5); /** Blue is our accent color and it is present on every touchpoint. Our logo, text, buttons and links are blue. */
  --bal-color-background-green-light: var(--bal-color-green-1); /** Default brand background color to use */
  --bal-color-background-green: var(--bal-color-green-3); /** Use this background for call to action sections */
  --bal-color-background-purple-light: var(--bal-color-purple-1); /** Default brand background color to use */
  --bal-color-background-purple: var(--bal-color-purple-3); /** Use this background for call to action sections */
  --bal-color-background-yellow-light: var(--bal-color-yellow-1); /** Default brand background color to use */
  --bal-color-background-yellow: var(--bal-color-yellow-3); /** Use this background for call to action sections */
  --bal-color-background-red-light: var(--bal-color-red-1); /** Default brand background color to use */
  --bal-color-background-red: var(--bal-color-red-3); /** Use this background for call to action sections */
  --bal-color-background-white: var(--bal-color-white);
  --bal-color-background-grey-light: var(--bal-color-grey-2);
  --bal-color-background-grey: var(--bal-color-grey-3);
  --bal-color-background-disabled: var(--bal-color-grey-3);
  --bal-color-background-info: var(--bal-color-info-3);
  --bal-color-background-success: var(--bal-color-success-3);
  --bal-color-background-warning: var(--bal-color-warning-3);
  --bal-color-background-danger: var(--bal-color-danger-3);
  --bal-color-border: var(--bal-color-grey-3); /** Default border color */
  --bal-color-border-primary: var(--bal-color-primary-5); /** Use for focused or selected state. */
  --bal-color-border-primary-light: var(--bal-color-primary-3); /** Disabled or secondary color on dark backgrounds */
  --bal-color-border-grey-light: var(--bal-color-grey-2); /** Default input color or can be use for a divider */
  --bal-color-border-grey: var(--bal-color-grey-3); /** Default border color */
  --bal-color-border-grey-dark: var(--bal-color-grey-4); /** Use for disabled state. */
  --bal-color-border-white: var(--bal-color-white); /** Default color on dark backgrounds. */
  --bal-color-border-info: var(--bal-color-info-4);
  --bal-color-border-success: var(--bal-color-success-4); /** Use for valid state. */
  --bal-color-border-warning: var(--bal-color-warning-5); /** Use for warning/hint state. */
  --bal-color-border-danger: var(--bal-color-danger-4); /** Use for invalid state. */
  --bal-color-border-info-hovered: var(--bal-color-info-5);
  --bal-color-border-info-pressed: var(--bal-color-info-6);
  --bal-color-border-primary-hovered: var(--bal-color-light-blue-5);
  --bal-color-border-primary-pressed: var(--bal-color-primary-6);
  --bal-color-border-success-hovered: var(--bal-color-success-5);
  --bal-color-border-success-pressed: var(--bal-color-success-6);
  --bal-color-border-warning-hovered: var(--bal-color-warning-5);
  --bal-color-border-warning-pressed: var(--bal-color-warning-6);
  --bal-color-border-danger-hovered: var(--bal-color-danger-5);
  --bal-color-border-danger-pressed: var(--bal-color-danger-6);
  --bal-color-border-green-hovered: var(--bal-color-green-5);
  --bal-color-border-green-pressed: var(--bal-color-green-6);
  --bal-color-border-purple-hovered: var(--bal-color-purple-5);
  --bal-color-border-purple-pressed: var(--bal-color-purple-6);
  --bal-color-border-red-hovered: var(--bal-color-red-5);
  --bal-color-border-red-pressed: var(--bal-color-red-6);
  --bal-color-border-yellow-hovered: var(--bal-color-yellow-5);
  --bal-color-border-yellow-pressed: var(--bal-color-yellow-6);
  --bal-color-border-inverted: var(--bal-color-white); /** Default color on dark backgrounds. */
  --bal-color-border-inverted-disabled: var(--bal-color-primary-3); /** Disabled. */
  --bal-color-border-inverted-primary: var(--bal-color-primary-4);
  --bal-color-border-inverted-primary-hovered: var(--bal-color-light-blue-2);
  --bal-color-border-inverted-primary-pressed: var(--bal-color-light-blue-4);
  --bal-color-primary: var(--bal-color-primary-5);
  --bal-color-grey: var(--bal-color-grey-3);
  --bal-color-light-blue: var(--bal-color-light-blue-1);
  --bal-color-purple: var(--bal-color-purple-3);
  --bal-color-green: var(--bal-color-green-3);
  --bal-color-yellow: var(--bal-color-yellow-3);
  --bal-color-red: var(--bal-color-red-3);
  --bal-color-info: var(--bal-color-info-3);
  --bal-color-success: var(--bal-color-success-3);
  --bal-color-warning: var(--bal-color-warning-3);
  --bal-color-danger: var(--bal-color-danger-3);
  --bal-color-shadow-focus-start: var(--bal-color-white);
  --bal-color-shadow-focus-end: var(--bal-color-purple-6);
  --bal-color-shadow-focus-inverted-start: var(--bal-color-white);
  --bal-color-shadow-focus-inverted-end: var(--bal-color-yellow-3);
  --bal-color-text-primary: var(--bal-color-primary-5); /** Main font color for all headings and paragraphs. */
  --bal-color-text-primary-light: var(--bal-color-primary-3); /** Secondary font color for help messages. */
  --bal-color-text-white: var(--bal-color-white); /** Main font color for all headings and paragraphs on a dark background. */
  --bal-color-text-grey-light: var(--bal-color-grey-4); /** Font color for disabled texts */
  --bal-color-text-grey: var(--bal-color-grey-5); /** Font color for placeholders */
  --bal-color-text-grey-dark: var(--bal-color-grey-6); /** Font color for disabled elements */
  --bal-color-text-info: var(--bal-color-info-4);
  --bal-color-text-warning: var(--bal-color-warning-5);
  --bal-color-text-success: var(--bal-color-success-4);
  --bal-color-text-danger: var(--bal-color-danger-4);
  --bal-color-text-black: var(--bal-color-black);
  --bal-color-text-primary-hovered: var(--bal-color-light-blue-5);
  --bal-color-text-primary-pressed: var(--bal-color-primary-6);
  --bal-color-text-danger-hovered: var(--bal-color-danger-5);
  --bal-color-text-danger-pressed: var(--bal-color-danger-6);
  --bal-color-text-inverted: var(--bal-color-white);
  --bal-color-text-inverted-disabled: var(--bal-color-primary-3);
  --bal-color-text-inverted-hovered: var(--bal-color-light-blue-2);
  --bal-color-text-inverted-pressed: var(--bal-color-info-3);
  --bal-container-space: var(--bal-space-normal); /** Default space of a container to left and right side. */
  --bal-container-space-tablet: var(--bal-space-x-large-tablet); /** Default space on tablets of a container to left and right side. */
  --bal-container-space-desktop: var(--bal-space-x-large-desktop); /** Default space on desktops of a container to left and right side. */
  --bal-column-gap: var(--bal-space-normal);
  --bal-space-xx-small-tablet: var(--bal-space-xx-small);
  --bal-space-xx-small-desktop: var(--bal-space-xx-small);
  --bal-space-x-small-tablet: var(--bal-space-x-small);
  --bal-space-x-small-desktop: var(--bal-space-x-small);
  --bal-space-small-tablet: var(--bal-space-small);
  --bal-space-small-desktop: var(--bal-space-small);
  --bal-space-normal-tablet: var(--bal-space-normal);
  --bal-space-normal-desktop: var(--bal-space-normal);
  --bal-space-medium-tablet: var(--bal-space-medium);
  --bal-space-large-tablet: var(--bal-space-large);
  --bal-text-size-x-small-tablet: var(--bal-text-size-x-small);
  --bal-text-size-x-small-desktop: var(--bal-text-size-x-small);
  --bal-text-size-small-tablet: var(--bal-text-size-small);
  --bal-text-size-small-desktop: var(--bal-text-size-small);
  --bal-text-size-normal-tablet: var(--bal-text-size-normal);
  --bal-text-size-normal-desktop: var(--bal-text-size-normal);
  --bal-text-size-medium-desktop: var(--bal-text-size-medium-tablet);
  --bal-text-size-large-desktop: var(--bal-text-size-large-tablet);
  --bal-text-size-x-large-desktop: var(--bal-text-size-x-large-tablet);
  --bal-text-size-xx-large-desktop: var(--bal-text-size-xx-large-tablet);
  --bal-text-size-xxx-large-desktop: var(--bal-text-size-xxx-large-tablet);
  --bal-text-size-xxxx-large-desktop: var(--bal-text-size-xxxx-large-tablet);
  --bal-text-size-xxxxx-large-desktop: var(--bal-text-size-xxxxx-large-tablet);
  --bal-heading-font-family: var(--bal-font-family-title);
  --bal-heading-font-weight: var(--bal-font-weight-bold);
  --bal-heading-line-height: var(--bal-text-line-height-title);
  --bal-heading-size-1: var(--bal-text-size-xxx-large);
  --bal-heading-size-1-tablet: var(--bal-text-size-xxx-large-tablet);
  --bal-heading-size-2: var(--bal-text-size-xx-large);
  --bal-heading-size-2-tablet: var(--bal-text-size-xx-large-tablet);
  --bal-heading-size-3: var(--bal-text-size-x-large);
  --bal-heading-size-3-tablet: var(--bal-text-size-x-large-tablet);
  --bal-heading-size-4: var(--bal-text-size-large);
  --bal-heading-size-4-tablet: var(--bal-text-size-large-tablet);
  --bal-heading-size-5: var(--bal-text-size-normal);
  --bal-heading-size-xxxxx-large: var(--bal-text-size-xxxxx-large);
  --bal-heading-size-xxxxx-large-tablet: var(--bal-text-size-xxxxx-large-tablet);
  --bal-heading-size-xxxx-large: var(--bal-text-size-xxxx-large);
  --bal-heading-size-xxxx-large-tablet: var(--bal-text-size-xxxx-large-tablet);
  --bal-heading-size-xxx-large: var(--bal-text-size-xxx-large);
  --bal-heading-size-xxx-large-tablet: var(--bal-text-size-xxx-large-tablet);
  --bal-heading-size-xx-large: var(--bal-text-size-xx-large);
  --bal-heading-size-xx-large-tablet: var(--bal-text-size-xx-large-tablet);
  --bal-heading-size-x-large: var(--bal-text-size-x-large);
  --bal-heading-size-x-large-tablet: var(--bal-text-size-x-large-tablet);
  --bal-heading-size-large: var(--bal-text-size-large);
  --bal-heading-size-large-tablet: var(--bal-text-size-large-tablet);
  --bal-heading-size-medium: var(--bal-text-size-medium);
  --bal-heading-size-medium-tablet: var(--bal-text-size-medium-tablet);
  --bal-heading-size-normal: var(--bal-text-size-normal);
  --bal-heading-size-display-1: var(--bal-text-size-xxxxx-large);
  --bal-heading-size-display-1-tablet: var(--bal-text-size-xxxxx-large-tablet);
  --bal-heading-size-display-2: var(--bal-text-size-xxxx-large);
  --bal-heading-size-display-2-tablet: var(--bal-text-size-xxxx-large-tablet);
  --bal-heading-subtitle-font-weight: var(--bal-font-weight-light);
  --bal-heading-text-shadow: var(--bal-text-shadow-normal);
  --bal-heading-space-basic: var(--bal-space-x-small);
  --bal-heading-space-display: var(--bal-space-normal);
  --bal-heading-size-1-desktop: var(--bal-text-size-xxx-large-desktop);
  --bal-heading-size-2-desktop: var(--bal-text-size-xx-large-desktop);
  --bal-heading-size-3-desktop: var(--bal-text-size-x-large-desktop);
  --bal-heading-size-4-desktop: var(--bal-text-size-large-desktop);
  --bal-heading-size-5-tablet: var(--bal-text-size-normal-tablet);
  --bal-heading-size-5-desktop: var(--bal-text-size-normal-desktop);
  --bal-heading-size-xxxxx-large-desktop: var(--bal-text-size-xxxxx-large-desktop);
  --bal-heading-size-xxxx-large-desktop: var(--bal-text-size-xxxx-large-desktop);
  --bal-heading-size-xxx-large-desktop: var(--bal-text-size-xxx-large-desktop);
  --bal-heading-size-xx-large-desktop: var(--bal-text-size-xx-large-desktop);
  --bal-heading-size-x-large-desktop: var(--bal-text-size-x-large-desktop);
  --bal-heading-size-large-desktop: var(--bal-text-size-large-desktop);
  --bal-heading-size-medium-desktop: var(--bal-text-size-medium-desktop);
  --bal-heading-size-normal-tablet: var(--bal-text-size-normal-tablet);
  --bal-heading-size-normal-desktop: var(--bal-text-size-normal-desktop);
  --bal-heading-size-display-1-desktop: var(--bal-text-size-xxxxx-large-desktop);
  --bal-heading-size-display-2-desktop: var(--bal-text-size-xxxx-large-desktop);
  --bal-heading-color-basic: var(--bal-color-text-primary);
  --bal-heading-color-primary: var(--bal-color-text-primary);
  --bal-heading-color-info: var(--bal-color-text-info);
  --bal-heading-color-success: var(--bal-color-text-success);
  --bal-heading-color-warning: var(--bal-color-text-warning);
  --bal-heading-color-danger: var(--bal-color-text-danger);
  --bal-heading-color-white: var(--bal-color-text-white);
  --bal-heading-subtitle-font-family: var(--bal-heading-font-family);
  --bal-heading-subtitle-line-height: var(--bal-heading-line-height);
  --bal-heading-subtitle-color-basic: var(--bal-heading-color-basic);
}