xp.css/dist/XP.css.map

A design system for building faithful recreations of old UIs

{"version":3,"sources":["../themes/XP/index.scss","../gui/_fonts.scss","../gui/_global.scss","../gui/_buttons.scss","../gui/_forms.scss","../gui/_window.scss","../gui/_treeview.scss","../gui/_groupbox.scss","../gui/_tabs.scss","../themes/XP/_global.scss","../themes/XP/_window.scss","../themes/XP/_buttons.scss","../themes/XP/_forms.scss","../themes/XP/_groupbox.scss","../themes/XP/_tabs.scss","../themes/XP/_treeview.scss","../themes/XP/_progressbar.scss","<no source>"],"names":[],"mappings":"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","file":"XP.css","sourcesContent":["/*! XP.css v0.2.6 - https://botoxparty.github.io/XP.css/ */\n/**\n * XP theme for GUI.css\n * Copyright (c) 2020 Adam Hammad <adamham.dev>\n * Based on 98.css by Jordan Scales <thatjdanisso.cool>\n * https://github.com/botoxparty/XP.css/blob/main/LICENSE\n */\n\n @import \"../../gui/index.scss\";\n @import \"_variables.scss\";\n @import \"_global.scss\";\n @import \"_window.scss\";\n @import \"_buttons.scss\";\n @import \"_forms.scss\";\n @import \"_groupbox.scss\";\n @import \"_tabs.scss\";\n @import \"_treeview.scss\";\n @import \"_progressbar.scss\";\n ","/*-------------------------------------------*\\\n    Fonts\n\\*-------------------------------------------*/\n\n@font-face {\n    font-family: \"Pixelated MS Sans Serif\";\n    src: url(\"fonts/converted/ms_sans_serif.woff\") format(\"woff\");\n    src: url(\"fonts/converted/ms_sans_serif.woff2\") format(\"woff2\");\n    font-weight: normal;\n    font-style: normal;\n}\n@font-face {\n    font-family: \"Pixelated MS Sans Serif\";\n    src: url(\"fonts/converted/ms_sans_serif_bold.woff\") format(\"woff\");\n    src: url(\"fonts/converted/ms_sans_serif_bold.woff2\") format(\"woff2\");\n    font-weight: bold;\n    font-style: normal;\n}\n\n@font-face {\n    font-family: \"Perfect DOS VGA 437 Win\";\n    src: url(\"fonts/converted/PerfectDOSVGA437Win.woff2\") format(\"woff2\"),\n        url(\"fonts/converted/PerfectDOSVGA437Win.woff\") format(\"woff\");\n    font-weight: normal;\n    font-style: normal;\n}\n","/*-------------------------------------------*\\\n    Global\n\\*-------------------------------------------*/\n\nbody {\n    font-family: Arial;\n    font-size: 12px;\n    color: #222222;\n}\n.surface {\n    background: var(--surface);\n}\nh1 {\n    font-size: 5rem;\n}\nh2 {\n    font-size: 2.5rem;\n}\nh3 {\n    font-size: 2rem;\n}\nh4 {\n    font-size: 1.5rem;\n}\nu {\n    text-decoration: none;\n    border-bottom: 0.5px solid #222222;\n}\n\na {\n    color: var(--link-blue);\n    &:focus {\n        outline: 1px dotted var(--link-blue);\n    }\n}\n\ncode {\n    font-family: monospace;\n    * {\n        font-family: monospace;\n    }\n}\npre {\n    display: block;\n    padding: 12px 8px;\n    background-color: black;\n    color: #c0c0c0;\n    font-family: \"Perfect DOS VGA 437 Win\";\n    font-size: 1rem;\n    margin: 0;\n    * {\n        font-family: \"Perfect DOS VGA 437 Win\";\n    }\n}\nsummary {\n    &:focus {\n        outline: 1px dotted #000000;\n    }\n}\n::-webkit-scrollbar {\n    width: 16px;\n    &:horizontal {\n        height: 17px;\n    }\n}\n::-webkit-scrollbar-corner {\n    background: var(--button-face);\n}\n::-webkit-scrollbar {\n    width: 16px;\n    &:horizontal {\n        height: 17px;\n    }\n}\n::-webkit-scrollbar-corner {\n    background: var(--button-face);\n}\n::-webkit-scrollbar-track {\n    background-image: svg-load(\"./icon/scrollbar-background.svg\");\n}\n::-webkit-scrollbar-thumb {\n    background-color: var(--button-face);\n    box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n}\n::-webkit-scrollbar-button:horizontal:start:decrement,\n::-webkit-scrollbar-button:horizontal:end:increment,\n::-webkit-scrollbar-button:vertical:start:decrement,\n::-webkit-scrollbar-button:vertical:end:increment {\n    display: block;\n}\n::-webkit-scrollbar-button {\n    &:vertical {\n        &:start {\n            height: 17px;\n            background-image: svg-load(\"./icon/button-up.svg\");\n        }\n        &:end {\n            height: 17px;\n            background-image: svg-load(\"./icon/button-down.svg\");\n        }\n    }\n    &:horizontal {\n        &:start {\n            width: 16px;\n            background-image: svg-load(\"./icon/button-left.svg\");\n        }\n        &:end {\n            width: 16px;\n            background-image: svg-load(\"./icon/button-right.svg\");\n        }\n    }\n}\n","/*-------------------------------------------*\\\n    Buttons\n\\*-------------------------------------------*/\n\nbutton {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n    box-sizing: border-box;\n    border: none;\n    background: var(--surface);\n    box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n    border-radius: 0;\n    min-width: 75px;\n    min-height: 23px;\n    padding: 0 12px;\n    &:not(:disabled) {\n        &:active,\n        &.active {\n            box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);\n        }\n    }\n    &:focus,\n    &.focused {\n        outline: 1px dotted #000000;\n        outline-offset: -4px;\n    }\n    &::-moz-focus-inner {\n        border: 0;\n    }\n}\n","/*-------------------------------------------*\\\n    Forms\n\\*-------------------------------------------*/\n\nlabel {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n    display: inline-flex;\n    align-items: center;\n}\ninput {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n}\ntextarea {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n    padding: 3px 4px;\n    border: none;\n    background-color: var(--button-highlight);\n    box-sizing: border-box;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    border-radius: 0;\n    &:focus {\n        outline: none;\n    }\n}\nselect {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n    padding: 3px 4px;\n    border: none;\n    background-color: var(--button-highlight);\n    box-sizing: border-box;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    border-radius: 0;\n    height: 21px;\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    position: relative;\n    padding-right: 32px;\n    background-image: svg-load(\"./icon/button-down.svg\");\n    background-position: top 2px right 2px;\n    background-repeat: no-repeat;\n    border-radius: 0;\n    &:focus {\n        outline: none;\n        color: var(--button-highlight);\n        background-color: var(--dialog-blue);\n        option {\n            color: #000;\n            background-color: #fff;\n        }\n    }\n    &:active {\n        background-image: svg-load(\"./icon/button-down-active.svg\");\n    }\n}\noption {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n}\n.vertical-bar {\n    width: 4px;\n    height: 20px;\n    background: #c0c0c0;\n    box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n}\n&:disabled {\n    color: var(--button-shadow);\n    text-shadow: 1px 1px 0 var(--button-highlight);\n    + {\n        label {\n            color: var(--button-shadow);\n            text-shadow: 1px 1px 0 var(--button-highlight);\n        }\n    }\n}\ninput[type=\"radio\"] {\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    margin: 0;\n    background: 0;\n    position: fixed;\n    opacity: 0;\n    border: none;\n    + {\n        label {\n            line-height: 13px;\n            position: relative;\n            margin-left: var(--radio-total-width);\n            &::before {\n                content: \"\";\n                position: absolute;\n                top: 0;\n                left: calc(-1 * (var(--radio-total-width-precalc)));\n                display: inline-block;\n                width: var(--radio-width);\n                height: var(--radio-width);\n                margin-right: var(--radio-label-spacing);\n                background: svg-load(\"./icon/radio-border.svg\");\n            }\n        }\n    }\n    &:active {\n        + {\n            label {\n                &::before {\n                    background: svg-load(\"./icon/radio-border-disabled.svg\");\n                }\n            }\n        }\n    }\n    &:checked {\n        + {\n            label {\n                &::after {\n                    content: \"\";\n                    display: block;\n                    width: var(--radio-dot-width);\n                    height: var(--radio-dot-width);\n                    top: var(--radio-dot-top);\n                    left: var(--radio-dot-left);\n                    position: absolute;\n                    background: svg-load(\"./icon/radio-dot.svg\");\n                }\n            }\n        }\n    }\n    &:focus {\n        + {\n            label {\n                outline: 1px dotted #000000;\n            }\n        }\n    }\n}\ninput[type=\"checkbox\"] {\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    margin: 0;\n    background: 0;\n    position: fixed;\n    opacity: 0;\n    border: none;\n    + {\n        label {\n            line-height: 13px;\n            position: relative;\n            margin-left: var(--checkbox-total-width);\n            &::before {\n                content: \"\";\n                position: absolute;\n                left: calc(-1 * (var(--checkbox-total-width-precalc)));\n                display: inline-block;\n                width: var(--checkbox-width);\n                height: var(--checkbox-width);\n                background: var(--button-highlight);\n                box-shadow: var(--border-field);\n                margin-right: var(--radio-label-spacing);\n            }\n        }\n    }\n    &:focus {\n        + {\n            label {\n                outline: 1px dotted #000000;\n            }\n        }\n    }\n    &:active {\n        + {\n            label {\n                &::before {\n                    background: var(--surface);\n                }\n            }\n        }\n    }\n    &:checked {\n        + {\n            label {\n                &::after {\n                    content: \"\";\n                    display: block;\n                    width: var(--checkmark-width);\n                    height: var(--checkmark-width);\n                    position: absolute;\n                    background: svg-load(\"./icon/checkmark.svg\");\n                    top: 1px;\n                }\n            }\n        }\n    }\n}\ninput[type=\"radio\"][disabled] {\n    + {\n        label {\n            &::before {\n                background: svg-load(\"./icon/radio-border-disabled.svg\");\n            }\n        }\n    }\n    &:checked {\n        + {\n            label {\n                &::after {\n                    background: svg-load(\"./icon/radio-dot-disabled.svg\");\n                }\n            }\n        }\n    }\n}\ninput[type=\"checkbox\"][disabled] {\n    + {\n        label {\n            &::before {\n                background: var(--surface);\n            }\n        }\n    }\n    &:checked {\n        + {\n            label {\n                &::after {\n                    background: svg-load(\"./icon/checkmark-disabled.svg\");\n                }\n            }\n        }\n    }\n}\ninput[type=\"text\"],\ninput[type=\"password\"],\ninput[type=\"email\"] {\n    padding: 3px 4px;\n    border: solid #7f9db9 1px;\n    background-color: var(--button-highlight);\n    box-sizing: border-box;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    border-radius: 0;\n    height: 21px;\n    line-height: 2;\n    &:focus {\n        outline: none;\n    }\n}\ninput[type=\"range\"] {\n    -webkit-appearance: none;\n    width: 100%;\n    background: transparent;\n    &:focus {\n        outline: none;\n    }\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        height: 21px;\n        width: 11px;\n        background: svg-load(\"./icon/indicator-horizontal.svg\");\n        transform: translateY(-8px);\n    }\n    &::-moz-range-thumb {\n        height: 21px;\n        width: 11px;\n        border: 0;\n        border-radius: 0;\n        background: svg-load(\"./icon/indicator-horizontal.svg\");\n        transform: translateY(2px);\n    }\n    &::-webkit-slider-runnable-track {\n        width: 100%;\n        height: 2px;\n        box-sizing: border-box;\n        background: black;\n        border-right: 1px solid grey;\n        border-bottom: 1px solid grey;\n        box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey,\n            0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;\n    }\n    &::-moz-range-track {\n        width: 100%;\n        height: 2px;\n        box-sizing: border-box;\n        background: black;\n        border-right: 1px solid grey;\n        border-bottom: 1px solid grey;\n        box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey,\n            0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;\n    }\n}\ninput[type=\"range\"].has-box-indicator {\n    &::-webkit-slider-thumb {\n        background: svg-load(\"./icon/indicator-rectangle-horizontal.svg\");\n        transform: translateY(-10px);\n    }\n    &::-moz-range-thumb {\n        background: svg-load(\"./icon/indicator-rectangle-horizontal.svg\");\n        transform: translateY(0px);\n    }\n}\n.is-vertical {\n    display: inline-block;\n    width: 4px;\n    height: 150px;\n    transform: translateY(50%);\n    > input[type=\"range\"] {\n        width: 150px;\n        height: 4px;\n        margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0 var(--range-spacing);\n        transform-origin: left;\n        transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));\n        &::-webkit-slider-runnable-track {\n            border-left: 1px solid grey;\n            border-right: 0;\n            border-bottom: 1px solid grey;\n            box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey, 1px -1px 0 darkgrey,\n                0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;\n        }\n        &::-moz-range-track {\n            border-left: 1px solid grey;\n            border-right: 0;\n            border-bottom: 1px solid grey;\n            box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey, 1px -1px 0 darkgrey,\n                0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;\n        }\n        &::-webkit-slider-thumb {\n            transform: translateY(-8px) scaleX(-1);\n        }\n        &::-moz-range-thumb {\n            transform: translateY(2px) scaleX(-1);\n        }\n    }\n    > input[type=\"range\"].has-box-indicator {\n        &::-webkit-slider-thumb {\n            transform: translateY(-10px) scaleX(-1);\n        }\n        &::-moz-range-thumb {\n            transform: translateY(0px) scaleX(-1);\n        }\n    }\n}\n","/*-------------------------------------------*\\\n    Window\n\\*-------------------------------------------*/\n\n:root {\n    --title-bar-bg: black;\n}\n.window {\n    font-size: 11px;\n    box-shadow: var(--border-window-outer), var(--border-window-inner);\n    background: var(--surface);\n    padding: 3px;\n    fieldset {\n        margin-bottom: 9px;\n    }\n}\n.title-bar {\n    font-size: 11px;\n    background: var(--title-bar-bg);\n    padding: 3px 2px 3px 3px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n.title-bar-text {\n    font-weight: bold;\n    color: white;\n    letter-spacing: 0;\n    margin-right: 24px;\n}\n.title-bar-controls {\n    display: flex;\n    button {\n        padding: 0;\n        display: block;\n        min-width: 16px;\n        min-height: 14px;\n        &:focus {\n            outline: none;\n        }\n    }\n    button[aria-label=\"Minimize\"] {\n    }\n    button[aria-label=\"Maximize\"] {\n    }\n    button[aria-label=\"Help\"] {\n    }\n    button[aria-label=\"Close\"] {\n    }\n}\n.window-body {\n    margin: var(--element-spacing);\n    pre {\n        margin: -8px;\n    }\n}\n\n.status-bar {\n    margin: 0px 1px;\n    display: flex;\n    gap: 1px;\n}\n\n.status-bar-field {\n    box-shadow: var(--border-status-bar-field);\n    flex-grow: 1;\n    padding: 2px 3px;\n    margin: 0;\n}","/*-------------------------------------------*\\\n    Tree View\n\\*-------------------------------------------*/\n\nul.tree-view {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n    display: block;\n    background: var(--button-highlight);\n    padding: 6px;\n    margin: 0;\n    li {\n        list-style-type: none;\n        margin-top: 3px;\n    }\n    a {\n        text-decoration: none;\n        color: #000;\n        &:focus {\n            background-color: var(--dialog-blue);\n            color: var(--button-highlight);\n        }\n    }\n    ul {\n        margin-top: 3px;\n        margin-left: 16px;\n        padding-left: 16px;\n        border-left: 1px dotted #808080;\n        > li {\n            position: relative;\n            &::before {\n                content: \"\";\n                display: block;\n                position: absolute;\n                left: -16px;\n                top: 6px;\n                width: 12px;\n                border-bottom: 1px dotted #808080;\n            }\n            &:last-child {\n                &::after {\n                    content: \"\";\n                    display: block;\n                    position: absolute;\n                    left: -20px;\n                    top: 7px;\n                    bottom: 0px;\n                    width: 8px;\n                    background: var(--button-highlight);\n                }\n            }\n        }\n        details {\n            > summary {\n                &:before {\n                    margin-left: -22px;\n                    position: relative;\n                    z-index: 1;\n                }\n            }\n        }\n    }\n    details {\n        margin-top: 0;\n        > summary {\n            &:before {\n                text-align: center;\n                display: block;\n                float: left;\n                content: \"+\";\n                border: 1px solid #808080;\n                width: 8px;\n                height: 9px;\n                line-height: 9px;\n                margin-right: 5px;\n                padding-left: 1px;\n                background-color: #fff;\n            }\n        }\n    }\n    details[open] {\n        summary {\n            margin-bottom: 0;\n        }\n        > summary {\n            &:before {\n                content: \"-\";\n            }\n        }\n    }\n}\n","/*-------------------------------------------*\\\n    GroupBox\n\\*-------------------------------------------*/\n\nfieldset {\n    border-image: svg-load(\"./icon/groupbox-border.svg\") 2;\n    padding: calc(2 * var(--border-width) + var(--element-spacing));\n    padding-block-start: var(--element-spacing);\n    margin: 0;\n}\nlegend {\n    background: var(--surface);\n}\n.field-row {\n    display: flex;\n    align-items: center;\n    > * {\n        + {\n            * {\n                margin-left: var(--grouped-element-spacing);\n            }\n        }\n    }\n}\n[class^=\"field-row\"] {\n    + {\n        [class^=\"field-row\"] {\n            margin-top: var(--grouped-element-spacing);\n        }\n    }\n}\n.field-row-stacked {\n    display: flex;\n    flex-direction: column;\n    * {\n        + {\n            * {\n                margin-top: var(--grouped-element-spacing);\n            }\n        }\n    }\n}\n","/*-------------------------------------------*\\\n    Tabs\n\\*-------------------------------------------*/\n\n:root {\n    --tab-border: 1px solid #888;\n    --tab-bg: var(--surface);\n}\n\n[role=\"tabpanel\"] {\n    position: relative;\n    z-index: 2;\n}\n\nmenu[role=\"tablist\"] {\n    position: relative;\n    margin: 0 0 -2px 0;\n    text-indent: 0;\n    list-style-type: none;\n    display: flex;\n    padding-left: 3px;\n    button {\n        border-top-left-radius: 3px;\n        border-top-right-radius: 3px;\n        z-index: 1;\n        display: block;\n        color: #222;\n        text-decoration: none;\n        min-width: unset;\n        &[aria-selected=\"true\"] {\n            padding-bottom: 2px;\n            margin-top: -2px;\n            background-color: var(--surface);\n            position: relative;\n            z-index: 8;\n            margin-left: -3px;\n            margin-bottom: 1px;\n        }\n        &:focus {\n            outline: 1px dotted #222;\n            outline-offset: -4px;\n        }\n    }\n    &.justified {\n        button {\n            flex-grow: 1;\n            text-align: center;\n        }\n    }\n}\n\n[role=\"tabpanel\"] {\n    padding: 14px;\n    clear: both;\n    background: var(--tab-bg);\n    border: var(--tab-border);\n    position: relative;\n    z-index: 2;\n    margin-bottom: 9px;\n}\n","/*-------------------------------------------*\\\n    Global\n\\*-------------------------------------------*/\n\n::-webkit-scrollbar {\n    width: 17px;\n}\n::-webkit-scrollbar-corner {\n    background: var(--button-face);\n}\n::-webkit-scrollbar-track {\n    &:vertical {\n        background-image: svg-load(\"./icon/scroll-background.svg\");\n    }\n    &:horizontal {\n        background-image: svg-load(\"./icon/scroll-background-horizontal.svg\");\n    }\n}\n::-webkit-scrollbar-thumb {\n    background-position: center;\n    background-repeat: no-repeat;\n    background-color: #c8d6fb;\n    background-size: 7px;\n    border: 1px solid white;\n    border-radius: 2px;\n    box-shadow: inset -3px 0 #bad1fc, inset 1px 1px #b7caf5;\n    &:vertical {\n        background-image: svg-load(\"./icon/scroll-thumb.svg\");\n    }\n    &:horizontal {\n        background-size: 8px;\n        background-image: svg-load(\"./icon/scroll-thumb-horizontal.svg\");\n    }\n}\n::-webkit-scrollbar-button {\n    &:vertical {\n        &:start {\n            height: 17px;\n            background-image: svg-load(\"./icon/scroll-arrow-up.svg\");\n        }\n        &:end {\n            height: 17px;\n            background-image: svg-load(\"./icon/scroll-arrow-down.svg\");\n        }\n    }\n    &:horizontal {\n        &:start {\n            width: 17px;\n            background-image: svg-load(\"./icon/scroll-arrow-left.svg\");\n        }\n        &:end {\n            width: 17px;\n            background-image: svg-load(\"./icon/scroll-arrow-right.svg\");\n        }\n    }\n}\n","/*-------------------------------------------*\\\n    Window\n\\*-------------------------------------------*/\n\n.window {\n    box-shadow: inset -1px -1px #00138c, inset 1px 1px #0831d9, inset -2px -2px #001ea0, inset 2px 2px #166aee,\n        inset -3px -3px #003bda, inset 3px 3px #0855dd;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 8px;\n    padding: 0 0 3px 0;\n    -webkit-font-smoothing: antialiased;\n}\n.title-bar {\n    font-family: \"Trebuchet MS\";\n    background: linear-gradient(\n        180deg,\n        rgba(9, 151, 255, 1) 0%,\n        rgba(0, 83, 238, 1) 8%,\n        rgba(0, 80, 238, 1) 40%,\n        rgba(0, 102, 255, 1) 88%,\n        rgba(0, 102, 255, 1) 93%,\n        rgba(0, 91, 255, 1) 95%,\n        rgba(0, 61, 215, 1) 96%,\n        rgba(0, 61, 215, 1) 100%\n    );\n    padding: 3px 5px 3px 3px;\n    border-top: 1px solid #0831d9;\n    border-left: 1px solid #0831d9;\n    border-right: 1px solid #001ea0;\n    border-top-left-radius: 8px;\n    border-top-right-radius: 7px;\n    font-size: 13px;\n    text-shadow: 1px 1px #0f1089;\n    height: 21px;\n}\n\n.title-bar-text {\n    padding-left: 3px;\n}\n\n.title-bar-controls {\n    display: flex;\n    button {\n        min-width: 21px;\n        min-height: 21px;\n        margin-left: 2px;\n        background-repeat: no-repeat;\n        background-position: center;\n        box-shadow: none;\n        background-color: #0050ee;\n        transition: background 100ms;\n        border: none;\n        &:active,\n        &:hover,\n        &:focus {\n            box-shadow: none !important;\n        }\n    }\n    button[aria-label=\"Minimize\"] {\n        background-image: svg-load(\"./icon/minimize.svg\");\n        &:hover {\n            background-image: svg-load(\"./icon/minimize-hover.svg\");\n        }\n        &:not(:disabled):active {\n            background-image: svg-load(\"./icon/minimize-active.svg\");\n        }\n    }\n    button[aria-label=\"Maximize\"] {\n        background-image: svg-load(\"./icon/maximize.svg\");\n        &:hover {\n            background-image: svg-load(\"./icon/maximize-hover.svg\");\n        }\n        &:not(:disabled):active {\n            background-image: svg-load(\"./icon/maximize-active.svg\");\n        }\n    }\n    button[aria-label=\"Restore\"] {\n        background-image: svg-load(\"./icon/restore.svg\");\n        &:hover {\n            background-image: svg-load(\"./icon/restore-hover.svg\");\n        }\n        &:not(:disabled):active {\n            background-image: svg-load(\"./icon/restore-active.svg\");\n        }\n    }\n    button[aria-label=\"Help\"] {\n        background-image: svg-load(\"./icon/help.svg\");\n        &:hover {\n            background-image: svg-load(\"./icon/help-hover.svg\");\n        }\n        &:not(:disabled):active {\n            background-image: svg-load(\"./icon/help-active.svg\");\n        }\n    }\n    button[aria-label=\"Close\"] {\n        background-image: svg-load(\"./icon/close.svg\");\n        &:hover {\n            background-image: svg-load(\"./icon/close-hover.svg\");\n        }\n        &:not(:disabled):active {\n            background-image: svg-load(\"./icon/close-active.svg\");\n        }\n    }\n}\n\n.status-bar {\n    margin: 0 3px;\n    box-shadow: inset 0px 1px 2px var(--button-shadow);\n    padding: 2px 1px;\n    gap: 0px;\n}\n\n.status-bar-field {\n    font-family: var(--sans-serif);\n    -webkit-font-smoothing: antialiased;\n    box-shadow: none;\n    padding: 1px 2px;\n    border-right: 1px solid rgba(208, 206, 191, 0.75);\n    border-left: 1px solid rgba(255, 255, 255, 0.75);\n    &:first-of-type{\n        border-left: none;\n    }\n    &:last-of-type {\n        border-right: none;\n    }\n}\n","/*-------------------------------------------*\\\n    Buttons\n\\*-------------------------------------------*/\n\nbutton {\n    font-family: var(--sans-serif);\n    -webkit-font-smoothing: antialiased;\n    font-size: 11px;\n    box-sizing: border-box;\n    border: 1px solid #003c74;\n    background: linear-gradient(\n        180deg,\n        rgba(255, 255, 255, 1) 0%,\n        rgba(236, 235, 229, 1) 86%,\n        rgba(216, 208, 196, 1) 100%\n    );\n    box-shadow: none;\n    border-radius: 3px;\n    &:not(:disabled) {\n        &:active,\n        &.active {\n            box-shadow: none;\n            background: linear-gradient(\n                180deg,\n                rgba(205, 202, 195, 1) 0%,\n                rgba(227, 227, 219, 1) 8%,\n                rgba(229, 229, 222, 1) 94%,\n                rgba(242, 242, 241, 1) 100%\n            );\n        }\n        &:hover {\n            box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a;\n        }\n    }\n    &:focus,\n    &.focused {\n        box-shadow: inset -1px 1px #cee7ff, inset 1px 2px #98b8ea, inset -2px 2px #bcd4f6, inset 1px -1px #89ade4,\n            inset 2px -2px #89ade4;\n    }\n    &::-moz-focus-inner {\n        border: 0;\n    }\n}\n","/*-------------------------------------------*\\\n    Forms\n\\*-------------------------------------------*/\n\n:root {\n    --checkmark-width: 11px;\n    --radio-dot-width: 5px;\n    --radio-dot-top: 5px;\n    --radio-width: 13px;\n    --radio-inner-shadow-hover: inset -2px -2px #f8b636, inset 2px 2px #fedf9c;\n    --radio-bg-active: linear-gradient(135deg, rgba(176, 176, 167, 1) 0%, rgba(227, 225, 210, 1) 100%);\n    --radio-bg: linear-gradient(135deg, rgba(220, 220, 215, 1) 0%, rgba(255, 255, 255, 1) 100%);\n    --radio-border: 1px solid #1d5281;\n    --radio-border-disabled: 1px solid #cac8bb;\n}\n\nlabel,\nselect,\ninput,\ntextarea,\noption {\n    -webkit-font-smoothing: antialiased;\n}\n\nselect {\n    border: 1px solid #7f9db9;\n    background-image: svg-load(\"./icon/dropdown.svg\");\n    background-size: 15px;\n    &:focus {\n        box-shadow: inset 2px 2px white, inset -2px -2px white;\n    }\n    &:hover {\n        background-image: svg-load(\"./icon/dropdown-hover.svg\");\n    }\n    &:active {\n        background-image: svg-load(\"./icon/dropdown-active.svg\");\n    }\n}\n\ninput[type=\"radio\"] {\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    margin: 0;\n    background: 0;\n    position: fixed;\n    opacity: 0;\n    border: none;\n    + {\n        label {\n            line-height: 16px;\n            &::before {\n                background: var(--radio-bg);\n                border-radius: 50%;\n                border: var(--radio-border);\n            }\n        }\n    }\n    &:not([disabled]):not(:active) {\n        + label {\n            &:hover:before {\n                box-shadow: var(--radio-inner-shadow-hover);\n            }\n        }\n    }\n    &:active {\n        + {\n            label {\n                &::before {\n                    background: var(--radio-bg-active);\n                }\n            }\n        }\n    }\n    &:checked {\n        + {\n            label {\n                &::after {\n                    background: svg-load(\"./icon/radio-dot.svg\");\n                }\n            }\n        }\n    }\n    &:focus {\n        + {\n            label {\n                outline: 1px dotted #000000;\n            }\n        }\n    }\n}\ninput[type=\"radio\"][disabled] {\n    + {\n        label {\n            &::before {\n                border: var(--radio-border-disabled);\n                background: white;\n            }\n        }\n    }\n    &:checked {\n        + {\n            label {\n                &::after {\n                    background: svg-load(\"./icon/radio-dot-disabled.svg\");\n                }\n            }\n        }\n    }\n}\ninput[type=\"checkbox\"] {\n    + label {\n        &:before {\n            box-shadow: none;\n            border: var(--radio-border);\n            background: var(--radio-bg);\n        }\n    }\n    &:checked + label {\n        &:after {\n            background: svg-load(\"./icon/checkmark.svg\");\n            left: -17px;\n        }\n    }\n    &:not([disabled]):not(:active) {\n        + label {\n            &:hover:before {\n                box-shadow: var(--radio-inner-shadow-hover);\n            }\n        }\n    }\n    &:active {\n        + {\n            label {\n                &::before {\n                    background: var(--radio-bg-active);\n                }\n            }\n        }\n    }\n}\n\ninput[type=\"checkbox\"][disabled] {\n    + {\n        label {\n            &::before {\n                background: white;\n                border: var(--radio-border-disabled);\n            }\n        }\n    }\n    &:checked {\n        + {\n            label {\n                &::after {\n                    background: svg-load(\"./icon/checkmark-disabled.svg\");\n                }\n            }\n        }\n    }\n}\n\ninput[type=\"text\"],\ninput[type=\"password\"],\ninput[type=\"email\"],\nselect {\n    height: 23px;\n}\n\ninput::selection,\ntextarea::selection {\n    background: var(--dialog-blue);\n    color: white;\n}\n\ninput[type=\"range\"] {\n    &::-webkit-slider-thumb {\n        height: 21px;\n        width: 11px;\n        background: svg-load(\"./icon/indicator-horizontal.svg\");\n        transform: translateY(-8px);\n    }\n    &::-moz-range-thumb {\n        height: 21px;\n        width: 11px;\n        border: 0;\n        border-radius: 0;\n        background: svg-load(\"./icon/indicator-horizontal.svg\");\n        transform: translateY(2px);\n    }\n    &::-webkit-slider-runnable-track {\n        width: 100%;\n        height: 2px;\n        box-sizing: border-box;\n        background: #ecebe4;\n        border-right: 1px solid #f3f2ea;\n        border-bottom: 1px solid #f3f2ea;\n        border-radius: 2px;\n        box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 #9d9c99, -1px -1px 0 #9d9c99,\n            0 -1px 0 #9d9c99, -1px 1px 0 white, 1px -1px #9d9c99;\n    }\n    &::-moz-range-track {\n        width: 100%;\n        height: 2px;\n        box-sizing: border-box;\n        background: #ecebe4;\n        border-right: 1px solid #f3f2ea;\n        border-bottom: 1px solid #f3f2ea;\n        border-radius: 2px;\n        box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 #9d9c99, -1px -1px 0 #9d9c99,\n            0 -1px 0 #9d9c99, -1px 1px 0 white, 1px -1px #9d9c99;\n    }\n}\ninput[type=\"range\"].has-box-indicator {\n    &::-webkit-slider-thumb {\n        background: svg-load(\"./icon/indicator-rectangle-horizontal.svg\");\n        transform: translateY(-10px);\n    }\n    &::-moz-range-thumb {\n        background: svg-load(\"./icon/indicator-rectangle-horizontal.svg\");\n        transform: translateY(0px);\n    }\n}\n.is-vertical {\n    > input[type=\"range\"] {\n        &::-webkit-slider-runnable-track {\n            border-left: 1px solid #f3f2ea;\n            border-right: 0;\n            border-bottom: 1px solid #f3f2ea;\n            box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 #9d9c99, 1px -1px 0 #9d9c99,\n                0 -1px 0 #9d9c99, 1px 1px 0 white, -1px -1px #9d9c99;\n        }\n        &::-moz-range-track {\n            border-left: 1px solid #f3f2ea;\n            border-right: 0;\n            border-bottom: 1px solid #f3f2ea;\n            box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 #9d9c99, 1px -1px 0 #9d9c99,\n                0 -1px 0 #9d9c99, 1px 1px 0 white, -1px -1px #9d9c99;\n        }\n    }\n}\n","/*-------------------------------------------*\\\n    GroupBox\n\\*-------------------------------------------*/\n\nfieldset {\n    border: none;\n    box-shadow: none;\n    background: white;\n    border: 1px solid #d0d0bf;\n    border-radius: 4px;\n    padding-top: 10px;\n}\nlegend {\n    background: transparent;\n    color: #0046d5;\n}\n.field-row {\n    display: flex;\n    align-items: center;\n    > * {\n        + {\n            * {\n                margin-left: var(--grouped-element-spacing);\n            }\n        }\n    }\n}\n[class^=\"field-row\"] {\n    + {\n        [class^=\"field-row\"] {\n            margin-top: var(--grouped-element-spacing);\n        }\n    }\n}\n.field-row-stacked {\n    display: flex;\n    flex-direction: column;\n    * {\n        + {\n            * {\n                margin-top: var(--grouped-element-spacing);\n            }\n        }\n    }\n}\n","/*-------------------------------------------*\\\n    Tabs\n\\*-------------------------------------------*/\n\n:root {\n    --tab-bg: linear-gradient(180deg, rgba(252, 252, 254, 1) 0%, rgba(244, 243, 238, 1) 100%);\n    --tab-border: 1px solid #919b9c;\n}\n\nmenu[role=\"tablist\"] {\n    button {\n        background: linear-gradient(\n            180deg,\n            rgba(255, 255, 255, 1) 0%,\n            rgba(250, 250, 249, 1) 26%,\n            rgba(240, 240, 234, 1) 95%,\n            rgba(236, 235, 229, 1) 100%\n        );\n        margin-left: -1px;\n        margin-right: 2px;\n        border-radius: 0;\n        border-color: #91a7b4;\n        border-top-right-radius: 3px;\n        border-top-left-radius: 3px;\n        padding: 0 12px 3px;\n        &:hover {\n            box-shadow: unset;\n            border-top: 1px solid #e68b2c;\n            box-shadow: inset 0px 2px #ffc73c;\n        }\n        &[aria-selected=\"true\"] {\n            background: #fcfcfe;\n            border-color: #919b9c;\n            margin-right: -1px;\n            border-bottom: 1px solid transparent;\n            border-top: 1px solid #e68b2c;\n            box-shadow: inset 0px 2px #ffc73c;\n            &:first-of-type {\n                &::before {\n                    content: \"\";\n                    display: block;\n                    position: absolute;\n                    z-index: -1;\n                    top: 100%;\n                    left: -1px;\n                    height: 2px;\n                    width: 0;\n                    border-left: var(--tab-border);\n                }\n            }\n        }\n    }\n}\n[role=\"tabpanel\"] {\n    box-shadow: inset 1px 1px #fcfcfe, inset -1px -1px #fcfcfe, 1px 2px 2px 0px rgba(208, 206, 191, 0.75);\n}\n","/*-------------------------------------------*\\\n    TreeView\n\\*-------------------------------------------*/\n\nul.tree-view {\n    -webkit-font-smoothing: auto;\n    border: 1px solid #7f9db9;\n    padding: 2px 5px;\n}\n","/*-------------------------------------------*\\\n    ProgressBar\n\\*-------------------------------------------*/\n\n@keyframes sliding {\n    0% {\n      transform: translateX(-30px);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n  \n  progress {\n    &,\n    &[value],\n    &:not([value]) {\n      --determinate-track: repeating-linear-gradient(\n          to right,\n          #fff 0px,\n          #fff 2px,\n          transparent 2px,\n          transparent 10px\n        ),\n        linear-gradient(\n          to bottom,\n          #acedad 0%,\n          #7be47d 14%,\n          #4cda50 28%,\n          #2ed330 42%,\n          #42d845 57%,\n          #76e275 71%,\n          #8fe791 85%,\n          #ffffff 100%\n        );\n      --indeterminate-track: repeating-linear-gradient(\n          to right,\n          transparent 0px,\n          transparent 8px,\n          #fff 8px,\n          #fff 10px,\n          transparent 10px,\n          transparent 18px,\n          #fff 18px,\n          #fff 20px,\n          transparent 20px,\n          transparent 28px,\n          #fff 28px,\n          #fff 100%\n        ),\n        linear-gradient(\n          to bottom,\n          #acedad 0%,\n          #7be47d 14%,\n          #4cda50 28%,\n          #2ed330 42%,\n          #42d845 57%,\n          #76e275 71%,\n          #8fe791 85%,\n          #ffffff 100%\n        );\n      --indeterminate-track-animation: sliding 2s linear 0s infinite;\n      --track-shadow: inset 0px 0px 1px 0px rgba(104, 104, 104, 1);\n      --track-height: 14px;\n    }\n  \n    box-sizing: border-box;\n  \n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n  \n    height: var(--track-height);\n  \n    border: 1px solid #686868;\n    border-radius: 4px;\n  \n    padding: 1px 2px 1px 0px;\n  \n    overflow: hidden;\n    background-color: #fff;\n  \n    -webkit-box-shadow: var(--track-shadow);\n    -moz-box-shadow: var(--track-shadow);\n    box-shadow: var(--track-shadow);\n  \n    /* Determinate styles */\n    &[value] {\n      /* Chrome, Safari, Edge */\n      &::-webkit-progress-bar {\n        background-color: transparent;\n      }\n      &::-webkit-progress-value {\n        border-radius: 2px;\n        background: var(--determinate-track);\n      }\n      /* Firefox */\n      &::-moz-progress-bar {\n        border-radius: 2px;\n        background: var(--determinate-track);\n      }\n    }\n  \n    /* Indeterminate styles */\n    &:not([value]) {\n      /* Apply for Chrome, Safari and Edge but animation only works in Safari */\n      &::-webkit-progress-bar {\n        width: 100%;\n        background: var(--indeterminate-track);\n        animation: var(--indeterminate-track-animation);\n      }\n  \n      /* Solution for Chrome and Edge: animate pseudo element :after */\n      & {\n        position: relative;\n      }\n      /* This pseudo element is to hide the not working -webkit-progress-bar animation above for Chrome and Edge */\n      &::before {\n        box-sizing: border-box;\n        content: \"\";\n        position: absolute;\n        top: 0;\n        left: 0;\n  \n        width: 100%;\n        height: 100%;\n  \n        background-color: #fff;\n  \n        -webkit-box-shadow: var(--track-shadow);\n        -moz-box-shadow: var(--track-shadow);\n        box-shadow: var(--track-shadow);\n      }\n      /* Real animated element */\n      &::after {\n        box-sizing: border-box;\n        content: \"\";\n        position: absolute;\n        top: 1px;\n        left: 2px;\n  \n        width: 100%;\n        height: calc(100% - 2px);\n  \n        padding: 1px 2px 1px 2px;\n  \n        border-radius: 2px;\n  \n        background: var(--indeterminate-track);\n        animation: var(--indeterminate-track-animation);\n      }\n  \n      /* Firefox */\n      &::-moz-progress-bar {\n        width: 100%;\n        background: var(--indeterminate-track);\n        animation: var(--indeterminate-track-animation);\n      }\n    }\n  }\n  ",null]}