@font-face {
    font-family: "Pixelated MS Sans Serif";
    src: url(../fonts/ms_sans_serif.woff) format("woff");
    src: url(../fonts/ms_sans_serif.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    src: url(../fonts/ms_sans_serif_bold.woff) format("woff");
    src: url(../fonts/ms_sans_serif_bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: 'IBMVGADos';
    src: url('../fonts/WebPlus_IBM_VGA_8x14.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --font-family: "Pixelated MS Sans Serif", sans-serif;
    --font: "Segoe UI","SegoeUI","Noto Sans",sans-serif;
    --dos-background: #b0b0b0;
    --win98-background: silver;
    --winxp-background: #ece9d8;
    --surface: #f0f0f0;
    /* */
    --btn-win7-highlight: #fff;
    --btn-win7-face: #f2f2f2;
    --btn-win7-face-hover: #eaf6fd;
    --btn-win7-face-active: #c4e5f6;
    --btn-win7-face-disabled: #f4f4f4;
    --btn-win7-shade-light: #ebebeb;
    --btn-win7-shade-light-default: #c3dcea;
    --btn-win7-shade-light-hovered: #bee6fd;
    --btn-win7-shade-light-active: #98d1ef;
    --btn-win7-shade-dark: #cfcfcf;
    --btn-win7-shadow: inset 0 0 0 1px #fffc;
    --btn-win7-shadow-active: inset 1px 1px 0 #0003,inset -1px 1px 0 #0001;
    --btn-win7-border: 1px solid;
    --btn-win7-border-color: #8e8f8f;
    --btn-win7-border-color-default: #5586a3;
    --btn-win7-border-color-hovered: #3c7fb1;
    --btn-win7-border-color-active: #6d91ab;
    --btn-win7-border-color-disabled: #aeb2b5;
    --btn-win7-text-color-disabled: #838383;
    --btn-win7-gradient: linear-gradient(to bottom,var(--btn-win7-face) 45%,var(--btn-win7-shade-light) 45%,var(--btn-win7-shade-dark));
    --btn-win7-gradient-hovered: linear-gradient(to bottom,var(--btn-win7-face-hover) 45%,var(--btn-win7-shade-light-hovered) 45%,#a7d9f5);
    --btn-win7-gradient-active: linear-gradient(to bottom,#e5f4fc,var(--btn-win7-face-active) 30% 50%,var(--btn-win7-shade-light-active) 50%,#68b3db);
    --element-spacing: 8px;
    --grouped-element-spacing: 6px;
    --border-radius: 3px;
    --border-width: 1px;
    /* */
    --chk-win7-width: 14px;
    --chk-win7-label-spacing: 6px;
    --chk-win7-total-width-precalc: 0;
    --chk-win7-total-width: calc(var(--checkbox-total-width-precalc));
    --checkmark-top: 0;
    --checkmark-left: 2px;
    /* */
    --tab-border: 1px solid #888;
    --tab-border-color: #888;
    --tab-bg: #fff;
    /* */
    --scrollbar-y: linear-gradient(to right,#e5e5e5,var(--surface) 20%);
    --scrollbar-x: linear-gradient(to bottom,#e5e5e5,var(--surface) 20%);
    /* */
    --win7-background-color: #4580c4;
    --win7-background-glass-stripes: linear-gradient(135deg, #fff5 70px, transparent 100px), linear-gradient(225deg, #fff5 70px, transparent 100px), linear-gradient(54deg, #0002 0 4%, #6661 6% 6%, #0002 8% 10%, #0002 15% 16%, #aaa1 17% 18%, #0002 23% 24%, #bbb2 25% 26%, #0002 31% 33%, #0002 34% 34.5%, #bbb2 36% 40%, #0002 41% 41.5%, #bbb2 44% 45%, #bbb2 46% 47%, #0002 48% 49%, #0002 50% 50.5%, #0002 56% 56.5%, #bbb2 57% 63%, #0002 67% 69%, #bbb2 69.5% 70%, #0002 73.5% 74%, #bbb2 74.5% 79%, #0002 80% 84%, #aaa2 85% 86%, #0002 87%, #bbb1 90%) left center / 100vw 100vh no-repeat fixed;
    --win7-background: linear-gradient(to right, #ffffff66, #0000001a, #ffffff33), var(--win7-background-color);
    /* */
    --win10-primary-color: #0078D4;
    --win10-background-color: #F3F3F3;
    --win10-background-color-hovered: #EAEAEA;
    --win10-background-color-active: #e2e2e2;
    --win10-background-color-disabled: #F9F9F9;
    --win10-background-color-checked: #005FB8;
    --win10-background-color-checked-hovered: #196EBF;
    --win10-background-color-checked-active: #327EC5;
    --win10-border-color-hovered: #626262;
    --win10-border-color-active: #c3c3c3;
    --win10-border-color-checked: #005FB8;
    --win10-border-color-disabled: #c3c3c3;
    --win10-border-color-checked-hovered: #196EBF;
    --win10-border-color-checked-active: #327EC5;
    /* */
    --tab-win10-border-color: #E5E5E5;
    /* */
    --dlg-win10-background-color: #F0F0F0;
    --dlg-win10-title-bar-background-color-active: #0078D4;
    --dlg-win10-title-bar-border-color-active: #0078D4;
    --dlg-win10-title-bar-controls-background-color-hover: #C42B1C;
    /* */
    --control-border-color: rgba(0, 0, 0, .3);
    --control-border-radius: 5px;
    --control-inset-shadow: inset 0 0 0 1px #fffa;
    --control-background: linear-gradient(hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, .3) 45%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, hsla(0, 0%, 100%, .5));
    --control-background-hovered: radial-gradient(circle at bottom, #2aceda, transparent 65%), linear-gradient(#b6d9ee 50%, #1a6ca1 0);
    --control-background-active: radial-gradient(circle at bottom, #0bfdfa, transparent 65%), linear-gradient(#86a7bc 50%, #092747 0);
    --control-background-close: radial-gradient(circle at -60% 50%, #0007 5% 10%, #0000 50%), radial-gradient(circle at 160% 50%, #0007 5% 10%, #0000 50%), linear-gradient(#e0a197e5, #cf796a 25% 50%, #d54f36 50%);
    --control-background-close-hovered: radial-gradient(circle at 50% 170%, #f4e676 10% 20%, #0000 60%), radial-gradient(circle at -60% 50%, #000a 5% 10%, #0000 50%), radial-gradient(circle at 160% 50%, #000a 5% 10%, #0000 50%), linear-gradient(#fb9d8b, #ee6d56 25% 50%, #d42809 50%);
    --control-background-close-active: radial-gradient(circle at 50% 170%, #dcc03f 10% 20%, #0000 60%), radial-gradient(circle at -60% 50%, #000 5% 10%, #0000 50%), radial-gradient(circle at 160% 50%, #000 5% 10%, #0000 50%), linear-gradient(#d1a894, #b67562 25% 50%, #7d0d01 50%);
}

body {
    line-height:1.1em;
}


/*-------------------------------------------*\
    INPUT CONTROLS SHARED STYLES
\*-------------------------------------------*/
.txt-win {
    all: unset;
    font-family: var(--font-family);
    font-size: 11px;
    background-color: var(--btn-win7-highlight);
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 21px;
    line-height: 2;
    font-family: var(--font-family);
    font-size: 11px;
}

    .txt-win:focus {
        outline: none;
    }

    .txt-win[disabled] {
        color: var(--btn-win7-text-color-disabled);
    }

    .txt-win.win-touch {
        height: 28px;
        font-size: 13px;
    }

label.label-txt-win.win-touch {
    font-size: 13px;
}

label.label-txt-win {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family);
    font-size: 11px;
}

    label.label-txt-win[disabled] {
        color: var(--btn-win7-text-color-disabled);
    }

.label-txt-hide {
    display: none !important;
}

/*-------------------------------------------*\
    Win XP
\*-------------------------------------------*/
.txt-win-xp {
    border: solid #7f9db9 1px;
    box-sizing: border-box;
    border-radius: 0;
    padding: 3px 4px;
}

.lbtxt-win-xp {
    font-family: var(--font-family);
    font-size: 11px;
}

/*-------------------------------------------*\
    Win 98
\*-------------------------------------------*/
.txt-win-98 {
    border: 0px;
    border-radius: 0;
    padding: 3px 4px;
    background-color: var(--btn-win7-highlight);
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}

.lbtxt-win-98 {
    font-family: var(--font-family);
    font-size: 11px;
}


/*-------------------------------------------*\
    Win 7
\*-------------------------------------------*/
.txt-win-7 {
    border: 1px solid #ccc;
    border-radius: 2px;
    border-top: 1px solid var(--btn-win7-border-color);
    font: var(--font);
    font-size: 11px;
    padding: 3px 4px 5px;
}

    .txt-win-7:focus {
        border-color: var(--btn-win7-shade-light-hovered);
        border-top-color: var(--btn-win7-shade-light-active);
        outline: none;
    }

.lbtxt-win-7 {
    font-family: unset !important;
    font: var(--font);
    font-size: 9pt;
}
/*-------------------------------------------*\
    Win 10
\*-------------------------------------------*/
.txt-win-10 {
    height: 20px;
    box-sizing: border-box;
    padding: 0 4px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 11px;
    color: #000000;
    background-color: #ffffff;
    border: 1px solid #ECECEC;
    border-bottom: 1px solid #838383;
    border-radius: 2px 2px 1px 1px;
    outline: none;
    box-shadow: none;
    transition: box-shadow 0.15s ease, border-bottom-color 0.15s ease;
}

    .txt-win-10:focus {
        border: 1px solid #ECECEC;
        border-bottom: 1px solid #0067C0;
        box-shadow: inset 0 -1px 0 0 #0067C0;
        background-color: #ffffff;
    }

    .txt-win-10:disabled {
        background-color: #F9F9F9;
        color: #808080;
        border: 1px solid #ECECEC;
        box-shadow: none;
        cursor: not-allowed;
    }

.lbtxt-win-10 {
    font-family: unset !important;
    font: var(--font);
    font-size: 9pt;
}