.chart-wrapper{
  display: block;
  margin-bottom: 40px;
  width: 100%;
}

.chart-container {
  margin-bottom: 30px;
}

.chart-legend {
  display: block;
}

div.chart-legend ul {
  list-style: none;
  color: black;
  margin: 0;
  padding: 0;
}

div.chart-legend ul li {
  width: 100%;
  height: 20px;
  display: block;
  margin: 0;
  margin-bottom: 4px;
}

div.chart-legend ul li:nth-child(2n) {
  flex-break: after;
}

div.chart-legend {
  font-family: "Frutiger", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


.chart-legend ul li div.legend-colorbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  float: left;
}

.chart-legend ul li div.legend-textbox {
  display: inline-block;
  height: 20px;
  margin-left: 20px;
}

.chart-legend ul li div p {
  font-size: 12px;
  line-height: 20px;
}

@media (min-width: 1024px) {
  .chart-legend ul li div p {
    font-size: 16px;
  }
  div.chart-legend ul {
    list-style: none;
    color: black;
    margin: 0;
    padding: 0;
  }
  div.chart-legend ul li {
    padding-left: 30px;
  }
  div:not([data-chart-id="staff_count"]) > .chart-legend ul li {
    padding-left: 120px;
  }
}

@media (min-width: 1024px) {
  [data-chart-id="sales_breakdown"] .column {
    display: flex;
    justify-content: space-between;
  }
}