.custom-input {
  border: none;
  border-bottom: 1px solid #8F8F8F8F;
  /* Change the color as needed */
  border-radius: 0;
  box-shadow: none;
  outline: none;
  resize: none;
}

.custom-input:focus {
  border-bottom: 2px solid #8F8F8F8F;
  /* Change the color as needed */
  box-shadow: none;
}

.form-floating label {
  color: #8F8F8F8F;
  /* Remove default padding */
  top: 0.45rem;
  /* Adjust as needed */
}

.form-floating .custom-input:focus+label,
.form-floating .custom-input:not(:placeholder-shown)+label {
  top: 0;
  font-size: 0.85rem;
  color: #8F8F8F8F;
}

.range-thumb {
  position: absolute;
  top: -30px;
  /* Position above the slider */
  padding: 4px 8px;
  border-radius: 4px;
  transition: left 0.1s ease-in-out;
  /* Smooth movement */
}


/* Smooth transitions for dimension changes */
textarea.form-control {
  transition: height 0.2s ease, width 0.2s ease;
}

/* For small screens, we might want a minimum height so it starts big enough for comfortable typing */
@media (max-width: 768px) {
  textarea.form-control {
    min-height: 60px;
    /* or set a fixed width if you don't want it stretching edge-to-edge on mobile */
    /* width: 100%; */
  }
}

/* For large screens, we might want a min-width to avoid tiny text boxes */
@media (min-width: 769px) {
  textarea.form-control {
    min-width: 120px;
  }
}

/* Adjust chevron position */
.accordion-button::after {
  margin-left: 0 !important;
  order: 1;
  /* Makes chevron appear after text */
}

/* Text alignment */
.accordion-button {
  text-align: right;
  justify-content: flex-end !important;
}