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

  --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: #18ADEF;
  --menu-shading-dark: #1762C8;

  --tree-item-height: 2em;
  --tree-insert-color: #00C;

  --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-text-padding: 0.25em;
  --panel-outline-color: var(--menu-shading-light);
  --panel-boolean-accent-color: var(--menu-shading-dark);
  --panel-button-light: var(--menu-shading-light);
  --panel-button-dark: var(--menu-shading-dark);
  --panel-button-text: #FCFCFC;
  --panel-button-other: purple;
  --panel-button-other-light: rgb(185, 0, 185);
}

html {
  font-size: 16px;
  font-family: "Arial";
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: var(--main-text-color);
  background: var(--main-bg-color);
}

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

dialog {
  min-width: 50%;
  min-height: 50%;
  border: 1px solid black;
  border-radius: 5px;
}