/* BEGIN STYLESHEET */
/*
=====================================================================
📘 ADVANCED STYLESHEET - CAREFREE PLATFORM CUSTOM UI THEME
---------------------------------------------------------------------
This stylesheet defines comprehensive custom CSS styling for popups,
responsive layout behavior, button styles, font handling, and utility
animations for the Carefree SCADA platform UI.

Key Sections:
- Variable Declarations
- Popup Containers & Responsive Sizing
- Header and Body Styling
- Button & Input Normalization
- Alarm Animations
- Font Utilities & Themes
- Animated Interactions
=====================================================================
*/

/* === GLOBAL SHADOW VARIABLES === */
:root {
  --psc-shadow-2: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
  --psc-shadow-4: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
  --psc-shadow-8: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);
  font-family: 'Noto Sans', 'Segoe UI', sans-serif;
}

/* === RESPONSIVE WIDTH FOR LOCATION ACTIVE ALARMS POPUP === */
@media (min-width: 501px) {
  #popup-UyCDBsxW {
    width: 60vw !important;      /* Preferred width for larger screens */
    max-width: 95vw !important;  /* Fallback limit */
  }
  #popup-UyCDBsxW .popup-body .view,
  #popup-UyCDBsxW .popup-body .responsive-container,
  #popup-UyCDBsxW .popup-body .ia_container--primary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box;
  }
}

@media (max-width: 500px) {
  #popup-UyCDBsxW {
    width: 95vw !important;      /* Optimized for smartphone viewports */
  }
  #popup-UyCDBsxW .popup-body .view,
  #popup-UyCDBsxW .popup-body .responsive-container,
  #popup-UyCDBsxW .popup-body .ia_container--primary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box;
  }
}

/* === POPUP CONTAINER STYLING === */
.popup,
.ia_popup {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  /* Remove any default borders and outlines */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent;
  /* Allow overflow for dropdowns */
  overflow: visible;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  font-family: 'Noto Sans', 'Segoe UI', sans-serif;
  /* Add border-radius to main container for proper clipping */
  border-radius: 12px;
}

/* Create a rounded background layer */
.popup::after,
.ia_popup::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.2),
    0 16px 48px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: -1;
}

/* Soft neutral tint behind popup */
.popup::before,
.ia_popup::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--neutral-10);
  opacity: 0.3;
  pointer-events: none;
  z-index: -2;
  border-radius: 12px;
}

/* Fade animation for popup lifecycle */
.popup[style*="visibility: visible"] {
  opacity: 1;
  transform: scale(1);
}
.popup[style*="visibility: hidden"] {
  opacity: 0;
  transform: scale(0.98);
}

/* === POPUP HEADER STYLING === */
.popup-header::before,
.ia_popup__header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--neutral-30);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
  border-radius: 12px 12px 0 0;
}

.client-root .popup .popup-header,
.client-root .ia_popup .ia_popup__header {
  position: relative;
  height: 2.5rem !important;
  line-height: 2.5rem !important;
  padding: 0 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  background-color: transparent !important;
  color: var(--neutral-0) !important;
  font-weight: 600;
  font-size: 1rem;  font-family: 'Noto Sans', 'Segoe UI', sans-serif;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  /* Ensure header respects rounded corners */
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

/* === BODY STYLING FOR POPUPS === */
.popup-body {
  position: relative;
  padding: 0.4rem;
  background-color: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Noto Sans', 'Segoe UI', sans-serif;
  /* Allow content to overflow for dropdowns */
  overflow: visible;
}

.popup-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--neutral-10);
  opacity: 0.25;
  pointer-events: none;
  z-index: -1;
  border-radius: 0 0 12px 12px;
}

/* === DROPDOWN SPECIFIC OVERRIDES === */
/* Ensure dropdowns can expand outside popup */
.popup .ia_dropdown__menu,
.popup .dropdown-menu,
.ia_popup .ia_dropdown__menu,
.ia_popup .dropdown-menu {
  position: fixed !important;
  z-index: 9999 !important;
  overflow: visible !important;
}

/* === INPUT EXCEPTIONS FOR DRAGGING === */
.popup-not-draggable {
  user-select: text;
  -webkit-user-select: text;
  pointer-events: auto;
  -webkit-user-drag: none;
}

textarea.ia_textArea {
  resize: none;
  font-family: 'Noto Sans', 'Segoe UI', sans-serif;
}

/* === INPUT EXCEPTIONS FOR DRAGGING === */
.popup-not-draggable {
  user-select: text;
  -webkit-user-select: text;
  pointer-events: auto;
  -webkit-user-drag: none;
}

textarea.ia_textArea {
  resize: none;
  font-family: 'Noto Sans', 'Segoe UI', sans-serif;
}

/* === BUTTON BASE STYLING === */
.ia_popup button,
.ia_popup .ia-button,
.ia_popup .ia_button--primary,
.ia_popup .ia_button--secondary,
.ia_popup .button-primary,
.ia_popup .button-secondary {
  border-radius: 4px !important;
  box-shadow: none;
  outline: none;
  font-family: 'Noto Sans', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: bold;
}

/* === CLOSE ICON INTERACTION === */
.popup .close-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  height: 20px;
  width: 20px;
}

.popup .close-icon:hover {
  transform: rotate(90deg) scale(1.5);
  opacity: 0.8;
}

/* === REMAINING SECTIONS (ALARM FLASH, UTILITIES, ANIMATION) === */


/* -- Carefree Styles -- */
/* Alerts */
@keyframes psc-alert-acked-anim {
	0% {
		background-color: #bc7979;
		border-color: #F44336;
		border-width: 0.25px;
		fill: #FFCDD2;
	}
	100% {
		background-color: #bc7979;
		border-color: #F44336;
		border-width: 0.25px;
		fill: #895858;
	}
  }
.psc-alert-unacked {
	animation-name: psc-alert-acked-anim;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
@keyframes psc-alert-unacked-anim {
	0% {
		background-color: #FFCDD2;
		border-color: #FFCDD2;
		border-width: 0.25px;
		fill: #FFCDD2;
	}
	100% {
		background-color: #F44336;
		border-color: #F44336;
		border-width: 0.25px;
		fill: #F44336;
	}
  }
.psc-alert-unacked {
	animation-name: psc-alert-unacked-anim;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

/* Icons */

/* Shadows */
.psc-shadow-2 {
    box-shadow: var(--psc-shadow-2);
}

.psc-shadow-4 {
    box-shadow: var(--psc-shadow-4);
}

.psc-shadow-hover:hover {
    box-shadow: var(--psc-shadow-8);
    cursor: pointer;
}

/* Backgrounds */
.psc-carefree-header {
	background-color: #3463ae;
	fill: var(--neutral-10);
}
.psc-background {
	background-color: var(--neutral-10);
}

.psc-background-popup {
	background-color: var(--neutral-20);
}

.psc-background-io {
  background-image: linear-gradient(-130deg, var(--neutral-40), var(--neutral-30));
  border-color: var(--neutral-50);
  border-style: solid;
  border-width: 0.25px;
}

/* Specific Font Styles */
.psc-font-base {
	font-family: Noto Sans;
	font-size: 14px;
	color: var(--neutral-90);
}
.psc-font-base:disabled {
	color: var(--neutral-50);
}
.psc-font-subtext {
	font-weight: bold;
	font-size: 12px;
	color: var(--neutral-80);
}

.psc-font-info {
	color: var(--info);
}

.psc-font-bold {
	color: var(--neutral-90);
	font-weight: bold;
}

.psc-font-italic {
	color: var(--neutral-90);
	font-style: italic;
}

.psc-font-sub-header {
	font-weight: bold;
	font-size: 16px;
	color: var(--neutral-80);
}

.psc-font-header {
	font-weight: bold;
	font-size: 20px;
	color: var(--neutral-90);
}

.psc-font-io {
	font-family: monospace;
	font-weight: bold;
	font-size: 18px;
	color: #3463ae;
}

.psc-font-clickable {
	cursor: pointer;
}

.psc-font-clickable:hover {
	color: var(--callToAction--hover);
	text-decoration: underline;
}

/* Common Button Styles */
.psc-button-primary {
	font-family: Noto Sans;
	font-size: 14px;
	font-weight: bold;
	margin: 2.5px;
	background-color: #3463ae;
	color: var(--neutral-10);
	cursor: pointer;
	transition: background-color 1s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.psc-button-primary:disabled {
	background-color: var(--neutral-50);
	color: var(--neutral-30);
	font-style: italic;
	font-weight: bold;
	cursor: not-allowed;
}

.psc-button-primary:hover {
	filter: brightness(1.1); /* Lightens the background color */
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Glow effect */
}

/* Specific Button Styles */
.psc-button-io-active {
	--button-border-color: #00a5e3;
	background-color: #00a5e3;
}

.psc-button-io-inactive {
	--button-border-color: #A9A9A9;
	background-color: #A9A9A9;
}

.psc-button-io-static {
	--button-border-color: #3463ae;
	background-color: #3463ae;
}

.psc-button-navigation {
	--button-border-color: #a6abbd;
	background-color: #a6abbd;
}

.psc-button-tag-create {
	--button-border-color: #00c8f0;
	background-color: #00c8f0;
}

.psc-button-tag-modify {
	--button-border-color: #798897;
	background-color: #798897;
}

.psc-button-db-insert {
	--button-border-color: #007590;
	background-color: #007590;
}

.psc-button-db-update {
	--button-border-color: #00aac6;
	background-color: #00aac6;
}

.psc-button-db-delete {
	--button-border-color: #ac3b45;
	background-color: #ac3b45;
}

.psc-button-db-archive {
	--button-border-color: #cf5a60;
	background-color: #cf5a60;
}

/* Common Button Styles */
/* non-primary button defined at the end to use existing color elements in variables */
.psc-button {
	font-family: Noto Sans;
	font-size: 14px;
	font-weight: bold;
	margin: 2.5px;
	background-color: var(--neutral-20);
	color: var(--neutral-90);
	cursor: pointer;
	border: 2px solid var(--button-border-color, var(--neutral-90)); /* Dynamic border color */
	transition: background-color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.psc-button:hover {
	filter: brightness(1.1); /* Lightens the background color */
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Glow effect */
}
.psc-button:disabled {
	background-color: var(--neutral-50);
	color: var(--neutral-30);
	font-style: italic;
	font-weight: bold;
	cursor: not-allowed;
}

/* Keyframe annimations */
/* From https://animate.style/ */

/* Rubber Band */
.psc-animate-rubberBand {
	animation: rubberBand 2s linear infinite;
}

@keyframes rubberBand {
	from {
	transform: scale3d(1, 1, 1);
	}

	30% {
	transform: scale3d(1.25, 0.75, 1);
	}

	40% {
	transform: scale3d(0.75, 1.25, 1);
	}

	50% {
	transform: scale3d(1.15, 0.85, 1);
	}

	65% {
	transform: scale3d(0.95, 1.05, 1);
	}

	75% {
	transform: scale3d(1.05, 0.95, 1);
	}

	to {
	transform: scale3d(1, 1, 1);
	}
}

/* Jello */
.psc-animate-jello {
	animation: jello 2s linear infinite;
	transform-origin: center;
}

@keyframes jello {
	from,
	11.1%,
	to {
	transform: translate3d(0, 0, 0);
	}

	22.2% {
	transform: skewX(-14.5deg) skewY(-14.5deg);
	}

	33.3% {
	transform: skewX(6.25deg) skewY(6.25deg);
	}

	44.4% {
	transform: skewX(-3.145deg) skewY(-3.145deg);
	}

	55.5% {
	transform: skewX(1.5625deg) skewY(1.5625deg);
	}

	66.6% {
	transform: skewX(-0.78145deg) skewY(-0.78145deg);
	}

	77.7% {
	transform: skewX(0.390625deg) skewY(0.390625deg);
	}

	88.8% {
	transform: skewX(-0.1953145deg) skewY(-0.1953145deg);
	}
}

/* Head Shake */
.psc-animate-headShake {
	animation: headShake 2s ease-in-out infinite;
}

@keyframes headShake {
	0% {
	transform: translateX(0);
	}

	6.5% {
	transform: translateX(-6px) rotateY(-9deg);
	}

	18.5% {
	transform: translateX(5px) rotateY(7deg);
	}

	31.5% {
	transform: translateX(-3px) rotateY(-5deg);
	}

	43.5% {
	transform: translateX(2px) rotateY(3deg);
	}

	50% {
	transform: translateX(0);
	}
}

/* Bounce */
.psc-animate-bounce {
	animation: bounce 2s linear infinite;
	transform-origin: center bottom;
}

@keyframes bounce {
	from,
	20%,
	53%,
	to {
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	transform: translate3d(0, 0, 0);
	}

	40%,
	43% {
	animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	transform: translate3d(0, -30px, 0) scaleY(1.1);
	}

	70% {
	animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	transform: translate3d(0, -15px, 0) scaleY(1.05);
	}

	80% {
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	transform: translate3d(0, 0, 0) scaleY(0.95);
	}

	90% {
	transform: translate3d(0, -4px, 0) scaleY(1.02);
	}
}

/* Flash */
.psc-animate-flash {
	animation: flash 2s linear infinite;
}

@keyframes flash {
	from,
	50%,
	to {
	opacity: 1;
	}

	25%,
	75% {
	opacity: 0;
	}
}

/* Pulse */
.psc-animate-pulse {
	animation: pulse 2s linear infinite;
}

/* Keyframes */
@keyframes pulse {
	0% {
	transform: scale(1.0);
	opacity: 0.9;
	}
	50% {
	transform: scale(1.5);
	opacity: 1;
	}
	100% {
	transform: scale(1.0);
	opacity: 0.9;
	}
}

/* Wiggle */
.psc-animate-wiggle {
	animation: wiggle 1.5s linear infinite;
}

/* Keyframes */
@keyframes wiggle {
	0%, 7% {
	transform: rotateZ(0);
	}
	15% {
	transform: rotateZ(-15deg);
	}
	20% {
	transform: rotateZ(10deg);
	}
	25% {
	transform: rotateZ(-10deg);
	}
	30% {
	transform: rotateZ(6deg);
	}
	35% {
	transform: rotateZ(-4deg);
	}
	40%, 100% {
	transform: rotateZ(0);
	}
}

/* Spin */
.psc-animate-spin {
	animation: spin 1s linear infinite;
	transform-origin: center
}

@keyframes spin { 
	0% {
	transform:rotate(0deg);
	 }
	100% {
	transform:rotate(360deg);
	 }
}

.psc-animate-floater {
	animation: floater 1.5s infinite;
}

/* Keyframes */
@keyframes floater {
	0% {
	transform: translateY(0%);
	}
	50% {
	transform: translateY(8%);
	}
	100% {
	transform: translateY(0%);
	}
}

.psc-animate-bounceIn {
	animation: bounceIn 1.5s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

/* Keyframes */
@keyframes bounceIn {
	0% {
	opacity: 0;
	transform: scale3d(.3, .3, .3);
	}
	20% {
	transform: scale3d(1.1, 1.1, 1.1);
	}
	40% {
	transform: scale3d(.9, .9, .9);
	}
	60% {
	opacity: 1;
	transform: scale3d(1.03, 1.03, 1.03);
	}
	80% {
	transform: scale3d(.97, .97, .97);
	}
	100% {
	opacity: 1;
	transform: scale3d(1, 1, 1);
	}
}

.psc-bg-success {
	background: var(--success);
}
/* BEGIN STYLE CLASSES */
.psc-AdHocRoster\/ButtonContainer {
  background-color: #FFFFFF;
  cursor: pointer;
}
.psc-AdHocRoster\/ButtonContainer:hover {
  background-color: #E5F7FF;
}
.psc-AdHocRoster\/ButtonContainer:focus {
  background-color: #BDEBFF;
}

.psc-AdHocTrends\/AddTag {
  background-color: #E0E0E0;
  border-radius: 0;
  color: #303030;
  margin-top: 4px;
}
.psc-AdHocTrends\/AddTag:hover {
  background-color: #C1C1C1;
}

.psc-AdHocTrends\/Button {
  cursor: pointer;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 0;
  fill: #303030;
}

.psc-AdHocTrends\/ChartRangeSelector {
  border-color: #303030;
  border-style: solid;
  border-width: 1px;
  border-bottom-color: #303030;
}

.psc-AdHocTrends\/Content {
  background-color: #FFFFFF;
  padding: 4px;
}

.psc-AdHocTrends\/DisabledIcon {
  cursor: auto;
  fill: #00000040;
}

.psc-AdHocTrends\/Label {
  color: #1C1C1C;
  font-family: Roboto;
  font-size: 14px;
}

.psc-AdHocTrends\/TagTree {
  border-color: #303030;
  border-style: solid;
  border-width: 1px;
}

.psc-AdHocTrends\/Title {
  color: #303030;
  font-size: 20px;
  font-weight: 500;
  margin-right: 10px;
}

.psc-AdHocTrends\/TitleBar {
  background-color: #D5D5D5;
}

.psc-AdHocTrends\/Tooltip {
  background-color: #E3E3E3;
  color: #333;
  font-family: Arial;
  font-size: 12px;
  text-align: center;
}

.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-Buttons\/DangerButton {
  background-color: var(--warning);
  color: var(--div-9);
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
}

.psc-Buttons\/InLineButton {
  background-color: #FFFFFF00;
  border-style: none;
  color: var(--info);
  font-family: Arial;
  font-size: 12px;
  text-decoration: underline;
}

.psc-Buttons\/PrimaryButton {
  background-color: #105B97;
  color: var(--div-9);
  font-family: Arial;
  font-size: 14px;
  font-weight: bold;
}

.psc-Framework\/ColorPicker\/Container {
  border-color: #CCCCCC;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  padding: 4px;
}

.psc-Framework\/TagPicker\/Button {
  background-image: linear-gradient(180deg, #59B1E8 0%, #47A9E6 100%);
  border-color: #47A9E6;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
  text-transform: uppercase;
  fill: #FFFFFF;
}

.psc-Framework\/TagPicker\/Container {
  border-color: #CCCCCC;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}

.psc-Header\/Header {
  background-color: #105B97;
  fill: var(--div-9);
}

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

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

.psc-HighPerformance\/HmiOn {
  background-color: #FFFFFF;
  color: #FFFFFF;
  stroke: #2E2E2E;
  stroke-width: 10px;
  fill: #FFFFFF;
}

.psc-HighPerformance\/Text {
  color: #1C1C1C;
  font-family: Roboto;
  font-size: 14px;
  text-align: center;
}

.psc-HighPerformance\/Value {
  color: #000080;
  font-family: Roboto;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.psc-HighPerformance\/dashboardAcked {
  background-color: #EF9A9A;
  border-color: #F44336;
  border-style: solid;
  border-width: 0.25px;
  fill: #EF9A9A;
}

.psc-HighPerformance\/dashboardNormal {
  background-image: linear-gradient(-130deg, var(--neutral-40), var(--neutral-30));
  border-color: var(--neutral-50);
  border-style: solid;
  border-width: 0.25px;
}

.psc-Markdown\/Actions {
  border-bottom-color: #CCCCCC;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.psc-Markdown\/Button {
  background-color: #F5F5F5;
  border-color: #CCCCCC;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: #555555;
  cursor: pointer;
  margin-bottom: 4px;
  margin-right: 4px;
}
.psc-Markdown\/Button:hover {
  border-color: #AAAAAA;
}

.psc-Markdown\/Button_Selected {
  background-color: #D5D5D5;
  border-color: #AAAAAA;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: #555555;
  cursor: pointer;
  margin-bottom: 4px;
  margin-right: 4px;
}

.psc-Markdown\/Editor {
  border-color: #CCCCCC;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
}

.psc-Material\/shadows-hover\/None {
}

.psc-Material\/shadows-hover\/start0hover2 {
}
@keyframes psc-Material\/shadows-hover\/start0hover2-0-anim {
  0% {
  }
  100% {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
  }
}
.psc-Material\/shadows-hover\/start0hover2:hover {
  animation-name: psc-Material\/shadows-hover\/start0hover2-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.35s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}
.psc-Material\/shadows-hover\/start0hover2:hover {
  cursor: pointer;
}

.psc-Material\/shadows-hover\/start0hover4 {
}
@keyframes psc-Material\/shadows-hover\/start0hover4-0-anim {
  0% {
  }
  100% {
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
  }
}
.psc-Material\/shadows-hover\/start0hover4:hover {
  animation-name: psc-Material\/shadows-hover\/start0hover4-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.35s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}
.psc-Material\/shadows-hover\/start0hover4:hover {
  cursor: pointer;
}

.psc-Material\/shadows-hover\/start0hover8 {
}
@keyframes psc-Material\/shadows-hover\/start0hover8-0-anim {
  0% {
  }
  100% {
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);
  }
}
.psc-Material\/shadows-hover\/start0hover8:hover {
  animation-name: psc-Material\/shadows-hover\/start0hover8-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.35s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}
.psc-Material\/shadows-hover\/start0hover8:hover {
  cursor: pointer;
}

.psc-Material\/shadows-hover\/start2hover8 {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
}
@keyframes psc-Material\/shadows-hover\/start2hover8-0-anim {
  0% {
  }
  100% {
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);
  }
}
.psc-Material\/shadows-hover\/start2hover8:hover {
  animation-name: psc-Material\/shadows-hover\/start2hover8-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.35s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}
.psc-Material\/shadows-hover\/start2hover8:hover {
  cursor: pointer;
}

.psc-Material\/shadows-hover\/start4hover16 {
  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
}
@keyframes psc-Material\/shadows-hover\/start4hover16-0-anim {
  0% {
  }
  100% {
    box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);
  }
}
.psc-Material\/shadows-hover\/start4hover16:hover {
  animation-name: psc-Material\/shadows-hover\/start4hover16-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.35s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}
.psc-Material\/shadows-hover\/start4hover16:hover {
  cursor: pointer;
}

.psc-Material\/shadows-hover\/start8hover4 {
  box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);
}
@keyframes psc-Material\/shadows-hover\/start8hover4-0-anim {
  0% {
  }
  100% {
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
  }
}
.psc-Material\/shadows-hover\/start8hover4:hover {
  animation-name: psc-Material\/shadows-hover\/start8hover4-0-anim;
  animation-delay: 0s;
  animation-direction: normal;
  animation-duration: 0.35s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}
.psc-Material\/shadows-hover\/start8hover4:hover {
  cursor: pointer;
}

.psc-Material\/shadows\/depth-0 {
}

.psc-Material\/shadows\/depth-1 {
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
}

.psc-Material\/shadows\/depth-12 {
  box-shadow: 0 12px 17px 2px rgba(0,0,0,0.14), 0 5px 22px 4px rgba(0,0,0,0.12), 0 7px 8px -4px rgba(0,0,0,0.20);
}

.psc-Material\/shadows\/depth-16 {
  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.20);
}

.psc-Material\/shadows\/depth-2 {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
}

.psc-Material\/shadows\/depth-24 {
  box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20);
}

.psc-Material\/shadows\/depth-4 {
  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
}

.psc-Material\/shadows\/depth-8 {
  box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20);
}

.psc-Menu\/All_Header {
  background-color: #5C7080;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  line-height: 17px;
  text-transform: none;
}

.psc-Menu\/Item {
  background-color: #E6EAEE;
  border-color: #9B9B9B;
  border-width: 1px;
  border-left-color: #BEBEBE;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: #BEBEBE;
  border-right-style: solid;
  border-right-width: 1px;
  color: #2E2E2E;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
}

.psc-Menu\/Item_Selected {
  background-color: #E6EAEE;
  border-color: #9B9B9B;
  border-width: 1px;
  color: #2E2E2E;
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
}

.psc-Menu\/Menu {
  background-color: #DADDE0;
}

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

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

.psc-Page\/Page {
  background-color: #FFFFFF;
  color: #000000;
  font-size: 14px;
  line-height: 20px;
}

.psc-Page\/Text {
  color: #000000;
  font-size: 14px;
  line-height: 20px;
}

.psc-Title\/Icon {
  fill: #2E2E2E;
}

.psc-Title\/Text {
  color: #2E2E2E;
  font-size: 16px;
  font-weight: bold;
  line-height: 19px;
  margin-left: 6px;
  fill: #2E2E2E;
}

.psc-Title\/Title {
  background-color: #E6EAEE;
}

@keyframes psc-Header\/Alarm_Active-anim {
  0% {
    color: #E7F5FF;
    fill: #E7F5FF;
  }
  100% {
    color: #FFCCCC;
    fill: #FFCCCC;
  }
}
.psc-Header\/Alarm_Active {
  animation-name: psc-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;
}

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

@keyframes psc-HighPerformance\/HmiFault-anim {
  0% {
    background-color: #EBCC45;
    fill: #EBCC45;
  }
  100% {
    background-color: #FF0400;
    fill: #FF0400;
  }
}
.psc-HighPerformance\/HmiFault {
  animation-name: psc-HighPerformance\/HmiFault-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes psc-HighPerformance\/dashboardUnack-anim {
  0% {
    background-color: #FFCDD2;
    border-color: #FFCDD2;
    border-width: 0.25px;
    fill: #FFCDD2;
  }
  100% {
    background-color: #F44336;
    border-color: #F44336;
    border-width: 0.25px;
    fill: #F44336;
  }
}
.psc-HighPerformance\/dashboardUnack {
  animation-name: psc-HighPerformance\/dashboardUnack-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}