.bookings-list {
    display: flex;
}

.booking-object-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--white-bg);
}

    .booking-object-header > div {
        margin: 0 calc(0.5 * var(--pill-gap));
        margin-bottom: calc(0.5 * var(--pill-gap));
        padding-top: calc(0.5 * var(--pill-gap));
        background-color: var(--text-color);
        color: var(--gray-bg);
        width: var(--column-width);
        height: var(--pill-h);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-start-start-radius: calc(var(--pill-h)/2);
        border-start-end-radius: calc(var(--pill-h)/2);
    }

.booking-timeline {
    display: grid;
    /*min-height: calc(24 * 48px);
    grid-template-rows: repeat(48, max(24px, 2%));*/
    grid-template-columns: calc(0.5 * var(--pill-gap)) var(--column-width) calc(0.5 * var(--pill-gap));
}

    .booking-timeline > .timeline-item-deactivated {
        background-color: var(--dark-gray-bg);
        z-index: 1;
    }

    .booking-timeline > .timeline-item {
        background-color: var(--gray-bg);
        z-index: 1;
        cursor: pointer;
    }

        .booking-timeline > .timeline-item:hover {
            background-color: #d9d9d9;
        }

        .booking-timeline > .timeline-item:active {
            background-color: var(--text-color);
        }



.time-axis {
    position: sticky;
    left: 0;
    z-index: 10;
    margin-top: calc(var(--pill-h) + 0.5 * var(--pill-gap));
    display: grid;
    /*grid-template-rows: repeat(24, max(48px, 4%));*/
}

    .time-axis > div {
        display: flex;
        align-items: end;
        padding-right: var(--pill-gap);
        border-bottom: 1px solid var(--text-color);
    }

.booking-object-footer {
    margin: 0 calc(var(--pill-gap)/2);
    background-color: var(--gray-bg);
    width: var(--column-width);
    height: calc(var(--pill-h)/2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-end-start-radius: calc(var(--pill-h)/2);
    border-end-end-radius: calc(var(--pill-h)/2);
}