footer {
    padding-bottom: 100px;
}

.pw-ad-scroll-container {
    background-color: var(--color-zinc-900) !important;
}

.ads-holder {
    overflow: hidden;
}

/* Ensure the bottom rail stays above all other mobile UI elements/overlays */
  #pw-oop-bottom_rail {
    z-index: 999 !important;
  }

/*FLEX SKINS START*/
#pw-oop-flex {
    z-index: 999 !important;
}

/*970px is the min width that screen size must be for backgrounds to show*/
@media only screen and (min-width: 970px) {

    body.flex-skin-active,
    body.flex-skin-docked {
        /*Make body transparent*/
        background-color: rgba(0, 0, 0, 0) !important;
        margin-top: 0 !important;
        /*For the new header*/
    }

    /*New header design*/
    body.flex-skin-active header,
    body.flex-skin-docked header {
        position: sticky !important;
    }

    body.flex-skin-docked header {
        top: 100px !important;
    }

    body.flex-skin-docked header [id^="headlessui-popover"] {
        top: 157px !important;
    }

    body.flex-skin-active header [id^="headlessui-popover"] {
        top: 405px !important;
    }

    body.flex-skin-active .nav-tab-wrapper,
    body.flex-skin-active .nav-tab-button {
        top: 350px !important;
    }

    body.flex-skin-active .nav-tab-wrapper {
        top: 406px !important;
    }

    body.flex-skin-docked .nav-tab-wrapper {
        top: 156px !important;
    }

    body.flex-skin-active #mainContent,
    body.flex-skin-docked #mainContent {
        max-width: 1348px !important;
        margin: 0 auto !important;
        background: #000;
    }

    body.flex-skin-active #mainContent>div.relative>div.relative.next-container.pb-20,
    body.flex-skin-docked #mainContent>div.relative>div.relative.next-container.pb-20,
    body.flex-skin-active .next-container,
    body.flex-skin-docked .next-container {
        max-width: 1348px !important;
        padding: 0 40px;
    }

    /*Make sure nav max height is 150px*/
    body.flex-skin-active [data-testid="ad-billboard-top"],
    body.flex-skin-docked [data-testid="ad-billboard-top"],
    body.flex-skin-active [data-testid="ad-billboard-bottom"],
    body.flex-skin-docked [data-testid="ad-billboard-bottom"] {
        min-width: unset !important;
        overflow: hidden;
        /*TEMPORARY: 970x250s bleed into the skin area. Once feature is complete to avoid this, we can remove this css*/
    }

    body.flex-skin-active footer,
    body.flex-skin-docked footer {
        background-color: #1d1d21;
    }

    body.flex-skin-active #mainContent>div.items-center.justify-center.gap-x-4.hidden,
    body.flex-skin-docked #mainContent>div.items-center.justify-center.gap-x-4.hidden,
    body.flex-skin-active .ads-top,
    body.flex-skin-docked .ads-top {
        display: none;
    }

    [aria-label="Breadcrumb navigation"] {
        margin-top: 20px;
    }
}

/*Breakpoint for smaller breakpoints with different nav*/
@media only screen and (max-width: 969px) {}

/*Example Breakpoint for mobile breakpoint (may fall into the above)*/
@media only screen and (max-width: 600px) {

    body.flex-skin-active [id^="headlessui-popover-panel-"] {
        top: 210px !important;
    }

    body.flex-skin-docked [id^="headlessui-popover-panel-"] {
        top: 125px !important;
    }

    body.flex-skin-docked header {
        top: 70px;
    }

    body.flex-skin-active .nav-mobile-menu {
        top: 275px !important;
    }

    body.flex-skin-docked .nav-mobile-menu {
        top: 120px !important;
    }

    body.flex-skin-docked #mobile-head.new-head,
    body.flex-skin-active #mobile-head.new-head {
        z-index: 10000 !important;
    }
}

/*FLEX SKINS END*/