/* Parts copied from 98.css */

:root {
	/* Color */
	--text-color: #222222;
	--surface: #c0c0c0;
	--button-highlight: #ffffff;
	--button-face: #c0c0c0;
	--button-shadow: #808080;
	--window-frame: #0a0a0a;
	--dialog-blue: #000080;
	--dialog-blue-light: #1084d0;
	--dialog-gray: #808080;
	--dialog-gray-light: #b5b5b5;
	--link-blue: #0000ff;

	/* Spacing */
	--element-spacing: 8px;
	--grouped-button-spacing: 4px;
	--grouped-element-spacing: 6px;
	--radio-width: 12px;
	--checkbox-width: 13px;
	--radio-label-spacing: 6px;
	--range-track-height: 4px;
	--range-spacing: 10px;

	/* Borders */
	--border-width: 1px;
	--border-raised-outer:
		inset -1px -1px var(--window-frame), inset 1px 1px var(--button-highlight);
	--border-raised-inner:
		inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-face);
	--border-sunken-outer:
		inset -1px -1px var(--button-highlight), inset 1px 1px var(--window-frame);
	--border-sunken-inner:
		inset -2px -2px var(--button-face), inset 2px 2px var(--button-shadow);
	--default-button-border-raised-outer:
		inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame);
	--default-button-border-raised-inner:
		inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow),
		inset 3px 3px var(--button-face);
	--default-button-border-sunken-outer:
		inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame);
	--default-button-border-sunken-inner:
		inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow),
		inset -3px -3px var(--button-face);

	/* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
	--border-field:
		inset -1px -1px var(--button-highlight), inset 1px 1px var(--button-shadow),
		inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame);
	--border-status-field:
		inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);
}

html {
	image-rendering: pixelated;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: grayscale;
	caret-color: currentColor;
}

input {
	font-family: 'MS Sans Serif', sans-serif;
}

textarea {
	resize: none;
	font-family: 'Courier New', Courier, monospace;
}

input,
textarea {
	font-size: 16px;
	max-width: 100%;
}

input[type='submit'],
input[type='reset'] {
	box-sizing: border-box;
	border: none;
	color: transparent;
	text-shadow: 0 0 var(--text-color);
	background: var(--surface);
	box-shadow: var(--border-raised-outer), var(--border-raised-inner);
	border-radius: 0;

	min-width: 75px;
	min-height: 26px;
	padding: 0 12px;
	font-weight: normal;
}

input[type='submit']:not(:disabled):active,
input[type='reset']:not(:disabled):active {
	box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
	text-shadow: 1px 1px var(--text-color);
}

input[type='submit'].default:not(:disabled):active,
input[type='reset'].default:not(:disabled):active {
	box-shadow:
		var(--default-button-border-sunken-outer),
		var(--default-button-border-sunken-inner);
}

@media (not(hover)) {
	input[type='submit']:not(:disabled):hover,
	input[type='reset']:not(:disabled):hover {
		box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
	}
}

input[type='submit']:focus,
input[type='reset']:focus {
	outline: 1px dotted #000000;
	outline-offset: -4px;
}

input[type='submit']::-moz-focus-inner,
input[type='reset']::-moz-focus-inner {
	border: 0;
}

:disabled,
:disabled + label,
input[readonly],
input[readonly] + label {
	color: var(--button-shadow);
}

input[type='submit']:disabled,
input[type='reset']:disabled,
:disabled + label {
	text-shadow: 1px 1px 0 var(--button-highlight);
}

input[type='text'],
select,
textarea {
	padding: 3px 4px;
	border: none;
	box-shadow: var(--border-field);
	background-color: var(--button-highlight);
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
}
input[type='text'],
select {
	height: 26px;
}

input[type='text'] {
	/* For some reason descenders are getting cut off without this */
	line-height: 2;
}

input[type='text']:read-only,
textarea:disabled {
	background-color: var(--surface);
}

input[type='text']:focus,
textarea:focus {
	outline: none;
}

::-webkit-scrollbar {
	width: 16px;
}
::-webkit-scrollbar:horizontal {
	height: 17px;
}

::-webkit-scrollbar-corner {
	background: var(--button-face);
}

::-webkit-scrollbar-track {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-thumb {
	background-color: var(--button-face);
	box-shadow:
		inset -1px -1px #0a0a0a,
		inset 1px 1px #dfdfdf,
		inset -2px -2px grey,
		inset 2px 2px #fff;
}
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
	display: block;
}
::-webkit-scrollbar-button:vertical:start {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E");
	height: 17px;
}
::-webkit-scrollbar-button:vertical:end {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");
	height: 17px;
}
::-webkit-scrollbar-button:horizontal:start {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E");
	width: 16px;
}
::-webkit-scrollbar-button:horizontal:end {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E");
	width: 16px;
}