.detection-log {
  background-color: #e9f7ef;
  border: 1px solid #a3d9a5;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 0 8px rgba(163, 217, 165, 0.5);
  font-size: 1.1rem;
  color: #25acdd;
  max-width: 400px;
}

.detection-log ul.list-group {
  max-height: 300px;
  overflow-y: auto;
}

.detection-log li.list-group-item {
  background-color: transparent;
  border: none;
  padding: 6px 0;
  font-size: 1rem;
  color: #1e4446;
}

.detection-log li.list-group-item .badge {
  font-size: 1rem;
  min-width: 35px;
  text-align: center;
}


.chart-container {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

/* Smaller font and spacing for labels */
.chart-container h5 {
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.form-label {
  font-weight: 500;
}

.form-select {
  max-width: 150px;
}
 

/* Navbar background with blur and subtle shadow */
#mainNavbar {
  background: rgba(33, 37, 41, 0.85); /* Bootstrap dark with transparency */
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navbar brand */
.navbar-brand {
  font-weight: 600;
  font-size: 1.25rem;
  color: #ffffff !important;
}

/* Switch styling */
.form-check-input {
  cursor: pointer;
  background-color: #adb5bd;
  border: none;
}

.form-check-input:checked {
  background-color: #0dcaf0;
}

/* Avatar styling */
.img-dropdown {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.img-dropdown:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 3px #0dcaf0;
}

/* Dropdown menu */
.dropdown-menu {
  border-radius: 10px;
  animation: fadeIn 0.25s ease-in-out;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}


.my-logo {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}