body {
  margin: 0;
  padding: 20px;
  background: var(--bg-main);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text-main);
}

.table-wrapper {
  /* margin: 0 auto; */
  /* width: 768px; */
  width: 1024px;
}

/* @media (max-width: 768px) { */
@media (max-width: 1024px) {
  .table-wrapper {
    width: 100%;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-table);
  border: 1px solid var(--border);
}

td { border: 2px solid black; ke margin: 5px;  padding: 5px; }
.wholetable {      color: black;  border: 2px solid black;  margin: 5px;  padding: 5px; }
.black {  background-color: black;        color: white;  border: 1px solid black;  }
.mains {  background-color: lawngreen;    color: black;  border: 1px solid black;  }
.pct100 { background-color: #99ff66; color: black;  border: 1px solid black;  }
.pct90 {  background-color: #ccff99; color: black;  border: 1px solid black;  }
.pct80 {  background-color: #ffff99; color: black;  border: 1px solid black;  }
.pct70 {  background-color: #ffff66; color: black;  border: 1px solid black;  }
.pct60 {  background-color: #ffcc00; color: black;  border: 1px solid black;  }
.pct50 {  background-color: #ff9933; color: black;  border: 1px solid black;  }
.pct40 {  background-color: #ff6600; color: black;  border: 1px solid black;  }
.pct30 {  background-color: #ff3300; color: black;  border: 1px solid black;  }
.pct20 {  background-color: #cc0000; color: white;  border: 1px solid black;  }
.pct10 {  background-color: #990000; color: white;  border: 1px solid black;  }
.warn  {  background-color: gold; color: black;  border: 1px solid black;  }
.crit  {  background-color: pink;         color: black;  border: 1px solid black;  }


/*span { font-size: 36px; font-family: Helvetica, sans-serif; color: #39464e; }*/

/*.ok220       { text-align: center; position: relative; background-color: green }*/
.row220      { min-width: 30px; text-align: right; padding-right: 5px;}
.row221      { min-width: 30px; text-align: center; padding-right: 5px;}
.row222      { min-width: 30px; text-align: center; padding-right: 5px;}
.pct         { min-width: 40px; text-align: right }
/* многострочная ячейка для нескольких датчиков 220 */
.multiline220 { min-width: 90px; padding-left: 5px; padding-right: 5px; padding-top: 0px; padding-bottom: 0px }

.ok220       { text-align: center; position: relative; }
.nosensor  { text-align: center; position: relative; background-color: lightgrey }
.no220    { text-align: center; position: relative; background-color: white }
.no220:before,.no220:after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background-color: red; transform: rotate(15deg); }
.no220:after { transform: rotate(-30deg) }

.remarks  { min-width: 20px;  }
.uptime   { min-width: 30px;  }
.power    { min-width: 65px; text-align: right; }
.accum    { min-width: 50px; text-align: right; }
.status   { min-width: 180px; }