/*config bdo tamanho da tela*/
* {
    touch-action: manipulation !important;
}

html {
    margin: 0;
    overflow-x: hidden; /* Impede a rolagem horizontal */
    background-color: white;
    height: 100dvh; /* Usa 100% da altura visível */
    font-family: 'Montserrat', sans-serif;
    -webkit-overflow-scrolling: touch; /* Para dispositivos iOS */
}

body {
    background-image: var(--url-imagem-fundo-cliente);
    background-size: cover;
}

/* Tag responsavel por aplicar o desfoque no conteúdo fora do container */
#background-body {
    /*    background-color: rgba(255, 255, 255, 0.3);*/
    backdrop-filter: blur(6px);
}

#normal-modal {
    max-width: var(--tamanhoLarguraDaTela);
    margin: 0 auto; /* Centraliza o conteúdo */
    height: var(--AlturaTela); /* Permite que o body ocupe toda a altura do html */
    overflow-y: hidden; /* Nao permite a rolagem vertical */
    box-sizing: border-box; /* Para incluir o padding na largura total */
}


.delivery-tamanho-max-dialog-pequeno {
    max-width: var(--tamanhoLarguraDaTela);
    width: 100%;
    margin-right: 15px;
    margin-left: 15px;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

.delivery-tamanho-max-dialog-pequeno-inferior {
    height: fit-content;
    position: fixed;
    top: unset;
    bottom: 0px
}

.pks-AlturaAppBar {
    height: var(--tamanhoAlturaAppBar) !important;
}

/*fim config tela*/

/* Configurações genericas */
.Width100 {
    width: 100%;
}

.Width75 {
    width: 75% !important;
}

.Height100 {
    height: 100%
}

.HeightInherit {
    height: inherit;
}

.Bold {
    font-weight: 700;
}

.Italic {
    font-style: italic !important;
}

.BorderNone {
    border-radius: 0;
    border: 0px solid transparent;
}

.pks-textPreto {
    color: #212529 !important;
}

.BackgroundInherit {
    background-color: inherit !important;
}

.BackgroundTransparent {
    background-color: transparent !important;
}

.TextTransformNone {
    text-transform: none !important;
}

.FlexBasisUnset {
    flex-basis: unset
}

.TextPreWrap {
    white-space: pre-wrap
}

.BreakWord {
    word-break: break-word;
}

.Top0 {
    top: 0;
}

/*Fim Configurações genericas*/
/*classes mudblazor*/
.mud-dialog-container {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: var(--tamanhoLarguraDaTela) !important;
    height: 100% !important;
    z-index: var(--mud-zindex-dialog) !important;
    left: unset !important;
}

.mud-dialog .mud-dialog-content {
    background-color: var(--corFundo);
    padding: 0px;
    margin: 0px;
}

.mud-dialog .mud-dialog-title {
    padding: 0px !important;
}

.mud-overlay .mud-overlay-scrim {
    background-color: inherit !important;
}

.mud-dialog.mud-dialog-fullscreen {
    -webkit-animation: mud-open-dialog-center .0s cubic-bezier(0.39, 0.575, 0.565, 1) both !important;
    animation: mud-open-dialog-center .0s cubic-bezier(0.39, 0.575, 0.565, 1) both !important;
}

.mud-dialog-container.mud-dialog-center {
    align-items: center;
    justify-content: flex-start;
}

.mud-icon-size-medium {
    font-size: 1.8rem;
}

.mud-icon-button:hover, .mud-icon-button:focus-visible {
    background-color: transparent;
}

.mud-checkbox:focus-within .mud-icon-button .mud-icon-root {
    transform: scale(1.21);
}

.mud-dialog-title button {
    width: 40px !important;
    height: 40px !important;
    margin-right: 8px !important;
}

    .mud-dialog-title button span svg {
        width: 24px !important;
        height: 24px !important;
    }

/*fim classes mudblazor*/
.imagemCLiente {
    box-shadow: 0px 0px 0px 4000px rgba(var(--corAlpha), var(--IntensidadeCorAlpha)) inset;
    background-image: var(--url-imagem-fundo-cliente) !important;
    background-size: cover;
}

.padraoCorBotaoTransparenteIncio {
    color: var(--corPadraoBotaoTransparente);
    border: 3px solid #FFF !important;
}

.padraoFontCorTransparente {
    color: var(--corPadraoBotaoTransparente);
}

.padraoCorDestaque {
    background-color: var(--corDestaque);
}

    .padraoCorDestaque:hover {
        background-color: var(--corDestaque) !important;
    }

.padraoTextoCorDestaque {
    color: var(--corTextoDestaque) !important;
}

.imgClienteGrande {
    height: var(--imgClienteGrandeAltura);
    width: var(--imgClienteGrandeAltura);
}

.carouselSelecionado {
    background-color: var(--corPadraoBackGround);
    border-color: var(--corPadrao);
}

.padraoCorCarrinho {
    background-color: var(--corPadraoCarrinho);
}

.padraoCorItalic {
    color: var(--corPadraoItalic);
    font-style: italic;
}

.padraoCor {
    color: var(--corPadrao);
}

.padraoCorImagem {
    filter: var(--filter);
}

.fundoCliente {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    width: 100%;
}

.bordaSelecionada {
    border: 2px solid var(--corPadrao) !important;
    box-shadow: 0.5px 0.5px 10px var(--corPadrao) !important;
}

.btn {
    border-radius: 10px;
    box-shadow: 0 0px 5.5px rgb(0 0 0 / 0.3);
    height: 50px;
    color: #fff !important;
}

.pks-CorVermelhoPromocao {
    color: #FF8485 !important;
    text-decoration: line-through;
}

.pks-CorVermelhoPromocaoDestaque {
    color: #C80605;
    text-decoration: line-through;
}

.pks-cardPromocao {
    position: absolute;
    bottom: 0;
    color: white;
    width: 100%;
    padding: 5px;
    object-fit: cover
}

.pks-flag-retirada {
    height: 30px;
    width: 22px;
    background-color: var(--mud-palette-primary);
    color: white;
    font-size: 15px;
    border-radius: 7.5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.removeHoverBotao:hover {
    background-color: transparent !important;
}

.div-button-material-carrinho {
    width: 100px;
    height: 100px;
    margin: 5px;
    border-radius: 5px;
    box-shadow: 0 0px 5.5px rgb(0 0 0 / 30%);
    background: white !important;
}

.imagem-material-carrinho {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
}

.box-aguarde {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999999;
}

.div-material-carrinho {
    width: 100px;
    margin: 0 5px;
}

.carouselListaProdutosHorizontal {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

    .carouselListaProdutosHorizontal::-webkit-scrollbar {
        display: none;
        user-select: none;
    }

.gradient-vertical-produto {
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.9)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    box-shadow: 0 3px 4px rgb(0 0 0 / 0.3);
    position: relative;
    border-radius: 5px;
    height: 100px;
    width: 100%;
    margin-top: -100px;
}

.gradient-vertical-material-favorito {
    display: inline-block;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.9)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    box-shadow: 0 3px 4px rgb(0 0 0 / 0.3);
    position: relative;
    border-radius: 10px;
    height: 160px;
    width: 100%;
    margin-top: -160px;
}

.cardMaterial {
    border-radius: 16px;
    box-shadow: 0 0px 5.5px rgb(0 0 0 / 0.3);
    height: 116px;
    background-color: white;
    width: 100%;
    display: flex;
}

.DropShadow:hover {
    background-color: inherit !important;
}

.cardMaterialCombo {
    border-radius: 15px;
    box-shadow: 0 0px 5.5px rgb(0 0 0 / 0.3);
    margin: 8px 15px 0px 15px;
    height: 115px;
    background-color: white;
}

.cardMaterialComboTitulo {
    font-size: 12px;
    text-align: left;
    font-weight: bold;
    margin-bottom: 2px;
    max-height: 33px;
    line-height: 14px
}

.cardMaterialComboDescricao {
    Color: #585858;
    overflow: hidden;
    font-size: 12.5px;
    text-transform: initial;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: left;
    min-height: 30px;
    max-height: 30px;
    line-height: 14px
}

.muddivider-color {
    background-color: var(--mud-palette-primary);
    height: 2px !important;
}

.borda-bottom-cor-cinza {
    border-bottom: 0.5px solid #DFDFDF;
}

.fundo-cor-cinza {
    background-color: var(--corFundo);
}

    .fundo-cor-cinza:hover {
        background-color: var(--corFundo);
    }

.fundoCinzaTransparent {
    background-color: rgba(8, 8, 8, 0.35) !important;
}

.fundoCorPadrao {
    background-color: var(--corPadrao);
}

    .fundoCorPadrao:hover {
        background-color: var(--corPadrao);
    }

.fundoBranco {
    background-color: #fff;
}

.imgCardMaterial {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    padding: 0px !important;
    margin: 0px !important;
    object-fit: cover !important;
    max-width: 100%;
    min-width: 100%;
    height: 108px;
    max-height: 110px;
}

.imgCardMaterial-invertido {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 0px !important;
    margin: 0px !important;
    max-width: 100%;
    min-width: 100%;
    height: 100%;
}

.pickgradient {
    display: inline-block;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.50) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.50)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.50) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.50) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.50) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.50) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    width: 100%;
    position: relative;
    border: inherit;
    overflow: hidden
}

.maxline-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: initial;
    overflow-wrap: break-word;
    word-break: break-all;
}

.maxline-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: initial;
    overflow-wrap: break-word;
    word-break: break-word;
}

.pks-nomeMaterialCard {
    min-height: 25px;
    max-height: 32px;
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pks-descricaoMaterialCard {
    height: 54px;
    max-height: 54px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: initial;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #585858;
    text-align: justify;
    word-spacing: -2px;
}

.pkscol-30 {
    flex: 0 0 30%;
    max-width: 30%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.pkscol-70 {
    flex: 0 0 70%;
    max-width: 70%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.pks-btn-height-input {
    height: 30px;
}

.pks-animacaoMoto {
    animation: slideInOut 5s ease-in-out infinite;
}

.pks-animacaoTextoMoto::after {
    animation: mensagemEnviaPedido 45s infinite;
    content: '';
}

.pks-indicadorPagina {
    border-width: 2px;
    border-color: transparent;
    width: 120%;
}

.padraoCorIconeTransparenteIncio {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(196deg) brightness(105%) contrast(102%);
}

.delivery-footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    text-align: center;
}

.digitos {
    height: 38px;
    width: 30px;
    font-size: 23px;
    text-align: center;
    border-radius: 7.5px;
    border: 0.375px solid #cecece;
}

.cdpix {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 400px;
}

.imgCupomDetalhe {
    width: 100%;
    height: 250px
}

.pks-mudchip-pontos {
    height: 15px !important;
    background-color: var(--corDestaque);
}

    .pks-mudchip-pontos:hover {
        background-color: var(--corDestaque) !important;
    }

.pks-mudchip-pontos-qtd {
    font-size: 13px;
    color: var(--corTextoDestaque);
}

.pks-mudchip-pontos-label {
    font-size: 11px;
    color: var(--corTextoDestaque);
}

.pks-textoBranco {
    color: #fff !important;
}

.pks-fundocinza {
    background-color: lightgray;
}

.pks-linkTexto {
    font-size: 11px;
    color: #0058B7 !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    font-weight: Bold;
    background-color: inherit;
    backface-visibility: hidden;
}

.pks-LinkTextoCardProduto {
    font-size: 13px;
    color: #0058B7 !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    background-color: white !important;
    backface-visibility: hidden;
    padding: 0 0 0 3px !important;
    margin-top: -11px;
    text-transform: capitalize;
}

/* Estização para o carrosel de menu da página de cardápio */

.pks-section-container {
    width: 100%;
    max-width: var(--tamanhoLarguraDaTela);
    padding: 8px 4px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

    .pks-section-container::-webkit-scrollbar {
        display: none;
        user-select: none;
    }

.pks-section-item {
    margin: 0 8px;
}

.pks-section-item-selected {
    border-bottom: 2.4px solid var(--mud-palette-primary);
}

.pks-section-item-button {
    color: var(--mud-palette-primary);
    white-space: nowrap;
    height: 20px !important;
    font-size: 16px;
}

    .pks-section-item-button:hover {
        cursor: pointer;
    }

/* Realiza o tratamento de tela para exibir o botão de scroll na versão desktop */
@media screen and (min-width: 1025px) and (orientation: landscape) {

    .pks-section-container {
        flex-direction: row;
        flex-wrap: inherit;
        overflow-x: inherit;
        scrollbar-width: inherit;
        -ms-overflow-style: none;
        overflow: auto;
    }

        .pks-section-container::-webkit-scrollbar {
            display: inherit;
            user-select: inherit;
        }
}


/*Padrão PEKUS*/

.pks-inputForm {
    background-color: white;
}

.pks-inputform-conteudo {
    height: 3.2vh;
    font-size: 1.3em !important;
}

.pks-labelForm {
    margin-bottom: 4px;
    margin-top: 16px;
}

.pks-labelForm-com-bullet {
    display: flex;
    align-items: center;
}

.pks-labelForm-titulo {
    margin-top: 0px !important;
    font-style: italic;
}

.pks-form-box {
    background: white;
    padding: 0;
    box-sizing: border-box;
}

.pks-input-form-item {
    padding-top: 8px;
    padding-bottom: 8px;
    background: white;
}

.pks-fontSize20 {
    font-size: 20px !important;
}

.pks-fontSize13 {
    font-size: 13px !important;
}

.pks-fontSize12 {
    font-size: 12px !important;
}

.pks-botao-md {
    width: 160px;
}

.pks-Bullet {
    fill: var(--mud-palette-primary);
    height: 0.5rem !important;
}

.pks-IconPequeno {
    font-size: 3.8rem !important;
}

    .pks-IconPequeno .mud-icon-button-label .mud-icon-root {
        font-size: 3.8rem !important;
    }

    .pks-IconPequeno:focus {
        color: white !important;
        background-color: var(--corPadrao) !important;
        box-shadow: 1px 1px 5px var(--corPadrao);
    }

    .pks-IconPequeno .inverso {
        color: white !important;
        background-color: var(--corPadrao) !important;
    }

.pks-IconMedio {
    font-size: 8rem !important;
}

.pks-IconExtraGrande {
    font-size: 15rem;
}

.pks-icone-confirmar {
    background-color: var(--mud-palette-primary);
    color: #FFF !important;
    max-width: 54px !important;
    max-height: 54px !important;
}

    .pks-icone-confirmar .mud-svg-icon {
        padding: 13px !important;
    }

    .pks-icone-confirmar:hover {
        background-color: var(--mud-palette-primary);
        color: #FFF !important;
        opacity: 0.7 !important;
    }

.pks-textWhatsapp {
    color: #25D366;
}

.btn-whatsapp {
    color: #fff;
    background-color: #25D366 !important;
}

    .btn-whatsapp:hover {
        color: #fff;
        background-color: #25D366 !important;
    }

.btn-facebook {
    background-color: #0D5488 !important;
}

    .btn-facebook:hover {
        color: #fff !important;
        background-color: #0D5488 !important;
    }

.tamanho-imagem-container {
    max-width: 150px;
}

.tamanho-imagem-bandeira-cartao {
    width: 50px;
    height: 30px;
}

.padraoCorCancelado {
    color: darkred;
}

.removeScroll {
    overflow-y: hidden !important;
}

.pks-hiperlink {
    color: #104e67 !important;
    text-decoration: none !important;
    background-color: transparent !important;
    text-decoration: underline !important;
}

    .pks-hiperlink:focus {
        font-weight: 700;
    }

.pks-CardImagemInfinita {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: var(--AlturaCardImagemInfinita);
    height: var(--AlturaCardImagemInfinita);
}

.pks-ConteudoImagemInfinita {
    padding-top: var(--AlturaCardImagemInfinita);
}

.pks-boxShadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 -4px 8px rgba(0, 0, 0, 0.1), 4px 0 8px rgba(0, 0, 0, 0.1), -4px 0 8px rgba(0, 0, 0, 0.1);
}

/* Configurações dos Dialogs*/
.pks-DialogContent {
    padding: 8px 8px !important;
    overflow-x: hidden;
    overflow-y: auto;
    height: var(--AlturaTela); /* O conteudo irá ocupar a tela inteira*/
    background-color: var(--corFundo);
    display: flex;
    flex-direction: column;
}

.pks-DialogContent-titulo {
    height: calc(var(--AlturaTela) - var(--tamanhoAlturaAppBar)) !important; /* Utilizado para quando se tem apenas o titulo no dialog */
}

.pks-DialogContent-titulo-BotaoConfirmacao {
    margin-bottom: var(--tamanhoAlturaAppBar) !important;
    height: calc(var(--AlturaTela) - var(--tamanhoAlturaAppBar) - var(--tamanhoAlturaAppBar)) !important /* Utilizado quando se tem o titulo e o botão de confirmacao*/
}

.pks-DialogContent-titulo-BotaoPersonalizado {
    margin-bottom: var(--tamanhoAlturaDialogAction) !important;
    height: calc(var(--AlturaTela) - var(--tamanhoAlturaDialogAction) - var(--tamanhoAlturaAppBar)) !important /* Utilizado quando se tem o titulo e botões personalizados*/
}

.pks-DialogContent-BotaoPersonalizado-SemTitulo {
    margin-bottom: var(--tamanhoAlturaDialogAction) !important;
    height: calc(var(--AlturaTela) - var(--tamanhoAlturaDialogAction)) !important /* Utilizado quando se tem botao personalizado e não tem titulo*/
}

.pks-DialogActions {
    padding: 1px 16px 0px 16px !important;
    box-shadow: 0px -2px 4px #757575;
    height: var(--tamanhoAlturaDialogAction);
    background-color: white;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
    width: 100%;
}

.pks-DialogActions-BotaoConfirmacao {
    height: var(--tamanhoAlturaAppBar) !important; /*Utilizado a mesma altura do App Bar para ter valores padronizados*/
    background-color: var(--corFundo);
    box-shadow: none;
}

.pks-AlturaTituloSkeleton {
    height: 35px;
}

.pks-OpacidadeEsgotado {
    opacity: 0.5;
}

.pks-AlturaCardfavorito {
    height: 160px;
}

.pks-AlturaCardRestaurante {
    height: 216px;
}

.pks-ImgCardCompleto {
    max-width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    width: 100%;
    position: absolute;
    display: block;
}

.pks-PerdaWebSocket {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center !important;
    text-align: center;
    padding: 10px;
    color: white;
    font-size: 1.40rem;
}

.pks-pagina {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 8px;
    padding-right: 8px;
}

.pks-mensagem-centralizada {
    font-size: 16px !important;
}

#reconnect-modal {
    display: none;
    width: 100%;
    height: 100%;
    white-space: pre-line;
}

/* Se suportado pelo navegador, utilizado a altura */
@supports (height: 100dvh) {
    .pks-DialogContent {
        height: 100dvh; /* O conteudo irá ocupar a tela inteira*/
    }

    .pks-DialogContent-titulo {
        height: calc(100dvh - var(--tamanhoAlturaAppBar)) !important; /* Utilizado para quando se tem apenas o titulo no dialog */
    }

    .pks-DialogContent-titulo-BotaoConfirmacao {
        margin-bottom: var(--tamanhoAlturaAppBar) !important;
        height: calc(100dvh - var(--tamanhoAlturaAppBar) - var(--tamanhoAlturaAppBar)) !important /* Utilizado quando se tem o titulo e o botão de confirmacao*/
    }

    .pks-DialogContent-titulo-BotaoPersonalizado {
        margin-bottom: var(--tamanhoAlturaDialogAction) !important;
        height: calc(100dvh - var(--tamanhoAlturaDialogAction) - var(--tamanhoAlturaAppBar)) !important /* Utilizado quando se tem o titulo e botões personalizados*/
    }

    .pks-DialogContent-BotaoPersonalizado-SemTitulo {
        margin-bottom: var(--tamanhoAlturaDialogAction) !important;
        height: calc(100dvh - var(--tamanhoAlturaDialogAction)) !important /* Utilizado quando se tem botao personalizado e não tem titulo*/
    }
}


@media screen and (min-width:320px) and (max-width:1024px) and (orientation:landscape) {
    html {
        height: 100% !important;
    }

    body {
        max-width: 100% !important;
    }

    .delivery-tamanho-max-dialog {
        max-width: 100% !important;
    }

    .delivery-tamanho-max-dialog-pequeno {
        max-width: 100% !important;
    }

    .mud-dialog-container {
        max-width: 100% !important;
    }

    #reconnect-modal {
        max-width: 100% !important;
    }
}

@keyframes slideInOut {
    0% {
        transform: translateX(-100%); /* Inicia fora da tela, à esquerda */
    }

    50% {
        transform: translateX(0); /* Chega na posição normal, no centro */
    }

    100% {
        transform: translateX(200%); /* Sai para a direita */
    }
}

@keyframes mensagemEnviaPedido {
    0% {
        content: 'Estamos finalizando os preparativos com atenção e cuidado. Agradecemos pela sua paciência.';
    }

    25% {
        content: 'Cada detalhe está sendo cuidadosamente preparado. Em breve, tudo estará pronto.';
    }

    50% {
        content: 'Seu pedido está sendo processado com dedicação. Agradecemos pela sua compreensão.';
    }

    75% {
        content: 'Estamos cuidando de todos os aspectos para garantir a melhor experiência. Agradecemos pela sua espera.';
    }

    100% {
        content: 'Agradecemos pela sua paciência. Estamos finalizando todos os processos com zelo e cuidado.';
    }
}

:root {
    /*Personalizações*/
    --corPadrao: #3f7e47;
    --corPadraoTexto: #ffffff;
    --corPadraoCarrinho: #18301c;
    --corPadraoBotaoTransparente: #ffffff;
    --corDestaque: #3f7e47;
    --corTextoDestaque: #ffffff;
    --corAlpha: 0,0,0;
    --IntensidadeCorAlpha: 0.5;
    --imgClienteGrandeAltura: 150px !important;
    --url-imagem-fundo-cliente: url(https://adm.eped.delivery/eped/epedfotos/49/lojas/1BG.png);
    /*Personalização biblioteca*/
    --mud-palette-primary: var(--corPadrao) !important;
    --mud-palette-primary-darken: var(--corPadrao) !important;
    --mud-palette-primary-lighten: var(--corPadrao) !important;
    --mud-palette-appbar-background: var(--corPadrao) !important;
    --mud-palette-primary-text: var(--corPadraoTexto) !important;
    --mud-palette-secondary-text: var(--corPadraoTexto) !important;
    --mud-palette-tertiary-text: var(--corPadraoTexto) !important;
    --mud-palette-info-text: var(--corPadraoTexto) !important;
    --mud-palette-error-text: var(--corPadraoTexto) !important;
    --mud-palette-dark-text: var(--corPadraoTexto) !important;
    --mud-palette-appbar-text: var(--corPadraoTexto) !important;
    --mud-palette-dark: var(--corPretoPadrao) !important;
    --mud-palette-text-primary: var(--corPretoPadrao) !important;
    /*variaveis globais*/
    --corPretoPadrao: #212529;
    --tamanhoLarguraDaTela: 450px;
    --corFundo: #F9F9F9;
    --tamanhoAlturaDialogAction: 100px;
    --tamanhoAlturaAppBar: 60px;
    --AlturaTela: 100%;
    --AlturaCardImagemInfinita: 200px;
}