.work-center {
  --active-color: #174f91;
  --active-soft: #e8f1ff;
}

.work-center.center-module-two {
  --active-color: #176f78;
  --active-soft: #e6f7f7;
}

.work-center.center-module-three {
  --active-color: #684798;
  --active-soft: #f1eafb;
}

.work-center.center-module-review {
  --active-color: #986300;
  --active-soft: #fff3cf;
}

.work-center-location {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 13px 18px;
  border: 2px solid var(--active-color);
  border-radius: 17px;
  background: var(--active-soft);
  color: #102c52;
}

.work-center-location::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--active-color);
  box-shadow: 0 0 0 5px #fff;
}

.work-center-location span {
  color: var(--active-color);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .1em;
}

.work-center-location b {
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--active-color);
  color: #fff;
}

.work-center-location small {
  color: #536a83;
  font-weight: 750;
}

.work-center-score > div {
  background: radial-gradient(circle at center, #143f74 0 57%, transparent 58%),
    conic-gradient(var(--active-color) var(--center-progress), rgba(255, 255, 255, .18) 0);
}

.work-center-module-one.is-current,
.work-center-path-step.is-current {
  border-color: #174f91;
  background: #e8f1ff;
  box-shadow: 0 0 0 3px rgba(23, 79, 145, .13);
}

.later-module.module-two.is-current {
  border-color: #176f78;
  background: #e6f7f7;
  box-shadow: 0 0 0 3px rgba(23, 111, 120, .13);
}

.later-module.module-three.is-current {
  border-color: #684798;
  background: #f1eafb;
  box-shadow: 0 0 0 3px rgba(104, 71, 152, .13);
}

.later-module.module-review.is-current {
  border-color: #986300;
  background: #fff3cf;
  box-shadow: 0 0 0 3px rgba(152, 99, 0, .13);
}

.work-center-stage-dots button.is-current {
  border-color: var(--active-color);
  background: var(--active-soft);
}

.work-center-stage-dots button.is-current > span {
  background: var(--active-color);
  color: #fff;
}

@media (max-width: 760px) {
  .work-center-location {
    grid-template-columns: auto 1fr;
  }

  .work-center-location small {
    grid-column: 2;
  }
}
