#config {
	background: #300;
	display: none;
	font-size: 65%;
	overflow: auto;
	width: calc(100% - 4px);
}

#config h1 {
	color: #fc0;
	font-size: 120%;
	margin: 0.5em;
	min-height: 1px;
	text-align: center;
}

#config > p {margin: 0.5em;}

#config button {
	background: #eee linear-gradient(#aaa, #eee, #aaa);
	border: 1px solid #bbb;
	border-radius: 0.25em;
	cursor: pointer;
	font-size: 100%;
	white-space: nowrap;
}
#config:not(.page_menu) button {
	display: inline-block;
	margin: 0 10%;
	padding: 0.25em 1em;
}
#config p.buttons {
	margin: 1em 0;
	text-align: center;
}

#config td:last-child img {cursor: pointer;}


tr:nth-child(odd) td {background-color: #422;}

#config select,
#config input[type=text],
#config input[type=tel] {
	background: #fff;
	border: 1px solid #999;
	border-radius: 0.25em;
	padding: 0.25em;
	vertical-align: middle;
}
#config select {height: 1.85em;}

#config img.svg {
	filter: invert(1);
	width: 1.15em;
}
#config label img.svg {
	margin: 0 0.25em;
	vertical-align: middle;
}


#config img.pwr {
	filter: invert(0.5) sepia(1) saturate(60);
	padding: 0.5em;
	width: 1.5em;
}
#config input[type=checkbox]:checked + label img.pwr {
	filter: invert(0.6) sepia(1) saturate(3) hue-rotate(60deg);
}


/********************/

.page_config > div,
.page_prog > div {
	border-spacing: 2px;
	display: table;
	margin: 0 auto;
	width: 96%;
}

.page_prog label,
.page_config label {
	background: #444;
	border: 1px outset #ccc;
	border-radius: 6px;
	cursor: pointer;
	display: table-cell;
	min-width: 15%;
	padding: 0.25em;
	text-align: center;
	vertical-align: middle;
}

.page_config label > div,
.page_prog label > div {
	display: none;
	position: absolute;
	top: 6em;
	left: 0;
	width: 100%;
}
.page_config > div > input[type=radio]:checked + label,
.page_prog > div > input[type=radio]:checked + label {
	background: #888;
	border-style: inset;
}
.page_config > div > input[type=radio]:checked + label >div {display:block;}