.progress-bar[data-v-0d22edb6]{
  position:relative;
  display:block;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:start;
      -ms-flex-pack:start;
          justify-content:flex-start;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  width:100%;
  height:0.5rem;
  border-radius:9999px;
  --bg-opacity:1;
  background-color:#cbd5e0;
  background-color:rgba(203, 213, 224, var(--bg-opacity));
  -webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
          box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
}
.progress-bar[data-v-0d22edb6]::before{
  content:"";
  background-color:#00c853;
  background-image:-webkit-gradient(linear, left top, right top, from(#00b0ff), to(#00c853));
  background-image:linear-gradient(to right, #00b0ff 0%, #00c853);
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  display:inline-block;
  border-radius:9999px
}
@supports((-webkit-clip-path: inset(0 0 0 0)) or (clip-path: inset(0 0 0 0))){
.progress-bar[data-v-0d22edb6]::before{
    width:100%;
    -webkit-clip-path:inset(0px calc(100% - var(--profile-completion, 100%)) 0px 0px);
            clip-path:inset(0px calc(100% - var(--profile-completion, 100%)) 0px 0px)
}
}
@supports not ((-webkit-clip-path: inset(0 0 0 0)) or (clip-path: inset(0 0 0 0))){
.progress-bar[data-v-0d22edb6]::before{
    width:var(--profile-completion, 100%)
}
}
.progress-bar-label[data-v-0d22edb6]{
  font-style:normal;
  display:inline-block;
  margin-left:1rem;
  --text-opacity:1;
  color:#4a5568;
  color:rgba(74, 85, 104, var(--text-opacity));
  font-size:1rem;
  font-weight:700;
  line-height:1
}

/*# sourceMappingURL=chunk-5ba91ac2.css.map*/