.stepper-container {
  width: 100%;
  text-align: justify;
}

.stepper-tips {
font-size: 0.875em;
}

.step {

  padding: 10px;
  
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  
  background-color: cream;
}

.v-stepper {
  position: relative;
/*   visibility: visible; */
}


/* regular step */
.step .circle {
  background-color: white;
  border: 3px solid gray;
  border-radius: 100%;
  width: 20px;    /* +6 for border */
  height: 20px;
  display: inline-block;
}

.step .line {
    top: 20px;
  left: 8.5px;
/*   height: 120px; */
  height: 100%;
    
    position: absolute;
    border-left: 3px solid gray;
}

.step:last-child .line {
  height: 0%;
}

.step.completed .circle {
  visibility: visible;
  background-color: var(--primary);
  border-color: var(--primary);
}

.stepper-tips .step.completed .circle {
  background-color: transparent;
  border: 0;
  margin-top: -5px;
}

.stepper-tips .step.completed .circle::before {
  /* font-family: 'Boo'; */
  font-family: 'bootstrap-icons';
  content: '\f46b';
  color: var(--primary);
}

.step.completed .line {
  border-left: 3px solid var(--primary);
}

.step.active .circle {
visibility: visible;
  border-color: var(--primary);
}

.step.empty .circle {
    visibility: hidden;
}

.step.empty .line {
/*     visibility: hidden; */
/*   height: 150%; */
  top: 0;
  height: 150%;
}


.step:last-child .line {
  border-left: 3px solid white;
  z-index: -1; /* behind the circle to completely hide */
}

.stepper-container .content {
  margin-top: -3px;
  margin-left: 20px;
  display: inline-block;
  padding: 0;
}

.stepper-container .content label {
  color: var(--secondary);
  font-weight: bold;
}

.stepper-container .step.completed .content label {
  color: var(--primary);
}

.stepper-container .step.active .content label {
  color: var(--dark);
}

.stepper-container .step.active .content p {
  font-size: 0.875rem;
}