:root {
  --legtan: rgb(206, 187, 134);
  --legblue: rgb(0, 48, 95);
  --InProgress: #70ad47;
  --BillQuashed: #c00000;
  --BillPassed: rgb(255,215, 0);
  --NotReached:rgba(169, 168, 168);
  --wtf: #a23fff;
}

.stepper-item:hover {
  cursor: pointer;
}

.stepper-item.locked {
  background-color: #ddd;
}

.legend {
  list-style: none;
}

.step-counter a.active {
  min-width: 100px;
  min-height: 70px;
  padding: 20px;
  text-align: center;
}

.stepper-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
  gap: 0px;
  padding: 10px;
  counter-reset: step;
}

.stepper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  counter-increment: step;
}

.step-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 5px;
  background-color: var(--InProgress);
  color: white;
  min-width: 100px;
  min-height: 50px;
  font-size: large;
  margin-bottom: 10px; /* Distance between circles */
}

.step-counter a {
  color: white;
  text-decoration: none;
}

.step-counter a:hover,
.step-counter a:focus {
  text-decoration: underline;
  color: #e0e0e0;
}

/* Vertical connectors for small screens */
@media (max-width: 768px) {
  .stepper-wrapper {
      grid-template-columns: 6fr;
  }

  .stepper-item::after {
      content: '';
      position: absolute;
      top: 50%;
      bottom: -30px; /* Should be negative gap size */
      left: 50%;
      width: 2px;
      background-color: var(--InProgress);
      z-index: -1;
  }

  .stepper-item:last-child::after {
      content: none; /* No connector for the last item */
  }
}

/* Base state: vertical layout */
.stepper-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: 20px;
  /* other styles */
}

@media (max-width: 1399px) {
  .stepper-wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* creates three columns */
      gap: 20px;
  }

  .stepper-item::after, .stepper-item::before {
      content: none; /* removes vertical connectors */
  }
}

/* Horizontal layout for wider screens */
@media (min-width: 1400px) {
  .stepper-wrapper {
      display: grid;
      grid-template-columns: repeat(9, 1fr); /* creates 9 columns */
      gap: 20px;
  }

  .stepper-item::after, .stepper-item::before {
      content: none; /* removes vertical connectors */
  }
}

a.uctitle {
    text-transform: capitalize;
}

.NotReached {
  background-color: var(--NotReached);
  color: black;
}

.step-counter.NotReached {
  background-color: var(--NotReached) !important;
  color: black !important;
}


.BillPassed {
  background-color: var(--BillPassed);
}

.BillQuashed {
  background-color: var(--BillQuashed);
  color: white;
}

.BillInProgress {
  background-color: var(--InProgress);
  color: black;
}

.BillPassed a, .BillPassed a:hover,
.BillPassed a:focus {
  color: black;
}

.BillQuashed a:hover,
.BillQuashed a:focus,
.LightgreyDarkgreyMediumgrey a:hover,
.LightgreyDarkgreyMediumgrey a:focus {
  text-decoration: underline;
  color: #ffffff;
}

/* Debugging element positioning css */
/** {*/
/*    border: 1px solid red;*/
/*}*/