:root {
    --ct-primary: #7A8844;
    --ct-secondary: #2071A9;
}

.ct-label {
    color: white;
}

.ct-legend li {
    position: relative;
    padding-left: 23px;
    margin-right: 10px;
    margin-bottom: 3px;
    cursor: pointer;
    display: inline-block;
    z-index: 10;
}

.ct-legend li:before {
    height: 80%;
    top: 10%;
    aspect-ratio: 1/1;
    position: absolute;
    left: 0;
    content: '';
    border: 3px solid transparent;
    border-radius: 2px;
}

/* Line chart */

.ct-chart-line {
  overflow: visible;
  margin-left: 20px;
} 

.ct-chart-pie {
  overflow: visible;
}

.ct-series-a .ct-line,
.ct-series-a .ct-point {
  stroke: var(--ct-primary)
}

.ct-legend li:nth-child(1):before {
    background-color: var(--ct-primary)
}

.ct-series-b .ct-line,
.ct-series-b .ct-point {
  stroke: var(--ct-secondary)
}

.ct-legend li:nth-child(2):before {
    background-color: var(--ct-secondary)
}

/* Pie chart */
.ct-series-a .ct-slice-pie {
    /* fill of the pie slieces */
    fill: var(--ct-primary);
    /* give your pie slices some outline or separate them visually by using the background color here */
    stroke: rgba(255,255,255, .5);
    /* outline width */
    stroke-width: 4px;
  }

.ct-chart-pie .ct-label {
  font-weight: 400;
  fill: white;
  font-size: 1em;
  text-transform: capitalize;
}


  .ct-series-b .ct-slice-pie {
    /* fill of the pie slieces */
    fill: var(--ct-secondary);
    /* give your pie slices some outline or separate them visually by using the background color here */
    stroke: white;
    /* outline width */
    stroke-width: 4px;
  }

  .ct-axis-title {
    fill: white;
    font-weight: 300;
  }