:root {

  /* misc */
  --border: #cccccc;
  --table-stripe: #ececec;
  --text-label: #000000;
  --logo-text-color: #383932;

  /* header */
  --background-0: #eaeaea;
  --foreground-0: var(--logo-text-color);
  --hover-0: transparent;
  --hover-text-0: #9e9e9e;

  /* menu */
  --background-1: #f0f0f0;
  --foreground-1: #000000;
  --hover-1: #e0e0e0;

  /* main pane */
  --background-2: #f5f5f5;
  --foreground-2: #000000;
  --hover-2: #cccccc;

  /* buttons: alternate */
  --background-3: #fafafa;
  --foreground-3: #000000;
  --hover-3: #eeeeee;

  /* input fields */
  --background-4: #ffffff;
  --foreground-4: #000000;
  --hover-4: #cccccc;

  /* menu top nav buttons */
  --background-5: #f0f0f0;
  --foreground-5: #000000;
  --hover-5: #e0e0e0;

  /* buttons: new, tiny */
  --background-6: #2196F3;
  --foreground-6: #fafafa;
  --hover-6: #1976D2;

  /* buttons: save, send, confirm, etc. */
  --background-7: #88b61d;
  --foreground-7: #ffffff;
  --hover-7: #6a8f16;

  /* buttons: cancel, alternate function; normal messages */
  --background-8: #e0e0e0;
  --foreground-8: #000000;
  --foreground-8-icon: #757575;
  --hover-8: #cccccc;

  /* buttons: delete, warning, etc.; error messages */
  --background-9: #f44336;
  --foreground-9: #ffffff;
  --hover-9: #d32f2f;

  /* settings top tab highlight */
  --foreground-23: #ffffff;
  --background-23: #2196F3;
  --hover-23: #64B5F6;

  /* settings lower tabs */
  --foreground-24: #000000;
  --background-24: #f0f0f0;
  --hover-24: #fafafa;

  /* device panel */
  --background-10: #ededed;
  --foreground-10: #000000;
  --hover-10: #cccccc;

  /* record label */
  --background-11: #fafafa;
  --foreground-11: #000000;

  /* status up */
  --background-12: #88b61d;
  --foreground-12: #ffffff;
  --hover-12: #6a8f16;
  --border-12: #88b61d;

  /* status down */
  --background-13: #f44336;
  --foreground-13: #ffffff;
  --hover-13: #d32f2f;
  --border-13: #f44336;

  /* status maint */
  --background-14: #9e9e9e;
  --foreground-14: #ffffff;
  --hover-14: #b8b8b8;
  --border-14: #9e9e9e;

  /* check color */
  --foreground-15: #88b61d;

  /* minus color */
  --foreground-16: #9e9e9e;

  /* exclamation color */
  --foreground-17: #f44336;

  /* alert/info color */
  --foreground-22: #2196F3;

  /* status warning */
  --background-18: #000000;
  --foreground-18: #ffffff;
  --hover-18: #b8b8b8;
  --border-18: #000000;

  /* event up */
  --background-19: #ffffff;
  --foreground-19: #88b61d;
  --hover-19: #b8b8b8;
  --border-19: #ffffff;

  /* event down */
  --background-20: #ffffff;
  --foreground-20: #f44336;
  --hover-20: #b8b8b8;
  --border-20: #ffffff;

  /* event warning */
  --background-21: #ffffff;
  --foreground-21: #000000;
  --hover-21: #b8b8b8;
  --border-21: #000000;
}