.payroll-login-progress {
  --payroll-ink: #263047;
  --payroll-muted: #68738a;
  --payroll-gold: #e8b04b;
  --payroll-track: #e9edf3;
  color: var(--payroll-ink);
}

.payroll-login-progress[hidden] {
  display: none !important;
}

.payroll-login-progress__track {
  height: 0.7rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--payroll-track);
  box-shadow: inset 0 1px 2px rgb(38 48 71 / 9%);
}

.payroll-progress__fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d89a31, var(--payroll-gold));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease-out;
}

.payroll-login-progress__meta {
  color: var(--payroll-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.payroll-login-progress__percent {
  color: var(--payroll-ink);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
}

.payroll-login-error {
  border-radius: 0.65rem;
}

@media (max-width: 575.98px) {
  .payroll-login-progress__track {
    height: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .payroll-progress__fill {
    transition: none;
  }
}