@font-face {
  font-family: 'SansSerif';
  src:  url('../font/w95fa.woff2') format('woff2'),
        url('../font/w95fa.woff') format('woff');
	size-adjust: 110%;
}

@font-face {
  font-family: 'Fixedsys';
  src:  url('../font/FSEX300.woff2') format('woff2'),
        url('../font/FSEX300.woff') format('woff');
	size-adjust: 140%;
}

@font-face {
  font-family: 'Georgia';
  src:  url('../font/Pixel Georgia.woff2') format('woff2'),
        url('../font/Pixel Georgia.woff') format('woff');
	size-adjust: 80%;
}

@font-face {
  font-family: 'Times';
  src:  url('../font/Times.woff2') format('woff2'),
        url('../font/Times.woff') format('woff');
	size-adjust: 110%;
}

@font-face {
  font-family: 'PerfectDOS';
  src:  url('../font/Perfect DOS VGA 437 Win.woff2') format('woff2'),
        url('../font/Perfect DOS VGA 437 Win.woff') format('woff');
	size-adjust: 135%;
}

@font-face {
  font-family: 'Arial';
  src:  url('../font/PIXEARG_.woff2') format('woff2'),
        url('../font/PIXEARG_.woff') format('woff');
	size-adjust: 75%;
}

@font-face {
  font-family: 'OwreKynge';
  src:  url('../font/OwreKynge.woff2') format('woff2'),
        url('../font/OwreKynge.woff') format('woff');
	size-adjust: 125%;
}

html {
	--font: 'SansSerif';
	--standard-text-color: #000000;
	--3d-face-color: #c0c0c0;
	--3d-dark-color: #808080;
	--3d-shadow-color: #000000;
	--3d-light-color: #ffffff;
	--window-color: #ffffff;
	--window-text-color: #000000;
	--desktop-color: #008080;
	--desktop-text-color: #ffffff;
	--selection-color: #000080;
	--selection-text-color: #ffffff;
	--inactive-selection-color: #808080;
	--titlebar-active-start-color: #000080;
	--titlebar-active-end-color: #1084d0;
	--titlebar-active-text-color: #ffffff;
	--titlebar-inactive-start-color: #808080;
	--titlebar-inactive-end-color: #c0c0c0;
	--titlebar-inactive-text-color: #c0c0c0;
	--titlebar-font: 'SansSerif';
	
	font-family: var(--font);
	font-size: calc(8px + 1.3vh);
	
	white-space: nowrap;
	
	user-select: none;
	
	background-color: #000000;
	color: var(--standard-text-color);
	--text-color: var(--standard-text-color);
	
	overflow: hidden;
	
	line-height: 1.01em;
	
	--pixelsize: 0.1em;
}

@media (max-width: 42em) {
	html {
		font-size: calc(8px + 0.8vh);
	}
	
	#taskbar button.task {
		max-width: 2.4em;
	}
	
	#taskbar button.task .icon {
		min-width: 1.6em;
	}
	
	#taskbar button.task span {
		display: none;
	}
}

* {
	cursor: none;	
   -webkit-appearance: none;
	box-sizing: border-box;
}

body {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	margin: 0;
	transition: filter linear 400ms, opacity linear 400ms;
	padding-bottom: 2.8em;
}

body:not(.ready) {
	opacity: 0;
	filter: saturate(0) blur(0.3em) contrast(4);
}

body:not(.ready) * {
	opacity: 0 !important;
}

.window {	
	position: fixed;
	padding: 0.4em;
	
	min-height: 2.4em;
	
	box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-shadow-color),
		inset 0.1em 0.1em 0 var(--3d-face-color),
		inset -0.2em -0.2em 0 var(--3d-dark-color),
		inset 0.2em 0.2em 0 var(--3d-light-color);

	background-color: var(--3d-face-color);
	
	z-index: 1;
	
	overflow: hidden;
	
	display: flex;
	flex-direction: column;
}

.window.noResize, .window.dialog {
	padding: 0.3em;
}

.window:not(.popUp) {
	min-width: 9.7em;
}

.window:not(.open) {
	opacity: 0;
	pointer-events: none;
}

.window:not(.active) {
	--selection-color: var(--inactive-selection-color);
}

.window > header {
	--text-color: var(--titlebar-inactive-text-color);
	
	display: flex;
	align-items: center;
	
	position: relative;
	
	margin-bottom: 0.1em;
	padding: 0 0.2em;
	height: 1.8em;
	
	background-color: var(--titlebar-inactive-start-color);
	background-image: linear-gradient(90deg, var(--titlebar-inactive-start-color), var(--titlebar-inactive-end-color));
	
	font-family: var(--titlebar-font);
	color: var(--text-color);
	
	user-select: none;
	
	flex-shrink: 0;
}

.window > header span {
	margin-top: 0.1em;
	max-width: calc(100% - 7em);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0.2em 0;
}

.window.active > header {
	--text-color: var(--titlebar-active-text-color);	
	background-color: var(--titlebar-active-start-color);
	background-image: linear-gradient(90deg, var(--titlebar-active-start-color), var(--titlebar-active-end-color));
}

.window > header .icon,
.window > header:not(:has(.icon)):before {
	display: block;
	width: 1.6em;
	height: 1.6em;
	
	margin-right: 0.2em;
	
	background-size: 7.4em 3.2em;
	background-position: 0 0;
}

.window > header:not(:has(.icon)):before {
	content: '';
	background-image: url('../img/icon_program.png');
}

.window.dialog > header .icon,
.window.dialog > header:before {
	display: none;
}

.window > header button {
	position: absolute;
	
	padding: 0;
	width: 1.5em;
	height: 1.4em;
	
	background-repeat: no-repeat;
	

	background-position-x: 50%;
	background-position-y: calc(50% - 0.05em);
	background-size: 1em;
}

.window > header button {
	position: absolute;
	
	padding: 0;
	width: 1.6em !important;
	height: 1.4em !important;
	
	background-position-x: 0.3em;
	background-position-y: 0.2em;
	background-size: 1em 1em;	
	background-repeat: no-repeat;
}

.window > header button:focus {
	box-shadow:
		inset -0.1em -0.1em 0 var(--3d-shadow-color),
		inset 0.1em 0.1em 0 var(--3d-light-color),
		inset -0.2em -0.2em 0 var(--3d-dark-color),
		inset 0.2em 0.2em 0 var(--3d-face-color) !important;
}

.window > header button:active {	
	left: unset;
	top: unset;
	background-position-x: 0.4em;
	background-position-y: 0.3em;
	
	box-shadow:
		inset -0.1em -0.1em 0 var(--3d-light-color),
		inset 0.1em 0.1em 0 var(--3d-shadow-color),
		inset -0.2em -0.2em 0 var(--3d-face-color),
		inset 0.2em 0.2em 0 var(--3d-dark-color) !important;
}

.window > header button:focus:after {
	content: none;
}

.window > header button.windowMinButton {
	right: 3.5em;	
	background-image: url('../img/win_min.png');
}

.window > header button.windowMaxButton {
	right: 1.9em;	
	background-image: url('../img/win_max.png');
}

.window.noMaximize > header button.windowMaxButton {
	background-image: url('../img/win_max_disabled.png');
	pointer-events: none;
}

.window.maximized > header button.windowMaxButton {
	background-image: url('../img/win_restore.png');
}

.window > header button.windowCloseButton {
	right: 0.2em;	
	background-image: url('../img/win_close.png');
}

.window.dialog > header button.windowMinButton,
.window.dialog > header button.windowMaxButton {
	display: none;
}

.window.popUp {
	z-index: 9999 !important;
}

.window.popUp > header {
	display: none;
}

.window.minimized {
	display: none;
}

.window.maximized {
  left: -0.4em !important;
  right: -0.4em;
  top: -0.4em !important;
  bottom: 2.3em;
	width: auto !important;
	max-width: unset;
	height: auto !important;
	max-height: unset;
}

body.resizing .window.active:not(.dummy),
body.dragging .window.active:not(.dummy) {
	background-color: transparent;
	box-shadow: none;
	border: var(--pixelsize) dotted #ffffff;
	mix-blend-mode: difference;
}

body.resizing .window.active:not(.dummy) > *,
body.dragging .window.active:not(.dummy) > * {
	opacity: 0;
}

body.resizing .window:not(.dialog):not(.noResize).active:not(.dummy):before,
body.resizing .window:not(.dialog):not(.noResize).active:not(.dummy):after,
body.dragging .window:not(.dialog):not(.noResize).active:not(.dummy):before,
body.dragging .window:not(.dialog):not(.noResize).active:not(.dummy):after {
	content: '';
	display: block;
	position: absolute;
	border: var(--pixelsize) dotted #ffffff;
	opacity: 1;
}

body.dragging .window.active,
body.resizing .window.active {
	padding: 0.3em;
}

body.dragging .window.active.noResize, body.dragging .window.active.dialog,
body.resizing .window.active.noResize, body.resizing .window.active.dialog {
	padding: 0.2em;
}

.window.active:before {
	inset: 0;
}

.window.active:after {
	inset: 0.1em;
}

.window > :not(header) {
	flex-grow: 1;
	flex-shrink: 1;
	overflow: hidden;
}

input, button, .button {	
	border: none;	
	outline: none;
	
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

button,
input[type=submit],
input[type=reset],
input[type=color],
.button {	
	position: relative;
	height: 2.3em;
	
	padding: 0.5em;

	box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-shadow-color),
		inset 0.1em 0.1em 0 var(--3d-light-color),
		inset -0.2em -0.2em 0 var(--3d-dark-color);

	background-color: var(--3d-face-color);
	
	overflow: hidden;
	text-overflow: ellipsis;
}

.window:not(:focus-within) button.default,
.window:not(:focus-within) input[type="submit"],
button:not(.iconButton):focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
.button:not(.iconButton):focus {
	box-shadow: 
		inset 0 0 0 0.1em var(--3d-shadow-color),
		inset -0.2em -0.2em 0 var(--3d-shadow-color),
		inset 0.2em 0.2em 0 var(--3d-light-color),
		inset -0.3em -0.3em 0 var(--3d-dark-color);
}

button:not(.iconButton):focus:after,
input[type="submit"]:focus:after,
input[type="reset"]:focus:after,
.button:not(.iconButton):focus:after {
	content: '';
	position: absolute;
	inset: 0.4em;
	border: var(--pixelsize) dotted var(--3d-shadow-color);
	border-top-left-radius: calc(var(--pixelsize) * 2.5);
	border-bottom-right-radius: calc(var(--pixelsize) * 2.5);
}

button:active,
input[type="submit"]:active,
input[type="reset"]:active,
.button:active:hover,
button.active,
input[type="submit"].active,
input[type="reset"].active,
.button.active:hover {
	padding: 0.6em 0.4em 0.4em 0.6em !important;
	box-shadow:
		inset 0 0 0 0.1em var(--3d-shadow-color),
		inset 0 0 0 0.2em var(--3d-dark-color) !important;
}

button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
.button:disabled,
button.disabled,
input[type="submit"].disabled,
input[type="reset"].disabled,
.button.disabled {
	pointer-events: none;
}

.disabled,
button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
.button:disabled,
button.disabled,
input[type="submit"].disabled,
input[type="reset"].disabled,
.button.disabled {
	color: var(--3d-dark-color);
	text-shadow: 0.1em 0.1em var(--3d-light-color);
}

::selection {
	color: var(--selection-text-color);
	background-color: var(--selection-color);
}

.bold,
.window > header {	
	letter-spacing: 0.075em;
	text-shadow: 
		0.033em 0 0 var(--text-color),
		0.075em 0 0 var(--text-color);
}

#desktop {
	--text-color: var(--desktop-text-color);
	
	display: flex;
	justify-content: flex-start;
	align-content: flex-start;
	flex-direction: column;
	flex-wrap: wrap;
	
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	padding-bottom: 2.8em;
	
	background-color: var(--desktop-color);
	color: var(--text-color);
	
	z-index: 1;
}

#desktop .wrapper {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	
	width: 10em;
	height: 7em;
	
	padding: 0.4em;
	
	user-select: none;
}

#desktop .wrapper.hidden {
	display: none;
}

#desktop .wrapper .icon {	
	position: relative;
	
	width: 3.2em;
	height: 3.2em;
	
  background-image: url("../img/icon_program.png");
	
	background-position: 100% 100%;
	background-size: 7.4em 3.2em;
}

#desktop .wrapper .icon:after {
	content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../img/link.png");
  background-size: 1.1em 1.1em;
  background-position: bottom left;
  background-repeat: no-repeat;
  pointer-events: none;
}

#desktop .wrapper .icon .iconActive {
	position: absolute;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

#desktop .wrapper:not(.active) .icon .iconActive {
	display: none;
}

#desktop .wrapper .label {	
	padding: 0.1em 0.2em;
	margin-top: 0.3em;
	border: var(--pixelsize) dotted transparent;
	
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	
	white-space: nowrap;
	
	background-color: var(--desktop-color);
}

#desktop .wrapper.active .label {
	background-color: var(--selection-color);
	color: var(--selection-text-color);
}

#desktop.focused .wrapper.focused .label {
	border-color: #ff0000;
}

#desktop.focused .wrapper.active.focused .label {
	border-color: #ffff00;
}


#taskbar {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	
	background-color: var(--3d-face-color);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2.8em;
	
	padding: 0.2em 0.2em 0.1em;

	box-shadow: 
		inset 0 0.1em 0 var(--3d-face-color),
		inset 0 0.2em 0 var(--3d-light-color);
	
	z-index: 9998;
}

#taskbar .task {
	flex-basis: 16em;
	height: 2.2em;
	padding: 0.3em 0.3em;
	text-align: left;
}

#taskbar .task + .task {
	margin-left: 0.2em;
}

#taskbar .task.active {	
	background-image: url('../img/pattern.svg');
	background-size: 0.2em 0.2em;

	box-shadow:
		inset -0.1em -0.1em 0 var(--3d-light-color),
		inset 0.1em 0.1em 0 var(--3d-shadow-color),
		inset -0.2em -0.2em 0 var(--3d-face-color),
		inset 0.2em 0.2em 0 var(--3d-dark-color) !important;
	padding: 0.1em 0.4em !important;
}

#taskbar .task:active {	
	box-shadow:
		inset -0.1em -0.1em 0 var(--3d-light-color),
		inset 0.1em 0.1em 0 var(--3d-shadow-color),
		inset -0.2em -0.2em 0 var(--3d-face-color),
		inset 0.2em 0.2em 0 var(--3d-dark-color) !important;
	padding: 0.3em 0.3em !important;
}

#taskbar button.task:focus:after {
	inset: 0.2em;
}

#taskbar .task {
	display: flex;
	align-items: center;
	gap: 0.2em;
}

#taskbar .task .icon {
	flex-shrink: 0;
	width: 1.6em;
	height: 1.6em;
	
	background-position: 0 0;
	background-size: 7.4em 3.2em;
	margin-right: 0.1em;
	margin-top: -0.1em;
}

#taskbar .task span {
	flex-shrink: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

#taskbar .task.active:not(:active) .icon,
#taskbar .task.active:not(:active) span {
	position: relative;
	top: 0.1em;
}

#taskbar .spacer {
  order: 9998;
	flex-grow: 1;
}

#taskbar .clock {
  order: 9999;
	flex-grow: 0;
	flex-shrink: 0;
	gap: 0.4em;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	height: 2.1em;
	
	padding: 0 0.8em 0 0.3em;
	margin-left: 0.8em;
	
	box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-light-color),
		inset 0.1em 0.1em 0 var(--3d-dark-color);
}

#taskbar #taskIcons:not(:empty) {
	margin-right: 0.4em;
}

#taskbar #taskIcons {
	display: flex;
	gap: 0.2em;
}

#taskbar #taskIcons .icon {
	width: 1.6em;
	height: 1.6em;
	background-position: 0 0;
	background-size: 7.4em 3.2em;
}

.iconButton {
	width: 2em;
	height: 2em;
	padding: 0.2em;
	background-size: 1.6em 1.6em;
	background-position: center;
	background-repeat: no-repeat;
	flex-grow: 0;
	flex-shrink: 0;
}

.centeredLine {
	display: flex;
	align-items: center;
	gap: 0.3em;
}

#contextMenu, #contextMenu .submenu {
	position: absolute;
	background-color: var(--3d-face-color);

	box-shadow:
		0.05em 0.05em 0 0.05em var(--3d-shadow-color),
		inset 0.1em 0.1em 0 #dedede,
		inset -0.1em -0.1em 0 var(--3d-dark-color),		
		inset 0.2em 0.2em 0 var(--3d-light-color);
	
	z-index: 9999998;
	
	padding: 0.2em 0.1em 0.2em 0.2em;
}

#contextMenu:empty {
	display: none !important;
}

#contextMenu > :not(hr), #contextMenu .submenu > :not(hr) {
	position: relative;
	padding: 0.5em 2.2em 0.3em 2.2em;
}

#contextMenu > :not(hr):hover, #contextMenu .submenu > :not(hr):hover {
	background-color: var(--selection-color);
	--text-color: var(--selection-text-color);
	color: var(--text-color);
}

#contextMenu > :not(hr) .icon, #contextMenu .submenu > :not(hr) .icon {	
	position: absolute;
	
	width: 1.6em;
	height: 1.6em;
	
	left: 0.2em;
	top: 0.1em;
	
	background-position: 0 0;
	background-size: 7.4em 3.2em;
	
	pointer-events: none;
}

#contextMenu > hr, #contextMenu .submenu > hr {
	display: block;
	height: 0.2em;
	border: none;
	margin: 0.2em 0;
	background-color: var(--3d-dark-color);
	box-shadow: inset 0 -0.1em var(--3d-light-color);
}

#contextMenu > .disabled, #contextMenu .submenu > .disabled {
	position: relative;
	top: -0.1em;
	pointer-events: none;
}

#contextMenu.startMenu {
	padding-left: 2.0em;
	min-width: 16.4em;
}

#contextMenu.startMenu:before {
	content: '';
	position: absolute;
	left: 0.2em;
	top: 0.2em;
	bottom: 0.2em;
	width: 1.8em;
	background-color: #808080;
	background-image: url('../img/startMenu.png');
	background-size: 1.8em;
	background-repeat: no-repeat;
	background-position: center calc(100% - 0.6em);
}

#contextMenu.startMenu > :not(hr) {
	padding: 1.2em 2.4em 1.1em 4.4em;
}

#contextMenu.startMenu .icon {
	left: 0.6em;
	top: 0;
	
  background-image: url("../img/icon_program.png");
}

#contextMenu.startMenu > :not(hr) > .icon {
	width: 3.2em;
	height: 3.2em;
	
	background-position: 100% 100%;
	background-size: 7.4em 3.2em;
}

#contextMenu > :not(.hover) > .submenu, #contextMenu .submenu > :not(.hover) > .submenu {
  display: none;
}

#contextMenu .submenu {
	left: calc(100% - 0.3em);
	top: -0.2em;
	color: var(--standard-text-color);
	
	display: flex;
	flex-direction: column;
}

#contextMenu .submenu.left {
	left: auto;
	right: calc(100% - 0.3em);
}

#contextMenu .submenu.top {
	top: auto;
	bottom: -0.2em;
}

#contextMenu .submenu > .folder {
	order: -1;
}

#contextMenu > div:has(.submenu), #contextMenu .submenu > div:has(.submenu) {
	background-image: url('../img/arrow_right.png');
	background-size: 0.5em;
	background-repeat: no-repeat;
	background-position: calc(100% - 0.6em) calc(50% + 0.05em);
}

#contextMenu > div:hover:has(.submenu), #contextMenu .submenu > div:hover:has(.submenu) {
	background-image: url('../img/arrow_right_white.png');
}

#contextMenu > div.disabled:has(.submenu), #contextMenu .submenu > div.disabled:has(.submenu) {
	background-image: url('../img/arrow_right_disabled.png');
}

#startButton {
	height: 2.2em;
	background-image: url('../img/miniicon_logo.png');
	background-size: 1.6em;
	background-repeat: no-repeat;
	background-position: 0.3em 0.2em;
	padding: 0.4em 0.5em 0.3em 2em !important;
	margin-right: 0.5em;
	flex-shrink: 0;
}

#startButton:active, #startButton.active {	
	box-shadow:
		inset -0.1em -0.1em 0 var(--3d-light-color),
		inset 0.1em 0.1em 0 var(--3d-shadow-color),
		inset -0.2em -0.2em 0 var(--3d-face-color),
		inset 0.2em 0.2em 0 var(--3d-dark-color) !important;
	padding: 0.5em 0.4em 0.2em 2.1em !important;
	background-position: 0.4em 0.3em;
}

#startButton:focus {
	display: none;
}

#startButton:focus:after, #startButton.active:after {
	content: '';
	position: absolute;	
	inset: 0.3em;
	border: var(--pixelsize) dotted var(--3d-shadow-color);
	border-top-left-radius: calc(var(--pixelsize) * 2.5);
	border-bottom-right-radius: calc(var(--pixelsize) * 2.5);
}

#cursor {
	position: fixed;
	width: 3.2em;
	height: 3.2em;
	z-index: 9999999;
	pointer-events: none;
	background-image: url('../img/cursor.png');
	background-position: top left;
	background-size: contain;
	background-repeat: no-repeat;
}

body.text #cursor {
	background-image: url('../img/cursor_text.png');
	margin: -1.1em;
	mix-blend-mode: difference;
}

body.cursor-precision #cursor {
	background-image: url('../img/cursor_precision.png');
	margin: -1em;
	mix-blend-mode: difference;
}

body.resize-e #cursor, body.resize-w #cursor {
	background-image: url('../img/cursor_ew.png');
	margin: -1.1em;
}

body.resize-n #cursor, body.resize-s #cursor {
	background-image: url('../img/cursor_ns.png');
	margin: -1.1em;
}

body.resize-n.resize-w #cursor, body.resize-s.resize-e #cursor {
	background-image: url('../img/cursor_nwse.png');
}

body.resize-n.resize-e #cursor, body.resize-s.resize-w #cursor {
	background-image: url('../img/cursor_nesw.png');
}

body.dragging #cursor {
	background-image: url('../img/cursor_move.png');
	margin: -1.1em;
}


body.busy #cursor {
	background-image: url('../img/cursor_busy.png');
	margin-left: -0.5em;
	margin-top: -1.1em;
	mix-blend-mode: normal;
}

.tabs {
  position: relative;
  overflow: hidden;
  padding-top: 1.8em;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
}

.tabs .tab:not(.active) {
  display: none;
}

.tabs .tab {
	position: relative;
  padding: 0.4em;
  box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-shadow-color),
		inset 0.1em 0.1em 0 var(--3d-light-color),
		inset -0.2em -0.2em 0 var(--3d-dark-color);
	z-index: 1;
	background-color: var(--3d-face-color);
	flex-grow: 1;
}

.tabs .tabsHeader {
  display: flex;
  position: absolute;
  top: 0;
	padding-left: 0.2em;
}

.tabs .tabsHeader .control {
	position: relative;
  padding: 0.5em 0.6em 0.4em;
  box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-shadow-color),
		inset 0.1em 0.1em 0 var(--3d-light-color),
		inset -0.2em -0.2em 0 var(--3d-dark-color);
	background-color: var(--3d-face-color);
}

.tabs .tabsHeader .control:not(.active) {
	margin-top: 0.1em;
}

.tabs .tabsHeader .control.active {
	position: relative;
	z-index: 4;
	margin-right: -0.2em;
	margin-left: -0.2em;
	padding-left: 0.8em;
	padding-right: 0.8em;
}

.tabs .tabsHeader .control.active:before {
  content: '';
	position: absolute;
	background-color: var(--3d-face-color);
	left: 0;
	right: 0;
	bottom: -0.05em;
	height: 0.4em;
	box-shadow: 
		inset 0 -0.2em 0 var(--3d-face-color),
		inset 0.1em 0 0 var(--3d-light-color),
		inset -0.1em 0em 0 var(--3d-shadow-color),
		inset -0.2em 0em 0 var(--3d-dark-color);
}

.tabs .tabsHeader .control:first-child:before {
	box-shadow: 
		inset 0.1em 0 0 var(--3d-light-color),
		inset 0 -0.2em 0 var(--3d-face-color),
		inset -0.1em 0em 0 var(--3d-shadow-color),
		inset -0.2em 0em 0 var(--3d-dark-color);
}

.tabs .tabsHeader .control .helper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 0.2em;
		box-shadow: 
		inset 0.1em 0 0 var(--3d-face-color),
		inset 0.2em 0 0 var(--3d-light-color),
		inset -0.1em 0 0 var(--3d-face-color),
		inset -0.2em 0 0 var(--3d-shadow-color);
}

.tabs .tabsHeader .control .helper:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 0.1em;
	background-color: var(--3d-light-color);
		box-shadow: 
		inset 0.2em 0 0 var(--3d-face-color),
		inset -0.2em 0 0 var(--3d-face-color);
}

.tabs .tabsHeader .control:not(.active) .helper {
	height: 0.3em;
}

.tabs .tabsHeader .control:not(.active) .helper:before {
	top: 0.1em;
}

.tabs .tabsHeader .control:not(.active) .helper:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 0.1em;
	background-color: var(--3d-face-color);
}

.checkboxWrapper {
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
	background-color: var(--window-color);
	box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-light-color),
		inset 0.1em 0.1em 0 var(--3d-dark-color),
		inset -0.2em -0.2em 0 var(--3d-face-color),
		inset 0.2em 0.2em 0 var(--3d-shadow-color);
}

.checkboxWrapper input {
	height: 100%;
	width: 100%;
	margin: 0;
	opacity: 0;
}

.checkboxWrapper.checked {
  background-image: url('../img/check.png');
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
}

.rangeWrapper {
  position: relative;
  height: 6.6em;
  width: 2em;
	margin-top: 0.8em;
	margin-bottom: 0.8em;
	padding-right: 3em;
}

.rangeWrapper:before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 1.1em;
  width: 0.4em;
	box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-light-color),
		inset 0.1em 0.1em 0 var(--3d-dark-color),
		inset -0.2em -0.2em 0 var(--3d-face-color),
		inset 0.2em 0.2em 0 var(--3d-shadow-color);
	pointer-events: none;
}

.rangeWrapper:after {
  content: '';
  position: absolute;
  display: block;
  inset: -0.8em 0;
	pointer-events: none;
}

.rangeWrapper.focus:after {
	border: var(--pixelsize) dotted var(--3d-dark-color);
}

.rangeWrapper input {
  height: 100%;
  padding: 0;
	margin-left: 0.6em;
	opacity: 0;
}

.rangeWrapper .handle {
	position: absolute;
	width: 2.1em;
	height: 1.1em;
	top: 0;
	left: 0.2em;
	background-color: var(--3d-face-color);
	box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-shadow-color),
		inset 0.1em 0.1em 0 var(--3d-light-color),
		inset -0.2em -0.2em 0 var(--3d-dark-color);
	pointer-events: none;
}

#tooltip {
	position: fixed;
	background-color: white;
	pointer-events: none;
	border: 0.1em solid black;
	padding: 0.3em 0.3em 0.2em;
	background-image: url('../img/tooltip.png');
	background-size: 0.2em 0.2em;
	background-position: left top;
	z-index: 99999;
	opacity: 0;
}

body.resizing * {
	pointer-events: none;
}

@keyframes maximizing {
	from {
	}
	to {
		left: 0;
		top: 0;
		width: 100vw;
	}
}

@keyframes restoring {
	from {
		left: 0;
		top: 0;
		width: 100vw;
	}
	to {
	}
}

.window.maximizing, .window.restoring {
  overflow: visible;
	pointer-events: none;
}

.window header.animationDummy button {
  display: none;
}

.window header.animationDummy {
  position: fixed;
	animation-duration: 200ms;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	animation-timing-function: linear;
	margin-left: 0;
	margin-top: 0;
	transition: all linear 200ms;
}

.window.maximizing > header.animationDummy {
	animation-name: maximizing;
}

.window.restoring > header.animationDummy {
	animation-name: restoring;
}

.window.reopening {
	background-color: transparent;
	box-shadow: none;
	pointer-events: none;
}

.window.reopening > :not(.animationDummy) {
	opacity: 0;
}

textarea {
	border: none;
	resize: none;
	
	font-family: Fixedsys;
	font-size: inherit;
	
	box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-light-color),
		inset 0.1em 0.1em 0 var(--3d-shadow-color),
		inset -0.2em -0.2em 0 var(--3d-face-color),
		inset 0.2em 0.2em 0 var(--3d-dark-color);
	
	padding: 0.2em 0.4em;
	
	white-space: nowrap;
	overflow: hidden;
	
	background-color: var(--window-color);
	color: var(--window-text-color);
}

textarea:focus {
	outline: none;
}

.panel {
	position: relative;
	box-shadow:
		inset -0.1em -0.1em var(--3d-light-color),
		inset -0.2em -0.2em var(--3d-dark-color),
		inset 0.1em 0.1em var(--3d-dark-color),
		inset 0.2em 0.2em var(--3d-light-color);
	padding: 0.8em;
	padding-top: 1em;
}

.panel > .panelLabel, .panel > header {
	position: absolute;
	left: 0.6em;
	top: -0.4em;
	padding: 0 0.2em;
	background-color: var(--3d-face-color);
}

.selectWrapper {
	position: relative;
	background-color: var(--window-color);
	color: var(--window-text-color);
}

.selectWrapper:before  {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-light-color),
		inset 0.1em 0.1em 0 var(--3d-dark-color),
		inset -0.2em -0.2em 0 var(--3d-face-color),
		inset 0.2em 0.2em 0 var(--3d-shadow-color);
	z-index: 1;
	pointer-events: none;
}

.selectWrapper select[size="0"], .selectWrapper select:not([size]) {
	margin: 0.3em 0.3em;
	padding: 0.1 0.1em;
	width: calc(100% - 2.2em) !important;
	border: 0.1em solid transparent;
}

@-moz-document url-prefix() {
  .selectWrapper select[size="0"], .selectWrapper select:not([size]) {
  	padding: 0 0.1em;
  }
}

.selectWrapper select[size="0"]:focus, .selectWrapper select:not([size]):focus {
  background-color: var(--selection-color);
	color: var(--selection-text-color);
	border: var(--pixelsize) dotted #ffff80; /* TODO */
}

.selectWrapper button {
	position: absolute;
	right: 0.2em;
	width: 1.6em;
	height: 1.6em;
	left: unset;
	box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-shadow-color),
		inset 0.1em 0.1em 0 var(--3d-face-color),
		inset -0.2em -0.2em 0 var(--3d-dark-color),
		inset 0.2em 0.2em 0 var(--3d-light-color);
	background-size: 0.7em 0.4em;
	background-position: center center;
	background-repeat: no-repeat;
}

.selectWrapper button.scrollUp {
	top: 0.2em;
	background-image: url('../img/arrow_up.png');
}

.selectWrapper button.scrollDown {
	top: unset;
	bottom: 0.2em;
	background-image: url('../img/arrow_down.png');
}

.selectWrapper button.open {
	height: auto;
	top: 0.2em;
	bottom: 0.2em;
	background-image: url('../img/arrow_down.png');
}

.selectWrapper button:before {
	display: none;
}

.selectWrapper button:active {
	box-shadow: 
		inset 0 0 0 0.1em var(--3d-dark-color);
	background-position: calc(50% + 0.05em) calc(50% + 0.05em);
}

.selectWrapper .scrollbar {
	position: absolute;
	right: 0.2em;
	top: 1.8em;
	bottom: 1.8em;
	width: 1.6em;
	background-color: var(--3d-face-color);
}

.selectWrapper .scrollbar:before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	background-image: url('../img/scrollbar.png');
	background-size: 0.2em 0.2em;
	background-position: 0 0;
	mix-blend-mode: luminosity;
}

.selectWrapper .scrollbar .indicator {
	position: relative;
	min-height: 0.8em;
	background-color: var(--3d-face-color);
	box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-shadow-color),
		inset 0.1em 0.1em 0 var(--3d-face-color),
		inset -0.2em -0.2em 0 var(--3d-dark-color),
		inset 0.2em 0.2em 0 var(--3d-light-color);
	z-index: 1;
}

.selectWrapper .scrollbar .barUpperSpace,
.selectWrapper .scrollbar .barLowerSpace {
	position: absolute;
	width: 100%;
}

.selectWrapper .scrollbar .barUpperSpace {
	top: 0;
}

.selectWrapper .scrollbar .barLowerSpace {
	bottom: 0;
}

.selectWrapper .scrollbar .barUpperSpace:active,
.selectWrapper .scrollbar .barLowerSpace:active {
  background: #808080;
	mix-blend-mode: difference;
}

.selectWrapper .scrollbar.dragging * {
  pointer-events: none;
}

.selectWrapper .list {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background-color: var(--window-color);
	color: var(--window-text-color);
	border: 0.1em solid black;
}

.selectWrapper .list.reverse {
	bottom: 100%;
	top: unset;
}

.selectWrapper .list.fixed {
	position: fixed;
	left: unset;
	right: unset;
	top: unset;
	bottom: unset;
	z-index: 9999;
}

.selectWrapper .list .option {
	padding: 0.1em;
	border: 0.1em solid transparent;
}

.selectWrapper .list .option.hover {
	background-color: var(--selection-color);
	color: var(--selection-text-color);
	border: var(--pixelsize) dotted #ffff80; /* TODO */
}

select {
	position: relative;
	
	padding: 0.2em;
	
	border: none;

	background-color: var(--window-color);
	color: var(--window-text-color);
	
	font-family: inherit;
	font-size: inherit;
	
	overflow: hidden;
}

select:focus {
	outline: none;
	outline-style: none;
	box-shadow: none;
	border-color: transparent;
}

select option {
	padding: 0.2em 0.3em;
}

@-moz-document url-prefix() {
	select option {
		padding: 0.1em 0.3em;
	}
}

select option:checked {
	position: relative;
	background: linear-gradient(var(--selection-color), var(--selection-color)) !important;
	color: var(--selection-text-color);	
}

select:focus option:checked:before,
select:focus option:checked:after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
}

select:focus option:checked:before {
	border: 0.1em solid var(--selection-color);
}

select:focus option:checked:after {
	border: var(--pixelsize) dotted #ffffff;
	mix-blend-mode: difference;
}

.selectWrapper:has(select:disabled) {
	background-color: var(--3d-face-color);
	pointer-events: none;
}

select:disabled {
	color: transparent;
	background-color: var(--3d-face-color);
}

.selectWrapper:has(select:disabled) button.open {
	background-image: url('../img/arrow_down_disabled.png');
	background-size: 0.8em 0.4em;
	background-position: calc(center + 0.05em) center;
}

input[type='radio'] {
	display: block;
	width: 1.2em;
	height: 1.2em;
	box-shadow: none;
	margin: 0;
	background-image: url('../img/radio.png');
	background-size: contain;
	background-color: transparent;
	mix-blend-mode: luminosity;
}

input[type='radio']:checked {
	background-image: url('../img/radio_checked.png');
}

input[type='radio'] + label {
	margin-left: 0.4em;
}

.inset {
	padding: 0.2em;
	
	box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-light-color),
		inset 0.1em 0.1em 0 var(--3d-dark-color),
		inset -0.2em -0.2em 0 var(--3d-face-color),
		inset 0.2em 0.2em 0 var(--3d-shadow-color);
}

body:not(.debugMode) .debug {
	display: none !important;
}

input[type=color] {
	width: 4.1em;
  height: 2.1em;
	padding: 0.4em 1.5em 0.5em 0.5em;
	background-image: url('../img/input_color.png');
	background-size: 100% 100%;
	-webkit-appearance: none;
}

input[type=color]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input[type=color]::-webkit-color-swatch, input[type=color]::-moz-color-swatch {
	border: none;
}

input[type=color]:disabled {
	background-image: url('../img/input_color_disabled.png');
	pointer-events: none;
}

input[type=color]:disabled::-moz-color-swatch {
	display: none;
}

input[type=color]:disabled::-webkit-color-swatch-wrapper {
	display: none;
}

.tableWrapper {
	position: relative;
	background-color: var(--window-color);
}

.tableWrapper:before {
	content: '';
	display: block;
	position: absolute;
  inset: 0;
	overflow: hidden;
	box-shadow: 
		inset -0.1em -0.1em 0 var(--3d-light-color),
		inset 0.1em 0.1em 0 var(--3d-dark-color),
		inset -0.2em -0.2em 0 var(--3d-face-color),
		inset 0.2em 0.2em 0 var(--3d-shadow-color);
	pointer-events: none;
	z-index: 1;
}

table {
	width: calc(100% - 0.4em);
  margin: 0.2em;
	position: relative;	
	border-collapse: collapse;
}

table tr {
	position: relative;
}

table th, table td {
	padding: 0.3em 0.6em 0.2em;
}

table th {
	font-weight: normal;
	text-align: left;
	background-color: var(--3d-face-color);
	box-shadow:
		inset -0.1em -0.1em 0 var(--3d-shadow-color),
		inset 0.1em 0.1em 0 var(--3d-light-color),
		inset -0.2em -0.2em 0 var(--3d-dark-color);
}

table tr.active td {
	background-color: var(--selection-color);
	color: var(--selection-text-color);
}

table tr.active:focus :first-child:before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	border: var(--pixelsize) dotted #ffffff;
	mix-blend-mode: difference;
	pointer-events: none;
}

.window .menuBar {
	flex-grow: 0;
	flex-shrink: 0;
	
	display: flex;
	margin: 0;
	padding: 0;
}

.window .menuBar > li {
	display: block;
	padding: 0.3em 0.6em;
}

.window .menuBar > li:not(.disabled).active {
	background-color: var(--selection-color);
	color: var(--selection-text-color);
}

.window .menuBar ul {
	display: none;
}

.screensaver {
	position: fixed;
	inset: 0;
	z-index: 99999999;
}

.screensaver:not(.active) {
	display: none;
}

.screensaver header {
	display: none;
}

.screensaver * {
	pointer-events: none;
}