:root {
    /* Need the px or it won't work inside calc expression */
    --window-inset-top: 0px;
    --window-inset-bottom: 0px;
    --window-inset-left: 0px;
    --window-inset-right: 0px;
    --logo-object-position: left center;
    --extra-padding-top: 0em;
    --header-height: 5.525em;
    /* this is here for now instead of headroom.css to ensure it is loaded in time for the js */
    --env-inset-top: env(safe-area-inset-top);
}

/* this @supports shouldn't be necessary because browsers should ignore what they don't support, but that doesn't seem to be the case with tizen or legacy edge
   don't use env as part of the supports check because then tizen falsely considers it supported
*/
@supports (height: calc(3.125em + 2 * max(3em,4em))) {

    :root {
        --header-height: calc(4.325em + max(1.2em, env(safe-area-inset-top, 0)));
    }
}

/* need a supports here because the css vars ponyfill will just grab everything matching :root */
@supports (color: var(--fake-var)) {

    .withHeaderTabs:root {
        --extra-padding-top: .4em;
    }

    [dir="rtl"]:root {
        --logo-object-position: right center;
    }

    .withheadernowplaying:root {
        --header-height: 9.125em;
    }
}

/* this @supports shouldn't be necessary because browsers should ignore what they don't support, but that doesn't seem to be the case with tizen or legacy edge
   don't use env as part of the supports check because then tizen falsely considers it supported
*/
@supports (height: calc(3.125em + 2 * max(3em,4em))) {

    .withheadernowplaying:root {
        /* add 4.8em for nowplaying size */
        --header-height: calc(9.125em + env(safe-area-inset-top, 0));
    }
}

.skinHeader {
    /* This will ensure it is on top of the main body */
    z-index: 1;
    display: -webkit-flex;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    box-sizing: border-box;
    height: var(--header-height);
    -webkit-align-items: flex-start;
    align-items: flex-start;
    contain: strict;
    padding-top: 1.2em;
    padding-left: 0;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: 0;
    padding-right: env(safe-area-inset-right, 0);
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.nocssvars.withheadernowplaying .skinHeader {
    height: 9.125em;
}

.nocssvars .padded-top-page {
    padding-top: 5.925em !important;
}

.nocssvars.withheadernowplaying .padded-top-page {
    padding-top: 9.525em !important;
}

@media not all and (min-width: 120em) {

    .withHeaderTabs:not(.layout-tv):root {
        /* this is the base height from .skinHeader + .75em (header middle margin) + 40.36px/14.24 (header middle height) */
        --header-height: 7.91em;
    }

    /* this @supports shouldn't be necessary because browsers should ignore what they don't support, but that doesn't seem to be the case with tizen or legacy edge
   don't use env as part of the supports check because then tizen falsely considers it supported
*/
    @supports (height: calc(3.125em + 2 * max(3em,4em))) {

        .withHeaderTabs:not(.layout-tv):root {
            --header-height: calc(6.71em + max(1.2em, env(safe-area-inset-top, 0)));
        }
    }

    .withheadernowplaying.withHeaderTabs:not(.layout-tv):root {
        /* add 4.8em for nowplaying size */
        --header-height: 11.51em;
    }

    @supports (height: calc(3.125em + 2 * max(3em,4em))) {

        .withheadernowplaying.withHeaderTabs:not(.layout-tv):root {
            /* add 4.8em for nowplaying size */
            --header-height: calc(11.51em + env(safe-area-inset-top, 0));
        }
    }
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    /* Needed to prevent a horizontal scrollbar when animating */
    overflow-x: hidden;
    overflow-anchor: none;
}

.noScrollY {
    overflow-y: hidden;
}

.layout-tv {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

@media not all and (pointer: fine) {
    html {
        -webkit-touch-callout: none;
        /* technically not needed because autoprefixer will handle this, but it makes it easier to develop on ios */
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Used on document.body to lock document level scrolling when dialogs are open */
.withDialogOpen {
    overflow-y: hidden !important;
    /* Have to use this instead of none, otherwise the slideshow can't zoom */
    touch-action: pinch-zoom !important;
}

/* Fix for android where detail screen dialogs are causing the whole screen to scroll when scrolling the dialog */
@media not all and (pointer: fine) {
    .withDialogOpen:not(.layout-tv) .view.scrollY {
        overflow-y: hidden !important;
        /* Have to use this instead of none, otherwise the slideshow can't zoom */
        touch-action: pinch-zoom !important;
    }
}

.backgroundContainer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    contain: strict;
    /* Can't do this. It causes loss of scrolling on Firefox Android
        https://emby.media/community/index.php?/topic/81799-firefox-android-cannot-swipe-scroll-on-any-listing-page
    touch-action: none; */
}

.transparentDocument, .backgroundContainer-transparent {
    background: none !important;
    background-color: transparent !important;
}

.skinBody {
    contain: style size;
}

.skinBody-withWindowScroll {
    contain: style;
}

@media not all and (min-width: 60em) {

    .drawer-docked {
        display: none !important;
        /* transform: translateX(-100%) !important;
        content-visibility: hidden; */
    }
}

@media all and (min-width: 60em) {

    .drawer-docked {
        left: 0 !important;
        right: initial !important;
        inset-inline-start: 0% !important;
        inset-inline-end: initial !important;
        -webkit-transform: none !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .skinBody-withFullDrawer .page, .skinBody-withFullDrawer .appfooter {
        left: 33.15ch !important;
        left: clamp(33.15ch, 30%, 45.5ch) !important;
        right: 0 !important;
        inset-inline-start: 33.15ch !important;
        inset-inline-start: clamp(33.15ch, 30%, 45.5ch) !important;
        inset-inline-end: 0 !important;
    }

    .skinHeader-withfulldrawer {
        -webkit-margin-start: 33.15ch;
        margin-inline-start: 33.15ch;
        -webkit-margin-start: clamp(33.15ch, 30%, 45.5ch);
        margin-inline-start: clamp(33.15ch, 30%, 45.5ch);
    }

    @media all and (pointer: fine) {

        .skinBody-withFullDrawer .page, .skinBody-withFullDrawer .appfooter {
            left: 32ch !important;
            left: calc(32ch + env(safe-area-inset-left, 0)) !important;
            right: 0 !important;
            inset-inline-start: 32ch !important;
            inset-inline-start: calc(32ch + env(safe-area-inset-left, 0)) !important;
            inset-inline-end: 0 !important;
        }

        [dir="rtl"]:root .skinBody-withFullDrawer .page, [dir="rtl"]:root .appfooter {
            inset-inline-start: calc(32ch + env(safe-area-inset-right, 0)) !important;
        }

        .skinHeader-withfulldrawer {
            -webkit-margin-start: 32ch;
            margin-inline-start: 32ch;
            -webkit-margin-start: calc(32ch + env(safe-area-inset-left, 0));
            margin-inline-start: calc(32ch + env(safe-area-inset-left, 0));
        }

        [dir="rtl"]:root .skinHeader-withfulldrawer {
            -webkit-margin-start: calc(32ch + env(safe-area-inset-right, 0));
            margin-inline-start: calc(32ch + env(safe-area-inset-right, 0));
        }
    }

    .skinBody-withMiniDrawer .page, .skinBody-withMiniDrawer .appfooter {
        left: 10ch !important;
        right: 0 !important;
        inset-inline-start: 10ch !important;
        inset-inline-end: 0 !important;
    }

    .skinHeader-withminidrawer {
        -webkit-margin-start: 10ch;
        margin-inline-start: 10ch;
    }
}

.mouseIdle, .mouseIdle button, .mouseIdle select, .mouseIdle input, .mouseIdle textarea, .mouseIdle a, .mouseIdle label {
    cursor: none !important;
}

.hide, .mouseIdle-tv .hide-mouse-idle-tv:not(:focus) {
    display: none !important;
}

.page {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    contain: strict;
}

.page-windowScroll {
    /* Have to override because it breaks scrolling when dependant on window scroll */
    contain: style size !important;
    overflow: initial !important;
}

.page-windowScroll, .padded-top-page {
    padding-top: 6em !important;
    padding-top: var(--header-height) !important;
    padding-top: calc(var(--header-height) + var(--extra-padding-top)) !important;
}

.margin-top-page-listheader {
    padding-top: 0 !important;
    margin-top: 14.3em !important;
    margin-top: calc(var(--header-height) + var(--extra-padding-top) + 9em) !important;
}

.animatedView-fade {
    transition: opacity 400ms ease-out;
}

.animatedView.backgroundContainer {
    /* 11 is arbitrary, yes. but it needs to be higher than what's used by card:focus */
    z-index: 11;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.animatedView-top.backgroundContainer {
    z-index: 12;
}

.animatedView.backgroundContainer::-webkit-scrollbar {
    width: 0 !important;
    display: none;
}

.animatedView-in.animatedView-fade {
    opacity: 0;
}

.animatedView-out.animatedView-fade {
    opacity: 0;
}

/*
    Forms
    */
form, .readOnlyContent {
    max-width: 80ch;
}

.auto-center {
    -webkit-margin-start: auto;
    margin-inline-start: auto;
    -webkit-margin-end: auto;
    margin-inline-end: auto;
}

.skinBody-withDockedDrawer .auto-center {
    -webkit-margin-start: 0;
    margin-inline-start: 0;
    -webkit-margin-end: 0;
    margin-inline-end: 0;
}

.listTotalRecordCount {
    margin: 0 .75em;
}

.fieldDescription {
    -webkit-padding-start: .15em;
    padding-inline-start: .15em;
    margin-top: .15em;
    font-weight: normal;
    white-space: normal !important;
}

/* Until there's a better place for these */
.itemsViewSettingsContainer {
    -webkit-justify-content: center;
    justify-content: center;
    padding: 1em 0 1.75em !important;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    align-items: center;
    font-size: 88%;
    /* this is a workaround to make it smaller so that pressing the right arrow on an items list doesn't result in navigation moving up to this bar */
    max-width: 90vw;
    margin: 0 auto;
    container-type: inline-size;
    container-name: itemsviewsettingscontainer;
}

@supports not (container-type: inline-size) {
    @media not all and (min-width: 28em) {
        .listTotalRecordCount {
            display: none !important;
        }
    }
}


.itemsViewSettingsContainer-fixed {
    position: fixed;
    top: 6.25em;
    top: calc(var(--header-height) + var(--extra-padding-top) + 1em);
    left: 0;
    right: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 1;
}

/* dirty hack to detect support for column-gap in combination with flexbox, which is in Chrome 66+ and iOS 14.1+.
   support for @supports with a selector became available around the same time
*/
@supports selector(:hover) and (display: revert) and (column-gap: 1em) {

    .itemsViewSettingsContainer {
        -webkit-column-gap: 1.1ch;
        column-gap: 1.1ch;
        row-gap: 1em;
    }

        .itemsViewSettingsContainer button, .listTotalRecordCount {
            margin: 0;
        }
}

@media all and (min-width: 50em) {
    .listIconButton-autohide {
        display: none !important;
    }
}

@media not all and (min-width: 50em) {
    .listTextButton-autohide {
        display: none !important;
    }
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

button {
    -webkit-border-fit: border !important;
}

/* Need a better spot for this. used by directory picker and other areas */
.infoBanner {
    padding: 1em;
    border-radius: .42em;
    box-shadow: 0 0.06933em 0.06933em 0 rgba(0, 0, 0, 0.14), 0 0.13866em 0.06933em -0.06933em rgba(0, 0, 0, 0.12), 0 0.06933em 0.208em 0 rgba(0, 0, 0, 0.2);
}

/* Need a better spot for this. used by directory picker and other areas */
.warningBanner {
    padding: 1em;
    border-radius: .42em;
    font-weight: 500;
}

.warningBannerIcon {
    font-size: 1.6em;
    -webkit-margin-end: .2em;
    margin-inline-end: .2em;
}

.warningBannerText {
    vertical-align: middle;
}

[dir="rtl"] .autortl, .rtl-arabic .autortl-arabic {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.focusPreviewContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.focusPreviewTitleImg {
    height: 2em;
    max-width: 50vw;
    margin: 0 !important;
    border: 0 !important;
    /* These are needed to prevent distorted logos in at least iOS safari */
    object-fit: contain;
    object-position: left center;
    object-position: var(--logo-object-position);
}

.focusPreviewOverview {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.tab-scroller-withfocuspreview {
    margin-top: 50vh;
}

    .tab-scroller-withfocuspreview .padded-top-page {
        padding-top: 0 !important;
    }

    .tab-scroller-withfocuspreview .cardBox-bottompadded {
        /* increase this a little to prevent my media labels from partially showing */
        margin-bottom: 2.4em !important;
    }

    .tab-scroller-withfocuspreview .sectionTitleContainer {
        margin-top: 1.5em;
    }

/*
    Temporary hack until this ships in a safari update: https://bugs.webkit.org/show_bug.cgi?id=243601
*/
.imgLazyAppleHack img[loading="lazy"] {
    -webkit-clip-path: inset(.5px 1px .75px .5px);
    clip-path: inset(.5px 1px .75px .5px);
    border-radius: .4em;
}
