.tbl {
    font-size:10pt;
    display:grid;
    grid-template-columns: max-content minmax(120px, 250px);
    grid-auto-columns: minmax(120px, 250px);
    grid-auto-flow: column;
    margin:5pt;
    overflow-x: auto;
}

.tbl > .column {
    margin:0;
    display: grid;
    grid-template-rows: 40px;
    grid-auto-rows: 20px;
    grid-auto-flow: row;
    border-right:var(--border-color);
    padding-left:4pt;
}

.tbl > .column > .cell {
    display:flex;
    align-items: center;
    justify-content: center;
}

.tbl > .column:first-child { /* First column */
    position:sticky;
    left:0;
    text-align: left;
    background-color: var(--primary-bg-color);
    font-weight: bold;
    border-left:var(--border-color);
    padding-left:5pt;
    width: calc-size(calc-size(max-content, size), size + 5pt); /* Bit dirty, but it works to give some space to the right */
}
.tbl > .column:first-child > .cell { /* First column cell*/
    justify-content: left;
}
.tbl > .column:nth-child(1n+2) { /* All but first col */
    padding:0;
    text-align: center;
}
.cell.fc {
    font-style:italic;
    color:rgba(0,0,0,0.5);
}
.tbl > .column > .cell:first-child { /* first row */
    border-bottom:var(--border-color);
    border-top:var(--border-color);
    font-weight: bold;
}


/* Population page table  */
.tbl.population > .column > .cell[data-type="inflow"], .cell[data-type="pool"], .cell[data-type="external"], .cell[data-type="attrition"]{
    cursor: default;
}
.tbl.population > .column > .cell[data-type="inflow"]:hover, .cell[data-type="pool"]:hover, .cell[data-type="external"]:hover, .fc.cell[data-type="attrition"]:hover {
    background-color: var(--hover-color);
}
.tbl.population > .column > .cell:nth-last-child(5) { /* Attrition row (5th from bottom */
    border-top:1px solid var(--red);
    border-bottom:1px solid var(--red);
    color:var(--red);
}
.tbl.population > .column > .cell:nth-child(4) { /* Total internal row  */
    border-top:2px solid var(--secondary-bg-color);
}
.tbl.population > .column > .cell:nth-last-child(3) { /* Total row */
    border-top:2px solid var(--secondary-bg-color);
    font-weight: bold;
}
.tbl.population > .column > .cell:last-child { /* last row */
    font-weight: bold;
}

/* Activitypage page table */
.tbl.activitypage > .column > .cell[data-rightclick="true"]{
    cursor:default;
}
.tbl.activitypage > .column > .cell[data-rightclick="true"]:hover{
    background-color: var(--hover-color);
}
.tbl.activitypage > .column > .cell:nth-child(2) { /* 2nd row, all cols */
    border-bottom:2px solid var(--secondary-bg-color);
}
.tbl.activitypage > .column:nth-child(1n+2) > .cell:nth-child(2) { /* 2nd row, not first col */
    color:var(--text-color-light);
}
.tbl.activitypage > .column > .cell:nth-child(n+3):nth-child(-n+4) { /* 3nd and 4th row, all cols */
    font-weight: bold;
}
.tbl.activitypage > .column > .cell:nth-child(4) { /* 4th row, all cols */
    border-bottom:2px solid var(--secondary-bg-color);
}
.tbl.activitypage > .column > .cell.actuals {
    color:#aaa;
}

.tbl.activitypage > .column > .cell.actuals + .cell { /* The row after the actuals */
    border-bottom: 1px solid var(--secondary-bg-color);
}

/* Realtime page table */
.tbl.realtime  > .column > .cell:nth-child(2) {/* 2nd row, all cols */
    border-bottom:2px solid var(--secondary-bg-color);
}
.tbl.realtime  > .column > .cell:nth-child(4) {/* 4th row, all cols */
    border-bottom:2px solid var(--secondary-bg-color);
}
.tbl.realtime  > .column > .cell:nth-child(6) {/* 4th row, all cols */
    border-bottom:2px solid var(--secondary-bg-color);
}