:root {
  /* Subset of https://material.io/design/color/the-color-system.html */
  --chops-red-50: #ffebee;
  --chops-red-700: #d32f2f;
  --chops-purple-50: #f3e5f5;
  --chops-purple-700: #7b1fa2;
  --chops-blue-50: #e3f2fd;
  /*
    Additional blue added on top of the 2014 Material Design palette because
    blue 50 is too low contrast for backgrounds. Made from mixing blue 50
    and blue 100.
  */
  --chops-blue-75: #d9edfc;
  --chops-blue-100: #bbdefb;
  --chops-blue-300: #64b5f6;
  --chops-blue-700: #1976d2;
  --chops-blue-900: #01579b;
  --chops-green-50: #e8f5e9;
  --chops-green-800: #2e7d32;
  --chops-light-green-10: #f6fff5;
  --chops-light-green-50: #f1f8e9;
  --chops-yellow-50: #fffde7;
  --chops-orange-50: #fff3e0;
  --chops-orange-200: #ffcc80;
  --chops-gray-50: #fafafa;
  --chops-gray-200: #eee;
  --chops-gray-300: #e0e0e0;
  --chops-gray-400: #bdbdbd;
  --chops-gray-500: #9e9e9e;
  --chops-gray-600: #757575;
  --chops-gray-700: #616161;
  --chops-gray-800: #424242;
  --chops-gray-850: #303030;
  --chops-gray-900: #212121;
  /* Making these variables makes it easier to add user-side scripts in a reasonable way. */
  --chops-white: #ffffff;
  --chops-black: #000000;

  /* To make grays used for font styles and icons maintain consistent
   * contrast ratios across colored backgrounds, we repesent them as pure black
   * with opacity set. */
  --chops-gray-700-alpha: hsla(0, 0%, 0%, 0.62);
  --chops-gray-800-alpha: hsla(0, 0%, 0%, 0.74);
  --chops-gray-900-alpha: hsla(0, 0%, 0%, 0.87);

  --chops-blue-gray-25: #f1f3f4;
  --chops-blue-gray-50: #eceff1;  /* Similar to grimoire. */

  --chops-primary-header-bg: var(--chops-white);
  --chops-secondary-header-bg: var(--chops-blue-gray-25);
  --chops-sidebar-bg: var(--chops-blue-gray-25);
  --chops-page-bg: var(--chops-white);
  --chops-footer-bg: transparent;
  --chops-primary-icon-color: var(--chops-gray-700-alpha);

  --chops-normal-border: 1px solid hsl(0, 0%, 85%);
  /* Border color for situations when contrast is important. */
  --chops-accessible-border: 1px solid var(--chops-gray-400);
  --chops-radius: 6px;
  --chops-shadow: none;

  --chops-primary-font-color: var(--chops-gray-900-alpha);
  --chops-font-family: 'Roboto', 'Noto', sans-serif;
  --chops-link-color: var(--chops-primary-accent-color);
  --chops-link-font-weight: 500;
  --chops-light-accent-color: var(--chops-blue-300);
  --chops-primary-accent-color: var(--chops-blue-700);
  --chops-primary-accent-bg: var(--chops-blue-50);
  --chops-primary-button-bg: var(--chops-primary-accent-color);
  --chops-primary-button-color: var(--chops-white);
  --chops-button-bg: var(--chops-gray-200);
  --chops-button-color: var(--chops-black);
  --chops-button-disabled-bg: var(--chops-gray-300);
  --chops-button-disabled-color: var(--chops-gray-600);
  --chops-button-border: none;
  --chops-button-radius: 4px;
  --chops-choice-bg: var(--chops-blue-gray-50);
  --chops-choice-color: var(--chops-gray-600);
  --chops-active-choice-bg: var(--chops-blue-75);
  --chops-active-choice-color: var(--chops-primary-accent-color);
  --chops-transition-time: 0.1s;

  --chops-error-bubble-bg: var(--chops-red-50);
  --chops-notice-bubble-bg: var(--chops-orange-50);
  --chops-notice-border: 1px solid var(--chops-orange-200);
  --chops-help-bubble-bg: var(--chops-blue-50);
  --chops-field-error-color: var(--chops-red-700);
  --chops-selected-bg: var(--chops-yellow-50);

  --chops-card-heading-bg: var(--chops-secondary-header-bg);
  --chops-card-details-bg: var(--chops-gray-50);
  --chops-card-border: var(--chops-normal-border);
  --chops-card-content-bg: var(--chops-white);

  --chops-table-header-bg: var(--chops-secondary-header-bg);
  --chops-table-row-bg: var(--chops-white);
  --chops-table-divider: var(--chops-normal-border);

  --chops-main-font-size: 13px;
  --chops-large-font-size: 15px;
  --chops-icon-font-size: 20px;

  /* A few Monorail-specific CSS variables. */
  --monorail-header-height: 44px;
  --monorail-metadata-open-bg: var(--chops-light-green-10);
  --monorail-metadata-closed-bg: var(--chops-sidebar-bg);
}


body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--chops-font-family);
  line-height: 1.4;
  font-size: var(--chops-main-font-size);
  min-width: 300px;
  background: var(--chops-page-bg);
  color: var(--chops-primary-font-color);
}

/* Global styles for the EZT pages. */
a {
  color: var(--chops-link-color);
  text-decoration: none;
  font-weight: var(--chops-link-font-weight);
}

a:hover {
  text-decoration: underline;
}

/* Legacy CSS used by both the SPA and the EZT pages. */
#footer {
  clear: both;
  text-align: right;
  padding-top: 1em;
  margin: 3.5em 0em;
  color: var(--chops-gray-500);
  background: var(--chops-footer-bg);
}

#footer a,
#footer a:visited {
  text-decoration: none;
  margin-right: 2em;
}

#ac-list {
  border: 1px solid var(--chops-gray-400);
  background: var(--chops-white);
  color: var(--chops-link-color);
  padding: 2px;
  z-index: 999;
  max-height: 18em;
  overflow-x: hidden;
  overflow-y: auto;
}
#ac-list { font-size: 95%; }
#ac-list tr { margin: 1px; cursor: pointer; padding: 0 10px; }
#ac-list th { color: var(--chops-gray-850); text-align: left; }
#ac-list .selected,
#ac-list .selected td { background: var(--chops-active-choice-bg); }
#ac-list td, #ac-list th { white-space: nowrap; padding-right: 22px}