:root {
  /* new design system variables */
  /* spacings (for margins and paddings etc) */
  --space-0: 0rem;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* sizes (width height for layout elements) */
  --size-0: 0rem;
  --size-1: 0.25rem;
  --size-1-5: 0.375rem;
  --size-2: 0.5rem;
  --size-3: 0.75rem;
  --size-3-5: 0.875rem;
  --size-4: 1rem;
  --size-6: 1.5rem;
  --size-8: 2rem;
  --size-10: 2.5rem;
  --size-12: 3rem;
  --size-16: 4rem;
  --size-24: 6rem;
  --size-32: 8rem;
  --size-48: 12rem;
  --size-64: 16rem;
  --size-96: 24rem;
  --size-128: 32rem;
  --size-192: 48rem;
  --size-256: 64rem;
  --size-320: 80rem;

  /* brand colors */
  --color-primary-50: #fff4ec;
  --color-primary-100: #ffe7d3;
  --color-primary-200: #ffcaa5;
  --color-primary-300: #ffa56d;
  --color-primary-400: #ff7432;
  --color-primary-500: #ff4e0a;
  --color-primary-600: #ff3300;
  --color-primary-700: #cc2002;
  --color-primary-800: #a11b0b;
  --color-primary-950: #460904;

  /* neutral colors */
  --color-grey-50: #f4f4f7;
  --color-grey-100: #e8e8eb;
  --color-grey-200: #d0d0d3;
  --color-grey-300: #b8b8bb;
  --color-grey-400: #a0a0a3;
  --color-grey-500: #88888b;
  --color-grey-600: #707073;
  --color-grey-700: #58585b;
  --color-grey-800: #424245;
  --color-grey-900: #2b2b2d;

  --color-white: #fff;
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-90: rgba(255, 255, 255, 0.9);

  --color-black: #191918;
  --color-black-5: rgba(19, 19, 18, 0.05);
  --color-black-10: rgba(19, 19, 18, 0.1);
  --color-black-20: rgba(19, 19, 18, 0.2);
  --color-black-30: rgba(19, 19, 18, 0.3);
  --color-black-50: rgba(19, 19, 18, 0.5);
  --color-black-60: rgba(19, 19, 18, 0.6);
  --color-black-70: rgba(19, 19, 18, 0.7);
  --color-black-80: rgba(19, 19, 18, 0.8);

  /* emphasis colors */
  --color-alarm-light: #ff867c;
  --color-alarm: #e53935;
  --color-alarm-dark: #ab000d;

  --color-success-lightest: #e4f5e3;
  --color-success-light: #80e27e;
  --color-success: #4caf50;
  --color-success-dark: #087f23;

  --color-warning-light: #ffc947;
  --color-warning: #ff9800;
  --color-warning-dark: #c66900;

  --color-info-bg: #d5e6f4;
  --color-info-light: #64b5f6;
  --color-info: #2196f3;
  --color-info-dark: #155799;

  /* asset colors */
  --color-asset-video-light: #fbe0c5;
  --color-asset-video: #ec8a29;
  --color-asset-video-dark: #d77513;
  --color-asset-script-light: #f7eebf;
  --color-asset-script: #f7eebf;
  --color-asset-script-dark: #d1b11a;
  --color-asset-function-light: #c6d9ec;
  --color-asset-function: #4080bf;
  --color-asset-function-dark: #366ca0;
  --color-asset-related-light: #d2d5e5;
  --color-asset-related: #545e90;
  --color-asset-related-dark: #464e77;

  /* styling standards */
  --border-radius: 4px;
  --border-radius-2: 8px;
  --border-radius-round: 50%;

  /* breakpoints for use in JS only. media-queries do not work with css vars and values need to be replaced manually */
  --breakpoint-xs: 575.98px;
  --breakpoint-m: 767.98px;

  /* shortcut settings for defaults */
  --primary-color: var(--color-primary-600);
  --primary-color-hover: var(--color-primary-500);
  --primary-color-soft: var(--color-primary-200);

  --default-margin: var(--space-4);
  --default-padding: var(--space-4);
}

.primary-color {
  color: var(--primary-color);
}

.primary-background {
  background-color: var(--primary-color);
}

.border-radius {
  border-radius: var(--border-radius);
}

.border-radius-2 {
  border-radius: var(--border-radius-2);
}

/* format standards */

.mt-4 {
  margin-top: var(--space-4) !important;
}
.mb-2 {
  margin-bottom: var(--space-2) !important;
}
.mb-4 {
  margin-bottom: var(--space-4) !important;
}
.mb-8 {
  margin-bottom: var(--space-8) !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

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

.text-center {
  text-align: center;
}

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

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

.push-left {
  margin-right: auto;
}

.hyphens-auto {
  -webkit-hyphens: auto;
  hyphens: auto;
}