.calio-progress-pie-wrapper {
  text-align: center;
}

.calio-progress-pie-wrapper .calio-progress-pie {
  text-align: center;
  position: relative;
  transform-style: preserve-3d;
  padding: 20px;
}

.calio-progress-pie-wrapper .calio-progress-pie svg {
  margin-inline: auto;
}

.calio-progress-pie-wrapper .calio-progress-pie svg ellipse {
  stroke: #f5f5f5;
}

.calio-progress-pie-wrapper .calio-progress-pie svg path {
  stroke: #14abf4;
}

.calio-progress-pie-wrapper .calio-progress-pie .calio-progress-pie-number,
.calio-progress-pie-wrapper .calio-progress-pie .calio-progress-pie-text {
  font-size: 32px;
  font-weight: 700;
}

.calio-progress-pie-wrapper .calio-progress-pie.calio-pp-lc-square svg path {
  stroke-linecap: square;
}

.calio-progress-pie-wrapper .calio-progress-pie.calio-pp-lc-round svg path {
  stroke-linecap: round;
}

.calio-progress-pie-wrapper .calio-progress-pie.calio-pp-lc-butt svg path {
  stroke-linecap: butt;
}

.calio-progress-pie-wrapper .calio-progress-pie .calio-progress-pie-label {
  inline-size: 100%;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  transform: translateY(-50%);
}

.calio-progress-pie-wrapper .calio-progress-pie .calio-progress-pie-label div {
  line-height: 1.2em;
}

.calio-progress-pie-wrapper .calio-progress-pie .calio-progress-pie-svg {
  display: inline-block;
  position: relative;
  inline-size: 100%;
  padding-block-end: 100%;
  vertical-align: middle;
  overflow: hidden;
}

.calio-progress-pie-wrapper .calio-progress-pie .calio-progress-pie-svg svg {
  display: inline-block;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

.calio-progress-pie-wrapper .calio-progress-pie .calio-progress-pie-svg svg * {
  fill: none;
}

.calio-progress-pie-wrapper .calio-progress-pie-title {
  text-align: center;
  padding: 30px;
  margin: 0;
  font-size: 1.1rem;
}

.calio-progress-pie-wrapper .calio-progress-pie-title:not(.calio-no-divider) {
  border-block-start: 1px solid rgba(100, 100, 100, 0.1);
}

