footer {
	background-color: #F44336;
	background-color: #2B3035;
	color: #fff;
}

.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

/*
$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px,
	xxl: 1400px
);
*/

@media (min-width: 768px) {

	.bd-placeholder-img-lg {
		font-size: 3.5rem;
	}
}

.b-example-divider {
	width: 100%;
	height: 3rem;
	background-color: rgba(0, 0, 0, .1);
	border: solid rgba(0, 0, 0, .15);
	border-width: 1px 0;
	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
	flex-shrink: 0;
	width: 1.5rem;
	height: 100vh;
}

.bi {
	vertical-align: -.125em;
	fill: currentColor;
}

.nav-scroller {
	position: relative;
	z-index: 2;
	height: 2.75rem;
	overflow-y: hidden;
}

.nav-scroller .nav {
	display: flex;
	flex-wrap: nowrap;
	padding-bottom: 1rem;
	margin-top: -1px;
	overflow-x: auto;
	text-align: center;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
	--bd-violet-bg: #580707;
	/*--bd-violet-rgb: 112.520718, 44.062154, 249.437846;*/
	--bs-btn-font-weight: 600;
	--bs-btn-color: var(--bs-white);
	--bs-btn-bg: var(--bd-violet-bg);
	--bs-btn-border-color: var(--bd-violet-bg);
	--bs-btn-hover-color: var(--bs-white);
	--bs-btn-hover-bg: #c71010;
	--bs-btn-hover-border-color: #c71010;
	--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
	--bs-btn-active-color: var(--bs-btn-hover-color);
	--bs-btn-active-bg: #580707;
	--bs-btn-active-border-color: #580707;
}

.bd-mode-toggle {
	z-index: 1500;
}

.server-start , 
.server-stop , 
.server-restart {
	text-transform: uppercase ;
	color: #fff ;
}

.server-start {
	background-color: darkgreen;
}

.server-start:hover {
	background-color: green;
	color: #fff ;
}

.server-stop {
	background-color: darkred;
}

.server-stop:hover {
	background-color: red;
	color: #fff ;
}

.server-restart {
	background-color: #FF9800;
}

.server-restart:hover {
	background-color: yellow;
	color: #333;
}

footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

footer a {
	text-decoration: none;
	color: #fff;
}

footer a:hover {
	text-decoration: none;
	color: #FF9800;
}

footer .icons {
	font-size: 1rem;
}

i.clear {
	color: red;
}

#login {
	/*
	display: flex;   
	justify-content: center;   
	align-items: center;
	*/
	margin: 0;
	margin-top: 10em;
	margin-bottom: 10em;
	padding: 0;
}

#login span.password-toggle {
	position: absolute; 
	margin: 0; 
	padding: 0; 
	top: 0.5em; 
	right: 0.5em;
}

h1 img.icon {
	margin: 0;
	padding: 0;
	width: 1em;
}

/**
 * Console: LogData
 */

#log_data {
	background-color: #212529;
	color: white;
}

.info {
	color: green;
}

.warn {
	color: yellow;
}

.error {
	color: red;
}

.fatal {
	background: red;
	color: white;
}

/*
.table-hover tr:hover th ,
.table-hover tr:hover td {
	background-color: red;
}
*/

/**
 * Wie funktionieren die Varianten und akzentuierten Tabellen?
 * 
 * Für die akzentuierten Tabellen (gestreifte Zeilen, gestreifte Spalten, 
 * schwebende Zeilen und aktive Tabellen) haben wir einige Techniken verwendet, 
 * damit diese Effekte für alle unsere Tabellenvarianten funktionieren:
 * 
 * Wir beginnen damit, den Hintergrund einer Tabellenzelle mit der 
 * benutzerdefinierten Eigenschaft --bs-table-bg festzulegen. Alle 
 * Tabellenvarianten setzen dann diese benutzerdefinierte Eigenschaft, um die 
 * Tabellenzellen einzufärben. Auf diese Weise bekommen wir keine Probleme, 
 * wenn halbtransparente Farben als Tabellenhintergrund verwendet werden.
 * 
 * Dann fügen wir den Tabellenzellen mit box-shadow: inset 0 0 0 9999px 
 * var(--bs-table-bg-state, var(--bs-table-bg-type, 
 * var(--bs-table-accent-bg))); einen Box-Schatten hinzu, der sich über die 
 * angegebene Hintergrundfarbe legt. Es verwendet benutzerdefinierte Kaskade, 
 * um den Box-Schatten zu überschreiben, unabhängig von der CSS-Spezifität. 
 * Da wir eine große Spanne und keine Unschärfe verwenden, wird die Farbe 
 * einfarbig sein. Da --bs-table-accent-bg standardmäßig auf transparent 
 * eingestellt ist, haben wir keinen Standard-Box-Shadow.
 * 
 * Wenn die Klassen .table-striped, .table-striped-columns, .table-hover oder 
 * .table-active hinzugefügt werden, werden entweder --bs-table-bg-type oder 
 * --bs-table-bg-state (standardmäßig auf initial gesetzt) auf eine 
 * halbtransparente Farbe (--bs-table-striped-bg, --bs-table-active-bg oder 
 * --bs-table-hover-bg) gesetzt, um den Hintergrund einzufärben und die 
 * Standardeinstellung --bs-table-accent-bg zu überschreiben.
 * 
 * Für jede Tabellenvariante wird eine --bs-table-accent-bg-Farbe mit dem 
 * höchsten Kontrast in Abhängigkeit von dieser Farbe erzeugt. Zum Beispiel 
 * ist die Akzentfarbe für .table-primary dunkler, während .table-dark eine 
 * hellere Akzentfarbe hat.
 *
 * Text- und Rahmenfarben werden auf die gleiche Weise erzeugt, und ihre 
 * Farben werden standardmäßig vererbt.
 * 
 * Hinter den Kulissen sieht es folgendermaßen aus:
 * 
 * Übersetzt mit www.DeepL.com/Translator (kostenlose Version)
 * 
*/

.table-hover-cells > tbody > tr > th:hover,
.table-hover-cells > tbody > tr > td:hover {
	background-color: red;
}

.table-hover-cells > tbody > tr > th.active:hover,
.table-hover-cells > tbody > tr > td.active:hover,
.table-hover-cells > tbody > tr.active > th:hover,
.table-hover-cells > tbody > tr.active > td:hover {
	background-color: red;
}

.table-hover.table-hover-cells > tbody > tr:hover > th:hover,
.table-hover.table-hover-cells > tbody > tr:hover > td:hover {
	background-color: red;
}

.table-hover.table-hover-cells > tbody > tr.active:hover > th:hover,
.table-hover.table-hover-cells > tbody > tr.active:hover > td:hover {
	background-color: red;
}