search

jens-maus / RaspberryMatic

:house: A feature-rich but lightweight, buildroot-based Linux operating system alternative for your CloudFree CCU3/ELV-Charly 'homematicIP CCU' IoT smarthome central. Running as a pure virtual appliance (ProxmoxVE, Home Assistant, LXC, Docker/OCI, Kubernetes/K8s, etc.) on a dedicated embedded device (RaspberryPi, etc.) or generic x86/ARM hardware.
https://raspberrymatic.de
Apache License 2.0
1.53k stars 186 forks source link

Aesthetics in style.css and usage of css variables #1468

Closed ptweety closed 2 years ago

ptweety commented 2 years ago

Is your feature request related to a problem? Please describe. No real problem. Code aesthetics only.

Describe the solution you'd like

solution proposal Sorry for not creating a PR, but I was not able to find a proper place for this change

:root {
  --colormap-active:                  $_(active);                 /* #3678c9 */
  --colormap-attention:               $_(attention);              /* red */
  --colormap-activeBackground:        $_(activeBackground);       /* #f0f0f0 */
  --colormap-background:              $_(background);             /* #192c6e */ /* was: #183473 */

  --colormap-contentBackground:       $_(contentBackground);      /* #ffffff */

  --colormap-backgroundStart:         $_(backgroundStart);        /* #89989b */
  --colormap-backgroundEnd:           $_(backgroundEnd);          /* #ffffff */

  --colormap-black:                   $_(black);                  /* #000000 */
  --colormap-clickable:               $_(clickable);              /* #89989b */
  --colormap-inactiveBackground:      $_(inactiveBackground);     /* #bcc7cb */
  --colormap-okSignal:                $_(okSignal);               /* #00c300 */
  --colormap-warnSignal:              $_(warnSignal);             /* #ffff00 */
  --colormap-white:                   $_(white);                  /* white */

  --colormap-inactiveButton:          $_(inactiveButton);         /* #c0c0c0 */

  --colormap-channelHighlight:        $_(channelHighlight);       /* #cc6600 */
  --colormap-channelBackground:       $_(channelBackground);      /* #ffffff */
  --colormap-channelBorder:           $_(channelBorder);          /* #5c7287 */

  --colormap-inherit:                 $_(inherit);                /* inherit */
  --colormap-transparent:             $_(transparent);            /* transparent */
  --colormap-windowText:              $_(windowText);             /* WindowText */

  --colormap-blue:                    $_(blue);                   /* #000066 */
  --colormap-gray:                    $_(gray);                   /* #999999 */
  --colormap-testActive:              $_(testActive);             /* #ffff00 */
  --colormap-testOk:                  $_(testOk);                 /* #00ff00 */
  --colormap-red:                     $_(red);                    /* red */
  --colormap-progressbarHighlight:    $_(progressbarHighlight);   /* #003366 */
  --colormap-progressbarBackground:   $_(progressbarBackground);  /* #999999 */
  --colormap-progressbarText:         $_(progressbarText);        /* #ffffff */
  --colormap-darkgray:                $_(darkgray);               /* darkgray */
  --colormap-profile:                 $_(profile);                /* #e0e0e0 */
  --colormap-profileActive:           $_(profileActive);          /* #99ccff */
  --colormap-grayText:                $_(grayText);               /* GrayText */
  --colormap-textColorA:              $_(textColorA);             /* white */
  --colormap-textColorB:              $_(textColorB);             /* black */

  --colormap-pgmTextColorInactive:    $_(pgmTextColorInactive);   /* #bcc7cb */
  --colormap-pgmBackColorInactive:    $_(pgmBackColorInactive);   /* #f0f0f0 */

  --colormap-navBarSeparator:         $_(navBarSeparator);        /* #bcc7cb */

  --colormap-mainMenuBackground:      $_(mainMenuBackground);     /* #ebf1f2 */
  --colormap-subMenuBackground:       $_(subMenuBackground);      /* #ebf1f2 */
  --colormap-subMenuHighlight:        $_(subMenuHighlight);       /* #89989b */

  --colormap-messagesBackground:      $_(messagesBackground);     /* #ebf1f2 */
  --colormap-logoutButton:            $_(logoutButton);           /* #ebf1f2 */

  /* Die nächsten zwei Einträge evtl. verwerfen,
     weil übliche Hacks in color.map hier zum Fehler führen
     und nachfolgende Einträge nichtmehr verarbeitet werden */
  /* --colormap-programEven:             $_(programEven);            /* #bcc7cb */
  /* --colormap-programOdd:              $_(programOdd);             /* #ebf1f2 */

  --colormap-deviceListRowHighlight:  $_(deviceListRowHighlight); /* #89989b */
  --colormap-borderColor:             $_(borderColor);            /* #f0f0f0 */

  --colormap-shutterOpeningDegree:    $_(shutterOpeningDegree);   /* #89989b */
  --colormap-link:                    $_(link);                   /* #0101FF */

  --webui-color-silver: #afafaf;
  --webui-color-lightgray: #e0e0e0;
  --webui-color-extralightgray: #ddd;
  --webui-color-steelblue: #3678c9;
  --webui-color-firebrick: #c70022;

  --btnGradient: linear-gradient(to bottom, var(--colormap-white), #a1a1a1);
}

.j_translate, .j_startPage {
  display: none;
}

.btnActive {
  background-color: var(--colormap-active) !important;
}

.attention {
  color: var(--colormap-attention);
  font-weight: bold;
}

.height20px {
  height: 20px;
}

.border1px {
  border: solid 1px var(--colormap-black);
}

.border2px {
  border: solid 2px var(--colormap-black) !important;
}

.borderRadius2px {
  border-radius: 2px !important;
}

.borderRadius5px {
  border-radius: 5px !important;
}

.width160px {
  width: 160px;
}

.minWidth210px {
  min-width: 210px;
}

.minWidth230px {
  min-width: 230px;
}

.conditionEven {
  /* Wenn die Farbe nicht nur als Rahmen,
     sondern für die ganze Bedingung gelten soll,
     muss background-color in der Klasse .Rule deaktiviert werden */
  /* background-color: var(--colormap-programEven); */
  background-color: $_(programEven);
}

.conditionOdd {
  /* background-color: var(--colormap-programOdd); */
  background-color: $_(programOdd);
}

.colorGradient {
  background-image: var(--btnGradient) !important;
}

.colorGradient50px {
  background-image: var(--btnGradient) !important;
}

/*
.startPageInfo {
  border: solid 1px var(--colormap-darkgray);
  padding: 4px;
}
*/

html,
body {
  margin: 0;
  padding: 0;
  color: var(--colormap-textColorB);
  background-color: var(--colormap-background);
  border: 0 none;
  font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
  font-size: 12px;
}

input,
textarea,
select,
button,
h1 {
  font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
  font-size: 12px;
}

p {
  margin-top: 10px;
  margin-bottom: 10px;
}

ol {
  margin-top: 10px;
  margin-bottom: 10px;
}

ul {
  margin-top: 10px;
  margin-bottom: 10px;
}

ul ul {
  margin-top: 0px;
  margin-bottom: 0px;  
}

a img {
  border: 0 none;
}

 /* * * * * * * * * * * * * * * * * * * * * * *
 * * *   Element IDs                     * * *
 * * * * * * * * * * * * * * * * * * * * * * */

/* Navigation-Leiste */
#navbar  {
  margin: 0px;
  background-color: var(--colormap-background);
  width: 100%;
  border-bottom: solid 5px var(--colormap-white); /* Trennlinie zwischen Navigation und Hauptbereich */
}

/* Haupt-Fenster */
#_content {
  height: 70%;
  background-color: var(--colormap-background);
  overflow: auto;
}

#content {
  background-color: var(--colormap-contentBackground);
  overflow: auto;
  display: flex;
  align-items: flex-start;
  /* Prevent chrome from outlining this by focus */
  outline: none;
}

#prgcontent {
  display: contents;
}

#GroupListBody {
  display: contents;
}

/* Kopfzeile */
#header {
  height: 15%;
  background-color: var(--colormap-background);
  color: var(--colormap-textColorB);
}

/* Fusszeile */
#footer {
  height: 15%;
  background-color: var(--colormap-background);
  color: var(--colormap-textColorB);
  border-top: solid 5px var(--colormap-navBarSeparator);
}

/* Tabelle zur Gestaltung der Login-Seite */
#login_content {
  padding-top: 20px;
}

/* Feld zur Benutzernamen-/Passwort-Eingabe */
#LoginMask {
  font-weight: bold;
  text-align: center;
  width: 200px;
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  border: solid 1px;
}

#LoginMask input {
  margin: 0;
  padding: 0;
  width: 200px;
}

/* Benutzername im Seiten-Header */
#UserName {
  color: var(--colormap-textColorA);
  vertical-align: top;
}

/* Pfadangabe im Seiten-Header */
#PagePath {
  /* color: var(--colormap-textColorA); */
  color: var(--webui-color-silver); /* #afafaf */
  vertical-align: bottom;
}
#PagePath span {
  cursor: pointer;
}

/* Linker Bereich der Hauptansicht (falls in zwei Spalten getrennt) */
#contentLeft {
  vertical-align: top;
}

/* Rechter Bereich der Hauptansicht (falls in zwei Spalten getrennt) */
#contentRight { 
  border-left: solid 5px var(--colormap-navBarSeparator); /* Trennlinie zwischen Navigation und Hauptbereich */
  /* padding-top: 10px; */
  vertical-align: top;
}

#separator {
  color: var(--colormap-textColorA);
  height: 5px;
  width: 100%;
  background-color: var(--colormap-white);
}

/* Buttons im linken Bereich der Startseite */
#ButtonTable td {
  text-align: center;
  background-color: var(--colormap-clickable);
  height: 40px;
  cursor: pointer;
}

/* Grundlegende Tabelle auf der Statusanzeige-Seite */
#tblStatus {
  /* width: 1200px; */
  height: 100%;
  table-layout: fixed;
}

#tblStatus td {
  vertical-align: top;
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
}

#chkCell {
  background-color: var(--colormap-white);
}

#tblListFold {
  background-color: var(--colormap-background);
}

#chnListBody td {
  /* border: solid 1px var(--colormap-black); */
  text-align: center;  
}
#chnListBody th {
  /* border: solid 1px var(--colormap-black); */
  text-align: center;  
}

/* * * * * * * * * * * * * * * * * * * * * * *
 * * *   Classes                         * * *
 * * * * * * * * * * * * * * * * * * * * * * */

.clickable {
  cursor: pointer;
}

/* Desktop Label */
.DesktopLabel {
  background-color: var(--colormap-gray); /* silver */
  width: auto; 
  border: solid 1px var(--colormap-black); 
  font-weight: bold;  
  text-align: center; 
  margin-top: 3px; 
  margin-left: 3px; 
  margin-right: 3px;
}

/* Small Logo Position */
.SmallLogo {
  /*position: absolute;*/
  margin-left: 0px;
  margin-top: 6px;
  padding-left: 10px;
}

/* Small Logo Position für An- und Abmeldung */
.SmallLogoLog {
  position: absolute;
  left: 18px;
  top: 12px;
}

/* Big Logo Position */
.LargeLogo {
  position: absolute;
  left: 480px;
  top: 180px;
}

/* Standard-Button (z.B. Benutzernamen bei Login) */
.Button {
  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient) !important;
  color: var(--colormap-textColorB);
  font-weight: bold;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: solid 1px var(--colormap-black);
  cursor: pointer;
  margin-left: 1px;
  border-radius: 10px;
}

/* Statusanzeige-Rooms */
.ButtonStatusRooms { 
  background-color: var(--colormap-activeBackground);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  width: 100px;
  height: 100px;
}

.ButtonStatusRoomsSelected { 
  background-color: var(--colormap-active); /* #565657 */
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorA);
  width: 100px;
  height: 100px;
}

.ButtonStatusRoomsPic {
  text-align: center;
  background-color: var(--colormap-activeBackground);
  border: solid 1px var(--colormap-black);
  width: 100px;
  height: 100px;
}

.ButtonStatusRoomsPicSelected {
  text-align: center;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorA);
  background-color: var(--colormap-active); /* #565657 */
  height: 100px;
  width: 100px;
}

.filterTable {
  empty-cells: show;
}

.filterTable th {
  text-align: center;
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-clickable);
  height: 50px;
}

.filterTable td {
  text-align: center;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  height: 40px;
}

.filterTable .leftAlign {
  text-align: left;
}

/* Grosse Beschriftung eines Buttons (z.B. "Posteingang" auf Startseite) */
.ButtonLargeFont {
  line-height: 40px;
  height: 80px;
}

/* Überschrift im Header-Feld */
.HeaderTitle {
  font-weight: bold;
  color: var(--colormap-textColorA);
}

/* Buttons innerhalb der Navigations-Leiste */
.NavButton {
  background-color: var(--colormap-logoutButton);
  background-image: var(--btnGradient);
  color: var(--colormap-textColorB);
  font-weight: bold;
  width: 190px;
  text-align: center;
  border: solid 1px var(--colormap-black);
  cursor: pointer;
  border-radius: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Buttons innerhalb der Navigations-Leiste */
.NavButton2 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  font-weight: bold;
  width: 130px;
  height: 42px;
  text-align: center;
  border: solid 1px var(--colormap-black);
  cursor: pointer;
  line-height: 21px;
}

/* Aktuell selektierter Button innerhalb der Navigations-Leiste */
.NavButtonSelected {
  background-color: var(--colormap-active); /* #5655657 */
  color: var(--colormap-textColorA);
  font-weight: bold;
  width: 130px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border: solid 1px var(--colormap-black);
  cursor: pointer;
  vertical-align: middle;
}

/* Aktuell selektierter Button innerhalb der Navigations-Leiste */
.NavButtonSelected2 {
  background-color: var(--colormap-active); /* #5655657 */
  color: var(--colormap-textColorA);
  width: 140px;
  font-weight: bold;
  height: 42px;
  text-align: center;
  border: solid 1px var(--colormap-black);
  cursor: pointer;
  vertical-align: middle;
  line-height: 21px;
}

/* Alarm-/Servicemeldungen im Header */
.Messages {
  background-color: var(--colormap-messagesBackground);
  background-image: var(--btnGradient);

  overflow: auto;

  text-align: center;
  color: var(--colormap-textColorB);
  font-weight: bold;
  width: 250px;
  border: solid 1px var(--colormap-black);
}

.Messages_Selected {
  background-color: var(--colormap-active); /* #565657 */
}

/* Kopfzeile der Alarm-/Servicemeldungen */
.MsgTblHeader {
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  height: 30px;
}

.StdTable {
  height: 100%;
  width: 100%
}

.StdTable td {
  background-color: var(--colormap-inactiveBackground);
  text-align: left;
  vertical-align: top;
  color: var(--colormap-textColorB);
}

._StdTableBtn {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  height: 70px;
  line-height: 70px;
  text-align: center;
  border: solid 1px var(--colormap-black);
  margin: 5px;
  cursor: pointer;
  overflow: hidden;
}

.StdTableBtn {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorB);
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: solid 1px var(--colormap-black);
  margin: 5px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 10px;
  margin-left: 10px;
  background-image: var(--btnGradient);
}

/*
.StdTableBtnHelp {
  padding-right: 50px;
}
*/

.StdTableBtn2 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  height: 70px;
  line-height: 35px;
  text-align: center;
  border: solid 1px var(--colormap-black);
  margin: 5px;
  cursor: pointer;
  overflow: hidden;
}

/* "Kopfzeile" einiger Tabellenzellen (wie z.B. in der Statusanzeige) */
.HeaderBg {
  background-color: var(--colormap-inactiveBackground);
  width: 100%;
  height: 30px;
  color: var(--colormap-textColorB);
  white-space: nowrap;
}

/* Trennlinie Statusanzeige Systemhistorie*/

.borderBottomHist {
  border-bottom: solid 1px var(--colormap-black);
}

/* Logging von Ereignissen (z.B. Seite zur Statusnazeige) */
.divLog {
  color: var(--colormap-textColorB);
  overflow: auto;
  width: 100%;
  height: 75%; /* sorgt für korrekte Darstellung der Scrollbalken im IE */
}

/* Tabelle zur Listendarstellung von Elementen (z.B. Raumübersicht) */
.tblList {
  margin: 10px;
  empty-cells: show;
  border: solid 1px var(--colormap-black);
  width: 100%;
}

.tblList th {
  color: var(--colormap-textColorA);
  font-weight: normal;
  background-color: var(--colormap-clickable);
}

.Sort {
  cursor: pointer;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.SortSelected {
  cursor: pointer;
  background-color: var(--colormap-active); /* #565657 */
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*
.pt11 { }
*/

.tblList td {
  color: var(--colormap-textColorB);
  height: 25px;
  text-align: center;
  vertical-align: middle;
}

/* Kopfzeile eines Popup-Fenster */
.popupTitle {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
  padding-left: 4px;
}

/* ToDo */
/* Dirty IE-Hack only works, if IE7 is running in quirks mode.*/
* html .popupTitle {
  color: var(--colormap-textColorB);
  width: 100%;
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
  padding-left: 4px;
}

/* Tabelle zum Bearbeiten von Eigenschaften (z.B. "Raum bearbeiten") */
.popupTable {
  width: 100%;
  border: solid 1px var(--colormap-black);
  empty-cells: show;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  text-align: center;
  vertical-align: middle;
  font-weight: normal;
}

.popupTableScript {
  width: 100%;
  border: solid 1px var(--colormap-black);
  empty-cells: show;
  color: var(--colormap-textColorA);
  text-align: center;
  vertical-align: middle;
  font-weight: normal;
}

.popupTableRow { 
  border-bottom: solid 1px var(--colormap-clickable);
  border-top: solid 1px var(--colormap-clickable);
}

.scriptButton { 
  text-align: center;
  width: 10%;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
}

.popupWhiteCells {
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  font-weight: normal;
}

.popupWhiteCells {
  cursor: pointer;
}
.popupGrayCells {
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  font-weight: normal;
}

.popupControls {
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
}

.popupControls div {
  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient);

  color: var(--colormap-textColorB);
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  cursor: pointer;
  border: solid 1px var(--colormap-black);
  border-radius: 5px;
}

/* Rechter Teil der Hilfe-Seite */
.helpViewer {
  width: 100%;
  height: 100%;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

/* KanalListe */
.ChnListTbl {
  background-color: var(--colormap-black);
  margin: 10px;
}

.ChnListTbl td {
  background-color: var(--colormap-activeBackground);
  color: var(--colormap-textColorB);
  height: 50px;
}

.ChnListNav {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  font-weight: normal;
  height: 30px;
}

.ChnListNavSelected {
  background-color: var(--colormap-active); /* #565657 */
  color: var(--colormap-textColorA);
  font-weight: normal;
  height: 30px;
}

.FilterBtn {
  background-image: var(--btnGradient);
  color: var(--colormap-textColorB);

  cursor: pointer;
  width: 100%;
  /* height: 100%; */
  height: 20px;
  line-height: 20px;
}

.FilterBtnActive {
  background-color: var(--colormap-active); /* #565657 */
}

/* Filter Untermenüs */
.FilterSubMenu {
  overflow: auto;
  background-color: var(--colormap-inactiveBackground);
  position: absolute;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorA);
  z-index: 500;
}

.FilterSubMenu td {
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  height: 15px;
  border: none;
}

.FilterSetButton {
  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient);
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  border-radius: 2px;
  margin-bottom: 6px;
  margin-left: 5px;
  margin-right: 5px;
  width: 90%;
  cursor: pointer;
  z-index: 501;
}

.Filter_Active .FilterCaption {
  color: red;
}

.ControlBtnOff {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  font-weight: bold;
  text-align: center;
  border: solid 1px var(--colormap-black);
  /* border-top: inset 4px var(--colormap-clickable);*/
  border-right: inset 4px var(--colormap-clickable);
  cursor: pointer;
}

.ControlBtnOn {
  background-color: var(--colormap-active); /* #565657 */
  color: var(--colormap-textColorA);
  font-weight: bold;
  text-align: center;
  border: solid 1px var(--colormap-black);
  border-top: inset 4px var(--colormap-active);
  border-right: inset 4px var(--colormap-active);
  cursor: pointer;
}

.PercBtn {
  background-color: var(--colormap-clickable); 
  color: var(--colormap-textColorA); 
  font-weight: bold;
  text-align: center;
  border: solid 1px var(--colormap-black); 
  border-top: inset 4px var(--colormap-clickable);
  border-right: inset 4px var(--colormap-clickable);
  height: 96px;
  width: 96px;
}

.ControlBtnInfo {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  padding: 5px;
  font-weight: bold;
  min-height: 30px;
}

.ControlBtnPushed {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorB);
  font-weight: bold;
  text-align: center;
  border: solid 1px var(--colormap-black);
  border-top: inset 4px var(--colormap-warnSignal); /* #fdf304 */
  border-right: inset 4px var(--colormap-warnSignal); /* #fdf304 */
}

#id_progressbar_wrapper {
  background-color: var(--colormap-activeBackground);
  color: var(--colormap-textColorB);
}
.popupTableRowGray {
  border-bottom: solid 1px var(--colormap-clickable);
  border-top: solid 1px var(--colormap-clickable);
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  margin: 0;
}
.popupTableRowWhite {
  border-bottom: solid 1px var(--colormap-clickable);
  border-top: solid 1px var(--colormap-clickable);
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  margin: 0;
}
.popupTableHeaderRow {
  background-color: var(--colormap-gray);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorA);
  margin: 0;
}
.popupTableHeaderRow th {
  background-color: var(--colormap-gray);
  color: var(--colormap-textColorA);
  margin: 0;
}
.popupTableHeaderRow td {
  background-color: var(--colormap-gray);
  color: var(--colormap-textColorA);
  margin: 0;
}

/* Buttons (Löschen, Einstellen, Geräte...) auf Geräte/Raum/Gewerk-Übersicht */
._StdButton {
  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient);

  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  cursor: pointer;
  border-radius: 2px;
}

.StdButton {
  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient);
  margin: 2%;
  border: solid 1px var(--colormap-black);
  /* width: 95%; */
  text-align: center;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  color: var(--colormap-textColorB);
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px;
  padding-left: 2px;
  padding-right: 2px;
}

.StdButtonBig {
  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient);
  margin: 2%;
  border: solid 1px var(--colormap-black);
  /* width: 95%; */
  text-align: center;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  color: var(--colormap-textColorB);
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px;
}

.heightAuto {
  height: auto;
}

.StdButtonInactive {
  background-color: var(--colormap-activeBackground);
  background-image: var(--btnGradient);
  color: var(--colormap-gray);
  border: solid 1px var(--colormap-gray);
  border-radius: 5px;
  margin: 2%;
  text-align: center;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  padding-left: 2px;
  padding-right: 2px;
}

.TestButton {
  border: solid 1px var(--colormap-black);
  margin: 5px;
  text-align: center;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorB);
  cursor: pointer;
}

.TestButtonDisabled {
  border: solid 1px var(--colormap-gray);
  margin: 5px;
  text-align: center;
  background-color: var(--colormap-activeBackground);
  color: var(--colormap-textColorA);
  cursor: default;
}

.OkButton,
.OkButtonRunning {
  text-align: center;
  font-weight: bold;
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  width: 100%;
}

.OkButton {
  background-color: var(--colormap-okSignal);
}

.OkButtonRunning {
  background-color: var(--colormap-warnSignal);
}

.TestDate {
  margin-top: 2px;
  margin-bottom: 2px;
  border-top: solid 1px var(--colormap-black);
  border-bottom: solid 1px var(--colormap-black);
}

.FooterButton {

  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient);

  overflow: auto;

  border: solid 1px var(--colormap-black);
  border-radius: 5px;
  color: var(--colormap-textColorB);
  width: 120px;
  height: 30px;
  cursor: pointer;
  line-height: 30px;
  font-weight: bold;
}

.FooterButtonLarge {
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  background-color: var(--colormap-clickable);
  width: 150px;
  height: 30px;
  cursor: pointer;
  line-height: 30px;
  font-weight: bold;
}

/* Tabellen Benutzerkonto-Konfiguration */

.TblHeaderUserConfig {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);  
  text-align: center;
  height: 50px;
}

.TblFilterUserConfig {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  height: 20px;
  border: solid 1px var(--colormap-black);
  text-align: center;
}

.TblUserConfig {
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-inactiveBackground);
  text-align: center;
}

.tblUserData td {
  color: var(--colormap-textColorB);
}

.TblUserAdministration {
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  text-align: center;
  border: solid 1px var(--colormap-black);
}

.StatViewTbl {
  empty-cells: show;
}

.StatViewTbl td {
  border: solid 1px var(--colormap-black);
}

.ChannelStatusTbl {
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  height: 100px;
  text-align: center;
  empty-cells: show;
}

.picDiv {
  margin: 0; 
  padding: 0; 
  position: relative; 
  width: 50px; 
  height: 50px;
}

.ChannelTblPopup {
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  height: 60px;
  text-align: center;
}
.SysVarsTblPopup {
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  height: 60px;
  text-align: center;
  max-width: 215.333px;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}
.WhiteBkgChannelPopup {
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  height: 60px;
  text-align: center;
  empty-cells: show;
}

.RoomFuncChooser {
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
}

.RoomFuncChooser td {
  color: var(--colormap-textColorB);
}

.SelectBox {
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
}

.BigFont {
  font-weight: bold;
}

.Rule {
  /* background-color: var(--colormap-inactiveBackground); */
  border: solid 1px var(--colormap-black);
  padding: 4px;
  text-align: left;
}

.Condition {
  border: solid 1px var(--colormap-black);
  padding: 4px;
  text-align: left;
  margin-left: 15px;
}

.tHeaderCell {
  color: var(--colormap-textColorA);
  background-color: var(--colormap-clickable);
  height: 40px;
  border: solid 1px var(--colormap-black); 
  padding: 4px;
  text-align: left;
  vertical-align: middle;
}

.tSubHeaderCell {
  color: var(--colormap-textColorA);
  background-color: var(--colormap-clickable);
  height: 20px;
  border: solid 1px var(--colormap-black); 
  padding: 4px;
  text-align: center;
  vertical-align: middle;
}

.tHeaderCellSort {
  color: var(--colormap-textColorA);
  background-color: var(--colormap-active); /* #565657 */
  height: 40px;
  border: solid 1px var(--colormap-black); 
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  height: 100%;
}

.tHeaderCellSortSelected {
  color: var(--colormap-textColorA);
  background-color: var(--colormap-active); /* #565657 */
  height: 100%;
  border: solid 1px var(--colormap-black);
  padding: 4px;
  cursor: pointer;
  background-color: var(--colormap-active); /* #565657 */
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
}

.tBodyCell {
  background-color: var(--colormap-activeBackground);
  height: 40px;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  padding: 4px;
  text-align: left;
}

.tBodyCellInactive {
  background-color: var(--colormap-pgmBackColorInactive); /* #f0f0f0 */
  height: 40px;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-pgmTextColorInactive); /* #bcc7cb */
  padding: 4px;
  text-align: left;
}

.tBodyCellCenter {
  background-color: var(--colormap-activeBackground);
  height: 40px;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  padding: 4px;
  text-align: center;
}

.tTable {
  text-align: center;
  margin: 10px;
  empty-cells: show;
  border: solid 1px var(--colormap-black);
  width: 100%;
}

/*
.tTable th {
  padding: 2px;
}

.tTable td {
  color: var(--colormap-textColorB);
}
*/

.bgWhite {
  background-color: var(--colormap-white);
}

.taCenter {
  text-align: center;
}

.viewTbl {
  border: none;
  background-color: var(--colormap-activeBackground); /* #dcdcdc */
}

.ctrlTbl {
  border: none;
  background-color: var(--colormap-white);
}

.ctrlTbl td {
  border: none;
  height: auto;
  background-color: var(--colormap-inherit);
  color: var(--colormap-textColorA);
}

/*  TABLE DIVS */

div.table    { display: table; border-collapse: collapse; }
div.tr       { display: table-row; }
div.td       { display: table-cell; }
div.thead    { display: table-header-group; }
div.tbody    { display: table-row-group; }
div.tfoot    { display: table-footer-group; }
div.col      { display: table-column; }
div.colgroup { display: table-column-group; }
div.th       { display: table-cell; }
div.caption  { display: table-caption; }

.tMain {
  border: solid 1px var(--colormap-black);
  margin: 10px;
  width: 100%;
}

.tHeader {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  height: 40px;
  empty-cells: show;
}

.tFilter {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  height: auto;
  text-align: center;
  empty-cells: show;
}

.tClick {
  cursor: pointer;
}

.tCell {
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  text-align: center;
  empty-cells: show;
}

/*
.bcWhitePic {
  background-color: var(--colormap-white);
}
*/

.bcWhite {
  background-color: var(--colormap-activeBackground);
}

.loginErrorBox {
  border: solid 4px var(--colormap-red);
  background-color: var(--colormap-inactiveBackground);
  margin: 10px;
  color: var(--colormap-textColorB);
  font-weight: bold;
  padding: 12px;
}

.tMoveUp {
  background-image: url(/img/btn_fav_up.png);
  width: 85px;
  height: 38px;
  text-align: center;
  background-position: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  cursor: pointer;
}

.tMoveDown {
  background-image: url(/img/btn_fav_down.png);
  width: 85px;
  height: 38px;
  text-align: center;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.tSysvarMoveUp {
  background-image: url(/ise/img/up.png);
  background-position: center;
  height: 15px;
  width: 20px;
  background-size: contain;
  background-repeat: round;
  cursor: pointer;
  mix-blend-mode: darken;
}

.tSysvarMoveDown {
  background-image: url(/ise/img/down.png);
  background-position: center;
  height: 15px;
  width: 20px;
  background-size: contain;
  background-repeat: round;
  cursor: pointer;
  mix-blend-mode: darken;
}

.oLine {
  width: 100%;
  height: 6px;
}

.sysConfigHeight {
  min-height: 263px;
}

.posPreBtn {
  float: left;
  width: 30px;
  height: 15px;
  padding: 2px;
  margin: 2px;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  text-align: center;
}

.brClear {
  clear: both;
}

.tButton {
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorA);
  cursor: pointer;
  width: 200px;
  height: 30px;
  text-align: center;
}

/* Angaben für die Tabellenspalten und -header */

.thCell { 
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  height: 40px;
  text-align: center;
  padding: 2px;
}

.tdCellFilter {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  height: 20px;
  text-align: center;
}

/* Weisser Zellenhintergrund für Bilder (Geräteübersicht u.ä.) */
.WhiteBkgPic {
  background-color: var(--colormap-activeBackground);
  color: var(--colormap-textColorB);
}

/* Weisser Zellenhintergrund (Geräteübersicht u.ä.) */
.WhiteBkg {
  background-color: var(--colormap-activeBackground);
  color: var(--colormap-textColorB);
}

/* Grauer Zellenhintergrund (Geräteübersicht u.ä.) */
.GrayBkg {
  background-color: var(--colormap-activeBackground);
  color: var(--colormap-textColorB);
}

.LightGrayBkg {
  background-color: var(--webui-color-extralightgray); /* #DDD */
  color: var(--colormap-textColorB);
}

.OUCFMprop {
  text-align: left;
  color: var(--colormap-black);
  padding-left: 4px;
}

.OUCFMcenter {
  text-align: center;
  color: var(--colormap-black);
}

#_body {
  background-image: var(--btnGradient);
}

/* Buttons incl. Hilfe-Img. */
.cpButton {
  width: 230px;
}

#id_body {
  display: inherit;
}

#ic_deviceparameters {
  display: contents;
}

#ic_deviceparameters #id_body {
  /* margin-top: 10px; */
  background-color: var(--colormap-background);
}

#ic_deviceparameters .id_firmware_table {
  width: 100%;
}

#ic_deviceparameters .id_firmware_table tr td {
  border: 0 !important;
}

#ic_deviceparameters #DeviceInformation {
  width: 100%;
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
}

#ic_deviceparameters #DeviceInformation thead {
  background-color: var(--colormap-clickable);
  text-align: center;
}

#ic_deviceparameters #DeviceInformation tbody {
  background-color: var(--colormap-activeBackground);
  color: var(--colormap-textColorB);
}

#ic_deviceparameters #DeviceInformation td {
  border: solid 1px var(--colormap-black);
}

#ic_deviceparameters #DeviceInformation #DeviceImage {
  /* background-color: var(--colormap-white); */
  width: 52px;
  height: 56px;
  margin: 0;
  padding: 0;
}

#ic_deviceparameters .parameter_area {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  background-color: var(--colormap-background);
  color: var(--colormap-textColorA);
}

#ic_deviceparameters .parameter_header {
  width: 100%;
  color: var(--colormap-textColorA);
  margin: 2px;
  padding: 2px;
}

#ic_deviceparameters .parameter_header thead tr {
  height: 50px;
}

#ic_deviceparameters .parameter_area .parameters_table {
  width: 100%;
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
}

#ic_deviceparameters .parameter_area .parameters_table thead {

  background-color: var(--colormap-clickable);
  text-align: center;
}

#ic_deviceparameters .parameter_area .parameters_table tbody {

  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
}

#ic_deviceparameters .parameter_area .parameters_table td {
  border: solid 1px var(--colormap-black);
  height: 50px;
}

#ic_deviceparameters .parameter_area .parameters_table .ProfileTbl {
  border: 0;
  height: auto;
  background-color: var(--colormap-white);
}

#ic_deviceparameters .parameter_area .parameters_table .ProfileTbl thead {
  visibility: hidden;
  display: none;
  height: auto;
  background-color: var(--colormap-white);
}

#ic_deviceparameters .parameter_area .parameters_table .ProfileTbl tbody tr td {
  border: 0;
  background-color: var(--colormap-white);
  padding: 2px;
  height: auto;
}

#ic_deviceparameters #Timeouts_Area .TimeoutTable,
#ic_deviceparameters #P1_Timeouts_Area .TimeoutTable,
#ic_deviceparameters #P2_Timeouts_Area .TimeoutTable,
#ic_deviceparameters #P3_Timeouts_Area .TimeoutTable,
#ic_deviceparameters #P4_Timeouts_Area .TimeoutTable,
#ic_deviceparameters #P5_Timeouts_Area .TimeoutTable,
#ic_deviceparameters #P6_Timeouts_Area .TimeoutTable {
  background-color: var(--colormap-white);
  border: 0;
  margin: 6px;
  border-collapse: collapse;
  height: auto;
}

#ic_deviceparameters #Timeouts_Area .TimeoutTable thead td,
#ic_deviceparameters #P1_Timeouts_Area .TimeoutTable thead td,
#ic_deviceparameters #P2_Timeouts_Area .TimeoutTable thead td,
#ic_deviceparameters #P3_Timeouts_Area .TimeoutTable thead td,
#ic_deviceparameters #P4_Timeouts_Area .TimeoutTable thead td,
#ic_deviceparameters #P5_Timeouts_Area .TimeoutTable thead td,
#ic_deviceparameters #P6_Timeouts_Area .TimeoutTable thead td {
  height: auto;
  border: 0;
  background-color: var(--colormap-white);
  text-align: right;
  color: var(--colormap-textColorB);
}

#ic_deviceparameters #Timeouts_Area .TimeoutTable thead td,
#ic_deviceparameters #P1_Timeouts_Area .TimeoutTable thead td,
#ic_deviceparameters #P2_Timeouts_Area .TimeoutTable thead td,
#ic_deviceparameters #P3_Timeouts_Area .TimeoutTable thead td,
#ic_deviceparameters #P4_Timeouts_Area .TimeoutTable thead td,
#ic_deviceparameters #P5_Timeouts_Area .TimeoutTable thead td,
#ic_deviceparameters #P6_Timeouts_Area .TimeoutTable thead td {
  height: auto;
  text-align: center;
  background-color: var(--colormap-white);
  border: 0;
  padding-bottom: 6px;
}

#ic_deviceparameters #Timeouts_Area .TimeoutTable tbody td,
#ic_deviceparameters #P1_Timeouts_Area .TimeoutTable tbody td,
#ic_deviceparameters #P2_Timeouts_Area .TimeoutTable tbody td,
#ic_deviceparameters #P3_Timeouts_Area .TimeoutTable tbody td,
#ic_deviceparameters #P4_Timeouts_Area .TimeoutTable tbody td,
#ic_deviceparameters #P5_Timeouts_Area .TimeoutTable tbody td,
#ic_deviceparameters #P6_Timeouts_Area .TimeoutTable tbody td {
  height: auto;
  padding: 1px 10px;
  background-color: var(--colormap-white);
  border: 0;
}

/*LinkList-Tabelle*/
/*--------------------------------------------*/

#ic_linkpeerlist {
  display: contents;
}

#ic_linkpeerlist #head_wrapper {
  border-bottom: 0;
  margin: 0;
  padding: 0;
}

#ic_linkpeerlist #foot_wrapper {
  border-top: 0;
  margin: 0;
  padding: 0;
}

#ic_linkpeerlist #body_wrapper {
  margin: 0;
  padding: 0;
  display: inherit;
}

#ic_linkpeerlist .LinkListTbl {
  empty-cells: show;
  padding: 0;
  margin: 10px;
  height: auto;
  border: solid 1px var(--colormap-black);
  width: 100%;
}

#ic_linkpeerlist .LinkListTbl td {
  background-color: var(--colormap-activeBackground);
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  height: 50px;  
  text-align: center;
}

#ic_linkpeerlist .LinkListTbl th {
  border: solid 1px var(--colormap-black);
}

#ic_linkpeerlist .LinkListTbl thead th {
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorA);
  font-weight: normal;
  cursor: pointer;
  margin: 0;
}

#ic_linkpeerlist .LinkListTbl thead td {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  margin: 0;
}

#ic_linkpeerlist .LinkListTbl .header_active {
  background-color: var(--colormap-active); /* #565657 */
}

#ic_linkpeerlist .LinkListTbl .LinkListTbl_img {
  background-color: var(--colormap-white);
  text-align: left;
  height: 80px;  
}

/*--------------------------------------------*/
#modalbox #id_messagebox { 
  background-color: var(--colormap-black);
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: 0;
  z-index: 90;
}

#messagebox #id_messagebox {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: auto;
  margin-left: -320px;
  margin-top: -240px;
  z-index: 91;
  background-color: var(--colormap-activeBackground);
  color: var(--colormap-textColorB);
}

#messagebox #id_messagebox  table {
  width: 100%;
  height: 100%;
  color: var(--colormap-textColorB);
  height: auto;
  margin: 5px 0 5px 0;
  border-collapse: collapse;
}

#messagebox #id_messagebox table th {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
}

#messagebox #id_messagebox td {
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-inactiveBackground);
}

 #messagebox #id_messagebox tr {
  vertical-align: middle;
  text-align: center;
}

#messagebox #id_messagebox td.awbtn {
  height: 40px;
  background-color: var(--colormap-activeBackground);
}

#ic_selchannel {
  display: contents;
}

#ic_selchannel #body_wrapper {
  display: inherit;
}

#ic_selchannel #previous_step_wrapper {
  background-color: var(--colormap-background);
  margin: 20px;
}

#ic_selchannel #createLinkStep1 {
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  width: 90%;
}

#ic_selchannel #createLinkStep1 thead {
  background-color: var(--colormap-clickable);
}

#ic_selchannel #createLinkStep1 tbody {
  background-color: var(--colormap-activeBackground);
  color: var(--colormap-textColorB);
}

#ic_selchannel #createLinkStep1 td {
  border: solid 1px var(--colormap-black);
}

#ic_selchannel #createLinkStep1 .BlueHeader {
  background-color: var(--colormap-active); /* #565657 */
}
#ic_selchannel #createLinkStep1 .WhiteHeader {
  background-color: var(--colormap-white);
}
#ic_selchannel #createLinkStep1 .WhiteHeader input {
  width: 99%;

}

#ic_selchannel .ChnListTbl {
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-background);
}

#ic_selchannel .ChnListTbl tr td {
  border: solid 1px var(--colormap-black);
}

#ic_selchannel .ChnListTbl tbody tr td {
  height: 56px;
  border: solid 1px var(--colormap-black);
  text-align: center;
}

#ic_selchannel .ChnListTbl .filterBox {
  visibility: hidden;
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorA);
  position: relative;
  left: 0;
  top: 0;
  padding: 5px;
  text-align: right;
  border: solid 1px var(--colormap-black);
  z-index: 9999;
  width: auto;
}

#ic_selchannel .ChnListTbl .filterBox table td {
  border: 0; 
  padding: 0; 
  margin: 0; 
  height: auto;
  width: auto;
  color: var(--colormap-white);
  background-color: var(--colormap-inactiveBackground);
}

/*Allgemeine Tags*/
/*===============*/

#ic_selchannel .ChnListTbl a {
  color: var(--colormap-textColorA);
}

#ic_selchannel .ChnListTbl img {
  border: 0;
}

/*IDs in der Tabelle*/
/*==================*/

/*Überschriftzeile*/
#ic_selchannel .ChnListTbl .chnListTbl_Caption {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  height: auto;
  padding: 6px;
  text-align: center;
}
/*--------------------------------------------*/

/*Überschriftzeile Sortierfunktion*/
#ic_selchannel .ChnListTbl .sorted {
  background-color: var(--colormap-active); /* #565657 */
  color: var(--colormap-textColorA);
  cursor: pointer;
}

#ic_selchannel .ChnListTbl .unsorted {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  cursor: pointer;
}

#ic_selchannel .ChnListTbl .nosort {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
}

#ic_selchannel .ChnListTbl .unsorted img {
  visibility: hidden;
}
/*--------------------------------------------*/

/*Überschriftzeile Filterfunktion*/
#ic_selchannel .ChnListTbl .filtered {
  background-color: var(--colormap-active); /* #565657 */
  color: var(--colormap-textColorA);
  height: auto;
  cursor: pointer;
}

#ic_selchannel .ChnListTbl .unfiltered {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  height: auto;
  cursor: pointer;
}

#ic_selchannel .ChnListTbl .nofilter {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  height: auto;
}

#ic_selchannel .ChnListTbl .filtered a {
  color: var(--colormap-textColorA);
}

#ic_selchannel .ChnListTbl .filtered a img {
  border: 0;
}

#ic_selchannel .ChnListTbl .unfiltered a img {
  visibility: hidden;
}

/*--------------------------------------------*/

/*Tabellenkörper Virtuelle Tasten*/

/*
#ic_selchannel #body_wrapper {
  background-color: var(--colormap-background);
  margin-top: 10px;
}
*/

#ic_selchannel .ChnListTbl  .virtual_key_hidden {
  visibility: hidden;
  display: none;
  border: solid 1px var(--colormap-black);
}

#ic_selchannel .ChnListTbl .virtual_key_visible {
  border: solid 1px var(--colormap-black);
}
/*--------------------------------------------*/

/*Tabellenkörper Bilderspalte*/
#ic_selchannel .ChnListTbl .chnListTbl_dev_img {
  background-color: var(--colormap-white);
  text-align: left;
  height: 50px;  
}
/*--------------------------------------------*/

/*Tabellenfuß Navibuttons*/
#ic_selchannel .ChnListTbl #chnListFoot tr td {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  height: auto;
}
/*--------------------------------------------*/
#ic_setprofiles .SetProfLinkTbl {
  width: 99%;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
}
#ic_setprofiles .SetProfLinkTbl thead {
  background-color: var(--colormap-clickable);
  text-align: center;
}
#ic_setprofiles .SetProfLinkTbl tbody {
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
}
#ic_setprofiles .SetProfLinkTbl .BlueHeader {
  background-color: var(--colormap-active); /* #565657 */
}
#ic_setprofiles .SetProfLinkTbl .WhiteHeader {
  background-color: var(--colormap-activeBackground);
}
/*
#ic_setprofiles .SetProfLinkTbl .WhiteHeader input {
  width: 95%;
  margin-left: 3px;
}
*/

#ic_setprofiles .SetProfLinkTbl .WhiteHeader span {
  position: absolute;
  padding: 0px;
  margin-left: 5px;
}

#ic_setprofiles .SetProfLinkTbl td {
  border: solid 1px var(--colormap-black);
}

/*Buttons Profilvorlage speichern und testen*/
#ic_setprofiles .SetProfLinkTbl .SetProfLinkTbl_Buttons {
  padding: 0;
  margin: 0;
  border: 0;

  width: 100%;
  color: var(--colormap-textColorA);
}
#ic_setprofiles .SetProfLinkTbl .SetProfLinkTbl_Buttons td {
  border: 0;
}

/*Easy-Mode - Anzeigetafel (Tabelle)*/
#ic_setprofiles .SetProfLinkTbl .ProfileTbl {
  width: auto;
  margin: 0;
  border: 0;
  height: auto;
  vertical-align: top;
  text-align: left;
  background-color: var(--colormap-transparent);/* transparent */
  color: var(--colormap-textColorB);
}
#ic_setprofiles .SetProfLinkTbl .ProfileTbl thead {
  background-color: var(--colormap-transparent);/* transparent */
  text-align: left;
  height: auto;
}
#ic_setprofiles .SetProfLinkTbl .ProfileTbl thead tr {
  height: auto;
}
#ic_setprofiles .SetProfLinkTbl .ProfileTbl tbody {
  background-color: var(--colormap-transparent);/* transparent */
  color: var(--colormap-textColorB);
}
#ic_setprofiles .SetProfLinkTbl .ProfileTbl td {
  border: 0;
}

/*Anzeige-Feld für Expertenprofil und Easy-Mode-Profile*/
/*
#ic_setprofiles .SetProfLinkTbl .easymode_wrapper { }
*/

#ic_setprofiles #body_wrapper {
  background-color: var(--colormap-background);
  margin-top: 10px;
}

#ic_setprofiles  #id_sender_group_receiver_profiles_wrapper {
  margin-top: 10px;
  background-color: var(--colormap-background);
}
#ic_neweasymode #id_body {
  padding: 2px;
  padding-top: 5px;
  border-right: 1px solid var(--colormap-black);
  border-left: 1px solid var(--colormap-black);
  overflow: auto;
  background-color: var(--colormap-white);
  width: 99%;
  height: 100%;
  color: var(--colormap-textColorB);
}

.pname_color {
  color: var(--colormap-windowText);/* windowText */
}

.translated {
  color: var(--colormap-windowText);/* windowText */
}

.track {
  height: 0.5em;
  width: 20em;
  position: relative;
  z-index: 0;
  cursor: pointer;
  background-color: var(--colormap-inactiveBackground);
}

.handle {
  height: 1em;
  width: 1.0em;
  top: -0.25em;
  position: absolute;
  z-index: 1;
  cursor: e-resize;
  background-color: var(--colormap-clickable);
}

.thumbnail {
  position: relative;
  width: 50px;
  height: 50px;
  margin: auto;
}

#canvas {
  display: none;
}

.hidden {
  display: none;
}

.visibilityHidden {
  visibility: hidden;
}

.alignRight {
  text-align: right;
}

.alignLeft {
  text-align: left;
}

.alignCenter {
  text-align: center;
}

.divAlignCenter {
  display: table-cell;
  vertical-align: middle;
}

table.center {
  margin-left: auto;
  margin-right: auto;
}

.borderWidth2Px {
  border-width: 2px !important;
}

.diagramHelpCustomModeLi1 {
  margin-bottom: 10px;
}

.firmwareAvailable {
  cursor: pointer;
  color: var(--colormap-clickable);
}

.virtualChannelBckGnd {
  background-color: var(--webui-color-silver) !important; /* #BCC3C1 */
}

.virtualChannelBckGndA {
  background-color: var(--webui-color-lightgray) !important; /* #E0E0E0 */
}

.noBorder {
  border-style: none !important;
}

.marginAuto {
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.RFConfig_InterfacesTable {
  border: solid 1px var(--colormap-black);
}

.RFConfig_InterfacesTable th {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.RFConfig_InterfacesTable_tr {
  background-color: var(--colormap-activeBackground);
}

.RFConfig_InterfacesTable_tr_hover {
  background-color: var(--colormap-inactiveBackground);
  cursor: pointer;
}

.RFConfig_InterfacesTable td {
  color: var(--colormap-textColorB);
  text-align: center;
  vertical-align: middle;
}

.centerSelect {
   text-align-last: center;
   text-align: center;
   -ms-text-align-last: center;
   -moz-text-align-last: center;
}

.controlHeader {
  text-align: center;
  background-color: var(--colormap-clickable);
  color: var(--colormap-white);
  font-weight: bold;
}

.controlRedBorder {
  border: solid 1px var(--colormap-red) !important;
}

progress[value] {

  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;

  /* Remove the default border in Firefox. */
  border: none;

  /* For IE10 */
  color: var(--webui-color-steelblue); /* #3678c9 */
  width: 75%;
  height: 100%;
}
progress::-moz-progress-bar { background: var(--webui-color-steelblue); }
progress::-webkit-progress-value { background: var(--webui-color-steelblue); }

.Filter {
  margin: 0;
  border: solid 1px var(--colormap-black);
  padding: 0;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorB);
  /* font-weight: bold; */
  text-align: left;
  vertical-align: middle;
  height: 20px !important;
}

.FilterHeight20 {
  height: 20px !important;
}

.Filter_Active {
  margin: 0;
  border: solid 1px var(--colormap-black);
  padding: 0;
  background-color: var(--colormap-active); /* #565657 */
  color: var(--colormap-textColorB);
  /* font-weight: bold; */
  text-align: left;
  vertical-align: middle;  
}

.FilterCaption {
  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient);
  color: var(--colormap-textColorB);
  height: 20px;
  line-height: 20px;
  width: 100%;
  text-align: center;
  cursor: pointer; 
}

.FilterBodyWrapper {
  position: absolute;
  z-index: 500; 
}

.FilterBody {
  position: relative;
  top:-5px;
  left: 5px;
  margin: 0;
  border: solid 1px var(--colormap-black);
  padding: 5px;
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorA);
}

.FilterBodyCell {
  height: 15px;
  border: 0 none;
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorA);
  font-weight: normal;
}

.FilterText {
  width: 96%;
  margin: 3px 2% 3px 2%;
}

.FilterButton {
  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient);
  width: 96%;
  margin: 3px 2% 3px 2%;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

.DialogLayer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(/ise/img/tr50.gif);
}

.LayoutContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0 none;
  overflow: hidden;
}

.DialogContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0 none;
  overflow: hidden;
  background-image: url(/ise/img/tr50.gif);
}

.DialogBoxWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(/ise/img/tr50.gif);
}

.DialogBox {
  position: absolute;
  background-color: var(--colormap-black);
}

.DialogBoxTitle {
  position: absolute;
  background-color: var(--colormap-white);
  text-indent: 5px;
  color: var(--colormap-textColorB);
}

.DialogBoxContent {
  position: absolute;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

.DialogBoxFooter {
  position: absolute;
  background-color: var(--colormap-white);
}

.DialogButton {
  float: left;
  background-color: var(--colormap-black);
}

.DialogButtonCaption {
  text-align: center;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  cursor: pointer;
}
#menubar {
  height: 34px;
  width: 100%;
  border-bottom: solid 5px var(--colormap-navBarSeparator);
  background-color: var(--colormap-background);
  z-index: 189;
  padding: 2px;
}

.MainMenuItem_Left {
  height: 30px;
  cursor: pointer;
  /* border-right: 2px solid var(--colormap-white); */
  background-color: var(--colormap-background);
  float: left;
}

.MainMenuItem_Right {
  height: 30px;
  cursor: pointer;
  /* border-left: 2px solid var(--colormap-white); */
  background-color: var(--colormap-background);
  float: right;
}

.MainMenuItem_Help {
  margin-right: 18px;
}

/*
.MainMenuItem_Highlight {
  background-color: var(--colormap-inactiveBackground);
}
*/

.MainMenuItem_Selected {
  background: var(--colormap-active); /* #565657 */
}

._MainMenuItemCaption {
  background: var(--colormap-mainMenuBackground);
  background-image: var(--btnGradient);
  overflow: auto;
  border: solid 1px var(--colormap-black);
  padding: 5px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  color: var(--colormap-textColorB);
  cursor: pointer;
  margin-left: 5px;
  border-radius: 5px;

  /* behavior: url("PIE.htc"); */
}

.MainMenuItemCaption {
  background-color: var(--colormap-mainMenuBackground);
  background-image: var(--btnGradient);
  border: solid 1px var(--colormap-black);
  padding: 5px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  color: var(--colormap-textColorB);
  cursor: pointer;
  margin-left: 5px;
  border-radius: 5px;

  /* behavior: url("PIE.htc"); */
}

.MainMenuSubMenu {
  position: absolute;
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-subMenuBackground);
  overflow: hidden;
  z-index: 189;
  margin-left: 5px;
}

.MainMenuSubItem {
  background-color: var(--colormap-subMenuBackground);
  font-weight: bold;
  padding: 2px 5px; 
  text-align: left;
  vertical-align: middle;
  color: var(--colormap-textColorB);
  line-height: 20px;
  cursor: pointer;
  white-space: nowrap;
  border-top: 1px solid var(--colormap-black);
}

.MainMenuSubItem_Highlight {
  background-color: var(--colormap-subMenuHighlight);
  /* border: solid 2px var(--colormap-subMenuHighlight); */
}

.MainMenuSubItem > img {
  vertical-align: middle;
  width: 16px;
}

#webuiloader_wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
}

#webuiloader_background {
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -209px;
  margin-top: -55px;
  width: 418px;
  height: 70px;
  background-color: var(--colormap-black);
}

#webuiloader {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 414px;
  height: 66px;
  background-color: var(--colormap-activeBackground);
}

#webuiloader_icon {
  position: absolute;
  top: 15px;
  left: 15px;
}

#webuiloader_caption {
  position: absolute;
  top: 5px;
  left: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: var(--colormap-textColorB);
}

#ChannelChooserWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(/ise/img/tr50.gif);
}

#ChannelChooserDialog {
  position: relative;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 600px;
  margin-left: -500px;
  margin-top: -300px;
  background-color: var(--colormap-black);
}

#ChannelChooserTitle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 996px;
  height: 20px;
  background-color: var(--colormap-white);
  text-indent: 5px;
  color: var(--colormap-textColorB);
  line-height: 20px;
  vertical-align: middle;
  font-weight: bold;
  cursor: pointer;
}

#ChannelChooserContent {
  position: absolute;
  top: 24px;
  left: 2px;
  width: 996px;
  height: 520px;
  background-color: var(--colormap-white);
  overflow: scroll;  
}

#ChannelChooserFooter {
  position: absolute;
  top: 548px;
  left: 2px;
  width: 996px;
  height: 50px;
  background-color: var(--colormap-white);
}

.ChannelChooserButton {
  position: absolute;
  border: solid 1px var(--colormap-black);
  top: 4px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  background-color: var(--colormap-clickable);
  overflow: hidden;
  border-radius: 5px;
}

#ChannelChooserAbortButton {
  left: 4px;
  width: 100px;
}

#ChannelChooserResetFiltersButton {
  left: 791px;
  width: 200px;
}

#ChannelChooserVirtualButton {
  left: 566px;
  width: 220px;
}

#ChannelChooserTable {
  width: 100%;
  height: auto;
  margin: 0;
  border: solid 1px var(--colormap-black);
  padding: 0;
  empty-cells: show;
}

.ChannelChooserHead {
  height: 60px;
  margin: 0;
  border: solid 1px var(--colormap-black);
  padding: 0;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.ChannelChooserHead_Active {
  height: 60px;
  margin: 0;
  border: solid 1px var(--colormap-black);
  padding: 0;
  background-color: var(--colormap-active); /* #565657 */
  color: var(--colormap-textColorA);
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.ChannelChooserRow {
  background-color: var(--colormap-activeBackground);
}

.ChannelChooserRow_Highlight {
  background-color: var(--colormap-inactiveBackground);
  cursor: pointer;
}

.ChannelChooserCell {
  height: 50px;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  text-align: center;
  vertical-align: middle;
}

.ChannelChooserThumbnail {
  border: solid 1px var(--colormap-black);
  /* background-color: var(--colormap-white); */
  text-align: left;
  height: 80px;
}

.ChannelChooserCell_Highlight {
  background-color: var(--colormap-inactiveBackground);
}

#MultiChannelChooserWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(/ise/img/tr50.gif);
}

#MultiChannelChooserDialog {
  position: relative;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 600px;
  margin-left: -500px;
  margin-top: -300px;
  background-color: var(--colormap-black);
}

#MultiChannelChooserTitle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 996px;
  height: 20px;
  background-color: var(--colormap-white);
  text-indent: 5px;
  color: var(--colormap-textColorB);
  line-height: 20px;
  vertical-align: middle;
  font-weight: bold;
  cursor: pointer;
}

#MultiChannelChooserContent {
  position: absolute;
  top: 24px;
  left: 2px;
  width: 996px;
  height: 520px;
  background-color: var(--colormap-white);
  overflow: scroll;  
}

#MultiChannelChooserFooter {
  position: absolute;
  top: 548px;
  left: 2px;
  width: 996px;
  height: 50px;
  background-color: var(--colormap-white);
}

.MultiChannelChooserButton {
  position: absolute;
  border: solid 1px var(--colormap-black);
  border-radius: 5px;
  top: 4px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  background-color: var(--colormap-clickable);
  overflow: hidden;
}

#MultiChannelChooserOkButton {
  left: 109px;
  width: 100px;
}

#MultiChannelChooserAbortButton {
  left: 4px;
  width: 100px;
}

#MultiChannelChooserResetFiltersButton {
  left: 791px;
  width: 200px;
}

#MultiChannelChooserVirtualButton {
  left: 566px;
  width: 220px;
}

#MultiChannelChooserTable {
  width: 100%;
  height: auto;
  margin: 0;
  border: solid 1px var(--colormap-black);
  padding: 0;
  empty-cells: show;
}

.MultiChannelChooserHead {
  height: 60px;
  margin: 0;
  border: solid 1px var(--colormap-black);
  padding: 0;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.MultiChannelChooserHead_Active {
  height: 60px;
  margin: 0;
  border: solid 1px var(--colormap-black);
  padding: 0;
  background-color: var(--colormap-active); /* #565657 */
  color: var(--colormap-textColorA);
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.MultiChannelChooserRow {
  background-color: var(--colormap-activeBackground);
}

.MultiChannelChooserRow_Highlight {
  background-color: var(--colormap-inactiveBackground);
}

.MultiChannelChooserCell {
  height: 50px;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  text-align: center;
  vertical-align: middle;
}

.MultiChannelChooserCell_Active {
  height: 50px;
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  text-align: center;
  vertical-align: middle;
}

.MultiChannelChooserThumbnail {
  border: solid 1px var(--colormap-black);
  /* background-color: var(--colormap-white); */
  text-align: left;
  height: 80px;
}

#DeviceListTable {
  height: auto;
  margin: 1%;
  border: 0 none;
  border: solid 1px var(--colormap-black);
  padding: 0;
  empty-cells: show;
  width: 100%;
}

.DeviceListHead {
  height: 60px;
  margin: 0;
  border: solid 1px var(--colormap-black);
  padding: 0;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.DeviceListHead_Active {
  height: 60px;
  margin: 0;
  border: solid 1px var(--colormap-black);
  padding: 0;
  background-color: var(--colormap-active); /* #565657 */
  color: var(--colormap-textColorA);
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.DeviceListFoot {
  height: 3px;
  margin: 0;
  border: solid 1px var(--colormap-black);
  padding: 0;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  line-height: 3px;
}

.DeviceListRow {
  background-color: var(--colormap-activeBackground);
}

.DeviceListRow_Highlight {
  background-color: var(--colormap-inactiveBackground);
  cursor: pointer;
}

.DeviceListCell {
  height: 50px;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  text-align: center;
  vertical-align: middle;
}

.DeviceListCell_Invisible {
  height: 50px;
  width: 25px;
  border: 0 none;
  background-color: var(--colormap-background);
  cursor: default;
}

.DeviceListCell_Invisible img {
  float: left;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.DeviceListThumbnail {
  border: solid 1px var(--colormap-black);
  /* background-color: var(--colormap-white); */
  text-align: left;
  height: 80px;
}

.DeviceListButton {
  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient);
  margin: 2%;
  border: solid 1px var(--colormap-black);
  width: 95%;
  text-align: center;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
  color: var(--colormap-textColorB);
  font-weight: bold;
  cursor: pointer;
  border-radius: 2px;
}

#ChannelConfigDialogLayer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(/ise/img/tr50.gif);
}

#ChannelConfigDialog {
  position: relative;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 600px;
  margin-left: -400px;
  margin-top: -300px;
  background-color: var(--colormap-black);
}

#ChannelConfigDialogTitle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 796px;
  height: 20px;
  background-color: var(--colormap-white);
  text-indent: 5px;
  color: var(--colormap-textColorB);
  line-height: 20px;
  vertical-align: middle;
  font-weight: bold;
  cursor: pointer;
}

#ChannelConfigDialogContent {
  position: absolute;
  top: 24px;
  left: 2px;
  width: 796px;
  height: 520px;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  overflow: scroll;  
}

#ChannelConfigDialogFooter {
  position: absolute;
  top: 548px;
  left: 2px;
  width: 796px;
  height: 50px;
  background-color: var(--colormap-white);
}

.ChannelConfigDialogButton {
  position: absolute;
  border: solid 1px var(--colormap-black);
  top: 4px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  background-color: var(--colormap-clickable);
  overflow: hidden;
}

#ChannelConfigDialogOkButton {
  left: 691px;
  width: 100px;
}

#ChannelConfigDialogAbortButton {
  left: 4px;
  width: 100px;
}

#ChannelConfigDialogContentLeft {
  position: absolute;
  margin: 5px;
  padding: 5px;
  top: 0;
  left: 0;
  width: 260px;
  overflow: hidden;
}

#ChannelConfigDialogContentMain {
  position: absolute;
  margin: 10px;
  top: 0px;
  left: 280px;
  width: 480px;
}

.ChannelConfigDialogSection {
  margin-bottom: 10px;
  color: var(--colormap-textColorB);
}

.ChannelConfigDialogTable {
  color: var(--colormap-textColorB);
}

#ChannelConfigDialogTestButton {
  width: 120px;
  border: solid 1px var(--colormap-black);
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: var(--colormap-clickable);
  font-weight: bold;
  color: var(--colormap-textColorB);
  cursor: pointer;
}

#ChannelConfigDialogTestResult {
  width: 120px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}

#DeviceConfigDialogLayer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(/ise/img/tr50.gif);
}

#DeviceConfigDialog {
  position: relative;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 470px;
  margin-left: -400px;
  margin-top: -225px;
  background-color: var(--colormap-black);
}

#DeviceConfigDialogTitle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 796px;
  height: 20px;
  background-color: var(--colormap-white);
  text-indent: 5px;
  color: var(--colormap-textColorB);
  line-height: 20px;
  vertical-align: middle;
  font-weight: bold;
  cursor: pointer;
}

#DeviceConfigDialogContent {
  position: absolute;
  top: 24px;
  left: 2px;
  width: 796px;
  height: 391px;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
/*  overflow: scroll;   */
  overflow: hidden;   
}

#DeviceConfigDialogFooter {
  position: absolute;
  top: 418px;
  left: 2px;
  width: 796px;
  height: 50px;
  background-color: var(--colormap-white);
}

.DeviceConfigDialogButton {
  position: absolute;
  border: solid 1px var(--colormap-black);
  top: 4px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  background-color: var(--colormap-clickable);
  overflow: hidden;
}

#DeviceConfigDialogOkButton {
  left: 691px;
  width: 100px;
}

#DeviceConfigDialogAbortButton {
  left: 4px;
  width: 100px;
}

#DeviceConfigDialogContentLeft {
  position: absolute;
  margin: 5px;
  padding: 5px;
  top: 0;
  left: 0;
  width: 260px;
  overflow: hidden;
}

#DeviceConfigDialogContentMain {
  position: absolute;
  margin: 10px;
  top: 0px;
  left: 280px;
  width: 480px;
}

.DeviceConfigDialogSection {
  margin-bottom: 10px;
  color: var(--colormap-textColorB);
}

.DeviceConfigDialogTable {
  color: var(--colormap-textColorB);
}

#_DeviceConfigDialogTestButton {
  width: 120px;
  border: solid 1px var(--colormap-black);
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: var(--colormap-clickable);
  font-weight: bold;
  color: var(--colormap-textColorB);
  cursor: pointer;
}

#DeviceConfigDialogTestResult {
  width: 120px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}

.YesNoDialogLayer,
.YesNoDialogLayerA {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(/ise/img/tr50.gif);
}

.YesNoDialog,
.YesNoDialogA {
  position: relative;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 150px;
  margin-left: -300px;
  margin-top: -125px;
  background-color: var(--colormap-black);
}

.YesNoDialogTitle,
.YesNoDialogTitleA {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 596px;
  height: 20px;
  background-color: var(--colormap-white);
  text-indent: 5px;
  color: var(--colormap-textColorB);
  line-height: 20px;
  vertical-align: middle;
  font-weight: bold;
  cursor: pointer;
}

.YesNoDialogContentWrapper, .YesNoDialogContentWrapperA {
  position: absolute;
  top: 24px;
  left: 2px;
  width: 596px;
  /* height: 70px; */
  height: auto;
  background-color: var(--colormap-white);
  overflow: hidden;  
}

.YesNoDialogContent, .YesNoDialogContentA {
  padding: 5px;
  font-weight: bold;
  color: var(--colormap-textColorB);
}

.YesNoDialogFooter, .YesNoDialogFooterA {
  position: absolute;
  top: 98px;
  left: 2px;
  width: 596px;
  height: 50px;
  background-color: var(--colormap-white);
}

.YesNoDialog_yesButton, .YesNoDialogA_yesButton {
  position: absolute;
  border: solid 1px var(--colormap-black);
  top: 4px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  background-color: var(--colormap-clickable);
  overflow: hidden;
  left: 491px;
  width: 100px;  
}

.YesNoDialog_noButton, .YesNoDialogA_noButton {
  position: absolute;
  border: solid 1px var(--colormap-black);
  top: 4px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  background-color: var(--colormap-clickable);
  overflow: hidden;
  left: 4px;
  width: 100px;
}
.EulaDialogLayer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(/ise/img/tr50.gif);
}

.EulaDialog {
  position: relative;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 150px;
  margin-left: -300px;
  /*margin-top: -125px;*/
  background-color: var(--colormap-black);
}

.EulaDialogTitle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 596px;
  height: 20px;
  background-color: var(--colormap-white);
  text-indent: 5px;
  color: var(--colormap-textColorB);
  line-height: 20px;
  vertical-align: middle;
  font-weight: bold;
  cursor: pointer;
}

.EulaDialogContentWrapper {
  position: absolute;
  top: 24px;
  left: 2px;
  width: 596px;
  /* height: 70px; */
  height: auto;
  background-color: var(--colormap-white);
  overflow: hidden;  
}

.EulaDialogContent {
  padding: 5px;
  font-weight: bold;
  color: var(--colormap-textColorB);
}

.EulaDialogFooter {
  position: absolute;
  top: 98px;
  left: 2px;
  width: 596px;
  height: 80px;
  background-color: var(--colormap-white);
}

.EulaDialog_yesButton {
  position: absolute;
  border: solid 1px var(--colormap-black);
  top: 34px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  background-color: var(--colormap-clickable);
  overflow: hidden;
  left: 4px;
  width: 100px;  
}

.EulaDialog_noButton {
  position: absolute;
  border: solid 1px var(--colormap-black);
  top: 34px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  background-color: var(--colormap-clickable);
  overflow: hidden;
  left: 491px;
  width: 100px;
}

.EulaDialog_checkBox {
  position: absolute;
  left: 4px
}

.bidcosrf_page {
  margin: 20px;
}

.bidcosrf_footer {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 10%;
  width: 80%;
  background-color: var(--colormap-white);
  height: 2px;
  overflow: hidden;
}

.bidcosrf_button {
  padding: 5px;
  border: solid 2px var(--colormap-black);
  text-align: center;
  background-color: var(--colormap-clickable);
   color: var(--colormap-textColorA);
  font-weight: bold;
  cursor: pointer;
}

.bidcosrf_optionbutton {
  float: left;
  margin: 10px 20px 10px 0px;
  width: 100px;
}

.bidcosrf_clear {
  clear: both;
}

.bidcosrf_table {
  border: solid 1px var(--colormap-black);
  border-spacing: 0px;
  width: 95%;
}

.bidcosrf_tableheader {
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
  padding: 5px;
  color: var(--colormap-textColorA);
  font-weight: bold;
}

.bidcosrf_tablecell {
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  empty-cells: show;
  text-align: center;
}

.bidcosrf_imagecell {
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
  empty-cells: show;
  text-align: center;
}

.bidcosrf_actioncell {
  background-color: var(--colormap-activeBackground);
  border: solid 1px var(--colormap-black);
  empty-cells: show;
  text-align: center;
}

.bidcosrf_imagesize {
  width: 50px;
  height: 80px;
}

application {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;    
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.UIDisabled {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--colormap-activeBackground);
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.UIFrame {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--colormap-black);
}

.UIFrameTitle {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  text-indent: 5px;
}

.UIFrameContent {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

.UILabel {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.UIText {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

.UICheckbox {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.UIScrollPane {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.UIScrollPaneContent {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  overflow: scroll;
}

.UIButton {
  position: absolute;
  border: solid 1px var(--colormap-black);
  border-radius: 5px;
  background-color: var(--colormap-clickable);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.UIButtonText {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;
  width: 150px;
  height: 22px;
  overflow: hidden;
  color: var(--colormap-textColorB);
  cursor: pointer;
  line-height: 22px;
  text-align: center;
  font-weight: bold;
}

.UIImage {
  position: absolute;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.UIButtonHighlight {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;
  width: 150px;
  height: 22px;
  overflow: hidden;
  color: var(--colormap-textColorA);
  cursor: pointer;
  line-height: 22px;
  text-align: center;
  font-weight: bold;
}

.UIButtonPressed {
  position: absolute;
  border: 0 none;
  margin: 0;
  padding: 0;
  width: 150px;
  height: 22px;
  overflow: hidden;
  color: var(--colormap-textColorA);
  cursor: pointer;
  line-height: 22px;
  text-align: center;
  font-weight: bold;
}

.UITextEdit {
  position: absolute;
/*  
  border: solid 1px var(--colormap-black);
  margin: 0;
  padding: 0;
*/
  overflow: hidden;
}

.UITextArea {
  position: absolute;
/*  
  border: solid 1px var(--colormap-black);
  margin: 0;
  padding: 0;
*/
  overflow: auto;
}

.UIListbox {
  position: absolute;
/*  
  border: solid 1px var(--colormap-black);
  margin: 0;
  padding: 0;
*/
  overflow: hidden;
}

.UILink {
  color: var(--colormap-link);
  text-decoration: underline;
  cursor: pointer;
}

/* rega\pages\msg\editScript.htm */

.CLASS00001 {
  /* overflow: auto; */
  width: 100%;
  height: 100%;
}

.CLASS00002 {
  border-color: var(--colormap-black);
  background-color: var(--colormap-clickable);
}

.CLASS00003 {
  height: 200px;
  width: 100%;
  min-height: 200px;
  min-width: 800px;
}

.CLASS00004 {
  width: 75%;
  background-color: var(--colormap-activeBackground); /* #dcdcdc */
  text-align: left;
}

.CLASS00005 {
  color: var(--colormap-textColorB);
  margin-right: 20px;
}

.CLASS00006 {
  border: solid 1px var(--colormap-black);
  width: 55px;
  margin-right: 30px;
}

.CLASS00007 {
  color: var(--colormap-textColorB);
  margin-right: 20px;
}

.CLASS00008 {
  border: solid 1px var(--colormap-black);
  width: 55px;
  margin-right: 30px;
}

.CLASS00009 {
  color: var(--colormap-textColorB);
  margin-right: 20px;
}

.CLASS00010 {
  border: solid 1px var(--colormap-black);
  width: 55px;
}

.CLASS00011 {
  width: 25%;
  background-color: var(--colormap-white);
}

.CLASS00012 {
  cursor: pointer;
  text-align: center;
}

.CLASS00013 {
  width: 20%;
  height: 200px;
  background-color: var(--colormap-white);
}

.CLASS00014 {
  height: 200px;
  width: 100%;
  resize: none;
}

.CLASS00015 {
  width: 20%;
  height: 60px;
  background-color: var(--colormap-white);
  text-align: left;
  min-height: 200px;
  min-width: 20%;
}

.CLASS00016 {
  text-align: center;
}

.CLASS00017 {
  text-align: center;
}

.CLASS00018 {
  width: 20%;
  height: 200px;
  background-color: var(--colormap-white);
}

/* rega\pages\msg\statusinfo.htm */

.CLASS00100 {
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
}

.CLASS00101 {
  height: 40px;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  text-align: center;
  border: solid 1px var(--colormap-black);
}

.CLASS00102 {
  height: 160px;
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  text-align: center;
  border: solid 1px var(--colormap-black);
}

.CLASS00103 {
  height: 160px;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  text-align: center;
  border: solid 1px var(--colormap-black);
}

.CLASS00104 {
  width: 20%;
  height: 60px;
  background-color: var(--colormap-white);
  text-align: left;
}

.CLASS00105 {
  text-align: center;
}

.CLASS00106 {
  overflow: auto;
  width: 100%;
  height: 100%;
}

/* rega\pages\msg\delSysVariable.htm */

.CLASS00200 {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS00201 {
  border-color: var(--colormap-black);
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
}

.CLASS00202 {
  text-align: center;
  background-color: var(--colormap-clickable);
  height: 40px;
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
}

.CLASS00203 {
  border: solid 1px var(--colormap-black);
}

.CLASS00204 {
  background-color: var(--colormap-white);
  color: var(--colormap-red);
  text-align: left;
  border: solid 1px var(--colormap-black);
}

.CLASS00205 {
  border: solid 1px var(--colormap-black);
}

.CLASS00206 {
  height: 120px;
  background-color: var(--colormap-activeBackground); /* #dcdcdc */
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
}

.CLASS00207 {
  width: 5%;
  height: 120px;
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
}

.CLASS00208 {
  cursor: pointer;
  width: 120px;
  text-align: center;
}

.CLASS00209 {
  border: solid 1px var(--colormap-black);
  text-align: left;
}

.CLASS00210 {
  width: 20%;
  height: 60px;
  background-color: var(--colormap-white);
  text-align: left;
}

.CLASS00211 {
  text-align: center;
}

/* rega\pages\msg\sysVarsSelection.htm */

.CLASS00300 {
  overflow: scroll;
  width: 100%;
  height: 520px;
  background-color: var(--colormap-white);
}

.CLASS00301 {
  background-color: var(--colormap-black);
}

.CLASS00302 {
  text-align: center;
  background-color: var(--colormap-clickable);
  height: 40px;
}

.CLASS00303 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
}

.CLASS00305 {
  margin: 5px;
}

.CLASS00306 {
  margin-left: 5px;
}

.CLASS00307 {
  text-align: center;
  background-color: var(--colormap-clickable);
  height: 20px;
}

.CLASS00308 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
}

.CLASS00309 {
  text-align: left;
}

.CLASS00310 {
  text-align: center;
  background-color: var(--colormap-clickable);
  height: 20px;
}

.CLASS00311 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
}

.CLASS00312 {
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
}

.CLASS00313 {
  text-align: center;
}

.CLASS00314 {
  line-height: 15px;
  text-align: center
}

/* rega\pages\msg\chnListBody.htm */

.CLASS00400 {
  margin: 0;
  padding: 0;
  position: relative;
  width: 50px;
  height: 50px;
}

/* rega\pages\msg\createScript.htm */

.CLASS00500 {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS00501 {
  border-color: var(--colormap-black);
  background-color: var(--colormap-clickable);
}

.CLASS00502 {
  width: 20%;
  height: 200px;
  background-color: var(--colormap-white);
}

.CLASS00503 {
  width: 75%;
  height: 120px;
  background-color: var(--colormap-activeBackground); /* #dcdcdc */
  text-align: left;
}

.CLASS00504 {
  color: var(--colormap-textColorB);
  margin-right: 20px;
}

.CLASS00505 {
  border: solid 1px var(--colormap-black);
  width: 55px;
  margin-right: 30px;
}

.CLASS00506 {
  border: solid 1px var(--colormap-black);
  width: 55px;
}

.CLASS00507 {
  width: 25%;
  height: 120px;
  background-color: var(--colormap-white);
}

.CLASS00508 {
  text-align: center;
}

.CLASS00509 {
  width: 20%;
  height: 60px;
  background-color: var(--colormap-white);
  text-align: left;
}

.CLASS00510 {
  width: 20%;
  height: 200px;
  background-color: var(--colormap-white);
}

/* rega\pages\msg\insertString.htm */

.CLASS00600 {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS00601 {
  border-color: var(--colormap-black);
  background-color: var(--colormap-clickable);
}

.CLASS00602 {
  text-align: left;
  background-color: var(--colormap-white);
  height: 100px;
  background-color: var(--colormap-activeBackground); /* #dcdcdc */
}

.CLASS00603 {
  margin-left: 5%;
}

.CLASS00604 {
  width: 20%;
  height: 60px;
  background-color: var(--colormap-white);
  text-align: left;
}

.CLASS00605 {
  text-align: center;
}

/* rega\pages\msg\userAccountConfigAdmin.htm */

.CLASS00700 {
  overflow: auto;
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.CLASS00701 {
  background-color: var(--colormap-clickable);
  height: 100%;
  border: solid 1px var(--colormap-black);
}

.CLASS00702 {
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  border-right: solid 1px var(--colormap-black);
}

.CLASS00703 {
  height: 100%;
  width: 100%;
}

.CLASS00704 {
  text-align: left;
}

.CLASS00705 {
  color: var(--colormap-red) !important;
  font-weight: bold;
}

.CLASS00706 {
  background-color: var(--colormap-white);
}

.CLASS00707 {
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  width: 100%;
}

.CLASS00708 {
  width: 100%;
}

.CLASS00709 {
  text-align: right;
}

.CLASS00711 {
  text-align: center;
}

.CLASS00712 {
  width: 200px;
  font-weight: normal;
}

.CLASS00713 {
  background-color: var(--colormap-background);
  width: 100%;
}

.CLASS00714 {
  border-top: solid 5px var(--colormap-white);
  width: 100%;
}

.CLASS00715 {
  text-align: left;
  color: var(--colormap-textColorA) !important;
  font-weight: bold;
}

.CLASS00716 {
  text-align: center;
  width: 200px;
  font-weight: normal;
}

.CLASS00717 {
  height: 200px;
  overflow: scroll;
  background-color: var(--colormap-white);
}

.CLASS00718 {
  width: 20%;
  height: 60px;
  background-color: var(--colormap-white);
  text-align: left;
  border: solid 1px var(--colormap-black);
}

.CLASS00719 {
  margin-left: 5px;
  text-align: center;
}

/* rega\pages\msg\setValueRange.htm */

.CLASS00800 {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS00801 {
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-white);
  text-align: left;
  empty-cells: show;
}

.CLASS00802 {
  background-color: var(--colormap-white);
  height: 200px;
  vertical-align: top;
}

.CLASS00803 {
  color: var(--colormap-textColorB);
  text-align: left;
  font-size: larger;
}

.CLASS00804 {
  color: var(--colormap-textColorB);
}

.CLASS00805 {
  width: 55px;
  margin-left: 15px;
}

.CLASS00806 {
  width: 55px;
}

.CLASS00807 {
  color: var(--colormap-textColorB);
  margin-left: 20px;
}

.CLASS00808 {
  width: 20%;
  height: 60px;
  background-color: var(--colormap-white);
  text-align: left;
}

.CLASS00809 {
  text-align: center;
}

/* rega\pages\msg\userAccountConfigUser.htm */

.CLASS00900 {
  overflow: auto;
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.CLASS00901 {
  background-color: var(--colormap-clickable);
  height: 100%;
  border: solid 1px var(--colormap-black);
}

.CLASS00902 {
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

.CLASS00903 {
  border-right: solid 1px var(--colormap-black);
}

.CLASS00904 {
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

.CLASS00905 {
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  text-align: left;
}

.CLASS00906 {
  text-align: left;
}

.CLASS00907 {
  text-align: right;
}

.CLASS00908 {
  background-color: var(--colormap-white);
  color: var(--colormap-red);
}

.CLASS00909 {
  height: 100%;
  border-left: solid 1px var(--colormap-black);
}

.CLASS00910 {
  text-align: right;
  line-height: 15px;
  font-weight: normal;
}

.CLASS00911 {
  background-color: var(--colormap-black); /* #003366 */
  width: 100%;
}

.CLASS00912 {
  border-top: solid 5px var(--colormap-white);
}

.CLASS00913 {
  border: solid 1px var(--colormap-black);
  height: 100%;
}

.CLASS00914 {
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  text-align: center;
}

.CLASS00915 {
  background-color: var(--colormap-gray); /* #999999 */
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  cursor: pointer;
}

.CLASS00916 {
  width: 20%;
  height: 60px;
  background-color: var(--colormap-white);
  text-align: left;
  border: solid 1px var(--colormap-black);
}

.CLASS00917 {
  text-align: center;
}

/* rega\pages\msg\channelList.htm */

.CLASS01000 {
  background-color: var(--colormap-black);
  overflow: auto;
  width: 100%;
  height: 700px;
}

.CLASS01002 {
  width: 100%;
  empty-cells: show;
  font-size: small;
}

.CLASS01003 {
  background-color: var(--colormap-clickable);
  height: 40px;
}

.CLASS01004 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
}

.CLASS01005 {
  height: 100%;
  width: 100%;
}

.CLASS01006 {
  margin: 5px;
}

.CLASS01007 {
  margin-left: 5px;
}

.CLASS01008 {
  background-color: var(--colormap-clickable);
}

.CLASS01009 {
  padding-left: 2px;
}

.CLASS01010 {
  height: 15px;
  border: none;
}

.CLASS01011 {
  text-align: left;
  height: 15px;
  border: none;
}

.CLASS01012 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  height: 20px;
  empty-cells: show;
  text-align: center;
}

.CLASS01013 {
  width: 60%;
  empty-cells: show;
}

.CLASS01014 {
  line-height: 15px;
  font-size: smaller;
}

/* rega\pages\msg\popupTransEditor.htm */

.CLASS01100 {
  background-color: var(--colormap-white);
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS01101 {
  border: solid 1px var(--colormap-black);
}

.CLASS01102 {
  border: solid 1px var(--colormap-black);
  height: 40px;
}

.CLASS01103 {
  border: solid 1px var(--colormap-black);
  height: 50px;
}

.CLASS01104 {
  padding: 10px;
}

.CLASS01105 {
  border: solid 1px var(--colormap-black);
}

.CLASS01106 {
  text-align: left;
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-white);
}

.CLASS01107 {
  margin: 0;
  padding: 0;
  position: relative;
  width: 50px;
  height: 50px;
}

.CLASS01108 {
  text-align: left;
  background-color: var(--colormap-white);
  width: 50px;
  border: solid 1px var(--colormap-black);
}

.CLASS01109 {
  width: 100%;
  text-align: left;
  padding-left: 6px;
}

.CLASS01110 {
  width: 100px;
  margin: 5px;
}

/* rega\pages\msg\insertValue.htm */

.CLASS01200 {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS01201 {
  border-color: var(--colormap-black);
  background-color: var(--colormap-white);
}

.CLASS01202 {
  text-align: left;
  width: 20%;
  height: 100px;
  background-color: var(--colormap-white);
}

.CLASS01203 {
  margin-left: 5%;
}

.CLASS01204 {
  text-align: left;
  width: 80%;
  height: 100px;
  background-color: var(--colormap-white);
}

.CLASS01205 {
  width: 75%;
}

.CLASS01206 {
  color: var(--colormap-textColorB);
  margin-left: 20px;
}

.CLASS01207 {
  margin-left: 20px;
}

.CLASS01208 {
  width: 16px;
  height: 10px;
  border: solid 1px var(--colormap-black);
  cursor: pointer;
}

.CLASS01209 {
  color: var(--colormap-textColorB);
}

.CLASS01210 {
  width: 20%;
  height: 60px;
  background-color: var(--colormap-white);
  padding: 5px;
}

.CLASS01211 {
  text-align: center;
}

.CLASS01212 {
  width: 100%;
}

.CLASS01213 {
  margin-left: 2px;
}

.CLASS01214 {
  margin-left:-2px;
}

.CLASS01215 {
  text-decoration: underline;
  font-weight: bold;
  color: var(--colormap-textColorB);
  cursor: pointer;
}

.CLASS01217 {
  background-color: var(--colormap-clickable);
  cursor: pointer;
  border: solid 1px var(--colormap-black);
  margin-left: 20px;
  color: var(--colormap-textColorB);
  width: 120px;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  text-align: center;
}

/* rega\pages\msg\programChooser.htm */

.CLASS01300 {
  overflow: scroll;
  width: 100%;
  height: 400px;
  background-color: var(--colormap-white);
}

.CLASS01301 {
  border: solid 1px var(--colormap-black);
  empty-cells: show;
  background-color: var(--colormap-black);
}

.CLASS01302 {
  text-align: center;
  background-color: var(--colormap-clickable);
  height: 40px;
}

.CLASS01303 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
}

.CLASS01304 {
  height: 100%;
  width: 100%;
}

.CLASS01306 {
  margin: 5px;
}

.CLASS01307 {
  margin-left: 5px;
}

.CLASS01308 {
  text-align: center;
  background-color: var(--colormap-clickable);
  height: 20px;
}

.CLASS01309 {
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
  empty-cells: show;
}

.CLASS01310 {
  width: 20%;
  height: 60px;
  background-color: var(--colormap-white);
  text-align: left;
}

.CLASS01311 {
  text-align: center;
}

.CLASS01312 {
  line-height: 15px;
  font-size: smaller;
  text-align: center;
}

/* rega\pages\msg\autoLoginConfig.htm */

.CLASS01400 {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS01401 {
  font-size: small;
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
}

.CLASS01402 {
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
}

.CLASS01403 {
  background-color: var(--colormap-inactiveBackground);
  border: solid 1px var(--colormap-black);
  text-align: left;
  padding: 3px;
}

.CLASS01404 {
  color: var(--colormap-red) !important;
}

.CLASS01405 {
  color: var(--colormap-textColorB);
}

.CLASS01406 {
  height: 60px;
  background-color: var(--colormap-white);
  text-align: left;
  border: solid 1px var(--colormap-black);
}

.CLASS01407 {
  cursor: pointer;
  margin-left: 1%;
}

.CLASS01408 {
  cursor: pointer;
}

/* rega\pages\msg\popupPropEditor.htm */

.CLASS01501 {
  width: 100%;
}

/* rega\pages\msg\statusinfoWarning.htm */

.CLASS01600 {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS01601 {
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
}

.CLASS01602 {
  height: 40px;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  text-align: center;
  border: solid 1px var(--colormap-black);
}

.CLASS01603 {
  height: 160px;
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  text-align: center;
  border: solid 1px var(--colormap-black);
}

.CLASS01604 {
  height: 160px;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
  text-align: center;
  border: solid 1px var(--colormap-black);
}

.CLASS01605 {
  width: 20%;
  height: 60px;
  background-color: var(--colormap-white);
  text-align: left;
}

.CLASS01606 {
  text-align: center;
}

/* rega\pages\msg\controls.htm */

.CLASS01700 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
  width: 100%;
  height: 500px;
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
}

.CLASS01701 {
  width: 100%;
  background-color: var(--colormap-white);
}

.CLASS01702 {
  margin-left: 10px;
  cursor: pointer;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  width: 100px;
  height: 20px;
}

/* rega\pages\tabs\startpage.htm */

.CLASS01800 {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.CLASS01801 {
  margin: 4px;
}

.CLASS01802 {
  float: left;
  top: 0px;
  left: 0px;
  width: 50%;
  height: 100%;
  overflow: auto;
}

.CLASS01803 {
  background-color: var(--colormap-white);
  text-align: center;
  margin-left: 4px;
  margin-right: 4px;
}

.CLASS01804 {
  margin-bottom: 20px;
  /* background-color: var(--colormap-inactiveBackground); */
  color: var(--colormap-textColorB);
  /* height: 96%; */
  /* overflow: auto; */
  margin-right: 4px;
  margin-left: 4px;
  margin-bottom: 1px;
}

.CLASS01805 {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
}

.CLASS01806 {
  border: solid 1px var(--colormap-black);
  width: 100%;
}

.CLASS01807 {
  background-color: var(--colormap-clickable);
  width: 580px;
  height: 30px;
  border: solid 1px var(--colormap-black);
  text-align: center;
}

.CLASS01808 {
  background-color: var(--colormap-clickable);
  width: 580px;
  height: 5px;
  border: solid 1px var(--colormap-black);
}

.CLASS01809 {
  float: left;
  top: 0px;
  width: 49%;
  height: 100%;
  overflow: hidden;
}

.CLASS01810 {
  height: 50%;
}

.CLASS01811 {
  padding-top: 5px;
  color: var(--colormap-textColorB);
}

.CLASS01812 {
  background-color: var(--colormap-activeBackground);
  width: 580px;
  /*height: 120px;*/
  height: auto;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
}

/* rega\esp\functions.fn */

.CLASS01900 {
  cursor: pointer;
  border: Solid 1px var(--colormap-black);
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
}

/* rega\esp\rooms.fn */

.CLASS02000 {
  cursor: pointer;
  border: Solid 1px var(--colormap-black);
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
}

/* rega\esp\system.fn */

.CLASS02100 {
  color: var(--colormap-textColorB);
  width: 100%;
  border: none;
  background-color: var(--colormap-inactiveBackground);
}

.CLASS02101 {
  color: var(--colormap-textColorB);
  width: 100%;
  border: none;
  background-color: var(--colormap-activeBackground);
}

.CLASS02102 {
  height: 100px;
  width: 100px;
}

.CLASS02103 {
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
}

.CLASS02104 {
  cursor: pointer;
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.CLASS02105 {
  text-align: center;
  background-color: var(--colormap-black);
  table-layout: fixed;
  word-wrap: break-word;
}

.CLASS02106 {
  height: 40px;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
}

.CLASS02107 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
}

.CLASS02108 {
  text-align: center;
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-clickable);
  cursor: pointer;
}

.CLASS02109 {
  height: 30px;
}

.CLASS02110 {
  text-align: left;
  padding-left: 5px;
}

/* rega\esp\sico.inc */

.CLASS02201 {
  text-decoration: underline;
  cursor: pointer;
}

/* rega\esp\rule.inc */

.CLASS02300 {
  font-weight: bold;
}

.CLASS02301 {
  cursor: pointer;
}

/* rega\esp\side.inc */

.CLASS02400 {
  text-decoration: underline;
  cursor: pointer;
}

.CLASS02401 {
  cursor: pointer;
}

.CLASS02402 {
  text-decoration: underline;
  color: var(--colormap-textColorB);
  font-weight: bold;
  cursor: pointer;
}

/* rega\esp\datapointconfigurator.fn */

.CLASS02500 {
  border: solid 1px var(--colormap-black);
}

.CLASS02501 {
  background-color: var(--colormap-clickable);
  padding: 4px;
  border: solid 1px var(--colormap-black);
  text-align: center;
  vertical-align: middle;
}

.CLASS02502 {
  width: 520px;
  overflow: hidden;
}

.CLASS02503 {
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
}

.CLASS02504 {
  width: 520px;
  height: 5px;
  overflow: hidden;
}

.CLASS02505 {
  background-color: var(--colormap-activeBackground);
  width: 520px;
  height: 120px;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
}

.CLASS02506 {
  background-color: var(--colormap-clickable);
  height: 5px;
  border: solid 1px var(--colormap-black);
}

.CLASS02507 {
  background-color: var(--colormap-activeBackground);
  padding: 4px;
  color: var(--colormap-textColorB);
  height: 30px;
  border: solid 1px var(--colormap-black);
  text-align: center;
  overflow: auto;
}

.CLASS02508 {
  background-color: var(--colormap-activeBackground);
  width: 100%;
  /*max-width: 502px;*/
  /*height: 120px;*/
  height: auto;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  overflow: auto;
}

.CLASS02509 {
  width: 120px;
  overflow: hidden;
}

.CLASS02510 {
  color: var(--colormap-textColorB);
  width: 100%;
  border: none;
  background-color: inherit;
}

.CLASS02511 {
  height: 96px;
  width: 96px;
}

.CLASS02512 {
  font-size: smaller;
}

.CLASS02513 {
  width: 96px;
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
}

.CLASS02514 {
  border: Solid 1px var(--colormap-black);
  height: 96px;
  width: 96px;
  cursor: initial;
}

.CLASS02515 {
  width: 96px;
}

.CLASS02516 {
  cursor: pointer;
  line-height: 20px;
  width: 50px;
  height: 20px;
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  font-size: 7pt;
  font-style: italic;
}

.CLASS02517 {
  cursor: pointer;
  line-height: 20px;
  width: 50px;
  height: 20px;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  font-size: 7pt;
  font-style: italic;
}

.CLASS02518 {
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
}

.CLASS02519 {
  text-align: left;
  background-color: var(--colormap-activeBackground) !important;
}

.CLASS02520 {
  color: var(--colormap-textColorB);
  /* width: 100%; */
  border: none;
  background-color: var(--colormap-activeBackground);
}

.CLASS02521 {
  width: 96px;
  text-align: left;
  border: none;
}

.CLASS02522 {
  cursor: pointer;
  line-height: 100px;
  height: 96px;
  width: 96px;
}

.CLASS02522a {
  cursor: pointer;
  line-height: 20px;
  height: 40px;
  width: 205px;
}

.CLASS02523 {
  border: none;
}

.CLASS02524 {
  border: none;
  width: 75%;
}

.CLASS02525 {
  height: 96px;
  width: 96px;
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
}

.CLASS02525b {
  height: 96px;
  width: 96px;
  background-color: var(--colormap-okSignal);
  border: solid 1px var(--colormap-black);
}

.CLASS02525c {
  background-color: var(--colormap-okSignal);
  border: solid 1px var(--colormap-black);
}

.CLASS02526 {
  color: var(--colormap-textColorB);
}

.CLASS02527 {
  color: var(--colormap-textColorA);
}

.CLASS02528 {
  border: none;
  width: 50%;
}

.CLASS02529 {
/*  position: relative; */
  text-align: left !important;
  border: none !important;
}

.CLASS02530 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorB);
}

.CLASS02531 {
  color: var(--colormap-textColorB);
  text-align: center;
}

.CLASS02532 {
  width: 220px;
  /*height: 25px;*/
  height: auto;
  min-height: 32px;
  clear: both;
  display: inline-block;
  /* line-height: 25px; problem with controls with a long parameter name */
}

.CLASS02532a {
  width: 220px;
  height: 25px;
  color: var(--colormap-white) !important;
}

.CLASS02532b {
  width: 220px;
  height: 30px;
  color: var(--colormap-white) !important;
}

.CLASS02532c {
  font-size: 10px;
  width: 220px;
  /*height: 25px;*/
  height: auto;
  min-height: 32px;
  clear: both;
  display: inline-block;
  line-height: 25px;
}

.CLASS02533 {
  white-space: nowrap;
}

.CLASS02534 {
  float: left;
  text-align: left;
}

.CLASS02535 {
  text-align: right;
  width: 100%;
  word-wrap: break-word;
  display: inline-block;
  padding: 2px;
}

.CLASS02535A {
  float: right; /* inline-block is ignored due to the float */
  text-align: right;
  word-wrap: break-word;
  max-width: 480px;
  display: inline-block;
  white-space: break-spaces;
}

.CLASS02535B {
  text-align: center;
  word-wrap: break-word;
  max-width: 480px;
  display: inline-block;
  padding-right: 5px;
}

.CLASS02536 {
  border: none;
}

.CLASS02537 {
  text-align: center;
  width: 100%;
}

.CLASS02538 {
  height: 100%;
  min-height: 1em;
  clear: both;
}

.CLASS02539 {
  background-color: var(--colormap-inactiveBackground) !important;
}

.CLASS02539a {
  background-color: var(--colormap-white) !important;
}

.CLASS02540 {
  text-align: center;
  /*width: 100%;*/
  width: 220px;
  border: 0px;
}

.CLASS02541 {
  background-color: var(--colormap-clickable); /* #565657 */
  color: var(--colormap-textColorB);
}

.CLASS02542 {
  border: solid 1px var(--colormap-black);
  text-align: right;
}

.CLASS02542b {
  border: solid 1px var(--colormap-black);
  text-align: right;
}

.CLASS02543 {
  border: solid 1px var(--colormap-black);
}

.CLASS02544 {
  background-color: var(--colormap-clickable); /* #565657 */
}

.CLASS02545 {
  cursor: pointer;
  line-height: 35px;
  height: 35px;
  width: 80px;
}

.CLASS02546 {
  color: var(--colormap-textColorB);
}

.CLASS02547 {
  width: 100px;
}

.CLASS02548 {
  background-color: var(--colormap-clickable);
}

.CLASS02549 {
  text-align: left;
}

.CLASS02550 {
  cursor: pointer;
  line-height: 35px;
  height: 35px;
  width: 80px;
}

.CLASS02550a {
  cursor: pointer;
  line-height: 35px;
  height: 35px;
  width: 150px;
}

.CLASS02550b {
  cursor: pointer;
  line-height: 35px;
  height: 35px;
  width: 50px;
}

.CLASS02550c {
  cursor: pointer;
  line-height: 35px;
  height: 35px;
  width: 100%;
}

.CLASS02551 {
  cursor: pointer;
  height: 35px;
  width: 80px;
}

.CLASS02551a {
  cursor: pointer;
  height: 35px;
  width: 150px;
}

.CLASS02551b {
  cursor: pointer;
  height: 35px;
  width: 98%;
}

.CLASS02552 {
  border: solid 1px var(--colormap-black);
  mix-blend-mode: multiply;
}

.CLASS02553 {
  height: 100%;
}

.CLASS02554 {
  cursor: pointer;
  height: 35px;
  width: 96px;
}

.CLASS02555 {
  font-size: smaller;
  font-weight: normal;
}

.CLASS02556 {
  border-top: 1px solid var(--colormap-black);
  border-right: 1px solid var(--colormap-black);
  font-size: small;
  font-weight: normal;
  height: 35px;
  width: 96px;
}

.CLASS02557 {
  height: 96px;
  width: 96px;
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
}

.CLASS02558 {
  height: 96px;
  width: 96px;
  background-color: var(--webui-color-firebrick); /* #c70022 */
  border: solid 1px var(--colormap-black);
}

.CLASS02558b {
  background-color: var(--webui-color-firebrick); /* #c70022 */
  border: solid 1px var(--colormap-black);
}

/* rega\pages\tabs\statusviews\serviceMessages.htm */

.CLASS02600 {
  margin-left: 15px;
  margin-top: 10px;
}

.CLASS02601 {
  text-align: center;
  margin-left: 20px;
  width: 97%;
}

.CLASS02602 {
  height: auto;
}

.CLASS02603 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
color: var(--colormap-textColorA) !important;
  border: solid 1px var(--colormap-black);
}

.CLASS02604 {
  height: 58px;
}

.CLASS02605 {
  width: 100px;
  background-color: var(--colormap-activeBackground);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  padding: 4px;
  text-align: left;
}

.CLASS02606 {
  width: 240px;
  background-color: var(--colormap-activeBackground);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  padding: 4px;
}

.CLASS02609 {
  width: 140px;
  background-color: var(--colormap-activeBackground);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  padding: 4px;
}

.CLASS02610 {
  width: 100px;
  background-color: var(--colormap-activeBackground);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  padding: 4px;
}

.CLASS02611 {
  width: 200px;
  background-color: var(--colormap-activeBackground);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  padding: 4px;
}

.CLASS02612 {
  background-color: var(--colormap-activeBackground);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  padding: 4px;
}

.CLASS02613 {
  background-color: var(--colormap-clickable);
color: var(--colormap-textColorA);
  font-weight: bold;
  border: solid 1px var(--colormap-black);
}

.CLASS02614 {
  background-color: var(--colormap-inactiveButton); /* #dddddd */
  color: var(--webui-color-lightgray);
  font-weight: bold;
  border: solid 1px var(--colormap-gray); /* silver */
}

.CLASS02615 {
  line-height: 14px;
  font-size: smaller;
}

.CLASS02616 {
  margin: 5px;
}

.CLASS02617 {
  margin-left: 5px;
}

.CLASS02618 {
  padding-left: 2px;
}

.CLASS02619 {
  height: 15px;
}

/* rega\pages\tabs\statusviews\channels.htm */

.CLASS02700 {
  border: solid 1px var(--colormap-black);
  margin-left: 20px
  ;margin-top: 20px;
}

.CLASS02701 {
  height: 100%;
  width: 100%;
}

.CLASS02702 {
  padding-left: 2px;
}

.CLASS02703 {
  height: 15px;
}

.CLASS02704 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA) !important;
}

.CLASS02705 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
}

.CLASS02706 {
  line-height: 15px;
  font-size: smaller;
}

.CLASS02707 {
  padding-top: 11px;
  height: 100%;
  width: 100%;
}

.CLASS02708 {
  margin: 5px;
}

.CLASS02709 {
  margin-left: 5px;
}

/* rega\pages\tabs\statusviews\alarmMessages.htm */

.CLASS02800 {
  margin-left: 15px;
  margin-top: 10px;
}

.CLASS02801 {
  text-align: center;
  margin-left: 20px;
  width: 80%;
  border: solid 1px var(--colormap-black);
}

.CLASS02802 {
  text-align: center;
  vertical-align: middle;
  border: solid 1px var(--colormap-black);
  font-weight: bold;
  height: auto;
}

.CLASS02803 {
  font-weight: bold;
  height: auto;
}

.CLASS02804 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
color: var(--colormap-textColorA) !important;
  border: solid 1px var(--colormap-black);
}

.CLASS02805 {
  text-decoration: underline;
  font-weight: bold;
  color: var(--colormap-textColorB);
}

.CLASS02806 {
  background-color: var(--colormap-activeBackground);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  padding: 4px;
  text-align: left;
}

.CLASS02807 {
  background-color: var(--colormap-activeBackground);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  padding: 4px;
}

.CLASS02808 {
  font-weight: bold;
  text-decoration: underline;
}

.CLASS02809 {
  cursor: pointer;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorB);
  font-weight: bold;
  border: solid 1px var(--colormap-black);
}

.CLASS02810 {
  line-height: 14px;
  font-size: smaller;
}

.CLASS02811 {
  margin: 5px;
}

.CLASS02812 {
  margin-left: 5px;
}

.CLASS02813 {
  padding-left: 2px;
}

.CLASS02814 {
  height: 15px;
}

.CLASS02815 {
  height: 100%;
}

/* rega\pages\tabs\statusviews\svroomchannels.htm */

.CLASS02900 {
  border: solid 1px var(--colormap-black);
  margin-left: 50px;
  margin-top: 27px;
}

.CLASS02901 {
  padding-top: 11px;
  height: 100%;
  width: 100%;
}

.CLASS02902 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA) !important;
}

.CLASS02903 {
  height: 100%;
  width: 100%;
}

.CLASS02904 {
  padding-left: 2px;
}

.CLASS02905 {
  height: 15px;
}

.CLASS02906 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
}

.CLASS02907 {
  border: none !important;
}

.CLASS02908 {
  margin: 5px;
}

.CLASS02909 {
  margin-left: 5px;
}

/* rega\pages\tabs\statusviews\systemProtocol.htm */

.CLASS03000 {
  height: 44px;
}

.CLASS03001 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
color: var(--colormap-textColorA) !important;
}

.CLASS03002 {
  margin: 5px;
}

.CLASS03003 {
  margin-left: 5px;
}

.CLASS03004 {
/* line-height: 15px; */
  font-size: smaller;
}

.CLASS03005 {
  text-decoration: none;
}

.CLASS03006 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
}

/* rega\pages\tabs\statusviews\programs.htm */

.CLASS03100 {
  width: 1px;
  height: 1px;
  line-height: 0px;
}

.CLASS03101 {
  empty-cells: show;
}

.CLASS03102 {
  height: 40px;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorA);
  font-weight: bold;
  text-align: center;
}

.CLASS03103 {
  color: var(--colormap-textColorA);
  font-weight: bold;
  text-align: center;
}

.CLASS03104 {
  height: 20px;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
}

.CLASS03105 {
  height: 40px;
}

.CLASS03106 {
  line-height: 15px;
  font-size: smaller
}

.CLASS03107 {
  margin: 5px;
}

.CLASS03108 {
  margin-left: 5px;
}

/* rega\pages\tabs\statusviews\svfuncchannels.htm */

.CLASS03200 {
  border: solid 1px var(--colormap-black);
  margin-left: 50px;
  margin-top: 27px;
}

.CLASS03201 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA) !important;
}

.CLASS03202 {
  padding-left: 2px;
}

.CLASS03203 {
  height: 15px;
}

.CLASS03204 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
}

.CLASS03205 {
  border: none !important;
}

.CLASS03206 {
  margin: 5px;
}

.CLASS03207 {
  margin-left: 5px;
}

/* rega\pages\tabs\statusviews\sysvars.htm */

.CLASS03300 {
  width: 1px;
  height: 1px;
  line-height: 0px;
}

.CLASS03301 {
  empty-cells: show;
}

.CLASS03302 {
  font-weight: bold;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: solid 1px var(--colormap-black);
}

.CLASS03303 {
color: var(--colormap-textColorA);
  font-weight: bold;
  height: 40px;
  text-align: center;
}

.CLASS03304 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA) !important;
  border: solid 1px var(--colormap-black);
}

.CLASS03305 {
  height: 40px;
}

.CLASS03306 {
  line-height: 15px;
}

.CLASS03307 {
  margin: 5px;
}

.CLASS03308 {
  margin-left: 5px;
}

/* rega\pages\tabs\statusviews\rooms.htm */
/* rega\pages\tabs\statusviews\functions.htm */

.CLASS03400 {
  height: 100%;
  overflow: hidden;
}

.CLASS03401 {
  width: 100%;
}

.CLASS03402 {
  width: 100%;
  overflow: auto;
}

.CLASS03403 {
  width: 80%;
  height: 96%;
}

.CLASS03404 {
  height: 50%;
  border: solid 1px var(--colormap-black);
}

.CLASS03405 {
  line-height: 15px;
  font-size: smaller;
}

.CLASS03406 {
  border: solid 1px var(--colormap-black);
  margin-top: 27px;
}

.CLASS03407 {
  cursor: pointer;
}

/* rega\pages\tabs\handling\hdevichannels.htm */

.CLASS03500 {
  border: solid 1px var(--colormap-black);
  width: 100%;
}

.CLASS03501 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA) !important;
}

.CLASS03502 {
  border: none !important;
}

.CLASS03503 {
  margin: 5px;
}

.CLASS03504 {
  margin-left: 5px;
}

.CLASS03505 {
  padding-left: 2px;
}

.CLASS03506 {
  height: 15px;
}

/* rega\pages\tabs\handling\hroomchannels.htm */

.CLASS03600 {
  border: solid 1px var(--colormap-black);
  width: 100%;
}

.CLASS03601 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA) !important;
}

.CLASS03602 {
  border: none !important;
}

.CLASS03603 {
  margin: 5px;
}

.CLASS03604 {
  margin-left: 5px;
}

.CLASS03605 {
  padding-left: 2px;
}

.CLASS03606 {
  height: 15px;
}

/* rega\pages\tabs\handling\programs.htm */

.CLASS03700 {
  width: 1px;
  height: 1px;
  line-height: 0px;
}

.CLASS03701 {
  empty-cells: show;
}

.CLASS03702 {
  height: 40px;
}

.CLASS03703 {
  line-height: 15px;
}

.CLASS03704 {
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorA);
  font-weight: bold;
  height: 100%;
  text-align: center;
}

.CLASS03705 {
  color: var(--colormap-textColorA);
  font-weight: bold;
  height: 40px;
  text-align: center;
}

.CLASS03706 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA) !important;
  border: solid 1px var(--colormap-black);
}

.CLASS03707 {
  height: 100%;
  width: 100%;
}

.CLASS03708 {
  margin: 5px;
}

.CLASS03709 {
  margin-left: 5px;
}

/* rega\pages\tabs\handling\hfuncchannels.htm */

.CLASS03800 {
  border: solid 1px var(--colormap-black);
  width: 100%;
}

.CLASS03801 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA) !important;
}

.CLASS03802 {
  border: none !important;
}

.CLASS03803 {
  margin: 5px;
}

.CLASS03804 {
  margin-left: 5px;
}

.CLASS03805 {
  padding-left: 2px;
}

.CLASS03806 {
  height: 15px;
}

/* rega\pages\tabs\handling\devices.htm */

.CLASS03900 {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.CLASS03901 {
  width: 100%;
}

.CLASS03902 {
  overflow: auto;
  margin: 10px;
  margin-right:2px;
}

.CLASS03903 {
  border: solid 1px var(--colormap-black);
}

.CLASS03904 {
  vertical-align: top;
}

.CLASS03905 {
  vertical-align: middle;
  cursor: pointer;
}

.CLASS03906 {
  vertical-align: middle;
  text-align: left;
}

.CLASS03907 {
  position: relative;
  width: 50px;
  height: 50px;
}

.CLASS03908 {
  overflow: auto;
  margin: 10px;
  margin-left: 2px;
}

.CLASS03909 {
  width: 80%;
  height: 96%;
}

.CLASS03910 {
  height: 50%;
  border: solid 1px var(--colormap-black);
}

.CLASS03911 {
  line-height: 15px;
}

/* rega\pages\tabs\handling\rooms.htm */
/* rega\pages\tabs\handling\rooms.htm */

.CLASS04000 {
  height: 100%;
  overflow: hidden;
}

.CLASS04001 {
  width: 100%;
}

.CLASS04002 {
  overflow: auto;
  margin: 10px;
  margin-left: 2px;
}

.CLASS04003 {
  width: 100%;
}

.CLASS04004 {
  height: 50%;
  border: solid 1px var(--colormap-black);
}

.CLASS04005 {
  line-height: 15px;
}

.CLASS04006 {
  border: solid 1px var(--colormap-black);
}

.CLASS04007 {
  cursor: pointer;
}

/* rega\pages\tabs\admin\views\rooms.htm */

.CLASS04100 {
  text-align: center;
  empty-cells: show;
}

.CLASS04101 {
  height: 40px;
}

.CLASS04102 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA) !important;
  font-size: 10pt !important;
  height: 44px !important;
}

.CLASS04103 {
  height: auto;
  background-color: var(--colormap-background);
}

.CLASS04104 {
  background-color: var(--colormap-clickable);
  height: 20px;
}

.CLASS04105 {
  cursor: pointer;
}

.CLASS04106 {
  width: 100%;
}

.CLASS04107 {
  line-height: 15px;
}

.CLASS04108 {
  color: var(--colormap-textColorA);
}

.CLASS04109 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA) !important;
  height: 20px;
}

.CLASS04110 {
  padding-left: 2px;
}

.CLASS04111 {
  height: 15px;
}

.CLASS04112 {
  margin: 5px;
}

.CLASS04113 {
  margin-left: 5px;
}

/* rega\pages\tabs\admin\views\functions.htm */

.CLASS04200 {
  text-align: center;
  empty-cells: show;
}

.CLASS04201 {
  overflow: auto;
  margin: 10px;
  margin-right: 2px;
}

.CLASS04202 {
  height: 40px;
}

.CLASS04203 {
  height: 100%;
}

/*
.CLASS04204 { }
*/

.CLASS04205 {
  height: auto;
  background-color: var(--colormap-background);
}

.CLASS04206 {
  background-color: var(--colormap-clickable);
}

.CLASS04207 {
  cursor: pointer;
}

.CLASS04208 {
  width: 100%;
}

.CLASS04209 {
  line-height: 15px;
}

.CLASS04210 {
  color: var(--colormap-textColorA);
}

.CLASS04211 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA) !important;
}

.CLASS04212 {
  padding-left: 2px;
}

.CLASS04213 {
  margin: 5px;
}

.CLASS04214 {
  margin-left: 5px;
}

.CLASS04215 {
  height: 15px;
}

/* rega\pages\tabs\admin\views\newdevices.htm */

.CLASS04300 {
  display: none;
  height: 0px;
  width: 0px;
  line-height: 0px;
}

.CLASS04301 {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: contents;
}

.CLASS04302 {
  padding: 10px;
}

.CLASS04303 {
  empty-cells: show;
}

.CLASS04304 {
  height: 40px;
}

.CLASS04305 {
  position: relative;
  width: 50px;
  height: 50px;
}

.CLASS04306 {
  height: 100%;
  width: 100%;
  cursor: pointer
}

.CLASS04307  {
  cursor: pointer;
}

.CLASS04308 {
  margin: 4px;
}

.CLASS04309 {
  background-color: var(--colormap-background);
}

.CLASS04310 {
  background-color: var(--colormap-background);
  color: var(--colormap-background);
}

.CLASS04311 {
  top: 0px;
  left: 0px;
  position: absolute;
}

.CLASS04312 {
  line-height: 15px;
}

.CLASS04313 {
  font-size: smaller;
}

.CLASS04314 {
  text-align: left !important;
}

/* rega\pages\tabs\admin\views\newDeviceLoader.htm */

.CLASS04401 {
  position: relative;
  width: 50px;
  height: 50px;
}

.CLASS04402 {
  text-align: left !important;
}

.CLASS04403 {
  height: 100%;
  width: 100%;
}

.CLASS04404 {
  cursor: pointer;
}

.CLASS04405 {
  margin: 0;
  padding: 0;
  position: relative;
  width: 50px;
  height: 50px;
}

/* rega\pages\tabs\admin\views\newdevicechannelsloader.htm */

.CLASS04500 {
  position: relative;
  width: 50px;
  height: 50px;
}

.CLASS04501 {
  text-align: left;
}

.CLASS04502 {
  height: 100%;
  width: 100%;
}

.CLASS04503 {
  cursor: pointer;
}

/* rega\pages\tabs\admin\views\newdevicechannels.htm */

.CLASS04600 {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

.CLASS04601 {
  height: 40px;
}

.CLASS04602 {
  top: 0px;
  left: 0px;
  position: absolute;
}

.CLASS04603 {
  line-height: 15px;
  font-size: smaller;
}

/* rega\pages\tabs\admin\views\functionchannels.htm */
/* rega\pages\tabs\admin\views\roomchannels.htm */

.CLASS04700 {
  position: relative;
  width: 50px;
  height: 50px;
}

.CLASS04701 {
  text-align: left;
}

/* www\rega\pages\tabs\admin\views\programs.htm */

.CLASS04800 {
  line-height: 14px;
  width: 200px;
}

.CLASS04801 {
  width: auto;
  padding-left: 5px;
  padding-right: 5px;
}

.CLASS04802 {
  color: var(--colormap-textColorA) !important;
  height: 40px !important;
}

.CLASS04803 {
  height: 40px;
}

/* rega\pages\tabs\admin\views\programlist.htm */

.CLASS04900 {
  color: var(--colormap-textColorA);
  font-weight: bold;
}

.CLASS04901 {
  height: 40px;
}

.CLASS04902 {
  background-color: var(--colormap-activeBackground);
  width: 220px;
}

.CLASS04903 {
  text-align: left;
}

.CLASS04904 {
  color: var(--colormap-textColorB);
}

.CLASS04905 {
  line-height: 15px;
  width: 220px;
}

.CLASS04906 {
  width: auto;
  padding-left: 5px;
  padding-right: 5px;
}

.CLASS04907 {
  width: 100px;
}

/* rega\pages\tabs\admin\msg\newSysVar.htm */

.CLASS05000 {
  background-color: var(--colormap-white);
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS05001 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  padding: 10px 0px 10px 0px;
}

.CLASS05002 {
  color: var(--colormap-textColorB);
}

.CLASS05003 {
  background-color: var(--colormap-white);
  cursor: pointer;
}

.CLASS05004 {
  background-color: var(--colormap-white);
  cursor: pointer;
}

.CLASS05005 {
  height: 100%;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

.CLASS05006 {
  padding: 5px;
}

.CLASS05007 {
  color: var(--colormap-textColorB);
}

.CLASS05008 {
  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient);

  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  border-radius: 5px;
  padding: 5px 2px 5px 2px;
  cursor: pointer;
}

.CLASS05009 {
  width: 100px;
  margin: 5px;
}

.CLASS05010 {
  color: var(--colormap-textColorB);
  width: 100%;
}

.CLASS05011 {
  width: 90%;
}

.CLASS05012 {
  color: var(--colormap-textColorB);
  width: 100%;
}

/* rega\pages\tabs\admin\msg\timemodule.htm */

.CLASS05100 {
  vertical-align: middle;
  text-align: center;
  position: absolute;
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
}

.CLASS05101 {
  height: 100%;
  vertical-align: middle;
}

.CLASS05102 {
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
  cursor: pointer;
  min-width: 40px;
}

.CLASS05103 {
  background-color: var(--colormap-white);
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS05104 {
  text-align: left;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

.CLASS05105 {
  text-align: left;
}

.CLASS05106 {
  font-size: larger;
}

.CLASS05107 {
  border-bottom: solid 2px var(--colormap-black);
}

.CLASS05108 {
  text-align: left;
  border: 0px;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

.CLASS05109 {
  width: 100px;
  margin: 5px;
  height: 22px;
  line-height: 22px;
}

.CLASS05110 {
  border: 0px;
  text-align: left;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

/* rega\pages\tabs\admin\systemvars.htm */

.CLASS05200 {
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  height: auto;
}

.CLASS05201 {
  height: 20px;
}

.CLASS05202 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA) !important;
  border: solid 1px var(--colormap-black);
}

.CLASS05203 {
  margin: 5px;
}

.CLASS05204 {
  margin-left: 5px;
}

.CLASS05205 {
  height: 20px !important;
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
}

.CLASS05206 {
  border: solid 1px var(--colormap-black);
}

.CLASS05207 {
  line-height: 15px;
}

.CLASS05208 {
  text-align: left;
}

.CLASS05209 {
  text-align: center;
  padding-left: 5px;
  border: solid 1px var(--colormap-black);
-ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}

.CLASS05210 {
  border: none !important;
}

.CLASS05211 {
  border: none !important;
  text-align: left !important;
  color: var(--colormap-textColorB);
}

/* rega\pages\tabs\admin\userAdminisCLASS01217tion.htm  */

.CLASS05300 {
  height: 50px;
}

.CLASS05301 {
  height: 38px;
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-clickable);
  text-align: center;
}

.CLASS05302 {
  height: 80px;
}

.CLASS05303 {
  background-color: var(--colormap-white);
}

/*
.CLASS05304 {
  margin: 5px;
}
*/

.CLASS05305 {
  line-height: 15px;
}

/* rega\pages\tabs\admin\linkprog.htm */

/*
.CLASS05400 {
  height: 130px;
}
*/

.CLASS05401 {
  height: 160px;
  margin-left: 10px;
}

.CLASS05402 {
  width: 100%;
}

.CLASS05403 {
  text-align: center !important;
}

.CLASS05405 {
  min-height: 50%;
  display: flex;
  flex-flow: row wrap;
  margin: 10px;
}

.CLASS05405 > div {
  margin: 10px;
  padding: 1px;
  flex: 0 1 calc(50% - 22px);
  overflow: hidden;
  /* copied from .StdTable td */
  background-color: var(--colormap-inactiveBackground);
  text-align: left;
  vertical-align: top;
  color: var(--colormap-textColorB);
}

/* rega\pages\tabs\admin\systemconfig.htm */

/*
.CLASS05500 {
  height: 50%;
}
*/

.CLASS05501 {
  background-color: var(--colormap-background);
}

.CLASS05502 {
  height: 50%;
  display: flex;
  flex-flow: row wrap;
  margin: 10px;
}

.CLASS05502 > div {
  margin: 10px;
  padding: 1px;
  flex: 0 1 calc(25% - 22px);
  overflow: hidden;
  /* copied from .StdTable td */
  background-color: var(--colormap-inactiveBackground);
  text-align: left;
  vertical-align: top;
  color: var(--colormap-textColorB);
}

/* rega\pages\tabs\favorites.htm */

.CLASS05600 {
  border: solid 1px var(--colormap-black);
  margin-left: 20px;
  margin-top: 20px;
}

.CLASS05601 {
  background-color: var(--colormap-clickable);
  border-right: solid 1px var(--colormap-black);
  ;width: 50%;
  height: 5px;
}

.CLASS05602 {
  background-color: var(--colormap-clickable);
  border-left: solid 1px var(--colormap-black);
  width: 50%;
  height: 5px;
}

.CLASS05603 {
  background-color: var(--colormap-inactiveBackground);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  width: 100%;
}

.CLASS05604 {
  border: solid 1px var(--colormap-black);
  margin-left: 20px;
  margin-bottom: 20px;
}

.CLASS05605 {
  background-color: var(--colormap-clickable);
  width: 170px;
  height: 5px;
  border-right: solid 1px var(--colormap-black);
}

.CLASS05606 {
  background-color: var(--colormap-clickable);
  width: 170px;
  height: 5px;
  border-left: solid 1px var(--colormap-black);
}

.CLASS05607 {
  background-color: var(--colormap-activeBackground);
  border: solid 1px var(--colormap-black);
  height: 80px;
}

.CLASS05608 {
  background-image: url(/ise/img/btn_fav.png);
  width: 170px;
  height: 74px;
  background-repeat: no-repeat;
  text-align: center;
  cursor: pointer;
}

.CLASS05609 {
  background-color: var(--colormap-inactiveBackground);
  border: solid 1px var(--colormap-black);
  width: 170px;
  padding: 6px;
  color: var(--colormap-textColorB);
}

.CLASS05610 {
  margin-top: 20px;
}

/* pages\tabs\statusview.htm */

/*
.CLASS05700 {
  width: 1257px !important;
}
*/

.CLASS05701 {
  height: 50%;
  display: flex;
  flex-flow: row wrap;
  margin: 10px;
}

.CLASS05701 > div {
  margin: 10px;
  padding: 1px;
  flex: 0 1 calc(25% - 22px);
  overflow: hidden;
  /* copied from .StdTable td */
  background-color: var(--colormap-inactiveBackground);
  text-align: left;
  vertical-align: top;
  color: var(--colormap-textColorB);
}

.CLASS05702 {
  background-color: var(--colormap-background) !important;
}

.CLASS05703 {
  padding-left: 4px;
  width: 592px;
}

.CLASS05704 {
  width: 200px;
  /* background: var(--colormap-clickable); */
  color: var(--colormap-textColorB);
  /* border: solid 1px var(--colormap-black); */
  cursor: pointer;
  margin-top: 5px;
  text-align: center;
}

.CLASS05705 {
  width: 572px;
}

.CLASS05706 {
  padding-left: 4px;
  width: 592px;
  height: 262px;
  overflow: auto;
  border-top: solid 1px var(--colormap-black);
}

.CLASS05707 {
  width: 570px;
}

/* rega\pages\tabs\favViewer.htm  */

.CLASS05800 {
  width: 100%;
  text-align: center;
}

.CLASS05801 {
  width: 100%;
}

.CLASS05802 {
  height: 10px;
  width: 1px;
}

/* rega\pages\tabs\guest\startpageguest.htm */

.CLASS05900 {
  margin-top: 20px;
}

.CLASS05901 {
  border: solid 1px var(--colormap-black);
  margin-left: 20px;
  margin-bottom: 20px;
}

.CLASS05902 {
  background-color: var(--colormap-clickable);
  width: 170px;
  height: 5px;
  border-right: solid 1px var(--colormap-black);
}

.CLASS05903 {
  background-color: var(--colormap-clickable);
  width: 170px;
  height: 5px;
  border-left: solid 1px var(--colormap-black);
}

.CLASS05904 {
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
  height: 80px;
}

.CLASS05905 {
  background-image: url(/ise/img/btn_fav.png);
  width: 170px;
  height: 74px;
  background-repeat: no-repeat;
  text-align: center;
  cursor: pointer;
}

.CLASS05906 {
  background-color: var(--colormap-inactiveBackground);
  border: solid 1px var(--colormap-black);
  width: 170px;
  padding: 6px;
  color: var(--colormap-textColorB);
}

.CLASS05907 {
  border: solid 1px var(--colormap-black);
  margin-left: 20px;
  margin-top: 20px;
}

.CLASS05908 {
  background-color: var(--colormap-clickable);
  border-right: solid 1px var(--colormap-black);
  width: 50%;
  height: 5px;
}

.CLASS05909 {
  background-color: var(--colormap-clickable);
  border-left: solid 1px var(--colormap-black);
  width: 50%;
  height: 5px;
}

.CLASS05910 {
  background-color: var(--colormap-inactiveBackground);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  width: 100%
}

/* rega\pages\tabs\user\systemConfigUser.htm */

/*
.CLASS06100 {
  height: 50%;
}
*/

.CLASS06101 {
  background-color: var(--colormap-background) !important;
}

.CLASS06102 {
  height: 50%;
  display: flex;
  flex-flow: row wrap;
  margin: 10px;
}

.CLASS06102 > div {
  margin: 10px;
  padding: 1px;
  flex: 0 1 calc(25% - 22px);
  overflow: hidden;
  /* copied from .StdTable td */
  background-color: var(--colormap-inactiveBackground);
  text-align: left;
  vertical-align: top;
  color: var(--colormap-textColorB);
}

/* rega\pages\tabs\user\userAdministrationUser.htm */

.CLASS06200 {
  text-align: center;
  margin-left: 15px;
  width: 80%;
  border: solid 1px var(--colormap-black);
}

.CLASS06201 {
  height: 50px;
}

.CLASS06202 {
  height: 80px;
}

.CLASS06203 {
  background-color: var(--colormap-white);
}

.CLASS06204 {
  margin: 5px;
}

/* rega\pages\tabs\user\newFav.htm */

.CLASS06300 {
  margin: 10px;
  width: 100%;
}

.CLASS06301 {
  color: var(--colormap-textColorB);
}

.CLASS06302 {
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
  border-radius: 5px;
  color: var(--colormap-textColorB);
  cursor: pointer;
  width: 200px;
  height: 24px;
  line-height: 24px;
  font-size: small;
  text-align: center;
}

.CLASS06303 {
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
  border-radius: 5px;
  color: var(--colormap-textColorB);
  cursor: pointer;
  width: 240px;
  height: 24px;
  line-height: 24px;
  font-size: small;
  text-align: center;
}

.CLASS06304 {
  background-color: var(--colormap-clickable);
  border: solid 1px var(--colormap-black);
  border-radius: 5px;
  color: var(--colormap-textColorB);
  cursor: pointer;
  width: 220px;
  height: 24px;
  line-height: 24px;
  font-size: small;
  text-align: center;
}

.CLASS06305 {
  width: 100%;
}

.CLASS06306 {
  border-bottom: solid 5px var(--colormap-white) !important; /* #cc6600 */
  width: 100%;
}

.CLASS06307 {
  width: 420px;
}

.CLASS06308 {
  height: 100%;
  width: 100%;
}

.CLASS06309 {
  padding-left: 2px;
}

.CLASS06310 {
  height: 15px;
}

.CLASS06311 {
  border: solid 1px var(--colormap-black);
  width: 170px;
}

.CLASS06312 {
  width: 170px;
}

.CLASS06313 {
  text-align: center;
  font-weight: bold;
  color: var(--colormap-textColorB);
}

.CLASS06314 {
  text-align: center;
  font-weight: var(--colormap-black);
  font-weight: bold;
  color: var(--colormap-textColorB);
}

.CLASS06315 {
  background-image: url(/ise/img/btn_fav_up.png);
  width: 85px;
  height: 38px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.CLASS06316 {
  background-image: url(/ise/img/btn_fav_down.png);
  width: 85px;
  height: 38px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.CLASS06317 {
  width: 50px;
  text-align: left;
}

.CLASS06318 {
  margin: 0;
  padding: 0;
  position: relative;
  width: 50px;
  height: 50px;
}

.CLASS06319  {
  text-align: left;
  padding-left: 8px;
}

.CLASS06320 {
  color: var(--colormap-textColorB);
}

.CLASS06321 {
  background-color: var(--colormap-activeBackground);
}

.CLASS06322 {
  margin: 5px;
  width: 85%
}

.CLASS06323 {
  top: 0px;
  left: 0px;
  position: absolute;
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
}

.CLASS06324 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  width: auto;
  height: 20px;
  border: solid 1px var(--colormap-black);
  text-align: center;
}

.CLASS06325 {
  top: 0px;
  left: 0px;
  position: absolute;
  background-color: var(--colormap-white);
  border: solid 1px var(--colormap-black);
}

.CLASS06326 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  width: auto;
  height: 20px;
  border: solid 1px var(--colormap-black);
  text-align: center;
}

.CLASS06327 {
  line-height: 15px;
  font-size: smaller;
  width: 240px;
}

.CLASS06328 {
  height: 100px;
  border: solid 1px var(--colormap-black);
  width: 100%;
}

.CLASS06329 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  height: 40px;
}

.CLASS06330 {
  background-color: var(--colormap-activeBackground);
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  text-align: center;
}

.CLASS06331 {
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  text-align: center;
}

.CLASS06332 {
  margin: 5px;
}

.CLASS06333 {
  margin-left: 5px;
}

.CLASS06334 {
  padding: 5px;
}

.CLASS06335 {
  text-align: center;
}

.CLASS06336 {
  background-color: var(--colormap-inactiveBackground);
}

.CLASS06337 {
  background-color: var(--colormap-clickable);
}

/* ??? */

.CLASS06400 {
  border: solid 1px var(--colormap-black);
  margin-left: 20px;
  margin-top: 20px;
}

.CLASS06401 {
  background-color: var(--colormap-clickable);
  border-right: solid 1px var(--colormap-black);
  width: 50%;
  height: 5px;
}

.CLASS06402 {
  background-color: var(--colormap-clickable);
  border-left: solid 1px var(--colormap-black);
  width: 50%;
  height: 5px;
}

.CLASS06403 {
  background-color: var(--colormap-inactiveBackground);
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  width: 100%
}

.CLASS06404 {
  text-align: center;
  font-weight: bold;
}

.CLASS06405 {
  cursor: pointer;
  background-color: var(--colormap-clickable) !important;
  color: var(--colormap-textColorA) !important;
  border: solid 1px var(--colormap-black) !important;
  height: 20px !important;
  text-align: center !important;
}

.CLASS06406 {
  padding-left: 2px;
}

.CLASS06407 {
  height: 15px;
}

.CLASS06408 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  border: solid 1px var(--colormap-black);
  height: auto !important;
  text-align: center;
}

.CLASS06409 {
  margin: 5px;
}

.CLASS06410 {
  margin-left: 5px;
}

.CLASS06411 {
  text-align: left;
}

.CLASS06412 {
  margin: 5px;
  background-color: var(--colormap-activeBackground); /* #dddddd */
  border: solid 1px var(--colormap-gray); /* silver */
  color: var(--colormap-textColorA);
}

.CLASS06413 {
  line-height: 15px;
}

.CLASS06414 {
  height: 51px;
}

/* ic_msgbox.js */

.CLASS10100 {
  margin-left: 6px;
  border: solid 1px;
}

.CLASS10101 {
  cursor: pointer;
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-gray);
  color: var(--colormap-textColorB);
  width: auto;
  margin: 1px;
  padding: 0 5px 0 5px;
  /* font-family: arial; */
  font-size: 10pt;
  vertical-align: middle;
}

.CLASS10102 {
  background-color: var(--colormap-inactiveBackground);
  padding: 6px;
}

.CLASS10103 {
  background-color: var(--colormap-inactiveBackground);
  padding: 6px;
  text-align: right;
}

/* ic_configpendingmsg.js */

.CLASS10200 {
  background-color: var(--colormap-white);
  padding: 10px;
  border: solid 1px var(--colormap-black);
}

/* ic_infomsgbox.js */

.CLASS10300 {
  width: 100%;
  padding-bottom: 20px;
  padding-top: 20px;
  border: 0;
  text-align: center;
  vertical-align: top;
}

.CLASS10301 {
  color: var(--colormap-red);
  font-weight: bold;
}

.CLASS10302 {
  padding: 5px;
  border: solid 3px var(--colormap-black);
}

/* ic_timeout.js */

.CLASS10400 {
  height: 10px;
  background-color: var(--colormap-gray);
}

/* webui\jst\rfconfig.jst */

.CLASS10500 {
  width: 100%;
  height: 100%;
  overflow: scroll;
}

/* tcl\eq3_old\session.tcl */

.CLASS10600 {
  background-color: var(--colormap-white);
}

/* webui\jst\devicelist_flat.jst */

.CLASS10700 {
  height: 20px
}

/* webui\jst\deviceconfigdialog.jst */

.CLASS10800 {
  border: solid 2px var(--colormap-black);
  width: 250px;
  height: 250px;
  line-height: 250px;
  text-align: center;
}

.CLASS10801 {
  position: relative;
  margin: 0;
  width: 250px;
  height: 250px;
  overflow: hidden;
}

.CLASS10802 {
  width: 250px;
  text-align: center;
}

.CLASS10803 {
  width: 200px;
}

.CLASS10804 {
  font-weight: bold;
}

.CLASS10805 {
  text-align: justify;
}

/* webui\jst\devicelist_tree.jst */

.CLASS10900 {
  width: 25px;
  height: 1px;
}

.CLASS10901 {
  height: 20px;
}

.CLASS10902 {
  border: solid 1px var(--colormap-gray);
  color: var(--colormap-gray);
  background-color: var(--colormap-inactiveButton);
  cursor: default;
}

.CLASS10903 {
  height: 3px;
}

.CLASS10904 {
  width: 25px;
  height: 1px;
  overflow: hidden;
}

.CLASS10905 {
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.CLASS10906 {
  border-right: 0px none;
}

.CLASS10907 {
  border-right: 0px none;
  border-left: 0px none;
}

.CLASS10908 {
  border-left: 0px none;
}

.CLASS10909 {
  width: 55px;
  height: 1px;
  overflow: hidden;
}

/* webui\jst\channelconfigdialog.jst */

.CLASS11000 {
  border: solid 2px var(--colormap-black);
  width: 250px;
  height: 250px;
  line-height: 250px;
  text-align: center;
}

.CLASS11001 {
  position: relative;
  margin: 0;
  width: 250px;
  height: 250px;
  overflow: hidden;
}

.CLASS11002 {
  width: 250px;
  text-align: center;
}

.CLASS11003 {
  font-weight: bold;
}

.CLASS11004 {
  text-align: justify;
  width: 250px;
}

.CLASS11005 {
  width: 200px;
}

.CLASS11006 {
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}

.CLASS11007 {
  font-weight: bold;
  margin-bottom: 5px;
  line-height: 16px;
}

/* webui\jst\header.jst */

.CLASS11100 {
  width: 80px;
  text-align: center;
}

.CLASS11101 {
  vertical-align: middle;
}

.CLASS11102 {
  width: 100%;
  padding-left: 10px;
}

.CLASS11103 {
  vertical-align: bottom;
}

.CLASS11104 {
  text-align: right;
  padding-top: 7px;
}

.CLASS11105 {
  padding-right: 8px;
  padding-top: 7px;
}

.CLASS11106 {
  width: 25px;
}

.CLASS11107 {
  width: 100%;
}

.CLASS11108 {
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
}

.CLASS11109 {
  padding-right: 5px;
  /* padding-top: 6px; */
}

/* config/ic_setprofiles */

.CLASS20001 {
  padding: 4px;
}

.CLASS20002 {
  border: 0;
}

.CLASS20003 {
  height: 165px;
}

.CLASS20004 {
  border-bottom: 0;
  vertical-align: top;
  padding: 4px;
}

.CLASS20005 {
  border-top: 0;
}

.CLASS20006 {
  width: 85% !important;
}

.CLASS20007 {
  border-bottom: 0;
}

.CLASS20008 {
  height: 50px;
}

/* ersetzt die Funktion get_buttonstyle aus ic_common.tcl */
.CLASS20009 {
  padding: 5px;
  text-align: center;
  vertical-align: middle;
  margin: 2px;
  cursor: pointer;
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-gray);
  color: var(--colormap-textColorA);
}

.CLASS20009a {
  padding: 5px;
  text-align: center;
  vertical-align: middle;
  margin: 2px;
  cursor: default;
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-gray);
  color: var(--colormap-inactiveButton);
}

.CLASS20010 {
  width: 150px;
}

/* config\easymodes\DIMMER\MOTION_DETECTOR.tcl */
/* config\easymodes\SWITCH\MOTION_DETECTOR.tcl */
/* config\easymodes\smoke_detector_ch_master.tcl */
/* config\easymodes\ALARMACTUATOR\MOTION_DETECTOR.tcl */

.CLASS20100 {
  color: var(--colormap-red);
}

/* config\easymodes\DIMMER\mapping\TEMPLATE_map.tcl */
/* config\easymodes\SWITCH\mapping\TEMPLATE_map.tcl */
/* config\easymodes\HMW_SWITCH\mapping\TEMPLATE_map.tcl */
/* config\easymodes\WINMATIC\mapping\TEMPLATE_map.tcl */
/* config\easymodes\BLIND\mapping\TEMPLATE_map.tcl */
/* config\easymodes\HMW_DIMMER\mapping\TEMPLATE_map.tcl */
/* config\easymodes\KEYMATIC\mapping\TEMPLATE_map.tcl */

.CLASS20200 {
  color: var(--colormap-red);
  text-decoration: blink
}

/* config\easymodes\smoke_detector_ch_master.tcl */

.CLASS20300 {
  color: var(--colormap-windowText);/* windowText */
}

/* config\easymodes\etc\localization\de\MOTION_DETECTOR.txt */
/* config\easymodes\etc\localization\en\MOTION_DETECTOR.txt */
/* config\easymodes\WINMATIC\localization\de\MOTION_DETECTOR.txt */
/* config\easymodes\WINMATIC\localization\en\MOTION_DETECTOR.txt */

.CLASS20400 {
  background-color: var(--colormap-gray);
}

/* config\easymodes\etc\localization\en\MOTION_DETECTOR.txt */

.CLASS20500 {
  color: var(--colormap-red);
  font-weight: bold;
  text-decoration: blink;
}

/* config\easymodes\cc_tc_ch_master.tcl */

.CLASS20600 {
  background-color: var(--colormap-black);
  color: var(--colormap-textColorB);
  height: 1px
}

/* config\ic_ifacecmd.cgi */

.CLASS20700 {
  padding: 10px;
  text-align: center
}

/* config\cp_security.cgi */

.CLASS20800 {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS20801 {
  color: var(--colormap-textColorB);
}

.CLASS20802 {
  padding: 10px 0px 10px 0px;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

.CLASS20803 {
  border: 0;
  width: 10%
}

.CLASS20804 {
  width: 100px;
  margin: 5px;
}

/*
.CLASS20805 { }
*/

.CLASS20806 {
  padding: 10px 0px 10px 0px;
}

.CLASS20807 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  vertical-align: middle;
}

.CLASS20808 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS20809 {
  border: 0;
  color: var(--colormap-red);
}

.CLASS20810 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS20811 {
  border: 0 none;
}

.CLASS20812 {
  color: var(--colormap-textColorB);
}

.CLASS20813 {
  width: 200px;
  margin: 5px;
}

.CLASS20814 {
  color: var(--colormap-red);
}

.CLASS20815 {
  background-color: var(--colormap-white);
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS20816 {
  color: var(--colormap-red);
  background-color: var(--colormap-white);
}

.CLASS20817 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS20818 {
  width: 100px;
  margin: 5px;
}

.CLASS20819 {
  padding: 5px;
}

.CLASS20820 {
  width: 400px;
  height: 100px;
}

/* config\cp_maintenance.cgi */

.CLASS20900 {
  overflow: auto;
  width: 100%;
  height: 100%;
}

/*
.CLASS20901 { }
*/

.CLASS20902 {
  padding: 10px 0px 10px 0px;
}

.CLASS20903 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  vertical-align: middle;
  font-size: 10pt;
}

.CLASS20904 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS20905 {
  border: 0 none;
}

.CLASS20906 {
  width: 150px;
  margin: 5px;
}

.CLASS20907 {
  border: 0;
  width: 10%
}

.CLASS20908 {
  width: 100px;
  margin: 5px;
}

.CLASS20909 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
  width: 100%;
}

.CLASS20910 {
  width: 200px;
  margin: 5px;
}

.CLASS20911 {
  color: var(--colormap-textColorB);
}

.CLASS20912 {
  border: 0;
  color: var(--colormap-red);
}

.CLASS20913 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
  width: 100%;
}

.CLASS20914 {
  text-align: justify;
}

.CLASS20915 {
  text-align: left;
}

.CLASS20916 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS20917 {
  padding: 10px 0px 10px 0px;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

.CLASS20918 {
  background-color: var(--colormap-white);
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS20919 {
  width: 100px;
  margin: 5px;
}

.CLASS20920 {
  color: var(--colormap-gray);/* grey */
}

.CLASS20921 {
  color: var(--colormap-red);
  background-color: var(--colormap-white);
}

/* ic_common.tcl */
/* ic_linkpeerlist.cgi */
/* ic_deviceparamteters.cgi */

.CLASS21000 {
  background-color: var(--colormap-gray);
  background-image: var(--btnGradient);

  padding: 3px;
  text-align: center;
  vertical-align: middle;
  margin: 2px;
  cursor: pointer;
  border: solid 1px var(--colormap-black);
  border-radius: 5px;
  color: var(--colormap-textColorB);
}

/* config\cp_network.cgi */

.CLASS21100 {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS21101 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS21102 {
  padding: 10px 0px 10px 0px;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

.CLASS21103 {
  border: 0 none;
  width: 10%;
}

.CLASS21104 {
  width: 100px;
  margin: 5px;
}

/*
.CLASS21105 { }
*/

.CLASS21106 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
  width: 100%;
}

.CLASS21107 {
  border: 0 none;
}

.CLASS21108 {
  width: 100px;
  margin: 5px;
}

.CLASS21108A {
  width: 100px;
  margin: 5px;
  line-height: 100%
}

.CLASS21109 {
  border: 0;
  width: 80%;
}

.CLASS21110 {
  width: 150px;
  margin: 5px;
}

.CLASS21111 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS21112 {
  color: var(--colormap-textColorB);
}

.CLASS21113 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS21114 {
  background-color: var(--colormap-white);
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS21115 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
  padding: 10px 0px 10px 0px;
}

.CLASS21116 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  vertical-align: middle;
  font-size: 10pt;
}

.CLASS21117 {
  width: 200px;
  margin: 5px;
}

.CLASS21118 {
  color: var(--colormap-gray);
}

.CLASS21119 {
  padding: 10px 0px 10px 0px;
}

/* config\cp_add_device.cgi */

.CLASS21200 {
  background-color: var(--colormap-white);
  overflow: auto;
  width: 100%;
  height: 100%;
}

/*
.CLASS21201 { }
*/

.CLASS21202 {
  padding: 10px 0px 10px 0px;
}

.CLASS21203 {
  vertical-align: top;
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS21204 {
  color: var(--colormap-textColorB);
}

.CLASS21205 {
  border: 0;
  background-color: var(--colormap-inactiveBackground);
}

.CLASS21206 {
  border: 0;
  width: 80%;
}

.CLASS21207 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  vertical-align: middle;
  font-size: 10pt;
}

.CLASS21208 {
  vertical-align: top;
  color: var(--colormap-textColorB);
  background-color: var(--colormap-inactiveBackground);
  padding: 5px;
}

.CLASS21209 {
  border: 0;
  width: 10%
}

.CLASS21210 {
  width: 100px;
  margin: 5px;
}

.CLASS21210a {
  margin: 5px;
  min-height: 25px;
  line-height: 25px;
  min-width: 110px;
}

.CLASS21211 {
  font-weight: bold;
}

.CLASS21212 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  vertical-align: middle;
  font-size: 10pt;
}

.CLASS21213 {
  width: 100px;
  height: 30px;
  line-height: 30px;
  margin: 5px;
}

.CLASS21214 {
  width: 200px;
  height: 30px;
  margin: 5px;
}

.CLASS21215  {
  background-color: var(--colormap-white) !important;
  color: var(--colormap-textColorB) !important;
}

.CLASS21216 {
  width: 150px;
  height: 30px;
  margin: 5px;
}

/* config\help.cgi */

.CLASS21300 {
  height: 56%;
}

.CLASS21301 {
  background-color: var(--colormap-inactiveBackground);
  vertical-align: top;
}

.CLASS21301a {
  background-color: var(--colormap-inactiveBackground);
  vertical-align: middle;
}

.CLASS21302 {
  color: var(--colormap-textColorB);
  text-align: center;
  margin: 5px;
}

.CLASS21303 {
  color: var(--colormap-textColorB);
  text-align: center;
  width: 100%;
}

.CLASS21304 {
  color: var(--colormap-textColorB);
}

.CLASS21305 {
  background-color: var(--colormap-inactiveBackground);
  text-align: center;
  vertical-align: top;
}

.CLASS21305a {
  background-color: var(--colormap-inactiveBackground);
  text-align: center;
  vertical-align: middle;
}

.CLASS21306 {
  vertical-align: top;
}

/* config\cp_software.cgi */

.CLASS21400 {
  overflow: auto;
  width: 100%;
  height: 100%;
}

.CLASS21401 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS21402 {
  padding: 10px 0px 10px 0px;
  background-color: var(--colormap-white);
  color: var(--colormap-textColorB);
}

.CLASS21403 {
  border: 0 none;
  width: 10%
}

.CLASS21404 {
  width: 100px;
  margin: 5px;
}

/*
.CLASS21405 { }
*/

.CLASS21406 {
  background-color: var(--colormap-white);
  overflow: auto;
  width: 100%;
  /* height: 250px; */
}

.CLASS21407 {
  padding: 10px 0px 10px 0px;
}

.CLASS21408 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  vertical-align: middle;
  font-size: 10pt;
}

.CLASS21409 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS21410 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS21411 {
  border: 0 none;
}

.CLASS21412 {
  width: 200px;
  margin: 5px;
}

.CLASS21413 {
  border: 0 none;
  color: var(--colormap-red);
}

/* config\cp_time.cgi */

.CLASS21500 {
  background-color: var(--colormap-white);
  overflow: auto;
  width: 100%;
  height: 100%;
}

/*
.CLASS21501 { }
*/

.CLASS21502 {
  padding: 10px 0px 10px 0px;
}

.CLASS21503 {
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  vertical-align: middle;
  font-size: 10pt;
}

.CLASS21504 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS21505 {
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS21506 {
  border: 0 none;
}

.CLASS21507 {
  width: 200px;
  margin: 5px;
}

.CLASS21508 {
  border: 0;
  width: 10%;
}

.CLASS21509 {
  width: 100px;
  margin: 5px;
}

.CLASS21510 {
  color: var(--colormap-textColorB);
}

/* config\cp_display.cgi */

.CLASS21600 {
  background-color: var(--colormap-white);
  overflow: auto;
  width: 100%;
  height: 100%;
}

/*
.CLASS21601 { }
*/

.CLASS21602 {
  padding: 10px 0px 10px 0px;
}

.CLASS21603 {
  vertical-align: top;
  color: var(--colormap-textColorB);
  background-color: var(--colormap-white);
}

.CLASS21604 {
  color: var(--colormap-textColorB);
}

.CLASS21605 {
  border: 0 none;
  width: 10%
}

.CLASS21606 {
  width: 100px;
  margin: 5px;
}

.CLASS21607 {
  border: 0 none;
  width: 70%
}

/* config\control_panel.cgi */

.CLASS21700 {
  height: 50%;
}

.CLASS21701 {
  height: 40px;
  line-height: 40px;
  width: 150px;
 /* padding-left: 5px; */
  padding-right: 5px;
  float: left;
  margin-right: 10px;
}

.CLASS21702 {
  background-color: var(--colormap-background) !important;
}

.CLASS21703 {
  height: 70px;
  line-height: 35px;
}

/* config\ic_common.tcl */

.CLASS21800 {
  width: 100%;
  font-weight: bold;
  cursor: pointer;
}

.CLASS21801 {
  border-bottom: 4px solid var(--colormap-gray);
}

.CLASS21802 {
  position: absolute;
  left: 300px;
  top: 0px;
  background-color: InfoBackground; /* ToDo */
  height: 28px;
  padding: 6px;
  border: solid 2px var(--colormap-activeBackground);
}

.CLASS21803 {
  margin: 4px;
}

.CLASS21804 {
  width: 200px;
  height: 200px;
  border: solid 1px var(--colormap-blue); /* blue */
}

.CLASS21805 {
   background-color: var(--colormap-white);
}

.CLASS21806 {
  color: var(--colormap-red);
}

.CLASS21807 {
  background-color: var(--colormap-white);
}

/* config\ic_selchannel.cgi */

.CLASS21900 {
  padding: 0px;
  display: inherit;
}

.CLASS21901 {
  line-height: 15px;
}

.CLASS21902 {
  width: 100%;
}

.CLASS21903 {
  width: 10%;
}

.CLASS21904 {
  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient);

  color: var(--colormap-textColorB);
  border: solid 1px var(--colormap-black);
  border-radius: 2px;

  cursor: pointer;
}

.CLASS21905 {
  width: 80%;
}

.CLASS21906 {
  color: var(--colormap-red);
  font-size: larger;
  font-weight: bold;
}

.CLASS21907 {
  margin: 0;
  padding: 0;
  position: relative;
  width: 50px;
  height: 50px;
}

.CLASS21908 {
  overflow: auto;
  width: 100%;
}

.CLASS21909 {
  line-height: 15px;
  font-size: x-small;
}

.CLASS21910 {
  line-height: 10px;
  font-size: xx-small;
}

.CLASS21911 {
  width: 70%;
}

.CLASS21912 {
  position: relative;
}

.CLASS21913 {
  height: 50px;
}

.CLASS21914 {
  background-color: var(--colormap-clickable);
}

.CLASS21915 {
  position: absolute;
}

.CLASS21916 {
  text-align: right;
  margin-top: 5px;
}

.CLASS21917 {
  background-color: var(--colormap-clickable);
  background-image: var(--btnGradient);

  text-align: center;
  width: 30px;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
  cursor: pointer;
  padding: 0 20px;
}

/* config\ic_deviceparameters.cgi */

.CLASS22000 {
  margin: 10px;
  width: 100%;
}

.CLASS22001 {
  text-align: center;
  background-color: var(--colormap-activeBackground);
}

.CLASS22002 {
  border-bottom: 2px solid var(--colormap-white) !important; /* #cc6600 */
  padding-bottom: 10px;
}

.CLASS22003 {
  background-color: var(--colormap-white);
}

.CLASS22004 {
  background-color: var(--colormap-activeBackground);
  text-align: center;
}

.CLASS22005 {
  position: relative;
  width: 50px;
  height: 50px;
}

.CLASS22006 {
  text-align: right;
}

.CLASS22007 {
  text-align: right;
  padding: 7px;
}

.CLASS22008 {
  text-align: center;
}

.CLASS22009 {
  width: 99%;
}

.CLASS22010 {
  height: 50px;
}

.CLASS22011 {
  width: 100%;
}

.CLASS22012 {
  width: 10%;
}

.CLASS22013 {
  width: 80%;
}

.CLASS22014 {
  width: 100px;
}

.CLASS22015 {
  background-color: var(--colormap-inactiveBackground);
}

/* config\ic_linkpeerlist.cgi */

.CLASS22100 {
  line-height: 14px;
}

.CLASS22101 {
  padding: 0px;
  display: inherit;
}

.CLASS22102 {
  position: absolute;
  left: 300px;
  top: 0px;
  background-color: InfoBackground; /* ToDo */
  height: 28px;
  padding: 6px;
  border: solid 2px var(--colormap-activeBackground);
}

.CLASS22103 {
  color: var(--colormap-red);
  font-size: large;
  font-weight: bold;
}

.CLASS22104 {
  left: 0px;
  top: 0px;
  margin: 0;
  padding: 0;
  background-color: var(--colormap-white);
  position: relative;
  width: 50px;
  height: 50px;
}

.CLASS22105 {
  position: relative;
  width: 50px;
  height: 50px;
}

.CLASS22106 {
  text-align: center;
}

.CLASS22107 {
  width: 10%;
}

.CLASS22108 {
  width: 80%;
}

.CLASS22109 {
  vertical-align: middle;
}

/* config\ic_neweasymode.cgi */

.CLASS22200 {
  width: 100%;
}

.CLASS22201 {
  font-weight: bold;
  text-align: center;
  margin-top: 6px;
  color: var(--colormap-red);
}

.CLASS22202 {
  border: 0 none;
  padding: 0;
  margin: 0;
}

.CLASS22203 {
  border: 0 none;
  width: 10%
}

.CLASS22204 {
  text-align: center;
  margin: 2px;
  cursor: pointer;
  border: solid 1px var(--colormap-black);
  background-color: var(--colormap-clickable);
  color: var(--colormap-textColorA);
  padding: 2px;
}

.CLASS22205 {
  border: 0 none;
  width: 90%;
}

.CLASS22206 {
  height: 100%;
  font-weight: bold;
  text-align: center;
  margin-top: 6px;
  color: var(--colormap-red);
}

.CLASS22207 {
  border: 0 none;
  width: 80%
}

/* /pages/tabs/handling.htm */

.CLASS22300 {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.CLASS22301 {
  text-align: center;
}

.CLASS22302 {
  height: 50%;
}

.CLASS22303 {
  text-align: center;
  padding-top: 16px;
  padding-right: 8px;
  padding-left: 8px;
}

.CLASS22304 {
  height: 100%;
  width: 100%;
}

.CLASS22305 {
  height: 98%;
}

.CLASS22306 {
  color: var(--colormap-textColorB);
  vertical-align: top
}

.CLASS22307 {
  padding-bottom: 20px;
  background-color: var(--colormap-inactiveBackground);
  color: var(--colormap-textColorB);
  overflow: auto;
  visibility: hidden;
}

.CLASS22308 {
  margin-top: 20px;
}

.CLASS22309 {
  margin: 0px;
  border: solid 1px var(--colormap-black);
}

.CLASS22310 {
  background-color: var(--colormap-clickable);
  width: 580px;
  height: 30px;
  border: solid 1px var(--colormap-black);
  text-align: center;
}

.CLASS22311 {
  background-color: var(--colormap-clickable);
  width: 580px;
  height: 5px;
  border: solid 1px var(--colormap-black);
}

.CLASS22312 {
  background-color: var(--colormap-activeBackground);
  width: 580px;
  height: 120px;
  border: solid 1px var(--colormap-black);
  color: var(--colormap-textColorB);
}

.CLASS22313 {
  background-color: var(--colormap-clickable);
  width: 580px;
  height: 5px;
  border: solid 1px var(--colormap-black);
}

.CodeMirror {
  border-top: 1px solid var(--colormap-black);
  border-bottom: 1px solid var(--colormap-black);
  text-align: left;
  font-family: monospace;
}

.CodeMirror-gutter-wrapper {
  font-family: monospace;
}
jens-maus commented 2 years ago

Sorry, but I cannot accept these changes, especially since they are mainly only related to code aesthetics. The reason being, that since RaspberryMatic is based on OCCU we have to be very careful what and how we have to patch things in OCCU since we are highly dependent on upstream, thus eQ3 providing further updates of OCCU.

This is the reason why we maintain all these WebUI patches separately and don't have a single WebUI patch for all changes. Simply because we have to keep patches as small, minor and non-invasive as possible! Thus, it is totally contraproductive if we introduce code patches simply because of code aesthetics or because we might prefer Unix line endings compared to windows line endings because this would introduce a large amount of merge conflicts if eQ3 comes up with some updates of these files themselves.

So sorry, but we cannot accept these changes. But what you van do is to provide/demonstrate your proposed changes as separate distinct units/changes and not as a replacement file. Preferably use a PullRequest for doing this or provide your proposed changes as patch/diff files where we can see which lines/things you change rather than just presenting the final file. And thus, even if we cannot take this file as granted, we might be able to extract some passages from your changes that are worth a second look.

drose28357 commented 2 years ago

i have had the same idea. At atleast to remove preprocessor artitfact like "$_(active)" with standard css variable notation for definitions like "--colormap-active:" an usage like "color: var(--colormap-active);".

@Jens : would you agree if ptweety provides a pull request with only these changes ? (the top two point of hios description)

jens-maus commented 2 years ago

Which purpose does the pure replacement from $_(active) to var(--colormap-active) serve? IMHO while these $_(active) might be "old-school" and not modern, they work, right? And using those users can use their own color.map file to override the standard colors with their own ones. So why should we change those and risk additional merge conflicts if eQ3 provides further style.css updates? As said before: We are highly dependent on eQ3 as long as we use their WebUI code. If we would have a completely independent, new, reworked WebUI or if eQ3 would abadone the CCU completely we could do whatever we want, but as long as eQ3 provides further updates it IMHO would be wiser to keep the WebUI changes as minor as possible or possibly split them into very small pieces to prevent large merge conflicts.

ptweety commented 2 years ago

Well Jens, I totally understand your pov. But honestly spoken a refactoring of the webui is not possible with such guardrails.

Hence I really don't have a good idea who to bring some more modern touches to the webui as long as we have to restrict ourselfs to only so much changes ahead of a slowly moving upstream.

jens-maus commented 2 years ago

Hence I really don't have a good idea who to bring some more modern touches to the webui as long as we have to restrict ourselfs to only so much changes ahead of a slowly moving upstream.

Well, as long as we have the eQ3 WebUI as a dependency - thus as long as we use upstream WebUI code - we are restricted to some boundaries, yes. But if you would come up with a complete new, independent UI based on a completely different Web framework (e.g. ReactJS, Bootstrap, etc.) we could of course work completely independent and without having to look at what upstream does (apart from new device integrations, etc.). But as long as we haven't started this side projects (which I actually really would love to do!) we are hence limited to keep our changes as compatible as possible to the codebase of the eQ3 WebUI and this includes keeping their tabs, their strange indentation, etc. which are only cosmetical.