.card-body .row {
    display: flex;
    flex-wrap: wrap;
}

.card-body .col-6 {
    padding: 0.5rem;
}

.alert-primary {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    color: #000000;
}

.alert-secondary {
    background-color: #ededed;
    color: #000000;
}

#LoadedStats { // Loaded Stats information bar
    background-color: #f0f0f0;
}

.btn-secondary {
    background-color: #ffffff;
    border-color: #b9b9b9;
    color: #000000;
}

.btn-toggle {
    padding: 0.25rem 0.5rem; /* Smaller padding for a more discreet button */
    font-size: 0.875rem; /* Slightly smaller font size */
    border-radius: 0.2rem; /* Slightly rounded corners */
}
.d-none {
    display: none;
}
.spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.4em;
    margin: 10px;
}
#loadingSpinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 234, 215, 0.6);
    z-index: 1050; /* Ensure it is above other content */
}
#themesChart {
    width: 100% !important;
    height: auto; /* Ensure the height is automatically adjusted */
}
.flatpickr-calendar {
    position: absolute;
    z-index: 1051; /* Ensure it is above other content */
    z-index: 1051; /* Ensure it appears above other content */
    max-width: 90vw; /* Prevent it from exceeding the viewport width */
    max-height: 90vh; /* Prevent it from exceeding the viewport height */
    overflow: auto; /* Add scrolling if the content is too large */
    left: 0; /* Align with the left edge of the button */
    top: 100%; /* Position it just below the button */
    transform: translateX(-100%); /* Shift it to the left of the button */
}
#refreshButton {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

#refreshButton:hover {
    cursor: pointer;
}

/* Define the rotation animation */
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Class to apply the rotation animation */
.rotate {
    animation: rotate 1s linear infinite;
}

.dropdown-toggle::after {
    display: none;
}

body {
    background-color: #f8f9fa; /* Light grey background for consistency */
}

h2 {
    font-weight: bold;
    margin: 0;
    text-align: center;
}
.header {
    background-color: white;
    border-bottom: 2px solid #dee2e6;
    padding: 10px;
}

.logout-btn {
    background-color: #fff0f0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-top: 5px;
    color: #dc3545;
    font-size: 0.9rem;
    min-height: 32px;
}

.logout-btn:hover {
    background-color: #ffe0e0;
    color: #bd2130;
}

#logoDropdown {
    color: black;
}