* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-decoration: none;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
	-moz-osx-font-smoothing: grayscale;
	line-height: inherit;
	outline: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
	background: #000;
	overflow-y: hidden;
	overflow-x: auto;
	color: #fff;
}

#logo {
	position: absolute;
	left: 25px;
	top: 25px;
	width: 50px;
	display: block;
	z-index: 999;
}

canvas, video {
	image-rendering: pixelated;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.5em;

	h2 {
		font-size: 100%;
		margin-bottom: 0.5em;
	}

	table th,
	table td {
		font-size: 13px;
	}

	label,
	input[type=range],
	select,
	button {
		display: block;
		width: 100%;
		margin: 1.5em 0;
		cursor: pointer;
	}
	input[type=radio] {
		display: inline-block;
		margin-right: 6px;
		margin-bottom: 3px;
		vertical-align: middle;
	}

	button {
		all: unset;
		cursor: pointer;
		text-decoration: underline;
		color: #888;
		line-height: 1.5em;
		&:hover {
			color: #fff;
		}
	}

	h4 {
		margin-bottom: 0.5em;
	}

	#drivers {
		position: fixed;
		left: 0;
		top: 0;
		padding: 30px;
		width: 220px;
		z-index: 999;
	}

	#driver-info {
		border-collapse: collapse;
	}
	#driver-info th {
		text-align: left;
	}
	#driver-info th,
	#driver-info td {
		padding: 0 1em 0 0;
	}


	#sound {
		position: fixed;
		left: 200px;
		top: 0;
		padding: 30px;
		width: 250px;
		z-index: 999;
		display: none;
	}
	#sound .title {
		display: inline-block;
		width: 30px;
		text-transform: uppercase;
		font-size: 10px;
		letter-spacing: 0.5px;
	}
	#sound .soundLevel {
		height: 3px;
		background: #666;
		position: relative;
		display: inline-block;
		width: 100px;
		vertical-align: middle;
	}
	#sound .soundLevel .value {
		height: 100%;
		width: 0;
		background: #fff;
	}
	#sound .soundLevel .min,
	#sound .soundLevel .max {
		position: absolute;
		height: 7px;
		top: -2px;
		width: 1px;
		background: #fff;
	}


	#midi {
		position: fixed;
		left: 30px;
		bottom: 30px;
		padding: 0;
		z-index: 999;
		// display: none;
	}
	#midi .list {
		margin-bottom: 10px;
	}
	#midi .list span {
		display: inline-block;
		border: 1px solid #fff;
		margin: 0 5px 5px 0;
		padding: 2px 5px 1px;
		border-radius: 5px;
	}
	#midi .list.notes span {
		opacity: 0.5;
	}

	#midi .list.notes .channel {
		display: inline-block;
		font-weight: bold;
		margin: 0 5px 5px 0;
		padding: 2px 5px 1px;
		background: #555;
		border: 1px solid #555;
		border-radius: 5px;
	}
	
	.status {
		color: #999;
	}
	.status p {
		word-break: break-all;
	}
	.status[status=success] {
		color: #20ff87;
	}
	.status[status=error] {
		color: red;	
	}

}

#fps {
	position: fixed;
	right: 30px;
	top: 30px;
	font-family: monospace;
	z-index: 999;
	/*display: none;*/
	span {
		white-space: pre;	
	}
}

#info {
	position: absolute;
	left: 30px;
	bottom: 30px;
	display: flex;
	gap: 20px;
	.areas {
		width: 40px;
		font-size: 0;
		line-height: 1em;
		background: #000;
		span {
			display: inline-block;
			width: 20px;
			height: 20px;
			background: #fff;
		}
	}
}


#settings {
	position: absolute;
	left: 30px;
	bottom: 200px;
	width: 170px;
	z-index: 9;
	input {
		max-width: 100%;
	}
}

#preview {
	position: absolute;
	z-index: 1;
	height: 100%;
	left: 0;
	top: 0;

	canvas {
		display: block;
		// width: 100% !important;
		// height: auto !important;
		width: auto !important;
		height: 100% !important;

		cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;

    &:active {
	    cursor: grabbing;
	    cursor: -moz-grabbing;
	    cursor: -webkit-grabbing;
	  }

	}
}

#screen {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 9;
	canvas {
		display: block;
	}
}

#source {
	position: absolute;
	right: 30px;
	top: 60px;
	z-index: 9;
	video {
		display: inline-block;
		margin-bottom: 20px;
	}
}


input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  border-radius: 2px;
	display: inline-block;
	vertical-align: middle;
	margin: -2px 10px 0 0;
	background: rgba(255,255,255, 0.6);
	transition: background 0.1s ease;
	&:hover {
		background: rgba(255,255,255, 0.8);
	}
  &::-webkit-slider-thumb {
	  background: #fff;
	  -webkit-appearance: none;
	  appearance: none;
	  width: 8px;
	  height: 8px;
	  border-radius: 50%;
	  cursor: pointer;
	}
	&::-moz-range-thumb {
	  background: #fff;
	  width: 8px;
	  height: 8px;
	  border-radius: 50%;
	  background: #fff;
	  cursor: pointer;
	}
}

nav, #fps {
	display: none;
}