/** * DataTables Plugin - Column Filters Styling * * @author Giuseppe Di Terlizzi */ /* Column filter row styling */ .dt-column-filters th { padding: 5px !important; background-color: #f5f5f5; border-bottom: 2px solid #ddd; } /* Filter container */ .dt-filter-container { display: flex; flex-direction: column; gap: 3px; min-width: 120px; } /* Search input styling */ .dt-filter-search { width: 100%; padding: 4px 6px; font-size: 12px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; background-color: #fff; } .dt-filter-search:focus { outline: none; border-color: #66afe9; box-shadow: 0 0 3px rgba(102, 175, 233, 0.5); } /* Select dropdown styling */ .dt-filter-select { width: 100%; padding: 4px 6px; font-size: 12px; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; background-color: #fff; cursor: pointer; } .dt-filter-select:focus { outline: none; border-color: #66afe9; box-shadow: 0 0 3px rgba(102, 175, 233, 0.5); } /* Responsive adjustments */ @media screen and (max-width: 768px) { .dt-filter-container { min-width: 80px; } .dt-filter-search, .dt-filter-select { font-size: 11px; padding: 3px 4px; } } /* Theme compatibility - Bootstrap */ .bootstrap3 .dt-filter-search, .bootstrap3 .dt-filter-select { height: auto; } /* Theme compatibility - jQuery UI */ .dataTables_wrapper.dataTable .dt-filter-search, .dataTables_wrapper.dataTable .dt-filter-select { font-family: inherit; }