body {
  padding-top: 50px;
  background-color: black;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}

.icons {
  padding-right: 13px;
  font-size: large;
}
.icons>li>a{
  padding-top: 15px  !important;
  padding-bottom: 15px  !important;
  padding: 10px 8px;
}

.form-control {
  background-color: black !important;
  color: white !important;
  border: 1px solid white !important;
}

textarea[name="headers"] {
  background-color: black !important;
  color: white !important;
  border: 1px solid white !important;
}

textarea[name="headers"] {
  background-color: black !important;
  color: white !important;
  border: 1px solid white !important;
}

.well.well-lg {
  background-color: black !important; /* Schwarzer Hintergrund */
  color: white !important; /* Weißer Text */
  border: 1px solid white; /* Weißer Rahmen (optional) */
  padding: 15px;
  border-radius: 8px; /* Abgerundete Ecken für ein modernes Design */
}

.well.well-lg dt, 
.well.well-lg dd {
  color: white !important; /* Weißer Text für die Definition List */
}

.well.well-lg a {
  color: #00bcd4 !important; /* Links in einer helleren Farbe */
  text-decoration: underline; /* Links hervorheben */
}
/* Hintergrund des SVG auf Weiß setzen */
.pygal-chart {
  background-color: white !important;
}

/* Alle schwarzen Füllungen (Text, Linien, Elemente) auf Weiß setzen */
.pygal-chart text,
.pygal-chart .title,
.pygal-chart .legends .legend text,
.pygal-chart .axis text,
.pygal-chart .axis text.major,
.pygal-chart .text-overlay text.value,
.pygal-chart .text-overlay text.label,
.pygal-chart .tooltip,
.pygal-chart .tooltip .label,
.pygal-chart .series text {
  fill: white !important;
}

/* Umgekehrte Farben für Achsen und Linien */
.pygal-chart .axis .line,
.pygal-chart .axis .guide.line,
.pygal-chart .axis .major.line,
.pygal-chart .axis .guides:hover .guide.line {
  stroke: white !important;
}

/* Hintergrund der Grafik schwarz machen */
.pygal-chart .graph > .background,
.pygal-chart .plot > .background {
  fill: black !important;
}

/* Balken, Punkte und andere grafische Elemente anpassen */
.pygal-chart .color-0,
.pygal-chart .color-1,
.pygal-chart .color-2 {
  stroke: white !important;
  fill: white !important;
}

/* Tooltip-Hintergrund anpassen */
.pygal-chart .tooltip rect {
  fill: black !important;
  stroke: white !important;
}

/* Eventuell Farben für Legenden invertieren */
.pygal-chart .legends .legend text {
  fill: white !important;
}

/* Gesamte Tabelle dunkel */
.bootstrap-table {
  background-color: #222 !important; /* Dunkler Hintergrund */
  color: white !important;
}

/* Tabellenkopf (Spaltennamen) dunkler als der Rest */
.bootstrap-table thead {
  background-color: #333 !important; /* Etwas hellerer Dunkelton */
  color: white !important;
}

/* Spalten-Header-Stile */
.bootstrap-table thead th {
  background-color: #333 !important;
  color: white !important;
  border-bottom: 2px solid #555; /* Dezente Trennlinie */
}

/* Tabelleninhalt (Zeilen) */
.bootstrap-table tbody {
  background-color: #222 !important;
  color: white !important;
}

/* Alternierende Zeilenfarben für bessere Lesbarkeit */
.bootstrap-table tbody tr:nth-child(odd) {
  background-color: #2a2a2a !important; /* Etwas heller für Kontrast */
}

.bootstrap-table tbody tr:nth-child(even) {
  background-color: #222 !important; /* Gleich wie Haupt-Hintergrund */
}

/* Tabellenränder */
.bootstrap-table td, 
.bootstrap-table th {
  border: 1px solid #444 !important; /* Dezente Trennlinien */
}

/* Buttons in der Toolbar */
.bootstrap-table .btn {
  background-color: #444 !important; /* Dunkle Buttons */
  color: white !important;
  border: 1px solid #666 !important;
}

.bootstrap-table .btn:hover {
  background-color: #666 !important; /* Hellerer Hover-Effekt */
  color: white !important;
}

/* Suchfeld & Dropdown-Menüs */
.bootstrap-table .form-control {
  background-color: #333 !important; /* Dunkler Input */
  color: white !important;
  border: 1px solid #555 !important;
}

/* Icons in Buttons */
.bootstrap-table .btn i {
  color: white !important;
}

.bootstrap-table .btn:hover i {
  color: white !important;
}

/* Hintergrund des Dropdown-Menüs dunkel machen */
.dropdown-menu {
  background-color: #222 !important; /* Dunkler Hintergrund */
  color: white !important;
  border: 1px solid #444 !important; /* Dezente Umrandung */
}

/* Einzelne Listenelemente (Optionen) */
.dropdown-menu li {
  background-color: #222 !important; /* Dunkler Hintergrund */
  color: white !important;
}

/* Text innerhalb der Labels */
.dropdown-menu label {
  color: white !important;
}

/* Hover-Effekt für Menüeinträge */
.dropdown-menu li:hover {
  background-color: #444 !important; /* Leicht hellerer Dunkelton für Hover */
}

/* Checkboxen anpassen */
.dropdown-menu input[type="checkbox"] {
  accent-color: white; /* Checkbox-Markierung auf Weiß setzen */
}

/* Standardmäßig nicht angeklickte Checkboxen */
.dropdown-menu input[type="checkbox"]::before {
  background-color: #333 !important; /* Dunkler Hintergrund */
}

/* Aktive (angeklickte) Checkbox */
.dropdown-menu input[type="checkbox"]:checked::before {
  background-color: white !important; /* Weiße Markierung */
}

/* Panel-Hintergrund auf dunkel setzen */
.panel {
  background-color: #222 !important; /* Dunkler Hintergrund */
  color: white !important;
  border: 1px solid #444 !important; /* Dezente Umrandung */
}

/* Panel-Überschrift */
.panel-heading {
  background-color: #333 !important; /* Etwas hellerer Dunkelton */
  color: white !important;
  border-bottom: 2px solid #555 !important;
}

/* Tabellen-Container */
.table-responsive {
  background-color: #222 !important;
}

/* Tabellenstil */
.table {
  background-color: #222 !important;
  color: white !important;
}

/* Tabellenränder */
.table-bordered {
  border: 1px solid #444 !important;
}

/* Tabellenköpfe (erste Spalte) dunkler machen */
.table th {
  background-color: #333 !important;
  color: white !important;
  border: 1px solid #555 !important;
}

/* Alternierende Zeilenfarben für bessere Lesbarkeit */
.table tbody tr:nth-child(odd) {
  background-color: #2a2a2a !important; /* Etwas heller für Kontrast */
}

.table tbody tr:nth-child(even) {
  background-color: #222 !important; /* Gleich wie Haupt-Hintergrund */
}

/* Tabellenzellen */
.table td {
  border: 1px solid #444 !important;
  color: white !important;
}