body {
  padding: 0;
  margin: 0;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  overflow: hidden;
  font-family: Monospace;
}

.onlinemark {
  color: Chartreuse;
  font-weight: bold;
}

#lang,
button {
  margin: 3px 3px;
}

.but {
  color: blue;
  background-color: yellow;
}

.fiction {
  color: yellow;
}

@media screen and (min-resolution: 150dpi) and (orientation: portrait) {
  body {
    font-size: 36pt;
  }
  button img {
    height: 50%;
  }
}

@media screen and (min-resolution: 150dpi) and (orientation: landscape) {
  body {
    font-size: 24pt;
  }
  button img {
    height: 16px;
  }
}

@media screen and (min-resolution: 250dpi) and (orientation: landscape) {
  body {
    font-size: 200%;
    color: green;
  }
}

@media screen and (min-resolution: 200dpi) and (orientation: portrait) {
  body {
    font-size: 36pt;
    color: brown;
  }

  select,
  [type='checkbox'],
  [type='text'],
  button {
    font-size: 48px;
    height: 66px;
  }
  button,
  [type='checkbox'] {
    width: 78px;
  }
  button img {
    height: 64px;
  }
}

@media screen and (min-resolution: 300dpi) and (orientation: portrait) {
  body {
    font-size: 48pt;
    color: blue;
  }
  button img {
    height: 200%;
  }
}

@media (orientation: landscape) {
  .two {
    flex-direction: row;
  }
  .w {
    width: 50%;
  }
}

@media (orientation: portrait) {
  .two {
    flex-direction: column;
  }
  .w {
    width: 100%;
  }
}

/* Create the caret/arrow with a unicode, and style it */
[x]::before {
  content: '\25B6';
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
[x^='+']::before {
  transform: rotate(90deg);
}

button {
  vertical-align: top;
  margin-left: 1em;
  text-align: left;
}

[type='checkbox'] {
  float: left;
  left: 5px;
}

.lnk {
  color: red;
}

.wm {
  width: 100%;
  white-space: pre-line;
}

.full {
  display: flex;
  height: 100%;
  background-color: red;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  flex-flow: column;
  overflow: hidden;
}

.w {
  display: flex;
  flex-flow: column;
  overflow: hidden;
}

#fullmodal {
  z-index: 1; /* Sit on top */
  display: none;
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal {
  height: 70%;
  width: 70%;
  display: flex;
  position: fixed;
  left: 15%;
  top: 15%;
  flex-flow: column;
  overflow: hidden;
  background-color: salmon;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.columnButtons {
  display: flex;
  flex-direction: column;
}

.two {
  flex-grow: 1;
  display: flex;
  background-color: Aqua;
  overflow: hidden;
}

#winLog {
  background-color: LightGrey;
  color: DarkBlue;
}

.lognum {
  width: 4em;
}

.w,
.menu,
.wm,
.wIn {
  border-style: solid;
  border-width: thin;
  border-color: #8f8f8f;
}
.wIn2 {
  border: 0;
  overflow: auto;
  width: 100%;
  height: 100%;
  background-color: DarkBlue;
}

.w,
.wm,
.wIn {
  flex-grow: 1;
  overflow: auto;
}

.w,
.wIn {
  background-color: DarkBlue;
}

.wm {
  background-color: #999999;
}

.top {
  flex-grow: 0;
  text-align: left;
  width: 100%;
  background-color: LightSkyBlue;
}

.menu {
  flex-grow: 0;
  align-content: start;
  background-color: #ababab;
}

#w2 {
  background-color: #00ffcb;
}

#w1 {
  background-color: #ff0000;
}
#menu1 {
  background-color: #3344cb;
}
#menu2 {
  background-color: #338822;
}

.wm {
  color: black;
}

#w2 p {
  margin: 0;
  padding: 0;
}

.topstring {
  border: solid;
  display: block;
}

legend {
  color: yellow;
}

#lang {
  background-color: #ffff00;
}

#wm2 {
  background-color: #ffff00;
}

#online {
  color: FireBrick;
  background-color: FireBrick;
  font-weight: bold;
}

@keyframes blinker {
  to {
    opacity: 0;
  }
}

.wIn2 {
  color: White;
}

/*undefined realtype*/
.lnk000 {
  background-color: gray;
  color: Yellow;
}

/*ON*/
.lnk111o {
  background-color: Red;
}

@keyframes blinkFire {
  0% {
    background-color: rgba(255, 0, 0, 1);
  }
  100% {
    background-color: rgba(255, 0, 0, 0.5);
  }
}
@keyframes faulty {
  0% {
    background-color: rgba(255, 255, 0, 1);
  }
  100% {
    background-color: rgba(255, 255, 0, 0.5);
  }
}

.errorSun {
  background-color: black;
  color: Yellow;
}

/*ON2*/
.lnk111Y {
  animation-name: blinkFire;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/*no ON & fault*/
.lnk111f {
  background-color: yellow;
  animation-name: faulty;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/*no Fault & down*/
.lnk111d {
  background-color: GreenYellow;
}

/*
// 000 o00
// s11 s1Z sr1 srZ
// e11 e1Z er1 erZ
*/
.lnkdel {
  background-color: black;
  color: red;
}
.lnknotPPK {
  background-color: black;
  color: white;
}
.lnknotAlwd {
  background-color: black;
  color: yellow;
}
.lnknotSel {
  background-color: gray;
  color: black;
}
.lnkOK {
  background-color: green;
  color: white;
}
.lnknoSYN {
  background-color: darkgray;
  color: white;
}
.lnkFLT {
  background-color: yellow;
  color: black;
}
.lnkMKZ {
  background-color: darkmagenta;
  color: white;
}
.lnkON {
  background-color: red;
  color: white;
}
.lnkofl {
  background-color: blue;
  color: white;
}





/*all ok no ON no faults*/
.lnk111 {
  background-color: Green;
}

/*not synched with PPK*/
.lnkNNN {
  background-color: Magenta;
}

/*offline*/
.lnkooo {
  background-color: Cyan;
}

/*not synched in PPK*/
.lnk11s {
  background-color: Purple;
}

/*not configured*/
.lnk00c {
  background-color: BlueViolet;
}

/*offduty*/
.lnkRRR {
  background-color: Brown;
}

.robotActive {
  background-color: Red;
  font-size: 2em;
}

.robotInActive {
  background-color: Blue;
  font-size: 1em;
}
