/** system.css Copyright (c) 2022 Sakun Acharige <sakun.co> */
@font-face { font-family: Chicago; src: url("../fonts/ChicagoFLF.woff") format("woff"); src: url("../fonts/ChicagoFLF.woff2") format("woff2"); }

@font-face { font-family: Monaco; src: url("../fonts/monaco.woff") format("woff"); src: url("../fonts/monaco.woff2") format("woff2"); }

/* Fonts below are recreations by Giles Booth */
@font-face { font-family: Chicago_12; src: url("../fonts/ChiKareGo2.woff") format("woff"); src: url("../fonts/ChiKareGo2.woff2") format("woff2"); }

@font-face { font-family: Geneva_9; src: url("../fonts/FindersKeepers.woff") format("woff"); src: url("../fonts/FindersKeepers.woff2") format("woff2"); }

:root { --box-shadow: 2px 2px; --element-spacing: 8px; --grouped-element-spacing: 6px; --radio-width: 12px; --checkbox-width: 13px; --radio-label-spacing: 6px; --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing); --radio-total-width: calc(var(--radio-total-width-precalc)); --radio-left: calc(-1 * var(--radio-total-width-precalc)); --radio-dot-width: 6px; --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2); --radio-dot-left: calc( -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var( --radio-dot-width ) / 2 ); --checkbox-total-width-precalc: var(--checkbox-width) + var(--radio-label-spacing); --checkbox-total-width: calc(var(--checkbox-total-width-precalc)); --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc)); --checkmark-width: 12px; --checkmark-top: 2px; --checkmark-left: 2px; --sys-color-white: #FFFFFF; --sys-color-black: #000000; --sys-color-grey: #A5A5A5; --sys-color-darkgrey: #B6B7B8; --primary: var(--sys-color-white); --secondary: var(--sys-color-black); --tertiary: var(--sys-color-grey); --disabled: var(--sys-color-darkgrey); }

#desktop { /* buttons */ /* dialogs & modals */ /* title bar */ /* buttons */ /* text input */ /* Form */ /* select menu */ /* menu-bar */ }

#desktop ::-webkit-scrollbar { width: 22px; height: 23.38px; background-color: #FFF; }

#desktop ::-webkit-scrollbar-track { background: linear-gradient(45deg, var(--secondary) 25%, transparent 25%, transparent 75%, var(--secondary) 75%, var(--secondary)), linear-gradient(45deg, var(--secondary) 25%, transparent 25%, transparent 75%, var(--secondary) 75%, var(--secondary)); background-color: #FFF; background-size: 4px 4px; background-position: 0 0, 2px 2px; width: 10px; border-left: 3px solid var(--secondary); }

#desktop ::-webkit-scrollbar-thumb { width: 20px; box-sizing: content-box; background-color: #FFF; border: 2px solid var(--secondary); border-right: none; }

#desktop ::-webkit-scrollbar-button { height: 23.38px; width: 23.38px; }

#desktop ::-webkit-scrollbar-button:horizontal:start { background-repeat: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" fill="none">\a<rect x="0.8125" y="22.1875" width="21" height="22.375" transform="rotate(-90 0.8125 22.1875)" fill="white" stroke="black"/>\a<rect width="20" height="2" transform="matrix(0 -1 -1 0 23.3125 21.6875)" fill="black"/>\a<rect width="5.5" height="1.375" transform="matrix(0 -1 -1 0 12.6875 21.3125)" fill="black"/>\a<rect width="6.875" height="1.375" transform="matrix(0 -1 -1 0 18.1875 15.8125)" fill="black"/>\a<rect width="5.5" height="1.375" transform="matrix(-1 0 0 1 18.1875 15.8125)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 5.8125 13.0625)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 4.4375 11.6875)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 12.6875 3.4375)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 11.3125 4.8125)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 9.9375 6.1875)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 8.5625 7.5625)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 7.1875 8.9375)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 5.8125 10.3125)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 7.1875 14.4375)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 8.5625 15.8125)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 9.9375 17.1875)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 11.3125 18.5625)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(-1 0 0 1 12.6875 19.9375)" fill="black"/>\a<rect width="5.5" height="1.375" transform="matrix(-1 0 0 1 18.1875 7.5625)" fill="black"/>\a<rect width="5.5" height="1.375" transform="matrix(0 -1 -1 0 12.6875 8.9375)" fill="black"/>\a</svg>'); }

#desktop ::-webkit-scrollbar-button:horizontal:start:decrement { display: block; }

#desktop ::-webkit-scrollbar-button:horizontal:start:active { background-repeat: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" fill="none">\a<rect x="0.809998" y="22.19" width="21" height="22.38" transform="rotate(-90 0.809998 22.19)" fill="white" stroke="black"/>\a<rect width="20" height="2.00043" transform="matrix(0 -1 -1 0 23.3149 21.69)" fill="black"/>\a<rect width="5.5" height="1.37529" transform="matrix(0 -1 -1 0 12.6876 21.315)" fill="black"/>\a<rect width="6.875" height="11.0024" transform="matrix(0 -1 -1 0 18.1888 15.815)" fill="black"/>\a<rect width="5.50118" height="1.375" transform="matrix(-1 0 0 1 18.1888 15.815)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 5.81116 13.065)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 4.43585 11.69)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 12.6876 3.44)" fill="black"/>\a<rect width="1.37529" height="4.125" transform="matrix(-1 0 0 1 11.3124 4.815)" fill="black"/>\a<rect width="1.37529" height="2.75" transform="matrix(-1 0 0 1 9.93707 6.19)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 8.56177 7.565)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 7.18646 8.94)" fill="black"/>\a<rect width="1.37529" height="2.75" transform="matrix(-1 0 0 1 5.81116 10.315)" fill="black"/>\a<rect width="1.37529" height="5.5" transform="matrix(-1 0 0 1 7.18646 10.315)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 8.56177 15.815)" fill="black"/>\a<rect width="1.37529" height="2.75" transform="matrix(-1 0 0 1 9.93707 15.815)" fill="black"/>\a<rect width="1.37529" height="4.125" transform="matrix(-1 0 0 1 11.3124 15.815)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(-1 0 0 1 12.6876 19.94)" fill="black"/>\a<rect width="5.50118" height="1.375" transform="matrix(-1 0 0 1 18.1888 7.565)" fill="black"/>\a<rect width="5.5" height="1.37529" transform="matrix(0 -1 -1 0 12.6876 8.94)" fill="black"/>\a</svg>'); }

#desktop ::-webkit-scrollbar-button:horizontal:end { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" fill="none">\a<rect x="-0.5" y="-0.5" width="21" height="22.375" transform="matrix(0 -1 -1 0 22.6875 21.6875)" fill="white" stroke="black"/>\a<rect x="0.6875" y="21.6875" width="20" height="2" transform="rotate(-90 0.6875 21.6875)" fill="black"/>\a<rect x="11.3125" y="21.3125" width="5.5" height="1.375" transform="rotate(-90 11.3125 21.3125)" fill="black"/>\a<rect x="5.8125" y="15.8125" width="6.875" height="1.375" transform="rotate(-90 5.8125 15.8125)" fill="black"/>\a<rect x="5.8125" y="15.8125" width="5.5" height="1.375" fill="black"/>\a<rect x="18.1875" y="13.0625" width="1.375" height="1.375" fill="black"/>\a<rect x="19.5625" y="11.6875" width="1.375" height="1.375" fill="black"/>\a<rect x="11.3125" y="3.4375" width="1.375" height="1.375" fill="black"/>\a<rect x="12.6875" y="4.8125" width="1.375" height="1.375" fill="black"/>\a<rect x="14.0625" y="6.1875" width="1.375" height="1.375" fill="black"/>\a<rect x="15.4375" y="7.5625" width="1.375" height="1.375" fill="black"/>\a<rect x="16.8125" y="8.9375" width="1.375" height="1.375" fill="black"/>\a<rect x="18.1875" y="10.3125" width="1.375" height="1.375" fill="black"/>\a<rect x="16.8125" y="14.4375" width="1.375" height="1.375" fill="black"/>\a<rect x="15.4375" y="15.8125" width="1.375" height="1.375" fill="black"/>\a<rect x="14.0625" y="17.1875" width="1.375" height="1.375" fill="black"/>\a<rect x="12.6875" y="18.5625" width="1.375" height="1.375" fill="black"/>\a<rect x="11.3125" y="19.9375" width="1.375" height="1.375" fill="black"/>\a<rect x="5.8125" y="7.5625" width="5.5" height="1.375" fill="black"/>\a<rect x="11.3125" y="8.9375" width="5.5" height="1.375" transform="rotate(-90 11.3125 8.9375)" fill="black"/>\a</svg>'); }

#desktop ::-webkit-scrollbar-button:horizontal:end:increment { display: block; }

#desktop ::-webkit-scrollbar-button:horizontal:end:active { background-repeat: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 24 23" fill="none">\a<rect x="-0.5" y="-0.5" width="21" height="22.38" transform="matrix(0 -1 -1 0 22.69 21.69)" fill="white" stroke="black"/>\a<rect x="0.685059" y="21.69" width="20" height="2.00043" transform="rotate(-90 0.685059 21.69)" fill="black"/>\a<rect x="11.3124" y="21.315" width="5.5" height="1.37529" transform="rotate(-90 11.3124 21.315)" fill="black"/>\a<rect x="5.81116" y="15.815" width="6.875" height="11.0024" transform="rotate(-90 5.81116 15.815)" fill="black"/>\a<rect x="5.81116" y="15.815" width="5.50118" height="1.375" fill="black"/>\a<rect x="18.1888" y="13.065" width="1.37529" height="1.375" fill="black"/>\a<rect x="19.5641" y="11.69" width="1.37529" height="1.375" fill="black"/>\a<rect x="11.3124" y="3.44" width="1.37529" height="1.375" fill="black"/>\a<rect x="12.6876" y="4.815" width="1.37529" height="4.125" fill="black"/>\a<rect x="14.0629" y="6.19" width="1.37529" height="2.75" fill="black"/>\a<rect x="15.4382" y="7.565" width="1.37529" height="1.375" fill="black"/>\a<rect x="16.8135" y="8.94" width="1.37529" height="1.375" fill="black"/>\a<rect x="18.1888" y="10.315" width="1.37529" height="2.75" fill="black"/>\a<rect x="16.8135" y="10.315" width="1.37529" height="5.5" fill="black"/>\a<rect x="15.4382" y="15.815" width="1.37529" height="1.375" fill="black"/>\a<rect x="14.0629" y="15.815" width="1.37529" height="2.75" fill="black"/>\a<rect x="12.6876" y="15.815" width="1.37529" height="4.125" fill="black"/>\a<rect x="11.3124" y="19.94" width="1.37529" height="1.375" fill="black"/>\a<rect x="5.81116" y="7.565" width="5.50118" height="1.375" fill="black"/>\a<rect x="11.3124" y="8.94" width="5.5" height="1.37529" transform="rotate(-90 11.3124 8.94)" fill="black"/>\a</svg>'); }

#desktop ::-webkit-scrollbar-button:vertical:start { background-repeat: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24" fill="none">\a<rect x="0.5" y="0.5" width="21" height="22.375" fill="white" stroke="black"/>\a<rect width="20" height="2" transform="matrix(1 0 0 -1 1 23)" fill="black"/>\a<rect width="5.5" height="1.375" transform="matrix(1 0 0 -1 1.375 12.375)" fill="black"/>\a<rect width="6.875" height="1.375" transform="matrix(1 0 0 -1 6.875 17.875)" fill="black"/>\a<rect width="5.5" height="1.375" transform="matrix(0 -1 -1 0 6.875 17.875)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 9.625 5.5)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 11 4.125)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 19.25 12.375)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 17.875 11)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 16.5 9.625)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 15.125 8.25)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 13.75 6.875)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 12.375 5.5)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 8.25 6.875)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 6.875 8.25)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 5.5 9.625)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 4.125 11)" fill="black"/>\a<rect width="1.375" height="1.375" transform="matrix(0 -1 -1 0 2.75 12.375)" fill="black"/>\a<rect width="5.5" height="1.375" transform="matrix(0 -1 -1 0 15.125 17.875)" fill="black"/>\a<rect width="5.5" height="1.375" transform="matrix(1 0 0 -1 13.75 12.375)" fill="black"/>\a</svg>'); }

#desktop ::-webkit-scrollbar-button:vertical:start:decrement { display: block; }

#desktop ::-webkit-scrollbar-button:vertical:start:active { background-repeat: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24" fill="none">\a<rect x="0.5" y="0.5" width="21" height="22.38" fill="white" stroke="black"/>\a<rect width="20" height="2.00043" transform="matrix(1 0 0 -1 1 23.0049)" fill="black"/>\a<rect width="5.5" height="1.37529" transform="matrix(1 0 0 -1 1.375 12.3776)" fill="black"/>\a<rect width="6.875" height="11.0024" transform="matrix(1 0 0 -1 6.875 17.8788)" fill="black"/>\a<rect width="5.50118" height="1.375" transform="matrix(0 -1 -1 0 6.875 17.8788)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 9.625 5.50118)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 11 4.12588)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 19.25 12.3776)" fill="black"/>\a<rect width="1.37529" height="4.125" transform="matrix(0 -1 -1 0 17.875 11.0024)" fill="black"/>\a<rect width="1.37529" height="2.75" transform="matrix(0 -1 -1 0 16.5 9.62706)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 15.125 8.25176)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 13.75 6.87647)" fill="black"/>\a<rect width="1.37529" height="2.75" transform="matrix(0 -1 -1 0 12.375 5.50118)" fill="black"/>\a<rect width="1.37529" height="5.5" transform="matrix(0 -1 -1 0 12.375 6.87647)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 6.875 8.25176)" fill="black"/>\a<rect width="1.37529" height="2.75" transform="matrix(0 -1 -1 0 6.875 9.62706)" fill="black"/>\a<rect width="1.37529" height="4.125" transform="matrix(0 -1 -1 0 6.875 11.0024)" fill="black"/>\a<rect width="1.37529" height="1.375" transform="matrix(0 -1 -1 0 2.75 12.3776)" fill="black"/>\a<rect width="5.50118" height="1.375" transform="matrix(0 -1 -1 0 15.125 17.8788)" fill="black"/>\a<rect width="5.5" height="1.37529" transform="matrix(1 0 0 -1 13.75 12.3776)" fill="black"/>\a</svg>'); }

#desktop ::-webkit-scrollbar-button:vertical:end { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24" fill="none">\a<rect x="0.5" y="-0.5" width="21" height="22.375" transform="matrix(1 0 0 -1 0 22.375)" fill="white" stroke="black"/>\a<rect x="1" y="0.375" width="20" height="2" fill="black"/>\a<rect x="1.375" y="11" width="5.5" height="1.375" fill="black"/>\a<rect x="6.875" y="5.5" width="6.875" height="1.375" fill="black"/>\a<rect x="6.875" y="5.5" width="5.5" height="1.375" transform="rotate(90 6.875 5.5)" fill="black"/>\a<rect x="9.625" y="17.875" width="1.375" height="1.375" transform="rotate(90 9.625 17.875)" fill="black"/>\a<rect x="11" y="19.25" width="1.375" height="1.375" transform="rotate(90 11 19.25)" fill="black"/>\a<rect x="19.25" y="11" width="1.375" height="1.375" transform="rotate(90 19.25 11)" fill="black"/>\a<rect x="17.875" y="12.375" width="1.375" height="1.375" transform="rotate(90 17.875 12.375)" fill="black"/>\a<rect x="16.5" y="13.75" width="1.375" height="1.375" transform="rotate(90 16.5 13.75)" fill="black"/>\a<rect x="15.125" y="15.125" width="1.375" height="1.375" transform="rotate(90 15.125 15.125)" fill="black"/>\a<rect x="13.75" y="16.5" width="1.375" height="1.375" transform="rotate(90 13.75 16.5)" fill="black"/>\a<rect x="12.375" y="17.875" width="1.375" height="1.375" transform="rotate(90 12.375 17.875)" fill="black"/>\a<rect x="8.25" y="16.5" width="1.375" height="1.375" transform="rotate(90 8.25 16.5)" fill="black"/>\a<rect x="6.875" y="15.125" width="1.375" height="1.375" transform="rotate(90 6.875 15.125)" fill="black"/>\a<rect x="5.5" y="13.75" width="1.375" height="1.375" transform="rotate(90 5.5 13.75)" fill="black"/>\a<rect x="4.125" y="12.375" width="1.375" height="1.375" transform="rotate(90 4.125 12.375)" fill="black"/>\a<rect x="2.75" y="11" width="1.375" height="1.375" transform="rotate(90 2.75 11)" fill="black"/>\a<rect x="15.125" y="5.5" width="5.5" height="1.375" transform="rotate(90 15.125 5.5)" fill="black"/>\a<rect x="13.75" y="11" width="5.5" height="1.375" fill="black"/>\a</svg>'); }

#desktop ::-webkit-scrollbar-button:vertical:end:increment { display: block; }

#desktop ::-webkit-scrollbar-button:vertical:end:active { background-repeat: no-repeat; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24" fill="none">\a<rect x="0.5" y="-0.5" width="21" height="22.38" transform="matrix(1 0 0 -1 0 22.38)" fill="white" stroke="black"/>\a<rect x="1" y="0.37508" width="20" height="2.00043" fill="black"/>\a<rect x="1.375" y="11.0024" width="5.5" height="1.37529" fill="black"/>\a<rect x="6.875" y="5.50117" width="6.875" height="11.0024" fill="black"/>\a<rect x="6.875" y="5.50117" width="5.50118" height="1.375" transform="rotate(90 6.875 5.50117)" fill="black"/>\a<rect x="9.625" y="17.8788" width="1.37529" height="1.375" transform="rotate(90 9.625 17.8788)" fill="black"/>\a<rect x="11" y="19.2541" width="1.37529" height="1.375" transform="rotate(90 11 19.2541)" fill="black"/>\a<rect x="19.25" y="11.0024" width="1.37529" height="1.375" transform="rotate(90 19.25 11.0024)" fill="black"/>\a<rect x="17.875" y="12.3776" width="1.37529" height="4.125" transform="rotate(90 17.875 12.3776)" fill="black"/>\a<rect x="16.5" y="13.7529" width="1.37529" height="2.75" transform="rotate(90 16.5 13.7529)" fill="black"/>\a<rect x="15.125" y="15.1282" width="1.37529" height="1.375" transform="rotate(90 15.125 15.1282)" fill="black"/>\a<rect x="13.75" y="16.5035" width="1.37529" height="1.375" transform="rotate(90 13.75 16.5035)" fill="black"/>\a<rect x="12.375" y="17.8788" width="1.37529" height="2.75" transform="rotate(90 12.375 17.8788)" fill="black"/>\a<rect x="12.375" y="16.5035" width="1.37529" height="5.5" transform="rotate(90 12.375 16.5035)" fill="black"/>\a<rect x="6.875" y="15.1282" width="1.37529" height="1.375" transform="rotate(90 6.875 15.1282)" fill="black"/>\a<rect x="6.875" y="13.7529" width="1.37529" height="2.75" transform="rotate(90 6.875 13.7529)" fill="black"/>\a<rect x="6.875" y="12.3776" width="1.37529" height="4.125" transform="rotate(90 6.875 12.3776)" fill="black"/>\a<rect x="2.75" y="11.0024" width="1.37529" height="1.375" transform="rotate(90 2.75 11.0024)" fill="black"/>\a<rect x="15.125" y="5.50117" width="5.50118" height="1.375" transform="rotate(90 15.125 5.50117)" fill="black"/>\a<rect x="13.75" y="11.0024" width="5.5" height="1.37529" fill="black"/>\a</svg>'); }

#desktop .content { padding: 0px; }

#desktop a { color: #000; text-decoration: underline; }

#desktop hr { border-top: 0.15em solid var(--secondary); }

#desktop h1 { font-family: Chicago; font-size: 1em; }

#desktop .heading { font-family: Chicago; font-size: 1em; }

#desktop h2 { font-family: Chicago; font-size: 2em; }

#desktop .standard-button { display: block; min-width: 59px; min-height: 20px; }

#desktop .standard-dialog { border: 2px solid; padding: 10px; box-shadow: var(--box-shadow); background-color: #FFF; }

#desktop .modal-dialog { width: auto; padding: 13px; background: var(--primary); }

#desktop .alert-box { width: auto; padding: 13px; background: var(--primary); }

#desktop .modal-contents { padding: 10px; }

#desktop .alert-contents { padding: 10px; }

#desktop .modeless-dialog { height: 100%; padding: 1.5rem 0.5rem 0.5rem 0.5rem; font-size: 18px; letter-spacing: -0.025em; }

#desktop .inner-border { border-color: #000; border-top: 3.5px solid; border-bottom: 3.5px solid; border-left: 5px solid; border-right: 5px solid; }

#desktop .outer-border { border-color: #000; border: 2px solid; padding: 3px; }

#desktop .title-bar { flex: none; display: flex; align-items: center; height: 1.5rem; margin: 0.1rem 0; padding: 0.2rem 0.1rem; background: linear-gradient(var(--secondary) 50%, transparent 50%); background-size: 6.6666666667% 13.3333333333%; background-clip: content-box; }

#desktop .title-bar .title { padding: 0 0.5em; margin: 0 auto; font-size: 1.5rem; font-weight: bold; line-height: 1.1; text-align: center; background: var(--primary); cursor: default; font-family: Chicago_12; }

#desktop .title-bar button { position: relative; display: block; width: 40px; height: 40px; margin: 0px; padding: 0px; border: 4px solid var(--secondary); border-radius: 15px; background-color: #FFF; cursor: pointer; transform: scale(0.5); }

#desktop .title-bar button span { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); }

#desktop .title-bar button.close:hover::before { content: ""; position: absolute; }

#desktop .title-bar button.close:hover::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(var(--secondary) 0%, var(--secondary) 100%) left 50%, linear-gradient(to bottom, var(--secondary) 0%, var(--secondary) 100%) 50% top, linear-gradient(var(--secondary) 0%, var(--secondary) 100%) right 50%, linear-gradient(to bottom, var(--secondary) 0%, var(--secondary) 100%) 50% bottom; background-size: 60% 4px, 4px 60%; background-repeat: no-repeat; transform: rotate(45deg) scale(1.1); }

#desktop .title-bar button.close:active::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(var(--secondary) 0%, var(--secondary) 100%) left center, linear-gradient(var(--secondary) 0%, var(--secondary) 100%) right center, linear-gradient(var(--secondary) 0%, var(--secondary) 100%) center top, linear-gradient(var(--secondary) 0%, var(--secondary) 100%) center bottom; background-size: 30% 4px, 30% 4px, 4px 30%, 4px 30%; background-repeat: no-repeat; }

#desktop .title-bar button.close:active::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(var(--secondary) 0%, var(--secondary) 100%) left center, linear-gradient(var(--secondary) 0%, var(--secondary) 100%) right center, linear-gradient(var(--secondary) 0%, var(--secondary) 100%) center top, linear-gradient(var(--secondary) 0%, var(--secondary) 100%) center bottom; background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, 3.6363636364px 22.5%, 3.6363636364px 22.5%; background-repeat: no-repeat; transform: rotate(45deg) scale(1.1); }

#desktop .title-bar button.resize:hover { background: linear-gradient(var(--secondary) 0%, var(--secondary) 100%) left 58%, linear-gradient(to bottom, var(--secondary) 0%, var(--secondary) 100%) 58% top; background-size: 60% 4px, 4px 60%; background-repeat: no-repeat; background-color: #FFF; }

#desktop .title-bar button.resize:active { background: var(--primary); }

#desktop .title-bar button.minimize:hover { background: linear-gradient(var(--secondary) 0%, var(--secondary) 100%) left 58%; background-size: 100% 4px, 4px 100%; background-repeat: no-repeat; background-color: #FFF; }

#desktop .title-bar button.minimize:active { background: var(--primary); }

#desktop .title-bar button.hidden { visibility: hidden; }

#desktop .inactive-title-bar { flex: none; display: flex; align-items: center; height: 1.5rem; margin: 0.1rem 0; padding: 0.2rem 0.1rem; background-size: 6.6666666667% 13.3333333333%; background-clip: content-box; }

#desktop .inactive-title-bar .title { padding: 0 0.5em; margin: 0 auto; font-size: 1.5rem; font-weight: bold; line-height: 1.1; text-align: center; cursor: default; font-family: Chicago_12; color: #AAA; }

#desktop .window { flex-direction: column; margin: 1rem; min-width: 320px; overflow: hidden; background-color: #FFF; border: 0.1em solid var(--secondary); font-family: "Inconsolata", Menlo, Chicago, Geneva; }

#desktop .window-pane { overflow-y: scroll; height: 100%; padding: 1rem 2rem; font-size: 18px; letter-spacing: -0.025em; }

#desktop .window-pane::-webkit-scrollbar { width: 22px; background-color: #FFF; }

#desktop .window-pane::-webkit-scrollbar-track { background: linear-gradient(45deg, var(--secondary) 25%, transparent 25%, transparent 75%, var(--secondary) 75%, var(--secondary)), linear-gradient(45deg, var(--secondary) 25%, transparent 25%, transparent 75%, var(--secondary) 75%, var(--secondary)); background-color: #FFF; background-size: 4px 4px; background-position: 0 0, 2px 2px; width: 10px; border-left: 4px solid var(--secondary); }

#desktop .window-pane::-webkit-scrollbar-thumb { width: 20px; box-sizing: content-box; background-color: #FFF; border: 2px solid var(--secondary); border-right: none; }

#desktop .separator { flex: none; display: flex; flex-direction: row; justify-content: space-between; border-top: 0.1rem solid var(--secondary); border-width: 0.1rem 0; font-size: 1rem; }

#desktop .details-bar { flex: none; display: flex; flex-direction: row; justify-content: space-between; padding: 0.2rem 0.8rem; border: 0.1rem solid var(--secondary); border-width: 0.1rem 0; font-size: 1rem; font-weight: 100; }

#desktop .btn { min-height: 20px; min-width: 59px; padding: 0 20px; text-align: center; background: var(--primary); border-style: solid; border-width: 5.5px; border-image: url("../img/icon/button.svg") 30 stretch; color: #000; text-align: center; text-decoration: none; font-size: 18px; font-family: Chicago_12; cursor: pointer; }

#desktop .btn:active { background: var(--secondary); border-radius: 6px; color: #FFF; font-family: Chicago_12; }

#desktop .btn:disabled { min-height: 20px; min-width: 59px; text-align: center; background: var(--primary); border-style: solid; border-width: 5.5px; border-image: url("../img/icon/button.svg") 30 stretch; color: #B6B6B6; text-align: center; text-decoration: none; font-size: 18px; font-family: Chicago_12; }

#desktop .btn-default { min-height: 20px; min-width: 59px; padding: 0 20px; text-align: center; background: var(--primary); border-style: solid; border-width: 5.5px; border-image: url("../img/icon/button.svg") 30 stretch; color: #000; text-align: center; text-decoration: none; font-size: 18px; font-family: Chicago_12; cursor: pointer; border-image: url("../img/icon/button-default.svg") 60 stretch; border-width: 0.5em; }

#desktop .btn-default:active { border-radius: 12px; }

#desktop input { border: 1.5px solid var(--secondary); font-family: Chicago_12; font-size: 18px; padding-left: 5px; }

#desktop input:focus { outline: none; }

#desktop input[type="text"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop input[type="email"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop input[type="password"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop input[type="number"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop input[type="date"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop input[type="time"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop input[type="datetime"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop input[type="datetime-local"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop input[type="month"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop input[type="week"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop input[type="search"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop input[type="tel"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop input[type="color"]:focus-visible { background: var(--secondary); color: #FFF; }

#desktop textarea:focus { background: var(--secondary); color: #FFF; }

#desktop input[type="radio"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 0; background: 0; position: fixed; opacity: 0; border: none; }

#desktop input[type="radio"] + label { line-height: 13px; padding-left: 5px; position: relative; margin-left: var(--radio-total-width); }

#desktop input[type="radio"] + label::before { border-image: svg-load("../img/icon/radio-border.svg"); width: 20px; height: 20px; content: ""; position: absolute; top: 0; left: calc(-1 * (var(--radio-total-width-precalc))); display: inline-block; width: var(--radio-width); height: var(--radio-width); margin-right: var(--radio-label-spacing); background: svg-load("../img/icon/radio-border.svg"); }

#desktop input[type="radio"]:focus-visible + label::before { background-image: svg-load("../img/icon/radio-border-focused.svg"); }

#desktop input[type="radio"]:hover + label::before { background-image: svg-load("../img/icon/radio-border-focused.svg"); }

#desktop input[type="radio"]:checked + label::after { content: ""; display: block; width: var(--radio-dot-width); height: var(--radio-dot-width); top: var(--radio-dot-top); left: var(--radio-dot-left); position: absolute; background: svg-load("../img/icon/radio-dot.svg"); }

#desktop input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 0; background: 0; position: fixed; opacity: 0; border: none; }

#desktop input[type="checkbox"] + label { line-height: 13px; padding-left: 5px; position: relative; margin-left: var(--checkbox-total-width); }

#desktop input[type="checkbox"] + label::before { border: 1.5px solid var(--secondary); width: 20px; height: 20px; content: ""; position: absolute; left: calc(-1 * (var(--checkbox-total-width-precalc))); display: inline-block; width: var(--checkbox-width); height: var(--checkbox-width); background: var(--button-highlight); box-shadow: var(--border-field); margin-right: var(--radio-label-spacing); }

#desktop input[type="checkbox"]:focus-visible + label::before { outline: 1px solid var(--secondary); }

#desktop input[type="checkbox"]:hover + label::before { outline: 1px solid var(--secondary); }

#desktop input[type="checkbox"]:checked + label::after { content: ""; display: block; width: var(--checkmark-width); height: var(--checkmark-width); position: absolute; top: var(--checkmark-top); left: calc( -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)); background: svg-load("../img/icon/checkmark.svg"); background-repeat: no-repeat; }

#desktop input[type="checkbox"][disabled] + label::before { background: var(--surface); }

#desktop input[type="checkbox"][disabled]:checked + label::after { background: svg-load("../img/icon/checkmark-disabled.svg"); }

#desktop .field-row { display: flex; align-items: center; font-family: Chicago_12; font-size: 1em; }

#desktop .field-row > * + * { margin-left: var(--grouped-element-spacing); }

#desktop [class^="field-row"] + [class^="field-row"] { margin-top: var(--grouped-element-spacing); }

#desktop .apple { background: svg-load("../img/icon/apple.svg"); height: 22px; width: 18px; background-repeat: no-repeat; border: none; display: inline-block; margin-right: 2px; }

#desktop form { font-family: "Inconsolata", Menlo, Chicago, Geneva; font-size: 14px; }

#desktop select { border: 1.5px solid; height: auto; width: 10rem; font-family: Chicago_12; font-size: 18px; background-image: svg-load("../img/icon/select-button.svg"); background-position: top 2px right 2px; background-repeat: no-repeat; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; padding-left: 20px; -webkit-box-shadow: 2px 8px 0 0px var(--secondary); -moz-box-shadow: 2px 8px 0 0px var(--secondary); box-shadow: 2px 2px 0 -1px var(--secondary); }

#desktop ul[role] { margin: 0; padding: 0; list-style: none; cursor: pointer; font-family: Chicago_12; font-size: 1em; }

#desktop ul[role="menu-bar"] { display: flex; background: var(--primary); }

#desktop ul[role="menu-bar"] > [role="menu-item"] { position: relative; padding: 6px 10px; }

#desktop ul[role="menu-bar"] > [role="menu-item"]:focus { background: var(--secondary); color: #FFF; outline: none; }

#desktop ul[role="menu-bar"] > [role="menu-item"]:focus-within { background: var(--secondary); color: #FFF; outline: none; }

#desktop ul[role="menu-bar"] > [role="menu-item"]:hover { background: var(--secondary); color: #FFF; outline: none; }

#desktop ul[role="menu-bar"] > [role="menu-item"][aria-haspopup="false"] * { color: inherit; background: inherit; text-decoration: none; }

#desktop ul[role="menu"] { position: relative; min-width: 200px; background: var(--primary); color: initial; border: 1px solid; box-shadow: var(--box-shadow); }

#desktop ul[role="menu"]::before { content: ""; pointer-events: none; position: absolute; left: 28px; width: 2px; box-shadow: inset 1px 0 rgba(0, 0, 0, 0.15), inset -1px 0 var(--primary); }

#desktop ul[role="menu"] > [role="menu-item"] > a { all: unset; position: relative; padding: 5px 20px; display: block; width: 100%; box-sizing: border-box; }

#desktop ul[role="menu"] > [role="menu-item"] > a:hover { background: var(--secondary); color: #FFF; }

#desktop ul[role="menu"] > [role="menu-item"] > a:focus { background: var(--secondary); color: #FFF; }

#desktop ul[role="menu"] > [role="menu-item"] > button { all: unset; position: relative; padding: 5px 20px; display: block; width: 100%; box-sizing: border-box; }

#desktop ul[role="menu"] > [role="menu-item"] > button:hover { background: var(--secondary); color: #FFF; }

#desktop ul[role="menu"] > [role="menu-item"] > button:focus { background: var(--secondary); color: #FFF; }

#desktop ul[role="menu"] > [role="menu-item"][aria-haspopup="true"] { all: unset; position: relative; padding: 5px 20px; display: block; width: 100%; box-sizing: border-box; }

#desktop ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:hover { background: var(--secondary); color: #FFF; }

#desktop ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus { background: var(--secondary); color: #FFF; }

#desktop [role="menu-item"] ul[role="menu"] { display: none; position: absolute; left: 0; top: 100%; z-index: 99; }

#desktop ul [role="menu-item"] { position: relative; }

#desktop ul [role="menu-item"]:focus > [role="menu"] { display: block; }

#desktop ul [role="menu-item"]:focus-within > [role="menu"] { display: block; }

#desktop ul .divider[role="menu-item"]::after { content: ""; pointer-events: none; display: block; padding: 0; border-top: 1.5px dotted var(--secondary); }

/*# sourceMappingURL=system.css.map */