:root {
  --font-size: 16px;
  --font-family: "Arial";

  --main-bg-color: white;
  --main-text-color: #606060;

  --theme-primary-color: #739B2E;
  --theme-secondary-color: #8FC33A;
  --theme-tertiary-color: #E9FACD;

  --menu-height: 3rem;
  --menu-item-height: var(--menu-height);
  --menu-color-text: #FCFCFC;
  --menu-color-line: #F2F2F2;
  --menu-color-text-active: #FCFCFC;
  --menu-color-line-active: #F9F9F9;
  --menu-color-background-active: rgba(255, 255, 255, 0.25);
  --menu-shading-light: var(--theme-secondary-color);
  --menu-shading-dark: var(--theme-primary-color);
  --menu-background: var(--menu-shading-dark);

  --button-border: #CFDFEF;
  --button-border-radius: 0.5em;
  --button-shade-darkest: #D0E0F0;
  --button-shade-dark: #E8F0F8;
  --button-shade-light: #F8FAFF;

  --tree-item-height: 2em;
  --tree-insert-color: #00C;
  --tree-item-open: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polyline style="stroke: rgb(136, 218, 0); stroke-width: 2; stroke-linecap: round; fill: transparent;" points="12,14 16,18 20,14"/></svg>');
  --tree-item-closed: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polyline style="stroke: rgb(136, 218, 0); stroke-width: 2; stroke-linecap: round; fill: transparent;" points="14,12 18,16 14,20"/></svg>');

  --panel-bg-color: var(--main-bg-color);
  --panel-label-size: 0.8em;
  --panel-label-color: #AAA;
  --panel-outer-margin: 2em;
  --panel-inner-margin: 1em;
  --panel-input-height: 2em;
  --panel-input-background-color: #FAFAFA;
  --panel-edit-background: #FAFAFA;
  --panel-edit-border-color: #FAFAFA;
  --panel-item-border-color: #CCC;
  --panel-boolean-accent-color: var(--theme-secondary-color);
  --panel-text-padding: 0.25em;
  --panel-outline-color: var(--theme-primary-color);
  --panel-outline-hover-color: var(--theme-secondary-color);
  --panel-button-light: var(--theme-secondary-color);
  --panel-button-dark: var(--theme-primary-color);
  --panel-button-text: #FCFCFC;
  --panel-button-other: purple;
  --panel-button-other-light: rgb(185, 0, 185);
  --panel-button-fatal: #ff0000;
  --panel-button-fatal-light: #FF7F7F;
  --panel-item-disabled-color: #CCC;

  --grid-primary-color: var(--theme-primary-color);
  --grid-background-focus: var(--theme-tertiary-color);

  --input-height: 2em;
  --input-background-color: #FAFAFA;

  --boolean-accent-color: var(--theme-secondary-color);
  --boolean-background-color: var(--theme-tertiary-color);

  --client-download-item: none;
}

html {
  font-size: var(--font-size);
  font-family: var(--font-family);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.2);
}

dialog {
  border: none;
  border-radius: 5px;
  padding: 1em;
  box-shadow: 0 0.25em 0.25em 0.125em rgba(0,0,0,0.25);
}

button {
  flex: 0 0 auto;
  height: 2rem;
  line-height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px outset;
  border-radius: var(--button-border-radius);
  border-color: var(--button-border) white white var(--button-border);
  background: linear-gradient(to bottom, var(--button-shade-light), var(--button-shade-dark));
}

button:hover {
  background: linear-gradient(to bottom, var(--button-shade-light), var(--button-shade-darkest));
}

button:active,
button.active {
  border: 1px inset;
  background: linear-gradient(to top, var(--button-shade-light), var(--button-shade-darkest));
}