@import url('//pro.fontawesome.com/releases/v5.13.0/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&display=swap');

/* fontawesome */
[class*="fa-"]:before {
  font-family: "Font Awesome 5 Pro";
}
.hide {
  display: none !important;
}

ul,
ol {
  padding-left: 40px;
}

main {
  margin: 0 auto;
  text-align: center;
  margin-top: -1.35em;
  position: relative;
  background-color: #000;
  padding-bottom: 2.35em;
}
.progress-tracker {
  font: 14px/140% 'Assistant', sans-serif;
  font-weight: 400;
  counter-reset: steps;
  display: inline-block;
  list-style: none;
  padding: 1rem 0 1.2rem 14em;
  text-align: left;
  margin-bottom: 0;
}
.progress-tracker li {
  border-bottom: solid 4px #989898;
  counter-increment: steps;
  display: inline-block;
  position: relative;
  width: 16em;
  margin-right: -0.375em;
  margin-top: -22px;
}
.progress-tracker li:last-child {
  border-bottom: none;
}
.progress-tracker li:after {
  background: #989898;
  border: solid 4px transparent;
  border-radius: 50%;
  color: #fff;
  content: counter(steps);
  font-weight: bold;
  display: block;
  position: absolute;
  text-align: center;
  width: 2em;
  height: 2em;
  bottom: -1.1em;
  line-height: 2em;
  left: -4px;
}
.progress-tracker li div {
  display: inline-block;
  color: #fff;
  position: relative;
  text-align: center;
  width: 16em;
  left: -7em;
  top: 3.85em;
  font-size: 1.2em;
  font-weight: 700;
  overflow: hidden;
}
.progress-tracker li span {
  display: inline-block;
  color: #fff;
  position: relative;
  text-align: center;
  width: 16em;
  left: -6.68em;
  top: 4.82em;
  font-size: .85em;
  font-weight: 300;
  overflow: hidden;
}
.progress-tracker li.completed {
  border-bottom-color: #205290;
}
.progress-tracker li.completed:after {
  background: #205290;
}
.progress-tracker li.gift:after {
  background: #205290;
}
.progress-tracker li.completed span {
  color: #fff;
}
.progress-tracker li.current:after {
  background: #fff;
  border-color: #205290;
  color: #414141;
}
.progress-tracker li.current span {
  color: #ffffff;
}
.progress-tracker li.skipped {
  border-bottom-color: #205290;
}
.progress-tracker li.skipped:after {
  background: #D44D5C;
  color: #fff;
}
.progress-tracker li.skipped span {
  color: #c02e3e;
}
.progress-tracker li.dotted {
  border-bottom-style: dotted;
}
.progress-tracker.v2 {
  padding-left: 3.25em;
}
.progress-tracker.v2 li {
  width: 6.5em;
}
.progress-tracker.v2 li span {
  width: 6.5em;
  left: -2.25em;
}
.progress-tracker.icon li:after {
  content: "";
  font-family: "Font Awesome 5 Pro";
}
.progress-tracker.icon li.completed:after {
  content: '\f00c';
}
.progress-tracker.icon li.completed.document:after {
  content: '\f0f6';
}
.progress-tracker.icon li.gift:after {
  content: '\f06b';
}
.progress-tracker.icon li.dollar:after {
  content: '\f155';
}
.progress-tracker.icon li.skipped:after {
  content: '\f00d';
}