main > div{
   max-width: var(--mw);
   margin-left: auto;
   margin-right: auto;
   height: 100%;
}

.wrappers > div{
   display: none;
   flex-direction: column;
   /* overflow-y: auto; */
}

.wrappers > div > *:not(.collection), .wrappers > div > .collection > *{
   margin-bottom: 1rem;
   box-shadow: var(--bs);
   background-color: var(--white);
}

.wrappers > .limit_height > *:not(.collection):last-of-type, .wrappers > .limit_height > .collection > *:last-of-type{
   margin-bottom: 0;
}

.limit_height{
   max-height: calc(100% - 1rem);
}

.limit_height > *{
   flex-shrink: 0;
   max-height: 100%;
   overflow-y: auto;
}

.wrappers > div > .titleblock{
   padding: 1rem;
   background-color: var(--white);
   position: relative;
   z-index: 1;
   border-radius: 1rem;
}

.wrappers > div > .scrollable{
   flex-shrink: 1;
}

.wrappers > div > .filler{
   box-shadow: none;
   height: 2.5rem;
   background-color: transparent;
   margin-bottom: 0;
}

table{
   width: 100%;
   font-size: 90%;
}

table, table *{
   border: 0;
   border-spacing: 0;
   text-align: left;
}

table.fixhead thead{
   position: sticky;
   top: 0;
   z-index: 1;
}

thead{
   background-color: var(--accent);
   color: var(--white);
}

thead th{
   font-weight: normal;
}

table tr:not(tr:first-child) td{
   border-top: 1px solid var(--gray);
}

table tr.darker:not(tr:first-child) td{
   border-top: 1px solid var(--gray_dark);
}

table tr.secondary:not(tr:first-child) td{
   border-top: 1px solid var(--gray_darker);
}

table tr > *:first-child, table tr > *.first{
   padding-left: 1rem;
}

table tr > *:last-child, table tr > *.last{
   padding-right: 1rem;
   text-align: right;
}

table tr > *:last-child:not(*:first-child) > *, table tr > *.last:not(*.first) > *{
   text-align: right;
}

table tr > *:last-child:first-child, table tr > *.last.first{
   text-align: left;
}

thead tr.secondary{
   background-color: var(--gray);
   color: var(--gray_darker);
}

tr.darker{
   background-color: var(--gray);
}

th, td{
   padding: 0.5rem 0.25rem;
}

td.nopad{
   padding: 0 !important;
}

table tbody .selectable{
   cursor: pointer;
}

table tbody .selectable:hover{
   color: var(--accent)
}

tr.darker.selectable:hover{
   background-color: var(--gray_lighter);
}

table tbody .selectable:active{
   background-color: var(--gray_lighter);
   color: var(--accent_darker)
}

tr.darker.selectable:active{
   background-color: var(--gray_dark);
}

tr.favorite{
   background-color: var(--light_accent);
}

tr.selectable.favorite:hover{
   background-color: var(--light_accent_light);
}

tr.selectable.favorite:active{
   background-color: var(--light_accent_dark);
}

table i {
   color: var(--accent);
}

table tbody .selectable:active i {
   color: var(--accent_darker);
}

tr.secondary {
   color: var(--white);
   background-color: var(--gray_darkest);
}

tr.secondary i{
   color: var(--light_accent);
}

table tbody tr.secondary:active i{
   color: var(--light_accent_dark);
}

tr.secondary.selectable:hover {
   background-color: var(--gray_darkest);
   color: var(--light_accent);
}

tr.secondary.selectable:active {
   color: var(--light_accent_dark);
   background-color: var(--gray_darkest);
}

tr.indented{
   position: relative;
}

tr.indented > *:first-child{
   padding-left: 3rem;
}

tr.indented > *:first-child::before{
   content: " ";
   display: inline-block;
   width: 2rem;
   height: 100%;
   background-color: var(--gray);
   top: 0;
   left: 0;
   position: absolute;
   border-right: 1px solid var(--gray_dark);
}

.participants > div{
   display: flex;
   align-items: center;
}

.participants > div:first-child{
   margin-bottom: 0.5rem;
}

.participants > div > i{
   margin-right: 0.25rem;
}

@media screen and (max-width: 400px){
   .wrappers > div.wide{
      left: -1rem;
      top: -1rem;
      width: calc(100% + 2rem);
   }
}

/* Specific for signage */
/* Specific for signage */
.is-signage-wrapper,
.is-signage-wrapper #wrappers {
   max-width: 100%;
}

.is-signage-wrapper .searchbar,
.is-signage-wrapper .filterbar.spreader,
.is-signage-wrapper .titleblock,
.is-signage-wrapper #wrapper_functions_l,
.is-signage-wrapper .show_startlist,
.is-signage-wrapper .show_less,
.is-signage-wrapper nav {
   display: none !important;
}

.is-signage-wrapper #header_left {
   margin: auto;
}

/* 1 grid */
.is-signage-wrapper.signage-1 .collection {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 1fr;
   grid-template-columns: 1fr;
   -ms-grid-rows: 1fr;
   grid-template-rows: 1fr;
   grid-column-gap: 20px;
   grid-row-gap: 20px;
}
.is-signage-wrapper.signage-1 .collection > *:nth-child(1) {
   -ms-grid-row: 1;
   -ms-grid-column: 1;
}

/* 2 grid */
.is-signage-wrapper.signage-2 .collection {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 1fr 20px 1fr;
   grid-template-columns: repeat(2, 1fr);
   -ms-grid-rows: 1fr;
   grid-template-rows: 1fr;
   grid-column-gap: 20px;
   grid-row-gap: 2px;
}
.is-signage-wrapper.signage-2 .collection > *:nth-child(1) {
   -ms-grid-row: 1;
   -ms-grid-column: 1;
}
.is-signage-wrapper.signage-2 .collection > *:nth-child(2) {
   -ms-grid-row: 1;
   -ms-grid-column: 3;
}

/* 3 grid */
.is-signage-wrapper.signage-3 .collection {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
   grid-template-columns: repeat(3, 1fr);
   -ms-grid-rows: 1fr;
   grid-template-rows: 1fr;
   grid-column-gap: 20px;
   grid-row-gap: 20px;
}

.is-signage-wrapper .collection > *:nth-child(1) {
   -ms-grid-row: 1;
   -ms-grid-column: 1;
}

.is-signage-wrapper .collection > *:nth-child(2) {
   -ms-grid-row: 1;
   -ms-grid-column: 3;
}

.is-signage-wrapper .collection > *:nth-child(3) {
   -ms-grid-row: 1;
   -ms-grid-column: 5;
}

/* 4 grid */
.is-signage-wrapper.signage-4 .collection  {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 1fr 0px 1fr 0px 1fr 0px 1fr;
   grid-template-columns: repeat(4, 1fr);
   -ms-grid-rows: 1fr;
   grid-template-rows: 1fr;
   grid-column-gap: 20px;
   grid-row-gap: 20px;
}
.is-signage-wrapper.signage-4 .collection > *:nth-child(1)  {
   -ms-grid-row: 1;
   -ms-grid-column: 1;
}
.is-signage-wrapper.signage-4 .collection > *:nth-child(2)  {
   -ms-grid-row: 1;
   -ms-grid-column: 3;
}
.is-signage-wrapper.signage-4 .collection > *:nth-child(3)  {
   -ms-grid-row: 1;
   -ms-grid-column: 5;
}
.is-signage-wrapper.signage-4 .collection > *:nth-child(4)  {
   -ms-grid-row: 1;
   -ms-grid-column: 7;
}