.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(--bs-primary);
    border-color: var(--bs-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(--bs-primary);
  }
  
  .step.completed .line {
    border-left: 3px solid var(--bs-primary);
  }
  
  .step.active .circle {
  visibility: visible;
    border-color: var(--bs-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);
  }

  .stepper-container .step.completed .content a {
    color: var(--bs-primary);
    font-weight: bold;
    text-decoration: none;
  }

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

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

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

/** Medium devices (tablets, 768px and up) **/
@media (min-width: 768px) {
  .stepper-container {
      position: -webkit-sticky;
      position: sticky;
      top: 5rem;
      z-index: 1000;
      /* height: calc(100vh - 4rem) */
  }
}