/* ElegantFin Theme for Jellyfin by lscambo13 */

@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");

* {
    outline: 0px dotted red !important;
    --darkerGradientPoint: rgb(17, 24, 39);
    --lighterGradientPoint: rgb(30, 40, 54);
    --borderColor: rgba(75, 85, 99, 0.9);
    --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);
    --hoverGradient: linear-gradient(130deg, rgb(255 255 255 / 20%) 20%, rgb(255 255 255 / 10%) 40%);
}

html {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

.itemsContainer,
.vertical-list {
    /* gap: .75em; */
}

.card {
    margin: .375em;
}

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

.vertical-wrap {
    justify-content: flex-start !important;
}

.countIndicator,
.fullSyncIndicator,
.mediaSourceIndicator {
    background: rgb(31, 80, 189);
    border: var(--lighterBorderColor) solid 1px;
}

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

.cardScalable {
    border-radius: 1em;
    border: var(--borderColor) solid 1px !important;
    overflow: hidden !important;
    transition: 125ms transform;
}

.card:hover .cardScalable {
    /* transform: translateY(-4px); */
    box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 4px 0px;
}

.cardImageContainer {
    border-radius: 1em !important
}

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

.cardBox:not(.visualCardBox) .cardPadder {
    border-radius: 1em;
}

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


@media (min-width: 31.25em) {

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

@media (min-width: 43.75em) {

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

@media (min-width: 50em) {

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

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

@media (min-width: 48.125em) {
    .backdropCard {
        /* width: 33.3333333333%; */
        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: 30%;
    max-width: 15em;
}

.headerHomeButton,
.headerSyncButton,
.cardOverlayButton {
    display: none;
}

.pageTitle {
    height: 1.5em;
}

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

.detailRibbon {
    background-color: transparent;
}

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

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

.itemBackdrop {
    height: 45vh;
}

h2 {
    font-size: 1.25em;
}

h1,
h2 {
    font-weight: 600;
}

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

.backgroundContainer,
.nowPlayingPlaylist,
.nowPlayingContextMenu,
html {
    background: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint));
}

.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 1px 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: 1em;
}

.itemProgressBarForeground {
    border-radius: 1em;
    background-color: rgb(214 144 255 / 65%)
}

.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 1px;
    border-radius: .5em;
    padding: .5em !important;
}

.btnPlay {
    background-color: rgba(255, 255, 255, 0.05);
    /* border-radius: .5em 0em 0em .5em; */
    border: solid var(--lighterBorderColor) 1px;
}

.searchfields-icon {
    padding: .125em;
    /* margin: 0 !important; */
    margin-right: .25em;
    margin-bottom: 0;
    border-radius: .25em;
    background-color: rgba(255, 255, 255, 0.05);
    /* border-radius: .5em 0em 0em .5em; */
    border: solid var(--lighterBorderColor) 1px;
}

.btnPlay>.detailButton-content {
    -webkit-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;
    content: "Play";
}


/* 
.btnMoreCommands{
    border-radius: 0em .5em .5em 0em;
    border: solid var(--lighterBorderColor) 1px;
}

.btnUserRating,.btnCancelSeriesTimer,.btnShuffle,.btnInstantMix,.btnPlayTrailer,.btnPlaystate,.btnReplay{
    border-radius: 0em 0em 0em 0em;
    border: solid var(--lighterBorderColor) 1px;
} */


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

.mediaInfoOfficialRating {
    border-radius: .5em;
    font-size: 66%;
    margin: 0em 1em .25em 0em !important;
    padding: 0em 0.5em;
    background: transparent !important;
    border: solid 1px var(--borderColor);
}

.detailButton {
    border-radius: .5em;
    border: solid var(--lighterBorderColor) 1px;
    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 {
    border: solid var(--borderColor) 1px;
    margin-top: 1.5em;
    border-radius: .5em;
    /* margin: .5em 1em; */
}

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

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

.genresGroup,
.directorsGroup,
.writersGroup {
    /* border-bottom: solid var(--borderColor) 1px; */
}

.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;
    /* display: flex; */
    font-weight: 500;
    text-shadow: 1px 1px 0px black;
    padding: 1em;
    width: auto;
}

.centerMessage {
    width: unset;
}


.dialogContainer {
    /* backdrop-filter: blur(5px);
    background-color: rgb(0 0 0 / 60%); */
}

.dialog {
    backdrop-filter: blur(5px);
    background-color: var(--drawerColor);
    border-radius: .75em !important;
    border: solid var(--borderColor) 1px;
}

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

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

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

/* .emby-checkbox:checked+span+.checkboxOutline {
    background-color: var(--checkboxCheckedBgColor);
    border-color: var(--checkboxCheckedBgColor);
} */

.emby-checkbox:checked+span+.checkboxOutline {
    border-radius: .375em !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 {
    /* background-color: rgb(255, 255, 255); */
    top: unset;
    height: 1.3em;
    width: 1.3em;
    border-radius: .375em;
}


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

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

.cardText-first+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
    border-radius: 1em !important;
}

.cardText-secondary+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
    border-radius: 1em !important;
}

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

.cardScalable+.itemSelectionPanel>.checkboxContainer>.emby-checkbox:checked+span+.checkboxOutline {
    border-radius: 1em !important;
}

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

.checkboxOutline.multiSelectCheckboxOutline {
    border-radius: 1em;
    border-width: 0;
    width: 100%;
    height: 100%;
}

.cardIndicators {
    -webkit-align-items: center;
    /* padding: 1em; */
    top: .2em;
}

.indicator {
    /* background: rgb(146 146 146 / 20%); */
    border: solid rgb(124 124 124 / 50%) 1px;
    /* padding: .1em; */
    border-radius: 100em;
}

.defaultCardBackground {
    background: var(--lighterGradientPoint) !important;
}

.listItemImage {
    border-radius: .5em;
}

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

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

.raised:focus {
    background: var(--lighterGradientPoint);
    filter: brightness(1.25);
}

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

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

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) 1px;
}

.button-submit {
    background: var(--btnSubmitColor) !important;
    border: solid var(--btnSubmitBorderColor) 1px !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: 1em !important;
    border: solid var(--borderColor) 1px !important;
    box-shadow: unset !important;
    /* backdrop-filter: blur(5px); */
}

.paperList {
    padding: .4em;
}

.serverInfo {
    padding: 1em;
}

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

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

[dir=ltr] .navMenuOption {
    padding: .75em 1em !important;
    /* padding: 1.25em 0.25em 0.25em 1.5em !important; */
}

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

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

.navMenuOption {
    border-radius: .5em !important;
    margin: .5em 1em !important;
}

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

.navMenuOption-selected {
    background-color: rgb(201 143 255 / 42%) !important;
    border: solid rgb(255 255 255 / 20%) 1px;
}

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

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

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

.detailsGroupItem,
.trackSelections .selectContainer {
    /*flex-direction: column;*/
    max-width: unset !important;
    align-items: center;
}

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

.selectArrowContainer {
    /* top: .5em; */
    opacity: .5;
}

.detailSectionContent {
    order: 1;
}

.itemDetailsGroup {
    order: 3;
}

.sliderBubble {
    border-radius: 1em;
    border: solid 1px 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 {
    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-start: 1em;
}

.dashboardFooter::after {
    content: "ElegantFin v24.12.03";
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: .6em;
    opacity: .5;
}