* {
  margin: 0;
  padding: 0;
}

:root {
  --topbar-height: 2rem;
  --bottombar-height: 2rem;
  --grid-gap: 6px;
}

body {
  display: grid;
  height: 100vh;
  width:100vw;
  gap: var(--grid-gap);
  grid-template-areas:
    "topbar topbar"
    "work-area sidebar"
    "bottombar bottombar";
  background-color: var(--sl-color-neutral-200);
  color: var(--sl-color-neutral-600);
  font-family: var(--sl-font-sans);
  grid-template-columns: 1fr auto;
  /*
  grid-template-rows: var(--topbar-height) auto var(
      --bottombar-height
    );
    */
  font-size: var(--sl-font-size-small);
  color: var(--sl-color-neutral-800);
}

a {
  color:var(--sl-color-primary-700)
}
a:visited {
  color:var(--sl-color-primary-700)
}


.menu-item-icon-prefix {
  margin-right: var(--sl-spacing-small);
}

#app-leftbar {
  grid-area: toolbar;
  display: grid;
  grid-template-columns: auto;
  align-content: start;
  background-color: var(--sl-color-neutral-200);
}


#app-loading-overlay {
  background-color: var(--sl-color-neutral-0);
  z-index: var(--sl-z-index-drawer);
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  align-items: center;
  justify-items: center;
}