@font-face {
  font-family: 'ABBvoice';
  src: url('fonts/ABBvoice_W_Lt.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABBvoice';
  src: url('fonts/ABBvoice_W_Rg.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABBvoice';
  src: url('fonts/ABBvoice_W_Md.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABBvoice';
  src: url('fonts/ABBvoice_W_Bd.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* New Voice Display Font */

@font-face {
  font-family: 'ABBvoiceDisplay';
  src: url('fonts/ABBvoiceDisplay_W_SBd.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@media only screen and (max-width: 767px) {
  :root {
    --aot-spacing-gutter: 16px;
    --aot-spacing-xxs: 8px;
    --aot-spacing-xs: 16px;
    --aot-spacing-s: 16px;
    --aot-spacing-m: 24px;
    --aot-spacing-l: 32px;
    --aot-spacing-xl: 40px;
    --aot-spacing-xxl: 48px;
    --aot-spacing-xxxl: 56px;
    --aot-spacing-4xl: 64px;
    --aot-page-component-spacing-top: 80px;
    --aot-page-component-spacing-bottom: 80px;

    /* R1.1 Spacing for Tablet (sm, xs, xxs) */

    --aot-spacing-small1: 4px;
    --aot-spacing-small2: 8px;
    --aot-spacing-small3: 12px;
    --aot-spacing-small4: 16px;
    --aot-spacing-small5: 20px;
    --aot-spacing-small6: 24px;
    --aot-spacing-medium1: 32px;
    --aot-spacing-medium2: 40px;
    --aot-spacing-medium3: 40px;
    --aot-spacing-medium4: 40px;
    --aot-spacing-medium5: 48px;
    --aot-spacing-large1: 56px;
    --aot-spacing-large2: 64px;
    --aot-spacing-large3: 72px;
    --aot-spacing-large4: 80px;
    --aot-spacing-large5: 96px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    --aot-spacing-gutter: 24px;
    --aot-spacing-xxs: 8px;
    --aot-spacing-xs: 16px;
    --aot-spacing-s: 24px;
    --aot-spacing-m: 32px;
    --aot-spacing-l: 40px;
    --aot-spacing-xl: 48px;
    --aot-spacing-xxl: 56px;
    --aot-spacing-xxxl: 64px;
    --aot-spacing-4xl: 80px;
    --aot-page-component-spacing-top: 96px;
    --aot-page-component-spacing-bottom: 96px;

    /* R1.1 Spacing for Tablet (md) */

    --aot-spacing-small1: 4px;
    --aot-spacing-small2: 8px;
    --aot-spacing-small3: 12px;
    --aot-spacing-small4: 16px;
    --aot-spacing-small5: 20px;
    --aot-spacing-small6: 24px;
    --aot-spacing-medium1: 32px;
    --aot-spacing-medium2: 40px;
    --aot-spacing-medium3: 48px;
    --aot-spacing-medium4: 48px;
    --aot-spacing-medium5: 56px;
    --aot-spacing-large1: 64px;
    --aot-spacing-large2: 72px;
    --aot-spacing-large3: 80px;
    --aot-spacing-large4: 96px;
    --aot-spacing-large5: 128px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --aot-spacing-gutter: 24px;
    --aot-spacing-xxs: 8px;
    --aot-spacing-xs: 16px;
    --aot-spacing-s: 24px;
    --aot-spacing-m: 32px;
    --aot-spacing-l: 40px;
    --aot-spacing-xl: 48px;
    --aot-spacing-xxl: 56px;
    --aot-spacing-xxxl: 64px;
    --aot-spacing-4xl: 80px;
    --aot-page-component-spacing-top: 96px;
    --aot-page-component-spacing-bottom: 96px;

    /* R1.1 Spacing for Small Desktop (lg) */

    --aot-spacing-small1: 4px;
    --aot-spacing-small2: 8px;
    --aot-spacing-small3: 12px;
    --aot-spacing-small4: 16px;
    --aot-spacing-small5: 20px;
    --aot-spacing-small6: 24px;
    --aot-spacing-medium1: 32px;
    --aot-spacing-medium2: 40px;
    --aot-spacing-medium3: 48px;
    --aot-spacing-medium4: 48px;
    --aot-spacing-medium5: 56px;
    --aot-spacing-large1: 64px;
    --aot-spacing-large2: 72px;
    --aot-spacing-large3: 80px;
    --aot-spacing-large4: 96px;
    --aot-spacing-large5: 128px;
  }
}

@media only screen and (min-width: 1440px) {
  :root {
    --aot-spacing-gutter: 24px;
    --aot-spacing-xxs: 16px;
    --aot-spacing-xs: 24px;
    --aot-spacing-s: 32px;
    --aot-spacing-m: 40px;
    --aot-spacing-l: 48px;
    --aot-spacing-xl: 56px;
    --aot-spacing-xxl: 64px;
    --aot-spacing-xxxl: 72px;
    --aot-spacing-4xl: 96px;
    --aot-page-component-spacing-top: 128px;
    --aot-page-component-spacing-bottom: 128px;

    /* R1.1 Spacing for Desktop/LargeDesktop/FHD+ (xl, xxl, xxxl) */

    --aot-spacing-small1: 4px;
    --aot-spacing-small2: 8px;
    --aot-spacing-small3: 12px;
    --aot-spacing-small4: 16px;
    --aot-spacing-small5: 20px;
    --aot-spacing-small6: 24px;
    --aot-spacing-medium1: 32px;
    --aot-spacing-medium2: 40px;
    --aot-spacing-medium3: 48px;
    --aot-spacing-medium4: 56px;
    --aot-spacing-medium5: 64px;
    --aot-spacing-large1: 72px;
    --aot-spacing-large2: 80px;
    --aot-spacing-large3: 96px;
    --aot-spacing-large4: 128px;
    --aot-spacing-large5: 160px;
  }
}

:root {
  --aot-typography_font-family: 'ABBvoice', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --aot-spacing-fixed-xs: 4px;
  --aot-spacing-fixed-s: 8px;
  --aot-spacing-fixed-m: 12px;
  --aot-spacing-fixed-l: 16px;
  --aot-spacing-fixed-xl: 24px;
  --aot-spacing-fixed-xxl: 36px;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--aot-typography_font-family);

  hyphens: auto;
  hyphenate-limit-chars: 12 4 4;
  color: var(--aot-ref-dark-grey-4);

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    hyphens: none;
  }
}