#ManualTSP table {
    border-collapse: collapse;
    font-size: calc(3 * var(--font-size-default));
}

#ManualTSP td {
    padding: 0;
    position: relative;

    width: 1ch;
    height: calc(3 * var(--line-height-default));
    overflow: hidden;
}

#ManualTSP td:hover, #ManualTSP td:hover.infected, #ManualTSP td:hover.disinfected {
    background-color: var(--highlight-color-highlighted);
}

#ManualTSP td.infected {
    background-color: rgb(85, 40, 40);
}

#ManualTSP td.disinfected {
    background-color: rgb(41, 90, 51);
}

#ManualTSP .cb0 {
    background-color: black;
}

#ManualTSP .cb1 {
    background-color: var(--background-color-checker)
}

#ManualTSP div.emoji {
    font-size: calc(3 * var(--font-size-emoji));
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

#ManualTSP div.not-emoji {
    font-size: calc(4 * var(--font-size-default)); /*4 instead of 3 to remove gaps */
    color: rgb(131, 255, 156);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}