/* Show the five employee lifecycle stages as numbered steps, not arrows. */
html body #root .employee-lifecycle .employee-flow-track {
  counter-reset: employee-flow-step;
}

html body #root .employee-lifecycle .employee-flow-stage {
  counter-increment: employee-flow-step;
  justify-content: center !important;
  min-height: 108px !important;
  padding-top: 44px !important;
}

html body #root .employee-lifecycle .employee-flow-stage-arrow {
  display: none !important;
}

html body #root .employee-lifecycle .employee-flow-stage::after {
  content: "PAS " counter(employee-flow-step) !important;
  position: absolute !important;
  top: 10px !important;
  left: 16px !important;
  right: auto !important;
  display: grid !important;
  place-items: center !important;
  min-width: 52px !important;
  height: 26px !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
  border: 1px solid #c6e7e2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #0f766e !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  pointer-events: none !important;
}

html body #root .employee-lifecycle .employee-flow-stage.is-done::after {
  content: "PAS " counter(employee-flow-step) " ✓" !important;
  border-color: #12a89c !important;
  background: #12a89c !important;
  color: #fff !important;
}

html body #root .employee-lifecycle .employee-flow-stage.is-current::after {
  content: "PAS " counter(employee-flow-step) " · ACUM" !important;
  border-color: #12a89c !important;
  background: #12a89c !important;
  color: #fff !important;
}

html body #root .employee-lifecycle .employee-flow-stage.is-warning::after {
  content: "PAS " counter(employee-flow-step) " · ATENȚIE" !important;
  border-color: #f59e0b !important;
  background: #fff7ed !important;
  color: #9a3412 !important;
}

html body #root .employee-lifecycle .employee-flow-stage-label {
  order: 1 !important;
  margin-top: 0 !important;
  padding-right: 0 !important;
  color: #20242a !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}

html body #root .employee-lifecycle .employee-flow-stage-count {
  order: 2 !important;
  margin-top: 7px !important;
  padding-right: 0 !important;
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

html body #root .employee-lifecycle .employee-flow-stage:nth-child(1) .employee-flow-stage-count::after { content: " preluați"; font-weight: 400; }
html body #root .employee-lifecycle .employee-flow-stage:nth-child(2) .employee-flow-stage-count::after { content: " de verificat"; font-weight: 400; }
html body #root .employee-lifecycle .employee-flow-stage:nth-child(3) .employee-flow-stage-count::after { content: " fișe de pregătit"; font-weight: 400; }
html body #root .employee-lifecycle .employee-flow-stage:nth-child(4) .employee-flow-stage-count::after { content: " instruiri rămase"; font-weight: 400; }
html body #root .employee-lifecycle .employee-flow-stage:nth-child(5) .employee-flow-stage-count::after { content: " activi"; font-weight: 400; }

html body #root .employee-lifecycle .employee-flow-stage.is-current {
  background: #f2fbf9 !important;
  border-bottom: 2px solid #12a89c !important;
}

html body #root .employee-lifecycle .employee-flow-stage.is-waiting {
  color: #7b8999 !important;
}