.custom-dropdown {
  height: 48.5px;
}

.dropdown-button img {
  transition: transform 0.3s ease-out;
}

.dropdown-button[aria-expanded="true"] img {
  transform: rotate(180deg);
}

.dropdown-button:focus-visible,
.select-input:focus-visible {
  outline-style: none;
  outline-width: 0;
}

.dropdown-options {
  display: none;
  top: 105%;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
  z-index: 2;
  max-height: 150px;
  width: 101%;
  left: -1.5px;
}

.dropdown-options li:hover {
  background: rgba(235, 244, 228, 0.5);
}

.dropdown-options::-webkit-scrollbar {
  width: 4px;
}

.dropdown-options::-webkit-scrollbar-thumb {
  background-color: #d7d7d7;
  border-radius: 64px;
}

.dropdown-options li {
  font-size: 0.875rem;
  cursor: pointer;
}

.dropdown-options li:last-child {
  margin-bottom: 0 !important;
}

.dropdown-options li:hover,
.dropdown-options li:active,
.dropdown-options li:focus {
  border-radius: 4px;
  background: #f9f9f9;
}

.dropdown-button[aria-expanded="false"] .select-input:not(.selected) #top-placeholder {
  position: unset;
  font-size: 0.889rem;
  transition: 0.1s ease-in;
}

.dropdown-button[aria-expanded="true"] #top-placeholder,
.select-input.selected #top-placeholder {
  position: absolute;
  font-size: 0.75rem;
  font-weight: 300;
  background-color: var(--bs-light);
  top: -10px;
  left: 15px;
  color: var(--bs-primary);
  transition: 0.1s ease-in;
}

.custom-dropdown[aria-invalid="true"] {
  border: 0.5px solid #d24a4a;
}

.dropdown-li input {
  width: auto;
}

.dropdown-li.placeholder {
  pointer-events: none;
  background-color: #f9f9f9;
  opacity: 1;
}

.dropdown-li label {
  position: relative;
  font-size: 0.889rem !important;
  top: 0 !important;
  left: 0 !important;
  background-color: transparent !important;
}

.dropdown-li.disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.2;
}

.custom-dropdown.input-locked button img {
  display: none;
}

/* Default style for the checkbox */
.custom-dropdown input[type="checkbox"] {
  appearance: none;
  width: 16.5px;
  height: 16.5px;
  border: 2px solid #949D93;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  position: relative;
}

/* Style for the checked state */
.custom-dropdown input[type="checkbox"]:checked {
  background-color: #949D93;
  border-color: #949D93;
}

.custom-dropdown input[type="checkbox"]:checked::before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(%23clip0_11120_22368)"><path d="M3.05078 8.9001L6.20078 12.0501L13.4008 4.8501" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_11120_22368"><rect width="14.4" height="14.4" fill="white" transform="translate(0.800781 0.800049)"/></clipPath></defs></svg>');
  /* Unicode checkmark */
  color: white;
  /* Checkmark color */
  font-size: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Center the checkmark */
}