.mw-cc-container {
    font-family: -apple-system, "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    -webkit-font-smoothing: antialiased;
    background: #f9f9f9;
}

.mw-cc-header {
    position: relative;
    overflow: hidden;

    /* Extend the header upward so we can paint over scroll region in Safari */
    margin-top: -100vh;
    padding-top: 100vh;

    /* Cover the 1px border set on mw-inner */
    margin-right: -1px;
}

.mw-rtl .mw-cc-header {
    /* Cover the 1px border set on mw-inner */
    margin-right: 0;
    margin-left: -1px;
}

.mw-cc-header div.mw-close {
    position: absolute;
    top: 100vh;
    cursor: pointer;
    outline: none;
}

.mw-cc-header.sticky div.mw-close {
    transform: translateY(var(--close-button-translate-value));
    will-change: transform;
}

.mw-cc-header div.mw-close {
    background-color: rgba(0, 0, 0, 0.5);
}

@supports (mask-image: url(images/symbols/square.and.arrow.up.svg)) or (-webkit-mask-image: url(images/symbols/square.and.arrow.up.svg)) {
    .mw-card .mw-cc-header div.mw-close .sc-symbol.xmark {
        background-color: rgb(255, 255, 255);
    }
}

@media screen and (prefers-color-scheme: dark) {
    .mw-cc-header,
    .mw-rtl .mw-cc-header {
        margin-left: 0;
        margin-right: 0;
    }

    .mw-cc-container {
        background: #242628;
    }
}

.mw-cc-hero-gradient {
    position: absolute;
    bottom: 0;
    height: 104px;
    width: 100%;
    transform: translateY(var(--hero-gradient-translate-value));
    will-change: transform;
}

/* Remove hairline right after snippet component */
.mw-cc-description-container + div.mw-cc-place-container:before {
    display: none;
}

.mw-cc-header.sticky {
    position: sticky;
    top: calc(-320px - (var(--header-title-height)) - 100vh); /* 90px (collapsed header height) - 410px (hero image height) - title height - 100vh (over scroll region) */
    z-index: 1;
}

.mw-cc-hero {
    position: relative;
    width: 100%;
    height: 410px;

    /* background-image and background color will be a linear gradient set by the component */
    background-repeat: no-repeat;

    pointer-events: none;
}

.mw-cc-container .mw-place-link {
    padding-bottom: 0;
}

.mw-cc-container .mw-place-link:before {
    display: none;
}

.mw-cc-hero scheduled-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 410px;
    background-position: bottom center;
}

.mw-cc-header .mw-cc-info-publisher {
    height: 40px;
}

.mw-cc-header.sticky .mw-cc-hero > scheduled-image {
    will-change: transform;
    transform: translateY(var(--hero-image-translate-value));
}

.mw-cc-hero-image-collapsed {
    /* IE11 has problem handling nested divs with opacity values; set the collapsed image container to display: none
       unless we know we want to display it. */
    display: none;

    opacity: 0;
    width: 100%;
    height: 100%;
}

.mw-cc-hero-image-collapsed scheduled-image {
    transition: none;
}

.mw-cc-header.sticky .mw-cc-hero-image-collapsed {
    display: block;
    will-change: opacity, transform;
    opacity: var(--hero-image-opacity-value);
    transform: translateY(var(--hero-image-translate-value));
}

.mw-cc-info {
    margin-top: -40px;
    width: 100%;
}

.go-to-publisher {
    cursor: pointer;
}

.go-to-publisher * {
    pointer-events: none;
}

.mw-cc-container .mw-cc-publisher {
    position: relative;
    padding-left: 16px;
    transform-origin: 16px bottom;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.25));
}

.mw-cc-container .mw-cc-publisher img {
    height: 40px;
}

.mw-cc-publisher .go-to-publisher {
    display: inline-block;
}

/* We are allowing the layout direction to be aligned with the text direction here,
* because the publisher logo from LTR content aren't necessarily ready to be put on a RTL layout.
* However, this approach is not recommended and should be avoided if possible.
*/
#mw-cc-info[dir="rtl"] .mw-cc-publisher {
    padding-right: 16px;
    padding-left: 0;
    transform-origin: calc(100% - 16px) bottom;
}

.mw-cc-header.sticky .mw-cc-publisher {
    will-change: transform;
    transform: translateY(var(--header-info-translate-value)) scale(var(--publisher-scale-factor));
}

.mw-cc-header-title {
    position: relative;

    margin: 0;
    padding: 0px 16px;
    color: white;
    font: -apple-system-headline;
    font-weight: 750;
    font-size: 1.648em; /* ~28px */
    line-height: 1.882rem; /* ~32px */
}

.mw-cc-header .mw-cc-header-title {
    text-shadow: 0px 1px 2px rgba(32, 32, 32, 0.2);
}

.mw-cc-header-title span.title-line {
    display: block;
}

.mw-cc-header.sticky .mw-cc-header-title span.title-line {
    /* Instead of toggle the visibility, toggle opacity & pointer-events to
       make sure we don't trigger a paint in Chrome. */
    will-change: opacity, transform;
    opacity: var(--header-title-line-opacity-value);
    pointer-events: var(--header-title-line-pointer-events-value);
    transform: translateY(var(--header-info-translate-value));
}

.mw-cc-header-title span.title-line-collapsed {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 16px 8px 16px;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    opacity: 0;
    pointer-events: none;
}

.mw-cc-header.sticky .mw-cc-header-title span.title-line-collapsed {
    /* Instead of toggle the visibility, toggle opacity & pointer-events to
       make sure we don't trigger a paint in Chrome. */
    will-change: opacity, transform;
    opacity: var(--header-title-line-collapsed-opacity-value);
    pointer-events: var(--header-title-line-collapsed-pointer-events-value);
    transform: translateY(var(--header-info-translate-value));
}

.mw-cc-container fixed-height-text {
    position: relative;
    max-height: calc(16px + 5.192em); /* Top padding + line-height * 4 */
}

.mw-cc-description {
    position: relative;
    padding: 16px 16px 0 16px;

    font-size: 1em;
    line-height: 1.298em;

    opacity: 90%;
}

.mw-cc-container .mw-cc-description-container {
    /* Cover the 1px border set on mw-inner */
    margin-right: -1px;
}

.mw-rtl .mw-cc-container .mw-cc-description-container {
    /* Cover the 1px border set on mw-inner */
    margin-right: 0;
    margin-left: -1px;
}

.mw-cc-container ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

@media screen and (prefers-color-scheme: dark) {
    .mw-cc-container .mw-cc-description-container,
    .mw-rtl .mw-cc-container .mw-cc-description-container {
        margin-left: 0;
        margin-right: 0;
    }
}

.mw-cc-container .mw-cc-description-container {
    color: #fff;
}

.mw-cc-description p {
    display: inline;
}

.mw-cc-description-container .mw-expand,
.mw-cc-description-container .mw-collapse {
    font-weight: 500;
}

.mw-cc-description-container .mw-expand {
    position: absolute;
    display: block; /* Since we have an absolute position this can be display:block even while measuring. */
    right: 0;
    bottom: 0;
    background: #fff;
    padding-right: 15px;
}

fixed-height-text.expandable .mw-cc-description .mw-collapse {
    display: inline-block;
    padding-left: 10px;
}

.mw-cc-description svg {
    width: 12px;
    height: 12px;
    display: inline-block;
    position: relative;
    margin-left: 5px;
    pointer-events: none;
}

.mw-cc-container .mw-cc-place-container {
    margin: 0 16px;
}

.mw-cc-place {
    display: block;
    color: inherit;
    text-decoration: inherit;
    cursor: default;
    position: relative;
    padding-top: 15px;
}

.mw-cc-place:last-of-type {
    padding-bottom: 15px;
}

.mw-cc-place * {
    pointer-events: none;
}

.mw-cc-place .mw-artwork-icon {
    height: 30px;
    width: 30px;
    margin-bottom: 3px;
}

.mw-cc-place .mw-cc-description {
    margin: 0;
    padding: 15px 0 0 0;
}

.mw-cc-place .mw-expand, .mw-cc-place .mw-cc-place-outer-link {
    pointer-events: auto;
}

.mw-cc-place-photo {
    position: relative;
    padding: 0;
    margin-bottom: 15px;
    height: 228px;

    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 16px 0;

    content-visibility: auto;
    contain-intrinsic-size: 228px;
}

.mw-cc-place-photo.failed {
    background-image: url(images/place-image-error.svg);
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: none;
}

.mw-cc-place-photo scheduled-image {
    width: 100%;
    height: 100%;
    /* https://bugs.webkit.org/show_bug.cgi?id=140535 */
    border-radius: 8px;
}

.mw-cc-place-photo .mw-cc-photo-attribution {
    position: absolute;
    right: 0;
    bottom: 0;

    border-radius: 8px 0;

    padding: 4px 6px;

    font-size: 0.647em; /* ~11px */
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.07px;

    /* Background color without the blur effect */
    background-color: rgba(0, 0, 0, 0.65);
}

.mw-rtl .mw-cc-place-photo .mw-cc-photo-attribution {
    left: 0;
    right: auto;
    border-radius: 0 8px;
}

/*
If it's supported, use a nice background blur effect.

The un-prefixed backdrop-filter slows down the scroll frame rate a lot for Chrome.
We therefore only set that style for full page scrolling (see below).
*/
@supports (-webkit-backdrop-filter: blur(10px)) {
    .mw-cc-place-photo .mw-cc-photo-attribution {
        background-color: rgba(0, 0, 0, 0.2);
        -webkit-backdrop-filter: blur(10px);
    }
}

.mw-cc-place-description {
    font-style: italic;
    padding: 5px 10px;
}

a.mw-cc-place-outer-link {
    display: block;
    padding: 15px 0;
    font-size: 0.88em;
    color: #3c7df6;
    text-decoration: none;
}

/* Dark Mode */
@media screen and (prefers-color-scheme: dark) {
    .mw-publisher-snippet .mw-cc-snippet-author-name {
        color: white;
    }

    .mw-cc-place-photo {
        box-shadow: none;
    }

    a.mw-cc-place-outer-link {
        color: #0a84ff;
    }

    /* Placeholder for snippet avatar image */
    .mw-cc-container .mw-cc-snippet-avatar {
        background-color: #242424
    }

    .mw-cc-container .mw-cc-description-container {
        /* Cover the 1px border set on mw-inner */
        margin-right: 0;
    }
}

/* Full page scrolling */
@media print, (max-width: 700px), (max-width: 900px) and (max-height: 500px) {

    .mw-cc-container footer.mw-place-footer {
        bottom: 1em;
    }

    .mw-cc-header {
        /* Cancel over scroll region */
        margin-top: 0;
        padding-top: 0;
    }

    .mw-cc-hero scheduled-image {
        /* Cancel over scroll region */
        top: 0;
    }

    /* On full page scrolling layout, the close button is absolutely positioned.  */
    .mw-cc-header div.mw-close {
        top: 0;
    }

    /*
    If it's supported, use a nice background blur effect.

    The prefixed backdrop-filter is enabled everywhere.
    The un-prefixed one is only enabled for full page scrolling (see above.)
    */
    @supports (backdrop-filter: blur(10px)) {
        .mw-cc-place-photo .mw-cc-photo-attribution {
            background-color: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }
    }
}

/* Full page scrolling or print, no margins */
@media print, (max-width: 500px) {

    #shell-custom-header .mw-shell-custom-header {
        height: 90px;
        margin-top: 0;
        opacity: var(--custom-header-opacity-value, 0);
        will-change: opacity;
        padding-top: 4px;
        box-sizing: border-box;
    }

    #shell-custom-header .mw-shell-custom-header .mw-cc-publisher {
        padding-left: 16px;
    }

    #shell-custom-header .mw-shell-custom-header .go-to-publisher {
        pointer-events: none;
        display: inline-block;
    }

    #shell-custom-header .mw-shell-custom-header .mw-cc-header-title {
        font-size: 1.412em;
    }

    #shell-custom-header .mw-shell-custom-header .mw-cc-header-title .title-line {
        display: none;
    }

    #shell-custom-header .mw-shell-custom-header .mw-cc-header-title .title-line-collapsed,
    #shell-custom-header .mw-shell-custom-header .mw-cc-info-publisher {
        opacity: var(--custom-header-content-opacity-value, 0);
        transition: opacity 0.3s ease-in-out;
        will-change: opacity;
    }

    .mw-card:not(.hidden)[module-type="guide"] {
        overflow: unset;
        /* mw-cc-hero height divided by 4 */
        /* To initially clip 25% of the image from top and 25% from the bottom */
        /* +1px in the default translate values to fix a small line glitch */
        --hero-clip-path-value: calc(410px / 4);
        --hero-translate-value: calc(410px / -4);
        --hero-gradient-translate-value: calc((410px / -4) + 1px);
    }

    .mw-card:not(.hidden) .mw-cc-container:not(.desktop),
    .mw-card:not(.hidden) .mw-cc-container:not(.desktop) .mw-cc-header {
        border-radius: 12px 12px 0 0;
    }

    .mw-cc-container:not(.desktop) .mw-cc-header {
        overflow: unset;
    }

    .mw-cc-container:not(.desktop) .mw-cc-header,
    .mw-cc-container:not(.desktop) .mw-cc-description-container {
        margin: 0;
    }

    .mw-cc-container:not(.desktop) .mw-cc-header .mw-cc-info {
        margin-top: 0;
        height: 205px;
        position: relative;
    }

    .mw-cc-container:not(.desktop) .mw-cc-header .mw-cc-info .mw-cc-info-content {
        position: absolute;
        bottom: 0;
        left: 0;
        max-height: 100%;
    }

    .mw-cc-container:not(.desktop) .mw-cc-header.sticky .title-line,
    .mw-cc-container:not(.desktop) .mw-cc-header.sticky .mw-cc-publisher {
        transform: unset;
    }

    .mw-cc-container:not(.desktop) .mw-cc-header.sticky .title-line-collapsed {
        transform: unset;
        opacity: 0;
    }

    .mw-cc-container:not(.desktop) .mw-cc-hero {
        position: absolute;
        transform: translateY(var(--hero-translate-value));
        clip-path: inset(var(--hero-clip-path-value) 0px round 12px 12px 0 0);
        will-change: transform;
    }

    .mw-cc-container:not(.desktop) .mw-cc-header.sticky .mw-cc-hero-image-collapsed {
        opacity: 0;
    }
}

.mw-cc-header.force-collapsed {
    height: 90px;
}

.mw-cc-header.force-collapsed .mw-cc-publisher {
    transform: scale(0.8);
}

.mw-cc-header.force-collapsed .mw-cc-info {
    margin-top: 0;
}

.mw-cc-header.force-collapsed .mw-cc-hero-image-collapsed {
    display: block;
    opacity: 1;
}
.mw-cc-header.force-collapsed .mw-cc-hero scheduled-image {
    display: none;
}

.mw-cc-header.force-collapsed .mw-cc-header-title {
    font-size: 1.648em; /* ~28px */
}
.mw-cc-header.force-collapsed .mw-cc-header-title span.title-line {
    display: none;
}

.mw-cc-header.force-collapsed .mw-cc-info {
    position: absolute;
    top: 8px;
}

.mw-cc-header.force-collapsed .mw-cc-header-title span.title-line-collapsed {
    position: relative;
    padding: 0;
    opacity: 1;
    pointer-events: auto;
}


/* Guides Platter container */
.sc-guides-platter-container {
    margin: 16px;
    border-radius: 8px;
    background: #fff;
}

.sc-guides-platter-container .sc-guides-platter {
    text-decoration: inherit;
    color: inherit;
}

.sc-guides-platter-container .sc-guides-platter * {
    pointer-events: none;
}

.sc-guides-platter-content {
    display: block;
    cursor: default;
    position: relative;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
}

.sc-guides-photo-cell {
    position: relative;
    padding: 0;
    margin-bottom: 8px;
    border-radius: 8px 8px 0 0;
}

.sc-guides-photo-cell.failed {
    background-image: url(images/place-image-error.svg);
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: none;
}

.sc-guides-photo-cell scheduled-image {
    width: 100%;
    height: 228px;
    border-radius: 8px 8px 0 0;

    content-visibility: auto;
    contain-intrinsic-size: 228px;
}

.sc-guides-photo-cell .mw-cc-photo-attribution {
    position: absolute;
    right: 0;
    bottom: 0;

    border-radius: 8px 0 0 0;

    padding: 4px 6px;

    font-size: 0.647em; /* ~11px */
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.07px;

    /* Background color without the blur effect */
    background-color: rgba(0, 0, 0, 0.65);
}

.mw-rtl .sc-guides-photo-cell .mw-cc-photo-attribution {
    left: 0;
    right: auto;
    border-radius: 0 8px 0 0;
}

.sc-guides-platter .sc-guides-platter-content .mw-artwork-icon {
    height: 36px;
    width: 36px;
    position: relative;
    top: 0px;

    content-visibility: auto;
    contain-intrinsic-size: 36px;
}

.sc-guides-platter .sc-guides-photo-cell + .sc-guides-platter-content .mw-artwork-icon {
    position: absolute;
    top: -28px;
    left: 14px;
    border: 2px solid #fff;
    background-color: #fff;
    border-radius: 50%;
}

.mw-rtl .sc-guides-platter-content .mw-artwork-icon {
    right: 14px;
    left: auto;
}

.sc-guides-summary-cell {
    margin: 0;
}

.sc-guides-description-cell {
    margin: 0;
    font-size: 1em;
    line-height: 1.298em;
    opacity: 90%;
}

.sc-guides-description-cell p {
    margin-bottom: 0;
}
 
.sc-guides-link-cell {
    display: block;
    padding: 0 16px 16px 16px;
    font-size: .88em;
    color: #3c7df6;
    text-decoration: none;
}

/* Dark Mode */
@media screen and (prefers-color-scheme: dark) {

    .sc-guides-platter-container,
    .sc-guides-platter-content {
        color: #fff;
        background: #2c2b2d;
    }
        
    .sc-guides-photo-cell scheduled-image {
        box-shadow: none;
    }

    .sc-guides-platter .sc-guides-photo-cell + .sc-guides-platter-content .mw-artwork-icon {
        border-color: #2c2b2d;
        background-color: #2c2b2d;
    }

    a.sc-guides-link-cell{
        color: #0a84ff;
    }
}

.mw-cc-snippet {
    padding: 16px;

    line-height: 17px;
    text-decoration: none;

    position: relative;
    display: flex;
    align-items: center;
}


.mw-cc-snippet {
    color: white;
}

.mw-cc-snippet-avatar {
    width: 30px;
    height: 30px;
    margin-right: 10px;

    background-size: cover;
    background-repeat: no-repeat;
    background-color: #e2e4e2;
    background-position: center center;
    float: left;
    border-radius: 50%;
    overflow: hidden;
}

.mw-cc-snippet-avatar img {
    max-width: 30px;
    max-height: 30px;
}

/**
 * Inline background-image should not load before the script
 */
body:not(.mw-script-ready) .mw-cc-snippet-avatar {
    background-image: none !important;
}

.mw-cc-description-container .mw-cc-snippet-author-name {
    font-size: 0.882em;
    font-weight: 500;
    opacity: 90%;
}

.mw-cc-description-container .mw-cc-snippet-info {
    opacity: 0.5;
    line-height: 1.468em;
}

.mw-cc-snippet.mw-publisher-snippet {
    color: rgb(30, 30, 30);
}


.mw-cc-snippet-info.mw-publisher-info {
    color: rgb(160, 160, 160);
}

/* FIXME: rdar://70063442 (Remove display: inline-block in src/js/components/component-group.css) */
.mw-cc-snippet-info div {
    display: inline;
}

.mw-cc-snippet-info div:last-of-type:before {
    content: "\00b7";
    padding: 5px;
}

.mw-rtl .mw-cc-snippet-avatar {
    margin-right: 0;
    margin-left: 10px;
    float: right;
}

/* Dark Mode */
@media screen and (prefers-color-scheme: dark) {
    .mw-cc-snippet.mw-publisher-snippet {
        color: white;
    }

    /* Placeholder for snippet avatar image */
    .mw-cc-snippet-avatar {
        background-color: #242424
    }
}


/*
    FIXME: <rdar://problem/71052315> Make PlaceSummary a generic component
    This component shouldn't know about containing components, but it should
    have the same styling as the CuratedCollectionSnippet. Both of these
    components should ultimately converge as PlaceSummary components, where the
    shared styles should be contained.
    In the meantime, referencing the containing .mw-cc-container to override
    the default padding for the .mw-cc-snippet
*/
.mw-cc-container .mw-publisher-snippet.mw-cc-snippet {
    padding: 15px 16px 15px 16px;

    display: flex;
    align-items: center;
}

.mw-publisher-snippet {
    display: block;
    text-decoration: none;
}

.mw-publisher-snippet:before {
    position: absolute;
    left: 14px;
    top: 0;
    width: calc(100% - 14px);
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    content: "";
}

.mw-rtl .mw-publisher-snippet:before {
    left: auto;
    right: 14px;
}

.mw-publisher-info {
    font-size: .882em;
    line-height: 1.468em;
}

/* Dark Mode */
@media screen and (prefers-color-scheme: dark) {
    .mw-publisher-snippet:before {
        background: #4c4c4c;
    }
}

@media (-webkit-min-device-pixel-ratio: 2) and (prefers-color-scheme: dark) {
    .mw-publisher-snippet:before {
        background: linear-gradient(transparent 0%, transparent 50%, rgb(76, 76, 76) 50%, rgb(76, 76, 76) 100%);
    }
}

@media (min-resolution: 2dppx) and (prefers-color-scheme: dark) {
    .mw-publisher-snippet:before {
        background: linear-gradient(transparent 0%, transparent 50%, rgb(76, 76, 76) 50%, rgb(76, 76, 76) 100%);
    }
}

.mw-media-integration {
    width: calc(100% - 32px);
    margin: 16px;
    display: block;
    cursor: pointer;
}

.mw-media-platter {
    width: calc(100% - 32px);
    padding: 16px;
    display: block;
    text-decoration: none;
    color: #000;
    background: #fff;
    border-radius: 10px;
    overflow: auto;
}

.mw-media-integration .mw-swoosh {
    font-size: 0.882em;
    font-weight: 500;
    color: #8e8e93;
}

.mw-media-integration .mw-media-content {
    float: left;
    width: 75%;
}

.mw-rtl .mw-media-integration .mw-media-content {
    float: right;
}

.mw-media-integration .mw-headline {
    font-weight: 600;
    line-height: 1.295rem; /* ~22px */
}

.mw-media-integration .mw-subheadline {
    font-size: 0.882em;
    color: #8e8e93;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.177rem; /* ~20px */
}

.mw-media-integration .mw-cta {
    margin-top: 6px;
    font-size: 0.882em;
    line-height: 1.177rem; /* ~20px */
    color: #3c7df6;
}

.mw-media-integration .mw-artwork {
    height: 64px;
    width: 64px;
    float: right;
    -webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04)) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.08));
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04)) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.08));
}

.mw-rtl .mw-media-integration .mw-artwork {
    float: left;
}

.mw-media-integration .mw-artwork scheduled-image {
    width: 64px;
    height: 64px;
    border-radius: 8px;
}

.mw-media-integration .mw-popup-menu {
    margin-top: 8px;
    width: 100%;
}

.mw-media-integration .mw-popup-menu .mw-controls {
    width: 100%;
}

.mw-amp-logo {
    height: 0.7058rem;  /* ~12px */
    min-height: 12px; /* We shouldn't go below even for small font sizes. */
    width: 100%;
    margin-bottom: 6px;
    background-repeat: no-repeat;
}

.mw-amp-logo.amp-music {
    background-image:  url(images/amp/music.svg);
    max-width: 56px;
}

.mw-amp-logo.amp-podcasts {
    background-image: url(images/amp/podcasts.svg);
    max-width: 75px;
}

.mw-amp-logo.amp-books {
    background-image: url(images/amp/books.svg);
    max-width: 56px;
}

.mw-amp-logo.amp-fitness {
    background-image: url(images/amp/fitness.svg);
    max-width: 75px;
}

.mw-amp-logo.amp-app {
    /* The App Store logo should be 2px closer to the text content, since it
       doesn't have an icon.
    */
    margin-bottom:  4px;
    background-image: url(images/amp/app.svg);
    height: 14px;
    max-width: 67.67px;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.app-mask scheduled-image {
    border-radius: unset;
    -webkit-mask: url(images/amp/app-icon-mask.svg) center/100% 100% no-repeat;
    mask: url(images/amp/app-icon-mask.svg) center/100% 100% no-repeat;
}

@supports (mask-image: url(images/amp/music.svg)) or
    (-webkit-mask-image: url(images/amp/music.svg)) {
    .mw-amp-logo {
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    .mw-amp-logo.amp-music {
        background-image: none;
        background-color: #FA233B;
        -webkit-mask-image: url(images/amp/music.svg);
        mask-image: url(images/amp/music.svg);
    }

    .mw-amp-logo.amp-podcasts {
        background-image: none;
        background-color: #7224D8;
        -webkit-mask-image: url(images/amp/podcasts.svg);
        mask-image: url(images/amp/podcasts.svg);
    }

    .mw-amp-logo.amp-books {
        background-image: none;
        background-color: #000000;
        -webkit-mask-image: url(images/amp/books.svg);
        mask-image: url(images/amp/books.svg);
    }

    .mw-amp-logo.amp-fitness {
        background-image: none;
        background-color: #000000;
        -webkit-mask-image: url(images/amp/fitness.svg);
        mask-image: url(images/amp/fitness.svg);
    }

    .mw-amp-logo.amp-app {
        background-image: none;
        background-color: #007AFF;
        -webkit-mask-image: url(images/amp/app.svg);
        mask-image: url(images/amp/app.svg);
    }

    @media screen and (prefers-color-scheme: dark) {
        .mw-amp-logo.amp-music {
            background-color: #FA2D48;
        }

        .mw-amp-logo.amp-podcasts {
            background-color: #9C5AF2;
        }

        .mw-amp-logo.amp-books {
            background-color: #FFFFFF;
        }

        .mw-amp-logo.amp-fitness {
            background-color: #A5FF00;
        }

        .mw-amp-logo.amp-app {
            background-color: #0A84FF;
        }
    }
}

@media screen and (prefers-color-scheme: dark) {
    .mw-media-platter {
        color: #fff;
        background: #2c2b2d;
    }

    .mw-media-integration .mw-cta {
        color: #0a84ff;
    }

    .mw-media-integration .mw-swoosh,
    .mw-media-integration .mw-subheadline {
        color: rgba(235, 235, 245, 0.6);
    }
}

.mw-guides-actions-container {
    display: flex;
    margin: 0 16px;
    padding-top: 16px;
}

.mw-guides-actions-container .mw-link-item {
    display: block;
    flex: 1 1 0;

    height: 3.18rem;
    border-radius: 8px;
    margin-right: 11px;

    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
    text-decoration: none;
    text-align: center;
    overflow: hidden;
}

.mw-guides-actions-container .mw-link-item.mw-action-share * {
    pointer-events: none;
}

.mw-guides-actions-container .mw-link-item.mw-action-share {
    cursor: pointer;
}

.mw-rtl .mw-guides-actions-container .mw-link-item {
    margin-left: 11px;
    margin-right: unset;
}

.mw-guides-actions-container .mw-link-item:last-child {
    margin-right: 0;
}

.mw-rtl .mw-guides-actions-container .mw-link-item:last-child {
    margin-left: 0;
}

.mw-guides-actions-container .mw-link-item:active,
.mw-guides-actions-container .mw-link-item:hover {
    text-decoration: none;
}

.mw-guides-actions-container .mw-link-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.mw-guides-actions-container .mw-link-item:active {
    background-color: rgba(255, 255, 255, 0.2);
}

.mw-guides-actions-container .sc-icon {
    display: block;
    margin: 4px auto 4px auto;
    padding: 2px;
    width: 1.295em;
    height: 1.295em;
}

/* Coloring symbols is only supported when mask-image is supported. */
@supports (mask-image: url(images/symbols/phone.svg)) or (-webkit-mask-image: url(images/symbols/phone.svg)) {
    .mw-guides-actions-container .sc-symbol {
        background-color: #fff;
    }
}

.mw-guides-actions-container .mw-link-text {
    margin: 0 8px 0px 8px;
}

.mw-guides-actions-container .mw-link-title {
    font-size: 0.7em;
    line-height: 1.34;
    text-align: center;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


.mw-publisher-container {
    position: relative;
    height: 100%;
    -ms-overflow-x: hidden; /* Overcoming an IE bug where the publisher-container is horizontally scrollable */
}

.mw-publisher-header {
    position: relative;
    height: 127px;

    /* Extend the header upward so we can paint over scroll region in Safari */
    margin-top: -100vh;
    padding-top: 100vh;

    background: rgb(255, 255, 255);
}

.mw-publisher-header.sticky {
    position: sticky;
    top: calc(-60px - 100vh);
    z-index: 1;
}

.mw-publisher-header.sticky:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.15);

    content: "";
    opacity: var(--publisher-header-border-opacity);
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .mw-publisher-header.sticky:after {
        background: linear-gradient(transparent 0%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 100%);
    }
}

@media (min-resolution: 2dppx) {
    .mw-publisher-header.sticky:after {
        background: linear-gradient(transparent 0%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 100%);
    }
}

.mw-publisher-logo {
    position: absolute;
    /* Position the logo with the extended header; 50vh + 50% of the total original height (132 / 2) */
    top: calc( 100vh + 66px );
    left: 50%;
    transform: translate(-50%, -50%);
}

.mw-publisher-logo {
    max-height: 127px; /* do not exceed the .mw-publisher-header height */
}

.mw-publisher-logo img {
    max-width: 270px;
    max-height: 127px; /* do not exceed the .mw-publisher-header height */
}

.mw-publisher-header.sticky > .mw-publisher-logo {
    will-change: transform;
    transform: translate(-50%,-50%) translateY(var(--publisher-logo-translate-value)) scale(var(--publisher-logo-scale-factor));
}

.mw-publisher-filters {
    margin: 5px 16px 0 16px;
    text-align: center;
}

.mw-publisher-filters .sc-arrow-buttons button {
    top: calc(50% - 0.5em);
}

/* On non-touch platforms we clip the content to make the arrows more visible. */
.mw-publisher-filters horizontal-pages:not(.use-touch) .mw-scrollable {
    -webkit-clip-path: inset(0 16px round 10px);
    clip-path: inset(0 16px round 10px)
}

.mw-publisher-container .mw-publisher-content {
    padding: 0 16px;
}

.mw-cc-hero .mw-cc-block-gradient {
    height: 66%;
    width: 100%;
    position: absolute;
    bottom: 0;
    border-radius: 10px; /* Match border radius of mw-cc-block */
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45) 50%);
}

.mw-publisher-content {
    display: flex;
    flex-wrap: wrap;

    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.mw-publisher-content.single-brick {
    /* Centers the brick */
    text-align: center;
}

.mw-publisher-content .mw-brick {
    text-align: left;
}

.mw-rtl .mw-publisher-content .mw-brick {
    text-align: right;
}

.mw-publisher-container .mw-brick {
    flex: 1;

    max-width: 166px;
    min-width: 156px;
    height: 211px;
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
    float: none;

    content-visibility: auto;
    contain-intrinsic-size: 211px;
}

.mw-publisher-container .mw-brick:nth-child(odd),
.mw-rtl .mw-publisher-container .mw-brick:nth-child(even) {
    margin: 0 5px 10px 0;
}

.mw-publisher-container .mw-brick:nth-child(even),
.mw-rtl .mw-publisher-container .mw-brick:nth-child(odd) {
    margin: 0 0 10px 5px;
}

.mw-publisher-container .mw-brick:only-child {
    width: 293px;
    height: 151px;
    max-width: none;
    margin: 0;
}

.mw-publisher-container .mw-brick .mw-brick-title {
    font-size: 1.2em;
}

/* Inner scrolling with compact footer */
@media screen and (min-width: 701px) and (max-width: 800px) {
    /* Full width bricks, one brick per line */
    .mw-publisher-container .mw-brick {
        width: 288px;
        height: 151px;
        max-width: none;
        flex: none;
    }

    .mw-publisher-container .mw-publisher-content .mw-brick:nth-child(n),
    .mw-rtl .mw-publisher-container .mw-publisher-content .mw-brick:nth-child(n) {
        margin: 0 0 10px 0;
    }
}

/* Full page scrolling */
@media print, (max-width: 700px), (max-width: 900px) and (max-height: 500px) {
    .mw-publisher-header {
        /* Cancel over scroll region */
        margin-top: 0;
        padding-top: 0;
    }

    .mw-publisher-logo {
        top: 50%;
    }

    .mw-publisher-content {
        display: block;
        text-align: center;
    }

    .mw-publisher-container .mw-brick {
        width: 192px;
        height: 244px;
        max-width: none;
        flex: none;
    }

    .mw-publisher-container .mw-brick:only-child {
        width: 343px;
        height: 193px;
    }

    .mw-publisher-container .mw-publisher-content .mw-brick:nth-child(n),
    .mw-rtl .mw-publisher-container .mw-publisher-content .mw-brick:nth-child(n) {
        margin: 0 5px 10px 5px;
    }
}

/*  Full page scrolling
    Mobile header styles
*/
@media screen and (max-width: 500px) {
    
    .mw-publisher-header.sticky:after {
        opacity: 0;
    }

    .mw-publisher-logo {
        top: 50%;
        width: 100%;
        will-change: transform;
        transform: translate(-50%,-50%) translateY(var(--publisher-logo-translate-value, 0)) scale(var(--publisher-logo-scale-factor, 1));
        opacity: var(--publisher-logo-opacity-value, 1);
    }

    .mw-publisher-logo img {
        width: 65%;
        transform: translateX(calc((100vw - 100%) / 2));
    }

    .mw-rtl .mw-publisher-logo img {
        transform: translateX(calc((-100vw + 100%) / 2));
    }

    #shell-custom-header .mw-shell-custom-header.mw-publisher-header {
        opacity: var(--custom-header-content-opacity-value, 0);
        height: auto;
        padding: 0;
        background: white;
    }

    #shell-custom-header .mw-shell-custom-header.mw-publisher-header:after {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 0.15);
    
        content: "";
        opacity: var(--publisher-header-border-opacity);
    }

    #shell-custom-header .mw-shell-custom-header .mw-publisher-logo {
        transform: translate(0, 0) scale(0.75);
        top: unset;
        left: unset;
        position: unset;
        display: block;
        max-height: unset;
        position: none;
    }
}

/*  Full page scrolling
    At this screen width, only one brick can fit onto a line.
    Maintain landscape photo dimensions
 */
@media screen and (max-width: 435px) {
    .mw-publisher-container .mw-brick,
    .mw-publisher-container .mw-brick:only-child {
        width: 343px;
        height: 180px;
    }

    .mw-publisher-container .mw-brick:nth-child(n),
    .mw-rtl .mw-publisher-container .mw-brick:nth-child(n) {
        margin: 0 0 10px 0;
    }
}

/* Full page scrolling, scaled down brick */
@media screen and (max-width: 375px) {
    .mw-publisher-container .mw-brick,
    .mw-publisher-container .mw-brick:only-child {
        width: 288px;
        height: 151px;
    }
}

/* Dark Mode */
@media screen and (prefers-color-scheme: dark) {
    .mw-publisher-header {
        background: rgb(51, 51, 51);
    }

    .mw-publisher-header.sticky:after {
        background: rgb(76, 76, 76);
    }

    #shell-custom-header .mw-shell-custom-header.mw-publisher-header {
        background: rgb(51, 51, 51);
    }

    #shell-custom-header .mw-shell-custom-header.mw-publisher-header.sticky:after {
        background: rgb(76, 76, 76);
    }
}

@media (-webkit-min-device-pixel-ratio: 2) and (prefers-color-scheme: dark) {
    .mw-publisher-header.sticky:after {
        background: linear-gradient(transparent 0%, transparent 50%, rgb(76, 76, 76) 50%, rgb(76, 76, 76) 100%);
    }
}

@media (min-resolution: 2dppx) and (prefers-color-scheme: dark) {
    .mw-publisher-header.sticky:after {
        background: linear-gradient(transparent 0%, transparent 50%, rgb(76, 76, 76) 50%, rgb(76, 76, 76) 100%);
    }
}

.mw-publisher-container  .mw-publisher-content a:focus-visible {
    box-shadow: 0 0 0 2.5px #007cff;
    outline: 0;
}

.mw-publisher-container .sc-arrow-buttons button:focus-visible {
    outline: 0;
    box-shadow: none;
}

.mw-publisher-container .sc-arrow-buttons button:focus-visible > .sc-symbol {
    background-color: #0088fa;
}