/*--- 2 columns ---*/
.bx-std-pc-stretch {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    box-sizing: border-box;
}

.bx-std-pc-vstretch {
    width: 100%
}

div.bx-std-page-columns-cnt {
    position: relative;
    display: flex;
    align-items: stretch;

    padding: 5.5rem 0.75rem 0.75rem 0.75rem; /* top: the header wrapper's height, so the content starts 12px under the bar; 12px sides and bottom, like the header's margins */
}

/*--- Page Menu ---*/
.bx-std-page-column.bx-std-page-menu {
    position: relative;
    -webkit-flex: 0 0 20rem;
    flex: 0 0 20rem;
    border-radius: 1.5rem; /* 24px, like the blocks and the header bar */

    width: 20rem;
    height: 100%;

    backdrop-filter: blur(40px);

    overflow-y: auto;
}
.bx-std-page-column.bx-std-page-menu::-webkit-scrollbar {
  display: none;
}
.bx-std-page-column.bx-std-page-menu div.bx-std-page-column-cnt {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

/*--- Page Content ---*/
.bx-std-page-column.bx-std-page-content {
    position: relative;
    display: flex;
    flex-direction: column;
    -webkit-flex-grow: 2;
    flex-grow: 2;
    min-width: 0;

    height: 100%;

    overflow-x: hidden;
    overflow-y: auto;
}
.bx-std-page-column.bx-std-page-content::-webkit-scrollbar {
  display: none;
}
.bx-std-page-column.bx-std-page-content div.bx-std-page-column-cnt {
    flex: 1 1 auto;
    /* min-height: 0; */
    width: 100%;
    padding: 1px 0 1px 0.75rem; /* 12px from the sidebar column; 1px of room for the blocks' hairline ring inside the scroll box */
}
/*
 * A page with a single block: the block takes the remaining height, its caption and bottom panel stay put
 * and only its content scrolls. The column itself no longer clips the block's ring and shadow.
 */
.bx-std-page-column.bx-std-page-content:has(> .bx-std-page-column-cnt > div.bx-std-block:only-of-type) {
    overflow: visible;
}
.bx-std-page-column.bx-std-page-content div.bx-std-page-column-cnt > div.bx-std-block:only-of-type {
    flex: 1 1 auto;
    min-height: 0;
}
/* Nothing scrolls around a single block, so it doesn't need the 1px ring room: its top and bottom line up with the sidebar. */
.bx-std-page-column.bx-std-page-content:has(> .bx-std-page-column-cnt > div.bx-std-block:only-of-type) div.bx-std-page-column-cnt {
    padding-top: 0;
    padding-bottom: 0;
}

/*
 * Narrow screens. Below 1024px the sidebar collapses to a strip of icon tiles with small labels under them;
 * below 768px it becomes a horizontal row of tabs above the content. Item styles are in general.css.
 */
@media (max-width: 1023px) {
    .bx-std-page-column.bx-std-page-menu {
        -webkit-flex: 0 0 6.5rem;
        flex: 0 0 6.5rem;

        width: 6.5rem; /* 88px items (80px of label room, enough for a semibold "Notifications") + the column's 8px inset */
    }
}
@media (max-width: 767px) {
    div.bx-std-page-columns-cnt {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .bx-std-page-column.bx-std-page-menu {
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;

        width: auto;
        height: auto;
        margin-bottom: 0.75rem; /* the same 12px gap as between the columns on wider screens */

        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .bx-std-page-column.bx-std-page-menu div.bx-std-page-column-cnt {
        position: static;
    }
    .bx-std-page-column.bx-std-page-content {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        min-height: 0;

        height: auto;
    }
    .bx-std-page-column.bx-std-page-content div.bx-std-page-column-cnt {
        padding-left: 0;
        padding-right: 0;
    }
}