/*=====================================================*/

/* RESET										       */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: "Lato", sans-serif;
}
/*=====================================================*/

/* SCROLLBARS										   */

html {
  scrollbar-face-color: #646464;
  scrollbar-base-color: #646464;
  scrollbar-3dlight-color: #646464;
  scrollbar-highlight-color: #646464;
  scrollbar-track-color: #444;
  scrollbar-arrow-color: #666;
  scrollbar-shadow-color: #646464;
  scrollbar-dark-shadow-color: #646464;
  scrollbar-color: #646464 #444;
}
::-webkit-scrollbar {
  width: 17px;
  height: 3px;
}
::-webkit-scrollbar-button {
  background-color: #666;
}
::-webkit-scrollbar-track {
  background-color: #646464;
}
::-webkit-scrollbar-track-piece {
  background-color: #444;
}
::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: #666;
  border-radius: 3px;
}
::-webkit-scrollbar-corner {
  background-color: #646464;
}
::-webkit-resizer {
  background-color: #666;
}
/*=====================================================*/

/* 													   */

html {
  height: 100%;
  touch-action: none;
}

body {
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Standard syntax */
  touch-action: none;
  color: #f2f2f2;
  background: #222;
  cursor: default;
  height: 100%;
  width: 100%;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#main {
  position: absolute;
  display: flex;
  height: 100%;
  width: 100%;
  height: 100vh;
  width: 100vw;
  flex-direction: row;
  border: 0;
  margin: 0;
  padding: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 0;
  overflow: auto;
  touch-action: none;
  /*min-height: 480px;
	min-width: 720px;*/
}

/* Flex contianer, components displayed horizontally, left to right */

.flex-cont-hor {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1;
  /* this essentially means "use all parent's inner width */
  min-height: 0;
  overflow: hidden;
}
/* Flex contianer, components displayed vertically, top to bottom */

.flex-cont-vert {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1;
  /* this essentially means "use all parent's inner height */
  min-height: 0;
  overflow: hidden;
}
/* This is the magic;  makes DIV(s) take up all remaining space in the parent */

.flex-fill {
  flex: 1;
}

.flex-jc-left {
  justify-content: flex-start;
}

.flex-jc-right {
  justify-content: flex-end;
}
.flex-jc-center {
  justify-content: center;
}
.flex-jc-space-between {
  justify-content: space-between;
}
.flex-jc-space-evenly {
  justify-content: space-evenly;
}
.flex-jc-space-around {
  justify-content: space-around;
}

.data-label::after {
  content: attr(data-val);
}

.bar-wrapper {
  height: 25px;
  min-height: 25px;
  max-height: 25px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  justify-content: space-around;
}
.statusbar {
  min-height: 25px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.baritem {
  min-height: 25px;
  height: 25px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 12px;
  line-height: 24px;
}

.menubar-wrapper {
  height: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  justify-content: space-around;
}

.menubar {
  min-height: 45px;
  max-height: 45px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1 1 auto;
  overflow: auto;
}

.menuitem {
  min-height: 45px;
  height: 45px;
  min-width: 45px;

  margin-right: 5px;
  font-size: 17px;
  padding: 12px 16px;
}

.menubar-wrapper-mini {
  height: 35px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  justify-content: space-around;
}

.menubar-mini {
  min-height: 30px;
  max-height: 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1 1 auto;
  overflow: auto;
}

.menuitem-mini {
  min-height: 30px;
  height: 30px;
  min-width: 30px;

  margin-right: 5px;
  font-size: 14px;
  padding: 8px 12px;
}

.content-titlebar {
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  background: #666;
  font-size: 24px;
  line-height: 40px;
  font-weight: bold;
}

.content-titlebar-small {
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  background: #666;
  font-size: 14px;
  line-height: 25px;
  font-weight: bold;
}

.sidebar {
  width: 250px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-height: 0;
  overflow: hidden;
}

.sidebar2 {
  width: 280px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-height: 0;
  overflow: hidden;
}

.mini-sidebar {
  width: 70px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-height: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

.menuitem-vertical {
  display: block;
  min-height: 45px;
  height: 45px;
  width: 100%;
  min-width: 45px;
  font-size: 17px;
  padding: 12px 16px;
}

.autopoint {
  display: block;
  min-height: 45px;
  height: 45px;
  width: 100%;
  min-width: 45px;
  font-size: 17px;
  padding: 12px 16px;
  background-color: #555;
  font-weight: bold;
  margin-top: 2px;
  margin-bottom: 2px;
}

.lightgroup {
  display: block;
  min-height: 45px;
  height: 45px;
  width: 100%;
  min-width: 45px;
  font-size: 17px;
  padding: 12px 16px;
  background-color: #555;
  font-weight: bold;
  margin-top: 2px;
  margin-bottom: 2px;
}

.lightgroup.active {
  background: #4caf50;
  color: #f2f2f2;
}

/*=====================================================*/

/* Classes											   */

.std-margin {
  margin: 3px;
}
.std-padding {
  padding: 5px;
}
.scroll {
  overflow: auto !important;
}
.noscroll {
  overflow: hidden !important;
}

.bold {
  font-weight: bold;
}
.center {
  text-align: center;
}

.visible {
  display: block;
}
.hidden {
  display: none !important;
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.acl-disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/*=====================================================*/
/* Theme											   */

.bg-1 {
  background: #4caf50;
}

.bg-2 {
  background: #444;
}

.bg-3 {
  background: #333;
}

.bg-4 {
  background: #555;
}

.bg-5 {
  background: #666;
}

.border {
  border: 1px solid #777;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
}

.border-footer {
  border-top: 1px solid #555;
}

.border-menu-top {
  border-bottom: 1px solid #555;
}

.border-menu-bottom {
  border-top: 1px solid #555;
}

.border-title {
  border-bottom: 1px solid #000;
}

.menuitem.active {
  background: #4caf50;
  color: #f2f2f2;
}
/*
.menuitem.active:hover {
	background: #4CAF50;

	color: #f2f2f2;
}

.menuitem:hover {
    background-color: #ddd; 
	color: #333;
}
*/
.menuitem:active {
  background: #4caf50;
  color: #f2f2f2;
}

.menuitem-vertical.active {
  background: #4caf50;
}
/*
.menuitem-vertical.active:hover {
	background: #4CAF50;
	color: #f2f2f2;
}

.menuitem-vertical:hover {
    background-color: #ddd; 
	color: #333;
}
*/
.menuitem-vertical:active {
  background: #4caf50;
  color: #f2f2f2;
}

.tab-content {
  display: none;
}

.tab-content.tab-current {
  display: inherit;
}

.app-titlebar-label {
  font-weight: bold;
}

/* Module Specific*/

.mod-acl-hide {
  display: none;
}

.mod-acl-disable {
  opacity: 0.5;
  pointer-events: none;
}

.mod-tools-tab-content {
  display: none;
}

.mod-tools-tab-content.mod-tools-tab-current {
  display: inherit;
}

.mod-tools-tab-content {
  display: none;
}

.mod-tools-tab-content.tab-current {
  display: inherit;
}

.mod-settings-tab-content {
  display: none;
}

.mod-settings-tab-content.mod-settings-tab-current {
  display: inherit;
}

.mod-settings-tab-content {
  display: none;
}

.mod-settings-tab-content.tab-current {
  display: inherit;
}

.mod-light-modules-tab-content {
  display: none;
}

.mod-light-modules-tab-content.mod-light-modules-tab-current {
  display: inherit;
}

.mod-light-modules-tab-content {
  display: none;
}

.mod-light-modules-tab-content.tab-current {
  display: inherit;
}
.filechooser-file-active {
  background-color: #ddd !important; /* Dark grey background on mouse-over */
  color: #333 !important;
}

/*=====================================================*/

/* ALERT											   */

.alert {
  padding: 10px;
  background-color: #777;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 5px;
  line-height: 1.4em;
}

.alert.success {
  background-color: #4caf50;
}
.alert.info {
  background-color: #2196f3;
}
.alert.warning {
  background-color: #ff9800;
}
.alert.error {
  background-color: #f44336;
}

.alert em {
  font-size: 0.8em;
}

.alert-closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  transition: 0.3s;
}
/*
.alert-closebtn:hover {
    color: black;
}
*/

/*=====================================================*/

#mod-light-graph button {
  height: 40px;
  font-size: 16px;
  border: none; /* Remove borders */
  color: white; /* Add a text color */
  padding: 5px 5px; /* Add some padding */
  margin-left: 10px;
  background-color: #333;
}
/* Button											   */

.btn-mini {
  width: 40px;
  height: 40px;
  font-size: 20px;
  border: none; /* Remove borders */
  color: white; /* Add a text color */
  padding: 5px 5px; /* Add some padding */
  margin-left: 10px;
}

.btn {
  font-size: 17px;
  border: none; /* Remove borders */
  color: white; /* Add a text color */
  padding: 12px 18px; /* Add some padding */
  margin-left: 10px;
}

.btn-large {
  width: 60px;
  height: 60px;
  font-size: 50px;
  border: none; /* Remove borders */
  color: white; /* Add a text color */
  text-align: center;
  justify-content: center;
}

.lbl-large {
  width: 80px;
  height: 60px;
  font-size: 50px;
  border: none; /* Remove borders */
  color: white; /* Add a text color */
  text-align: center;
  justify-content: center;
  background-color: #666;
  color: #f2f2f2;
}
.lbl-small {
  width: 60px;
  height: 60px;
  font-size: 50px;
  border: none; /* Remove borders */
  color: white; /* Add a text color */
  text-align: center;
  justify-content: center;
  margin-left: 3p;
  margin-right: 3px;
  color: #f2f2f2;
}

.success {
  background-color: #4caf50;
} /* Green */
.success:hover {
  background-color: #46a049;
}

.info {
  background-color: #2196f3;
} /* Blue */
.info:hover {
  background: #0b7dda;
}

.warning {
  background-color: #ff9800;
} /* Orange */
.warning:hover {
  background: #e68a00;
}

.danger {
  background-color: #f44336;
} /* Red */
.danger:hover {
  background: #da190b;
}

.default {
  background-color: #333;
  color: #f2f2f2;
} /* Gray */
.default:hover {
  background: #bbb;
}

.success-fg {
  color: #4caf50;
} /* Green */
.info-fg {
  color: #2196f3;
} /* Blue */
.warning-fg {
  color: #ff9800;
} /* Orange */
.danger-fg {
  color: #f44336;
} /* Red */

.on-fg {
  color: #ffff00;
} /* yellow */
.off-fg {
  color: #a6a6a6;
} /* gray */

.disabled-fg {
  opacity: 0.4;
  pointer-events: none;
  color: #a6a6a6;
}

.dropup {
}

.dropup .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 12px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  background-color: #333;
}

.dropup:hover .dropbtn {
  /*background-color: #ddd;
    color: black;*/
  transition: all 0.3s ease; /* Add transition for hover effects */
}

/* Dropup content (Hidden by Default) */
.dropup-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top: -150px;
}

/* Links inside the dropup */
.dropup-content a {
  font-size: 17px;
  float: none;
  color: #f2f2f2;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  height: 50px;
  text-align: left;
}

/* Change color of dropup links on hover */
.dropup-content a:hover {
  background-color: #ddd;
  color: #333;
}

.dropdown {
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 12px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  background-color: #333;
}

.dropdown:hover .dropbtn {
  /*background-color: #ddd;
    color: black;*/
  transition: all 0.3s ease; /* Add transition for hover effects */
}

/* Dropup content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 50px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropup */
.dropdown-content a {
  font-size: 17px;
  float: none;
  color: #f2f2f2;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  height: 50px;
  text-align: left;
}

/* Change color of dropup links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: #333;
}

.show {
  display: block;
}

/* Show the dropdown menu on hover */
/*
.dropup:hover .dropup-content {
  display: block;
}
*/

.siiimpleToast {
  position: absolute;
  padding: 14px 18px;
  min-width: 250px;
  z-index: 999999;
  border-radius: 2px;
  color: #fff;
  font-weight: 300;
  white-space: nowrap;
  user-select: none;
  touch-action: none;
  opacity: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  box-sizing: border-box;
  transform: scale(0.5);
  transition: all 0.4s ease-out;
}
.siiimpleToast[data-state="default"] {
  background-color: #2196f3;
}
.siiimpleToast[data-state="success"] {
  background-color: #4caf50;
}
.siiimpleToast[data-state="alert"] {
  background-color: #f44336;
}
.siiimpleToast[data-state="warning"] {
  background-color: #ff9800;
}

.mod-screenlock {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 15; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  opacity: 0.1;
  overflow: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.1s; /* 0.5 second transition effect to slide in the sidenav */
  text-align: center;
}
/* Position and style the close button (top right corner) */

.mod-screenlock-closebtn {
  z-index: 15; /* Stay on top */
  position: absolute;
  top: 28px;
  right: 8px;
  font-size: 15px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

.mod-powerctrl {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 25; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  opacity: 0.9;
  overflow: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  text-align: center;
}

/* The navigation menu links */
.mod-powerctrl a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
/*
.mod-powerctrl a:hover{
    color: #f1f1f1;
}
*/
/* Position and style the close button (top right corner) */
.mod-powerctrl-closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.mod-light-middle {
  height: 110px;
  min-height: 110px;
  max-height: 110px;
}

.mod-light-bottom {
  height: 100px;
  min-height: 100px;
  max-height: 100px;
}
.mod-light-channelgraph {
  height: 100px;
  min-height: 100px;
  max-height: 100px;
  max-width: 100%;
}

.mod-light-progdisplay {
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  font-size: 24px;
  line-height: 40px;
  font-weight: bold;
  text-align: center;
}


.mod-climate-middle {
  height: 110px;
  min-height: 110px;
  max-height: 110px;
}

.mod-climate-bottom {
  height: 100px;
  min-height: 100px;
  max-height: 100px;
}
.mod-climate-channelgraph {
  height: 100px;
  min-height: 100px;
  max-height: 100px;
  max-width: 100%;
}

.mod-climate-progdisplay {
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  font-size: 24px;
  line-height: 40px;
  font-weight: bold;
  text-align: center;
}



.serialstatus-connected {
  color: #4caf50;
  background: #333;
}

.serialstatus-active {
  color: #00ff00;
  background: #333;
}

.serialstatus-closed {
  color: #777;
  background: #333;
}

.serialstatus-error {
  color: #ff0000;
  background: #333;
}

#pin {
  /*background: #212121;*/
  width: 320px;
  min-width: 320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0em;
  border-radius: 0.3em;
  /*-webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);*/
  margin: auto;
  font-size: 15px;
  /*color: rgba(255, 255, 255, 0.2);*/
}

.dots {
  width: 95%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  padding: 1em;
  padding-top: 1em;
}

.dot {
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2.5em;
  width: 2.5em;
  height: 2.5em;
  -webkit-transform: scale3d(0.7, 0.7, 0.7);
  transform: scale3d(0.7, 0.7, 0.7);
}
.dot.active {
  -webkit-animation: growDot 0.5s ease;
  animation: growDot 0.5s ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.dot.wrong {
  -webkit-animation: wrong 0.9s ease;
  animation: wrong 0.9s ease;
}
.dot.correct {
  -webkit-animation: correct 0.9s ease;
  animation: correct 0.9s ease;
}

#pin p {
  font-size: 0.8em;
}

.numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-line-pack: end;
  align-content: flex-end;
}

.number {
  position: relative;
  width: 2.2em;
  height: 2.2em;
  margin: 0.3em;
  border-radius: 2.2em;
  border: 2px solid rgba(255, 255, 255, 0);
  text-align: center;
  line-height: 2.2em;
  font-weight: 400;
  font-size: 2.2em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-color: #333;
}
/*
.number:hover {
  color: rgba(255, 255, 255, 0.5);
}
.number:hover:before {
  border: 2px solid rgba(255, 255, 255, 0.5);
}*/
.number:before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 2.2em;
  height: 2.2em;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 2.2em;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.number.grow:before {
  -webkit-animation: grow 0.6s ease;
  animation: grow 0.6s ease;
}

@-webkit-keyframes growDot {
  100% {
    background: white;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
}

@keyframes growDot {
  100% {
    background: white;
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
}
@-webkit-keyframes grow {
  50% {
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes grow {
  50% {
    -webkit-transform: scale3d(1.5, 1.5, 1.5);
    transform: scale3d(1.5, 1.5, 1.5);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes wrong {
  20% {
    background: crimson;
  }
  40% {
    -webkit-transform: translate(-15px, 0);
    transform: translate(-15px, 0);
  }
  60% {
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0);
  }
  80% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0);
  }
}
@keyframes wrong {
  20% {
    background: crimson;
  }
  40% {
    -webkit-transform: translate(-15px, 0);
    transform: translate(-15px, 0);
  }
  60% {
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0);
  }
  80% {
    -webkit-transform: translate(-5px, 0);
    transform: translate(-5px, 0);
  }
}
@-webkit-keyframes correct {
  20% {
    background: limegreen;
  }
  40% {
    -webkit-transform: translate(0, -15px);
    transform: translate(0, -15px);
  }
  60% {
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }
  80% {
    -webkit-transform: translate(0, -5px);
    transform: translate(0, -5px);
  }
}
@keyframes correct {
  20% {
    background: limegreen;
  }
  40% {
    -webkit-transform: translate(0, -15px);
    transform: translate(0, -15px);
  }
  60% {
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }
  80% {
    -webkit-transform: translate(0, -5px);
    transform: translate(0, -5px);
  }
}
@-webkit-keyframes bg-red {
  50% {
    background: crimson;
  }
}
@keyframes bg-red {
  50% {
    background: crimson;
  }
}
@-webkit-keyframes bg-green {
  50% {
    background: limegreen;
  }
}
@keyframes bg-green {
  50% {
    background: limegreen;
  }
}

.scale50 {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);

  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
}

.progress {
  width: 100%;
  height: 100%;
}
.progress-wrap {
  background: #444;
  margin: 1px 0;
  overflow: hidden;
  position: relative;
}
.progress-bar {
  background: #249c23;
  left: 0;
  position: absolute;
  top: 0;
  width: 0%;
}
span[data-fn="icon-status"] {
  color: gray;
}
span[data-fn="icon-status"][data-val="1"] {
  color: green;
}
span[data-fn="icon-status"][data-val="0"] {
  color: red;
}
span[data-fn="icon-error"] {
  color: gray;
}
span[data-fn="icon-error"][data-val="1"] {
  color: red;
}
span[data-fn="icon-error"][data-val="0"] {
  color: gray;
}
span[data-fn="icon-warning"][data-val="1"] {
  color: orange;
}
span[data-fn="icon-warning"] {
  color: gray;
}
span[data-fn="icon-warning"][data-val="0"] {
  color: gray;
}
span[data-fn="icon-light"][data-val="1"] {
  color: green;
}
span[data-fn="icon-light"][data-val="0"] {
  color: gray;
}
span[data-fn="icon-lightswitch"] {
  color: orange;
}
span[data-fn="icon-lightswitch"][data-val="0"] {
  color: red;
}
span[data-fn="icon-lightswitch"][data-val="1"] {
  color: gray;
}
span[data-fn="icon-temperature"] {
  color: gray;
}
span[data-fn="icon-temperature"][data-val="1"] {
  color: green;
}
span[data-fn="icon-temperature"][data-val="2"] {
  color: orange;
}
span[data-fn="icon-temperature"][data-val="3"] {
  color: red;
}
.light-devicestatus {
  margin-top: 10px;
  margin-bottom: 10px;
}

.light-deviceinfo {
  font-size: 0.9em;
  margin: 2.5px;
  padding: 5px 10px 10px 10px;
  /*float:left;*/
  border: 1px solid gray;
  min-height: 110px;
  max-height: 145px;
  min-width: 110px;
  max-width: 110px;
}

.light-deviceinfo2 {
  font-size: 0.9em;
  margin: 2.5px;
  padding: 5px 10px 10px 10px;
  /*float:left;*/
  border: 1px solid gray;
  min-height: 110px;
  max-height: 145px;
  min-width: 225px;
  max-width: 225px;
}

.light-slotname::after {
  content: attr(data-val);
  font-weight: bold;
  font-size: 0.7em;
}
.light-devicename::after {
  content: attr(data-val);
  font-weight: normal;
  font-size: 0.6em;
}

span[data-fn="icon-light-runstate"]::before {
  color: gray;
  font-family: "Font Awesome 5 Pro";
  content: "\f110";
  width: 20px;
  margin-right: 5px;
  display: inline-block;
  text-align: center;
}

span[data-fn="icon-light-runstate"][data-val=""]::before {
  -webkit-animation: fa-spin 2s linear infinite;
  animation: fa-spin 2s linear infinite;
}

span[data-fn="icon-light-runstate"][data-val="fixedvalue-on"]::before {
  color: green;
  font-family: "Font Awesome 5 Pro";
  content: "\f3fd";
}
span[data-fn="icon-light-runstate"][data-val="fixedvalue-off"]::before {
  color: red;
  font-family: "Font Awesome 5 Pro";
  content: "\f3fd";
}

span[data-fn="icon-light-runstate"][data-val="program-running"]::before {
  color: green;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f04b";
}
span[data-fn="icon-light-runstate"][data-val="program-paused"]::before {
  color: orange;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f04c";
}
span[data-fn="icon-light-runstate"][data-val="program-stopped"]::before {
  color: red;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f04d";
}
span[data-fn="icon-light-runstate"][data-val="program-unloaded"]::before {
  color: red;
  font-family: "Font Awesome 5 Pro";
  content: "\f317";
}

span[data-fn="icon-light-runstate"][data-val="external"]::before {
  color: white;
  font-family: "Font Awesome 5 Pro";
  content: "\f352";
}

span[data-fn="icon-light-mode"]::before {
  font-family: "Font Awesome 5 Pro";
  content: "\f110";
  width: 20px;
  margin-right: 5px;
  display: inline-block;
  text-align: center;
}

span[data-fn="icon-light-mode"][data-val=""]::before {
  color: gray;
  -webkit-animation: fa-spin 2s linear infinite;
  animation: fa-spin 2s linear infinite;
}

span[data-fn="icon-light-mode"][data-val]::after {
  content: attr(data-val);
}

span[data-fn="icon-light-mode"][data-val="fixedvalue"]::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f3fd";
}

span[data-fn="icon-light-mode"][data-val="fixedvalue"]::after {
  content: "Festwertbetrieb";
}

span[data-fn="icon-light-mode"][data-val="program"]::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f2f2";
}

span[data-fn="icon-light-mode"][data-val="program"]::after {
  content: "Programmbetrieb";
  pointer-events: auto;
}

span[data-fn="icon-light-mode"][data-val="external"]::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f352";
}

span[data-fn="icon-light-mode"][data-val="external"]::after {
  content: "Externe Steuerung";
  pointer-events: auto;
}

span[data-fn="icon-light-error"]::before {
  /* color: gray;
  font-family: "Font Awesome 5 Pro";
  content: "\f06a";*/
  width: 20px;
  margin-right: 5px;
  display: inline-block;
  text-align: center;
}

span[data-fn="icon-light-error"][data-val=""]::before {
  -webkit-animation: fa-spin 2s linear infinite;
  animation: fa-spin 2s linear infinite;
}

span[data-fn="icon-light-error"][data-val="0"]::before {
  /* color: gray;
  font-family: "Font Awesome 5 Pro";
  content: "\f06a";*/
}
span[data-fn="icon-light-error"][data-val="1"]::before {
  color: red;
  font-family: "Font Awesome 5 Pro";
  content: "\f06a";
}

span[data-fn="icon-light-warning"]::before {
  /*color: gray;
  font-family: "Font Awesome 5 Pro";
  content: "\f071";*/
  width: 20px;
  margin-right: 5px;
  display: inline-block;
  text-align: center;
}

span[data-fn="icon-light-warning"][data-val=""]::before {
  -webkit-animation: fa-spin 2s linear infinite;
  animation: fa-spin 2s linear infinite;
}

span[data-fn="icon-light-warning"][data-val="0"]::before {
  /*color: gray;
  font-family: "Font Awesome 5 Pro";
  content: "\f071";*/
}
span[data-fn="icon-light-warning"][data-val="1"]::before {
  color: orange;
  font-family: "Font Awesome 5 Pro";
  content: "\f071";
}

[data-fn="light-mode-vis"] {
  display: none;
}

[data-fn="light-mode-vis"][data-mode~="program"][data-val="program"] {
  display: block;
}

[data-fn="light-mode-vis"][data-mode~="fixedvalue"][data-val="fixedvalue"] {
  display: block;
}

[data-fn="light-mode-vis"][data-mode~="external"][data-val="external"] {
  display: block;
}

[data-fn="validity"][data-val="0"] {
  /*  opacity: 0.8;*/
}

[data-fn="validity"][data-val="0"] .progress {
  opacity: 0.4;
}
[data-fn="validity"][data-val="0"] .online-icon {
  opacity: 0.5;
  -webkit-animation: pulse 2s infinite ease-in-out;
  -o-animation: pulse 2s infinite ease-in-out;
  -ms-animation: pulse 2s infinite ease-in-out;
  -moz-animation: pulse 2s infinite ease-in-out;
  animation: pulse 2s infinite ease-in-out;
}

[data-fn="validity"][data-val="0"] .data-icon {
  opacity: 0.25;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.9);
    opacity: 0.5;
  }
  50% {
    -webkit-transform: scale(1);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: scale(0.9);
    opacity: 0.5;
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.4;
  }
  50% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.4;
  }
}

[data-fn="light-runstate-en"] {
  opacity: 0.5;
  pointer-events: none;
}

[data-fn="light-runstate-en"][data-runstate~="program-running"][data-val="program-running"] {
  opacity: 1;
  pointer-events: all;
}

[data-fn="light-runstate-en"][data-runstate~="program-paused"][data-val="program-paused"] {
  opacity: 1;
  pointer-events: all;
}

[data-fn="light-runstate-en"][data-runstate~="program-stopped"][data-val="program-stopped"] {
  opacity: 1;
  pointer-events: all;
}

[data-fn="light-runstate-en"][data-runstate~="program-unloaded"][data-val="program-unloaded"] {
  opacity: 1;
  pointer-events: all;
}

[data-fn="light-runstate-en"][data-runstate~="fixedvalue-on"][data-val="fixedvalue-on"] {
  opacity: 1;
  pointer-events: all;
}

[data-fn="light-runstate-en"][data-runstate~="fixedvalue-off"][data-val="fixedvalue-off"] {
  opacity: 1;
  pointer-events: all;
}

[data-fn="light-worklight-en"] {

}

[data-fn="light-worklight-en"][data-worklight="off"][data-val="1"] {
  display: none !important;

}

[data-fn="light-worklight-en"][data-worklight="off"][data-val="0"] {
  display: block;

}

[data-fn="light-worklight-en"][data-worklight="on"][data-val="0"] {
  display: none !important;

}

[data-fn="light-worklight-en"][data-worklight="on"][data-val="1"] {
  display: block;
  opacity: 1;
}

.data-label[data-val=""]::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f110";
  display: inline-block;
  -webkit-animation: fa-spin 2s linear infinite;
  animation: fa-spin 2s linear infinite;
}

#mod-light-knobs {
  padding-top: 15px;
}

#mod-light-fixedknobs {
  padding-top: 15px;
}

/* Inserting this collapsed row between two flex items will make 
* the flex item that comes after it break to a new row */
.break {
  flex-basis: 100%;
  height: 0;
}

.break10 {
  flex-basis: 100%;
  height: 10px;
}