:root {
  --ons-color-black: #222;
  --ons-color-grey-100: #414042;
  --ons-color-grey-75: #707071;
  --ons-color-grey-60: #8d8c8e;
  --ons-color-grey-50: #a09fa0;
  --ons-color-grey-40: #b3b3b3;
  --ons-color-grey-35: #bcbcbd;
  --ons-color-grey-25: #d5d5d6;
  --ons-color-grey-20: #d9d9d9;
  --ons-color-grey-15: #e2e2e3;
  --ons-color-grey-10: #efeff0;
  --ons-color-grey-5: #f5f5f6;
  --ons-color-white: #fff;
  --ons-color-ocean-blue: #206095;
  --ons-color-sky-blue: #27a0cc;
  --ons-color-night-blue: #003c57;
  --ons-color-emerald-green: #118c7b;
  --ons-color-spring-green: #a8bd3a;
  --ons-color-spring-green-dark: #8a9b2e;
  --ons-color-beetroot-purple: #871A5B;
  --ons-color-coral-pink: #F66068;
  --ons-color-lavendar-purple: #746cb1;
  --ons-color-mint-green: #22d0b6;
  --ons-color-mint-green-dark: #1aa590;
  --ons-color-highlight-orange: #f39431;
  --ons-color-highlight-orange-dark: #f56927;
  --ons-color-dark-leaf-green: #005253;
  --ons-color-aqua-teal: #00a3a6;
  --ons-color-navy-blue: #194766;
  --ons-color-pale-blue: #e7eff4;
  --ons-color-soft-blue-grey: #dee7ee;
  --ons-color-light-blue-grey: #e9eff4;
  --ons-color-leaf-green: #0f8243;
  --ons-color-ruby-red: #d0021b;
  --ons-color-jaffa-orange: #fa6401;
  --ons-color-sun-yellow: #fbc900;
  --ons-color-neon-yellow: #f0f762;
  --ons-color-branded: var(--ons-color-ocean-blue);
  --ons-color-branded-text: var(--ons-color-ocean-blue);
  --ons-color-branded-tint: var(--ons-color-ocean-blue-tint);
  --ons-color-branded-secondary: var(--ons-color-night-blue);
  --ons-color-branded-tertiary: var(--ons-color-aqua-teal);
  --ons-color-branded-supporting: var(--ons-color-spring-green);
  --ons-color-branded-supporting-tint: var(--ons-color-branded-supporting);
  --ons-color-header: var(--ons-color-branded);
  --ons-color-header-neutral: var(--ons-color-grey-75);
  --ons-color-header-masthead: var(--ons-color-white);
  --ons-color-header-masthead-internal: var(--ons-color-branded-secondary);
  --ons-color-header-masthead-neutral: var(--ons-color-black);
  --ons-color-header-title: var(--ons-color-text);
  --ons-color-header-navigation-links: var(--ons-color-text);
  --ons-color-service-links: var(--ons-color-white);
  --ons-color-cta-bg: var(--ons-color-branded-tint);
  --ons-color-banner-bg: var(--ons-color-grey-5);
  --ons-color-banner-bg-dark: var(--ons-color-grey-15);
  --ons-color-page-light: var(--ons-color-white);
  --ons-color-banner-browser-bg: var(--ons-color-black);
  --ons-color-hero-bg: var(--ons-color-branded-tint);
  --ons-color-hero-bg-dark: var(--ons-color-branded);
  --ons-color-text: var(--ons-color-black);
  --ons-color-text-light: var(--ons-color-grey-75);
  --ons-color-text-inverse: var(--ons-color-white);
  --ons-color-text-banner: var(--ons-color-black);
  --ons-color-text-link: var(--ons-color-ocean-blue);
  --ons-color-text-link-hover: var(--ons-color-night-blue);
  --ons-color-text-link-active: var(--ons-color-night-blue);
  --ons-color-text-link-focus: var(--ons-color-black);
  --ons-color-text-inverse-link: var(--ons-color-white);
  --ons-color-text-inverse-link-hover: var(--ons-color-grey-5);
  --ons-color-text-banner-link: var(--ons-color-grey-100);
  --ons-color-text-banner-link-hover: var(--ons-color-black);
  --ons-color-text-metadata: var(--ons-color-black);
  --ons-color-focus: var(--ons-color-sun-yellow);
  --ons-color-focus-dark: var(--ons-color-sun-yellow-dark);
  --ons-color-highlight: var(--ons-color-neon-yellow);
  --ons-color-borders: var(--ons-color-grey-75);
  --ons-color-borders-indent: var(--ons-color-grey-35);
  --ons-color-borders-light: var(--ons-color-grey-35);
  --ons-color-borders-document-image: var(--ons-color-grey-15);
  --ons-color-borders-document-image-focus: var(--ons-color-black);
  --ons-color-placeholder: var(--ons-color-grey-75);
  --ons-color-button: var(--ons-color-leaf-green);
  --ons-color-button-secondary: var(--ons-color-grey-15);
  --ons-color-button-shadow: var(--ons-color-leaf-green-dark-10);
  --ons-color-button-hover: var(--ons-color-leaf-green-dark-5);
  --ons-color-button-secondary-shadow: var(--ons-color-grey-75);
  --ons-color-button-secondary-hover: var(--ons-color-grey-25);
  --ons-color-input-border: var(--ons-color-black);
  --ons-color-input-bg: var(--ons-color-white);
  --ons-color-info: var(--ons-color-ocean-blue);
  --ons-color-info-tint: var(--ons-color-ocean-blue-tint);
  --ons-color-info-vibrant: var(--ons-color-ocean-blue-vibrant);
  --ons-color-success: var(--ons-color-leaf-green);
  --ons-color-success-tint: var(--ons-color-leaf-green-tint);
  --ons-color-success-vibrant: var(--ons-color-leaf-green-vibrant);
  --ons-color-errors: var(--ons-color-ruby-red);
  --ons-color-errors-tint: var(--ons-color-ruby-red-tint);
  --ons-color-errors-vibrant: var(--ons-color-ruby-red-vibrant);
  --ons-color-pending: var(--ons-color-jaffa-orange);
  --ons-color-pending-tint: var(--ons-color-jaffa-orange-tint);
  --ons-color-pending-vibrant: var(--ons-color-jaffa-orange-vibrant);
  --ons-color-dead: var(--ons-color-grey-75);
  --ons-color-instruction: var(--ons-color-jaffa-orange);
  --ons-color-instruction-tint: var(--ons-color-jaffa-orange-tint);
  --ons-color-text-disabled: var(--ons-color-grey-35);
  --ons-color-border-disabled: var(--ons-color-grey-35);
}

#legend {
  padding-top: 16px;
}

.ref-line {
  stroke-width: 2px;
}