#raumstatus {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.space-open {
    text-decoration-color: #2ecc71 !important;
}

.space-closed {
    text-decoration-color: #e74c3c !important;
}

#heatmap {
    display: flex;

    gap: 4px;
}

.heatmap-hour {
    flex: 1;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
}

.heatmap-square {
    width: 100%;
    aspect-ratio: 1 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.heatmap-label {
    /* font-size: 10pt; */
}

.heatmap-percentage {
    /* only display on hover */
    visibility: hidden;

    width: 100%;
    text-align: center;

    font-size: 8pt;

    color: rgba(255, 255, 255, 0.9);

    transition: visibility 0.2s ease-in-out;

}

.heatmap-square:hover .heatmap-percentage {
    visibility: visible;
}