/* Make the search box more prominent */
.select2-container--default .select2-search .select2-search__field {
  /* border-left: 1px solid #aaa !important; */
  margin-top:0px !important;
  vertical-align: middle !important;
  margin-top: 4px !important;
  height: 22px !important;
}

/* Mobile styles */
@media screen and (max-width: 767px) {
  .select2-container--default .select2-search .select2-search__field {
    width: 100% !important;
  }
}


/* Increase dropdown size */
.select2-dropdown-large {
  min-width: 300px;
}

/* Style for selected items to take less space */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  padding: 2px 5px;
  margin-top: 4px;
  margin-right: 5px;
  font-size: 0.9em;
}

/* Make the container taller to accommodate the search box */
.select2-selection-large.select2-container--default .select2-selection--multiple {
  min-height: 42px;
  padding-bottom: 4px;
}

/* Keep the search input visible and prominent */
.select2-search--inline .select2-search__field {
  min-width: 150px !important;
  margin-top: 6px !important;
  padding-left: 4px !important;
}

/* Ensure the search field doesn't get too small */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding-right: 8px;
}

/* Make the clear button (x) larger and more clickable */
.select2-container--default .select2-selection--multiple .select2-selection__clear {
  font-size: 1.5em !important;
  margin-right: 8px !important;
  margin-top: 4px !important;
  padding: 0 5px !important;
  cursor: pointer !important;
  font-weight: bold !important;
}

/* Add some hover effect for better UX */
.select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
  color: #d9534f !important;
}

/* Remove left border from search field when focused */
.select2-container--default .select2-search .select2-search__field:focus {
  border-left: none !important;
  outline: none !important;  /* This prevents the default focus outline */
  padding-left: 0px !important;
}

.data-source-wrapper ul{ 
  list-style: disc outside none;
}

.data-source-wrapper .data-source-column {
    margin-bottom: 11px;
}
