.FlexboxLayout {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    align-items: stretch;
    height: calc(100% - var(--toolbar-height));
    width: 100%;
}

.sidebar-menu {
    height: 100%;
    /* required transformation to make inner fixed elements relative to this one*/
    transform: scale(1);
    transition: var(--sidebar-transition);
}

.sidebar-left {
    border-right: var(--ui-border-thickness) solid var(--ui-border-color);
    flex: 1;
    margin-left: calc(var(--left-sidebar-menu-width) * -1);
    max-width: var(--left-sidebar-menu-width);
    order: 1
}

.sidebar-left.sidebar-open {
    margin-left: 0
}

.main-content {
    flex: 1;
    height: 100%;
    order: 2;
    overflow: hidden;
    transition: var(--sidebar-transition);
    width: 100%;
}

.sidebar-right {
    flex: 1;
    margin-right: calc(var(--right-sidebar-menu-width) * -1);
    max-width: var(--right-sidebar-menu-width);
    order: 3;
}

.sidebar-right.sidebar-open {
    margin-right: 0;
}