tr {
    height: 2.2em;
    min-height: 2.2em;
    max-height: 2.2em;
}

.cell {
    padding: 0.2em;
    text-align: center;
    min-width: 2.5em;
    border-radius: 0;
    border: 1px solid var(--container);
}
.cell.even {
    background-color: #dadada;
}
.cell.even.booked {
    cursor: not-allowed;
    filter: brightness(0.8);
    background-color: #dadada;
}

.cell.odd {
    background-color: #f7f7f7;
}
.cell.odd.booked {
    cursor: not-allowed;
    filter: brightness(0.8);
    background-color: #f7f7f7;
}

.cell.inactive {
    font-weight: bold;
}

.cell.selectable {
    cursor: pointer;
    color: var(--purple);
    transition: background-color 0.3s;
}
.cell.selectable:after {
    content: '◯';
    transition: filter 0.3s;
}
.cell.selectable.hover {
    color: var(--green);
    background-color: var(--purple);
    transition: filter 0.3s;
}
.cell.selectable.hover:after{
    color: var(--green);
    transition: filter 0.3s;
}

.cell.selectable.selected {
    color: var(--green) !important;
    background-color: var(--purple) !important;
}
.cell.selectable.selected:after {
    content: ' ';
    color: var(--green);
    transition: filter 0.3s;
}

.cell.booked:after {
    font-weight: bold;
    content: '⛌';
}