html, body {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    height: 100%;
    font-family: "Nunito";
    font-style: normal;
}

body {
    --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);
    --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;
    --treeNodeSize: 40px;
    --warnBorderLight: #f00;
    --warnFontLight: #f00;
    background: var(--backgroundLight);
    color: var(--fontLight);
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    height: 100%;
}

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

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

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

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

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

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

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;
}

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],
input[type=email],
numericupdown,
select {
    height: var(--inputSize);
}

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

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

input[type=decimal]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=text]::placeholder,
input[type=email]::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,
input[type=email]:focus::placeholder,
textarea:focus::placeholder {
    color: var(--inputHiglightPlaceholderFontLight);
}

input[type=decimal]:disabled,
input[type=number]:disabled,
input[type=password]:disabled,
input[type=text]:disabled,
input[type=email]: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,
input[type=email]:disabled::placeholder,
textarea:disabled::placeholder {
    color: var(--inputDisabledPlaceholderFontLight);
}


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

.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));
}

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

textbox {
    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 {
    background: var(--inputDisabledBackgroundLight);
    border-color: var(--inputDisabledBorderLight);
    cursor: default;
}

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

@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);
    }

    3%, 11% {
        transform: rotate(-21deg);
    }

    5% {
        transform: rotate(25.5deg);
    }

    7% {
        transform: rotate(-24deg);
    }

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

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

    17% {
        transform: rotate(16.5deg);
    }

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

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

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

    25% {
        transform: rotate(10.5deg);
    }

    27% {
        transform: rotate(-9deg);
    }

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

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

    33% {
        transform: rotate(4.5deg);
    }

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

    37% {
        transform: rotate(1.5deg);
    }

    39% {
        transform: rotate(-0.75deg);
    }

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

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

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

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (hover: hover) {

    @supports (-moz-appearance:none) {

        body,
        button,
        contextmenu,
        input[type=decimal],
        input[type=number],
        input[type=password],
        input[type=text],
        input[type=email],
        mapper .mapper-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;
    }
}