/* #region ../../themes/vts/Vars.css */
:root {
    /* //////////////////////////////////////// */
    /* #region Fonts */
    --system-ui: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --system-sans-serif: ui-sans-serif, sans-serif;
    --system-serif: ui-serif, serif;
    --system-monospace: ui-monospace, monospace;
    --font-color: hsl(0 0% 15%);
    --font-disabled-color: hsl(0 0% 75%);
    /* auto geometricPrecision optimizeLegibility optimizeSpeed */
    /* --text-rendering: geometricPrecision; */
    /* #endregion */
    /* //////////////////////////////////////// */
    /* //////////////////////////////////////// */
    /* #region Sizes */
    /*
     * - All sizes for this theme are based on a base font size of 10pt.
     * - With this base font size 1 Pixel corresponds to 0.075rem.
     * - The value of `--1px` must be adjusted if the base font size is to be changed from `10pt`
     *   but `--1px` should still result in 1 'real' pixel (for example to `0.0625rem` for a base
     *   font size of `12pt` or `16px`).
     */
    --base-font-size: 10pt;
    --base-size: 1rem;
    --base-size-half: 0.5rem;
    --base-size-quarter: 0.25rem;
    --base-size-three-quarters: 0.75rem;
    --1px: 0.075rem;
    --2px: calc(2 * var(--1px));
    --3px: calc(3 * var(--1px));
    --4px: calc(4 * var(--1px));
    --5px: calc(5 * var(--1px));
    --6px: calc(6 * var(--1px));
    --7px: calc(7 * var(--1px));
    --8px: calc(8 * var(--1px));
    --9px: calc(9 * var(--1px));
    --10px: calc(10 * var(--1px));
    --11px: calc(11 * var(--1px));
    --12px: calc(12 * var(--1px));
    --13px: calc(13 * var(--1px));
    --14px: calc(14 * var(--1px));
    --15px: calc(15 * var(--1px));
    --16px: calc(16 * var(--1px));
    --17px: calc(17 * var(--1px));
    --18px: calc(18 * var(--1px));
    --19px: calc(19 * var(--1px));
    --20px: calc(20 * var(--1px));
    --21px: calc(21 * var(--1px));
    --22px: calc(22 * var(--1px));
    --23px: calc(23 * var(--1px));
    --24px: calc(24 * var(--1px));
    --25px: calc(25 * var(--1px));
    --26px: calc(26 * var(--1px));
    --27px: calc(27 * var(--1px));
    --28px: calc(28 * var(--1px));
    --29px: calc(29 * var(--1px));
    --30px: calc(30 * var(--1px));
    --border-radius-normal: var(--6px);
    --border-radius-small: var(--3px);
    --border-radius-large: var(--13px);
    --border-radius-pill: 1000px;
    /* #endregion */
    /* //////////////////////////////////////// */
    /* //////////////////////////////////////// */
    /* #region Colors */
    /* Primary, secondary, warn colors */
    --color-primary: hsl(216, 92%, 63%);
    --color-primary-lighter: hsl(216, 92%, 68%);
    --color-primary-light: hsl(216, 92%, 73%);
    --color-primary-darker: hsl(216, 92%, 58%);
    --color-primary-dark: hsl(216, 92%, 53%);
    --color-success: hsl(120, 100%, 35%);
    --color-success-lighter: hsl(120, 100%, 55%);
    --color-success-light: hsl(120, 100%, 75%);
    --color-success-darker: hsl(120, 100%, 25%);
    --color-success-dark: hsl(120, 100%, 15%);
    --color-warn: hsl(0, 100%, 72.5%);
    --color-warn-lighter: hsl(0, 100%, 89.3%);
    --color-warn-light: hsl(0, 100%, 92.5%);
    --color-warn-darker: hsl(0, 100%, 59%);
    --color-warn-dark: hsl(0, 100%, 35.7%);
    /* White to black. */
    --black-0: hsl(0, 0%, 100%);
    --black-1: hsl(0, 0%, 99%);
    --black-2: hsl(0, 0%, 98%);
    --black-3: hsl(0, 0%, 97%);
    --black-4: hsl(0, 0%, 96%);
    --black-5: hsl(0, 0%, 95%);
    --black-10: hsl(0, 0%, 90%);
    --black-15: hsl(0, 0%, 85%);
    --black-20: hsl(0, 0%, 80%);
    --black-25: hsl(0, 0%, 75%);
    --black-30: hsl(0, 0%, 70%);
    --black-35: hsl(0, 0%, 65%);
    --black-40: hsl(0, 0%, 60%);
    --black-45: hsl(0, 0%, 55%);
    --black-50: hsl(0, 0%, 50%);
    --black-55: hsl(0, 0%, 45%);
    --black-60: hsl(0, 0%, 40%);
    --black-65: hsl(0, 0%, 35%);
    --black-70: hsl(0, 0%, 30%);
    --black-75: hsl(0, 0%, 25%);
    --black-80: hsl(0, 0%, 20%);
    --black-85: hsl(0, 0%, 15%);
    --black-90: hsl(0, 0%, 10%);
    --black-95: hsl(0, 0%, 5%);
    --black-100: hsl(0, 0%, 0%);
    /* Backgrounds, borders */
    --window-background-color: hsl(0 0% 100%);
    --panel-background-color-light: hsl(0 0% 94.9%);
    --panel-background-color: hsl(0 0% 91.4%);
    --panel-background-color-dark: hsl(0 0% 83%);
    --border-color: hsl(0 0% 89.8%);
    --border-color-dark: var(--black-15);
    --panel-border: 1px solid var(--border-color);
    /* #endregion */
    /* //////////////////////////////////////// */
    /* //////////////////////////////////////// */
    /* #region Images, icons */
    /* #region Images */
    /* delete.svg */
    --img-delete: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGVsbGlwc2Ugc3R5bGU9ImZpbGw6IHJnYigyNTUsIDAsIDApOyIgY3g9IjI1NiIgY3k9IjI1NiIgcng9IjI1NiIgcnk9IjI1NiIvPgogIDxwYXRoIGQ9Ik0gMzY2LjYgMjMwLjgzIEMgMzgwLjUwNCAyMzAuODMgMzkxLjc4NCAyNDIuMDc5IDM5MS43ODQgMjU1Ljk5OSBDIDM5MS43ODQgMjY5LjkxOSAzODAuNTA0IDI4MS4xNjcgMzY2LjYgMjgxLjE2NyBMIDE0NC45MiAyODEuMTY3IEwgMTQ0LjkyIDIzMC44MyBNIDE0NS4zODQgMjgxLjE2NyBDIDEzMS40OTYgMjgxLjE2NyAxMjAuMjE2IDI2OS45MTkgMTIwLjIxNiAyNTUuOTk5IEMgMTIwLjIxNiAyNDIuMDc5IDEzMS40OTYgMjMwLjgzIDE0NS4zODQgMjMwLjgzIiBzdHlsZT0icGFpbnQtb3JkZXI6IGZpbGw7IGZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MTA4LCAtMC43MDcxMDYsIDAuNzA3MTA2LCAwLjcwNzEwOCwgLTEwNi4wMzc2MDksIDI1NS45OTkwNTYpIi8+CiAgPHBhdGggZD0iTSAzNjYuNiAyMzAuODMgQyAzODAuNTA0IDIzMC44MyAzOTEuNzg0IDI0Mi4wNzggMzkxLjc4NCAyNTUuOTk4IEMgMzkxLjc4NCAyNjkuOTE4IDM4MC41MDQgMjgxLjE2NiAzNjYuNiAyODEuMTY2IEwgMTQ0LjkyIDI4MS4xNjYgTCAxNDQuOTIgMjMwLjgzIE0gMTQ1LjM4NCAyODEuMTY2IEMgMTMxLjQ5NiAyODEuMTY2IDEyMC4yMTYgMjY5LjkxOCAxMjAuMjE2IDI1NS45OTggQyAxMjAuMjE2IDI0Mi4wNzggMTMxLjQ5NiAyMzAuODMgMTQ1LjM4NCAyMzAuODMiIHN0eWxlPSJwYWludC1vcmRlcjogZmlsbDsgZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIgdHJhbnNmb3JtPSJtYXRyaXgoMC43MDcxMDcsIDAuNzA3MTA3LCAtMC43MDcxMDcsIDAuNzA3MTA3LCAyNTUuOTk4NTgxLCAtMTA2LjAzOTI2KSIvPgo8L3N2Zz4=");
    /* menu.svg */
    --img-menu: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4KICA8cGF0aCBkPSJNMCA5NkMwIDc4LjMgMTQuMyA2NCAzMiA2NGwzODQgMGMxNy43IDAgMzIgMTQuMyAzMiAzMnMtMTQuMyAzMi0zMiAzMkwzMiAxMjhDMTQuMyAxMjggMCAxMTMuNyAwIDk2ek0wIDI1NmMwLTE3LjcgMTQuMy0zMiAzMi0zMmwzODQgMGMxNy43IDAgMzIgMTQuMyAzMiAzMnMtMTQuMyAzMi0zMiAzMkwzMiAyODhjLTE3LjcgMC0zMi0xNC4zLTMyLTMyek00NDggNDE2YzAgMTcuNy0xNC4zIDMyLTMyIDMyTDMyIDQ0OGMtMTcuNyAwLTMyLTE0LjMtMzItMzJzMTQuMy0zMiAzMi0zMmwzODQgMGMxNy43IDAgMzIgMTQuMyAzMiAzMnoiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAwLCAwKTsiLz4KPC9zdmc+");
    /* restart.svg */
    --img-restart: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZWxsaXBzZSBzdHlsZT0iZmlsbDogcmdiKDg0LCAxODAsIDI0Nik7IiBjeD0iMjU2IiBjeT0iMjU2IiByeD0iMjU2IiByeT0iMjU2Ii8+CiAgPHBhdGggZD0iTSA0MDkuNjE1IDg4LjA2IEMgNDIwLjAxOCA4OC4wNiA0MzAgOTYuMTM3IDQzMCAxMDguMzQgTCA0MzAgMjE3Ljc2MiBDIDQzMCAyMjUuNzA1IDQyMy41NjIgMjMyLjEzOSA0MTUuNjIzIDIzMi4xMzkgTCAzMDYuMzUgMjMyLjEzOSBDIDI5NC4xNCAyMzIuMTM5IDI4Ni4wNTYgMjIyLjE1IDI4Ni4wNTYgMjExLjc0IEMgMjg2LjA1NiAyMDYuNzY0IDI4Ny45MDEgMjAxLjY5IDI5Mi4wMjUgMTk3LjU2NSBMIDMyNS44NjUgMTYzLjcxMSBDIDMwNC43IDE0Ni4zNTYgMjc3Ljk3OCAxMzYuMjMxIDI0OS44OTEgMTM2LjIzMSBDIDE4My44MjUgMTM2LjIzMSAxMzAuMDQ0IDE4OS45OTggMTMwLjA0NCAyNTYuMDc5IEMgMTMwLjA0NCAzMjIuMTYgMTgzLjc5NSAzNzUuODk2IDI0OS44NjkgMzc1Ljg5NiBDIDMwNC43MjMgMzc1Ljg5NiAzMTYuOTQ3IDM0Ny4xNjQgMzM2LjE5MiAzNDcuMTY0IEMgMzUwLjA1MiAzNDcuMTY0IDM2MC4xNjkgMzU4LjQ0NCAzNjAuMTY5IDM3MS4xMzQgQyAzNjAuMTY5IDM5Ny40MTMgMjk4Ljk3OCA0MjMuOTQgMjQ5LjkyMSA0MjMuOTQgQyAxNTcuMzczIDQyMy45NCA4MiAzNDguNTY3IDgyIDI1Ni4wMTkgQyA4MiAxNjMuNDcxIDE1Ny4zOTYgODguMzA3IDI0OS45NDQgODguMzA3IEMgMjkwLjg5MyA4OC4zMDcgMzI5LjU5MiAxMDMuNiAzNTkuNzQxIDEyOS43NTIgTCAzOTUuNDQxIDk0LjAzIEMgMzk5LjU2NiA4OS45MDUgNDA0LjY2NSA4OC4wNiA0MDkuNjE1IDg4LjA2IFoiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7Ii8+Cjwvc3ZnPg==");
    /* #endregion */
    /* #region Clip-paths */
    --cp-arrow-up: polygon(0% 93.333%, 50% 6.666%, 100% 93.333%);
    --cp-arrow-right: polygon(6.666% 0%, 93.333% 50%, 6.666% 100%);
    --cp-arrow-down: polygon(0% 6.666%, 100% 6.666%, 50% 93.333%);
    --cp-arrow-left: polygon(6.666% 50%, 93.333% 0%, 93.333% 100%);
    /* #endregion */
    /* #endregion */
    /* //////////////////////////////////////// */
}
/* #endregion */

/* #region ../../themes/vts/Common.css */
html {
    font-family: var(--system-ui);
    font-size: var(--base-font-size);
    color: var(--font-color);
    box-sizing: border-box;
}
dialog {
    color: var(--font-color);
    line-height: 1.15;
}
/* body {
    -webkit-font-smoothing: antialiased;
} */
/* #region Global commons. */
*,
*::before,
*::after {
    box-sizing: inherit;
}
* {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    /* text-rendering: var(--text-rendering); */
    outline: none;
}
/* input[type="date"], */
/* input[type="datetime-local"], */
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
/* input[type="time"], */
input[type="url"],
/* input[type="week"], */
textarea {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}
.text-selectable {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}
/* p {
    text-wrap: balance;
} */
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}
input,
button,
textarea,
select {
    font: inherit;
}
a,
input,
select,
textarea,
button.regular {
    &:focus-visible {
        box-shadow: var(--input-focused);
        @media (prefers-reduced-motion: no-preference) {
            transition: .1s;
        }
        z-index: 10;
    }
}
/* #endregion */
/* #region Disabled */
.disabled,
.disabled *,
:disabled,
:disabled *,
[disabled],
[disabled] * {
    pointer-events: none !important;
}
b.disabled,
b[disabled],
code.disabled,
code[disabled],
div.disabled,
div[disabled],
em.disabled,
em[disabled],
footer.disabled,
footer[disabled],
h1.disabled,
h1[disabled],
h2.disabled,
h2[disabled],
h3.disabled,
h3[disabled],
h4.disabled,
h4[disabled],
h5.disabled,
h5[disabled],
h6.disabled,
h6[disabled],
header.disabled,
header[disabled],
i.disabled,
i[disabled],
label.disabled,
label[disabled],
li.disabled,
li[disabled],
main.disabled,
main[disabled],
ol.disabled,
ol[disabled],
p.disabled,
p[disabled],
pre.disabled,
pre[disabled],
section.disabled,
section[disabled],
span.disabled,
span[disabled],
strong.disabled,
strong[disabled],
ul.disabled,
ul[disabled] {
    color: var(--font-disabled-color);
}
img.disabled,
img[disabled] {
    filter: contrast(0.6) opacity(0.8);
}
/* #endregion */
/* #region Semantic sizes. */
.sz-tiny {
    zoom: 50%;
}
.sz-small {
    /* zoom: 67%; */
    zoom: 70%;
}
.sz-smaller {
    /* zoom: 83%; */
    zoom: 85%;
}
.sz-normal {
    zoom: unset;
}
.sz-larger {
    /* zoom: 125%; */
    zoom: 128%;
}
.sz-medium {
    zoom: 150%;
}
.sz-large {
    /* zoom: 175%; */
    zoom: 173%;
}
.sz-huge {
    zoom: 200%;
}
.sz-110 {
    zoom: 111%;
}
.sz-120 {
    zoom: 120%;
}
.sz-130 {
    zoom: 129%;
}
.sz-140 {
    zoom: 140%;
}
/* #endregion. */
hr {
    width: 100%;
    border: none;
    height: var(--1px);
    background: var(--border-color);
}
/* #endregion */

/* #region ../../themes/vts/Input.css */
/* Common styles for native DOM input elements. */
:root {
    --input-height: var(--22px);
    --input-text-inline-padding: var(--9px);
    /* This is a hack that fixes a misbehavior in Blink (vertically centered labeled text input). */
    /* --input-text-block-padding: var(--2px) calc(var(--1px) + (var(--1px) / 2)); */
    /* --input-text-block-padding: 0; */
    --input-focused-outline-color: hsl(222 84.3% 77.5%);
    --input-focused: 0 0 var(--1px) var(--3px) var(--input-focused-outline-color);
    --input-focused-alt: 0 0 var(--2px) var(--2px) white, 0 0 var(--1px) var(--6px) var(--input-focused-outline-color);
    --input-border-radius: var(--6px);
    --input-border-width: var(--1px);
    --input-border: var(--input-border-width) solid var(--black-20);
    --input-border-dark: var(--input-border-width) solid var(--black-35);
    --input-disabled-border: var(--input-border-width) solid var(--black-20);
    --input-disabled-border-dark: var(--input-border-width) solid var(--black-25);
    --input-background: var(--black-0);
    --input-background-dark: var(--black-5);
    --input-disabled-background: var(--black-2);
    --input-disabled-background-dark: var(--black-10);
}
input {
    &:autofill {
        &:hover,
        &:focus,
        &:active,
        &.disabled,
        &:disabled,
        &.disabled:hover,
        &:disabled:hover,
        &.disabled:focus,
        &:disabled:focus,
        &.disabled:active,
        &:disabled:active {
            background-clip: text;
            -webkit-background-clip: text;
            transition: background 2147483647s ease-in-out 0s;
        }
        &:hover,
        &:focus,
        &:active {
            color: var(--font-color) !important;
            -webkit-text-fill-color: var(--font-color);
            background: var(--input-background) !important;
            box-shadow: inset 0 0 1000px 1000px var(--input-background) !important;
        }
        &.disabled,
        &:disabled,
        &.disabled:hover,
        &:disabled:hover,
        &.disabled:focus,
        &:disabled:focus,
        &.disabled:active,
        &:disabled:active {
            color: var(--font-disabled-color) !important;
            -webkit-text-fill-color: var(--font-disabled-color);
            background: var(--input-disabled-background) !important;
            box-shadow: inset 0 0 1000px 1000px var(--input-disabled-background) !important;
        }
        &:disabled::selection {
            background: transparent;
        }
        &:focus {
            box-shadow: var(--input-focused) !important;
        }
    }
}
/* #endregion */

/* #region ../src/style/Vars.css */
/* App specific CSS variables. */
:root {
    /* `.navigation-bar` inline padding plus `.header-container` width (see NavigationBar.css). */
    --app-splitter-collapsed-size: 2.5rem;
}
/* #endregion */

/* #region ../src/style/App.css */
/* App specific CSS styles. */
body {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    min-width: 35rem;
    min-height: 20rem;
    margin: 0;
}
header,
footer {
    flex-grow: 0;
    flex-shrink: 0;
    background: var(--black-5);
}
header {
    padding: var(--base-size);
    border-block-end: var(--1px) solid var(--black-15);
}
footer {
    padding: var(--base-size-half);
    border-block-start: var(--1px) solid var(--black-15);
}
main {
    flex-grow: 1;
    .vts-splitter {
        width: 100%;
        height: 100%;
    }
}
.std-dialog {
    > .content > .stddlg-title-bar > p {
        margin-block-start: 0;
        font-weight: bolder;
    }
}
/* #endregion */

/* #region ../../themes/vts/A.css */
a {
    --link-color: var(--color-primary-dark);
    --link-hover-color: var(--color-primary);
    --link-disabled-color: var(--black-25);
    --link-border-radius: var(--3px);
    color: var(--link-color);
    border-radius: var(--link-border-radius);
    text-decoration: none;
    &:hover {
        color: var(--link-hover-color);
        text-decoration: revert;
        cursor: pointer;
        * {
            cursor: pointer;
        }
    }
    &.disabled {
        color: var(--font-disabled-color);
    }
}
/* #endregion */

/* #region ../../themes/vts/Button.css */
@layer vts {
    button.regular,
    ::file-selector-button {
        --btn-regular-height: var(--22px);
        --btn-regular-default-height: var(--22px);
        --btn-margin: var(--3px);
        --btn-padding-inline: var(--12px);
        --btn-font-size: 1rem;
        --btn-font-color: var(--font-color);
        --btn-border-radius: var(--6px);
        --btn-border: var(--1px) solid var(--black-20);
        --btn-border-bottom: var(--1px) solid var(--black-35);
        --btn-background: var(--black-0);
        --btn-active-background: var(--black-5);
        --btn-default-border: var(--1px) solid transparent;
        --btn-default-focused-border: var(--1px) solid var(--color-primary-dark);
        --btn-default-background: linear-gradient(var(--color-primary), var(--color-primary-darker));
        --btn-default-active-background: linear-gradient(var(--color-primary-darker), var(--color-primary-dark));
        --btn-default-disabled-background: linear-gradient(var(--color-primary-light), var(--color-primary-lighter));
        --btn-default-color: var(--black-0);
        --btn-disabled-border: var(--1px) solid var(--black-5);
        --btn-disabled-border-bottom: var(--1px) solid var(--black-15);
        --btn-disabled-background: var(--black-0);
        --btn-disabled-font-color: var(--font-disabled-color);
        --btn-warn-font-color: var(--color-warn);
        --btn-warn-disabled-font-color: var(--color-warn-light);
        appearance: none;
        position: relative;
        /* margin: var(--btn-margin); */
        padding-inline: var(--btn-padding-inline);
        height: var(--btn-regular-height);
        font-size: var(--btn-font-size);
        color: var(--btn-font-color);
        border-radius: var(--btn-border-radius);
        border: var(--btn-border);
        border-bottom: var(--btn-border-bottom);
        background: var(--btn-background);
        &.disabled,
        &:disabled {
            border: var(--btn-disabled-border);
            border-bottom: var(--btn-disabled-border-bottom);
            background: var(--btn-disabled-background);
            color: var(--btn-disabled-font-color);
        }
        &:active {
            background: var(--btn-active-background)
        }
        &.default {
            height: var(--btn-regular-default-height);
            border: var(--btn-default-border);
            background: var(--btn-default-background);
            color: var(--btn-default-color);
            &:active {
                background: var(--btn-default-active-background);
            }
            &:focus-visible {
                border: var(--btn-default-focused-border);
            }
            &.disabled,
            &:disabled {
                background: var(--btn-default-disabled-background);
            }
        }
        &.warn {
            color: var(--btn-warn-font-color);
            &.disabled,
            &:disabled {
                color: var(--btn-warn-disabled-font-color);
            }
        }
    }
}
/* #endregion */

/* #region ../../themes/vts/Dialog.css */
html:has(dialog[open].modal) {
    overflow: hidden;
}
.dialog,
.vts-dialog {
    --dlg-backdrop: hsla(0 0% 0% / 0.2);
    --dlg-border-radius: var(--border-radius-large);
    --dlg-border: var(--1px) solid var(--black-20);
    --dlg-background: var(--black-0);
    --dlg-content-background: var(--black-0);
    --dlg-window-background: var(--black-2);
    --dlg-window-content-background: var(--black-2);
    --dlg-padding: var(--base-size);
    --dlg-content-padding: 0;
    --dlg-focused: var(--1px) var(--5px) var(--20px) calc(-1 * var(--2px)) hsla(0 0% 0% / 0.25);
    --dlg-resizer-size: var(--6px);
    /*
     * Setting `display: flex;` instead of `block` seems unnecessary but it is a simple way to force
     * `.content` to fill the entire dialog and also to auto adjust its height to the height of its
     * content. This fixes a problem in WebKit where setting `height: 100%;` for `.content` (which
     * would be the 'natural' way) doesn't work properly (why?). This could be fixed by setting
     * `display: table;` for `.content` but this makes it unnecessarily difficult to layout the
     * content box.
     */
    display: flex;
    flex-direction: column;
    inset-block-start: 0;
    inset-block-end: 0;
    width: fit-content;
    height: fit-content;
    /*
     * !! `min-width`/`min-height` should always be adapted to the size of the respective dialog.
     * They also __must__ be given as a _numeric_ CSS values, otherwise resizing the dialog doesn't
     * work properly!.
     */
    min-width: 5rem;
    min-height: 5rem;
    overflow: hidden;
    margin: 0;
    padding: var(--dlg-padding);
    border-radius: var(--dlg-border-radius);
    border: var(--dlg-border);
    background: var(--dlg-background);
    outline: none;
    &::backdrop {
        position: fixed;
        inset: 0;
        background: transparent;
    }
    &.modal-dialog-first::backdrop {
        background: var(--dlg-backdrop);
    }
    &:focus,
    &:focus-within {
        box-shadow: var(--dlg-focused);
    }
    /* Alternative dialog windows and content. */
    &.dialog-window {
        background: var(--dlg-window-background);
        > .content {
            background: var(--dlg-window-content-background);
        }
    }
    > .content {
        background: var(--dlg-content-background);
        position: relative;
        flex-grow: 1;
        /* overflow: hidden; */
        padding: var(--dlg-content-padding);
        /* Moving. */
        /* Inner content container. */
        &.move-handle,
        /* Custom move handle. */
        .custom-move-handle,
        .custom-move-handle * {
            cursor: move;
        }
    }
    /* #region Resizers. */
    > [class*="rs-"] {
        position: absolute;
        margin: 0;
        padding: 0;
        background-color: transparent;
        z-index: 1000;
    }
    > [class*="rs-n"] {
        top: 0;
    }
    > .rs-ne,
    > .rs-e,
    > .rs-se {
        right: 0;
    }
    > [class*="rs-s"] {
        bottom: 0;
    }
    > .rs-sw,
    > .rs-w,
    > .rs-nw {
        left: 0;
    }
    > [class*="rs-n"],
    > [class*="rs-s"] {
        height: var(--dlg-resizer-size);
    }
    > .rs-ne,
    > .rs-e,
    > .rs-se,
    > .rs-sw,
    > .rs-w,
    > .rs-nw {
        width: var(--dlg-resizer-size);
    }
    > .rs-n,
    > .rs-s {
        left: var(--dlg-resizer-size);
        right: var(--dlg-resizer-size);
    }
    > .rs-e,
    > .rs-w {
        top: var(--dlg-resizer-size);
        bottom: var(--dlg-resizer-size);
    }
    > .rs-n {
        cursor: row-resize;
    }
    > .rs-ne {
        cursor: nesw-resize;
    }
    > .rs-e {
        cursor: col-resize;
    }
    > .rs-se {
        cursor: nwse-resize;
    }
    > .rs-s {
        cursor: row-resize;
    }
    > .rs-sw {
        cursor: nesw-resize;
    }
    > .rs-w {
        cursor: col-resize;
    }
    > .rs-nw {
        cursor: nwse-resize;
    }
    /* #endregion */
    /* Other classes. */
    /*
    Set depending on the state of `HCentered`/`VCentered`.
    &.h-centered:not(.v-centered) {}
    &.v-centered:not(.h-centered) {}
    &.v-centered.h-centered {}
    &:not(.v-centered):not(.h-centered) {}
    */
    /* Set if the dialog is shown modal. */
    /* &.modal {} */
    /* Set if the dialog is shown non-modal. */
    /* &.non-modal {} */
    /** Present on movable dialogs. */
    /* &.movable {} */
    /** Set on holding down the pointer; removed on the first move. */
    /* &.move-start {} */
    /** Set while moving the dialog; removed when the pointer goes up. */
    /* &.moving {} */
    /** Set permanently after the dialog has been moved at least once. */
    /* &.moved {} */
    /** Present on resizable dialogs. */
    /* &.resizable {} */
    /** Set on holding down the pointer on a resize handle; removed on the first resize. */
    /* &.resize-start {} */
    /** Set while resizing the dialog; removed when the pointer goes up. */
    /* &.resizing {} */
    /** Set permanently after the dialog has been resized at least once. */
    /* &.resized {} */
    /* Never change/remove this class nor its rules! */
    &.--calc-size {
        visibility: hidden !important;
    }
}
/* #endregion */

/* #region ../../themes/vts/TextArea.css */
/*
__Note:__ This CSS uses CSS variables defined in `Input.css` (`--input-*`) to achieve a consistent
style for native DOM input elements. `Input.css` has to be included in order to make the styling
here work correctly.
*/
textarea {
    --textarea-border-radius: var(--border-radius-normal);
    --textarea-inline-padding: var(--9px);
    --textarea-block-padding: var(--7px);
    margin: 0;
    padding-inline: var(--textarea-inline-padding);
    padding-block: var(--textarea-block-padding);
    border-radius: var(--textarea-border-radius);
    border: var(--input-border);
    border-bottom: var(--input-border-dark);
    background: var(--input-background-color);
    font-size: 1rem;
    color: var(--font-color);
    &.disabled,
    &:disabled {
        color: var(--font-disabled-color);
        border: var(--input-disabled-border);
        border-bottom: var(--input-disabled-border-dark);
        background: var(--input-disabled-background);
    }
    &:autofill {
        &:hover,
        &:focus,
        &:active,
        &.disabled,
        &:disabled,
        &.disabled:hover,
        &:disabled:hover,
        &.disabled:focus,
        &:disabled:focus,
        &.disabled:active,
        &:disabled:active {
            background-clip: text;
            -webkit-background-clip: text;
            transition: background-color 5000s ease-in-out 0s;
        }
        &:hover,
        &:focus,
        &:active {
            color: var(--font-color) !important;
            -webkit-text-fill-color: var(--font-color);
            background: var(--input-background) !important;
            box-shadow: inset 0 0 0 1000px var(--input-background) !important;
        }
        &.disabled,
        &:disabled,
        &.disabled:hover,
        &:disabled:hover,
        &.disabled:focus,
        &:disabled:focus,
        &.disabled:active,
        &:disabled:active {
            color: var(--font-disabled-color) !important;
            -webkit-text-fill-color: var(--font-disabled-color);
            background: var(--input-disabled-background) !important;
            box-shadow: inset 0 0 0 1000px var(--input-disabled-background) !important;
        }
        &:disabled::selection {
            background: transparent;
        }
        &:focus {
            box-shadow: var(--input-focused) !important;
        }
    }
}
/* #endregion */

/* #region ../../themes/vts/BusyOverlay.css */
.busy-overlay,
.vts-busy-overlay {
    --busy-overlay-color: var(--color-primary);
    --busy-overlay-backdrop-color: hsla(0 0% 0% / 0.1);
    --busy-overlay-size: 5rem;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: initial;
    max-height: initial;
    border: none;
    outline: none;
    background-color: var(--busy-overlay-backdrop-color);
    opacity: 0;
    animation: busy-overlay-visibility 200ms forwards;
    animation-delay: 0ms;
    &::backdrop {
        background: transparent;
    }
    > .content {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 1rem;
        > .busy-indicator {
            display: block;
            margin: auto;
            width: var(--busy-overlay-size);
            height: var(--busy-overlay-size);
            border-radius: 50%;
            border-style: solid;
            border-width: calc(var(--busy-overlay-size) / 10);
            border-color: var(--busy-overlay-color);
            border-bottom-color: transparent;
            animation: busy-indicator-rotate 1.25s linear infinite running;
        }
    }
}
@keyframes busy-overlay-visibility {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes busy-indicator-rotate {
    0% {
        /* `1` doesn't work properly in Blink. */
        opacity: 0.999;
        transform: rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: rotate(360deg);
    }
}
/* #endregion */

/* #region ../../themes/vts/IconButton.css */
/* The styling here is very generic and only handles the basic layout. */
.icon-button,
.vts-icon-button {
    --icon-button-margin: var(--base-size-half);
    display: flex;
    align-items: center;
    /* This class is added to buttons that have no caption and only either `IconStart` or `IconEnd` set. */
    &.single-icon {
        padding-inline: 0;
        aspect-ratio: 1;
        justify-content: center;
    }
    &.horizontal {
        flex-direction: row;
        > .start:not(.empty):has(+ .phrase:not(:empty)) {
            margin-inline-end: var(--icon-button-margin);
            /* Example for using a background image and hiding the text content
               if no icon font is used. */
            /*
            width: 1rem;
            height: 1rem;
            font-size: 0;
            color: transparent;
            */
            /* This background image then would have to be defined elsewhere. */
            /* background-image: ...; */
        }
        > .phrase:not(:empty) + .end:not(.empty) {
            margin-inline-start: var(--icon-button-margin);
        }
        > .start:not(.empty) + .phrase:empty + .end:not(.empty) {
            margin-inline-start: var(--icon-button-margin);
        }
    }
    &.vertical {
        flex-direction: column;
        > .start:not(.empty):has(+ .phrase:not(:empty)) {
            margin-block-end: var(--icon-button-margin);
        }
        > .phrase:not(:empty) + .end:not(.empty) {
            margin-block-start: var(--icon-button-margin);
        }
        > .start:not(.empty) + .phrase:empty + .end:not(.empty) {
            margin-block-start: var(--icon-button-margin);
        }
    }
}
/* #endregion */

/* #region ../../themes/vts/DisclosureContainer.css */
.disclosure-container,
.vts-disclosure-container {
    --dc-disclose-animation: 0.16s ease-in-out;
    /* --dc-disclose-container-padding: var(--base-size-half); */
    /* --dc-disclose-container-border: var(--1px) solid var(--border-color); */
    /* --dc-disclose-container-border-radius: var(--3px); */
    /* --dc-disclose-container-background: var(--black-2); */
    --dc-disclose-button-size: 1rem;
    --dc-disclose-button-background: var(--black-45);
    --dc-disclose-button-background-disabled: var(--black-25);
    display: flex;
    /* padding: var(--dc-disclose-container-padding); */
    /* border: var(--dc-disclose-container-border); */
    /* border-radius: var(--dc-disclose-container-border-radius); */
    /* background: var(--dc-disclose-container-background); */
    > .header-container {
        position: relative;
        display: flex;
        flex-shrink: 0;
        flex-grow: 0;
        > .disclose {
            flex-shrink: 0;
            margin: 0;
            padding: 0;
            width: var(--dc-disclose-button-size);
            height: var(--dc-disclose-button-size);
            appearance: none;
            border: none;
            font-size: 0;
            background: var(--dc-disclose-button-background);
            cursor: pointer;
            > * {
                cursor: pointer;
            }
            &:hover {
                filter: brightness(0.75);
            }
        }
        > .header-content {
            padding-inline: var(--base-size-half);
            > .header-text {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        /*
         * Mark the first element (usually the caption span) as clickable. __Note:__ This needs a
         * click handler to be implemented (see DisclosureContainer.buildUI() for an example).
         */
        /* > .header-content > :first-child {
            cursor: pointer;
        } */
        /*
         * Mark the complete header as clickable. __Note:__ This needs a click handler to be
         * implemented (see DisclosureContainer.buildUI() for an example).
         */
        /* .header-container,
        .header-container * {
            cursor: pointer;
        } */
    }
    > .content-container {
        position: relative;
    }
    &.animatable {
        > .content-container {
            overflow: hidden;
        }
        &.vertical > .content-container {
            transition: height var(--dc-disclose-animation);
        }
        &.horizontal > .content-container {
            transition: width var(--dc-disclose-animation);
        }
    }
    &.disclosed {
        &.top-start,
        &.top-end {
            .disclose {
                /* Arrow down */
                clip-path: var(--cp-arrow-down);
            }
        }
        &.bottom-start,
        &.bottom-end {
            .disclose {
                /* Arrow up */
                clip-path: var(--cp-arrow-up);
            }
        }
        &.start-top,
        &.start-bottom {
            .disclose {
                /* Arrow right */
                clip-path: var(--cp-arrow-right);
                &:dir(rtl) {
                    /* Arrow left */
                    clip-path: var(--cp-arrow-left);
                }
            }
        }
        &.end-top,
        &.end-bottom {
            .disclose {
                /* Arrow left */
                clip-path: var(--cp-arrow-left);
                &:dir(rtl) {
                    /* Arrow right */
                    clip-path: var(--cp-arrow-right);
                }
            }
        }
    }
    &.undisclosed {
        &:not(.animatable) {
            > .content-container {
                display: none;
            }
        }
        &.top-start,
        &.bottom-start {
            .disclose {
                /* Arrow right */
                clip-path: var(--cp-arrow-right);
                &:dir(rtl) {
                    /* Arrow left */
                    clip-path: var(--cp-arrow-left);
                }
            }
        }
        &.top-end,
        &.bottom-end {
            .disclose {
                /* Arrow left */
                clip-path: var(--cp-arrow-left);
                &:dir(rtl) {
                    /* Arrow right */
                    clip-path: var(--cp-arrow-right);
                }
            }
        }
        &.start-top,
        &.end-top {
            .disclose {
                /* Arrow down */
                clip-path: var(--cp-arrow-down);
            }
        }
        &.start-bottom,
        &.end-bottom {
            .disclose {
                /* Arrow up */
                clip-path: var(--cp-arrow-up);
            }
        }
    }
    &.disabled,
    &:disabled {
        color: var(--font-disabled-color);
        > .header-container {
            > .disclose {
                background: var(--dc-disclose-button-background-disabled);
            }
        }
    }
    &.top-start,
    &.top-end {
        flex-direction: column;
    }
    &.bottom-start,
    &.bottom-end {
        flex-direction: column-reverse;
    }
    &.start-top,
    &.start-bottom {
        flex-direction: row;
    }
    &.end-top,
    &.end-bottom {
        flex-direction: row-reverse;
    }
    &.top-start,
    &.bottom-start {
        > .header-container {
            flex-direction: row;
        }
    }
    &.top-end,
    &.bottom-end {
        > .header-container {
            flex-direction: row-reverse;
        }
    }
    &.start-top,
    &.end-top {
        > .header-container {
            flex-direction: column;
        }
    }
    &.start-bottom,
    &.end-bottom {
        > .header-container {
            flex-direction: column-reverse;
        }
    }
    &.top-start,
    &.top-end,
    &.bottom-start,
    &.bottom-end {
        > .header-container {
            align-items: center;
        }
    }
    &.start-top,
    &.start-bottom,
    &.end-top,
    &.end-bottom {
        > .header-container {
            align-items: center;
        }
    }
    &.end-top,
    &.end-bottom {
        .header-content {
            writing-mode: vertical-lr;
            &:dir(rtl) {
                transform: rotate(180deg);
            }
            /* transform: rotate(180deg); */
            /* transform-origin: top left 0; */
        }
    }
    &.start-top,
    &.start-bottom {
        .header-content {
            writing-mode: vertical-lr;
            &:not(:dir(rtl)) {
                transform: rotate(180deg);
            }
        }
    }
}
/* #endregion */

/* #region ../../themes/vts/LabeledComponents.css */
.labeled-component {
    --labeled-component-block-padding: var(--2px);
    --labeled-component-vertical-gap: 0.25rem;
    --labeled-component-horizontal-gap: 1rem;
    /* #region Common */
    display: flex;
    position: relative;
    padding-block: var(--labeled-component-block-padding);
    > .lc-label {
        flex-shrink: 0;
    }
    /* > .lc-component {} */
    &:first-child {
        padding-block-start: 0;
    }
    &:last-child {
        padding-block-end: 0;
    }
    &.disabled,
    &:disabled,
    &[disabled] {
        > .lc-label,
        > .lc-component {
            color: var(--font-disabled-color);
        }
    }
    /* #endregion */
    /* #region Label position top/bottom */
    /* Note for some labeled components (like `LabeledCheckbox` and `LabeledRadioButton`):
       The following styles are technically 'correct', but in practice this arrangement is not
       really usable visually. */
    &.p-top,
    &.p-bottom {
        flex-direction: column;
        justify-content: center;
        gap: var(--labeled-component-vertical-gap);
    }
    /* #endregion */
    /* #region Label position start/end */
    &.p-start,
    &.p-end {
        flex-direction: row;
        align-items: center;
        gap: var(--labeled-component-horizontal-gap);
    }
    /* #endregion */
    /* #region Label alignment */
    &.a-start > .lc-label {
        text-align: start;
    }
    &.a-center > .lc-label {
        text-align: center;
    }
    &.a-end > .lc-label {
        text-align: end;
    }
    /* #endregion */
}
.labeled-component-group {
    --labeled-component-group-border-radius: var(--border-radius-small);
    --labeled-component-group-border: var(--1px) solid var(--border-color);
    --labeled-component-group-label-padding: 0.5rem;
    /* #region Common */
    display: block;
    position: relative;
    border-radius: var(--labeled-component-group-border-radius);
    border: var(--labeled-component-group-border);
    background-color: inherit;
    > .lc-label,
    > .lc-component {
        background-color: inherit;
    }
    > .lc-label {
        position: absolute;
        padding-inline: var(--labeled-component-group-label-padding);
        line-height: 1;
    }
    > .lc-component {
        width: 100%;
        height: 100%;
    }
    &.disabled,
    &:disabled,
    &[disabled] {
        > .lc-label,
        > .lc-component {
            color: var(--font-disabled-color);
        }
    }
    /* #endregion */
    /* #region Label position top/bottom */
    &.p-top,
    &.p-bottom {
        padding-inline: 1rem;
    }
    &.p-top {
        margin-block-start: 0.5rem;
        padding-block: 1.25rem 1rem;
        > .lc-label {
            inset-block-start: -0.5rem;
        }
        /* > .lc-component {
            margin-block-start: 0.5rem;
        } */
    }
    &.p-bottom {
        margin-block-end: 0.5rem;
        padding-block: 1rem 1.25rem;
        > .lc-label {
            inset-block-end: -0.5rem;
        }
        /* > .lc-component {
            margin-block-end: 0.5rem;
        } */
    }
    &.p-top.a-start,
    &.p-bottom.a-start {
        > .lc-label {
            inset-inline-start: 1rem;
        }
    }
    &.p-top.a-center,
    &.p-bottom.a-center {
        > .lc-label {
            width: fit-content;
            inset-inline-start: 0;
            inset-inline-end: 0;
            margin-inline-start: auto;
            margin-inline-end: auto;
        }
    }
    &.p-top.a-end,
    &.p-bottom.a-end {
        > .lc-label {
            inset-inline-end: 1rem;
        }
    }
    /* #endregion */
    /* #region Label position start/end */
    &.p-start,
    &.p-end {
        padding-block: 1rem;
        > .lc-label {
            writing-mode: vertical-lr;
        }
        > .lc-label:dir(rtl) {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
        }
    }
    &.p-start {
        margin-inline-start: 0.5rem;
        padding-inline: 1.5rem 1rem;
        > .lc-label {
            inset-block-start: -0.5rem;
            transform: rotate(180deg);
            &:dir(rtl) {
                transform: unset;
            }
        }
        /* > .lc-component {
            margin-inline-start: 0.5rem;
        } */
    }
    &.p-end {
        margin-inline-end: 0.5rem;
        padding-inline: 1rem 1.5rem;
        > .lc-label {
            inset-block-end: -0.5rem;
            /* Workaround for behavior in Gecko. */
            width: unset;
        }
        /* > .lc-component {
            margin-inline-end: 0.5rem;
        } */
    }
    &.p-start.a-start {
        > .lc-label:not(:dir(rtl)) {
            inset-inline-end: 1rem;
        }
        > .lc-label:dir(rtl) {
            inset-inline-start: 1rem;
        }
    }
    &.p-end.a-start {
        > .lc-label:not(:dir(rtl)) {
            inset-inline-start: 1rem;
        }
        > .lc-label:dir(rtl) {
            inset-inline-end: 1rem;
        }
    }
    &.p-start.a-center,
    &.p-end.a-center {
        > .lc-label {
            height: fit-content;
            inset-inline-start: 0;
            inset-inline-end: 0;
            margin-inline-start: auto;
            margin-inline-end: auto;
        }
    }
    &.p-start.a-end {
        > .lc-label:not(:dir(rtl)) {
            inset-inline-start: 1rem;
        }
        > .lc-label:dir(rtl) {
            inset-inline-end: 1rem;
        }
    }
    &.p-end.a-end {
        > .lc-label:not(:dir(rtl)) {
            inset-inline-end: 1rem;
        }
        > .lc-label:dir(rtl) {
            inset-inline-start: 1rem;
        }
    }
    /* #endregion */
}
/* #endregion */

/* #region ../../themes/vts/LabeledTextArea.css */
.labeled-text-area,
.vts-labeled-text-area {
    &.p-start,
    &.p-end {
        align-items: flex-start;
    }
}
/* #endregion */

/* #region ../../themes/vts/Splitter.css */
/**
 * __Important note:__ The implementation of the splitter component is partially bound to this CSS.
 * - It is assumed that `margin`, `padding` and `border-width` of the elements `start` and `end` are
 *   always `0`! Any design that relies on margins, paddings or border styles for the _content_ of
 *   the splitter must therefore only be done by designing the parts _contained_ in `start`/`end`.
 * - The names of the animations for collapsing/uncollapsing the splitter parts (see below) are
 *   mandatory since the splitter listens for the end of them and then sets/removes class names. If
 *   collapsing/uncollapsing has to be done without animations, simply set
 *   `--splitter-collapse-duration` to `0`.
 * - The variables `--splitter-collapsed-start-size` and `--splitter-collapsed-end-size` are used in
 *   the code of the splitter component, therefore these variables must not be removed or renamed.
 */
.splitter,
.vts-splitter {
    --splitter-handle: var(--black-20);
    --splitter-handle-size: var(--1px);
    --splitter-handle-bleed: var(--4px);
    --splitter-handle-bleed-size-neg: calc(-1 * var(--splitter-handle-bleed));
    --splitter-handle-bleed-border: var(--splitter-handle-bleed) solid transparent;
    --splitter-collapse-duration: 0.16s;
    --splitter-collapse-easing: ease;
    --splitter-collapse-animation: var(--splitter-collapse-duration) var(--splitter-collapse-easing) forwards;
    display: flex;
    flex-wrap: nowrap;
    /* Marker class for splitters whose `ActiveAreaSize` is absolute (not a percentage value). */
    /* &.fixed {} */
    > .start,
    > .handle,
    > .end {
        position: relative;
        margin: 0;
        padding: 0;
    }
    > .start,
    > .end {
        flex-grow: 1;
    }
    &.active-area-start > .start,
    &.active-area-end > .end {
        flex-grow: 0;
        flex-shrink: 0;
    }
    > .handle {
        flex-shrink: 0;
        flex-grow: 0;
        z-index: 1;
        touch-action: none;
        > div {
            background: var(--splitter-handle);
        }
    }
    &.start-collapsed0 > .start {
        display: none;
    }
    &.end-collapsed0 > .end {
        display: none;
    }
    &.horizontal {
        flex-direction: row;
        > .handle {
            margin-inline-start: var(--splitter-handle-bleed-size-neg);
            margin-inline-end: var(--splitter-handle-bleed-size-neg);
            border-inline-start: var(--splitter-handle-bleed-border);
            border-inline-end: var(--splitter-handle-bleed-border);
            cursor: col-resize;
            > div {
                width: var(--splitter-handle-size);
                height: 100%;
                cursor: col-resize;
            }
        }
        /* #region Collapsing */
        /* #region Collapse start */
        &.start-collapsing > .start,
        &.start-uncollapsing > .start {
            min-width: 0 !important;
            overflow-x: hidden;
        }
        &.start-collapsing.active-area-start {
            > .start {
                animation: var(--splitter-collapse-animation) hsplitter-to-0;
            }
        }
        &.start-collapsing.active-area-end {
            > .end {
                animation: var(--splitter-collapse-animation) hsplitter-to-100;
            }
        }
        &.start-uncollapsing.active-area-start {
            > .start {
                animation: var(--splitter-collapse-animation) hsplitter-from-0-to-previous;
            }
        }
        &.start-uncollapsing.active-area-end {
            > .end {
                animation: var(--splitter-collapse-animation) hsplitter-from-100-to-previous;
            }
        }
        /* #endregion */
        /* #region Collapse end */
        &.end-collapsing,
        &.end-uncollapsing {
            > .end {
                min-width: 0 !important;
                overflow-x: hidden;
            }
        }
        &.end-collapsing.active-area-start {
            > .start {
                animation: var(--splitter-collapse-animation) hsplitter-to-100;
            }
        }
        &.end-collapsing.active-area-end {
            > .end {
                animation: var(--splitter-collapse-animation) hsplitter-to-0;
            }
        }
        &.end-uncollapsing.active-area-start {
            > .start {
                animation: var(--splitter-collapse-animation) hsplitter-from-100-to-previous;
            }
        }
        &.end-uncollapsing.active-area-end {
            > .end {
                animation: var(--splitter-collapse-animation) hsplitter-from-0-to-previous;
            }
        }
        /* #endregion */
        /*
         * Both classes below are set, when one of the 'hsplitter-*' animations above has finished.
         */
        &.start-collapsed {
            > .start {
                min-width: var(--splitter-collapsed-start-size) !important;
                width: var(--splitter-collapsed-start-size) !important;
            }
            > .end {
                width: calc(100% - var(--splitter-collapsed-start-size)) !important;
            }
        }
        &.end-collapsed {
            > .start {
                width: calc(100% - var(--splitter-collapsed-end-size)) !important;
            }
            > .end {
                min-width: var(--splitter-collapsed-end-size) !important;
                width: var(--splitter-collapsed-end-size) !important;
            }
        }
        /* #endregion */
    }
    &.vertical {
        flex-direction: column;
        > .handle {
            margin-block-start: var(--splitter-handle-bleed-size-neg);
            margin-block-end: var(--splitter-handle-bleed-size-neg);
            border-block-start: var(--splitter-handle-bleed-border);
            border-block-end: var(--splitter-handle-bleed-border);
            cursor: row-resize;
            > div {
                width: 100%;
                height: var(--splitter-handle-size);
                cursor: row-resize;
            }
        }
        /* #region Collapsing */
        /* #region Collapse start */
        &.start-collapsing > .start,
        &.start-uncollapsing > .start {
            min-height: 0 !important;
            overflow-y: hidden;
        }
        &.start-collapsing.active-area-start {
            > .start {
                animation: var(--splitter-collapse-animation) vsplitter-to-0;
            }
        }
        &.start-collapsing.active-area-end {
            > .end {
                animation: var(--splitter-collapse-animation) vsplitter-to-100;
            }
        }
        &.start-uncollapsing.active-area-start {
            > .start {
                animation: var(--splitter-collapse-animation) vsplitter-from-0-to-previous;
            }
        }
        &.start-uncollapsing.active-area-end {
            > .end {
                animation: var(--splitter-collapse-animation) vsplitter-from-100-to-previous;
            }
        }
        /* #endregion */
        /* #region Collapse end */
        &.end-collapsing,
        &.end-uncollapsing {
            > .end {
                min-height: 0 !important;
                overflow-y: hidden;
            }
        }
        &.end-collapsing.active-area-start {
            > .start {
                animation: var(--splitter-collapse-animation) vsplitter-to-100;
            }
        }
        &.end-collapsing.active-area-end {
            > .end {
                animation: var(--splitter-collapse-animation) vsplitter-to-0;
            }
        }
        &.end-uncollapsing.active-area-start {
            > .start {
                animation: var(--splitter-collapse-animation) vsplitter-from-100-to-previous;
            }
        }
        &.end-uncollapsing.active-area-end {
            > .end {
                animation: var(--splitter-collapse-animation) vsplitter-from-0-to-previous;
            }
        }
        /* #endregion */
        /*
         * Both classes below are set, when one of the 'vsplitter-*' animations above has finished.
         */
        &.start-collapsed {
            > .start {
                /* display: none; */
                min-height: var(--splitter-collapsed-start-size) !important;
                height: var(--splitter-collapsed-start-size) !important;
            }
            > .end {
                height: calc(100% - var(--splitter-collapsed-start-size)) !important;
            }
        }
        &.end-collapsed {
            > .start {
                height: calc(100% - var(--splitter-collapsed-end-size)) !important;
            }
            > .end {
                /* display: none; */
                min-height: var(--splitter-collapsed-end-size) !important;
                height: var(--splitter-collapsed-end-size) !important;
            }
        }
        /* #endregion */
    }
    &.inactive > .handle {
        pointer-events: none;
    }
    &.off > .handle {
        display: none;
    }
    &.resizing {
        /* touch-action: none; */
        /* Workarounds for a problem in WebKit. */
        &.horizontal {
            > .start,
            > .start *,
            > .end,
            > .end * {
                cursor: col-resize !important;
            }
        }
        &.vertical {
            > .start,
            > .start *,
            > .end,
            > .end * {
                cursor: row-resize !important;
            }
        }
    }
}
@keyframes hsplitter-to-0 {
    to {
        width: var(--splitter-collapsed-start-size);
    }
}
@keyframes hsplitter-to-100 {
    to {
        width: calc(100% - var(--splitter-collapsed-end-size));
    }
}
@keyframes hsplitter-from-0-to-previous {
    from {
        width: var(--splitter-collapsed-start-size);
    }
}
@keyframes hsplitter-from-100-to-previous {
    from {
        width: calc(100% - var(--splitter-collapsed-end-size));
    }
}
@keyframes vsplitter-to-0 {
    to {
        height: var(--splitter-collapsed-start-size);
    }
}
@keyframes vsplitter-to-100 {
    to {
        height: calc(100% - var(--splitter-collapsed-end-size));
    }
}
@keyframes vsplitter-from-0-to-previous {
    from {
        height: var(--splitter-collapsed-start-size);
    }
}
@keyframes vsplitter-from-100-to-previous {
    from {
        height: calc(100% - var(--splitter-collapsed-end-size));
    }
}
/* #endregion */

/* #region ../../themes/vts/StdDialog.css */
.std-dialog {
    > .content {
        display: flex;
        flex-direction: column;
        > .stddlg-title-bar {
            flex-grow: 0;
            flex-shrink: 0;
            /* #region Example settings for the title bar. */
            /* position: relative;
            inset-inline-start: calc(-1 * var(--base-size));
            inset-block-start: calc(-1 * var(--base-size));
            margin-block-end: calc(-1 * var(--base-size));
            width: calc(100% + 2 * var(--base-size));
            padding: var(--base-size-half) var(--base-size);
            background-color: lightgray;
            > p {
                margin: 0;
            } */
            /* #endregion */
        }
        > .stddlg-content {
            flex-grow: 1;
        }
        > .stddlg-btn-bar {
            flex-grow: 0;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            padding-block-start: var(--base-size);
            padding-block-end: var(--base-size-quarter);
            > .icon-button {
                flex-grow: 0;
            }
            > .separator {
                flex-grow: 1;
            }
        }
    }
    &.horizontal > .content > .stddlg-btn-bar {
        flex-direction: row;
        > .icon-button:not(:last-child) {
            margin-inline-end: var(--base-size-half);
        }
        > .separator {
            min-width: calc(var(--base-size) + var(--base-size-half));
        }
    }
    &.vertical > .content > .stddlg-btn-bar {
        flex-direction: column;
        align-items: center;
        > .icon-button:not(:last-child) {
            margin-block-end: var(--base-size-half);
        }
        > .separator {
            min-height: calc(var(--base-size) + var(--base-size-half));
        }
    }
    /* Predefined standard dialogs */
    &.confirm,
    &.msg-dlg,
    &.yes-no {
        max-width: 30rem;
        /* > .content {} */
    }
    &.query-input {
        max-width: 85vw;
        > .content {
            > input[type=text] {
                width: 100%;
            }
            > input[type=number] {
                width: 6rem;
            }
            > textarea {
                max-width: 100%;
            }
        }
    }
}
/* #endregion */

/* #region ../src/style/ContentContainer.css */
.content-container {
    width: 100%;
    height: 100%;
    padding: var(--base-size);
}
/* #endregion */

/* #region ../src/style/DataAnalysis.css */
.data-analysis {
    p {
        font-weight: bolder;
    }
}
.analysis-result-dlg {
    min-width: 22rem;
    min-height: 8.3rem;
    max-height: 30rem;
}
/* #endregion */

/* #region ../src/style/InvalidNavTarget.css */
.invalid-nav-target {
    p > code {
        font-weight: bolder;
    }
}
/* #endregion */

/* #region ../src/style/Log.css */
.log {
    padding-block-start: var(--base-size);
    height: 100%;
    > .vts-labeled-text-area {
        > .lc-label {
            font-weight: bolder;
        }
        > .lc-component {
            font-family: var(--system-monospace);
            height: 100%;
        }
    }
}
/* #endregion */

/* #region ../src/style/NavigationBar.css */
.navigation-bar {
    width: 100%;
    height: 100%;
    /* See Vars.css */
    padding: var(--base-size-half);
    background: var(--black-5);
    .header-container {
        /* See Vars.css */
        width: 1.5rem;
    }
    .content-container > nav > ul {
        margin-block: 0;
        padding-inline-start: var(--base-size-half);
        > li {
            list-style: none;
            margin-inline-start: 0;
            padding: var(--base-size-quarter);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            > a {
                padding-inline: var(--base-size-quarter);
            }
        }
    }
}
/* #endregion */

/* #region ../src/style/Overwrites.css */
/* Global overwrites for CSS variables. */
/* #endregion */