@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;
  }
}

: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;
  }
}

/* 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);
}

.story th {
  background: inherit;
}

/* 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;
}

html,
body,
.placeholder-image {
  height: 100%;
}

body {
  overflow: hidden;
}

iframe {
  display: block;
  height: calc(100vh - var(--topnav-height));
}

.playground-banner {
  width: 100%;
  background-color: #ff8838;
  color: #242c32;
  text-align: center;
  padding: var(--s-1);
}

.playground-banner a {
  font-weight: bold;
}

.placeholder-image {
  background-image: url(../assets/playground-placeholder-439dcd3ce2709934f399.svg);
  background-size: cover;
  background-repeat: no-repeat;
}

.playground {
  /* --- REVERT TO ORIGINAL STYLING 
  if you change this change it in website/styles/storybook.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);
}

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

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

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

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

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

.playground th {
  background: inherit;
}