#root-body{
  display: grid;
  grid-template-rows: auto auto; /* Top bar height and remaining space */
  grid-template-columns: auto 1fr; /* Sidebar width and main content */
  grid-template-areas:
    "header header"
    "sidebar main";
}

#root-main
{
  grid-area: main;
}

#root-header {
  grid-area: header;
  display: flex;
  flex-direction: row;
  background-color: var(--primary-dim);
  width: -webkit-fill-available;
  height: 56px;
  justify-content: space-between;
  opacity: 1;
  position: sticky;
  top: 0;
  z-index: 1;
}