.grid:not(.inline) { display: grid; }
.grid.inline { display: inline-grid; }

.grid.flow-row    { grid-auto-flow: row; }
.grid.flow-col,
.grid.flow-column { grid-auto-flow: column; }
.grid.flow-dense  { grid-auto-flow: dense; }
.flow-row.auto    { grid-auto-rows: auto; }
.flow-row.fr      { grid-auto-rows: 1fr; }
.flow-row.min     { grid-auto-rows: min-content; }
.flow-col.auto,
.flow-column.auto { grid-auto-columns: auto; }
.flow-col.fr      { grid-auto-columns: 1fr; }

.grid > div,
.grid > span,
.grid > h1 {
    display: block;
}
.grid img {
    object-fit: cover;
    width: 100%;
    z-index: -1;
}

.grid.col-a     { grid-template-columns: auto; }
.grid.col-f     { grid-template-columns: 1fr;  }
.grid.col-aa    { grid-template-columns: auto auto; }
.grid.col-fa    { grid-template-columns: 1fr  auto; }
.grid.col-af    { grid-template-columns: auto 1fr;  }
.grid.col-ff    { grid-template-columns: 1fr  1fr;  }
.grid.col-aaa   { grid-template-columns: auto auto auto; }
.grid.col-aaf   { grid-template-columns: auto auto 1fr;  }
.grid.col-afa   { grid-template-columns: auto 1fr  auto; }
.grid.col-aff   { grid-template-columns: auto 1fr  1fr;  }
.grid.col-faa   { grid-template-columns: 1fr  auto auto; }
.grid.col-faf   { grid-template-columns: 1fr  auto 1fr;  }
.grid.col-ffa   { grid-template-columns: 1fr  1fr  auto; }
.grid.col-fff   { grid-template-columns: 1fr  1fr  1fr;  }
.grid.col-aaaa  { grid-template-columns: auto auto auto auto; }
.grid.col-aaaf  { grid-template-columns: auto auto auto 1fr;  }
.grid.col-aafa  { grid-template-columns: auto auto 1fr  auto; }
.grid.col-aaff  { grid-template-columns: auto auto 1fr  1fr;  }
.grid.col-afaa  { grid-template-columns: auto 1fr  auto auto; }
.grid.col-afaf  { grid-template-columns: auto 1fr  auto 1fr;  }
.grid.col-affa  { grid-template-columns: auto 1fr  1fr  auto; }
.grid.col-afff  { grid-template-columns: auto 1fr  1fr  1fr;  }
.grid.col-faaa  { grid-template-columns: 1fr  auto auto auto; }
.grid.col-faaf  { grid-template-columns: 1fr  auto auto 1fr;  }
.grid.col-fafa  { grid-template-columns: 1fr  auto 1fr  auto; }
.grid.col-faff  { grid-template-columns: 1fr  auto 1fr  1fr;  }
.grid.col-ffaa  { grid-template-columns: 1fr  1fr  auto auto; }
.grid.col-ffaf  { grid-template-columns: 1fr  1fr  auto 1fr;  }
.grid.col-fffa  { grid-template-columns: 1fr  1fr  1fr  auto; }
.grid.col-ffff  { grid-template-columns: 1fr  1fr  1fr  1fr;  }
.grid.col-aaaaa { grid-template-columns: auto auto auto auto auto; }
.grid.col-aaaaf { grid-template-columns: auto auto auto auto 1fr;  }
.grid.col-aaafa { grid-template-columns: auto auto auto 1fr  auto; }
.grid.col-aaaff { grid-template-columns: auto auto auto 1fr  1fr;  }
.grid.col-aafaa { grid-template-columns: auto auto 1fr  auto auto; }
.grid.col-aafaf { grid-template-columns: auto auto 1fr  auto 1fr;  }
.grid.col-aaffa { grid-template-columns: auto auto 1fr  1fr  auto; }
.grid.col-aafff { grid-template-columns: auto auto 1fr  1fr  1fr;  }
.grid.col-afaaa { grid-template-columns: auto 1fr  auto auto auto; }
.grid.col-afaaf { grid-template-columns: auto 1fr  auto auto 1fr;  }
.grid.col-afafa { grid-template-columns: auto 1fr  auto 1fr  auto; }
.grid.col-afaff { grid-template-columns: auto 1fr  auto 1fr  1fr;  }
.grid.col-affaa { grid-template-columns: auto 1fr  1fr  auto auto; }
.grid.col-affaf { grid-template-columns: auto 1fr  1fr  auto 1fr;  }
.grid.col-afffa { grid-template-columns: auto 1fr  1fr  1fr  auto; }
.grid.col-affff { grid-template-columns: auto 1fr  1fr  1fr  1fr;  }
.grid.col-faaaa { grid-template-columns: 1fr  auto auto auto auto; }
.grid.col-faaaf { grid-template-columns: 1fr  auto auto auto 1fr;  }
.grid.col-faafa { grid-template-columns: 1fr  auto auto 1fr  auto; }
.grid.col-faaff { grid-template-columns: 1fr  auto auto 1fr  1fr;  }
.grid.col-fafaa { grid-template-columns: 1fr  auto 1fr  auto auto; }
.grid.col-fafaf { grid-template-columns: 1fr  auto 1fr  auto 1fr;  }
.grid.col-faffa { grid-template-columns: 1fr  auto 1fr  1fr  auto; }
.grid.col-fafff { grid-template-columns: 1fr  auto 1fr  1fr  1fr;  }
.grid.col-ffaaa { grid-template-columns: 1fr  1fr  auto auto auto; }
.grid.col-ffaaf { grid-template-columns: 1fr  1fr  auto auto 1fr;  }
.grid.col-ffafa { grid-template-columns: 1fr  1fr  auto 1fr  auto; }
.grid.col-ffaff { grid-template-columns: 1fr  1fr  auto 1fr  1fr;  }
.grid.col-fffaa { grid-template-columns: 1fr  1fr  1fr  auto auto; }
.grid.col-fffaf { grid-template-columns: 1fr  1fr  1fr  auto 1fr;  }
.grid.col-ffffa { grid-template-columns: 1fr  1fr  1fr  1fr  auto; }
.grid.col-fffff { grid-template-columns: 1fr  1fr  1fr  1fr  1fr;  }

.grid.col-2 > .span, .span2-col { grid-column: span 2; }
.grid.col-3 > .span, .span3-col { grid-column: span 3; }
.grid.col-4 > .span, .span4-col { grid-column: span 4; }
.grid.col-5 > .span, .span5-col { grid-column: span 5; }
.grid.col-6 > .span, .span6-col { grid-column: span 6; }
.grid.col-8 > .span, .span8-col { grid-column: span 8; }

.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-f1 { grid-column: 1 / span 1; }
.span-f2 { grid-column: 1 / span 2; }
.span-f3 { grid-column: 1 / span 3; }
.span-f4 { grid-column: 1 / span 4; }
.span-f5 { grid-column: 1 / span 5; }
.span-f6 { grid-column: 1 / span 6; }
.span-f7 { grid-column: 1 / span 7; }
.span-f8 { grid-column: 1 / span 8; }

/* template columns for different types of grids */
.grid.col-1.auto  { grid-template-columns: auto; }
.grid.col-1.fr    { grid-template-columns: 1fr;  }
.grid.col-2.auto  { grid-template-columns: repeat(2, auto); }
.grid.col-2.fr    { grid-template-columns: repeat(2, 1fr);  }
.grid.col-3.auto  { grid-template-columns: repeat(3, auto); }
.grid.col-3.fr    { grid-template-columns: repeat(3, 1fr);  }
.grid.col-4.auto  { grid-template-columns: repeat(4, auto); }
.grid.col-4.fr    { grid-template-columns: repeat(4, 1fr);  }
.grid.col-5.auto  { grid-template-columns: repeat(5, auto); }
.grid.col-5.fr    { grid-template-columns: repeat(5, 1fr);  }
.grid.col-6.auto  { grid-template-columns: repeat(6, auto); }
.grid.col-6.fr    { grid-template-columns: repeat(6, 1fr);  } 
.grid.col-8.auto  { grid-template-columns: repeat(8, auto); }
.grid.col-8.fr    { grid-template-columns: repeat(8, 1fr);  } 

.grid.col-2.fr-auto { grid-template-columns: 1fr auto; }
.grid.col-2.auto-fr { grid-template-columns: auto 1fr; }
.grid.col-3.auto-auto-fr, .grid.col-3.auto2-fr { grid-template-columns: auto auto 1fr; }
.grid.col-3.auto-fr-auto { grid-template-columns: auto 1fr auto; }
.grid.col-3.auto-fr-fr, .grid-col-3.auto-fr2 { grid-template-columns: auto 1fr 1fr; }
.grid.col-3.fr-auto-fr { grid-template-columns: 1fr auto 1fr; }
.grid.col-3.fr-fr-auto, .grid.col-3.fr2-auto { grid-template-columns: 1fr 1fr auto; }
.grid.col-3.fr-auto-auto, .grid.col-3.fr-auto2 { grid-template-columns: 1fr auto auto; }

.grid.col-4.auto-auto-auto-fr, .grid.col-4.auto3-fr { grid-template-columns: auto auto auto 1fr; }
.grid.col-4.auto-auto-fr-auto, .grid.col-4.auto2-fr-auto { grid-template-columns: auto auto 1fr auto; }
.grid.col-4.auto-auto-fr-fr, .grid.col-4.auto2-fr2, .grid.col-4.auto-fr { grid-template-columns: auto auto 1fr 1fr; }
.grid.col-4.auto-fr-auto-auto, .grid.col-4.auto-fr-auto2 { grid-template-columns: auto 1fr auto auto; }
.grid.col-4.auto-fr-auto-fr { grid-template-columns: auto 1fr auto 1fr; }
.grid.col-4.auto-fr-fr-auto, .grid.col-4.auto-fr2-auto { grid-template-columns: auto 1fr 1fr auto; }
.grid.col-4.auto-fr-fr-fr, .grid.col-4.auto-fr3 { grid-template-columns: auto 1fr 1fr 1fr; }
.grid.col-4.fr-auto-auto-auto, .grid.col-4.fr-auto3 { grid-template-columns: 1fr auto auto auto; }
.grid.col-4.fr-auto-auto-fr, .grid.col-4.fr-auto2-fr { grid-template-columns: 1fr auto auto 1fr; }
.grid.col-4.fr-auto-fr-auto   { grid-template-columns: 1fr auto 1fr auto; }
.grid.col-4.fr-auto-fr-fr, .grid.col-4.fr-auto-fr2 { grid-template-columns: 1fr auto 1fr 1fr; }
.grid.col-4.fr-fr-auto-auto, .grid.col-4.fr2-auto2, .grid.col-4.fr-auto { grid-template-columns: 1fr 1fr auto auto; }
.grid.col-4.fr-fr-auto-fr, .grid.col-4.fr2-auto-fr { grid-template-columns: 1fr 1fr auto 1fr; }
.grid.col-4.fr-fr-fr-auto, .grid.col-4.fr3-auto { grid-template-columns: 1fr 1fr 1fr auto; }

.grid.col-5.auto-auto-auto-auto-fr, .grid.col-5.auto4-fr { grid-template-columns: auto auto auto auto 1fr; }
.grid.col-5.auto-auto-auto-fr-auto, .grid.col-5.auto3-fr-auto { grid-template-columns: auto auto auto 1fr auto; }
.grid.col-5.auto-auto-auto-fr-fr, .grid.col-5.auto3-fr2 { grid-template-columns: auto auto auto 1fr 1fr; }
.grid.col-5.auto-auto-fr-auto-auto, .grid.col-5.auto2-fr-auto2 { grid-template-columns: auto auto 1fr auto auto; }
.grid.col-5.auto-auto-fr-auto-fr, .grid.col-5.auto2-fr-auto-fr { grid-template-columns: auto auto 1fr auto 1fr; }
.grid.col-5.auto-auto-fr-fr-auto, .grid.col-5.auto2-fr2-auto { grid-template-columns: auto auto 1fr 1fr auto; }
.grid.col-5.auto-auto-fr-fr-fr, .grid.col-5.auto2-fr3 { grid-template-columns: auto auto 1fr 1fr 1fr; }
.grid.col-5.auto-fr-auto-auto-auto, .grid.col-5.auto-fr-auto3 { grid-template-columns: auto 1fr auto auto auto; }
.grid.col-5.auto-fr-auto-auto-fr, .grid.col-5.auto-fr-auto2-fr { grid-template-columns: auto 1fr auto auto 1fr; }
.grid.col-5.auto-fr-auto-fr-auto { grid-template-columns: auto 1fr auto 1fr auto; }
.grid.col-5.auto-fr-auto-fr-fr, .grid.col-5.auto-fr-auto-fr2 { grid-template-columns: auto 1fr auto 1fr 1fr; }
.grid.col-5.auto-fr-fr-auto-auto, .grid.col-5.auto-fr2-auto2 { grid-template-columns: auto 1fr 1fr auto auto; }
.grid.col-5.auto-fr-fr-auto-fr, .grid.col-5.auto-fr2-auto-fr { grid-template-columns: auto 1fr 1fr auto 1fr; }
.grid.col-5.auto-fr-fr-fr-auto, .grid.col-5.auto-fr3-auto { grid-template-columns: auto 1fr 1fr 1fr auto; }
.grid.col-5.fr-auto-auto-auto-fr, .grid.col-5.fr-auto3-fr { grid-template-columns: 1fr auto auto auto 1fr; }
.grid.col-5.fr-auto-auto-fr-auto, .grid.col-5.fr-auto2-fr-auto { grid-template-columns: 1fr auto auto 1fr auto; }
.grid.col-5.fr-auto-auto-fr-fr, .grid.col-5.fr-auto2-fr2 { grid-template-columns: 1fr auto auto 1fr 1fr; }
.grid.col-5.fr-auto-fr-auto-auto, .grid.col-5.fr-auto-fr-auto2 { grid-template-columns: 1fr auto 1fr auto auto; }
.grid.col-5.fr-auto-fr-auto-fr { grid-template-columns: 1fr auto 1fr auto 1fr; }
.grid.col-5.fr-auto-fr-fr-auto, .grid.col-5.fr-auto-fr2-auto { grid-template-columns: 1fr auto 1fr 1fr auto; }
.grid.col-5.fr-auto-fr-fr-fr, .grid.col-5.fr-auto-fr3 { grid-template-columns: 1fr auto 1fr 1fr 1fr; }
.grid.col-5.fr-fr-auto-auto-auto, .grid.col-5.fr2-auto3 { grid-template-columns: 1fr 1fr auto auto auto; }
.grid.col-5.fr-fr-auto-auto-fr, .grid.col-5.fr2-auto2-fr { grid-template-columns: 1fr 1fr auto auto 1fr; }
.grid.col-5.fr-fr-auto-fr-auto, .grid.col-5.fr2-auto-fr-auto { grid-template-columns: 1fr 1fr auto 1fr auto; }
.grid.col-5.fr-fr-auto-fr-fr, .grid.col-5.fr2-auto-fr2 { grid-template-columns: 1fr 1fr auto 1fr 1fr; }
.grid.col-5.fr-fr-fr-auto-auto, .grid.col-5.fr3-auto2 { grid-template-columns: 1fr 1fr 1fr auto auto; }
.grid.col-5.fr-fr-fr-auto-fr, .grid.col-5.fr3-auto-fr { grid-template-columns: 1fr 1fr 1fr auto 1fr; }
.grid.col-5.fr-fr-fr-fr-auto, .grid.col-5.fr4-auto { grid-template-columns: 1fr 1fr 1fr 1fr auto; }

/* hover */
.grid.hover-bg-white:not([class*="header"]) > div:hover,
.grid.col-1.hover-bg-white[class*="header"] > div:not(div:nth-child(-n+1)):hover,
.grid.col-2.hover-bg-white[class*="header"] > div:not(div:nth-child(-n+2)):hover,
.grid.col-3.hover-bg-white[class*="header"] > div:not(div:nth-child(-n+3)):hover,
.grid.col-4.hover-bg-white[class*="header"] > div:not(div:nth-child(-n+4)):hover,
.grid.col-5.hover-bg-white[class*="header"] > div:not(div:nth-child(-n+5)):hover {
    background-color: #fff !important;
    color: #000 !important;
}
.grid.hover-bg-lightgrey:not([class*="header"]) > div:hover,
.grid.col-1.hover-bg-lightgrey[class*="header"] > div:not(div:nth-child(-n+1)):hover,
.grid.col-2.hover-bg-lightgrey[class*="header"] > div:not(div:nth-child(-n+2)):hover,
.grid.col-3.hover-bg-lightgrey[class*="header"] > div:not(div:nth-child(-n+3)):hover,
.grid.col-4.hover-bg-lightgrey[class*="header"] > div:not(div:nth-child(-n+4)):hover,
.grid.col-5.hover-bg-lightgrey[class*="header"] > div:not(div:nth-child(-n+5)):hover {
    background-color: #dedede !important;
    color: #202224 !important;
}
.grid > div.hover-outline-red:not(.grid):hover,
.grid.hover-outline-red:not([class*="header"]) > div:hover,
.grid.col-1.hover-outline-red[class*="header"] > div:not(div:nth-child(-n+1)):hover,
.grid.col-2.hover-outline-red[class*="header"] > div:not(div:nth-child(-n+2)):hover,
.grid.col-3.hover-outline-red[class*="header"] > div:not(div:nth-child(-n+3)):hover,
.grid.col-4.hover-outline-red[class*="header"] > div:not(div:nth-child(-n+4)):hover,
.grid.col-5.hover-outline-red[class*="header"] > div:not(div:nth-child(-n+5)):hover {
    outline: 2px solid #d9534f;
    outline-offset: -2px;
}
.grid > div.hover-bg-tred:not(.grid):hover,
.grid.hover-bg-tred:not([class*="header"]) > div:hover,
.grid.col-1.hover-bg-tred[class*="header"] > div:not(div:nth-child(-n+1)):hover,
.grid.col-2.hover-bg-tred[class*="header"] > div:not(div:nth-child(-n+2)):hover,
.grid.col-3.hover-bg-tred[class*="header"] > div:not(div:nth-child(-n+3)):hover,
.grid.col-4.hover-bg-tred[class*="header"] > div:not(div:nth-child(-n+4)):hover,
.grid.col-5.hover-bg-tred[class*="header"] > div:not(div:nth-child(-n+5)):hover {
    background-color: #d9534f1a;
}

.grid[class*="hover-bg"] > div:not([class*="header"]),
.grid > div[class*="hover-bg"]:not(.grid) {
    transition: 200ms background-color;
}


/* collapse */
.grid.collapse-transition > * {
    max-height: 500px;
    transition: 400ms all;
}
.grid.collapsed:not([class*="header"]) > *,
.grid.col-1.collapsed[class*="header"] > *:nth-child(n+2),
.grid.col-2.collapsed[class*="header"] > *:nth-child(n+3),
.grid.col-3.collapsed[class*="header"] > *:nth-child(n+4),
.grid.col-4.collapsed[class*="header"] > *:nth-child(n+5),
.grid.col-5.collapsed[class*="header"] > *:nth-child(n+6) {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

/* header row */
.grid.col-1.no-z-set[class*="header"] > div:nth-child(-n+1),
.grid.col-2.no-z-set[class*="header"] > div:nth-child(-n+2),
.grid.col-3.no-z-set[class*="header"] > div:nth-child(-n+3),
.grid.col-4.no-z-set[class*="header"] > div:nth-child(-n+4),
.grid.col-5.no-z-set[class*="header"] > div:nth-child(-n+5) {
    user-select: none;
}
.grid.col-1[class*="header"]:not(.no-z-set) > div:nth-child(-n+1),
.grid.col-2[class*="header"]:not(.no-z-set) > div:nth-child(-n+2),
.grid.col-3[class*="header"]:not(.no-z-set) > div:nth-child(-n+3),
.grid.col-4[class*="header"]:not(.no-z-set) > div:nth-child(-n+4),
.grid.col-5[class*="header"]:not(.no-z-set) > div:nth-child(-n+5) {
    user-select: none;
    z-index: 1;
}

.grid[class*="col-"] > div.cols.bg-darkgrey:not(.grid),
.grid.col-2 > div.cols.bg-darkgrey:not(.grid) + div,
.grid.col-3 > div.cols.bg-darkgrey:not(.grid) + div,
.grid.col-3 > div.cols.bg-darkgrey:not(.grid) + div + div,
.grid.col-4 > div.cols.bg-darkgrey:not(.grid) + div,
.grid.col-4 > div.cols.bg-darkgrey:not(.grid) + div + div,
.grid.col-4 > div.cols.bg-darkgrey:not(.grid) + div + div + div,
.grid.col-5 > div.cols.bg-darkgrey:not(.grid) + div,
.grid.col-5 > div.cols.bg-darkgrey:not(.grid) + div + div,
.grid.col-5 > div.cols.bg-darkgrey:not(.grid) + div + div + div,
.grid.col-5 > div.cols.bg-darkgrey:not(.grid) + div + div + div + div,
.grid.col-1.header-darkgrey > div:nth-child(-n+1),
.grid.col-2.header-darkgrey > div:nth-child(-n+2),
.grid.col-3.header-darkgrey > div:nth-child(-n+3),
.grid.col-4.header-darkgrey > div:nth-child(-n+4),
.grid.col-5.header-darkgrey > div:nth-child(-n+5) {
    background-color: #3A4246 !important;
    color: #dedede !important;
}

.grid[class*="col-"] > div.cols.bg-lightgrey:not(.grid),
.grid.col-2 > div.cols.bg-lightgrey:not(.grid) + div,
.grid.col-3 > div.cols.bg-lightgrey:not(.grid) + div,
.grid.col-3 > div.cols.bg-lightgrey:not(.grid) + div + div,
.grid.col-4 > div.cols.bg-lightgrey:not(.grid) + div,
.grid.col-4 > div.cols.bg-lightgrey:not(.grid) + div + div,
.grid.col-4 > div.cols.bg-lightgrey:not(.grid) + div + div + div,
.grid.col-5 > div.cols.bg-lightgrey:not(.grid) + div,
.grid.col-5 > div.cols.bg-lightgrey:not(.grid) + div + div,
.grid.col-5 > div.cols.bg-lightgrey:not(.grid) + div + div + div,
.grid.col-5 > div.cols.bg-lightgrey:not(.grid) + div + div + div + div,
.grid.col-1.header-lightgrey > div:nth-child(-n+1),
.grid.col-2.header-lightgrey > div:nth-child(-n+2),
.grid.col-3.header-lightgrey > div:nth-child(-n+3),
.grid.col-4.header-lightgrey > div:nth-child(-n+4),
.grid.col-5.header-lightgrey > div:nth-child(-n+5) {
    background-color: #dedede !important;
    color: #202224 !important;
}

.grid[class*="col-"] > .cols.bg-lightergrey:not(.grid),
.grid.col-2 > .cols.bg-lightergrey:not(.grid) + div,
.grid.col-3 > .cols.bg-lightergrey:not(.grid) + div,
.grid.col-3 > .cols.bg-lightergrey:not(.grid) + div + div,
.grid.col-4 > .cols.bg-lightergrey:not(.grid) + div,
.grid.col-4 > .cols.bg-lightergrey:not(.grid) + div + div,
.grid.col-4 > .cols.bg-lightergrey:not(.grid) + div + div + div,
.grid.col-5 > .cols.bg-lightergrey:not(.grid) + div,
.grid.col-5 > .cols.bg-lightergrey:not(.grid) + div + div,
.grid.col-5 > .cols.bg-lightergrey:not(.grid) + div + div + div,
.grid.col-5 > .cols.bg-lightergrey:not(.grid) + div + div + div + div,
.grid.col-1.header-lightergrey > div:nth-child(-n+1),
.grid.col-2.header-lightergrey > div:nth-child(-n+2),
.grid.col-3.header-lightergrey > div:nth-child(-n+3),
.grid.col-4.header-lightergrey > div:nth-child(-n+4),
.grid.col-5.header-lightergrey > div:nth-child(-n+5) {
    background-color: #f4f4f4 !important;
    color: #202224 !important;
}

.grid.col-1.header-bold > div:nth-child(-n+1),
.grid.col-2.header-bold > div:nth-child(-n+2),
.grid.col-3.header-bold > div:nth-child(-n+3),
.grid.col-4.header-bold > div:nth-child(-n+4),
.grid.col-5.header-bold > div:nth-child(-n+5) {
    font-weight: bold;
}

/* text alignments */
.grid[class^="col-"].c-center       > div { text-align: center;       }
.grid[class^="col-"].c-left         > div { text-align: left;         }
.grid[class^="col-"].c-right        > div { text-align: right;        }
.grid[class^="col-"].c-justify-last > div { text-align-last: justify; }

.grid.col-1.c1-center > div:nth-child(n+1) { text-align: center; }
.grid.col-1.c1-left   > div:nth-child(n+1) { text-align: left;   }
.grid.col-1.c1-right  > div:nth-child(n+1) { text-align: right;  }
.grid.col-1.c1-justify-last > div:nth-child(n+1) { text-align-last: justify; }

.grid.col-2.c1-center > div:nth-child(2n+1) { text-align: center; }
.grid.col-2.c2-center > div:nth-child(2n+2) { text-align: center; }
.grid.col-2.c1-left   > div:nth-child(2n+1) { text-align: left;   }
.grid.col-2.c2-left   > div:nth-child(2n+2) { text-align: left;   }
.grid.col-2.c1-right  > div:nth-child(2n+1) { text-align: right;  }
.grid.col-2.c2-right  > div:nth-child(2n+2) { text-align: right;  }
.grid.col-2.c1-justify-last > div:nth-child(2n+1) { text-align-last: justify; }
.grid.col-2.c2-justify-last > div:nth-child(2n+2) { text-align-last: justify; }

.grid.col-3.c1-center > div:nth-child(3n+1) { text-align: center; }
.grid.col-3.c2-center > div:nth-child(3n+2) { text-align: center; }
.grid.col-3.c3-center > div:nth-child(3n+3) { text-align: center; }
.grid.col-3.c1-left   > div:nth-child(3n+1) { text-align: left;   }
.grid.col-3.c2-left   > div:nth-child(3n+2) { text-align: left;   }
.grid.col-3.c3-left   > div:nth-child(3n+3) { text-align: left;   }
.grid.col-3.c1-right  > div:nth-child(3n+1) { text-align: right;  }
.grid.col-3.c2-right  > div:nth-child(3n+2) { text-align: right;  }
.grid.col-3.c3-right  > div:nth-child(3n+3) { text-align: right;  }
.grid.col-3.c1-justify-last > div:nth-child(3n+1) { text-align-last: justify; }
.grid.col-3.c2-justify-last > div:nth-child(3n+2) { text-align-last: justify; }
.grid.col-3.c3-justify-last > div:nth-child(3n+3) { text-align-last: justify; }

.grid.col-4.c1-center > div:nth-child(4n+1) { text-align: center; }
.grid.col-4.c2-center > div:nth-child(4n+2) { text-align: center; }
.grid.col-4.c3-center > div:nth-child(4n+3) { text-align: center; }
.grid.col-4.c4-center > div:nth-child(4n+4) { text-align: center; }
.grid.col-4.c1-left   > div:nth-child(4n+1) { text-align: left;   }
.grid.col-4.c2-left   > div:nth-child(4n+2) { text-align: left;   }
.grid.col-4.c3-left   > div:nth-child(4n+3) { text-align: left;   }
.grid.col-4.c4-left   > div:nth-child(4n+4) { text-align: left;   }
.grid.col-4.c1-right  > div:nth-child(4n+1) { text-align: right;  }
.grid.col-4.c2-right  > div:nth-child(4n+2) { text-align: right;  }
.grid.col-4.c3-right  > div:nth-child(4n+3) { text-align: right;  }
.grid.col-4.c4-right  > div:nth-child(4n+4) { text-align: right;  }
.grid.col-4.c1-justify-last > div:nth-child(4n+1) { text-align-last: justify; }
.grid.col-4.c2-justify-last > div:nth-child(4n+2) { text-align-last: justify; }
.grid.col-4.c3-justify-last > div:nth-child(4n+3) { text-align-last: justify; }
.grid.col-4.c4-justify-last > div:nth-child(4n+4) { text-align-last: justify; }

.grid.col-5.c1-center > div:nth-child(5n+1) { text-align: center; }
.grid.col-5.c2-center > div:nth-child(5n+2) { text-align: center; }
.grid.col-5.c3-center > div:nth-child(5n+3) { text-align: center; }
.grid.col-5.c4-center > div:nth-child(5n+4) { text-align: center; }
.grid.col-5.c5-center > div:nth-child(5n+5) { text-align: center; }
.grid.col-5.c1-left   > div:nth-child(5n+1) { text-align: left;   }
.grid.col-5.c2-left   > div:nth-child(5n+2) { text-align: left;   }
.grid.col-5.c3-left   > div:nth-child(5n+3) { text-align: left;   }
.grid.col-5.c4-left   > div:nth-child(5n+4) { text-align: left;   }
.grid.col-5.c5-left   > div:nth-child(5n+5) { text-align: left;   }
.grid.col-5.c1-right  > div:nth-child(5n+1) { text-align: right;  }
.grid.col-5.c2-right  > div:nth-child(5n+2) { text-align: right;  }
.grid.col-5.c3-right  > div:nth-child(5n+3) { text-align: right;  }
.grid.col-5.c4-right  > div:nth-child(5n+4) { text-align: right;  }
.grid.col-5.c5-right  > div:nth-child(5n+5) { text-align: right;  }
.grid.col-5.c1-justify-last > div:nth-child(5n+1) { text-align-last: justify; }
.grid.col-5.c2-justify-last > div:nth-child(5n+2) { text-align-last: justify; }
.grid.col-5.c3-justify-last > div:nth-child(5n+3) { text-align-last: justify; }
.grid.col-5.c4-justify-last > div:nth-child(5n+4) { text-align-last: justify; }
.grid.col-5.c5-justify-last > div:nth-child(5n+5) { text-align-last: justify; }

/* ZEBRA STRIPING */

/* row striping */
.grid.col-1.zebra-odd:not([class*="header"])  > div:nth-child(2n+1),
.grid.col-1.zebra-even:not([class*="header"]) > div:nth-child(2n+2),
.grid.col-1.zebra-odd:is([class*="header"])   > div:nth-child(2n+2),
.grid.col-1.zebra-even:is([class*="header"])  > div:nth-child(2n+3),
.grid.col-2.zebra-odd:not([class*="header"])  > div:nth-child(4n+1),
.grid.col-2.zebra-odd:not([class*="header"])  > div:nth-child(4n+2),
.grid.col-2.zebra-even:not([class*="header"]) > div:nth-child(4n+3),
.grid.col-2.zebra-even:not([class*="header"]) > div:nth-child(4n+4),
.grid.col-2.zebra-odd:is([class*="header"])   > div:nth-child(4n+3),
.grid.col-2.zebra-odd:is([class*="header"])   > div:nth-child(4n+4),
.grid.col-2.zebra-even:is([class*="header"])  > div:nth-child(4n+5),
.grid.col-2.zebra-even:is([class*="header"])  > div:nth-child(4n+6),
.grid.col-3.zebra-odd:not([class*="header"])  > div:nth-child(6n+1),
.grid.col-3.zebra-odd:not([class*="header"])  > div:nth-child(6n+2),
.grid.col-3.zebra-odd:not([class*="header"])  > div:nth-child(6n+3),
.grid.col-3.zebra-even:not([class*="header"]) > div:nth-child(6n+4),
.grid.col-3.zebra-even:not([class*="header"]) > div:nth-child(6n+5),
.grid.col-3.zebra-even:not([class*="header"]) > div:nth-child(6n+6),
.grid.col-3.zebra-odd:is([class*="header"])   > div:nth-child(6n+4),
.grid.col-3.zebra-odd:is([class*="header"])   > div:nth-child(6n+5),
.grid.col-3.zebra-odd:is([class*="header"])   > div:nth-child(6n+6),
.grid.col-3.zebra-even:is([class*="header"])  > div:nth-child(6n+7),
.grid.col-3.zebra-even:is([class*="header"])  > div:nth-child(6n+8),
.grid.col-3.zebra-even:is([class*="header"])  > div:nth-child(6n+9),
.grid.col-4.zebra-odd:not([class*="header"])  > div:nth-child(8n+1),
.grid.col-4.zebra-odd:not([class*="header"])  > div:nth-child(8n+2),
.grid.col-4.zebra-odd:not([class*="header"])  > div:nth-child(8n+3),
.grid.col-4.zebra-odd:not([class*="header"])  > div:nth-child(8n+4),
.grid.col-4.zebra-even:not([class*="header"]) > div:nth-child(8n+5),
.grid.col-4.zebra-even:not([class*="header"]) > div:nth-child(8n+6),
.grid.col-4.zebra-even:not([class*="header"]) > div:nth-child(8n+7),
.grid.col-4.zebra-even:not([class*="header"]) > div:nth-child(8n+8),
.grid.col-4.zebra-odd:is([class*="header"])   > div:nth-child(8n+5),
.grid.col-4.zebra-odd:is([class*="header"])   > div:nth-child(8n+6),
.grid.col-4.zebra-odd:is([class*="header"])   > div:nth-child(8n+7),
.grid.col-4.zebra-odd:is([class*="header"])   > div:nth-child(8n+8),
.grid.col-4.zebra-even:is([class*="header"])  > div:nth-child(8n+9),
.grid.col-4.zebra-even:is([class*="header"])  > div:nth-child(8n+10),
.grid.col-4.zebra-even:is([class*="header"])  > div:nth-child(8n+11),
.grid.col-4.zebra-even:is([class*="header"])  > div:nth-child(8n+12),
.grid.col-5.zebra-odd:not([class*="header"])  > div:nth-child(10n+1),
.grid.col-5.zebra-odd:not([class*="header"])  > div:nth-child(10n+2),
.grid.col-5.zebra-odd:not([class*="header"])  > div:nth-child(10n+3),
.grid.col-5.zebra-odd:not([class*="header"])  > div:nth-child(10n+4),
.grid.col-5.zebra-odd:not([class*="header"])  > div:nth-child(10n+5),
.grid.col-5.zebra-even:not([class*="header"]) > div:nth-child(10n+6),
.grid.col-5.zebra-even:not([class*="header"]) > div:nth-child(10n+7),
.grid.col-5.zebra-even:not([class*="header"]) > div:nth-child(10n+8),
.grid.col-5.zebra-even:not([class*="header"]) > div:nth-child(10n+9),
.grid.col-5.zebra-even:not([class*="header"]) > div:nth-child(10n+10),
.grid.col-5.zebra-odd:is([class*="header"])   > div:nth-child(10n+6),
.grid.col-5.zebra-odd:is([class*="header"])   > div:nth-child(10n+7),
.grid.col-5.zebra-odd:is([class*="header"])   > div:nth-child(10n+8),
.grid.col-5.zebra-odd:is([class*="header"])   > div:nth-child(10n+9),
.grid.col-5.zebra-odd:is([class*="header"])   > div:nth-child(10n+10),
.grid.col-5.zebra-even:is([class*="header"])  > div:nth-child(10n+11),
.grid.col-5.zebra-even:is([class*="header"])  > div:nth-child(10n+12),
.grid.col-5.zebra-even:is([class*="header"])  > div:nth-child(10n+13),
.grid.col-5.zebra-even:is([class*="header"])  > div:nth-child(10n+14),
.grid.col-5.zebra-even:is([class*="header"])  > div:nth-child(10n+15) {
    background-color: #f4f4f4;
}

/* full rows */
.grid[class*="col-"] > div.cols.mrg-t15,
.grid.col-2 > div.cols.mrg-t15 + div,
.grid.col-3 > div.cols.mrg-t15 + div,
.grid.col-3 > div.cols.mrg-t15 + div + div,
.grid.col-4 > div.cols.mrg-t15 + div,
.grid.col-4 > div.cols.mrg-t15 + div + div,
.grid.col-4 > div.cols.mrg-t15 + div + div + div,
.grid.col-5 > div.cols.mrg-t15 + div,
.grid.col-5 > div.cols.mrg-t15 + div + div,
.grid.col-5 > div.cols.mrg-t15 + div + div + div,
.grid.col-5 > div.cols.mrg-t15 + div + div + div + div {
    margin-top: 15px;
}
.grid[class*="col-"] > div.cols.mrg-t12,
.grid.col-2 > div.cols.mrg-t12 + div,
.grid.col-3 > div.cols.mrg-t12 + div,
.grid.col-3 > div.cols.mrg-t12 + div + div,
.grid.col-4 > div.cols.mrg-t12 + div,
.grid.col-4 > div.cols.mrg-t12 + div + div,
.grid.col-4 > div.cols.mrg-t12 + div + div + div,
.grid.col-5 > div.cols.mrg-t12 + div,
.grid.col-5 > div.cols.mrg-t12 + div + div,
.grid.col-5 > div.cols.mrg-t12 + div + div + div,
.grid.col-5 > div.cols.mrg-t12 + div + div + div + div {
    margin-top: 12px;
}
.grid[class*="col-"] > div.cols.mrg-t9,
.grid.col-2 > div.cols.mrg-t9 + div,
.grid.col-3 > div.cols.mrg-t9 + div,
.grid.col-3 > div.cols.mrg-t9 + div + div,
.grid.col-4 > div.cols.mrg-t9 + div,
.grid.col-4 > div.cols.mrg-t9 + div + div,
.grid.col-4 > div.cols.mrg-t9 + div + div + div,
.grid.col-5 > div.cols.mrg-t9 + div,
.grid.col-5 > div.cols.mrg-t9 + div + div,
.grid.col-5 > div.cols.mrg-t9 + div + div + div,
.grid.col-5 > div.cols.mrg-t9 + div + div + div + div {
    margin-top: 9px;
}
.grid[class*="col-"] > div.cols.mrg-t6,
.grid.col-2 > div.cols.mrg-t6 + div,
.grid.col-3 > div.cols.mrg-t6 + div,
.grid.col-3 > div.cols.mrg-t6 + div + div,
.grid.col-4 > div.cols.mrg-t6 + div,
.grid.col-4 > div.cols.mrg-t6 + div + div,
.grid.col-4 > div.cols.mrg-t6 + div + div + div,
.grid.col-5 > div.cols.mrg-t6 + div,
.grid.col-5 > div.cols.mrg-t6 + div + div,
.grid.col-5 > div.cols.mrg-t6 + div + div + div,
.grid.col-5 > div.cols.mrg-t6 + div + div + div + div {
    margin-top: 6px;
}

.grid[class*="col-"] > div.cols.font16,
.grid.col-2 > div.cols.font16 + div,
.grid.col-3 > div.cols.font16 + div,
.grid.col-3 > div.cols.font16 + div + div,
.grid.col-4 > div.cols.font16 + div,
.grid.col-4 > div.cols.font16 + div + div,
.grid.col-4 > div.cols.font16 + div + div + div,
.grid.col-5 > div.cols.font16 + div,
.grid.col-5 > div.cols.font16 + div + div,
.grid.col-5 > div.cols.font16 + div + div + div,
.grid.col-5 > div.cols.font16 + div + div + div + div {
    font-size: 16px;
}

.grid[class*="col-"] > div.cols.weight-bold,
.grid.col-2 > div.cols.weight-bold + div,
.grid.col-3 > div.cols.weight-bold + div,
.grid.col-3 > div.cols.weight-bold + div + div,
.grid.col-4 > div.cols.weight-bold + div,
.grid.col-4 > div.cols.weight-bold + div + div,
.grid.col-4 > div.cols.weight-bold + div + div + div,
.grid.col-5 > div.cols.weight-bold + div,
.grid.col-5 > div.cols.weight-bold + div + div,
.grid.col-5 > div.cols.weight-bold + div + div + div,
.grid.col-5 > div.cols.weight-bold + div + div + div + div {
    font-weight: bold;
}