#body-wrapper{
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    display: grid;
    grid-gap: 5px;
    background-color: antiquewhite;
    grid-template-columns: 200px auto;
    grid-auto-rows: minmax(min-content, max-content) auto minmax(min-content, max-content) ;
    grid-template-areas:
    "sidebar  header" 
    "sidebar content"
    "sidebar footer";
}

#body-header{
    background-color: #999;
    grid-area: header;
    padding: 1em;
    text-align: end;
}

#body-header a{
  padding: 1em;
}

#body-sidebar{
    background-color: blanchedalmond;
    grid-area: sidebar;
}

#body-sidebar a{ display: block;
}

#body-content{
    border: 1px solid ;
    border-color: grey;
    grid-area: content;
    overflow-y: auto;
}

#body-footer{
  padding: 1em;
  background-color: darkgrey;
  grid-area: footer;
  text-align: center;
}


#body-footer > a::after:not(:last-child) {
  margin : auto 0.75em;
  content: "| "
  }

    

#body-overlay {
  background-color: red;
  z-index: 10;
  grid-column: content-start / content-end;
  grid-row: header-start / content-end;
}




.error input{
  border: 1px solid red;
}


.error .help-text{
  color: red;
}