.chart {

  .chart-details {
    opacity: 0.9;

    svg.details-point {
      position: relative;
      top: -3px; left: 50%;
      margin: 0 0 0 -12.5px;

      polygon {
        fill:#ffffff;
      }
    }

    .chart-details-content {
      opacity: 1;
      color: $mm-sem-neutral-80;
      font-size: 12px;
      line-height: 1.6;

      padding: 16px;
      background-color: #ffffff;

      white-space: nowrap;
    }

    &.details-above {

      .chart-details-content {
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.13);
      }
    }

    &.details-low-left {

      .chart-details-content {
        border-radius: 10px 0 10px 10px;
      }
    }

    &.details-low-right {

      .chart-details-content {
        border-radius: 0 10px 10px 10px;
      }
    }

    &.details-high-left {

      .chart-details-content {
        border-radius: 10px 10px 0 10px;
      }
    }

    &.details-high-right {

      .chart-details-content {
        border-radius: 10px 10px 10px 0;
      }
    }
  }
}