:root {
    /* These resources are generated. */
    /* JS: makeThemeCSSFile(renderThemeGraphics(getComputedStyle(document.documentElement))) */
    /* spell-checker: disable */
    --checker: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAG0lEQVQYV2P8/////4MHDzIwHjhw4L+9vT0DAHAFCj6esq3FAAAAAElFTkSuQmCC");
    --fieldset-border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%225%22%20height%3D%225%22%20fill%3D%22rgb(128%2C%20128%2C%20128)%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%200h5v5H0V2h2v1h1V2H0%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%200h4v4H0V1h1v2h2V1H0%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E")
        2;
    --radio-button-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%200H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z%22%20fill%3D%22rgb(128%2C%20128%2C%20128)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%201H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%203h1v1H9V3zm1%205V4h1v4h-1zm-2%202V9h1V8h1v2H8zm-4%200v1h4v-1H4zm0%200V9H2v1h2z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%202h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%202h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E");
    --radio-button-active-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%200H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z%22%20fill%3D%22rgb(128%2C%20128%2C%20128)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%201H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%203h1v1H9V3zm1%205V4h1v4h-1zm-2%202V9h1V8h1v2H8zm-4%200v1h4v-1H4zm0%200V9H2v1h2z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%202h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%202h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E");
    --radio-button-disabled-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%200H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z%22%20fill%3D%22rgb(128%2C%20128%2C%20128)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%201H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%203h1v1H9V3zm1%205V4h1v4h-1zm-2%202V9h1V8h1v2H8zm-4%200v1h4v-1H4zm0%200V9H2v1h2z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%202h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%202h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E");
    --radio-dot-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%224%22%20height%3D%224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%200H1v1H0v2h1v1h2V3h1V1H3V0z%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E");
    --radio-dot-disabled-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%224%22%20height%3D%224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%200H1v1H0v2h1v1h2V3h1V1H3V0z%22%20fill%3D%22rgb(128%2C%20128%2C%20128)%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E");
    --checkbox-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%227%22%20height%3D%227%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7%200H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E");
    --checkbox-disabled-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%227%22%20height%3D%227%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M7%200H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z%22%20fill%3D%22rgb(128%2C%20128%2C%20128)%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E");
    --select-arrow-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2217%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%200H0v16h1V1h14V0z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%201H1v14h1V2h12V1H2z%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2017H0v-1h15V0h1v17z%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15%201h-1v14H1v1h14V1z%22%20fill%3D%22rgb(128%2C%20128%2C%20128)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%20d%3D%22M2%202h12v13H2z%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11%206H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E");
    --select-arrow-active-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2217%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%200h16v17H0V0zm1%2016h14V1H1v15z%22%20fill%3D%22rgb(128%2C%20128%2C%20128)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%20d%3D%22M1%201h14v15H1z%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%207H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E");
    --range-thumb-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2211%22%20height%3D%2221%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%200v16h2v2h2v2h1v-1H3v-2H1V1h9V0z%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M1%201v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%201h1v15H8v2H6v2H5v-1h2v-2h2z%22%20fill%3D%22rgb(128%2C%20128%2C%20128)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10%200h1v16H9v2H7v2H5v1h1v-2h2v-2h2z%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E");
    --range-box-thumb-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2211%22%20height%3D%2221%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%200v20h1V1h9V0z%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%20d%3D%22M1%201h8v18H1z%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%201h1v19H1v-1h8z%22%20fill%3D%22rgb(128%2C%20128%2C%20128)%22%20%2F%3E%0A%09%09%09%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10%200h1v21H0v-1h10z%22%20fill%3D%22rgb(0%2C%200%2C%200)%22%20%2F%3E%0A%09%09%3C%2Fsvg%3E");
    --button-active-border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h256v256h-256v-256z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h192v192h-192v-192z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        64 / 2px;
    --button-normal-border-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%2F%3E%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%3C%2Fsvg%3E")
        64 / 2px;
    --inset-deep-border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(223%2C%20223%2C%20223)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        64 / 2px;
    --button-default-border-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M0%200h256v256h-256v-256z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%3Cpath%20d%3D%22M64%2064h96v32h-64v64h-32v-96z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%2F%3E%3Cpath%20d%3D%22M160%2064h32v128h-128v-32h96v-96z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%3Cpath%20d%3D%22M96%2096h64v64h-64v-64z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22256%22%20height%3D%22256%22%20stroke-width%3D%2264%22%20stroke%3D%22%20rgb(0%2C%200%2C%200)%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E")
        96 / 3px;
    --button-default-active-border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h256v256h-256v-256z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h192v192h-192v-192z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%09%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22256%22%20height%3D%22256%22%20stroke-width%3D%2264%22%20stroke%3D%22%20rgb(0%2C%200%2C%200)%22%20fill%3D%22none%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        64 / 2px;
    --scrollbar-arrows-ButtonText: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAAW0lEQVQ4T2NkGGSAcZC5h4FWDvrPwEC02ShqkR0EkkAHuBxMyEKYWYQ8jKEOXQOyo/A5BuZwqqvBZiA+3xMbilQLIWqlcUJRimwPzjRELcdQZA6hREeR4eRoBgBoXhAK6oiMhwAAAABJRU5ErkJggg==");
    --scrollbar-arrows-GrayText: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAAYElEQVQ4T2NkGGSAcZC5h4EmDmpoaPjf0NBAlNnoauGaQBLooYXLUEIWwswi5Chs6lB8gewofI6BOZwWajCCFZ/viQ1FqoUQtRI4oShFtgdnGqKWYyg1h6icQKklpOgHAM9mQArEvm5+AAAAAElFTkSuQmCC");
    --scrollbar-arrows-ButtonHilight: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAAYElEQVQ4T2NkGGSAcZC5h4EmDvr///9/RkZGosxGVwvXBJJADy1chhKyEGYWIUdhU4fiC2RH4XMMzOG0UIMRrPh8T2woUi2EqJXACUUpsj040xC1HEOpOUTlBEotIUU/AKXFQAqyTJ6DAAAAAElFTkSuQmCC");
    /* spell-checker: enable */
    --scrollbar-size: 13px;
    --scrollbar-button-inner-size: 9px;

    /* Colors */
    --ActiveBorder: rgb(192, 192, 192);
    --ActiveTitle: rgb(0, 0, 128);
    --AppWorkspace: rgb(128, 128, 128);
    --Background: rgb(0, 128, 128);
    --ButtonAlternateFace: rgb(180, 180, 180);
    --ButtonDkShadow: rgb(0, 0, 0);
    --ButtonFace: rgb(192, 192, 192);
    --ButtonHilight: rgb(255, 255, 255);
    --ButtonLight: rgb(223, 223, 223);
    --ButtonShadow: rgb(128, 128, 128);
    --ButtonText: rgb(0, 0, 0);
    --GradientActiveTitle: rgb(16, 132, 208);
    --GradientInactiveTitle: rgb(181, 181, 181);
    --GrayText: rgb(128, 128, 128);
    --Hilight: rgb(0, 0, 128);
    --HilightText: rgb(255, 255, 255);
    --HotTrackingColor: rgb(0, 0, 255);
    --InactiveBorder: rgb(192, 192, 192);
    --InactiveTitle: rgb(128, 128, 128);
    --InactiveTitleText: rgb(192, 192, 192);
    --InfoText: rgb(0, 0, 0);
    --InfoWindow: rgb(255, 255, 225);
    --Menu: rgb(192, 192, 192);
    --MenuText: rgb(0, 0, 0);
    --Scrollbar: rgb(192, 192, 192);
    --TitleText: rgb(255, 255, 255);
    --Window: rgb(255, 255, 255);
    --WindowFrame: rgb(0, 0, 0);
    --WindowText: rgb(0, 0, 0);

    /* Typography */
    --font-family-base: "MSW98UI", sans-serif;
    --font-size-base: 11px;
    --font-family-title: var(--font-family-base);
    --font-size-title: 12px;
    --font-family-menu: var(--font-family-base);
    --font-size-menu: 11px;
}

.inset-deep {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(128, 128, 128) rgb(255, 255, 255) rgb(255, 255, 255)
        rgb(128, 128, 128);
    border-color: var(--ButtonShadow) var(--ButtonHilight) var(--ButtonHilight)
        var(--ButtonShadow);
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    color: rgb(0, 0, 0);
    color: var(--ButtonText);
    /* as fallback */
    position: relative;
    /* for pseudo element(s) */
    -o-border-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M0%200h256v256h-256v-256z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%3Cpath%20d%3D%22M64%2064h96v32h-64v64h-32v-96z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%2F%3E%3Cpath%20d%3D%22M160%2064h32v128h-128v-32h96v-96z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%3Cpath%20d%3D%22M96%2096h64v64h-64v-64z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22256%22%20height%3D%22256%22%20stroke-width%3D%2264%22%20stroke%3D%22%20rgb(0%2C%200%2C%200)%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E")
        64 / 2px;
    border-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M0%200h256v256h-256v-256z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%3Cpath%20d%3D%22M64%2064h96v32h-64v64h-32v-96z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%2F%3E%3Cpath%20d%3D%22M160%2064h32v128h-128v-32h96v-96z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%3Cpath%20d%3D%22M96%2096h64v64h-64v-64z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22256%22%20height%3D%22256%22%20stroke-width%3D%2264%22%20stroke%3D%22%20rgb(0%2C%200%2C%200)%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E")
        64 / 2px;
    -o-border-image: var(--inset-deep-border-image);
    border-image: var(--inset-deep-border-image);
    border-color: rgb(128, 128, 128);
    border-color: var(--ButtonShadow);
    border-style: solid;
    border-width: 2px 2px;
}
.outset-deep {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(255, 255, 255) rgb(128, 128, 128) rgb(128, 128, 128)
        rgb(255, 255, 255);
    border-color: var(--ButtonHilight) var(--ButtonShadow) var(--ButtonShadow)
        var(--ButtonHilight);
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    color: rgb(0, 0, 0);
    color: var(--ButtonText);
    /* as fallback */
    position: relative;
    /* for pseudo element(s) */
    -o-border-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%2F%3E%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%3C%2Fsvg%3E")
        64 / 2px;
    border-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%2F%3E%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%3C%2Fsvg%3E")
        64 / 2px;
    -o-border-image: var(--button-normal-border-image);
    border-image: var(--button-normal-border-image);
    border-color: rgb(223, 223, 223) rgb(128, 128, 128) rgb(128, 128, 128)
        rgb(223, 223, 223);
    border-color: var(--ButtonLight) var(--ButtonShadow) var(--ButtonShadow)
        var(--ButtonLight);
    border-style: solid;
    border-width: 2px 2px;
}
.inset-shallow {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(128, 128, 128) rgb(255, 255, 255) rgb(255, 255, 255)
        rgb(128, 128, 128);
    border-color: var(--ButtonShadow) var(--ButtonHilight) var(--ButtonHilight)
        var(--ButtonShadow);
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    color: rgb(0, 0, 0);
    color: var(--ButtonText);
}
.outset-shallow {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(255, 255, 255) rgb(128, 128, 128) rgb(128, 128, 128)
        rgb(255, 255, 255);
    border-color: var(--ButtonHilight) var(--ButtonShadow) var(--ButtonShadow)
        var(--ButtonHilight);
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    color: rgb(0, 0, 0);
    color: var(--ButtonText);
}

button {
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    color: rgb(0, 0, 0);
    color: var(--ButtonText);
    font-family: "MSW98UI", sans-serif;
}
button:not(.lightweight) {
    outline: none; /* replaced with inner dotted focus ring (which is admittedly not so prominent...) */
    border-style: solid;
    border-width: 1px;
    border-color: rgb(255, 255, 255) rgb(128, 128, 128) rgb(128, 128, 128)
        rgb(255, 255, 255);
    border-color: var(--ButtonHilight) var(--ButtonShadow) var(--ButtonShadow)
        var(--ButtonHilight);
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    color: rgb(0, 0, 0);
    color: var(--ButtonText); /* as fallback */
    position: relative; /* for pseudo element(s) */
    -o-border-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%2F%3E%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%3C%2Fsvg%3E")
        64 / 2px;
    border-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%2F%3E%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%3C%2Fsvg%3E")
        64 / 2px;
    -o-border-image: var(--button-normal-border-image);
    border-image: var(--button-normal-border-image);
    border-color: rgb(223, 223, 223) rgb(128, 128, 128) rgb(128, 128, 128)
        rgb(223, 223, 223);
    border-color: var(--ButtonLight) var(--ButtonShadow) var(--ButtonShadow)
        var(--ButtonLight);
    border-style: solid;
    border-width: 2px 2px;
    border-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%2F%3E%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%3C%2Fsvg%3E")
        64 / 2px;
    border-image: var(--button-normal-border-image);
}
button:not(.lightweight).default {
    -o-border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h256v256h-256v-256z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h96v32h-64v64h-32v-96z%22%20fill%3D%22%20rgb(223%2C%20223%2C%20223)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M160%2064h32v128h-128v-32h96v-96z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M96%2096h64v64h-64v-64z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%09%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22256%22%20height%3D%22256%22%20stroke-width%3D%2264%22%20stroke%3D%22%20rgb(0%2C%200%2C%200)%22%20fill%3D%22none%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        96 / 3px;
    border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h256v256h-256v-256z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h96v32h-64v64h-32v-96z%22%20fill%3D%22%20rgb(223%2C%20223%2C%20223)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M160%2064h32v128h-128v-32h96v-96z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M96%2096h64v64h-64v-64z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%09%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22256%22%20height%3D%22256%22%20stroke-width%3D%2264%22%20stroke%3D%22%20rgb(0%2C%200%2C%200)%22%20fill%3D%22none%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        96 / 3px;
    -o-border-image: var(--button-default-border-image);
    border-image: var(--button-default-border-image);
}
button:not(.lightweight):enabled:hover:active {
    -o-border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h256v256h-256v-256z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h192v192h-192v-192z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        64 / 2px;
    border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h256v256h-256v-256z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h192v192h-192v-192z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        64 / 2px;
    -o-border-image: var(--button-active-border-image);
    border-image: var(--button-active-border-image);
}
button:not(.lightweight).default:enabled:hover:active {
    -o-border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h256v256h-256v-256z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h192v192h-192v-192z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%09%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22256%22%20height%3D%22256%22%20stroke-width%3D%2264%22%20stroke%3D%22%20rgb(0%2C%200%2C%200)%22%20fill%3D%22none%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        64 / 2px;
    border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h256v256h-256v-256z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h192v192h-192v-192z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%09%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22256%22%20height%3D%22256%22%20stroke-width%3D%2264%22%20stroke%3D%22%20rgb(0%2C%200%2C%200)%22%20fill%3D%22none%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        64 / 2px;
    -o-border-image: var(--button-default-active-border-image);
    border-image: var(--button-default-active-border-image);
}

/* TODO: offset content on press! */
/* (this would need a child ELEMENT, wouldn't work with text nodes as direct descendants:) */
/*button:active > * {
	position: relative;
	left: 1px;
	top: 1px;
}
*/
/* also, this is more complicated; see Paint; the tool buttons translate when being pushed and when depressed, and these add together */
/* omg, a thought... what if I used feDisplacementMap SVG filter... */

button:not(.lightweight):focus::before {
    content: "";
    display: block;
    position: absolute;
    left: 2px;
    top: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px dotted rgb(0, 0, 0);
    border: 1px dotted var(--ButtonDkShadow); /* ?? */
    /* TODO: get exact inset dimensions, and have corners without dots ideally */
    /* (could use outline instead of ::before at this point) */
}
button.lightweight {
    outline: none; /* these buttons are not usually keyboard accessible, or the focus it shown just by inset (menu buttons) */

    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    font-family: "MSW98UI", sans-serif;
}
/* TODO: recommend preventing focus on click for lightweight buttons */
button.lightweight:enabled:hover {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(255, 255, 255) rgb(128, 128, 128) rgb(128, 128, 128)
        rgb(255, 255, 255);
    border-color: var(--ButtonHilight) var(--ButtonShadow) var(--ButtonShadow)
        var(--ButtonHilight);
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    color: rgb(0, 0, 0);
    color: var(--ButtonText);
}
button.lightweight:enabled:hover:active,
button.lightweight.pressing,
button.lightweight.pressed {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(128, 128, 128) rgb(255, 255, 255) rgb(255, 255, 255)
        rgb(128, 128, 128);
    border-color: var(--ButtonShadow) var(--ButtonHilight) var(--ButtonHilight)
        var(--ButtonShadow);
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    color: rgb(0, 0, 0);
    color: var(--ButtonText);
}
button:disabled {
    color: rgb(128, 128, 128);
    color: var(--GrayText);
    text-shadow: 1px 1px 0px rgb(255, 255, 255);
    text-shadow: 1px 1px 0px var(--ButtonHilight);
}
button:not(.lightweight).toggle:enabled:hover:active,
button:not(.lightweight).pressing {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(128, 128, 128) rgb(255, 255, 255) rgb(255, 255, 255)
        rgb(128, 128, 128);
    border-color: var(--ButtonShadow) var(--ButtonHilight) var(--ButtonHilight)
        var(--ButtonShadow);
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    color: rgb(0, 0, 0);
    color: var(--ButtonText);
    /* as fallback */
    position: relative;
    /* for pseudo element(s) */
    -o-border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(223%2C%20223%2C%20223)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        64 / 2px;
    border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(223%2C%20223%2C%20223)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        64 / 2px;
    -o-border-image: var(--inset-deep-border-image);
    border-image: var(--inset-deep-border-image);
}
button:not(.lightweight).toggle:enabled:hover:active,
button:not(.lightweight).pressing {
    border-color: rgb(128, 128, 128);
    border-color: var(--ButtonShadow);
    border-style: solid;
    border-width: 2px 2px;
}
button:not(.lightweight).toggle.selected,
button:not(.lightweight).pressed {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(128, 128, 128) rgb(255, 255, 255) rgb(255, 255, 255)
        rgb(128, 128, 128);
    border-color: var(--ButtonShadow) var(--ButtonHilight) var(--ButtonHilight)
        var(--ButtonShadow);
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    color: rgb(0, 0, 0);
    color: var(--ButtonText);
    /* as fallback */
    position: relative;
    /* for pseudo element(s) */
    -o-border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(223%2C%20223%2C%20223)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        64 / 2px;
    border-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%0A%09%09%09%0A%09%09%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(255%2C%20255%2C%20255)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(223%2C%20223%2C%20223)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%0A%09%0A%09%09%3C%2Fsvg%3E")
        64 / 2px;
    -o-border-image: var(--inset-deep-border-image);
    border-image: var(--inset-deep-border-image);
}
button:not(.lightweight).toggle.selected,
button:not(.lightweight).pressed {
    border-color: rgb(128, 128, 128);
    border-color: var(--ButtonShadow);
    border-style: solid;
    border-width: 2px 2px;
}
button:not(.lightweight).toggle.selected,
button:not(.lightweight).pressed {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAG0lEQVQYV2P8/////4MHDzIwHjhw4L+9vT0DAHAFCj6esq3FAAAAAElFTkSuQmCC")
        repeat;
    background: var(--checker) repeat;
    image-rendering: pixelated;
}

.os-window .window-titlebar,
body > .window-titlebar {
    background: rgb(0, 0, 128);
    background: var(--ActiveTitle);
    background: linear-gradient(
        to right,
        rgb(0, 0, 128) 0%,
        rgb(16, 132, 208) 100%
    );
    background: linear-gradient(
        to right,
        var(--ActiveTitle) 0%,
        var(--GradientActiveTitle) 100%
    );

    color: rgb(255, 255, 255);

    color: var(--TitleText);
}

.os-window .window-titlebar,
body > .window-titlebar {
    font-family: var(--font-family-title);
    font-size: var(--font-size-title);
}
.os-window.rtl .window-titlebar {
    background: linear-gradient(
        to left,
        rgb(0, 0, 128) 0%,
        rgb(16, 132, 208) 100%
    );
    background: linear-gradient(
        to left,
        var(--ActiveTitle) 0%,
        var(--GradientActiveTitle) 100%
    );
}
.os-window:not(.tool-window) .window-titlebar,
body > .window-titlebar {
    font-weight: bold;
}
.os-window:not(.focused) .window-titlebar {
    background: darkgray;
    background: linear-gradient(
        to right,
        rgb(128, 128, 128) 0%,
        rgb(181, 181, 181) 100%
    );
    background: linear-gradient(
        to right,
        var(--InactiveTitle) 0%,
        var(--GradientInactiveTitle) 100%
    );

    color: rgb(192, 192, 192);

    color: var(--InactiveTitleText);
}
.os-window.rtl:not(.focused) .window-titlebar {
    background: linear-gradient(
        to left,
        rgb(128, 128, 128) 0%,
        rgb(181, 181, 181) 100%
    );
    background: linear-gradient(
        to left,
        var(--InactiveTitle) 0%,
        var(--GradientInactiveTitle) 100%
    );
}
.os-window {
    /* Needed for when maximized, otherwise would be provided by %outset-deep */
    background: rgb(192, 192, 192);
    background: var(--ButtonFace);

    /* background: var(--Window); */
    /*color: var(--WindowText);*/
    /*border: 1px solid var(--WindowFrame);*/
    /* TODO: use window-specific theme colors; also different types of windows */
}
.os-window:not(.maximized) {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(255, 255, 255) rgb(128, 128, 128) rgb(128, 128, 128)
        rgb(255, 255, 255);
    border-color: var(--ButtonHilight) var(--ButtonShadow) var(--ButtonShadow)
        var(--ButtonHilight);
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    color: rgb(0, 0, 0);
    color: var(--ButtonText);
    /* as fallback */
    position: relative;
    /* for pseudo element(s) */
    -o-border-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%2F%3E%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%2F%3E%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%3C%2Fsvg%3E")
        64 / 2px;
    border-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22256px%22%20height%3D%22256px%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M0%200h224v32h-192v192h-32v-224z%22%20fill%3D%22rgb(192%2C%20192%2C%20192)%22%2F%3E%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%22%20fill%3D%22%20rgb(0%2C%200%2C%200)%22%2F%3E%3Cpath%20d%3D%22M32%2032h160v32h-128v128h-32v-160z%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%2F%3E%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%22%20fill%3D%22%20rgb(128%2C%20128%2C%20128)%22%2F%3E%3Cpath%20d%3D%22M64%2064h128v128h-128v-128z%22%20fill%3D%22%20rgb(192%2C%20192%2C%20192)%22%2F%3E%3C%2Fsvg%3E")
        64 / 2px;
    -o-border-image: var(--button-normal-border-image);
    border-image: var(--button-normal-border-image);
    border-color: rgb(223, 223, 223) rgb(128, 128, 128) rgb(128, 128, 128)
        rgb(223, 223, 223);
    border-color: var(--ButtonLight) var(--ButtonShadow) var(--ButtonShadow)
        var(--ButtonLight);
    border-style: solid;
    border-width: 2px 2px;
    padding: 2px;
}

.window-button {
    display: block;
    width: 16px;
    height: 14px;
    padding: 0;
    margin: 2px 0;
}
.window-button-icon {
    display: block;
    /* background-image: url("images/titlebar-buttons.png"); */
    --sprite-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAKCAYAAADo3z3CAAAAoUlEQVRIS9VVWw7AIAib9z/0FpZgCOFRgpluf9MClhYdV++7gfDhYLxYDw+UyiHd5F8S5lr6zNa6Xpv/KwhHOahQpLB1+CwfycgYrwmE0WK8MTsIR1aOGsR+NYkkYzN5/pGwVA9xA/diq8LeHCKuQxQ+aoYt2yJWtpSNZth0edRpGVC5eGQcSg4hXLml3fdpBeHs8evWyPKX9ruXVqnYCeAHA8IyC9K2kmkAAAAASUVORK5CYII=");
    --sprite-y: 0;
    image-rendering: pixelated;
    width: 12px;
    height: 10px;
    position: relative;
    pointer-events: none;
}
.os-window .window-button:enabled:hover:active .window-button-icon,
.os-window .window-button.pressing .window-button-icon {
    top: 1px;
    left: 1px;
}
.window-button:disabled .window-button-icon {
    /* filter: saturate(0%) opacity(50%); fallback */
    /* filter: url("#os-gui-black-to-inset-filter"); */
}
.window-button .window-button-icon::before,
.window-button .window-button-icon::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    mask-image: var(--sprite-image);
    mask-position: var(--sprite-x) var(--sprite-y);
    -webkit-mask-image: var(--sprite-image);
    -webkit-mask-position: var(--sprite-x) var(--sprite-y);
    background-color: rgb(0, 0, 0);
    background-color: var(--ButtonText);
}
.window-button:disabled .window-button-icon::before {
    background-color: rgb(255, 255, 255);
    background-color: var(--ButtonHilight);
    left: 1px;
    top: 1px;
}
.window-button:enabled .window-button-icon::after {
    display: none;
}
.window-button:disabled .window-button-icon::after {
    background-color: rgb(128, 128, 128);
    background-color: var(--GrayText);
}
.window-action-close .window-button-icon {
    --sprite-x: calc(-3 * 13px - 1px);
}
.window-action-maximize .window-button-icon {
    --sprite-x: calc(-1 * 13px - 1px);
}
.window-action-restore .window-button-icon {
    --sprite-x: calc(-2 * 13px - 1px);
}
.window-action-minimize .window-button-icon {
    --sprite-x: calc(-0 * 13px - 1px);
}
.window-close-button {
    margin-left: 2px;
    margin-right: 2px;
}
.os-window.tool-window .window-close-button {
    width: 11px;
    height: 11px;
}
.os-window.tool-window .window-close-button .window-button-icon {
    width: 7px;
    height: 7px;
    --sprite-x: 7px;
}
.os-window .window-title-area {
    height: 16px;
}
.os-window.tool-window .window-title-area {
    height: 14px;
}
.os-window .window-titlebar {
    height: 18px;
}
.os-window.tool-window .window-titlebar {
    height: 15px;
}
.os-window .window-title {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: inline-block !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 2px;
}

.menus {
    background: rgb(192, 192, 192);
    background: var(--Menu);
    color: rgb(0, 0, 0);
    color: var(--MenuText);
}
.os-window:not(.focused) .menus {
    color: rgb(128, 128, 128);
    color: var(--GrayText);
}
.menus *,
.menu-popup * {
    font-family: var(--font-family-menu);
    font-size: var(--font-size-menu);
}
.menu-button {
    box-sizing: border-box;
    height: 18px;
    line-height: 1;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 2px 5px;
    outline: 0;
    /* @extend button.lightweight; */
    background: rgb(192, 192, 192);
    background: var(--Menu);
    font-family: var(--font-family-menu);
}
/* Note: In Windows 98, normal menu bars have an inset highlight if you use Esc and then the arrow keys,
whereas Explorer's menu bars are outset and match the hover effect, which I feel makes more sense,
so I think I'll imitate that. (I might change it later) */
/* Also, to prevent duplicate highlight (via keyboard + mouse), and lingering highlight with touch, I'm using a class, rather than :hover/:focus/:active */
.menu-button.highlight {
    box-shadow:
        1px 1px 0 rgb(255, 255, 255) inset,
        -1px -1px 0 rgb(128, 128, 128) inset;
    box-shadow:
        1px 1px 0 var(--ButtonHilight) inset,
        -1px -1px 0 var(--ButtonShadow) inset;
}
.menu-button.highlight.active {
    box-shadow:
        1px 1px 0 rgb(128, 128, 128) inset,
        -1px -1px 0 rgb(255, 255, 255) inset;
    box-shadow:
        1px 1px 0 var(--ButtonShadow) inset,
        -1px -1px 0 var(--ButtonHilight) inset;
}
.menu-button.highlight.active > span {
    position: relative;
    top: 1px;
    left: 1px;
}

.menu-popup {
    display: block;
    padding: 2px;
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    border-top: 1px solid rgb(192, 192, 192);
    border-top: 1px solid var(--ButtonFace);
    border-left: 1px solid rgb(192, 192, 192);
    border-left: 1px solid var(--ButtonFace);
    border-right: 1px solid rgb(0, 0, 0);
    border-right: 1px solid var(--ButtonDkShadow);
    border-bottom: 1px solid rgb(0, 0, 0);
    border-bottom: 1px solid var(--ButtonDkShadow);
    box-shadow:
        1px 1px 0 rgb(255, 255, 255) inset,
        -1px -1px 0 rgb(128, 128, 128) inset;
    box-shadow:
        1px 1px 0 var(--ButtonHilight) inset,
        -1px -1px 0 var(--ButtonShadow) inset;
    background: rgb(192, 192, 192);
    background: var(--Menu);
    color: rgb(0, 0, 0);
    color: var(--MenuText);
    z-index: 10000;
}
.menu-popup td {
    padding: 0 1px;
}
.menu-item-default {
    font-weight: bold;
}
.menu-item {
    padding: 1px 3px;
    margin: 2px;
    height: 17px;
}
.menu-item[disabled] {
    color: rgb(128, 128, 128);
    color: var(--GrayText);
    text-shadow: 0.8px 0.8px 0px rgb(255, 255, 255);
    text-shadow: 0.8px 0.8px 0px var(--ButtonHilight);
}
.menu-item.highlight:not([disabled]),
.menu-item.active:not([disabled]) {
    color: rgb(255, 255, 255);
    color: var(--HilightText);
}
.menu-item.highlight,
.menu-item.active {
    background: rgb(0, 0, 128);
    background: var(--Hilight);
    text-shadow: none;
    outline: 0;
}
.menu-item .menu-item-shortcut {
    padding-left: 10px;
}
/* Note: viewBox is needed for scaling the SVG, used in JS Paint's Eye Gaze Mode */
.menu-item-checkbox-area::after {
    /* spell-checker: disable */
    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' style='fill:currentColor;display:inline-block;vertical-align:middle' %3E%3Cpath d='M5 7v3l2 2 5-5V4L7 9Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' style='fill:currentColor;display:inline-block;vertical-align:middle' %3E%3Cpath d='M5 7v3l2 2 5-5V4L7 9Z'/%3E%3C/svg%3E");
    /* spell-checker: enable */
}
.menu-item-checkbox-area.radio::after {
    /* spell-checker: disable */
    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' style='fill:currentColor;display:inline-block;vertical-align:middle' %3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' style='fill:currentColor;display:inline-block;vertical-align:middle' %3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
    /* spell-checker: enable */
}
.has-submenu .menu-item-submenu-area::after {
    /* spell-checker: disable */
    mask-image: url("data:image/svg+xml, %3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' style='fill:currentColor;display:inline-block;vertical-align:middle' %3E%3Cpath d='m6 4 4 4-4 4z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml, %3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' style='fill:currentColor;display:inline-block;vertical-align:middle' %3E%3Cpath d='m6 4 4 4-4 4z'/%3E%3C/svg%3E");
    /* spell-checker: enable */
}
.has-submenu .menu-item-submenu-area.point-right::after {
    transform: scaleX(-1);
}
.menu-item-checkbox-area::after,
.menu-item-submenu-area::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    /* no background means it's invisible by default here (masking transparent gives transparent, i.e. nothing) */
}
.menu-item[aria-checked="true"] .menu-item-checkbox-area::after,
.menu-item.has-submenu .menu-item-submenu-area::after {
    /* makes it visible */
    background: currentColor;
}

.menu-hr {
    border: 0;
    border-top: 1px solid rgb(128, 128, 128);
    border-top: 1px solid var(--ButtonShadow);
    border-bottom: 1px solid rgb(255, 255, 255);
    border-bottom: 1px solid var(--ButtonHilight);
    margin: 0;
    margin-top: 3px;
    margin-bottom: 4px;
}
/* @TODO: rename .access-key (could also make it a <u> element, in which case this rule isn't needed) */
.menu-hotkey {
    text-decoration: underline;
}
.menu-hotkey::-moz-selection {
    /* prevent weird looking white underlines if menubar is contained in a selection, possible in the demo (minute edge case) */
    text-decoration-color: rgb(0, 0, 0) !important;
    text-decoration-color: var(--MenuText) !important;
}
.menu-hotkey::selection {
    /* prevent weird looking white underlines if menubar is contained in a selection, possible in the demo (minute edge case) */
    -webkit-text-decoration-color: rgb(0, 0, 0) !important;
    text-decoration-color: rgb(0, 0, 0) !important;
    -webkit-text-decoration-color: var(--MenuText) !important;
    text-decoration-color: var(--MenuText) !important;
}

::-moz-selection {
    background-color: rgb(0, 0, 128);
    background-color: var(--Hilight);
    color: rgb(255, 255, 255);
    color: var(--HilightText);
}

::selection {
    background-color: rgb(0, 0, 128);
    background-color: var(--Hilight);
    color: rgb(255, 255, 255);
    color: var(--HilightText);
}

.scrollbar {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAG0lEQVQYV2P8/////4MHDzIwHjhw4L+9vT0DAHAFCj6esq3FAAAAAElFTkSuQmCC")
        repeat;
    background: var(--checker) repeat;
    image-rendering: pixelated;
}
.scrollbar-thumb {
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    border-top: 1px solid rgb(192, 192, 192);
    border-top: 1px solid var(--ButtonFace);
    border-left: 1px solid rgb(192, 192, 192);
    border-left: 1px solid var(--ButtonFace);
    border-right: 1px solid rgb(0, 0, 0);
    border-right: 1px solid var(--ButtonDkShadow);
    border-bottom: 1px solid rgb(0, 0, 0);
    border-bottom: 1px solid var(--ButtonDkShadow);
    box-shadow:
        1px 1px 0 rgb(255, 255, 255) inset,
        -1px -1px 0 rgb(128, 128, 128) inset;
    box-shadow:
        1px 1px 0 var(--ButtonHilight) inset,
        -1px -1px 0 var(--ButtonShadow) inset;
}
.scrollbar-track-piece:hover:active {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAG0lEQVQYV2P8/////4MHDzIwHjhw4L+9vT0DAHAFCj6esq3FAAAAAElFTkSuQmCC")
        repeat;
    background: var(--checker) repeat;
    image-rendering: pixelated;
    background-color: white;
    background-blend-mode: difference;
    /* background-attachment: fixed; breaks the checkered background in chrome */
}
.scrollbar-track-piece.increment {
    background-position: bottom;
}
.scrollbar-corner {
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
}

.scrollbar-button {
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    border-top: 1px solid rgb(192, 192, 192);
    border-top: 1px solid var(--ButtonFace);
    border-left: 1px solid rgb(192, 192, 192);
    border-left: 1px solid var(--ButtonFace);
    border-right: 1px solid rgb(0, 0, 0);
    border-right: 1px solid var(--ButtonDkShadow);
    border-bottom: 1px solid rgb(0, 0, 0);
    border-bottom: 1px solid var(--ButtonDkShadow);
    box-shadow:
        1px 1px 0 rgb(255, 255, 255) inset,
        -1px -1px 0 rgb(128, 128, 128) inset;
    box-shadow:
        1px 1px 0 var(--ButtonHilight) inset,
        -1px -1px 0 var(--ButtonShadow) inset;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAAW0lEQVQ4T2NkGGSAcZC5h4FWDvrPwEC02ShqkR0EkkAHuBxMyEKYWYQ8jKEOXQOyo/A5BuZwqqvBZiA+3xMbilQLIWqlcUJRimwPzjRELcdQZA6hREeR4eRoBgBoXhAK6oiMhwAAAABJRU5ErkJggg==");
    background-image: var(--scrollbar-arrows-ButtonText);
    image-rendering: pixelated;
    width: 13px;
    width: var(--scrollbar-size);
    height: 13px;
    height: var(--scrollbar-size);
    box-sizing: border-box;
}
.scrollbar-button:not(.disabled):hover:active {
    border: 1px solid rgb(128, 128, 128);
    border: 1px solid var(--ButtonShadow);
    box-shadow: none;
}
.scrollbar-button.disabled {
    background-image:
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAAYElEQVQ4T2NkGGSAcZC5h4EmDmpoaPjf0NBAlNnoauGaQBLooYXLUEIWwswi5Chs6lB8gewofI6BOZwWajCCFZ/viQ1FqoUQtRI4oShFtgdnGqKWYyg1h6icQKklpOgHAM9mQArEvm5+AAAAAElFTkSuQmCC"),
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAAYElEQVQ4T2NkGGSAcZC5h4EmDvr///9/RkZGosxGVwvXBJJADy1chhKyEGYWIUdhU4fiC2RH4XMMzOG0UIMRrPh8T2woUi2EqJXACUUpsj040xC1HEOpOUTlBEotIUU/AKXFQAqyTJ6DAAAAAElFTkSuQmCC");
    background-image:
        var(--scrollbar-arrows-GrayText), var(--scrollbar-arrows-ButtonHilight);
}

.scrollbar-button.horizontal.decrement.disabled {
    background-position: /* left arrow */
        calc(9px * -3 + 1px) 1px,
        calc(9px * -3 + 2px) 2px;
    background-position: /* left arrow */
        calc(var(--scrollbar-button-inner-size) * -3 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -3 + 2px) 2px;
}
.scrollbar-button.horizontal.increment.disabled {
    background-position: /* right arrow */
        calc(9px * -2 + 1px) 1px,
        calc(9px * -2 + 2px) 2px;
    background-position: /* right arrow */
        calc(var(--scrollbar-button-inner-size) * -2 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -2 + 2px) 2px;
}
.scrollbar-button.vertical.decrement.disabled {
    background-position: /* up arrow */
        calc(9px * -1 + 1px) 1px,
        calc(9px * -1 + 2px) 2px;
    background-position: /* up arrow */
        calc(var(--scrollbar-button-inner-size) * -1 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -1 + 2px) 2px;
}
.scrollbar-button.vertical.increment.disabled {
    background-position: /* down arrow */
        calc(9px * -0 + 1px) 1px,
        calc(9px * -0 + 2px) 2px;
    background-position: /* down arrow */
        calc(var(--scrollbar-button-inner-size) * -0 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -0 + 2px) 2px;
}

.scrollbar-button.horizontal.decrement {
    background-position: calc(9px * -3 + 1px) 1px;
    background-position: calc(var(--scrollbar-button-inner-size) * -3 + 1px) 1px; /* left */
}
.scrollbar-button.horizontal.increment {
    background-position: calc(9px * -2 + 1px) 1px;
    background-position: calc(var(--scrollbar-button-inner-size) * -2 + 1px) 1px; /* right */
}
.scrollbar-button.vertical.decrement {
    background-position: calc(9px * -1 + 1px) 1px;
    background-position: calc(var(--scrollbar-button-inner-size) * -1 + 1px) 1px; /* up */
}
.scrollbar-button.vertical.increment {
    background-position: calc(9px * -0 + 1px) 1px;
    background-position: calc(var(--scrollbar-button-inner-size) * -0 + 1px) 1px; /* down */
}

::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button {
    width: 13px;
    width: var(--scrollbar-size);
    height: 13px;
    height: var(--scrollbar-size);
}

::-webkit-scrollbar {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAG0lEQVQYV2P8/////4MHDzIwHjhw4L+9vT0DAHAFCj6esq3FAAAAAElFTkSuQmCC")
        repeat;
    background: var(--checker) repeat;
    image-rendering: pixelated;
}
::-webkit-scrollbar-thumb {
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    border-top: 1px solid rgb(192, 192, 192);
    border-top: 1px solid var(--ButtonFace);
    border-left: 1px solid rgb(192, 192, 192);
    border-left: 1px solid var(--ButtonFace);
    border-right: 1px solid rgb(0, 0, 0);
    border-right: 1px solid var(--ButtonDkShadow);
    border-bottom: 1px solid rgb(0, 0, 0);
    border-bottom: 1px solid var(--ButtonDkShadow);
    box-shadow:
        1px 1px 0 rgb(255, 255, 255) inset,
        -1px -1px 0 rgb(128, 128, 128) inset;
    box-shadow:
        1px 1px 0 var(--ButtonHilight) inset,
        -1px -1px 0 var(--ButtonShadow) inset;
}
::-webkit-scrollbar-corner {
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
}

::-webkit-scrollbar-button {
    background-color: rgb(192, 192, 192);
    background-color: var(--ButtonFace);
    border-top: 1px solid rgb(192, 192, 192);
    border-top: 1px solid var(--ButtonFace);
    border-left: 1px solid rgb(192, 192, 192);
    border-left: 1px solid var(--ButtonFace);
    border-right: 1px solid rgb(0, 0, 0);
    border-right: 1px solid var(--ButtonDkShadow);
    border-bottom: 1px solid rgb(0, 0, 0);
    border-bottom: 1px solid var(--ButtonDkShadow);
    box-shadow:
        1px 1px 0 rgb(255, 255, 255) inset,
        -1px -1px 0 rgb(128, 128, 128) inset;
    box-shadow:
        1px 1px 0 var(--ButtonHilight) inset,
        -1px -1px 0 var(--ButtonShadow) inset;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAAW0lEQVQ4T2NkGGSAcZC5h4FWDvrPwEC02ShqkR0EkkAHuBxMyEKYWYQ8jKEOXQOyo/A5BuZwqqvBZiA+3xMbilQLIWqlcUJRimwPzjRELcdQZA6hREeR4eRoBgBoXhAK6oiMhwAAAABJRU5ErkJggg==");
    background-image: var(--scrollbar-arrows-ButtonText);
    image-rendering: pixelated;
    width: 13px;
    width: var(--scrollbar-size);
    height: 13px;
    height: var(--scrollbar-size);
    box-sizing: border-box;
}

::-webkit-scrollbar-button:not(.disabled):hover:active {
    border: 1px solid rgb(128, 128, 128);
    border: 1px solid var(--ButtonShadow);
    box-shadow: none;
}

::-webkit-scrollbar-button.disabled {
    background-image:
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAAYElEQVQ4T2NkGGSAcZC5h4EmDmpoaPjf0NBAlNnoauGaQBLooYXLUEIWwswi5Chs6lB8gewofI6BOZwWajCCFZ/viQ1FqoUQtRI4oShFtgdnGqKWYyg1h6icQKklpOgHAM9mQArEvm5+AAAAAElFTkSuQmCC"),
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAAYElEQVQ4T2NkGGSAcZC5h4EmDvr///9/RkZGosxGVwvXBJJADy1chhKyEGYWIUdhU4fiC2RH4XMMzOG0UIMRrPh8T2woUi2EqJXACUUpsj040xC1HEOpOUTlBEotIUU/AKXFQAqyTJ6DAAAAAElFTkSuQmCC");
    background-image:
        var(--scrollbar-arrows-GrayText), var(--scrollbar-arrows-ButtonHilight);
}

::-webkit-scrollbar-button.horizontal.decrement.disabled {
    background-position: /* left arrow */
        calc(9px * -3 + 1px) 1px,
        calc(9px * -3 + 2px) 2px;
    background-position: /* left arrow */
        calc(var(--scrollbar-button-inner-size) * -3 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -3 + 2px) 2px;
}

::-webkit-scrollbar-button.horizontal.increment.disabled {
    background-position: /* right arrow */
        calc(9px * -2 + 1px) 1px,
        calc(9px * -2 + 2px) 2px;
    background-position: /* right arrow */
        calc(var(--scrollbar-button-inner-size) * -2 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -2 + 2px) 2px;
}

::-webkit-scrollbar-button.vertical.decrement.disabled {
    background-position: /* up arrow */
        calc(9px * -1 + 1px) 1px,
        calc(9px * -1 + 2px) 2px;
    background-position: /* up arrow */
        calc(var(--scrollbar-button-inner-size) * -1 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -1 + 2px) 2px;
}

::-webkit-scrollbar-button.vertical.increment.disabled {
    background-position: /* down arrow */
        calc(9px * -0 + 1px) 1px,
        calc(9px * -0 + 2px) 2px;
    background-position: /* down arrow */
        calc(var(--scrollbar-button-inner-size) * -0 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -0 + 2px) 2px;
}

::-webkit-scrollbar-button.horizontal.decrement {
    background-position: calc(9px * -3 + 1px) 1px;
    background-position: calc(var(--scrollbar-button-inner-size) * -3 + 1px) 1px;
    /* left */
}

::-webkit-scrollbar-button.horizontal.increment {
    background-position: calc(9px * -2 + 1px) 1px;
    background-position: calc(var(--scrollbar-button-inner-size) * -2 + 1px) 1px;
    /* right */
}

::-webkit-scrollbar-button.vertical.decrement {
    background-position: calc(9px * -1 + 1px) 1px;
    background-position: calc(var(--scrollbar-button-inner-size) * -1 + 1px) 1px;
    /* up */
}

::-webkit-scrollbar-button.vertical.increment {
    background-position: calc(9px * -0 + 1px) 1px;
    background-position: calc(var(--scrollbar-button-inner-size) * -0 + 1px) 1px;
    /* down */
}
::-webkit-scrollbar-button:hover:active {
    border: 1px solid rgb(128, 128, 128);
    border: 1px solid var(--ButtonShadow);
    box-shadow: none;
}
::-webkit-scrollbar-button:disabled {
    background-image:
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAAYElEQVQ4T2NkGGSAcZC5h4EmDmpoaPjf0NBAlNnoauGaQBLooYXLUEIWwswi5Chs6lB8gewofI6BOZwWajCCFZ/viQ1FqoUQtRI4oShFtgdnGqKWYyg1h6icQKklpOgHAM9mQArEvm5+AAAAAElFTkSuQmCC"),
        url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAJCAYAAABaMo5wAAAAYElEQVQ4T2NkGGSAcZC5h4EmDvr///9/RkZGosxGVwvXBJJADy1chhKyEGYWIUdhU4fiC2RH4XMMzOG0UIMRrPh8T2woUi2EqJXACUUpsj040xC1HEOpOUTlBEotIUU/AKXFQAqyTJ6DAAAAAElFTkSuQmCC");
    background-image:
        var(--scrollbar-arrows-GrayText), var(--scrollbar-arrows-ButtonHilight);
}

::-webkit-scrollbar-button:horizontal:decrement:disabled {
    background-position: /* left arrow */
        calc(9px * -3 + 1px) 1px,
        calc(9px * -3 + 2px) 2px;
    background-position: /* left arrow */
        calc(var(--scrollbar-button-inner-size) * -3 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -3 + 2px) 2px;
}
::-webkit-scrollbar-button:horizontal:increment:disabled {
    background-position: /* right arrow */
        calc(9px * -2 + 1px) 1px,
        calc(9px * -2 + 2px) 2px;
    background-position: /* right arrow */
        calc(var(--scrollbar-button-inner-size) * -2 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -2 + 2px) 2px;
}
::-webkit-scrollbar-button:vertical:decrement:disabled {
    background-position: /* up arrow */
        calc(9px * -1 + 1px) 1px,
        calc(9px * -1 + 2px) 2px;
    background-position: /* up arrow */
        calc(var(--scrollbar-button-inner-size) * -1 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -1 + 2px) 2px;
}
::-webkit-scrollbar-button:vertical:increment:disabled {
    background-position: /* down arrow */
        calc(9px * -0 + 1px) 1px,
        calc(9px * -0 + 2px) 2px;
    background-position: /* down arrow */
        calc(var(--scrollbar-button-inner-size) * -0 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -0 + 2px) 2px;
}

::-webkit-scrollbar-button:horizontal:decrement.disabled {
    background-position: /* left arrow */
        calc(9px * -3 + 1px) 1px,
        calc(9px * -3 + 2px) 2px;
    background-position: /* left arrow */
        calc(var(--scrollbar-button-inner-size) * -3 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -3 + 2px) 2px;
}

::-webkit-scrollbar-button:horizontal:decrement {
    background-position: calc(9px * -3 + 1px) 1px;
    background-position: calc(var(--scrollbar-button-inner-size) * -3 + 1px) 1px;
    /* left */
}
::-webkit-scrollbar-button:horizontal:increment.disabled {
    background-position: /* right arrow */
        calc(9px * -2 + 1px) 1px,
        calc(9px * -2 + 2px) 2px;
    background-position: /* right arrow */
        calc(var(--scrollbar-button-inner-size) * -2 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -2 + 2px) 2px;
}
::-webkit-scrollbar-button:horizontal:increment {
    background-position: calc(9px * -2 + 1px) 1px;
    background-position: calc(var(--scrollbar-button-inner-size) * -2 + 1px) 1px;
    /* right */
}
::-webkit-scrollbar-button:vertical:decrement.disabled {
    background-position: /* up arrow */
        calc(9px * -1 + 1px) 1px,
        calc(9px * -1 + 2px) 2px;
    background-position: /* up arrow */
        calc(var(--scrollbar-button-inner-size) * -1 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -1 + 2px) 2px;
}
::-webkit-scrollbar-button:vertical:decrement {
    background-position: calc(9px * -1 + 1px) 1px;
    background-position: calc(var(--scrollbar-button-inner-size) * -1 + 1px) 1px;
    /* up */
}
::-webkit-scrollbar-button:vertical:increment.disabled {
    background-position: /* down arrow */
        calc(9px * -0 + 1px) 1px,
        calc(9px * -0 + 2px) 2px;
    background-position: /* down arrow */
        calc(var(--scrollbar-button-inner-size) * -0 + 1px) 1px,
        calc(var(--scrollbar-button-inner-size) * -0 + 2px) 2px;
}
::-webkit-scrollbar-button:vertical:increment {
    background-position: calc(9px * -0 + 1px) 1px;
    background-position: calc(var(--scrollbar-button-inner-size) * -0 + 1px) 1px;
    /* down */
}

::-webkit-scrollbar-track-piece:hover:active {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAG0lEQVQYV2P8/////4MHDzIwHjhw4L+9vT0DAHAFCj6esq3FAAAAAElFTkSuQmCC")
        repeat;
    background: var(--checker) repeat;
    image-rendering: pixelated;
    background-color: white;
    background-blend-mode: difference;
    /* background-attachment: fixed; breaks the checkered background in chrome */
}

::-webkit-scrollbar-track-piece.increment {
    background-position: bottom;
}
::-webkit-scrollbar-track-piece:increment {
    background-position: bottom;
}

/* turn off double buttons */
::-webkit-scrollbar-button:start:increment,
::-webkit-scrollbar-button:end:decrement {
    display: none;
}

/*# sourceMappingURL=windows-98.css.map */