esp.css

h1,
h6 {
	color: #07D
}

.checkmark:after,
.dotmark:after {
	content: ''
}

.button,
.menu {
	text-decoration: none
}

.div_l,
.menu {
	float: left
}

.closebtn,
.div_r {
	float: right;
	color: #fff
}

* {
	box-sizing: border-box;
	font-family: sans-serif;
	font-size: 12pt;
	margin: 0;
	padding: 0
}

h1 {
	font-size: 16pt;
	margin: 8px 0
}

h2,
h3 {
	font-size: 12pt
}

h2 {
	background-color: #444;
	color: #FFF;
	margin: 0 -4px;
	padding: 6px
}

h3 {
	background-color: #cacaca;
	color: #444;
	margin: -4px;
	padding: 6px;
}

h6 {
	font-size: 10pt
}

code,
kbd,
pre,
samp,
tt,
xmp {
	font-family: monospace, monospace;
	font-size: 1em
}

.button {
	background-color: #07D;
	border: none;
	border-radius: 5px;
	color: #FFF;
	margin: 4px;
	padding: 4px 16px
}

.button.help,
.checkmark,
input,
select,
textarea {
	border-color: gray;
	border-style: solid;
	border-width: 1px
}

.button.link.wide {
	display: inline-block;
	text-align: center;
	width: 100%
}

.button.link.red {
	background-color: red
}

.button.help {
	border-radius: 50%;
	padding: 2px 4px
}

.checkmark,
input,
select,
textarea {
	border-radius: 5px
}

.button:hover {
	background: #369
}

input,
select,
textarea {
	background-color: #eee;
	margin: 4px;
	padding: 4px 8px
}

input.wide,
select.wide {
	max-width: 350px;
	width: 95%
}

.widenumber {
	max-width: 500px;
	width: 100px
}

.container,
.container2 {
	font-size: 12pt;
	padding-left: 35px;
	cursor: pointer
}

.container {
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	display: block;
	margin-left: 4px;
	margin-top: 0;
	position: relative;
	user-select: none;
	height: 30px;
}

.container input {
	cursor: pointer;
	opacity: 0;
	position: absolute
}

.checkmark.disabled {
	background-color: grey
}

.checkmark {
	background-color: #eee;
	height: 25px;
	left: 0;
	position: absolute;
	top: 0;
	width: 25px
}

.container input:checked~.checkmark {
	background-color: #07D
}

.checkmark:after {
	display: none;
	position: absolute
}

.container input:checked~.checkmark:after,
.container2 {
	display: block
}

.container .checkmark:after {
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	border: solid #fff;
	border-width: 0 3px 3px 0;
	height: 10px;
	left: 7px;
	top: 3px;
	transform: rotate(45deg);
	width: 5px
}

#toastmessage,
.dotmark,
.logviewer {
	border-color: gray;
	border-style: solid
}

#toastmessage,
.dotmark {
	border-width: 1px
}

.container2 {
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	margin-bottom: 20px;
	margin-left: 9px;
	position: relative;
	user-select: none
}

.container2 input {
	cursor: pointer;
	opacity: 0;
	position: absolute
}

.dotmark {
	background-color: #eee;
	border-radius: 50%;
	height: 26px;
	left: 0;
	position: absolute;
	top: 0;
	width: 26px
}

.container2 input:checked~.dotmark {
	background-color: #07D
}

.dotmark:after {
	display: none;
	position: absolute
}

.container2 input:checked~.dotmark:after {
	display: block
}

.container2 .dotmark:after {
	background: #fff;
	border-radius: 50%;
	height: 8px;
	left: 8px;
	top: 8px;
	width: 8px
}

.logviewer,
textarea {
	font-family: 'Lucida Console', Monaco, monospace;
	width: 90vw;
	height: 60vh;
}

#toastmessage {
	background-color: #07D;
	border-radius: 5px;
	bottom: 30%;
	color: #fff;
	font-size: 17px;
	left: 282px;
	margin-left: -125px;
	min-width: 250px;
	padding: 16px;
	position: fixed;
	text-align: center;
	visibility: hidden;
	z-index: 1
}

#toastmessage.show {
	-webkit-animation: fadein .5s, fadeout .5s 2.5s;
	animation: fadein .5s, fadeout .5s 2.5s;
	visibility: visible
}

@-webkit-keyframes fadein {
	from {
		bottom: 20%;
		opacity: 0
	}

	to {
		bottom: 30%;
		opacity: .9
	}
}

@keyframes fadein {
	from {
		bottom: 20%;
		opacity: 0
	}

	to {
		bottom: 30%;
		opacity: .9
	}
}

@-webkit-keyframes fadeout {
	from {
		bottom: 30%;
		opacity: .9
	}

	to {
		bottom: 0;
		opacity: 0
	}
}

@keyframes fadeout {
	from {
		bottom: 30%;
		opacity: .9
	}

	to {
		bottom: 0;
		opacity: 0
	}
}

.level_0 {
	color: #F1F1F1
}

.level_1 {
	color: #FCFF95
}

.level_2 {
	color: #9DCEFE
}

.level_3 {
	color: #A4FC79
}

.level_4 {
	color: #F2AB39
}

.level_9 {
	color: #F50
}

.logviewer {
	background-color: #272727;
	color: #F1F1F1;
	overflow: auto
}

tbody {
	background-color: #f8f8f8;
	border-radius: 10px;
	display: inline-block;
	border: #444444 0.1px solid;
	overflow: auto;
}

table.multirow th,
table.normal th {
	background-color: #444;
	border-width: 0.1px;
	border-color: #c0c0c0;
	color: #FFF;
	font-weight: 700;
	padding: 6px;
	align-content: center;
	width: 100vw;
	text-align: center
}

table.normal th:nth-child(1) {
    max-width: 250px;
}

tr td {
	border-width: 0.1px;
}

table.multirow,
table.normal {
	border-collapse: separate;
	border-spacing: 0px;
	border-style: none;
	min-width: 420px;
	padding-bottom: 5px;
}

table.multirow tr,
table.normal td,
table.normal tr {
	padding: 4px;
}

table.normal td {
	height: 30px;
}

table.multirow td {
	height: 30px;
	padding: 4px;
	text-align: center;
	border-color: #c0c0c0;
}

table.multirow tr:nth-child(odd) {
	background-color: #e8e8e8;
}

.highlight td {
	background-color: #dd6600;
}

.apheader,
.headermenu {
	background-color: #F8F8F8;
	padding: 8px 12px;
	width: 100vw;
}

.note {
	color: #444;
	font-style: italic
}

.headermenu {
	border-bottom: 0.1px solid #444444;
	height: 100px;
	position: fixed;
	top: 0;
	z-index: 1;
}

.bodymenu {
	padding-top: 100px;
	background-color: white;
	height: 100vh;
}

.menubar {
	position: inherit;
	top: 54px;
	width: 100%;
}

a.menu {
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu {
	border: solid transparent 1px;
	border-radius: 5px 5px 0 0;
	color: #444;
	padding: 10px 10px 8px 10px;
	white-space: nowrap
}

.menu.active {
	background-color: #FFF;
	border-color: #444444 #444444 #fff;
	color: #000;
	border-width: 0.1px;
}

.menu:hover {
	background: #bdbdbd;
	color: #000
}

.menu_button {
	display: none
}

.on {
	color: #029B34
}

.off {
	color: red
}

.div_r {
	background-color: #029B34;
	border-radius: 4px;
	margin: 2px;
	padding: 1px 10px
}

.alert,
.warning {
	margin-bottom: 15px;
	padding: 20px;
	color: #fff
}

.div_br {
	clear: both
}

.alert {
	background-color: #f44336
}

.warning {
	background-color: #ffca17
}

.closebtn {
	cursor: pointer;
	font-size: 22px;
	line-height: 20px;
	margin-left: 15px;
	transition: .3s
}

.closebtn:hover {
	color: #000
}

section {
	overflow-x: auto;
	padding: 10px 5px 10px 5px;
}

footer {
	word-break: break-word;
	padding: 0px 5px;
}

@media screen and (max-width: 750px) {
	.showmenulabel {
		display: none;
	}

	a.menu {
		width: 12%
	}
}

@media screen and (max-width: 450px) {
	table.normal {
		min-width: 300px;
	}

	input.wide:focus {
		position: absolute;
		left: 4px;
		z-index: 1;
	}

	.container {
		display: inline;
		user-select: none
	}
}

@media (prefers-color-scheme: dark) {

	h1,
	h6 {
		color: #dfdfdf
	}

	.closebtn,
	.div_r {
		color: #dfdfdf
	}

	* {
		color: #b3b3b3
	}

	h2 {
		background-color: #444;
		color: #FFF
	}

	h3 {
		background-color: #1e1e1e;
		color: #dfdfdf
	}

	.button {
		background-color: #44607a;
		color: #FFF
	}

	.button.help,
	.checkmark,
	input,
	select,
	textarea {
		border-color: gray
	}

	.button.link.red {
		background-color: red
	}

	.button:hover {
		background: #369
	}

	input,
	select,
	textarea {
		background-color: #444
	}

	input.wide,
	select.wide {
		color: #dfdfdf
	}

	.checkmark.disabled {
		background-color: grey
	}

	.checkmark {
		background-color: #4444
	}

	.container input:checked~.checkmark {
		background-color: #44607a
	}

	#toastmessage,
	.dotmark,
	.logviewer {
		border-color: #00000018
	}

	.dotmark {
		background-color: #eee
	}

	.container2 input:checked~.dotmark {
		background-color: #07D
	}

	.container2 .dotmark:after {
		background: #fff
	}

	.logviewer,
	textarea {
		color: #dfdfdf;
		background-color: #222
	}

	#toastmessage {
		background-color: #00000085;
		color: #fff
	}

	.level_0 {
		color: #F1F1F1
	}

	.level_1 {
		color: #FCFF95
	}

	.level_2 {
		color: #9DCEFE
	}

	.level_3 {
		color: #A4FC79
	}

	.level_4 {
		color: #F2AB39
	}

	.level_9 {
		color: #F50
	}

	.logviewer {
		background-color: #272727;
		color: #F1F1F1
	}

	tbody {
		background-color: #222222;
	}

	table.multirow th,
	table.normal th {
		background-color: #444;
		border-color: #545454;
		color: #dfdfdf
	}

	table.multirow td {
		border-color: #545454;
	}

	table.multirow tr,
	table.normal td,
	table.normal tr {
		background-color: #222
	}

	table.multirow tr:nth-child(odd) {
		background-color: #2a2c2e
	}

	.highlight td {
		background-color: #553044
	}

	.apheader,
	.headermenu {
		background-color: #222
	}

	.note {
		color: #7b7b7b;
	}

	.headermenu {
		border-bottom: 1px solid #222;
		background-color: #44607a
	}

	.bodymenu {
		background-color: #222
	}

	.menu {
		color: #fff;
		background-color: transparent
	}

	.menu.active {
		background-color: #222;
		border-color: transparent;
		color: #fff
	}

	.menu:hover {
		color: #fff;
		background: #00000030;
	}

	.on {
		color: green
	}

	.off {
		color: red
	}

	.div_r {
		background-color: #30553d
	}

	.alert,
	.warning {
		color: #fff
	}

	.alert {
		background-color: #f44336
	}

	.warning {
		background-color: #ffca17
	}

	.closebtn:hover {
		color: #000
	}

}