SleekFin/Theme/ElegantFin-theme-nightly.css

/* ElegantFin Theme for Jellyfin by lscambo13 */

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


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

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v222/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
}

:root {
    --elegantFinFooterText: "ElegantFin Nightly";
    --darkerGradientPoint: #111827;
    --darkerGradientPointAlpha: rgba(17, 24, 39, 0.85);
    --lighterGradientPoint: #1d2635;
    --borderColor: rgb(71, 80, 92);
    /* --borderColor: rgb(62 72 85); */
    --lighterBorderColor: rgb(255 255 255 / 20%);
    --headerColor: rgba(30, 40, 54, 0.8);
    --drawerColor: rgba(30, 40, 54, 0.9);
    --selectorBackgroundColor: rgb(55, 65, 81);
    --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);
    --textColor: rgb(209, 213, 219);
    --dimTextColor: rgb(156, 163, 175);
    --activeColorAlpha: rgba(144, 81, 169, 0.4);
    --activeColor: rgb(144, 81, 169);
    --tableBodyColor: rgb(31 41 55 / 1);
    --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
    --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%);
    --hoverGradientA: linear-gradient(130deg, rgb(255 255 255 / 35%) 20%, rgb(255 255 255 / 15%) 40%);
    --hoverGradientB: radial-gradient(100% 250% at 90% 190%, rgba(255, 255, 255, 0.15) 85%, rgba(255, 255, 255, 0.33) 100%);
    --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);
    --largerRadius: 1.25em;
    --largeRadius: 1em;
    --smallRadius: .5em;
    --smallerRadius: .375em;
    --borderWidth: 0.075em;
    --defaultBorder: var(--borderWidth) solid var(--borderColor);
    --defaultLighterBorder: var(--borderWidth) solid var(--lighterBorderColor);

    /* login page customizations */
    --loginPageBgUrl: url("");
    --loginPageText: "Sign in to continue";

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

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

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

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

.material-icons {
    font-family: 'Material Icons Round' !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' 24
}

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

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

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

.card {
    padding: .375em;
}

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

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

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

.cardImageContainer {
    transition: transform .375s;
}

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

.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: .25s;
    background: var(--hoverGradientA);
    background-size: 200%;
    background-position-x: 100%;
}

.layout-desktop .card.card-hoverable:hover .cardOverlayContainer {
    background-position-x: 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 {
    background-color: rgba(0, 0, 0, 0.9);
    color: var(--textColor);
    border: var(--defaultBorder);
    font-size: 75%;
}

.cardOverlayContainer>.cardOverlayFab-primary:hover,
.listItemImageButton:hover {
    background-color: rgba(0, 0, 0, 0.75) !important;
    color: unset;
}

.layout-desktop .cardOverlayButton-br {
    display: none;
}

.layout-mobile .cardOverlayButton {
    padding: .425em;
}

.layout-mobile .cardOverlayButton-br>.cardOverlayButtonIcon {
    border: var(--defaultLighterBorder);
    border-color: rgba(23, 23, 23, 0.6);
    backdrop-filter: var(--blurSmallest);
}

.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: x-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%;
    }
}

.detailLogo {
    display: none;
}

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

.layout-mobile .detailPageWrapperContainer {
    background: var(--darkerGradientPointAlpha);
}

.layout-desktop .detailPageWrapperContainer {
    background: linear-gradient(0deg, var(--darkerGradientPoint) 80%, transparent);
    min-height: calc(100vh - 13em);
}

.detailPagePrimaryContainer {
    align-content: space-between;
    align-items: stretch;
    justify-content: end;
    flex-direction: column;
}

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

.layout-mobile .detailPagePrimaryContainer {
    background: linear-gradient(0deg, var(--darkerGradientPoint) 70%, transparent);
}

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

.layout-mobile .detailPageSecondaryContainer {
    background-color: var(--darkerGradientPoint);
}

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

.headerHomeButton {
    display: none;
}

/* hide sync button on home screen */
.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;
}

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

.itemBackdrop {
    height: 13em;
}

.itemMiscInfo>.mediaInfoItem:not(:first-child, .mediaInfoCriticRating) {
    padding-inline-start: .125em;
}

.itemMiscInfo>.mediaInfoItem:not(:last-child) {
    padding-inline-end: .125em;
}

.mediaInfoItem {
    font-family: system-ui;
    border-radius: var(--smallRadius);
    font-size: .85em;
    font-weight: 500;
    padding-block: 0;
}

.mediaInfoOfficialRating {
    background: transparent !important;
    font-size: .6em;
    font-family: 'Times New Roman', Times, serif;
    line-height: normal;
    transform: translateY(-.15em);
    padding-inline: .5em !important;
    padding-block: .2em !important;
    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;
}

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

@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% !important;
    }
}

.homeLibraryButton {
    min-width: 15%;
}

@media (orientation: landscape) and (min-width: 40em) {
    .layout-mobile .itemBackdrop {
        height: 40vh;
        opacity: .10;
    }

    .layout-mobile .detailPageWrapperContainer {
        padding-top: 35vh;
        margin-top: -47vh;
    }
}

@media (orientation: portrait) and (max-width: 40em) {
    .layout-mobile .itemBackdrop {
        height: 40vh;
    }

    /* .mediaInfoOfficialRating {
        padding-inline-start: .5em;
        padding-inline-end: .475em;
        padding-block-start: 0.470em;
    } */

    .layout-mobile .detailPageWrapperContainer {
        padding-top: 35vh;
        margin-top: -47vh;
    }

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

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

    .layout-mobile .detailImageContainer .card {
        max-width: 15vw;
    }

    .layout-mobile [dir=ltr] .infoWrapper {
        padding-left: 25% !important;
    }

}

.layout-mobile .itemBackdrop {
    margin-top: 3.5em;
}

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

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

.backgroundContainer:not(.withBackdrop) {
    background: var(--backgroundGradient)
}

.backgroundContainer.withBackdrop {
    opacity: .9375;
    background: var(--backgroundGradient)
}

.skinHeader-blurred:not(.osdHeader),
.appfooter {
    background-color: var(--headerColor) !important;
    backdrop-filter: var(--blurDefault) !important;
}

.headroom--unpinned {
    -webkit-transform: translateY(-3.5em);
    transform: translateY(-3.5em);
}

.skinHeader:not(.osdHeader) {
    border-style: solid;
    border-width: 0 0 var(--borderWidth) 0;
    border-color: var(--borderColor);
    transition: all .375s ease-in-out;
}

.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(--btnSubmitBorderColor) !important;
}

.itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
    backdrop-filter: var(--blurSmallest);
    background-color: rgb(123 123 123 / 30%) !important;
    height: .3em;
    box-shadow: inset 0px 0px 0.01em .01em #969696;
    overflow: hidden;
    border-radius: var(--largeRadius);
}

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

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

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

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

::-webkit-progress-value {
    background: var(--btnSubmitBorderColor) !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(--btnSubmitBorderColor) !important;
}

.selectLabel {
    max-height: 2em;
}

.layout-mobile .mainDetailButtons {
    margin-top: 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;
}

.detailButton {
    border-radius: var(--smallRadius);
    border: var(--defaultLighterBorder);
    padding: .5em .5em !important;
    margin: 0.125em !important;
    backdrop-filter: var(--blurSmallest);
}

.btnPlay.detailButton {
    background-color: rgba(255, 255, 255, 0.05);
    border: var(--defaultLighterBorder);
}

.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>.detailButton-content::after {
    padding-left: .25em;
    padding-right: .5em;
    place-content: center;
    content: "Play";
}

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

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

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

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

.detail-clamp-text {
    text-align: start;
    color: var(--dimTextColor);
}

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

.innerCardFooter,
.chapterThumbTextContainer {
    background: transparent;
    font-weight: 500;
    text-shadow: .1em .1em 0px black;
    padding: 1em;
    width: auto;
}

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

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

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

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

#btnDeleteImage,
.button-delete {
    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(2n) {
    -webkit-flex: 1 0 60%;
    flex: 1 0 60%;
}

.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;
    /* padding-inline: 1em !important; */
}

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

/* .listItemBody {
    padding: 0;
} */

.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;
    /* border: var(--defaultLighterBorder) !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) .listItemIcon.material-icons.check {
    display: none;
}

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

.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;
    /* border: var(--defaultLighterBorder); */
}

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

.detailPageContent {
    gap: 1em;
}

.trackSelections {
    order: 2;
    max-width: unset !important;
}

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

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

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

.detailSectionContent {
    order: 1;
}

.itemDetailsGroup {
    order: 3;
}

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

.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 {
    padding-left: 5% !important;
}

[dir=ltr] .padded-right.vertical-wrap {
    padding-right: 5% !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;
}

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

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

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

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

.activeSession {
    width: 98% !important;
    max-width: 27rem !important;
}

.emby-tab-button:hover {
    color: #c1c1c1;
}

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

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

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

.layout-mobile [dir=ltr] .infoWrapper {
    padding-left: 34%;
    padding-bottom: 2%;
}

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

.layout-mobile .infoWrapper h1.itemName {
    font-size: 1.6em;
}

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

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

@media (min-width: 62em) {
    .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;
        position: relative;
        width: auto;
    }

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

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

.mdl-spinner__circle {
    border-color: var(--dimTextColor);
    border-style: inset;
}

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

.mdl-slider {
    height: unset;
}

.mdl-slider-background-flex-container {
    backdrop-filter: var(--blurSmallest);
}

.mdl-slider-background-flex {
    border-radius: var(--smallRadius);
}

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

.mdl-slider::-webkit-slider-thumb {
    background: var(--btnSubmitBorderColor);
}

.mdl-slider::-webkit-slider-thumb {
    width: .75em !important;
    height: .75em !important;
}

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

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

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

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

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

#serverActivityPage .MuiPaper-elevation2>.MuiBox-root,
#serverActivityPage .MuiTableRow-root.MuiTableRow-head,
#serverActivityPage .MuiTableRow-root {
    background-color: var(--tableBodyColor) !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: 58vh;
    flex-wrap: wrap;
    padding: 1em !important;
}

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

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

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

#loginPage {
    padding-top: 20em !important;
}

@media (max-height: 890px) {
    #loginPage {
        padding-top: 6.5em !important;
    }
}

@media (max-height: 1300px) {
    #loginPage:has(.padded-left.padded-right.padded-bottom-page .visualLoginForm:not(.hide)) {
        padding-top: 6.5em !important;
    }
}

#loginPage .readOnlyContent {
    margin: .5em auto 0em !important;
}

#loginPage .padded-left.padded-right.padded-bottom-page {
    margin: 2em auto 0;
    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;
}

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

@media (max-width: 640px) {
    #loginPage .padded-left.padded-right.padded-bottom-page {
        width: 100%;
        margin: 2em;
    }
}

@media (max-width: 1300px) {
    #loginPage .padded-left.padded-right.padded-bottom-page:has(.visualLoginForm:not(.hide)) {
        width: 100%;
        margin: 2em;
    }
}

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

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

.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 {
    width: 4em;
}

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

.card-withuserdata[data-isfolder="true"] .cardPadder-overflowBackdrop {
    padding-bottom: 50%;
}

.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent::before {
    position: absolute;
    font-size: 3.5vh;
    margin-bottom: .175em;
    font-weight: 800;
    color: white;
    font-family: 'Noto Sans';
    text-align: center;
}

.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardText-first,
.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;
}

.padded-right-withalphapicker .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) {
    margin-bottom: -1.5em;
}

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

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

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

.layout-mobile .playlistSection .playlist {
    padding: 2em 0;
    top: 3.5em;
    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;
}

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

.nowPlayingInfoContainerMedia>div:not(.hide) {
    margin-bottom: 1em;
}

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

.nowPlayingAlbum.nowPlayingSeason {
    color: var(--dimTextColor);
}

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