#main { padding: 0px 0px; background: #f0f8ff; height: 100vh; }
.vin-filter-container { max-width: 1200px; margin: 0 auto; background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.filter-bar { display: flex; flex-direction: column; gap: 16px; }
.direct-desk-input-div-1 { display: flex; flex-wrap: wrap; gap: 12px; }
.div-direct-desk { flex: 1 1; min-width: 180px; overflow: hidden; }
.select-wrapper { display: flex; align-items: center; background-color: #f0f9ff; border-radius: 10px; padding: 0 12px; height: 48px; }
.select-wrapper .material-symbols-outlined { font-size: 20px; color: #555; margin-right: 8px; flex-shrink: 0; }
.dropdown-btn-cd { border: none; background: transparent; flex: 1; font-size: 14px; color: #333; height: 100%; outline: none; appearance: none; cursor: pointer; padding-right: 16px; }
.vin-fields { width: 100%; }
.input-div-container { display: flex; align-items: center; background-color: #f0f9ff; border-radius: 10px; padding: 0 12px; height: 48px; position: relative; }
.input-div-container .material-symbols-outlined { font-size: 20px; color: #555; margin-right: 8px; flex-shrink: 0; }
#vin-input-field { border: none; background: transparent; flex: 1; font-size: 14px; color: #333; height: 100%; outline: none; padding-right: 16px; }
.table-section { padding-top: 16px; border-top: 1px solid #eee; }

@media (max-width: 768px) {
  .direct-desk-input-div-1 { flex-direction: column; }
  .div-direct-desk { min-width: 100%; }
}