// .progressDial {
//   height: calc(220px + 4rem);
//   position: relative;
//   padding: 2rem;
// }

// .dial-text {
//   font-size: 2rem;
//   font-weight: bold;
//   color:white;
//   display:flex;
//   justify-content:center;
//   margin-top:70px;
//   margin-bottom: 0.5rem;
// }

// .dial-subtext {
//   text-align: center;
//   color:white;
//   display: flex;
//   justify-content: center;
//   line-height: 1.2rem;
//   font-size: 1rem;
// }

// .fill-dial {
//   transform: rotate(-90deg);
//   margin: auto;
// }

// .progressDial circle {
//   transition: stroke-dashoffset 1s linear;
//   stroke-width: 0.5em;
//   stroke: #FFFFFF;
// }

// .dial-bg {
//   opacity:0.3;
//   stroke-dashoffset: 0;
// }

// .dial-fg {
//   stroke: #FFFFFF;
// }


// #svgWrapper {
//   width:220px;
// }

// #svgWrapper svg {
//   position:absolute;
// }

// .max-w-90-60 {
//   max-width: min(90%,60rem);
// }

// Progress circle
.progressDial {
  height: calc(220px + 4rem);
  position: relative;
  padding: 2rem;
  .fill-dial {
      transform: rotate(-90deg);
      margin: auto;
      circle {
        transition: stroke-dashoffset 1s linear;
        stroke-width: 0.5em;
        stroke: #FFFFFF;
      }
      .dial-bg {
        opacity:0.3;
        stroke-dashoffset: 0;
      }
      .dial-fg {
        stroke: #FFFFFF;
      }
  }

  .dial-text {
    font-size: 2rem;
    font-weight: bold;
    color:white;
    display:flex;
    justify-content:center;
    margin-top:70px;
 }

 .dial-subtext {
  text-align: center;
  color:white;
  display: flex;
  justify-content: center;
  line-height: 1.2rem;
 }
}

#svgWrapper {
  width:220px;

  svg {
    position:absolute;
  }
}