@font-face {
	font-family: 'Windows Command Prompt';
	src: url('../fonts/Windows-Command-Prompt.woff2') format('woff2'), url('../fonts/Windows-Command-Prompt.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

:root {
	--main-font-family: 'Windows Command Prompt';
	--main-border-radius: 3px;
	--main-amplifiation-indicator-size: 8px;
	--main-bg-color: rgba(0,0,0,1);
	--main-bg-sub-color: #000;
	--main-fg-color: rgba(255,255,255,1);
	--main-fg-sub-color: rgba(255,255,255,1);
	--main-fs-small: 13px;
	--main-fs-medium: 16px;
	--main-fs-large: 18px;
	--main-space-base: 5px;
	--main-space-small: 12px;
	/*--main-space-medium: 15px;*/
	/*--main-space-large: 16px;*/
	--main-fs-letterspacing: 1.15px;
}

body, html {
	margin: 0;
	height: 100vh;
}

body {
	font-family: var(--main-font-family);
	background-color: var(--main-bg-color);
	color: var(--main-fg-color);
}

#title-bar {
	width: 100%;
	background-color: var(--main-bg-sub-color);
	-webkit-user-select: none;
	-webkit-app-region: drag;
	text-align: right;
	padding: 13px 13px 15px 13px;
	color: #fff;
	font-size: var(--main-fs-medium);
}

#title-bar .title-bar__logo {
}

/*@media (prefers-color-scheme: dark) {
  body { background: #333; color: white; }
}

@media (prefers-color-scheme: light) {
  body { background: #ddd; color: black; }
}*/

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

[data-text] {
	text-transform: uppercase;
}

[data-text="signal"] {
	z-index: 9000;
	position: absolute;
	left: 10px;
	bottom: 22px;
	font-size: var(--main-fs-medium);
	letter-spacing: var(--main-fs-letterspacing);
}

.meta-conn {
	z-index: 9000;
	position: absolute;
	left: 10px;
	bottom: 20px;
	font-size: var(--main-fs-medium);
	letter-spacing: var(--main-fs-letterspacing);
}

[data-text="status"] {
	width: 100%;
	font-size: var(--main-fs-medium);
	letter-spacing: var(--main-fs-letterspacing);
	margin-top: var(--main-space-small);
}

[data-text="status"]:before {
	display: inline-block;
	content: '';
	width: 10px;
	height: 10px;
	background-position: left center;
	margin-right: 7px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('../img/ui/arrow.svg');
}

[data-text] span {
	opacity: 1;
	/*transition: all 0.1s linear;*/
	/*transform: translateX(0px);*/
	display: inline-block;	/*min-width: 0.9ch;*/
}

[data-text] span.invisible {
	opacity: 0;
	/*transform: translateY(1px);*/
}

[data-text] span.space {
	display: inline-block;
	min-width: 0.6ch;
}

[data-text="coordinates-1"] {
	position: absolute;
	top: calc(var(--main-space-small) * calc(1.25 * 1));
	left: var(--main-space-small);
	z-index: 9000;
	font-family: 'Pixel';
	font-size: 20px;
	line-height: 6px;
}

[data-text="coordinates-2"] {
	position: absolute;
	top: calc(var(--main-space-small) * calc(1.25 * 2));
	left: var(--main-space-small);
	z-index: 9000;
	font-family: 'Pixel';
	font-size: 20px;
	line-height: 6px;
}

[data-text="coordinates-3"] {
	position: absolute;
	top: calc(var(--main-space-small) * calc(1.25 * 3));
	left: var(--main-space-small);
	z-index: 9000;
	font-family: 'Pixel';
	font-size: 20px;
	line-height: 6px;
}


/*.hide-until-operational {
	opacity: 0;
}*/

#destination-canvas, #source-canvas {
	/*opacity: 0;*/
	position: absolute;
	top: 100%;
	left: 100%;
	/*z-index: 99999;*/
}

div[data-container="wrap"] {
	display: flex;
	flex-direction: column;
	max-width: 400px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	height: 100%;
	padding: 20px 0;
	width: calc(100vw - 40px);
}

div[data-container="screen"] .context-menu {
	border: 1px solid var(--main-fg-color);
	position: absolute;
	z-index: 9000;
	background-color: var(--main-bg-color);
	color: var(--main-fg-color);
	border-radius: var(--main-border-radius);
}

div[data-container="screen"] .context-menu a {
	display: block;
	white-space: nowrap;
	padding: 6px 8px;
	cursor: pointer;
	min-width: 160px;
	font-size: var(--main-fs-medium);
}

div[data-container="screen"] .context-menu a:hover {
	background-color: var(--main-fg-color);
	color: var(--main-bg-color);
}

div[data-container="screen"] .context-menu a:not(:last-child) {
	border-bottom: 1px solid var(--main-fg-color);
}

div[data-container="display"] {
	width: 100%;
}

div[data-container="screen"] {
	position: relative;
	cursor: url('../img/ui/cursor-v2.svg') 12 12, auto;
	overflow: hidden;
	border-radius: var(--main-border-radius);
	border: 1px dotted var(--main-fg-sub-color);
}

div[data-container="screen"] img {
	position: absolute;
	left: 0px;
	top: 0px;
}

div[data-container="controls"] {
	width: 100%;
	border: 1px dotted var(--main-fg-sub-color);
	padding: var(--main-space-small);
	border-radius: var(--main-border-radius);
	margin: 0 0 var(--main-space-small) 0;
}

div[data-container="intro"] {
	background-image: url(../img/ui/stars.png);
	background-size: 450px;
	/*background-repeat: repeat-x;*/
	background-position: center center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background-color: var(--main-bg-color);
	font-size: 20px;
	line-height: 1.16em;
	display: flex;
	align-items: center;
	justify-content: center;
}

div[data-container="intro-inner"] {
	max-width: 450px;
	margin: 0px auto;
}

div[data-container="intro-inner"] p:not(:last-child) {
	margin: 0 0 1em 0;
}

div[data-container="intro-inner"] img {
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
	max-width: 170px;
	border-radius: 7px;
}

div[data-container="controls"] .control-row {
	display: flex;
	align-items: center;
}

div[data-container="controls"] .control-row .control-row--title {
	text-transform: uppercase;
	white-space: nowrap;
	margin-right: auto;
	letter-spacing: 0.5px;
	font-size: var(--main-fs-medium);
}

.control-row--indicator {
	width: var(--main-amplifiation-indicator-size);
	margin-right: var(--main-space-small);
	position: relative;
}

.control-row--indicator .circle-1,
.control-row--indicator .circle-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--main-amplifiation-indicator-size);
	height: var(--main-amplifiation-indicator-size);
	transform: translate(-50%, -50%);
	border-radius: 100%;
}

.control-row--indicator .circle-1 {
	border: 1px solid --main-fg-color;
}

.control-row--indicator .circle-2 {
	background-color: --main-fg-color;
}

.slider-control {
	-webkit-appearance: none;
	width: 100%;
	margin: 0px;
	background: var(--main-bg-color);
	background-image: url('../img/ui/dither.svg');
	max-width: 70px;
	height: 16px;
	outline: none;
	border: 1px solid var(--main-fg-color);
	border-left: 0px;
	box-shadow: inset 1px 0px 0px var(--main-fg-color), inset -1px 0px 0px var(--main-fg-color);
	border-right: 0px;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

.slider-control::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	background: var(--main-bg-color);
	cursor: pointer;
	border-left: 1px solid var(--main-fg-color);
	border-right: 1px solid var(--main-fg-color);
	/*box-shadow: 2px 0px 0px rgba(0,0,0,1), -2px 0px 0px rgba(0,0,0,1);*/
	background-image: url('../img/ui/drag-handle.svg');
	background-repeat: no-repeat;
	background-position: center center;
}

.slider-control::-moz-range-thumb {
	width: 14px;
	height: 14px;
	background: var(--main-bg-color);
	cursor: pointer;
	border-left: 1px solid var(--main-fg-color);
	border-right: 1px solid var(--main-fg-color);
	/*box-shadow: 2px 0px 0px rgba(0,0,0,1), -2px 0px 0px rgba(0,0,0,1);*/
	background-image: url('../img/ui/drag-handle.svg');
	background-repeat: no-repeat;
	background-position: center center;
}

div[data-container="screen"] .seeking-head {
	z-index: 9000;
	position: absolute;
	width: 15px;
	height: 15px;
	opacity: 0;
	transform: translate(-50%, -50%);
}

div[data-container="screen"].seeking .seeking-head {
	opacity: 1;
	border: 1px dashed var(--main-fg-color);
}

div[data-container="screen"].playing .seeking-head {
	opacity: 1;
	border: 1px solid var(--main-fg-color);
}

div[data-container="display"] {
	position: relative;
}

button[data-action] {
	position: absolute;
	left: var(--main-space-small);
	bottom: var(--main-space-small);
	/*transform: translate(-50%, -50%);*/
	background-color: #000;
	color: #fff;
	border: 1px dotted #fff;
	padding: 6px 10px;
	font-family: 'Windows Command Prompt';
	font-size: 16px;
	text-transform: uppercase;
	cursor: pointer;
}

button[data-action]:hover {
	background-color: #fff;
	color: #000;
}