.xCfgRoot {
    display:flex;
    flex-direction: column;
    height: 100vh;
}

#configPanel {
    order: 1;
    position: relative !important;
    inset: 0 !important;
    overflow: hidden;
}

#diagPanel + .xHSplit {
    order: 2;
    top: auto !important;
    bottom: auto !important;
}

#diagPanel {
    order: 3;
    position: relative !important;
}

.xCfgInner {
    display: flex;
    height: 100%;
}

.xCfgInner > .multisplit-panel:not(#actionPanel) {
    position: static !important;
    width: auto !important;
    flex: 1 0;
}

.xMainCfg {
    width: 100%;
    height: 100%;
    min-height: 20rem;
    display: grid;
    grid-template-columns:
        [left] min-content 1fr [right];
    grid-template-rows:
        [top] min-content 1fr min-content min-content [bottom];
    grid-template-areas:
        "Toolbar Toolbar"
        "CategoryBar Config"
        "CategoryBar QuickActionBar"
        "StatusBar StatusBar";
}

.xBody {
    grid-area: Config;
    position: relative;
    overflow: hidden;
    background-color: var(--body-background-color);
}

.xPage {
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media (max-width: 64rem) {
    .xMainCfg {
        grid-template-columns:
            [left] auto [right];
        grid-template-rows:
            [top] max-content max-content max-content auto max-content max-content [bottom];
        grid-template-areas:
            "Toolbar"
            "CategoryBar"
            "Config"
            "QuickActionBar"
            "StatusBar";
    }

    .xCfgInner {
        height: auto;
    }
}