/* ElegantFin Theme for Jellyfin by lscambo13 */

/* Add-ons: Uncomment to enable */
/* @import url(./assets/add-ons/extras-media-bar-nightly.css); */
/* @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); */

/* Inter Font Family */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --elegantFinFooterText: "ElegantFin Nightly";

    /* Base theme colors */
    color-scheme: dark;
    --darkerGradientPoint: #111827;
    --darkerGradientPointAlpha: rgba(17, 24, 39, 0.85);
    --lighterGradientPoint: #1d2635;
    --lighterGradientPointAlpha: rgba(29, 38, 53, 0.85);
    --headerColor: rgba(30, 40, 54, 0.8);
    --drawerColor: rgba(30, 40, 54, 0.9);

    --borderColor: rgb(71, 80, 92);
    --lighterBorderColor: rgb(255 255 255 / 20%);

    --selectorBackgroundColor: rgb(55, 65, 81);
    --selectorBackgroundColorAlpha: rgba(55, 65, 81, 0.5);

    --activeColorAlpha: rgba(119, 91, 244, 0.9);
    --activeColor: rgb(119, 91, 244);
    --osdSeekBarPlayedColor: var(--textColor);
    --osdSeekBarBufferedColorAlpha: rgba(128, 128, 128, 0.5);
    --osdSeekBarThumbColor: white;
    --tableBodyColor: rgb(31 41 55 / 1);
    --uiAccentColor: rgb(117 111 226);
    --btnMiniPlayColor: rgb(41 154 93);

    /* Base component colors */
    --btnDeleteColor: rgb(169, 29, 29);
    --btnDeleteBorderColor: rgb(217, 84, 84);
    --btnSubmitColor: rgb(61, 54, 178);
    --btnSubmitBorderColor: rgb(117 111 226);
    --checkboxCheckedBgColor: rgb(79, 70, 229);
    --highlightOutlineColor: rgb(37, 99, 235);

    --btnPlayBorderColor: color-mix(in srgb, var(--btnMiniPlayColor), rgb(255, 255, 255) 5%);
    --defaultBorder: var(--borderWidth) solid var(--borderColor);
    --defaultLighterBorder: var(--borderWidth) solid var(--lighterBorderColor);

    /* dark theme based text colors */
    --textColor: rgb(209, 213, 219);
    --dimTextColor: rgb(156, 163, 175);

    /* textures */
    --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
    --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%);
    --hoverGradientV: linear-gradient(0deg, transparent, rgb(255 255 255 / 100%) 45%, rgb(255 255 255 / 100%) 55%, transparent);
    --hoverGradientH: linear-gradient(90deg, transparent, rgb(255 255 255 / 100%) 45%, rgb(255 255 255 / 100%) 55%, transparent);
    --ditheringMask: url(https://grainy-gradients.vercel.app/noise.svg);

    /* login page customizations */
    /* --loginPageBgUrl: url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2"); */
    --loginPageBgUrl: url("");
    --loginPageText: "Sign in to continue";

    /* standard component sizes */
    --largerRadius: 1.25em;
    --largeRadius: 1em;
    --smallRadius: .5em;
    --smallerRadius: .375em;
    --borderWidth: 0.075em;

    --blurSmallest: blur(2px);
    --blurDefault: blur(5px);
    --blurLarge: blur(10px);
    --blurLargest: blur(20px);

    --shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);

    /* to revert to old icons, use 'Material Icons'*/
    --iconPack: 'Material Icons Round';

    --extraCardButtonsVisibility: none;
}

html {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 425;
    font-style: normal;
    -webkit-tap-highlight-color: transparent !important;
}

/* Material Icons Round */
/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */
@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v230/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
}

.material-icons {
    font-family: var(--iconPack) !important;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
}

.material-icons.info_outline:before {
    font-family: Material Icons;
}

.dashboardFooter {
    font-family: "Noto Sans", serif;
    transition: transform 50ms;
}

.dashboardFooter::after {
    content: var(--elegantFinFooterText);
    font-size: .8em;
    color: #4e4e60;
}

::selection {
    background: var(--activeColorAlpha);
}

.cardImageIcon {
    color: var(--borderColor);
}

.card {
    padding: .375em;
    transition: width 650ms;
}

/* .card:hover .cardScalable {
    box-shadow: 0px 4px 13px 0px black;
} */

.card:focus .cardBox:not(.visualCardBox) .cardScalable {
    border-color: var(--highlightOutlineColor) !important;
    filter: brightness(1.125);
}

.emby-button.show-focus:focus,
.paper-icon-button-light.show-focus:focus {
    background-color: var(--highlightOutlineColor) !important;
    color: #fff;
}

.emby-tabs .emby-button.show-focus:focus {
    outline: none !important;
    color: #fff;
    background-color: var(--highlightOutlineColor) !important;
}

[dir=ltr] .itemsContainer>.card>.cardBox {
    margin-left: auto;
    margin-right: auto;
}

.cardBox-bottompadded {
    margin-bottom: .5em !important;
}

@media (max-width: 50em) {
    .cardBox-bottompadded {
        margin-bottom: .25em !important;
    }
}

.vertical-wrap:not(.centered) {
    justify-content: flex-start !important;
}

.countIndicator,
.fullSyncIndicator,
.mediaSourceIndicator {
    background: rgb(31, 80, 189);
    border: var(--defaultLighterBorder);
}

.cardScalable {
    border-radius: var(--largeRadius);
    border: var(--borderColor) solid calc(2 * var(--borderWidth)) !important;
    overflow: hidden !important;
    transition: transform 125ms;
}

#castCollapsible .cardScalable,
#guestCastContent .cardScalable {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

#castCollapsible .cardContent.cardImageContainer,
#guestCastContent .cardContent.cardImageContainer {
    background-position-y: 33%;
}

.layout-mobile .cardScalable {
    border: var(--defaultBorder) !important;
}

.cardImageContainer {
    transition: transform .375s;
}

.card.squareCard[data-type="TvChannel"] .cardImageContainer.cardContent {
    background-color: rgba(255, 255, 255, 0.2);
}

.cardImageContainer>.cardDefaultText {
    font-size: 2em;
    padding-top: 1.5em;
    color: transparent;
    white-space: pre;
}

.cardImageContainer>.cardDefaultText::before {
    content: "?\A";
    color: var(--borderColor);
}

.card.card-hoverable:hover .cardScalable {
    border-color: var(--textColor) !important;
}

.card.card-hoverable:hover .cardImageContainer {
    transform: scale(1.025);
    filter: brightness(1.025);
}

.card.card-hoverable .itemSelectionPanel {
    transition: transform .125s;
}

.card.card-hoverable:hover .cardScalable,
.card.card-hoverable:hover .itemSelectionPanel {
    transform: scale(1.02);
}

.card.card-hoverable .cardScalable:active {
    transition: transform .075s;
    transform: scale(1);
}

.cardScalable:has(.cardOverlayContainer .cardOverlayButton:hover)>.cardImageContainer {
    transform: scale(1);
}

.cardOverlayContainer {
    transition: .5s;
    background: rgba(255, 255, 255, 0.05);
}

.layout-desktop .card.card-hoverable .cardOverlayContainer:after {
    content: "";
    transition: .5s;
    position: absolute;
    inset: 0;
    transform: translateY(-50%) translateX(0);
    background: var(--hoverGradientV);
}

.layout-desktop .card.card-hoverable:hover .cardOverlayContainer:after {
    transform: translateY(50%) translateX(0);
    opacity: 0;
}

.layout-desktop .backdropCard.card-hoverable .cardOverlayContainer:after,
.layout-desktop .overflowBackdropCard.card-hoverable .cardOverlayContainer:after {
    transform: translateY(0) translateX(-50%);
    background: var(--hoverGradientH);
}

.layout-desktop .backdropCard.card-hoverable:hover .cardOverlayContainer:after,
.layout-desktop .overflowBackdropCard.card-hoverable:hover .cardOverlayContainer:after {
    transform: translateY(0) translateX(50%);
    opacity: 0;
}

.cardBox:not(.visualCardBox) .cardPadder {
    background-color: var(--lighterGradientPoint);
}

.cardOverlayContainer>.cardOverlayFab-primary {
    left: unset;
    margin-left: unset;
    margin-top: unset;
    top: unset;
    right: 1.25em;
    bottom: 1.25em;
}

.cardOverlayContainer>.cardOverlayFab-primary,
.listItemImageButton,
.layout-mobile .cardOverlayButton-br>.cardOverlayButtonIcon {
    background-color: var(--btnMiniPlayColor) !important;
    color: white;
    border: var(--defaultLighterBorder);
    border-color: var(--btnPlayBorderColor);
    font-size: 75%;
}

.cardOverlayContainer>.cardOverlayFab-primary:hover,
.listItemImageButton:hover {
    color: white;
}

.layout-desktop .cardOverlayButton-br button[data-action="menu"] {
    display: none;
}

.layout-desktop .cardOverlayButton-br,
[dir=ltr].layout-desktop .cardOverlayButton-br {
    bottom: .5em;
    right: .5em;
    display: var(--extraCardButtonsVisibility);
    text-shadow: 0 0 4px #000000cf;
}

.layout-desktop .cardOverlayButton-br button {
    color: var(--textColor);
    text-shadow: 0 0 4px #000000cf;
}

.layout-mobile .cardOverlayButton {
    padding: 1em;
    font-size: 75%;
}

.layout-mobile .portraitCard .cardOverlayButton-br,
.layout-mobile .backdropCard .cardOverlayButton-br,
.layout-mobile .cardOverlayButton-br[data-action="menu"] {
    display: none;
}

.cardOverlayContainer:has(.cardOverlayButton:hover) {
    backdrop-filter: var(--blurDefault);
}

.listViewUserDataButtons {
    /* flex-direction: column; */
    font-size: small;
}

.layout-mobile .listViewUserDataButtons {
    flex-direction: column;
    font-size: x-small;
}

.listItem-largeImage[data-type="Episode"] .listViewUserDataButtons {
    flex-direction: column;
    font-size: small;
}

.smallBackdropCard,
.squareCard,
.backdropCard,
.bannerCard {
    width: 46%;
}

.portraitCard {
    min-width: 5em;
}

/* if the window width is equal to or more than (at minimum) 150em then the code in the query will trigger */
/* 14 posters, 10 thumbs */
@media (min-width: 150em) {

    .portraitCard,
    .squareCard {
        width: 6.6% !important;
    }

    .backdropCard {
        width: 9.5%;
    }
}

/* if the window width is equal to or less than (at maximum) 150em then the code in the query will trigger */
/* 9 posters, 7 thumbs */
@media (max-width: 150em) {

    .portraitCard,
    .squareCard {
        width: 10.4% !important;
    }

    .backdropCard {
        width: 13.6%;
    }
}

/* 7 posters, 6 thumbs */
@media (max-width: 120em) {

    .portraitCard,
    .squareCard {
        width: 13.5% !important;
    }

    .backdropCard {
        width: 15.8%;
    }
}

/* 6 posters, 5 thumbs */
@media (max-width: 100em) {

    .portraitCard,
    .squareCard {
        width: 15.2% !important;
    }

    .backdropCard {
        width: 18.4%;
    }
}

/* 5 posters, 4 thumbs */
@media (max-width: 62em) {

    .portraitCard,
    .squareCard {
        width: 17.9% !important;
    }

    .backdropCard {
        width: 23.3%;
    }

}

/* 4 posters, 3 thumbs */
@media (max-width: 48.125em) {

    .portraitCard,
    .squareCard {
        width: 22.3% !important;
    }

    .backdropCard {
        width: 30.7%;
    }
}

/* 3 posters, 2 thumbs */
@media (max-width: 30em) {

    .portraitCard,
    .squareCard {
        width: 28.8% !important;
    }

    .layout-mobile .portraitCard,
    .layout-mobile .squareCard {
        width: 29.8% !important;
    }

    .backdropCard {
        width: 46%;
    }
}

.detailPageWrapperContainer {
    padding-top: unset;
    margin-top: unset;
}

.layout-desktop .detailPageWrapperContainer {
    background: transparent;
    min-height: calc(100vh - 13em);
}

.detailPagePrimaryContainer {
    align-content: space-between;
    align-items: stretch;
    justify-content: end;
    flex-direction: column;
    /* center content on desktop */
    /* align-items: center; */
    /* text-align: center; */
}

[dir=ltr] .detailPagePrimaryContent {
    padding-right: 0;
}

.layout-desktop .detailPagePrimaryContainer {
    background: transparent;
}

.layout-desktop .detailPageSecondaryContainer {
    background-color: transparent;
}

/* this hides the header home button everywhere except the main media page */
.skinHeader-withBackground:not(.semiTransparent) .headerHomeButton {
    display: none;
}

/* workaround to show the header home button on the main media page on phones*/
.layout-mobile:has(#itemDetailPage:not(.hide)) .headerHomeButton {
    display: block;
}

/* hides sync button on home screen on phones only in portrait mode */
@media (orientation: portrait) {
    .layout-mobile .skinHeader.noHomeButtonHeader .headerSyncButton {
        display: none;
    }
}

.pageTitle {
    height: 1.5em;
}

.headerLeft .pageTitle {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.paper-icon-button-light>.material-icons {
    font-size: 1.25em;
}

.verticalSection.emby-scroller-container>h2.sectionTitle.sectionTitle-cards {
    padding-top: 1.25em !important;
}

#itemDetailPage .emby-scroller-container,
#itemDetailPage .emby-scroller,
#itemDetailPage .scrollX {
    margin-inline: -5%;
    padding-inline: 5%;
}

/* .sectionTitleContainer-cards,
.sectionTitle-cards,
.sectionTitleTextButton {
    font-weight: 400;
    font-size: 1.25rem;
} */
.sectionTitleContainer-cards {
    padding-top: 0;
}

.sectionTitleContainer+.emby-scrollbuttons {
    padding-top: 0;
}

.layout-mobile :not(.sectionTitleContainer-cards)>.sectionTitle-cards {
    text-align: left;
}

.emby-scrollbuttons-button.paper-icon-button-light>.material-icons {
    font-size: 1.5em;
    place-content: center;
}

.detailRibbon {
    background-color: transparent;
}

.mediaInfoItem {
    border-radius: var(--smallRadius);
    font-weight: 500;
    padding-block: 0;
}

.itemMiscInfo-primary {
    column-gap: .5em;
}

.mediaInfoOfficialRating {
    background: transparent !important;
    font-size: .75em;
    font-family: 'Noto Sans', sans-serif;
    line-height: 1.5em;
    transform: translateY(-.15em);
    font-weight: 600;
    border: var(--defaultBorder);
}

.starIcon {
    background: linear-gradient(to right, #90cea1, #01b4e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: -.125em;
    transform: translateY(-.02em);
}

[dir=ltr] .mediaInfoCriticRating {
    background-size: 30%;
    padding-left: 1.5em;
}

[dir=ltr] .mediaInfoCriticRating::after {
    content: "%";
}

.layout-desktop .detailRibbon {
    height: auto !important;
    margin-top: unset !important;
}

@keyframes animMoveDown {
    from {
        transform: translateY(-2em);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


.detailLogo {
    display: none;
}

@keyframes animMoveUp {
    from {
        transform: translateY(-90%);
        opacity: 0;
    }

    to {
        transform: translateY(-100%);
        opacity: 1;
    }
}

.layout-mobile .detailLogo {
    display: block;
    z-index: 1;
    position: absolute;
    left: 1em;
    top: 45vh;
    width: calc(100vw - 2em);
    max-height: 20vh;
    background-position: bottom;
    animation: animMoveUp 1s ease-out forwards;
}

.layout-mobile .itemBackdrop {
    margin-top: 0;
    position: sticky;
    top: -30%;
    background-position: 50% 50%;
    mask: linear-gradient(180deg, rgba(0, 0, 0, .75) 50%, transparent);
    animation: animMoveDown 1s ease-out forwards;
    height: 45vh;
}

/* .layout-mobile .itemBackdrop:before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    z-index: -1;
} */

.layout-desktop .itemBackdrop {
    height: 13em;
}

.layout-tv .itemBackdrop {
    display: block;
    height: 13vh;
}

.layout-desktop .detailImageContainer .card {
    top: unset !important;
    width: 23vw !important;
    /* position: unset !important; */
}

.layout-tv .detailImageContainer .card {
    width: 23vw !important;
}

.layout-mobile .detailImageContainer .card {
    -webkit-filter: drop-shadow(0 0 .25rem rgba(0, 0, 0, 0.25));
    filter: drop-shadow(0 0 .25rem rgba(0, 0, 0, 0.25));
}

/* this brings the buttons and title to the center in main media page */
.layout-mobile [dir=ltr] .infoWrapper,
.layout-mobile .infoWrapper {
    padding-left: 0;
}

/* Both the blocks below position the poster in main media page in the center */
.layout-mobile .detailImageContainer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-left: 0 !important;
}

.layout-mobile .detailImageContainer .card {
    position: inherit !important;
    margin-top: -70%;
    max-width: 75vw;
    display: none;
}

/* .layout-mobile .detailImageContainer .card.backdropCard {
}

.layout-mobile .detailImageContainer .card.portraitCard {
} */

.layout-mobile .detailPageWrapperContainer {
    padding-top: 0;
    margin-top: .5em;
}

/* this hides the main media title when the clear logo is available*/
.layout-mobile #itemDetailPage:has(.detailLogo:not(.hide)) .infoWrapper .parentNameLast,
.layout-mobile #itemDetailPage:has(.detailLogo:not(.hide)) .infoWrapper .parentName,
.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .detailLogo {
    z-index: 2;
    display: none;
}

/* this shows the main media title and the poster when the clear logo is unavailable*/
.layout-mobile #itemDetailPage:has(.detailLogo.hide) .infoWrapper .parentNameLast,
.layout-mobile #itemDetailPage:has(.detailLogo.hide) .infoWrapper .parentName,
.layout-mobile #itemDetailPage:has(.detailLogo.hide) .detailImageContainer .card,
.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .detailImageContainer .card,
.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .infoWrapper .parentNameLast,
.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .infoWrapper .parentName,
.layout-mobile #itemDetailPage:has(.nameContainer .musicParentName) .infoWrapper .itemName,
.layout-mobile #itemDetailPage:has(.nameContainer .musicParentName) .infoWrapper .parentName {
    display: block;
}

.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .itemBackdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: brightness(.5);
    /* mask: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, transparent 35%); */
}

.layout-mobile .overflowBackdropCard .cardImageContainer .cardImageIcon {
    font-size: 3.5em;
}

@media (max-width: 62.5em) {
    .layout-desktop .itemBackdrop {
        height: 7em !important;
    }

    .layout-desktop .detailPageWrapperContainer {
        min-height: calc(100vh - 7em);
    }
}

@media (max-width: 50em) {
    .homeLibraryButton {
        width: 45.6% !important;
    }
}

.homeLibraryButton {
    padding-inline-start: .25em;
    min-width: 15%;
}

@media (orientation: portrait) and (max-width: 40em) {

    [data-type=Movie] .listItemImage,
    [data-type=Series] .listItemImage {
        display: unset;
    }
}

@media (orientation: portrait) {

    .layout-mobile .detailImageContainer .card.backdropCard {
        width: 65vw !important;
    }

    .layout-mobile .detailImageContainer .card.portraitCard {
        width: 45vw !important;
    }


    .layout-mobile .overflowSquareCard {
        width: 27vw;
    }

    /* two portrait cards and three backdrop cards in cast page */
    .layout-mobile .overflowPortraitCard,
    .layout-mobile .overflowBackdropCard,
    .layout-mobile .overflowSmallBackdropCard {
        width: 42vw;
    }

    .layout-mobile #homeTab .overflowPortraitCard {
        width: 40vw;
    }

    /* two and a quarter portrait cards in home page */
    .layout-mobile #homeTab .overflowBackdropCard,
    .layout-mobile #homeTab .overflowSmallBackdropCard {
        width: 42vw;
    }

    /* quarter to two backdrop cards in home page */
    .layout-mobile #homeTab .overflowBackdropCard:has(.cardOverlayButtonIcon.play_arrow),
    .layout-mobile #homeTab .overflowSmallBackdropCard:has(.cardOverlayButtonIcon.play_arrow) {
        width: 52vw;
    }
}

@media (orientation: landscape) and (max-height: 40em) {

    .overflowPortraitCard,
    .overflowSquareCard {
        width: 13vw;
    }

    .overflowBackdropCard,
    .overflowSmallBackdropCard {
        width: 20vw;
    }

    .portraitCard {
        min-width: 2em;
        width: 8.5%;
        max-width: 6.5em;
    }

    .backdropCard {
        width: 23%;
    }
}

h2 {
    font-size: 1.25em;
}

h1,
h2 {
    font-weight: 600;
}

.tagline {
    font-size: 1.3em;
    font-weight: 400;
    margin-bottom: 0;
    font-style: italic;
    color: var(--textColor);
}

.nowPlayingPlaylist,
.nowPlayingContextMenu,
html {
    background: var(--backgroundGradient);
    background-attachment: fixed;
}


/* Uncomment to turn dithering back on - START*/
.backgroundContainer:not(.withBackdrop, .backgroundContainer-transparent) {
    background: var(--backgroundGradient)
        /* background: var(--lighterGradientPoint); */
}

/* .backdropContainer::after {
    content: '';
    position: absolute;
    inset: 0%;
    background: var(--darkerGradientPointAlpha);
    mask: var(--ditheringMask);
} */

.backgroundContainer.withBackdrop {
    opacity: .98;
    background: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPointAlpha) 100%);
}

/* .backgroundContainer:not(.withBackdrop, .backgroundContainer-transparent):after {
    content: '';
    background: linear-gradient(0deg, var(--darkerGradientPoint) 35%, transparent 100%);
    position: absolute;
    inset: 0%;
    filter: contrast(1.25);
    mask: var(--ditheringMask);
} */

/* Uncomment to turn dithering back on - END*/

@keyframes animScaleUp {
    from {
        transform: scale(1);
        opacity: 0;
    }

    to {
        transform: scale(1.075);
        opacity: 1;
    }
}

.backdropImageFadeIn {
    transform-origin: bottom left;
    animation: animScaleUp 3s ease-out forwards;
}

.appfooter {
    background-color: var(--headerColor) !important;
    backdrop-filter: var(--blurDefault) !important;
}

.lyricPage {
    padding-inline: .5em;
}

.lyricsLine {
    font-size: 2.5em;
    color: var(--textColor);
    text-align: center;
    align-self: center;
    font-weight: 600;
    transition: transform .125s;
}

.pastLyric,
.futureLyric {
    transform: scale(.75);
    font-weight: 400;
    text-align: center;
}

.pastLyric {
    opacity: .65;
}

.buttonActive {
    color: var(--uiAccentColor) !important;
}

#divRunningTasks progress {
    width: calc(100% - 7em);
}

.listItemImage .itemProgressBar {
    position: absolute;
    margin: 8%;
}

.layout-mobile .listItemImage .itemProgressBar {
    position: absolute;
    justify-self: center;
    margin-bottom: 5%;
}

.itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
    backdrop-filter: var(--blurLarge);
    background-color: var(--osdSeekBarBufferedColorAlpha) !important;
    height: 0.35em;
    overflow: hidden;
    border-radius: var(--largeRadius);
}

.layout-mobile .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
    width: calc(100% - 2.5em);
}

.layout-mobile .backdropCard .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress),
.layout-mobile .portraitCard .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
    width: 100%;
    width: -webkit-fill-available;
}

.itemProgressBarForeground {
    border-radius: var(--largeRadius);
    background-color: var(--dimTextColor);
}

.backgroundProgress>div {
    background-color: var(--darkerGradientPoint);
}

.playbackProgress>div {
    background-color: var(--uiAccentColor);
}

::-moz-progress-bar {
    background: var(--uiAccentColor) !important;
    border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
}

::-webkit-progress-value {
    background: var(--uiAccentColor) !important;
    border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
}

progress,
::-webkit-progress-bar {
    background: var(--darkerGradientPoint) !important;
    border: var(--defaultBorder) !important;
    border-radius: var(--smallRadius);
    overflow: hidden;
}

progress+span {
    color: var(--uiAccentColor) !important;
}

.mdl-spinner__circle {
    border-color: var(--textColor);
    border-style: inset;
    border-width: 0.25em;
}

.mdl-slider-container {
    height: 1em;
}

.mdl-slider {
    height: unset;
}

.mdl-slider-background-flex-container {
    padding: 0;
}

/* this is the osd player slider */
.mdl-slider-background-flex {
    border-radius: var(--smallRadius);
    height: .4em;
    margin-top: -.2em;
    background: var(--osdSeekBarBufferedColorAlpha);
    transition: all 0.2s linear;
}

.sliderContainer:active .mdl-slider-background-flex {
    height: .6em;
    margin-top: -.3em;
}

.mdl-slider-background-lower {
    background-color: var(--osdSeekBarPlayedColor);
}

.mdl-slider-background-upper {
    background-color: var(--osdSeekBarBufferedColorAlpha);
}

.mdl-slider::-webkit-slider-thumb {
    background: var(--osdSeekBarThumbColor);
    width: 4px !important;
    height: .4em !important;
    border-radius: 0em;
}

.sliderContainer:hover .mdl-slider::-webkit-slider-thumb {
    width: .2em !important;
    height: .8em !important;
    border-radius: .2em;
    transform: scale(1);
}

.sliderContainer:active .mdl-slider::-webkit-slider-thumb,
.mdl-slider.show-focus:focus::-webkit-slider-thumb {
    width: .2em !important;
    height: .8em !important;
    border-radius: .2em;
    transform: scale(1) scaleY(1.25);
}

.mdl-slider::-moz-range-thumb {
    background: var(--osdSeekBarThumbColor);
}

.sliderMarkerContainer {
    margin: 0 .1em;
}

.sliderMarker.watched {
    background-color: var(--osdSeekBarPlayedColor);
}

.sliderMarker {
    height: 4px;
    border-radius: 2px;
}

.iconOsdProgressInner {
    background: var(--osdSeekBarPlayedColor);
}

.selectLabel {
    max-height: 2em;
}

.button-link {
    color: rgb(200, 200, 200);
}

.button-link:hover {
    color: unset !important;
    text-decoration: none;
}

.button-link:active {
    color: rgb(243, 243, 243) !important;
    text-decoration: none;
}

.mainDrawer,
.drawer-open {
    background-color: var(--drawerColor);
    border-right: var(--defaultBorder);
    backdrop-filter: var(--blurLarge);
}

.mainDrawer-scrollContainer {
    padding-bottom: 5vh;
}

.btnHeaderSave.button-flat {
    color: var(--uiAccentColor) !important;
    gap: 0.3em;
    border-radius: var(--smallRadius);
}

.button-flat:hover {
    color: unset;
}

.button-flat:active {
    color: unset;
    background-color: rgba(255, 255, 255, 0.2);
}

.playstatebutton-icon-played {
    color: rgb(34, 197, 94);
}

.videoOsdBottom.videoOsdBottom-maincontrols .btnPause {
    font-size: 2em;
}

.nowPlayingBar .playPauseButton {
    font-size: 2em;
}

.nowPlayingInfoContainer .btnPlayPause {
    font-size: 3em;
}

.osdControls {
    display: flex;
    flex-direction: column-reverse;
}

.itemDetailsGroup {
    outline: none;
    overflow: hidden;
    margin-top: 1em;
    border: var(--defaultBorder);
    border-radius: var(--smallRadius);
    background-color: var(--lighterGradientPointAlpha);
}

@supports(display:revert) {
    .itemDetailsGroup {
        outline: var(--defaultBorder);
        outline-offset: calc(-1*var(--borderWidth));
        border: none;
    }
}

.itemDetailsGroup>div:not(:last-child) {
    border-bottom: var(--defaultBorder);
}

.detailsGroupItem {
    margin: 0 !important;
    justify-content: space-between;
    padding: 0.5em 0.9em;
    align-items: baseline;
}

.detailsGroupItem>.label {
    font-weight: 600;
    flex-basis: 6em;
}

.detailsGroupItem>.content>a {
    font-weight: 400;
    text-align: end;
}

.detailsGroupItem>.content {
    text-align: end;
    color: var(--dimTextColor);
}

.detailsGroupItem>.label {
    color: var(--textColor);
}

.itemExternalLinks {
    color: var(--textColor);
}

.itemExternalLinks.focuscontainer-x {
    color: transparent;
}

.itemExternalLinks.focuscontainer-x>.button-link {
    color: var(--textColor);
    background-color: var(--selectorBackgroundColor);
    padding: .125em .5em;
    border-radius: var(--smallerRadius);
    margin-bottom: .5em;
}

.layout-mobile .itemExternalLinks.focuscontainer-x>.button-link:hover:not(:active) {
    color: var(--textColor) !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x>a:hover,
.itemExternalLinks.focuscontainer-x>a:active {
    background-color: var(--activeColor) !important;
    color: white !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="themoviedb.org"]:hover,
.itemExternalLinks.focuscontainer-x>a[href*="themoviedb.org"]:active {
    background-color: rgb(26, 183, 216) !important;
    color: black !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="imdb.com"]:hover,
.itemExternalLinks.focuscontainer-x>a[href*="imdb.com"]:active {
    background-color: rgb(226, 182, 22) !important;
    color: black !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="thetvdb.com"]:hover,
.itemExternalLinks.focuscontainer-x>a[href*="thetvdb.com"]:active {
    background-color: rgb(108, 213, 145) !important;
    color: black !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="trakt.tv"]:hover,
.itemExternalLinks.focuscontainer-x>a[href*="trakt.tv"]:active {
    background-color: rgb(171, 58, 173) !important;
    color: var(--textColor) !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="theaudiodb.com"]:hover,
.itemExternalLinks.focuscontainer-x>a[href*="theaudiodb.com"]:active {
    background-color: rgb(99, 153, 204) !important;
    color: rgb(15, 22, 28) !important;
}

.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="musicbrainz.org"]:hover,
.itemExternalLinks.focuscontainer-x>a[href*="musicbrainz.org"]:active {
    background-color: rgb(186, 71, 143) !important;
    color: var(--textColor) !important;
}

.itemTags,
.itemTags>a {
    display: none;
    font-size: unset !important;
    font-weight: 200;
}

.detail-clamp-text {
    text-align: start;
    color: var(--dimTextColor);
    margin-block: 0;
    -webkit-line-clamp: 4;
}

.overview-expand.emby-button {
    padding: .25em 1em 1em;
}

.itemMiscInfo {
    align-items: flex-end !important;
    /* center content on desktop */
    /* justify-content: center; */
}

.innerCardFooter,
.chapterThumbTextContainer {
    background: linear-gradient(0deg, #000000e8, transparent);
    /* font-weight: 500; */
    text-shadow: .1em .1em 0px black;
    width: auto;
    width: -webkit-fill-available;
    padding: 5em 2em 2em 2em;
}

.chapterCardImageContainer {
    background-size: 135%;
}

.chapterCardImageContainer+.innerCardFooter {
    padding: 0em 1em 1em 1em;
}

.layout-mobile .innerCardFooter {
    padding: 5em 1.5em 1.5em 1.5em;
}

.layout-mobile .chapterCardImageContainer+.innerCardFooter {
    padding: 0em .5em .5em .5em;
}

.centerMessage {
    width: unset;
}

.dialog {
    backdrop-filter: var(--blurDefault);
    background-color: var(--drawerColor);
    min-width: 11em;
}

.dialog:not(.dialog-fullscreen) {
    border-radius: var(--largeRadius) !important;
    border: var(--defaultBorder);
}

@media (max-width: 80em),
(max-height: 45em) {

    .dialog.dialog-fixedSize,
    .dialog.dialog-fullscreen-lowres {
        border-radius: unset !important;
        border: unset;
    }

    body:has(.dialog.dialog-fixedSize.opened,
        .dialog.dialog-fullscreen-lowres.opened) {
        overflow: hidden;
    }
}


.dialogBackdropOpened {
    opacity: .66;
}

.dialogContainer:has([data-id="editlyrics"]) {
    top: -1.75em;
}

.subtitleEditor-dropZone,
.imageEditor-dropZone {
    border-radius: var(--largeRadius);
}

.formDialogHeaderTitle {
    margin-inline: 0 !important;
    text-align: center;
    padding: 0 0.5em !important;
}

.formDialogFooter:not(.formDialogFooter-clear.formDialogFooter-flex)>.formDialogFooterItem {
    -webkit-flex-basis: 6em;
    flex-basis: 6em;
}

.collapseContent {
    background-color: unset !important;
    backdrop-filter: unset !important;
}

.selectionCommandsPanel {
    background: var(--lighterGradientPoint);
    border-bottom: var(--defaultBorder);
    backdrop-filter: var(--blurLarge);
}

.selectionCommandsPanel>h1 {
    font-size: large;
}

.itemSelectionPanel {
    border: unset;
    background-color: transparent;
}

.emby-checkbox:checked+span+.checkboxOutline {
    border-radius: var(--smallerRadius) !important;
    box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, 0.8);
    background: transparent;
    border-color: white;
    border-style: solid;
    border-width: calc(2 * var(--borderWidth));
    outline: none;
}

@supports(display:revert) {
    .emby-checkbox:checked+span+.checkboxOutline {
        outline: solid var(--borderWidth) white;
    }
}

.checkboxOutline {
    top: unset;
    height: 1.3em;
    width: 1.3em;
    border-radius: var(--smallerRadius);
}


.itemSelectionPanel .material-icons.check:before {
    font-size: 4em;
    color: #ffffff;
    padding: .25em;
}

.cardText-first+.itemSelectionPanel>.checkboxContainer {
    height: calc(100% - 1.75em);
}

div[data-isfolder="true"] .cardText-first+.itemSelectionPanel>.checkboxContainer {
    height: calc(100% - 0em);
}

.checkboxContainer .emby-checkbox:checked+span+.checkboxOutline.multiSelectCheckboxOutline {
    border-radius: var(--largeRadius) !important;
}

#castCollapsible .checkboxContainer .emby-checkbox:checked+span+.checkboxOutline.multiSelectCheckboxOutline,
#guestCastContent .checkboxContainer .emby-checkbox:checked+span+.checkboxOutline.multiSelectCheckboxOutline {
    border-radius: 50% !important;
}

.cardPadder {
    text-align: center;
}

#castCollapsible .cardPadder .cardImageIcon,
#guestCastContent .cardPadder .cardImageIcon {
    /* position: unset; */
    /* transform: translateY(60%) translateX(0); */
    display: none;
}

.cardText-secondary+.itemSelectionPanel>.checkboxContainer,
.cardText.cardTextCentered:not(.cardText-secondary, .cardText-first)+.itemSelectionPanel>.checkboxContainer {
    height: calc(100% - 3em);
}

.cardFooter+.itemSelectionPanel>.checkboxContainer {
    height: calc(100% - 3.75em);
}

.cardScalable+.itemSelectionPanel>.checkboxContainer {
    height: calc(100% - 0em);
}

.checkboxOutline.multiSelectCheckboxOutline {
    border-radius: var(--largeRadius);
    border-width: 0;
    width: 100%;
    height: 100%;
}

.checkboxOutline:not(.multiSelectCheckboxOutline) .checkboxIcon {
    font-size: .9em;
    font-weight: 900;
}

.checkboxOutline:not(.multiSelectCheckboxOutline) {
    border: solid gray var(--borderWidth);
    background-color: white;
}

.emby-checkbox:checked+span+.checkboxOutline:not(.multiSelectCheckboxOutline) {
    box-shadow: none;
    background: var(--checkboxCheckedBgColor);
    border: var(--defaultLighterBorder);
}

.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
    border-color: var(--highlightOutlineColor) !important;
    outline: none;
}

.emby-checkbox:focus+span+.checkboxOutline {
    border-color: var(--highlightOutlineColor) !important;
    outline: none;
}

@supports(display:revert) {
    .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
        outline: var(--borderWidth) solid gray;
        outline-offset: calc(-2.5*var(--borderWidth));
    }

    .emby-checkbox:focus+span+.checkboxOutline {
        border-color: white !important;
        outline: var(--borderWidth) solid var(--highlightOutlineColor);
    }
}

.layout-tv .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
    outline: none;
}

.layout-tv .emby-checkbox:focus+span+.checkboxOutline {
    outline: none;
}

.cardIndicators {
    -webkit-align-items: center;
    align-items: center;
    top: .5em;
}

[dir=ltr] .cardIndicators {
    right: .5em;
}

.layout-mobile .cardIndicators {
    top: .2em;
    right: .2em;
}

.indicator {
    border: solid rgb(124 124 124 / 50%) var(--borderWidth);
    border-radius: 100em;
}

.playedIndicator {
    background: rgb(34, 197, 94);
    border: var(--defaultLighterBorder);
}

.videoIndicator {
    background: rgb(41 41 41);
    padding: .5em;
    transform: scale(.85);
    border: var(--defaultLighterBorder);
    font-size: .75em;
}

.videoIndicator:has(.photo_album),
.videoIndicator:has(.folder) {
    background: peru;
}

.videoIndicator:has(.photo) {
    background: steelblue;
}

.videoIndicator:has(.videocam) {
    background: indianred;
}

.defaultCardBackground,
.cardScalable {
    background: var(--cardBackgroundGradient);
}

div[data-type="Book"] .play_arrow:before {
    content: "\f53b";
    font-size: 85%;
}

div[data-type="Photo"] .play_arrow:before {
    content: "\e5d0";
}

div[data-type="PhotoAlbum"] .play_arrow:before {
    content: "\e8eb";
}

.card-withuserdata[data-isfolder="true"] .cardImageContainer.defaultCardBackground {
    filter: contrast(0.85);
    background-size: cover !important;
    background-position: 50% !important;
    background-blend-mode: multiply;
}

.emby-button.block,
.button-alt,
.raised,
#btnDeleteImage,
.dashboardActionsContainer>.emby-button {
    color: #fff;
    border-radius: var(--smallRadius);
    background: var(--lighterGradientPoint);
    border: var(--defaultBorder);
    transition: all .125s;
}

.editItemMetadataForm>.metadataFormFields div:has(.formDialogFooterItem) {
    display: flex;
    justify-content: center;
}

.btnBrowse>.folder {
    margin-inline-end: .5em;
}

.fab {
    color: #fff;
    background: var(--lighterGradientPoint);
    border: var(--defaultBorder);
}

.fab:focus {
    background: var(--lighterGradientPoint) !important;
    filter: brightness(1.35);
}

.raised:focus {
    background: inherit;
    filter: brightness(1.35);
}

.raised:active,
.fab:active,
.emby-button:active {
    filter: brightness(1.2) !important;
    transform: scale(0.98);
}

.detailButton {
    border: var(--defaultLighterBorder);
    padding: .5em .5em !important;
}

.detailButton-icon {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.detailButton:not(.btnPlay) {
    color: var(--textColor);
    backdrop-filter: none;
    border-color: transparent;
    margin: .5em !important;
    border-radius: 50%;
    padding: .6em !important;
}

.layout-desktop .detailButton:not(.btnPlay):hover {
    color: black;
    background: var(--dimTextColor);
}

.detailButton:active {
    color: black;
    background: var(--textColor);
}

.btnPlay.detailButton {
    background-color: var(--textColor);
    color: black;
    border-radius: 3em;
    border-color: var(--borderColor);
    height: 3em;
    width: 10em;
    margin-right: .5em !important;
}

.layout-mobile .btnPlay.detailButton {
    flex: 0 0 100%;
    margin-right: 0 !important;
}

.btnPlay>.detailButton-content {
    -webkit-align-items: unset;
    align-items: unset;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: unset;
    flex-direction: unset;
    -webkit-justify-content: unset;
    align-content: unset;
    justify-content: flex-start;
}

.btnPlay[title="Play"]>.detailButton-content::after {
    content: "Play";
}

.btnPlay[title="Resume"]>.detailButton-content::after {
    content: "Resume";
}

.btnPlay>.detailButton-content::after {
    padding-left: .25em;
    padding-right: .5em;
    place-content: center;
}

.layout-mobile [dir=ltr] .mainDetailButtons {
    flex-wrap: wrap;
    padding-inline: 1.25em;
    /* center content on desktop */
    /* justify-content: center; */
}

.localnav>.emby-button {
    background: var(--lighterGradientPoint) !important;
    color: #fff;
    padding: .8em .8em;
}

div[data-role=controlgroup] a.ui-btn-active {
    background: var(--selectorBackgroundColor) !important;
    color: #fff !important;
}

.guide-date-tab-button.emby-tab-button-active,
.guide-date-tab-button:focus {
    color: white;
}

#btnDeleteImage,
.button-delete,
.btnRevoke,
#btnShutdown {
    background: var(--btnDeleteColor);
    border: solid var(--btnDeleteBorderColor) var(--borderWidth);
}

.button-submit {
    background: var(--btnSubmitColor) !important;
    border: solid var(--btnSubmitBorderColor) var(--borderWidth) !important;
}

.collapseContent,
.formDialogFooter:not(.formDialogFooter-clear),
.formDialogHeader:not(.formDialogHeader-clear) {
    background-color: var(--headerColor);
    backdrop-filter: var(--blurDefault);
}

.visualCardBox,
.paperList {
    background-color: var(--headerColor) !important;
    border-radius: var(--largeRadius) !important;
    border: var(--defaultBorder) !important;
    box-shadow: unset !important;
}

.paperList {
    padding: .4em;
}

.serverInfo {
    padding: 1em;
}

.serverInfo>:nth-child(1n) {
    -webkit-flex: 1 0 30%;
    flex: 1 0 30%;
}

.serverInfo>:nth-child(2n) {
    -webkit-flex: 1 0 50%;
    flex: 1 0 50%;
    text-align: end;
}

.listItemIcon:not(.listItemIcon-transparent) {
    background-color: var(--lighterGradientPoint) !important;
}

.listItemIcon.notification_important {
    background-color: var(--btnDeleteColor) !important;
    border: solid var(--btnDeleteBorderColor) var(--borderWidth);
}

.listItemIcon.notifications:not(.listItemIcon-transparent),
.listItemIcon.schedule:not(.listItemIcon-transparent),
.listItemIcon.person:not(.listItemIcon-transparent),
.listItemIcon.live_tv:not(.listItemIcon-transparent) {
    background-color: rgb(41, 49, 83) !important;
    border: var(--defaultBorder);
}

.readOnlyContent {
    flex-direction: column !important;
}

.MuiAppBar-root {
    background: var(--headerColor);
    backdrop-filter: var(--blurDefault);
    border-bottom: var(--defaultBorder);
}

.MuiDrawer-paper {
    background: var(--drawerColor);
    backdrop-filter: var(--blurLarge);
    border-right: var(--defaultBorder);
}

.MuiDrawer-paper:first-child {
    margin-block-start: .25em;
}

.listItemImage {
    border-radius: var(--smallRadius);
    margin-right: .75em !important;
    border: var(--defaultBorder);
}

[dir=ltr] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem) {
    padding: 0.375em !important;
}

[dir=ltr] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem):not(:last-child) {
    margin-bottom: .5em;
}

[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] {
    padding: .375em;
    margin-bottom: .5em;
}

.listItem[data-type="Audio"] {
    margin-inline: 1em;
}

.listItem[data-type="Audio"]:has(.playlistIndexIndicatorImage) .listItemBodyText {
    color: white;
    font-weight: 600;
}

[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItemBodyText:not(.secondary) {
    font-size: 1.17em;
    font-weight: 600;
}

.listItemBody>.listItemBodyText:not(.secondary) {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--textColor);
}

.listItem-overview {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listItem-bottomoverview,
[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItem-overview p {
    margin-top: .75em;
    margin-bottom: 0em;
}

.listItem,
.navMenuOption {
    border-radius: .7em;
}

.listItem:hover,
.navMenuOption:hover {
    background: unset;
    border-radius: .7em;
}

.listItem:focus {
    background: var(--highlightOutlineColor);
}

.listItem:active,
.navMenuOption:active {
    background: rgba(255, 255, 255, 0.125);
}

.listItem-border {
    border-color: transparent !important;
}

.listItem-border.emby-button.show-focus:focus {
    border-radius: var(--smallRadius);
}

.MuiListItem-root>a,
.MuiList-root>a,
.MuiListItem-root>div {
    border: solid transparent var(--borderWidth);
    border-radius: .7em;
    margin-inline: .5em !important;
    margin-block: .25em !important;
}

.Mui-selected {
    background-color: var(--activeColor) !important;
}

.actionSheetContent {
    padding: .4em !important;
}

.actionSheetContent>h1 {
    font-size: unset;
}

[dir=ltr] .actionsheetMenuItemIcon.check {
    margin: 0 .45em 0 .45em !important;
}

.actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check) {
    background-color: var(--activeColor);
}

.actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check) .listItemBodyText {
    color: white;
}

.actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check) .listItemIcon.material-icons.check {
    display: none;
}

.actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check[style*="hidden"]) {
    background-color: transparent;
}

.actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check[style*="hidden"]):active {
    background-color: rgba(255, 255, 255, 0.125);
}

.navMenuOption {
    border-radius: var(--smallRadius) !important;
    margin: 0em 1em !important;
}

[dir=ltr] .navMenuOption {
    padding: 0.75em 1em !important;
    margin-bottom: unset;
}

#myPreferencesMenuPage .listItemIcon {
    margin-inline: .5em .25em;
}

.navMenuOption-selected {
    background-color: var(--activeColor) !important;
}

.detailSection {
    display: flex;
    flex-direction: column;
    gap: 1em;
    max-width: unset !important;
}

.detailPageContent {
    gap: 1em;
}

.trackSelections {
    order: 3;
    max-width: unset !important;
    margin-block: 1em;
}

.detailsGroupItem,
.trackSelections .selectContainer {
    max-width: unset !important;
    align-items: center;
}

.selectArrowContainer {
    top: 0em;
    opacity: .5;
}

.trackSelectionFieldContainer>.selectArrowContainer {
    top: .5em;
}

.trackSelectionFieldContainer>label {
    max-width: 2.75em;
    background-repeat: no-repeat;
    color: transparent;
    transform: scale(.9);
}

.selectVideoContainer.trackSelectionFieldContainer>label {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23d1d5db" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M2 12c0-4.7 0-7 1.5-8.5C4.9 2 7.3 2 12 2s7 0 8.5 1.5C22 4.9 22 7.3 22 12s0 7-1.5 8.5C19.1 22 16.7 22 12 22s-7 0-8.5-1.5C2 19.1 2 16.7 2 12Z"/><path stroke-linecap="round" d="M17 2.5v19M7 2.5v19M2.5 7H7m14.5 0H17M2.5 17H7m14.5 0H17M2 12h20"/></g></svg>');
}

.selectAudioContainer.trackSelectionFieldContainer>label {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23d1d5db" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M9 19a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM21 17a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9 19V8M21 17V6"/><path stroke-linecap="round" d="m15.7 3.8-4 1.3c-1.3.4-2 .6-2.3 1.2C9 6.8 9 7.5 9 8.9V12l12-4v-.5c0-2.5 0-3.7-.8-4.3-.9-.6-2-.2-4.5.6Z"/></g></svg>');
}

.selectSubtitlesContainer.trackSelectionFieldContainer>label {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23d1d5db" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M2 12c0-3.8 0-5.7 1.2-6.8C4.3 4 6.2 4 10 4h4c3.8 0 5.7 0 6.8 1.2C22 6.3 22 8.2 22 12s0 5.7-1.2 6.8C19.7 20 17.8 20 14 20h-4c-3.8 0-5.7 0-6.8-1.2C2 17.7 2 15.8 2 12Z"/><path stroke-linecap="round" d="M10 16H6M14 13h4M14 16h-1.5M9.5 13h2M18 16h-1.5M6 13h1"/></g></svg>')
}

.selectSourceContainer.trackSelectionFieldContainer>label {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23d1d5db" d="m15.4 4.05-.5.56.5-.56Zm3.95 3.57-.5.55.5-.55Zm2.3 2.53-.68.3.68-.3ZM3.17 20.83l.53-.53-.53.53Zm17.66 0-.53-.53.53.53Zm-6.83.42h-4v1.5h4v-1.5ZM2.75 14v-4h-1.5v4h1.5Zm18.5-.44V14h1.5v-.44h-1.5Zm-6.36-8.95 3.96 3.56 1-1.11L15.9 3.5l-1 1.11Zm7.86 8.95c0-1.69.02-2.75-.41-3.71l-1.37.6c.26.6.28 1.3.28 3.11h1.5Zm-3.9-5.39c1.35 1.22 1.85 1.7 2.12 2.29l1.37-.61c-.43-.96-1.23-1.66-2.49-2.8l-1 1.12Zm-8.82-5.42c1.58 0 2.18.01 2.71.22l.54-1.4c-.85-.33-1.78-.32-3.25-.32v1.5Zm5.86.75c-1.08-.98-1.76-1.6-2.61-1.93l-.54 1.4c.53.2.98.59 2.15 1.64l1-1.11ZM10 21.25c-1.9 0-3.26 0-4.29-.14-1-.13-1.58-.39-2-.81l-1.07 1.06c.75.75 1.7 1.08 2.87 1.24 1.15.15 2.63.15 4.49.15v-1.5ZM1.25 14c0 1.86 0 3.34.15 4.49a4.71 4.71 0 0 0 1.24 2.87L3.7 20.3c-.42-.43-.67-1-.81-2.01A36 36 0 0 1 2.75 14h-1.5ZM14 22.75c1.86 0 3.34 0 4.49-.15a4.71 4.71 0 0 0 2.87-1.24L20.3 20.3c-.43.42-1 .68-2.01.81-1.03.14-2.38.14-4.29.14v1.5ZM21.25 14c0 1.9 0 3.26-.14 4.29-.13 1-.39 1.58-.81 2l1.06 1.07a4.71 4.71 0 0 0 1.24-2.87c.15-1.15.15-2.63.15-4.49h-1.5Zm-18.5-4c0-1.9 0-3.26.14-4.29.14-1 .39-1.58.81-2L2.64 2.63A4.71 4.71 0 0 0 1.4 5.51c-.15 1.15-.15 2.63-.15 4.49h1.5Zm7.28-8.75c-1.87 0-3.36 0-4.51.15a4.72 4.72 0 0 0-2.88 1.24L3.7 3.7c.42-.42 1-.67 2.02-.81 1.03-.14 2.4-.14 4.31-.14v-1.5Z"/><path stroke="%23d1d5db" stroke-width="1.5" d="M13 2.5V5c0 2.36 0 3.54.73 4.27.73.73 1.91.73 4.27.73h4"/></svg>');
}

.detailSectionContent {
    order: 1;
}

.itemDetailsGroup {
    order: 2;
}

.sliderBubble {
    border-radius: var(--largeRadius);
    border: var(--defaultBorder);
    overflow: hidden;
    z-index: 3;
}

.alphaPickerButton {
    font-family: monospace;
    margin: .15em;
    color: rgba(255, 255, 255, 0.25);
}

.alphaPickerButton-selected {
    color: rgba(255, 255, 255, 1);
}

.alphaPicker-vertical {
    height: 70%;
}

.alphaPicker {
    justify-content: center;
}

.alphaPickerButton-tv:focus {
    background-color: var(--highlightOutlineColor);
}

[dir=ltr] .padded-left.vertical-wrap:not(div:has(.homeLibraryButton)) {
    padding-left: 5% !important;
}

[dir=ltr] .padded-right.vertical-wrap:not(div:has(.homeLibraryButton)) {
    padding-right: 5% !important;
}

/* this removes right padding from cast page sections to cards evenly*/
#itemDetailPage .verticalSection .itemsContainer.padded-right {
    padding-right: 0 !important;
}

.paging {
    padding-inline: 1em;
}

.layout-mobile #myPreferencesMenuPage {
    padding-top: 3.75em !important;
}

.headerUserButton {
    width: 2em;
    height: 2em;
    margin-inline-end: 1em;
    border: var(--defaultBorder);
}

.MuiAvatar-circular {
    width: 1.5em;
    height: 1.5em;
    border: var(--defaultBorder);
}

.dashboardDocument .content-primary {
    padding-top: 4.25rem;
}

.editorNode {
    display: flex;
    align-items: center;
}

.metadataSidebarIcon {
    color: #6c7bab;
}

.jstree-default .jstree-wholerow-clicked {
    background: var(--selectorBackgroundColor) !important;
}

.sectionTitleTextButton {
    padding-inline: .5em;
}

.sectionTitleTextButton:hover {
    background: transparent !important;
}

.sectionTitleTextButton:active {
    color: white !important;
}

.sectionTitleTextButton>* {
    padding: .3em 0 !important;
    margin: 0 0 !important;
}

.dashboardSection .sectionTitleTextButton>.material-icons,
.sectionTitleTextButton>.material-icons,
.dashboardSection .sectionTitleTextButton>.material-icons.material-icons {
    font-size: unset;
}

.sectionTitleTextButton>.material-icons::before {
    display: none;
}

.sectionTitleTextButton>.material-icons.chevron_right {
    margin-left: .5rem !important;
    height: 1.5rem;
    width: 1.5rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23D1D5DB' aria-hidden='true'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12.75 15l3-3m0 0l-3-3m3 3h-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
    background-size: contain;
    /* Stops miscalculating the size on hover effect */
}

.toast {
    border-radius: var(--smallRadius);
}

.upNextContainer {
    border-radius: var(--largeRadius);
    color: var(--textColor);
}

[dir=ltr] .upNextContainer {
    margin: 2em;
    box-sizing: border-box;
    max-width: 80vw;
}

.upNextContainer .btnStartNow {
    background-color: var(--btnSubmitColor);
    border-color: var(--btnSubmitBorderColor);
}

.upNextDialog-title {
    white-space: wrap;
    width: unset;
}

.upNextDialog-buttons {
    width: unset;
    flex-wrap: wrap;
}

.upNextContainer .upNextDialog-countdownText {
    color: white;
}

.skip-button {
    background-color: whitesmoke;
    box-shadow: var(--shadow);
}

.skip-button:hover {
    background-color: white;
}

.skip-button:active {
    background-color: rgba(245, 245, 245, 0.7);
    box-shadow: none;
}

.toast,
.upNextContainer {
    background: var(--headerColor) !important;
    border: var(--defaultBorder) !important;
    backdrop-filter: var(--blurDefault);
}

.activeSession {
    width: 98% !important;
}

.emby-tab-button:hover {
    color: whitesmoke;

}

@media (hover: hover) and (pointer: fine) {
    .paper-icon-button-light:hover:not(:disabled, .cardOverlayButton) {
        color: #fff;
        background-color: rgb(255 255 255 / 5%);
    }

    .actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check[style*="hidden"]):hover {
        background-color: rgba(255, 255, 255, 0.125);
    }

    .emby-select-withcolor:hover:not(.emby-select[disabled], :focus),
    .emby-input:hover:not(:focus),
    .emby-textarea:hover:not(:focus) {
        border-color: var(--dimTextColor) !important;
    }

    .checkboxContainer:hover .checkboxOutline:not(.multiSelectCheckboxOutline) {
        border-color: var(--checkboxCheckedBgColor);
        border-width: calc(2 * var(--borderWidth));
    }

    .raised:hover,
    .fab:hover,
    .emby-button:hover {
        filter: brightness(1.2) !important;
    }

    .button-flat:hover {
        background-color: rgba(255, 255, 255, 0.2);
        color: white;
    }

    .btnPlay.detailButton:hover {
        background-color: var(--textColor);
        color: black;
    }

    .alphaPickerButton:hover {
        color: rgba(255, 255, 255, 1);
    }

    .listItem:hover,
    .navMenuOption:hover {
        background: rgba(255, 255, 255, 0.125);
    }

    .searchfields-icon:hover,
    .inputContainer .emby-input-iconbutton:hover {
        color: rgba(255, 255, 255, 0.8);
    }

    #scenesContent .cardScalable:hover {
        border-color: var(--dimTextColor) !important;
    }

    .sectionTitleTextButton:hover {
        background: transparent !important;
        color: white !important;
    }

    .button-link:hover {
        color: rgb(243, 243, 243) !important;
        text-decoration: none;
    }
}

.paper-icon-button-light:active:not(:disabled) {
    color: #fff;
    background-color: rgb(255 255 255 / 5%);
}

.emby-textarea {
    font-family: consolas;
}

.emby-select-withcolor,
.emby-select,
.emby-input,
.emby-textarea {
    background-color: var(--selectorBackgroundColor);
    border: var(--defaultLighterBorder);
    border-radius: var(--smallRadius);
    padding: .5em !important;
}

.inputLabelFocused,
.selectLabelFocused,
.textareaLabelFocused {
    color: #fff;
}

.emby-select-withcolor:focus,
.emby-input:focus,
.emby-textarea:focus {
    border-color: var(--highlightOutlineColor) !important;
    outline: none !important;
}

@supports (display:revert) {

    .emby-select-withcolor:focus,
    .emby-input:focus,
    .emby-textarea:focus {
        border-color: var(--highlightOutlineColor) !important;
        outline: thin solid var(--highlightOutlineColor) !important;
    }
}

.emby-select-withcolor>option {
    color: inherit;
    background-color: var(--selectorBackgroundColor);
}

.inputContainer .emby-input-iconbutton {
    color: rgba(255, 255, 255, 0.5);
    margin-left: -2.5em;
    background-color: transparent !important;
}

.searchfields-txtSearch {
    padding: .75em 1.5em !important;
    border-radius: 4em;
}

.searchfields-icon {
    padding: .25em;
    margin-left: -1.75em;
    margin-bottom: 0;
    border-radius: var(--largeRadius);
    color: rgba(255, 255, 255, 0.5);
}

.searchfields-icon:active,
.inputContainer .emby-input-iconbutton:active {
    color: rgba(255, 255, 255, 0.8);
}

.searchFields>.searchFieldsInner {
    flex-direction: row-reverse;
}

.infoWrapper h1.itemName,
.infoWrapper h1.parentName {
    font-size: xxx-large;
}

.layout-mobile .infoWrapper h1.itemName,
.layout-mobile .infoWrapper h1.parentName,
.layout-mobile .infoWrapper h1.parentNameLast {
    font-size: 2em;
    word-wrap: break-word;
}

.itemName.originalTitle {
    /* font-weight: 400; */
    padding-block: .5em;
    color: var(--dimTextColor);
}

#liveTvSuggestedPage,
.liveTvContainer {
    background-color: var(--tableBodyColor);
}

.programCell-active {
    background-color: var(--activeColor) !important;
    border-radius: .5em;
    margin-block: .5em !important;
}

.guideVerticalScroller {
    padding: 0;
}

.programGrid {
    background-color: var(--lighterGradientPointAlpha);
}

.channelPrograms>.programCell:nth-child(odd) {
    background-color: var(--darkerGradientPoint);
}

.channelPrograms>.programCell:nth-child(even) {
    /* background-color: #11182700; */
}

.guide-channelHeaderCell:focus,
.programCell:focus {
    background-color: var(--highlightOutlineColor) !important;
}

.emby-select-iconbutton {
    background-color: var(--selectorBackgroundColor);
    border: var(--defaultLighterBorder);
    border-radius: var(--smallRadius);
    margin-inline-start: 1em;
}

.subtitleappearance-preview {
    border-radius: var(--smallRadius);
}

.infoBanner {
    display: flex;
    place-content: center;
    background-color: var(--headerColor) !important;
    border-radius: var(--largeRadius) !important;
    border: var(--defaultBorder) !important;
}

.sliderBubbleText {
    font-size: 1.5em;
}

fieldset {
    border-radius: var(--smallRadius);
    border: var(--defaultBorder);
}

table:not(.MuiTable-root.MuiTable-stickyHeader) {
    border-color: var(--borderColor) !important;
    border-radius: var(--smallRadius);
    border-spacing: 1px;
    border: var(--defaultBorder);
    background: var(--tableBodyColor);
    border-collapse: separate;
    overflow: hidden;
}

.detailTableHeaderCell {
    vertical-align: middle;
}

#serverActivityPage .MuiPaper-elevation2 {
    border: var(--defaultBorder) !important;
    box-shadow: unset !important;
}

#serverActivityPage .MuiPaper-elevation2,
#serverActivityPage .MuiPaper-elevation2>.MuiBox-root,
#serverActivityPage .MuiTableRow-root.MuiTableRow-head {
    background-color: var(--tableBodyColor);
}

.detailTableBodyRow-shaded:nth-child(odd),
#serverActivityPage .MuiTableBody-root .MuiTableRow-root:nth-child(odd) {
    background: var(--darkerGradientPointAlpha) !important;
}

.detailTableBodyRow-shaded:nth-child(even),
#serverActivityPage .MuiTableBody-root .MuiTableRow-root:nth-child(even) {
    background: var(--lighterGradientPointAlpha) !important;
}


.MuiList-root.MuiMenu-list {
    background-color: var(--drawerColor);
}

ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
    /* ! Don't change these units. They are rem because that is standard for MUI */
    gap: 0.5rem;
}

.playerStats,
.iconOsd {
    border-radius: var(--largeRadius);
    background-color: rgba(69, 69, 69, 0.69);
    backdrop-filter: var(--blurDefault);
}

.playerStats-stats {
    max-height: 50vh;
    flex-wrap: wrap;
    overflow-x: auto;
    padding: 1em !important;
}

#scenesContent .cardScalable:active {
    border-color: var(--dimTextColor) !important;
}

.progressring-spiner {
    border-color: var(--uiAccentColor);
}

.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.semiTransparent.noHeaderRight {
    display: none;
}

#loginPage {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1em;
    overflow-y: auto;
    background: linear-gradient(to bottom, var(--darkerGradientPointAlpha), var(--lighterGradientPoint)), var(--loginPageBgUrl);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

#loginPage .padded-left.padded-right.padded-bottom-page {
    width: 28em;
    background: rgba(30, 40, 54, 0.7);
    padding: 2em 2em 1em 2em !important;
    border-radius: var(--largerRadius);
    backdrop-filter: var(--blurDefault);
    box-sizing: border-box;
    transform: translateY(3em);
}

.manualLoginForm .sectionTitle,
.visualLoginForm>h1 {
    display: none;
}

#loginPage .padded-left.padded-right.padded-bottom-page:has(.visualLoginForm:not(.hide)) {
    width: 40em;
}

#divUsers .squareCard {
    width: 30% !important;
}

.layout-mobile #divUsers .squareCard {
    width: 45% !important;
}

.manualLoginForm::before,
.visualLoginForm::before {
    content: var(--loginPageText);
    position: relative;
    display: block;
    top: -3.5em;
    margin-bottom: -1em;
    font-size: 1.875em;
    font-weight: 800;
    color: white;
    text-align: center;
}

.manualLoginForm,
.visualLoginForm {
    position: relative;
}

#quickConnectPreferencesPage .padded-left.padded-right.padded-bottom-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#txtLoginDisclaimer {
    resize: none;
}

.startTimeText,
.endTimeText,
.positionTime,
.runtime {
    width: 4.5em;
    box-sizing: border-box;
}

.startTimeText {
    margin: 0 !important;
}

.endTimeText {
    justify-content: right;
    padding-inline-end: .8em;
    margin: 0 0 0 .75em !important;
}

.startTimeText,
.endTimeText {
    padding-top: .25em;
}

.startTimeText,
.positionTime {
    text-align: start;
    justify-content: left;
}

.endTimeText,
.runtime {
    text-align: end;
    justify-content: right;
}

.filterIndicator {
    background: var(--activeColor);
}

#indexPage:not(.hide) .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardPadder-overflowBackdrop {
    padding-bottom: 50%;
}

.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardImageContainer.cardContent::before {
    position: absolute;
    font-size: 3.5vh;
    margin-bottom: .175em;
    font-weight: 800;
    color: white;
    font-family: 'Noto Sans';
    text-align: center;
}

#indexPage:not(.hide) .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardText-first,
#indexPage:not(.hide) .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardText.cardTextCentered {
    display: none;
}

/* input[type="radio"]:checked {
    background-color: var(--highlightOutlineColor);
} */

/* .mdl-radio__focus-circle {
    color: red;
    background: var(--highlightOutlineColor);
} */

.nowPlayingButtonsContainer {
    margin-top: 1em;
}

.nowPlayingPageImageContainerNoAlbum {
    border: var(--defaultBorder);
    border-radius: var(--smallRadius);
    overflow: hidden;
}

.nowPlayingPageImageContainerNoAlbum .defaultCardBackground {
    background: repeating-radial-gradient(black, transparent 10em);
}

.nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
    color: var(--borderColor);
}

@media (orientation: portrait) and (max-width: 43em) {
    .nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
        font-size: 8em !important;
    }
}

.nowPlayingPageImageContainer {
    /* position: relative; */
    /* z-index: 0; */
    /* keep image above the glow */
    /* display: inline-block; */
    /* or block, depending on your layout */
}

.nowPlayingPageImageContainer::before {
    /* content: ""; */
    /* position: absolute; */
    /* top: -10px; */
    /* expand beyond edges for glow */
    /* left: -10px; */
    /* right: -10px; */
    /* bottom: -10px; */
    /* border-radius: 12px; */
    /* round corners like image (adjust if needed) */
    /* background: linear-gradient(270deg,red, orange, yellow, green, blue, indigo, violet, red); */
    /* background-size: 1400% 1400%; */
    /* filter: blur(10px); */
    /* animation: rainbowGlow 8s linear infinite; */
    /* z-index: -1; */
    /* behind the image */
    /* opacity: 0.8; */
}

/* Make sure the container is positioned relative so ::before works */
.nowPlayingPageImageContainer {
    /* position: relative; */
    /* border-radius: 12px; */
    /* match the glow rounding */
}

/* Rainbow animation */
@keyframes rainbowGlow {
    /*  0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }*/
}

.layout-mobile .playlistSection .playlist {
    padding: 4.3em 0;
    top: 0;
    bottom: 4.3em;
    background: color-mix(in srgb, var(--headerColor), var(--darkerGradientPoint) 50%);
    backdrop-filter: var(--blurLargest);
    z-index: 0;
}

.layout-mobile .playlistSectionButton {
    background: var(--drawerColor);
    border-top: var(--defaultBorder);
    backdrop-filter: var(--blurSmallest);
    z-index: 1;
}

.layout-mobile .playlistSectionButton.playlistSectionButtonTransparent {
    background: transparent;
    border-top: var(--defaultBorder);
    border-color: transparent;
}

.layout-desktop .nowPlayingInfoContainer {
    position: -webkit-sticky;
    position: sticky;
    top: 5em;
    padding: 1em;
    margin-bottom: 2em;
    backdrop-filter: var(--blurLargest);
    border: var(--defaultLighterBorder);
    z-index: 2;
    background-color: var(--headerColor);
    box-shadow: var(--shadow);
    border-radius: var(--largerRadius);
    box-sizing: border-box;
}

.layout-desktop .nowPlayingInfoControls {
    margin: 0em 2em;
}

.nowPlayingPageImage {
    box-shadow: var(--shadow);
    border-radius: var(--smallRadius);
}

@media (orientation: portrait) and (max-width: 43em) {
    .nowPlayingInfoContainer {
        height: calc(95% - 4.2em);
    }
}

.nowPlayingSongName.nowPlayingEpisode {
    margin-bottom: 1em;
    font-size: 1.25em;
    color: var(--textColor);
}

.nowPlayingAlbum.nowPlayingSeason {
    color: var(--dimTextColor);
    margin-bottom: .5em;
}

.nowPlayingArtist.nowPlayingSerie {
    margin-bottom: .5em;
}

.playlistIndexIndicatorImage {
    background-blend-mode: difference;
    background-color: var(--textColor);
    background-size: contain !important;
}

.playlistIndexIndicatorImage.defaultCardBackground .audiotrack {
    display: none;
}

#dialogToc {
    background-color: rgba(0, 0, 0, 0.5);
    max-height: unset;
    max-width: unset;
}

#dialogToc .toc li {
    font-size: unset;
    font-weight: 600;
    list-style-type: circle;
    margin-bottom: .5em;
    font-family: "Math", serif;
}

.MuiTabs-indicator {
    display: none;
}

.MuiTabs-root>.MuiTabs-scroller {
    align-content: center;
}

.MuiTabs-flexContainer>.MuiButtonBase-root {
    border-radius: var(--largeRadius);
    min-height: 40px;
    min-width: 72px;
}

.MuiTabs-flexContainer>.MuiButtonBase-root.Mui-selected {
    color: white;
    background-color: transparent !important;
}

.MuiToggleButtonGroup-grouped.Mui-selected {
    color: white;
}

.MuiButtonBase-root.MuiIconButton-root:hover {
    color: white;
    background-color: transparent;
}

#viewPanel .ui-panel-inner {
    margin-top: 4em;
}

.videoOsdBottom.videoOsdBottom-maincontrols {
    background: linear-gradient(0deg, hsla(0, 0%, 0%, 0.8), hsla(0, 0%, 0%, 0));
}

.skinHeader-withBackground.osdHeader {
    background: linear-gradient(180deg, hsla(0, 0%, 0%, 0.8), hsla(0, 0%, 0%, 0));
}

/* this is the default header, visible in home and libraries */
.skinHeader-blurred:not(.osdHeader) {
    /* backdrop-filter: var(--blurDefault); */
    /* background-color: var(--headerColor); */
    /* border: var(--defaultBorder); */
    /* border-width: 0 0 var(--borderWidth) 0; */
    /* border-color: transparent; */
    /* transition: .5s ease-in-out; */
    /* transition-property: background-color, backdrop-filter, transform, border-width; */
}

.skinHeader-blurred:not(.osdHeader) {
    backdrop-filter: none;
    background-color: transparent;
    border: none;
    border-width: 0 0 var(--borderWidth) 0;
    transition: .5s ease-in-out;
    transition-property: background-color, backdrop-filter, transform, border-width;
    background: linear-gradient(180deg, rgba(30, 40, 54, .9), rgba(30, 40, 54, .75) 50%, transparent);
    padding-top: .75em;
}

.layout-mobile .skinHeader-blurred:not(.osdHeader) {
    padding-top: .25em;
}

.layout-mobile .withSectionTabs .headerTop {
    padding-bottom: 1.45em;
}

.skinHeader-blurred:not(.osdHeader, .semiTransparent)::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: var(--blurLargest);
    mask: linear-gradient(180deg, white 55%, transparent);
    z-index: -1;
}

/* this is the transparent header, visible in main media page */
.skinHeader-withBackground.semiTransparent,
.layout-mobile .skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty),
.layout-mobile .skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty)::after {
    backdrop-filter: none;
    background-color: transparent;
    background: none;
    border: none;
    transition: .5s ease-in-out;
    transition-property: background-color, backdrop-filter, transform, border-width;
}

.skinHeader-withBackground.semiTransparent .headerButton,
.layout-mobile .skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) .headerButton {
    text-shadow: 1px 1px 0px #00000080;
}

/* this keeps the header elements aligned when its height is modified */
.headerTop {
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

/* this prevents the section tabs from hiding all the way up */
.headroom--unpinned {
    -webkit-transform: translateY(-3.7em);
    transform: translateY(-3.7em);
    /* border-color: var(--borderColor); */
}

/* .noHomeButtonHeader .emby-tab-button[data-index="1"] .emby-button-foreground {
    display: none;
}

.noHomeButtonHeader .emby-tab-button[data-index="1"]:after {
    content: "Watchlist";
} */

.noHomeButtonHeader .emby-tab-button[data-index="1"]:before {
    content: "\e87d";
}

.noHomeButtonHeader .emby-tab-button[data-index="0"]:before {
    content: "\e88a";
}

.noHomeButtonHeader .emby-tab-button:before {
    font-family: 'Material Icons Round';
    padding-inline-end: .5em;
    margin-inline-start: -.15em;
    font-size: 1.2em;
    font-variation-settings: 'FILL' 0;
}

.noHomeButtonHeader .emby-tab-button-active:before {
    /* font-variation-settings: 'FILL' 1; */
}

.headerTabs.sectionTabs {
    margin: 0;
    height: 6em;
}

.layout-tv .sectionTabs .emby-tabs.smoothScrollX {
    overflow: visible !important;
}

.headerTabs.sectionTabs .emby-tab-button {
    display: inline-flex;
    margin: 0;
    margin-inline: .5em;
    margin-block: .25em;
    padding: 0;
    padding-inline: 1.25em;
    /* min-width: 8em; */
    height: 2.5em;
    color: var(--textColor);
    font-weight: 400;
    border-radius: var(--largeRadius);
    background-color: var(--darkerGradientPointAlpha);
    /* border: solid var(--borderWidth) var(--borderColor); */
    /* text-shadow: 1px 1px 0 black; */
}

.headerTabs.sectionTabs .emby-tab-button-active {
    margin: 0;
    margin-inline: .5em;
    margin-block: .25em;
    /* font-weight: 600; */
    /* box-shadow: var(--shadow); */
    /* width: 50vw; */
    color: black;
    background-color: var(--textColor);
}

/* @media (min-width: 62em) { */
@media (min-width: 75em) {
    .sectionTabs:not(.layout-tv .sectionTabs) {
        -webkit-align-items: center;
        align-items: center;
        -webkit-align-self: center;
        align-self: center;
        -webkit-justify-content: center;
        justify-content: center;
        /* margin-top: -4.3em; */
        margin-top: -3em;
        position: relative;
        width: auto;
    }

    .libraryPage:not(.noSecondaryNavPage):not(.layout-tv .libraryPage) {
        padding-top: 6.8em !important;
    }
}

@media (max-width: 100em) {
    .sectionTabs {
        font-size: 100%;
    }
}

.libraryPage:not(.noSecondaryNavPage) {
    padding-top: 9.5em !important;
}

.layout-tv .headerLeft {
    overflow: unset;
    margin: .25em .5em;
}