@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small, .text-small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

/* golden ratio modular scale (1.618) */
/* Font sizes - perfect fourth modular scale (1.333) */
.center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-top {
  vertical-align: top;
}

.hidden, .hidden2 {
  display: none !important;
}

.invis, .invis2 {
  visibility: hidden !important;
  box-shadow: none !important;
}

.inline-block {
  display: inline-block;
}

.line-through {
  text-decoration: line-through !important;
}

.valignc {
  vertical-align: middle;
}

.clickbtn {
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.clickbtn:active, .clickbtn.pushed {
  top: 1px;
}

@media screen and (min-width: 545px) {
  .mobile-only {
    display: none !important;
  }
}

@media screen and (max-width: 544px) {
  .non-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 544px) {
  .mobile-zero-width {
    width: 0 !important;
    overflow: hidden;
  }
}

.flex-filler {
  flex-grow: 1;
}

.relative {
  position: relative;
}

:root.blue.dark {
  --c-primary: #5abfff;
  --c-tabbar: #3f789c;
  --img-logo-full: url(/images/theme/blue_fb_logo.svg?d201139284cb9d1b8c11dc12048b77ba);
  --img-logo-collapsed: url(/images/theme/blue_fb_icon.svg?64f98af2838b9bd58d8a5d9cbcfa4313);
}

:root.blue.light {
  --c-primary: #2c86d7;
  --c-hextile: #63798C;
  --c-hextile-a: #0086ff;
  --img-logo-full: url(/images/theme/light_fb_logo_blue.svg?945c8e5c39395fe1681ef53a0cce53f6);
  --img-logo-collapsed: url(/images/theme/light_fb_icon_grey.svg?5b549d3c5a39ab505630dc71366da9b6);
}

:root.custom.dark {
  --img-logo-full: url(/images/theme/white_fb_logo.svg?0546808b26597bdcdf8715744d7d11e0);
  --img-logo-collapsed: url(/images/theme/white_fb_icon.svg?9bedc9337c8fcf9965f3539f51e396e6);
}

:root.custom.light {
  --img-logo-full: url(/images/theme/light_fb_logo_grey.svg?8d486b5d1992985408a615327385fbb5);
  --img-logo-collapsed: url(/images/theme/light_fb_icon_grey.svg?5b549d3c5a39ab505630dc71366da9b6);
}

:root.orange.dark {
  --c-primary: #f8801e;
  --c-tabbar: #b16500;
  --img-logo-full: url(/images/theme/white_fb_logo.svg?0546808b26597bdcdf8715744d7d11e0);
  --img-logo-collapsed: url(/images/theme/white_fb_icon.svg?9bedc9337c8fcf9965f3539f51e396e6);
}

:root.orange.light {
  --c-primary: #d77111;
  --c-hextile: #8C7062;
  --c-hextile-a: #ef7e10;
  --img-logo-full: url(/images/theme/light_fb_logo_grey.svg?8d486b5d1992985408a615327385fbb5);
  --img-logo-collapsed: url(/images/theme/light_fb_icon_grey.svg?5b549d3c5a39ab505630dc71366da9b6);
}

:root.mint.dark {
  --c-primary: #75d7de;
  --c-tabbar: #006d70;
  --img-logo-full: url(/images/theme/mint_fb_logo.svg?e6b831e17bf027b28be31b8a28598881);
  --img-logo-collapsed: url(/images/theme/mint_fb_icon.svg?61555bebc6702319b130589c39a36d3a);
}

:root.mint.light {
  --c-primary: #2287a2;
  --c-hextile: #597780;
  --c-hextile-a: #20a5c9;
  --img-logo-full: url(/images/theme/light_fb_logo_mint.svg?996b4c17034e3ef280f78431b05e4e87);
  --img-logo-collapsed: url(/images/theme/light_fb_icon_grey.svg?5b549d3c5a39ab505630dc71366da9b6);
}

:root.white.dark {
  --c-primary: #ffffff;
  --c-tabbar: #232323;
  --img-logo-full: url(/images/theme/white_fb_logo.svg?0546808b26597bdcdf8715744d7d11e0);
  --img-logo-collapsed: url(/images/theme/white_fb_icon.svg?9bedc9337c8fcf9965f3539f51e396e6);
}

:root.white.light {
  --c-primary: #677880;
  --c-hextile: #7E6996;
  --c-hextile-a: #31373d;
  --img-logo-full: url(/images/theme/light_fb_logo_grey.svg?8d486b5d1992985408a615327385fbb5);
  --img-logo-collapsed: url(/images/theme/light_fb_icon_grey.svg?5b549d3c5a39ab505630dc71366da9b6);
}

:root.red.dark {
  --c-primary: #e5133b;
  --c-tabbar: #8e3030;
  --img-logo-full: url(/images/theme/white_fb_logo.svg?0546808b26597bdcdf8715744d7d11e0);
  --img-logo-collapsed: url(/images/theme/white_fb_icon.svg?9bedc9337c8fcf9965f3539f51e396e6);
}

:root.red.light {
  --c-primary: #d72154;
  --c-hextile: #a37985;
  --c-hextile-a: #d72154;
  --img-logo-full: url(/images/theme/light_fb_logo_grey.svg?8d486b5d1992985408a615327385fbb5);
  --img-logo-collapsed: url(/images/theme/light_fb_icon_grey.svg?5b549d3c5a39ab505630dc71366da9b6);
}

:root.green.dark {
  --c-primary: #70e040;
  --c-tabbar: #4c7b4e;
  --img-logo-full: url(/images/theme/white_fb_logo.svg?0546808b26597bdcdf8715744d7d11e0);
  --img-logo-collapsed: url(/images/theme/white_fb_icon.svg?9bedc9337c8fcf9965f3539f51e396e6);
}

:root.green.light {
  --c-primary: #42a42c;
  --c-hextile: #788178;
  --c-hextile-a: #3ba824;
  --img-logo-full: url(/images/theme/light_fb_logo_grey.svg?8d486b5d1992985408a615327385fbb5);
  --img-logo-collapsed: url(/images/theme/light_fb_icon_grey.svg?5b549d3c5a39ab505630dc71366da9b6);
}

:root.yellow.dark {
  --c-primary: #fff141;
  --c-tabbar: #69642c;
  --img-logo-full: url(/images/theme/white_fb_logo.svg?0546808b26597bdcdf8715744d7d11e0);
  --img-logo-collapsed: url(/images/theme/white_fb_icon.svg?9bedc9337c8fcf9965f3539f51e396e6);
}

:root.yellow.light {
  --c-primary: #c0b713;
  --c-hextile: #707070;
  --c-hextile-a: #ead900;
  --img-logo-full: url(/images/theme/light_fb_logo_grey.svg?8d486b5d1992985408a615327385fbb5);
  --img-logo-collapsed: url(/images/theme/light_fb_icon_grey.svg?5b549d3c5a39ab505630dc71366da9b6);
}

:root.violet.dark {
  --c-primary: #c257fc;
  --c-tabbar: #5f2863;
  --img-logo-full: url(/images/theme/white_fb_logo.svg?0546808b26597bdcdf8715744d7d11e0);
  --img-logo-collapsed: url(/images/theme/white_fb_icon.svg?9bedc9337c8fcf9965f3539f51e396e6);
}

:root.violet.light {
  --c-primary: #9762d5;
  --c-hextile: #847596;
  --c-hextile-a: #9957E6;
  --img-logo-full: url(/images/theme/light_fb_logo_grey.svg?8d486b5d1992985408a615327385fbb5);
  --img-logo-collapsed: url(/images/theme/light_fb_icon_grey.svg?5b549d3c5a39ab505630dc71366da9b6);
}

/* --- DEFAULT MAIN --- */
/* --- END DEFAULT MAIN --- */
/** Nice scrollbar */
/** Extra thin scrollbar, suitable for dropdown menus, dashvals and other things where huge scrollbar would be annoying */
html {
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  color: #f1f1f1;
  background: #222222;
  color-scheme: only dark;
}

html, body {
  border: 0 none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: var(--font_size);
}

*, *::before, *::after {
  background-repeat: no-repeat;
  background-position: center center;
}

h1 {
  font-size: 2.3rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 0.617rem;
}

h3 {
  font-size: 1.1rem;
  margin-bottom: 0.381rem;
}

a, a:visited, a:link {
  cursor: pointer;
  color: #5abfff;
  color: var(--c-primary);
  text-decoration: none;
}

a:hover {
  color: #5abfff;
  color: var(--c-primary);
  text-decoration: underline;
}

a.no-link-color, a.no-link-color:link, a.no-link-color:visited, a.no-link-color:hover {
  color: inherit;
}

hr {
  border-bottom-style: none;
  border-width: 2px;
}

table.kvtable.wide {
  width: 100%;
}
table.kvtable td, table.kvtable th {
  padding: 0.381rem;
  border: 1px solid #777;
}
table.kvtable th {
  text-align: left;
  font-weight: bold;
}

.relative-color-bad {
  color: #e84040;
}

.relative-color-good {
  color: #17c96b;
}

.badge {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  font-size: 10pt;
  font-weight: bold;
  top: -10px;
  left: calc(100% - 10px);
  padding: 0 5px;
  z-index: 1;
  border-radius: 10px;
  min-width: 20px;
  height: 20px;
  text-shadow: 0 0 2px black;
  box-shadow: 0 0 2px black;
  color: #f1f1f1;
}
.badge--info {
  background: var(--c-primary);
}
.badge--err {
  background: #ee4245;
}
.badge--warn {
  background: #f39c12;
}

/* Dropdown "floating dialog" widget shown under a toggle button */
.dropdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 190;
  background: #323232;
  box-shadow: 0 0 10px black;
}
.dropdown--left {
  left: auto;
  right: 0;
}
.dropdown--above {
  top: auto;
  bottom: 100%;
}

.dropdown-wrap {
  position: relative;
}

.ContextMenu {
  background: #292929;
}
.ContextMenu__Item {
  display: block;
  line-height: 1.8em;
  text-decoration: none;
  padding: 0.381rem;
  cursor: pointer;
}
.ContextMenu__Item.ContextMenu__Item {
  color: #f1f1f1;
}
.ContextMenu__Item:hover {
  color: var(--c-primary);
  background: #292929;
}
.ContextMenu__Item input[type=checkbox] {
  margin-left: 0.5em;
}
.ContextMenu__section-separator {
  font-size: 0.75rem;
  color: var(--c-primary);
  border-bottom: 1px solid #626262;
  margin: 0 0.381rem;
  padding-top: 0.381rem;
}

.Loader {
  pointer-events: none;
  display: flex;
  align-items: center;
  border: 1px solid #4e4e4e;
  border-radius: 35px;
  background: #111;
  transition: opacity 0.3s;
  opacity: 0;
}
.Loader.show {
  opacity: 1;
}
.Loader--main {
  position: fixed;
  right: 1rem;
  top: 4.617rem;
  z-index: 200;
}
.Loader__message:not(:empty) {
  padding: 0 0.617rem 0 1rem;
}
.Loader__spinner {
  position: relative;
  width: 35px;
  height: 35px;
  margin: -1px;
}
.Loader__spinner::before, .Loader__spinner::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.Loader__spinner::before {
  border: 6px solid #4e4e4e;
}
.Loader__spinner::after {
  position: absolute;
  top: 0;
  border: 6px solid transparent;
  border-top-color: var(--c-primary);
  animation: mainloader 1.1s infinite linear;
}
@keyframes mainloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.Grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media screen and (min-width: 1101px) {
  .Grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1101px) {
  .Grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1101px) {
  .Grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 1101px) {
  .Grid--cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (min-width: 1101px) {
  .Grid--cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media screen and (min-width: 1101px) {
  .Grid--cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}
.Grid__cell {
  grid-column: span 1;
}
@media screen and (min-width: 1101px) {
  .Grid__cell--col-span-2 {
    grid-column: span 2/span 2;
  }
}
@media screen and (min-width: 1101px) {
  .Grid__cell--col-span-3 {
    grid-column: span 3/span 3;
  }
}
@media screen and (min-width: 1101px) {
  .Grid__cell--col-span-4 {
    grid-column: span 4/span 4;
  }
}
@media screen and (min-width: 1101px) {
  .Grid__cell--col-span-6 {
    grid-column: span 6/span 6;
  }
}
.Grid__cell--col-span-full {
  grid-column: 1/-1;
}
@media screen and (min-width: 1101px) {
  .Grid__cell--col-start-2 {
    grid-column-start: 2;
  }
}
.Grid__cell--j-self-start {
  justify-self: flex-start;
}
.Grid__cell--j-self-center {
  justify-self: center;
}
.Grid__cell--a-self-start {
  align-self: flex-start;
}

.DashNode {
  background-color: #1280E6;
  border-radius: 10px;
  display: flex;
  padding: 0.617rem;
  gap: 1rem;
  align-items: center;
  min-height: 53px;
  position: relative;
  z-index: 2;
}
a.DashNode {
  color: white;
  text-decoration: none;
  cursor: auto;
}
a.DashNode[href]:hover {
  background-color: #1073ce;
  cursor: pointer;
}
a.DashNode > svg {
  height: 30px;
  width: auto;
  flex-shrink: 0;
  fill: transparent;
}
a.DashNode--large {
  min-height: 70px;
}
a.DashNode--large > svg {
  height: 44px;
}
a.DashNode--electricity {
  background-color: #FF7A00;
  color: black;
}
a.DashNode--electricity[href]:hover {
  background-color: #eb7000;
}
a.DashNode--gas {
  background-color: #FFE924;
  color: black;
}
a.DashNode--gas[href]:hover {
  background-color: #ebd300;
}
a.DashNode--water {
  background-color: #00B2FF;
  color: black;
}
a.DashNode--water[href]:hover {
  background-color: #00a4eb;
}
a.DashNode--heat {
  background-color: #FF4D4D;
  color: black;
}
a.DashNode--heat[href]:hover {
  background-color: #ea4343;
}
a.DashNode--production {
  background-color: #4CFF5E;
  color: black;
}
a.DashNode--production[href]:hover {
  background-color: #30e843;
}
a.DashNode--inactive {
  background-color: #646464;
  color: #a5a5a5;
}
a.DashNode--highlight {
  background-color: white;
  color: #1280E6;
}
a.DashNode--highlight[href]:hover {
  background-color: #e6e6e6;
}

.TableContainer {
  display: flex;
  flex-direction: column;
  gap: 0.617rem;
}

.TableNew {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  overflow: auto;
}
.TableNew__head {
  position: sticky;
  top: 0;
  min-width: 100%;
  z-index: 1;
  background-color: #292929;
}
.TableNew__body {
  position: relative;
}
.TableNew__header-row {
  display: flex;
  min-width: 100%;
}
.TableNew__row {
  display: flex;
  min-width: 100%;
  position: relative;
}
.TableNew__row:nth-child(even) {
  background: #2d2d2d;
}
.TableNew__row:nth-child(odd) {
  background: #292929;
}
.TableNew__header-cell {
  display: flex;
  overflow: hidden;
  min-width: 40px;
  min-height: 2em;
  background-color: var(--c-tabbar);
  color: #f1f1f1;
}
.TableNew__header-cell--clickable {
  cursor: pointer;
}
.TableNew__cell {
  display: flex;
  min-width: 40px;
  min-height: 2em;
}
.TableNew__cell--row-header {
  font-weight: bold;
}
.TableNew__cell--link a {
  color: #f1f1f1;
  text-decoration: none;
}
.TableNew__cell--link a:hover {
  color: var(--c-primary);
}
.TableNew__cell--editable:hover {
  box-shadow: inset 1px 1px 4px 2px rgba(0, 0, 0, 0.15);
}
.TableNew__cell--text-bold {
  font-weight: bold;
}
.TableNew__cell--text-highlight {
  color: var(--c-primary);
  font-weight: bold;
}
.TableNew__row:nth-child(even) .TableNew__cell {
  background: #2d2d2d;
}
.TableNew__row:nth-child(odd) .TableNew__cell {
  background: #292929;
}
.TableNew__cell-content {
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
  flex: 1;
  margin: auto 0;
  padding: 0 4px;
}
.TableNew__cell-content--text-wrap {
  text-wrap: wrap;
  overflow-wrap: break-word;
}
.TableNew__pre-row-controls {
  order: -1;
}
.TableNew__post-row-controls {
  order: 9999;
}
.TableNew__resize-handle {
  height: 100%;
  width: 6px;
  margin-left: auto;
  cursor: col-resize;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 5px 1px 5px 3px;
}
.TableNew__resize-handle::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(241, 241, 241, 0.8);
  border-radius: 1px;
}
.TableNew__editor-input.TableNew__editor-input.TableNew__editor-input {
  width: 100%;
}
.TableNew__sort-indicator {
  display: flex;
  align-items: center;
}

/* UI icon codes map */
/* User icon codes map */
/* ELKO EP user icon codes map */
/* UI icon classes */
.icon-ok::before {
  content: "\e76f";
}

.icon-cancel::before {
  content: "\e857";
}

.icon-plus::before {
  content: "\e76e";
}

.icon-minus::before {
  content: "\e76d";
}

.icon-home::before {
  content: "\e76c";
}

.icon-alarm::before {
  content: "\e76b";
}

.icon-alarm-off::before {
  content: "\f1f7";
}

.icon-configure::before {
  content: "\e806";
}

.icon-settings::before {
  content: "\e807";
}

.icon-adjust::before {
  content: "\e808";
}

.icon-clock::before {
  content: "\e809";
}

.icon-move::before {
  content: "\e80a";
}

.icon-back::before {
  content: "\e80b";
}

.icon-next::before {
  content: "\e859";
}

.icon-log::before {
  content: "\e80c";
}

.icon-check::before {
  content: "\e80d";
}

.icon-check-empty::before {
  content: "\e80e";
}

.icon-bug::before {
  content: "\e80f";
}

.icon-brush::before {
  content: "\e810";
}

.icon-plus-squared::before {
  content: "\e811";
}

.icon-trash::before {
  content: "\e813";
}

.icon-lock::before {
  content: "\e814";
}

.icon-unlock::before {
  content: "\e815";
}

.icon-onoff::before {
  content: "\e816";
}

.icon-warning::before {
  content: "\e817";
}

.icon-warning-off::before {
  content: "\e936";
}

.icon-expand-v::before {
  content: "\f0f7";
}

.icon-minimum::before {
  content: "\f0f7";
}

.icon-value-start::before {
  content: "\e818";
}

.icon-value-end::before {
  content: "\e81a";
}

.icon-collapse-h::before {
  content: "\e818";
}

.icon-expand-h::before {
  content: "\e81a";
}

.icon-collapse-v::before {
  content: "\e81b";
}

.icon-maximum::before {
  content: "\e81b";
}

.icon-login::before {
  content: "\e842";
}

.icon-logout::before {
  content: "\e81c";
}

.icon-edit::before {
  content: "\e81d";
}

.icon-new-user::before {
  content: "\e81e";
}

.icon-favorite-a::before {
  content: "\e81f";
}

.icon-favorite::before {
  content: "\e820";
}

.icon-new::before {
  content: "\e821";
}

.icon-chart-bar::before {
  content: "\e822";
}

.icon-chart-area::before {
  content: "\e823";
}

.icon-chart-pie::before {
  content: "\e824";
}

.icon-chart-line::before {
  content: "\e825";
}

.icon-help::before {
  content: "\e826";
}

.icon-hierarchy::before {
  content: "\e827";
}

.icon-folder::before {
  content: "\e828";
}

.icon-component::before {
  content: "\e829";
}

.icon-components::before {
  content: "\e82a";
}

.icon-users::before {
  content: "\e82b";
}

.icon-area::before {
  content: "\e82c";
}

.icon-user::before {
  content: "\e82d";
}

.icon-location::before {
  content: "\e82e";
}

.icon-globe::before {
  content: "\e82e";
}

.icon-search::before {
  content: "\e82f";
}

.icon-dashboard::before {
  content: "\e831";
}

.icon-gauge::before {
  content: "\e831";
}

.icon-pencil::before {
  content: "\e832";
}

.icon-folder-add::before {
  content: "\e833";
}

.icon-up::before {
  content: "\e834";
}

.icon-down::before {
  content: "\e835";
}

.icon-calc::before {
  content: "\f1ec";
}

.icon-undo::before {
  content: "\e836";
}

.icon-timeshift::before {
  content: "\f1da";
}

.icon-history::before {
  content: "\e823";
}

.icon-print::before {
  content: "\e837";
}

.icon-download::before {
  content: "\e838";
}

.icon-upload::before {
  content: "\e85d";
}

.icon-leftright::before {
  content: "\e855";
}

.icon-band-wd::before {
  content: "\e839";
}

.icon-binary-wd::before {
  content: "\f128";
}

.icon-left::before {
  content: "\f0f6";
}

.icon-right::before {
  content: "\e83a";
}

.icon-menu::before {
  content: "\e83c";
}

.icon-dots::before {
  content: "\f141";
}

.icon-dots-y::before {
  content: "\f142";
}

.icon-to-end::before {
  content: "\f0f8";
}

.icon-eye::before {
  content: "\e83d";
}

.icon-eye-off::before {
  content: "\e83e";
}

.icon-info::before {
  content: "\f086";
}

.icon-arrow-combo::before {
  content: "\e83f";
}

.icon-interact::before {
  content: "\e840";
}

.icon-api::before {
  content: "\e841";
}

.icon-unlock-fail::before {
  content: "\f510";
}

.icon-bad-lock::before {
  content: "\f510";
}

.icon-camera::before {
  content: "\e843";
}

.icon-fire::before {
  content: "\e844";
}

.icon-incognito::before {
  content: "\f21b";
}

.icon-lightning::before {
  content: "\e812";
}

.icon-mark-as-read::before {
  content: "\f2b7";
}

.icon-code::before {
  content: "\f121";
}

.icon-terminal::before {
  content: "\e830";
}

.icon-cog::before {
  content: "\e845";
}

.icon-rocket::before {
  content: "\f135";
}

.icon-flag::before {
  content: "\e846";
}

.icon-filter::before {
  content: "\f0b0";
}

.icon-stack::before {
  content: "\e847";
}

.icon-copy::before {
  content: "\f0c5";
}

.icon-id-card::before {
  content: "\f2c3";
}

.icon-slideshow::before {
  content: "\f0f5";
}

.icon-ok1::before {
  content: "\e848";
}

.icon-calendar::before {
  content: "\e849";
}

.icon-box::before {
  content: "\f187";
}

.icon-file::before {
  content: "\e84a";
}

.icon-link::before {
  content: "\e84b";
}

.icon-unlink::before {
  content: "\f127";
}

.icon-accessibility::before {
  content: "\e84c";
}

.icon-truck::before {
  content: "\e84d";
}

.icon-car::before {
  content: "\f1b9";
}

.icon-road::before {
  content: "\e84e";
}

.icon-paw::before {
  content: "\f1b0";
}

.icon-bed::before {
  content: "\f236";
}

.icon-coffee::before {
  content: "\f0f4";
}

.icon-thermometer::before {
  content: "\f2c7";
}

.icon-snowflake::before {
  content: "\f2dc";
}

.icon-table::before {
  content: "\f0ce";
}

.icon-zone::before {
  content: "\f351";
}

.icon-list-add::before {
  content: "\e84f";
}

.icon-loop::before {
  content: "\e850";
}

.icon-shuffle::before {
  content: "\e851";
}

.icon-health::before {
  content: "\f21e";
}

.icon-heart::before {
  content: "\e85a";
}

.icon-blinds-up::before {
  content: "\f102";
}

.icon-blinds-down::before {
  content: "\f103";
}

.icon-blinds-light::before {
  content: "\f106";
}

.icon-blinds-dark::before {
  content: "\f107";
}

.icon-blinds-stop::before {
  content: "\e852";
}

.icon-music::before {
  content: "\e853";
}

.icon-language::before {
  content: "\f1ab";
}

.icon-batch-import::before {
  content: "\e84f";
}

.icon-admin::before {
  content: "\f132";
}

.icon-user-o::before {
  content: "\f2c0";
}

.icon-autofit::before {
  content: "\e854";
}

.icon-detail::before {
  content: "\e856";
}

.icon-refresh::before {
  content: "\e75d";
}

.icon-mail::before {
  content: "\e8ef";
}

.icon-wifi::before {
  content: "\f1eb";
}

.icon-signal::before {
  content: "\e8f0";
}

.icon-radio::before {
  content: "\e8f1";
}

.icon-notif-group::before {
  content: "\e8ef";
}

.icon-watcher::before {
  content: "\e83d";
}

.icon-role::before {
  content: "\e827";
}

.icon-access-group::before {
  content: "\e82b";
}

.icon-data-points::before {
  content: "\f0ca";
}

.icon-phone::before {
  content: "\e858";
}

.icon-tag::before {
  content: "\e801";
}

.icon-tags::before {
  content: "\e802";
}

.icon-phone-squared::before {
  content: "\f098";
}

.icon-block::before {
  content: "\e803";
}

.icon-suggest::before {
  content: "\e804";
}

.icon-archive::before {
  content: "\e805";
}

.icon-backup::before {
  content: "\e805";
}

.icon-crit-warning::before {
  content: "\e85f";
}

.icon-columns::before {
  content: "\e85c";
}

.icon-comment::before {
  content: "\f0e5";
}

.icon-panel::before {
  content: "\e83b";
}

.icon-multiedit::before {
  content: "\f248";
}

.icon-eco::before {
  content: "\f249";
}

.icon-sort-asc::before {
  content: "\f160";
}

.icon-sort-desc::before {
  content: "\f161";
}

.icon-qrcode::before {
  content: "\e85e";
}

.icon-machine::before {
  content: "\e84d";
}

.icon-blueprint::before {
  content: "\f2c3";
}

.icon-power::before {
  content: "\e910";
}

.icon-heating::before {
  content: "\e8dd";
}

.icon-ventilation::before {
  content: "\e8e6";
}

.icon-drying::before {
  content: "\e8f2";
}

.icon-automatic::before {
  content: "\e860";
}

.icon-disarmed::before {
  content: "\e903";
}

.icon-armed::before {
  content: "\e904";
}

.icon-mute::before {
  content: "\e908";
}

.icon-horn::before {
  content: "\e90b";
}

.icon-off::before {
  content: "\e87f";
}

/* User icon classes */
.icon-usr-home::before {
  content: "\e76c";
}

.icon-usr-alarm::before {
  content: "\e76b";
}

.icon-usr-configure::before {
  content: "\e806";
}

.icon-usr-settings::before {
  content: "\e807";
}

.icon-usr-adjust::before {
  content: "\e808";
}

.icon-usr-clock::before {
  content: "\e809";
}

.icon-usr-log::before {
  content: "\e80c";
}

.icon-usr-bug::before {
  content: "\e80f";
}

.icon-usr-brush::before {
  content: "\e810";
}

.icon-usr-trash::before {
  content: "\e813";
}

.icon-usr-lock::before {
  content: "\e814";
}

.icon-usr-onoff::before {
  content: "\e816";
}

.icon-usr-warning::before {
  content: "\e817";
}

.icon-usr-favorite-a::before {
  content: "\e81f";
}

.icon-usr-favorite::before {
  content: "\e820";
}

.icon-usr-new::before {
  content: "\e821";
}

.icon-usr-chart-bar::before {
  content: "\e822";
}

.icon-usr-chart-area::before {
  content: "\e823";
}

.icon-usr-chart-pie::before {
  content: "\e824";
}

.icon-usr-chart-line::before {
  content: "\e825";
}

.icon-usr-folder::before {
  content: "\e828";
}

.icon-usr-component::before {
  content: "\e829";
}

.icon-usr-components::before {
  content: "\e82a";
}

.icon-usr-users::before {
  content: "\e82b";
}

.icon-usr-area::before {
  content: "\e82c";
}

.icon-usr-user::before {
  content: "\e82d";
}

.icon-usr-location::before {
  content: "\e82e";
}

.icon-usr-dashboard::before {
  content: "\e831";
}

.icon-usr-pencil::before {
  content: "\e832";
}

.icon-usr-calc::before {
  content: "\f1ec";
}

.icon-usr-history::before {
  content: "\f1da";
}

.icon-usr-print::before {
  content: "\e837";
}

.icon-usr-download::before {
  content: "\e838";
}

.icon-usr-upload::before {
  content: "\e85d";
}

.icon-usr-eye::before {
  content: "\e83d";
}

.icon-usr-info::before {
  content: "\f086";
}

.icon-usr-interact::before {
  content: "\e840";
}

.icon-usr-api::before {
  content: "\e841";
}

.icon-usr-camera::before {
  content: "\e843";
}

.icon-usr-fire::before {
  content: "\e844";
}

.icon-usr-lightning::before {
  content: "\e812";
}

.icon-usr-code::before {
  content: "\f121";
}

.icon-usr-terminal::before {
  content: "\e830";
}

.icon-usr-cog::before {
  content: "\e845";
}

.icon-usr-rocket::before {
  content: "\f135";
}

.icon-usr-flag::before {
  content: "\e846";
}

.icon-usr-stack::before {
  content: "\e847";
}

.icon-usr-copy::before {
  content: "\f0c5";
}

.icon-usr-id-card::before {
  content: "\f2c3";
}

.icon-usr-slideshow::before {
  content: "\f0f5";
}

.icon-usr-calendar::before {
  content: "\e849";
}

.icon-usr-box::before {
  content: "\f187";
}

.icon-usr-file::before {
  content: "\e84a";
}

.icon-usr-link::before {
  content: "\e84b";
}

.icon-usr-accessibility::before {
  content: "\e84c";
}

.icon-usr-truck::before {
  content: "\e84d";
}

.icon-usr-car::before {
  content: "\f1b9";
}

.icon-usr-road::before {
  content: "\e84e";
}

.icon-usr-paw::before {
  content: "\f1b0";
}

.icon-usr-bed::before {
  content: "\f236";
}

.icon-usr-coffee::before {
  content: "\f0f4";
}

.icon-usr-thermometer::before {
  content: "\f2c7";
}

.icon-usr-snowflake::before {
  content: "\f2dc";
}

.icon-usr-table::before {
  content: "\f0ce";
}

.icon-usr-zone::before {
  content: "\f351";
}

.icon-usr-music::before {
  content: "\e853";
}

.icon-usr-shield::before {
  content: "\f132";
}

.icon-usr-mail::before {
  content: "\e8ef";
}

.icon-usr-soccer-ball::before {
  content: "\f1e3";
}

.icon-usr-bath::before {
  content: "\f2cd";
}

.icon-usr-battery::before {
  content: "\e800";
}

.icon-usr-bicycle::before {
  content: "\f206";
}

.icon-usr-newspaper::before {
  content: "\f1ea";
}

.icon-usr-shower::before {
  content: "\f2cc";
}

.icon-usr-swimming::before {
  content: "\e768";
}

.icon-usr-phone::before {
  content: "\e858";
}

.icon-usr-phone-squared::before {
  content: "\f098";
}

.icon-usr-tag::before {
  content: "\e801";
}

.icon-usr-tags::before {
  content: "\e802";
}

.icon-usr-refresh::before {
  content: "\e75d";
}

.icon-usr-comment::before {
  content: "\f0e5";
}

.icon-usr-leaf::before {
  content: "\f249";
}

/* ELKO EP user icon classes */
.icon-usr-elko-power::before {
  content: "\e910";
}

.icon-usr-elko-power-circled::before {
  content: "\e911";
}

.icon-usr-elko-cancel::before {
  content: "\e915";
}

.icon-usr-elko-plus::before {
  content: "\e916";
}

.icon-usr-elko-minus::before {
  content: "\e917";
}

.icon-usr-elko-settings::before {
  content: "\e918";
}

.icon-usr-elko-on::before {
  content: "\e87e";
}

.icon-usr-elko-off::before {
  content: "\e87f";
}

.icon-usr-elko-rgb::before {
  content: "\e880";
}

.icon-usr-elko-up-open::before {
  content: "\e881";
}

.icon-usr-elko-down-open::before {
  content: "\e882";
}

.icon-usr-elko-up-filled::before {
  content: "\e883";
}

.icon-usr-elko-down-filled::before {
  content: "\e884";
}

.icon-usr-elko-down-triple::before {
  content: "\e885";
}

.icon-usr-elko-up-triple::before {
  content: "\e886";
}

.icon-usr-elko-left-open::before {
  content: "\e887";
}

.icon-usr-elko-right-open::before {
  content: "\e888";
}

.icon-usr-elko-left-filled::before {
  content: "\e889";
}

.icon-usr-elko-right-filled::before {
  content: "\e88a";
}

.icon-usr-elko-left-triple::before {
  content: "\e88b";
}

.icon-usr-elko-right-triple::before {
  content: "\e88c";
}

.icon-usr-elko-moonshine::before {
  content: "\e88d";
}

.icon-usr-elko-sun::before {
  content: "\e88e";
}

.icon-usr-elko-sunshine::before {
  content: "\e88f";
}

.icon-usr-elko-cloud-sun::before {
  content: "\e890";
}

.icon-usr-elko-sunrise::before {
  content: "\e891";
}

.icon-usr-elko-bulb-on::before {
  content: "\e892";
}

.icon-usr-elko-bulb::before {
  content: "\e893";
}

.icon-usr-elko-bulb-off::before {
  content: "\e894";
}

.icon-usr-elko-bulb-plus::before {
  content: "\e895";
}

.icon-usr-elko-bulb-minus::before {
  content: "\e896";
}

.icon-usr-elko-bulb-night::before {
  content: "\e897";
}

.icon-usr-elko-bulb-dim::before {
  content: "\e898";
}

.icon-usr-elko-floor-lamp-on::before {
  content: "\e899";
}

.icon-usr-elko-wall-lamp-on::before {
  content: "\e89a";
}

.icon-usr-elko-chandelier-on::before {
  content: "\e89b";
}

.icon-usr-elko-table-lamp-on::before {
  content: "\e89c";
}

.icon-usr-elko-spotlights-on::before {
  content: "\e89d";
}

.icon-usr-elko-spotlights2-on::before {
  content: "\e89e";
}

.icon-usr-elko-beacon-on::before {
  content: "\e8a0";
}

.icon-usr-elko-floor-lamp::before {
  content: "\e8a1";
}

.icon-usr-elko-wall-lamp::before {
  content: "\e8a2";
}

.icon-usr-elko-chandelier::before {
  content: "\e8a3";
}

.icon-usr-elko-table-lamp::before {
  content: "\e8a4";
}

.icon-usr-elko-spotlights::before {
  content: "\e8a5";
}

.icon-usr-elko-spotlights2::before {
  content: "\e8a6";
}

.icon-usr-elko-floor-lamp2::before {
  content: "\e8a7";
}

.icon-usr-elko-table-lamp2::before {
  content: "\e8a8";
}

.icon-usr-elko-shutter-close::before {
  content: "\e8a9";
}

.icon-usr-elko-shutter-open::before {
  content: "\e8aa";
}

.icon-usr-elko-shutter-up::before {
  content: "\e8ab";
}

.icon-usr-elko-shutter-down::before {
  content: "\e8ac";
}

.icon-usr-elko-merge-curtain::before {
  content: "\e8ad";
}

.icon-usr-elko-split-curtain::before {
  content: "\e8ae";
}

.icon-usr-elko-curtain-right::before {
  content: "\e8af";
}

.icon-usr-elko-curtain-left::before {
  content: "\e8b0";
}

.icon-usr-elko-blinds::before {
  content: "\e8b1";
}

.icon-usr-elko-blinds-open::before {
  content: "\e8b2";
}

.icon-usr-elko-blinds-up::before {
  content: "\e8b3";
}

.icon-usr-elko-blinds-down::before {
  content: "\e8b4";
}

.icon-usr-elko-blinds-open1::before {
  content: "\e8b5";
}

.icon-usr-elko-blinds-up1::before {
  content: "\e8b6";
}

.icon-usr-elko-blinds-down2::before {
  content: "\e8b7";
}

.icon-usr-elko-curtain::before {
  content: "\e8b8";
}

.icon-usr-elko-shutter-open1::before {
  content: "\e8b9";
}

.icon-usr-elko-door::before {
  content: "\e8ba";
}

.icon-usr-elko-door-open::before {
  content: "\e8bb";
}

.icon-usr-elko-gate-open::before {
  content: "\e8bc";
}

.icon-usr-elko-gate-close::before {
  content: "\e8bd";
}

.icon-usr-elko-gate-open1::before {
  content: "\e8be";
}

.icon-usr-elko-gate-close1::before {
  content: "\e8bf";
}

.icon-usr-elko-garage::before {
  content: "\e8c0";
}

.icon-usr-elko-car::before {
  content: "\e8c1";
}

.icon-usr-elko-garage-close::before {
  content: "\e8c2";
}

.icon-usr-elko-garage-open::before {
  content: "\e8c3";
}

.icon-usr-elko-pool::before {
  content: "\e8c4";
}

.icon-usr-elko-media::before {
  content: "\e8c5";
}

.icon-usr-elko-house::before {
  content: "\e8c6";
}

.icon-usr-elko-bedroom::before {
  content: "\e8c7";
}

.icon-usr-elko-kitchen::before {
  content: "\e8c8";
}

.icon-usr-elko-childroom::before {
  content: "\e8c9";
}

.icon-usr-elko-wardrobe::before {
  content: "\e8ca";
}

.icon-usr-elko-library::before {
  content: "\e8cb";
}

.icon-usr-elko-workroom::before {
  content: "\e8cc";
}

.icon-usr-elko-bar::before {
  content: "\e8cd";
}

.icon-usr-elko-bar1::before {
  content: "\e8ce";
}

.icon-usr-elko-garden::before {
  content: "\e8cf";
}

.icon-usr-elko-bathroom::before {
  content: "\e8d0";
}

.icon-usr-elko-wardrobe1::before {
  content: "\e8d1";
}

.icon-usr-elko-gym::before {
  content: "\e8d2";
}

.icon-usr-elko-kitchen1::before {
  content: "\e8d3";
}

.icon-usr-elko-bar2::before {
  content: "\e8d4";
}

.icon-usr-elko-cellar::before {
  content: "\e8d5";
}

.icon-usr-elko-toilet::before {
  content: "\e8d6";
}

.icon-usr-elko-stove::before {
  content: "\e8d7";
}

.icon-usr-elko-maid::before {
  content: "\e8d8";
}

.icon-usr-elko-clean::before {
  content: "\e8d9";
}

.icon-usr-elko-coffee::before {
  content: "\e8dc";
}

.icon-usr-elko-heating::before {
  content: "\e8dd";
}

.icon-usr-elko-celsius::before {
  content: "\e8df";
}

.icon-usr-elko-fahrenheit::before {
  content: "\e8e0";
}

.icon-usr-elko-thermometer::before {
  content: "\e8e2";
}

.icon-usr-elko-thermometer-celsius::before {
  content: "\e8e3";
}

.icon-usr-elko-vents3::before {
  content: "\e8e6";
}

.icon-usr-elko-fan-on::before {
  content: "\e8e7";
}

.icon-usr-elko-fire::before {
  content: "\e8eb";
}

.icon-usr-elko-turbine::before {
  content: "\e8ec";
}

.icon-usr-elko-eco::before {
  content: "\e8ed";
}

.icon-usr-elko-cooling::before {
  content: "\e8ee";
}

.icon-usr-elko-refresh::before {
  content: "\e819";
}

.icon-usr-elko-refresh1::before {
  content: "\e860";
}

.icon-usr-elko-recuperation::before {
  content: "\e85b";
}

.icon-usr-elko-irrigation::before {
  content: "\e8f2";
}

.icon-usr-elko-chair-human::before {
  content: "\e8f3";
}

.icon-usr-elko-chair::before {
  content: "\e8f4";
}

.icon-usr-elko-airplane::before {
  content: "\e8f5";
}

.icon-usr-elko-briefcase::before {
  content: "\e8f6";
}

.icon-usr-elko-projector::before {
  content: "\e8f7";
}

.icon-usr-elko-movie::before {
  content: "\e8f8";
}

.icon-usr-elko-movie1::before {
  content: "\e8f9";
}

.icon-usr-elko-heart::before {
  content: "\e8fa";
}

.icon-usr-elko-camera::before {
  content: "\e8fb";
}

.icon-usr-elko-camera-dome::before {
  content: "\e8fc";
}

.icon-usr-elko-nurse-call::before {
  content: "\e8fd";
}

.icon-usr-elko-key::before {
  content: "\e8fe";
}

.icon-usr-elko-appliance::before {
  content: "\e8ff";
}

.icon-usr-elko-intercom::before {
  content: "\e900";
}

.icon-usr-elko-mute::before {
  content: "\e901";
}

.icon-usr-elko-bell-ring::before {
  content: "\e902";
}

.icon-usr-elko-unlock::before {
  content: "\e903";
}

.icon-usr-elko-lock::before {
  content: "\e904";
}

.icon-usr-elko-info::before {
  content: "\e905";
}

.icon-usr-elko-back::before {
  content: "\e906";
}

.icon-usr-elko-touch::before {
  content: "\e907";
}

.icon-usr-elko-mute1::before {
  content: "\e908";
}

.icon-usr-elko-sound-level1::before {
  content: "\e909";
}

.icon-usr-elko-sound-level2::before {
  content: "\e90a";
}

.icon-usr-elko-sound-level3::before {
  content: "\e90b";
}

.icon-usr-elko-call::before {
  content: "\e90d";
}

.icon-usr-elko-hangup::before {
  content: "\e90e";
}

.icon-usr-elko-mail::before {
  content: "\e90f";
}

@font-face {
  font-family: "fontello";
  src: url("/fonts/fontello.eot?70ebf583");
  src: url("/fonts/fontello.eot?70ebf583#iefix") format("embedded-opentype"), url("/fonts/fontello.woff2?70ebf583") format("woff2"), url("/fonts/fontello.woff?70ebf583") format("woff"), url("/fonts/fontello.ttf?70ebf583") format("truetype"), url("/fonts/fontello.svg?70ebf583#fontello") format("svg");
  font-weight: normal;
  font-style: normal;
}
#basic-chart .infobar .SeriesInfoBox .buttons span::before, .btn-dropdown .options a.x-cust-series-toggle::before, .ScadaWrapper .edit-panel .toggler::before, .HexDash .row > .fonticon::before, .hex7config .cells a.fonticon::before, .Dashboard.custom147 > .Row a.fonticon::before, .EventRecord::before, #eventlog #filterslider .marker::before, .CompConfWidget.spoiler.collapsed > .handle::before, .spoiler.collapsed.UwdProblemComp > .handle::before, .spoiler.collapsed.ValueWatcher > .handle::before, .spoiler.collapsed.TabbedSettingsSubwindow > .handle::before, .spoiler.collapsed.ValueWatcherConfig > .handle::before, .CompConfWidget.spoiler > .handle::before, .spoiler.UwdProblemComp > .handle::before, .spoiler.ValueWatcher > .handle::before, .spoiler.TabbedSettingsSubwindow > .handle::before, .spoiler.ValueWatcherConfig > .handle::before, #complist-detailed tr.realm-banner > td::before, .btn-open::before, .btn-next::before, .btn-back::before, .btn-dlg-ok-warn::before, .btn-dlg-reset::before, .btn-cancel::before, .btn-dlg-cancel::before, .btn-delete::before, .btn-adjust::before, .btn-edit::before, .btn-add::before, .btn-confirm::before,
.btn-save::before,
.btn-dlg-confirm::before, #sidebar .ToggleBox.collapsed .Toggler i.Toggler__arrowbtn::before, #sidebar .ToggleBox .Toggler i.Toggler__arrowbtn::before, .expanded #sidebar-toggler i::before, .collapsed #sidebar-toggler i::before, #sidebar-toggler i::before, #mobile-sidebar-toggle::before, .layout-main .Box.collapse-rows h2::before, .Table .draghandle::before, .TypeIcon.history::before, .TypeIcon.time::before, .TypeIcon.eye::before, .TypeIcon.power::before, .TypeIcon.auto::before, .TypeIcon.drying::before, .TypeIcon.heating::before, .TypeIcon.ventilation::before, .TypeIcon.percent::before, [class^=icon-]::before, [class*=" icon-"]::before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.ControlMode {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  background-size: contain;
}
.ControlMode.day {
  background-image: url("/images/item/time_day.png");
}
.ControlMode.night {
  background-image: url("/images/item/time_night.png");
}
.ControlMode.depression {
  background-image: url("/images/item/time_depression.png");
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* this is the gray / blue icon used on panel widgets */
.Working {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  margin: 0 2px;
  background-size: contain;
  background-image: url("/images/item/progress_idle.svg");
  color: #cfcece;
}
.Working.working {
  opacity: 1;
  background-image: url("/images/item/progress_working.svg");
  animation: spin 3s infinite linear;
  color: var(--c-primary);
}
.Working.small {
  width: 20px;
  height: 20px;
}

.TypeIcon {
  width: 26px;
  height: 26px;
  background-size: contain;
  color: #cfcece;
}
.TypeIcon svg {
  position: static !important;
}
.TypeIcon.hot {
  background-image: url("/images/item/type/temp_hot.png");
}
.TypeIcon.cold {
  background-image: url("/images/item/type/temp_cold.png");
}
.TypeIcon.chilly {
  background-image: url("/images/item/type/temp_chilly2.png");
}
.TypeIcon.temperature {
  background-image: url("/images/item/type/temp_hot.png");
}
.TypeIcon.precipitation {
  background-image: url("/images/item/type/precipitation.png");
}
.TypeIcon.wind {
  background-image: url("/images/item/type/wind.png");
}
.TypeIcon.windbag {
  background-image: url("/images/item/type/windbag.png");
}
.TypeIcon.pressure {
  background-image: url("/images/item/type/pressure2.svg");
}
.TypeIcon.humidity {
  background-image: url("/images/item/type/humidity.png");
}
.TypeIcon.dew_point {
  background-image: url("/images/item/type/dew_point.png");
}
.TypeIcon.exposure {
  background-image: url("/images/item/type/exposure.png");
}
.TypeIcon.battery {
  background-image: url("/images/item/type/battery.png");
}
.TypeIcon.co2 {
  background-image: url("/images/item/type/co2.png");
}
.TypeIcon.water_level {
  background-image: url("/images/item/type/water_level.png");
}
.TypeIcon.electro {
  background-image: url("/images/item/type/electro.png");
}
.TypeIcon.gas {
  background-image: url("/images/item/type/gas.png");
}
.TypeIcon.water {
  background-image: url("/images/item/type/water.png");
}
.TypeIcon.water_hot {
  background-image: url("/images/item/type/water_hot.svg");
}
.TypeIcon.calorimeter {
  background-image: url("/images/item/type/calorimeter.png");
}
.TypeIcon.sludge {
  background-image: url("/images/item/type/sludge.png");
}
.TypeIcon.percent, .TypeIcon.ventilation, .TypeIcon.heating, .TypeIcon.drying, .TypeIcon.auto, .TypeIcon.power, .TypeIcon.eye {
  display: flex;
  justify-content: center;
  align-items: center;
}
.TypeIcon.percent::before {
  content: "\e831";
}
.TypeIcon.ventilation::before {
  content: "\e8e6";
}
.TypeIcon.heating::before {
  content: "\e8dd";
}
.TypeIcon.drying::before {
  content: "\e8f2";
}
.TypeIcon.auto::before {
  content: "\e860";
}
.TypeIcon.power::before {
  content: "\e910";
}
.TypeIcon.eye::before {
  content: "\e83d";
}
.TypeIcon.on {
  text-shadow: 0 0 10px #0ca5ef;
  color: #0ca5ef;
}
.TypeIcon.time::before {
  content: "\e809";
}
.TypeIcon.history::before {
  content: "\e823";
}
.TypeIcon.none {
  display: none;
}

.HistoryIcon {
  display: inline-block;
  cursor: pointer;
  height: 25px;
  width: 25px;
  background-image: url("/images/item/chart.svg");
}

svg.inline-icon {
  fill: currentColor;
}

.SvgIcon {
  background-image: none !important;
  position: relative;
}
.SvgIcon svg {
  fill: currentColor;
  width: 100%;
  height: 100%;
}

.SvgIconCentered {
  background-image: none !important;
  position: relative;
}
.SvgIconCentered svg {
  fill: currentColor;
  position: absolute;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.DashSvgIcon {
  background-image: none !important;
  position: relative;
}
.DashSvgIcon svg {
  fill: currentColor;
  position: absolute;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.DashSvgIcon svg {
  width: 60%;
  height: 60%;
}

.PinDialog, .Modal .Dialog {
  display: block;
  text-align: center;
  min-width: 300px;
  background: #323232;
  border-radius: 2px;
  color: #f1f1f1;
  border: 1px solid #5a5a5a;
  box-shadow: 0 0 10px black;
  font-size: 1rem;
}

.ModalNew {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ModalNew__overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background: rgba(0, 0, 0, 0.5);
}

/* Styles for deprecated Dialog */
.Modal {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  display: none;
}
.Modal.main {
  z-index: 2000;
}
.Modal .Dialog #dialog-error {
  color: #e84040;
}
.Modal .Dialog .Form .field-changed {
  color: var(--c-primary) !important;
}
.Modal .Dialog .Form .form-error, .Modal .Dialog .Form .form-help {
  text-shadow: none;
}
.Modal .Dialog .Form .bs-tooltip {
  font-size: 1rem;
}
.Modal .Dialog .Form .Row {
  margin: 0;
}
.Modal .Dialog .Form .Row label, .Modal .Dialog .Form .Row .checkbox-wrap {
  width: 15rem;
}
.Modal .Dialog .Form label {
  text-shadow: none;
  color: #f1f1f1;
}
.Modal .Dialog input[type=number]:not(.Table.tableeditor input, .Row.expression_field textarea), .Modal .Dialog input[type=text]:not(.Table.tableeditor input, .Row.expression_field textarea), .Modal .Dialog textarea:not(.Table.tableeditor input, .Row.expression_field textarea), .Modal .Dialog .Field:not(.Table.tableeditor input, .Row.expression_field textarea) {
  margin: 4px auto;
}
.Modal .Dialog .Field {
  display: block;
}
.Modal .Dialog .Field.inline {
  display: inline-block;
  width: 12em;
}
.Modal .Dialog .Field[type=number].inline {
  width: 6em;
}
.Modal .Dialog textarea.Field.inline {
  width: 16em;
  height: 4em;
  resize: vertical;
}
.Modal .Dialog select, .Modal .Dialog .SelectField {
  min-width: 8em;
  font-size: 0.9rem;
  margin: 4px auto;
  padding: 0 20px 0 4px;
}
.Modal .Dialog select option, .Modal .Dialog .SelectField option {
  background: #ddd;
  color: black;
}
.Modal .Dialog .SelectField {
  display: block;
}
.Modal .Dialog .SelectField.inline {
  display: inline-block;
}
.Modal .Dialog .SelectField.large {
  box-shadow: none;
  background-image: none;
  padding-right: 4px;
}
.Modal .Dialog #dlg-choices button {
  margin: 3px 6px;
}
.Modal .Dialog.alert {
  top: 300px;
  max-width: 500px;
}
.Modal .Dialog.alert.wide {
  max-width: min(1200px, 90vw);
}
.Modal .Dialog.alert input[type=password]:not(.Table.tableeditor input), .Modal .Dialog.alert input[type=text]:not(.Table.tableeditor input), .Modal .Dialog.alert input[type=number]:not(.Table.tableeditor input), .Modal .Dialog.alert textarea:not(.Table.tableeditor input), .Modal .Dialog.alert input:not([type]):not(.Table.tableeditor input), .Modal .Dialog.alert input[type=datetime-local]:not(.Table.tableeditor input), .Modal .Dialog.alert input[type=date]:not(.Table.tableeditor input), .Modal .Dialog.alert input[type=month]:not(.Table.tableeditor input), .Modal .Dialog.alert input[type=time]:not(.Table.tableeditor input) {
  min-width: 15em;
}
.Modal .Dialog.alert textarea {
  width: 20em;
  height: 5em;
}
.Modal .Dialog > div {
  padding: 0.617rem;
  position: relative;
}
.Modal .Dialog > div.Header {
  font-weight: bold;
  padding-bottom: 0;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  color: var(--c-primary);
}
.Modal .Dialog > div.Body {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  text-align: left;
  overflow-y: auto;
  max-height: 85vh;
}
.Modal .Dialog > div.Body p:first-child {
  margin-top: 0;
}
.Modal .Dialog > div.Body p:last-child {
  margin-bottom: 0;
}
.Modal .Dialog > div.Buttons {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.Modal .Dialog > div.Buttons .button {
  margin-right: 0.617rem;
}
.Modal .Dialog > div.Buttons .button:last-child {
  margin-right: 0;
}
.Modal .Dialog > div.Buttons.right {
  text-align: right;
}
.Modal .Dialog > div.Buttons.left {
  text-align: left;
}
.Modal .Dialog > div.Buttons div.Left {
  text-align: left;
}
.Modal .Dialog > div.Buttons div.Right {
  text-align: right;
}
.Modal .Dialog > div.Buttons.sided {
  text-align: left;
}
.Modal .Dialog > div.Buttons.sided div.Right {
  position: absolute;
  right: 0.617rem;
  top: 0.617rem;
}

.form_modal.wide .Dialog {
  width: 620px;
}
.form_modal .form-help {
  text-shadow: none;
}
.form_modal .bs-tooltip {
  font-size: 85%;
}
.form_modal .bs-tooltip .bs-tooltip-inner {
  box-shadow: none;
}
.form_modal label.error {
  color: #e84040;
}
.form_modal table {
  margin: 0 auto;
}
.form_modal td, .form_modal th {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}
.form_modal th {
  font-size: 0.9rem;
  padding-right: 0.5rem;
  text-align: right;
}
.form_modal td.left, .form_modal th.left {
  text-align: left;
}
.form_modal td.top, .form_modal th.top {
  vertical-align: top;
  line-height: 3em;
}

.Modal .expr-picker label {
  text-align: left;
}
.Modal .expr-picker input {
  min-width: unset !important;
}

.DialogNew {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.617rem;
  min-width: 300px;
  max-width: 500px;
  background: #323232;
  border-radius: 2px;
  color: #f1f1f1;
  border: 1px solid #5a5a5a;
  box-shadow: 0 0 10px black;
  font-size: 1rem;
  position: relative;
  /* === Overrides === */
}
.DialogNew--left {
  text-align: left;
}
.DialogNew--left .DialogNew__header--narrow {
  padding-left: 0;
}
.DialogNew--center {
  text-align: center;
}
.DialogNew--wide {
  max-width: min(1200px, 90vw);
}
.DialogNew--full-width {
  width: 100%;
}
.DialogNew__header {
  position: relative;
  font-weight: bold;
  color: var(--c-primary);
}
.DialogNew__header--narrow {
  padding: 0 28px;
}
.DialogNew__header:empty {
  display: none;
}
.DialogNew__body {
  position: relative;
  overflow-y: auto;
  max-height: 85vh;
}
.DialogNew__body:empty {
  display: none;
}
.DialogNew__buttons {
  position: relative;
  display: flex;
  gap: 0.617rem;
}
.DialogNew__buttons:empty {
  display: none;
}
.DialogNew--center .DialogNew__buttons {
  justify-content: center;
}
.DialogNew__close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 0.8rem;
}
.DialogNew .Form .form-error, .DialogNew .Form .form-help {
  text-shadow: none;
}
.DialogNew .Form .bs-tooltip {
  font-size: 1rem;
}
.DialogNew .Form .Row {
  margin: 0;
}
.DialogNew .Form .Row label, .DialogNew .Form .Row .checkbox-wrap {
  width: 15rem;
}
.DialogNew input[type=number], .DialogNew input[type=text], .DialogNew textarea, .DialogNew .Field {
  margin: 4px auto;
}
.DialogNew .Field {
  display: block;
}
.DialogNew .Field.inline {
  display: inline-block;
  width: 12em;
}
.DialogNew .Field[type=number].inline {
  width: 6em;
}
.DialogNew textarea.Field.inline {
  width: 16em;
  height: 4em;
  resize: vertical;
}
.DialogNew select, .DialogNew .SelectField {
  min-width: 8em;
  font-size: 0.9rem;
  margin: 4px auto;
  padding: 0 20px 0 4px;
}
.DialogNew select option, .DialogNew .SelectField option {
  background: #ddd;
  color: black;
}
.DialogNew .SelectField {
  display: block;
}
.DialogNew .SelectField.inline {
  display: inline-block;
}
.DialogNew .SelectField.large {
  box-shadow: none;
  background-image: none;
  padding-right: 4px;
}
.DialogNew #dlg-choices button {
  margin: 3px 6px;
}
.DialogNew input[type=password]:not(.Table.tableeditor input), .DialogNew input[type=text]:not(.Table.tableeditor input), .DialogNew input[type=number]:not(.Table.tableeditor input), .DialogNew textarea:not(.Table.tableeditor input), .DialogNew input:not([type]):not(.Table.tableeditor input), .DialogNew input[type=datetime-local]:not(.Table.tableeditor input), .DialogNew input[type=date]:not(.Table.tableeditor input), .DialogNew input[type=month]:not(.Table.tableeditor input), .DialogNew input[type=time]:not(.Table.tableeditor input) {
  min-width: 15em;
}
.DialogNew textarea {
  width: 20em;
  height: 5em;
}
.DialogNew__body p:first-child {
  margin-top: 0;
}
.DialogNew__body p:last-child {
  margin-bottom: 0;
}
.DialogNew .expr-picker label {
  text-align: left;
}
.DialogNew .expr-picker input {
  min-width: unset !important;
}

.Table td.buttons, .data-table td.buttons {
  padding: 0.235rem;
  white-space: nowrap;
}
.Table td.buttons .buttons-wrap, .data-table td.buttons .buttons-wrap {
  display: flex;
  gap: 0.235rem;
}

.Table {
  background-color: #101010;
  margin-top: 0.617rem;
  min-width: 100%;
  max-width: 100%;
  border: none;
  box-shadow: 0 0 15px none;
  border-collapse: collapse;
  /* special effect for row under mouse */
}
.Table.highlight tr:hover td {
  color: var(--c-primary);
}
.Table.no-margin {
  margin-top: 0;
}
.Table .draghandle, .Table .draghandle1 {
  width: 15px;
  margin: 0;
  padding: 0;
}
.Table .draghandle {
  color: #f1f1f1;
  cursor: move;
}
.Table .draghandle::before {
  content: "\f142";
}
.Table .draghandle1 {
  filter: brightness(150%);
}
.Table .button {
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.4705882353);
  margin-left: 0.1em;
  margin-right: 0.1em;
}
.Table ul {
  margin: 0;
}
.Table th {
  white-space: nowrap;
  background-color: var(--c-tabbar);
  color: #f1f1f1;
}
.Table th.no-background {
  background-color: unset;
}
.Table .text-highlight th, .Table .text-highlight td {
  color: var(--c-primary);
  font-weight: bold;
}
.Table th.clickable, .Table th.btn-history, .Table th.btn-statelog, .Table td.clickable, .Table td.btn-history, .Table td.btn-statelog {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.Table caption {
  padding-top: 0.381rem;
  padding-bottom: 0.381rem;
  color: #292929;
  text-align: left;
}
.Table tr:nth-child(even) {
  background: #2d2d2d;
}
.Table tr:nth-child(odd) {
  background: #292929;
}
.Table tr:nth-child(odd) td.checkbox.checked {
  background: #404040;
}
.Table td, .Table th {
  padding: 0.381rem;
  padding-right: 0;
}
.Table td:last-child, .Table th:last-child {
  padding-right: 0.381rem;
}
.Table td.buttons:last-child, .Table th.buttons:last-child {
  padding-right: 0.235rem;
}
.Table td[class*=col-], .Table th[class*=col-] {
  position: static;
  float: none;
  display: table-cell;
}
.Table th {
  text-align: left;
  background-color: var(--c-tabbar);
  border: 0 none;
  color: #f1f1f1;
}
.Table.cell-top td {
  vertical-align: top;
}
.Table td {
  vertical-align: middle;
  border: 0 none;
  color: #f1f1f1;
}
.Table td.checkbox {
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.Table td.checkbox.checked {
  background: #505050;
}
.Table td.hcenter, .Table th.hcenter {
  text-align: center;
}
.Table td.hright, .Table th.hright {
  text-align: right;
}
.Table td.top, .Table th.top {
  vertical-align: top;
}
.Table td.nowrap, .Table th.nowrap {
  white-space: nowrap;
}
.Table thead th {
  vertical-align: bottom;
}
.Table > caption + thead > tr:first-child > th,
.Table > caption + thead > tr:first-child > td,
.Table > colgroup + thead > tr:first-child > th,
.Table > colgroup + thead > tr:first-child > td,
.Table > thead:first-child > tr:first-child > th,
.Table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.Table.narrow {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
.Table.condensed th, .Table.condensed td {
  padding: 0.235rem;
}
.Table.bordered {
  border: 1px solid #323232;
}
.Table.bordered th, .Table.bordered td {
  border: 1px solid #323232;
}
.Table.bordered thead th, .Table.bordered thead td {
  border-bottom-width: 2px;
}
.Table.hover > tbody > tr:hover {
  background-color: #252525;
}
.Table tfoot > tr {
  border-top: 2px solid var(--c-primary);
  background-color: #292929 !important;
}
.Table td a.link,
.Table td a.link:hover,
.Table td a.link:active {
  color: var(--c-primary);
  text-shadow: 0 1px rgba(255, 255, 255, 0.2);
}
.Table td a.link::before, .Table td a.link i::before,
.Table td a.link:hover::before,
.Table td a.link:hover i::before,
.Table td a.link:active::before,
.Table td a.link:active i::before {
  text-decoration: none;
}
.Table td a.link:hover,
.Table td a.link:active {
  color: var(--c-primary);
}

table.stretch.data-table, table.layout-table.stretch {
  width: 100%;
}
table.data-table > tbody > tr > td,
table.data-table > tbody > tr > th,
table.data-table > thead > tr > th, table.layout-table > tbody > tr > td,
table.layout-table > tbody > tr > th,
table.layout-table > thead > tr > th {
  padding: 0.381rem;
}

table.layout-table-sm > tbody > tr > td,
table.layout-table-sm > tbody > tr > th,
table.layout-table-sm > thead > tr > th,
table.layout-table-sm > thead > tr > th {
  padding: 2px 0.235rem;
}

table.data-table {
  background: #323232;
}
table.data-table.table-small > tbody > tr > td,
table.data-table.table-small > tbody > tr > th,
table.data-table.table-small > thead > tr > th,
table.data-table.table-small > thead > tr > th {
  padding: 0.235rem;
  font-size: 80%;
}
table.data-table,
table.data-table > thead > tr > th,
table.data-table > tbody > tr > td,
table.data-table > tbody > tr > th {
  border: 1px solid #a9a9a9;
}
table.data-table > thead > tr > th,
table.data-table > tbody > tr > th {
  text-align: left;
  background-color: rgba(255, 255, 255, 0.1);
}
table.data-table.nowrap td, table.data-table.nowrap th {
  white-space: nowrap;
}

.ColorPreview {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 1px black;
  width: 1.8em;
  height: 1.8em;
  vertical-align: middle;
  cursor: pointer;
}

.Table .ColorPreview {
  width: 1.8em;
  height: 1.8em;
}

.fields .Table.tableeditor {
  margin-top: 0;
}

.Table.tableeditor {
  table-layout: fixed;
  border-collapse: collapse;
}
.Table.tableeditor th:first-child {
  width: 15px;
  min-width: 15px;
}
.Table.tableeditor .buttons-col {
  width: 100%;
  white-space: nowrap;
  text-align: right;
}
.Table.tableeditor .buttons-col a {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.3;
  padding: 0 0.235rem;
}
.Table.tableeditor .buttons-col a:active, .Table.tableeditor .buttons-col a.pushed {
  top: 1px;
}
.Table.tableeditor tr:hover .buttons-col a {
  opacity: 0.8;
}
.Table.tableeditor tr:hover .buttons-col a:hover {
  opacity: 1;
}
.Table.tableeditor .selected {
  border: 1px solid grey;
}
.Table.tableeditor .selectedShift {
  border: 1px dashed grey;
}
.Table.tableeditor .IconPicker {
  margin-bottom: 0;
}

.flash-hover .FlashMessage,
.FlashMessage.float {
  position: fixed;
  z-index: 190;
}
@media screen and (min-width: 1101px) {
  .flash-hover .FlashMessage,
  .FlashMessage.float {
    max-width: 30vw;
  }
}
.flash-hover .FlashMessage .close,
.FlashMessage.float .close {
  padding-right: 0;
  padding-left: 0.617rem;
}

.flash-hover.flash-right .FlashMessage,
.FlashMessage.float.right {
  right: 0.617rem;
}

.FlashMessage {
  margin-bottom: 0.617rem;
  border: 1px solid transparent;
  border-radius: 4px;
  line-height: normal;
  height: auto;
  width: auto;
  display: flex;
  flex-direction: row;
  font-size: 120%;
  /* resetting default flowbox button style */
}
.FlashMessage > * {
  align-self: center;
  padding: 0.381rem;
  padding-right: 0.617rem;
  margin: 0;
  margin-right: 0.381rem;
}
.FlashMessage > *:last-child {
  margin-right: 0;
}
.FlashMessage .content {
  flex-grow: 1;
  vertical-align: middle;
}
.FlashMessage .content a {
  font-weight: bold;
}
.FlashMessage.bad-config-notice .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.FlashMessage .close {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.7);
  float: right;
  font-size: 160%;
  text-decoration: none;
  padding-right: 0.2em;
}
.FlashMessage .close:hover {
  text-decoration: none;
}
.FlashMessage > p,
.FlashMessage > ul {
  margin-bottom: 0;
}
.FlashMessage > p + p {
  margin-top: 5px;
}
.FlashMessage.dismissable, .FlashMessage.dismissible {
  padding-right: 35px;
}
.FlashMessage.dismissable .close, .FlashMessage.dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
.FlashMessage.success {
  background-color: #148022;
  border-color: transparent;
}
.FlashMessage.success, .FlashMessage.success .content a {
  color: #bff6b7;
}
.FlashMessage.info {
  background-color: #009de6;
  border-color: transparent;
}
.FlashMessage.info, .FlashMessage.info .content a {
  color: #ddf3ff;
}
.FlashMessage.warning {
  background-color: #d87900;
  border-color: transparent;
}
.FlashMessage.warning, .FlashMessage.warning .content a {
  color: #fff2e2;
}
.FlashMessage.error {
  background-color: #c22531;
  border-color: transparent;
}
.FlashMessage.error, .FlashMessage.error .content a {
  color: #ffeef0;
}

/* Padding in the main layout's direct (visual) descendants */
/* Main outer container */
#outer-wrap {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

ul.pagination {
  padding-left: 0;
}
ul.pagination:first-child {
  margin-top: 0;
}
ul.pagination:last-child {
  margin-bottom: 0;
}

#outer-wrap.layout-error #form-wrapper, #outer-wrap.layout-lock #form-wrapper {
  width: 40rem;
  max-width: 100%;
  padding-bottom: 0.617rem;
  box-shadow: none;
  background: #323232;
  border: 1px solid #5a5a5a;
  border-radius: 0;
  background: #292929;
}
@media screen and (max-width: 544px) {
  #outer-wrap.layout-error #form-wrapper, #outer-wrap.layout-lock #form-wrapper {
    border-left-width: 5px;
    border-right-width: 5px;
    border-radius: 5px;
  }
  #outer-wrap.layout-error #form-wrapper .Form > h1, #outer-wrap.layout-lock #form-wrapper .Form > h1, #outer-wrap.layout-error #form-wrapper .Form > h2, #outer-wrap.layout-lock #form-wrapper .Form > h2 {
    margin: 0 0 0 0.617rem;
  }
}
#outer-wrap.layout-error #form-wrapper p, #outer-wrap.layout-lock #form-wrapper p {
  margin: 0;
  padding: 0 1rem 0.617rem;
}
#outer-wrap.layout-error #form-wrapper h1, #outer-wrap.layout-lock #form-wrapper h1 {
  margin-bottom: 0;
}
#outer-wrap.layout-error #form-caption, #outer-wrap.layout-lock #form-caption {
  padding: 0.381rem 1rem;
  display: flex;
  flex-direction: row;
  background: #292929;
}
@media screen and (max-width: 544px) {
  #outer-wrap.layout-error #form-caption, #outer-wrap.layout-lock #form-caption {
    padding: 0.381rem;
    text-align: center;
  }
}
#outer-wrap.layout-error #form-caption .Logo, #outer-wrap.layout-lock #form-caption .Logo {
  flex-grow: 1;
  background-image: url("/images/theme/blue_fb_logo.svg");
  background-image: var(--img-logo-full);
  background-position: left center;
  width: 224px;
  height: 4rem;
  display: block;
  background-size: contain;
  background-size: 17pc;
  margin-left: -1em;
}
#outer-wrap.layout-error .Languages, #outer-wrap.layout-lock .Languages, #outer-wrap.layout-error .HeaderExtra, #outer-wrap.layout-lock .HeaderExtra {
  margin-left: auto;
  align-self: center;
}

#outer-wrap.layout-lock {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #222222;
  padding: 0.617rem;
}
@media screen and (max-width: 1100px) {
  #outer-wrap.layout-lock {
    display: block;
    overflow-y: auto;
    padding: 0.381rem;
  }
  #outer-wrap.layout-lock #form-wrapper {
    margin: 0 auto;
  }
}
#outer-wrap.layout-lock .CompConfWidget .FormGroup label, #outer-wrap.layout-lock .UwdProblemComp .FormGroup label, #outer-wrap.layout-lock .ValueWatcher .FormGroup label, #outer-wrap.layout-lock .TabbedSettingsSubwindow .FormGroup label, #outer-wrap.layout-lock .ValueWatcherConfig .FormGroup label, #outer-wrap.layout-lock .CompConfWidget .FormGroup .Label, #outer-wrap.layout-lock .UwdProblemComp .FormGroup .Label, #outer-wrap.layout-lock .ValueWatcher .FormGroup .Label, #outer-wrap.layout-lock .TabbedSettingsSubwindow .FormGroup .Label, #outer-wrap.layout-lock .ValueWatcherConfig .FormGroup .Label {
  width: 12.383rem;
}
#outer-wrap.layout-lock .Form > h1, #outer-wrap.layout-lock .Form > h2 {
  margin: 0 0 0 13rem;
}
#outer-wrap.layout-lock .Form .Row.indent, #outer-wrap.layout-lock .Form .Row.buttons {
  padding-left: 13rem;
}
#outer-wrap.layout-lock .Form .Row label, #outer-wrap.layout-lock .Form .Row .Label {
  width: 13rem;
}
#outer-wrap.layout-lock .Form .Row .explain {
  padding-left: 13rem;
}
#outer-wrap.layout-lock .Form .Row.checkbox .checkbox-wrap {
  width: 13rem;
}
#outer-wrap.layout-lock .Form input[type=password], #outer-wrap.layout-lock .Form input[type=text], #outer-wrap.layout-lock .Form input[type=number], #outer-wrap.layout-lock .Form textarea, #outer-wrap.layout-lock .Form input:not([type]), #outer-wrap.layout-lock .Form input[type=datetime-local], #outer-wrap.layout-lock .Form input[type=date], #outer-wrap.layout-lock .Form input[type=month], #outer-wrap.layout-lock .Form input[type=time], #outer-wrap.layout-lock .Form select, #outer-wrap.layout-lock .Form label.select-wrap {
  width: 16rem;
}
#outer-wrap.layout-lock hr {
  background: #5a5a5a;
  margin-top: 0.617rem;
  margin-bottom: 0.617rem;
  border: 0 none;
  border-bottom: 1px solid #5a5a5a;
}

.layout-main {
  flex-direction: column;
}
.layout-main #content-wrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  min-height: 0;
  background: #222222;
}
@media screen and (max-width: 544px) {
  .layout-main #content-wrap {
    display: block;
    flex-direction: column;
    overflow-y: scroll;
  }
  .layout-main #content-wrap #content {
    position: static;
  }
}
.layout-main #content-wrap.no-fade-in #content {
  transition: none;
  opacity: 1;
}
.layout-main #content {
  flex: 1 1 auto;
  position: relative;
  background: #222222;
  overflow-y: auto;
  padding: 0.617rem;
  opacity: 0;
  transition: opacity 0.25s ease-in;
}
@media screen and (max-width: 544px) {
  .layout-main #content {
    padding: 0.381rem;
  }
}
html.not-touch .layout-main #content {
  scrollbar-width: auto;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch .layout-main #content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: #363636;
}
html.not-touch .layout-main #content::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 4px;
}

.layout-main #content.scroll {
  overflow-y: scroll;
}
.layout-main .load #content {
  opacity: 1;
}
.layout-main h1 {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.617rem;
  font-size: 1.4rem;
  text-align: left;
  padding: 0;
  padding-top: 0.235rem;
}
.grandstream .layout-main h1 {
  padding: 0.381rem;
}

@media screen and (max-width: 544px) {
  .layout-main h1 {
    padding: 0.381rem;
  }
}
.layout-main h1.fullwidth {
  max-width: 1800px;
}
.layout-main h1.fullwidth.full-h-stretch {
  max-width: initial;
}
@media screen and (max-width: 1100px) {
  .layout-main h1 {
    padding-top: 0;
    margin-bottom: 0;
  }
}
.layout-main .Box {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.617rem;
  margin-top: 0.381rem;
  position: relative;
  border-radius: 3px;
  box-shadow: none;
  background: #323232;
}
.grandstream .layout-main .Box {
  padding: 0.381rem;
}

@media screen and (max-width: 544px) {
  .layout-main .Box {
    padding: 0.381rem;
  }
}
.layout-main .Box.settingbox {
  border: 0 none;
}
.layout-main .Box.last {
  margin-bottom: 30px;
}
.layout-main .Box.collapse-rows h2 {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.layout-main .Box.collapse-rows h2::before {
  content: "\e81b";
}
.layout-main .Box.collapse-rows h2::before {
  vertical-align: middle;
  margin: 0 10px 0 0;
  position: relative;
  top: -2px;
  font-size: 110%;
}
.layout-main .Box.collapse-rows.collapsed .Row, .layout-main .Box.collapse-rows.collapsed .Table, .layout-main .Box.collapse-rows.collapsed hr, .layout-main .Box.collapse-rows.collapsed h3, .layout-main .Box.collapse-rows.collapsed .x-collapsible {
  display: none;
}
.layout-main .Box.collapse-rows.collapsed h2::before {
  content: "\f0f7";
}
.layout-main .Box.collapse-rows.collapsed .BoxButtons {
  margin-bottom: 0;
}
.layout-main .Box.collapse-rows.collapsed .BoxButtons a, .layout-main .Box.collapse-rows.collapsed .BoxButtons button {
  visibility: hidden;
}
.layout-main .Box > h2:first-child, .layout-main .Box > h3:first-child {
  margin-top: 0;
}
@media screen and (max-width: 544px) {
  .layout-main .Box {
    margin-top: 0.617rem;
  }
}
h1 + .layout-main .Box {
  margin-top: 0;
}
.layout-main .Box.wide {
  max-width: 1800px;
}
.layout-main .Box.wide.full-h-stretch {
  max-width: initial;
}
.layout-main .BoxTopEar {
  position: absolute;
  right: 0;
  top: -22px;
}
.layout-main .pagination li {
  border: 1px solid silver;
  border-right: 0 none;
  overflow: hidden;
}
.layout-main .pagination li:last-child {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  border-right: 1px solid silver;
}
.layout-main .pagination li:first-child {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.layout-main .pagination li.active span {
  font-weight: bold;
}
.layout-main .BoxButtons {
  margin-bottom: 0.617rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.layout-main .BoxButtons.danger-zone {
  border-top: 2px solid var(--c-primary);
  padding-top: 0.617rem;
  margin-top: 1rem;
  padding-left: 0.617rem;
  padding-right: 0.617rem;
  margin-left: -0.617rem;
  margin-right: -0.617rem;
}
.layout-main .BoxButtons.pad-top {
  margin-top: 0.617rem;
}
.layout-main .BoxButtons.pad-top-large {
  margin-top: 1rem;
}
.layout-main .BoxButtons:last-child {
  margin-bottom: 0;
}
.layout-main .BoxButtons.left {
  justify-content: flex-start;
}
.layout-main .BoxButtons > * {
  margin-right: 0.381rem;
}
.layout-main .BoxButtons > *:last-child {
  margin-right: 0;
}
.layout-main .BoxButtons .link, .layout-main .BoxButtons > .left > .link {
  margin-right: 0.617rem;
}
.layout-main .BoxButtons .link:last-child, .layout-main .BoxButtons > .left > .link:last-child {
  margin-right: 0;
}
.layout-main .BoxButtons > .right {
  margin-left: auto;
  white-space: nowrap;
}
.layout-main .BoxButtons > .left {
  margin-right: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.layout-main .BoxButtons > .left > * {
  margin-right: 0.381rem;
}
.layout-main .BoxButtons h2 {
  margin: 0;
  vertical-align: middle;
  font-size: 1rem;
  font-weight: bold;
}
.layout-main .BoxButtons .pagination {
  margin: 0;
  padding-left: 0;
}
.layout-main .BoxButtons .separator {
  display: inline-block;
  border-right: 1px solid #5a5a5a;
  height: 2em;
  margin-right: 1px;
  vertical-align: middle;
}

#outer-wrap.layout-error {
  background: #222222;
  display: block;
  padding: 2.619rem;
  overflow-y: auto;
}
@media screen and (max-width: 1100px) {
  #outer-wrap.layout-error {
    display: block;
    overflow-y: auto;
    padding: 0.617rem;
  }
}
#outer-wrap.layout-error #form-caption {
  display: flex;
  align-items: center;
}
#outer-wrap.layout-error #form-caption .Title {
  flex-grow: 1;
  text-align: right;
  font-size: 22pt;
}
@media screen and (max-width: 544px) {
  #outer-wrap.layout-error #form-caption .Title {
    display: none;
  }
}
#outer-wrap.layout-error #form-wrapper {
  width: 60rem;
  margin: 0 auto;
  margin-bottom: 2.619rem;
}
#outer-wrap.layout-error #error-info {
  padding: 0.617rem;
}
#outer-wrap.layout-error #error-info .Message {
  font-size: 16pt;
  margin-bottom: 1rem;
  word-wrap: break-word;
}
#outer-wrap.layout-error #error-info .Message:last-child {
  margin-bottom: 0;
}
#outer-wrap.layout-error #error-info .trace-content {
  white-space: pre;
  overflow-x: auto;
  font-family: monospace;
  padding: 0.381rem;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  margin-top: 0.381rem;
}

.ErrorRedirecting {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #222222;
  color: #f1f1f1;
  background-image: #222222;
  font-size: 20pt;
  text-align: center;
  padding: 2.619rem;
}

#outer-wrap.layout-overview {
  display: block;
  background: #222222;
  overflow-y: auto;
  padding: 1rem;
  min-height: 0;
  background-image: radial-gradient(#072D48, #101010);
}
#outer-wrap.layout-overview > * {
  margin-left: auto;
  margin-right: auto;
}

.layout-bounce {
  text-align: center;
  padding: 40px;
  font-size: 24pt;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: block !important;
}
.layout-bounce .msg {
  text-align: center;
}
.layout-bounce #dots {
  display: inline-block;
  width: 3em;
  text-align: left;
}
.layout-bounce.theme-light {
  background: white;
  color: #afafaf;
}
.layout-bounce.theme-dark {
  background: #222222;
  color: #c7c7c7;
  text-shadow: 0 0 5px #555555;
}
.layout-bounce.theme-flowbox {
  background: #222222;
  color: var(--c-primary);
  text-shadow: 0 0 5px #982d00;
}

#outer-wrap.layout-onboarding {
  background: #222222;
}
#outer-wrap.layout-onboarding #content {
  display: block;
  max-width: 900px;
  margin: 1rem auto;
}
#outer-wrap.layout-onboarding header {
  display: flex;
  align-items: center;
  align-content: flex-start;
  height: 4rem;
  border-bottom: 2px solid #5a5a5a;
}
#outer-wrap.layout-onboarding header .icon {
  display: inline-block;
  background-image: var(--img-logo-full);
  background-size: contain;
  width: 224px;
  margin-left: auto;
  height: 4rem;
}
@media screen and (max-width: 544px) {
  #outer-wrap.layout-onboarding header .icon {
    width: 4rem;
    background-image: var(--img-logo-collapsed);
  }
}
#outer-wrap.layout-onboarding h1 {
  margin: 0;
  font-size: 2rem;
}
#outer-wrap.layout-onboarding h2 {
  font-size: 1.4rem;
  color: var(--c-primary);
}
#outer-wrap.layout-onboarding li {
  font-size: 1.2rem;
  padding-bottom: 0.6rem;
}
#outer-wrap.layout-onboarding li:last-child {
  padding-bottom: 0;
}

.SettingsSubwindow, .ValueWatcherList, .TabbedSettingsSubwindow, .ValueWatcherConfig {
  margin-bottom: 0.381rem;
}
.SettingsSubwindow .header, .ValueWatcherList .header, .TabbedSettingsSubwindow .header, .ValueWatcherConfig .header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.SettingsSubwindow .header .right, .ValueWatcherList .header .right, .TabbedSettingsSubwindow .header .right, .ValueWatcherConfig .header .right {
  margin-left: auto;
}
.SettingsSubwindow h3, .ValueWatcherList h3, .TabbedSettingsSubwindow h3, .ValueWatcherConfig h3 {
  margin-top: 2px;
}
.SettingsSubwindow .list.empty, .ValueWatcherList .list.empty, .TabbedSettingsSubwindow .list.empty, .ValueWatcherConfig .list.empty {
  height: 2rem;
  border: 1px dashed silver;
  border-radius: 5px;
}
.SettingsSubwindow .list.empty.list-explicit, .ValueWatcherList .list.empty.list-explicit, .TabbedSettingsSubwindow .list.empty.list-explicit, .ValueWatcherConfig .list.empty.list-explicit {
  margin-bottom: 13px;
}
.SettingsSubwindow .list-spacer, .ValueWatcherList .list-spacer, .TabbedSettingsSubwindow .list-spacer, .ValueWatcherConfig .list-spacer {
  margin: 13px 0;
  border-top: 1px dashed #717171;
}

.TabbedSettingsSubwindow, .ValueWatcherConfig {
  padding: 0.381rem;
  table-layout: fixed;
  min-height: 350px;
}

.FormTabs {
  border-bottom: 1px solid #5a5a5a;
  display: flex;
  margin-left: -0.381rem;
  margin-right: -0.381rem;
  padding-left: 0.617rem;
  margin-bottom: 0.617rem;
}
.FormTabs a {
  display: inline-block;
  margin-right: 7px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border: 1px solid #5a5a5a;
  margin-bottom: -1px;
  padding: 4px 6px;
  color: #f1f1f1;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.3);
}
.FormTabs a:last-child {
  margin-right: 0;
}
.FormTabs a:hover {
  background: transparent;
}
.FormTabs a.active {
  border-bottom-color: #323232;
  background: transparent;
}

.CompConfWidget .FormTabs, .UwdProblemComp .FormTabs, .ValueWatcher .FormTabs, .TabbedSettingsSubwindow .FormTabs, .ValueWatcherConfig .FormTabs {
  margin-left: 0;
  margin-right: 0;
}

.CompConfWidget .TabCard, .UwdProblemComp .TabCard, .ValueWatcher .TabCard, .TabbedSettingsSubwindow .TabCard, .ValueWatcherConfig .TabCard {
  padding-left: 0.381rem;
  padding-right: 0.381rem;
}

.TabCard.bottomline {
  padding-bottom: 0.381rem;
  border-bottom: 1px solid #5a5a5a;
}

canvas {
  background: transparent;
}

canvas.fullsize {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

canvas.fullsize.mobile {
  position: static;
}

/*
	<ul class="pagination">
		<li class="disabled"><span>«</span></li>
		<li class="active"><span>1</span></li>
		<li><a href="http://fb3.local/comp/search?query=var&amp;page=2">2</a></li>
		<li><a href="http://fb3.local/comp/search?query=var&amp;page=2" rel="next">»</a></li>
	</ul>
*/
.pagination {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 110%;
}
.pagination li {
  border-right: 1px solid #3c4f5f;
}
.pagination li a, .pagination li span {
  text-align: center;
  display: inline-block;
  min-width: 2em;
  line-height: 2em;
  background: transparent;
  cursor: pointer;
  color: #f1f1f1;
  text-decoration: none;
  padding: 0 0.381rem;
  text-transform: capitalize;
}
.pagination li.disabled a, .pagination li.disabled span {
  cursor: default;
  color: rgba(241, 241, 241, 0.4);
}
.pagination li.disabled a:hover, .pagination li.disabled span:hover {
  background: transparent;
  color: rgba(241, 241, 241, 0.4);
}
.pagination li a:hover, .pagination li span:hover {
  background: var(--c-tabbar);
  color: white;
}
.pagination li.active a, .pagination li.active span {
  background: #222222;
  color: #f1f1f1;
}

.small-paginate .pagination {
  font-size: 90%;
}

.inline-paginate .pagination {
  display: inline-flex;
}

#navbar {
  flex: 0 0 4rem;
  top: 0;
  width: 100%;
  background-color: #292929;
  border-bottom: 1px solid #5a5a5a;
  display: flex;
  flex-direction: row;
}
#navbar .nav-buttons {
  display: flex;
  flex-grow: 1;
  overflow-x: auto;
  overflow-y: hidden;
}
@media screen and (max-width: 544px) {
  #navbar .nav-buttons.searching .NavbarWidget.button {
    display: none;
  }
}
#navbar .nav-buttons .with-badge:last-child {
  margin-right: 0;
}

#nav-logo {
  flex: 0 0;
  background-position: left center;
  padding: 0.617rem;
  overflow-x: hidden;
  background-image: url("/images/theme/blue_fb_logo.svg");
  background-image: var(--img-logo-full);
  background-size: contain;
  text-decoration: none;
  flex-basis: 224px;
}
@media screen and (max-width: 544px) {
  #nav-logo {
    padding: 0.381rem;
  }
}
#nav-logo.local {
  position: relative;
}
#nav-logo.local:after {
  content: "local";
  background: var(--c-primary);
  color: #222222;
  padding: 3px 5px 0 5px;
  border-radius: 5px;
  position: absolute;
  right: 0.2rem;
  top: 0.2rem;
}
@media screen and (max-width: 544px) {
  #nav-logo {
    flex-basis: 4rem;
    background-image: var(--img-logo-collapsed);
  }
}

@media screen and (min-width: 545px) {
  #toggle-navbar {
    display: none;
  }
}

.NavbarWidget.searchbox button, .NavbarWidget.compsmenu > a, .NavbarWidget.langmenu > a, .NavbarWidget.appmenu > a, .NavbarWidget.nav-button > a {
  display: block;
  vertical-align: middle;
  padding: 0 0.381rem;
  line-height: 4rem;
  height: 4rem;
  font-size: 22px;
  text-decoration: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #f1f1f1;
  text-shadow: none;
}
.NavbarWidget.searchbox button:active, .NavbarWidget.compsmenu > a:active, .NavbarWidget.langmenu > a:active, .NavbarWidget.appmenu > a:active, .NavbarWidget.nav-button > a:active, .NavbarWidget.searchbox button.pushed, .NavbarWidget.compsmenu > a.pushed, .NavbarWidget.langmenu > a.pushed, .NavbarWidget.appmenu > a.pushed, .NavbarWidget.nav-button > a.pushed {
  top: 1px;
}
.NavbarWidget.searchbox button:hover, .NavbarWidget.compsmenu > a:hover, .NavbarWidget.langmenu > a:hover, .NavbarWidget.appmenu > a:hover, .NavbarWidget.nav-button > a:hover {
  color: var(--c-primary);
  text-shadow: none;
}

.NavbarWidget {
  padding: 0.381rem;
  display: block;
  position: relative;
}
.NavbarWidget.glue {
  flex-grow: 1;
  margin: 0;
  padding: 0;
}
.NavbarWidget.open::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: calc(50% - 7px);
  height: 0;
  width: 0;
  border-bottom: 6px solid #5a5a5a;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.NavbarWidget.nav-button {
  padding: 0;
}
.NavbarWidget.nav-button > a::before {
  position: relative;
}
.NavbarWidget.nav-button > a.icon-home::before {
  top: 0px;
}
.NavbarWidget.nav-button > a.icon-back::before {
  top: 1px;
  left: -1px;
}
.NavbarWidget.nav-button > a.icon-warning::before {
  top: 1px;
  left: -1px;
}
.NavbarWidget.nav-button > a.icon-log::before {
  top: 2px;
}
.NavbarWidget.nav-button > a.icon-summary::before {
  top: 1px;
}
#topnav-alert a, #topnav-watchers a, #topnav-incidents a {
  position: relative;
  padding: 0 12px 0 4px;
  white-space: nowrap;
}
#topnav-alert a.dimmed, #topnav-watchers a.dimmed, #topnav-incidents a.dimmed {
  opacity: 0.55;
}
#topnav-alert a.dimmed .badge, #topnav-watchers a.dimmed .badge, #topnav-incidents a.dimmed .badge {
  display: none;
}
#topnav-alert .badge, #topnav-watchers .badge, #topnav-incidents .badge {
  position: relative;
  top: -14px;
  left: -12px;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  line-height: 20px;
  margin-right: -20px;
}

.NavbarWidget.appmenu {
  padding: 0;
  border-left: 1px solid none;
}
.NavbarWidget.appmenu > a {
  font-size: 29px;
}

.NavbarWidget .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 300;
  border-top: 1px solid #5a5a5a;
  box-shadow: -4px 4px 3px -2px rgba(0, 0, 0, 0.7);
  min-width: 250px;
  text-align: left;
  display: none;
}
.NavbarWidget .dropdown-menu .inner {
  background: #2d2d2d;
  border-left: #5a5a5a;
}
.NavbarWidget .dropdown-menu a {
  display: block;
  padding: 0.381rem 0.617rem;
  color: #f1f1f1;
  font-size: 110%;
  background: transparent;
  white-space: nowrap;
}
html.touch .NavbarWidget .dropdown-menu a {
  padding: 0.617rem;
}

.NavbarWidget .dropdown-menu a::before {
  margin-left: 0;
  width: 1.2em;
  margin-right: 0.235rem;
}
.NavbarWidget .dropdown-menu a:nth-child(even) {
  background: #242424;
}
.NavbarWidget .dropdown-menu a, .NavbarWidget .dropdown-menu a:hover {
  text-decoration: none;
}
.NavbarWidget .dropdown-menu a:hover, .NavbarWidget .dropdown-menu a.active:hover {
  color: #292929;
  background: var(--c-primary);
}
.NavbarWidget .dropdown-menu a.active {
  color: var(--c-primary);
}
.NavbarWidget .dropdown-menu.open {
  display: block;
}

.NavbarWidget .dropdown-icon::before {
  font-size: 14px;
  margin: 0;
  position: absolute;
  right: 0;
  width: 100%;
  bottom: 4px;
  color: #5a5a5a;
}
.NavbarWidget.open .dropdown-icon {
  visibility: hidden;
}

.NavbarWidget.langmenu.open::after, .NavbarWidget.compsmenu.open::after {
  right: calc(50% - 6px);
}

.NavbarWidget.langmenu {
  padding: 0;
}
.NavbarWidget.langmenu > a {
  font-size: 20px;
  padding: 0 0.617rem;
}
@media screen and (max-width: 544px) {
  .NavbarWidget.langmenu {
    width: 0;
    visibility: hidden;
    overflow: hidden;
  }
  .NavbarWidget.langmenu .dropdown-icon {
    display: none;
  }
  .with-badge ~ .NavbarWidget.langmenu {
    margin-left: 0.617rem;
  }
}

.NavbarWidget.compsmenu {
  padding: 0;
}
.NavbarWidget.compsmenu > a {
  font-size: 20px;
  padding-right: 9px;
}
@media screen and (max-width: 544px) {
  .NavbarWidget.compsmenu {
    display: none;
  }
}

.NavbarWidget.value-view {
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
}
html.not-touch .NavbarWidget.value-view {
  scrollbar-width: thin;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch .NavbarWidget.value-view::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #363636;
}
html.not-touch .NavbarWidget.value-view::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 3px;
}

@media screen and (max-width: 544px) {
  .NavbarWidget.value-view {
    display: none;
  }
}
.NavbarWidget.value-view .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid none;
  text-align: center;
  padding: 0.381rem 0.617rem;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.NavbarWidget.value-view .item, .NavbarWidget.value-view .item:hover {
  text-decoration: none;
}
.NavbarWidget.value-view .item .title {
  color: var(--c-primary);
}
.NavbarWidget.value-view .item .value {
  color: #f1f1f1;
  white-space: nowrap;
  word-wrap: normal;
}
.NavbarWidget.value-view .item:last-child {
  border-right: 1px solid none;
}
.NavbarWidget.value-view .item:active, .NavbarWidget.value-view .item.pushed {
  top: 1px;
}

.NavbarWidget.searchbox {
  padding: 0;
  display: flex;
  align-items: center;
}
.NavbarWidget.searchbox input[type=text] {
  font-size: 18px;
  width: 200px;
}
.NavbarWidget.searchbox input[type=text], .NavbarWidget.searchbox input[type=text]:hover, .NavbarWidget.searchbox input[type=text]:focus {
  border: 1px solid #5a5a5a;
  border-radius: 3px;
  box-shadow: none;
}
.NavbarWidget.searchbox input[type=text].warn {
  border-color: crimson;
}
@media screen and (max-width: 544px) {
  .NavbarWidget.searchbox input[type=text] {
    width: 120px;
  }
}
.NavbarWidget.searchbox button {
  background: transparent;
  border: none;
  box-shadow: none;
  margin-left: 0.381rem;
  margin-bottom: 0;
}
.NavbarWidget.searchbox button:hover {
  text-shadow: none;
}
.NavbarWidget.searchbox button::before {
  position: relative;
  top: 0px;
}

#nav-comp-search-cancel {
  display: none;
}

.searching #nav-comp-search-cancel {
  display: block;
}

.NavbarWidget.nav-alert {
  vertical-align: middle;
  display: flex;
  align-items: center;
}
.NavbarWidget.nav-alert a {
  display: inline-block;
  border: 1px solid crimson;
  color: white;
  background: transparent;
  font-size: 95%;
  font-weight: bold;
  border-radius: 5px;
  padding: 0.5em;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.NavbarWidget.nav-alert a, .NavbarWidget.nav-alert a:hover {
  text-decoration: none;
}
.NavbarWidget.nav-alert a:active, .NavbarWidget.nav-alert a.pushed {
  top: 1px;
}

.BreadCrumbs {
  display: inline-block;
  box-shadow: none;
  overflow: hidden;
  border-radius: 3px;
  white-space: nowrap;
  word-wrap: normal;
}
.BreadCrumbs a {
  text-decoration: none;
  outline: none;
  display: inline-block;
  line-height: 2.3em;
  /*need more margin on the left of links to accomodate the numbers*/
  padding: 0 10.5px 0 33px;
  position: relative;
  border: 1px solid #5a5a5a;
  /*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
  /*adding the arrows for the breadcrumbs using rotated pseudo elements*/
  /*we dont need an arrow after the last link*/
}
.BreadCrumbs a:first-child {
  padding-left: 15px;
  border-radius: 3px 0 0 3px; /*to match with the parent's radius*/
}
.BreadCrumbs a:last-child {
  border-radius: 0 3px 3px 0; /*this was to prevent glitches on hover*/
  padding-right: 15px;
}
.BreadCrumbs a:first-child:last-child {
  border-radius: 3px;
}
.BreadCrumbs a::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1.15em; /*half of square's length*/
  /*same dimension as the line-height of & */
  width: 2.3em;
  height: 2.3em;
  /* from FB DARK:
      top: 1px;
      width: 2.2em;
      height: 2.15em;
      right: -1.18em;
   */
  transform: scale(0.707) rotate(45deg);
  /*we need to prevent the arrows from getting buried under the next link*/
  z-index: 10;
  /*
  5px - for rounded arrows and 50px - to prevent hover glitches on the border created using shadows.
  5px top and bottom to prevent the line being interrupted
  */
  border-radius: 5px 5px 5px 50px;
}
.BreadCrumbs a:last-child::after {
  content: none;
}
.BreadCrumbs.flat a::after {
  box-shadow: -1px 1px 0 1px #292929, 1px -1px 0 1px #5a5a5a, 3px -3px 0 1px rgba(90, 90, 90, 0.1);
}
.BreadCrumbs.flat a:hover::after, .BreadCrumbs.flat a.active::after {
  box-shadow: -1px 1px 0 1px var(--c-primary), 1px -1px 0 1px #5a5a5a, 3px -3px 0 1px rgba(90, 90, 90, 0.1);
}
.BreadCrumbs.flat a, .BreadCrumbs.flat a::after {
  color: #f1f1f1;
  background: #292929;
}
.BreadCrumbs.flat a:hover, .BreadCrumbs.flat a.active,
.BreadCrumbs.flat a:hover::after, .BreadCrumbs.flat a.active::after {
  color: #222222;
  text-shadow: none;
  background: var(--c-primary);
}

#sidebar {
  display: flex;
  flex-direction: column;
  flex: 0 0 15rem;
  transition: all 0.5s;
  overflow: hidden;
  background-color: #292929;
  /* the sidebar should be tucked into the dropdown menu */
}
#sidebar.expanded {
  flex-basis: 15rem;
}
#sidebar.collapsed {
  flex-basis: 5rem;
}
#sidebar.no-anim {
  transition: none;
}
html.grandstream #sidebar {
  transition: none;
}

@media screen and (min-width: 545px) {
  #sidebar.mobile-only {
    display: none;
  }
}
@media screen and (max-width: 544px) {
  #sidebar {
    display: none;
    border-bottom: 2px solid var(--c-primary);
  }
  #sidebar.mobile-show {
    display: block;
  }
}

#mobile-sidebar-toggle {
  position: relative;
  background: rgba(var(--c-primary), 0.3);
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#mobile-sidebar-toggle::before {
  content: "\f141";
}
@media screen and (min-width: 545px) {
  #mobile-sidebar-toggle {
    display: none;
  }
}

#sidebar-scrollbox {
  flex: 1 1;
  overflow-y: auto;
  border-right: 1px #5a5a5a solid;
}
html.not-touch #sidebar-scrollbox {
  scrollbar-width: thin;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch #sidebar-scrollbox::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #363636;
}
html.not-touch #sidebar-scrollbox::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 3px;
}

#sidebar-toggler {
  flex: 0 0 3rem;
  padding: 0.617rem;
  cursor: pointer;
  font-size: 150%;
  border-right: 1px #5a5a5a solid;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #292929;
  color: var(--c-primary);
}
@media screen and (max-width: 544px) {
  #sidebar-toggler {
    padding: 0.381rem;
  }
}
#sidebar-toggler:hover {
  background: #252525;
}
@media screen and (max-width: 544px) {
  #sidebar-toggler {
    display: none;
  }
}
#sidebar-toggler i::before {
  content: "\e818";
}
#sidebar-toggler i::before {
  position: relative;
  top: 1px;
}

.collapsed #sidebar-toggler i::before {
  content: "\e81a";
}

.expanded #sidebar-toggler i::before {
  content: "\e818";
}

#sidebar a, #sidebar header, #sidebar section.VersionDisplay, #sidebar section.VersionDisplay:hover {
  position: relative;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
}
#sidebar a::after, #sidebar header::after, #sidebar section.VersionDisplay::after, #sidebar section.VersionDisplay:hover::after {
  content: "";
  position: absolute;
  right: 0;
  top: 3%;
  width: 20px;
  height: 94%;
  pointer-events: none;
}
#sidebar a::after, #sidebar header::after, #sidebar section.VersionDisplay::after, #sidebar section.VersionDisplay:hover::after {
  background: linear-gradient(to right, rgba(41, 41, 41, 0), #292929);
}

#sidebar section {
  display: block;
  width: 100%;
  padding: 0.617rem 0;
  border-bottom: 1px solid none;
}
#sidebar section:first-child {
  padding-top: 0;
}
#sidebar section.VersionDisplay {
  border-bottom: 0 none;
  padding: 0.617rem;
  opacity: 0.4;
  text-align: left;
  margin-top: auto;
}
@media screen and (max-width: 544px) {
  #sidebar section.VersionDisplay {
    display: none;
  }
}
#sidebar section.VersionDisplay a, #sidebar section.VersionDisplay span {
  display: initial;
  padding: 0;
}
#sidebar section.VersionDisplay a::after, #sidebar section.VersionDisplay span::after {
  background: none;
}
#sidebar header, #sidebar a {
  display: block;
  width: 100%;
  padding: 0.617rem;
}
html.touch #sidebar header, html.touch #sidebar a {
  padding: 0.9rem 0.617rem;
}

#sidebar header {
  font-size: 90%;
  font-weight: bold;
  color: #5abfff;
  color: var(--c-primary);
  padding-bottom: 0.2rem;
}
#sidebar a {
  text-decoration: none;
  cursor: pointer;
  color: #f1f1f1;
}
#sidebar a:hover {
  color: var(--c-primary);
}
#sidebar a:hover::after {
  background: linear-gradient(to right, rgba(var(--c-primary), 0), var(--c-primary));
}
#sidebar a.active, #sidebar a.active:hover {
  font-weight: bold;
  color: #5abfff;
  color: var(--c-primary);
  background: #3c3c3c;
}
#sidebar a.active::after, #sidebar a.active:hover::after {
  background: linear-gradient(to right, rgba(60, 60, 60, 0), #3c3c3c);
}
#sidebar .Button:hover {
  background: #252525;
}
#sidebar .Button:hover::after {
  background: linear-gradient(to right, rgba(37, 37, 37, 0), #252525);
}
#sidebar .ToggleBox + .ToggleBox {
  border-top: 0 none;
}
#sidebar .ToggleBox {
  border-bottom: 1px solid none;
  /* nesting */
}
#sidebar .ToggleBox:last-child {
  border-bottom: 0 none;
}
#sidebar .ToggleBox .Toggler {
  padding-right: 2rem;
  position: relative;
}
#sidebar .ToggleBox .Toggler i.Toggler__arrowbtn {
  z-index: 10;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0.617rem 0.381rem;
  height: 100%;
}
html.touch #sidebar .ToggleBox .Toggler i.Toggler__arrowbtn {
  padding: 0.9rem 0.617rem;
}

#sidebar .ToggleBox .Toggler i.Toggler__arrowbtn::before {
  content: "\e81b";
}
#sidebar .ToggleBox .Toggler, #sidebar .ToggleBox .Toggler:hover {
  background: #252525;
}
#sidebar .ToggleBox .Toggler a::after {
  background: linear-gradient(to right, rgba(37, 37, 37, 0), #252525);
}
#sidebar .ToggleBox .Toggler a.active::after {
  background: linear-gradient(to right, rgba(60, 60, 60, 0), #3c3c3c);
}
#sidebar .ToggleBox .Toggler a.active + i.Toggler__arrowbtn {
  background: #3c3c3c;
}
#sidebar .ToggleBox.expanded .Toggler::after {
  background: linear-gradient(to right, rgba(37, 37, 37, 0), #252525);
}
#sidebar .ToggleBox.collapsed {
  border-bottom: 0 none;
}
#sidebar .ToggleBox.collapsed .Toggler {
  background: none;
}
#sidebar .ToggleBox.collapsed .Toggler i.Toggler__arrowbtn::before {
  content: "\f0f7";
}
#sidebar .ToggleBox.collapsed .Toggler:hover {
  background: #252525;
}
#sidebar .ToggleBox.collapsed .Toggler:hover::after {
  background: linear-gradient(to right, rgba(37, 37, 37, 0), #252525);
}
#sidebar .ToggleBox.collapsed .Toggler:hover a::after {
  background: linear-gradient(to right, rgba(37, 37, 37, 0), #252525);
}
#sidebar .ToggleBox.collapsed .Toggler a::after {
  background: linear-gradient(to right, rgba(41, 41, 41, 0), #292929);
}
#sidebar .ToggleBox.collapsed .Toggler a.active::after {
  background: linear-gradient(to right, rgba(60, 60, 60, 0), #3c3c3c);
}
#sidebar .ToggleBox.collapsed .Items {
  max-height: 0;
}
#sidebar .ToggleBox .Items {
  overflow-y: hidden;
}
#sidebar .ToggleBox .Items a {
  position: relative;
  padding-left: 1.6em;
}
#sidebar .ToggleBox .Items a::before {
  position: absolute;
  left: 0.8em;
  top: 0.8em;
  content: "";
  display: block;
  height: 0;
  width: 0;
  border-bottom: 5px solid transparent;
  border-left: 5px solid var(--c-primary);
  border-top: 5px solid transparent;
}
html.touch #sidebar .ToggleBox .Items a::before {
  top: 1.2em;
}

#sidebar .ToggleBox .Items a.active::before {
  border-left-color: var(--c-primary);
}
#sidebar .ToggleBox .Items a:hover::before {
  border-left-color: var(--c-primary);
}
#sidebar .ToggleBox .Items a.has-icon {
  padding-left: 1.2rem;
  border-left: 1px solid #f1f1f1;
}
#sidebar .ToggleBox .Items a.has-icon::before {
  display: none;
}
#sidebar .ToggleBox .ToggleBox > .Items a {
  padding-left: 2.4em;
}
#sidebar .ToggleBox .ToggleBox > .Items a::before {
  left: 1.6em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox > .Items a {
  padding-left: 3.2em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox > .Items a::before {
  left: 2.4em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a {
  padding-left: 4em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a::before {
  left: 3.2em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a {
  padding-left: 4.8em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a::before {
  left: 4em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a {
  padding-left: 5.6em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a::before {
  left: 4.8em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a {
  padding-left: 6.4em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a::before {
  left: 5.6em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a {
  padding-left: 7.2em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a::before {
  left: 6.4em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a {
  padding-left: 8em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a::before {
  left: 7.2em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a {
  padding-left: 8.8em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a::before {
  left: 8em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a {
  padding-left: 9.6em;
}
#sidebar .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox .ToggleBox > .Items a::before {
  left: 8.8em;
}
#sidebar .Button::before, #sidebar .ToggleBox a::before {
  margin-right: 0.381rem;
}

html.fullscreen #navbar, html.fullscreen #sidebar {
  display: none !important;
}

.gm-style button {
  min-width: unset;
  border-radius: unset;
  text-shadow: unset;
}
.gm-style button:active {
  top: unset;
}

.Form .Row .gm-style label {
  text-shadow: none;
  color: black;
  font-weight: normal;
}

.transparency-preview-checker-bg {
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  background-repeat: repeat;
  background-image: linear-gradient(45deg, #323232 25%, transparent 25%, transparent 75%, #323232 75%, #323232 100%), linear-gradient(45deg, #323232 25%, #191919 25%, #191919 75%, #323232 75%, #323232 100%);
}

button.disabled, button[disabled], button.disabled-style, input[type=button].disabled, input[type=button][disabled], input[type=button].disabled-style, input[type=submit].disabled, input[type=submit][disabled], input[type=submit].disabled-style, .button.disabled, .button[disabled], .button.disabled-style {
  background-color: #222222;
}
button.disabled, button[disabled], button.disabled-style, input[type=button].disabled, input[type=button][disabled], input[type=button].disabled-style, input[type=submit].disabled, input[type=submit][disabled], input[type=submit].disabled-style, .button.disabled, .button[disabled], .button.disabled-style {
  color: #e9e9e9;
}
button.nohover.disabled:hover, button.nohover[disabled]:hover, button.nohover.disabled-style:hover, input.nohover[type=button].disabled:hover, input.nohover[type=button][disabled]:hover, input.nohover[type=button].disabled-style:hover, input.nohover[type=submit].disabled:hover, input.nohover[type=submit][disabled]:hover, input.nohover[type=submit].disabled-style:hover, .nohover.button.disabled:hover, .nohover.button[disabled]:hover, .nohover.button.disabled-style:hover {
  background-color: #222222;
  color: #e9e9e9;
}
button.disabled:hover, button[disabled]:hover, button.disabled-style:hover, input[type=button].disabled:hover, input[type=button][disabled]:hover, input[type=button].disabled-style:hover, input[type=submit].disabled:hover, input[type=submit][disabled]:hover, input[type=submit].disabled-style:hover, .button.disabled:hover, .button[disabled]:hover, .button.disabled-style:hover, button.disabled:active, button[disabled]:active, button.disabled-style:active, input[type=button].disabled:active, input[type=button][disabled]:active, input[type=button].disabled-style:active, input[type=submit].disabled:active, input[type=submit][disabled]:active, input[type=submit].disabled-style:active, .button.disabled:active, .button[disabled]:active, .button.disabled-style:active, button.active.disabled, button.active[disabled], button.active.disabled-style, input.active[type=button].disabled, input.active[type=button][disabled], input.active[type=button].disabled-style, input.active[type=submit].disabled, input.active[type=submit][disabled], input.active[type=submit].disabled-style, .active.button.disabled, .active.button[disabled], .active.button.disabled-style {
  background-color: #222222;
  color: #e9e9e9;
}
button.subtle-active.disabled, button.subtle-active[disabled], button.subtle-active.disabled-style, input.subtle-active[type=button].disabled, input.subtle-active[type=button][disabled], input.subtle-active[type=button].disabled-style, input.subtle-active[type=submit].disabled, input.subtle-active[type=submit][disabled], input.subtle-active[type=submit].disabled-style, .subtle-active.button.disabled, .subtle-active.button[disabled], .subtle-active.button.disabled-style {
  border-color: #222222;
}

button, input[type=button], input[type=submit], .button {
  white-space: nowrap;
  word-wrap: normal;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  border-radius: 2px;
  padding: 0 0.6em;
  border: 1px solid rgba(152, 152, 152, 0.33);
  outline: 0 none !important;
  line-height: 2em;
  font-size: 0.9rem;
  min-width: 5.4em;
  text-shadow: none;
  font-weight: bold;
  background-color: #222222;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
button, button:visited, button:link, input[type=button], input[type=button]:visited, input[type=button]:link, input[type=submit], input[type=submit]:visited, input[type=submit]:link, .button, .button:visited, .button:link {
  color: #e9e9e9;
}
button.nohover:hover, input[type=button].nohover:hover, input[type=submit].nohover:hover, .button.nohover:hover {
  background-color: #222222;
  color: #e9e9e9;
}
button:hover, button:active, button.active, button.nohover.active, button.nohover.active:hover, input[type=button]:hover, input[type=button]:active, input[type=button].active, input[type=button].nohover.active, input[type=button].nohover.active:hover, input[type=submit]:hover, input[type=submit]:active, input[type=submit].active, input[type=submit].nohover.active, input[type=submit].nohover.active:hover, .button:hover, .button:active, .button.active, .button.nohover.active, .button.nohover.active:hover {
  background-color: var(--c-primary);
  color: #222222;
}
button.subtle-active, input[type=button].subtle-active, input[type=submit].subtle-active, .button.subtle-active {
  border-color: var(--c-primary);
}
button::before, input[type=button]::before, input[type=submit]::before, .button::before {
  margin-left: 0 !important;
  margin-right: 0.3em !important;
}
button:active, button.pushed, input[type=button]:active, input[type=button].pushed, input[type=submit]:active, input[type=submit].pushed, .button:active, .button.pushed {
  top: 1px;
}
button, button:active, button:hover, button:visited, input[type=button], input[type=button]:active, input[type=button]:hover, input[type=button]:visited, input[type=submit], input[type=submit]:active, input[type=submit]:hover, input[type=submit]:visited, .button, .button:active, .button:hover, .button:visited {
  text-decoration: none;
}
button[class^=icon-], button[class*=" icon-"], input[type=button][class^=icon-], input[type=button][class*=" icon-"], input[type=submit][class^=icon-], input[type=submit][class*=" icon-"], .button[class^=icon-], .button[class*=" icon-"] {
  padding-left: 0.5em;
  text-align: left;
}
button.right-icon, input[type=button].right-icon, input[type=submit].right-icon, .button.right-icon {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: baseline;
  padding-right: 0.235rem;
}
button.right-icon::before, input[type=button].right-icon::before, input[type=submit].right-icon::before, .button.right-icon::before {
  margin-left: 0.3em !important;
  margin-right: 0 !important;
}
button.icononly, input[type=button].icononly, input[type=submit].icononly, .button.icononly {
  text-align: center;
  min-width: 2.2em;
}
button.icononly::before, input[type=button].icononly::before, input[type=submit].icononly::before, .button.icononly::before {
  margin-right: 0 !important;
}
@media screen and (max-width: 544px) {
  button.icononly, input[type=button].icononly, input[type=submit].icononly, .button.icononly {
    padding-left: 0.3em;
    padding-right: 0.3em;
  }
}
button.narrow, input[type=button].narrow, input[type=submit].narrow, .button.narrow {
  min-width: initial;
}
button.medium, input[type=button].medium, input[type=submit].medium, .button.medium {
  min-width: 3em;
}
button.wide, input[type=button].wide, input[type=submit].wide, .button.wide {
  min-width: 5.4em;
}
button.disabled, button[disabled], button.disabled-style, input[type=button].disabled, input[type=button][disabled], input[type=button].disabled-style, input[type=submit].disabled, input[type=submit][disabled], input[type=submit].disabled-style, .button.disabled, .button[disabled], .button.disabled-style {
  opacity: 0.6;
  cursor: default;
}
button.disabled-style, input[type=button].disabled-style, input[type=submit].disabled-style, .button.disabled-style {
  cursor: pointer;
}

.btn-dropdown:active {
  /* do not move on click! */
  top: 0;
}

/* Positive - OK, Save, Apply */
.btn-add, a.btn-add, .btn-confirm, a.btn-confirm,
.btn-save, a.btn-save,
.btn-dlg-confirm, .btn-positive, a.btn-positive, [type=submit] {
  background-color: #222222;
}
.btn-add, a.btn-add, .btn-confirm, a.btn-confirm,
.btn-save, a.btn-save,
.btn-dlg-confirm, .btn-positive, .btn-positive:visited, .btn-positive:link, a.btn-positive, a.btn-positive:visited, a.btn-positive:link, [type=submit], [type=submit]:visited, [type=submit]:link {
  color: #e9e9e9;
}
.nohover.btn-add:hover, .nohover.btn-confirm:hover,
.nohover.btn-save:hover,
.nohover.btn-dlg-confirm:hover, .btn-positive.nohover:hover, a.btn-positive.nohover:hover, [type=submit].nohover:hover {
  background-color: #222222;
  color: #e9e9e9;
}
.btn-add:hover, .btn-confirm:hover,
.btn-save:hover,
.btn-dlg-confirm:hover, .btn-add:active, .btn-confirm:active,
.btn-save:active,
.btn-dlg-confirm:active, .active.btn-add, .active.btn-confirm,
.active.btn-save,
.active.btn-dlg-confirm, .btn-positive:hover, .btn-positive:active, .btn-positive.active, .btn-positive.nohover.active, .btn-positive.nohover.active:hover, a.btn-positive:hover, a.btn-positive:active, a.btn-positive.active, a.btn-positive.nohover.active, a.btn-positive.nohover.active:hover, [type=submit]:hover, [type=submit]:active, [type=submit].active, [type=submit].nohover.active, [type=submit].nohover.active:hover {
  background-color: var(--c-primary);
  color: #222222;
}
.subtle-active.btn-add, .subtle-active.btn-confirm,
.subtle-active.btn-save,
.subtle-active.btn-dlg-confirm, .btn-positive.subtle-active, a.btn-positive.subtle-active, [type=submit].subtle-active {
  border-color: var(--c-primary);
}

.btn-confirm, a.btn-confirm,
.btn-save, a.btn-save,
.btn-dlg-confirm {
  padding-left: 0.5em;
  text-align: left;
}
.btn-confirm::before, a.btn-confirm::before,
.btn-save::before, a.btn-save::before,
.btn-dlg-confirm::before {
  content: "\e76f";
}

.btn-add, a.btn-add {
  padding-left: 0.5em;
  text-align: left;
}
.btn-add::before, a.btn-add::before {
  content: "\e811";
}

/* Action */
.btn-adjust, a.btn-adjust, .btn-edit, a.btn-edit, .btn-action, a.btn-action {
  background-color: #222222;
}
.btn-adjust, a.btn-adjust, .btn-edit, a.btn-edit, .btn-action, .btn-action:visited, .btn-action:link, a.btn-action, a.btn-action:visited, a.btn-action:link {
  color: #e9e9e9;
}
.nohover.btn-adjust:hover, .nohover.btn-edit:hover, .btn-action.nohover:hover, a.btn-action.nohover:hover {
  background-color: #222222;
  color: #e9e9e9;
}
.btn-adjust:hover, .btn-edit:hover, .btn-adjust:active, .btn-edit:active, .active.btn-adjust, .active.btn-edit, .btn-action:hover, .btn-action:active, .btn-action.active, .btn-action.nohover.active, .btn-action.nohover.active:hover, a.btn-action:hover, a.btn-action:active, a.btn-action.active, a.btn-action.nohover.active, a.btn-action.nohover.active:hover {
  background-color: var(--c-primary);
  color: #222222;
}
.subtle-active.btn-adjust, .subtle-active.btn-edit, .btn-action.subtle-active, a.btn-action.subtle-active {
  border-color: var(--c-primary);
}

.btn-dlg-action {
  background-color: #222222;
}
.btn-dlg-action, .btn-dlg-action:visited, .btn-dlg-action:link {
  color: #e9e9e9;
}
.btn-dlg-action.nohover:hover {
  background-color: #222222;
  color: #e9e9e9;
}
.btn-dlg-action:hover, .btn-dlg-action:active, .btn-dlg-action.active, .btn-dlg-action.nohover.active, .btn-dlg-action.nohover.active:hover {
  background-color: var(--c-primary);
  color: #222222;
}
.btn-dlg-action.subtle-active {
  border-color: var(--c-primary);
}

.btn-edit, a.btn-edit {
  padding-left: 0.5em;
  text-align: left;
}
.btn-edit::before, a.btn-edit::before {
  content: "\e81d";
}

.btn-adjust, a.btn-adjust {
  padding-left: 0.5em;
  text-align: left;
}
.btn-adjust::before, a.btn-adjust::before {
  content: "\e808";
}

/* Negative */
.btn-cancel, a.btn-cancel, .btn-dlg-cancel, .btn-delete, a.btn-delete, .btn-negative, a.btn-negative {
  background-color: #222222;
}
.btn-cancel, a.btn-cancel, .btn-dlg-cancel, .btn-delete, a.btn-delete, .btn-negative, .btn-negative:visited, .btn-negative:link, a.btn-negative, a.btn-negative:visited, a.btn-negative:link {
  color: #e9e9e9;
}
.nohover.btn-cancel:hover, .nohover.btn-dlg-cancel:hover, .nohover.btn-delete:hover, .btn-negative.nohover:hover, a.btn-negative.nohover:hover {
  background-color: #222222;
  color: #e9e9e9;
}
.btn-cancel:hover, .btn-dlg-cancel:hover, .btn-delete:hover, .btn-cancel:active, .btn-dlg-cancel:active, .btn-delete:active, .active.btn-cancel, .active.btn-dlg-cancel, .active.btn-delete, .btn-negative:hover, .btn-negative:active, .btn-negative.active, .btn-negative.nohover.active, .btn-negative.nohover.active:hover, a.btn-negative:hover, a.btn-negative:active, a.btn-negative.active, a.btn-negative.nohover.active, a.btn-negative.nohover.active:hover {
  background-color: var(--c-primary);
  color: #222222;
}
.subtle-active.btn-cancel, .subtle-active.btn-dlg-cancel, .subtle-active.btn-delete, .btn-negative.subtle-active, a.btn-negative.subtle-active {
  border-color: var(--c-primary);
}

.btn-delete, a.btn-delete {
  padding-left: 0.5em;
  text-align: left;
}
.btn-delete::before, a.btn-delete::before {
  content: "\e813";
}

.btn-cancel, a.btn-cancel, .btn-dlg-cancel {
  padding-left: 0.5em;
  text-align: left;
}
.btn-cancel::before, a.btn-cancel::before, .btn-dlg-cancel::before {
  content: "\e857";
}

/* Reset */
.btn-dlg-reset, .btn-dlg-ok-warn {
  background-color: #222222;
  padding-left: 0.5em;
  text-align: left;
}
.btn-dlg-reset, .btn-dlg-reset:visited, .btn-dlg-reset:link, .btn-dlg-ok-warn, .btn-dlg-ok-warn:visited, .btn-dlg-ok-warn:link {
  color: #e9e9e9;
}
.btn-dlg-reset.nohover:hover, .btn-dlg-ok-warn.nohover:hover {
  background-color: #222222;
  color: #e9e9e9;
}
.btn-dlg-reset:hover, .btn-dlg-reset:active, .btn-dlg-reset.active, .btn-dlg-reset.nohover.active, .btn-dlg-reset.nohover.active:hover, .btn-dlg-ok-warn:hover, .btn-dlg-ok-warn:active, .btn-dlg-ok-warn.active, .btn-dlg-ok-warn.nohover.active, .btn-dlg-ok-warn.nohover.active:hover {
  background-color: var(--c-primary);
  color: #222222;
}
.btn-dlg-reset.subtle-active, .btn-dlg-ok-warn.subtle-active {
  border-color: var(--c-primary);
}

.btn-dlg-reset::before {
  content: "\e836";
}

.btn-dlg-ok-warn::before {
  content: "\e76f";
}

/* Plain navigation button */
.btn-open, a.btn-open, .btn-next, a.btn-next, .btn-back, a.btn-back {
  background-color: #222222;
  padding-left: 0.5em;
  text-align: left;
}
.btn-open, a.btn-open, .btn-next, a.btn-next, .btn-back, a.btn-back {
  color: #e9e9e9;
}
.nohover.btn-open:hover, .nohover.btn-next:hover, .nohover.btn-back:hover {
  background-color: #222222;
  color: #e9e9e9;
}
.btn-open:hover, .btn-next:hover, .btn-back:hover, .btn-open:active, .btn-next:active, .btn-back:active, .active.btn-open, .active.btn-next, .active.btn-back {
  background-color: var(--c-primary);
  color: #222222;
}
.subtle-active.btn-open, .subtle-active.btn-next, .subtle-active.btn-back {
  border-color: var(--c-primary);
}

.btn-back::before, a.btn-back::before {
  content: "\e80b";
}

.btn-next::before, a.btn-next::before {
  content: "\e859";
}

.btn-open::before, a.btn-open::before {
  content: "\e828";
}

form {
  border: 0 none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.form-error, .form-help {
  font-size: 120%;
  text-shadow: 0 0 3px black;
}

.form-ctx-icon {
  font-weight: normal;
}

.form-error {
  color: #ecb106;
}

.form-help {
  color: var(--c-primary);
}
.form-help:hover, .form-help:active {
  color: var(--c-primary);
}

.crash-message {
  color: #ff617e;
  white-space: pre;
  overflow-x: auto;
  margin-bottom: 5px !important;
}

.field-changed {
  color: var(--c-primary) !important;
}

.PTGroupDash__MachineNote, .ObjectManager__explain, .Form .explain {
  opacity: 0.8;
  font-size: 0.9rem;
  text-align: left;
  font-style: italic;
}

hr.FormSeparator {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-top: 2px dashed #5a5a5a;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.Form input[type=password], .Form input[type=text], .Form input[type=number], .Form textarea, .Form input:not([type]), .Form input[type=datetime-local], .Form input[type=date], .Form input[type=month], .Form input[type=time], .Form select, .Form label.select-wrap {
  width: 18rem;
  font-size: 0.9rem;
}
.Form input[type=password].short, .Form input[type=text].short, .Form input[type=number].short, .Form textarea.short, .Form input:not([type]).short, .Form input[type=datetime-local].short, .Form input[type=date].short, .Form input[type=month].short, .Form input[type=time].short, .Form select.short, .Form label.select-wrap.short {
  width: 10rem;
}
.Form > h1 {
  font-size: 1.5rem;
}
.Form > h1,
.Form > h2 {
  margin: 0 0 0 16rem;
}
@media screen and (max-width: 544px) {
  .Form > h1,
  .Form > h2 {
    margin-left: 0;
  }
}
.Form > h1.noindent,
.Form > h2.noindent {
  margin-left: 0;
}
.Form > h1 {
  font-size: 2rem;
}
.Form > h2 {
  font-size: 1.2rem;
}
.Form .FormGap {
  height: 5px;
}
.Form .FormGroup {
  padding: 0.381rem;
  border: 1px solid #555555;
  border-radius: 3px;
  margin-bottom: 0.617rem;
}
.Form .FormGroup > h1, .Form .FormGroup > h2, .Form .FormGroup > h3, .Form .FormGroup > h4 {
  margin-top: 0;
}
.Form .FormGroup .Row:last-child {
  margin: 0.381rem auto;
}
.Form .FormGroup:last-child {
  margin-bottom: 0;
}
.Form .Row {
  font-size: 0.9rem;
  text-align: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0.381rem auto;
}
.Form .Row .form-error, .Form .Row .form-help, .Form .Row .form-unit, .Form .Row .form-ctx-icon {
  align-self: center;
  margin-left: 0.381rem;
}
.Form .Row .form-error::before, .Form .Row .form-help::before, .Form .Row .form-unit::before, .Form .Row .form-ctx-icon::before {
  margin: 0;
}
.Form .Row.explain p {
  margin: 0;
}
.Form .Row.deprecated label {
  text-decoration: line-through;
  opacity: 0.8;
}
.Form .Row.space-above {
  margin-top: 0.617rem;
  padding-top: 0.617rem;
  border-top: 1px solid #3c3c3c;
}
.Form .Row.space-below {
  margin-bottom: 0.617rem;
  padding-bottom: 0.617rem;
  border-bottom: 1px solid #3c3c3c;
}
.Form .Row .textarea-icons {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  margin-left: 0.235rem;
  margin-right: 0.235rem;
}
.Form .Row .textarea-icons > * {
  margin: 0;
  margin-bottom: 0.381rem;
}
.Form .Row .textarea-icons > *:last-child {
  margin-bottom: 0;
}
.Form .Row:first-child {
  margin-top: 0;
}
.Form .Row:last-child {
  margin-bottom: 0;
}
.Form .Row .FieldBox {
  position: relative;
  flex-grow: 1;
}
.Form .Row .FieldBox > span {
  vertical-align: middle;
}
.Form .Row .FieldBox.for-textarea {
  display: flex;
  width: 100%;
}
.Form .Row .FieldBox.for-textarea .Table {
  margin-top: 0;
}
.Form .Row .FieldBox.for-radio {
  padding-top: 0.5rem;
}
.Form .Row .enumval-display, .Form .Row .ts-display {
  display: inline-block;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 1px;
  padding: 0 0.381rem;
  margin-left: 0.381rem;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.Form .Row .ts-display {
  min-width: 200px;
  text-align: right;
}
.Form .Row a.notify-test {
  margin-left: 0.381rem;
}
.Form .Row a.autogen {
  margin-left: 0.381rem;
}
.Form .Row a.password-reveal {
  text-decoration: none;
  padding-left: 0.381rem;
  color: #f1f1f1;
}
.Form .Row a.password-reveal:hover {
  color: white;
  text-shadow: 0 0 3px black;
}
.Form .Row .WdIndicator {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #33d77f;
  vertical-align: middle;
}
.Form .Row .WdIndicator.warn {
  background: #f4aa34;
}
.Form .Row .WdIndicator.crit {
  background: #e84040;
}
.Form .Row .enumval-display {
  min-width: 160px;
  text-align: left;
}
@media screen and (max-width: 544px) {
  .Form .Row {
    padding-left: 0.617rem;
    padding-right: 0.617rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .Form .Row .checkbox-wrap {
    width: initial !important;
  }
  .Form .Row h1, .Form .Row h2, .Form .Row h3, .Form .Row.buttons, .Form .Row.indent, .Form .Row .explain {
    margin-left: 0;
    padding-left: 0.617rem !important;
  }
}
.Form .Row select, .Form .Row input {
  font-size: 0.9rem;
}
.Form .Row.buttons {
  font-weight: bold;
}
.Form .Row.buttons input, .Form .Row.buttons button, .Form .Row.buttons .button, .Form .Row.centered input, .Form .Row.centered button, .Form .Row.centered .button {
  margin-right: 0.617rem;
}
.Form .Row.buttons input:last-child, .Form .Row.buttons button:last-child, .Form .Row.buttons .button:last-child, .Form .Row.centered input:last-child, .Form .Row.centered button:last-child, .Form .Row.centered .button:last-child {
  margin-right: 0;
}
@media screen and (max-width: 544px) {
  .Form .Row.buttons, .Form .Row.centered {
    flex-direction: row;
    justify-content: center;
  }
  .Form .Row.buttons :last-child, .Form .Row.centered :last-child {
    margin-right: 0;
  }
}
.Form .Row.indent, .Form .Row.buttons {
  padding-left: 16rem;
}
@media screen and (max-width: 544px) {
  .Form .Row.indent, .Form .Row.buttons {
    padding-left: 0;
  }
}
.Form .Row.message {
  text-shadow: 1px 1px 3px black;
}
.Form .Row.message.error {
  color: crimson;
}
.Form .Row.message.ok {
  color: #0fe851;
}
.Form .Row.separator {
  padding-top: 0.617rem;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
}
.Form .Row.right {
  justify-content: flex-end;
}
.Form .Row textarea {
  display: inline-block;
  vertical-align: top;
  flex-grow: 1;
  font-size: 0.9rem;
  resize: vertical;
}
.Form .Row textarea.small {
  min-height: 2em;
}
.Form .Row label, .Form .Row .Label {
  font-weight: bold;
  color: #f1f1f1;
  display: inline-block;
  width: 16rem;
  text-align: right;
  text-shadow: none;
  padding: 0.5rem;
  align-self: flex-start;
  flex-shrink: 0;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
}
@media screen and (max-width: 544px) {
  .Form .Row label, .Form .Row .Label {
    padding-left: 0;
    text-align: left;
    width: auto;
  }
}
.Form .Row label {
  cursor: pointer;
}
.Form .Row div label {
  width: unset;
  padding: 0;
  display: inline;
}
.Form .Row.no-bold-label label {
  font-weight: normal;
}
.Form .Row > ul, .Form .Row ul {
  margin-top: 0.617rem;
}
.Form .Row .explain {
  width: 100%;
  padding-left: 16rem;
  line-height: 1.4;
}
.Form .Row span.explain {
  padding-left: 0;
}
.Form .Row.checkbox label {
  width: unset;
  padding-left: 0;
  text-align: left;
  cursor: pointer;
}
.Form .Row.checkbox .checkbox-wrap {
  position: relative;
  display: inline-block;
  width: 16rem;
  padding: 0.5rem;
  text-align: right;
  align-self: flex-start;
}
.Form .Row.checkbox input[type=checkbox] {
  margin: auto;
  width: auto;
  height: auto;
}
@media screen and (max-width: 544px) {
  .Form .Row.checkbox {
    flex-direction: row;
  }
  .Form .Row.checkbox label {
    vertical-align: middle;
    width: auto;
  }
  .Form .Row.checkbox .checkbox-wrap {
    text-align: left;
    padding-bottom: 0;
    width: auto;
  }
}
.Form .form-warning {
  color: #ffcc00;
}

.enum-value-view {
  text-align: left;
}
.enum-value-view .option {
  display: inline-block;
  padding: 0.235rem;
  background: #A5DEFF;
  margin: 0.235rem;
  background: #222222;
  color: #f1f1f1;
  border: rgba(152, 152, 152, 0.33);
  border-radius: 1px;
  cursor: pointer;
}
.enum-value-view .option:hover {
  background: var(--c-primary);
  color: #252525;
}

.BacHK__pgbox, .ListPickerMain .ItemListWrap, input[type=password], input[type=text], input[type=number], textarea, input:not([type]), input[type=datetime-local], input[type=date], input[type=month], input[type=time], select {
  border: 0 none;
  border: none;
  background-color: #222222;
  color: #f1f1f1;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding-left: 0.381rem;
  padding-right: 0.381rem;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
  outline: 0 none !important;
  -moz-outline: 0 none !important;
  font-weight: normal;
  font-size: 0.9rem;
}
.BacHK__pgbox:focus, .ListPickerMain .ItemListWrap:focus, input[type=password]:focus, input[type=text]:focus, input[type=number]:focus, textarea:focus, input:focus:not([type]), input[type=datetime-local]:focus, input[type=date]:focus, input[type=month]:focus, input[type=time]:focus, select:focus, .BacHK__pgbox:hover, .ListPickerMain .ItemListWrap:hover, input[type=password]:hover, input[type=text]:hover, input[type=number]:hover, textarea:hover, input:hover:not([type]), input[type=datetime-local]:hover, input[type=date]:hover, input[type=month]:hover, input[type=time]:hover, select:hover {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.3);
  border: none;
}
.failed-validation.BacHK__pgbox, .ListPickerMain .failed-validation.ItemListWrap, input.failed-validation[type=password], input.failed-validation[type=text], input.failed-validation[type=number], textarea.failed-validation, input.failed-validation:not([type]), input.failed-validation[type=datetime-local], input.failed-validation[type=date], input.failed-validation[type=month], input.failed-validation[type=time], select.failed-validation {
  border: 1px solid #e84040 !important;
}
.subtle.BacHK__pgbox, .ListPickerMain .subtle.ItemListWrap, input.subtle[type=password], input.subtle[type=text], input.subtle[type=number], textarea.subtle, input.subtle:not([type]), input.subtle[type=datetime-local], input.subtle[type=date], input.subtle[type=month], input.subtle[type=time], select.subtle {
  border-bottom: 0 none;
  border-radius: 3px;
  background: rgba(34, 34, 34, 0.8);
}

.input-overlay {
  position: relative;
}
.input-overlay input {
  padding-right: 2em;
}
.input-overlay::before {
  position: absolute;
  right: 0.4em;
  top: 0.5em;
  display: block;
  color: white;
  opacity: 0.3;
}

input[type=number] .warn {
  color: #f4aa34;
}

input[type=password], input[type=text], input[type=number], textarea, input:not([type]), input[type=datetime-local], input[type=date], input[type=month], input[type=time] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
input[type=password][readonly], input[type=password][disabled], input[type=text][readonly], input[type=text][disabled], input[type=number][readonly], input[type=number][disabled], textarea[readonly], textarea[disabled], input:not([type])[readonly], input:not([type])[disabled], input[type=datetime-local][readonly], input[type=datetime-local][disabled], input[type=date][readonly], input[type=date][disabled], input[type=month][readonly], input[type=month][disabled], input[type=time][readonly], input[type=time][disabled] {
  color: rgba(241, 241, 241, 0.7);
}
input[type=password]:-webkit-autofill, input[type=text]:-webkit-autofill, input[type=number]:-webkit-autofill, textarea:-webkit-autofill, input:not([type]):-webkit-autofill, input[type=datetime-local]:-webkit-autofill, input[type=date]:-webkit-autofill, input[type=month]:-webkit-autofill, input[type=time]:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px #222222, inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1) !important;
  -webkit-text-fill-color: #f1f1f1 !important;
}

textarea {
  font-family: monospace;
  font-size: 1em;
  padding: 0.381rem;
  line-height: 1.6;
  display: block;
  height: initial;
}

label.for_checkbox {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
}

.CapslockAlert {
  background: #e84040;
  color: white;
  padding: 0.235rem;
  border-radius: 3px;
  margin-left: 0.381rem;
  font-size: 70%;
  display: none;
}

input:focus ~ .CapslockAlert.capslock-active {
  display: inline-block;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select {
    padding-right: 18px;
  }
}
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  padding-right: 1.3em;
  background: #222222 url(/images/theme/select_white.svg?c1157b2eae86ccc853b3651bd515ec50) no-repeat center right;
  background-size: contain;
}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #f1f1f1;
}
select option {
  background: #222222;
}
select option:checked {
  background: #5abfff;
  background: var(--c-primary);
  color: #222222;
}
html.not-touch select {
  scrollbar-width: auto;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch select::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: #363636;
}
html.not-touch select::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 4px;
}

select[size] {
  height: auto;
  line-height: 1em;
  overflow-y: auto;
  background-image: none !important;
}
select[size] option:hover {
  background: #252525;
  color: var(--c-primary);
}

.ToggleSwitch {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: relative;
  height: 26px;
  width: 120px;
  background: #222222;
  border-radius: 3px;
  margin: 3px 0 0 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  display: inline-block;
  vertical-align: middle;
}
.ToggleSwitch label.switch-label {
  position: relative;
  z-index: 20;
  float: left;
  width: 58px !important;
  line-height: 26px;
  font-size: 11px;
  color: rgba(241, 241, 241, 0.45);
  text-align: center;
  text-shadow: none;
  cursor: pointer;
  display: block;
  padding: 0;
  align-self: auto;
  font-weight: normal;
}
.ToggleSwitch .switch-label-off {
  padding-left: 2px;
}
.ToggleSwitch .switch-label-on {
  padding-right: 2px;
}
.ToggleSwitch .switch-input {
  display: none;
}
.ToggleSwitch .switch-input:checked + .switch-label {
  font-weight: bold;
  color: #292929;
  text-shadow: none;
  font-size: 0.75rem;
  transition: 0.15s ease-out;
}
.ToggleSwitch .switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 60px; /* Note: left: 50% doesn't transition in WebKit */
}
.ToggleSwitch .switch-selection {
  display: block;
  position: absolute;
  z-index: 10;
  top: 2px;
  left: 2px;
  width: 58px;
  height: 22px;
  border-radius: 3px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  transition: left 0.15s ease-out;
}
.ToggleSwitch .switch-selection {
  background: var(--c-primary);
  background-color: var(--c-primary);
  background-image: linear-gradient(to bottom,var(--c-primary), var(--c-primary));
}
.ToggleSwitch .switch-input:checked + .switch-label-on ~ .switch-selection {
  background-color: var(--c-primary);
  background-image: linear-gradient(to bottom,var(--c-primary), var(--c-primary));
}

#PlannerSetting > .Navbar, #ThermoProgramEditor .pgm-navbar {
  line-height: 50px;
  height: 50px;
  vertical-align: middle;
  background-color: #00568f;
  color: white;
  margin: 10px auto;
  padding: 0 10px;
  position: relative;
  font-size: 20px;
  border-radius: 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
#PlannerSetting > .Navbar > *, #ThermoProgramEditor .pgm-navbar > * {
  position: absolute;
  display: block;
}
#PlannerSetting > .Navbar input[type=text], #ThermoProgramEditor .pgm-navbar input[type=text], #PlannerSetting > .Navbar input[type=number], #ThermoProgramEditor .pgm-navbar input[type=number] {
  color: white;
  padding: 5px 8px;
  font-size: 20px;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: none;
  border-radius: 2px;
  border: 0 none;
  height: initial;
  line-height: initial;
}
#PlannerSetting > .Navbar input[type=text]::-moz-selection, #ThermoProgramEditor .pgm-navbar input[type=text]::-moz-selection, #PlannerSetting > .Navbar input[type=number]::-moz-selection, #ThermoProgramEditor .pgm-navbar input[type=number]::-moz-selection {
  color: black;
  background-color: white;
}
#PlannerSetting > .Navbar input[type=text]::selection, #ThermoProgramEditor .pgm-navbar input[type=text]::selection, #PlannerSetting > .Navbar input[type=number]::selection, #ThermoProgramEditor .pgm-navbar input[type=number]::selection {
  color: black;
  background-color: white;
}
#PlannerSetting > .Navbar input[type=text]:focus, #ThermoProgramEditor .pgm-navbar input[type=text]:focus, #PlannerSetting > .Navbar input[type=text]:hover, #ThermoProgramEditor .pgm-navbar input[type=text]:hover, #PlannerSetting > .Navbar input[type=number]:focus, #ThermoProgramEditor .pgm-navbar input[type=number]:focus, #PlannerSetting > .Navbar input[type=number]:hover, #ThermoProgramEditor .pgm-navbar input[type=number]:hover {
  outline: 0 none;
  background: rgba(255, 255, 255, 0.3);
}
#PlannerSetting > .Navbar .RightBox, #ThermoProgramEditor .pgm-navbar .RightBox {
  right: 0;
  text-align: right;
}
#PlannerSetting > .Navbar .RightBox > *, #ThermoProgramEditor .pgm-navbar .RightBox > * {
  display: inline-block;
}
#PlannerSetting > .Navbar .RightBox .Heading, #ThermoProgramEditor .pgm-navbar .RightBox .Heading {
  padding: 0;
}
#PlannerSetting > .Navbar .RightBox > *:last-child, #ThermoProgramEditor .pgm-navbar .RightBox > *:last-child {
  border-bottom-left-radius: 1px;
  border-top-left-radius: 1px;
}
#PlannerSetting > .Navbar .LeftBox, #ThermoProgramEditor .pgm-navbar .LeftBox {
  left: 0;
}
#PlannerSetting > .Navbar .LeftBox.ltpad, #ThermoProgramEditor .pgm-navbar .LeftBox.ltpad {
  padding-left: 10px;
}
#PlannerSetting > .Navbar .LeftBox a, #ThermoProgramEditor .pgm-navbar .LeftBox a, #PlannerSetting > .Navbar .LeftBox .fake-button, #ThermoProgramEditor .pgm-navbar .LeftBox .fake-button {
  border-right: 2px solid rgba(255, 255, 255, 0.3);
}
#PlannerSetting > .Navbar .LeftBox > *:first-child, #ThermoProgramEditor .pgm-navbar .LeftBox > *:first-child {
  border-bottom-left-radius: 1px;
  border-top-left-radius: 1px;
}
#PlannerSetting > .Navbar .Heading, #ThermoProgramEditor .pgm-navbar .Heading {
  padding: 0 10px;
}
#PlannerSetting > .Navbar a, #ThermoProgramEditor .pgm-navbar a, #PlannerSetting > .Navbar .fake-button, #ThermoProgramEditor .pgm-navbar .fake-button {
  display: inline-block;
  text-align: center;
  color: white;
  text-decoration: none;
  padding: 0 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
#PlannerSetting > .Navbar a.rt, #ThermoProgramEditor .pgm-navbar a.rt, #PlannerSetting > .Navbar .fake-button.rt, #ThermoProgramEditor .pgm-navbar .fake-button.rt {
  margin-left: 5px;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  border-bottom-right-radius: 1px;
  border-top-right-radius: 1px;
}
#PlannerSetting > .Navbar a, #ThermoProgramEditor .pgm-navbar a {
  cursor: pointer;
  background-color: transparent;
}
#PlannerSetting > .Navbar a:hover, #ThermoProgramEditor .pgm-navbar a:hover {
  color: white;
  background-color: rgba(0, 153, 255, 0.4);
}
#PlannerSetting > .Navbar a:active, #ThermoProgramEditor .pgm-navbar a:active, #PlannerSetting > .Navbar a.active, #ThermoProgramEditor .pgm-navbar a.active {
  background-color: rgba(0, 153, 255, 0.6);
}
#PlannerSetting > .Navbar a.agitated, #ThermoProgramEditor .pgm-navbar a.agitated {
  color: white;
  background-color: rgba(0, 146, 231, 0.5);
}
#PlannerSetting > .Navbar a.agitated:hover, #ThermoProgramEditor .pgm-navbar a.agitated:hover {
  color: white;
  background-color: rgba(0, 146, 231, 0.8);
}
#PlannerSetting > .Navbar a.disabled, #ThermoProgramEditor .pgm-navbar a.disabled {
  color: white;
  background-color: transparent;
  opacity: 0.4;
}

.SliderBox {
  display: flex;
  align-items: center;
  justify-items: center;
  position: relative;
}
.SliderBox .ui-slider {
  flex-grow: 1;
  position: relative;
  cursor: pointer;
  background-color: #323232;
  box-shadow: 0 0 0px 1px #323232;
  border-radius: 5px;
}
.SliderBox .ui-slider-range {
  position: absolute;
  cursor: pointer;
  background-color: var(--c-primary);
  box-shadow: 0 0 0px 1px black;
  border-radius: 5px;
}
.SliderBox .ui-slider-handle {
  display: block;
  cursor: pointer;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: block;
  position: absolute;
  border: 9px solid #ededed;
  background: var(--c-primary);
  box-shadow: 0 0 3px black, inset 0 0 2px rgba(0, 0, 0, 0.5);
}
.SliderBox.active .ui-slider-handle {
  background: var(--c-primary) !important;
}
.SliderBox.inactive .ui-slider-handle {
  background: #292929 !important;
}
.SliderBox.horizontal {
  flex-direction: row;
  padding: 0 9px;
}
.SliderBox.horizontal .ui-slider {
  height: 10px;
}
.SliderBox.horizontal .ui-slider-range {
  height: 100%;
  top: 0;
}
.SliderBox.horizontal .ui-slider-range.ui-slider-range-min {
  left: -1px;
}
.SliderBox.horizontal .ui-slider-range.ui-slider-range-max {
  right: -1px;
}
.SliderBox.horizontal .ui-slider-handle {
  top: 50%;
  margin-left: -14px;
  margin-top: -14px;
}
.SliderBox.vertical {
  flex-direction: column;
  padding: 9px 0;
}
.SliderBox.vertical .ui-slider {
  width: 10px;
}
.SliderBox.vertical .ui-slider-range {
  width: 100%;
  left: 0;
}
.SliderBox.vertical .ui-slider-range.ui-slider-range-min {
  bottom: -1px;
}
.SliderBox.vertical .ui-slider-range.ui-slider-range-max {
  top: -1px;
}
.SliderBox.vertical .ui-slider-handle {
  left: 50%;
  margin-left: -14px;
  margin-bottom: -14px;
}
.SliderBox.disabled .ui-slider-range {
  background-color: #3c3c3c;
  box-shadow: 0 0 0px 1px #292929;
}
.SliderBox.disabled .ui-slider-handle {
  border-color: #ededed;
  background: #292929;
}
.SliderBox.no-range .ui-slider, .SliderBox.disabled.no-range .ui-slider {
  box-shadow: none;
  background-color: #3c3c3c;
  box-shadow: 0 0 0px 1px #292929;
}
.SliderBox.no-range.active .ui-slider, .SliderBox.disabled.no-range.active .ui-slider {
  background-color: var(--c-primary);
  box-shadow: 0 0 0px 1px black;
}

.EnumPickerWrapper {
  display: inline-block;
}

.EnumPicker {
  position: relative;
}
.EnumPicker .dropdown {
  margin: 0;
  min-width: -moz-max-content;
  min-width: max-content;
  z-index: 190;
}
.EnumPicker .dropdown .options {
  position: relative;
  overflow-y: scroll;
  max-height: 10rem;
  border: 0 none;
  background-color: #222222;
  color: #f1f1f1;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  line-height: 1.3rem;
  font-weight: normal;
  font-size: 0.9rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}
html.not-touch .EnumPicker .dropdown .options {
  scrollbar-width: thin;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch .EnumPicker .dropdown .options::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #363636;
}
html.not-touch .EnumPicker .dropdown .options::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 3px;
}

.EnumPicker .dropdown .options ul {
  padding: 0;
  list-style: none;
}
.EnumPicker .dropdown .options ul li {
  padding-left: 0.381rem;
  padding-right: 0.381rem;
  max-height: 1.2rem;
}
.EnumPicker .dropdown .options ul a {
  color: #f1f1f1;
  text-decoration: none;
}
.EnumPicker .dropdown .options ul li:hover, .EnumPicker .dropdown .options ul li.cursor {
  background: var(--c-primary);
}
.EnumPicker .dropdown .options ul li:hover, .EnumPicker .dropdown .options ul li:hover a, .EnumPicker .dropdown .options ul li.cursor, .EnumPicker .dropdown .options ul li.cursor a {
  color: #222222;
}
.EnumPicker .dropdown .footer {
  position: relative;
}
.EnumPicker .dropdown .footer button {
  width: 16rem;
  text-align: left;
}
.EnumPicker input.searchbox {
  background: #222222 url(/images/theme/select_white.svg?c1157b2eae86ccc853b3651bd515ec50) no-repeat center right;
  padding-right: 20px;
}
.EnumPicker input.searchbox::-moz-placeholder {
  color: #f1f1f1;
}
.EnumPicker input.searchbox::placeholder {
  color: #f1f1f1;
}
.EnumPicker .copy-key {
  font-size: 90%;
  position: absolute;
  right: 15px;
  top: 0;
  line-height: 2rem;
  vertical-align: middle;
  opacity: 0.8;
  cursor: pointer;
  display: none;
}
.EnumPicker.with-copy:hover input.searchbox {
  padding-right: 32px;
}
.EnumPicker.with-copy:hover .copy-key {
  display: inline-block;
}

/**
 * Base style for two-column editors where the left column contains
 * a <select> and the right column shows detailed settings for
 * the selected option.
 */
.nav-preview-conf .editarea, .hex7config {
  margin-top: 0.617rem;
  display: flex;
  flex-direction: row;
}
.nav-preview-conf .editarea > *, .hex7config > * {
  margin-right: 0.617rem;
}
.nav-preview-conf .editarea > *:last-child, .hex7config > *:last-child {
  margin-right: 0;
}
@media screen and (max-width: 1100px) {
  .nav-preview-conf .editarea, .hex7config {
    flex-direction: column;
  }
}
.nav-preview-conf .editarea .fields, .hex7config .fields {
  flex-grow: 1;
}
.nav-preview-conf .editarea .fields.none, .hex7config .fields.none {
  padding: 0.617rem;
  font-weight: bold;
}
.nav-preview-conf .editarea .fields label, .hex7config .fields label, .nav-preview-conf .editarea .fields .Row.checkbox .checkbox-wrap, .hex7config .fields .Row.checkbox .checkbox-wrap {
  width: 10rem;
}

#manage_components .Restrict {
  margin-right: 0.617rem;
}
#manage_components .Restrict select, #manage_components .Restrict input {
  width: 10em;
}
#manage_components #resultbox {
  background: #222222;
  margin-top: 1.4em;
  padding: 0.381rem 0.617rem 0 0.617rem;
  border-radius: 3px;
  overflow: hidden;
}
#manage_components #resultbox .Realm {
  position: relative;
  border-top: 1px solid #5a5a5a;
  padding-top: 0.8em;
  margin-top: 0.617rem;
  margin-bottom: 0.617rem;
}
#manage_components #resultbox .Realm .realm_name {
  font-weight: bold;
  padding: 0 0.381rem;
  position: absolute;
  left: 3em;
  top: -0.5em;
  background: #292929;
  color: var(--c-primary);
}
#manage_components #resultbox .Realm .realm_comps {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#manage_components #resultbox .Component {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: block;
  background: #2d2d2d;
  color: #f1f1f1;
  text-decoration: none;
  transition: background-color 0.3s;
  border-radius: 3px;
  cursor: pointer;
  width: 170px;
  margin: 0.235rem;
  box-shadow: 0 0 3px black;
}
#manage_components #resultbox .Component:hover {
  box-shadow: 0 0 3px var(--c-primary), 0 0 3px var(--c-primary);
}
#manage_components #resultbox .Component:active {
  position: relative;
  top: 1px;
  box-shadow: 0 0 2px var(--c-primary);
}
#manage_components #resultbox .Component > * {
  display: block;
  padding: 0.15rem 0.381rem;
  text-overflow: ellipsis;
  overflow: hidden;
}
#manage_components #resultbox .Component .name {
  padding-top: 0.2rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom: 1px solid #292929;
  background: var(--c-tabbar);
  color: white;
}
#manage_components #resultbox .Component .alias {
  padding-top: 0.3rem;
  font-family: monospace;
  font-size: 90%;
}
#manage_components #resultbox .Component .type {
  font-size: 90%;
  opacity: 0.6;
}
#manage_components #resultbox .Component.not-enabled {
  opacity: 0.5;
}
#manage_components #resultbox .Component.error .name {
  background: #e84040;
}
#manage_components #resultbox .Component.error .type {
  text-decoration: line-through;
}
#manage_components #resultbox .Component.uwd-warn .name {
  background: #f4aa34;
}
#manage_components #resultbox .Component.uwd-crit .name {
  background: #e84040;
}

#complist-detailed {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  top: 2em;
}
#complist-detailed h1 {
  font-size: 1.5rem;
  margin: 0;
  padding: 0;
  margin-left: 0.381rem;
}
#complist-detailed .pagination {
  justify-content: flex-end;
}
#complist-detailed.as-search-resultbox {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin-top: 0.381rem;
}
#complist-detailed.as-search-resultbox .comp-info {
  width: 300px;
}
#complist-detailed.as-search-resultbox #results-table {
  margin: 0 auto;
}
#complist-detailed #cl-bottom {
  display: flex;
  flex-grow: 1;
  align-items: stretch;
  overflow-y: hidden;
}
#complist-detailed #cl-realms select {
  padding: 0.235rem;
  height: 100%;
}
#complist-detailed #cl-realms option {
  padding: 0.235rem 0.381rem;
}
#complist-detailed .comp {
  cursor: pointer;
}
#complist-detailed #cl-comps {
  flex-grow: 1;
  margin-left: 0.617rem;
  overflow-y: scroll;
}
html.not-touch #complist-detailed #cl-comps {
  scrollbar-width: auto;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch #complist-detailed #cl-comps::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: #363636;
}
html.not-touch #complist-detailed #cl-comps::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 4px;
}

#complist-detailed #cl-comps > table {
  font-size: 0.9rem;
  border-collapse: collapse;
  width: 100%;
}
#complist-detailed #cl-comps > table > tbody > tr > td {
  border-top: 1px solid none;
  padding: 0.381rem;
}
#complist-detailed #cl-comps > table > tbody > tr:last-child > td {
  border-bottom: 1px solid none;
}
#complist-detailed tr.realm-banner + tr.comp > td {
  border-top: none !important;
}
#complist-detailed tr.realm-banner > td {
  position: relative;
}
#complist-detailed tr.realm-banner > td::before {
  content: "\e82c";
}
#complist-detailed tr.realm-banner > td::before {
  position: absolute;
  right: 0.381rem;
}
#complist-detailed tr.realm-banner {
  font-size: 120%;
}
#complist-detailed tr.realm-banner > td {
  padding-top: 0.235rem;
  padding-bottom: 0.235rem;
  border-top: none !important;
  border-bottom: none !important;
  background: var(--c-tabbar);
  border-radius: 3px;
}
#complist-detailed .realm-name {
  font-weight: bold;
  color: #eee;
}
#complist-detailed .realm-alias {
  color: rgba(238, 238, 238, 0.6);
  font-weight: bold;
  padding-left: 0.381rem;
  font-family: monospace;
}
#complist-detailed tr.comp > td {
  vertical-align: top;
}
#complist-detailed tr.comp .name {
  font-weight: bold;
  color: var(--c-primary);
}
#complist-detailed tr.comp .alias {
  font-family: monospace;
  color: rgba(241, 241, 241, 0.6);
}
#complist-detailed tr.comp .updated_at {
  color: rgba(241, 241, 241, 0.6);
  font-size: 90%;
}
#complist-detailed tr.comp > td {
  background: transparent;
  transition: background linear 0.2s;
}
#complist-detailed tr.comp.alt > td {
  background: #2d2d2d;
}
#complist-detailed tr.comp:hover > td, #complist-detailed tr.comp.alt:hover > td {
  background: #252525;
}
#complist-detailed .comp.no-driver .type {
  color: #e84040;
  text-decoration: line-through;
}
#complist-detailed .comp.disabled .comp-info table, #complist-detailed .comp.disabled .comp-info span.name, #complist-detailed .comp.disabled .comp-info .alias, #complist-detailed .comp.disabled .comp-info .type, #complist-detailed .comp.disabled .comp-info .updated_at, #complist-detailed .comp.disabled .comp-info div.name > i {
  opacity: 0.5;
}
#complist-detailed .comp.disabled .name span.name {
  text-decoration: line-through;
}
#complist-detailed .comp td.comp-info.main {
  border-left: 3px solid transparent;
}
#complist-detailed .comp.selected td.comp-info.main {
  border-left: 3px solid var(--c-primary);
}
#complist-detailed.uwd-warn {
  opacity: 0.7;
  color: #858585 !important;
}
#complist-detailed .comp-info > div {
  display: block;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  overflow-x: hidden;
  line-height: 1.4em;
}
#complist-detailed i.warning {
  color: #f4aa34;
}
#complist-detailed i.error {
  color: #e84040;
}
#complist-detailed .comp-info {
  width: 250px;
}
#complist-detailed .comp-info th {
  font-weight: normal;
  color: rgba(241, 241, 241, 0.7);
  font-size: 90%;
  text-align: left;
}
#complist-detailed .comp-info .value {
  color: #f1f1f1;
  text-align: right;
  font-size: 0.9rem;
  padding-left: 0.6rem;
  display: block;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
#complist-detailed .comp-info .value input[type=checkbox] {
  vertical-align: middle;
}
#complist-detailed .comp-info .unit {
  padding-left: 0.2rem;
  font-size: 0.9rem;
}
#complist-detailed .comp-checkbox {
  text-align: center;
  width: 4em;
  padding-top: 1em !important;
}
#complist-detailed .comp-checkbox i::before {
  margin: 0;
  padding: 0;
}
#complist-detailed .comp-checkbox:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}
#complist-detailed #selection-actions {
  padding: 0.235rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  display: inline-block;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 0.235rem;
  margin-top: -0.381rem;
  margin-bottom: -0.381rem;
}
#complist-detailed #selection-actions .selection-count {
  margin-right: 0.617rem;
}
#complist-detailed #sort-controls {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.381rem;
}
#complist-detailed #sort-controls .right {
  margin-left: auto;
}

#new_comp_type .SearchBox {
  position: relative;
  margin-right: 1em;
}
#new_comp_type .SearchBox input {
  width: 10em;
  margin-right: 0.381rem;
}
#new_comp_type .SearchBox i {
  position: absolute;
  right: 10px;
  top: 2px;
  font-size: 110%;
  vertical-align: middle;
  pointer-events: none;
  opacity: 0.7;
}
#new_comp_type .TagBox {
  border-bottom: 1px solid #292929;
  padding-bottom: 0.381rem;
  padding-right: 0.381rem;
  border-right: 25px solid #292929;
  position: relative;
  margin-bottom: 0.381rem;
}
#new_comp_type .TagBox .title {
  position: absolute;
  right: -22px;
  top: 10px;
  transform-origin: top right;
  transform: rotate(90deg) translateX(100%);
  font-weight: bold;
  color: var(--c-primary);
}
#new_comp_type .TagBox .Tag {
  margin: 2px 2px;
  white-space: nowrap;
  word-wrap: normal;
  font-size: 95%;
}
#new_comp_type .TagBox .Tag.disabled {
  opacity: 0.3;
}
#new_comp_type .CtyBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 0.235rem;
}
#new_comp_type .CtyBox .Driver {
  display: block;
  height: 6.5rem;
  background: #323232;
  padding: 0.381rem;
  width: calc(50% - 6px);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-left: 2px solid #252525;
  border-right: 2px solid #252525;
  border-radius: 2px;
  margin: 3px;
  text-decoration: none;
  color: #f1f1f1;
}
#new_comp_type .CtyBox .Driver:active, #new_comp_type .CtyBox .Driver.pushed {
  top: 1px;
}
#new_comp_type .CtyBox .Driver:hover {
  background: #252525;
  border-color: var(--c-primary);
}
#new_comp_type .CtyBox .Driver:hover .drvtags::after {
  background: linear-gradient(to left, #252525, transparent);
}
#new_comp_type .CtyBox .Driver .name {
  font-size: 14pt;
  position: absolute;
  left: 0.381rem;
  top: 0.381rem;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 280px;
}
#new_comp_type .CtyBox .Driver.deprecated .name {
  text-decoration: line-through;
}
#new_comp_type .CtyBox .Driver .description {
  font-size: 10pt;
  position: absolute;
  left: 0.381rem;
  top: 2rem;
  height: 3rem;
  overflow: hidden;
  padding-right: 5px;
}
#new_comp_type .CtyBox .Driver .alias {
  position: absolute;
  right: 0.381rem;
  top: 0.381rem;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 140px;
  font-size: 8pt;
}
#new_comp_type .CtyBox .Driver .drvtags {
  position: absolute;
  left: 0.381rem;
  right: 0.381rem;
  bottom: 0.381rem;
  overflow: hidden;
  font-size: 90%;
}
#new_comp_type .CtyBox .Driver .drvtags::after {
  display: block;
  content: "";
  height: 100%;
  width: 10px;
  position: absolute;
  right: 0;
  top: 0;
  background: linear-gradient(to left, #323232, transparent);
}

.Row.expression_field .FieldBox, .CompConfWidget, .UwdProblemComp, .ValueWatcher, .TabbedSettingsSubwindow, .ValueWatcherConfig {
  border: solid 1px #4a4a4a;
  border-radius: 1px;
}

/**
 * Custom composite widgets for comp editor
 */
.CompConfWidget, .UwdProblemComp, .ValueWatcher, .TabbedSettingsSubwindow, .ValueWatcherConfig {
  margin-top: 0.617rem;
  margin-bottom: 1rem;
}
.CompConfWidget:has(.Table.tableeditor), .UwdProblemComp:has(.Table.tableeditor), .ValueWatcher:has(.Table.tableeditor), .TabbedSettingsSubwindow:has(.Table.tableeditor), .ValueWatcherConfig:has(.Table.tableeditor) {
  overflow: auto;
}
.CompConfWidget:last-child, .UwdProblemComp:last-child, .ValueWatcher:last-child, .TabbedSettingsSubwindow:last-child, .ValueWatcherConfig:last-child {
  margin-bottom: 0;
}
.CompConfWidget > .handle, .UwdProblemComp > .handle, .ValueWatcher > .handle, .TabbedSettingsSubwindow > .handle, .ValueWatcherConfig > .handle {
  padding: 0.235rem 0.381rem;
  font-size: 0.9rem;
  background-color: #323232;
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: var(--c-primary);
}
.CompConfWidget > .handle .button, .UwdProblemComp > .handle .button, .ValueWatcher > .handle .button, .TabbedSettingsSubwindow > .handle .button, .ValueWatcherConfig > .handle .button {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.3);
}
.CompConfWidget > .fields, .UwdProblemComp > .fields, .ValueWatcher > .fields, .TabbedSettingsSubwindow > .fields, .ValueWatcherConfig > .fields {
  padding: 0.381rem 0;
}
.CompConfWidget section, .UwdProblemComp section, .ValueWatcher section, .TabbedSettingsSubwindow section, .ValueWatcherConfig section, .CompConfWidget .FormGroup, .UwdProblemComp .FormGroup, .ValueWatcher .FormGroup, .TabbedSettingsSubwindow .FormGroup, .ValueWatcherConfig .FormGroup {
  margin: 0.617rem;
}
.CompConfWidget section:first-child, .UwdProblemComp section:first-child, .ValueWatcher section:first-child, .TabbedSettingsSubwindow section:first-child, .ValueWatcherConfig section:first-child, .CompConfWidget .FormGroup:first-child, .UwdProblemComp .FormGroup:first-child, .ValueWatcher .FormGroup:first-child, .TabbedSettingsSubwindow .FormGroup:first-child, .ValueWatcherConfig .FormGroup:first-child {
  margin-top: 0;
}
.CompConfWidget .FormGroup, .UwdProblemComp .FormGroup, .ValueWatcher .FormGroup, .TabbedSettingsSubwindow .FormGroup, .ValueWatcherConfig .FormGroup {
  padding-left: 0;
}
.CompConfWidget .FormGroup label, .UwdProblemComp .FormGroup label, .ValueWatcher .FormGroup label, .TabbedSettingsSubwindow .FormGroup label, .ValueWatcherConfig .FormGroup label, .CompConfWidget .FormGroup .Label, .UwdProblemComp .FormGroup .Label, .ValueWatcher .FormGroup .Label, .TabbedSettingsSubwindow .FormGroup .Label, .ValueWatcherConfig .FormGroup .Label {
  padding-left: 0;
  width: 15.383rem;
}

/**
 * Multiple props in a foldable box
 */
.CompConfWidget.spoiler > .handle, .spoiler.UwdProblemComp > .handle, .spoiler.ValueWatcher > .handle, .spoiler.TabbedSettingsSubwindow > .handle, .spoiler.ValueWatcherConfig > .handle {
  cursor: pointer;
}
.CompConfWidget.spoiler > .handle::before, .spoiler.UwdProblemComp > .handle::before, .spoiler.ValueWatcher > .handle::before, .spoiler.TabbedSettingsSubwindow > .handle::before, .spoiler.ValueWatcherConfig > .handle::before {
  content: "\e76d";
}
.CompConfWidget.spoiler > .handle::before, .spoiler.UwdProblemComp > .handle::before, .spoiler.ValueWatcher > .handle::before, .spoiler.TabbedSettingsSubwindow > .handle::before, .spoiler.ValueWatcherConfig > .handle::before {
  vertical-align: middle;
}
.CompConfWidget.spoiler.nocoll > .handle::before, .spoiler.nocoll.UwdProblemComp > .handle::before, .spoiler.nocoll.ValueWatcher > .handle::before, .spoiler.nocoll.TabbedSettingsSubwindow > .handle::before, .spoiler.nocoll.ValueWatcherConfig > .handle::before {
  opacity: 0.2;
}
.CompConfWidget.spoiler .CollapsedOverlay, .spoiler.UwdProblemComp .CollapsedOverlay, .spoiler.ValueWatcher .CollapsedOverlay, .spoiler.TabbedSettingsSubwindow .CollapsedOverlay, .spoiler.ValueWatcherConfig .CollapsedOverlay {
  display: none;
}
.CompConfWidget.spoiler.collapsed, .spoiler.collapsed.UwdProblemComp, .spoiler.collapsed.ValueWatcher, .spoiler.collapsed.TabbedSettingsSubwindow, .spoiler.collapsed.ValueWatcherConfig {
  max-height: 150px;
  overflow: hidden;
  position: relative;
}
.CompConfWidget.spoiler.collapsed > .handle::before, .spoiler.collapsed.UwdProblemComp > .handle::before, .spoiler.collapsed.ValueWatcher > .handle::before, .spoiler.collapsed.TabbedSettingsSubwindow > .handle::before, .spoiler.collapsed.ValueWatcherConfig > .handle::before {
  content: "\e76e";
}
.CompConfWidget.spoiler.collapsed .CollapsedOverlay, .spoiler.collapsed.UwdProblemComp .CollapsedOverlay, .spoiler.collapsed.ValueWatcher .CollapsedOverlay, .spoiler.collapsed.TabbedSettingsSubwindow .CollapsedOverlay, .spoiler.collapsed.ValueWatcherConfig .CollapsedOverlay {
  cursor: pointer;
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(49, 49, 49, 0), rgba(49, 49, 49, 0.5) 20%, #313131 100%);
  z-index: 1;
}
.CompConfWidget.spoiler.collapsed .CollapsedOverlay::before, .spoiler.collapsed.UwdProblemComp .CollapsedOverlay::before, .spoiler.collapsed.ValueWatcher .CollapsedOverlay::before, .spoiler.collapsed.TabbedSettingsSubwindow .CollapsedOverlay::before, .spoiler.collapsed.ValueWatcherConfig .CollapsedOverlay::before {
  font-family: "fontello";
  font-size: 16pt;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  color: var(--c-primary);
  pointer-events: none;
}
.CompConfWidget.spoiler.collapsed .CollapsedOverlay::before, .spoiler.collapsed.UwdProblemComp .CollapsedOverlay::before, .spoiler.collapsed.ValueWatcher .CollapsedOverlay::before, .spoiler.collapsed.TabbedSettingsSubwindow .CollapsedOverlay::before, .spoiler.collapsed.ValueWatcherConfig .CollapsedOverlay::before {
  content: "\f0f7";
}

.Row.expression_field .FieldBox.simple .simplepicker, .Row.expression_field .FieldBox.textarea .suggestpicker, .Modal .expr-picker, .DialogNew .expr-picker, .CompConfWidget.compare_chart .add-box, .compare_chart.UwdProblemComp .add-box, .compare_chart.ValueWatcher .add-box, .compare_chart.TabbedSettingsSubwindow .add-box, .compare_chart.ValueWatcherConfig .add-box, .CompConfWidget.compare_chart .add-box-advanced, .compare_chart.UwdProblemComp .add-box-advanced, .compare_chart.ValueWatcher .add-box-advanced, .compare_chart.TabbedSettingsSubwindow .add-box-advanced, .compare_chart.ValueWatcherConfig .add-box-advanced {
  display: flex;
}
.Row.expression_field .FieldBox.simple .simplepicker > *, .Row.expression_field .FieldBox.textarea .suggestpicker > *, .Modal .expr-picker > *, .DialogNew .expr-picker > *, .CompConfWidget.compare_chart .add-box > *, .compare_chart.UwdProblemComp .add-box > *, .compare_chart.ValueWatcher .add-box > *, .compare_chart.TabbedSettingsSubwindow .add-box > *, .compare_chart.ValueWatcherConfig .add-box > *, .CompConfWidget.compare_chart .add-box-advanced > *, .compare_chart.UwdProblemComp .add-box-advanced > *, .compare_chart.ValueWatcher .add-box-advanced > *, .compare_chart.TabbedSettingsSubwindow .add-box-advanced > *, .compare_chart.ValueWatcherConfig .add-box-advanced > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 0.381rem;
}
.Row.expression_field .FieldBox.simple .simplepicker > *:last-child, .Row.expression_field .FieldBox.textarea .suggestpicker > *:last-child, .Modal .expr-picker > *:last-child, .DialogNew .expr-picker > *:last-child, .CompConfWidget.compare_chart .add-box > *:last-child, .compare_chart.UwdProblemComp .add-box > *:last-child, .compare_chart.ValueWatcher .add-box > *:last-child, .compare_chart.TabbedSettingsSubwindow .add-box > *:last-child, .compare_chart.ValueWatcherConfig .add-box > *:last-child, .CompConfWidget.compare_chart .add-box-advanced > *:last-child, .compare_chart.UwdProblemComp .add-box-advanced > *:last-child, .compare_chart.ValueWatcher .add-box-advanced > *:last-child, .compare_chart.TabbedSettingsSubwindow .add-box-advanced > *:last-child, .compare_chart.ValueWatcherConfig .add-box-advanced > *:last-child {
  margin-right: 0;
}
.Row.expression_field .FieldBox.simple .simplepicker .label, .Row.expression_field .FieldBox.textarea .suggestpicker .label, .Modal .expr-picker .label, .DialogNew .expr-picker .label, .CompConfWidget.compare_chart .add-box .label, .compare_chart.UwdProblemComp .add-box .label, .compare_chart.ValueWatcher .add-box .label, .compare_chart.TabbedSettingsSubwindow .add-box .label, .compare_chart.ValueWatcherConfig .add-box .label, .CompConfWidget.compare_chart .add-box-advanced .label, .compare_chart.UwdProblemComp .add-box-advanced .label, .compare_chart.ValueWatcher .add-box-advanced .label, .compare_chart.TabbedSettingsSubwindow .add-box-advanced .label, .compare_chart.ValueWatcherConfig .add-box-advanced .label {
  padding-left: 0.381rem;
}
.Row.expression_field .FieldBox.simple .simplepicker label, .Row.expression_field .FieldBox.textarea .suggestpicker label, .Modal .expr-picker label, .DialogNew .expr-picker label, .CompConfWidget.compare_chart .add-box label, .compare_chart.UwdProblemComp .add-box label, .compare_chart.ValueWatcher .add-box label, .compare_chart.TabbedSettingsSubwindow .add-box label, .compare_chart.ValueWatcherConfig .add-box label, .CompConfWidget.compare_chart .add-box-advanced label, .compare_chart.UwdProblemComp .add-box-advanced label, .compare_chart.ValueWatcher .add-box-advanced label, .compare_chart.TabbedSettingsSubwindow .add-box-advanced label, .compare_chart.ValueWatcherConfig .add-box-advanced label {
  font-size: 75%;
  padding-bottom: 3px;
}
.Row.expression_field .FieldBox.simple .simplepicker .addbtnbox label, .Row.expression_field .FieldBox.textarea .suggestpicker .addbtnbox label, .Modal .expr-picker .addbtnbox label, .DialogNew .expr-picker .addbtnbox label, .CompConfWidget.compare_chart .add-box .addbtnbox label, .compare_chart.UwdProblemComp .add-box .addbtnbox label, .compare_chart.ValueWatcher .add-box .addbtnbox label, .compare_chart.TabbedSettingsSubwindow .add-box .addbtnbox label, .compare_chart.ValueWatcherConfig .add-box .addbtnbox label, .CompConfWidget.compare_chart .add-box-advanced .addbtnbox label, .compare_chart.UwdProblemComp .add-box-advanced .addbtnbox label, .compare_chart.ValueWatcher .add-box-advanced .addbtnbox label, .compare_chart.TabbedSettingsSubwindow .add-box-advanced .addbtnbox label, .compare_chart.ValueWatcherConfig .add-box-advanced .addbtnbox label {
  font-size: 100%;
}
.Row.expression_field .FieldBox.simple .simplepicker a, .Row.expression_field .FieldBox.textarea .suggestpicker a, .Modal .expr-picker a, .DialogNew .expr-picker a, .CompConfWidget.compare_chart .add-box a, .compare_chart.UwdProblemComp .add-box a, .compare_chart.ValueWatcher .add-box a, .compare_chart.TabbedSettingsSubwindow .add-box a, .compare_chart.ValueWatcherConfig .add-box a, .CompConfWidget.compare_chart .add-box-advanced a, .compare_chart.UwdProblemComp .add-box-advanced a, .compare_chart.ValueWatcher .add-box-advanced a, .compare_chart.TabbedSettingsSubwindow .add-box-advanced a, .compare_chart.ValueWatcherConfig .add-box-advanced a {
  align-self: flex-end;
  height: 29px;
  display: block;
}
.Row.expression_field .FieldBox.simple .simplepicker a:hover, .Row.expression_field .FieldBox.textarea .suggestpicker a:hover, .Modal .expr-picker a:hover, .DialogNew .expr-picker a:hover, .CompConfWidget.compare_chart .add-box a:hover, .compare_chart.UwdProblemComp .add-box a:hover, .compare_chart.ValueWatcher .add-box a:hover, .compare_chart.TabbedSettingsSubwindow .add-box a:hover, .compare_chart.ValueWatcherConfig .add-box a:hover, .CompConfWidget.compare_chart .add-box-advanced a:hover, .compare_chart.UwdProblemComp .add-box-advanced a:hover, .compare_chart.ValueWatcher .add-box-advanced a:hover, .compare_chart.TabbedSettingsSubwindow .add-box-advanced a:hover, .compare_chart.ValueWatcherConfig .add-box-advanced a:hover {
  color: #222222;
  background: var(--c-primary);
}
.Row.expression_field .FieldBox.simple .simplepicker .ncount, .Row.expression_field .FieldBox.textarea .suggestpicker .ncount, .Modal .expr-picker .ncount, .DialogNew .expr-picker .ncount, .CompConfWidget.compare_chart .add-box .ncount, .compare_chart.UwdProblemComp .add-box .ncount, .compare_chart.ValueWatcher .add-box .ncount, .compare_chart.TabbedSettingsSubwindow .add-box .ncount, .compare_chart.ValueWatcherConfig .add-box .ncount, .CompConfWidget.compare_chart .add-box-advanced .ncount, .compare_chart.UwdProblemComp .add-box-advanced .ncount, .compare_chart.ValueWatcher .add-box-advanced .ncount, .compare_chart.TabbedSettingsSubwindow .add-box-advanced .ncount, .compare_chart.ValueWatcherConfig .add-box-advanced .ncount {
  padding-left: 5px;
}
.Row.expression_field .FieldBox.simple .simplepicker .ncount::before, .Row.expression_field .FieldBox.textarea .suggestpicker .ncount::before, .Modal .expr-picker .ncount::before, .DialogNew .expr-picker .ncount::before, .CompConfWidget.compare_chart .add-box .ncount::before, .compare_chart.UwdProblemComp .add-box .ncount::before, .compare_chart.ValueWatcher .add-box .ncount::before, .compare_chart.TabbedSettingsSubwindow .add-box .ncount::before, .compare_chart.ValueWatcherConfig .add-box .ncount::before, .CompConfWidget.compare_chart .add-box-advanced .ncount::before, .compare_chart.UwdProblemComp .add-box-advanced .ncount::before, .compare_chart.ValueWatcher .add-box-advanced .ncount::before, .compare_chart.TabbedSettingsSubwindow .add-box-advanced .ncount::before, .compare_chart.ValueWatcherConfig .add-box-advanced .ncount::before {
  content: "(";
}
.Row.expression_field .FieldBox.simple .simplepicker .ncount::after, .Row.expression_field .FieldBox.textarea .suggestpicker .ncount::after, .Modal .expr-picker .ncount::after, .DialogNew .expr-picker .ncount::after, .CompConfWidget.compare_chart .add-box .ncount::after, .compare_chart.UwdProblemComp .add-box .ncount::after, .compare_chart.ValueWatcher .add-box .ncount::after, .compare_chart.TabbedSettingsSubwindow .add-box .ncount::after, .compare_chart.ValueWatcherConfig .add-box .ncount::after, .CompConfWidget.compare_chart .add-box-advanced .ncount::after, .compare_chart.UwdProblemComp .add-box-advanced .ncount::after, .compare_chart.ValueWatcher .add-box-advanced .ncount::after, .compare_chart.TabbedSettingsSubwindow .add-box-advanced .ncount::after, .compare_chart.ValueWatcherConfig .add-box-advanced .ncount::after {
  content: ")";
}
.Row.expression_field .FieldBox.simple .simplepicker input, .Row.expression_field .FieldBox.textarea .suggestpicker input, .Modal .expr-picker input, .DialogNew .expr-picker input, .CompConfWidget.compare_chart .add-box input, .compare_chart.UwdProblemComp .add-box input, .compare_chart.ValueWatcher .add-box input, .compare_chart.TabbedSettingsSubwindow .add-box input, .compare_chart.ValueWatcherConfig .add-box input, .CompConfWidget.compare_chart .add-box-advanced input, .compare_chart.UwdProblemComp .add-box-advanced input, .compare_chart.ValueWatcher .add-box-advanced input, .compare_chart.TabbedSettingsSubwindow .add-box-advanced input, .compare_chart.ValueWatcherConfig .add-box-advanced input {
  width: 8em;
}
.Row.expression_field .FieldBox.simple .simplepicker input[type=checkbox], .Row.expression_field .FieldBox.textarea .suggestpicker input[type=checkbox], .Modal .expr-picker input[type=checkbox], .DialogNew .expr-picker input[type=checkbox], .CompConfWidget.compare_chart .add-box input[type=checkbox], .compare_chart.UwdProblemComp .add-box input[type=checkbox], .compare_chart.ValueWatcher .add-box input[type=checkbox], .compare_chart.TabbedSettingsSubwindow .add-box input[type=checkbox], .compare_chart.ValueWatcherConfig .add-box input[type=checkbox], .CompConfWidget.compare_chart .add-box-advanced input[type=checkbox], .compare_chart.UwdProblemComp .add-box-advanced input[type=checkbox], .compare_chart.ValueWatcher .add-box-advanced input[type=checkbox], .compare_chart.TabbedSettingsSubwindow .add-box-advanced input[type=checkbox], .compare_chart.ValueWatcherConfig .add-box-advanced input[type=checkbox] {
  width: 1em;
}
.Row.expression_field .FieldBox.simple .simplepicker .x-comps select, .Row.expression_field .FieldBox.textarea .suggestpicker .x-comps select, .Modal .expr-picker .x-comps select, .DialogNew .expr-picker .x-comps select, .CompConfWidget.compare_chart .add-box .x-comps select, .compare_chart.UwdProblemComp .add-box .x-comps select, .compare_chart.ValueWatcher .add-box .x-comps select, .compare_chart.TabbedSettingsSubwindow .add-box .x-comps select, .compare_chart.ValueWatcherConfig .add-box .x-comps select, .CompConfWidget.compare_chart .add-box-advanced .x-comps select, .compare_chart.UwdProblemComp .add-box-advanced .x-comps select, .compare_chart.ValueWatcher .add-box-advanced .x-comps select, .compare_chart.TabbedSettingsSubwindow .add-box-advanced .x-comps select, .compare_chart.ValueWatcherConfig .add-box-advanced .x-comps select,
.Row.expression_field .FieldBox.simple .simplepicker .x-objects select,
.Row.expression_field .FieldBox.textarea .suggestpicker .x-objects select,
.Modal .expr-picker .x-objects select,
.DialogNew .expr-picker .x-objects select,
.CompConfWidget.compare_chart .add-box .x-objects select,
.compare_chart.UwdProblemComp .add-box .x-objects select,
.compare_chart.ValueWatcher .add-box .x-objects select,
.compare_chart.TabbedSettingsSubwindow .add-box .x-objects select,
.compare_chart.ValueWatcherConfig .add-box .x-objects select,
.CompConfWidget.compare_chart .add-box-advanced .x-objects select,
.compare_chart.UwdProblemComp .add-box-advanced .x-objects select,
.compare_chart.ValueWatcher .add-box-advanced .x-objects select,
.compare_chart.TabbedSettingsSubwindow .add-box-advanced .x-objects select,
.compare_chart.ValueWatcherConfig .add-box-advanced .x-objects select {
  width: 12em;
}
.Row.expression_field .FieldBox.simple .simplepicker .x-props select, .Row.expression_field .FieldBox.textarea .suggestpicker .x-props select, .Modal .expr-picker .x-props select, .DialogNew .expr-picker .x-props select, .CompConfWidget.compare_chart .add-box .x-props select, .compare_chart.UwdProblemComp .add-box .x-props select, .compare_chart.ValueWatcher .add-box .x-props select, .compare_chart.TabbedSettingsSubwindow .add-box .x-props select, .compare_chart.ValueWatcherConfig .add-box .x-props select, .CompConfWidget.compare_chart .add-box-advanced .x-props select, .compare_chart.UwdProblemComp .add-box-advanced .x-props select, .compare_chart.ValueWatcher .add-box-advanced .x-props select, .compare_chart.TabbedSettingsSubwindow .add-box-advanced .x-props select, .compare_chart.ValueWatcherConfig .add-box-advanced .x-props select {
  width: 10em;
}

/**
 * Series manager for CompareChart
 */
.CompConfWidget.compare_chart .handle, .compare_chart.UwdProblemComp .handle, .compare_chart.ValueWatcher .handle, .compare_chart.TabbedSettingsSubwindow .handle, .compare_chart.ValueWatcherConfig .handle {
  font-weight: bold;
}
.CompConfWidget.compare_chart .add-box, .compare_chart.UwdProblemComp .add-box, .compare_chart.ValueWatcher .add-box, .compare_chart.TabbedSettingsSubwindow .add-box, .compare_chart.ValueWatcherConfig .add-box, .CompConfWidget.compare_chart .add-box-advanced, .compare_chart.UwdProblemComp .add-box-advanced, .compare_chart.ValueWatcher .add-box-advanced, .compare_chart.TabbedSettingsSubwindow .add-box-advanced, .compare_chart.ValueWatcherConfig .add-box-advanced {
  padding-bottom: 0.381rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.CompConfWidget.compare_chart .add-box-advanced, .compare_chart.UwdProblemComp .add-box-advanced, .compare_chart.ValueWatcher .add-box-advanced, .compare_chart.TabbedSettingsSubwindow .add-box-advanced, .compare_chart.ValueWatcherConfig .add-box-advanced {
  padding-top: 0.381rem;
}
.CompConfWidget.compare_chart .hints, .compare_chart.UwdProblemComp .hints, .compare_chart.ValueWatcher .hints, .compare_chart.TabbedSettingsSubwindow .hints, .compare_chart.ValueWatcherConfig .hints {
  color: #999;
  padding: 0.381rem;
  padding-bottom: 0;
}
.CompConfWidget.compare_chart .series-box, .compare_chart.UwdProblemComp .series-box, .compare_chart.ValueWatcher .series-box, .compare_chart.TabbedSettingsSubwindow .series-box, .compare_chart.ValueWatcherConfig .series-box {
  padding: 0.617rem 0.381rem;
  padding-bottom: 0;
}
.CompConfWidget.compare_chart .series-box .series, .compare_chart.UwdProblemComp .series-box .series, .compare_chart.ValueWatcher .series-box .series, .compare_chart.TabbedSettingsSubwindow .series-box .series, .compare_chart.ValueWatcherConfig .series-box .series {
  background: #222222;
  box-shadow: 0 0 1px #f1f1f1;
  border-left: var(--c-primary) 2px solid;
  border-right: var(--c-primary) 2px solid;
  border-radius: 2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
  display: flex;
  margin-bottom: 7px;
}
.CompConfWidget.compare_chart .series-box .series > *, .compare_chart.UwdProblemComp .series-box .series > *, .compare_chart.ValueWatcher .series-box .series > *, .compare_chart.TabbedSettingsSubwindow .series-box .series > *, .compare_chart.ValueWatcherConfig .series-box .series > * {
  padding: 0.381rem;
}
.CompConfWidget.compare_chart .series-box .series .info, .compare_chart.UwdProblemComp .series-box .series .info, .compare_chart.ValueWatcher .series-box .series .info, .compare_chart.TabbedSettingsSubwindow .series-box .series .info, .compare_chart.ValueWatcherConfig .series-box .series .info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.CompConfWidget.compare_chart .series-box .series .compName, .compare_chart.UwdProblemComp .series-box .series .compName, .compare_chart.ValueWatcher .series-box .series .compName, .compare_chart.TabbedSettingsSubwindow .series-box .series .compName, .compare_chart.ValueWatcherConfig .series-box .series .compName {
  font-weight: bold;
  display: inline-block;
}
.CompConfWidget.compare_chart .series-box .series .unit, .compare_chart.UwdProblemComp .series-box .series .unit, .compare_chart.ValueWatcher .series-box .series .unit, .compare_chart.TabbedSettingsSubwindow .series-box .series .unit, .compare_chart.ValueWatcherConfig .series-box .series .unit {
  min-width: 2.5em;
  display: inline-block;
  position: relative;
  text-align: center;
  padding: 0 0.5em;
}
.CompConfWidget.compare_chart .series-box .series .unit::before, .compare_chart.UwdProblemComp .series-box .series .unit::before, .compare_chart.ValueWatcher .series-box .series .unit::before, .compare_chart.TabbedSettingsSubwindow .series-box .series .unit::before, .compare_chart.ValueWatcherConfig .series-box .series .unit::before {
  content: "[";
  position: absolute;
  left: 0;
}
.CompConfWidget.compare_chart .series-box .series .unit::after, .compare_chart.UwdProblemComp .series-box .series .unit::after, .compare_chart.ValueWatcher .series-box .series .unit::after, .compare_chart.TabbedSettingsSubwindow .series-box .series .unit::after, .compare_chart.ValueWatcherConfig .series-box .series .unit::after {
  content: "]";
  position: absolute;
  right: 0;
}
.CompConfWidget.compare_chart .series-box .series .pin, .compare_chart.UwdProblemComp .series-box .series .pin, .compare_chart.ValueWatcher .series-box .series .pin, .compare_chart.TabbedSettingsSubwindow .series-box .series .pin, .compare_chart.ValueWatcherConfig .series-box .series .pin {
  opacity: 0.7;
  font-family: monospace;
  padding-top: 0.381rem;
}
.CompConfWidget.compare_chart .series-box .series .btns, .compare_chart.UwdProblemComp .series-box .series .btns, .compare_chart.ValueWatcher .series-box .series .btns, .compare_chart.TabbedSettingsSubwindow .series-box .series .btns, .compare_chart.ValueWatcherConfig .series-box .series .btns {
  padding: 0.617rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.CompConfWidget.compare_chart .series-box .series .btns > *, .compare_chart.UwdProblemComp .series-box .series .btns > *, .compare_chart.ValueWatcher .series-box .series .btns > *, .compare_chart.TabbedSettingsSubwindow .series-box .series .btns > *, .compare_chart.ValueWatcherConfig .series-box .series .btns > * {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.2rem;
}
.CompConfWidget.compare_chart .series-box .series .btns > *:last-child, .compare_chart.UwdProblemComp .series-box .series .btns > *:last-child, .compare_chart.ValueWatcher .series-box .series .btns > *:last-child, .compare_chart.TabbedSettingsSubwindow .series-box .series .btns > *:last-child, .compare_chart.ValueWatcherConfig .series-box .series .btns > *:last-child {
  margin-right: 0;
}
.CompConfWidget.compare_chart .series-box .series .btns > i, .compare_chart.UwdProblemComp .series-box .series .btns > i, .compare_chart.ValueWatcher .series-box .series .btns > i, .compare_chart.TabbedSettingsSubwindow .series-box .series .btns > i, .compare_chart.ValueWatcherConfig .series-box .series .btns > i {
  color: #888;
}
.CompConfWidget.compare_chart .series-box .series .btns > span, .compare_chart.UwdProblemComp .series-box .series .btns > span, .compare_chart.ValueWatcher .series-box .series .btns > span, .compare_chart.TabbedSettingsSubwindow .series-box .series .btns > span, .compare_chart.ValueWatcherConfig .series-box .series .btns > span {
  width: 16px;
}
.CompConfWidget.compare_chart .series-box .series .btns .x-nametag, .compare_chart.UwdProblemComp .series-box .series .btns .x-nametag, .compare_chart.ValueWatcher .series-box .series .btns .x-nametag, .compare_chart.TabbedSettingsSubwindow .series-box .series .btns .x-nametag, .compare_chart.ValueWatcherConfig .series-box .series .btns .x-nametag {
  width: unset;
}
.CompConfWidget.compare_chart .series-box .series .btns :last-child, .compare_chart.UwdProblemComp .series-box .series .btns :last-child, .compare_chart.ValueWatcher .series-box .series .btns :last-child, .compare_chart.TabbedSettingsSubwindow .series-box .series .btns :last-child, .compare_chart.ValueWatcherConfig .series-box .series .btns :last-child {
  margin-left: 0.617rem;
}
.CompConfWidget.compare_chart .series-box .series:last-child, .compare_chart.UwdProblemComp .series-box .series:last-child, .compare_chart.ValueWatcher .series-box .series:last-child, .compare_chart.TabbedSettingsSubwindow .series-box .series:last-child, .compare_chart.ValueWatcherConfig .series-box .series:last-child {
  margin-bottom: 0;
}
.CompConfWidget.compare_chart .ColorPreview, .compare_chart.UwdProblemComp .ColorPreview, .compare_chart.ValueWatcher .ColorPreview, .compare_chart.TabbedSettingsSubwindow .ColorPreview, .compare_chart.ValueWatcherConfig .ColorPreview {
  margin: 10px 0 5px 5px;
}

#comparechart_row_edit_modal .r-expression textarea {
  width: 32em;
  resize: vertical;
  height: unset;
}

/**
 * Default chart view, originally for CompareChart but used also
 * for other components with their own history charts
 */
.CompConfWidget.compare_chart_view .handle, .compare_chart_view.UwdProblemComp .handle, .compare_chart_view.ValueWatcher .handle, .compare_chart_view.TabbedSettingsSubwindow .handle, .compare_chart_view.ValueWatcherConfig .handle {
  font-weight: bold;
}
.CompConfWidget.compare_chart_view .fields, .compare_chart_view.UwdProblemComp .fields, .compare_chart_view.ValueWatcher .fields, .compare_chart_view.TabbedSettingsSubwindow .fields, .compare_chart_view.ValueWatcherConfig .fields {
  display: flex;
}
.CompConfWidget.compare_chart_view .fieldbox, .compare_chart_view.UwdProblemComp .fieldbox, .compare_chart_view.ValueWatcher .fieldbox, .compare_chart_view.TabbedSettingsSubwindow .fieldbox, .compare_chart_view.ValueWatcherConfig .fieldbox {
  padding: 0.381rem;
}
.CompConfWidget.compare_chart_view .fieldbox.gran select, .compare_chart_view.UwdProblemComp .fieldbox.gran select, .compare_chart_view.ValueWatcher .fieldbox.gran select, .compare_chart_view.TabbedSettingsSubwindow .fieldbox.gran select, .compare_chart_view.ValueWatcherConfig .fieldbox.gran select {
  width: 10em;
}
.CompConfWidget.compare_chart_view .fieldbox.ival input, .compare_chart_view.UwdProblemComp .fieldbox.ival input, .compare_chart_view.ValueWatcher .fieldbox.ival input, .compare_chart_view.TabbedSettingsSubwindow .fieldbox.ival input, .compare_chart_view.ValueWatcherConfig .fieldbox.ival input {
  width: 5em;
}
.CompConfWidget.compare_chart_view .fieldbox.ival select, .compare_chart_view.UwdProblemComp .fieldbox.ival select, .compare_chart_view.ValueWatcher .fieldbox.ival select, .compare_chart_view.TabbedSettingsSubwindow .fieldbox.ival select, .compare_chart_view.ValueWatcherConfig .fieldbox.ival select {
  width: 8em;
}

/**
 * Presence simulator config - light rules manager
 */
.CompConfWidget.presence_simulator .handle, .presence_simulator.UwdProblemComp .handle, .presence_simulator.ValueWatcher .handle, .presence_simulator.TabbedSettingsSubwindow .handle, .presence_simulator.ValueWatcherConfig .handle {
  font-weight: bold;
}
.CompConfWidget.presence_simulator .add-box, .presence_simulator.UwdProblemComp .add-box, .presence_simulator.ValueWatcher .add-box, .presence_simulator.TabbedSettingsSubwindow .add-box, .presence_simulator.ValueWatcherConfig .add-box {
  display: flex;
  justify-content: flex-start;
  padding: 0 0.381rem;
  margin-bottom: 0.617rem;
}
.CompConfWidget.presence_simulator .add-box a.btn-add, .presence_simulator.UwdProblemComp .add-box a.btn-add, .presence_simulator.ValueWatcher .add-box a.btn-add, .presence_simulator.TabbedSettingsSubwindow .add-box a.btn-add, .presence_simulator.ValueWatcherConfig .add-box a.btn-add {
  margin-left: auto;
}
.CompConfWidget.presence_simulator .lights-box.empty, .presence_simulator.UwdProblemComp .lights-box.empty, .presence_simulator.ValueWatcher .lights-box.empty, .presence_simulator.TabbedSettingsSubwindow .lights-box.empty, .presence_simulator.ValueWatcherConfig .lights-box.empty {
  height: 2em;
  border: 2px dashed #61676b;
  border-radius: 3px;
  margin: 0 0.381rem;
}
.CompConfWidget.presence_simulator .Light, .presence_simulator.UwdProblemComp .Light, .presence_simulator.ValueWatcher .Light, .presence_simulator.TabbedSettingsSubwindow .Light, .presence_simulator.ValueWatcherConfig .Light {
  padding: 0.381rem;
  background: #454a4d;
  border-left: var(--c-primary) 2px solid;
  border-right: var(--c-primary) 2px solid;
  border-radius: 2px;
  box-shadow: 0 0 4px black;
  margin-bottom: 0.617rem;
  margin-left: 0.381rem;
  margin-right: 0.381rem;
}
.CompConfWidget.presence_simulator .Light:last-child, .presence_simulator.UwdProblemComp .Light:last-child, .presence_simulator.ValueWatcher .Light:last-child, .presence_simulator.TabbedSettingsSubwindow .Light:last-child, .presence_simulator.ValueWatcherConfig .Light:last-child {
  margin-bottom: 0;
}
.CompConfWidget.presence_simulator .Light .row, .presence_simulator.UwdProblemComp .Light .row, .presence_simulator.ValueWatcher .Light .row, .presence_simulator.TabbedSettingsSubwindow .Light .row, .presence_simulator.ValueWatcherConfig .Light .row {
  margin-bottom: 0.617rem;
  display: flex;
}
.CompConfWidget.presence_simulator .Light .row:last-child, .presence_simulator.UwdProblemComp .Light .row:last-child, .presence_simulator.ValueWatcher .Light .row:last-child, .presence_simulator.TabbedSettingsSubwindow .Light .row:last-child, .presence_simulator.ValueWatcherConfig .Light .row:last-child {
  margin-bottom: 0;
}
.CompConfWidget.presence_simulator .Light .row.first .box.btns, .presence_simulator.UwdProblemComp .Light .row.first .box.btns, .presence_simulator.ValueWatcher .Light .row.first .box.btns, .presence_simulator.TabbedSettingsSubwindow .Light .row.first .box.btns, .presence_simulator.ValueWatcherConfig .Light .row.first .box.btns {
  margin-left: auto;
}
.CompConfWidget.presence_simulator .Light .box, .presence_simulator.UwdProblemComp .Light .box, .presence_simulator.ValueWatcher .Light .box, .presence_simulator.TabbedSettingsSubwindow .Light .box, .presence_simulator.ValueWatcherConfig .Light .box {
  margin-right: 0.617rem;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
}
.CompConfWidget.presence_simulator .Light .box:last-child, .presence_simulator.UwdProblemComp .Light .box:last-child, .presence_simulator.ValueWatcher .Light .box:last-child, .presence_simulator.TabbedSettingsSubwindow .Light .box:last-child, .presence_simulator.ValueWatcherConfig .Light .box:last-child {
  margin-right: 0;
}
.CompConfWidget.presence_simulator .Light .box input[type=number], .presence_simulator.UwdProblemComp .Light .box input[type=number], .presence_simulator.ValueWatcher .Light .box input[type=number], .presence_simulator.TabbedSettingsSubwindow .Light .box input[type=number], .presence_simulator.ValueWatcherConfig .Light .box input[type=number] {
  width: 4em;
  text-align: center;
}
.CompConfWidget.presence_simulator .Light .box.range input, .presence_simulator.UwdProblemComp .Light .box.range input, .presence_simulator.ValueWatcher .Light .box.range input, .presence_simulator.TabbedSettingsSubwindow .Light .box.range input, .presence_simulator.ValueWatcherConfig .Light .box.range input, .CompConfWidget.presence_simulator .Light .box.interval input, .presence_simulator.UwdProblemComp .Light .box.interval input, .presence_simulator.ValueWatcher .Light .box.interval input, .presence_simulator.TabbedSettingsSubwindow .Light .box.interval input, .presence_simulator.ValueWatcherConfig .Light .box.interval input {
  margin-left: 2px;
  margin-right: 2px;
}
.CompConfWidget.presence_simulator .Light .box.range label, .presence_simulator.UwdProblemComp .Light .box.range label, .presence_simulator.ValueWatcher .Light .box.range label, .presence_simulator.TabbedSettingsSubwindow .Light .box.range label, .presence_simulator.ValueWatcherConfig .Light .box.range label {
  width: 7em;
  display: inline-block;
  text-align: right;
}
.CompConfWidget.presence_simulator .Light .box label, .presence_simulator.UwdProblemComp .Light .box label, .presence_simulator.ValueWatcher .Light .box label, .presence_simulator.TabbedSettingsSubwindow .Light .box label, .presence_simulator.ValueWatcherConfig .Light .box label {
  display: inline-block;
  padding-right: 4px;
}
.CompConfWidget.presence_simulator .Light .box.name input, .presence_simulator.UwdProblemComp .Light .box.name input, .presence_simulator.ValueWatcher .Light .box.name input, .presence_simulator.TabbedSettingsSubwindow .Light .box.name input, .presence_simulator.ValueWatcherConfig .Light .box.name input {
  width: 12em;
  text-align: left;
}
.CompConfWidget.presence_simulator .Light .box.interval input, .presence_simulator.UwdProblemComp .Light .box.interval input, .presence_simulator.ValueWatcher .Light .box.interval input, .presence_simulator.TabbedSettingsSubwindow .Light .box.interval input, .presence_simulator.ValueWatcherConfig .Light .box.interval input {
  width: 5em;
  text-align: right;
}
.CompConfWidget.presence_simulator .Light .box.command input, .presence_simulator.UwdProblemComp .Light .box.command input, .presence_simulator.ValueWatcher .Light .box.command input, .presence_simulator.TabbedSettingsSubwindow .Light .box.command input, .presence_simulator.ValueWatcherConfig .Light .box.command input {
  width: 11.4em;
}

/**
 * Scaling rules for M500 analog inputs
 */
.CompConfWidget.m500input .fields, .m500input.UwdProblemComp .fields, .m500input.ValueWatcher .fields, .m500input.TabbedSettingsSubwindow .fields, .m500input.ValueWatcherConfig .fields {
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  justify-content: space-between;
}
.CompConfWidget.m500input .fields .VerticalFieldBox, .m500input.UwdProblemComp .fields .VerticalFieldBox, .m500input.ValueWatcher .fields .VerticalFieldBox, .m500input.TabbedSettingsSubwindow .fields .VerticalFieldBox, .m500input.ValueWatcherConfig .fields .VerticalFieldBox {
  display: flex;
  flex-direction: column;
  margin-right: 0.617rem;
}
.CompConfWidget.m500input .fields .VerticalFieldBox:last-child, .m500input.UwdProblemComp .fields .VerticalFieldBox:last-child, .m500input.ValueWatcher .fields .VerticalFieldBox:last-child, .m500input.TabbedSettingsSubwindow .fields .VerticalFieldBox:last-child, .m500input.ValueWatcherConfig .fields .VerticalFieldBox:last-child {
  margin-right: 0;
}
.CompConfWidget.m500input .fields .VerticalFieldBox input, .m500input.UwdProblemComp .fields .VerticalFieldBox input, .m500input.ValueWatcher .fields .VerticalFieldBox input, .m500input.TabbedSettingsSubwindow .fields .VerticalFieldBox input, .m500input.ValueWatcherConfig .fields .VerticalFieldBox input {
  width: 8em;
}
.CompConfWidget.m500input .fields .VerticalFieldBox.errors, .m500input.UwdProblemComp .fields .VerticalFieldBox.errors, .m500input.ValueWatcher .fields .VerticalFieldBox.errors, .m500input.TabbedSettingsSubwindow .fields .VerticalFieldBox.errors, .m500input.ValueWatcherConfig .fields .VerticalFieldBox.errors {
  width: 8em;
}

.Row.expression_field .FieldBox.textarea .suggestpicker label, .Modal .expr-picker label, .DialogNew .expr-picker label {
  width: initial;
  padding-left: 0;
  padding-top: 3px;
}
.Row.expression_field .FieldBox.textarea .suggestpicker input, .Modal .expr-picker input, .DialogNew .expr-picker input, .Row.expression_field .FieldBox.textarea .suggestpicker select, .Modal .expr-picker select, .DialogNew .expr-picker select {
  width: 7em;
}

.Row.expression_field {
  margin: 0.617rem auto;
  align-items: initial;
}
.Row.expression_field > label {
  padding-top: 3px;
  padding-bottom: 0;
}
.Row.expression_field .FieldBox {
  padding: 0.381rem;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}
.Row.expression_field .FieldBox .btnwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}
.Row.expression_field .FieldBox .btnwrap > * {
  margin-bottom: 0.381rem;
}
.Row.expression_field .FieldBox .btnwrap > *:last-child {
  margin-bottom: 0;
}
.Row.expression_field .FieldBox .btnwrap .filler {
  flex-grow: 1;
}
.Row.expression_field .FieldBox .tastack {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-right: 0.617rem;
}
.Row.expression_field .FieldBox .itemlist {
  background: #222222;
  padding: 0.381rem;
  border-radius: 3px;
  display: block;
  min-height: 42px;
  padding-bottom: 0.146rem;
}
@keyframes item-flash {
  0% {
    background: #216788;
  }
  30% {
    background: #42b8ff;
  }
  100% {
    background: #216788;
  }
}
.Row.expression_field .FieldBox .itemlist .item {
  display: inline-block;
  padding: 0.235rem 0.381rem;
  background: var(--c-primary);
  color: #292929;
  border-radius: 2px;
  margin-right: 0.235rem;
  margin-bottom: 0.235rem;
}
.Row.expression_field .FieldBox .itemlist .item:last-child {
  margin-right: 0;
}
.Row.expression_field .FieldBox .itemlist .item.highlight {
  animation: item-flash 0.4s linear;
  animation-iteration-count: 1;
}
.Row.expression_field .FieldBox .itemlist .rmbtn {
  margin-left: 0.2em;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.Row.expression_field .FieldBox .itemlist .rmbtn:active, .Row.expression_field .FieldBox .itemlist .rmbtn.pushed {
  top: 1px;
}
.Row.expression_field .FieldBox .itemlist .rmbtn::before {
  margin: 0;
}
.Row.expression_field .FieldBox .simplepicker + .itemlist {
  margin-top: 0.381rem;
}
.Row.expression_field .FieldBox.preview {
  align-items: center;
}
.Row.expression_field .FieldBox.preview .tastack {
  align-self: stretch;
}
.Row.expression_field .FieldBox.preview .expr-view {
  font-family: monospace;
  flex-grow: 1;
  margin: 0;
  margin-left: 0.381rem;
  padding-right: 5px;
  word-break: break-word;
  white-space: pre-wrap;
  align-self: stretch;
  padding-top: 0.5em;
  padding-bottom: 0.4em;
}
.Row.expression_field .FieldBox.simple {
  align-items: flex-start;
}
.Row.expression_field .FieldBox.simple .simplepicker {
  flex-grow: 1;
}
.Row.expression_field .FieldBox.simple .simplepicker label {
  width: initial;
  padding-left: 0;
  padding-top: 0;
}
.Row.expression_field .FieldBox.simple .simplepicker input, .Row.expression_field .FieldBox.simple .simplepicker select {
  width: 12em;
}
.Row.expression_field .FieldBox.textarea {
  align-items: flex-start;
}
.Row.expression_field .FieldBox.textarea .constants {
  font-size: 80%;
  margin-top: 0.381rem;
}
.Row.expression_field .FieldBox.textarea .constants a {
  min-width: 2em;
  text-align: center;
  display: inline-block;
  margin: 3px 2px;
  padding: 1px 3px;
  border-radius: 3px;
  color: #eee;
  text-decoration: none;
  background: var(--c-tabbar);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.Row.expression_field .FieldBox.textarea .constants a:hover {
  color: #222222;
  background: var(--c-primary);
}
.Row.expression_field .FieldBox.textarea .constants a:active, .Row.expression_field .FieldBox.textarea .constants a.pushed {
  top: 1px;
}
.Row.expression_field .FieldBox.textarea .constants p:last-child {
  margin-top: 5px;
  margin-bottom: 0;
}
.Row.expression_field .FieldBox.textarea textarea {
  align-self: stretch;
  flex-grow: 0;
  width: unset;
  min-height: 4em;
  margin: 0;
}

.expr-preview {
  white-space: pre-line;
  text-align: left;
  border: 1px solid #5a5a5a;
  background: #111;
  border-radius: 3px;
  padding: 3px;
}
.expr-preview .repl {
  display: inline-block;
  position: relative;
}
.expr-preview .repl .orig {
  text-decoration: underline;
}
.expr-preview .repl .subs {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: black;
  background: var(--c-primary);
  border-radius: 5px;
  padding: 0 3px;
  padding-right: 0;
  text-align: left;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  display: none;
}
.expr-preview .repl:hover .subs {
  display: block;
}

.CompConfWidget.prop_history, .prop_history.UwdProblemComp, .prop_history.ValueWatcher, .prop_history.TabbedSettingsSubwindow, .prop_history.ValueWatcherConfig {
  overflow: visible;
}
.CompConfWidget.prop_history .handle, .prop_history.UwdProblemComp .handle, .prop_history.ValueWatcher .handle, .prop_history.TabbedSettingsSubwindow .handle, .prop_history.ValueWatcherConfig .handle {
  font-weight: bold;
}
.CompConfWidget.prop_history .FieldBox, .prop_history.UwdProblemComp .FieldBox, .prop_history.ValueWatcher .FieldBox, .prop_history.TabbedSettingsSubwindow .FieldBox, .prop_history.ValueWatcherConfig .FieldBox {
  flex-grow: 0;
}
.CompConfWidget.prop_history .Row label, .prop_history.UwdProblemComp .Row label, .prop_history.ValueWatcher .Row label, .prop_history.TabbedSettingsSubwindow .Row label, .prop_history.ValueWatcherConfig .Row label {
  padding: 0;
}
.CompConfWidget.prop_history .value-preview, .prop_history.UwdProblemComp .value-preview, .prop_history.ValueWatcher .value-preview, .prop_history.TabbedSettingsSubwindow .value-preview, .prop_history.ValueWatcherConfig .value-preview {
  font-size: 90%;
  opacity: 0.7;
  font-weight: normal;
}
.CompConfWidget.prop_history .value-preview i::before, .prop_history.UwdProblemComp .value-preview i::before, .prop_history.ValueWatcher .value-preview i::before, .prop_history.TabbedSettingsSubwindow .value-preview i::before, .prop_history.ValueWatcherConfig .value-preview i::before {
  margin-right: 0;
}
.CompConfWidget.prop_history .Row, .prop_history.UwdProblemComp .Row, .prop_history.ValueWatcher .Row, .prop_history.TabbedSettingsSubwindow .Row, .prop_history.ValueWatcherConfig .Row {
  display: grid;
  grid-template-columns: 16rem 16rem auto;
  gap: 0.381rem;
}
.CompConfWidget.prop_history .Row .explain, .prop_history.UwdProblemComp .Row .explain, .prop_history.ValueWatcher .Row .explain, .prop_history.TabbedSettingsSubwindow .Row .explain, .prop_history.ValueWatcherConfig .Row .explain {
  padding-left: 0;
  grid-column: 2;
}

.PropHistoryConf__header {
  position: sticky;
  top: -0.617rem;
  z-index: 100;
  background: #323232;
  margin: 0;
  padding: 0.381rem 0;
}
.PropHistoryConf__column {
  display: flex;
  align-items: center;
  gap: 0.381rem;
}

.MapCCW__map {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.MapCCW__map--error {
  padding: 0.617rem;
}
.MapCCW__cross {
  position: relative;
  width: 32px;
  height: 32px;
  z-index: 10;
  margin: auto;
}
.MapCCW__cross::before, .MapCCW__cross::after {
  position: absolute;
  left: 15px;
  content: " ";
  height: 33px;
  width: 2px;
  background-color: #f4a733;
  box-shadow: 0 0 2px black;
}
.MapCCW__cross::before {
  transform: rotate(45deg);
}
.MapCCW__cross::after {
  transform: rotate(-45deg);
}
.MapCCW__map-wrap {
  width: 98%;
  height: 175px;
  position: relative;
}
.MapCCW--expanded .MapCCW__map-wrap {
  height: 500px;
}
.MapCCW__map-expand {
  margin-top: 0.381rem;
  padding: 0.235rem;
}
.MapCCW__map-expand::before {
  content: "\e835";
}
.MapCCW--expanded .MapCCW__map-expand::before {
  content: "\e834";
}
.MapCCW__cross-wrap {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#markers-editor-ccw #map {
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 98%;
  height: 600px;
}

.CompConfWidget.ace #ace-editor, .ace.UwdProblemComp #ace-editor, .ace.ValueWatcher #ace-editor, .ace.TabbedSettingsSubwindow #ace-editor, .ace.ValueWatcherConfig #ace-editor {
  font-size: 12px;
  font-family: "IBM Plex Mono", "Source Code Pro", "Monaco", monospace;
}

.ListPickerRow {
  margin-bottom: 0.617rem !important;
  margin-top: 0.617rem !important;
}

.ListPickerMain {
  position: relative;
}
.ListPickerMain table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.ListPickerMain td {
  padding-bottom: 0.235rem;
}
.ListPickerMain thead input {
  width: 100% !important;
}
.ListPickerMain .listcol {
  width: 50%;
  vertical-align: top;
  position: relative;
}
.ListPickerMain .iconcol {
  width: 26px;
  text-align: center;
  vertical-align: middle;
}
.ListPickerMain .ItemListWrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden;
}
.ListPickerMain .ItemList {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  max-height: 20em;
  min-height: 6em;
  overflow-y: auto;
}
.ListPickerMain .ItemList > span {
  text-overflow: ellipsis;
  overflow: hidden;
  height: 1.8em;
  flex-shrink: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding-left: 0.381rem;
  padding-right: 0.381rem;
  cursor: pointer;
  white-space: nowrap;
}
.ListPickerMain .ItemList > span .info {
  padding-left: 5px;
  font-size: 80%;
  opacity: 0.6;
}
.ListPickerMain .ItemList > span.hidden {
  display: none;
}
.ListPickerMain .ItemList > span.category-item {
  padding-left: 2.619rem;
}
.ListPickerMain .ItemList > span.category {
  font-weight: bold;
  cursor: unset;
}
.ListPickerMain .ItemList > span.category:hover {
  background-color: unset;
}
.ListPickerMain .ItemList > span:hover {
  background: #252525;
  color: var(--c-primary);
}

.ListPickerRow .textarea-icons {
  align-self: flex-start;
}

.comap_prop_mapping_table .mapping-cell {
  cursor: pointer;
}
.comap_prop_mapping_table .mapping-cell:hover {
  color: var(--c-primary);
}

.CompConfWidget.comap_prop_mapping, .comap_prop_mapping.UwdProblemComp, .comap_prop_mapping.ValueWatcher, .comap_prop_mapping.TabbedSettingsSubwindow, .comap_prop_mapping.ValueWatcherConfig {
  padding-top: 0.617rem;
  padding-bottom: 0.617rem;
}

#service-schedules .handle {
  display: flex;
  align-items: center;
}
#service-schedules .handle .title {
  font-weight: bold;
  display: block;
  flex-grow: 1;
}
#service-schedules .fields {
  padding: 0.381rem;
}
#service-schedules .dates {
  display: flex;
  align-items: center;
  padding-top: 0.235rem;
  font-size: 90%;
}
#service-schedules .dates span {
  opacity: 0.7;
  margin-left: 0.235rem;
}
#service-schedules .dates span:first-child {
  margin-left: 0;
}
#service-schedules .dates span::before {
  padding-right: 0.235rem;
}
#service-schedules .dates span.warn {
  opacity: 1;
  color: #f4aa34;
}
#service-schedules .dates span.crit {
  opacity: 1;
  color: #e84040;
}
#service-schedules .ServiceSchedule {
  display: flex;
  align-items: center;
  padding: 0.381rem;
  border-bottom: 1px solid rgba(241, 241, 241, 0.2);
}
#service-schedules .ServiceSchedule:last-child {
  border-bottom: 0 none;
}
#service-schedules .ServiceSchedule .left {
  flex-grow: 1;
}
#service-schedules .ServiceSchedule .name {
  font-weight: bold;
}
#service-schedules .ServiceSchedule .button {
  margin-left: 0.235rem;
}
#service-schedules .ServiceSchedule .no-leftpad {
  margin-left: 0;
}
#service-schedules .ServiceSchedule .spacer {
  display: block;
  align-self: stretch;
  margin-left: 0.381rem;
  margin-right: 0.381rem;
  border-left: 1px solid rgba(241, 241, 241, 0.2);
}

#sesch-save-disclaimer {
  margin: 0;
  font-size: 90%;
}

#service_schedule_confirm_modal .x-prompt {
  font-size: 90%;
  text-align: left;
}

.BacnetObjectBrowser {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.BacnetObjectBrowser .hy-node {
  background: #2d2d2d;
}
.BacnetObjectBrowser .hy-header {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  align-items: center;
  padding: 0.235rem;
}
.BacnetObjectBrowser .hy-all-none {
  font-size: 80%;
}
.BacnetObjectBrowser .hy-node {
  cursor: pointer;
}
.BacnetObjectBrowser .hy-node:hover {
  background: #252525;
}
.BacnetObjectBrowser .hy-node.group > .hy-header {
  color: var(--c-primary);
}
.BacnetObjectBrowser .hy-node.group > .hy-header .hy-name {
  font-weight: bold;
}
.BacnetObjectBrowser .hy-right {
  flex-grow: 1;
  text-align: right;
  padding-right: 0.617rem;
}
.BacnetObjectBrowser .hy-check {
  vertical-align: middle;
}
.BacnetObjectBrowser .hy-toggler {
  display: inline-block;
  width: 1em;
  text-align: center;
}
.BacnetObjectBrowser .hy-node.collapsed > .hy-header > .hy-toggler::before {
  content: "+";
}
.BacnetObjectBrowser .hy-node.expanded > .hy-header > .hy-toggler::before {
  content: "–";
}
.BacnetObjectBrowser .hy-node.leaf > .hy-header > .hy-toggler::before {
  content: "•";
}
.BacnetObjectBrowser .hy-name, .BacnetObjectBrowser .hy-context {
  display: inline-block;
}
.BacnetObjectBrowser .hy-context {
  padding-left: 0.381rem;
  font-size: 80%;
  opacity: 0.8;
  font-style: italic;
}

.RUI912_formula .comparegroup {
  background: #5a5a5a;
  display: inline-block;
  padding: 5px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 2px;
}
.RUI912_formula select {
  text-align: center;
}
.RUI912_formula input, .RUI912_formula select {
  width: 6em !important;
}
.RUI912_formula select.logicop {
  width: 10em !important;
}
.RUI912_formula .fields {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.CompConfWidget.sankey, .sankey.UwdProblemComp, .sankey.ValueWatcher, .sankey.TabbedSettingsSubwindow, .sankey.ValueWatcherConfig {
  overflow: unset;
}
.CompConfWidget.sankey .handle, .sankey.UwdProblemComp .handle, .sankey.ValueWatcher .handle, .sankey.TabbedSettingsSubwindow .handle, .sankey.ValueWatcherConfig .handle {
  display: flex;
  gap: 0.381rem;
}
.CompConfWidget.sankey .handle .text, .sankey.UwdProblemComp .handle .text, .sankey.ValueWatcher .handle .text, .sankey.TabbedSettingsSubwindow .handle .text, .sankey.ValueWatcherConfig .handle .text {
  font-weight: bold;
  line-height: 1.3;
}

.BacHK h3 {
  margin-top: 0;
  display: inline-block;
}
.BacHK__pgbox {
  margin-top: 0.381rem;
  max-height: 20em;
  overflow-y: auto;
  height: initial;
}
.BacHK__pgbox, .BacHK__pgbox:hover {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.CustomTableForm {
  display: flex;
  flex-direction: column;
  gap: 0.235rem;
}
.CustomTableForm__row {
  display: grid;
  grid-template-columns: 120px 1fr 20px 26px;
  gap: 0.617rem;
  align-items: center;
  justify-items: left;
  min-height: 35px;
}
.CustomTableForm__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.CustomTableForm__input-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.CustomTableForm__label--disabled {
  color: #bbbbbb;
}

.CompConfWidget.microgrid-dash .handle, .microgrid-dash.UwdProblemComp .handle, .microgrid-dash.ValueWatcher .handle, .microgrid-dash.TabbedSettingsSubwindow .handle, .microgrid-dash.ValueWatcherConfig .handle {
  display: flex;
  gap: 0.381rem;
  align-items: center;
}

.CompConfWidget.vfields .Row, .vfields.UwdProblemComp .Row, .vfields.ValueWatcher .Row, .vfields.TabbedSettingsSubwindow .Row, .vfields.ValueWatcherConfig .Row {
  margin-bottom: 0.617rem;
}
.CompConfWidget.vfields .Row:last-child, .vfields.UwdProblemComp .Row:last-child, .vfields.ValueWatcher .Row:last-child, .vfields.TabbedSettingsSubwindow .Row:last-child, .vfields.ValueWatcherConfig .Row:last-child {
  margin-bottom: 0;
}
.CompConfWidget.vfields .IconPicker, .vfields.UwdProblemComp .IconPicker, .vfields.ValueWatcher .IconPicker, .vfields.TabbedSettingsSubwindow .IconPicker, .vfields.ValueWatcherConfig .IconPicker {
  margin-bottom: 0;
  margin-left: 0.381rem;
}

.CompConfWidget > .fields.NotificationTest, .UwdProblemComp > .fields.NotificationTest, .ValueWatcher > .fields.NotificationTest, .TabbedSettingsSubwindow > .fields.NotificationTest, .ValueWatcherConfig > .fields.NotificationTest {
  padding: 0.381rem;
}

.NotificationTest {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.NotificationTest__type {
  display: flex;
  flex-direction: column;
  gap: 0.617rem;
}
.NotificationTest__type-header {
  font-weight: bold;
}
.NotificationTest__variants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.381rem;
}
.NotificationTest__groups {
  display: flex;
  flex-direction: column;
  gap: 0.617rem;
}
.NotificationTest__group-header {
  font-size: 0.9em;
}

.NotificationTestResult__multi-row-cell {
  display: flex;
  flex-direction: column;
  gap: 0.381rem;
  padding: 0.235rem 0;
}
.NotificationTestResult__cell-row {
  overflow: hidden;
  text-overflow: ellipsis;
}

.Box.ObjectManager a.link {
  color: var(--c-primary);
}
.Box.ObjectManager .owners {
  opacity: 0.8;
  padding-right: 0.5em;
}
.Box.ObjectManager td .item {
  white-space: nowrap;
  display: block;
  font-size: 90%;
}
.Box.ObjectManager td .item.implied, .Box.ObjectManager td .item.granted {
  opacity: 0.6;
}
.Box.ObjectManager td .item.icon-access-group::before {
  margin-right: 5px;
}
.Box.ObjectManager .note {
  font-size: 90%;
  opacity: 0.6;
  font-style: italic;
  overflow-wrap: anywhere;
}

.ObjectManager__explain {
  max-width: 70%;
}

#user_manager td.name {
  max-width: 200px;
}
#user_manager td.name > i {
  position: relative;
  vertical-align: top;
}
#user_manager td.name.disabled span.name {
  text-decoration: line-through;
}
#user_manager td.name.cur_user span.name {
  font-weight: bold;
}
#user_manager .ext-user-marker {
  font-size: 80%;
  font-style: normal;
  opacity: 0.6;
}

.OauthTokensTable .token--expired .token__name {
  -webkit-text-decoration: line-through #e84040;
          text-decoration: line-through #e84040;
}
.OauthTokensTable .token--expired .token__expiration {
  color: #e84040;
}
.OauthTokensTable .token__expiration {
  white-space: nowrap;
}

.RealmPanelEditor {
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 1rem;
}

.PEComponent {
  position: relative;
  display: inline-block;
  background: #e3e3e3;
  color: #17171a;
  border-radius: 2px;
  margin-right: 0.235rem;
  margin-bottom: 0.235rem;
  width: 7rem;
  font-size: 80%;
  padding: 3px 1px 1px 3px;
  white-space: nowrap;
  border-bottom: 2px solid var(--c-primary);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.wide .PEComponent {
  width: 10rem;
}
.PEComponent > * {
  display: block;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.PEComponent__type {
  font-size: 90%;
  color: #666;
  padding-right: 20px;
}
.PEComponent__customize {
  position: absolute;
  bottom: 3px;
  right: 3px;
  color: #666;
  font-size: 90%;
  cursor: pointer;
}
.PEComponent__customize:hover {
  color: #333;
}

.PanelEditor {
  display: flex;
}
.PanelEditor__allComps {
  width: 16.5rem;
  overflow: auto;
  flex-shrink: 0;
  flex-grow: 0;
  align-content: flex-start;
  justify-content: center;
}
.PanelEditor__allComps .PEComponent__customize {
  opacity: 0.3;
  color: #666 !important;
  cursor: default;
}
.wide .PanelEditor__allComps {
  width: 22.5rem;
}
.PanelEditor__allComps .ui-sortable-placeholder {
  display: none;
}
.PanelEditor__allComps .cmpRealm-search-field,
.PanelEditor__allComps .selected-realm-comps {
  width: 13rem !important;
}
.wide .PanelEditor__allComps .cmpRealm-search-field,
.wide .PanelEditor__allComps .selected-realm-comps {
  width: 16rem !important;
}
.PanelEditor__ComponentList {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  padding-top: 0.381rem;
  padding-bottom: 0.146rem;
  padding-left: 0.381rem;
  border-radius: 3px;
  background: #2e3031;
}
.PanelEditor__ComponentList--scada {
  padding-top: 0;
}
.PanelEditor__ComponentList--scada-root-panel {
  margin-top: 0.381rem;
  margin-bottom: 0.381rem;
  padding-top: 0.381rem;
}
.PanelEditor__ComponentList .ui-sortable-placeholder {
  background: rgba(255, 0, 0, 0.3);
}
.PanelEditor > .groups-wrap {
  flex-grow: 1;
  padding-left: 0.617rem;
  padding-right: 0.617rem;
}
.PanelEditor > .groups-wrap > .groups {
  flex-grow: 1;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  margin-bottom: 0.381rem;
}
.PanelEditor .rootgroup-components {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 0 0.381rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  border-left: 6px solid var(--c-primary);
  margin-bottom: 0.381rem;
  border-left-color: var(--c-primary);
}
.PanelEditor .rootgroup-components:last-child {
  margin-bottom: 0;
}
.PanelEditor .rootgroup-components > .components {
  background: #2e3031;
  margin-bottom: 0.381rem;
}
.PanelEditor .rootgroup-components > .components:first-child {
  margin-top: 0.381rem;
}
.PanelEditor .rootgroup-components .label {
  font-style: italic;
}
.PanelEditor .rootgroup-components .info {
  display: flex;
  margin: 0 -0.381rem;
  padding: 0.146rem 0.381rem;
  line-height: 1.6rem;
}
.PanelEditor .rootgroup-components .info:hover {
  cursor: pointer;
  background: rgba(241, 241, 241, 0.2);
}
.PanelEditor .rootgroup-components .info .collapse-indicator {
  font-size: 70%;
  margin-right: 0.381rem;
}
.PanelEditor .theme-picker, .PanelEditor .cmpRealm-picker {
  padding-bottom: 0.381rem;
  font-size: 85%;
  opacity: 0.8;
  cursor: pointer;
}
.PanelEditor .theme-picker .label, .PanelEditor .cmpRealm-picker .label {
  font-style: italic;
}
.PanelEditor .theme-picker:hover, .PanelEditor .cmpRealm-picker:hover {
  opacity: 1;
}
.PanelEditor .panel-edit-footer {
  display: flex;
  color: #f1f1f1;
  font-size: 90%;
  align-items: center;
}
.PanelEditor .panel-edit-footer * {
  vertical-align: middle;
}
.PanelEditor .panelEdit-extCkbox {
  margin-left: 0.617rem;
}
.PanelEditor .panelEdit-extCkbox label {
  cursor: pointer;
}
.PanelEditor .cmpRealm-picker {
  width: 100%;
  padding-left: 0.9rem;
}
.PanelEditor.theme-home > .groups-wrap > .rootgroup-components, .PanelEditor.theme-industry > .groups-wrap > .rootgroup-components {
  display: none;
}
.PanelEditor.theme-home > .groups-wrap > .x-append-group, .PanelEditor.theme-industry > .groups-wrap > .x-append-group {
  display: none;
}
.PanelEditor.theme-home > .groups-wrap > .groups > .Group > .action-buttons > .x-delete-group, .PanelEditor.theme-industry > .groups-wrap > .groups > .Group > .action-buttons > .x-delete-group {
  display: none;
}
.PanelEditor .collapse-icons-wrap {
  display: flex;
  gap: 0.617rem;
  margin-bottom: 0.235rem;
}
.PanelEditor .collapse-icons-wrap .collapse-icon {
  font-size: 80%;
  cursor: pointer;
}
.PanelEditor .collapse-icons-wrap .collapse-icon:hover {
  color: var(--c-primary);
}

.PEPanel {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  margin-bottom: 0.381rem;
}
.PEPanel:last-child {
  margin-bottom: 0;
}
.PEPanel--collapsed .PEPanel__components,
.PEPanel--collapsed .PEPanel__subgroups {
  display: none;
}
.PEPanel--collapsed .collapse-indicator {
  transform: rotate(-90deg);
}
.PEPanel__components {
  background: #2e3031;
}
.PEPanel__content {
  flex-grow: 1;
  padding-left: 0.381rem;
  padding-right: 0.381rem;
  max-width: calc(100% - 6px);
}
.PEPanel.ui-sortable-helper {
  background: #646668;
}
.PEPanel__handle {
  align-self: stretch;
  width: 6px;
  background: var(--c-primary);
  cursor: move;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  flex-shrink: 0;
}
.PEPanel__subgroups {
  padding: 0.235rem;
  border: 1px dashed #444;
  border-radius: 3px;
  margin: 0.381rem 0;
}
.PEPanel__action-buttons .button {
  font-size: 80%;
}
.PEPanel__action-buttons .dropdown-wrap {
  display: inline-block;
}
.PEPanel__action-buttons .dropdown {
  padding: 0.617rem;
}
.PEPanel__name {
  display: flex;
  margin-right: auto;
  flex: 1;
  overflow: hidden;
}
.PEPanel__name-contents {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.PEPanel__info {
  display: flex;
  position: relative;
  color: #f1f1f1;
  line-height: 1.6rem;
  margin: 0 -0.381rem;
  padding: 0.146rem 0.381rem;
}
.PEPanel__info:hover:not(:has(.PEPanel__action-buttons:hover)) {
  cursor: pointer;
  background: rgba(241, 241, 241, 0.2);
}
.PEPanel__info .collapse-indicator {
  font-size: 70%;
  margin-right: 0.381rem;
}
.PEPanel__info .link-indicator {
  font-size: 80%;
  margin-left: 0.381rem;
}
.PEPanel__info i {
  cursor: pointer;
  opacity: 0.5;
}
.PEPanel__info i:hover {
  opacity: 1;
  color: #f1f1f1;
}
.PEPanel__info > * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.PEPanelDropdown__row {
  display: flex;
  font-size: 90%;
  gap: 0.235rem;
}
.PEPanelDropdown__label {
  white-space: nowrap;
}
.PEPanelDropdown__value {
  cursor: pointer;
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.PEPanelDropdown__value:hover {
  color: var(--c-primary);
}

.HistoryPref__table {
  overflow-x: auto;
}
.HistoryPref__table .Table {
  width: auto;
}

#dash-edit .BoxButtons {
  padding-left: 10px;
}
#dash-edit .FlexRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
#dash-edit .FlexRow .right {
  margin-left: auto;
}
#dash-edit .FlexRow h3 {
  margin: 0;
  margin-right: 0.617rem;
}
#dash-edit > div > h3 {
  padding-left: 0.617rem;
}
#dash-edit .floor-pager {
  width: 12em;
}
#dash-edit #scada-sidebar-box section {
  margin: 0;
}
#dash-edit #sidebar_apply_to_all {
  margin-top: 0.381rem;
}
#dash-edit .all_comps .ui-sortable-handle {
  display: none;
}

.hex7config {
  padding-left: 10px;
}
.hex7config #button-details {
  margin-top: 0.5rem;
}
.hex7config .cells {
  min-width: 250px;
}
.hex7config .cells .row {
  height: 0;
  margin-top: 60.625px;
  margin-bottom: 60.625px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hex7config .cells .row:last-child {
  margin-bottom: 42.4375px;
}
.hex7config .cells .row:first-child {
  margin-top: 42.4375px;
}
.hex7config .cells a {
  border-radius: 50%;
  width: 75px;
  height: 75px;
  margin-left: -2.8625px;
  margin-right: -2.8625px;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.hex7config .cells a:active, .hex7config .cells a.pushed {
  top: 1px;
}
.hex7config .cells a::before, .hex7config .cells a span {
  background-size: 75%;
}
.hex7config .cells a.fonticon::before {
  font-size: 30px;
  margin-top: -3px !important;
  margin-left: -2px !important;
}

.ScadaEditor #scada_page_preview {
  height: 600px;
  border: 1px dashed #5a5a5a;
}
.ScadaEditor #scada_page_widget_table svg.inline-icon {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

#scada_mapping_editor.split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
#scada_mapping_editor.split, #scada_mapping_editor.split #scada_page_preview {
  height: 750px;
}
#scada_mapping_editor.split > * {
  flex-basis: 50%;
}
#scada_mapping_editor.split #scada_page_preview {
  margin-right: 0.381rem;
}
#scada_mapping_editor.split #scada_mapping_table {
  overflow-y: scroll;
}
#scada_mapping_editor.split #scada_mapping_table table {
  margin-top: 0;
}
#scada_mapping_editor.split #scada_mapping_table > h3 {
  display: none;
}

#scada_mapping_modal .Dialog {
  min-width: 620px;
  width: unset;
}
#scada_mapping_modal td > input[type=text],
#scada_mapping_modal td > textarea {
  width: 20rem;
}
#scada_mapping_modal td > textarea {
  min-width: 20rem;
  min-height: 4em;
  resize: both;
}
#scada_mapping_modal #field-scada-click-action, #scada_mapping_modal #field-scada-click-action-off {
  vertical-align: middle;
}
#scada_mapping_modal .Row.expression_field {
  display: flex;
  max-width: 600px;
}

#scada-sidebar-box {
  padding-left: 10px;
  padding-bottom: 10px;
  border: 1px dashed #5a5a5a;
}
#scada-sidebar-box h4 {
  margin-top: 10px;
}

#scada_mapping_table .selected {
  border: 2px solid grey;
}
#scada_mapping_table .selectedShift {
  border: 2px dashed grey;
}
#scada_mapping_table .unselectable {
  opacity: 0.25;
}

.nav-preview-conf .editarea select {
  min-width: 14em;
}
.nav-preview-conf .editarea .fields a {
  margin-top: 0.617rem;
  display: inline-block;
}

.EventRecord pre, #logview pre {
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.6);
  padding: 0.617rem;
  overflow: auto;
  margin: 0;
}

#logview p {
  margin-top: 0;
  margin-bottom: 0.617rem;
}
#logview pre {
  margin-bottom: 0;
}

#eventlog {
  /* Load more... */
}
#eventlog .filter {
  min-width: 8em;
}
#eventlog .BoxButtons {
  flex-wrap: nowrap;
}
#eventlog #buts {
  white-space: nowrap;
}
#eventlog .BoxButtons > .left {
  display: flex;
}
#eventlog .filterbox {
  margin-right: 0.617rem;
  display: flex;
  align-items: center;
}
#eventlog .filterbox:last-child {
  margin-right: 0;
}
#eventlog .filterbox > * {
  margin-right: 0.381rem;
}
#eventlog .filterbox > *:last-child {
  margin-right: 0;
}
#eventlog .filterbox label {
  font-weight: bold;
}
#eventlog .filterbox select {
  max-width: 11em;
}
#eventlog #buts > * {
  margin-left: 0.381rem;
}
#eventlog .logviewer-btn {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 0.381rem;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  background-color: #323232;
  background-image: none;
  color: #f1f1f1;
}
#eventlog .logviewer-btn:active, #eventlog .logviewer-btn.pushed {
  top: 1px;
}
#eventlog .logviewer-btn.off {
  color: rgba(241, 241, 241, 0.5);
}
#eventlog .logviewer-btn:hover, #eventlog .logviewer-btn.active {
  background: var(--c-primary);
  color: #222222;
}
#eventlog .morebox {
  padding-top: 0.617rem;
  position: relative;
}
#eventlog .morebox a {
  border-radius: 5px;
  width: 100%;
  display: block;
  padding: 1rem;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  font-weight: bold;
}
#eventlog .morebox a.disabled {
  opacity: 0.6;
}
#eventlog .morebox a, #eventlog .morebox a:hover {
  text-decoration: none;
}
#eventlog .morebox a.disabled:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}
#eventlog .morebox a:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
#eventlog a.icon-detail {
  text-decoration: none;
}
#eventlog #filterslider {
  overflow: hidden;
  margin-left: 0.381rem;
  width: 160px;
  height: 30px;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
  background: #222222;
  display: flex;
  align-items: stretch;
  line-height: 30px;
}
#eventlog #filterslider::before {
  position: absolute;
  content: "";
  display: block;
  width: 33.3333333333%;
  left: 33.3333333333%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
}
#eventlog #filterslider .slide {
  cursor: pointer;
  width: 66.6666666667%;
  position: absolute;
  left: 16.6666666667%;
  top: 0;
  height: 100%;
}
#eventlog #filterslider .slide::before, #eventlog #filterslider .slide::after {
  content: "";
  display: block;
  height: 100%;
  width: 25%;
  position: absolute;
}
#eventlog #filterslider .slide::before {
  left: -25%;
}
#eventlog #filterslider .slide::after {
  right: -25%;
}
#eventlog #filterslider .ui-slider-handle {
  cursor: pointer;
  margin-left: -25%;
  position: absolute;
  display: block;
  width: 50%;
  height: 100%;
  background-color: var(--c-primary);
  background-image: linear-gradient(to bottom,var(--c-primary), var(--c-primary));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  outline: 0 none !important;
}
#eventlog #filterslider.position-0 .marker.info {
  color: #292929;
}
#eventlog #filterslider.position-1 .marker.warning {
  color: #292929;
}
#eventlog #filterslider.position-2 .marker.error {
  color: #292929;
}
#eventlog #filterslider .marker {
  flex-grow: 1;
  color: #ccc;
  text-shadow: none;
  text-align: center;
  z-index: 1;
  pointer-events: none;
  transition: color ease-out 0.15s;
}
#eventlog #filterslider .marker.info {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
#eventlog #filterslider .marker.info::before {
  content: "\f086";
}
#eventlog #filterslider .marker.warning::before {
  content: "\e846";
}
#eventlog #filterslider .marker.error {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
#eventlog #filterslider .marker.error::before {
  content: "\e817";
}

.EventRecord {
  position: relative;
  margin: 1rem 0;
  background: rgba(255, 255, 255, 0.1);
  min-height: 4rem;
  padding: 0.617rem;
  border-radius: 5px;
  border-left: 70px solid;
  border-right: 7px solid;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}
.EventRecord.dismissed {
  transition: opacity 0.2s;
  opacity: 0.7;
}
.EventRecord.dismissed:hover {
  opacity: 1;
}
.EventRecord:last-child {
  margin-bottom: 0;
}
:root.light .EventRecord {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.EventRecord.type-warning, .EventRecord.type-attention {
  border-color: #f39c12;
}
.EventRecord.type-weak-warning {
  border-color: #9b641d;
}
.EventRecord.type-error, .EventRecord.type-alert {
  border-color: #da3b2c;
}
.EventRecord.type-info {
  border-color: #28c872;
}
.EventRecord::before {
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  margin: 0;
  position: absolute;
  left: -70px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  text-align: center;
  color: #f3f3f3;
  font-size: 26px;
}
.EventRecord.ctg-security::before {
  content: "\e814";
}
.EventRecord.ctg-api::before {
  content: "\e841";
}
.EventRecord.ctg-auth::before {
  content: "\e814";
}
.EventRecord.ctg-command::before {
  content: "\f135";
}
.EventRecord.ctg-component::before {
  content: "\e829";
}
.EventRecord.ctg-settings::before {
  content: "\e806";
}
.EventRecord.ctg-interaction::before {
  content: "\e840";
}
.EventRecord.ctg-logging::before {
  content: "\e823";
}
.EventRecord.ctg-system::before {
  content: "\e806";
}
.EventRecord.ctg-notifications::before {
  content: "\e8ef";
}
.EventRecord table {
  width: 100%;
}
.EventRecord table.top {
  table-layout: fixed;
}
.EventRecord table.top td::before {
  margin-right: 0.381rem;
}
.EventRecord td.date {
  width: 100px;
}
.EventRecord td.time {
  width: 80px;
  font-weight: bold;
}
.EventRecord td.ip {
  width: 160px;
}
.EventRecord td.actor {
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 1em;
}
.EventRecord table.requestinfo {
  margin-bottom: 0.381rem;
  table-layout: fixed;
}
.EventRecord table.requestinfo tr {
  margin-bottom: 0.381rem;
}
.EventRecord table.requestinfo tr th {
  width: 6em;
  text-align: left;
  padding: 0 0.235rem;
  vertical-align: top;
}
.EventRecord table.requestinfo td {
  font-size: 90%;
  word-wrap: break-word;
  max-height: 4em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
}
.EventRecord table.requestinfo td.expand {
  max-height: unset;
  overflow: auto;
  white-space: normal;
  text-overflow: unset;
}
.EventRecord .eventname {
  font-size: 1rem;
  font-weight: bold;
  padding: 0 0 0.235rem 0;
}
.EventRecord .eventname a {
  color: #66c4ff;
}
.EventRecord .eventcomp {
  float: right;
  font-size: 0.9rem;
  margin-top: 3px;
  background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  color: white;
  padding: 0.235rem 0.381rem;
  border-radius: 2px;
  min-width: 42%;
  text-align: left;
  font-weight: normal;
  padding-right: 2.2rem;
  white-space: nowrap;
}
.EventRecord .eventcomp a.cmplink {
  color: #66c4ff;
  white-space: nowrap;
  word-wrap: normal;
}
.EventRecord .eventcomp a.conf {
  color: white;
  position: absolute;
  right: 1rem;
  text-decoration: none;
  opacity: 0.8;
}
.EventRecord .eventcomp a.conf:hover {
  opacity: 1;
}
.EventRecord .eventmsg {
  font-size: 0.9rem;
  color: #dadada;
  word-break: break-word;
  white-space: pre-wrap;
}
.EventRecord .trace .show {
  background: rgba(0, 0, 0, 0.2);
  color: #dadada;
  padding: 0 0.1rem;
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
  line-height: 0;
}
.EventRecord .trace .show:hover {
  background: rgba(0, 0, 0, 0.3);
  color: #dadada;
}
.EventRecord span.conceal {
  position: relative;
  color: transparent;
}
.EventRecord span.conceal::before {
  color: #f1f1f1;
  letter-spacing: 1px;
  display: inline;
  content: "●●●●●●";
  border-radius: 3px;
}
.EventRecord span.conceal:hover {
  color: #f1f1f1;
}
.EventRecord span.conceal:hover::before {
  display: none;
}
.EventRecord span.pre {
  font-family: monospace;
}
.EventRecord .delete-button {
  position: absolute;
  right: 0.381rem;
  top: 0.617rem;
  opacity: 0.7;
  color: #ccc;
}
.EventRecord .delete-button:hover {
  opacity: 1;
  color: crimson;
}

.ValueWatcherConfig {
  margin: 0;
}
.ValueWatcherConfig td, .ValueWatcherConfig th {
  padding: 0.235rem;
}
.ValueWatcherConfig td {
  width: 12em;
  vertical-align: top;
  padding-bottom: 0.617rem;
}
.ValueWatcherConfig label {
  display: block;
  text-align: left;
  font-size: 90%;
  padding-bottom: 1px;
  white-space: nowrap;
}
.ValueWatcherConfig input, .ValueWatcherConfig select, .ValueWatcherConfig textarea, .ValueWatcherConfig .ckwrap {
  display: block;
  width: 100% !important;
}
.ValueWatcherConfig input[type=checkbox] {
  width: initial !important;
}
.ValueWatcherConfig .legacy-realm-notifs-hidden {
  display: none !important;
}
.ValueWatcherConfig .inline-checkbox {
  white-space: nowrap;
  text-align: right;
}
.ValueWatcherConfig .inline-checkbox input {
  vertical-align: middle;
  display: inline-block;
}
.ValueWatcherConfig .inline-checkbox label {
  display: inline;
  cursor: pointer;
}
.ValueWatcherConfig th {
  text-align: left;
  vertical-align: top;
  padding-right: 0.381rem;
}
.ValueWatcherConfig .button {
  margin: 0.235rem;
  margin-top: 0;
}
.ValueWatcherConfig table.watchers-edit-table {
  width: 100%;
}
.ValueWatcherConfig table.watchers-edit-table .explain {
  font-style: italic;
  opacity: 0.75;
}
.ValueWatcherConfig table.watchers-edit-table tr.sep {
  border-bottom: 1px solid #5a5a5a;
}
.ValueWatcherConfig table.watchers-edit-table tr.sep td, .ValueWatcherConfig table.watchers-edit-table tr.sep th {
  padding-top: 0.381rem;
  padding-bottom: 0;
}
.ValueWatcherConfig table.watchers-edit-table tr.sep + tr td, .ValueWatcherConfig table.watchers-edit-table tr.sep + tr th {
  padding-top: 1rem;
}
.ValueWatcherConfig .wg-hidden {
  display: none;
}
.ValueWatcherConfig td.disabled {
  opacity: 0.3;
  pointer-events: none;
}
.ValueWatcherConfig td.disabled i {
  color: #999;
}
.ValueWatcherConfig i.warn {
  color: #f4aa34;
}
.ValueWatcherConfig i.crit {
  color: #e84040;
}
.ValueWatcherConfig .stretcher-row {
  padding-top: 0;
  margin-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.ValueWatcherConfig .stretcher-row td, .ValueWatcherConfig .stretcher-row th {
  padding-top: 0;
  margin-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.ValueWatcherConfig #wd-notif-group-list a {
  margin: 0.5em;
}

.UwdProblemComp, .ValueWatcher {
  background: #242424;
  margin-top: 0.381rem;
  margin-bottom: 0.617rem;
  display: flex;
  align-items: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border: 2px solid #17c96b;
}
.UwdProblemComp > div, .ValueWatcher > div {
  padding: 0.381rem 0.617rem;
}

.ValueWatcher.state-warning {
  border: 2px solid #f4aa34;
}
.ValueWatcher.state-critical {
  border: 2px solid #e84040;
}
.ValueWatcher.state-disabled {
  border: 2px solid #3d3d3d;
}
.ValueWatcher.state-disabled .name, .ValueWatcher.state-disabled .expr {
  opacity: 0.6;
}
.ValueWatcher.state-disabled .name {
  text-decoration: line-through;
}
.ValueWatcher .name {
  font-size: 13pt;
  flex-basis: 50%;
}
.ValueWatcher .name .notifs {
  font-size: 8pt;
}
.ValueWatcher .name .notifs span {
  margin-right: 5px;
  background: #464545;
  padding: 1px 3px;
  border-radius: 2px;
}
.ValueWatcher .enabled {
  font-weight: bold;
}
.ValueWatcher .expr {
  flex-basis: 50%;
  font-size: 90%;
  font-family: monospace;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.ValueWatcher .states {
  font-size: 140%;
}
.ValueWatcher .states .state {
  font-variant: small-caps;
  display: inline-block;
  font-weight: bold;
}
.ValueWatcher .states .state.ok {
  color: #17c96b;
}
.ValueWatcher .states .state.warn {
  color: #ecb106;
}
.ValueWatcher .states .state.crit {
  color: #e84040;
}
.ValueWatcher .states .state.note {
  color: rgba(241, 241, 241, 0.7);
}
.ValueWatcher .buttons {
  white-space: nowrap;
  text-align: right;
}
.ValueWatcher .linkstatus {
  padding-right: 0;
  cursor: pointer;
  color: #f1f1f1;
  text-decoration: none;
  padding: 5px;
}

.ValueWatcherList .groupedWatchers {
  margin-bottom: 0.6rem;
}
.ValueWatcherList h4 {
  margin: 0;
  color: var(--c-primary);
  margin-bottom: 0.2rem;
  margin-top: 0.2rem;
}
.ValueWatcherList h5 {
  margin: 0;
}
.ValueWatcherList.overview .ValueWatcher {
  margin-left: 10px;
}
.ValueWatcherList .header a.button {
  margin-top: -5px;
}
.ValueWatcherList .notified-users {
  margin-top: 2px;
  padding: 1px;
  padding-left: 0;
  background: transparent !important;
  display: inline-block;
}
.ValueWatcherList .notified-users i {
  padding-left: 0 !important;
  padding-right: 0.25em;
  margin: 0;
}
.ValueWatcherList select#new_watcher_comp {
  max-width: 15em;
}
.ValueWatcherList.overview .ValueWatcher {
  margin-right: 10px;
}

.UwdProblemComp {
  padding-right: 0.381rem;
  margin-left: 10px;
  margin-right: 10px;
}
.UwdProblemComp .name {
  font-weight: bold;
}
.UwdProblemComp.warn {
  border: 2px solid #f4aa34;
}
.UwdProblemComp.crit {
  border: 2px solid #e84040;
}

#incident-ack-form .Row.buttons {
  padding-right: 0.381rem;
}
#incident-ack-form .Row.buttons label {
  width: unset;
  padding-left: 0;
  margin-right: 0.617rem;
  cursor: pointer;
}
#incident-ack-form input[type=checkbox] {
  vertical-align: middle;
  align-self: center;
}

.ValueWatcherConfig table.th1_td12 th {
  min-width: 120px !important;
  max-width: 220px !important;
  white-space: nowrap;
}
.ValueWatcherConfig table.th1_td12 [colspan="1"] {
  width: 7.1666666667%;
}
.ValueWatcherConfig table.th1_td12 [colspan="2"] {
  width: 14.3333333333%;
}
.ValueWatcherConfig table.th1_td12 [colspan="3"] {
  width: 21.5%;
}
.ValueWatcherConfig table.th1_td12 [colspan="4"] {
  width: 28.6666666667%;
}
.ValueWatcherConfig table.th1_td12 [colspan="5"] {
  width: 28.6666666667%;
}
.ValueWatcherConfig table.th1_td12 [colspan="6"] {
  width: 43%;
}
.ValueWatcherConfig table.th1_td12 [colspan="7"] {
  width: 50.1666666667%;
}
.ValueWatcherConfig table.th1_td12 [colspan="8"] {
  width: 57.3333333333%;
}
.ValueWatcherConfig table.th1_td12 [colspan="9"] {
  width: 64.5%;
}
.ValueWatcherConfig table.th1_td12 [colspan="10"] {
  width: 86%;
}
.ValueWatcherConfig table.th1_td12 [colspan="11"] {
  width: 86%;
}
.ValueWatcherConfig table.th1_td12 [colspan="12"] {
  width: 86%;
}
.ValueWatcherConfig table.th1_td12 [colspan="13"] {
  width: 100%;
}

#watcher-list.minimalView .groupedWatchers {
  margin-bottom: 0;
}
#watcher-list.minimalView .ValueWatchers {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
#watcher-list.minimalView .vwRealmComps {
  display: flex;
  flex-wrap: wrap;
}
#watcher-list.minimalView .vwRealmComps .vwCompHeader {
  margin-left: 0.9rem;
}
#watcher-list.minimalView .ValueWatcher {
  width: -moz-min-content;
  width: min-content;
  cursor: pointer;
  max-width: 20rem;
  min-width: 9rem;
  line-height: 1.15;
  font-size: var(--font_size);
  box-sizing: inherit;
  margin-top: 0.381rem;
  margin-bottom: 0.235rem;
  display: flex;
  align-items: center;
  border-radius: 5px;
  margin-right: 10px;
  padding-right: 2px;
}
#watcher-list.minimalView .ValueWatcher .expr {
  display: none;
}
#watcher-list.minimalView .ValueWatcher .name {
  flex-grow: 1;
  font-size: 0.83em;
  padding: 0.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  width: auto;
  min-width: 7rem;
}
#watcher-list.minimalView .ValueWatcher .name .notifs {
  display: none;
}
#watcher-list.minimalView .ValueWatcher .buttons {
  white-space: nowrap;
  text-align: right;
  display: none;
}
#watcher-list.minimalView .ValueWatcher .states {
  font-size: 120%;
  text-align: right;
  flex-basis: 5rem;
  line-height: 0.8;
}
#watcher-list.minimalView .compWatchersSection {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
#watcher-list.minimalView .UwdProblemComp > div, #watcher-list.minimalView .ValueWatcher > div {
  padding: 0.381rem;
}

#ap_config_table input, #ap_config_table select {
  width: 12rem;
}

.AccessParamOverride .ap {
  padding: 8px;
  display: flex;
}
.AccessParamOverride .ap > * {
  margin-right: 0.381rem;
}
.AccessParamOverride .ap > *:last-child {
  margin-right: 0;
}
.AccessParamOverride .ap .label {
  width: 10rem;
}
.AccessParamOverride .ap.default .value {
  opacity: 0.5;
  position: relative;
}
.AccessParamOverride .ap.default .value::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

#comp_edit.wide .Row > label,
#comp_edit.wide .Row > .Label {
  width: 32rem;
}
#comp_edit.wide .Row.checkbox > label {
  width: unset;
}
#comp_edit.wide .Row.checkbox .checkbox-wrap {
  width: 32rem;
}
#comp_edit #tabcard_dependencies .comp-disabled {
  opacity: 0.4;
  text-decoration: line-through;
}
#comp_edit #tabcard_dependencies td {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#comp_edit #tabcard_dependencies td.references {
  color: white;
}
#comp_edit #tabcard_dependencies td.reads {
  color: #37cc37;
}
#comp_edit #tabcard_dependencies td.writes {
  color: orangered;
}
#comp_edit #tabcard_dependencies td code {
  color: #f1f1f1;
}
#comp_edit #tabcard_dependencies td span {
  color: #999;
}
#comp_edit #tabcard_dependencies table.inbound td:nth-child(2) {
  font-weight: bold;
  text-align: center;
}
#comp_edit #tabcard_dependencies table.outbound td:nth-child(1) {
  font-weight: bold;
  text-align: center;
}
#comp_edit h3.compedit-group {
  background: #292929;
  padding: 2px 6px;
  text-shadow: none;
  color: var(--c-primary);
  font-size: 0.9rem;
  border-bottom: 1px solid #3c3c3c;
}
#comp_edit .CompCommand {
  background: rgba(0, 0, 0, 0.2);
  display: block;
  border-radius: 5px;
  padding-bottom: 0.5rem;
}
#comp_edit .CompCommand > div {
  padding: 0.5rem;
}
#comp_edit .CompCommand .signature .sig-punct {
  color: #44a6dd;
}
#comp_edit .CompCommand .signature .sig-opt-brancket {
  opacity: 0.4;
}
#comp_edit .CompCommand .signature .sig-defval {
  color: #ceb453;
}
#comp_edit .CompCommand .signature .sig-arg {
  font-style: italic;
}
#comp_edit .CompCommand .description {
  padding: 0.5rem;
  margin-left: 80px;
}
#comp_edit .CompCommand .description .descr-text {
  margin-bottom: 0.6rem;
}
#comp_edit .CompCommand .description ul.descr-arglist {
  margin-top: 0;
  margin-bottom: 0;
}
#comp_edit .CompCommand .description .descr-arg-descr {
  font-style: italic;
}
#comp_edit .CompCommand .description .descr-none {
  font-style: italic;
}
#comp_edit .CompCommand .eval {
  padding: 0.381rem;
  margin: 0.381rem;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-wrap: wrap;
}
#comp_edit .CompCommand .eval > div {
  margin-right: 0.381rem;
}
#comp_edit .CompCommand .eval input, #comp_edit .CompCommand .eval select {
  width: 10em;
}
#comp_edit .CompCommand .eval input[type=datetime-local], #comp_edit .CompCommand .eval select[type=datetime-local] {
  width: 14em;
}
#comp_edit .CompCommand .eval label {
  font-weight: normal;
}
#comp_edit .click-to-edit .FieldBox {
  flex-grow: 1;
}
#comp_edit .click-to-edit .FieldBox .click-to-edit-overlay {
  background: rgba(0, 0, 0, 0.3);
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 20%);
  text-align: right;
}
#comp_edit .click-to-edit .checkbox-wrap .click-to-edit-overlay {
  background: rgba(0, 0, 0, 0.4);
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 20%);
  text-align: left;
}
#comp_edit .click-to-edit .FieldBox, #comp_edit .click-to-edit .checkbox-wrap {
  opacity: 0.5;
}
#comp_edit .click-to-edit .FieldBox .click-to-edit-overlay, #comp_edit .click-to-edit .checkbox-wrap .click-to-edit-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  padding: 0.3em;
}
#comp_edit .semantic-tag {
  opacity: 0.4;
}

#comp_edit_json {
  position: absolute;
  margin: 0 auto;
  left: 0.617rem;
  top: 0.617rem;
  right: 0.617rem;
  bottom: 0.617rem;
  display: flex;
  flex-direction: column;
}
#comp_edit_json label {
  cursor: pointer;
}
#comp_edit_json #ace-editor {
  flex-grow: 1;
  overflow: auto;
}

#dg_view {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  background: #222222;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#dg_view .ChartNav {
  box-shadow: none;
  background: #323232;
  padding-bottom: 0;
  padding: 0.235rem;
  padding-right: 0.617rem;
}

#dg_canvas_wrapper {
  flex-grow: 1;
  border-top: 0;
  position: relative;
}
#dg_canvas_wrapper .vis-network {
  position: absolute !important;
}
#dg_canvas_wrapper canvas {
  position: absolute !important;
}

div.vis-tooltip {
  position: absolute;
  visibility: hidden;
  padding: 5px;
  white-space: nowrap;
  font-family: verdana;
  font-size: 14px;
  color: #000000;
  background-color: #f5f4ed;
  border-radius: 3px;
  border: 1px solid #808074;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 5;
}
div.vis-tooltip table th, div.vis-tooltip table td {
  padding: 1px 3px;
}
div.vis-tooltip table th {
  text-align: right;
}

.ContractInterval {
  margin-bottom: 0.381rem;
  border-radius: 3px;
}
.ContractInterval:last-child {
  margin-bottom: 0;
}
.ContractInterval > * {
  padding: 0.381rem;
}
.ContractInterval .session-boxes, .ContractInterval .value-boxes {
  margin-bottom: 0.235rem;
}
.ContractInterval .values-table th, .ContractInterval .values-table td {
  padding: 0.235rem;
}
.ContractInterval .values-table th {
  min-width: 180px;
}
.ContractInterval .values-table th i {
  font-weight: normal;
  opacity: 0.5;
}
.ContractInterval .values-table td.value.money {
  color: brown;
}
.ContractInterval .values-table td.value.money-total {
  background: #a24343;
  color: white;
}
.ContractInterval .values-table td.name {
  font-style: italic;
  border-bottom: 0 none;
  padding-bottom: 0;
}
.ContractInterval .values-table td.value {
  border-top: 0 none;
  text-align: right;
  font-weight: bold;
}
.ContractInterval .title {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: var(--c-tabbar);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.ContractInterval .title .time {
  flex-grow: 1;
  font-weight: bold;
  color: white;
}
.ContractInterval .title a {
  font-size: 90%;
}
.ContractInterval .value-boxes {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
}
.ContractInterval .session-boxes h3:first-child {
  margin-top: 0;
}
.ContractInterval .comp {
  border: 1px solid #666;
  background: #faebd7;
  border-radius: 2px;
  white-space: nowrap;
  margin-right: 0.235rem;
  margin-bottom: 0.235rem;
}
.ContractInterval .comp:last-child {
  margin-right: 0;
}
.ContractInterval .comp .name {
  font-weight: bold;
  padding: 0.381rem;
  padding-bottom: 0;
}
.ContractInterval .comp .realm {
  font-size: 90%;
  opacity: 0.8;
  padding-top: 0;
  padding: 0 0.381rem;
}
.ContractInterval .comp .propval:hover {
  background: #fff5e8;
}
.ContractInterval .comp .propval > * {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}
.ContractInterval .comp .propval .pname {
  padding-left: 0.381rem;
  font-style: italic;
  text-align: right;
}
.ContractInterval .comp .propval .pvalue {
  text-align: right;
  padding-left: 1em;
  padding-right: 0.5em;
}
.ContractInterval .comp .propval .punit {
  text-align: left;
  padding-right: 0.381rem;
}

#contract_overview .ContractLine {
  display: block;
  box-shadow: inset 0 0 3px black;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  margin-bottom: 0.381rem;
  padding: 0.381rem 0.617rem;
}
#contract_overview .ContractLine:last-child {
  margin-bottom: 0;
}
#contract_overview .ContractLine td {
  padding: 0.235rem 0.381rem;
}
#contract_overview .ContractLine table {
  layout: fixed;
}
#contract_overview .c-name {
  font-size: 150%;
  font-weight: bold;
  width: 550px;
}
#contract_overview .c-name .comment {
  font-size: 70%;
  font-style: italic;
  opacity: 0.7;
  font-weight: normal;
}
#contract_overview .left-icon {
  color: var(--c-primary);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
#contract_overview .c-money {
  width: 230px;
  font-size: 170%;
  vertical-align: middle;
  text-align: right;
  white-space: nowrap;
}
#contract_overview .c-detail {
  text-align: center;
  width: 80px;
  font-size: 140%;
}

.TabBar {
  background: var(--c-tabbar);
  padding-left: 0.617rem;
  padding-right: 0.617rem;
  margin-left: -0.617rem;
  margin-right: -0.617rem;
  border-top: none;
  border-bottom: none;
  overflow-x: auto;
}
.tabbar-nosidepad .TabBar {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
.TabBar h1:last-child, .TabBar h2:last-child {
  margin-left: auto;
  margin-right: 0.381rem !important;
}
.TabBar a {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #eee;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 0.4em;
  margin-right: 0 !important;
  text-decoration: none;
  white-space: nowrap;
  align-self: stretch;
}
.TabBar a:hover {
  color: #222222;
  background: var(--c-primary);
}
.TabBar a:active {
  padding-top: 0.45em;
  padding-bottom: 0.35em;
}
.TabBar a.active {
  cursor: default;
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: #222222;
}
.TabBar a.active span {
  top: 0;
}

.TabBar .unsaved-changes-warn-container {
  flex-grow: 1;
  text-align: right;
}
.TabBar .unsaved-changes-warn-container #unsaved-changes-warn {
  color: #eee;
}

#grant-list .item {
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  background: rgba(0, 0, 0, 0.2);
  margin-bottom: 0.617rem;
}
#grant-list .item:last-child {
  margin-bottom: 0;
}
#grant-list .item .title {
  border-bottom: 1px solid;
  padding: 0.381rem;
  padding-bottom: 0.235rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}
#grant-list .item.grant {
  border-color: #28c872;
  border-top-color: rgba(40, 200, 114, 0.6);
  border-bottom-color: rgba(40, 200, 114, 0.6);
}
#grant-list .item.grant .title {
  color: #28c872;
  border-bottom-color: rgba(40, 200, 114, 0.3);
}
#grant-list .item.denial {
  border-color: #da3b2c;
  border-top-color: rgba(218, 59, 44, 0.6);
  border-bottom-color: rgba(218, 59, 44, 0.6);
}
#grant-list .item.denial .title {
  color: #da3b2c;
  border-bottom-color: rgba(218, 59, 44, 0.3);
}
#grant-list .item .body {
  display: flex;
  flex-direction: row;
}
#grant-list .item .body > div {
  flex-basis: 50%;
}
#grant-list .item .body .scopes, #grant-list .item .body .permissions ul {
  margin-top: 0.617rem;
  margin-bottom: 0.617rem;
}

#grant-edit #field-grant-note {
  margin-left: 0.5em;
  width: 400px;
}

.permissions-list {
  width: 100%;
  margin-right: 0.5rem;
  padding-left: 1em;
}
.permissions-list .explicit {
  font-weight: bold;
}
.permissions-list .impl-expl {
  opacity: 0.5;
}
.permissions-list .macro {
  font-style: italic;
}

.perm-scope-icon {
  font-size: 80%;
}

.AuditLog {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.AuditLog .cell-actor,
.AuditLog .cell-ip,
.AuditLog .cell-date,
.AuditLog .cell-action,
.AuditLog .cell-object {
  white-space: nowrap;
}
.AuditLog .cell-object {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.AuditLog td, .AuditLog th {
  vertical-align: top;
  padding: 5px;
}
.AuditLog .top-bar {
  display: flex;
  justify-content: center;
  align-items: center;
}
.AuditLog .top-bar .pagination {
  margin-bottom: 0;
  margin-right: 5px;
}
.AuditLog .top-bar form {
  padding: 0;
}
.AuditLog .top-bar #filter-toggle {
  margin-left: 0.381rem;
}
.AuditLog .changes {
  max-width: 600px;
  max-height: 200px;
  overflow: hidden;
  position: relative;
  overflow-y: auto;
}
.AuditLog .changes::after {
  background: linear-gradient(to right, rgba(50, 50, 50, 0), #323232);
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
}
.AuditLog .changes.expanded {
  max-width: unset;
  max-height: unset;
}
.AuditLog .changes.expanded::after, .AuditLog .changes.expanded::before {
  display: none;
}
.AuditLog .changes td {
  padding: 0.381rem;
  border: 0 none;
}
.AuditLog .changes .add {
  color: #00b500;
}
.AuditLog .changes .del {
  color: #e84040;
}
.AuditLog .changes .note {
  padding: 0.381rem;
  white-space: pre-wrap;
}
.AuditLog .changes .metadata {
  padding: 0.381rem;
}
.AuditLog .cell-changes {
  padding: 0;
}
.AuditLog pre {
  margin: 0;
}
.AuditLog .ctg-create {
  color: #17c96b;
}
.AuditLog .ctg-update {
  color: #ecb106;
}
.AuditLog .ctg-delete {
  color: #e84040;
}
.AuditLog td.v-center {
  vertical-align: middle;
}
.AuditLog .space-after {
  margin-bottom: 1em;
}
.AuditLog .icon-filter {
  margin-left: 8px;
}
.AuditLog .dropdown {
  top: calc(100% + 12px);
  padding: 12px;
  width: 220px;
}

#expr-tester #resultbox {
  padding: 0;
  border-radius: 3px;
  width: 100%;
  margin-bottom: 0;
  margin-top: 0.381rem;
  overflow-x: auto;
}
html.not-touch #expr-tester #resultbox {
  scrollbar-width: auto;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch #expr-tester #resultbox::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: #363636;
}
html.not-touch #expr-tester #resultbox::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 4px;
}

#expr-tester #resultbox .expr-preview {
  border-radius: 3px;
  margin: 0;
  background: #111;
  font-size: 14pt;
}
#expr-tester #resultbox .expr-preview .repl {
  cursor: pointer;
}
#expr-tester #resultbox .expr-preview .repl .subs {
  color: black;
  background: var(--c-primary);
}
#expr-tester #resultbox p {
  font-size: 16pt;
  margin: 10px 0;
  margin-bottom: 0;
}

#localnames-table {
  overflow-x: auto;
}
#localnames-table span.lang-lbl {
  opacity: 0.5;
  font-size: 80%;
  position: absolute;
  right: 0.3em;
  top: 0.8em;
}
#localnames-table span.ed-wrap {
  display: inline-block;
  width: 100%;
  border: none;
  border-right: 1px solid #5a5a5a;
  border-radius: 0;
}
#localnames-table td.key {
  padding-right: 0.381rem;
}
#localnames-table td.key span.ed-wrap {
  margin-left: 0;
}
#localnames-table td {
  position: relative;
}
#localnames-table td.tr span.ed-wrap > span {
  padding-right: 2em;
}
#localnames-table td, #localnames-table th {
  white-space: nowrap;
}
#localnames-table td {
  padding-top: 0.235rem;
  padding-bottom: 0.235rem;
}
#localnames-table td.actions a {
  padding: 0.235rem;
}
#localnames-table span.ed-wrap > span {
  padding: 0.381rem;
  width: 100%;
  display: inline-block;
  min-width: 1em;
  height: 1.2em;
  white-space: nowrap;
}
#localnames-table span.ed-wrap > span:focus {
  outline: 0 none;
}
#localnames-table td.tr span.ed-wrap > span {
  width: calc(100% - 1.5em);
  padding-right: 1.5em;
}

#IotMessageHistory {
  display: flex;
  flex-direction: column;
  gap: 0.617rem;
}
#IotMessageHistory table.data-table {
  width: 100%;
}
#IotMessageHistory table.data-table > tbody > tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.1);
}
#IotMessageHistory th, #IotMessageHistory td {
  vertical-align: top;
}
#IotMessageHistory .val-hex {
  font-family: monospace;
  word-wrap: anywhere;
}
#IotMessageHistory .val-time {
  width: 12em;
  white-space: nowrap;
}
#IotMessageHistory .pre-wrap {
  font-family: monospace;
  white-space: pre-wrap;
  max-width: 800px;
  overflow: auto;
}
#IotMessageHistory .val-obj {
  padding: 0;
  margin: 0;
  width: 25%;
  cursor: zoom-in;
}
#IotMessageHistory .val-obj td {
  max-width: 240px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#IotMessageHistory .val-obj.expand {
  cursor: zoom-out;
}
#IotMessageHistory .val-obj.expand td {
  white-space: normal;
  word-wrap: break-word;
}
#IotMessageHistory .val-obj th, #IotMessageHistory .val-obj td {
  padding: 0.235rem;
}
#IotMessageHistory .val-obj table {
  border-collapse: collapse;
  width: 100%;
}
#IotMessageHistory .val-obj th {
  font-weight: normal;
  opacity: 0.7;
  padding-right: 0.5em;
  text-align: left;
  white-space: nowrap;
  width: 0;
}
#IotMessageHistory .val-obj tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.1);
}

#notification_list .Notification {
  margin: 0.5rem 0;
  position: relative;
  background: #555;
  border-radius: 5px;
  border-left: 7px solid;
  border-right: 7px solid;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  padding: 0.5rem;
  line-height: 1.5;
}
#notification_list .Notification.level-info {
  border-color: #28c872;
}
#notification_list .Notification.level-info .level-marker {
  color: #28c872;
}
#notification_list .Notification.level-warning {
  border-color: #f39c12;
}
#notification_list .Notification.level-warning .level-marker {
  color: #f39c12;
}
#notification_list .Notification.level-critical {
  border-color: #da3b2c;
}
#notification_list .Notification.level-critical .level-marker {
  color: #da3b2c;
}
#notification_list .Notification .body {
  opacity: 0.8;
}
#notification_list .Notification .rightside {
  float: right;
  right: 0.5rem;
  top: 0.5rem;
  text-align: right;
}
#notification_list .Notification .modus {
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.2);
  padding: 3px;
}
#notification_list .Notification::after {
  content: "";
  display: table;
  clear: both;
}

.Incidents #filter-form {
  width: 100%;
}
.Incidents #filter-form table {
  width: 100%;
  margin-bottom: 0.617rem;
}
.Incidents #filter-form table th {
  font-weight: normal;
  text-align: right;
}
.Incidents #filter-form table .radio {
  width: 15em;
  padding: 0.381rem;
}
.Incidents #filter-form table th, .Incidents #filter-form table td {
  border-bottom: 1px solid #5a5a5a;
}
.Incidents #filter-form table th {
  padding: 0.617rem 0.381rem;
  padding-right: 0.617rem;
}
@supports selector(:has(a)) {
  .Incidents #filter-form table label {
    opacity: 0.5;
  }
  .Incidents #filter-form table label:has(input:checked), .Incidents #filter-form table label.no-dim {
    opacity: 1;
  }
  .Incidents #filter-form table:hover label, .Incidents #filter-form table:hover .comp-filter {
    opacity: 1;
  }
  .Incidents #filter-form table .comp-filter {
    opacity: 0.75;
  }
  .Incidents #filter-form table .comp-filter.subtle-active {
    opacity: 1;
  }
}
.Incidents #filter-form table .ack-or-ongoing-float {
  position: absolute;
  right: 0;
  background: #323232;
  padding-left: 1rem;
}
.Incidents #filter-form table .ack-or-ongoing-float label {
  padding-right: 1rem;
}
.Incidents #filter-form table .ack-or-ongoing-float input {
  vertical-align: middle;
}
.Incidents #filter-form table .date-range-chooser {
  visibility: hidden;
}
.Incidents #filter-form table input#date-range:checked + .date-range-chooser {
  visibility: visible;
}
.Incidents #filter-form table tr:last-child td, .Incidents #filter-form table tr:last-child th {
  border-bottom: none;
}
.Incidents #filter-form .form-line {
  padding-bottom: 0.381rem;
  display: flex;
  align-items: center;
}
.Incidents #filter-form .form-line > * {
  margin-right: 0.235rem;
}
.Incidents #filter-form .form-line > *:last-child {
  margin-right: 0;
}
.Incidents #filter-form .form-line:last-child {
  padding-bottom: 0;
  display: flex;
  justify-content: space-between;
}
.Incidents #filter-form input.datepicker {
  width: 7em;
}
.Incidents #filter-form .checkbox-wrap {
  display: inline-block;
  margin-left: 0.3em;
  margin-right: 0.2em;
}
.Incidents #filter-form .checkbox-wrap input {
  vertical-align: middle;
}
.Incidents #filter-form label {
  cursor: pointer;
}
.Incidents .BoxButtons {
  align-items: flex-start;
}
.Incidents .BoxButtons .controls-wrapper {
  display: flex;
  gap: 1rem;
}

.WatcherIncident {
  padding: 0.235rem 0.381rem;
  border-radius: 5px;
  border-left: 12px solid;
  border-right: 2px solid;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  position: relative;
  margin: 0.617rem 0;
  background: rgba(255, 255, 255, 0.1);
}
.WatcherIncident.level-warning {
  border-color: #f4aa34;
}
.WatcherIncident.level-warning .kind {
  color: #f4aa34;
}
.WatcherIncident.level-critical {
  border-color: #e84040;
}
.WatcherIncident.level-critical .kind {
  color: #e84040;
}
.WatcherIncident .ongoing {
  font-size: 85%;
  opacity: 0.7;
}
.WatcherIncident.ended {
  border-color: #6a6a6a;
}
.WatcherIncident.ended .kind {
  color: #bababa;
}
.WatcherIncident .cause {
  font-size: 90%;
  opacity: 0.7;
}
.WatcherIncident .cause-code, .WatcherIncident .metadata {
  font-size: 80%;
  opacity: 0.6;
}
.WatcherIncident .kind {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.WatcherIncident .row {
  display: flex;
  padding: 0.235rem 0;
}
.WatcherIncident .row .right {
  margin-left: auto;
  white-space: nowrap;
}
.WatcherIncident .header {
  font-size: 1.2rem;
}
.WatcherIncident .header .button.icononly {
  padding: 2px;
  line-height: 1.5;
}
.WatcherIncident .kind {
  font-weight: bold;
}
.WatcherIncident .ack_msg {
  font-style: italic;
}
.WatcherIncident .row.ack .icon-check {
  color: #17c96b;
}
.WatcherIncident .row.ack .icon-check.close-ack-icon {
  color: #e84040;
}
.WatcherIncident .detail-ack-msg {
  display: block;
  margin: 0.381rem 0;
  border-radius: 3px;
  padding: 0.235rem;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid transparent;
}
.WatcherIncident .detail-ack-msg.ack {
  border-color: #17c96b;
  background: rgba(0, 0, 0, 0.3);
}
.WatcherIncident .detail-ack-msg .icon-check {
  color: #17c96b;
}
.WatcherIncident .detail-ack-msg.close-ack {
  border-color: #e84040;
  background: rgba(0, 0, 0, 0.3);
}
.WatcherIncident .detail-ack-msg.close-ack .icon-check {
  color: #e84040;
}
.WatcherIncident .detail-ack-msg.ack.close-ack {
  border-left-color: #17c96b;
  border-top-color: #17c96b;
  border-right-color: #e84040;
  border-bottom-color: #e84040;
}
.WatcherIncident .detail-ack-msg.ack.close-ack .icon-check {
  color: #17c96b;
}
.WatcherIncident .detail-ack-msg .ack_meta {
  font-size: 90%;
}

#regedit {
  position: absolute;
  margin: 0 auto;
  left: 0.617rem;
  top: 0.617rem;
  right: 0.617rem;
  bottom: 0.617rem;
}
#regedit .Form {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0.617rem;
  top: 0.617rem;
  right: 0.617rem;
  bottom: 0.617rem;
}

#regedit-kv .BoxButtons .help {
  font-style: italic;
  opacity: 0.7;
}
#regedit-kv > .appcfg-group {
  border-left: 4px solid #666;
  padding-left: 0.617rem;
}
#regedit-kv .appcfg-group .form-help, #regedit-kv .appcfg-group .bs-tooltip {
  font-size: 16px;
}
#regedit-kv .appcfg-entry .key {
  width: 40%;
}
#regedit-kv .appcfg-entry .key small, #regedit-kv .appcfg-entry .key .text-small {
  font-weight: normal;
}
#regedit-kv .appcfg-entry .value {
  word-wrap: anywhere;
  border-right: 0 none;
  cursor: pointer;
  white-space: pre-wrap;
}
#regedit-kv .appcfg-entry .ops {
  width: 5%;
  text-align: right;
  border-left: 0 none;
}

#edit_notif_group #dev_filter_picker h3 {
  margin-top: 0;
}
#edit_notif_group #dev_filter_picker > div {
  display: flex;
  justify-content: center;
}

.ObjectTag {
  background: #5a5a5a;
  opacity: 0.8;
  border-radius: 3px;
  padding: 1px 3px;
  margin-left: 5px;
  white-space: nowrap;
  word-wrap: normal;
  color: #f1f1f1;
}
.ObjectTag:first-child {
  margin-left: 0;
}

a.ObjectTag {
  color: #f1f1f1;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
a.ObjectTag:active, a.ObjectTag.pushed {
  top: 1px;
}
a.ObjectTag:hover {
  color: #f1f1f1;
  background: #6a6a6a;
  text-decoration: none;
}

#system-verify-form .VerifyBox {
  align-items: flex-start;
  margin-bottom: 0;
}
#system-verify-form #system-verify-header {
  display: block;
}
#system-verify-form #system-verify-header > h3 {
  margin: 0 0 0 0.235rem;
}
#system-verify-form #system-verify-header > div {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
#system-verify-form .checkbox-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-grow: 1;
}
html.not-touch #system-verify-form .checkbox-wrap {
  scrollbar-width: thin;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch #system-verify-form .checkbox-wrap::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #363636;
}
html.not-touch #system-verify-form .checkbox-wrap::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 3px;
}

#system-verify-form .checkbox-wrap .checkbox-comp {
  white-space: normal;
  line-height: 1;
  margin: 0.235rem;
  padding: 0.617rem;
  width: 10rem;
  text-align: center;
  font-size: 80%;
  font-weight: normal;
}
#system-verify-form .checkbox-wrap .checkbox-comp i {
  display: block;
  font-size: 3em;
  margin-bottom: 0.5rem;
}
#system-verify-form .verify-ui-controls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#system-verify-form .verify-ui-controls a {
  margin-bottom: 0.381rem;
  margin-right: 0.381rem;
  font-size: 90%;
}
#system-verify-form .verify-ui-controls a:last-child {
  margin-bottom: 0;
}
#system-verify-form .verify-config-icon {
  float: right;
}
#system-verify-form .system-verify-result-contents .inner-progress-bar-span, #system-verify-form .system-verify-result-contents .outer-progress-bar-span {
  width: 100%;
  background-color: #222222;
}
#system-verify-form .system-verify-result-contents .progress-bar-filler {
  height: 100%;
  border-radius: inherit;
  text-align: right;
}
#system-verify-form .system-verify-result-contents .outer-progress-bar-span {
  position: relative;
  overflow: hidden;
  display: block;
  height: 4px;
  z-index: 0;
  background-color: var(--c-primary);
}
#system-verify-form .system-verify-result-contents .inner-progress-bar-span {
  width: 100%;
  position: absolute;
  padding: 5px;
  transition: transform 0.2s linear;
  background-color: #222222;
}
#system-verify-form .system-verify-result-contents h3 {
  margin-top: 0;
}
#system-verify-form .system-verify-result-contents .verify-results-section {
  padding-right: 10px;
}
html.not-touch #system-verify-form .system-verify-result-contents .verify-results-section:first-child {
  scrollbar-width: thin;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch #system-verify-form .system-verify-result-contents .verify-results-section:first-child::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #363636;
}
html.not-touch #system-verify-form .system-verify-result-contents .verify-results-section:first-child::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 3px;
}

#system-verify-form .system-verify-result-contents .verify-results-section h4 {
  margin: 0;
  word-break: break-word;
}
#system-verify-form .system-verify-result-contents .verify-results-section .fix-action {
  margin-top: 0.381rem;
}
#system-verify-form .system-verify-result-contents .verify-results-section .EventRecord .eventname {
  margin: 0;
}
#system-verify-form .system-verify-result-contents .verify-results-section .EventRecord .eventmsg {
  margin: 0.25rem 0 0.45rem;
}
#system-verify-form .system-verify-result-contents .verify-results-section .EventRecord .verify-config-icon {
  color: #f1f1f1;
}

.report-folder a {
  color: white !important;
  font-size: 1.3rem;
}
.report-folder a.active {
  color: var(--c-primary) !important;
  font-style: italic;
}
.report-folder a:hover {
  text-decoration: none;
  color: var(--c-primary) !important;
}

#rt_modules_hierarchy ul {
  list-style-type: none;
  padding: 0.381rem;
  padding-left: 2.619rem;
}
#rt_modules_hierarchy ul.root {
  padding-left: 0.617rem;
}
#rt_modules_hierarchy .comp-disabled {
  opacity: 0.4;
}
#rt_modules_hierarchy .comp-details {
  opacity: 0.8;
  font-size: 75%;
  font-style: italic;
}
#rt_modules_hierarchy .node-rt {
  font-weight: bold;
}
#rt_modules_hierarchy .master_instance::after {
  content: " ♔";
}
#rt_modules_hierarchy li.group {
  padding-bottom: 0.381rem;
}
#rt_modules_hierarchy li.group:last-child {
  padding-bottom: 0;
}
#rt_modules_hierarchy .status-healthy {
  color: #17c96b;
}
#rt_modules_hierarchy .status-failed {
  color: #e84040;
}

#unsaved-changes-warn {
  color: var(--c-primary);
}

#user_activity_leaderboard #activity-heatmap-wrapper {
  flex-grow: 1;
}
#user_activity_leaderboard .LeaderboardRow {
  display: flex;
  flex-direction: row;
}
#user_activity_leaderboard .LeaderboardRow .label {
  flex-grow: 1;
  white-space: nowrap;
}
#user_activity_leaderboard .LeaderboardRow .label .text {
  text-overflow: ellipsis;
  max-width: 250px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
#user_activity_leaderboard .LeaderboardRow:hover {
  background: rgba(0, 0, 0, 0.2);
}
#user_activity_leaderboard .TinyProgress {
  white-space: nowrap;
}
#user_activity_leaderboard .TinyProgress .number {
  opacity: 0.6;
  display: inline-block;
  text-align: right;
  padding-right: 0.235rem;
}
#user_activity_leaderboard .TinyProgress .wrap {
  display: inline-block;
  vertical-align: middle;
  width: 3em;
  height: 1em;
  position: relative;
  background: #323232;
}
#user_activity_leaderboard .TinyProgress .fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--c-primary);
  border-radius: 3px;
}

.TagDetail__references {
  line-height: 2.2em;
}

.tippy-content {
  overflow-wrap: break-word;
}

.tippy-box--DropdownMenu {
  overflow: hidden;
  box-shadow: 0 0 10px black;
}
.tippy-box--DropdownMenu .tippy-content {
  padding: 0;
}

.tippy-box[data-theme~=info] {
  background-color: var(--c-primary);
  color: #222222;
}

.tippy-box[data-theme~=info][data-placement^=top] > .tippy-arrow::before {
  border-top-color: var(--c-primary);
}

.tippy-box[data-theme~=info][data-placement^=bottom] > .tippy-arrow::before {
  border-bottom-color: var(--c-primary);
}

.tippy-box[data-theme~=info][data-placement^=left] > .tippy-arrow::before {
  border-left-color: var(--c-primary);
}

.tippy-box[data-theme~=info][data-placement^=right] > .tippy-arrow::before {
  border-right-color: var(--c-primary);
}

.tippy-box[data-theme~=error] {
  background-color: var(--c-primary);
  color: #222222;
}

.tippy-box[data-theme~=error][data-placement^=top] > .tippy-arrow::before {
  border-top-color: var(--c-primary);
}

.tippy-box[data-theme~=error][data-placement^=bottom] > .tippy-arrow::before {
  border-bottom-color: var(--c-primary);
}

.tippy-box[data-theme~=error][data-placement^=left] > .tippy-arrow::before {
  border-left-color: var(--c-primary);
}

.tippy-box[data-theme~=error][data-placement^=right] > .tippy-arrow::before {
  border-right-color: var(--c-primary);
}

.tippy-box[data-theme~=data-intelligence] {
  background-color: white;
  color: #222222;
}

.tippy-box[data-theme~=data-intelligence][data-placement^=top] > .tippy-arrow::before {
  border-top-color: white;
}

.tippy-box[data-theme~=data-intelligence][data-placement^=bottom] > .tippy-arrow::before {
  border-bottom-color: white;
}

.tippy-box[data-theme~=data-intelligence][data-placement^=left] > .tippy-arrow::before {
  border-left-color: white;
}

.tippy-box[data-theme~=data-intelligence][data-placement^=right] > .tippy-arrow::before {
  border-right-color: white;
}

.tippy-box[data-theme~=default] {
  background-color: #eeeeee;
  color: #111111;
}

.tippy-box[data-theme~=default][data-placement^=top] > .tippy-arrow::before {
  border-top-color: #eeeeee;
}

.tippy-box[data-theme~=default][data-placement^=bottom] > .tippy-arrow::before {
  border-bottom-color: #eeeeee;
}

.tippy-box[data-theme~=default][data-placement^=left] > .tippy-arrow::before {
  border-left-color: #eeeeee;
}

.tippy-box[data-theme~=default][data-placement^=right] > .tippy-arrow::before {
  border-right-color: #eeeeee;
}

.tippy-box[data-theme~=dummy] {
  display: none;
}

/* Ion.Calendar
// Version 2.0.1, build: 91
// © 2013 Denis Ineshin | IonDen.com
//
// Project page:    http://ionden.com/a/plugins/ion.calendar/
// GitHub page:     https://github.com/IonDen/ion.calendar
//
// Released under MIT licence:
// http://ionden.com/a/plugins/licence-en.html
// ===================================================================================================================*/
/* ic = ion.calendar prefix */
.ic__container,
.ic__week-head,
.ic__week-head td,
.ic__days,
.ic__days td,
.ic__header,
.ic__prev,
.ic__next,
.ic__datepicker {
  margin: 0;
  padding: 0;
  /*font-family: Arial, Helvetica, sans-serif;*/
  font-size: 10px;
  line-height: 13px;
  cursor: default;
  text-shadow: none !important;
}

.ic__container {
  position: relative;
  background: #fff;
}

.ic__container table {
  width: 100%;
  border: 0;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.ic__header {
  position: relative;
  background: #3c3c3c;
  height: 40px;
}

.ic__prev, .ic__next {
  position: absolute;
  top: 0;
  width: 7%;
  height: 40px;
  background: #3c3c3c;
  cursor: pointer;
}
.ic__prev:hover, .ic__next:hover {
  background: var(--c-primary);
}
.ic__prev div, .ic__next div {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  border: 5px solid transparent;
  top: 15px;
}

.ic__prev {
  left: 0;
}
.ic__prev div {
  left: 50%;
  margin-left: -7px;
  border-right-color: #fff;
}
.ic__prev div:hover {
  border-right-color: #292929;
}

.ic__next {
  right: 0;
}
.ic__next div {
  right: 50%;
  margin-right: -7px;
  border-left-color: #fff;
}
.ic__next div:hover {
  border-left-color: #292929;
}

.ic__month {
  position: absolute;
  top: 6px;
  left: 9%;
  width: 50%;
}

.ic__year {
  position: absolute;
  top: 6px;
  right: 9%;
  width: 30%;
}

.ic__header select {
  box-sizing: border-box;
  width: 100%;
  border: none;
  font-size: 14px;
  font-weight: bold;
}
.ic__header select:focus {
  outline: none;
}

.ic__week-head td {
  width: 14%;
  vertical-align: top;
  text-align: center;
  padding: 10px 0 8px;
  border: 1px solid #ebebeb;
  color: #b5b5b5;
  font-size: 9px;
  line-height: 1.333;
  text-transform: uppercase;
}

.ic__days {
  margin-top: -1px;
}
.ic__days td {
  width: 14%;
  vertical-align: top;
  text-align: center;
  padding: 10px 0 8px;
  border: 1px solid #ebebeb;
  color: #535353;
  font-size: 11px;
  line-height: 1.333;
  text-transform: uppercase;
}
.ic__days .ic__day {
  background: #fff;
  cursor: pointer;
}
.ic__days .ic__day:hover {
  background: var(--c-primary);
  color: white;
}
.ic__days .ic__day-empty {
  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAMAAAC6sdbXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF7u7u////KNOqmgAAABlJREFUeNpiYGRkZABCCGIA8UAEI4QACDAAAUoAFV5+ydgAAAAASUVORK5CYII=");
}
.ic__days .ic__day_state_current {
  background: #f4f4f4;
  color: #222;
  font-weight: bold;
}
.ic__days .ic__day_state_selected {
  background: var(--c-primary);
  color: #222;
}
.ic__days .ic__out-of-range {
  cursor: not-allowed;
}
.ic__days .ic__out-of-range, .ic__days .ic__out-of-range:hover {
  background: #fff;
  color: #bbb !important;
}

.ic__datepicker {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 250px;
  border-radius: 1px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
  background: #5a5a5a;
  z-index: 190;
}

.wide.DashHeader, .wide.Box.PanelCompsWrap {
  max-width: initial;
}
.narrow.DashHeader, .narrow.Box.PanelCompsWrap {
  max-width: 930px;
}

.Box.PanelCompsWrap {
  background: rgba(50, 50, 50, 0.7);
  margin-top: 0.617rem !important;
}
@media screen and (max-width: 1100px) {
  .Box.PanelCompsWrap {
    margin-top: 0.381rem !important;
  }
}
.Box.PanelCompsWrap .subpanels {
  text-align: left;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
@media screen and (max-width: 544px) {
  .Box.PanelCompsWrap .subpanels {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}
.Box.PanelCompsWrap .subpanels a {
  padding: 0.617rem;
  display: flex;
  height: 36px;
  flex-direction: row;
  align-items: center;
  color: white;
  background: #292929;
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  text-decoration: none;
  margin-bottom: 0.381rem;
  margin-right: 0.381rem;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.Box.PanelCompsWrap .subpanels a:active, .Box.PanelCompsWrap .subpanels a.pushed {
  top: 1px;
}
.Box.PanelCompsWrap .subpanels a:hover, .Box.PanelCompsWrap .subpanels a:active {
  background: var(--c-primary);
  color: #222222;
}
.Box.PanelCompsWrap .subpanels a::before {
  margin-right: 0.381rem;
  vertical-align: middle;
}
.Box.PanelCompsWrap .subpanels a .Icon {
  margin-right: 0.381rem;
}
.Box.PanelCompsWrap .subpanels a .Icon::before {
  font-size: 150%;
  vertical-align: middle;
}
.Box.PanelCompsWrap .subpanels a .Icon.custom, .Box.PanelCompsWrap .subpanels a .Icon.builtin {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  background-size: contain;
  display: inline-block;
}
.Box.PanelCompsWrap .subpanels a .Icon:hover {
  color: #222222;
}
.Box.PanelCompsWrap .subpanels a .Icon.cams {
  background-image: url("/images/dashboard/icon-camera.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.alarm {
  background-image: url("/images/dashboard/icon-alarm.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.appliances {
  background-image: url("/images/dashboard/icon-appliances.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.lighting {
  background-image: url("/images/dashboard/icon-lighting.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.consumption {
  background-image: url("/images/dashboard/icon-measure.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.security {
  background-image: url("/images/dashboard/icon-security.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.sensors {
  background-image: url("/images/dashboard/icon-temperature.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.monitoring {
  background-image: url("/images/dashboard/icon-watchdog.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.monitoring2 {
  background-image: url("/images/dashboard/icon-watchdog2.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.multimedia {
  background-image: url("/images/dashboard/icon-multimedia.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.meteo {
  background-image: url("/images/dashboard/icon-meteo.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.temp {
  background-image: url("/images/dashboard/icon-tempheat.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.technology {
  background-image: url("/images/dashboard/icon-tech.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.fan {
  background-image: url("/images/dashboard/icon-fan.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.drop {
  background-image: url("/images/dashboard/icon-drop.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.mapsearch {
  background-image: url("/images/dashboard/icon-mapsearch.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.robot {
  background-image: url("/images/dashboard/icon-robot.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.unlock {
  background-image: url("/images/dashboard/icon-unlock.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.undo {
  background-image: url("/images/dashboard/icon-undo.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.shortcut {
  background-image: url("/images/dashboard/icon-shortcut.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.smarthome {
  background-image: url("/images/dashboard/icon-smarthome.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.layers {
  background-image: url("/images/dashboard/icon-layers.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.tank {
  background-image: url("/images/dashboard/icon-tank.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.tank2 {
  background-image: url("/images/dashboard/icon-tank2.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.meander {
  background-image: url("/images/dashboard/icon-meander.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.access {
  background-image: url("/images/dashboard/icon-access.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.key {
  background-image: url("/images/dashboard/icon-key.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.security2 {
  background-image: url("/images/dashboard/icon-security2.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.meter {
  background-image: url("/images/dashboard/icon-meter.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.meter2 {
  background-image: url("/images/dashboard/icon-meter2.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.meter3 {
  background-image: url("/images/dashboard/icon-meter3.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.engine {
  background-image: url("/images/dashboard/icon-engine.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.contract {
  background-image: url("/images/dashboard/icon-contract.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.carseat {
  background-image: url("/images/dashboard/icon-carseat.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.floorplan {
  background-image: url("/images/dashboard/icon-floorplan.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.waterdam {
  background-image: url("/images/dashboard/icon-waterdam.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.meteo2 {
  background-image: url("/images/dashboard/icon-meteo2.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.brewery {
  background-image: url("/images/dashboard/icon-brewery.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.fan2 {
  background-image: url("/images/dashboard/icon-fan2.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.pvs {
  background-image: url("/images/dashboard/icon-pvs.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.hydropower {
  background-image: url("/images/dashboard/icon-hydropower.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.heater {
  background-image: url("/images/dashboard/icon-heater.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.bar {
  background-image: url("/images/dashboard/icon-bar.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.cam {
  background-image: url("/images/dashboard/icon-cam.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.cam2 {
  background-image: url("/images/dashboard/icon-cam2.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.plug {
  background-image: url("/images/dashboard/icon-plug.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.compressor {
  background-image: url("/images/dashboard/icon-compressor.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.scale {
  background-image: url("/images/dashboard/icon-scale.svg");
}
.Box.PanelCompsWrap .subpanels a .Icon.sun {
  background-image: url("/images/dashboard/icon-sun.svg");
}
.Box.PanelCompsWrap .subpanels a .label {
  display: block;
  word-wrap: break-word;
  max-width: 160px;
}
.Box.PanelCompsWrap .CompSlot {
  height: 205px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.Box.PanelCompsWrap.left .comps::after {
  clear: both;
  content: "";
  display: block;
}
.Box.PanelCompsWrap.left.narrow .CompSlot {
  width: 24.995%;
  float: left;
}
.Box.PanelCompsWrap.left.narrow .CompSlot.wide {
  width: 49.995%;
  float: left;
}
@media screen and (max-width: 1175px) {
  .Box.PanelCompsWrap.left.narrow .CompSlot {
    width: 33.3283333333%;
    float: left;
  }
  .Box.PanelCompsWrap.left.narrow .CompSlot.wide {
    width: 66.6616666667%;
    float: left;
  }
}
@media screen and (max-width: 950px) {
  .Box.PanelCompsWrap.left.narrow .CompSlot {
    width: 49.995%;
    float: left;
  }
  .Box.PanelCompsWrap.left.narrow .CompSlot.wide {
    width: 99.995%;
    float: left;
  }
}
@media screen and (max-width: 725px) {
  .Box.PanelCompsWrap.left.narrow .CompSlot, .Box.PanelCompsWrap.left.narrow .CompSlot.wide {
    width: 99.995%;
    float: left;
  }
}
.Box.PanelCompsWrap.left .comps, .Box.PanelCompsWrap.center .comps {
  display: flex;
  flex-wrap: wrap;
}
.Box.PanelCompsWrap.left .comps .CompSlot, .Box.PanelCompsWrap.center .comps .CompSlot {
  width: 225px;
}
.Box.PanelCompsWrap.left .comps .CompSlot.wide, .Box.PanelCompsWrap.center .comps .CompSlot.wide {
  width: 450px;
}
.Box.PanelCompsWrap.center .comps {
  justify-content: center;
}
.Box.PanelCompsWrap.left .comps {
  align-content: flex-start;
}
.Box.PanelCompsWrap .comps hr {
  border: 1px solid var(--c-primary);
}

.DashHeaderWrapper {
  position: absolute;
  width: 100%;
  left: 0;
  padding: 0 0.617rem;
}
@media screen and (max-width: 544px) {
  .DashHeaderWrapper {
    padding: 0 0.381rem;
  }
}

.DashHeader {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  text-align: left;
  margin-top: 0.381rem;
}
@media screen and (max-width: 1100px) {
  .DashHeader {
    margin-top: 0;
  }
}
.DashHeader .PanelConfButtons {
  margin-left: auto;
}
.DashHeader .PanelConfButtons a {
  display: inline-block;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
  background: #494949;
  color: #dfdfdf;
  border-radius: 3px;
  line-height: 2em;
  padding: 0 6px;
  text-decoration: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.DashHeader .PanelConfButtons a:active, .DashHeader .PanelConfButtons a.pushed {
  top: 1px;
}
.DashHeader .PanelConfButtons a:hover {
  color: white;
  text-shadow: 0 0 3px black;
  background: var(--c-primary);
}

.panel-split .name {
  text-decoration: underline;
  font-style: italic;
}

.CompOverlay {
  position: absolute;
  display: block;
  top: 10px;
  right: 0px;
  font-size: 16px;
  z-index: 5;
}
.CompOverlay .menu {
  position: absolute;
  text-align: left;
  display: none;
}
.CompOverlay .dots {
  position: absolute;
  cursor: pointer;
  right: 0px;
  top: 0;
  opacity: 0.2;
  transition: opacity 0.2s linear;
}
.CompOverlay .dots i::before {
  content: "\f142";
}
.CompOverlay:hover .dots {
  opacity: 1;
}
.CompOverlay.open {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.CompOverlay.open .menu {
  right: 18px;
  top: 0;
  display: block;
  border: 1px solid var(--c-primary);
  border-radius: 1px;
  background: #2d2d2d;
  box-shadow: none;
}
.CompOverlay.open .menu a {
  display: block;
  text-decoration: none;
  color: #f1f1f1;
  font-size: 12pt;
  padding: 2px 4px;
  padding-left: 0.617rem;
}
.CompOverlay.open .menu a:hover {
  background: #252525;
  color: var(--c-primary);
}
.CompOverlay.open .menu a::before {
  margin-left: 0;
  width: 1.2em;
  margin-right: 0.2360828548rem;
}
.CompOverlay.open .dots {
  opacity: 1;
}

.PanelItem {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  height: 191px;
  flex-grow: 1;
  margin: 0 0.381rem;
  position: relative;
  white-space: nowrap;
  word-wrap: normal;
  display: block;
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  background: #292929;
  color: #cfcece;
  cursor: default;
  text-align: center;
  font-size: 16pt;
  overflow: hidden;
  /* Title bar, common to all regular widgets */
  /* Chart, if shown, will have unified look set here */
  /* wrapper for .v and .u - value and unit */
}
.PanelItem.frame-red {
  border-color: #ff0000;
}
.PanelItem.frame-green {
  border-color: #00ff7f;
}
.PanelItem.frame-yellow {
  border-color: #ffff66;
}
.PanelItem.frame-cyan {
  border-color: #81d8d0;
}
.PanelItem.frame-purple {
  border-color: #8a2be2;
}
.PanelItem.frame-white {
  border-color: #ffffff;
}
.PanelItem.clickable, .PanelItem.btn-history, .PanelItem.btn-statelog, .PanelItem .clickable, .PanelItem .btn-history, .PanelItem .btn-statelog {
  cursor: pointer;
}
.PanelItem .TypeIcon.corner {
  position: absolute;
}
.PanelItem .TypeIcon.corner.rb {
  right: 0;
  bottom: 0;
}
.PanelItem .TypeIcon.corner.lb {
  left: 0;
  bottom: 0;
}
.PanelItem .Title {
  position: absolute;
  left: 0;
  top: 0;
  width: 101%;
  display: block;
  height: 38.2px;
  line-height: 38.2px;
  padding-left: 0.381rem;
  font-size: 11pt;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  background: #292929;
  color: white;
  text-overflow: ellipsis;
  overflow: hidden;
}
.PanelItem .Title.with-quickmenu {
  padding-right: 15px;
}
.PanelItem .Title.with-helptext {
  padding-right: 20px;
}
.PanelItem .Title.with-quickmenu.with-helptext {
  padding-right: 40px;
}
.PanelItem .Title .helptext {
  position: absolute;
  right: 5px;
  top: 0;
  cursor: pointer;
  opacity: 0.2;
  transition: opacity 0.2s linear;
}
.PanelItem .Title .helptext:hover {
  opacity: 1;
}
.PanelItem .Title.with-quickmenu .helptext {
  right: 20px;
}
.PanelItem .Chart {
  position: absolute;
  overflow: hidden;
  padding: 0.1905rem;
  cursor: pointer;
}
.PanelItem .Chart .chart {
  width: 100%;
  height: 100%;
}
.PanelItem .Chart.placeholder {
  color: #cfcece;
  background-image: none !important;
  position: relative;
  position: absolute;
}
.PanelItem .Chart.placeholder svg {
  fill: currentColor;
  position: absolute;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.PanelItem sup {
  position: relative;
  top: -4px;
}
.PanelItem.wd-uwd-warn {
  opacity: 0.7;
  color: #858585 !important;
}
.PanelItem.wd-vwd-warn .Title {
  color: #f39c12 !important;
}
.PanelItem .warning {
  color: #f39c12;
  font-weight: normal !important;
}
.PanelItem .error {
  color: #FE5555;
  font-weight: normal !important;
}
.PanelItem.disabled {
  opacity: 0.6;
}
.PanelItem.disabled .Title {
  text-decoration: line-through;
}
.PanelItem .vu {
  white-space: nowrap;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.PanelItem .vu .v, .PanelItem .vu .u {
  display: inline-block;
}
.PanelItem .vu .v {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.PanelItem .vu .u {
  font-size: 80%;
  margin-left: 0.3em;
}
.PanelItem .vu.vertical .v, .PanelItem .vu.vertical .u {
  display: block;
  margin: 0;
  text-align: center;
}
.PanelItem .vu.vertical .u {
  font-size: 65%;
}
.PanelItem .vu .corr {
  font-size: 80%;
  margin-left: 5px;
}
.PanelItem .f-small {
  font-size: 12pt !important;
}
.PanelItem .f-smaller {
  font-size: 13pt !important;
}
.PanelItem .f-normal {
  font-size: 16pt !important;
}
.PanelItem .f-bigger {
  font-size: 20pt !important;
}
.PanelItem .f-big {
  font-size: 24pt !important;
}
.PanelItem .ManualEntryBtn {
  position: absolute;
  right: 0.617rem;
  bottom: 0.617rem;
}
.PanelItem .OngoingIncidents {
  text-decoration: none;
}

.PanelItem.l-simple .Frame,
.PanelItem.l-split-wide.narrow .Frame {
  position: absolute;
  left: 0;
  top: 38.2px;
  right: 0;
  bottom: 0;
}
.PanelItem.l-simple .Chart,
.PanelItem.l-split-wide.narrow .Chart {
  display: none;
}

.PanelItem.l-split .Frame, .PanelItem.l-split-wide .Frame {
  position: absolute;
}
.PanelItem.l-split.wide .Frame, .PanelItem.l-split-wide.wide .Frame {
  left: 0;
  top: 38.2px;
  right: 60%;
  bottom: 0;
  border-right: 1px solid #5C5C5C;
}
.PanelItem.l-split.wide .Chart, .PanelItem.l-split-wide.wide .Chart {
  left: 40%;
  top: 38.2px;
  right: 0;
  bottom: 0;
}

.PanelItem.l-split.narrow .Frame {
  left: 0;
  top: 38.2px;
  right: 0;
  bottom: 74.4px;
}
.PanelItem.l-split.narrow .Chart {
  left: 0;
  top: 112.6px;
  right: 0;
  bottom: 0;
  /* disable shadow to reduce visual clutter */
  box-shadow: none;
  padding-top: 0;
}
.PanelItem.l-split.narrow .TypeIcon.corner {
  display: none;
}

/* Layout with just one full size chart, or a placeholder icon */
.PanelItem.l-chart .Chart {
  position: absolute;
  left: 0;
  top: 38.2px;
  right: 0;
  bottom: 0;
}
.PanelItem.l-chart.placeholder .Chart {
  display: flex;
  justify-content: center;
  align-items: center;
}

.PanelItem.cmp-indicator-icon .Icon, .PanelItem.cmp-relay .Icon {
  color: #757575;
}
.PanelItem.cmp-indicator-icon .active.Icon, .PanelItem.cmp-relay .active.Icon {
  text-shadow: 0 0 10px var(--c-primary);
  color: var(--c-primary);
}
.PanelItem.cmp-indicator-icon .window.Icon, .PanelItem.cmp-relay .window.Icon {
  background-image: url("/images/item/motion_window.png");
}
.PanelItem.cmp-indicator-icon .window.active.Icon, .PanelItem.cmp-relay .window.active.Icon {
  background-image: url("/images/item/motion_window_active.png");
}
.PanelItem.cmp-indicator-icon .door.Icon, .PanelItem.cmp-relay .door.Icon {
  background-image: url("/images/item/motion_door.png");
}
.PanelItem.cmp-indicator-icon .door.active.Icon, .PanelItem.cmp-relay .door.active.Icon {
  background-image: url("/images/item/motion_door_active.png");
}
.PanelItem.cmp-indicator-icon .fire.Icon, .PanelItem.cmp-relay .fire.Icon {
  background-image: url("/images/item/motion_fire.png");
}
.PanelItem.cmp-indicator-icon .fire.active.Icon, .PanelItem.cmp-relay .fire.active.Icon {
  background-image: url("/images/item/motion_fire_active.png");
}
.PanelItem.cmp-indicator-icon .alarm.Icon, .PanelItem.cmp-relay .alarm.Icon {
  background-image: none !important;
}
.PanelItem.cmp-indicator-icon .alarm.Icon::before, .PanelItem.cmp-relay .alarm.Icon::before {
  content: "\e848";
}
.PanelItem.cmp-indicator-icon .alarm.active.Icon, .PanelItem.cmp-relay .alarm.active.Icon {
  color: #e84040;
  text-shadow: 0 0 10px #e84040;
}
.PanelItem.cmp-indicator-icon .alarm.active.Icon::before, .PanelItem.cmp-relay .alarm.active.Icon::before {
  content: "\e817";
}

.Frame.l-actual-extra {
  padding: 0 0.381rem;
  /* Actual value box */
  /* extra values box */
}
.Frame.l-actual-extra .Actual {
  height: 74.4px;
  vertical-align: baseline;
  text-align: right;
  padding-right: 0.381rem;
  display: flex;
  align-items: center;
  flex-direction: row;
  font-weight: bold;
  border-bottom: 1px solid #5C5C5C;
}
.Frame.l-actual-extra .Actual .vu, .Frame.l-actual-extra .Actual .Values {
  text-align: center;
  flex-grow: 1;
  font-size: 20pt;
}
.Frame.l-actual-extra .Actual .vu.leftpad, .Frame.l-actual-extra .Actual .Values.leftpad {
  padding-left: 15px;
}
.Frame.l-actual-extra .Actual .Values .vu {
  margin: 0;
}
.Frame.l-actual-extra .Extra {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  height: 74.4px;
  opacity: 0.8;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  /* .extra box with extremes side by side */
  /* .extra box with lines */
}
.Frame.l-actual-extra .Extra.labelled-cols {
  margin-top: 0;
  flex-direction: row;
  font-size: 13pt;
}
.Frame.l-actual-extra .Extra.labelled-cols .label {
  opacity: 0.7;
  font-size: 12pt;
  min-width: 40px;
}
.Frame.l-actual-extra .Extra.labelled-cols .vu, .Frame.l-actual-extra .Extra.labelled-cols .vc {
  line-height: 30px;
  vertical-align: middle;
}
.Frame.l-actual-extra .Extra.minmax .Caption {
  width: 100%;
  height: 22px;
  line-height: 22px;
  font-weight: normal;
  margin-top: 2px;
}
.Frame.l-actual-extra .Extra.minmax .Caption, .Frame.l-actual-extra .Extra.minmax .label {
  opacity: 0.6;
  font-size: 12pt;
}
.Frame.l-actual-extra .Extra.minmax .Values {
  width: 100%;
  height: 52.4px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.Frame.l-actual-extra .Extra.minmax .Values div > * {
  display: block;
}
.Frame.l-actual-extra .Extra.minmax .v {
  font-size: 16pt;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.Frame.l-actual-extra .Extra.r2, .Frame.l-actual-extra .Extra.r3 {
  align-items: stretch;
  flex-direction: column;
  justify-content: space-evenly;
  font-weight: normal;
  text-align: center;
}
html.grandstream .Frame.l-actual-extra .Extra.r2, html.grandstream .Frame.l-actual-extra .Extra.r3 {
  justify-content: space-around;
}

.Frame.l-actual-extra .Extra.r2 {
  font-size: 16pt;
}
.Frame.l-actual-extra .Extra.r3 {
  font-size: 13pt;
  justify-content: space-around;
}
.Frame.l-actual-extra .Extra .corner-icon {
  position: absolute;
  left: 0;
  bottom: 0;
}
.Frame.l-actual-extra .Extra .corner-icon.error {
  color: #e84040;
}

/* extra box behavior when wide split item becomes narrow (chart moves to the bottom half) */
.PanelItem.l-split.narrow .Frame.l-actual-extra .Actual {
  border-bottom: 0;
}
.PanelItem.l-split.narrow .Frame.l-actual-extra .Extra {
  display: none;
}

.col-layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  font-size: 16pt;
  justify-content: space-evenly;
}
.col-layout.fullwidth {
  padding: 0 !important;
}
html.grandstream .col-layout {
  justify-content: space-around;
}

.col-layout .col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}
.col-layout .col.center {
  justify-content: center;
}
.col-layout .col:nth-child(1) {
  width: 37%;
}
.col-layout .col:nth-child(2) {
  width: 8%;
  border-left: 1px solid #5C5C5C;
}
.col-layout .col:nth-child(3) {
  width: 55%;
}
.col-layout .col .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}
.col-layout .col .row:nth-child(even) {
  background: rgba(0, 0, 0, 0.2);
}
.col-layout .col .row.end {
  align-items: flex-end;
}
.col-layout .col .row.r4 {
  height: 25%;
}
.col-layout .col .row.Values .v {
  font-size: 16pt;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.col-layout .col .row .label {
  display: none;
}
.col-layout .col .row.n1 .label {
  display: block;
  opacity: 0.7;
  font-size: 12pt;
  text-align: center;
}
.col-layout .col .Caption {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 22px;
  font-weight: normal;
  opacity: 0.6;
  font-size: 12pt;
}
.col-layout .vu {
  padding-left: 1.8rem;
}
.col-layout .col-w-50 {
  width: 50%;
}
.col-layout.r2, .col-layout.r1 {
  font-size: 20pt;
}

.PanelItem.cmp-button-inels3 .Frame, .Frame.l-valuerows, .Frame.l-iconrows {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  font-size: 16pt;
  justify-content: space-evenly;
}
html.grandstream .PanelItem.cmp-button-inels3 .Frame, .PanelItem.cmp-button-inels3 html.grandstream .Frame, html.grandstream .Frame.l-valuerows, html.grandstream .Frame.l-iconrows {
  justify-content: space-around;
}

.PanelItem.cmp-button-inels3 .Frame .Row, .Frame.l-valuerows .Row, .Frame.l-iconrows .Row {
  display: flex;
  flex-direction: row;
  padding: 0 0.617rem;
  align-items: center;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.PanelItem.cmp-button-inels3 .Frame .Row.fullwidth, .Frame.l-valuerows .Row.fullwidth, .Frame.l-iconrows .Row.fullwidth {
  padding: 0 !important;
}
.PanelItem.cmp-button-inels3 .Frame .vu, .Frame.l-valuerows .vu, .Frame.l-iconrows .vu, .PanelItem.cmp-button-inels3 .Frame .vc, .Frame.l-valuerows .vc, .Frame.l-iconrows .vc {
  text-align: right;
  flex-grow: 1;
  vertical-align: middle;
  overflow: hidden;
}
.PanelItem.cmp-button-inels3 .Frame .vu .u, .Frame.l-valuerows .vu .u, .Frame.l-iconrows .vu .u, .PanelItem.cmp-button-inels3 .Frame .vc .u, .Frame.l-valuerows .vc .u, .Frame.l-iconrows .vc .u {
  text-align: left;
}
.PanelItem.cmp-button-inels3 .Frame .vc, .Frame.l-valuerows .vc, .Frame.l-iconrows .vc {
  text-align: center;
}
.PanelItem.cmp-button-inels3 .Frame .vcheck, .Frame.l-valuerows .vcheck, .Frame.l-iconrows .vcheck {
  flex-grow: 1;
  text-align: right;
  margin-right: 20px;
}
.PanelItem.cmp-button-inels3 .r2.Frame, .r2.Frame.l-valuerows, .r2.Frame.l-iconrows, .PanelItem.cmp-button-inels3 .r1.Frame, .r1.Frame.l-valuerows, .r1.Frame.l-iconrows {
  font-size: 20pt;
}

.Frame.l-iconrows .Row {
  padding-left: 30px;
}
.Frame.l-iconrows .Row > i, .Frame.l-iconrows .Row .label, .Frame.l-iconrows .Row .TypeIcon {
  vertical-align: middle;
  line-height: 40px;
  min-width: 40px;
}
.Frame.l-iconrows .vu, .Frame.l-iconrows .vc {
  line-height: 40px;
}
.Frame.l-iconrows .vu .u, .Frame.l-iconrows .vc .u {
  min-width: 50px;
}

.Frame.l-valuerows .Row.multi-va {
  display: flex;
  justify-content: space-evenly;
}
html.grandstream .Frame.l-valuerows .Row.multi-va {
  justify-content: space-around;
}

.Frame.l-valuerows .Row.multi-va .vu {
  flex-grow: 0;
}
.Frame.l-valuerows .Row.multi-va .vu .u {
  min-width: unset;
}
.Frame.l-valuerows .vu .u {
  min-width: 70px;
}
.Frame.l-valuerows.r1 .vu .u, .Frame.l-valuerows.r2 .vu .u {
  min-width: 50px;
}
.Frame.l-valuerows.rn, .Frame.l-valuerows.labelled {
  font-size: 13pt;
}
.Frame.l-valuerows.labelled .label {
  padding-left: 20px;
}
.Frame.l-valuerows.labelled.tiny-labels .label {
  font-size: 12pt;
  padding-left: 0;
}
.Frame.l-valuerows.labelled.tiny-labels .Row {
  padding-left: 0.381rem;
}
.Frame.l-valuerows.labelled.tiny-labels .vu .u {
  min-width: 30px;
}
.Frame.l-valuerows.labelled .vu .u {
  min-width: 45px;
}
.Frame.l-valuerows.l-iconrows.labelled .label {
  padding-left: 0;
}
.Frame.l-valuerows.scroll-y {
  overflow-y: auto;
}
html.not-touch .Frame.l-valuerows.scroll-y {
  scrollbar-width: thin;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch .Frame.l-valuerows.scroll-y::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #363636;
}
html.not-touch .Frame.l-valuerows.scroll-y::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 3px;
}

.PanelItem.wide.l-split .Row,
.PanelItem.wide.l-split-wide .Row {
  padding-left: 0.381rem;
  padding-right: 0.381rem;
}
.PanelItem.wide.l-split .Frame.l-iconrows .Row,
.PanelItem.wide.l-split-wide .Frame.l-iconrows .Row {
  padding-left: 0.381rem;
  padding-right: 0.381rem;
}
.PanelItem.wide.l-split .Frame.l-valuerows.tiny-labels .label,
.PanelItem.wide.l-split-wide .Frame.l-valuerows.tiny-labels .label {
  font-size: 10pt;
}
.PanelItem.wide.l-split .Frame.l-valuerows.tiny-labels .vu .u,
.PanelItem.wide.l-split-wide .Frame.l-valuerows.tiny-labels .vu .u {
  min-width: 25px;
}

.PanelItem.narrow.l-split .Frame.l-iconrows.r3,
.PanelItem.narrow.l-split .Frame.l-iconrows.rn,
.PanelItem.narrow.l-split .Frame.l-valuerows.r2,
.PanelItem.narrow.l-split .Frame.l-valuerows.r3 {
  flex-direction: row;
  font-size: 16pt;
}
.PanelItem.narrow.l-split .Frame.l-iconrows.r3 .Row,
.PanelItem.narrow.l-split .Frame.l-iconrows.rn .Row,
.PanelItem.narrow.l-split .Frame.l-valuerows.r2 .Row,
.PanelItem.narrow.l-split .Frame.l-valuerows.r3 .Row {
  padding: 0;
  align-items: center;
  justify-content: center;
}
.PanelItem.narrow.l-split .Frame.l-iconrows.r3 .TypeIcon, .PanelItem.narrow.l-split .Frame.l-iconrows.r3 .Row > i,
.PanelItem.narrow.l-split .Frame.l-iconrows.rn .TypeIcon,
.PanelItem.narrow.l-split .Frame.l-iconrows.rn .Row > i,
.PanelItem.narrow.l-split .Frame.l-valuerows.r2 .TypeIcon,
.PanelItem.narrow.l-split .Frame.l-valuerows.r2 .Row > i,
.PanelItem.narrow.l-split .Frame.l-valuerows.r3 .TypeIcon,
.PanelItem.narrow.l-split .Frame.l-valuerows.r3 .Row > i {
  display: none;
}
.PanelItem.narrow.l-split .Frame.l-iconrows.r3 .vu,
.PanelItem.narrow.l-split .Frame.l-iconrows.rn .vu,
.PanelItem.narrow.l-split .Frame.l-valuerows.r2 .vu,
.PanelItem.narrow.l-split .Frame.l-valuerows.r3 .vu {
  line-height: unset;
  justify-content: center;
  overflow: hidden;
}
.PanelItem.narrow.l-split .Frame.l-iconrows.r3 .vu .v, .PanelItem.narrow.l-split .Frame.l-iconrows.r3 .vu .u,
.PanelItem.narrow.l-split .Frame.l-iconrows.rn .vu .v,
.PanelItem.narrow.l-split .Frame.l-iconrows.rn .vu .u,
.PanelItem.narrow.l-split .Frame.l-valuerows.r2 .vu .v,
.PanelItem.narrow.l-split .Frame.l-valuerows.r2 .vu .u,
.PanelItem.narrow.l-split .Frame.l-valuerows.r3 .vu .v,
.PanelItem.narrow.l-split .Frame.l-valuerows.r3 .vu .u {
  display: block;
  text-align: center;
  min-width: 0;
  margin-left: 0;
}
.PanelItem.narrow.l-split .Frame.l-iconrows.r3.labelled .Row,
.PanelItem.narrow.l-split .Frame.l-iconrows.rn.labelled .Row,
.PanelItem.narrow.l-split .Frame.l-valuerows.r2.labelled .Row,
.PanelItem.narrow.l-split .Frame.l-valuerows.r3.labelled .Row {
  flex-direction: column;
  font-size: 16pt;
  align-content: center;
  padding: 0.235rem;
}
.PanelItem.narrow.l-split .Frame.l-valuerows.r2 {
  font-size: 20pt;
}

.Frame.l-iconrows.rn, .PanelItem.narrow.l-split .Frame.l-iconrows.r1, .PanelItem.narrow.l-split .Frame.l-iconrows.r2 {
  justify-content: space-around;
  font-size: 13pt;
}
.Frame.l-iconrows.rn .Row, .PanelItem.narrow.l-split .Frame.l-iconrows.r1 .Row, .PanelItem.narrow.l-split .Frame.l-iconrows.r2 .Row {
  padding-top: 3px;
}
.Frame.l-iconrows.rn .TypeIcon, .PanelItem.narrow.l-split .Frame.l-iconrows.r1 .TypeIcon, .PanelItem.narrow.l-split .Frame.l-iconrows.r2 .TypeIcon {
  background-size: contain;
  width: 25px;
  height: 20px;
}
.Frame.l-iconrows.rn .TypeIcon svg, .PanelItem.narrow.l-split .Frame.l-iconrows.r1 .TypeIcon svg, .PanelItem.narrow.l-split .Frame.l-iconrows.r2 .TypeIcon svg {
  vertical-align: top;
}
.Frame.l-iconrows.rn .Row > i, .PanelItem.narrow.l-split .Frame.l-iconrows.r1 .Row > i, .PanelItem.narrow.l-split .Frame.l-iconrows.r2 .Row > i, .Frame.l-iconrows.rn .label, .PanelItem.narrow.l-split .Frame.l-iconrows.r1 .label, .PanelItem.narrow.l-split .Frame.l-iconrows.r2 .label {
  line-height: 25px;
}
.Frame.l-iconrows.rn .vu, .PanelItem.narrow.l-split .Frame.l-iconrows.r1 .vu, .PanelItem.narrow.l-split .Frame.l-iconrows.r2 .vu, .Frame.l-iconrows.rn .vc, .PanelItem.narrow.l-split .Frame.l-iconrows.r1 .vc, .PanelItem.narrow.l-split .Frame.l-iconrows.r2 .vc {
  line-height: 25px;
}

.Frame.l-iconrows.zebra .Row, .Frame.l-valuerows.zebra .Row {
  flex-grow: 1;
  align-items: center;
}
.Frame.l-iconrows.zebra .Row:nth-child(even), .Frame.l-valuerows.zebra .Row:nth-child(even) {
  background: rgba(0, 0, 0, 0.2);
}

.narrow.l-split .zebra .Row:nth-child(even) {
  background: transparent;
}

/* widget with nothing but a big icon in the middle */
.Frame.l-icon {
  background-position: center;
  background-repeat: no-repeat;
  color: #cfcece;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Frame.l-icon .Icon.cams {
  background-image: url("/images/dashboard/icon-camera.svg");
}
.Frame.l-icon .Icon.alarm {
  background-image: url("/images/dashboard/icon-alarm.svg");
}
.Frame.l-icon .Icon.appliances {
  background-image: url("/images/dashboard/icon-appliances.svg");
}
.Frame.l-icon .Icon.lighting {
  background-image: url("/images/dashboard/icon-lighting.svg");
}
.Frame.l-icon .Icon.consumption {
  background-image: url("/images/dashboard/icon-measure.svg");
}
.Frame.l-icon .Icon.security {
  background-image: url("/images/dashboard/icon-security.svg");
}
.Frame.l-icon .Icon.sensors {
  background-image: url("/images/dashboard/icon-temperature.svg");
}
.Frame.l-icon .Icon.monitoring {
  background-image: url("/images/dashboard/icon-watchdog.svg");
}
.Frame.l-icon .Icon.monitoring2 {
  background-image: url("/images/dashboard/icon-watchdog2.svg");
}
.Frame.l-icon .Icon.multimedia {
  background-image: url("/images/dashboard/icon-multimedia.svg");
}
.Frame.l-icon .Icon.meteo {
  background-image: url("/images/dashboard/icon-meteo.svg");
}
.Frame.l-icon .Icon.temp {
  background-image: url("/images/dashboard/icon-tempheat.svg");
}
.Frame.l-icon .Icon.technology {
  background-image: url("/images/dashboard/icon-tech.svg");
}
.Frame.l-icon .Icon.fan {
  background-image: url("/images/dashboard/icon-fan.svg");
}
.Frame.l-icon .Icon.drop {
  background-image: url("/images/dashboard/icon-drop.svg");
}
.Frame.l-icon .Icon.mapsearch {
  background-image: url("/images/dashboard/icon-mapsearch.svg");
}
.Frame.l-icon .Icon.robot {
  background-image: url("/images/dashboard/icon-robot.svg");
}
.Frame.l-icon .Icon.unlock {
  background-image: url("/images/dashboard/icon-unlock.svg");
}
.Frame.l-icon .Icon.undo {
  background-image: url("/images/dashboard/icon-undo.svg");
}
.Frame.l-icon .Icon.shortcut {
  background-image: url("/images/dashboard/icon-shortcut.svg");
}
.Frame.l-icon .Icon.smarthome {
  background-image: url("/images/dashboard/icon-smarthome.svg");
}
.Frame.l-icon .Icon.layers {
  background-image: url("/images/dashboard/icon-layers.svg");
}
.Frame.l-icon .Icon.tank {
  background-image: url("/images/dashboard/icon-tank.svg");
}
.Frame.l-icon .Icon.tank2 {
  background-image: url("/images/dashboard/icon-tank2.svg");
}
.Frame.l-icon .Icon.meander {
  background-image: url("/images/dashboard/icon-meander.svg");
}
.Frame.l-icon .Icon.access {
  background-image: url("/images/dashboard/icon-access.svg");
}
.Frame.l-icon .Icon.key {
  background-image: url("/images/dashboard/icon-key.svg");
}
.Frame.l-icon .Icon.security2 {
  background-image: url("/images/dashboard/icon-security2.svg");
}
.Frame.l-icon .Icon.meter {
  background-image: url("/images/dashboard/icon-meter.svg");
}
.Frame.l-icon .Icon.meter2 {
  background-image: url("/images/dashboard/icon-meter2.svg");
}
.Frame.l-icon .Icon.meter3 {
  background-image: url("/images/dashboard/icon-meter3.svg");
}
.Frame.l-icon .Icon.engine {
  background-image: url("/images/dashboard/icon-engine.svg");
}
.Frame.l-icon .Icon.contract {
  background-image: url("/images/dashboard/icon-contract.svg");
}
.Frame.l-icon .Icon.carseat {
  background-image: url("/images/dashboard/icon-carseat.svg");
}
.Frame.l-icon .Icon.floorplan {
  background-image: url("/images/dashboard/icon-floorplan.svg");
}
.Frame.l-icon .Icon.waterdam {
  background-image: url("/images/dashboard/icon-waterdam.svg");
}
.Frame.l-icon .Icon.meteo2 {
  background-image: url("/images/dashboard/icon-meteo2.svg");
}
.Frame.l-icon .Icon.brewery {
  background-image: url("/images/dashboard/icon-brewery.svg");
}
.Frame.l-icon .Icon.fan2 {
  background-image: url("/images/dashboard/icon-fan2.svg");
}
.Frame.l-icon .Icon.pvs {
  background-image: url("/images/dashboard/icon-pvs.svg");
}
.Frame.l-icon .Icon.hydropower {
  background-image: url("/images/dashboard/icon-hydropower.svg");
}
.Frame.l-icon .Icon.heater {
  background-image: url("/images/dashboard/icon-heater.svg");
}
.Frame.l-icon .Icon.bar {
  background-image: url("/images/dashboard/icon-bar.svg");
}
.Frame.l-icon .Icon.cam {
  background-image: url("/images/dashboard/icon-cam.svg");
}
.Frame.l-icon .Icon.cam2 {
  background-image: url("/images/dashboard/icon-cam2.svg");
}
.Frame.l-icon .Icon.plug {
  background-image: url("/images/dashboard/icon-plug.svg");
}
.Frame.l-icon .Icon.compressor {
  background-image: url("/images/dashboard/icon-compressor.svg");
}
.Frame.l-icon .Icon.scale {
  background-image: url("/images/dashboard/icon-scale.svg");
}
.Frame.l-icon .Icon.sun {
  background-image: url("/images/dashboard/icon-sun.svg");
}
.Frame.l-icon .Icon {
  background-size: contain;
  font-size: 80px;
  height: 120px;
  line-height: 120px;
  vertical-align: middle;
  width: 120px;
  text-align: center;
}
.Frame.l-icon .Icon::before {
  padding-top: 15px;
}
.Frame.l-icon .Icon > svg {
  max-width: 100%;
  max-height: 100%;
}
.Frame.l-icon .Icon.icon-usr-music {
  margin-left: -10px;
  margin-top: -5px;
}

.PanelItem.l-split.narrow .Frame.l-icon .Icon,
.PanelItem.l-split-wide.narrow .Frame.l-icon .Icon {
  font-size: 50px;
  height: 74.4px;
  line-height: 74.4px;
}
.PanelItem.l-split.narrow .Frame.l-icon .Icon::before,
.PanelItem.l-split-wide.narrow .Frame.l-icon .Icon::before {
  padding-top: 8px;
}

.Frame.l-table table {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  font-size: 12pt;
  width: 100%;
}
.Frame.l-table th, .Frame.l-table td {
  padding: 0.235rem;
}
.Frame.l-table th {
  font-weight: normal;
  padding-left: 10px;
}
.Frame.l-table th:first-child, .Frame.l-table td:first-child {
  padding-left: 10px;
}
.Frame.l-table th:last-child, .Frame.l-table td:last-child {
  padding-right: 10px;
}

.Frame.l-table.zebra tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.2);
}

.PanelItem.l-split-wide.narrow .Frame.l-table th, .PanelItem.l-split-wide.narrow .Frame.l-table td {
  padding: 0.235rem;
}

.Frame.l-3plus1 {
  display: flex;
  flex-direction: row;
}
.Frame.l-3plus1 .col.side {
  padding: 0 0.381rem;
  flex-shrink: 0;
  width: 40%;
  border-right: 1px solid #5C5C5C;
  position: relative;
}
.Frame.l-3plus1 .col.side .box {
  height: 33%;
}
html.grandstream .Frame.l-3plus1 .col.side .box {
  height: 47.6px;
}

.Frame.l-3plus1 .col.side .box:first-child {
  border-bottom: 1px solid #5C5C5C;
}
.Frame.l-3plus1 .col.side .box:last-child {
  border-top: 1px solid #5C5C5C;
}
.Frame.l-3plus1 .col.main {
  flex-grow: 1;
}
.Frame.l-3plus1 .box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.Frame.l-3plus1 .col.main {
  justify-content: center;
  display: flex;
  position: relative;
}
.Frame.l-3plus1 .col.main .box {
  flex-direction: column;
  position: relative;
  font-weight: bold;
  justify-content: space-evenly;
}
html.grandstream .Frame.l-3plus1 .col.main .box {
  justify-content: space-around;
}

.Frame.l-3plus1 .col.main .box.r1 .vu {
  font-size: 24pt;
}
.Frame.l-3plus1 .col.main .box.r2-icon {
  justify-content: flex-start;
}
.Frame.l-3plus1 .col.main .box.r2-icon .vu {
  margin-top: 15px;
  font-size: 20pt;
}
.Frame.l-3plus1 .col.main .TypeIcon {
  position: absolute;
  right: 3px;
  bottom: 3px;
}

.PanelItem.l-split-wide.wide .col.side {
  font-size: 13pt;
}

.PanelItem.cmp-camera .Title {
  z-index: 1;
  text-align: center;
  color: white;
  font-size: 10pt;
  font-weight: normal;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.1rem 0.381rem 0.1rem 0.381rem;
  height: unset;
  line-height: unset;
}
.PanelItem.cmp-camera .Frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.PanelItem.cmp-camera .Frame img {
  max-width: 100%;
  max-height: 100%;
}
.PanelItem.cmp-camera .Frame.failed {
  background-image: url("/images/item/broken.png");
}
.PanelItem.cmp-camera .Frame.failed img {
  display: none !important;
}

.PanelItem.cmp-missing .Frame {
  text-align: left;
  font-weight: normal;
}
.PanelItem.cmp-missing .Frame div {
  position: relative;
  padding-bottom: 0.235rem;
}
.PanelItem.cmp-missing .info {
  text-align: center;
  padding: 20px 5px 5px;
  word-wrap: break-word;
  white-space: normal;
}

.PanelItem.cmp-button-inels3 .Frame .Extra, .PanelItem.cmp-dimmer-multi .Buttons, .PanelItem.cmp-rgb .Buttons, .PanelItem.cmp-blinds .Buttons, .PanelItem.cmp-dimmer .Buttons, .PanelItem.cmp-buttons .Frame {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0.381rem;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button, .PanelItem.cmp-dimmer-multi .Buttons .Button, .PanelItem.cmp-rgb .Buttons .Button, .PanelItem.cmp-blinds .Buttons .Button, .PanelItem.cmp-dimmer .Buttons .Button, .PanelItem.cmp-buttons .Frame .Button {
  position: relative;
  display: block;
  text-decoration: none;
  cursor: pointer;
  color: #cfcece;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button .Icon, .PanelItem.cmp-dimmer-multi .Buttons .Button .Icon, .PanelItem.cmp-rgb .Buttons .Button .Icon, .PanelItem.cmp-blinds .Buttons .Button .Icon, .PanelItem.cmp-dimmer .Buttons .Button .Icon, .PanelItem.cmp-buttons .Frame .Button .Icon {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button .Icon::before, .PanelItem.cmp-dimmer-multi .Buttons .Button .Icon::before, .PanelItem.cmp-rgb .Buttons .Button .Icon::before, .PanelItem.cmp-blinds .Buttons .Button .Icon::before, .PanelItem.cmp-dimmer .Buttons .Button .Icon::before, .PanelItem.cmp-buttons .Frame .Button .Icon::before {
  margin-bottom: 20%;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.disabled, .PanelItem.cmp-dimmer-multi .Buttons .Button.disabled, .PanelItem.cmp-rgb .Buttons .Button.disabled, .PanelItem.cmp-blinds .Buttons .Button.disabled, .PanelItem.cmp-dimmer .Buttons .Button.disabled, .PanelItem.cmp-buttons .Frame .Button.disabled {
  cursor: default;
  opacity: 0.6;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.no-text .Icon::before, .PanelItem.cmp-dimmer-multi .Buttons .Button.no-text .Icon::before, .PanelItem.cmp-rgb .Buttons .Button.no-text .Icon::before, .PanelItem.cmp-blinds .Buttons .Button.no-text .Icon::before, .PanelItem.cmp-dimmer .Buttons .Button.no-text .Icon::before, .PanelItem.cmp-buttons .Frame .Button.no-text .Icon::before {
  margin-bottom: 0;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button:active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button:active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button:active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button:active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button:active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button:active:not(.with-led), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.active:not(.with-led) {
  text-shadow: 0 0 10px var(--c-primary);
  color: var(--c-primary);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button:hover:not(.disabled) {
  background: rgba(var(--c-primary), 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button:hover:not(.disabled), .PanelItem.cmp-button-inels3 .Frame .Extra .Button:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button:hover:not(.disabled) .Label, .PanelItem.cmp-rgb .Buttons .Button:hover:not(.disabled) .Label, .PanelItem.cmp-blinds .Buttons .Button:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer .Buttons .Button:hover:not(.disabled) .Label, .PanelItem.cmp-buttons .Frame .Button:hover:not(.disabled) .Label {
  color: var(--c-primary);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button:active, .PanelItem.cmp-dimmer-multi .Buttons .Button:active, .PanelItem.cmp-rgb .Buttons .Button:active, .PanelItem.cmp-blinds .Buttons .Button:active, .PanelItem.cmp-dimmer .Buttons .Button:active, .PanelItem.cmp-buttons .Frame .Button:active, .PanelItem.cmp-button-inels3 .Frame .Extra .Button:active .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button:active .Label, .PanelItem.cmp-rgb .Buttons .Button:active .Label, .PanelItem.cmp-blinds .Buttons .Button:active .Label, .PanelItem.cmp-dimmer .Buttons .Button:active .Label, .PanelItem.cmp-buttons .Frame .Button:active .Label {
  color: var(--c-primary);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button:active, .PanelItem.cmp-dimmer-multi .Buttons .Button:active, .PanelItem.cmp-rgb .Buttons .Button:active, .PanelItem.cmp-blinds .Buttons .Button:active, .PanelItem.cmp-dimmer .Buttons .Button:active, .PanelItem.cmp-buttons .Frame .Button:active {
  background: rgba(var(--c-primary), 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.red, .PanelItem.cmp-dimmer-multi .Buttons .Button.red, .PanelItem.cmp-rgb .Buttons .Button.red, .PanelItem.cmp-blinds .Buttons .Button.red, .PanelItem.cmp-dimmer .Buttons .Button.red, .PanelItem.cmp-buttons .Frame .Button.red {
  color: #cfcece;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.red:active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.red:active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.red:active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.red:active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.red:active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.red:active:not(.with-led), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.red.active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.red.active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.red.active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.red.active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.red.active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.red.active:not(.with-led) {
  text-shadow: 0 0 10px #ff0000;
  color: #ff0000;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.red:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.red:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.red:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.red:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.red:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.red:hover:not(.disabled) {
  background: rgba(255, 0, 0, 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.red:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.red:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.red:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.red:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.red:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.red:hover:not(.disabled), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.red:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.red:hover:not(.disabled) .Label, .PanelItem.cmp-rgb .Buttons .Button.red:hover:not(.disabled) .Label, .PanelItem.cmp-blinds .Buttons .Button.red:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer .Buttons .Button.red:hover:not(.disabled) .Label, .PanelItem.cmp-buttons .Frame .Button.red:hover:not(.disabled) .Label {
  color: #ff0000;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.red:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.red:active, .PanelItem.cmp-rgb .Buttons .Button.red:active, .PanelItem.cmp-blinds .Buttons .Button.red:active, .PanelItem.cmp-dimmer .Buttons .Button.red:active, .PanelItem.cmp-buttons .Frame .Button.red:active, .PanelItem.cmp-button-inels3 .Frame .Extra .Button.red:active .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.red:active .Label, .PanelItem.cmp-rgb .Buttons .Button.red:active .Label, .PanelItem.cmp-blinds .Buttons .Button.red:active .Label, .PanelItem.cmp-dimmer .Buttons .Button.red:active .Label, .PanelItem.cmp-buttons .Frame .Button.red:active .Label {
  color: #ff0000;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.red:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.red:active, .PanelItem.cmp-rgb .Buttons .Button.red:active, .PanelItem.cmp-blinds .Buttons .Button.red:active, .PanelItem.cmp-dimmer .Buttons .Button.red:active, .PanelItem.cmp-buttons .Frame .Button.red:active {
  background: rgba(255, 0, 0, 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.green, .PanelItem.cmp-dimmer-multi .Buttons .Button.green, .PanelItem.cmp-rgb .Buttons .Button.green, .PanelItem.cmp-blinds .Buttons .Button.green, .PanelItem.cmp-dimmer .Buttons .Button.green, .PanelItem.cmp-buttons .Frame .Button.green {
  color: #cfcece;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.green:active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.green:active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.green:active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.green:active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.green:active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.green:active:not(.with-led), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.green.active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.green.active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.green.active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.green.active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.green.active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.green.active:not(.with-led) {
  text-shadow: 0 0 10px #00ff7f;
  color: #00ff7f;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.green:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.green:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.green:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.green:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.green:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.green:hover:not(.disabled) {
  background: rgba(0, 255, 127, 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.green:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.green:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.green:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.green:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.green:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.green:hover:not(.disabled), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.green:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.green:hover:not(.disabled) .Label, .PanelItem.cmp-rgb .Buttons .Button.green:hover:not(.disabled) .Label, .PanelItem.cmp-blinds .Buttons .Button.green:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer .Buttons .Button.green:hover:not(.disabled) .Label, .PanelItem.cmp-buttons .Frame .Button.green:hover:not(.disabled) .Label {
  color: #00ff7f;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.green:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.green:active, .PanelItem.cmp-rgb .Buttons .Button.green:active, .PanelItem.cmp-blinds .Buttons .Button.green:active, .PanelItem.cmp-dimmer .Buttons .Button.green:active, .PanelItem.cmp-buttons .Frame .Button.green:active, .PanelItem.cmp-button-inels3 .Frame .Extra .Button.green:active .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.green:active .Label, .PanelItem.cmp-rgb .Buttons .Button.green:active .Label, .PanelItem.cmp-blinds .Buttons .Button.green:active .Label, .PanelItem.cmp-dimmer .Buttons .Button.green:active .Label, .PanelItem.cmp-buttons .Frame .Button.green:active .Label {
  color: #00ff7f;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.green:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.green:active, .PanelItem.cmp-rgb .Buttons .Button.green:active, .PanelItem.cmp-blinds .Buttons .Button.green:active, .PanelItem.cmp-dimmer .Buttons .Button.green:active, .PanelItem.cmp-buttons .Frame .Button.green:active {
  background: rgba(0, 255, 127, 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.yellow, .PanelItem.cmp-dimmer-multi .Buttons .Button.yellow, .PanelItem.cmp-rgb .Buttons .Button.yellow, .PanelItem.cmp-blinds .Buttons .Button.yellow, .PanelItem.cmp-dimmer .Buttons .Button.yellow, .PanelItem.cmp-buttons .Frame .Button.yellow {
  color: #cfcece;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.yellow:active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.yellow:active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.yellow:active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.yellow:active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.yellow:active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.yellow:active:not(.with-led), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.yellow.active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.yellow.active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.yellow.active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.yellow.active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.yellow.active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.yellow.active:not(.with-led) {
  text-shadow: 0 0 10px #ffff66;
  color: #ffff66;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.yellow:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.yellow:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.yellow:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.yellow:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.yellow:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.yellow:hover:not(.disabled) {
  background: rgba(255, 255, 102, 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.yellow:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.yellow:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.yellow:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.yellow:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.yellow:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.yellow:hover:not(.disabled), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.yellow:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.yellow:hover:not(.disabled) .Label, .PanelItem.cmp-rgb .Buttons .Button.yellow:hover:not(.disabled) .Label, .PanelItem.cmp-blinds .Buttons .Button.yellow:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer .Buttons .Button.yellow:hover:not(.disabled) .Label, .PanelItem.cmp-buttons .Frame .Button.yellow:hover:not(.disabled) .Label {
  color: #ffff66;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.yellow:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.yellow:active, .PanelItem.cmp-rgb .Buttons .Button.yellow:active, .PanelItem.cmp-blinds .Buttons .Button.yellow:active, .PanelItem.cmp-dimmer .Buttons .Button.yellow:active, .PanelItem.cmp-buttons .Frame .Button.yellow:active, .PanelItem.cmp-button-inels3 .Frame .Extra .Button.yellow:active .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.yellow:active .Label, .PanelItem.cmp-rgb .Buttons .Button.yellow:active .Label, .PanelItem.cmp-blinds .Buttons .Button.yellow:active .Label, .PanelItem.cmp-dimmer .Buttons .Button.yellow:active .Label, .PanelItem.cmp-buttons .Frame .Button.yellow:active .Label {
  color: #ffff66;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.yellow:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.yellow:active, .PanelItem.cmp-rgb .Buttons .Button.yellow:active, .PanelItem.cmp-blinds .Buttons .Button.yellow:active, .PanelItem.cmp-dimmer .Buttons .Button.yellow:active, .PanelItem.cmp-buttons .Frame .Button.yellow:active {
  background: rgba(255, 255, 102, 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.cyan, .PanelItem.cmp-dimmer-multi .Buttons .Button.cyan, .PanelItem.cmp-rgb .Buttons .Button.cyan, .PanelItem.cmp-blinds .Buttons .Button.cyan, .PanelItem.cmp-dimmer .Buttons .Button.cyan, .PanelItem.cmp-buttons .Frame .Button.cyan {
  color: #cfcece;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.cyan:active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.cyan:active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.cyan:active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.cyan:active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.cyan:active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.cyan:active:not(.with-led), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.cyan.active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.cyan.active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.cyan.active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.cyan.active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.cyan.active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.cyan.active:not(.with-led) {
  text-shadow: 0 0 10px #81d8d0;
  color: #81d8d0;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.cyan:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.cyan:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.cyan:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.cyan:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.cyan:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.cyan:hover:not(.disabled) {
  background: rgba(129, 216, 208, 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.cyan:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.cyan:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.cyan:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.cyan:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.cyan:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.cyan:hover:not(.disabled), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.cyan:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.cyan:hover:not(.disabled) .Label, .PanelItem.cmp-rgb .Buttons .Button.cyan:hover:not(.disabled) .Label, .PanelItem.cmp-blinds .Buttons .Button.cyan:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer .Buttons .Button.cyan:hover:not(.disabled) .Label, .PanelItem.cmp-buttons .Frame .Button.cyan:hover:not(.disabled) .Label {
  color: #81d8d0;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.cyan:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.cyan:active, .PanelItem.cmp-rgb .Buttons .Button.cyan:active, .PanelItem.cmp-blinds .Buttons .Button.cyan:active, .PanelItem.cmp-dimmer .Buttons .Button.cyan:active, .PanelItem.cmp-buttons .Frame .Button.cyan:active, .PanelItem.cmp-button-inels3 .Frame .Extra .Button.cyan:active .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.cyan:active .Label, .PanelItem.cmp-rgb .Buttons .Button.cyan:active .Label, .PanelItem.cmp-blinds .Buttons .Button.cyan:active .Label, .PanelItem.cmp-dimmer .Buttons .Button.cyan:active .Label, .PanelItem.cmp-buttons .Frame .Button.cyan:active .Label {
  color: #81d8d0;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.cyan:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.cyan:active, .PanelItem.cmp-rgb .Buttons .Button.cyan:active, .PanelItem.cmp-blinds .Buttons .Button.cyan:active, .PanelItem.cmp-dimmer .Buttons .Button.cyan:active, .PanelItem.cmp-buttons .Frame .Button.cyan:active {
  background: rgba(129, 216, 208, 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.purple, .PanelItem.cmp-dimmer-multi .Buttons .Button.purple, .PanelItem.cmp-rgb .Buttons .Button.purple, .PanelItem.cmp-blinds .Buttons .Button.purple, .PanelItem.cmp-dimmer .Buttons .Button.purple, .PanelItem.cmp-buttons .Frame .Button.purple {
  color: #cfcece;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.purple:active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.purple:active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.purple:active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.purple:active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.purple:active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.purple:active:not(.with-led), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.purple.active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.purple.active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.purple.active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.purple.active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.purple.active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.purple.active:not(.with-led) {
  text-shadow: 0 0 10px #8a2be2;
  color: #8a2be2;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.purple:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.purple:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.purple:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.purple:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.purple:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.purple:hover:not(.disabled) {
  background: rgba(138, 43, 226, 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.purple:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.purple:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.purple:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.purple:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.purple:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.purple:hover:not(.disabled), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.purple:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.purple:hover:not(.disabled) .Label, .PanelItem.cmp-rgb .Buttons .Button.purple:hover:not(.disabled) .Label, .PanelItem.cmp-blinds .Buttons .Button.purple:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer .Buttons .Button.purple:hover:not(.disabled) .Label, .PanelItem.cmp-buttons .Frame .Button.purple:hover:not(.disabled) .Label {
  color: #8a2be2;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.purple:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.purple:active, .PanelItem.cmp-rgb .Buttons .Button.purple:active, .PanelItem.cmp-blinds .Buttons .Button.purple:active, .PanelItem.cmp-dimmer .Buttons .Button.purple:active, .PanelItem.cmp-buttons .Frame .Button.purple:active, .PanelItem.cmp-button-inels3 .Frame .Extra .Button.purple:active .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.purple:active .Label, .PanelItem.cmp-rgb .Buttons .Button.purple:active .Label, .PanelItem.cmp-blinds .Buttons .Button.purple:active .Label, .PanelItem.cmp-dimmer .Buttons .Button.purple:active .Label, .PanelItem.cmp-buttons .Frame .Button.purple:active .Label {
  color: #8a2be2;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.purple:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.purple:active, .PanelItem.cmp-rgb .Buttons .Button.purple:active, .PanelItem.cmp-blinds .Buttons .Button.purple:active, .PanelItem.cmp-dimmer .Buttons .Button.purple:active, .PanelItem.cmp-buttons .Frame .Button.purple:active {
  background: rgba(138, 43, 226, 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.white, .PanelItem.cmp-dimmer-multi .Buttons .Button.white, .PanelItem.cmp-rgb .Buttons .Button.white, .PanelItem.cmp-blinds .Buttons .Button.white, .PanelItem.cmp-dimmer .Buttons .Button.white, .PanelItem.cmp-buttons .Frame .Button.white {
  color: #cfcece;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.white:active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.white:active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.white:active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.white:active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.white:active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.white:active:not(.with-led), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.white.active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.white.active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.white.active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.white.active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.white.active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.white.active:not(.with-led) {
  text-shadow: 0 0 10px #ffffff;
  color: #ffffff;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.white:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.white:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.white:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.white:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.white:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.white:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.white:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.white:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.white:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.white:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.white:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.white:hover:not(.disabled), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.white:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.white:hover:not(.disabled) .Label, .PanelItem.cmp-rgb .Buttons .Button.white:hover:not(.disabled) .Label, .PanelItem.cmp-blinds .Buttons .Button.white:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer .Buttons .Button.white:hover:not(.disabled) .Label, .PanelItem.cmp-buttons .Frame .Button.white:hover:not(.disabled) .Label {
  color: #ffffff;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.white:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.white:active, .PanelItem.cmp-rgb .Buttons .Button.white:active, .PanelItem.cmp-blinds .Buttons .Button.white:active, .PanelItem.cmp-dimmer .Buttons .Button.white:active, .PanelItem.cmp-buttons .Frame .Button.white:active, .PanelItem.cmp-button-inels3 .Frame .Extra .Button.white:active .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.white:active .Label, .PanelItem.cmp-rgb .Buttons .Button.white:active .Label, .PanelItem.cmp-blinds .Buttons .Button.white:active .Label, .PanelItem.cmp-dimmer .Buttons .Button.white:active .Label, .PanelItem.cmp-buttons .Frame .Button.white:active .Label {
  color: #ffffff;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.white:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.white:active, .PanelItem.cmp-rgb .Buttons .Button.white:active, .PanelItem.cmp-blinds .Buttons .Button.white:active, .PanelItem.cmp-dimmer .Buttons .Button.white:active, .PanelItem.cmp-buttons .Frame .Button.white:active {
  background: rgba(255, 255, 255, 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led, .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led, .PanelItem.cmp-rgb .Buttons .Button.with-led, .PanelItem.cmp-blinds .Buttons .Button.with-led, .PanelItem.cmp-dimmer .Buttons .Button.with-led, .PanelItem.cmp-buttons .Frame .Button.with-led {
  color: #cfcece;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led:active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led:active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.with-led:active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.with-led:active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.with-led:active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.with-led:active:not(.with-led), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led.active:not(.with-led), .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led.active:not(.with-led), .PanelItem.cmp-rgb .Buttons .Button.with-led.active:not(.with-led), .PanelItem.cmp-blinds .Buttons .Button.with-led.active:not(.with-led), .PanelItem.cmp-dimmer .Buttons .Button.with-led.active:not(.with-led), .PanelItem.cmp-buttons .Frame .Button.with-led.active:not(.with-led) {
  text-shadow: 0 0 10px var(--c-primary);
  color: var(--c-primary);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.with-led:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.with-led:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.with-led:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.with-led:hover:not(.disabled) {
  background: rgba(var(--c-primary), 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led:hover:not(.disabled), .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led:hover:not(.disabled), .PanelItem.cmp-rgb .Buttons .Button.with-led:hover:not(.disabled), .PanelItem.cmp-blinds .Buttons .Button.with-led:hover:not(.disabled), .PanelItem.cmp-dimmer .Buttons .Button.with-led:hover:not(.disabled), .PanelItem.cmp-buttons .Frame .Button.with-led:hover:not(.disabled), .PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led:hover:not(.disabled) .Label, .PanelItem.cmp-rgb .Buttons .Button.with-led:hover:not(.disabled) .Label, .PanelItem.cmp-blinds .Buttons .Button.with-led:hover:not(.disabled) .Label, .PanelItem.cmp-dimmer .Buttons .Button.with-led:hover:not(.disabled) .Label, .PanelItem.cmp-buttons .Frame .Button.with-led:hover:not(.disabled) .Label {
  color: var(--c-primary);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led:active, .PanelItem.cmp-rgb .Buttons .Button.with-led:active, .PanelItem.cmp-blinds .Buttons .Button.with-led:active, .PanelItem.cmp-dimmer .Buttons .Button.with-led:active, .PanelItem.cmp-buttons .Frame .Button.with-led:active, .PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led:active .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led:active .Label, .PanelItem.cmp-rgb .Buttons .Button.with-led:active .Label, .PanelItem.cmp-blinds .Buttons .Button.with-led:active .Label, .PanelItem.cmp-dimmer .Buttons .Button.with-led:active .Label, .PanelItem.cmp-buttons .Frame .Button.with-led:active .Label {
  color: var(--c-primary);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led:active, .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led:active, .PanelItem.cmp-rgb .Buttons .Button.with-led:active, .PanelItem.cmp-blinds .Buttons .Button.with-led:active, .PanelItem.cmp-dimmer .Buttons .Button.with-led:active, .PanelItem.cmp-buttons .Frame .Button.with-led:active {
  background: rgba(var(--c-primary), 0.25);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led::before, .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led::before, .PanelItem.cmp-rgb .Buttons .Button.with-led::before, .PanelItem.cmp-blinds .Buttons .Button.with-led::before, .PanelItem.cmp-dimmer .Buttons .Button.with-led::before, .PanelItem.cmp-buttons .Frame .Button.with-led::before {
  position: absolute;
  content: "";
  top: -2px;
  width: 12px;
  height: 12px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led.led-red::before, .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led.led-red::before, .PanelItem.cmp-rgb .Buttons .Button.with-led.led-red::before, .PanelItem.cmp-blinds .Buttons .Button.with-led.led-red::before, .PanelItem.cmp-dimmer .Buttons .Button.with-led.led-red::before, .PanelItem.cmp-buttons .Frame .Button.with-led.led-red::before {
  background: #FF4F4F;
  box-shadow: 0 0 4px #1C1C17, 0 0 5px #FF4F4F;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led.led-green::before, .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led.led-green::before, .PanelItem.cmp-rgb .Buttons .Button.with-led.led-green::before, .PanelItem.cmp-blinds .Buttons .Button.with-led.led-green::before, .PanelItem.cmp-dimmer .Buttons .Button.with-led.led-green::before, .PanelItem.cmp-buttons .Frame .Button.with-led.led-green::before {
  background: #00ff7f;
  box-shadow: 0 0 4px #1C1C17, 0 0 5px #00ff7f;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led.led-orange::before, .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led.led-orange::before, .PanelItem.cmp-rgb .Buttons .Button.with-led.led-orange::before, .PanelItem.cmp-blinds .Buttons .Button.with-led.led-orange::before, .PanelItem.cmp-dimmer .Buttons .Button.with-led.led-orange::before, .PanelItem.cmp-buttons .Frame .Button.with-led.led-orange::before {
  background: #FFA700;
  box-shadow: 0 0 4px #1C1C17, 0 0 5px #FFA700;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.with-led.led-all::before, .PanelItem.cmp-dimmer-multi .Buttons .Button.with-led.led-all::before, .PanelItem.cmp-rgb .Buttons .Button.with-led.led-all::before, .PanelItem.cmp-blinds .Buttons .Button.with-led.led-all::before, .PanelItem.cmp-dimmer .Buttons .Button.with-led.led-all::before, .PanelItem.cmp-buttons .Frame .Button.with-led.led-all::before {
  background: linear-gradient(0deg, rgb(255, 79, 79) 25%, rgb(0, 255, 127) 100%);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button .Label, .PanelItem.cmp-rgb .Buttons .Button .Label, .PanelItem.cmp-blinds .Buttons .Button .Label, .PanelItem.cmp-dimmer .Buttons .Button .Label, .PanelItem.cmp-buttons .Frame .Button .Label {
  text-shadow: none;
  position: absolute;
  width: 100%;
  bottom: 13px;
  font-weight: normal;
  text-align: center;
  left: 0;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.no-icon, .PanelItem.cmp-dimmer-multi .Buttons .Button.no-icon, .PanelItem.cmp-rgb .Buttons .Button.no-icon, .PanelItem.cmp-blinds .Buttons .Button.no-icon, .PanelItem.cmp-dimmer .Buttons .Button.no-icon, .PanelItem.cmp-buttons .Frame .Button.no-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.no-icon:active:not(.with-led) .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.no-icon:active:not(.with-led) .Label, .PanelItem.cmp-rgb .Buttons .Button.no-icon:active:not(.with-led) .Label, .PanelItem.cmp-blinds .Buttons .Button.no-icon:active:not(.with-led) .Label, .PanelItem.cmp-dimmer .Buttons .Button.no-icon:active:not(.with-led) .Label, .PanelItem.cmp-buttons .Frame .Button.no-icon:active:not(.with-led) .Label {
  text-shadow: 0 0 10px var(--c-primary);
  color: var(--c-primary);
}
.PanelItem.cmp-button-inels3 .Frame .Extra .Button.no-icon .Label, .PanelItem.cmp-dimmer-multi .Buttons .Button.no-icon .Label, .PanelItem.cmp-rgb .Buttons .Button.no-icon .Label, .PanelItem.cmp-blinds .Buttons .Button.no-icon .Label, .PanelItem.cmp-dimmer .Buttons .Button.no-icon .Label, .PanelItem.cmp-buttons .Frame .Button.no-icon .Label {
  position: relative;
  bottom: 0 !important;
}
.PanelItem.cmp-button-inels3 .Frame .b1.Extra .Button, .PanelItem.cmp-dimmer-multi .b1.Buttons .Button, .PanelItem.cmp-rgb .b1.Buttons .Button, .PanelItem.cmp-blinds .b1.Buttons .Button, .PanelItem.cmp-dimmer .b1.Buttons .Button, .PanelItem.cmp-buttons .b1.Frame .Button {
  width: 100%;
  height: 100%;
}
.PanelItem.cmp-button-inels3 .Frame .b1.Extra .Button .Icon, .PanelItem.cmp-dimmer-multi .b1.Buttons .Button .Icon, .PanelItem.cmp-rgb .b1.Buttons .Button .Icon, .PanelItem.cmp-blinds .b1.Buttons .Button .Icon, .PanelItem.cmp-dimmer .b1.Buttons .Button .Icon, .PanelItem.cmp-buttons .b1.Frame .Button .Icon {
  font-size: 40px;
}
.PanelItem.cmp-button-inels3 .Frame .b1.Extra .Button .Icon.elko-icon, .PanelItem.cmp-dimmer-multi .b1.Buttons .Button .Icon.elko-icon, .PanelItem.cmp-rgb .b1.Buttons .Button .Icon.elko-icon, .PanelItem.cmp-blinds .b1.Buttons .Button .Icon.elko-icon, .PanelItem.cmp-dimmer .b1.Buttons .Button .Icon.elko-icon, .PanelItem.cmp-buttons .b1.Frame .Button .Icon.elko-icon {
  font-size: 60px;
}
.PanelItem.cmp-button-inels3 .Frame .b1.Extra .Button .Label, .PanelItem.cmp-dimmer-multi .b1.Buttons .Button .Label, .PanelItem.cmp-rgb .b1.Buttons .Button .Label, .PanelItem.cmp-blinds .b1.Buttons .Button .Label, .PanelItem.cmp-dimmer .b1.Buttons .Button .Label, .PanelItem.cmp-buttons .b1.Frame .Button .Label {
  font-size: 13pt;
}
.PanelItem.cmp-button-inels3 .Frame .b2.Extra .Button, .PanelItem.cmp-dimmer-multi .b2.Buttons .Button, .PanelItem.cmp-rgb .b2.Buttons .Button, .PanelItem.cmp-blinds .b2.Buttons .Button, .PanelItem.cmp-dimmer .b2.Buttons .Button, .PanelItem.cmp-buttons .b2.Frame .Button {
  width: 50%;
  height: 100%;
}
.PanelItem.cmp-button-inels3 .Frame .b2.Extra .Button .Icon, .PanelItem.cmp-dimmer-multi .b2.Buttons .Button .Icon, .PanelItem.cmp-rgb .b2.Buttons .Button .Icon, .PanelItem.cmp-blinds .b2.Buttons .Button .Icon, .PanelItem.cmp-dimmer .b2.Buttons .Button .Icon, .PanelItem.cmp-buttons .b2.Frame .Button .Icon {
  font-size: 30px;
}
.PanelItem.cmp-button-inels3 .Frame .b2.Extra .Button .Icon.elko-icon, .PanelItem.cmp-dimmer-multi .b2.Buttons .Button .Icon.elko-icon, .PanelItem.cmp-rgb .b2.Buttons .Button .Icon.elko-icon, .PanelItem.cmp-blinds .b2.Buttons .Button .Icon.elko-icon, .PanelItem.cmp-dimmer .b2.Buttons .Button .Icon.elko-icon, .PanelItem.cmp-buttons .b2.Frame .Button .Icon.elko-icon {
  font-size: 50px;
}
.PanelItem.cmp-button-inels3 .Frame .b2.Extra .Button:first-child:not(.dim-btns), .PanelItem.cmp-dimmer-multi .b2.Buttons .Button:first-child:not(.dim-btns), .PanelItem.cmp-rgb .b2.Buttons .Button:first-child:not(.dim-btns), .PanelItem.cmp-blinds .b2.Buttons .Button:first-child:not(.dim-btns), .PanelItem.cmp-dimmer .b2.Buttons .Button:first-child:not(.dim-btns), .PanelItem.cmp-buttons .b2.Frame .Button:first-child:not(.dim-btns) {
  border-right: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b2.Extra .Button .Label, .PanelItem.cmp-dimmer-multi .b2.Buttons .Button .Label, .PanelItem.cmp-rgb .b2.Buttons .Button .Label, .PanelItem.cmp-blinds .b2.Buttons .Button .Label, .PanelItem.cmp-dimmer .b2.Buttons .Button .Label, .PanelItem.cmp-buttons .b2.Frame .Button .Label {
  font-size: 13pt;
}
.PanelItem.cmp-button-inels3 .Frame .b3.Extra .Icon, .PanelItem.cmp-dimmer-multi .b3.Buttons .Icon, .PanelItem.cmp-rgb .b3.Buttons .Icon, .PanelItem.cmp-blinds .b3.Buttons .Icon, .PanelItem.cmp-dimmer .b3.Buttons .Icon, .PanelItem.cmp-buttons .b3.Frame .Icon, .PanelItem.cmp-button-inels3 .Frame .b4.Extra .Icon, .PanelItem.cmp-dimmer-multi .b4.Buttons .Icon, .PanelItem.cmp-rgb .b4.Buttons .Icon, .PanelItem.cmp-blinds .b4.Buttons .Icon, .PanelItem.cmp-dimmer .b4.Buttons .Icon, .PanelItem.cmp-buttons .b4.Frame .Icon, .PanelItem.cmp-button-inels3 .Frame .b6.Extra .Icon, .PanelItem.cmp-dimmer-multi .b6.Buttons .Icon, .PanelItem.cmp-rgb .b6.Buttons .Icon, .PanelItem.cmp-blinds .b6.Buttons .Icon, .PanelItem.cmp-dimmer .b6.Buttons .Icon, .PanelItem.cmp-buttons .b6.Frame .Icon, .PanelItem.cmp-button-inels3 .Frame .b8.Extra .Icon, .PanelItem.cmp-dimmer-multi .b8.Buttons .Icon, .PanelItem.cmp-rgb .b8.Buttons .Icon, .PanelItem.cmp-blinds .b8.Buttons .Icon, .PanelItem.cmp-dimmer .b8.Buttons .Icon, .PanelItem.cmp-buttons .b8.Frame .Icon, .PanelItem.cmp-button-inels3 .Frame .b10.Extra .Icon, .PanelItem.cmp-dimmer-multi .b10.Buttons .Icon, .PanelItem.cmp-rgb .b10.Buttons .Icon, .PanelItem.cmp-blinds .b10.Buttons .Icon, .PanelItem.cmp-dimmer .b10.Buttons .Icon, .PanelItem.cmp-buttons .b10.Frame .Icon, .PanelItem.cmp-button-inels3 .Frame .b12.Extra .Icon, .PanelItem.cmp-dimmer-multi .b12.Buttons .Icon, .PanelItem.cmp-rgb .b12.Buttons .Icon, .PanelItem.cmp-blinds .b12.Buttons .Icon, .PanelItem.cmp-dimmer .b12.Buttons .Icon, .PanelItem.cmp-buttons .b12.Frame .Icon {
  font-size: 20px;
}
.PanelItem.cmp-button-inels3 .Frame .b3.Extra .Label, .PanelItem.cmp-dimmer-multi .b3.Buttons .Label, .PanelItem.cmp-rgb .b3.Buttons .Label, .PanelItem.cmp-blinds .b3.Buttons .Label, .PanelItem.cmp-dimmer .b3.Buttons .Label, .PanelItem.cmp-buttons .b3.Frame .Label, .PanelItem.cmp-button-inels3 .Frame .b4.Extra .Label, .PanelItem.cmp-dimmer-multi .b4.Buttons .Label, .PanelItem.cmp-rgb .b4.Buttons .Label, .PanelItem.cmp-blinds .b4.Buttons .Label, .PanelItem.cmp-dimmer .b4.Buttons .Label, .PanelItem.cmp-buttons .b4.Frame .Label, .PanelItem.cmp-button-inels3 .Frame .b6.Extra .Label, .PanelItem.cmp-dimmer-multi .b6.Buttons .Label, .PanelItem.cmp-rgb .b6.Buttons .Label, .PanelItem.cmp-blinds .b6.Buttons .Label, .PanelItem.cmp-dimmer .b6.Buttons .Label, .PanelItem.cmp-buttons .b6.Frame .Label, .PanelItem.cmp-button-inels3 .Frame .b8.Extra .Label, .PanelItem.cmp-dimmer-multi .b8.Buttons .Label, .PanelItem.cmp-rgb .b8.Buttons .Label, .PanelItem.cmp-blinds .b8.Buttons .Label, .PanelItem.cmp-dimmer .b8.Buttons .Label, .PanelItem.cmp-buttons .b8.Frame .Label, .PanelItem.cmp-button-inels3 .Frame .b10.Extra .Label, .PanelItem.cmp-dimmer-multi .b10.Buttons .Label, .PanelItem.cmp-rgb .b10.Buttons .Label, .PanelItem.cmp-blinds .b10.Buttons .Label, .PanelItem.cmp-dimmer .b10.Buttons .Label, .PanelItem.cmp-buttons .b10.Frame .Label, .PanelItem.cmp-button-inels3 .Frame .b12.Extra .Label, .PanelItem.cmp-dimmer-multi .b12.Buttons .Label, .PanelItem.cmp-rgb .b12.Buttons .Label, .PanelItem.cmp-blinds .b12.Buttons .Label, .PanelItem.cmp-dimmer .b12.Buttons .Label, .PanelItem.cmp-buttons .b12.Frame .Label {
  bottom: 4px;
  font-size: 12pt;
}
.PanelItem.cmp-button-inels3 .Frame .b3.Extra .Button, .PanelItem.cmp-dimmer-multi .b3.Buttons .Button, .PanelItem.cmp-rgb .b3.Buttons .Button, .PanelItem.cmp-blinds .b3.Buttons .Button, .PanelItem.cmp-dimmer .b3.Buttons .Button, .PanelItem.cmp-buttons .b3.Frame .Button {
  width: 33%;
  height: 100%;
}
.PanelItem.cmp-button-inels3 .Frame .b3.Extra .Button:nth-child(1), .PanelItem.cmp-dimmer-multi .b3.Buttons .Button:nth-child(1), .PanelItem.cmp-rgb .b3.Buttons .Button:nth-child(1), .PanelItem.cmp-blinds .b3.Buttons .Button:nth-child(1), .PanelItem.cmp-dimmer .b3.Buttons .Button:nth-child(1), .PanelItem.cmp-buttons .b3.Frame .Button:nth-child(1), .PanelItem.cmp-button-inels3 .Frame .b3.Extra .Button:nth-child(2), .PanelItem.cmp-dimmer-multi .b3.Buttons .Button:nth-child(2), .PanelItem.cmp-rgb .b3.Buttons .Button:nth-child(2), .PanelItem.cmp-blinds .b3.Buttons .Button:nth-child(2), .PanelItem.cmp-dimmer .b3.Buttons .Button:nth-child(2), .PanelItem.cmp-buttons .b3.Frame .Button:nth-child(2) {
  border-right: 1px solid #5C5C5C;
  border-top: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b3.Extra .Button:nth-child(3), .PanelItem.cmp-dimmer-multi .b3.Buttons .Button:nth-child(3), .PanelItem.cmp-rgb .b3.Buttons .Button:nth-child(3), .PanelItem.cmp-blinds .b3.Buttons .Button:nth-child(3), .PanelItem.cmp-dimmer .b3.Buttons .Button:nth-child(3), .PanelItem.cmp-buttons .b3.Frame .Button:nth-child(3) {
  border-top: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b4.Extra .Button, .PanelItem.cmp-dimmer-multi .b4.Buttons .Button, .PanelItem.cmp-rgb .b4.Buttons .Button, .PanelItem.cmp-blinds .b4.Buttons .Button, .PanelItem.cmp-dimmer .b4.Buttons .Button, .PanelItem.cmp-buttons .b4.Frame .Button {
  width: 50%;
  height: 50%;
}
.PanelItem.cmp-button-inels3 .Frame .b4.Extra .Button:nth-child(1), .PanelItem.cmp-dimmer-multi .b4.Buttons .Button:nth-child(1), .PanelItem.cmp-rgb .b4.Buttons .Button:nth-child(1), .PanelItem.cmp-blinds .b4.Buttons .Button:nth-child(1), .PanelItem.cmp-dimmer .b4.Buttons .Button:nth-child(1), .PanelItem.cmp-buttons .b4.Frame .Button:nth-child(1) {
  border-right: 1px solid #5C5C5C;
  border-bottom: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b4.Extra .Button:nth-child(2), .PanelItem.cmp-dimmer-multi .b4.Buttons .Button:nth-child(2), .PanelItem.cmp-rgb .b4.Buttons .Button:nth-child(2), .PanelItem.cmp-blinds .b4.Buttons .Button:nth-child(2), .PanelItem.cmp-dimmer .b4.Buttons .Button:nth-child(2), .PanelItem.cmp-buttons .b4.Frame .Button:nth-child(2) {
  border-bottom: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b4.Extra .Button:nth-child(3), .PanelItem.cmp-dimmer-multi .b4.Buttons .Button:nth-child(3), .PanelItem.cmp-rgb .b4.Buttons .Button:nth-child(3), .PanelItem.cmp-blinds .b4.Buttons .Button:nth-child(3), .PanelItem.cmp-dimmer .b4.Buttons .Button:nth-child(3), .PanelItem.cmp-buttons .b4.Frame .Button:nth-child(3) {
  border-right: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b6.Extra .Button, .PanelItem.cmp-dimmer-multi .b6.Buttons .Button, .PanelItem.cmp-rgb .b6.Buttons .Button, .PanelItem.cmp-blinds .b6.Buttons .Button, .PanelItem.cmp-dimmer .b6.Buttons .Button, .PanelItem.cmp-buttons .b6.Frame .Button {
  width: 33%;
  height: 50%;
}
.PanelItem.cmp-button-inels3 .Frame .b6.Extra .Button:nth-child(1), .PanelItem.cmp-dimmer-multi .b6.Buttons .Button:nth-child(1), .PanelItem.cmp-rgb .b6.Buttons .Button:nth-child(1), .PanelItem.cmp-blinds .b6.Buttons .Button:nth-child(1), .PanelItem.cmp-dimmer .b6.Buttons .Button:nth-child(1), .PanelItem.cmp-buttons .b6.Frame .Button:nth-child(1), .PanelItem.cmp-button-inels3 .Frame .b6.Extra .Button:nth-child(2), .PanelItem.cmp-dimmer-multi .b6.Buttons .Button:nth-child(2), .PanelItem.cmp-rgb .b6.Buttons .Button:nth-child(2), .PanelItem.cmp-blinds .b6.Buttons .Button:nth-child(2), .PanelItem.cmp-dimmer .b6.Buttons .Button:nth-child(2), .PanelItem.cmp-buttons .b6.Frame .Button:nth-child(2) {
  border-right: 1px solid #5C5C5C;
  border-bottom: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b6.Extra .Button:nth-child(3), .PanelItem.cmp-dimmer-multi .b6.Buttons .Button:nth-child(3), .PanelItem.cmp-rgb .b6.Buttons .Button:nth-child(3), .PanelItem.cmp-blinds .b6.Buttons .Button:nth-child(3), .PanelItem.cmp-dimmer .b6.Buttons .Button:nth-child(3), .PanelItem.cmp-buttons .b6.Frame .Button:nth-child(3) {
  border-bottom: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b6.Extra .Button:nth-child(4), .PanelItem.cmp-dimmer-multi .b6.Buttons .Button:nth-child(4), .PanelItem.cmp-rgb .b6.Buttons .Button:nth-child(4), .PanelItem.cmp-blinds .b6.Buttons .Button:nth-child(4), .PanelItem.cmp-dimmer .b6.Buttons .Button:nth-child(4), .PanelItem.cmp-buttons .b6.Frame .Button:nth-child(4), .PanelItem.cmp-button-inels3 .Frame .b6.Extra .Button:nth-child(5), .PanelItem.cmp-dimmer-multi .b6.Buttons .Button:nth-child(5), .PanelItem.cmp-rgb .b6.Buttons .Button:nth-child(5), .PanelItem.cmp-blinds .b6.Buttons .Button:nth-child(5), .PanelItem.cmp-dimmer .b6.Buttons .Button:nth-child(5), .PanelItem.cmp-buttons .b6.Frame .Button:nth-child(5) {
  border-right: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b8.Extra .Button, .PanelItem.cmp-dimmer-multi .b8.Buttons .Button, .PanelItem.cmp-rgb .b8.Buttons .Button, .PanelItem.cmp-blinds .b8.Buttons .Button, .PanelItem.cmp-dimmer .b8.Buttons .Button, .PanelItem.cmp-buttons .b8.Frame .Button {
  width: 25%;
  height: 50%;
}
.PanelItem.cmp-button-inels3 .Frame .b8.Extra .Button:nth-child(1), .PanelItem.cmp-dimmer-multi .b8.Buttons .Button:nth-child(1), .PanelItem.cmp-rgb .b8.Buttons .Button:nth-child(1), .PanelItem.cmp-blinds .b8.Buttons .Button:nth-child(1), .PanelItem.cmp-dimmer .b8.Buttons .Button:nth-child(1), .PanelItem.cmp-buttons .b8.Frame .Button:nth-child(1), .PanelItem.cmp-button-inels3 .Frame .b8.Extra .Button:nth-child(2), .PanelItem.cmp-dimmer-multi .b8.Buttons .Button:nth-child(2), .PanelItem.cmp-rgb .b8.Buttons .Button:nth-child(2), .PanelItem.cmp-blinds .b8.Buttons .Button:nth-child(2), .PanelItem.cmp-dimmer .b8.Buttons .Button:nth-child(2), .PanelItem.cmp-buttons .b8.Frame .Button:nth-child(2), .PanelItem.cmp-button-inels3 .Frame .b8.Extra .Button:nth-child(3), .PanelItem.cmp-dimmer-multi .b8.Buttons .Button:nth-child(3), .PanelItem.cmp-rgb .b8.Buttons .Button:nth-child(3), .PanelItem.cmp-blinds .b8.Buttons .Button:nth-child(3), .PanelItem.cmp-dimmer .b8.Buttons .Button:nth-child(3), .PanelItem.cmp-buttons .b8.Frame .Button:nth-child(3) {
  border-right: 1px solid #5C5C5C;
  border-bottom: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b8.Extra .Button:nth-child(4), .PanelItem.cmp-dimmer-multi .b8.Buttons .Button:nth-child(4), .PanelItem.cmp-rgb .b8.Buttons .Button:nth-child(4), .PanelItem.cmp-blinds .b8.Buttons .Button:nth-child(4), .PanelItem.cmp-dimmer .b8.Buttons .Button:nth-child(4), .PanelItem.cmp-buttons .b8.Frame .Button:nth-child(4) {
  border-bottom: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b8.Extra .Button:nth-child(5), .PanelItem.cmp-dimmer-multi .b8.Buttons .Button:nth-child(5), .PanelItem.cmp-rgb .b8.Buttons .Button:nth-child(5), .PanelItem.cmp-blinds .b8.Buttons .Button:nth-child(5), .PanelItem.cmp-dimmer .b8.Buttons .Button:nth-child(5), .PanelItem.cmp-buttons .b8.Frame .Button:nth-child(5), .PanelItem.cmp-button-inels3 .Frame .b8.Extra .Button:nth-child(6), .PanelItem.cmp-dimmer-multi .b8.Buttons .Button:nth-child(6), .PanelItem.cmp-rgb .b8.Buttons .Button:nth-child(6), .PanelItem.cmp-blinds .b8.Buttons .Button:nth-child(6), .PanelItem.cmp-dimmer .b8.Buttons .Button:nth-child(6), .PanelItem.cmp-buttons .b8.Frame .Button:nth-child(6), .PanelItem.cmp-button-inels3 .Frame .b8.Extra .Button:nth-child(7), .PanelItem.cmp-dimmer-multi .b8.Buttons .Button:nth-child(7), .PanelItem.cmp-rgb .b8.Buttons .Button:nth-child(7), .PanelItem.cmp-blinds .b8.Buttons .Button:nth-child(7), .PanelItem.cmp-dimmer .b8.Buttons .Button:nth-child(7), .PanelItem.cmp-buttons .b8.Frame .Button:nth-child(7) {
  border-right: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b10.Extra .Button, .PanelItem.cmp-dimmer-multi .b10.Buttons .Button, .PanelItem.cmp-rgb .b10.Buttons .Button, .PanelItem.cmp-blinds .b10.Buttons .Button, .PanelItem.cmp-dimmer .b10.Buttons .Button, .PanelItem.cmp-buttons .b10.Frame .Button {
  width: 20%;
  height: 50%;
}
.PanelItem.cmp-button-inels3 .Frame .b10.Extra .Button:nth-child(1), .PanelItem.cmp-dimmer-multi .b10.Buttons .Button:nth-child(1), .PanelItem.cmp-rgb .b10.Buttons .Button:nth-child(1), .PanelItem.cmp-blinds .b10.Buttons .Button:nth-child(1), .PanelItem.cmp-dimmer .b10.Buttons .Button:nth-child(1), .PanelItem.cmp-buttons .b10.Frame .Button:nth-child(1), .PanelItem.cmp-button-inels3 .Frame .b10.Extra .Button:nth-child(2), .PanelItem.cmp-dimmer-multi .b10.Buttons .Button:nth-child(2), .PanelItem.cmp-rgb .b10.Buttons .Button:nth-child(2), .PanelItem.cmp-blinds .b10.Buttons .Button:nth-child(2), .PanelItem.cmp-dimmer .b10.Buttons .Button:nth-child(2), .PanelItem.cmp-buttons .b10.Frame .Button:nth-child(2), .PanelItem.cmp-button-inels3 .Frame .b10.Extra .Button:nth-child(3), .PanelItem.cmp-dimmer-multi .b10.Buttons .Button:nth-child(3), .PanelItem.cmp-rgb .b10.Buttons .Button:nth-child(3), .PanelItem.cmp-blinds .b10.Buttons .Button:nth-child(3), .PanelItem.cmp-dimmer .b10.Buttons .Button:nth-child(3), .PanelItem.cmp-buttons .b10.Frame .Button:nth-child(3), .PanelItem.cmp-button-inels3 .Frame .b10.Extra .Button:nth-child(4), .PanelItem.cmp-dimmer-multi .b10.Buttons .Button:nth-child(4), .PanelItem.cmp-rgb .b10.Buttons .Button:nth-child(4), .PanelItem.cmp-blinds .b10.Buttons .Button:nth-child(4), .PanelItem.cmp-dimmer .b10.Buttons .Button:nth-child(4), .PanelItem.cmp-buttons .b10.Frame .Button:nth-child(4) {
  border-right: 1px solid #5C5C5C;
  border-bottom: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b10.Extra .Button:nth-child(5), .PanelItem.cmp-dimmer-multi .b10.Buttons .Button:nth-child(5), .PanelItem.cmp-rgb .b10.Buttons .Button:nth-child(5), .PanelItem.cmp-blinds .b10.Buttons .Button:nth-child(5), .PanelItem.cmp-dimmer .b10.Buttons .Button:nth-child(5), .PanelItem.cmp-buttons .b10.Frame .Button:nth-child(5) {
  border-bottom: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b10.Extra .Button:nth-child(6), .PanelItem.cmp-dimmer-multi .b10.Buttons .Button:nth-child(6), .PanelItem.cmp-rgb .b10.Buttons .Button:nth-child(6), .PanelItem.cmp-blinds .b10.Buttons .Button:nth-child(6), .PanelItem.cmp-dimmer .b10.Buttons .Button:nth-child(6), .PanelItem.cmp-buttons .b10.Frame .Button:nth-child(6), .PanelItem.cmp-button-inels3 .Frame .b10.Extra .Button:nth-child(7), .PanelItem.cmp-dimmer-multi .b10.Buttons .Button:nth-child(7), .PanelItem.cmp-rgb .b10.Buttons .Button:nth-child(7), .PanelItem.cmp-blinds .b10.Buttons .Button:nth-child(7), .PanelItem.cmp-dimmer .b10.Buttons .Button:nth-child(7), .PanelItem.cmp-buttons .b10.Frame .Button:nth-child(7), .PanelItem.cmp-button-inels3 .Frame .b10.Extra .Button:nth-child(8), .PanelItem.cmp-dimmer-multi .b10.Buttons .Button:nth-child(8), .PanelItem.cmp-rgb .b10.Buttons .Button:nth-child(8), .PanelItem.cmp-blinds .b10.Buttons .Button:nth-child(8), .PanelItem.cmp-dimmer .b10.Buttons .Button:nth-child(8), .PanelItem.cmp-buttons .b10.Frame .Button:nth-child(8), .PanelItem.cmp-button-inels3 .Frame .b10.Extra .Button:nth-child(9), .PanelItem.cmp-dimmer-multi .b10.Buttons .Button:nth-child(9), .PanelItem.cmp-rgb .b10.Buttons .Button:nth-child(9), .PanelItem.cmp-blinds .b10.Buttons .Button:nth-child(9), .PanelItem.cmp-dimmer .b10.Buttons .Button:nth-child(9), .PanelItem.cmp-buttons .b10.Frame .Button:nth-child(9) {
  border-right: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b12.Extra .Button, .PanelItem.cmp-dimmer-multi .b12.Buttons .Button, .PanelItem.cmp-rgb .b12.Buttons .Button, .PanelItem.cmp-blinds .b12.Buttons .Button, .PanelItem.cmp-dimmer .b12.Buttons .Button, .PanelItem.cmp-buttons .b12.Frame .Button {
  width: 16.5%;
  height: 50%;
}
.PanelItem.cmp-button-inels3 .Frame .b12.Extra .Button:nth-child(1), .PanelItem.cmp-dimmer-multi .b12.Buttons .Button:nth-child(1), .PanelItem.cmp-rgb .b12.Buttons .Button:nth-child(1), .PanelItem.cmp-blinds .b12.Buttons .Button:nth-child(1), .PanelItem.cmp-dimmer .b12.Buttons .Button:nth-child(1), .PanelItem.cmp-buttons .b12.Frame .Button:nth-child(1), .PanelItem.cmp-button-inels3 .Frame .b12.Extra .Button:nth-child(2), .PanelItem.cmp-dimmer-multi .b12.Buttons .Button:nth-child(2), .PanelItem.cmp-rgb .b12.Buttons .Button:nth-child(2), .PanelItem.cmp-blinds .b12.Buttons .Button:nth-child(2), .PanelItem.cmp-dimmer .b12.Buttons .Button:nth-child(2), .PanelItem.cmp-buttons .b12.Frame .Button:nth-child(2), .PanelItem.cmp-button-inels3 .Frame .b12.Extra .Button:nth-child(3), .PanelItem.cmp-dimmer-multi .b12.Buttons .Button:nth-child(3), .PanelItem.cmp-rgb .b12.Buttons .Button:nth-child(3), .PanelItem.cmp-blinds .b12.Buttons .Button:nth-child(3), .PanelItem.cmp-dimmer .b12.Buttons .Button:nth-child(3), .PanelItem.cmp-buttons .b12.Frame .Button:nth-child(3), .PanelItem.cmp-button-inels3 .Frame .b12.Extra .Button:nth-child(4), .PanelItem.cmp-dimmer-multi .b12.Buttons .Button:nth-child(4), .PanelItem.cmp-rgb .b12.Buttons .Button:nth-child(4), .PanelItem.cmp-blinds .b12.Buttons .Button:nth-child(4), .PanelItem.cmp-dimmer .b12.Buttons .Button:nth-child(4), .PanelItem.cmp-buttons .b12.Frame .Button:nth-child(4), .PanelItem.cmp-button-inels3 .Frame .b12.Extra .Button:nth-child(5), .PanelItem.cmp-dimmer-multi .b12.Buttons .Button:nth-child(5), .PanelItem.cmp-rgb .b12.Buttons .Button:nth-child(5), .PanelItem.cmp-blinds .b12.Buttons .Button:nth-child(5), .PanelItem.cmp-dimmer .b12.Buttons .Button:nth-child(5), .PanelItem.cmp-buttons .b12.Frame .Button:nth-child(5) {
  border-right: 1px solid #5C5C5C;
  border-bottom: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b12.Extra .Button:nth-child(6), .PanelItem.cmp-dimmer-multi .b12.Buttons .Button:nth-child(6), .PanelItem.cmp-rgb .b12.Buttons .Button:nth-child(6), .PanelItem.cmp-blinds .b12.Buttons .Button:nth-child(6), .PanelItem.cmp-dimmer .b12.Buttons .Button:nth-child(6), .PanelItem.cmp-buttons .b12.Frame .Button:nth-child(6) {
  border-bottom: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .b12.Extra .Button:nth-child(7), .PanelItem.cmp-dimmer-multi .b12.Buttons .Button:nth-child(7), .PanelItem.cmp-rgb .b12.Buttons .Button:nth-child(7), .PanelItem.cmp-blinds .b12.Buttons .Button:nth-child(7), .PanelItem.cmp-dimmer .b12.Buttons .Button:nth-child(7), .PanelItem.cmp-buttons .b12.Frame .Button:nth-child(7), .PanelItem.cmp-button-inels3 .Frame .b12.Extra .Button:nth-child(8), .PanelItem.cmp-dimmer-multi .b12.Buttons .Button:nth-child(8), .PanelItem.cmp-rgb .b12.Buttons .Button:nth-child(8), .PanelItem.cmp-blinds .b12.Buttons .Button:nth-child(8), .PanelItem.cmp-dimmer .b12.Buttons .Button:nth-child(8), .PanelItem.cmp-buttons .b12.Frame .Button:nth-child(8), .PanelItem.cmp-button-inels3 .Frame .b12.Extra .Button:nth-child(9), .PanelItem.cmp-dimmer-multi .b12.Buttons .Button:nth-child(9), .PanelItem.cmp-rgb .b12.Buttons .Button:nth-child(9), .PanelItem.cmp-blinds .b12.Buttons .Button:nth-child(9), .PanelItem.cmp-dimmer .b12.Buttons .Button:nth-child(9), .PanelItem.cmp-buttons .b12.Frame .Button:nth-child(9), .PanelItem.cmp-button-inels3 .Frame .b12.Extra .Button:nth-child(10), .PanelItem.cmp-dimmer-multi .b12.Buttons .Button:nth-child(10), .PanelItem.cmp-rgb .b12.Buttons .Button:nth-child(10), .PanelItem.cmp-blinds .b12.Buttons .Button:nth-child(10), .PanelItem.cmp-dimmer .b12.Buttons .Button:nth-child(10), .PanelItem.cmp-buttons .b12.Frame .Button:nth-child(10), .PanelItem.cmp-button-inels3 .Frame .b12.Extra .Button:nth-child(11), .PanelItem.cmp-dimmer-multi .b12.Buttons .Button:nth-child(11), .PanelItem.cmp-rgb .b12.Buttons .Button:nth-child(11), .PanelItem.cmp-blinds .b12.Buttons .Button:nth-child(11), .PanelItem.cmp-dimmer .b12.Buttons .Button:nth-child(11), .PanelItem.cmp-buttons .b12.Frame .Button:nth-child(11) {
  border-right: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.b12.Extra .Button, .PanelItem.cmp-dimmer-multi .Frame-quad-led.b12.Buttons .Button, .PanelItem.cmp-rgb .Frame-quad-led.b12.Buttons .Button, .PanelItem.cmp-blinds .Frame-quad-led.b12.Buttons .Button, .PanelItem.cmp-dimmer .Frame-quad-led.b12.Buttons .Button, .PanelItem.cmp-buttons .Frame-quad-led.b12.Frame .Button {
  border-right: 1px solid #5C5C5C;
  border-bottom: 1px solid #5C5C5C;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.b12.Extra .Button:nth-child(1), .PanelItem.cmp-dimmer-multi .Frame-quad-led.b12.Buttons .Button:nth-child(1), .PanelItem.cmp-rgb .Frame-quad-led.b12.Buttons .Button:nth-child(1), .PanelItem.cmp-blinds .Frame-quad-led.b12.Buttons .Button:nth-child(1), .PanelItem.cmp-dimmer .Frame-quad-led.b12.Buttons .Button:nth-child(1), .PanelItem.cmp-buttons .Frame-quad-led.b12.Frame .Button:nth-child(1), .PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.b12.Extra .Button:nth-child(4), .PanelItem.cmp-dimmer-multi .Frame-quad-led.b12.Buttons .Button:nth-child(4), .PanelItem.cmp-rgb .Frame-quad-led.b12.Buttons .Button:nth-child(4), .PanelItem.cmp-blinds .Frame-quad-led.b12.Buttons .Button:nth-child(4), .PanelItem.cmp-dimmer .Frame-quad-led.b12.Buttons .Button:nth-child(4), .PanelItem.cmp-buttons .Frame-quad-led.b12.Frame .Button:nth-child(4), .PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.b12.Extra .Button:nth-child(7), .PanelItem.cmp-dimmer-multi .Frame-quad-led.b12.Buttons .Button:nth-child(7), .PanelItem.cmp-rgb .Frame-quad-led.b12.Buttons .Button:nth-child(7), .PanelItem.cmp-blinds .Frame-quad-led.b12.Buttons .Button:nth-child(7), .PanelItem.cmp-dimmer .Frame-quad-led.b12.Buttons .Button:nth-child(7), .PanelItem.cmp-buttons .Frame-quad-led.b12.Frame .Button:nth-child(7), .PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.b12.Extra .Button:nth-child(10), .PanelItem.cmp-dimmer-multi .Frame-quad-led.b12.Buttons .Button:nth-child(10), .PanelItem.cmp-rgb .Frame-quad-led.b12.Buttons .Button:nth-child(10), .PanelItem.cmp-blinds .Frame-quad-led.b12.Buttons .Button:nth-child(10), .PanelItem.cmp-dimmer .Frame-quad-led.b12.Buttons .Button:nth-child(10), .PanelItem.cmp-buttons .Frame-quad-led.b12.Frame .Button:nth-child(10) {
  border-radius: 0 0 0 17%;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.b12.Extra .Button:nth-child(3), .PanelItem.cmp-dimmer-multi .Frame-quad-led.b12.Buttons .Button:nth-child(3), .PanelItem.cmp-rgb .Frame-quad-led.b12.Buttons .Button:nth-child(3), .PanelItem.cmp-blinds .Frame-quad-led.b12.Buttons .Button:nth-child(3), .PanelItem.cmp-dimmer .Frame-quad-led.b12.Buttons .Button:nth-child(3), .PanelItem.cmp-buttons .Frame-quad-led.b12.Frame .Button:nth-child(3), .PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.b12.Extra .Button:nth-child(6), .PanelItem.cmp-dimmer-multi .Frame-quad-led.b12.Buttons .Button:nth-child(6), .PanelItem.cmp-rgb .Frame-quad-led.b12.Buttons .Button:nth-child(6), .PanelItem.cmp-blinds .Frame-quad-led.b12.Buttons .Button:nth-child(6), .PanelItem.cmp-dimmer .Frame-quad-led.b12.Buttons .Button:nth-child(6), .PanelItem.cmp-buttons .Frame-quad-led.b12.Frame .Button:nth-child(6), .PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.b12.Extra .Button:nth-child(9), .PanelItem.cmp-dimmer-multi .Frame-quad-led.b12.Buttons .Button:nth-child(9), .PanelItem.cmp-rgb .Frame-quad-led.b12.Buttons .Button:nth-child(9), .PanelItem.cmp-blinds .Frame-quad-led.b12.Buttons .Button:nth-child(9), .PanelItem.cmp-dimmer .Frame-quad-led.b12.Buttons .Button:nth-child(9), .PanelItem.cmp-buttons .Frame-quad-led.b12.Frame .Button:nth-child(9), .PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.b12.Extra .Button:nth-child(12), .PanelItem.cmp-dimmer-multi .Frame-quad-led.b12.Buttons .Button:nth-child(12), .PanelItem.cmp-rgb .Frame-quad-led.b12.Buttons .Button:nth-child(12), .PanelItem.cmp-blinds .Frame-quad-led.b12.Buttons .Button:nth-child(12), .PanelItem.cmp-dimmer .Frame-quad-led.b12.Buttons .Button:nth-child(12), .PanelItem.cmp-buttons .Frame-quad-led.b12.Frame .Button:nth-child(12) {
  border-radius: 0 0 17% 0;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.b12.Extra .Button.n7, .PanelItem.cmp-dimmer-multi .Frame-quad-led.b12.Buttons .Button.n7, .PanelItem.cmp-rgb .Frame-quad-led.b12.Buttons .Button.n7, .PanelItem.cmp-blinds .Frame-quad-led.b12.Buttons .Button.n7, .PanelItem.cmp-dimmer .Frame-quad-led.b12.Buttons .Button.n7, .PanelItem.cmp-buttons .Frame-quad-led.b12.Frame .Button.n7, .PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.b12.Extra .Button.n10, .PanelItem.cmp-dimmer-multi .Frame-quad-led.b12.Buttons .Button.n10, .PanelItem.cmp-rgb .Frame-quad-led.b12.Buttons .Button.n10, .PanelItem.cmp-blinds .Frame-quad-led.b12.Buttons .Button.n10, .PanelItem.cmp-dimmer .Frame-quad-led.b12.Buttons .Button.n10, .PanelItem.cmp-buttons .Frame-quad-led.b12.Frame .Button.n10 {
  margin-left: 0.2rem;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.b12.Extra .Button:nth-last-child(-n+10), .PanelItem.cmp-dimmer-multi .Frame-quad-led.b12.Buttons .Button:nth-last-child(-n+10), .PanelItem.cmp-rgb .Frame-quad-led.b12.Buttons .Button:nth-last-child(-n+10), .PanelItem.cmp-blinds .Frame-quad-led.b12.Buttons .Button:nth-last-child(-n+10), .PanelItem.cmp-dimmer .Frame-quad-led.b12.Buttons .Button:nth-last-child(-n+10), .PanelItem.cmp-buttons .Frame-quad-led.b12.Frame .Button:nth-last-child(-n+10) {
  margin-top: 0.2rem;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.Extra .led, .PanelItem.cmp-dimmer-multi .Frame-quad-led.Buttons .led, .PanelItem.cmp-rgb .Frame-quad-led.Buttons .led, .PanelItem.cmp-blinds .Frame-quad-led.Buttons .led, .PanelItem.cmp-dimmer .Frame-quad-led.Buttons .led, .PanelItem.cmp-buttons .Frame-quad-led.Frame .led {
  position: absolute;
  content: "";
  top: -2px;
  width: 12px;
  height: 12px;
  left: 15px;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.Extra .led.n2, .PanelItem.cmp-dimmer-multi .Frame-quad-led.Buttons .led.n2, .PanelItem.cmp-rgb .Frame-quad-led.Buttons .led.n2, .PanelItem.cmp-blinds .Frame-quad-led.Buttons .led.n2, .PanelItem.cmp-dimmer .Frame-quad-led.Buttons .led.n2, .PanelItem.cmp-buttons .Frame-quad-led.Frame .led.n2 {
  left: 42px;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.Extra .led.n3, .PanelItem.cmp-dimmer-multi .Frame-quad-led.Buttons .led.n3, .PanelItem.cmp-rgb .Frame-quad-led.Buttons .led.n3, .PanelItem.cmp-blinds .Frame-quad-led.Buttons .led.n3, .PanelItem.cmp-dimmer .Frame-quad-led.Buttons .led.n3, .PanelItem.cmp-buttons .Frame-quad-led.Frame .led.n3 {
  left: 69px;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.Extra .led.n4, .PanelItem.cmp-dimmer-multi .Frame-quad-led.Buttons .led.n4, .PanelItem.cmp-rgb .Frame-quad-led.Buttons .led.n4, .PanelItem.cmp-blinds .Frame-quad-led.Buttons .led.n4, .PanelItem.cmp-dimmer .Frame-quad-led.Buttons .led.n4, .PanelItem.cmp-buttons .Frame-quad-led.Frame .led.n4 {
  left: 96px;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.Extra .led.red, .PanelItem.cmp-dimmer-multi .Frame-quad-led.Buttons .led.red, .PanelItem.cmp-rgb .Frame-quad-led.Buttons .led.red, .PanelItem.cmp-blinds .Frame-quad-led.Buttons .led.red, .PanelItem.cmp-dimmer .Frame-quad-led.Buttons .led.red, .PanelItem.cmp-buttons .Frame-quad-led.Frame .led.red {
  background: #FF4F4F;
  box-shadow: 0 0 4px #1C1C17, 0 0 5px #FF4F4F;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.Extra .led.green, .PanelItem.cmp-dimmer-multi .Frame-quad-led.Buttons .led.green, .PanelItem.cmp-rgb .Frame-quad-led.Buttons .led.green, .PanelItem.cmp-blinds .Frame-quad-led.Buttons .led.green, .PanelItem.cmp-dimmer .Frame-quad-led.Buttons .led.green, .PanelItem.cmp-buttons .Frame-quad-led.Frame .led.green {
  background: #00ff7f;
  box-shadow: 0 0 4px #1C1C17, 0 0 5px #00ff7f;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.Extra .led.blue, .PanelItem.cmp-dimmer-multi .Frame-quad-led.Buttons .led.blue, .PanelItem.cmp-rgb .Frame-quad-led.Buttons .led.blue, .PanelItem.cmp-blinds .Frame-quad-led.Buttons .led.blue, .PanelItem.cmp-dimmer .Frame-quad-led.Buttons .led.blue, .PanelItem.cmp-buttons .Frame-quad-led.Frame .led.blue {
  background: var(--c-primary);
  box-shadow: 0 0 4px #1C1C17, 0 0 5px var(--c-primary);
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.Extra .led.yellow, .PanelItem.cmp-dimmer-multi .Frame-quad-led.Buttons .led.yellow, .PanelItem.cmp-rgb .Frame-quad-led.Buttons .led.yellow, .PanelItem.cmp-blinds .Frame-quad-led.Buttons .led.yellow, .PanelItem.cmp-dimmer .Frame-quad-led.Buttons .led.yellow, .PanelItem.cmp-buttons .Frame-quad-led.Frame .led.yellow {
  background: #ffff66;
  box-shadow: 0 0 4px #1C1C17, 0 0 5px #ffff66;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.Extra .led.cyan, .PanelItem.cmp-dimmer-multi .Frame-quad-led.Buttons .led.cyan, .PanelItem.cmp-rgb .Frame-quad-led.Buttons .led.cyan, .PanelItem.cmp-blinds .Frame-quad-led.Buttons .led.cyan, .PanelItem.cmp-dimmer .Frame-quad-led.Buttons .led.cyan, .PanelItem.cmp-buttons .Frame-quad-led.Frame .led.cyan {
  background: #81d8d0;
  box-shadow: 0 0 4px #1C1C17, 0 0 5px #81d8d0;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.Extra .led.purple, .PanelItem.cmp-dimmer-multi .Frame-quad-led.Buttons .led.purple, .PanelItem.cmp-rgb .Frame-quad-led.Buttons .led.purple, .PanelItem.cmp-blinds .Frame-quad-led.Buttons .led.purple, .PanelItem.cmp-dimmer .Frame-quad-led.Buttons .led.purple, .PanelItem.cmp-buttons .Frame-quad-led.Frame .led.purple {
  background: #8a2be2;
  box-shadow: 0 0 4px #1C1C17, 0 0 5px #8a2be2;
}
.PanelItem.cmp-button-inels3 .Frame .Frame-quad-led.Extra .led.white, .PanelItem.cmp-dimmer-multi .Frame-quad-led.Buttons .led.white, .PanelItem.cmp-rgb .Frame-quad-led.Buttons .led.white, .PanelItem.cmp-blinds .Frame-quad-led.Buttons .led.white, .PanelItem.cmp-dimmer .Frame-quad-led.Buttons .led.white, .PanelItem.cmp-buttons .Frame-quad-led.Frame .led.white {
  background: #ffffff;
  box-shadow: 0 0 4px #1C1C17, 0 0 5px #ffffff;
}

.PanelItem.cmp-relay a {
  color: #cfcece;
  text-decoration: none;
}
.PanelItem.cmp-relay.manual-only .Automat {
  display: none;
}
.PanelItem.cmp-relay.manual-only .Buttons {
  flex-grow: 1;
}
.PanelItem.cmp-relay.manual-only .Buttons a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.PanelItem.cmp-relay .cmp-relay__feedbackText {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  padding-left: 0.617rem;
  padding-right: 0.617rem;
  top: 38.2px;
  padding-top: 0.617rem;
  white-space: break-spaces;
  font-size: 90%;
}
.PanelItem.cmp-relay.l-split.wide .cmp-relay__feedbackText {
  right: 60%;
}
.PanelItem.cmp-relay--awaitingFeedback .cmp-relay__feedbackText {
  display: block;
}
.PanelItem.cmp-relay--awaitingFeedback .Frame {
  opacity: 0.3;
  pointer-events: none;
  filter: blur(2px);
}
.PanelItem.cmp-relay .Frame {
  display: flex;
  flex-direction: column;
  padding: 0.381rem;
}
.PanelItem.cmp-relay .Frame.l-icon {
  justify-content: space-between;
}
.PanelItem.cmp-relay .Frame.l-icon .Icon {
  height: 100px;
  line-height: 100px;
}
.PanelItem.cmp-relay .Frame.l-icon.no-runtime {
  justify-content: center;
}
.PanelItem.cmp-relay .Frame.l-icon.no-runtime .Icon {
  height: 120px;
  line-height: 120px;
}
.PanelItem.cmp-relay .Automat {
  display: block;
  text-align: left;
  margin-bottom: 0.381rem;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #5C5C5C;
  color: #cfcece;
}
.PanelItem.cmp-relay .Automat i::before {
  content: "\e80e";
}
.PanelItem.cmp-relay .Automat.active {
  text-shadow: 0 0 10px var(--c-primary);
  color: var(--c-primary);
}
.PanelItem.cmp-relay .Automat.active i::before {
  content: "\e80d";
}
.PanelItem.cmp-relay .RunTime {
  margin-top: 0.381rem;
  font-size: 12pt;
}
.PanelItem.cmp-relay .Buttons {
  display: flex;
  flex-direction: row;
  font-size: 16pt;
  flex-grow: 1;
}
.PanelItem.cmp-relay .Buttons a {
  width: 50%;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #cfcece;
}
.PanelItem.cmp-relay .Buttons a.x-on {
  color: #cfcece;
}
.PanelItem.cmp-relay .Buttons a.x-on:active:not(.with-led), .PanelItem.cmp-relay .Buttons a.x-on.active:not(.with-led) {
  text-shadow: 0 0 10px var(--c-primary);
  color: var(--c-primary);
}
.PanelItem.cmp-relay .Buttons a.x-on:hover:not(.disabled) {
  background: rgba(var(--c-primary), 0.25);
}
.PanelItem.cmp-relay .Buttons a.x-on:hover:not(.disabled), .PanelItem.cmp-relay .Buttons a.x-on:hover:not(.disabled) .Label {
  color: var(--c-primary);
}
.PanelItem.cmp-relay .Buttons a.x-on:active, .PanelItem.cmp-relay .Buttons a.x-on:active .Label {
  color: var(--c-primary);
}
.PanelItem.cmp-relay .Buttons a.x-on:active {
  background: rgba(var(--c-primary), 0.25);
}
.PanelItem.cmp-relay .Buttons a.x-off {
  border-right: 1px solid #5C5C5C;
  color: #cfcece;
}
.PanelItem.cmp-relay .Buttons a.x-off:active:not(.with-led), .PanelItem.cmp-relay .Buttons a.x-off.active:not(.with-led) {
  text-shadow: 0 0 10px #eee;
  color: #eee;
}
.PanelItem.cmp-relay .Buttons a.x-off:hover:not(.disabled) {
  background: rgba(238, 238, 238, 0.25);
}
.PanelItem.cmp-relay .Buttons a.x-off:hover:not(.disabled), .PanelItem.cmp-relay .Buttons a.x-off:hover:not(.disabled) .Label {
  color: #eee;
}
.PanelItem.cmp-relay .Buttons a.x-off:active, .PanelItem.cmp-relay .Buttons a.x-off:active .Label {
  color: #eee;
}
.PanelItem.cmp-relay .Buttons a.x-off:active {
  background: rgba(238, 238, 238, 0.25);
}
.PanelItem.cmp-relay.l-split.narrow .Frame, .PanelItem.cmp-relay.l-split-wide.narrow .Frame {
  flex-direction: row;
  align-items: stretch;
}
.PanelItem.cmp-relay.l-split.narrow .Frame.l-icon, .PanelItem.cmp-relay.l-split-wide.narrow .Frame.l-icon {
  align-items: center;
  justify-content: center;
}
.PanelItem.cmp-relay.l-split.narrow .Automat, .PanelItem.cmp-relay.l-split-wide.narrow .Automat {
  font-size: 13pt;
  margin-bottom: 0;
  border-bottom: 0;
  display: flex;
  align-items: center;
}
.PanelItem.cmp-relay.l-split.narrow .Buttons, .PanelItem.cmp-relay.l-split-wide.narrow .Buttons {
  padding-left: 0.381rem;
  flex-grow: 1;
  font-size: 13pt;
}
.PanelItem.cmp-relay.l-split.narrow.manual-only .Buttons, .PanelItem.cmp-relay.l-split-wide.narrow.manual-only .Buttons {
  padding-left: 0;
}
.PanelItem.cmp-relay.l-split.narrow .RunTime, .PanelItem.cmp-relay.l-split-wide.narrow .RunTime {
  display: none;
}
.PanelItem.cmp-relay.l-split.narrow.with-slider .Frame, .PanelItem.cmp-relay.l-split-wide.narrow.with-slider .Frame {
  flex-direction: column;
  align-items: stretch;
}
.PanelItem.cmp-relay.l-split.narrow.with-slider .SliderLabels, .PanelItem.cmp-relay.l-split-wide.narrow.with-slider .SliderLabels {
  margin: 10px 10px 10px 10px;
  font-size: 12pt;
}
.PanelItem.cmp-relay .SliderBox {
  height: 28px;
}
.PanelItem.cmp-relay .SliderLabels {
  margin: 20px 10px 10px 10px;
  display: flex;
  justify-content: space-between;
  font-size: 13pt;
}
.PanelItem.cmp-relay .SliderLabels span {
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.PanelItem.cmp-relay .SliderLabels span:active, .PanelItem.cmp-relay .SliderLabels span.pushed {
  top: 1px;
}
.PanelItem.cmp-relay .SliderLabels span:hover {
  text-shadow: 0 0 10px var(--c-primary);
  color: var(--c-primary);
}
.PanelItem.cmp-relay.with-slider .RunTime {
  position: absolute;
  bottom: 0.381rem;
  width: 100%;
  text-align: center;
}

.PanelItem.cmp-indicator-icon .Disarm {
  position: absolute;
  left: 8%;
  top: 8%;
  opacity: 0.6;
}
.PanelItem.cmp-indicator-icon .Disarm:hover {
  color: white;
  text-shadow: 0 1px 2px black;
}
.PanelItem.cmp-indicator-icon .Disarm .Icon-default.active {
  text-shadow: 0 0 10px #ef4135;
  color: #ef4135;
}

.PanelItem.cmp-variable .Frame {
  display: flex;
  align-items: center;
  justify-content: center;
}
.PanelItem.cmp-variable .vu {
  font-size: 24pt;
  font-weight: bold;
}
.PanelItem.cmp-variable .v {
  color: var(--c-primary);
}
.PanelItem.cmp-variable .u {
  color: #cfcece;
}
.PanelItem.cmp-variable.l-simple .vu, .PanelItem.cmp-variable.l-split.wide .vu {
  padding-bottom: 1rem;
}
.PanelItem.cmp-variable.narrow.l-split .vu {
  text-align: center;
}
.PanelItem.cmp-variable.narrow.l-split .vu .u, .PanelItem.cmp-variable.narrow.l-split .vu .v {
  display: inline;
}
.PanelItem.cmp-variable.narrow.l-split .vu .u {
  margin-left: 0.3em;
}

.PanelItem.cmp-heatingset .inner {
  position: relative;
  width: 172px;
  height: 130px;
  margin: 5px auto 0;
}
.PanelItem.cmp-heatingset .Arrows {
  position: absolute;
  width: 76px;
  height: 89px;
  left: 48px;
  top: 20px;
  background-image: url("/images/item/arrow_bg.png");
}
.PanelItem.cmp-heatingset .Arrows.active .anim {
  position: absolute;
  width: 76px;
  height: 89px;
  background-image: url("/images/item/arrow.gif");
}
.PanelItem.cmp-heatingset .vu {
  text-align: center;
  z-index: 1;
  width: 50px;
}
.PanelItem.cmp-heatingset .vu .u {
  margin-left: 0;
}
.PanelItem.cmp-heatingset .vu.out {
  left: 12px;
  top: 38px;
  position: absolute;
}
.PanelItem.cmp-heatingset .vu.in {
  right: 9px;
  top: 38px;
  position: absolute;
}

.PanelItem.cmp-sensor-gauge .Frame {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.PanelItem.cmp-sensor-gauge .PointerSlide {
  background-image: url("/images/item/light_bg.png");
  margin-left: 20px;
  margin-right: 0.381rem;
  width: 25px;
  height: 106px;
  position: relative;
}
.PanelItem.cmp-sensor-gauge.generic .PointerSlide {
  background-image: url("/images/item/gauge_generic_bg.png");
}
.PanelItem.cmp-sensor-gauge .Pointer {
  position: absolute;
  bottom: 0;
  left: 7px;
  width: 20px;
  height: 23px;
  background-image: url("/images/item/light_pointer.png");
}
.PanelItem.cmp-sensor-gauge .Values {
  line-height: 1.5;
  flex-grow: 1;
  font-weight: bold;
  padding: 0 0.381rem;
}
.PanelItem.cmp-sensor-gauge .Values .disabled .vu {
  opacity: 0.3;
}
.PanelItem.cmp-sensor-gauge .Values .primary {
  font-size: 20pt;
}
.PanelItem.cmp-sensor-gauge .Values .label {
  font-size: 12pt;
  font-weight: normal;
  opacity: 0.6;
}
.PanelItem.cmp-sensor-gauge .Values .secondary {
  border-top: 1px solid #5C5C5C;
  padding-top: 0.381rem;
  font-size: 16pt;
}
.PanelItem.cmp-sensor-gauge.l-split-wide.wide .PointerSlide {
  margin-left: 10px;
}

.PanelItem.cmp-value_watchdog .Frame.populated > div {
  justify-content: flex-start;
  padding-left: 1rem;
  text-align: left;
}
.PanelItem.cmp-value_watchdog .Frame.populated > div::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  margin-right: 0.3em;
  border-radius: 50%;
  background-color: #777;
  display: inline-block;
}
.PanelItem.cmp-value_watchdog .Frame.populated > div.disabled {
  opacity: 0.6;
}
.PanelItem.cmp-value_watchdog .Frame.populated > div.active::before {
  background-color: #f94949;
}
.PanelItem.cmp-value_watchdog .Frame.populated > div.ok::before {
  background-color: #00bc00;
}
.PanelItem.cmp-value_watchdog .Frame.populated > div.flapping::before {
  background-color: darkorange;
}

.PanelItem.cmp-accutank .Frame {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.PanelItem.cmp-accutank .Diagram {
  background-image: url("/images/item/accutank.svg");
  margin-left: 20px;
  width: 70px;
}
.PanelItem.cmp-accutank .Values {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 0 0.381rem;
}
.PanelItem.cmp-accutank .Values .vu {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 20pt;
  font-weight: bold;
}
.PanelItem.cmp-accutank .Values .upper {
  border-bottom: 1px solid #5C5C5C;
}
.PanelItem.cmp-accutank.l-split-wide.wide .Diagram {
  margin-left: 10px;
}

.PanelItem.cmp-softezs .Frame {
  display: flex;
  flex-direction: column;
  padding: 0.381rem;
}
.PanelItem.cmp-softezs .Status {
  color: white;
  text-align: center;
  line-height: 40px;
  border-radius: 3px;
  background: #565656;
  margin-bottom: 0.381rem;
}
.PanelItem.cmp-softezs .Status.alarm {
  background: #e84040;
}
.PanelItem.cmp-softezs .Status.armed {
  background: #29a2e0;
}
.PanelItem.cmp-softezs .Buttons {
  display: flex;
  flex-direction: row;
  font-size: 16pt;
  flex-grow: 1;
}
.PanelItem.cmp-softezs .Buttons a {
  width: 50%;
  position: relative;
  color: #f1f1f1;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #cfcece;
}
.PanelItem.cmp-softezs .Buttons a .Icon {
  font-size: 30px;
}
.PanelItem.cmp-softezs .Buttons a .Icon::before {
  margin-bottom: 60%;
}
.PanelItem.cmp-softezs .Buttons a:first-child {
  border-right: 1px solid #5C5C5C;
}
.PanelItem.cmp-softezs .Buttons a:active:not(.with-led), .PanelItem.cmp-softezs .Buttons a.active:not(.with-led) {
  text-shadow: 0 0 10px var(--c-primary);
  color: var(--c-primary);
}
.PanelItem.cmp-softezs .Buttons a:hover:not(.disabled) {
  background: rgba(var(--c-primary), 0.25);
}
.PanelItem.cmp-softezs .Buttons a:hover:not(.disabled), .PanelItem.cmp-softezs .Buttons a:hover:not(.disabled) .Label {
  color: var(--c-primary);
}
.PanelItem.cmp-softezs .Buttons a:active, .PanelItem.cmp-softezs .Buttons a:active .Label {
  color: var(--c-primary);
}
.PanelItem.cmp-softezs .Buttons a:active {
  background: rgba(var(--c-primary), 0.25);
}
.PanelItem.cmp-softezs .Buttons a .label {
  color: #cfcece;
  text-shadow: none;
  position: absolute;
  width: 100%;
  bottom: 8px;
  font-weight: normal;
  text-align: center;
  left: 0;
  font-size: 12pt;
}

.PanelItem.cmp-meteo_wind_multi .rose {
  position: absolute;
  width: 90px;
  height: 90px;
  right: 0.381rem;
  top: 0.381rem;
  background-image: url("/images/item/compass_disc.svg");
  background-size: cover;
}
.PanelItem.cmp-meteo_wind_multi .rose .hand {
  background-image: url("/images/item/compass_hand.svg");
  background-size: cover;
  width: 100%;
  height: 100%;
}
.PanelItem.cmp-meteo_wind_multi .rose .hand.animated {
  transition: 0.3s ease-in-out transform;
}
.PanelItem.cmp-meteo_wind_multi .TypeIcon {
  position: absolute;
  right: 0.381rem;
  bottom: 0.381rem;
}
.PanelItem.cmp-meteo_wind_multi .wspeed {
  position: absolute;
  top: 0.381rem;
  left: 0.381rem;
  width: 110px;
  text-align: center;
  font-size: 24pt;
  font-weight: bold;
}
.PanelItem.cmp-meteo_wind_multi .gust {
  text-align: center;
  position: absolute;
  width: 110px;
  bottom: 0.381rem;
  left: 0.381rem;
}
.PanelItem.cmp-meteo_wind_multi .gust .label {
  font-size: 13pt;
}
.PanelItem.cmp-meteo_wind_multi .gust .vu {
  font-size: 16pt;
}

.PanelItem.cmp-rgb .Frame, .PanelItem.cmp-blinds .Frame, .PanelItem.cmp-dimmer .Frame {
  display: flex;
  flex-direction: row;
}
.PanelItem.cmp-rgb .SliderBox, .PanelItem.cmp-blinds .SliderBox, .PanelItem.cmp-dimmer .SliderBox {
  width: 28px;
  margin: 0.381rem 0 0.381rem 10px;
}
.PanelItem.cmp-rgb .Buttons, .PanelItem.cmp-blinds .Buttons, .PanelItem.cmp-dimmer .Buttons {
  margin-left: 0.381rem;
  position: relative;
  flex-grow: 1;
}
.PanelItem.cmp-rgb .Buttons .Button .Label, .PanelItem.cmp-blinds .Buttons .Button .Label, .PanelItem.cmp-dimmer .Buttons .Button .Label {
  font-size: 13pt !important;
  font-weight: bold;
}
.PanelItem.cmp-rgb .no-slider .Buttons, .PanelItem.cmp-blinds .no-slider .Buttons, .PanelItem.cmp-dimmer .no-slider .Buttons {
  margin-left: 0;
}

.PanelItem.cmp-dimmer-multi .Frame {
  display: flex;
  flex-direction: column;
}
.PanelItem.cmp-dimmer-multi .Frame .row {
  display: flex;
  flex-direction: row;
  height: 25%;
}
.PanelItem.cmp-dimmer-multi .Frame.r2 .row {
  height: 50%;
}
.PanelItem.cmp-dimmer-multi .dot-box {
  width: 8%;
  height: 100%;
  margin-left: 10px;
  display: flex;
  box-sizing: border-box;
  place-content: center;
  align-items: center;
}
.PanelItem.cmp-dimmer-multi .dot-box [class^=power-control-] {
  border: 1px solid #5C5C5C;
  border-radius: 50%;
  padding: 25%;
  background: #3c3c3c;
}
.PanelItem.cmp-dimmer-multi .dot-box [class^=power-control-].active {
  background: var(--c-primary);
}
.PanelItem.cmp-dimmer-multi .SliderBox {
  width: 57%;
  height: 100%;
}
.PanelItem.cmp-dimmer-multi .Buttons {
  margin-left: 0.381rem;
  position: relative;
  width: 35%;
  height: 100%;
  flex-grow: 1;
}
.PanelItem.cmp-dimmer-multi .Buttons .Button .Label {
  font-size: 13pt !important;
  font-weight: bold;
}
.PanelItem.cmp-dimmer-multi .no-slider .Buttons {
  margin-left: 0;
}

.WeatherForecastItem__Values {
  position: absolute;
  left: 10px;
  top: 5px;
  width: 156px;
  height: 124px;
}
.WeatherForecastItem__Row {
  position: relative;
  display: flex;
  margin-bottom: 2px;
}
.WeatherForecastItem__Row:last-child {
  margin-bottom: 0;
}
.WeatherForecastItem__Cell {
  display: inline-block;
  width: 25px;
  height: 24px;
}
.WeatherForecastItem__Cell--value {
  border: 1px solid #FE5555;
  border-right-width: 0;
  font-size: 11px;
  line-height: 24px;
}
.WeatherForecastItem__Cell--value:last-child {
  border-right-width: 1px;
}
.WeatherForecastItem__Cell--hour {
  font-weight: bold;
  height: 18px;
  line-height: 18px;
  vertical-align: middle;
  font-size: 12px;
}
.WeatherForecastItem .TypeIcon {
  position: absolute;
  right: 0.381rem;
  bottom: 0.381rem;
}
.WeatherForecastItem .Label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 13px;
  font-weight: bold;
}

.PanelItem.cmp-blinds .SliderBox {
  margin: 0.381rem 0 0.381rem 20px;
}
.PanelItem.cmp-blinds .slider_box_actual {
  top: 13px;
  left: -15px;
  height: 110px;
  width: 9px;
  position: absolute;
}
.PanelItem.cmp-blinds .slider_box_actual .actualpos {
  position: absolute;
  left: 4px;
  margin-top: -4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 12px;
  border-color: transparent transparent transparent #999;
  -webkit-transform: rotate(360deg);
}
.PanelItem.cmp-blinds .Buttons i::before {
  font-size: 30px;
  position: relative;
  top: 3px;
}
.PanelItem.cmp-blinds .Buttons .Button.n5 {
  display: block;
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  border: 1px solid #5C5C5C;
  background: #323232;
  display: flex;
  justify-content: center;
  align-items: center;
}
.PanelItem.cmp-blinds .Buttons .Button.n5 i::before {
  top: 1px;
}
.PanelItem.cmp-blinds .Buttons .Button.n5:hover {
  background: #294E60;
}
.PanelItem.cmp-blinds .Buttons .n1 {
  padding-right: 15px;
  padding-bottom: 10px;
}
.PanelItem.cmp-blinds .Buttons .n2 {
  padding-left: 15px;
  padding-bottom: 10px;
}
.PanelItem.cmp-blinds .Buttons .n3 {
  padding-right: 15px;
  padding-top: 10px;
}
.PanelItem.cmp-blinds .Buttons .n4 {
  padding-left: 15px;
  padding-top: 10px;
}

.PanelItem.cmp-rgb .Title {
  cursor: pointer;
}
.PanelItem.cmp-rgb .Title:hover {
  color: #3dbeff;
}
.PanelItem.cmp-rgb .Title:active {
  padding-top: 1px;
}
.PanelItem.cmp-rgb .PresetPad {
  position: relative;
  width: 147px;
  height: 125px;
  align-self: center;
  margin-left: 10px;
}
.PanelItem.cmp-rgb .PresetPad * {
  position: absolute;
}
.PanelItem.cmp-rgb .Preset, .PanelItem.cmp-rgb .Actual {
  cursor: pointer;
  width: 0;
  height: 0;
  padding: 20px;
  border-radius: 50%;
  border: 0 solid white;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.8), inset 0 0 2px rgba(0, 0, 0, 0.3);
  background: gray;
}
.PanelItem.cmp-rgb .Demo {
  font-size: 20px;
  right: -2px;
  top: 14px;
  opacity: 0.6;
  cursor: pointer;
}
.PanelItem.cmp-rgb .Demo:hover, .PanelItem.cmp-rgb .Demo.active {
  color: white;
  text-shadow: 0 1px 2px black;
  opacity: 1;
}
.PanelItem.cmp-rgb .Demo i {
  position: relative;
}
.PanelItem.cmp-rgb .Demo:active {
  top: 15px;
}
.PanelItem.cmp-rgb .Picker {
  width: 100%;
  height: 100%;
}
.PanelItem.cmp-rgb .Picker * {
  position: absolute;
}
.PanelItem.cmp-rgb .Picker .wheel {
  background: url("/images/item/color/wheel.png");
  width: 180px;
  height: 180px;
  background-size: cover;
  left: 15px;
  top: 5px;
}
.PanelItem.cmp-rgb .Picker .cursor {
  width: 17px;
  height: 17px;
  background: url("/images/item/color/cursor.png");
  left: 82px;
  top: 82px;
}
.PanelItem.cmp-rgb .Picker .Btn {
  font-size: 20px;
  border-radius: 50%;
  background: #333;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  cursor: pointer;
}
.PanelItem.cmp-rgb .Picker .Btn::before {
  margin: 0;
}
.PanelItem.cmp-rgb .Picker .Btn.confirm {
  right: 10px;
  color: #17c96b;
}
.PanelItem.cmp-rgb .Picker .Btn.cancel {
  left: 10px;
  color: #e84040;
}
.PanelItem.cmp-rgb .Picker .Btn:active {
  top: 11px;
}
.PanelItem.cmp-rgb.white-mode .Picker .wheel {
  background-image: url("/images/item/color/wheel-white.png");
}
.PanelItem.cmp-rgb .Actual {
  padding: 24px;
  left: 49.5px;
  top: 38.5px;
  border-width: 0;
}
.PanelItem.cmp-rgb .Preset:nth-child(1) {
  left: 94px;
  top: 42.5px;
}
.PanelItem.cmp-rgb .Preset:nth-child(2) {
  left: 73.75px;
  top: 77.5740288533px;
}
.PanelItem.cmp-rgb .Preset:nth-child(3) {
  left: 33.25px;
  top: 77.5740288533px;
}
.PanelItem.cmp-rgb .Preset:nth-child(4) {
  left: 13.0000000031px;
  top: 42.5000000004px;
}
.PanelItem.cmp-rgb .Preset:nth-child(5) {
  left: 33.2500016943px;
  top: 7.4259714561px;
}
.PanelItem.cmp-rgb .Preset:nth-child(6) {
  left: 73.7502256613px;
  top: 7.4260227173px;
}
.PanelItem.cmp-rgb .Preset:nth-child(7) {
  left: 94.0121995737px;
  top: 42.5033510086px;
}
.PanelItem.cmp-rgb .BgCircle {
  padding: 38px;
  left: 34.5px;
  top: 23.5px;
  border-radius: 50%;
}

.PanelItem.cmp-round-meter {
  border-radius: 50%;
  flex-grow: 0;
  width: 191px;
  overflow: visible;
}
.PanelItem.cmp-round-meter .Title {
  background: transparent;
  text-align: center;
  top: 20px;
  color: white;
  padding-left: 25px;
  padding-right: 20px;
}
.PanelItem.cmp-round-meter .Title.with-helptext, .PanelItem.cmp-round-meter .Title.with-quickmenu.with-helptext {
  padding-right: 40px;
}
.PanelItem.cmp-round-meter .Title .helptext {
  right: 25px;
}
.PanelItem.cmp-round-meter .Actual {
  padding-top: 0 !important;
}
.PanelItem.cmp-round-meter .Actual .vu {
  margin: 0 10px;
  background: #121212;
  padding: 5px;
  border-radius: 2px;
  font-size: 16pt;
  border: 1px solid #4a4a4a;
}
.PanelItem.cmp-round-meter .Frame {
  top: 50px;
}
.PanelItem.cmp-round-meter .Frame .Actual {
  border-bottom: none;
  height: 60px;
  padding-right: 0;
  padding-top: 15px;
}
.PanelItem.cmp-round-meter .Frame .Extra {
  margin-top: 0;
}
.PanelItem.cmp-round-meter .PanelItem .Title {
  top: 18px;
  padding: 0 30px;
}
.PanelItem.cmp-round-meter .TypeIcon {
  margin: 0 auto;
  height: 20px;
}
.PanelItem.cmp-round-meter .Extra {
  height: 50px;
  padding-bottom: 5px;
  font-size: 13pt !important;
}
.PanelItem.cmp-round-meter .ManualEntryBtn {
  position: absolute;
}

.PanelItem.cmp-button-inels3 .Frame {
  justify-content: flex-end;
}
.PanelItem.cmp-button-inels3 .Frame .Actual {
  height: 50%;
  align-items: center;
  display: flex;
  justify-content: center;
}
.PanelItem.cmp-button-inels3 .Frame .Actual.red {
  text-shadow: 0 0 10px #ff0000;
  color: #ff0000;
}
.PanelItem.cmp-button-inels3 .Frame .Actual.green {
  text-shadow: 0 0 10px #00ff7f;
  color: #00ff7f;
}
.PanelItem.cmp-button-inels3 .Frame .Actual.yellow {
  text-shadow: 0 0 10px #ffff66;
  color: #ffff66;
}
.PanelItem.cmp-button-inels3 .Frame .Actual.cyan {
  text-shadow: 0 0 10px #81d8d0;
  color: #81d8d0;
}
.PanelItem.cmp-button-inels3 .Frame .Actual.purple {
  text-shadow: 0 0 10px #8a2be2;
  color: #8a2be2;
}
.PanelItem.cmp-button-inels3 .Frame .Actual.white {
  text-shadow: 0 0 10px #ffffff;
  color: #ffffff;
}
.PanelItem.cmp-button-inels3 .Frame .Extra {
  height: 50%;
}

.cmp-comap-genset .Frame.l-actual-extra .Actual {
  height: 96.72px;
  padding-right: 0;
  text-align: center;
  overflow: hidden;
  align-items: stretch;
}
.cmp-comap-genset .Frame.l-actual-extra .Extra {
  opacity: 1;
  height: 52.08px;
  display: flex;
  flex-direction: row;
  text-align: center;
  padding: 0 2px;
  justify-content: center;
}
.cmp-comap-genset .Frame.l-actual-extra .Extra svg {
  margin: 0 1px;
}
.cmp-comap-genset .Frame.l-actual-extra .Extra .overlay-text {
  font-size: 75%;
  white-space: normal;
}
.cmp-comap-genset .Frame.l-actual-extra .Extra .breaker-label {
  font-size: 9px;
  opacity: 0.7;
}
.cmp-comap-genset.no-fuel .fuel {
  display: none;
}
.cmp-comap-genset.no-fuel .gauge {
  padding-left: 10px;
}
.cmp-comap-genset .fuel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 12px;
}
.cmp-comap-genset .fuel-pt {
  font-size: 12px;
}
.cmp-comap-genset .fuel {
  flex-grow: 1;
  border-radius: 1px;
  display: block;
  width: 12px;
  flex-shrink: 0;
  margin: 8px 0 4px 0;
  position: relative;
  overflow: hidden;
  background: #444;
}
.cmp-comap-genset .fuel .fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #ffb33c;
}
.cmp-comap-genset .fuel.crit .fill {
  background: #C30026;
}

.narrow .cmp-comap-genset .gauge {
  padding-left: 15px;
}
.narrow .cmp-comap-genset.no-fuel .gauge {
  padding-left: 20px;
}
.narrow .cmp-comap-genset .fuel-wrapper {
  align-items: center;
  width: auto;
}

.wide .cmp-comap-genset .Extra {
  padding: 0;
}
.wide .cmp-comap-genset .Breaker svg {
  width: 30px !important;
}
.wide .cmp-comap-genset .BusSymbol svg {
  width: 30px !important;
}

.PanelItem.s0meter .Actual .SvgIcon, .PanelItem.s0meter .Actual .BuiltinIcon {
  width: 1.7rem;
  height: 1.7rem;
}
.PanelItem.s0meter .Extra .SvgIcon, .PanelItem.s0meter .Extra .BuiltinIcon {
  width: 1.6rem;
  height: 1.6rem;
  vertical-align: bottom;
}
.PanelItem.s0meter .Frame > .SvgIcon, .PanelItem.s0meter .Frame > .BuiltinIcon {
  width: 1.4rem;
  height: 1.4rem;
}

.Dashboard {
  margin-top: 1rem;
  /*
  .Logo {
      position: absolute;
      display: block;
      right: 30px;
      bottom: 30px;
      @include size(180px 88px);
      background: url("/images/dashboard/dash_icons.png") no-repeat right bottom;
  }
  */
}
.Dashboard .Row {
  display: flex;
  justify-content: center;
  align-items: center;
}
.Dashboard .Row a {
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.Dashboard .Row a:active, .Dashboard .Row a.pushed {
  top: 1px;
}
.Dashboard .Row:last-child {
  margin-bottom: 0 !important;
}
.Dashboard.default .Row {
  margin-bottom: -42px;
}
.Dashboard.default .Row a {
  margin: 0 3px;
  height: 196px;
  width: 170px;
  background: url("/images/dashboard/dash_bg.png") no-repeat 0 center;
}
.Dashboard.default .Row a:hover, .Dashboard.default .Row a:active {
  background-position: -170px center;
}
.Dashboard.default .Row a::before {
  content: "";
  height: 165px;
  width: 165px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-image: url("/images/dashboard/dash_icons.png");
}
.Dashboard.default .Row a.sensors::before {
  background-position: 0px 0px;
}
.Dashboard.default .Row a.security::before {
  background-position: -165px 0px;
}
.Dashboard.default .Row a.multimedia::before {
  background-position: -330px 0px;
}
.Dashboard.default .Row a.consumption::before {
  background-position: -495px 0px;
}
.Dashboard.default .Row a.lighting::before {
  background-position: 0px -165px;
}
.Dashboard.default .Row a.cams::before {
  background-position: -165px -165px;
}
.Dashboard.default .Row a.appliances::before {
  background-position: -330px -165px;
}
.Dashboard.default .Row a.alarm::before {
  background-position: -495px -165px;
}
.Dashboard.custom147 > .Row {
  margin-top: 10px;
  margin-bottom: -42px;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
.Dashboard.custom147 > .Row a {
  margin: 0 0.381rem;
  height: 191px;
  width: 209px;
  background-image: url("/images/item/bcg/item_square_blank.png");
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.Dashboard.custom147 > .Row a::before {
  content: "";
  height: 150px;
  width: 150px;
  background-size: contain;
}
.Dashboard.custom147 > .Row a:active, .Dashboard.custom147 > .Row a.pushed {
  top: 1px;
}
.Dashboard.custom147 > .Row a::before, .Dashboard.custom147 > .Row a .Icon {
  position: absolute;
  width: 87%;
  height: 97%;
  left: 7%;
  top: 0;
  background-size: 70%;
}
.Dashboard.apartments .Row {
  margin-bottom: -32px;
}
.Dashboard.apartments .Row a {
  text-decoration: none;
  color: white;
  margin: 0 3px;
  height: 133px;
  width: 115px;
  background: url("/images/dashboard/dash_bg_apartments.png") no-repeat 0 center;
}
.Dashboard.apartments .Row a:hover, .Dashboard.apartments .Row a:active {
  background-position: -115px center;
}
.Dashboard.apartments .Row a .label {
  display: inline-block;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-left: -3px;
}
.Dashboard.apartments .Row a.icon::before {
  content: "";
  height: 165px;
  width: 165px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-image: url("/images/dashboard/dash_icons.png");
  transform: translate(-50%, -50%) scale3d(0.5, 0.5, 1);
  margin-left: -3px;
  margin-top: -3px;
}
.Dashboard.apartments .Row a.icon.sensors::before {
  background-position: 0px 0px;
}
.Dashboard.apartments .Row a.icon.security::before {
  background-position: -165px 0px;
}
.Dashboard.apartments .Row a.icon.media::before {
  background-position: -330px 0px;
}
.Dashboard.apartments .Row a.icon.measure::before {
  background-position: -495px 0px;
}
.Dashboard.apartments .Row a.icon.lights::before {
  background-position: 0px -165px;
}
.Dashboard.apartments .Row a.icon.camera::before {
  background-position: -165px -165px;
}
.Dashboard.apartments .Row a.icon.appliances::before {
  background-position: -330px -165px;
}
.Dashboard.apartments .Row a.icon.alarm::before {
  background-position: -495px -165px;
}

html.grandstream .Dashboard.default {
  margin-top: -2px;
}

.PinDialog {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin: 0.617rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.617rem;
}
.PinDialog .Title {
  font-size: 1.77em;
}
.PinDialog .Title.error-msg {
  color: #e84040;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.PinDialog .Label {
  height: 1.8em;
  line-height: 1.8em;
  vertical-align: middle;
  font-size: 1.33em;
}
.PinDialog .Keypad {
  width: 100%;
}
.PinDialog .Keypad td {
  padding: 0.235rem;
}
.PinDialog .Keypad a {
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: white;
  border-radius: 3px;
  text-decoration: none;
  width: 16vmin;
  height: 10vmin;
  font-size: 1.77em;
  display: flex;
  align-items: center;
  justify-content: center;
  /* variable doesn't work here due to rgba */
  background: rgba(90, 191, 255, 0.8);
}
.PinDialog .Keypad a:active, .PinDialog .Keypad a.pushed {
  top: 1px;
}
@media screen and (max-width: 1100px) {
  .PinDialog .Keypad a {
    width: 25vmin;
    height: 15vmin;
  }
}
@media screen and (min-width: 545px) and (max-width: 1100px) {
  .PinDialog .Keypad a {
    font-size: 2.35em;
  }
}
.PinDialog .Keypad a:hover {
  background: #5abfff;
}
.PinDialog .Keypad a.clear {
  background: rgba(224, 49, 49, 0.8);
}
.PinDialog .Keypad a.clear:hover {
  background: #e03131;
}
.PinDialog .Keypad a.confirm {
  background: rgba(23, 196, 97, 0.8);
}
.PinDialog .Keypad a.confirm:hover {
  background: #17c461;
}

.BuiltinIcon {
  background-position: center center;
  background-size: contain;
  display: inline-block;
}
.BuiltinIcon.cams {
  background-image: url("/images/dashboard/icon-camera.svg");
}
.BuiltinIcon.alarm {
  background-image: url("/images/dashboard/icon-alarm.svg");
}
.BuiltinIcon.appliances {
  background-image: url("/images/dashboard/icon-appliances.svg");
}
.BuiltinIcon.lighting {
  background-image: url("/images/dashboard/icon-lighting.svg");
}
.BuiltinIcon.consumption {
  background-image: url("/images/dashboard/icon-measure.svg");
}
.BuiltinIcon.security {
  background-image: url("/images/dashboard/icon-security.svg");
}
.BuiltinIcon.sensors {
  background-image: url("/images/dashboard/icon-temperature.svg");
}
.BuiltinIcon.monitoring {
  background-image: url("/images/dashboard/icon-watchdog.svg");
}
.BuiltinIcon.monitoring2 {
  background-image: url("/images/dashboard/icon-watchdog2.svg");
}
.BuiltinIcon.multimedia {
  background-image: url("/images/dashboard/icon-multimedia.svg");
}
.BuiltinIcon.meteo {
  background-image: url("/images/dashboard/icon-meteo.svg");
}
.BuiltinIcon.temp {
  background-image: url("/images/dashboard/icon-tempheat.svg");
}
.BuiltinIcon.technology {
  background-image: url("/images/dashboard/icon-tech.svg");
}
.BuiltinIcon.fan {
  background-image: url("/images/dashboard/icon-fan.svg");
}
.BuiltinIcon.drop {
  background-image: url("/images/dashboard/icon-drop.svg");
}
.BuiltinIcon.mapsearch {
  background-image: url("/images/dashboard/icon-mapsearch.svg");
}
.BuiltinIcon.robot {
  background-image: url("/images/dashboard/icon-robot.svg");
}
.BuiltinIcon.unlock {
  background-image: url("/images/dashboard/icon-unlock.svg");
}
.BuiltinIcon.undo {
  background-image: url("/images/dashboard/icon-undo.svg");
}
.BuiltinIcon.shortcut {
  background-image: url("/images/dashboard/icon-shortcut.svg");
}
.BuiltinIcon.smarthome {
  background-image: url("/images/dashboard/icon-smarthome.svg");
}
.BuiltinIcon.layers {
  background-image: url("/images/dashboard/icon-layers.svg");
}
.BuiltinIcon.tank {
  background-image: url("/images/dashboard/icon-tank.svg");
}
.BuiltinIcon.tank2 {
  background-image: url("/images/dashboard/icon-tank2.svg");
}
.BuiltinIcon.meander {
  background-image: url("/images/dashboard/icon-meander.svg");
}
.BuiltinIcon.access {
  background-image: url("/images/dashboard/icon-access.svg");
}
.BuiltinIcon.key {
  background-image: url("/images/dashboard/icon-key.svg");
}
.BuiltinIcon.security2 {
  background-image: url("/images/dashboard/icon-security2.svg");
}
.BuiltinIcon.meter {
  background-image: url("/images/dashboard/icon-meter.svg");
}
.BuiltinIcon.meter2 {
  background-image: url("/images/dashboard/icon-meter2.svg");
}
.BuiltinIcon.meter3 {
  background-image: url("/images/dashboard/icon-meter3.svg");
}
.BuiltinIcon.engine {
  background-image: url("/images/dashboard/icon-engine.svg");
}
.BuiltinIcon.contract {
  background-image: url("/images/dashboard/icon-contract.svg");
}
.BuiltinIcon.carseat {
  background-image: url("/images/dashboard/icon-carseat.svg");
}
.BuiltinIcon.floorplan {
  background-image: url("/images/dashboard/icon-floorplan.svg");
}
.BuiltinIcon.waterdam {
  background-image: url("/images/dashboard/icon-waterdam.svg");
}
.BuiltinIcon.meteo2 {
  background-image: url("/images/dashboard/icon-meteo2.svg");
}
.BuiltinIcon.brewery {
  background-image: url("/images/dashboard/icon-brewery.svg");
}
.BuiltinIcon.fan2 {
  background-image: url("/images/dashboard/icon-fan2.svg");
}
.BuiltinIcon.pvs {
  background-image: url("/images/dashboard/icon-pvs.svg");
}
.BuiltinIcon.hydropower {
  background-image: url("/images/dashboard/icon-hydropower.svg");
}
.BuiltinIcon.heater {
  background-image: url("/images/dashboard/icon-heater.svg");
}
.BuiltinIcon.bar {
  background-image: url("/images/dashboard/icon-bar.svg");
}
.BuiltinIcon.cam {
  background-image: url("/images/dashboard/icon-cam.svg");
}
.BuiltinIcon.cam2 {
  background-image: url("/images/dashboard/icon-cam2.svg");
}
.BuiltinIcon.plug {
  background-image: url("/images/dashboard/icon-plug.svg");
}
.BuiltinIcon.compressor {
  background-image: url("/images/dashboard/icon-compressor.svg");
}
.BuiltinIcon.scale {
  background-image: url("/images/dashboard/icon-scale.svg");
}
.BuiltinIcon.sun {
  background-image: url("/images/dashboard/icon-sun.svg");
}

.IconPicker {
  margin-bottom: 0.617rem;
}
.IconPicker .button {
  margin-right: 0.25rem;
  vertical-align: middle;
}
.IconPicker .button.active, .IconPicker .button:hover {
  background-color: var(--c-primary);
  color: #222222;
}

.IconPicker #icon-preview {
  cursor: pointer;
  width: 2rem;
  height: 2em;
  margin-left: 0.25rem;
  vertical-align: middle;
}

.icon-picker-icon-buttons {
  max-width: 800px;
  text-align: center;
}

.icon-picker-icon-buttons a {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  background-color: #222222;
  margin: 1px;
  vertical-align: middle;
  color: #e9e9e9;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  text-align: center;
  line-height: 2rem;
  text-decoration: none;
}
.icon-picker-icon-buttons a::before {
  padding: 0;
  margin: 0;
}
.icon-picker-icon-buttons a:hover, .icon-picker-icon-buttons a.active {
  text-decoration: none;
  background-color: var(--c-primary);
}

.HexDash .row > *, .hex7config .cells a, .Dashboard.custom147 > .Row a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f1f1f1;
}
.HexDash .row > .cams .Icon, .hex7config .cells a.cams .Icon, .Dashboard.custom147 > .Row a.cams .Icon {
  background-image: url("/images/dashboard/icon-camera.svg");
}
.HexDash .row > .alarm .Icon, .hex7config .cells a.alarm .Icon, .Dashboard.custom147 > .Row a.alarm .Icon {
  background-image: url("/images/dashboard/icon-alarm.svg");
}
.HexDash .row > .appliances .Icon, .hex7config .cells a.appliances .Icon, .Dashboard.custom147 > .Row a.appliances .Icon {
  background-image: url("/images/dashboard/icon-appliances.svg");
}
.HexDash .row > .lighting .Icon, .hex7config .cells a.lighting .Icon, .Dashboard.custom147 > .Row a.lighting .Icon {
  background-image: url("/images/dashboard/icon-lighting.svg");
}
.HexDash .row > .consumption .Icon, .hex7config .cells a.consumption .Icon, .Dashboard.custom147 > .Row a.consumption .Icon {
  background-image: url("/images/dashboard/icon-measure.svg");
}
.HexDash .row > .security .Icon, .hex7config .cells a.security .Icon, .Dashboard.custom147 > .Row a.security .Icon {
  background-image: url("/images/dashboard/icon-security.svg");
}
.HexDash .row > .sensors .Icon, .hex7config .cells a.sensors .Icon, .Dashboard.custom147 > .Row a.sensors .Icon {
  background-image: url("/images/dashboard/icon-temperature.svg");
}
.HexDash .row > .monitoring .Icon, .hex7config .cells a.monitoring .Icon, .Dashboard.custom147 > .Row a.monitoring .Icon {
  background-image: url("/images/dashboard/icon-watchdog.svg");
}
.HexDash .row > .monitoring2 .Icon, .hex7config .cells a.monitoring2 .Icon, .Dashboard.custom147 > .Row a.monitoring2 .Icon {
  background-image: url("/images/dashboard/icon-watchdog2.svg");
}
.HexDash .row > .multimedia .Icon, .hex7config .cells a.multimedia .Icon, .Dashboard.custom147 > .Row a.multimedia .Icon {
  background-image: url("/images/dashboard/icon-multimedia.svg");
}
.HexDash .row > .meteo .Icon, .hex7config .cells a.meteo .Icon, .Dashboard.custom147 > .Row a.meteo .Icon {
  background-image: url("/images/dashboard/icon-meteo.svg");
}
.HexDash .row > .temp .Icon, .hex7config .cells a.temp .Icon, .Dashboard.custom147 > .Row a.temp .Icon {
  background-image: url("/images/dashboard/icon-tempheat.svg");
}
.HexDash .row > .technology .Icon, .hex7config .cells a.technology .Icon, .Dashboard.custom147 > .Row a.technology .Icon {
  background-image: url("/images/dashboard/icon-tech.svg");
}
.HexDash .row > .fan .Icon, .hex7config .cells a.fan .Icon, .Dashboard.custom147 > .Row a.fan .Icon {
  background-image: url("/images/dashboard/icon-fan.svg");
}
.HexDash .row > .drop .Icon, .hex7config .cells a.drop .Icon, .Dashboard.custom147 > .Row a.drop .Icon {
  background-image: url("/images/dashboard/icon-drop.svg");
}
.HexDash .row > .mapsearch .Icon, .hex7config .cells a.mapsearch .Icon, .Dashboard.custom147 > .Row a.mapsearch .Icon {
  background-image: url("/images/dashboard/icon-mapsearch.svg");
}
.HexDash .row > .robot .Icon, .hex7config .cells a.robot .Icon, .Dashboard.custom147 > .Row a.robot .Icon {
  background-image: url("/images/dashboard/icon-robot.svg");
}
.HexDash .row > .unlock .Icon, .hex7config .cells a.unlock .Icon, .Dashboard.custom147 > .Row a.unlock .Icon {
  background-image: url("/images/dashboard/icon-unlock.svg");
}
.HexDash .row > .undo .Icon, .hex7config .cells a.undo .Icon, .Dashboard.custom147 > .Row a.undo .Icon {
  background-image: url("/images/dashboard/icon-undo.svg");
}
.HexDash .row > .shortcut .Icon, .hex7config .cells a.shortcut .Icon, .Dashboard.custom147 > .Row a.shortcut .Icon {
  background-image: url("/images/dashboard/icon-shortcut.svg");
}
.HexDash .row > .smarthome .Icon, .hex7config .cells a.smarthome .Icon, .Dashboard.custom147 > .Row a.smarthome .Icon {
  background-image: url("/images/dashboard/icon-smarthome.svg");
}
.HexDash .row > .layers .Icon, .hex7config .cells a.layers .Icon, .Dashboard.custom147 > .Row a.layers .Icon {
  background-image: url("/images/dashboard/icon-layers.svg");
}
.HexDash .row > .tank .Icon, .hex7config .cells a.tank .Icon, .Dashboard.custom147 > .Row a.tank .Icon {
  background-image: url("/images/dashboard/icon-tank.svg");
}
.HexDash .row > .tank2 .Icon, .hex7config .cells a.tank2 .Icon, .Dashboard.custom147 > .Row a.tank2 .Icon {
  background-image: url("/images/dashboard/icon-tank2.svg");
}
.HexDash .row > .meander .Icon, .hex7config .cells a.meander .Icon, .Dashboard.custom147 > .Row a.meander .Icon {
  background-image: url("/images/dashboard/icon-meander.svg");
}
.HexDash .row > .access .Icon, .hex7config .cells a.access .Icon, .Dashboard.custom147 > .Row a.access .Icon {
  background-image: url("/images/dashboard/icon-access.svg");
}
.HexDash .row > .key .Icon, .hex7config .cells a.key .Icon, .Dashboard.custom147 > .Row a.key .Icon {
  background-image: url("/images/dashboard/icon-key.svg");
}
.HexDash .row > .security2 .Icon, .hex7config .cells a.security2 .Icon, .Dashboard.custom147 > .Row a.security2 .Icon {
  background-image: url("/images/dashboard/icon-security2.svg");
}
.HexDash .row > .meter .Icon, .hex7config .cells a.meter .Icon, .Dashboard.custom147 > .Row a.meter .Icon {
  background-image: url("/images/dashboard/icon-meter.svg");
}
.HexDash .row > .meter2 .Icon, .hex7config .cells a.meter2 .Icon, .Dashboard.custom147 > .Row a.meter2 .Icon {
  background-image: url("/images/dashboard/icon-meter2.svg");
}
.HexDash .row > .meter3 .Icon, .hex7config .cells a.meter3 .Icon, .Dashboard.custom147 > .Row a.meter3 .Icon {
  background-image: url("/images/dashboard/icon-meter3.svg");
}
.HexDash .row > .engine .Icon, .hex7config .cells a.engine .Icon, .Dashboard.custom147 > .Row a.engine .Icon {
  background-image: url("/images/dashboard/icon-engine.svg");
}
.HexDash .row > .contract .Icon, .hex7config .cells a.contract .Icon, .Dashboard.custom147 > .Row a.contract .Icon {
  background-image: url("/images/dashboard/icon-contract.svg");
}
.HexDash .row > .carseat .Icon, .hex7config .cells a.carseat .Icon, .Dashboard.custom147 > .Row a.carseat .Icon {
  background-image: url("/images/dashboard/icon-carseat.svg");
}
.HexDash .row > .floorplan .Icon, .hex7config .cells a.floorplan .Icon, .Dashboard.custom147 > .Row a.floorplan .Icon {
  background-image: url("/images/dashboard/icon-floorplan.svg");
}
.HexDash .row > .waterdam .Icon, .hex7config .cells a.waterdam .Icon, .Dashboard.custom147 > .Row a.waterdam .Icon {
  background-image: url("/images/dashboard/icon-waterdam.svg");
}
.HexDash .row > .meteo2 .Icon, .hex7config .cells a.meteo2 .Icon, .Dashboard.custom147 > .Row a.meteo2 .Icon {
  background-image: url("/images/dashboard/icon-meteo2.svg");
}
.HexDash .row > .brewery .Icon, .hex7config .cells a.brewery .Icon, .Dashboard.custom147 > .Row a.brewery .Icon {
  background-image: url("/images/dashboard/icon-brewery.svg");
}
.HexDash .row > .fan2 .Icon, .hex7config .cells a.fan2 .Icon, .Dashboard.custom147 > .Row a.fan2 .Icon {
  background-image: url("/images/dashboard/icon-fan2.svg");
}
.HexDash .row > .pvs .Icon, .hex7config .cells a.pvs .Icon, .Dashboard.custom147 > .Row a.pvs .Icon {
  background-image: url("/images/dashboard/icon-pvs.svg");
}
.HexDash .row > .hydropower .Icon, .hex7config .cells a.hydropower .Icon, .Dashboard.custom147 > .Row a.hydropower .Icon {
  background-image: url("/images/dashboard/icon-hydropower.svg");
}
.HexDash .row > .heater .Icon, .hex7config .cells a.heater .Icon, .Dashboard.custom147 > .Row a.heater .Icon {
  background-image: url("/images/dashboard/icon-heater.svg");
}
.HexDash .row > .bar .Icon, .hex7config .cells a.bar .Icon, .Dashboard.custom147 > .Row a.bar .Icon {
  background-image: url("/images/dashboard/icon-bar.svg");
}
.HexDash .row > .cam .Icon, .hex7config .cells a.cam .Icon, .Dashboard.custom147 > .Row a.cam .Icon {
  background-image: url("/images/dashboard/icon-cam.svg");
}
.HexDash .row > .cam2 .Icon, .hex7config .cells a.cam2 .Icon, .Dashboard.custom147 > .Row a.cam2 .Icon {
  background-image: url("/images/dashboard/icon-cam2.svg");
}
.HexDash .row > .plug .Icon, .hex7config .cells a.plug .Icon, .Dashboard.custom147 > .Row a.plug .Icon {
  background-image: url("/images/dashboard/icon-plug.svg");
}
.HexDash .row > .compressor .Icon, .hex7config .cells a.compressor .Icon, .Dashboard.custom147 > .Row a.compressor .Icon {
  background-image: url("/images/dashboard/icon-compressor.svg");
}
.HexDash .row > .scale .Icon, .hex7config .cells a.scale .Icon, .Dashboard.custom147 > .Row a.scale .Icon {
  background-image: url("/images/dashboard/icon-scale.svg");
}
.HexDash .row > .sun .Icon, .hex7config .cells a.sun .Icon, .Dashboard.custom147 > .Row a.sun .Icon {
  background-image: url("/images/dashboard/icon-sun.svg");
}
.HexDash .row > ::before, .hex7config .cells a::before, .Dashboard.custom147 > .Row a::before, .HexDash .row > * .Icon, .hex7config .cells a .Icon, .Dashboard.custom147 > .Row a .Icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: 55%;
}
.HexDash .row > .fonticon .Icon, .hex7config .cells a.fonticon .Icon, .Dashboard.custom147 > .Row a.fonticon .Icon, .HexDash .row > .text .Icon, .hex7config .cells a.text .Icon, .Dashboard.custom147 > .Row a.text .Icon {
  display: none;
}
.HexDash .row > .fonticon::before, .hex7config .cells a.fonticon::before, .Dashboard.custom147 > .Row a.fonticon::before {
  margin: 0;
  padding: 0;
  left: 0;
  width: initial;
  height: initial;
  left: 0;
  top: 0;
  position: relative;
  z-index: 1;
}
.HexDash .row > * svg, .hex7config .cells a svg, .Dashboard.custom147 > .Row a svg, .HexDash .row > * .Icon, .hex7config .cells a .Icon, .Dashboard.custom147 > .Row a .Icon {
  pointer-events: none;
}
.HexDash .row > * svg.hextile, .hex7config .cells a svg.hextile, .Dashboard.custom147 > .Row a svg.hextile {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.HexDash .row > :hover, .hex7config .cells a:hover, .Dashboard.custom147 > .Row a:hover, .HexDash .row > :active, .hex7config .cells a:active, .Dashboard.custom147 > .Row a:active {
  color: var(--c-primary);
}
.HexDash .row > :hover .hextile-frame, .hex7config .cells a:hover .hextile-frame, .Dashboard.custom147 > .Row a:hover .hextile-frame, .HexDash .row > :active .hextile-frame, .hex7config .cells a:active .hextile-frame, .Dashboard.custom147 > .Row a:active .hextile-frame {
  fill: var(--c-primary);
}
.HexDash .row > :hover .hextile-inner, .hex7config .cells a:hover .hextile-inner, .Dashboard.custom147 > .Row a:hover .hextile-inner, .HexDash .row > :active .hextile-inner, .hex7config .cells a:active .hextile-inner, .Dashboard.custom147 > .Row a:active .hextile-inner {
  fill: #222222;
}
.HexDash .row > * .hextile-frame, .hex7config .cells a .hextile-frame, .Dashboard.custom147 > .Row a .hextile-frame {
  fill: #aaaaaa;
}
.HexDash .row > * .hextile-inner, .hex7config .cells a .hextile-inner, .Dashboard.custom147 > .Row a .hextile-inner {
  fill: #222222;
}
.HexDash .row > .disabled:hover, .hex7config .cells a.disabled:hover, .Dashboard.custom147 > .Row a.disabled:hover {
  color: #f1f1f1;
}
.HexDash .row > .disabled:hover .hextile-frame, .hex7config .cells a.disabled:hover .hextile-frame, .Dashboard.custom147 > .Row a.disabled:hover .hextile-frame {
  fill: #aaaaaa;
}
.HexDash .row > .disabled:hover .hextile-inner, .hex7config .cells a.disabled:hover .hextile-inner, .Dashboard.custom147 > .Row a.disabled:hover .hextile-inner {
  fill: #222222;
}

.HexDash {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  justify-items: center;
}
@media screen and (max-width: 544px) {
  .HexDash {
    justify-content: flex-start;
    padding-top: 9vh;
  }
}
@media screen and (min-width: 1377px) {
  .HexDash {
    justify-content: flex-start;
    padding-top: 5vh;
  }
}
.HexDash .row {
  height: 1vmin;
  margin-top: 10.84vmin;
  margin-bottom: 10.84vmin;
  display: flex;
  justify-content: center;
  align-items: center;
}
.HexDash .row:first-child {
  margin-top: 17.344vmin;
}
.HexDash .row:last-child {
  margin-bottom: 17.344vmin;
}
.HexDash .row > * {
  border-radius: 50%;
  width: 28vmin;
  height: 28vmin;
  margin-left: -1.102vmin;
  margin-right: -1.102vmin;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.HexDash .row > *:active, .HexDash .row > *.pushed {
  top: 1px;
}
.HexDash .row > *.fonticon::before {
  font-size: 80px;
  margin-top: -10px;
}
@media screen and (max-width: 1100px) {
  .HexDash .row > *.fonticon::before {
    font-size: 60px;
  }
}
@media screen and (max-width: 544px) {
  .HexDash .row > *.fonticon::before {
    font-size: 30px;
    margin-top: -5px;
    margin-left: 0;
  }
}
.HexDash .row > * .Caption {
  font-size: 110%;
  background: none;
  text-shadow: 0 0 3px black, 0 0 2px black, 0 0 2px black;
  border-radius: 5px;
  position: absolute;
  text-align: center;
  bottom: 6vmin;
  padding: 2px 5px;
  color: #f1f1f1;
}
.HexDash .row > * .Caption.fade {
  text-shadow: none;
  opacity: 0;
  transition: opacity ease-in-out 0.5s 0.3s;
  background: #222222;
  border: 1px solid var(--c-primary);
  border-radius: 2px;
  padding: 0.235rem;
}
@media screen and (max-width: 1100px) {
  .HexDash .row > * .Caption {
    bottom: 58px;
    font-size: 100%;
  }
}
@media screen and (max-width: 544px) {
  .HexDash .row > * .Caption {
    bottom: 25px;
    font-size: 80%;
  }
}
.HexDash .row > * .Text {
  font-size: 165%;
  padding: 0 30px;
  text-shadow: 0 0 2px black;
  text-align: center;
  display: block;
  position: absolute;
}
@media screen and (max-width: 1100px) {
  .HexDash .row > * .Text {
    padding: 0 20px;
    font-size: 140%;
  }
}
@media screen and (max-width: 544px) {
  .HexDash .row > * .Text {
    padding: 0 10px;
    font-size: 120%;
  }
}
.HexDash .row > *:hover .Caption.fade {
  opacity: 1;
}
.HexDash .row > *.disabled {
  opacity: 0.2;
  cursor: default;
}
.HexDash .row > *.disabled:active {
  top: 0;
}
#overview-panel {
  max-width: 905px;
  padding: 0.381rem;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(50, 50, 50, 0.4);
}

a.fs-ovpanel-conf {
  position: absolute;
  right: 0.381rem;
  top: 0.381rem;
  color: #999;
  opacity: 0.4;
  text-decoration: none;
  font-size: 24px;
}
a.fs-ovpanel-conf:hover {
  color: var(--c-primary);
  opacity: 1;
}

.OvCell {
  display: inline-block;
  width: 210px;
  border-radius: 4px;
  margin: 0.381rem;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  /*
      // substitute for the JS colors
      &.color-generic {
          .title {
              background: $c-primary;
          }

          .valrow {
              background: #09547E;
          }
      }
  */
}
.OvCell .title {
  text-shadow: 0 0 3px black;
  padding: 0 0.235rem;
  background: var(--c-primary);
  color: white;
  font-size: 12pt;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  text-align: center;
}
.OvCell .valrow {
  padding: 0 0.235rem;
  text-align: right;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.OvCell .valrow.center {
  text-align: center;
}
.OvCell .v {
  font-size: 18pt;
}
.OvCell .u {
  font-size: 16pt;
  display: inline-block;
  min-width: 80px;
  text-align: left;
}

.CarouselTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-items: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.CarouselTitle span {
  display: block;
  margin-bottom: 150px;
  text-align: center;
  color: var(--c-primary);
  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}

#map-menu-btn {
  position: relative;
}

.map-menu {
  position: absolute;
  top: 100%;
  background-color: #444;
  z-index: 1;
  padding: 0.5em;
  border-radius: 3px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
}
.map-menu td:first-child {
  padding-right: 0.75em;
  color: #f1f1f1;
}
.map-menu td:nth-child(2) {
  display: flex;
}
.map-menu td:nth-child(2) a {
  margin-right: 0.25em;
}
.map-menu td:nth-child(2) a:last-of-type {
  margin-right: 0;
}
.map-menu tr:first-child a {
  margin-top: 0;
}
.map-menu tr a {
  margin-top: 0.25em;
}

.arrow_box::after, .arrow_box::before {
  bottom: 100%;
  left: 16px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box::before {
  border-bottom-color: #444;
  border-width: 8px;
  margin-left: -8px;
}

.Table--mapdash {
  margin: 0.381rem 0;
}

.fbx-scada .w-multi.multistate-hidden, .fbx-scada .w-multi .multistate-hidden, .fbx-scada .w-binary.state-off .on-show, .fbx-scada .w-binary.state-on .off-show, .fbx-scada .w-binary.state-off.on-show, .fbx-scada .w-binary.state-on.off-show, .fbx-scada .w-binary.w-reverse.state-forward .reverse-show, .fbx-scada .w-binary.w-reverse.state-reverse .forward-show, .fbx-scada .fbx-widget.state-not-overridden .manual, .fbx-scada .fbx-widget.err-on .err-hide, .fbx-scada .fbx-widget.err-off .err-show, .fbx-scada .fbx-widget.err-on.err-hide, .fbx-scada .fbx-widget.err-off.err-show {
  opacity: 0 !important;
}
.fbx-scada .w-multi.multistate-hidden, .fbx-scada .w-multi .multistate-hidden, .fbx-scada .w-binary.state-off .on-show, .fbx-scada .w-binary.state-on .off-show, .fbx-scada .w-binary.state-off.on-show, .fbx-scada .w-binary.state-on.off-show, .fbx-scada .w-binary.w-reverse.state-forward .reverse-show, .fbx-scada .w-binary.w-reverse.state-reverse .forward-show, .fbx-scada .fbx-widget.state-not-overridden .manual, .fbx-scada .fbx-widget.err-on .err-hide, .fbx-scada .fbx-widget.err-off .err-show, .fbx-scada .fbx-widget.err-on.err-hide, .fbx-scada .fbx-widget.err-off.err-show, .fbx-scada .w-multi.multistate-hidden *, .fbx-scada .w-multi .multistate-hidden *, .fbx-scada .w-binary.state-off .on-show *, .fbx-scada .w-binary.state-on .off-show *, .fbx-scada .w-binary.state-off.on-show *, .fbx-scada .w-binary.state-on.off-show *, .fbx-scada .w-binary.w-reverse.state-forward .reverse-show *, .fbx-scada .w-binary.w-reverse.state-reverse .forward-show *, .fbx-scada .fbx-widget.state-not-overridden .manual *, .fbx-scada .fbx-widget.err-on .err-hide *, .fbx-scada .fbx-widget.err-off .err-show *, .fbx-scada .fbx-widget.err-on.err-hide *, .fbx-scada .fbx-widget.err-off.err-show * {
  pointer-events: none;
}

.ScadaWrapper {
  flex-grow: 1;
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 0; /* black magic to fix Y overflow - https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container */
}
.ScadaWrapper .chart {
  margin-right: 0.617rem;
  overflow: hidden;
}
.ScadaWrapper .scada-panel-graph {
  margin-right: -0.617rem;
  border-left: 1px solid #5a5a5a;
  border-top: 1px solid #5a5a5a;
  border-bottom: 1px solid #5a5a5a;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.381rem;
  background: #323232;
  max-width: 100%;
}
html.not-touch .ScadaWrapper .scada-panel-graph {
  scrollbar-width: thin;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch .ScadaWrapper .scada-panel-graph::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #363636;
}
html.not-touch .ScadaWrapper .scada-panel-graph::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 3px;
}

.ScadaWrapper .scada-panel-graph .CompSlot {
  width: 225px;
  margin-top: 0.381rem;
  margin-bottom: 0.617rem;
}
.ScadaWrapper .scada-panel-graph .CompSlot.wide {
  width: 450px;
}
.ScadaWrapper > .edit-panel {
  border-left: 1px solid #5a5a5a;
  border-top: 1px solid #5a5a5a;
  border-bottom: 1px solid #5a5a5a;
}
.ScadaWrapper .edit-panel {
  margin-right: -0.617rem;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.381rem;
  background: #323232;
  width: 680px;
  max-width: 100%;
  /* slightly smaller labels */
  transition: width 0.3s ease-in-out;
}
html.not-touch .ScadaWrapper .edit-panel {
  scrollbar-width: auto;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch .ScadaWrapper .edit-panel::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: #363636;
}
html.not-touch .ScadaWrapper .edit-panel::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 4px;
}

.ScadaWrapper .edit-panel .Form .Row .Label, .ScadaWrapper .edit-panel .Form .Row label {
  font-size: 12px;
  padding: 0.2rem 0.5rem;
  width: 25em;
}
.ScadaWrapper .edit-panel .Form .Row .Label small, .ScadaWrapper .edit-panel .Form .Row .Label .text-small, .ScadaWrapper .edit-panel .Form .Row label small, .ScadaWrapper .edit-panel .Form .Row label .text-small {
  font-weight: normal;
}
.ScadaWrapper .edit-panel .table-content {
  margin-top: 0.617rem;
}
.ScadaWrapper .edit-panel .toggler::before {
  content: "\e83a";
}
.ScadaWrapper .edit-panel .edpanel-submit-buttons {
  display: none;
}
.ScadaWrapper .edit-panel .edpanel-buttons {
  white-space: nowrap;
}
.ScadaWrapper .edit-panel.expanded-effect {
  box-shadow: -3px 0 10px rgba(0, 0, 0, 0.5);
  border-color: var(--c-primary);
}
.ScadaWrapper .edit-panel.expanded-effect .edpanel-submit-buttons {
  display: inline;
}
.ScadaWrapper .edit-panel .prop-action-button {
  margin-left: 0.381rem;
}
.ScadaWrapper .edit-panel.collapsed {
  width: 45px;
  cursor: pointer;
}
.ScadaWrapper .edit-panel.collapsed .toggler::before {
  content: "\e81d";
}
.ScadaWrapper .loading-floater {
  position: absolute;
  right: 0.381rem;
  top: 0;
}
.ScadaWrapper .loading-floater .text-in-progress {
  display: none;
}
.ScadaWrapper .loading-floater.in-progress .text-in-progress {
  display: inline;
}
.ScadaWrapper .loading-floater.in-progress .text-idle {
  display: none;
}

.scada-nav .AlertIcon {
  text-decoration: none;
  color: #f1f1f1;
}
.scada-nav .AlertIcon.warning {
  color: #f39c12;
}
.scada-nav .AlertIcon.error {
  color: #FE5555;
}

/* Styles for the svg */
.fbx-scada {
  position: relative;
  /* Room */
  /* Empty-hide */
}
.fbx-scada text, .fbx-scada tspan {
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif !important;
}
.fbx-scada .scroll-guard {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 544px) {
  .fbx-scada.scada-autofit {
    height: 80vh;
  }
}
.fbx-scada.scada-autofit > svg {
  position: absolute;
  left: 0;
  top: 0;
}
.fbx-scada.scada-edit_mode .fbx-widget:hover, .fbx-scada.scada-edit_mode .fbx-widget:hover *, .fbx-scada.scada-edit_mode .fbx-widget.highlight, .fbx-scada.scada-edit_mode .fbx-widget.highlight * {
  stroke: lime !important;
  fill: rgba(0, 255, 0, 0.4) !important;
}
.fbx-scada .fbx-widget, .fbx-scada .fbx-widget * {
  transition: opacity linear 0.1s;
}
.fbx-scada.scada-no_anim * {
  transition: none !important;
}
.fbx-scada .w-binary {
  /* Rotor spin */
  /* Pipe flow */
  /* on/off hiding */
}
.fbx-scada .w-binary .on-spin {
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.fbx-scada .w-binary.state-off .on-spin {
  animation-play-state: paused;
}
.fbx-scada .w-binary .on-spin {
  animation-name: scada-spin;
}
.fbx-scada .w-binary .on-spin.reverse {
  animation-name: scada-spin-reverse;
}
.fbx-scada .w-binary.state-reverse .on-spin {
  animation-name: scada-spin-reverse;
}
.fbx-scada .w-binary.state-reverse .on-spin.reverse {
  animation-name: scada-spin;
}
.fbx-scada .w-binary.w-reverse .forward-show, .fbx-scada .w-binary.w-reverse .reverse-show,
.fbx-scada .w-binary .manual {
  transition: opacity linear 0.1s;
}
.fbx-scada .w-binary .on-flow {
  stroke-dasharray: 5;
  animation: scada-dash 2s linear infinite;
}
.fbx-scada .w-binary .on-flow.reverse {
  animation: scada-dash-reverse 2s linear infinite;
}
.fbx-scada .w-binary.state-reverse .on-flow {
  animation: scada-dash-reverse 2s linear infinite;
}
.fbx-scada .w-binary.state-reverse .on-flow.reverse {
  animation: scada-dash 2s linear infinite;
}
.fbx-scada .w-binary.state-off .on-flow {
  animation-play-state: paused;
}
.fbx-scada .w-percent {
  /* width/height transform */
}
.fbx-scada .w-percent .percent-height {
  transition: height linear 0.5s;
}
.fbx-scada .w-percent .percent-width {
  transition: height linear 0.5s;
}
.fbx-scada .w-percent .percent-rot {
  transition: transform linear 0.5s;
}
.fbx-scada .w-fill, .fbx-scada .w-fill .value-fill {
  transition: fill linear 0.3s;
}
.fbx-scada .state-empty.empty-hide, .fbx-scada .state-empty .empty-hide {
  display: none !important;
}
.fbx-scada path,
.fbx-scada text,
.fbx-scada tspan,
.fbx-scada circle,
.fbx-scada line,
.fbx-scada rect,
.fbx-scada image,
.fbx-scada polygon,
.fbx-scada polyline,
.fbx-scada ellipse {
  pointer-events: none;
}
.fbx-scada .fbx-widget, .fbx-scada .fbx-widget * {
  pointer-events: all;
}

@keyframes scada-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes scada-spin-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes scada-dash {
  to {
    stroke-dashoffset: 10;
  }
}
@keyframes scada-dash-reverse {
  to {
    stroke-dashoffset: -10;
  }
}
.ManageGmap, #Chart.pqsync, #basic-chart, #complist-detailed {
  position: absolute;
  left: 0.617rem;
  top: 0.617rem;
  right: 0.617rem;
  bottom: 0.617rem;
}
.fullscreen .ManageGmap, .fullscreen #Chart.pqsync, .fullscreen #basic-chart, .fullscreen #complist-detailed {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.SettingPanel {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 14px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  display: flex;
  flex-flow: wrap;
  padding: 5px;
}

.Htm1.SettingPanel .Buttons {
  margin-left: 0;
}

.SettingPanel .Buttons {
  text-align: left;
  min-width: 160px;
  margin: 5px;
}
.SettingPanel .Buttons > button {
  height: 70px;
  width: 70px;
  margin-left: 5px;
  margin-bottom: 5px;
  display: inline-block;
  background-image: none !important;
  position: relative;
}
.SettingPanel .Buttons > button svg {
  fill: currentColor;
  position: absolute;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.SettingPanel .Buttons .ProgramPicker {
  font-size: 16px;
  width: 160px;
}
.SettingPanel .Buttons .ProgramPicker .ProgramBtn {
  width: 160px;
  height: 48px;
  line-height: 48px;
  vertical-align: middle;
  position: relative;
  border-top: 1px solid rgba(152, 152, 152, 0.33);
  background: #292929;
  color: #f1f1f1;
}
.SettingPanel .Buttons .ProgramPicker .ProgramBtn:hover {
  background: #5abfff;
  background: var(--c-primary);
  color: #222222;
}
.SettingPanel .Buttons .ProgramPicker .ProgramBtn .Label {
  width: 112px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  padding-left: 5px;
  cursor: pointer;
}
.SettingPanel .Buttons .ProgramPicker .ProgramBtn.selected .Label {
  font-weight: bold;
}
.SettingPanel .Buttons .ProgramPicker .ProgramBtn .ConfBtnWrap {
  display: block;
  position: absolute;
  right: 3px;
  top: 0;
  height: 48px;
}
.SettingPanel .Buttons .ProgramPicker .ProgramBtn .ConfBtnWrap .ConfBtn {
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #f1f1f1;
  font-size: 22px;
}
.SettingPanel .Buttons .ProgramPicker .ProgramBtn .ConfBtnWrap .ConfBtn:active, .SettingPanel .Buttons .ProgramPicker .ProgramBtn .ConfBtnWrap .ConfBtn.pushed {
  top: 1px;
}
.SettingPanel .Buttons .ProgramPicker .ProgramBtn .ConfBtnWrap .ConfBtn:hover {
  color: #222222;
}
.SettingPanel .Buttons .ProgramPicker .ProgramBtn.addnew {
  box-shadow: inset 0 3px 6px -3px rgba(0, 0, 0, 0.8);
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
  cursor: pointer;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #f1f1f1;
  font-size: 14px;
  opacity: 0.8;
}
.SettingPanel .Buttons .ProgramPicker .ProgramBtn.addnew span {
  position: relative;
  bottom: -2px;
}
.SettingPanel .Buttons .ProgramPicker .ProgramBtn.addnew:hover {
  opacity: 0.9;
  color: #fefefe;
}

/* silver box */
.SettingPanel .InfoBox {
  min-width: 300px;
  margin: 5px;
  flex: 1 0 0px;
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  text-align: left;
  font-weight: bold;
  color: #f1f1f1;
  cursor: default;
}
.SettingPanel .InfoBox.rangecontroller_infobox {
  width: unset;
}
.SettingPanel .InfoBox span.value {
  text-shadow: 0 0 0.15em rgba(0, 0, 0, 0.6);
}
.SettingPanel .InfoBox .Id {
  font-size: 80%;
  left: 18px;
  top: 6px;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.SettingPanel .InfoBox .Id > span {
  font-family: monospace;
}
.SettingPanel .InfoBox .Mode {
  align-self: baseline;
  padding-top: 10px;
  text-shadow: 0 0 3px black;
  color: #5abfff;
  color: var(--c-primary);
}
.SettingPanel .InfoBox .Mode span.warn {
  color: #FF6360;
}
.SettingPanel .InfoBox .Header {
  text-shadow: 0 0 3px black;
  font-size: 180%;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.SettingPanel .InfoBox .Row {
  display: flex;
  height: 60px;
  margin-right: 15px;
  margin-left: 15px;
  border-bottom: 1px solid #5a5a5a;
  align-items: center;
}
.SettingPanel .InfoBox .Row:last-of-type {
  border-bottom: none;
}
.SettingPanel .InfoBox .Row .Envelope {
  display: flex;
  align-items: center;
}
.SettingPanel .InfoBox .Row .Envelope:first-of-type {
  flex: 1 1 auto;
}
.SettingPanel .InfoBox .Row .Envelope.Spaced div {
  margin-right: 15px;
}
.SettingPanel .InfoBox .Row .Envelope.Spaced div:last-of-type {
  margin-right: 0;
}
.SettingPanel .InfoBox .Row .Filler {
  flex-grow: 1;
}
.SettingPanel .InfoBox .Row .Label {
  font-size: 90%;
  text-shadow: 0 0 3px black;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  display: table;
  width: 5px;
}
.SettingPanel .InfoBox .Row .Status {
  line-height: 1.2;
  flex: 1 1 auto;
}
.SettingPanel .InfoBox .Row .Status .value {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.SettingPanel .InfoBox .Row .Status .name {
  font-size: 90%;
  color: #5abfff;
  color: var(--c-primary);
}
.SettingPanel .InfoBox .Row .Status .value {
  font-size: 120%;
  padding-top: 3px;
}
.SettingPanel .InfoBox .Row .ControlModeIcon {
  height: 36px;
  width: 36px;
  margin-left: 30px;
}
.SettingPanel .InfoBox .Row .Hysteresis {
  white-space: nowrap;
  word-wrap: normal;
  align-self: flex-end !important;
  padding-bottom: 5px !important;
}
.SettingPanel .InfoBox .Row .Hysteresis span.label {
  font-size: 80%;
  text-shadow: 0 0 3px black;
}
.SettingPanel .InfoBox .Row .Hysteresis span.value, .SettingPanel .InfoBox .Row .Hysteresis span.unit {
  font-size: 100%;
  text-shadow: 0 0 3px black;
}
.SettingPanel .InfoBox .Row .Actual {
  white-space: nowrap;
  word-wrap: normal;
  font-size: 280%;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.SettingPanel .InfoBox .Row .ValueSet {
  font-size: 200%;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.SettingPanel .InfoBox .Icons {
  height: 60px;
  width: 40px;
  color: #f1f1f1;
  padding: 5px;
  background-image: none !important;
  position: relative;
}
.SettingPanel .InfoBox .Icons svg {
  fill: currentColor;
  width: 100%;
  height: 100%;
}
.SettingPanel .InfoBox .HistoryIcon {
  background-repeat: no-repeat;
  background-size: 25px 25px;
}
.SettingPanel .InfoBox .WorkingIcon {
  overflow-x: visible;
}
.SettingPanel .InfoBox .WorkingIcon.wheel {
  animation: spin 3s infinite linear;
  color: var(--c-primary);
}
.SettingPanel .InfoBox .WorkingIcon.wheel svg {
  width: 100%;
  height: 100%;
}
.SettingPanel .InfoBox .WorkingIcon.wheel.off {
  animation: none;
  color: #cfcece;
}

.SettingPanel .Diagram {
  align-self: baseline;
  margin: 5px;
  padding: 10px;
  border: 1px solid rgba(152, 152, 152, 0.33);
}

.SettingPanel .RangeValueName {
  color: #5abfff;
  color: var(--c-primary);
}

@media screen and (max-width: 544px) {
  .Htm1 .Buttons {
    display: block;
    width: 100%;
  }
}
.Uni3Section .InfoTable td.btn-history, .ElectroAceanDisplay .MbInfoPanel .InfoTable td.btn-history, .ManageHistButton {
  background-image: url("/images/item/chart.svg");
  cursor: pointer;
  opacity: 0.8;
  width: 25px;
  height: 25px;
  background-size: 20px;
}
.Uni3Section .InfoTable td.btn-history:hover, .ElectroAceanDisplay .MbInfoPanel .InfoTable td.btn-history:hover, .ManageHistButton:hover {
  opacity: 1;
}

.ManageHistButton {
  display: inline-block;
  align-self: end;
  margin-left: 0.381rem;
}

.BentoManagePanel {
  /*
      .Content originally used this:
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

      but that does not work with a full-width Row, creating blank columns.
      Media queries and fixed column counts fix the problem.
   */
}
.BentoManagePanel > h1 {
  color: #f1f1f1;
  padding-top: 0;
  margin-bottom: 0.381rem;
}
.BentoManagePanel > .Content {
  background-color: #323232;
  padding: 0.617rem;
  display: grid;
  -moz-column-gap: 0.617rem;
       column-gap: 0.617rem;
  row-gap: 0.617rem;
  grid-template-columns: 1fr;
}
.BentoManagePanel > .Content > .Row {
  grid-column: 1/-1;
}
.BentoManagePanel.cols2 > .Content {
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 1100px) {
  .BentoManagePanel.cols2 > .Content {
    grid-template-columns: 1fr;
  }
}
.BentoManagePanel.cols3 > .Content {
  grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 1100px) {
  .BentoManagePanel.cols3 > .Content {
    grid-template-columns: 1fr;
  }
}
.BentoManagePanel .Group {
  background-color: #292929;
}
.BentoManagePanel .Group.pad {
  padding: 0.381rem;
}
.BentoManagePanel .Group > h2:first-child,
.BentoManagePanel .Group > h3:first-child {
  margin-top: 0;
}
.BentoManagePanel .Column > h2:first-child,
.BentoManagePanel .Column > h3:first-child {
  margin-top: 0;
}
.BentoManagePanel .Column > .Group {
  margin-top: 0.617rem;
}
.BentoManagePanel .Column > .Group:first-child {
  margin-top: 0;
}
.BentoManagePanel .Row {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
}
.BentoManagePanel .Row.j-center {
  justify-content: center;
}
.BentoManagePanel .Row.j-left {
  justify-content: flex-start;
}
.BentoManagePanel .Row.j-right {
  justify-content: flex-end;
}
.BentoManagePanel .Row.j-around {
  justify-content: space-around;
}
.BentoManagePanel .Row.j-even {
  justify-content: space-between;
}
@supports not (-ms-ime-align: auto) {
  .BentoManagePanel .Row.j-even {
    justify-content: space-evenly;
  }
}
.BentoManagePanel .Row.j-columns, .BentoManagePanel .Row .columns {
  display: block;
  -moz-columns: 2;
       columns: 2;
  -moz-column-gap: 2.619rem;
       column-gap: 2.619rem;
}
@media screen and (max-width: 1360px) {
  .BentoManagePanel .Row.j-columns, .BentoManagePanel .Row .columns {
    -moz-columns: 1;
         columns: 1;
  }
}
.BentoManagePanel .Row .InfoTable {
  width: auto;
  margin-bottom: 1rem;
}
.BentoManagePanel .Row .InfoTable td.property {
  color: #f1f1f1;
  width: 170px;
}
.BentoManagePanel .Row .InfoTable td.value {
  white-space: nowrap;
}
.BentoManagePanel .Gauge > .Name {
  text-align: center;
}
.BentoManagePanel .button.active, .BentoManagePanel .button.active:hover {
  background: var(--c-primary);
}
.BentoManagePanel .button:hover {
  background: var(--c-primary);
}
.BentoManagePanel .Row.tabs {
  padding: 0;
  display: flex;
  justify-content: flex-start;
  border-bottom: 2px solid #222222;
  margin-bottom: 2px;
}
.BentoManagePanel .Row.tabs a {
  padding: 15px 15px 11px 15px;
  text-decoration: none;
  color: #f1f1f1;
  cursor: pointer;
  background: transparent;
  display: inline-block;
  /* this is a hack so the bold variant does not stretch the button */
}
.BentoManagePanel .Row.tabs a.active, .BentoManagePanel .Row.tabs a.active:hover {
  background: #222222;
  font-weight: bold;
}
.BentoManagePanel .Row.tabs a:hover {
  background: var(--c-primary);
}
.BentoManagePanel .Row.tabs a::after {
  display: block;
  content: attr(data-label);
  font-weight: bold;
  height: 1px;
  color: transparent;
  overflow: hidden;
  visibility: hidden;
}
.BentoManagePanel .table-diagram {
  margin: 0 0 5px -10px;
}
.BentoManagePanel .table-diagram.last {
  margin-bottom: 15px;
}

.StSliderBox {
  position: absolute;
  top: 285px;
  left: 0;
  border: 0 none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  height: 100px;
  width: 730px;
  /* range highlight */
}
.StSliderBox .range {
  height: 50px !important;
  top: 24px !important;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  border-left: 0 none !important;
  border-right: 0 none !important;
}
.StSliderBox .EndLabel {
  position: absolute;
  width: 60px;
  font-size: 18px;
  line-height: 18px;
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  font-weight: bold;
  color: #eee;
  text-align: center;
}
.StSliderBox .EndLabel.left {
  left: 6px;
}
.StSliderBox .EndLabel.right {
  right: 6px;
}
.StSliderBox .ui-slider {
  height: 100px;
  width: 583px;
  left: 73px;
  position: absolute;
  text-align: left;
  top: 0;
  background: none;
  border-radius: 0;
  border: 0 none;
}
.StSliderBox .ui-slider-handle {
  border: 0 none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  outline: 0 none !important;
  position: absolute;
  z-index: 20;
  height: 100px;
  width: 26px;
  cursor: pointer;
  transform: translate(-50%, 0);
  top: 0;
  background-color: transparent;
  border-radius: 0;
  border: 0 none;
}
.StSliderBox .ui-slider-range {
  position: absolute;
  z-index: 10;
  display: block;
  border: 0;
  background-repeat: repeat-x;
  top: 0;
  height: 100px;
}
.StSliderBox .ui-slider-range-min {
  left: 0;
}
.StSliderBox .ui-slider-range-max {
  right: 0;
}
.StSliderBox.light {
  background-image: url("/images/setting/sliders/light_slide.png");
  border: 1px solid #5a5a5a;
}
.StSliderBox.light .ui-slider-range {
  height: 10px !important;
  top: 46px !important;
  background-color: rgba(255, 255, 255, 0.2);
}
.StSliderBox.light .ui-slider {
  width: 596px;
  left: 67px;
}
.StSliderBox.light .ui-slider-handle {
  background-image: url("/images/setting/sliders/light_handle.png");
}
.StSliderBox.temperature {
  border: 1px solid #5a5a5a;
  border-radius: 2px;
  background: #292929;
  background-image: url("/images/setting/sliders/temperature_slide2.png");
}
.StSliderBox.temperature .ui-slider-handle {
  background-image: url("/images/setting/sliders/temp_slider.png");
}
.StSliderBox.time {
  background-image: url("/images/setting/sliders/time_slide.png");
}
.StSliderBox.time .ui-slider-handle {
  background-image: url("/images/setting/sliders/time_handle.png");
}

.thermo-program-size, #ThermoProgramEditor {
  margin: 20px auto 0;
}
.thermo-program-size .pgm-navbar, #ThermoProgramEditor .pgm-navbar, .thermo-program-size .pgm-main-box, #ThermoProgramEditor .pgm-main-box {
  margin-left: auto;
  margin-right: auto;
  width: 894px;
}
.thermo-program-size .BacExcSchWrapper, #ThermoProgramEditor .BacExcSchWrapper {
  margin: 0 auto;
  max-width: 1100px;
}

#ThermoProgramEditor {
  color: #f1f1f1;
  position: relative;
}
#ThermoProgramEditor .pgm-navbar {
  margin-bottom: 0;
}
#ThermoProgramEditor .pgm-navbar .pagetitle {
  display: inline-block;
  padding-left: 4px;
}
#ThermoProgramEditor .pgm-navbar .name input {
  width: 140px;
}
#ThermoProgramEditor .pgm-navbar .shortname {
  padding-left: 8px;
  padding-right: 0;
}
#ThermoProgramEditor .pgm-navbar .shortname input {
  width: 80px;
  border-radius: 2px;
  border: 0 none;
}
#ThermoProgramEditor .color-0 {
  background-color: #203148;
  background-repeat: repeat;
}
#ThermoProgramEditor .color-1 {
  background-color: #c4136f;
  background-repeat: repeat;
}
#ThermoProgramEditor .color-2 {
  background-color: #d1bb16;
  background-repeat: repeat;
}
#ThermoProgramEditor .color-3 {
  background-color: #00a7d0;
  background-repeat: repeat;
}
#ThermoProgramEditor .color-4 {
  background-color: #ef750e;
  background-repeat: repeat;
}
#ThermoProgramEditor .color-5 {
  background-color: #1fb447;
  background-repeat: repeat;
}
#ThermoProgramEditor .color-6 {
  background-color: #FF5147;
  background-repeat: repeat;
}
#ThermoProgramEditor .color-7 {
  background-color: #83df05;
  background-repeat: repeat;
}
#ThermoProgramEditor .color-8 {
  background-color: #FF47E9;
  background-repeat: repeat;
}
#ThermoProgramEditor .color-9 {
  background-color: #49ffc8;
  background-repeat: repeat;
}
.accessibility-colorblind #ThermoProgramEditor .color-0 {
  background-color: #203148;
}
.accessibility-colorblind #ThermoProgramEditor .color-1 {
  background-color: #FF2094;
}
.accessibility-colorblind #ThermoProgramEditor .color-2 {
  background-color: #d1bb16;
}
.accessibility-colorblind #ThermoProgramEditor .color-3 {
  background-color: #88DFF5;
}
.accessibility-colorblind #ThermoProgramEditor .color-4 {
  background-color: #FFE800;
}
.accessibility-colorblind #ThermoProgramEditor .color-5 {
  background-color: #1fb447;
}
.accessibility-colorblind #ThermoProgramEditor .color-6 {
  background-color: #FF5147;
}
.accessibility-colorblind #ThermoProgramEditor .color-7 {
  background-color: #C547FF;
}
.accessibility-colorblind #ThermoProgramEditor .color-8 {
  background-color: #FF47E9;
}
.accessibility-colorblind #ThermoProgramEditor .color-9 {
  background-color: #49ffc8;
}
.accessibility-colorblind #ThermoProgramEditor .color-1 {
  background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
  background-size: 7.07px 7.07px;
}
.accessibility-colorblind #ThermoProgramEditor .color-2 {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
  background-size: 10px 10px;
}
.accessibility-colorblind #ThermoProgramEditor .color-3 {
  background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%), linear-gradient(45deg, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
  background-size: 7.07px 7.07px;
}
.accessibility-colorblind #ThermoProgramEditor .color-4 {
  background-image: radial-gradient(rgba(0, 0, 0, 0.6) 1px, rgba(0, 0, 0, 0) 0);
  background-size: 5px 5px;
}
.accessibility-colorblind #ThermoProgramEditor .color-5 {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
  background-size: 7.07px 7.07px;
}
.accessibility-colorblind #ThermoProgramEditor .color-6 {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 16.67%, rgba(0, 0, 0, 0) 16.67%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6) 66.67%, rgba(0, 0, 0, 0) 66.67%, rgba(0, 0, 0, 0) 100%);
  background-size: 24px 24px;
}
.accessibility-colorblind #ThermoProgramEditor .color-7 {
  background-image: radial-gradient(rgba(0, 0, 0, 0.6) 2px, rgba(0, 0, 0, 0) 0);
  background-size: 10px 10px;
}
.accessibility-colorblind #ThermoProgramEditor .color-8 {
  background-image: radial-gradient(rgba(0, 0, 0, 0.6) 2px, rgba(0, 0, 0, 0) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
  background-size: 10px 10px;
}
.accessibility-colorblind #ThermoProgramEditor .color-9 {
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%);
  background-size: 10px 10px;
}

#ThermoProgramEditor .pgm-main-box {
  position: relative;
  margin-top: 15px;
  height: 560px;
  width: 894px;
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
  white-space: nowrap;
  word-wrap: normal;
}
#ThermoProgramEditor .pgm-main-box .presets-box {
  width: 200px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
#ThermoProgramEditor .pgm-main-box .presets-box.full .Preset:last-child {
  border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset {
  text-align: center;
  padding: 5px;
  color: #f1f1f1;
  background-color: #1d6ea8;
  position: relative;
  border-top: 1px solid #00568F;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset.selected {
  background: #1f9deb;
  color: #f1f1f1;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset.selected .Value input {
  color: #f1f1f1;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset.fullclick {
  cursor: pointer;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset.fullclick .Value {
  width: 115px;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset, #ThermoProgramEditor .pgm-main-box .presets-box .Preset > * {
  vertical-align: middle;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset:first-child {
  border-top-left-radius: 1px;
  border-top-right-radius: 1px;
  border-top: 1px solid #1d6ea8;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset:first-child.selected {
  border-top: 1px solid #1f9deb;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .DelBtn {
  display: inline-block;
  visibility: hidden;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.6;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .DelBtn:active, #ThermoProgramEditor .pgm-main-box .presets-box .Preset .DelBtn.pushed {
  top: 1px;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .DelBtn::before {
  margin-right: 5px;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .DelBtn:hover {
  opacity: 1;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .CmodeIcon {
  display: inline-block;
  height: 25px;
  width: 25px;
  margin-right: 5px;
  margin-left: -8px;
  background-size: 25px 25px;
  background-position: center center;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .CmodeIcon.cm-1 {
  background-image: url("/images/setting/icons/day.png");
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .CmodeIcon.cm-2 {
  background-image: url("/images/setting/icons/night.png");
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .CmodeIcon.cm-3 {
  background-image: url("/images/setting/icons/depression.png");
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset:last-child .DelBtn {
  visibility: visible;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset:first-child .DelBtn {
  visibility: hidden !important;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .Value {
  display: inline-block;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .Value input {
  color: white;
  padding: 5px 8px;
  font-size: 20px;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: none;
  border-radius: 2px;
  border: 0 none;
  height: initial;
  line-height: initial;
  width: 80px;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .Value input::-moz-selection {
  color: black;
  background-color: white;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .Value input::selection {
  color: black;
  background-color: white;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .Value input:focus, #ThermoProgramEditor .pgm-main-box .presets-box .Preset .Value input:hover {
  outline: 0 none;
  background: rgba(255, 255, 255, 0.3);
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .Value .unit {
  display: inline-block;
  text-align: left;
  width: 2em;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .Color {
  margin-left: 5px;
  display: inline-block;
  color: white;
  height: 32px;
  width: 32px;
  line-height: 28px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-radius: 2px;
  border: 2px solid #b0ddf8;
  cursor: pointer;
  text-align: center;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .Color:active, #ThermoProgramEditor .pgm-main-box .presets-box .Preset .Color.pushed {
  top: 1px;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset .Color::before {
  text-shadow: 0 1px 3px black;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset.addnew {
  box-shadow: inset 0 3px 6px -3px rgba(0, 0, 0, 0.8);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  font-size: 14px;
  padding: 2px;
  opacity: 0.8;
  cursor: pointer;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset.addnew span {
  position: relative;
  bottom: -2px;
}
#ThermoProgramEditor .pgm-main-box .presets-box .Preset.addnew:hover {
  opacity: 0.9;
}
#ThermoProgramEditor .pgm-main-box .days-box {
  width: 678px;
  height: 100%;
  position: absolute;
  left: 216px;
  top: 0;
}
#ThermoProgramEditor .pgm-main-box .days-box .Day {
  color: white;
  margin-bottom: 12px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
#ThermoProgramEditor .pgm-main-box .days-box .Day .Title {
  z-index: 10;
  position: absolute;
  right: 3px;
  top: 0;
  vertical-align: middle;
  height: 22px;
  line-height: 12px;
  text-align: left;
  font-size: 18px;
  font-variant: small-caps;
  color: white;
  background-color: #1D76B0;
  border-bottom-left-radius: 3px;
  padding: 5px;
  width: 100px;
  transition: opacity 0.1s;
  pointer-events: none;
}
:root.dark #ThermoProgramEditor .pgm-main-box .days-box .Day .Title {
  box-shadow: -3px 3px 1px -3px black;
}
:root.light #ThermoProgramEditor .pgm-main-box .days-box .Day .Title {
  border-left: 1px solid #1D76B0;
  border-bottom: 1px solid #1D76B0;
}
#ThermoProgramEditor .pgm-main-box .days-box .Day:hover .Title {
  opacity: 0.2;
  cursor: default;
}
#ThermoProgramEditor .pgm-main-box .days-box .Day .HourBar {
  height: 60px;
  border-left: 3px solid #1D76B0;
  border-right: 3px solid #1D76B0;
  border-radius: 1px;
  background: #203148;
}
#ThermoProgramEditor .pgm-main-box .days-box .Day .HourBar .quarters {
  position: absolute;
  top: 0;
  left: 3px;
  display: flex;
  align-content: stretch;
}
#ThermoProgramEditor .pgm-main-box .days-box .Day .HourBar .quarters div {
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-top: 1px solid #16577e;
  border-bottom: 1px solid #1D76B0;
  display: inline-block;
  height: 48px;
  width: 7px;
}
#ThermoProgramEditor .pgm-main-box .days-box .Day .HourBar .quarters div:last-child {
  border-right: 0 none;
}
#ThermoProgramEditor .pgm-main-box .days-box .Day .HourBar .quarters div::before {
  content: "";
  border-top: 3px solid white;
  border-bottom: 3px solid white;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  display: block;
  width: 0;
  height: 100%;
  opacity: 0;
}
#ThermoProgramEditor .pgm-main-box .days-box .Day .HourBar .quarters div:hover::before {
  opacity: 0.8;
}
#ThermoProgramEditor .pgm-main-box .days-box .Day .HourBar .hours {
  height: 12px;
  line-height: 12px;
  position: absolute;
  bottom: 0;
  left: 3px;
  display: flex;
  align-content: stretch;
}
#ThermoProgramEditor .pgm-main-box .days-box .Day .HourBar .hours div {
  text-align: center;
  display: inline-block;
  height: 12px;
  font-size: 10px;
  width: 28px;
  vertical-align: top;
  background: #1D76B0;
}
#ThermoProgramEditor .pgm-main-box .days-box .Day .HourBar .hours div:nth-child(odd) {
  background: #16577e;
}
#ThermoProgramEditor .pgm-main-box .days-box #pgm_delete_btn {
  display: block;
  text-align: right;
  font-size: 14px;
  color: #e84040;
  opacity: 0.4;
  text-decoration: none;
}
#ThermoProgramEditor .pgm-main-box .days-box #pgm_delete_btn:hover {
  opacity: 1;
  text-decoration: underline;
}

#PlannerSetting {
  width: 780px;
  margin: 0 auto;
  color: #f1f1f1;
  position: relative;
}
#PlannerSetting > .Navbar {
  margin-bottom: 0;
}
#PlannerSetting > .Navbar .pagetitle {
  display: inline-block;
  padding-left: 0.617rem;
}
#PlannerSetting > .MainBox {
  margin: 0.617rem auto 0 auto;
  background: #323232;
  padding: 0.617rem;
  border-radius: 3px;
}

#Planner {
  position: relative;
  text-align: left;
  cursor: default;
  color: black;
  font-size: 18px;
  height: 550px;
  width: 730px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
#Planner .Options {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 0 0 10px;
  height: 100%;
  width: 230px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
#Planner .Options .Group {
  color: #f1f1f1;
  margin-bottom: 15px;
}
#Planner .Options .Group .Title {
  color: var(--c-primary);
  font-weight: bold;
  font-size: 14px;
  cursor: default;
}
#Planner .Options .Option {
  cursor: pointer;
}
#Planner .Options .Option:hover {
  background: rgba(0, 0, 0, 0.07);
}
#Planner .Options .Option:active {
  color: var(--c-primary);
}
#Planner .Options .Option .Icon {
  display: inline-block;
  width: 20px;
}
#Planner .Options .Option .Icon::before {
  text-align: left;
  vertical-align: middle;
}
#Planner .Options .Option .Label {
  display: inline-block;
}
#Planner .Rules {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 500px;
  border-radius: 2px;
  padding: 0;
}
#Planner .Rules .RuleWrap {
  overflow-y: auto;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 2px;
}
#Planner .Rules::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 10;
  border-radius: 2px;
}

#Planner .Rule .BasicBtn, #Planner .Rule.nthmin .Number .Btn, #Planner .Rule.nthhour .Number .Btn, #Planner .Rule.nthday .Number .Btn, #Planner .Rule.weekdays .Choice, #Planner .Rule.hours .Choice, #Planner .Rule.months .Choice {
  box-shadow: 0 1.5px 1px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: rgba(255, 255, 255, 0.3);
  color: #2d3238;
  font-size: 16px;
  line-height: 30px;
  height: 30px;
  padding-left: 3px;
  padding-right: 3px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border-radius: 2px;
}
#Planner .Rule .BasicBtn:active, #Planner .Rule.nthmin .Number .Btn:active, #Planner .Rule.nthhour .Number .Btn:active, #Planner .Rule.nthday .Number .Btn:active, #Planner .Rule.weekdays .Choice:active, #Planner .Rule.hours .Choice:active, #Planner .Rule.months .Choice:active {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#Planner .Rule .BasicBtn:active, #Planner .Rule.nthmin .Number .Btn:active, #Planner .Rule.nthhour .Number .Btn:active, #Planner .Rule.nthday .Number .Btn:active, #Planner .Rule.weekdays .Choice:active, #Planner .Rule.hours .Choice:active, #Planner .Rule.months .Choice:active, #Planner .Rule .pushed.BasicBtn, #Planner .Rule.nthmin .Number .pushed.Btn, #Planner .Rule.nthhour .Number .pushed.Btn, #Planner .Rule.nthday .Number .pushed.Btn, #Planner .Rule.weekdays .pushed.Choice, #Planner .Rule.hours .pushed.Choice, #Planner .Rule.months .pushed.Choice {
  top: 1px;
}
#Planner .Rule .BasicBtn:hover, #Planner .Rule.nthmin .Number .Btn:hover, #Planner .Rule.nthhour .Number .Btn:hover, #Planner .Rule.nthday .Number .Btn:hover, #Planner .Rule.weekdays .Choice:hover, #Planner .Rule.hours .Choice:hover, #Planner .Rule.months .Choice:hover {
  background: rgba(255, 255, 255, 0.6);
}
#Planner .Rule .selected.BasicBtn, #Planner .Rule.nthmin .Number .selected.Btn, #Planner .Rule.nthhour .Number .selected.Btn, #Planner .Rule.nthday .Number .selected.Btn, #Planner .Rule.weekdays .selected.Choice, #Planner .Rule.hours .selected.Choice, #Planner .Rule.months .selected.Choice {
  background: white;
}

#Planner .Rule.weekdays .ChoiceBox .row, #Planner .Rule.hours .ChoiceBox .row, #Planner .Rule.months .ChoiceBox .row {
  margin-bottom: 8px;
}
#Planner .Rule.weekdays .ChoiceBox .row:last-child, #Planner .Rule.hours .ChoiceBox .row:last-child, #Planner .Rule.months .ChoiceBox .row:last-child {
  margin-bottom: 0;
}
#Planner .Rule.weekdays .Choice, #Planner .Rule.hours .Choice, #Planner .Rule.months .Choice {
  margin-right: 4px;
}

#Planner .Rule.nthmin .Number .Btn, #Planner .Rule.nthhour .Number .Btn, #Planner .Rule.nthday .Number .Btn {
  width: 30px;
  font-size: 18px;
}
#Planner .Rule.nthmin .Number .Btn::before, #Planner .Rule.nthhour .Number .Btn::before, #Planner .Rule.nthday .Number .Btn::before {
  vertical-align: middle;
  margin: 0;
}
#Planner .Rule.nthmin .Number input[type=text], #Planner .Rule.nthhour .Number input[type=text], #Planner .Rule.nthday .Number input[type=text] {
  width: 6em;
  text-align: center;
  vertical-align: middle;
}

#Planner .Rule {
  color: #f1f1f1;
  background: #4c4c4c;
  padding: 8px;
  border-bottom: 1px solid #404040;
  border-top: 1px solid #5e5e5e;
}
#Planner .Rule:first-child {
  margin-top: 0;
}
#Planner .Rule:last-child {
  margin-bottom: 0;
}
#Planner .Rule .BasicBtn {
  padding-left: 6px;
  padding-right: 6px;
}
#Planner .Rule .BasicBtn.small {
  font-size: 14px;
  line-height: 25px;
  height: 25px;
  padding-left: 3px;
  padding-right: 3px;
}
#Planner .Rule .Title {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2em;
  vertical-align: middle;
  padding-bottom: 6px;
  position: relative;
}
#Planner .Rule .Title .Help {
  position: absolute;
  right: 0;
  top: 0;
}
#Planner .Rule .Title .Help:hover::before {
  background: var(--c-primary);
}
#Planner .Rule .Title .Help:active::before {
  top: 1px;
}
#Planner .Rule .Title .Help::before {
  position: relative;
  content: "?";
  color: #2d3238;
  background: #f1f1f1;
  border-radius: 50%;
  display: block;
  height: 18px;
  width: 18px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
}
#Planner .Rule input[type=password], #Planner .Rule input[type=text], #Planner .Rule input[type=number], #Planner .Rule textarea, #Planner .Rule input:not([type]), #Planner .Rule input[type=datetime-local], #Planner .Rule input[type=date], #Planner .Rule input[type=month], #Planner .Rule input[type=time] {
  background: #3c3c3c;
  color: #f1f1f1;
  border-radius: 2px;
  box-shadow: inset 0 0 5px black;
  border: none;
  margin: 0 5px;
  font-size: 0.9rem;
  padding: 4px;
}
#Planner .Rule input[type=password]::-moz-selection, #Planner .Rule input[type=text]::-moz-selection, #Planner .Rule input[type=number]::-moz-selection, #Planner .Rule textarea::-moz-selection, #Planner .Rule input:not([type])::-moz-selection, #Planner .Rule input[type=datetime-local]::-moz-selection, #Planner .Rule input[type=date]::-moz-selection, #Planner .Rule input[type=month]::-moz-selection, #Planner .Rule input[type=time]::-moz-selection {
  background: #1164c2;
  color: white;
}
#Planner .Rule input[type=password]::selection, #Planner .Rule input[type=text]::selection, #Planner .Rule input[type=number]::selection, #Planner .Rule textarea::selection, #Planner .Rule input:not([type])::selection, #Planner .Rule input[type=datetime-local]::selection, #Planner .Rule input[type=date]::selection, #Planner .Rule input[type=month]::selection, #Planner .Rule input[type=time]::selection {
  background: #1164c2;
  color: white;
}
#Planner .Rule input[type=password]::-moz-selection, #Planner .Rule input[type=text]::-moz-selection, #Planner .Rule input[type=number]::-moz-selection, #Planner .Rule textarea::-moz-selection, #Planner .Rule input:not([type])::-moz-selection, #Planner .Rule input[type=datetime-local]::-moz-selection, #Planner .Rule input[type=date]::-moz-selection, #Planner .Rule input[type=month]::-moz-selection, #Planner .Rule input[type=time]::-moz-selection {
  background: #1164c2;
  color: white;
}
#Planner .Rule .Half {
  width: 50%;
}
#Planner .Rule .Half.right {
  float: right;
}
#Planner .Rule.months .Choice {
  width: 2em;
}
#Planner .Rule.hours .Choice {
  width: 2em;
}
#Planner .Rule.hours .Choice.gap {
  margin-right: 8px;
}
#Planner .Rule.weekdays .Choice {
  width: 40px;
}
#Planner .Rule.condition textarea, #Planner .Rule.orcondition textarea {
  width: 100%;
  margin-left: 0;
  height: 5.2em;
  resize: vertical;
  font-size: 16px;
}
#Planner .Rule.timeranges .wrap, #Planner .Rule.dateranges .wrap {
  position: relative;
}
#Planner .Rule.timeranges .wrap textarea, #Planner .Rule.dateranges .wrap textarea {
  width: 250px;
  margin-left: 0;
  height: 8em;
  resize: vertical;
  font-size: 16px;
  padding-right: 5px;
}
#Planner .Rule.timeranges .wrap .Guide, #Planner .Rule.dateranges .wrap .Guide {
  position: absolute;
  width: 210px;
  right: 0;
  top: 0;
  font-size: 90%;
  border: 0 none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
#Planner .Rule.timeranges .wrap .Guide p, #Planner .Rule.dateranges .wrap .Guide p {
  margin: 0 0 5px;
}
#Planner .Rule.weekplan td {
  padding: 0.381rem;
}
#Planner .Rule.weekplan label {
  cursor: pointer;
}
#Planner .Rule.weekplan #pgm-add {
  margin-top: 0.381rem;
}

.ElectroAceanDisplay {
  width: 950px;
  margin: 0 auto;
}
.ElectroAceanDisplay h1 {
  text-align: left;
  color: #f1f1f1;
  margin-bottom: 0.2em;
  margin-left: 0;
}
.ElectroAceanDisplay .MbInfoPanel {
  height: 550px;
  width: 950px;
  display: block;
  border-radius: 2px;
  background: #323232;
  margin: 0;
  padding: 0;
  font-size: 16px;
  position: relative;
  cursor: default;
}
.ElectroAceanDisplay .MbInfoPanel .InfoTable {
  width: 300px;
  border-collapse: collapse;
  margin: 5px 0;
}
.ElectroAceanDisplay .MbInfoPanel .InfoTable.gap-above {
  margin-top: 15px;
}
.ElectroAceanDisplay .MbInfoPanel .InfoTable td {
  padding: 0 2px;
}
.ElectroAceanDisplay .MbInfoPanel .InfoTable td.property {
  color: var(--c-primary);
  text-align: right;
  padding-right: 5px !important;
  font-size: 18px;
  width: 130px;
  overflow: hidden;
  white-space: nowrap;
}
.ElectroAceanDisplay .MbInfoPanel .InfoTable td.value {
  color: #f1f1f1;
  text-align: left;
  padding-right: 5px;
  font-size: 18px;
  font-weight: bold;
}
.ElectroAceanDisplay .MbInfoPanel .InfoTable td.btn-history {
  width: 40px;
  text-align: center;
}
.ElectroAceanDisplay .MbInfoPanel .Section {
  position: absolute;
  display: block;
  background-color: #292929;
  border-radius: 2px;
}
.ElectroAceanDisplay .MbInfoPanel .Section .Title {
  font-weight: bold;
  font-size: 18px;
  color: #f1f1f1;
  line-height: 20px;
  padding-top: 15px;
  padding-bottom: 10px;
  display: block;
  margin-left: 15px;
}
.ElectroAceanDisplay .MbInfoPanel .Section .Title.large-gap {
  padding-top: 30px;
}
.ElectroAceanDisplay .MbInfoPanel .Section.left {
  left: 15px;
  top: 15px;
  bottom: 15px;
  width: 300px;
}
.ElectroAceanDisplay .MbInfoPanel .Section.left .InfoTable {
  width: 290px;
  margin-left: 15px;
}
.ElectroAceanDisplay .MbInfoPanel .Section.left .InfoTable td.property {
  width: 135px;
}
.ElectroAceanDisplay .MbInfoPanel .Section.top, .ElectroAceanDisplay .MbInfoPanel .Section.bottom {
  height: 252.5px;
  left: 330px;
  right: 15px;
}
.ElectroAceanDisplay .MbInfoPanel .Section.top .Title, .ElectroAceanDisplay .MbInfoPanel .Section.bottom .Title {
  text-align: left;
  margin-left: 15px;
}
.ElectroAceanDisplay .MbInfoPanel .Section.top .InfoTable, .ElectroAceanDisplay .MbInfoPanel .Section.bottom .InfoTable {
  width: 350px;
  margin-left: 15px;
}
.ElectroAceanDisplay .MbInfoPanel .Section.top .InfoTable td.property, .ElectroAceanDisplay .MbInfoPanel .Section.bottom .InfoTable td.property {
  width: 160px;
}
.ElectroAceanDisplay .MbInfoPanel .Section.top {
  top: 15px;
}
.ElectroAceanDisplay .MbInfoPanel .Section.bottom {
  bottom: 15px;
}
.ElectroAceanDisplay .MbInfoPanel .QuadrantDisplay {
  width: 230px;
  height: 230px;
  position: absolute !important;
  right: 15px;
  top: calc((100% - 230px) / 2);
  background-image: url("/images/setting/electro_mb_square_small.png");
}
.ElectroAceanDisplay .MbInfoPanel .QuadrantDisplay > div {
  height: 97px;
  width: 97px;
  text-align: center;
  position: absolute;
}
.ElectroAceanDisplay .MbInfoPanel .QuadrantDisplay > div .label, .ElectroAceanDisplay .MbInfoPanel .QuadrantDisplay > div .value {
  width: 100%;
  line-height: 18px;
  font-size: 17px;
  position: absolute;
  left: 0;
}
.ElectroAceanDisplay .MbInfoPanel .QuadrantDisplay > div .label {
  color: #f1f1f1;
  top: 20px;
}
.ElectroAceanDisplay .MbInfoPanel .QuadrantDisplay > div .value {
  font-weight: bold;
  color: #f1f1f1;
  top: 45px;
}
.ElectroAceanDisplay .MbInfoPanel .QuadrantDisplay > div.q2 {
  left: 17px;
  top: 17px;
}
.ElectroAceanDisplay .MbInfoPanel .QuadrantDisplay > div.q1 {
  right: 17px;
  top: 17px;
}
.ElectroAceanDisplay .MbInfoPanel .QuadrantDisplay > div.q3 {
  left: 17px;
  bottom: 17px;
}
.ElectroAceanDisplay .MbInfoPanel .QuadrantDisplay > div.q4 {
  right: 17px;
  bottom: 17px;
}

#ManageIframe {
  display: flex;
  position: absolute;
  width: calc(100% - 1.234rem);
  height: calc(100% - 1.234rem);
  flex-direction: column;
}
#ManageIframe .iframes {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#ManageIframe iframe {
  border: 0 none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  display: block;
  background-color: transparent;
}
#ManageIframe.arity1 iframe {
  width: 100%;
}
#ManageIframe.arity2 iframe {
  width: 50%;
}
#ManageIframe.arity4 iframe {
  width: 50%;
}

.CameraDetail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.CameraDetail img {
  max-width: 100%;
  max-height: 100%;
}
.CameraDetail.failed {
  background-image: url("/images/item/broken.png");
}
.CameraDetail.failed img {
  display: none;
}

@media screen and (max-width: 544px) {
  .CameraDetail {
    position: relative;
  }
  .CameraDetail img {
    width: 100%;
  }
}
#basic-chart .infobar .SeriesInfoBox .buttons span {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-size: 1em;
  background: #292929;
  color: #f1f1f1;
  border-radius: 4px;
  position: relative;
  min-width: initial;
  text-decoration: none;
  text-shadow: none;
}
#basic-chart .infobar .SeriesInfoBox .buttons span.active {
  background: var(--c-primary);
  color: white;
}
#basic-chart .infobar .SeriesInfoBox .buttons span:hover {
  text-decoration: none;
  background: var(--c-primary);
  color: white;
}
#basic-chart .infobar .SeriesInfoBox .buttons span.disabled:hover {
  background: #292929;
  color: #f1f1f1;
}
#basic-chart .infobar .SeriesInfoBox .buttons span.disabled {
  opacity: 0.6;
  cursor: default;
}

.ChartNav {
  padding-bottom: 0.235rem;
}
.ChartNav h1 {
  padding: 0;
  font-size: 160%;
}
.ChartNav h1.h-mobile {
  margin-bottom: 0.381rem;
  display: none;
}
@media screen and (max-width: 544px) {
  .ChartNav h1.h-mobile {
    display: block;
  }
}
.ChartNav h1.h-normal {
  margin: 0 0 0 auto;
  display: none;
}
@media screen and (min-width: 545px) {
  .ChartNav h1.h-normal {
    display: block;
  }
}
.ChartNav h1.h-normal.left {
  margin: 0;
}
.ChartNav h1.h-wide {
  margin: 0 0 0 auto;
  display: none;
}
@media screen and (min-width: 1101px) {
  .ChartNav h1.h-wide {
    display: block;
  }
}
.ChartNav .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.381rem;
}
.ChartNav .row:last-child {
  margin-bottom: 0;
}
.grandstream .ChartNav .row {
  margin-bottom: 0.235rem;
}
.grandstream .ChartNav .row:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 544px) {
  .ChartNav .row {
    margin-bottom: 0.235rem;
  }
  .ChartNav .row:last-child {
    margin-bottom: 0;
  }
}
.ChartNav .row > * {
  margin-right: 0.381rem;
}
.ChartNav .row > *:last-child {
  margin-right: 0;
  margin-left: 0;
}
.ChartNav .row .module {
  display: flex;
  align-items: center;
  margin-right: 0.381rem;
  margin-bottom: 0.381rem;
  padding: 0.381rem;
  background: rgba(0, 0, 0, 0.04);
  box-shadow: none;
  border-radius: 2px;
}
.grandstream .ChartNav .row .module {
  margin-right: 0.235rem;
  margin-bottom: 0.235rem;
  padding: 0.235rem;
}

@media screen and (max-width: 1100px) {
  .ChartNav .row .module {
    margin-right: 0.235rem;
    margin-bottom: 0.235rem;
    padding: 0.235rem;
  }
}
.ChartNav .row .module .gap {
  display: inline-block;
  height: 30px;
  border-left: 2px solid rgba(0, 0, 0, 0.2);
}
.ChartNav .row .module > * {
  margin-right: 0.381rem;
}
.ChartNav .row .module > *:last-child {
  margin-right: 0;
}
.ChartNav .row .module > *:nth-last-child(2):has(+ .bs-tooltip) {
  margin-right: 0;
}
.ChartNav .row label {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.ChartNav .row .picker {
  width: 6em;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  cursor: pointer;
}
.ChartNav .row .filler {
  flex-grow: 1;
}

.btn-dropdown .options {
  text-align: left;
  text-shadow: none;
  z-index: 1;
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: 100%;
  margin: 0;
  background: #292929;
  min-width: 120px;
  border: 1px solid #5a5a5a;
  padding: 0 0;
  border-radius: 0;
  box-shadow: none;
  display: none;
}
.btn-dropdown .options .inner {
  overflow-y: auto;
}
html.not-touch .btn-dropdown .options .inner {
  scrollbar-width: thin;
  scrollbar-color: #737373 #363636;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
html.not-touch .btn-dropdown .options .inner::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background: #363636;
}
html.not-touch .btn-dropdown .options .inner::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 3px;
}

.btn-dropdown .options::before {
  content: "";
  display: block;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #292929;
  position: absolute;
  top: -6px;
  left: 0.5em;
}
.btn-dropdown .options a {
  display: block;
  line-height: 1.8em;
  text-decoration: none;
  padding: 0 0.617rem 0 0.381rem;
  color: #f1f1f1;
  background: #292929;
}
.btn-dropdown .options a:hover {
  color: var(--c-primary);
  background: #292929;
}
@media screen and (max-width: 544px) {
  .btn-dropdown .options a {
    line-height: 2.4em;
  }
}
.btn-dropdown .options a.spacer {
  border-top: 1px dotted #999;
}
.btn-dropdown .options a.x-cust-series-toggle {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: #7d7d7d;
  background: #292929;
}
.btn-dropdown .options a.x-cust-series-toggle.selected, .btn-dropdown .options a.x-cust-series-toggle.clear, .btn-dropdown .options a.x-cust-series-toggle.all {
  color: #f1f1f1;
  background: #292929;
}
.btn-dropdown .options a.x-cust-series-toggle:hover {
  color: var(--c-primary);
  background: #292929;
}
.btn-dropdown .options a.x-cust-series-toggle::before {
  content: "\e83e";
}
.btn-dropdown .options a.x-cust-series-toggle.selected::before {
  content: "\e83d";
}
.btn-dropdown .options a.x-cust-series-toggle.clear::before {
  content: "\e813";
}
.btn-dropdown .options a.x-cust-series-toggle.all::before {
  content: "\e821";
}
.btn-dropdown.to-left .options {
  right: 0;
  left: initial;
}
.btn-dropdown.to-left .options::before {
  left: initial;
  right: 0.5em;
}
@media screen and (max-width: 544px) {
  .btn-dropdown.mobileToLeft .options {
    right: 0;
    left: initial;
  }
  .btn-dropdown.mobileToLeft .options::before {
    left: initial;
    right: 0.5em;
  }
}
.btn-dropdown:hover .options {
  display: block;
}

@media screen and (max-height: 900px) {
  #basic-chart.timeline {
    position: relative;
  }
  #basic-chart.timeline .chart {
    min-height: 500px;
  }
}
#basic-chart {
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
}
@media screen and (max-width: 544px) {
  #basic-chart {
    position: static;
  }
  #basic-chart.scada-wrapper {
    height: 80vh;
  }
}
#basic-chart .highcharts-plot-band.clickable, #basic-chart .highcharts-plot-band.btn-history, #basic-chart .highcharts-plot-band.btn-statelog {
  cursor: pointer;
}
#basic-chart .chart {
  flex-grow: 1;
  background: #292929;
}
#basic-chart .subchart-wrapper {
  display: flex;
  flex-direction: column;
  background: #292929;
}
#basic-chart #field-props {
  max-width: 200px;
}
#basic-chart .infobar-wrapper {
  display: flex;
  flex-direction: row;
}
#basic-chart .infobar-collapse {
  background: #313133;
  cursor: pointer;
  padding: 0.2em;
}
#basic-chart .infobar-wrapper {
  height: 58px;
}
#basic-chart .infobar-wrapper.collapsed {
  overflow: hidden;
  position: relative;
}
#basic-chart .infobar-wrapper.collapsed::after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(49, 49, 49, 0), #313131);
}
#basic-chart .infobar-wrapper.expanded {
  height: auto;
}
#basic-chart .infobar {
  background: #292929;
  padding: 0.381rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.235rem 0.381rem;
}
#basic-chart .infobar .SeriesInfoBox {
  padding: 0.3rem 0.381rem;
  flex: 0 0 240px;
  border-left: 2px solid #555;
}
#basic-chart .infobar .SeriesInfoBox.previous .buttons {
  display: none;
}
#basic-chart .infobar .SeriesInfoBox.previous .header {
  cursor: default;
}
#basic-chart .infobar .SeriesInfoBox.disabled {
  color: #606060;
}
#basic-chart .infobar .SeriesInfoBox.disabled .header .color {
  background: #606060 !important;
}
#basic-chart .infobar .SeriesInfoBox.disabled .buttons span {
  opacity: 0.4;
}
#basic-chart .infobar .SeriesInfoBox .header {
  display: flex;
  cursor: pointer;
  position: relative;
  align-items: flex-start;
}
#basic-chart .infobar .SeriesInfoBox .header .title {
  flex-grow: 1;
  font-weight: bold;
  overflow-wrap: anywhere;
}
#basic-chart .infobar .SeriesInfoBox .header .subtitle {
  font-weight: normal;
  padding-top: 0;
  font-size: 70%;
  opacity: 0.8;
  margin-left: 5px;
  margin-right: 5px;
}
#basic-chart .infobar .SeriesInfoBox .header .color {
  display: inline-block;
  width: 16px;
  height: 14px;
  border-radius: 1px;
  vertical-align: baseline;
  position: relative;
  top: 1px;
  margin-right: 5px;
  flex-shrink: 0;
}
#basic-chart .infobar .SeriesInfoBox .stats {
  font-size: 75%;
  padding-top: 0.3rem;
}
#basic-chart .infobar .SeriesInfoBox .stats .label i::before {
  width: unset;
  margin-right: 0;
}
#basic-chart .infobar .SeriesInfoBox .stats .entry {
  padding-right: 0.3rem;
  white-space: nowrap;
}
#basic-chart .infobar .SeriesInfoBox .stats .entry > * {
  display: inline-block;
}
#basic-chart .infobar .SeriesInfoBox .stats .entry .label {
  padding-right: 0.3em;
  font-variant: small-caps;
  opacity: 0.85;
}
#basic-chart .infobar .SeriesInfoBox .stats .entry .vu {
  text-align: right;
}
#basic-chart .infobar .SeriesInfoBox .buttons span {
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 0;
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  font-size: 80%;
  margin-left: 0.2rem;
}
#basic-chart .infobar .SeriesInfoBox .buttons span:active, #basic-chart .infobar .SeriesInfoBox .buttons span.pushed {
  top: 1px;
}
#basic-chart .infobar .SeriesInfoBox .buttons span::before {
  vertical-align: unset;
  margin: 0;
  line-height: inherit;
  padding-right: 1px;
}
#basic-chart .infobar .SeriesInfoBox .buttons .x-btn-timeshift::before {
  content: "\f1da";
}
#basic-chart .infobar .SeriesInfoBox .buttons .x-btn-ranges::before {
  content: "\e83f";
}
#basic-chart.map-view {
  padding: 0;
  position: absolute;
}
#basic-chart.map-view .infobar {
  display: none;
}
#basic-chart.map-view .ChartNav {
  padding: 0.381rem 0.617rem;
}
#basic-chart.map-view .chart {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.ManageDiAnalysis__chart .infobar {
  background: #292929;
  padding: 0.381rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.235rem 0.381rem;
}
.ManageDiAnalysis__chart .infobar .SeriesInfoBox {
  padding: 0.3rem 0.381rem;
  border-left: 2px solid #555;
}
.ManageDiAnalysis__chart .infobar .SeriesInfoBox .content {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.ManageDiAnalysis__chart .infobar .SeriesInfoBox.disabled {
  color: #606060;
}
.ManageDiAnalysis__chart .infobar .SeriesInfoBox.disabled .header .color {
  background: #606060 !important;
}
.ManageDiAnalysis__chart .infobar .SeriesInfoBox .header {
  display: flex;
  cursor: pointer;
  align-items: center;
}
.ManageDiAnalysis__chart .infobar .SeriesInfoBox .header .title {
  font-weight: bold;
}
.ManageDiAnalysis__chart .infobar .SeriesInfoBox .header .color {
  display: inline-block;
  width: 16px;
  height: 14px;
  border-radius: 1px;
  margin-right: 5px;
}
.ManageDiAnalysis__chart .infobar .SeriesInfoBox .stats {
  display: none;
}
.ManageDiAnalysis__chart .infobar .SeriesInfoBox .buttons {
  display: none;
}

.chart-series-overlay {
  pointer-events: none;
}

#Chart.pqsync {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
}
#Chart.pqsync.chart-only .Heading, #Chart.pqsync.chart-only .Sidebar, #Chart.pqsync.chart-only .HourNav, #Chart.pqsync.chart-only .DateNav {
  display: none;
}
#Chart.pqsync .Heading {
  font-size: 160%;
  font-weight: bold;
}
#Chart.pqsync .Sidebar {
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: 3px;
  padding: 8px;
  background-color: #222222;
  line-height: 1.3;
}
#Chart.pqsync .ChartOverlay {
  border-radius: 3px;
}
#Chart.pqsync .MainArea {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
}
#Chart.pqsync .Chart {
  flex-grow: 1;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: 3px;
  padding: 8px;
  background-color: #222222;
  text-align: center;
}
#Chart.pqsync .Header {
  height: 40px;
  left: 0;
  top: 0;
}
#Chart.pqsync .HistoryIcon {
  position: absolute;
  right: 0;
}
#Chart.pqsync .DateNav {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
}
#Chart.pqsync .DateNav .DpButton {
  display: inline-block;
  width: 18px;
  height: 18px;
  position: relative;
  top: -3px;
  vertical-align: middle;
  background: url("/images/calendar.svg") no-repeat center center;
  cursor: pointer;
}
#Chart.pqsync .DateNav .Datepicker {
  position: absolute;
  z-index: 190;
  width: 250px;
  height: 28px;
  padding: 0;
  margin: 0;
  color: transparent;
  border: 0 transparent;
  background: transparent;
  cursor: pointer;
  box-shadow: none;
}
#Chart.pqsync .Sidebar {
  width: 250px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  padding: 0;
}
#Chart.pqsync .Sidebar .inner {
  padding: 8px;
}
#Chart.pqsync .Sidebar div.sidebar_subtitle {
  margin-top: 10px;
  font-weight: bold;
}
#Chart.pqsync .Sidebar div.sidebar_subtitle:first-child {
  margin-top: 0;
}
#Chart.pqsync .Sidebar table {
  width: 100%;
  margin-top: 3px;
}
#Chart.pqsync .Sidebar table td, #Chart.pqsync .Sidebar table th {
  padding-left: 5px;
  padding-right: 5px;
  margin: 0;
  padding-bottom: 2px;
}
#Chart.pqsync .Sidebar table .key {
  font-weight: normal;
  color: #D4D4D4;
  text-align: left;
  min-width: 65px;
}
#Chart.pqsync .Sidebar table .value {
  text-align: right;
  color: #CBA809;
  font-weight: bold;
  min-width: 65px;
  padding-left: 0;
  white-space: nowrap;
  word-wrap: normal;
}
#Chart.pqsync .Sidebar table .unit {
  text-align: left;
  color: #CFB22A; /*#B5A03E*/
}
#Chart.pqsync .PrevNextNav {
  border: 0 none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  width: 100%;
  left: 0;
  bottom: 0;
  white-space: nowrap;
  overflow: hidden;
}
#Chart.pqsync .PrevNextNav a {
  background-color: #444;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.7;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  width: 50%;
  font-size: 24px;
  padding: 4px 0 4px 0;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
#Chart.pqsync .PrevNextNav a:hover {
  opacity: 0.9;
}
#Chart.pqsync .PrevNextNav a.disabled {
  opacity: 0.4;
}
#Chart.pqsync .PrevNextNav a:last-child {
  border-bottom-right-radius: 3px;
}
#Chart.pqsync .Chart {
  flex-grow: 1;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  padding: 0;
}
#Chart.pqsync .Chart.no-data {
  background-image: url("/images/item/broken.png");
}
#Chart.pqsync .HourNav {
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
  border: 0;
  border-radius: 3px;
  padding: 8px;
  background-color: #222222;
  left: 0;
  bottom: 0;
  height: 180px;
  padding: 0;
}
#Chart.pqsync .Chart, #Chart.pqsync .HourNav {
  background-color: #222222;
}
#Chart.pqsync #chart_toggles {
  position: absolute;
  font-size: 70%;
  left: 0;
  bottom: 0;
  width: 3em;
  padding: 8px;
  padding-bottom: 16px;
  line-height: 2.5em;
}
#Chart.pqsync #chart_toggles button {
  padding: 0 0.3em;
  text-align: center;
  width: 2.2em;
  vertical-align: bottom;
}
@media screen and (max-width: 544px) {
  #Chart.pqsync {
    display: block;
  }
  #Chart.pqsync .MainArea {
    display: block;
    flex-grow: 0;
  }
  #Chart.pqsync .Chart {
    height: 320px;
  }
  #Chart.pqsync .Sidebar {
    height: 320px;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 3px;
  }
  #Chart.pqsync .Sidebar .inner {
    overflow-y: scroll;
    overflow-x: hidden;
  }
  #Chart.pqsync .Sidebar.collapsed {
    width: 4px;
    background: #444;
  }
  #Chart.pqsync .Sidebar.collapsed > * {
    display: none;
  }
  #Chart.pqsync #chart_toggles {
    top: 240px;
    bottom: unset;
  }
  #Chart.pqsync .PrevNextNav {
    overflow: visible;
  }
  #Chart.pqsync .PrevNextNav a:first-child {
    border-bottom-left-radius: 3px;
  }
  #Chart.pqsync .HourNav {
    height: 140px;
  }
  #Chart.pqsync #mobile-sidebar-toggler {
    width: 30px;
    height: 30px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 16pt;
    line-height: 30px;
    vertical-align: middle;
    color: white;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    background: #444;
    cursor: pointer;
    transform: rotate(180deg);
  }
  #Chart.pqsync #mobile-sidebar-toggler:hover {
    background: #555;
  }
  #Chart.pqsync #mobile-sidebar-toggler.active {
    transform: rotate(0deg);
  }
}
#Chart.pqsync #mobile-sidebar-toggler {
  display: none;
}

.Sigfox {
  width: 960px;
  margin: 0 auto;
}
.Sigfox h1 {
  text-align: left;
  color: #f1f1f1;
  margin-bottom: 0em;
  margin-left: 20px;
  font-weight: bold;
}
.Sigfox .SigfoxInfoPanel {
  height: 610px;
  width: 960px;
  display: block;
  border-radius: 2px;
  background-color: #333;
  margin: 0;
  padding: 0;
  font-size: 1px;
  position: relative;
  cursor: default;
}
.Sigfox .SigfoxInfoPanel .Section {
  position: absolute;
  display: block;
  background-color: #202020;
  border-radius: 2px;
}
.Sigfox .SigfoxInfoPanel .Section.left {
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  width: 300px;
  padding-left: 0.381rem;
  padding-right: 0.381rem;
  padding-top: 0.381rem;
  padding-bottom: 0.381rem;
}
.Sigfox .SigfoxInfoPanel .Section.right {
  top: 15px;
  right: 15px;
  bottom: 15px;
  width: 615px;
}
.Sigfox .SigfoxInfoPanel .Section .map_view {
  width: 615px;
  height: 579px;
  position: absolute !important;
}

.ManageGmap {
  border-radius: 2px;
  background-color: #202020;
}

.GmapToolbar {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 5;
  border-radius: 3px;
}
.GmapToolbar a {
  margin-bottom: 0.381rem;
}

.MapContainer--abspos.maplibregl-map {
  position: absolute;
}

.MapContainer--relpos.maplibregl-map {
  position: relative;
}

.MapContainer.maplibregl-map .maplibregl-ctrl-attrib {
  background: #5a5a5a;
  color: #cccccc;
}
.MapContainer.maplibregl-map .maplibregl-ctrl-attrib a {
  color: #cccccc;
}
.MapContainer.maplibregl-map .maplibregl-ctrl-attrib a:hover {
  text-decoration: underline;
}
.MapContainer.maplibregl-map .maplibregl-ctrl-attrib-button,
.MapContainer.maplibregl-map .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
  background-color: #929292;
}

.MapContainer .marker {
  display: block;
  border: none;
  padding: 0;
  cursor: default;
}
.MapContainer .marker.clickable, .MapContainer .marker.btn-history, .MapContainer .marker.btn-statelog {
  cursor: pointer;
}

#ManageFileArchive #files {
  list-style-type: none;
  font-size: 130%;
  padding-left: 0.617rem;
}
#ManageFileArchive #files li, #ManageFileArchive #files .file {
  margin-bottom: 0.3em;
}
#ManageFileArchive #files li:last-child, #ManageFileArchive #files .file:last-child {
  margin-bottom: 0;
}
#ManageFileArchive .warn-perms {
  padding: 0.381rem;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.35);
  color: crimson;
  margin-top: 0;
  font-size: 120%;
}

.Building {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}
.Building .BuildingBox {
  background: #323232;
  padding-left: 0.617rem;
  padding-right: 0.617rem;
  margin-left: -0.617rem;
  margin-right: -0.617rem;
  padding: 0.617rem;
  margin-top: 0.381rem;
  border-radius: 3px;
}
.Building h1 {
  text-align: center;
  color: #f1f1f1;
  margin-bottom: 0em;
  margin-left: 20px;
  font-weight: bold;
}
.Building .InfoPanel {
  padding-top: 10px;
  padding-bottom: 10px;
}
.Building .InfoPanel:first-child {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.Building .InfoPanel:last-child {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.Building .InfoTable {
  width: 100%;
}
.Building .InfoTable .property {
  width: 150px;
}
.Building #building_info {
  display: flex;
}
.Building #building_info .InfoPanel {
  flex-grow: 1;
  flex-basis: 50%;
}
@media screen and (max-width: 544px) {
  .Building #building_info {
    display: block;
  }
}
.Building .OnlyOne {
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
}
.Building .OnlyOne .InfoTable:first-child {
  margin: 0 auto;
}
.Building .OnlyOne .InfoTable {
  margin: 10px auto 0 auto;
}
.Building .OnlyOne .InfoTable td {
  width: 50%;
}
.Building .OnlyOne .InfoTable td:first-child {
  color: var(--c-primary);
  text-align: right;
  padding-right: 10px;
}
.Building .OnlyOne .InfoTable.SystemInfoTable {
  width: unset;
}
.Building .OnlyOne .InfoTable.SystemInfoTable .title {
  text-align: center;
}
.Building .Clickable {
  cursor: pointer;
}
.Building #overview-panel {
  background: none;
  margin-left: auto;
  margin-right: auto;
}
.Building #map-box {
  margin-top: calc(0.617rem + 2px);
  height: 500px;
  width: 100%;
}
.Building .content-bg:first-child {
  margin-top: 0 !important;
}
.Building .content-bg:last-child {
  margin-bottom: 0 !important;
}
.Building .content-bg, .Building .content-bg.PanelCompsWrap {
  background-color: #292929;
  margin-bottom: 0.617rem;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.Building #notes-box {
  padding: 10px;
}
.Building .notes:first-child {
  color: var(--c-primary);
  margin-bottom: 0.25em;
}
.Building .notes {
  margin-top: 0;
  max-width: 960px;
  margin-bottom: 0;
}

.ParkingLot .map_view_full {
  height: 100%;
  width: 100%;
}
.ParkingLot table td:first-child {
  padding-right: 0.5em;
}

.gm-style-iw-d table {
  color: black;
}
.gm-style-iw-d td:first-child {
  padding-right: 0.5em;
}

.gm-style-iw-t button {
  visibility: hidden !important;
}

.SliderValue {
  text-align: center;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 18px;
  font-weight: bold;
  width: 100%;
}

.SliderMain {
  flex-grow: 1;
}

.SettingPanelResponsive .InfoBox .Row.Slider {
  height: 100px;
}

.SliderBackground {
  min-width: 275px;
  height: 100px;
  padding: 10px 0 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.SliderBackground .SliderGradient {
  height: 20px;
  flex: 8 1 0px;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.SliderBackground .SliderGradient.temperature {
  background: linear-gradient(to right, #5daefc 0%, #ff0000 100%);
}
.SliderBackground .SliderGradient.time {
  background: linear-gradient(to right, #fcfefe 0%, #34a4a4 100%);
}
.SliderBackground .SliderGradient.light {
  background: linear-gradient(to right, #000 0%, #D0A408 100%);
}
.SliderBackground .ui-slider {
  height: 100px;
  margin-top: -40px;
  width: 100%;
  position: relative;
}
.SliderBackground .ui-slider .ui-slider-handle {
  display: inline-block;
  position: absolute;
  height: 38px;
  width: 20px;
  margin-top: 31px;
  margin-left: -10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0) linear-gradient(90deg, rgb(0, 99, 187) 0%, rgb(0, 132, 252) 50%, rgb(0, 99, 187) 100%) repeat scroll 0% 0%;
}
.SliderBackground .ui-slider .ui-slider-handle:focus {
  outline: 0;
}
.SliderBackground .EndLabel {
  flex: 1 0 0px;
  font-size: 18px;
  line-height: 18px;
  font-weight: bold;
  color: #f1f1f1;
  text-align: center;
  white-space: nowrap;
  word-wrap: normal;
}
.SliderBackground .EndLabel.left {
  margin-right: 10px;
}
.SliderBackground .EndLabel.right {
  margin-left: 10px;
}

.ValueRow {
  padding: 10px 10px 10px 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.ValueRow .Label {
  width: 150px;
  margin-right: 10px;
  margin-bottom: 5px;
}
.ValueRow .ButtonContainer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.ValueRow .ButtonContainer button {
  margin-right: 5px;
  margin-bottom: 5px;
}
.ValueRow .ButtonContainer button:last-of-type {
  margin-right: 0;
}
.ValueRow .Value {
  margin-bottom: 5px;
}
.ValueRow .Value.BigText {
  font-size: 35px;
  line-height: 35px;
}

.ValueRow .StateTable tr td {
  padding-bottom: 5px;
  padding-right: 5px;
}
.ValueRow .StateTable tr td:last-of-type {
  padding-right: 0;
}
.ValueRow .StateTable tr:last-of-type td {
  padding-bottom: 0;
}

.InfoTable {
  width: 300px;
  border-collapse: collapse;
  -moz-column-break-inside: avoid;
       break-inside: avoid-column;
}
.InfoTable.gap-above {
  margin-top: 13px;
}
.InfoTable.gap-above-large {
  margin-top: 46px;
}
.InfoTable:first-child, .InfoTable:first-child.gap-above, .InfoTable:first-child.gap-above-large {
  margin-top: 0;
}
.InfoTable input {
  width: 105px;
  text-align: center;
}
.InfoTable select {
  width: 105px;
  text-align: center;
  color: rgb(169, 169, 169);
  text-indent: 20px;
}
.InfoTable tr.rowgroup-start td, .InfoTable th {
  padding-top: 3px;
}
.InfoTable tr.rowgroup-end td, .InfoTable th {
  padding-bottom: 3px;
}
.InfoTable td {
  padding: 0 2px;
}
.InfoTable td.property {
  color: var(--c-primary);
  text-align: right;
  padding-right: 10px !important;
  font-size: 14px;
  width: 148px;
  overflow: hidden;
  white-space: nowrap;
}
.InfoTable td.title {
  padding-bottom: 4px;
}
.InfoTable td.value {
  color: #f1f1f1;
  text-align: left;
  padding-right: 5px;
  font-size: 15px;
  font-weight: bold;
}
.InfoTable td.value_center {
  color: #f1f1f1;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.InfoTable td.value_metadata {
  text-align: left;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 14px;
}
.InfoTable td.hist.history_btn, .InfoTable td.hist.placeholder {
  width: 35px;
  min-width: 25px;
  height: 25px;
  color: var(--c-primary);
}
.InfoTable td.hist.history_btn {
  text-align: center;
  border-left: 1px solid transparent;
  background-image: url("/images/item/chart.svg");
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: 0.7;
}
.InfoTable td.hist.history_btn:hover {
  opacity: 1;
  border-left: 1px solid var(--c-primary);
}
.InfoTable td.hist.history_btn svg {
  width: 21px;
  height: 21px;
  margin-left: 5px;
}

.BentoManagePanel.ComApGenset .Breaker {
  width: 60px;
  height: 70px;
}
.BentoManagePanel.ComApGenset .ScadaIcon {
  width: 60px;
  height: 65px;
}
.BentoManagePanel.ComApGenset #mode_buttons {
  padding-bottom: 0;
}
.BentoManagePanel.ComApGenset #mode_buttons a {
  margin: 0 0.2em;
  min-width: 4em;
  text-align: center;
  font-weight: bold;
}
.BentoManagePanel.ComApGenset .ComapGensetDiagram.interactive {
  height: 130px;
}
.BentoManagePanel.ComApGenset .ComapGensetDiagram.interactive .onoff-buttons {
  white-space: nowrap;
}
.BentoManagePanel.ComApGenset .Group {
  position: relative;
}
.BentoManagePanel.ComApGenset #reload-buttons {
  position: absolute;
  right: 0.617rem;
  top: 0.617rem;
}
.BentoManagePanel.ComApGenset #reload-buttons a {
  margin-bottom: 0.381rem;
}
.BentoManagePanel.ComApGenset #reload-buttons a.warning {
  background: #f4aa34;
}

/* this style is used on the mng panel but also on the panel widget */
.ComapGensetDiagram svg {
  fill: currentColor;
}
.ComapGensetDiagram .Breaker {
  position: relative;
}
.ComapGensetDiagram .Breaker .breaker-label {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
}
.ComapGensetDiagram .overlay-text {
  display: none;
}
.ComapGensetDiagram.interactive .breaker-wrapper, .ComapGensetDiagram.interactive .x-generator {
  cursor: pointer;
}
.ComapGensetDiagram.interactive .breaker-wrapper:hover, .ComapGensetDiagram.interactive .x-generator:hover {
  color: var(--c-primary);
}
.ComapGensetDiagram.interactive .breaker-wrapper:hover path, .ComapGensetDiagram.interactive .x-generator:hover path {
  fill: var(--c-primary);
}
.ComapGensetDiagram.interactive .button {
  font-size: 65%;
  padding: 2px;
  margin: 1px;
  margin-top: 5px;
}
.ComapGensetDiagram.state-unknown {
  position: relative;
}
.ComapGensetDiagram.state-unknown svg, .ComapGensetDiagram.state-unknown .breaker-label {
  opacity: 0.2;
}
.ComapGensetDiagram.state-unknown .overlay-text {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ComapGensetDiagram.state-unknown .overlay-text span {
  text-shadow: 0 0 15px black, 0 0 15px black, 0 0 15px black;
  color: #e84040;
  font-weight: bold;
}

.BentoManagePanel.ComApHybrid #energy-flow {
  height: 350px;
}

.Uni3Section {
  max-width: 1100px;
  margin: 0 auto;
}
.Uni3Section h1 {
  text-align: left;
  margin-bottom: 0.2em;
  margin-left: 0;
}
.Uni3Section .MbInfoPanel {
  background: #323232;
  display: flex;
  flex-direction: row;
  padding: 1rem;
  border-radius: 2px;
  font-size: 16px;
}
.Uni3Section .MbInfoPanel .Column {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
}
.Uni3Section .MbInfoPanel .Column:nth-child(2) {
  margin-left: 1rem;
}
.Uni3Section .MbInfoPanel .Section {
  padding: 0.617rem;
  background-color: #292929;
  border-radius: 2px;
  margin-bottom: 1rem;
}
.Uni3Section .MbInfoPanel .Section:last-child {
  margin-bottom: 0 !important;
}
.Uni3Section .MbInfoPanel .Section.bottom {
  flex-grow: 1;
}
@media screen and (max-width: 544px) {
  .Uni3Section .MbInfoPanel {
    flex-direction: column;
    padding: 0.617rem;
  }
  .Uni3Section .MbInfoPanel .Column:nth-child(2) {
    margin-left: 0 !important;
    margin-top: 0.617rem !important;
  }
  .Uni3Section .MbInfoPanel .Section {
    margin-bottom: 0.617rem;
  }
}
.Uni3Section .InfoTable {
  width: 100%;
}
.Uni3Section .InfoTable td.property {
  color: var(--c-primary);
  width: 230px;
  white-space: nowrap;
}
.Uni3Section .InfoTable td.value {
  color: #f1f1f1;
  font-weight: bold;
}
.Uni3Section .InfoTable td.property, .Uni3Section .InfoTable td.value {
  font-size: 18px;
}
@media screen and (max-width: 544px) {
  .Uni3Section .InfoTable td.property, .Uni3Section .InfoTable td.value {
    font-size: 16px;
  }
  .Uni3Section .InfoTable td.property {
    width: 200px;
  }
}
.Uni3Section .InfoTable td.btn-history {
  width: 40px;
  text-align: center;
}

.Building.conn_monitor .content-bg {
  -moz-column-count: 2;
       column-count: 2;
}
.Building.conn_monitor .TargetRow {
  display: flex;
  flex-direction: row;
  padding: 0.617rem;
  align-items: center;
}
.Building.conn_monitor .TargetRow .indicator {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  vertical-align: middle;
  font-size: 110%;
  border-right: 3px;
  margin-right: 0.617rem;
}
.Building.conn_monitor .TargetRow .indicator.state-ok {
  background: #17c96b;
  color: #f1f1f1;
}
.Building.conn_monitor .TargetRow .indicator.state-error {
  background: #e84040;
  color: #f1f1f1;
}
.Building.conn_monitor .TargetRow.ok .state-error {
  display: none;
}
.Building.conn_monitor .TargetRow.error .state-ok {
  display: none;
}

.BillingUnitPanel .money-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.BillingUnitPanel .commodity-box {
  width: 7em;
  text-align: center;
  font-size: 120%;
  font-weight: bold;
}
.BillingUnitPanel .commodity-box svg {
  height: 3em;
  padding: 0.381rem;
}

.ExceptionScheduleEditor .special-events {
  margin: 0.381rem 0;
}
.ExceptionScheduleEditor .SpecialEvent {
  display: flex;
  flex-direction: row;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.ExceptionScheduleEditor .SpecialEvent:nth-child(even) {
  background: #2d2d2d;
}
.ExceptionScheduleEditor .SpecialEvent:nth-child(odd) {
  background: #292929;
}
.ExceptionScheduleEditor .SpecialEvent.expanded {
  border: 1px solid var(--c-tabbar);
  background: transparent;
  border-radius: 4px;
}
.ExceptionScheduleEditor .SpecialEvent.expanded:has(+ .expanded) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ExceptionScheduleEditor .SpecialEvent.expanded + .expanded {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}
.ExceptionScheduleEditor .SpecialEvent.expanded + .expanded .sebox.buttons {
  margin-top: 1px;
}
.ExceptionScheduleEditor .SpecialEvent.expanded .sebox {
  padding: 0 0.381rem;
}
.ExceptionScheduleEditor .SpecialEvent.expanded .sebox.buttons {
  padding: 0.617rem;
  margin-top: 0;
}
.ExceptionScheduleEditor .SpecialEvent.expanded .sebox.timevalues,
.ExceptionScheduleEditor .SpecialEvent.expanded .sebox.priority {
  border-left: 1px solid var(--c-primary);
}
.ExceptionScheduleEditor .SpecialEvent.expanded .time-values-table {
  padding-bottom: 0.381rem;
}
.ExceptionScheduleEditor .SpecialEvent.expanded .time-values-table button {
  margin-left: 0.235rem;
}
.ExceptionScheduleEditor .SpecialEvent.expanded .time-values-table > div {
  margin-bottom: 0.235rem;
}
.ExceptionScheduleEditor .SpecialEvent.expanded .sebox.date {
  flex-basis: 65%;
}
.ExceptionScheduleEditor .SpecialEvent.expanded .sebox.timevalues {
  flex-basis: 25%;
}
.ExceptionScheduleEditor .sebox {
  padding: 1px 0.381rem;
  display: flex;
}
.ExceptionScheduleEditor .sebox.date, .ExceptionScheduleEditor .sebox.timevalues {
  flex-basis: 40%;
}
.ExceptionScheduleEditor .sebox.timevalues .col {
  margin-left: 0.381rem;
}
.ExceptionScheduleEditor .sebox.priority {
  flex-basis: 10%;
  margin-right: 0;
}
.ExceptionScheduleEditor .sebox.priority .col {
  margin-left: 0.381rem;
}
.ExceptionScheduleEditor .sebox.buttons {
  flex-grow: 1;
  text-align: right;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.617rem;
  margin-top: 1px;
}
.ExceptionScheduleEditor .sebox.buttons button {
  margin-left: 0.235rem;
}
.ExceptionScheduleEditor .TimeValuesEdit .label {
  display: inline-block;
  text-align: left;
  width: 98px;
}
.ExceptionScheduleEditor .TimeValuesEdit .label:first-child, .ExceptionScheduleEditor .TimeValuesEdit input {
  margin-right: 0.235rem;
}
.ExceptionScheduleEditor .TimeValuesEdit input, .ExceptionScheduleEditor .TimeValuesEdit select {
  width: 98px;
}
.ExceptionScheduleEditor .col {
  margin: 0.381rem;
  margin-left: 0;
  white-space: nowrap;
}
.ExceptionScheduleEditor .col label, .ExceptionScheduleEditor .col .label {
  font-size: 90%;
  font-style: italic;
}
.ExceptionScheduleEditor .nested-col {
  display: flex;
  flex-wrap: nowrap;
}
.ExceptionScheduleEditor .DateRange {
  display: block;
}
.ExceptionScheduleEditor .DateRange .date-subedit {
  display: flex;
  margin-bottom: 0.617rem;
}
.ExceptionScheduleEditor .PeriodEditField {
  margin: 0.617rem 0 0.617rem 0.617rem;
  display: flex;
}
.ExceptionScheduleEditor .PeriodEditField.cal-reference {
  flex-direction: column;
}
.ExceptionScheduleEditor .PeriodEditField input, .ExceptionScheduleEditor .PeriodEditField select {
  width: 98px;
}
.ExceptionScheduleEditor .PriorityEditField {
  margin-top: 0.617rem;
}
.ExceptionScheduleEditor .ChoiceTabs {
  margin: 0 0.381rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.ExceptionScheduleEditor .ChoiceTabs button {
  display: block;
  width: 100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 80%;
  border-right-color: var(--c-primary);
}
.ExceptionScheduleEditor .ChoiceTabs button.selected {
  border-color: var(--c-primary);
  border-right-color: #323232;
}
.ExceptionScheduleEditor .ChoiceTabs button.selected:hover {
  border-right-color: var(--c-primary);
}
.ExceptionScheduleEditor .ChoiceTabs button.not-selected {
  border-bottom-width: 0;
}
.ExceptionScheduleEditor .ChoiceTabs button.not-selected.last {
  border-bottom-width: 1px;
}
.ExceptionScheduleEditor .ChoiceTabs button:active {
  top: 0;
}
.ExceptionScheduleEditor .ChoiceTabs .lead, .ExceptionScheduleEditor .ChoiceTabs .tail {
  display: block;
  width: 100%;
  flex-basis: 1rem;
  border-right: 1px solid var(--c-primary);
}
.ExceptionScheduleEditor .ChoiceTabs .tail {
  flex-grow: 1;
  flex-basis: 1rem;
}
.ExceptionScheduleEditor .MagicNumInput {
  margin-top: 0;
}
.ExceptionScheduleEditor .MagicNumInput .label-row {
  display: flex;
}
.ExceptionScheduleEditor .MagicNumInput .label-row label {
  flex-grow: 1;
  align-self: center;
  line-height: 1.8em;
  margin-top: 0.235rem;
  margin-bottom: 0.235rem;
  vertical-align: middle;
}
.ExceptionScheduleEditor .MagicNumInput .label-row a {
  font-size: 75%;
  margin: 0.235rem;
  margin-right: 0;
  line-height: 1.8em;
}
.ExceptionScheduleEditor .MagicNumInput .label-row a::before {
  vertical-align: middle;
}

.XYTableSetting {
  display: flex;
  flex-direction: row;
}
.XYTableSetting__column {
  padding: 0.381rem;
}
.XYTableSetting__column--table {
  flex-basis: 40%;
}
.XYTableSetting__column--table table {
  width: 100%;
}
.XYTableSetting__column--chart {
  flex-basis: 60%;
}
.XYTableSetting__value-label {
  font-style: italic;
  opacity: 0.8;
}
.XYTableSetting__value-disp {
  font-weight: bold;
}
.XYTableSetting__chart {
  width: 100%;
  height: 30rem;
  border: 1px solid #5a5a5a;
}

.ManageDiAnalysis {
  min-height: 100%;
}
.ManageDiAnalysis__controls {
  display: flex;
  flex-direction: column;
  gap: 0.617rem;
}
.ManageDiAnalysis__table-link.ManageDiAnalysis__table-link {
  color: #f1f1f1;
  text-decoration: none;
}
.ManageDiAnalysis__table-link.ManageDiAnalysis__table-link:hover {
  color: var(--c-primary);
}
.ManageDiAnalysis__chart--small .infobar .SeriesInfoBox .header .title {
  font-size: 55%;
}
.ManageDiAnalysis__chart--small .infobar .SeriesInfoBox .header .color {
  width: 10px;
  height: 8px;
  position: relative;
  bottom: 1px;
}
.ManageDiAnalysis__chart--clickable {
  cursor: pointer;
}
.ManageDiAnalysis__chart .infobar .SeriesInfoBox .header .subtitle {
  display: none;
}
.ManageDiAnalysis__config {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.619rem;
}

.DiWizard {
  position: relative;
}
.DiWizard__section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.DiWizard__loading {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.617rem;
  top: 0.617rem;
  right: 0.617rem;
  background-color: #292929;
  padding: 0.617rem;
}
.DiWizard__loading > div:first-child {
  font-size: 1.2rem;
  font-weight: bold;
}

.ManageGrid {
  display: flex;
  flex-direction: column;
  gap: 0.617rem;
}
.ManageGrid__title {
  width: 100%;
}
.ManageGrid__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  background-color: #323232;
  padding: 0.617rem;
}
@media screen and (min-width: 1101px) {
  .ManageGrid__content--cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1101px) {
  .ManageGrid__content--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1101px) {
  .ManageGrid__content--cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 1101px) {
  .ManageGrid__content--cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (min-width: 1101px) {
  .ManageGrid__content--cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media screen and (min-width: 1101px) {
  .ManageGrid__content--cols-8 {
    grid-template-columns: repeat(8, 1fr);
  }
}
.ManageGrid__cell {
  grid-column: span 1;
  background-color: #292929;
  padding: 0.381rem;
  min-width: 0;
}
@media screen and (min-width: 1101px) {
  .ManageGrid__cell--col-span-2 {
    grid-column: span 2/span 2;
  }
}
@media screen and (min-width: 1101px) {
  .ManageGrid__cell--col-span-3 {
    grid-column: span 3/span 3;
  }
}
@media screen and (min-width: 1101px) {
  .ManageGrid__cell--col-span-4 {
    grid-column: span 4/span 4;
  }
}
@media screen and (min-width: 1101px) {
  .ManageGrid__cell--col-span-6 {
    grid-column: span 6/span 6;
  }
}
.ManageGrid__cell--col-span-full {
  grid-column: 1/-1;
}
@media screen and (min-width: 1101px) {
  .ManageGrid__cell--col-start-2 {
    grid-column-start: 2;
  }
}
.ManageGrid__cell--j-self-start {
  justify-self: flex-start;
}
.ManageGrid__cell--j-self-center {
  justify-self: center;
}
.ManageGrid__cell--a-self-start {
  align-self: flex-start;
}
.ManageGrid__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.617rem;
  align-items: center;
}
.ManageGrid__tab-right {
  margin-left: auto;
}

.DiagramDash {
  max-width: 1300px;
  margin: 0 auto;
}
.DiagramDash__column {
  display: flex;
  flex-direction: column;
  gap: 2.619rem;
}
.DiagramDash__node-stack {
  display: flex;
  flex-direction: column;
  gap: 0.381rem;
  position: relative;
}
.DiagramDash__node-stack::before {
  content: "";
  position: absolute;
  top: -2.619rem;
  left: 50%;
  height: 2.619rem;
  border-left: 2px solid #CDCDCD;
  transform: translateX(50%);
}
.DiagramDash__node-stack--hanging {
  padding-left: 60px;
}
.DiagramDash__node-stack--hanging::before {
  display: none;
}
.DiagramDash__node-stack--hanging > .DashNode {
  z-index: 1;
}
.DiagramDash__node-stack--hanging > .DashNode::before {
  content: "";
  position: absolute;
  top: calc(-50% - 0.381rem - 10px);
  height: calc(100% + 0.381rem + 10px);
  width: 30px;
  left: -30px;
  border-left: 2px solid #CDCDCD;
  border-bottom: 2px solid #CDCDCD;
  border-bottom-left-radius: 10px;
  pointer-events: none;
}

.ManagePanel {
  display: flex;
  flex-direction: column;
  gap: 0.617rem;
}
.ManagePanel__title {
  width: 100%;
}
.ManagePanel__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.617rem;
}
.ManagePanel__tabs--narrow {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.ManagePanel__tab-right {
  margin-left: auto;
}
.ManagePanel__content {
  width: 100%;
}
.ManagePanel__content--overflow-x {
  overflow-x: auto;
}

.DiDashCard {
  max-width: 430px;
  width: 100%;
  border-radius: 5px 5px 0 0;
}
.DiDashCard.DiDashCard {
  color: white;
  cursor: auto;
  text-decoration: none;
}
.DiDashCard.DiDashCard[href] {
  cursor: pointer;
}
a.DiDashCard[href]:hover .DiDashCard__header {
  background-color: #248dee;
}
a.DiDashCard[href]:hover .DiDashCard__header--electricity {
  background-color: #ff871a;
}
a.DiDashCard[href]:hover .DiDashCard__header--gas {
  background-color: #ffee57;
}
a.DiDashCard[href]:hover .DiDashCard__header--heat {
  background-color: #ff6767;
}
a.DiDashCard[href]:hover .DiDashCard__header--water {
  background-color: #24bdff;
}
a.DiDashCard[href]:hover .DiDashCard__row {
  background-color: #576674;
}
a.DiDashCard[href]:hover .DiDashCard__row--secondary {
  background-color: #47525c;
}

.DiDashCard__header {
  background-color: #1280E6;
  padding: 0.381rem 0.617rem;
  border-radius: 5px 5px 0 0;
}
.DiDashCard__header--electricity {
  color: black;
  background-color: #FF7A00;
}
.DiDashCard__header--gas {
  color: black;
  background-color: #FFE924;
}
.DiDashCard__header--heat {
  color: black;
  background-color: #FF4D4D;
}
.DiDashCard__header--water {
  color: black;
  background-color: #00B2FF;
}
.DiDashCard__header--summary {
  color: black;
  background-color: #7d93a0;
}
.DiDashCard__row {
  display: flex;
  padding: 0.617rem;
  gap: 1rem;
  background-color: #4C5965;
}
.DiDashCard__row--secondary {
  background-color: #3C454E;
}
.DiDashCard__col-label {
  flex: 2;
  display: flex;
  align-items: center;
}
.DiDashCard__col-label > svg.inline-icon {
  fill: transparent;
  width: 18px;
  height: 18px;
  margin-right: 0.617rem;
}
.DiDashCard__col-value {
  flex: 1.2;
}
.DiDashCard__score {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 105%;
}
.DiDashCard__score--good {
  color: #4CFF5E;
}
.DiDashCard__score--average {
  color: #FFE924;
}
.DiDashCard__score--bad {
  color: #FF4343;
}

.CardDash {
  display: flex;
  flex-direction: column;
  gap: 2.619rem;
}
.CardDash__main {
  display: flex;
  flex-wrap: wrap;
  gap: 2.619rem;
  justify-content: center;
}
.CardDash__separator {
  width: 100%;
  max-width: 600px;
}
.CardDash__summary {
  display: flex;
  justify-content: center;
}

.DiGridDash {
  min-width: 1100px;
  max-width: 1300px;
  margin: 0 auto;
}
.DiGridDash__header {
  background-color: #1280E6;
  border-radius: 5px 5px 0 0;
  padding: 0.617rem;
}
.DiGridDash__header--electricity {
  color: black;
  background-color: #FF7A00;
}
.DiGridDash__header--gas {
  color: black;
  background-color: #FFE924;
}
.DiGridDash__header--heat {
  color: black;
  background-color: #FF4D4D;
}
.DiGridDash__header--water {
  color: black;
  background-color: #00B2FF;
}
.DiGridDash__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.DiGridDash__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.381rem;
}
.DiGridDash__row--header {
  margin-bottom: -0.619rem;
}
.DiGridDash__row--header .DiGridDash__cell {
  position: relative;
  padding: 1rem;
}
.DiGridDash__row--header .DiGridDash__cell:first-child::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.381rem;
  bottom: -0.381rem;
  left: 0;
  background-color: #4C5965;
}
.DiGridDash__row--header .DiGridDash__cell:not(:first-child)::before {
  content: "";
  position: absolute;
  width: 0.381rem;
  height: 1rem;
  top: 0;
  left: -0.381rem;
  background-color: #4C5965;
}
.DiGridDash__cell {
  background-color: #4C5965;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.617rem;
  position: relative;
}
.DiGridDash__cell--secondary {
  background-color: #6a7a89;
}
.DiGridDash__cell.DiGridDash__cell {
  color: white;
  text-decoration: none;
}
.DiGridDash__cell.DiGridDash__cell[href]:hover {
  background-color: #576674;
}
.DiGridDash__cell.DiGridDash__cell--secondary[href]:hover {
  background-color: #778796;
}
.DiGridDash__cell-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  flex: 1;
}
.DiGridDash__cell-col--align-left {
  align-items: flex-start;
}
.DiGridDash__cell-row {
  display: flex;
  align-items: center;
  min-height: 24px;
}
.DiGridDash__cell-row > svg {
  fill: transparent;
  width: 24px;
  height: 24px;
  margin-right: calc(1rem + 8px);
}
.DiGridDash__cell-row--large-icon > svg {
  width: 32px;
  height: 32px;
  margin-right: 1rem;
}
.DiGridDash__tooltip {
  position: absolute;
  top: 0.617rem;
  right: 0.617rem;
  font-size: 120%;
}

.DiScore {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 105%;
}
.DiScore--good {
  color: #4CFF5E;
}
.DiScore--average {
  color: #FFE924;
}
.DiScore--bad {
  color: #FF4343;
}

.PTStatistics {
  padding: 0.381rem;
  padding-left: 0;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.PTStatistics__main {
  padding: 0.381rem;
  background-color: #222222;
  display: flex;
  flex-direction: column;
  gap: 0.381rem;
  min-width: 150px;
}
.PTStatistics__main-item {
  font-size: 0.9em;
}
.PTStatistics__main-item--oee {
  font-size: 1em;
  font-weight: bold;
}
.PTStatistics__items-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.617rem;
  align-items: flex-start;
}

.PTStatisticsItem {
  padding: 0.381rem 0.617rem;
  padding-left: calc(0.617rem + 10px);
  background-color: #222222;
  position: relative;
  max-width: 240px;
}
.PTStatisticsItem__color {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 100%;
}
.PTStatisticsItem__label {
  text-overflow: ellipsis;
  text-wrap: nowrap;
  overflow: hidden;
}
.PTStatisticsItem__row {
  display: flex;
  gap: 0.617rem;
  font-size: 0.9em;
  justify-content: space-between;
}

.PTNotesEditor {
  display: flex;
  flex-direction: column;
  gap: 0.617rem;
}
.PTNotesEditor__add-button {
  width: -moz-fit-content;
  width: fit-content;
}
.PTNotesEditor__note {
  display: flex;
  flex-direction: column;
  gap: 0.617rem;
  padding: 0.381rem;
  background-color: #222222;
}
.PTNotesEditor__note-footer {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.PTNotesEditor__note-buttons {
  display: flex;
  gap: 0.617rem;
}
.PTNotesEditor__note-metadata {
  margin-left: auto;
  font-size: 0.9em;
}

.PTChangeEditor {
  display: flex;
  gap: 0.381rem;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
}

.PTDialog {
  display: flex;
  flex-direction: column;
  gap: 0.617rem;
}
.PTDialog__header {
  display: flex;
}
.PTDialog__title {
  font-weight: bold;
  flex-grow: 1;
}

.PTDetail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.PTDetail__Header {
  display: flex;
}
.PTDetail__HeaderProps {
  flex-grow: 1;
  display: flex;
}
.PTDetail__HeaderImage {
  padding-right: 0.617rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.PTDetail__image {
  max-width: 200px;
  max-height: 200px;
}
.PTDetail__HeaderPropsBox {
  flex-basis: 50%;
}
.PTDetail__HeaderPropsBox:first-child {
  border-left: 0 none;
}
.PTDetail__HeaderPropsBox {
  padding-left: 0.617rem;
}
.PTDetail__HeaderPropsBox:first-child {
  padding-left: 0;
}
.PTDetail__HeaderPropsBox table {
  margin-top: 0;
}

.PTGroupDash {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.PTGroupDash h2 {
  margin: 0;
  font-size: 1.1rem;
}
.PTGroupDash__MachineRow, .PTGroupDash__GroupRow {
  cursor: pointer;
}
.PTGroupDash__MachineRow h3, .PTGroupDash__GroupRow h3 {
  margin: 0;
}
.PTGroupDash__MachineHeader {
  display: flex;
  gap: 0.381rem;
  align-items: center;
  margin-bottom: 0.381rem;
}
.PTGroupDash__MachineTitle {
  font-size: 1.1rem;
  font-weight: bold;
}
.PTGroupDash__MachineTitle, .PTGroupDash__MachineTitle:link, .PTGroupDash__MachineTitle:visited {
  color: #f1f1f1;
}
.PTGroupDash__MachineTitle:hover {
  color: #f1f1f1;
  text-decoration: none;
}
.PTGroupDash__MachineVariable {
  margin-left: auto;
}
.PTGroupDash__Chart {
  position: absolute;
  width: 100%;
  height: 100%;
}
.PTGroupDash__ChartWrap {
  position: relative;
  height: 80px;
}
.PTGroupDash__ChartWrap--detailed {
  height: 160px;
}
.PTGroupDash__MachineRow {
  display: flex;
  gap: 0.617rem;
}
.PTGroupDash__MachineRowBox--Image {
  flex-basis: 120px;
  width: 120px;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.PTGroupDash__MachineRowBox--Image img {
  max-width: 100%;
  max-height: 100%;
}
html.dark .PTGroupDash__MachineRowBox--Image {
  background: rgba(255, 255, 255, 0.1);
}

html.light .PTGroupDash__MachineRowBox--Image {
  background: rgba(0, 0, 0, 0.1);
}

.PTGroupDash__ImagePlaceholder {
  font-size: 3rem;
  opacity: 0.4;
}
.PTGroupDash__MachineRowBox--Content {
  flex-grow: 1;
}

.PTNavBar {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.MicrogridDash {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.MicrogridDash__heading {
  width: 100%;
}
.MicrogridDash__box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  flex: 1;
}

.MicrogridDashChart {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 0.617rem;
  flex: 1;
  min-height: 300px;
  background-color: #292929;
  padding: 1rem 0.617rem;
}
.MicrogridDashChart__cards-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.MicrogridDashChart__chart-wrap {
  position: relative;
}
.MicrogridDashChart__chart {
  position: absolute;
  width: 100%;
  height: 100%;
}

.MicrogridDashSummary__heading {
  margin-top: 0;
}
.MicrogridDashSummary__cards-container {
  display: flex;
  gap: 2.619rem;
}
.MicrogridDashSummary__card {
  padding: 0.617rem;
  border: solid 1px white;
}

.MicrogridDashCard {
  padding: 0.617rem;
  border: solid 1px #5a5a5a;
  border-radius: 6px;
  background-color: #323232;
}
.MicrogridDashCard--floating {
  position: absolute;
  width: 100%;
}
.MicrogridDashCard__row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.MicrogridDashCard__column {
  display: flex;
  flex-direction: column;
  gap: 0.381rem;
  min-width: 0;
}
.MicrogridDashCard__title {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.MicrogridDashCard__value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.MicrogridDashCard__icon {
  display: flex;
}
.MicrogridDashCard__icon span {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.MicrogridDashCard__icon span::before {
  margin: 0;
}