grid.css

:root {
    --table-width: 1200px;

    --simple-color: #dcedc8;
    --mix-color: #e0f2f1;
    --multi-color: #bbdefb;
    --complex-color: #ffccbc;
    --grid-color: #ffe0b2;
    --grid-text: #555;

    --text-color: #222;
    --muted-color: #aaa;
    
    --block-border: #ccc;
    --block-number: #aaa;
    --block-weight: #778;
    --block-obsolete: #ddd;
}


body {
    font-family: 'Lato', sans-serif;
}

.table-heading {
    text-align: center;
    position: relative;
    margin: 0 auto;
    max-width: var(--table-width);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
}

.table-heading>div {
    min-width: 20%;
}

.table-heading h1 {
    margin: 0;
    padding: 0;
}

.element-table {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 8fr 2fr 6fr 8fr 1fr;
    grid-template-rows: repeat(9, 73px) 20px 73px;
    max-width: var(--table-width);
    margin: 0 auto;
}

.element-table>div {
    display: grid;
    grid-gap: 10px;
}

div.heading {
    font-weight: 700;
    text-align: right;
    color: var(--muted-color);
    align-self: center;
    grid-column-start: 1;
    width: 75px;
}

.element-table>.simple-group {
    grid-template-columns: repeat(4, 1fr);
    grid-column-start: 2;
}

.element-table>.mix-group {
    grid-column-start: 3;
    grid-template-columns: 1fr;
}

.element-table>.multi-group {
    grid-template-columns: repeat(3, 1fr);
    grid-column-start: 4;
}

.element-table>.complex-group {
    grid-template-columns: repeat(4, 1fr);
    grid-column-start: 5;
}

.element-table>.simple-group>div, .element-table>.simple-group>a, .label-grid >.simple {
    background-color: var(--simple-color);
}

.element-table>.mix-group>div, .element-table>.mix-group>a, .label-grid >.mix  {
    background-color: var(--mix-color);
}

.element-table>.multi-group>div, .element-table>.multi-group>a, .label-grid >.multi {
    background-color: var(--multi-color);
}

.element-table>.complex-group>div, .element-table>.complex-group>a, .label-grid >.complex  {
    background-color: var(--complex-color);
}

.element-table>div>div, .element-table>div>a, .grid-table>div>div {
    display: block;
    text-decoration: none;
    color: var(--text-color);
    padding: 5px 0 5px 5px;
    position: relative;
    border: 1px solid var(--block-border);
}

.label {
    font-size: 2em;
    font-weight: 700;
    line-height: 1.2;
    height: 2.2rem;
}

.title {
    font-size: 0.7em;
}

.label.small {
    font-size: 1.5em;
    line-height: 1.5;
}

.number {
    position: absolute;
    top: 0.1em;
    right: 0.3em;
    color: var(--block-number);
    font-size: 0.75em;
}

.weight {
    position: absolute;
    bottom: 0.1em;
    right: 0.3em;
    font-size: 0.75em;
    color: var(--block-weight);
}

.element-table .obsolete {
    opacity: 0.3;
    background-color: var(--block-obsolete) !important;
}

.element-table .non-core, .grid-table .non-core, .label-grid .non-core {
    border: 1px dashed var(--text-color);
    opacity: 0.4;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.grid-first {
    grid-column-start: 1;
}

.grid-second {
    grid-column-start: 2;
}

.grid-third {
    grid-column-start: 3;
}

.grid-fourth { 
    grid-column-start: 4;
}

.grid-fifth {
    grid-column-start: 5;
}

.element-table .last-row {
    font-weight: 700;
    text-align: center;
    grid-template-columns: 1fr;
    border-bottom: 3px solid transparent;
    align-self: end;
    padding-bottom: 0.5em;
}


/* grid elements */

.grid-gap {
    grid-column: 1 / span 4;
    justify-content: flex-end;
    font-weight:700;
    color: var(--muted-color);
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 0px !important;
}

.element-table>div.grid-gap>div {
    border: none;
    color:var(--muted-color);
    padding-left: 0;
}

div.grid-title {
    grid-column: 6 / span 2;
}

.element-table>.grid-row>div, .element-table>.grid-row>a {
    background-color: var(--grid-color);
    color: var(--grid-text);
}

.grid-row .label {
    font-size: 1.5em;
    line-height: 1.5;
}

.grid-row>div.heading {
    background-color: transparent;
    border: none;
    color: #aaa;
}

/* table key */
div.key-title {
    font-size: 1em;
    text-align: right;
}

.label-grid {
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 5px;
    font-size: 0.75em;
    display: grid;
}

.label-grid>div {
    border: none;
    color: var(--text-color);
    font-weight: 700;
    padding: 5px;
}

/* column control */
.four-col {
    grid-template-columns: repeat(4, 1fr);
}

.one-col {
    grid-template-columns: 1fr;
}

.three-col {
    grid-template-columns: repeat(3, 1fr);
}

/* header */
.col-headers {
    grid-column-start: 2;
    grid-column-end: 6;
    grid-template-columns: repeat(11, 1fr);
    align-items: flex-end;
}

.element-table>.col-headers>div {
    text-align: center;
    padding: 0;
    margin: 0;
    color: var(--muted-color);
    font-size: 0.8em;
    border-color: transparent;
}

.credits {
    padding-top: 2em;
    font-size: 0.6em;
    color: var(--muted-color);
    margin: 0 auto;
    text-align: center;

    display: flex;
    justify-content: space-between;
    max-width: var(--table-width);
}

.credits a {
    text-decoration: none;
    color:var(--grid-text);
}

/* toggle */

.slider-checkbox {
    opacity: 0.5;
}

.slider-checkbox input {
    margin: 0px;
    margin-top: 1px;
    cursor: pointer;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 40px;
    height: 20px;
}

.slider-checkbox input:checked+.label:before {
    background-color: #1877c1;
    content: "";
    padding-left: 6px;
}

.slider-checkbox input:checked+.label:after {
    left: 21px;
}

.slider-checkbox .label {
    position: relative;
    padding-left: 46px;
    font-size: 12pt;
    font-weight: lighter;
    cursor: pointer;
}

.slider-checkbox .label:before, .slider-checkbox .label:after {
    position: absolute;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    transition: background-color 0.3s, left 0.3s;
}

.slider-checkbox .label:before {
    content: "";
    color: #fff;
    box-sizing: border-box;
    font-family: 'FontAwesome', sans-serif;
    padding-left: 23px;
    font-size: 12px;
    line-height: 20px;
    background-color: #888;
    left: 0px;
    top: 0px;
    height: 20px;
    width: 40px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.slider-checkbox .label:after {
    content: "";
    letter-spacing: 20px;
    background: #fff;
    left: 1px;
    top: 1px;
    height: 18px;
    width: 18px;
}