/* Select2 Custom Styling — themed via data-theme on */ /* ============================================ SELECTION BOX (The visible select button) ============================================ */ /* Dark theme (default) */ .select2-container--default .select2-selection--single { background-color: #000000 !important; border: none !important; border-radius: 0.375rem !important; padding: 0.5rem !important; height: auto !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #eab308 !important; font-weight: 700 !important; font-size: 1.125rem !important; text-align: center !important; line-height: 1.75rem !important; padding: 0 !important; } .select2-container--default .select2-selection--single:hover { background-color: #111827 !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #eab308 transparent transparent transparent !important; } /* Light theme */ html[data-theme="light"] .select2-container--default .select2-selection--single { background-color: #f3f4f6 !important; } html[data-theme="light"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #000000 !important; } html[data-theme="light"] .select2-container--default .select2-selection--single:hover { background-color: #e5e7eb !important; } html[data-theme="light"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #000000 transparent transparent transparent !important; } /* Blue theme */ html[data-theme="blue"] .select2-container--default .select2-selection--single { background-color: #060d1e !important; } html[data-theme="blue"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #eab308 !important; } html[data-theme="blue"] .select2-container--default .select2-selection--single:hover { background-color: #0c1629 !important; } html[data-theme="blue"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #eab308 transparent transparent transparent !important; } /* ============================================ DROPDOWN (The search box and options list) ============================================ */ /* Dark theme (default) */ .select2-dropdown { background-color: #000000 !important; border: 1px solid #374151 !important; border-radius: 0.375rem !important; } .select2-container--default .select2-results__option { background-color: #000000 !important; color: #eab308 !important; padding: 0.5rem !important; font-weight: 700 !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #111827 !important; color: #eab308 !important; } .select2-search--dropdown { padding: 0.5rem !important; background-color: #000000 !important; } .select2-search--dropdown .select2-search__field { background-color: #1f2937 !important; border: 1px solid #374151 !important; border-radius: 0.375rem !important; padding: 0.5rem !important; color: #eab308 !important; font-weight: 700 !important; } .select2-search--dropdown .select2-search__field:focus { border-color: #eab308 !important; outline: none !important; } /* Light theme dropdown */ html[data-theme="light"] .select2-dropdown { background-color: #ffffff !important; border: 1px solid #d1d5db !important; } html[data-theme="light"] .select2-container--default .select2-results__option { background-color: #ffffff !important; color: #111827 !important; } html[data-theme="light"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #f3f4f6 !important; color: #111827 !important; } html[data-theme="light"] .select2-search--dropdown { background-color: #ffffff !important; } html[data-theme="light"] .select2-search--dropdown .select2-search__field { background-color: #f9fafb !important; border: 1px solid #d1d5db !important; color: #111827 !important; } html[data-theme="light"] .select2-search--dropdown .select2-search__field:focus { border-color: #ca8a04 !important; } /* Blue theme dropdown */ html[data-theme="blue"] .select2-dropdown { background-color: #060d1e !important; border: 1px solid #1e3a5f !important; } html[data-theme="blue"] .select2-container--default .select2-results__option { background-color: #060d1e !important; color: #eab308 !important; } html[data-theme="blue"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #0c1629 !important; color: #eab308 !important; } html[data-theme="blue"] .select2-search--dropdown { background-color: #060d1e !important; } html[data-theme="blue"] .select2-search--dropdown .select2-search__field { background-color: #0c1629 !important; border: 1px solid #1e3a5f !important; color: #eab308 !important; } html[data-theme="blue"] .select2-search--dropdown .select2-search__field:focus { border-color: #eab308 !important; } /* ============================================ WIDTH CONTROL ============================================ */ .select2-container { width: 100% !important; }