.reservation-section {
    flex: 1 0 auto;
    margin-top: calc(var(--nav-box-height) + var(--nav-border-bottom-thk) - var(--main-padding-top));
}

.reservation-layout {
    --reservation-sidebar-width: 140px;
    position: relative;
    display: grid;
    grid-template-columns: var(--reservation-sidebar-width) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
}

.reservation-sidebar {
    box-sizing: border-box;
    align-self: stretch;
    margin-left: calc(-1 * var(--main-padding-left));
    min-height: 320px;
    padding-block: var(--type-sidebar-shell-padding-block);
    padding-inline: var(--type-sidebar-shell-padding-inline);
    background: transparent;
    color: var(--theme-text);
}

.reservation-menu-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    font-size: var(--nav-font-size);
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
}

.reservation-menu-link,
.reservation-menu-link:visited,
.reservation-menu-link:hover,
.reservation-menu-link:focus-visible,
.reservation-menu-link:active {
    color: var(--theme-text);
}

.reservation-menu-link + .reservation-menu-link {
    margin-top: 0;
}

.reservation-menu-link.is-active {
    font-weight: 700;
}

.reservation-menu-link.is-active > .panel-menu-label {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.reservation-detail-column {
    box-sizing: border-box;
    min-width: 0;
    min-height: 320px;
    padding: var(--type-space-content);
    border-left: 1px solid var(--theme-divider-strong);
}

.reservation-detail-column .officehours-intro-block,
.reservation-detail-column .serverreservation-intro-block {
    margin: 0 0 var(--type-space-content);
    padding: 0 0 var(--type-space-content);
}

.reservation-detail-column .serverreservation-section.is-reservation-embedded .serverreservation-layout {
    display: block;
}

.reservation-detail-column .serverreservation-section.is-reservation-embedded .serverreservation-detail-column {
    min-height: 0;
    padding: 0;
    border-left: 0;
}

@media (min-width: 901px) {
    .reservation-layout::after {
        position: absolute;
        top: 0;
        bottom: calc(-1 * var(--main-padding-bottom));
        left: var(--reservation-sidebar-width);
        width: 1px;
        background: var(--theme-divider-strong);
        content: "";
        pointer-events: none;
    }

    .reservation-detail-column {
        padding-inline-start: calc(var(--type-space-content) + 1px);
        border-left: 0;
    }

    .reservation-sidebar {
        position: sticky;
        top: calc(var(--nav-box-height) + 15px);
        align-self: start;
        min-height: 0;
        max-height: calc(100vh - var(--nav-box-height) - 30px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 900px) {
    .reservation-layout {
        grid-template-columns: 1fr;
    }

    .reservation-sidebar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 18px;
        min-height: 0;
        margin-right: calc(-1 * var(--main-padding-right));
        border-bottom: 1px solid var(--theme-divider-strong);
    }

    .reservation-menu-link {
        width: auto;
    }

    .reservation-menu-link + .reservation-menu-link {
        margin-top: 0;
    }

    .reservation-detail-column {
        padding: var(--type-space-content) 0;
        border-left: 0;
    }
}