/* BEGIN STYLESHEET */
/*---------- Navigation Syles ----------*/
.psc-NavGroupSmall {max-height: 50px; transition: max-height 0.5s ease-in-out;}
.psc-NavGroup {max-height: 1000px; transition: max-height 1s ease-in-out;}
/*.psc-NavGroup:hover {max-height: 1000px;transition: max-height 1s ease-in-out;}*/

.psc-NavGroupIcon { transition: transform 0.5s ease;}
.psc-NavGroup:hover .psc-NavGroupIcon {transform: rotate(90deg);}

/*.psc-NavTo {max-height: 50px; transition: max-height 0.5s ease-in-out;}*/
/*.psc-NavTo:hover {max-height: 1000px; transition: max-height 0.5s ease-in-out;}*/

/*---------- Style for zooming when hovering ----------*/

.psc-Zoom {transition: transform 300ms;}
.psc-Zoom:hover {transform: scale(1.05);}

/*---------- Style for PopUps ----------*/

.psc-PopUp {animation: fadeIn 0.3s ease-in;opacity: 1;}
@keyframes fadeIn {from { opacity: 0; } to { opacity: 1; }}

/*----------Pipe Flow Styles----------*/

.psc-PipeFlow_Horizontal_Water {width: 100%; height: 20px; background-image: repeating-linear-gradient( to right,
    				 #00B4FFFE 0%, #00DCFFFE 5%, #00B4FFFE 10%);
  				 background-size: 200% 100%; animation: Flow_Horizontal 4s linear infinite; }
  				 
.psc-PipeFlow_Vertical_Water {width: 20px; height: 100%; background-image: repeating-linear-gradient( to bottom,
    				 #00B4FFFE 0%, #00DCFFFE 5%, #00B4FFFE 10%);
  				 background-size: 100% 200%; animation: Flow_Vertical 4s linear infinite; }

@keyframes Flow_Horizontal {0% { background-position: 0% 0%; }100% { background-position: -100% 0%; }}

@keyframes Flow_Vertical {0% { background-position: 0% 0%; }100% { background-position: 0% -100%; }}


/*---------- Map Styles----------*/

.psc-RadialPulse_Blue {position: relative;}
.psc-RadialPulse_Blue::before,
.psc-RadialPulse_Blue::after {content: '';border: 1px solid #3399FF;position: absolute;top: 50%;left: 50%;width: 40px;height: 40px;border-radius: 50%;background-color: transparent;transform: translate(-50%, -50%) scale(0);opacity: 0.8;animation: PulseRipple 4s infinite;}
.psc-RadialPulse_Blue::after {animation-delay: 0.25s; /* half the duration for overlapping effect */}

.psc-RadialPulse_Green {position: relative;}
.psc-RadialPulse_Green::before,
.psc-RadialPulse_Green::after {content: '';border: 1px solid #8AFF8A;position: absolute;top: 50%;left: 50%;width: 40px;height: 40px;border-radius: 50%;background-color: transparent;transform: translate(-50%, -50%) scale(0);opacity: 0.8;animation: PulseRipple 4s infinite;}
.psc-RadialPulse_Green::after {animation-delay: 0.25s; /* half the duration for overlapping effect */}

.psc-RadialPulse_Red {position: relative;}
.psc-RadialPulse_Red::before,
.psc-RadialPulse_Red::after {content: '';border: 2px solid #FF0000;position: absolute;top: 50%;left: 50%;width: 40px;height: 40px;border-radius: 50%;background-color: transparent;transform: translate(-50%, -50%) scale(0);opacity: 0.8;animation: PulseRipple 2s infinite;}
.psc-RadialPulse_Red::after {animation-delay: 0.25s; /* half the duration for overlapping effect */}


@keyframes PulseRipple {0% {transform: translate(-50%, -50%) scale(0);opacity: 0.8;}100% {transform: translate(-50%, -50%) scale(3);opacity: 0;}}

.psc-LinearPulseHorizontal_Red {position: relative; width: 100%; height: 20px; overflow: hidden;}
.psc-LinearPulseHorizontal_Red::before,
.psc-LinearPulseHorizontal_Red::after {content: ''; position: absolute; top: 0; left: -5px; width: 5px; height: 100%; background-color: #FF0000; opacity: 0; animation: LinearPulseHorizontal 1s linear infinite;}
.psc-LinearPulseHorizontal_Red::after {animation-delay: 1s;}

.psc-LinearPulseVertical_Red {position: relative; width: 20px; height: 100%; overflow: hidden;}
.psc-LinearPulseVertical_Red::before,
.psc-LinearPulseVertical_Red::after {content: '';position: absolute; top: -5px; left: 0; width: 100%;height: 5px;background-color: #FF0000;opacity: 0;animation: LinearPulseVertical 1s linear infinite;}
.psc-LinearPulseVertical_Red::after {animation-delay: 1s;}

@keyframes LinearPulseHorizontal {0% {left: -5px;opacity: 0;}10% {opacity: 0.8;}90% {opacity: 0.8;}100% {left: 100%;opacity: 0;}}
@keyframes LinearPulseVertical {0% {top: -5px;opacity: 0;}10% {opacity: 0.8;}90% {opacity: 0.8;}100% {top: 100%;opacity: 0;}}


/*Dark Map*/
.psc-leafletTile img.leaflet-tile {
  filter: invert(80%) hue-rotate(160deg) brightness(80%) contrast(80%) grayscale(80%);
}








/* BEGIN STYLE CLASSES */
.psc-AlarmingIcon_Good {
  color: #00C46B9E;
}

.psc-Clickable {
  cursor: pointer;
  overflow: hidden;
}

.psc-DigitalOutput {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  font-family: Verdana;
  font-size: 12px;
  font-weight: normal;
  padding-left: 10px;
  padding-right: 10px;
}

.psc-MapIcon_Good {
  fill: #FFFFFF;
}

.psc-NavigationGroup {
  color: var(--neutral-80);
  cursor: pointer;
  font-family: Verdana;
  overflow: hidden;
  overflow-x: hidden;
}

.psc-NavigationNavTo {
  color: var(--neutral-80);
  cursor: pointer;
  font-family: Verdana;
  overflow: hidden;
  overflow-x: hidden;
}

@keyframes psc-AlarmingIcon_Active-anim {
  0% {
    color: #FFFF00;
  }
  100% {
    fill: #FFFF004D;
  }
}
.psc-AlarmingIcon_Active {
  animation-name: psc-AlarmingIcon_Active-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes psc-MapIcon_Alarm-anim {
  0% {
    fill: #FFFFFF80;
  }
  100% {
    fill: #FF000080;
  }
}
.psc-MapIcon_Alarm {
  animation-name: psc-MapIcon_Alarm-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}