.gradient-bg {
  background: linear-gradient(to right, #1565c0, #42a5f5);
  transition: background-color 0.3s ease;
}

.navbar-transparent {
  background: linear-gradient(to right, rgba(21, 101, 192, 0.3), rgba(66, 165, 245, 0.3)) !important;
}

#pieChart,
#lineChart {
  height: 400px;
  margin-top: 30px;
}

main.container {
  padding-top: 30px;
}

@media (max-width: 600px) {

  #pieChart,
  #lineChart {
    height: 300px;
  }
}

.tab-content {
  display: none;
  padding: 20px 0;
}

.tab-content.active {
  display: block;
}

.tabs .tab a {
  width: 100%;
  display: block;
  color: #1976d2 !important;
  background: #e3f2fd !important;
  border-radius: 6px 6px 0 0;
  transition: background 0.2s;
}

.tabs .tab a:hover {
  color: #fff !important;
  background: #098bf5 !important;
}

.tabs .tab a.active,
.tabs .tab a:focus {
  color: #fff !important;
  background: #a1c8e7 !important;
}

.tabs .indicator {
  background-color: #42a5f5 !important;
}

#serverInfoCard.gradient-bg {
  background: linear-gradient(to right, #1565c0, #42a5f5) !important;
  color: #fff !important;
}

#serverInfoCard table td {
  color: #fff !important;
  font-size: 1.05rem;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.1;
}

#serverInfoCard .card-title i {
  vertical-align: middle;
  margin-right: 6px;
}

#serverInfoCard .card-title {
  margin-bottom: 10px;
}