.etafe-progress-bar {
  position: relative;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.etafe-progress-bar .etafe-progress-count,
.etafe-progress-bar .etafe-progress-title {
  margin: 0;
  font-weight: 600;
  color: var(--etafeTitleColor);
  position: relative;
  z-index: 1;
}
.etafe-progress-bar .etafe-progress-count {
  margin-inline-start: auto;
}
.etafe-progress-bar.layout-circle {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
}
.etafe-progress-bar .progress-bar-line {
  position: relative;
  overflow: hidden;
  display: block;
  height: 20px;
  width: 100%;
  background-color: var(--etafeBorderColor);
}
.etafe-progress-bar .progress-bar-line .progress-line-inner {
  position: absolute;
  left: 0;
  top: 50%;
  height: 100%;
  width: 0;
  background-color: var(--etafePrimaryColor);
  transform: translateY(-50%);
  transition: width 1500ms linear;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.etafe-progress-bar .progress-bar-line .progress-line-inner .etafe-progress-count,
.etafe-progress-bar .progress-bar-line .progress-line-inner .etafe-progress-title {
  flex-shrink: 0;
  color: var(--etafePrimaryFgColor);
  font-size: 14px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.etafe-progress-bar .progress-bar-line .progress-line-inner .etafe-progress-count {
  margin-inline-start: auto;
}
.etafe-progress-bar .progress-bar-line .progress-line-inner.stripe-style {
  --stripeLineColor: rgba(255, 255, 255, 0.15);
}
.etafe-progress-bar .progress-bar-line .progress-line-inner.stripe-style:after {
  content: "";
  position: absolute;
  top: 0;
  left: -35px;
  width: calc(100% + 70px);
  height: 100%;
  background-image: linear-gradient(45deg, var(--stripeLineColor) 25%, transparent 25%, transparent 50%, var(--stripeLineColor) 50%, var(--stripeLineColor) 75%, transparent 75%, transparent);
  background-size: 35px 35px;
}
.etafe-progress-bar .progress-bar-line .progress-line-inner.stripe-style-animation {
  --stripeAnimationSpeed: 2s;
}
.etafe-progress-bar .progress-bar-line .progress-line-inner.stripe-style-animation:after {
  animation: etaStripeAnimation var(--stripeAnimationSpeed) linear infinite;
}
@keyframes etaStripeAnimation {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(35px, 0);
  }
}
.etafe-progress-bar .progress-bar-circle {
  position: relative;
  width: var(--circleSize);
  height: var(--circleSize);
  overflow: hidden;
  --strokeWidth: 15px;
  --strokeColor: var(--etafeBorderColor);
  --strokeFillColor: var(--etafePrimaryColor);
  --circleSize: 200px;
}
.etafe-progress-bar .progress-bar-circle .etafe-progress-count {
  margin: 0;
}
.etafe-progress-bar .progress-bar-circle .progress-circle-inner {
  width: var(--circleSize);
  height: var(--circleSize);
  border: var(--strokeWidth) solid var(--strokeColor);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  justify-content: center;
}
.etafe-progress-bar .progress-bar-circle .progress-circle-lines {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--circleSize);
  height: var(--circleSize);
  clip-path: inset(0 0 0 50%);
}
.etafe-progress-bar .progress-bar-circle .progress-circle-lines .progress-circle-line-left,
.etafe-progress-bar .progress-bar-circle .progress-circle-lines .progress-circle-line-right {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--circleSize);
  height: var(--circleSize);
  border: var(--strokeWidth) solid var(--strokeFillColor);
  border-radius: 50%;
  clip-path: inset(0 50% 0 0);
}
.etafe-progress-bar .progress-bar-circle .progress-circle-lines .progress-circle-line-left {
  transform: rotate(0deg);
}
.etafe-progress-bar .progress-bar-circle .progress-circle-lines .progress-circle-line-right {
  transform: rotate(180deg);
  visibility: hidden;
}