:root{
      --step-outline: #d0d5db;          /* grey outline for each step */
      --step-num-bg: #5da675;           /* green circle (Bootstrap success) */
      --step-arrow: #cdd4db;            /* arrow color between steps */
      --step-gap: 1rem;                 /* spacing between steps */
      --step-radius: .5rem;             /* corner radius for step cards */
      --step-padding: 1rem;             /* inner padding */
      --step-number-size: 28px;         /* circle diameter for number */
    }

 .stepper-wrap{
      display: flex;
      gap: var(--step-gap);
      align-items: stretch;
      justify-content: space-between;
      flex-wrap: nowrap;
    }

    /* Each step as a card-like box with outline */
    .step-card{
      position: relative;
      flex: 1 1 0;
      background: var(--bs-body-bg);
      border: 1px solid var(--step-outline);
      border-radius: var(--step-radius);
      padding: calc(var(--step-padding) + .25rem) var(--step-padding) var(--step-padding) var(--step-padding);
      min-width: 0;               /* allow text wrapping */
      box-shadow: 0 1px 0 rgba(0,0,0,.02);
    }

    /* Left-aligned text */
    .step-title{
      font-weight: 600;
      margin: 1rem;
      text-align: left;
    }
    .step-desc{
      margin-top: 0.7em;
      color: var(--bs-secondary-color);
      text-align: left;
      margin-right:1rem;
      margin-left: 1rem;
      line-height: 1.35;
    }

    /* Step number in the upper-right corner inside green circle */
    .step-number{
      position: absolute;
      top: .5rem;
      right: .5rem;
      width: var(--step-number-size);
      height: var(--step-number-size);
      line-height: var(--step-number-size);
      border-radius: 50%;
      background: var(--step-num-bg);
      color: #fff;
      font-weight: 700;
      font-size: .95rem;
      text-align: center;
      box-shadow: 0 0 0 3px var(--bs-body-bg); /* creates a subtle ring effect */
    }

    /* Arrow between steps (not after the last) */
    .step-card:not(:last-child){
      margin-right: calc(var(--step-gap) + 18px); /* space for arrow */
    }
    .step-card:not(:last-child)::after{
      content: "";
      position: absolute;
      top: 50%;
      right: calc(-18px - var(--step-gap) / 2);
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
      border-left: 18px solid var(--step-arrow); /* triangle arrow */
    }

    /* Optional states (kept for future use) */
    .is-active{
      border-color: var(--bs-primary);
      box-shadow: 0 0 0 .2rem rgba(13,110,253,.08);
    }
    .is-done{
      border-color: var(--bs-success);
    }

    /* Responsive: stack on very small screens and swap arrows for chevrons */
    @media (max-width: 575.98px){
      .stepper-wrap{
        flex-direction: column;
        gap: .75rem;
      }
      .step-card{
        margin-right: 0 !important;
      }
      .step-card:not(:last-child)::after{
        /* Replace triangle with a small downward chevron-like bar */
        content: "";
        left: 50%;
        right: auto;
        top: calc(100% + .25rem);
        transform: translateX(-50%);
        width: 28px;
        height: 4px;
        border: none;
        background: var(--step-arrow);
        clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%);
      }
    }


    .stepcontainer {
  width: 100%;
}

.hstepstep {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.hstepvstepper {
  position: relative;
  padding-top: 5px;
}


.hstepstep .hstepcircle {
  background-color: white;
  border: 3px solid gray;
  border-radius: 100%;
  width: 25px;   
  height: 25px;  
  display: inline-block;  
}

.hstepstep .hstepline {
  top: 25px;
  left: 11px;
  height: 100%;    
  position: absolute;
  border-left: 3px solid gray;
}

.shtepstep.hstepcompleted .hstepcircle {  
  background-color: #605E3E;
  border-color: #605E3E;
}

.hstepstep.hstepcompleted .hstepline {
  border-left: 3px solid #605E3E;
  z-index: -1;
}

.hstepstep.hstepactive .hstepcircle {
visibility: visible;
  border-color: rgb(6,150,215);
}

.hstepstep.hstepempty .hstepcircle {
    visibility: hidden;
}

.hstepstep.hstepempty .hstepline {
  top: 0;
  height: 150%;
}


.hstepstep:last-child .hstepline {
  border-left: 3px solid white;
  z-index: -1; 
}

.hstepcontent {
  margin-left: 20px;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 300;

}

.hstepcontent a.hover,.hstepcontent a.visited,.hstepcontent a {
	color: #ffffff;
}