@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 300;
    src: url("roboto-300-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 300;
    src: url("roboto-300-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 300;
    src: url("roboto-300-greek.woff2") format("woff2");
    unicode-range: U+0370-03FF;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 300;
    src: url("roboto-300-greek-ext.woff2") format("woff2");
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 300;
    src: url("roboto-300-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 300;
    src: url("roboto-300-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 300;
    src: url("roboto-300-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 400;
    src: url("roboto-400-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 400;
    src: url("roboto-400-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 400;
    src: url("roboto-400-greek.woff2") format("woff2");
    unicode-range: U+0370-03FF;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 400;
    src: url("roboto-400-greek-ext.woff2") format("woff2");
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 400;
    src: url("roboto-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 400;
    src: url("roboto-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 400;
    src: url("roboto-400-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 500;
    src: url("roboto-500-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 500;
    src: url("roboto-500-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 500;
    src: url("roboto-500-greek.woff2") format("woff2");
    unicode-range: U+0370-03FF;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 500;
    src: url("roboto-500-greek-ext.woff2") format("woff2");
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 500;
    src: url("roboto-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 500;
    src: url("roboto-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 500;
    src: url("roboto-500-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 700;
    src: url("roboto-700-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 700;
    src: url("roboto-700-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 700;
    src: url("roboto-700-greek.woff2") format("woff2");
    unicode-range: U+0370-03FF;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 700;
    src: url("roboto-700-greek-ext.woff2") format("woff2");
    unicode-range: U+1F00-1FFF;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 700;
    src: url("roboto-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 700;
    src: url("roboto-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "RobotoLocal";
    font-style: normal;
    font-weight: 700;
    src: url("roboto-700-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

::-moz-selection,
::selection {
    background: var(--highlightBackgroundLight);
    color: var(--highlightFontLight);
}

[data-title]:after {
    background: var(--menuBackgroundLight);
    /*border: 1px var(--backgroundLight) solid;*/
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--backgroundLight);
    box-sizing: border-box;
    color: var(--menuFontLight);
    content: attr(data-title);
    display: none;
    font-size: 9pt;
    padding: 6px;
    position: absolute;
    text-align: center;
    white-space: normal;
    width: min-content;
    z-index: 10;
}

abbr {
    display: inline-block;
}

.arrow-down:after,
.arrow-up:after,
combobox:has(input[type=text]:only-child):after,
contextmenubutton > :first-child:after,
numericupdown > :nth-child(2):after,
numericupdown > :nth-child(3):after {
    border-style: solid;
    border-width: 0 5px;
    content: "";
    display: inline-block;
    height: 0;
    width: 0;
}

.arrow-down:after,
.arrow-up:after {
    border-color: var(--fontLight) transparent;
}

.arrow-down:after,
combobox:has(input[type=text]:only-child):after,
contextmenubutton > :first-child:after,
numericupdown > :nth-child(3):after {
    border-top-width: 6px;
}

.arrow-up:after,
numericupdown > :nth-child(2):after {
    border-bottom-width: 6px;
}

b {
    font-weight: 500;
}

    b.s0 {
        background: #ff1a2b;
    }

    b.s1 {
        background: #3fc600;
    }

    b.s2 {
        background: #ce5dc1;
    }

    b.s3 {
        background: #fee000;
    }

    b.s4 {
        background: #d8d8d8;
    }

    b.s6 {
        background: #36beef;
    }

    b.s7 {
        background: #2ed3ff;
    }

body {
    --backgroundDark: #f7f7f7;
    --backgroundLight: #fff;
    --borderDark: #c6c6c6;
    --borderDarkDark: #888;
    --borderDarkDisabled: #d6d6d6;
    --borderLight: #d6d6d6;
    --borderLightLight: #efefef;
    --buttonBackgroundLight: #efefef;
    --buttonBorderLight: #ccc;
    --buttonBorderRadius: 3px;
    --buttonDisabledBackgroundLight: #fcfcfc;
    --buttonDisabledBorderLight: #d6d6d6;
    --buttonDisabledFontLight: #999;
    --buttonFontLight: #444;
    --buttonFontLightLight: #666;
    --buttonHoverBackgroundLight: #f2f2f2;
    --buttonHoverBorderLight: #cacaca;
    --buttonPadding: 6px;
    --buttonShadow: 0 1px 1px rgba(0, 0, 0, .1);
    --buttonSize: 34px;
    --checkboxChecked: var(--fontLight);
    --checkboxCheckedDisabled: var(--buttonDisabledBorderLight);
    --checkboxSize: 18px;
    --checkboxTickSize: calc(var(--checkboxSize) + 2px);
    --checkboxUnchecked: var(--borderDark);
    --colorFail: #e30006;
    --colorPickerBlockSize: 256px;
    --colorPickerSelectorSize: 24px;
    --colorPickerStripSize: 16px;
    --colorSuccess: #5bb800;
    --contextMenuBackgroundLight: var(--inputHighlightBackgroundLight);
    --contextMenuBorderLight: var(--borderLight);
    --contextMenuFontLight: var(--inputFontLight);
    --contextMenuHighlightBackgroundLight: var(--inputSelectedBackgroundLight);
    --contextMenuHighlightFontLight: var(--inputHighlightFontLight);
    --contextMenuSeparatorLight: var(--contextMenuBorderLight);
    --dashboardTileSize: 160px;
    --dashboardTileSpace: 16px;
    --dataGridViewColumnLight: #fbfbfb;
    --dataGridViewColumnSize: 64px;
    --dataGridViewRowSize: 48px;
    --fontLight: #333;
    --gripButtonSize: 5px;
    --highlightBackgroundLight: var(--navBackground);
    --highlightFontLight: var(--navForeground);
    --inputBackgroundLight: var(--backgroundLight);
    --inputBorderLight: #ccc;
    --inputBorderRadius: 3px;
    --inputDisabledBackgroundLight: var(--buttonDisabledBackgroundLight);
    --inputDisabledBorderLight: var(--buttonDisabledBorderLight);
    --inputDisabledFontLight: var(--buttonDisabledFontLight);
    --inputDisabledPlaceholderFontLight: #bbb;
    --inputDisabledSelectedBackgroundLight: #f2f2f2;
    --inputDisabledSelectedFontLight: var(--inputDisabledFontLight);
    --inputFontLight: var(--fontLight);
    --inputFontLightLight: #666;
    --inputHighlightBackgroundLight: var(--backgroundLight);
    --inputHighlightBorderLight: var(--fontLight);
    --inputHighlightFontLight: var(--inputHighlightBorderLight);
    --inputHighlightFontLightLight: var(--inputHighlightBorderLight);
    --inputSelectedBackgroundLight: #e1e1e1;
    --inputSelectedFontLight: var(--fontLight);
    --inputHiglightPlaceholderFontLight: #aaa;
    --inputPadding: 6px;
    --inputPlaceholderFontLight: #aaa;
    --inputSize: 34px;
    --listBoxItemSize: 40px;
    --loadBackgroundColor: #eee;
    --loadBarSize: 4px;
    --loadForegroundColor: var(--navBackground);
    --loadSize: 100px;
    --menuBackgroundLight: #222;
    --menuBackgroundLightLight: #333;
    --menuFontLight: #fff;
    --messageTypeAudio: #0067b8;
    --messageTypeChat: #a23587;
    --messageTypeUnknown: #e30006;
    --messageTypeVideo: #02b800;
    --navBackground: #0067b8;
    --navButtonSize: 60px;
    --navForeground: #fff;
    --navSize: 60px;
    --notifySize: 48px;
    --numericUpDownButtonSize: 20px;
    --playerButtonSize: 40px;
    --playerWaveformDark: #00518f;
    --playerWaveformLight: #0079d6;
    --progressHigh: #fff;
    --progressLow: #555;
    --rangeGutterBackgroundLight: #ddd;
    --rangeThumbBackgroundLight: var(--navBackground);
    --rangeThumbOffset: -5px;
    --rangeThumbSize: 16px;
    --rangeTrackOffset: 2px;
    --rangeTrackSize: 6px;
    --separatorLight: #d6d6d6;
    --scenarioDeviceLabelSize: 120px;
    --scenarioDeviceSize: 48px;
    --tabDisabledLight: #ddd;
    --tabDisabledSelectedLight: #bbb;
    --tabLight: #bbb;
    --tabSelectedLight: var(--fontLight);
    --tabSize: 48px;
    --transcriptEmojiSize: 28px;
    --treeNodeOffset: 32px;
    --treeNodeSize: 40px;
    --warnBorderLight: #f00;
    --warnFontLight: #f00;
    background: var(--backgroundLight);
    color: var(--fontLight);
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

    body.loading {
        overflow: hidden;
        visibility: hidden;
    }

        /*Disable animations while the page layout is being adjusted.*/
        body.loading * {
            transition: none !important;
        }

body,
button,
contextmenu,
input[type=decimal],
input[type=number],
input[type=password],
input[type=text],
map .map-view,
select,
textarea,
.ui-datepicker-calendar > tbody > tr > td > a {
    font-family: "RobotoLocal", Arial;
    font-size: medium;
    font-weight: 300;
    -moz-text-size-adjust: none;
    text-rendering: optimizeLegibility;
}

body,
html {
    height: 100%;
    min-height: -webkit-fill-available;
    overscroll-behavior: none;
}

    body.error-unsupported {
        overflow: hidden;
    }

        body.error-unsupported > :not(.error-unsupported),
        body:not(.error-unsupported) > .error-unsupported {
            display: none;
        }

        body.error-unsupported > .error-unsupported {
            margin: 40px 0 0;
            text-align: center;
        }

    body.dragging * {
        cursor: move !important;
    }

    body.grabbing * {
        cursor: grabbing !important;
    }

    body.highlighting * {
        cursor: text !important;
    }

button,
combobox,
input[type=button],
input[type=decimal],
input[type=number],
input[type=password],
input[type=text],
listbox,
numericupdown,
select,
textarea,
textbox,
tree {
    box-sizing: border-box;
}

button,
input,
textarea {
    margin: 0;
    outline: none;
}

    button,
    input[type=button] {
        background: var(--buttonBackgroundLight);
        border-color: var(--buttonBorderLight);
        border-radius: var(--buttonBorderRadius);
        border-style: solid;
        border-width: 1px;
        color: var(--buttonFontLight);
        height: var(--buttonSize);
        padding: 0 var(--inputPadding);
    }

        button > svg {
            fill: var(--buttonFontLight);
        }

        button:not(:disabled),
        input[type=button]:not(:disabled) {
            box-shadow: var(--buttonShadow);
            cursor: pointer;
        }

        /*button:not(:disabled):hover,
        input[type=button]:not(:disabled):hover {
            background: var(--buttonHoverBackgroundLight);
            border-color: var(--buttonHoverBorderLight);
        }*/

        button:disabled,
        input[type=button]:disabled {
            background: var(--buttonDisabledBackgroundLight);
            border-color: var(--buttonDisabledBorderLight);
            color: var(--buttonDisabledFontLight);
        }

            button:disabled > svg {
                fill: var(--buttonDisabledFontLight);
            }

        button:disabled,
        input:disabled,
        select:disabled,
        textarea:disabled {
            pointer-events: none;
        }

checkbox {
    display: inline-block;
}

    checkbox > label {
        align-items: center;
        display: flex;
    }

        checkbox > label > * {
            cursor: pointer;
        }

        checkbox > label > input[type=checkbox],
        datagridview > rows r > * > input[type=checkbox] {
            appearance: none;
            border: none;
            height: 0;
            padding: 0;
            width: 0;
        }

            checkbox > label > input[type=checkbox] + b,
            .checkbox-checked,
            .checkbox-unchecked,
            datagridview > rows r > * > input[type=checkbox] + b {
                background: var(--inputBackgroundLight);
                border: 1px var(--checkboxUnchecked) solid;
                border-radius: var(--inputBorderRadius);
                box-sizing: border-box;
                cursor: pointer;
                display: inline-block;
                font-size: 0;
                height: var(--checkboxSize);
                position: relative;
                vertical-align: middle;
                width: var(--checkboxSize);
            }

            checkbox > label > input[type=checkbox]:checked + b,
            .checkbox-checked,
            datagridview > rows r > * > input[type=checkbox]:checked + b {
                background: var(--checkboxChecked);
            }

            checkbox > label > input[type=checkbox]:checked + b,
            checkbox > label > input[type=checkbox]:focus + b,
            .checkbox-checked,
            datagridview > rows r > * > input[type=checkbox]:checked + b,
            datagridview > rows r > * > input[type=checkbox]:focus + b {
                border-color: var(--checkboxChecked);
            }

                checkbox > label > input[type=checkbox]:checked + b:after,
                .checkbox-checked:after,
                datagridview > rows r > * > input[type=checkbox]:checked + b:after {
                    border-color: transparent var(--inputBackgroundLight) var(--inputBackgroundLight) transparent;
                    border-style: solid;
                    border-width: 0 2px 2px 0;
                    box-sizing: border-box;
                    content: "";
                    display: inline-block;
                    height: calc(var(--checkboxTickSize) * .45);
                    left: 50%;
                    position: absolute;
                    top: 50%;
                    transform: rotate(45deg) translate(calc(var(--checkboxTickSize) * -.3), calc(var(--checkboxTickSize) * -.1));
                    width: calc(var(--checkboxTickSize) * .3);
                }

            checkbox > label > input[type=checkbox]:checked:disabled + b,
            datagridview > rows r > * > input[type=checkbox]:checked:disabled + b {
                background: var(--checkboxCheckedDisabled);
                cursor: default;
            }

            checkbox > label > input[type=checkbox]:checked:disabled + b,
            checkbox > label > input[type=checkbox]:focus:disabled + b,
            datagridview > rows r > * > input[type=checkbox]:checked:disabled + b,
            datagridview > rows r > * > input[type=checkbox]:disabled:focus + b {
                border-color: var(--checkboxCheckedDisabled);
            }

            checkbox > label > input[type=checkbox] + b + div:not(:empty) {
                padding-left: 10px;
            }

            checkbox > label > input[type=checkbox]:disabled + b + div {
                color: var(--buttonDisabledFontLight);
                cursor: default;
            }

.close-button {
    background: none;
    border: none;
    box-shadow: none !important;
    padding: 0;
}

.close-button,
nav > :first-child {
    position: relative;
}

    .close-button:after,
    .close-button:before {
        background: var(--fontLight);
        content: "";
        display: block;
    }

    .close-button:after,
    .close-button:before,
    nav > :first-child > * {
        height: 2px;
        margin: 0 auto 8px;
        width: 26px;
    }

    .close-button:after,
    .close-button:before,
    nav > :first-child.expanded > :first-child,
    nav > :first-child.expanded > :last-child {
        position: absolute;
        width: 33px;
    }

    .close-button:after,
    nav > :first-child.expanded > :first-child {
        transform: rotate(-135deg);
    }

    .close-button:before,
    nav > :first-child.expanded > :last-child {
        transform: rotate(135deg);
    }

    nav > :first-child.expanded > :first-child,
    nav > :first-child.expanded > :last-child {
        left: 15px;
        top: 29px;
    }

combobox,
input[type=decimal],
input[type=number],
input[type=password],
input[type=text],
listbox,
numericupdown,
select,
textarea,
textbox,
tree {
    background: var(--inputBackgroundLight);
    border: 1px var(--inputBorderLight) solid;
    border-radius: var(--inputBorderRadius);
}

    combobox:focus-within:not(:has(input[type=text]:disabled:only-child)),
    input[type=decimal]:focus,
    input[type=password]:focus,
    input[type=text]:focus,
    listbox:not(.disabled):focus-within,
    numericupdown:focus-within,
    textarea:focus,
    textbox:not(.disabled):focus-within,
    tree:not(.disabled):focus-within {
        background: var(--inputHighlightBackgroundLight);
        border-color: var(--inputHighlightBorderLight);
        color: var(--inputHighlightFontLight);
    }

combobox,
textbox {
    box-sizing: border-box;
    display: block;
    cursor: text;
    font-size: 0;
}

    combobox:has(input[type=text]:only-child) {
        position: relative;
    }

        combobox:has(input[type=text]:only-child):after {
            right: 6px;
            position: absolute;
            z-index: 1;
        }

        combobox:has(input[type=text]:only-child):after,
        contextmenubutton > :first-child:after {
            border-color: var(--inputFontLight) transparent;
            margin: 0 0 2px 5px;
        }

    combobox:has(input[type=text]:disabled:only-child) {
        cursor: default;
    }

    combobox:has(input[type=text]:disabled:only-child),
    textbox[disabled] {
        background: var(--inputDisabledBackgroundLight);
        border-color: var(--inputDisabledBorderLight);
    }

        combobox:has(input[type=text]:disabled:only-child):after {
            border-bottom-color: var(--inputDisabledFontLight);
            border-top-color: var(--inputDisabledFontLight);
        }

    combobox > input[type=text]:only-child {
        border: none;
        padding: 0 16px 0 var(--inputPadding);
        width: 100%;
    }

    combobox > :nth-child(1):not(:only-child) {
        margin-top: 8px;
    }

    combobox > :nth-child(1):not(:only-child),
    combobox > :nth-child(3) {
        margin-left: 10px;
        margin-right: 10px;
    }

    combobox > :nth-child(1):not(:only-child),
    textbox > :nth-child(1) {
        display: block;
        margin-bottom: 8px;
    }

    combobox > :nth-child(1):not(:only-child),
    combobox > :nth-child(3),
    textbox > :nth-child(1),
    textbox > :nth-child(3) {
        color: var(--inputFontLightLight);
        cursor: text;
        font-size: 9pt;
        user-select: none;
    }

        combobox > :nth-child(1):not(:only-child):empty,
        combobox > :nth-child(3):empty,
        combobox > :nth-child(4):empty,
        textbox > :nth-child(1):empty,
        textbox > :nth-child(3):empty {
            display: none;
        }

    combobox > :nth-child(2) {
        border: none;
        margin: 0 10px;
        padding: 0 !important;
    }

    combobox > :nth-child(2),
    textbox > :nth-child(2) {
        border-radius: 0;
        height: unset;
    }

    combobox > :nth-child(3) {
        margin-bottom: 8px;
    }

    combobox > :nth-child(3),
    textbox > :nth-child(3) {
        text-align: right;
        visibility: hidden;
    }

    combobox > :nth-child(4) {
        max-height: 200px;
        overflow: auto;
    }

        combobox > :nth-child(4) > * {
            background: none;
            border: none;
            border-radius: 0;
            box-shadow: none;
            padding-left: 10px;
            padding-right: 10px;
        }

        combobox > :nth-child(4) > *,
        listbox > * {
            display: block;
            height: var(--listBoxItemSize);
            line-height: var(--listBoxItemSize);
            overflow: hidden;
            position: relative;
            text-align: left;
            text-overflow: ellipsis;
            width: 100%;
        }

        combobox > :nth-child(4) > *,
        listbox > *,
        tree button {
            color: var(--inputFontLight);
        }

    combobox:focus-within > :nth-child(1),
    combobox:focus-within > :nth-child(3),
    textbox:focus-within > :nth-child(1),
    textbox:focus-within > :nth-child(3) {
        color: var(--inputHighlightFontLightLight);
    }

    combobox:focus-within > :nth-child(3),
    textbox:focus-within > :nth-child(3) {
        visibility: visible;
    }

colorpicker {
    background: #fff;
    border: 1px var(--borderDarkDark) solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
    box-sizing: border-box;
    display: grid;
    padding: calc((var(--colorPickerSelectorSize) + 6px) / 2);
    position: absolute;
    user-select: none;
    z-index: 10;
}

    colorpicker > :nth-child(1) {
        height: var(--colorPickerBlockSize);
        position: relative;
        width: var(--colorPickerBlockSize);
    }

        colorpicker > :nth-child(1) > :first-child {
            height: 100%;
            width: 100%;
        }

        colorpicker > :nth-child(1) > :first-child,
        colorpicker > :nth-child(2) > :first-child,
        colorpicker > :nth-child(3) > :nth-child(1) {
            border-radius: var(--inputBorderRadius);
        }

        colorpicker > :nth-child(1) > :last-child {
            left: 0;
            position: absolute;
            top: 0;
        }

            colorpicker > :nth-child(1) > :last-child:before {
                background: var(--selectedColor);
                border: 2px #fff solid;
                border-radius: 100%;
                box-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
                box-sizing: border-box;
                content: "";
                display: block;
                height: var(--colorPickerSelectorSize);
                left: calc(var(--colorPickerSelectorSize) / -2);
                position: absolute;
                top: calc(var(--colorPickerSelectorSize) / -2);
                width: var(--colorPickerSelectorSize);
            }

    colorpicker > :nth-child(2) {
        grid-column: 2;
        margin-left: calc((var(--colorPickerSelectorSize) + var(--colorPickerStripSize)) / 2);
        position: relative;
    }

        colorpicker > :nth-child(2) > :first-child {
            height: var(--colorPickerBlockSize);
            width: var(--colorPickerStripSize);
        }

        colorpicker > :nth-child(2) > :last-child {
            position: absolute;
            top: 0;
            width: 100%;
        }

            colorpicker > :nth-child(2) > :last-child:before {
                background: var(--selectedStripColor);
                border: 2px #fff solid;
                border-radius: 100%;
                box-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
                box-sizing: border-box;
                display: block;
                content: "";
                height: var(--colorPickerSelectorSize);
                left: calc(50% - (var(--colorPickerSelectorSize) / 2));
                position: absolute;
                top: calc(var(--colorPickerSelectorSize) / -2);
                width: var(--colorPickerSelectorSize);
            }

    colorpicker > :nth-child(3) {
        display: grid;
        grid-column: 1;
        grid-row: 2;
        margin: calc((var(--colorPickerSelectorSize) + 6px) / 2) 0 0 auto;
        width: fit-content;
    }

        colorpicker > :nth-child(3) > :nth-child(1) {
            box-shadow: 0 0 1px rgba(0, 0, 0, .2);
            height: var(--inputSize);
            width: 46px;
        }

        colorpicker > :nth-child(3) > :nth-child(2) {
            grid-column: 2;
            margin-left: 12px;
            outline: none;
            width: 100px;
        }

contextmenu {
    cursor: default;
    display: none;
    position: absolute;
    z-index: 100;
    user-select: none;
}

    contextmenu > :first-child,
    contextmenu > .expanded {
        background: var(--contextMenuBackgroundLight);
        border: 1px var(--contextMenuBorderLight) solid;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
        box-sizing: border-box;
        color: var(--contextMenuFontLight);
        padding: 5px 0;
        overflow-y: auto;
    }

    contextmenu li:before {
        border-color: transparent;
        border-style: solid;
        border-width: 0 2px 2px 0;
        content: "";
        display: inline-block;
        height: 6px;
        margin: 0 10px 2px 8px;
        transform: rotate(45deg);
        width: 4px;
    }

    contextmenu li[checked]:before {
        border-bottom-color: var(--contextMenuFontLight);
        border-right-color: var(--contextMenuFontLight);
    }

    contextmenu li:hover,
    contextmenu li.hovering,
    contextmenu li.selected {
        background: var(--contextMenuHighlightBackgroundLight);
        color: var(--contextMenuHighlightFontLight);
    }

    contextmenu li > * {
        display: inline-block;
    }

    contextmenu li > :first-child {
        height: 30px;
        line-height: 30px;
        min-width: fit-content;
        width: calc(100% - 50px);
    }

    contextmenu li > :last-child:before {
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 6px;
        content: "";
        display: block;
        margin: 0 6px 0 14px;
    }

    contextmenu li > :last-child:not(:empty):before,
    contextmenu li.expanded > :last-child:before {
        border-color: transparent var(--contextMenuFontLight);
    }

    contextmenu li > :last-child > :first-child {
        display: none;
        overflow-y: auto;
        position: absolute;
    }

    contextmenu > .expanded {
        display: block;
        position: absolute;
    }

    contextmenu li.expanded > :last-child:before {
        border-color: transparent var(--contextMenuHighlightFontLight);
    }

    contextmenu ul {
        margin: 0;
        list-style: none;
        padding: 0;
    }

        contextmenu ul > hr {
            border-bottom: none;
            border-left: none;
            border-right: none;
            border-top: 1px var(--contextMenuSeparatorLight) solid;
            margin: 5px 0;
        }

            contextmenu ul > hr:first-child {
                margin-top: 0;
            }

            contextmenu ul > hr:last-child {
                margin-bottom: 0;
            }

        contextmenu ul > li {
            align-items: center;
            display: flex;
            padding: 2px 5px;
            position: relative;
            white-space: nowrap;
        }

.contextmenu-combobox > :first-child,
.contextmenu-combobox > :first-child {
    border-color: var(--inputHighlightBorderLight);
    border-radius: var(--buttonBorderRadius);
}

.contextmenu-combobox.contextmenu-align-bottom.contextmenu-align-left > :first-child,
.contextmenu-combobox.contextmenu-align-bottom.contextmenu-align-right:not(.contextmenu-oversized) > :first-child {
    border-top-left-radius: 0;
}

.contextmenu-combobox.contextmenu-align-bottom.contextmenu-align-left:not(.contextmenu-oversized) > :first-child,
.contextmenu-combobox.contextmenu-align-bottom.contextmenu-align-right > :first-child {
    border-top-right-radius: 0;
}

.contextmenu-combobox.contextmenu-align-top.contextmenu-align-left > :first-child,
.contextmenu-combobox.contextmenu-align-top.contextmenu-align-right:not(.contextmenu-oversized) > :first-child {
    border-bottom-left-radius: 0;
}

.contextmenu-combobox.contextmenu-align-top.contextmenu-align-left:not(.contextmenu-oversized) > :first-child,
.contextmenu-combobox.contextmenu-align-top.contextmenu-align-right > :first-child {
    border-bottom-right-radius: 0;
}

contextmenubutton {
    display: inline-block;
    position: relative;
    user-select: none;
}

    contextmenubutton:not(.disabled) {
        cursor: pointer;
    }

    contextmenubutton > :first-child {
        cursor: unset;
    }

    contextmenubutton.focused > :first-child,
    contextmenubutton.focused > :last-child .expanded,
    contextmenubutton.focused > :last-child > :first-child,
    contextmenubutton.focused > :last-child ul > hr {
        border-color: var(--inputHighlightBorderLight);
    }

countdown,
.countdown:before {
    background: var(--navBackground);
    display: block;
    height: 4px;
    left: var(--countdown-percent);
    opacity: var(--countdown-opacity);
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.countdown:before {
    content: "";
}

dashboard {
    display: block;
    height: 100%;
    position: relative;
    user-select: none;
    width: 100%;
}

    dashboard > tile {
        --height: 1;
        --width: 1;
        background: var(--backgroundLight);
        border-color: var(--borderLight);
        border-radius: var(--inputBorderRadius);
        border-style: solid;
        border-width: 1px;
        box-sizing: border-box;
        height: calc((var(--dashboardTileSize) * var(--height)) + (var(--dashboardTileSpace) * max((var(--height) - 1), 0)));
        padding: 12px 16px 16px;
        position: absolute;
        width: calc((var(--dashboardTileSize) * var(--width)) + (var(--dashboardTileSpace) * max((var(--width) - 1), 0)));
    }

        dashboard > tile:not(.shadow) {
            align-content: start;
            display: flex;
            flex-wrap: wrap;
            justify-content: start;
            overflow: hidden;
            transition: border-color .15s;
        }

            dashboard > tile:not(.shadow) > :nth-child(1) {
                flex: 1;
                font-weight: 400;
                transition: margin .15s;
            }

    dashboard:not(.editing) > tile:not(.shadow) > :nth-child(1) > :nth-child(1) {
        align-items: center;
        display: flex;
        height: var(--inputSize);
    }

    dashboard > tile:not(.shadow) > :nth-child(2) {
        font-size: 0;
        margin-top: 4px;
        opacity: 0;
        transition: opacity .15s;
    }

        dashboard > tile:not(.shadow) > :nth-child(2) > .icon-cancel {
            background: unset;
            border: none;
            box-shadow: none;
            height: calc(var(--buttonSize) - 14px);
            padding: 0;
            width: calc(var(--buttonSize) - 14px);
        }

            dashboard > tile:not(.shadow) > :nth-child(2) > .icon-cancel:after,
            dashboard > tile:not(.shadow) > :nth-child(2) > .icon-cancel:before {
                border-radius: 2px;
            }

    dashboard:not(.editing) > tile:not(.shadow) > :nth-child(2) > .icon-cancel {
        cursor: default;
    }

    dashboard > tile:not(.shadow) > :nth-child(3) {
        box-sizing: border-box;
        flex: 0 0 100%;
        margin-top: 10px;
        transition: margin-top .15s, padding .15s;
    }

    dashboard > tile > .report-bidirectional-bar {
        align-items: center;
        display: grid;
        font-size: 0;
        grid-template-columns: minmax(50px, 150px) minmax(80px, 300px) min-content;
    }

        dashboard > tile > .report-bidirectional-bar > :nth-child(n+1):nth-child(-n+3) {
            align-items: end;
            background: var(--backgroundLight);
            border-bottom: 1px var(--borderLight) solid;
            display: flex;
            height: 29px;
            margin-bottom: 20px;
            padding: 0 16px 18px;
            white-space: nowrap;
        }

        dashboard > tile > .report-bidirectional-bar > :nth-child(2) > b,
        dashboard > tile > .report-collide-bar > :nth-child(1) > b {
            background: #000;
            border-radius: 100%;
            display: inline-block;
            height: 10px;
            margin: 0 6px 4px 0;
            width: 10px;
        }

        dashboard > tile > .report-bidirectional-bar > :nth-child(2) > :nth-child(1),
        dashboard > tile > .report-bidirectional-bar > :nth-child(3n+2):not(:nth-child(2)) > :nth-child(1):before,
        dashboard > tile > .report-collide-bar > :nth-child(1) > :nth-child(1) {
            background: #1e85d6;
        }

        dashboard > tile > .report-bidirectional-bar > :nth-child(2) > :nth-child(2),
        dashboard > tile > .report-bidirectional-bar > :nth-child(3n+2):not(:nth-child(2)) > :nth-child(2):before,
        dashboard > tile > .report-collide-bar > :nth-child(1) > :nth-child(2) {
            background: #85d61e;
        }

        dashboard > tile > .report-bidirectional-bar > :nth-child(2) > :nth-child(2),
        dashboard > tile > .report-collide-bar > :nth-child(1) > :nth-child(2) {
            margin-left: 4px;
        }

        dashboard > tile > .report-bidirectional-bar > :nth-child(3n+1):not(:nth-child(1)) {
            word-break: break-all;
        }

        dashboard > tile > .report-bidirectional-bar > :nth-child(3n+1):not(:nth-child(1)),
        dashboard > tile > .report-bidirectional-bar > :nth-child(3n+2):not(:nth-child(2)),
        dashboard > tile > .report-bidirectional-bar > :nth-child(3n+3):not(:nth-child(3)) {
            padding: 6px 16px;
        }

            dashboard > tile > .report-bidirectional-bar > :nth-child(3n+1):not(:nth-child(1)),
            dashboard > tile > .report-bidirectional-bar > :nth-child(2),
            dashboard > tile > .report-bidirectional-bar > :nth-child(3n+2):not(:nth-child(2)) > * > :last-child,
            dashboard > tile > .report-bidirectional-bar > :nth-child(3n+3) {
                font-size: medium;
            }

        dashboard > tile > .report-bidirectional-bar > :nth-child(3n+2):not(:nth-child(2)) {
            display: flex;
            flex-direction: column;
            grid-gap: 4px;
            padding-left: 0;
            padding-right: 0;
        }

            dashboard > tile > .report-bidirectional-bar > :nth-child(3n+2):not(:nth-child(2)) > * {
                align-items: center;
                display: flex;
                line-height: 0;
            }

            dashboard > tile > .report-bidirectional-bar > :nth-child(3n+2):not(:nth-child(2)) > :before {
                content: "";
                display: inline-block;
                height: 18px;
                margin-right: 8px;
                min-width: 1px;
                width: calc((var(--percent) * 1%) - (var(--labelSize) + 8px));
            }

            dashboard > tile > .report-bidirectional-bar > :nth-child(3n+2):not(:nth-child(2)) > .empty {
                display: none;
            }

        dashboard > tile > .report-bidirectional-bar > :nth-child(3n+3):not(:nth-child(3)) {
            line-height: 0;
        }

    dashboard > tile > .report-collide-bar {
        display: grid;
        grid-template-columns: max-content 1fr max-content;
    }

        dashboard > tile > .report-collide-bar > :nth-child(1) {
            align-items: center;
            display: flex;
            grid-column: span 3;
            justify-content: center;
            margin-bottom: 20px;
        }

            dashboard > tile > .report-collide-bar > :nth-child(1) > * {
                margin-bottom: 0 !important;
            }

        dashboard > tile > .report-collide-bar > :nth-child(2) {
            margin-right: 12px;
        }

        dashboard > tile > .report-collide-bar > :nth-child(3) {
            display: flex;
        }

            dashboard > tile > .report-collide-bar > :nth-child(3) > * {
                width: calc(var(--percent) * 1%);
            }

            dashboard > tile > .report-collide-bar > :nth-child(3) > :nth-child(1) {
                background: #1e85d6;
            }

            dashboard > tile > .report-collide-bar > :nth-child(3) > :nth-child(1),
            dashboard > tile > .report-collide-bar > :nth-child(3) > :nth-child(2) {
                height: 18px;
            }

            dashboard > tile > .report-collide-bar > :nth-child(3) > :nth-child(2) {
                background: #85d61e;
            }

        dashboard > tile > .report-collide-bar > :nth-child(4) {
            margin-left: 12px;
        }

    dashboard > tile > .report-data {
        display: grid;
    }

    dashboard > tile > .report-score-bar > :nth-child(1) {
        align-items: start;
        display: flex;
        flex-wrap: wrap;
        grid-gap: 16px;
    }

        dashboard > tile > .report-score-bar > :nth-child(1):not(:empty) {
            border-bottom: 1px var(--borderLight) solid;
            margin: 10px 0 18px;
            padding-bottom: 24px;
        }

        dashboard > tile > .report-score-bar > :nth-child(1) > :before {
            border-radius: 100%;
            content: "";
            display: inline-block;
            height: 10px;
            margin-right: 6px;
            width: 10px;
        }

    dashboard > tile > .report-score-bar > :nth-child(2) {
        align-items: center;
        display: grid;
        grid-template-columns: auto 1fr;
        width: 100%;
    }

        dashboard > tile > .report-score-bar > :nth-child(2) > :nth-child(2n+1) {
            align-items: center;
            display: flex;
            white-space: nowrap;
        }

        dashboard > tile > .report-score-bar > :nth-child(2) > :nth-child(2n+2) {
            border-left: 1px var(--borderLight) solid;
            display: grid;
            grid-gap: 4px;
            grid-template-columns: 100%;
            margin-left: 16px;
            padding: 6px 0 6px 6px;
            width: 100%;
        }

            dashboard > tile > .report-score-bar > :nth-child(2) > :nth-child(2n+2) > * {
                display: flex;
                width: 100%;
            }

                dashboard > tile > .report-score-bar > :nth-child(2) > :nth-child(2n+2) > * > :last-child {
                    font-size: 11pt;
                }

            dashboard > tile > .report-score-bar > :nth-child(2) > :nth-child(2n+2) > :not(.empty):before {
                content: "";
                display: block;
                height: 18px;
                margin-right: 8px;
                width: calc((var(--percent) * 1%) - (var(--labelSize) + 30px));
            }

        dashboard > tile > .report-score-bar > :nth-child(2) > :nth-child(1) {
            padding-bottom: 6px;
        }

        dashboard > tile > .report-score-bar > :nth-child(2) > :nth-child(2) {
            padding-top: 0;
        }

        dashboard > tile > .report-score-bar > :nth-child(2) > :nth-last-child(1) {
            padding-bottom: 0;
        }

        dashboard > tile > .report-score-bar > :nth-child(2) > :nth-last-child(2) {
            padding-top: 8px;
        }

    dashboard > tile > .report-tag-cloud {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        font-size: 10pt;
        grid-gap: 12px;
        justify-content: center;
    }

        dashboard > tile > .report-tag-cloud > * {
            font-size: calc(var(--size) * 1%);
        }

            dashboard > tile > .report-tag-cloud > * > sup {
                font-size: 10pt;
                display: inline-block;
                margin-left: 4px;
            }

    dashboard > .moving {
        z-index: 2;
    }

    dashboard > .shadow {
        background: rgba(0, 0, 0, .15);
        border: none;
        display: block;
        z-index: 1;
    }

    dashboard.editing > tile:not(.shadow) {
        border-color: var(--borderLight);
        cursor: move;
    }

        dashboard.editing > tile:not(.shadow) > :nth-child(1) > :nth-child(1),
        dashboard:not(.editing) > tile:not(.shadow) > :nth-child(1) > :nth-child(2) {
            display: none;
        }

        dashboard.editing > tile:not(.shadow) > :nth-child(1) > :nth-child(2) {
            margin-top: 4px;
            padding-left: 8px;
            padding-right: 8px;
            width: calc(100% - 24px);
        }

        dashboard.editing > tile:not(.shadow) > :nth-child(2) {
            opacity: 1;
        }

        dashboard.editing > tile:not(.shadow) > :nth-child(3) {
            margin-top: 16px;
        }

datagridview {
    display: block;
    font-size: 0;
    position: relative;
}

    datagridview,
    datagridview > rows {
        background: var(--backgroundLight);
    }

        datagridview > cols {
            background: var(--dataGridViewColumnLight);
            clear: left;
            cursor: default;
            display: block;
            min-width: fit-content;
            position: relative;
            touch-action: none;
            user-select: none;
            white-space: nowrap;
            z-index: 1;
        }

        datagridview > cols {
            border-bottom: 1px var(--borderLight) solid;
            /*box-shadow: 0 4px 4px -4px rgba(0, 0, 0, .3);*/
        }

            datagridview > cols:empty,
            datagridview > cols:empty + rows {
                background: var(--buttonDisabledBackgroundLight);
            }

                datagridview > cols:empty + rows {
                    height: 100%;
                }

            datagridview > cols > * {
                border-right: 1px var(--borderLight) solid;
                height: var(--dataGridViewColumnSize);
                line-height: var(--dataGridViewColumnSize);
                vertical-align: middle;
            }

            datagridview > cols > .arrow-down:after,
            datagridview > cols > .arrow-up:after {
                margin: 0 0 2px 5px;
            }

            datagridview > cols > .arrow-down:empty:after,
            datagridview > cols > .arrow-up:empty:after {
                margin-left: 0;
            }

            datagridview > cols > *,
            datagridview > rows > r > * {
                font-size: medium;
                overflow: hidden;
                padding: 0 16px;
                position: relative;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            datagridview > cols > * {
                display: inline-block;
            }

            datagridview > cols > [data-resizable=true]:before,
            datagridview > cols > :not([data-resizable]):before {
                bottom: 0;
                content: "";
                cursor: col-resize;
                display: block;
                position: absolute;
                right: 0;
                top: 0;
                width: 16px;
            }

            datagridview > cols > .moving {
                background: rgba(0, 0, 0, .1);
                border-right-color: rgba(0, 0, 0, .2);
                cursor: move;
                opacity: .7;
                position: absolute;
                top: 0;
                z-index: 1;
            }

            datagridview > cols > m {
                display: none;
            }

        datagridview > input {
            display: none;
        }

        datagridview > rows {
            display: block;
            user-select: none;
            min-width: fit-content;
            width: 100%;
        }

            datagridview > rows > r {
                display: block;
                white-space: nowrap;
            }

                datagridview > rows > r,
                datagridview > rows > r > * {
                    height: var(--dataGridViewRowSize);
                }

                    datagridview > rows > r > * {
                        border-right: 1px transparent solid;
                        display: inline-block;
                        line-height: var(--dataGridViewRowSize);
                        /*align-items: center;
                        border-right: 1px transparent solid;
                        display: inline-flex;
                        vertical-align: top;*/
                    }

                        datagridview > rows > r > * > input[type=number],
                        datagridview > rows > r > * > input[type=text],
                        datagridview > rows > r > * > select {
                            width: 100%;
                        }

            datagridview > rows > .new,
            datagridview > rows > .new-expiring {
                background: #fffee0;
            }

            datagridview > rows > .selected {
                background: var(--inputSelectedBackgroundLight);
                color: var(--inputSelectedFontLight);
            }

/*datagridview > rows .selected > .type-audio:before {
                background: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.8%2C25.5L8.3%2C18H0.8V8h7.6l8.4-7.5V25.5z M19.8%2C1v3c4.7%2C0.3%2C8.5%2C4.2%2C8.5%2C9c0%2C4.8-3.8%2C8.7-8.5%2C9v3 c6.4-0.3%2C11.5-5.5%2C11.5-12C31.3%2C6.6%2C26.1%2C1.3%2C19.8%2C1z M19.8%2C7v3c1.4%2C0.2%2C2.5%2C1.5%2C2.5%2C2.9s-1.1%2C2.7-2.5%2C2.9v3c3.1-0.3%2C5.5-2.8%2C5.5-6 S22.8%2C7.3%2C19.8%2C7z' fill='%23777'/%3E%3C/svg%3E") no-repeat;
            }*/

.datetime {
    border-color: var(--inputHighlightBorderLight) !important;
    border-radius: 0 var(--inputBorderRadius) var(--inputBorderRadius) var(--inputBorderRadius);
}

datetime > input {
    text-align: center;
}

datetime > :first-child,
.time-format-standard datetime > :last-child {
    width: 110px;
}

datetime > :last-child {
    margin-left: 8px;
    overscroll-behavior: none;
    width: 100px;
}

datetime.focused > :first-child {
    border-color: var(--inputHighlightBorderLight);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.grip {
    display: inline-flex;
    flex-direction: column;
    grid-gap: 3px;
    justify-content: center;
}

    .grip > * {
        border: none;
        border-radius: 100%;
        height: var(--gripButtonSize);
        margin: 0 0 0 .5px;
        width: var(--gripButtonSize);
    }

groups > .expanded > :first-child > :first-child:before {
    transform: rotate(90deg);
}

groups {
    display: block;
}

    groups > :not(:last-child) {
        margin-bottom: 16px;
    }

    groups > g {
        display: block;
    }

        groups > g > :first-child {
            align-items: center;
            display: flex;
        }

            groups > g > :first-child > :first-child {
                cursor: pointer;
                display: inline-block;
                margin: 0 10px 0 4px;
                vertical-align: middle;
            }

                groups > g > :first-child > :first-child:before {
                    border-color: transparent var(--inputFontLight);
                    border-width: 5px 0 5px 6px;
                    border-style: solid;
                    content: "";
                    display: inline-block;
                    height: 0;
                    margin-bottom: 1px;
                    transform-origin: center;
                    transition: transform .25s;
                    width: 0;
                }

            groups > g > :first-child > :last-child {
                background: none;
                border: none;
                box-shadow: none;
                color: var(--inputFontLight);
                flex: 1;
                font-size: large;
                font-weight: 400;
                height: auto;
                padding: 0;
                text-align: left;
                white-space: normal;
                word-break: break-all;
            }

.hidden {
    appearance: none;
    height: 0;
    width: 0;
}

i.s0 {
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' fill='%23ff1a2b' r='16'/%3E%3Cpath d='M13.4%2C11.7c-1%2C0-2.4-0.2-3.6-1C8.5%2C10%2C7.6%2C8.9%2C7.1%2C8C6.9%2C7.6%2C6.3%2C8.1%2C6.3%2C8.6c0.1%2C1.5%2C1%2C2.9%2C2.4%2C3.8 c0.1%2C0%2C0.1%2C0.1%2C0.2%2C0.1c-0.4%2C0.6-0.6%2C1.3-0.6%2C2.2c0%2C1.8%2C1.1%2C3.3%2C2.4%2C3.3c1.3%2C0%2C2.4-1.5%2C2.4-3.3c0-0.7-0.1-1.3-0.4-1.8 c0.2-0.1%2C0.3-0.1%2C0.5-0.2C13.7%2C12.5%2C13.8%2C11.7%2C13.4%2C11.7z' fill='%23333'/%3E%3Cpath d='M18.6%2C11.7c1%2C0%2C2.4-0.2%2C3.6-1c1.3-0.8%2C2.1-1.8%2C2.6-2.7c0.2-0.4%2C0.8%2C0.1%2C0.8%2C0.6c-0.1%2C1.5-1%2C2.9-2.4%2C3.8 c-0.1%2C0-0.1%2C0.1-0.2%2C0.1c0.4%2C0.6%2C0.6%2C1.3%2C0.6%2C2.2c0%2C1.8-1.1%2C3.3-2.4%2C3.3c-1.3%2C0-2.4-1.5-2.4-3.3c0-0.7%2C0.1-1.3%2C0.4-1.8 c-0.2-0.1-0.3-0.1-0.5-0.2C18.3%2C12.5%2C18.2%2C11.7%2C18.6%2C11.7z' fill='%23333'/%3E%3Cpath d='M22.5%2C23.8c0.9%2C0.2%2C1.4-0.8%2C0.7-1.3c-1.7-1-4.3-1.7-7.2-1.7c-2.9%2C0-5.4%2C0.7-7.1%2C1.7C8.1%2C23%2C8.7%2C24%2C9.5%2C23.8 c1.8-0.4%2C4-0.7%2C6.4-0.7C18.5%2C23.1%2C20.7%2C23.4%2C22.5%2C23.8z' fill='%23333'/%3E%3C/svg%3E");
}

i.s1 {
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' fill='%233fc600' r='16'/%3E%3Cpath d='M13.7%2C15c0%2C1.8-1.1%2C3.3-2.4%2C3.3S8.8%2C16.8%2C8.8%2C15c0-1.8%2C1.1-3.3%2C2.4-3.3S13.7%2C13.2%2C13.7%2C15z' fill='%23333'/%3E%3Cpath d='M7.4%2C8.6c-0.8%2C0-0.5%2C1.6%2C0.3%2C1.8c1%2C0.2%2C2.2%2C0.1%2C3.2-0.4c1.1-0.5%2C1.9-1.2%2C2.5-2.1c0.5-0.7-0.5-2-1.1-1.4 C11.7%2C7%2C10.9%2C7.6%2C9.9%2C8C9%2C8.4%2C8.2%2C8.5%2C7.4%2C8.6z' fill='%23333'/%3E%3Cpath d='M18.3%2C15c0%2C1.8%2C1.1%2C3.3%2C2.4%2C3.3s2.4-1.5%2C2.4-3.3c0-1.8-1.1-3.3-2.4-3.3S18.3%2C13.2%2C18.3%2C15z' fill='%23333'/%3E%3Cpath d='M24.8%2C8.6c0.8%2C0%2C0.5%2C1.6-0.3%2C1.8c-1%2C0.2-2.2%2C0.1-3.2-0.4c-1.1-0.5-1.9-1.2-2.5-2.1c-0.5-0.7%2C0.5-2%2C1.1-1.4 C20.5%2C7%2C21.3%2C7.6%2C22.2%2C8C23.1%2C8.4%2C24%2C8.5%2C24.8%2C8.6z' fill='%23333'/%3E%3Cpath d='M25.1%2C20c-0.1-0.3-0.5-0.6-0.9-0.6c-0.1%2C0-0.1%2C0-0.2%2C0c-0.9%2C0.4-1.7%2C1.1-2.2%2C1.9c-1.6-0.8-3.6-1.2-5.7-1.2 c-2%2C0-4%2C0.4-5.6%2C1.1v0c-0.6-0.8-1.3-1.5-2.2-1.9c-0.1%2C0-0.1%2C0-0.2%2C0c-0.4%2C0-0.8%2C0.3-0.9%2C0.6c-0.1%2C0.2%2C0%2C0.2%2C0.1%2C0.3 c0.8%2C0.6%2C1.5%2C1.3%2C2%2C2.1c0.5%2C0.8%2C0.8%2C1.6%2C1%2C2.6c0%2C0.1%2C0%2C0.2%2C0.3%2C0.2c0.4%2C0%2C0.9-0.3%2C0.9-0.7c0-0.6-0.1-1.1-0.2-1.7 c1.5-0.3%2C3.1-0.4%2C4.6-0.4l0.2%2C0c1.7%2C0%2C3.4%2C0.2%2C5%2C0.5c-0.2%2C0.5-0.2%2C1.1-0.2%2C1.6c0%2C0.4%2C0.5%2C0.7%2C0.9%2C0.7c0.3%2C0%2C0.3-0.1%2C0.3-0.2 c0.2-0.9%2C0.5-1.8%2C1-2.6c0.5-0.8%2C1.2-1.6%2C2-2.1C25%2C20.3%2C25.1%2C20.2%2C25.1%2C20z' fill='%23333'/%3E%3C/svg%3E");
}

i.s2 {
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' fill='%23ce5dc1' r='16'/%3E%3Cpath d='M13.4%2C13.7c0%2C1.8-1.1%2C3.3-2.4%2C3.3s-2.4-1.5-2.4-3.3s1.1-3.3%2C2.4-3.3S13.4%2C11.9%2C13.4%2C13.7z' fill='%23333'/%3E%3Cpath d='M7.1%2C7.3c-0.8%2C0-0.5%2C1.6%2C0.3%2C1.8c1%2C0.2%2C2.2%2C0.1%2C3.2-0.4c1.1-0.5%2C1.9-1.2%2C2.5-2.1c0.5-0.7-0.5-2-1.1-1.4 s-1.4%2C1.2-2.3%2C1.6C8.8%2C7.1%2C7.9%2C7.3%2C7.1%2C7.3z' fill='%23333'/%3E%3Cpath d='M18.6%2C13.7c0%2C1.8%2C1.1%2C3.3%2C2.4%2C3.3s2.4-1.5%2C2.4-3.3s-1.1-3.3-2.4-3.3C19.7%2C10.4%2C18.6%2C11.9%2C18.6%2C13.7z' fill='%23333'/%3E%3Cpath d='M24.9%2C7.3c0.8%2C0%2C0.5%2C1.6-0.3%2C1.8c-1%2C0.2-2.2%2C0.1-3.2-0.4c-1.1-0.5-1.9-1.2-2.5-2.1c-0.5-0.7%2C0.5-2%2C1.1-1.4 s1.4%2C1.2%2C2.3%2C1.6C23.2%2C7.1%2C24.1%2C7.3%2C24.9%2C7.3z' fill='%23333'/%3E%3Cpath d='M22.7%2C25.5c1%2C0%2C1.6-1.2%2C1.1-2.2c-1.5-2.7-4.5-4.5-7.8-4.5s-6.3%2C1.8-7.8%2C4.5c-0.5%2C0.9%2C0.1%2C2.2%2C1.1%2C2.2 c1.9-0.4%2C4.2-0.6%2C6.8-0.6C18.6%2C24.8%2C20.9%2C25.1%2C22.7%2C25.5z' fill='%23333'/%3E%3C/svg%3E");
}

i.s3 {
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' fill='%23fee000' r='16'/%3E%3Cpath d='M12.78%2C12c0%2C1.84-1.09%2C3.33-2.43%2C3.33S7.92%2C13.84%2C7.92%2C12c0-1.84%2C1.09-3.33%2C2.43-3.33S12.78%2C10.16%2C12.78%2C12z ' fill='%23555'/%3E%3Cpath d='M24.08%2C12c0%2C1.84-1.09%2C3.33-2.43%2C3.33c-1.34%2C0-2.43-1.49-2.43-3.33c0-1.84%2C1.09-3.33%2C2.43-3.33 C22.99%2C8.67%2C24.08%2C10.16%2C24.08%2C12z' fill='%23555'/%3E%3Cpath d='M9.25%2C19.33c-0.97%2C0-1.6%2C1.23-1.07%2C2.17C9.71%2C24.18%2C12.64%2C26%2C16%2C26s6.29-1.82%2C7.82-4.5 c0.53-0.93-0.1-2.17-1.07-2.17c-1.91%2C0.37-4.21%2C0.65-6.81%2C0.64C13.39%2C19.97%2C11.14%2C19.69%2C9.25%2C19.33z' fill='%23555'/%3E%3C/svg%3E");
}

i.s4 {
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' fill='%23d8d8d8' r='16'/%3E%3Cpath d='M13.3%2C12c0%2C1.8-1.1%2C3.3-2.4%2C3.3S8.4%2C13.8%2C8.4%2C12c0-1.8%2C1.1-3.3%2C2.4-3.3S13.3%2C10.2%2C13.3%2C12z' fill='%23555'/%3E%3Cpath d='M23.6%2C12c0%2C1.8-1.1%2C3.3-2.4%2C3.3c-1.3%2C0-2.4-1.5-2.4-3.3c0-1.8%2C1.1-3.3%2C2.4-3.3C22.5%2C8.7%2C23.6%2C10.2%2C23.6%2C12z' fill='%23555'/%3E%3Cpath d='M22%2C23H10c-0.8%2C0-1.5-0.7-1.5-1.5v0c0-0.8%2C0.7-1.5%2C1.5-1.5h12c0.8%2C0%2C1.5%2C0.7%2C1.5%2C1.5v0 C23.5%2C22.3%2C22.8%2C23%2C22%2C23z' fill='%23555'/%3E%3C/svg%3E");
}

i.s6 {
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' fill='%2336beef' r='16'/%3E%3Cpath d='M14%2C8.5c0.3-0.8-0.8-1.7-1.3-1.1C12%2C8.2%2C11.1%2C9.1%2C10%2C9.7C9.8%2C9.8%2C9.6%2C9.9%2C9.5%2C10c-1%2C0.5-2.1%2C0.9-3%2C1 c-0.9%2C0.2-0.6%2C1.5%2C0.3%2C1.7c0.5%2C0.1%2C0.9%2C0.1%2C1.4%2C0c0%2C0.1%2C0%2C0.1%2C0%2C0.2c0%2C1.8%2C1.1%2C3.3%2C2.4%2C3.3c1.3%2C0%2C2.4-1.5%2C2.4-3.3 c0-0.8-0.2-1.6-0.6-2.2C13.1%2C10.1%2C13.7%2C9.3%2C14%2C8.5z' fill='%23333'/%3E%3Cpath d='M18%2C8.5c-0.3-0.8%2C0.8-1.7%2C1.3-1.1C20%2C8.2%2C20.9%2C9.1%2C22%2C9.7c0.2%2C0.1%2C0.3%2C0.1%2C0.5%2C0.3c1%2C0.5%2C2.1%2C0.9%2C3%2C1 c0.9%2C0.2%2C0.6%2C1.5-0.3%2C1.7c-0.5%2C0.1-0.9%2C0.1-1.4%2C0c0%2C0.1%2C0%2C0.1%2C0%2C0.2c0%2C1.8-1.1%2C3.3-2.4%2C3.3c-1.3%2C0-2.4-1.5-2.4-3.3 c0-0.8%2C0.2-1.6%2C0.6-2.2C18.9%2C10.1%2C18.3%2C9.3%2C18%2C8.5z' fill='%23333'/%3E%3Cpath d='M22.8%2C23.6c1%2C0.1%2C1.3-1.2%2C0.5-1.6c-1.7-0.8-4.3-1.4-7.2-1.4c-2.9%2C0-5.5%2C0.5-7.2%2C1.4 c-0.9%2C0.4-0.5%2C1.7%2C0.5%2C1.6c2-0.3%2C4.3-0.5%2C6.8-0.5C18.5%2C23.1%2C20.8%2C23.3%2C22.8%2C23.6z' fill='%23333'/%3E%3C/svg%3E");
}

i.s7 {
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' fill='%232ed3ff' r='16'/%3E%3Cpath d='M12.8%2C7.4c0.8%2C0%2C0.5-1.6-0.3-1.8c-1-0.2-2.2-0.1-3.2%2C0.4C8.2%2C6.5%2C7.4%2C7.2%2C6.8%2C8.1c-0.5%2C0.7%2C0.5%2C2%2C1.1%2C1.4 c0.6-0.6%2C1.4-1.2%2C2.3-1.6C11.1%2C7.6%2C12%2C7.4%2C12.8%2C7.4z' fill='%23333'/%3E%3Cpath d='M19.2%2C7.4c-0.8%2C0-0.5-1.6%2C0.3-1.8c1-0.2%2C2.2-0.1%2C3.2%2C0.4c1.1%2C0.5%2C1.9%2C1.2%2C2.5%2C2.1c0.5%2C0.7-0.5%2C2-1.1%2C1.4 c-0.6-0.6-1.4-1.2-2.3-1.6C20.9%2C7.6%2C20%2C7.4%2C19.2%2C7.4z' fill='%23333'/%3E%3Cpath d='M13.6%2C14c0%2C1.7-1%2C3.1-2.2%2C3.1S9.1%2C15.7%2C9.1%2C14s1-3.1%2C2.2-3.1S13.6%2C12.4%2C13.6%2C14z' fill='%23333'/%3E%3Cpath d='M18.4%2C14c0%2C1.7%2C1%2C3.1%2C2.2%2C3.1s2.2-1.4%2C2.2-3.1s-1-3.1-2.2-3.1C19.4%2C11%2C18.4%2C12.4%2C18.4%2C14z' fill='%23333'/%3E%3Cellipse cx='16' cy='22' fill='%23333' rx='3.3' ry='3.8'/%3E%3C/svg%3E");
}

icon,
.icon {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

    icon:after,
    icon:before,
    .icon:after,
    .icon:before {
        background-color: var(--buttonFontLight);
        content: "";
        display: inline-block;
    }

    :disabled > icon:after,
    :disabled > icon:before,
    :disabled > .icon:after,
    :disabled > .icon:before,
    icon:disabled:after,
    icon:disabled:before,
    .icon:disabled:after,
    .icon:disabled:before {
        background-color: var(--buttonDisabledFontLight);
    }

    icon:before,
    .icon:before {
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }

.icon-add,
.icon-ok {
    position: relative;
}

    .icon-add:after {
        height: 2px !important;
        width: calc(var(--buttonSize) / 2);
    }

    .icon-add:after,
    .icon-add:before {
        position: absolute;
    }

    .icon-add:before {
        height: calc(var(--buttonSize) / 2) !important;
        width: 2px;
    }

.icon-allow,
.icon-deny {
    border-radius: 100%;
    height: 24px;
    position: relative;
    width: 24px;
}

.icon-allow {
    background: var(--colorSuccess);
}

    .icon-allow:before {
        border-bottom: 2px var(--backgroundLight) solid;
        border-left: 2px var(--backgroundLight) solid;
        box-sizing: border-box;
        content: "";
        display: block;
        height: 7px;
        left: calc(50% - 6px);
        position: absolute;
        top: calc(50% - 5px);
        transform: rotate(-45deg);
        transform-origin: center;
        width: 12px;
    }

.icon-arrow-left,
.icon-arrow-right,
.icon-arrow-up {
    position: relative;
}

    .icon-arrow-left:after,
    .icon-arrow-right:after,
    .icon-arrow-up:after {
        background: unset !important;
        border: 3px var(--buttonFontLight) solid;
        height: 10px;
        transform-origin: center;
        transform: rotate(-45deg);
        width: 10px;
    }

    .icon-arrow-left:after {
        border-bottom: none;
        border-right: none;
        right: calc(50% - 5px);
    }

    .icon-arrow-left:after,
    .icon-arrow-left:before,
    .icon-arrow-right:after,
    .icon-arrow-right:before,
    .icon-arrow-up:after,
    .icon-arrow-up:before {
        position: absolute;
    }

    .icon-arrow-right:after {
        border-left: none;
        border-top: none;
        left: calc(50% - 5px);
    }

    .icon-arrow-left:before,
    .icon-arrow-right:before {
        background-color: var(--buttonFontLight);
        height: 3px;
        left: calc(50% - 9px);
        width: 18px;
    }

    .icon-arrow-left:disabled:after,
    .icon-arrow-right:disabled:after {
        border-color: var(--buttonDisabledFontLight);
    }

    .icon-arrow-up:after {
        border-bottom: none;
        border-left: none;
        left: calc(50% - 6px);
        top: calc(50% - 8px);
    }

    .icon-arrow-up:before {
        height: 18px;
        left: calc(50% - 1px);
        width: 3px;
    }

.icon-cancel {
    position: relative;
}

    .icon-cancel:after {
        transform: rotate(45deg);
    }

    .icon-cancel:after,
    .icon-cancel:before {
        height: calc(var(--buttonSize) - 14px);
        position: absolute;
        transform-origin: center;
        width: 2px;
    }

    .icon-cancel:before {
        transform: rotate(-45deg);
    }

.icon-clear:before {
    height: 2px !important;
    width: calc(var(--buttonSize) / 2);
}

.icon-copy {
    --height: 16px;
    --left: 4px;
    --top: 2px;
    --width: 14px;
    position: relative;
}

    .icon-copy:after,
    .icon-copy:before {
        height: var(--height);
        position: absolute;
        width: var(--width);
    }

    .icon-copy:after {
        background: var(--buttonBackgroundLight);
        border: 2px var(--buttonFontLight) solid;
        box-shadow: -2px 2px 0 var(--buttonBackgroundLight);
        box-sizing: border-box;
        left: calc((50% - (var(--width) / 2)) + var(--left));
        top: calc((50% - (var(--height) / 2)) - (var(--top) + 2px));
    }

:disabled.icon-copy:after,
:disabled > .icon-copy:after {
    background: var(--buttonDisabledBackgroundLight);
    box-shadow: -2px 2px 0 var(--buttonDisabledBackgroundLight);
}

:disabled.icon-copy:after,
:disabled > .icon-copy:after {
    border-color: var(--buttonDisabledFontLight);
}

.icon-copy:before {
    background: var(--buttonFontLight);
    left: calc((50% - (var(--width) / 2)) - var(--left));
    top: calc((50% - (var(--height) / 2)) + var(--top));
}

.icon-deny {
    background: var(--colorFail);
}

    .icon-deny:after {
        transform: rotate(45deg);
    }

    .icon-deny:after,
    .icon-deny:before {
        background: var(--backgroundLight);
        content: "";
        display: block;
        height: 2px;
        left: calc(50% - 7px);
        position: absolute;
        top: calc(50% - 1px);
        transform-origin: center;
        width: 14px;
    }

    .icon-deny:before {
        transform: rotate(-45deg);
    }

.icon-exclamation > :first-child {
    border: 2px var(--menuFontLight) solid;
    border-radius: 100%;
    box-sizing: border-box;
    display: block;
    font-size: 0;
    height: 25px;
    padding: 3px 0 0 9px;
    width: 25px;
}

    .icon-exclamation > :first-child:after {
        height: 3px;
        margin-top: 2px;
    }

    .icon-exclamation > :first-child:after,
    .icon-exclamation > :first-child:before {
        background: var(--menuFontLight);
        border-radius: 1px;
        content: "";
        display: block;
        width: 3px;
    }

    .icon-exclamation > :first-child:before {
        height: 9px;
    }

.icon-ok:after {
    background: unset !important;
    border-bottom: 2px var(--buttonFontLight) solid;
    border-left: 2px var(--buttonFontLight) solid;
    height: calc((var(--buttonSize) / 4) - 2px);
    left: calc(50% - ((var(--buttonSize) / 5) + 1px));
    position: absolute;
    top: calc(50% - (var(--buttonSize) / 5));
    transform: rotate(-45deg);
    width: calc((var(--buttonSize) / 2) - 2px);
}

.icon-ok:disabled:after {
    border-bottom-color: var(--buttonDisabledFontLight);
    border-left-color: var(--buttonDisabledFontLight);
}

.icon-ok:before {
    display: none;
}

.icon-attachment-small {
    height: 18px;
    vertical-align: middle;
    width: 8px;
}

.icon-option-blur {
    shape-rendering: crispedges;
}

.icon-remove:before {
    height: 16px;
    mask-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 12 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12%2C1v2H0V1h4V0h4v1H12z M1%2C16h10l1-11.5H0L1%2C16z'/%3E%3C/svg%3E");
    width: 16px;
}

.icon-resize-large {
    display: block;
}

.icon-resize-large,
.icon-resize-medium {
    height: 22px;
    width: 28px;
}

    .icon-resize-large,
    .icon-resize-medium:before {
        background: #f00;
    }

.icon-resize-medium {
    align-items: end;
    border: 3px #f00 solid;
    box-sizing: border-box;
    display: flex;
}

    .icon-resize-medium:before {
        content: "";
        display: block;
        height: 12px;
        width: 18px;
    }

.icon-save:before {
    mask-image: url("data:image/svg+xml;utf8,%3Csvg shape-rendering='crispEdges' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13%2C0H0v16h16V3L13%2C0z M2%2C2h11v5H2V2z M14%2C14H2V9h12V14z'/%3E%3Crect height='3' width='2' x='10' y='3'/%3E%3C/svg%3E");
}

.icon-select-all {
    shape-rendering: crispedges;
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--inputBackgroundLight) inset;
}

input[type=checkbox] {
    height: 16px;
    vertical-align: middle;
    width: 16px;
}

input[type=decimal],
input[type=number],
input[type=password],
input[type=text],
numericupdown,
select {
    height: var(--inputSize);
}

input[type=decimal],
input[type=number],
input[type=password],
input[type=text],
select,
textarea {
    color: var(--inputFontLight);
}

input[type=decimal],
input[type=number],
input[type=password],
input[type=text],
select,
textarea {
    padding: 0 4px;
}

    input[type=decimal]::placeholder,
    input[type=number]::placeholder,
    input[type=password]::placeholder,
    input[type=text]::placeholder,
    textarea::placeholder {
        color: var(--inputPlaceholderFontLight);
    }

    input[type=decimal]:focus::placeholder,
    input[type=number]:focus::placeholder,
    input[type=password]::placeholder,
    input[type=text]:focus::placeholder,
    textarea:focus::placeholder {
        color: var(--inputHiglightPlaceholderFontLight);
    }

    input[type=decimal]:disabled,
    input[type=number]:disabled,
    input[type=password]:disabled,
    input[type=text]:disabled,
    numericupdown:disabled,
    select:disabled,
    textarea:disabled {
        background: var(--inputDisabledBackgroundLight);
        border-color: var(--inputBorderLight);
        color: var(--inputDisabledFontLight);
    }

        input[type=decimal]:disabled::placeholder,
        input[type=number]:disabled::placeholder,
        input[type=password]:disabled::placeholder,
        input[type=text]:disabled::placeholder,
        textarea:disabled::placeholder {
            color: var(--inputDisabledPlaceholderFontLight);
        }

listbox,
tree {
    display: block;
    cursor: default;
    overflow: auto;
    position: relative;
    user-select: none;
}

    listbox > * {
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none !important;
        padding: 0 6px;
    }

    /*listbox > .highlighted:after {
        border-color: var(--fontLight);
        border-style: dotted;
        border-width: 1px;
        bottom: 0;
        content: "";
        display: block;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    listbox > .highlighted.selected:after {
        border-color: var(--inputSelectedBackgroundLight);
        color: var(--inputSelectedFontLight);
    }*/

    listbox.disabled > *,
    tree.disabled button {
        color: var(--inputDisabledFontLight);
        cursor: default;
    }

    listbox > .selected,
    tree .selected > :nth-child(2) > button,
    tree .selected > button:nth-child(2) {
        background: var(--inputSelectedBackgroundLight);
        color: var(--inputSelectedFontLight);
    }

    listbox.disabled > .selected,
    tree.disabled .selected > :nth-child(2) > button,
    tree.disabled .selected > button:nth-child(2) {
        background: var(--inputDisabledSelectedBackgroundLight);
        color: var(--inputDisabledSelectedFontLight);
    }


    listbox.tags {
        display: flex;
        flex-wrap: wrap;
        grid-gap: 6px;
        padding: 6px;
    }

        listbox.tags > * {
            border: 1px var(--inputBorderLight) solid;
            border-radius: var(--buttonBorderRadius);
            font-size: 90%;
            line-height: unset;
            width: unset;
        }

        listbox.tags > .selected {
            border-color: var(--inputSelectedBackgroundLight);
        }

        listbox.tags.disabled > .selected {
            border-color: var(--inputDisabledSelectedBackgroundLight);
        }

        listbox.tags:not(.disabled):focus-within > :not(.selected) {
            border-color: var(--inputHighlightBorderLight);
        }

load {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
}

    load.load-marquee > :nth-child(1),
    load.load-progress > :nth-child(1),
    load:not(.load-marquee):not(.load-progress) > :nth-child(2) {
        display: none;
    }

    load > :nth-child(1) {
        height: var(--loadSize);
        transform: rotate(-90deg);
        transform-origin: center;
        width: var(--loadSize);
    }

        load > :nth-child(1) circle {
            fill: none;
            r: calc((var(--loadSize) - var(--loadBarSize)) / 2);
            stroke-width: var(--loadBarSize);
        }

        load > :nth-child(1) > :nth-child(1) {
            transform: translate(50%, 50%);
        }

            load > :nth-child(1) > :nth-child(1) > :nth-child(1) {
                stroke: var(--loadBackgroundColor);
            }

            load > :nth-child(1) > :nth-child(1) > :nth-child(2) {
                animation: load-spin 5s cubic-bezier(.8, 0, .2, 1) infinite;
                stroke: var(--loadForegroundColor);
                /*circumference = (radius * (Math.PI * 2))*/
                stroke-dasharray: calc(((var(--loadSize) - var(--loadBarSize)) / 2) * (pi * 2));
                /*offset = (circumference - (percentage * circumference))*/
                stroke-dashoffset: calc(((var(--loadSize) - var(--loadBarSize)) / 2) * (pi * 2));
            }

.load-button {
    --loadBarSize: 3px;
    --loadSize: var(--buttonSize);
}

.load-marquee > :nth-child(2) {
    height: 4px;
    position: relative;
    width: 100%;
}

    .load-marquee > :nth-child(2):after {
        animation: load-marquee 2s linear infinite;
        background: var(--loadForegroundColor);
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        width: 0;
    }

.load-progress {
    --progress: 0;
}

    .load-progress > :nth-child(2) {
        --loadBarSize: 8px;
        background: conic-gradient(var(--loadForegroundColor) calc((var(--progress) / 100) * 360deg), var(--loadBackgroundColor) calc((var(--progress) / 100) * 360deg));
        border-radius: 100%;
        height: var(--loadSize);
        position: relative;
        width: var(--loadSize);
    }

        .load-progress > :nth-child(2):after {
            background: var(--backgroundLight);
            border-radius: 100%;
            content: "";
            display: block;
            height: calc(var(--loadSize) - var(--loadBarSize));
            left: calc(var(--loadBarSize) / 2);
            position: absolute;
            top: calc(var(--loadBarSize) / 2);
            width: calc(var(--loadSize) - var(--loadBarSize));
        }

.map {
    display: flex;
    flex-direction: column;
    position: relative;
}

    .map > .tabs,
    transcript > .tabs {
        align-items: end;
        z-index: 1;
    }

    .map > .tabs {
        justify-content: end;
    }

        .map > .tabs:after,
        transcript > .tabs:after {
            background: var(--backgroundLight);
            border-top: 1px var(--borderLight) solid;
            bottom: unset;
            height: 23px;
            left: unset;
            position: relative;
            right: unset;
            top: -1px;
            width: 100%;
        }

    .map > :last-child {
        background: var(--buttonBackgroundLight);
        flex: 1;
    }

    .map .map-view {
        display: inline-block;
        max-width: 300px;
        position: absolute;
        text-align: center;
        z-index: 100;
    }

        .map .map-view > :first-child {
            background: var(--menuBackgroundLight);
            color: var(--menuFontLight);
            padding: 12px;
        }

        .map .map-view > :last-child {
            border-color: var(--menuBackgroundLight) transparent;
            border-style: solid;
            border-width: 16px 20px 0;
            margin: 0 auto;
            width: 0;
        }

    .map > tabs,
    transcript > tabs {
        background: var(--backgroundLight);
        box-sizing: border-box;
        display: block;
        position: relative;
        text-align: right;
        user-select: none;
        z-index: 1;
    }

        .map > tabs:after,
        transcript > tabs:after {
            border-top: 1px var(--borderLight) solid;
            content: "";
            display: block;
            height: 24px;
        }

        .map > tabs > *,
        transcript > tabs > * {
            border-radius: 16px 16px 0 0;
            border-color: var(--borderLight);
            border-style: solid;
            border-width: 1px 1px 0 1px;
            cursor: pointer;
            display: inline-block;
            margin-left: 3px;
            position: relative;
            top: 1px;
        }

        .map > tabs > * {
            padding: 10px 17px 8px;
        }

            .map > tabs > * > :first-child {
                height: 26px;
                width: 26px;
            }

                .map > tabs > * > :first-child > *,
                transcript > tabs > * > :first-child > * {
                    fill: var(--backgroundLight);
                }

        .map > tabs > [selected],
        transcript > tabs > [selected] {
            background: var(--backgroundLight);
        }

            .map > tabs > [selected] > :first-child > *,
            transcript > tabs > [selected] > :first-child > * {
                fill: var(--borderDark);
            }

        .map > tabs > :not([selected]),
        transcript > tabs > :not([selected]) {
            background: var(--borderLight);
            border-radius: 16px 16px 0 0;
        }

nav {
    align-items: center;
    background: var(--navBackground);
    /*box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);*/
    box-sizing: border-box;
    display: flex;
    height: var(--navSize);
    position: sticky;
    top: 0;
    z-index: 10;
}

nav {
    user-select: none;
}

nav,
.nav-menu {
    color: var(--menuFontLight);
}

    nav [data-action]:hover svg > *,
    nav :disabled svg > * {
        fill: var(--fontLight);
    }

    nav button {
        background: none;
        border: none;
        box-shadow: none !important;
        padding: 0;
    }

    nav > button,
    nav > :nth-child(3) > button {
        border-radius: 0;
        color: var(--menuFontLight);
        font-weight: 500;
        height: 100%;
    }

    nav > :disabled,
    nav > :nth-child(3) > :disabled {
        background: var(--backgroundLight);
        color: var(--fontLight);
    }

    nav > :nth-child(3) > [for] {
        font-size: 11pt;
        letter-spacing: .5px;
        text-transform: uppercase;
        white-space: nowrap;
        width: 92px;
    }

        nav > :nth-child(3) > [for] > span:only-child > svg:first-child,
        nav > :nth-child(3) > [for] > svg:first-child {
            height: 32px;
            width: 32px;
        }

        nav > :nth-child(3) > [for] > :nth-child(2) {
            display: inline-block;
        }

    nav > :nth-child(3) > [for=connect] > :last-child {
        margin-right: 3px;
    }

    nav > :nth-child(3) > [for=live] > :first-child {
        margin-left: 0;
        transition: margin-left .25s;
    }

    nav > :nth-child(3) > [for=live]:not(.nav-live-mutable) > :last-child {
        display: none;
    }

    nav svg {
        fill: var(--navForeground);
    }

    nav > button,
    nav > :nth-child(3) > button {
        flex-shrink: 0;
    }

    nav > :first-child {
        width: 64px;
    }

    nav > :first-child,
    nav > :nth-child(3),
    nav > :nth-child(4) {
        height: var(--navButtonSize);
    }

        nav > :first-child > * {
            background: var(--navForeground);
            border: none;
            transition: transform .25s;
        }

        nav > :first-child > :last-child {
            margin-bottom: 0;
        }

        nav > :first-child.expanded,
        nav .nav-notify.expanded,
        nav .nav-profile.expanded,
        .nav-menu {
            background: var(--menuBackgroundLight);
        }

            nav > :first-child.expanded > :nth-child(2) {
                display: none;
            }

    nav > :nth-child(3),
    nav > :nth-child(4) {
        display: inline-flex;
    }

    nav > :nth-child(4) {
        font-size: 0;
        margin: 0 0 0 auto;
        position: relative;
    }

        nav > :nth-child(4) > * > :last-child {
            background: var(--menuBackgroundLight);
            border: 1px rgba(0, 0, 0, .25) solid;
            border-right: none;
            border-top: none;
            box-sizing: border-box;
            color: var(--menuFontLight);
            cursor: default;
            min-width: 175px;
            position: absolute;
            right: 0;
            text-align: left;
            top: 100%;
        }

        nav > :nth-child(4) > :not(.expanded) > :last-child {
            display: none;
        }

        nav > :nth-child(4) > .nav-experimental {
            align-items: center;
            display: flex;
            height: 100%;
            justify-content: center;
        }

            nav > :nth-child(4) > .nav-experimental > :first-child {
                background: unset;
                border: none;
                display: block;
                height: 32px;
                image-rendering: crisp-edges;
                margin-bottom: 8px;
                min-width: unset;
                position: unset;
                width: 32px;
            }

        nav > :nth-child(4) > .nav-experimental,
        nav > :nth-child(4) > .nav-notify,
        nav > :nth-child(4) > .nav-profile {
            width: var(--navButtonSize);
        }

            nav > :nth-child(4) > .nav-notify > :first-child,
            nav > :nth-child(4) > .nav-profile > :first-child {
                height: 100%;
                width: 100%;
            }

            nav > :nth-child(4) > .nav-notify > :first-child {
                position: relative;
            }

                nav > :nth-child(4) > .nav-notify > :first-child > :first-child,
                nav > :nth-child(4) > .nav-profile > :first-child > :first-child {
                    height: 36px;
                    width: 36px;
                }

                    nav > :nth-child(4) > .nav-notify > :first-child > :first-child > circle,
                    nav > :nth-child(4) > .nav-notify > :first-child > :first-child > path {
                        transform: rotate(0deg);
                        transform-origin: center;
                        transition: transform .25s;
                    }

                nav > :nth-child(4) > .nav-notify > :first-child > :last-child {
                    align-items: center;
                    background: var(--colorFail);
                    border-radius: 16px;
                    box-sizing: border-box;
                    color: var(--menuFontLight);
                    display: flex;
                    font-family: tahoma;
                    font-size: small;
                    height: 18px;
                    justify-content: center;
                    min-width: 18px;
                    padding: 0 4px;
                    position: absolute;
                    right: 32px;
                    top: 8px;
                }

                    nav > :nth-child(4) > .nav-notify > :first-child > :last-child:empty {
                        display: none;
                    }

            nav > :nth-child(4) > .nav-notify > .notifications {
                --separatorLight: var(--menuFontLight);
                max-width: 100vw;
                overflow: auto;
                width: 450px;
            }

                nav > :nth-child(4) > .nav-notify > .notifications > * {
                    font-size: medium;
                }

                nav > :nth-child(4) > .nav-notify > .notifications > .notification {
                    align-items: center;
                    cursor: default;
                    display: grid;
                    grid-template-columns: min-content 1fr max-content min-content;
                    padding: 10px 0;
                    user-select: none;
                }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification:not(:last-child) {
                        border-bottom: 1px var(--separatorLight) solid;
                    }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(1) {
                        align-items: center;
                        display: flex;
                        grid-column: 1;
                        grid-row: 1;
                        height: 36px;
                        justify-content: center;
                        margin-left: 16px;
                        width: 36px;
                    }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(2) {
                        font-size: 125%;
                        grid-column: 2;
                        grid-row: 1;
                        margin-left: 12px;
                    }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(3) {
                        grid-column: 3;
                        grid-row: 1;
                        margin-left: 8px;
                    }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(4) {
                        background: none;
                        border: none;
                        box-shadow: none;
                        grid-column: 4;
                        grid-row: 1;
                        height: 26px;
                        margin: 0 12px 0 8px;
                        padding: 0;
                        width: 26px;
                    }

                        nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(4):after,
                        nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(4):before {
                            background: var(--menuFontLight);
                            left: calc(50% - 9px);
                            top: calc(50% - 1px);
                            width: 18px;
                        }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(5) {
                        grid-column: 1 / 5;
                        grid-row: 2;
                        margin: 0 20px;
                    }

                        nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(5):not(:empty) {
                            margin-bottom: 10px;
                            margin-top: 10px;
                        }

                        nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(5) > actions {
                            display: flex;
                            grid-gap: 12px;
                            margin-top: 24px;
                        }

                            nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(5) > actions > button {
                                background: var(--menuFontLight);
                                color: var(--menuBackgroundLight);
                                min-width: 125px;
                            }

                            nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(5) > .notification-api {
                                align-items: center;
                                cursor: pointer;
                                display: flex;
                                width: max-content;
                            }

                                nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(5) > .notification-api > :first-child {
                                    margin-right: 2px;
                                }

                nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-failed > :nth-child(1) > :first-child {
                    background: var(--colorFail);
                }

                nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-failed > :nth-child(1) > :first-child,
                nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-succeeded > :nth-child(1) > :first-child {
                    border-radius: 100%;
                    height: 32px;
                    position: relative;
                    width: 32px;
                }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-failed > :nth-child(1) > :first-child:after {
                        transform: rotate(45deg);
                    }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-failed > :nth-child(1) > :first-child:after,
                    nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-failed > :nth-child(1) > :first-child:before {
                        background: var(--menuBackgroundLight);
                        height: 3px;
                        left: calc(50% - 11px);
                        top: calc(50% - 1px);
                        width: 22px;
                    }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-failed > :nth-child(1) > :first-child:after,
                    nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-failed > :nth-child(1) > :first-child:before,
                    nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-succeeded > :nth-child(1) > :first-child:after {
                        content: "";
                        display: block;
                        position: absolute;
                        transform-origin: center;
                    }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-failed > :nth-child(1) > :first-child:before {
                        transform: rotate(-45deg);
                    }

                nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-progress > :nth-child(1) > :first-child {
                    background: conic-gradient(var(--progressHigh) calc((var(--progress) / 100) * 360deg), var(--progressLow) calc((var(--progress) / 100) * 360deg));
                    border-radius: 100%;
                    height: 32px;
                    width: 32px;
                    position: relative;
                }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-progress > :nth-child(1) > :first-child:after {
                        --size: 3px;
                        background: var(--menuBackgroundLight);
                        border-radius: 100%;
                        content: "";
                        display: block;
                        height: calc(100% - (var(--size) * 2));
                        left: var(--size);
                        position: absolute;
                        top: var(--size);
                        width: calc(100% - (var(--size) * 2));
                    }

                /*nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-progress > :nth-child(1) > :first-child {
                    animation-delay: .5s;
                    position: relative;
                }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-progress > :nth-child(1) > :first-child,
                    nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-progress > :nth-child(1) > :first-child:after,
                    nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-progress > :nth-child(1) > :first-child:before {
                        animation-direction: alternate;
                        animation-duration: 1s;
                        animation-iteration-count: infinite;
                        animation-name: notification-progress-tick;
                        animation-timing-function: linear;
                        background-color: var(--progressLow);
                        border-radius: 5px;
                        height: 5px;
                        width: 5px;
                    }

                        nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-progress > :nth-child(1) > :first-child:after {
                            animation-delay: 1s;
                            left: 10px;
                        }

                        nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-progress > :nth-child(1) > :first-child:after,
                        nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-progress > :nth-child(1) > :first-child:before {
                            content: "";
                            display: block;
                            position: absolute;
                            top: 0;
                        }

                        nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-progress > :nth-child(1) > :first-child:before {
                            animation-delay: 0s;
                            left: -10px;
                        }*/
                nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-progress > :nth-child(3) {
                    margin-right: 20px;
                }

                nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-progress > :nth-child(4) {
                    display: none;
                }

                nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-succeeded > :nth-child(1) > :first-child {
                    background: var(--colorSuccess);
                }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notification-status-succeeded > :nth-child(1) > :first-child:after {
                        border-color: var(--menuBackgroundLight);
                        box-sizing: border-box;
                        border-style: solid;
                        border-width: 0 0 3px 3px;
                        height: 10px;
                        left: calc(50% - 8px);
                        top: calc(50% - 7px);
                        transform: rotate(-45deg);
                        width: 16px;
                    }

                nav > :nth-child(4) > .nav-notify > .notifications > .notification .icon-copy {
                    --buttonBackgroundLight: var(--menuBackgroundLight);
                    --buttonFontLight: var(--menuFontLight);
                    height: var(--buttonSize);
                    width: var(--buttonSize);
                }

                nav > :nth-child(4) > .nav-notify > .notifications > .notifications-manage {
                    align-items: center;
                    background: var(--menuBackgroundLight);
                    border-bottom: 1px var(--separatorLight) solid;
                    display: flex;
                    height: 48px;
                    justify-content: end;
                    padding: 0 16px;
                    position: sticky;
                    top: 0;
                    z-index: 1;
                }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notifications-manage > button {
                        color: var(--menuFontLight);
                        text-decoration: underline;
                    }

                nav > :nth-child(4) > .nav-notify > .notifications > .notifications-none {
                    align-content: center;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    height: 145px;
                    margin-left: 12px;
                }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notifications-none > :first-child {
                        height: 48px;
                        width: 48px;
                    }

                    nav > :nth-child(4) > .nav-notify > .notifications > .notifications-none > :last-child {
                        flex: 1 0 100%;
                        margin-top: 10px;
                        text-align: center;
                    }

                nav > :nth-child(4) > .nav-notify > .notifications-empty > .notifications-manage,
                nav > :nth-child(4) > .nav-notify > .notifications:not(.notifications-empty) > .notifications-none {
                    display: none;
                }

        nav > :nth-child(4) > .nav-notify-ring > :first-child > :first-child > circle {
            animation: nav-notify-ring 5s ease-in-out;
            animation-delay: .05s;
        }

        nav > :nth-child(4) > .nav-notify-ring > :first-child > :first-child > path {
            animation: nav-notify-ring 5s ease-in-out;
        }

        nav > :nth-child(4) > .nav-profile > :last-child > :first-child {
            box-sizing: border-box;
            display: flex;
        }

            nav > :nth-child(4) > .nav-profile > :last-child > :first-child > * {
                align-items: center;
                display: inline-flex;
                height: 48px;
            }

            nav > :nth-child(4) > .nav-profile > :last-child > :first-child > [data-action] {
                cursor: pointer;
            }

            nav > :nth-child(4) > .nav-profile > :last-child > :first-child > :first-child {
                flex: 1;
                justify-content: start;
                padding: 0 24px 0 16px;
                white-space: nowrap;
            }

                nav > :nth-child(4) > .nav-profile > :last-child > :first-child > :first-child > svg {
                    height: 28px;
                    margin: 0 8px 0 4px;
                    width: 28px;
                }

                nav > :nth-child(4) > .nav-profile > :last-child > :first-child > :first-child > :last-child {
                    font-weight: 500;
                    font-size: medium;
                }

            nav > :nth-child(4) > .nav-profile > :last-child > :first-child > :last-child {
                padding: 0 20px 0 16px;
            }

                nav > :nth-child(4) > .nav-profile > :last-child > :first-child > :last-child > :first-child {
                    height: 24px;
                    width: 24px;
                }

            nav > :nth-child(4) > .nav-profile > :last-child > :first-child > [data-action]:hover,
            nav > :nth-child(4) > .nav-profile > :last-child > :last-child > li:hover {
                background: var(--backgroundLight);
                color: var(--fontLight);
            }

        nav > :nth-child(4) > .nav-profile > :last-child > :last-child {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        nav > :nth-child(4) > .nav-profile.expanded > :last-child > :last-child > .nav-api > :first-child {
            height: 24px;
            margin: 0 12px 0 4px;
            width: 24px;
        }

        nav > :nth-child(4) > .nav-profile.expanded > :last-child > :last-child > .nav-configure > :first-child {
            height: 24px;
            margin: 0 12px 0 4px;
            width: 24px;
        }

        nav > :nth-child(4) > .nav-profile.expanded > :last-child > :last-child > .nav-manage > :first-child {
            height: 26px;
            margin: 0 10px 0 2px;
            width: 26px;
        }

        nav > :nth-child(4) > .nav-profile.expanded > :last-child > :last-child > hr {
            background: var(--backgroundLight);
            border: none;
            height: 1px;
        }

        nav > :nth-child(4) > .nav-profile.expanded > :last-child > :last-child > li {
            align-items: center;
            cursor: pointer;
            display: flex;
            font-size: medium;
            height: 48px;
            padding: 0 8px 0 16px;
        }

    nav > :nth-child(2) {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        font-size: 0;
        margin: 0 0 4px 20px;
        min-width: 46px;
        position: relative;
    }

        nav > :nth-child(2) > :first-child {
            height: 27px;
            width: 27px;
        }

            nav > :nth-child(2) > :first-child + toast {
                font-size: small;
                margin-left: 8px;
                white-space: nowrap;
            }

                nav > :nth-child(2) > :first-child + toast:after {
                    content: " " attr(data-time);
                }

        nav > :nth-child(2) > :last-child {
            display: inline-block;
            font-size: 0;
            height: 26px;
            margin-left: 14px;
            overflow: hidden;
            transition: width .25s;
            width: 110px;
        }

            nav > :nth-child(2) > :last-child > svg {
                margin-right: 24px;
                width: 90px;
            }

.nav-live-mutable {
    box-sizing: border-box;
    overflow: hidden;
    transition: width .25s;
}

    .nav-live-mutable > * {
        display: inline-block;
        vertical-align: middle;
    }

    .nav-live-mutable:not(:disabled) > :first-child {
        margin-left: 10px !important;
    }

    .nav-live-mutable:not(:disabled) > :nth-child(2) {
        margin-left: 12px !important;
    }

    .nav-live-mutable > :last-child {
        font-size: 0;
        overflow: hidden;
        transition: width .25s;
    }

        .nav-live-mutable > :last-child,
        .nav-live-mutable > :last-child > :first-child {
            width: 40px;
        }

            .nav-live-mutable > :last-child > :first-child {
                height: var(--navButtonSize);
            }

    .nav-live-mutable:disabled > :last-child {
        width: 0;
    }

.nav-menu {
    --backgroundLight: #222;
    --backgroundDark: #444;
    --borderLight: #606060;
    --buttonBackgroundLight: var(--menuFontLight);
    --buttonBorderLight: var(--menuFontLight);
    --buttonFontLight: var(--backgroundLight);
    --buttonDisabledBackgroundLight: var(--backgroundLight);
    --buttonDisabledBorderLight: var(--borderLight);
    --buttonDisabledFontLight: var(--buttonDisabledBorderLight);
    --checkboxChecked: var(--menuFontLight);
    --checkboxUnchecked: var(--buttonDisabledBorderLight);
    --contextMenuBackgroundLight: var(--menuBackgroundLight);
    --contextMenuBorderLight: rgba(0, 0, 0, .25);
    --contextMenuFontLight: var(--menuFontLight);
    --contextMenuHighlightBackgroundLight: var(--contextMenuFontLight);
    --contextMenuHighlightFontLight: var(--contextMenuBackgroundLight);
    --contextMenuSeparatorLight: var(--contextMenuFontLight);
    --inputBackgroundLight: var(--buttonDisabledBackgroundLight);
    --inputBorderLight: var(--buttonDisabledBorderLight);
    --inputFontLight: var(--menuFontLight);
    --inputFontLightLight: var(--inputBorderLight);
    --inputHighlightBackgroundLight: var(--backgroundLight);
    --inputHighlightBorderLight: var(--inputFontLight);
    --inputHighlightFontLightLight: var(--inputFontLight);
    --inputHiglightPlaceholderFontLight: var(--buttonDisabledBorderLight);
    --inputHighlightFontLight: var(--menuFontLight);
    --inputHighlightFontLightLight: var(--inputHighlightFontLight);
    --inputPlaceholderFontLight: var(--inputBorderLight);
    --inputSelectedBackgroundLight: var(--menuFontLight);
    --inputSelectedFontLight: var(--menuBackgroundLight);
    --separatorLight: var(--buttonDisabledBorderLight);
}

    .nav-menu contextmenubutton > :first-child:after {
        transition: transform .25s;
    }

    .nav-menu contextmenubutton.expanded > :first-child:after {
        transform: rotate(-90deg);
    }

    .nav-menu .icon-option-blur > :first-child {
        fill: #666;
    }

    .nav-menu .icon-option-blur > :nth-child(2) {
        fill: #999;
    }

    .nav-menu .icon-option-blur > :nth-child(3),
    .nav-menu .icon-option-mute-unmute > * {
        fill: var(--menuFontLight);
    }

    .nav-menu .icon-resize-large,
    .nav-menu .icon-resize-medium:before {
        background: var(--menuFontLight);
    }

    .nav-menu .icon-resize-medium {
        border-color: var(--menuFontLight);
    }

    .nav-menu load {
        --loadBackgroundColor: var(--progressLow);
        --loadForegroundColor: var(--progressHigh);
    }

    .nav-menu numericupdown:not(:focus-within) > :nth-child(n+2):hover {
        background: var(--inputBorderLight);
    }

    .nav-menu numericupdown > :nth-child(n+2):hover:after {
        border-color: var(--backgroundLight);
    }

    .nav-menu .tabs > .selected {
        border-bottom-color: var(--menuFontLight);
    }

        .nav-menu .tabs > .selected > svg {
            fill: var(--menuFontLight);
        }

numericupdown {
    display: inline-flex;
    flex-flow: column wrap;
    overflow: hidden;
}

    numericupdown > :nth-child(1) {
        background: var(--inputBackgroundLight);
        border: none;
        height: 100%;
        margin: 1px 0;
        -moz-appearance: textfield;
        width: calc(100% - var(--numericUpDownButtonSize));
    }

        numericupdown > :nth-child(1)::-webkit-inner-spin-button,
        numericupdown > :nth-child(1)::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

    numericupdown > :nth-child(n+2) {
        align-items: center;
        background: unset;
        border: none;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        height: calc(100% / 2);
        justify-content: center;
        padding: 0;
        width: var(--numericUpDownButtonSize);
    }

        numericupdown > :nth-child(n+2):after {
            border-color: var(--inputFontLight);
            border-left-color: transparent !important;
            border-right-color: transparent !important;
            border-left-width: calc(var(--inputSize) / 8);
            border-right-width: calc(var(--inputSize) / 8);
        }

    numericupdown > :nth-child(2):after {
        border-bottom-width: calc((var(--inputSize) / 8) + 1px);
    }

    numericupdown > :nth-child(3):after {
        border-top-width: calc((var(--inputSize) / 8) + 1px);
    }

    numericupdown > :nth-child(3) {
        align-self: end;
        border-bottom: none;
        border-top-right-radius: 0;
    }

    numericupdown:not(.disabled) > :nth-child(n+2):hover {
        background: var(--buttonBackgroundLight);
    }

    numericupdown:not(.disabled) > :nth-child(n+2) {
        cursor: pointer;
    }

    numericupdown.disabled > :nth-child(n+2) {
        background: var(--buttonDisabledBackgroundLight);
        cursor: pointer;
    }

    numericupdown.disabled > :nth-last-child(-n+2):after {
        border-color: var(--inputDisabledFontLight);
    }

pagination {
    display: block;
    height: 0;
    left: 0;
    position: sticky;
    top: calc(100% - 60px);
    width: 100%;
    z-index: 1;
}

    pagination > :first-child {
        align-items: center;
        background: var(--dataGridViewColumnLight);
        border-top: 1px var(--borderLight) solid;
        box-sizing: border-box;
        display: flex;
        height: 60px;
        justify-content: center;
    }

        pagination > :first-child > * {
            flex-grow: 0;
            flex-shrink: 0;
        }

        pagination > :first-child > :nth-child(2),
        pagination > :first-child > :nth-child(8) {
            margin-left: 10px;
        }

        pagination > :first-child > :nth-child(3),
        pagination > :first-child > :nth-child(6) {
            margin: 0 16px;
        }

        pagination > :first-child > :nth-child(4) {
            width: calc(var(--inputSize) + 26px);
        }

        pagination > :first-child > :nth-child(5) {
            cursor: default;
            font-size: medium;
            margin-left: 8px;
            user-select: none;
        }

            pagination > :first-child > :nth-child(5).disabled {
                color: var(--inputDisabledFontLight);
            }

            pagination > :first-child > :nth-child(5):before {
                content: "/\00a0";
            }

        pagination > :first-child > button {
            padding: 0;
            width: calc(var(--buttonSize) + 6px);
        }

            pagination > :first-child > button > svg {
                height: calc(var(--buttonSize) - 6px);
                vertical-align: middle;
                width: calc(var(--buttonSize) - 6px);
            }

        pagination > :first-child > hr {
            background: var(--borderLight);
            border: none;
            height: 100%;
            margin: 0;
            width: 1px;
        }

player {
    background: #000;
    font-size: 0;
    display: block;
    position: relative;
}

player,
scenario > :last-child > volume > :last-child > range {
    --rangeGutterBackgroundLight: #333;
}

    player > controls {
        bottom: 0;
        cursor: default;
        display: flex;
        flex-wrap: wrap;
        height: 56px;
        left: 16px;
        position: absolute;
        right: 16px;
        white-space: nowrap;
    }

        player > controls > * {
            z-index: 1;
        }

        player > controls button,
        player > controls button > svg,
        player > controls > times {
            height: var(--playerButtonSize);
        }

        player > controls button {
            background: transparent !important;
            border: none;
            border-radius: 0;
            box-shadow: none !important;
            overflow: hidden;
            padding: 0 0 6px;
        }

        player > controls button,
        player > controls > :nth-child(5) {
            width: calc(var(--playerButtonSize) + 6px);
        }

            player > controls button > svg {
                filter: drop-shadow(0 0 2px rgb(0, 0, 0, .5));
            }

                player > controls button > svg path,
                player > controls button > svg polygon {
                    fill: #fff;
                }

            player > controls button:disabled > svg path,
            player > controls button:disabled > svg polygon {
                fill: #aaa;
            }

            player > controls button:not(:disabled) {
                cursor: pointer;
            }

        player > controls input[type=checkbox] {
            display: none;
        }

            player > controls input[type=checkbox] + b {
                border-radius: 2px;
                cursor: pointer;
                display: block;
                font-size: 0;
                height: 16px;
                line-height: 14px;
                overflow: hidden;
                text-align: center;
                width: 16px;
            }

            player > controls input[type=checkbox]:checked + b {
                background: var(--navBackground);
            }

                player > controls input[type=checkbox]:checked + b:after {
                    border-color: transparent #fff #fff transparent;
                    border-style: solid;
                    border-width: 0 2px 2px 0;
                    box-sizing: border-box;
                    content: "";
                    display: inline-block;
                    height: 8px;
                    transform: rotate(45deg);
                    vertical-align: middle;
                    width: 6px;
                }

            player > controls input[type=checkbox]:not(:checked) + b {
                background: #444;
            }

        player > controls > :nth-child(5) {
            align-items: center;
            box-sizing: border-box;
            display: flex;
            height: var(--playerButtonSize);
            overflow: hidden;
            transition: margin-right .25s, width .25s;
        }

            player > controls > :nth-child(5):hover,
            player > controls > :nth-child(5).dragging {
                margin-right: 10px;
                width: 145px;
            }

            player > controls > :nth-child(5) > * {
                flex: 0 0 auto;
            }

            player > controls > :nth-child(5) > :first-child {
                padding: 0;
                vertical-align: top;
            }

            player > controls > :nth-child(5) > :last-child {
                margin-left: 10px;
                width: 75px;
            }

        player > controls > dock {
            background: #000;
            display: flex;
            height: var(--playerButtonSize);
            margin-left: auto;
            position: relative;
        }

            player > controls > dock > :first-child {
                padding: 1px 0 0;
            }

                player > controls > dock > :first-child > * {
                    height: max(calc(var(--playerButtonSize) * .5), 25px);
                    transform-origin: center;
                    transition: transform .15s;
                }

                player > controls > dock > :first-child.expanded > * {
                    transform: rotate(30deg);
                }

            player > controls > dock > div {
                background: rgba(0, 0, 0, .9);
                bottom: calc(100% + (var(--rangeThumbSize) - var(--rangeThumbOffset)));
                display: none;
                padding: 16px;
                position: absolute;
                right: 0;
                width: max-content;
                z-index: 10;
            }

                player > controls > dock > div.expand-out {
                    background: #000;
                    bottom: unset;
                    top: 100%;
                }

                player > controls > dock > div > div {
                    align-items: center;
                    display: grid;
                    grid-gap: 16px 0;
                }

                    player > controls > dock > div > div > .content {
                        grid-column: 3;
                    }

                        player > controls > dock > div > div > .content.label {
                            grid-column: 3 / span 1;
                        }

                        player > controls > dock > div > div > .content > range {
                            margin: 0 0 1px 8px;
                            width: 65px;
                        }

                    player > controls > dock > div > div > .icon {
                        height: 24px;
                        grid-column: 1;
                        margin-right: 8px;
                        width: 24px;
                    }

                        player > controls > dock > div > div > .icon * {
                            fill: #fff;
                        }

                    player > controls > dock > div > div > .label {
                        grid-column: 4;
                    }

                        player > controls > dock > div > div > .label:not(.content) {
                            text-align: right;
                            width: 42px;
                        }

                    player > controls > dock > div > div > .label,
                    player > controls > dock > div > div > .title,
                    player > controls > times,
                    player > thumbnails:after,
                    player > waveform > m {
                        color: #fff;
                        font-size: small;
                    }

                    player > controls > dock > div > div > .label,
                    player > controls > dock > div > div > .title {
                        font-weight: 500;
                    }

                    player > controls > dock > div > div > .title {
                        grid-column: 2;
                        margin-right: 24px;
                    }

        player > controls > times {
            align-items: center;
            display: inline-flex;
            margin-left: 6px;
            user-select: none;
        }

        player > controls > times,
        player > thumbnails:after {
            text-shadow: 0 0 2px rgba(0, 0, 0, .75);
        }

            player > controls > times > duration:before {
                content: "\00a0/\00a0";
            }

        player > controls range {
            cursor: pointer;
        }

        player > controls:before {
            background: rgba(255, 255, 255, .5);
        }

        player > controls > range {
            flex: 1 0 100%;
            height: var(--rangeTrackSize);
            margin-bottom: 4px;
        }

    player > thumbnails {
        display: none;
        position: absolute;
        z-index: 2;
    }

    player > tracks {
        display: grid;
        grid-gap: 0 8px;
        justify-content: safe center;
        overflow-x: auto;
        position: relative;
    }

        player > tracks > :first-child:not(.hidden),
        player > tracks > .hidden + :not(.hidden) {
            margin-left: 0;
        }

        player > tracks > :not(.hidden) {
            cursor: pointer;
            grid-row: 1;
            height: auto;
            margin: 8px 0;
            max-width: 320px;
            min-width: 180px;
            width: 100%;
        }

        player > tracks > :last-child {
            margin-right: 0;
        }

    player > viewer {
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }

        player > viewer > :first-child {
            height: auto;
            max-height: 100%;
            width: 100%;
        }

    player > waveform {
        margin: 0 16px;
        user-select: none;
        z-index: 1;
    }

        player > waveform:empty {
            display: none;
        }

    player:not(.player-no-video) > controls:before {
        background: linear-gradient(0deg, hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, .738) 19%, hsla(0, 0%, 0%, .541) 34%, hsla(0, 0%, 0%, .382) 47%, hsla(0, 0%, 0%, .278) 56.5%, hsla(0, 0%, 0%, .194) 65%, hsla(0, 0%, 0%, .126) 73%, hsla(0, 0%, 0%, .075) 80.2%, hsla(0, 0%, 0%, .042) 86.1%, hsla(0, 0%, 0%, .021) 91%, hsla(0, 0%, 0%, .008) 95.2%, hsla(0, 0%, 0%, .002) 98.2%, hsla(0, 0%, 0%, 0) 100%);
        bottom: 0;
        content: "";
        display: block;
        height: 100px;
        left: -16px;
        position: absolute;
        right: -16px;
        z-index: 0;
    }

    player:not(.player-no-video) > thumbnails {
        bottom: 66px;
        left: 0;
    }

    player:not(.player-no-video) > waveform {
        margin-bottom: 66px;
    }

.player-no-ui {
    cursor: none;
}

.player-no-video > controls {
    margin: 16px 16px 0;
    position: static;
}

    .player-no-video > controls > dock > :nth-child(2),
    .player-no-video > viewer {
        display: none;
    }

.player-no-video > waveform {
    height: calc(100% - 72px);
}

.player-no-video-tracks > tracks {
    height: 0;
}

.player-thumbnails > thumbnails {
    display: unset;
}

radio {
    display: inline-block;
}

    radio > :first-child {
        border: none;
        height: 0;
        padding: 0;
        visibility: hidden;
        width: 0;
    }

        radio > :first-child + label {
            cursor: pointer;
        }

        radio > :first-child:checked + label > :first-child {
            border-color: var(--checkboxChecked);
        }

            radio > :first-child:checked + label > :first-child:before {
                background: var(--checkboxChecked);
            }

        radio > :first-child:disabled + label {
            cursor: default;
        }

    radio > :last-child {
        display: inline-block;
    }

        radio > :last-child > * {
            display: inline-block;
            vertical-align: middle;
        }

        radio > :last-child > :first-child {
            border: 1px var(--checkboxUnchecked) solid;
            border-radius: 100%;
            box-sizing: border-box;
            margin-right: 8px;
        }

            radio > :last-child > :first-child:before {
                border-radius: 100%;
                content: "";
                display: block;
                height: 14px;
                margin: 2px;
                width: 14px;
            }

range {
    align-items: center;
    display: inline-block;
    height: var(--rangeThumbSize);
    position: relative;
    width: 200px;
}

    range > * {
        display: block;
        position: absolute;
    }

    range > gutter,
    range > track {
        box-sizing: border-box;
        height: var(--rangeTrackSize);
        top: calc(50% - (var(--rangeTrackSize) / 2));
        width: 100%;
    }

        range > gutter:after {
            background: var(--rangeGutterBackgroundLight);
        }

        range > gutter:after,
        range > track:after {
            content: "";
            display: block;
            height: 100%;
        }

    range > thumb {
        border-radius: 100%;
        height: var(--rangeThumbSize);
        top: calc(50% - (var(--rangeThumbSize) / 2));
        width: var(--rangeThumbSize);
    }

    range > thumb,
    range > track:after {
        background: var(--rangeThumbBackgroundLight);
    }

scenario {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

    scenario > controls {
        background: var(--menuBackgroundLight);
        color: var(--menuFontLight);
        z-index: 1;
    }

        scenario > controls:not(:last-child) {
            font-size: 0;
            height: var(--rangeThumbSize);
        }

            scenario > controls:not(:last-child) > range {
                --rangeGutterBackgroundLight: #444;
                height: var(--rangeTrackSize);
                width: 100%;
            }

    scenario > :last-child {
        display: flex;
        flex: 0 0 calc(var(--playerButtonSize) + 8px);
    }

        scenario > :last-child button,
        scenario > :last-child > volume,
        scenario > :last-child > volume > :last-child {
            height: var(--playerButtonSize);
        }

        scenario > :last-child button {
            background: none;
            border: none;
            padding: 0;
            width: var(--playerButtonSize);
        }

            scenario > :last-child button > * {
                vertical-align: middle;
            }

            scenario > :last-child button > svg path {
                fill: var(--menuFontLight);
            }

        scenario > :last-child > button {
            flex: 0 0 var(--playerButtonSize);
        }

        scenario > :last-child > end {
            margin: 0 6px 0 auto;
            text-align: right;
        }

        scenario > :last-child > end,
        scenario > :last-child > start {
            flex-basis: 175px;
            font-size: 90%;
        }

        scenario > :last-child > start {
            margin: 0 auto 0 6px;
            text-align: left;
        }

        scenario > :last-child > volume {
            position: relative;
        }

            scenario > :last-child > volume > :last-child {
                background: var(--menuBackgroundLight);
                display: inline-block;
                overflow: hidden;
                position: absolute;
                transition: margin-right .25s, width .25s;
                width: 0;
            }

                scenario > :last-child > volume > :last-child > range {
                    margin: calc((var(--playerButtonSize) - var(--rangeThumbSize)) / 2) 0 0 10px;
                    width: 75px;
                }

            scenario > :last-child > volume:hover > :last-child,
            scenario > :last-child > volume.dragging > :last-child {
                width: 110px;
            }

    scenario > controls range:before {
        background: rgba(255, 255, 255, .2);
    }

    scenario > devices {
        display: flex;
        flex: 0 0 calc(100% - (var(--playerButtonSize) + var(--rangeThumbSize) + 8px));
        flex-direction: column;
        overflow: auto;
        position: relative;
    }

        scenario > devices > :not(:first-child):not(:last-child) {
            margin-top: 1px;
        }

        scenario > devices > :last-child {
            bottom: 0;
            margin: 0;
            position: absolute;
            top: 0;
            width: 1px;
        }

            scenario > devices > :last-child:before {
                background: var(--backgroundLight);
                content: "";
                display: block;
                height: 100%;
                mix-blend-mode: difference;
                width: 100%;
            }

        scenario > devices > d {
            background: var(--backgroundDark);
            display: flex;
            flex: 0 0 var(--scenarioDeviceSize);
            user-select: none;
        }

            scenario > devices > d > :first-child {
                align-items: center;
                background: var(--menuBackgroundLight);
                box-sizing: border-box;
                color: var(--menuFontLight);
                cursor: pointer;
                display: flex;
                flex: 0 0 var(--scenarioDeviceLabelSize);
                height: 100%;
                left: 0;
                padding: 4px 6px;
                position: sticky;
                z-index: 1;
            }

            scenario > devices > d > :last-child {
                flex: 1;
                position: relative;
            }

                scenario > devices > d > :last-child > * {
                    background: var(--playerWaveformDark);
                    height: 100%;
                    position: absolute;
                    top: 0;
                }

                scenario > devices > d > :last-child > .scenario-call-playing {
                    background: var(--playerWaveformLight);
                }

        scenario > devices > .scenario-device-muted > :first-child {
            background: var(--buttonDisabledFontLight);
        }

        scenario > devices > .scenario-device-muted > :last-child > *,
        scenario > devices > .scenario-device-muted > :last-child > .scenario-call-playing {
            background: var(--borderDark);
        }

select > option {
    padding: 4px 0 2px 8px;
    height: 21px;
}

.show-tooltips [data-title] {
    position: relative;
}

    .show-tooltips [data-title]:after {
        cursor: default;
        display: inline-block;
        user-select: none;
    }

thumbnails {
    --thumbnailScale: .5;
    position: relative;
    text-align: center;
}

    thumbnails:after {
        content: attr(data-d);
        display: inline-block;
        margin: 12px 0 0;
        padding: 4px;
    }

    thumbnails > tiles {
        border: 2px var(--backgroundLight) solid;
        box-sizing: border-box;
        display: block;
        height: calc(240px * var(--thumbnailScale));
        overflow: hidden;
        position: relative;
        width: calc(320px * var(--thumbnailScale));
    }

        thumbnails > tiles > t {
            background-size: 100%;
            display: block;
            height: calc(1200px * var(--thumbnailScale));
            position: absolute;
            width: calc(1600px * var(--thumbnailScale));
        }

.tabs {
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
}

    .tabs:after {
        background: var(--borderLight);
        bottom: 0;
        content: "";
        display: block;
        height: 1px;
        left: 0;
        position: absolute;
        right: 0;
    }

    .tabs > button {
        align-items: center;
        background: unset;
        border-bottom: 2px transparent solid;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        flex: 0 0 64px;
        height: var(--tabSize);
        justify-content: center;
        padding: 0;
        position: relative;
        z-index: 1;
    }

        .tabs > button > svg {
            fill: var(--tabLight);
            height: 30px;
            width: 30px;
        }

    .tabs.disabled > button > svg {
        fill: var(--tabDisabledLight);
    }

    .tabs > .selected,
    .tabs.disabled > button {
        cursor: default;
    }

    .tabs > .selected {
        border-bottom-color: var(--tabSelectedLight);
    }

        .tabs > .selected > svg {
            fill: var(--tabSelectedLight);
        }

    .tabs.disabled > .selected {
        background: unset;
        border-bottom-color: var(--tabDisabledSelectedLight);
    }

        .tabs.disabled > .selected > svg {
            fill: var(--tabDisabledSelectedLight);
        }

.tag {
    border-radius: calc(var(--buttonBorderRadius) * 2);
    /*box-shadow: 0 0 0 1px var(--backgroundLight);*/
    font-size: 90%;
    font-weight: normal;
    overflow: hidden;
    padding: var(--buttonPadding) calc(var(--buttonPadding) + 4px);
    white-space: nowrap;
}

textarea {
    min-height: var(--inputSize);
}

textbox {
    --inputSize: 28px;
    padding: 8px 10px;
    text-align: left;
}

    textbox > :nth-child(2) {
        border: none;
        line-height: calc(var(--inputSize) - 8px);
        padding: 0 !important;
        resize: none;
        width: 100%;
    }

    textbox[disabled] {
        cursor: default;
    }

        textbox[disabled] > :nth-child(1),
        textbox[disabled] > :nth-child(3) {
            color: var(--inputDisabledFontLight);
            cursor: default;
        }

toast {
    background: var(--menuBackgroundLight);
    border-radius: 16px;
    color: var(--menuFontLight);
    cursor: default;
    display: none;
    font-size: 90%;
    line-height: normal;
    padding: 6px 10px;
    position: absolute;
    user-select: none;
}

transcript {
    white-space: normal;
}

    transcript > .tabs {
        justify-content: start;
        padding-top: 10px;
        position: sticky;
        top: 0;
    }

        transcript > .tabs > options {
            flex: 1;
            justify-content: start;
            margin: 0 20px 8px 20px;
            overflow: visible;
        }

    transcript > summary {
        align-content: start;
        box-sizing: border-box;
        display: grid;
        grid-auto-columns: min-content 1fr;
        justify-content: start;
        padding: 0 24px 24px;
    }

    transcript > summary,
    transcript > text {
        height: calc(100% - (var(--tabSize) + 34px));
        overflow: auto;
        scrollbar-gutter: stable;
    }

        transcript > summary > * {
            display: block;
        }

        transcript > summary > :not(:last-child):nth-child(2n+1) {
            font-weight: 400;
            grid-column: 1;
            margin: 0 16px 12px 0;
            white-space: nowrap;
        }

        transcript > summary > :nth-child(2n+2) {
            grid-column: 2;
            margin-bottom: 12px;
        }

        transcript > summary > tagname:last-of-type,
        transcript > summary > tagreasons:last-of-type {
            margin-bottom: 24px;
        }

        transcript > summary > highlights > ul {
            margin: 0;
            padding: 0 0 0 16px;
        }

            transcript > summary > highlights > ul > li {
                margin-bottom: 10px;
            }

                transcript > summary > highlights > ul > li::marker {
                    color: var(--fontLight);
                    font-size: 90%;
                }

                transcript > summary > highlights > ul > li > :first-child {
                    display: none;
                }

            transcript > summary > highlights > ul > :last-child {
                margin-bottom: 4px;
            }

        transcript > summary > summary {
            grid-column: 1 / span 2 !important;
        }

    transcript > text {
        box-sizing: border-box;
        display: block;
        padding: 0 16px 23px;
        position: relative;
    }

        transcript > text > p {
            margin: 0;
        }

        transcript > text > .l:before,
        .transcript-format-bullet > text > .r:before,
        .transcript-format-conversation > text > .r:after {
            flex-shrink: 0;
        }

        transcript > text > mm > video {
            background: #000;
        }

    transcript:not(.transcript-format-bullet):not(.transcript-format-conversation) > text > h1,
    .time-offset-format-duration view:not(.view-text) transcript > text > h1 {
        display: none;
    }

    transcript:not(.transcript-format-manuscript) > text > .l m {
        background: #efefef;
        border-color: #efefef;
    }

        transcript:not(.transcript-format-manuscript) > text > .l m > .st {
            right: 0;
        }

    transcript:not(.transcript-format-manuscript) > text > .r m {
        background: #d8eeff;
        border-color: #d8eeff;
    }


        transcript:not(.transcript-format-manuscript) > text > .r m > .st {
            left: 0;
        }

    transcript:not(.transcript-format-manuscript) > text > p m {
        border-style: solid;
        border-width: 1px;
        box-sizing: border-box;
        color: var(--inputSelectedFontLight);
        padding: 8px 14px;
    }

    transcript:not(.transcript-format-manuscript) > text > p m,
    transcript:not(.transcript-format-manuscript) > text > p > mm > img,
    transcript:not(.transcript-format-manuscript) > text > p > mm > video {
        border-radius: 18px;
    }

    transcript:not(.transcript-format-manuscript) > text > .st {
        margin-bottom: calc(var(--transcriptEmojiSize) + 4px) !important;
    }

        transcript:not(.transcript-format-manuscript) > text > .st m {
            position: relative;
        }

            transcript:not(.transcript-format-manuscript) > text > .st m > .st {
                bottom: calc((var(--transcriptEmojiSize) * -1) + 6px);
                justify-content: end;
                display: flex;
                grid-gap: 6px;
                position: absolute;
            }

    transcript:not(.transcript-format-manuscript) > text > p m > .st > * {
        background-repeat: no-repeat;
        display: block;
        height: var(--transcriptEmojiSize);
        width: var(--transcriptEmojiSize);
    }

    transcript:not(.transcript-format-manuscript) > text > .highlighted > m {
        background: var(--backgroundLight);
        border-color: var(--inputSelectedBackgroundLight);
        color: var(--inputSelectedFontLight);
    }

    transcript:not(.transcript-format-bullet):not(.transcript-format-conversation):not(.transcript-format-manuscript) > text,
    transcript:not(.transcript-format-summary) > summary {
        display: none;
    }

    transcript > text > p > mm {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
    }

        transcript > text > p > mm > img {
            display: block;
            max-width: 100%;
        }

        transcript > text > p > mm > :not(:first-child) {
            margin-top: 10px;
        }

    transcript:not(.transcript-format-bullet) > text > .l > mm > m {
        align-self: start;
    }

    transcript:not(.transcript-format-bullet) > text > .r > mm > m {
        align-self: end;
    }

.transcript-format-bullet > text > p,
.transcript-format-conversation > text > p {
    display: flex;
}

    .transcript-format-bullet > text > p:not(:last-child),
    .transcript-format-conversation > text > p:not(:last-child) {
        margin-bottom: 24px;
        scroll-margin: 18px 0;
    }

    .transcript-format-bullet > text > p > m,
    .transcript-format-bullet > text > p > mm {
        flex: 1 1 0;
    }

.transcript-format-bullet > text > p {
    flex-wrap: wrap;
}

    .transcript-format-bullet > text > p:after {
        align-self: end;
        content: attr(data-d);
        flex-basis: 100%;
        font-size: small;
        margin-top: 6px;
        white-space: nowrap;
    }

.transcript-format-conversation > text > .l:after {
    margin-left: 6px;
}

.transcript-format-conversation > text > .l:after,
.transcript-format-conversation > text > .r:before {
    align-self: end;
    content: attr(data-d);
    font-size: small;
    white-space: nowrap;
}

.transcript-format-conversation > text > .l.e > m,
.transcript-format-conversation > text > .l.m > m {
    border-top-left-radius: 6px;
}

.transcript-format-conversation > text > .l.e:before,
.transcript-format-conversation > text > .l.m:before,
.transcript-format-conversation > text > .r.e:after,
.transcript-format-conversation > text > .r.m:after {
    visibility: hidden;
}

.transcript-format-conversation > text > .l.m > m,
.transcript-format-conversation > text > .l.s > m {
    border-bottom-left-radius: 6px;
}

.transcript-format-conversation > text > .m,
.transcript-format-conversation > text > .s {
    margin-bottom: 6px !important;
}

.transcript-format-conversation > text > .r {
    justify-content: end;
}

    .transcript-format-conversation > text > .r:after {
        margin-left: 6px;
    }

    .transcript-format-conversation > text > .r:before {
        margin-right: 6px;
    }

    .transcript-format-conversation > text > .r.e > m,
    .transcript-format-conversation > text > .r.m > m {
        border-top-right-radius: 6px;
    }

    .transcript-format-conversation > text > .r.m > m,
    .transcript-format-conversation > text > .r.s > m {
        border-bottom-right-radius: 6px;
    }

.transcript-format-conversation > text > h1 {
    cursor: default;
    font-size: medium;
    font-weight: 300;
    text-align: center;
    margin: 8px 0 32px;
    user-select: none;
}

    .transcript-format-conversation > text > h1:first-child {
        margin-top: 0;
    }

.transcript-format-manuscript > text > p {
    display: inline;
    line-height: 150%;
}

    .transcript-format-manuscript > text > p > :after {
        content: "\00a0";
    }

.transcript-format-manuscript > text > .highlighted > m {
    text-decoration-line: underline;
}

.transcript-format-manuscript > text > p m {
    text-decoration-color: var(--navBackground);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.transcript-no-tabs > .tabs [data-value] {
    display: none;
}

tree li > button:nth-child(1),
tree li > button:nth-child(2),
tree li > :nth-child(2) > button {
    background: unset;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    padding: 0 6px;
    text-align: left;
}

tree button,
tree input[type=text] {
    margin: 0;
}

tree .editing > button {
    display: none;
}

tree .expanded > :first-child:before {
    transform: rotate(90deg);
}

tree input[type=text] {
    padding: 0 5px;
}

tree li > :nth-child(1) {
    cursor: pointer;
    display: inline-block;
    margin: 0 4px 0 10px;
    padding: 4px;
}

    tree li > :nth-child(1):disabled {
        cursor: default;
    }

    tree li > :nth-child(1):before {
        border-color: transparent var(--inputFontLight);
        border-width: 5px 0 5px 6px;
        border-style: solid;
        content: "";
        display: inline-block;
        height: 0;
        margin-bottom: 1px;
        transform-origin: center;
        width: 0;
    }

tree:not(.no-animation) li > :nth-child(1):before {
    transition: transform .25s;
}

tree li > :nth-child(1):disabled:before {
    border-color: transparent var(--inputDisabledFontLight);
}

tree li > :nth-child(2) > button,
tree li > button:nth-child(2) {
    align-items: center;
    display: inline-flex;
    height: var(--treeNodeSize);
}

tree li > ul {
    margin-left: var(--treeNodeOffset);
}

tree li:not(.expanded) > ul {
    display: none;
}

tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

tree {
    --treeNodeDepth: 0;
}

    tree .toggling {
        overflow: clip !important;
    }

    tree > ul li > ul {
        --treeNodeParentDepth: var(--treeNodeDepth);
    }

        tree > ul li > ul > li {
            --treeNodeDepth: calc(var(--treeNodeParentDepth) + 1);
        }

.tree-row li > ul {
    margin-left: 0;
}

.tree-row ul > li {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(3, min-content);
}

.tree-row ul > .empty > :nth-child(1) {
    display: none;
}

.tree-row ul > .empty > :nth-child(2) {
    margin: 0 var(--treeNodeOffset) 0 0;
}

.tree-row ul > li > :nth-child(1) {
    box-sizing: border-box;
    height: var(--treeNodeSize);
    padding-bottom: 0;
    padding-top: 0;
}

.tree-row ul > li > :nth-child(2) {
    width: calc(var(--treeNodeColumnSize) - (var(--treeNodeDepth) * var(--treeNodeOffset)));
}

.tree-row ul > li > :nth-child(2) {
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 auto;
    padding-right: 16px;
}

    .tree-row ul > li > :nth-child(2) > button {
        overflow: hidden;
        white-space: nowrap;
    }

.tree-row ul > li > :nth-child(3) {
    align-items: center;
    display: flex;
    margin-left: 12px;
}

.tree-row ul > li > :nth-child(4) {
    grid-column: 2 / span 2;
}

.ui-datepicker {
    background: #fff;
    border: 1px #d6d6d6 solid;
    box-shadow: 0 2px 4px #d6d6d6;
    display: none;
    margin-top: -1px;
    padding: 0 3px 3px;
    transform: translate3d(0, 0, 0);
    user-select: none;
}

.ui-datepicker-calendar {
    border-spacing: 0;
}

    .ui-datepicker-calendar > tbody > tr > td,
    .ui-datepicker-calendar > thead > tr > th {
        padding: 0;
    }

        .ui-datepicker-calendar > tbody > tr > td > a {
            color: var(--fontLight);
        }

        .ui-datepicker-calendar > tbody > tr > td > a,
        .ui-datepicker-calendar > thead > tr > th > span,
        .ui-datepicker-header > a {
            cursor: pointer;
            display: block;
            height: 40px;
            line-height: 40px;
            text-align: center;
            text-decoration: none;
            width: 40px;
        }

            .ui-datepicker-calendar > tbody > tr > td > a:hover,
            .ui-datepicker-calendar > tbody > tr > td > .ui-state-active {
                background: var(--inputSelectedBackgroundLight);
                color: var(--inputSelectedFontLight);
            }

    .ui-datepicker-calendar > tbody > tr > .ui-datepicker-other-month > a {
        color: rgba(51, 51, 51, .5);
    }

    .ui-datepicker-calendar > thead > tr > th {
        padding-bottom: 3px;
    }

        .ui-datepicker-calendar > thead > tr > th > span {
            border-color: #d6d6d6 transparent;
            border-style: solid none;
            border-width: 1px 0;
        }

.ui-datepicker-header {
    margin: 4px 0;
    position: relative;
    text-align: center;
}

    .ui-datepicker-header > a {
        font-size: 0;
        position: absolute;
        top: 0;
    }

        .ui-datepicker-header > a > span {
            border-color: transparent var(--fontLight);
            border-style: solid;
            border-width: 6px 0;
            height: 0;
            width: 0;
        }

    .ui-datepicker-header > .ui-datepicker-next {
        right: 0;
    }

        .ui-datepicker-header > .ui-datepicker-next > span {
            border-left-width: 6px;
        }

    .ui-datepicker-header > .ui-datepicker-prev {
        left: 0;
    }

        .ui-datepicker-header > .ui-datepicker-prev > span {
            border-right-width: 6px;
        }

.ui-datepicker-title {
    height: 40px;
    line-height: 40px;
}

    .ui-datepicker-title > select:nth-child(n+2) {
        margin-left: 6px;
    }

waveform {
    --waveformBottomOffset: 0px;
    --waveformTopOffset: 28px;
    cursor: move;
    display: block;
    overflow: hidden;
    position: relative;
}

    waveform * {
        user-select: none;
    }

    waveform:after,
    waveform:before {
        content: "";
        display: block;
    }

    waveform:after {
        height: var(--waveformBottomOffset);
    }

    waveform:before {
        height: var(--waveformTopOffset);
    }

    waveform > c {
        display: block;
        font-size: 0;
        position: relative;
        white-space: nowrap;
        z-index: 1;
    }

        /*waveform > c:first-of-type:nth-last-of-type(1) {
            height: calc(100% - ((var(--waveformBottomOffset) + var(--waveformTopOffset)) - 1px));
        }

        waveform > c:first-of-type:nth-last-of-type(2),
        waveform > c:first-of-type:nth-last-of-type(2) ~ c {
            height: calc(50% - ((var(--waveformBottomOffset) + var(--waveformTopOffset)) - 1px));
        }

        waveform > c:first-of-type:nth-last-of-type(4),
        waveform > c:first-of-type:nth-last-of-type(4) ~ c {
            height: calc(50% - ((var(--waveformBottomOffset) + var(--waveformTopOffset)) - 1px));
        }*/

        waveform > c > b {
            bottom: 0;
            display: block;
            height: 4px;
            position: absolute;
        }

        waveform > c > canvas {
            display: inline;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: -moz-crisp-edges;
            image-rendering: pixelated;
        }

    waveform > m {
        display: block;
        height: 100%;
        position: absolute;
        text-align: center;
        top: 10px;
        z-index: 1;
    }

        waveform > m:after {
            background: rgba(255, 255, 255, .25);
            content: "";
            display: block;
            height: calc(100% - (var(--waveformTopOffset) - 2px));
            margin-top: 2px;
            width: 1px;
        }

        waveform > m:before {
            content: attr(data-d);
            left: -50%;
            position: relative;
            top: -2px;
        }

        waveform > m:first-of-type:after {
            display: none;
        }

        waveform > m:first-of-type:before {
            position: static;
        }

    waveform > p {
        bottom: var(--waveformBottomOffset);
        left: 0;
        position: absolute;
        overflow: hidden;
        top: calc(var(--waveformTopOffset) - 2px);
        z-index: 2;
    }

        waveform > p > b {
            border-right: 1px #fff solid;
            bottom: 0;
            box-sizing: border-box;
            display: block;
            position: absolute;
            top: 0;
        }

            waveform > p > b:after,
            waveform > p > b:before {
                border-color: #fff transparent;
                content: "";
                left: -2px;
                position: absolute;
                width: 5px;
            }

            waveform > p > b:after {
                background: #000;
                border-bottom-style: solid;
                border-bottom-width: 1px;
                height: 2px;
                top: 0;
            }

            waveform > p > b:before {
                border-top-style: solid;
                border-top-width: 1px;
                bottom: 0;
            }

.time-format-military nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(3):after,
.time-format-military.time-offset-format-time thumbnails:after,
.time-format-military scenario > :last-child > end:before,
.time-format-military scenario > :last-child > start:before,
.time-format-military.time-offset-format-time .transcript-format-bullet > text > p:after,
.time-format-military.time-offset-format-time .transcript-format-conversation > text > .l:after,
.time-format-military.time-offset-format-time .transcript-format-conversation > text > .r:before,
.time-format-military.time-offset-format-time waveform > m:before {
    content: attr(data-tm);
}

.time-format-standard nav > :nth-child(4) > .nav-notify > .notifications > .notification > :nth-child(3):after,
.time-format-standard.time-offset-format-time thumbnails:after,
.time-format-standard scenario > :last-child > end:before,
.time-format-standard scenario > :last-child > start:before,
.time-format-standard.time-offset-format-time .transcript-format-bullet > text > p:after,
.time-format-standard.time-offset-format-time .transcript-format-conversation > text > .l:after,
.time-format-standard.time-offset-format-time .transcript-format-conversation > text > .r:before,
.time-format-standard.time-offset-format-time waveform > m:before,
.time-format-standard .view-text .transcript-format-conversation > text > .l:after,
.time-format-standard .view-text .transcript-format-conversation > text > .r:before {
    content: attr(data-ts);
}

.time-offset-format-time waveform {
    --waveformTopOffset: 34px;
}

    .time-offset-format-time waveform > m {
        font-size: 12px;
        text-align: center;
    }

        .time-offset-format-time waveform > m:before {
            white-space: pre-line;
        }

        .time-offset-format-time waveform > m:nth-of-type(even) {
            display: none;
        }

@keyframes load-marquee {
    0% {
        left: 0%;
        right: 100%;
        width: 0%;
    }

    20% {
        left: 0%;
        right: 75%;
        width: 35%;
    }

    80% {
        right: 0%;
        left: 75%;
        width: 35%;
    }

    100% {
        left: 100%;
        right: 0%;
        width: 0%;
    }
}

@keyframes load-spin {
    0%, 100% {
        stroke-dashoffset: calc(((var(--loadSize) - var(--loadBarSize)) / 2) * (pi * 2));
        transform: rotate(0deg);
    }

    50% {
        stroke-dashoffset: 0;
        transform: rotate(360deg);
    }
}

@keyframes nav-notify-ring {
    0%, 43%, 100% {
        transform: rotate(0);
    }

    1%, 9% {
        transform: rotate(22.5deg);
    }

    5% {
        transform: rotate(-21deg);
    }

    10% {
        transform: rotate(19.5deg);
    }

    15% {
        transform: rotate(-18deg);
    }

    20% {
        transform: rotate(13.5deg);
    }

    25% {
        transform: rotate(-12deg);
    }

    30% {
        transform: rotate(7.5deg);
    }

    35% {
        transform: rotate(-6deg);
    }

    40% {
        transform: rotate(0.75deg);
    }
}

@keyframes notification-progress-tick {
    0% {
        background-color: var(--progressHigh);
    }

    50%, 100% {
        background-color: var(--progressLow);
    }
}

@media (max-width: 639.98px) {

    body {
        --navSize: 120px;
    }

    nav {
        flex-wrap: wrap;
    }

        nav > :nth-child(4) > .nav-notify > :last-child {
            border-left: none;
            width: 100vw;
        }

        nav > :nth-child(3) {
            background: var(--menuBackgroundLight);
            flex-basis: 100%;
            order: 2;
        }

            nav > :nth-child(3) > button:not(.nav-live-mutable):not([for=edit]) {
                width: calc(var(--navButtonSize) + 4px);
            }
}

@media (max-width: 1023.98px) {

    nav > :nth-child(2) {
        margin-bottom: 0;
    }

        nav > :nth-child(2) > :last-child {
            width: 0;
        }

    nav > :nth-child(3) > [for] {
        font-size: 0;
    }

        nav > :nth-child(3) > [for]:not(.nav-live-mutable:not(:disabled)) {
            font-size: 0;
            width: var(--navButtonSize);
        }

        nav > :nth-child(3) > [for] > :nth-child(2) {
            display: none;
        }

    .nav-live-mutable:not(:disabled) {
        width: 84px;
    }
}

@media (min-width: 1024px) {

    nav > :first-child {
        display: none;
    }

    nav > :nth-child(2) {
        margin-left: 16px;
    }

    nav > :nth-child(3) > [for] > span:only-child > svg:first-child,
    nav > :nth-child(3) > [for] > svg:first-child {
        display: none;
    }
}

@media (orientation: landscape) {

    @media (hover: hover) {

        transcript > text:before {
            background: var(--backgroundLight);
            position: sticky;
            top: 0;
        }
    }
}

@media (hover: hover) {

    @supports (-moz-appearance:none) {

        body,
        button,
        contextmenu,
        input[type=decimal],
        input[type=number],
        input[type=password],
        input[type=text],
        map .map-view,
        select,
        textarea,
        .ui-datepicker-calendar > tbody > tr > td > a {
            font-weight: 300;
        }
    }

    body:not(.default-scroll) * {
        scrollbar-color: #ccc var(--backgroundLight);
        scrollbar-width: thin;
    }

    body:not(.default-scroll) listbox::-webkit-scrollbar-track,
    body:not(.default-scroll) tree::-webkit-scrollbar-track {
        background: var(--inputBackgroundLight);
    }

    body:not(.default-scroll) listbox:focus-within::-webkit-scrollbar-track,
    body:not(.default-scroll) tree:focus-within::-webkit-scrollbar-track {
        background: var(--inputHighlightBackgroundLight);
    }

    body:not(.default-scroll) survey {
        scrollbar-color: #ccc var(--menuBackgroundLight);
    }

        body:not(.default-scroll) survey::-webkit-scrollbar-thumb {
            background: #666;
        }

        body:not(.default-scroll) survey::-webkit-scrollbar-track {
            background: var(--menuBackgroundLight);
        }

    body:not(.default-scroll) ::-webkit-scrollbar {
        background: transparent;
        height: 8px;
        width: 8px;
    }

    body:not(.default-scroll) ::-webkit-scrollbar-corner {
        background: transparent;
    }

    body:not(.default-scroll) ::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 6px;
    }

    body:not(.default-scroll) ::-webkit-scrollbar-track {
        background: var(--backgroundLight);
    }

    body:not(.default-scroll) waveform::-webkit-scrollbar-thumb {
        background: #444;
    }

    body:not(.default-scroll) waveform::-webkit-scrollbar-track {
        background: #000;
    }
}

@media (hover: none) {

    body {
        --buttonSize: 42px;
        --checkboxSize: 22px;
        --colorPickerSelectorSize: 40px;
        --colorPickerStripSize: 20px;
        --inputSize: 42px;
        --playerButtonSize: 60px;
        --rangeThumbOffset: -8px;
        --rangeThumbSize: 24px;
        --rangeTrackSize: 10px;
        --scenarioDeviceSize: 64px;
        --tabSize: 60px;
    }

    .tabs > button > svg {
        height: 32px;
        width: 32px;
    }

    player > controls {
        left: 24px;
        height: 80px;
        margin-top: 26px;
        right: 24px;
    }

        player > controls > :nth-child(5):hover,
        player > controls > :nth-child(5).dragging {
            width: 190px;
        }

        player > controls > :nth-child(5) > :last-child {
            margin-left: 20px;
        }

        player > controls > dock > div > table > tbody > :not(:last-child) > td {
            padding-bottom: 24px;
        }

        player > controls > dock > div > table > tbody > tr > :first-child,
        player > controls > dock > div > table > tbody > tr > :last-child,
        player > controls > times,
        player > waveform > m > t {
            font-size: medium;
        }

        player > controls > dock > div > table > tbody > tr > :first-child {
            padding-right: 32px;
        }

        player > controls > dock > div > table > tbody > tr > :last-child:not([colspan]) {
            text-align: right;
            width: 42px;
        }

        player > controls > dock > div > table > tbody > tr > :nth-child(2) > range {
            margin-bottom: 1px;
            width: 65px;
        }

        player > controls > range {
            margin-bottom: 6px;
        }

    player:not(.player-no-video) > controls:before {
        left: -24px;
        right: -24px;
    }

    player:not(.player-no-video) > waveform {
        height: calc(25% - 1px);
        margin-bottom: 96px;
    }

    .player-no-video > controls {
        margin-top: 24px;
    }

    .player-no-video > controls,
    .player-no-video > waveform {
        margin-left: 24px;
        margin-right: 24px;
    }

    .player-no-video > waveform {
        height: calc(100% - 111px);
    }

    scenario > :last-child > end,
    scenario > :last-child > start {
        flex-basis: 200px;
        font-size: initial;
    }

    waveform {
        overflow-x: auto;
    }
}