li.nav-item.send-logo {
    margin-left: inherit;
}

.header-content {
    align-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.BTN_ACTION {
    margin: 15px 0;
    width: 100%;
}

.HEADER_TEMAS {
    gap: 0;
    height: calc(100vh - 95px);
    left: 0;
    max-height: calc(100vh - 95px);
    position: fixed;
    right: 0;
    top: 100%;
    width: 100%;
    z-index: 10;
}

.HEADER_TEMAS.opened {
    top: 110px;
}

.open-action {
    align-content: stretch;
    align-items: stretch;
    border-top: solid 71px #000000ad;
    border: none;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 35px;
    justify-content: space-around;
    padding: 0;
    position: absolute;
    text-align: center;
    top: -50px;
    width: 100%;
}

.open-action .fa-chevron-down {
    display: none;
}

.open-action .icon {
    background: #007bff;
    text-transform: uppercase;
}

.bg-select-tema {
    padding: 15px;
}

.list-cards .card.produto {
    max-width: 100%;
    min-width: 100%;
}

.action-page {
    align-content: space-evenly;
    display: grid !important;
    flex-direction: column;
    flex-wrap: wrap;
    grid-template-areas:        "HEADER"        "CONTENT"        "NEXT";
    grid-template-columns: 100%;
    grid-template-rows: 45% 45% 10%;
    height: calc(100vh - 191px);
}

.row-content {
    width: 100% !important;
}

.opened i.fa.fa-chevron-up {
    transform: rotate(180deg);
}

.bg-select-tema {
    overflow-y: auto;
}

.help-article-overlay .article-box {
    height: 90%;
    width: 90%;
}

.menu-contents {
    height: calc(100% - 72px);
    max-width: 100vw;
    min-width: 100vw;
}

.hide-xs {
    display: none !important;
}

#MENU_VIEW {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 30px;
}

.menu-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 72px;
    max-height: 72px;
    max-width: 100%;
    min-height: 72px;
}

.menu-tabs ul {
    display: flex;
    flex-direction: row;
    height: 72px;
    min-height: 72px;
    overflow-x: scroll;
    overflow-y: hidden;
}

/* Seta que abre/fecha o sheet. O visivel continua 90x25 (rotacionado), mas no
   toque ~17px acima do sheet nao davam conta: o dedo caia na arte ou no menu.
   A borda transparente (background-clip: padding-box) aumenta so a area de
   clique -- 20px para cima e para os lados, ~130x45 --, sem mexer no desenho.
   Medidas antes do rotate(-90deg): border-right = cima, top/bottom = lados,
   left = 0 para nao invadir o conteudo do sheet. width/height/right/margin-top
   e border-radius (15 + 20) compensam a borda; o transform-origin gira em volta
   do mesmo centro de antes. !important no clip: os *_STYLES.css usam o
   shorthand `background`, que o resetaria. */
.menu-control {
    align-content: center;
    align-items: center;
    background: #252627;
    background-clip: padding-box !important;
    border: solid transparent;
    border-width: 20px 20px 20px 0;
    border-radius: 0 35px 35px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    height: 130px;
    justify-content: center;
    margin-top: -65px;
    position: absolute;
    right: calc(50% - 20px);
    top: -15px;
    transform: rotate(-90deg);
    transform-origin: 12.5px 50%;
    width: 45px;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
}

div#MENU_VIEW {
    bottom: 0;
    height: calc(100vh - 40%) !important;
    left: 0;
    max-width: 100%;
    position: fixed;
    right: 0;
    width: 100vw;
    z-index: 110;
    border-top: solid 10px;
}

.builder-cartazes div#MENU_VIEW {
    border-top: solid 10px #3f51b5;
}

div#MENU_VIEW.menu-collapsed {
    max-height: 72px;
    max-width: 100vw;
}

.cursor::after, .menu-tabs ul li a.active::after {
    right: -8px;
    top: 0;
    transform: rotate(180deg);
}

.cursor::before, .menu-tabs ul li a.active::before {
    bottom: inherit;
    left: -8px;
    top: 0;
    transform: rotate(-90deg);
}

.menu-tabs ul li {
    height: 72px;
    min-width: 72px;
    width: 72px;
}

.cursor {
    height: 55px;
    width: calc(100% / 7);
}

.render-content {
    margin-left: 0;
    margin: 0;
    padding-bottom: 150px;
    padding-left: 0;
    padding-right: 0;
}

/* Sheet aberto (#MENU_VIEW sem .menu-collapsed): o sheet fixo cobre 60vh (a
   regra `div#MENU_VIEW` mais acima usa 100vh - 40%), e os 150px da regra logo
   acima so dao conta dele recolhido (72px). Com qualquer aba aberta o fim da coluna da arte
   (paginacao, "Editar Produtos") ficava atras do menu, sem scroll que o
   trouxesse para cima dele. Mesma folga do estado recolhido: 150px - 72px = 78px.
   Irmao geral (~) em vez de :has(): #MENU_VIEW e #RENDER_VIEW sao filhos diretos
   do .builder, nessa ordem, no ENCARTE_BUILDER_V2 e no CARTAZ_BUILDER_V2.
   Em padding a % resolve contra a LARGURA, por isso 60vh e nao a expressao do
   sheet. Sem !important: o @media print do ENCARTE_BUILDER_V2.css zera esse
   padding com !important e continua valendo. */
#MENU_VIEW:not(.menu-collapsed) ~ #RENDER_VIEW .render-content {
    padding-bottom: calc(60vh + 78px);
}

div.render-pagination-tools {
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.pagination .btn i {
    margin: 0 !important;
}

.pagination .btn .text {
    display: none;
}

.enable-lazy-inputs .input-nome {
    width: 100%;
}


.enable-lazy-inputs .input-preco {
    width: 100%;
}


.resultados .produto-compacto-editavel {
    height: auto;
}

span.text-md {
    display: none;
}

.input-remover-produto {
    margin-left: 5px;
    /* width: calc(30% - 5px); */
}

span.text-xs {
    white-space: nowrap;
}

.resultados .produto .ADICIONAR i {
    margin: 0;
}

div#RENDER_VIEW {
    height: calc(100vh - 60px);
    height: fit-content;
    /* overflow-y: scroll; */
}

.menu-page {
    display: none;
}

li.nav-item.ml-auto {
    margin-left: 0;
}

.conteudo-page .xcrud {
    max-width: 100% !important;
}

.conteudo-page {
    padding: 0;
}

.LIST_CHOICE_MULT-item {
    width: calc(50% - 8px);
}

.conteudo_full {
    padding: 0;
}

.navbar .container-fluid {
    margin-left: -1rem;
    min-width: 100vw;
    width: 100vw !important;
}

div#navbarScroll {
    margin-left: -1rem;
    min-width: 100vw;
    width: 100vw;
}

a.nav-link.nav-destaque {
    border-radius: 0;
    margin-right: 0;
}



.tutorial-lupa-modal {
    left: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    min-height: 100%;
    min-width: 100%;
    right: 0 !important;
    top: 0 !important;
    width: 100%;
}

.card-atention-content {
    margin: 10px !important;
    padding: 40px 10px !important;
}

.card-atention.loc {
    padding: 10px 10px !important;
}

.card.card-selectable.select-image-item {
    align-items: center;
    display: flex;
    flex: 1;
    height: 100%;
    justify-content: center;
    min-width: 100%;
    width: 100%;
}

.overlay-login .box-login {
    min-width: 90%;
}


.content-video-tutorial {
    min-height: 290px;
    min-width: 100vw !important;
}

a.buuble-whatsapp {
    border-radius: 50%;
    bottom: 90px;
    height: 50px;
    width: 50px;
}

/* ==========================================================================
   Bolha do Suporte x bottom-sheet do builder (#MENU_VIEW)
   --------------------------------------------------------------------------
   Arquivo em ASCII puro, sem acentos (mantendo o padrao do resto da folha).

   Com o sheet recolhido (72px) a bolha em `bottom: 90px` fica logo acima dele.
   Ao abrir qualquer aba, o ENCARTE_BUILDER_V2.js sobe o `.builder` de z-index
   103 pra 105; como o `.builder` tem `position: relative`, ele forma o contexto
   de empilhamento de todo o sheet, que entao cobre a bolha (z-index 104).
   Resultado: o botao de Suporte sumia atras do menu com qualquer aba aberta.

   Aqui a bolha acompanha o sheet em vez de brigar com ele: sobe pro topo dele
   (mesma folga de 18px do estado recolhido: 90px - 72px) e ganha z-index acima
   do `.builder` aberto, seguindo clicavel sobre a area do render sem cobrir o
   conteudo do menu. O `calc` repete a expressao da altura do sheet da regra
   `div#MENU_VIEW` acima -- em elemento fixo, `bottom` e `height` resolvem a `%`
   contra o mesmo bloco (a viewport), entao os dois andam juntos se aquele
   valor mudar.
   ========================================================================== */
body:has(#MENU_VIEW:not(.menu-collapsed)) a.buuble-whatsapp {
    bottom: calc(100vh - 40% + 18px);
    z-index: 106;
}

a.buuble-whatsapp i {
    font-size: 33px;
    margin-top: 2px;
}

a.buuble-whatsapp span {
    display: none;
}

span.total-artigos {
    align-items: center;
    border-radius: 50%;
    display: flex;
    font-size: 10px;
    height: 100%;
    justify-content: center;
    top: 0;
    width: 100%;
}

.menu-tabs ul li a {
    font-size: 12px;
}

.ads.ads-horizontal {
    margin-left: -10px;
    min-width: 100vw;
    width: 100vw;
}

.menu-tabs ul li a i {
    font-size: 17px;
    margin-bottom: 5px;
}

body.loc {
    overflow-y: scroll;
}

.bar-fast-inputs label {
    font-size: 12px;
}


.row.LINE__BIG_CENTER .sociais {
    flex-wrap: wrap;
}

.xs-order--1 {
    order: -1;
}

.content-xhr .row-options .text-option {
    height: auto;
    max-width: 100%;
    padding: 0 15px;
}

.content-xhr .row-options .text-option h2 {
    font-size: 15px;
}

.content-xhr .row-options.active .fake-radio i {
    font-size: 20px;
}

.content-xhr .row-options .fake-radio {
    margin: 15px;
    width: auto;
}

.row-options.row-options-produto.card {
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    text-align: center;
    width: 100%;
}

nav.navbar.navbar-expand-lg.navbar-light.bg-light {
    z-index: 112;
}

.menu-tabs ul:not(.scroll-100-p)::before {
    bottom: 0;
    height: 100%;
    left: inherit !important;
    right: -16px;
}

.menu-tabs ul:not(.scroll-m-16)::after {
    bottom: 0;
    height: 100%;
    left: -16px;
    right: inherit !important;
}

.tema-item {
    padding: 4px;
}

.modal-render-premium .content-premium-modal {
    background: #ffffff;
    display: flex;
    flex-direction: column-reverse;
    height: calc(100vh - 70px) !important;
    justify-content: center;
    width: calc(100vw - 30px) !important;
}

.nocta .content-premium-modal {
    background: #212121;
}

.modal-render-premium .assine-ja {
    overflow-y: scroll;
    padding-bottom: 90px;
}

.full-render .tema-jornal {
    zoom: 30% !important;
}

.cta-modal {
    background: #fff;
    border-top: solid 1px #d9d9d9;
    bottom: 0;
    box-shadow: #00000024 1px 1px 20px 2px;
    left: 0;
    padding: 15px;
    position: fixed;
    right: 0;
}

svg.icon-assine {
    height: 40px;
    margin-left: 10px;
    margin-right: 10px;
    width: 40px;
}

.modal-render-premium .close {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: #00000063 -1px 0px 3px;
    color: #f44336;
    cursor: pointer;
    display: flex;
    font-size: 40px;
    height: 60px;
    justify-content: center;
    opacity: 1;
    position: absolute;
    right: 0px;
    text-align: center;
    top: 0px;
    width: 60px;
    z-index: 99;
}

.full-render .tema-item {
    border-radius: 0;
}

.info-modo {
    min-width: 100%;
}

.alert.alert-modo {
    display: flex;
    flex-wrap: wrap;
}

.plano-assinatura-v2 {
    width: 100% !important;
}

.header-name-v2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.text-plano {
    margin: 0 !important;
}


.select-images.menu-scroll-content {
    align-items: center;
    display: grid;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    margin-right: 0 !important;
    padding-right: 0;
}

.image-builder-editor {
    align-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.image-builder-editor .palco {
    max-width: 100% !important;
    min-width: 100% !important;
}

.produto-pallet-editor {
 
    align-items: stretch;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.content-xhr {
    min-height: inherit;
    min-width: inherit;
    padding: 8px;
}

.options-box {
    height: 100%;
    width: 100%;
}

.produto-box-editor {
    width: 100%;
}

.content-modal-select {
    min-height: 100%;
    min-width: 100%;
}

.content-modal-select .close {
    height: 40px;
    right: 10px;
    top: 10px;
    width: 40px;
}

.cores {
    flex: 1;
    height: max-content;
    max-height: inherit;
    overflow-y: scroll;
    overflow: hidden;
}

.option-row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-around;
    overflow: hidden;
    padding: 15px 0;
    row-gap: 5px;
}

.cor-item {
    font-size: 11px;
}

.render-template {
    border: none;
}

.render-modelos-choice {
    padding: 8px;
}

.scroll-cards-h {
    margin-left: -8px;
    padding: 0 8px;
    width: calc(100% + 16px);
}

.card-download-preview {
    max-width: 38%;
    min-width: 38%;
    width: 38%;
}

.etiqueta-v2-select-item {
    height: 40px;
}

.content-xhr .form-check {
    /* width: calc(50% - 1.5em); */
}

.d-flex.options-aplicar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 5px;
    justify-content: space-between;
}

.lista.list-cards,.bar-fast-inputs,.menu-metas.loc {
    padding: 0 8px;
}

.modal-frame-v2 .close {
    right: 0;
    top: 0;
}

.artigo-list-item .card,.no-conversion-help {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.footer-hello .actions {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

a.suporte-whatsapp {
    font-size: 11px;
    gap: 5px;
    height: 45px;
    margin: 0;
    padding: 0 10px !important;
}

a.btn-vou-tentar {
    font-size: 11px !important;
    gap: 5px !important;
    height: 45px !important;
    margin: 0 !important;
    padding: 0 10px !important;
}


a.suporte-whatsapp svg {
    height: 20px;
    width: 20px;
}

a.btn-vou-tentar svg {
    height: 20px;
    width: 20px;
}

.no-conversion-help h2 {
    display: block;
    display: none;
    margin-bottom: 6px;
    min-width: 100%;
    text-align: center;
    width: 100%;
}

.search-artigos {
    width: calc(100% - 53px);
}

.artigo-list-item .card h3 {
    font-size: 15px;
    margin: 5px;
}

.body-hello.topicos::before {
    background: #fff;
    box-shadow: 0 2px 7px 0px #00000069;
    content: ' ';
    display: flex;
    height: 60px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 99;
}

.btn-success.btnAvancar {
    width: 100%;
}

.modal-publicar a.more-info.linkHelp {
    display: block;
    font-size: 11px;
    margin: 0px 0 0 0;
    text-align: center;
}

.iconInstagram img, .iconFacebook img {
    width: 30px;
}

.content-modal-publicar span.num-step {
    font-size: 15px;
}

.modal-publicar .card-body h2 {
    font-size: 16px !important;
    font-weight: bold;
    letter-spacing: -0.4px;
}

.areaConectaContas h6 {
    font-size: 11px;
}

.modal-publicar span.badge.bg-secondary {
    font-size: 7px !important;
    padding: 3px 0 !important;
}

.linkHelp svg {
    margin: 5px -5px -2px -5px;
}

.select-facebook-feed, .select-instagram-feed, .select-instagram-stories {
    display: flex;
}

.midia-item.card.p-3.mb-3 {
    margin: 0;
    padding: 5px !important;
}

.selecionaDataPublicacao label.form-check-label {
    font-size: 11px;
}

.agendamento-item {
    margin: 5px;
}

.boxAcoesPublicacao .float-end {
    display: block !important;
    float: none !important;
    margin-top: 22px;
    width: 100%;
}

.boxAcoesPublicacao .btn {
    margin: 5px 10px;
    width: 100%;
}

button#disconnect-facebook {
    border-radius: 30px;
    font-size: 9px;
    margin: 10px 0px 10px -8px !important;
}

.select-instagram-feed label, .select-facebook-feed label {
    font-size: 12px;
}

.modal-publicar .areaBtnPublicar, .modal-publicar .areaBtnPublicar button.btn {
    display: block;
    width: 100%;
}

.nomeOpcPublicacao, div.nomeOpcPublicacao small {
    font-size: 10px;
}

span.areaBtnDesconecta {
    display: grid;
}

div#make-midia-meta {
    display: grid;
    justify-content: start;
}

div.switchGroup {
    display: grid;
    justify-content: start;
}

.modal-publicar .areaConectaContas, .modal-publicar .areaPortalOfertas {
    margin: 0;
}

.modal-publicar .card {
    padding: 0 !important;
    margin: 0 !important;
}

.tituloGrupoPub {
    font-size: 17px;
}

.areaConectaContas span.iconInstagram svg, .areaPortalOfertas span.iconInstagram svg {
    width: 32px;
    height: 32px;
}

.alertaContaInstagram {
    margin-bottom: 10px;
    font-size: 12px;
}

.content-modal-publicar h1 + p {
    font-size: 13px;
}

.content-modal-publicar h1, .content-modal-publicar h1 span {
    font-size: 26px !important;
}

.content-modal-publicar .card-title {
    font-size: 13px;
    font-weight: bold;
}

.col-logo-coroa {
    display: none;
}

.cadastreseMobile {
    display: block;
}

div.bemVindoMobile {
    display: block;
}

div.subNotificacoes {
    right: 20px;
}