.status-display {
  svg {
    height: 300px;
    width: 100%;

    .water {
      stroke: #1ca8dd;
      stroke-width: 3px;
      fill: none;
      opacity: .6;
    }

    .measurement {
      font-size: 11px;
      font-weight: bold;
      // fill: #a9aebd;
      fill: #333;
    }

    .aquarium,
    .sump {
      fill: none;
      stroke-width: 2px;
      stroke: #000;
    }

    .lights {
      stroke-width: 3px;

      &.on {
        stroke: #3c763d;
      }

      &.off {
        stroke: #777;
      }
    }

    .pump {
      fill: none;
      stroke-width: 3px;

      &.on {
        stroke: #3c763d;
      }

      &.off {
        stroke: #a94442;
      }
    }

    .aquarium-return,
    .sump-return {
      fill: none;
      stroke: #000;
    }

    .aquarium-return {
      stroke-width: 5px;
    }

    .sump-return {
      stroke-width: 3px;
    }
  }
}

.status-display {
  svg {
    height: 300px;
    width: 100%;

    .water {
      stroke: #1ca8dd;
      stroke-width: 3px;
      fill: none;
      opacity: .6;
    }

    .measurement {
      font-size: 11px;
      font-weight: bold;
      // fill: #a9aebd;
      fill: #333;
    }

    .aquarium,
    .sump {
      fill: none;
      stroke-width: 2px;
      stroke: #000;
    }

    .lights {
      stroke-width: 3px;

      &.on {
        stroke: #3c763d;
      }

      &.off {
        stroke: none;
      }
    }

    .pump {
      fill: none;
      stroke-width: 3px;

      &.on {
        stroke: #3c763d;
      }

      &.off {
        stroke: #a94442;
      }
    }

    .aquarium-return,
    .sump-return {
      fill: none;
      stroke: #000;
    }

    .aquarium-return {
      stroke-width: 5px;
    }

    .sump-return {
      stroke-width: 3px;
    }
  }
}

Hide lights path when lights are off
Hide lights path when lights are off
