#StationsList table { font-size: 10px; }
#StationsList td, #StationsList th { padding: 2px 6px !important; }
  
.plot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
}

.plot-item {
  width: 100%;
  min-width: 450px;
}

.frame-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  height: 100%;
}

.frame-item {
  border-color: #f46d39;
  border-width: 2px;
  width: 100%;
  min-width: 350px;
  height:800px;
}

.inline-input { display: flex; align-items: center; gap: 8px; }
    .inline-input label { margin: 0; white-space: nowrap; }
    .inline-input .form-group { margin: 0; }
    
.inline-group { display: flex; align-items: center; gap: 8px; }
    .inline-group .form-group { margin-bottom: 0; flex: 1; }
    .inline-group label.control-label { display: none; }    
    

@media (max-width: 768px) {

  .plot-grid {
    grid-template-columns: 1fr;
  }

  .plot-item {
    min-width: 100%;
  }
  .frame-grid {
    grid-template-columns: 1fr;
  }
  .frame-item {
    min-width: 100%;
  }

  
}


  
div.dt-button-collection {
  z-index: 9999 !important;
 right: 0 !important;
left: auto !important;
    }
    
 table.dataTable tbody tr.active td {
        background-color: #f46d39 !important;
        }

.dt-top {
         display: flex;
         justify-content: space-between;
         align-items: center;
         height: 3vh;
        }
.datatables .dataTables_wrapper div.dataTables_info{
  padding-top: 0; !important;
  
}

.accordion-button {
  background-color: #2c3e50 !important;
  color: white !important;
  padding: 0.3rem 1rem !important;   /* default is ~1rem 1.25rem */
  font-size: 0.9rem !important;
}

.accordion-button:not(.collapsed) {
  background-color: #1abc9c !important;
  color: white !important;

}

#map-card  {
  --bs-card-spacer-y: 0px !important;
  --bs-card-spacer-x: 0px !important;
  
}
    
  a.btn.nice-button {
    display: inline-flex !important;
    padding: 4px 6px !important;
    width: auto !important;
    margin-left: 4px;
    transition: background-color 0.3s ease;
    border-radius: 4px;
  }

  a.btn.nice-button:hover,
  a.btn.nice-button:focus {
    background-color: #e6e6e6;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  a.btn.nice-button > i.fa {
    font-size: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #eee, #ddd, #eee);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}