/* Specifies layout for elements. Note that the colors and decorations are in a
 * different file.
 */

.topbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: fit-content;
   margin: 0 0 1em 0;
   padding: 1em 0 1em 0;
}


.flex-across {
   display: flex;
   flex-direction: row;
   gap: 1em;
   align-items: start;
}

.flex-down {
   display: flex;
   flex-direction: column;
   gap: 1em;
   align-items: start;
}

.align-items-center {
   align-items: center;
}

.align-items-end {
   align-items: end;
}

.align-items-start {
   align-items: start;
}

/* Default alignment for table cells: top-left */
th, td {
   text-align: left;
   vertical-align: top;
}

td input[type=checkbox]+label {
   display: revert;
}


#container-main {
   margin-top: 5em;
   margin-bottom: 1em;
   display: grid;
   grid-template-columns: auto 2fr 1fr;
}

#container-main>div {
   box-sizing: border-box;
   height: 90vh;
}

#container-main>div:nth-child(2),
#container-main>div:nth-child(3) {
   border-right: 1px solid #ccc;
   margin-top: 2em;
   margin-bottom: 4em;
}


.sidebar {
   left: 0;
   width: fit-content;
   padding: 1em;
}


#container-content {
   padding: 1em;
}

#content-title {
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
}

#content-body {
   width: 100%;
   margin-bottom: 5em;
}

#container-status {
   overflow: scroll;
   padding: 1em;
}

nav {
   justify-content: space-around;
   min-width: max-content;
}

nav>* {
   list-style: none;
   justify-content: space-evenly;
   padding: 0 1em 0.25em 0.5em;
}

nav * {
   text-decoration: none;
}

.banner {
   width: fit-content;
   margin: 1em auto 1em auto;
   border-style: solid;
   border-width: 1px;
   padding: 1em;
   font-size: 5rem;
}

.button-bar {
   display: flex;
   flex-direction: row;
   gap: 1em;
   align-items: center;
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
   margin-top: 1em;
   grid-column: 1 / -1;
}

.large-1 {
   font-size: 1.5rem;
}

.large-2 {
   font-size: 2rem;
}

.small-1 {
   font-size: 0.75rem;
}

.small-2 {
   font-size: 0.5rem;
}

.smaller-1 {
   font-size: 0.75em;
}

.smaller-2 {
   font-size: 0.5em;
}

.smaller-3 {
   font-size: 0.25em;
}

.larger-1 {
   font-size: 1.25em;
}

.larger-2 {
   font-size: 1.5em;
}

.larger-3 {
   font-size: 1.75em;
}

.card {
   width: fit-content;
   margin: 1em auto 0 auto;
   border-style: none;
}

.strut {
   min-height: 1em;
}

.card h4 {
   margin: 0 0 1.5em 0;
   padding: 0;
}

details>div {
   padding: 2em;
}

.width-100 {
   width: 100%;
}

.width-90 {
   width: 90%;
}

.button-bar>button {
   min-width: 8em;
}

.overflow-scroll {
   overflow: scroll;
}

.constrain-width-5em {
   max-width: 5em;
   overflow: scroll;
}

.constrain-width-10em {
   max-width: 10em;
   overflow: scroll;
}

.constrain-width-15em {
   max-width: 15em;
   overflow: scroll;
}

.constrain-width-20em {
   max-width: 20em;
   overflow: scroll;
}

.constrain-width-25em {
   max-width: 25em;
   overflow: scroll;
}

.constrain-width-30em {
   max-width: 30em;
   overflow: scroll;
}

.constrain-width-50em {
   max-width: 50em;
   overflow: scroll;
}

.constrain-width-72ch {
   max-width: 72ch;
   overflow: scroll;
}

.constrain-height-5em {
   max-height: 5em;
   overflow: scroll;
}

.constrain-height-10em {
   max-height: 10em;
   overflow: scroll;
}

.constrain-height-15em {
   max-height: 15em;
   overflow: scroll;
}

.constrain-height-20em {
   max-height: 20em;
   overflow: scroll;
}

.constrain-height-25em {
   max-height: 25em;
   overflow: scroll;
}

.constrain-height-30em {
   max-height: 30em;
   overflow: scroll;
}


.constrain-height-60vh {
   max-height: 60vh;
   overflow-y: auto;
}

.fit-width {
   width: fit-content;
   overflow: scroll;
}

.fit-height {
   height: fit-content;
   overflow: scroll;
}