/* html {
    background-color: #f9fafb;
} */
.disabled:hover {
  cursor: not-allowed;
}

/* .dark {
    background-color: #111827;
} */

.iti--allow-dropdown {
    width: 100%;
}

/* Base container */
.select2-container {
  width: 100% !important;
}

/* Main select element style */
.select2-selection--single, .select2-selection--multiple {
  height: 2.65rem !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  padding-left: 0.75rem !important;
  padding-right: 2.5rem !important;
  background-color: #fff !important;
  border-color: #D1D5DB !important;
  border-width: 1px !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.select2-selection--multiple {
  background-color: #fff !important;
  border-color: #D1D5DB !important;
  border-width: 1px !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
}

:is(.dark .select2-selection--single, .dark .select2-selection--multiple) {
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) !important;
  border-color: #374151 !important;
}

/* Remove default Select2 arrow */
.select2-selection__arrow {
  display: none !important;
}

.select2-search__field .select2-selection--multiple {
  display: none !important;
}

/* Add custom arrow using background image */
.select2-selection--single, .select2-selection--multiple {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
}

:is(.dark .select2-selection--single) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Selection text */
.select2-selection__rendered {
  line-height: 2rem !important;
  color: #374151 !important;
  font-size: 1rem !important;
}

:is(.dark .select2-selection__rendered) {
  color: #e5e7eb !important;
}

/* Remove outline from container */
.select2-container--default .select2-selection--single {
  outline: none !important;
}

/* Dropdown styles */
.select2-dropdown {
  border-color: #D1D5DB !important;
  border-radius: 0.375rem !important;
  margin-top: 1px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  background-color: #fff !important;
}

:is(.dark .select2-dropdown) {
  border-color: #374151 !important;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Search field in dropdown */
.select2-search__field {
  height: 2.5rem !important;
  padding: 0.5rem 0.75rem !important;
  border-color: #D1D5DB !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  background-color: #fff !important;
  color: #374151 !important;
}

:is(.dark .select2-search__field) {
  border-color: #374151 !important;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) !important;
  color: #e5e7eb !important;
}

.select2-search__field:focus {
  outline: none !important;
}

:is(.dark .select2-search__field:focus) {
  outline: none !important;
}

/* Options in dropdown */
.select2-results__option {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  color: #374151 !important;
}

:is(.dark .select2-results__option) {
  color: #e5e7eb !important;
}

/* Hover state for options */
.select2-results__option--highlighted[aria-selected] {
  background-color: #F3F4F6 !important;
  color: #111827 !important;
}

:is(.dark .select2-results__option--highlighted[aria-selected]) {
  background-color: #374151 !important;
  color: #f9fafb !important;
}

/* Selected option */
.select2-results__option[aria-selected=true] {
  background-color: #E5E7EB !important;
}

:is(.dark .select2-results__option[aria-selected=true]) {
  background-color: #4b5563 !important;
}

/* Placeholder color */
.select2-selection__placeholder {
  color: #9ca3af !important;
}

/* Selected options */
.select2-selection__choice {
  background-color: #C3DDFD !important;
  border-color: #C3DDFD !important;
  font-size: 14px !important;
}

:is(.dark .select2-selection__choice) {
  background-color: #1E429F !important;
  border-color: #1E429F !important;
  font-size: 14px !important;
  color: white;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #ff0000 !important;
}

:is(.dark .select2-container--default .select2-selection--single) {
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)) !important;
  background-color: rgb(55 65 81 / var(--tw-border-opacity, 1)) !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.select2-container--default .select2-selection--single {
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)) !important;
  background-color: rgb(249 250 251 / var(--tw-border-opacity, 1)) !important;
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 0.875rem !important;
  padding-left: 0px !important;
}

/* Smoother accordion transition */

#flows-accordion .flow-content.hidden {
  display: block !important; /* Override display:none */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  transition-duration: 0.3s;
  transition-property: max-height, opacity, padding, margin;
  transition-timing-function: ease;
}

#flows-accordion .flow-content:not(.hidden) {
  max-height: 2000px; /* Large enough for your content */
  opacity: 1;
  transition-duration: 0.5s;
  transition-property: max-height, opacity, padding, margin;
  transition-timing-function: ease;
}

[data-accordion-icon] {
  transition: transform 0.3s ease;
}