.showFindBins {
  display: flex;
  gap: 15px;
  justify-content: center;
}

#step1 {
  display: flex;
  justify-content: center;
}

.half-width {
  width: 50%;
}

.available-bins {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  border: 2px solid #38761d;
  border-radius: 8px;
  margin: 5px;
  background-color: white;
}

.available-bins:hover {
  background-color: rgb(207 228 202 / 50%); /* Changes background color on hover */
  cursor: pointer;
}

.drop-off-locations {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}

.drop-off-location:hover, .preferred-drop-off-times:hover {
  background-color: rgb(207 228 202 / 50%); /* Changes background color on hover */
  opacity: .5;
}

.drop-off-location, .preferred-drop-off-times {
  cursor: pointer;
}

.results-container {
  display: flex;
  justify-content: center;
}

.results-data {
  width: 100%;
  display: flex;
  justify-content: center;
}

.summary {
  width: 40%;
}

.summary-info {
  background: #cfe7ce;
  padding: 10px;
}

.order-back {
  display: flex;
  gap: 10px;
  align-items: center;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.summary-item {
  padding: 5px 0px;
  border-bottom: 1px solid black;
}

#editFindBins {
  display: flex;
  justify-content: center;
}

#toggleEdit {
  cursor: pointer;
}

#backToShow {
  cursor: pointer;
}

.bold {
  font-weight: bold;
}

.drop-off-locations-icon {
  height: 150px;
}

.bin-image-size {
  height: 120px
}

.large-green {
  font-size: 26px;
  color: #38761d;
  font-weight: bold;
}

#terms-error {
  color: red;
  font-weight: bold;
  margin-top: 10px;
}

.flatpickr-mobile:before { content: attr(placeholder); color: gray; }

@media (max-width: 850px) { /* Adjust breakpoint as needed */
  .results-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .results-data {
    width: 100%;
  }
  .summary {
      width: 100%;
  }
  /* .bin-image-size {
      height: 120px;
  } */
  .available-bins {
    flex-direction: column;
  }
  th {
    padding: 5px;
    font-size: 12px;
  }
  td {
    padding: 5px;
    font-size: 12px;
  }
  #step1 {
    flex-wrap: wrap;
  }
  .half-width{
    width: 100%;
  }
}