: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: 4px;
  --button-shade-darkest: #D0E0F0;
  --button-shade-dark: #E8F0F8;
  --button-shade-light: #F8FAFF;
  --button-cross: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(127, 0, 0); stroke-width: 2; stroke-linecap: round; fill: transparent;" viewBox="0 0 32 32"><line x1="2" y1="2" x2="30" y2="30"/><line x1="2" y1="30" x2="30" y2="2"/></svg>');
  --button-delta: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(0, 0, 127); stroke-width: 2; stroke-linecap: round; fill: transparent;" viewBox="0 0 32 32"><path d="M 2 30 L 16 2, 30 30 Z"/></svg>');
  --button-tick: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(34, 170, 34); stroke-width: 2; stroke-linecap: round; fill: transparent;" viewBox="0 0 20 20"><polyline points="2,12 8,18"/><polyline points="8,18 17,4"/></svg>');
  --button-folder: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="stroke: rgb(238, 170, 0); fill: rgb(238, 170, 0)" viewBox="200 190 675 700"><path d="M257.3312 451.84V332.8c0-42.3936 34.2016-76.8 76.4416-76.8h107.8272c29.5936 0 56.5248 17.152 69.12 44.032l14.8992 31.6416a25.4976 25.4976 0 0 0 23.04 14.6944h192.8192c42.1888 0 76.4416 34.3552 76.4416 76.8v28.672a76.8 76.8 0 0 1 50.9952 88.064l-43.3152 217.6A76.544 76.544 0 0 1 750.6432 819.2H324.5568a76.544 76.544 0 0 1-74.9568-61.7472l-43.3152-217.6a76.8512 76.8512 0 0 1 51.0464-88.0128z m509.5936-3.84v-24.832c0-14.1312-11.4176-25.6-25.4464-25.6h-192.8192a76.4416 76.4416 0 0 1-69.12-44.032l-14.848-31.6928A25.4976 25.4976 0 0 0 441.6 307.2H333.7216a25.5488 25.5488 0 0 0-25.4976 25.6v115.2h458.6496z m-485.6832 51.2a25.6 25.6 0 0 0-24.9856 30.6176l43.3152 217.6c2.4064 11.9808 12.8512 20.5824 24.9856 20.5824h426.0864a25.4976 25.4976 0 0 0 24.9856-20.5824l43.3152-217.6a25.7024 25.7024 0 0 0-24.9856-30.6176H281.2416z"></path></svg>');

  --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: #AA0000;
  --panel-item-disabled-color: #AAA;

  --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 {
  font-size: var(--font-size);
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  box-sizing: border-box;
  height: 30px;
  line-height: 1rem;
  padding: 2px 6px;
  flex: 0 0 auto;
  color: var(--main-text-color);
  user-select: none;
  outline: none;
  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 {
  cursor: pointer;
  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));
}