.donut-chart-link {
  width: 80px;
  margin: 0 auto;
}
.donut-chart picture {
  max-width: 240px;
  margin: 0 auto;
  margin-top: 1em !important;
}
.donut-chart-xs picture {
  max-width: 80px;
  margin: 0 auto;
  margin-top: 1em !important;
}
.donut-chart-sm picture {
  max-width: 120px;
  margin: 0 auto;
  margin-top: 1em !important;
}
.donut-chart-md picture {
  max-width: 160px;
  margin: 0 auto;
  margin-top: 1em !important;
}
.donut-chart-lg picture {
  max-width: 200px;
  margin: 0 auto;
  margin-top: 1em !important;
}
.chart-canvas-container {
  margin-top: 1em !important;
}
.chart-group {
  display: flex;
  flex-direction: row; /* Default: Items are displayed horizontally */
	justify-content: space-around;
}
@media screen and (min-width:576px) {
  .chart-canvas {
    flex: 1;
    margin-bottom: 1em;
    line-height: 1em;
    text-align: center;
  }
  .seven-donut .chart-canvas {
    width: 14.285%;
  }
  .six-donut .chart-canvas {
    width: 16.666%;
  }
  .chart-canvas p {
    margin-bottom: 0.5em !important;
    line-height: 1em;
  }
  .chart-canvas-container {
    min-height: 160px;
    margin: 0 auto;
  }
}
@media screen and (max-width:576px) {
  .chart-group {
    display: flex;
    flex-direction: column; /* Default: Items are displayed horizontally */
  }
  .chart-group #button-portfolio-1 {
    order: 7;
  }
  .chart-group #button-portfolio-2 {
    order: 6;
  }
  .chart-group #button-portfolio-3 {
    order: 5;
  }
  .chart-group #button-portfolio-4 {
    order: 4;
  }
  .chart-group #button-portfolio-5 {
    order: 3;
  }
  .chart-group #button-portfolio-6 {
    order: 2;
  }
  .chart-group #button-portfolio-7 {
    order: 1;
  }
  .mt-1 {
    margin-top: 1em !important;
  }
  .sevenitemkey {
    min-height: 746px !important;
  }
  .sixitemkey {
    min-height: 598px !important;
  }
  .selectitemkey {
    min-height: 628px !important;
  }
  .chart-canvas {
    margin-bottom: 1em;
    line-height: 1em;
  }
  .chart-canvas p {
    margin-bottom: 0.1em !important;
    line-height: 1em;
  }
  .sevenitemkey.key-arrow img {
    width: 11.5px;
    margin-left: auto;
    margin-right: auto
  }
  .sixitemkey.key-arrow img {
    width: 9px;
    margin-left: auto;
    margin-right: auto
  }
  .selectitemkey.key-arrow img {
    width: 9.5px;
    margin-left: auto;
    margin-right: auto
  }
}