@font-face
{
	font-family: 'Joystix';
	src: url('assets/fonts/Joystix.TTF');
}

@font-face
{
	font-family: 'Win';
	src: url('assets/fonts/MSW98UI-Regular.ttf');
	src: url('assets/fonts/Windows\ Regular.ttf');
    font-weight: normal;
}

@font-face
{
	font-family: 'Win';
	src: url('assets/fonts/MSW98UI-Bold.ttf');
    font-weight: bold;
}

:root {
    --pink-color: #d5adff;
    --control-color: rgb(192, 192, 192);
    /*--control-color: rgb(209, 184, 239);*/
    --control-color-pink: rgb(209, 184, 239);
    --control-color: rgb(184, 184, 239);
    --control-color: rgb(220, 220, 255);
    --slct-color: #0000FF;
    /*--control-color-pink: rgb(192, 192, 192);*/
    --aqua-color: rgb(0, 128, 128);
    /*--pink-magenta: rgb(255, 
	128, 255);*/
    --window-head-color: #F0F;
    --window-head-color: rgb(0, 0, 128);
    --window-head-color-2: rgb(16, 132, 208);
    --theme-color: var(--pink-color);
    --inner-color: white;
	
	--win-fg-color: #000;
	/*--win-fg-color: #0007;*/

	--checker: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAG0lEQVQYV2P8/////4MHDzIwHjhw4L+9vT0DAHAFCj6esq3FAAAAAElFTkSuQmCC");
	--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,%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(255%2C%20255%2C%20255)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M224%200h32v256h-256v-32h224v-224z%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(223%2C%20223%2C%20223)%22%2F%3E%0A%09%09%3Cpath%20d%3D%22M192%2032h32v192h-192v-32h160v-160z%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;
	--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,%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;
	--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");
    --scrollbar-size: 20px;
	--scrollbar-button-inner-size: 24px;

    /*--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);*/
}

html, body {
    margin: 0;
    height: 100%;
    min-height: 100dvh;
}

html {
    background-color: var(--aqua-color);
    background-size: cover;
    background-position: center;
    /*background-image: url('https://w0.peakpx.com/wallpaper/818/498/HD-wallpaper-searching-dj-dj-set-dj-visuals-erica-anderson-gif-gifs-vj-vj-clip-vj-clips-vj-loop-abstract-abstract-art-animated-art-animation-art-concert-visuals-digital-art-ericaofanderson-live.jpg');*/
    background-image: url('https://i.pinimg.com/originals/39/20/30/3920305deee0028f0081b3019c5667ad.jpg');
    /*background-image: url('https://images7.alphacoders.com/134/1342751.png');*/
    /*background-image: url('https://4kwallpapers.com/images/wallpapers/windows-xp-bliss-landscape-rainbow-blue-sky-5k-3840x2160-3187.jpg');*/
}

body {
    /*overflow: hidden scroll;*/
    max-width: 900px;
    margin: 0 auto;
}

img.emoji
{
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

h1 {
    font-family: 'Win';
    color: var(--pink-color);
    /*text-shadow: 0px 0px 5px #000;*/
}

h2 {
    font-family: 'Win';
    color: #000;
    /*text-shadow: 0px 0px 5px #000;*/
}

h3 {
    font-family: 'Win';
    color: #000;
    /*text-shadow: 0px 0px 5px #000;*/
}

p {
    font-family: 'Win';
    color: white;
	color: var(--win-fg-color);
    font-size: 20px;
	font-size: 16px;
    /*text-shadow: 0px 0px 5px #000;*/
}

div {
    box-sizing: border-box;
}

.bottom-bar {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 40px;
    background-color: var(--control-color);
    box-shadow: 0px -3px white;
    z-index: 999;
}

.box {
    background-color: var(--control-color);
    border-width: 3px;
    border-style: solid;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    outline:1px solid #000000;
}

.lbox {
    background-color: var(--control-color);
    border-width: 3px;
    border-style: solid;
    border-color: #808080 #FFFFFF #FFFFFF #808080;
    outline:1px solid #000000;
}

.window-head {
    background-image: linear-gradient(90deg, var(--window-head-color), var(--window-head-color-2));/*rgb(0, 200, 255)*/
    display: flex;
    align-items: center;
    color: #FFF;
    height: 32px;
    padding-left: 10px;
    cursor: move;
    font-size: 16px;
    font-weight: bold;
    /*background: linear-gradient(to right, var(--ActiveTitle) 0%, var(--GradientActiveTitle) 100%);*/
}

button, input[type=submit], input[type=button] {
    font-family: 'Win';
    background-color: var(--control-color);
    font-size:18px;
    /*outline:1px solid #000000;*/
    /*background:#C0C0C0;*/
    border-width: 3px;
    border-style:solid;
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    padding: 0px 10px;
    position:relative;
    bottom:0px;
    cursor: pointer;
    align-items: center;
    display: flex;
    height: 32px;
    margin: 1px 3px;
    border-width: 2px;
    box-shadow: #000 .5px .5px 0px .5px, #FFF -.5px -.5px 0px .5px;

    min-width: 100px;
    justify-content: center;
	/*box-sizing: border-box;*/
}
button:active, input[type=submit]:active, input[type=button]:active {
    border-color: #808080 #FFFFFF #FFFFFF #808080;
    box-shadow: #000 -.5px -.5px 0px .5px, #FFF .5px .5px 0px .5px;
}
button:disabled, input[type=submit]:disabled, input[type=button]:disabled {
    color: #0007;
}
button:disabled:active, input[type=submit]:disabled:active, input[type=button]:disabled:active {
    border-color:#FFFFFF #808080 #808080 #FFFFFF;
    box-shadow: #000 .5px .5px 0px .5px, #FFF -.5px -.5px 0px .5px;
}

textarea {
    background-color: var(--inner-color);
    font-family: 'Win';
    font-size: 18px;
    border-color: #808080 #FFFFFF #FFFFFF #808080;
    border-width: 2px;
}

button.active {
    border-color: #808080 #FFFFFF #FFFFFF #808080;
    box-shadow: #000 -.5px -.5px 0px .5px, #FFF .5px .5px 0px .5px;
}

button.like-btn-active {
    border-color: #808080 #FFFFFF #FFFFFF #808080;
    /*color: var(--slct-color);*/
    background-color: lime;
    background-color: #55BC00;
    /*background-color: var(--pink-color);*/
}

a {
    color: blue;
}
a:hover {
    color: red;
}

a.list-e {
    text-decoration: none;
    color: unset;
}

.list-e img {
    width: 30px;
    margin-right: 10px;
}

div.list-e {
    /*background-color: transparent;*/
    display: flex;
    align-items: center;
    padding: 0 10px;
}
div.list-e:hover {
    background-color: var(--slct-color);
    color: white;
}

input {
    border-color: #808080 #FFFFFF #FFFFFF #808080;
    border-width: 2px;
    font-family: 'Win';
    font-size: 18px;
    padding: 0px 10px;
    outline: 1px solid #000;
    box-sizing: border-box;
    height: 32px;
	border-style: solid;
}
input:focus {
    /*background-color: var(--slct-color);
    color: yellow;*/
}

input[type="text"], input[type="email"], input[type="password"] {
	outline: none;
    border-color: #808080 rgb(192, 192, 192) rgb(192, 192, 192) #808080;
    border-color: #808080 rgb(200, 200, 200) rgb(200, 200, 200) #808080;
	border-width: 3px;
}

input[type="radio"] {
    outline: none;
    height: unset;
}
input[type="file"] {
    border-color: #808080 #FFFFFF #FFFFFF #808080;
    border-width: 2px;
}

.start-menu {
    width: 200px;
    height: 250px;
    position: fixed;
    bottom: 37px;
    left: 2px;
    z-index: 1000;
}
.start-menu-hidden {
    display: none;
}

.start-btn {
    
}

.window {
    position: absolute; left: 50px; top: 50px; width: 500px; height: 400px;
}

.window-full {
    position: fixed; left: 0px; right: 0px; top: 0px; bottom: 45px;
    border: none;
}

.blink {
    animation: blink .5s steps(1, end) 0s infinite;
}

.h-divisor {
    margin: 0px 5px;
    height: calc(100% - 14px);
    width: 2px;
    background-color: #0005;
    /*padding: 5px 0px;*/
    box-sizing: content-box;
}

/*.h-divisor-inner {
    border: 2px #0002;
    height: 100%;
}*/

.ctrl-btn {
    height: 25px;
    min-width: 25px;
    padding: 0px;
    justify-content: center;
    margin: 0px 3px;
}

.close-btn {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAKCAYAAADo3z3CAAAAoUlEQVRIS9VVWw7AIAib9z/0FpZgCOFRgpluf9MClhYdV++7gfDhYLxYDw+UyiHd5F8S5lr6zNa6Xpv/KwhHOahQpLB1+CwfycgYrwmE0WK8MTsIR1aOGsR+NYkkYzN5/pGwVA9xA/diq8LeHCKuQxQ+aoYt2yJWtpSNZth0edRpGVC5eGQcSg4hXLml3fdpBeHs8evWyPKX9ruXVqnYCeAHA8IyC9K2kmkAAAAASUVORK5CYII=);
	image-rendering: pixelated;
	background-position:
		calc(var(--scrollbar-button-inner-size) * -1 + 63px) 1px,
		-24px;
	background-size: 120px;
}

img {
    max-width: 100%;
}

br {
    border: solid white 1px;
    width: 100%;
    display: block;
    box-sizing:border-box;
}

.verified-svg
{
    /*zoom: 85%;*/
    width: 16px;
    height: 16px;
    overflow: visible;
    /*transform: translateY(1px);*/
    transform: translateY(2px);
}

.st0{display:none;fill:var(--theme-color);}
.st1{fill:var(--theme-color);}
.st2{display:none;fill:var(--theme-color);stroke:#FFFFFF;stroke-width:0.1417;stroke-miterlimit:10;}

.c-verified
{
    margin-left: 2px;
}

.c-header
{
    display: flex;
    margin-bottom: 15px;
    margin-bottom: 0px;
    font-size: 20px;
}

.c-spec
{
    /*color: #999;*/
    color: #FFF7;
    margin-left: 10px;
}

.c-verified
{
    margin-left: 5px;
}

.c-top
{
    color: var(--pink-color);
    text-decoration: none;
}
.c-top:hover
{
    color: var(--pink-color);
    text-decoration: underline;
}

.dis-480 {
    display: unset;
}



label.cf
{
    position: absolute;
    width: 150px;
}

div.cf
{
    margin-left: 150px;
}

input[type=button].cf
{
    height: 40px;
    width: fit-content;
    cursor: pointer;
    border: solid var(--theme-color) 1px;
    background-color: transparent;
    transition: .25s;
}
input[type=button].cf:hover
{
    background-color: #0002;
}

input[type=text].cf, input[type=password].cf, input[type=email].cf, input[type=number].cf, textarea.cf
{
    margin-left: 150px;
    width: calc(100% - 150px);
    box-sizing: border-box;
    max-width: unset;
	margin-bottom: 5px;
}

.c-int {
	background-color: #0000;
	outline: none;
	cursor: pointer;
}
.c-int:hover {
	outline: solid 1px #55BC00;
}

.floating-menu {
    position: absolute;
    z-index: 67108864;
    /*background-color: var(--control-color);
    color: var(--fg-color);*/
    /*border-radius: 20px;*/
    /*top: 300px;
    left: 300px;*/
    width: 200px;
    height: 200px;
    /*box-shadow: 0px 0px 7px var(--win-fg-color);*/
}




@keyframes blink {
50% {
    opacity: 0.0;
} 
}

@media screen and (max-width: 480px)
{
.window {
    left: 0px;
    right: 0px;
    width: unset;
    top: 0px;
    /*min-width: 100%;*/
	min-width: unset;
	max-width: 100%;
}

.dis-480 {
    display: none;
}

label.cf
{
    position: static;
    width: 100%;
}

div.cf
{
    margin-left: 0px;
}

input[type="text"].cf, input[type=password].cf, input[type=email].cf, input[type=number].cf, textarea.cf
{
    margin-left: 0;
    width: 100%;
}
}

.notf-active {
	background-color: #00F3;
}




.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: var(--scrollbar-size);
	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(--control-color);
	border-top: 1px solid rgb(192, 192, 192);
	border-top: 1px solid var(--control-color);
	border-left: 1px solid rgb(192, 192, 192);
	border-left: 1px solid var(--control-color);
	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(--control-color);
}

::-webkit-scrollbar-button {
	background-color: rgb(192, 192, 192);
	background-color: var(--control-color);
	border-top: 1px solid rgb(192, 192, 192);
	border-top: 1px solid var(--control-color);
	border-left: 1px solid rgb(192, 192, 192);
	border-left: 1px solid var(--control-color);
	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);
    background-size: cover;
    background-position: center;
	image-rendering: pixelated;
	width: var(--scrollbar-size);
	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 + 5px) 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 { /*dis*/
	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 + 5.5px) 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 + 5.5px) 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 + 0px) 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;
}