:root {
  --light:#F5F5F5;
  --dark:#212121;
  --grey:#e2e2e2;
  --red:#d64a34;
  --orange:#8177a7;
  --green:#473e66;
  --red-lite:#d64a343d;
  --orange-lite:#8177a73d;
  --green-lite:#473e663d;
}
*, *::before, *::after { box-sizing:border-box }

.metric-group {
  display:flex;
}

.metric {
  margin:10px;
  max-width:90px;
  display:grid;
  gap:16px;
  place-items:center;
  
  .label {
    font-weight:700;
    font-size:1rem;
  }
}


.circle-chart {
  
  --selected-color: var(--green);
  
  color:var(--selected-color);
  width:75px;
  display:grid;
  place-items:center;
  
  > * {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  
  .circle-bg {
    fill: var(--selected-color-lite);
    stroke: var(--selected-color-lite);
    stroke-width: 2.8;
  }

  .circle {
    fill: none;
    stroke: var(--selected-color);
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1.2s ease-in-out forwards;
    
  }
  
  .percentage {
    font-family: Monaco, monospace;
    font-weight:bold;
    font-size: 1.7rem;
  }
  
}


@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.range-cont {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 0px;
  place-items: center;
}
.range {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  place-items: center;
}
.range-icon-low {
  min-width: .25rem;
  }
.range-icon-med {
  background-color: var(--orange);
  min-width: .25rem;
}
.range-icon-high {
  min-width: .25rem;
}
.range-low {
  fill: var(--red);
}
.range-med {
  fill: var(--orange);
}
.range-high {
  fill: var(--green);
  stroke: none;
}