textarea.form-control {
  /*max-height: 300px; /* Adjust as needed */
  resize: none;
  overflow-y: hidden;
  box-sizing: border-box;
}

.tab {
  display: none;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #04AA6D;
}

/*.thumbnail {
  border: 2px solid transparent;
  border-radius: 5px;
  object-fit: cover;
}*/

.thumbnail.selected {
  border-color: #007bff;
}

.carousel-item img.thumbnail {
  /*width: 100px;
  height: 100px;*/
  object-fit: cover;
  /*border: 2px solid transparent;*/
  border: none;
  cursor: pointer;
}
.carousel-item img.thumbnail.selected {
  /*border-color: #0d6efd; /* highlight when clicked */
  outline: 4px solid #0d6efd;
  outline-offset: -4px;
}
/* Optional: add a small bottom margin to each image for spacing
.carousel-item .col-6 {
  margin-bottom: 0.25rem;
}*/

.carousel-control-next,
.carousel-control-prev {
  width: 5%;
  background: #666666;
  opacity: 0;
  border: none;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1;
}

#thumbnail-carousel .carousel-item {
  /* 380px (image height) × 2 rows = 760px,
     plus a small gap (e.g. 0.5rem ≈ 8px) between rows = ~768px total. */
  min-height: 768px;
}

#thumb-col > .col-6:nth-child(-n+2) {
  padding-bottom: 1rem;
}