.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.bg-gradient {
    background: linear-gradient(
    to left,
    rgba(66, 41, 120, 0.6),
    rgba(98, 33, 239, 0.6)
    );
}

.selectable {
    border: 3px solid transparent;
    padding: 8px;
    border-radius: 10px;
}

.active {
    border-color: #422978;
    transition: border-color 0.3s ease-in-out;
}

.border-gradient {
    border: 4px solid transparent; /* Transparent border to allow gradient */
    border-radius: 10px; /* Adjust as needed */
    background: linear-gradient(white, white) padding-box,
    linear-gradient(180deg, #d0dcdc 0%, #81719d 27%, #422978 100%)
        border-box;
}

.option.active {
    background-color: #422978; /* Set the background color for the active option */
    border-radius: 9999px;
    color: white; /* Set text color for active state */
    opacity: 1; /* Ensure full opacity for active state */
    transition: background-color 0.05s ease, color 0.05s ease,
    opacity 0.05s ease; /* Very fast transition */
}


select {
    appearance: none; /* Removes default styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("/Images/dropdown.png");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 20px; /* Adjust the size of the arrow */
      padding-right: 40px; /* Space for the arrow */
}

.options-scroll-wrapper {
    overflow-x: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    height: auto;
  }
  .options-scroll-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  .option {
    min-width: 300px; /* Adjust as needed */
    flex: 0 0 auto;
  }
  .option:hover {
    border-radius: 9999px;
  }