body {
	margin-left: 0;
	margin-right: 0;
	margin-top: 4px;
}
table {
	padding-left: 4px;
	border-collapse: collapse;
	transform: rotateX(0deg);
}
#headersContainer {
	overflow: hidden;
}
#scrollArea {
	max-height: calc(100vh - 17ex);
	overflow: auto;
}
th, td {
	min-width: calc(2em + 32px);
	text-align: center;
	padding: 0;
}
td {
	border: 1px black solid;
	height: 30px;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
}
td input, td span {
	border: none;
	margin: 0;
	padding: 0;
	height: 30px;
	text-align: center;
}
td input[type=text] {
	width: 30em;
}
td input[type=number] {
	max-width: 72px;
}
td input[type=checkbox] {
	height: 20px;
	margin-top: 5px;
}
.ds {
	position: absolute;
	left: 0;
	padding-left: 1.4px;
}
td span {
	display: inline-block;
	vertical-align: bottom;
	padding-top: .7ex;
	margin-bottom: -.7ex;
}
:disabled, input:disabled~span, .save, .clear, .refresh, .add, .arrow {
	background-color: #E0E0E0;
	color: #555;
}
.save, .mark, .delete, .refresh, .clear, .add, .arrow, .description {
	cursor: pointer;
	height: 30px;
}
.save i, .clear i, .refresh i, .add i {
	color: #F5F5F5;
}
.description {
	background-color: #FFCA28;
}
.description:hover {
	background-color: #FFD54F;
}
.description:active {
	background-color: #FFB300;
}
.description.set {
	background-color: #FFEE58;
}
.description.set:hover {
	background-color: #FFF176;
}
.description.set:active {
	background-color: #FDD835;
}
.description.disabled {
	background-color: hsl(45, 75%, 58%);
}
.description.disabled:hover {
	background-color: hsl(46, 75%, 65%);
}
.description.disabled:active {
	background-color: hsl(42, 75%, 50%);
}
.description.set.disabled {
	background-color: hsl(54, 75%, 67%);
}
.description.set.disabled:hover {
	background-color: hsl(54, 75%, 73%);
}
.description.set.disabled:active {
	background-color: hsl(49, 73%, 60%);
}
dialog label {
	display: block;
	font-weight: bold;
	text-align: left;
}
.save.enabled {
	background-color: #4CAF50;
}
.save.enabled:hover {
	background-color: #66bb6a;
}
.save.enabled:active {
	background-color: #388e3c;
}
.mark {
	background-color: #2196F3;
}
.mark:hover {
	background-color: #42a5f5;
}
.mark:active {
	background-color: #1976d2;
}
.mark.done {
	background-color: #FF9800;
}
.mark.done:hover {
	background-color: #FFA726;
}
.mark.done:active {
	background-color: #F57C00;
}
.delete, .clear.enabled {
	background-color: #F44336;
}
.delete:hover, .clear.enabled:hover {
	background-color: #ef5350;
}
.delete:active, .clear.enabled:active {
	background-color: #D32F2F;
}
.add.enabled {
	background-color: #9CCC65
}
.add.enabled:hover {
	background-color: #AED581
}
.add.enabled:active {
	background-color: #7CB342
}
.refresh.enabled, .arrow.enabled {
	background-color: #29B6F6;
}
.refresh.enabled:hover, .arrow.enabled:hover {
	background-color: #4FC3F7;
}
.refresh.enabled:active, .arrow.enabled:active {
	background-color: #039BE5;
}
.material-icons {
	color: white !important;
	padding-top: 2px;
}
footer {
	padding: 1ex;
}
#controls {
	display: inline-flex;
	align-items: center;
}
#controls>* {
	margin: 2px;
}
footer .add, footer .refresh, footer .save, footer .clear, .arrow {
	border: 1px black solid;
	display: inline-block;
	height: 4ex;
	width: 4ex;
	text-align: center;
}
div.vr {
	background-color: gray;
	display: inline-block;
	margin-left: 6px !important;
	margin-right: 6px !important;
	height: 5ex;
	width: 1px;
}
input:invalid {
	background-color: #ef9a9a;
}
footer>a:last-child {
	float: right;
	margin-top: 2ex;
	margin-right: 2ex;
}