.device-list-container {
  max-width: 100%;
  margin: auto;
}

@media (min-width: 768px) {
 .device-list-container {
    max-width: 1200px;
  }
}

.suggestion {
  background: linear-gradient(to right, #00c6ff, #0072ff);
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-bottom: 5px;
}

.suggestion:hover {
  background: linear-gradient(to right, #0072ff, #00c6ff);
}

.device-table {
  width: 100%; /* Adjust as needed */
  max-width: 600px; /* Maximum width to prevent overflow */
  margin: 0 auto; /* Center the table */
  overflow-x: auto; /* Enable horizontal scrolling if needed */
}

/*.device-table.visible {*/
/*  visibility: visible;*/
/*}*/

.search-wrapper {
  position: relative;
}

.loading-indicator, #warning-message {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  text-align: center;
}

#autocomplete-suggestions {
  overflow-y: auto;
}

#search {
  padding: 12px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px; /* Smaller font size for mobile */
  outline: none;
  width: 70%; /* Make it take up most of the screen width */
  height: 40px; /* Reduced height for mobile */
}

#search.active {
  border-color: #007bff;
}

#clear-search {
  margin-left: -30px;
  border: none;
  cursor: pointer;
}


.autocomplete-suggestion {
  padding: 8px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.autocomplete-suggestion:hover {
  background-color: #e7e7e7;
}