: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: #8fc33a;
  --menu-shading-dark: #739b2e;

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

  --tree-insert-color: #00C;
  --tree-theme-color: #88DA00;

  --panel-bg-color: var(--main-bg-color);
  --panel-label-color: var(--main-text-color);
  --panel-edit-background: #FAFAFA;
  --panel-border-color: #FAFAFA;

  --grid-primary-color: #739B2E;
  --grid-background-focus: #E9FACD;

  --boolean-input-background-color: #739B2E;
}

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

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

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

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

.server_load_container {
  grid-template-columns: 200px 1fr
}

@container (width < 700px) {
  .server_load_container {
    grid-template-columns: 0 1fr
  }
}