/* Layout */

body > .page,
body > .view {
    margin-top: var(--header-height) !important;
}


    body > .view .emby-scroller > .scrollSlider.padded-top-page,
    body > .view.emby-scroller > .scrollSlider.padded-top-page {
        padding-top: 0.8rem !important;
    }


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

    html.withFullDrawer .backdropContainer, html.withFullDrawer .backgroundContainer {
        margin-inline-start: 33.15ch;
        margin-inline-start: clamp(33.15ch, 30%, 45.5ch);
    }


    @media all and (pointer: fine) {


        html.withFullDrawer .backdropContainer, html.withFullDrawer .backgroundContainer {
            margin-inline-start: 30ch !important;
            margin-inline-start: calc(30ch + env(safe-area-inset-left, 0)) !important;
        }

        html.withFullDrawer.rtl:root .backdropContainer, body:has(.mainDrawer.mainDrawer-mini) .backgroundContainer {
            margin-inline-start: calc(30ch + env(safe-area-inset-right, 0));
        }
    }

    body:has(.mainDrawer.mainDrawer-mini) .backdropContainer, body:has(.mainDrawer.mainDrawer-mini) .backgroundContainer {
        margin-inline-start: 10ch;
    }
}

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

    .page-withDockedDrawer .padded-left {
        padding-inline-start: 2.7rem;
    }

    .page-withDockedDrawer .padded-right {
        padding-inline-end: 2.7rem;
    }
}

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

    .page-withDockedDrawer .padded-left {
        padding-inline-start: 3rem;
    }

    .page-withDockedDrawer .padded-right {
        padding-inline-end: 3rem;
    }
}

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

    .page-withDockedDrawer .padded-right-withalphapicker {
        padding-inline-end: 3rem;
    }

    .page-withDockedDrawer .padded-right-withlist.padded-right-withalphapicker {
        padding-inline-end: 3rem;
    }
}


body > .view.margin-top-page-listheader {
    clip-path: margin-box !important;
    margin-top: 14.3em !important;
    margin-top: calc(var(--header-height) + 8.7em) !important;
}

.margin-top-page-listheader:not(:has(.alphaPicker:not(.hide))) .itemsContainer_header_fixed {
    margin-inline-end: 5px !important;
}

.margin-top-page-listheader:not(.view) {
    margin-top: 6em !important;
}


.itemsTab .itemsViewSettingsContainer-fixed {
    top: -1.2em;
}

.itemsTab .itemsContainer_header_fixed {
    top: 3em;
}

body.settings-view-active .page-withDockedDrawer .padded-right {
    padding-inline-end: 2.0rem;
}

form, .readOnlyContent {
    max-width: 120ch;
}

.headerMiddle {
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 0 auto;
}

.headerMiddle-withSectionTabs:not(.headerMiddle-tv) {
    margin-top: 0;
    /*     overflow: visible;
 */
}

.headerLeft, .headerRight, .headerMiddle {
    height: 3.4em;
}

@media not all and (min-width: 66em) {
    .headerMiddle-withSectionTabs:not(.headerMiddle-tv) {
        height: 3.4em;
    }
}


.headerRight {
    padding-inline-end: 0;
}

.headerLeft .headerMenuButton {
    order: -1;
}

.skinHeader.videoOsdHeader {
    right: 1.08em;
    inset-inline-start: 0;
    inset-inline-end: 1.08em;
}


.paper-icon-button-light.md-icon.headerSettingsButton {
    font-weight: 300;
    font-size: 190% !important;
    padding: .233em;
    font-variation-settings: "GRAD" -50;
    /* font-variation-settings: "OPSZ" 40; */
}

.verticalSection.verticalSection-cards.aboutSection {
    font-size: 100% !important;
}

/* .headerFullScreenButton, .headerExitButton {
    display: none;
}


html.isFullScreen .headerFullScreenButton, html.isFullScreen .headerExitButton {
    display: block;
}
 */
.topDetailsMain-graphic {
    text-shadow: none !important;
}


.infoBanner {
    padding: 0.5rem 1rem;
    border-radius: .3rem;
    box-shadow: none;
    border: solid 1px var(--line-background);
}

/* Need a better spot for this. used by directory picker and other areas */
.warningBanner {
    padding: 0.5rem 1rem;
    border-radius: .3rem;
    box-shadow: none;
    border: solid 1px var(--line-background);
    font-weight: 500;
}