.map {
    display: flex;
    background: #000;
    flex-direction: column;
    overflow-x: auto;
}
@media screen and (max-width: 600px) {
    .map {
        align-items: flex-start;
    }
}
.vpadding {
    width: 100%;
    height: 1em;
}
.padding.grey {
    background-color: #444;
}
.screen {
    background-color: #fff;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}

.map>* {
    flex-grow: 1;
}
.seats-row {
    display: flex;
    justify-content: space-evenly;
}
.seat {
    padding: .5em;
    border: 1px solid #fff;
    min-height: 1em;
    font-family: 'Noto mono';
    cursor: pointer;
    border-radius: .35em;
    text-align: center;
}
.seat.free {
    background-color: #00C850;
}
.map.family .seat.locked {
    background-color: #00C850;
    cursor: pointer;
}
.seat.locked {
    background-color: #c8c8c8;
    cursor: not-allowed;
}
.seat.sold {
    background-color: #ff4646;
}
.seat.marked {
    background-color: #e8d400;
}
.seat.unavailable {
    background-color: #c8c8c8;
    cursor: not-allowed;
}
span.family {
    display: none;
}