/* ol.stepper {
    --default-b: lightgrey;
    --default-c: black;
    --active-b: #3563E9;
    --active-c: white;
    --circle: 1.9em;
    --b: 2px;
  
    display: flex;
    list-style: none;
    justify-content: space-between;
    background: 
      linear-gradient(var(--default-b) 0 0) no-repeat
      0% calc((var(--circle) - var(--b))/2)/0% var(--b),
      linear-gradient(var(--default-b) 0 0) no-repeat
      0% calc((var(--circle) - var(--b))/2)/100% var(--b);
    margin: 20px;
    padding: 0;
    font-size: 16px;
    counter-reset: step;
    overflow: hidden;
  }
  
  ol.stepper li {
    display: grid;
    place-items: center;
    gap: 5px;
    font-family: sans-serif;
    position: relative;
  }
  ol.stepper li::before {
    content: counter(step) " ";
    counter-increment: step;
    display: grid;
    place-content: center;
    aspect-ratio: 1;
    height: var(--circle);
    border: 3px solid #fff;
    box-sizing: border-box;
    background: var(--active-b);
    color: var(--active-c);
    border-radius: 50%;
    font-family: monospace;
    z-index: 1;
  }
  ol.stepper li.active ~ li::before{
    background: var(--default-b);
    color: var(--default-c);
  }
  ol.stepper li.active::after {
    content: "";
    position: absolute;
    height: var(--b);
    right: 0;
    top: calc((var(--circle) - var(--b))/2);
    width: 100vw;
    background: var(--active-b);
  } */
  
  .flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center; /* Center items vertically */
    height: 100px; /* Set height as needed */
    width: auto;
  }
  
  .flex-item {
    width: 200px;
    height: 2px; /* Set height of each line */
    background-color: grey;
  }
  .bg-greyish{
    background-color: #F3F4F6;
    color: #000000;
    /* border: 2px solid #000000; */
    outline: 1px solid grey
  }