.components-reconnect-show,
.components-reconnect-failed,
.components-reconnect-rejected,
#components-reconnect-modal {
    display: none !important;
    visibility: hidden !important;
}


body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    height: var(--size-fpmheader-lg);
    flex: 0 0 var(--size-fpmheader-lg);
    background: gainsboro;
}

.app-frame {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: gainsboro;
}

/*.app-frame {
    display: flex;
    flex-direction: column;
    height: 100vh;
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    background: gainsboro;
}*/

.frame-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    min-height: 0;
    padding: var(--pad-sm);
}

    .frame-body > :first-child {
        height: 100%;
    }

.reveal-host {
    transition: opacity var(--dur-fast) var(--ease-standard);
    will-change: opacity;
/*    height: 100%;
*/    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.pre-reveal {
    opacity: 0
}

.reveal-once {
    opacity: 1
}

@media (prefers-reduced-motion: reduce) {
    .reveal-host {
        transition: none;
    }
}

.stack {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.stack-header {
    flex: 0 0 var(--size-header-md);
}

.stack-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overflow-x: hidden;
    padding: var(--pad-sm);
}

:where(.stack-body) {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.level1, .level2, .level3, .level4 {
    height: 100%;
    min-height: 0;
}

    .level1:has(.level2) > .stack-body,
    .level2:has(.level3) > .stack-body,
    .level3:has(.level4) > .stack-body {
        overflow: hidden;
    }