* {
 font-family: sans-serif;
 font-size: 12pt;
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
}
h1 {
 font-size: 16pt;
 color: #C80A41;
 margin: 8px 0;
 font-weight: bold;
}
h2 {
 font-size: 12pt;
 margin: 0 -4px;
 padding: 6px;
 background-color: #444;
 color: #FFF;
 font-weight: bold;
}
h3 {
 font-size: 12pt;
 margin: 16px -4px 0 -4px;
 padding: 4px;
 background-color: #EEE;
 color: #444;
 font-weight: bold;
}
h6 {
 font-size: 10pt;
 color: #C80A41;
}
.button {
 margin: 4px;
 padding: 4px 16px;
 background-color: #C80A41;
 color: #FFF;
 text-decoration: none;
 border-radius: 4px;
 border: none;
}
.button.link {
}
.button.link.wide {
 display: inline-block;
 width: 99%;
 text-align: center;
}
.button.link.red {
 background-color: black;
 color:yellow;
}
.button.help {
 padding: 2px 4px;
 border-style: solid;
 border-width: 1px;
 border-color: gray;
 border-radius: 50%;
}
.button:hover {
 background: #369;
}
input, select, textarea {
 margin: 4px;
 padding: 4px 8px;
 border-radius: 4px;
 background-color: #eee;
 border-style: solid;
 border-width: 1px;
 border-color: gray;
}
input:hover {
 background-color: #ccc;
}
input.wide {
 max-width: 500px;
 width:80%;
}
input.widenumber {
 max-width: 500px;
 width:100px;
}
#selectwidth {
 max-width: 500px;
 width:80%;
 padding: 4px 8px;
}
select:hover {
 background-color: #ccc;
}
.container {
 display: block;
 padding-left: 35px;
 margin-left: 4px;
 margin-top: 0px;
 position: relative;
 cursor: pointer;
 font-size: 12pt;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
}
.checkmark {
 position: absolute;
 top: 0;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: #eee;
 border-style: solid;
 border-width: 1px;
 border-color: gray;
 border-radius: 4px;
}
.container:hover input ~ .checkmark {
 background-color: #ccc;
}
.container input:checked ~ .checkmark {
 background-color: #C80A41;
}
.checkmark:after {
 content: '';
 position: absolute;
 display: none;
}
.container input:checked ~ .checkmark:after {
 display: block;
}
.container .checkmark:after {
 left: 7px;
 top: 3px;
 width: 5px;
 height: 10px;
 border: solid white;
 border-width: 0 3px 3px 0;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
.container2 {
 display: block;
 padding-left: 35px;
 margin-left: 9px;
 margin-bottom: 20px;
 position: relative;
 cursor: pointer;
 font-size: 12pt;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
.container2 input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
}
.dotmark {
 position: absolute;
 top: 0;
 left: 0;
 height: 26px;
 width: 26px;
 background-color: #eee;
 border-style: solid;
 border-width: 1px;
 border-color: gray;
 border-radius: 50%;
}
.container2:hover input ~ .dotmark {
 background-color: #ccc;
}
.container2 input:checked ~ .dotmark {
 background-color: #C80A41;
}
.dotmark:after {
 content: '';
 position: absolute;
 display: none;
}
.container2 input:checked ~ .dotmark:after {
 display: block;
}
.container2 .dotmark:after {
 top: 8px;
 left: 8px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: white;
}
#toastmessage {
 visibility: hidden;
 min-width: 250px;
 margin-left: -125px;
 background-color: #C80A41;
 color: #fff;
 text-align: center;
 border-radius: 4px;
 padding: 16px;
 position: fixed;
 z-index: 1;
 left: 282px;
 bottom: 30%;
 font-size: 17px;
 border-style: solid;
 border-width: 1px;
 border-color: gray;
}
#toastmessage.show {
 visibility: visible;
 -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
 animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
 from {
  bottom: 20%;
  opacity: 0;
 }
 to {
  bottom: 30%;
  opacity: 0.9;
 }
}
@keyframes fadein {
 from {
  bottom: 20%;
  opacity: 0;
 }
 to {
  bottom: 30%;
  opacity: 0.9;
 }
}
@-webkit-keyframes fadeout {
 from {
  bottom: 30%;
  opacity: 0.9;
 }
 to {
  bottom: 0;
  opacity: 0;
 }
}
@keyframes fadeout {
 from {
  bottom: 30%;
  opacity: 0.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: #FF5500;
}
.logviewer {
 color: #F1F1F1;
 background-color: #272727;
 font-family: 'Lucida Console', Monaco, monospace;
 height:  400px;
 max-width: 1000px;
 width: 80%;
 padding: 4px 8px;
 overflow: auto;
 border-style: solid;
 border-color: gray;
}
textarea {
 max-width: 1000px;
 width:80%;
 padding: 4px 8px;
}
textarea:hover {
 background-color: #ccc;
}
table.normal th {
 padding: 6px;
 background-color: #444;
 color: #FFF;
 border-color: #888;
 font-weight: bold;
}
table.normal td {
 padding: 4px;
 height: 30px;
}
table.normal tr {
 padding: 4px;
}
table.normal {
 color: #000;
 width: 100%;
 min-width: 420px;
 border-collapse: collapse;
}
table.multirow th {
 padding: 6px;
 background-color: #444;
 color: #FFF;
 border-color: #888;
 font-weight: bold;
}
table.multirow td {
 padding: 4px;
 text-align: center;
 height: 30px;
}
table.multirow tr {
 padding: 4px;
}
table.multirow tr:nth-child(even) {
 background-color: #DEE6FF;
}
table.multirow {
 color: #000;
 width: 100%;
 min-width: 420px;
 border-collapse: collapse;
}
.note {
 color: #444;
 font-style: italic;
}
.headermenu {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: 90px;
 padding: 8px 12px;
 background-color: #F8F8F8;
 border-bottom: 1px solid #DDD;
 z-index: 1;
}
.apheader {
 padding: 8px 12px;
 background-color: #F8F8F8;
}
.bodymenu {
 margin-top: 96px;
}
.menubar {
 position: inherit;
 top: 55px;
}
.menu {
 float: left;
 padding: 4px 16px 8px 16px;
 color: #444;
 white-space: nowrap;
 border: solid transparent;
 border-width: 4px 1px 1px;
 border-radius: 4px 4px 0 0;
 text-decoration: none;
}
.menu.active {
 color: #000;
 background-color: #FFF;
 border-color: #C80A41 #DDD #FFF;
}
.menu:hover {
 color: #000;
 background: #DEF;
}
.menu_button {
 display: none;
}
.on {
 color: green;
}
.off {
 color: red;
}
.div_l {
 float: left;
}
.div_r {
 float: right;
 margin: 2px;
 padding: 1px 10px;
 border-radius: 4px;
 background-color: #080;
 color: white;
}
.div_br {
 clear: both;
}
.alert {
 padding: 20px;
 background-color: #f44336;
 color: white;
 margin-bottom: 15px;
}
.closebtn {
 margin-left: 15px;
 color: white;
 font-weight: bold;
 float: right;
 font-size: 22px;
 line-height: 20px;
 cursor: pointer;
 transition: 0.3s;
}
.closebtn:hover {
 color: black;
}
section {
 overflow-x: auto;
 width: 100%;
}
@media screen and (max-width: 960px) {
 header:hover .menubar {
  display: block;
 }
 .menu_button {
  display: block;
  text-align: center;
 }
 .bodymenu {
  margin-top: 0px;
 }
 .menubar {
  display: none;
  top: 0px;
  position: relative;
  float: left;
  width: 100%;
 }
 .headermenu {
  position: relative;
  height: auto;
  float: left;
  width: 100%;
  padding: 5px;
  z-index: 1;
 }
 .headermenu h1 {
  padding: 8px 12px;
 }
 .headermenu  a {
  text-align: center;
  width: 100%;
  padding:7px 10px;
  height: auto;
  border: 0px;
  border-radius:0px;
 }
 ;
}