.measure-container {
  height: 100%;
  width: 100%;

  .measure-line {
    fill: none;
    pointer-events: all;
    position: relative;
    stroke: #000;
    stroke-width: 1px;

    &.mean-line {
      stroke: #00f;
    }

    &.mean-absolute-deviation-line {
      stroke: #9980ff;
      stroke-width: .5px;

      &.range-line {
        stroke: #00adff;
        stroke-width: 1;
      }
    }

    &.median-line {
      stroke: #f00;
    }

    &.plotted-value-line {
      stroke: green;
    }

    &.standard-deviation-line {
      stroke: #9980ff;
      stroke-width: .5px;

      &.range-line {
        stroke: #30f;
        stroke-width: 1;
      }
    }
  }

  .standard-error-path {
    stroke: #f6768e;
    stroke-width: 1px;
  }

  .standard-error-hover-cover {
    stroke: #f6768e;
    stroke-width: 6px;
    opacity: 0.001;
    pointer-events: all;

    &:hover, &.highlighted {
      opacity: .2;
    }
  }

  .box-plot-ici {
    stroke: #3300ff !important;
    stroke-width: 2px !important;
  }

  .full-height-lines {
    stroke: #f6768e;
    opacity: 0;

    &.highlighted {
      opacity: 1;
    }

    &.ici {
      stroke: #3300ff;
    }
  }

  .normal-curve {
    fill: none;
    stroke: #027d34;
    stroke-width: 1px;
  }

  .normal-curve-hover-cover {
    stroke: #027d34;
    stroke-width: 6px;
    opacity: 0.001;
    pointer-events: visibleStroke;

    &:hover, &.highlighted {
      opacity: .2;
    }
  }

  .measure-tip {
    display: none;
    fill: #000;
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
    position: absolute;
    stroke: transparent;

    &.visible {
      display: block;
    }

    &.offset {
      transform: translate(0, 17px)
    }
  }

  .measure-cover {
    fill: none;
    opacity: 0;
    pointer-events: all;
    position: relative;
    stroke: #000;
    stroke-width: 5px;

    &.mean-cover {
      stroke: #00f;
    }

    &.mean-absolute-deviation-cover {
      stroke: #5bbaff;
    }

    &.median-cover {
      stroke: #f00;
    }

    &.plotted-value-cover {
      stroke: green;
    }

    &.standard-deviation-cover {
      stroke: #9980ff;
    }

    &:hover, &.highlighted {
      opacity: .2;
    }
  }

  .measure-range {
    fill-opacity: .5;
    stroke: none;
    stroke-width: 0;

    &.mean-absolute-deviation-range {
      fill: #9ac6ff;
    }

    &.standard-deviation-range {
      fill: #9980ff;
    }
  }
}

.measure-labels {
  position: absolute;
  height: 100%;
  top: 0;
  width: 100%;

  .measure-labels-tip {
    background: #ff0;
    cursor: move;
    font-size: 12px;
    font-weight: bold;
    opacity: .6;
    padding: 2px 4px;
    pointer-events: all;
    position: absolute;
    z-index: 10;

    &:hover, &.highlighted {
      opacity: 1;
    }
  }
}
