.show-detail-container
    display flex
    position fixed
    width 100%
    padding-top 67px
    background $BgColor1
    flex-direction column

    .show-header
        width 100vw
        min-height 215px

        .sh-backdrop
            .shb-img
                position absolute
                min-height 100%
                margin-top -35px
                width 100vw
                background-repeat no-repeat
                background-size cover
                background-position center
                -webkit-filter blur(60px) brightness(0.7)
                background-color $ShowBgColor1
                opacity 0
                &.fadein
                    transition opacity .3s ease-in
                    opacity 1

        .sh-poster
            float left
            width 198px
            height 100%
            z-index 20
            position relative
            pointer-events none
            transition transform 0.05s ease-out

            .shp-img
                position relative
                margin-left 32px
                margin-top 10px
                width 134px
                height 197px
                box-shadow 0px 0px 10px
                background-size 100% 100%
                background-position center
                background-repeat no-repeat
                border-radius 4px
                opacity 0
                background-color $ShowBgColor1
                pointer-events auto
                cursor pointer
                &.fadein
                    transition opacity .3s ease-in
                    opacity 1

        .sh-poster.active
            transition transform 0.12s ease-out

            .shp-img
                border-radius 2px

        .sh-metadata
            float left
            position relative
            height 194px
            width calc(100% - 198px)
            padding-top 10px
            padding-right 45px

            .shm-title
                color #fff
                font-family $Font
                -webkit-font-smoothing antialiased
                font-size 28px
                margin-bottom 8px
                margin-top 5px

            .shm-infos
                div
                    float left
                    font-size 11px
                    font-family $MainFontBold
                    color #fff
                    -webkit-font-smoothing antialiased

                    &:not(.shmi-tmdb-link)
                        &:hover ~ div.shmi-tmdb-link
                            opacity 0.4
                            transition-delay .8s

                div.shmi-year
                    cursor pointer

                div.shmi-tmdb-link
                    padding-left 12px
                    padding-right 6px
                    cursor pointer
                    opacity 0
                    transition opacity .3s ease-in
                    transition-delay .2s

                    &:hover
                        opacity 1
                        transition-delay 0s

                    &.disabled
                        &:hover
                            cursor default
                            opacity 0.4

                div.shmi-imdb
                    cursor pointer
                    background url(../images/icons/imdb.png) no-repeat
                    width 27px
                    height 16px
                    position relative
                    top -2px

                div.shmi-rating
                    cursor pointer

                    .hidden
                        display none

                    .number-container-tv
                        position relative
                        font-size 12px
                        font-family $MainFontBold
                        color #FFF

                        em
                            font-size 0.8em

                    .star-container-tv
                        position relative
                        opacity 1

                        .rating-star
                            color #ffc900
                            font-size 11px
                            padding-right 3px

                        .rating-star-half
                            color #ffc900
                            font-size 11px
                            margin-left -4px
                            padding-right 3px

                        .rating-star-half-empty
                            color #a3a5a7
                            font-size 11px
                            margin-left -4px

                        .rating-star-empty
                            color #a3a5a7
                            font-size 11px
                            padding-right 3px

                        .rating-star-half-container
                            width 1em
                            height 1em
                            line-height 1em
                            margin-top -3px
                            margin-left 4px

                span.dot
                    margin 4.5px 15px 0 15px
                    float left
                    width 3px
                    height 3px
                    border-radius 2px
                    background-clip padding-box
                    background-color #dbdbdd
                    cursor default

            .shm-synopsis
                color #fff
                float left
                width 100%
                text-align justify
                font-family $MainFont
                -webkit-font-smoothing antialiased
                font-size 12px
                line-height 22px
                max-height 107px
                padding-right 8px
                margin-top 8px
                overflow hidden
                scrollable()

        .sh-metadata.active
            filter blur(4px)
            pointer-events none

        .sh-actions
            float left
            position relative
            width calc(100% - 198px)
            height 35px
            margin-top -15px
            padding-right 45px

            display flex
            flex-direction row
            justify-content space-between
            white-space nowrap

            .dropdowns-container
                margin -10px -30px 0 0

                #audio-dropdown .lang-dropdown
                    background none

            .sha-bookmark
                float left
                cursor pointer
                padding-left 24px
                color #FFF
                position relative
                font-family $MainFont
                font-smoothing antialiased
                font-size 12px
                line-height 37px
                margin-top -2px
                &:before
                    content "\f004"
                    font-family "Font Awesome 6 Free"
                    font-weight 900
                    position absolute
                    font-size 18px
                    color #FFF
                    top 0
                    left 0
                    bottom 0
                    right 0
                    opacity 1
                    transition opacity 0.5s

                &:after
                    content "\f004"
                    font-family "Font Awesome 6 Free"
                    font-weight 900
                    position absolute
                    font-size 18px
                    color $ButtonBgActive
                    top 0
                    left 0
                    bottom 0
                    right 0
                    opacity 0
                    transition opacity 0.5s

                &:hover
                    &:before
                        opacity 0

                    &:after
                        opacity 1

                &.selected
                    height 18px
                    width 200px
                    &:before
                        content "\f004"
                        font-family "Font Awesome 6 Free"
                        font-weight 900
                        position absolute
                        font-size 18px
                        color $FavoriteColor
                        top 0
                        left 0
                        bottom 0
                        right 0
                        opacity 1
                        transition opacity 0.5s

                    &:after
                        content "\f004"
                        font-family "Font Awesome 6 Free"
                        font-weight 900
                        position absolute
                        font-size 18px
                        color #FFF
                        top 0
                        left 0
                        bottom 0
                        right 0
                        opacity 0
                        transition opacity 0.5s

                    &:hover
                        &:before
                            opacity 0

                        &:after
                            opacity 1

            .sha-watched
                float left
                cursor pointer
                padding-left 28px
                margin-left 20px
                color #FFF
                position relative
                font-family $MainFont
                font-smoothing antialiased
                font-size 12px
                line-height 37px
                margin-top -2px
                display none

                &:before
                    content "\f070"
                    font-family "Font Awesome 6 Free"
                    font-weight 900
                    position absolute
                    font-size 18px
                    color #FFF
                    left 0
                    opacity 1
                    transform scaleY(0.9)
                    transition opacity 0.5s

                &:after
                    content "\f00c"
                    font-family "Font Awesome 6 Free"
                    font-weight 900
                    position absolute
                    font-size 20px
                    color #299000
                    left 0
                    opacity 0
                    transition opacity 0.5s

                &:hover, &.selected
                    &:before
                        opacity 0
                    &:after
                        opacity 1

        .sh-actions.active
            filter blur(4px)
            pointer-events none

    .show-details
        width 100vw
        z-index 1
        background rgba($ShowBgColor1, 0.7)
        height calc(100vh - 282px)
        display grid
        padding-left 20px
        gap 10px
        grid-template-columns fit-content(165px) 2fr minmax(480px, 1fr)
        grid-template-rows 2fr auto
        grid-template-areas "seasons  episodes overview" "torrents torrents overview"
        &.transpOff
            background $ShowBgColor1
        &.transpVLow
            background rgba($ShowBgColor1, 0.9)
        &.transpLow
            background rgba($ShowBgColor1, 0.8)
        &.transpHigh
            background rgba($ShowBgColor1, 0.6)
        &.transpVHigh
            background rgba($ShowBgColor1, 0.5)

        .sd-seasons ul, .sd-episodes ul
            position absolute
            top 45px
            bottom 0
            cursor pointer
            direction rtl
            white-space nowrap
            scrollable()

            li
                padding 0px 15px
                margin 1px 0px 1px 1px
                float left
                width calc(100% - 7px)

                .watched
                    padding 9px 0
                    color $ShowWatchedIcon_false
                    transition color .5s

                    &:hover
                        color $ShowWatchedIcon_hover

                    &.true
                        color $ShowWatchedIcon_true

            li:nth-child(odd)
                background-color rgba($ShowOddHighlight, $ShowOddHighlightOp)
                &:not(.active).transpOff
                    background-color $ShowBgColor2
                    &:hover
                        background-color $EpisodeSelectorHover

            li:hover
                background rgba($EpisodeSelectorHoverTran,20%)

            li:not(.active).transpOff:hover
                background $EpisodeSelectorHover

            li.active
                background-color $EpisodeSelectorBg
                position relative

                &:after
                    content ""
                    position absolute
                    top 0px
                    right -12px
                    width 0
                    height 0
                    border-color rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) $EpisodeSelectorBg
                    border-style solid
                    border-width 16px 6px 17px 6px

            a
                text-decoration none
                font-size 15px
                line-height 34px
                font-weight normal
                float left
                flex-direction row
                direction ltr

                span
                    float left
                    margin 0px 15px 0px 5px

                div
                    white-space nowrap
                    border-left 1px solid $ShowBgColor1
                    padding-left 30px
                    text-align left
                    overflow hidden
                    text-overflow ellipsis

        .sd-seasons, .sd-episodes
            position relative
            height 100%
            .sds-title, .sde-title
                font-size 24px
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
                margin-bottom 15px
                margin-top 2px
                color $ShowText1

        .sd-seasons
            min-width 165px
            padding 10px

            .sds-list ul a
                color $SaisonListText
                white-space nowrap

            .sds-list ul li.active a
                color $EpisodeSelectorText

        .sd-episodes
            grid-area episodes
            padding 10px

            .sde-list ul
                width calc(100% - 10px)

            .sde-list ul li a
                color $EpisodeListText
                font-family $MainFont
                min-width 70px
                max-width calc(60vw - 290px)

            .sde-list ul li.active a
                color $EpisodeSelectorText

        .sd-overview
            background rgba($ShowBgColor1, 0.3)
            grid-area overview
            padding 10px 30px 10px 18px
            display grid
            grid-template-rows auto 2fr
            &.transpOff
                background $ShowBgColor2

            .sdo-infos
                height fit-content
                overflow-x hidden

                .sdoi-title
                    overflow hidden
                    white-space nowrap
                    text-overflow ellipsis
                    font-size 24px
                    margin-top 2px
                    padding-bottom 6px
                    color $ShowText1

                .sdoi-links
                    position absolute
                    right 42px
                    margin-top -6px

                    &>div
                        padding 5px 3px
                        border-radius 50%
                        cursor pointer
                        position relative

                    .health-icon
                        font-size 14px
                        color #737577
                        transition all .3s ease-in

                        &.Bad
                            color #d53f3f
                        &.Medium
                            color #ece523
                        &.Good
                            color #a3e147
                        &.Excellent
                            color #2ad942

                    .magnet-icon
                        font-size 13px
                        color #DDD
                        margin-right 2px

                        &:hover
                            color #FFF
                            transition all .5s

                    .source-icon
                        display inline-block
                        font-size 13px
                        color #DDD
                        margin-right 0px
                        top 3px

                        &:hover
                            color #FFF
                            transition all .5s
                        img
                            height 16px

                .sdoi-aired
                    font-size 12px
                    line-height 15px
                    margin-bottom 10px
                    color $ShowText2

                    .sdoi-date
                        overflow hidden
                        white-space nowrap
                        text-overflow ellipsis

                .sdoi-synopsis
                    color $ShowText1
                    font-size 13px
                    line-height 18px
                    text-align justify
                    margin-top 10px
                    padding 2px 15px 5px 0
                    height fit-content
                    scrollable()

            #torrent-list
                height auto
                margin 10px -10px 10px -5px

            .sdo-watch
                height 60px
                padding 5px 0px 15px 0px
                margin-bottom -5px

                &.disabled
                    margin-bottom 50px

                .play-selector
                    position relative
                    float right
                    margin-top 6px

                    &.disabled
                        position absolute
                        right 5px
                        margin-top -5px
                        cursor pointer
                        opacity 1
                        filter none

                .show-all-torrents
                    float left
                    font-family $MainFont
                    -webkit-font-smoothing antialiased
                    font-size 11px
                    color $ShowText1
                    transition all .2s ease-in, margin 0s
                    padding 0 6px
                    margin 13px 6px 0 0
                    border-radius 10px
                    height 19px
                    line-height 19px
                    cursor pointer

                    &:hover, &.active
                        color $QualitySelectorText
                        background $QualitySelectorBg

                    &.fa-spinner
                        font-family "Font Awesome 6 Free"
                        transition none
                        margin-left 6px
                        color $ShowText1

                        &:hover, &.active
                            background none

                .sdow-quality
                    margin-top 13px
                    float left

                    div
                        cursor pointer
                        float left
                        font-family $MainFont
                        -webkit-font-smoothing antialiased
                        font-size 11px
                        color $ShowText1
                        transition all .2s ease-in
                        padding 4px
                        margin-right 6px

                    .disabled
                        opacity .3
                        cursor default

                    .active
                        cursor pointer
                        opacity 1
                        color $QualitySelectorText
                        background $QualitySelectorBg
                        border-radius 10px
                        font-family $MainFontBold

                .sdow-watchnow
                    margin-top 6px
                    float right

                    &.disabled
                        visibility hidden

                    #player-chooser
                        .button
                            margin-right 0px

        .sd-torrents
            grid-area torrents
            max-height 300px

            .action
                color rgba(0,0,0,0) !important
                width 0px !important
                padding 0px !important
                pointer-events none

                .item-download
                    font-family $Font, $AlternateFont

        > .spinner
            position fixed
            width 100%
            height 100%
            background rgba(0, 0, 0, 0.5) center center no-repeat
            pointer-events all
            z-index 1

            .loading-container
                margin 180px auto 0px
                opacity .8

    .show-details.active
        filter brightness(50%) blur(4px)
        pointer-events none
