.virtual-window {
    display: block;
    z-index: 2;
    font-size: 0.923rem;
    box-sizing: border-box;
    border: 2px solid gray;
    box-shadow: 0.1rem 0.1rem 0.2rem 0.1rem rgba(160, 160, 160, 0.7);
    --window-header-height: 1.6rem;
    --closer-size: calc(var(--window-header-height) * 0.875);
    --window-header-background-color: black;
    --window-header-font-color: white;
    --window-body-background-color: rgba(255, 230, 220, 0.91);
    --window-body-font-color: black;
    --window-body-padding: 0.5em;
    background-color: var(--window-body-background-color);
}
@media screen and (min-width: 1280px) {
    .virtual-window {
        position: fixed;
    }
}
@media screen and (max-width: 1279px) {
    .virtual-window {
        position: absolute;
    }
}
.virtual-window[data-window-horizontal-anchor="left"] {
    --window-horizontal-offset: 0;
    left: var(--window-horizontal-offset);
}
.virtual-window[data-window-horizontal-anchor="right"] {
    --window-horizontal-offset: 0;
    right: var(--window-horizontal-offset);
}
.virtual-window[data-window-vertical-anchor="top"] {
    --window-vertical-offset: 0;
    top: var(--window-vertical-offset);
}
.virtual-window[data-window-vertical-anchor="bottom"] {
    --window-vertical-offset: 0;
    bottom: var(--window-vertical-offset);
}
@media screen and (max-width: 999px) {
    .virtual-window {
        height: auto !important;
        width: auto !important;
        position: fixed;
        left: 2vw !important;
        top: 2vh !important;
        right: 2vw !important;
        bottom: 2vh !important;
        z-index: 205;
        --window-header-height: 4rem;
    }
}
.virtual-window > .window-header {
    background-color: var(--window-header-background-color);
    color: var(--window-header-font-color);
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.3em;
    height: auto;
    min-height: var(--window-header-height);
    max-height: calc(var(--window-header-height) * 5);
}
@media screen and (max-width: 999px) {
    .virtual-window > .window-header {
        height: var(--window-header-height);
    }

    .virtual-window > .window-header.dragging-handle {
        cursor: default;
    }
}
.virtual-window > .window-header > .window-title {
    width: calc(100% - var(--window-header-height));
    height: 100%;
    box-sizing: border-box;
}
.virtual-window > .window-header > .window-title[data-title]:before {
    content: attr(data-title);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
@media screen and (max-width: 999px) {
    .virtual-window > .window-header > .window-title[data-title]:before {
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        padding-left: 0.5em;
    }
}
.virtual-window > .window-header > .closer {
    display: flex;
    width: var(--closer-size);
    height: var(--closer-size);
    margin-left: calc(var(--window-header-height) - var(--closer-size));
    justify-content: center;
    align-items: center;
    color: rgb(192, 192, 192);
    cursor: pointer;
}
.virtual-window > .window-header > .closer:before {
    content: "×";
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 999px) {
    .virtual-window > .window-header > .closer:before {
        font-size: 40pt;
    }
}
.virtual-window > .window-header > .closer:hover {
    color: rgb(240, 216, 216);
    background-color: rgba(255, 255, 0, 0.3);
}
.virtual-window > .window-body {
    width: 100%;
    --height-offset: calc(var(--window-header-height) * -1);
    height: calc(100% + var(--height-offset));
    box-sizing: border-box;
    padding: var(--window-body-padding);
    font-size: 91.7%;
    color: var(--window-body-font-color);
    display: flex;
}
@media screen and (max-width: 999px) {
    .virtual-window > .window-body {
        height: calc(100% - var(--window-header-height));
    }
}
.virtual-window > .window-footer {
    width: 100%;
    height: 0;
}