/* ElegantFin Theme for Jellyfin by lscambo13 */

@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.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');

:root {
    --darkerGradientPoint: #111827;
    --lighterGradientPoint: #1d2635;
    --borderColor: rgb(71, 80, 92);
    --headerColor: rgba(30, 40, 54, 0.8);
    --drawerColor: rgba(30, 40, 54, 0.9);
    --lighterBorderColor: rgb(255 255 255 / 20%);
    --selectorBackgroundColor: rgb(55, 65, 81);
    --btnSubmitColor: rgb(61, 54, 178);
    --btnSubmitBorderColor: rgb(117 111 226);
    --checkboxCheckedBgColor: rgb(79, 70, 229);
    --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
    --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%);
    --hoverGradient: linear-gradient(130deg, rgb(255 255 255 / 20%) 20%, rgb(255 255 255 / 10%) 40%);
    --activeColor: rgb(201 143 255 / 40%);
    --largerRadius: 1.25em;
    --largeRadius: 1em;
    --smallRadius: .5em;
    --smallerRadius: .375em;
    --borderWidth: 0.075em;
}

html {
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 425;
    font-style: normal;
}

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

.dashboardFooter::after {
    content: "ElegantFin v24.12.20";
    font-size: .8em;
    color: #4e4e60;
}

.card {
    padding: .375em;
}

.card:focus .cardBox:not(.visualCardBox) .cardScalable {
    border-radius: var(--largerRadius) !important;
    border: solid rgba(0, 0, 0, 1) var(--borderWidth) !important;
    outline: var(--borderWidth) rgba(255, 255, 255, 1) solid;
    transition: border .1s;
    filter: brightness(1.125);
}

.emby-button.show-focus:focus,
.paper-icon-button-light.show-focus:focus {
    background: #2f3a53;
    /* border-radius: var(--smallRadius); */
    outline: var(--borderWidth) rgb(255 255 255) solid !important;
    outline-offset: calc(-1*var(--borderWidth));
    color: #fff;
    transition: outline 0s, border 0s;
}

.emby-tabs .emby-button.show-focus:focus {
    outline: .05em rgb(255 255 255) solid !important;
    outline-offset: -1em;
    color: #fff;
    border-radius: var(--largerRadius);
}

[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(--lighterBorderColor) solid var(--borderWidth);
}

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

.cardScalable {
    border-radius: var(--largeRadius);
    border: var(--borderColor) solid var(--borderWidth) !important;
    overflow: hidden !important;
    transition: 125ms transform;
    /* box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); */
}

.cardImageContainer {
    border-radius: var(--largeRadius) !important
}

.cardOverlayContainer {
    border-radius: var(--largeRadius) !important;
    border: solid rgb(255 255 255 / 65%) var(--borderWidth);
    mix-blend-mode: plus-lighter;
    background: var(--hoverGradient);
}

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

.cardOverlayContainer>.cardOverlayFab-primary {
    display: none;
}


@media (min-width: 31.25em) {

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

@media (min-width: 43.75em) {

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

@media (min-width: 50em) {

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

@media (min-width: 25em) {
    .backdropCard {
        width: 49%;
    }
}

@media (min-width: 48.125em) {
    .backdropCard {
        width: 32%;
    }
}

.detailLogo {
    display: none;
}

h1 {
    font-size: 3em;
}

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

.portraitCard {
    min-width: 5em;
    width: 29.5%;
    max-width: 12.9em;
}

.headerHomeButton,
.cardOverlayButton {
    display: none;
}

/* hide sync button on home screen */
.skinHeader.noHomeButtonHeader .headerSyncButton {
    display: none;
}

.pageTitle {
    height: 1.5em;
}

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

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

.detailRibbon {
    background-color: transparent;
}

.itemBackdrop {
    height: 13em;
}

.mediaInfoOfficialRating {
    border-radius: var(--smallRadius);
    font-size: 66%;
    line-height: 1em;
    margin: 0em 0.5em .15em 0em !important;
    padding-inline: .5em;
    padding-block-start: .4em;
    font-weight: 600;
    background: transparent !important;
    border: solid var(--borderWidth) var(--borderColor);
}

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

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

.detailPageWrapperContainer {
    padding-top: unset;
    margin-top: unset;
    background: linear-gradient(0deg, var(--darkerGradientPoint) 85%, transparent);
}

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

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

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

    .detailPageWrapperContainer {
        padding-top: 35vh;
        margin-top: -45vh;
    }
}

@media (max-height: 31.25em) {
    .itemBackdrop {
        height: 62vh;
    }
}

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

h2 {
    font-size: 1.25em;
}

h1,
h2 {
    font-weight: 600;
}

.tagline {
    font-size: 1.3em;
    font-weight: 400;
    margin-bottom: 0;
}

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

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

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

.skinHeader-blurred:not(.osdHeader) {
    background-color: var(--headerColor) !important;
    backdrop-filter: blur(5px) !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;
}

.itemProgressBar {
    background-color: rgb(123 123 123 / 30%) !important;
    height: .2em;
    overflow: hidden;
    border-radius: var(--largeRadius);
}

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

.selectLabel {
    max-height: 2em;
}

.layout-mobile .mainDetailButtons {
    margin-top: 2em;
}

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

.btnPlay {
    background-color: rgba(255, 255, 255, 0.05);
    border: solid var(--lighterBorderColor) var(--borderWidth);
}

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

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

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

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

.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;
    margin-top: .1em;
    content: "Play";
}

.mainDrawer,
.drawer-open {
    background-color: var(--drawerColor);
    border-right: solid var(--borderColor) var(--borderWidth);
    backdrop-filter: blur(8px);
}

.detailButton {
    border-radius: var(--smallRadius);
    border: solid var(--lighterBorderColor) var(--borderWidth);
    padding: .5em .5em !important;
    margin: 0.125em !important;
}

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

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

.itemDetailsGroup {
    outline: var(--borderWidth) solid var(--borderColor);
    outline-offset: calc(-1*var(--borderWidth));
    overflow: hidden;
    margin-top: 1.5em;
    border-radius: var(--smallRadius);
}

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

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

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

.detail-clamp-text {
    text-align: start;
}

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

.dialogContainer {
    margin: .33em;
}

.dialog {
    backdrop-filter: blur(5px);
    background-color: var(--drawerColor);
    border-radius: var(--largeRadius) !important;
    border: solid var(--borderColor) var(--borderWidth);
    min-width: 15em;
}

.dialogBackdropOpened {
    opacity: .66;
}

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

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

.formDialogHeader>h1 {
    margin-inline: 0 !important;
}

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

.selectionCommandsPanel {
    background: var(--lighterGradientPoint);
    border-bottom: solid var(--borderColor) var(--borderWidth);
    backdrop-filter: blur(10px);
}

.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: groove;
    border-width: 2px;
}

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

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

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

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

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

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

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

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

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

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

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

.emby-button.block,
.button-alt,
.raised,
#btnDeleteImage,
.dashboardActionsContainer>.emby-button {
    color: #fff;
    border-radius: var(--smallRadius);
    background: var(--lighterGradientPoint);
    border: solid var(--borderColor) var(--borderWidth);
}

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

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

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

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

.raised:hover,
.fab:hover,
.emby-button:hover {
    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: rgb(169, 29, 29);
    border: solid rgb(217, 84, 84) 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: blur(5px);
}

.visualCardBox,
.paperList {
    background-color: var(--headerColor) !important;
    border-radius: var(--largeRadius) !important;
    border: solid var(--borderColor) var(--borderWidth) !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;
}

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

.MuiAppBar-root {
    background: var(--headerColor);
    backdrop-filter: blur(5px);
    border-bottom: solid var(--borderColor) var(--borderWidth);
}

.MuiDrawer-paper {
    background: var(--drawerColor);
    backdrop-filter: blur(5px);
    border-right: solid var(--borderColor) var(--borderWidth);
}

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

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

[dir=ltr] .listItem:not(.actionSheetMenuItem) {
    padding: 0.25em 0.25em 0.25em 1.5em !important;
}

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

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

.listItem:hover,
.navMenuOption:hover {
    background: rgba(255, 255, 255, 0.125);
    border-radius: .7em;
}

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

.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: solid var(--lighterBorderColor) var(--borderWidth) !important;
}

.noBackdropTransparency .detailPageSecondaryContainer {
    background-color: transparent;
}

.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: solid var(--borderWidth) var(--borderColor);
    overflow: hidden;
}

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

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

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

.alphaPicker-vertical {
    height: 70%;
}

.alphaPicker {
    justify-content: center;
}

[dir=ltr] .padded-left.vertical-wrap {
    padding-left: 5% !important;
}

[dir=ltr] .padded-right.vertical-wrap {
    padding-right: 5% !important;
}

.paging {
    padding-inline: 1em;
}

.smallBackdropCard,
.squareCard,
.backdropCard,
.bannerCard {
    width: 46%;
    max-width: 18em;
}

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

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

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

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

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

.metadataSidebarIcon {
    color: #6c7bab;
}

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

.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 {
    border: solid var(--borderWidth);
    border-radius: var(--largeRadius);
    font-size: .85em;
    line-height: unset;
    font-weight: 600;
    margin-inline-start: .5em;
}

.toast {
    background: var(--headerColor);
    border: solid var(--borderWidth) var(--borderColor);
    border-radius: var(--smallRadius);
    backdrop-filter: blur(1em);
}

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

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

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

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

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

.emby-select-withcolor:focus,
.emby-input:focus,
.emby-textarea:focus {
    border-color: #c1c1c1 !important;
}

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

[dir=ltr] .mediaInfoItem {
    transform: scale(.85);
    margin: 0 .4em 0 0;
}

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

.emby-select-iconbutton {
    background-color: var(--selectorBackgroundColor);
    border: var(--lighterBorderColor) solid var(--borderWidth);
    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) {
        padding-top: 4.8em !important;
    }
}

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