/* BEGIN STYLESHEET */
.ia_inputField {
font-size: 1rem;
}

/* Overrides the default scrollbar styles */
.psc-nav::-webkit-scrollbar {
	width: 3px;
	scrollbar-width: thin;
	scrollbar-color: var(--neutral-20) var(--neutral-90);
}

.psc-nav::-webkit-scrollbar-track {
	background: transparent;
}

.psc-nav::-webkit-scrollbar-thumb {
	background: var(--neutral-50);
	border-radius: 1px;
}

.psc-nav::-webkit-scrollbar-thumb:hover {
	background: var(--neutral-70);
}

/* Keyframes for the continuous flip animation */
@keyframes flipHorizontalContinuous {
    0%, 100% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(-1);
    }
}

/* Class to apply the continuous flip animation */
.psc-flip-horizontal-continuous {
    animation: flipHorizontalContinuous 3.2s ease-in-out infinite;
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.psc-fade-in-animation {
  animation-name: fadeIn;
  animation-duration: 1.4s; /* Adjust the time as needed */
  animation-fill-mode: forwards; /* Keeps the element at opacity 1 after animation ends */
  animation-iteration-count: 1; /* Run only once */
  animation-timing-function: ease-in-out; /* Adds the ease-in-out style */
}

.psc-artek\/effect\/interactive:hover {
	--container-bg: var(--neutral-30);
	box-shadow: var(--boxShadow2);
	cursor: pointer;
	background-color: var(--container-bg);
}
.psc-artek\/effect\/active {
	box-shadow: var(--boxShadow--inset);
	cursor: pointer;
}

.psc-experimental .ia_table__body__row--odd {
	background-color: transparent !important;
}
.psc-experimental .ia_table__body__row--even {
	background-color: transparent !important;
}
.psc-experimental .ia_table__headContainer, .ia_table__footContainer {
	box-shadow: none;
}
.psc-experimental .ia_table__header {
	border-bottom: 1px solid var(--border);
}
.psc-experimental .ia_tableComponent {
	border: none;
}

.popup-header.ia_popup__header {
	text-align: center;
}


@keyframes flash-fill {
  0%   { fill: currentColor; }    /* uses element's color */
  50%  { fill: var(--flash-color); }
  100% { fill: currentColor; }
}
.psc-artek\/effect\/flash-fill {
	--flash-color: transparent;
	animation: flash-fill 0.8s steps(1, end) infinite;
}

@keyframes pulse-fill {
  0%, 100% { fill: currentColor; }
  50%      { fill: transparent; }
}
.psc-artek\/effect\/pulse-fill {
  --pulse-color: #ffb300;
  animation: pulse-fill 1.2s ease-in-out infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.psc-artek\/effect\/rotating {
  --rotate-speed: 3s; /* default */
  animation: rotate var(--rotate-speed) linear infinite;
}

/* Speed variations */
.psc-artek\/effect\/rotating-fast {
  --rotate-speed: 1.5s;
}

.psc-artek\/effect\/rotating-medium {
  --rotate-speed: 2s;
}

.psc-artek\/effect\/rotating-slow {
  --rotate-speed: 2.5s;
}

.psc-calendar-category-instance > .view-parent {
	flex: 1 0 auto !important;
}

.psc-tbl-reveal {
  transform-origin: left top;
  transform: scale(0.6) rotate(-2deg) translateX(-20px);
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.42,0,0.58,1),
    opacity 0.9s ease 0.15s;  /* fade lags 150 ms */
}

.psc-on {
  transform: scale(1) rotate(0deg) translateX(0);
  opacity: 1;
}











/* =============================================================================
   ARTEK RESPONSIVE NAV — STYLESHEET
   Ignition Perspective 8.3 | Artek Design System
   =============================================================================

   TABLE OF CONTENTS
   -----------------
   1. Nav Tokens (Layer 2 — semantic aliases for nav-specific values)
   2. Dock Layout (push/cover geometry — alterDock() owns all sizing)
   3. Top Bar
   4. Nav Container
   5. Nav Logo
   6. Nav Link
   7. Nav Section
   8. Nav Scrollbar
   9. Responsive Overrides (breakpoint-scoped behavior)

   BREAKPOINTS (for reference — mirrored in alterDock() script logic)
   ------------------------------------------------------------------
   Mobile  : < 768px    — cover mode, dock hidden when closed
   Tablet  : 768–1024px — cover mode, icon strip always visible
   Desktop : > 1024px   — push mode, respects session.custom.navOpen

   CLASS NAMING CONVENTION
   -----------------------
   Perspective automatically adds psc- to the root element of each embedded
   view. Classes set via style bindings on the root element are NOT prefixed.
   Classes set on child elements are also NOT prefixed.

   psc- prefix applied by Perspective to view root wrappers:
     psc-nav, psc-nav-open, psc-topbar, psc-nav-link,
     psc-nav-section, psc-nav-button

   Classes set via style.classes bindings (no psc- prefix):
     nav-section-open  — modifier on Nav Section Tree root
     selected          — modifier on Nav Link root
     not-a-link        — modifier on Nav Link root
     selected-parent   — modifier on Nav Link root

   Classes on child elements within views (no psc- prefix):
     nav-icon, nav-label, nav-arrow, nav-arrow-hidden
     nav-logo-area, nav-logo-1, nav-logo-2, nav-repeater
   ============================================================================= */


/* =============================================================================
   1. NAV TOKENS
   ============================================================================= */

:root {
    --nav-open-width:        260px;
    --nav-closed-width:      56px;
    --topbar-height:         48px;
    --nav-link-height:       40px;
    --nav-icon-size:         40px;

    --nav-padding-x:         var(--space-xs);
    --nav-gap:               var(--space-xs);
    --nav-link-px:           var(--space-xs);

    --nav-bg:                var(--surface-0);
    --nav-border:            var(--border-default);
    --nav-color:             var(--text-primary);
    --nav-link-hover-bg:     color-mix(in srgb, var(--callToAction) 30%, transparent);
    --nav-link-hover-color:  var(--text-primary);
    --nav-link-active-bg:    var(--color-primary);
    --nav-link-active-color: var(--text-on-color);
    --nav-section-bg:        color-mix(in srgb, var(--surface-2) 70%, transparent);
    --topbar-bg:             var(--surface-1);
    --topbar-color:          var(--text-primary);
    --topbar-border:         var(--border-default);

    --nav-transition:        width 0.22s ease-in-out,
                             opacity 0.15s ease-in-out,
                             transform 0.22s ease-in-out;
    --nav-label-transition:  opacity 0.12s ease-in-out 0.1s;

    --z-topbar:    100;
    --z-nav:        90;
    --z-nav-cover: 200;
}


/* =============================================================================
   2. DOCK LAYOUT
   ============================================================================= */

.psc-nav {
    width: 100% !important;
    height: 100% !important;
}


/* =============================================================================
   3. TOP BAR
   ============================================================================= */

.psc-topbar {
    height: var(--topbar-height);
    background-color: var(--topbar-bg);
    color: var(--topbar-color);
    border-bottom: 1px solid var(--topbar-border);
    padding: 0 var(--space-sm);
    gap: var(--space-sm);
    overflow: visible;
    z-index: var(--z-topbar);
}

.psc-nav-button {
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--nav-color);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out,
                color 0.15s ease-in-out;
    flex-shrink: 0;
}

.psc-nav-button:hover {
    background-color: var(--nav-link-hover-bg);
    color: var(--nav-link-hover-color);
}

.psc-nav-button:active {
    background-color: var(--nav-link-active-bg);
    color: var(--nav-link-active-color);
}


/* =============================================================================
   4. NAV CONTAINER
   ============================================================================= */

.psc-nav {
    background-color: var(--nav-bg);
    border-right: 1px solid var(--nav-border);
    color: var(--nav-color);
    padding: var(--nav-padding-x);
    gap: var(--nav-gap);
    overflow-x: hidden;
    overflow-y: auto;
    flex-shrink: 0;
    transition: background-color 0.15s ease-in-out,
                color            0.15s ease-in-out;
}

/* Hover-to-expand visual effects — desktop only.
   Dock resizing via onMouseEnter/onMouseLeave → alterDock().
   Section 9 suppresses these on tablet/mobile. */
.psc-nav:not(.psc-nav-open):hover .psc-nav-label,
.psc-nav:not(.psc-nav-open):hover .psc-nav-arrow {
    opacity: 1;
    transition: var(--nav-label-transition);
}

.psc-nav:not(.psc-nav-open):hover .psc-nav-logo-2 {
    max-width: 200px;
    opacity: 1;
}

.psc-nav:not(.psc-nav-open):hover .psc-nav-logo-1 {
    max-width: 0;
    opacity: 0;
}


/* =============================================================================
   5. NAV LOGO
   ============================================================================= */

.psc-nav-logo-area {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.psc-nav-logo-1 {
    flex-shrink: 0;
    transition: max-width 0.18s ease-in-out 0.14s,
                opacity    0.18s ease-in-out 0.14s;
}

.psc-nav-logo-2 {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
}

.psc-nav-open .psc-nav-logo-2 {
    max-width: 200px;
    opacity: 1;
    transition: max-width 0.2s ease-in-out 0.12s,
                opacity    0.2s ease-in-out 0.12s;
}


/* =============================================================================
   6. NAV LINK
   ============================================================================= */

.psc-nav-link {
    height: var(--nav-link-height);
    min-height: var(--nav-link-height);
    border-radius: var(--radius-sm);
    color: var(--nav-color);
    padding: 0 var(--nav-link-px);
    gap: 0;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out,
                color            0.15s ease-in-out;
}

.psc-nav-link .psc-nav-icon {
    width: var(--nav-icon-size);
    min-width: var(--nav-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.psc-nav-link .psc-nav-label {
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--font-sm);
    flex-grow: 1;
    transition: opacity 0.1s ease-in-out;
}

.psc-nav-link .psc-nav-arrow {
    width: var(--nav-icon-size);
    min-width: var(--nav-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity   0.1s ease-in-out,
                transform 0.2s ease-in-out;
}

/* showArrow=false — zero width, no hit area, stays hidden regardless of nav state */
.psc-nav-arrow.psc-nav-arrow-hidden {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
    overflow: hidden;
}

/* Labels and arrows visible when nav is pinned open —
   scoped to section headers only via :not(.psc-nav-arrow-hidden) */
.psc-nav-open .psc-nav-link .psc-nav-label {
    opacity: 1;
    transition: var(--nav-label-transition);
}

.psc-nav-open .psc-nav-link .psc-nav-arrow:not(.psc-nav-arrow-hidden) {
    opacity: 1;
    transition: var(--nav-label-transition);
}

/* Hover — same scope for arrow */
.psc-nav:not(.psc-nav-open):hover .psc-nav-label {
    opacity: 1;
    transition: var(--nav-label-transition);
}

.psc-nav:not(.psc-nav-open):hover .psc-nav-arrow:not(.psc-nav-arrow-hidden) {
    opacity: 1;
    transition: var(--nav-label-transition);
}

.psc-nav-link:hover {
    background-color: var(--nav-link-hover-bg);
    color: var(--nav-link-hover-color);
}

.psc-nav-link.psc-selected {
    background-color: var(--nav-link-active-bg);
    color: var(--nav-link-active-color);
    font-weight: 600;
}

.psc-nav-link.psc-selected:hover {
    background-color: var(--nav-link-active-bg);
    color: var(--nav-link-active-color);
}

.psc-nav:not(.psc-nav-open) .psc-nav-link.psc-selected-parent {
    background-color: var(--nav-link-active-bg);
    color: var(--nav-link-active-color);
}

.psc-nav-link.psc-not-a-link {
    cursor: default;
}

.psc-nav-link.psc-not-a-link:hover {
    background-color: transparent;
    color: var(--nav-color);
}

.psc-nav:not(.psc-nav-open) .psc-not-a-link {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s ease-in-out,
                opacity    0.1s ease-in-out;
}

.psc-nav-open .psc-not-a-link,
.psc-nav:not(.psc-nav-open):hover .psc-not-a-link {
    max-height: var(--nav-link-height);
    opacity: 1;
    transition: max-height 0.2s ease-in-out,
                opacity    0.15s ease-in-out 0.1s;
}


/* =============================================================================
   7. NAV SECTION
   ============================================================================= */

.psc-nav-section {
    overflow: hidden;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}

.psc-nav-open .psc-nav-section.psc-nav-section-open,
.psc-nav:not(.psc-nav-open):hover .psc-nav-section.psc-nav-section-open {
    background-color: var(--nav-section-bg);
    padding-bottom: var(--nav-gap);
}

/* Arrow rotation when section open */
.psc-nav-section.psc-nav-section-open .psc-nav-link .psc-nav-arrow {
    transform: rotate(90deg);
}

/* Child repeater */
.psc-nav-section .psc-nav-repeater {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out,
                opacity    0.15s ease-in-out;
    gap: var(--nav-gap);
}

.psc-nav-open .psc-nav-section.psc-nav-section-open .psc-nav-repeater,
.psc-nav:not(.psc-nav-open):hover .psc-nav-section.psc-nav-section-open .psc-nav-repeater {
    max-height: 800px;
    opacity: 1;
    transition: max-height 0.35s ease-in-out,
                opacity    0.2s ease-in-out 0.1s;
}

.psc-nav-section .psc-nav-repeater .psc-nav-link {
    padding-left: calc(var(--nav-icon-size) + var(--nav-link-px));
}

.psc-nav-section .psc-nav-repeater .psc-nav-link .psc-nav-icon {
    display: none;
}

/* Tree — max-height:0 removes from layout when closed */
.psc-nav-section .tree {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out,
                opacity    0.15s ease-in-out;
}

.psc-nav-open .psc-nav-section.psc-nav-section-open .tree,
.psc-nav:not(.psc-nav-open):hover .psc-nav-section.psc-nav-section-open .tree {
    max-height: 800px;
    opacity: 1;
    transition: max-height 0.35s ease-in-out,
                opacity    0.2s ease-in-out 0.1s;
}

.psc-nav .tree .node-wrapper {
    display: block;
}

.psc-nav .ia_treeComponent__node {
    border-radius: var(--radius-sm);
    color: var(--nav-color);
    cursor: pointer;
    font-size: var(--font-sm);
}

.psc-nav .tree-row {
    margin-bottom: var(--space-xs);
}

.psc-nav .ia_treeComponent__node:hover {
    color: var(--nav-link-hover-color);
    background-color: var(--nav-link-hover-bg);
    transition: background-color 0.15s ease-in-out,
                color            0.15s ease-in-out;
}

.psc-nav .ia_treeComponent__node--selected {
    background-color: var(--nav-link-active-bg);
    color: var(--nav-link-active-color);
}

.psc-nav .ia_treeComponent__node .tree-item {
    height: var(--nav-link-height) !important;
}

/* FIX: match tree item label font size to nav link labels */
.psc-nav .ia_treeComponent__node .tree-item-label {
    font-size: var(--font-sm);
    font-weight: normal;
}

.psc-nav .ia_treeComponent__alignmentGuide,
.psc-nav .terminal-node .ia_treeComponent__node__icon {
    display: none;
}

.psc-nav .ia_treeComponent__node .node-icon,
.psc-nav .ia_treeComponent__node .expand-icon {
    fill: var(--nav-color);
}

.psc-nav .ia_treeComponent__node:hover .node-icon,
.psc-nav .ia_treeComponent__node:hover .expand-icon {
    fill: var(--nav-link-hover-color);
}

.psc-nav .ia_treeComponent__node--selected .node-icon,
.psc-nav .ia_treeComponent__node--selected .expand-icon {
    fill: var(--nav-link-active-color);
}


/* =============================================================================
   8. NAV SCROLLBAR
   ============================================================================= */

.psc-nav::-webkit-scrollbar {
    width: 3px;
}

.psc-nav::-webkit-scrollbar-track {
    background: transparent;
}

.psc-nav::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 40%, transparent);
    border-radius: var(--radius-full);
}

.psc-nav::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}


/* =============================================================================
   9. RESPONSIVE OVERRIDES
   ============================================================================= */

/* Tablet: manually offset content to clear icon strip */
@media (min-width: 768px) and (max-width: 1024px) {
    .center.view-parent {
        margin-left: var(--nav-closed-width) !important;
        transition: margin-left 0.22s ease-in-out !important;
    }
}

/* Mobile: no offset */
@media (max-width: 767px) {
    .center.view-parent {
        margin-left: 0 !important;
    }
}

/* Tablet + Mobile: suppress hover-to-expand visual effects */
@media (max-width: 1024px) {
    .psc-nav:not(.psc-nav-open):hover .psc-nav-label,
    .psc-nav:not(.psc-nav-open):hover .psc-nav-arrow {
        opacity: 0;
        transition: none;
    }

    .psc-nav:not(.psc-nav-open):hover .psc-nav-logo-1 {
        max-width: unset;
        opacity: 1;
    }

    .psc-nav:not(.psc-nav-open):hover .psc-nav-logo-2 {
        max-width: 0;
        opacity: 0;
    }

    .psc-nav:not(.psc-nav-open):hover .psc-not-a-link {
        max-height: 0;
        opacity: 0;
    }

    .psc-nav:not(.psc-nav-open):hover .psc-nav-section.psc-nav-section-open .psc-nav-repeater {
        max-height: 0;
        opacity: 0;
    }
}











/* ============================================================
   ARTEK DESIGN SYSTEM — stylesheet.css

   ARCHITECTURE:
   - Layer 1: Raw tokens      (space, radius, font, shadow scales)
   - Layer 2: Semantic aliases (map Perspective vars -> our names)
   - Layer 3: Component tokens (consumed by style classes only)

   CORE RULE:
   Base classes own complete, reusable property sets. Modifier classes
   primarily update tokens, but selected modifiers also re-apply their final
   property directly so they produce visible output without requiring a base
   class. This is intentional for Perspective, where developers compose
   classes onto arbitrary components rather than authored HTML.

   Classes that re-apply properties directly:
     palette/dark, palette/light      -- re-apply background and color
     variant/soft, variant/solid      -- re-apply background (and color for solid)
     state/active                     -- re-applies background
     shape/square, rounded, pill      -- re-apply border-radius
     elevation/raised, overlay, inset -- re-apply box-shadow

   All other modifiers remain token-only and require a consuming class such as
   component/card, layout/padding, typography/*, or another re-applying class
   to produce visible output.

   component/card resets --comp-bg to var(--surface-1) before consuming it.
   This breaks inherited tint from a parent variant/soft, ensuring nested cards
   always start from a clean surface unless they explicitly opt into a fill
   treatment.

   state/interactive is a special case -- it declares hover, active, and
   focus-visible property rules directly because pseudo-states cannot be driven
   by token inheritance alone.

   FOLDER STRUCTURE:
   component/   card, button, section-header
   layout/      padding, padding-x, padding-y, gap, spacer, flush, divider
   palette/     neutral, primary, info, success, warning, danger, dark, light
   shape/       square, rounded, pill
   size/        xs, sm, md, lg, xl, 2xl
   typography/  body, strong, label, kpi, mono,
                h1, h2, h3,
                one-line, two-line, three-line,
                muted, secondary, align-*
   variant/     soft, solid, outlined, accent, callout, ghost
   elevation/   raised, overlay, inset
   bg/          root, base, nested, sunken
   state/       interactive, disabled, active, no-focus, pulse
   popup/       auto-height, auto-width

   COMPOSITION MODEL:

   1. COMPONENT-FIRST
      Use component/card when you want the design system to provide the full
      reusable surface primitive: background, color, font size, border radius,
      and shadow.

        component/card  size/sm  palette/info  variant/soft

      component/card is the canonical starting point for cards, panels,
      buttons, badges, KPI tiles, alerts, and any small composed surface where
      design-system spacing is desirable.

   2. STYLE-FIRST / NO-BASE
      Use no-base composition when the target Perspective component already
      owns the layout/structure and you only want a visual treatment.

        palette/info     variant/soft  shape/rounded
        palette/primary  variant/callout
        variant/outlined shape/rounded
        state/interactive  layout/padding  layout/gap  size/sm

      No-base composition is preferred for existing Perspective wrappers,
      headers, rows, tab items, shells, structural zones, and components where
      component/card would introduce unwanted padding, gap, or layout effects.

   COMPONENTS:
   card    -- universal surface. No border by default.
              Resets --comp-bg to var(--surface-1) before consuming it, so
              nested cards are never tinted by a parent variant/soft.
              Defaults to size/sm spacing and rounded corners, with a default
              shadow (shadow-sm). Compose size/* to override the density
              register. Compose elevation/* to upgrade the shadow treatment.
              Add variant/outlined to opt into a visible border.
              Pill/badge pattern: card + size/xs + shape/pill.
   button  -- base button surface. Token-driven; participates in size/*,
              palette/*, variant/*, and state/interactive composition.

   Borders are opt-in via variant/outlined.
   Corners are composable via shape/*.
   Shadow is present by default on component/card; elevation/* upgrades it.

   COMPOSING WITHOUT A BASE CLASS:
   Because selected modifiers re-apply their final property, visual treatments
   can be applied directly to arbitrary Perspective components.

     palette/warning  variant/soft  shape/rounded
     variant/outlined shape/rounded
     palette/dark     shape/square

   Add layout classes only when spacing is needed:

     palette/warning  variant/soft  shape/rounded  layout/padding  size/sm

   size/* remains token-only. It scales spacing, typography, border radius,
   and accent width for consuming classes, but it does not directly apply
   padding, gap, font-size, or radius by itself.

   SIZE/* DESIGN INTENT:
   size/* sets --comp-font-size, --comp-border-radius, --comp-accent-width,
   --comp-padding, and --comp-gap together as a coordinated density register.
   Padding and gap intentionally share the same scale value. When a component
   genuinely needs mismatched padding and gap at the same DOM level, wrap the
   children in a separate container with its own size class rather than
   splitting the size token. Splitting size/* into independent gap and padding
   overrides would require independent font-size and radius overrides too,
   collapsing the system into a utility-class model with a different philosophy.

   VARIANT AXES (composable, not mutually exclusive):
   Fill:
     soft     -- tinted bg: 15% accent mixed into --surface-1.
                 Re-applies background directly; works without a base class.
     solid    -- full accent bg, --text-on-color text. Use sparingly.
                 Re-applies background and color directly; works without a base class.
     ghost    -- transparent background, no border. Use for icon buttons and
                 nav items that should be visually weightless.
   Border:
     outlined -- perimeter border at --comp-border-subtle strength (40% accent).
                 Compose with variant/accent to upgrade to full strength.
   Foreground + border upgrade:
     accent   -- upgrades --comp-border-subtle to full accent strength.
                 Also sets text and label color to accent. Compose with
                 typography roles, outlined surfaces, or callouts.
   Accent strip:
     callout  -- thick left border strip at accent color. Composes freely with
                 any fill variant. Use with layout/padding for no-base callouts
                 or with component/card for full alert/card treatments.

   SHAPE AXIS (composable, orthogonal to variant):
   No shape class  -- size-appropriate border radius from size/* when consumed
                      by component/card or another consuming class.
   shape/square    -- sets --comp-border-radius to 0 and re-applies border-radius.
   shape/rounded   -- re-applies the current --comp-border-radius.
                      Use when you want the size/default radius to become visible
                      without requiring component/card.
   shape/pill      -- sets --comp-border-radius to radius-full and re-applies
                      border-radius.

   DIRECTIONAL PADDING:
   layout/padding-x -- zeros --comp-padding-y; consuming padding becomes x-only.
   layout/padding-y -- zeros --comp-padding-x; consuming padding becomes y-only.
   Both work on component/card and layout/padding because those classes read
   --comp-padding-y / --comp-padding-x at paint time. Compose with size/*:
     component/card  size/md  layout/padding-x   => padding: 0 16px
     layout/padding  size/sm  layout/padding-y   => padding: 8px 0

   LAYOUT UTILITIES:
   layout/divider -- standalone 1px separator line using --comp-border-subtle.
                     Structural, not a surface component. Works in both flex
                     row (renders as a vertical line) and flex column (horizontal).
   layout/spacer  -- margin-left: auto. Pushes sibling content to the right
                     in a flex row. Use on the element that should float right,
                     or on an empty spacer element between two groups.
   layout/flush   -- padding: 0 !important. Zeroes inherited padding from a
                     parent layout/padding or component/card. Use on tab children
                     and embedded views where padding must be removed.
                     PENDING: consider also clearing box-shadow here.

   ELEVATION AXIS:
   elevation/raised   -- subtle shadow; use for cards above the page background.
   elevation/overlay  -- stronger shadow; use for popups, modals, and tooltips.
   elevation/inset    -- inset shadow; use for recessed wells, tag readback
                         fields, and embedded process values that signal live data.
   All elevation/* classes declare box-shadow directly and work without a base
   class. component/card has a default shadow (shadow-sm). Compose elevation/*
   to upgrade.

	bg/* vs elevation/*:
   bg/* controls which surface layer the background color comes from — a depth
   hierarchy (root → base → nested → sunken). elevation/* controls box-shadow
   to express how high an element sits above the page. They are orthogonal:
   a bg/nested element can have elevation/overlay, for example.

   bg/* vs variant fill:
   bg/* and variant/soft or variant/solid are mutually exclusive fill strategies.
   variant/soft and variant/solid both appear later in the cascade order than bg/*
   (variant > bg), so either will overwrite the bg/* paint entirely, making the
   bg class a no-op. Use one or the other — never both on the same element.

   bg/* and palette/*:
   palette/* sets --comp-accent only. On a bg/* element with no variant, the
   accent has no effect on the background — it only affects borders (outlined,
   callout) and text (accent). This is a valid composition if you need a specific
   surface depth with accent-colored borders or labels:

     artek/bg/nested  artek/palette/primary  artek/variant/outlined  artek/shape/rounded

   palette/dark and palette/light are a special case: they set --comp-bg directly
   and repaint the background themselves. bg/* appears later in the cascade
   (palette < bg), so bg/* will override palette/dark or palette/light. Composing
   them is not meaningful and should be avoided.

   SIZE AXIS:
   size/* sets --comp-font-size, --comp-border-radius, --comp-accent-width,
   --comp-padding, and --comp-gap together as a coordinated scale. One size
   class proportionally scales consuming classes, but size/* does not directly
   apply those properties by itself.

   Size/padding/gap reference:
     size/xs  →  4px   padding/gap,  5px  radius,  font-xs
     size/sm  →  8px   padding/gap,  5px  radius,  font-sm
     size/md  →  10px  padding/gap,  8px  radius,  font-md
     size/lg  →  16px  padding/gap,  16px radius,  font-lg
     size/xl  →  24px  padding/gap,  16px radius,  font-xl
     size/2xl →  40px  padding/gap,  16px radius,  font-2xl

   TYPOGRAPHY ROLES (pick one per element):
   body      -- 400 weight, composable with size, palette, accent
   strong    -- 700 weight, no uppercase, composable with size, palette, accent
   label     -- 700 weight, uppercase, letter-spacing, composable
   kpi       -- 700 weight, tabular-nums, composable
   mono      -- monospace, tabular-nums, composable

   HEADING PRESETS (self-contained, do not compose with size/*):
   h1      -- display font, font-4xl, bold, uppercase, letter-spacing.
   h2      -- display font, font-3xl, bold, uppercase, letter-spacing.
   h3      -- display font, font-2xl, bold, uppercase, letter-spacing.
   All three consume --comp-label-color, so they respond correctly to
   variant/accent, variant/solid, palette/dark, and palette/light on a parent.
   Font size is hard-declared; size/* has no effect on heading elements.
   Set --font-display on :root to override the display font per project.
   Default: "Agency FB".

   TYPOGRAPHY MODIFIERS (additive):
   muted       -- --comp-color-muted; adapts to palette/dark and palette/light
   secondary   -- --comp-color-secondary; adapts to palette/dark and palette/light

   TEXT OVERFLOW UTILITIES:
   one-line   -- caps text to one line; overflowing text is replaced with an
                 ellipsis. Use on any single-line label or value that may overflow
                 its container.
   two-line   -- caps text to two lines with ellipsis on the last line.
   three-line -- caps text to three lines with ellipsis on the last line.
   All three include min-width: 0 to prevent flex container blowout.

   LABEL COLOR:
   typography/label consumes --comp-label-color which defaults to --text-primary.
   variant/accent, variant/solid, palette/dark, and palette/light all override
   --comp-label-color so label text adopts the correct color on those surfaces.
   typography/h1, h2, and h3 consume --comp-label-color by the same mechanism.

   FOCUS STYLES:
   state/interactive includes a :focus-visible ring using --comp-focus-ring-color.
   This provides keyboard navigation feedback without affecting mouse/touch
   interaction. palette/dark and palette/light override the ring color token for
   appropriate contrast on those surfaces. Use state/no-focus on elements that
   are focusable but should never show a ring (e.g. touch-only controls).

   Z-INDEX SCALE:
   Use the --z-* tokens for all stacking contexts. Never hardcode z-index values.
     --z-base:     0     (in-flow content)
     --z-raised:   1     (cards, sticky headers that sit above flow)
     --z-dropdown: 100   (dropdowns, select menus)
     --z-overlay:  200   (drawers, side panels)
     --z-modal:    300   (modal dialogs)
     --z-toast:    400   (notifications, toasts)
     --z-tooltip:  500   (tooltips — always topmost)

   DEFAULT BEHAVIOR:
   component/card resets --comp-bg to var(--surface-1) on every instance,
   breaking any tint inherited from a parent variant/soft. It gives a clean
   surface, sm spacing, rounded corners, and a default shadow (shadow-sm).
   palette/* sets --comp-accent only; the accent color has no visible effect
   until a variant (soft, solid, outlined, callout, or accent) is also applied.

   COMMON PATTERNS:

   Card / panel:
     component/card  size/md
     component/card  variant/outlined  size/md
     component/card  elevation/raised  size/md

   Existing wrapper with visual surface only:
     variant/outlined  shape/rounded
     palette/neutral   variant/soft  shape/rounded
     palette/dark      shape/square

   Inline alert / callout:
     component/card  palette/info     variant/soft  variant/callout  size/sm
     component/card  palette/warning  variant/soft  variant/callout  size/sm
     component/card  palette/danger   variant/soft  variant/callout  size/sm

   Minimal callout on an existing wrapper:
     palette/primary  variant/callout
     palette/warning  variant/callout
     palette/danger   variant/callout

   Badge / pill:
     component/card  size/xs  shape/pill  palette/success  variant/solid
     component/card  size/xs  shape/pill  palette/warning  variant/soft
     component/card  size/xs  shape/pill  palette/neutral  variant/outlined

   List shell:
     variant/outlined  shape/rounded

   List row:
     state/interactive  layout/padding  layout/gap  size/sm

   Tab item:
     component/card  state/interactive  size/sm
     component/card  palette/primary  variant/soft  state/active  size/sm

   Existing tab item / no-base active state:
     palette/primary  variant/soft  state/active  shape/rounded

   Dark header / structural zone:
     palette/dark  shape/square
     palette/dark  layout/padding  layout/gap  size/sm  shape/square

   KPI tile:
     component/card  variant/outlined  size/md

   KPI value:
     typography/kpi  size/xl  palette/success  variant/accent

   Section title:
     typography/label  size/sm  palette/primary  variant/accent

   Typography:
     typography/body    size/sm
     typography/strong  size/md
     typography/label   size/xs
     typography/mono    size/sm
     typography/kpi     size/xl
     typography/h1
     typography/h2
     typography/h3

   Text overflow:
     typography/one-line
     typography/two-line
     typography/three-line

   Spacer / flush / divider:
     layout/spacer   (margin-left: auto — floats right sibling)
     layout/flush    (padding: 0 !important — removes inherited padding)
     layout/divider  (1px separator line)

   CASCADE ORDER — right side wins over left side:
     layout  <  component  <  typography  <  size  <  palette  <  variant  <  elevation  <  bg  <  shape  <  state
   ============================================================ */


/* ============================================================
   LAYER 1 -- RAW TOKENS
   ============================================================ */

:root {

	/* --- Space scale --- */
	--space-xs:  4px;
	--space-sm:  8px;
	--space-md:  10px;
	--space-lg:  16px;
	--space-xl:  24px;
	--space-2xl: 40px;
	--space-3xl: 64px;

	/* --- Radius scale --- */
	--radius-none: 0px;
	--radius-sm:   5px;
	--radius-md:   8px;
	--radius-lg:   16px;
	--radius-full: 9999px;

	/* --- Border widths --- */
	--border-width-xs: 1px;
	--border-width-sm: 2px;
	--border-width-md: 3px;
	--border-width-lg: 4px;
	--border-width-xl: 5px;

	/* --- Font size scale --- */
	--font-xs:  0.625rem;  /* 10px */
	--font-sm:  0.75rem;   /* 12px */
	--font-md:  0.875rem;  /* 14px */
	--font-lg:  1rem;      /* 16px */
	--font-xl:  1.25rem;   /* 20px */
	--font-2xl: 1.75rem;   /* 28px */
	--font-3xl: 2.5rem;    /* 40px */
	--font-4xl: 3.5rem;    /* 56px */

	/* 1.25 is consistent across fonts and avoids browser-dependent variance.
	   --leading-relaxed is for mono roles only. */
	--leading-normal:  1.5;
	--leading-relaxed: 1.75;

	/* --- Font weights --- */
	--weight-regular: 400;
	--weight-medium:  500;
	--weight-bold:    700;

	/* --- Transitions --- */
	--transition-fast:   80ms ease;
	--transition-normal: 150ms ease;
	--transition-slow:   300ms ease;

	/* --- Opacity --- */
	--opacity-disabled: 0.40;
	--opacity-muted:    0.60;

	/* --- Z-index scale ---
	   Always use these tokens. Never hardcode z-index values. */
	--z-base:     0;
	--z-raised:   1;
	--z-dropdown: 100;
	--z-overlay:  200;
	--z-modal:    300;
	--z-toast:    400;
	--z-tooltip:  500;

}


/* ============================================================
   LAYER 1.5 -- PERSPECTIVE VARIABLE OVERRIDES
   ============================================================ */

:root {
/*  --white: rgba(255, 255, 255, 0.90);*/
/*  --container: var(--neutral-10);*/
/*  --containerRoot: var(--neutral-20);*/
/*	--callToAction: rgb(22, 160, 133);*/
}


/* ============================================================
   LAYER 2 -- SEMANTIC ALIASES
   ============================================================ */

:root {

	--surface-0: var(--containerRoot);
	--surface-1: var(--container);
	--surface-2: var(--containerNested);
	--surface-3: var(--neutral-40);

	--surface-dark:  #161616;
	--surface-light: #f0f0f0;

	--text-primary:   var(--label);
	--text-secondary: var(--neutral-70);
	--text-muted:     var(--neutral-60);
	--text-on-color:  var(--white);
	--text-disabled:  var(--label--disabled);

	--border-subtle:  var(--neutral-40);
	--border-default: var(--border);
	--border-strong:  var(--neutral-60);

	--shadow-none:  none;
	--shadow-sm:    var(--boxShadow1);
	--shadow-md:    var(--boxShadow2);
	--shadow-lg:    var(--boxShadow4);
	--shadow-xl:    rgba(0,0,0,0.19) 0px 10px 20px, rgba(0,0,0,0.23) 0px 6px 6px;
	--shadow-inset: var(--boxShadow--inset);

	--color-neutral: var(--neutral-50);
	--color-primary: var(--callToAction);
	--color-info:    var(--info);
	--color-success: var(--success);
	--color-warning: var(--warning);
	--color-danger:  var(--error);

	--color-dark:         var(--surface-dark);
	--color-dark-hover:   rgba(255, 255, 255, 0.08);
	--color-dark-active:  rgba(255, 255, 255, 0.15);
	--color-dark-border:  rgba(255, 255, 255, 0.12);
	--color-dark-muted:   rgba(255, 255, 255, 0.55);
	--color-dark-text:    var(--white);

	--color-light:        var(--surface-light);
	--color-light-hover:  rgba(0, 0, 0, 0.06);
	--color-light-active: rgba(0, 0, 0, 0.12);
	--color-light-border: rgba(0, 0, 0, 0.10);
	--color-light-muted:  rgba(0, 0, 0, 0.50);
	--color-light-text:   #161616;

}


/* ============================================================
   LAYER 3 -- COMPONENT TOKENS
   ============================================================ */

:root {

	--comp-bg:        var(--surface-1);
	--comp-bg-hover:  var(--surface-2);
	--comp-bg-active: var(--surface-3);
	--comp-bg-hover-base: var(--surface-1);
	--comp-hover-color: var(--comp-accent);

	--comp-accent: var(--border-default);

	--comp-border-width:  var(--border-width-xs);
	--comp-border-radius: var(--radius-md);
	--comp-accent-width:  var(--border-width-lg);

	/* --comp-border-subtle is a derived token that lazily re-evaluates
	   --comp-accent via CSS custom property inheritance. When a palette class
	   sets --comp-accent on a descendant element, --comp-border-subtle
	   automatically resolves to the new accent at that element. This is
	   intentional and relies on CSS var() being resolved at use time. */
	--comp-border-subtle: color-mix(in srgb, var(--comp-accent) 40%, transparent);

	--comp-color:           var(--text-primary);
	--comp-color-muted:     var(--text-muted);
	--comp-color-secondary: var(--text-secondary);
	--comp-font-size:       var(--font-md);
	--comp-line-height:     var(--leading-normal);
	--comp-label-color:     var(--text-primary);
	--comp-hover-mix:  15%;
	--comp-active-mix: 25%;

	--comp-padding:   var(--space-md);
	--comp-padding-x: var(--comp-padding);
	--comp-padding-y: var(--comp-padding);
	--comp-gap:       var(--space-md);

	--comp-shadow:     var(--shadow-none);
	--comp-transition: var(--transition-normal);

	/* Focus ring color — overridden by palette/dark and palette/light for
	   appropriate contrast on those surfaces. */
	--comp-focus-ring-color:  var(--comp-accent);
	--comp-focus-ring-offset: var(--surface-1);

}


/* ============================================================
   STYLE CLASSES
   ============================================================ */


/* ------------------------------------------------------------
   layout/
   ------------------------------------------------------------ */

.psc-artek\/layout\/padding {
	padding: var(--comp-padding-y) var(--comp-padding-x);
}

.psc-artek\/layout\/padding-x {
	--comp-padding-y: 0;
}

.psc-artek\/layout\/padding-y {
	--comp-padding-x: 0;
}

.psc-artek\/layout\/gap {
	gap: var(--comp-gap);
}

/* Structural separator. Works in flex row (vertical line) and flex column
   (horizontal line) by setting both border-bottom and border-left. */
.psc-artek\/layout\/divider {
	border-bottom: 1px solid var(--comp-border-subtle);
	border-left:   1px solid var(--comp-border-subtle);
	flex-shrink:   0;
	align-self:    stretch;
}

/* Pushes following sibling content to the end of a flex row */
.psc-artek\/layout\/spacer {
	margin-left: auto !important;
}

/* Zeroes padding; use on tab children or embedded views.
   PENDING: consider also clearing box-shadow here. */
.psc-artek\/layout\/flush {
	padding: 0 !important;
}


/* ------------------------------------------------------------
   component/
   ------------------------------------------------------------ */

.psc-artek\/component\/card {
	--comp-bg:            var(--surface-1);
	--comp-shadow:        var(--shadow-sm);
	--comp-border-radius: var(--radius-sm);
	--comp-font-size:     var(--font-sm);
	--comp-gap:           var(--space-sm);
	--comp-padding:       var(--space-sm);
	--comp-padding-x:     var(--space-sm);
	--comp-padding-y:     var(--space-sm);

	background:    var(--comp-bg);
	border-radius: var(--comp-border-radius);
	box-shadow:    var(--comp-shadow);
	color:         var(--comp-color);
	font-size:     var(--comp-font-size);
	gap:           var(--comp-gap);
	padding:       var(--comp-padding-y) var(--comp-padding-x);

	.psc-artek\/typography\/label {
		color:          var(--comp-label-color);
		font-size:      var(--comp-font-size);
		font-weight:    var(--weight-bold);
		letter-spacing: 0.05em;
		line-height:    var(--comp-line-height);
		text-transform: uppercase;
	}

}

.psc-artek\/component\/section-header {
	--comp-bg:        color-mix(in srgb, var(--comp-accent) 25%, transparent);
	--comp-font-size: var(--font-sm);

	background:     var(--comp-bg);
	padding:        var(--comp-padding);
	gap:            var(--comp-gap);
	color:          var(--comp-label-color);
	font-size:      var(--comp-font-size);
	font-weight:    var(--weight-bold);
	letter-spacing: 0.05em;
	line-height:    var(--comp-line-height);
	text-transform: uppercase;
}

/* Token-driven button surface. Participates in size/*, palette/*, variant/*,
   and state/interactive composition. Border color and text inherit from
   --comp-border-subtle and --comp-color so palette/* sets the accent
   and variant/* controls the fill treatment. */
.psc-artek\/component\/button {
	--comp-border-width: 0px;

	background:    var(--comp-bg);
	border:        var(--comp-border-width) solid var(--comp-border-subtle);
	border-radius: var(--comp-border-radius);
	color:         var(--comp-color);
	fill:          var(--comp-color);
	font-size:     var(--comp-font-size);
	font-weight:   var(--weight-bold);
	outline:       none;
	box-shadow:    none !important;
	padding:       var(--comp-padding-y) var(--comp-padding-x);
	gap:           var(--comp-gap);
}

.psc-artek\/component\/button:focus-visible {
	outline:        2px solid var(--comp-focus-ring-color);
	outline-offset: 2px;
}

.psc-artek\/component\/button:disabled {
	opacity:        var(--opacity-disabled);
	pointer-events: none;
}


/* ------------------------------------------------------------
   typography/
   ------------------------------------------------------------ */

.psc-artek\/typography\/body {
	font-size:   var(--comp-font-size);
	font-weight: var(--weight-regular);
	line-height: var(--comp-line-height);
}

.psc-artek\/typography\/strong {
	font-size:   var(--comp-font-size);
	font-weight: var(--weight-bold);
	line-height: var(--comp-line-height);
}

.psc-artek\/typography\/label {
	color:          var(--comp-label-color);
	font-size:      var(--comp-font-size);
	font-weight:    var(--weight-bold);
	letter-spacing: 0.05em;
	line-height:    var(--comp-line-height);
	text-transform: uppercase;
}

.psc-artek\/typography\/kpi {
	font-size:            var(--comp-font-size);
	font-variant-numeric: tabular-nums;
	font-weight:          var(--weight-bold);
	line-height:          var(--comp-line-height);
}

.psc-artek\/typography\/mono {
	font-family:          monospace;
	font-size:            var(--comp-font-size);
	font-variant-numeric: tabular-nums;
	line-height:          var(--leading-relaxed);
}

.psc-artek\/typography\/muted     { 
	--comp-label-color: var(--comp-color-muted);
	color: var(--comp-color-muted);    
}
.psc-artek\/typography\/secondary { 
	--comp-label-color: var(--comp-color-secondary);
	color: var(--comp-color-secondary); 
}

.psc-artek\/typography\/align-center { text-align: center; }
.psc-artek\/typography\/align-right  { text-align: right;  }

.psc-artek\/typography\/h1 {
	color:          var(--comp-label-color);
	font-family:    var(--font-display, "Agency FB"), sans-serif;
	font-size:      var(--font-4xl);
	font-weight:    var(--weight-bold);
	letter-spacing: 0.05em;
	line-height:    var(--leading-normal);
	text-transform: uppercase;
}

.psc-artek\/typography\/h2 {
	color:          var(--comp-label-color);
	font-family:    var(--font-display, "Agency FB"), sans-serif;
	font-size:      var(--font-3xl);
	font-weight:    var(--weight-bold);
	letter-spacing: 0.05em;
	line-height:    var(--leading-normal);
	text-transform: uppercase;
}

.psc-artek\/typography\/h3 {
	color:          var(--comp-label-color);
	font-family:    var(--font-display, "Agency FB"), sans-serif;
	font-size:      var(--font-2xl);
	font-weight:    var(--weight-bold);
	letter-spacing: 0.05em;
	line-height:    var(--leading-normal);
	text-transform: uppercase;
}

/* Caps text to one line; overflow replaced with an ellipsis.
   min-width: 0 prevents flex container blowout. */
.psc-artek\/typography\/one-line {
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
	min-width:     0;
}

/* Caps text to two lines; last line ends with an ellipsis. */
.psc-artek\/typography\/two-line {
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
	min-width:          0;
}

/* Caps text to three lines; last line ends with an ellipsis. */
.psc-artek\/typography\/three-line {
	display:            -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
	min-width:          0;
}


/* ------------------------------------------------------------
   size/
   ------------------------------------------------------------ */

.psc-artek\/size\/xs {
	--comp-accent-width:  var(--border-width-sm);
	--comp-border-radius: var(--radius-sm);
	--comp-font-size:     var(--font-xs);
	--comp-gap:           var(--space-xs);
	--comp-padding:       var(--space-xs);
	--comp-padding-x:     var(--space-xs);
	--comp-padding-y:     var(--space-xs);
}

.psc-artek\/size\/sm {
	--comp-accent-width:  var(--border-width-md);
	--comp-border-radius: var(--radius-sm);
	--comp-font-size:     var(--font-sm);
	--comp-gap:           var(--space-sm);
	--comp-padding:       var(--space-sm);
	--comp-padding-x:     var(--space-sm);
	--comp-padding-y:     var(--space-sm);
}

.psc-artek\/size\/md {
	--comp-accent-width:  var(--border-width-md);
	--comp-border-radius: var(--radius-md);
	--comp-font-size:     var(--font-md);
	--comp-gap:           var(--space-md);
	--comp-padding:       var(--space-md);
	--comp-padding-x:     var(--space-md);
	--comp-padding-y:     var(--space-md);
}

.psc-artek\/size\/lg {
	--comp-accent-width:  var(--border-width-lg);
	--comp-border-radius: var(--radius-lg);
	--comp-font-size:     var(--font-lg);
	--comp-gap:           var(--space-lg);
	--comp-padding:       var(--space-lg);
	--comp-padding-x:     var(--space-lg);
	--comp-padding-y:     var(--space-lg);
}

.psc-artek\/size\/xl {
	--comp-accent-width:  var(--border-width-xl);
	--comp-border-radius: var(--radius-lg);
	--comp-font-size:     var(--font-xl);
	--comp-gap:           var(--space-xl);
	--comp-padding:       var(--space-xl);
	--comp-padding-x:     var(--space-xl);
	--comp-padding-y:     var(--space-xl);
}

.psc-artek\/size\/xxl {
	--comp-accent-width:  var(--border-width-xl);
	--comp-border-radius: var(--radius-lg);
	--comp-font-size:     var(--font-2xl);
	--comp-gap:           var(--space-2xl);
	--comp-padding:       var(--space-2xl);
	--comp-padding-x:     var(--space-2xl);
	--comp-padding-y:     var(--space-2xl);
}


/* ------------------------------------------------------------
   palette/
   ------------------------------------------------------------ */

.psc-artek\/palette\/neutral { --comp-accent: var(--color-neutral); }
.psc-artek\/palette\/primary { --comp-accent: var(--color-primary); }
.psc-artek\/palette\/info    { --comp-accent: var(--color-info);    }
.psc-artek\/palette\/success { --comp-accent: var(--color-success); }
.psc-artek\/palette\/warning { --comp-accent: var(--color-warning); }
.psc-artek\/palette\/danger  { --comp-accent: var(--color-danger);  }

.psc-artek\/palette\/dark {
	--comp-accent:            var(--color-dark-border);
	--comp-bg:                var(--color-dark);
	--comp-bg-hover:          var(--color-dark-hover);
	--comp-bg-active:         var(--color-dark-active);
	--comp-color:             var(--color-dark-text);
	--comp-color-muted:       var(--color-dark-muted);
	--comp-color-secondary:   rgba(255, 255, 255, 0.75);
	--comp-label-color:       var(--color-dark-text);
	--comp-focus-ring-color:  rgba(255, 255, 255, 0.80);
	--comp-focus-ring-offset: var(--color-dark);
	--comp-bg-hover-base: 	  var(--color-dark);
	background:               var(--comp-bg);
	color:                    var(--comp-color);
}

.psc-artek\/palette\/light {
	--comp-accent:            var(--color-light-border);
	--comp-bg:                var(--color-light);
	--comp-bg-hover:          var(--color-light-hover);
	--comp-bg-active:         var(--color-light-active);
	--comp-color:             var(--color-light-text);
	--comp-color-muted:       var(--color-light-muted);
	--comp-color-secondary:   rgba(0, 0, 0, 0.65);
	--comp-label-color:       var(--color-light-text);
	--comp-focus-ring-color:  rgba(0, 0, 0, 0.60);
	--comp-focus-ring-offset: var(--color-light);
	--comp-bg-hover-base: var(--color-light);
	background:               var(--comp-bg);
	color:                    var(--comp-color);
}


/* ------------------------------------------------------------
   variant/
   ------------------------------------------------------------ */

/* Mixes accent into --surface-1 (not transparent) for a consistent tint
   that renders correctly over any background. */
.psc-artek\/variant\/soft {
	--comp-bg:            color-mix(in srgb, var(--comp-accent) 15%, var(--surface-1));
	--comp-bg-hover-base: var(--surface-1);
	--comp-color:         var(--text-primary);
	--comp-label-color:   var(--text-primary);
	background:           var(--comp-bg);
	color:                var(--comp-color);
}

.psc-artek\/variant\/solid {
	--comp-bg:            var(--comp-accent);
	--comp-color:         var(--text-on-color);
	--comp-label-color:   var(--text-on-color);
	--comp-bg-hover-base: var(--comp-accent);
	--comp-hover-color:   rgba(255, 255, 255, 1);
	--comp-hover-mix:     20%;
	background:           var(--comp-bg);
	color:                var(--comp-color);
}

.psc-artek\/variant\/outlined {
	border: var(--comp-border-width) solid var(--comp-border-subtle);
}

.psc-artek\/variant\/accent {
	--comp-border-subtle: var(--comp-accent);
	--comp-color:         var(--comp-accent);
	--comp-label-color:   var(--comp-accent);
	color:                var(--comp-color);
}

.psc-artek\/variant\/callout {
	border-left: var(--comp-accent-width) solid var(--comp-accent);
}

.psc-artek\/variant\/ghost {
	background:   transparent !important;
	border-style: none !important;
}


/* ------------------------------------------------------------
   elevation/
   ------------------------------------------------------------ */

.psc-artek\/elevation\/raised   { box-shadow: var(--shadow-sm);    }
.psc-artek\/elevation\/overlay  { box-shadow: var(--shadow-md);    }
.psc-artek\/elevation\/inset    { box-shadow: var(--shadow-inset); }


/* ------------------------------------------------------------
   bg/
   ------------------------------------------------------------ */

.psc-artek\/bg\/root   { --comp-bg: var(--surface-0); background: var(--comp-bg); }
.psc-artek\/bg\/base   { --comp-bg: var(--surface-1); background: var(--comp-bg); }
.psc-artek\/bg\/nested { --comp-bg: var(--surface-2); background: var(--comp-bg); }
.psc-artek\/bg\/sunken { --comp-bg: var(--surface-3); background: var(--comp-bg); }


/* ------------------------------------------------------------
   shape/
   ------------------------------------------------------------ */

.psc-artek\/shape\/square {
	--comp-border-radius: var(--radius-none);
	border-radius:        var(--comp-border-radius);
}

.psc-artek\/shape\/rounded {
	border-radius: var(--comp-border-radius);
}

.psc-artek\/shape\/pill {
	--comp-border-radius: var(--radius-full);
	border-radius:        var(--comp-border-radius);
}


/* ------------------------------------------------------------
   state/
   ------------------------------------------------------------ */

.psc-artek\/state\/interactive {
	cursor:     pointer;
	transition:
		background   var(--transition-fast),
		border-color var(--transition-fast);
}

.psc-artek\/state\/interactive:hover {
	--comp-bg: color-mix(in srgb, var(--comp-hover-color) var(--comp-hover-mix), var(--comp-bg-hover-base));
	background: var(--comp-bg);
}

.psc-artek\/state\/interactive:active {
	background: color-mix(in srgb, var(--comp-accent) 25%, var(--comp-bg));
	box-shadow: var(--shadow-inset);
}

/* Focus ring adapts to palette context via --comp-focus-ring-color token. */
.psc-artek\/state\/interactive:focus-visible {
	outline:        2px solid var(--comp-focus-ring-color);
	outline-offset: 2px;
}

.psc-artek\/state\/disabled {
	opacity:        var(--opacity-disabled);
	pointer-events: none;
}

.psc-artek\/state\/active {
	--comp-bg: color-mix(in srgb, var(--comp-accent) 20%, var(--surface-1));
	background: var(--comp-bg);
}

/* Suppresses the focus ring on touch-only controls where keyboard focus
   is not expected and the ring would be distracting. Use sparingly. */
.psc-artek\/state\/no-focus:focus-visible {
	outline: none;
}

/* Pulsing label animation. Formerly ui/label-animation.
   Animates between muted and accent color using component tokens so it
   responds correctly to any active palette.
   Previously used hardcoded Perspective vars --neutral-100 and --qual-2. */
.psc-artek\/state\/pulse {
	animation: state-pulse 1s ease-out 0s infinite alternate both;
}

@keyframes state-pulse {
	0%   { color: var(--comp-color-muted); }
	100% { color: var(--comp-accent);      }
}


/* ------------------------------------------------------------
   popup/
   ------------------------------------------------------------ */

.psc-artek\/popup\/auto-height { height: auto !important; }
.psc-artek\/popup\/auto-width  { width:  auto !important; }

.ia_labelComponent {
    line-height: var(--leading-normal);
}
/* BEGIN STYLE CLASSES */
.psc-Alerts\/alertButton {
  background-color: var(--info);
  box-shadow: none;
}
@keyframes psc-Alerts\/alertButton-0-anim {
  0% {
    background-color: var(--info);
    box-shadow: none;
  }
  100% {
    background-color: #448BB7;
    box-shadow: none;
  }
}
.psc-Alerts\/alertButton:hover {
  animation-name: psc-Alerts\/alertButton-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}
.psc-Alerts\/alertButton:active {
  background-color: var(--info);
  box-shadow: none;
}

.psc-Alerts\/alertButtonSecondary {
  background-color: var(--neutral-10);
  border-color: var(--neutral-100);
  border-style: solid;
  border-width: 1px;
  font-weight: normal;
}
@keyframes psc-Alerts\/alertButtonSecondary-0-anim {
  0% {
  }
  100% {
    border-width: 2px;
  }
}
.psc-Alerts\/alertButtonSecondary:hover {
  animation-name: psc-Alerts\/alertButtonSecondary-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}

.psc-Alerts\/alertClose {
  cursor: pointer;
  fill: var(--callToAction);
}
.psc-Alerts\/alertClose:hover {
  fill: var(--callToAction--hover);
}

.psc-Alerts\/alertMessage {
  color: var(--neutral-100);
  font-size: 14px;
}

.psc-Alerts\/alertTitle {
  font-size: 20px;
  font-weight: bold;
  line-height: 32px;
}

.psc-Alerts\/states\/error {
  background-color: var(--neutral-10);
  border-top-color: var(--error);
  border-top-style: solid;
  border-top-width: 4px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.psc-Alerts\/states\/errorBtn1 {
  background-color: var(--error);
  border-style: none;
  box-shadow: none;
  text-transform: uppercase;
}
.psc-Alerts\/states\/errorBtn1:hover {
  background-color: var(--error);
}
.psc-Alerts\/states\/errorBtn1:active {
  color: var(--neutral-30);
}

.psc-Alerts\/states\/errorBtn2 {
  background-color: var(--neutral-10);
  border-color: var(--error);
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  color: var(--error);
  font-weight: normal;
  text-transform: uppercase;
  fill: var(--error);
}
@keyframes psc-Alerts\/states\/errorBtn2-0-anim {
  0% {
  }
  100% {
    background-color: var(--neutral-20);
  }
}
.psc-Alerts\/states\/errorBtn2:hover {
  animation-name: psc-Alerts\/states\/errorBtn2-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}

.psc-Alerts\/states\/info {
  background-color: var(--neutral-10);
  border-top-color: var(--info);
  border-top-style: solid;
  border-top-width: 4px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.psc-Alerts\/states\/infoBtn1 {
  background-color: var(--info);
  border-style: none;
  box-shadow: none;
  text-transform: uppercase;
}
.psc-Alerts\/states\/infoBtn1:hover {
  background-color: var(--info);
}
.psc-Alerts\/states\/infoBtn1:active {
  color: var(--neutral-30);
}

.psc-Alerts\/states\/infoBtn2 {
  background-color: var(--neutral-10);
  border-color: var(--info);
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  color: var(--info);
  font-weight: normal;
  text-transform: uppercase;
  fill: var(--info);
}
@keyframes psc-Alerts\/states\/infoBtn2-0-anim {
  0% {
  }
  100% {
    background-color: var(--neutral-20);
  }
}
.psc-Alerts\/states\/infoBtn2:hover {
  animation-name: psc-Alerts\/states\/infoBtn2-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}

.psc-Alerts\/states\/success {
  background-color: var(--neutral-10);
  border-top-color: var(--success);
  border-top-style: solid;
  border-top-width: 4px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.psc-Alerts\/states\/successBtn1 {
  background-color: var(--success);
  border-style: none;
  box-shadow: none;
  text-transform: uppercase;
}
.psc-Alerts\/states\/successBtn1:hover {
  background-color: var(--success);
}
.psc-Alerts\/states\/successBtn1:active {
  color: var(--neutral-30);
}

.psc-Alerts\/states\/successBtn2 {
  background-color: var(--neutral-10);
  border-color: var(--success);
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  color: var(--success);
  font-weight: normal;
  text-transform: uppercase;
  fill: var(--success);
}
@keyframes psc-Alerts\/states\/successBtn2-0-anim {
  0% {
  }
  100% {
    background-color: var(--neutral-20);
  }
}
.psc-Alerts\/states\/successBtn2:hover {
  animation-name: psc-Alerts\/states\/successBtn2-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}

.psc-Alerts\/states\/warning {
  background-color: var(--neutral-10);
  border-top-color: var(--warning);
  border-top-style: solid;
  border-top-width: 4px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.psc-Alerts\/states\/warningBtn1 {
  background-color: var(--warning);
  border-style: none;
  box-shadow: none;
  text-transform: uppercase;
}
.psc-Alerts\/states\/warningBtn1:hover {
  background-color: var(--warning);
}
.psc-Alerts\/states\/warningBtn1:active {
  color: var(--neutral-30);
}

.psc-Alerts\/states\/warningBtn2 {
  background-color: var(--neutral-10);
  border-color: var(--warning);
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  color: var(--warning);
  font-weight: normal;
  text-transform: uppercase;
  fill: var(--warning);
}
@keyframes psc-Alerts\/states\/warningBtn2-0-anim {
  0% {
  }
  100% {
    background-color: var(--neutral-20);
  }
}
.psc-Alerts\/states\/warningBtn2:hover {
  animation-name: psc-Alerts\/states\/warningBtn2-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}

.psc-Components\/Buttons\/ButtonDefault {
  background-color: #AC0000;
  color: #FFFFFF;
  cursor: pointer;
}
.psc-Components\/Buttons\/ButtonDefault:hover {
  background-color: #D90000;
  color: #2B2B2B;
  cursor: pointer;
}
.psc-Components\/Buttons\/ButtonDefault:disabled {
  background-color: #D5D5D5;
  color: #AAAAAA;
  cursor: not-allowed;
}

.psc-Components\/Buttons\/ButtonDelete {
  background-color: #AC0000;
  color: #FFFFFF;
}
.psc-Components\/Buttons\/ButtonDelete:hover {
  background-color: #D90000;
  color: #FFFFFF;
}
.psc-Components\/Buttons\/ButtonDelete:disabled {
  background-color: #D5D5D5;
  color: #AAAAAA;
}

.psc-Components\/Buttons\/HoverEmpty {
}
.psc-Components\/Buttons\/HoverEmpty:hover {
  cursor: pointer;
}

.psc-Components\/Labels\/BoldSmall {
  font-size: 10px;
  font-weight: bold;
}

.psc-Components\/Labels\/Header {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.psc-Components\/Labels\/NormalSmall {
  font-size: 12px;
}

.psc-Components\/Table\/SelectedRowEven {
  background-color: #C9DAE8;
}

.psc-Components\/Table\/SelectedRowOdd {
  background-color: #C5D6E4;
}

.psc-Containers\/Body {
  border-bottom-color: #D5D5D5;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: #D5D5D5;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #D5D5D5;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-style: none;
  padding: 10px;
}

.psc-Containers\/Header {
  background-color: #E6E6E6;
  border-bottom-color: #D5D5D5;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: #D5D5D5;
  border-left-style: solid;
  border-left-width: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-right-color: #D5D5D5;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: #D5D5D5;
  border-top-style: solid;
  border-top-width: 1px;
}

.psc-Docks\/Dock {
  background-color: #E6E6E6;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #E7F5FF;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 5px;
  margin-left: 10px;
  padding-bottom: 2px;
  padding-right: 5px;
  padding-top: 5px;
  fill: #FFFFFF;
}

.psc-Docks\/DropDown {
  background-color: var(--neutral-20);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: var(--neutral-100);
  margin-bottom: 25px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}

.psc-Docks\/Menu\/Item {
  background-color: #FFFFFF;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  color: #555555;
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 2px;
  margin-top: 2px;
  text-align: center;
  text-transform: uppercase;
}
.psc-Docks\/Menu\/Item:hover {
}

.psc-Docks\/Menu\/ItemSelected {
  background-color: #AC0000;
  color: #FFFFFF;
}
.psc-Docks\/Menu\/ItemSelected:hover {
  color: #000000;
}

.psc-Embr-Charts\/Button {
  background-color: #FFFFFF;
  border-color: #808080;
  border-style: solid;
  border-width: 1pt;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #808080;
  font-family: sans-serif;
  font-size: 10pt;
  font-weight: bold;
  margin: 0.5rem;
  padding: 0.25rem;
  fill: #808080;
}
.psc-Embr-Charts\/Button:hover {
  background-color: #008FFB;
  color: #FFFFFF;
  font-weight: bold;
}
.psc-Embr-Charts\/Button:disabled {
  background-color: #D5D5D5;
  color: #808080;
}

.psc-Header\/Header {
  background-color: #B8BEBE;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #E7F5FF;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 2px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  padding-bottom: 2px;
  padding-top: 5px;
  fill: #FFFFFF;
}

.psc-Header\/Icon {
  color: #FFFFFF;
  cursor: pointer;
  fill: #FFFFFF;
}

.psc-Hover\/DefaultHover {
  color: #4B4B46;
  font-family: Helvetica;
}
.psc-Hover\/DefaultHover:hover {
  color: #D7004B;
}

.psc-Hover\/HoverCursor {
}
.psc-Hover\/HoverCursor:hover {
  cursor: pointer;
}

.psc-Hover\/HoverUnderline {
}
.psc-Hover\/HoverUnderline:hover {
  text-decoration: underline;
}

.psc-Popup\/Popup_Hover {
}
.psc-Popup\/Popup_Hover:hover {
  background-color: #EBEBEB;
}

.psc-SAW\/AdHocTrends\/CancelButton {
  border-top-left-radius: 4px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 0px;
}

.psc-SAW\/AdHocTrends\/CancelButtonMobile {
  border-top-left-radius: 8px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 0px;
}

.psc-SAW\/AdHocTrends\/Control {
  padding: 1px;
}

.psc-SAW\/AdHocTrends\/ControlBar {
  padding-bottom: 8px;
  padding-left: 14px;
  padding-right: 16px;
  padding-top: 16px;
}

.psc-SAW\/AdHocTrends\/DropDown {
  background-color: var(--neutral-10);
  color: var(--neutral-90);
}

.psc-SAW\/AdHocTrends\/FullRadius {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.psc-SAW\/AdHocTrends\/FullRadiusMobile {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.psc-SAW\/AdHocTrends\/FunctionBar {
  background-color: var(--neutral-20);
  padding-bottom: 2px;
  padding-left: 8px;
  padding-right: 16px;
  padding-top: 2px;
}

.psc-SAW\/AdHocTrends\/FunctionTitle {
  font-size: 12px;
  font-weight: bold;
  text-align: right;
}

.psc-SAW\/AdHocTrends\/Header {
  background-color: var(--neutral-30);
  border-color: var(--neutral-50);
  border-style: solid;
  border-width: 1px;
}

.psc-SAW\/AdHocTrends\/HeaderTitle {
  font-weight: bold;
}

.psc-SAW\/AdHocTrends\/LeftRadius {
  border-top-left-radius: 4px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 0px;
}

.psc-SAW\/AdHocTrends\/LeftRadiusMobile {
  border-top-left-radius: 8px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 0px;
}

.psc-SAW\/AdHocTrends\/MobileControl {
  padding: 1px;
}

.psc-SAW\/AdHocTrends\/MobileControlBar {
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
}

.psc-SAW\/AdHocTrends\/MobileFunctionBar {
  background-color: var(--neutral-20);
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
}

.psc-SAW\/AdHocTrends\/RightRadius {
  border-top-left-radius: 0px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 4px;
}

.psc-SAW\/AdHocTrends\/RightRadiusMobile {
  border-top-left-radius: 0px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 8px;
}

.psc-SAW\/AdHocTrends\/SaveLoadButton {
  border-top-left-radius: 0px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 4px;
}

.psc-SAW\/AdHocTrends\/SaveLoadButtonMobile {
  border-top-left-radius: 0px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 8px;
}

.psc-SAW\/AlarmAnalysis\/Label {
  color: #2B2B2B;
  font-size: 14px;
  font-weight: 300;
  line-height: 16px;
}

.psc-SAW\/Docks\/Dock {
  background-color: #B8BEBE;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #E7F5FF;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 5px;
  margin-left: 10px;
  padding-bottom: 2px;
  padding-right: 5px;
  padding-top: 5px;
  fill: #FFFFFF;
}

.psc-SAW\/Docks\/DropDown {
  background-color: var(--neutral-20);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: var(--neutral-100);
  margin-bottom: 25px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}

.psc-SAW\/Docks\/Menu\/Item {
  background-color: var(--neutral-20);
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  color: var(--neutral-80);
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 2px;
  margin-top: 2px;
  text-align: center;
  text-transform: uppercase;
}
.psc-SAW\/Docks\/Menu\/Item:hover {
  background-color: var(--callToActionHighlight);
}

.psc-SAW\/Docks\/Menu\/ItemSelected {
  background-color: #CCFFCC;
}
.psc-SAW\/Docks\/Menu\/ItemSelected:hover {
  background-color: #CCFFCC;
  color: #000000;
}

.psc-SAW\/Footer\/Label {
  background-color: #D5D5D5;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right-style: solid;
  border-top-style: solid;
  color: #000000;
  font-weight: bold;
  margin: 5px;
  text-align: justify-all;
}

.psc-SAW\/Framework\/Card\/Bold_Text {
  font-weight: bold;
}

.psc-SAW\/Framework\/Card\/Card {
  background-color: #FAFAFA;
  border-color: #D5D5D5;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: 0px 2px 4px rgba(0, 0, 40, 0.15);
  margin: 5px;
}

.psc-SAW\/Framework\/Card\/Embedded {
  margin: 5px;
}

.psc-SAW\/Framework\/Card\/Item {
  padding-bottom: 4px;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 4px;
}

.psc-SAW\/Framework\/Card\/Item_Border {
  border-bottom-color: #D5D5D5;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.psc-SAW\/Framework\/Card\/Label {
  color: #8E8E8E;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  margin-right: 10px;
  text-transform: uppercase;
}

.psc-SAW\/Framework\/Card\/Row {
  margin-bottom: 2px;
}

.psc-SAW\/Framework\/Card\/Title {
  background-color: #E6EAEEAD;
  border-bottom-color: #D5D5D5;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  color: #2E2E2E;
  font-size: 12px;
  font-weight: bold;
  padding-left: 6px;
  padding-right: 6px;
  text-transform: uppercase;
  fill: #2E2E2E;
}

.psc-SAW\/Framework\/Card\/Value {
  color: #000080;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
}

.psc-SAW\/Framework\/TableCardLayout\/Label {
  color: #2B2B2B;
  font-size: 14px;
  font-weight: 300;
  line-height: 16px;
}

.psc-SAW\/HP\/ClickPlate {
  border-color: #C4C4C4;
  border-style: double;
  border-width: 5px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.psc-SAW\/HP\/Color\/Alarm\/AlarmActive {
  color: #FF0000;
}

.psc-SAW\/HP\/Color\/Alarm\/AlarmInactive {
  color: #808080;
}

.psc-SAW\/HP\/Color\/Val_Fbdk-1 {
  fill: #FFFFFF;
}

.psc-SAW\/HP\/Color\/Val_Fbdk-3 {
  fill: #4747FF;
}

.psc-SAW\/HP\/Color\/Val_Fbdk-4 {
  fill: #4747FF;
}

.psc-SAW\/HP\/Color\/Val_Fdbk-0 {
  fill: #555555;
}

.psc-SAW\/HP\/Color\/Val_Sts-0 {
  fill: #AAAAAA;
}

.psc-SAW\/HP\/Color\/Val_Sts-1 {
  fill: #555555;
}

.psc-SAW\/HP\/Color\/Val_Sts-10 {
  stroke: #4747FF;
  stroke-width: 35;
  fill: #FFFFFF;
}

.psc-SAW\/HP\/Color\/Val_Sts-2 {
  stroke: #FFFFFF;
  stroke-width: 20;
  fill: #FFFFFF;
}

.psc-SAW\/HP\/Color\/Val_Sts-5 {
  fill: #4747FF;
}

.psc-SAW\/HP\/FacePlate\/CheckBoxLabelIndicator {
  margin-left: 25px;
  margin-right: 25px;
  text-align: center;
}

.psc-SAW\/HP\/FacePlate\/Container-Header-Buttons {
  background-color: #AAAAAA;
}

.psc-SAW\/HP\/FacePlate\/FacePlateAckButton {
  background-color: #808080;
  margin: 2px;
}

.psc-SAW\/HP\/FacePlate\/FacePlateAckButtonInverted {
  background-color: #FFFFFF;
  color: #000000;
  margin: 2px;
}

.psc-SAW\/HP\/FacePlate\/FacePlateButtonGreen-Off {
  background-color: #FFFFFF;
  color: #000000;
}

.psc-SAW\/HP\/FacePlate\/FacePlateButtonGreen-On {
  background-color: #00AC00;
  color: #2B2B2B;
}

.psc-SAW\/HP\/FacePlate\/FacePlateHeaderLabel {
  font-weight: bold;
  text-align: center;
}

.psc-SAW\/HP\/FacePlate\/FacePlateNavButtons {
  background-color: #808080;
  margin: 2px;
}

.psc-SAW\/HP\/FacePlate\/FacePlateNavButtonsSelected {
  background-color: #FFFFFF;
  color: #000000;
  margin: 2px;
}

.psc-SAW\/HP\/FacePlate\/FacePlateRadioGroup {
}
.psc-SAW\/HP\/FacePlate\/FacePlateRadioGroup:checked {
  color: #FF47FF;
  fill: #FF47FF;
}
.psc-SAW\/HP\/FacePlate\/FacePlateRadioGroup:active {
  color: #00FF00;
  fill: #00FF00;
}

.psc-SAW\/HP\/FacePlate\/FacePlateRowInputs {
  margin: 5px;
}

.psc-SAW\/HP\/FacePlate\/FacePlateTabLabel {
  background-color: #D5D5D5;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
}

.psc-SAW\/HP\/FacePlate\/Junk\/FacePlateAlarmButtonFaulted {
  color: #FFAC47;
}

.psc-SAW\/HP\/FacePlate\/LiveLabelOutput {
  margin-left: 5px;
  margin-right: 5px;
  text-align: right;
}

.psc-SAW\/HP\/FacePlate\/NumericEntryField {
  border-bottom-color: #000000;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: #000000;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #000000;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: #000000;
  border-top-style: solid;
  border-top-width: 1px;
}

.psc-SAW\/HP\/HMI_Buttons {
  background-color: #808080;
  margin: 2px;
}

.psc-SAW\/HP\/HMI_Clickable {
  border-color: #FFFFFF00;
  border-style: solid;
  border-width: 2px;
  border-radius: 4px;
  cursor: pointer;
}
.psc-SAW\/HP\/HMI_Clickable:hover {
  border-color: #2E2E2E;
  border-style: solid;
  border-width: 2px;
  border-radius: 4px;
}

.psc-SAW\/HP\/HMI_Comp_Alarm_Indicator {
  background-color: #FF0000;
  color: #000000;
  text-align: center;
}

.psc-SAW\/HP\/HMI_Comp_Label {
  background-color: #DDE1E6;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #2E2E2E;
  font-family: Roboto;
  font-size: 12px;
  text-align: center;
}

.psc-SAW\/HP\/HMI_Fault_Indicator {
  background-color: #FF0000;
  text-align: center;
}

.psc-SAW\/HP\/HMI_HOA_Hand_Label {
  background-color: #FFFF8A;
  text-align: center;
}

.psc-SAW\/HP\/HMI_Live_Value {
  background-color: #F2F2F2;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #0000FF;
  font-weight: bold;
  text-align: center;
}

.psc-SAW\/HP\/HMI_Off {
  background-color: #808080;
  color: #FFFFFF;
  stroke: #2E2E2E;
  stroke-width: 10px;
  fill: #808080;
}

.psc-SAW\/HP\/HMI_On {
  background-color: #FFFFFF;
  color: #FFFFFF;
  stroke: #2E2E2E;
  stroke-width: 10px;
  fill: #CCFFCC;
}

.psc-SAW\/HP\/HMI_Sim_Indicator {
  background-color: #FFFF8A;
  text-align: center;
}

.psc-SAW\/HP\/HMI_StartOrStop {
  background-color: #FFFFFF;
  color: #FFFFFF;
  stroke: #2E2E2E;
  stroke-width: 10px;
  fill: #8AFFFF;
}

.psc-SAW\/HP\/HMI_Value {
  color: #000080;
  font-family: Roboto;
  font-size: 12px;
  font-weight: bold;
}

.psc-SAW\/HP\/HideDisabledHoover {
}
.psc-SAW\/HP\/HideDisabledHoover:disabled {
  cursor: none;
}

.psc-SAW\/HP\/MultiStateButton {
  font-weight: bold;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}

.psc-SAW\/Header\/Backups\/Header {
  background-color: #003E69;
  color: #E7F5FF;
  font-size: 14px;
  line-height: 17px;
  fill: #FFFFFF;
}

.psc-SAW\/Header\/Backups\/Icon {
  cursor: pointer;
  fill: #FFFFFF;
}

.psc-SAW\/Header\/DropDown {
  background-color: var(--neutral-10);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: var(--neutral-100);
  margin-bottom: 10px;
  margin-top: 10px;
}

.psc-SAW\/Header\/Header {
  background-color: #B8BEBE;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #E7F5FF;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 2px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  padding-bottom: 2px;
  padding-top: 5px;
  fill: #FFFFFF;
}

.psc-SAW\/Header\/Icon {
  color: #FFFFFF;
  cursor: pointer;
  fill: #FFFFFF;
}

.psc-SAW\/Menu\/All_Header {
  background-color: var(--neutral-80);
  color: var(--neutral-10);
  font-size: 14px;
  font-weight: bold;
  line-height: 17px;
  text-transform: none;
}

.psc-SAW\/Menu\/Item_Horizontal {
  background-color: unset;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
}
.psc-SAW\/Menu\/Item_Horizontal:hover {
  background-color: #0D72B633;
}

.psc-SAW\/Menu\/Item_Vertical {
  background-color: var(--neutral-20);
  border-bottom-style: none;
  border-top-color: var(--neutral-60);
  border-top-style: solid;
  border-top-width: 1px;
  color: var(--neutral-80);
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
}
.psc-SAW\/Menu\/Item_Vertical:last-child {
  border-bottom-color: var(--neutral-60);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.psc-SAW\/Menu\/Item_Vertical:hover {
  background-color: var(--callToActionHighlight);
}

.psc-SAW\/Menu\/Menu_Horizontal {
  background-color: #00000000;
  border-style: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #FFFFFF;
}

.psc-SAW\/Menu\/Menu_Vertical {
  background-color: var(--neutral-30);
  border-bottom-color: var(--neutral-60);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: var(--neutral-60);
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: var(--neutral-60);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: var(--neutral-60);
  border-top-style: solid;
  border-top-width: 1px;
}

.psc-SAW\/Page\/Alarm\/Alarm {
  border-bottom-style: none;
  border-left-color: var(--neutral-40);
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: var(--neutral-40);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-style: none;
}

.psc-SAW\/Page\/Alarm\/Page {
  background-color: var(--neutral-20);
}

.psc-SAW\/Page\/Bold {
  font-weight: bold;
}

.psc-SAW\/Page\/Margins {
  margin-left: 12px;
  margin-right: 12px;
}

.psc-SAW\/Page\/Page {
  font-size: 14px;
  line-height: 20px;
  margin: 5px;
}

.psc-SAW\/Page\/Text {
  color: var(--neutral-100);
  font-size: 14px;
  line-height: 20px;
}

.psc-SAW\/Title\/Icon {
  fill: var(--neutral-90);
}

.psc-SAW\/Title\/Text {
  color: var(--neutral-90);
  font-size: 16px;
  font-weight: bold;
  line-height: 19px;
  padding-left: 6px;
  fill: var(--neutral-90);
}

.psc-SAW\/Title\/Title {
  background-color: var(--neutral-30);
  border-bottom-color: var(--neutral-60);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-color: var(--neutral-60);
  border-top-style: solid;
  border-top-width: 1px;
}

.psc-SAW\/UserManagement\/Headers {
  background-color: #2B2B2B;
  color: #FFFFFF;
  font-family: Arial;
  font-size: 20px;
  font-weight: lighter;
  text-align: start;
  text-indent: 6px;
}

.psc-SAW\/UserManagement\/InputFont {
  font-family: Arial;
  font-size: 14px;
}

.psc-SAW\/UserManagement\/LeftVerticalHeaderBar {
  border-left-color: #4A4A4A63;
  border-left-style: solid;
  border-left-width: 1px;
}

.psc-SAW\/UserManagement\/SectionHeaders {
  font-family: Arial;
  font-size: 15px;
  margin-bottom: 9px;
}

.psc-SAW\/UserManagement\/TableEditorIcons {
  cursor: pointer;
  margin-bottom: 1px;
  margin-top: 5px;
}

.psc-TimeClock\/Buttons\/Background {
  background-color: #D5D5D5;
}

.psc-TimeClock\/Buttons\/Default {
  background-color: #D5D5D5;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  color: #000000;
}

.psc-TimeClock\/Buttons\/Text {
  color: #000000;
}

.psc-TimeClock\/Docks\/Dock {
  background-color: #B8BEBE;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #E7F5FF;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 5px;
  margin-left: 10px;
  padding-bottom: 2px;
  padding-right: 5px;
  padding-top: 5px;
  fill: #FFFFFF;
}

.psc-TimeClock\/Docks\/DropDown {
  background-color: var(--neutral-20);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: var(--neutral-100);
  margin-bottom: 25px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}

.psc-TimeClock\/Docks\/Menu\/Item {
  background-color: var(--neutral-20);
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  color: var(--neutral-80);
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 2px;
  margin-top: 2px;
  text-align: center;
  text-transform: uppercase;
}
.psc-TimeClock\/Docks\/Menu\/Item:hover {
  background-color: var(--callToActionHighlight);
}

.psc-TimeClock\/Docks\/Menu\/ItemSelected {
  background-color: #CCFFCC;
}
.psc-TimeClock\/Docks\/Menu\/ItemSelected:hover {
  background-color: #CCFFCC;
  color: #000000;
}

.psc-TimeClock\/Header\/Header {
  background-color: #B8BEBE;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #E7F5FF;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 2px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  padding-bottom: 2px;
  padding-top: 5px;
  fill: #FFFFFF;
}

.psc-TimeClock\/Header\/Icon {
  color: #FFFFFF;
  cursor: pointer;
  fill: #FFFFFF;
}

.psc-TimeClock\/Main {
  background-color: #F2F2F2;
}

.psc-TimeClock\/Menu\/All_Header {
  background-color: var(--neutral-80);
  color: var(--neutral-10);
  font-size: 14px;
  font-weight: bold;
  line-height: 17px;
  text-transform: none;
}

.psc-TimeClock\/Menu\/Item {
  background-color: var(--neutral-20);
  border-bottom-style: none;
  border-top-color: var(--neutral-60);
  border-top-style: solid;
  border-top-width: 1px;
  color: var(--neutral-80);
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
}
.psc-TimeClock\/Menu\/Item:last-child {
  border-bottom-color: var(--neutral-60);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.psc-TimeClock\/Menu\/Item:hover {
  background-color: var(--callToActionHighlight);
}

.psc-TimeClock\/Menu\/Menu {
  background-color: var(--neutral-30);
}

.psc-TimeClock\/Page\/EmbeddedRow {
  margin-top: 5px;
}

.psc-TimeClock\/Page\/KPIGauge\/Gauge {
  margin: 10px;
}

.psc-TimeClock\/Page\/KPIGauge\/Label {
  font-weight: bold;
  text-align: center;
}

.psc-TimeClock\/Page\/Label\/CenterSubInfo {
  margin-top: 10px;
  text-align: center;
}

.psc-TimeClock\/Page\/PageEmbedded {
  margin-bottom: 5px;
  margin-right: 10px;
}

.psc-TimeClock\/Page\/Title\/Icon {
  fill: var(--neutral-90);
}

.psc-TimeClock\/Page\/Title\/Text {
  color: var(--neutral-90);
  font-size: 16px;
  font-weight: bold;
  line-height: 19px;
  fill: var(--neutral-90);
}

.psc-TimeClock\/Page\/Title\/Title {
  background-color: var(--neutral-30);
  border-bottom-color: var(--neutral-60);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-color: var(--neutral-60);
  border-top-style: solid;
  border-top-width: 1px;
  margin-right: 10px;
}

.psc-TimeClock\/Selected {
  background-color: #CCFFCC;
}

.psc-TimeClock\/Tabs\/Tab {
  background-color: var(--neutral-20);
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  color: var(--neutral-80);
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 2px;
  margin-top: 2px;
  text-align: center;
  text-transform: uppercase;
}
.psc-TimeClock\/Tabs\/Tab:hover {
  background-color: var(--callToActionHighlight);
}

.psc-TimeClock\/Tabs\/TabSelected {
  background-color: #CCFFCC;
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  font-weight: bold;
}
.psc-TimeClock\/Tabs\/TabSelected:hover {
  background-color: #CCFFCC;
  color: #000000;
}

.psc-Utilities\/m-b-16 {
  margin-bottom: 16px;
}

.psc-Utilities\/m-r-16 {
  margin-right: 16px;
}

.psc-Utilities\/m-r-8 {
  margin-right: 8px;
}

.psc-Utilities\/p-16 {
  padding: 16px;
}

.psc-Utilities\/p-8 {
  padding: 8px;
}

.psc-Utilities\/p-rl-8 {
  padding-left: 8px;
  padding-right: 8px;
}

.psc-artek\/bg\/base {
}

.psc-artek\/bg\/nested {
}

.psc-artek\/bg\/root {
}

.psc-artek\/bg\/sunken {
}

.psc-artek\/component\/button {
}

.psc-artek\/component\/card {
}

.psc-artek\/component\/section-header {
}

.psc-artek\/elevation\/inset {
}

.psc-artek\/elevation\/overlay {
}

.psc-artek\/elevation\/raised {
}

.psc-artek\/layout\/flush {
}

.psc-artek\/layout\/gap {
}

.psc-artek\/layout\/padding {
}

.psc-artek\/layout\/padding-x {
}

.psc-artek\/layout\/padding-y {
}

.psc-artek\/layout\/spacer {
}

.psc-artek\/palette\/danger {
}

.psc-artek\/palette\/dark {
}

.psc-artek\/palette\/info {
}

.psc-artek\/palette\/light {
}

.psc-artek\/palette\/neutral {
}

.psc-artek\/palette\/primary {
}

.psc-artek\/palette\/success {
}

.psc-artek\/palette\/warning {
}

.psc-artek\/popup\/auto-height {
}

.psc-artek\/popup\/auto-width {
}

.psc-artek\/size\/lg {
}

.psc-artek\/size\/md {
}

.psc-artek\/size\/sm {
}

.psc-artek\/size\/xs {
}

.psc-artek\/size\/xxl {
}

.psc-artek\/state\/active {
}

.psc-artek\/state\/disabled {
}

.psc-artek\/state\/interactive {
}

.psc-artek\/state\/no-focus {
}

.psc-artek\/state\/pulse {
}

.psc-artek\/surface\/default {
}

.psc-artek\/surface\/overlay {
}

.psc-artek\/surface\/page {
}

.psc-artek\/surface\/raised {
}

.psc-artek\/typography\/align-center {
}

.psc-artek\/typography\/align-right {
}

.psc-artek\/typography\/body {
}

.psc-artek\/typography\/h1 {
}

.psc-artek\/typography\/h2 {
}

.psc-artek\/typography\/h3 {
}

.psc-artek\/typography\/label {
}

.psc-artek\/typography\/mono {
}

.psc-artek\/typography\/muted {
}

.psc-artek\/typography\/one-line {
}

.psc-artek\/typography\/secondary {
}

.psc-artek\/typography\/strong {
}

.psc-artek\/typography\/three-line {
}

.psc-artek\/typography\/two-line {
}

.psc-artek\/variant\/accent {
}

.psc-artek\/variant\/callout {
}

.psc-artek\/variant\/outlined {
}

.psc-artek\/variant\/soft {
}

.psc-artek\/variant\/solid {
}

.psc-exchange\/DocumentManagement\/Header\/Header {
  background-color: #003E69;
  font-size: 14px;
  fill: #FFFFFF;
}

.psc-exchange\/DocumentManagement\/Header\/Icon {
  color: #FFFFFF;
  cursor: pointer;
  fill: #FFFFFF;
}

.psc-exchange\/DocumentManagement\/Header\/Title {
  color: #FFFFFF;
  font-size: 20px;
}

.psc-exchange\/DocumentManagement\/Menu\/Icon {
  color: #535C69;
  fill: #535C69;
}

.psc-exchange\/DocumentManagement\/Menu\/Item {
  color: #535C69;
  font-size: 12px;
  font-weight: bolder;
  margin-left: 5px;
  text-transform: uppercase;
  fill: #535C69;
}

.psc-exchange\/DocumentManagement\/Menu\/Menu {
  background-color: #EEF2F4;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 10px;
}

.psc-exchange\/DocumentManagement\/Menu\/Text {
  color: #535C69;
  font-size: 12px;
}

.psc-exchange\/DocumentManagement\/Page\/Bold {
  font-weight: bold;
}

.psc-exchange\/DocumentManagement\/Page\/Header {
  color: #535C69;
  font-size: 12px;
  font-weight: bolder;
  text-transform: uppercase;
}

.psc-exchange\/DocumentManagement\/Page\/Link {
  color: var(--callToAction);
  cursor: pointer;
  font-size: 12px;
}

.psc-exchange\/DocumentManagement\/Page\/Margins {
  margin-left: 10px;
  margin-right: 10px;
}

.psc-exchange\/DocumentManagement\/Page\/Page {
  background-color: #FFFFFF;
  border-bottom-color: #EEF2F4;
  border-bottom-style: solid;
  border-bottom-width: 14px;
  border-left-color: #EEF2F4;
  border-left-style: solid;
  border-left-width: 14px;
  border-right-color: #EEF2F4;
  border-right-style: solid;
  border-right-width: 14px;
  font-size: 14px;
}

.psc-exchange\/DocumentManagement\/Page\/Text {
  color: #535C69;
  font-size: 12px;
}

.psc-exchange\/DocumentManagement\/Popup\/Page {
  background-color: #FFFFFF;
  font-size: 14px;
}

.psc-exchange\/DocumentManagement\/Tag\/Tag {
  background-color: #DCE2E5;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #8A9096;
  font-size: 10px;
  font-weight: bolder;
}

.psc-exchange\/DocumentManagement\/Title\/Icon {
  color: #535C69;
  fill: #535C69;
}

.psc-exchange\/DocumentManagement\/Title\/Text {
  color: #535C69;
  font-size: 24px;
  margin-left: 6px;
  fill: var(--neutral-90);
}

.psc-exchange\/DocumentManagement\/Title\/Title {
  background-color: #EEF2F4;
}

.psc-exchange\/IconManager\/console {
  border-color: #00000052;
  border-style: solid;
  border-width: 1px;
  font-size: 0.875rem;
  font-weight: 300;
  padding: 0.5rem;
}

.psc-exchange\/IconManager\/icon {
  padding: 0.5rem;
}
.psc-exchange\/IconManager\/icon:hover {
  border-color: var(--toggleSwitch--selected);
  border-style: solid;
  border-width: 1px;
}

.psc-exchange\/IconManager\/icon-selected {
  background-color: var(--toggleSwitch--selected);
}

.psc-exchange\/IconManager\/icon-tooltip {
  font-size: 1.25rem;
}

.psc-exchange\/IconManager\/typography-header {
  font-size: 0.875rem;
  font-weight: 500;
}

.psc-exchange\/artekcalendar\/container\/background {
  background-color: var(--neutral-10);
}

.psc-exchange\/artekcalendar\/container\/hover {
}
.psc-exchange\/artekcalendar\/container\/hover:hover {
  background-color: var(--neutral-30);
  color: var(--neutral-90);
  cursor: pointer;
}

.psc-exchange\/artekcalendar\/container\/padding-md {
  padding: 10px;
}

.psc-exchange\/artekcalendar\/container\/radius-md {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.psc-exchange\/artekcalendar\/container\/selected {
  background-color: var(--neutral-30);
}

.psc-exchange\/artekcalendar\/container\/today {
  background-color: var(--neutral-50);
}

.psc-exchange\/artekcalendar\/typography\/align-center {
  text-align: center;
}

.psc-exchange\/artekcalendar\/typography\/bold {
}

.psc-exchange\/artekcalendar\/typography\/hover {
}
.psc-exchange\/artekcalendar\/typography\/hover:hover {
  font-weight: bold;
}

.psc-exchange\/artekcalendar\/typography\/lg {
  font-size: 1.2em;
}

.psc-exchange\/artekcalendar\/typography\/md {
  font-size: 0.9em;
}

.psc-exchange\/artekcalendar\/typography\/out-of-month {
  color: var(--neutral-50);
}

.psc-exchange\/artekcalendar\/typography\/sm {
  font-size: 0.8em;
}

.psc-exchange\/artekcalendar\/typography\/upper {
  text-transform: uppercase;
}

.psc-exchange\/artekcalendar\/typography\/xs {
  font-size: 0.7em;
}

.psc-exchange\/comtrade\/section {
  border-color: var(--neutral-30);
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  margin: 8px;
  padding: 8px;
}

.psc-exchange\/datacenter\/equipment\/common\/base {
  font-size: 5px;
  font-weight: bold;
  text-align: center;
}

.psc-exchange\/datacenter\/equipment\/common\/text {
  color: var(--neutral-90);
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}

.psc-exchange\/datacenter\/equipment\/common\/value {
  color: var(--callToAction);
}

.psc-exchange\/datacenter\/faceplates\/active-alarm-count\/container {
  border-color: var(--neutral-30);
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 7.5px;
  border-top-right-radius: 7.5px;
  border-bottom-left-radius: 7.5px;
  border-bottom-right-radius: 7.5px;
  padding: 10px;
}
.psc-exchange\/datacenter\/faceplates\/active-alarm-count\/container:hover {
  background-color: var(--neutral-20);
  cursor: pointer;
}

.psc-exchange\/datacenter\/faceplates\/active-alarm-count\/label {
  color: var(--label);
  font-family: Roboto;
  font-size: 15px;
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/ahu\/discharge-metrics\/base {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/ahu\/discharge-metrics\/units {
  color: var(--label);
  text-align: left;
}

.psc-exchange\/datacenter\/faceplates\/ahu\/discharge-metrics\/value {
  color: var(--callToAction);
  text-align: right;
}

.psc-exchange\/datacenter\/faceplates\/ahu\/energy-consumed {
  font-family: Roboto;
  font-size: 21px;
  font-weight: 500;
  text-align: center;
}

.psc-exchange\/datacenter\/faceplates\/ahu\/status\/base {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  font-family: Roboto;
  font-size: 14px;
  padding: 7.5px;
  text-align: center;
}

.psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/dark\/error {
  background-color: var(--error);
  color: var(--neutral-100);
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/dark\/off {
  background-color: var(--neutral-20);
  color: var(--neutral-100);
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/dark\/on {
  background-color: var(--callToAction);
  color: var(--neutral-100);
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/extraLeftRightPadding {
  padding-left: 20px;
  padding-right: 20px;
}

.psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/light\/error {
  background-color: var(--error);
  color: var(--neutral-100);
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/light\/off {
  background-color: var(--neutral-50);
  color: var(--neutral-10);
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/ahu\/status\/generic\/light\/on {
  background-color: var(--callToAction);
  color: var(--neutral-10);
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/container {
  background-color: var(--neutral-10);
  padding: 5px;
}

.psc-exchange\/datacenter\/faceplates\/section {
  border-color: var(--neutral-30);
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  padding: 10px;
}

.psc-exchange\/datacenter\/faceplates\/section-title\/base {
  font-family: Roboto;
  font-size: 14px;
  text-align: center;
  white-space: pre-wrap;
}

.psc-exchange\/datacenter\/faceplates\/section-title\/bold {
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/section-title\/important {
  color: var(--label);
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/section-title\/left-aligned {
  text-align: left;
}

.psc-exchange\/datacenter\/faceplates\/section-title\/primary {
  color: var(--label);
}

.psc-exchange\/datacenter\/faceplates\/section-title\/secondary {
  color: var(--neutral-50);
}

.psc-exchange\/datacenter\/faceplates\/ups\/discharge-metrics\/base {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/ups\/discharge-metrics\/units {
  color: var(--label);
  text-align: left;
}

.psc-exchange\/datacenter\/faceplates\/ups\/discharge-metrics\/value {
  color: var(--callToAction);
  text-align: right;
}

.psc-exchange\/datacenter\/faceplates\/ups\/energy-consumed {
  font-family: Roboto;
  font-size: 21px;
  font-weight: 500;
  text-align: center;
}

.psc-exchange\/datacenter\/faceplates\/ups\/status\/base {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  font-family: Roboto;
  font-size: 14px;
  padding: 7.5px;
  text-align: center;
}

.psc-exchange\/datacenter\/faceplates\/ups\/status\/generic\/dark\/off {
  background-color: var(--neutral-20);
  color: var(--neutral-100);
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/ups\/status\/generic\/dark\/on {
  background-color: var(--callToAction);
  color: var(--neutral-100);
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/ups\/status\/generic\/extraLeftRightPadding {
  padding-left: 20px;
  padding-right: 20px;
}

.psc-exchange\/datacenter\/faceplates\/ups\/status\/generic\/light\/off {
  background-color: var(--neutral-50);
  color: var(--neutral-10);
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/ups\/status\/generic\/light\/on {
  background-color: var(--callToAction);
  color: var(--neutral-10);
  font-weight: 500;
}

.psc-exchange\/datacenter\/faceplates\/value\/important {
  font-family: Roboto;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}

.psc-exchange\/datacenter\/framework\/data\/base {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.psc-exchange\/datacenter\/framework\/data\/numeric-value {
  color: var(--callToAction);
  font-weight: bold;
  text-align: right;
}

.psc-exchange\/datacenter\/framework\/data\/text-value {
  color: var(--callToAction);
  font-weight: bold;
  text-align: center;
}

.psc-exchange\/datacenter\/kpi-details\/container {
  border-color: var(--neutral-30);
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  padding: 5px;
}

.psc-exchange\/datacenter\/kpi-details\/current-value {
  color: var(--callToAction);
  font-family: Roboto;
  font-size: 22px;
  text-align: center;
}

.psc-exchange\/datacenter\/kpi-details\/title {
  color: var(--label);
  font-family: Roboto;
  font-size: 17px;
  text-align: center;
}

.psc-exchange\/datacenter\/kpi-details\/trend\/dropdown-option {
  background-color: #FFFFFF00;
  color: var(--label);
  font-family: Roboto;
  font-size: 13px;
  padding: 7.5px;
}

.psc-exchange\/datacenter\/kpi-details\/trend\/dropdown-selected-value {
  background-color: #FFFFFF00;
  border-color: var(--neutral-30);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: var(--label);
  font-family: Roboto;
  font-size: 13px;
  padding: 0.15vmin;
}

.psc-exchange\/datacenter\/kpi-details\/trend\/value\/name {
  color: var(--label);
  font-family: Roboto;
  font-size: 12px;
  text-align: center;
}

.psc-exchange\/datacenter\/kpi-details\/trend\/value\/value {
  color: var(--callToAction);
  font-family: Roboto;
  font-size: 14px;
  text-align: center;
}

.psc-exchange\/datacenter\/overview\/popup-button {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 20px;
}

.psc-exchange\/datacenter\/overview\/section\/container {
  border-color: var(--neutral-30);
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  padding: 5px;
}

.psc-exchange\/datacenter\/overview\/section\/root-container {
  padding: 5px;
}

.psc-exchange\/datacenter\/overview\/section\/widget-container {
  border-color: var(--neutral-30);
  border-style: solid;
  border-width: 1px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  padding: 5px;
}

.psc-exchange\/datacenter\/overview\/text\/description {
  color: var(--label);
  font-family: Roboto;
  font-size: 13px;
  overflow-wrap: break-word;
}

.psc-exchange\/datacenter\/overview\/text\/primary-title {
  color: var(--label);
  font-family: Roboto;
  font-size: 21px;
  text-align: center;
}

.psc-exchange\/datacenter\/overview\/text\/secondary-title {
  color: var(--label);
  font-family: Roboto;
  font-size: 18.5px;
  text-align: center;
}

.psc-exchange\/gridcalendar\/container\/hover {
}
.psc-exchange\/gridcalendar\/container\/hover:hover {
  background-color: var(--neutral-30);
  cursor: pointer;
}

.psc-exchange\/gridcalendar\/container\/selected {
  background-color: var(--neutral-30);
}

.psc-exchange\/gridcalendar\/container\/today {
  background-color: var(--neutral-90);
  color: var(--neutral-10);
}

.psc-exchange\/gridcalendar\/typography\/align-center {
  text-align: center;
}

.psc-exchange\/gridcalendar\/typography\/bold {
}

.psc-exchange\/gridcalendar\/typography\/lg {
  font-size: 1.2em;
}

.psc-exchange\/gridcalendar\/typography\/md {
  font-size: 0.9em;
}

.psc-exchange\/gridcalendar\/typography\/out-of-month {
  color: var(--neutral-50);
}

.psc-exchange\/gridcalendar\/typography\/sm {
  font-size: 0.8em;
}

.psc-exchange\/gridcalendar\/typography\/xs {
  font-size: 0.7em;
}

.psc-exchange\/task-toggler\/icon-button {
  background-color: transparent;
  border-style: none;
  box-shadow: none !important;
  outline-style: none;
}

.psc-exchange\/task-toggler\/large-label {
  font-size: 1.5rem;
  font-weight: 600;
}

.psc-exchange\/task-toggler\/small-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: pre-wrap;
}

@keyframes psc-SAW\/Header\/Alarm_Active-anim {
  0% {
    color: #FFFFFF;
    fill: #FFFFFF;
  }
  100% {
    color: #FFCCCC;
    fill: #FFCCCC;
  }
}
.psc-SAW\/Header\/Alarm_Active {
  animation-name: psc-SAW\/Header\/Alarm_Active-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}