iframe {
    border: none;
}

body.native #lyrics-page {
    top: calc(65px + var(--android-status-bar)) !important;
    background-color: white !important;
}

* {
    user-select: none;
    -webkit-user-drag: none;
}

.player-btn:hover {
    background-color: rgba(0, 0, 0, .05);
}

.player-btn:active {
    background-color: rgba(0, 0, 0, .1);
}

.navigation-item {
    padding: 5px 10px;
}

.navigation-item.active, .navigation-item:active {
    background-color: rgba(0, 0, 0, .1) !important;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.navigation-item:hover {
    background-color: rgba(0, 0, 0, .05);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.album:hover {
    background-color: rgba(0, 0, 0, .05);
    border-radius: 5px;
}

.player-btn.disabled {
    opacity: .5;
    pointer-events: none;
}

@media (max-width: 1200px) {
    #album-grid, #search-results {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .album-list-item {
        max-width: calc(80vw / 4) !important;
    }
}

@media (max-width: 1215px) {
    #album-grid, #search-results {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .album-list-item {
        max-width: calc(80vw / 5) !important;
    }
}

@media (max-width: 1311px) {
    #navigation {
        width: 96px !important;
    }

    iframe#player {
        left: 96px !important;
        width: calc(100vw - 96px) !important;
    }

    #ui, #lyrics-page {
        left: 96px !important;
        width: calc(100vw - 96px) !important;
    }
}

@media (max-width: 1295px) {
    #album-grid, #search-results {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .album-list-item {
        max-width: calc(80vw / 4) !important;
    }
}

@media (max-width: 96px) {
    .navigation-desktop {
        display: none;
    }
}

@media (max-width: 991px) {
    #player.desktop-player .player-btn {
        width: 32px !important;
    }

    #player.desktop-player .player-badge-desktop {
        display: none !important;
    }

    #album-grid, #search-results {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .album-list-item {
        max-width: calc(80vw / 3) !important;
    }
}

@media (max-width: 767px) {
    #album-grid, #search-results {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .album-list-item {
        max-width: calc(80vw / 2) !important;
    }
}

@media (min-height: 64px) {
    .navigation-item-desktop {
        display: block;
    }

    .navigation-item-mobile {
        display: none;
    }
}

.form-range::-webkit-slider-thumb {
    background-color: #ccc;
    box-shadow: none !important;
}

.form-range::-webkit-slider-thumb:active {
    background-color: #eee;
}

@media (max-width: 863px) {
    #player.bg-white.desktop-player.mobilified .container {
        grid-template-columns: 1fr !important;
    }

    #player.mobilified #badges {
        display: none !important;
    }

    #player.desktop-player.mobilified .player-badge-desktop {
        display: none !important;
    }

    #player.desktop-player.mobilified #info-grid-title-inner {
        max-width: initial !important;
    }

    #player.desktop-player.mobilified .player-btn {
        width: 32px !important;
        height: 32px !important;
    }

    #player.bg-white.desktop-player.mobilified {
        height: 144px !important;
    }

    #player.bg-white.desktop-player.mobilified #info, #player.bg-white.desktop-player.mobilified #cover {
        border: none !important;
    }

    #player.desktop-player.mobilified #badge-hires, #player.desktop-player.mobilified #badge-cd, #player.desktop-player.mobilified #badge-lossy {
        margin-top: 4px !important;
    }

    #player.desktop-player.mobilified #badges {
        text-align: center !important;
        justify-content: center !important;
    }

    #player.desktop-player.mobilified #buttons {
        text-align: center;
        height: 32px !important;
    }

    #ui, #lyrics-page {
        top: 145px !important;
        height: calc(100vh - 145px) !important;
    }

    iframe#player {
        height: 144px !important;
    }

    #navigation {
        position: fixed !important;
        top: unset !important;
        bottom: var(--android-navigation-bar) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 48px !important;
        border-top: 1px solid rgba(0, 0, 0, .25);
    }

    .desktop-title {
        display: none !important;
    }

    iframe#player {
        position: fixed !important;
        top: unset !important;
        bottom: calc(48px + var(--android-navigation-bar)) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 48px !important;
        border-top: 1px solid rgba(0, 0, 0, .25);
        border-bottom: none !important;
    }

    #player.bg-white.desktop-player.mobilified {
        height: 48px !important;
    }

    #player.desktop-player.mobilified #btn-shuffle.player-btn, #player.desktop-player.mobilified #btn-previous.player-btn, #player.desktop-player.mobilified #btn-repeat.player-btn, #player.desktop-player.mobilified #info-grid-sep, #player.desktop-player.mobilified #info-grid-info, #player.desktop-player.mobilified #seekbar-container, #player.desktop-player.mobilified #info-grid-time {
        display: none !important;
    }

    #player.desktop-player.mobilified #info-grid-title {
        text-align: left !important;
        justify-content: left !important;
        align-items: center !important;
        margin-left: 15px !important;
    }

    #player.bg-white.desktop-player.mobilified #buttons {
        position: fixed;
        right: 10px;
    }

    #player.desktop-player.mobilified #info, #player.desktop-player.mobilified #cover {
        height: 48px !important;
        grid-template-columns: 48px 1fr !important;
    }

    #player.desktop-player.mobilified #info-grid {
        grid-template-rows: 1fr !important;
    }

    #player.desktop-player.mobilified #album-art {
        height: 48px !important;
        width: 48px !important;
    }

    .list-actions {
        display: flex;
        align-items: center;
    }

    #player.desktop-player.mobilified #desktop-player-action {
        display: block !important;
        top: 0;
        position: fixed;
        left: 0;
        right: 86px;
        bottom: 0;
    }

    #player.desktop-player.mobilified .container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #ui, #lyrics-page {
        top: calc(var(--android-status-bar) + 49px) !important;
        bottom: calc(97px + var(--android-navigation-bar)) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 97px - var(--android-navigation-bar) - var(--android-status-bar) - 49px) !important;
    }

    #mobile-navbar {
        display: grid !important;
    }

    iframe#lyrics-page {
        display: block !important;
        z-index: 100000 !important;
        top: calc(96px + var(--android-status-bar)) !important;
        left: 20px !important;
        right: 20px !important;
        width: calc(100vw - 40px) !important;
        height: calc(100vh - 276px - var(--android-status-bar) - var(--android-navigation-bar)) !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms !important;
    }

    iframe#lyrics-page.mobile-show {
        transition: opacity 200ms linear 500ms !important;
        opacity: 1;
        pointer-events: none !important;
    }
}

@media (min-width: 864px) {
    #player-mobile-container {
        display: none !important;
    }
}

@media (max-width: 1010px) {
    #album-info {
        grid-gap: 0 !important;
        grid-template-columns: 1fr !important;
    }

    #album-info-art {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #album-info-text {
        text-align: center;
        grid-gap: 10px;
    }

    .list-icons-desktop {
        display: none !important;
    }

    #filter {
        display: none;
    }
}

@media (max-width: 575px) {
    #album-info-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
    }

    #album-info-buttons.nolibrary {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }

    #album-info-buttons .btn {
        width: 100% !important;
    }
}

.player-badge-icon {
    width: 24px;
    margin-right: 5px;
}

.navigation-item img {
    filter: brightness(0%);
}

@media (max-height: 64px) {
    .navigation-item-desktop {
        display: none;
    }

    .navigation-item-mobile {
        display: block;
    }

    #navigation-left, #navigation-version {
        display: none !important;
    }

    #navigation-container {
        grid-template-columns: repeat(4, 1fr) !important;
        display: grid !important;
        margin-top: 2px;
    }

    #navigation-container #lyrics {
        display: none !important;
    }

    .navigation-desktop {
        display: none;
    }

    div.navigation-item, div.navigation-item.active {
        background-color: transparent !important;
        border-radius: 10px;
    }

    .navigation-container-inner {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .navigation-item img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        filter: brightness(0%);
    }

    .navigation-item.active img {
        filter: none !important;
    }
}

@media (min-height: 64px) {
    #info-grid-title, #info-grid-info {
        position: relative;
        top: 5px;
        z-index: -1;
    }
}

@media (max-width: 823px) {
    #lyrics-outer, #lyrics-outer * {
        color: rgba(255, 255, 255, .75);
    }

    .synced-lyrics-item {
        font-size: 26px !important;
    }

    #lyrics-synced-fade {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 95%;
    }
}

.dropdown-item:active img {
    filter: invert(1);
}

body.web {
    background-color: white;
}

.modal-dialog {
    margin-top: calc(1.75rem + var(--android-status-bar));
    margin-bottom: calc(1.75rem + var(--android-navigation-bar));
}

.has-navigation {
    padding-top: 32px;
}

#ui-back-button:hover {
    opacity: .75;
}

#ui-back-button:active {
    opacity: .5;
}

#filter {
    background-color: rgba(255, 255, 255, .25) !important;
}

.mobile-ui.has-navigation {
    padding-top: 0 !important;
}

.mobile-ui #ui-navigation {
    display: none !important;
}

.tooltip {
    z-index: 99999 !important;
}

#player.mobilified #info-grid {
    z-index: initial !important;
}

#buttons {
    display: block !important;
}

.track:hover {
    background-color: #f2f2f2;
}