/* For best practice, move CSS below to an external CSS file. */
.bootstrap-table .fixed-table-container .fixed-table-body {
    height: auto !important;
}

.auto-refresh.active {
    background-color: #0D6EFD;
}

.home-header-title {
    text-align: center;
}

.jukebox-image {
    width: 100%;
}

.jukebox-image-top {
    width: 100%;
    margin: 0 auto;
    display: none;
}

header ul.nav {
    margin-left: auto;
    padding-top: 14px;
}

header a, header li.nav-item a {
    color: #212529 !important;
}

header a, header li.nav-item form {
    padding-right: 16px;
}

html[data-bs-theme="dark"] {
    header a, header li.nav-item a,
    header li.nav-item button {
        color: #DEE2E6 !important;;
    }
}

@media screen and (min-width: 768px) {
    .jukebox-image-top {
        width: 555px;
    }
}

@media screen and (max-width: 992px) {
    .jukebox-image-top {
        display: block;
    }

    .jukebox-image {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .fixed-table-toolbar .search.btn-group .search-input {
        width: 150px;
    }

    header a, header li.nav-item a {
        padding: 10px;
    }

    header a, header li.nav-item form {
        padding-right: 5px;
    }
}

@media screen and (max-width: 400px) {
    .fixed-table-toolbar .search.btn-group .search-input {
        width: 120px;
    }
}