: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;
    /* this is the height of headerLeft + 1.2em padding top + 1.2em padding bottom */
    --header-height: 5.527em;
    /* 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);
    --logo-object-position: left center;
}

/* 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.327em + max(1.2em, env(safe-area-inset-top, 0)));
    }
}

.rtl:root {
    --logo-object-position: right center;
}

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

:root, 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;
}

/* 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;
}

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

.hide {
    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.withTabs {
        container-type: inline-size;
        container-name: viewwithtabs;
    }

/* 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: 95%;
    margin: 0 auto;
    container-type: inline-size;
    container-name: itemsviewsettingscontainer;
}

.itemsViewSettingsContainer-align-start {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    margin: 0;
}

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

.itemsViewSettingsContainer-fixed-scrollx {
    top: 5.25em;
    top: var(--header-height);
    padding: 1em 0 !important;
}

.itemsContainer_header_fixed {
    left: 0;
    right: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 3.18em;
}

/* 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 !important;
    }
}

.padded-top {
    padding-top: 1em;
}

.padded-top-page {
    padding-top: 6em;
    padding-top: var(--header-height);
}

    .padded-top-page.verticalSections {
        padding-top: calc(.85em + var(--header-height));
    }

    .padded-top-page.horizontalSections {
        margin-top: calc(.85em + var(--header-height));
        padding-top: 0;
        container-type: size;
    }

.itemMainScrollSlider {
    padding-top: var(--header-height) !important;
}

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

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

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

.page.dialog {
    position: static;
    -webkit-flex-grow: 0;
    flex-grow: 0;
}

.listTotalRecordCount {
    margin: 0 .75em;
}

.fieldDescription {
    margin-top: .2em;
    font-weight: normal;
    white-space: normal !important;
}

.legendDescription {
    margin-top: 0;
}

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

/* Need a better spot for this. used by directory picker and other areas */
.infoBanner {
    margin-bottom: 2em;
    padding: 1em;
    border-radius: .42em;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.infoBanner-primaryText {
    margin: 0;
    font-weight: bold;
}

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

.infoBannerIconContainer {
    -webkit-margin-end: 1em;
    margin-inline-end: 1em;
}

.infoBannerIcon {
    font-size: 2em;
}

.rtl .autortl, .rtl-arabic .autortl-arabic {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

fieldset {
    contain: style;
    margin: 2em 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
}

.fieldset-fields {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.fieldset-fields-nested {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding: 0;
}

.fieldset-actions {
    margin-top: 1em;
}

.fieldsets {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.legendWithContent {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.legendActions {
    -webkit-margin-start: 1em;
    margin-inline-start: 1em;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 1rem;
}

.legend-incontainer {
    margin: 0;
}

/* 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) {
    .fieldsets {
        row-gap: 2em;
    }

    .fieldset-fields, .fieldset-fields-nested {
        row-gap: 1.6em;
    }

    .fieldset-fields-listitems {
        row-gap: 1em;
    }

    .fieldset-fields-fieldmargins {
        row-gap: 0;
    }

    .fieldset-field {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    fieldset, .fieldsets-item {
        margin: 0;
    }
}