/* Increase size of Jellyfin logo */
.layout-desktop .pageTitleWithLogo {
    margin-left: 15px !important;
    height: 40px !important;
    margin-top: 5px !important;
}



/* Static left drawer */
.layout-desktop .mainDrawer {
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
    width: 250px !important;
    /* Modified background color */
    background-color: transparent !important;
    /* Move drawer behind header */
    z-index: 998 !important;
}
/* Lower drawer buttons */
.layout-desktop .mainDrawer-scrollContainer {
    margin-top: 95px !important;
}
.layout-mobile .mainDrawer-scrollContainer {
    margin-top: 20px !important;
}
/* Shift content to the right */
.layout-desktop .libraryPage:not(#quickConnectPreferencesPage) {
    margin-left: 250px !important;
}
/* Hide transition on page load */
.layout-desktop .touch-menu-la.transition {
    transition: none !important;
}
/* Hide hamburger button */
.layout-desktop .mainDrawerButton {
    display: none !important;
}
/* Fix for dashboard drawer button height */
.layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
    padding-top: 0 !important;
}
/* Hide home button */
.layout-desktop .headerHomeButton {
    display: none !important;
}
.layout-desktop .dashboardDocument .headerHomeButton {
    display: block !important;
}
/* Fix for video player and login page */
.layout-desktop .hide-scroll .mainDrawer,
.layout-desktop .hideMainDrawer .mainDrawer {
    left: -320px !important;
}
/* Fix for scroll menus on home page */
.emby-scroller {
    margin-right: -2% !important;
}



/* Rounded cards */
.cardContent,
.cardPadder,
.cardOverlayContainer,
.blurhash-canvas,
.dialog {
    border-radius: 10px !important;
}



/* Floating progress bar */
.innerCardFooter {
    bottom: 5% !important;
    width: 90% !important;
    margin: auto !important;
    border-radius: 100px !important;
}
.itemProgressBar {
    height: 8px !important;
}
.innerCardFooterClear {
    background-color: black !important;
}



/* Green watched indicator */
.playedIndicator {
    background: #409843 !important;
}



/* Rounded left drawer buttons */
.navMenuOption,
.navMenuOption:hover,
.navMenuOption-selected {
    border-radius: 100px !important;
    width: 85% !important;
    margin: auto !important;
    text-align: center !important;
    height: 45px !important;
}
.navMenuOption:hover:not(.navMenuOption-selected) {
    background-color: rgba(44, 44, 44, 0.7);
}
/* Center icons and text and shift to the left */
.navMenuOptionIcon,
.navMenuOptionText {
    position: inherit !important;
    left: -10% !important;
    margin-top: 0 !important;
}
/* Fix for header buttons */
.layout-desktop .emby-button-foreground {
    top: -9px !important;
}



/* Custom button color */
.navMenuOption-selected {
    background: rgba(33, 149, 243, 0.2) !important;
    color: rgb(33, 149, 243) !important;
    backdrop-filter: blur(50px) !important;
}



/* Transparent header bar */
.skinHeader {
    background-color: transparent !important;
}
.layout-desktop .skinHeader {
    padding-top: 1.5em !important;
}
/* Rounded header buttons */
.headerTabs,
.headerRight {
    background-color:rgba(35, 35, 35, 0.5) !important;
    border-radius: 50px !important;
    backdrop-filter: blur(50px) !important;
}
.layout-desktop .headerTabs,
.layout-desktop .headerRight {
    margin-left: 250px !important;
    margin-bottom: 10px !important;
}
/* Button height */
.headerRight,
.emby-tab-button {
    height: 45px !important;
}
/* Lower header and add padding to right buttons */
.layout-desktop .headerRight {
    padding: 0px 5px !important;
}
/* Move left header back up */
.layout-desktop .headerLeft {
    position: relative !important;
    top: -17px !important;
}
/* Mobile fixes */
.layout-mobile .headroom--unpinned {
    transform: translateY(-50%);
}
.layout-mobile .sectionTabs {
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
}
.layout-mobile .emby-button-foreground {
    top: -2px !important;
}



/* Settings and dashboard modifications */
.emby-input,
.emby-textarea,
.paperList,
.listItem:hover,
.subtitleappearance-preview {
    border-radius: 15px !important;
}
.button-submit,
.emby-select,
.checkboxOutline,
.btnRefresh,
#btnShutdown {
    border-radius: 100px !important;
}
.raised:not(.button-submit, .btnRefresh, #btnShutdown) {
    background: transparent !important;
    font-weight: normal !important;
}
/* Red shutdown button */
#btnShutdown {
    background: #AE3739 !important;
}
/* Remove border under certain dashboard items */
.listItem-border {
    border: 0 !important;
}
/* Add padding to list items */
.layout-desktop .listItem {
    padding-left: 15px !important;
}
/* Rounded dashboard cards */
.cardBox {
    border-radius: 15px !important;
}
/* Removed ugliness of Networking section in dashboard */
.dashboardHostingForm .verticalSection {
    border-radius: 15px !important;
    border-color: #3B3B3B !important;
    padding: 10px 35px !important;
}



/* Remove show/movie image on details page */
.layout-desktop .detailImageContainer {
    display: none !important;
}

/* Re-position content on details page */
.layout-desktop .detailSection {
    margin-right: 0 !important;
}
.layout-desktop .detailPageContent {
    padding-left: 4% !important;
}

/* Re-position logo */
.layout-desktop .detailLogo {
    right: 0 !important;
    left: 4% !important;
    top: 14vh !important;
}

/* Transparent ribbon bar */
.detailRibbon {
    background: transparent !important;
}

/* Add card around top-right buttons */
.mainDetailButtons {
    background: rgba(35, 35, 35, 0.5) !important;
    border-radius: 100px !important;
    backdrop-filter: blur(10px) !important;
}

/* Add card around groups section */
.layout-desktop .detailsGroupItem {
    background: #181818 !important;
    padding: 10px 20px !important;
    border-radius: 100px !important;
    width: fit-content !important;
    max-width: max-content !important;
}

/* Fix for groups section card */
.layout-desktop .content.focuscontainer-x {
    white-space: nowrap !important;
    padding-right: 48px !important;
}

/* Alternative mobile group section card */
.layout-mobile .itemDetailsGroup {
    background: #181818 !important;
    padding: 15px 20px 5px 20px !important;
    border-radius: 15px !important;
}

/* Add card around description */
.layout-desktop .detailSectionContent {
    background: #181818 !important;
    border-radius: 15px !important;
    padding: 40px 20px 10px 20px !important;
    margin-top: 50px !important;
}
.layout-mobile .detailSectionContent {
    background: #181818 !important;
    border-radius: 15px !important;
    padding: 10px 20px !important;
}

/* Add card around track selection */
.trackSelections {
    background: #181818 !important;
    border-radius: 15px !important;
    padding: 10px 20px !important;
    margin-top: 20px !important;
}

/* Re-position title */
.layout-desktop .infoWrapper {
    margin-top: 245px !important;
}
.layout-desktop .detailPagePrimaryContainer {
    padding-left: 4% !important;
}
.layout-desktop .nameContainer {
    padding-bottom: 30px !important;
}
.layout-desktop .itemMiscInfo {
    margin-left: 21px !important;
}

/* Move track selection box */
.detailSection {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
.detailSection .detailSectionContent {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}
.detailSection .trackSelections {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
.detailSection .itemDetailsGroup {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}



/* Fix for scaling issues */
@media (width: 1600px) {
    .layout-desktop .headerRight {
        margin-bottom: 0 !important;
    }
    .layout-desktop .emby-button-foreground {
        top: -4px !important;
    }
}
@media (max-width: 1599px) {
    .layout-desktop .pageTitleWithLogo {
        margin-left: 25px !important;
    }
    .layout-desktop .headerTabs {
        margin-top: -65px !important;
    }
    .layout-desktop .headerRight {
        margin-right: 15px !important;
    }
    .layout-desktop .sectionTabs {
        width: auto !important;
        align-self: center !important;
    }
    .layout-desktop .emby-button-foreground {
        top: -2px !important;
    }
}