body {
    background-color: #222;
    color: #ddd;
    font-family: sans-serif;
  }
  
  #auton-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); /* Responsive grid */
     gap: 20px;
  }
  
  .auton-item {
     position: relative; /* For overlay */
     padding: 10px;
     border: 1px solid #444;
     border-radius: 5px;
     color: #eee; /* Text color for light text on dark background */
  }
  
  .video-overlay {
     position: absolute;
     top: 0; left: 0;
     width: 100%; height: 100%;
     opacity: 0;
     background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent */
     transition: opacity 0.3s;
  }
  
  .auton-item:hover .video-overlay {
     opacity: 1;
  }
  
  .auton-item h3 {
     margin-bottom: 5px;
  }
  
  .filter-controls button, .filter-controls-sub button {
    padding: 5px 10px;
    margin: 5px;
    border: 1px solid #444;
    border-radius: 5px;
    cursor: pointer;
    background-color: #333;
    color: #ddd;
  }
  
  .filter-controls-sub {
    margin-top: 10px; /* Add some space between main and sub filters */
  }

  .red-primary-button {
    background-color: red !important;
  }

  .blue-primary-button {
    background-color: blue !important;
  }

  .all-primary-button {
    background-color: white !important;
    color: black !important;
  }

  /* Previous styles */

.auton-item {
    width: 100%; /* Take up full width of the page */
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
}

.auton-item table {
    width: 100%; /* Table matches container width */
    border-collapse: collapse; 
}

.auton-item td, .auton-item th {
    border: 1px solid #eee; 
    padding: 5px;
}

video {
    width: 100%;
}
.Red {
  background-color: #6C1717;
}
.Blue {
  background-color: #17176C;
}