:root {
    --blue-dark: #4f60d2;
    --blue-light: #4bdbc5;
    --red: #e04232;
    --pink: #eb84cd;
    --yellow: #fcd200;
    --green-light: #bad80a;
    --green-dark: #6ea514;
    --pure-black: #000;
    --pure-white: #fff;
    --gray-900: #1e1f27;
    --gray-900-rgb: 30, 31, 39;
    --gray-800: #2a2a33;
    --gray-700: #35363e;
    --gray-600: #404149;
    --gray-500: #5b5c64;
    --gray-400: #74757d;
    --gray-300: #94959d;
    --gray-200: #bbbcc4;
    --gray-100: #dddee3;
    --gray-075: #efeff1;
    --gray-050: #f7f7f8;
    --color-neutral-0: var(--pure-white);
    --color-neutral-1: var(--gray-075);
    --color-neutral-2: var(--gray-100);
    --color-neutral-3: var(--gray-200);
    --color-neutral-4: var(--gray-300);
    --color-neutral-5: var(--gray-400);
    --color-neutral-6: var(--gray-500);
    --color-neutral-7: var(--gray-600);
    --color-neutral-8: var(--gray-700);
    --color-neutral-9: var(--gray-800);
    --color-neutral-10: var(--gray-900);
    --color-error-light: var(--red);
    --color-error: var(--red);
    --color-warning-light: var(--yellow);
    --color-warning: var(--yellow);
    --color-success-light: var(--green-dark);
    --color-success: var(--green-dark);
    --color-info-light: var(--blue-dark);
    --color-info: var(--blue-dark);
    --color-primary: var(--gray-900);
    --color-primary-hover: var(--gray-900);
    --color-secondary: var(--pure-white);
    --font-size-display: 2.625rem;
    --font-size-h1: 2rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.625rem;
    --font-size-h4: 1.375rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1.125rem;
    --font-size-base: 1rem;
    --font-size-s: .875rem;
    --font-size-xs: .75rem;
    --font-medium: 500;
    --aria-label: "";
    --space-none: 0;
    --space-xs: 4px;
    --space-s: 8px;
    --space-base-s: 12px;
    --space-base: 16px;
    --space-base-m: 20px;
    --space-m: 24px;
    --space-l: 32px;
    --space-xl: 40px;
    --space-xxl: 48px;
    --header-color: var(--yellow);
    --header-top-menu-size: 0px;
    --header-main-menu-size: 112px;
    --header-size: calc(var(--header-top-menu-size) + var(--header-main-menu-size));
    --content-height: calc(100vh - var(--header-size));
    --grid-outter-gutter: var(--space-base);
    --grid-gutter: var(--space-base)
}

html {
    font-size: 100%;
    line-height: 1.5
}

body {
    overflow-x: hidden;
    font-family: AzoSansWeb, sans-serif;
    font-size: inherit;
    line-height: inherit;
    height: 100%
}

    body.ios {
        -webkit-transform: translate3d(0, 0, 0)
    }

    body.phone {
        overflow: hidden
    }

select, textarea, input, button {
    font-family: AzoSansWeb, sans-serif;
    line-height: 1
}

.svg-wrapper svg {
    vertical-align: middle
}

.ThemeGrid_MarginGutter {
    margin-left: 0 !important
}

.screen-container {
    background: var(--gray-700)
}

@font-face {
    font-style: normal;
    font-family: "AzoSansWeb";
    font-weight: 400;
    src: url("/Theme_Cinemas/fonts/AzoSansWeb-Regular.woff") format("woff");
    text-rendering: optimizeLegibility;
    font-display: swap
}

@font-face {
    font-style: normal;
    font-family: "AzoSansWeb";
    font-weight: 700;
    src: url("/Theme_Cinemas/fonts/AzoSansWeb-Bold.woff") format("woff");
    text-rendering: optimizeLegibility;
    font-display: swap
}

@font-face {
    font-style: normal;
    font-family: "AzoSansWeb";
    font-weight: 300;
    src: url("/Theme_Cinemas/fonts/AzoSansWeb-Light.woff") format("woff");
    text-rendering: optimizeLegibility;
    font-display: swap
}

@font-face {
    font-style: normal;
    font-family: "AzoSansWeb";
    font-weight: 500;
    src: url("/Theme_Cinemas/fonts/AzoSansWeb-Medium.woff") format("woff");
    text-rendering: optimizeLegibility;
    font-display: swap
}

@font-face {
    font-style: normal;
    font-family: cinemas-font;
    font-weight: normal;
    src: url("/Theme_Cinemas/fonts/cinemas-font-v6.woff2") format("woff2");
    font-display: block
}

[class^="icon-"], [class*=" icon-"] {
    text-transform: none !important;
    font-style: normal !important;
    font-family: cinemas-font !important;
    line-height: 1;
    font-weight: normal !important;
    font-variant: normal !important;
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-alert-rounded::before {
    content: ""
}

.icon-alert-triangle::before {
    content: ""
}

.icon-alterar-contexto::before {
    content: ""
}

.icon-arrow-down::before {
    content: ""
}

.icon-arrow-left::before {
    content: ""
}

.icon-arrow-right::before {
    content: ""
}

.icon-arrow-up::before {
    content: ""
}

.icon-back::before {
    content: ""
}

.icon-backward::before {
    content: ""
}

.icon-bell-check::before {
    content: ""
}

.icon-calendar::before {
    content: ""
}

.icon-camera::before {
    content: ""
}

.icon-chair::before {
    content: ""
}

.icon-check-all::before {
    content: ""
}

.icon-check-circle-line::before {
    content: ""
}

.icon-check-circle::before {
    content: ""
}

.icon-check::before {
    content: ""
}

.icon-checkbox-off::before {
    content: ""
}

.icon-checkbox-on::before {
    content: ""
}

.icon-close::before {
    content: ""
}

.icon-configurations::before {
    content: ""
}

.icon-copiar::before {
    content: ""
}

.icon-current-location::before {
    content: ""
}

.icon-dots-horizontal::before {
    content: ""
}

.icon-dots-vertical::before {
    content: ""
}

.icon-download::before {
    content: ""
}

.icon-editar::before {
    content: ""
}

.icon-error-rounded-v2::before {
    content: ""
}

.icon-error-rounded::before {
    content: ""
}

.icon-external-link::before {
    content: ""
}

.icon-eye-hide::before {
    content: ""
}

.icon-eye::before {
    content: ""
}

.icon-faq::before {
    content: ""
}

.icon-favorite-filled::before {
    content: ""
}

.icon-favorite::before {
    content: ""
}

.icon-filter-filled::before {
    content: ""
}

.icon-filtros::before {
    content: ""
}

.icon-gear::before {
    content: ""
}

.icon-heart::before {
    content: ""
}

.icon-history::before {
    content: ""
}

.icon-home::before {
    content: ""
}

.icon-info-rounded::before {
    content: ""
}

.icon-left-arrow::before {
    content: ""
}

.icon-less-outlined::before {
    content: ""
}

.icon-less::before {
    content: ""
}

.icon-list-inverted::before {
    content: ""
}

.icon-location::before {
    content: ""
}

.icon-lock::before {
    content: ""
}

.icon-miscseta-dropdown-cheia::before {
    content: ""
}

.icon-miscseta-dropleft-cheia::before {
    content: ""
}

.icon-miscseta-dropright-cheia::before {
    content: ""
}

.icon-miscseta-dropup-cheia::before {
    content: ""
}

.icon-mobilidade::before {
    content: ""
}

.icon-more::before {
    content: ""
}

.icon-notificacoes-on::before {
    content: ""
}

.icon-notificacoes::before {
    content: ""
}

.icon-pencil::before {
    content: ""
}

.icon-pin::before {
    content: ""
}

.icon-plus-outlined::before {
    content: ""
}

.icon-plus::before {
    content: ""
}

.icon-radio-button-off::before {
    content: ""
}

.icon-radio-button-on::before {
    content: ""
}

.icon-recycle-bin-empty-filled::before {
    content: ""
}

.icon-recycle-bin-empty::before {
    content: ""
}

.icon-refresh::before {
    content: ""
}

.icon-screen::before {
    content: ""
}

.icon-search::before {
    content: ""
}

.icon-share::before {
    content: ""
}

.icon-sliders-equal::before {
    content: ""
}

.icon-star::before {
    content: ""
}

.icon-ticket::before {
    content: ""
}

.icon-up-down::before {
    content: ""
}

.icon-upload::before {
    content: ""
}

.icon-user::before {
    content: ""
}

.icon-vector::before {
    content: ""
}

.icon-vip::before {
    content: ""
}

.icon-zoom-out::before {
    content: ""
}

.icon-zoom::before {
    content: ""
}

.icon-arrow-up {
    --aria-label: ícone de seta para cima
}

.icon-arrow-left {
    --aria-label: ícone de seta para a esquerda
}

.icon-arrow-right {
    --aria-label: ícone de seta para a direita
}

.icon-arrow-down {
    --aria-label: ícone de seta para baixo
}

.icon-alert-triangle {
    --aria-label: ícone de alerta
}

.icon-check-circle {
    --aria-label: ícone de sucesso
}

.icon-close {
    --aria-label: ícone de fechar
}

.icon-error-rounded {
    --aria-label: ícone de erro
}

.icon-external-link {
    --aria-label: ícone de link externo
}

.icon-internet {
    --aria-label: ícone de internet
}

.icon-refresh {
    --aria-label: ícone de atualizar informação
}

.icon-radio-button-off {
    --aria-label: ícone de desativo
}

.icon-radio-button-on {
    --aria-label: ícone de ativo
}

.icon-alert-triangle-filled {
    --aria-label: ícone de alerta
}

.icon-plus {
    --aria-label: ícone de adicionar
}

.icon-less {
    --aria-label: ícone de diminuir
}

.icon-gaming {
    --aria-label: ícone de gaming
}

.icon-sound {
    --aria-label: ícone de som
}

.icon-envelope {
    --aria-label: ícone de envelope
}

.icon-wireless-disabled {
    --aria-label: ícone de wi-fi com problemas
}

.icon-back {
    --aria-label: ícone de voltar
}

a.a-link, a.a-link:is(:link,:visited) {
    border-bottom: 1px solid var(--blue-light);
    font-size: var(--font-size-base);
    line-height: var(--font-size-base);
    font-weight: 500
}

.phone a.a-link, .phone a.a-link:is(:link,:visited) {
    font-size: 0.875rem;
    line-height: var(--font-size-base)
}

a.a-link:hover, a.a-link:is(:link,:visited):hover {
    text-decoration: none
}

a:hover, a:focus {
    text-decoration: none;
    color: var(--pure-white)
}

input[data-input], input[data-input]:empty, textarea[data-textarea], textarea[data-textarea]:empty {
    border-radius: 0;
    height: 40px;
    font-size: 0.875rem;
    line-height: 2.5rem;
    background-color: rgba(0,0,0,0);
    color: var(--gray-200)
}

.tablet .form-control[data-input], .tablet .form-control[data-textarea], .phone .form-control[data-input], .phone .form-control[data-textarea] {
    height: 40px;
    font-size: 0.875rem;
    line-height: 2.5rem
}

    .form-control[data-input]:focus, .tablet .form-control[data-input]:focus, .tablet .form-control[data-textarea]:focus, .phone .form-control[data-input]:focus, .phone .form-control[data-textarea]:focus {
        border-color: var(--gray-300)
    }

::-moz-placeholder {
    color: var(--gray-200)
}

:-ms-input-placeholder {
    color: var(--gray-200)
}

::placeholder {
    color: var(--gray-200)
}

:-ms-input-placeholder {
    color: var(--gray-200)
}

::-ms-input-placeholder {
    color: var(--gray-200)
}

.form .dropdown, .form input[data-input], .form textarea[data-textarea], .form [data-switch] {
    margin-bottom: var(--space-base)
}

[data-switch]:checked::before {
    background-color: var(--blue-light)
}

[data-switch]:empty::before {
    width: 40px;
    height: 20px
}

[data-switch]:empty::after {
    width: 18px;
    height: 18px;
    top: 3px
}

textarea[data-textarea], textarea[data-textarea]:empty {
    line-height: 1.375rem
}

[data-popup] input[data-input], [data-popup] input[data-input]:empty, [data-popup] textarea[data-textarea], [data-popup] textarea[data-textarea]:empty {
    border: solid 1px var(--gray-300);
    background-color: rgba(0,0,0,0)
}

input.a-input[data-input] {
    border: solid 1px var(--gray-300);
    background-color: rgba(0,0,0,0)
}

    input.a-input[data-input]:focus {
        border: solid 1px var(--gray-300)
    }

    input.a-input[data-input].not-valid, input.a-input[data-input].not-valid:focus, input.a-input[data-input] [class^="border-"] {
        border: 1px solid var(--red)
    }

[data-label].mandatory::after {
    content: "";
    display: block
}

span.validation-message {
    display: block;
    margin-top: var(--space-xs);
    margin-left: var(--space-none);
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: var(--red);
    display: flex;
    top: var(--space-m)
}

.btn {
    color: var(--pure-white);
    background-color: rgba(0,0,0,0);
    border-radius: 100px;
    position: relative;
    max-height: 40px;
    min-height: inherit;
    height: 40px;
    min-width: 96px;
    overflow: hidden;
    padding: var(--space-none) var(--space-base);
    line-height: 2.5rem;
    font-weight: 500
}

    .btn.btn-primary {
        color: var(--pure-black);
        background-color: var(--pure-white);
        border-color: var(--pure-white)
    }

    .btn[disabled], .btn.-disabled {
        opacity: 0.4
    }

.tablet .btn, .phone .btn {
    font-size: 0.875rem
}

.btn.a-btn.-fullWidth {
    width: 76%
}

.a-flexCard .btn.a-btn.-fullWidth, .o-popUp .btn.a-btn.-fullWidth {
    width: 100%
}

.a-iconRipple {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    height: 32px;
    width: 32px;
    text-align: center
}

    .a-iconRipple .a-icon {
        vertical-align: middle
    }

[data-block^="Elementary_Components.NOSIcon"] > .display-inline-block {
    vertical-align: middle
}

.a-icon {
    height: 20px;
    width: 20px;
    font-size: 1.25rem
}

    .a-icon.-xSmall {
        height: 12px;
        width: 12px;
        font-size: 0.75rem
    }

    .a-icon.-small {
        height: 16px;
        width: 16px;
        font-size: 1rem
    }

    .a-icon.-large {
        height: 24px;
        width: 24px;
        font-size: 1.5rem
    }

    .a-icon.-xLarge {
        height: 32px;
        width: 32px;
        font-size: 2rem
    }

    .a-icon.-disabled {
        opacity: 0.4
    }

.o-upBarContainer {
    position: relative
}

    .o-upBarContainer .o-upBarBgd {
        z-index: 1000;
        position: fixed;
        top: var(--space-none);
        left: var(--space-none);
        opacity: 1;
        display: block;
        background: rgba(var(--gray-900-rgb), 0.6);
        height: 100%;
        width: 100%;
        transition: opacity 0.3s cubic-bezier(0, 0, 0.3, 1);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px)
    }

.o-upBar {
    z-index: 1001;
    position: fixed;
    bottom: var(--space-none);
    left: var(--space-none);
    visibility: hidden;
    opacity: 0;
    transform: translateY(100%);
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: hidden;
    transition: all 130ms ease-in;
    will-change: transform;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-radius: 16px 16px 0px 0px;
    background-color: var(--gray-800);
    box-shadow: 0 -1px 3px 0 rgba(0,0,0,0.1)
}

    .o-upBar::before {
        position: fixed;
        left: -30px;
        content: "";
        background-color: transparent;
        height: 100%;
        width: 30px
    }

    .o-upBar.-open {
        bottom: var(--space-none);
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: all 330ms ease-out;
        will-change: transform;
        max-height: 95vh
    }

        .o-upBar.-open .sidebar-header {
            padding: var(--space-l) var(--space-base) var(--space-m) var(--space-base)
        }

        .o-upBar.-open .sidebar-header, .o-upBar.-open .o-upBarFloat {
            background-color: var(--gray-800)
        }

    .o-upBar .o-upBarFloat {
        position: relative;
        display: block;
        height: 40px
    }

        .o-upBar .o-upBarFloat .o-upBarLine {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%);
            border-radius: 3px;
            height: 6px;
            width: 45px;
            -webkit-backdrop-filter: blur(11.6px);
            backdrop-filter: blur(11.6px);
            background-color: var(--gray-200)
        }

    .o-upBar .sidebar-content .o-cartWrapper > div {
        margin-bottom: 40px
    }

    .o-upBar .sidebar-content .o-cartWrapper .o-ivaText {
        margin-bottom: var(--space-m)
    }

    .o-upBar .sidebar-content .o-cartWrapper .menu-bar-item {
        flex: 4
    }

    .o-upBar .sidebar-content .o-cartWrapper .menu-bar-amount {
        flex: 1
    }

.o-cartDrawer .o-upBar {
    bottom: 0;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    overflow-y: hidden;
    will-change: transform, height, max-height;
    border-top: none;
    max-height: initial;
    transition: transform 200ms ease, max-height 200ms ease;
    box-shadow: 0px -1px 6px 4px rgba(0,0,0,0.23);
    border-top: 0.5px solid #94959d
}

    .o-cartDrawer .o-upBar .o-upBarContent {
        height: var(--drawer-content-height);
        position: relative;
        overflow-y: auto
    }

        .o-cartDrawer .o-upBar .o-upBarContent .sidebar-content {
            position: absolute;
            width: 100%
        }

    .o-cartDrawer .o-upBar.-open .o-upBarContent {
        margin-bottom: 80px
    }

    .o-cartDrawer .o-upBar.-cinemasDrawer.-plusBenefits {
        transform: translateY(380px)
    }

        .o-cartDrawer .o-upBar.-cinemasDrawer.-plusBenefits.-open {
            transform: inherit !important
        }

    .o-cartDrawer .o-upBar.-cinemasDrawer.-changeDrawer.-open {
        transform: inherit !important
    }

    .o-cartDrawer .o-upBar.-cinemasDrawer.-changeDrawer.-notBenefits.-open {
        transform: inherit !important
    }

    .o-cartDrawer .o-upBar.hidden {
        visibility: hidden
    }

    .o-cartDrawer .o-upBar.-open {
        max-height: 80vh;
        transition: transform 200ms ease, max-height 200ms ease
    }

        .o-cartDrawer .o-upBar.-open .sidebar-header {
            padding-bottom: var(--space-none)
        }

            .o-cartDrawer .o-upBar.-open .sidebar-header .o-cartWrapper__spacer {
                padding: var(--space-none)
            }

.iphonex .o-cartDrawer .o-upBar {
    padding-bottom: var(--space-s)
}

.o-cartDrawer .o-upBar .o-upBarFloat {
    height: 40px
}

    .o-cartDrawer .o-upBar .o-upBarFloat .o-upBarLine {
        top: var(--space-base-s)
    }

.o-cartDrawer .o-upBar .sidebar-header {
    overflow: visible;
    padding: var(--space-none) var(--space-base) var(--space-none)
}

    .o-cartDrawer .o-upBar .sidebar-header .o-cartWrapper__spacer {
        padding: var(--space-base)
    }

.o-cartDrawer .o-upBar .o-upBarHeading {
    border: 0;
    background-color: var(--gray-800)
}

.o-upBarFixed {
    position: relative;
    background: var(--gray-800);
    padding: var(--space-base);
    z-index: 1004;
    position: fixed;
    bottom: 0;
    width: 100%
}

    .o-upBarFixed:not(.ph) {
        display: block
    }

.iphonex .o-upBarFixed {
    padding-bottom: var(--space-m)
}

.iphonex .o-upBar.-open {
    padding-bottom: var(--space-base-m)
}

.iphonex .o-cartDrawer .bottom {
    padding-bottom: 0
}

.o-lazyLoad {
    z-index: 1005;
    position: absolute;
    top: var(--space-none);
    opacity: 0.7;
    background-color: var(--gray-900);
    height: 100%;
    width: 100%;
    align-items: center;
    text-align: center
}

    .o-lazyLoad.-visible {
        display: block
    }

    .o-lazyLoad.-overlay {
        z-index: 9999;
        position: fixed;
        top: var(--space-none);
        left: var(--space-none);
        background: rgba(var(--pure-black-rgb), 0.7);
        height: 100%;
        width: 100%;
        text-align: center
    }

    .o-lazyLoad .o-lazyLoadLoader {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        margin: auto;
        height: 48px;
        width: 48px;
        z-index: 100
    }

    .o-lazyLoad .loading__wrapper {
        width: 100%;
        height: 100%;
        align-content: center;
        text-align: center;
        display: inline-grid
    }

.desktop .o-lazyLoad .loading__wrapper div .animate div svg, .tablet.portrait .o-lazyLoad .loading__wrapper div .animate div svg {
    width: 30vw !important
}

.o-stateHead {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    padding: var(--space-none) var(--space-base)
}

    .o-stateHead .-half-height {
        height: 50vh
    }

    .o-stateHead .emptyState_alert {
        width: 50%
    }

    .o-stateHead > div {
        width: 100%
    }

    .o-stateHead.-insidePage {
        height: 80%
    }

    .o-stateHead.-vh {
        height: calc(80vh - 64px - 56px)
    }

    .o-stateHead.-centerBottom {
        justify-content: flex-start
    }

        .o-stateHead.-centerBottom > div:first-child {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex-basis: 70%
        }

        .o-stateHead.-centerBottom > div:last-child {
            display: flex;
            flex-direction: column;
            flex-basis: 30%;
            width: calc(76% + 32px)
        }

    .o-stateHead.-withData {
        height: 100%;
        padding-top: 120px
    }

.o-stateFooter {
    z-index: 1;
    position: relative;
    height: 20vh;
    text-align: center
}

    .o-stateFooter.-insidePage {
        height: 20%
    }

.m-emptyState .m-emptyState_alert {
    flex-direction: column;
    margin-bottom: var(--space-base)
}

.m-emptyState .m-emptyState_content {
    padding: var(--space-none) var(--space-base);
    text-align: center
}

    .m-emptyState .m-emptyState_content.m-emptyState_contentTitle {
        display: block;
        margin-bottom: var(--space-s);
        font-size: 1.125rem;
        line-height: 1.625rem;
        font-weight: 700;
        color: var(--gray-700)
    }

    .m-emptyState .m-emptyState_content.m-emptyState_contentDesc {
        display: block;
        font-size: 0.875rem;
        line-height: 1.375rem;
        color: var(--gray-400)
    }

.form-control.not-valid[data-input], .form-control.not-valid[data-textarea] {
    margin-bottom: var(--space-m)
}

.popup-dialog {
    background-color: var(--gray-700);
    color: var(--gray-200);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.5)
}

    .popup-dialog .popup-content {
        background-image: url("http://cdn.nos.pt/common/assets/images/cinemas/wheel-29-Right.svg");
        background-repeat: no-repeat;
        background-position: top right;
        background-size: 30%;
        border-radius: 0.375rem
    }

    .popup-dialog.glasses-3d-popup {
        max-width: 540px;
        padding: 14px 20px;
        background-color: #fff;
        top: -6%
    }

        .popup-dialog.glasses-3d-popup .title {
            display: block;
            color: var(--gray-900);
            font-weight: bold;
            font-size: 2rem
        }

        .popup-dialog.glasses-3d-popup .subtitle {
            padding-bottom: 20px
        }

        .popup-dialog.glasses-3d-popup .btn {
            min-width: 97px;
            border-radius: 100px;
            padding: 10px 24px
        }

        .popup-dialog.glasses-3d-popup .icon-close::before {
            position: relative;
            right: 0;
            width: 32px
        }

        .popup-dialog.glasses-3d-popup img {
            margin-bottom: 20px
        }

.o-popup {
    border-radius: var(--border-radius-none);
    padding: var(--space-none)
}

    .o-popup .titleSection {
        min-height: 58px;
        padding: var(--space-base) var(--space-m);
        color: var(--gray-100)
    }

        .o-popup .titleSection.a-icon {
            color: var(--gray-100)
        }

    .o-popup .header-popup {
        display: flex;
        justify-content: space-between
    }

    .o-popup .bodySection {
        padding: var(--space-m)
    }

.phone .o-popup .actionSection .display-flex {
    width: 100%
}

    .phone .o-popup .actionSection .display-flex > div {
        flex: 1
    }

div.feedback-message-warning {
    border-top: 4px solid var(--yellow);
    background-color: var(--pure-white);
    border-left: 1px solid var(--yellow);
    border-right: 1px solid var(--yellow);
    border-bottom: 1px solid var(--yellow);
    color: var(--gray-700)
}

    div.feedback-message-warning i {
        color: var(--yellow)
    }

        div.feedback-message-warning i::before {
            font-family: "cinemas-font";
            content: ""
        }

div.feedback-message-success {
    border-top: 4px solid var(--green-dark);
    background-color: var(--pure-white);
    border-left: 1px solid var(--green-dark);
    border-right: 1px solid var(--green-dark);
    border-bottom: 1px solid var(--green-dark);
    color: var(--gray-700)
}

    div.feedback-message-success i {
        color: var(--green-dark)
    }

        div.feedback-message-success i::before {
            font-family: "cinemas-font";
            content: ""
        }

div.feedback-message-error {
    border-top: 4px solid var(--red);
    background-color: var(--pure-white);
    border-left: 1px solid var(--red);
    border-right: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
    color: var(--gray-700)
}

    div.feedback-message-error i {
        color: var(--red)
    }

        div.feedback-message-error i::before {
            font-family: "cinemas-font";
            content: ""
        }

.a-barContainer.is--disabled {
    opacity: 0.4
}

    .a-barContainer.is--disabled a {
        cursor: context-menu
    }

.is--disabled {
    opacity: 0.4
}

    .is--disabled a {
        cursor: context-menu
    }

.a-barContainer-card-benefits {
    display: grid;
    gap: var(--space-base);
    grid-template-columns: 1fr 4fr 2fr;
    align-items: center;
    padding-right: var(--space-base);
    margin-bottom: var(--space-base)
}

.a-barContainer-carousel {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-s)
}

.a-barCoverContainer {
    position: relative;
    min-height: 11.5rem;
    max-height: 180px;
    min-width: 140px;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(26,26,26,0), rgba(30,31,39,0.8))
}

    .a-barCoverContainer.-square {
        min-height: 140px;
        max-height: 140px;
        min-width: 140px;
        max-width: 140px
    }

    .a-barCoverContainer img {
        position: absolute;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%;
        height: 100%;
        z-index: -1;
        bottom: 0px
    }

    .a-barCoverContainer .a-barCoverLabel {
        color: var(--gray-100);
        font-size: var(--font-size-base);
        position: absolute;
        bottom: var(--space-base-s);
        left: var(--space-base-s)
    }

.a-barContainer-cover {
    background-image: linear-gradient(to bottom, rgba(26,26,26,0), rgba(30,31,39,0.8));
    position: relative
}

.a-barContainer-popcorn {
    width: 150px;
    height: 180px;
    -o-object-fit: none;
    object-fit: none;
    -o-object-position: -81px 2px;
    object-position: -81px 2px;
    background-image: linear-gradient(to bottom, rgba(26,26,26,0), rgba(30,31,39,0.8));
    opacity: 0.5
}

.a-barDetail-container {
    flex-wrap: wrap;
    grid-template-columns: repeat(3, 3fr);
    grid-template-rows: repeat(1, 1fr);
    display: grid;
    align-self: start;
    gap: var(--space-base);
    justify-content: start;
    justify-items: stretch;
    align-items: stretch
}

    .a-barDetail-container script {
        display: contents !important
    }

    .a-barDetail-container.is--disabled {
        opacity: 0.5;
        color: var(--gray-075)
    }

        .a-barDetail-container.is--disabled a {
            cursor: context-menu !important
        }

        .a-barDetail-container.is--disabled .a-barDetail {
            cursor: context-menu !important
        }

.a-barDetail {
    text-align: center;
    min-height: 55px;
    background-color: var(--gray-700);
    margin-right: var(--space-base);
    margin-bottom: var(--space-base);
    padding: var(--space-base);
    flex-direction: column;
    justify-content: center;
    display: flex
}

    .a-barDetail .price {
        color: var(--gray-200);
        font-weight: var(--font-medium);
        font-size: var(--font-size-s)
    }

    .a-barDetail .title:empty {
        display: contents
    }

    .a-barDetail.-selected {
        border: 1px solid var(--gray-075);
        box-shadow: 0px 3px 6px rgba(0,0,0,0.35);
        background-color: var(--gray-500)
    }

        .a-barDetail.-selected .title {
            color: var(--yellow);
            font-weight: var(--font-medium)
        }

            .a-barDetail.-selected .title:empty {
                display: contents
            }

        .a-barDetail.-selected .price {
            color: var(--gray-075);
            font-weight: var(--font-medium)
        }

    .a-barDetail.is--disabled {
        opacity: 0.4;
        color: var(--gray-075);
        cursor: context-menu !important
    }

.safetySeats {
    position: relative;
    left: unset;
    margin-top: 20vh;
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

    .safetySeats .animated-img {
        width: 208px;
        min-height: 160px;
        margin: auto;
        -webkit-animation-delay: 2s;
        animation-delay: 2s
    }

.phone .a-barDetail {
    min-height: 90px;
    max-height: 100%
}

.phone .bar-footer {
    margin-left: -10px;
    margin-right: -10px;
    bottom: 0px;
    margin-top: var(--space-m)
}

.list.list-group div span:empty {
    height: inherit;
    visibility: hidden;
    display: none
}

.o-compraTicketCard {
    background-color: var(--gray-700);
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    padding: var(--space-base);
    margin-bottom: var(--space-xs);
    justify-content: space-between
}

    .o-compraTicketCard.-selected {
        background-color: var(--gray-500);
        transition: all 0.3s ease-in-out
    }

        .o-compraTicketCard.-selected .operators .minus {
            border: 1px solid var(--gray-050);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            padding: 4px
        }

        .o-compraTicketCard.-selected .operators .plus {
            border: 1px solid var(--gray-050);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            padding: 4px
        }

    .o-compraTicketCard.-disableBenefit {
        z-index: 10;
        height: 100%;
        width: 100%;
        opacity: 0.4
    }

        .o-compraTicketCard.-disableBenefit .operators div {
            cursor: context-menu !important
        }

.-cardCode {
    margin-top: var(--space-base)
}

    .-cardCode div:first-child {
        flex: 1
    }

    .-cardCode [data-block="Elementary_Components.NOSIcon_v3"] {
        transform: rotate(180deg);
        border: 1px solid var(--gray-050);
        border-radius: 50%;
        width: 30px;
        height: 30px;
        padding: 4px
    }

.operators {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around
}

    .operators .symbol {
        border: 1px solid rgba(239,239,241,0.3);
        box-sizing: border-box;
        height: 40px;
        width: 40px;
        padding-top: var(--space-base-s)
    }

        .operators .symbol.is--disabled {
            opacity: 0.5;
            color: var(--gray-075);
            cursor: context-menu !important
        }

.a-cinemaWall {
    perspective: 6.25rem;
    width: 15rem;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    height: 0px;
    margin-top: -2.75rem;
    margin-bottom: 3.125rem
}

    .a-cinemaWall .a-cinemaWall_img {
        -webkit-transform-style: preserve-3d;
        -webkit-transform: rotateX(310deg);
        transform-style: preserve-3d;
        transform: rotateX(-63deg);
        background-color: var(--gray-500);
        height: 75px;
        opacity: 0.5;
        box-sizing: border-box;
        border-radius: 1px;
        max-width: 13.5rem;
        margin-inline: auto;
        margin-bottom: -1.25rem;
        mix-blend-mode: normal;
        border: 2px solid var(--gray-200)
    }

    .a-cinemaWall .a-cinemaWall_shadow {
        width: 14.5rem;
        height: 2.5rem;
        position: relative;
        top: -1.295rem;
        left: 0px;
        opacity: 0.25;
        margin-inline: auto;
        background: linear-gradient(180deg, var(--gray-900) 0%, var(--gray-400) 100%);
        -webkit-transform-style: preserve-3d;
        -webkit-transform: rotateX(45deg);
        transform-style: preserve-3d;
        transform: rotate(-180deg) rotateX(90deg)
    }

    .a-cinemaWall .a-cinemaWall_text {
        position: absolute;
        top: 52px;
        font-size: 0.75rem;
        left: 50%;
        transform: translate(-50%, -50%)
    }

.phone .a-cinemaWall_text {
    top: -0.675rem;
    transform: inherit;
    position: inherit;
    font-size: inherit
}

.o-compraZoomIcon {
    display: flex;
    background-color: var(--gray-900);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 28px;
    height: 28px;
    right: 0.1rem;
    top: 1.85rem;
    padding-top: 8px;
    border: 1px solid var(--gray-700)
}

    .o-compraZoomIcon.-zoomed {
        top: -1.15rem
    }

.o-cinema-map .o-cinema-map__screen {
    position: relative;
    width: 100%
}

    .o-cinema-map .o-cinema-map__screen > div:first-child {
        padding: var(--space-s)
    }

.desktop .o-cinema-map .o-cinema-map__screen > div:first-child {
    padding: var(--space-xl)
}

.phone .o-cinema-map .o-cinema-map__room {
    padding-top: var(--space-xl);
    padding-inline: var(--space-none);
    padding-bottom: var(--space-xl);
    text-align: center;
    position: relative
}

.o-cinema-map .o-cinema-map__room .o-cinema-map__seats {
    transition: all 1000ms cubic-bezier(0.445, 0.05, 0.55, 0.95)
}

    .o-cinema-map .o-cinema-map__room .o-cinema-map__seats.is--zoomed {
        overflow: scroll;
        position: relative;
        touch-action: auto;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0)
    }

        .o-cinema-map .o-cinema-map__room .o-cinema-map__seats.is--zoomed > .list {
            overflow: scroll
        }

        .o-cinema-map .o-cinema-map__room .o-cinema-map__seats.is--zoomed .-seatContainer > div {
            text-align: center;
            transform-origin: left top;
            -webkit-transform-origin: left top;
            width: 100vw;
            height: 100%;
            display: flex;
            margin: 0;
            width: 100vw;
            margin: 18px 50% 10vh 0
        }

.o-compra .o-compraItem:first-child {
    margin-left: 0
}

.o-compra .o-compraItem {
    margin-left: 0.0635rem;
    display: inline-block
}

    .o-compra .o-compraItem .o-compraSeat {
        width: 16px !important;
        height: 16px !important;
        min-width: 0.375rem;
        min-height: 0.375rem;
        font-size: 0.1875rem;
        border: 1px solid;
        display: inline-block;
        border-radius: 2px;
        position: relative;
        vertical-align: middle;
        margin: 1px;
        padding: 2px
    }

        .o-compra .o-compraItem .o-compraSeat.-unable {
            background-color: transparent;
            border-color: transparent
        }

        .o-compra .o-compraItem .o-compraSeat .-label {
            width: 12px;
            height: 12px;
            font-size: 0.5rem
        }

        .o-compra .o-compraItem .o-compraSeat .-detail {
            width: 24px;
            height: 24px;
            font-size: var(--font-size-s)
        }

            .o-compra .o-compraItem .o-compraSeat .-detail .a-icon {
                font-size: var(--font-size-s)
            }

        .o-compra .o-compraItem .o-compraSeat .a-icon {
            display: inline-block;
            vertical-align: baseline
        }

        .o-compra .o-compraItem .o-compraSeat.-chosen {
            background-color: var(--yellow);
            box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
            -webkit-animation: popSeats 0.6s 0.2s cubic-bezier(0.27, 0.53, 0.28, 1.58) forwards;
            animation: popSeats 0.6s 0.2s cubic-bezier(0.27, 0.53, 0.28, 1.58) forwards;
            border: none;
            color: var(--gray-900)
        }

            .o-compra .o-compraItem .o-compraSeat.-chosen .icon-mobilidade {
                color: var(--blue-dark)
            }

        .o-compra .o-compraItem .o-compraSeat.-otherchosen {
            background-color: var(--gray-100);
            box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
            -webkit-animation: popSeats 0.6s 0.2s cubic-bezier(0.27, 0.53, 0.28, 1.58) forwards;
            animation: popSeats 0.6s 0.2s cubic-bezier(0.27, 0.53, 0.28, 1.58) forwards;
            border: none;
            text-align: center
        }

            .o-compra .o-compraItem .o-compraSeat.-otherchosen.-vip {
                background-color: var(--gray-100)
            }

                .o-compra .o-compraItem .o-compraSeat.-otherchosen.-vip .a-icon {
                    display: block
                }

            .o-compra .o-compraItem .o-compraSeat.-otherchosen.-premium .a-icon {
                margin: -1px
            }

        .o-compra .o-compraItem .o-compraSeat.-vip {
            background-color: var(--gray-100)
        }

            .o-compra .o-compraItem .o-compraSeat.-vip .a-icon {
                margin-top: -3px;
                margin-left: -2px;
                display: block
            }

            .o-compra .o-compraItem .o-compraSeat.-vip .-infoSeats {
                margin-left: -6px
            }

        .o-compra .o-compraItem .o-compraSeat.-premium {
            background-color: var(--gray-100)
        }

            .o-compra .o-compraItem .o-compraSeat.-premium .a-icon {
                margin: -1px
            }

        .o-compra .o-compraItem .o-compraSeat.-free {
            background-color: var(--gray-100);
            box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
            -webkit-animation: popSeats 0.6s 0.2s cubic-bezier(0.27, 0.53, 0.28, 1.58) forwards;
            animation: popSeats 0.6s 0.2s cubic-bezier(0.27, 0.53, 0.28, 1.58) forwards;
            border: none
        }

        .o-compra .o-compraItem .o-compraSeat.-busy {
            background-color: var(--gray-700);
            color: var(--blue-light);
            box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
            -webkit-animation: popSeats 0.6s 0.2s cubic-bezier(0.27, 0.53, 0.28, 1.58) forwards;
            animation: popSeats 0.6s 0.2s cubic-bezier(0.27, 0.53, 0.28, 1.58) forwards;
            border: none
        }

            .o-compra .o-compraItem .o-compraSeat.-busy .a-icon {
                color: var(--blue-light)
            }

        .o-compra .o-compraItem .o-compraSeat.-def {
            background-color: var(--gray-100);
            border-color: transparent
        }

            .o-compra .o-compraItem .o-compraSeat.-def .a-icon {
                color: var(--blue-dark)
            }

        .o-compra .o-compraItem .o-compraSeat.-secure {
            border: none;
            background-color: var(--gray-400);
            opacity: 0.6
        }

            .o-compra .o-compraItem .o-compraSeat.-secure::after {
                content: "";
                height: 2px;
                width: 18px;
                position: absolute;
                left: -4.71%;
                right: 30.29%;
                top: 46.29%;
                transform: rotate3d(1, 1, 1, 282deg);
                background-color: var(--gray-900)
            }

        .o-compra .o-compraItem .o-compraSeat.-safetyRadius {
            background-color: var(--yellow);
            opacity: 0.4;
            border-color: transparent
        }

            .o-compra .o-compraItem .o-compraSeat.-safetyRadius::after {
                content: "";
                height: 2px;
                width: 18px;
                position: absolute;
                left: -4.71%;
                right: 30.29%;
                top: 46.29%;
                transform: rotate3d(1, 1, 1, 282deg);
                background-color: var(--gray-900)
            }

.o-compraRowContainer {
    position: absolute
}

    .o-compraRowContainer.-left {
        left: 5px
    }

    .o-compraRowContainer.-right {
        top: 38px;
        right: 8px
    }

.--empty-seats {
    visibility: hidden;
    height: 0px;
    margin-top: var(--space-s)
}

.o-rowEraser {
    position: absolute;
    background-color: var(--gray-900)
}

    .o-rowEraser.-left {
        width: 45px;
        height: 100%;
        left: -10px;
        z-index: 50;
        filter: blur(5px);
        background: linear-gradient(to right, var(--gray-900), rgba(30,31,39,0.9))
    }

    .o-rowEraser.-right {
        width: 45px;
        height: 100%;
        right: -10px;
        z-index: 50;
        filter: blur(5px);
        background: linear-gradient(to left, var(--gray-900), rgba(30,31,39,0.9))
    }

.container-number {
    margin-top: var(--space-base-m);
    margin-inline: var(--space-xl)
}

    .container-number .list {
        width: 80%;
        display: grid;
        margin: auto;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-base)
    }

        .container-number .list script {
            display: contents !important
        }

.desktop .container-number .list {
    grid-template-columns: repeat(4, 1fr)
}

.container-number .list .card-choosenumber {
    background-color: var(--gray-700);
    height: inherit !important;
    top: inherit !important;
    position: static !important
}

    .container-number .list .card-choosenumber span {
        font-size: 5.5rem
    }

    .container-number .list .card-choosenumber.isSelected {
        background-color: var(--gray-500);
        color: var(--yellow)
    }

        .container-number .list .card-choosenumber.isSelected span {
            color: var(--yellow)
        }

.height-22 {
    height: 21.82px
}

.label {
    padding: 4px 8px;
    align-items: center;
    display: inline-block;
    font-size: 14px;
    font-size: 0.875rem
}

    .label.--purple {
        background-color: var(--primary);
        box-shadow: 2px 2px 0px var(--yellow);
        color: var(--color-white)
    }

    .label.--yellow {
        background-color: var(--yellow);
        box-shadow: 2px 2px 0px var(--primary);
        color: var(--primary)
    }

    .label.--green {
        background-color: var(--green);
        box-shadow: 2px 2px 0px var(--magenta);
        color: var(--primary)
    }

    .label.--pink {
        background-color: var(--magenta);
        box-shadow: 2px 2px 0px var(--yellow);
        color: var(--white);
        padding: 4px 8px;
        align-items: center;
        display: inline-block
    }

    .label.--blue {
        background-color: var(--blue);
        box-shadow: 2px 2px 0px var(--yellow);
        color: var(--white);
        padding: 4px 8px;
        align-items: center;
        display: inline-block
    }

.big-room .o-compraItem .o-compraSeat {
    width: 12px !important;
    height: 13px !important;
    padding: 1px
}

.phone .a-cinemaWall {
    width: 165px;
    margin-top: -0.75rem
}

    .phone .a-cinemaWall .a-cinemaWall_img {
        -webkit-transform-style: preserve-3d;
        -webkit-transform: rotateX(304deg);
        transform-style: preserve-3d;
        transform: rotateX(304deg);
        background-color: var(--gray-500);
        height: 70px;
        opacity: 0.5;
        mix-blend-mode: normal;
        box-sizing: border-box;
        border-radius: 1px;
        margin-bottom: -1.25rem;
        border: 2px solid var(--gray-200)
    }

    .phone .a-cinemaWall .a-cinemaWall_shadow {
        width: 9.8rem;
        height: 2.5rem;
        position: relative;
        top: -2.875rem;
        left: 0px;
        mix-blend-mode: normal;
        opacity: 0.5;
        background-image: linear-gradient(to bottom, var(--gray-500), var(--gray-900));
        -webkit-transform-style: preserve-3d;
        -webkit-transform: rotateX(45deg);
        transform-style: preserve-3d;
        transform: rotate(-180deg) rotateX(90deg)
    }

.phone .container-number {
    margin-inline: var(--space-none)
}

    .phone .container-number .list {
        width: 100%;
        padding-bottom: 40px
    }

        .phone .container-number .list script {
            display: none !important
        }

.phone .--container-theaterRoom {
    display: flex;
    margin-bottom: var(--space-s);
    width: 100%;
    justify-content: center
}

.phone .o-cinema-map__seats .list {
    overflow-x: scroll;
    padding-left: var(--space-base)
}

.phone .big-room .o-compraItem .o-compraSeat {
    width: 13px !important;
    height: 13px !important
}

    .phone .big-room .o-compraItem .o-compraSeat.-secure::after {
        left: -33.71%
    }

    .phone .big-room .o-compraItem .o-compraSeat.-safetyRadius::after {
        left: -34.71%;
        right: 16.29%;
        top: 42.29%
    }

.phone .small-room .o-compraItem .o-compraSeat {
    width: 11px !important;
    height: 11px !important;
    padding: var(--space-none)
}

    .phone .small-room .o-compraItem .o-compraSeat.-secure::after {
        left: -33.71%
    }

.phone .o-compra .o-compraItem .o-compraSeat.-vip .-infoSeats {
    margin-left: inherit
}

.-seatContainer .list {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px
}

.a-cardGift {
    margin-right: var(--space-base-s);
    margin-bottom: var(--space-base)
}

    .a-cardGift img {
        border-radius: 15px;
        -o-object-fit: contain;
        object-fit: contain
    }

.phone .list-cardGift {
    margin-bottom: var(--space-l)
}

    .phone .list-cardGift .a-cardGift img {
        height: 120px
    }

.blank-slate {
    min-height: calc( calc(80vh - var(--phone-header-size)) - var(--header-gutter));
    margin-top: 15%
}

    .blank-slate .btn {
        width: 100%
    }

.tablet .blank-slate .btn {
    width: 50%
}

.desktop .blank-slate {
    min-height: calc(calc(80vh - var(--header-size)) - var(--header-gutter));
    margin-top: var(--space-none)
}

    .desktop .blank-slate:not(.large) {
        min-height: auto
    }

    .desktop .blank-slate .btn {
        width: 30%
    }

.blank-slate img {
    max-height: 150px;
    min-height: 125px
}

.blank-slate .blank-slate-description {
    margin-top: var(--space-xl);
    padding: var(--space-none)
}

.blank-slate .blank-slate-actions {
    margin-top: var(--space-l);
    padding: var(--space-none)
}

.blank-slate .blank-slate-icon {
    font-size: initial
}

.blank-slate .message-container {
    margin: auto;
    max-width: 100%
}

.desktop .blank-slate .message-container {
    max-width: 40%
}

.tag {
    background-color: var(--gray-400)
}

.carousel .carousel-navigation {
    background-color: transparent;
    color: var(--blue-light)
}

.carousel-navigation-previous.-disabled i {
    color: var(--gray-700)
}

.carousel-navigation-next.-disabled i {
    color: var(--gray-700)
}

.phone .o-carrousel.-noSwipe .carousel-container-content .list {
    overflow-x: auto
}

.desktop .o-carrousel.-noSwipe .carousel-container-content .list {
    overflow-x: hidden
}

.progress {
    background-color: var(--yellow);
    transition: all 500ms ease-out;
    border-radius: var(--border-radius-none)
}

.osui-progress-bar {
    --thickness: 4px;
    border-radius: var(--border-radius-none);
    transition: all 500ms ease-out
}

.osui-progress-bar__value {
    height: 5px
}

    .osui-progress-bar__value::before {
        background: var(--yellow)
    }

    .osui-progress-bar__value::after {
        background: var(--gray-200)
    }

.separator {
    background-color: var(--gray-800);
    height: 1px
}

.layout .ThemeGrid_Container, .layout .main-content.ThemeGrid_Container {
    padding-right: var(--grid-outter-gutter);
    padding-left: var(--grid-outter-gutter);
    max-width: 100%
}

.phone .layout .main-content.ThemeGrid_Container {
    padding-block: var(--space-m)
}

.is--template-dev .content {
    --content-background-url: url("https://cdn.nos.pt/common/assets/images/cinemas/bgd-test.png")
}

.desktop .content::before {
    --content-blur: 14px;
    content: "";
    inset: calc( var(--content-blur) * -1);
    filter: blur(var(--content-blur)) brightness(0.4);
    position: absolute;
    background: var(--content-background-url) var(--gray-700) no-repeat;
    background-size: cover;
    z-index: -1
}

.desktop .content::after {
    content: "";
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5) 80%);
    background-color: var(--gray-700);
    position: absolute;
    inset: 0;
    z-index: -1
}

.desktop .content.background-loader::after {
    background-color: transparent
}

:where(.tablet,.phone) .content {
    background-color: var(--gray-900) !important
}

.ThemeGrid_Container {
    max-width: 100%;
    padding-right: var(--grid-outter-gutter);
    padding-left: var(--grid-outter-gutter)
}

.container {
    max-width: 100%;
    padding-right: var(--grid-outter-gutter);
    padding-left: var(--grid-outter-gutter)
}

.header {
    z-index: 100
}

.header-navigation {
    width: 100%
}

.header-logo {
    display: flex;
    gap: var(--space-s);
    align-items: center
}

    .header-logo p {
        font-weight: var(--font-regular);
        color: var(--gray-900);
        margin-block: var(--space-none);
        margin-top: 5px;
        margin-right: 1px;
        font-size: 1.3125rem;
        line-height: 1.575rem
    }

    .header-logo img {
        vertical-align: middle;
        width: 96px;
        height: 52px
    }

.phone .header-logo img {
    height: 40px;
    width: auto
}

.header-top-menu {
    display: flex;
    justify-content: space-between;
    background-color: var(--gray-075);
    padding-block: var(--space-base-s);
    height: var(--header-top-menu-size);
    align-items: center;
    position: relative;
    z-index: 1
}

    .header-top-menu::before {
        content: "";
        background-color: inherit;
        width: 200vw;
        height: inherit;
        position: absolute;
        inset: 0 -50vw;
        z-index: -1
    }

    .header-top-menu ul {
        display: flex;
        gap: var(--space-m);
        padding: var(--space-none)
    }

        .header-top-menu ul li {
            list-style: none
        }

        .header-top-menu ul a {
            font-size: var(--font-size-s);
            color: var(--gray-900)
        }

            .header-top-menu ul a:hover {
                text-decoration: underline
            }

.layout-top .header-content {
    background-color: var(--yellow);
    align-items: center;
    justify-content: space-between;
    height: var(--header-main-menu-size)
}

    .layout-top .header-content::before {
        content: "";
        background-color: inherit;
        width: 200vw;
        height: inherit;
        position: absolute;
        inset: var(--header-top-menu-size) -50vw 0;
        z-index: -1
    }

    .layout-top .header-content .header-content__close {
        border-radius: 50%;
        aspect-ratio: 1;
        width: 40px;
        background-color: rgba(var(--gray-900-rgb), 0.1);
        display: grid;
        place-content: center
    }

        .layout-top .header-content .header-content__close .a-iconRipple {
            display: grid;
            place-content: center
        }

.has--header-min {
    height: var(--header-main-menu-size);
    padding-bottom: var(--space-base)
}

.header-top.has--header-min .header-content::before {
    visibility: hidden
}

.layout-side .header-logo, .tablet .header-logo, .phone .header-logo {
    padding-inline: var(--space-none);
    height: auto
}

.header-top.header-empty {
    height: 0px
}

.header-top {
    display: flex;
    align-items: center
}

.desktop .layout.has--ticket-layout .main-content.ThemeGrid_Container {
    padding-block: var(--space-none)
}

.desktop .ticket-layout .ticket-layout__resume {
    padding-top: var(--space-m);
    padding-right: var(--space-base);
    height: calc(94vh - var(--header-size));
    overflow-y: auto
}

    .desktop .ticket-layout .ticket-layout__resume::-webkit-scrollbar {
        display: none
    }

    .desktop .ticket-layout .ticket-layout__resume .address-theater-location {
        display: flex;
        max-width: 320px
    }

    .desktop .ticket-layout .ticket-layout__resume .font-size-24 {
        font-size: 1.5rem
    }

.desktop .ticket-layout .ticket-layout__footer {
    position: absolute;
    bottom: 24px;
    font-weight: 400;
    font-size: 0.625rem;
    line-height: 0.75rem
}

    .desktop .ticket-layout .ticket-layout__footer a {
        color: var(--pure-white)
    }

.ticket-layout {
    display: grid;
    gap: var(--space-xxl);
    grid-template-columns: 2fr 3fr
}

.phone .ticket-layout {
    display: inline-block;
    width: 100%
}

    .phone .ticket-layout .ticket-layout__main {
        width: 100%;
        margin-top: 0px;
        padding-bottom: 60px
    }

.phone .layout.has--ticket-layout .main-content.ThemeGrid_Container {
    padding-bottom: 100px
}

.ticket-layout__main-section {
    background-color: var(--gray-900);
    color: var(--pure-white)
}

:where(.tablet,.desktop) .ticket-layout__main-section {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    height: var(--content-height)
}

    :where(.tablet,.desktop) .ticket-layout__main-section > .-header {
        padding: var(--space-m)
    }

        :where(.tablet,.desktop) .ticket-layout__main-section > .-header:has(>.content-header:empty) {
            padding: var(--space-none)
        }

        :where(.tablet,.desktop) .ticket-layout__main-section > .-header .content-header {
            display: grid;
            gap: var(--space-xxl);
            grid-template-columns: 4fr 3fr;
            align-items: center
        }

            :where(.tablet,.desktop) .ticket-layout__main-section > .-header .content-header.-step4-bar {
                grid-template-columns: 1fr 9fr;
                gap: var(--space-s);
                align-items: flex-end
            }

            :where(.tablet,.desktop) .ticket-layout__main-section > .-header .content-header > span {
                text-align: left;
                font-weight: 700
            }

    :where(.tablet,.desktop) .ticket-layout__main-section .-content-main {
        padding-left: var(--space-m);
        padding-right: var(--space-m);
        padding-bottom: var(--space-s);
        overflow-y: auto;
        flex: 1;
        height: 100%
    }

        :where(.tablet,.desktop) .ticket-layout__main-section .-content-main.page-benefits {
            -ms-scroll-snap-type: y mandatory;
            scroll-snap-type: y mandatory
        }

            :where(.tablet,.desktop) .ticket-layout__main-section .-content-main.page-benefits * {
                scroll-snap-align: end
            }

    :where(.tablet,.desktop) .ticket-layout__main-section .-footer {
        background-color: var(--gray-800);
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content
    }

        :where(.tablet,.desktop) .ticket-layout__main-section .-footer .content-footer:not(:empty) {
            padding: var(--space-m)
        }

        :where(.tablet,.desktop) .ticket-layout__main-section .-footer:empty {
            background-color: transparent
        }

.phone .ticket-layout__main-section .-header {
    padding: var(--space-s) var(--space-base);
    text-align: center
}

    .phone .ticket-layout__main-section .-header .content-header {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--space-m)
    }

        .phone .ticket-layout__main-section .-header .content-header.-step4-bar {
            flex-direction: inherit;
            align-items: flex-end
        }

        .phone .ticket-layout__main-section .-header .content-header > span {
            font-size: calc(var(--font-size-base) + 0.125rem);
            font-weight: 300
        }

.phone .ticket-layout__main-section .-content-main {
    max-height: 100%;
    padding-bottom: var(--space-xxl)
}

.footer-mobile {
    bottom: 0;
    z-index: 1002;
    width: 100%;
    background-color: var(--gray-800);
    padding: var(--space-base)
}

.grid-bottom {
    display: grid;
    gap: var(--space-base);
    grid-template-columns: 2fr 4fr
}

.grid-template-equal {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: 1fr 1fr
}

.root-footer__wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--gray-700);
    color: var(--pure-white);
    height: 100px;
    border-top: 1px solid var(--gray-900)
}

.root-footer__container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-top: var(--space-m)
}

    .root-footer__container > a {
        color: var(--pure-white);
        padding: var(--space-base-m);
        font-size: var(--font-size-xs)
    }

.FooterMain .footerAppFlex > div, .FooterMain .footerImgFlex > div {
    display: flex;
    width: 100%;
    align-items: center
}

.FooterMain .footerAppFlex, .FooterMain .footerImgFlex {
    width: 100%;
    display: flex;
    padding: 26px
}

.FooterMain .footerImgFlex {
    font-size: 1.125rem
}

.FooterMain .footerAppFlex {
    font-size: 0.75rem
}

.desktop .FooterMain .footerLinks {
    position: fixed;
    bottom: 24px;
    font-weight: 400;
    font-size: 0.625rem;
    line-height: 0.75rem;
    left: 44px
}

.FooterMain .footerAppFlex .footerAppFlex_social {
    justify-content: end
}

.FooterMain .footerLinks .container.display-flex {
    align-items: center;
    padding-right: var(--grid-outter-gutter);
    padding-left: var(--grid-outter-gutter)
}

    .FooterMain .footerLinks .container.display-flex > .root-footer__container > a:first-of-type {
        padding-left: 0
    }

.FooterMain .footerImgFlex .footerImgFlex_img img {
    margin-left: var(--space-m)
}

.phone .FooterMain .footerAppFlex > div, .phone .FooterMain .footerImgFlex_img {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    margin: 16px 0px
}

.phone .FooterMain .footerAppFlex, .phone .FooterMain .footerImgFlex {
    width: 100%;
    display: inline-block;
    padding: 28px
}

.FooterMain .footerImgFlex > div:nth-child(2) > div:nth-child(1) {
    margin-top: 24px;
    margin-bottom: 28px
}

.phone .FooterMain .footerImgFlex {
    font-size: 0.875rem
}

.phone .FooterMain .footerAppFlex {
    font-size: 0.75rem
}

.phone .FooterMain .footerImgFlex > div:first-of-type {
    text-align: center
}

.phone .FooterMain .footerImgFlex .footerImgFlex_img > div {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center
}

.phone .FooterMain .footerImgFlex .footerImgFlex_img > img {
    margin-left: 0px;
    margin-bottom: 24px
}

.phone .FooterMain .footerAppFlex .footerAppFlex_social {
    padding: 24px;
    margin-top: 24px;
    border-top: 1px solid #5b5c64;
    border-bottom: 1px solid #5b5c64;
    width: 100%;
    justify-content: center;
    display: inline-block;
    align-content: center;
    text-align: center
}

.phone .FooterMain .footerLinks {
    text-align: center;
    padding-top: 8px;
    font-size: 0.625rem;
    font-weight: 400;
    position: relative;
    bottom: -16px;
    background: #35363e;
    padding-right: -16px;
    width: 100vw;
    left: -16px;
    padding-bottom: 8px
}

    .phone .FooterMain .footerLinks .container {
        display: block;
        text-align: center;
        padding-top: 0
    }

        .phone .FooterMain .footerLinks .container > div:last-of-type {
            margin: 65px 0
        }

        .phone .FooterMain .footerLinks .container.display-flex > .root-footer__container > a:first-of-type {
            padding: var(--space-base-m)
        }

    .phone .FooterMain .footerLinks .root-footer__wrapper {
        border: none
    }

.phone .FooterMain .footerAppFlex .operators, .phone .footerAppFlex_iconsApp {
    display: flex;
    align-items: center;
    justify-content: center
}

    .phone .footerAppFlex_iconsApp > div {
        flex: 100
    }

.phone .FooterMain .footerAppFlex .operators {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-bottom: 24px
}

.footerAppFlex_iconsApp {
    display: flex
}

.layout-footer__cookies.FooterMain {
    text-align: center;
    padding-top: 10px;
    font-size: 0.625rem;
    font-weight: 400
}

:is(.phone,.tablet.portrait) .font-size-display {
    font-size: calc(var(--font-size-display) - 0.625rem)
}

:is(.phone,.tablet.portrait) :is(.heading1,h1) {
    font-size: calc(var(--font-size-h1) - 0.5rem)
}

:is(.phone,.tablet.portrait) :is(.heading2,h2) {
    font-size: calc(var(--font-size-h2) - 0.375rem)
}

:is(.phone,.tablet.portrait) :is(.heading3,h3) {
    font-size: calc(var(--font-size-h3) - 0.25rem)
}

:is(.phone,.tablet.portrait) :is(.heading4,h4) {
    font-size: calc(var(--font-size-h4) - 0.125rem)
}

:is(.phone,.tablet.portrait) :is(.heading5,h5) {
    font-size: calc(var(--font-size-h5) - 0.25rem)
}

:is(.phone,.tablet.portrait) :is(.heading6,h6) {
    font-size: calc(var(--font-size-h6) - 0.25rem)
}

.font-size-18 {
    font-size: 1.125rem
}

.color--gray-050 {
    color: var(--gray-050)
}

.color--gray-075 {
    color: var(--gray-075)
}

.color--gray-100 {
    color: var(--gray-100)
}

.color--gray-200 {
    color: var(--gray-200)
}

.color--gray-300 {
    color: var(--gray-300)
}

.color--gray-400 {
    color: var(--gray-400)
}

.color--gray-500 {
    color: var(--gray-500)
}

.color--gray-600 {
    color: var(--gray-600)
}

.color--gray-700 {
    color: var(--gray-700)
}

.color--gray-800 {
    color: var(--gray-800)
}

.color--gray-900 {
    color: var(--gray-900)
}

.color--yellow {
    color: var(--yellow)
}

.color--pink {
    color: var(--pink)
}

.color--green-dark {
    color: var(--green-dark)
}

.color--green-light {
    color: var(--green-light)
}

.color--red {
    color: var(--red)
}

.color--blue-dark {
    color: var(--blue-dark)
}

.color--blue-light {
    color: var(--blue-light)
}

.color--white {
    color: var(--pure-white)
}

.color--black {
    color: var(--pure-black)
}

.background--gray-050 {
    background-color: var(--gray-050)
}

.background--gray-075 {
    background-color: var(--gray-075)
}

.background--gray-100 {
    background-color: var(--gray-100)
}

.background--gray-200 {
    background-color: var(--gray-200)
}

.background--gray-300 {
    background-color: var(--gray-300)
}

.background--gray-400 {
    background-color: var(--gray-400)
}

.background--gray-500 {
    background-color: var(--gray-500)
}

.background--gray-600 {
    background-color: var(--gray-600)
}

.background--gray-700 {
    background-color: var(--gray-700)
}

.background--gray-800 {
    background-color: var(--gray-800)
}

.background--gray-900 {
    background-color: var(--gray-900)
}

.background--yellow {
    background-color: var(--yellow)
}

.background--pink {
    background-color: var(--pink)
}

.background--green-light {
    background-color: var(--green-light)
}

.background--green-dark {
    background-color: var(--green-dark)
}

.background--blue-dark {
    background-color: var(--blue-dark)
}

.background--blue-light {
    background-color: var(--blue-light)
}

.background--white {
    background-color: var(--pure-white)
}

.background--black {
    background-color: var(--pure-black)
}

.background--none {
    background: none
}

.background--red {
    background-color: var(--red)
}

.border--gray-050 {
    border-color: var(--gray-050) !important
}

.border--gray-075 {
    border-color: var(--gray-075) !important
}

.border--gray-100 {
    border-color: var(--gray-100) !important
}

.border--gray-200 {
    border-color: var(--gray-200) !important
}

.border--gray-300 {
    border-color: var(--gray-300) !important
}

.border--gray-400 {
    border-color: var(--gray-400) !important
}

.border--gray-500 {
    border-color: var(--gray-500) !important
}

.border--gray-600 {
    border-color: var(--gray-600) !important
}

.border--gray-700 {
    border-color: var(--gray-700) !important
}

.border--gray-800 {
    border-color: var(--gray-800) !important
}

.border--gray-900 {
    border-color: var(--gray-900) !important
}

.border--yellow {
    border-color: var(--yellow) !important
}

.border--green-light {
    border-color: var(--green-light) !important
}

.border--green-dark {
    border-color: var(--green-dark) !important
}

.border--blue-dark {
    border-color: var(--blue-dark) !important
}

.border--white {
    border-color: var(--pure-white) !important
}

.border--black {
    border-color: var(--pure-black) !important
}

.gap-base {
    gap: var(--space-base)
}

.space-between {
    justify-content: space-between
}

.display-inline-block {
    display: inline-block
}

.height-24 {
    height: 24px
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center
}

:focus-visible {
    color: var(--gray-200)
}

.width-inherit {
    width: inherit
}

.mr-40 {
    margin-right: 40px
}

.desktop .layout.-darkBackground900 .content::after {
    background-color: var(--gray-900)
}

.phone .layout:not(.layout-native) .btn.auto-width, .phone .blank-slate .btn.auto-width, .desktop .blank-slate .btn.auto-width {
    width: auto
}

.btn.auto-width.padding-x-l {
    padding-left: var(--space-l);
    padding-right: var(--space-l)
}

@media (min-width: 768px) {
    :root {
        --grid-outter-gutter: 60px;
        --grid-gutter: var(--space-m)
    }

    .container, .container-sm, .container-md {
        max-width: 720px
    }
}

@media (min-width: 1024px) {
    :root {
        --grid-outter-gutter: 44px;
        --grid-gutter: var(--space-m)
    }

    ::-webkit-scrollbar {
        width: 20px
    }

    ::-webkit-scrollbar-track {
        background: var(--gray-900)
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.3);
        border-radius: 20px;
        border: 4px solid var(--gray-900)
    }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255,255,255,0.4)
        }

    .container, .container-sm, .container-md, .container-lg {
        max-width: 960px
    }
}

@media (min-width: 1440px) {
    :root {
        --grid-outter-gutter: 68px;
        --grid-gutter: var(--space-xl)
    }

    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: calc( 1680px + var(--grid-outter-gutter) + var(--grid-outter-gutter));
        max-width: 1140px
    }
}

@media (min-width: 1920px) {
    :root {
        --grid-outter-gutter: 120px;
        --grid-gutter: var(--space-xxl)
    }
}

@media (prefers-reduced-motion: reduce), (update: slow) {
    *, ::before, ::after {
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-animation-delay: -1ms !important;
        animation-delay: -1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important
    }
}

@media screen and (max-width: 320px) {
    .o-cartDrawer .o-upBar.-cinemasDrawer.-notBenefits.-open {
        transform: inherit !important
    }
}

@media screen and (min-width: 321px) and (max-width: 375px) {
    .o-cartDrawer .o-upBar .o-upBarFloat {
        height: 52px
    }
}

@media screen and (min-width: 376px) and (max-width: 430px) {
    .o-cartDrawer .o-upBar .o-upBarFloat {
        height: 58px
    }
}

@media all and (max-height: 600px) {
    .o-stateHead.-insidePage {
        height: 75%
    }
}

@media screen and (max-width: 540px) {
    .popup-dialog.glasses-3d-popup {
        width: 90%
    }

        .popup-dialog.glasses-3d-popup .title {
            font-size: 1.5rem
        }
}

@media screen and (max-height: 568px) {
    .popup-dialog.glasses-3d-popup {
        position: absolute;
        top: calc(var(--header-size) - 132px)
    }

        .popup-dialog.glasses-3d-popup img {
            margin-bottom: 0
        }
}

@media all and (max-height: 736px) {
    .safetySeats {
        margin-top: 10vh
    }
}

@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 540px
    }
}

@media (max-width: 576px) {
    .header-top.has--header-min {
        padding-top: var(--space-base)
    }

    .root-footer__wrapper {
        height: 100%
    }

    .root-footer__container {
        flex-direction: column;
        display: flex;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center
    }
}