body,body * {
	color:#444;font-family:Arial,Helvetica,sans-serif;margin:0;padding:0;
}
button::-moz-focus-inner,input[type=submit]::-moz-focus-inner {
	border:0;padding:0;
}
input,button {
	font-size:inherit;
}

html {
	background:#eee;
}
body {
	background:white;box-sizing:border-box;max-width:1024px;margin:0 auto;min-height:100vh;min-width:600px;padding:2em;width:100%;
}

@media (max-width: 1024px) {
	body {
		padding: 1em;
	}
}

body > * + * {
	margin-top: 2em;
}

.canvas-wrapper {
	height:calc(50vh - 4em);width:100%;
}

.alert {
	background:red;color:white;font-weight:bolder;padding:.5em 0;text-align:center;
}

table {
	border-collapse:collapse;width:100%;
}

table.center {
	text-align:center;
}

table.top td {
	vertical-align: top;
}

table.left {
	text-align:left;
}

table.left tr:first-child th {
	padding:0 .5em;
}

th[colspan] {
	padding-right:.5em;text-align:right;
}

td {
	padding:.5em;white-space:nowrap;
}

td:last-of-type {
	padding-right:0;
}

fieldset {
	display: flex;
	border: 0;
	padding: 1em;
	justify-content: space-around;
	flex-wrap: wrap;
}

.input-group {
	align-items:center;display:flex;
}

/* reset width of inputs */
.input-group input {
	flex-grow:1;line-height:1.5;padding:0 .5em;width:1%;
}

.input-group > * + * {
	margin-left:.5em;
}

input:invalid {
	background:#f99;border:1px solid #f99;
}
input[readonly] {
	background:#eee;border:1px solid #eee;
}