*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	color: #ccc;
}

p{
	margin: 0.5em 0;
}

button, input, label.toggle{
	display: inline-block;
	cursor: pointer;
	
	margin: 0 0.1em;
	padding: 0.5em 0.5em 0.1em;
	
	background: #303030;
	border: 0.2em solid #383838;
	border-radius: 0.5em;
	
	font-size: 80%;
	
	transition: 0.15s background;
}
input{
	padding-top: 0.65em;
	border-top-width: 0;
	border-right-width: 0;
	border-left-width: 0;
	border-radius: 0;
	border-top-right-radius: 1em;
}
input[type=number]{
	width: 6em;
}
input[type=checkbox]{
	margin-right: 0.5em;
}
input[type=color]{
	border: 0 none;
	background: none;
	border-radius: 0;
	padding: 0;
}

button{
	padding-top: 0.25em;
}
button:hover:not(:disabled), input:hover:not(:disabled), label.toggle:hover:not(:disabled){
	background: #282828;
}
button:disabled, input:disabled, label.toggle:disabled{
	cursor: default;
	color: #aaa;
	opacity: 0.5;
}

hr{
	margin: 1em;
	
	border: 0.1em solid #333;
}

table{}
table th{
	min-width: 2em;
	background: #181818;
	padding: 0.5em;
}
table td{
	padding: 0.25em;
	
	background: #181818;
	
	text-align: center;
	
	transition: background-color 0.5s;
}

::-webkit-scrollbar{
	width: 0.5em;
	height: 0.5em;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{
  background: #101010;
}
::-webkit-scrollbar-thumb{
  background: #555;
}
::-webkit-scrollbar-thumb:hover{
  background: #888;
}

.copy-highlight td{
	background-color: #1d3c4f;
}
.selected td{
	border: 0.1em solid #168fdc;
	background-color: #1d3c4f;
}

html, body{
	width: 100%;
	height: 100%;
	
	background: #181818;
	font-family: arial;
}
#container{
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	
	width: 100%;
	height: 100%;
}
#container>header, #container>aside{
	flex: none;
	width: 24em;
	height: 100%;
	
	padding: 0.5em;
	
	background: #202020;
	
	text-align: center;
	overflow-y: scroll;
}
#container>header>h2{
	margin: 0.5em;
	font-size: 1.25em;
}
#container>header>table, #container>aside>table{
	margin: 0.5em auto 0;
}
#container>aside{
	width: 18em;
}

#canvas-parent{
	flex: 1 1;
	text-align: center;
	overflow: scroll;
}
#canvas-parent>canvas{
	cursor: crosshair;
}

#series-table td input{
	width: 10em;
}
#series-table td input[type=number]{
	width: 3em;
}
#series-table td input[type=color]{
	width: 3em;
}