.backgroundContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    contain: layout style;
}

/* Links */
.ui-body-b a {
    color: #52B54B /*{b-link-color}*/;
    font-weight: 500;
}

    .ui-body-b a:visited {
        color: #52B54B /*{b-link-visited}*/;
    }

    .ui-body-b a:hover {
        color: #2E7D32 /*{b-link-hover}*/;
    }

    .ui-body-b a:active {
        color: #2E7D32 /*{b-link-active}*/;
    }

/* Remove IE mobile 300ms tap delay */
html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    /* Prevent white flickering */
    background-color: #242424;
    /* Normalize for different browsers */
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
    font-size: 14px;
}

h1 {
    font-family: -apple-system-headline, BlinkMacSystemFont, "Roboto", "Segoe UI", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
}

h2 {
    font-family: -apple-system-subheadline, BlinkMacSystemFont, "Roboto", "Segoe UI", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
}

body {
    overflow-y: scroll !important;
    /* This is needed to prevent a horizontal scrollbar while neon-animated-pages are animating. */
    overflow-x: hidden;
    /*Can't use this with safari or it causes some content to disappear*/
    /*-webkit-overflow-scrolling: touch;*/
    /* Remove the white default from jqm */
    background-color: transparent !important;
    /* Normalize for different browsers */
    margin: 0;
    padding: 0;
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

    body.autoScrollY {
        overflow-y: auto !important;
    }

.mainAnimatedPage {
    /* Have to override because it breaks scrolling when dependant on window scroll */
    contain: style !important;
}

/* Without this, no content will be displayed in mobile safari */
.pageContainer {
    overflow-x: visible !important;
    /* jqm often wants to assign a background color to this */
    background-color: transparent !important;
}

.bodyWithPopupOpen {
    overflow-y: hidden !important;
}

.textlink {
    text-decoration: none;
}

h1, h2, h3 {
    margin-top: 1em;
}

h1 {
    font-weight: normal !important;
    font-size: 24px;
    opacity: .7;
}

h2 {
    font-weight: normal;
}

h3 {
    font-weight: normal;
}

a, a:active, a:hover {
    text-decoration: none;
}

.libraryPage h1 a {
    color: #fff !important;
}

h1 a:hover {
    text-decoration: underline;
}

.ui-body-b a.accent {
    color: #52B54B !important;
}

.ui-body-a .paperList {
    background-color: #fff;
}

.ui-body-a [is="emby-select"] {
    border-color: #ccc !important;
}

.ui-body-a [is="emby-input"], .ui-body-a [is="emby-textarea"] {
    background: none;
    border-color: #ccc !important;
}

.ui-body-a .secondaryText {
    color: #ccc;
}

.ui-body-b .secondaryText {
    color: #aaa;
}

div[data-role='page'] {
    outline: none;
}

/**
 * Note: I have omitted any vendor-prefixes for clarity.
 * Adding them is left as an exercise for the reader.
 */
.headroom {
    transition: transform 180ms linear;
}

.headroom--pinned {
    transform: none;
}

.headroom--unpinned:not(.headroomDisabled) {
    transform: translateY(-100%);
}

.libraryViewNav.headroom--unpinned:not(.headroomDisabled) {
    transform: translateY(-210%);
}

.hide {
    display: none !important;
}

/*
    Header
    */
.header {
    padding: 20px 0 0 20px;
}

.imgLogoIcon {
    height: 40px;
    vertical-align: middle;
}

    .imgLogoIcon + span {
        margin-left: 10px;
    }

@media all and (max-height: 800px) {

    .header {
        display: none !important;
    }
}

.pageTitle {
    margin-top: 0;
    font-family: inherit;
}

.fieldDescription {
    padding-left: 2px;
    font-weight: normal;
    white-space: normal !important;
}

.warningFieldDescription {
    padding: 5px;
    border: 1px solid #f4c63f;
    background: #fff3a5;
    border-radius: 5px;
}

.fieldDescription + .fieldDescription {
    margin-top: 5px;
}

.background-theme-a .backgroundContainer {
    background-color: #f6f6f6;
}

.dialog.background-theme-a {
    background-color: #f0f0f0;
}

.sidebarLinks {
    margin-top: 1.5em;
    padding-bottom: 50px;
}

.sidebarLink {
    display: block;
    padding: .8em 20px .8em 0;
    text-decoration: none;
    color: #111 !important;
    font-weight: 500 !important;
    vertical-align: middle;
    font-size: 110%;
}

    .sidebarLink:hover {
        background: #f2f2f2;
    }

    .sidebarLink.selectedSidebarLink {
        background: #f2f2f2 !important;
    }

.sidebarLinkIcon {
    text-align: center;
    vertical-align: middle;
    margin-right: 1.2em;
}

    .sidebarLinkIcon + span {
        vertical-align: middle;
    }

.sidebarHeader {
    padding-left: 20px;
    margin: 15px 0 10px;
    color: #666;
    font-weight: 500;
}

.ui-content {
    border-width: 0;
    overflow: visible;
    overflow-x: hidden;
    padding: 1em;
}

.page > .ui-content, .pageWithAbsoluteTabs .pageTabContent, .absolutePageTabContent .itemsContainer {
    /* Need this so that the audio player doesn't cover content, but also for unveil lazy loading. */
    padding-bottom: 160px;
}

@media all and (min-width: 800px) {

    /*
    Forms
    */
    form, .readOnlyContent {
        max-width: 700px;
    }

    .header {
        padding-bottom: 15px;
    }
}

@media all and (min-width: 900px) {

    .page:not(.standalonePage) .header {
        padding-top: 0;
    }
}

.supporterPromotionContainer {
    margin: 0 0 2em;
}

@media all and (min-width: 1280px) {

    .supporterPromotionContainer {
        position: fixed;
        top: 120px;
        right: 0;
    }
}

.fullWidthContent .supporterPromotionContainer {
    position: static !important;
}

@media all and (min-width: 800px) {

    .supporterPromotionContainer {
        display: flex;
        flex-direction: row-reverse;
    }

    .supporterPromotion {
        text-align: center;
        padding: 0 2em;
    }

        .supporterPromotion button {
            padding-left: 2em;
            padding-right: 2em;
        }
}

.syncActivityForTarget {
    margin: 0 0 3em 0;
}

@media all and (min-width: 800px) {

    .syncActivityForTarget {
        max-width: 600px;
        margin: 0 3em 3em 0;
        display: inline-block;
        vertical-align: top;
        min-width: 400px;
    }
}

.imageDropZone {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    color: #bbb;
}

.ui-body-a .emby-collapsible-button {
    border-color: #ddd;
}

.ui-body-a .collapseContent {
    background-color: #fff;
}

.ui-body-a .inputLabelUnfocused, .ui-body-a .textareaLabel {
    color: #555;
}

.ui-body-a .inputLabelFocused, .ui-body-a .textareaLabelFocused, .ui-body-a .selectLabelFocused {
    color: green;
}

.ui-body-a .selectLabelUnfocused, .ui-body-a .paperListLabel, .ui-body-a .fieldDescription {
    color: #555;
}


.ui-body-a .visualCardBox-cardScalable, .ui-body-a .visualCardBox-cardFooter {
    background-color: #fff;
}

.ui-body-a .visualCardBox {
    border: 0;
    margin: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ui-body-a .cardFooter .cardText + .cardText {
    opacity: .8;
}

.ui-body-a .listItem .secondary {
    color: #737373;
}