@import url(https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap);
:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

/*
  A benefit of using a hosted font service is that it will include all the font file variations,
  which ensures deep cross-browser compatibility without having to host all those files ourselves.
*/
@font-face {
  font-family: Everett;
  src:
    url(../assets/TWKEverett-Medium-a3b59bb605361109d04e.woff2) format('woff2'),
    url(../assets/TWKEverett-Medium-d11c3fc6d8e162327a40.woff) format('woff'),
    url(../assets/TWKEverett-Medium-4ac34389a462b46ba6cb.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  color: var(--font-color);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  letter-spacing: var(--letter-spacing-h1);
  line-height: var(--line-height-h1);
}
h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  letter-spacing: var(--letter-spacing-h2);
  line-height: var(--line-height-h2);
}
h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
  letter-spacing: var(--letter-spacing-h3);
  line-height: var(--line-height-h3);
  color: var(--font-color-h3);
}
h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  letter-spacing: var(--letter-spacing-h4);
  line-height: var(--line-height-h4);
  color: var(--font-color-h4);
}
h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-h5);
  letter-spacing: var(--letter-spacing-h5);
  line-height: var(--line-height-h5);
  color: var(--font-color-h5);
}
h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-h6);
  letter-spacing: var(--letter-spacing-h6);
  line-height: var(--line-height-h6);
  color: var(--font-color-h6);
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

/* Unstyle section start */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

* {
  /* This should be enabled but causes minor bugs site-wide */
  /* min-width: 0; */
  padding: unset;
  border: unset;
  /* margin: unset; */
  color: inherit;
  /* font: inherit; */
}

section,
article,
header,
main,
footer,
aside,
p,
details,
address,
nav,
figure,
figcaption,
canvas,
img,
video,
audio,
progress,
fieldset,
legend {
  display: block;
}

button,
input,
select {
  /* Also causes issues */
  /* all: unset; */
  display: inline-block;
  cursor: pointer;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

input[type='search'] {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}

textarea {
  border-radius: 0;
  vertical-align: top;
}

textarea,
pre {
  overflow: auto;
}

ol,
ul,
li,
dl,
dt,
dd {
  list-style-position: inside;
}

ol {
  display: block;
  list-style-type: decimal;
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  -webkit-margin-after: 1em;
          margin-block-end: 1em;
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
  unicode-bidi: isolate;
}

:is(dir, menu, ol, ul) ul {
  list-style-type: circle;
}

:is(dir, dl, menu, ol, ul) ul {
  -webkit-margin-before: 0px;
          margin-block-start: 0px;
  -webkit-margin-after: 0px;
          margin-block-end: 0px;
}

ul {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
  -webkit-margin-after: 1em;
          margin-block-end: 1em;
  -webkit-padding-start: 20px;
          padding-inline-start: 20px;
  unicode-bidi: isolate;
}

li {
  display: list-item;
  unicode-bidi: isolate;
}

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

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
}

a,
a:hover,
a:active {
  text-decoration: none;
}

b {
  font-weight: bolder;
}
i {
  font-style: italic;
}

svg {
  fill: currentColor;
}
svg:not(:root) {
  overflow: hidden;
}

/* Consistent superscript/subscript, font-size based on PhotoShop algorithm */
sup,
sub {
  position: relative;
  vertical-align: middle;
  font-size: 58.3%;
  line-height: 0;
}

/* ~33.3% up or down for superscript and subscript; You may need to adjust for custom fonts */
sup {
  top: -0.33333em;
}
sub {
  top: 0.33333em;
}

html,
body {
  /* Also causes site-wide issues, disable */
  /* height: 100%; */
  width: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  text-overflow: ellipsis;
}

/* Unstyle section end */

body {
  color: var(--font-color);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  overflow-x: hidden;
  background-color: var(--grey-color-100);
  margin: 0;
}

body > :not(script) + * {
  margin-top: var(--topnav-height);
}

/* Overwrite margin on cookie banner container to avoid page size issues */
#hs-web-interactives-floating-container {
  margin: 0 !important;
}

.placeholder-image {
  margin: 0;
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

.framework-toggle {
  line-height: 3.5ex;
  padding-right: 3px;
  font-size: var(--framework-toggle-font-size);
  margin-top: calc(0.4ex + 1px);
  /* 1px shift for rounding */
  border-radius: var(--framework-toggle-border-radius);
  z-index: 2;
  white-space: nowrap;
}

.framework-toggle__react {
  background-color: #61dbfb;
  color: #323330;
  padding: 0px var(--framework-toggle-margin-top);
}

.framework-toggle__javascript {
  background-color: #f0db4f;
  color: #323330;
  padding: 0px var(--framework-toggle-margin-top);
}

.framework-toggle.fade {
  background-color: var(--neutral-color100);
  opacity: 0.8;
  color: #323330;
  z-index: 1;
  cursor: pointer;
}

.framework-toggle__javascript.fade {
  padding-left: var(--framework-toggle-padding-side);
  margin-left: var(--framework-toggle-margin-side);
}
.framework-toggle__react.fade {
  padding-right: var(--framework-toggle-padding-side);
  margin-right: var(--framework-toggle-margin-side);
}

#framework-modal {
  position: fixed;
  width: 100vw;
  top: 0px;
  background: var(--modal-background);
  height: 100vh;
  z-index: 20;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

#framework-modal .card__main__title {
  color: var(--white-color);
}

.clicktarget {
  cursor: pointer;
}

.card {
  position: relative;
  margin: var(--modal-card-margin);
}

.card .clicktarget {
  top: 0px;
  height: 100%;
  position: absolute;
  width: 100%;
}

.hidden {
  display: none !important;
}

.footer {
  background-color: var(--white-color);
  color: var(--neutral-color900);
  font-size: var(--font-size-caption);
  min-height: var(--s2);
  padding-bottom: var(--s4);
  padding-top: var(--s2);
}
.footer__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: var(--welcome-screen-max-content-width);
}
.footer__logo {
  -ms-flex-preferred-size: var(--s4);
      flex-basis: var(--s4);
  max-width: 10rem;
}
.footer__content > * {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0 var(--topnav-horizontal-padding);
}

.footer__copy,
.footer__logo {
  padding: 0;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  /* Make sure scrolling to an ID is never obscured by the navbar */
  scroll-padding-top: calc(var(--topnav-height) + 1rem);
}

pre.code {
  overflow-wrap: normal;
}

body > .unauthenticated {
  margin-top: 0;
}

img {
  width: 100%;
}
.img--xsmall {
  max-width: var(--s5);
}
.img--small {
  max-width: var(--s7);
}
.img--medium {
  max-width: var(--s8);
}
.img--inline {
  width: 20px;
}
.img--rel-note {
  max-width: 100%;
  height: auto;
}

.copy {
  max-width: var(--measure);
  text-align: left;
}

.terms {
  margin-top: var(--topnav-height);
}

input.checkbox {
  /*
    TODO(P3/M): make a nicely styled checkbox
   */
  -webkit-box-flex: unset;
      -ms-flex: unset;
          flex: unset;
  width: var(--s0);
}

.box {
  background-color: var(--background-color);
  border: var(--border-thin) solid;
  border-radius: var(--border-radius);
  padding: var(--s0) var(--s1);
}

.box * {
  color: inherit;
}

.box--conditional {
  background-color: var(--neutral-color680-trans);
  border: var(--border-thin) solid;
  border-radius: var(--border-large-radius);
  color: var(--color-light);
  padding: var(--s-4) var(--s0);
}

.box--invert {
  background-color: var(--color-light);
  color: var(--color-dark);
}

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

.box--accent {
  background-color: var(--accent-color500);
}

.center {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
}

.cluster {
  --space: var(--s0);
  /* ↓ Suppress horizontal scrolling caused by the negative margin in some circumstances */
  overflow: hidden;
}

.cluster > * {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  /* ↓ multiply by -1 to negate the halved value */
  margin: calc(var(--space) / 2 * -1);
}

.cluster > * > * {
  /* ↓ half the value, because of the 'doubling up' */
  margin: calc(var(--space) / 2);
}

.cluster--large {
  --space: var(--s3);
}

.cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
  padding: 1rem;
}

.cover > * {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.cover > :last-child:not(.cover__head-element) {
  margin-bottom: 0;
}

.cover > :first-child:not(.cover__principle-element) {
  margin-top: 0;
}

.cover > .cover__principle-element {
  margin-bottom: auto;
  margin-top: auto;
}

.frame {
  --n: 9;
  --d: 16;
  padding-bottom: calc(var(--n) / var(--d) * 100%);
  position: relative;
}
.frame > * {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

.frame > img,
.frame > video {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.stack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.stack > * {
  margin-bottom: 0;
  margin-top: 0;
}

.stack > * + * {
  margin-top: var(--s0);
}
.stack--xsmall > * + * {
  margin-top: var(--s-2);
}
.stack--small > * + * {
  margin-top: var(--s-1);
}

.stack--large > * + * {
  margin-top: var(--s2);
}

.stack--xlarge > * + * {
  margin-top: var(--s4);
}

.stack--last {
  padding-bottom: var(--s6);
}

.with-sidebar {
  overflow: hidden;
}

.with-sidebar > * {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: calc(var(--s1) / 2 * -1);
}

.with-sidebar > * > * {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin: calc(var(--s1) / 2);
}

.with-sidebar > * > :last-child {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -webkit-box-flex: 999;
      -ms-flex-positive: 999;
          flex-grow: 999;
  min-width: calc(50% - var(--s1));
}

.switcher > * {
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.switcher.switcher--reverse > * {
  -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse;
}

.switcher > * > * {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-preferred-size: calc((var(--measure) - (100% - var(--s1))) * 999);
      flex-basis: calc((var(--measure) - (100% - var(--s1))) * 999);
  margin: calc(var(--s1) / 2);
}

.switcher > * > :nth-last-child(n + 5),
.switcher > * > :nth-last-child(n + 5) ~ * {
  /*
    Here, I am applying a flex-basis of 100% to each element,
    only where there are five or more elements in total.
    The nth-last-child(n+5) selector targets any elements that are
    more than 4 from the end of the set. Then, the general sibling combinator (~)
    applies the same rule to the rest of the elements
    (it matches anything after :nth-last-child(n+5)).
    If there are fewer that 5 items, no :nth-last-child(n+5)
    elements and the style is not applied.
    This is optional and may not be what we stick with.
   */
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

.capitalize {
  text-transform: capitalize;
}

.caption {
  font-size: var(--font-size-caption);
  color: var(--neutral-color400);
}
a {
  --link-hover-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--primary-color400) 75%, var(--supporting-color400) 100%;
  --nav-link-hover-gradient: 153deg, var(--primary-color500) 0, var(--primary-color300) 42%,
    var(--primary-color200) 75%, var(--supporting-color100) 100%;
  --note-link-hover-gradient: 153deg, var(--supporting-color900) 0, var(--supporting-color800) 42%,
    var(--supporting-color700) 75%, var(--primary-color300) 100%;
  color: inherit;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-bottom: 1px solid var(--neutral-color500);
}

.a--plain {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

header a,
nav a {
  border-bottom: none;
}

a:not(.nav-new *):not(.product-nav):not(.product-nav-name-container):not(.button):not(
    .a--plain
  ):not(.sidenav__highlight-active):not(.code):not(.hidden-wrapper):not(#nav-trial-request):hover {
  background: var(--primary-color500);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-shadow: none;
}

header .nav ul a:not(.a--plain):not(#nav-trial-request):hover {
  color: white;
  background: var(--primary-color500);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  display: inline;
  text-shadow: none;
}

header a.nav__logo__link:hover,
nav.sidenav a:not(.sidenav__highlight-active):hover,
a.api-badge-deprecated,
a.api-badge-deprecated:hover {
  background: unset !important;
  background-clip: text;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: inherit !important;
  border-bottom: none !important;
}

img.avatar {
  color: var(--neutral-color500);
  border-radius: 50%;
  height: 32px;
  width: 32px;
}

.button:disabled {
  background-color: var(--grey-color-300);
  color: var(--neutral-color500);
  cursor: auto;
}

a.button {
  text-decoration: none;
  border-bottom: none;
}

.tab {
  color: inherit;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: none;
  -webkit-box-shadow: var(--box-shadow-0);
          box-shadow: var(--box-shadow-0);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: var(--font-weight-heavy);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  min-height: var(--s2);
  background-color: var(--neutral-color600);
  font-size: 0.7rem;
  padding: var(--s-4) var(--s-1);
  border-radius: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.tab:focus {
  color: var(--primary-color600);
  outline: none;
}

.tab--active {
  background-color: var(--neutral-color900);
}

.tab-panel-container {
  color: var(--neutral-color200);
  margin: 0;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 400px;
          flex: 0 1 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: var(--neutral-color900);
  border: var(--border-thin) solid var(--neutral-color500);
}

.tab-panel {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  padding: 20px;
  color: var(--neutral-color200);
  background-color: var(--neutral-color900);
  overflow: auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.header--plain {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  background-color: inherit;
}

.instructions-box-container {
  --position: var(--s-2);
  background-color: var(--grey-color-200);
  border-radius: var(--border-radius);
  border: var(--border-thin) solid var(--grey-color-200);
  font-size: var(--font-size-caption);
  margin: 0;
  max-height: 60%;
  max-width: 50%;
  overflow: auto;
  padding: var(--s-1);
  position: absolute;
  right: var(--position);
  top: var(--position);
}

.json-block {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0;
  background-color: inherit;
  overflow: auto;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.8rem;
}

.tab-panel--active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.event-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: auto;
  margin: 10px 0;
  padding: 0;
  background-color: #333;
  width: 100%;
}
.event-list .list-item {
  background-color: var(--neutral-color900);
  cursor: pointer;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.event-list .list-item--active {
  color: var(--neutral-color900);
  background-color: var(--neutral-color200);
}

.event-filter-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  overflow-x: auto;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.filter-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.modifiers-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20px;
          flex: 0 0 20px;
}

.modifier-key {
  background-color: var(--grey-color-200);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 30px;
  margin: 5px;
}

.modifier-key--active {
  background-color: var(--primary-color300);
}

.event-label {
  margin: 5px;
  width: 180px;
  white-space: nowrap;
}

.event-label input[type='checkbox'] {
  vertical-align: bottom;
  margin: 0 10px;
}

.button {
  --button-text-color: var(--neutral-color900);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--primary-color500);
  border-radius: var(--border-radius);
  border: none;
  -webkit-box-shadow: var(--box-shadow-0);
          box-shadow: var(--box-shadow-0);
  color: var(--button-text-color);
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: var(--font-size-body-large);
  font-weight: var(--font-weight-heavy);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  letter-spacing: 0.02em;
  line-height: var(--ratio);
  padding: var(--s-2) var(--s0);
  text-align: center;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.button > img {
  margin-right: var(--s-2);
  width: 27px;
}
.button--xsmall {
  font-size: 0.5rem;
  padding: var(--s-4) var(--s-2);
}
.button--small {
  font-size: 0.7rem;
  padding: var(--s-4) var(--s-1);
}
.button--accent {
  /*--button-text-color: var(--accent-color700);*/
  background-color: var(--accent-color500);
  color: var(--button-text-color);
}

.button--events-story {
  background-color: #bbb;
  border-radius: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.button--events-story-active {
  background-color: #ddd;
}

.button--plain {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: inherit;
}

.button--neutral {
  background-color: var(--grey-color-200);
}

.button--github {
  background-color: #fff;
  --button-text-color: #111;
  color: var(--button-text-color);
}
.button--gitlab {
  background-color: #6653b5;
  color: white;
}

.button--google {
  background-color: #4285f4;
  color: white;
}
.button--google > img {
  background-color: #fff;
  border-radius: 2px;
}

.border {
  border: var(--border-default) solid var(--neutral-color050);
  border-radius: var(--border-radius);
}

.border--thin {
  border-width: var(--border-thin);
}

.playground-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  right: var(--s0);
  bottom: var(--s0);
  padding: var(--s-1) var(--s-1);
  border-radius: var(--border-radius);
  cursor: pointer;
  background-color: var(--primary-color700);
  -webkit-box-shadow: var(--box-shadow-1);
          box-shadow: var(--box-shadow-1);
  color: var(--neutral-color050);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.playground-link:hover {
  background-color: var(--primary-color500);
}

.playground-link:hover svg > path {
  -webkit-transition: fill 0.5s ease-in-out;
  transition: fill 0.5s ease-in-out;
}

.playground-link svg > path {
  fill: var(--neutral-color050);
  -webkit-transition: fill 0.5s ease-in-out;
  transition: fill 0.5s ease-in-out;
}

.playground-link__image > svg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.playground-link__text {
  padding-bottom: var(--s-5);
  max-height: -webkit-fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
  font-weight: var(--font-weight-heavy);
  font-size: 0.7rem;
}

.playground-link__text > svg {
  height: 12px;
  width: 12px;
  margin-left: var(--s-1);
}

.playground-link__text > span {
  margin-left: var(--s-1);
}

.display--none {
  display: none;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.error {
  background-color: var(--error-color300);
  color: var(--error-color900);
  border: none;
  border-radius: var(--border-radius);
  padding: var(--s-1);
  max-width: var(--measure);
}
.error a {
  border-bottom: 1px solid var(--error-color800);
}

input {
  background-color: var(--grey-color-100);
  border-radius: var(--border-radius);
  color: var(--font-color);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1em;
  width: 100%;
}
input:not([type='range']) {
  border: var(--border-thin) solid var(--grey-color-200);
  padding: var(--s-2);
}
input[type='range'] {
  margin: 0px;
}
input[type='checkbox'],
input[type='radio'] {
  max-width: var(--s1);
  height: var(--s1);
  max-height: var(--s1);
  margin: 0;
}
input:not([type='range']):focus {
  border: 2px solid var(--neutral-color400);
}
input:not([type='range']):disabled {
  border: var(--border-thin) solid var(--neutral-color700);
}
input:not([type='range']):disabled::-webkit-input-placeholder {
  opacity: 0.5;
  color: var(--neutral-color700);
}
input:not([type='range']):disabled::-moz-placeholder {
  opacity: 0.5;
  color: var(--neutral-color700);
}
input:not([type='range']):disabled:-ms-input-placeholder {
  opacity: 0.5;
  color: var(--neutral-color700);
}
input:not([type='range']):disabled::-ms-input-placeholder {
  opacity: 0.5;
  color: var(--neutral-color700);
}
input:not([type='range']):disabled::placeholder {
  opacity: 0.5;
  color: var(--neutral-color700);
}

.layout__main {
  width: calc(100% - 32px);
  max-width: 100%;
  min-height: calc(100vh - var(--topnav-height));
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: var(--background-color);
  border-top-left-radius: var(--spacer-xs);
  border-top-right-radius: var(--spacer-xs);
  overflow: hidden;
  position: relative;
}

.layout__main.not-rounded {
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.layout__left_cutoff {
  position: fixed;
  left: var(--spacer-4xs);
  top: 0;
  height: var(--spacer-xs);
  width: var(--spacer-xs);
  background-color: var(--topnav-background-color);
  clip-path: path('M 0 0 L 32 0 Q 2 2 0 32');
}

.layout__right_cutoff {
  position: fixed;
  right: var(--spacer-4xs);
  top: 0;
  height: var(--spacer-xs);
  width: var(--spacer-xs);
  background-color: var(--topnav-background-color);
  clip-path: path('M 32 0 L 32 32 Q 31 1 0 0');
}

.layout__content {
  padding-bottom: var(--s1);
  padding-left: var(--content-side-padding);
  padding-right: var(--content-side-padding);
}

.not-rounded .layout__content {
  padding-left: 0;
  padding-right: 0;
}

.layout__content .welcome {
  margin-bottom: calc(-1 * var(--s1));
  margin-left: calc(-1 * var(--content-side-padding));
  margin-right: calc(-1 * var(--content-side-padding));
}
.layout__content > .center {
  padding-top: var(--topnav-height);
}

.layout__content > .center > :first-child > :first-child {
  margin-top: 0;
}

.layout__sidenav .layout__main {
  margin-right: var(--spacer-4xs);
}

.layout__sidenav .layout__left_cutoff {
  top: var(--topnav-height);
  left: 0;
}

.layout__sidenav .layout__right_cutoff {
  top: var(--topnav-height);
  margin-left: 0;
}

.content > :first-child > :first-child {
  margin-top: 0;
}
.content {
  padding-top: var(--sidebar-layout-padding-top);
}
.content--full-width {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.paper {
  padding: var(--s2);
  -webkit-box-shadow: var(--box-shadow-1);
          box-shadow: var(--box-shadow-1);
  background-color: var(--neutral-color050);
  border-radius: var(--border-radius);
}
.paper--bg100 {
  background-color: var(--neutral-color100);
}

.chequered-background {
  background-color: var(--neutral-color900);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%25%27 height=%27100%25%27 viewBox=%270 0 100 60%27%3E%3Cg %3E%3Crect fill=%27%232a333c%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%232b353f%27 x=%2710%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%232c3743%27 y=%2710%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%232e3846%27 x=%2720%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%232f3a4a%27 x=%2710%27 y=%2710%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23313c4d%27 y=%2720%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23333e51%27 x=%2730%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23363f54%27 x=%2720%27 y=%2710%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23384158%27 x=%2710%27 y=%2720%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%233b425b%27 y=%2730%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%233e445e%27 x=%2740%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23414561%27 x=%2730%27 y=%2710%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23454765%27 x=%2720%27 y=%2720%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23484868%27 x=%2710%27 y=%2730%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%234c496a%27 y=%2740%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23504a6d%27 x=%2750%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23554c70%27 x=%2740%27 y=%2710%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23594d72%27 x=%2730%27 y=%2720%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%235e4e75%27 x=%2720%27 y=%2730%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23624f77%27 x=%2710%27 y=%2740%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23675079%27 y=%2750%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%236c507b%27 x=%2760%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%2371517d%27 x=%2750%27 y=%2710%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%2376527e%27 x=%2740%27 y=%2720%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%237c5380%27 x=%2730%27 y=%2730%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23815381%27 x=%2720%27 y=%2740%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23865482%27 x=%2710%27 y=%2750%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%238c5583%27 x=%2770%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23915583%27 x=%2760%27 y=%2710%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23965684%27 x=%2750%27 y=%2720%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%239c5784%27 x=%2740%27 y=%2730%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23a15784%27 x=%2730%27 y=%2740%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23a65884%27 x=%2720%27 y=%2750%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23ac5883%27 x=%2780%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23b15983%27 x=%2770%27 y=%2710%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23b65a82%27 x=%2760%27 y=%2720%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23bb5b81%27 x=%2750%27 y=%2730%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23c05b80%27 x=%2740%27 y=%2740%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23c55c7f%27 x=%2730%27 y=%2750%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23c95d7d%27 x=%2790%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23ce5f7c%27 x=%2780%27 y=%2710%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23d2607a%27 x=%2770%27 y=%2720%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23d76178%27 x=%2760%27 y=%2730%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23db6376%27 x=%2750%27 y=%2740%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23df6574%27 x=%2740%27 y=%2750%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23e26672%27 x=%2790%27 y=%2710%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23e6686f%27 x=%2780%27 y=%2720%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23e96b6c%27 x=%2770%27 y=%2730%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23ec6d6a%27 x=%2760%27 y=%2740%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23ef6f67%27 x=%2750%27 y=%2750%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23f27264%27 x=%2790%27 y=%2720%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23f47561%27 x=%2780%27 y=%2730%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23f6785e%27 x=%2770%27 y=%2740%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23f87b5b%27 x=%2760%27 y=%2750%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23fa7f58%27 x=%2790%27 y=%2730%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23fc8255%27 x=%2780%27 y=%2740%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23fd8651%27 x=%2770%27 y=%2750%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23fe894e%27 x=%2790%27 y=%2740%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23ff8d4a%27 x=%2780%27 y=%2750%27 width=%2711%27 height=%2711%27/%3E%3Crect fill=%27%23ff9147%27 x=%2790%27 y=%2750%27 width=%2711%27 height=%2711%27/%3E%3C/g%3E%3C/svg%3E");
  /* background by SVGBackgrounds.com */
  background-attachment: fixed;
  background-size: cover;
}

.gradient-background {
  background-image: url(../assets/CI-Background-1920x1080-4-80050b5af75e1f9771d2.jpeg);
  background-color: var(--neutral-color100);
  background-attachment: fixed;
  background-size: cover;
}

.card {
  background-color: var(--grey-color-100);
  border-bottom: none;
  border-radius: var(--spacer-2xs);
  -webkit-box-shadow: var(--box-shadow-3);
          box-shadow: var(--box-shadow-3);
  margin-bottom: var(--s1);
  max-width: 20rem;
  padding: var(--s-4);
  overflow: hidden;
}

.card--dark {
  background-color: var(--neutral-color900);
  color: var(--white-color);
}

.card:hover {
  -webkit-box-shadow: var(--box-shadow-4);
          box-shadow: var(--box-shadow-4);
}

.card__main__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  letter-spacing: var(--letter-spacing-h1);
  line-height: var(--line-height-h1);
}

.card__text {
  padding: var(--s0) var(--s0);
}

.card__text__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-h2);
  line-height: var(--line-height-h2);
}

.card--dark .card__text__title {
  color: var(--primary-color500);
}

.card--dark .card__text {
  color: var(--neutral-color200);
}

.card__image {
  background-color: var(--grey-color-200);
  padding: var(--s0);
  border-radius: var(--spacer-3xs);
}

.docs__framework-cards {
  .card__image {
    background-color: inherit;
  }
}

.card__image--md {
  height: 12rem;
}
.card__image--undraw {
  height: 13.5rem;
}
.card__image--dark {
  background-color: var(--grey-color-100);
}

.card__image__grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: var(--s-3);
}

label[for='checkbox'],
label[for='radio'] {
  padding-left: var(--s-3);
}

.select {
  display: block;
  font-size: 1em;
  color: var(--font-color);
  padding: var(--s-3) var(--s-2);
  padding-right: 2em; /* need extra padding to make enough room for the caret */
  max-width: 100%; /* useful when width is set to anything other than 100% */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  border: var(--border-thin) solid var(--grey-color-200);
  border-radius: var(--border-radius);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--grey-color-100);
  /*
    note: bg image below uses  an svg data uri for the arrow icon
    if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
  */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E5E8EB%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat, repeat;
  background-position:
    right var(--s-1) top 50%,
    0 0;
  background-size:
    var(--s-1) auto,
    100%;
}

.width-100pct {
  width: 100%;
}

i.fas {
  display: inline;
}

.scroll-up {
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  cursor: pointer;
}

.scroll-up:hover,
.link-icon:hover,
.copy-icon:hover {
  color: var(--primary-color500);
}

.link-icon {
  padding-left: 10px;
  position: relative;
  font-size: var(--font-size-caption);
  cursor: pointer;
}

.copy-button {
  background-color: var(--neutral-color600);
  color: var(--neutral-color100);
  border: none;
  position: relative;
  font-size: 0.6rem;
  cursor: pointer;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  width: 14%;
  float: right;
  border-radius: 0 0 var(--spacer-7xs) var(--spacer-7xs);
  padding: 0 var(--s-4);
  margin-right: var(--border-radius);
}

.copy-button:hover {
  background-color: var(--primary-color500);
}

.link-icon .copy-alert,
.link-icon .copy-alert:hover,
.link-icon:hover .copy-text,
.copy-icon .copy-alert,
.copy-icon .copy-alert:hover,
.copy-icon .copy-text {
  color: var(--font-color);
  -webkit-animation: fadeIn ease 0.3s;
          animation: fadeIn ease 0.3s;
  margin-left: var(--s-1);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  display: inline;
  background-color: var(--primary-color500);
  position: absolute;
  font-size: var(--font-size-caption);
  padding: 0 var(--s-4);
  border-radius: var(--border-radius);
  -webkit-transition: all;
  transition: all;
}

.link-icon .copy-text {
  display: none;
}

/* Cookie Banner */
button#ccc-recommended-settings {
  border-radius: 4px !important;
}

.download-buttons-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 21px;
}

.button.disabled {
  pointer-events: none;
  cursor: default;
  background-color: #848484;
  color: #ffffff80;
}

.api__main__title {
  margin-bottom: var(--s2);
}

/* #region MENU */

.menu {
  position: relative;
  padding: var(--spacer-6xs);
  background-color: transparent;
  font: inherit;
  cursor: pointer;
  display: inline-block;
}

.menu-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  background-color: var(--white-color);
  border: 1px solid var(--grey-color-200);
  border-radius: var(--spacer-4xs);
  padding: var(--spacer-4xs) var(--spacer-4xs);
  right: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--spacer-6xs);
  margin-top: var(--spacer-6xs);
  overflow: hidden;
  z-index: 100;
}

.menu-container.left {
  right: auto;
  left: 0;
}

/* #endregion MENU */

/* #region Product item */

.vertical .divider.full {
  width: 100%;
}

/* Language buttons */

.js-display {
  width: 24px;
  height: 24px;
  background-color: hsla(227, 69%, 3%, 1);
  -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE1IDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yIDhDMS40NDQ0NCA4IDAuOTcyMjIyIDcuODA1NTYgMC41ODMzMzMgNy40MTY2N0MwLjE5NDQ0NCA3LjAyNzc4IDAgNi41NTU1NiAwIDZWNC42NjY2N0gyVjZINFYwSDZWNkM2IDYuNTU1NTYgNS44MDU1NiA3LjAyNzc4IDUuNDE2NjcgNy40MTY2N0M1LjAyNzc4IDcuODA1NTYgNC41NTU1NiA4IDQgOEgyWk05LjMzMzMzIDhDOC45NTU1NiA4IDguNjM4ODkgNy44NzIyMiA4LjM4MzMzIDcuNjE2NjdDOC4xMjc3OCA3LjM2MTExIDggNy4wNDQ0NSA4IDYuNjY2NjdWNS4zMzMzM0gxMFY2SDEyLjY2NjdWNC42NjY2N0g5LjMzMzMzQzguOTU1NTYgNC42NjY2NyA4LjYzODg5IDQuNTM4ODkgOC4zODMzMyA0LjI4MzMzQzguMTI3NzggNC4wMjc3OCA4IDMuNzExMTEgOCAzLjMzMzMzVjEuMzMzMzNDOCAwLjk1NTU1NiA4LjEyNzc4IDAuNjM4ODg5IDguMzgzMzMgMC4zODMzMzNDOC42Mzg4OSAwLjEyNzc3OCA4Ljk1NTU2IDAgOS4zMzMzMyAwSDEzLjMzMzNDMTMuNzExMSAwIDE0LjAyNzggMC4xMjc3NzggMTQuMjgzMyAwLjM4MzMzM0MxNC41Mzg5IDAuNjM4ODg5IDE0LjY2NjcgMC45NTU1NTYgMTQuNjY2NyAxLjMzMzMzVjIuNjY2NjdIMTIuNjY2N1YySDEwVjMuMzMzMzNIMTMuMzMzM0MxMy43MTExIDMuMzMzMzMgMTQuMDI3OCAzLjQ2MTExIDE0LjI4MzMgMy43MTY2N0MxNC41Mzg5IDMuOTcyMjIgMTQuNjY2NyA0LjI4ODg5IDE0LjY2NjcgNC42NjY2N1Y2LjY2NjY3QzE0LjY2NjcgNy4wNDQ0NSAxNC41Mzg5IDcuMzYxMTEgMTQuMjgzMyA3LjYxNjY3QzE0LjAyNzggNy44NzIyMiAxMy43MTExIDggMTMuMzMzMyA4SDkuMzMzMzNaIi8+Cjwvc3ZnPgo=) no-repeat center;
          mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE1IDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yIDhDMS40NDQ0NCA4IDAuOTcyMjIyIDcuODA1NTYgMC41ODMzMzMgNy40MTY2N0MwLjE5NDQ0NCA3LjAyNzc4IDAgNi41NTU1NiAwIDZWNC42NjY2N0gyVjZINFYwSDZWNkM2IDYuNTU1NTYgNS44MDU1NiA3LjAyNzc4IDUuNDE2NjcgNy40MTY2N0M1LjAyNzc4IDcuODA1NTYgNC41NTU1NiA4IDQgOEgyWk05LjMzMzMzIDhDOC45NTU1NiA4IDguNjM4ODkgNy44NzIyMiA4LjM4MzMzIDcuNjE2NjdDOC4xMjc3OCA3LjM2MTExIDggNy4wNDQ0NSA4IDYuNjY2NjdWNS4zMzMzM0gxMFY2SDEyLjY2NjdWNC42NjY2N0g5LjMzMzMzQzguOTU1NTYgNC42NjY2NyA4LjYzODg5IDQuNTM4ODkgOC4zODMzMyA0LjI4MzMzQzguMTI3NzggNC4wMjc3OCA4IDMuNzExMTEgOCAzLjMzMzMzVjEuMzMzMzNDOCAwLjk1NTU1NiA4LjEyNzc4IDAuNjM4ODg5IDguMzgzMzMgMC4zODMzMzNDOC42Mzg4OSAwLjEyNzc3OCA4Ljk1NTU2IDAgOS4zMzMzMyAwSDEzLjMzMzNDMTMuNzExMSAwIDE0LjAyNzggMC4xMjc3NzggMTQuMjgzMyAwLjM4MzMzM0MxNC41Mzg5IDAuNjM4ODg5IDE0LjY2NjcgMC45NTU1NTYgMTQuNjY2NyAxLjMzMzMzVjIuNjY2NjdIMTIuNjY2N1YySDEwVjMuMzMzMzNIMTMuMzMzM0MxMy43MTExIDMuMzMzMzMgMTQuMDI3OCAzLjQ2MTExIDE0LjI4MzMgMy43MTY2N0MxNC41Mzg5IDMuOTcyMjIgMTQuNjY2NyA0LjI4ODg5IDE0LjY2NjcgNC42NjY2N1Y2LjY2NjY3QzE0LjY2NjcgNy4wNDQ0NSAxNC41Mzg5IDcuMzYxMTEgMTQuMjgzMyA3LjYxNjY3QzE0LjAyNzggNy44NzIyMiAxMy43MTExIDggMTMuMzMzMyA4SDkuMzMzMzNaIi8+Cjwvc3ZnPgo=) no-repeat center;
}

.react-display {
  width: 24px;
  height: 24px;
  background-color: hsla(227, 69%, 3%, 1);
  -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxtYXNrIGlkPSJtYXNrMF8yOTYzMl8yNzI0IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPgo8cmVjdCB4PSIwLjMzMzMzMyIgeT0iMC4zMzMzMzMiIHdpZHRoPSIxNS4zMzMzIiBoZWlnaHQ9IjE1LjMzMzMiIGZpbGw9IiNEOUQ5RDkiIHN0cm9rZT0iIzFDMUIxRiIgc3Ryb2tlLXdpZHRoPSIwLjY2NjY2NyIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMjk2MzJfMjcyNCkiPgo8cGF0aCBkPSJNNy45OTk5NCA4LjY0Nzk4QzguMTMxNDggOC42NDg0IDguMjYwMTkgOC42MTAzNyA4LjM2OTc1IDguNTM4NjVDOC40NzkzMiA4LjQ2NjkzIDguNTY0ODQgOC4zNjQ4IDguNjE1NDggOC4yNDUxNUM4LjY2NjEgOC4xMjU1MSA4LjY3OTU4IDcuOTkzNzcgOC42NTQxNiA3Ljg2NjU2QzguNjI4NzggNy43MzkzOSA4LjU2NTY2IDcuNjIyNDcgOC40NzI4IDcuNTMwNjZDOC4zNzk5NSA3LjQzODg0IDguMjYxNTMgNy4zNzYyOCA4LjEzMjU3IDcuMzUwODFDOC4wMDM1OSA3LjMyNTM4IDcuODY5ODYgNy4zMzgyMSA3Ljc0ODMgNy4zODc3M0M3LjYyNjc1IDcuNDM3MjUgNy41MjI4MSA3LjUyMTE4IDcuNDQ5NjggNy42Mjg5NUM3LjM3NjU3IDcuNzM2NjkgNy4zMzc1MyA3Ljg2MzQyIDcuMzM3NTMgNy45OTMwMkM3LjMzNzM0IDguMDc4OTMgNy4zNTQzNiA4LjE2Mzk5IDcuMzg3NTYgOC4yNDMzOEM3LjQyMDczIDguMzIyODEgNy40Njk0OSA4LjM5NDk4IDcuNTMxMDMgOC40NTU4QzcuNTkyNTQgOC41MTY2MyA3LjY2NTYxIDguNTY0OTMgNy43NDYwOCA4LjU5Nzg5QzcuODI2NTUgOC42MzA4NSA3LjkxMjggOC42NDc4OSA3Ljk5OTk0IDguNjQ3OThaIi8+CjxwYXRoIGQ9Ik0xMi41MTA0IDUuNzg0MTlDMTIuMzYxMyA1LjczMjc4IDEyLjIxMTEgNS42ODQ5MSAxMi4wNTk4IDUuNjQwNTVDMTIuMDg0OSA1LjUzNzU1IDEyLjEwODEgNS40MzM5MiAxMi4xMjkyIDUuMzI5NzVDMTIuNDcwNSAzLjY1NDk1IDEyLjI0NzQgMi4zMDU3MSAxMS40ODU4IDEuODYxNTZDMTAuNzU2NyAxLjQzNTM2IDkuNTYwOTQgMS44Nzk1MSA4LjM1NDY2IDIuOTQxNDhDOC4yMzYwNSAzLjA0NjI2IDguMTE5ODggMy4xNTQxOSA4LjAwNjEyIDMuMjY1MjVDNy45MzAzIDMuMTkxNDcgNy44NTI1MSAzLjExOTI2IDcuNzcyOCAzLjA0ODYyQzYuNTA4NDggMS45MTMwNyA1LjI0MTI0IDEuNDM0NzcgNC40ODA2MSAxLjg4MDRDMy43NTE0NyAyLjMwNzQ4IDMuNTM0NzcgMy41NzU3OCAzLjg0MTg4IDUuMTYzMTNDMy44NzI2IDUuMzIwMTIgMy45MDcxMiA1LjQ3NjQyIDMuOTQ1NDIgNS42MzIwM0MzLjc2NjA1IDUuNjgzNTMgMy41OTI4MSA1LjczODU3IDMuNDI3MTUgNS43OTY4NUMxLjk0NjcxIDYuMzE5MjkgMSA3LjEzODQ0IDEgNy45ODc4OEMxIDguODY1NjEgMi4wMTYxMiA5Ljc0NTY4IDMuNTU5ODUgMTAuMjc5M0MzLjY4NTA3IDEwLjMyMjMgMy44MTE0NSAxMC4zNjIyIDMuOTM5IDEwLjM5OTFDMy44OTc1OSAxMC41NjU3IDMuODYwOTQgMTAuNzM0MSAzLjgyOTA1IDEwLjkwNDVDMy41MzczOSAxMi40NjQ1IDMuNzY0ODggMTMuNzAyNyA0LjQ5MjU3IDE0LjEyNzJDNS4yNDQxNiAxNC41NjU0IDYuNTA0OTggMTQuMTE1MSA3LjczNCAxMy4wMjlDNy44MzEyNCAxMi45NDMxIDcuOTI4NDUgMTIuODUyMyA4LjAyNTY2IDEyLjc1NjdDOC4xNDg1NSAxMi44NzY2IDguMjc0OTUgMTIuOTkzIDguNDA0ODEgMTMuMTA1OEM5LjU5NDc1IDE0LjE0MTMgMTAuNzY5OCAxNC41NTk1IDExLjQ5NjMgMTQuMTMzOUMxMi4yNDc0IDEzLjY5NDIgMTIuNDkxNSAxMi4zNjM4IDEyLjE3NDUgMTAuNzQ1MkMxMi4xNTAxIDEwLjYyMTYgMTIuMTIyMSAxMC40OTU0IDEyLjA5MDUgMTAuMzY2N0MxMi4xNzkxIDEwLjM0MDIgMTIuMjY1OSAxMC4zMTI5IDEyLjM1MDkgMTAuMjg0NkMxMy45NTUgOS43NDY4NSAxNSA4Ljg3NzM3IDE1IDcuOTg4NzhDMTQuOTk5NCA3LjEzNTIgMTQuMDIyNCA2LjMxMDc0IDEyLjUxMDQgNS43ODQxOVpNOC43NDgwOSAzLjM5NzdDOS43ODE0NCAyLjQ4NzkxIDEwLjc0NzQgMi4xMjg4MiAxMS4xODc4IDIuMzg1NDhDMTEuNjU2NSAyLjY1ODkyIDExLjgzODggMy43NjE1IDExLjU0NDIgNS4yMDc1OEMxMS41MjQ3IDUuMzAxNzYgMTEuNTAzNyA1LjM5NTY3IDExLjQ4MTIgNS40ODkyNkMxMC44NjQ1IDUuMzQ3NzEgMTAuMjM5MiA1LjI0NzggOS42MDkzNiA1LjE5MDIxQzkuMjQ4NzQgNC42NjU5NiA4Ljg1MzQyIDQuMTY2OTEgOC40MjYxMiAzLjY5NjQ1QzguNTMwNzIgMy41OTQwMyA4LjYzNzg1IDMuNDk0NDQgOC43NDc1MSAzLjM5NzdIOC43NDgwOVpNNS4xMzM2MiA4LjcxMzcyQzUuMjYwMiA4Ljk2MDk2IDUuMzkyNSA5LjIwNTE4IDUuNTMwNTUgOS40NDYzM0M1LjY3MTEzIDkuNjkyNDEgNS44MTc2NCA5LjkzNDgyIDUuOTcwMDkgMTAuMTczNkM1LjUzNjcgMTAuMTI2MSA1LjEwNjA1IDEwLjA1NiA0LjY3OTgxIDkuOTYzNzZDNC44MDM0NyA5LjU1OTk1IDQuOTU1NyA5LjE0MDUxIDUuMTMzNjIgOC43MTM3MlpNNS4xMzM2MiA3LjI5MTJDNC45NTg2MiA2Ljg3MzUzIDQuODEwNDYgNi40NjI2NCA0LjY4ODg1IDYuMDY1ODdDNS4wODg0MyA1Ljk3NTUgNS41MTQyNCA1LjkwMTYyIDUuOTU4MTMgNS44NDU3MUM1LjgwOTQgNi4wOCA1LjY2NjI5IDYuMzE3NzMgNS41Mjg4MiA2LjU1ODg5QzUuMzkxMzQgNi44MDAwNCA1LjI1OTMyIDcuMDQ0MTQgNS4xMzI3NCA3LjI5MTJINS4xMzM2MlpNNS40NTE1MSA4LjAwMjYxQzUuNjM1ODYgNy42MTQ2NiA1LjgzNDM4IDcuMjM0MTggNi4wNDcwOSA2Ljg2MTE3QzYuMjU5NTkgNi40ODgzNCA2LjQ4NTg0IDYuMTI0MDYgNi43MjU3NiA1Ljc2ODI5QzcuMTQyMjYgNS43MzY1IDcuNTY5MjMgNS43MTk3MyA4LjAwMDU4IDUuNzE5NzNDOC40MzE5MyA1LjcxOTczIDguODYxNTUgNS43MzY1IDkuMjc3NzQgNS43Njg1OUM5LjUxNTEzIDYuMTIzNTUgOS43NDAwMiA2LjQ4NjU3IDkuOTUyMzMgNi44NTc2M0MxMC4xNjQ3IDcuMjI4NjkgMTAuMzY1OCA3LjYwNzQgMTAuNTU1OCA3Ljk5Mzc2QzEwLjM2ODMgOC4zODMwOSAxMC4xNjc3IDguNzY1MTMgOS45NTM3OSA5LjEzOTk0QzkuNzQxNjYgOS41MTI3NCA5LjUxODA2IDkuODc4MTMgOS4yODI5OCAxMC4yMzZDOC44NjczOSAxMC4yNjU1IDguNDM3MiAxMC4yODE2IDcuOTk5NyAxMC4yODE2QzcuNTYyMjMgMTAuMjgxNiA3LjE0MDIyIDEwLjI2NzggNi43MzIxOCAxMC4yNDFDNi40OTA1IDkuODg0MSA2LjI2MjQyIDkuNTE4MjYgNi4wNDc5NCA5LjE0MzQ1QzUuODMzNSA4Ljc2ODY3IDUuNjM0NCA4LjM4ODQgNS40NTA2NiA4LjAwMjYxSDUuNDUxNTFaTTEwLjQ3MTUgOS40NDIyMkMxMC42MTI1IDkuMTk1MzcgMTAuNzQ3OCA4Ljk0NTI3IDEwLjg3NzUgOC42OTE5NEMxMS4wNTUzIDkuMDk4NzYgMTEuMjEyMiA5LjUxNDUxIDExLjM0NzYgOS45Mzc1OEMxMC45MTY0IDEwLjAzNTYgMTAuNDgwMyAxMC4xMTA3IDEwLjA0MTMgMTAuMTYyN0MxMC4xODk0IDkuOTI1NTIgMTAuMzMyOSA5LjY4NTMzIDEwLjQ3MTUgOS40NDIyMlpNMTAuODcxNiA3LjI5MTVDMTAuNzQyNSA3LjA0MzI3IDEwLjYwODMgNi43OTc5NyAxMC40Njg5IDYuNTU1NjVDMTAuMzMyNyA2LjMxNjY1IDEwLjE5MDkgNi4wODA2IDEwLjA0MzMgNS44NDc0OEMxMC40ODk5IDUuOTA0NTYgMTAuOTE4MyA1Ljk4MDUgMTEuMzE5OSA2LjA3MzIyQzExLjE5MDggNi40ODY2MyAxMS4wNDEyIDYuODkzMjQgMTAuODcxNiA3LjI5MTVaTTguMDA2NDIgNC4xMjg4NEM4LjI5NzY1IDQuNDQ5OTkgOC41NzI2MyA0Ljc4NTc3IDguODMwMzUgNS4xMzQ4N0M4LjI3OTEyIDUuMTA4MzkgNy43Mjc0OSA1LjEwODM5IDcuMTc1NDkgNS4xMzQ4N0M3LjQ0NzYxIDQuNzcxNjcgNy43MjYxNSA0LjQzNDY1IDguMDA2NDIgNC4xMjg4NFpNNC43ODE1OCAyLjQwMzQzQzUuMjUgMi4xMjkxMSA2LjI4NTY3IDIuNTIxMTcgNy4zNzczIDMuNTAwNDNDNy40NDcwMyAzLjU2MzEyIDcuNTE3MyAzLjYyODc2IDcuNTg3MyAzLjY5Njc1QzcuMTU3ODEgNC4xNjcxNCA2Ljc1OTY5IDQuNjY1NzYgNi4zOTU2IDUuMTg5MzRDNS43NjcxNSA1LjI0NjQ4IDUuMTQzMDYgNS4zNDQ4IDQuNTI3MjcgNS40ODM2OEM0LjQ5MTY5IDUuMzM5MjUgNC40NTk2MSA1LjE5Mzg0IDQuNDMxMDMgNS4wNDc0N0M0LjE2NzA3IDMuNjg2NzQgNC4zNDE3NyAyLjY2MDk4IDQuNzgxNTggMi40MDM0M1pNNC4wOTg4NCA5LjgxNjMxQzMuOTgyMTcgOS43ODI3NSAzLjg2Njk2IDkuNzQ2MzYgMy43NTMyMiA5LjcwNzFDMy4wNzA3NSA5LjQ3MTY1IDIuNTA2OTggOS4xNjQzNSAyLjExOTk1IDguODI5NzFDMS43NzM0NyA4LjUyOTc2IDEuNTk3ODkgOC4yMzA0MiAxLjU5Nzg5IDcuOTg3ODhDMS41OTc4OSA3LjQ3MjUyIDIuMzU3OTQgNi44MTQ5NSAzLjYyNTQ3IDYuMzY5MDJDMy43ODQ3MiA2LjMxMzExIDMuOTQ1MzIgNi4yNjIgNC4xMDczIDYuMjE1NjlDNC4yOTU1NCA2LjgyNjIzIDQuNTIzNTMgNy40MjM1NyA0Ljc4OTc3IDguMDAzNzhDNC41MjAzNiA4LjU5MjAzIDQuMjg5NTQgOS4xOTc1IDQuMDk4ODQgOS44MTYzMVpNNy4zMzk5OSAxMi41NzM0QzYuNzk2NjQgMTMuMDUzNyA2LjI1MjQgMTMuMzk0MyA1Ljc3MjYzIDEzLjU2NTlDNS4zNDE1OCAxMy43MTk4IDQuOTk4MjggMTMuNzI0MiA0Ljc5MDkzIDEzLjYwMzNDNC4zNDkzNSAxMy4zNDU3IDQuMTY1NjEgMTIuMzUxMSA0LjQxNjE1IDExLjAxNzJDNC40NDU4OSAxMC44NjAyIDQuNDc5OTEgMTAuNzAzMiA0LjUxODIzIDEwLjU0NjNDNS4xNDAyIDEwLjY4MTUgNS43NzA1NiAxMC43NzM4IDYuNDA0OTQgMTAuODIyN0M2Ljc3MjYgMTEuMzQ4OSA3LjE3Mzk3IDExLjg1MDQgNy42MDY1NyAxMi4zMjM4QzcuNTE5NjUgMTIuNDEgNy40MzA2OSAxMi40OTMgNy4zMzk5OSAxMi41NzM0Wk04LjAyMzA0IDExLjg4OTlDNy43Mzk1NCAxMS41ODA2IDcuNDU2NjUgMTEuMjM4MyA3LjE4MDc2IDEwLjg3MDNDNy40NDg4NiAxMC44ODA5IDcuNzIxODYgMTAuODg2MiA3Ljk5OTcgMTAuODg2MkM4LjI4NDk2IDEwLjg4NjIgOC41NjcyNyAxMC44OCA4Ljg0NTUxIDEwLjg2NzRDOC41ODg3MyAxMS4yMjIxIDguMzE0MjQgMTEuNTYzNCA4LjAyMzA0IDExLjg4OTlaTTExLjY1NDcgMTIuNzMxNEMxMS41NzEzIDEzLjE4NTkgMTEuNDAzNiAxMy40ODkgMTEuMTk2MiAxMy42MTAzQzEwLjc1NSAxMy44Njg3IDkuODExNDggMTMuNTMyOSA4Ljc5NDE2IDEyLjY0NzJDOC42Nzc1MSAxMi41NDYgOC41NjA4NSAxMi40Mzc0IDguNDQyMTYgMTIuMzIzNUM4Ljg2NjMgMTEuODQ4MyA5LjI1ODMgMTEuMzQ0OCA5LjYxNTQ4IDEwLjgxNjVDMTAuMjUzNCAxMC43NjE5IDEwLjg4NjggMTAuNjYzMSAxMS41MTEyIDEwLjUyMDdDMTEuNTM5OCAxMC42MzcyIDExLjU2NTEgMTAuNzUxNCAxMS41ODcgMTAuODYzM0MxMS43MjczIDExLjU3ODUgMTEuNzQ3NSAxMi4yMjU1IDExLjY1NDcgMTIuNzMxNFpNMTIuMTYyMiA5LjcxMDM0QzEyLjA4NTggOS43MzU5NiAxMi4wMDcgOS43NjA2NyAxMS45MjcxIDkuNzg0ODJDMTEuNzMxMyA5LjE3MTQgMTEuNDk0NCA4LjU3MjExIDExLjIxODEgNy45OTExMkMxMS40ODQxIDcuNDE3ODcgMTEuNzExNyA2LjgyNzMxIDExLjg5OTQgNi4yMjMzNEMxMi4wNDI2IDYuMjY1NDIgMTIuMTgxNyA2LjMwOTU3IDEyLjMxNTYgNi4zNTYzN0MxMy42MTExIDYuODA3MyAxNC40MDE1IDcuNDc0ODYgMTQuNDAxNSA3Ljk4Nzg4QzE0LjQwMTUgOC41MzUzNCAxMy41NDc5IDkuMjQ1ODggMTIuMTYyMiA5LjcxMDM0WiIvPgo8L2c+Cjwvc3ZnPgo=) no-repeat center;
          mask: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxtYXNrIGlkPSJtYXNrMF8yOTYzMl8yNzI0IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPgo8cmVjdCB4PSIwLjMzMzMzMyIgeT0iMC4zMzMzMzMiIHdpZHRoPSIxNS4zMzMzIiBoZWlnaHQ9IjE1LjMzMzMiIGZpbGw9IiNEOUQ5RDkiIHN0cm9rZT0iIzFDMUIxRiIgc3Ryb2tlLXdpZHRoPSIwLjY2NjY2NyIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfMjk2MzJfMjcyNCkiPgo8cGF0aCBkPSJNNy45OTk5NCA4LjY0Nzk4QzguMTMxNDggOC42NDg0IDguMjYwMTkgOC42MTAzNyA4LjM2OTc1IDguNTM4NjVDOC40NzkzMiA4LjQ2NjkzIDguNTY0ODQgOC4zNjQ4IDguNjE1NDggOC4yNDUxNUM4LjY2NjEgOC4xMjU1MSA4LjY3OTU4IDcuOTkzNzcgOC42NTQxNiA3Ljg2NjU2QzguNjI4NzggNy43MzkzOSA4LjU2NTY2IDcuNjIyNDcgOC40NzI4IDcuNTMwNjZDOC4zNzk5NSA3LjQzODg0IDguMjYxNTMgNy4zNzYyOCA4LjEzMjU3IDcuMzUwODFDOC4wMDM1OSA3LjMyNTM4IDcuODY5ODYgNy4zMzgyMSA3Ljc0ODMgNy4zODc3M0M3LjYyNjc1IDcuNDM3MjUgNy41MjI4MSA3LjUyMTE4IDcuNDQ5NjggNy42Mjg5NUM3LjM3NjU3IDcuNzM2NjkgNy4zMzc1MyA3Ljg2MzQyIDcuMzM3NTMgNy45OTMwMkM3LjMzNzM0IDguMDc4OTMgNy4zNTQzNiA4LjE2Mzk5IDcuMzg3NTYgOC4yNDMzOEM3LjQyMDczIDguMzIyODEgNy40Njk0OSA4LjM5NDk4IDcuNTMxMDMgOC40NTU4QzcuNTkyNTQgOC41MTY2MyA3LjY2NTYxIDguNTY0OTMgNy43NDYwOCA4LjU5Nzg5QzcuODI2NTUgOC42MzA4NSA3LjkxMjggOC42NDc4OSA3Ljk5OTk0IDguNjQ3OThaIi8+CjxwYXRoIGQ9Ik0xMi41MTA0IDUuNzg0MTlDMTIuMzYxMyA1LjczMjc4IDEyLjIxMTEgNS42ODQ5MSAxMi4wNTk4IDUuNjQwNTVDMTIuMDg0OSA1LjUzNzU1IDEyLjEwODEgNS40MzM5MiAxMi4xMjkyIDUuMzI5NzVDMTIuNDcwNSAzLjY1NDk1IDEyLjI0NzQgMi4zMDU3MSAxMS40ODU4IDEuODYxNTZDMTAuNzU2NyAxLjQzNTM2IDkuNTYwOTQgMS44Nzk1MSA4LjM1NDY2IDIuOTQxNDhDOC4yMzYwNSAzLjA0NjI2IDguMTE5ODggMy4xNTQxOSA4LjAwNjEyIDMuMjY1MjVDNy45MzAzIDMuMTkxNDcgNy44NTI1MSAzLjExOTI2IDcuNzcyOCAzLjA0ODYyQzYuNTA4NDggMS45MTMwNyA1LjI0MTI0IDEuNDM0NzcgNC40ODA2MSAxLjg4MDRDMy43NTE0NyAyLjMwNzQ4IDMuNTM0NzcgMy41NzU3OCAzLjg0MTg4IDUuMTYzMTNDMy44NzI2IDUuMzIwMTIgMy45MDcxMiA1LjQ3NjQyIDMuOTQ1NDIgNS42MzIwM0MzLjc2NjA1IDUuNjgzNTMgMy41OTI4MSA1LjczODU3IDMuNDI3MTUgNS43OTY4NUMxLjk0NjcxIDYuMzE5MjkgMSA3LjEzODQ0IDEgNy45ODc4OEMxIDguODY1NjEgMi4wMTYxMiA5Ljc0NTY4IDMuNTU5ODUgMTAuMjc5M0MzLjY4NTA3IDEwLjMyMjMgMy44MTE0NSAxMC4zNjIyIDMuOTM5IDEwLjM5OTFDMy44OTc1OSAxMC41NjU3IDMuODYwOTQgMTAuNzM0MSAzLjgyOTA1IDEwLjkwNDVDMy41MzczOSAxMi40NjQ1IDMuNzY0ODggMTMuNzAyNyA0LjQ5MjU3IDE0LjEyNzJDNS4yNDQxNiAxNC41NjU0IDYuNTA0OTggMTQuMTE1MSA3LjczNCAxMy4wMjlDNy44MzEyNCAxMi45NDMxIDcuOTI4NDUgMTIuODUyMyA4LjAyNTY2IDEyLjc1NjdDOC4xNDg1NSAxMi44NzY2IDguMjc0OTUgMTIuOTkzIDguNDA0ODEgMTMuMTA1OEM5LjU5NDc1IDE0LjE0MTMgMTAuNzY5OCAxNC41NTk1IDExLjQ5NjMgMTQuMTMzOUMxMi4yNDc0IDEzLjY5NDIgMTIuNDkxNSAxMi4zNjM4IDEyLjE3NDUgMTAuNzQ1MkMxMi4xNTAxIDEwLjYyMTYgMTIuMTIyMSAxMC40OTU0IDEyLjA5MDUgMTAuMzY2N0MxMi4xNzkxIDEwLjM0MDIgMTIuMjY1OSAxMC4zMTI5IDEyLjM1MDkgMTAuMjg0NkMxMy45NTUgOS43NDY4NSAxNSA4Ljg3NzM3IDE1IDcuOTg4NzhDMTQuOTk5NCA3LjEzNTIgMTQuMDIyNCA2LjMxMDc0IDEyLjUxMDQgNS43ODQxOVpNOC43NDgwOSAzLjM5NzdDOS43ODE0NCAyLjQ4NzkxIDEwLjc0NzQgMi4xMjg4MiAxMS4xODc4IDIuMzg1NDhDMTEuNjU2NSAyLjY1ODkyIDExLjgzODggMy43NjE1IDExLjU0NDIgNS4yMDc1OEMxMS41MjQ3IDUuMzAxNzYgMTEuNTAzNyA1LjM5NTY3IDExLjQ4MTIgNS40ODkyNkMxMC44NjQ1IDUuMzQ3NzEgMTAuMjM5MiA1LjI0NzggOS42MDkzNiA1LjE5MDIxQzkuMjQ4NzQgNC42NjU5NiA4Ljg1MzQyIDQuMTY2OTEgOC40MjYxMiAzLjY5NjQ1QzguNTMwNzIgMy41OTQwMyA4LjYzNzg1IDMuNDk0NDQgOC43NDc1MSAzLjM5NzdIOC43NDgwOVpNNS4xMzM2MiA4LjcxMzcyQzUuMjYwMiA4Ljk2MDk2IDUuMzkyNSA5LjIwNTE4IDUuNTMwNTUgOS40NDYzM0M1LjY3MTEzIDkuNjkyNDEgNS44MTc2NCA5LjkzNDgyIDUuOTcwMDkgMTAuMTczNkM1LjUzNjcgMTAuMTI2MSA1LjEwNjA1IDEwLjA1NiA0LjY3OTgxIDkuOTYzNzZDNC44MDM0NyA5LjU1OTk1IDQuOTU1NyA5LjE0MDUxIDUuMTMzNjIgOC43MTM3MlpNNS4xMzM2MiA3LjI5MTJDNC45NTg2MiA2Ljg3MzUzIDQuODEwNDYgNi40NjI2NCA0LjY4ODg1IDYuMDY1ODdDNS4wODg0MyA1Ljk3NTUgNS41MTQyNCA1LjkwMTYyIDUuOTU4MTMgNS44NDU3MUM1LjgwOTQgNi4wOCA1LjY2NjI5IDYuMzE3NzMgNS41Mjg4MiA2LjU1ODg5QzUuMzkxMzQgNi44MDAwNCA1LjI1OTMyIDcuMDQ0MTQgNS4xMzI3NCA3LjI5MTJINS4xMzM2MlpNNS40NTE1MSA4LjAwMjYxQzUuNjM1ODYgNy42MTQ2NiA1LjgzNDM4IDcuMjM0MTggNi4wNDcwOSA2Ljg2MTE3QzYuMjU5NTkgNi40ODgzNCA2LjQ4NTg0IDYuMTI0MDYgNi43MjU3NiA1Ljc2ODI5QzcuMTQyMjYgNS43MzY1IDcuNTY5MjMgNS43MTk3MyA4LjAwMDU4IDUuNzE5NzNDOC40MzE5MyA1LjcxOTczIDguODYxNTUgNS43MzY1IDkuMjc3NzQgNS43Njg1OUM5LjUxNTEzIDYuMTIzNTUgOS43NDAwMiA2LjQ4NjU3IDkuOTUyMzMgNi44NTc2M0MxMC4xNjQ3IDcuMjI4NjkgMTAuMzY1OCA3LjYwNzQgMTAuNTU1OCA3Ljk5Mzc2QzEwLjM2ODMgOC4zODMwOSAxMC4xNjc3IDguNzY1MTMgOS45NTM3OSA5LjEzOTk0QzkuNzQxNjYgOS41MTI3NCA5LjUxODA2IDkuODc4MTMgOS4yODI5OCAxMC4yMzZDOC44NjczOSAxMC4yNjU1IDguNDM3MiAxMC4yODE2IDcuOTk5NyAxMC4yODE2QzcuNTYyMjMgMTAuMjgxNiA3LjE0MDIyIDEwLjI2NzggNi43MzIxOCAxMC4yNDFDNi40OTA1IDkuODg0MSA2LjI2MjQyIDkuNTE4MjYgNi4wNDc5NCA5LjE0MzQ1QzUuODMzNSA4Ljc2ODY3IDUuNjM0NCA4LjM4ODQgNS40NTA2NiA4LjAwMjYxSDUuNDUxNTFaTTEwLjQ3MTUgOS40NDIyMkMxMC42MTI1IDkuMTk1MzcgMTAuNzQ3OCA4Ljk0NTI3IDEwLjg3NzUgOC42OTE5NEMxMS4wNTUzIDkuMDk4NzYgMTEuMjEyMiA5LjUxNDUxIDExLjM0NzYgOS45Mzc1OEMxMC45MTY0IDEwLjAzNTYgMTAuNDgwMyAxMC4xMTA3IDEwLjA0MTMgMTAuMTYyN0MxMC4xODk0IDkuOTI1NTIgMTAuMzMyOSA5LjY4NTMzIDEwLjQ3MTUgOS40NDIyMlpNMTAuODcxNiA3LjI5MTVDMTAuNzQyNSA3LjA0MzI3IDEwLjYwODMgNi43OTc5NyAxMC40Njg5IDYuNTU1NjVDMTAuMzMyNyA2LjMxNjY1IDEwLjE5MDkgNi4wODA2IDEwLjA0MzMgNS44NDc0OEMxMC40ODk5IDUuOTA0NTYgMTAuOTE4MyA1Ljk4MDUgMTEuMzE5OSA2LjA3MzIyQzExLjE5MDggNi40ODY2MyAxMS4wNDEyIDYuODkzMjQgMTAuODcxNiA3LjI5MTVaTTguMDA2NDIgNC4xMjg4NEM4LjI5NzY1IDQuNDQ5OTkgOC41NzI2MyA0Ljc4NTc3IDguODMwMzUgNS4xMzQ4N0M4LjI3OTEyIDUuMTA4MzkgNy43Mjc0OSA1LjEwODM5IDcuMTc1NDkgNS4xMzQ4N0M3LjQ0NzYxIDQuNzcxNjcgNy43MjYxNSA0LjQzNDY1IDguMDA2NDIgNC4xMjg4NFpNNC43ODE1OCAyLjQwMzQzQzUuMjUgMi4xMjkxMSA2LjI4NTY3IDIuNTIxMTcgNy4zNzczIDMuNTAwNDNDNy40NDcwMyAzLjU2MzEyIDcuNTE3MyAzLjYyODc2IDcuNTg3MyAzLjY5Njc1QzcuMTU3ODEgNC4xNjcxNCA2Ljc1OTY5IDQuNjY1NzYgNi4zOTU2IDUuMTg5MzRDNS43NjcxNSA1LjI0NjQ4IDUuMTQzMDYgNS4zNDQ4IDQuNTI3MjcgNS40ODM2OEM0LjQ5MTY5IDUuMzM5MjUgNC40NTk2MSA1LjE5Mzg0IDQuNDMxMDMgNS4wNDc0N0M0LjE2NzA3IDMuNjg2NzQgNC4zNDE3NyAyLjY2MDk4IDQuNzgxNTggMi40MDM0M1pNNC4wOTg4NCA5LjgxNjMxQzMuOTgyMTcgOS43ODI3NSAzLjg2Njk2IDkuNzQ2MzYgMy43NTMyMiA5LjcwNzFDMy4wNzA3NSA5LjQ3MTY1IDIuNTA2OTggOS4xNjQzNSAyLjExOTk1IDguODI5NzFDMS43NzM0NyA4LjUyOTc2IDEuNTk3ODkgOC4yMzA0MiAxLjU5Nzg5IDcuOTg3ODhDMS41OTc4OSA3LjQ3MjUyIDIuMzU3OTQgNi44MTQ5NSAzLjYyNTQ3IDYuMzY5MDJDMy43ODQ3MiA2LjMxMzExIDMuOTQ1MzIgNi4yNjIgNC4xMDczIDYuMjE1NjlDNC4yOTU1NCA2LjgyNjIzIDQuNTIzNTMgNy40MjM1NyA0Ljc4OTc3IDguMDAzNzhDNC41MjAzNiA4LjU5MjAzIDQuMjg5NTQgOS4xOTc1IDQuMDk4ODQgOS44MTYzMVpNNy4zMzk5OSAxMi41NzM0QzYuNzk2NjQgMTMuMDUzNyA2LjI1MjQgMTMuMzk0MyA1Ljc3MjYzIDEzLjU2NTlDNS4zNDE1OCAxMy43MTk4IDQuOTk4MjggMTMuNzI0MiA0Ljc5MDkzIDEzLjYwMzNDNC4zNDkzNSAxMy4zNDU3IDQuMTY1NjEgMTIuMzUxMSA0LjQxNjE1IDExLjAxNzJDNC40NDU4OSAxMC44NjAyIDQuNDc5OTEgMTAuNzAzMiA0LjUxODIzIDEwLjU0NjNDNS4xNDAyIDEwLjY4MTUgNS43NzA1NiAxMC43NzM4IDYuNDA0OTQgMTAuODIyN0M2Ljc3MjYgMTEuMzQ4OSA3LjE3Mzk3IDExLjg1MDQgNy42MDY1NyAxMi4zMjM4QzcuNTE5NjUgMTIuNDEgNy40MzA2OSAxMi40OTMgNy4zMzk5OSAxMi41NzM0Wk04LjAyMzA0IDExLjg4OTlDNy43Mzk1NCAxMS41ODA2IDcuNDU2NjUgMTEuMjM4MyA3LjE4MDc2IDEwLjg3MDNDNy40NDg4NiAxMC44ODA5IDcuNzIxODYgMTAuODg2MiA3Ljk5OTcgMTAuODg2MkM4LjI4NDk2IDEwLjg4NjIgOC41NjcyNyAxMC44OCA4Ljg0NTUxIDEwLjg2NzRDOC41ODg3MyAxMS4yMjIxIDguMzE0MjQgMTEuNTYzNCA4LjAyMzA0IDExLjg4OTlaTTExLjY1NDcgMTIuNzMxNEMxMS41NzEzIDEzLjE4NTkgMTEuNDAzNiAxMy40ODkgMTEuMTk2MiAxMy42MTAzQzEwLjc1NSAxMy44Njg3IDkuODExNDggMTMuNTMyOSA4Ljc5NDE2IDEyLjY0NzJDOC42Nzc1MSAxMi41NDYgOC41NjA4NSAxMi40Mzc0IDguNDQyMTYgMTIuMzIzNUM4Ljg2NjMgMTEuODQ4MyA5LjI1ODMgMTEuMzQ0OCA5LjYxNTQ4IDEwLjgxNjVDMTAuMjUzNCAxMC43NjE5IDEwLjg4NjggMTAuNjYzMSAxMS41MTEyIDEwLjUyMDdDMTEuNTM5OCAxMC42MzcyIDExLjU2NTEgMTAuNzUxNCAxMS41ODcgMTAuODYzM0MxMS43MjczIDExLjU3ODUgMTEuNzQ3NSAxMi4yMjU1IDExLjY1NDcgMTIuNzMxNFpNMTIuMTYyMiA5LjcxMDM0QzEyLjA4NTggOS43MzU5NiAxMi4wMDcgOS43NjA2NyAxMS45MjcxIDkuNzg0ODJDMTEuNzMxMyA5LjE3MTQgMTEuNDk0NCA4LjU3MjExIDExLjIxODEgNy45OTExMkMxMS40ODQxIDcuNDE3ODcgMTEuNzExNyA2LjgyNzMxIDExLjg5OTQgNi4yMjMzNEMxMi4wNDI2IDYuMjY1NDIgMTIuMTgxNyA2LjMwOTU3IDEyLjMxNTYgNi4zNTYzN0MxMy42MTExIDYuODA3MyAxNC40MDE1IDcuNDc0ODYgMTQuNDAxNSA3Ljk4Nzg4QzE0LjQwMTUgOC41MzUzNCAxMy41NDc5IDkuMjQ1ODggMTIuMTYyMiA5LjcxMDM0WiIvPgo8L2c+Cjwvc3ZnPgo=) no-repeat center;
}

.framework-toggle.new {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 32px;
  width: 32px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: var(--primary-color500);
  color: var(--white-color);
  border-radius: var(--spacer-6xs);
  border: 1px solid transparent;
  padding: 0;
  margin: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  justify-self: center;
}

.mapweave .framework-toggle.new {
  background-color: hsla(257, 55%, 50%, 1);
}

.framework-toggle.new.sm {
  height: 24px;
  width: 24px;
}

.framework-toggle.new.sm .js-display,
.framework-toggle.new.sm .react-display {
  height: 16px;
  width: 16px;
}

.framework-toggle.new.fade {
  background-color: var(--white-color);
  color: var(--neutral-color900);
  border-color: var(--grey-color-200);
}

.framework-toggle.new.fade .js-display,
.framework-toggle.new.fade .react-display {
  background-color: var(--neutral-color900);
}

.framework-toggle.new .js-display,
.framework-toggle.new .react-display {
  background-color: var(--white-color);
}

/* Override for in-place language toggle button */

.nav__framework-toggle-new {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
}

.nav__framework-toggle-new .framework-toggle.new.fade {
  opacity: 0;
  pointer-events: none;
}

.nav__framework-toggle-new .framework-toggle.new:hover {
  background-color: var(--primary-color600);
}

.nav__framework-toggle-new .framework-toggle.new.fade .js-display,
.nav__framework-toggle-new .framework-toggle.new.fade .react-display {
  background-color: var(--white-color);
}

/* #endregion Product item */

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

.api ul {
  padding: 0;
  padding-left: var(--s1);
}
.api ul ul {
  margin-left: var(--api-indentation);
}
.api ul > ul {
  margin-left: 0;
  padding-left: 0;
}
.api ul > .api-row {
  margin-top: var(--s0);
}

.api h3 {
  margin: var(--s3) 0px var(--s-3) 0px;
}
.api .name,
.api .data-type,
.api .data-default,
.api .data-required,
.api .async {
  font-family: var(--font-family-monospace);
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  margin-left: var(--s-2);
}

.api .data {
  font-size: 0.9rem;
}
.api .data-default,
.api .data-required {
  display: inherit;
}
.api .data-default .value {
  font-weight: var(--font-weight-heavy);
  margin-left: var(--s-4);
}

.api .data-required {
  margin: 0;
  border-radius: 2px;
  padding: 0 var(--s-4);
  max-width: calc(8ch + (2 * var(--s-4)));
  font-weight: var(--font-weight-heavy);
  color: var(--neutral-color050);
  background-color: var(--primary-color900);
}

.api .api-row__event .data-required {
  display: none;
}

.api .name {
  background-color: var(--grey-color-200);
  border-radius: 2px;
  font-weight: 700;
  font-weight: var(--font-weight-heavy);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-left: 0px;
  padding: 0 var(--s-4);
}
.api span.default > .label {
  font-family: var(--font-family-body);
}

.api-row {
  list-style: none;
}

.api-inline-type .interface {
  margin-bottom: var(--s-2);
}

.api-signature > .api-parameters > .api-row:last-child,
.interface > ul > .api-row {
  margin-bottom: var(--s1);
}

.api-row li {
  margin-bottom: var(--s-4);
}

.api-header .data-default {
  display: block;
  font-weight: normal;
  color: var(--neutral-color300);
}

.api-header .data-default .value {
  font-weight: bold;
}

.api-signature__heading > .api-header__right {
  max-width: 77px;
}

.api-header,
.api-desc,
.required,
.deprecated,
.api-example,
.api__docify-inject,
.api-desc + p {
  border-left: var(--border-thin) solid var(--neutral-color600);
  padding: 0;
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
  padding-left: var(--api-indentation);
}

/*
  Used at Chart props > view
 */
.api__docify-inject ul {
  padding-left: var(--s1);
}

.api__docify-inject__image-fit-description {
  margin-left: var(--api-indentation);
}

.api__docify-inject__image-fit-description > * + * {
  margin-top: var(--s-4);
}

.api__docify-inject__image-fit-description__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.api-row .api__docify-inject__image-fit-description__row > .data-type {
  margin-left: 0;
}

.api__docify-inject__image-fit-description__row > * + * {
  margin-left: var(--api-indentation);
}

.api-row > * + .api-header {
  /*
  we can't use the .stack class in this page, due to the structure of how the DOM is generated,
  so implementing it here instead.
   */
  margin-top: var(--s2);
}

a.badge-deprecated,
a.badge-deprecated.badge-deprecated:hover,
span.badge-deprecated,
a.badge-alpha,
span.badge-alpha,
a.badge-alpha.badge-alpha:hover,
a.badge-beta,
span.badge-beta,
a.badge-beta.badge-beta:hover {
  background: var(--neutral-color200);
  border-radius: var(--s-1);
  color: var(--neutral-color900);
  float: right;
  font-family: var(--font-family-body);
  font-size: 0.8rem;
  font-weight: var(--font-weight-heavy);
  letter-spacing: 0.01rem;
  padding: var(--s-5) var(--s-3);
  text-transform: uppercase;
  vertical-align: middle;
  line-height: var(--line-height-caption);
}

a.badge-alpha.badge-alpha:hover,
a.badge-beta.badge-beta:hover {
  color: var(--neutral-color050);
}

a.badge-alpha.inline,
a.badge-alpha.inline:hover,
a.badge-beta.inline,
a.badge-beta.inline:hover,
a.badge-deprecated.inline,
a.badge-deprecated.inline:hover {
  float: unset;
  display: inline;
}

a.badge-deprecated {
  background: var(--neutral-color200);
  color: var(--neutral-color900);
}
a.badge-deprecated.badge-deprecated:hover {
  background: var(--neutral-color400);
  color: var(--neutral-color050);
}

/* used in the sidebar */
span.badge-alpha,
span.badge-beta {
  float: none;
  font-size: 0.6rem;
  margin-left: var(--s-3);
}

a.badge-deprecated,
a.badge-deprecated:hover,
a.badge-alpha,
a.badge-alpha:hover,
a.badge-beta,
a.badge-beta:hover {
  background-image: unset !important;
  -webkit-background-clip: unset !important;
  background-clip: text;
  -webkit-text-fill-color: inherit !important;
  border-bottom: none !important;
}

.iface-header {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.iface-header__right {
  margin: var(--s3) 0px var(--s-3) 0px;
}

.api-header {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.api-header__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}
.api-header__right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: start;
      align-self: start;
}

.api-desc {
  margin: 0;
  font-size: var(--font-size-body);
}

.api-desc--list {
  list-style-type: disc;
}

.api-desc .api-desc--list {
  border-left: none;
  margin-left: unset;
}

.api-return-desc {
  margin-left: var(--api-indentation);
}

.api-row .data-type {
  display: inline-block;
  font-weight: normal;
  margin-left: var(--s0);
}
.api-row .data-default {
  color: var(--neutral-color300);
  display: inherit;
  margin-left: var(--s0);
}
.api-row .data-default .value {
  font-weight: var(--font-weight-heavy);
}

.api-signature {
  margin-top: var(--s-1);
  margin-bottom: var(--s1);
}

ul.api__indented-list {
  /*
    <ul>s on the api page are generally used for props.
    In the few cases where we use an <ul> for something else,
    this class is to ensure it has correct padding.
   */
  padding-left: 1rem;
}

.api-signature__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;

  /*
    With the current API, we know that api signatures
    will only be nested one level deep, so we can get
    away with setting the margin in here.
   */
  margin-left: var(--api-indentation);
}

.api-signature__heading__title {
  font-size: var(--font-size-h6);
}

/*
   When docify generates the 'Chart mode' and 'map mode' headings,
   they look like a prop, which they are not, they are just headings.
   So we have to undo the styling on them with the  following CSS.

   Issue: https://gitlab.com/cambridgeintelligence/rg/issues/747
 */

#chart-view-Chart\ Mode > *,
#chart-params-onChartChange-view-Chart\ Mode > *,
#chart-view-Map\ Mode > *,
#chart-params-onChartChange-view-Map\ Mode > *,
#chart-view-Legacy\ view\ API > * {
  border: none;
}

#chart-view-Chart\ Mode:first-child > .api-header .name,
#chart-params-onChartChange-view-Chart\ Mode:first-child > .api-header .name,
#chart-view-Map\ Mode > div.api-header span.name,
#chart-params-onChartChange-view-Map\ Mode > div.api-header span.name,
#chart-view-Legacy\ view\ API > div.api-header span.name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-h6);
  background-color: inherit;
  color: inherit;
  font-weight: inherit;
  border-radius: 0;
  padding: 0;
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

.code,
.code-block,
object {
  background-color: var(--neutral-color900);
  color: var(--neutral-color200);
}

.code-block {
  border-radius: var(--border-radius);
  border: var(--border-menu) solid var(--neutral-color600);
  font-size: var(--font-size-code);
  overflow: auto;
  padding: var(--s-1) var(--s0);
  position: relative;
  width: auto;
}

.code-block::-moz-selection {
  background-color: var(--primary-color050);
  color: var(--neutral-color900);
}

.code-block::selection {
  background-color: var(--primary-color050);
  color: var(--neutral-color900);
}

.code-block--tabbed {
  margin: 0;
  --border-radius: 0;
  height: var(--s7);
}

/* Links that are also inline code blocks */
a.code {
  background-color: var(--grey-color-200);
  color: var(--font-color);
  font-size: 0.9rem;
  border-radius: var(--spacer-7xs);
  padding: 0 var(--inline-code-padding);
  font-family: var(--font-family-monospace);
  text-decoration: underline;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

a.code:not(.a--plain):hover {
  background: unset;
  background-color: var(--grey-color-300);
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  -webkit-box-decoration-break: unset;
  box-decoration-break: unset;
  text-shadow: none;
}

/* Inline code symbol */
.code {
  padding: 0 var(--s-4);
  border-radius: 2px;
  font-weight: var(--font-weight-body);
}

.code-wrapper {
  position: relative;
}

/* prevent having a double margin */
.code-wrapper .code-block:first-child {
  margin: 0;
}

/* Inline code blocks. (But avoiding styling anything within monaco toolips) */
code:not(.monaco-hover *) {
  background-color: var(--grey-color-200);
  font-family: var(--font-family-monospace);
  font-size: 0.9rem;
  border-radius: var(--spacer-7xs);
  padding: 0 var(--inline-code-padding);
  display: inline-block;
}

.code-block--show-all {
  max-height: unset;
}

/* default colour */
.code-block * {
  color: #fff;
}
/* javascript default */
.code-block__js {
  color: #6dafd3;
}
/* punctuation */
.code-block__punctuation {
  color: #fff;
}
/* key words */
.code-block__keyword {
  color: #d66ccb;
}
/* variables */
.code-block__var {
  color: #6dafd3;
}
/* constant names */
.code-block__const {
  color: #4cadb9;
}
/* function names */
.code-block__function {
  color: #d4d48c;
}
/* property names */
.code-block__property {
  color: #6dafd3;
}
/* declarations (const, let, var) */
.code-block__declaration {
  color: #2a96ee;
}
/* object type declarations */
.code-block__new {
  color: #54b39d;
}
/* strings */
.code-block__string {
  color: var(--primary-color500);
}
/* numbers */
.code-block__number {
  color: #d4d48c;
}
/* html tag names */
.code-block__tag {
  color: #2a96ee;
}
/* css class name */
.code-block__class {
  color: #d4d48c;
}
/* css property value */
.code-block__value {
  color: var(--primary-color500);
}
/* inner HTML text */
.code-block__inner-html {
  color: #fff;
}
/* comments */
.code-block__comment {
  color: #aaa;
}
/* timeline HTML tag */
.code-block__timeline {
  color: #2a96ee;
}
/* ASCII filesystem marker */
.code-block__filesystem {
  color: var(--primary-color500);
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

.nav {
  background-color: var(--topnav-background-color);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: var(--topnav-color);
  position: fixed;
  top: 0;
  width: 100%;
  /* z-index needed so nav is on top of the KG demos */
  z-index: 500;
}

.nav * {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.nav input {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

.horizontal-nav .nav {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.vertical-nav .nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.horizontal-nav .nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.vertical-nav .nav ul {
  margin-left: auto;
  margin-right: auto;
}

.horizontal-nav .nav li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (min-width: 1522px) {
  .horizontal-nav .nav ul > li + li {
    margin-left: var(--s1);
  }
}

@media (min-width: 1442px) and (max-width: 1521px) {
  .horizontal-nav .nav ul > li + li {
    margin-left: var(--s0);
  }
}

@media (min-width: 1392px) and (max-width: 1441px) {
  .horizontal-nav .nav ul > li + li {
    margin-left: var(--s-1);
  }
}

@media (min-width: 1242px) and (max-width: 1391px) {
  .horizontal-nav .nav ul > li + li {
    margin-left: var(--s-2);
  }
}

.vertical-nav .nav ul > li + li {
  margin-top: var(--s1);
}

.nav li a,
.nav li a:visited {
  color: var(--topnav-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
}

.nav li.active a {
  color: var(--primary-color500);
}

.horizontal-nav__top-container,
.vertical-nav__top-container {
  padding: 0 2rem;
  height: var(--topnav-height);
}

.vertical-nav__top-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.horizontal-nav li a {
  text-align: center;
}

#vertical-nav-link-container {
  display: none;
  height: calc(100vh - var(--topnav-height));
  min-width: 100vw;
  background-color: var(--sidenav-background-color);
}

#vertical-nav-link-container.active {
  display: inline-block;
}

#nav-toggle-button {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  text-transform: capitalize;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#nav-toggle-button > * + * {
  margin-top: calc(2 * var(--toggle-line-height));
}

.bar1,
.bar2,
.bar3 {
  width: var(--s1);
  height: var(--toggle-line-height);
  background-color: var(--font-color);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

/* Rotate first bar */
#nav-toggle-button.active .bar1 {
  -webkit-transform: rotate(-45deg) translate(-4px, 4px);
          transform: rotate(-45deg) translate(-4px, 4px);
}

/* Fade out the second bar */
#nav-toggle-button.active .bar2 {
  opacity: 0;
}

/* Rotate last bar */
#nav-toggle-button.active .bar3 {
  margin-top: 0;
  -webkit-transform: rotate(45deg) translate(-4px, -4px);
          transform: rotate(45deg) translate(-4px, -4px);
}

.nav .avatar {
  border-radius: 50%;
  display: inline-block;
  height: var(--s1);
  width: var(--s1);
}

.vertical-nav .nav .avatar {
  width: var(--s3);
  height: var(--s3);
}

.nav__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: var(--topnav-logo-height);
}

.nav__logo a {
  text-decoration: none;
  height: var(--topnav-logo-height);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: var(--topnav-logo-height);
  font-size: 1em;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.nav__logo a > * {
  margin-right: var(--s-4);
}

.nav__logo span {
  line-height: 3ex;
  height: 3ex;
}

.nav__logo__image {
  width: 10rem;
}

.nav__framework-toggle {
  height: var(--topnav-logo-height);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 2rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: var(--topnav-logo-height);
}

@media (max-width: 1347px) {
  .horizontal-nav {
    display: none;
  }
}

@media (min-width: 1348px) {
  .vertical-nav {
    display: none;
  }
}

#nav-trial-request {
  font: 'Everett', sans-serif;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(61 100 255)), to(rgb(49 80 204)));
  background: linear-gradient(rgb(61 100 255), rgb(49 80 204));
  border-radius: var(--spacer-2xl);
  padding: var(--spacer-5xs);
  min-width: 20px;
  color: var(--topnav-background-color);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  line-height: 1;
}

#nav-trial-request .inner {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

#nav-trial-request .inner label:hover {
  cursor: pointer;
}

#nav-trial-request:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(49 80 204)), to(rgb(37 60 153)));
  background: linear-gradient(rgb(49 80 204), rgb(37 60 153));
}

.tray-public {
  white-space: nowrap; /* Stop button texts wrapping */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  margin-left: 30px;
}

/* New nav */

.nav-new {
  background-color: var(--topnav-background-color);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: var(--topnav-color);
  height: var(--topnav-height);
  position: fixed;
  top: 0;
  width: 100%;
  /* z-index needed so nav is on top of the KG demos */
  z-index: 500;

  ol,
  ul,
  li,
  dl,
  dt,
  dd {
    list-style: none;
  }
}

.nav-horizontal {
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  grid-template-columns: 1fr auto 1fr;
  -ms-flex-line-pack: center;
      align-content: center;
  padding: 0 2rem;

  /* Not affected by scrollbar so it doesn't layout shift between pages */
  width: 100vw;
}

.nav-middle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--spacer-6xs);
  justify-self: center;
}

.nav-right {
  justify-self: end;
}

.nav-start {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.nav-middle ul {
  margin: 0;
}

.product-nav-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--spacer-6xs);
  padding: var(--spacer-6xs);
  border-radius: var(--spacer-2xl);
  background-color: var(--white-color);
  height: 48px;
  border: 0.0625rem solid var(--grey-color-200);
}

.nav-item-public {
  font-family: 'Everett', sans-serif;
  display: block;
  border-radius: var(--spacer-2xl);
  border: 1px solid transparent;
  padding-top: var(--spacer-7xs);
  padding-bottom: var(--spacer-7xs);
  padding-left: var(--spacer-5xs);
  padding-right: var(--spacer-5xs);
}

a.nav-item-public {
  background-color: var(--white-color);
}

a.nav-item-public:hover {
  background-color: var(--grey-color-200);
  cursor: pointer;
}

.product-nav-container a.nav-item-public:hover {
  background-color: var(--primary-color100);
}

li.active a.nav-item-public {
  background-color: var(--grey-color-200);
  border-color: var(--grey-color-300);
}

.product-nav-container li.active a.nav-item-public {
  background-color: var(--primary-color100);
  border-color: var(--primary-color300);
}

.divider {
  width: 1px;
  height: 20px;
  background-color: var(--grey-color-200);
}

.nav-new #vertical-nav-link-container {
  background-color: var(--topnav-background-color);
  height: calc(100vh - var(--topnav-height));
  position: relative;
  overflow: auto;
  padding-top: var(--spacer-4xs);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.nav-new #vertical-nav-link-container.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.vertical .nav-middle {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  padding: 0 var(--spacer-6xs);
  margin: 0;
  height: inherit;
}

.vertical .nav-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: var(--spacer-4xs);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.vertical .product-nav-container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: transparent;
  border: 1px solid var(--grey-color-200);
  border-radius: var(--spacer-4xs);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  padding: var(--spacer-4xs);
  height: auto;
}

.vertical .product-nav-container.invisible {
  border-color: transparent;
}

.vertical .divider {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: 1px;
}

.no-margin {
  margin: 0;
}

.ic--outline-arrow-outward {
  display: inline-block;
  width: 16px;
  height: 16px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23000%27 d=%27M6 6v2h8.59L5 17.59L6.41 19L16 9.41V18h2V6z%27/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

input:not([type='range']):focus {
  border: var(--border-thin) solid var(--neutral-color500);
}

.site-search__container {
  position: relative;
  font-size: 0.8rem;
}

.site-search__result_container {
  background-color: var(--search-result-box-background);
  backdrop-filter: blur(6px);
  border: var(--border-thin) solid var(--neutral-color400);
  display: none;
  position: absolute;
  max-height: min(calc(100vh - var(--topnav-height)), var(--search-result-box-max-height));
  overflow-y: scroll;
  overflow-x: hidden;
  width: var(--search-result-box-width);
  z-index: 1;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.site-search__result_container.visible {
  display: block;
}

.site-search__category_filter_container {
  background-color: var(--topnav-background-color);
  border-bottom: var(--border-thin) solid var(--neutral-color600);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: var(--s-1);
  position: sticky;
  top: 0;
}

.site-search__category_filter_label {
  border-radius: var(--border-radius);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--s-2);
}

.site-search__category_filter_label:hover {
  color: var(--primary-color500);
  cursor: pointer;
}

.category-filter_label-active {
  background-color: var(--search-result-label-background);
  color: var(--primary-color500);
  cursor: pointer;
}

.site-search__result {
  border: var(--border-default) solid transparent;
  cursor: pointer;
  padding: var(--s-4) 0;
}

.site-search__result:hover,
.site-search__result-active {
  background-color: var(--search-result-box-background-active);
  border-left: var(--border-default) solid var(--primary-color500);
  color: var(--primary-color500);
}

.search-result__tag {
  background-color: var(--search-result-label-background);
  border-radius: var(--border-radius);
  float: right;
  font-size: var(--font-size-info);
  font-weight: var(--font-weight-medium);
  margin: 0 var(--s-1);
  padding: 0 var(--s-2);
}

.search-result__title {
  margin: var(--s-5) 0;
  padding: 0 var(--s-1);
}

.search-result__description {
  color: var(--neutral-color700);
  font-size: var(--font-size-code);
  margin: var(--s-5) 0;
  overflow: hidden;
  padding: 0 var(--s-1);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-result__none {
  color: var(--neutral-color700);
  margin-top: var(--s-4);
  padding-bottom: var(--s-2);
  text-align: center;
}

.search-result__highlighted_text {
  background-color: var(--search-result-text-highlight);
  border-radius: var(--spacer-7xs);
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

.layout__sidenav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.layout__sidenav > :first-child {
  position: fixed;
  margin-left: var(--spacer-4xs);
  width: var(--sidenav-width);
  height: calc(100vh - var(--topnav-height));
}

.layout__sidenav > * + * {
  margin-left: calc(var(--sidenav-width) + var(--spacer-4xs) + var(--spacer-4xs));
}

.sidenav {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: var(--sidenav-background-color);
  color: var(--sidenav-color);
  padding: 2rem;
  overflow-y: auto;
  border-top-left-radius: var(--spacer-xs);
  border-top-right-radius: var(--spacer-xs);
}
.sidenav > * {
  line-height: var(--line-height-caption);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.sidenav ul {
  margin: 0;
  padding: 0;
}

.menu_group {
  margin-top: var(--s-2);
}

.menu_group.docs {
  margin-top: 0;
}

.menu_group .top-heading {
  font-weight: var(--font-weight-heavy);
}

/*
  Set the spacing between sections of links.

  # Friday project idea
  It would be nice to have a more semantic nesting of links,
  rather than <li>s and <ul>s mixed together, so that's a Friday project
*/

.sidenav--nested > ul + ul {
  margin-top: var(--s1);
}

.sidenav > * > li > ul,
.sidenav--nested > * > li > ul,
.sidenav ul ul {
  margin: 0;
}

.sidenav li {
  list-style: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidenav li.parent > .expander-link {
  padding: var(--s-4) 0 var(--s-4) 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.sidenav li:empty {
  display: none;
}

.sidenav ul.child li {
  border-left: var(--border-menu) solid var(--neutral-color600);
  padding: var(--s-4) 0 var(--s-4) var(--s-1);
}

.sidenav .menu_group > li > a,
.sidenav .menu_group > li > .expander-link > a {
  font-weight: 500;
}
.sidenav .menu_group > li {
  padding: var(--s-4) 0 var(--s-4) 0;
}
.sidenav .menu_group > li.parent {
  padding: 0 0 0 0;
}

.sidenav ul.child li:has(> .expander-link) {
  padding: 0 0 0 var(--s-1);
}

.sidenav li.tree {
  margin-top: unset;
}

.sidenav li.parent ul li {
  margin-top: unset;
}

.sidenav li.parent div > span > i {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  font-size: var(--font-size-info);
}

.sidenav li.parent span {
  float: right;
  cursor: pointer;
}

.sidenav li.parent.parent-expanded > div > span > i {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sidenav li a {
  font-weight: var(--font-weight-regular);
}

.sidenav li .expander-link:hover,
.sidenav li a:hover {
  color: var(--sidenav-highlight-color);
}

.sidenav .fa-stack {
  height: unset;
  line-height: unset;
  width: var(--s1);
}

.sidenav li.parent-expanded {
  list-style: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidenav .expander-link .fa-stack > i {
  -webkit-text-fill-color: initial;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  margin-left: var(--s-3);
}

.sidenav .expander-link a {
  display: inline;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidenav li.parent > ul.child {
  display: none;
}

.sidenav li.parent-expanded > ul.child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.sidenav li ul li:has(> a:hover, > .expander-link:hover) {
  border-left: var(--border-menu) solid var(--sidenav-highlight-color);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.sidenav li ul li:has(> .sidenav__highlight-active) {
  border-left: var(--border-menu) solid var(--sidenav-highlight-color);
}

.sidenav__highlight-active {
  color: var(--sidenav-highlight-color);
}

/* styles for search items */
.sidenav .search-wrapper {
  background: var(--sidenav-background-color);
  top: calc(-1 * var(--sidebar-layout-padding-top) - 1px);
  z-index: 2;
}

.sidenav .search-box {
  margin-bottom: 1rem;
  margin-top: var(--s-5);
  position: relative;
}

.sidenav li.hidden {
  display: none;
}

.sidenav .search--cancel {
  display: block;
  cursor: pointer;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  font-size: var(--font-size-info);
  top: calc(50% - 0.8rem);
  right: var(--s-4);
  width: var(--s1);
  height: 1.6rem;
  color: var(--neutral-color500);
}

@media (max-width: 720px) {
  .sidenav .search--cancel {
    display: none;
  }
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

/* makes sure that the unnamed div that wraps the timeline and controls always resizes to the window */
#root > * {
  height: 100%;
}

.main-storybook {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: calc(100vh - var(--topnav-height));
  width: 100vw;
}

.story {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  /* --- REVERT TO ORIGINAL STYLING */
  /* If you change this change it in website/styles/playground.css and
  in website/demos/common-demo.css too */
  color: var(--font-color);
  background-color: var(--background-color);
  --font-color: white;
  --font-color-h6: white;
  --font-color-h5: white;
  --font-color-h4: white;
  --font-color-h3: white;
  --background-color: var(--neutral-color800);
  --grey-color-100: var(--neutral-color050);
}

.story .button.button--neutral {
  background-color: var(--neutral-color200);
  color: var(--neutral-color900);
}

.story input {
  background-color: var(--neutral-color900);
}

.story input:not([type='range']) {
  border: var(--border-thin) solid var(--neutral-color500);
}

.story .select {
  border: var(--border-thin) solid var(--neutral-color300);
  background-color: var(--neutral-color700);
}
.story .modifier-key {
  background-color: var(--neutral-color200);
  color: var(--neutral-color900);
}

.story .modifier-key--active {
  background-color: var(--primary-color500);
}

/* END OF REVERT */

.story__timeline {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  min-height: 0px; /* Allow the DOM to resize the timeline */
}

.story__controls {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: var(--s0);
  overflow-y: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.story__controls--row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: auto 0;
          flex: auto 0;
}

.story__controls--row > * + * {
  margin-left: var(--s1);
}

.story__controls__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.story__controls__center-align {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.story__controls__center-align > .radio-button {
  height: 20px;
  margin-left: 10px;
}

.story__controls__item > * {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.story__controls__item > * + * {
  margin-left: var(--s-1);
}

.story__controls__item > label {
  text-wrap: nowrap;
}

.story__controls__heading {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h2);
  font-family: var(--font-family-heading);
}

.story__controls > .stack {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.story__controls .stack label > input[type='checkbox'] {
  margin: 0 var(--s-3);
  vertical-align: text-bottom;
}

.button.button--neutral {
  min-height: var(--s2);
}

.button.button--neutral > i.fas {
  color: rgb(36, 44, 50);
}

.story__controls__item__child--flex-2 {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
}

.story__controls__button-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.story__controls__button-container > * + * {
  margin-left: var(--s0);
}

.story__controls__item__checkbox-and-label-container {
  min-width: var(--s5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.story__controls__item__checkbox-and-label-container > * + input {
  margin-left: var(--s-2);
}

.flex-2 {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
}

.slider-container {
  margin: 6px 0px 6px 0px;
  min-width: var(--s5);
}

.storybook-toggle {
  position: absolute;
  top: 0.5rem;
  left: 1rem;
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

:root {
  /* This gets set manually as variables cant be used in media queries */
  --floating-banner-outer-padding: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.welcome {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.welcome__social_proof__title,
.welcome__developer__title {
  color: var(--neutral-color900);
}

.welcome__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.welcome__row--wrap-reverse {
  -ms-flex-wrap: wrap-reverse;
      flex-wrap: wrap-reverse;
}
.welcome__row > * {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 var(--s8);
          flex: 1 1 var(--s8);
}

.welcome__banner__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heavy);
  line-height: 1.15;
  letter-spacing: 0.1rem;
}

.welcome__banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: var(--s1);
  background-color: var(--white-color);
  border-radius: var(--border-radius);
  gap: var(--s0);
}

.welcome__banner__rhs {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
}

.welcome__banner__lhs {
  -webkit-box-flex: 4;
      -ms-flex: 4;
          flex: 4;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.welcome__banner__lhs > .button,
.showcase > .button {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  &:hover {
    background-color: var(--primary-color600);
  }
}

.lhs__image {
  max-width: 100%;
  height: auto;
}

.welcome__banner__description {
  font-size: var(--font-size-caption);
}

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

.welcome__banner__rhs > .welcome__banner__image {
  height: 100%;
}

.welcome__list {
  list-style-type: none;
  padding-left: 0;
}

.welcome__section__react_image {
  max-width: var(--s8);
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.welcome__list > li:before {
  color: var(--primary-color400);
  content: '■︎';
  padding-right: var(--s-1);
}

.welcome__social_proof__client_logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.welcome__social_proof__client_logos > img {
  height: 100%;
  -ms-flex-preferred-size: var(--s5);
      flex-basis: var(--s5);
  max-width: 10rem;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.welcome__feature__title {
  margin: 0;
  color: var(--primary-color500);
  font-weight: var(--font-weight-light);
  line-height: 1;
  font-size: var(--font-size-h2);
}

.showcase__title {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: 1.15em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: var(--spacer-7xs);
}

.showcase__subtitle {
  font-size: var(--font-size-3xs);
  line-height: 140%;
  margin: 0;
}

.showcase__button {
  text-transform: none;
}

.showcase__badge {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: color-mix(in oklab, var(--status-color) 10%, transparent);
  border-radius: var(--border-radius);
  color: grey;
  color: var(--status-color);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 0.8rem;
  gap: 0.4rem;
  right: 4px;
  line-height: 1;
  padding: 4px 8px;
  pointer-events: none;
  text-transform: capitalize;
  top: 4px;
}

.showcase__badge.updated {
  --status-color: #2dc75c;
}

.showcase__badge.new {
  --status-color: #659df2;
}

.bold__text {
  font-weight: var(--font-weight-heavy);
}

.regular__text {
  font-weight: var(--font-weight-regular);
}

.showcase__section__title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  margin: 0px 0px var(--s1) 0px;
}

.welcome__section {
  padding: var(--s2) var(--s1);
}

.welcome__section--light {
  background-color: var(--grey-color-50);
}

.welcome__section--primary {
  background-color: var(--primary-color500);
  color: var(--neutral-color900);
}

.welcome__section__content {
  max-width: var(--welcome-screen-max-content-width);
  min-height: var(--s4);
}

.welcome__developer__title {
  font-weight: var(--font-weight-regular);
}

.welcome__cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#showcase__grid {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  gap: 24px;
}

.homepage__button {
  text-decoration: none;
  border-bottom: none;
}

.showcase {
  border-radius: var(--spacer-2xs);
  -webkit-box-shadow: 0px 4px 30px 0px var(--grey-color-200);
          box-shadow: 0px 4px 30px 0px var(--grey-color-200);
  position: relative;
  padding: var(--spacer-5xs);
  background-color: var(--white-color);
  gap: var(--spacer-6xs);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

  > .button {
    font-size: 0.92rem;
  }

  &:hover {
    border-color: var(--neutral-color300);
    > .button {
      background-color: var(--primary-color600);
    }

    > .showcase__image {
      border-color: var(--neutral-color600);
    }
  }
}

@media (min-width: 800px) {
  #showcase__grid {
    grid-template-columns: 1fr 1fr;
  }

  .showcase {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

@media (min-width: 1024px) {
  #showcase__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .showcase {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

#showcase__categories__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--s-1);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-bottom: var(--s1);
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.showcase__category__button {
  border: 1px solid var(--grey-color-300);
  border-radius: var(--border-radius);
  background: transparent;
  width: 100%;
  padding: var(--s-1);
  cursor: pointer;
  letter-spacing: 0.02rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-family: var(--font-family-heading);
  font-size: 0.75em;

  &:hover:not(.selected__showcase__filter) {
    border-color: var(--grey-color-300);
    background-color: var(--grey-color-200);
  }
}

.selected__showcase__order {
  background-color: var(--grey-color-200);
  border-color: var(--grey-color-300);
  font-weight: var(--font-weight-heavy);
}

#showcase__filter__title {
  font-family: var(--font-family-heading);
  padding-bottom: var(--s-2);
  font-size: var(--font-size-caption);
  color: var(--neutral-color200);
}

.showcase__image {
  border-radius: var(--spacer-3xs);
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 400px;
  max-height: 400px;
  aspect-ratio: 1 / 1;
}

.showcase__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--spacer-5xs);
  padding: var(--spacer-5xs);
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.stack__spaced {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: var(--s0);
}

.stack__spaced > * {
  margin-top: 0;
  margin-bottom: 0;
}

a.hidden-wrapper {
  border: none;
}

a.hidden-wrapper:hover {
  -webkit-text-fill-color: unset;
  background-color: unset;
}

@media (min-width: 800px) {
  .lhs__image {
    display: none;
  }

  #showcase__categories__container {
    -ms-flex-wrap: inherit;
        flex-wrap: inherit;
    gap: var(--s0);
  }
}

@media (max-width: 912px) {
  .showcase {
    > .button {
      min-height: 60px;
      font-size: var(--font-size-body);
    }
  }
}

/* Welcome banner layout shift */
@media (max-width: 1080px) {
  .welcome__banner__rhs {
    display: none;
  }

  .welcome__banner__lhs {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    > .stack__spaced {
      gap: var(--s-4);
    }

    > .welcome__banner__description,
    .welcome__banner__title {
      text-align: center;
    }

    > .button {
      width: 100%;
    }
  }
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

.docs {
  img {
    display: inline;
    background-color: var(--neutral-color800);
    padding: 0.15rem;
  }
}

.docs__framework-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.docs__framework-logo {
  height: 10rem;
}
.docs__framework-logo--square {
  width: 10rem;
}

.image-block {
  background-color: var(--neutral-color900);
  color: var(--neutral-color200);
  border-radius: var(--border-radius);
  font-size: var(--font-size-code);
  overflow: auto;
  padding: var(--docs-image-block-padding);
  max-height: var(--s7);
}

.image-block::-moz-selection {
  background-color: var(--primary-color050);
  color: var(--neutral-color900);
}

.image-block::selection {
  background-color: var(--primary-color050);
  color: var(--neutral-color900);
}

table {
  border-collapse: collapse;
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
}

th {
  background: var(--grey-color-200);
}

th,
td {
  min-height: var(--s0);
}

.table--striped th,
.table--striped td {
  padding: calc(var(--border-radius) / 2);
}

.radio-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* justify-content: space-between; */
}

.select.tutorial {
  display: inline;
}

label.tutorial,
input.tutorial {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 10px;
}

input[type='radio'] {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

.table--striped tr:nth-child(odd) td {
  background: var(--grey-color-100);
}

.item,
.interaction,
.options {
  background: var(--grey-color-200);
  padding: var(--s-3) var(--s-2);
}

table.dependencies {
  width: 100%;
}

.note-box {
  margin: 0;
  padding: 0;
  position: sticky;
  border: 2px solid var(--grey-color-200);
  border-radius: 4px;
  pointer-events: none;
}

.note-label,
.interactions-label,
.accessibility-label {
  font-size: 14px;
  background-color: var(--grey-color-200);
  border: 2px solid var(--grey-color-200);
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 4px;
  position: absolute;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  left: 10px;
  top: -22px;
  pointer-events: none;
}

.accessibility {
  font-size: 18px;
  text-align: center;
  padding: 10%;
  height: 100%;
  background-color: hsla(210, 18%, 22%, 0.8);
  border: 2px solid var(--primary-color500);
  color: var(--white-color);
  margin: 0;
  border-radius: 4px;
  display: block;
  position: sticky;
  width: 100%;
  pointer-events: none;
}

.tl-nav,
.accessibility-nav,
.selection {
  top: 25px;
  left: 250px;
  display: block;
  position: sticky;
}
.scales-nav {
  top: 50px;
  left: 10px;
  display: block;
  position: sticky;
}
.focus,
.pin,
.folds {
  display: block;
  position: sticky;
}
#example-timeline2 > i.fas {
  float: right;
  display: inline;
  position: static;
}
.scales-nav-box {
  height: 50px;
  border: 2px solid var(--primary-color500);

  position: absolute;
}

.label-img {
  width: unset;
  height: 10pt;
}

.timeline canvas {
  position: absolute;
}

.hidden {
  display: none;
}

.text-collapsable {
  display: block;
}

.text-collapse-button {
  cursor: pointer;
  padding: 4px;
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  background-color: var(--neutral-color200);
  border-radius: var(--border-radius);
  text-align: center;
}

.text-collapse-button i.fas {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-text-fill-color: initial;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.text-collapse-button.spin i.fas {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.in-text-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.in-text-image img {
  margin: var(--s-3);
}

.package-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0;
}

.package-button {
  background-color: var(--neutral-color800);
  color: var(--neutral-color100);
  position: relative;
  font-size: var(--font-size-body);
  cursor: pointer;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-left: var(--border-menu) solid var(--neutral-color600);
  border-top: var(--border-menu) solid var(--neutral-color600);
  border-right: var(--border-menu) solid var(--neutral-color600);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  padding: var(--s-3) var(--s-1);
  margin: 0 var(--s-2) 0 0;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-transform: lowercase;
}

.package-button:hover {
  background-color: var(--neutral-color600);
}

.package-button input[type='radio'] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.package-button:has(input:focus-visible) {
  outline: var(--border-thin) solid var(--primary-color500);
  outline: var(--border-thin) solid -webkit-focus-ring-color;
}

.package-button:has(input[type='radio']:checked) {
  background-color: var(--neutral-color900);
  border-bottom: var(--border-thin) solid var(--primary-color500);
}

.yarnCode > .code-block,
.npmCode > .code-block,
.pnpmCode > .code-block {
  border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
}

.yarnCode,
.npmCode,
.pnpmCode {
  margin-top: 0;
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

.download__version_title_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.download__version_title_container__title {
  margin-bottom: 0;
  margin-top: 0;
}

.download__version_title_container__date {
  color: var(--neutral-color300);
}

.download__version_title_container + img,
.download__version_title_container + video {
  margin-top: 0;
}

.download__video {
  max-width: 100%;
}

.hidden:target::before {
  display: none;
  height: 0;
}

.stack.stack--large.no-space {
  margin-top: 0;
}

/* index.css */
.timeline {
  height: 300px;
}

.tall-timeline {
  height: 500px;
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

.unauthenticated {
  padding: var(--s3) var(--s0);
}

.unauthenticated__content {
  background-color: var(--background-color);
  border-radius: var(--border-radius);
  -webkit-box-shadow: var(--box-shadow-3);
          box-shadow: var(--box-shadow-3);
  max-width: var(--measure);
  padding: var(--s2);
  border: 0.0625rem solid var(--grey-color-200);
}

.unauthencticated__title__container {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.unauthenticated__title {
  font-size: var(--font-size-h1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  row-gap: 1rem;
  /* It's em because I want it to adjust in case the
   font-size changes so it is always enough visually.  */
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}

/* This class is made specifically for public/images/kronograph-logo.png */
.unauthenticated__title__kg-logo {
  /* Start shrinking when screen is small */
  width: 18rem;
}

.unauthenticated__title__text {
  margin-top: 0;
  margin-bottom: 0;
}

.unauthenticated__subtitle {
  text-align: center;
  font-size: 1.2rem;
}

.choose_project__button {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background-color: var(--grey-color-100);
  border: none;
  border-left: var(--border-thick) solid var(--grey-color-300);
  border-radius: var(--border-radius);
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 1rem;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  padding: var(--s0);
  text-align: left;
  text-transform: none;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.choose_project__button__title {
  font-size: var(--font-size-h5);
}
.choose_project__button__details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  min-width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: var(--neutral-color900);
}
.choose_project__button__details__org {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: var(--font-size-caption);
  text-align: left;
}
.choose_project__button__details__expiry {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: var(--font-size-caption);
  text-align: right;
}
.choose_project__button__details__type {
  display: none;
}

.choose_project__button__details__expiry.choose_project__button__details__expiry--expired {
  color: var(--error-color300);
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

/*
 We want the headings to be nice and close to the first block of text
 that follows them.
 Usually, we'd create a structure like this to get nice spacing between all the copy:
 .stack
    .stack.stack--small
        h1 My heading
        p First para
    p Second para
    p Third para

  However, because of the way the page is structured with one heading and
  two possible blocks of content (JS/React), we can't follow tihs pattern.
  Instead, we assume just apply our desired margin to all h1,h2,h3 elements
*/

.getting-started__heading {
  margin-bottom: var(--s-1);
}

.kg-404-image {
  width: 90%;
}

@media (max-height: 1100px) {
  .kg-404-image {
    max-width: 36rem;
  }
}

.support-text {
  text-align: center;
  margin: 8px;
}

.not-found-content {
  max-width: 70rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.page-not-found-header {
  text-align: center;
  margin-top: 0;
  margin-bottom: 12px;
}

:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

.styles__color_blocks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.styles__color_block_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__color_block_container > * + * {
  margin-left: var(--s-3);
}

.color_block {
  height: var(--s2);
  width: var(--s3);
  border-radius: var(--s-3);
}
.color_block--primary050 {
  background-color: var(--primary-color050);
}
.color_block--primary100 {
  background-color: var(--primary-color100);
}
.color_block--primary200 {
  background-color: var(--primary-color200);
}
.color_block--primary300 {
  background-color: var(--primary-color300);
}
.color_block--primary400 {
  background-color: var(--primary-color400);
}
.color_block--primary500 {
  background-color: var(--primary-color500);
}
.color_block--primary600 {
  background-color: var(--primary-color600);
}
.color_block--primary700 {
  background-color: var(--primary-color700);
}
.color_block--primary800 {
  background-color: var(--primary-color800);
}
.color_block--primary900 {
  background-color: var(--primary-color900);
}

.color_block--neutral050 {
  background-color: var(--neutral-color050);
}
.color_block--neutral100 {
  background-color: var(--neutral-color100);
}
.color_block--neutral200 {
  background-color: var(--neutral-color200);
}
.color_block--neutral300 {
  background-color: var(--neutral-color300);
}
.color_block--neutral400 {
  background-color: var(--neutral-color400);
}
.color_block--neutral500 {
  background-color: var(--neutral-color500);
}
.color_block--neutral600 {
  background-color: var(--neutral-color600);
}
.color_block--neutral700 {
  background-color: var(--neutral-color700);
}
.color_block--neutral800 {
  background-color: var(--neutral-color800);
}
.color_block--neutral900 {
  background-color: var(--neutral-color900);
}

.color_block--supporting050 {
  background-color: var(--supporting-color050);
}
.color_block--supporting100 {
  background-color: var(--supporting-color100);
}
.color_block--supporting200 {
  background-color: var(--supporting-color200);
}
.color_block--supporting300 {
  background-color: var(--supporting-color300);
}
.color_block--supporting400 {
  background-color: var(--supporting-color400);
}
.color_block--supporting500 {
  background-color: var(--supporting-color500);
}
.color_block--supporting600 {
  background-color: var(--supporting-color600);
}
.color_block--supporting700 {
  background-color: var(--supporting-color700);
}
.color_block--supporting800 {
  background-color: var(--supporting-color800);
}
.color_block--supporting900 {
  background-color: var(--supporting-color900);
}

.color_block--accent050 {
  background-color: var(--accent-color050);
}
.color_block--accent100 {
  background-color: var(--accent-color100);
}
.color_block--accent200 {
  background-color: var(--accent-color200);
}
.color_block--accent300 {
  background-color: var(--accent-color300);
}
.color_block--accent400 {
  background-color: var(--accent-color400);
}
.color_block--accent500 {
  background-color: var(--accent-color500);
}
.color_block--accent600 {
  background-color: var(--accent-color600);
}
.color_block--accent700 {
  background-color: var(--accent-color700);
}
.color_block--accent800 {
  background-color: var(--accent-color800);
}
.color_block--accent900 {
  background-color: var(--accent-color900);
}

.color_block--error050 {
  background-color: var(--error-color050);
}
.color_block--error100 {
  background-color: var(--error-color100);
}
.color_block--error200 {
  background-color: var(--error-color200);
}
.color_block--error300 {
  background-color: var(--error-color300);
}
.color_block--error400 {
  background-color: var(--error-color400);
}
.color_block--error500 {
  background-color: var(--error-color500);
}
.color_block--error600 {
  background-color: var(--error-color600);
}
.color_block--error700 {
  background-color: var(--error-color700);
}
.color_block--error800 {
  background-color: var(--error-color800);
}
.color_block--error900 {
  background-color: var(--error-color900);
}

/* Pages */