

@media (max-width: 575.98px) {
    /* Experience type tabs: show every label and make the active one unmistakable. */
    .modal .nav.arrow-navtabs.nav-success {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: .35rem;
        width: 100%;
        min-height: 2.65rem;
        margin: 0;
        padding: .25rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background-color: var(--vz-light, #f3f6f9);
        border-radius: .35rem;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .modal .nav.arrow-navtabs.nav-success > .nav-item,
    .modal .nav.arrow-navtabs.nav-success > .nav-link {
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content;
        max-width: none !important;
        visibility: visible !important;
        scroll-snap-align: start;
    }

    .modal .nav.arrow-navtabs.nav-success .nav-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-height: 2.1rem !important;
        padding: .5rem .75rem !important;
        color: var(--vz-body-color, #212529) !important;
        background: transparent;
        border-radius: .3rem !important;
        font-size: .78rem !important;
        font-weight: 500;
        line-height: 1.2 !important;
        opacity: 1 !important;
        white-space: nowrap !important;
    }

    /* Some reservation templates hide the original tab caption below sm. */
    .modal .nav.arrow-navtabs.nav-success .nav-link > * {
        display: none !important;
    }

    .modal .nav.arrow-navtabs.nav-success .nav-link::before {
        content: attr(data-experience-tab-icon) !important;
        display: inline-block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 .35rem 0 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: currentColor;
        font-family: "remixicon" !important;
        font-style: normal;
        font-weight: 400;
        font-size: 1rem;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transform: none !important;
    }

    .modal .nav.arrow-navtabs.nav-success .nav-link::after {
        content: attr(data-experience-tab-label) !important;
        display: inline-block !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        border: 0 !important;
        background: transparent !important;
        font-size: .78rem;
        line-height: 1.2;
        transform: none !important;
    }

    .modal .nav.arrow-navtabs.nav-success .nav-link.active,
    .modal .nav.arrow-navtabs.nav-success .nav-item.show .nav-link {
        color: #fff !important;
        background-color: #13c56b !important;
        box-shadow: 0 .15rem .35rem rgba(19, 197, 107, .35);
        font-weight: 600;
    }

}
