/* Copyright © 2016-2022 Apple Inc. All rights reserved. */

/* Acknowledgments
 * Portions of this Apple Software may utilize the following copyrighted material,
 * the use of which is hereby acknowledged.
 * ================================================================================
 * Jason Miller ( preact )
 * ================================================================================
 * Copyright (c) 2015-present Jason Miller
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 * ================================================================================
 * Gabriel Llamas ( bcp47 )
 * ================================================================================
 * Copyright (c) 2015 Gabriel Llamas
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 */

/* These base styles are the same as placecard.css */
html,
body {
    margin: 0;
    padding: 0;

    font-size: 17px;

    /* On iOS, the -apple-system font-family might override the base font-size
       for accessibility. So it needs to be below the base size definition. */
    font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Brand */
.mw-brand {
    width: auto;
    height: 2.588em; /* ~44px */
    background-repeat: no-repeat;

    /* The position and size matches the logo placement within the SVG canvas */
    background-position: left 0.05em;
    background-size: auto 2.05em;
}

/* This is sad and repetitive but this is the only way to make sure the logo
   shows up even without JavaScript (and no, CSS variables don't work within url().) */
.mw-brand:lang(ar-SA) { background-image: url(images/apple-maps-ar-SA.svg); }
.mw-brand:lang(ca-ES) { background-image: url(images/apple-maps-ca-ES.svg); }
.mw-brand:lang(cs-CZ) { background-image: url(images/apple-maps-cs-CZ.svg); }
.mw-brand:lang(da-DK) { background-image: url(images/apple-maps-da-DK.svg); }
.mw-brand:lang(de-DE) { background-image: url(images/apple-maps-de-DE.svg); }
.mw-brand:lang(el-GR) { background-image: url(images/apple-maps-el-GR.svg); }
.mw-brand:lang(en-AU) { background-image: url(images/apple-maps-en-AU.svg); }
.mw-brand:lang(en-GB) { background-image: url(images/apple-maps-en-GB.svg); }
.mw-brand:lang(en-US) { background-image: url(images/apple-maps-en-US.svg); }
.mw-brand:lang(en-ZA) { background-image: url(images/apple-maps-en-ZA.svg); }
.mw-brand:lang(es-ES) { background-image: url(images/apple-maps-es-ES.svg); }
.mw-brand:lang(es-MX) { background-image: url(images/apple-maps-es-MX.svg); }
.mw-brand:lang(fi-FI) { background-image: url(images/apple-maps-fi-FI.svg); }
.mw-brand:lang(fr-CA) { background-image: url(images/apple-maps-fr-CA.svg); }
.mw-brand:lang(fr-FR) { background-image: url(images/apple-maps-fr-FR.svg); }
.mw-brand:lang(he-IL) { background-image: url(images/apple-maps-he-IL.svg); }
.mw-brand:lang(hi-IN) { background-image: url(images/apple-maps-hi-IN.svg); }
.mw-brand:lang(hr-HR) { background-image: url(images/apple-maps-hr-HR.svg); }
.mw-brand:lang(hu-HU) { background-image: url(images/apple-maps-hu-HU.svg); }
.mw-brand:lang(id-ID) { background-image: url(images/apple-maps-id-ID.svg); }
.mw-brand:lang(it-IT) { background-image: url(images/apple-maps-it-IT.svg); }
.mw-brand:lang(ja-JP) { background-image: url(images/apple-maps-ja-JP.svg); }
.mw-brand:lang(ko-KR) { background-image: url(images/apple-maps-ko-KR.svg); }
.mw-brand:lang(ms-MY) { background-image: url(images/apple-maps-ms-MY.svg); }
.mw-brand:lang(nb-NO) { background-image: url(images/apple-maps-nb-NO.svg); }
.mw-brand:lang(nl-NL) { background-image: url(images/apple-maps-nl-NL.svg); }
.mw-brand:lang(pl-PL) { background-image: url(images/apple-maps-pl-PL.svg); }
.mw-brand:lang(pt-BR) { background-image: url(images/apple-maps-pt-BR.svg); }
.mw-brand:lang(pt-PT) { background-image: url(images/apple-maps-pt-PT.svg); }
.mw-brand:lang(ro-RO) { background-image: url(images/apple-maps-ro-RO.svg); }
.mw-brand:lang(ru-RU) { background-image: url(images/apple-maps-ru-RU.svg); }
.mw-brand:lang(sk-SK) { background-image: url(images/apple-maps-sk-SK.svg); }
.mw-brand:lang(sl-SI) { background-image: url(images/apple-maps-sl-SI.svg); }
.mw-brand:lang(sv-SE) { background-image: url(images/apple-maps-sv-SE.svg); }
.mw-brand:lang(th-TH) { background-image: url(images/apple-maps-th-TH.svg); }
.mw-brand:lang(tr-TR) { background-image: url(images/apple-maps-tr-TR.svg); }
.mw-brand:lang(uk-UA) { background-image: url(images/apple-maps-uk-UA.svg); }
.mw-brand:lang(vi-VN) { background-image: url(images/apple-maps-vi-VN.svg); }
.mw-brand:lang(zh-CN) { background-image: url(images/apple-maps-zh-CN.svg); }
.mw-brand:lang(zh-HK) { background-image: url(images/apple-maps-zh-HK.svg); }
.mw-brand:lang(zh-TW) { background-image: url(images/apple-maps-zh-TW.svg); }

@media screen and (prefers-color-scheme: dark) {
    .mw-brand:lang(ar-SA) { background-image: url(images/apple-maps-dark-ar-SA.svg); }
    .mw-brand:lang(ca-ES) { background-image: url(images/apple-maps-dark-ca-ES.svg); }
    .mw-brand:lang(cs-CZ) { background-image: url(images/apple-maps-dark-cs-CZ.svg); }
    .mw-brand:lang(da-DK) { background-image: url(images/apple-maps-dark-da-DK.svg); }
    .mw-brand:lang(de-DE) { background-image: url(images/apple-maps-dark-de-DE.svg); }
    .mw-brand:lang(el-GR) { background-image: url(images/apple-maps-dark-el-GR.svg); }
    .mw-brand:lang(en-AU) { background-image: url(images/apple-maps-dark-en-AU.svg); }
    .mw-brand:lang(en-GB) { background-image: url(images/apple-maps-dark-en-GB.svg); }
    .mw-brand:lang(en-US) { background-image: url(images/apple-maps-dark-en-US.svg); }
    .mw-brand:lang(en-ZA) { background-image: url(images/apple-maps-dark-en-ZA.svg); }
    .mw-brand:lang(es-ES) { background-image: url(images/apple-maps-dark-es-ES.svg); }
    .mw-brand:lang(es-MX) { background-image: url(images/apple-maps-dark-es-MX.svg); }
    .mw-brand:lang(fi-FI) { background-image: url(images/apple-maps-dark-fi-FI.svg); }
    .mw-brand:lang(fr-CA) { background-image: url(images/apple-maps-dark-fr-CA.svg); }
    .mw-brand:lang(fr-FR) { background-image: url(images/apple-maps-dark-fr-FR.svg); }
    .mw-brand:lang(he-IL) { background-image: url(images/apple-maps-dark-he-IL.svg); }
    .mw-brand:lang(hi-IN) { background-image: url(images/apple-maps-dark-hi-IN.svg); }
    .mw-brand:lang(hr-HR) { background-image: url(images/apple-maps-dark-hr-HR.svg); }
    .mw-brand:lang(hu-HU) { background-image: url(images/apple-maps-dark-hu-HU.svg); }
    .mw-brand:lang(id-ID) { background-image: url(images/apple-maps-dark-id-ID.svg); }
    .mw-brand:lang(it-IT) { background-image: url(images/apple-maps-dark-it-IT.svg); }
    .mw-brand:lang(ja-JP) { background-image: url(images/apple-maps-dark-ja-JP.svg); }
    .mw-brand:lang(ko-KR) { background-image: url(images/apple-maps-dark-ko-KR.svg); }
    .mw-brand:lang(ms-MY) { background-image: url(images/apple-maps-dark-ms-MY.svg); }
    .mw-brand:lang(nb-NO) { background-image: url(images/apple-maps-dark-nb-NO.svg); }
    .mw-brand:lang(nl-NL) { background-image: url(images/apple-maps-dark-nl-NL.svg); }
    .mw-brand:lang(pl-PL) { background-image: url(images/apple-maps-dark-pl-PL.svg); }
    .mw-brand:lang(pt-BR) { background-image: url(images/apple-maps-dark-pt-BR.svg); }
    .mw-brand:lang(pt-PT) { background-image: url(images/apple-maps-dark-pt-PT.svg); }
    .mw-brand:lang(ro-RO) { background-image: url(images/apple-maps-dark-ro-RO.svg); }
    .mw-brand:lang(ru-RU) { background-image: url(images/apple-maps-dark-ru-RU.svg); }
    .mw-brand:lang(sk-SK) { background-image: url(images/apple-maps-dark-sk-SK.svg); }
    .mw-brand:lang(sl-SI) { background-image: url(images/apple-maps-dark-sl-SI.svg); }
    .mw-brand:lang(sv-SE) { background-image: url(images/apple-maps-dark-sv-SE.svg); }
    .mw-brand:lang(th-TH) { background-image: url(images/apple-maps-dark-th-TH.svg); }
    .mw-brand:lang(tr-TR) { background-image: url(images/apple-maps-dark-tr-TR.svg); }
    .mw-brand:lang(uk-UA) { background-image: url(images/apple-maps-dark-uk-UA.svg); }
    .mw-brand:lang(vi-VN) { background-image: url(images/apple-maps-dark-vi-VN.svg); }
    .mw-brand:lang(zh-CN) { background-image: url(images/apple-maps-dark-zh-CN.svg); }
    .mw-brand:lang(zh-HK) { background-image: url(images/apple-maps-dark-zh-HK.svg); }
    .mw-brand:lang(zh-TW) { background-image: url(images/apple-maps-dark-zh-TW.svg); }
}

.mw-rtl .mw-brand {
    background-position-x: right;
}

/* Footer */
.mw-place-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 1px 20px 0;
    max-width: 535px;

    font-size: 0.647em; /* ~11px */
    text-align: center;
    color: #8e8e93;
}

.mw-place-footer .mw-legal-links a {
    color: rgba(0, 0, 0, 0.6);
    font-size: 1em; /* ~11px */
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-place-footer .mw-legal-links a:hover {
    text-decoration: underline;
}

.mw-place-footer .mw-legal-links a:first-child {
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    padding-right: 12px;
    margin: 0 12px 0 0;
}

.mw-place-footer .mw-legal-links,
.mw-place-footer .mw-legal-copyright {
    display: inline-block;
    box-sizing: border-box;
}

.mw-place-footer .mw-legal-copyright span:first-child {
    padding-right: 2px;
}

.mw-rtl .mw-place-footer .mw-legal-copyright span:first-child {
    padding: 0 0 0 2px;
}

.mw-rtl .mw-place-footer .mw-legal-links a:first-child {
    border-right: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    padding-left: 12px;
    margin: 0 0 0 12px;
}

/* These will be displayed in small screen mode only. */
.mw-card footer.mw-place-footer {
    display: none;
}

.mw-place-footer .mw-legal-links a:focus-visible {
    box-shadow: 0 0 0 2px #007cff;
    outline: 0;
}

/* Full page scrolling */
@media print, (max-width: 700px), (max-width: 900px) and (max-height: 500px) {
    .mw-card footer.mw-place-footer {
        display: block;
        position: relative;
        margin: 1.5em auto 1em auto;
    }
}

/* Dark Mode — only apply to screen, not print */
@media screen and (prefers-color-scheme: dark) {
    .mw-place-footer,
    footer.mw-place-footer .mw-legal-links a {
        color: #ccc;
    }
}

/* End Footer */

/* Line Breaks */
.mw-modal-card-header::after,
.mw-collection-list-header::after,
.mw-cc-container .mw-cc-place-container::before,
.mw-collection-list-container footer::before,
.mw-modal-card footer::before,
.mw-cc-container footer::before,
.mw-publisher-container footer::before,
.mw-place-link::before {
    position: absolute;
    left: 14px;
    bottom: 0;
    width: calc(100% - 14px);
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    content: "";
}

.mw-cc-container div.mw-cc-place-container::before {
    bottom: auto;
}

.mw-rtl .mw-modal-card-header::after,
.mw-rtl .mw-collection-list-header::after,
.mw-rtl .mw-cc-container .mw-cc-place-container::before,
.mw-rtl .mw-place-link::before {
    left: auto;
    right: 14px;
}

.mw-modal-card footer::before,
.mw-cc-container footer::before,
.mw-publisher-container footer::before,
.mw-collection-list-container footer::before {
    left: 0;
    right: 0;
    width: 100%;
    top: -1em;
    bottom: auto;
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .mw-modal-card-header::after,
    .mw-collection-list-header::after,
    .mw-cc-container .mw-cc-place-container::before,
    .mw-modal-card footer::before,
    .mw-cc-container footer::before,
    .mw-publisher-container footer::before,
    .mw-collection-list-container footer::before,
    .mw-place-link::before {
        background: linear-gradient(transparent 0%, transparent 50%, #c8c8c8 50%, #c8c8c8 100%);
    }
}

@media (min-resolution: 2dppx) {
    .mw-modal-card-header::after,
    .mw-collection-list-header::after,
    .mw-cc-container .mw-cc-place-container::before,
    .mw-modal-card footer::before,
    .mw-cc-container footer::before,
    .mw-publisher-container footer::before,
    .mw-collection-list-container footer::before,
    .mw-place-link::before {
        background: linear-gradient(transparent 0%, transparent 50%, #c8c8c8 50%, #c8c8c8 100%);
    }
}

@media screen and (prefers-color-scheme: dark) {
    .mw-modal-card-header::after,
    .mw-collection-list-header::after,
    .mw-cc-container .mw-cc-place-container::before,
    .mw-collection-list-container footer::before,
    .mw-place-link::before {
        background: #4c4c4c;
    }

    .mw-place-footer .mw-legal-links a:first-child,
    .mw-rtl .mw-place-footer .mw-legal-links a:first-child {
        border-color: rgba(255, 255, 255, 0.25);
    }
}

/* End Line breaks */

/*

Text direction

Text direction is decided by both the current layout direction and the content text direction.
The layout direction is determined by the locale of the page.
The content direction is unknown and can be only determined by the browser
with The Unicode Bidirectional Text Algorithm (Bidi).

Bidi requires the element containing one semantic piece of text to be "isolated" so its text direction
is not affected by the surrounding content.
This can be achieved using `dir=auto`, and ensuring no `direction` CSS property is explicitly set.

Since `dir=auto` is not supported in IE/legacy Edge, a DirAutoHelper is implemented in JS to help
with determining the content direction, in the same way as if `dir=auto` is set.
In React, instead of setting `dir: "auto"` in the props object, you should do
`dir: DirAutoHelper.getTextDirection(contentText, l10n)` instead.
The helper method will return `ltr` or `rtl` based on the content text, achieving direction isolation and detection.

With something equivalent to `dir=auto` set, depend on the layout requirement, you should pick one of the following classes.

For background, visit https://quip-apple.com/js8CAtOTUjbX to understand the full research done on this topic.

# Class I: multi-line block paragraphs

For multi-line paragraph, we want the text direction to be auto-detected and isolated (`dir=auto`),
and text alignment to follow the text direction (`text-align: start`).
This is to ensure the text alignment of the LTR content in RTL layout is not flipped, e.g.
English description on an Arabic page, and vice versa.

The actual class here is commented out below because every property here is browser defaults.
You are responsible of making sure the browser defaults are not overwritten.

*/

/*
.mw-dir-block {
    display: block; // Browser default
    text-align: start; // Browser default
}
*/

/*

# Class II: single-line block labels

The single-line block label should have the full block width in the layout
with the text direction to be auto-detected and isolated (`dir=auto`) BUT with
the text alignment forced to the layout direction (`text-align: left|right`).

Isolation is needed because for labels like "Apple Park Visitor Center" with
"Apple Park" left untranslated, the word order will flip without isolation
(see rdar://63940420 (LOC: AR-SA: Placecard: Linguistic: two strings are flipping)).

The detected text direction is not always the layout direction. The same example above can demonstrate.
A `text-align` property is needed to ensure the text is always aligned to the layout direction.

Lastly, the block label should almost always truncated with `text-overflow: ellipsis`,
since the text alignment of the following lines will look weird when the two directions mismatches.
Although, truncating the content with ellipsis is bad from an accessibility standpoint,
particularly for users with larger text size set.
We will, therefore, leave that to the other style rules.

*/
.mw-dir-label {
    /* display: block; browser default */
    text-align: left;
}

.mw-rtl .mw-dir-label {
    text-align: right;
}

/* Mobile Text */
@media (max-device-width: 1024px) {
    html,
    body {
        -webkit-text-size-adjust: none;
        font: -apple-system-body;
    }
}

/* Do not invert colors for images when display colors are inverted. */
@media (inverted-colors) {
    .mw-collection-photo,
    .sc-event-image div,
    .sc-reviewer-avatar .sc-inner,
    scheduled-image,
    img {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }
}

@media (inverted-colors) and (prefers-color-scheme: dark) {
    .mw-collection-photo,
    .sc-event-image div,
    .sc-reviewer-avatar .sc-inner,
    scheduled-image,
    img {
        -webkit-filter: unset;
        filter: unset;
    }
}

.mw-maps-app-link {
    float: right;
    height: 2.588em; /* ~44px */
    line-height: 2.588em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: auto;
    /* Prevent the link from being pushed down by the logo. */
    max-width: calc(100% - 7.5em);
}

.mw-brand:lang(sl-SI) + .mw-maps-app-link {
    max-width: calc(100% - 9em);
}

.mw-maps-app-link a {
    color: rgb(2, 120, 252);
    font-size: 0.882em; /* ~15px */
    line-height: 1.468em; /* ~22px */
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, .05);
    display: inline-block;
    padding-top: 0.7em;
}

.mw-maps-app-link .mw-icon {
    display: inline-block;
    margin: 0.3em 0 0 0.34em;
}

.mw-rtl .mw-maps-app-link .mw-icon {
    margin: 0.3em 0.34em 0 0;
}

.mw-maps-app-link a:hover {
    text-decoration: underline;
}

.mw-maps-app-link a:active {
    text-decoration: underline;
}

.mw-arrow-up-angle {
    background-image: url(images/symbols/arrow.up.right.svg);
    width: 0.75em;
    height: 0.75em;
    background-size: contain;
}

.mw-rtl .mw-arrow-up-angle {
    background-image: url(images/symbols/arrow.up.left.svg);
}

@supports (mask-image: url(images/symbols/phone.svg)) or (-webkit-mask-image: url(images/symbols/phone.svg)) {
    .mw-arrow-up-angle {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.up.right.svg);
        mask-image: url(images/symbols/arrow.up.right.svg);
    }

    .mw-rtl .mw-arrow-up-angle {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.up.left.svg);
        mask-image: url(images/symbols/arrow.up.left.svg);
    }

    .mw-maps-app-link .mw-icon {
        background-color: rgb(2, 120, 252);
    }
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .mw-maps-app-link a {
        color: rgb(0, 64, 220);
    }

    .mw-maps-app-link .mw-icon {
        background-color: rgb(0, 64, 220);
    }
}

/* Dark Mode — only apply to screen, not print */
@media screen and (prefers-color-scheme: dark) {
    .mw-maps-app-link a {
        color: #fff;
    }

    .mw-maps-app-link a:hover > span,
    .mw-maps-app-link a:active > span {
        color: #fff;
        text-decoration: underline;
    }

    .mw-arrow-up-angle {
        background-image: url(images/arrow-up-right-light.svg);
    }

    .mw-rtl .mw-arrow-up-angle {
        background-image: url(images/arrow-up-left-light.svg);
    }

    .mw-maps-app-link .mw-icon {
        background-color: #fff;
    }
}

/* Mobile Safari will still trigger the :hover style after a tap so we need to override it. */
@media not all and (hover) {
    .mw-maps-app-link a,
    .mw-maps-app-link a:hover{
        color: rgb(2, 120, 252);
    }

    .mw-maps-app-link a:hover {
        text-decoration: none;
    }
}

.mw-rtl .mw-maps-app-link {
    float: left;
}

html {
    --color-blue: rgb(0, 122, 255);
    --color-green: rgb(52, 199, 89);
    --color-red: rgb(255, 59, 48);
    --color-gray-min: rgb(0, 0, 0);
    --color-gray: rgb(142, 142, 147);
    --color-gray2: rgb(174, 174, 178);
    --color-gray3: rgb(199, 199, 204);
    --color-gray4: rgb(209, 209, 214);
    --color-gray5: rgb(229, 229, 234);
    --color-gray6: rgb(242, 242, 247);
    --color-gray-max: rgb(255, 255, 255);

    /* Text colors */
    --color-text: var(--color-gray-min);
    --color-subheadline: var(--color-gray);
    --color-link: var(--color-blue);

    /* Backgrounds */
    --color-background: var(--color-gray-max);
    --color-image-placeholder: var(--color-gray6);

    /* Vibrant colors when web modules are rendering in spotlight search, siri, etc */
    --color-background-vibrant: rgba(0, 0, 0, 0.1);
}

@media screen and (prefers-color-scheme: dark) {
    html {
        --color-blue: rgb(10, 132, 255);
        --color-green: rgb(48, 209, 88);
        --color-red: rgb(255, 69, 58);
        --color-gray-min: rgb(255, 255, 255);
        --color-gray: rgb(142, 142, 147);
        --color-gray2: rgb(99, 99, 102);
        --color-gray3: rgb(72, 72, 74);
        --color-gray4: rgb(58, 58, 60);
        --color-gray5: rgb(44, 43, 45);
        --color-gray6: rgb(28, 28, 30);
        --color-gray-max: rgb(0, 0, 0);

        /* Text colors */
        --color-text: var(--color-gray-min);

        /* Backgrounds */
        --color-background: var(--color-gray5);

        /* Vibrancy colors when web modules are rendering in spotlight search, siri, etc */
        --color-background-vibrant: rgba(255, 255, 255, 0.1);
    }
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    html {
        --color-blue: rgb(0, 64, 220);
        --color-red: rgb(215, 0, 21);
        --color-green: rgb(36, 138, 61);
        --color-gray: rgb(108, 108, 112);
        --color-gray2: rgb(142, 142, 147);
        --color-gray3: rgb(174, 174, 178);
        --color-gray4: rgb(188, 188, 192);
        --color-gray5: rgb(216, 216, 220);
        --color-gray6: rgb(235, 235, 240);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    html {
        --color-blue: rgb(64, 156, 255);
        --color-red: rgb(255, 105, 97);
        --color-green: rgb(48, 219, 91);
        --color-gray: rgb(174, 174, 178);
        --color-gray2: rgb(124, 124, 128);
        --color-gray3: rgb(84, 84, 86);
        --color-gray4: rgb(68, 68, 70);
        --color-gray5: rgb(54, 54, 56);
        --color-gray6: rgb(36, 36, 38);
    }
}

.mw-card div.mw-close, div.mw-close {
    position: absolute;
    top: 0;
    right: 0;

    font-size: 1em;
    width: 1.765em;
    height: 1.765em;
    z-index: 10;
    margin: 16px;
    outline: none;
    cursor: pointer;

    background-color: rgba(143, 143, 146, 0.14);
    border-radius: 50%;
}

.mw-card div.mw-close:active, div.mw-close:active {
    background-color: rgba(143, 143, 146, 0.34);
}

.mw-card div.mw-close .sc-symbol.xmark, div.mw-close .sc-symbol.xmark {
    width: 1em;
    height: 1em;
    position: relative;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    pointer-events: none;
    transform: scale(0.8);
}

.mw-rtl .mw-card div.mw-close .sc-symbol.xmark, .mw-rtl div.mw-close .sc-symbol.xmark {
    left: unset;
    right: calc(50% - 0.5em);
}

@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 div.mw-close .sc-symbol.xmark, div.mw-close .sc-symbol.xmark  {
        background-color: rgb(128, 128, 133);
    }
}

.mw-rtl .mw-card div.mw-close, .mw-rtl div.mw-close {
    right: auto;
    left: 0;
}

@media screen and (prefers-color-scheme: dark) {
    .mw-card div.mw-close, div.mw-close  {
        background-color: rgba(255, 255, 255, 0.25);
    }

    .mw-card div.mw-close:active, div.mw-close:active {
        background-color: rgba(255, 255, 255, 0.45);
    }

    @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 div.mw-close .sc-symbol.xmark, div.mw-close .sc-symbol.xmark {
            background-color: rgb(255, 255, 255);
        }
    }
}

@media print {
    .mw-card .mw-close, .mw-close {
        display: none;
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .mw-card div.mw-close, div.mw-close {
        background-color: rgb(54, 54, 56);
    }

    .mw-card div.mw-close .sc-symbol.xmark, div.mw-close .sc-symbol.xmark {
        background-color: rgb(174, 174, 178);
    }
}

.mw-collection-list-container {
    background: #fff;
    overflow-x: hidden;

    /* Collection list container receives accessibility focus, itself is not
       interactable */
    outline: none;
}

.mw-collection-list-header {
    position: relative;
    display: block;
    color: inherit;
    padding: 28px 14px;
    overflow: hidden;
}

.mw-collection-list-header:focus {
    /* Removing focus outline since it is being cut-off by the container;
       background color will change in focus state. */
    outline: none;
}

.mw-collection-header-photo {
    float: left;
    width: 72px;
    height: 28px;
}
.mw-rtl .mw-collection-header-photo {
    float: right;
}

/* The collection header should have space for the close button */
.sc-room-for-close .mw-collection-list-header .mw-collection-title {
    width: calc(100% - 86px - 1.765rem - 16px);
}
.mw-collection-title {
    float: left;
    margin-left: 14px;
    max-width: calc(100% - 86px);
}
.mw-rtl .mw-collection-title {
    float: right;
    margin-left: auto;
    margin-right: 14px;
}

.sc-hiking .mw-collection-title {
    margin: 0;
}

.mw-collection-title h1 {
    display: block;
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 1.3em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mw-collection-title > span {
    display: block;
    margin: 0;
    padding: 0;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    font-size: .9em;
    line-height: 1.2;
    color: #686868;
}
.mw-place-link .mw-collection-place-name, .mw-place-link .mw-component-group {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 78px);
}

.mw-collection-list .mw-place-link .mw-component-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, min-content));
}

.mw-collection-list .mw-place-link .mw-component-group.mw-hours-group {
    grid-template-columns: min-content auto 1fr;
}

.mw-collection-list .mw-place-link .mw-component-group.sized > div.mw-component.mw-ui-component {
    max-width: unset;
}

/* On small screens, when the accessibility font size gets too big, we hide the photos in the list. */
@media (max-width: 500px) and (max-width: 15rem) {
    .mw-place-link .mw-collection-place-name, .mw-place-link .mw-component-group {
        width: 100%;
    }
    .mw-place-link .mw-collection-photo {
        display: none;
    }
}

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

.mw-collection-header-photo .mw-collection-photo {
    width: 60px;
    height: 60px;
}

.mw-collection-photo.sc-hiking.hikingfigure {
    background: none;
    -webkit-mask-image: url(images/symbols/hikingFigure.svg);
    mask-image: url(images/symbols/hikingFigure.svg);
    background-color: rgb(178, 178, 183);
    background-size: 65%;
    height: 41.6px;
    width: 41.6px;
    margin: 11.7px;
    color: #fff;
}

.hiking-wrapper {
    width: 64px;
    height: 64px;
    float: right;
    background-color: rgb(229, 229, 234);
    border-radius: 5px;
}

.mw-collection-header-photo > div:first-child {
    position: absolute;
    top: calc((28px * 2 + 1.3em * 1.2 + 0.9em * 1.2) / 2 - 26px - 3px - 6px);
    left: 14px;
    border-radius: 8px;
    overflow: hidden;
}
.mw-rtl .mw-collection-header-photo > div:first-child {
    left: auto;
    right: 14px;
}
.mw-collection-header-photo > div:first-child .mw-collection-photo {
    filter: blur(1px);
}

.mw-collection-header-photo > div:first-child .mw-collection-photo:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0.35;
    content: "";
}

.mw-collection-header-photo div:nth-child(2) {
    position: absolute;
    top: calc((28px * 2 + 1.3em * 1.2 + 0.9em * 1.2) / 2 /* Header mid point */ - 26px - 3px /* Half height */);
    left: 20px;
    border-radius: 8px;
    border: 3px #fff solid;
}

.mw-rtl .mw-collection-header-photo div:nth-child(2) {
    left: auto;
    right: 20px;
}

.mw-collection-photo,
.mw-place-link .mw-collection-photo.mw-loaded-photo {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #e2e4e2;
}

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

.mw-collection-list {
    clear: both;
    padding: 0;

    min-height: 40vh;
}

.mw-place-link {
    position: relative;
    display: block;
    color: black;
    text-decoration: none;
    padding: 14px;
    min-height: 3.76em;
    background: #fff;
}

.mw-place-link:focus {
    /* Removing focus outline since it is being cut-off by the container;
       background color will change in focus state. */
    outline: none;
}

.mw-place-link .mw-short-ugc-rating {
    float: left;
}

.mw-rtl .mw-place-link .mw-short-ugc-rating {
    float: right;
}

.mw-place-holder {
    opacity: 0.35;
    pointer-events: none;
}

.mw-place-link:before {
    top: 0;
    bottom: auto;
}

/* Do not add a border for elements using the hairline-top class. */
.mw-placecard .mw-related-place-content .mw-place-link.mw-hairline-top:before,
/* Do not add a border to the first elements after a title. */
.mw-modal-card .mw-related-place-content .mw-place-link:first-child:before,
.mw-collection-list > .mw-place-link:first-child:before {
    display: none;
}

/* :focus state changes the background color, since the outline is turned off.
   Do not remove this rule or the focus state will not be visible! */
body:not(.mw-no-outline) .mw-collection-list-header:focus,
body:not(.mw-no-outline) .mw-place-link:focus {
    background: #c8c8c8;
}

body:not(.mw-no-outline) .mw-collection-list-header:focus .mw-collection-header-photo div:nth-child(2) {
    border-color: rgba(0, 0, 0, 0.1);
}

.mw-collection-list-header.activate, .mw-place-link.activate {
    animation: 150ms 2 alternate activate;
}

.mw-collection-list-header.activate:after,
.mw-place-link.activate:before,
.mw-place-link.activate + .mw-place-link:before {
    background: none;
}

.mw-collection-list-header.activate .mw-collection-header-photo div:nth-child(2) {
    animation: 150ms 2 alternate activate-border;
}

@keyframes activate {
    to {
        background-color: #f2f2f2;
    }
}

@keyframes activate-border {
    to {
        border-color: #f2f2f2;
    }
}

.mw-place-link .mw-collection-photo {
    position: relative;
    float: right;
    top: calc(3.76em / 2 - 32px);
    background: no-repeat center/65% url(images/marker-selected.png), #e2e4e2;
    border: 1px #d9dad8 solid;
    /* Working around a Safari bug where the parent link color is used instead, see rdar://73594980 */
    color: #d9dad8;
}

.mw-rtl .mw-place-link .mw-collection-photo {
    float: left;
}

/* Working around a Safari bug by forcing the creation of a layer, see rdar://70017231 */
.mw-collection-list-header:after {
    transform: translate3d(0, 0, 0);
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .mw-place-link .mw-collection-photo {
        background: no-repeat center/65% url(images/marker-selected_2x.png), #e2e4e2;
    }
}
@media (min-resolution: 2dppx) {
    .mw-place-link .mw-collection-photo {
        background: no-repeat center/65% url(images/marker-selected_2x.png), #e2e4e2;
    }
}

.mw-place-link > span {
    font-weight: 400;
}
.mw-place-link .mw-rating .mw-icon-star {
    display: inline-block;
    width: 0.9em;
}
.mw-place-link .mw-rating .mw-score {
    font-weight: 600;
}
.mw-place-link .mw-rating .mw-no-review {
    color: #8e8e93;
}

.mw-collection-list-header *, .mw-place-link * {
    pointer-events: none;
}

.mw-collection-place-name {
    font-weight: 500;
    font-size: 1.05em;
}

/* text close button */
.mw-card div.mw-close.mw-text-button {
    width: auto;
    top: 1px;
    padding: 16px;
    color: #08c;
    font-size: .882em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0;
    margin: 0;
}

.mw-card div.mw-close.mw-text-button:active {
    color: #c2d5ef;
}

.mw-card div.mw-close.mw-text-button:before {
    content: none;
}


/* Inner Scrolling */
@media screen and (min-width: 701px) and (min-height: 501px), screen and (min-width: 901px) {
    .mw-collection-list-container {
        height: 100%;
        overflow: visible;
    }
    .mw-collection-list {
        height: calc(100% - 100px);
        overflow-x: hidden;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .mw-place-link {
        color: #ccc;
    }

    .mw-collection-list-container {
        background: #333;
    }

    .mw-collection-title > span {
        color: #ccc;
    }

    .mw-place-link .mw-collection-place-name {
        color: #fff;
    }

    .mw-collection-header-photo div:nth-child(2),
    .mw-place-link .mw-collection-photo {
        border-color: #333;
    }

    .mw-collection-photo,
    .mw-place-link .mw-collection-photo.mw-loaded-photo {
        background-color: #939795;
    }

    .mw-collection-header-photo > div:first-child .mw-collection-photo:after {
        background: #939795;
    }

    .mw-place-link {
        background: #333;
    }

    body:not(.mw-no-outline) .mw-collection-list-header:focus,
    body:not(.mw-no-outline) .mw-place-link:focus {
        background: #5a5959;
    }

    body:not(.mw-no-outline) .mw-collection-list-header:focus .mw-collection-header-photo div:nth-child(2) {
        border-color: #5a5959;
    }

    @keyframes activate {
        to {
            background-color: #5a5959;
        }
    }

    @keyframes activate-border {
        to {
            border-color: #5a5959;
        }
    }

    .mw-place-link .mw-collection-photo {
        background-color: #939795;
    }

    .mw-collection-photo.sc-hiking.hikingfigure {
        background-color: rgb(101, 101, 105);
    }

    .hiking-wrapper {
        background-color: rgb(44, 44, 46);
    }
}

/* Opening Soon / Closing Soon */
.mw-place-open-always,
.mw-place-open-now {
    color: #8e8e93;
}

/* Opening Soon / Closing Soon */
.mw-place-opening-soon,
.mw-place-closing-soon {
    color: rgb(255, 115, 0);
}

/* Closed Now / Closed Today / Temporary Closure / Permanent Closure */
.mw-place-closed-now,
.mw-place-closed-today,
.mw-place-temporary-closure,
.mw-place-permanent-closure {
    color: rgb(242, 73, 51);
}

.mw-ui-component.mw-component.mw-place-category {
    color: #8e8e93;
}

.mw-ui-component.mw-place-price-range {
    color: #8e8e93;
    letter-spacing: .05em;
}

.mw-place-transit-labels {
    overflow: hidden;
}

.mw-place-transit-labels .mw-value {
    display: table;
}

.mw-place-transit-labels .mw-transit-label {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    padding-right: 5px;
}

.mw-transit-label .mw-artwork-icon {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.mw-transit-label.mw-separator {
    align-self: stretch;
    width: 1px;
    /* Needs to be replaced by the correct color from HI spec */
    border-left: 1px solid rgba(0, 0, 0, .15);
}

.mw-rtl .mw-place-transit-labels .mw-transit-label:first-child {
    padding-right: 0;
}

.mw-place-transit-labels ellipsis-row .mw-ellipsis-icon .sc-icon {
    margin-top: auto;
    height: 10px;
    width: 10px;
}

/* Dark Mode — only apply to screen, not print */
@media screen and (prefers-color-scheme: dark) {
    .mw-transit-label.mw-separator {
        border-color: #ccc;
    }
}

ellipsis-row {
    position: relative;
    display: inline-flex;
    width: 100%;
}

ellipsis-row .mw-content {
    display: inline-flex;
    overflow: hidden;
    align-items: center;
    flex: 1;
}

ellipsis-row .mw-ellipsis-icon {
    display: flex;
    position: absolute;
    height: 100%;
    bottom: 0;
    right: 0;
    padding: 0 5px 0 5px;

    box-shadow: -5px 0 0.5em #fff;
    background: #fff;

    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s linear 0.1s, visibility 0.15s linear 0.1s;
}

.mw-rtl ellipsis-row .mw-ellipsis-icon {
    right: auto;
    left: 0;

    box-shadow: 5px 0 0.5em #fff;
}

ellipsis-row.show-ellipsis .mw-ellipsis-icon {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.15s linear 0.1s, visibility 0.15s linear 0.1s;
}

/* Dark Mode — only apply to screen, not print */
@media screen and (prefers-color-scheme: dark) {
    ellipsis-row .mw-ellipsis-icon {
        box-shadow: -5px 0 0.5em #2c2b2d;
        background-color: #2c2b2d;
    }
}

.mw-place-summary {
    margin: 0;
}

.mw-place-summary.placeholder {
    background-color: rgba(128, 128, 128, 0.15);
    border-radius: 8px;
    height: 65px;
}

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

.mw-place-summary div:not(:first-child),
.mw-place-summary .mw-component-group .mw-component:not(:first-child):before {
    color: rgb(160, 160, 160);
}

.mw-place-summary-name {
    font-weight: 500;
    font-size: 1.05em;
    font-weight: 700;
}

.mw-processed-image {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0;
    will-change: opacity;
}

.mw-processed-image > canvas {
    width: 100%;
    height: 100%;
}

/**
 * Transition cannot start until .hide-images is unset from .mw-card. See selector in client/src/js/shell/shell.css
 */
.mw-processed-image.ready {
    opacity: 1;
    transition: opacity 0.3s linear;
}

/**
 * We also don't want to start the transition and loads the background-image before the script.
 * ProcessedImage however does not render on the server-side, so we don't really need this rule.
 */
/*
body:not(.mw-script-ready) .mw-processed-image.ready:empty {
    opacity: 0;
    background-image: none !important;
}
*/

.mw-brick {
    /* Do not statically size this brick.
       Set the size on the parent component, and the brick will fill to the size
       of the parent.
    */
    height: 100%;
    width: 100%;
    border-radius: 10px;

    text-decoration: none;
    color: white;

    display: block;
    position: relative;
    background-size: cover;
    background-position: center;
}

.mw-brick.placeholder {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.38) 80%);
}

.mw-brick-content {
    bottom: 12px;
    position: absolute;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    margin: 0 20px 0 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mw-rtl .mw-brick-content {
    margin: 0 12px 0 20px;
}

/* The brick has the publisher logo in the smartcard container for which we do not RTL assets through design. Hence we leave the title & logo in LTR mode and should match the LTR margin. */
.mw-rtl .sc-container .mw-brick-content {
    margin: 0 20px 0 12px;
}

.mw-brick scheduled-image,
.mw-brick-img {
    width: 100%;
    height: 100%;
}

.mw-brick scheduled-image {
    border-radius: 8px;
}

.mw-brick-gradient {
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.38) 80%);
    border-radius: 8px;
}

.mw-brick-logo {
    height: 40px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.25));
}

.mw-brick-title {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;

    font: -apple-system-headline;
    font-size: 1.287em;
    text-shadow: 0px 1px 2px rgba(32, 32, 32, 0.2);
    white-space: normal;
    font-weight: 700;
}

scheduled-image {
    display: block;

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0;
    will-change: opacity;
    will-change: background-image;
}

scheduled-image.ready {
    opacity: 1;
    transition: opacity 0.3s linear;
}

.mw-filter-bar {
    margin-bottom: 16px;
}

.mw-filter-bar .mw-filter-pill {
    border-radius: 16px;
    font-size: 0.882em;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 6px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    color: #000;
}

.mw-filter-bar .mw-active-filter-pill {
    background-color: rgb(16, 118, 255);
    color: white;
}

.mw-filter-bar horizontal-pages {
    position: relative;
    left: -16px;
    right: -16px;
    width: calc(100% + 32px);
}

.mw-filter-bar horizontal-pages .mw-scrollable > .sc-item {
    margin-right: 8px;
}
.mw-rtl .mw-filter-bar horizontal-pages .mw-scrollable > .sc-item {
    margin-left:  8px;
    margin-right: unset;
}

.mw-filter-bar horizontal-pages .mw-scrollable > .sc-item:first-child {
    margin-left: 16px;
}
.mw-rtl .mw-filter-bar horizontal-pages .mw-scrollable > .sc-item:first-child {
    margin-left: 8px;
    margin-right: 16px;
}

.mw-filter-bar horizontal-pages .mw-scrollable > .sc-item:last-child {
    margin-right: 16px;
}
.mw-rtl .mw-filter-bar horizontal-pages .mw-scrollable > .sc-item:last-child {
    margin-right: 0;
    margin-left: 16px;
}

.mw-rtl .mw-filter-bar horizontal-pages .mw-scrollable > .sc-item:only-child,
.mw-filter-bar horizontal-pages .mw-scrollable > .sc-item:only-child {
    margin-right: 16px;
    margin-left: 16px;
}

@media screen and (prefers-color-scheme: dark) {
    .mw-filter-bar .mw-filter-pill {
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: white;
    }
}

.mw-filter-bar horizontal-pages .mw-scrollable > .sc-item:focus-visible {
    box-shadow: 0 0 0 2px #007cff inset;
    outline: 0;
}

.mw-filter-bar horizontal-pages .mw-scrollable > .mw-active-filter-pill:focus-visible {
    color: #19407f;
}

horizontal-pages {
    display: block;
    overflow-y: hidden;
}

horizontal-pages .mw-scrollable {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    scrollbar-width: none;
}

horizontal-pages .mw-scrollable {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
}

horizontal-pages .mw-scrollable::-webkit-scrollbar {
    display: none;
}

horizontal-pages .mw-controls {
    pointer-events: none;
}

horizontal-pages .mw-controls .mw-back,
horizontal-pages .mw-controls .mw-forward {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

horizontal-pages .mw-controls .mw-back *,
horizontal-pages .mw-controls .mw-forward * {
    pointer-events: none;
}

horizontal-pages.can-go-back .mw-controls .mw-back,
horizontal-pages.can-go-forward .mw-controls .mw-forward {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

horizontal-pages .mw-scrollable a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #007cff inset;
}

/* FIXME: rdar://79675096 (Remove duplicate common/arrow-button.css symbol styles) */
.sc-symbol.chevron-compact-left {
    background-image: url(images/symbols/chevron.compact.left.svg);
}
.sc-symbol.chevron-compact-right {
    background-image: url(images/symbols/chevron.compact.right.svg);
}

@supports (mask-image: url(images/symbols/checkmark.svg)) or (-webkit-mask-image: url(images/symbols/checkmark.svg)) {
    .sc-symbol.chevron-compact-left {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.compact.left.svg);
        mask-image: url(images/symbols/chevron.compact.left.svg);
    }
    .sc-symbol.chevron-compact-right {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.compact.right.svg);
        mask-image: url(images/symbols/chevron.compact.right.svg);
    }
}

/* Coloring symbols is only supported when mask-image is supported, they default to black on IE11. */
@supports (mask-image: url(images/symbols/phone.svg)) or (-webkit-mask-image: url(images/symbols/phone.svg)) {
    .sc-arrow-buttons .sc-symbol {
        background-color: #8e8e93;
    }

    .sc-arrow-buttons button:active > .sc-symbol {
        background-color: #666a67;
    }
}
/* end FIXME: rdar://79675096 section */

/* Arrow buttons are only shown when hovering the element, and must display on top of the mask. */
.sc-arrow-buttons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;

    overflow: hidden;

    opacity: 0;
    transition: opacity 0.2s linear; /* Transition when arrows appear/disappear on hover. */
}

horizontal-pages:not(.use-touch):hover .sc-arrow-buttons {
    opacity: 1;
}

.sc-arrow-buttons button {
    position: absolute;
    top: calc(50% - 0.3em);
    left: 0;
    font-size: 1rem;
    padding: 0;
    width: 1em;
    height: 1em;

    border: 0;
    background: none;

    cursor: pointer;
    transition: opacity 0.2s linear; /* Transition when an individual arrow appears/disappear when enabled. */
}

.mw-rtl .sc-arrow-buttons button {
    transform: rotate(180deg);
    right: 0;
}

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

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

.sc-arrow-buttons button .sc-symbol {
    display: block;
    width: 100%;
    height: 100%;
}

.sc-arrow-buttons button.mw-forward {
    left: calc(100% - 1em);
}

.mw-rtl .sc-arrow-buttons button.mw-forward {
    right: calc(100% - 1em);
}

.mw-popup-menu ui-menu .mw-menu-wrapper {
    border-radius: 12px;
}

.mw-popup-menu ui-menu .mw-menu {
    border-radius: 12px;
    background-color: #dfdfdf;
}

.mw-popup-menu .mw-popup-menu-row-item.segment {
    margin-top: 5px;
}

.mw-popup-menu .mw-popup-menu-row-item {
    display: flex;
    width: calc(250px - 26px);
    max-width: calc(350px - 26px);
    padding: 10px 10px 10px 16px;

    font-size: 0.882em;
    background-color: #efefef;
    align-items: center;
}

.mw-popup-menu .mw-popup-menu-row-item:hover {
    background-color: rgba(0, 0, 0, 0.025);
}

.mw-rtl .mw-popup-menu .mw-popup-menu-row-item {
    padding: 10px 16px 10px 10px;
}

.mw-popup-menu.icon-padding .mw-popup-menu-row-item {
    padding: 10px;
}

.mw-rtl .mw-popup-menu.icon-padding .mw-popup-menu-row-item {
    padding: 10px;
}

.mw-popup-menu .mw-popup-menu-row-content > div {
    outline: none;
}

.mw-popup-menu .mw-popup-menu-row-content,
.mw-popup-menu .mw-popup-menu-row-content > div {
    display: flex;
    min-height: 25px;
    width: 100%;
    align-items: center;
}

.mw-popup-menu .mw-popup-menu-row-content {
    text-decoration: none;
    color: #000;
}

.mw-popup-menu .pad-icon .mw-popup-menu-row-content:first-child {
    margin-left: calc(0.7rem + 5px);
}

.mw-rtl .mw-popup-menu .pad-icon .mw-popup-menu-row-content:first-child {
    margin-left: auto;
    margin-right: calc(0.7rem + 5px);
}

.mw-popup-menu .mw-popup-menu-row-content:focus {
    /* Webkit bug prevents focus outline from appearing without offset */
    outline-offset: -8px;
    outline-width: 1px;
}

.mw-popup-menu .mw-popup-menu-row-content:focus-visible {
    outline-offset: 0px;
}

.mw-popup-menu .mw-popup-menu-row-item:not(:first-child):not(.segment) {
    border-top: 1px solid #e2e2e2;
}

.mw-popup-menu .sc-submenu-icon {
    width: 0.7rem;
    height: 0.7rem;
    display: flex;
    align-items: center;
    position: relative;

    margin-right: 5px;
}

.mw-rtl .mw-popup-menu .sc-submenu-icon {
    margin-right: auto;
    margin-left: 5px;
}

.mw-popup-menu .mw-menu-wrapper.unfocusing .sc-submenu-icon .sc-symbol {
    visibility: hidden;
    opacity: 0;
}

.mw-popup-menu .sc-submenu-icon .sc-symbol {
    width: 0.7rem;
    height: 0.7rem;
    opacity: 1;

    position: relative;
    transition-property: visibility, opacity, transform;
    transition-duration: 0.25s;
    transition-timing-function: ease-in-out;
}

.mw-popup-menu .sc-submenu-icon.opening .sc-symbol {
    transform: rotate(90deg);
}

.mw-rtl .mw-popup-menu .sc-submenu-icon.opening .sc-symbol {
    transform: rotate(-90deg);
}

.sc-size-AX1.sc-bigger-font-size .mw-popup-menu .mw-popup-menu-row-content .sc-icon,
.sc-size-AX2.sc-bigger-font-size .mw-popup-menu .mw-popup-menu-row-content .sc-icon,
.sc-size-AX3.sc-bigger-font-size .mw-popup-menu .mw-popup-menu-row-content .sc-icon,
.sc-size-AX4.sc-bigger-font-size .mw-popup-menu .mw-popup-menu-row-content .sc-icon,
.sc-size-AX5.sc-bigger-font-size .mw-popup-menu .mw-popup-menu-row-content .sc-icon {
    margin: 0;
}

.mw-rtl .sc-size-AX1.sc-bigger-font-size .mw-popup-menu .mw-popup-menu-row-content .sc-icon,
.mw-rtl .sc-size-AX2.sc-bigger-font-size .mw-popup-menu .mw-popup-menu-row-content .sc-icon,
.mw-rtl .sc-size-AX3.sc-bigger-font-size .mw-popup-menu .mw-popup-menu-row-content .sc-icon,
.mw-rtl .sc-size-AX4.sc-bigger-font-size .mw-popup-menu .mw-popup-menu-row-content .sc-icon,
.mw-rtl .sc-size-AX5.sc-bigger-font-size .mw-popup-menu .mw-popup-menu-row-content .sc-icon {
    margin: 0;
}

.mw-popup-menu .mw-popup-menu-row-item-title {
    display: inline-flex;
    align-items: center;
    flex: 1;
    margin-right: 20px;

    word-break: break-word;
}

.mw-rtl .mw-popup-menu .mw-popup-menu-row-item-title {
    margin-right: unset;
    margin-left: 20px;
}

.mw-popup-menu .mw-popup-menu-row-item-icon {
    display: flex;
}

.mw-popup-menu .mw-popup-menu-row-item-icon scheduled-image {
    width: 25px;
    height: 25px;
    margin-top: auto;
    margin-bottom: auto;
}

.mw-popup-menu .mw-popup-menu-row-item-icon.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;
}

.mw-popup-menu .mw-popup-menu-row-item .sc-symbol {
    background-color: #000;
}

.mw-popup-menu .sc-submenu-icon.opening + .mw-popup-menu-row-content .mw-popup-menu-row-item-title {
    font-weight: 500;
}

@media screen and (prefers-color-scheme: dark) {
    .mw-popup-menu ui-menu .mw-menu {
        background-color: #242628;
    }

    .mw-popup-menu .mw-popup-menu-row-item {
        background-color: #363636;
    }

    .mw-popup-menu .mw-popup-menu-row-item:hover {
        background-color: rgba(255, 255, 255, .165)
    }

    .mw-popup-menu .mw-popup-menu-row-content {
        color: #fff;
    }

    .mw-popup-menu .mw-popup-menu-row-item:not(:first-child):not(.segment) {
        border-color: #5a5c64;
    }

    .mw-popup-menu .mw-popup-menu-row-item .sc-symbol {
        background-color: #fff;
    }
}

ui-menu {
    display: flex;
    position: relative;
    /* We want to make sure the content doesn't impact layout before attachment. */
    overflow: hidden;
}

ui-menu.interacted {
    overflow: visible;
}

ui-menu .mw-toggle:focus {
    outline: none;
}

ui-menu .mw-menu-wrapper {
    display: flex;
    position: absolute;
    z-index: 10;
    visibility: hidden;
    overflow: hidden;
}

/* Once we're attached, the menu-wrapper is positoned and we can safely remove the overflow: hidden. */
ui-menu .mw-menu-wrapper.opening,
ui-menu .mw-menu-wrapper.opened,
ui-menu .mw-menu-wrapper.closing,
ui-menu .mw-menu-wrapper.closed,
ui-menu .mw-menu-wrapper.unfocusing,
ui-menu .mw-menu-wrapper.unfocused,
ui-menu .mw-menu-wrapper.focusing,
ui-menu .mw-menu-wrapper.focused {
    overflow: visible;
}

ui-menu .mw-menu-wrapper.opening,
ui-menu .mw-menu-wrapper.closing {
    visibility: visible;
}

ui-menu .mw-menu-wrapper.closed {
    visibility: hidden;
}

ui-menu .mw-menu {
    overflow-y: auto;
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

ui-menu .unfocusing .mw-menu {
    overflow-y: hidden;
}

ui-menu .mw-menu-wrapper {
    -webkit-filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
    filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
    /* In Safari the drop-shadow gets clipped, this prevents the clipping */
    outline: 20px solid transparent;
}

ui-menu .mw-menu-wrapper.unfocused {
    transform: scale(0.95);
    -webkit-filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
    filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
}

ui-menu .mw-menu-wrapper.unfocused.topleft {
    transform-origin: top left;
}

ui-menu .mw-menu-wrapper.unfocused.topright {
    transform-origin: top right;
}

ui-menu .mw-menu-wrapper.unfocused.bottomleft {
    transform-origin: bottom left;
}

ui-menu .mw-menu-wrapper.unfocused.bottomright {
    transform-origin: bottom right;
}

ui-menu .mw-menu-wrapper.focused {
    transform: scale(1);
    -webkit-filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
    filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
}

ui-menu .mw-menu-wrapper.opening .mw-menu.topleft {
    animation: 0.25s top-left-out ease-in-out;
}

ui-menu .mw-menu-wrapper.opening .mw-menu.topright {
    animation: 0.25s top-right-out ease-in-out;
}

ui-menu .mw-menu-wrapper.opening .mw-menu.topmiddle {
    animation: 0.25s top-middle-out ease-in-out;
}

ui-menu .mw-menu-wrapper.opening .mw-menu.bottomleft {
    animation: 0.25s bottom-left-out ease-in-out;
}

ui-menu .mw-menu-wrapper.opening .mw-menu.bottomright {
    animation: 0.25s bottom-right-out ease-in-out;
}

ui-menu .mw-menu-wrapper.opened .mw-menu {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
}

ui-menu .mw-menu-wrapper.closing .mw-menu.topleft {
    animation: 0.25s top-left-in ease-in-out;
}

ui-menu .mw-menu-wrapper.closing .mw-menu.topright {
    animation: 0.25s top-right-in ease-in-out;
}

ui-menu .mw-menu-wrapper.closing .mw-menu.topmiddle {
    animation: 0.25s top-middle-in ease-in-out;
}

ui-menu .mw-menu-wrapper.closing .mw-menu.topmiddle.fade {
    animation: 0.25s top-middle-in-fade ease-in-out;
}

ui-menu .mw-menu-wrapper.closing .mw-menu.bottomleft {
    animation: 0.25s bottom-left-in ease-in-out;
}

ui-menu .mw-menu-wrapper.closing .mw-menu.bottomright {
    animation: 0.25s bottom-right-in ease-in-out;
}

ui-menu .mw-menu-wrapper.closed .mw-menu {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 0;
}

ui-menu .mw-menu-wrapper.topleft {
    transform-origin: top left;
}

ui-menu .mw-menu-wrapper.topright {
    transform-origin: top right;
}

ui-menu .mw-menu-wrapper.unfocusing.topleft {
    animation: 0.25s unfocus-top-left ease-in-out;
}

ui-menu .mw-menu-wrapper.unfocusing.topright {
    animation: 0.25s unfocus-top-right ease-in-out;
}

/* Main menu only */
ui-menu .mw-menu-wrapper.unfocusing.bottomleft {
    animation: 0.25s unfocus-bottom-left ease-in-out;
}

/* Main menu only */
ui-menu .mw-menu-wrapper.unfocusing.bottomright {
    animation: 0.25s unfocus-bottom-right ease-in-out;
}

ui-menu .mw-menu-wrapper.focusing.topleft {
    animation: 0.25s focus-top-left ease-in-out;
}

ui-menu .mw-menu-wrapper.focusing.topright {
    animation: 0.25s focus-top-right ease-in-out;
}

/* Main menu only */
ui-menu .mw-menu-wrapper.focusing.bottomleft {
    animation: 0.25s focus-bottom-left ease-in-out;
}

/* Main menu only */
ui-menu .mw-menu-wrapper.focusing.bottomright {
    animation: 0.25s focus-bottom-right ease-in-out;
}

/* Animation KeyFrames */
@keyframes top-left-out {
    0% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        opacity: 0;
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0px 100%);
        opacity: 1;
    }
}

@keyframes top-left-in {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
    100% {
        clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        opacity: 0;
    }
}

@keyframes top-right-out {
    0% {
        clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
        opacity: 0;
    }
    100% {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
        opacity: 1;
    }
}

@keyframes top-right-in {
    0% {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
        opacity: 1;
    }
    100% {
        clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
        opacity: 0;
    }
}

@keyframes top-middle-out {
    0% {
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
        opacity: 1;
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

@keyframes top-middle-in {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
    100% {
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
        opacity: 1;
    }
}

@keyframes top-middle-in-fade {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
    100% {
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
        opacity: 0;
    }
}

@keyframes bottom-left-out {
    0% {
        clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
        opacity: 0
    }
    100% {
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        opacity: 1;
    }
}

@keyframes bottom-left-in {
    0% {
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        opacity: 1;
    }
    100% {
        clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
        opacity: 0
    }
}

@keyframes bottom-right-out {
    0% {
        clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
        opacity: 0
    }
    100% {
        clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0);
        opacity: 1;
    }
}

@keyframes bottom-right-in {
    0% {
        clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0);
        opacity: 1;
    }
    100% {
        clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
        opacity: 0
    }
}

@keyframes unfocus-top-left {
    0% {
        transform: scale(1);
        -webkit-filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: top left;
    }
    100% {
        transform: scale(0.95);
        -webkit-filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: top left;
    }
}

@keyframes unfocus-top-right {
    0% {
        transform: scale(1);
        -webkit-filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: top right;
    }
    100% {
        transform: scale(0.95);
        -webkit-filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: top right;
    }
}

@keyframes unfocus-bottom-left {
    0% {
        transform: scale(1);
        -webkit-filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: bottom left;
    }
    100% {
        transform: scale(0.95);
        -webkit-filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: bottom left;
    }
}

@keyframes unfocus-bottom-right {
    0% {
        transform: scale(1);
        -webkit-filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: bottom right;
    }
    100% {
        transform: scale(0.95);
        -webkit-filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: bottom right;
    }
}

@keyframes focus-top-left {
    0% {
        transform: scale(0.95);
        -webkit-filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: top left;
    }
    100% {
        transform: scale(1);
        -webkit-filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: top left;
    }
}

@keyframes focus-top-right {
    0% {
        transform: scale(0.95);
        -webkit-filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: top right;
    }
    100% {
        transform: scale(1);
        -webkit-filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: top right;
    }
}

@keyframes focus-bottom-left {
    0% {
        transform: scale(0.95);
        -webkit-filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: bottom left;
    }
    100% {
        transform: scale(1);
        -webkit-filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: bottom left;
    }
}

@keyframes focus-bottom-right {
    0% {
        transform: scale(0.95);
        -webkit-filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(85%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: bottom right;
    }
    100% {
        transform: scale(1);
        -webkit-filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        filter: brightness(100%) drop-shadow(0 5px 5px rgb(0, 0, 0, 20%));
        transform-origin: bottom right;
    }
}

/* Refer to https://github.pie.apple.com/icloud-web/theme/blob/master/src/ui-activity-indicator/standard.scss
 * and https://github.pie.apple.com/icloud-web/theme/blob/master/src/ui-activity-indicator/standard-states.scss
 */

 loading-spinner {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
}

loading-spinner .spinner-nib {
    position: absolute;
    left: 50%;
    top: 0;
    width: 3px;
    height: 9px;
    border-radius: 1.5px;
    transform-origin: 0 0;
    animation-name: loading-indicator-keyframe;
    animation-direction: reverse;
    animation-duration: 1s;
    animation-iteration-count: infinite;

    background-color: #000;

    animation-timing-function: cubic-bezier(
        calc(1 / 3),
        0,
        calc(2 / 3),
        calc(1 / 3)
    );
}

loading-spinner .spinner-nib:first-of-type {
    animation-delay: -1s;
    transform: translateY(16px) rotate(0) translateY(-16px) translateX(-1.5px);
}

loading-spinner .spinner-nib:nth-of-type(2) {
    animation-delay: -0.91667s;
    transform: translateY(16px) rotate(30deg) translateY(-16px) translateX(-1.5px);
}

loading-spinner .spinner-nib:nth-of-type(3) {
    animation-delay: -0.83333s;
    transform: translateY(16px) rotate(60deg) translateY(-16px) translateX(-1.5px);
}

loading-spinner .spinner-nib:nth-of-type(4) {
    animation-delay: -0.75s;
    transform: translateY(16px) rotate(90deg) translateY(-16px) translateX(-1.5px);
}

loading-spinner .spinner-nib:nth-of-type(5) {
    animation-delay: -0.66667s;
    transform: translateY(16px) rotate(120deg) translateY(-16px) translateX(-1.5px);
}

loading-spinner .spinner-nib:nth-of-type(6) {
    animation-delay: -0.58333s;
    transform: translateY(16px) rotate(150deg) translateY(-16px) translateX(-1.5px);
}

loading-spinner .spinner-nib:nth-of-type(7) {
    animation-delay: -0.5s;
    transform: translateY(16px) rotate(180deg) translateY(-16px) translateX(-1.5px);
}

loading-spinner .spinner-nib:nth-of-type(8) {
    animation-delay: -0.41667s;
    transform: translateY(16px) rotate(210deg) translateY(-16px) translateX(-1.5px);
}

loading-spinner .spinner-nib:nth-of-type(9) {
    animation-delay: -0.33333s;
    transform: translateY(16px) rotate(240deg) translateY(-16px) translateX(-1.5px);
}

loading-spinner .spinner-nib:nth-of-type(10) {
    animation-delay: -0.25s;
    transform: translateY(16px) rotate(270deg) translateY(-16px) translateX(-1.5px);
}

loading-spinner .spinner-nib:nth-of-type(11) {
    animation-delay: -0.16667s;
    transform: translateY(16px) rotate(300deg) translateY(-16px) translateX(-1.5px);
}

loading-spinner .spinner-nib:nth-of-type(12) {
    animation-delay: -0.08333s;
    transform: translateY(16px) rotate(330deg) translateY(-16px) translateX(-1.5px);
}

@keyframes loading-indicator-keyframe {
    0% {
        opacity: 0.25;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (prefers-color-scheme: dark) {
    loading-spinner .spinner-nib {
        background-color: #fff;
    }
}

@media screen {
    .mw-dark loading-spinner .spinner-nib {
        background-color: #fff;
    }
}

fixed-height-text {
    display: block;
    overflow: hidden;
}

/* Expanding intrinsically causes re-layout.
 * But modern browsers will do what's best to animate height/max-height. */
fixed-height-text.expandable {
    transition: max-height 0.25s ease;
}

fixed-height-text .mw-expand, fixed-height-text .mw-collapse {
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.15s linear 0.1s, visibility 0.15s linear 0.1s;
    display: none;
    visibility: hidden;
}

fixed-height-text.expandable .mw-expand,
fixed-height-text.expandable .mw-collapse {
    display: block;
}

fixed-height-text.expandable .mw-expand {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

fixed-height-text.expandable.expanded .mw-expand {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

fixed-height-text.expandable.expanded .mw-collapse {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

/*
 * The CustomElement gets its intrinsic size from the folded content (position: relative).
 * Once upgraded we'll transition its height to unfold / fold.
 * */
foldable-element {
    position: relative;
    display: block;
    width: 100%;

    overflow: hidden;
    transition: height 0.25s ease;
}

/*
 * The unfolded content & controls should not impact the element's intrinsic size.
 * */
foldable-element > .mw-unfolded-content,
foldable-element > .mw-controls {
    position: absolute;
    top: 0;
    left: 0;
}

/*
 * z-index should be "auto". The markup already sets the right stacking context: folded < unfolded < controls
 * */
foldable-element > .mw-folded-content {
    position: relative;
    z-index: auto;
}
foldable-element > .mw-unfolded-content {
    z-index: auto;
}
foldable-element > .mw-controls {
    z-index: auto;
    width: 100%;
    height: 100%;
}

/*
 * Stacking contexts for nested foldable elements: folded (1) - unfolded (2) - controls (3).
 * */
foldable-element foldable-element > .mw-folded-content {
    z-index: 1;
}
foldable-element foldable-element > .mw-unfolded-content {
    z-index: 2;
}
foldable-element foldable-element > .mw-controls {
    z-index: 3;
}

/*
 * We keep reasonable visibility values for accessibility.
 * But we avoid `display: none` so we can measure the content elements.
 * - the unfolded content is hidden at rest / before upgrade
 * - the folded content is hidden when we're entirely unfolded
 * */
foldable-element > .mw-unfolded-content {
    visibility: hidden;
    opacity: 0;
}

foldable-element.unfolded > .mw-folded-content {
    visibility: hidden;
    opacity: 0;
}


/*
 * Transitions!
 * The code using this element can also transition the control by using the `.folding` and `.unfolding` selectors.
 * e.g. .my-container foldable-element.unfolding .mw-toggle
 * */
foldable-element > .mw-unfolded-content,
foldable-element > .mw-folded-content {
    transition: opacity 0.25s ease;
}

/* Unfolding */
foldable-element.unfolding > .mw-unfolded-content {
    visibility: visible;
    opacity: 1;
}

foldable-element.unfolding > .mw-folded-content {
    opacity: 0;
}

/* Folding */
foldable-element.folding > .mw-unfolded-content {
    visibility: visible;
    opacity: 0;
}

foldable-element.folding > .mw-folded-content {
    opacity: 1;
}


.sc-container {
    height: auto;
    min-height: 100%;

    --background: #f9f9f9;
    --background-dark: #242628;
    background: var(--background);

    --color: #000;
    --color-dark: #fff;
    color: var(--color);

    box-sizing: border-box;
    outline: none;
}

.sc-container.sc-native {
    background-color: transparent;
}

/* Some browsers compute the scrollbar z-index based on the highest
 * z-index of the scrollable content.
 * On macOS this puts the srollbar above the fixed header */
.sc-scrollbar-bump {
    position: relative;
    top: 0;
    left: -16px;
    right: -16px;
    width: calc(100% + 32px);
    height: 0;
    z-index: 1000;
}

.sc-container.preview-tool > .sc-scrollbar-bump {
    margin: 0;
    padding: 16px 16px 0 16px;
}

/* Vertical spacing regardless of the modules' order. */
.sc-container > div {
    /* Vertical margins is 16px between each children.
    * Horizontal margins are 16px between the container and each of its children */
    margin: 16px 16px 0 16px;
    width: calc(100% - 32px);
}

.sc-container > div.sc-section-header-container {
    /* Vertical margin between a section header and a previous child will be 24px */
    margin-top: 24px;
}

.sc-container > div:last-child {
    margin-bottom: 0;
}

/* HorizontalPages */
.sc-container horizontal-pages .mw-scrollable > .sc-item {
    margin-right: 8px;
}

.mw-rtl .sc-container horizontal-pages .mw-scrollable > .sc-item {
    margin-left: 8px;
    margin-right: unset;
}

.sc-container horizontal-pages .mw-scrollable > .sc-item:first-child {
    margin-left: 16px;
}

.mw-rtl .sc-container horizontal-pages .mw-scrollable > .sc-item:first-child {
    margin-left: 8px;
    margin-right: 16px;
}

.sc-container horizontal-pages .mw-scrollable > .sc-item:last-child {
    margin-right: 16px;
}

.mw-rtl .sc-container horizontal-pages .mw-scrollable > .sc-item:last-child {
    margin-right: 0;
    margin-left: 16px;
}

.mw-rtl .sc-container horizontal-pages .mw-scrollable > .sc-item:only-child,
.sc-container horizontal-pages .mw-scrollable > .sc-item:only-child {
    margin-right: 16px;
    margin-left: 16px;
}

.sc-container horizontal-pages .mw-controls {
    z-index: 1;
}

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

/* Our only invariant is that the header goes at the top when there is no cover photo. */
.sc-container > .sc-header-container {
    margin-top: 0;
    padding-top: 14px;
}

/* The fixed-header also always goes on top  */
.sc-container .sc-fixed-header {
    margin-top: 0;
}

.sc-container a:focus-visible,
.sc-container button:focus-visible {
    box-shadow: 0 0 0 2px #007cff;
    outline: 0;
}

/* Inner Scrolling */
@media screen and (min-width: 701px) and (min-height: 501px), screen and (min-width: 901px) {
    .sc-container {
        height: 100%;
        overflow-y: scroll;
        will-change: scroll-position;
    }

    /* FIXME: rdar://77069368 (On iOS, the scrollbar can be displayed behind fixed/scrollable child elements) */
    @supports (-webkit-touch-callout: none) {
        .sc-container::-webkit-scrollbar {
            display: none;
        }
    }
}

/* Dark Mode — only apply to screen, not print */
@media screen and (prefers-color-scheme: dark) {
    :root:not(.mw-light) .sc-container {
        --background: var(--background-dark);
        --color: var(--color-dark);
    }
}

:root.mw-dark .sc-container {
    --background: var(--background-dark);
    --color: var(--color-dark);
}

/* Full page scrolling */
@media print, (max-width: 700px), (max-width: 900px) and (max-height: 500px) {
    .sc-container:not(.preview-tool) {
        min-height: 100vh;
    }
}

/* Platter container */
.sc-platter-container {
    width: 100%;

    border-radius: 10px;

    --background-dark: #2c2b2d;
    --background-more-contrast-dark: rgb(54, 54, 56);
    --background: #fff;
    background: var(--background);

    line-height: 1.324em;
}

/* Platter cell */
.sc-platter-container .sc-platter-cell {
    position: relative;
    padding: 14px 16px;
}

.sc-platter-container .sc-platter-cell-title {
    width: 100%;
    margin: 0;

    color: #8e8e93;
    font-size: 0.882em;
    line-height: 1.34;
    font-weight: 400;
}

.sc-platter-container .sc-platter-cell-title.with-sc-icon {
    width: calc(100% - 2.12rem);
}

.sc-platter-container .sc-platter-cell-content {
    width: 100%;
    overflow: hidden;

    --color: #000;
    --color-dark: #fff;
    color: var(--color);

    text-decoration: none;
    font-size: 1em;
    line-height: 1.29;
}

.sc-platter-container .sc-platter-cell-content.with-sc-icon {
    width: calc(100% - 2.12rem);
}

.sc-platter-container .sc-platter-cell-content.with-sc-icon + .sc-icon {
    position: absolute;
    right: 16px;
    top: 17px;
    font-size: 1em;
    width: 2.12em;
    height: 2.12em;

    --background-color: rgb(240, 240, 240);
    --background-color-dark: rgba(255, 255, 255, 0.1);
    background-color: var(--background-color);

    border-radius: 50%;
}

.sc-platter-container .sc-platter-cell-content.with-sc-icon + .sc-icon .sc-symbol {
    width: 100%;
    height: 100%;
    transform: scale(0.5);
}

/*  Due to a SVG rendering issue on 1x displays, we need to keep the width slightly greater than the height
    For more context see rdar://98062623 ([WP] "V", Call, Navigate icons are truncated on non-retina displays) */
@media (max-resolution: 1dppx) {
    .sc-platter-container .sc-platter-cell-content.with-sc-icon + .sc-icon .sc-symbol {
        width: 102%;
    }
}

.mw-rtl .sc-platter-container .sc-platter-cell-content.with-sc-icon + .sc-icon {
    left: 16px;
    right: unset;
}

/* Platter description cell. */
.sc-platter-container .sc-platter-description-cell {
    padding: 16px 0 0 16px;
    display: grid;
}

.sc-platter-container .sc-platter-description-cell-title {
    width: 100%;
    margin: 0;

    --color: #000;
    --color-dark: #fff;
    color: var(--color);

    font-size: 0.9em;
    font-weight: 500;
}

.sc-platter-container .sc-platter-description-cell-content {
    overflow: hidden;
    float: left;

    color: #8e8e93;
    text-decoration: none;
    font-size: 1em;
}

.sc-platter-container .sc-platter-description-cell-label-component:not(:first-child)::before {
    content: "\00b7";
    padding: 0 5px;
}

/* Platter link cell. */
.sc-platter-container .sc-platter-link-cell {
    padding: 16px 0;
    display: block;
    overflow: hidden;

    font-size: 1em;
}

.sc-platter-container a.sc-platter-link-cell-content {
    text-decoration: none;
    color: #08c;
}

.sc-platter-container .sc-platter-link-cell-title {
    padding-left: 16px;
    overflow: hidden;

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

.sc-platter-container .sc-platter-link-cell-content:hover {
    color: #027aff;
    text-decoration: underline;
}

/* Platter cell hairline. */
.sc-platter-container .sc-platter-cell-hairline-top::after {
    position: absolute;
    top: 0;
    left: 16px;
    width: calc(100% - 16px);
    height: 1px;

    background: rgba(0, 0, 0, 0.1);
    content: "";
}

.sc-platter-container a:focus-visible {
    box-shadow: none;
}

.sc-platter-container a:focus-visible .sc-platter-cell-content {
    box-shadow: 0 0 0 2px #007cff;
    outline: 0;
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .sc-platter-container .sc-platter-cell-hairline-top::after {
        background: linear-gradient(transparent 0%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 100%);
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root:not(.mw-light) .sc-platter-container {
        --background: var(--background-dark);
    }

    :root:not(.mw-light) .sc-platter-container .sc-platter-cell-content {
        --color: var(--color-dark);
    }

    :root:not(.mw-light) .sc-platter-container .sc-platter-cell-content.with-sc-icon + .sc-icon {
        --background-color: var(--background-color-dark);
    }

    .sc-platter-container .sc-platter-cell-hairline-top::after {
        background: linear-gradient(transparent 0%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 100%);
    }

    :root:not(.mw-light) .sc-platter-container .sc-platter-description-cell-title {
        --color: var(--color-dark);
    }
}

:root.mw-dark .sc-platter-container {
    --background: var(--background-dark);
}

:root.mw-dark .sc-platter-container .sc-platter-cell-content {
    --color: var(--color-dark);
}

:root.mw-dark .sc-platter-container .sc-platter-cell-content.with-sc-icon + .sc-icon {
    --background-color: var(--background-color-dark);
}

:root.mw-dark .sc-platter-container .sc-platter-description-cell-title {
    --color: var(--color-dark);
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    :root.mw-dark .sc-platter-container {
        --background: var(--background-more-contrast-dark);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    :root:not(.mw-light) .sc-platter-container {
        --background: var(--background-more-contrast-dark);
    }
}

.sc-section-header-container {
    display: flex;
    width: 100%;
}

.sc-section-header-container .sc-section-header-title {
    padding-left: 4px;
    flex: 1;
    font-weight: 600;
    font-size: 1.177em; /* ~ 20px */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    margin: 0;
}

.sc-section-header-container .sc-section-header-title.template-place-header {
    max-width: none;
    white-space: normal;
    text-overflow: unset;
}

.tall-locale .sc-section-header-container .sc-section-header-title {
    height: 1.5em;
    line-height: 1.5em;
}

.sc-section-header-container .sc-section-header-title.wrap-text {
    max-height: 2.5em;
    height: unset;

    overflow: unset;
    white-space: normal;
    text-overflow: unset;
}

.tall-locale .sc-section-header-container .sc-section-header-title.wrap-text {
    max-height: 3em;
}

.mw-rtl .sc-section-header-container .sc-section-header-title {
    padding-right: 4px;
    padding-left: unset;
}

.sc-section-header-container .sc-section-header-link {
    display: inline;
    float: right;
}

.mw-rtl .sc-section-header-container .sc-section-header-link {
    float: left;
}

.sc-section-header-container .sc-section-header-link a {
    text-decoration: none;
    color: #027aff;
    cursor: pointer;
}

.sc-section-header-container .sc-section-header-link a:hover {
    text-decoration: none;
    color: #b9dbec;
}


/*
 * /!\ This is a generated file!
 *
 * How to add symbols?
 * - Drop the new svg in images/symbols
 * - run ./client/tools/process-symbols.js
 *
 * The new file(s) will be processed in-place and this file will be updated!
 *
 */

/* Coloring symbols is only supported when mask-image is supported, they default to black on IE11. */
@supports (mask-image: url(images/symbols/checkmark.svg)) or (-webkit-mask-image: url(images/symbols/checkmark.svg)) {
    .sc-symbol {
        background-color: #000;
    }
}

/* IE11 fallback, remove when we drop support. */
.sc-symbol {
    width: 100%;
    height: 100%;

    /* Defaults to a checkmark */
    background-image: url(images/symbols/checkmark.svg);
}

.sc-symbol.ambiance {
    background-image: url(images/symbols/Ambiance.svg);
}

.sc-symbol.bicyclerentals {
    background-image: url(images/symbols/BicycleRentals.svg);
}

.sc-symbol.bizmodelsco-op {
    background-image: url(images/symbols/BizModelsCo-op.svg);
}

.sc-symbol.cashonly {
    background-image: url(images/symbols/CashOnly.svg);
}

.sc-symbol.casualdining {
    background-image: url(images/symbols/CasualDining.svg);
}

.sc-symbol.coffeeshop {
    background-image: url(images/symbols/CoffeeShop.svg);
}

.sc-symbol.coveredoutdoordining {
    background-image: url(images/symbols/CoveredOutdoorDining.svg);
}

.sc-symbol.englishspoken {
    background-image: url(images/symbols/EnglishSpoken.svg);
}

.sc-symbol.giftshop {
    background-image: url(images/symbols/GiftShop.svg);
}

.sc-symbol.golfcourse {
    background-image: url(images/symbols/GolfCourse.svg);
}

.sc-symbol.heatedoutdoordining {
    background-image: url(images/symbols/HeatedOutdoorDining.svg);
}

.sc-symbol.heatedandcoveredoutdoordining {
    background-image: url(images/symbols/HeatedandCoveredOutdoorDining.svg);
}

.sc-symbol.icemachine {
    background-image: url(images/symbols/IceMachine.svg);
}

.sc-symbol.kidsfreewithoutextrabedding {
    background-image: url(images/symbols/KidsFreeWithoutExtraBedding.svg);
}

.sc-symbol.latenightmeals {
    background-image: url(images/symbols/LateNightMeals.svg);
}

.sc-symbol.laundryservice {
    background-image: url(images/symbols/LaundryService.svg);
}

.sc-symbol.livemusic {
    background-image: url(images/symbols/LiveMusic.svg);
}

.sc-symbol.lunch {
    background-image: url(images/symbols/Lunch.svg);
}

.sc-symbol.lunch1 {
    background-image: url(images/symbols/Lunch1.svg);
}

.sc-symbol.lunch2 {
    background-image: url(images/symbols/Lunch2.svg);
}

.sc-symbol.lunch3 {
    background-image: url(images/symbols/Lunch3.svg);
}

.sc-symbol.lunch4 {
    background-image: url(images/symbols/Lunch4.svg);
}

.sc-symbol.nightlife {
    background-image: url(images/symbols/Nightlife.svg);
}

.sc-symbol.onsiteshopping {
    background-image: url(images/symbols/OnsiteShopping.svg);
}

.sc-symbol.scubadiving {
    background-image: url(images/symbols/ScubaDiving.svg);
}

.sc-symbol.sehablaespanol {
    background-image: url(images/symbols/SeHablaEspanol.svg);
}

.sc-symbol.skiinskiout {
    background-image: url(images/symbols/SkiInSkiOut.svg);
}

.sc-symbol.snorkeling {
    background-image: url(images/symbols/Snorkeling.svg);
}

.sc-symbol.tenniscourt {
    background-image: url(images/symbols/TennisCourt.svg);
}

.sc-symbol.waterpark {
    background-image: url(images/symbols/Waterpark.svg);
}

.sc-symbol.accessibleelevator {
    background-image: url(images/symbols/accessibleElevator.svg);
}

.sc-symbol.accessiblewheelchair {
    background-image: url(images/symbols/accessibleWheelchair.svg);
}

.sc-symbol.airconditioning {
    background-image: url(images/symbols/airConditioning.svg);
}

.sc-symbol.applebadge {
    background-image: url(images/symbols/appleBadge.svg);
}

.sc-symbol.applepay {
    background-image: url(images/symbols/applePay.svg);
}

.sc-symbol.appointmentsonly {
    background-image: url(images/symbols/appointmentsOnly.svg);
}

.sc-symbol.arrow-down-circle {
    background-image: url(images/symbols/arrow.down.circle.svg);
}

.sc-symbol.arrow-down {
    background-image: url(images/symbols/arrow.down.svg);
}

.sc-symbol.arrow-left-and-right {
    background-image: url(images/symbols/arrow.left.and.right.svg);
}

.sc-symbol.arrow-triangle-turn-up-right-bold {
    background-image: url(images/symbols/arrow.triangle.turn.up.right.bold.svg);
}

.sc-symbol.arrow-triangle-turn-up-right-circle-fill {
    background-image: url(images/symbols/arrow.triangle.turn.up.right.circle.fill.svg);
}

.sc-symbol.arrow-triangle-turn-up-right-semibold {
    background-image: url(images/symbols/arrow.triangle.turn.up.right.semibold.svg);
}

.sc-symbol.arrow-triangle-turn-up-right {
    background-image: url(images/symbols/arrow.triangle.turn.up.right.svg);
}

.sc-symbol.arrow-up-arrow-down-circle {
    background-image: url(images/symbols/arrow.up.arrow.down.circle.svg);
}

.sc-symbol.arrow-up-left-square-fill {
    background-image: url(images/symbols/arrow.up.left.square.fill.svg);
}

.sc-symbol.arrow-up-left {
    background-image: url(images/symbols/arrow.up.left.svg);
}

.sc-symbol.arrow-up-right-square-fill {
    background-image: url(images/symbols/arrow.up.right.square.fill.svg);
}

.sc-symbol.arrow-up-right {
    background-image: url(images/symbols/arrow.up.right.svg);
}

.sc-symbol.arrow-up {
    background-image: url(images/symbols/arrow.up.svg);
}

.sc-symbol.arrow-up-to-line-alt {
    background-image: url(images/symbols/arrow.up.to.line.alt.svg);
}

.sc-symbol.arrowtriangle-down-fill {
    background-image: url(images/symbols/arrowtriangle.down.fill.svg);
}

.sc-symbol.arrowtriangle-up-fill {
    background-image: url(images/symbols/arrowtriangle.up.fill.svg);
}

.sc-symbol.attire {
    background-image: url(images/symbols/attire.svg);
}

.sc-symbol.bag-fill {
    background-image: url(images/symbols/bag.fill.svg);
}

.sc-symbol.barandlounge {
    background-image: url(images/symbols/barAndLounge.svg);
}

.sc-symbol.barservicebeerwine {
    background-image: url(images/symbols/barserviceBeerWine.svg);
}

.sc-symbol.barservicebeerwinecorkage {
    background-image: url(images/symbols/barserviceBeerWineCorkage.svg);
}

.sc-symbol.barservicefullbar {
    background-image: url(images/symbols/barserviceFullBar.svg);
}

.sc-symbol.beachfrontroom {
    background-image: url(images/symbols/beachfrontRoom.svg);
}

.sc-symbol.bolt-car-fill {
    background-image: url(images/symbols/bolt.car.fill.svg);
}

.sc-symbol.bolt-car {
    background-image: url(images/symbols/bolt.car.svg);
}

.sc-symbol.book {
    background-image: url(images/symbols/book.svg);
}

.sc-symbol.brunch {
    background-image: url(images/symbols/brunch.svg);
}

.sc-symbol.building-2-fill {
    background-image: url(images/symbols/building.2.fill.svg);
}

.sc-symbol.buildings-3d {
    background-image: url(images/symbols/buildings.3d.svg);
}

.sc-symbol.businesscenter {
    background-image: url(images/symbols/businesscenter.svg);
}

.sc-symbol.calendar-badge-clock {
    background-image: url(images/symbols/calendar.badge.clock.svg);
}

.sc-symbol.calendar {
    background-image: url(images/symbols/calendar.svg);
}

.sc-symbol.camera-fill {
    background-image: url(images/symbols/camera.fill.svg);
}

.sc-symbol.car-fill {
    background-image: url(images/symbols/car.fill.svg);
}

.sc-symbol.centerlocation {
    background-image: url(images/symbols/centerLocation.svg);
}

.sc-symbol.checkmark-seal-fill {
    background-image: url(images/symbols/checkmark.seal.fill.svg);
}

.sc-symbol.checkmark-seal {
    background-image: url(images/symbols/checkmark.seal.svg);
}

.sc-symbol.checkmark-square-fill {
    background-image: url(images/symbols/checkmark.square.fill.svg);
}

.sc-symbol.checkmark {
    background-image: url(images/symbols/checkmark.svg);
}

.sc-symbol.chevron-backward-semibold {
    background-image: url(images/symbols/chevron.backward.semibold.svg);
}

.sc-symbol.chevron-compact-left {
    background-image: url(images/symbols/chevron.compact.left.svg);
}

.sc-symbol.chevron-compact-right {
    background-image: url(images/symbols/chevron.compact.right.svg);
}

.sc-symbol.chevron-down {
    background-image: url(images/symbols/chevron.down.svg);
}

.sc-symbol.chevron-forward-semibold {
    background-image: url(images/symbols/chevron.forward.semibold.svg);
}

.sc-symbol.chevron-left-dark {
    background-image: url(images/symbols/chevron.left.dark.svg);
}

.sc-symbol.chevron-left {
    background-image: url(images/symbols/chevron.left.svg);
}

.sc-symbol.chevron-light-right {
    background-image: url(images/symbols/chevron.light.right.svg);
}

.sc-symbol.chevron-right-dark {
    background-image: url(images/symbols/chevron.right.dark.svg);
}

.sc-symbol.chevron-right {
    background-image: url(images/symbols/chevron.right.svg);
}

.sc-symbol.chevron-up-chevron-down {
    background-image: url(images/symbols/chevron.up.chevron.down.svg);
}

.sc-symbol.childrensdiscount {
    background-image: url(images/symbols/childrensDiscount.svg);
}

.sc-symbol.circle-fill {
    background-image: url(images/symbols/circle.fill.svg);
}

.sc-symbol.clock {
    background-image: url(images/symbols/clock.svg);
}

.sc-symbol.conciergeservice {
    background-image: url(images/symbols/conciergeservice.svg);
}

.sc-symbol.connectortypes {
    background-image: url(images/symbols/connectorTypes.svg);
}

.sc-symbol.creditcard-fill {
    background-image: url(images/symbols/creditcard.fill.svg);
}

.sc-symbol.curbsidepickup {
    background-image: url(images/symbols/curbsidePickup.svg);
}

.sc-symbol.devicetradein {
    background-image: url(images/symbols/deviceTradein.svg);
}

.sc-symbol.diamond-fill {
    background-image: url(images/symbols/diamond.fill.svg);
}

.sc-symbol.dinner1 {
    background-image: url(images/symbols/dinner1.svg);
}

.sc-symbol.dinner2 {
    background-image: url(images/symbols/dinner2.svg);
}

.sc-symbol.dinner3 {
    background-image: url(images/symbols/dinner3.svg);
}

.sc-symbol.dollarsign-circle-fill {
    background-image: url(images/symbols/dollarsign.circle.fill.svg);
}

.sc-symbol.dot-radiowaves-up-forward-bold {
    background-image: url(images/symbols/dot.radiowaves.up.forward.bold.svg);
}

.sc-symbol.dot-radiowaves-up-forward {
    background-image: url(images/symbols/dot.radiowaves.up.forward.svg);
}

.sc-symbol.drivethrough {
    background-image: url(images/symbols/drivethrough.svg);
}

.sc-symbol.ellipsis {
    background-image: url(images/symbols/ellipsis.svg);
}

.sc-symbol.ev-plug-ac-gb-t-fill {
    background-image: url(images/symbols/ev.plug.ac.gb.t.fill.svg);
}

.sc-symbol.ev-plug-ac-type-1-fill {
    background-image: url(images/symbols/ev.plug.ac.type.1.fill.svg);
}

.sc-symbol.ev-plug-ac-type-2-fill {
    background-image: url(images/symbols/ev.plug.ac.type.2.fill.svg);
}

.sc-symbol.ev-plug-dc-ccs1-fill {
    background-image: url(images/symbols/ev.plug.dc.ccs1.fill.svg);
}

.sc-symbol.ev-plug-dc-ccs2-fill {
    background-image: url(images/symbols/ev.plug.dc.ccs2.fill.svg);
}

.sc-symbol.ev-plug-dc-chademo-fill {
    background-image: url(images/symbols/ev.plug.dc.chademo.fill.svg);
}

.sc-symbol.ev-plug-dc-gb-t-fill {
    background-image: url(images/symbols/ev.plug.dc.gb.t.fill.svg);
}

.sc-symbol.ev-plug-tesla-fill {
    background-image: url(images/symbols/ev.plug.tesla.fill.svg);
}

.sc-symbol.exclamationmark-bubble {
    background-image: url(images/symbols/exclamationmark.bubble.svg);
}

.sc-symbol.exclamationmark-circle-fill {
    background-image: url(images/symbols/exclamationmark.circle.fill.svg);
}

.sc-symbol.exclamationmark-triangle-fill {
    background-image: url(images/symbols/exclamationmark.triangle.fill.svg);
}

.sc-symbol.familyrooms {
    background-image: url(images/symbols/familyRooms.svg);
}

.sc-symbol.figure-run {
    background-image: url(images/symbols/figure.run.svg);
}

.sc-symbol.figure-walk {
    background-image: url(images/symbols/figure.walk.svg);
}

.sc-symbol.findmy {
    background-image: url(images/symbols/findMy.svg);
}

.sc-symbol.figure-wave {
    background-image: url(images/symbols/figure.wave.svg);
}

.sc-symbol.film {
    background-image: url(images/symbols/film.svg);
}

.sc-symbol.finedining {
    background-image: url(images/symbols/finedining.svg);
}

.sc-symbol.fitnesscenter {
    background-image: url(images/symbols/fitnesscenter.svg);
}

.sc-symbol.foodbuffet {
    background-image: url(images/symbols/foodBuffet.svg);
}

.sc-symbol.fooddairyfree {
    background-image: url(images/symbols/foodDairyfree.svg);
}

.sc-symbol.foodglutenfree {
    background-image: url(images/symbols/foodGlutenfree.svg);
}

.sc-symbol.foodhalal {
    background-image: url(images/symbols/foodHalal.svg);
}

.sc-symbol.foodvegetarian {
    background-image: url(images/symbols/foodVegetarian.svg);
}

.sc-symbol.fork-knife {
    background-image: url(images/symbols/fork.knife.svg);
}

.sc-symbol.freeairportshuttle {
    background-image: url(images/symbols/freeAirportshuttle.svg);
}

.sc-symbol.freebreakfast {
    background-image: url(images/symbols/freeBreakfast.svg);
}

.sc-symbol.genius {
    background-image: url(images/symbols/genius.svg);
}

.sc-symbol.globe-americas-fill-semibold {
    background-image: url(images/symbols/globe.americas.fill.semibold.svg);
}

.sc-symbol.giftcard-fill {
    background-image: url(images/symbols/giftcard.fill.svg);
}

.sc-symbol.globe-americas-fill {
    background-image: url(images/symbols/globe.americas.fill.svg);
}

.sc-symbol.goodforcouples {
    background-image: url(images/symbols/goodforCouples.svg);
}

.sc-symbol.goodforfamilies {
    background-image: url(images/symbols/goodforFamilies.svg);
}

.sc-symbol.goodforhappyhour {
    background-image: url(images/symbols/goodforHappyhour.svg);
}

.sc-symbol.hand-thumbsdown-fill {
    background-image: url(images/symbols/hand.thumbsdown.fill.svg);
}

.sc-symbol.hand-thumbsup-fill {
    background-image: url(images/symbols/hand.thumbsup.fill.svg);
}

.sc-symbol.highchairs {
    background-image: url(images/symbols/highChairs.svg);
}

.sc-symbol.hikingfigure {
    background-image: url(images/symbols/hikingFigure.svg);
}

.sc-symbol.hoteldrycleaning {
    background-image: url(images/symbols/hotelDrycleaning.svg);
}

.sc-symbol.hotelhousekeeping {
    background-image: url(images/symbols/hotelHousekeeping.svg);
}

.sc-symbol.hotelroomservice {
    background-image: url(images/symbols/hotelRoomservice.svg);
}

.sc-symbol.hotelwellnessspajacuzzi {
    background-image: url(images/symbols/hotelWellnessSpaJacuzzi.svg);
}

.sc-symbol.imax {
    background-image: url(images/symbols/imax.svg);
}

.sc-symbol.instorepickup {
    background-image: url(images/symbols/inStorePickup.svg);
}

.sc-symbol.info-circle-fill {
    background-image: url(images/symbols/info.circle.fill.svg);
}

.sc-symbol.info-circle {
    background-image: url(images/symbols/info.circle.svg);
}

.sc-symbol.kidfriendly {
    background-image: url(images/symbols/kidFriendly.svg);
}

.sc-symbol.kidseatfree {
    background-image: url(images/symbols/kidsEatFree.svg);
}

.sc-symbol.kosheroptions {
    background-image: url(images/symbols/kosherOptions.svg);
}

.sc-symbol.largetables {
    background-image: url(images/symbols/largeTables.svg);
}

.sc-symbol.leaf-fill {
    background-image: url(images/symbols/leaf.fill.svg);
}

.sc-symbol.line-3-horizontal {
    background-image: url(images/symbols/line.3.horizontal.svg);
}

.sc-symbol.list-bullet-clipboard {
    background-image: url(images/symbols/list.bullet.clipboard.svg);
}

.sc-symbol.list-bullet-rectangle-portrait-fill {
    background-image: url(images/symbols/list.bullet.rectangle.portrait.fill.svg);
}

.sc-symbol.list-bullet-rectangle-portrait {
    background-image: url(images/symbols/list.bullet.rectangle.portrait.svg);
}

.sc-symbol.location-circle-fill {
    background-image: url(images/symbols/location.circle.fill.svg);
}

.sc-symbol.location-fill-semibold {
    background-image: url(images/symbols/location.fill.semibold.svg);
}

.sc-symbol.location-semibold {
    background-image: url(images/symbols/location.semibold.svg);
}

.sc-symbol.lock-fill {
    background-image: url(images/symbols/lock.fill.svg);
}

.sc-symbol.magnifyingglass-bold {
    background-image: url(images/symbols/magnifyingglass.bold.svg);
}

.sc-symbol.magnifyingglass-circle-fill {
    background-image: url(images/symbols/magnifyingglass.circle.fill.svg);
}

.sc-symbol.magnifyingglass-semibold {
    background-image: url(images/symbols/magnifyingglass.semibold.svg);
}

.sc-symbol.magnifyingglass {
    background-image: url(images/symbols/magnifyingglass.svg);
}

.sc-symbol.map-fill-semibold {
    background-image: url(images/symbols/map.fill.semibold.svg);
}

.sc-symbol.map-fill {
    background-image: url(images/symbols/map.fill.svg);
}

.sc-symbol.mappin-and-ellipse {
    background-image: url(images/symbols/mappin.and.ellipse.svg);
}

.sc-symbol.meetingroom {
    background-image: url(images/symbols/meetingRoom.svg);
}

.sc-symbol.menucard-fill {
    background-image: url(images/symbols/menucard.fill.svg);
}

.sc-symbol.menucard {
    background-image: url(images/symbols/menucard.svg);
}

.sc-symbol.message-fill {
    background-image: url(images/symbols/message.fill.svg);
}

.sc-symbol.message {
    background-image: url(images/symbols/message.svg);
}

.sc-symbol.minus-circle-fill {
    background-image: url(images/symbols/minus.circle.fill.svg);
}

.sc-symbol.minus-semibold {
    background-image: url(images/symbols/minus.semibold.svg);
}

.sc-symbol.nfc {
    background-image: url(images/symbols/nfc.svg);
}

.sc-symbol.nfccontactlesspayment {
    background-image: url(images/symbols/nfcContactlessPayment.svg);
}

.sc-symbol.nonprofit {
    background-image: url(images/symbols/nonprofit.svg);
}

.sc-symbol.open24h {
    background-image: url(images/symbols/open24h.svg);
}

.sc-symbol.outdoorseating {
    background-image: url(images/symbols/outdoorSeating.svg);
}

.sc-symbol.parking-circle-fill {
    background-image: url(images/symbols/parking.circle.fill.svg);
}

.sc-symbol.parking {
    background-image: url(images/symbols/parking.svg);
}

.sc-symbol.parkingbikeparking {
    background-image: url(images/symbols/parkingBikeparking.svg);
}

.sc-symbol.parkingrecvehicleparking {
    background-image: url(images/symbols/parkingRecVehicleparking.svg);
}

.sc-symbol.parkingsign-circle-fill {
    background-image: url(images/symbols/parkingsign.circle.fill.svg);
}

.sc-symbol.person-3-fill {
    background-image: url(images/symbols/person.3.fill.svg);
}

.sc-symbol.person-fill {
    background-image: url(images/symbols/person.fill.svg);
}

.sc-symbol.petswelcome {
    background-image: url(images/symbols/petsWelcome.svg);
}

.sc-symbol.phone-fill {
    background-image: url(images/symbols/phone.fill.svg);
}

.sc-symbol.photo-on-rectangle {
    background-image: url(images/symbols/photo.on.rectangle.svg);
}

.sc-symbol.photo {
    background-image: url(images/symbols/photo.svg);
}

.sc-symbol.pin-point-of-interest-fill {
    background-image: url(images/symbols/pin.point.of.interest.fill.svg);
}

.sc-symbol.plus-circle-fill {
    background-image: url(images/symbols/plus.circle.fill.svg);
}

.sc-symbol.plus-semibold {
    background-image: url(images/symbols/plus.semibold.svg);
}

.sc-symbol.point-bottomleft-forward-to-arrowtriangle-uturn-backward-scurvepath-fill {
    background-image: url(images/symbols/point.bottomleft.forward.to.arrowtriangle.uturn.backward.scurvepath.fill.svg);
}

.sc-symbol.point-bottomleft-forward-to-point-topright-scurvepath-fill {
    background-image: url(images/symbols/point.bottomleft.forward.to.point.topright.scurvepath.fill.svg);
}

.sc-symbol.point-fill-topleft-down-curvedto-point-fill-bottomright-up {
    background-image: url(images/symbols/point.fill.topleft.down.curvedto.point.fill.bottomright.up.svg);
}

.sc-symbol.point-forward-to-point-capsulepath-fill {
    background-image: url(images/symbols/point.forward.to.point.capsulepath.fill.svg);
}

.sc-symbol.powerplug-fill {
    background-image: url(images/symbols/powerplug.fill.svg);
}

.sc-symbol.privaterooms {
    background-image: url(images/symbols/privateRooms.svg);
}

.sc-symbol.questionmark-circle-fill {
    background-image: url(images/symbols/questionmark.circle.fill.svg);
}

.sc-symbol.quote-bubble-fill {
    background-image: url(images/symbols/quote.bubble.fill.svg);
}

.sc-symbol.rectangle-dashed {
    background-image: url(images/symbols/rectangle.dashed.svg);
}

.sc-symbol.reservations {
    background-image: url(images/symbols/reservations.svg);
}

.sc-symbol.restroomgenderneutral {
    background-image: url(images/symbols/restroomGenderNeutral.svg);
}

.sc-symbol.restroomsfamilyrestroom {
    background-image: url(images/symbols/restroomsFamilyRestroom.svg);
}

.sc-symbol.safari-fill {
    background-image: url(images/symbols/safari.fill.svg);
}

.sc-symbol.safari {
    background-image: url(images/symbols/safari.svg);
}

.sc-symbol.selforderingonline {
    background-image: url(images/symbols/selfOrderingOnline.svg);
}

.sc-symbol.servicesdrivethrough {
    background-image: url(images/symbols/servicesDrivethrough.svg);
}

.sc-symbol.shippingbox-fill {
    background-image: url(images/symbols/shippingbox.fill.svg);
}

.sc-symbol.sidebar-left-semibold {
    background-image: url(images/symbols/sidebar.left.semibold.svg);
}

.sc-symbol.sidebar-left {
    background-image: url(images/symbols/sidebar.left.svg);
}

.sc-symbol.smallbizsolution {
    background-image: url(images/symbols/smallbizSolution.svg);
}

.sc-symbol.smallcircle-fill-circle-fill {
    background-image: url(images/symbols/smallcircle.fill.circle.fill.svg);
}

.sc-symbol.smokingallowed {
    background-image: url(images/symbols/smokingAllowed.svg);
}

.sc-symbol.smokingfree {
    background-image: url(images/symbols/smokingFree.svg);
}

.sc-symbol.snowflake {
    background-image: url(images/symbols/snowflake.svg);
}

.sc-symbol.spa {
    background-image: url(images/symbols/spa.svg);
}

.sc-symbol.square-and-arrow-up {
    background-image: url(images/symbols/square.and.arrow.up.svg);
}

.sc-symbol.square-fill {
    background-image: url(images/symbols/square.fill.svg);
}

.sc-symbol.square-grid-2x2-fill-bold {
    background-image: url(images/symbols/square.grid.2x2.fill.bold.svg);
}

.sc-symbol.square-grid-2x2-fill-semibold {
    background-image: url(images/symbols/square.grid.2x2.fill.semibold.svg);
}

.sc-symbol.square-grid-2x2-fill {
    background-image: url(images/symbols/square.grid.2x2.fill.svg);
}

.sc-symbol.square-stack-3d-up-fill {
    background-image: url(images/symbols/square.stack.3d.up.fill.svg);
}

.sc-symbol.star-fill {
    background-image: url(images/symbols/star.fill.svg);
}

.sc-symbol.star-lefthalf-fill {
    background-image: url(images/symbols/star.lefthalf.fill.svg);
}

.sc-symbol.star-slash {
    background-image: url(images/symbols/star.slash.svg);
}

.sc-symbol.star {
    background-image: url(images/symbols/star.svg);
}

.sc-symbol.staroflife-circle-fill {
    background-image: url(images/symbols/staroflife.circle.fill.svg);
}

.sc-symbol.sun-max-fill {
    background-image: url(images/symbols/sun.max.fill.svg);
}

.sc-symbol.swimmingpool {
    background-image: url(images/symbols/swimmingpool.svg);
}

.sc-symbol.tag-fill {
    background-image: url(images/symbols/tag.fill.svg);
}

.sc-symbol.takeoutbag-and-cup-and-straw-fill {
    background-image: url(images/symbols/takeoutbag.and.cup.and.straw.fill.svg);
}

.sc-symbol.takeoutbag-and-cup-and-straw {
    background-image: url(images/symbols/takeoutbag.and.cup.and.straw.svg);
}

.sc-symbol.ticket-fill {
    background-image: url(images/symbols/ticket.fill.svg);
}

.sc-symbol.ticket {
    background-image: url(images/symbols/ticket.svg);
}

.sc-symbol.trash-fill {
    background-image: url(images/symbols/trash.fill.svg);
}

.sc-symbol.tram-fill {
    background-image: url(images/symbols/tram.fill.svg);
}

.sc-symbol.waterfrontroom {
    background-image: url(images/symbols/waterfrontRoom.svg);
}

.sc-symbol.wifi {
    background-image: url(images/symbols/wifi.svg);
}

.sc-symbol.wrench-and-screwdriver-fill {
    background-image: url(images/symbols/wrench.and.screwdriver.fill.svg);
}

.sc-symbol.xmark-circle-fill {
    background-image: url(images/symbols/xmark.circle.fill.svg);
}

.sc-symbol.xmark {
    background-image: url(images/symbols/xmark.svg);
}

@supports (mask-image: url(images/symbols/checkmark.svg)) or (-webkit-mask-image: url(images/symbols/checkmark.svg)) {
    .sc-symbol {
        background-image: none;
        -webkit-mask-image: url(images/symbols/checkmark.svg);
        mask-image: url(images/symbols/checkmark.svg);
        -webkit-mask-size: cover;
        mask-size: cover;
    }

    .sc-symbol.ambiance {
        background-image: none;
        -webkit-mask-image: url(images/symbols/Ambiance.svg);
        mask-image: url(images/symbols/Ambiance.svg);
    }

    .sc-symbol.bicyclerentals {
        background-image: none;
        -webkit-mask-image: url(images/symbols/BicycleRentals.svg);
        mask-image: url(images/symbols/BicycleRentals.svg);
    }

    .sc-symbol.bizmodelsco-op {
        background-image: none;
        -webkit-mask-image: url(images/symbols/BizModelsCo-op.svg);
        mask-image: url(images/symbols/BizModelsCo-op.svg);
    }

    .sc-symbol.cashonly {
        background-image: none;
        -webkit-mask-image: url(images/symbols/CashOnly.svg);
        mask-image: url(images/symbols/CashOnly.svg);
    }

    .sc-symbol.casualdining {
        background-image: none;
        -webkit-mask-image: url(images/symbols/CasualDining.svg);
        mask-image: url(images/symbols/CasualDining.svg);
    }

    .sc-symbol.coffeeshop {
        background-image: none;
        -webkit-mask-image: url(images/symbols/CoffeeShop.svg);
        mask-image: url(images/symbols/CoffeeShop.svg);
    }

    .sc-symbol.coveredoutdoordining {
        background-image: none;
        -webkit-mask-image: url(images/symbols/CoveredOutdoorDining.svg);
        mask-image: url(images/symbols/CoveredOutdoorDining.svg);
    }

    .sc-symbol.englishspoken {
        background-image: none;
        -webkit-mask-image: url(images/symbols/EnglishSpoken.svg);
        mask-image: url(images/symbols/EnglishSpoken.svg);
    }

    .sc-symbol.giftshop {
        background-image: none;
        -webkit-mask-image: url(images/symbols/GiftShop.svg);
        mask-image: url(images/symbols/GiftShop.svg);
    }

    .sc-symbol.golfcourse {
        background-image: none;
        -webkit-mask-image: url(images/symbols/GolfCourse.svg);
        mask-image: url(images/symbols/GolfCourse.svg);
    }

    .sc-symbol.heatedoutdoordining {
        background-image: none;
        -webkit-mask-image: url(images/symbols/HeatedOutdoorDining.svg);
        mask-image: url(images/symbols/HeatedOutdoorDining.svg);
    }

    .sc-symbol.heatedandcoveredoutdoordining {
        background-image: none;
        -webkit-mask-image: url(images/symbols/HeatedandCoveredOutdoorDining.svg);
        mask-image: url(images/symbols/HeatedandCoveredOutdoorDining.svg);
    }

    .sc-symbol.icemachine {
        background-image: none;
        -webkit-mask-image: url(images/symbols/IceMachine.svg);
        mask-image: url(images/symbols/IceMachine.svg);
    }

    .sc-symbol.kidsfreewithoutextrabedding {
        background-image: none;
        -webkit-mask-image: url(images/symbols/KidsFreeWithoutExtraBedding.svg);
        mask-image: url(images/symbols/KidsFreeWithoutExtraBedding.svg);
    }

    .sc-symbol.latenightmeals {
        background-image: none;
        -webkit-mask-image: url(images/symbols/LateNightMeals.svg);
        mask-image: url(images/symbols/LateNightMeals.svg);
    }

    .sc-symbol.laundryservice {
        background-image: none;
        -webkit-mask-image: url(images/symbols/LaundryService.svg);
        mask-image: url(images/symbols/LaundryService.svg);
    }

    .sc-symbol.livemusic {
        background-image: none;
        -webkit-mask-image: url(images/symbols/LiveMusic.svg);
        mask-image: url(images/symbols/LiveMusic.svg);
    }

    .sc-symbol.lunch {
        background-image: none;
        -webkit-mask-image: url(images/symbols/Lunch.svg);
        mask-image: url(images/symbols/Lunch.svg);
    }

    .sc-symbol.lunch1 {
        background-image: none;
        -webkit-mask-image: url(images/symbols/Lunch1.svg);
        mask-image: url(images/symbols/Lunch1.svg);
    }

    .sc-symbol.lunch2 {
        background-image: none;
        -webkit-mask-image: url(images/symbols/Lunch2.svg);
        mask-image: url(images/symbols/Lunch2.svg);
    }

    .sc-symbol.lunch3 {
        background-image: none;
        -webkit-mask-image: url(images/symbols/Lunch3.svg);
        mask-image: url(images/symbols/Lunch3.svg);
    }

    .sc-symbol.lunch4 {
        background-image: none;
        -webkit-mask-image: url(images/symbols/Lunch4.svg);
        mask-image: url(images/symbols/Lunch4.svg);
    }

    .sc-symbol.nightlife {
        background-image: none;
        -webkit-mask-image: url(images/symbols/Nightlife.svg);
        mask-image: url(images/symbols/Nightlife.svg);
    }

    .sc-symbol.onsiteshopping {
        background-image: none;
        -webkit-mask-image: url(images/symbols/OnsiteShopping.svg);
        mask-image: url(images/symbols/OnsiteShopping.svg);
    }

    .sc-symbol.scubadiving {
        background-image: none;
        -webkit-mask-image: url(images/symbols/ScubaDiving.svg);
        mask-image: url(images/symbols/ScubaDiving.svg);
    }

    .sc-symbol.sehablaespanol {
        background-image: none;
        -webkit-mask-image: url(images/symbols/SeHablaEspanol.svg);
        mask-image: url(images/symbols/SeHablaEspanol.svg);
    }

    .sc-symbol.skiinskiout {
        background-image: none;
        -webkit-mask-image: url(images/symbols/SkiInSkiOut.svg);
        mask-image: url(images/symbols/SkiInSkiOut.svg);
    }

    .sc-symbol.snorkeling {
        background-image: none;
        -webkit-mask-image: url(images/symbols/Snorkeling.svg);
        mask-image: url(images/symbols/Snorkeling.svg);
    }

    .sc-symbol.tenniscourt {
        background-image: none;
        -webkit-mask-image: url(images/symbols/TennisCourt.svg);
        mask-image: url(images/symbols/TennisCourt.svg);
    }

    .sc-symbol.waterpark {
        background-image: none;
        -webkit-mask-image: url(images/symbols/Waterpark.svg);
        mask-image: url(images/symbols/Waterpark.svg);
    }

    .sc-symbol.accessibleelevator {
        background-image: none;
        -webkit-mask-image: url(images/symbols/accessibleElevator.svg);
        mask-image: url(images/symbols/accessibleElevator.svg);
    }

    .sc-symbol.accessiblewheelchair {
        background-image: none;
        -webkit-mask-image: url(images/symbols/accessibleWheelchair.svg);
        mask-image: url(images/symbols/accessibleWheelchair.svg);
    }

    .sc-symbol.airconditioning {
        background-image: none;
        -webkit-mask-image: url(images/symbols/airConditioning.svg);
        mask-image: url(images/symbols/airConditioning.svg);
    }

    .sc-symbol.applebadge {
        background-image: none;
        -webkit-mask-image: url(images/symbols/appleBadge.svg);
        mask-image: url(images/symbols/appleBadge.svg);
    }

    .sc-symbol.applepay {
        background-image: none;
        -webkit-mask-image: url(images/symbols/applePay.svg);
        mask-image: url(images/symbols/applePay.svg);
    }

    .sc-symbol.appointmentsonly {
        background-image: none;
        -webkit-mask-image: url(images/symbols/appointmentsOnly.svg);
        mask-image: url(images/symbols/appointmentsOnly.svg);
    }

    .sc-symbol.arrow-down-circle {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.down.circle.svg);
        mask-image: url(images/symbols/arrow.down.circle.svg);
    }

    .sc-symbol.arrow-down {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.down.svg);
        mask-image: url(images/symbols/arrow.down.svg);
    }

    .sc-symbol.arrow-left-and-right {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.left.and.right.svg);
        mask-image: url(images/symbols/arrow.left.and.right.svg);
    }

    .sc-symbol.arrow-triangle-turn-up-right-bold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.triangle.turn.up.right.bold.svg);
        mask-image: url(images/symbols/arrow.triangle.turn.up.right.bold.svg);
    }

    .sc-symbol.arrow-triangle-turn-up-right-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.triangle.turn.up.right.circle.fill.svg);
        mask-image: url(images/symbols/arrow.triangle.turn.up.right.circle.fill.svg);
    }

    .sc-symbol.arrow-triangle-turn-up-right-semibold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.triangle.turn.up.right.semibold.svg);
        mask-image: url(images/symbols/arrow.triangle.turn.up.right.semibold.svg);
    }

    .sc-symbol.arrow-triangle-turn-up-right {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.triangle.turn.up.right.svg);
        mask-image: url(images/symbols/arrow.triangle.turn.up.right.svg);
    }

    .sc-symbol.arrow-up-arrow-down-circle {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.up.arrow.down.circle.svg);
        mask-image: url(images/symbols/arrow.up.arrow.down.circle.svg);
    }

    .sc-symbol.arrow-up-left-square-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.up.left.square.fill.svg);
        mask-image: url(images/symbols/arrow.up.left.square.fill.svg);
    }

    .sc-symbol.arrow-up-left {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.up.left.svg);
        mask-image: url(images/symbols/arrow.up.left.svg);
    }

    .sc-symbol.arrow-up-right-square-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.up.right.square.fill.svg);
        mask-image: url(images/symbols/arrow.up.right.square.fill.svg);
    }

    .sc-symbol.arrow-up-right {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.up.right.svg);
        mask-image: url(images/symbols/arrow.up.right.svg);
    }

    .sc-symbol.arrow-up {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.up.svg);
        mask-image: url(images/symbols/arrow.up.svg);
    }

    .sc-symbol.arrow-up-to-line-alt {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrow.up.to.line.alt.svg);
        mask-image: url(images/symbols/arrow.up.to.line.alt.svg);
    }

    .sc-symbol.arrowtriangle-down-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrowtriangle.down.fill.svg);
        mask-image: url(images/symbols/arrowtriangle.down.fill.svg);
    }

    .sc-symbol.arrowtriangle-up-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/arrowtriangle.up.fill.svg);
        mask-image: url(images/symbols/arrowtriangle.up.fill.svg);
    }

    .sc-symbol.attire {
        background-image: none;
        -webkit-mask-image: url(images/symbols/attire.svg);
        mask-image: url(images/symbols/attire.svg);
    }

    .sc-symbol.bag-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/bag.fill.svg);
        mask-image: url(images/symbols/bag.fill.svg);
    }

    .sc-symbol.barandlounge {
        background-image: none;
        -webkit-mask-image: url(images/symbols/barAndLounge.svg);
        mask-image: url(images/symbols/barAndLounge.svg);
    }

    .sc-symbol.barservicebeerwine {
        background-image: none;
        -webkit-mask-image: url(images/symbols/barserviceBeerWine.svg);
        mask-image: url(images/symbols/barserviceBeerWine.svg);
    }

    .sc-symbol.barservicebeerwinecorkage {
        background-image: none;
        -webkit-mask-image: url(images/symbols/barserviceBeerWineCorkage.svg);
        mask-image: url(images/symbols/barserviceBeerWineCorkage.svg);
    }

    .sc-symbol.barservicefullbar {
        background-image: none;
        -webkit-mask-image: url(images/symbols/barserviceFullBar.svg);
        mask-image: url(images/symbols/barserviceFullBar.svg);
    }

    .sc-symbol.beachfrontroom {
        background-image: none;
        -webkit-mask-image: url(images/symbols/beachfrontRoom.svg);
        mask-image: url(images/symbols/beachfrontRoom.svg);
    }

    .sc-symbol.bolt-car-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/bolt.car.fill.svg);
        mask-image: url(images/symbols/bolt.car.fill.svg);
    }

    .sc-symbol.bolt-car {
        background-image: none;
        -webkit-mask-image: url(images/symbols/bolt.car.svg);
        mask-image: url(images/symbols/bolt.car.svg);
    }

    .sc-symbol.book {
        background-image: none;
        -webkit-mask-image: url(images/symbols/book.svg);
        mask-image: url(images/symbols/book.svg);
    }

    .sc-symbol.brunch {
        background-image: none;
        -webkit-mask-image: url(images/symbols/brunch.svg);
        mask-image: url(images/symbols/brunch.svg);
    }

    .sc-symbol.building-2-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/building.2.fill.svg);
        mask-image: url(images/symbols/building.2.fill.svg);
    }

    .sc-symbol.buildings-3d {
        background-image: none;
        -webkit-mask-image: url(images/symbols/buildings.3d.svg);
        mask-image: url(images/symbols/buildings.3d.svg);
    }

    .sc-symbol.businesscenter {
        background-image: none;
        -webkit-mask-image: url(images/symbols/businesscenter.svg);
        mask-image: url(images/symbols/businesscenter.svg);
    }

    .sc-symbol.calendar-badge-clock {
        background-image: none;
        -webkit-mask-image: url(images/symbols/calendar.badge.clock.svg);
        mask-image: url(images/symbols/calendar.badge.clock.svg);
    }

    .sc-symbol.calendar {
        background-image: none;
        -webkit-mask-image: url(images/symbols/calendar.svg);
        mask-image: url(images/symbols/calendar.svg);
    }

    .sc-symbol.camera-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/camera.fill.svg);
        mask-image: url(images/symbols/camera.fill.svg);
    }

    .sc-symbol.car-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/car.fill.svg);
        mask-image: url(images/symbols/car.fill.svg);
    }

    .sc-symbol.centerlocation {
        background-image: none;
        -webkit-mask-image: url(images/symbols/centerLocation.svg);
        mask-image: url(images/symbols/centerLocation.svg);
    }

    .sc-symbol.checkmark-seal-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/checkmark.seal.fill.svg);
        mask-image: url(images/symbols/checkmark.seal.fill.svg);
    }

    .sc-symbol.checkmark-seal {
        background-image: none;
        -webkit-mask-image: url(images/symbols/checkmark.seal.svg);
        mask-image: url(images/symbols/checkmark.seal.svg);
    }

    .sc-symbol.checkmark-square-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/checkmark.square.fill.svg);
        mask-image: url(images/symbols/checkmark.square.fill.svg);
    }

    .sc-symbol.checkmark {
        background-image: none;
        -webkit-mask-image: url(images/symbols/checkmark.svg);
        mask-image: url(images/symbols/checkmark.svg);
    }

    .sc-symbol.chevron-backward-semibold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.backward.semibold.svg);
        mask-image: url(images/symbols/chevron.backward.semibold.svg);
    }

    .sc-symbol.chevron-compact-left {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.compact.left.svg);
        mask-image: url(images/symbols/chevron.compact.left.svg);
    }

    .sc-symbol.chevron-compact-right {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.compact.right.svg);
        mask-image: url(images/symbols/chevron.compact.right.svg);
    }

    .sc-symbol.chevron-down {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.down.svg);
        mask-image: url(images/symbols/chevron.down.svg);
    }

    .sc-symbol.chevron-forward-semibold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.forward.semibold.svg);
        mask-image: url(images/symbols/chevron.forward.semibold.svg);
    }

    .sc-symbol.chevron-left-dark {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.left.dark.svg);
        mask-image: url(images/symbols/chevron.left.dark.svg);
    }

    .sc-symbol.chevron-left {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.left.svg);
        mask-image: url(images/symbols/chevron.left.svg);
    }

    .sc-symbol.chevron-light-right {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.light.right.svg);
        mask-image: url(images/symbols/chevron.light.right.svg);
    }

    .sc-symbol.chevron-right-dark {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.right.dark.svg);
        mask-image: url(images/symbols/chevron.right.dark.svg);
    }

    .sc-symbol.chevron-right {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.right.svg);
        mask-image: url(images/symbols/chevron.right.svg);
    }

    .sc-symbol.chevron-up-chevron-down {
        background-image: none;
        -webkit-mask-image: url(images/symbols/chevron.up.chevron.down.svg);
        mask-image: url(images/symbols/chevron.up.chevron.down.svg);
    }

    .sc-symbol.childrensdiscount {
        background-image: none;
        -webkit-mask-image: url(images/symbols/childrensDiscount.svg);
        mask-image: url(images/symbols/childrensDiscount.svg);
    }

    .sc-symbol.circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/circle.fill.svg);
        mask-image: url(images/symbols/circle.fill.svg);
    }

    .sc-symbol.clock {
        background-image: none;
        -webkit-mask-image: url(images/symbols/clock.svg);
        mask-image: url(images/symbols/clock.svg);
    }

    .sc-symbol.conciergeservice {
        background-image: none;
        -webkit-mask-image: url(images/symbols/conciergeservice.svg);
        mask-image: url(images/symbols/conciergeservice.svg);
    }

    .sc-symbol.connectortypes {
        background-image: none;
        -webkit-mask-image: url(images/symbols/connectorTypes.svg);
        mask-image: url(images/symbols/connectorTypes.svg);
    }

    .sc-symbol.creditcard-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/creditcard.fill.svg);
        mask-image: url(images/symbols/creditcard.fill.svg);
    }

    .sc-symbol.curbsidepickup {
        background-image: none;
        -webkit-mask-image: url(images/symbols/curbsidePickup.svg);
        mask-image: url(images/symbols/curbsidePickup.svg);
    }

    .sc-symbol.devicetradein {
        background-image: none;
        -webkit-mask-image: url(images/symbols/deviceTradein.svg);
        mask-image: url(images/symbols/deviceTradein.svg);
    }

    .sc-symbol.diamond-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/diamond.fill.svg);
        mask-image: url(images/symbols/diamond.fill.svg);
    }

    .sc-symbol.dinner1 {
        background-image: none;
        -webkit-mask-image: url(images/symbols/dinner1.svg);
        mask-image: url(images/symbols/dinner1.svg);
    }

    .sc-symbol.dinner2 {
        background-image: none;
        -webkit-mask-image: url(images/symbols/dinner2.svg);
        mask-image: url(images/symbols/dinner2.svg);
    }

    .sc-symbol.dinner3 {
        background-image: none;
        -webkit-mask-image: url(images/symbols/dinner3.svg);
        mask-image: url(images/symbols/dinner3.svg);
    }

    .sc-symbol.dollarsign-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/dollarsign.circle.fill.svg);
        mask-image: url(images/symbols/dollarsign.circle.fill.svg);
    }

    .sc-symbol.dot-radiowaves-up-forward-bold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/dot.radiowaves.up.forward.bold.svg);
        mask-image: url(images/symbols/dot.radiowaves.up.forward.bold.svg);
    }

    .sc-symbol.dot-radiowaves-up-forward {
        background-image: none;
        -webkit-mask-image: url(images/symbols/dot.radiowaves.up.forward.svg);
        mask-image: url(images/symbols/dot.radiowaves.up.forward.svg);
    }

    .sc-symbol.drivethrough {
        background-image: none;
        -webkit-mask-image: url(images/symbols/drivethrough.svg);
        mask-image: url(images/symbols/drivethrough.svg);
    }

    .sc-symbol.ellipsis {
        background-image: none;
        -webkit-mask-image: url(images/symbols/ellipsis.svg);
        mask-image: url(images/symbols/ellipsis.svg);
    }

    .sc-symbol.ev-plug-ac-gb-t-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/ev.plug.ac.gb.t.fill.svg);
        mask-image: url(images/symbols/ev.plug.ac.gb.t.fill.svg);
    }

    .sc-symbol.ev-plug-ac-type-1-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/ev.plug.ac.type.1.fill.svg);
        mask-image: url(images/symbols/ev.plug.ac.type.1.fill.svg);
    }

    .sc-symbol.ev-plug-ac-type-2-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/ev.plug.ac.type.2.fill.svg);
        mask-image: url(images/symbols/ev.plug.ac.type.2.fill.svg);
    }

    .sc-symbol.ev-plug-dc-ccs1-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/ev.plug.dc.ccs1.fill.svg);
        mask-image: url(images/symbols/ev.plug.dc.ccs1.fill.svg);
    }

    .sc-symbol.ev-plug-dc-ccs2-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/ev.plug.dc.ccs2.fill.svg);
        mask-image: url(images/symbols/ev.plug.dc.ccs2.fill.svg);
    }

    .sc-symbol.ev-plug-dc-chademo-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/ev.plug.dc.chademo.fill.svg);
        mask-image: url(images/symbols/ev.plug.dc.chademo.fill.svg);
    }

    .sc-symbol.ev-plug-dc-gb-t-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/ev.plug.dc.gb.t.fill.svg);
        mask-image: url(images/symbols/ev.plug.dc.gb.t.fill.svg);
    }

    .sc-symbol.ev-plug-tesla-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/ev.plug.tesla.fill.svg);
        mask-image: url(images/symbols/ev.plug.tesla.fill.svg);
    }

    .sc-symbol.exclamationmark-bubble {
        background-image: none;
        -webkit-mask-image: url(images/symbols/exclamationmark.bubble.svg);
        mask-image: url(images/symbols/exclamationmark.bubble.svg);
    }

    .sc-symbol.exclamationmark-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/exclamationmark.circle.fill.svg);
        mask-image: url(images/symbols/exclamationmark.circle.fill.svg);
    }

    .sc-symbol.exclamationmark-triangle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/exclamationmark.triangle.fill.svg);
        mask-image: url(images/symbols/exclamationmark.triangle.fill.svg);
    }

    .sc-symbol.familyrooms {
        background-image: none;
        -webkit-mask-image: url(images/symbols/familyRooms.svg);
        mask-image: url(images/symbols/familyRooms.svg);
    }

    .sc-symbol.figure-run {
        background-image: none;
        -webkit-mask-image: url(images/symbols/figure.run.svg);
        mask-image: url(images/symbols/figure.run.svg);
    }

    .sc-symbol.figure-walk {
        background-image: none;
        -webkit-mask-image: url(images/symbols/figure.walk.svg);
        mask-image: url(images/symbols/figure.walk.svg);
    }

    .sc-symbol.findmy {
        background-image: none;
        -webkit-mask-image: url(images/symbols/findMy.svg);
        mask-image: url(images/symbols/findMy.svg);
    }

    .sc-symbol.figure-wave {
        background-image: none;
        -webkit-mask-image: url(images/symbols/figure.wave.svg);
        mask-image: url(images/symbols/figure.wave.svg);
    }

    .sc-symbol.film {
        background-image: none;
        -webkit-mask-image: url(images/symbols/film.svg);
        mask-image: url(images/symbols/film.svg);
    }

    .sc-symbol.finedining {
        background-image: none;
        -webkit-mask-image: url(images/symbols/finedining.svg);
        mask-image: url(images/symbols/finedining.svg);
    }

    .sc-symbol.fitnesscenter {
        background-image: none;
        -webkit-mask-image: url(images/symbols/fitnesscenter.svg);
        mask-image: url(images/symbols/fitnesscenter.svg);
    }

    .sc-symbol.foodbuffet {
        background-image: none;
        -webkit-mask-image: url(images/symbols/foodBuffet.svg);
        mask-image: url(images/symbols/foodBuffet.svg);
    }

    .sc-symbol.fooddairyfree {
        background-image: none;
        -webkit-mask-image: url(images/symbols/foodDairyfree.svg);
        mask-image: url(images/symbols/foodDairyfree.svg);
    }

    .sc-symbol.foodglutenfree {
        background-image: none;
        -webkit-mask-image: url(images/symbols/foodGlutenfree.svg);
        mask-image: url(images/symbols/foodGlutenfree.svg);
    }

    .sc-symbol.foodhalal {
        background-image: none;
        -webkit-mask-image: url(images/symbols/foodHalal.svg);
        mask-image: url(images/symbols/foodHalal.svg);
    }

    .sc-symbol.foodvegetarian {
        background-image: none;
        -webkit-mask-image: url(images/symbols/foodVegetarian.svg);
        mask-image: url(images/symbols/foodVegetarian.svg);
    }

    .sc-symbol.fork-knife {
        background-image: none;
        -webkit-mask-image: url(images/symbols/fork.knife.svg);
        mask-image: url(images/symbols/fork.knife.svg);
    }

    .sc-symbol.freeairportshuttle {
        background-image: none;
        -webkit-mask-image: url(images/symbols/freeAirportshuttle.svg);
        mask-image: url(images/symbols/freeAirportshuttle.svg);
    }

    .sc-symbol.freebreakfast {
        background-image: none;
        -webkit-mask-image: url(images/symbols/freeBreakfast.svg);
        mask-image: url(images/symbols/freeBreakfast.svg);
    }

    .sc-symbol.genius {
        background-image: none;
        -webkit-mask-image: url(images/symbols/genius.svg);
        mask-image: url(images/symbols/genius.svg);
    }

    .sc-symbol.giftcard-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/giftcard.fill.svg);
        mask-image: url(images/symbols/giftcard.fill.svg);
    }

    .sc-symbol.globe-americas-fill-semibold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/globe.americas.fill.semibold.svg);
        mask-image: url(images/symbols/globe.americas.fill.semibold.svg);
    }

    .sc-symbol.globe-americas-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/globe.americas.fill.svg);
        mask-image: url(images/symbols/globe.americas.fill.svg);
    }

    .sc-symbol.goodforcouples {
        background-image: none;
        -webkit-mask-image: url(images/symbols/goodforCouples.svg);
        mask-image: url(images/symbols/goodforCouples.svg);
    }

    .sc-symbol.goodforfamilies {
        background-image: none;
        -webkit-mask-image: url(images/symbols/goodforFamilies.svg);
        mask-image: url(images/symbols/goodforFamilies.svg);
    }

    .sc-symbol.goodforhappyhour {
        background-image: none;
        -webkit-mask-image: url(images/symbols/goodforHappyhour.svg);
        mask-image: url(images/symbols/goodforHappyhour.svg);
    }

    .sc-symbol.hand-thumbsdown-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/hand.thumbsdown.fill.svg);
        mask-image: url(images/symbols/hand.thumbsdown.fill.svg);
    }

    .sc-symbol.hand-thumbsup-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/hand.thumbsup.fill.svg);
        mask-image: url(images/symbols/hand.thumbsup.fill.svg);
    }

    .sc-symbol.highchairs {
        background-image: none;
        -webkit-mask-image: url(images/symbols/highChairs.svg);
        mask-image: url(images/symbols/highChairs.svg);
    }

    .sc-symbol.hikingfigure {
        background-image: none;
        -webkit-mask-image: url(images/symbols/hikingFigure.svg);
        mask-image: url(images/symbols/hikingFigure.svg);
    }

    .sc-symbol.hoteldrycleaning {
        background-image: none;
        -webkit-mask-image: url(images/symbols/hotelDrycleaning.svg);
        mask-image: url(images/symbols/hotelDrycleaning.svg);
    }

    .sc-symbol.hotelhousekeeping {
        background-image: none;
        -webkit-mask-image: url(images/symbols/hotelHousekeeping.svg);
        mask-image: url(images/symbols/hotelHousekeeping.svg);
    }

    .sc-symbol.hotelroomservice {
        background-image: none;
        -webkit-mask-image: url(images/symbols/hotelRoomservice.svg);
        mask-image: url(images/symbols/hotelRoomservice.svg);
    }

    .sc-symbol.hotelwellnessspajacuzzi {
        background-image: none;
        -webkit-mask-image: url(images/symbols/hotelWellnessSpaJacuzzi.svg);
        mask-image: url(images/symbols/hotelWellnessSpaJacuzzi.svg);
    }

    .sc-symbol.imax {
        background-image: none;
        -webkit-mask-image: url(images/symbols/imax.svg);
        mask-image: url(images/symbols/imax.svg);
    }

    .sc-symbol.instorepickup {
        background-image: none;
        -webkit-mask-image: url(images/symbols/inStorePickup.svg);
        mask-image: url(images/symbols/inStorePickup.svg);
    }

    .sc-symbol.info-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/info.circle.fill.svg);
        mask-image: url(images/symbols/info.circle.fill.svg);
    }

    .sc-symbol.info-circle {
        background-image: none;
        -webkit-mask-image: url(images/symbols/info.circle.svg);
        mask-image: url(images/symbols/info.circle.svg);
    }

    .sc-symbol.kidfriendly {
        background-image: none;
        -webkit-mask-image: url(images/symbols/kidFriendly.svg);
        mask-image: url(images/symbols/kidFriendly.svg);
    }

    .sc-symbol.kidseatfree {
        background-image: none;
        -webkit-mask-image: url(images/symbols/kidsEatFree.svg);
        mask-image: url(images/symbols/kidsEatFree.svg);
    }

    .sc-symbol.kosheroptions {
        background-image: none;
        -webkit-mask-image: url(images/symbols/kosherOptions.svg);
        mask-image: url(images/symbols/kosherOptions.svg);
    }

    .sc-symbol.largetables {
        background-image: none;
        -webkit-mask-image: url(images/symbols/largeTables.svg);
        mask-image: url(images/symbols/largeTables.svg);
    }

    .sc-symbol.leaf-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/leaf.fill.svg);
        mask-image: url(images/symbols/leaf.fill.svg);
    }

    .sc-symbol.line-3-horizontal {
        background-image: none;
        -webkit-mask-image: url(images/symbols/line.3.horizontal.svg);
        mask-image: url(images/symbols/line.3.horizontal.svg);
    }

    .sc-symbol.list-bullet-clipboard {
        background-image: none;
        -webkit-mask-image: url(images/symbols/list.bullet.clipboard.svg);
        mask-image: url(images/symbols/list.bullet.clipboard.svg);
    }

    .sc-symbol.list-bullet-rectangle-portrait-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/list.bullet.rectangle.portrait.fill.svg);
        mask-image: url(images/symbols/list.bullet.rectangle.portrait.fill.svg);
    }

    .sc-symbol.list-bullet-rectangle-portrait {
        background-image: none;
        -webkit-mask-image: url(images/symbols/list.bullet.rectangle.portrait.svg);
        mask-image: url(images/symbols/list.bullet.rectangle.portrait.svg);
    }

    .sc-symbol.location-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/location.circle.fill.svg);
        mask-image: url(images/symbols/location.circle.fill.svg);
    }

    .sc-symbol.location-fill-semibold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/location.fill.semibold.svg);
        mask-image: url(images/symbols/location.fill.semibold.svg);
    }

    .sc-symbol.location-semibold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/location.semibold.svg);
        mask-image: url(images/symbols/location.semibold.svg);
    }

    .sc-symbol.lock-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/lock.fill.svg);
        mask-image: url(images/symbols/lock.fill.svg);
    }

    .sc-symbol.magnifyingglass-bold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/magnifyingglass.bold.svg);
        mask-image: url(images/symbols/magnifyingglass.bold.svg);
    }

    .sc-symbol.magnifyingglass-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/magnifyingglass.circle.fill.svg);
        mask-image: url(images/symbols/magnifyingglass.circle.fill.svg);
    }

    .sc-symbol.magnifyingglass-semibold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/magnifyingglass.semibold.svg);
        mask-image: url(images/symbols/magnifyingglass.semibold.svg);
    }

    .sc-symbol.magnifyingglass {
        background-image: none;
        -webkit-mask-image: url(images/symbols/magnifyingglass.svg);
        mask-image: url(images/symbols/magnifyingglass.svg);
    }

    .sc-symbol.map-fill-semibold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/map.fill.semibold.svg);
        mask-image: url(images/symbols/map.fill.semibold.svg);
    }

    .sc-symbol.map-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/map.fill.svg);
        mask-image: url(images/symbols/map.fill.svg);
    }

    .sc-symbol.mappin-and-ellipse {
        background-image: none;
        -webkit-mask-image: url(images/symbols/mappin.and.ellipse.svg);
        mask-image: url(images/symbols/mappin.and.ellipse.svg);
    }

    .sc-symbol.meetingroom {
        background-image: none;
        -webkit-mask-image: url(images/symbols/meetingRoom.svg);
        mask-image: url(images/symbols/meetingRoom.svg);
    }

    .sc-symbol.menucard-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/menucard.fill.svg);
        mask-image: url(images/symbols/menucard.fill.svg);
    }

    .sc-symbol.menucard {
        background-image: none;
        -webkit-mask-image: url(images/symbols/menucard.svg);
        mask-image: url(images/symbols/menucard.svg);
    }

    .sc-symbol.message-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/message.fill.svg);
        mask-image: url(images/symbols/message.fill.svg);
    }

    .sc-symbol.message {
        background-image: none;
        -webkit-mask-image: url(images/symbols/message.svg);
        mask-image: url(images/symbols/message.svg);
    }

    .sc-symbol.minus-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/minus.circle.fill.svg);
        mask-image: url(images/symbols/minus.circle.fill.svg);
    }

    .sc-symbol.minus-semibold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/minus.semibold.svg);
        mask-image: url(images/symbols/minus.semibold.svg);
    }

    .sc-symbol.nfc {
        background-image: none;
        -webkit-mask-image: url(images/symbols/nfc.svg);
        mask-image: url(images/symbols/nfc.svg);
    }

    .sc-symbol.nfccontactlesspayment {
        background-image: none;
        -webkit-mask-image: url(images/symbols/nfcContactlessPayment.svg);
        mask-image: url(images/symbols/nfcContactlessPayment.svg);
    }

    .sc-symbol.nonprofit {
        background-image: none;
        -webkit-mask-image: url(images/symbols/nonprofit.svg);
        mask-image: url(images/symbols/nonprofit.svg);
    }

    .sc-symbol.open24h {
        background-image: none;
        -webkit-mask-image: url(images/symbols/open24h.svg);
        mask-image: url(images/symbols/open24h.svg);
    }

    .sc-symbol.outdoorseating {
        background-image: none;
        -webkit-mask-image: url(images/symbols/outdoorSeating.svg);
        mask-image: url(images/symbols/outdoorSeating.svg);
    }

    .sc-symbol.parking-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/parking.circle.fill.svg);
        mask-image: url(images/symbols/parking.circle.fill.svg);
    }

    .sc-symbol.parking {
        background-image: none;
        -webkit-mask-image: url(images/symbols/parking.svg);
        mask-image: url(images/symbols/parking.svg);
    }

    .sc-symbol.parkingbikeparking {
        background-image: none;
        -webkit-mask-image: url(images/symbols/parkingBikeparking.svg);
        mask-image: url(images/symbols/parkingBikeparking.svg);
    }

    .sc-symbol.parkingrecvehicleparking {
        background-image: none;
        -webkit-mask-image: url(images/symbols/parkingRecVehicleparking.svg);
        mask-image: url(images/symbols/parkingRecVehicleparking.svg);
    }

    .sc-symbol.parkingsign-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/parkingsign.circle.fill.svg);
        mask-image: url(images/symbols/parkingsign.circle.fill.svg);
    }

    .sc-symbol.person-3-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/person.3.fill.svg);
        mask-image: url(images/symbols/person.3.fill.svg);
    }

    .sc-symbol.person-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/person.fill.svg);
        mask-image: url(images/symbols/person.fill.svg);
    }

    .sc-symbol.petswelcome {
        background-image: none;
        -webkit-mask-image: url(images/symbols/petsWelcome.svg);
        mask-image: url(images/symbols/petsWelcome.svg);
    }

    .sc-symbol.phone-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/phone.fill.svg);
        mask-image: url(images/symbols/phone.fill.svg);
    }

    .sc-symbol.photo-on-rectangle {
        background-image: none;
        -webkit-mask-image: url(images/symbols/photo.on.rectangle.svg);
        mask-image: url(images/symbols/photo.on.rectangle.svg);
    }

    .sc-symbol.photo {
        background-image: none;
        -webkit-mask-image: url(images/symbols/photo.svg);
        mask-image: url(images/symbols/photo.svg);
    }

    .sc-symbol.pin-point-of-interest-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/pin.point.of.interest.fill.svg);
        mask-image: url(images/symbols/pin.point.of.interest.fill.svg);
    }

    .sc-symbol.plus-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/plus.circle.fill.svg);
        mask-image: url(images/symbols/plus.circle.fill.svg);
    }

    .sc-symbol.plus-semibold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/plus.semibold.svg);
        mask-image: url(images/symbols/plus.semibold.svg);
    }

    .sc-symbol.point-bottomleft-forward-to-arrowtriangle-uturn-backward-scurvepath-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/point.bottomleft.forward.to.arrowtriangle.uturn.backward.scurvepath.fill.svg);
        mask-image: url(images/symbols/point.bottomleft.forward.to.arrowtriangle.uturn.backward.scurvepath.fill.svg);
    }

    .sc-symbol.point-bottomleft-forward-to-point-topright-scurvepath-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/point.bottomleft.forward.to.point.topright.scurvepath.fill.svg);
        mask-image: url(images/symbols/point.bottomleft.forward.to.point.topright.scurvepath.fill.svg);
    }

    .sc-symbol.point-fill-topleft-down-curvedto-point-fill-bottomright-up {
        background-image: none;
        -webkit-mask-image: url(images/symbols/point.fill.topleft.down.curvedto.point.fill.bottomright.up.svg);
        mask-image: url(images/symbols/point.fill.topleft.down.curvedto.point.fill.bottomright.up.svg);
    }

    .sc-symbol.point-forward-to-point-capsulepath-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/point.forward.to.point.capsulepath.fill.svg);
        mask-image: url(images/symbols/point.forward.to.point.capsulepath.fill.svg);
    }

    .sc-symbol.powerplug-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/powerplug.fill.svg);
        mask-image: url(images/symbols/powerplug.fill.svg);
    }

    .sc-symbol.privaterooms {
        background-image: none;
        -webkit-mask-image: url(images/symbols/privateRooms.svg);
        mask-image: url(images/symbols/privateRooms.svg);
    }

    .sc-symbol.questionmark-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/questionmark.circle.fill.svg);
        mask-image: url(images/symbols/questionmark.circle.fill.svg);
    }

    .sc-symbol.quote-bubble-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/quote.bubble.fill.svg);
        mask-image: url(images/symbols/quote.bubble.fill.svg);
    }

    .sc-symbol.rectangle-dashed {
        background-image: none;
        -webkit-mask-image: url(images/symbols/rectangle.dashed.svg);
        mask-image: url(images/symbols/rectangle.dashed.svg);
    }

    .sc-symbol.reservations {
        background-image: none;
        -webkit-mask-image: url(images/symbols/reservations.svg);
        mask-image: url(images/symbols/reservations.svg);
    }

    .sc-symbol.restroomgenderneutral {
        background-image: none;
        -webkit-mask-image: url(images/symbols/restroomGenderNeutral.svg);
        mask-image: url(images/symbols/restroomGenderNeutral.svg);
    }

    .sc-symbol.restroomsfamilyrestroom {
        background-image: none;
        -webkit-mask-image: url(images/symbols/restroomsFamilyRestroom.svg);
        mask-image: url(images/symbols/restroomsFamilyRestroom.svg);
    }

    .sc-symbol.safari-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/safari.fill.svg);
        mask-image: url(images/symbols/safari.fill.svg);
    }

    .sc-symbol.safari {
        background-image: none;
        -webkit-mask-image: url(images/symbols/safari.svg);
        mask-image: url(images/symbols/safari.svg);
    }

    .sc-symbol.selforderingonline {
        background-image: none;
        -webkit-mask-image: url(images/symbols/selfOrderingOnline.svg);
        mask-image: url(images/symbols/selfOrderingOnline.svg);
    }

    .sc-symbol.servicesdrivethrough {
        background-image: none;
        -webkit-mask-image: url(images/symbols/servicesDrivethrough.svg);
        mask-image: url(images/symbols/servicesDrivethrough.svg);
    }

    .sc-symbol.shippingbox-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/shippingbox.fill.svg);
        mask-image: url(images/symbols/shippingbox.fill.svg);
    }

    .sc-symbol.sidebar-left-semibold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/sidebar.left.semibold.svg);
        mask-image: url(images/symbols/sidebar.left.semibold.svg);
    }

    .sc-symbol.sidebar-left {
        background-image: none;
        -webkit-mask-image: url(images/symbols/sidebar.left.svg);
        mask-image: url(images/symbols/sidebar.left.svg);
    }

    .sc-symbol.smallbizsolution {
        background-image: none;
        -webkit-mask-image: url(images/symbols/smallbizSolution.svg);
        mask-image: url(images/symbols/smallbizSolution.svg);
    }

    .sc-symbol.smallcircle-fill-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/smallcircle.fill.circle.fill.svg);
        mask-image: url(images/symbols/smallcircle.fill.circle.fill.svg);
    }

    .sc-symbol.smokingallowed {
        background-image: none;
        -webkit-mask-image: url(images/symbols/smokingAllowed.svg);
        mask-image: url(images/symbols/smokingAllowed.svg);
    }

    .sc-symbol.smokingfree {
        background-image: none;
        -webkit-mask-image: url(images/symbols/smokingFree.svg);
        mask-image: url(images/symbols/smokingFree.svg);
    }

    .sc-symbol.snowflake {
        background-image: none;
        -webkit-mask-image: url(images/symbols/snowflake.svg);
        mask-image: url(images/symbols/snowflake.svg);
    }

    .sc-symbol.spa {
        background-image: none;
        -webkit-mask-image: url(images/symbols/spa.svg);
        mask-image: url(images/symbols/spa.svg);
    }

    .sc-symbol.square-and-arrow-up {
        background-image: none;
        -webkit-mask-image: url(images/symbols/square.and.arrow.up.svg);
        mask-image: url(images/symbols/square.and.arrow.up.svg);
    }

    .sc-symbol.square-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/square.fill.svg);
        mask-image: url(images/symbols/square.fill.svg);
    }

    .sc-symbol.square-grid-2x2-fill-bold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/square.grid.2x2.fill.bold.svg);
        mask-image: url(images/symbols/square.grid.2x2.fill.bold.svg);
    }

    .sc-symbol.square-grid-2x2-fill-semibold {
        background-image: none;
        -webkit-mask-image: url(images/symbols/square.grid.2x2.fill.semibold.svg);
        mask-image: url(images/symbols/square.grid.2x2.fill.semibold.svg);
    }

    .sc-symbol.square-grid-2x2-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/square.grid.2x2.fill.svg);
        mask-image: url(images/symbols/square.grid.2x2.fill.svg);
    }

    .sc-symbol.square-stack-3d-up-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/square.stack.3d.up.fill.svg);
        mask-image: url(images/symbols/square.stack.3d.up.fill.svg);
    }

    .sc-symbol.star-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/star.fill.svg);
        mask-image: url(images/symbols/star.fill.svg);
    }

    .sc-symbol.star-lefthalf-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/star.lefthalf.fill.svg);
        mask-image: url(images/symbols/star.lefthalf.fill.svg);
    }

    .sc-symbol.star-slash {
        background-image: none;
        -webkit-mask-image: url(images/symbols/star.slash.svg);
        mask-image: url(images/symbols/star.slash.svg);
    }

    .sc-symbol.star {
        background-image: none;
        -webkit-mask-image: url(images/symbols/star.svg);
        mask-image: url(images/symbols/star.svg);
    }

    .sc-symbol.staroflife-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/staroflife.circle.fill.svg);
        mask-image: url(images/symbols/staroflife.circle.fill.svg);
    }

    .sc-symbol.sun-max-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/sun.max.fill.svg);
        mask-image: url(images/symbols/sun.max.fill.svg);
    }

    .sc-symbol.swimmingpool {
        background-image: none;
        -webkit-mask-image: url(images/symbols/swimmingpool.svg);
        mask-image: url(images/symbols/swimmingpool.svg);
    }

    .sc-symbol.tag-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/tag.fill.svg);
        mask-image: url(images/symbols/tag.fill.svg);
    }

    .sc-symbol.takeoutbag-and-cup-and-straw-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/takeoutbag.and.cup.and.straw.fill.svg);
        mask-image: url(images/symbols/takeoutbag.and.cup.and.straw.fill.svg);
    }

    .sc-symbol.takeoutbag-and-cup-and-straw {
        background-image: none;
        -webkit-mask-image: url(images/symbols/takeoutbag.and.cup.and.straw.svg);
        mask-image: url(images/symbols/takeoutbag.and.cup.and.straw.svg);
    }

    .sc-symbol.ticket-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/ticket.fill.svg);
        mask-image: url(images/symbols/ticket.fill.svg);
    }

    .sc-symbol.ticket {
        background-image: none;
        -webkit-mask-image: url(images/symbols/ticket.svg);
        mask-image: url(images/symbols/ticket.svg);
    }

    .sc-symbol.trash-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/trash.fill.svg);
        mask-image: url(images/symbols/trash.fill.svg);
    }

    .sc-symbol.tram-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/tram.fill.svg);
        mask-image: url(images/symbols/tram.fill.svg);
    }

    .sc-symbol.waterfrontroom {
        background-image: none;
        -webkit-mask-image: url(images/symbols/waterfrontRoom.svg);
        mask-image: url(images/symbols/waterfrontRoom.svg);
    }

    .sc-symbol.wifi {
        background-image: none;
        -webkit-mask-image: url(images/symbols/wifi.svg);
        mask-image: url(images/symbols/wifi.svg);
    }

    .sc-symbol.wrench-and-screwdriver-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/wrench.and.screwdriver.fill.svg);
        mask-image: url(images/symbols/wrench.and.screwdriver.fill.svg);
    }

    .sc-symbol.xmark-circle-fill {
        background-image: none;
        -webkit-mask-image: url(images/symbols/xmark.circle.fill.svg);
        mask-image: url(images/symbols/xmark.circle.fill.svg);
    }

    .sc-symbol.xmark {
        background-image: none;
        -webkit-mask-image: url(images/symbols/xmark.svg);
        mask-image: url(images/symbols/xmark.svg);
    }
}

.mw-modal-card {
    position: relative;
    line-height: 1.324em;
    background: #f9f9f9;
    outline: none;
}

.mw-modal-card-header {
    position: relative;
    overflow: hidden;
    background: #f9f9f9;
    padding: 16px;
}

.mw-modal-card-header.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}

.mw-modal-card-header::after {
    width: 100%;
    position: absolute;
    left: 0;
}

.mw-inner:not(.scrolled) .mw-modal-card-header::after {
    background: none;
}

.mw-modal-card-header h1 {
    font-size: 1em;
    line-height: 1.589em;
    font-weight: 600;
    margin: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.mw-card .mw-modal-card-header div.mw-close {
    margin: 16px;
    height: 1.588em;
    width: 1.588em;
}

/* Inner Scrolling */
@media screen and (min-width: 701px) and (min-height: 501px), screen and (min-width: 901px) {
    .mw-modal-card {
        height: 100%;
        overflow-y: scroll;
    }
}

/* Full page scrolling */
@media print, (max-width: 700px), (max-width: 900px) and (max-height: 500px) {
    /* In full page scroll the header should not be sticky */
    .mw-modal-card-header.sticky {
        position: relative;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .mw-modal-card,
    .mw-modal-card-header {
        background: #242628;
    }
}

.mw-photo-gallery-module {
    border-radius: 8px;
}

.mw-photo-gallery-module .sc-container {
    background-color: rgba(0, 0, 0, 0.8);
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

/* Arrow buttons css for photo gallery */
.sc-photo-gallery .sc-arrow-buttons .mw-forward {
    left: calc(100% - 1em - 20px);
}

.sc-photo-gallery .sc-arrow-buttons .mw-back {
    left: 20px;
}

.sc-photo-gallery horizontal-pages {
    position: relative;
    left: 0;
    right: 0;
    width: 100%;
    font-size: 0; /* Avoid extra magical padding added by anchor tags. */
    height: calc(100% - 28px - 1.324em);
}

.sc-photo-gallery horizontal-pages .mw-scrollable {
    scroll-snap-type: x mandatory;
    scroll-padding: 30px;
    height: 100%;
}

.sc-photo-gallery horizontal-pages:not(.use-touch) .mw-scrollable {
    -webkit-clip-path: none;
    clip-path: none;
}

.mw-photo-gallery-module .sc-photo-gallery horizontal-pages .mw-scrollable > .sc-item:first-child {
    margin-left: 350px;
}

.mw-photo-gallery-module .sc-photo-gallery horizontal-pages .mw-scrollable > .sc-item:last-child {
    margin-right: 350px;
}

.mw-photo-gallery-module .sc-photo-gallery horizontal-pages .mw-scrollable > .sc-item {
    margin-right: 20px;
}

.sc-photo-gallery header {
    padding: 18px; /* Keep in sync with mw-close margin */
    color: rgb(142, 142, 147);
    text-align: center;
}

.sc-photo-gallery header div.mw-close,
.mw-rtl .sc-photo-gallery header div.mw-close {
    margin: 18px; /* Keep in sync with header padding */
    cursor: pointer;
    outline: none;
}

.sc-photo-gallery header div.mw-close {
    background-color: transparent;
}

@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 .sc-photo-gallery header div.mw-close .sc-symbol.xmark {
        background-color: rgb(255, 255, 255);
    }

    .sc-photo-gallery .sc-arrow-buttons .sc-symbol {
        background-color: rgb(255, 255, 255);
    }
}

.sc-photo-gallery .sc-photo-gallery-item {
    position: relative;
    display: inline-block;
    height: 75vh;
    width: calc(100% - 2 * (20px + 20px + 1em));
    white-space: nowrap;
    margin-top: max(3%, 44px);

    scroll-snap-align: center;
    cursor: pointer;
    background-image: url(images/photo-fill-on-rectangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.sc-photo-gallery .sc-photo-gallery-item.obfuscate {
    background-image: none;
}

.sc-photo-gallery .sc-photo-gallery-item scheduled-image {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;

    margin: 1em auto;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    transition: opacity 250ms ease-in, visibility 250ms ease-in;
}

.sc-photo-gallery .sc-photo-gallery-item .blur-layer {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 10px;
}

.sc-photo-gallery .sc-photo-gallery-item .blur-layer .blur-attribution {
    font-size: 0.882rem;
    font-weight: 600;
    position: relative;
    top: 50%;
    color: #fff;
    text-align: center;
}

.sc-photo-gallery .sc-photo-gallery-item .blur-layer .sc-symbol {
    display: inline-block;
    height: 0.882rem;
    width: 0.882rem;
    vertical-align: middle;
    margin-left: 4px;
}

.mw-rtl .sc-photo-gallery .sc-photo-gallery-item .blur-layer .sc-symbol {
    margin-left: 0;
    margin-right: 4px;
}

.sc-photo-gallery .sc-photo-item-attribution {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 10px 0;
    padding: 3px 16px;
    font-size: 0.647rem;
    letter-spacing: 0.07px;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.sc-photo-gallery .sc-photo-gallery-title {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.647rem; /* ~11px */
    line-height: 0.765rem; /* ~13px */
    font-weight: 600;
}

.sc-photo-gallery .sc-photo-text {
    position: absolute;
    bottom: -47px;
    width: 67%;
    text-align: center;
    margin: 0 16.5%;
}

.sc-photo-gallery div.mw-close.mw-text-button {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 16px;
    padding: 9px 16px;
    color: rgb(255, 255, 255);
    font-weight: 400;
    font-size: 0.941rem;
    margin: 20px;
    display: flex;
    align-items: center;
    top: 0;
}

@supports (mask-image: url(images/symbols/arrow.up.right.square.fill.svg)) or (-webkit-mask-image: url(images/symbols/arrow.up.right.square.fill.svg)) {
    .sc-photo-gallery .sc-photo-gallery-item .blur-layer .sc-symbol {
        background-color: rgb(255, 255, 255);
    }
}

.sc-photo-gallery .sc-photo-caption {
    left: 0;
    right: 0;
    width: 80%;
    margin: 0 auto;

    color: #fff;
    text-align: center;
    padding: 0;
    font-size: 0.824rem; /* ~14px */
    font-weight: 600;
    cursor: auto;
}

.sc-photo-gallery .sc-photo-caption.annotated-list {
    bottom: 30px;
}

.sc-photo-gallery .sc-photo-caption .sc-caption-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-photo-gallery-module .sc-photo-gallery .sc-item {
    transition: opacity 250ms linear;
    will-change: opacity;
}

.mw-photo-gallery-module .sc-photo-gallery .sc-item.inactive-photo {
    opacity: 0.3;
}

.mw-rtl .sc-container.sc-photo-gallery horizontal-pages .mw-scrollable > .sc-item {
    margin-right: unset;
    margin-left: 20px;
}

.mw-rtl .sc-container.sc-photo-gallery horizontal-pages .mw-scrollable > .sc-item:first-child {
    margin-right: 350px;
}

.mw-rtl .sc-container.sc-photo-gallery horizontal-pages .mw-scrollable > .sc-item:last-child {
    margin-left: 350px;
}

/* Small Screen UI */
@media (max-width: 700px), (max-width: 900px) and (max-height: 500px) {
    .mw-photo-gallery-module {
        height: 100%;
    }

    .mw-photo-gallery-module .sc-container {
        background-color: #000;
        border-radius: 0;
    }

    .sc-photo-gallery horizontal-pages .mw-scrollable {
        scroll-snap-type: x mandatory;
        scroll-padding: 20px;
    }

    .sc-photo-gallery horizontal-pages:not(.use-touch) .mw-scrollable {
        -webkit-clip-path: inset(0 20px 0 20px);
        clip-path: inset(0 20px 0 20px);
    }

    .sc-photo-gallery .sc-photo-gallery-item {
        width: 100%;
        background-color: transparent;
    }

    .sc-photo-gallery .sc-photo-gallery-item scheduled-image,
    .sc-photo-gallery .sc-photo-gallery-item .blur-layer {
        border-radius: 0;
    }

    .mw-photo-gallery-module .sc-photo-gallery horizontal-pages .mw-scrollable > .sc-item,
    .mw-photo-gallery-module .sc-photo-gallery horizontal-pages .mw-scrollable > .sc-item:first-child,
    .mw-photo-gallery-module .sc-photo-gallery horizontal-pages .mw-scrollable > .sc-item:last-child {
        margin: max(5%, 44px) 50px 0 50%;
    }

    .mw-photo-gallery-module .sc-photo-gallery .sc-item {
        transition: none;
    }

    .mw-photo-gallery-module .sc-photo-gallery .sc-item.inactive-photo {
        opacity: 1;
    }

    .sc-photo-gallery .sc-photo-caption {
        font-size: 0.8rem;
        bottom: 35px;
    }

    .mw-photo-gallery-module .sc-container .sc-arrow-buttons {
        top: -60px;
    }

    .sc-photo-gallery .sc-arrow-buttons .mw-forward {
        left: calc(100% - 1em);
    }

    .sc-photo-gallery .sc-arrow-buttons .mw-back {
        left: 0;
    }

    .sc-photo-gallery div.mw-close.mw-text-button {
        margin: 16px;
    }
}

/*
If it's supported, use background blur effect.
*/
@supports ((backdrop-filter: blur(22px)) or (-webkit-backdrop-filter: blur(22px))) {
    .sc-photo-gallery .sc-photo-item-attribution {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

@supports (mask-image: url(images/symbols/exclamationmark.triangle.fill.svg)) or (-webkit-mask-image: url(images/symbols/exclamationmark.triangle.fill.svg)) {
    .sc-transit-incident-list-item .sc-symbol.exclamationmark-triangle-fill {
        background-color: #e8af3c;
    }
}

.sc-transit-incident-list-item {
    margin: 14px 16px;
}

.sc-transit-incident-list-item:first-of-type {
    margin: 0 14px 16px;
}

.sc-transit-incident-list-item .sc-advisory.with-timestamp.sc-platter-container .sc-advisory-logo {
    height: 1.53em; /* ~ 26px */
    width: 1.765em; /* ~ 30px */
}

.sc-advisory .sc-platter-description-cell {
    display: flex;
    padding: 14px 16px;
}

.sc-advisory .sc-advisory-logo {
    float: left;
    width: 1.412em; /* ~ 24px */
    height: 1.412em;
    margin: 0 calc(2.648em / 4) 0 0;    /* (2 * line-height / 4) */

    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.mw-rtl .sc-advisory .sc-advisory-logo {
    margin: 0 0 0 calc(2.648em / 4);    /* (2 * line-height / 4) */
}

.sc-advisory.with-timestamp.sc-platter-container .sc-advisory-logo {
    margin: 6px 10px 8px 0;
    width: 1.765em; /* ~ 30px */
    height: 1.765em;
}

.mw-rtl .sc-advisory.with-timestamp.sc-platter-container .sc-advisory-logo {
    float: right;
    margin: 6px 0 8px 10px;
}

.sc-advisory .sc-advisory-header-text {
    display: none;
}

.sc-advisory-header-text .sc-platter-description-cell-title {
    font-size: 1em;
}

.sc-advisory:not(.with-timestamp) .sc-advisory-header-text .sc-platter-description-cell-title {
    margin: 1px 0 1px 0;
}

.sc-advisory-header .sc-advisory-time {
    margin-top: 2px;

    color: var(--color-subheadline);
    font-size: 0.88em;
    line-height: 1.2;
}

/* If we receive a longer than usual alert message
   we should try to handle this gracefully by truncating the
   paragraph and displaying an ellipsis at the end of the truncated text.
   This shouldn't happen because the alerts we receive should be relatively short.
   However, this could happen with some device orientations and font sizes.
*/
.sc-advisory .sc-advisory-text {
    margin-top: 0;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    box-sizing: border-box;
    color: var(--color-text);
}

.sc-advisory .sc-advisory-read-more {
    padding: 0 16px 14px calc(16px + 1.412em + 10px);   /* platter padding + logo width + logo margin */
}

.mw-rtl .sc-advisory .sc-advisory-read-more {
    padding: 0 calc(16px + 1.412em + 10px) 14px 16px;
}

.sc-advisory .sc-advisory-read-more a {
    color: var(--color-link);
    text-decoration: none;
    outline: none;
}

.sc-advisory .sc-platter-cell-hairline-top::after {
    display: none;
}

/* iOS 15 / macOS 12 Styling */
.sc-ios-15-0 .sc-advisory .sc-advisory-header-text,
.sc-macos-12-0 .sc-advisory .sc-advisory-header-text,
.sc-advisory.with-timestamp .sc-advisory-header-text {
    display: unset;
    line-height: 1.3;
}

.sc-ios-15-0 .sc-advisory .sc-platter-cell-hairline-top::after,
.sc-macos-12-0 .sc-advisory .sc-platter-cell-hairline-top::after,
.sc-advisory.with-timestamp .sc-platter-cell-hairline-top::after {
    display: unset;
}

.sc-ios-15-0 .sc-advisory .sc-advisory-logo,
.sc-macos-12-0 .sc-advisory .sc-advisory-logo {
    margin: 0 10px 0 0;
}

.sc-ios-15-0.mw-rtl .sc-advisory .sc-advisory-logo,
.sc-macos-12-0.mw-rtl .sc-advisory .sc-advisory-logo {
    float: right;
    margin: 0 0 0 10px;
}

.sc-ios-15-0 .sc-advisory .sc-platter-description-cell,
.sc-macos-12-0 .sc-advisory .sc-platter-description-cell,
.sc-advisory.with-timestamp .sc-platter-description-cell {
    display: grid;
}

.sc-ios-15-0 .sc-advisory .sc-advisory-text,
.sc-macos-12-0 .sc-advisory .sc-advisory-text,
.sc-advisory.with-timestamp .sc-advisory-text {
    margin-top: 8px;
}

.sc-ios-15-0 .sc-advisory .sc-advisory-read-more,
.sc-macos-12-0 .sc-advisory .sc-advisory-read-more,
.sc-advisory.with-timestamp .sc-advisory-read-more {
    padding: 14px 16px;
}

.sc-curated-collection-list {
    height: auto;
    padding: 0px 16px 16px 16px;
}

.sc-curated-collection-list .mw-brick:not(first-child) {
    height: 150px;
    margin-top: 8px;
}

.sc-event-items-container {
    position: relative;
    left: -16px;
    right: -16px;
    width: calc(100% + 32px);
}

.sc-event-items-container horizontal-pages .mw-scrollable {
    scroll-snap-type: x proximity;
    scroll-padding: 16px;
}

/* Web Module Styles */
#web-module .sc-section-header-container {
    padding: 0 16px 12px 16px;
    box-sizing: border-box;
}

#web-module .sc-events-section-header-title {
    font-size: 1.1765em;
    font-weight: 600;
}

#web-module .sc-event-items-container horizontal-pages .mw-scrollable {
    scroll-snap-type: none;
}

.sc-web-module .sc-events {
    overflow-x: hidden;
    padding: 0 16px 8px 16px;
}

.sc-web-module .sc-events horizontal-pages .mw-scrollable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;
}

.sc-web-module .sc-events horizontal-pages .mw-controls {
    display: none;
}

/* Mac OS 12  Styles */
#web-module.sc-macos-12-0.sc-web-module .sc-events {
    padding: 0 24px 8px 24px;
}

/* Mac OS 13 Styles */
#web-module.mw-macos.sc-macos-13-0 .sc-section-header-container,
#web-module.mw-macos.sc-macos-13-0 .sc-events {
    padding: 0 24px 8px 24px;
}

#web-module.mw-macos.sc-macos-13-0 .sc-event-items-container {
    width: 100%;
    right: 0;
    left: 0;
}

#web-module.mw-macos.sc-macos-13-0.sc-web-module .sc-events horizontal-pages .mw-scrollable {
    -webkit-clip-path: inset(0 0 round 10px);
    clip-path: inset(0 0 round 10px);
}

.sc-event {
    width: 308px;
    max-width: calc(100% - 48px); /* 16px for left margin + 16px for spacing between 2 events + 16px for peek */
    margin: 0 8px;
    display: inline-block;
    scroll-snap-align: start;
    border-radius: 10px;
}

.use-arrows .sc-event {
    max-width: calc(100% - 64px); /* 16px for left margin + 16px for spacing between 2 events + 16px for peek + 16px for clip-path to show arrows */
}

.sc-event:first-child {
    margin-left: 16px;
}

.mw-rtl .sc-event:first-child {
    margin-right: 16px;
    margin-left: 8px;
}

.sc-event:last-child {
    margin-right: 16px;
}

.mw-rtl .sc-event:last-child {
    margin-right: 8px;
    margin-left: 16px;
}

.sc-event:only-child {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
}

.sc-event .sc-event-image {
    width: 100%;
    height: 172px;

    border-radius: 10px 10px 0 0;
    background-color: var(--color-image-placeholder);
}

.sc-event .sc-event-image scheduled-image {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0 0;
}

.sc-event .sc-event-info {
    padding: 16px;
    background-color: var(--color-background);
    border-radius: 0 0 10px 10px;
    position: relative;
}

.sc-event .sc-event-info .sc-event-title {
    font-size: 0.94em;
    font-weight: 600;
    height: 1.25em;
    line-height: 1.25;
    margin-bottom: 2px;
}

.sc-event .sc-event-info .sc-event-subtitle {
    font-size: 0.882em;
    height: 1.33em;
    line-height: 1.33;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sc-event .sc-event-info .sc-event-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 16px 0 0 0;
}

.sc-event .sc-event-info .sc-event-date {
    flex: 2 2;
    height: 2.77em;
    max-width: 100%;

    font-size: 0.765em;
    line-height: 1.385;
    color: var(--color-subheadline);
}

.sc-event .sc-event-info .sc-event-date .sc-event-time {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    flex-wrap: nowrap;
}

/* Vibrant color scheme when the web module is rendered in spotlight search, siri, or the contacts card */
.vibrant .sc-event .sc-event-info {
    background: var(--color-background-vibrant);
    -webkit-backdrop-filter: blur(10px);
}

.vibrant .sc-event .sc-event-info .sc-event-date {
    color: rgba(255, 255, 255, 0.5);
}

.sc-event .sc-event-info .sc-event-action {
    margin: auto;
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 12px 4px 12px;
    height: 1.177em;

    border-radius: 28px;
    background-color: var(--color-gray6);
    text-align: center;
}

.sc-event .sc-event-info .sc-event-action a {
    color: var(--color-link);
    text-decoration: none;
    font-size: 0.882em;
    font-weight: 700;
}

/* Web Module Styles */

/**
 * Inline background-image should not load before the web module is ready
 * .mw-web-module-ready (web module initialized by the web-view-bridge.js)
 * FIXME: rdar://73939749 (Clean-up CSS classes on <body> used to delay image loading, and add tests)
 */
body:not(.mw-web-module-ready) .sc-web-module .sc-events .sc-event-image div {
    background-image: none !important;
}

/* We do not use ProcessedImage for the web module version and instead use background-image set inline */
.sc-web-module .sc-events .sc-event-image div,
.sc-web-content .sc-events .sc-event-image div {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0 0;
    background-size: cover;
}

/* Dark Mode */
@media screen and (prefers-color-scheme: dark) {
    .sc-event .sc-event-image,
    .sc-event .sc-event-info .sc-event-action {
        background-color: rgba(255, 255, 255, 0.07);
    }

    .sc-event .sc-event-info .sc-event-title,
    .sc-event .sc-event-info .sc-event-subtitle {
        color: var(--color-gray-min);
    }

    .vibrant .sc-event .sc-event-info {
        background: color(--color-background-vibrant);
    }
}

/* Mac OS 13 Styles */
#web-module.mw-macos.sc-macos-13-0 .sc-event:first-child {
    margin-left: 0;
}

#web-module.mw-macos.sc-macos-13-0.mw-rtl .sc-event:first-child {
    margin-right: 0;
    margin-left: 8px;
}

#web-module.mw-macos.sc-macos-13-0 .sc-event:last-child {
    margin-right: 0;
}

#web-module.mw-macos.sc-macos-13-0.mw-rtl .sc-event:last-child {
    margin-right: 8px;
    margin-left: 0;
}

#web-module.mw-macos.sc-macos-13-0 .sc-event:only-child {
    width: calc(100% - 48px);
    max-width: calc(100% - 48px);
}

.sc-container .sc-fixed-header {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    width: calc(100% - 1px); /* Leaving room for the tray border in light mode. */
    padding: 14px 16px;
    box-sizing: border-box;

    z-index: 10;
    will-change: opacity;
    margin: 0;
    pointer-events: none;

    --background-color: unset;
    --background-color-dark: #242628;
    background-color: var(--background-color);
}

.mw-rtl .sc-fixed-header {
    left: 1px;
}

.sc-container .sc-business-assets {
    margin: 0;
    padding: 0;
    width: 100%;
}

#shell-custom-header .mw-close:not(.go-to-publisher) {
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

#shell-custom-header .mw-close .sc-symbol.xmark {
    background-color: #fff;
}

.sc-container .sc-business-assets .background-collapsed {
    display: none;
}

.sc-container .sc-cover-photo {
    margin: 0;
    width: 100%;

    --background-color: #f2f2f6;
    --background-color-dark: #2c2b2d;
    background-color: var(--background-color);
}

.sc-cover-photo scheduled-image {
    height: 152px;
}

.sc-container .sc-header-logo {
    position: relative;
    top: -40px;    /* 40px of the logo should be on the cover photo */
    left: 16px;
    margin-bottom: -40px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-sizing: border-box;

    --box-shadow: inset 0 0 0 1px rgba(116, 116, 128, 0.08), 0 0 0 2px rgb(247, 247, 244);
    --box-shadow-dark: inset 0 0 0 1px rgba(118, 118, 128, 0.18), 0 0 0 2px rgb(52, 52, 59);
    box-shadow: var(--box-shadow);

    --background-color: #f2f2f6;
    --background-color-dark: #2c2b2d;
    background-color: var(--background-color);
}

.mw-rtl .sc-container .sc-header-logo {
    left: unset;
    right: 16px;
}

.sc-container .sc-header-logo scheduled-image {
    height: 100%;
    border-radius: 50%;
}

/* When only cover photo is present, the vertical spacing between business-assets and header should be 16px */
.sc-container .sc-business-assets + .sc-header-container {
    padding-top: 0;
    margin-top: 16px;
}

/* When both cover photo + logo is present, the vertical spacing between business-assets and header should be 8px */
.sc-container .sc-business-assets.with-logo + .sc-header-container {
    padding-top: 0;
    margin-top: 8px;
}

@media screen and (prefers-color-scheme: dark) {
    .sc-container .sc-fixed-header {
        width: calc(100%);
    }

    .mw-rtl .sc-fixed-header {
        left: 0;
    }

    :root:not(.mw-light) .sc-container .sc-header-logo {
        --box-shadow: var(--box-shadow-dark);
        --background-color: var(--background-color-dark);
    }

    :root:not(.mw-light) .sc-container .sc-cover-photo {
        --background-color: var(--background-color-dark);
    }
}

:root.mw-dark .sc-container .sc-header-logo {
    --box-shadow: var(--box-shadow-dark);
    --background-color: var(--background-color-dark);
}

:root.mw-dark .sc-container .sc-cover-photo {
    --background-color: var(--background-color-dark);
}

.sc-fixed-header .sc-header-title,
.sc-header-container .sc-header-title {
    padding: 0;
    margin: 0 0 2px 0;

    font-size: 1.647em;
    line-height: 1.143;
    font-weight: 700;
    overflow-wrap: break-word;
}

.sc-header-container .sc-header-title:only-child {
    margin: 0;
}

/* If there is no close / share button, the fixed header should be 100% width */
:not(.sc-room-for-close):not(.sc-room-for-share) .sc-fixed-header .sc-header-title {
    width: 100%;
}

/* The fixed header should only have space for the close button as the share button fades away */
.sc-room-for-close.sc-room-for-share .sc-fixed-header .sc-header-title {
    width: calc(100% - 1.765rem - 10px);
}

.sc-room-for-share .sc-header-container .sc-header-title {
    width: calc(100% - 1.765rem - 10px);
}

.sc-room-for-close:not(.sc-room-for-share) .sc-header-container .sc-header-title {
    width: calc(100% - 1.765rem - 16px);
}

.sc-room-for-close.sc-room-for-share .sc-header-container .sc-header-title:not(.with-business-assets) {
    width: calc(100% - (2 * 1.765rem) - 16px);
}

.sc-header-container .sc-header-title.with-business-assets {
    width: 100%;
}

/* Share button */
.mw-card .sc-container .sc-share {
    position: relative;
    bottom: -16px;
    margin-bottom: -1.765em; /* keep in sync with height of .sc-share */
    transition: opacity 0.1s ease;
    opacity: var(--share-button-opacity-value, 1);
    transform: translateY(var(--share-transform-value));
}

/* Share + Close button */
.sc-room-for-share.sc-room-for-close .sc-share {
    left: calc(100% - 16px - (1.765em * 2) - 10px); /* 16px margin from shell-tray - (2 * width of share/close) - 10px spacing between share & close */
}

/* Only share button */
.sc-room-for-share:not(.sc-room-for-close) .sc-share {
    left: calc(100% - 16px - 1.765em); /* 16px margin from shell-tray - width of share */
}

/* RTL - Only Share button */
.mw-rtl .sc-room-for-share:not(.sc-room-for-close) .sc-share {
    left: unset;
    right: calc(100% - 16px - 1.765em); /* 16px margin from shell-tray - width of share */
}

/* RTL - Share + Close button */
.mw-rtl .sc-room-for-share.sc-room-for-close .sc-share {
    left: unset;
    right: calc(100% - 16px - (1.765em * 2) - 10px); /* 16px margin from shell-tray - (2 * width of share/close) - 10px spacing between share & close */
}

/* Share button with logo */
.mw-card .sc-container.preview-tool .sc-business-assets + .sc-share,
.sc-business-assets.with-logo + .sc-share {
    bottom: 152px; /* keep in sync with height of cover photo */
}

/* Share button without logo */
.sc-business-assets:not(.with-logo) + .sc-share {
    /* When we don't have the logo we move up by an additional 16px i.e, the spacing between bottom of cover photo and bottom of logo */
    bottom: calc(152px - 16px); /* keep in sync with height of cover photo */
}

.sc-container .mw-close {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.mw-card .sc-container.preview-tool .sc-business-assets + .sc-share,
.mw-card .sc-container .sc-business-assets + .sc-share {
    background-color: rgba(0, 0, 0, 0.2);
}

.mw-card .sc-business-assets + .sc-share + .mw-close,
/* On unsupported browser we may not have the share button */
.mw-card .sc-business-assets + .mw-close {
    background-color: rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}

.mw-card .sc-business-assets + .sc-share + .mw-close.default,
/* On unsupported browser we may not have the share button */
.mw-card .sc-business-assets + .mw-close.default {
    background-color: rgba(143, 143, 146, 0.14);
}

.mw-card .mw-close:focus-visible,
.mw-card .sc-share:focus-visible {
    box-shadow: 0 0 0 2px #007cff;
    outline: 0;
}

@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 .sc-container .sc-business-assets + div.sc-share .sc-symbol.square-and-arrow-up,
    .mw-card .sc-container.preview-tool .sc-business-assets + .sc-share .sc-symbol.square-and-arrow-up,
    .mw-card .sc-business-assets + .sc-share + .mw-close .sc-symbol.xmark,
    /* On unsupported browser we may not have the share button */
    .mw-card .sc-business-assets + .mw-close .sc-symbol.xmark {
        background-color: #fff;
        opacity: 0.9;
    }

    .mw-card .sc-business-assets + .sc-share + .mw-close.default .sc-symbol.xmark,
    /* On unsupported browser we may not have the share button */
    .mw-card .sc-business-assets + .mw-close.default .sc-symbol.xmark {
        background-color: rgb(128, 128, 133);
    }
}

.sc-header-container .sc-header-subtitle {
    margin: 0 0 4px 0;
    line-height: 1.1765em;

    color: #8e8e93;
    font-size: 1em;
}

.sc-header-containment-feature,
.sc-header-line {
    font-size: 0.882em;
    line-height: 1.47;
}

.sc-header-line-link {
    margin-top: 4px;
}

.sc-header-container .sc-header-contained-place,
.sc-header-container .sc-header-link {
    text-decoration: none;

    --color: #0a7bff;
    --color-more-contrast: rgb(0, 64, 220);
    --color-more-contrast-dark: rgb(64, 156, 255);
    color: var(--color);
}

.sc-header-container .sc-thumbsup-icon {
    display: inline-block;

    --background-image: url(images/thumbsup.svg);
    --background-image-dark: url(images/thumbsup-light.svg);
    background-image: var(--background-image);

    width: 0.75em;
    height: 0.75em;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 0 0.2em 0 0;
}

.sc-header-container .sc-attribution-link {
    display: block;
    font-size: 0.9em;
    color: #8e8e93;
    text-decoration: none;
}

.sc-header-container .sc-attribution-link .sc-symbol {
    width: 0.8em;
    height: 0.8em;
    display: inline-block;
    background-color: #8e8e93;
}

@media screen and (prefers-color-scheme: dark) {
    :root:not(.mw-light) .sc-header-container .sc-thumbsup-icon {
        --background-image: var(--background-image-dark);
    }
}

:root.mw-dark .sc-header-container .sc-thumbsup-icon {
    --background-image: var(--background-image-dark);
}

/* Inner Scrolling */
@media screen and (min-width: 701px) and (min-height: 501px), screen and (min-width: 901px) {
    .sc-container .sc-fixed-header {
        position: fixed;
        visibility: visible;

        --background-color: #f9f9f9;
        --background-color-dark: #242628;
        background-color: var(--background-color);
        opacity: 0;
    }

    .sc-fixed-header::after {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;

        background: rgba(0, 0, 0, 0.1);
        content: "";
    }

    .mw-inner .sc-fixed-header {
        opacity: var(--fixed-header-opacity-value, 0);
    }

    .sc-fixed-header .sc-header-title {
        margin: 0;
        height: 1.2em;
        overflow: hidden;

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

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

@media screen and (prefers-color-scheme: dark) {
    :root:not(.mw-light) .sc-container .sc-fixed-header {
        --background-color: var(--background-color-dark);
    }

    .sc-fixed-header::after {
        background: linear-gradient(transparent 0%, transparent 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 100%);
    }

    .mw-card .sc-business-assets + .sc-share + .mw-close.default,
    /* On unsupported browser we may not have the share button */
    .mw-card .sc-business-assets + .mw-close.default {
        background-color: rgba(255, 255, 255, 0.25);
    }

    @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 .sc-business-assets + .sc-share + .mw-close.default .sc-symbol.xmark,
        /* On unsupported browser we may not have the share button */
        .mw-card .sc-business-assets + .mw-close.default .sc-symbol.xmark {
            background-color: #fff;
        }
    }
}

:root.mw-dark .sc-container .sc-fixed-header {
    --background-color: var(--background-color-dark);
}

/* Full page scrolling or print, no margins */
@media print, (max-width: 500px) {
    .mw-card:not(.hidden)[module-type="place"] {
        overflow: unset;

        --business-assets-clip-path-value: 84px;
        --business-assets-transform-value: -84px;
        --business-assets-background-opacity-value: 1;
        --close-share-transform-value: 0;
    }

    #shell-wrapper:not(.uses-custom-shell-header) .mw-card:not(.hidden)[module-type="place"] {
        overflow: hidden;
    }

    #shell-custom-header .mw-shell-custom-header.sc-header-title {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        background: #f9f9f9;
        height: 2em;
        line-height: 2em;
        font-size: 1.3em;
        font-weight: 600;
        padding: 0 8px 0 14px;
        box-sizing: border-box;
        border-bottom: 1px #e2e2e2 solid;
        margin: 0;
        opacity: var(--custom-header-content-opacity-value, 0);
        transition: opacity 150ms ease-in-out;
        will-change: opacity;
    }

    .mw-rtl #shell-custom-header .mw-shell-custom-header {
        padding: 0 14px 0 8px;
    }

    .sc-container {
        border-radius: 12px 12px 0 0;
    }

    .sc-container.no-border-radius {
        border-radius: 0;
    }

    .sc-container .sc-fixed-header {
        opacity: 0;
    }

    .sc-container > .sc-business-assets {
        position: absolute;
        clip-path: inset(var(--business-assets-clip-path-value) 0 round 12px 12px 0 0);
        transform: translateY(var(--business-assets-transform-value));
        will-change: transform;

        --background-color: #f9f9f9; /* sync with color of .sc-container in smartcard.css */
        --background-color-dark: #242628; /* sync with color of .sc-container in smartcard.css */
        background-color: var(--background-color);
    }

    /* When only cover photo is present, the vertical spacing between business-assets and header should be 16px */
    .sc-container .sc-business-assets + .sc-header-container {
        padding-top: 16px;
        margin-top: 0;
    }

    /* When both cover photo + logo is present, the vertical spacing between business-assets and header should be 8px */
    .sc-container .sc-business-assets.with-logo + .sc-header-container {
        padding-top: 16px;
        margin-top: 0;
    }

    .sc-container .sc-business-assets.with-logo {
        margin-top: 8px;
    }

    .sc-container .sc-business-assets .background-collapsed {
        display: block;
        opacity: var(--business-assets-background-opacity-value);
        height: 152px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;

        --background-color: #f9f9f9; /* sync with color of .sc-container in smartcard.css */
        --background-color-dark: #242628; /* sync with color of .sc-container in smartcard.css */
        background-color: var(--background-color);
    }

    .sc-container > .sc-cover-photo {
        --background-color: unset;
        --background-color-dark: #242628; /* sync with color of .sc-container in smartcard.css */
        background-color: var(--background-color);
    }

    .sc-container .sc-business-assets.with-logo .background-collapsed {
        height: 168px; /* 152px of cover-photo + 16px of logo underneath cover-photo */
    }

    .mw-card .sc-container .sc-business-assets + .sc-share,
    .mw-card .sc-container .sc-share {
        bottom: -16px;
    }

    .mw-card .sc-container .sc-share,
    .mw-card .sc-container .mw-close {
        transform: translateY(var(--close-share-transform-value));
    }

    .mw-card .sc-container .sc-business-assets + .sc-share,
    .mw-card .sc-business-assets + .sc-share + .mw-close,
    /* On unsupported browser we may not have the share button */
    .mw-card .sc-business-assets + .mw-close {
        background-color: rgba(143, 143, 146, 0.14);
        transition: background-color 0.2s ease;
    }

    .mw-card .sc-container .sc-business-assets + .sc-share.default,
    .mw-card .sc-business-assets + .sc-share + .mw-close.default,
    /* On unsupported browser we may not have the share button */
    .mw-card .sc-business-assets + .mw-close.default {
        background-color: rgba(0, 0, 0, 0.2);
    }

    @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 .sc-container .sc-business-assets + div.sc-share .sc-symbol.square-and-arrow-up,
        .mw-card .sc-business-assets + .sc-share + .mw-close .sc-symbol.xmark,
        /* On unsupported browser we may not have the share button */
        .mw-card .sc-business-assets + .mw-close .sc-symbol.xmark {
            background-color: rgb(128, 128, 133);
        }

        .mw-card .sc-container .sc-business-assets + div.sc-share.default .sc-symbol.square-and-arrow-up,
        .mw-card .sc-business-assets + .sc-share + .mw-close.default .sc-symbol.xmark,
        /* On unsupported browser we may not have the share button */
        .mw-card .sc-business-assets + .mw-close.default .sc-symbol.xmark {
            background-color: #fff;
            opacity: 0.9;
        }
    }

    .sc-room-for-share .sc-header-container .sc-header-title.sc-header-title.with-business-assets,
    .sc-room-for-share .sc-header-container .sc-header-title.sc-header-title {
        width: calc(100% - 1.765rem - 10px);
    }

    .sc-room-for-share.sc-room-for-close .sc-header-container .sc-header-title.with-business-assets,
    .sc-room-for-share.sc-room-for-close .sc-header-container .sc-header-title {
        width: calc(100% - 74px);
    }

    @media screen and (prefers-color-scheme: dark) {
        :root:not(.mw-light) .sc-container > .sc-business-assets,
        :root:not(.mw-light) .sc-container .sc-business-assets .background-collapsed,
        :root:not(.mw-light) .sc-container > .sc-cover-photo {
            --background-color: var(--background-color-dark);
        }

        #shell-custom-header .mw-shell-custom-header.sc-header-title {
            background: #242628; /* sync with color of .sc-container in smartcard.css */
            border: none;
        }

        .mw-card .sc-container .sc-business-assets + .sc-share,
        .mw-card .sc-business-assets + .sc-share + .mw-close,
        /* On unsupported browser we may not have the share button */
        .mw-card .sc-business-assets + .mw-close {
            background-color: rgba(255, 255, 255, 0.25);
            transition: background-color 0.2s ease;
        }

        @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 .sc-container .sc-business-assets + div.sc-share .sc-symbol.square-and-arrow-up,
            .mw-card .sc-business-assets + .sc-share + .mw-close .sc-symbol.xmark,
            /* On unsupported browser we may not have the share button */
            .mw-card .sc-business-assets + .mw-close .sc-symbol.xmark {
                background-color: rgb(255, 255, 255);
            }
        }
    }

    :root.mw-dark .sc-container > .sc-business-assets,
    :root.mw-dark .sc-container .sc-business-assets .background-collapsed,
    :root.mw-dark .sc-container > .sc-cover-photo {
        --background-color: var(--background-color-dark);
    }
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-header-container .sc-header-contained-place,
    .sc-header-container .sc-header-link {
        --color: var(--color-more-contrast);
    }

    :root.mw-dark .sc-header-container .sc-header-contained-place,
    :root.mw-dark .sc-header-container .sc-header-link {
        --color: var(--color-more-contrast-dark);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    :root:not(.mw-light) .sc-header-container .sc-header-contained-place,
    :root:not(.mw-light) .sc-header-container .sc-header-link {
        --color: var(--color-more-contrast-dark);
    }
}

/* In preview tool we want to show the entire businessAssets as the default because there is no scrolling behavior in the preview tool */

.sc-container.preview-tool .sc-business-assets .background-collapsed {
    display: none;
}

.sc-container.preview-tool .sc-business-assets {
    position: unset;
    clip-path: unset;
    transform: unset;
    will-change: unset;
}

.sc-container.preview-tool .sc-business-assets.with-logo {
    margin-top: 0;
}

.sc-header-container > .sc-transit-labels {
    margin-top: 4px;
    line-height: 1.29;
}

.sc-transit-labels .sc-transit-label-separator {
    width: 1px;
    height: 12px;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    margin: 0 5px 0 5px;
    display: inline-block;
    vertical-align: middle;
}

.sc-transit-labels img {
    width: auto;
    height: auto;
    max-height: 1em;
    margin-left: 3px;
    vertical-align: middle;
}

.mw-rtl .sc-transit-labels img {
    margin-left: 0;
    margin-right: 3px;
}

.sc-transit-labels .sc-transit-label-separator + picture img,
.sc-transit-labels picture:first-of-type img {
    margin-left: 0;
}

.mw-rtl .sc-transit-labels .sc-transit-label-separator + picture img,
.mw-rtl .sc-transit-labels picture:first-of-type img {
    margin-right: 0;
}

@media screen and (prefers-color-scheme: dark) {
    .sc-transit-labels .sc-transit-label-separator {
        border-color: rgba(255, 255, 255, 0.25);
    }
}

.mw-card div.sc-share {
    font-size: 1em;
    width: 1.765em;
    height: 1.765em;
    z-index: 10;
    margin: 0;
    outline: none;

    background-color: rgba(143, 143, 146, 0.14);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mw-card div.sc-share:active {
    background-color: rgba(143, 143, 146, 0.34);
}

.mw-card div.sc-share .sc-symbol.square-and-arrow-up {
    width: 1em;
    height: 1em;
    position: relative;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
}

.mw-rtl .mw-card div.sc-share .sc-symbol.square-and-arrow-up {
    left: unset;
    right: calc(50% - 0.5em);
}

@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 div.sc-share .sc-symbol.square-and-arrow-up {
        background-color: rgb(128, 128, 133);
    }
}

.mw-rtl .mw-card div.sc-share {
    right: auto;
    left: 0;
}

@media screen and (prefers-color-scheme: dark) {
    .mw-card div.sc-share {
        background-color: rgba(255, 255, 255, 0.25);
    }

    .mw-card div.sc-share:active {
        background-color: rgba(255, 255, 255, 0.45);
    }

    @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 div.sc-share .sc-symbol.square-and-arrow-up {
            background-color: rgb(255, 255, 255);
        }
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .mw-card div.sc-share {
        background-color: rgb(54, 54, 56);
    }

    .mw-card div.sc-share .sc-symbol.square-and-arrow-up {
        background-color: rgb(174, 174, 178);
    }
}

.sc-action-buttons-container {
    display: flex;

    flex-wrap: wrap;
    gap: 8px;
}

.mw-rtl .sc-action-buttons-container {
    order: -1;
}

/* Without ellipsis, the primary and secondary button should have min-width of at least 50% - gap from the flex container */
.sc-action-buttons-container:not(.with-ellipsis) .sc-primary-button {
    min-width: calc(50% - 4px);
}

.sc-action-buttons-container:not(.with-ellipsis) > .sc-secondary-button {
    min-width: calc(50% - 4px);
}

/* With ellipsis, the primary button should have a min-width that accounts for the width and padding of the ellipsis menu + the extra gap */
.sc-action-buttons-container.with-ellipsis .sc-primary-button {
    min-width: calc(50% - 8px - 8px - (1.295em / 2));
}

.sc-action-buttons-container.with-ellipsis .sc-secondary-actions-container {
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
    min-width: calc(50% + 8px + (1.295em / 2));
}

.sc-action-buttons-container .sc-button {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    height: 2.83em; /* ~48px */
    box-sizing: border-box;
    padding: 8px;

    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.mw-rtl .sc-action-buttons-container .sc-button {
    order: -1;
}

.sc-action-buttons-container .sc-button .sc-button-title {
    line-height: 1.3em;
    font-weight: 600;
    vertical-align: top;
    display: inline-flex;
}

.sc-action-buttons-container .sc-primary-button {
    background: #0278fc;
    color: rgb(255, 255, 255);
}

.sc-action-buttons-container .sc-primary-button:hover {
    background: #006fe7;
    text-decoration: none;
}

.sc-action-buttons-container .sc-primary-button:active {
    background: #0064cf;
}

.sc-action-buttons-container .sc-secondary-button,
.sc-action-buttons-container .mw-toggle .sc-ellipsis-button {
    background: rgba(0, 0, 0, 0.06);
    color: #0278fc;
}

.sc-action-buttons-container .sc-secondary-button:hover,
.sc-action-buttons-container .mw-toggle .sc-ellipsis-button:hover {
    background: rgba(0, 0, 0, 0.09);
    text-decoration: none;
}

.sc-action-buttons-container .sc-secondary-button:active,
.sc-action-buttons-container .mw-toggle .sc-ellipsis-button:active {
    background: #dadada;
    text-decoration: none;
}

.sc-action-buttons-container .mw-toggle .sc-ellipsis-button {
    display: flex;
    align-items: center;
    border-radius: 8px;
    height: 2.83em; /* ~48px */
    box-sizing: border-box;
    padding: 8px;

    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.sc-action-buttons-container .mw-toggle .sc-ellipsis-button .sc-icon {
    width: 1.295em;
    height: 1.295em;
}

.mw-rtl .sc-action-buttons-container .mw-toggle .sc-ellipsis-button .sc-icon {
    margin-left: 0;
}

/* FIXME: rdar://84667980 (Investigate sharing more CSS between the Media Integration and SmartCard Ellipsis UIMenu) */
.sc-action-buttons-container .mw-popup-menu .mw-popup-menu-row-item {
    background-color: rgba(242, 242, 247, 0.95);
}

@supports (-webkit-backdrop-filter: blur(10px)) {
    .sc-action-buttons-container .mw-popup-menu .mw-popup-menu-row-item {
        background-color: rgba(242, 242, 247, 0.7);
        -webkit-backdrop-filter: blur(10px);
    }
}

.sc-action-buttons-container .mw-popup-menu .mw-popup-menu-row-item:hover {
    background-color: rgba(234, 234, 237, 0.95);
}

.sc-action-buttons-container .mw-popup-menu .mw-popup-menu-row-item:active {
    background-color: rgba(226, 226, 227, 0.95);
}

.sc-action-buttons-container .mw-popup-menu .unfocused .mw-popup-menu-row-item:hover {
    background-color: rgba(242, 242, 247, 0.95);
}

.sc-action-buttons-container .mw-popup-menu .unfocused .mw-popup-menu-row-item:active {
    background-color: rgba(242, 242, 247, 0.95);
}

.sc-action-buttons-container .mw-popup-menu .mw-popup-menu-row-item .sc-action-button-item-logo {
    display: flex;
}

.sc-action-buttons-container .sc-button .sc-icon {
    flex: 0 0 auto;
    width: 1.295em;
    height: 1.295em;
    margin-right: 8px;
}

.mw-rtl .sc-action-buttons-container .sc-button .sc-icon {
    margin-right: unset;
    margin-left: 8px;
}

.sc-action-buttons-container .sc-primary-button .sc-icon {
    background-color: inherit;
}

.sc-action-buttons-container .sc-primary-button:focus-visible .sc-button-title {
    color: rgb(25, 64, 127);
}

/* 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)) {
    .sc-action-buttons-container .sc-primary-button .sc-symbol {
        background-color: #f2f2f2;
        color: #0278fc;
    }

    .sc-action-buttons-container .sc-primary-button:focus-visible .sc-symbol {
        background-color: rgb(25, 64, 127);
    }

    .sc-action-buttons-container .sc-secondary-button .sc-symbol,
    .sc-action-buttons-container .mw-toggle .sc-symbol.ellipsis {
        background-color: #0278fc;
        color: #f2f2f2;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .sc-action-buttons-container .sc-primary-button:hover {
        background: #258eff;
    }

    .sc-action-buttons-container .sc-primary-button:active {
        background: #409cff;
    }

    .sc-action-buttons-container .sc-primary-button:focus-visible .sc-symbol {
        background-color: rgb(150, 193, 254);
    }

    .sc-action-buttons-container .sc-primary-button:focus-visible .sc-button-title {
        color: rgb(150, 193, 254);
    }

    .sc-action-buttons-container .sc-secondary-button,
    .sc-action-buttons-container .mw-toggle .sc-ellipsis-button {
        background-color: rgba(255, 255, 255, 0.07);
    }

    .sc-action-buttons-container .sc-secondary-button:hover,
    .sc-action-buttons-container .mw-toggle .sc-ellipsis-button:hover {
        background-color: rgba(255, 255, 255, 0.09);
    }

    .sc-action-buttons-container .sc-secondary-button:active,
    .sc-action-buttons-container .mw-toggle .sc-ellipsis-button:active {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .sc-action-buttons-container .mw-popup-menu .mw-popup-menu-row-item {
        color: #fff;
        background-color: rgba(44, 44, 46, 0.95);
    }

    .sc-action-buttons-container .mw-popup-menu .mw-popup-menu-row-item:hover {
        background-color: rgba(72, 72, 74, 0.95);
    }

    .sc-action-buttons-container .mw-popup-menu .mw-popup-menu-row-item:active {
        background-color: rgba(86, 86, 88, 0.95);
    }

    @supports (-webkit-backdrop-filter: blur(10px)) {
        .sc-action-buttons-container .mw-popup-menu .mw-popup-menu-row-item {
            background-color: rgba(58, 58, 60, 0.7);
            -webkit-backdrop-filter: blur(10px);
        }
    }
}

.sc-ribbon-container.sc-ribbon-hairline {
    position: relative;
}

.sc-ribbon-container horizontal-pages {
    position: relative;
    left: -16px;
    right: -16px;
    width: calc(100% + 32px);
}

.sc-ribbon-container horizontal-pages.use-arrows .mw-scrollable {
    scroll-snap-type: x proximity;
    scroll-padding: 16px;
}

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

.sc-ribbon-container .sc-ribbon-item {
    position: relative;
    display: inline-grid;
    padding: 0 16px 0 16px;

    border-right: 1px solid rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
}

.mw-rtl .sc-ribbon-container .sc-ribbon-item {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: unset;
}

.sc-ribbon-container .mw-scrollable .sc-ribbon-item:last-child {
    border: none;
}

.sc-ribbon-container .sc-ribbon-item .sc-ribbon-header {
    line-height: 1.2;

    color: #8e8e93;
    letter-spacing: 0.04em;
    font-size: 0.65em;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
}

.sc-ribbon-container .sc-ribbon-item .sc-ribbon-header-text {
    margin-right: 4px;
}

.mw-rtl .sc-ribbon-container .sc-ribbon-item .sc-ribbon-header-text {
    margin-right: unset;
    margin-left: 4px;
}

.sc-ribbon-container .sc-ribbon-item .sc-ribbon-content {
    line-height: 1.2;
    margin-top: 3px;
    display: flex;

    font-size: 1em;
    font-weight: 600;
    align-items: center;
}

.sc-ribbon-container .sc-ugc-rating.sc-blue {
    color: #0a7bff;
}

.sc-ribbon-container .sc-price-range .inactive {
    color: #8e8e93;
}

.sc-ribbon-container .sc-ribbon-item .sc-icon {
    flex: 0 0 auto;
    margin-right: 4px;
    margin-bottom: 1px;
    width: 1.11em;
    height: 1.11em;
}

.sc-ribbon-container .sc-ribbon-item.sc-factoid .sc-icon {
    width: 1.177em;
    height: 1.177em;
}

.sc-ribbon-container .sc-ribbon-item.sc-factoid.sc-hiking .sc-icon {
    width: 1em;
    height: 1em;
}

.mw-rtl .sc-ribbon-container .sc-ribbon-item .sc-icon {
    margin-left: 4px;
    margin-right: unset;
}

.sc-ribbon-container .sc-hours.clickable {
    cursor: pointer;
}

.sc-ribbon-container .sc-hours.clickable .sc-ribbon-header,
.sc-ribbon-container .sc-hours.clickable .sc-ribbon-content {
    pointer-events: none;
}

.sc-ribbon-container .sc-hours .sc-place-open {
    color: rgb(101, 195, 102);
}

.sc-ribbon-container .sc-amenities .sc-icon .sc-symbol {
    background-color: #000;
}

.sc-ribbon-container .sc-amenities .sc-ribbon-content {
    height: 1.17em;
}

.tall-locale .sc-ribbon-container .sc-ribbon-item .sc-ribbon-header,
.tall-locale .sc-ribbon-container .sc-ribbon-item .sc-ribbon-content {
    line-height: 1.3;
}

.tall-locale .sc-ribbon-container .sc-amenities .sc-ribbon-content {
    height: 1.3em;
}

/* Special case for factoid elevation icon */
.sc-ribbon-container .sc-factoid .sc-icon.sc-elevation {
    height: 0.7em;
    width: 0.7em;
}

/* For EVCharger Availability */
.sc-ribbon-container .sc-ribbon-item.sc-ev-charger-availability .sc-symbol.powerplug-fill {
    transform: rotate(-90deg);
}

.sc-ribbon-container .sc-ribbon-item.sc-ev-charger-availability .sc-ev-charger-availability-info:not(.available) .charger-availability {
    color: unset;
}

/* Ribbon hairline. */
.sc-ribbon-container.sc-ribbon-hairline::before {
    position: absolute;
    width: 100%;
    height: 1px;

    background: rgba(0, 0, 0, 0.1);
    content: "";
}

.sc-ribbon-container.sc-ribbon-hairline::after {
    position: absolute;
    top: 100%;
    width: 100%;
    height: 1px;

    background: rgba(0, 0, 0, 0.1);
    content: "";
}

.sc-ribbon-container.sc-ribbon-hairline horizontal-pages {
    padding: 5px 0 10px 0;
}

/* 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)) {
    .sc-ribbon-item .sc-icon .sc-symbol {
        background-color: #8e8e93;
    }

    .sc-ribbon-item .sc-icon .sc-symbol.color-black {
        background-color: #000;
    }

    .sc-ribbon-item .sc-icon .sc-symbol.color-blue {
        background-color: #2b8aef;
    }

    .sc-ribbon-item .sc-icon .sc-symbol.color-green {
        background-color: #20b803;
    }

    .sc-ribbon-container .sc-rating .sc-ugc-rating .sc-icon .sc-symbol {
        background-color: #8e8e93;
    }

    .sc-ribbon-container .sc-rating .sc-ugc-rating.sc-blue .sc-icon .sc-symbol {
        background-color: #0a7bff;
    }

    .sc-ribbon-container .sc-rating .sc-icon .sc-symbol {
        background-color: rgb(255, 175, 0);
    }

    .sc-ribbon-container .sc-rating + .sc-value {
        color: rgb(255, 175, 0);
    }

    .sc-ribbon-container .sc-rating .sc-max-rating .sc-icon .sc-symbol {
        background-color: rgb(255, 115, 0);
    }

    .sc-ribbon-container .sc-rating .sc-max-rating + .sc-value {
        color: rgb(255, 115, 0);
    }

    .sc-ribbon-container .sc-rating .sc-medium-rating .sc-icon .sc-symbol {
        background-color: rgb(255, 145, 0);
    }

    .sc-ribbon-container .sc-rating .sc-medium-rating + .sc-value {
        color: rgb(255, 145, 0);
    }
}

@media screen and (prefers-color-scheme: dark) {
    .sc-ribbon-container .sc-ribbon-item {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    .mw-rtl .sc-ribbon-container .sc-ribbon-item {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        border-right: unset;
    }

    .sc-ribbon-container .sc-price-range .inactive {
        color: #666;
    }

    .sc-ribbon-container .sc-amenities .sc-icon .sc-symbol {
        background-color: #fff;
    }

    .sc-ribbon-container.sc-ribbon-hairline::after,
    .sc-ribbon-container.sc-ribbon-hairline::before {
        background: linear-gradient(transparent 0%, transparent 50%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.25) 100%);
    }

    .sc-ribbon-item .sc-icon .sc-symbol.color-black {
        background-color: #fff;
    }

    .sc-ribbon-item .sc-icon .sc-symbol.color-green {
        background-color: #00cf6b;
    }
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-ribbon-container .sc-rating .sc-ugc-rating .sc-icon .sc-symbol {
        background-color: rgb(108, 108, 112);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-ribbon-container .sc-rating .sc-ugc-rating .sc-icon .sc-symbol {
        background-color: rgb(174, 174, 178);
    }
}

.sc-ev-charger-availability-info .sc-symbol {
    display: inline-block;
    width: 0.647em; /* ~ 11px */
    height: 0.647em; /* ~ 11px */
    margin-left: 5px;
}

.mw-rtl .sc-ev-charger-availability-info .sc-symbol {
    margin-left: 0;
    margin-right: 5px;
    transform: rotateY(180deg);
}

.sc-ev-charger-availability-info .charger-availability {
    color: #8e8e93;
}

.sc-ev-charger-availability-info.available .charger-availability {
    color: #34c759;
}

.sc-ev-charger-plug .sc-plug-display-name {
    font-weight: bold;
}

.sc-ev-charger-availability-info .sc-symbol.powerplug-fill {
    transform: rotate(-90deg);
    width: 0.765em;
    height: 0.765em;
    margin-left: 4px;
}

/* Prevents the icon from being cutoff on 1x displays */
@media (max-resolution: 1dppx) {
    .sc-ev-charger-availability-info .sc-symbol.dot-radiowaves-up-forward-bold {
        width: 0.7em;
        height: 0.66em;
    }
}

/* Coloring symbols is only supported when mask-image is supported, they default to black on IE11. */
@supports (mask-image: url(images/symbols/phone.svg)) or (-webkit-mask-image: url(images/symbols/phone.svg)) {
    .sc-ev-charger-availability-info .sc-symbol {
        background-color: #8e8e93;
    }

    .sc-ev-charger-availability-info.available .sc-symbol {
        background-color: #34c759;
    }
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-ev-charger-availability-info.available .sc-symbol {
        background-color: rgb(36, 138, 61);
    }

    .sc-ev-charger-availability-info.available .charger-availability {
        color: rgb(36, 138, 61);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-ev-charger-availability-info.available .sc-symbol {
        background-color: rgb(48, 219, 91);
    }

    .sc-ev-charger-availability-info.available .charger-availability {
        color: rgb(48, 219, 91);
    }
}

.sc-about .sc-platter-container {
    padding: 14px 16px;
    box-sizing: border-box;
}

.sc-about fixed-height-text {
    position: relative;
    max-height: calc(1em * 1.295 * 5);
}

.sc-about p {
    margin: 0;
    padding: 0;

    font-size: 1em;
    line-height: 1.295;
}

.sc-about .mw-collapse,
.sc-about .mw-expand {
    font-size: 1em;

    --color: #0a7bff;
    --color-more-contrast: rgb(0, 64, 220);
    --color-more-contrast-dark: rgb(64, 156, 255);
    color: var(--color);
}

.sc-about .mw-collapse:hover,
.sc-about .mw-collapse:active,
.sc-about .mw-expand:hover,
.sc-about .mw-expand:active {
    color: rgb(20, 124, 229);
}

.sc-about .mw-expand {
    position: absolute;
    display: block; /* Since we have an abosulte position this can be display:block even while measuring. */
    bottom: 0;
    right: 0;

    line-height: calc(1em * 1.295);
    padding-left: 1em;

    --box-shadow: -1em 0 0.5em #fff;
    --box-shadow-rtl: 1em 0 0.5em #fff;
    --box-shadow-dark: -1em 0 0.5em #2c2b2d;
    --box-shadow-rtl-dark: 1em 0 0.5em #2c2b2d;
    --box-shadow-more-contrast-dark: -1em 0 0.5em rgb(54, 54, 56);
    --box-shadow-rtl-more-contrast-dark: -1em 0 0.5em rgb(54, 54, 56);
    box-shadow: var(--box-shadow);

    --background: #fff;
    --background-dark: #2c2b2d;
    --background-more-contrast-dark: rgb(54, 54, 56);
    background: var(--background);
}

.sc-about[dir="rtl"] .mw-expand {
    right: unset;
    padding-left: unset;
    left: 0;
    padding-right: 1em;

    --box-shadow: var(--box-shadow-rtl);
}

.sc-about .sc-attribution-link {
    margin: 8px 16px 0 16px;
    font-size: 0.765em;
    display: block;
}

.sc-about .sc-attribution-link a {
    --color: #0a7bff;
    color: var(--color);
    text-decoration: none;

    --color-more-contrast: rgb(0, 64, 220);
    --color-more-contrast-dark: rgb(64, 156, 255);
}

@media screen and (prefers-color-scheme: dark) {
    :root:not(.mw-light) .sc-about .mw-expand {
        --box-shadow: var(--box-shadow-dark);
        --background: var(--background-dark);
    }

    :root:not(.mw-light) .sc-about[dir="rtl"] .mw-expand {
        --box-shadow: var(--box-shadow-rtl-dark);
    }
}

:root.mw-dark .sc-about .mw-expand {
    --box-shadow: var(--box-shadow-dark);
    --background: var(--background-dark);
}

:root.mw-dark .sc-about[dir="rtl"] .mw-expand {
    --box-shadow: var(--box-shadow-rtl-dark);
}

.sc-about fixed-height-text .mw-expand:focus-visible,
.sc-about fixed-height-text .mw-collapse:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #007cff inset;
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-about .mw-collapse,
    .sc-about .mw-expand,
    .sc-about .sc-attribution-link a {
        --color: var(--color-more-contrast);
    }

    :root.mw-dark .sc-about .mw-expand {
        --box-shadow: var(--box-shadow-more-contrast-dark);
        --background: var(--background-more-contrast-dark);
    }

    :root.mw-dark .sc-about[dir="rtl"] .mw-expand {
        --box-shadow: var(--box-shadow-rtl-more-contrast-dark);
    }

    :root.mw-dark .sc-about .mw-collapse,
    :root.mw-dark .sc-about .mw-expand,
    :root.mw-dark .sc-about .sc-attribution-link a {
        --color: var(--color-more-contrast-dark);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    :root:not(.mw-light) .sc-about .mw-expand {
        --box-shadow: var(--box-shadow-more-contrast-dark);
        --background: var(--background-more-contrast-dark);
    }

    :root:not(.mw-light) .sc-about[dir="rtl"] .mw-expand {
        --box-shadow: var(--box-shadow-rtl-more-contrast-dark);
    }

    :root:not(.mw-light) .sc-about .mw-collapse,
    :root:not(.mw-light) .sc-about .mw-expand,
    :root:not(.mw-light) .sc-about .sc-attribution-link a {
        --color: var(--color-more-contrast-dark);
    }
}

.sc-place-details .sc-section-header-container {
    background-color: #f9f9f9;
}

.sc-place-details .sc-platter-cell a {
    text-decoration: none;
    cursor: pointer;
}

.sc-place-details .sc-platter-cell a * {
    pointer-events: none;
}

.sc-place-details .sc-platter-cell .sc-platter-cell-content {
    --color: #027aff;
    --color-dark: #027aff;
    --color-more-contrast: rgb(0, 64, 220);
    --color-more-contrast-dark: rgb(64, 156, 255);
    color: var(--color);
}

.sc-place-details .sc-business-hours {
    margin-bottom: 16px;
}

.mw-rtl .sc-phone-number {
    text-align: right;
}

.sc-place-details .sc-business-hours .sc-platter-cell .sc-platter-cell-content,
.sc-place-details .sc-business-hours .sc-platter-cell .sc-platter-cell-content:hover,
.sc-place-details .sc-business-hours .sc-platter-cell .sc-platter-cell-content:active {
    --color: #000;
    --color-dark: #fff;
    color: var(--color);
}

.sc-place-details .sc-platter-cell .sc-platter-cell-content:hover,
.sc-place-details .sc-platter-cell .sc-platter-cell-content:active {
    color: rgb(20, 124, 229);
}

.sc-place-details .sc-platter-cell .sc-platter-cell-content.with-sc-icon,
.sc-place-details .sc-platter-cell .sc-platter-cell-content.non-interactive {
    --color: #000;
    --color-dark: #fff;
    color: var(--color);
}

.sc-place-details .sc-location-cell .sc-platter-cell-content,
.sc-place-details .sc-location-cell .sc-platter-cell-content:hover,
.sc-place-details .sc-location-cell .sc-platter-cell-content:active {
    --color: #000;
    --color-dark: #fff;
    color: var(--color);
    white-space: pre-line;
}

.sc-place-details .sc-attribution-link {
    margin: 8px 16px 0 16px;
    font-size: 0.765em;
    display: block;
}

.sc-place-details .sc-attribution-link a {
    --color: #0a7bff;
    --color-more-contrast: rgb(0, 64, 220);
    --color-more-contrast-dark: rgb(64, 156, 255);
    color: var(--color);
    text-decoration: none;
}

.sc-place-details bdo.sc-platter-cell-content {
    display: block;
}

.sc-platter-container.sc-remove-pin {
    margin-top: 20px;
    color: #ff3b30;
}

.sc-remove-pin .sc-platter-cell {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.sc-remove-pin .sc-platter-cell:hover .sc-remove-icon {
    transform: scale(1.08);
}

.sc-remove-pin .sc-remove-icon {
    border-radius: 50%;
    background-color: rgb(240, 240, 240);
    font-size: 1rem;
    width: 2.12em;
    height: 2.12em;
    margin-right: 8px;
}

.sc-remove-pin .sc-remove-icon .trash-fill {
    background-color: #ff3b30;
    scale: 0.5;
}

.sc-details-title {
    align-items: center;
}

.sc-edit {
    font-size: 0.9em;
    color: #027aff;
    margin-right: 4px;
}

.sc-edit div {
    color: #027aff;
}

.mw-rtl .sc-edit {
    margin-right: unset;
    margin-left: 4px;
}

/* 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)) {
    .sc-place-details .sc-icon .sc-symbol {
        background-color: #0278fc;
    }

    .sc-place-details .sc-platter-cell .sc-platter-cell-content.with-sc-icon:hover + .sc-icon .sc-symbol,
    .sc-place-details .sc-platter-cell .sc-platter-cell-content.with-sc-icon:active + .sc-icon .sc-symbol {
        background-color: rgb(20, 124, 229);
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root:not(.mw-light) .sc-place-details .sc-platter-cell .sc-platter-cell-content {
        --color: var(--color-dark);
    }

    :root:not(.mw-light) .sc-place-details .sc-platter-cell .sc-platter-cell-content.with-sc-icon,
    :root:not(.mw-light) .sc-place-details .sc-platter-cell .sc-platter-cell-content.non-interactive {
        --color: var(--color-dark);
    }

    :root:not(.mw-light) .sc-place-details .sc-location-cell .sc-platter-cell-content,
    :root:not(.mw-light) .sc-place-details .sc-business-hours .sc-platter-cell .sc-platter-cell-content,
    :root:not(.mw-light) .sc-place-details .sc-business-hours .sc-platter-cell .sc-platter-cell-content:hover,
    :root:not(.mw-light) .sc-place-details .sc-business-hours .sc-platter-cell .sc-platter-cell-content:active,
    :root:not(.mw-light) .sc-place-details .sc-location-cell .sc-platter-cell-content:hover,
    :root:not(.mw-light) .sc-place-details .sc-location-cell .sc-platter-cell-content:active {
        --color: var(--color-dark);
    }
}

:root.mw-dark .sc-place-details .sc-platter-cell .sc-platter-cell-content {
    --color: var(--color-dark);
}

:root.mw-dark .sc-place-details .sc-platter-cell .sc-platter-cell-content.with-sc-icon,
:root.mw-dark .sc-place-details .sc-platter-cell .sc-platter-cell-content.non-interactive {
    --color: var(--color-dark);
}

:root.mw-dark .sc-place-details .sc-location-cell .sc-platter-cell-content,
:root.mw-dark .sc-place-details .sc-business-hours .sc-platter-cell .sc-platter-cell-content,
:root.mw-dark .sc-place-details .sc-business-hours .sc-platter-cell .sc-platter-cell-content:hover,
:root.mw-dark .sc-place-details .sc-business-hours .sc-platter-cell .sc-platter-cell-content:active,
:root.mw-dark .sc-place-details .sc-location-cell .sc-platter-cell-content:hover,
:root.mw-dark .sc-place-details .sc-location-cell .sc-platter-cell-content:active {
    --color: var(--color-dark);
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-place-details .sc-platter-cell .sc-platter-cell-content,
    .sc-place-details .sc-attribution-link a {
        --color: var(--color-more-contrast);
    }

    .sc-place-details .sc-icon .sc-symbol {
        --background-color: rgb(0, 64, 220);
    }

    :root.mw-dark .sc-place-details .sc-platter-cell .sc-platter-cell-content,
    :root.mw-dark .sc-place-details .sc-attribution-link a {
        --color: var(--color-more-contrast-dark);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    :root:not(.mw-light) .sc-place-details .sc-platter-cell .sc-platter-cell-content,
    :root:not(.mw-light) .sc-place-details .sc-attribution-link a {
        --color: var(--color-more-contrast-dark);
    }

    .sc-place-details .sc-icon .sc-symbol {
        --background-color: rgb(64, 156, 255);
    }
}

.sc-business-hours header {
    line-height: 1.18em; /* 20px */
}

.sc-hours-row {
    line-height: 1.76em; /* 30px */
    display: flex;
    flex-flow: row wrap;
}

.sc-size-AX2.sc-bigger-font-size .sc-hours-row,
.sc-size-AX3.sc-bigger-font-size .sc-hours-row,
.sc-size-AX4.sc-bigger-font-size .sc-hours-row,
.sc-size-AX5.sc-bigger-font-size .sc-hours-row {
    flex-direction: column;
}

.sc-hours-row.sc-hours-everyday:not(.sc-open-24-hours) {
    flex-flow: column wrap;
}

.sc-hours-row .sc-hours-range {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-end;
}

.sc-size-AX2.sc-bigger-font-size .sc-hours-row .sc-hours-range,
.sc-size-AX3.sc-bigger-font-size .sc-hours-row .sc-hours-range,
.sc-size-AX4.sc-bigger-font-size .sc-hours-row .sc-hours-range,
.sc-size-AX5.sc-bigger-font-size .sc-hours-row .sc-hours-range {
    align-items: flex-start;
}

.mw-rtl .sc-hours-row.sc-hours-everyday .sc-hours-range {
    align-items: flex-start;
}

.sc-hours-row.sc-hours-everyday .sc-hours-range {
    flex: auto;
    width: auto;
    align-items: flex-start;
}

.sc-time-range {
    line-height: 1.3em; /* 22px */
    padding: 4px 0;
}

.sc-time-range .sc-time-period {
    padding-left: 5px;
    font-size: 0.75em;
}

.mw-rtl .sc-time-range .sc-time-period {
    padding-left: 0;
    padding-right: 5px;
}

.sc-time-range .sc-time-period.pre {
    padding-right: 5px;
    padding-left: unset;
}

.mw-unfolded-content .sc-time-range {
    flex: 1;
}

.sc-day-range {
    line-height: 1.3em;
    padding: 4px 0;
}

.sc-day-range.sc-hours-day {
    flex: 1 1 auto;
}

.sc-business-hours-message {
    padding: 4px 0;
    color: #8e8e93;
    font-size: 0.9em;
    line-height: 1.33em;
    font-weight: 400;
}

.sc-opening-state {
    line-height: 1.17em;
    margin-bottom: 8px;
}

.sc-opening-state.report-an-issue {
    color: #027aff;
}

.tall-locale .sc-opening-state {
    line-height: 1.3em;
}

.sc-opening-state.sc-place-permanent-closure,
.sc-hours-everyday + .sc-opening-state,
.sc-todays-row-hours + .sc-opening-state {
    margin-bottom: 0;
}

.sc-place-temporary-closure,
.sc-place-permanent-closure,
.sc-place-closed-now,
.sc-place-closed-today,
.sc-place-closed {
    color: rgb(235, 77, 61);
}

.sc-place-open {
    color: rgb(101, 195, 102);
}

.sc-place-opening-soon,
.sc-place-closing-soon {
    color: rgb(241, 153, 55);
}

.sc-business-hours .mw-unfolded-content {
    width: 100%;
}

.sc-business-hours .mw-toggle {
    position: absolute;
    top: 6px;
    right: 6px;
    transition: transform 0.25s ease;
    padding: 10px;
    cursor: pointer;
    border-style: none;
    background-color: transparent;
    font-size: 1em;
    width: 1.77em; /* 10px */
    height: 1.77em; /* 10px */
}

.mw-rtl .sc-business-hours .mw-toggle {
    left: 6px;
    right: unset;
}

.sc-business-hours .mw-toggle .sc-symbol {
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.sc-hours-unfolded.with-special .sc-hours-row.sc-hours-everyday {
    justify-content: space-between;
    flex-direction: row;
}

.sc-size-AX2.sc-bigger-font-size .sc-hours-unfolded.with-special .sc-hours-row.sc-hours-everyday,
.sc-size-AX3.sc-bigger-font-size .sc-hours-unfolded.with-special .sc-hours-row.sc-hours-everyday,
.sc-size-AX4.sc-bigger-font-size .sc-hours-unfolded.with-special .sc-hours-row.sc-hours-everyday,
.sc-size-AX5.sc-bigger-font-size .sc-hours-unfolded.with-special .sc-hours-row.sc-hours-everyday {
    flex-direction: column;
}

.sc-hours-unfolded.with-special .sc-hours-row.sc-hours-everyday .sc-hours-range {
    flex: 0 1 auto;
}

/*  Due to a SVG rendering issue on 1x displays, we need to keep the width slightly greater than the height
    For more context see rdar://98062623 ([WP] "V", Call, Navigate icons are truncated on non-retina displays) */
@media (max-resolution: 1dppx) {
    .sc-business-hours .mw-toggle .sc-symbol {
        width: 105%;
    }
}

/* Coloring symbols is only supported when mask-image is supported, they default to black on IE11. */
@supports (mask-image: url(images/symbols/phone.svg)) or (-webkit-mask-image: url(images/symbols/phone.svg)) {
    .sc-business-hours .mw-toggle .sc-symbol {
        background-color: #8e8e93;
    }
}

.sc-business-hours .unfolding > .mw-controls > .mw-toggle {
    transform: rotate(-180deg);
}

/* No one will notice, but we'll know :) */
.mw-rtl .sc-business-hours .unfolding > .mw-controls > .mw-toggle {
    transform: rotate(180deg);
}

.sc-todays-row-hours .sc-time-range,
.sc-hours-everyday .sc-day-range,
.sc-hours-everyday .sc-time-range {
    padding: 0;
}

.sc-business-hours foldable-element {
    cursor: pointer;
}

/* The .mw-controls for the foldable element of linked services must be position: relative so it can be part of the normal document flow.
   When more than 2 linked services exist, we will have a .sc-linked-service-hours-foldable container as the parent of the foldable-element */
.sc-business-hours .sc-linked-service-hours-foldable > foldable-element > .mw-controls {
    position: relative;
    height: auto;
}

.sc-business-hours .sc-linked-service-hours-foldable > foldable-element > .mw-controls > .mw-toggle.sc-linked-services-toggle {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    opacity: 1;
    transition: opacity 0.1s ease-out;
    width: 100%;
    height: auto;
    text-align: left;
}

.sc-business-hours .sc-linked-service-hours-foldable > foldable-element.unfolding > .mw-controls > .mw-toggle.sc-linked-services-toggle {
    transform: none;
    visibility: hidden;
    opacity: 0;
}

.sc-business-hours .sc-linked-service-hours-foldable .sc-linked-services-read-more {
    color: #0a7bff;
    text-decoration: none;
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-business-hours .sc-linked-service-hours-foldable .sc-linked-services-read-more {
        color: rgb(0, 64, 220);
    }

    .sc-place-open {
        color: rgb(36, 138, 61);
    }

    .sc-place-temporary-closure,
    .sc-place-permanent-closure,
    .sc-place-closed-now,
    .sc-place-closed-today,
    .sc-place-closed {
        color: rgb(215, 0, 21);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-business-hours .sc-linked-service-hours-foldable .sc-linked-services-read-more {
        color: rgb(64, 156, 255);
    }

    .sc-place-open {
        color: rgb(48, 219, 91);
    }

    .sc-place-temporary-closure,
    .sc-place-permanent-closure,
    .sc-place-closed-now,
    .sc-place-closed-today,
    .sc-place-closed {
        color: rgb(255, 105, 97);
    }
}

.mw-raps-in-review {
    margin-bottom: 16px;
}

.mw-raps-in-review .sc-platter-cell {
    display: flex;
    align-items: center;
}

.mw-raps-in-review .mw-user-image {
    background-size: 100%;
    border-radius: 50%;
    width: 2.25em;
    height: 2.25em;
    background-color: #f2f2f6;
}

.mw-raps-in-review .mw-raps-count {
    margin-left: 10px;
}

.mw-raps-in-review .sc-symbol {
    width: 1em;
    height: 1em;
    background-color: rgb(190, 190, 190);
    margin-left: auto;
}

.sc-place-tile-list .sc-place-tile .sc-footer .sc-footer-content.sc-factoid {
    flex-wrap: unset;
}

.sc-place-tile-list .sc-place-tile .sc-footer-content .sc-icon {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.sc-place-tile-list .sc-place-tile.vertical .sc-footer-content .sc-icon {
    width: 0.938rem;
    height: 0.938rem;
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating .sc-rating-info {
    width: 100%;

    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating .sc-icon .sc-symbol {
    background-color: rgb(255, 175, 0);
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating.sc-apple-rating .sc-symbol {
    background-color: #000;
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating.sc-medium-rating .sc-icon .sc-symbol {
    background-color: rgb(255, 145, 0);
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating.sc-max-rating .sc-icon .sc-symbol {
    background-color: rgb(255, 115, 0);
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-factoid .sc-icon .sc-symbol {
    background-color: #8e8e93;
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating.sc-apple-rating .sc-value {
    color: #000;
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating.sc-medium-rating .sc-value {
    color: rgb(255, 145, 0);
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating.sc-max-rating .sc-value {
    color: rgb(255, 115, 0);
}

.sc-place-tile-list .sc-place-tile .sc-footer-content .sc-value {
    margin-left: 4px;

    font-size: 0.75rem;
}

.sc-place-tile-list .sc-space {
    color: #8e8e93;
    margin: 0 0.3em;
    flex-shrink: 0;
    width: 0.2em;
    font-size: 17px;
}

.sc-place-tile-list .sc-place-tile.vertical .sc-footer-content .sc-value {
    font-size: 0.938rem;
}

.mw-rtl .sc-place-tile-list .sc-place-tile .sc-footer-content .sc-value {
    margin-left: 0;
    margin-right: 4px;
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating .sc-value {
    font-weight: 600;
    color: rgb(255, 175, 0);
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-factoid .sc-value {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #8e8e93;
}

.sc-place-tile-list.sc-hiking .sc-place-tile .sc-footer-content.sc-factoid .sc-value {
    text-overflow: unset;
    overflow: visible;
    white-space: unset;
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating .sc-number-of-user-ratings {
    margin-left: 6px;

    color: #8e8e93;
    font-size: 0.75rem;

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

    flex-shrink: 0;
}

.sc-place-tile-list .sc-place-tile.vertical .sc-footer-content.sc-rating .sc-number-of-user-ratings {
    font-size: 0.938rem;
}

.mw-rtl .sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating .sc-number-of-user-ratings {
    margin-left: 0;
    margin-right: 6px;
}

/*  Due to a SVG rendering issue on 1x displays, we need to adjust width and height */
@media (max-resolution: 1dppx) {
    .sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating .sc-icon .sc-symbol {
        width: 104%;
        height: 102%;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating.sc-apple-rating .sc-symbol {
        background-color: #fff;
    }

    .sc-place-tile-list .sc-place-tile .sc-footer-content.sc-rating.sc-apple-rating .sc-value {
        color: #fff;
    }
}

.sc-place-tile {
    position: relative;
    display: inline-flex;
    min-width: 150px;
    max-width: 150px;
    flex: 1;
    flex-direction: column;
    padding-bottom: 16px;

    background-color: #fff;
    border-radius: 10px;
    scroll-snap-align: start;

    text-decoration: none;
}

.sc-place-tile.vertical {
    flex-direction: row;

    width: calc(100% - 32px);
    max-width: unset;
    padding: 16px;
}

.sc-place-tile * {
    pointer-events: none;
}

.sc-place-tile .sc-photo {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 112px;

    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background-color: rgba(116, 116, 128, 0.02);
}

.sc-place-tile .sc-photo-fallback {
    background-image: url(images/photo-fill-on-rectangle.svg);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    filter: invert(1);
    opacity: 0.25;
}

.sc-place-tile .sc-photo.poi-icon-fallback picture {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: invert(1);
    opacity: 0.25;
}

.sc-native .sc-place-tile .sc-photo.poi-icon-fallback img {
    scale: 0.25;
}

.sc-place-tile.vertical .sc-photo {
    top: unset;
    left: unset;
    width: 50px;
    height: 50px;
    margin: auto;
    border-radius: 8px;

    flex-shrink: 0;
}

.sc-place-tile .sc-photo scheduled-image {
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.sc-place-tile.vertical .sc-photo scheduled-image {
    border-radius: 8px;
}

.sc-place-tile .sc-poi {
    position: absolute;
    top: 100px;
    left: 15px; /* Taking the border into account. */
    width: 24px;
    height: 24px;
    z-index: 20;
}

.mw-rtl .sc-place-tile .sc-poi {
    left: auto;
    right: 15px; /* Taking the border into account. */
}

.sc-place-tile .sc-poi.no-photo {
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    margin: 16px 16px 0 15px; /* margin-left taking the border into account */
}

.mw-rtl .sc-place-tile .sc-poi.no-photo {
    margin: 16px 15px 0 16px; /* margin-right taking the border into account */
}

.sc-place-tile .sc-poi img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px #fff solid;
    background-color: #fff;
    border-radius: 50%;
}

.sc-place-tile .sc-place-tile-vertical-content {
    display: flex;
    width: calc(100% - 74px);
    margin-left: 16px;

    flex-direction: column;
    flex: 1;
    justify-content: center;
}

.mw-rtl .sc-place-tile .sc-place-tile-vertical-content {
    margin-left: unset;
    margin-right: 16px;
}

.sc-place-tile .sc-title {
    position: relative;
    width: calc(100% - 32px);
    margin: 16px 16px auto 16px;
    overflow: hidden;

    font-weight: 600;
    font-size: 0.94rem;
    white-space: normal;
    color: #000;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sc-place-tile.vertical .sc-title {
    width: 100%;
    margin: unset;

    font-size: 1.063rem;

    -webkit-line-clamp: 1;
}

.sc-place-tile .sc-title.below-icon.no-photo {
    margin-top: 4px;
}

.sc-place-tile.vertical .sc-title.below-icon.no-photo {
    margin-top: unset;
}

.sc-place-tile .sc-footer {
    position: relative;
    width: calc(100% - 32px);
    margin: 8px 16px 0 16px;
}

.sc-place-tile.vertical .sc-footer {
    margin: unset;
    width: 100%;
}

.sc-place-tile .sc-footer .sc-footer-content {
    width: 100%;

    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden;
}

@media screen and (prefers-color-scheme: dark) {
    .sc-place-tile {
        background-color: #2c2b2d;
    }

    .sc-place-tile .sc-photo {
        background-color: rgba(116, 116, 128, 0.2);
    }

    .sc-place-tile .sc-poi.no-photo img {
        border: 1px #2c2b2d solid;
        background-color: #2c2b2d;
        border-radius: unset;
    }

    .sc-place-tile .sc-title {
        color: #fff;
    }

    .sc-place-tile .sc-photo.poi-icon-fallback picture,
    .sc-place-tile .sc-photo-fallback {
        opacity: 0.5;
        filter: unset;
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-place-tile {
        background: rgb(54, 54, 56);
    }
}

.sc-place-tile-list horizontal-pages {
    position: relative;
    left: -16px;
    right: -16px;
    width: calc(100% + 32px);
    font-size: 0; /* Avoid extra magical padding added by anchor tags. */
}

.sc-place-tile-list horizontal-pages.use-arrows .mw-scrollable {
    scroll-snap-type: x proximity;
    scroll-padding: 16px;
}

/* Webkit ignores the end padding of flex scroll containers, forces padding right */
.sc-place-tile-list horizontal-pages.use-arrows .mw-scrollable::after {
    content: "";
    padding-right: 0.02px;
}

/* Webkit ignores the end padding of flex scroll containers, forces padding left */
.mw-rtl .sc-place-tile-list horizontal-pages.use-arrows .mw-scrollable::after {
    content: "";
    padding-right: unset;
    padding-left: 0.02px;
}

.sc-place-tile-list.multi-row horizontal-pages.use-arrows .mw-scrollable::after {
    content: none;
}

.sc-place-tile-list horizontal-pages .mw-scrollable {
    display: flex;
}

.sc-place-tile-list.multi-row horizontal-pages .mw-scrollable {
    display: grid;
    grid-auto-rows: 1fr;
    grid-row-gap: 8px;
}

.sc-place-tile-list .sc-place-tile-list-row {
    display: flex;
}

.sc-place-tile-list .sc-place-tile-list-row .sc-place-tile.sc-item:first-child,
.mw-rtl .sc-place-tile-list .sc-place-tile-list-row .sc-place-tile.sc-item:last-child {
    margin-left: 16px;
}

.sc-place-tile-list .sc-place-tile-list-row .sc-place-tile.sc-item:last-child,
.mw-rtl .sc-place-tile-list .sc-place-tile-list-row .sc-place-tile.sc-item:first-child {
    margin-right: 16px;
}

.sc-place-tile-list .sc-place-tile-list-row .sc-place-tile.sc-item {
    margin-right: 8px;
}

.mw-rtl .sc-place-tile-list .sc-place-tile-list-row .sc-place-tile.sc-item {
    margin-left: 8px;
    margin-right: unset;
}

.sc-place-tile-list.sc-platter-container {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
}

.sc-place-tile-list.sc-platter-container .sc-place-tile-vertical-content {
    margin: unset;
}

.sc-place-tile-list.sc-platter-container .sc-place-tile.vertical {
    border-radius: unset;
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-factoid .sc-icon .sc-symbol.color-black {
    background-color: #000;
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-factoid .sc-icon .sc-symbol.color-blue {
    background-color: #2b8aef;
}

.sc-place-tile-list .sc-place-tile .sc-footer-content.sc-factoid .sc-icon .sc-symbol.color-green {
    background-color: #20b803;
}

.sc-place-tile-list.sc-platter-container .sc-place-tile.vertical:not(:last-child) {
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

@media (max-resolution: 1dppx) {
    /* Prevents the icon from being cutoff on 1x displays */
    .sc-place-tile-list.sc-hiking .sc-symbol {
        width: 103%;
        height: 102%;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .sc-place-tile-list.sc-platter-container .sc-place-tile.vertical:not(:last-child) {
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.25);
    }

    .sc-place-tile-list .sc-place-tile .sc-footer-content.sc-factoid .sc-icon .sc-symbol.color-black {
        background-color: #fff;
    }

    .sc-place-tile-list .sc-place-tile .sc-footer-content.sc-factoid .sc-icon .sc-symbol.color-green {
        background-color: #00cf6b;
    }
}

.sc-place-tile .sc-footer .sc-footer-content .sc-footer-text {
    position: relative;
    width: 100%;
    overflow: hidden;

    font-size: 0.75rem;
    color: #8e8e93;
    white-space: normal;

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.sc-place-tile.vertical .sc-footer .sc-footer-content .sc-footer-text {
    font-size: 0.938rem;
}

.sc-place-tile .sc-footer .sc-footer-content .sc-footer-text:only-child {
    -webkit-line-clamp: 2;
}

.sc-action-row-container {
    display: flex;
}

.sc-action-row-container .sc-link-item {
    display: block;
    flex: 1 1 0;

    border-radius: 8px;
    margin-right: 8px;

    color: #0088fa;
    background-color: rgba(0, 0, 0, 0.06);
    text-decoration: none;
    text-align: center;
    overflow: hidden;
}

.sc-action-row-container .sc-link-item.sc-action-share * {
    pointer-events: none;
}

.sc-action-row-container .sc-link-item.sc-action-share {
    cursor: pointer;
}

.mw-rtl .sc-action-row-container .sc-link-item {
    margin-left: 8px;
    margin-right: unset;
}

.sc-action-row-container .sc-link-item:last-child {
    margin-right: 0;
}

.mw-rtl .sc-action-row-container .sc-link-item:last-child {
    margin-left: 0;
}

.sc-action-row-container .sc-link-item:active,
.sc-action-row-container .sc-link-item:hover {
    text-decoration: none;
}

.sc-action-row-container .sc-link-item:hover {
    background-color: rgba(0, 0, 0, 0.09);
}

.sc-action-row-container .sc-link-item:active {
    background-color: #dadada;
}

.sc-action-row-container .sc-icon {
    display: block;
    margin: 10px 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)) {
    .sc-action-row-container .sc-symbol {
        background-color: #0088fa;
    }
}

.sc-action-row-container .sc-link-text {
    margin: 0 8px 10px 8px;
}

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

@media screen and (prefers-color-scheme: dark) {
    .sc-action-row-container .sc-link-item {
        background-color: rgba(255, 255, 255, 0.07);
    }

    .sc-action-row-container .sc-link-item:hover {
        background-color: rgba(255, 255, 255, 0.09);
    }

    .sc-action-row-container .sc-link-item:active {
        background-color: rgba(255, 255, 255, 0.15);
    }
}

.sc-good-to-know {
    padding: 14px 16px;
    box-sizing: border-box;
}

.sc-good-to-know[data-count="1"] {
    padding: 8px 16px;
}

.sc-good-to-know .sc-amenity {
    margin-top: 8px;
    display: flex;
    flex-direction: row;
}

.sc-good-to-know .sc-amenity:first-child {
    margin-top: unset;
}

.sc-good-to-know .sc-icon {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 1em;
    height: 1.5em;
    margin-right: 16px;
}

.mw-rtl .sc-good-to-know .sc-icon {
    margin-left: 16px;
    margin-right: unset;
}

.sc-good-to-know .sc-symbol {
    width: 1em;
    height: 1em;
}

.sc-good-to-know .sc-amenity-name {
    width: 100%;
    line-height: 1.5;
}

.sc-good-to-know .sc-amenity-details {
    display: flex;
    margin-top: 5px;
    margin-left: calc(1em + 16px);
    height: 1.45em;
}

.mw-rtl .sc-good-to-know .sc-amenity-details {
    margin-left: unset;
    margin-right: calc(1em + 16px);
}

.sc-good-to-know .sc-amenity-details .sc-icon {
    margin-top: 0;
    margin-right: 8px;
}

.mw-rtl .sc-good-to-know .sc-amenity-details .sc-icon {
    margin-right: unset;
    margin-left: 8px;
}

/* This symbol's shape is so different we need to special case it. */
.sc-good-to-know .sc-amenity-details .sc-icon.applepay {
    width: 1.5em;
}

.sc-good-to-know .sc-amenity-details .sc-symbol.applepay {
    width: 1.5em;
    -webkit-mask-position: center center;
    mask-position: center center;
}

.sc-good-to-know > foldable-element > .mw-controls {
    position: absolute;
    top: auto;
    bottom: 0;
    height: auto;

    color: #0a7bff;
}

.sc-good-to-know > foldable-element.unfolding > .mw-controls {
    visibility: hidden;
}

.sc-good-to-know > foldable-element > .mw-controls > .mw-toggle {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;

    opacity: 1;
    transition: opacity 0.1s ease-out;
    cursor: pointer;
}

.sc-good-to-know > foldable-element > .mw-folded-content {
    width: 100%;
    padding-bottom: 1.5em;
}

.sc-good-to-know > foldable-element > .mw-unfolded-content {
    width: 100%;
}

@media screen and (prefers-color-scheme: dark) {
    .sc-good-to-know .sc-symbol {
        background-color: #fff;
    }
}

.sc-good-to-know foldable-element > .mw-controls > .mw-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #007cff inset;
}

.sc-featured-guides {
    width: 100%;
}

.sc-featured-guides horizontal-pages {
    position: relative;
    left: -16px;
    right: -16px;
    width: calc(100% + 32px);

    scroll-padding: 16px;
}

.sc-featured-guides .mw-brick:first-child {
    margin-left: 16px;
}

.mw-rtl .sc-featured-guides .mw-brick:first-child {
    margin-left: 5px;
    margin-right: 16px;
}

/* One guide */
.sc-featured-guides .mw-brick:only-child {
    width: calc(100% - 32px);
}

.sc-featured-guides .mw-brick:only-child .mw-brick-logo img {
    max-width: 50%; /* This is the only control we have right now on the height of the logo */
}

/* Two guides */
.sc-featured-guides .mw-brick:first-child:nth-last-child(2),
.sc-featured-guides .mw-brick:first-child:nth-last-child(2) ~ .mw-brick {
    width: calc((100% - 32px - 10px) / 2);
}

/* More than two guides */
.sc-featured-guides .mw-brick:nth-last-child(n+3) ~ .mw-brick:last-child {
    margin-right: 16px;
}

.mw-rtl .sc-featured-guides .mw-brick:nth-last-child(n+3) ~ .mw-brick:last-child {
    margin-right: 5px;
    margin-left: 16px;
}

.sc-featured-guides horizontal-pages .mw-scrollable a:focus-visible scheduled-image {
    outline: none;
    box-shadow: 0 0 0 2px #007cff inset;
}

.mw-guide-list-items {
    height: 100%;
}

.mw-guide-list .mw-brick {
    width: 166px;
    height: 211px;
    margin: 0 5px;
    display: inline-block;
    scroll-snap-align: start;

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

.mw-guide-list .mw-brick-logo {
    height: 30px;
}

.mw-guide-list .mw-brick-logo picture {
    height: 100%;
    width: 100%;
    display: flex;
}

.mw-guide-list .mw-brick-logo img {
    max-width: 100%;
}

.mw-guide-list .mw-brick-title {
    font-size: 1em;
    line-height: 1.294em; /* ~22px */
}

.mw-guide-list horizontal-pages {
    height: 100%;
    position: relative;
    top: 0;
    left: -16px;
    right: -16px;
    width: calc(100% + 32px);
}

.mw-guide-list horizontal-pages.use-arrows .mw-scrollable {
    scroll-snap-type: x proximity;
    scroll-padding: 16px;
}

.sc-rating-reviews .sc-platter-container {
    position: relative;
    display: inline-flex;
    min-width: 308px;
    max-width: 308px;
    flex: 1;
    flex-direction: column;
    box-sizing: border-box;

    vertical-align: top;

    scroll-snap-align: start;
}

.sc-rating-reviews .sc-platter-container:only-child {
    min-width: calc(100% - 32px);
    max-width: calc(100% - 32px);
}

.sc-apple-rating .sc-platter-cell {
    padding: 12px 16px;
}

.sc-apple-rating .sc-platter-cell-title {
    color: #000;
    font-size: 1em;
    white-space: normal;
}

.sc-apple-rating .sc-platter-cell-content {
    margin-top: 2px;
    white-space: normal;
}

.sc-rating-reviews.sc-apple-ratings horizontal-pages .mw-scrollable {
    display: flex;
}

/* Webkit ignores the end padding of flex scroll containers, forces padding right */
.sc-rating-reviews.sc-apple-ratings horizontal-pages.use-arrows .mw-scrollable::after {
    content: "";
    padding-right: 0.02px;
}

/* Webkit ignores the end padding of flex scroll containers, forces padding left */
.mw-rtl .sc-rating-reviews.sc-apple-ratings horizontal-pages.use-arrows .mw-scrollable::after {
    content: "";
    padding-right: unset;
    padding-left: 0.02px;
}

.sc-apple-rating .sc-icon {
    display: inline-block;
    width: 1em; /* ~17px */
    height: 1em; /* ~17px */
    margin-right: 4px;
    vertical-align: middle;
}

.mw-rtl .sc-apple-rating .sc-icon {
    margin-left: 4px;
    margin-right: unset;
}

.sc-apple-rating .sc-rating-value {
    font-size: 1em; /* ~17px */
    font-weight: 600;
    color: #8e8e93;
    vertical-align: middle;
}

.sc-apple-rating .sc-rating-value::after {
    background: #8e8e93;
    content: "";
    border-radius: 50%;
    width: 3px;
    height: 3px;
    margin: 0 7px;
    vertical-align: middle;
    display: inline-block;
}

.sc-apple-rating .sc-rating-count {
    color: #8e8e93;
    font-size: 1em; /* ~17px */
    vertical-align: middle;
}

.sc-apple-rating .mw-rate-buttons {
    float: right;
    margin-top: -2.5em;
}

.mw-rtl .mw-rate-buttons {
    float: left;
}

.mw-rate-buttons .sc-icon {
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    padding: 11px;
    height: 1.2em;
    width: 1.2em;
}

.mw-rate-buttons .sc-icon.mw-active {
    background-color: #0278fc;
}

.mw-rate-buttons .sc-icon.mw-active .sc-symbol {
    background-color: #fff;
}

.mw-rate-buttons .sc-icon.mw-inactive .sc-symbol {
    background-color: rgb(207, 206, 208);
}

.mw-rate-buttons .sc-icon:first-child {
    margin-right: 7px;
}

/* 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)) {
    .sc-apple-rating .sc-icon .sc-symbol {
        background-color: #8e8e93;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .sc-apple-rating .sc-platter-cell-title {
        color: #fff;
    }
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-apple-rating .sc-icon .sc-symbol {
        background-color: rgb(108, 108, 112);
    }

    .sc-apple-rating .sc-rating-count,
    .sc-apple-rating .sc-rating-value {
        color: rgb(108, 108, 112);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-apple-rating .sc-icon .sc-symbol {
        background-color: rgb(174, 174, 178);
    }

    .sc-apple-rating .sc-rating-count,
    .sc-apple-rating .sc-rating-value {
        color: rgb(174, 174, 178);
    }
}

.sc-rating-reviews horizontal-pages {
    position: relative;
    left: -16px;
    right: -16px;
    width: calc(100% + 32px);
}

.sc-rating-reviews horizontal-pages.use-arrows .mw-scrollable {
    scroll-snap-type: x proximity;
    scroll-padding: 16px;
}

.sc-rating-reviews footer {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: calc(100% - 32px);
    overflow: hidden;

    line-height: 1.25;
    font-weight: 500;
    font-size: 0.94em;
    white-space: normal;
    color: #000;
}

@media screen and (prefers-color-scheme: dark) {
    .sc-rating-reviews footer {
        color: #fff;
    }
}

.sc-rating-reviews .sc-rating-container {
    position: relative;
    display: inline-block;

    /* Same as review container - extra padding */
    height: calc(1em * 1.295 * 5 + 0.705em + 1.17em + 1.05em - 0.235em);

    /* Device width - margin - right-margin */
    width: calc(((100% - 32px) - 32px - 8px) / 2);
    padding: 16px;
    vertical-align: top;

    background-color: #fff;
    border-radius: 10px;
    scroll-snap-align: start;
    text-decoration: none;
    color: black;
}

.sc-rating-reviews .sc-rating-container:only-child {
    width: 100%;
    box-sizing: border-box;
}

.sc-rating-reviews .sc-vendor-logo img {
    max-width: 108px;
    height: 32px;
    object-fit: contain;
}

.sc-rating-reviews .sc-rating {
    line-height: 1.4;
}

.sc-rating-reviews .sc-rating .sc-value > div {
    display: inline-block;
}

.sc-rating-reviews .sc-rating .sc-icon {
    margin-right: 2px;
    width: 16px;
    height: 16px;
    display: inline-flex;
}

.mw-rtl .sc-rating-reviews .sc-rating .sc-icon {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.sc-rating-reviews .sc-rating .sc-icon .sc-symbol {
    background-color: rgba(0, 0, 0, 0.15);
}

.sc-rating-reviews .sc-rating .sc-score {
    padding-left: 2px;
}

.sc-rating-reviews .sc-short-rating {
    line-height: 1.295;
}

.sc-rating-reviews .sc-short-rating .sc-value {
    display: flex;
    font-size: 1.4em;
}

.sc-rating-reviews .sc-short-rating .sc-value .sc-score {
    font-size: 1.18rem;
    font-weight: 600;
}

.sc-rating-reviews .sc-short-rating .sc-value .sc-total-ratings {
    margin-left: 8px;
    padding: 6px 0 2px 0;

    color: rgb(142, 142, 147);
    font-size: 0.885rem;
}

.mw-rtl .sc-rating-reviews .sc-short-rating .sc-value .sc-total-ratings {
    margin-left: unset;
    margin-right: 8px;
}

/* 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)) {
    .sc-rating-reviews .sc-rating .sc-icon .sc-symbol .sc-icon .star-fill {
        background-color: rgba(0, 0, 0, 0.15);
    }

    .sc-rating-reviews .sc-rating .sc-icon .sc-symbol.sc-active {
        background-color: rgb(255, 175, 0);
    }

    .sc-rating-reviews .sc-rating .sc-max-rating .sc-icon .sc-symbol.sc-active {
        background-color: rgb(255, 115, 0);
    }

    .sc-rating-reviews .sc-rating .sc-medium-rating .sc-icon .sc-symbol.sc-active {
        background-color: rgb(255, 145, 0);
    }
}

@media screen and (prefers-color-scheme: dark) {
    .sc-rating-reviews .sc-rating-container {
        background: #2c2b2d;
    }

    .sc-rating-reviews .sc-rating .sc-icon .sc-symbol {
        background-color: #666;
    }

    .sc-rating-reviews .sc-vendor-logo img {
        filter: brightness(0) invert(1);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-rating-reviews .sc-rating-container {
        background: rgb(54, 54, 56);
    }
}

.sc-rating-reviews .sc-review {
    position: relative;
    display: inline-block;

    /* Review + margin + rating + reviewer */
    height: calc(1em * 1.295 * 5 + 0.705em + 1.17em + 1.05em);

    /* Device width - margin */
    width: calc((100% - 32px) - 32px);
    padding: 14px 16px;
    vertical-align: top;

    font-size: 1em;
    line-height: 1.295;
    background-color: #fff;
    border-radius: 10px;
    scroll-snap-align: start;
    text-decoration: none;
    color: black;
}

.sc-rating-reviews .sc-review * {
    pointer-events: none;
}

.sc-rating-reviews .sc-review .sc-review-snippet {
    white-space: normal;
    overflow: hidden;
    line-height: 1.295;
    max-height: calc(1em * 1.295 * 5);
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.sc-rating-reviews .sc-review .sc-read-more {
    padding-left: 1em;
    margin-right: 16px;
    box-shadow: -1em 0 0.5em #fff;
    font-size: 1em;
    color: #0a7bff;
    position: absolute;
    top: calc(14px + (1em * 1.295 * 4));
    right: 0;
    background: #fff;
}

.sc-rating-reviews .sc-review[dir="rtl"] .sc-read-more {
    right: unset;
    padding-left: unset;
    margin-right: 0;
    left: 0;
    padding-right: 1em;
    margin-left: 16px;
    box-shadow: 1em 0 0.5em #fff;
}

.sc-rating-reviews .sc-review .sc-rating {
    display: flex;

    font-size: 1.16em;
}

.sc-rating-reviews .sc-review footer {
    bottom: 14px;
}

.sc-rating-reviews .sc-review footer .sc-value {
    display: flex;
    line-height: 1.38;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.82em;
}

.sc-rating-reviews .sc-review footer .sc-review-time::before {
    content: "\00b7";
    padding: 0 5px;
}

.sc-rating-reviews .sc-review .sc-value .sc-review-time {
    color: rgb(142, 142, 147);
}

.sc-rating-reviews .sc-review .sc-reviewer-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    float: left;

    overflow: hidden;
    color: rgb(255, 255, 255);
    background: rgb(198, 198, 198) no-repeat content-box;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url(images/silhouette.svg);
    border: 1px solid rgb(181, 181, 181);
    border-radius: 50%;
    text-align: center;
    line-height: 2.25;
    margin-right: 8px;
}

.mw-rtl .sc-rating-reviews .sc-review .sc-reviewer-avatar {
    float: right;
    margin-left: 8px;
    margin-right: unset;
}

.sc-rating-reviews .sc-review .sc-reviewer-avatar .sc-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: 50% 50%;
}

.sc-rating-reviews .sc-review .sc-reviewer-avatar.sc-initials {
    background-image: none;
}

@media screen and (prefers-color-scheme: dark) {
    .sc-rating-reviews .sc-review {
        background: #2c2b2d;
        color: #fff;
    }

    .sc-rating-reviews .sc-review .sc-read-more {
        box-shadow: -1em 0 0.5em #2c2b2d;
        background-color: #2c2b2d;
    }

    .sc-rating-reviews .sc-review[dir="rtl"] .sc-read-more {
        box-shadow: 1em 0 0.5em #2c2b2d;
    }

    .sc-rating-reviews .sc-review .sc-reviewer-avatar {
        border: 1px solid #2c2b2d;
    }
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-rating-reviews .sc-review .sc-read-more {
        color: rgb(0, 64, 220);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-rating-reviews .sc-review.sc-item {
        background: rgb(54, 54, 56);
    }

    .sc-rating-reviews .sc-review .sc-read-more {
        box-shadow: -1em 0 0.5em rgb(54, 54, 56);
        background-color: rgb(54, 54, 56);
        color: rgb(64, 156, 255);
    }
}

.sc-photos horizontal-pages {
    position: relative;
    top: 0;
    left: -16px;
    right: -16px;
    width: calc(100% + 32px);
}

.sc-photos horizontal-pages .mw-scrollable {
    height: 100%;
}

.sc-photos horizontal-pages.use-arrows .mw-scrollable {
    -webkit-scroll-snap-type: x proximity;
    scroll-snap-type: x mandatory;
    scroll-padding: 20px;
    clip-path: inset(0 16px round 0);
    -webkit-clip-path: inset(0 16px round 0);
}

.sc-photos .sc-photo-item * {
    pointer-events: none;
}

.sc-photos .sc-photo-item {
    position: relative;
    display: inline-block;
    width: calc((100% - 32px - 16px - 8px) / 2); /* 32px margin for arrows + 8px of peek into next item + (2 * 8)px spacing between 2 items */
    border-radius: 10px;
    background-color: #f2f2f6;

    scroll-snap-align: start;
    cursor: pointer;
    background-image: url(images/photo-fill-on-rectangle.svg);
    background-position: center;
    background-repeat: no-repeat;
}

.sc-photos .sc-photo-item .sc-photo-gradient-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.sc-photos .sc-photo-item:only-child {
    width: calc(100% - 32px); /* Approx 342px when shell-tray is 375px */
}

.sc-photos .sc-photo-item scheduled-image {
    padding-bottom: 125.7%; /* Maintains the 44:35 aspect ratio ~ 44 * 35 / 100 = 125.7 */
    border-radius: 10px;
    overflow: hidden;
}

.sc-photos.mw-native .sc-photo-item scheduled-image {
    aspect-ratio: 35 / 44;
    padding-bottom: unset;
}

.sc-photos .sc-photo-item:only-child scheduled-image {
    padding-bottom: 64.2%; /* Gives us an image that is 342px * 64.2% = 220px in height */
}

.sc-photos.mw-native .sc-photo-item:only-child scheduled-image {
    aspect-ratio: 68.5/44; /* Gives us an image that is 342px */
    padding-bottom: unset;
}

.sc-photos .sc-photo-item-title {
    position: absolute;
    top: 12px;
    left: 16px;
    right: 16px;

    color: white;
    font: -apple-system-headline;
    font-size: 1em;
    line-height: 1.29em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
    text-overflow: ellipsis;
    white-space: normal;

    overflow: hidden;
    z-index: 1;
}

.sc-photos .your-photos {
    aspect-ratio: 35 / 44;
    background-size: cover;
}

.sc-photos .sc-photo-item-attribution {
    position: absolute;
    right: 0;
    bottom: 0;

    border-radius: 10px 0;

    padding: 3px 8px;

    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-photos .sc-photo-item-attribution {
    right: unset;
    left: 0;
    border-radius: 0 10px;
}

.sc-photos .sc-photo-punchout {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    width: 106px;
    height: 0;

    /* Calculate the same height as the .sc-photo-item using the 44:35 aspect ratio */
    padding-bottom: calc((100% - 32px - 16px - 8px) / 2 * (44 / 35));

    border-radius: 10px;
    background-color: #f2f2f6;
    color: #0088fa;

    scroll-snap-align: end;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
}

.sc-photos .sc-photo-punchout .sc-icon {
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: calc(50% - 1em);
    left: calc(50% - 0.5em);
}

.sc-photos .sc-photo-punchout .sc-punchout-text {
    font-size: 0.96rem;
    text-overflow: ellipsis;
    overflow: hidden;
    min-height: 1.1rem;
    position: absolute;
    width: 100%;
    top: 50%;
}

.sc-photos .mw-add-photo,
.sc-photos .mw-more-photos {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    height: auto;
    border-radius: 10px;
    color: #0088fa;
    background-color: #f2f2f6;
    text-align: center;
    vertical-align: top;
    aspect-ratio: 35 / 43;
}

.sc-photos .mw-two-buttons .mw-add-photo,
.sc-photos .mw-two-buttons .mw-more-photos {
    aspect-ratio: 1;
}

.sc-photos .mw-add-photo .mw-text,
.sc-photos .mw-more-photos .mw-text {
    font-size: 0.7em;
    padding-top: 0.2em;
}

.sc-photos .mw-photo-buttons:not(.mw-two-buttons) .mw-add-photo {
    aspect-ratio: 1/2;
    width: 28.5%;
    height: 100%;
}

.sc-photos .mw-two-buttons .mw-more-photos {
    margin-top: 8px;
}

.sc-photos .mw-photo-buttons {
    display: inline;
    width: calc(((100% - 32px - 16px - 8px)/ 3.25));
    height: auto;
}

.sc-photos .mw-photo-buttons.mw-two-buttons {
    display: inline-flex;
    flex-direction: column;
    vertical-align: top;
}

.sc-photos .mw-photo-buttons .sc-symbol {
    height: 1rem;
    width: 1rem;
    position: absolute;
    top: calc(50% - 1em);
    left: calc(50% - 0.5em);
}

.sc-photos .mw-text {
    font-size: 0.96rem;
    text-overflow: ellipsis;
    overflow: hidden;
    min-height: 1.1rem;
    position: absolute;
    width: 100%;
    top: 50%;
    font-weight: 600;
}

@supports (-webkit-backdrop-filter: blur(10px)) {
    .sc-photos .sc-photo-item-attribution {
        background-color: rgba(0, 0, 0, 0.2);
        -webkit-backdrop-filter: blur(10px);
    }
}

@supports (mask-image: url(images/symbols/phone.svg)) or (-webkit-mask-image: url(images/symbols/phone.svg)) {
    .sc-photos .sc-photo-punchout .sc-symbol {
        background-color: #0278fc;
    }

    .sc-photos .mw-photo-buttons .sc-symbol {
        background-color: #0278fc;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .sc-photos .sc-photo-item,
    .sc-photos .sc-photo-punchout,
    .sc-photos .mw-add-photo,
    .sc-photos .mw-more-photos {
        background-color: #2c2b2d;
    }
}

/* Full page scrolling and print */
@media print, (max-width: 900px) and (max-height: 500px) {
    .sc-photos .sc-photo-item,
    .sc-photos .sc-photo-punchout,
    .sc-photos .mw-photo-buttons.mw-two-buttons,
    .sc-photos horizontal-pages .mw-scrollable {
        height: 220px;
    }

    .sc-photos .sc-photo-item {
        width: 175px;
    }

    .sc-photos .sc-photo-item scheduled-image,
    .sc-photos .sc-photo-item:only-child scheduled-image,
    .sc-photos .sc-photo-punchout {
        padding-bottom: 0;
        aspect-ratio: auto;
    }

    .sc-photos .sc-photo-item scheduled-image {
        height: 100%;
    }
}

.sc-photos horizontal-pages .mw-scrollable a:focus-visible scheduled-image {
    outline: none;
    box-shadow: 0 0 0 2px #007cff inset;
}

.sc-transit-line-elements .sc-transit-line:first-of-type {
    margin-top: 0;
}

.sc-transit-line-elements .sc-transit-line:last-of-type {
    margin-bottom: 0;
}

.sc-transit-no-departures {
    font-size: 0.765em;
    font-weight: 400;
    line-height: 1.154em;
    color: #8e8e93;
    margin: 0 16px;
    text-align: center;
    margin-top: 16px;
}

.sc-transit-line {
    margin: 16px 0 16px 0;
}

.sc-transit-line .sc-platter-cell {
    padding: 12px 14px;
}

.sc-transit-line .sc-transit-line-display-name {
    font-size: 1em;
    font-weight: 600;
    display: inline;
    line-height: 1.412;
    vertical-align: middle;
}

.sc-transit-line-logo {
    display: inline-block;
    padding-right: 10px;
    position: relative;
}

.sc-transit-line-logo .sc-transit-line-incident-icon {
    position: absolute;
    right: 5px;
    bottom: -4px;
}

.mw-rtl .sc-transit-line-logo .sc-transit-line-incident-icon {
    right: unset;
    left: 5px;
}

.sc-transit-line-logo .sc-transit-line-incident-icon .sc-symbol {
    height: 0.593em;
    width: 0.647em;
}

@supports (mask-image: url(images/symbols/exclamationmark.triangle.fill.svg)) or (-webkit-mask-image: url(images/symbols/exclamationmark.triangle.fill.svg)) {
    .sc-transit-line-logo .sc-transit-line-incident-icon .sc-symbol {
        background-color: #e8af3c;
    }
}

.sc-transit-line-logo .sc-transit-labels img {
    max-height: 1.412em; /* ~ 24px */
}

.mw-rtl .sc-transit-line-logo {
    padding-right: 0;
    padding-left: 10px;
}

.sc-transit-line .sc-transit-line-sequence {
    display: flex;
}

.sc-transit-line-sequence .sc-transit-line-sequence-title {
    flex: 2;
}

.sc-transit-line-sequence-title .sc-transit-line-sequence-last-departure {
    font-size: 0.882em;
    color: #8e8e93;
}

.sc-transit-line-sequence-title .sc-transit-line-sequence-last-departure .sc-last-departure-title {
    font-weight: 600;
}

.sc-transit-line-sequence .sc-transit-line-schedule {
    padding-left: 16px;
    overflow: hidden;
}

.mw-rtl .sc-transit-line-sequence .sc-transit-line-schedule {
    padding-left: 0;
    padding-right: 16px;
}

.sc-transit-line-sequence .sc-countdown-departure .sc-countdown-departure-times,
.sc-transit-line-sequence .sc-stamp-departure-time,
.sc-transit-line-sequence .sc-countdown-departure .sc-countdown-time-unit {
    display: inline-block;
}

.sc-transit-line-sequence .sc-countdown-departure .sc-countdown-time-unit {
    padding-left: 4px;
}

.mw-rtl .sc-transit-line-sequence .sc-countdown-departure .sc-countdown-time-unit {
    padding-left: 0;
    padding-right: 4px;
}

.sc-transit-line-sequence .sc-countdown-departure,
.sc-transit-line-sequence .sc-stamp-departure-times {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Foldable content when we have more than 3 departures for a transit line */
.sc-transit-line .sc-tl-departure-sequence-foldable > foldable-element > .mw-unfolded-content {
    width: 100%;
}

/* The .mw-controls for the foldable element of departures must be position: relative so it can be part of the normal document flow */

/* When more than 3 departures for a line exist, we will have a .sc-tl-departure-sequence-foldable container as the parent of the foldable-element */
.sc-transit-line .sc-tl-departure-sequence-foldable > foldable-element > .mw-controls {
    position: relative;
    height: auto;
}

.sc-transit-line .sc-tl-departure-sequence-foldable > foldable-element > .mw-controls > .mw-toggle.sc-transit-more-departures-toggle {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

.sc-transit-line .sc-tl-departure-sequence-foldable > foldable-element.unfolding > .mw-controls > .mw-toggle.sc-transit-more-departures-toggle {
    transform: none;
    visibility: hidden;
    opacity: 0;
}

.sc-transit-line .sc-tl-departure-sequence-foldable .sc-transit-more-departures {
    color: #0a7bff;
    text-decoration: none;
    cursor: pointer;
}

.sc-transit-line .sc-transit-line-sequence .sc-symbol {
    display: inline-block;
    width: 0.647em; /* ~ 11px */
    height: 0.647em; /* ~ 11px */
    margin-left: 5px;
}

.mw-rtl .sc-transit-line .sc-transit-line-sequence .sc-symbol {
    margin-left: 0;
    margin-right: 5px;
    transform: rotateY(180deg);
}

/* Coloring symbols is only supported when mask-image is supported, they default to black on IE11. */
@supports (mask-image: url(images/symbols/phone.svg)) or (-webkit-mask-image: url(images/symbols/phone.svg)) {
    .sc-transit-line .sc-transit-line-sequence .sc-symbol.on-time {
        background-color: #34c759;
    }

    .sc-transit-line .sc-transit-line-sequence .sc-symbol.delays {
        background-color: #ff3b30;
    }
}

.sc-transit-line .sc-transit-line-sequence .sc-rt-status {
    color: #ff3b30;
    text-align: right;
}

.mw-rtl .sc-transit-line .sc-transit-line-sequence .sc-rt-status {
    text-align: left;
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-transit-line .sc-transit-line-sequence .sc-symbol.on-time {
        background-color: rgb(36, 138, 61);
    }

    .sc-transit-line .sc-transit-line-sequence .sc-symbol.delays {
        background-color: rgb(215, 0, 21);
    }

    .sc-transit-line .sc-transit-line-sequence .sc-rt-status {
        color: rgb(215, 0, 21);
    }

    .sc-transit-line-sequence-title .sc-transit-line-sequence-last-departure {
        color: rgb(108, 108, 112);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-transit-line .sc-transit-line-sequence .sc-symbol.on-time {
        background-color: rgb(48, 219, 91);
    }

    .sc-transit-line .sc-transit-line-sequence .sc-symbol.delays {
        background-color: rgb(255, 105, 97);
    }

    .sc-transit-line .sc-transit-line-sequence .sc-rt-status {
        color: rgb(255, 105, 97);
    }

    .sc-transit-line-sequence-title .sc-transit-line-sequence-last-departure {
        color: rgb(174, 174, 178);
    }
}

.sc-transit-connections .sc-symbol {
    width: 1em;
    height: 1em;
}

.sc-transit-connections > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media screen and (prefers-color-scheme: dark) {
    /* Coloring symbols is only supported when mask-image is supported, they default to black on IE11. */
    @supports (mask-image: url(images/symbols/phone.svg)) or (-webkit-mask-image: url(images/symbols/phone.svg)) {
        .sc-transit-connections .sc-symbol.info-circle {
            background-color: white;
        }
    }
}

.sc-transit-incidents {
    cursor: pointer;
}

.sc-transit-incidents + .sc-transit-line-elements {
    margin-top: 16px;
}

.sc-transit-incidents.sc-platter-container {
    background-color: rgba(255, 204, 0, 0.2);
}

.sc-transit-incidents.sc-platter-container.blocking {
    background-color: rgba(255, 59, 48, 0.15);
}

.sc-transit-incidents .sc-platter-cell {
    pointer-events: none;
    padding: 11px 11px 11px 12px;
}

.sc-transit-incidents .sc-transit-incident-title {
    margin: 0;
    font-size: 0.882em;
    font-weight: 600;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.sc-transit-incidents .sc-transit-incident-title-time-container {
    display: inline-block;
    width: calc(100% - 30px);
    padding-left: 30px;
    vertical-align: middle;
    height: 1.295em;
}

.sc-transit-incidents .sc-symbol + .sc-transit-incident-title-time-container {
    padding-left: 8px;
}

.mw-rtl .sc-transit-incidents .sc-symbol + .sc-transit-incident-title-time-container {
    padding-right: 8px;
    padding-left: 0;
}

.sc-transit-incidents .sc-transit-incident-message {
    font-size: 0.765em;
    line-height: 1.308;
    margin: 0 0 0 30px;
}

.sc-transit-incidents .sc-transit-incident-time {
    float: right;
    margin: 0;
    font-size: 0.765em;
    font-weight: 400;
    color: #8e8e93;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
}

.mw-rtl .sc-transit-incidents .sc-transit-incident-time {
    float: left;
    text-align: left;
}

.sc-transit-incidents .sc-platter-cell > .sc-symbol {
    width: 17px;
    height: 17px;
    vertical-align: middle;
    display: inline-block;
}

.sc-transit-incidents .sc-transit-incident-title-time-container .sc-symbol {
    margin-left: 2px;
    width: 0.765em;
    height: 0.765em;
    display: inline-block;
}

.mw-rtl .sc-transit-incidents .sc-transit-incident-title-time-container .sc-symbol {
    margin-left: 0;
    margin-right: 2px;
}

@supports (mask-image: url(images/symbols/exclamationmark.triangle.fill.svg)) or (-webkit-mask-image: url(images/symbols/exclamationmark.triangle.fill.svg)) {
    .sc-transit-incidents .sc-symbol {
        background-color: rgb(255, 204, 0);
    }

    .sc-transit-incidents.blocking .sc-symbol {
        background-color: rgb(255, 59, 48);
    }

    .sc-transit-incidents .sc-transit-incident-title-time-container .sc-symbol {
        background-color: #8e8e93;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .sc-transit-incidents.sc-platter-container,
    .sc-transit-incidents.sc-platter-container.blocking {
        background-color: rgb(255, 255, 255, 0.07);
    }
}

.sc-transit-attribution {
    margin: 0 16px;
    font-size: 0.765em; /* ~13px */
    font-weight: 400;
    line-height: 1.154em; /* ~15px */
    color: #8e8e93;
}

.sc-transit-attribution .sc-transit-attribution-text {
    margin-right: 2px;
}

.sc-transit-attribution a {
    text-decoration: none;
    color: #0a7bff;

    cursor: pointer;
}

.sc-transit-attribution a:hover {
    text-decoration: underline;
}

.sc-venue-info {
    padding: 8px 16px;
    box-sizing: border-box;
    overflow: hidden;
}

.sc-venue-info[data-count="1"],
.sc-venue-info[data-count="2"] {
    padding: 5px 16px;
}

.sc-venue-info .sc-venue-item {
    float: left;
    width: calc(50% - 8px);

    line-height: 1.9;
    height: 1.9em;

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

.sc-venue-info .sc-venue-item:nth-child(odd) {
    margin-right: 16px;
}

.sc-bike-share {
    padding: 8px 16px;
    box-sizing: border-box;
    background: var(--color-background);
}

.sc-bike-share .sc-green {
    color: var(--color-green);
}

.sc-bike-share .sc-red {
    color: var(--color-red);
}

.sc-bike-share table {
    font-size: 1em;
    font-weight: 500;
    line-height: 1.324;
    table-layout: fixed;
    width: 100%;
}

.sc-bike-share td {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Web Module */
#web-module .sc-bike-share-section-header-title {
    font-size: 1.1765em;
    font-weight: 700;
}

#web-module .sc-bike-share {
    width: calc(100% - 32px);
    position: relative;
    left: 16px;
    padding: 12px 16px;
}

/* RTL */
.mw-rtl .sc-bike-share td {
    text-align: right;
}

#web-module.mw-rtl .sc-bike-share {
    left: unset;
    right: 16px;
}

#web-module.sc-macos-12-0 .sc-bike-share {
    margin: 0 8px;
    width: calc(100% - 48px);
}

/* Mac OS 13 styles */
#web-module.mw-macos.sc-macos-13-0 .sc-bike-share {
    width: calc(100% - 48px);
    position: relative;
    left: 24px;
    padding: 12px 16px;
}

#web-module.mw-macos.sc-macos-13-0.mw-rtl .sc-bike-share {
    left: unset;
    right: 24px;
}

.sc-annotated-picture horizontal-pages {
    position: relative;
    left: -16px;
    right: -16px;
    width: calc(100% + 32px);
}

.sc-annotated-picture horizontal-pages .mw-scrollable {
    display: flex;
}

.sc-annotated-picture horizontal-pages.use-arrows .mw-scrollable {
    scroll-snap-type: x proximity;
    scroll-padding: 16px;
}

.sc-annotated-picture-item * {
    pointer-events: none;
}

.sc-annotated-picture-item {
    display: inline-flex;
    flex: 1;
    flex-direction: column;
    background: white;
    border-radius: 10px;
    max-width: 150px;
    min-width: 150px;
    scroll-snap-align: start;
    padding-bottom: 16px;
    cursor: pointer;
}

.sc-annotated-picture-image {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 112px;

    border-radius: 10px 10px 0 0;
    background-color: #f2f2f6;
    overflow: hidden;
}

.sc-annotated-picture-item scheduled-image {
    width: 100%;
    height: 112px;

    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.sc-annotated-picture-primary-text {
    position: relative;
    width: calc(100% - 32px);
    margin: 16px 16px auto 16px;
    overflow: hidden;

    font-weight: 500;
    font-size: 0.94rem;
    white-space: normal;
    color: #000;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sc-annotated-picture-secondary-text {
    position: relative;
    width: calc(100% - 32px);
    margin: 8px 16px 0 16px;

    font-size: 0.75rem;
    color: #8e8e93;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (prefers-color-scheme: dark) {
    .sc-annotated-picture-item {
        background: #2c2b2d;
    }

    .sc-annotated-picture-image {
        background-color: rgba(255, 255, 255, 0.07);
    }

    .sc-annotated-picture-primary-text {
        color: #fff;
    }
}

.sc-punchout-tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    min-width: 150px;
    max-width: 150px;
    flex: 1;
    flex-direction: column;

    background-color: #f2f2f6;
    color: #0088fa;
    border-radius: 10px;
    scroll-snap-align: start;

    text-decoration: none;
}

.sc-punchout-tile .sc-icon {
    width: 0.96rem;
    height: 0.96rem;
    margin-bottom: 5px;
}

.sc-punchout-tile .sc-punchout-text {
    width: calc(100% - 32px);
    font-size: 0.823rem;
    min-height: 1.1rem;

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

/* Coloring symbols is only supported when mask-image is supported. */
@supports (mask-image: url(images/symbols/arrow.up.right.square.fill.svg)) or (-webkit-mask-image: url(images/symbols/arrow.up.right.square.fill.svg)) {
    .sc-punchout-tile .sc-icon .sc-symbol.arrow-up-right-square-fill,
    .sc-punchout-tile .sc-icon .sc-symbol.arrow-up-left-square-fill {
        background-color: #0088fa;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .sc-punchout-tile {
        background-color: #2c2b2d;
    }
}

.sc-annotated-list {
    padding: 8px 16px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.sc-annotated-list-item {
    line-height: 1.9;
    height: 1.9em;
    white-space: nowrap;
}

.sc-annotated-list-column-1 {
    display: flex;
    flex-direction: column;
    flex: 0 0 50%;
}

.sc-annotated-list-column-2 {
    display: flex;
    flex-direction: column;
}

.sc-annotated-list-column-1 .sc-annotated-list-item {
    padding-right: 16px;
}

.mw-rtl .sc-annotated-list-column-1 .sc-annotated-list-item {
    padding-right: 0;
    padding-left: 16px;
}

.sc-associated-app {
    width: calc(100% - 32px);
    margin: 16px;
    display: block;
    cursor: pointer;
}

.sc-associated-app .sc-associated-app-platter {
    width: calc(100% - 32px);
    padding: 14px 16px;
    text-decoration: none;
    color: #000;
    background: #fff;
    border-radius: 10px;
    overflow: auto;
    display: grid;
    grid-template-columns: 2.82em auto minmax(auto, max-content);
    grid-gap: 10px;
}

.sc-associated-app .sc-associated-app-content {
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.sc-associated-app .mw-artwork {
    height: 2.82em; /* ~48px */
    width: 2.82em; /* ~48px */
    -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));
}

.sc-associated-app .mw-artwork scheduled-image {
    width: 2.82em; /* ~48px */
    height: 2.82em; /* ~48px */
    border-radius: 8px;
}

.sc-associated-app .sc-associated-app-label {
    font-weight: 600;
    line-height: 1.6em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.sc-associated-app .sc-associated-app-subtitle {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: rgb(142, 142, 147);
    font-size: 0.9em;
}

.mw-rtl .sc-associated-app {
    order: -1;
}

.sc-associated-app .sc-associated-app-button {
    background-color: rgba(143, 143, 146, 0.14);
    padding: 5px 10px;
    border-radius: 20px;
    color: #0278fc;
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
    text-align: center;
    margin: auto 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.sc-associated-app-content:focus {
    outline: none;
}

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

    .sc-associated-app .sc-associated-app-button {
        background-color: rgba(255, 255, 255, 0.07);
    }
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-associated-app .sc-associated-app-button {
        color: rgb(0, 64, 220);
        background-color: rgb(235, 235, 240);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-associated-app .sc-associated-app-platter {
        background: rgb(54, 54, 56);
    }

    .sc-associated-app .sc-associated-app-button {
        color: rgb(64, 156, 255);
        background-color: rgba(255, 255, 255, 0.07);
    }
}

.sc-unified-action-row-container {
    font-size: 0.7em;
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(18%, 1fr));
}

.sc-bigger-font-size .sc-unified-action-row-container {
    grid-template-columns: none;
}

.mw-rtl .sc-unified-action-row-container {
    order: -1;
}

.sc-unified-action-row-container .sc-unified-action-row-item {
    display: block;
    justify-content: center;
    align-items: center;
    border-radius: 10px;

    color: #0088fa;
    background-color: rgba(0, 0, 0, 0.06);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    padding: 3px 1px;
}

.sc-bigger-font-size .sc-unified-action-row-container .sc-unified-action-row-item {
    display: flex;
    justify-content: left;
}

.mw-rtl .sc-unified-action-row-container .sc-unified-action-row-item {
    order: -1;
}

.mw-rtl .sc-bigger-font-size .sc-unified-action-row-container .sc-unified-action-row-item {
    justify-content: right;
}

.sc-unified-action-row-container .sc-unified-action-row-item:active,
.sc-unified-action-row-container .sc-unified-action-row-item:hover {
    text-decoration: none;
}

.sc-unified-action-row-container .sc-unified-action-row-item:hover {
    background-color: rgba(0, 0, 0, 0.09);
}

.sc-unified-action-row-container .sc-unified-action-row-item:active {
    background-color: #dadada;
}

.sc-unified-action-row-container .sc-primary-button {
    background: #0278fc;
    color: rgb(255, 255, 255);
}

.sc-unified-action-row-container .sc-primary-button:hover {
    background: #006fe7;
    text-decoration: none;
}

.sc-unified-action-row-container .sc-primary-button:active {
    background: #0064cf;
}

.sc-unified-action-row-container .sc-primary-button * {
    pointer-events: none;
}

.sc-unified-action-row-container .sc-primary-button:focus-visible .sc-unified-action-row-title {
    color: rgb(25, 64, 127);
}

.sc-unified-action-row-container .sc-icon {
    display: block;
    margin: 3px auto 3px auto;
    width: 15px;
    height: 15px;
}

.sc-size-AX1.sc-bigger-font-size .sc-unified-action-row-container .sc-icon,
.sc-size-AX2.sc-bigger-font-size .sc-unified-action-row-container .sc-icon {
    margin: 10px 8px 10px 12px;
}

.mw-rtl .sc-size-AX1.sc-bigger-font-size .sc-unified-action-row-container .sc-icon,
.mw-rtl .sc-size-AX2.sc-bigger-font-size .sc-unified-action-row-container .sc-icon {
    margin: 10px 12px 10px 8px;
}

.sc-size-AX3.sc-bigger-font-size .sc-unified-action-row-container .sc-icon,
.sc-size-AX4.sc-bigger-font-size .sc-unified-action-row-container .sc-icon,
.sc-size-AX5.sc-bigger-font-size .sc-unified-action-row-container .sc-icon {
    margin: 10px 12px 10px 18px;
    width: 26px;
    height: 26px;
}

.mw-rtl .sc-size-AX3.sc-bigger-font-size .sc-unified-action-row-container .sc-icon,
.mw-rtl .sc-size-AX4.sc-bigger-font-size .sc-unified-action-row-container .sc-icon,
.mw-rtl .sc-size-AX5.sc-bigger-font-size .sc-unified-action-row-container .sc-icon {
    margin: 10px 18px 10px 12px;
}

.sc-unified-action-row-container .mw-popup-menu {
    flex: 1 1 0;
    overflow: visible;
    cursor: pointer;
}

.sc-unified-action-row-container .mw-popup-menu ui-menu {
    display: block;
}

.sc-unified-action-row-container .mw-popup-menu ui-menu .mw-controls {
    overflow: hidden;
    border-radius: 10px;
}

.sc-unified-action-row-container .mw-popup-menu .sc-submenu-icon .sc-symbol {
    background-color: #000;
}

.sc-unified-action-row-container .mw-popup-menu .mw-popup-menu-row-item-subtitle {
    color: var(--secondary-label);
    display: inline-flex;
    flex: 1;
    align-items: center;
    margin-right: 20px;

    word-break: break-word;
}

.sc-unified-action-row-container .mw-popup-menu loading-spinner {
    position: relative;
    transform: scale(0.65625);
}

/* 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)) {
    .sc-unified-action-row-container .sc-symbol {
        background-color: #0088fa;
    }

    .sc-unified-action-row-container .sc-symbol.figure-wave {
        mask-size: contain;
    }

    .sc-unified-action-row-container .sc-primary-button .sc-symbol {
        background-color: #f2f2f2;
        color: #0278fc;
    }

    .sc-unified-action-row-container .sc-primary-button:focus-visible .sc-symbol {
        background-color: rgb(25, 64, 127);
    }

    .sc-unified-action-row-container .sc-primary-button .sc-icon {
        background-color: inherit;
    }
}

.sc-unified-action-row-container .sc-unified-action-row-title {
    margin: auto;
    padding-bottom: 3px;
    line-height: 1.34;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sc-bigger-font-size .sc-unified-action-row-container .sc-unified-action-row-title {
    margin: 10px 0;
}

.sc-unified-action-row-container .mw-popup-menu .mw-popup-menu-row-item {
    font-size: 1.26em;
}

.sc-unified-action-row-container .mw-popup-menu .mw-popup-menu-row-item .sc-icon {
    width: 20px;
    height: 20px;
}

.sc-bigger-font-size .sc-unified-action-row-container .mw-popup-menu .mw-popup-menu-row-item .sc-icon {
    width: 26px;
    height: 26px;
}

.sc-unified-action-row-container .mw-popup-menu .mw-controls:focus-visible {
    box-shadow: 0 0 0 2px #007cff inset;
    outline: none;
}

@media screen and (prefers-color-scheme: dark) {
    .sc-unified-action-row-container .sc-unified-action-row-item {
        background-color: rgba(255, 255, 255, 0.07);
    }

    .sc-unified-action-row-container .sc-unified-action-row-item:hover {
        background-color: rgba(255, 255, 255, 0.09);
    }

    .sc-unified-action-row-container .sc-unified-action-row-item:active {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .sc-unified-action-row-container .sc-symbol {
        background-color: #f2f2f2;
    }

    .sc-unified-action-row-container .sc-unified-action-row-title {
        color: #fff;
    }

    .sc-unified-action-row-container .sc-primary-button {
        background-color: #0278fc;
    }

    .sc-unified-action-row-container .sc-primary-button:hover {
        background: #258eff;
    }

    .sc-unified-action-row-container .sc-primary-button:active {
        background: #409cff;
    }

    .sc-unified-action-row-container .sc-primary-button:focus-visible .sc-symbol {
        background-color: rgb(150, 193, 254);
    }

    .sc-unified-action-row-container .sc-primary-button:focus-visible .sc-unified-action-row-title {
        color: rgb(150, 193, 254);
    }

    .sc-unified-action-row-container .mw-popup-menu .sc-submenu-icon .sc-symbol {
        background-color: #fff;
    }
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-unified-action-row-container .sc-symbol {
        background-color: rgb(0, 64, 220);
    }

    .sc-unified-action-row-container .sc-unified-action-row-item {
        color: rgb(0, 64, 220);
    }

    .sc-unified-action-row-container .sc-primary-button.sc-unified-action-row-item {
        color: rgb(255, 255, 255);
        background-color: rgb(0, 64, 220);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-unified-action-row-container .sc-symbol {
        background-color: #f2f2f2;
    }
}

.sc-action-footer .sc-poi-claim,
.sc-action-footer .sc-action-footer-item,
.sc-action-footer .sc-open-in-maps {
    display: flex;
    align-items: center;
    text-decoration: none;

    --color: #027aff;
    --color-more-contrast: rgb(0, 64, 220);
    --color-more-contrast-dark: rgb(64, 156, 255);
    color: var(--color);
}

.sc-action-footer .sc-poi-claim .sc-icon,
.sc-action-footer .sc-action-footer-item .sc-icon,
.sc-action-footer .sc-open-in-maps .sc-icon {
    height: 2.12em;
    width: 2.12em;

    --background-color: rgb(240, 240, 240);
    --background-color-dark: rgba(255, 255, 255, 0.1);
    background-color: var(--background-color);

    border-radius: 50%;
    margin-right: 8px;
}

.sc-action-footer .sc-poi-claim .sc-icon .sc-symbol,
.sc-action-footer .sc-action-footer-item .sc-icon .sc-symbol,
.sc-action-footer .sc-open-in-maps .sc-icon .sc-symbol {
    width: 100%;
    height: 100%;
    transform: scale(0.5);
}

/*  Due to a SVG rendering issue on 1x displays, we need to keep the width slightly greater than the height
    For more context see rdar://98062623 ([WP] "V", Call, Navigate icons are truncated on non-retina displays) */
@media (max-resolution: 1dppx) {
    .sc-action-footer .sc-poi-claim .sc-icon .sc-symbol,
    .sc-action-footer .sc-action-footer-item .sc-icon .sc-symbol,
    .sc-action-footer .sc-open-in-maps .sc-icon .sc-symbol {
        width: 103%;
        height: 102%;
    }
}

.mw-rtl .sc-action-footer .sc-poi-claim .sc-icon,
.mw-rtl .sc-action-footer .sc-action-footer-item .sc-icon,
.mw-rtl .sc-action-footer .sc-open-in-maps .sc-icon {
    margin-right: unset;
    margin-left: 8px;
}

.sc-action-footer .sc-poi-claim .sc-poi-claim-label,
.sc-action-footer .sc-action-footer-item .sc-action-footer-item-label,
.sc-action-footer .sc-open-in-maps .sc-open-in-maps-label {
    font-size: 1em;
    line-height: 1.29;
    width: calc(100% - 2.12rem - 8px);
}

.sc-action-footer a:focus-visible {
    box-shadow: 0 0 0 2px #007cff;
    outline: none;
    border-radius: 10px;
}

.sc-action-footer .sc-action-footer-item::before {
    top: 0;
    bottom: auto;

    position: absolute;
    left: calc(2.12em + 16px + 9px);
    width: calc(100% - (2.12em + 16px + 9px));
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    content: "";
}

/* Do not add a border to the first elements after a title. */
.sc-action-footer .sc-action-footer-item:first-child::before {
    display: none;
}

/* Add to/Remove from Favorites */
.sc-action-footer .sc-action-footer-item.remove {
    color: red;
}

/* Coloring symbols is only supported when mask-image is supported. */
@supports (mask-image: url(images/symbols/checkmark.seal.fill.svg)) or (-webkit-mask-image: url(images/symbols/checkmark.seal.fill.svg)) {
    .sc-action-footer .sc-poi-claim .sc-symbol,
    .sc-action-footer .sc-action-footer-item .sc-symbol,
    .sc-action-footer .sc-open-in-maps .sc-symbol {
        --background-color: #0278fc;
        background-color: var(--background-color);

        --background-color-more-contrast: rgb(0, 64, 220);
        --background-color-more-contrast-dark: rgb(64, 156, 255);
    }

    .sc-action-footer .sc-action-footer-item.remove .sc-symbol {
        background-color: red;
    }
}

@media screen and (prefers-color-scheme: dark) {
    :root:not(.mw-light) .sc-action-footer .sc-poi-claim .sc-icon,
    :root:not(.mw-light) .sc-action-footer-item .sc-icon,
    :root:not(.mw-light) .sc-action-footer .sc-open-in-maps .sc-icon {
        --background-color: var(--background-color-dark);
    }
}

:root.mw-dark .sc-action-footer .sc-poi-claim .sc-icon,
:root.mw-dark .sc-action-footer .sc-open-in-maps .sc-icon {
    --background-color: var(--background-color-dark);
}

@media screen and (prefers-contrast: more) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-action-footer .sc-poi-claim .sc-symbol,
    .sc-action-footer .sc-action-footer-item .sc-symbol,
    .sc-action-footer .sc-open-in-maps .sc-symbol {
        --background-color: var(--background-color-more-contrast);
    }

    .sc-action-footer .sc-poi-claim,
    .sc-action-footer .sc-action-footer-item,
    .sc-action-footer .sc-open-in-maps {
        --color: var(--color-more-contrast);
    }

    :root.mw-dark .sc-action-footer .sc-poi-claim,
    :root.mw-dark .sc-action-footer .sc-open-in-maps {
        --color: var(--color-more-contrast-dark);
    }
}

@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) { /* stylelint-disable-line -- Stylelint 13.13.1 returns false positives for prefers-contrast */
    .sc-action-footer .sc-poi-claim .sc-symbol,
    .sc-action-footer .sc-action-footer-item .sc-symbol,
    .sc-action-footer .sc-open-in-maps .sc-symbol {
        --background-color: var(--background-color-more-contrast-dark);
    }

    :root:not(.mw-light) .sc-action-footer .sc-poi-claim,
    :root:not(.mw-light) .sc-action-footer .sc-action-footer-item,
    :root:not(.mw-light) .sc-action-footer .sc-open-in-maps {
        --color: var(--color-more-contrast-dark);
    }
}

.sc-ev-charger .mw-unfolded-content {
    width: 100%;
}

.sc-ev-charger-plug {
    margin-top: 16px;
}

.sc-ev-charger-plug .sc-ev-charger-plug-title {
    display: flex;
    align-items: center;
}

.sc-ev-charger-plug .sc-ev-charger-plug-title .sc-symbol {
    display: inline-block;
    height: 1em;
    width: 1em;
    margin-right: 5px;
}

.mw-rtl .sc-ev-charger-plug .sc-ev-charger-plug-title .sc-symbol {
    margin-right: 0;
    margin-left: 5px;
}

.sc-ev-charger-plug:first-of-type {
    margin-top: 0;
}

.sc-ev-charger foldable-element {
    margin-top: 16px;
}

.sc-ev-charger foldable-element .mw-controls {
    transition: opacity 0.1s ease-out;
    opacity: 1;
    visibility: visible;
    position: relative;
    height: auto;
}

.sc-ev-charger > foldable-element.unfolding > .mw-controls {
    visibility: hidden;
    opacity: 0;
}

.sc-ev-charger foldable-element .sc-ev-charger-more .sc-platter-cell {
    color: #0a7bff;
}

.sc-ev-charger-plug .sc-plug-current-type {
    display: inline-block;
}

.sc-ev-charger-plug .sc-plug-power {
    display: inline-block;
}

.sc-ev-charger-plug .sc-plug-info {
    display: flex;
    justify-content: space-between;
}

@media screen and (prefers-color-scheme: dark) {
    .sc-ev-charger-plug .sc-ev-charger-plug-title .sc-symbol {
        background-color: #fff;
    }
}