/* Ensure the app root fills the viewport */
html, body, #app {
    height: 100%;
    margin: 0;
}

/* Make MudLayout fill viewport and behave like a row flex container */
.mud-layout {
    height: 100vh;
    min-height: 0; /* allow children to shrink */
    display: flex;
    flex-direction: row;
}

/* Force the drawer to stretch full height (so it doesn't control the height calculation) */
.mud-drawer {
    height: 100vh;
    align-self: stretch;
}

/* Make main content fill remaining space and be a column flex container */
.mud-main-content {
    flex: 1 1 0%;
    min-height: 0; /* critical for nested flex children */
    display: flex;
    flex-direction: column;
}

/* Wrapper around @Body in MainLayout */
.content {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Designer host specifics */
.sti-designer-page {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sti-designer-host {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}