a:link {
  text-decoration: none;
  color: var(--text-color);
}

a:visited {
  text-decoration: none;
  color: var(--text-color);
}

a:hover {
  text-decoration: none;
  color: var(--text-color);
}

a:active {
  text-decoration: none;
  color: var(--text-color);
}

/* menu classes -------------------------------------------------- */
.x2mlist {
  position: fixed;
  left: 0;
  top: var(--hdr-height);
  bottom: var(--hdr-height);
  width: var(--sidemenu-width);
  max-width: var(--sidemenu-width);
  min-width: var(--sidemenu-width);
  z-index: var(--menu-z);
  display: var(--sidemenu-display);
  flex-direction: column;
  flex-wrap: nowrap;
  background: var(--menu-color) var(--menu-bgimg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: var(--menu-border);
  color: var(--text-color);
}

.x2mmenu, .x2smenu {
  position: fixed;
  top: var(--hdr-height);
  width: 60vw;
  max-width: 90vw;
  min-width: 10em;
  z-index: var(--menu-z);
  display: flex; 
  flex-direction: column;
  flex-wrap: nowrap;
  background: var(--menu-color) var(--menu-bgimg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: var(--menu-border);
  color: var(--text-color);
}

.x2mmenu {
  left: calc(var(--hdr-icon-size) * 2);
}

.x2smenu {
  right: var(--hdr-icon-size);
}

@media only screen and (orientation: landscape) {
.x2mmenu, .x2smenu {
  width: 40vw;
  max-width: 90vw;
  min-width: 7em;
  max-height: 80vh;
  display: flex; 
  flex-direction: column;
  flex-wrap: wrap;
}
}

.x2mctrl {
  width: calc(100% - 2px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background: var(--mctrl-background); 
  border: var(--mctrl-border);
  border-radius: var(--mctrl-radius);
  font-family: var(--mctrl-font);
  font-size: var(--mctrl-font-size);
  position: relative;
  top: 0;
  left: 0;
  margin: var(--mctrl-gap);
}

.menubtn {
  height: var(--hdr-icon-size);
  width: var(--hdr-icon-size);
  display: var(--menubtn-display);
  white-space: nowrap;
  vertical-align: middle;
}

.x2body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: var(--page-bg);
  background-size: auto 100vh;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  inset: 0;
  padding: 0;
  margin: 0;
  color: var(--text-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--ctrl-font-size);
  height: 100%;
  min-height: 100vh;
}

.x2mainpage {
  height: 100%
  min-height: calc(-2 * var(--hdr-height) + 100vh);
  width: 100%
  insets: 0;
  padding: 0;
  margin: 0 0 0 var(--sidemenu-width);
}

.x2llist {
  display: flex; 
  flex-flow: column nowrap;
  width: 90%;
  min-width: 90%;
  max-width: 90%;
  height: auto; 
  margin: auto;
  text-align: center; 
  vertical-align: middle;
  font-family: var(--ctrl-font);
  font-size: var(--ctrl-font-size);
}

.x2lspc {
  height: 1.0vmin;
  min-height: 1.0vmin;
  max-height: 1.0vmin;
}

.x2lctrl {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  background: var(--ctrl-background); 
  border: var(--ctrl-border);
  border-radius: var(--ctrl-radius);
  font-family: var(--ctrl-font);
  font-size: var(--ctrl-font-size);
  position: relative;
  top: 0;
  left: 0;
}

.x2lclbl {
  width:100%;
  margin: var(--text-margin);
  height: var(--ctrl-icon-size); 
  line-height: var(--ctrl-icon-size);
  text-align: left;
  vertical-align: middle; 
  white-space: normal;
  float: left;
  color: var(--ctrl-label-color);
  white-space: nowrap;
  overflow: hidden;
}

/* Widget classes ------------------------------------------------ */
:root {
  --wctrl-wlw: 100%;
  --wctrl-w1: calc(-1 * var(--wctrl-gap) + 25%);
  --wctrl-w2: calc(-1 * var(--wctrl-gap) + 50%);
  --wctrl-w4: 100%;
  --wctrl-wh1: calc((-4 * var(--wctrl-gap) + 86vmin) / 3);
}

.x2wlist {
  margin: 0;
  border: 0;
  padding: 0;
  display: flex; 
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: var(--wctrl-gap);
  width: auto;
  height: auto; 
  margin: var(--wctrl-gap);
  text-align: center; 
  vertical-align: middle;
  font-family: var(--ctrl-font);
  font-size: var(--ctrl-font-size);
}

.x2wln {
  display: flex; 
  flex-flow: row nowrap;
  justify-content: left;
  width: auto;
  height: auto; 
  margin: 0;
}

.x2wcntnr {
  width: 100%;
  object-fit: contain;
  /*height: calc(100% - var(--wctrl-label-height));*/
  max-height: 100%;

  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  flex: 1 0 auto;
}

.x2wctrl1, .x2wctrl2, .x2wctrl4 {
  font-family: var(--wctrl-font);
  font-size: var(--wctrl-font-size);
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;

  width: auto;
  min-width: var(--wctrl-w1);
  height: auto;
  min-height: var(--wctrl-wh1);

  border: 0;
  margin: 0;
  padding: 0;
  flex: 1 0 var(--wctrl-w1);

  background: var(--wctrl-background); 
}

.x2wctrl2 {
  min-width: var(--wctrl-w2);
  flex: 2 0 var(--wctrl-w2);
}

.x2wctrl4 {
  min-width: var(--wctrl-w4);
  flex: 4 0 var(--wctrl-w4);
}

@media only screen and (orientation: portrait) {
.x2wctrl1 {
  min-width: var(--wctrl-w2);
  flex: 2 0 var(--wctrl-w2);
}

.x2wctrl2, .c2wctrl4 {
  min-width: var(--wctrl-w4);
  flex: 4 0 var(--wctrl-w4);
}
}

/* widget margin box */
.x2wmarg {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;

  margin: 1vmin;
  border: 0;
  padding: 0;
  height: calc(100% - 2vmin);
  /* overflow: hidden; */
  /* background: #335577; */
}

/* widget type icon */
.x2wticon {
  margin: 0;
  margin-bottom: 1vmin;
  border: 0;
  padding: 0;
  width: auto;
  height: 6vmin;
}

/* widget container table */
.x2whtbl {
  flex: 0 0;
  width: 100%;
  height: auto;
  
  margin: 0;
  border: 0;
  padding: 0;
  border-collapse: collapse;
  
  /* border: 1px solid red; */
}

/* widget type icon cell */
.x2whtdl {
  margin: 0;
  border: 0;
  padding: 0;

  width: auto;
  text-align: left;
  vertical-align: middle; 
}

/* widget header icons cell */
.x2whtdr {
  margin: 0;
  border: 0;
  padding: 0;

  width: 100%;
  text-align: right;
  vertical-align: middle; 
}

.x2wclbl {
  width: auto;
  max-width: 100%;
  height: var(--wctrl-label-height);
  max-height: var(--wctrl-label-height);
  text-align: left;
  vertical-align: top; 
  white-space: nowrap;
  overflow: hidden;
  color: var(--wctrl-label-color);
  font-family: var(--wctrl-font);
  font-size: var(--wctrl-font-size-label);
  margin: 0;
  border: 0;
  padding: 0;  
  background: var(--page-color);
  /*
  border-top: 2px solid #888888;
  border-bottom: 2px solid #888888;
  */
  flex: 0 0 auto;
}

.x2wcval {
  width: auto;
  padding: var(--wctrl-padding);
  height: var(--wctrl-icon-size); 
  font-size: var(--wctrl-font-size);
  white-space: wrap;
  text-align: center;
  height: auto;
  margin: auto;
  overflow: hidden;
}

.x2wicnr1, .x2wicnr2, .x2wicnr3 {
  padding: var(--wctrl-padding);
  height: var(--wctrl-icon-size); 
  margin: var(--text-margin);  
  width: auto;
  white-space: nowrap;
  text-align: right;
}

.x2wicnr1 {
  line-height: var(--wctrl-icon-size);
  font-size: var(--wctrl-font-size);
}

.x2wicnr2 {
  line-height: calc(var(--ctrl-icon-size) / 2);
  font-size: calc(var(--ctrl-font-size) / 1.5);
}

.x2wicnr3 {
  line-height: calc(var(--ctrl-icon-size) / 3);
  font-size: calc(var(--ctrl-font-size) / 2);
}

.ctrliconl {
  padding: var(--ctrl-padding);
  height: var(--ctrl-icon-size); 
  margin: var(--text-margin);  
  width: auto;
  line-height: var(--ctrl-icon-size);
  white-space: nowrap;
  text-align: left;
  float: left;
}

.ctrliconr {
  padding: var(--ctrl-padding);
  height: var(--ctrl-icon-size); 
  margin: var(--text-margin);  
  width: auto;
  line-height: var(--ctrl-icon-size);
  font-size: var(--ctrl-font-size);
  white-space: nowrap;
  text-align: right;
  float: right;
}

.ctrliconr2 {
  padding: var(--ctrl-padding);
  height: var(--ctrl-icon-size); 
  margin: var(--text-margin);  
  width: auto;
  line-height: calc(var(--ctrl-icon-size) / 2);
  font-size: calc(var(--ctrl-font-size) / 1.5);
  white-space: nowrap;
  text-align: right;
  float: right;
}

.ctrliconr3 {
  padding: var(--ctrl-padding);
  height: var(--ctrl-icon-size); 
  margin: var(--text-margin);  
  width: auto;
  line-height: calc(var(--ctrl-icon-size) / 3);
  font-size: calc(var(--ctrl-font-size) / 2);
  white-space: nowrap;
  text-align: right;
  float: right;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hdr-height);
  min-height: var(--hdr-height);
  max-height: var(--hdr-height);
  font-family: var(--hdr-font);
  font-size: var(--hdr-font-size);
  background: var(--hdr-color) var(--hdr-bgimg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-top: var(--hdr-border-top);
  border-right: var(--hdr-border-right);
  border-bottom: var(--hdr-border-bottom);
  border-left: var(--hdr-border-left);
  color: var(--text-color);
  text-align: center;
  padding: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--hdr-height);
  min-height: var(--hdr-height);
  max-height: var(--hdr-height);
  font-family: var(--hdr-font);
  font-size: var(--hdr-font-size);
  background: var(--hdr-color) var(--hdr-bgimg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-left: var(--hdr-border-left);
  border-top: var(--hdr-border-top);
  border-bottom: var(--hdr-border-bottom);
  border-right: var(--hdr-border-right);
  color: var(--text-color);
  text-align: center;
  padding: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.hdrcl {
  height: 100%;
  white-space: nowrap;
  border: 0px solid red;
}

.hdrcc {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  border: 0px solid red;
}

.hdrcr {
  height: 100%;
  white-space: nowrap;
  border: 0px solid red;
}

.hdricon {
  height: var(--hdr-icon-size);
  width: var(--hdr-icon-size);
  display: inline;
  white-space: nowrap;
  vertical-align: middle;
  border: 0px solid green;
}

.hdrtext {
  height: var(--hdr-height);
  display: inline;
  white-space: nowrap;
  font-size: var(--hdr-font-size);
  vertical-align: middle;
  border: 0px solid green;
}

.x2vspc {
  width:100%;
  height: var(--hdr-height);
  height: calc(var(--hdr-height) + 1px);
  min-height: var(--hdr-height);
  min-height: calc(var(--hdr-height) + 1px);
  max-height: var(--hdr-height);
  max-height: calc(var(--hdr-height) + 1px);
}

.login {
  font-family: var(--page-font);
  font-size: inherit;
  color: var(--text-color);
  background-color: var(--page-color);
  border: var(--ctrl-border);
  border-radius: var(--ctrl-radius);
}

.warn {
  font-family: var(--page-font);
  font-size: inherit;
  color: var(--text-color);
  background-color: #FF5555;
  border: 2px solid #FF0000;
  border-radius: var(--ctrl-radius);
  display: block;
  width: 100%;
}

/* dialog boxes */
.box50 {
  display: flex; 
  flex-wrap: nowrap; 
  flex-direction: column; 
  width: auto; 
  height: auto; 
  margin: auto; 
  right: 50%; 
  bottom: 50%; 
  transform: translate(50%,50%);
  position: absolute;
  background-color: var(--ctrl-background);
  border: var(--ctrl-border);
  border-radius: var(--ctrl-radius);
  text-align: center;
  vertical-align:middle;
  font-size: 4vmin;
  padding: 1em;
}

.x2ovrdiv {
  display: inline;
  z-index: 32000;
}

.otSliderV {
  display: none;
  position: fixed; 
  top: 0;
  left: 0; 
  height: var(--slider-big); 
  min-height: var(--slider-big); 
  max-height: var(--slider-big);
  width: var(--slider-small);
  min-width: var(--slider-small);
  max-width: var(--slider-small);
  border: 2px solid var(--text-color);
  background: var(--page-color);
}

.otSliderH {
  display: none;
  position: fixed; 
  top: 0;
  left: 0; 
  height: var(--slider-small); 
  min-height: var(--slider-small); 
  max-height: var(--slider-small);
  width: var(--slider-big);
  min-width: var(--slider-big);
  max-width: var(--slider-big);
  border: 2px solid var(--text-color);
  background: var(--page-color);
}

.otSliderI {
  height: var(--slider-big);
  height: calc(var(--slider-big) - 8px);
  width: var(--slider-small);
  width: calc(var(--slider-small) - 4px);
  position: relative; 
  top: 0; 
  left: 0; 
  background: var(--text-color); 
}

.x2webcamimg {
  padding: 0;
  border: 0;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  
  /*align-self: flex-start; */
}

.x2chartcanvas {
  padding: 0;
  border: 0;
  margin: auto;
  
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: 100%;
  height: 100%;

  text-align: center;
  vertical-align: middle;
  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px; /*var(--ctrl-font-size);*/

  /*align-self: flex-start; */
}


.x2aartimg {
  padding: 0;
  border: 0;
  margin: 4px auto 4px auto;
  width: 12vmin;
  width: calc(12vmin - 8px);
  height: auto;
  align-self: flex-start; 
}

.x2selblk {
   margin: 0;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   min-width: 100vw;
   height: 100vh;
   min-height: 100vh;
   background: var(--overlay-color);
}

.x2selbox {
  position: relative; 
  width: 60vmin; 
  min-width: 50vw;
  height: 70vh;
  min-height: 10vh;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
  z-index: 32900;
  display:flex; 
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--page-color);
  border: 2px solid var(--text-color);
  font-family: var(--ctrl-font);
  font-size: var(--ctrl-font-size);
}

.x2list {
  width: 100%; 
  max-width: 100vw;
  height: 100%;
  max-height: 100vh;
  min-height: 96px;
  margin: 2px;
  display:flex; 
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: var(--ctrl-font);
  font-size: var(--ctrl-font-size);
  color: var(--text-color);
  background: var(--page-color);
}

.x2selhdr {
  width: 99%;
  width: calc(100% - 10px);
  display: flex;
  flex-direction: row;
  border: 2px solid var(--page-color);
  margin: 2px auto 2px auto;
}

.x2selitm, .x2selitmnb {
  display: flex;
  flex-direction: row;
  width: 99%;
  width: calc(100% - 10px);
  max-width: calc(100% - 10px);
  margin: 2px auto 2px auto;
}

.x2selitm {
  border: 2px solid var(--text-color);
}

.x2lnsep {
  width: 99%;
  width: calc(100% - 8px);
  border: 1px solid var(--text-color);
  margin: 2px auto 2px auto;
}

.x2dayboxa {
  padding: var(--ctrl-padding);
  height: var(--ctrl-icon-size); 
  margin: var(--text-margin);  
  width: var(--ctrl-icon-size); 
  min-width: var(--ctrl-icon-size); 
  line-height: var(--ctrl-icon-size);
  font-size: var(--ctrl-font-size);
  border: 2px solid var(--text-color);
  border-radius: 0.3em;
  white-space: nowrap;
  text-align: center;
  float: right;
  color: var(--page-color);
  background: var(--text-color);
}

.x2dayboxd {
  padding: var(--ctrl-padding);
  height: var(--ctrl-icon-size); 
  margin: var(--text-margin);  
  width: var(--ctrl-icon-size); 
  min-width: var(--ctrl-icon-size); 
  line-height: var(--ctrl-icon-size);
  font-size: var(--ctrl-font-size);
  border: 2px solid var(--text-color-disabled);
  border-radius: 0.3em;
  white-space: nowrap;
  text-align: center;
  float: right;
  color: var(--text-color-disabled);
}

.x2button {
  padding: var(--button-padding);
  height: var(--ctrl-icon-size); 
  margin: var(--text-margin);  
  width: auto; 
  line-height: var(--ctrl-icon-size);
  font-size: var(--ctrl-font-size);
  border: 2px solid var(--text-color-disabled);
  border-radius: 0.3em;
  white-space: nowrap;
  text-align: center;
  float: right;
  color: var(--page-color);
  background: var(--text-color);
}

.x2rgb {
  padding: var(--ctrl-padding);
  margin: var(--text-margin);
  border: var(--rgb-field-border);
  min-width: var(--ctrl-icon-size); 
  min-height: var(--ctrl-icon-size);
  width: auto;
  line-height: var(--ctrl-icon-size);
  font-size: var(--ctrl-font-size);
  white-space: nowrap;
  text-align: center;
  float: right;
}

.x2dlgslider1 {
  display:flex;
  flex-direction: column-reverse;
  border: 2px solid var(--text-color);
  background: var(--page-color);
  margin: 0;  
}

.x2dlgslider2 {
  margin: 2px; 
  background: var(--text-color);
  width: 95%;
  width: calc(100% - 4px);
}