/* 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 v25.08.02";

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

    --borderColor: hsl(214, 13%, 32%);
    --darkerBorderColor: hsl(214, 13%, 22%);
    --lighterBorderColor: hsla(0, 0%, 100%, .2);

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

    --activeColorAlpha: rgba(119, 91, 244, .9);
    --activeColor: rgb(119, 91, 244);
    --osdSeekBarPlayedColor: var(--textColor);
    --osdSeekBarBufferedColorAlpha: rgba(128, 128, 128, .5);
    --osdSeekBarThumbColor: white;
    --tableBodyColor: rgb(31 41 55 / 1);
    --uiAccentColor: rgb(117 111 226);
    --btnMiniPlayColor: rgb(41 154 93);
    --btnMiniPlayBorderColor: rgb(50, 167, 105);

    /* 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);

    --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), 25%, var(--lighterGradientPoint));
    --headerColorGradient: linear-gradient(180deg, rgba(30, 40, 54, .95) 30%, 55%, transparent 90%);
    --headerColorGradientAlt: linear-gradient(180deg, rgba(30, 40, 54, .95), 70%, transparent);
    --headerBlurMask: linear-gradient(180deg, white 50%, 85%, transparent);

    --cardFooterGradient: linear-gradient(0deg, rgb(0 0 0 / 90%), 40%, transparent);
    --topOSDGradient: linear-gradient(180deg, hsla(0, 0%, 0%, .8), 45%, hsla(0, 0%, 0%, 0));
    --bottomOSDGradient: linear-gradient(0deg, hsla(0, 0%, 0%, .8), 45%, hsla(0, 0%, 0%, 0));

    --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);

    --itemBackdropMask: linear-gradient(180deg, rgba(0, 0, 0, .8), 75%, transparent);

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

    --sidePadding: 3.3%;
    --itemColumnGap: 1em;
    --primaryItemPageNegativeSpace: 15vh;
    --secondaryItemPageNegativeSpace: 35vh;

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

    --shadow: .1em .1em .15em hsla(0, 0%, 0%, .3);

    /* use "" to enable a fancy blur behind the app header / top bar [default]; 
       use none (without quotes) to disable it */
    --headerBlurLayerVisibility: "";

    /* use --headerColorGradient if the above is enabled [default]; 
       use --headerColorGradientAlt otherwise */
    --headerBackground: var(--headerColorGradient);

    /* fill out YOUR-JELLYFIN-SERVER-ADDRESS with a relevant host address;
       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";

    /* use 2.8em keep the overlay play button at bottom-left corner [default];
       use 50% to place it at the center of a card */
    --overlayPlayButtonPosition: 2.8em;

    /* use 'Material Icons Round' for the new icons [default]; 
       use 'Material Icons' to revert to old icons */
    --iconPack: 'Material Icons Round', Material Icons;

    /* none: hides the watched and mark favorite buttons on hover [default];
       block: makes them visible use block */
    --extraCardButtonsVisibility: none;

    /* none: hides the media library card labels [default]; 
       block: makes them visible */
    --libraryLabelVisibility: none;

    /* use "" to enable the card hover effect [default]; 
       use none (without quotes) to disable it */
    --cardHoverEffect: "";
}

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

.layout-mobile {
    --itemColumnGap: 0;
    --sidePadding: 5%;
}

/* 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;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v267/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;
    line-height: 1;
    vertical-align: middle;
    -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 .5s;
}

.card:focus .cardBox:not(.visualCardBox) .cardScalable {
    border-color: white !important;
}

.mdl-radio__focus-circle,
.mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__outer-circle,
.mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__inner-circle {
    background: var(--uiAccentColor);
    color: var(--uiAccentColor);
}

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

.emby-tabs .emby-button.show-focus:focus {
    outline: none !important;
}

.card.show-animation:focus>.cardBox {
    -webkit-transform: scale(1.125);
    transform: scale(1.125);
}

[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(--darkerBorderColor) solid var(--borderWidthDouble) !important;
    overflow: hidden !important;
    box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .4);
    transition: transform 125ms;
}

@supports (aspect-ratio: 1 / 1) {

    #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;
}

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

.layout-desktop .visualCardBox {
    border-width: var(--borderWidthDouble) !important;
}

.visualCardBox .cardScalable {
    border-width: 0 0 var(--borderWidth) 0 !important;
    border-radius: 0 !important;
    border-color: var(--darkerBorderColor) !important;
}

.cardImageContainer {
    transition: transform .375s;
}

.card.squareCard[data-type="TvChannel"] .cardImageContainer.cardContent {
    background-color: rgba(255, 255, 255, .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,
.card.card-hoverable:hover .visualCardBox {
    border-color: white !important;
}

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

.card.card-hoverable:hover .cardImageContainer {
    transform: scale(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(.cardOverlayButton:hover)>.cardImageContainer {
    transform: scale(1);
}

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

.card.card-hoverable .cardOverlayContainer:after {
    content: var(--cardHoverEffect);
    transition: .5s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(-50%) translateX(0);
    background: var(--hoverGradientV);
}

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

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

.backdropCard.card-hoverable:hover .cardOverlayContainer:after,
.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;
    left: calc(var(--overlayPlayButtonPosition) - 1.5em);
    bottom: calc(var(--overlayPlayButtonPosition) - 1.5em);
}

.cardOverlayContainer>.cardOverlayFab-primary,
.listItemImageButton,
.layout-mobile .cardOverlayButton-br:not([data-action="menu"])>.cardOverlayButtonIcon {
    background-color: var(--btnMiniPlayColor) !important;
    color: white;
    border: var(--defaultLighterBorder);
    border-color: var(--btnMiniPlayBorderColor);
    font-size: 75%;
    box-shadow: var(--shadow);
    z-index: 2;
}

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

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

.layout-desktop .cardOverlayButton-br,
[dir=ltr].layout-desktop .cardOverlayButton-br {
    bottom: .75em;
    right: .5em;
    display: var(--extraCardButtonsVisibility);
    z-index: 1;
}

.layout-desktop .cardOverlayButton-br button {
    color: white;
    text-shadow: var(--shadow);
}

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

.layout-mobile .cardOverlayButton-br,
[dir=ltr] .layout-mobile .cardOverlayButton-br {
    bottom: .25em;
    right: .25em;
}

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

.layout-mobile .cardOverlayButton-br[data-action="menu"]>.cardOverlayButtonIcon {
    background-color: transparent !important;
    color: white;
    border: none;
    text-shadow: 1px 1px .1em black;
    color: white;
}

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

.listViewUserDataButtons {
    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;
}

.portraitCard {
    min-width: 5em;
}

.bannerCard {
    --cardCount: 2;
}

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

    .portraitCard,
    .squareCard {
        --cardCount: 25;
    }

    .overflowPortraitCard,
    .overflowSquareCard {
        --cardCount: 24;
    }

    .squareCard:has(.cardFooter) {
        --cardCount: 22;
    }

    .backdropCard {
        --cardCount: 22;
    }

    .overflowBackdropCard {
        --cardCount: 21;
    }
}

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

    .portraitCard,
    .squareCard {
        --cardCount: 21;
    }

    .overflowPortraitCard,
    .overflowSquareCard {
        --cardCount: 20;
    }

    .squareCard:has(.cardFooter) {
        --cardCount: 18;
    }

    .backdropCard {
        --cardCount: 18;
    }

    .overflowBackdropCard {
        --cardCount: 17;
    }
}

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

    .portraitCard,
    .squareCard {
        --cardCount: 17;
    }

    .overflowPortraitCard,
    .overflowSquareCard {
        --cardCount: 16;
    }

    .squareCard:has(.cardFooter) {
        --cardCount: 14;
    }

    .backdropCard {
        --cardCount: 14;
    }

    .overflowBackdropCard {
        --cardCount: 13;
    }
}

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

    .portraitCard,
    .squareCard {
        --cardCount: 14;
    }

    .overflowPortraitCard,
    .overflowSquareCard {
        --cardCount: 13;
    }

    .squareCard:has(.cardFooter) {
        --cardCount: 10;
    }

    .backdropCard {
        --cardCount: 10;
    }

    .overflowBackdropCard {
        --cardCount: 9;
    }
}

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

    .portraitCard,
    .squareCard {
        --cardCount: 10;
    }

    .overflowPortraitCard,
    .overflowSquareCard {
        --cardCount: 9;
    }

    .squareCard:has(.cardFooter) {
        --cardCount: 8;
    }

    .backdropCard {
        --cardCount: 8;
    }

    .overflowBackdropCard {
        --cardCount: 7;
    }
}

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

    .portraitCard,
    .squareCard {
        --cardCount: 8;
    }

    .overflowPortraitCard,
    .overflowSquareCard {
        --cardCount: 7;
    }

    .squareCard:has(.cardFooter) {
        --cardCount: 6;
    }

    .backdropCard {
        --cardCount: 6;
    }

    .overflowBackdropCard {
        --cardCount: 5;
    }
}

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

    .portraitCard,
    .squareCard,
    .overflowPortraitCard,
    .overflowSquareCard,
    .squareCard:has(.cardFooter),
    .backdropCard {
        --cardCount: 7;
    }

    .squareCard:has(.cardFooter) {
        --cardCount: 6;
    }

    .backdropCard {
        --cardCount: 6;
    }

    .overflowBackdropCard {
        --cardCount: 5;
    }
}

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

    .portraitCard,
    .squareCard,
    .overflowPortraitCard,
    .overflowSquareCard {
        --cardCount: 6;
    }

    .squareCard:has(.cardFooter) {
        --cardCount: 5;
    }

    .overflowBackdropCard,
    .backdropCard {
        --cardCount: 5;
    }
}

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

    .portraitCard,
    .squareCard,
    .overflowPortraitCard,
    .overflowSquareCard {
        --cardCount: 5;
    }

    .squareCard:has(.cardFooter) {
        --cardCount: 4;
    }

    .backdropCard,
    .overflowBackdropCard {
        --cardCount: 4;
    }
}

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

    .portraitCard,
    .squareCard,
    .overflowPortraitCard,
    .overflowSquareCard {
        --cardCount: 4;
    }

    .squareCard:has(.cardFooter) {
        --cardCount: 3;
    }

    .backdropCard,
    .overflowBackdropCard {
        --cardCount: 3;
    }
}

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

    .portraitCard,
    .squareCard,
    .overflowPortraitCard,
    .overflowSquareCard,
    .layout-mobile .portraitCard,
    .layout-mobile .squareCard,
    .layout-mobile .overflowPortraitCard,
    .layout-mobile .overflowSquareCard {
        --cardCount: 3;
    }

    .squareCard:has(.cardFooter) {
        --cardCount: 2;
    }

    .backdropCard,
    .overflowBackdropCard {
        --cardCount: 2;
    }
}

.card {
    --effectiveWidth: calc((99vw - (var(--sidePadding) * 2)));
    --cardWidth: calc(var(--effectiveWidth) / var(--cardCount) - var(--itemColumnGap));
    box-sizing: border-box;
    width: var(--cardWidth) !important;
}

.layout-mobile .card {
    --cardWidth: calc(var(--effectiveWidth) / var(--cardCount));
}

/* this makes the card sizes smaller when phone is in landscape mode */
@media (orientation: landscape) and (max-height: 40em) {
    .layout-mobile .card {
        --effectiveWidth: calc((65vw - (var(--sidePadding) * 2)));
    }
}

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

.layout-desktop .detailPageWrapperContainer {
    background: transparent;
    min-height: 46vh;
    background: linear-gradient(0deg, var(--darkerGradientPointAlpha) 70%, 85%, transparent);
}

.layout-tv .detailPageWrapperContainer {
    padding-left: 30vw;
    background: transparent;
    min-height: 46vh;
    background: linear-gradient(0deg, var(--darkerGradientPointAlpha) 70%, 85%, transparent);
}

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

.layout-mobile .detailPagePrimaryContainer {
    padding: .5em var(--sidePadding);
}

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

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

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

.detailPageSecondaryContainer {
    padding-top: 0;
}

/* 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;
}

.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: 0 calc(-1 * var(--sidePadding));
    padding: 0 var(--sidePadding);
}

.layout-desktop .emby-scroller-container,
.layout-desktop .emby-scroller,
.layout-desktop .scrollX {
    --itemColumnGap: 0.5em;
}

.itemsContainer {
    column-gap: var(--itemColumnGap);
}

.layout-desktop .sectionTitle,
.layout-tv .sectionTitle {
    font-size: 1.5rem !important;
}

.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-top: 0;
    padding-bottom: 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: 32vh !important;
    margin-top: unset !important;
}

.layout-desktop [dir=ltr] .detailPagePrimaryContainer,
.layout-tv [dir=ltr] .detailPagePrimaryContainer {
    padding-left: var(--sidePadding);
}

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

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

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

    to {
        transform: translateY(0);
        opacity: .3;
    }
}

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

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

.detailLogo {
    /* this hides the detail logo by default to make it only show up on modern browsers */
    display: none;
}

@supports (aspect-ratio: 1 / 1) {
    /* this shows the detail logo on modern browsers */

    .detailLogo {
        display: block;
        top: calc(100vh - 10em - var(--primaryItemPageNegativeSpace));
        left: 0;
        width: 40%;
        transform: translateY(-100%);
        margin: auto 30%;
        height: 25vh;
        background-position: bottom;
    }

    .layout-tv .detailLogo {
        display: block;
    }
}

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

.itemBackdrop {
    display: block !important;
}

.layout-desktop .itemBackdrop {
    height: calc(100vh - 32vh - var(--primaryItemPageNegativeSpace)) !important;
}

.layout-mobile .itemBackdrop {
    margin-top: 0;
    position: sticky;
    top: -30%;
    -webkit-mask: var(--itemBackdropMask);
    mask: var(--itemBackdropMask);
    animation: animMoveDown 1s ease-out forwards;
    height: 45vh;
}

.layout-mobile #itemDetailPage:has(.detailLogo.hide) .itemBackdrop {
    margin-bottom: -10vh;
}

.layout-tv .detailLogo {
    height: 20vh;
    top: 39vh;
    left: 30vw;
    width: 60vw;
    margin: auto 5vw;
}

.layout-tv .itemBackdrop {
    height: 33vh;
}

.detailImageContainer.padded-left {
    padding-left: 0;
}

.layout-tv .detailImageContainer.padded-left {
    padding-left: 0;
    height: 0;
    position: fixed;
}

.layout-desktop .detailImageContainer .card {
    top: unset !important;
    width: 22vh !important;
}

.detailImageContainer .card.backdropCard {
    width: 40vh !important;
    max-width: 50vw;
    margin-bottom: 1em;
}

.detailImageContainer .card {
    display: none;
}

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

.layout-mobile .detailImageContainer .card {
    -webkit-filter: drop-shadow(0 0 .25rem rgba(0, 0, 0, .25));
    filter: drop-shadow(0 0 .25rem rgba(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;
}

.infoWrapper {
    align-content: end;
    place-items: center;
    display: grid;
}

/* 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:has(.card:not(.portraitCard)) {
    height: 0;
}

.layout-mobile .detailImageContainer .card {
    position: inherit !important;
    margin-top: -150%;
    max-width: 60vw;
}

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

/* this hides the main media title when the clear logo is available*/
.detailLogo:not(.hide)~.detailPageWrapperContainer .nameContainer h1,
#itemDetailPage:has(.detailImageContainer .card.backdropCard) .detailLogo,
#itemDetailPage:has(.detailImageContainer .cardImageIcon.album) .detailLogo,
#itemDetailPage:has(.detailImageContainer .cardImageIcon.person) .detailLogo,
.detailImageContainer .card:not(.portraitCard):has(.cardImageIcon.person) {
    z-index: 2;
    display: none;
}

/* this shows the main media title and the poster when the clear logo is unavailable*/
.detailLogo.hide~.detailPageWrapperContainer .nameContainer h1 {
    display: block !important;
}

.detailImageContainer:has(.backdropCard, .squareCard)~.nameContainer h1,
.detailImageContainer:has(.cardImageIcon.person)~.nameContainer h1 {
    display: block !important;
}

.detailImageContainer .card.backdropCard:has(.cardImageIcon.album) {
    max-width: 20vh;
}

.detailImageContainer .card.backdropCard:has(.cardImageIcon.album) .cardScalable {
    aspect-ratio: 1 / 1;
}

#childrenContent:has(.listItem[data-type="Audio"]) {
    border: var(--defaultBorder);
    border-radius: var(--largeRadius);
    padding: .5em;
    background-color: var(--lighterGradientPointAlpha);
}

/* this shows the poster in the cast, book and music pages */
.detailImageContainer .card:has(.book, .person, .album),
.detailImageContainer .card.backdropCard:has(.tv),
.detailImageContainer .card.backdropCard:has(.live_tv) {
    display: block;
}

/* This reduces the top padding in the cast, live tv, episode, song, album and artist pages i.e. shifts up page content */
#itemDetailPage:has(.detailImageContainer .cardImageIcon.person, .detailImageContainer .cardImageIcon.book) .itemBackdrop,
#itemDetailPage:has(.detailImageContainer .cardImageIcon.album) .itemBackdrop,
#itemDetailPage:has(.detailImageContainer .backdropCard .cardImageIcon.tv) .itemBackdrop,
#itemDetailPage:has(.detailImageContainer .squareCard) .itemBackdrop,
#itemDetailPage:has(.detailImageContainer .cardImageIcon.live_tv) .itemBackdrop {
    height: calc(100vh - 32vh - var(--secondaryItemPageNegativeSpace)) !important;
}

#itemDetailPage:has(.detailImageContainer .card.backdropCard),
#itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) {
    background: linear-gradient(180deg, var(--darkerGradientPointAlpha) 80%, transparent)
}

.layout-mobile #itemDetailPage:has(.detailImageContainer .card.backdropCard) .itemBackdrop,
.layout-mobile #itemDetailPage:has(.detailImageContainer .card .cardImageIcon.album) .itemBackdrop {
    animation: animMoveDownSecondaryPage 1s ease-out forwards;
}

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

@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;
    }

    .dashboardActionsContainer {
        font-size: min(3.6vw, 98%);
    }
}

@media (orientation: portrait) {

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

    .layout-mobile .btnPlay.detailButton:not(.play-button) {
        flex: 0 0 100%;
        margin-right: 0 !important;
    }
}

h2 {
    font-size: 1.25em;
}

h1,
h2 {
    font-weight: 600;
}

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

html,
.nowPlayingPlaylist,
.nowPlayingContextMenu,
.backgroundContainer:not(.withBackdrop),
.backgroundContainer:not(.backgroundContainer-transparent),
.backdropContainer {
    background-color: var(--darkerGradientPoint);
    background: var(--backgroundGradient);
}

.backdropImage:after,
.backdropImage:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: inherit;
}

.backdropImage:after {
    z-index: 0;
    height: 80vh;
    -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 1) 75%, transparent);
    mask: linear-gradient(180deg, rgba(0, 0, 0, 1) 75%, transparent);
}

.layout-desktop .backdropImage:after {
    transition: opacity .25s;
}

.backdropImage:before {
    transform: scale(1.1);
    filter: var(--blurLargest);
}

.backgroundContainer.withBackdrop {
    opacity: .9;
    background: linear-gradient(0deg, var(--darkerGradientPoint), 45%, rgba(17, 24, 39, .25));
}

.layout-mobile .withSectionTabs .backgroundContainer.withBackdrop {
    opacity: .9;
}

.layout-mobile .backgroundContainer.withBackdrop {
    opacity: 1;
    background: var(--darkerGradientPoint);
}

.withSectionTabs .backgroundContainer.withBackdrop {
    background: var(--darkerGradientPoint);
}

.layout-desktop .withSectionTabs .backdropImage:after {
    opacity: 0;
}

.layout-mobile .withSectionTabs .backdropImage:after {
    display: none;
}

@keyframes animScaleUp {
    from {
        transform: scale(1) translateY(-2.5%);
        opacity: 0;
        filter: var(--blurLarge);
    }

    to {
        transform: scale(1) translateY(0%);
        opacity: 1;
        filter: blur(0);
    }
}

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

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

.lyricPage {
    padding: 0 var(--sidePadding);
}

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

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

.pastLyric {
    opacity: .45;
}

.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):not(.playbackProgress):not(.transcodingProgress) {
    backdrop-filter: var(--blurLarge);
    background-color: var(--osdSeekBarBufferedColorAlpha) !important;
    height: .35em;
    overflow: hidden;
    border-radius: var(--largeRadius);
}

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

.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: 0 var(--largeRadius) var(--largeRadius) 0;
    background-color: var(--dimTextColor);
}

.backgroundProgress>div,
.backgroundProgress {
    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: .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: .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: .3em;
    border-radius: var(--smallRadius);
}

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

.button-flat:active {
    color: unset;
    background-color: rgba(255, 255, 255, .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;
    }

    /* this somehow fixes border overflow on mobile */
    .layout-mobile .itemDetailsGroup {
        outline-offset: calc(-1 * var(--borderWidthDouble));
    }
}

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

.detailsGroupItem {
    margin: 0 !important;
    justify-content: space-between;
    padding: .5em .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-top: 0;
    margin-bottom: 0;
    -webkit-line-clamp: 2;
}

.detail-clamp-text p {
    margin-top: .25em;
    margin-bottom: .25em;
}

.layout-mobile .detail-clamp-text {
    -webkit-line-clamp: 4;
}

.overview-expand.emby-button {
    padding: 0;
    margin-top: 1.4em;
    margin-bottom: 1.4em;
    color: transparent;
}

.overview-expand.emby-button:after {
    content: "\e313";
    font-family: 'Material Icons';
    background: var(--selectorBackgroundColor);
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    align-content: center;
    line-height: 1.6ch;
    transition: transform .5s;
    color: var(--textColor);
}

.overview.detail-clamp-text~.overview-controls .overview-expand:after {
    transform: rotateZ(0deg);
}

.overview:not(.detail-clamp-text)~.overview-controls .overview-expand:after {
    transform: rotateZ(180deg);
}

.overview-controls {
    height: 0;
}

.detailSectionContent:has(.itemExternalLinks.hide) .overview-controls {
    height: 1em;
}

#seriesAirTime {
    margin-top: .5em;
}

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

.innerCardFooter,
.chapterThumbTextContainer {
    background: var(--cardFooterGradient);
    text-shadow: .1em .1em 0px black;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    padding: 0em 2em 2em 2em;
    align-content: end;
    display: grid;
}

.chapterCardImageContainer {
    background-size: 135%;
}

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

.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;
}

[dir=ltr] .emby-collapsible-button {
    padding-left: 1em;
}

.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;
}

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

.formDialogHeaderTitle {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    text-align: center;
    padding: 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, .8);
    background: transparent;
    border-color: white;
    border-style: solid;
    border-width: var(--borderWidthDouble);
    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);
}

.overflowBackdropCard .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 {
    display: none;
}

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

.cardFooter+.itemSelectionPanel>.checkboxContainer,
.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;
    transition: all .125s;
}

.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+span+.checkboxOutline {
    transform: scale(1.75);
}

.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: "\f1c6";
    font-size: 85%;
}

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

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

.emby-button.block,
.button-alt,
.raised,
#btnDeleteImage,
.manageRecordingButton,
.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.2);
}

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

.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;
}

.cardScalable .material-icons.check:before {
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20;
    transform: scale(1.25);
}

.emby-button[title="Favorite"] .material-icons.favorite:before {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

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

.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;
}

.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;
}

.mainDetailButtons:has(.detailButton[data-type="Book"]) .btnPlay[title="Play"]>.detailButton-content::after {
    content: "Read";
}

.mainDetailButtons:has(.detailButton[data-type="Book"]) .btnPlay .material-icons.play_arrow:before {
    content: "\f1c6";
    padding-inline-end: 1ch;
}

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

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

.btnPlay>.detailButton-content::after {
    padding: 0 1ch;
    place-content: center;
}

.mainDetailButtons {
    justify-content: center;
    margin: 0 0 1em 0;
}

.layout-mobile [dir=ltr] .mainDetailButtons {
    flex-wrap: wrap;
    padding: 0 1.25em;
}

@media (min-width: 100em) {
    .mainDetailButtons {
        font-size: unset;
        margin: 0 0 1em 0;
    }
}

.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);
}

.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);
    padding: .25em;
}

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

[dir=ltr] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem) {
    padding: .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;
}

.layout-mobile #songsTab .listItem[data-type="Audio"],
.layout-mobile #playlist .listItem[data-type="Audio"] {
    margin: auto 1em;
}

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

.listItem[data-type="Audio"]:has(.playlistIndexIndicatorImage):not(:hover) {
    background-color: rgba(255, 255, 255, .07);
}

[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, .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: .25 .5em !important;
}

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

.actionsheetDivider {
    height: 2px;
    background: rgb(255, 255, 255, 0.05);
}

.actionsheet-xlargeFont {
    line-height: normal;
}

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

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

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

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

.actionSheetMenuItem:has(.listItemIcon.check) .listItemBodyText {
    color: white;
}

.actionSheetMenuItem:has(.listItemIcon.check) .listItemIcon.check {
    display: none;
}

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

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

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

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

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

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

#itemDetailPage .detailSection {
    display: grid;
    row-gap: 1em;
    column-gap: 3em;
    max-width: unset !important;
    grid-template-columns: 1fr 1fr;
}

.layout-mobile .detailSection {
    grid-template-columns: 1fr;
}

.detailPageContent {
    gap: 1em;
}

.detailImageContainer .card {
    position: inherit !important;
}

.trackSelections {
    order: 3;
    max-width: unset !important;
    margin-top: 1em;
    border: var(--defaultBorder);
    border-radius: var(--smallRadius);
    padding: 1em;
    grid-column: 2;
    background-color: var(--lighterGradientPointAlpha);
}

.recordingFields {
    order: 4;
}

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

.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;
    grid-column: 1 / -1;
}

.detailSectionContent a:not(.overview-expand) {
    text-align: start;
}

.layout-desktop .detailSectionContent {
    align-content: end;
    min-height: 15vh;
}

.itemDetailsGroup {
    order: 2;
    grid-column: 1;
}

.trackSelections.hide~.recordingFields.hide~.itemDetailsGroup {
    grid-column: 1 / -1;
}

.layout-mobile .trackSelections,
.layout-mobile .detailSectionContent,
.layout-mobile .itemDetailsGroup,
.layout-tv .trackSelections,
.layout-tv .detailSectionContent,
.layout-tv .itemDetailsGroup {
    grid-column: 1 / -1;
}

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

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

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

.alphaPicker-vertical {
    height: 70%;
}

.alphaPicker {
    justify-content: center;
}

.alphaPickerButton-tv {
    transition: transform .2s;
}

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

.padded-right {
    padding-right: var(--sidePadding) !important;
}

.paddded-left {
    padding-left: var(--sidePadding) !important;
}

.layout-mobile .padded-right-withalphapicker {
    padding-left: 3.5%;
    padding-right: 6.5%;
}

.detailPagePrimaryContent.padded-right {
    padding-right: 0 !important;
}

[dir=ltr] .detailPageContent,
.content-primary {
    padding-left: var(--sidePadding) !important;
    padding-right: var(--sidePadding) !important;
}

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

.listPaging>span {
    padding: 0 .5em;
}

.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: 0 .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, .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) {
        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, .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: var(--borderWidthDouble);
    }

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

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

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

    .listItem:hover {
        background: rgba(255, 255, 255, .125);
        backdrop-filter: var(--blurLargest);
    }

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

    .searchfields-icon:hover,
    .inputContainer .emby-input-iconbutton:hover {
        color: rgba(255, 255, 255, .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, .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, .5);
}

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

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

.infoWrapper h1.itemName,
.infoWrapper h1.parentName {
    font-size: 4em;
    white-space: pre-wrap;
    padding-bottom: .5ch;
    color: white;
}

.infoWrapper h1.itemName,
.infoWrapper h1.parentName,
.infoWrapper h1.itemName a,
.infoWrapper h1.parentName a {
    font-weight: 200;
}

.infoWrapper h1.itemName bdi,
.infoWrapper h1.parentName bdi,
.infoWrapper h1.itemName a,
.infoWrapper h1.parentName a {
    /* overflow: hidden; */
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

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

.itemName.originalTitle {
    padding-top: .25em;
    padding-bottom: .25em;
    color: var(--dimTextColor);
}

.channelPrograms+.channelPrograms,
.guide-channelHeaderCell+.guide-channelHeaderCell {
    margin-top: 0;
}

.channelPrograms,
.guide-channelHeaderCell,
.programCell {
    border-color: transparent;
    /* this disables the 'color coded backgrounds' */
    background-color: transparent !important;
    border-radius: var(--smallRadius);
}

.guideProgramName {
    background-color: rgba(255, 255, 255, .05);
    height: -webkit-fill-available;
    margin: .35em 0 .35em .7em;
    border-radius: var(--smallerRadius);
}

.guide-programNameCaret {
    display: none;
}

.programCell-active .guideProgramName {
    background-color: rgba(255, 255, 255, .125);
}

.guideVerticalScroller {
    padding: 0;
}

.guideChannelImage {
    background-color: rgba(255, 255, 255, .05);
    bottom: .35em;
    right: .35em;
    top: .35em;
    width: calc(100% - .7em);
    border-radius: var(--smallerRadius);
}

#guideTab {
    padding-top: 3em !important;
}

.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: .5rem;
}

.playerStats,
.iconOsd {
    border-radius: var(--largeRadius);
    background-color: rgba(69, 69, 69, .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, .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);
}

#homeTab .overflowBackdropCard[data-isfolder="true"] .cardPadder-overflowBackdrop {
    padding-bottom: 50%;
}

#homeTab .overflowBackdropCard[data-isfolder="true"] .cardText-first,
#homeTab .overflowBackdropCard[data-isfolder="true"] .cardText.cardTextCentered {
    display: var(--libraryLabelVisibility);
}

.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);
}

.layout-mobile .playlistSection .playlist {
    padding: 4.3em 0;
    top: 0;
    bottom: 4.3em;
    background: var(--headerColor);
    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);
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.nowPlayingBar .nowPlayingImage {
    background-size: cover;
    border-radius: var(--smallerRadius);
    height: 3.5em;
    margin: .25em;
    width: 3.5em;
}

.nowPlayingBarPositionContainer {
    top: -0.7em;
}

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

    .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, .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: var(--bottomOSDGradient);
}

.skinHeader-withBackground.osdHeader {
    background: var(--topOSDGradient);
}

.headroom {
    transition: transform .5s;
}

/* this is the default header, visible in home and libraries */
.skinHeader-blurred:not(.osdHeader) {
    backdrop-filter: none;
    background-color: transparent;
    border: none;
    border-width: 0 0 var(--borderWidth) 0;
    background: var(--headerBackground);
    padding-top: .75em;
}

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

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

.skinHeader-blurred:not(.osdHeader):not(.semiTransparent)::after {
    content: var(--headerBlurLayerVisibility);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: var(--blurLargest);
    -webkit-mask: var(--headerBlurMask);
    mask: var(--headerBlurMask);
    z-index: -1;
}

/* this is the transparent header, visible in main media page */
.skinHeader-withBackground.semiTransparent {
    --headerBackground: none;
    backdrop-filter: none;
    background-color: transparent;
    border: none;
}

/* this is the semi transparent header without, visible when backdrops setting is on */
/* .backgroundContainer.withBackdrop~div .skinHeader-blurred:not(.osdHeader):not(.semiTransparent),
.backgroundContainer.withBackdrop~div .skinHeader-blurred:not(.semiTransparent)::after,
.backgroundContainer.withBackdrop~div .skinHeader-blurred:not(.osdHeader)::after {
    --headerBackground: var(--headerColorGradientAlt);
    backdrop-filter: none;
    background-color: transparent;
    border: none;
} */

.skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty)::after,
.skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) {
    --headerBackground: none;
    backdrop-filter: none;
    background-color: transparent;
    border: none;
}

.skinHeader-withBackground.semiTransparent .headerButton,
.skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) .headerButton {
    text-shadow: 1px 1px 0 #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);
}

.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: .5ch;
    font-size: 1.2em;
    font-variation-settings: 'FILL' 0;
}

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

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

.layout-tv .sectionTabs {
    /* this prevents the section tabs from being off-center in the music library
     after I set the overflow to visible to fix visual glitches */
    width: 100%;
}

.headerTabs.sectionTabs .emby-tab-button {
    display: inline-flex;
    margin: .25em .5em;
    padding: 0 1.25em;
    height: 2.5em;
    color: var(--textColor);
    font-weight: 400;
    border-radius: var(--largeRadius);
    background-color: var(--darkerGradientPointAlpha);
}

.headerTabs.sectionTabs .emby-tab-button-active {
    margin: .25em .5em;
    color: black;
    background-color: var(--textColor);
}

.layout-mobile .headerTabs.sectionTabs .emby-tab-button:first-child {
    margin-left: var(--sidePadding);
}

.layout-mobile .headerTabs.sectionTabs .emby-tab-button:last-child {
    margin-right: var(--sidePadding);
}

@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: -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;
}

.remoteControlContent {
    padding: 0 var(--sidePadding) !important;
}