/* line 1, app/assets/stylesheets/components/circle_progress.scss */
.circle-progress {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--sera-color-neutral-gray-med-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 11, app/assets/stylesheets/components/circle_progress.scss */
.circle-progress::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: white;
  z-index: 2;
}

/* line 21, app/assets/stylesheets/components/circle_progress.scss */
.circle-progress::after {
  content: "";
  position: absolute;
  background: conic-gradient(var(--sera-color-core-blue-mid-blue-500) calc(var(--progress) * 1%), transparent calc(var(--progress) * 1%));
  width: 18px;
  height: 18px;
  border-radius: 50%;
  z-index: 1;
  box-sizing: border-box;
}