: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 {
  --root-spacing: var(--s-2);
  --min-panel-size: var(--s7);
  --controls-font-size: var(--font-size-info);
  --demo-background-color: #eeeeee;
  --demo-background-colorshift: #dddddd;
  --border-color: var(--neutral-color400);
  --text-color: var(--neutral-color700);
}

.demo__support {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  width: 100%;
  background: var(--demo-background-color);
}

.demo__support__controls {
  background: #2f3e46;
  border-color: var(--border-color);
  border-bottom: solid 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: var(--s-2) 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.demo__support__controls span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.breadcrumb {
  width: 40%;
}

.demo__support__controls input {
  background: 'var(--demo-background-color)';
  color: var(--text-color);
}

.demo__support__controls .select-icon {
  margin: 0px 0px 0px -14px;
  pointer-events: none;
  font-size: 0.5rem;
  color: var(--text-color);
}

#breadcrumbs .crumb {
  color: #0000ee;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #eeeeee;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 3px;
}

.crumb .singlecrumb.childcrumb {
  color: black;
  font-weight: bold;
}

.crumb .parentcrumb.singlecrumb:hover {
  color: #000099;
  cursor: pointer;
  text-decoration: underline;
}

.crumb__divider {
  color: black;
}

.demo__support__charts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  max-height: 100%;
  height: 100%;
  width: 100%;
}

.demo__support__charts > * + * {
  margin-left: var(--root-spacing);
}

.lhs {
  background-color: var(--background-color);
  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-flex: 3;
      -ms-flex: 3;
          flex: 3;
  height: 100%;
  min-width: var(--min-panel-size);
  position: relative;
}

.rhs {
  background-color: var(--background-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  height: 100%;
  min-height: 100%;
  min-width: var(--min-panel-size);
  position: relative;
}

.demo__kl-container {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.underline {
  text-decoration: underline;
}

.demo__support__controls__control-with-label {
  font-size: var(--controls-font-size);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.demo__support__controls__control-with-label label {
  padding: var(--s-2) var(--s-1);
}

@media (max-width: 700px) {
  .demo__support__controls__control-with-label {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

/* the point at which the view changes to column rather than row layout */
@media (max-width: 609px) {
  .rhs {
    margin-top: var(--root-spacing);
    margin-left: 0;
  }
}

#reset-button {
  border-color: var(--neutral-color100);
  letter-spacing: 0.08em;
  outline: none;
  height: 1.7rem;
  margin: 0 var(--s-3);
  color: var(--neutral-color100);
}

button#reset-button:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

.demo__support__select {
  padding: var(--s-2) var(--s0) var(--s-2) var(--s-1);
  border: none;
  outline: none;
  padding-right: var(--s1);
}

#demo__tooltip {
  color: black;
  position: absolute;
  pointer-events: none;
  padding: 5px;
  background: #fff;
  background-color: #eeeeee;
  border: 1px solid var(--demo-background-colorshift);
  min-width: 5px;
  min-height: 30px;
  font-size: 14px;
  border-radius: 8px;
  -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#demo__tooltip.tooltip-critical {
  background-color: #ffb8b6;
  border: 1px solid #b54640;
}

#demo__tooltip.tooltip-delayed {
  background-color: #ffd8a5;
  border: 1px solid #fdbd73;
}

.demo__legend {
  position: absolute;
  top: 20px;
  right: 10px;
  background-color: rgba(238, 238, 238, 0.7);
  border: 1px solid var(--demo-background-colorshift);
  padding: 10px;
  border-radius: 8px;
  color: black;
  font-family: sans-serif;
  font-size: 12px;
  z-index: 10;
}

.legend__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  line-height: 1;
}

.legend__item:last-child {
  margin-bottom: 0;
}

.color-box {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 8px;
  border: 1px solid #fff;
}

.color-box.critical {
  background-color: #ef5350;
}

.color-box.high {
  background-color: #ffb74d;
}

.color-box.low {
  background-color: #90a4ae;
}

.cursor-pointer canvas {
  cursor: pointer !important;
}