.percentile-chart {
  display: flex;
  flex-wrap: wrap;
  width: 100%; }
  .percentile-chart__tooltip, .percentile-chart__pay-tooltip, .percentile-chart__pay-tooltip-end, .percentile-chart__pay-tooltip-start {
    background-color: #333;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: small;
    margin-bottom: 15px;
    max-width: 100px;
    padding: 3px 10px;
    position: relative; }
    .percentile-chart__tooltip::after, .percentile-chart__pay-tooltip::after, .percentile-chart__pay-tooltip-end::after, .percentile-chart__pay-tooltip-start::after {
      border-left: solid 10px transparent;
      border-right: solid 10px transparent;
      border-top: solid 10px #333;
      content: '';
      margin: 0 auto;
      position: absolute;
      top: calc(100% - 3px);
      width: 0; }
  .percentile-chart__tooltip::after, .percentile-chart__pay-tooltip::after {
    left: 0;
    right: 0; }
  .percentile-chart__pay-tooltip-end::after {
    border-right: 0;
    left: calc(100% - 10px);
    right: 0; }
  .percentile-chart__pay-tooltip-start::after {
    border-left: 0;
    left: 0;
    right: 100%; }
  .percentile-chart__label {
    color: #a4a1aa;
    font-size: small;
    font-weight: 700;
    margin-top: 5px; }
  .percentile-chart__edge, .percentile-chart__edge--pay {
    flex: 2; }
  .percentile-chart__edge {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center; }
  .percentile-chart__edge--large {
    flex: 5; }
  .percentile-chart__edge-bar-low, .percentile-chart__edge-bar-high, .percentile-chart__edge-bar-low--pay, .percentile-chart__edge-bar-high--pay {
    height: 30px; }
  .percentile-chart .percentile-chart__label--hidden {
    visibility: hidden; }
  .percentile-chart__edge-bar-low + .percentile-chart__label, .percentile-chart__edge-bar-low--pay + .percentile-chart__label {
    text-align: right; }
  .percentile-chart__edge-bar-high + .percentile-chart__label, .percentile-chart__edge-bar-high--pay + .percentile-chart__label {
    text-align: left; }
  .percentile-chart__middleTooltips {
    display: flex;
    justify-content: space-between; }
  .percentile-chart__low {
    flex: 3; }
    .percentile-chart__low .percentile-chart__tooltip::after {
      border-left: 0;
      left: 0;
      right: 100%; }
  .percentile-chart__middle {
    flex: 10;
    text-align: center; }
    .percentile-chart__middle .percentile-chart__label {
      text-align: center; }
  .percentile-chart__high {
    flex: 3;
    text-align: right; }
    .percentile-chart__high .percentile-chart__label {
      text-align: right; }
    .percentile-chart__high .percentile-chart__tooltip::after {
      border-right: 0;
      left: calc(100% - 10px);
      right: 0; }
  .percentile-chart__low-bar {
    background-color: #f8a66e;
    height: 30px; }
  .percentile-chart__middle-bar {
    height: 30px;
    position: relative;
    width: 100%; }
    .percentile-chart__middle-bar::after {
      border-left: 1px dashed #fff;
      content: '';
      height: 20px;
      left: 50%;
      margin-top: 5px;
      position: absolute;
      transform: translate(-50%);
      z-index: 1; }
  .percentile-chart__high-bar {
    background-color: #00aaa4;
    height: 30px; }
  .percentile-chart__median {
    color: #a4a1aa;
    flex: 0 0 100%;
    font-size: small;
    font-weight: 700;
    margin-top: 5px;
    text-align: center; }
  .percentile-chart .gradient-bar {
    height: 100%;
    width: 100%; }
    .percentile-chart .gradient-bar .svg-ghost-light {
      stop-color: #e9e9ec; }
    .percentile-chart .gradient-bar .svg-white {
      stop-color: #fff; }
    .percentile-chart .gradient-bar .svg-turqoise-dark {
      stop-color: #18969b; }
    .percentile-chart .gradient-bar .svg-cerulean {
      stop-color: #2d67b9; }

#percentileChart {
  margin-top: 15px; }