/* BEGIN STYLESHEET */
/* Direct stylesheet authoring is an advanced feature. Knowledge of CSS required.*/


/* BEGIN STYLE CLASSES */
.psc-exchange\/water\/Card {
  background-color: var(--neutral-20);
  border-color: var(--neutral-80);
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: 0px 2px 4px rgba(0, 0, 40, 0.15);
  margin: 5px;
}

.psc-exchange\/water\/Card_Title {
  background-color: --seq-1;
  border-bottom-color: var(--neutral-40);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  color: var(--neutral-90);
  font-size: 12px;
  font-weight: bold;
  padding-left: 6px;
  padding-right: 6px;
  text-transform: uppercase;
  fill: var(--seq-6);
}

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

.psc-exchange\/water\/border-radius {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.psc-exchange\/water\/chart {
  background-color: var(--neutral-30);
  border-color: var(--neutral-70);
  border-style: solid;
  border-width: 1px;
  color: var(--neutral-100);
  stroke: #D900D9;
}

.psc-exchange\/water\/error {
  background-color: var(--error);
  border-color: #FFFFFF;
}

.psc-exchange\/water\/filter-mobile {
  font-size: min(1.8vw,1.8vh);
}
@media (max-width: 959px) {
  .psc-exchange\/water\/filter-mobile {
    font-size: max(2.5vw, 2vh);
  }
}

.psc-exchange\/water\/icon\/mode-auto {
  border-color: #00000000;
  border-style: dashed;
  border-width: 4px;
}

.psc-exchange\/water\/icon\/mode-hand {
  border-color: var(--qual-10);
  border-style: dashed;
  border-width: 4px;
}

.psc-exchange\/water\/icon\/mode-off {
  border-color: var(--neutral-80);
  border-style: dashed;
  border-width: 4px;
}

.psc-exchange\/water\/indicator\/mode-auto {
  background-color: var(--success);
  border-color: var(--neutral-80);
  border-style: solid;
  border-width: 0.15vw;
  border-top-left-radius: max(0.2vw,0.2vh);
  border-top-right-radius: max(0.2vw,0.2vh);
  border-bottom-left-radius: max(0.2vw,0.2vh);
  border-bottom-right-radius: max(0.2vw,0.2vh);
  color: var(--neutral-100);
}

.psc-exchange\/water\/indicator\/mode-hand {
  background-color: var(--qual-10);
  border-color: var(--qual-10);
  border-style: dashed;
  color: var(--neutral-100);
}

.psc-exchange\/water\/indicator\/mode-off {
  background-color: var(--neutral-50);
  border-color: var(--neutral-80);
  border-style: dashed;
  border-width: 0.15vw;
  border-top-left-radius: max(0.2vw,0.2vh);
  border-top-right-radius: max(0.2vw,0.2vh);
  border-bottom-left-radius: max(0.2vw,0.2vh);
  border-bottom-right-radius: max(0.2vw,0.2vh);
}

.psc-exchange\/water\/indicator\/pointer {
  cursor: pointer;
}

.psc-exchange\/water\/indicator\/state-backwash {
  background-color: var(--seq-2);
  color: var(--neutral-100);
}

.psc-exchange\/water\/indicator\/state-off {
  background-color: var(--callToAction--disabled);
}

.psc-exchange\/water\/indicator\/state-on {
  background-color: var(--success);
}

.psc-exchange\/water\/info-row\/base {
  background-color: var(--neutral-60);
  color: var(--neutral-90);
}

.psc-exchange\/water\/odd-row {
  background-color: var(--neutral-30);
  color: var(--neutral-90);
}

.psc-exchange\/water\/primary {
  background-color: var(--neutral-30);
  border-color: var(--neutral-70);
}

.psc-exchange\/water\/secondary {
  background-color: var(--neutral-60);
  border-color: var(--neutral-20);
}

.psc-exchange\/water\/secondary-title {
  background-color: var(--neutral-20);
  color: var(neutral-90);
}

.psc-exchange\/water\/value-disp {
  background-color: var(--neutral-10);
  border-color: var(--neutral-90);
  color: var(--neutral-90);
}

@keyframes psc-exchange\/water\/Alarm_Active-anim {
  0% {
  }
  100% {
    background-color: var(--qual-5);
  }
}
.psc-exchange\/water\/Alarm_Active {
  animation-name: psc-exchange\/water\/Alarm_Active-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-exchange\/water\/indicator\/state-faulted-anim {
  0% {
    color: var(--neutral-100);
  }
  100% {
    background-color: var(--error);
    color: var(--neutral-100);
  }
}
.psc-exchange\/water\/indicator\/state-faulted {
  animation-name: psc-exchange\/water\/indicator\/state-faulted-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 750ms;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes psc-exchange\/water\/indicator\/state-off-faulted-anim {
  0% {
    color: var(--neutral-100);
  }
  100% {
    background-color: var(--error);
    color: var(--neutral-100);
  }
}
.psc-exchange\/water\/indicator\/state-off-faulted {
  animation-name: psc-exchange\/water\/indicator\/state-off-faulted-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 750ms;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes psc-exchange\/water\/indicator\/state-on-faulted-anim {
  0% {
    color: var(--neutral-100);
  }
  100% {
    background-color: var(--error);
    color: var(--neutral-100);
  }
}
.psc-exchange\/water\/indicator\/state-on-faulted {
  animation-name: psc-exchange\/water\/indicator\/state-on-faulted-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 750ms;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes psc-exchange\/water\/message-anim {
  0% {
    background-color: var(--seq-3);
    color: var(--neutral-10);
    font-weight: bold;
  }
  100% {
    background-color: var(--seq-5);
    color: var(--neutral-10);
    font-weight: bold;
  }
}
.psc-exchange\/water\/message {
  animation-name: psc-exchange\/water\/message-anim;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}