:root {
    --visador-grau: #5c636a;
    --visador-schwarz: #333;
    --visador-weiss: #FFF;
    --visador-orange: #bf5328;
    --visador-gruen: #45bd45;
	--visador-rot: #900;
	--visador-blau: #ADD8E6;
}

table.table td {
    width: 14.28%; /* 100% / 7 Tage */
    height: 60px; /* Feste Höhe für alle Zellen */
    justify-content: center; /* Horizontal zentrieren */
    align-items: center; /* Vertikal zentrieren */
    text-align: center; /* Text innerhalb der Zelle zentrieren */
}

td button {
    display: inline-block;
}

span.badge {
    color: var(--visador-grau);
}

.badge.bg-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    background-color: var(--visador-orange) !important;
	color: #FFF;
}
.tag-badge {
    color: var(--visador-schwarz) !important;
}


.badge.bg-warning,
.badge.success {
    margin: 2px 2px 0px 0px;
    color: var(--visador-schwarz);
    border-radius: 50% !important;
    width: 20px;
    height: 20px;
    text-align: center;
}

.btn-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #f63;
    background-color: #d2d2d2;
}

.btn-circle:hover {
    background-color: var(--visador-grau);
}
.btn:visited {
	background-color: var(--visador-grau);
	border-color: var(--visador-grau);
}
.edit-button,
.btn-primary.active,
.btn.active {
    background-color: var(--visador-orange);
	border-color: var(--visador-orange);
    color: var(--visador-weiss);
}


td.position-relative {
    height: 60px; /* Erhöhen Sie die Zellenhöhe für mehr Platz */
}

.badge {
    font-size: 0.7em; /* Kleinere Schriftgröße für die Badges */
}

.d-flex.justify-content-center.mb-4 {
    align-items: center;
}

.d-flex.justify-content-center.mb-4 a {
    margin: 0 5px;
}

.d-flex {
    align-items: center;
}

.d-flex select.form-select {
    width: auto;
    min-width: 120px;
}

.initials-avatar {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--visador-weiss); /* Farbe anpassen */
    text-align: center;
    line-height: 50px;
    color: var(--visador-schwarz);
}

.initials {
    font-size: 24px;
    font-weight: normal;
}

/* Kalender-Kreise orange färben */
.fc-day-number {
    background-color: var(--visador-orange) !important;
    color: var(--visador-weiss) !important;
}

/* Datepicker-Hintergrund schwarz und Text orange */
.ui-datepicker {
    background-color: var(--visador-schwarz) !important;
    color: var(--visador-orange) !important;
}

/* Datepicker-Kopfzeile orange */
.ui-datepicker-header {
    background-color: var(--visador-orange) !important;
    color: var(--visador-schwarz) !important;
}

.multiDayButton {
    background-color: var(--visador-grau);
    color: var(--visador-schwarz);
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.multiDayButton.active {
    background-color: var(--visador-gruen);
}

.multiDayButton:hover {
    opacity: 0.9;
}

button[type="submit"] {
    background-color: var(--visador-orange);
    color: var(--visador-weiss);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

button[type="submit"]:hover {
    opacity: 0.9;
}

.alert {
    text-align: center !important;
}

.event-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Optional */
}

.left-content, .right-content, .middle-content {
    flex: 1; /* Jeder Bereich nimmt gleich viel Platz ein */
}

.left-content {
    text-align: left; /* Inhalte linksbündig */
}

.middle-content {
    text-align: left; /* Inhalte linksbündig */
}

.right-content {
    text-align: right; /* Inhalte rechtsbündig */
}

.right-content button {
    margin: 0 0 10px 0; /* Abstand von 10px nach unten */
}

.right-content button:not(:last-child) {
    margin-right: 10px; /* Abstand von 10px nach rechts für alle Buttons außer dem letzten */
}


/* Für mobile Geräte */
@media (max-width: 768px) {
    .event-info {
        flex-direction: column; /* Inhalte werden untereinander angezeigt */
    }
    .left-content, .right-content, .middle-content {
        flex: none; /* Jeder Bereich nimmt den benötigten Platz ein */
        margin-bottom: 10px; /* Abstand zwischen den Bereichen */
    }
    .card-columns {
        column-count: 1; /* Auf mobilen Geräten nur eine Spalte anzeigen */
    }
    
    .card {
        margin-bottom: 10px; /* Abstand zwischen den Karten */
    }
}
@media (min-width: 992px) {
    .navbar .container-fluid {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .navbar .navbar-brand {
        margin-bottom: 20px; /* Optional: Abstand zwischen Logo und Navigation */
    }
    
    .navbar .collapse {
        display: flex;
        justify-content: center;
    }
    
    .navbar .navbar-toggler {
        display: none; /* Toggler auf großen Bildschirmen ausblenden */
    }
}

.accordion-button-event {
    background-color: var(--visador-gruen); /* Hintergrundfarbe */
    color: #000; /* Textfarbe */
}

.accordion-button-event:active, .accordion-button-event:focus, .accordion-button-event:hover {
    background-color: var(--visador-gruen); /* Aktive/Hover Hintergrundfarbe */
    color: #000; /* Aktive/Hover Textfarbe */
}

.accordion-button-reservierung {
    background-color: var(--visador-orange); /* Hintergrundfarbe */
    color: #000; /* Textfarbe */
}

.accordion-button-reservierung:active, .accordion-button-reservierung:focus, .accordion-button-reservierung:hover {
    background-color: var(--visador-orange); /* Aktive/Hover Hintergrundfarbe */
    color: #000; /* Aktive/Hover Textfarbe */
}

.accordion-button-nicht-verfuegbar {
    background-color: var(--visador-rot); /* Hintergrundfarbe */
    color: #FFF; /* Textfarbe */
}

.accordion-button-nicht-verfuegbar:active, .accordion-button-nicht-verfuegbar:focus, .accordion-button-nicht-verfuegbar:hover {
    background-color: var(--visador-rot); /* Aktive/Hover Hintergrundfarbe */
    color: #FFF; /* Aktive/Hover Textfarbe */
}

.accordion-button-urlaub {
    background-color: var(--visador-blau); /* Hintergrundfarbe */
    color: #000; /* Textfarbe */
}

.accordion-button-urlaub:active, .accordion-button-urlaub:focus, .accordion-button-urlaub:hover {
    background-color: var(--visador-blau); /* Aktive/Hover Hintergrundfarbe */
    color: #000; /* Aktive/Hover Textfarbe */
}

.accordion-button-auf-anfrage {
    background-color: var(--visador-grau); /* Hintergrundfarbe */
    color: #FFF; /* Textfarbe */
}

.accordion-button-auf-anfrage:active, .accordion-button-auf-anfrage:focus, .accordion-button-auf-anfrage:hover {
    background-color: var(--visador-grau); /* Aktive/Hover Hintergrundfarbe */
    color: #FFF; /* Aktive/Hover Textfarbe */
}
.heute {
    background-color: var(--visador-weiss) !important; /* Dunkelblau mit 50% Transparenz */
	opacity: 0.5;
    color: white;
    border-radius: 5px;
}

.admin-events .card {
    background-color: var(--visador-orange); /* Orange */
    color: white;
}
h4.eventliste {
	text-align: center;
	font-weight: normal;
}