:root {
    /* Qbeyond Orange */
    --bs-qby-orange-hue: 15;
    --bs-qby-orange-saturation: 100%;
    --bs-qby-orange-100-hsl: var(--bs-qby-orange-hue), var(--bs-qby-orange-saturation), 90%;
    --bs-qby-orange-200-hsl: var(--bs-qby-orange-hue), var(--bs-qby-orange-saturation), 80%;
    --bs-qby-orange-300-hsl: var(--bs-qby-orange-hue), var(--bs-qby-orange-saturation), 70%;
    --bs-qby-orange-400-hsl: var(--bs-qby-orange-hue), var(--bs-qby-orange-saturation), 60%;
    --bs-qby-orange-500-hsl: var(--bs-qby-orange-hue), var(--bs-qby-orange-saturation), 50%;
    --bs-qby-orange-600-hsl: var(--bs-qby-orange-hue), var(--bs-qby-orange-saturation), 40%;
    --bs-qby-orange-700-hsl: var(--bs-qby-orange-hue), var(--bs-qby-orange-saturation), 30%;
    --bs-qby-orange-800-hsl: var(--bs-qby-orange-hue), var(--bs-qby-orange-saturation), 20%;
    --bs-qby-orange-900-hsl: var(--bs-qby-orange-hue), var(--bs-qby-orange-saturation), 10%;
    --bs-qby-orange-100: hsl(var(--bs-qby-orange-100-hsl));
    --bs-qby-orange-200: hsl(var(--bs-qby-orange-200-hsl));
    --bs-qby-orange-300: hsl(var(--bs-qby-orange-300-hsl));
    --bs-qby-orange-400: hsl(var(--bs-qby-orange-400-hsl));
    --bs-qby-orange-500: hsl(var(--bs-qby-orange-500-hsl));
    --bs-qby-orange-600: hsl(var(--bs-qby-orange-600-hsl));
    --bs-qby-orange-700: hsl(var(--bs-qby-orange-700-hsl));
    --bs-qby-orange-800: hsl(var(--bs-qby-orange-800-hsl));
    --bs-qby-orange-900: hsl(var(--bs-qby-orange-900-hsl));
    --bs-qby-orange-hsl: var(--bs-qby-orange-500-hsl);
    --bs-qby-orange: hsl(var(--bs-qby-orange-hsl));
    --bs-qby-orange-foreground-hsl: var(--bs-white-hsl);
    --bs-qby-orange-foreground: hsl(var(--bs-qby-orange-foreground-hsl));
    --bs-qby-orange-text-emphasis-hsl: var(--bs-qby-orange-600-hsl);
    --bs-qby-orange-text-emphasis: hsl(var(--bs-qby-orange-text-emphasis-hsl));
    --bs-qby-orange-hover-bg: var(--bs-qby-orange-600);
    --bs-qby-orange-active-bg: var(--bs-qby-orange-700);
    --bs-qby-orange-bg-subtle: hsl(var(--bs-qby-orange-hue), var(--bs-qby-orange-saturation), 95%);
    --bs-qby-orange-border-subtle: var(--bs-qby-orange-400);
    --bs-qby-orange-checkbox-svg: var(--bs-checkbox-svg-light);
    --bs-qby-orange-dash-svg: var(--bs-dash-svg-light);
    --bs-qby-orange-radio-svg: var(--bs-radio-svg-light);
    --bs-qby-orange-switch-svg: var(--bs-switch-svg-light);

    /* Qbeyond Orange as primary color */
    --bs-primary-hue: var(--bs-qby-orange-hue);
    --bs-primary-saturation: var(--bs-qby-orange-saturation);
    --bs-primary-100-hsl: var(--bs-qby-orange-100-hsl);
    --bs-primary-200-hsl: var(--bs-qby-orange-200-hsl);
    --bs-primary-300-hsl: var(--bs-qby-orange-300-hsl);
    --bs-primary-400-hsl: var(--bs-qby-orange-400-hsl);
    --bs-primary-500-hsl: var(--bs-qby-orange-500-hsl);
    --bs-primary-600-hsl: var(--bs-qby-orange-600-hsl);
    --bs-primary-700-hsl: var(--bs-qby-orange-700-hsl);
    --bs-primary-800-hsl: var(--bs-qby-orange-800-hsl);
    --bs-primary-900-hsl: var(--bs-qby-orange-900-hsl);
    --bs-primary-100: var(--bs-qby-orange-100);
    --bs-primary-200: var(--bs-qby-orange-200);
    --bs-primary-300: var(--bs-qby-orange-300);
    --bs-primary-400: var(--bs-qby-orange-400);
    --bs-primary-500: var(--bs-qby-orange-500);
    --bs-primary-600: var(--bs-qby-orange-600);
    --bs-primary-700: var(--bs-qby-orange-700);
    --bs-primary-800: var(--bs-qby-orange-800);
    --bs-primary-900: var(--bs-qby-orange-900);
    --bs-primary-hsl: var(--bs-qby-orange-hsl);
    --bs-primary: var(--bs-qby-orange);
    --bs-primary-foreground-hsl: var(--bs-qby-orange-foreground-hsl);
    --bs-primary-foreground: var(--bs-qby-orange-foreground);
    --bs-primary-text-emphasis-hsl: var(--bs-qby-orange-text-emphasis-hsl);
    --bs-primary-text-emphasis: var(--bs-qby-orange-text-emphasis);
    --bs-primary-hover-bg: var(--bs-qby-orange-hover-bg);
    --bs-primary-active-bg: var(--bs-qby-orange-active-bg);
    --bs-primary-bg-subtle: var(--bs-qby-orange-bg-subtle);
    --bs-primary-border-subtle: var(--bs-qby-orange-border-subtle);
    --bs-primary-checkbox-svg: var(--bs-qby-orange-checkbox-svg);
    --bs-primary-dash-svg: var(--bs-qby-orange-dash-svg);
    --bs-primary-radio-svg: var(--bs-qby-orange-radio-svg);
    --bs-primary-switch-svg: var(--bs-qby-orange-switch-svg);

    /* Qbeyond Gray */
    --bs-qby-gray-hue: 180;
    --bs-qby-gray-saturation: 9%;
    --bs-qby-gray-100-hsl: var(--bs-qby-gray-hue), var(--bs-qby-gray-saturation), 51%;
    --bs-qby-gray-200-hsl: var(--bs-qby-gray-hue), var(--bs-qby-gray-saturation), 41%;
    --bs-qby-gray-300-hsl: var(--bs-qby-gray-hue), var(--bs-qby-gray-saturation), 31%;
    --bs-qby-gray-400-hsl: var(--bs-qby-gray-hue), var(--bs-qby-gray-saturation), 21%;
    --bs-qby-gray-500-hsl: var(--bs-qby-gray-hue), var(--bs-qby-gray-saturation), 11%;
    --bs-qby-gray-600-hsl: var(--bs-qby-gray-hue), var(--bs-qby-gray-saturation), 11%;
    --bs-qby-gray-700-hsl: var(--bs-qby-gray-hue), var(--bs-qby-gray-saturation), 5%;
    --bs-qby-gray-800-hsl: var(--bs-qby-gray-hue), var(--bs-qby-gray-saturation), 0%;
    --bs-qby-gray-900-hsl: var(--bs-qby-gray-hue), var(--bs-qby-gray-saturation), 0%;
    --bs-qby-gray-100: hsl(var(--bs-qby-gray-100-hsl));
    --bs-qby-gray-200: hsl(var(--bs-qby-gray-200-hsl));
    --bs-qby-gray-300: hsl(var(--bs-qby-gray-300-hsl));
    --bs-qby-gray-400: hsl(var(--bs-qby-gray-400-hsl));
    --bs-qby-gray-500: hsl(var(--bs-qby-gray-500-hsl));
    --bs-qby-gray-600: hsl(var(--bs-qby-gray-600-hsl));
    --bs-qby-gray-700: hsl(var(--bs-qby-gray-700-hsl));
    --bs-qby-gray-800: hsl(var(--bs-qby-gray-800-hsl));
    --bs-qby-gray-900: hsl(var(--bs-qby-gray-900-hsl));
    --bs-qby-gray-hsl: var(--bs-qby-gray-500-hsl);
    --bs-qby-gray: hsl(var(--bs-qby-gray-hsl));
    --bs-qby-gray-foreground-hsl: var(--bs-white-hsl);
    --bs-qby-gray-foreground: hsl(var(--bs-qby-gray-foreground-hsl));
    --bs-qby-gray-text-emphasis-hsl: var(--bs-qby-gray-600-hsl);
    --bs-qby-gray-text-emphasis: hsl(var(--bs-qby-gray-text-emphasis-hsl));
    --bs-qby-gray-hover-bg: var(--bs-qby-gray-600);
    --bs-qby-gray-active-bg: var(--bs-qby-gray-700);
    --bs-qby-gray-bg-subtle: hsl(var(--bs-qby-gray-hue), var(--bs-qby-gray-saturation), 95%);
    --bs-qby-gray-border-subtle: var(--bs-qby-gray-400);
    --bs-qby-gray-checkbox-svg: var(--bs-checkbox-svg-light);
    --bs-qby-gray-dash-svg: var(--bs-dash-svg-light);
    --bs-qby-gray-radio-svg: var(--bs-radio-svg-light);
    --bs-qby-gray-switch-svg: var(--bs-switch-svg-light);

    /* Light */

    --bs-light-hue: var(--bs-qby-gray-hue);
    --bs-light-saturation: var(--bs-qby-gray-saturation);
    --bs-light-100-hsl: var(--bs-qby-gray-100-hsl);
    --bs-light-200-hsl: var(--bs-qby-gray-200-hsl);
    --bs-light-300-hsl: var(--bs-qby-gray-300-hsl);
    --bs-light-400-hsl: var(--bs-qby-gray-400-hsl);
    --bs-light-500-hsl: var(--bs-qby-gray-500-hsl);
    --bs-light-600-hsl: var(--bs-qby-gray-600-hsl);
    --bs-light-700-hsl: var(--bs-qby-gray-700-hsl);
    --bs-light-800-hsl: var(--bs-qby-gray-800-hsl);
    --bs-light-900-hsl: var(--bs-qby-gray-900-hsl);
    --bs-light-100: var(--bs-qby-gray-100);
    --bs-light-200: var(--bs-qby-gray-200);
    --bs-light-300: var(--bs-qby-gray-300);
    --bs-light-400: var(--bs-qby-gray-400);
    --bs-light-500: var(--bs-qby-gray-500);
    --bs-light-600: var(--bs-qby-gray-600);
    --bs-light-700: var(--bs-qby-gray-700);
    --bs-light-800: var(--bs-qby-gray-800);
    --bs-light-900: var(--bs-qby-gray-900);
    --bs-light-hsl: var(--bs-qby-gray-hsl);
    --bs-light: var(--bs-qby-gray);
    --bs-light-foreground-hsl: var(--bs-qby-gray-foreground-hsl);
    --bs-light-foreground: var(--bs-qby-gray-foreground);
    --bs-light-text-emphasis-hsl: var(--bs-qby-gray-text-emphasis-hsl);
    --bs-light-text-emphasis: var(--bs-qby-gray-text-emphasis);
    --bs-light-hover-bg: var(--bs-qby-gray-hover-bg);
    --bs-light-active-bg: var(--bs-qby-gray-active-bg);
    --bs-light-bg-subtle: var(--bs-qby-gray-bg-subtle);
    --bs-light-border-subtle: var(--bs-qby-gray-border-subtle);
    --bs-light-checkbox-svg: var(--bs-qby-gray-checkbox-svg);
    --bs-light-dash-svg: var(--bs-qby-gray-dash-svg);
    --bs-light-radio-svg: var(--bs-qby-gray-radio-svg);
    --bs-light-switch-svg: var(--bs-qby-gray-switch-svg);

    /* Secondary */
    --bs-secondary-hue: var(--bs-qby-gray-hue);
    --bs-secondary-saturation: var(--bs-qby-gray-saturation);
    --bs-secondary-100-hsl: var(--bs-qby-gray-100-hsl);
    --bs-secondary-200-hsl: var(--bs-qby-gray-200-hsl);
    --bs-secondary-300-hsl: var(--bs-qby-gray-300-hsl);
    --bs-secondary-400-hsl: var(--bs-qby-gray-400-hsl);
    --bs-secondary-500-hsl: var(--bs-qby-gray-500-hsl);
    --bs-secondary-600-hsl: var(--bs-qby-gray-600-hsl);
    --bs-secondary-700-hsl: var(--bs-qby-gray-700-hsl);
    --bs-secondary-800-hsl: var(--bs-qby-gray-800-hsl);
    --bs-secondary-900-hsl: var(--bs-qby-gray-900-hsl);
    --bs-secondary-100: var(--bs-qby-gray-100);
    --bs-secondary-200: var(--bs-qby-gray-200);
    --bs-secondary-300: var(--bs-qby-gray-300);
    --bs-secondary-400: var(--bs-qby-gray-400);
    --bs-secondary-500: var(--bs-qby-gray-500);
    --bs-secondary-600: var(--bs-qby-gray-600);
    --bs-secondary-700: var(--bs-qby-gray-700);
    --bs-secondary-800: var(--bs-qby-gray-800);
    --bs-secondary-900: var(--bs-qby-gray-900);
    --bs-secondary-hsl: var(--bs-qby-gray-hsl);
    --bs-secondary: var(--bs-qby-gray);
    --bs-secondary-foreground-hsl: var(--bs-qby-gray-foreground-hsl);
    --bs-secondary-foreground: var(--bs-qby-gray-foreground);
    --bs-secondary-text-emphasis-hsl: var(--bs-qby-gray-text-emphasis-hsl);
    --bs-secondary-text-emphasis: var(--bs-qby-gray-text-emphasis);
    --bs-secondary-hover-bg: var(--bs-qby-gray-hover-bg);
    --bs-secondary-active-bg: var(--bs-qby-gray-active-bg);
    --bs-secondary-bg-subtle: var(--bs-qby-gray-bg-subtle);
    --bs-secondary-border-subtle: var(--bs-qby-gray-border-subtle);
    --bs-secondary-checkbox-svg: var(--bs-qby-gray-checkbox-svg);
    --bs-secondary-dash-svg: var(--bs-qby-gray-dash-svg);
    --bs-secondary-radio-svg: var(--bs-qby-gray-radio-svg);
    --bs-secondary-switch-svg: var(--bs-qby-gray-switch-svg);

    --bs-font-sans-serif: 'Brix Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --bs-border-radius: 0.5rem;
}

/* Fonts */
@font-face {
  font-family: 'Brix Sans';
  src: url('/static/BrixSansMedium.eot');
  src:
    url('/static/BrixSansMedium.eot?#iefix') format('embedded-opentype'),
    url('/static/BrixSansMedium.woff2') format('woff2'),
    url('/static/BrixSansMedium.woff') format('woff'),
    url('/static/BrixSansMedium.ttf') format('truetype'),
    url('/static/BrixSansMedium.svg#BrixSansMedium') format('svg');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Brix Sans';
  src: url('/static/BrixSansBlack.eot');
  src:
    url('/static/BrixSansBlack.eot?#iefix') format('embedded-opentype'),
    url('/static/BrixSansBlack.woff2') format('woff2'),
    url('/static/BrixSansBlack.woff') format('woff'),
    url('/static/BrixSansBlack.ttf') format('truetype'),
    url('/static/BrixSansBlack.svg#BrixSansBlack') format('svg');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Brix Sans';
  src: url('/static/BrixSansBold-Italic.eot');
  src:
    url('/static/BrixSansBold-Italic.eot?#iefix') format('embedded-opentype'),
    url('/static/BrixSansBold-Italic.woff2') format('woff2'),
    url('/static/BrixSansBold-Italic.woff') format('woff'),
    url('/static/BrixSansBold-Italic.ttf') format('truetype'),
    url('/static/BrixSansBold-Italic.svg#BrixSansBold-Italic') format('svg');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Brix Sans';
  src: url('/static/BrixSansMedium-Italic.eot');
  src:
    url('/static/BrixSansMedium-Italic.eot?#iefix') format('embedded-opentype'),
    url('/static/BrixSansMedium-Italic.woff2') format('woff2'),
    url('/static/BrixSansMedium-Italic.woff') format('woff'),
    url('/static/BrixSansMedium-Italic.ttf') format('truetype'),
    url('/static/BrixSansMedium-Italic.svg#BrixSansMedium-Italic') format('svg');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Brix Sans';
  src: url('/static/BrixSansExtraLight-Italic.eot');
  src:
    url('/static/BrixSansExtraLight-Italic.eot?#iefix') format('embedded-opentype'),
    url('/static/BrixSansExtraLight-Italic.woff2') format('woff2'),
    url('/static/BrixSansExtraLight-Italic.woff') format('woff'),
    url('/static/BrixSansExtraLight-Italic.ttf') format('truetype'),
    url('/static/BrixSansExtraLight-Italic.svg#BrixSansExtraLight-Italic') format('svg');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: 'Brix Sans';
  src: url('/static/BrixSansLight.eot');
  src:
    url('/static/BrixSansLight.eot?#iefix') format('embedded-opentype'),
    url('/static/BrixSansLight.woff2') format('woff2'),
    url('/static/BrixSansLight.woff') format('woff'),
    url('/static/BrixSansLight.ttf') format('truetype'),
    url('/static/BrixSansLight.svg#BrixSansLight') format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Brix Sans';
  src: url('/static/BrixSansBlack-Italic.eot');
  src:
    url('/static/BrixSansBlack-Italic.eot?#iefix') format('embedded-opentype'),
    url('/static/BrixSansBlack-Italic.woff2') format('woff2'),
    url('/static/BrixSansBlack-Italic.woff') format('woff'),
    url('/static/BrixSansBlack-Italic.ttf') format('truetype'),
    url('/static/BrixSansBlack-Italic.svg#BrixSansBlack-Italic') format('svg');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'Brix Sans';
  src: url('/static/BrixSansBold.eot');
  src:
    url('/static/BrixSansBold.eot?#iefix') format('embedded-opentype'),
    url('/static/BrixSansBold.woff2') format('woff2'),
    url('/static/BrixSansBold.woff') format('woff'),
    url('/static/BrixSansBold.ttf') format('truetype'),
    url('/static/BrixSansBold.svg#BrixSansBold') format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Brix Sans';
  src: url('/static/BrixSansRegular.eot');
  src:
    url('/static/BrixSansRegular.eot?#iefix') format('embedded-opentype'),
    url('/static/BrixSansRegular.woff2') format('woff2'),
    url('/static/BrixSansRegular.woff') format('woff'),
    url('/static/BrixSansRegular.ttf') format('truetype'),
    url('/static/BrixSansRegular.svg#BrixSansRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Brix Sans';
  src: url('/static/BrixSansExtraLight.eot');
  src:
    url('/static/BrixSansExtraLight.eot?#iefix') format('embedded-opentype'),
    url('/static/BrixSansExtraLight.woff2') format('woff2'),
    url('/static/BrixSansExtraLight.woff') format('woff'),
    url('/static/BrixSansExtraLight.ttf') format('truetype'),
    url('/static/BrixSansExtraLight.svg#BrixSansExtraLight') format('svg');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Brix Sans';
  src: url('/static/BrixSansLight-Italic.eot');
  src:
    url('/static/BrixSansLight-Italic.eot?#iefix') format('embedded-opentype'),
    url('/static/BrixSansLight-Italic.woff2') format('woff2'),
    url('/static/BrixSansLight-Italic.woff') format('woff'),
    url('/static/BrixSansLight-Italic.ttf') format('truetype'),
    url('/static/BrixSansLight-Italic.svg#BrixSansLight-Italic') format('svg');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Brix Sans';
  src: url('/static/BrixSansRegular-Italic.eot');
  src:
    url('/static/BrixSansRegular-Italic.eot?#iefix') format('embedded-opentype'),
    url('/static/BrixSansRegular-Italic.woff2') format('woff2'),
    url('/static/BrixSansRegular-Italic.woff') format('woff'),
    url('/static/BrixSansRegular-Italic.ttf') format('truetype'),
    url('/static/BrixSansRegular-Italic.svg#BrixSansRegular-Italic') format('svg');
  font-weight: normal;
  font-style: italic;
}