:nth-child(1 of .timeline) {
  counter-reset: timeline-item;
}

/* Timeline card style */
.timeline {
  position: relative;
  margin-left: 3rem;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: var(--md-shadow-z1);
  border: 1px solid var(--md-default-fg-color--lightest);
  margin-bottom: 1rem;
  margin-top: 1rem;

  --md-timeline__bullet-top: 0.8em; /* 1rem (padding top) + 1.6em (line height) / 2 - 1rem (height of the bullet / 2) */
  --md-timeline__bullet-size: 2rem;
}

/* Numbered bullet */
.timeline::before {
  counter-increment: timeline-item;
  content: counter(timeline-item);
  position: absolute;
  left: -3rem;
  top: var(--md-timeline__bullet-top);
  width: var(--md-timeline__bullet-size);
  height: var(--md-timeline__bullet-size);
  background-color: var(--md-steps-bg-color);
  color: var(--md-steps-fg-color);
  border: 1px solid var(--md-steps-border-color);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: var(--md-shadow-z2);
  z-index: 2;
}

.timeline.check::before {
  counter-increment: none;
  content: '✓';
}

.timeline.cross::before {
  counter-increment: none;
  content: '✕';
}

.timeline.primary::before {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  border: unset;
}

.timeline.light::before {
  background-color: var(--md-primary-fg-color--light);
  border: unset;
}

.timeline.dark::before {
  background-color: var(--md-primary-fg-color--dark);
  border: unset;
}

.timeline.success::before {
  background-color: #4cae4f;
  color: #fff;
  border: unset;
}

.timeline.error::before {
  background-color: #ef5552;
  color: #fff;
  border: unset;
}

.timeline.info::before {
  background-color: #02a6f2;
  color: #fff;
  border: unset;
}

/* Full vertical line going through the bullet */
.timeline::after {
  content: '';
  position: absolute;
  left: -2rem;
  --md-timeline__bullet-line-space: 0.5rem;
  top: calc(var(--md-timeline__bullet-top) + var(--md-timeline__bullet-line-space) + var(--md-timeline__bullet-size));
  bottom: calc(-1rem - var(--md-timeline__bullet-top) + var(--md-timeline__bullet-line-space));
  width: 2px;
  border-left: 2px solid var(--md-default-fg-color--lighter);
  z-index: 1;
}

.timeline.dashed::after {
    border-left-style: dashed;
}

.timeline.dotted::after {
    border-left-style: dotted;
}

/* Remove the line for the last item */
:nth-last-child(1 of .timeline)::after {
  border-left: none;
}

.timeline>:first-child {
  margin-top: 0;
}
.timeline>:last-child {
  margin-bottom: 0;
}