.chart {
  margin: 5px;
}
.chart h4 {
  text-align: center;
  margin-bottom: 3px;
}
.chart .content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chart .content .legend {
  margin: 5px;
  list-style: none;
  font-size: 85%;
}
.chart .content .legend > li {
  display: flex;
  cursor: default;
}
.chart .content .legend > li .color {
  display: inline-block;
  min-width: 12px;
  height: 10px;
  line-height: 10px;
  margin: 6px;
  transition: all 0.3s;
}
.chart .content .legend > li .label {
  padding: 4px 0;
  transition: all 0.3s;
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: currentColor;
}
.chart .content .legend > li.active .color {
  margin: 5px;
  min-width: 14px;
  height: 12px;
}
.chart .content .legend > li.active span.label,
.chart .content .legend > li.active a.label:not(:hover) {
  -webkit-text-stroke-width: 0.4px;
}
.chart .content .visualisation .description {
  text-align: center;
}
.chart .content .visualisation .description:empty::before {
  content: "\00a0";
  display: inline;
}
.chart .content .visualisation .description .value {
  font-weight: bold;
}
.chart .content .visualisation .description .percent {
  font-size: 80%;
}
.chart.pie .visualisation {
  min-width: 210px;
}
.chart.pie .visualisation .pie-sector {
  cursor: default;
}
.chart.pie .visualisation .pie-sector .color {
  transition: transform 0.3s;
}
.chart.pie .visualisation .pie-sector.active .color:not(ellipse) {
  transform: translateY(-5px);
}