/* Smart.UI Industrial - the Industrial components, one import per element below.

   Loaded alongside a theme, not instead of one. Industrial ships as its own bundle rather
   than inside jqx.default.css, so a page that does not use the line does not carry it.
   This is the development counterpart of smart.industrial-elements.css in the build.

   Not to be confused with jqx.industrial.css, which is the ISA-101 *theme*: that restyles
   the whole suite, while this styles the Industrial components themselves. A typical industrial page
   loads jqx.default.css, then this file, then optionally the industrial theme. */

/* The stock chip, which ships unstyled: smart.chip.css is commented out of the default
   bundle (gulpfile.js:1175), so a chip renders bare everywhere. The Industrial line
   carries it here - including the severity vocabulary - without changing what every
   existing customer of the default theme receives. */
/* Smart.UI Industrial - defaults for the ISA-101 tokens the components read.

   jqx.industrial.css and jqx.industrial-dark.css define every one of these on
   body[theme="industrial"] and body[theme="industrial-dark"], which outranks :root, so a
   page on either theme never sees the values below. A page on the default theme, or on any
   other suite theme, does: without them the components fell back to the suite's --jqx-success
   and --jqx-warning, which are fills chosen for a light surface and sit at about 2:1 as text
   on it or under white text.

   The defaults are derived from the suite palette rather than fixed, by mixing each fill
   with the theme's text colour: on a light theme that darkens a pastel green into a text
   tone, on a dark theme it lightens it, so the direction is right on both. A browser without
   color-mix() drops the declaration and the components inherit the text colour. */
:root {
  /* Severity as text: the fill pulled 45 % towards the text colour clears 4.5:1 on white. */
  --jqx-industrial-ok-text: color-mix(in srgb, var(--jqx-success) 55%, var(--jqx-text-color));
  --jqx-industrial-alarm-critical-text: color-mix(in srgb, var(--jqx-error) 70%, var(--jqx-text-color));
  --jqx-industrial-alarm-warning-text: color-mix(in srgb, var(--jqx-warning) 50%, var(--jqx-text-color));
  --jqx-industrial-alarm-advisory-text: color-mix(in srgb, var(--jqx-warning) 45%, var(--jqx-text-color));
  --jqx-industrial-accent-text: color-mix(in srgb, var(--jqx-primary) 80%, var(--jqx-text-color));
  --jqx-industrial-unknown-text: color-mix(in srgb, var(--jqx-text-color) 70%, var(--jqx-background));
  /* Severity as a fill that carries white text: the pastel greens and ambers pulled far
     enough towards the text colour for white to clear 4.5:1 on them. */
  --jqx-industrial-ok: color-mix(in srgb, var(--jqx-success) 60%, var(--jqx-text-color));
  --jqx-industrial-ok-color: var(--jqx-success-color, #ffffff);
  --jqx-industrial-alarm-warning: color-mix(in srgb, var(--jqx-warning) 85%, var(--jqx-text-color));
  --jqx-industrial-alarm-warning-color: var(--jqx-text-color);
  --jqx-industrial-alarm-advisory: var(--jqx-warning);
  --jqx-industrial-alarm-advisory-color: var(--jqx-text-color);
  --jqx-industrial-alarm-critical: var(--jqx-error);
  --jqx-industrial-alarm-critical-color: var(--jqx-error-color, #ffffff);
  --jqx-industrial-unknown: color-mix(in srgb, var(--jqx-text-color) 64%, var(--jqx-background));
  --jqx-industrial-unknown-color: var(--jqx-background);
  /* Text on the accent fill (the manual mode, a selected segment): the primary's own pairing. */
  --jqx-industrial-accent-color: var(--jqx-primary-color, #ffffff);
  /* Equipment and process states, the same way. */
  --jqx-industrial-running: var(--jqx-industrial-ok);
  --jqx-industrial-stopped: var(--jqx-industrial-unknown);
  --jqx-industrial-manual: var(--jqx-primary);
  --jqx-industrial-maintenance: color-mix(in srgb, var(--jqx-primary) 50%, var(--jqx-error));
  /* Focus: the primary colour, with a halo in the background colour so the ring holds on a
     control of either tone. */
  --jqx-industrial-focus: var(--jqx-primary);
  --jqx-industrial-focus-halo: var(--jqx-background);
}

@charset "UTF-8";
/* jqx-chip */
jqx-chip:hover, jqx-chip:focus {
  box-shadow: var(--jqx-elevation-2);
  outline: none;
}
jqx-chip .jqx-container {
  white-space: nowrap;
}
jqx-chip.jqx-element {
  display: inline-block;
}
jqx-chip[disabled]:hover {
  box-shadow: none;
}

.jqx-chip {
  min-height: var(--jqx-chip-default-height);
  min-width: var(--jqx-chip-default-height);
  border-radius: calc(var(--jqx-chip-default-height) / 2);
  box-sizing: border-box;
  background-color: var(--jqx-primary);
  color: var(--jqx-primary-color);
  position: relative;
  margin: 2px;
}
.jqx-chip .jqx-avatar {
  width: var(--jqx-chip-default-height);
  height: var(--jqx-chip-default-height);
  line-height: var(--jqx-chip-default-height);
  border-radius: 50%;
  display: none;
  vertical-align: middle;
  font-size: 20px;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jqx-chip .jqx-value {
  line-height: var(--jqx-chip-default-height);
  display: none;
  vertical-align: middle;
  padding: 0px 15px 0px 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0px;
  cursor: default;
}
.jqx-chip .jqx-close-button {
  width: var(--jqx-chip-default-height);
  height: var(--jqx-chip-default-height);
  display: none;
  position: relative;
  vertical-align: middle;
}
.jqx-chip .jqx-close-button:after {
  font-family: var(--jqx-font-family-icon);
  content: var(--jqx-icon-close);
  color: inherit;
  display: inline-block;
  line-height: var(--jqx-chip-default-height);
  width: 100%;
  text-align: center;
}
.jqx-chip .jqx-close-button:hover:after {
  color: var(--jqx-primary-color);
  cursor: pointer;
}
.jqx-chip.jqx-container {
  white-space: nowrap;
}
.jqx-chip[avatar] .jqx-avatar {
  display: inline-block;
}
.jqx-chip[avatar] .jqx-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.jqx-chip[avatar] .jqx-value {
  width: calc(100% - var(--jqx-chip-default-height));
  padding-left: 5px;
}
.jqx-chip[close-button] .jqx-value {
  width: calc(100% - var(--jqx-chip-default-height));
  padding-right: 5px;
}
.jqx-chip[close-button] .jqx-close-button {
  display: inline-block;
}
.jqx-chip[avatar][close-button] .jqx-value {
  width: calc(100% - 2 * var(--jqx-chip-default-height));
}
.jqx-chip[value] .jqx-value {
  display: inline-block;
}

/* jqx-chip */
jqx-chip[right-to-left] > .jqx-container {
  direction: rtl;
}

/* ── Severity ────────────────────────────────────────────────────────────────
   A chip is used as a status badge far more often than as a token, and six screens
   invented their own classes for it. This is that vocabulary once.

   Text colours, not fills. The same colour used as a background for a chip and as its
   text are different requirements: a fill only has to be distinguishable, while text is
   read for a whole shift and has to clear 4.5:1. The -text tokens exist for exactly this
   and fall back to the generic semantic colours off an industrial theme. */
jqx-chip[severity]:not([severity=none]) {
  border-color: currentColor;
  background: transparent;
}

jqx-chip[severity=neutral] {
  color: var(--jqx-text-secondary-color);
  border-color: var(--jqx-border);
}

jqx-chip[severity=ok] {
  color: var(--jqx-industrial-ok-text, var(--jqx-success));
}

jqx-chip[severity=advisory] {
  color: var(--jqx-industrial-alarm-advisory-text, var(--jqx-warning));
}

jqx-chip[severity=warning] {
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
}

jqx-chip[severity=critical] {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
}

@charset "UTF-8";
/* jqx-cause-effect-matrix */
jqx-cause-effect-matrix {
  --jqx-cem-cell-size: 34px;
  /* the cause column and the effect headers take the length of their names, from these
     sizes up to the caps: a cause is read by its words, and "Reactor pressure…" hid the
     "high high" that made it a cause */
  --jqx-cem-cause-width: 220px;
  --jqx-cem-cause-max: 380px;
  --jqx-cem-effect-height: 120px;
  --jqx-cem-effect-max: 240px;
  --jqx-cem-gap: 1px;
  --jqx-cem-active: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  --jqx-cem-tripped: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-cem-ok: var(--jqx-industrial-ok, var(--jqx-success));
  --jqx-cem-panel: var(--jqx-industrial-panel-background, var(--jqx-surface));
  --jqx-cem-header: var(--jqx-industrial-panel-header-background, var(--jqx-surface));
  --jqx-cem-border: var(--jqx-industrial-panel-border, var(--jqx-border));
  --jqx-cem-line: rgba(128, 128, 128, 0.16);
  display: block;
  font-family: var(--jqx-font-family);
  font-size: 12px;
}
jqx-cause-effect-matrix .jqx-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
jqx-cause-effect-matrix {
  /* The chart scrolls sideways when the effects are more than the width; the cause column
     stays put so a row keeps its name. */
}
jqx-cause-effect-matrix .jqx-cem-scroller {
  overflow: auto;
  border: var(--jqx-border-width) solid var(--jqx-cem-border);
  border-radius: var(--jqx-border-radius);
  background: var(--jqx-cem-panel);
}
jqx-cause-effect-matrix .jqx-cem-grid {
  display: grid;
  grid-template-columns: fit-content(var(--jqx-cem-cause-max)) repeat(var(--jqx-cem-columns, 1), var(--jqx-cem-cell-size));
  gap: var(--jqx-cem-gap);
  width: max-content;
  background: var(--jqx-cem-line);
}
jqx-cause-effect-matrix .jqx-cem-row {
  display: contents;
}
jqx-cause-effect-matrix .jqx-cem-corner,
jqx-cause-effect-matrix .jqx-cem-cause {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: var(--jqx-cem-cause-width);
  box-sizing: border-box;
  background: var(--jqx-cem-header);
  padding: 4px 8px;
}
jqx-cause-effect-matrix .jqx-cem-corner {
  display: flex;
  align-items: flex-end;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-tertiary-color);
}
jqx-cause-effect-matrix {
  /* Effect headers stand up, as they do on the paper chart. */
}
jqx-cause-effect-matrix .jqx-cem-effect {
  min-height: var(--jqx-cem-effect-height);
  box-sizing: border-box;
  background: var(--jqx-cem-header);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 6px 0;
  cursor: pointer;
}
jqx-cause-effect-matrix .jqx-cem-effect-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  max-height: var(--jqx-cem-effect-max);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  font-size: 11px;
}
jqx-cause-effect-matrix .jqx-cem-effect-text b {
  font-family: Consolas, "Courier New", monospace;
}
jqx-cause-effect-matrix .jqx-cem-cause {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: var(--jqx-cem-cell-size);
  cursor: pointer;
}
jqx-cause-effect-matrix .jqx-cem-cause-tag {
  font-family: Consolas, "Courier New", monospace;
  font-weight: 700;
}
jqx-cause-effect-matrix .jqx-cem-cause-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--jqx-text-secondary-color);
}
jqx-cause-effect-matrix .jqx-cem-badge {
  padding: 0 5px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--jqx-cem-active);
  color: var(--jqx-industrial-alarm-warning-color, #201400);
}
jqx-cause-effect-matrix {
  /* Cells: the mark, in the ink of the paper chart; a live link - an active cause reaching
     a tripped effect - fills. */
}
jqx-cause-effect-matrix .jqx-cem-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--jqx-cem-cell-size);
  background: var(--jqx-cem-panel);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
jqx-cause-effect-matrix .jqx-cem-delay {
  font-size: 9px;
  font-weight: 400;
  color: var(--jqx-text-secondary-color);
  line-height: 1;
}
jqx-cause-effect-matrix .jqx-cem-mark-P,
jqx-cause-effect-matrix .jqx-cem-mark-A {
  font-weight: 500;
  color: var(--jqx-text-secondary-color);
}
jqx-cause-effect-matrix .jqx-cem-live {
  background: var(--jqx-cem-tripped);
  color: var(--jqx-industrial-alarm-critical-color, #ffffff);
}
jqx-cause-effect-matrix .jqx-cem-live .jqx-cem-delay {
  color: inherit;
}
jqx-cause-effect-matrix .jqx-cem-selected {
  box-shadow: inset 0 0 0 2px var(--jqx-text-color);
}
jqx-cause-effect-matrix .jqx-cem-cell:focus-visible {
  box-shadow: inset 0 0 0 2px var(--jqx-industrial-focus, var(--jqx-primary)), inset 0 0 0 4px var(--jqx-industrial-focus-halo, #ffffff);
}
jqx-cause-effect-matrix {
  /* The state: an active cause tints its row, a tripped effect its column, a discrepancy
     marks the effect's header. */
}
jqx-cause-effect-matrix .jqx-cem-highlight .jqx-cem-active .jqx-cem-cause {
  background: var(--jqx-cem-active);
  color: var(--jqx-industrial-alarm-warning-color, #201400);
}
jqx-cause-effect-matrix .jqx-cem-highlight .jqx-cem-active .jqx-cem-cause .jqx-cem-cause-label {
  color: inherit;
}
jqx-cause-effect-matrix .jqx-cem-highlight .jqx-cem-active .jqx-cem-cell:not(.jqx-cem-live) {
  background: color-mix(in srgb, var(--jqx-cem-active) 18%, var(--jqx-cem-panel));
}
jqx-cause-effect-matrix .jqx-cem-highlight .jqx-cem-bypassed .jqx-cem-cause {
  background: repeating-linear-gradient(135deg, var(--jqx-cem-header) 0 6px, var(--jqx-cem-line) 6px 8px);
  color: var(--jqx-text-secondary-color);
}
jqx-cause-effect-matrix .jqx-cem-highlight .jqx-cem-effect.jqx-cem-tripped {
  background: var(--jqx-cem-tripped);
  color: var(--jqx-industrial-alarm-critical-color, #ffffff);
}
jqx-cause-effect-matrix .jqx-cem-highlight .jqx-cem-col-tripped:not(.jqx-cem-live) {
  background: color-mix(in srgb, var(--jqx-cem-tripped) 12%, var(--jqx-cem-panel));
}
jqx-cause-effect-matrix .jqx-cem-effect.jqx-cem-discrepancy {
  box-shadow: inset 0 0 0 3px var(--jqx-cem-active);
}
jqx-cause-effect-matrix {
  /* A timed trip counting down: dashed, not the solid ring of a discrepancy. The seconds
     left are in the header's name. */
}
jqx-cause-effect-matrix .jqx-cem-effect.jqx-cem-pending {
  box-shadow: inset 0 0 0 2px var(--jqx-cem-border);
  outline: 2px dashed var(--jqx-cem-active);
  outline-offset: -4px;
}
jqx-cause-effect-matrix {
  /* Right to left: the causes on the right, the effects reading leftwards, and the arrow
     keys following them. */
}
jqx-cause-effect-matrix[right-to-left] {
  direction: rtl;
}
jqx-cause-effect-matrix .jqx-cem-empty {
  padding: 10px;
  color: var(--jqx-text-secondary-color);
}
jqx-cause-effect-matrix {
  /* The legend */
}
jqx-cause-effect-matrix .jqx-cem-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: var(--jqx-text-secondary-color);
}
jqx-cause-effect-matrix .jqx-cem-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
jqx-cause-effect-matrix .jqx-cem-legend-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--jqx-cem-border);
  border-radius: 2px;
  font-weight: 700;
  color: var(--jqx-text-color);
}
jqx-cause-effect-matrix .jqx-cem-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  box-sizing: border-box;
}
jqx-cause-effect-matrix .jqx-cem-legend-active {
  background: var(--jqx-cem-active);
}
jqx-cause-effect-matrix .jqx-cem-legend-tripped {
  background: var(--jqx-cem-tripped);
}
jqx-cause-effect-matrix .jqx-cem-legend-discrepancy {
  border: 3px solid var(--jqx-cem-active);
}

/* .jqx-element carries the framework's own background and color at higher specificity
   than a bare tag selector, so anything that sets those has to be restated here. */
jqx-cause-effect-matrix.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-cause-effect-matrix takes by default. */
jqx-cause-effect-matrix:not(:defined) {
  min-height: 300px;
}

@charset "UTF-8";
/* jqx-device-control */
jqx-device-control {
  --jqx-device-width: 280px;
  --jqx-device-lamp-size: 16px;
  --jqx-device-panel: var(--jqx-industrial-panel-background, var(--jqx-surface));
  --jqx-device-header: var(--jqx-industrial-panel-header-background, var(--jqx-surface));
  --jqx-device-border: var(--jqx-industrial-panel-border, var(--jqx-border));
  --jqx-device-ok: var(--jqx-industrial-ok, var(--jqx-success));
  --jqx-device-warning: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  --jqx-device-critical: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-device-accent: var(--jqx-industrial-manual, var(--jqx-primary));
  --jqx-device-neutral: var(--jqx-industrial-unknown, #8b98a6);
  display: inline-block;
  width: var(--jqx-device-width);
  font-family: var(--jqx-font-family);
  font-size: 12px;
}
jqx-device-control .jqx-container {
  display: flex;
  flex-direction: column;
  border: var(--jqx-border-width) solid var(--jqx-device-border);
  border-radius: var(--jqx-border-radius);
  background: var(--jqx-device-panel);
  overflow: hidden;
}
jqx-device-control {
  /* ── Header: tag, description, quality, mode ─────────────────────────── */
}
jqx-device-control .jqx-device-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--jqx-device-header);
  border-bottom: 1px solid var(--jqx-device-border);
}
jqx-device-control {
  /* each header part keeps its column when another is hidden */
}
jqx-device-control .jqx-device-tag {
  grid-column: 1;
}
jqx-device-control .jqx-device-description {
  grid-column: 2;
}
jqx-device-control .jqx-device-quality {
  grid-column: 3;
  justify-self: end;
}
jqx-device-control .jqx-device-mode-chip {
  grid-column: 4;
  justify-self: end;
}
jqx-device-control .jqx-device-tag {
  font-family: Consolas, "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
}
jqx-device-control .jqx-device-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--jqx-text-secondary-color);
}
jqx-device-control .jqx-device-quality,
jqx-device-control .jqx-device-mode-chip {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
jqx-device-control .jqx-device-quality {
  background: var(--jqx-device-warning);
  color: var(--jqx-industrial-alarm-warning-color, #201400);
}
jqx-device-control {
  /* auto and out of service are outlined - a grey fill under 10px white text does not
     clear 4.5:1 on a light panel; manual and local, the modes that matter, are filled */
}
jqx-device-control .jqx-device-mode-chip {
  border: 1px solid var(--jqx-device-neutral);
  color: var(--jqx-industrial-unknown-text, var(--jqx-text-secondary-color));
}
jqx-device-control .jqx-device-mode-manual {
  background: var(--jqx-device-accent);
  border-color: var(--jqx-device-accent);
  color: var(--jqx-industrial-accent-color, #ffffff);
}
jqx-device-control .jqx-device-mode-local {
  background: var(--jqx-device-warning);
  border-color: var(--jqx-device-warning);
  color: var(--jqx-industrial-alarm-warning-color, #201400);
}
jqx-device-control {
  /* ── Status: the lamp and the word ───────────────────────────────────── */
}
jqx-device-control .jqx-device-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 8px;
}
jqx-device-control .jqx-device-lamp {
  flex: none;
  width: var(--jqx-device-lamp-size);
  height: var(--jqx-device-lamp-size);
  border-radius: 50%;
  background: var(--jqx-device-neutral);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
jqx-device-control .jqx-device-lamp-running,
jqx-device-control .jqx-device-lamp-open {
  background: var(--jqx-device-ok);
  box-shadow: 0 0 6px var(--jqx-device-ok);
}
jqx-device-control .jqx-device-lamp-starting,
jqx-device-control .jqx-device-lamp-stopping,
jqx-device-control .jqx-device-lamp-opening,
jqx-device-control .jqx-device-lamp-closing {
  background: var(--jqx-device-warning);
  animation: jqx-device-blink 800ms steps(1, end) infinite;
}
jqx-device-control .jqx-device-lamp-fault {
  background: var(--jqx-device-critical);
  box-shadow: 0 0 6px var(--jqx-device-critical);
  animation: jqx-device-blink 400ms steps(1, end) infinite;
}
jqx-device-control .jqx-device-state {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}
jqx-device-control .jqx-device-commanded {
  margin-left: auto;
  font-size: 11px;
  color: var(--jqx-text-secondary-color);
  white-space: nowrap;
}
jqx-device-control {
  /* ── Notice: pending, refused, interlocked, discrepancy ──────────────── */
}
jqx-device-control .jqx-device-notice {
  box-sizing: border-box;
  margin: 0 10px 8px;
  padding: 5px 8px;
  border-radius: 3px;
  border-left: 3px solid var(--jqx-device-warning);
  background: var(--jqx-industrial-abnormal-background, rgba(217, 128, 20, 0.1));
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-text-color));
  font-size: 11.5px;
  line-height: 1.35;
  /* one line is always held, so a notice appearing after a press does not push the
     buttons below it down under the operator's next tap */
  min-height: calc(1.35em + 10px);
}
jqx-device-control .jqx-device-notice-empty {
  visibility: hidden;
}
jqx-device-control .jqx-device-notice-pending {
  border-left-color: var(--jqx-device-accent);
  background: rgba(31, 92, 148, 0.08);
  color: var(--jqx-industrial-accent-text, var(--jqx-text-color));
}
jqx-device-control .jqx-device-notice-alarm {
  border-left-color: var(--jqx-device-critical);
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-text-color));
}
jqx-device-control {
  /* ── Commands and modes ──────────────────────────────────────────────── */
}
jqx-device-control .jqx-device-commands,
jqx-device-control .jqx-device-modes {
  display: flex;
  gap: 6px;
  padding: 0 10px 8px;
}
jqx-device-control .jqx-device-command,
jqx-device-control .jqx-device-mode {
  flex: 1 1 0;
  min-height: 32px;
  padding: 0 8px;
  font: inherit;
  font-weight: 600;
  color: var(--jqx-text-color);
  background: var(--jqx-device-header);
  border: 1px solid var(--jqx-device-border);
  border-radius: 3px;
  cursor: pointer;
}
jqx-device-control .jqx-device-command:hover,
jqx-device-control .jqx-device-mode:hover {
  border-color: var(--jqx-text-secondary-color);
}
jqx-device-control .jqx-device-command:focus-visible,
jqx-device-control .jqx-device-mode:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 1px;
}
jqx-device-control .jqx-device-command-go {
  border-color: var(--jqx-device-ok);
}
jqx-device-control .jqx-device-command-halt {
  border-color: var(--jqx-device-critical);
}
jqx-device-control .jqx-device-command-reset {
  border-color: var(--jqx-device-warning);
}
jqx-device-control {
  /* The command the plant reports as in force is filled; a pending one is hollow with a
     dashed edge - asked for, not confirmed. */
}
jqx-device-control .jqx-device-active.jqx-device-command-go {
  background: var(--jqx-device-ok);
  color: var(--jqx-industrial-ok-color, #ffffff);
}
jqx-device-control .jqx-device-active.jqx-device-command-halt {
  background: var(--jqx-device-critical);
  color: var(--jqx-industrial-alarm-critical-color, #ffffff);
}
jqx-device-control .jqx-device-pending {
  border-style: dashed;
  border-width: 2px;
}
jqx-device-control .jqx-device-command[aria-disabled=true],
jqx-device-control .jqx-device-mode[aria-disabled=true] {
  opacity: 0.55;
}
jqx-device-control .jqx-device-mode {
  min-height: 26px;
  font-weight: 500;
  font-size: 11px;
}
jqx-device-control .jqx-device-mode-current {
  background: var(--jqx-device-accent);
  border-color: var(--jqx-device-accent);
  color: var(--jqx-industrial-accent-color, #ffffff);
}
jqx-device-control {
  /* ── Permissives and counters ────────────────────────────────────────── */
}
jqx-device-control .jqx-device-permissives {
  list-style: none;
  margin: 0;
  padding: 6px 10px 8px;
  border-top: 1px solid var(--jqx-device-border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
jqx-device-control .jqx-device-permissive {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
jqx-device-control .jqx-device-permissive-mark {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--jqx-device-ok);
}
jqx-device-control .jqx-device-not-met {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-text-color));
  font-weight: 600;
}
jqx-device-control .jqx-device-not-met .jqx-device-permissive-mark {
  background: var(--jqx-device-critical);
}
jqx-device-control .jqx-device-permissive-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
jqx-device-control .jqx-device-permissive-state {
  color: var(--jqx-text-secondary-color);
  font-weight: 400;
}
jqx-device-control .jqx-device-counters {
  padding: 4px 10px 6px;
  border-top: 1px solid var(--jqx-device-border);
  color: var(--jqx-text-secondary-color);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
jqx-device-control {
  /* ── Compact: the strip along the bottom of an overview ──────────────── */
}
jqx-device-control .jqx-device-compact .jqx-device-description,
jqx-device-control .jqx-device-compact .jqx-device-permissives,
jqx-device-control .jqx-device-compact .jqx-device-counters,
jqx-device-control .jqx-device-compact .jqx-device-commanded {
  display: none;
}
jqx-device-control .jqx-device-compact .jqx-device-status {
  padding: 8px 10px 6px;
}
jqx-device-control .jqx-device-compact .jqx-device-state {
  font-size: 14px;
}
jqx-device-control .jqx-device-compact .jqx-device-command {
  min-height: 28px;
}
jqx-device-control {
  /* The interlock and the discrepancy tint the whole plate: a device that cannot be
     started, or whose signal is lying, is not a normal device. */
}
jqx-device-control .jqx-device-interlocked .jqx-device-header {
  border-bottom-color: var(--jqx-device-warning);
}
jqx-device-control .jqx-device-discrepancy .jqx-device-status {
  background: var(--jqx-industrial-abnormal-background, rgba(198, 40, 40, 0.06));
}
jqx-device-control .jqx-device-not-live {
  /* Bad or stale feedback is not what the device is doing now: the lamp goes hollow and
     dashed and the state word grey and italic, so a frozen "Running" never looks live. */
}
jqx-device-control .jqx-device-not-live .jqx-device-lamp {
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
  border: 2px dashed var(--jqx-device-neutral);
  animation: none;
}
jqx-device-control .jqx-device-not-live .jqx-device-state {
  color: var(--jqx-text-secondary-color);
  font-style: italic;
}

@keyframes jqx-device-blink {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  jqx-device-control .jqx-device-lamp {
    animation: none;
  }
}
/* .jqx-element carries the framework's own background and color at higher specificity
   than a bare tag selector, so anything that sets those has to be restated here. */
jqx-device-control.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-device-control takes by default. */
jqx-device-control:not(:defined) {
  min-height: 166px;
}

/* jqx-state-timeline */
jqx-state-timeline {
  --jqx-timeline-row-height: 26px;
  --jqx-timeline-label-width: 160px;
  --jqx-timeline-gap: 3px;
  /* The state colours: the ISA-101 severity fills, with a neutral for the states that are
     neither good nor bad and a dim tone for off. A custom colour comes through
     --jqx-timeline-color on the segment. ok - the normal state - is a muted grey-green, not a
     saturated green: on a high-performance screen colour is for what is wrong. */
  --jqx-timeline-ok: #698d81;
  --jqx-timeline-warning: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  --jqx-timeline-critical: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-timeline-accent: var(--jqx-industrial-manual, var(--jqx-primary));
  --jqx-timeline-neutral: var(--jqx-industrial-unknown, #8b98a6);
  --jqx-timeline-off: rgba(128, 128, 128, 0.25);
  /* The floor's ten states, one look each, so none is told from another by its label alone:
     running a muted grey-green; idle a light grey, hatched so it is not read as a gap in the
     record; ready hollow - in service, not producing; stopped a heavy slate (dark on a light
     screen, light on a dark one); starved amber and blocked yellow with dark stripes; fault red;
     changeover blue and maintenance purple with light stripes; off a dashed outline. The pairs a
     colour-blind eye would merge differ in pattern or weight as well. Each is a variable with
     a text colour beside it, for a page to restyle. The fallbacks are the light theme's; where
     color-mix() is supported they follow whichever theme is on the page. */
  --jqx-timeline-running: #698d81;
  --jqx-timeline-running-color: #10161d;
  --jqx-timeline-idle: #aeb7c1;
  --jqx-timeline-idle-color: var(--jqx-text-color, #131c25);
  --jqx-timeline-ready: var(--jqx-industrial-panel-background, var(--jqx-background, #ffffff));
  --jqx-timeline-ready-line: #5b6672;
  --jqx-timeline-ready-color: var(--jqx-text-color, #131c25);
  --jqx-timeline-stopped: #434e59;
  --jqx-timeline-stopped-color: var(--jqx-industrial-panel-background, var(--jqx-background, #ffffff));
  --jqx-timeline-starved: var(--jqx-industrial-alarm-warning, #d57d14);
  --jqx-timeline-starved-color: var(--jqx-industrial-alarm-warning-color, #201400);
  --jqx-timeline-blocked: var(--jqx-industrial-alarm-advisory, #e8c033);
  --jqx-timeline-blocked-color: var(--jqx-industrial-alarm-advisory-color, #26210a);
  --jqx-timeline-fault: var(--jqx-industrial-alarm-critical, var(--jqx-error, #c62828));
  --jqx-timeline-fault-color: var(--jqx-industrial-alarm-critical-color, #ffffff);
  --jqx-timeline-changeover: var(--jqx-industrial-manual, #1f5c94);
  --jqx-timeline-changeover-color: var(--jqx-industrial-accent-color, #ffffff);
  --jqx-timeline-maintenance: var(--jqx-industrial-maintenance, #6a4bab);
  --jqx-timeline-maintenance-color: var(--jqx-industrial-accent-color, #ffffff);
  --jqx-timeline-off-line: var(--jqx-text-tertiary-color, #4a5663);
  /* the canvas, a groove in both themes: the readout background it was is a display's black, and drew
     black bands across a light screen */
  --jqx-timeline-track: var(--jqx-industrial-canvas, rgba(128, 128, 128, 0.12));
  display: block;
  font-family: var(--jqx-font-family);
  font-size: 12px;
}
jqx-state-timeline .jqx-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
jqx-state-timeline .jqx-timeline-grid {
  display: flex;
  flex-direction: column;
  gap: var(--jqx-timeline-gap);
  border: var(--jqx-border-width) solid var(--jqx-industrial-panel-border, var(--jqx-border));
  border-radius: var(--jqx-border-radius);
  background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  padding: 6px 8px 8px;
  overflow: hidden;
}
jqx-state-timeline .jqx-timeline-row {
  display: grid;
  grid-template-columns: var(--jqx-timeline-label-width) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: var(--jqx-timeline-row-height);
}
jqx-state-timeline .jqx-timeline-header {
  min-height: 22px;
  color: var(--jqx-text-tertiary-color);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
jqx-state-timeline .jqx-timeline-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-right: 4px;
  line-height: 1.25;
}
jqx-state-timeline .jqx-timeline-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--jqx-text-color);
}
jqx-state-timeline .jqx-timeline-row-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  color: var(--jqx-text-secondary-color);
  font-variant-numeric: tabular-nums;
}
jqx-state-timeline .jqx-timeline-with-summary .jqx-timeline-row[data-row] {
  min-height: calc(var(--jqx-timeline-row-height) + 14px);
}
jqx-state-timeline {
  /* The track: the window, with each segment placed by its share of it. The track is the
     record's background, so a gap in the record is visibly a gap. */
}
jqx-state-timeline .jqx-timeline-track {
  position: relative;
  height: var(--jqx-timeline-row-height);
  border-radius: 3px;
  background: var(--jqx-timeline-track);
  overflow: hidden;
}
jqx-state-timeline .jqx-timeline-axis {
  height: 18px;
  background: transparent;
  overflow: visible;
}
jqx-state-timeline .jqx-timeline-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--jqx-border);
}
jqx-state-timeline .jqx-timeline-tick span {
  position: absolute;
  left: 3px;
  top: 1px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
jqx-state-timeline {
  /* the last label, where it would run past the end: read from the left of its tick */
}
jqx-state-timeline .jqx-timeline-tick.jqx-timeline-tick-end span {
  left: auto;
  right: 3px;
}
jqx-state-timeline .jqx-timeline-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  /* the colour only: a tone's pattern is a background-image over it */
  background-color: var(--jqx-timeline-color);
  /* the text on a fill is the theme's pairing for it: white on the light theme's deep fills,
     dark on the dark theme's bright ones */
  color: var(--jqx-industrial-unknown-color, #ffffff);
  overflow: hidden;
  cursor: pointer;
  outline: none;
}
jqx-state-timeline .jqx-timeline-ok {
  --jqx-timeline-color: var(--jqx-timeline-ok);
  color: var(--jqx-timeline-running-color);
}
jqx-state-timeline .jqx-timeline-warning {
  --jqx-timeline-color: var(--jqx-timeline-warning);
  color: var(--jqx-industrial-alarm-warning-color, #201400);
}
jqx-state-timeline .jqx-timeline-critical {
  --jqx-timeline-color: var(--jqx-timeline-critical);
  color: var(--jqx-industrial-alarm-critical-color, #ffffff);
}
jqx-state-timeline .jqx-timeline-accent {
  --jqx-timeline-color: var(--jqx-timeline-accent);
  color: var(--jqx-industrial-accent-color, #ffffff);
}
jqx-state-timeline .jqx-timeline-neutral {
  --jqx-timeline-color: var(--jqx-timeline-neutral);
}
jqx-state-timeline .jqx-timeline-off {
  --jqx-timeline-color: var(--jqx-timeline-off);
  color: var(--jqx-text-color);
}
jqx-state-timeline {
  /* The floor states' own tones, over the severity class each also carries. */
}
jqx-state-timeline .jqx-timeline-tone-running {
  --jqx-timeline-color: var(--jqx-timeline-running);
  color: var(--jqx-timeline-running-color);
}
jqx-state-timeline .jqx-timeline-tone-idle {
  --jqx-timeline-color: var(--jqx-timeline-idle);
  color: var(--jqx-timeline-idle-color);
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255, 255, 255, 0.35) 4px 6px);
}
jqx-state-timeline .jqx-timeline-tone-ready {
  --jqx-timeline-color: var(--jqx-timeline-ready);
  color: var(--jqx-timeline-ready-color);
  box-shadow: inset 0 0 0 2px var(--jqx-timeline-ready-line);
}
jqx-state-timeline .jqx-timeline-tone-stopped {
  --jqx-timeline-color: var(--jqx-timeline-stopped);
  color: var(--jqx-timeline-stopped-color);
}
jqx-state-timeline .jqx-timeline-tone-starved {
  --jqx-timeline-color: var(--jqx-timeline-starved);
  color: var(--jqx-timeline-starved-color);
}
jqx-state-timeline .jqx-timeline-tone-blocked {
  --jqx-timeline-color: var(--jqx-timeline-blocked);
  color: var(--jqx-timeline-blocked-color);
  background-image: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(0, 0, 0, 0.2) 5px 8px);
}
jqx-state-timeline .jqx-timeline-tone-fault {
  --jqx-timeline-color: var(--jqx-timeline-fault);
  color: var(--jqx-timeline-fault-color);
}
jqx-state-timeline .jqx-timeline-tone-changeover {
  --jqx-timeline-color: var(--jqx-timeline-changeover);
  color: var(--jqx-timeline-changeover-color);
}
jqx-state-timeline .jqx-timeline-tone-maintenance {
  --jqx-timeline-color: var(--jqx-timeline-maintenance);
  color: var(--jqx-timeline-maintenance-color);
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255, 255, 255, 0.22) 5px 8px);
}
jqx-state-timeline .jqx-timeline-tone-off {
  --jqx-timeline-color: var(--jqx-timeline-off);
  color: var(--jqx-text-color);
  outline: 1px dashed var(--jqx-timeline-off-line);
  outline-offset: -1px;
}
jqx-state-timeline {
  /* Several segments too short to draw one by one, drawn as one cell in the colour of the
     state that took most of it; fine hairlines say there is more than one state inside. */
}
jqx-state-timeline .jqx-timeline-segment.jqx-timeline-mixed {
  border-right: none;
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
}
jqx-state-timeline {
  /* An open segment fades out at the right: it is not finished. */
}
jqx-state-timeline .jqx-timeline-ongoing {
  border-right: none;
  mask-image: linear-gradient(to right, #000 calc(100% - 14px), rgba(0, 0, 0, 0.35));
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), rgba(0, 0, 0, 0.35));
}
jqx-state-timeline .jqx-timeline-reason {
  display: block;
  padding: 0 5px;
  line-height: var(--jqx-timeline-row-height);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
jqx-state-timeline .jqx-timeline-segment:hover {
  filter: brightness(1.08);
}
jqx-state-timeline .jqx-timeline-selected {
  box-shadow: inset 0 0 0 2px var(--jqx-text-color), inset 0 0 0 3px var(--jqx-industrial-panel-background, var(--jqx-surface));
}
jqx-state-timeline .jqx-timeline-segment:focus-visible {
  box-shadow: inset 0 0 0 2px var(--jqx-industrial-focus, var(--jqx-primary)), inset 0 0 0 4px var(--jqx-industrial-focus-halo, #ffffff);
}
jqx-state-timeline {
  /* ready is hollow: selected or focused, it keeps its outline inside the ring */
}
jqx-state-timeline .jqx-timeline-tone-ready.jqx-timeline-selected {
  box-shadow: inset 0 0 0 2px var(--jqx-text-color), inset 0 0 0 3px var(--jqx-industrial-panel-background, var(--jqx-surface)), inset 0 0 0 5px var(--jqx-timeline-ready-line);
}
jqx-state-timeline .jqx-timeline-tone-ready:focus-visible {
  box-shadow: inset 0 0 0 2px var(--jqx-industrial-focus, var(--jqx-primary)), inset 0 0 0 4px var(--jqx-industrial-focus-halo, #ffffff), inset 0 0 0 6px var(--jqx-timeline-ready-line);
}
jqx-state-timeline .jqx-timeline-empty {
  padding: 10px 4px;
  color: var(--jqx-text-secondary-color);
}
jqx-state-timeline {
  /* The legend */
}
jqx-state-timeline .jqx-timeline-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--jqx-text-secondary-color);
}
jqx-state-timeline .jqx-timeline-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
jqx-state-timeline .jqx-timeline-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background-color: var(--jqx-timeline-color);
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}
jqx-state-timeline {
  /* Disabled: dimmed, no pointer, no tab stop (the cells' tabindex), no events. */
}
jqx-state-timeline[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

/* The mixed tones follow the theme on the page: the running grey-green from the theme's ok and
   unknown, idle and ready's outline from its grey and panel, stopped from its text colour - so
   stopped is the heaviest band on a light screen and on a dark one alike. */
@supports (color: color-mix(in srgb, red, blue)) {
  jqx-state-timeline {
    --jqx-timeline-ok: color-mix(in srgb, var(--jqx-industrial-ok, var(--jqx-success, #2a7a3d)) 35%, var(--jqx-industrial-unknown, #8b98a6));
    --jqx-timeline-running: color-mix(in srgb, var(--jqx-industrial-ok, var(--jqx-success, #2a7a3d)) 35%, var(--jqx-industrial-unknown, #8b98a6));
    --jqx-timeline-idle: color-mix(in srgb, var(--jqx-industrial-unknown, #8b98a6) 70%, var(--jqx-industrial-panel-background, var(--jqx-background, #ffffff)));
    --jqx-timeline-ready-line: color-mix(in srgb, var(--jqx-industrial-unknown, #8b98a6) 60%, var(--jqx-text-color, #131c25));
    --jqx-timeline-stopped: color-mix(in srgb, var(--jqx-text-color, #131c25) 60%, var(--jqx-industrial-unknown, #8b98a6));
  }
}
/* .jqx-element carries the framework's own background and color at higher specificity
   than a bare tag selector, so anything that sets those has to be restated here. */
jqx-state-timeline.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-state-timeline takes by default. */
jqx-state-timeline:not(:defined) {
  min-height: 88px;
}

/* jqx-stack-light */
jqx-stack-light {
  --jqx-stack-segment-width: 28px;
  --jqx-stack-segment-height: 22px;
  --jqx-stack-gap: 2px;
  --jqx-stack-flash-rate: 800ms;
  /* The five tower colours. A lit segment is the colour; an unlit one is the colour at
     a fraction, so the tower's layout reads even when everything is off. */
  --jqx-stack-red: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-stack-amber: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  --jqx-stack-green: var(--jqx-industrial-ok, var(--jqx-success));
  --jqx-stack-blue: var(--jqx-industrial-manual, var(--jqx-primary));
  --jqx-stack-white: #e8edf2;
  --jqx-stack-off-opacity: 0.22;
  --jqx-stack-body: var(--jqx-industrial-panel-header-background, var(--jqx-surface));
  display: inline-block;
  font-family: var(--jqx-font-family);
  font-size: 12px;
}
jqx-stack-light .jqx-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
jqx-stack-light .jqx-stack {
  display: flex;
  flex-direction: column;
  gap: var(--jqx-stack-gap);
  padding: 4px;
  border-radius: 6px;
  background: var(--jqx-stack-body);
  border: 1px solid var(--jqx-industrial-panel-border, var(--jqx-border));
}
jqx-stack-light .jqx-stack-segment {
  display: block;
  width: var(--jqx-stack-segment-width);
  height: var(--jqx-stack-segment-height);
  border-radius: 3px;
  background: var(--jqx-stack-color);
  opacity: var(--jqx-stack-off-opacity);
  /* a border keeps the white segment, and an unlit one on a light panel, on the page */
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  cursor: default;
  transition: opacity 120ms linear;
}
jqx-stack-light .jqx-stack-red {
  --jqx-stack-color: var(--jqx-stack-red);
}
jqx-stack-light .jqx-stack-amber {
  --jqx-stack-color: var(--jqx-stack-amber);
}
jqx-stack-light .jqx-stack-green {
  --jqx-stack-color: var(--jqx-stack-green);
}
jqx-stack-light .jqx-stack-blue {
  --jqx-stack-color: var(--jqx-stack-blue);
}
jqx-stack-light .jqx-stack-white {
  --jqx-stack-color: var(--jqx-stack-white);
}
jqx-stack-light .jqx-stack-segment.jqx-stack-on,
jqx-stack-light .jqx-stack-segment.jqx-stack-flash,
jqx-stack-light .jqx-stack-segment.jqx-stack-fast {
  opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 0 8px var(--jqx-stack-color);
}
jqx-stack-light .jqx-stack-segment.jqx-stack-flash {
  animation: jqx-stack-flash var(--jqx-stack-flash-rate) steps(1, end) infinite;
}
jqx-stack-light .jqx-stack-segment.jqx-stack-fast {
  animation: jqx-stack-flash calc(var(--jqx-stack-flash-rate) / 2) steps(1, end) infinite;
}
jqx-stack-light {
  /* Segments are buttons only when something listens for a press on one. An unlit segment is
     drawn faded, and a ring on it would fade too, so the tower carries the ring and the
     segment an outline of its own. */
}
jqx-stack-light .jqx-stack-segment[role=button] {
  cursor: pointer;
}
jqx-stack-light .jqx-stack-segment:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 2px;
}
jqx-stack-light .jqx-stack:has(.jqx-stack-segment:focus-visible) {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--jqx-industrial-focus-halo, transparent);
}
jqx-stack-light {
  /* A state the tower cannot show - its segments are not on this tower, or the word is not in
     the map - is said under the tower rather than shown as a dark one. */
}
jqx-stack-light .jqx-stack-note {
  max-width: 14em;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
}
jqx-stack-light .jqx-stack-note[hidden] {
  display: none;
}
jqx-stack-light .jqx-stack-unshown .jqx-stack {
  border-style: dashed;
  border-color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
}
jqx-stack-light {
  /* The horn: a sounder glyph, waves drawn while it sounds, crossed once muted. The
     button is the operator's request to silence it. */
}
jqx-stack-light .jqx-stack-horn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--jqx-stack-segment-width);
  height: var(--jqx-stack-segment-height);
  padding: 0;
  border: 1px solid var(--jqx-industrial-panel-border, var(--jqx-border));
  border-radius: 3px;
  background: var(--jqx-stack-body);
  color: var(--jqx-text-color);
  cursor: pointer;
}
jqx-stack-light .jqx-stack-horn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
jqx-stack-light .jqx-stack-horn svg path:first-child {
  stroke: none;
}
jqx-stack-light .jqx-stack-horn svg .jqx-stack-horn-wave {
  fill: none;
}
jqx-stack-light .jqx-stack-horn-on {
  color: var(--jqx-industrial-alarm-critical-color, #ffffff);
  background: var(--jqx-stack-red);
  border-color: transparent;
  animation: jqx-stack-flash var(--jqx-stack-flash-rate) steps(1, end) infinite;
}
jqx-stack-light .jqx-stack-horn-muted {
  color: var(--jqx-text-secondary-color);
}
jqx-stack-light .jqx-stack-horn-muted .jqx-stack-horn-wave {
  display: none;
}
jqx-stack-light .jqx-stack-horn:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 2px;
}
jqx-stack-light {
  /* The legend beside the tower */
}
jqx-stack-light .jqx-stack-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
}
jqx-stack-light .jqx-stack-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--jqx-text-secondary-color);
}
jqx-stack-light .jqx-stack-legend-item.jqx-stack-on, jqx-stack-light .jqx-stack-legend-item.jqx-stack-flash, jqx-stack-light .jqx-stack-legend-item.jqx-stack-fast {
  color: var(--jqx-text-color);
  font-weight: 600;
}
jqx-stack-light .jqx-stack-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  background: var(--jqx-stack-color);
}
jqx-stack-light .jqx-stack-legend-state {
  margin-left: auto;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
jqx-stack-light {
  /* Horizontal: segments in a row, red on the left, as a tower laid on its side reads. */
}
jqx-stack-light .jqx-stack-horizontal {
  flex-direction: row;
}
jqx-stack-light .jqx-stack-horizontal .jqx-stack {
  flex-direction: row;
}
jqx-stack-light .jqx-stack-horizontal .jqx-stack-legend {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
jqx-stack-light .jqx-stack-with-legend {
  align-items: flex-start;
  flex-direction: row;
}
jqx-stack-light .jqx-stack-with-legend .jqx-stack-legend {
  margin-left: 4px;
}
jqx-stack-light .jqx-stack-with-legend.jqx-stack-horizontal {
  flex-direction: column;
  align-items: flex-start;
}

@keyframes jqx-stack-flash {
  50% {
    opacity: var(--jqx-stack-off-opacity, 0.22);
  }
}
/* A user who asked for less motion still has to see the difference between on and
   flashing: a flashing segment is drawn lit with a broken ring instead. */
@media (prefers-reduced-motion: reduce) {
  jqx-stack-light .jqx-stack-segment.jqx-stack-flash,
  jqx-stack-light .jqx-stack-segment.jqx-stack-fast,
  jqx-stack-light .jqx-stack-horn-on {
    animation: none;
    outline: 2px dashed var(--jqx-text-color);
    outline-offset: 1px;
  }
}
/* .jqx-element carries the framework's own background and color at higher specificity
   than a bare tag selector, so anything that sets those has to be restated here. */
jqx-stack-light.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-stack-light takes by default. */
jqx-stack-light:not(:defined) {
  min-width: 46px;
  min-height: 38px;
}

@charset "UTF-8";
/* jqx-thermometer */
jqx-thermometer {
  --jqx-thermometer-length: 180px;
  --jqx-thermometer-stem-width: 14px;
  --jqx-thermometer-bulb-size: 30px;
  /* The liquid. Mercury red by default, because that is the instrument everybody pictures;
     a plant that draws its thermometers in the process colour sets the variable. */
  --jqx-thermometer-liquid: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-thermometer-tube: var(--jqx-surface);
  --jqx-thermometer-tube-border: var(--jqx-industrial-panel-border, var(--jqx-border));
  --jqx-thermometer-tick: var(--jqx-text-secondary-color, var(--jqx-border));
  --jqx-thermometer-setpoint: var(--jqx-industrial-manual, var(--jqx-primary));
  display: inline-block;
  font-family: var(--jqx-font-family);
  font-size: 11px;
  color: var(--jqx-text-color);
}
jqx-thermometer .jqx-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  box-sizing: border-box;
}
jqx-thermometer .jqx-thermometer-body {
  display: flex;
  position: relative;
}
jqx-thermometer {
  /* The tube: the stem and, below it, the bulb. The bulb hangs outside the measured
     length, so a mark at the minimum sits at the foot of the stem and not somewhere in
     the reservoir - the scale and the column have to agree about where zero is. */
}
jqx-thermometer .jqx-thermometer-tube {
  position: relative;
  flex: none;
}
jqx-thermometer .jqx-thermometer-stem {
  position: absolute;
  overflow: hidden;
  background: var(--jqx-thermometer-tube);
  border: 1px solid var(--jqx-thermometer-tube-border);
}
jqx-thermometer .jqx-thermometer-bulb {
  position: absolute;
  width: var(--jqx-thermometer-bulb-size);
  height: var(--jqx-thermometer-bulb-size);
  border-radius: 50%;
  background: var(--jqx-thermometer-liquid);
  border: 1px solid var(--jqx-thermometer-tube-border);
  box-sizing: border-box;
}
jqx-thermometer .jqx-thermometer-column {
  position: absolute;
  background: var(--jqx-thermometer-liquid);
}
jqx-thermometer {
  /* The alarm bands, the length of the stem behind the column. */
}
jqx-thermometer .jqx-thermometer-ranges {
  position: absolute;
  inset: 0;
}
jqx-thermometer .jqx-thermometer-range {
  position: absolute;
  opacity: 0.3;
  background: var(--jqx-industrial-unknown, var(--jqx-border));
}
jqx-thermometer .jqx-thermometer-range.critical {
  background: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}
jqx-thermometer .jqx-thermometer-range.warning {
  background: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}
jqx-thermometer .jqx-thermometer-range.ok {
  background: var(--jqx-industrial-ok, var(--jqx-success));
}
jqx-thermometer {
  /* A column coloured by the band it has reached, and the bulb with it: the liquid is
     one body, and a red stem over a red-only-sometimes bulb reads as two instruments. */
}
jqx-thermometer .jqx-thermometer-column.critical,
jqx-thermometer .jqx-thermometer-bulb.critical {
  background: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}
jqx-thermometer .jqx-thermometer-column.warning,
jqx-thermometer .jqx-thermometer-bulb.warning {
  background: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}
jqx-thermometer .jqx-thermometer-column.ok,
jqx-thermometer .jqx-thermometer-bulb.ok {
  background: var(--jqx-industrial-ok, var(--jqx-success));
}
jqx-thermometer .jqx-thermometer-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
jqx-thermometer .jqx-thermometer-setpoint,
jqx-thermometer .jqx-thermometer-extreme {
  position: absolute;
}
jqx-thermometer .jqx-thermometer-setpoint {
  background: var(--jqx-thermometer-setpoint);
}
jqx-thermometer {
  /* The max-min pair. Open marks, so they are never mistaken for the reading itself. */
}
jqx-thermometer .jqx-thermometer-extreme {
  background: transparent;
  border: 1px solid var(--jqx-text-color);
}
jqx-thermometer .jqx-thermometer-scale {
  position: relative;
  flex: none;
  /* Set from the longest label; the variable is the floor, for a scale with no labels
     at all, and the ceiling nothing - a host that wants a fixed gutter sets both. */
  min-width: var(--jqx-thermometer-scale-size, 0);
}
jqx-thermometer .jqx-thermometer-mark {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  line-height: 1;
}
jqx-thermometer .jqx-thermometer-tick {
  display: block;
  background: var(--jqx-thermometer-tick);
}
jqx-thermometer .jqx-thermometer-label {
  color: var(--jqx-text-color);
  font-variant-numeric: tabular-nums;
}
jqx-thermometer .jqx-thermometer-scale-unit {
  position: absolute;
  font-weight: 600;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-thermometer .jqx-thermometer-readout {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
jqx-thermometer {
  /* The words on the instrument: off the scale (and which end), no reading, and the
     reading's quality. Words, so the state is legible without colour, and at full contrast -
     the dimming for uncertain and stale is the liquid's, never the text's. A badge on the
     bulb, which always holds liquid and so carries no reading, rather than a line of its
     own: a line that came and went with the state would move every instrument below or
     beside it each time a reading crossed the end of the scale. */
}
jqx-thermometer .jqx-thermometer-flag {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--jqx-text-color);
  background: var(--jqx-surface, var(--jqx-background));
  border: 1px solid var(--jqx-thermometer-tube-border);
  border-radius: 2px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
jqx-thermometer .jqx-thermometer-range-flag {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
}
jqx-thermometer .jqx-thermometer-quality-flag {
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-text-color));
}
jqx-thermometer[quality=bad] .jqx-thermometer-quality-flag {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
}
jqx-thermometer .jqx-thermometer-range-flag:empty,
jqx-thermometer .jqx-thermometer-quality-flag:empty {
  display: none;
}
jqx-thermometer {
  /* No reading: an empty stem, a greyed bulb and a dashed tube. Not an alarm colour - the
     instrument has been told nothing, not that something is wrong - and no column, because
     a column at the foot of the scale is a reading of the minimum. */
}
jqx-thermometer .jqx-thermometer-no-reading .jqx-thermometer-column {
  display: none;
}
jqx-thermometer .jqx-thermometer-no-reading .jqx-thermometer-bulb {
  background: var(--jqx-industrial-unknown, var(--jqx-border));
}
jqx-thermometer .jqx-thermometer-no-reading .jqx-thermometer-stem {
  border-style: dashed;
}
jqx-thermometer .jqx-thermometer-no-reading .jqx-thermometer-range-flag {
  color: var(--jqx-text-color);
}
jqx-thermometer {
  /* ── Vertical ─────────────────────────────────────────────────────────── */
}
jqx-thermometer .jqx-thermometer-vertical {
  /* Room above the stem for the unit, which is printed over the top of the scale. */
  padding-top: 1.7em;
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-body {
  flex-direction: row;
  align-items: stretch;
  /* The length is the basis, not a ceiling: in a host with a height of its own - a cell
     on a panel - the stem takes it, and on a page it stays as long as it was drawn. */
  flex: 1 1 var(--jqx-thermometer-length);
  min-height: 24px;
  gap: 4px;
  /* Room under the stem for the bulb, which hangs below the measured length. It is
     the body's margin and not the container's padding, so the digital reading below
     lands under the bulb instead of behind it. */
  margin-bottom: calc(var(--jqx-thermometer-bulb-size) - 6px);
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-tube {
  width: var(--jqx-thermometer-bulb-size);
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-stem {
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--jqx-thermometer-stem-width);
  margin-left: calc(var(--jqx-thermometer-stem-width) / -2);
  border-radius: calc(var(--jqx-thermometer-stem-width) / 2) calc(var(--jqx-thermometer-stem-width) / 2) 0 0;
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-bulb {
  top: 100%;
  left: 50%;
  margin: -6px 0 0 calc(var(--jqx-thermometer-bulb-size) / -2);
}
jqx-thermometer .jqx-thermometer-vertical {
  /* Centred on the bulb. */
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-flag {
  top: calc(100% - 6px + var(--jqx-thermometer-bulb-size) / 2);
  left: 50%;
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-column {
  left: 0;
  right: 0;
  bottom: 0;
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-range {
  left: 0;
  right: 0;
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-setpoint,
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-extreme {
  left: -5px;
  right: -5px;
  height: 2px;
  margin-bottom: -1px;
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-tick {
  width: 4px;
  height: 1px;
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-tick.jqx-thermometer-tick-major {
  width: 7px;
}
jqx-thermometer .jqx-thermometer-vertical {
  /* The near scale is on the reading side: its ticks touch the tube, so the mark is
     laid out backwards - label first, tick against the glass. */
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-scale-near .jqx-thermometer-mark {
  right: 0;
  flex-direction: row-reverse;
  margin-bottom: -0.5em;
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-scale-far .jqx-thermometer-mark {
  left: 0;
  margin-bottom: -0.5em;
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-scale-unit {
  bottom: 100%;
  margin-bottom: 0.6em;
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-scale-near .jqx-thermometer-scale-unit {
  right: 0;
}
jqx-thermometer .jqx-thermometer-vertical .jqx-thermometer-scale-far .jqx-thermometer-scale-unit {
  left: 0;
}
jqx-thermometer {
  /* ── Horizontal ───────────────────────────────────────────────────────── */
}
jqx-thermometer .jqx-thermometer-horizontal {
  /* The bulb hangs off the left end and the unit is printed past the right, so both are
     the container's padding: the stem itself is then free to be the width it is given. */
  padding-left: calc(var(--jqx-thermometer-bulb-size) - 6px);
  padding-right: 2.4em;
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-body {
  flex-direction: column;
  align-items: stretch;
  width: var(--jqx-thermometer-length);
  max-width: 100%;
  gap: 4px;
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-tube {
  height: var(--jqx-thermometer-bulb-size);
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-stem {
  left: 0;
  right: 0;
  top: 50%;
  height: var(--jqx-thermometer-stem-width);
  margin-top: calc(var(--jqx-thermometer-stem-width) / -2);
  border-radius: 0 calc(var(--jqx-thermometer-stem-width) / 2) calc(var(--jqx-thermometer-stem-width) / 2) 0;
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-bulb {
  left: auto;
  right: 100%;
  top: 50%;
  margin: calc(var(--jqx-thermometer-bulb-size) / -2) -6px 0 0;
}
jqx-thermometer .jqx-thermometer-horizontal {
  /* Centred on the bulb. */
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-flag {
  top: 50%;
  left: calc(6px - var(--jqx-thermometer-bulb-size) / 2);
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-column {
  top: 0;
  bottom: 0;
  left: 0;
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-range {
  top: 0;
  bottom: 0;
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-setpoint,
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-extreme {
  top: -5px;
  bottom: -5px;
  width: 2px;
  margin-left: -1px;
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-scale {
  min-width: 0;
  min-height: var(--jqx-thermometer-scale-size, 0);
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-mark {
  flex-direction: column;
  transform: translateX(-50%);
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-tick {
  width: 1px;
  height: 4px;
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-tick.jqx-thermometer-tick-major {
  height: 7px;
}
jqx-thermometer .jqx-thermometer-horizontal {
  /* As on the vertical scale: the tick touches the glass and the label sits outside it.
     This also puts every tick on one baseline - a mark with no label would otherwise leave
     its tick at the tube while a labelled one pushed its tick out by the label's height,
     which is what made the minor ticks read as commas between the numbers. */
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-scale-near .jqx-thermometer-mark {
  bottom: 0;
  flex-direction: column-reverse;
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-scale-far .jqx-thermometer-mark {
  top: 0;
  flex-direction: column;
}
jqx-thermometer .jqx-thermometer-horizontal {
  /* The last label is centred on the end of the scale, so half of it hangs past it: the
     unit clears that half rather than landing on top of it. */
}
jqx-thermometer .jqx-thermometer-horizontal .jqx-thermometer-scale-unit {
  left: 100%;
  margin-left: calc(var(--jqx-thermometer-end-label, 0ch) / 2 + 7px);
  top: 50%;
  transform: translateY(-50%);
}
jqx-thermometer .jqx-thermometer-no-bulb {
  padding-left: 0;
}
jqx-thermometer .jqx-thermometer-no-bulb .jqx-thermometer-body {
  margin-bottom: 0;
}
jqx-thermometer[quality=bad] .jqx-thermometer-column, jqx-thermometer[quality=bad] .jqx-thermometer-bulb {
  /* The reading is not to be believed: hatched, as everywhere else in the suite. */
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.35) 0 3px, transparent 3px 6px);
}
jqx-thermometer[quality=stale] .jqx-thermometer-column, jqx-thermometer[quality=stale] .jqx-thermometer-bulb, jqx-thermometer[quality=uncertain] .jqx-thermometer-column, jqx-thermometer[quality=uncertain] .jqx-thermometer-bulb {
  opacity: 0.55;
}
jqx-thermometer[disabled] {
  opacity: 0.6;
}
jqx-thermometer:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 2px;
}

/* jqx-panel-meter */
jqx-panel-meter {
  --jqx-panel-meter-width: 200px;
  --jqx-panel-meter-plate: var(--jqx-surface);
  --jqx-panel-meter-bezel: var(--jqx-industrial-panel-border, var(--jqx-border));
  --jqx-panel-meter-ink: var(--jqx-text-color);
  --jqx-panel-meter-tick: var(--jqx-text-secondary-color, var(--jqx-text-color));
  /* The needle. Black on a pale plate is what a moving-coil instrument is, and it is the
     only mark on the face that has to be read at a glance from two metres. */
  --jqx-panel-meter-needle: var(--jqx-text-color);
  --jqx-panel-meter-setpoint: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-panel-meter-mirror: var(--jqx-industrial-manual, var(--jqx-primary));
  display: inline-block;
  font-family: var(--jqx-font-family);
  font-size: 11px;
  color: var(--jqx-panel-meter-ink);
}
jqx-panel-meter .jqx-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
jqx-panel-meter {
  /* The case: the box the movement is screwed into. */
}
jqx-panel-meter .jqx-panel-meter-case {
  width: var(--jqx-panel-meter-width);
  padding: 4px;
  border: 1px solid var(--jqx-panel-meter-bezel);
  border-radius: 3px;
  background: var(--jqx-panel-meter-plate);
  box-sizing: border-box;
}
jqx-panel-meter .jqx-panel-meter-face {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
jqx-panel-meter .jqx-panel-meter-arc {
  fill: none;
  stroke: var(--jqx-panel-meter-tick);
  stroke-width: 1.2;
}
jqx-panel-meter {
  /* The alarm bands, painted on the plate under the scale arc. */
}
jqx-panel-meter .jqx-panel-meter-band {
  fill: none;
  stroke-width: 6;
  stroke: var(--jqx-industrial-unknown, var(--jqx-border));
  opacity: 0.45;
}
jqx-panel-meter .jqx-panel-meter-band.critical {
  stroke: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}
jqx-panel-meter .jqx-panel-meter-band.warning {
  stroke: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}
jqx-panel-meter .jqx-panel-meter-band.ok {
  stroke: var(--jqx-industrial-ok, var(--jqx-success));
}
jqx-panel-meter {
  /* The anti-parallax mirror: the strip the needle is lined up with its own reflection in.
     Drawn as a thin bright band, which is what it looks like on the plate. */
}
jqx-panel-meter .jqx-panel-meter-mirror {
  fill: none;
  stroke: var(--jqx-panel-meter-mirror);
  stroke-width: 5;
  opacity: 0.3;
}
jqx-panel-meter .jqx-panel-meter-tick {
  stroke: var(--jqx-panel-meter-tick);
  stroke-width: 0.9;
}
jqx-panel-meter .jqx-panel-meter-tick-major {
  stroke-width: 1.6;
  stroke: var(--jqx-panel-meter-ink);
}
jqx-panel-meter .jqx-panel-meter-label {
  fill: var(--jqx-panel-meter-ink);
  font-size: 11px;
  font-family: var(--jqx-font-family);
}
jqx-panel-meter .jqx-panel-meter-unit {
  fill: var(--jqx-panel-meter-tick);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--jqx-font-family);
}
jqx-panel-meter .jqx-panel-meter-caption {
  fill: var(--jqx-panel-meter-tick);
  font-size: 10px;
  font-family: var(--jqx-font-family);
}
jqx-panel-meter {
  /* The needle and its hub. */
}
jqx-panel-meter .jqx-panel-meter-pointer {
  fill: var(--jqx-panel-meter-needle);
}
jqx-panel-meter .jqx-panel-meter-pointer.critical {
  fill: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}
jqx-panel-meter .jqx-panel-meter-pointer.warning {
  fill: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}
jqx-panel-meter .jqx-panel-meter-pointer.ok {
  fill: var(--jqx-industrial-ok, var(--jqx-success));
}
jqx-panel-meter .jqx-panel-meter-hub {
  fill: var(--jqx-panel-meter-plate);
  stroke: var(--jqx-panel-meter-needle);
  stroke-width: 2;
}
jqx-panel-meter .jqx-panel-meter-setpoint {
  fill: var(--jqx-panel-meter-setpoint);
}
jqx-panel-meter {
  /* A centre-zero movement's rest line, longer and heavier than a major mark. */
}
jqx-panel-meter .jqx-panel-meter-zero {
  stroke: var(--jqx-panel-meter-ink);
  stroke-width: 2;
}
jqx-panel-meter {
  /* The over-range flag: a word, not only a colour. */
}
jqx-panel-meter .jqx-panel-meter-flag {
  fill: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: var(--jqx-font-family);
}
jqx-panel-meter .jqx-panel-meter-case.jqx-panel-meter-over,
jqx-panel-meter .jqx-panel-meter-case.jqx-panel-meter-under {
  border-color: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}
jqx-panel-meter {
  /* No reading: the needle is gone and the flag says so. Not an alarm colour - the meter
     has not been told the process is abnormal, it has been told nothing - but a dashed
     case, so a dead feed is not mistaken for a meter that is simply switched off. */
}
jqx-panel-meter .jqx-panel-meter-case.jqx-panel-meter-no-reading {
  border-style: dashed;
}
jqx-panel-meter .jqx-panel-meter-case.jqx-panel-meter-no-reading .jqx-panel-meter-flag {
  fill: var(--jqx-panel-meter-ink);
}
jqx-panel-meter {
  /* The reading's quality, as a word on the plate opposite the range flag: legible without
     colour, and at full contrast - the dimming is the needle's, never the text's. */
}
jqx-panel-meter .jqx-panel-meter-quality {
  fill: var(--jqx-industrial-alarm-warning-text, var(--jqx-panel-meter-ink));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: var(--jqx-font-family);
}
jqx-panel-meter[quality=bad] .jqx-panel-meter-quality {
  fill: var(--jqx-industrial-alarm-critical-text, var(--jqx-panel-meter-ink));
}
jqx-panel-meter .jqx-panel-meter-readout {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
jqx-panel-meter[quality=bad] .jqx-panel-meter-pointer {
  /* The reading is not to be believed. A hatch cannot be drawn on a needle this thin, so
     the whole face is struck through instead - see the case rule below. */
  fill: var(--jqx-industrial-unknown, var(--jqx-border));
}
jqx-panel-meter[quality=bad] .jqx-panel-meter-case {
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.08) 0 4px, transparent 4px 8px);
}
jqx-panel-meter {
  /* Dimmed is the needle - the reading - and not the plate: fading the whole face took the
     scale numbers and the unit to under 3:1, so the instrument became hard to read exactly
     when it most needs reading carefully. The word above says why it is dimmed. */
}
jqx-panel-meter[quality=stale] .jqx-panel-meter-pointer, jqx-panel-meter[quality=uncertain] .jqx-panel-meter-pointer {
  opacity: 0.5;
}
jqx-panel-meter[disabled] {
  opacity: 0.6;
}
jqx-panel-meter:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 2px;
}

/* jqx-root-cause-tree */
jqx-root-cause-tree {
  --jqx-rct-indent: 22px;
  --jqx-rct-bar-height: 5px;
  --jqx-rct-bar-color: var(--jqx-primary);
  --jqx-rct-line-color: var(--jqx-industrial-panel-border, var(--jqx-border));
  display: block;
  font-family: var(--jqx-font-family);
  font-size: 13px;
}
jqx-root-cause-tree .jqx-container {
  width: 100%;
}
jqx-root-cause-tree .jqx-rct-tree,
jqx-root-cause-tree .jqx-rct-children {
  margin: 0;
  padding: 0;
  list-style: none;
}
jqx-root-cause-tree .jqx-rct-node {
  outline: none;
}
jqx-root-cause-tree {
  /* Indented by level through a variable rather than nested margins, so the bar column
     lines up down the whole tree. */
}
jqx-root-cause-tree .jqx-rct-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  /* logical sides: right to left, the indent and the tree run from the right */
  padding-block: 5px;
  padding-inline: calc(8px + var(--jqx-rct-depth, 0) * var(--jqx-rct-indent)) 8px;
  border-radius: var(--jqx-border-radius);
  cursor: pointer;
}
jqx-root-cause-tree .jqx-rct-row:hover {
  background: var(--jqx-industrial-panel-header-background, var(--jqx-surface));
}
jqx-root-cause-tree .jqx-rct-node:focus-visible > .jqx-rct-row {
  box-shadow: inset 0 0 0 2px var(--jqx-industrial-focus, var(--jqx-primary));
}
jqx-root-cause-tree .jqx-rct-selected > .jqx-rct-row {
  background: var(--jqx-industrial-panel-header-background, var(--jqx-surface));
  box-shadow: inset 3px 0 0 var(--jqx-rct-bar-color);
}
jqx-root-cause-tree .jqx-rct-selected > .jqx-rct-row:dir(rtl) {
  box-shadow: inset -3px 0 0 var(--jqx-rct-bar-color);
}
jqx-root-cause-tree .jqx-rct-toggle {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--jqx-text-secondary-color);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
}
jqx-root-cause-tree .jqx-rct-leaf::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 6px auto 0;
  border-radius: 50%;
  background: var(--jqx-rct-line-color);
}
jqx-root-cause-tree .jqx-rct-body {
  flex: 1 1 auto;
  min-width: 0;
}
jqx-root-cause-tree .jqx-rct-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
jqx-root-cause-tree .jqx-rct-label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
jqx-root-cause-tree .jqx-rct-root > .jqx-rct-row .jqx-rct-label {
  font-size: 14px;
}
jqx-root-cause-tree .jqx-rct-tag {
  flex: 0 0 auto;
  font-family: Consolas, Monaco, monospace;
  font-size: 11.5px;
  color: var(--jqx-text-secondary-color);
}
jqx-root-cause-tree .jqx-rct-percent {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: end;
  /* "62 %" stays one left-to-right run in a right-to-left tree, not "% 62" */
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
jqx-root-cause-tree {
  /* The bar is the contribution; the number beside it is the reading. */
}
jqx-root-cause-tree .jqx-rct-bar {
  height: var(--jqx-rct-bar-height);
  margin-top: 4px;
  border-radius: 2px;
  background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  overflow: hidden;
}
jqx-root-cause-tree .jqx-rct-bar-fill {
  display: block;
  height: 100%;
  background: var(--jqx-rct-bar-color);
  border-radius: 2px;
}
jqx-root-cause-tree .jqx-rct-root > .jqx-rct-row .jqx-rct-bar {
  display: none;
}
jqx-root-cause-tree .jqx-rct-evidence {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--jqx-text-secondary-color);
}
jqx-root-cause-tree .jqx-rct-folded,
jqx-root-cause-tree .jqx-rct-empty {
  padding-block: 4px 6px;
  padding-inline: calc(8px + var(--jqx-rct-indent) * 1.5) 8px;
  font-size: 12px;
  color: var(--jqx-text-tertiary-color);
}
jqx-root-cause-tree .jqx-rct-empty {
  padding-inline-start: 8px;
}
jqx-root-cause-tree {
  /* A share the model gave outside 0..1: the real number stays, with OVER or UNDER beside it,
     and the bar - held inside its track - ends in a hatch so a full bar is not read as 100 %. */
}
jqx-root-cause-tree .jqx-rct-range {
  margin-inline-start: 4px;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
jqx-root-cause-tree .jqx-rct-over > .jqx-rct-row .jqx-rct-percent,
jqx-root-cause-tree .jqx-rct-under > .jqx-rct-row .jqx-rct-percent {
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-text-color));
}
jqx-root-cause-tree .jqx-rct-over > .jqx-rct-row .jqx-rct-bar-fill {
  background-image: repeating-linear-gradient(-45deg, transparent 0 3px, var(--jqx-industrial-panel-background, var(--jqx-background, #fff)) 3px 5px);
}
jqx-root-cause-tree .jqx-rct-under > .jqx-rct-row .jqx-rct-bar {
  box-shadow: inset 2px 0 0 var(--jqx-industrial-alarm-warning, var(--jqx-warning, #d57d14));
}
jqx-root-cause-tree {
  /* No share at all: "--", and an empty bar. */
}
jqx-root-cause-tree .jqx-rct-no-share > .jqx-rct-row .jqx-rct-percent {
  color: var(--jqx-text-secondary-color);
}
jqx-root-cause-tree {
  /* A loop in the data: a marker in place of the node it would repeat. */
}
jqx-root-cause-tree .jqx-rct-cycle > .jqx-rct-row .jqx-rct-label {
  font-weight: 400;
  font-style: italic;
  white-space: normal;
  color: var(--jqx-text-secondary-color);
}
jqx-root-cause-tree .jqx-rct-loop {
  font-size: 14px;
  line-height: 18px;
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-text-secondary-color));
}
jqx-root-cause-tree .jqx-rct-too-deep,
jqx-root-cause-tree .jqx-rct-too-many {
  font-style: italic;
  color: var(--jqx-text-secondary-color);
}
jqx-root-cause-tree[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
jqx-root-cause-tree {
  /* Right to left the tree mirrors: indented from the right, opening towards the left (the
     arrow keys are mirrored in the script). The percentages stay one left-to-right run. */
}
jqx-root-cause-tree[right-to-left] {
  direction: rtl;
}

/* .jqx-element carries the framework's own background and color at higher specificity
   than a bare tag selector, so anything that sets those has to be restated here. */
jqx-root-cause-tree.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-root-cause-tree takes by default. */
jqx-root-cause-tree:not(:defined) {
  min-height: 300px;
}

/* jqx-anomaly-heatmap */
jqx-anomaly-heatmap {
  --jqx-heatmap-cell-size: 14px;
  --jqx-heatmap-row-height: 22px;
  --jqx-heatmap-series-width: 150px;
  --jqx-heatmap-gap: 1px;
  /* The neutral wash below the first threshold. Its depth is the score, set per cell. */
  --jqx-heatmap-wash-color: var(--jqx-secondary-rgb, 82, 96, 110);
  display: block;
  font-family: var(--jqx-font-family);
  font-size: 12px;
}
jqx-anomaly-heatmap .jqx-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
jqx-anomaly-heatmap {
  /* The grid scrolls sideways when the axis is wider than the element; the series column
     stays put so a row keeps its name while it scrolls. */
}
jqx-anomaly-heatmap .jqx-heatmap-grid {
  overflow-x: auto;
  overflow-y: hidden;
  border: var(--jqx-border-width) solid var(--jqx-industrial-panel-border, var(--jqx-border));
  border-radius: var(--jqx-border-radius);
  background: var(--jqx-industrial-panel-background, var(--jqx-surface));
}
jqx-anomaly-heatmap .jqx-heatmap-row {
  display: grid;
  /* A cell is at least its size and grows to fill the element when there is room; more
     columns than fit scroll instead. */
  grid-template-columns: var(--jqx-heatmap-series-width) repeat(var(--jqx-heatmap-columns, 1), minmax(var(--jqx-heatmap-cell-size), 1fr));
  gap: var(--jqx-heatmap-gap);
  width: max-content;
  min-width: 100%;
  height: var(--jqx-heatmap-row-height);
  align-items: stretch;
}
jqx-anomaly-heatmap .jqx-heatmap-header {
  height: 20px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--jqx-industrial-panel-header-background, var(--jqx-surface));
  color: var(--jqx-text-tertiary-color);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
jqx-anomaly-heatmap {
  /* Logical sides, so right-to-left mirrors the grid: the names at the right, time running
     leftwards - the way the arrow keys then move. */
}
jqx-anomaly-heatmap .jqx-heatmap-corner,
jqx-anomaly-heatmap .jqx-heatmap-series {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--jqx-industrial-panel-header-background, var(--jqx-surface));
  border-inline-end: var(--jqx-border-width) solid var(--jqx-industrial-panel-border, var(--jqx-border));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
jqx-anomaly-heatmap .jqx-heatmap-series {
  font-size: 11.5px;
}
jqx-anomaly-heatmap .jqx-heatmap-time {
  position: relative;
  overflow: visible;
}
jqx-anomaly-heatmap .jqx-heatmap-time span {
  position: absolute;
  inset-inline-start: 0;
  top: 3px;
  white-space: nowrap;
  border-inline-start: 1px solid var(--jqx-border);
  padding-inline-start: 3px;
  font-variant-numeric: tabular-nums;
}
jqx-anomaly-heatmap .jqx-heatmap-empty div {
  padding: 12px;
  color: var(--jqx-text-tertiary-color);
}
jqx-anomaly-heatmap {
  /* A cell: neutral wash by default, alarm colour by band. Selected is an inset ring so
     the colour, which is the meaning, stays visible. */
}
jqx-anomaly-heatmap .jqx-heatmap-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  background: rgba(var(--jqx-heatmap-wash-color), calc(0.08 + 0.55 * var(--jqx-heatmap-wash, 0)));
  color: var(--jqx-text-color);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  outline: none;
}
jqx-anomaly-heatmap .jqx-heatmap-cell span {
  overflow: hidden;
}
jqx-anomaly-heatmap .jqx-heatmap-empty-cell {
  background: transparent;
  cursor: default;
}
jqx-anomaly-heatmap .jqx-heatmap-cell.jqx-heatmap-advisory,
jqx-anomaly-heatmap .jqx-heatmap-swatch.jqx-heatmap-advisory {
  background: var(--jqx-industrial-alarm-advisory, #e5c728);
  color: var(--jqx-industrial-alarm-advisory-color, #1a1a1a);
}
jqx-anomaly-heatmap .jqx-heatmap-cell.jqx-heatmap-warning,
jqx-anomaly-heatmap .jqx-heatmap-swatch.jqx-heatmap-warning {
  background: var(--jqx-industrial-alarm-warning, #e08b1a);
  color: var(--jqx-industrial-alarm-warning-color, #ffffff);
}
jqx-anomaly-heatmap .jqx-heatmap-cell.jqx-heatmap-critical,
jqx-anomaly-heatmap .jqx-heatmap-swatch.jqx-heatmap-critical {
  background: var(--jqx-industrial-alarm-critical, #d62828);
  color: var(--jqx-industrial-alarm-critical-color, #ffffff);
}
jqx-anomaly-heatmap .jqx-heatmap-cell:focus-visible,
jqx-anomaly-heatmap .jqx-heatmap-selected {
  box-shadow: inset 0 0 0 2px var(--jqx-industrial-focus, var(--jqx-primary));
}
jqx-anomaly-heatmap .jqx-heatmap-cell:hover {
  filter: brightness(1.12);
}
jqx-anomaly-heatmap {
  /* The legend: the bands, in the colours the cells use. */
}
jqx-anomaly-heatmap .jqx-heatmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  color: var(--jqx-text-secondary-color);
}
jqx-anomaly-heatmap .jqx-heatmap-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
jqx-anomaly-heatmap .jqx-heatmap-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: rgba(var(--jqx-heatmap-wash-color), calc(0.08 + 0.55 * var(--jqx-heatmap-wash, 0)));
}
jqx-anomaly-heatmap[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
jqx-anomaly-heatmap[right-to-left] {
  direction: rtl;
}

/* .jqx-element carries the framework's own background and color at higher specificity
   than a bare tag selector, so anything that sets those has to be restated here. */
jqx-anomaly-heatmap.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-anomaly-heatmap takes by default. */
jqx-anomaly-heatmap:not(:defined) {
  min-height: 72px;
}

@charset "UTF-8";
/* jqx-audit-trail */
jqx-audit-trail {
  --jqx-audit-size: 32px;
  --jqx-audit-background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  --jqx-audit-header-background: var(--jqx-industrial-panel-header-background, var(--jqx-surface));
  --jqx-audit-border: var(--jqx-industrial-panel-border, var(--jqx-border));
  --jqx-audit-primary: var(--jqx-primary);
  --jqx-audit-primary-text: var(--jqx-primary-color, #fff);
  --jqx-audit-ok-text: var(--jqx-industrial-ok-text, var(--jqx-success));
  --jqx-audit-error-text: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  --jqx-audit-selected: rgba(128, 128, 128, 0.12);
  --jqx-audit-readout-font: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace);
  display: block;
  width: 100%;
}
jqx-audit-trail[density=touch] {
  --jqx-audit-size: 44px;
}
jqx-audit-trail .jqx-container {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--jqx-audit-border);
  border-radius: 6px;
  background: var(--jqx-audit-background);
  overflow: hidden;
}
jqx-audit-trail {
  /* ── Toolbar ────────────────────────────────────────────────────────── */
}
jqx-audit-trail .jqx-audit-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--jqx-audit-header-background);
  border-bottom: 1px solid var(--jqx-audit-border);
}
jqx-audit-trail .jqx-audit-toolbar-spacer {
  flex: 1 1 auto;
}
jqx-audit-trail .jqx-audit-input {
  min-height: var(--jqx-audit-size);
  padding: 0 8px;
  font: inherit;
  font-size: 12px;
  color: var(--jqx-text-color);
  /* a field, not a readout: the panel surface keeps the text readable in both themes */
  background: var(--jqx-industrial-panel-background, var(--jqx-background));
  border: 1px solid var(--jqx-audit-border);
  border-radius: 4px;
}
jqx-audit-trail .jqx-audit-search {
  min-width: 160px;
}
jqx-audit-trail .jqx-audit-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-audit-trail .jqx-audit-input:focus-visible,
jqx-audit-trail .jqx-audit-button:focus-visible,
jqx-audit-trail .jqx-audit-sort:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 1px;
}
jqx-audit-trail .jqx-audit-button {
  min-height: var(--jqx-audit-size);
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--jqx-text-color);
  background: var(--jqx-audit-background);
  border: 1px solid var(--jqx-audit-border);
  border-radius: 4px;
  cursor: pointer;
}
jqx-audit-trail .jqx-audit-button-primary {
  color: var(--jqx-audit-primary-text);
  background: var(--jqx-audit-primary);
  border-color: var(--jqx-audit-primary);
}
jqx-audit-trail {
  /* The chain verdict: words, with the colour following them. */
}
jqx-audit-trail .jqx-audit-integrity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid var(--jqx-audit-border);
  border-radius: 12px;
}
jqx-audit-trail .jqx-audit-integrity:empty {
  display: none;
}
jqx-audit-trail .jqx-audit-integrity::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jqx-text-tertiary-color, var(--jqx-audit-border));
}
jqx-audit-trail[integrity=intact] .jqx-audit-integrity {
  color: var(--jqx-audit-ok-text);
  border-color: currentColor;
}
jqx-audit-trail[integrity=intact] .jqx-audit-integrity::before {
  background: currentColor;
}
jqx-audit-trail[integrity=broken] .jqx-audit-integrity {
  color: var(--jqx-audit-error-text);
  border-color: currentColor;
}
jqx-audit-trail[integrity=broken] .jqx-audit-integrity::before {
  background: currentColor;
}
jqx-audit-trail {
  /* ── Table ──────────────────────────────────────────────────────────── */
}
jqx-audit-trail .jqx-audit-scroll {
  overflow: auto;
  max-height: var(--jqx-audit-max-height, 480px);
}
jqx-audit-trail .jqx-audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
jqx-audit-trail .jqx-audit-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
jqx-audit-trail .jqx-audit-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--jqx-text-secondary-color, inherit);
  background: var(--jqx-audit-header-background);
  border-bottom: 1px solid var(--jqx-audit-border);
  white-space: nowrap;
}
jqx-audit-trail .jqx-audit-sort {
  padding: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  text-transform: inherit;
  letter-spacing: inherit;
}
jqx-audit-trail .jqx-audit-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--jqx-audit-border);
  vertical-align: top;
}
jqx-audit-trail .jqx-audit-row {
  cursor: pointer;
}
jqx-audit-trail .jqx-audit-row:hover td {
  background: var(--jqx-audit-selected);
}
jqx-audit-trail .jqx-audit-row:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: -2px;
}
jqx-audit-trail .jqx-audit-row-selected td {
  background: var(--jqx-audit-selected);
  box-shadow: inset 3px 0 0 var(--jqx-audit-primary);
}
jqx-audit-trail .jqx-audit-row-selected td:not(:first-child) {
  box-shadow: none;
}
jqx-audit-trail .jqx-audit-col-seq {
  width: 1%;
  color: var(--jqx-text-secondary-color, inherit);
  font-variant-numeric: tabular-nums;
}
jqx-audit-trail .jqx-audit-col-at {
  white-space: nowrap;
  font-family: var(--jqx-audit-readout-font);
  font-variant-numeric: tabular-nums;
}
jqx-audit-trail .jqx-audit-userid {
  font-family: var(--jqx-audit-readout-font);
  font-size: 11px;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-audit-trail .jqx-audit-action {
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--jqx-audit-border);
  border-radius: 3px;
  white-space: nowrap;
}
jqx-audit-trail .jqx-audit-action-delete .jqx-audit-action,
jqx-audit-trail .jqx-audit-action-lockout .jqx-audit-action,
jqx-audit-trail .jqx-audit-action-reject .jqx-audit-action {
  color: var(--jqx-audit-error-text);
  border-color: currentColor;
}
jqx-audit-trail .jqx-audit-action-sign .jqx-audit-action {
  color: var(--jqx-audit-ok-text);
  border-color: currentColor;
}
jqx-audit-trail {
  /* Both values, plainly. The previous value is not struck through: it is a record, not
     a correction. */
}
jqx-audit-trail .jqx-audit-value {
  font-family: var(--jqx-audit-readout-font);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
jqx-audit-trail .jqx-audit-col-oldValue .jqx-audit-value {
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-audit-trail td.jqx-audit-col-reason {
  font-style: italic;
}
jqx-audit-trail .jqx-audit-signature {
  white-space: nowrap;
}
jqx-audit-trail .jqx-audit-empty td {
  padding: 16px 10px;
  text-align: center;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-audit-trail .jqx-audit-footer {
  padding: 6px 10px;
  font-size: 11px;
  color: var(--jqx-text-secondary-color, inherit);
  border-top: 1px solid var(--jqx-audit-border);
}
jqx-audit-trail[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-audit-trail.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

@media print {
  jqx-audit-trail .jqx-audit-toolbar,
  jqx-audit-trail .jqx-audit-footer {
    display: none;
  }
  jqx-audit-trail .jqx-audit-scroll {
    max-height: none;
    overflow: visible;
  }
}
/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-audit-trail takes by default. */
jqx-audit-trail:not(:defined) {
  min-height: 400px;
}

/* jqx-signature-block */
jqx-signature-block {
  --jqx-sigblock-border: var(--jqx-industrial-panel-border, var(--jqx-border));
  --jqx-sigblock-background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  --jqx-sigblock-ok-text: var(--jqx-industrial-ok-text, var(--jqx-success));
  --jqx-sigblock-error-text: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  --jqx-sigblock-warning-text: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
  --jqx-sigblock-readout-font: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace);
  display: inline-block;
}
jqx-signature-block .jqx-container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: baseline;
  padding: 8px 12px;
  border: 1px solid var(--jqx-sigblock-border);
  border-left-width: 4px;
  border-radius: 4px;
  background: var(--jqx-sigblock-background);
  font-size: 13px;
}
jqx-signature-block .jqx-sigblock-meaning {
  grid-column: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-signature-block .jqx-sigblock-name {
  grid-column: 2;
  font-size: 15px;
  font-weight: 700;
}
jqx-signature-block .jqx-sigblock-userid,
jqx-signature-block .jqx-sigblock-at,
jqx-signature-block .jqx-sigblock-reason,
jqx-signature-block .jqx-sigblock-hash,
jqx-signature-block .jqx-sigblock-status {
  grid-column: 2;
}
jqx-signature-block .jqx-sigblock-userid,
jqx-signature-block .jqx-sigblock-hash {
  font-family: var(--jqx-sigblock-readout-font);
  font-size: 11px;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-signature-block .jqx-sigblock-at {
  font-variant-numeric: tabular-nums;
}
jqx-signature-block .jqx-sigblock-reason {
  font-style: italic;
}
jqx-signature-block .jqx-sigblock-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
jqx-signature-block[verified=true] .jqx-container {
  border-left-color: var(--jqx-sigblock-ok-text);
}
jqx-signature-block[verified=true] .jqx-sigblock-status {
  color: var(--jqx-sigblock-ok-text);
}
jqx-signature-block {
  /* Altered: the block says so in words and the rule turns red; the signature text
     itself is not struck out - it is still what was signed. */
}
jqx-signature-block[verified=false] .jqx-container {
  border-left-color: var(--jqx-sigblock-error-text);
}
jqx-signature-block[verified=false] .jqx-sigblock-status {
  color: var(--jqx-sigblock-error-text);
}
jqx-signature-block {
  /* Cannot be checked: the signature carries no record hash. Not the "altered" verdict -
     nothing is known to have changed - but not a pass either. */
}
jqx-signature-block[verified=unknown] .jqx-container {
  border-left-color: var(--jqx-sigblock-warning-text);
}
jqx-signature-block[verified=unknown] .jqx-sigblock-status {
  color: var(--jqx-sigblock-warning-text);
}
jqx-signature-block {
  /* A missing or unreadable date and time is part of the manifestation missing (11.50),
     so it is said in words, in the error colour. */
}
jqx-signature-block .jqx-sigblock-at.jqx-sigblock-invalid {
  font-weight: 600;
  color: var(--jqx-sigblock-error-text);
}
jqx-signature-block[unsigned] .jqx-container {
  border-style: dashed;
}
jqx-signature-block[unsigned] .jqx-sigblock-meaning {
  grid-column: 1/-1;
}
jqx-signature-block {
  /* Compact: one line. */
}
jqx-signature-block[compact] .jqx-container {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  padding: 4px 10px;
}
jqx-signature-block[compact] .jqx-sigblock-name {
  font-size: 13px;
}
jqx-signature-block[disabled] {
  opacity: 0.5;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-signature-block.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-signature-block takes by default. */
jqx-signature-block:not(:defined) {
  min-width: 300px;
  min-height: 80px;
}

/* jqx-esignature */
jqx-esignature {
  --jqx-esign-size: 36px;
  --jqx-esign-background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  --jqx-esign-header-background: var(--jqx-industrial-panel-header-background, var(--jqx-surface));
  --jqx-esign-border: var(--jqx-industrial-panel-border, var(--jqx-border));
  --jqx-esign-primary: var(--jqx-primary);
  --jqx-esign-primary-text: var(--jqx-primary-color, #fff);
  --jqx-esign-error-text: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  --jqx-esign-ok-text: var(--jqx-industrial-ok-text, var(--jqx-success));
  --jqx-esign-readout-font: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace);
  display: block;
  width: 420px;
  max-width: 100%;
}
jqx-esignature[density=touch] {
  --jqx-esign-size: 48px;
}
jqx-esignature:not([opened]) {
  display: none;
}
jqx-esignature .jqx-container {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--jqx-esign-border);
  border-radius: 6px;
  background: var(--jqx-esign-background);
  box-shadow: var(--jqx-industrial-panel-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
  overflow: hidden;
}
jqx-esignature .jqx-esign-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--jqx-esign-header-background);
  border-bottom: 1px solid var(--jqx-esign-border);
}
jqx-esignature .jqx-esign-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
jqx-esignature .jqx-esign-close {
  width: 28px;
  height: 28px;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--jqx-text-secondary-color, inherit);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
jqx-esignature .jqx-esign-close:hover {
  border-color: var(--jqx-esign-border);
}
jqx-esignature {
  /* What is being signed: named, listed, hashed. */
}
jqx-esignature .jqx-esign-record {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--jqx-esign-border);
}
jqx-esignature .jqx-esign-record-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-esignature .jqx-esign-record-title {
  font-size: 15px;
  font-weight: 700;
}
jqx-esignature .jqx-esign-record-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 4px 0 0;
  font-size: 12px;
}
jqx-esignature .jqx-esign-record-fields dt {
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-esignature .jqx-esign-record-fields dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
jqx-esignature .jqx-esign-record-hash {
  margin-top: 4px;
  font-family: var(--jqx-esign-readout-font);
  font-size: 11px;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-esignature .jqx-esign-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
}
jqx-esignature .jqx-esign-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
jqx-esignature .jqx-esign-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-esignature .jqx-esign-input {
  min-height: var(--jqx-esign-size);
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
  color: var(--jqx-text-color);
  /* a field, not a readout: the panel surface keeps the text readable in both themes */
  background: var(--jqx-industrial-panel-background, var(--jqx-background));
  border: 1px solid var(--jqx-esign-border);
  border-radius: 4px;
}
jqx-esignature .jqx-esign-input:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 1px;
}
jqx-esignature .jqx-esign-input[readonly] {
  color: var(--jqx-text-secondary-color, inherit);
  background: transparent;
}
jqx-esignature .jqx-esign-input[disabled] {
  opacity: 0.6;
}
jqx-esignature .jqx-esign-fixed {
  min-height: var(--jqx-esign-size);
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
jqx-esignature .jqx-esign-message {
  font-size: 12px;
  font-weight: 600;
  color: var(--jqx-esign-error-text);
}
jqx-esignature .jqx-esign-message-plain {
  font-weight: 500;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-esignature .jqx-esign-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
jqx-esignature .jqx-esign-button {
  min-width: 96px;
  min-height: var(--jqx-esign-size);
  padding: 0 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--jqx-text-color);
  background: var(--jqx-esign-background);
  border: 1px solid var(--jqx-esign-border);
  border-radius: 4px;
  cursor: pointer;
}
jqx-esignature .jqx-esign-button:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 2px;
}
jqx-esignature .jqx-esign-button-primary {
  color: var(--jqx-esign-primary-text);
  background: var(--jqx-esign-primary);
  border-color: var(--jqx-esign-primary);
}
jqx-esignature .jqx-esign-button[disabled] {
  opacity: 0.55;
  cursor: default;
}
jqx-esignature {
  /* The manifestation, once the host has said yes. */
}
jqx-esignature .jqx-esign-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
jqx-esignature .jqx-esign-result-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--jqx-esign-ok-text);
}
jqx-esignature .jqx-esign-result .jqx-esign-button {
  align-self: flex-end;
}
jqx-esignature[state=locked] .jqx-esign-form {
  opacity: 0.85;
}
jqx-esignature[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-esignature.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

jqx-esignature.jqx-element:not([opened]) {
  display: none;
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-esignature takes by default. */
jqx-esignature:not(:defined) {
  min-height: 480px;
}

@charset "UTF-8";
/* jqx-jog-panel */
jqx-jog-panel {
  --jqx-jog-size: 44px;
  --jqx-jog-background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  --jqx-jog-border: var(--jqx-industrial-panel-border, var(--jqx-border));
  --jqx-jog-accent: var(--jqx-primary);
  --jqx-jog-stop: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-jog-stop-text: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  --jqx-jog-warning-text: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
  --jqx-jog-readout-font: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace);
  --jqx-jog-selected: var(--jqx-primary);
  --jqx-jog-selected-text: var(--jqx-primary-color, #fff);
  display: inline-block;
  min-width: 280px;
}
jqx-jog-panel[density=touch] {
  --jqx-jog-size: 60px;
}
jqx-jog-panel .jqx-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--jqx-jog-border);
  border-radius: 6px;
  background: var(--jqx-jog-background);
}
jqx-jog-panel {
  /* ── Header ─────────────────────────────────────────────────────────── */
}
jqx-jog-panel .jqx-jog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}
jqx-jog-panel .jqx-jog-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-jog-panel {
  /* The stop: the one button whose whole face may be red. */
  /* The dark theme's critical red is lightened so alarm text reads on a dark ground, which
     leaves it too light to carry white lettering: 3.86:1 where 4.5 is needed. Stop keeps white
     on red - that is what the control is - so the red darkens instead, to 4.62:1 under white
     and 3.27:1 against the panel. */
}
jqx-jog-panel[theme=industrial-dark] .jqx-jog-stop, [theme=industrial-dark] jqx-jog-panel .jqx-jog-stop {
  --jqx-jog-stop: #d9363c;
}
jqx-jog-panel .jqx-jog-stop {
  min-width: calc(var(--jqx-jog-size) * 1.6);
  min-height: calc(var(--jqx-jog-size) * 0.8);
  padding: 0 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--jqx-jog-stop);
  border: 2px solid var(--jqx-jog-stop);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
jqx-jog-panel .jqx-jog-stop:active {
  filter: brightness(0.9);
}
jqx-jog-panel {
  /* ── Axes ───────────────────────────────────────────────────────────── */
}
jqx-jog-panel .jqx-jog-axes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
jqx-jog-panel {
  /* A row: the label, the readout, and the buttons as one group - which wraps under the
     readout when the cell is too narrow for the row, rather than squeezing the digits. */
}
jqx-jog-panel .jqx-jog-axis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
jqx-jog-panel .jqx-jog-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
jqx-jog-panel .jqx-jog-axis-label {
  min-width: 28px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
jqx-jog-panel {
  /* The position: a readout, right-aligned so the digits line up across axes. */
}
jqx-jog-panel .jqx-jog-position {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px 6px;
  /* in a narrow cell the badges wrap under the value instead of pushing the digits out
     of the readout's left edge */
  flex: 1 1 120px;
  min-width: 0;
  padding: 4px 8px;
  font-family: var(--jqx-jog-readout-font);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  /* a readout: the readout's own colour on its own background */
  color: var(--jqx-industrial-readout-color, var(--jqx-text-color));
  background: var(--jqx-industrial-readout-background, rgba(128, 128, 128, 0.08));
  border: 1px solid var(--jqx-jog-border);
  border-radius: 3px;
}
jqx-jog-panel .jqx-jog-position-value {
  white-space: nowrap;
}
jqx-jog-panel .jqx-jog-position-unit {
  font-family: inherit;
  font-size: 11px;
  /* on the readout's own background, in the readout's own colour */
  color: var(--jqx-industrial-readout-color, inherit);
  opacity: 0.85;
}
jqx-jog-panel .jqx-jog-badge {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid currentColor;
}
jqx-jog-panel .jqx-jog-badge-unhomed {
  /* inside the readout, on its dark background: the warning fill reads as text there */
  color: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}
jqx-jog-panel .jqx-jog-badge-state {
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-jog-panel .jqx-jog-axis-fault .jqx-jog-badge-state,
jqx-jog-panel .jqx-jog-axis-limit .jqx-jog-badge-state {
  color: var(--jqx-jog-stop-text);
}
jqx-jog-panel .jqx-jog-axis-jogging .jqx-jog-position {
  border-color: var(--jqx-jog-accent);
}
jqx-jog-panel {
  /* ── Jog buttons ────────────────────────────────────────────────────── */
}
jqx-jog-panel .jqx-jog-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: calc(var(--jqx-jog-size) * 1.5);
  min-height: var(--jqx-jog-size);
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--jqx-text-color);
  background: var(--jqx-jog-background);
  border: 2px solid var(--jqx-jog-border);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
jqx-jog-panel .jqx-jog-glyph {
  font-size: 11px;
  color: var(--jqx-jog-accent);
}
jqx-jog-panel .jqx-jog-button:focus-visible,
jqx-jog-panel .jqx-jog-home:focus-visible,
jqx-jog-panel .jqx-jog-stop:focus-visible,
jqx-jog-panel .jqx-jog-option:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 2px;
}
jqx-jog-panel {
  /* Held: depth and an accent border, not a filled face. */
}
jqx-jog-panel .jqx-jog-button-held {
  transform: translateY(1px);
  border-color: var(--jqx-jog-accent);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}
jqx-jog-panel .jqx-jog-button[aria-disabled=true],
jqx-jog-panel .jqx-jog-home[aria-disabled=true] {
  opacity: 0.55;
  cursor: not-allowed;
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(128, 128, 128, 0.12) 8px 16px);
}
jqx-jog-panel .jqx-jog-home {
  min-width: var(--jqx-jog-size);
  min-height: var(--jqx-jog-size);
  font: inherit;
  font-size: 18px;
  color: var(--jqx-text-color);
  background: var(--jqx-jog-background);
  border: 2px solid var(--jqx-jog-border);
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
}
jqx-jog-panel .jqx-jog-button[disabled],
jqx-jog-panel .jqx-jog-home[disabled],
jqx-jog-panel .jqx-jog-stop[disabled],
jqx-jog-panel .jqx-jog-option[disabled] {
  opacity: 0.45;
  cursor: default;
}
jqx-jog-panel .jqx-jog-empty {
  padding: 8px 0;
  font-size: 12px;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-jog-panel {
  /* ── Step and speed ─────────────────────────────────────────────────── */
}
jqx-jog-panel .jqx-jog-selectors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
jqx-jog-panel .jqx-jog-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
jqx-jog-panel .jqx-jog-selector-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-jog-panel .jqx-jog-options {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--jqx-jog-border);
  border-radius: 4px;
  overflow: hidden;
}
jqx-jog-panel .jqx-jog-option {
  min-width: calc(var(--jqx-jog-size) * 0.9);
  min-height: calc(var(--jqx-jog-size) * 0.75);
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-color);
  background: var(--jqx-jog-background);
  border: none;
  border-right: 1px solid var(--jqx-jog-border);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
jqx-jog-panel .jqx-jog-option:focus-visible {
  outline-offset: -3px;
}
jqx-jog-panel .jqx-jog-option-selected {
  color: var(--jqx-jog-selected-text);
  background: var(--jqx-jog-selected);
}
jqx-jog-panel .jqx-jog-options-unit {
  padding: 0 8px;
  font-size: 11px;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-jog-panel .jqx-jog-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--jqx-jog-warning-text);
}
jqx-jog-panel[jogging] .jqx-jog-hint {
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-jog-panel[interlocked] .jqx-jog-axes {
  opacity: 0.85;
}
jqx-jog-panel[disabled] .jqx-jog-axes, jqx-jog-panel[disabled] .jqx-jog-selectors {
  /* Disabled dims and locks the axes and the selectors, not Stop: a stop must always be
     possible, and an axis may still be moving. */
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-jog-panel.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-jog-panel takes by default. */
jqx-jog-panel:not(:defined) {
  min-width: 560px;
  min-height: 280px;
}

/* jqx-selector-switch */
jqx-selector-switch {
  --jqx-selector-size: 36px;
  --jqx-selector-background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  --jqx-selector-border: var(--jqx-industrial-panel-border, var(--jqx-border));
  --jqx-selector-selected: var(--jqx-primary);
  --jqx-selector-selected-text: var(--jqx-primary-color, #fff);
  --jqx-selector-pending: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  --jqx-selector-hint: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
  display: inline-block;
}
jqx-selector-switch[density=touch] {
  --jqx-selector-size: 52px;
}
jqx-selector-switch .jqx-container {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
jqx-selector-switch .jqx-selector-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-selector-switch .jqx-selector-positions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
jqx-selector-switch {
  /* A row of segments, joined, with the position in force filled. */
}
jqx-selector-switch .jqx-selector-segments {
  display: inline-flex;
  border: 1px solid var(--jqx-selector-border);
  border-radius: 4px;
  overflow: hidden;
}
jqx-selector-switch .jqx-selector-position {
  min-width: calc(var(--jqx-selector-size) * 1.6);
  min-height: var(--jqx-selector-size);
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--jqx-text-color);
  background: var(--jqx-selector-background);
  border: none;
  border-right: 1px solid var(--jqx-selector-border);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
jqx-selector-switch .jqx-selector-position:last-child {
  border-right: none;
}
jqx-selector-switch .jqx-selector-position:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: -3px;
}
jqx-selector-switch .jqx-selector-position-selected {
  color: var(--jqx-selector-selected-text);
  background: var(--jqx-selector-selected);
}
jqx-selector-switch {
  /* The ring sits inside the segment, so on the filled one it is drawn in the halo tone:
     the focus colour on the selected colour was about 2:1, and a ring nobody can see is
     no focus indicator. */
}
jqx-selector-switch .jqx-selector-position-selected:focus-visible {
  outline-color: var(--jqx-industrial-focus-halo, var(--jqx-selector-selected-text));
}
jqx-selector-switch {
  /* Requested and not yet confirmed: an outline in the pending colour, not the fill -
     the fill is the plant's to give. */
}
jqx-selector-switch .jqx-selector-position-pending {
  box-shadow: inset 0 0 0 2px var(--jqx-selector-pending);
}
jqx-selector-switch .jqx-selector-position-armed {
  box-shadow: inset 0 0 0 2px var(--jqx-selector-selected);
  animation: jqx-selector-armed 1s step-end infinite;
}
@keyframes jqx-selector-armed {
  50% {
    box-shadow: inset 0 0 0 2px transparent;
  }
}
jqx-selector-switch {
  /* Disabled is greyed, not faded: the position in force is still the plant's state and
     has to be read off a disabled switch as easily as off a live one. Two layers of
     opacity left it at 1.6:1; a grey fill with its own text colour keeps it above 3:1. */
}
jqx-selector-switch .jqx-selector-position[disabled] {
  cursor: default;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-selector-switch .jqx-selector-position-selected[disabled] {
  color: var(--jqx-industrial-unknown-color, var(--jqx-background));
  background: var(--jqx-industrial-unknown, var(--jqx-text-secondary-color));
}
jqx-selector-switch[disabled] .jqx-selector-segments {
  border-style: dashed;
}
jqx-selector-switch {
  /* Read-only: shown and focusable, never pressed. */
}
jqx-selector-switch[readonly] .jqx-selector-position {
  cursor: default;
}
jqx-selector-switch {
  /* Right to left the segments run from the right, and the drawn switch is mirrored with them. */
}
jqx-selector-switch[right-to-left] {
  direction: rtl;
}
jqx-selector-switch .jqx-selector-rtl .jqx-selector-hardware {
  transform: scaleX(-1);
}
jqx-selector-switch .jqx-selector-rtl .jqx-selector-position {
  border-right: none;
  border-left: 1px solid var(--jqx-selector-border);
}
jqx-selector-switch .jqx-selector-rtl .jqx-selector-position:last-child {
  border-left: none;
}
jqx-selector-switch[interlocked] .jqx-selector-position {
  cursor: not-allowed;
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(128, 128, 128, 0.12) 8px 16px);
}
jqx-selector-switch {
  /* The switch a panel would carry, above the buttons. */
}
jqx-selector-switch .jqx-selector-hardware {
  display: block;
  height: calc(var(--jqx-selector-size) * 1.4);
  width: auto;
  margin: 0 auto 2px;
}
jqx-selector-switch .jqx-selector-slide {
  height: calc(var(--jqx-selector-size) * 0.8);
}
jqx-selector-switch .jqx-selector-hardware-base {
  fill: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  stroke: var(--jqx-selector-border);
  stroke-width: 1.5;
}
jqx-selector-switch .jqx-selector-hardware-lever,
jqx-selector-switch .jqx-selector-hardware-knob {
  fill: var(--jqx-selector-background);
  stroke: var(--jqx-selector-border);
  stroke-width: 1.5;
}
jqx-selector-switch .jqx-selector-hardware-tip,
jqx-selector-switch .jqx-selector-hardware-lamp,
jqx-selector-switch .jqx-selector-hardware-grip {
  fill: var(--jqx-selector-selected);
}
jqx-selector-switch .jqx-selector-hardware-pivot,
jqx-selector-switch .jqx-selector-hardware-detent {
  fill: var(--jqx-selector-border);
}
jqx-selector-switch .jqx-selector-hardware-face {
  fill: var(--jqx-selector-background);
  stroke: var(--jqx-selector-border);
  stroke-width: 1;
}
jqx-selector-switch .jqx-selector-hardware-face-down {
  fill: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
}
jqx-selector-switch {
  /* A requested position not yet confirmed: the lever, knob or lamp takes the pending colour. */
}
jqx-selector-switch .jqx-selector-hardware-pending .jqx-selector-hardware-tip,
jqx-selector-switch .jqx-selector-hardware-pending .jqx-selector-hardware-lamp,
jqx-selector-switch .jqx-selector-hardware-pending .jqx-selector-hardware-grip {
  fill: var(--jqx-selector-pending);
}
jqx-selector-switch {
  /* The knob. */
}
jqx-selector-switch .jqx-selector-knob {
  width: calc(var(--jqx-selector-size) * 4.2);
  height: auto;
  font-family: inherit;
}
jqx-selector-switch .jqx-selector-knob-body {
  fill: var(--jqx-selector-background);
  stroke: var(--jqx-selector-border);
  stroke-width: 2;
}
jqx-selector-switch .jqx-selector-knob-pointer rect {
  fill: var(--jqx-selector-selected);
}
jqx-selector-switch .jqx-selector-knob-tick {
  stroke: var(--jqx-selector-border);
  stroke-width: 2;
}
jqx-selector-switch .jqx-selector-knob-text {
  fill: var(--jqx-text-secondary-color, currentColor);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
jqx-selector-switch .jqx-selector-knob-text-current {
  fill: var(--jqx-text-color);
}
jqx-selector-switch .jqx-selector-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--jqx-selector-hint);
  text-align: center;
}
jqx-selector-switch[disabled] {
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-selector-switch.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

@media (prefers-reduced-motion: reduce) {
  jqx-selector-switch .jqx-selector-position-armed {
    animation: none;
  }
}
/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-selector-switch takes by default. */
jqx-selector-switch:not(:defined) {
  min-width: 117px;
  min-height: 56px;
}

/* jqx-momentary-button */
jqx-momentary-button {
  --jqx-momentary-size: 44px;
  --jqx-momentary-background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  --jqx-momentary-border: var(--jqx-industrial-panel-border, var(--jqx-border));
  --jqx-momentary-accent: var(--jqx-primary);
  --jqx-momentary-start: var(--jqx-industrial-ok, var(--jqx-success));
  --jqx-momentary-stop: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-momentary-lamp: var(--jqx-industrial-ok, var(--jqx-success));
  --jqx-momentary-warning-text: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
  display: inline-block;
  /* Touch: a bigger target and more room around it. */
}
jqx-momentary-button[density=touch] {
  --jqx-momentary-size: 60px;
}
jqx-momentary-button .jqx-container {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
jqx-momentary-button .jqx-momentary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: calc(var(--jqx-momentary-size) * 2);
  min-height: var(--jqx-momentary-size);
  padding: 0 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--jqx-text-color);
  background: var(--jqx-momentary-background);
  border: 2px solid var(--jqx-momentary-border);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
jqx-momentary-button .jqx-momentary:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 2px;
}
jqx-momentary-button {
  /* The kinds of a push button panel: green ring for a start, red for a stop, and the
     mushroom head for an emergency stop - the colour on the ring, never the whole face,
     so the word stays readable. */
}
jqx-momentary-button[kind=start] .jqx-momentary {
  border-color: var(--jqx-momentary-start);
}
jqx-momentary-button[kind=stop] .jqx-momentary {
  border-color: var(--jqx-momentary-stop);
}
jqx-momentary-button[kind=emergency] .jqx-momentary {
  min-width: var(--jqx-momentary-size);
  border-color: var(--jqx-momentary-stop);
  border-width: 3px;
  border-radius: 50%;
  padding: 0 12px;
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  text-transform: uppercase;
}
jqx-momentary-button {
  /* Pressed: depth, not colour. */
}
jqx-momentary-button[pressed] .jqx-momentary {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
  filter: brightness(0.94);
}
jqx-momentary-button[armed] .jqx-momentary {
  border-style: dashed;
  animation: jqx-momentary-armed 1s step-end infinite;
}
@keyframes jqx-momentary-armed {
  50% {
    border-color: var(--jqx-momentary-accent);
  }
}
jqx-momentary-button {
  /* Interlocked: readable, but visibly not a live button. */
}
jqx-momentary-button[interlocked] .jqx-momentary {
  opacity: 0.6;
  cursor: not-allowed;
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(128, 128, 128, 0.12) 8px 16px);
}
jqx-momentary-button .jqx-momentary[disabled] {
  opacity: 0.45;
  cursor: default;
}
jqx-momentary-button {
  /* The lamp: what the plant says the device is doing, lit when it says something. */
}
jqx-momentary-button .jqx-momentary-lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--jqx-momentary-lamp);
  box-shadow: 0 0 0 1px var(--jqx-momentary-background), 0 0 0 2px var(--jqx-momentary-border);
  flex: none;
}
jqx-momentary-button .jqx-momentary-lamp[data-state=fault],
jqx-momentary-button .jqx-momentary-lamp[data-state=tripped] {
  background: var(--jqx-momentary-stop);
}
jqx-momentary-button .jqx-momentary-lamp[data-state=stopped],
jqx-momentary-button .jqx-momentary-lamp[data-state=closed],
jqx-momentary-button .jqx-momentary-lamp[data-state=off] {
  background: var(--jqx-text-tertiary-color, var(--jqx-border));
}
jqx-momentary-button {
  /* The hold ring fills clockwise while the button is held. */
}
jqx-momentary-button .jqx-momentary-ring {
  width: 22px;
  height: 22px;
  flex: none;
  transform: rotate(-90deg);
}
jqx-momentary-button .jqx-momentary-ring-track {
  fill: none;
  stroke: var(--jqx-momentary-border);
  stroke-width: 3;
}
jqx-momentary-button .jqx-momentary-ring-progress {
  fill: none;
  stroke: var(--jqx-momentary-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 97.4;
  stroke-dashoffset: 97.4;
}
jqx-momentary-button[kind=start] .jqx-momentary-ring-progress {
  stroke: var(--jqx-momentary-start);
}
jqx-momentary-button .jqx-momentary-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--jqx-momentary-warning-text);
  text-align: center;
}
jqx-momentary-button[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-momentary-button.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

@media (prefers-reduced-motion: reduce) {
  jqx-momentary-button[armed] .jqx-momentary {
    animation: none;
    border-color: var(--jqx-momentary-accent);
  }
}
/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-momentary-button takes by default. */
jqx-momentary-button:not(:defined) {
  min-width: 80px;
  min-height: 44px;
}

/* jqx-numeric-keypad */
jqx-numeric-keypad {
  --jqx-numeric-keypad-key-size: 48px;
  --jqx-numeric-keypad-gap: 6px;
  --jqx-numeric-keypad-key-background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  --jqx-numeric-keypad-key-border: var(--jqx-industrial-panel-border, var(--jqx-border));
  --jqx-numeric-keypad-accept: var(--jqx-primary);
  --jqx-numeric-keypad-accept-text: var(--jqx-primary-color, #fff);
  --jqx-numeric-keypad-refuse: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  display: inline-block;
  width: auto;
  /* A glove: 60 px keys and a wider gap so neighbours are not pressed together. */
}
jqx-numeric-keypad[density=touch] {
  --jqx-numeric-keypad-key-size: 60px;
  --jqx-numeric-keypad-gap: 8px;
}
jqx-numeric-keypad .jqx-container {
  display: flex;
  flex-direction: column;
  gap: var(--jqx-numeric-keypad-gap);
  width: calc(var(--jqx-numeric-keypad-key-size) * 4 + var(--jqx-numeric-keypad-gap) * 3);
  padding: 10px;
  box-sizing: content-box;
  background: var(--jqx-industrial-panel-header-background, var(--jqx-surface));
  border: 1px solid var(--jqx-numeric-keypad-key-border);
  border-radius: 4px;
  outline: none;
}
jqx-numeric-keypad .jqx-container:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 2px;
}
jqx-numeric-keypad .jqx-keypad-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
}
jqx-numeric-keypad .jqx-keypad-label {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
jqx-numeric-keypad {
  /* The value being replaced stays in view, tabular, so the size of the step is seen. */
}
jqx-numeric-keypad .jqx-keypad-current {
  flex: none;
  color: var(--jqx-text-secondary-color, inherit);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
jqx-numeric-keypad .jqx-keypad-display {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  min-height: 44px;
  padding: 4px 10px;
  background: var(--jqx-background);
  border: 1px solid var(--jqx-numeric-keypad-key-border);
  border-radius: 3px;
  box-sizing: border-box;
}
jqx-numeric-keypad .jqx-keypad-entry {
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
jqx-numeric-keypad {
  /* The opening value, not yet touched: the first key replaces it, and it says so. */
}
jqx-numeric-keypad .jqx-keypad-entry-fresh {
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-numeric-keypad .jqx-keypad-unit {
  font-size: 13px;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-numeric-keypad .jqx-keypad-limits {
  font-size: 11px;
  color: var(--jqx-text-tertiary-color, inherit);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
jqx-numeric-keypad {
  /* The refusal stays until the next key, beside the entry it refused. */
}
jqx-numeric-keypad .jqx-keypad-message {
  font-size: 12px;
  font-weight: 600;
  color: var(--jqx-numeric-keypad-refuse);
}
jqx-numeric-keypad .jqx-keypad-keys {
  display: flex;
  flex-direction: column;
  gap: var(--jqx-numeric-keypad-gap);
}
jqx-numeric-keypad .jqx-keypad-steps,
jqx-numeric-keypad .jqx-keypad-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--jqx-numeric-keypad-gap);
}
jqx-numeric-keypad .jqx-keypad-actions {
  /* The four actions in two rows of two: a word key a quarter of the width wide clipped
     the German, French and Spanish words for Cancel and Clear. Enter stays bottom right. */
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
}
jqx-numeric-keypad .jqx-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, var(--jqx-numeric-keypad-key-size));
  gap: var(--jqx-numeric-keypad-gap);
}
jqx-numeric-keypad .jqx-keypad-key {
  min-width: var(--jqx-numeric-keypad-key-size);
  min-height: var(--jqx-numeric-keypad-key-size);
  padding: 0 6px;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-color);
  background: var(--jqx-numeric-keypad-key-background);
  border: 1px solid var(--jqx-numeric-keypad-key-border);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
jqx-numeric-keypad {
  /* Pressed feedback by depth, not by hover: a panel has no hover. */
}
jqx-numeric-keypad .jqx-keypad-key:active:not([disabled]) {
  transform: translateY(1px);
  filter: brightness(0.92);
}
jqx-numeric-keypad .jqx-keypad-key[disabled] {
  opacity: 0.45;
  cursor: default;
}
jqx-numeric-keypad .jqx-keypad-key-function,
jqx-numeric-keypad .jqx-keypad-key-step {
  font-size: 15px;
  font-weight: 500;
}
jqx-numeric-keypad .jqx-keypad-key-clear,
jqx-numeric-keypad .jqx-keypad-key-cancel {
  font-size: 13px;
}
jqx-numeric-keypad .jqx-keypad-key-accept {
  font-size: 14px;
  color: var(--jqx-numeric-keypad-accept-text);
  background: var(--jqx-numeric-keypad-accept);
  border-color: var(--jqx-numeric-keypad-accept);
}
jqx-numeric-keypad[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-numeric-keypad.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

@media (forced-colors: active) {
  jqx-numeric-keypad .jqx-keypad-key,
  jqx-numeric-keypad .jqx-keypad-display {
    border: 1px solid CanvasText;
  }
}
/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-numeric-keypad takes by default. */
jqx-numeric-keypad:not(:defined) {
  min-width: 232px;
  min-height: 420px;
}

@charset "UTF-8";
/* jqx-state-machine */
jqx-state-machine {
  --jqx-state-machine-box-fill: var(--jqx-industrial-panel-background, var(--jqx-surface));
  --jqx-state-machine-box-stroke: var(--jqx-industrial-panel-border, var(--jqx-border));
  --jqx-state-machine-arrow: var(--jqx-text-tertiary-color, var(--jqx-border));
  /* The current state is the one thing on the diagram in colour. Acting states are the
     transient ones a controller passes through; a wait state is where it sits. */
  --jqx-state-machine-current: var(--jqx-primary);
  --jqx-state-machine-current-text: var(--jqx-primary-color, #fff);
  --jqx-state-machine-abnormal: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-state-machine-held: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  display: block;
  width: 100%;
}
jqx-state-machine .jqx-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
jqx-state-machine .jqx-state-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
jqx-state-machine .jqx-state-title {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
jqx-state-machine {
  /* The state, as a word in a box - the same box the diagram draws it in. */
}
jqx-state-machine .jqx-state-current {
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-state-machine-current-text);
  background: var(--jqx-state-machine-current);
  border-radius: 3px;
  white-space: nowrap;
}
jqx-state-machine .jqx-state-current-aborting,
jqx-state-machine .jqx-state-current-aborted {
  background: var(--jqx-state-machine-abnormal);
}
jqx-state-machine .jqx-state-current-held,
jqx-state-machine .jqx-state-current-holding,
jqx-state-machine .jqx-state-current-suspended,
jqx-state-machine .jqx-state-current-suspending,
jqx-state-machine .jqx-state-current-paused,
jqx-state-machine .jqx-state-current-pausing {
  background: var(--jqx-state-machine-held);
  color: #111;
}
jqx-state-machine .jqx-state-duration,
jqx-state-machine .jqx-state-mode {
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-state-machine .jqx-state-mode::before {
  content: "·";
  margin-inline-end: 8px;
}
jqx-state-machine {
  /* ── Diagram ──────────────────────────────────────────────────────────── */
}
jqx-state-machine .jqx-state-diagram {
  width: 100%;
  overflow-x: auto;
}
jqx-state-machine {
  /* Natural size, shrunk to fit: a five-column model is not enlarged to fill the width
     a seventeen-state one needs. */
}
jqx-state-machine .jqx-state-svg {
  display: block;
  max-width: 100%;
  height: auto;
  font-family: inherit;
  font-size: 12px;
}
jqx-state-machine .jqx-state-box rect {
  fill: var(--jqx-state-machine-box-fill);
  stroke: var(--jqx-state-machine-box-stroke);
  stroke-width: 1.2;
}
jqx-state-machine {
  /* Acting states are pill-shaped and dashed, as the OMAC picture draws them; wait
     states are solid boxes. A reader of the diagram tells them apart without colour. */
}
jqx-state-machine .jqx-state-box-acting rect {
  stroke-dasharray: 4 3;
}
jqx-state-machine .jqx-state-box text {
  fill: var(--jqx-text-color);
  font-weight: 500;
}
jqx-state-machine .jqx-state-box-current rect {
  fill: var(--jqx-state-machine-current);
  stroke: var(--jqx-state-machine-current);
  stroke-dasharray: none;
  stroke-width: 2;
}
jqx-state-machine .jqx-state-box-current text {
  fill: var(--jqx-state-machine-current-text);
  font-weight: 700;
}
jqx-state-machine .jqx-state-box-current[data-id=Aborting] rect,
jqx-state-machine .jqx-state-box-current[data-id=Aborted] rect {
  fill: var(--jqx-state-machine-abnormal);
  stroke: var(--jqx-state-machine-abnormal);
}
jqx-state-machine .jqx-state-note {
  fill: var(--jqx-text-tertiary-color, inherit);
  font-size: 9px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
jqx-state-machine .jqx-state-arrow {
  fill: none;
  stroke: var(--jqx-state-machine-arrow);
  stroke-width: 1.4;
}
jqx-state-machine .jqx-state-arrow-auto {
  stroke-dasharray: 3 3;
}
jqx-state-machine {
  /* The transitions out of the current state are the ones that can happen next. */
}
jqx-state-machine .jqx-state-arrow-current {
  stroke: var(--jqx-state-machine-current);
  stroke-width: 2;
}
jqx-state-machine .jqx-state-arrowhead {
  fill: var(--jqx-state-machine-arrow);
}
jqx-state-machine .jqx-state-arrowhead-current {
  fill: var(--jqx-state-machine-current);
}
jqx-state-machine .jqx-state-arrow-label {
  fill: var(--jqx-text-secondary-color, inherit);
  font-size: 10px;
}
jqx-state-machine .jqx-state-arrow-label-current {
  fill: var(--jqx-text-color);
  font-weight: 600;
}
jqx-state-machine {
  /* ── Modes and commands ───────────────────────────────────────────────── */
}
jqx-state-machine .jqx-state-modes,
jqx-state-machine .jqx-state-commands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
jqx-state-machine .jqx-state-mode-button,
jqx-state-machine .jqx-state-command {
  min-height: 30px;
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--jqx-text-color);
  background: var(--jqx-state-machine-box-fill);
  border: 1px solid var(--jqx-state-machine-box-stroke);
  border-radius: 3px;
  cursor: pointer;
}
jqx-state-machine .jqx-state-mode-button:focus-visible,
jqx-state-machine .jqx-state-command:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 2px;
}
jqx-state-machine {
  /* A command that is not legal from here is still listed, dimmed - an operator has to
     see that Unhold exists to understand why Hold is what they want. */
}
jqx-state-machine .jqx-state-mode-button[disabled],
jqx-state-machine .jqx-state-command[disabled] {
  opacity: 0.4;
  cursor: default;
}
jqx-state-machine .jqx-state-mode-active {
  border-color: var(--jqx-state-machine-current);
  box-shadow: inset 0 -3px 0 var(--jqx-state-machine-current);
}
jqx-state-machine .jqx-state-command-severe:not([disabled]) {
  border-color: var(--jqx-state-machine-abnormal);
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
}
jqx-state-machine {
  /* While a command is out the others wait (aria-disabled keeps them focusable); the one
     sent carries the pending outline until the controller answers. */
}
jqx-state-machine .jqx-state-command[aria-disabled=true] {
  cursor: not-allowed;
  border-style: dashed;
}
jqx-state-machine .jqx-state-command-pending {
  box-shadow: inset 0 0 0 2px var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}
jqx-state-machine .jqx-state-command-armed {
  box-shadow: inset 0 0 0 2px var(--jqx-state-machine-abnormal);
}
jqx-state-machine .jqx-state-hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
}
jqx-state-machine {
  /* Right to left: the header, modes, commands and history run from the right. The diagram
     is the standard's picture and is not mirrored. */
}
jqx-state-machine[right-to-left] {
  direction: rtl;
}
jqx-state-machine[right-to-left] .jqx-state-diagram,
jqx-state-machine .jqx-state-diagram {
  direction: ltr;
}
jqx-state-machine {
  /* ── History ──────────────────────────────────────────────────────────── */
}
jqx-state-machine .jqx-state-history {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-state-machine .jqx-state-history-entry time {
  margin-inline-end: 8px;
  color: var(--jqx-text-tertiary-color, inherit);
}
jqx-state-machine .jqx-state-history-duration {
  margin-inline-start: 8px;
  opacity: 0.7;
}
jqx-state-machine[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-state-machine.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-state-machine takes by default. */
jqx-state-machine:not(:defined) {
  min-height: 380px;
}

@charset "UTF-8";
/* jqx-hmi-shell */
jqx-hmi-shell {
  --jqx-hmi-shell-height: 100vh;
  --jqx-hmi-shell-gap: 10px;
  --jqx-hmi-shell-header-height: 52px;
  --jqx-hmi-shell-target: 28px;
  --jqx-hmi-shell-canvas: var(--jqx-industrial-canvas, var(--jqx-body-background-color, var(--jqx-background)));
  --jqx-hmi-shell-panel: var(--jqx-industrial-panel-header-background, var(--jqx-surface));
  --jqx-hmi-shell-border: var(--jqx-industrial-panel-border, var(--jqx-border));
  display: block;
  width: 100%;
  height: var(--jqx-hmi-shell-height);
  /* A touch panel: every target inside the shell at least 44 px, and the header taller
     so the gloved hand has somewhere to land. Set from `density` on the element. */
}
jqx-hmi-shell[density=touch] {
  --jqx-hmi-shell-target: 44px;
  --jqx-hmi-shell-header-height: 64px;
}
jqx-hmi-shell {
  /* A direct child, not a descendant: the shell hosts other elements, and every one of
     them has a .jqx-container of its own that this must not reach. */
}
jqx-hmi-shell > .jqx-container {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  /* one column, as wide as the shell and no wider: without it the column took the width of
     the header's content, and a header with a model picker, a user, the connection and a
     clock pushed the whole screen past a laptop's width */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--jqx-hmi-shell-gap);
  width: 100%;
  height: 100%;
  padding: var(--jqx-hmi-shell-gap);
  box-sizing: border-box;
  background: var(--jqx-hmi-shell-canvas);
  color: var(--jqx-text-color);
}
jqx-hmi-shell {
  /* ── Header ───────────────────────────────────────────────────────────── */
  /* the identity, the host's controls and the status wrap onto a second line rather than
     widen the screen */
}
jqx-hmi-shell .jqx-hmi-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: var(--jqx-hmi-shell-header-height);
  padding: 6px 16px;
  background: var(--jqx-hmi-shell-panel);
  border: 1px solid var(--jqx-hmi-shell-border);
  border-radius: 4px;
  font-size: 12px;
}
jqx-hmi-shell .jqx-hmi-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}
jqx-hmi-shell .jqx-hmi-plant {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
jqx-hmi-shell .jqx-hmi-breadcrumb {
  font-size: 12px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
jqx-hmi-shell .jqx-hmi-header-slot {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
jqx-hmi-shell .jqx-hmi-status {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
jqx-hmi-shell .jqx-hmi-user,
jqx-hmi-shell .jqx-hmi-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--jqx-hmi-shell-target);
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  color: var(--jqx-text-color);
  background: transparent;
  border: 1px solid var(--jqx-hmi-shell-border);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
jqx-hmi-shell .jqx-hmi-theme-toggle {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
jqx-hmi-shell .jqx-hmi-user:focus-visible,
jqx-hmi-shell .jqx-hmi-theme-toggle:focus-visible,
jqx-hmi-shell .jqx-hmi-nav-item:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 2px;
}
jqx-hmi-shell {
  /* The connection: a word with a dot beside it. The dot is a ring, so it has an edge
     on both themes; the word is what carries the state. */
}
jqx-hmi-shell .jqx-hmi-connection {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
jqx-hmi-shell .jqx-hmi-connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jqx-text-tertiary-color, var(--jqx-border));
  box-shadow: 0 0 0 1px var(--jqx-hmi-shell-panel), 0 0 0 2px var(--jqx-hmi-shell-border);
  flex: none;
}
jqx-hmi-shell .jqx-hmi-connection-connected .jqx-hmi-connection-dot {
  background: var(--jqx-industrial-ok, var(--jqx-success));
}
jqx-hmi-shell .jqx-hmi-connection-connecting .jqx-hmi-connection-dot,
jqx-hmi-shell .jqx-hmi-connection-reconnecting .jqx-hmi-connection-dot {
  background: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}
jqx-hmi-shell .jqx-hmi-connection-error .jqx-hmi-connection-dot,
jqx-hmi-shell .jqx-hmi-connection-closed .jqx-hmi-connection-dot {
  background: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}
jqx-hmi-shell .jqx-hmi-connection-error .jqx-hmi-connection-text,
jqx-hmi-shell .jqx-hmi-connection-closed .jqx-hmi-connection-text {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  font-weight: 600;
}
jqx-hmi-shell .jqx-hmi-clock {
  font-size: 13px;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.02em;
}
jqx-hmi-shell {
  /* ── Navigation ───────────────────────────────────────────────────────── */
}
jqx-hmi-shell .jqx-hmi-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
jqx-hmi-shell .jqx-hmi-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--jqx-hmi-shell-target);
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--jqx-text-color);
  background: var(--jqx-hmi-shell-panel);
  border: 1px solid var(--jqx-hmi-shell-border);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
jqx-hmi-shell .jqx-hmi-nav-item[disabled] {
  opacity: 0.45;
  cursor: default;
}
jqx-hmi-shell {
  /* The current display is told by weight and an underline, not by colour alone. */
}
jqx-hmi-shell .jqx-hmi-nav-active {
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--jqx-primary);
}
jqx-hmi-shell {
  /* ISA-101 levels: a level 2 area display sits under its level 1 overview. */
}
jqx-hmi-shell .jqx-hmi-nav-level-2 {
  margin-left: 4px;
}
jqx-hmi-shell .jqx-hmi-nav-level-3 {
  margin-left: 8px;
  font-weight: 400;
}
jqx-hmi-shell .jqx-hmi-nav-level-4 {
  margin-left: 12px;
  font-weight: 400;
}
jqx-hmi-shell {
  /* An alarm badge is a number in a box with the priority as its colour; the priority
     word is in the button's accessible name. */
}
jqx-hmi-shell .jqx-hmi-nav-badge {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: var(--jqx-background);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
jqx-hmi-shell .jqx-hmi-nav-badge-critical {
  background: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  color: var(--jqx-industrial-alarm-critical-color, #ffffff);
}
jqx-hmi-shell .jqx-hmi-nav-badge-warning {
  background: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  color: #111;
}
jqx-hmi-shell .jqx-hmi-nav-badge-advisory {
  background: var(--jqx-industrial-alarm-advisory, var(--jqx-warning));
  color: #111;
}
jqx-hmi-shell {
  /* ── Main ─────────────────────────────────────────────────────────────── */
  /* The screen scrolls inside main; the shell never scrolls the page. On a fixed
     operator panel there is nowhere to scroll to. */
}
jqx-hmi-shell .jqx-hmi-main {
  min-height: 0;
  min-width: 0;
  overflow: auto;
}
jqx-hmi-shell {
  /* ── Footer ───────────────────────────────────────────────────────────── */
}
jqx-hmi-shell .jqx-hmi-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--jqx-hmi-shell-target);
  padding: 4px 14px;
  background: var(--jqx-hmi-shell-panel);
  border: 1px solid var(--jqx-hmi-shell-border);
  border-left-width: 4px;
  border-radius: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
jqx-hmi-shell .jqx-hmi-footer-clear {
  border-left-color: var(--jqx-hmi-shell-border);
}
jqx-hmi-shell .jqx-hmi-footer-advisory {
  border-left-color: var(--jqx-industrial-alarm-advisory, var(--jqx-warning));
}
jqx-hmi-shell .jqx-hmi-footer-warning {
  border-left-color: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}
jqx-hmi-shell .jqx-hmi-footer-critical {
  border-left-color: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}
jqx-hmi-shell {
  /* The summary and the alarm it names are one button: the strip opens the alarm list,
     and a strip that only a mouse could open left the keyboard without the way to it. */
}
jqx-hmi-shell .jqx-hmi-footer-button {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  min-width: 0;
  min-height: var(--jqx-hmi-shell-target);
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  background: transparent;
  border: 0;
  cursor: pointer;
}
jqx-hmi-shell .jqx-hmi-footer-button:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 2px;
}
jqx-hmi-shell .jqx-hmi-footer-summary {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-hmi-shell .jqx-hmi-footer-critical .jqx-hmi-footer-summary {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  font-weight: 600;
}
jqx-hmi-shell .jqx-hmi-footer-newest {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
jqx-hmi-shell .jqx-hmi-footer-slot {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
jqx-hmi-shell {
  /* Right to left: the header, the navigation and the footer read from the right, and
     the arrow keys follow them. */
}
jqx-hmi-shell[right-to-left] {
  direction: rtl;
}
jqx-hmi-shell[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* A phone-width shell (the shell's own width, not the window's - a shell in a side panel is
   as narrow as one on a phone): the summary and the named alarm go onto lines of their own
   rather than run out of the footer, and the header's status wraps under the identity. */
jqx-hmi-shell {
  container-type: inline-size;
}

@container (max-width: 480px) {
  jqx-hmi-shell .jqx-hmi-footer {
    flex-wrap: wrap;
  }
  jqx-hmi-shell .jqx-hmi-footer-newest {
    flex-basis: 100%;
  }
  jqx-hmi-shell .jqx-hmi-header {
    padding: 6px 10px;
  }
  jqx-hmi-shell .jqx-hmi-status {
    flex: 1 1 auto;
  }
}
/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-hmi-shell.jqx-element {
  background: var(--jqx-hmi-shell-canvas);
  color: var(--jqx-text-color);
}

@media (forced-colors: active) {
  jqx-hmi-shell .jqx-hmi-header,
  jqx-hmi-shell .jqx-hmi-footer,
  jqx-hmi-shell .jqx-hmi-nav-item,
  jqx-hmi-shell .jqx-hmi-connection-dot {
    border: 1px solid CanvasText;
  }
}

/* jqx-trend */
jqx-trend {
  --jqx-trend-height: 360px;
  --jqx-trend-pens-width: 220px;
  --jqx-trend-plot-background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-trend-grid-color: var(--jqx-border);
  /* The cursor colour is read by the canvas; unset, the element uses the palette's
     warning colour so the cursor is the one thing on the plot that is not a pen. */
  display: block;
  width: 100%;
  height: var(--jqx-trend-height);
}
jqx-trend .jqx-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 4px;
}
jqx-trend .jqx-trend-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
jqx-trend .jqx-trend-title {
  font-weight: 600;
}
jqx-trend .jqx-trend-range {
  flex: 1 1 auto;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-trend .jqx-trend-state {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
jqx-trend .jqx-trend-state-live {
  color: var(--jqx-industrial-ok-text, var(--jqx-success));
}
jqx-trend .jqx-trend-state-paused {
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
}
jqx-trend {
  /* The pens panel and the plot side by side; the plot takes what the panel leaves.
     min-height: 0 is what stops a flex item refusing to shrink below its content. */
}
jqx-trend .jqx-trend-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
}
jqx-trend .jqx-trend-pens {
  display: flex;
  flex: 0 0 var(--jqx-trend-pens-width);
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
}
jqx-trend .jqx-trend-pen {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--jqx-text-color);
  background: transparent;
  border: 1px solid var(--jqx-border);
  border-radius: 2px;
  cursor: pointer;
}
jqx-trend .jqx-trend-pen:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-trend {
  /* A hidden pen stays legible - an operator has to be able to read the label of the
     pen they just turned off in order to turn it back on. */
}
jqx-trend .jqx-trend-pen-off {
  opacity: 0.55;
}
jqx-trend .jqx-trend-pen-off .jqx-trend-swatch {
  background: transparent !important;
  border-color: var(--jqx-text-tertiary-color);
}
jqx-trend .jqx-trend-swatch {
  width: 10px;
  height: 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  flex: none;
}
jqx-trend .jqx-trend-pen-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
jqx-trend .jqx-trend-pen-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
jqx-trend .jqx-trend-pen-range {
  font-size: 10px;
  color: var(--jqx-text-tertiary-color, inherit);
  font-variant-numeric: tabular-nums;
}
jqx-trend .jqx-trend-pen-value {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
jqx-trend {
  /* Quality is not decoration - a reading that is stale, bad or uncertain says so where
     the reading is, in words, in a text colour that holds 4.5:1 on the panel. */
}
jqx-trend .jqx-trend-pen-quality,
jqx-trend .jqx-trend-readout-quality {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-industrial-alarm-warning-text, #7d4a00);
}
jqx-trend .jqx-trend-pen-quality[hidden] {
  display: none;
}
jqx-trend .jqx-trend-readout-quality {
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
jqx-trend .jqx-trend-quality-bad {
  color: var(--jqx-industrial-alarm-critical-text, #b22027);
}
jqx-trend {
  /* "no reading", said in place of a "--" a screen reader cannot read. Off-screen rather
     than display:none, which would take it out of the accessibility tree too. */
}
jqx-trend .jqx-trend-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
jqx-trend .jqx-trend-plot {
  position: relative;
  /* 80px when the chart has no height of its own to share out, so the plot never collapses */
  flex: 1 1 80px;
  min-width: 0;
  min-height: 0;
  background: var(--jqx-trend-plot-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}
jqx-trend .jqx-trend-plot:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: -2px;
}
jqx-trend {
  /* Out of the flow: the canvas is sized to the plot, so the plot must not be sized by the
     canvas. In flow, its pixel height fed back into the plot's, and a chart whose own height
     was not fixed grew on every resize (a waveform graph reached 7,800px). */
}
jqx-trend .jqx-trend-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
jqx-trend .jqx-trend-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
jqx-trend .jqx-trend-readout-time {
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-trend .jqx-trend-readout-pen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
jqx-trend {
  /* A band's expected value and interval, after the pen it belongs to. */
}
jqx-trend .jqx-trend-readout-band {
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-trend {
  /* A marker under the cursor: named in its severity's text colour, not washed in it. */
}
jqx-trend .jqx-trend-readout-marker {
  font-weight: 600;
}
jqx-trend .jqx-trend-marker-advisory {
  color: var(--jqx-industrial-alarm-advisory-text, #8a6d00);
}
jqx-trend .jqx-trend-marker-warning {
  color: var(--jqx-industrial-alarm-warning-text, #a85f00);
}
jqx-trend .jqx-trend-marker-critical {
  color: var(--jqx-industrial-alarm-critical-text, #b22027);
}
jqx-trend {
  /* Right to left: the text around the plot mirrors - header, pens panel, readout. The plot
     does not: its axes run as the data does, and the canvas text keeps its direction. */
}
jqx-trend[right-to-left] .jqx-trend-header,
jqx-trend[right-to-left] .jqx-trend-pens,
jqx-trend[right-to-left] .jqx-trend-readout {
  direction: rtl;
}
jqx-trend[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-trend.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* jqx-scope */
jqx-scope {
  --jqx-scope-height: 360px;
  --jqx-scope-plot-background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-scope-grid-color: var(--jqx-border);
  --jqx-scope-axis-color: var(--jqx-text-tertiary-color, var(--jqx-border));
  /* Trigger and cursor colours are read by the canvas from these; unset, the element
     falls back to the industrial palette so the traces match the theme. */
  display: block;
  width: 100%;
  height: var(--jqx-scope-height);
}
jqx-scope .jqx-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 4px;
}
jqx-scope .jqx-scope-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
jqx-scope .jqx-scope-title {
  font-weight: 600;
}
jqx-scope .jqx-scope-settings {
  flex: 1 1 auto;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-scope {
  /* The acquisition state is a word in a box, the way a scope's front panel shows it,
     and it is a word before it is a colour. */
}
jqx-scope .jqx-scope-state {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
jqx-scope .jqx-scope-state-triggered {
  color: var(--jqx-industrial-ok-text, var(--jqx-success));
}
jqx-scope .jqx-scope-state-auto,
jqx-scope .jqx-scope-state-waiting,
jqx-scope .jqx-scope-state-armed {
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
}
jqx-scope .jqx-scope-state-stopped,
jqx-scope .jqx-scope-state-paused {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
}
jqx-scope {
  /* The plot takes whatever the chrome leaves. min-height: 0 is what stops a flex item
     from refusing to shrink below its content height and pushing the readout off. */
}
jqx-scope .jqx-scope-plot {
  position: relative;
  /* 80px when the chart has no height of its own to share out, so the plot never collapses */
  flex: 1 1 80px;
  min-height: 0;
  background: var(--jqx-scope-plot-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
}
jqx-scope {
  /* Out of the flow: the canvas is sized to the plot, so the plot must not be sized by the
     canvas. In flow, its pixel height fed back into the plot's, and a chart whose own height
     was not fixed grew on every resize (a waveform graph reached 7,800px). */
}
jqx-scope .jqx-scope-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
jqx-scope .jqx-scope-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
jqx-scope .jqx-scope-channel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-color);
  background: transparent;
  border: 1px solid var(--jqx-border);
  border-radius: 2px;
  cursor: pointer;
}
jqx-scope .jqx-scope-channel:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-scope .jqx-scope-channel-off {
  opacity: 0.55;
}
jqx-scope .jqx-scope-channel-off .jqx-scope-swatch {
  background: transparent !important;
  border-color: var(--jqx-text-tertiary-color);
}
jqx-scope .jqx-scope-swatch {
  width: 10px;
  height: 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  flex: none;
}
jqx-scope .jqx-scope-cursors {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-scope .jqx-scope-cursor-delta {
  font-weight: 600;
  color: var(--jqx-text-color);
}
jqx-scope .jqx-scope-measurements {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
jqx-scope .jqx-scope-measurement {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
jqx-scope .jqx-scope-measure-name {
  color: var(--jqx-text-tertiary-color, inherit);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
jqx-scope {
  /* "no reading", said in place of a "--" a screen reader cannot read. Off-screen rather
     than display:none, which would take it out of the accessibility tree too. */
}
jqx-scope .jqx-scope-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
jqx-scope {
  /* Right to left: the text around the plot mirrors - header, legend, cursor and measurement readouts. The plot
     does not: its axes run as the data does, and the canvas text keeps its direction. */
}
jqx-scope[right-to-left] .jqx-scope-header,
jqx-scope[right-to-left] .jqx-scope-legend,
jqx-scope[right-to-left] .jqx-scope-cursors,
jqx-scope[right-to-left] .jqx-scope-measurements {
  direction: rtl;
}
jqx-scope[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-scope.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* jqx-permissive */
jqx-permissive {
  /* Colour is spent only on what blocks. A met condition is neutral: on a list of twelve
     permissives, eleven green ticks say nothing an operator needs and drown the one red
     cross that does. The -text tokens, because these are words read all shift. */
  --jqx-permissive-blocked-color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  --jqx-permissive-blocked-fill: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-permissive-bypass-color: var(--jqx-industrial-alarm-advisory-text, var(--jqx-warning));
  --jqx-permissive-bypass-fill: var(--jqx-industrial-alarm-advisory, var(--jqx-warning));
  --jqx-permissive-ready-color: var(--jqx-industrial-ok-text, var(--jqx-success));
  --jqx-permissive-met-color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
  display: block;
  width: 100%;
}
jqx-permissive .jqx-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
jqx-permissive .jqx-permissive-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
jqx-permissive .jqx-permissive-title {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
jqx-permissive .jqx-permissive-verdict {
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
jqx-permissive .jqx-permissive-verdict-ready {
  color: var(--jqx-permissive-ready-color);
}
jqx-permissive .jqx-permissive-verdict-blocked {
  color: var(--jqx-permissive-blocked-color);
}
jqx-permissive .jqx-permissive-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
}
jqx-permissive .jqx-permissive-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  font-size: 13px;
  border-bottom: 1px solid var(--jqx-border);
}
jqx-permissive .jqx-permissive-row:last-child {
  border-bottom: none;
}
jqx-permissive {
  /* The state glyph: a filled disc for met, a ring for not met, so the two are told apart
     without colour - and then colour on top for the one that blocks. */
}
jqx-permissive .jqx-permissive-state {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--jqx-permissive-met-color);
  background: var(--jqx-permissive-met-color);
  box-sizing: border-box;
}
jqx-permissive .jqx-permissive-unsatisfied .jqx-permissive-state {
  border-color: var(--jqx-permissive-blocked-fill);
  background: transparent;
}
jqx-permissive .jqx-permissive-bypassed .jqx-permissive-state {
  border-color: var(--jqx-permissive-bypass-fill);
  background: transparent;
  /* A bypass is half a state: a ring with a slash through it. */
  background-image: linear-gradient(135deg, transparent 42%, var(--jqx-permissive-bypass-fill) 42%, var(--jqx-permissive-bypass-fill) 58%, transparent 58%);
}
jqx-permissive .jqx-permissive-body {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}
jqx-permissive .jqx-permissive-satisfied .jqx-permissive-label {
  color: var(--jqx-permissive-met-color);
}
jqx-permissive .jqx-permissive-unsatisfied .jqx-permissive-label {
  color: var(--jqx-permissive-blocked-color);
  font-weight: 600;
}
jqx-permissive .jqx-permissive-bypassed .jqx-permissive-label {
  color: var(--jqx-permissive-bypass-color);
}
jqx-permissive {
  /* An advisory condition never blocks, and its label says so by weight, not colour. */
}
jqx-permissive .jqx-permissive-advisory .jqx-permissive-label {
  font-weight: 400;
  font-style: italic;
}
jqx-permissive .jqx-permissive-details {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 11px;
  color: var(--jqx-text-secondary-color, inherit);
  font-variant-numeric: tabular-nums;
}
jqx-permissive .jqx-permissive-tag {
  font-family: Consolas, "Courier New", monospace;
}
jqx-permissive .jqx-permissive-badges {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
}
jqx-permissive .jqx-permissive-badge {
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
jqx-permissive .jqx-permissive-badge-first-out {
  color: var(--jqx-permissive-blocked-color);
}
jqx-permissive .jqx-permissive-badge-bypassed {
  color: var(--jqx-permissive-bypass-color);
}
jqx-permissive .jqx-permissive-badge-advisory {
  color: var(--jqx-text-tertiary-color, inherit);
}
jqx-permissive {
  /* First out gets an edge, not a tint: a tint needs colour-mixing that older plant
     browsers lack, and an edge reads at a glance either way. */
}
jqx-permissive .jqx-permissive-first-out {
  box-shadow: inset 3px 0 0 var(--jqx-permissive-blocked-fill);
}
jqx-permissive .jqx-permissive-age {
  font-size: 11px;
  color: var(--jqx-text-tertiary-color, inherit);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
jqx-permissive .jqx-permissive-bypass {
  padding: 2px 8px;
  font-family: inherit;
  font-size: 11px;
  color: var(--jqx-text-color);
  background: transparent;
  border: 1px solid var(--jqx-border);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
jqx-permissive .jqx-permissive-bypass:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-permissive .jqx-permissive-bypass[disabled] {
  opacity: 0.5;
  cursor: default;
}
jqx-permissive {
  /* asked for, and waiting for the host's answer: not pressed a second time */
}
jqx-permissive .jqx-permissive-bypass-pending {
  cursor: progress;
  border-style: dashed;
}
jqx-permissive {
  /* Right to left the list reads from the right. */
}
jqx-permissive[right-to-left] {
  direction: rtl;
}
jqx-permissive[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-permissive.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-permissive takes by default. */
jqx-permissive:not(:defined) {
  min-height: 180px;
}

/* jqx-recipe-panel */
jqx-recipe-panel {
  /* Colour is spent on the one thing that needs it: an entry the plant refused. A loaded
     recipe is the ordinary case and says so in words, not in green - on a screen an operator
     reads all shift, a panel that lights up every time it works teaches them to ignore it. */
  --jqx-recipe-panel-refused-color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  --jqx-recipe-panel-done-color: var(--jqx-text-secondary-color, var(--jqx-text-color));
  --jqx-recipe-panel-value-font: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace);
  --jqx-recipe-panel-list-width: 180px;
  display: block;
  width: 100%;
}
jqx-recipe-panel .jqx-recipe-panel-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
jqx-recipe-panel .jqx-recipe-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
jqx-recipe-panel .jqx-recipe-panel-title {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-recipe-panel {
  /* the choices on the left, what loading one would do on the right */
}
jqx-recipe-panel .jqx-recipe-panel-body {
  display: grid;
  grid-template-columns: var(--jqx-recipe-panel-list-width) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  flex: 1;
}
jqx-recipe-panel .jqx-recipe-panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  min-height: 0;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
}
jqx-recipe-panel .jqx-recipe-panel-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* a target of at least 24 pixels (WCAG 2.2, 2.5.8), and more on a plant screen */
  min-height: 34px;
  justify-content: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--jqx-border-light, var(--jqx-border, #ccd6e0));
  cursor: pointer;
}
jqx-recipe-panel .jqx-recipe-panel-item:last-child {
  border-bottom: 0;
}
jqx-recipe-panel .jqx-recipe-panel-item.selected {
  background: var(--jqx-ui-state-selected, var(--jqx-primary));
  color: var(--jqx-ui-state-color-selected, var(--jqx-primary-color, #fff));
}
jqx-recipe-panel .jqx-recipe-panel-item:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: -2px;
}
jqx-recipe-panel .jqx-recipe-panel-item-name {
  font-weight: 600;
}
jqx-recipe-panel .jqx-recipe-panel-item-note {
  font-size: 11px;
  opacity: 0.8;
}
jqx-recipe-panel .jqx-recipe-panel-detail {
  overflow-y: auto;
  min-height: 0;
}
jqx-recipe-panel .jqx-recipe-panel-values {
  width: 100%;
  border-collapse: collapse;
}
jqx-recipe-panel .jqx-recipe-panel-value th {
  text-align: start;
  font-weight: 400;
  padding-block: 4px;
  padding-inline: 0 8px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-recipe-panel {
  /* Numbers line up on their right edge, as a column of setpoints is read: 42 under 180,
     not under its first digit. */
}
jqx-recipe-panel .jqx-recipe-panel-value-number {
  font-family: var(--jqx-recipe-panel-value-font);
  font-weight: 600;
  white-space: nowrap;
  padding-block: 4px;
  padding-inline: 0 8px;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
jqx-recipe-panel[right-to-left] {
  direction: rtl;
}
jqx-recipe-panel {
  /* what the plant would not take, kept in front of the operator rather than in a log */
}
jqx-recipe-panel .jqx-recipe-panel-value.refused th,
jqx-recipe-panel .jqx-recipe-panel-value.refused .jqx-recipe-panel-value-number {
  text-decoration: line-through;
  opacity: 0.7;
}
jqx-recipe-panel .jqx-recipe-panel-value-refused {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jqx-recipe-panel-refused-color);
}
jqx-recipe-panel .jqx-recipe-panel-why {
  display: block;
  max-width: 28ch;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
jqx-recipe-panel .jqx-recipe-panel-empty {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-recipe-panel .jqx-recipe-panel-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}
jqx-recipe-panel .jqx-recipe-panel-load {
  min-height: 32px;
  padding: 0 18px;
  border: 1px solid var(--jqx-primary);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-primary);
  color: var(--jqx-primary-color, #fff);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
jqx-recipe-panel .jqx-recipe-panel-load[disabled] {
  opacity: 0.5;
  cursor: default;
}
jqx-recipe-panel .jqx-recipe-panel-load:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 2px;
}
jqx-recipe-panel .jqx-recipe-panel-outcome {
  font-size: 12px;
  color: var(--jqx-recipe-panel-done-color);
}
jqx-recipe-panel .jqx-recipe-panel-outcome.refused {
  color: var(--jqx-recipe-panel-refused-color);
  font-weight: 600;
}
jqx-recipe-panel {
  /* the confirmation: it names what is about to be written, over the panel rather than
     somewhere else, so the list it is about is still on screen behind it */
}
jqx-recipe-panel .jqx-recipe-panel-ask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2;
}
jqx-recipe-panel .jqx-recipe-panel-ask[hidden] {
  display: none;
}
jqx-recipe-panel .jqx-recipe-panel-ask-box {
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
jqx-recipe-panel .jqx-recipe-panel-ask-box p {
  margin: 6px 0 8px;
  font-size: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-recipe-panel .jqx-recipe-panel-ask-list {
  margin: 0 0 12px;
  padding: 0;
  padding-inline-start: 16px;
  font-size: 12px;
  max-height: 180px;
  overflow-y: auto;
}
jqx-recipe-panel .jqx-recipe-panel-ask-list b {
  font-family: var(--jqx-recipe-panel-value-font);
}
jqx-recipe-panel .jqx-recipe-panel-ask-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
jqx-recipe-panel .jqx-recipe-panel-ask-cancel,
jqx-recipe-panel .jqx-recipe-panel-ask-confirm {
  min-height: 30px;
  padding: 0 14px;
  border-radius: var(--jqx-border-radius, 3px);
  font: inherit;
  cursor: pointer;
}
jqx-recipe-panel .jqx-recipe-panel-ask-cancel {
  border: 1px solid var(--jqx-border, #ccd6e0);
  background: var(--jqx-surface, #f4f6f8);
  color: var(--jqx-text-color);
}
jqx-recipe-panel .jqx-recipe-panel-ask-confirm {
  border: 1px solid var(--jqx-primary);
  background: var(--jqx-primary);
  color: var(--jqx-primary-color, #fff);
  font-weight: 600;
}
jqx-recipe-panel .jqx-recipe-panel-ask-cancel:focus-visible,
jqx-recipe-panel .jqx-recipe-panel-ask-confirm:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 2px;
}
jqx-recipe-panel[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/* jqx-spectrum */
jqx-spectrum {
  --jqx-spectrum-height: 320px;
  --jqx-spectrum-plot-background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-spectrum-grid-color: var(--jqx-border);
  /* Trace, hold, peak and marker colours are read by the canvas from these; unset, the
     element falls back to the industrial palette so the trace matches the theme. */
  display: block;
  width: 100%;
  height: var(--jqx-spectrum-height);
}
jqx-spectrum .jqx-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 4px;
}
jqx-spectrum .jqx-spectrum-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
jqx-spectrum .jqx-spectrum-title {
  font-weight: 600;
}
jqx-spectrum .jqx-spectrum-settings {
  flex: 1 1 auto;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-spectrum {
  /* A rate nothing is analysed on, or samples that were not numbers: in the theme's
     warning text colour (contrast-checked there), bold, so it is not read past. */
}
jqx-spectrum .jqx-spectrum-warning {
  font-weight: 600;
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-text-color, inherit));
}
jqx-spectrum .jqx-spectrum-paused {
  padding: 0 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
  border: 1px solid currentColor;
  border-radius: 2px;
}
jqx-spectrum {
  /* The plot takes whatever the chrome leaves. min-height: 0 is what stops a flex item
     from refusing to shrink below its content height and pushing the readout off. */
}
jqx-spectrum .jqx-spectrum-plot {
  position: relative;
  /* 80px when the chart has no height of its own to share out, so the plot never collapses */
  flex: 1 1 80px;
  min-height: 0;
  background: var(--jqx-spectrum-plot-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
}
jqx-spectrum {
  /* Out of the flow: the canvas is sized to the plot, so the plot must not be sized by the
     canvas. In flow, its pixel height fed back into the plot's, and a chart whose own height
     was not fixed grew on every resize (a waveform graph reached 7,800px). */
}
jqx-spectrum .jqx-spectrum-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
jqx-spectrum .jqx-spectrum-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
jqx-spectrum .jqx-spectrum-peaks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
jqx-spectrum .jqx-spectrum-peak-index {
  display: inline-block;
  min-width: 14px;
  padding: 0 3px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: var(--jqx-industrial-alarm-warning-color, var(--jqx-warning-color, #ffffff));
  background: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  border-radius: 2px;
}
jqx-spectrum .jqx-spectrum-thd {
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-spectrum {
  /* Right to left: the text around the plot mirrors - header, legend, readout. The plot
     does not: its axes run as the data does, and the canvas text keeps its direction. */
}
jqx-spectrum[right-to-left] .jqx-spectrum-header,
jqx-spectrum[right-to-left] .jqx-spectrum-readout {
  direction: rtl;
}
jqx-spectrum[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-spectrum.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

@charset "UTF-8";
/* jqx-control-chart */
jqx-control-chart {
  --jqx-control-chart-height: 360px;
  --jqx-control-chart-secondary-share: 34%;
  --jqx-control-chart-plot-background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-control-chart-grid-color: var(--jqx-border);
  /* Series and limit colours are read by the canvas from these; unset, the element falls
     back to the industrial palette so the trace matches the theme. The limit colour is the
     alarm red on purpose - a control limit is where the process stops being in control,
     and it is one of the few places on an ISA-101 screen that has earned red. */
  --jqx-control-chart-center-color: var(--jqx-industrial-ok, var(--jqx-success));
  --jqx-control-chart-limit-color: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-control-chart-spec-color: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  --jqx-control-chart-zone-color: rgba(128, 128, 128, 0.06);
  --jqx-control-chart-zone-alternate-color: rgba(128, 128, 128, 0.13);
  display: block;
  width: 100%;
  height: var(--jqx-control-chart-height);
}
jqx-control-chart .jqx-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 4px;
}
jqx-control-chart .jqx-control-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
jqx-control-chart .jqx-control-title {
  font-weight: 600;
}
jqx-control-chart .jqx-control-stats {
  flex: 1 1 auto;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-control-chart .jqx-control-status {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
jqx-control-chart {
  /* The -text tokens rather than the fills: this is a word read all shift, and a fill
     colour lands around 3:1 against a panel. */
}
jqx-control-chart .jqx-control-status-in {
  color: var(--jqx-industrial-ok-text, var(--jqx-success));
}
jqx-control-chart .jqx-control-status-out {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
}
jqx-control-chart {
  /* The plots take whatever the chrome leaves. min-height: 0 is what stops a flex item
     from refusing to shrink below its content and pushing the violations list off. */
}
jqx-control-chart .jqx-control-plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--jqx-control-chart-plot-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
}
jqx-control-chart .jqx-control-plot-secondary {
  flex: 0 0 var(--jqx-control-chart-secondary-share);
}
jqx-control-chart {
  /* above the canvas, which is positioned too and comes after it in the plot */
}
jqx-control-chart .jqx-control-plot-title {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 8px;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, inherit);
  pointer-events: none;
  z-index: 1;
}
jqx-control-chart {
  /* Out of the flow: the canvas is sized to the plot, so the plot must not be sized by the
     canvas. In flow, its pixel height became the plot's flex basis, the plot was then shrunk
     to fit and the canvas kept the old height - the sample numbers along the bottom were cut
     in half. */
}
jqx-control-chart .jqx-control-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
jqx-control-chart .jqx-control-capability {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-control-chart .jqx-control-violations {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  max-height: 4.5em;
  overflow-y: auto;
}
jqx-control-chart .jqx-control-violation {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
}
jqx-control-chart .jqx-control-violation::before {
  content: "●";
  margin-right: 4px;
  font-size: 9px;
  vertical-align: 1px;
}
jqx-control-chart[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-control-chart.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

@charset "UTF-8";
/* jqx-faceplate
 *
 * Two columns and three readouts. The process column carries the setpoint marker on it
 * rather than beside it, because the gap between the two is the thing an operator is
 * reading - a separate setpoint bar would make that gap something to be worked out
 * instead of something to be seen.
 *
 * Colour is reserved for the abnormal, per ISA-101. A loop in normal operation is drawn
 * entirely in neutrals; the alarm limits are hairlines until one is crossed. */
jqx-faceplate {
  --jqx-faceplate-track-width: 26px;
  --jqx-faceplate-track-height: 128px;
  --jqx-faceplate-value-size: 15px;
  --jqx-faceplate-fill: var(--jqx-industrial-accent-text, var(--jqx-primary));
  --jqx-faceplate-width: 186px;
  display: inline-block;
  box-sizing: border-box;
  /* A definite width, not a minimum. A faceplate is a fixed-size object on a DCS screen -
     operators learn where a loop's controls are and expect them not to move. It also
     stops the embedded trend from deciding: jqx-strip-chart has an intrinsic width, so a
     content-sized faceplate is sized by its chart rather than by its columns. */
  width: var(--jqx-faceplate-width);
}

jqx-faceplate .jqx-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid var(--jqx-industrial-panel-border, var(--jqx-border));
  border-radius: var(--jqx-border-radius);
  background: var(--jqx-industrial-panel-background, var(--jqx-surface));
}

/* ── Header ──────────────────────────────────────────────────────────────── */
jqx-faceplate .jqx-faceplate-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

jqx-faceplate .jqx-faceplate-tag {
  font-family: Consolas, Monaco, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--jqx-text-color);
}

jqx-faceplate .jqx-faceplate-description {
  font-size: 11px;
  color: var(--jqx-text-tertiary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quality is not decoration - a reading that is stale or bad has to say so where the
   reading is, not somewhere else on the screen. */
jqx-faceplate .jqx-faceplate-quality {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0 4px;
}

jqx-faceplate[quality=bad] .jqx-faceplate-quality {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
}

/* ── Columns ─────────────────────────────────────────────────────────────── */
jqx-faceplate .jqx-faceplate-columns {
  display: flex;
  gap: 14px;
  justify-content: center;
}

jqx-faceplate .jqx-faceplate-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

jqx-faceplate .jqx-faceplate-column:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--jqx-industrial-focus-halo, transparent);
}

jqx-faceplate .jqx-faceplate-track {
  position: relative;
  width: var(--jqx-faceplate-track-width);
  height: var(--jqx-faceplate-track-height);
  border: 1px solid var(--jqx-border);
  border-radius: 2px;
  background: var(--jqx-base-200, var(--jqx-background));
  overflow: hidden;
}

jqx-faceplate .jqx-faceplate-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--jqx-faceplate-fill);
}

/* The process column takes the alarm colour only once a limit is crossed. */
jqx-faceplate[alarm-state=hi] .jqx-faceplate-pv .jqx-faceplate-fill,
jqx-faceplate[alarm-state=lo] .jqx-faceplate-pv .jqx-faceplate-fill {
  background: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}

jqx-faceplate[alarm-state=hiHi] .jqx-faceplate-pv .jqx-faceplate-fill,
jqx-faceplate[alarm-state=loLo] .jqx-faceplate-pv .jqx-faceplate-fill {
  background: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}

/* A bad or stale reading must not look like a live one: the process column is hatched
   and the PV readout greyed - struck through when bad, italic when stale - beside the
   badge. After the alarm colours, which a reading that cannot be trusted does not earn. */
jqx-faceplate[quality=bad] .jqx-faceplate-pv .jqx-faceplate-fill,
jqx-faceplate[quality=stale] .jqx-faceplate-pv .jqx-faceplate-fill {
  background: repeating-linear-gradient(135deg, var(--jqx-text-secondary-color, #6b7785) 0 3px, transparent 3px 7px);
}

jqx-faceplate[quality=bad] .jqx-faceplate-readout:first-child .jqx-faceplate-readout-value,
jqx-faceplate[quality=stale] .jqx-faceplate-readout:first-child .jqx-faceplate-readout-value {
  color: var(--jqx-text-secondary-color, var(--jqx-text-tertiary-color));
}

jqx-faceplate[quality=bad] .jqx-faceplate-readout:first-child .jqx-faceplate-readout-value {
  text-decoration: line-through;
}

jqx-faceplate[quality=stale] .jqx-faceplate-readout:first-child .jqx-faceplate-readout-value {
  font-style: italic;
}

jqx-faceplate .jqx-faceplate-bands {
  position: absolute;
  inset: 0;
}

jqx-faceplate .jqx-faceplate-limit {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--jqx-text-tertiary-color);
  opacity: 0.7;
}

jqx-faceplate .jqx-faceplate-limit[data-limit=hiHi],
jqx-faceplate .jqx-faceplate-limit[data-limit=loLo] {
  background: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}

/* The setpoint rides on the process column. A triangle pointing in, so it reads as a
   target on that scale rather than as a second value. */
jqx-faceplate .jqx-faceplate-setpoint-marker,
jqx-faceplate .jqx-faceplate-setpoint-pending {
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid var(--jqx-text-color);
  transform: translateY(50%);
}

/* A request that has not come back yet is drawn faintly and in the accent: it is what
   was asked for, not what the loop is at. */
jqx-faceplate .jqx-faceplate-setpoint-pending {
  border-right-color: var(--jqx-industrial-accent-text, var(--jqx-primary));
  opacity: 0.65;
}

jqx-faceplate .jqx-faceplate-clamp {
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1px dashed var(--jqx-text-tertiary-color);
  border-bottom: 1px dashed var(--jqx-text-tertiary-color);
  opacity: 0.5;
}

jqx-faceplate .jqx-faceplate-column-label {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jqx-text-tertiary-color);
}

/* ── Readouts ────────────────────────────────────────────────────────────── */
jqx-faceplate .jqx-faceplate-readouts {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

jqx-faceplate .jqx-faceplate-readout {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

jqx-faceplate .jqx-faceplate-readout-label {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jqx-text-tertiary-color);
  width: 22px;
  flex: none;
}

jqx-faceplate .jqx-faceplate-readout-value {
  font-family: Consolas, Monaco, monospace;
  font-size: var(--jqx-faceplate-value-size);
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-color);
}

jqx-faceplate .jqx-faceplate-readout-value[data-pending] {
  color: var(--jqx-industrial-accent-text, var(--jqx-primary));
}

jqx-faceplate .jqx-faceplate-readout-unit {
  font-size: 10px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-tertiary-color));
}

jqx-faceplate .jqx-faceplate-readout-unit:empty {
  display: none;
}

/* ── Modes ───────────────────────────────────────────────────────────────── */
/* The modes wrap onto a second row rather than spilling out of the card: four of them,
   or a long word - OUT OF SERVICE, or its translation - do not fit one row of 186 px. */
jqx-faceplate .jqx-faceplate-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

jqx-faceplate .jqx-faceplate-mode {
  flex: 1 1 0;
  min-width: min-content;
  background: transparent;
  border: 1px solid var(--jqx-border);
  border-radius: 2px;
  color: var(--jqx-text-secondary-color);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 4px;
  text-transform: uppercase;
}

jqx-faceplate .jqx-faceplate-mode[aria-checked=true] {
  background: var(--jqx-ui-state-selected, var(--jqx-base-300));
  border-color: var(--jqx-industrial-accent-text, var(--jqx-primary));
  color: var(--jqx-text-color);
  font-weight: 600;
}

jqx-faceplate .jqx-faceplate-mode[data-pending] {
  border-style: dashed;
  opacity: 0.75;
}

jqx-faceplate .jqx-faceplate-mode:disabled {
  cursor: default;
  opacity: 0.5;
}

jqx-faceplate .jqx-faceplate-mode:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 1px;
  box-shadow: 0 0 0 3px var(--jqx-industrial-focus-halo, transparent);
}

/* ── Trend ───────────────────────────────────────────────────────────────── */
jqx-faceplate .jqx-faceplate-trend {
  height: 52px;
  min-height: 0;
}

jqx-faceplate .jqx-faceplate-trend[hidden] {
  display: none;
}

jqx-faceplate .jqx-faceplate-trend jqx-strip-chart {
  width: 100%;
  height: 100%;
}

/* ── Compact ─────────────────────────────────────────────────────────────── */
jqx-faceplate[compact] {
  --jqx-faceplate-track-height: 76px;
  --jqx-faceplate-value-size: 13px;
  --jqx-faceplate-width: 148px;
}

jqx-faceplate[compact] .jqx-faceplate-description,
jqx-faceplate[compact] .jqx-faceplate-column-label {
  display: none;
}

/* .jqx-element carries the framework's own background and color at higher specificity
   than a bare tag selector, so anything that sets those has to be restated here. */
jqx-faceplate.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-faceplate takes by default. */
jqx-faceplate:not(:defined) {
  min-height: 200px;
}

/* The setpoint can be asked for from the faceplate itself: a press or a drag on the process
   value's track, or the arrow keys on the marker, which is a slider then. */
jqx-faceplate .jqx-faceplate-track.jqx-faceplate-settable {
  cursor: ns-resize;
  touch-action: none;
}

jqx-faceplate .jqx-faceplate-setpoint-marker[role=slider]:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 3px;
}

@charset "UTF-8";
/* jqx-status-tile
 *
 * The state is drawn as a bar down the leading edge rather than as a wash across the
 * whole tile. A wall of forty saturated tiles is unreadable, and ISA-101 asks for colour
 * to mean something - so the surface stays neutral and only the marker carries state.
 *
 * Sizes are variables because the four hand-rolled tiles this replaces each picked a
 * different value size (30px, 26px, 21px). One default, overridable per screen, rather
 * than a `size` property that would bake three of them into the API. */
jqx-status-tile {
  --jqx-status-tile-value-size: 26px;
  --jqx-status-tile-label-size: 11px;
  --jqx-status-tile-meta-size: 11.5px;
  --jqx-status-tile-marker-width: 3px;
  --jqx-status-tile-padding: 10px 12px;
  --jqx-status-tile-state-color: transparent;
  display: block;
  box-sizing: border-box;
}

/* Right to left: the tile is text, so it mirrors - the state marker is already on the
   inline-start edge. The reading, the trend and the target take their direction from what
   they say, so a negative number is not drawn with its minus sign after it. */
jqx-status-tile[right-to-left] {
  direction: rtl;
}

jqx-status-tile .jqx-status-tile-value,
jqx-status-tile .jqx-status-tile-trend,
jqx-status-tile .jqx-status-tile-target {
  unicode-bidi: plaintext;
}

jqx-status-tile .jqx-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--jqx-status-tile-padding);
  border: 1px solid var(--jqx-industrial-panel-border, var(--jqx-border));
  border-radius: var(--jqx-border-radius);
  border-inline-start: var(--jqx-status-tile-marker-width) solid var(--jqx-status-tile-state-color);
  background: var(--jqx-industrial-panel-background, var(--jqx-surface));
}

jqx-status-tile .jqx-status-tile-label {
  color: var(--jqx-text-tertiary-color);
  font-size: var(--jqx-status-tile-label-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

jqx-status-tile .jqx-status-tile-readout {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

/* Tabular figures: a reading that shifts sideways as it updates is harder to read than
   one that does not, and these update constantly. */
jqx-status-tile .jqx-status-tile-value {
  color: var(--jqx-text-color);
  font-size: var(--jqx-status-tile-value-size);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.1;
}

/* A tile holding a name rather than a number needs to wrap and be smaller, or it
   overflows the box a number fits comfortably. */
jqx-status-tile .jqx-status-tile-value-text {
  font-size: calc(var(--jqx-status-tile-value-size) * 0.66);
  font-variant-numeric: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

jqx-status-tile .jqx-status-tile-unit {
  color: var(--jqx-text-secondary-color);
  font-size: calc(var(--jqx-status-tile-value-size) * 0.5);
  font-weight: 500;
}

jqx-status-tile .jqx-status-tile-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--jqx-status-tile-meta-size);
  color: var(--jqx-text-tertiary-color);
  min-height: 1em;
}

jqx-status-tile .jqx-status-tile-trend[hidden],
jqx-status-tile .jqx-status-tile-target[hidden],
jqx-status-tile .jqx-status-tile-footnote[hidden],
jqx-status-tile .jqx-status-tile-spark[hidden] {
  display: none;
}

/* The arrow is decoration. The direction is also spelled out in the text content, so a
   reader never depends on the glyph and neither does anyone who cannot see it. */
jqx-status-tile .jqx-status-tile-trend::before {
  margin-inline-end: 3px;
}

jqx-status-tile .jqx-status-tile-trend[data-direction=up]::before {
  content: "▲";
}

jqx-status-tile .jqx-status-tile-trend[data-direction=down]::before {
  content: "▼";
}

jqx-status-tile .jqx-status-tile-trend[data-direction=flat]::before {
  content: "—";
}

/* Good and bad, not up and down. Rising yield and rising scrap are the same arrow and
   opposite news, which is exactly what the hand-rolled tiles got wrong. */
jqx-status-tile .jqx-status-tile-trend[data-sentiment=good] {
  color: var(--jqx-industrial-ok-text, var(--jqx-success));
}

jqx-status-tile .jqx-status-tile-trend[data-sentiment=bad] {
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
}

jqx-status-tile .jqx-status-tile-spark {
  margin-top: 2px;
  min-height: 0;
}

jqx-status-tile .jqx-status-tile-footnote {
  color: var(--jqx-text-tertiary-color);
  font-size: var(--jqx-status-tile-meta-size);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── State ───────────────────────────────────────────────────────────────────
   Only the marker and, for the two that demand attention, the value itself. */
jqx-status-tile[state=ok] {
  --jqx-status-tile-state-color: var(--jqx-industrial-ok, var(--jqx-success));
}

jqx-status-tile[state=advisory] {
  --jqx-status-tile-state-color: var(--jqx-industrial-alarm-advisory, var(--jqx-warning));
}

jqx-status-tile[state=warning] {
  --jqx-status-tile-state-color: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}

jqx-status-tile[state=critical] {
  --jqx-status-tile-state-color: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}

jqx-status-tile[state=unknown] {
  --jqx-status-tile-state-color: var(--jqx-industrial-unknown, var(--jqx-base-600));
}

/* The -text tokens, not the fills: a fill colour used as text sits around 3:1, below the
   4.5:1 floor for something read for a whole shift. */
jqx-status-tile[state=warning] .jqx-status-tile-value {
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-text-color));
}

jqx-status-tile[state=critical] .jqx-status-tile-value {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
}

jqx-status-tile[state=unknown] .jqx-status-tile-value {
  color: var(--jqx-text-tertiary-color);
}

/* ── Interactive ─────────────────────────────────────────────────────────── */
jqx-status-tile[interactive] .jqx-container {
  cursor: pointer;
}

jqx-status-tile[interactive] .jqx-container:hover {
  border-color: var(--jqx-border-hover);
}

jqx-status-tile .jqx-container:focus-visible {
  outline: 2px solid var(--jqx-industrial-focus, var(--jqx-primary));
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--jqx-industrial-focus-halo, transparent);
}

jqx-status-tile[disabled] .jqx-container {
  cursor: default;
  opacity: 0.55;
}

/* .jqx-element carries the framework's own background and color at higher specificity
   than a bare tag selector, so anything that sets those has to be restated here. */
jqx-status-tile.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* The sparkline draws into a fixed pixel box it is told about. Clipping here means a
   stale width during a resize shows as a trimmed line rather than one crossing the tile
   next door.

   The box it is told about is this one's width, so this one's width must not come from the
   sparkline: a tile sized by its content (a grid item, a flex item) otherwise widened by the
   line it had just drawn, measured again, pushed the wider width, and grew without end -
   4,300px in the copilot screen's panel. inline-size containment keeps the drawing out of
   the width it is drawn to. */
jqx-status-tile .jqx-status-tile-spark {
  overflow: hidden;
  contain: inline-size;
}

/* The sparkline frames itself, which is right when it stands alone and wrong inside a
   tile that already has a border. The tile owns the box here. */
jqx-status-tile jqx-sparkline,
jqx-status-tile jqx-sparkline.jqx-element {
  border: none;
  background: transparent;
  display: block;
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-status-tile takes by default. */
jqx-status-tile:not(:defined) {
  min-height: 100px;
}

/* jqx-mimic */
jqx-mimic {
  --jqx-mimic-height: 420px;
  --jqx-mimic-canvas-background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-mimic-grid-size: 20px;
  --jqx-mimic-grid-color: var(--jqx-border);
  --jqx-mimic-wire-color: var(--jqx-text-tertiary-color);
  display: block;
  width: 100%;
  height: var(--jqx-mimic-height);
}
jqx-mimic .jqx-container {
  width: 100%;
  height: 100%;
}
jqx-mimic .jqx-mimic-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--jqx-mimic-canvas-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
jqx-mimic .jqx-mimic-viewport:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: -2px;
}
jqx-mimic {
  /* The grid scales with the zoom, so it reads as graph paper the diagram sits on
     rather than a fixed screen texture that slides underneath it. */
}
jqx-mimic .jqx-mimic-viewport.show-grid {
  background-image: linear-gradient(to right, var(--jqx-mimic-grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--jqx-mimic-grid-color) 1px, transparent 1px);
  background-size: var(--jqx-mimic-grid-size) var(--jqx-mimic-grid-size);
}
jqx-mimic .jqx-mimic-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
jqx-mimic .jqx-mimic-wires {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
}
jqx-mimic .jqx-mimic-items {
  position: absolute;
  top: 0;
  left: 0;
}
jqx-mimic .jqx-mimic-item {
  position: absolute;
}
jqx-mimic {
  /* Transparent on the canvas. Every element inherits a background from .jqx-element,
     so a symbol dropped onto a diagram otherwise paints its own white box and the plant
     reads as a row of cards rather than a process. Same defect the industrial themes had
     to fix for gauges and tanks sitting in panels. */
}
jqx-mimic .jqx-mimic-item,
jqx-mimic .jqx-mimic-item.jqx-element {
  background: transparent;
}
jqx-mimic .jqx-mimic-wire {
  fill: none;
  stroke: var(--jqx-mimic-wire-color);
  stroke-width: 2;
  stroke-linejoin: round;
  /* Non-scaling so a long run is the same weight as a short one at any zoom - a line
     that thickens as you zoom in stops reading as a pipe. */
  vector-effect: non-scaling-stroke;
}
jqx-mimic .jqx-mimic-wire.flowing {
  stroke: var(--jqx-primary);
  stroke-dasharray: 6 4;
  animation: jqx-mimic-flow 1s linear infinite;
}
jqx-mimic .jqx-mimic-wire.flowing.reverse {
  animation-direction: reverse;
}
jqx-mimic .jqx-mimic-wire.critical {
  stroke: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}
jqx-mimic .jqx-mimic-wire.warning {
  stroke: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}
jqx-mimic {
  /* An instrument tap: the line from a transmitter or a gauge to the pipe it measures. Thin
     and dashed, as a P&ID draws it, and never animated - it carries a signal, not product,
     and drawing it as a pipe would say the process runs through the instrument. */
}
jqx-mimic .jqx-mimic-wire.instrument {
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.75;
}
jqx-mimic .jqx-mimic-wire.instrument.flowing {
  /* a signal does not flow: the animation is refused rather than quietly applied */
  stroke: var(--jqx-mimic-wire-color);
  animation: none;
  stroke-dasharray: 4 3;
}
jqx-mimic[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

@keyframes jqx-mimic-flow {
  to {
    stroke-dashoffset: -10;
  }
}
/* Respect a reduced-motion preference: marching dashes across a whole plant diagram is
   exactly the kind of continuous motion that setting exists to stop. */
@media (prefers-reduced-motion: reduce) {
  jqx-mimic .jqx-mimic-wire.flowing {
    animation: none;
  }
}
/* .jqx-element sets background and color at higher specificity than a bare tag selector. */
jqx-mimic.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* jqx-sequence-editor */
jqx-sequence-editor {
  --jqx-sequence-height: 340px;
  display: block;
  width: 100%;
  height: var(--jqx-sequence-height);
  /* State colouring follows the ISA-101 rule the rest of the set uses: a row takes
     colour only when it is telling the operator something. A passed step is the
     expected outcome and stays neutral - colouring every pass green turns a report
     into a wall of colour with no signal in it. */
}
jqx-sequence-editor .jqx-table-row[state=failed],
jqx-sequence-editor tr[state=failed] {
  color: var(--jqx-industrial-alarm-critical-text, #a51f1f);
  font-weight: 600;
}
jqx-sequence-editor tr[state=running] {
  color: var(--jqx-primary);
  font-weight: 600;
}
jqx-sequence-editor tr[state=aborted] {
  color: var(--jqx-industrial-alarm-warning-text, #7d4a00);
  font-style: italic;
}
jqx-sequence-editor tr[state=skipped],
jqx-sequence-editor tr[state=pending] {
  color: var(--jqx-industrial-unknown-text, var(--jqx-text-secondary-color));
}
jqx-sequence-editor {
  /* A result that could not be judged is told apart from a pass: it needs a look. */
}
jqx-sequence-editor tr[state=notEvaluated] {
  color: var(--jqx-industrial-alarm-warning-text, #7d4a00);
  font-weight: 600;
}
jqx-sequence-editor[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element sets background and color at higher specificity than a bare tag selector. */
jqx-sequence-editor.jqx-element {
  background: var(--jqx-background);
  color: var(--jqx-text-color);
}

/* jqx-terminal */
jqx-terminal {
  --jqx-terminal-height: 260px;
  /* The theme's panel tone, so the text colour the theme pairs with it is right; a dark
     terminal on a light theme would need its own text colour too. */
  --jqx-terminal-background: var(--jqx-industrial-panel-header-background, var(--jqx-surface, var(--jqx-background)));
  --jqx-terminal-color: var(--jqx-text-color);
  --jqx-terminal-font: Consolas, "Courier New", monospace;
  display: block;
  width: 100%;
  /* In a parent that sizes to its content - an inline-block, a flex item without a width -
     100% of nothing collapsed the terminal to 18 px. A session needs a line's worth of room. */
  min-width: 15em;
  height: var(--jqx-terminal-height);
}
jqx-terminal .jqx-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--jqx-terminal-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
}
jqx-terminal .jqx-terminal-output {
  flex: 1 1 auto;
  /* min-height:0 is what lets a flex child actually shrink and scroll rather than
     growing to fit its content and pushing the input row off. */
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px;
  font-family: var(--jqx-terminal-font);
  font-size: 12px;
  line-height: 1.45;
  color: var(--jqx-terminal-color);
}
jqx-terminal .jqx-terminal-output:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: -2px;
}
jqx-terminal .jqx-terminal-line {
  white-space: pre-wrap;
  word-break: break-word;
}
jqx-terminal .jqx-terminal-time {
  opacity: 0.7;
  margin-right: 8px;
  user-select: none;
}
jqx-terminal {
  /* Level colouring follows the same ISA-101 rule as the rest of the set: a line takes
     colour only when it is something the operator should notice. */
}
jqx-terminal .jqx-terminal-line.level-info .jqx-terminal-text {
  color: inherit;
}
jqx-terminal .jqx-terminal-line.level-command .jqx-terminal-text {
  color: var(--jqx-primary);
}
jqx-terminal .jqx-terminal-line.level-response .jqx-terminal-text {
  opacity: 0.85;
}
jqx-terminal .jqx-terminal-line.level-success .jqx-terminal-text {
  color: var(--jqx-industrial-ok-text, var(--jqx-success));
}
jqx-terminal .jqx-terminal-line.level-warn .jqx-terminal-text {
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
}
jqx-terminal .jqx-terminal-line.level-error .jqx-terminal-text {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
}
jqx-terminal .jqx-terminal-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-top: 1px solid var(--jqx-border);
  font-family: var(--jqx-terminal-font);
  font-size: 12px;
}
jqx-terminal .jqx-terminal-prompt {
  color: var(--jqx-primary);
  white-space: pre;
  user-select: none;
}
jqx-terminal .jqx-terminal-input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--jqx-terminal-color);
}
jqx-terminal.jqx-terminal-paused .jqx-terminal-output {
  opacity: 0.7;
}
jqx-terminal {
  /* The eight basic SGR foreground colours - what a bench instrument or serial device
     actually emits. Full ANSI is a terminal emulator's job. The hues are fixed; each is
     pulled towards the theme's text colour so that it reads on the terminal's background
     whichever tone the theme gives it - the light hues that suit a dark terminal are
     2:1 on a light one. Black and white are the dim and bright forms of the text colour. */
}
jqx-terminal .jqx-ansi-black {
  color: color-mix(in srgb, var(--jqx-terminal-color) 65%, var(--jqx-terminal-background));
}
jqx-terminal .jqx-ansi-red {
  color: color-mix(in srgb, #d9534f 70%, var(--jqx-terminal-color));
}
jqx-terminal .jqx-ansi-green {
  color: color-mix(in srgb, #5fb56f 60%, var(--jqx-terminal-color));
}
jqx-terminal .jqx-ansi-yellow {
  color: color-mix(in srgb, #e8a33d 55%, var(--jqx-terminal-color));
}
jqx-terminal .jqx-ansi-blue {
  color: color-mix(in srgb, #4a90d9 70%, var(--jqx-terminal-color));
}
jqx-terminal .jqx-ansi-magenta {
  color: color-mix(in srgb, #c2557a 75%, var(--jqx-terminal-color));
}
jqx-terminal .jqx-ansi-cyan {
  color: color-mix(in srgb, #3fb5b5 60%, var(--jqx-terminal-color));
}
jqx-terminal .jqx-ansi-white {
  color: var(--jqx-terminal-color);
}
jqx-terminal .jqx-ansi-bold {
  font-weight: 700;
}
jqx-terminal[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element sets background and color at higher specificity than a bare tag selector. */
jqx-terminal.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* jqx-bit-field */
jqx-bit-field {
  --jqx-bit-size: 30px;
  --jqx-bit-off-color: var(--jqx-border);
  --jqx-bit-on-color: var(--jqx-industrial-ok, var(--jqx-success));
  --jqx-bit-gap: 3px;
  --jqx-bit-group-gap: 12px;
  display: inline-block;
  /* Without this the bits row below has nothing to be 100% of: an inline-block sizes to
     its content, so a uint64 register pushed the page out to 2300px, which is exactly
     what the overflow-x on the row is there to prevent. */
  max-width: 100%;
}
jqx-bit-field .jqx-container {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  max-width: 100%;
}
jqx-bit-field {
  /* A 64-bit register is wider than most panels: its groups wrap onto further rows, each
     nibble kept whole, so the low bits are on screen rather than past its edge. */
}
jqx-bit-field .jqx-bit-field-bits {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--jqx-bit-group-gap);
  row-gap: 6px;
  /* One group wider than the panel still scrolls itself rather than forcing the page
     to, which keeps the word readout beneath it in place. (The scroll shadows went with
     the single row: on a row that wraps, their covers drew white bars at its ends.) */
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 2px;
}
jqx-bit-field .jqx-bit-group {
  display: flex;
  gap: var(--jqx-bit-gap);
}
jqx-bit-field .jqx-bit {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: var(--jqx-bit-size);
  padding: 3px 2px;
  font-family: inherit;
  background: transparent;
  border: 1px solid var(--jqx-bit-off-color);
  border-radius: 2px;
  color: var(--jqx-text-tertiary-color);
  cursor: default;
}
jqx-bit-field .jqx-bit-state {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
jqx-bit-field {
  /* The index and the name are reference material, not the reading - they stay quiet so
     the row of ones and zeros is what the eye lands on. */
}
jqx-bit-field .jqx-bit-index {
  font-size: 9px;
  line-height: 1;
}
jqx-bit-field .jqx-bit-name {
  font-size: 9px;
  line-height: 1;
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
jqx-bit-field .jqx-bit.on {
  background: var(--jqx-bit-on-color);
  border-color: var(--jqx-bit-on-color);
  color: var(--jqx-primary-color, #fff);
}
jqx-bit-field {
  /* A reserved or read-only bit still shows its state - it is part of the register - but
     must not look like something an operator can change. */
}
jqx-bit-field .jqx-bit.read-only {
  border-style: dashed;
  background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(128, 128, 128, 0.12) 4px 6px);
}
jqx-bit-field .jqx-bit-field-bits.interactive .jqx-bit:not(.read-only) {
  cursor: pointer;
}
jqx-bit-field .jqx-bit:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-bit-field .jqx-bit-field-word {
  display: flex;
  gap: 14px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-color);
}
jqx-bit-field[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element sets background and color at higher specificity than a bare tag selector. */
jqx-bit-field.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-bit-field takes by default. */
jqx-bit-field:not(:defined) {
  min-width: 270px;
  min-height: 48px;
}

/* jqx-bar-graph */
jqx-bar-graph {
  --jqx-bar-graph-width: 26px;
  --jqx-bar-graph-height: 160px;
  --jqx-bar-segment-off: var(--jqx-industrial-unknown, var(--jqx-border));
  /* A level in its normal range is not news: ISA-101 keeps saturated colour for the
     abnormal, so a lit segment is the faceplate's process blue, and green, amber and red
     come only from a band the screen marks ok, warning or critical. */
  --jqx-bar-segment-on: var(--jqx-industrial-accent-text, var(--jqx-primary));
  --jqx-bar-segment-gap: 2px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}
jqx-bar-graph .jqx-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
jqx-bar-graph .jqx-bar-graph-bar {
  display: flex;
  gap: var(--jqx-bar-segment-gap);
}
jqx-bar-graph .jqx-bar-graph-bar.vertical {
  /* column-reverse so the first segment is at the bottom: a level meter fills upward,
     and building it in DOM order keeps the markup reading low-to-high. */
  flex-direction: column-reverse;
  width: var(--jqx-bar-graph-width);
  height: var(--jqx-bar-graph-height);
}
jqx-bar-graph {
  /* its length, unless the space it is in is shorter: the segments share what there is
     rather than the bar running past the edge of a narrow tile */
}
jqx-bar-graph .jqx-bar-graph-bar.horizontal {
  flex-direction: row;
  width: var(--jqx-bar-graph-height);
  max-width: 100%;
  height: var(--jqx-bar-graph-width);
}
jqx-bar-graph .jqx-bar-segment {
  flex: 1 1 0;
  background: var(--jqx-bar-segment-off);
  border-radius: 1px;
  /* Unlit segments stay visible rather than disappearing, so the scale's full extent is
     readable at a glance - that is what separates a meter from a progress bar. */
  opacity: 0.35;
}
jqx-bar-graph .jqx-bar-segment.on {
  background: var(--jqx-bar-segment-on);
  opacity: 1;
}
jqx-bar-graph {
  /* A lit segment inside an alarm band takes that band's colour, so severity is carried
     by the segment itself rather than by a separate marker. */
}
jqx-bar-graph .jqx-bar-segment.on.critical {
  background: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}
jqx-bar-graph .jqx-bar-segment.on.warning {
  background: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}
jqx-bar-graph .jqx-bar-segment.on.ok {
  background: var(--jqx-industrial-ok, var(--jqx-success));
}
jqx-bar-graph {
  /* The peak marker is drawn whether or not its segment is lit - the whole point is that
     it survives the signal falling away beneath it. */
}
jqx-bar-graph .jqx-bar-segment.peak {
  background: var(--jqx-text-color);
  opacity: 1;
}
jqx-bar-graph .jqx-bar-graph-readout {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-color);
}
jqx-bar-graph:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 2px;
  border-radius: 3px;
}
jqx-bar-graph[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element sets background and color at higher specificity than a bare tag selector. */
jqx-bar-graph.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-bar-graph takes by default. */
jqx-bar-graph:not(:defined) {
  min-width: 26px;
  min-height: 46px;
}

/* jqx-knob */
jqx-knob {
  --jqx-knob-size: 96px;
  --jqx-knob-track-color: var(--jqx-border);
  --jqx-knob-body-color: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-knob-marker-color: var(--jqx-primary);
  --jqx-knob-fill-color: var(--jqx-primary);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: var(--jqx-knob-size);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
jqx-knob .jqx-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
jqx-knob .jqx-knob-dial {
  width: var(--jqx-knob-size);
  height: var(--jqx-knob-size);
  line-height: 0;
}
jqx-knob .jqx-knob-svg {
  width: 100%;
  height: 100%;
  display: block;
}
jqx-knob .jqx-knob-track {
  fill: none;
  stroke: var(--jqx-knob-track-color);
  stroke-width: 6;
  stroke-linecap: round;
}
jqx-knob .jqx-knob-fill {
  fill: none;
  stroke: var(--jqx-knob-fill-color);
  stroke-width: 6;
  stroke-linecap: round;
}
jqx-knob .jqx-knob-body {
  fill: var(--jqx-knob-body-color);
  stroke: var(--jqx-border);
  stroke-width: 1.5;
}
jqx-knob .jqx-knob-marker {
  fill: var(--jqx-knob-marker-color);
  stroke: var(--jqx-knob-marker-color);
  stroke-width: 3;
  stroke-linecap: round;
}
jqx-knob {
  /* Alarm bands sit outside the dial so they never obscure the pointer. Colour comes
     from the theme's industrial tokens, so a band means the same thing here as it does
     on a gauge or a tank. */
}
jqx-knob .jqx-knob-range {
  fill: none;
  stroke: var(--jqx-industrial-alarm-advisory, var(--jqx-secondary));
  stroke-width: 5;
}
jqx-knob .jqx-knob-range.critical {
  stroke: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}
jqx-knob .jqx-knob-range.warning {
  stroke: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}
jqx-knob .jqx-knob-range.ok {
  stroke: var(--jqx-industrial-ok, var(--jqx-success));
}
jqx-knob .jqx-knob-readout {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-color);
}
jqx-knob:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
jqx-knob[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element sets background and color at higher specificity than a bare tag selector. */
jqx-knob.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-knob takes by default. */
jqx-knob:not(:defined) {
  min-height: 114px;
}

/* jqx-multi-state-indicator */
jqx-multi-state-indicator {
  --jqx-multi-state-indicator-default-size: 14px;
  --jqx-multi-state-indicator-bar-width: 34px;
  --jqx-multi-state-indicator-blink-duration: 1.2s;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding: 0px;
}

jqx-multi-state-indicator .jqx-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
}

jqx-multi-state-indicator .jqx-lamp {
  flex: none;
  width: var(--jqx-multi-state-indicator-default-size);
  height: var(--jqx-multi-state-indicator-default-size);
  border-radius: 50%;
  border: 1px solid transparent;
  box-sizing: border-box;
  background: var(--jqx-industrial-unknown, var(--jqx-base-600));
}

jqx-multi-state-indicator[shape=square] .jqx-lamp {
  border-radius: 0px;
}

jqx-multi-state-indicator[shape=bar] .jqx-lamp {
  width: var(--jqx-multi-state-indicator-bar-width);
  border-radius: 0px;
}

jqx-multi-state-indicator .jqx-label {
  color: var(--jqx-text-color);
  font-family: var(--jqx-font-family);
  font-size: var(--jqx-font-size);
  white-space: nowrap;
}

jqx-multi-state-indicator .jqx-label:empty {
  display: none;
}

/* Severity colours fall back to the standard semantic tokens, so the element
   is usable outside the industrial themes. */
jqx-multi-state-indicator .jqx-lamp[severity=ok] {
  background: var(--jqx-industrial-ok, var(--jqx-success));
}

jqx-multi-state-indicator .jqx-lamp[severity=advisory] {
  background: var(--jqx-industrial-alarm-advisory, #e5c728);
}

jqx-multi-state-indicator .jqx-lamp[severity=warning] {
  background: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}

jqx-multi-state-indicator .jqx-lamp[severity=critical] {
  background: var(--jqx-industrial-alarm-critical, var(--jqx-error));
}

jqx-multi-state-indicator .jqx-lamp[severity=manual] {
  background: var(--jqx-industrial-manual, var(--jqx-info));
}

jqx-multi-state-indicator .jqx-lamp[severity=maintenance] {
  background: var(--jqx-industrial-maintenance, #7a5aa8);
}

/* An off lamp is an empty ring, and the ring has to be seen: the border colour came to
   1.02:1 on the light theme and 1.66:1 on the dark, so "off" looked like no lamp at all.
   The secondary text colour clears 3:1 on both. */
jqx-multi-state-indicator .jqx-lamp[severity=off] {
  background: transparent;
  border: 2px solid var(--jqx-industrial-unknown-text, var(--jqx-text-secondary-color, #5f6b77));
}

/* No state matched the value - missing data, not a state. Hatched over the unknown grey,
   so it is never read as a declared grey state such as stopped. */
jqx-multi-state-indicator[unmatched] .jqx-lamp[severity] {
  background: repeating-linear-gradient(135deg, var(--jqx-industrial-unknown, var(--jqx-base-600)) 0 2px, transparent 2px 4px);
  border: 1px dashed var(--jqx-industrial-unknown-text, var(--jqx-text-secondary-color, #5f6b77));
}

/* Quality: the lamp keeps its state but does not look live. Uncertain is dimmed, stale
   faded, bad hatched; the word is in the label and the accessible name. */
jqx-multi-state-indicator[quality=uncertain] .jqx-lamp {
  opacity: 0.6;
}

jqx-multi-state-indicator[quality=stale] .jqx-lamp {
  opacity: 0.4;
}

jqx-multi-state-indicator[quality=bad] .jqx-lamp[severity] {
  background-image: repeating-linear-gradient(45deg, transparent 0 2px, rgba(0, 0, 0, 0.45) 2px 4px);
  outline: 1px solid var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  outline-offset: 1px;
}

jqx-multi-state-indicator .jqx-lamp[severity=unknown] {
  background: var(--jqx-industrial-unknown, var(--jqx-base-600));
}

/* An unacknowledged or otherwise attention-seeking state blinks, per ISA-18.2. */
jqx-multi-state-indicator .jqx-lamp.jqx-blink {
  animation: jqx-multi-state-indicator-blink var(--jqx-multi-state-indicator-blink-duration) step-end infinite;
}

@keyframes jqx-multi-state-indicator-blink {
  50% {
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  jqx-multi-state-indicator .jqx-lamp.jqx-blink {
    animation: none;
  }
}
jqx-multi-state-indicator[disabled] {
  opacity: 0.5;
}

/* .jqx-element carries the framework's own background at higher specificity than a bare
   tag selector. The element sits on a diagram or inline in text, so it paints nothing of
   its own. */
jqx-multi-state-indicator.jqx-element {
  background: transparent;
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-multi-state-indicator takes by default. */
jqx-multi-state-indicator:not(:defined) {
  min-width: 37px;
  min-height: 16px;
}

@charset "UTF-8";
/* jqx-site-map */
jqx-site-map {
  /* A site that is fine is neutral grey; colour and weight only for one that needs someone. */
  --jqx-site-map-normal: var(--jqx-text-tertiary-color, #6b7785);
  --jqx-site-map-warning: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  --jqx-site-map-alarm: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-site-map-alarm-color: var(--jqx-industrial-alarm-critical-color, #fff);
  --jqx-site-map-warning-color: var(--jqx-industrial-alarm-warning-color, #000);
  --jqx-site-map-land: var(--jqx-surface, #f4f6f8);
  /* Map tiles muted, so the sites and not the streets are what the eye finds (ISA-101). */
  --jqx-site-map-tile-filter: grayscale(0.85) contrast(0.92) brightness(1.03);
  display: block;
  width: 100%;
}
jqx-site-map .jqx-site-map-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
jqx-site-map .jqx-site-map-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 12px;
}
jqx-site-map .jqx-site-map-title {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-site-map .jqx-site-map-summary {
  flex: 1 1 auto;
  color: var(--jqx-text-color);
}
jqx-site-map .jqx-site-map-views {
  display: flex;
  gap: 0;
}
jqx-site-map .jqx-site-map-view {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
jqx-site-map {
  /* logical sides throughout the text around the map, so right to left mirrors it */
}
jqx-site-map .jqx-site-map-view:first-child {
  border-radius: 0;
  border-start-start-radius: var(--jqx-border-radius, 3px);
  border-end-start-radius: var(--jqx-border-radius, 3px);
}
jqx-site-map .jqx-site-map-view:last-child {
  margin-inline-start: -1px;
  border-radius: 0;
  border-start-end-radius: var(--jqx-border-radius, 3px);
  border-end-end-radius: var(--jqx-border-radius, 3px);
}
jqx-site-map .jqx-site-map-view[aria-pressed=true] {
  position: relative;
  border-color: var(--jqx-primary);
  background: var(--jqx-primary);
  color: var(--jqx-primary-color, #fff);
}
jqx-site-map {
  /* ── The map ── */
}
jqx-site-map .jqx-site-map-map {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-site-map-land);
  user-select: none;
  -webkit-user-select: none;
}
jqx-site-map {
  /* a drag pans the map, so the browser must not scroll or zoom the page under it */
}
jqx-site-map .jqx-site-map-map.zoomable {
  touch-action: none;
  cursor: grab;
}
jqx-site-map .jqx-site-map-map.zoomable.dragging {
  cursor: grabbing;
}
jqx-site-map .jqx-site-map-tiles {
  position: absolute;
  inset: 0;
  filter: var(--jqx-site-map-tile-filter);
}
jqx-site-map .jqx-site-map-tiles[hidden],
jqx-site-map .jqx-site-map-picture[hidden],
jqx-site-map .jqx-site-map-controls[hidden],
jqx-site-map .jqx-site-map-attribution[hidden],
jqx-site-map .jqx-site-map-popup[hidden],
jqx-site-map .jqx-site-map-hint-overlay[hidden],
jqx-site-map .jqx-site-map-detail[hidden] {
  display: none;
}
jqx-site-map .jqx-site-map-tile {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
  pointer-events: none;
}
jqx-site-map .jqx-site-map-tile.failed {
  visibility: hidden;
}
jqx-site-map .jqx-site-map-map[hidden],
jqx-site-map .jqx-site-map-list[hidden] {
  display: none;
}
jqx-site-map .jqx-site-map-picture {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--jqx-text-tertiary-color, #6b7785);
}
jqx-site-map .jqx-site-map-picture > svg {
  display: block;
  width: 100%;
  height: 100%;
}
jqx-site-map {
  /* the grid a map without a picture is drawn on */
}
jqx-site-map .jqx-site-map-picture:not(.image):empty {
  background-image: linear-gradient(var(--jqx-border-light, var(--jqx-border, #ccd6e0)) 1px, transparent 1px), linear-gradient(90deg, var(--jqx-border-light, var(--jqx-border, #ccd6e0)) 1px, transparent 1px);
  background-size: 10% 10%;
  background-position: -1px -1px;
  background-repeat: repeat;
}
jqx-site-map .jqx-site-map-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
jqx-site-map .jqx-site-map-markers .jqx-site-map-site {
  pointer-events: auto;
}
jqx-site-map .jqx-site-map-site[hidden] {
  display: none;
}
jqx-site-map {
  /* ── Zoom, credit, hint ── */
}
jqx-site-map .jqx-site-map-controls {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
jqx-site-map .jqx-site-map-control {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--jqx-border, #ccd6e0);
  background: transparent;
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
jqx-site-map .jqx-site-map-control:last-child {
  border-bottom: 0;
  font-size: 15px;
}
jqx-site-map .jqx-site-map-control:hover {
  background: var(--jqx-ui-state-hover, var(--jqx-surface, #f4f6f8));
}
jqx-site-map .jqx-site-map-control:focus-visible,
jqx-site-map .jqx-site-map-close:focus-visible,
jqx-site-map .jqx-site-map-link:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: -2px;
}
jqx-site-map .jqx-site-map-attribution {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 1px 6px;
  background: color-mix(in srgb, var(--jqx-background, #fff) 82%, transparent);
  font-size: 11px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-site-map .jqx-site-map-hint-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  pointer-events: none;
}
jqx-site-map {
  /* ── The card beside its marker ── */
}
jqx-site-map .jqx-site-map-popup {
  position: absolute;
  z-index: 2;
  width: 280px;
  max-width: calc(100% - 12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  cursor: auto;
}
jqx-site-map .jqx-site-map-popup .jqx-site-map-card {
  flex-direction: column;
  align-items: stretch;
  background: var(--jqx-background, #fff);
}
jqx-site-map .jqx-site-map-popup.outside {
  visibility: hidden;
}
jqx-site-map .jqx-site-map-popup::after {
  content: "";
  position: absolute;
  left: var(--jqx-site-map-pointer-x, 50%);
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--jqx-border, #ccd6e0);
  border-bottom: 1px solid var(--jqx-border, #ccd6e0);
  background: var(--jqx-background, #fff);
  transform: translateX(-50%) rotate(45deg);
}
jqx-site-map .jqx-site-map-popup.below::after {
  top: -7px;
  bottom: auto;
  transform: translateX(-50%) rotate(225deg);
}
jqx-site-map .jqx-site-map-site {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  /* the dot sits on the point; the name runs to its right */
  transform: translate(-12px, -50%);
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--jqx-text-color);
  font: inherit;
  cursor: pointer;
}
jqx-site-map .jqx-site-map-site.left {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 12px), -50%);
}
jqx-site-map .jqx-site-map-dot {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin: 5px;
  border: 2px solid var(--jqx-background, #fff);
  border-radius: 50%;
  background: var(--jqx-site-map-normal);
  box-shadow: 0 0 0 1px var(--jqx-site-map-normal);
}
jqx-site-map .jqx-site-map-site.warning .jqx-site-map-dot {
  width: 18px;
  height: 18px;
  margin: 3px;
  background: var(--jqx-site-map-warning);
  box-shadow: 0 0 0 1px var(--jqx-site-map-warning-color);
}
jqx-site-map .jqx-site-map-site.alarm .jqx-site-map-dot {
  width: 22px;
  height: 22px;
  margin: 1px;
  background: var(--jqx-site-map-alarm);
  box-shadow: 0 0 0 1px var(--jqx-site-map-alarm), 0 0 0 5px color-mix(in srgb, var(--jqx-site-map-alarm) 25%, transparent);
}
jqx-site-map .jqx-site-map-site.offline .jqx-site-map-dot {
  border: 2px dashed var(--jqx-site-map-normal);
  background: var(--jqx-background, #fff);
  box-shadow: none;
}
jqx-site-map .jqx-site-map-site.maintenance .jqx-site-map-dot {
  background: repeating-linear-gradient(45deg, var(--jqx-site-map-normal) 0 2px, var(--jqx-background, #fff) 2px 4px);
}
jqx-site-map {
  /* A state the map cannot read: hollow, dotted, with a question mark, a size up from normal
     so it is found. No alarm colour - nobody knows it is an alarm - but never the quiet grey
     of a site that is fine. */
}
jqx-site-map .jqx-site-map-site.unknown .jqx-site-map-dot {
  width: 18px;
  height: 18px;
  margin: 3px;
  border: 2px dotted var(--jqx-text-color, #131c25);
  background: var(--jqx-background, #fff);
  box-shadow: none;
}
jqx-site-map .jqx-site-map-site.unknown .jqx-site-map-dot::after {
  content: "?";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--jqx-text-color, #131c25);
}
jqx-site-map .jqx-site-map-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--jqx-site-map-alarm-color);
}
jqx-site-map .jqx-site-map-site.warning .jqx-site-map-badge {
  font-size: 10px;
  color: var(--jqx-site-map-warning-color);
}
jqx-site-map .jqx-site-map-name {
  padding: 1px 5px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--jqx-background, #fff) 88%, transparent);
  font-size: 12px;
  white-space: nowrap;
}
jqx-site-map .jqx-site-map-site.alarm .jqx-site-map-name,
jqx-site-map .jqx-site-map-site.warning .jqx-site-map-name,
jqx-site-map .jqx-site-map-site.unknown .jqx-site-map-name {
  font-weight: 600;
}
jqx-site-map .jqx-site-map-site.selected .jqx-site-map-name {
  outline: 2px solid var(--jqx-primary);
}
jqx-site-map .jqx-site-map-site.selected .jqx-site-map-dot {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 3px;
}
jqx-site-map .jqx-site-map-site:focus-visible {
  outline: none;
}
jqx-site-map .jqx-site-map-site:focus-visible .jqx-site-map-dot {
  outline: 3px solid var(--jqx-primary);
  outline-offset: 3px;
}
jqx-site-map {
  /* ── The list ── */
}
jqx-site-map .jqx-site-map-list {
  overflow: auto;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
}
jqx-site-map .jqx-site-map-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
jqx-site-map .jqx-site-map-table th[scope=col] {
  padding: 6px 10px;
  border-bottom: 1px solid var(--jqx-border, #ccd6e0);
  background: var(--jqx-surface, #f4f6f8);
  font-size: 12px;
  font-weight: 500;
  text-align: start;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-site-map .jqx-site-map-table td,
jqx-site-map .jqx-site-map-table th[scope=row] {
  padding: 6px 10px;
  border-bottom: 1px solid var(--jqx-border-light, var(--jqx-border, #ccd6e0));
  text-align: start;
}
jqx-site-map .jqx-site-map-table tr.alarm > th {
  box-shadow: inset var(--jqx-site-map-edge, 3px) 0 0 var(--jqx-site-map-alarm);
}
jqx-site-map .jqx-site-map-table tr.warning > th {
  box-shadow: inset var(--jqx-site-map-edge, 3px) 0 0 var(--jqx-site-map-warning);
}
jqx-site-map .jqx-site-map-table tr.unknown > th {
  box-shadow: inset var(--jqx-site-map-edge, 3px) 0 0 var(--jqx-text-color, #131c25);
}
jqx-site-map .jqx-site-map-table tr.selected {
  background: var(--jqx-ui-state-hover, var(--jqx-surface, #f4f6f8));
}
jqx-site-map .jqx-site-map-row-open {
  padding: 0;
  border: 0;
  background: none;
  color: var(--jqx-text-color);
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
jqx-site-map .jqx-site-map-row-open:hover,
jqx-site-map .jqx-site-map-row-open:focus-visible {
  text-decoration: underline;
}
jqx-site-map .jqx-site-map-number {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
jqx-site-map .jqx-site-map-reading {
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
jqx-site-map .jqx-site-map-state {
  padding: 0 6px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
jqx-site-map .jqx-site-map-state.alarm {
  border-color: var(--jqx-site-map-alarm);
  background: var(--jqx-site-map-alarm);
  color: var(--jqx-site-map-alarm-color);
}
jqx-site-map .jqx-site-map-state.warning {
  border-color: var(--jqx-site-map-warning);
  background: var(--jqx-site-map-warning);
  color: var(--jqx-site-map-warning-color);
}
jqx-site-map .jqx-site-map-state.offline {
  border-style: dashed;
}
jqx-site-map .jqx-site-map-state.unknown {
  border: 1px dotted var(--jqx-text-color, #131c25);
}
jqx-site-map {
  /* ── The selected site ── */
}
jqx-site-map .jqx-site-map-detail {
  min-height: 44px;
}
jqx-site-map .jqx-site-map-hint {
  margin: 0;
  padding: 12px 0;
  font-size: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-site-map .jqx-site-map-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 10px 12px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-surface, #f4f6f8);
}
jqx-site-map .jqx-site-map-card.alarm {
  box-shadow: inset var(--jqx-site-map-edge, 3px) 0 0 var(--jqx-site-map-alarm);
}
jqx-site-map .jqx-site-map-card.warning {
  box-shadow: inset var(--jqx-site-map-edge, 3px) 0 0 var(--jqx-site-map-warning);
}
jqx-site-map .jqx-site-map-card.unknown {
  box-shadow: inset var(--jqx-site-map-edge, 3px) 0 0 var(--jqx-text-color, #131c25);
}
jqx-site-map .jqx-site-map-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
jqx-site-map .jqx-site-map-popup .jqx-site-map-card-head {
  width: 100%;
}
jqx-site-map .jqx-site-map-card-name {
  font-size: 15px;
  font-weight: 600;
}
jqx-site-map .jqx-site-map-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 13px;
}
jqx-site-map .jqx-site-map-card-alarms {
  font-weight: 600;
}
jqx-site-map .jqx-site-map-card-reading {
  font-variant-numeric: tabular-nums;
}
jqx-site-map .jqx-site-map-card-text {
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-site-map .jqx-site-map-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
jqx-site-map .jqx-site-map-link {
  color: var(--jqx-primary);
  font-size: 13px;
}
jqx-site-map .jqx-site-map-close {
  width: 28px;
  height: 28px;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  border-radius: var(--jqx-border-radius, 3px);
  background: transparent;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
jqx-site-map .jqx-site-map-close:hover {
  background: var(--jqx-ui-state-hover, var(--jqx-surface, #f4f6f8));
  color: var(--jqx-text-color);
}
jqx-site-map .jqx-site-map-open {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--jqx-primary);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-primary);
  color: var(--jqx-primary-color, #fff);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
jqx-site-map .jqx-site-map-empty {
  margin: 0;
  padding: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-site-map .jqx-site-map-view:focus-visible,
jqx-site-map .jqx-site-map-row-open:focus-visible,
jqx-site-map .jqx-site-map-open:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-site-map[disabled] {
  opacity: 0.6;
  pointer-events: none;
}
jqx-site-map {
  /* Right to left: the heading, the table and the cards mirror; the map does not - geography
     and a plant's picture have no reading direction, so the markers stay where they are placed.
     A card opened on the map is text, and mirrors with the rest. */
}
jqx-site-map[right-to-left] {
  direction: rtl;
}
jqx-site-map[right-to-left], jqx-site-map:dir(rtl) {
  --jqx-site-map-edge: -3px;
}
jqx-site-map .jqx-site-map-map {
  direction: ltr;
}
jqx-site-map[right-to-left] .jqx-site-map-popup,
jqx-site-map .jqx-site-map-popup:dir(rtl) {
  direction: rtl;
}

[theme=industrial-dark] jqx-site-map,
jqx-site-map[theme=industrial-dark] {
  --jqx-site-map-tile-filter: grayscale(1) invert(0.9) brightness(0.9) contrast(0.85);
}

jqx-site-map.jqx-element {
  background: transparent;
}

@charset "UTF-8";
/* jqx-asset-card */
jqx-asset-card {
  /* Colour for what is abnormal only: a service due soon or overdue, a reading out of band, a
     machine in fault. A machine that is simply running is text. */
  --jqx-asset-card-fill: var(--jqx-primary);
  --jqx-asset-card-warning: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  --jqx-asset-card-alarm: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-asset-card-alarm-text: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  --jqx-asset-card-mono: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace);
  display: block;
  width: 360px;
  max-width: 100%;
}
jqx-asset-card .jqx-asset-card-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-surface, #f4f6f8);
}
jqx-asset-card .jqx-asset-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
jqx-asset-card .jqx-asset-card-names {
  min-width: 0;
}
jqx-asset-card .jqx-asset-card-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
jqx-asset-card .jqx-asset-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-asset-card .jqx-asset-card-meta > span:first-child {
  font-family: var(--jqx-asset-card-mono);
}
jqx-asset-card .jqx-asset-card-state {
  flex: 0 0 auto;
  padding: 1px 8px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--jqx-text-color);
}
jqx-asset-card .jqx-asset-card-state.fault {
  border-color: var(--jqx-asset-card-alarm);
  background: var(--jqx-asset-card-alarm);
  color: var(--jqx-industrial-alarm-critical-color, #fff);
}
jqx-asset-card .jqx-asset-card-state.maintenance {
  border-color: var(--jqx-asset-card-warning);
  box-shadow: inset 3px 0 0 var(--jqx-asset-card-warning);
}
jqx-asset-card .jqx-asset-card-state.offline {
  border-style: dashed;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-asset-card .jqx-asset-card-counters {
  display: flex;
  gap: 24px;
  margin: 0;
}
jqx-asset-card .jqx-asset-card-counters div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
jqx-asset-card .jqx-asset-card-counters dt {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-asset-card .jqx-asset-card-counters dd {
  margin: 0;
  font-family: var(--jqx-asset-card-mono);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
jqx-asset-card {
  /* ── Service ── */
}
jqx-asset-card .jqx-asset-card-service {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
jqx-asset-card .jqx-asset-card-service-text {
  font-size: 13px;
  font-weight: 600;
}
jqx-asset-card {
  /* check: the run-hours counter is below the last service - the hours cannot be trusted,
     so it is marked like a service coming due rather than shown as a full interval */
}
jqx-asset-card .jqx-asset-card-service.soon .jqx-asset-card-service-text,
jqx-asset-card .jqx-asset-card-service.check .jqx-asset-card-service-text,
jqx-asset-card .jqx-asset-card-service.overdue .jqx-asset-card-service-text {
  padding-left: 8px;
  border-left: 3px solid var(--jqx-asset-card-warning);
}
jqx-asset-card .jqx-asset-card-service.overdue .jqx-asset-card-service-text {
  border-left-color: var(--jqx-asset-card-alarm);
}
jqx-asset-card .jqx-asset-card-service.none .jqx-asset-card-service-text {
  font-weight: 400;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-asset-card .jqx-asset-card-bar {
  position: relative;
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: 2px;
  background: var(--jqx-background, #fff);
}
jqx-asset-card .jqx-asset-card-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--jqx-asset-card-fill);
}
jqx-asset-card .jqx-asset-card-service.soon .jqx-asset-card-fill {
  background: var(--jqx-asset-card-warning);
}
jqx-asset-card .jqx-asset-card-service.overdue .jqx-asset-card-fill {
  background: var(--jqx-asset-card-alarm);
}
jqx-asset-card .jqx-asset-card-service-detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  font-size: 11px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-asset-card {
  /* ── Condition and work orders ── */
}
jqx-asset-card .jqx-asset-card-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
jqx-asset-card .jqx-asset-card-heading {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-asset-card .jqx-asset-card-count {
  margin-left: 4px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
jqx-asset-card .jqx-asset-card-condition {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
jqx-asset-card .jqx-asset-card-condition th,
jqx-asset-card .jqx-asset-card-condition td {
  padding: 4px 0;
  border-bottom: 1px solid var(--jqx-border-light, var(--jqx-border, #ccd6e0));
  text-align: left;
  vertical-align: baseline;
}
jqx-asset-card .jqx-asset-card-condition th {
  font-weight: 400;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-asset-card .jqx-asset-card-condition tr:last-child th,
jqx-asset-card .jqx-asset-card-condition tr:last-child td {
  border-bottom: 0;
}
jqx-asset-card .jqx-asset-card-reading {
  padding-left: 8px !important;
  font-family: var(--jqx-asset-card-mono);
  font-variant-numeric: tabular-nums;
  text-align: right !important;
  white-space: nowrap;
}
jqx-asset-card .jqx-asset-card-reading-status {
  width: 1%;
  padding-left: 8px !important;
  white-space: nowrap;
}
jqx-asset-card .jqx-asset-card-flag {
  padding: 0 5px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
jqx-asset-card .jqx-asset-card-flag.warning {
  background: var(--jqx-asset-card-warning);
  color: var(--jqx-industrial-alarm-warning-color, #000);
}
jqx-asset-card .jqx-asset-card-flag.alarm {
  background: var(--jqx-asset-card-alarm);
  color: var(--jqx-industrial-alarm-critical-color, #fff);
}
jqx-asset-card .jqx-asset-card-limit {
  font-size: 11px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-asset-card .jqx-asset-card-orders {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
jqx-asset-card .jqx-asset-card-order {
  display: flex;
  flex-direction: column;
  padding: 4px 0 4px 8px;
  border-left: 3px solid var(--jqx-border, #ccd6e0);
}
jqx-asset-card .jqx-asset-card-order.high {
  border-left-color: var(--jqx-asset-card-warning);
}
jqx-asset-card .jqx-asset-card-order-open {
  padding: 0;
  border: 0;
  background: none;
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
jqx-asset-card .jqx-asset-card-order-open:hover .jqx-asset-card-order-title,
jqx-asset-card .jqx-asset-card-order-open:focus-visible .jqx-asset-card-order-title {
  text-decoration: underline;
}
jqx-asset-card .jqx-asset-card-order-id {
  font-family: var(--jqx-asset-card-mono);
  font-size: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-asset-card .jqx-asset-card-order-extra {
  font-size: 11px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-asset-card {
  /* ── Actions ── */
}
jqx-asset-card .jqx-asset-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
jqx-asset-card .jqx-asset-card-button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
jqx-asset-card .jqx-asset-card-button.primary {
  border-color: var(--jqx-primary);
  background: var(--jqx-primary);
  color: var(--jqx-primary-color, #fff);
  font-weight: 600;
}
jqx-asset-card .jqx-asset-card-button.quiet {
  border-color: transparent;
  background: transparent;
}
jqx-asset-card .jqx-asset-card-button.quiet:hover {
  border-color: var(--jqx-border, #ccd6e0);
}
jqx-asset-card .jqx-asset-card-button.danger {
  border-color: var(--jqx-text-color);
  background: var(--jqx-text-color);
  color: var(--jqx-background, #fff);
  font-weight: 600;
}
jqx-asset-card .jqx-asset-card-button[disabled] {
  opacity: 0.5;
  cursor: default;
}
jqx-asset-card .jqx-asset-card-form,
jqx-asset-card .jqx-asset-card-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
}
jqx-asset-card .jqx-asset-card-confirm {
  border-color: var(--jqx-text-color);
}
jqx-asset-card .jqx-asset-card-question {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
jqx-asset-card .jqx-asset-card-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
jqx-asset-card .jqx-asset-card-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-asset-card .jqx-asset-card-text,
jqx-asset-card .jqx-asset-card-select {
  box-sizing: border-box;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 13px;
}
jqx-asset-card .jqx-asset-card-text {
  width: 100%;
  padding: 6px 8px;
  resize: vertical;
}
jqx-asset-card .jqx-asset-card-select {
  min-height: 32px;
  padding: 2px 6px;
}
jqx-asset-card .jqx-asset-card-button:focus-visible,
jqx-asset-card .jqx-asset-card-order-open:focus-visible,
jqx-asset-card .jqx-asset-card-text:focus-visible,
jqx-asset-card .jqx-asset-card-select:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-asset-card[compact] .jqx-asset-card-container {
  gap: 8px;
  padding: 10px 12px;
}
jqx-asset-card[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

jqx-asset-card.jqx-element {
  background: transparent;
}

@charset "UTF-8";
/* jqx-touch-keyboard */
jqx-touch-keyboard {
  --jqx-touch-keyboard-key-height: 48px;
  --jqx-touch-keyboard-gap: 6px;
  --jqx-touch-keyboard-mono: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace);
  display: block;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
jqx-touch-keyboard .jqx-touch-keyboard-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-surface, #f4f6f8);
}
jqx-touch-keyboard {
  /* which field, and what it holds: on a small panel the keyboard can cover the field */
}
jqx-touch-keyboard .jqx-touch-keyboard-preview {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  overflow: hidden;
}
jqx-touch-keyboard .jqx-touch-keyboard-preview[hidden] {
  display: none;
}
jqx-touch-keyboard .jqx-touch-keyboard-field {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-touch-keyboard {
  /* the end of the text is what was just typed: a long value overflows at its start */
}
jqx-touch-keyboard .jqx-touch-keyboard-shown {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: var(--jqx-touch-keyboard-mono);
  font-size: 15px;
  white-space: pre;
}
jqx-touch-keyboard .jqx-touch-keyboard-shown.overflowing {
  justify-content: flex-end;
}
jqx-touch-keyboard .jqx-touch-keyboard-shown[hidden] {
  display: none;
}
jqx-touch-keyboard {
  /* a number touched afresh: the first key types over it, and it looks selected */
}
jqx-touch-keyboard .jqx-touch-keyboard-shown.replaced {
  flex: 0 1 auto;
  padding: 0 3px;
  border-radius: 2px;
  background: var(--jqx-primary, #0f6cbd);
  color: var(--jqx-primary-color, #fff);
}
jqx-touch-keyboard {
  /* a number outside the field's range, refused */
}
jqx-touch-keyboard .jqx-touch-keyboard-field.refused {
  font-weight: 600;
  color: var(--jqx-error, #c62828);
}
jqx-touch-keyboard {
  /* typed and outside the range: held on this line, not written into the field */
}
jqx-touch-keyboard .jqx-touch-keyboard-shown.outside {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error, #c62828));
  text-decoration: underline wavy;
  text-underline-offset: 3px;
}
jqx-touch-keyboard .jqx-touch-keyboard-keys {
  display: flex;
  flex-direction: column;
  gap: var(--jqx-touch-keyboard-gap);
}
jqx-touch-keyboard .jqx-touch-keyboard-row {
  display: flex;
  gap: var(--jqx-touch-keyboard-gap);
}
jqx-touch-keyboard {
  /* 44 px at least, for a gloved finger */
}
jqx-touch-keyboard .jqx-touch-keyboard-key {
  flex: 1 1 0;
  min-width: 0;
  min-height: max(44px, var(--jqx-touch-keyboard-key-height));
  padding: 0 4px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--jqx-border, #ccd6e0);
}
jqx-touch-keyboard .jqx-touch-keyboard-key.special {
  background: var(--jqx-ui-state-hover, var(--jqx-surface, #eef1f4));
  font-size: 15px;
}
jqx-touch-keyboard .jqx-touch-keyboard-key.primary {
  border-color: var(--jqx-primary);
  background: var(--jqx-primary);
  color: var(--jqx-primary-color, #fff);
}
jqx-touch-keyboard .jqx-touch-keyboard-key[aria-pressed=true] {
  border-color: var(--jqx-primary);
  box-shadow: inset 0 0 0 2px var(--jqx-primary);
  font-weight: 700;
}
jqx-touch-keyboard .jqx-touch-keyboard-key:active {
  transform: translateY(1px);
  box-shadow: none;
}
jqx-touch-keyboard .jqx-touch-keyboard-key:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-touch-keyboard .jqx-touch-keyboard-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
jqx-touch-keyboard .jqx-touch-keyboard-space-bar {
  display: inline-block;
  width: 40%;
  height: 3px;
  border-radius: 2px;
  background: var(--jqx-text-tertiary-color, var(--jqx-border, #ccd6e0));
  vertical-align: middle;
}
jqx-touch-keyboard[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

jqx-touch-keyboard.jqx-element {
  background: transparent;
}

/* ── Out of the way until a field is touched ── */
jqx-touch-keyboard.jqx-touch-keyboard-floating {
  position: fixed;
  z-index: 10000;
}
jqx-touch-keyboard.jqx-touch-keyboard-floating .jqx-touch-keyboard-container {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
}

jqx-touch-keyboard.jqx-touch-keyboard-floating:not(.jqx-touch-keyboard-open) {
  display: none;
}

jqx-touch-keyboard.jqx-touch-keyboard-popup {
  width: min(720px, 100vw - 16px);
}

/* across the bottom of the screen, the preview showing what is typed where the field may be covered */
jqx-touch-keyboard.jqx-touch-keyboard-docked {
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
}
jqx-touch-keyboard.jqx-touch-keyboard-docked .jqx-touch-keyboard-container {
  max-width: 980px;
  margin: 0 auto;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* the keypad: four keys wide, and big */
jqx-touch-keyboard .jqx-touch-keyboard-container.keypad .jqx-touch-keyboard-key {
  min-height: max(52px, var(--jqx-touch-keyboard-key-height));
  font-size: 22px;
}
jqx-touch-keyboard .jqx-touch-keyboard-container.keypad .jqx-touch-keyboard-key.special {
  font-size: 16px;
}

/* docked, a keypad stays a keypad: centred, not stretched across the screen */
jqx-touch-keyboard.jqx-touch-keyboard-docked .jqx-touch-keyboard-container.keypad {
  max-width: 440px;
}

jqx-touch-keyboard.jqx-touch-keyboard-popup:has(.keypad) {
  width: min(380px, 100vw - 16px);
}

@charset "UTF-8";
/* jqx-order-queue */
jqx-order-queue {
  /* The progress bar carries the accent; the only other colour is for an order that will be, or
     already is, late - that is what somebody has to act on. */
  --jqx-order-queue-fill: var(--jqx-primary);
  --jqx-order-queue-late: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  --jqx-order-queue-error: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  --jqx-order-queue-mono: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace);
  display: block;
  width: 100%;
}
jqx-order-queue .jqx-order-queue-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
jqx-order-queue .jqx-order-queue-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-order-queue {
  /* ── The order on the line ── */
}
jqx-order-queue .jqx-order-queue-current {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-surface, #f4f6f8);
}
jqx-order-queue .jqx-order-queue-current-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
jqx-order-queue .jqx-order-queue-kicker {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-order-queue .jqx-order-queue-status {
  padding: 0 6px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--jqx-text-color);
}
jqx-order-queue .jqx-order-queue-status.running {
  border-color: var(--jqx-order-queue-fill);
}
jqx-order-queue .jqx-order-queue-status.paused {
  border-style: dashed;
}
jqx-order-queue .jqx-order-queue-status.aborted {
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-order-queue .jqx-order-queue-product {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
jqx-order-queue .jqx-order-queue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-order-queue .jqx-order-queue-meta > span:first-child {
  font-family: var(--jqx-order-queue-mono);
}
jqx-order-queue .jqx-order-queue-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
jqx-order-queue .jqx-order-queue-made {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
jqx-order-queue .jqx-order-queue-percent {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-order-queue .jqx-order-queue-bar {
  position: relative;
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: 2px;
  background: var(--jqx-background, #fff);
}
jqx-order-queue .jqx-order-queue-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  background: var(--jqx-order-queue-fill);
  transition: width 0.3s ease;
}
jqx-order-queue .jqx-order-queue-projection {
  font-size: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-order-queue .jqx-order-queue-projection.late {
  padding-inline-start: 8px;
  border-inline-start: 3px solid var(--jqx-order-queue-late);
  font-weight: 600;
  color: var(--jqx-text-color);
}
jqx-order-queue .jqx-order-queue-idle {
  margin: 2px 0;
  font-size: 14px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-order-queue {
  /* ── Buttons ── */
}
jqx-order-queue .jqx-order-queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
jqx-order-queue .jqx-order-queue-button {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
jqx-order-queue .jqx-order-queue-button.primary {
  border-color: var(--jqx-primary);
  background: var(--jqx-primary);
  color: var(--jqx-primary-color, #fff);
  font-weight: 600;
}
jqx-order-queue .jqx-order-queue-button.quiet {
  border-color: transparent;
  background: transparent;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-order-queue .jqx-order-queue-button.quiet:hover {
  border-color: var(--jqx-border, #ccd6e0);
}
jqx-order-queue {
  /* the second, deliberate press of something that cannot be undone */
}
jqx-order-queue .jqx-order-queue-button.danger {
  border-color: var(--jqx-text-color);
  background: var(--jqx-text-color);
  color: var(--jqx-background, #fff);
  font-weight: 600;
}
jqx-order-queue .jqx-order-queue-button[aria-disabled=true],
jqx-order-queue .jqx-order-queue-button[disabled] {
  opacity: 0.5;
  cursor: default;
}
jqx-order-queue .jqx-order-queue-button:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-order-queue .jqx-order-queue-confirm {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--jqx-text-color);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
}
jqx-order-queue .jqx-order-queue-question {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
jqx-order-queue .jqx-order-queue-error {
  padding: 8px 12px;
  border-inline-start: 3px solid var(--jqx-order-queue-error);
  font-size: 13px;
  font-weight: 600;
  color: var(--jqx-order-queue-error);
}
jqx-order-queue .jqx-order-queue-error[hidden] {
  display: none;
}
jqx-order-queue {
  /* ── The queue ── */
}
jqx-order-queue .jqx-order-queue-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
jqx-order-queue .jqx-order-queue-heading {
  margin: 4px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-order-queue .jqx-order-queue-heading[hidden],
jqx-order-queue .jqx-order-queue-finished[hidden] {
  display: none;
}
jqx-order-queue .jqx-order-queue-heading + div + .jqx-order-queue-heading {
  margin-top: 16px;
}
jqx-order-queue .jqx-order-queue-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--jqx-border, #ccd6e0);
  background: var(--jqx-background, #fff);
  font-size: 13px;
}
jqx-order-queue .jqx-order-queue-table th[scope=col] {
  padding: 6px 10px;
  border-bottom: 1px solid var(--jqx-border, #ccd6e0);
  background: var(--jqx-surface, #f4f6f8);
  font-size: 12px;
  font-weight: 500;
  text-align: start;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-order-queue .jqx-order-queue-table td,
jqx-order-queue .jqx-order-queue-table th[scope=row] {
  padding: 8px 10px;
  border-bottom: 1px solid var(--jqx-border-light, var(--jqx-border, #ccd6e0));
  text-align: start;
  vertical-align: middle;
}
jqx-order-queue .jqx-order-queue-table th[scope=row] {
  font-weight: 400;
}
jqx-order-queue .jqx-order-queue-row-product {
  display: block;
  font-weight: 600;
}
jqx-order-queue .jqx-order-queue-row-id {
  display: block;
  font-size: 11px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-order-queue .jqx-order-queue-number,
jqx-order-queue .jqx-order-queue-due {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
jqx-order-queue .jqx-order-queue-due.late {
  box-shadow: inset 3px 0 0 var(--jqx-order-queue-late);
}
jqx-order-queue .jqx-order-queue-late-mark {
  display: block;
  font-size: 11px;
  font-weight: 600;
}
jqx-order-queue .jqx-order-queue-row-actions {
  white-space: nowrap;
  text-align: end !important;
}
jqx-order-queue .jqx-order-queue-row-actions .jqx-order-queue-button {
  min-height: 32px;
}
jqx-order-queue .jqx-order-queue-row.aborted th,
jqx-order-queue .jqx-order-queue-row.aborted td {
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-order-queue .jqx-order-queue-confirm-row > td {
  background: var(--jqx-surface, #f4f6f8);
}
jqx-order-queue .jqx-order-queue-refusal {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-order-queue .jqx-order-queue-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--jqx-border, #ccd6e0);
  font-size: 13px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-order-queue .jqx-order-queue-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
jqx-order-queue {
  /* Right to left the queue reads from the right: logical sides throughout, so it mirrors. */
}
jqx-order-queue[right-to-left] {
  direction: rtl;
}
jqx-order-queue[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

jqx-order-queue.jqx-element {
  background: transparent;
}

@charset "UTF-8";
/* jqx-downtime-log */
jqx-downtime-log {
  /* Colour for one thing: the stops still waiting for a reason, which is what the operator is
     asked to act on. A stop still going gets the warning edge. */
  --jqx-downtime-log-waiting: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  --jqx-downtime-log-waiting-text: var(--jqx-industrial-alarm-warning-text, var(--jqx-text-color));
  --jqx-downtime-log-mono: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace);
  display: block;
  width: 100%;
}
jqx-downtime-log .jqx-downtime-log-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
jqx-downtime-log .jqx-downtime-log-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 12px;
}
jqx-downtime-log .jqx-downtime-log-title {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-downtime-log .jqx-downtime-log-summary {
  flex: 1 1 auto;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-downtime-log .jqx-downtime-log-waiting {
  padding: 1px 8px;
  border: 1px solid var(--jqx-downtime-log-waiting);
  border-radius: 2px;
  font-weight: 600;
  color: var(--jqx-text-color);
}
jqx-downtime-log .jqx-downtime-log-waiting[hidden] {
  display: none;
}
jqx-downtime-log .jqx-downtime-log-error {
  padding: 8px 12px;
  border-left: 3px solid var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  font-size: 13px;
  font-weight: 600;
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
}
jqx-downtime-log .jqx-downtime-log-error[hidden] {
  display: none;
}
jqx-downtime-log .jqx-downtime-log-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}
jqx-downtime-log .jqx-downtime-log-views {
  display: flex;
  gap: 6px;
}
jqx-downtime-log .jqx-downtime-log-view {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: 14px;
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
jqx-downtime-log .jqx-downtime-log-view[aria-pressed=true] {
  border-color: var(--jqx-primary);
  background: var(--jqx-primary);
  color: var(--jqx-primary-color, #fff);
}
jqx-downtime-log .jqx-downtime-log-view-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
jqx-downtime-log .jqx-downtime-log-tools-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
jqx-downtime-log .jqx-downtime-log-export,
jqx-downtime-log .jqx-downtime-log-more {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
jqx-downtime-log .jqx-downtime-log-export:hover,
jqx-downtime-log .jqx-downtime-log-more:hover {
  background: var(--jqx-ui-state-hover, var(--jqx-surface, #f4f6f8));
}
jqx-downtime-log {
  /* the column headers order the stops */
}
jqx-downtime-log .jqx-downtime-log-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
jqx-downtime-log .jqx-downtime-log-sort:hover,
jqx-downtime-log .jqx-downtime-log-sort.on {
  color: var(--jqx-text-color);
}
jqx-downtime-log .jqx-downtime-log-arrow {
  min-width: 10px;
  font-size: 9px;
}
jqx-downtime-log .jqx-downtime-log-more-row > td {
  padding: 10px !important;
}
jqx-downtime-log .jqx-downtime-log-sort:focus-visible,
jqx-downtime-log .jqx-downtime-log-export:focus-visible,
jqx-downtime-log .jqx-downtime-log-more:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-downtime-log .jqx-downtime-log-short {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-downtime-log .jqx-downtime-log-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
}
jqx-downtime-log .jqx-downtime-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
jqx-downtime-log .jqx-downtime-log-table th[scope=col] {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 10px;
  border-bottom: 1px solid var(--jqx-border, #ccd6e0);
  background: var(--jqx-surface, #f4f6f8);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-downtime-log .jqx-downtime-log-table td,
jqx-downtime-log .jqx-downtime-log-table th[scope=row] {
  padding: 8px 10px;
  border-bottom: 1px solid var(--jqx-border-light, var(--jqx-border, #ccd6e0));
  text-align: left;
  vertical-align: baseline;
}
jqx-downtime-log .jqx-downtime-log-row.waiting > th {
  box-shadow: inset 3px 0 0 var(--jqx-downtime-log-waiting);
}
jqx-downtime-log .jqx-downtime-log-machine {
  font-weight: 600;
  white-space: nowrap;
}
jqx-downtime-log .jqx-downtime-log-from {
  font-family: var(--jqx-downtime-log-mono);
}
jqx-downtime-log .jqx-downtime-log-from,
jqx-downtime-log .jqx-downtime-log-length {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
jqx-downtime-log .jqx-downtime-log-row.ongoing .jqx-downtime-log-length {
  font-weight: 600;
}
jqx-downtime-log .jqx-downtime-log-short-mark {
  margin-left: 4px;
  font-family: var(--jqx-font-family, inherit);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-downtime-log .jqx-downtime-log-reason-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
jqx-downtime-log .jqx-downtime-log-reason {
  font-weight: 600;
}
jqx-downtime-log .jqx-downtime-log-comment {
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-downtime-log .jqx-downtime-log-by,
jqx-downtime-log .jqx-downtime-log-none {
  font-size: 11px;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-downtime-log .jqx-downtime-log-give {
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid var(--jqx-primary);
  border-radius: var(--jqx-border-radius, 3px);
  background: transparent;
  color: var(--jqx-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
jqx-downtime-log .jqx-downtime-log-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--jqx-primary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
jqx-downtime-log .jqx-downtime-log-link:hover,
jqx-downtime-log .jqx-downtime-log-link:focus-visible {
  text-decoration: underline;
}
jqx-downtime-log {
  /* ── The picker ── */
}
jqx-downtime-log .jqx-downtime-log-picker-row > td {
  padding: 4px 10px 12px;
  background: var(--jqx-surface, #f4f6f8);
}
jqx-downtime-log .jqx-downtime-log-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
jqx-downtime-log .jqx-downtime-log-legend {
  padding: 6px 0;
  font-weight: 600;
}
jqx-downtime-log .jqx-downtime-log-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
jqx-downtime-log .jqx-downtime-log-group-name {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-downtime-log .jqx-downtime-log-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
jqx-downtime-log {
  /* big enough for a gloved finger: a reason is picked standing at the machine */
}
jqx-downtime-log .jqx-downtime-log-tile {
  position: relative;
  display: inline-flex;
}
jqx-downtime-log .jqx-downtime-log-tile input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
jqx-downtime-log .jqx-downtime-log-tile span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  font-size: 13px;
}
jqx-downtime-log .jqx-downtime-log-tile input:checked + span {
  border-color: var(--jqx-primary);
  box-shadow: inset 0 0 0 1px var(--jqx-primary);
  font-weight: 600;
}
jqx-downtime-log .jqx-downtime-log-tile input:focus-visible + span {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-downtime-log .jqx-downtime-log-comment-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 520px;
  font-size: 11px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-downtime-log .jqx-downtime-log-comment-input {
  min-height: 32px;
  padding: 2px 8px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 13px;
}
jqx-downtime-log .jqx-downtime-log-actions {
  display: flex;
  gap: 8px;
}
jqx-downtime-log .jqx-downtime-log-cancel,
jqx-downtime-log .jqx-downtime-log-save {
  min-height: 34px;
  padding: 0 16px;
  border-radius: var(--jqx-border-radius, 3px);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
jqx-downtime-log .jqx-downtime-log-cancel {
  border: 1px solid var(--jqx-border, #ccd6e0);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
}
jqx-downtime-log .jqx-downtime-log-save {
  border: 1px solid var(--jqx-primary);
  background: var(--jqx-primary);
  color: var(--jqx-primary-color, #fff);
  font-weight: 600;
}
jqx-downtime-log .jqx-downtime-log-save[disabled] {
  opacity: 0.5;
  cursor: default;
}
jqx-downtime-log .jqx-downtime-log-empty {
  padding: 14px 12px;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-downtime-log .jqx-downtime-log-view:focus-visible,
jqx-downtime-log .jqx-downtime-log-give:focus-visible,
jqx-downtime-log .jqx-downtime-log-link:focus-visible,
jqx-downtime-log .jqx-downtime-log-cancel:focus-visible,
jqx-downtime-log .jqx-downtime-log-save:focus-visible,
jqx-downtime-log .jqx-downtime-log-comment-input:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-downtime-log[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

jqx-downtime-log.jqx-element {
  background: transparent;
}

@charset "UTF-8";
/* jqx-shift-log */
jqx-shift-log {
  /* One colour for the entries that matter on the next shift: the handover. Safety entries get
     the warning edge. Everything else is text on the panel, as a log should be. */
  --jqx-shift-log-handover: var(--jqx-primary);
  --jqx-shift-log-safety: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  --jqx-shift-log-error: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  --jqx-shift-log-mono: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace);
  display: block;
  width: 100%;
}
jqx-shift-log .jqx-shift-log-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
jqx-shift-log .jqx-shift-log-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 12px;
}
jqx-shift-log .jqx-shift-log-title {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-shift-log .jqx-shift-log-shift {
  flex: 1 1 auto;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-shift-log .jqx-shift-log-count {
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-shift-log {
  /* ── The box ── */
}
jqx-shift-log .jqx-shift-log-composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-surface, #f4f6f8);
}
jqx-shift-log .jqx-shift-log-composer[hidden] {
  display: none;
}
jqx-shift-log .jqx-shift-log-composer-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-shift-log .jqx-shift-log-correcting {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  font-weight: 600;
  color: var(--jqx-text-color);
}
jqx-shift-log .jqx-shift-log-correcting[hidden] {
  display: none;
}
jqx-shift-log .jqx-shift-log-text,
jqx-shift-log .jqx-shift-log-input,
jqx-shift-log .jqx-shift-log-select {
  box-sizing: border-box;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 13px;
}
jqx-shift-log .jqx-shift-log-text {
  width: 100%;
  min-height: 64px;
  padding: 8px;
  resize: vertical;
  line-height: 1.45;
}
jqx-shift-log .jqx-shift-log-composer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}
jqx-shift-log .jqx-shift-log-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-shift-log .jqx-shift-log-tag-field {
  flex: 1 1 140px;
  min-width: 0;
}
jqx-shift-log .jqx-shift-log-select,
jqx-shift-log .jqx-shift-log-input {
  /* a target of at least 30px, gloved hands included */
  min-height: 30px;
  padding: 2px 8px;
}
jqx-shift-log .jqx-shift-log-input {
  font-family: var(--jqx-shift-log-mono);
}
jqx-shift-log .jqx-shift-log-left {
  align-self: center;
  font-size: 11px;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-shift-log .jqx-shift-log-add {
  min-height: 30px;
  margin-inline-start: auto;
  padding: 0 18px;
  border: 1px solid var(--jqx-primary);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-primary);
  color: var(--jqx-primary-color, #fff);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
jqx-shift-log .jqx-shift-log-add[disabled] {
  opacity: 0.55;
  cursor: default;
}
jqx-shift-log .jqx-shift-log-error {
  font-size: 12px;
  font-weight: 600;
  color: var(--jqx-shift-log-error);
}
jqx-shift-log .jqx-shift-log-error[hidden] {
  display: none;
}
jqx-shift-log {
  /* the refused text, kept aside while another entry is typed, a press from coming back */
}
jqx-shift-log .jqx-shift-log-put-back {
  margin-inline-start: 8px;
}
jqx-shift-log .jqx-shift-log-put-back[hidden] {
  display: none;
}
jqx-shift-log .jqx-shift-log-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--jqx-primary);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
jqx-shift-log {
  /* one on every entry: present, not shouting */
}
jqx-shift-log .jqx-shift-log-correct {
  text-decoration: none;
}
jqx-shift-log .jqx-shift-log-correct:hover,
jqx-shift-log .jqx-shift-log-correct:focus-visible {
  text-decoration: underline;
}
jqx-shift-log {
  /* ── The filter, the search, the period, the export ── */
}
jqx-shift-log .jqx-shift-log-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}
jqx-shift-log .jqx-shift-log-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
jqx-shift-log .jqx-shift-log-search,
jqx-shift-log .jqx-shift-log-range,
jqx-shift-log .jqx-shift-log-export {
  box-sizing: border-box;
  min-height: 30px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 12px;
}
jqx-shift-log .jqx-shift-log-search {
  width: 170px;
  padding: 2px 8px;
}
jqx-shift-log .jqx-shift-log-range {
  padding: 2px 6px;
}
jqx-shift-log .jqx-shift-log-export {
  padding: 0 10px;
  cursor: pointer;
}
jqx-shift-log .jqx-shift-log-export:hover {
  background: var(--jqx-ui-state-hover, var(--jqx-surface, #f4f6f8));
}
jqx-shift-log .jqx-shift-log-search:focus-visible,
jqx-shift-log .jqx-shift-log-range:focus-visible,
jqx-shift-log .jqx-shift-log-export:focus-visible,
jqx-shift-log .jqx-shift-log-more:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-shift-log .jqx-shift-log-entry-text mark {
  padding: 0 1px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--jqx-primary) 22%, transparent);
  color: inherit;
}
jqx-shift-log .jqx-shift-log-more-row {
  padding: 10px 12px;
  list-style: none;
}
jqx-shift-log .jqx-shift-log-more {
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
jqx-shift-log {
  /* ── The filter ── */
}
jqx-shift-log .jqx-shift-log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
jqx-shift-log .jqx-shift-log-filter {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: 13px;
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
jqx-shift-log .jqx-shift-log-filter[aria-pressed=true] {
  border-color: var(--jqx-primary);
  background: var(--jqx-primary);
  color: var(--jqx-primary-color, #fff);
}
jqx-shift-log .jqx-shift-log-filter-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
jqx-shift-log {
  /* ── The entries ── */
}
jqx-shift-log .jqx-shift-log-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
}
jqx-shift-log .jqx-shift-log-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
jqx-shift-log .jqx-shift-log-entry {
  padding-block: 8px;
  padding-inline: 12px 10px;
  border-bottom: 1px solid var(--jqx-border-light, var(--jqx-border, #ccd6e0));
  border-inline-start: 3px solid transparent;
}
jqx-shift-log .jqx-shift-log-entry.handover {
  border-inline-start-color: var(--jqx-shift-log-handover);
}
jqx-shift-log .jqx-shift-log-entry.safety {
  border-inline-start-color: var(--jqx-shift-log-safety);
}
jqx-shift-log {
  /* an entry a later one corrects: still there, readably, but not the last word */
}
jqx-shift-log .jqx-shift-log-entry.superseded .jqx-shift-log-entry-text {
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-shift-log .jqx-shift-log-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-size: 12px;
}
jqx-shift-log .jqx-shift-log-time {
  font-family: var(--jqx-shift-log-mono);
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-shift-log .jqx-shift-log-author {
  font-weight: 600;
}
jqx-shift-log .jqx-shift-log-category {
  padding: 0 6px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-shift-log .jqx-shift-log-tag {
  font-family: var(--jqx-shift-log-mono);
  font-size: 11px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-shift-log .jqx-shift-log-correct {
  margin-inline-start: auto;
}
jqx-shift-log .jqx-shift-log-entry-text {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
jqx-shift-log .jqx-shift-log-note {
  margin: 3px 0 0;
  font-size: 11px;
  font-style: italic;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-shift-log .jqx-shift-log-divider {
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-shift-log .jqx-shift-log-empty {
  padding: 14px 12px;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-shift-log .jqx-shift-log-add:focus-visible,
jqx-shift-log .jqx-shift-log-filter:focus-visible,
jqx-shift-log .jqx-shift-log-link:focus-visible,
jqx-shift-log .jqx-shift-log-text:focus-visible,
jqx-shift-log .jqx-shift-log-input:focus-visible,
jqx-shift-log .jqx-shift-log-select:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-shift-log {
  /* Right to left the log reads from the right: logical sides throughout, so it mirrors. */
}
jqx-shift-log[right-to-left] {
  direction: rtl;
}
jqx-shift-log[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

jqx-shift-log.jqx-element {
  background: transparent;
}

/* jqx-comparison-chart */
jqx-comparison-chart {
  --jqx-comparison-chart-height: 280px;
  --jqx-comparison-chart-grid-color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
  --jqx-comparison-chart-mono: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace);
  /* The bar, limit, running-share and donut colours are read by the element from these;
     unset, it falls back to the industrial palette, so the chart follows the theme. Only the
     bars past a limit are coloured - colour on an operator screen is kept for what is wrong. */
  display: block;
  width: 100%;
  height: var(--jqx-comparison-chart-height);
}
jqx-comparison-chart .jqx-comparison-chart-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
jqx-comparison-chart .jqx-comparison-chart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
jqx-comparison-chart .jqx-comparison-chart-title {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-comparison-chart .jqx-comparison-chart-total {
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-comparison-chart .jqx-comparison-chart-plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
jqx-comparison-chart .jqx-comparison-chart-svg {
  display: block;
  overflow: visible;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
jqx-comparison-chart {
  /* the tertiary text colour, faint: the border token is close to a light panel's own colour
     and the grid vanished on it */
}
jqx-comparison-chart .jqx-comparison-chart-grid {
  stroke: var(--jqx-comparison-chart-grid-color);
  stroke-opacity: 0.35;
  stroke-width: 1;
}
jqx-comparison-chart .jqx-comparison-chart-tick {
  font-size: 11px;
  fill: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-comparison-chart .jqx-comparison-chart-name {
  fill: var(--jqx-text-color);
}
jqx-comparison-chart .jqx-comparison-chart-value {
  fill: var(--jqx-text-color);
  font-weight: 600;
}
jqx-comparison-chart {
  /* the text of a bar past the limit keeps the text colour: the bar says it, and a
     warning colour as text is below the contrast floor on a light panel */
}
jqx-comparison-chart .jqx-comparison-chart-value.unknown {
  font-weight: 400;
  fill: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-comparison-chart .jqx-comparison-chart-running {
  font-size: 11px;
  font-weight: 400;
  fill: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-comparison-chart .jqx-comparison-chart-limit {
  stroke-width: 1.5;
  stroke-dasharray: 5 3;
}
jqx-comparison-chart .jqx-comparison-chart-limit-label {
  font-size: 11px;
  fill: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-comparison-chart .jqx-comparison-chart-cumulative {
  stroke-width: 1.5;
}
jqx-comparison-chart .jqx-comparison-chart-slice {
  stroke: var(--jqx-background, #fff);
  stroke-width: 1.5;
}
jqx-comparison-chart .jqx-comparison-chart-hole {
  font-size: 15px;
  font-weight: 600;
  fill: var(--jqx-text-color);
}
jqx-comparison-chart .jqx-comparison-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 12px;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-comparison-chart {
  /* the figures, for a screen reader and a copy: off the screen, not out of the page */
}
jqx-comparison-chart .jqx-comparison-chart-table {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
jqx-comparison-chart[disabled] {
  opacity: 0.6;
}

/* .jqx-element carries the framework's own background and color at higher specificity
   than a bare tag selector, so anything that sets those has to be restated here. */
jqx-comparison-chart.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* jqx-job-panel */
jqx-job-panel {
  /* Colour marks the one row that needs attention: a job that failed. A job that ran is the
     ordinary case and says "ok" in words - on a table an operator glances at all shift, a
     column of green teaches them to stop looking. */
  --jqx-job-panel-failed-color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  --jqx-job-panel-ok-color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
  --jqx-job-panel-mono: var(--jqx-industrial-readout-font, ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace);
  display: block;
  width: 100%;
}
jqx-job-panel .jqx-job-panel-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
jqx-job-panel .jqx-job-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
jqx-job-panel .jqx-job-panel-title {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-job-panel .jqx-job-panel-count {
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-job-panel .jqx-job-panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
}
jqx-job-panel .jqx-job-panel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
jqx-job-panel .jqx-job-panel-table th[scope=col] {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-weight: 500;
  padding: 6px 10px;
  background: var(--jqx-surface, #f4f6f8);
  border-bottom: 1px solid var(--jqx-border, #ccd6e0);
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-job-panel {
  /* Baseline, so a button's words sit on the same line as the job's name beside it and a
     wrapped schedule still starts level with the rest of its row. */
}
jqx-job-panel .jqx-job-panel-table td,
jqx-job-panel .jqx-job-panel-table th[scope=row] {
  padding: 7px 10px;
  vertical-align: baseline;
  border-bottom: 1px solid var(--jqx-border-light, var(--jqx-border, #ccd6e0));
}
jqx-job-panel .jqx-job-panel-row:last-child td,
jqx-job-panel .jqx-job-panel-row:last-child th {
  border-bottom: 0;
}
jqx-job-panel .jqx-job-panel-name {
  min-width: 10ch;
  text-align: left;
  font-weight: 600;
}
jqx-job-panel {
  /* A switched-off job keeps its place and recedes. An absent job and a disabled one are
     different things, and the difference matters at three in the morning. It recedes in
     colour, not opacity: faded to 0.55 its words fell to 2.6:1, below what can be read at
     three in the morning - the secondary text colour keeps 4.5:1, and the OFF word says it. */
}
jqx-job-panel .jqx-job-panel-row.off > th,
jqx-job-panel .jqx-job-panel-row.off > td:not(.jqx-job-panel-actions),
jqx-job-panel .jqx-job-panel-row.off .jqx-job-panel-last {
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-job-panel {
  /* but not its buttons: the station still runs a switched-off job by hand, and a faded button
     reads as one that cannot be pressed */
}
jqx-job-panel .jqx-job-panel-off {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-job-panel .jqx-job-panel-bad {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--jqx-job-panel-failed-color);
}
jqx-job-panel {
  /* The schedule and the action wrap, so the table fits the panel it is given; the time of the
     last run and the buttons do not, because a broken time or a button on two lines reads worse
     than a wrapped sentence. A tag name breaks at its dots rather than off the edge. */
}
jqx-job-panel .jqx-job-panel-when {
  min-width: 12ch;
}
jqx-job-panel .jqx-job-panel-does {
  min-width: 14ch;
  font-family: var(--jqx-job-panel-mono);
}
jqx-job-panel .jqx-job-panel-tag {
  white-space: nowrap;
}
jqx-job-panel .jqx-job-panel-last {
  white-space: nowrap;
  color: var(--jqx-job-panel-ok-color);
}
jqx-job-panel .jqx-job-panel-last.failed {
  color: var(--jqx-job-panel-failed-color);
  font-weight: 600;
}
jqx-job-panel .jqx-job-panel-why {
  display: block;
  max-width: 30ch;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
jqx-job-panel {
  /* A table cell, not a flex box: display: flex takes a cell out of the table, and the row's
     rule then stops short of the buttons. */
}
jqx-job-panel .jqx-job-panel-actions {
  text-align: right;
  white-space: nowrap;
}
jqx-job-panel .jqx-job-panel-actions > button + button {
  margin-left: 6px;
}
jqx-job-panel .jqx-job-panel-run,
jqx-job-panel .jqx-job-panel-toggle {
  /* a target of at least 24 pixels (WCAG 2.2, 2.5.8) */
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-surface, #f4f6f8);
  color: var(--jqx-text-color);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
jqx-job-panel .jqx-job-panel-run {
  border-color: var(--jqx-primary);
  color: var(--jqx-primary);
  font-weight: 600;
}
jqx-job-panel .jqx-job-panel-run[disabled] {
  opacity: 0.5;
  cursor: default;
}
jqx-job-panel .jqx-job-panel-run:focus-visible,
jqx-job-panel .jqx-job-panel-toggle:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-job-panel .jqx-job-panel-empty {
  padding: 12px;
  color: var(--jqx-text-tertiary-color, var(--jqx-text-color));
}
jqx-job-panel {
  /* named for the screen reader, off the screen for everybody else */
}
jqx-job-panel .jqx-job-panel-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
jqx-job-panel .jqx-job-panel-ask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2;
}
jqx-job-panel .jqx-job-panel-ask[hidden] {
  display: none;
}
jqx-job-panel .jqx-job-panel-ask-box {
  max-width: 380px;
  padding: 14px 16px;
  border: 1px solid var(--jqx-border, #ccd6e0);
  border-radius: var(--jqx-border-radius, 3px);
  background: var(--jqx-background, #fff);
  color: var(--jqx-text-color);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
jqx-job-panel .jqx-job-panel-ask-box p {
  margin: 6px 0 12px;
  font-size: 12px;
  color: var(--jqx-text-secondary-color, var(--jqx-text-color));
}
jqx-job-panel .jqx-job-panel-ask-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
jqx-job-panel .jqx-job-panel-ask-cancel,
jqx-job-panel .jqx-job-panel-ask-confirm {
  min-height: 30px;
  padding: 0 14px;
  border-radius: var(--jqx-border-radius, 3px);
  font: inherit;
  cursor: pointer;
}
jqx-job-panel .jqx-job-panel-ask-cancel {
  border: 1px solid var(--jqx-border, #ccd6e0);
  background: var(--jqx-surface, #f4f6f8);
  color: var(--jqx-text-color);
}
jqx-job-panel .jqx-job-panel-ask-confirm {
  border: 1px solid var(--jqx-primary);
  background: var(--jqx-primary);
  color: var(--jqx-primary-color, #fff);
  font-weight: 600;
}
jqx-job-panel .jqx-job-panel-ask-cancel:focus-visible,
jqx-job-panel .jqx-job-panel-ask-confirm:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 2px;
}
jqx-job-panel[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at higher specificity
   than a bare tag selector, so anything that sets those has to be restated here. */
jqx-job-panel.jqx-element {
  background: transparent;
}

/* jqx-octave-bands */
jqx-octave-bands {
  --jqx-octave-height: 320px;
  --jqx-octave-plot-background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-octave-grid-color: var(--jqx-border);
  --jqx-octave-axis-color: var(--jqx-text-tertiary-color, var(--jqx-border));
  /* Bar, peak, limit and exceeded colours are read by the canvas from these; unset, the
     element falls back to the industrial palette so the bars match the theme. */
  display: block;
  width: 100%;
  height: var(--jqx-octave-height);
}
jqx-octave-bands .jqx-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 4px;
}
jqx-octave-bands .jqx-octave-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
jqx-octave-bands .jqx-octave-title {
  font-weight: 600;
}
jqx-octave-bands .jqx-octave-settings {
  flex: 1 1 auto;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-octave-bands {
  /* A rate nothing is analysed on, or samples that were not numbers: in the warning text
     colour of the theme (contrast-checked there), bold, so it is not read past. */
}
jqx-octave-bands .jqx-octave-warning {
  font-weight: 600;
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-text-color, inherit));
}
jqx-octave-bands {
  /* The overall level reads like the big number on a meter. */
}
jqx-octave-bands .jqx-octave-overall {
  font-size: 14px;
  font-weight: 600;
}
jqx-octave-bands .jqx-octave-exceeded {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
  border: 1px solid currentColor;
  border-radius: 2px;
}
jqx-octave-bands .jqx-octave-plot {
  position: relative;
  /* 80px when the chart has no height of its own to share out, so the plot never collapses */
  flex: 1 1 80px;
  min-height: 0;
  background: var(--jqx-octave-plot-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
}
jqx-octave-bands {
  /* Out of the flow: the canvas is sized to the plot, so the plot must not be sized by the
     canvas. In flow, its pixel height fed back into the plot's, and a chart whose own height
     was not fixed grew on every resize (a waveform graph reached 7,800px). */
}
jqx-octave-bands .jqx-octave-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
jqx-octave-bands {
  /* The band readings as text, for assistive technology; visually the bars carry them. */
}
jqx-octave-bands .jqx-octave-readout {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
jqx-octave-bands {
  /* Right to left: the text around the plot mirrors - header, legend, readout. The plot
     does not: its axes run as the data does, and the canvas text keeps its direction. */
}
jqx-octave-bands[right-to-left] .jqx-octave-header,
jqx-octave-bands[right-to-left] .jqx-octave-readout {
  direction: rtl;
}
jqx-octave-bands[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-octave-bands.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* jqx-resource-picker */
jqx-resource-picker {
  --jqx-resource-height: 34px;
  --jqx-resource-background: var(--jqx-background);
  --jqx-resource-border: var(--jqx-border);
  --jqx-resource-list-background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  display: inline-block;
  width: 320px;
  max-width: 100%;
  position: relative;
  font-family: inherit;
}
jqx-resource-picker .jqx-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
jqx-resource-picker .jqx-resource-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-resource-picker .jqx-resource-field {
  display: flex;
  align-items: stretch;
  height: var(--jqx-resource-height);
  border: 1px solid var(--jqx-resource-border);
  border-radius: var(--jqx-border-radius, 2px);
  background: var(--jqx-resource-background);
}
jqx-resource-picker .jqx-resource-field:focus-within {
  border-color: var(--jqx-primary);
  box-shadow: 0 0 0 1px var(--jqx-primary);
}
jqx-resource-picker {
  /* The interface of the resource in force, as a small tag before the name. */
}
jqx-resource-picker .jqx-resource-kind {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  margin: 4px 0 4px 4px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--jqx-primary-color, #fff);
  background: var(--jqx-primary);
}
jqx-resource-picker .jqx-resource-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--jqx-text-color);
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  outline: none;
}
jqx-resource-picker .jqx-resource-input::placeholder {
  font-family: inherit;
  color: var(--jqx-text-tertiary-color, inherit);
}
jqx-resource-picker .jqx-resource-toggle,
jqx-resource-picker .jqx-resource-refresh {
  flex: none;
  border: none;
  border-left: 1px solid var(--jqx-resource-border);
  background: transparent;
  color: var(--jqx-text-secondary-color);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
jqx-resource-picker .jqx-resource-toggle {
  width: 26px;
}
jqx-resource-picker .jqx-resource-toggle::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
jqx-resource-picker .jqx-resource-refresh {
  padding: 0 10px;
  white-space: nowrap;
}
jqx-resource-picker .jqx-resource-refresh:hover,
jqx-resource-picker .jqx-resource-toggle:hover {
  background: var(--jqx-ui-state-hover);
  color: var(--jqx-ui-state-color-hover);
}
jqx-resource-picker .jqx-resource-refresh:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: -2px;
}
jqx-resource-picker .jqx-resource-refresh[disabled] {
  opacity: 0.6;
  cursor: default;
}
jqx-resource-picker .jqx-resource-refresh[aria-busy=true]::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: jqx-resource-spin 0.8s linear infinite;
}
@keyframes jqx-resource-spin {
  to {
    transform: rotate(360deg);
  }
}
jqx-resource-picker {
  /* The list drops over what is below the field. */
}
jqx-resource-picker .jqx-resource-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  max-height: 280px;
  margin: 2px 0 0;
  padding: 4px 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--jqx-resource-border);
  border-radius: var(--jqx-border-radius, 2px);
  background: var(--jqx-resource-list-background);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
jqx-resource-picker .jqx-resource-group {
  padding: 6px 10px 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jqx-text-tertiary-color, inherit);
}
jqx-resource-picker .jqx-resource-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "name alias state" "description description description";
  column-gap: 10px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 13px;
}
jqx-resource-picker .jqx-resource-item-name {
  grid-area: name;
  font-family: Consolas, "Courier New", monospace;
}
jqx-resource-picker .jqx-resource-item-alias {
  grid-area: alias;
  font-weight: 600;
  color: var(--jqx-text-color);
}
jqx-resource-picker .jqx-resource-item-description {
  grid-area: description;
  font-size: 11px;
  color: var(--jqx-text-secondary-color);
}
jqx-resource-picker .jqx-resource-item-state {
  grid-area: state;
  white-space: nowrap;
  font-size: 11px;
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
}
jqx-resource-picker .jqx-resource-item-unavailable .jqx-resource-item-name {
  color: var(--jqx-text-secondary-color);
}
jqx-resource-picker .jqx-resource-item[aria-selected=true] {
  font-weight: 600;
}
jqx-resource-picker .jqx-resource-item-active,
jqx-resource-picker .jqx-resource-item:hover {
  background: var(--jqx-ui-state-hover);
  color: var(--jqx-ui-state-color-hover);
}
jqx-resource-picker .jqx-resource-item-custom .jqx-resource-item-name {
  font-family: inherit;
  font-style: italic;
}
jqx-resource-picker .jqx-resource-item-invalid {
  color: var(--jqx-text-tertiary-color);
  cursor: default;
}
jqx-resource-picker .jqx-resource-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--jqx-text-secondary-color);
}
jqx-resource-picker .jqx-resource-hint {
  font-size: 11px;
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
}
jqx-resource-picker {
  /* Right to left: the label, field, buttons and list mirror; a resource name keeps its own
     left-to-right order, which bidi gives an all-Latin string anyway. */
}
jqx-resource-picker[right-to-left] {
  direction: rtl;
}
jqx-resource-picker[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-resource-picker.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-resource-picker takes by default. */
jqx-resource-picker:not(:defined) {
  min-height: 54px;
}

/* jqx-polar-plot */
jqx-polar-plot {
  --jqx-polar-height: 380px;
  --jqx-polar-plot-background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-polar-grid-color: var(--jqx-border);
  --jqx-polar-axis-color: var(--jqx-text-tertiary-color, var(--jqx-border));
  /* The cursor and marker colours are read by the canvas from these; unset, the element
     falls back to the industrial palette so the marks match the theme. */
  display: block;
  width: 100%;
  height: var(--jqx-polar-height);
}
jqx-polar-plot .jqx-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 4px;
}
jqx-polar-plot .jqx-polar-header {
  font-size: 12px;
  line-height: 1.4;
}
jqx-polar-plot .jqx-polar-header:empty {
  display: none;
}
jqx-polar-plot .jqx-polar-title {
  font-weight: 600;
}
jqx-polar-plot .jqx-polar-plot {
  position: relative;
  /* 80px when the chart has no height of its own to share out, so the plot never collapses */
  flex: 1 1 80px;
  min-height: 0;
  background: var(--jqx-polar-plot-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  outline: none;
}
jqx-polar-plot .jqx-polar-plot:focus-visible {
  box-shadow: 0 0 0 2px var(--jqx-primary);
}
jqx-polar-plot {
  /* Out of the flow: the canvas is sized to the plot, so the plot must not be sized by the
     canvas. In flow, its pixel height fed back into the plot's, and a chart whose own height
     was not fixed grew on every resize (a waveform graph reached 7,800px). */
}
jqx-polar-plot .jqx-polar-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
jqx-polar-plot .jqx-polar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
jqx-polar-plot .jqx-polar-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  font-family: inherit;
  font-size: 12px;
  color: var(--jqx-text-color);
  background: transparent;
  border: 1px solid var(--jqx-border);
  border-radius: 2px;
  cursor: pointer;
}
jqx-polar-plot .jqx-polar-item:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-polar-plot .jqx-polar-item-off {
  opacity: 0.55;
}
jqx-polar-plot .jqx-polar-item-off .jqx-polar-swatch {
  background: transparent !important;
  border-color: var(--jqx-text-tertiary-color);
}
jqx-polar-plot .jqx-polar-swatch {
  width: 14px;
  height: 3px;
  border: 1px solid transparent;
  flex: none;
}
jqx-polar-plot .jqx-polar-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-polar-plot .jqx-polar-marker-row,
jqx-polar-plot .jqx-polar-cursor {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
}
jqx-polar-plot .jqx-polar-cursor-name {
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--jqx-text-tertiary-color, inherit);
}
jqx-polar-plot .jqx-polar-marker-row {
  font-weight: 600;
  color: var(--jqx-text-color);
}
jqx-polar-plot {
  /* Points without a reading: said in the text colour, not dimmed, so it is read. */
}
jqx-polar-plot .jqx-polar-gaps {
  color: var(--jqx-text-color);
}
jqx-polar-plot {
  /* Right to left: the text around the plot mirrors - header, legend, readout. The plot
     does not: its axes run as the data does, and the canvas text keeps its direction. */
}
jqx-polar-plot[right-to-left] .jqx-polar-header,
jqx-polar-plot[right-to-left] .jqx-polar-legend,
jqx-polar-plot[right-to-left] .jqx-polar-readout {
  direction: rtl;
}
jqx-polar-plot[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-polar-plot.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* jqx-bode-plot */
jqx-bode-plot {
  --jqx-bode-height: 400px;
  --jqx-bode-plot-background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-bode-grid-color: var(--jqx-border);
  --jqx-bode-axis-color: var(--jqx-text-tertiary-color, var(--jqx-border));
  /* The cursor and margin colours are read by the canvas from these; unset, the element
     falls back to the industrial palette so the marks match the theme. */
  display: block;
  width: 100%;
  height: var(--jqx-bode-height);
}
jqx-bode-plot .jqx-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 4px;
}
jqx-bode-plot .jqx-bode-header {
  font-size: 12px;
  line-height: 1.4;
}
jqx-bode-plot .jqx-bode-header:empty {
  display: none;
}
jqx-bode-plot .jqx-bode-title {
  font-weight: 600;
}
jqx-bode-plot .jqx-bode-plot {
  position: relative;
  /* 80px when the chart has no height of its own to share out, so the plot never collapses */
  flex: 1 1 80px;
  min-height: 0;
  background: var(--jqx-bode-plot-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  outline: none;
}
jqx-bode-plot .jqx-bode-plot:focus-visible {
  box-shadow: 0 0 0 2px var(--jqx-primary);
}
jqx-bode-plot {
  /* Out of the flow: the canvas is sized to the plot, so the plot must not be sized by the
     canvas. In flow, its pixel height fed back into the plot's, and a chart whose own height
     was not fixed grew on every resize (a waveform graph reached 7,800px). */
}
jqx-bode-plot .jqx-bode-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
jqx-bode-plot .jqx-bode-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
jqx-bode-plot .jqx-bode-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  font-family: inherit;
  font-size: 12px;
  color: var(--jqx-text-color);
  background: transparent;
  border: 1px solid var(--jqx-border);
  border-radius: 2px;
  cursor: pointer;
}
jqx-bode-plot .jqx-bode-item:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-bode-plot .jqx-bode-item-off {
  opacity: 0.55;
}
jqx-bode-plot .jqx-bode-item-off .jqx-bode-swatch {
  background: transparent !important;
  border-color: var(--jqx-text-tertiary-color);
}
jqx-bode-plot .jqx-bode-swatch {
  width: 14px;
  height: 3px;
  border: 1px solid transparent;
  flex: none;
}
jqx-bode-plot .jqx-bode-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-bode-plot .jqx-bode-margins,
jqx-bode-plot .jqx-bode-cursor {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
}
jqx-bode-plot .jqx-bode-margins-label,
jqx-bode-plot .jqx-bode-cursor-name {
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--jqx-text-tertiary-color, inherit);
}
jqx-bode-plot .jqx-bode-margin {
  font-weight: 600;
  color: var(--jqx-text-color);
}
jqx-bode-plot {
  /* A margin at or below zero is a loop that will oscillate: it is said, not only coloured. */
}
jqx-bode-plot .jqx-bode-margin-bad {
  color: var(--jqx-industrial-alarm-critical-text, var(--jqx-error));
}
jqx-bode-plot .jqx-bode-margin-bad::after {
  content: " !";
}
jqx-bode-plot[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-bode-plot.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* jqx-digital-waveform */
jqx-digital-waveform {
  --jqx-digital-label-background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  --jqx-digital-plot-background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-digital-grid-color: var(--jqx-border);
  --jqx-digital-axis-color: var(--jqx-text-tertiary-color, var(--jqx-border));
  /* The cursor colour is read by the canvas from this; unset, the element falls back to
     the industrial palette so the marks match the theme. */
  /* As tall as its rows: the plot sets its own height from the lines it shows. */
  display: block;
  width: 100%;
}
jqx-digital-waveform .jqx-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 4px;
}
jqx-digital-waveform .jqx-digital-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 12px;
  line-height: 1.4;
}
jqx-digital-waveform .jqx-digital-header:empty {
  display: none;
}
jqx-digital-waveform .jqx-digital-title {
  font-weight: 600;
}
jqx-digital-waveform .jqx-digital-status {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-digital-waveform {
  /* The plot takes whatever the chrome leaves. min-height: 0 is what stops a flex item
     from refusing to shrink below its content height and pushing the legend off. */
}
jqx-digital-waveform .jqx-digital-plot {
  position: relative;
  flex: none;
  background: var(--jqx-digital-plot-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  outline: none;
}
jqx-digital-waveform .jqx-digital-plot:focus-visible {
  box-shadow: 0 0 0 2px var(--jqx-primary);
}
jqx-digital-waveform .jqx-digital-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
jqx-digital-waveform .jqx-digital-cursors {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-digital-waveform .jqx-digital-cursor-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 8px;
}
jqx-digital-waveform .jqx-digital-cursor-row-active .jqx-digital-cursor-name {
  color: var(--jqx-text-color);
  font-weight: 600;
}
jqx-digital-waveform .jqx-digital-cursor-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--jqx-digital-swatch-color);
  flex: none;
}
jqx-digital-waveform .jqx-digital-cursor-delta {
  font-weight: 600;
  color: var(--jqx-text-color);
}
jqx-digital-waveform[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-digital-waveform.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-digital-waveform takes by default. */
jqx-digital-waveform:not(:defined) {
  min-height: 360px;
}

/* jqx-intensity-graph */
jqx-intensity-graph {
  --jqx-intensity-height: 360px;
  --jqx-intensity-plot-background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-intensity-grid-color: var(--jqx-border);
  --jqx-intensity-axis-color: var(--jqx-text-tertiary-color, var(--jqx-border));
  /* The cursor colour is read by the canvas from this; unset, the element falls back to
     the industrial palette so the marks match the theme. */
  display: block;
  width: 100%;
  height: var(--jqx-intensity-height);
}
jqx-intensity-graph .jqx-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 4px;
}
jqx-intensity-graph .jqx-intensity-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 12px;
  line-height: 1.4;
}
jqx-intensity-graph .jqx-intensity-header:empty {
  display: none;
}
jqx-intensity-graph .jqx-intensity-title {
  font-weight: 600;
}
jqx-intensity-graph .jqx-intensity-status {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-intensity-graph {
  /* The plot takes whatever the chrome leaves. min-height: 0 is what stops a flex item
     from refusing to shrink below its content height and pushing the legend off. */
}
jqx-intensity-graph .jqx-intensity-plot {
  position: relative;
  /* 80px when the chart has no height of its own to share out, so the plot never collapses */
  flex: 1 1 80px;
  min-height: 0;
  background: var(--jqx-intensity-plot-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  outline: none;
}
jqx-intensity-graph .jqx-intensity-plot:focus-visible {
  box-shadow: 0 0 0 2px var(--jqx-primary);
}
jqx-intensity-graph {
  /* Out of the flow: the canvas is sized to the plot, so the plot must not be sized by the
     canvas. In flow, its pixel height fed back into the plot's, and a chart whose own height
     was not fixed grew on every resize (a waveform graph reached 7,800px). */
}
jqx-intensity-graph .jqx-intensity-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
jqx-intensity-graph .jqx-intensity-cursors {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-intensity-graph .jqx-intensity-cursor-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 8px;
}
jqx-intensity-graph .jqx-intensity-cursor-row-active .jqx-intensity-cursor-name {
  color: var(--jqx-text-color);
  font-weight: 600;
}
jqx-intensity-graph .jqx-intensity-cursor-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--jqx-intensity-swatch-color);
  flex: none;
}
jqx-intensity-graph .jqx-intensity-cursor-delta {
  font-weight: 600;
  color: var(--jqx-text-color);
}
jqx-intensity-graph[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-intensity-graph.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* jqx-waveform-graph */
jqx-waveform-graph {
  --jqx-waveform-height: 360px;
  --jqx-waveform-plot-background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-waveform-grid-color: var(--jqx-border);
  --jqx-waveform-axis-color: var(--jqx-text-tertiary-color, var(--jqx-border));
  /* Cursor and annotation colours are read by the canvas from these; unset, the element
     falls back to the industrial palette so the marks match the theme. */
  display: block;
  width: 100%;
  height: var(--jqx-waveform-height);
}
jqx-waveform-graph .jqx-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 4px;
}
jqx-waveform-graph .jqx-waveform-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 12px;
  line-height: 1.4;
}
jqx-waveform-graph .jqx-waveform-header:empty {
  display: none;
}
jqx-waveform-graph .jqx-waveform-title {
  font-weight: 600;
}
jqx-waveform-graph .jqx-waveform-status {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-waveform-graph {
  /* The plot takes whatever the chrome leaves. min-height: 0 is what stops a flex item
     from refusing to shrink below its content height and pushing the legend off. */
}
jqx-waveform-graph .jqx-waveform-plot {
  position: relative;
  /* 80px when the chart has no height of its own to share out, so the plot never collapses */
  flex: 1 1 80px;
  min-height: 0;
  background: var(--jqx-waveform-plot-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  outline: none;
}
jqx-waveform-graph .jqx-waveform-plot:focus-visible {
  box-shadow: 0 0 0 2px var(--jqx-primary);
}
jqx-waveform-graph {
  /* Out of the flow: the canvas is sized to the plot, so the plot must not be sized by the
     canvas. In flow, its pixel height fed back into the plot's, and a chart whose own height
     was not fixed grew on every resize (a waveform graph reached 7,800px). */
}
jqx-waveform-graph .jqx-waveform-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
jqx-waveform-graph .jqx-waveform-legend,
jqx-waveform-graph .jqx-waveform-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
jqx-waveform-graph .jqx-waveform-item,
jqx-waveform-graph .jqx-waveform-tool {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-color);
  background: transparent;
  border: 1px solid var(--jqx-border);
  border-radius: 2px;
  cursor: pointer;
}
jqx-waveform-graph .jqx-waveform-item:focus-visible,
jqx-waveform-graph .jqx-waveform-tool:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-waveform-graph .jqx-waveform-tool {
  min-width: 28px;
  justify-content: center;
}
jqx-waveform-graph .jqx-waveform-tool[aria-pressed=true] {
  color: var(--jqx-primary-color, #fff);
  background: var(--jqx-primary);
  border-color: var(--jqx-primary);
}
jqx-waveform-graph .jqx-waveform-item-off {
  opacity: 0.55;
}
jqx-waveform-graph {
  /* The swatch shows the plot's style: a line, a row of points, a step, a bar. */
}
jqx-waveform-graph .jqx-waveform-swatch {
  position: relative;
  width: 18px;
  height: 10px;
  flex: none;
}
jqx-waveform-graph .jqx-waveform-swatch::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  height: 2px;
  background: var(--jqx-waveform-swatch-color);
}
jqx-waveform-graph .jqx-waveform-swatch-points::before {
  top: 3px;
  height: 4px;
  background: repeating-linear-gradient(to right, var(--jqx-waveform-swatch-color) 0 4px, transparent 4px 7px);
}
jqx-waveform-graph .jqx-waveform-swatch-bars::before {
  top: 0;
  height: 10px;
  background: repeating-linear-gradient(to right, var(--jqx-waveform-swatch-color) 0 4px, transparent 4px 6px);
}
jqx-waveform-graph .jqx-waveform-swatch-step::before {
  top: 1px;
  height: 8px;
  background: transparent;
  border-top: 2px solid var(--jqx-waveform-swatch-color);
  border-right: 2px solid var(--jqx-waveform-swatch-color);
  width: 50%;
}
jqx-waveform-graph .jqx-waveform-item-off .jqx-waveform-swatch::before {
  background: transparent;
  border: 1px solid var(--jqx-text-tertiary-color);
  height: 0;
}
jqx-waveform-graph .jqx-waveform-cursors {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--jqx-text-secondary-color, inherit);
}
jqx-waveform-graph .jqx-waveform-cursor-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 8px;
}
jqx-waveform-graph .jqx-waveform-cursor-row-active .jqx-waveform-cursor-name {
  color: var(--jqx-text-color);
  font-weight: 600;
}
jqx-waveform-graph .jqx-waveform-cursor-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--jqx-waveform-swatch-color);
  flex: none;
}
jqx-waveform-graph .jqx-waveform-cursor-delta {
  font-weight: 600;
  color: var(--jqx-text-color);
}
jqx-waveform-graph {
  /* Right to left: the text around the plot mirrors - header, legend, readout. The plot
     does not: its axes run as the data does, and the canvas text keeps its direction. */
}
jqx-waveform-graph[right-to-left] .jqx-waveform-header,
jqx-waveform-graph[right-to-left] .jqx-waveform-legend,
jqx-waveform-graph[right-to-left] .jqx-waveform-cursors,
jqx-waveform-graph[right-to-left] .jqx-waveform-palette {
  direction: rtl;
}
jqx-waveform-graph[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-waveform-graph.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* jqx-alarm-banner */
jqx-alarm-banner {
  --jqx-alarm-banner-blink-duration: 1.4s;
  --jqx-alarm-banner-row-gap: 16px;
  display: block;
  border: var(--jqx-border-width) solid var(--jqx-industrial-panel-border, var(--jqx-border));
  background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  color: var(--jqx-text-color);
  font-family: var(--jqx-font-family);
  font-size: var(--jqx-font-size);
}
jqx-alarm-banner .jqx-container {
  display: flex;
  flex-direction: column;
}
jqx-alarm-banner .jqx-alarm-row {
  display: flex;
  align-items: center;
  gap: var(--jqx-alarm-banner-row-gap);
  padding: 12px 16px;
  cursor: pointer;
}
jqx-alarm-banner .jqx-alarm-row + .jqx-alarm-row {
  border-top: var(--jqx-border-width) solid var(--jqx-border);
}
jqx-alarm-banner .jqx-alarm-row:hover {
  background: var(--jqx-ui-state-hover);
}
jqx-alarm-banner .jqx-alarm-empty {
  cursor: default;
}
jqx-alarm-banner .jqx-alarm-empty:hover {
  background: transparent;
}
jqx-alarm-banner .jqx-alarm-empty .jqx-alarm-severity {
  background: transparent;
  border: var(--jqx-border-width) solid var(--jqx-border);
  color: var(--jqx-text-tertiary-color);
}
jqx-alarm-banner .jqx-alarm-severity {
  flex: none;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
jqx-alarm-banner .jqx-alarm-tag {
  flex: none;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  color: var(--jqx-text-secondary-color);
}
jqx-alarm-banner .jqx-alarm-message {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
jqx-alarm-banner .jqx-alarm-time {
  flex: none;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  color: var(--jqx-text-tertiary-color);
}
jqx-alarm-banner .jqx-alarm-ack {
  flex: none;
  background: transparent;
  border: var(--jqx-border-width) solid var(--jqx-border);
  border-radius: var(--jqx-border-radius);
  color: var(--jqx-text-secondary-color);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 14px;
  text-transform: uppercase;
}
jqx-alarm-banner .jqx-alarm-ack:hover {
  background: var(--jqx-ui-state-hover);
  border-color: var(--jqx-ui-state-border-hover);
  color: var(--jqx-ui-state-color-hover);
}
jqx-alarm-banner {
  /* Severity colours fall back to the standard semantic tokens, so the banner
     is usable outside the industrial themes. */
}
jqx-alarm-banner .jqx-alarm-row[severity=critical] .jqx-alarm-severity {
  background: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  color: var(--jqx-industrial-alarm-critical-color, var(--jqx-error-color));
}
jqx-alarm-banner .jqx-alarm-row[severity=warning] .jqx-alarm-severity {
  background: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  color: var(--jqx-industrial-alarm-warning-color, var(--jqx-warning-color));
}
jqx-alarm-banner .jqx-alarm-row[severity=advisory] .jqx-alarm-severity {
  background: var(--jqx-industrial-alarm-advisory, #e5c728);
  color: var(--jqx-industrial-alarm-advisory-color, #1e1e1e);
}
jqx-alarm-banner {
  /* The whole banner takes a tint from its worst alarm, so an abnormal state
     is legible from across a control room, not just at the badge. */
}
jqx-alarm-banner[severity=critical] {
  border-color: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  background: var(--jqx-industrial-abnormal-background, var(--jqx-surface));
}
jqx-alarm-banner[severity=warning] {
  border-color: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
}
jqx-alarm-banner[severity=advisory] {
  border-color: var(--jqx-industrial-alarm-advisory, #e5c728);
}
jqx-alarm-banner {
  /* An unacknowledged critical alarm blinks until an operator responds - ISA-18.2. */
}
jqx-alarm-banner .jqx-alarm-row.jqx-blink .jqx-alarm-severity {
  animation: jqx-alarm-banner-blink var(--jqx-alarm-banner-blink-duration) step-end infinite;
}
jqx-alarm-banner {
  /* Returned to normal, not yet acknowledged: still on the banner until someone looks,
     said in words beside the severity, and not blinking. */
}
jqx-alarm-banner .jqx-alarm-state {
  flex: none;
  font-size: 11px;
  font-style: italic;
  color: var(--jqx-text-secondary-color);
  white-space: nowrap;
}
jqx-alarm-banner .jqx-alarm-row[state=rtn-unacknowledged] .jqx-alarm-message {
  font-style: italic;
}
jqx-alarm-banner {
  /* Right to left: the row reads from the right, and the arrow keys follow it. */
}
jqx-alarm-banner[right-to-left] {
  direction: rtl;
}
jqx-alarm-banner[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

@keyframes jqx-alarm-banner-blink {
  50% {
    opacity: 0.3;
  }
}
@media (prefers-reduced-motion: reduce) {
  jqx-alarm-banner .jqx-alarm-row.jqx-blink .jqx-alarm-severity {
    animation: none;
  }
}
/* .jqx-element sets background and color on every element with a higher
   specificity than a bare tag selector, so restate them with the class. */
jqx-alarm-banner.jqx-element {
  background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  color: var(--jqx-text-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-alarm-banner takes by default. */
jqx-alarm-banner:not(:defined) {
  min-height: 48px;
}

/* jqx-seven-segment */
jqx-seven-segment {
  --jqx-seven-segment-color: var(--jqx-industrial-readout-color, var(--jqx-success));
  --jqx-seven-segment-off-opacity: 0.12;
  --jqx-seven-segment-background: var(--jqx-industrial-readout-background, var(--jqx-base-900));
  --jqx-seven-segment-height: 54px;
  --jqx-seven-segment-gap: 3px;
  /* The unit is small text, which needs 4.5:1 where the digits - large shapes - need 3:1.
     The base theme's green on its readout background is 4.2:1, so the unit is printed a
     quarter of the way to white, as the legend on a meter's bezel is lighter than its LEDs. */
  --jqx-seven-segment-unit-color: color-mix(in srgb, var(--jqx-seven-segment-color) 75%, #fff);
  display: inline-block;
  padding: 8px 12px;
  background: var(--jqx-seven-segment-background);
  border: var(--jqx-border-width) solid var(--jqx-border);
  border-radius: var(--jqx-border-radius);
}
jqx-seven-segment .jqx-container {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
jqx-seven-segment {
  /* Given less width than its digits need - a readout in a narrow tile - the digits shrink
     rather than running past the edge: each glyph keeps its proportions (the SVG meets its
     box), so a smaller reading is still a whole one. With room, nothing changes. */
}
jqx-seven-segment .jqx-display {
  display: flex;
  align-items: flex-end;
  gap: var(--jqx-seven-segment-gap);
  min-width: 0;
}
jqx-seven-segment .jqx-digit {
  height: var(--jqx-seven-segment-height);
  width: calc(var(--jqx-seven-segment-height) * 0.66);
  flex: 0 1 auto;
  min-width: 0;
  display: block;
}
jqx-seven-segment .jqx-segment {
  fill: var(--jqx-seven-segment-color);
}
jqx-seven-segment .jqx-segment-off {
  opacity: var(--jqx-seven-segment-off-opacity);
}
jqx-seven-segment .jqx-unit {
  color: var(--jqx-seven-segment-unit-color);
  font-family: var(--jqx-font-family);
  font-size: calc(var(--jqx-seven-segment-height) * 0.26);
  white-space: nowrap;
}
jqx-seven-segment .jqx-unit:empty {
  display: none;
}
jqx-seven-segment[disabled] {
  opacity: 0.5;
}

/* .jqx-element sets background and color on every element with a higher
   specificity than a bare tag selector, so restate them with the class. */
jqx-seven-segment.jqx-element {
  background: var(--jqx-seven-segment-background);
  color: var(--jqx-seven-segment-color);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-seven-segment takes by default. */
jqx-seven-segment:not(:defined) {
  min-width: 119px;
  min-height: 50px;
}

/* jqx-annunciator */
jqx-annunciator {
  --jqx-annunciator-columns: 4;
  --jqx-annunciator-tile-height: 64px;
  --jqx-annunciator-gap: 6px;
  --jqx-annunciator-alarm-blink: 0.6s;
  --jqx-annunciator-ringback-blink: 1.6s;
  display: block;
}
jqx-annunciator .jqx-container {
  display: grid;
  grid-template-columns: repeat(var(--jqx-annunciator-columns), minmax(0, 1fr));
  gap: var(--jqx-annunciator-gap);
}
jqx-annunciator .jqx-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--jqx-annunciator-tile-height);
  padding: 8px 10px;
  border: var(--jqx-border-width) solid var(--jqx-border);
  border-radius: var(--jqx-border-radius);
  background: var(--jqx-industrial-panel-background, var(--jqx-surface));
  color: var(--jqx-text-tertiary-color);
  cursor: pointer;
  font-family: var(--jqx-font-family);
  text-align: center;
}
jqx-annunciator .jqx-tile-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
jqx-annunciator .jqx-tile-detail {
  font-size: 10px;
  opacity: 1;
}
jqx-annunciator {
  /* An unacknowledged alarm blinks fast, a cleared-but-unreset condition blinks
     slow, and an acknowledged alarm sits steady - the ISA-18.1 sequence. */
}
jqx-annunciator .jqx-tile[state=alarm] {
  background: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  border-color: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  color: var(--jqx-industrial-alarm-critical-color, var(--jqx-error-color));
  animation: jqx-annunciator-blink var(--jqx-annunciator-alarm-blink) step-end infinite;
}
jqx-annunciator .jqx-tile[state=ack] {
  background: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  border-color: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  color: var(--jqx-industrial-alarm-warning-color, var(--jqx-warning-color));
}
jqx-annunciator .jqx-tile[state=ringback] {
  background: transparent;
  border-color: var(--jqx-industrial-ok, var(--jqx-success));
  color: var(--jqx-industrial-ok, var(--jqx-success));
  animation: jqx-annunciator-blink var(--jqx-annunciator-ringback-blink) step-end infinite;
}
jqx-annunciator {
  /* A state word the panel does not know: not healthy-looking. Hatched and dashed, in the
     unknown colour, so it reads as "cannot say" rather than as a dark, normal tile. */
}
jqx-annunciator .jqx-tile[state=unknown] {
  border-style: dashed;
  border-color: var(--jqx-industrial-unknown, var(--jqx-border));
  color: var(--jqx-industrial-unknown-text, var(--jqx-text-secondary-color));
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--jqx-industrial-unknown, #8b98a6) 22%, transparent) 6px 8px), var(--jqx-industrial-panel-background, var(--jqx-surface));
}
jqx-annunciator {
  /* In a narrow panel the legend wraps and clips inside its tile instead of pushing the
     wall wider than its container. */
}
jqx-annunciator .jqx-tile {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}
jqx-annunciator .jqx-tile:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-annunciator {
  /* Right to left: the wall reads from the right, and the arrow keys follow it. */
}
jqx-annunciator[right-to-left] {
  direction: rtl;
}
jqx-annunciator[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

@keyframes jqx-annunciator-blink {
  50% {
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  jqx-annunciator .jqx-tile[state=alarm],
  jqx-annunciator .jqx-tile[state=ringback] {
    animation: none;
  }
}
/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-annunciator takes by default. */
jqx-annunciator:not(:defined) {
  min-height: 72px;
}

/* jqx-mimic-symbol */
jqx-mimic-symbol {
  --jqx-mimic-symbol-size: 56px;
  --jqx-mimic-fill: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-mimic-stroke: var(--jqx-text-tertiary-color);
  --jqx-mimic-detail: var(--jqx-text-tertiary-color);
  --jqx-mimic-dash: none;
  display: inline-block;
  cursor: pointer;
}
jqx-mimic-symbol .jqx-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
jqx-mimic-symbol {
  /* A symbol reports clicks, so it is keyboard-reachable and has to show where
     the focus is. The offset clears the glyph without touching the stubs,
     which are drawn outside the viewBox. */
}
jqx-mimic-symbol .jqx-container:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
jqx-mimic-symbol .jqx-mimic-glyph {
  width: var(--jqx-mimic-symbol-size);
  height: var(--jqx-mimic-symbol-size);
  line-height: 0;
}
jqx-mimic-symbol .jqx-mimic-svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Connection stubs are drawn past the edge of the viewBox so they reach
     the pipe either side however wide the layout cell is. */
  overflow: visible;
}
jqx-mimic-symbol .jqx-mimic-fill {
  fill: var(--jqx-mimic-fill);
  stroke: var(--jqx-mimic-stroke);
  stroke-width: 2.5;
  stroke-dasharray: var(--jqx-mimic-dash);
}
jqx-mimic-symbol .jqx-mimic-line {
  fill: var(--jqx-mimic-detail);
  stroke: var(--jqx-mimic-detail);
  stroke-width: 2.5;
}
jqx-mimic-symbol {
  /* Stroke-only detail. A CSS fill would override a fill="none" attribute,
     so paths that must stay open get their own class. */
}
jqx-mimic-symbol .jqx-mimic-tube {
  fill: none;
  stroke: var(--jqx-mimic-detail);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
jqx-mimic-symbol .jqx-mimic-text {
  fill: var(--jqx-mimic-detail);
  stroke: none;
  font-family: var(--jqx-font-family);
  font-size: 34px;
  font-weight: 600;
  text-anchor: middle;
}
jqx-mimic-symbol {
  /* Connection stubs run out to the edge of the box on the pipe centreline,
     so a symbol in a run joins it instead of floating beside it. */
}
jqx-mimic-symbol .jqx-mimic-stub {
  stroke: var(--jqx-mimic-pipe, var(--jqx-text-tertiary-color));
  stroke-width: 3;
  opacity: 0.55;
}
jqx-mimic-symbol .jqx-mimic-nozzle {
  fill: var(--jqx-mimic-hardware, var(--jqx-text-tertiary-color));
  stroke: none;
}
jqx-mimic-symbol .jqx-mimic-base {
  fill: var(--jqx-mimic-hardware, var(--jqx-text-tertiary-color));
  stroke: none;
  opacity: 0.8;
}
jqx-mimic-symbol {
  /* A vessel shows what is in it. */
}
jqx-mimic-symbol .jqx-mimic-vessel {
  fill: var(--jqx-mimic-vessel-empty, var(--jqx-base-200));
}
jqx-mimic-symbol .jqx-mimic-level {
  fill: var(--jqx-primary);
  opacity: 0.75;
}
jqx-mimic-symbol .jqx-mimic-label {
  color: var(--jqx-text-secondary-color);
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
jqx-mimic-symbol .jqx-mimic-value {
  color: var(--jqx-text-color);
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  white-space: nowrap;
}
jqx-mimic-symbol .jqx-mimic-label:empty,
jqx-mimic-symbol .jqx-mimic-value:empty {
  display: none;
}
jqx-mimic-symbol {
  /* State colours the symbol body. An item takes colour only when it is doing
     something the operator should notice. Running is drawn through its own tokens: the
     Industrial themes set them to a solid neutral, because running is the normal state
     and ISA-101 keeps colour for the abnormal; elsewhere they fall back to the running
     green. */
}
jqx-mimic-symbol[state=running] {
  --jqx-mimic-fill: var(--jqx-mimic-running-fill, var(--jqx-industrial-running, var(--jqx-success)));
  --jqx-mimic-stroke: var(--jqx-mimic-running-stroke, var(--jqx-industrial-running, var(--jqx-success)));
  --jqx-mimic-detail: var(--jqx-mimic-running-detail, var(--jqx-industrial-ok-color, #fff));
}
jqx-mimic-symbol[state=fault] {
  --jqx-mimic-fill: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-mimic-stroke: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-mimic-detail: var(--jqx-industrial-alarm-critical-color, #fff);
}
jqx-mimic-symbol[state=manual] {
  --jqx-mimic-stroke: var(--jqx-industrial-manual, var(--jqx-info));
  --jqx-mimic-dash: 5 3;
}
jqx-mimic-symbol[state=maintenance] {
  --jqx-mimic-stroke: var(--jqx-industrial-maintenance, var(--jqx-secondary));
  --jqx-mimic-dash: 5 3;
}
jqx-mimic-symbol[state=stopped] {
  --jqx-mimic-stroke: var(--jqx-industrial-stopped, var(--jqx-base-600));
}
jqx-mimic-symbol {
  /* No data is not stopped: the body is hollow and dotted, so it cannot be read as an
     idle machine, and the reading is struck through - it is the last value there was,
     not the value there is. */
}
jqx-mimic-symbol[state=unknown] {
  --jqx-mimic-fill: transparent;
  --jqx-mimic-stroke: var(--jqx-industrial-unknown, var(--jqx-base-600));
  --jqx-mimic-detail: var(--jqx-industrial-unknown, var(--jqx-base-600));
  --jqx-mimic-dash: 2 3;
}
jqx-mimic-symbol[state=unknown] .jqx-mimic-value {
  text-decoration: line-through;
  opacity: 0.6;
}
jqx-mimic-symbol {
  /* Quality. Bad takes the state colour away - a state from a bad signal is not a state -
     and strikes the reading; stale fades the symbol and its reading; uncertain dashes
     the outline. The mark in the corner says which without colour. */
}
jqx-mimic-symbol[quality=bad] {
  --jqx-mimic-fill: transparent;
  --jqx-mimic-stroke: var(--jqx-industrial-unknown, var(--jqx-base-600));
  --jqx-mimic-detail: var(--jqx-industrial-unknown, var(--jqx-base-600));
  --jqx-mimic-dash: 2 3;
}
jqx-mimic-symbol[quality=bad] .jqx-mimic-value {
  text-decoration: line-through;
  opacity: 0.6;
}
jqx-mimic-symbol[quality=stale] .jqx-mimic-svg > :not(.jqx-mimic-quality), jqx-mimic-symbol[quality=stale] .jqx-mimic-value {
  opacity: 0.45;
}
jqx-mimic-symbol[quality=stale] .jqx-mimic-value, jqx-mimic-symbol[quality=uncertain] .jqx-mimic-value {
  font-style: italic;
}
jqx-mimic-symbol[quality=uncertain] {
  --jqx-mimic-dash: 6 3;
}
jqx-mimic-symbol .jqx-mimic-quality-badge {
  fill: var(--jqx-text-color);
  stroke: var(--jqx-background, #fff);
  stroke-width: 2;
}
jqx-mimic-symbol .jqx-mimic-quality-mark {
  fill: none;
  stroke: var(--jqx-background, #fff);
  stroke-width: 3;
  stroke-linecap: round;
}
jqx-mimic-symbol .jqx-mimic-quality-text {
  fill: var(--jqx-background, #fff);
  font-family: var(--jqx-font-family);
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
}
jqx-mimic-symbol.jqx-mimic-selected {
  --jqx-mimic-stroke: var(--jqx-primary);
}
jqx-mimic-symbol.jqx-mimic-selected .jqx-mimic-fill {
  stroke-width: 4;
}
jqx-mimic-symbol[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background at higher specificity than a bare
   tag selector. The element sits on a diagram or inline in text, so it paints nothing of
   its own. */
jqx-mimic-symbol.jqx-element {
  background: transparent;
}

/* The running green, for a screen that is not drawn to ISA-101: put jqx-mimic-classic on
   the diagram, the page or the symbol. Specific enough to outrank the theme's tokens. */
.jqx-mimic-classic jqx-mimic-symbol[state],
jqx-mimic-symbol.jqx-mimic-classic[state] {
  --jqx-mimic-running-fill: var(--jqx-industrial-running, var(--jqx-success));
  --jqx-mimic-running-stroke: var(--jqx-industrial-running, var(--jqx-success));
  --jqx-mimic-running-detail: var(--jqx-industrial-ok-color, #fff);
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-mimic-symbol takes by default. */
jqx-mimic-symbol:not(:defined) {
  min-width: 60px;
  min-height: 76px;
}

/* jqx-pipe */
jqx-pipe {
  --jqx-pipe-color: var(--jqx-text-tertiary-color);
  --jqx-pipe-flow-color: var(--jqx-primary);
  --jqx-pipe-flow-duration: 1s;
  display: block;
}
jqx-pipe .jqx-container {
  position: relative;
  width: 100%;
  height: 100%;
}
jqx-pipe .jqx-pipe-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
jqx-pipe .jqx-pipe-path {
  stroke: var(--jqx-pipe-color);
  opacity: 0.55;
}
jqx-pipe {
  /* A flowing line is drawn as a marching dash - the clearest way to show
     direction without animating a marker along the path. */
}
jqx-pipe.jqx-pipe-flowing .jqx-pipe-path {
  stroke: var(--jqx-pipe-flow-color);
  opacity: 1;
  stroke-dasharray: 10 6;
  animation: jqx-pipe-flow var(--jqx-pipe-flow-duration) linear infinite;
}
jqx-pipe.jqx-pipe-flowing.jqx-pipe-reverse .jqx-pipe-path {
  animation-direction: reverse;
}
jqx-pipe {
  /* The direction marks: chevrons along each leg of the run, pointing the way the flow goes.
     Hidden while the dash moves; shown when it cannot (reduced motion, below). */
}
jqx-pipe .jqx-pipe-marks-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
jqx-pipe {
  /* Each leg is an inline SVG filled with a pattern of chevrons in the flow colour, sized from
     the line's thickness; a leg the flow runs back along is the same leg flipped. */
}
jqx-pipe .jqx-pipe-marks {
  display: none;
  position: absolute;
  overflow: hidden;
  color: var(--jqx-pipe-flow-color);
}
jqx-pipe .jqx-pipe-marks-right,
jqx-pipe .jqx-pipe-marks-left {
  height: var(--jqx-pipe-mark-size, 10px);
  transform: translateY(-50%);
}
jqx-pipe .jqx-pipe-marks-left {
  transform: translateY(-50%) scaleX(-1);
}
jqx-pipe .jqx-pipe-marks-down,
jqx-pipe .jqx-pipe-marks-up {
  width: var(--jqx-pipe-mark-size, 10px);
  transform: translateX(-50%);
}
jqx-pipe .jqx-pipe-marks-up {
  transform: translateX(-50%) scaleY(-1);
}

@keyframes jqx-pipe-flow {
  to {
    stroke-dashoffset: -16;
  }
}
/* Without motion a still dash says nothing about direction - forward and reverse would look
   the same. The line goes solid and the chevrons carry the direction instead. */
@media (prefers-reduced-motion: reduce) {
  jqx-pipe.jqx-pipe-flowing .jqx-pipe-path {
    animation: none;
    stroke-dasharray: none;
  }
  jqx-pipe.jqx-pipe-flowing .jqx-pipe-marks {
    display: block;
  }
}
/* .jqx-element carries the framework's own background at higher specificity than a bare
   tag selector. The element sits on a diagram or inline in text, so it paints nothing of
   its own. */
jqx-pipe.jqx-element {
  background: transparent;
}

/* Before the element is defined it holds the space it will take, so the page does not
   move when it upgrades. The size is the smallest a jqx-pipe takes by default. */
jqx-pipe:not(:defined) {
  min-height: 24px;
}

/* jqx-strip-chart */
jqx-strip-chart {
  --jqx-strip-chart-height: 260px;
  --jqx-strip-plot-background: var(--jqx-industrial-panel-header-background, var(--jqx-base-200));
  --jqx-strip-grid-color: var(--jqx-border);
  --jqx-strip-cursor-color: var(--jqx-industrial-alarm-critical, var(--jqx-error));
  --jqx-strip-scale-color: var(--jqx-text-secondary-color, var(--jqx-surface-color));
  display: block;
  width: 100%;
  height: var(--jqx-strip-chart-height);
}
jqx-strip-chart .jqx-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 4px;
}
jqx-strip-chart {
  /* The plot takes whatever the chrome leaves. min-height: 0 is what stops a flex item
     from refusing to shrink below its content height and pushing the legend off. */
}
jqx-strip-chart .jqx-strip-plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--jqx-strip-plot-background);
  border: 1px solid var(--jqx-border);
  border-radius: var(--jqx-border-radius, 2px);
  overflow: hidden;
}
jqx-strip-chart .jqx-strip-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
jqx-strip-chart .jqx-strip-paused {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 1px 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jqx-industrial-alarm-warning, var(--jqx-warning));
  border: 1px solid currentColor;
  border-radius: 2px;
  pointer-events: none;
}
jqx-strip-chart .jqx-strip-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
jqx-strip-chart {
  /* The pen's colour is on the swatch; the words are in the text colour, which a pen colour
     picked for a line on the plot cannot be relied on to match at 12px. */
}
jqx-strip-chart .jqx-strip-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
jqx-strip-chart .jqx-strip-value b {
  font-weight: 600;
}
jqx-strip-chart {
  /* "no reading", said in place of the "--" a screen reader cannot read. Off-screen
     rather than display:none, which would take it out of the accessibility tree too. */
}
jqx-strip-chart .jqx-strip-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
jqx-strip-chart {
  /* OVER / UNDER beside a reading off its pen's scale. The reading is kept; this says
     where it is. Text colours from the alarm text tokens, which hold 4.5:1 on a panel. */
}
jqx-strip-chart .jqx-strip-flag {
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--jqx-industrial-alarm-warning-text, var(--jqx-warning));
  border: 1px solid currentColor;
  border-radius: 2px;
}
jqx-strip-chart .jqx-strip-flag[hidden] {
  display: none;
}
jqx-strip-chart .jqx-strip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
jqx-strip-chart .jqx-strip-pen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  font-family: inherit;
  font-size: 12px;
  color: var(--jqx-text-color);
  background: transparent;
  border: 1px solid var(--jqx-border);
  border-radius: 2px;
  cursor: pointer;
}
jqx-strip-chart .jqx-strip-pen:focus-visible {
  outline: 2px solid var(--jqx-primary);
  outline-offset: 1px;
}
jqx-strip-chart {
  /* A hidden pen stays legible - an operator has to be able to read the label of the pen
     they just turned off in order to turn it back on. */
}
jqx-strip-chart .jqx-strip-pen-off {
  opacity: 0.55;
}
jqx-strip-chart .jqx-strip-pen-off .jqx-strip-swatch {
  background: transparent !important;
  border-color: var(--jqx-text-tertiary-color);
}
jqx-strip-chart .jqx-strip-swatch {
  width: 10px;
  height: 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  flex: none;
}
jqx-strip-chart {
  /* Right to left: the text around the plot mirrors - digital display, legend. The plot
     does not: its axes run as the data does, and the canvas text keeps its direction. */
}
jqx-strip-chart[right-to-left] .jqx-strip-readout,
jqx-strip-chart[right-to-left] .jqx-strip-legend {
  direction: rtl;
}
jqx-strip-chart[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-strip-chart.jqx-element {
  background: transparent;
  color: var(--jqx-text-color);
}

/* jqx-alarm-grid */
jqx-alarm-grid {
  --jqx-alarm-grid-height: 320px;
  display: block;
  width: 100%;
  height: var(--jqx-alarm-grid-height);
  /* State colouring follows the same ISA-101 rule as the rest of the industrial set: a row
     takes colour only while it is asking the operator for something. An acknowledged alarm
     is being handled, a shelved one was a decision, and a suppressed or out-of-service one
     is engineering intent - none of those should compete for attention with the row that
     nobody has looked at yet. */
  /* The -text variants, not the fills. A fill colour used as text lands near 3:1; these
     are the same meanings chosen to be read.

     The fallback is a literal rather than --jqx-error or --jqx-warning, because those are
     fills too - the stock warning is #fde300, which is about 1.1:1 as text on white and
     makes the returned-to-normal row all but invisible for anyone not using an industrial
     theme. */
}
jqx-alarm-grid .jqx-table-row[state=unacknowledged],
jqx-alarm-grid tr[state=unacknowledged] {
  color: var(--jqx-industrial-alarm-critical-text, #a51f1f);
  font-weight: 600;
}
jqx-alarm-grid {
  /* Unacknowledged rows take the colour of their priority, not all the same red: a
     priority 4 drawn exactly like a priority 1 tells the operator nothing about which to
     take first. 4 and above keep the body text colour; bold and the marker carry them. */
}
jqx-alarm-grid tr[state=unacknowledged][priority="2"] {
  color: var(--jqx-industrial-alarm-warning-text, #7d4a00);
}
jqx-alarm-grid tr[state=unacknowledged][priority="3"] {
  color: var(--jqx-industrial-alarm-advisory-text, #6b5600);
}
jqx-alarm-grid tr[state=unacknowledged][priority="4"] {
  color: inherit;
}
jqx-alarm-grid {
  /* The priority marker: a shape and a colour per priority, so priority is told apart
     without relying on colour alone - square 1, triangle 2, diamond 3, circle 4. The colour
     is drawn only while the alarm is abnormal (unacknowledged, acknowledged and still
     active, or returned to normal and not yet acknowledged); a shelved, suppressed,
     out-of-service or normal row keeps the shape in grey (ISA-101). */
}
jqx-alarm-grid tr[priority] td[data-field=priority]::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.45em;
  vertical-align: -0.05em;
  background: var(--jqx-industrial-unknown, #8b98a6);
  box-sizing: border-box;
}
jqx-alarm-grid tr[priority="2"] td[data-field=priority]::before {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
jqx-alarm-grid tr[priority="3"] td[data-field=priority]::before {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
jqx-alarm-grid tr[priority="4"] td[data-field=priority]::before {
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--jqx-industrial-unknown, #8b98a6);
}
jqx-alarm-grid tr[priority="1"]:is([state=unacknowledged], [state=acknowledged], [state=rtn-unacknowledged]) td[data-field=priority]::before {
  background: var(--jqx-industrial-alarm-critical, #c62828);
}
jqx-alarm-grid tr[priority="2"]:is([state=unacknowledged], [state=acknowledged], [state=rtn-unacknowledged]) td[data-field=priority]::before {
  background: var(--jqx-industrial-alarm-warning, #d57d14);
}
jqx-alarm-grid tr[priority="3"]:is([state=unacknowledged], [state=acknowledged], [state=rtn-unacknowledged]) td[data-field=priority]::before {
  background: var(--jqx-industrial-alarm-advisory, #e8c033);
}
jqx-alarm-grid tr[priority="4"]:is([state=unacknowledged], [state=acknowledged], [state=rtn-unacknowledged]) td[data-field=priority]::before {
  border-color: var(--jqx-industrial-alarm-advisory-text, #6b5600);
}
jqx-alarm-grid {
  /* The counts strip: the whole list's states, above the rows. */
}
jqx-alarm-grid .jqx-alarm-grid-counts {
  position: sticky;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 6px var(--jqx-table-cell-padding, 12px);
  border-bottom: var(--jqx-border-width, 1px) solid var(--jqx-border);
  background: var(--jqx-surface, var(--jqx-background));
  color: var(--jqx-surface-color, var(--jqx-text-color));
  font-family: var(--jqx-font-family);
  font-size: calc(var(--jqx-font-size) - 1px);
}
jqx-alarm-grid .jqx-alarm-grid-count b {
  font-variant-numeric: tabular-nums;
}
jqx-alarm-grid .jqx-alarm-grid-count[state=unacknowledged]:not(.jqx-alarm-grid-count-zero) b {
  color: var(--jqx-industrial-alarm-critical-text, #a51f1f);
}
jqx-alarm-grid .jqx-alarm-grid-count[state=rtn-unacknowledged] b {
  color: var(--jqx-industrial-alarm-warning-text, #7d4a00);
}
jqx-alarm-grid {
  /* The state wraps onto a second line rather than truncating: "Returned to normal,
     unacknowledged" in italics did not fit even the full 250 px, and it is the state that
     matters most. Compact columns also give up a little padding. */
}
jqx-alarm-grid[compact-columns] {
  --jqx-table-cell-padding: 8px;
}
jqx-alarm-grid tr[row-id] td[data-field=state] {
  white-space: normal;
}
jqx-alarm-grid {
  /* Returned to normal but never acknowledged. It is no longer urgent - the condition has
     gone - but it must stay visible and distinct, because it is the state that hides an
     intermittent fault when an implementation drops it off the summary. */
}
jqx-alarm-grid .jqx-table-row[state=rtn-unacknowledged],
jqx-alarm-grid tr[state=rtn-unacknowledged] {
  color: var(--jqx-industrial-alarm-warning-text, #7d4a00);
  font-style: italic;
}
jqx-alarm-grid .jqx-table-row[state=shelved],
jqx-alarm-grid .jqx-table-row[state=suppressed],
jqx-alarm-grid .jqx-table-row[state=out-of-service],
jqx-alarm-grid tr[state=shelved],
jqx-alarm-grid tr[state=suppressed],
jqx-alarm-grid tr[state=out-of-service] {
  color: var(--jqx-industrial-unknown-text, var(--jqx-text-secondary-color));
  font-style: italic;
}
jqx-alarm-grid[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* .jqx-element carries the framework's own background and color at specificity 0,1,0,
   which beats a bare tag selector - so anything setting those has to be restated here. */
jqx-alarm-grid.jqx-element {
  background: var(--jqx-background);
  color: var(--jqx-text-color);
}