half-page {
    background-color: var(--pageBackground);
    color: var(--pageColor);
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

half-page>main {
    background-color: var(--pageBackground);
    color: var(--pageColor);
    display: flex;
    flex-direction: column;
    width: 20rem;
    height: 100%;
    overflow: auto;
}

half-page>layout {
    background-color: var(--pageBackground);
    color: var(--pageColor);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    width: 0%;
    height: 100%;
    overflow: auto;
}

@media(max-width:1080px) {

    half-page>main {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        z-index: 0;
    }

    half-page>layout {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        z-index: 1;
    }

}

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

icon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

@keyframes spin {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

[spin="true"] {
    animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

modal-page {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
}

modal-page>main {
    display: flex;
    flex-direction: column;
}

.window-page {
    pointer-events: all;
    border-radius: 0.5rem;
}

.window-page .window-page-content {
    border: 1px solid black;
    border-radius: 0.5rem;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.window-page:not([is-active="true"]) .window-page-content {
    pointer-events: none;
}

/* is-fullscreen */

.window-page[state="Maximized"] {
    left: 0px !important;
    top: 0px !important;
    width: 100% !important;
    height: 100% !important;
}

.window-page[state="Maximized"] .window-page-content {
    border-width: 0px !important;
    border-radius: 0px !important;
    padding-bottom: 4rem !important;
}

.window-page[state="Maximized"]>layout {
    display: none !important;
}

/* is-minimized */

.window-page[is-minimized="true"] {
    display: none !important;
}

/* is-minimized */
.window-page[dragging="true"] .window-page-content>column {
    pointer-events: none !important;
}

.window-page[resizing="true"] .window-page-content>column {
    pointer-events: none !important;
}

@media(max-width:1080px) {
    .window-page {
        left: 0px !important;
        top: 0px !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .window-page .window-page-content {
        border-width: 0px !important;
        border-radius: 0px !important;
        padding-bottom: 4rem !important;
    }
}