/* chart.component.css */
:host {
  display: block;
  width: 100%;
}

canvas {
  width: 100% !important;
  max-height: 400px; /* Atur tinggi maksimal sesuai keinginan Anda */
  height: auto !important;
}

:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
  stroke: green;
  stroke-width: 50px !important;
}

:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
  stroke: yellow;
  stroke-width: 50px !important;
}

:host ::ng-deep .donut-chart1 .ct-series-c .ct-slice-donut {
  stroke: orange;
  stroke-width: 50px !important;
}

:host ::ng-deep .donut-chart1 .ct-series-d .ct-slice-donut {
  stroke: red;
  stroke-width: 50px !important;
}

:host ::ng-deep .donut-chart1 .ct-series-e .ct-slice-donut {
  stroke: darkred;
  stroke-width: 50px !important;
}

/* :host ::ng-deep .donut-chart1{
  margin-bottom: -25px;
  margin-top: -17px;
}

:host ::ng-deep .donut-chart2{
  margin-bottom: -25px;
  margin-top: -17px;
} */

:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
  stroke: #8a8a8a;
  stroke-width: 20px !important;
}

:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
  stroke: #BEF264;
  stroke-width: 20px !important;
}

/* :host ::ng-deep .donut-chart2 {
-webkit-filter: drop-shadow(0px 10px 11px rgba(187,187,187)) !important;
  filter: drop-shadow(0px 10px 11px rgba(187,187,187));
} */

:host ::ng-deep .donut-chart2 .ct-label {
  fill: #ffffff;
  color: rgb(255, 255, 255);
  font-size: 1.75rem;
  line-height: 1;
}

:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point{
  stroke: #BEF264;
}
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line{
  stroke: #BEF264;
}
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area{
  fill: #BEF264;
  fill-opacity: 1;
}
:host ::ng-deep .sp-line-total-cost .ct-point{
  stroke-width: 0px;
}

:host ::ng-deep .progress-bar {
  background-color: #BEF264 !important;
}